/* ==========================================
   DRILLBIT GUIDE ANIMATIONS v3
   ========================================== */

/* === CONTAINER === */
.guide-anim{border:1px solid #e2e2e0;border-radius:16px;overflow:hidden;margin:28px 0 32px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.ga-slides{position:relative}
.ga-slide{display:none}
.ga-slide.active{display:block}

.guide-anim{position:relative;z-index:0;overflow:hidden;border-radius:14px;margin-bottom:24px;border:1px solid #e5e5e0;background:#fff}

/* === VIEWPORT (animation stage) === */
.ga-viewport{position:relative;height:340px;overflow:hidden;background:#eceae6}

/* === INFO === */
.ga-info{padding:18px 22px 14px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-step-badge{display:inline-block;font-size:10px;font-weight:700;color:#1967D2;background:#E8F0FE;padding:4px 12px;border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.ga-info h3{font-size:16px;font-weight:600;margin-bottom:4px;color:#1a1a1a;text-align:left;hyphens:manual;-webkit-hyphens:manual}
.ga-info p{font-size:13px;color:#6b6b6b;line-height:1.55;margin:0;text-align:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:normal}

/* === CONTROLS === */
.ga-controls{display:none}
.ga-viewport{cursor:pointer;position:relative}
.ga-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-overlay.on{opacity:1;pointer-events:auto}
.ga-overlay-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ga-overlay-btn svg{width:22px;height:22px;color:#333;margin-left:3px}
.ga-overlay-btn .reset-ico{position:absolute;bottom:10px;right:10px}
.ga-reset-float{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:201;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-reset-float.on{opacity:1;pointer-events:auto}
.ga-reset-float svg{width:13px;height:13px;color:#333}
.ga-progress{height:3px;background:#eee;border-radius:2px}
.ga-progress-bar{height:100%;background:#4285f4;transition:width .5s ease;border-radius:2px}

/* === CURSOR === */
.ga-cursor{position:absolute;width:20px;height:24px;z-index:100;pointer-events:none;opacity:0;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.ga-cursor.vis{opacity:1}

/* === SCENE: each phase lives in a .sc layer === */
.sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;font-family:var(--db-font,system-ui,sans-serif)}
.sc.on{opacity:1;pointer-events:auto}

/* ---- SCENE 1: EMAIL ---- */



@keyframes npop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(-8px)}100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}

@keyframes ngone{to{opacity:0;transform:translateX(-50%) scale(.9) translateY(-8px)}}







@keyframes ecpop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}














@keyframes egl{0%,100%{opacity:.3;box-shadow:0 0 0 0 rgba(66,133,244,.2)}50%{opacity:1;box-shadow:0 0 0 6px rgba(66,133,244,0)}}



/* ---- SCENE 2: HOMEPAGE ---- */













/* Dropdown */







/* ---- SCENE 3: LOGIN ---- */

























@keyframes spin{to{transform:rotate(360deg)}}

/* Typing cursor */

@keyframes tcb{50%{opacity:0}}

/* ---- SCENE 4: DASHBOARD ---- */






























/* ---- TIP CALLOUT (inline, not overlay) ---- */
.ga-tip{position:absolute;z-index:40;background:#fffde7;border:1px solid #f0e68c;border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:flex-start;gap:8px;max-width:280px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-tip.on{opacity:1;transform:translateY(0)}
.ga-tip-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.ga-tip-ico svg{width:20px;height:20px}
.ga-tip-txt{font-size:11px;color:#5d4e00;line-height:1.5}
.ga-tip-txt b{font-weight:600;color:#3e3300}

/* ---- ERROR POPUP (kept for other uses) ---- */









/* ---- LOGIN FIELD ERROR STATE ---- */


@keyframes fshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---- SUCCESS CHECKMARK ---- */






/* ---- TOAST NOTIFICATION ---- */
.ga-toast{position:absolute;top:10px;right:10px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;z-index:50;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;max-width:260px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-toast.on{opacity:1;transform:translateY(0)}
.ga-toast-ico{width:22px;height:22px;flex-shrink:0}
.ga-toast-ico svg{width:22px;height:22px}
.ga-toast-txt{font-size:11px;color:#333;line-height:1.4}
.ga-toast-bar{position:absolute;bottom:0;left:10px;right:10px;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.ga-toast-bar-fill{height:100%;background:#1D9E75;width:100%;border-radius:2px}
.ga-toast-bar-fill.run{animation:toastBar 2s linear forwards}
@keyframes toastBar{from{width:100%}to{width:0%}}

/* ---- FORGOT PASSWORD PAGE ---- */














/* ---- RESET PASSWORD PAGE ---- */




/* ---- RESET EMAIL CARD (compact) ---- */













/* ---- PROFILE DROPDOWN ---- */



















/* ---- USER DASHBOARD (after switch) ---- */


































/* ---- ACCOUNT INFO PAGE ---- */



























/* ---- CHANGE PASSWORD PAGE ---- */























/* ---- ANNOUNCEMENTS PAGE ---- */























/* Slide panel */



















/* Announcement item (after creation) */








/* ---- FULL DASHBOARD (for dashboard article) ---- */
.sc-dashfull{background:#fff;display:flex}
.sc-consdash{background:#fff;display:flex}
.df-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.df-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.df-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.df-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.df-nav{padding:8px 12px;font-size:10px;color:#999;display:flex;align-items:center;gap:7px;margin-right:6px;border-radius:0 7px 7px 0}
.df-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.df-nav.act{background:#4285f4;color:#fff;font-weight:600}
.df-nav.act i{opacity:.5}
.df-body{flex:1;padding:10px 14px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.df-body::-webkit-scrollbar{display:none}
.df-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:8px}
.df-uname{font-size:10px;color:#888}
.df-uname b{color:#333}
.df-av{width:28px;height:28px;border-radius:50%;background:#9c5fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.df-stats{display:flex;gap:8px;margin-bottom:10px}
.df-stat{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;position:relative;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.df-stat.pop{opacity:1;transform:translateY(0)}
.df-stat-lbl{font-size:9px;color:#aaa;margin-bottom:1px}
.df-stat-val{font-size:18px;font-weight:700;color:#1a1a1a}
.df-stat-ico{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.df-stat-ico svg{width:12px;height:12px}
.df-row{display:flex;gap:8px;margin-bottom:8px}
.df-panel{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;min-height:80px;position:relative;overflow:hidden}
.df-panel.pop{opacity:1;transform:translateY(0)}
.df-panel-hd{font-size:10px;font-weight:600;color:#1a1a1a;margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}
.df-panel-hd small{font-size:8px;color:#bbb;font-weight:400}
.df-panel-hd .df-hm{width:14px;height:10px;display:flex;flex-direction:column;gap:2px;cursor:default}
.df-hm span{display:block;width:100%;height:2px;background:#ccc;border-radius:1px}
/* Mini bar chart */
.df-mini-bars{display:flex;align-items:stretch;gap:3px;height:65px;margin-top:6px}
.df-mini-bar{width:100%;background:#4285f4;border-radius:2px 2px 0 0;min-width:6px;height:0;transition:height .7s cubic-bezier(.34,1.56,.64,1)}
.df-mini-bar-lbl{font-size:7px;color:#ccc;text-align:center;margin-top:2px}
.df-mini-bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
/* SVG donut/pie */
.df-donut{width:70px;height:70px;margin:4px auto}
.df-donut circle{fill:none;stroke-width:8;transition:stroke-dasharray 1.2s ease}
.df-donut text{font-size:8px;font-weight:600;fill:#1a1a1a;font-family:var(--db-font,system-ui,sans-serif)}
.df-donut .donut-track{stroke:#eee}
.df-donut .donut-fill{stroke:#4285f4;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-donut .donut-fill2{stroke:#1a3a8a;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-pie{width:60px;height:60px;border-radius:50%;margin:4px auto;position:relative;overflow:hidden;background:conic-gradient(#4285f4 0% 0%,#eee 0% 100%);transition:background 1s ease}
.df-legend{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.df-legend-item{display:flex;align-items:center;gap:3px;font-size:7px;color:#888}
.df-legend-item i{width:6px;height:6px;border-radius:50%;display:block}

/* Similarity ranges line */






/* Dashboard highlight for individual sections */
.df-stat.hl,.df-panel.hl{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.12);transform:scale(1.04);z-index:15;position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;background:#fff}
.df-blur-overlay{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}
.df-blur-overlay.on{opacity:1}
/* User management highlights above blur */





/* Individual action card highlight */






.df-tooltip{position:absolute;background:#fffef5;color:#333;font-size:9px;padding:8px 12px;border-radius:8px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s ease;white-space:normal;font-family:var(--db-font,system-ui,sans-serif);line-height:1.5;max-width:220px;letter-spacing:.2px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #f0e8c8}
.df-tooltip.on{opacity:1}
.df-tooltip::after{content:'';position:absolute;top:-5px;left:20px;width:10px;height:10px;background:#fffef5;transform:rotate(45deg);border-radius:2px;border-left:1px solid #f0e8c8;border-top:1px solid #f0e8c8}

/* ---- USER MANAGEMENT PAGE ---- */










































/* Highlight row */



/* Confirmation dialog overlay */













/* Edit/Add User slide panel */














/* Stats popup overlay */

























/* ---- FAB POPUP MENU ---- */










/* ---- ADD USER PANEL (slide-over right) ---- */




















/* ---- ADD MULTIPLE USERS: upload page scene ---- */

























/* ---- CSV preview modal ---- */

























/* ---- ADMIN REPORTS PAGE SCENE ---- */


























/* Download notification popup (browser-like) */












/* ---- REPORTS RESULTS POPUP ---- */


















/* Score badges */






/* Form filled state */





/* ---- MAIL DIALOG (submissions report) ---- */













/* Confirm dialogs inside reports need to be above results popup (z-index:25) */


/* ---- EMAIL PREVIEW (submissions report) ---- */














/* ---- REPOSITORY SCENES ---- */













/* Upload page scene */






















/* Metadata form below upload */















/* Repo select dropdown */




/* Repo delete button */





/* ---- INTEGRATIONS PAGE SCENE ---- */

























/* Tooltip cards for overview */





/* ---- INTEGRATION SETUP PANEL (slide-over) ---- */













/* Know More link on card */




/* Moodle details page */















/* ---- SECURITY SETTINGS SCENE ---- */















/* OTP login page */
















/* ---- SUPPORT CENTRE SCENE ---- */



















/* Create ticket panel */

















/* Ticket details page */


















/* ---- USER MY FOLDERS SCENE ---- */























/* User profile dropdown */













/* User account info page */












/* === RESPONSIVE === */
@media(max-width:640px){
  .ga-viewport{height:280px}
  
  
  
  .ds-side,.ud-side,.ai-side,.cp-side,.an-side,.df-side,.um-side{width:80px}
  
  
  
  
  
  
}

/* ======================================================================
   USER SECTION ANIMATIONS — NEW SCENES
   ====================================================================== */

/* --- Shared user top bar & breadcrumb bar --- */





/* --- USER CHANGE PASSWORD (uChangePw) --- */






/* --- USER DASHBOARD (uDashOverview, uDashCharts, uDashDocTypes) --- */

























/* Charts */
















/* Doc types */











/* --- FOLDER MANAGEMENT (uFolderTable, uFolderView) --- */















/* --- NEW FOLDER (uNewFolder) --- */






















/* --- FILE UPLOAD (uUploadEnglish, uUploadRegional) --- */




























/* --- SUBMISSIONS (uSubOverview, uSubAnalysis) --- */

















/* Analysis page */









































/* --- DOC ERRORS (uDocError) --- */









/* --- REPOSITORY (uRepoUpload, uRepoManage) --- */






















/* --- MFA (uMfa) --- */






/* --- SUPPORT CENTRE (uSupCreate, uSupView) --- */






/* --- FOLDER TABLE ROWS --- */


/* --- FOLDER TABLE ICON (matches screenshot blue folder) --- */



/* --- SUBMISSIONS TABLE ROWS --- */



/* ==========================================
   CONSORTIUM DASHBOARD SCENE (cd-)
   Layered on top of the shared .df-* scene styles
   ========================================== */

/* Stat tiles sit three-up rather than two-up */
.sc-consdash .df-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.sc-consdash .df-stat-val{font-size:13px}

/* Language / processing-time cards */
.cd-langs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.cd-lang{background:#fff;border:1px solid #e8e8e6;border-radius:6px;padding:7px 8px;position:relative;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.cd-lang.pop{opacity:1;transform:none}
.cd-lang.hl{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-lang-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.cd-lang-hd b{font-size:8.5px;color:#111;font-weight:700}
.cd-lang-ico{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cd-lang-ico svg{width:8px;height:8px;color:#fff}
.cd-lang-row{display:flex;justify-content:space-between;font-size:7px;color:#555;line-height:1.6}
.cd-lang-row span:last-child{font-weight:700;color:#222}

/* Chart panel header controls */
.cd-panel-ctl{display:flex;align-items:center;gap:5px;margin-left:auto}
.cd-sel{font-size:6.5px;border:1px solid #ccc;border-radius:3px;padding:2px 12px 2px 4px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 3px center;background-size:6px;color:#333;white-space:nowrap;position:relative}
.cd-sel.hl{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-hm{cursor:pointer;padding:2px;border-radius:3px}
.cd-hm.hl{background:#e8f0fe;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-hm span{display:block;width:9px;height:1.3px;background:#666;margin:1.6px 0;border-radius:1px}

/* Export dropdown revealed from the hamburger */
.cd-export{position:absolute;top:20px;right:6px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.14);padding:3px 0;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:70}
.cd-export.on{opacity:1;transform:none}
.cd-export i{display:block;font-style:normal;font-size:6.5px;color:#333;padding:3px 10px;white-space:nowrap}
.cd-export i+i{border-top:1px solid #f2f2f2}

/* Scrollable dashboard body so the second chart can be revealed */
.sc-consdash .df-body{overflow:hidden}
.cd-scroll{position:relative;top:0;transition:top .8s cubic-bezier(.4,0,.2,1)}
.cd-scroll.up{top:-46px}

/* Empty-state shown when Month wise defaults to 2020 */
.cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:52px;border:1px solid #eee;border-radius:5px;color:#888;font-size:7.5px;gap:3px}
.cd-empty svg{width:11px;height:11px;color:#bbb}
.cd-empty.gone{display:none}
.cd-chart2.gone{display:none}

/* panel becomes the positioning context for its export menu */
.sc-consdash .df-panel{position:relative}
/* slimmer bars so a single-year spike reads as a bar, not a block */
.sc-consdash .df-mini-bar{max-width:16px;margin:0 auto}
.sc-consdash .df-top{margin-bottom:6px}

/* .df-panel.pop leaves transform:translateY(0) in place, which still creates a
   stacking context and traps highlighted descendants under .df-blur-overlay
   (z-index 10). Reset it to none once the panel has finished popping in. */
.sc-consdash .df-panel.pop{transform:none}

/* ==========================================
   CREATE INSTITUTION SCENE (ci-)
   ========================================== */
.sc-conscreate{background:#fff;display:flex}
.sc-conscreate .df-body{overflow:hidden;position:relative}

/* Licences table */
.ci-hd{font-size:10px;font-weight:600;color:#1a1a1a;margin-bottom:6px}
.ci-tbl{width:100%;border-collapse:collapse;font-size:7px}
.ci-tbl th{text-align:left;color:#666;font-weight:600;padding:4px 5px;border-bottom:1px solid #eee;white-space:nowrap}
.ci-tbl td{padding:5px;border-bottom:1px solid #f4f4f4;color:#333;white-space:nowrap}
.ci-tbl tbody tr{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.ci-tbl tbody tr.pop{opacity:1;transform:none}

/* Floating action button */
.ci-fab{position:absolute;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;background:#1447E6;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;line-height:1;box-shadow:0 3px 8px rgba(20,71,230,.35);z-index:40}
.ci-fab.hl{box-shadow:0 0 0 4px rgba(20,71,230,.25),0 3px 8px rgba(20,71,230,.35)}
.ci-fab.press{transform:scale(.9)}

/* The two-option menu the FAB opens */
.ci-menu{position:absolute;right:14px;bottom:44px;background:#fff;border:1px solid #e4e4e4;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:45;overflow:hidden}
.ci-menu.on{opacity:1;transform:none}
.ci-menu i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:7.5px;color:#222;padding:6px 12px;white-space:nowrap}
.ci-menu i+i{border-top:1px solid #f2f2f2}
.ci-menu i b{width:13px;height:13px;border-radius:50%;display:inline-block}
.ci-menu i:nth-child(1) b{background:#1e88e5}
.ci-menu i:nth-child(2) b{background:#2e9e5b}
.ci-menu i.hl{background:#eef3ff}

/* Right-hand form drawer */
.ci-drawer{position:absolute;top:0;right:0;bottom:0;width:170px;background:#fff;border-left:1px solid #e6e6e6;box-shadow:-6px 0 18px rgba(0,0,0,.08);transform:translateX(100%);transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:50;padding:9px 10px;overflow:hidden}
.ci-drawer.on{transform:none}
.ci-drawer-scroll{transition:margin-top .55s cubic-bezier(.4,0,.2,1);margin-top:0}
.ci-drawer-scroll.s1{margin-top:-26px}
.ci-drawer-scroll.s2{margin-top:-50px}
.ci-fld{margin-bottom:6px;position:relative}
.ci-fld label{display:block;font-size:6.5px;color:#333;font-weight:600;margin-bottom:2px}
.ci-fld label em{font-style:normal;color:#d33}
.ci-inp{height:14px;border:1px solid #d8d8d8;border-radius:3px;background:#fff;font-size:6.5px;color:#222;padding:0 5px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.ci-inp.req{border-color:#e9a3a3}
.ci-inp.fc{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.15)}
.ci-fld.hl{z-index:60}
.ci-fld.hl .ci-inp{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.2)}
.ci-inp.sel::after{content:'';margin-left:auto;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid #777}
.ci-caret{display:inline-block;width:1px;height:7px;background:#1447E6;margin-left:1px;animation:cicaret .9s step-end infinite}
@keyframes cicaret{50%{opacity:0}}

/* Option list dropped by a select */
.ci-dd{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 5px 14px rgba(0,0,0,.14);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:70;overflow:hidden}
.ci-dd.on{opacity:1;transform:none}
.ci-dd i{display:block;font-style:normal;font-size:6.5px;color:#333;padding:3px 6px}
.ci-dd i+i{border-top:1px solid #f5f5f5}
.ci-dd i.hl{background:#eef3ff;font-weight:700}

/* Submit button */
.ci-btn{height:16px;border-radius:4px;background:#1447E6;color:#fff;font-size:7px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ci-btn.press{transform:scale(.97);filter:brightness(.92)}

/* Success toast */
.ci-toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);background:#0f9d58;color:#fff;font-size:8px;font-weight:600;padding:6px 14px;border-radius:5px;box-shadow:0 5px 16px rgba(15,157,88,.3);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:90;white-space:nowrap}
.ci-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- Tooltip fixes for this scene ----
   1. The drawer sits at z-index 50; the shared tooltip is 30, so tooltips
      shown over the open form were rendering behind it.
   2. This scene places tooltips to the LEFT of their target, but the shared
      arrow is hard-coded to point up from the tooltip's top-left corner.
      .tip-right moves it to the right edge, pointing at the element.
   3. A fixed width keeps placement stable while the text types in. */
.df-tooltip{z-index:95;width:186px;max-width:186px}
.df-tooltip.tip-right::after{
  top:50%;left:auto;right:-5px;
  transform:translateY(-50%) rotate(45deg);
  border-left:none;border-top:none;
  border-right:1px solid #f0e8c8;border-bottom:1px solid #f0e8c8;
}

/* ---- Licences page furniture that the first draft of the mock omitted:
   the CSV export button and institution search, the per-column sort
   arrows, and the Actions column with its edit and drill-in buttons. ---- */
.ci-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
.ci-tools{display:flex;align-items:center;gap:5px}
.ci-csv{width:15px;height:15px;border:1px solid #d9d9d9;border-radius:3px;display:flex;align-items:center;justify-content:center;background:#fff;color:#555;flex:none}
.ci-csv svg{width:8px;height:8px}
.ci-search{font-size:6px;color:#9a9a9a;border:1px solid #d9d9d9;border-radius:3px;background:#fff;padding:3px 8px;min-width:104px;white-space:nowrap}
.ci-tbl{table-layout:fixed;width:100%}
.ci-tbl th{font-size:5.6px;padding:3px 3px;white-space:nowrap;overflow:hidden}
.ci-tbl th b{font-weight:400;color:#aaa;margin-left:1px;font-size:5px}
.ci-tbl td{font-size:5.6px;padding:4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-act-h{text-align:left}
.ci-act{display:flex;gap:2px}
.ci-act i{width:11px;height:11px;border:1px solid #d5d5d5;border-radius:2.5px;background:#fff;display:inline-block;position:relative;flex:none}
.ci-act i::after{content:'';position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:6px}
.ci-ed::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.ci-nx::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")}

/* ==========================================
   MANAGE INSTITUTIONS SCENE (mi-)
   reuses the .ci-* licences table and drawer
   ========================================== */
.sc-consmanage{background:#fff;display:flex}
.sc-consmanage .df-body{overflow:hidden;position:relative}
.sc-consmanage .ci-csv.hl,.sc-consmanage .ci-search.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.25);border-color:#1447E6}
.sc-consmanage .ci-tbl th.hl{z-index:60;position:relative;background:#eef3ff;box-shadow:0 0 0 2px rgba(20,71,230,.25);border-radius:3px}
.sc-consmanage .ci-act i.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.3);border-color:#1447E6}
.sc-consmanage .ci-act i.press{transform:scale(.88)}
/* fields the edit form locks */
.ci-inp.dis{background:#f1f1f1;color:#8a8a8a;border-color:#e0e0e0}
.ci-fld.locked label::after{content:' (locked)';color:#b26a00;font-weight:600}

/* ==========================================
   INSTITUTION USERS SCENE (iu-)
   ========================================== */
.sc-consusers{background:#fff;display:flex}
.sc-consusers .df-body{overflow:hidden;position:relative}

.iu-tabs{display:flex;gap:3px;margin-bottom:7px;align-items:flex-end}
.iu-tab{font-size:7px;font-weight:600;color:#555;background:#f0f0f0;border-radius:4px 4px 0 0;padding:4px 11px;position:relative}
.iu-tab.act{background:#1447E6;color:#fff}
.iu-tab.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.28)}
.iu-crumb{font-size:6.5px;color:#777;margin-bottom:5px}
.iu-crumb b{color:#222;font-weight:600}
.iu-srch{margin-left:auto;font-size:6px;color:#9a9a9a;border:1px solid #d9d9d9;border-radius:3px;background:#fff;padding:3px 8px;min-width:82px;position:relative}
.iu-srch.hl{z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.22)}

.iu-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:6px}
.iu-tbl th{text-align:left;color:#666;font-weight:600;padding:4px 3px;border-bottom:1px solid #eee;white-space:nowrap}
.iu-tbl td{padding:5px 3px;border-bottom:1px solid #f5f5f5;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iu-tbl tbody tr{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.iu-tbl tbody tr.pop{opacity:1;transform:none}
.iu-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;vertical-align:middle}
.iu-dot.on{background:#0f9d58}
.iu-dot.off{background:#e04b4b}
.iu-stat{width:11px;height:9px;display:inline-block;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") no-repeat center/9px;position:relative}
.iu-stat.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.3);border-radius:2px;background-color:#fff}

.iu-plag{display:flex;gap:2px;position:relative}
.iu-plag.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.28);border-radius:3px;background:#fff}
.iu-plag i{font-style:normal;font-size:5.6px;font-weight:600;border-radius:2px;padding:1.5px 4px;min-width:12px;text-align:center}
.iu-plag i:nth-child(1){background:#e8eaf6;color:#3949ab}
.iu-plag i:nth-child(2){background:#fff8e1;color:#8a6d00}
.iu-plag i:nth-child(3){background:#e6f4ea;color:#1e7e40}

.iu-acts{display:flex;gap:2px;align-items:center}
.iu-btn{width:11px;height:11px;border:1px solid #d5d5d5;border-radius:2.5px;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:6px;display:inline-block;position:relative;flex:none}
.iu-btn.hl{z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.3)}
.iu-ed{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.iu-adm{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.iu-key{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M11 12L21 2m-3 0l3 3m-6 0l2.5 2.5'/%3E%3C/svg%3E")}
.iu-tog{width:16px;height:9px;border-radius:5px;background:#1447E6;position:relative;flex:none;display:inline-block}
.iu-tog::after{content:'';position:absolute;top:1.5px;right:1.5px;width:6px;height:6px;border-radius:50%;background:#fff}
.iu-tog.off{background:#cfcfcf}
.iu-tog.off::after{right:auto;left:1.5px}
.iu-tog.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.3)}

/* add-user drawer note */
.iu-note{font-size:6px;color:#b26a00;font-weight:600;margin-top:4px;position:relative;display:block}
.iu-note.hl{z-index:60;background:#fff;border-radius:3px;padding:1px 4px;box-shadow:0 0 0 3px rgba(20,71,230,.22)}

/* Info tab panel */
.iu-panel{display:none;border:1px solid #eee;border-radius:6px;padding:6px 8px;background:#fff}
.iu-panel.on{display:block}
.iu-row{display:flex;justify-content:space-between;font-size:6px;padding:3.5px 4px;border-bottom:1px solid #f5f5f5;position:relative}
.iu-row:last-child{border-bottom:none}
.iu-row span:first-child{color:#666}
.iu-row span:last-child{color:#111;font-weight:600}
.iu-row.hl{z-index:60;background:#eef3ff;border-radius:3px;box-shadow:0 0 0 2px rgba(20,71,230,.25)}
.iu-tbl.hidden{display:none}

/* ==========================================
   USER STATISTICS SCENE (us-)
   ========================================== */
.sc-consstats{background:#fff;display:flex}
.sc-consstats .df-body{overflow:hidden;position:relative}

.us-modal{position:absolute;left:12px;right:12px;top:16px;background:#fff;border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1px solid #e8e8e8;padding:9px 11px;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:70}
.us-modal.on{opacity:1;transform:none}
.us-mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.us-mtitle{font-size:9px;font-weight:600;color:#1a1a1a}
.us-x{font-size:9px;color:#888;line-height:1}
.us-uname{font-size:6.5px;color:#555;margin-bottom:7px}
.us-cols{display:flex;gap:12px}
.us-left{flex:1.35}
.us-right{flex:1;text-align:center}
.us-shead{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.us-scount{font-size:8px;font-weight:600;color:#1a1a1a;position:relative}
.us-scount.hl{z-index:80;background:#fff;border-radius:3px;padding:0 3px;box-shadow:0 0 0 3px rgba(224,75,75,.3)}
.us-yr{font-size:6px;border:1px solid #ccc;border-radius:3px;padding:1px 11px 1px 4px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 3px center/6px;margin-left:auto;position:relative}
.us-yr.hl{z-index:80;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.us-hm{padding:2px;border-radius:3px;position:relative}
.us-hm.hl{z-index:80;background:#e8f0fe;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.us-hm span{display:block;width:8px;height:1.2px;background:#666;margin:1.5px 0;border-radius:1px}
.us-exp{position:absolute;top:14px;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.14);padding:2px 0;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90}
.us-exp.on{opacity:1}
.us-exp i{display:block;font-style:normal;font-size:6px;color:#333;padding:2.5px 9px;white-space:nowrap}
.us-exp i+i{border-top:1px solid #f4f4f4}

.us-bars{display:flex;align-items:flex-end;gap:2px;height:54px;border-bottom:1px solid #eee;padding-bottom:1px}
.us-barc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.us-bar{width:7px;background:#3f51b5;border-radius:1px 1px 0 0;height:0;transition:height .5s cubic-bezier(.4,0,.2,1)}
.us-mons{display:flex;gap:2px;margin-top:2px}
.us-mons span{flex:1;text-align:center;font-size:4.6px;color:#888}
.us-empty{font-size:6px;color:#999;text-align:center;padding:20px 0}

.us-donut{width:62px;height:62px;border-radius:50%;margin:6px auto 5px;background:conic-gradient(#1e88e5 0 19%,#0f7b5a 19% 100%);position:relative}
.us-donut::after{content:'';position:absolute;inset:16px;background:#fff;border-radius:50%}
.us-donut.hl{z-index:80;box-shadow:0 0 0 4px rgba(20,71,230,.25)}
.us-tlabel{font-size:7.5px;font-weight:600;color:#1a1a1a;margin-bottom:2px}
.us-leg{display:flex;justify-content:center;gap:8px;font-size:5.4px;color:#444}
.us-leg i{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.us-leg b{width:5px;height:5px;border-radius:50%;display:inline-block}
.us-csv{width:14px;height:14px;border:1px solid #d9d9d9;border-radius:3px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center/7px;position:relative;flex:none}
.us-csv.hl{z-index:80;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}

/* ==========================================
   REPORTS SCENE (rp-)
   ========================================== */
.sc-consrep{background:#fff;display:flex}
.sc-consrep .df-body{overflow:hidden;position:relative}
.rp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rp-crumb{font-size:6.5px;color:#777}
.rp-inst{font-size:6.5px;color:#9a9a9a;border:1px solid #d9d9d9;border-radius:3px;background:#fff;padding:3px 16px 3px 7px;min-width:120px;position:relative}
.rp-inst.filled{color:#222}
.rp-inst.hl{z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.rp-card{border:1px solid #eee;border-radius:6px;padding:9px 10px}
.rp-card-hd{font-size:9px;font-weight:600;color:#1a1a1a;margin-bottom:7px}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.rp-f{position:relative}
.rp-f label{display:block;font-size:6.2px;color:#333;font-weight:600;margin-bottom:2px}
.rp-f label em{font-style:normal;color:#d33}
.rp-in{height:14px;border:1px solid #e9a3a3;border-radius:3px;background:#fff;font-size:6.2px;color:#222;padding:0 5px;display:flex;align-items:center}
.rp-in.sel::after{content:'';margin-left:auto;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid #777}
.rp-f.hl{z-index:60}
.rp-f.hl .rp-in{border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.2)}
.rp-dd{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 5px 14px rgba(0,0,0,.14);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:70}
.rp-dd.on{opacity:1}
.rp-dd i{display:block;font-style:normal;font-size:6.2px;color:#333;padding:3px 6px}
.rp-dd i+i{border-top:1px solid #f5f5f5}
.rp-dd i.none{color:#9a9a9a;font-style:italic}
.rp-btn{margin-top:9px;height:17px;border-radius:4px;background:#1447E6;color:#fff;font-size:7.5px;font-weight:600;display:flex;align-items:center;justify-content:center;width:56%;position:relative}
.rp-btn.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.3)}
.rp-btn.press{transform:scale(.97);filter:brightness(.92)}

/* results modal */
.rp-modal{position:absolute;left:6px;right:6px;top:10px;background:#fff;border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1px solid #e8e8e8;padding:9px 11px;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:75}
.rp-modal.on{opacity:1;transform:none}
.rp-mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rp-mtitle{font-size:9px;font-weight:600;color:#1a1a1a}
.rp-rtbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:5.8px}
.rp-rtbl th{text-align:left;color:#666;font-weight:600;padding:3px 3px;border-bottom:1px solid #eee;white-space:nowrap}
.rp-rtbl td{padding:4px 3px;border-bottom:1px solid #f7f7f7;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-sim{border-radius:3px;padding:1.5px 0;text-align:center;font-weight:600;font-size:5.6px}
.rp-sim.hi{background:#fdecec;color:#c62828}
.rp-sim.mid{background:#fff6e0;color:#8a6d00}
.rp-sim.lo{background:#eef1fb;color:#3949ab}
.rp-simcol.hl{z-index:80;box-shadow:0 0 0 3px rgba(20,71,230,.28);border-radius:3px;background:#fff;position:relative}

/* ==========================================
   SEARCH BY PAPER ID SCENE (sr-)
   ========================================== */
.sc-conssearch{background:#fff;display:flex}
.sc-conssearch .df-body{overflow:hidden;position:relative}
.sr-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sr-title{font-size:10px;font-weight:600;color:#1a1a1a}
.sr-dlwrap{display:flex;gap:7px;margin-left:auto;opacity:0;transition:opacity .35s ease}
.sr-dlwrap.on{opacity:1}
.sr-dl{font-size:6.5px;font-weight:600;color:#fff;background:#1447E6;border-radius:4px;padding:4px 9px;white-space:nowrap;position:relative;display:flex;align-items:center;gap:3px}
.sr-dl::before{content:'';width:6px;height:6px;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='4' y1='21' x2='20' y2='21'/%3E%3C/svg%3E") no-repeat center/6px}
.sr-dl.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.32)}
.sr-box{font-size:6.5px;color:#9a9a9a;border:1px solid #d9d9d9;border-radius:3px;background:#fff;padding:4px 8px;min-width:92px;position:relative}
.sr-box.filled{color:#222}
.sr-box.hl{z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.sr-mag{width:16px;height:16px;border-radius:3px;background:#1447E6 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.7' y2='16.7'/%3E%3C/svg%3E") no-repeat center/8px;flex:none;position:relative}
.sr-mag.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.32)}
.sr-mag.press{transform:scale(.9)}

.sr-empty{border:1px solid #e6e6e6;border-radius:6px;padding:16px 12px;font-size:7px;font-weight:600;color:#333}
.sr-empty.gone{display:none}
.sr-panel{border:1px solid #eee;border-radius:6px;padding:4px 8px;display:none}
.sr-panel.on{display:block}
.sr-r{display:flex;justify-content:space-between;font-size:6px;padding:3.4px 3px;border-bottom:1px solid #f6f6f6;position:relative}
.sr-r:last-child{border-bottom:none}
.sr-r span:first-child{color:#666}
.sr-r span:last-child{color:#111;font-weight:600}
.sr-r.hl{z-index:60;background:#eef3ff;border-radius:3px;box-shadow:0 0 0 2px rgba(20,71,230,.25)}

/* ==========================================
   SWITCH ROLES SCENE (sw-)
   ========================================== */
.sc-consswitch{background:#fff;display:flex}
.sc-consswitch .df-body{overflow:hidden;position:relative;padding:0}
.sw-bar{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:7px 12px;border-bottom:1px solid #f0f0f0}
.sw-who{text-align:right;line-height:1.25}
.sw-who b{display:block;font-size:6.5px;color:#222;font-weight:600}
.sw-who span{display:block;font-size:5.6px;color:#888}
.sw-av{width:15px;height:15px;border-radius:50%;background:#0f9d58;color:#fff;font-size:7px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.sw-caret{font-size:6px;color:#888;position:relative}
.sw-caret.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.3);border-radius:2px;background:#fff}

/* profile dropdown */
.sw-menu{position:absolute;right:10px;top:30px;width:132px;background:#fff;border:1px solid #e6e6e6;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.16);opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:60;overflow:hidden}
.sw-menu.on{opacity:1;transform:none}
.sw-mi{display:flex;align-items:center;gap:6px;padding:5px 8px;font-size:6.2px;color:#222;position:relative}
.sw-mi+.sw-mi{border-top:1px solid #f5f5f5}
.sw-mi b{display:block;font-weight:600}
.sw-mi em{font-style:normal;color:#8a8a8a;font-size:5.4px;display:block}
.sw-mi i{width:13px;height:13px;border-radius:50%;background:#e8f0fe;flex:none}
.sw-mi.hl{background:#eef3ff;z-index:70;box-shadow:0 0 0 2px rgba(20,71,230,.3)}
.sw-out{margin:5px;border-radius:4px;background:#1447E6;color:#fff;font-size:6.2px;font-weight:600;text-align:center;padding:4px 0}
.sw-ver{font-size:5px;color:#aaa;text-align:right;padding:0 7px 4px}

/* manage accounts modal */
.sw-modal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.96);width:210px;background:#fff;border-radius:7px;box-shadow:0 12px 32px rgba(0,0,0,.2);border:1px solid #e8e8e8;padding:10px 12px;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;z-index:80}
.sw-modal.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sw-mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sw-mhd b{font-size:8.5px;color:#1a1a1a}
.sw-mhd span{font-size:8px;color:#999}
.sw-prod{font-size:7.5px;font-weight:700;color:#222;border-bottom:1px solid #eee;padding-bottom:4px;margin-bottom:5px}
.sw-roles{display:flex;gap:8px}
.sw-role{flex:1;display:flex;align-items:center;gap:5px;font-size:6.5px;color:#333;padding:4px 5px;border-radius:4px;position:relative}
.sw-role i{width:12px;height:12px;border-radius:3px;background:#eef1f8;flex:none}
.sw-role.hl{background:#eef3ff;z-index:90;box-shadow:0 0 0 2px rgba(20,71,230,.32)}
.sw-back{display:none;align-items:center;gap:6px;font-size:6.5px;color:#333;margin-top:7px;padding:4px 5px;border-radius:4px;border-top:1px solid #f2f2f2;position:relative}
.sw-back.show{display:flex}
.sw-back i{font-style:normal;color:#555;font-size:8px}
.sw-back.hl{background:#eef3ff;z-index:90;box-shadow:0 0 0 2px rgba(20,71,230,.32)}

/* the sidebar swaps its items as the role changes */
.sw-nav{transition:opacity .3s ease;position:relative}
.sw-nav.hl{z-index:60;background:#fafafc;border-radius:5px;box-shadow:0 0 0 3px rgba(20,71,230,.28)}
.sw-nav.fade{opacity:0}

/* ---- login scenes, carried over from the Pro Admin logging-in guide ---- */
/* ---- SCENE 2: HOMEPAGE ---- */
.sc-home{background:#fff}
.hp-top{height:44px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 20px;justify-content:space-between}
.hp-logo{display:flex;align-items:center;gap:6px}
.hp-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.hp-logo span{font-size:13px;font-weight:600;color:#1a1a1a}
.hp-nav{display:flex;gap:16px;font-size:11px;color:#777}
.hp-gs-btn{background:#4285f4;color:#fff;font-size:11px;font-weight:600;padding:7px 16px;border-radius:6px;border:none;cursor:default;position:relative;transition:background .15s}
.hp-gs-btn.hl{background:#3367c7;box-shadow:0 0 0 3px rgba(66,133,244,.2)}
.hp-hero{padding:40px 30px;display:flex;gap:30px;align-items:center}
.hp-hero-txt h2{font-size:20px;font-weight:700;color:#1a1a1a;line-height:1.3;margin-bottom:8px}
.hp-hero-txt p{font-size:11px;color:#888;line-height:1.5;max-width:280px}
.hp-hero-art{flex:1;height:160px;background:#f0f2f8;border-radius:16px}
/* Dropdown */
.hp-dd{position:absolute;top:46px;right:16px;width:160px;background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12);overflow:hidden;z-index:20;opacity:0;transform:translateY(-6px);pointer-events:none}
.hp-dd.on{opacity:1;transform:translateY(0);pointer-events:auto;transition:all .25s ease}
.hp-dd-item{padding:10px 14px;font-size:12px;color:#444;display:flex;align-items:center;gap:8px;cursor:default;transition:background .1s}
.hp-dd-item:first-child{border-bottom:1px solid #f0f0f0}
.hp-dd-item.hl{background:#f0f4ff;color:#4285f4}
.hp-dd-item i{width:16px;height:16px;background:#ddd;border-radius:4px;display:block}
/* ---- SCENE 3: LOGIN ---- */
.sc-login{background:#f0f2f8;display:flex}
.lg-art{flex:1;display:flex;align-items:center;justify-content:center}
.lg-art-box{width:220px;height:180px;background:#e0e4ee;border-radius:18px;position:relative;overflow:hidden}
.lg-art-box::before{content:'';position:absolute;bottom:16px;left:20px;width:100px;height:7px;background:#c0c8d8;border-radius:3px}
.lg-art-box::after{content:'';position:absolute;bottom:28px;left:35px;width:45px;height:36px;background:#b0bcd0;border-radius:4px;border:2px solid #a0aec0}
.lg-art-p1{position:absolute;bottom:16px;left:28px;width:36px;height:60px;background:#4285f4;border-radius:10px 10px 5px 5px}
.lg-art-p1::before{content:'';position:absolute;top:-15px;left:7px;width:22px;height:22px;background:#f5c6a0;border-radius:50%}
.lg-art-p2{position:absolute;bottom:16px;right:28px;width:32px;height:55px;background:#f5c6a0;border-radius:9px 9px 5px 5px}
.lg-art-p2::before{content:'';position:absolute;top:-14px;left:5px;width:20px;height:20px;background:#8d6e52;border-radius:50%}
.lg-form{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lg-logo{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.lg-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.lg-logo span{font-size:13px;font-weight:600;color:#1a1a1a}
.lg-title{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:18px}
.lg-grp{width:200px;margin-bottom:9px}
.lg-lbl{font-size:10px;font-weight:500;color:#777;margin-bottom:3px;display:block}
.lg-inp{width:100%;height:34px;border:1.5px solid #ddd;border-radius:7px;background:#fff;padding:0 10px;font-size:12px;color:#1a1a1a;display:flex;align-items:center;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.lg-inp.fc{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.1)}
.lg-forgot{font-size:10px;color:#4285f4;text-align:right;width:200px;margin:2px 0 12px;cursor:default;transition:color .15s}
.lg-forgot.hl{color:#1a56c7;text-decoration:underline;background:rgba(66,133,244,.08);border-radius:3px;padding:1px 4px}
.lg-btn{width:200px;height:36px;background:#4285f4;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;cursor:default}
.lg-btn.press{transform:scale(.97);background:#3367c7}
.lg-btn .ldot{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:none;animation:spin .5s linear infinite}
.lg-btn.ld .ldot{display:inline-block}
/* ---- SCENE 4: DASHBOARD ---- */






























/* ---- TIP CALLOUT (inline, not overlay) ---- */
.ga-tip{position:absolute;z-index:40;background:#fffde7;border:1px solid #f0e68c;border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:flex-start;gap:8px;max-width:280px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-tip.on{opacity:1;transform:translateY(0)}
.ga-tip-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.ga-tip-ico svg{width:20px;height:20px}
.ga-tip-txt{font-size:11px;color:#5d4e00;line-height:1.5}
.ga-tip-txt b{font-weight:600;color:#3e3300}
/* ---- ERROR POPUP (kept for other uses) ---- */









/* ---- LOGIN FIELD ERROR STATE ---- */
.lg-inp.err{border-color:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,.1)}
.lg-inp.err-shake{animation:fshake .4s ease}
/* ---- SUCCESS CHECKMARK ---- */
.lg-success{position:absolute;inset:0;background:rgba(255,255,255,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;opacity:0;pointer-events:none;font-family:var(--db-font,system-ui,sans-serif)}
.lg-success.on{opacity:1;transition:opacity .4s ease}
.lg-success-check{width:50px;height:50px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.lg-success-check svg{width:26px;height:26px}
.lg-success-txt{font-size:14px;font-weight:600;color:#2e7d32}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* ---- consLogin — the consortium landing after sign-in ---- */
.sc-consland{background:#fff;display:flex}
.sc-consland .df-body{overflow:hidden;position:relative}
.cl-bar{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 0 8px;border-bottom:1px solid #f0f0f0;margin-bottom:9px;position:relative}
.cl-bar.hl{z-index:60;background:#fff;border-radius:4px;box-shadow:0 0 0 3px rgba(20,71,230,.22)}
.cl-title{font-size:12px;font-weight:600;color:#1a1a1a;margin-bottom:9px}
.cl-cards{display:flex;gap:9px}
.cl-card{flex:1;border:1px solid #ececec;border-radius:7px;padding:9px 10px;opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
.cl-card.pop{opacity:1;transform:none}
.cl-card span{display:block;font-size:6.8px;color:#777;margin-bottom:4px}
.cl-card b{font-size:15px;color:#1447E6;font-weight:600}
.sc-login .lg-forgot{position:relative}
.sc-login .lg-forgot.hl{z-index:60;background:#fff;border-radius:3px;box-shadow:0 0 0 3px rgba(20,71,230,.28)}
.sc-login .lg-btn.hl{z-index:60;box-shadow:0 0 0 4px rgba(20,71,230,.3)}
.sc-consland .df-side.hl{position:relative;z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.25);border-radius:0 6px 6px 0;background:#fafafc}
/* tooltip placed to the RIGHT of its target needs its arrow on the left edge */
.df-tooltip.tip-left::after{top:50%;left:-5px;right:auto;transform:translateY(-50%) rotate(45deg);border-left:1px solid #f0e8c8;border-top:1px solid #f0e8c8;border-right:none;border-bottom:none}

/* ---- forgot-password scenes, carried over from the Pro Admin guide ---- */
/* ---- FORGOT PASSWORD PAGE ---- */
.sc-forgot{background:#f0f2f8;display:flex}
.fp-form{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.fp-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:16px}
.fp-grp{width:210px;margin-bottom:12px}
.fp-lbl{font-size:10px;font-weight:500;color:#777;margin-bottom:3px;display:block}
.fp-inp{width:100%;height:34px;border:1.5px solid #ddd;border-radius:7px;background:#fff;padding:0 10px;font-size:12px;color:#1a1a1a;display:flex;align-items:center;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.fp-inp.fc{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.1)}
.fp-btn{width:210px;height:36px;background:#4285f4;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;cursor:default}
.fp-btn.press{transform:scale(.97);background:#3367c7}
.fp-btn .ldot{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:none;animation:spin .5s linear infinite}
.fp-btn.ld .ldot{display:inline-block}
.fp-back{font-size:10px;color:#4285f4;margin-top:10px;width:210px;text-align:center;transition:color .15s}
.fp-back.hl{color:#1a56c7;text-decoration:underline}
/* ---- RESET EMAIL CARD (compact) ---- */
.sc-resetmail{background:#eceae6;display:flex;align-items:center;justify-content:center}
.rm-card{width:380px;background:#fff;border-radius:12px;box-shadow:0 10px 36px rgba(0,0,0,.1);overflow:hidden;opacity:0;transform:scale(.88)}
.rm-card.pop{animation:ecpop .55s cubic-bezier(.34,1.2,.64,1) forwards}
.rm-bar{height:34px;background:#fafaf8;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 12px;gap:5px}
.rm-bar i{width:8px;height:8px;border-radius:50%;display:block}
.rm-bar span{flex:1;text-align:center;font-size:10px;color:#bbb}
.rm-body{padding:16px 18px;font-family:var(--db-font,system-ui,sans-serif)}
.rm-subj{font-size:12px;font-weight:600;color:#1a1a1a;margin-bottom:2px}
.rm-from{font-size:10px;color:#aaa;margin-bottom:12px}
.rm-txt{font-size:11px;color:#666;line-height:1.6;margin-bottom:10px}
.rm-link{display:inline-block;font-size:10px;color:#4285f4;text-decoration:underline;word-break:break-all;cursor:default}
.rm-link.hl{background:rgba(66,133,244,.12);border-radius:3px;padding:2px 4px}








@keyframes ecpop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}

@keyframes spin{to{transform:rotate(360deg)}}
.sc-forgot .fp-inp.hl{position:relative;z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.sc-forgot .fp-btn{position:relative}
.sc-forgot .fp-btn.hl{z-index:60;box-shadow:0 0 0 4px rgba(20,71,230,.3)}
.sc-forgot .fp-back{position:relative}
.sc-forgot .fp-back.hl{z-index:60;background:#fff;border-radius:3px;box-shadow:0 0 0 3px rgba(20,71,230,.28);text-decoration:none;color:#1447E6}
.sc-login .lg-forgot{position:relative}
.sc-login .lg-forgot.hl{z-index:60;background:#fff;border-radius:3px;box-shadow:0 0 0 3px rgba(20,71,230,.28)}
.sc-resetmail .rm-card.hl{z-index:60;box-shadow:0 0 0 3px rgba(20,71,230,.25)}

/* ---- reset-password screen + toasts, carried over from the Pro Admin guide ---- */
.lg-logo{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.lg-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.lg-logo span{font-size:13px;font-weight:600;color:#1a1a1a}
/* ---- SCENE 4: DASHBOARD ---- */






























/* ---- TIP CALLOUT (inline, not overlay) ---- */
.ga-tip{position:absolute;z-index:40;background:#fffde7;border:1px solid #f0e68c;border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:flex-start;gap:8px;max-width:280px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-tip.on{opacity:1;transform:translateY(0)}
.ga-tip-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.ga-tip-ico svg{width:20px;height:20px}
.ga-tip-txt{font-size:11px;color:#5d4e00;line-height:1.5}
.ga-tip-txt b{font-weight:600;color:#3e3300}
/* ---- SUCCESS CHECKMARK ---- */






/* ---- TOAST NOTIFICATION ---- */
.ga-toast{position:absolute;top:10px;right:10px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;z-index:50;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;max-width:260px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-toast.on{opacity:1;transform:translateY(0)}
.ga-toast-ico{width:22px;height:22px;flex-shrink:0}
.ga-toast-ico svg{width:22px;height:22px}
.ga-toast-txt{font-size:11px;color:#333;line-height:1.4}
.ga-toast-bar{position:absolute;bottom:0;left:10px;right:10px;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.ga-toast-bar-fill{height:100%;background:#1D9E75;width:100%;border-radius:2px}
.ga-toast-bar-fill.run{animation:toastBar 2s linear forwards}
/* ---- RESET PASSWORD PAGE ---- */
.sc-reset{background:#f0f2f8;display:flex}
.rp-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:16px}
/* ---- RESET EMAIL CARD (compact) ---- */
.sc-resetmail{background:#eceae6;display:flex;align-items:center;justify-content:center}

@keyframes toastBar{from{width:100%}to{width:0%}}
.sc-reset .fp-inp.hl{position:relative;z-index:60;border-color:#1447E6;box-shadow:0 0 0 3px rgba(20,71,230,.25)}
.sc-reset .ga-tip{z-index:62}