*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@keyframes psec-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes psec-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
.psec-entering{animation:psec-in .24s cubic-bezier(.22,.68,0,1.2) both}
.psec-leaving{animation:psec-out .16s ease forwards;pointer-events:none}
:root{
--purple:#9B5DE5;--pink:#FF6FB7;--orange:#FF6B35;--green:#06D6A0;--blue:#4CC9F0;
--bg:#F0EDF8;--card:#fff;--text:#2D2D2D;--muted:#888;
--sb-w:240px;--sb-collapsed:58px;--ai-w:340px;--topbar-h:54px;
--shadow:0 2px 14px rgba(0,0,0,.08);
--border:#EDE8F5;
--dp-bg:linear-gradient(135deg,#EDE8F8 0%,#F3EEFF 40%,#EAEfFF 100%);
--dp-solid:#EDE8F8;--dp-modal:linear-gradient(135deg,#ffffff,#F5F0FF);
/* adaptive semantic tokens */
--glass-bg:rgba(255,255,255,.55);
--glass-border:rgba(155,93,229,.2);
--glass-border-top:rgba(255,255,255,.9);
--on-glass:rgba(60,40,100,.82);
--on-glass-muted:rgba(100,80,140,.55);
--on-glass-faint:rgba(100,80,140,.38);
--card-inner:rgba(255,255,255,.7);
--card-inner-border:rgba(155,93,229,.15);
--row-bg:rgba(255,255,255,.5);
--row-border:rgba(155,93,229,.12);
--section-label:rgba(100,80,140,.5);
--divider:rgba(155,93,229,.1);
--badge-bg:rgba(155,93,229,.1);
--badge-border:rgba(155,93,229,.18);
--badge-color:rgba(100,80,140,.7);
--slot-bg:rgba(255,255,255,.55);
}
/* ── Light mode auth & modal variables ── */
:root {
--auth-bg: rgba(155,93,229,.22);
--auth-box-bg: linear-gradient(160deg,#fff 0%,#F5F0FF 100%);
--auth-box-border: rgba(155,93,229,.25);
--auth-label: rgba(80,60,120,.65);
--auth-input-bg: rgba(242,238,255,1);
--auth-input-border: rgba(155,93,229,.25);
--auth-input-color: #2D2D2D;
--auth-input-placeholder: rgba(100,80,140,.4);
--auth-divider: rgba(155,93,229,.2);
--auth-divider-text: rgba(100,80,140,.4);
--auth-subtitle: rgba(80,60,120,.6);
--auth-footer: rgba(80,60,120,.45);
--auth-google-bg: rgba(155,93,229,.08);
--auth-google-border: rgba(155,93,229,.22);
--auth-google-color: #3C2E6E;
--auth-google-hover: rgba(155,93,229,.15);
--auth-stay: rgba(80,60,120,.55);
--auth-stay-timeout: rgba(100,80,140,.35);
--auth-pw-bar: rgba(155,93,229,.15);
--auth-pw-label: rgba(80,60,120,.45);
--auth-confirm-hint: rgba(80,60,120,.45);
--auth-toggle-pw: rgba(80,60,120,.45);
--studip-bg: var(--dp-bg);
--studip-back-bg: rgba(155,93,229,.1);
--studip-back-border: rgba(155,93,229,.2);
--studip-back-color: #7C3AED;
--studip-subtitle: rgba(100,80,140,.5);
}
body.night {
--auth-bg: rgba(10,8,18,.85);
--auth-box-bg: linear-gradient(135deg,#110d20,#0d0f1e);
--auth-box-border: rgba(192,132,252,.25);
--auth-label: rgba(255,255,255,.4);
--auth-input-bg: rgba(255,255,255,.06);
--auth-input-border: rgba(255,255,255,.1);
--auth-input-color: #fff;
--auth-input-placeholder: rgba(255,255,255,.3);
--auth-divider: rgba(255,255,255,.1);
--auth-divider-text: rgba(255,255,255,.25);
--auth-subtitle: rgba(255,255,255,.45);
--auth-footer: rgba(255,255,255,.35);
--auth-google-bg: rgba(255,255,255,.07);
--auth-google-border: rgba(255,255,255,.15);
--auth-google-color: #fff;
--auth-google-hover: rgba(255,255,255,.12);
--auth-stay: rgba(255,255,255,.45);
--auth-stay-timeout: rgba(255,255,255,.2);
--auth-pw-bar: rgba(255,255,255,.1);
--auth-pw-label: rgba(255,255,255,.35);
--auth-confirm-hint: rgba(255,255,255,.3);
--auth-toggle-pw: rgba(255,255,255,.5);
--studip-bg: linear-gradient(135deg,#0a0812 0%,#110d20 40%,#0d0f1e 100%);
--studip-back-bg: rgba(255,255,255,.08);
--studip-back-border: rgba(255,255,255,.15);
--studip-back-color: rgba(255,255,255,.7);
--studip-subtitle: rgba(255,255,255,.35);
}
body.night{
--purple:#B47FFF;--pink:#FF8EC7;--orange:#FF8C5A;
--bg:#0F0E17;--card:#1A1826;--text:#E8E4F0;--muted:#7A748A;
--shadow:0 2px 14px rgba(0,0,0,.4);--border:#2A2640;
--dp-bg:linear-gradient(135deg,#0a0812 0%,#110d20 40%,#0d0f1e 100%);
--dp-solid:#0a0812;--dp-modal:linear-gradient(135deg,#0f0c1a,#130f22);
/* adaptive semantic tokens — dark overrides */
--glass-bg:rgba(255,255,255,.07);
--glass-border:rgba(255,255,255,.14);
--glass-border-top:rgba(255,255,255,.22);
--on-glass:rgba(255,255,255,.88);
--on-glass-muted:rgba(255,255,255,.45);
--on-glass-faint:rgba(255,255,255,.3);
--card-inner:rgba(255,255,255,.05);
--card-inner-border:rgba(255,255,255,.1);
--row-bg:rgba(255,255,255,.04);
--row-border:rgba(255,255,255,.08);
--section-label:rgba(255,255,255,.35);
--divider:rgba(255,255,255,.07);
--badge-bg:rgba(255,255,255,.08);
--badge-border:rgba(255,255,255,.12);
--badge-color:rgba(255,255,255,.5);
--slot-bg:rgba(255,255,255,.05);
}
body.night .pdf-body{background:#1a1a2e}
body.night .pdf-page-wrap{box-shadow:0 4px 20px rgba(0,0,0,.5)}
body.night .sem-btn{background:#23203A;border-color:#2A2640}
body.night .sem-dd{background:#1A1826;border-color:var(--purple)}
body.night .sem-opt{border-bottom-color:#2A2640}
body.night .sem-opt:hover{background:#23203A}
body.night .course-row{background:#23203A}
body.night .file-row{background:#1F1D2E;border-color:#2A2640}
body.night .tt-slot-sb{background:#23203A}
body.night .mail-sb{background:#23203A}
body.night .mail-sb.unread{background:#221D3A}
body.night .co-card{background:rgba(255,255,255,.05)}
body.night .co-file{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
body.night .co-nav-btn{color:rgba(255,255,255,.45)}
body.night .co-nav-btn:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
body.night .ai-msg.bot{background:#23203A}
body.night .ai-tip{background:#23203A;border-color:#2A2640}
body.night .ai-textarea{background:#23203A;border-color:#2A2640;color:var(--text)}
body.night .ai-textarea:focus{border-color:var(--purple);background:#2A2640}
body.night .ai-sel-banner{background:linear-gradient(135deg,#221D3A,#231D30)}
body.night .fv-preview-card{background:#1A1826}
body.night .sb-back:hover{background:#23203A}
body.night .sb-x-btn{background:#23203A}
body.night .sb-x-btn:hover{background:#2A2640}
body.night .pdf-tb-btn{background:#23203A;border-color:#2A2640;color:var(--purple)}
body.night .pdf-tb-btn:hover{background:#2A2640}
body.night .tb-toggle{background:#23203A}
body.night .tb-toggle:hover{background:#2A2640}
body.night .tb-portal-btn{background:#23203A;color:var(--purple)}
body.night .tb-portal-btn:hover{background:#2A2640}
/* ── LIGHT MODE — portal & deep-area overrides ──────────────────────────── */
body:not(.night) .blob{opacity:.09}
body:not(.night) #portal::before{opacity:.015}
body:not(.night) #courseOverview::before{opacity:.012}
body:not(.night) #courseOverview::after{background:radial-gradient(circle,rgba(155,93,229,.08) 0%,transparent 70%)}
/* studipDash now uses var(--dp-bg) inline */
body:not(.night) #authBox{background:linear-gradient(135deg,#ffffff,#F8F4FF) !important;border-color:rgba(155,93,229,.2) !important}
body:not(.night) #onboardModal>div{background:linear-gradient(135deg,#ffffff,#F8F4FF) !important;border-color:rgba(155,93,229,.2) !important}
body:not(.night) #authModal{background:rgba(155,93,229,.18);backdrop-filter:blur(20px)}
/* portal header */
body:not(.night) .p-tag{color:rgba(100,80,140,.6)}
body:not(.night) .p-uni-badge{background:rgba(255,255,255,.6);border-color:rgba(155,93,229,.16)}
body:not(.night) .p-uni-name{color:rgba(60,40,100,.85)}
body:not(.night) .p-uni-city{color:rgba(100,80,140,.5)}
/* portal grid cards */
body:not(.night) .pc{
background:rgba(255,255,255,.38);
border:1px solid rgba(255,255,255,.72);
border-bottom-color:rgba(155,93,229,.18);
border-right-color:rgba(155,93,229,.12);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
box-shadow:0 4px 24px rgba(155,93,229,.07),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(155,93,229,.04)
}
body:not(.night) .pc::before{background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.05) 60%)}
body:not(.night) .pc::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
body:not(.night) .pc:hover{
background:rgba(255,255,255,.58);
border-color:rgba(155,93,229,.35);
border-top-color:rgba(255,255,255,.95);
backdrop-filter:blur(28px) saturate(200%);
-webkit-backdrop-filter:blur(28px) saturate(200%);
box-shadow:0 20px 60px rgba(155,93,229,.16),0 0 0 1px rgba(155,93,229,.18),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(155,93,229,.06)
}
body:not(.night) .pc-name{color:#2D2D2D}
body:not(.night) .pc-desc{color:rgba(100,80,140,.55)}
/* portal nav tabs */
body:not(.night) .p-nav-bar{background:rgba(255,255,255,.55);border-color:rgba(155,93,229,.18);border-top-color:rgba(255,255,255,.95);box-shadow:0 8px 32px rgba(155,93,229,.12),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(155,93,229,.06)}
body:not(.night) .p-nav-bar::before{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 100%)}
body:not(.night) .psb{color:rgba(100,80,140,.52)}
body:not(.night) .psb::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
body:not(.night) .psb:hover{color:#7C3AED;background:rgba(155,93,229,.09);border-color:rgba(155,93,229,.2);box-shadow:0 4px 16px rgba(155,93,229,.12),inset 0 1px 0 rgba(255,255,255,.9)}
body:not(.night) .psb.on{background:linear-gradient(135deg,rgba(155,93,229,.18),rgba(255,111,183,.12));color:#7C3AED;border-color:rgba(155,93,229,.32);border-top-color:rgba(255,255,255,.9);box-shadow:0 2px 18px rgba(155,93,229,.2),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(155,93,229,.07)}
body:not(.night) .psb.on::before{background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 55%)}
body:not(.night) .psb-div{background:rgba(155,93,229,.15)}
body:not(.night) .psb.ai-link{background:linear-gradient(135deg,rgba(155,93,229,.14),rgba(255,111,183,.1));color:#9B5DE5;border-color:rgba(155,93,229,.25);box-shadow:0 2px 10px rgba(155,93,229,.1),inset 0 1px 0 rgba(255,255,255,.9)}
body:not(.night) .psb.ai-link:hover{background:linear-gradient(135deg,rgba(155,93,229,.22),rgba(255,111,183,.16));box-shadow:0 4px 18px rgba(155,93,229,.2),inset 0 1px 0 rgba(255,255,255,.95)}
/* course overview tabs */
body:not(.night) .co-nav{background:rgba(255,255,255,.55);border-color:rgba(155,93,229,.18);border-top-color:rgba(255,255,255,.95);box-shadow:0 8px 32px rgba(155,93,229,.12),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(155,93,229,.06)}
body:not(.night) .co-nav::before{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 100%)}
body:not(.night) .co-nav-btn{color:rgba(100,80,140,.52)}
body:not(.night) .co-nav-btn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
body:not(.night) .co-nav-btn:hover{color:#7C3AED;background:rgba(155,93,229,.09);border-color:rgba(155,93,229,.2);box-shadow:0 4px 16px rgba(155,93,229,.12),inset 0 1px 0 rgba(255,255,255,.9)}
body:not(.night) .co-nav-btn.active{background:linear-gradient(135deg,rgba(155,93,229,.18),rgba(255,111,183,.12));color:#7C3AED;border-color:rgba(155,93,229,.32);border-top-color:rgba(255,255,255,.9);box-shadow:0 2px 18px rgba(155,93,229,.2),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(155,93,229,.07)}
body:not(.night) .co-nav-btn.active::before{background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 55%)}
/* course overview content */
body:not(.night) .co-file:hover{box-shadow:0 8px 24px rgba(155,93,229,.14),0 0 0 1px rgba(155,93,229,.15)}
body:not(.night) .ws-title{color:#2D2D2D}
body:not(.night) .ws-sub{color:rgba(45,45,45,.75)}
body:not(.night) .ws-hint{background:rgba(155,93,229,.1);color:rgba(60,40,100,.7)}
body:not(.night) .co-multi-bar{background:linear-gradient(135deg,rgba(248,244,255,.98),rgba(252,248,255,.98));border-top-color:rgba(155,93,229,.2)}
body:not(.night) .co-multi-count{color:rgba(100,80,140,.8)}
/* lecture notes */
/* lecture notes modal */
body:not(.night) .ln-modal{border-color:rgba(155,93,229,.2)}
/* multi-summary modal */
/* studip dashboard */
/* extension banner */
body:not(.night) .ext-banner{background:rgba(255,255,255,.5);border-color:rgba(155,93,229,.2)}
body:not(.night) .ext-banner-text h3{color:#2D2D2D}
/* auth modal now uses CSS variables — no overrides needed */
body:not(.night) #authBox{box-shadow:0 20px 60px rgba(155,93,229,.15)}
/* Onboarding modal */
body:not(.night) #onboardModal{background:rgba(155,93,229,.22) !important;backdrop-filter:blur(20px)}
body:not(.night) #onboardModal > div{background:linear-gradient(160deg,#fff 0%,#F5F0FF 100%) !important;border:1px solid rgba(155,93,229,.2) !important;box-shadow:0 20px 60px rgba(155,93,229,.15) !important}
body:not(.night) #onboardModal [style*="color:rgba(255,255,255"]{color:#2D2D2D !important}
body:not(.night) #onboardModal [style*="color:#fff"]{color:#2D2D2D !important}
body:not(.night) #onboardModal input,
body:not(.night) #onboardModal select{background:#F2EEFF !important;border:1.5px solid rgba(155,93,229,.25) !important;color:#2D2D2D !important}
body:not(.night) #onboardModal label{color:rgba(80,60,120,.65) !important}
body:not(.night) #onboardModal [style*="background:rgba(255,255,255,.1)"]{background:rgba(155,93,229,.15) !important}
body:not(.night) #onboardModal #obErr1,
body:not(.night) #onboardModal #obErr2{background:rgba(255,107,55,.08) !important;color:#c0400a !important}
/* Auth indicator badge in portal */
body:not(.night) #authIndicator{background:rgba(255,255,255,.6) !important;border:1px solid rgba(155,93,229,.2) !important;backdrop-filter:blur(12px)}
body:not(.night) #authName{color:rgba(60,40,100,.75) !important}
/* Portal: pc-name / pc-desc are already covered but ensure inline color override */
body:not(.night) .pc-name{color:#2D2D2D !important}
body:not(.night) .pc-desc{color:rgba(80,60,120,.55) !important}
/* Toast in light mode */
body:not(.night) #ss-toast{background:linear-gradient(135deg,#fff,#F5F0FF) !important;border-color:rgba(155,93,229,.3) !important;box-shadow:0 12px 40px rgba(155,93,229,.15) !important}
body:not(.night) .ss-toast-title{color:#2D2D2D !important}
body:not(.night) .ss-toast-sub{color:rgba(80,60,120,.6) !important}
body:not(.night) .ss-toast-action{background:rgba(155,93,229,.12) !important;border-color:rgba(155,93,229,.3) !important;color:#7C3AED !important}
/* PDF loading text */
body:not(.night) .pdf-loading{color:#2D2D2D}
/* welcome state text */
.night-btn{width:34px;height:34px;border:none;border-radius:9px;background:#F3EEFF;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;transition:background .15s}
.night-btn:hover{background:#EDE0FF}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;height:100dvh}
/* Global select dropdown theming — option background/color are the only reliable cross-browser hooks */
select{color-scheme:dark}
select option{background-color:#0f1623;color:rgba(255,255,255,.85);}
body:not(.night) select{color-scheme:light}
body:not(.night) select option{background-color:#ffffff;color:#222;}
body.landing{overflow-y:auto;height:auto} body.page-transitioning{background:var(--dp-solid)}
@keyframes drift{from{transform:translateY(0) scale(1)}to{transform:translateY(28px) scale(1.07)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotBounce{0%,80%,100%{transform:scale(.55);opacity:.5}40%{transform:scale(1);opacity:1}}
@keyframes confettiDrop{from{transform:translateY(-40px) rotate(0deg);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes popIn{from{transform:scale(.9) translateY(4px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(155,93,229,.4)}50%{box-shadow:0 0 0 8px rgba(155,93,229,0)}}
/* PORTAL */
#portal{position:fixed;inset:0;z-index:200;overflow-y:auto;overflow-x:hidden;display:none;background:var(--dp-bg)}
#portal.show{display:block;opacity:1;pointer-events:auto}
.blobs{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.22;animation:drift 12s ease-in-out infinite alternate}
body:not(.night) .blob{opacity:.32}
.blob-1{width:600px;height:600px;background:var(--purple);top:-150px;left:-120px}
.blob-2{width:450px;height:450px;background:var(--pink);top:40%;right:-100px;animation-delay:3s}
.blob-3{width:400px;height:400px;background:var(--blue);bottom:-80px;left:30%;animation-delay:5s}
.blob-4{width:300px;height:300px;background:#FF6B35;top:20%;left:50%;animation-delay:7s;opacity:.12}
/* noise texture overlay */
#portal::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size:180px;opacity:.028}
.p-inner{position:relative;z-index:10;max-width:780px;margin:0 auto;padding:60px 24px 80px;display:flex;flex-direction:column;align-items:center}
/* Header */
.p-logo{font-family:'Fredoka One',cursive;font-size:3.2rem;background:linear-gradient(135deg,#c084fc,#f472b6,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:8px;letter-spacing:-.01em;filter:drop-shadow(0 0 40px rgba(192,132,252,.35))}
.p-tag{text-align:center;color:var(--on-glass-muted);font-weight:700;margin-bottom:10px;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase}
/* Uni badge */
.p-uni-badge{display:flex;align-items:center;gap:10px;margin-bottom:48px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:40px;padding:8px 18px 8px 10px;backdrop-filter:blur(12px)}
.p-logo-sq{width:30px;height:30px;border-radius:50%;background:#003c78;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.p-uni-name{font-weight:800;font-size:.82rem;color:var(--on-glass)}.p-uni-city{font-size:.68rem;color:var(--on-glass-muted)}
/* Nav pill bar */
@keyframes tabSlideIn{from{opacity:0;transform:translateX(-6px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes tabPop{0%{transform:scale(1)}40%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes tabGlow{0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,0),0 2px 12px rgba(192,132,252,.25)}50%{box-shadow:0 0 0 4px rgba(192,132,252,.12),0 2px 20px rgba(192,132,252,.4)}}
/* Portal nav bar */
.p-nav-bar{
display:flex;align-items:center;gap:4px;margin-bottom:44px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.22);
border-radius:40px;padding:5px;
backdrop-filter:blur(24px) saturate(160%);
-webkit-backdrop-filter:blur(24px) saturate(160%);
box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.08);
position:relative;
}
.p-nav-bar::before{
content:'';position:absolute;inset:0;border-radius:40px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 60%);
}
.psb{
display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:30px;
font-weight:700;font-size:.8rem;color:rgba(255,255,255,.5);
cursor:pointer;white-space:nowrap;user-select:none;
border:1px solid transparent;
transition:color .2s ease,background .2s ease,border-color .2s ease,transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;
position:relative;overflow:hidden;
animation:tabSlideIn .35s cubic-bezier(.34,1.2,.64,1) both;
}
.psb:nth-child(1){animation-delay:.04s}
.psb:nth-child(2){animation-delay:.08s}
.psb:nth-child(3){animation-delay:.12s}
.psb:nth-child(4){animation-delay:.16s}
.psb:nth-child(5){animation-delay:.20s}
.psb:nth-child(6){animation-delay:.24s}
.psb:nth-child(7){animation-delay:.28s}
.psb::after{
content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
transition:left .45s ease;pointer-events:none;
}
.psb:hover::after{left:130%}
.psb:hover{
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.11);
border-color:rgba(255,255,255,.16);
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);
}
.psb:active{transform:scale(.96) translateY(0)}
.psb.on{
background:linear-gradient(135deg,rgba(192,132,252,.32),rgba(244,114,182,.22));
color:#fff;
border-color:rgba(192,132,252,.45);
border-top-color:rgba(255,255,255,.3);
box-shadow:0 2px 16px rgba(192,132,252,.35),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.1);
animation:tabPop .35s cubic-bezier(.34,1.56,.64,1),tabGlow 2.4s ease-in-out 0.4s infinite;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.psb.on::before{
content:'';position:absolute;inset:0;border-radius:30px;
background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 55%);
pointer-events:none;
}
.psb .ic{font-size:.95rem;width:18px;text-align:center;flex-shrink:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.psb:hover .ic{transform:scale(1.2) rotate(-4deg)}
.psb.on .ic{transform:scale(1.1)}
.psb-div{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 2px}
.psb.ai-link{
background:linear-gradient(135deg,rgba(192,132,252,.28),rgba(244,114,182,.22));
color:#f0d0ff;border-color:rgba(192,132,252,.4);
box-shadow:0 2px 12px rgba(192,132,252,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.psb.ai-link:hover{background:linear-gradient(135deg,rgba(192,132,252,.42),rgba(244,114,182,.32));box-shadow:0 4px 18px rgba(192,132,252,.35),inset 0 1px 0 rgba(255,255,255,.25)}
/* Grid */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
@media(max-width:600px){.p-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
.p-inner{padding:40px 14px 60px}
.p-nav-bar{gap:2px;padding:4px;margin-bottom:28px}
.psb{padding:7px 10px;font-size:.72rem;gap:4px}
.psb-div{margin:0 1px}
}
/* Cards */
.pc{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.13);
border-top-color:rgba(255,255,255,.22);
border-radius:20px;
padding:28px 16px 24px;
text-align:center;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.2,.64,1);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
position:relative;
overflow:hidden;
box-shadow:0 2px 16px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.12);
}
.pc::before{
content:'';position:absolute;inset:0;border-radius:20px;
background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 60%);
pointer-events:none;
}
.pc::after{
content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
transition:left .5s ease;pointer-events:none;
}
.pc:hover{
transform:translateY(-6px) scale(1.02);
background:rgba(255,255,255,.09);
border-color:rgba(192,132,252,.4);
box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(192,132,252,.2),inset 0 1px 0 rgba(255,255,255,.15);
}
.pc:hover::after{left:120%}
.pc-icon{font-size:2rem;display:block;margin-bottom:10px;filter:drop-shadow(0 4px 12px rgba(192,132,252,.4))}
body:not(.night) .pc-icon{filter:drop-shadow(0 4px 14px rgba(155,93,229,.35))}
.pc-name{font-weight:800;font-size:.9rem;margin-bottom:4px;color:var(--on-glass)}
.pc-desc{font-size:.7rem;color:var(--on-glass-faint);font-weight:600}
/* Removed old layout pieces */
.p-body{display:none}
.p-side{display:none}
.p-right{display:none}
/* APP */
#app{position:fixed;inset:0;display:none;flex-direction:column;z-index:10;background:var(--dp-solid);overflow-x:hidden}
.topbar{height:var(--topbar-h);background:var(--card);display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;z-index:100}
.tb-toggle{width:34px;height:34px;border:none;border-radius:9px;background:#F3EEFF;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;transition:background .15s}
.tb-toggle:hover{background:#E6D9FF}
.tb-logo{font-family:'Fredoka One',cursive;font-size:1.25rem;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0;white-space:nowrap}
.tb-crumb{flex:1;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.tb-crumb b{color:var(--purple)}
.tb-portal-btn{padding:7px 14px;background:#F3EEFF;border:none;border-radius:9px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:var(--purple);cursor:pointer;flex-shrink:0}
.tb-portal-btn:hover{background:#E6D9FF}
.app-body{flex:1;display:flex;overflow:hidden;position:relative;background:var(--dp-solid)}
/* SIDEBAR */
.sidebar{position:absolute;left:0;top:0;bottom:0;width:var(--sb-w);background:var(--card);border-right:1px solid #EDE8F5;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:hidden;z-index:90;box-shadow:4px 0 20px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sidebar.visible{transform:translateX(0)}
#sbHoverZone{display:none}
#sbTab{display:none}
#sbMain,#sbCourse{width:100%;overflow-y:auto;overflow-x:hidden}
.sb-x-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;border-radius:8px;background:#F3EEFF;cursor:pointer;font-size:1rem;color:var(--purple);display:flex;align-items:center;justify-content:center;z-index:10;flex-shrink:0}
.sb-x-btn:hover{background:#EDE0FF}
.sb-scroll{flex:1;overflow-y:auto;padding:12px 10px;scrollbar-width:thin;scrollbar-color:var(--purple) #F0F0F0}
.sb-scroll::-webkit-scrollbar{width:4px}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}
.sb-section{margin-bottom:10px}
.sb-section-title{font-family:'Fredoka One',cursive;font-size:.78rem;color:var(--muted);padding:4px 8px;margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.sem-wrap{position:relative;margin-bottom:8px}
.sem-btn{width:100%;padding:9px 12px;background:#F8F5FF;border:1.5px solid #DDD6F5;border-radius:10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.8rem;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .15s}
.sem-btn:hover,.sem-btn.open{border-color:var(--purple)}
.sem-btn.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.sem-btn-l{display:flex;align-items:center;gap:7px}
.sem-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sem-chev{font-size:9px;color:var(--purple);transition:transform .18s}
.sem-chev.up{transform:rotate(180deg)}
.sem-dd{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border:1.5px solid var(--purple);border-top:none;border-radius:0 0 10px 10px;z-index:60;max-height:200px;overflow-y:auto}
.sem-dd.open{display:block}
.sem-opt{padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--text);border-bottom:.5px solid #F5F5F5;transition:background .12s}
.sem-opt:last-child{border-bottom:none;border-radius:0 0 8px 8px}
.sem-opt:hover{background:#F8F5FF;color:var(--purple)}
.sem-opt.sel{background:linear-gradient(135deg,#F0E8FF,#FFE8F5);color:var(--purple)}
.sem-cur{display:none}
.course-row{background:#F8F5FF;border-radius:10px;padding:9px 11px;display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:5px;border:1.5px solid transparent;transition:all .15s}
.course-row:hover{border-color:var(--purple);transform:translateX(2px)}
.course-row.active{border-color:var(--purple);background:#EDE0FF}
.cr-bar{width:3px;height:30px;border-radius:3px;flex-shrink:0}
.cr-info{flex:1;min-width:0}
.cr-name{font-weight:800;font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-meta{font-size:.66rem;color:var(--muted);margin-top:1px}
.cr-arr{display:none}
.files-sub{margin-left:12px;margin-bottom:5px;display:none;flex-direction:column;gap:4px}
.files-sub.open{display:flex}
.file-row{background:#fff;border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:7px;cursor:pointer;border:1.5px solid #EDE8F5;transition:all .13s;font-size:.74rem;font-weight:700}
.file-row:hover{border-color:var(--purple);background:#F8F5FF}
.file-row.active{border-color:var(--purple);background:#EDE0FF;color:var(--purple)}
.fr-icon{font-size:.95rem;flex-shrink:0}
.fr-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-back{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:.78rem;font-weight:800;color:var(--purple);cursor:pointer;border-radius:10px;transition:background .13s;margin-bottom:4px;user-select:none}
.sb-back:hover{background:#F3EEFF}
.sb-course-name{font-family:'Fredoka One',cursive;font-size:.9rem;color:var(--text);padding:8px 12px 14px;line-height:1.3;border-bottom:1px solid #EDE8F5;margin-bottom:8px}
.sb-course-nav{display:flex;flex-direction:column;gap:5px}
/* Sidebar accordion */
.sb-acc-item{border-radius:10px;margin-bottom:4px;border:1.5px solid transparent;transition:border-color .15s}
.sb-acc-item.open{border-color:var(--purple)}
.sb-acc-hdr{display:flex;align-items:stretch;border-radius:10px;font-weight:800;font-size:.85rem;color:var(--text);user-select:none;background:transparent;transition:background .14s;overflow:hidden}
.sb-acc-hdr:hover{background:#F3EEFF;}
.sb-acc-item.open .sb-acc-hdr{background:linear-gradient(135deg,#EEE5FF,#FFE8F5);color:var(--purple);border-radius:10px 10px 0 0}
.sb-acc-label-btn{display:flex;align-items:center;gap:10px;flex:1;padding:11px 8px 11px 13px;cursor:pointer;color:inherit;min-width:0}
.sb-acc-label-btn:hover{color:var(--purple)}
.sb-acc-icon{font-size:1.1rem;width:26px;text-align:center;flex-shrink:0}
.sb-acc-label{flex:1}
.sb-acc-chev-btn{width:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border-left:1px solid rgba(155,93,229,.15);transition:background .14s}
.sb-acc-chev-btn:hover{background:rgba(155,93,229,.15)}
.sb-acc-chev{font-size:.65rem;color:var(--purple);transition:transform .2s;opacity:.8;display:block}
.sb-acc-item.open .sb-acc-chev{transform:rotate(180deg)}
.sb-acc-body{height:0;overflow:hidden;background:#F8F5FF;border-radius:0 0 10px 10px;transition:height .22s ease}
.sb-acc-item.open .sb-acc-body{height:160px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--purple) rgba(155,93,229,.08)}
.sb-acc-item.open .sb-acc-body::-webkit-scrollbar{width:4px}
.sb-acc-item.open .sb-acc-body::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}
.sb-acc-row{display:flex;align-items:center;gap:8px;padding:8px 13px;font-size:.75rem;font-weight:700;color:var(--text);cursor:pointer;border-bottom:.5px solid rgba(155,93,229,.08);transition:background .12s;flex-shrink:0}
.sb-acc-row:last-child{border-bottom:none}
.sb-acc-row:hover{background:#EDE0FF;color:var(--purple)}
.sb-acc-row-icon{font-size:.85rem;flex-shrink:0;width:18px;text-align:center}
.sb-acc-row-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-acc-row-meta{font-size:.63rem;color:var(--muted);flex-shrink:0}
.sb-acc-row-active{background:#EDE0FF !important;color:var(--purple) !important}
.sb-dl-btn{font-size:.75rem;padding:2px 7px;border-radius:20px;background:rgba(6,214,160,.15);color:rgba(6,214,160,.9);border:1px solid rgba(6,214,160,.3);cursor:pointer;flex-shrink:0;transition:background .13s}
.sb-dl-btn:hover{background:rgba(6,214,160,.3)}
body.night .sb-acc-row-active{background:#2A2640 !important;color:#c084fc !important}
body.night .sb-acc-hdr:hover{background:#23203A}
body.night .sb-acc-item.open .sb-acc-hdr{background:linear-gradient(135deg,#221D3A,#231D30)}
body.night .sb-acc-body{background:#1F1D2E}
body.night .sb-acc-row{border-bottom-color:rgba(155,93,229,.12)}
body.night .sb-acc-row:hover{background:#2A2640}
body.night .sb-acc-chev-btn{border-left-color:rgba(155,93,229,.25)}
.tt-day-sb{font-family:'Fredoka One',cursive;font-size:.73rem;color:var(--purple);margin:6px 0 3px}
.tt-slot-sb{padding:7px 10px;background:#F8F5FF;border-radius:9px;margin-bottom:4px;border-left:3px solid var(--purple)}
.tt-time-sb{font-size:.65rem;font-weight:800;color:var(--muted)}
.tt-name-sb{font-weight:800;font-size:.75rem;margin:1px 0}
.tt-room-sb{font-size:.65rem;color:var(--muted)}
.mail-sb{padding:8px 10px;background:#F8F5FF;border-radius:9px;margin-bottom:4px;cursor:pointer;transition:background .13s;border-left:3px solid transparent}
.mail-sb:hover{background:#EDE0FF}
.mail-sb.unread{border-left-color:var(--purple);background:#F0EAFF}
.mail-sb-subj{font-weight:800;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-sb-date{font-size:.63rem;color:var(--muted);margin-top:1px}
.mail-sb-prev{font-size:.7rem;color:var(--text);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* PDF VIEWER */
.pdf-viewer-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--dp-solid)}
.pdf-toolbar{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--card);border-bottom:1px solid #EDE8F5;flex-shrink:0;flex-wrap:wrap}
.pdf-tb-btn{background:#F8F5FF;border:1.5px solid #DDD6F5;border-radius:7px;padding:5px 10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.73rem;color:var(--purple);cursor:pointer;transition:background .13s;white-space:nowrap}
.pdf-tb-btn:hover{background:#EDE0FF}
.pdf-page-info{font-size:.75rem;font-weight:800;color:var(--muted);padding:0 4px;display:inline-flex;align-items:center;gap:3px}
.pdf-page-input{width:30px;border:none;background:transparent;font-size:.75rem;font-weight:800;color:var(--purple);text-align:center;padding:1px 2px;border-radius:4px;-moz-appearance:textfield;cursor:text;font-family:inherit}
.pdf-page-input::-webkit-outer-spin-button,.pdf-page-input::-webkit-inner-spin-button{-webkit-appearance:none}
.pdf-page-input:focus{outline:1.5px solid var(--purple);background:rgba(155,93,229,.07)}
.pdf-body{flex:1;overflow-y:auto;overflow-x:auto;background:#888;display:flex;flex-direction:column;align-items:flex-start;padding:16px;gap:12px;scrollbar-width:thin;scrollbar-color:#555 #666;min-width:0}
.pdf-body::-webkit-scrollbar{width:6px}
.pdf-body::-webkit-scrollbar-thumb{background:#666;border-radius:4px}
.pdf-page-wrap{position:relative;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.3);border-radius:2px;margin:0 auto}
.pdf-page-wrap canvas{display:block}
.pdf-text-layer{position:absolute;inset:0;overflow:hidden;pointer-events:auto;line-height:1;user-select:text}
.pdf-text-layer span,.pdf-text-layer br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.pdf-text-layer .markedContent{top:0;height:0}
.pdf-text-layer ::selection{background:rgba(155,93,229,.35);color:transparent}
/* ANNOTATION LAYER */
.annot-live{position:absolute;inset:0;z-index:6;touch-action:pan-x pan-y}
.annot-live.annot-mode-pen{cursor:crosshair}
.annot-live.annot-mode-highlight{cursor:crosshair}
.annot-live.annot-mode-eraser{cursor:cell}
.annot-live.annot-mode-text{cursor:text}
.annot-committed{position:absolute;inset:0;z-index:5;pointer-events:none}
.annot-tool-btn{background:none;border:none;border-radius:8px;padding:5px 7px;color:var(--on-glass);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .13s;touch-action:manipulation}
.annot-fmt-btn,.annot-color-swatch{touch-action:manipulation}
.annot-tool-btn:hover{background:rgba(155,93,229,.2)}
.annot-tool-btn.active{background:rgba(155,93,229,.4)!important}
.annot-color-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s,border-color .12s;flex-shrink:0}
.annot-color-swatch:hover{transform:scale(1.15)}
.annot-color-swatch.active{border-color:#fff;transform:scale(1.15)}
.annot-fmt-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--on-glass);border-radius:6px;padding:2px 8px;font-size:.8rem;cursor:pointer;transition:background .13s}
.annot-fmt-btn:hover,.annot-fmt-btn.active{background:rgba(155,93,229,.35)}
.annot-text-input{position:absolute;z-index:10;background:transparent;border:1.5px dashed rgba(155,93,229,.7);outline:none;resize:none;min-width:80px;min-height:28px;font-family:'Nunito',sans-serif;color:inherit;padding:2px 4px;border-radius:3px;overflow:hidden;line-height:1.3}
#annotToolbar{flex-shrink:0}
/* pdf-text-layer pointer-events off in annotate mode */
.annot-active .pdf-text-layer{pointer-events:none!important;user-select:none!important}
.pdf-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;color:#fff}
.pdf-loading p{font-family:'Fredoka One',cursive;font-size:1.1rem}
.loading-dots{display:flex;gap:6px;align-items:center}
.loading-dots span{width:10px;height:10px;border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}
.loading-dots span:nth-child(1){background:var(--purple)}
.loading-dots span:nth-child(2){background:var(--pink);animation-delay:.2s}
.loading-dots span:nth-child(3){background:var(--orange);animation-delay:.4s}
.welcome-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:40px;text-align:center;background:var(--dp-solid)}
/* Multi-file select */
.co-files-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.co-select-toggle{font-size:.72rem;font-weight:800;padding:5px 14px;border-radius:20px;border:1px solid rgba(192,132,252,.35);background:rgba(192,132,252,.1);color:rgba(192,132,252,.9);cursor:pointer;transition:all .15s}
.co-select-toggle:hover{background:rgba(192,132,252,.2)}
.co-select-toggle.active{background:rgba(192,132,252,.25);border-color:rgba(192,132,252,.6)}
.co-upload-btn{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;padding:5px 14px;border-radius:20px;border:1px solid rgba(6,214,160,.35);background:rgba(6,214,160,.1);color:rgba(6,214,160,.9);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit;line-height:1}
.co-upload-btn:hover{background:rgba(6,214,160,.2)}
.co-file-uploaded{border-left:2px solid rgba(6,214,160,.5)}
.co-upload-progress{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.co-upload-progress-label{display:flex;justify-content:space-between;font-size:.72rem;opacity:.7}
.co-upload-progress-track{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.co-upload-progress-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,#9B5DE5,#06D6A0);transition:width .2s ease}
.co-file-cb{width:18px;height:18px;border-radius:5px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);flex-shrink:0;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.co-select-mode .co-file-cb{display:flex}
.co-file-cb.checked{background:rgba(192,132,252,.5);border-color:#c084fc}
.co-file-cb.checked::after{content:'✓';font-size:.7rem;color:#fff;font-weight:900}
.co-select-mode .co-file:hover{border-color:rgba(192,132,252,.4)}
.co-select-mode .co-file.selected{border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.1)}
.co-multi-bar{position:sticky;bottom:0;left:0;right:0;display:none;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(135deg,rgba(15,12,26,.98),rgba(18,14,32,.98));border-top:1px solid rgba(192,132,252,.25);backdrop-filter:blur(16px);z-index:20;margin:0 -22px -20px;border-radius:0 0 20px 20px}
.co-multi-bar.show{display:flex}
/* User folders */
.co-new-folder-btn{font-size:.72rem;font-weight:800;padding:5px 14px;border-radius:20px;border:1px dashed rgba(155,93,229,.4);background:rgba(155,93,229,.07);color:var(--purple);cursor:pointer;transition:all .15s;white-space:nowrap;}
.co-new-folder-btn:hover{background:rgba(155,93,229,.18);}
.co-folder-section{border-radius:14px;border:1px solid rgba(155,93,229,.2);background:rgba(155,93,229,.04);margin-bottom:10px;overflow:hidden;}
.co-folder-header{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;user-select:none;transition:background .15s;}
.co-folder-header:hover{background:rgba(155,93,229,.1);}
.co-folder-toggle-icon{font-size:.75rem;color:var(--on-glass-faint);transition:transform .2s;flex-shrink:0;}
.co-folder-section:not(.collapsed) .co-folder-toggle-icon{transform:rotate(90deg);}
.co-folder-name-label{font-weight:800;font-size:.85rem;color:var(--on-glass);flex:1;}
.co-folder-count-label{font-size:.7rem;color:var(--on-glass-faint);font-weight:600;flex-shrink:0;}
.co-folder-files{padding:0 8px 8px;}
.co-folder-section.collapsed .co-folder-files{display:none;}
.co-folder-empty{padding:14px;text-align:center;font-size:.78rem;color:var(--on-glass-faint);opacity:.7;}
.co-folder-up-btn,.co-folder-del-btn,.co-folder-select-all-btn{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px;cursor:pointer;border:1px solid transparent;background:transparent;flex-shrink:0;font-family:Nunito,sans-serif;transition:all .13s;}
.co-folder-select-all-btn{color:rgba(192,132,252,.9);}
.co-folder-select-all-btn:hover{background:rgba(192,132,252,.15);border-color:rgba(192,132,252,.3);}
.co-folder-up-btn{color:rgba(6,214,160,.9);}
.co-folder-up-btn:hover{background:rgba(6,214,160,.15);border-color:rgba(6,214,160,.3);}
.co-folder-del-btn{color:rgba(239,68,68,.8);}
.co-folder-del-btn:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);}
.co-multi-count{font-weight:800;font-size:.82rem;color:rgba(255,255,255,.7);flex:1}
.co-multi-count b{color:#c084fc}
.co-multi-delete{display:flex;align-items:center;gap:7px;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.4);border-radius:20px;padding:9px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:#fff;cursor:pointer;transition:all .18s;white-space:nowrap}
.co-multi-delete:hover{background:rgba(239,68,68,.32);}
.co-multi-move{display:flex;align-items:center;gap:7px;background:rgba(155,93,229,.2);border:1px solid rgba(155,93,229,.4);border-radius:20px;padding:9px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:#fff;cursor:pointer;transition:all .18s;white-space:nowrap}
.co-multi-move:hover{background:rgba(155,93,229,.35);}
.co-multi-summarise{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(192,132,252,.3),rgba(244,114,182,.2));border:1px solid rgba(192,132,252,.4);border-radius:20px;padding:9px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:#fff;cursor:pointer;transition:all .18s;white-space:nowrap}
.co-multi-summarise:hover{background:linear-gradient(135deg,rgba(192,132,252,.45),rgba(244,114,182,.35));box-shadow:0 4px 16px rgba(192,132,252,.3)}
.co-multi-summarise:disabled{opacity:.5;cursor:default}
.co-multi-select-all{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:9px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:#fff;cursor:pointer;transition:all .18s;white-space:nowrap}
.co-multi-select-all:hover{background:rgba(255,255,255,.15)}
.co-multi-clear{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.35);cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .14s;white-space:nowrap}
.co-multi-clear:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
/* Multi-summary result modal */
#multiSumModal{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px}
#multiSumModal.show{display:flex}
.msm-box{background:var(--dp-modal);border:1px solid rgba(192,132,252,.25);border-radius:24px;width:100%;max-width:700px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.msm-hdr{padding:20px 24px 16px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:12px;flex-shrink:0}
.msm-title{flex:1;font-weight:800;font-size:.95rem;color:var(--on-glass)}
.msm-close{width:32px;height:32px;border:1px solid var(--divider);border-radius:9px;background:var(--row-bg);color:var(--on-glass-muted);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .14s}
.msm-close:hover{background:rgba(255,107,55,.2);color:#ff6b35}
.msm-body{flex:1;overflow-y:auto;padding:22px 24px;scrollbar-width:thin;scrollbar-color:rgba(155,93,229,.3) transparent;font-size:.82rem;color:var(--on-glass);line-height:1.8}
.msm-body h3{font-family:'Fredoka One',cursive;font-size:1rem;color:#c084fc;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--divider)}
.msm-body h3:first-child{margin-top:0}
.msm-body h4{font-size:.82rem;font-weight:800;color:#f472b6;margin:10px 0 4px}
.msm-body li{padding-left:14px;position:relative;margin-bottom:4px;list-style:none;color:var(--on-glass)}
.msm-body li::before{content:'•';position:absolute;left:0;color:#c084fc}
.msm-body strong{color:var(--text);font-weight:800}
.msm-body code{background:rgba(192,132,252,.12);border-radius:5px;padding:1px 6px;font-family:'Courier New',monospace;font-size:.78em;color:#c084fc}
.msm-files-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.msm-file-tag{font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:20px;background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.25);color:rgba(192,132,252,.8)}
.msm-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;color:var(--on-glass-muted);font-size:.85rem}
.msm-dots{display:flex;gap:7px}
.msm-dots span{width:10px;height:10px;border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}
.msm-dots span:nth-child(1){background:#c084fc}
.msm-dots span:nth-child(2){background:#f472b6;animation-delay:.2s}
.msm-dots span:nth-child(3){background:#fb923c;animation-delay:.4s}
.msm-foot{padding:14px 24px;border-top:1px solid var(--divider);display:flex;gap:10px;flex-shrink:0}
.msm-save-btn{flex:1;background:linear-gradient(135deg,rgba(192,132,252,.25),rgba(244,114,182,.15));border:1px solid rgba(192,132,252,.35);border-radius:12px;padding:9px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:#c084fc;cursor:pointer;transition:all .15s}
.msm-save-btn:hover{background:linear-gradient(135deg,rgba(192,132,252,.4),rgba(244,114,182,.3))}
#courseOverview{background:var(--dp-bg);position:relative;min-height:100%}
#courseOverview::before{content:'';position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size:180px;opacity:.025;z-index:0}
/* glowing blobs inside courseOverview */
#courseOverview::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;
background:radial-gradient(circle,rgba(192,132,252,.18) 0%,transparent 70%);
top:-120px;right:-80px;pointer-events:none;z-index:0}
.co-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:48px 24px 60px;display:flex;flex-direction:column;align-items:center}
.co-nav{
display:flex;flex-wrap:wrap;gap:4px;margin-bottom:36px;justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.22);
border-radius:40px;padding:5px;
backdrop-filter:blur(24px) saturate(160%);
-webkit-backdrop-filter:blur(24px) saturate(160%);
box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.08);
position:relative;
}
.co-nav::before{
content:'';position:absolute;inset:0;border-radius:40px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 60%);
}
.co-nav-btn{
background:transparent;border:1px solid transparent;border-radius:30px;
padding:7px 15px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.79rem;
color:rgba(255,255,255,.5);cursor:pointer;white-space:nowrap;
position:relative;overflow:hidden;
transition:color .2s ease,background .2s ease,border-color .2s ease,transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;
animation:tabSlideIn .32s cubic-bezier(.34,1.2,.64,1) both;
}
.co-nav-btn:nth-child(1){animation-delay:.04s}
.co-nav-btn:nth-child(2){animation-delay:.09s}
.co-nav-btn:nth-child(3){animation-delay:.14s}
.co-nav-btn:nth-child(4){animation-delay:.19s}
.co-nav-btn:nth-child(5){animation-delay:.24s}
.co-nav-btn::after{
content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
transition:left .45s ease;pointer-events:none;
}
.co-nav-btn:hover::after{left:130%}
.co-nav-btn:hover{
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.11);
border-color:rgba(255,255,255,.16);
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);
}
.co-nav-btn:active{transform:scale(.96) translateY(0)}
.co-nav-btn.active{
background:linear-gradient(135deg,rgba(192,132,252,.32),rgba(244,114,182,.22));
color:#fff;
border-color:rgba(192,132,252,.45);
border-top-color:rgba(255,255,255,.3);
box-shadow:0 2px 16px rgba(192,132,252,.35),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.1);
animation:tabPop .35s cubic-bezier(.34,1.56,.64,1),tabGlow 2.4s ease-in-out 0.4s infinite;
}
.co-nav-btn.active::before{
content:'';position:absolute;inset:0;border-radius:30px;
background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 55%);
pointer-events:none;
}
.co-logo{font-family:'Fredoka One',cursive;font-size:2rem;background:linear-gradient(135deg,#c084fc,#f472b6,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:4px;filter:drop-shadow(0 0 30px rgba(192,132,252,.3))}
.co-tag{text-align:center;color:var(--on-glass-muted);font-weight:700;font-size:.82rem;margin-bottom:28px;letter-spacing:.04em;text-transform:uppercase}
.co-card{
width:100%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:20px;
padding:20px 22px;
margin-bottom:12px;
animation:fadeUp .22s ease;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
position:relative;overflow:hidden;
}
.co-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 60%);pointer-events:none}
.co-card h2{font-family:'Fredoka One',cursive;font-size:1rem;color:var(--purple);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--divider)}
.co-file{
display:flex;align-items:center;gap:10px;
padding:11px 14px;border-radius:12px;cursor:pointer;
border:1px solid var(--row-border);
background:var(--row-bg);
margin-bottom:7px;transition:all .18s cubic-bezier(.34,1.2,.64,1);
position:relative;overflow:hidden;
}
.co-file::before{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 60%);pointer-events:none}
.co-file:hover{border-color:rgba(192,132,252,.4);background:rgba(192,132,252,.1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(192,132,252,.15)}
.co-file-icon{font-size:1.2rem;flex-shrink:0}
.co-file-name{font-weight:800;font-size:.84rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-glass)}
.co-file-meta{font-size:.69rem;color:var(--on-glass-faint);flex-shrink:0;font-weight:600}
.co-info-row{display:flex;gap:8px;padding:7px 0;border-bottom:.5px solid var(--divider);font-size:.84rem}
.co-info-row:last-child{border-bottom:none}
.co-info-label{font-weight:800;color:var(--on-glass-muted);width:90px;flex-shrink:0}
.co-info-val{font-weight:700;color:var(--on-glass)}
.ws-icon{font-size:3.5rem;display:block;margin-bottom:6px}
.ws-title{font-family:'Fredoka One',cursive;font-size:1.5rem;color:var(--text)}
.ws-sub{font-size:.88rem;color:#ddd;font-weight:600;max-width:340px;line-height:1.65}
.ws-hint{font-size:.78rem;color:#ccc;background:rgba(255,255,255,.15);border-radius:20px;padding:6px 14px}
/* AI SIDE PANEL */
#aiTab{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:85;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-radius:12px 0 0 12px;padding:14px 5px;writing-mode:vertical-rl;font-family:'Fredoka One',cursive;font-size:.72rem;cursor:pointer;letter-spacing:.08em;box-shadow:-3px 0 10px rgba(155,93,229,.3);transition:opacity .2s}
#aiTab.hidden{opacity:0;pointer-events:none}
#aiHoverZone{position:absolute;right:0;top:0;bottom:0;width:16px;z-index:80;cursor:pointer}
#aiPanel{position:absolute;right:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:none;display:flex;flex-direction:column;overflow:hidden;transition:width .32s cubic-bezier(.34,1.2,.64,1),border-color .28s,box-shadow .28s;z-index:50}
#aiPanel.visible{width:var(--ai-w);border-left:1px solid rgba(155,93,229,.25);box-shadow:-8px 0 40px rgba(155,93,229,.2)}
/* ── AI PANEL ─────────────────────────────── */
/* ── AI PANEL — Glass redesign ───────────── */
#aiPanel{backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
#aiPanel.visible{box-shadow:-8px 0 40px rgba(155,93,229,.15)}
.ai-hdr{padding:16px 18px;border-bottom:1px solid rgba(155,93,229,.18);display:flex;align-items:center;gap:12px;flex-shrink:0;background:rgba(155,93,229,.1);flex-shrink:0}
.ai-av-wrap{position:relative;flex-shrink:0}
.ai-av{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 14px rgba(155,93,229,.4)}
.ai-status-dot{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:#06D6A0;border:2px solid var(--card);box-shadow:0 0 6px rgba(6,214,160,.6)}
.ai-hdr-info{flex:1;min-width:0;overflow:hidden}
.ai-hdr h3{font-family:'Fredoka One',cursive;font-size:1rem;color:var(--purple);line-height:1}
.ai-hdr p{font-size:.67rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-hdr-actions{display:flex;gap:5px;align-items:center}
.ai-icon-btn{width:30px;height:30px;border:1.5px solid rgba(155,93,229,.3);border-radius:9px;background:rgba(155,93,229,.1);cursor:pointer;font-size:.85rem;color:var(--purple);display:flex;align-items:center;justify-content:center;transition:all .14s;font-weight:800}
.ai-icon-btn:hover{background:rgba(155,93,229,.18)}
.ai-close{width:30px;height:30px;border:1.5px solid rgba(255,111,183,.4);border-radius:9px;background:rgba(255,111,183,.12);cursor:pointer;font-size:.85rem;color:var(--pink);display:flex;align-items:center;justify-content:center;transition:all .14s;font-weight:800}
.ai-close:hover{background:rgba(255,111,183,.3);border-color:rgba(255,111,183,.7)}
.ai-msgs{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:22px;scrollbar-width:thin;scrollbar-color:rgba(155,93,229,.25) transparent}
.ai-msgs::-webkit-scrollbar{width:3px}
.ai-msgs::-webkit-scrollbar-thumb{background:rgba(155,93,229,.25);border-radius:3px}
.ai-msg-wrap{display:flex;flex-direction:column;gap:4px;animation:fadeUp .18s ease}
.ai-msg-wrap.user{align-items:flex-end}
.msg-sender{font-size:.63rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:0 4px;display:flex;align-items:center;gap:5px;margin-bottom:2px}
.msg-sender.bot-sender{color:var(--purple)}
.msg-sender.user-sender{color:#4CC9F0}
.msg-sender-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.msg-sender.bot-sender .msg-sender-dot{background:var(--purple)}
.msg-sender.user-sender .msg-sender-dot{background:#4CC9F0}
.msg-body{display:flex;flex-direction:column;gap:3px;max-width:94%}
.ai-msg-wrap.user .msg-body{align-items:flex-end}
.ai-bubble{padding:11px 14px;font-size:.83rem;line-height:1.65;word-break:break-word;border-radius:14px;max-width:100%}
.ai-bubble.bot{background:rgba(155,93,229,.07);border:1px solid rgba(155,93,229,.13);color:var(--text)}
body.night #aiPanel{background:rgba(15,14,23,.88)}
body.night .ai-bubble.bot{background:rgba(155,93,229,.11);border-color:rgba(155,93,229,.2)}
.ai-bubble.user{background:rgba(76,201,240,.08);border:1px solid rgba(76,201,240,.18);color:var(--text)}
body.night .ai-bubble.user{background:rgba(76,201,240,.1);border-color:rgba(76,201,240,.22)}
.msg-meta{display:flex;align-items:center;gap:5px;padding:2px 4px;opacity:0;transition:opacity .15s}
.ai-msg-wrap:hover .msg-meta{opacity:1}
.msg-time{font-size:.61rem;color:var(--muted)}
.msg-action-btn{font-size:.65rem;color:var(--muted);cursor:pointer;background:rgba(155,93,229,.08);border:1px solid rgba(155,93,229,.15);padding:2px 8px;border-radius:6px;font-family:'Nunito',sans-serif;font-weight:800;transition:all .14s}
.msg-action-btn:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.user-btn{background:rgba(76,201,240,.08);border-color:rgba(76,201,240,.2);color:#4CC9F0}
.user-btn:hover{background:#4CC9F0 !important;color:#fff !important;border-color:#4CC9F0 !important}
.ai-bubble b,.ai-bubble strong{font-weight:700;color:var(--text)}
.ai-bubble em{font-style:italic}
.ai-bubble code{background:rgba(155,93,229,.1);border-radius:5px;padding:1px 5px;font-family:'Courier New',monospace;font-size:.8em;color:var(--purple)}
.ai-bubble .md-h{font-weight:700;color:var(--text);margin:14px 0 6px;line-height:1.3}
.ai-bubble .md-h1{font-size:1.05rem}
.ai-bubble .md-h2{font-size:.97rem}
.ai-bubble .md-h3{font-size:.88rem}
.ai-bubble .md-p{margin:0;line-height:1.7}
.ai-bubble .md-gap{height:8px}
.ai-bubble .md-ul,.ai-bubble .md-ol{padding-left:20px;margin:4px 0 8px}
.ai-bubble .md-ul li,.ai-bubble .md-ol li{margin-bottom:5px;line-height:1.65}
.ai-bubble .md-bq{border-left:3px solid var(--purple);margin:8px 0;padding:6px 12px;background:rgba(155,93,229,.06);border-radius:0 6px 6px 0;color:var(--muted);font-style:italic}
.ai-bubble .md-hr{border:none;border-top:1px solid rgba(155,93,229,.2);margin:12px 0}
.ai-bubble .md-code-block{background:var(--dp-solid);border:1px solid rgba(155,93,229,.18);border-radius:8px;margin:10px 0;overflow:hidden}
.ai-bubble .md-code-lang{background:rgba(155,93,229,.12);padding:3px 10px;font-size:.7rem;font-family:'Courier New',monospace;color:var(--purple);font-weight:700;letter-spacing:.04em}
.ai-bubble .md-code-block pre{margin:0;padding:10px 12px;overflow-x:auto;font-family:'Courier New',monospace;font-size:.78rem;line-height:1.6;color:var(--text)}
.typing-wrap{display:flex;flex-direction:column;gap:4px}
.ai-bubble .katex-display,.aip-bubble .katex-display{overflow-x:auto;overflow-y:hidden;padding:6px 0;margin:8px 0}
.ai-bubble .katex,.aip-bubble .katex{font-size:1em}
.ai-bubble .md-math-block,.aip-bubble .md-math-block{overflow-x:auto;padding:4px 0;margin:6px 0;text-align:center}
.ai-action-bar{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.ai-action-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;border:1px solid rgba(155,93,229,.3);background:rgba(155,93,229,.07);color:var(--purple);font-size:.73rem;font-weight:700;font-family:'Nunito',sans-serif;cursor:pointer;transition:background .13s,border-color .13s}
.ai-action-btn:hover{background:rgba(155,93,229,.18);border-color:rgba(155,93,229,.5)}
.aip-msg-row .ai-action-bar{margin-top:8px}
.aip-msg-row .ai-action-btn{font-size:.72rem}
.typing-bubble{background:rgba(155,93,229,.07);border:1px solid rgba(155,93,229,.13);border-radius:14px;padding:10px 14px;display:flex;gap:5px;align-items:center;width:fit-content}
body.night .typing-bubble{background:rgba(155,93,229,.11)}
.typing-bubble span{width:6px;height:6px;border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}
.typing-bubble span:nth-child(1){background:var(--purple)}
.typing-bubble span:nth-child(2){background:var(--pink);animation-delay:.2s}
.typing-bubble span:nth-child(3){background:var(--orange);animation-delay:.4s}
.ai-sel-banner{background:rgba(155,93,229,.05);border-radius:12px;padding:10px 13px;font-size:.78rem;border:1px solid rgba(155,93,229,.18);border-left:3px solid var(--purple);margin:0 0 4px}
body.night .ai-sel-banner{background:rgba(155,93,229,.09)}
.ai-sel-banner b{color:var(--purple);display:block;margin-bottom:3px;font-size:.8rem}
.ai-sel-banner em{color:var(--muted);font-style:normal;display:block;font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-sel-actions{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.ai-sel-btn{background:linear-gradient(135deg,var(--purple),var(--pink));border:none;border-radius:8px;padding:5px 11px;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;cursor:pointer;transition:opacity .13s}
.ai-sel-btn:hover{opacity:.85}
.ai-sel-dismiss{background:rgba(155,93,229,.07);border:1px solid rgba(155,93,229,.18);border-radius:8px;padding:5px 11px;color:var(--purple);font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;cursor:pointer}
.ai-input-area{padding:14px;border-top:1px solid rgba(155,93,229,.1);flex-shrink:0;background:rgba(155,93,229,.03)}
.ai-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.ai-tip{background:rgba(155,93,229,.07);border:1px solid rgba(155,93,229,.16);border-radius:20px;padding:5px 12px;font-size:.7rem;font-weight:800;color:var(--purple);cursor:pointer;transition:all .14s;user-select:none;white-space:nowrap;backdrop-filter:blur(4px)}
body.night .ai-tip{background:rgba(155,93,229,.11);border-color:rgba(155,93,229,.22)}
.ai-tip:hover{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(155,93,229,.3)}
.ai-input-box{border:1px solid rgba(155,93,229,.18);border-radius:16px;background:rgba(255,255,255,.65);transition:all .15s;overflow:hidden;backdrop-filter:blur(12px)}
body.night .ai-input-box{background:rgba(26,24,38,.75);border-color:rgba(155,93,229,.22)}
.ai-input-box:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(155,93,229,.1),0 4px 20px rgba(155,93,229,.12)}
.ai-textarea{width:100%;border:none;background:transparent;padding:11px 14px 4px;font-family:'Nunito',sans-serif;font-size:.83rem;resize:none;min-height:48px;max-height:120px;color:var(--text);outline:none;line-height:1.5}
.ai-textarea::placeholder{color:var(--muted)}
/* scroll-to-bottom button */
.ai-scroll-btn{position:relative;display:none;margin:0 auto 4px;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(155,93,229,.28);background:var(--card);color:var(--purple);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(155,93,229,.18);transition:opacity .18s,transform .18s;flex-shrink:0}
.ai-scroll-btn:hover{background:rgba(155,93,229,.1);transform:translateY(1px)}
.ai-scroll-btn.visible{display:flex}
body.night .ai-scroll-btn{background:#1a1826;border-color:rgba(155,93,229,.35)}
.ai-bottom-row{display:flex;align-items:center;gap:5px;padding:4px 10px 8px}
.ai-char-count{font-size:.63rem;color:var(--muted);flex:1}
/* attach + snip buttons */
.ai-attach-btn{width:28px;height:28px;border:1.5px solid rgba(155,93,229,.22);border-radius:8px;background:rgba(155,93,229,.07);color:var(--purple);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .15s;flex-shrink:0;padding:0}
.ai-attach-btn:hover{background:rgba(155,93,229,.18);box-shadow:0 2px 8px rgba(155,93,229,.2)}
body.night .ai-attach-btn{background:rgba(155,93,229,.1);border-color:rgba(155,93,229,.28)}
/* snip button — desktop only */
@media(hover:none),(pointer:coarse){.ai-snip-btn{display:none}}
/* attached image preview */
.ai-img-preview{display:none;flex-direction:row;flex-wrap:nowrap;gap:8px;padding:8px 12px 4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(155,93,229,.3) transparent}
.ai-img-preview::-webkit-scrollbar{height:4px}
.ai-img-preview::-webkit-scrollbar-thumb{background:rgba(155,93,229,.3);border-radius:2px}
.ai-img-thumb-wrap{position:relative;flex-shrink:0}
.ai-img-thumb-wrap img{display:block;height:68px;width:auto;max-width:110px;border-radius:10px;border:1.5px solid rgba(155,93,229,.28);object-fit:cover;background:#f0ecff;box-shadow:0 3px 12px rgba(155,93,229,.18)}
.ai-img-remove{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(30,20,50,.65);color:#fff;font-size:.58rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;backdrop-filter:blur(4px)}
.ai-img-remove:hover{background:rgba(220,40,30,.85)}
/* in-chat image thumbnails (above user bubble) */
.ai-msg-imgs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.ai-msg-img{height:60px;width:auto;max-width:90px;border-radius:8px;object-fit:cover;border:1.5px solid rgba(76,201,240,.3);box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer}
.ai-msg-img:hover{opacity:.88}
/* snip overlay */
#snipOverlay{position:fixed;inset:0;z-index:9999;cursor:crosshair;background:rgba(0,0,0,.38);user-select:none}
#snipHint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(15,12,28,.82);color:#fff;padding:11px 20px;border-radius:12px;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;pointer-events:none;white-space:nowrap;border:1px solid rgba(155,93,229,.4);box-shadow:0 8px 32px rgba(0,0,0,.3)}
#snipSel{position:fixed;display:none;border:2px solid var(--purple);background:rgba(155,93,229,.12);pointer-events:none;box-shadow:0 0 0 1px rgba(155,93,229,.3)}
/* file chip bar */
.ai-file-chip-bar{padding:7px 14px;border-bottom:1px solid rgba(155,93,229,.1);flex-shrink:0}
.ai-file-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(155,93,229,.1);border:1px solid rgba(155,93,229,.22);border-radius:20px;padding:4px 10px 4px 8px;font-size:.68rem;font-weight:800;color:var(--purple);max-width:100%;overflow:hidden;white-space:nowrap}
.ai-file-chip svg{flex-shrink:0;opacity:.7}
.ai-file-chip #aiFileChipName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-file-chip.empty{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--muted)}
body.night .ai-file-chip{background:rgba(155,93,229,.13);border-color:rgba(155,93,229,.28)}
body.night .ai-file-chip.empty{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
/* send / stop morph button */
.ai-send{width:38px;height:38px;min-width:38px;min-height:38px;aspect-ratio:1;border:none;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .28s ease,box-shadow .28s ease,border .28s ease;box-shadow:0 4px 14px rgba(155,93,229,.35);position:relative;overflow:hidden;flex-shrink:0}
.ai-send:hover:not(.is-stop){transform:scale(1.07);box-shadow:0 6px 20px rgba(155,93,229,.5)}
.ai-send.is-stop{background:rgba(255,70,40,.12);box-shadow:0 4px 14px rgba(255,70,40,.18);border:1.5px solid rgba(255,90,55,.38);border-radius:10px}
.ai-send.is-stop:hover{background:rgba(255,70,40,.22);box-shadow:0 4px 18px rgba(255,70,40,.32)}
.ai-send:disabled:not(.is-stop){opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.ai-btn-icon{position:absolute;display:flex;align-items:center;justify-content:center;transition:opacity .22s ease,transform .22s ease}
.ai-icon-plane{opacity:1;transform:scale(1)}
.ai-icon-stop{opacity:0;transform:scale(.45);color:#ff5030}
.ai-send.is-stop .ai-icon-plane{opacity:0;transform:scale(.45)}
.ai-send.is-stop .ai-icon-stop{opacity:1;transform:scale(1)}
.ai-row{display:flex;gap:6px;align-items:flex-end}
.think-bubble{background:rgba(155,93,229,.06);border:1px dashed rgba(155,93,229,.22);border-radius:12px;padding:8px 12px;font-size:.73rem;color:var(--muted);max-width:220px;line-height:1.6;backdrop-filter:blur(4px)}
body.night .think-bubble{background:rgba(155,93,229,.09)}
.think-label{font-weight:800;color:var(--purple);display:block;margin-bottom:3px;font-size:.72rem}
.think-text{display:block;font-style:italic;color:var(--muted);min-height:16px}
.stream-cursor{display:inline-block;background:var(--purple);width:2px;height:1em;margin-left:1px;vertical-align:middle;border-radius:1px;animation:blink .7s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes rippleOut{from{transform:scale(0);opacity:1}to{transform:scale(1.8);opacity:0}}
.pdf-zoom-pct{font-size:.75rem;font-weight:800;color:var(--purple);background:#EDE0FF;padding:4px 8px;border-radius:7px;min-width:42px;text-align:center;font-family:'Nunito',sans-serif}
body.night .pdf-zoom-pct{background:#2A2640}
/* Sub-option drawer */
.chip-drawer{max-height:0;overflow:hidden;transition:max-height .22s ease,opacity .18s ease;opacity:0;margin-top:0}
.chip-drawer.open{max-height:80px;opacity:1;margin-top:6px}
.chip-drawer-inner{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--bg);border-radius:10px;border:1px solid var(--border)}
.chip-drawer-label{font-size:.63rem;font-weight:800;color:var(--muted);margin-right:4px;white-space:nowrap}
.chip-sub{font-size:.7rem;font-weight:800;padding:4px 11px;border-radius:20px;cursor:pointer;border:1.5px solid transparent;transition:all .14s;white-space:nowrap}
.chip-sub:hover{filter:brightness(.92);transform:translateY(-1px)}
.chip-sub-s{background:#E0F5EE;color:#085041;border-color:#5DCAA5}
.chip-sub-m{background:#EDE0FF;color:#3C3489;border-color:#AFA9EC}
.chip-sub-t{background:#FAEEDA;color:#633806;border-color:#EF9F27}
.chip-sub-e{background:#EAF3DE;color:#27500A;border-color:#97C459}
.chip-sub-h{background:#FCEBEB;color:#791F1F;border-color:#F09595}
body.night .chip-drawer-inner{background:#1A1826;border-color:#2A2640}
body.night .chip-sub-s{background:#085041;color:#9FE1CB;border-color:#1D9E75}
body.night .chip-sub-m{background:#26215C;color:#CECBF6;border-color:#7F77DD}
body.night .chip-sub-t{background:#412402;color:#FAC775;border-color:#BA7517}
body.night .chip-sub-e{background:#173404;color:#C0DD97;border-color:#639922}
body.night .chip-sub-h{background:#501313;color:#F7C1C1;border-color:#E24B4A}
/* ── INTERACTIVE EFFECTS ─────────────────────────────────────────── */
/* 1. Message entrance — slide + fade */
@keyframes msgSlideIn{
from{opacity:0;transform:translateY(12px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.ai-msg-wrap{animation:msgSlideIn .22s cubic-bezier(.34,1.56,.64,1) both}
/* 2. Pulsing glow on status dot */
@keyframes statusPulse{
0%,100%{box-shadow:0 0 0 0 rgba(6,214,160,.6)}
50%{box-shadow:0 0 0 5px rgba(6,214,160,0)}
}
.ai-status-dot{animation:statusPulse 2.2s ease-in-out infinite}
/* 3. AI avatar shimmer on hover */
.ai-av{transition:transform .2s,box-shadow .2s}
.ai-av:hover{transform:scale(1.08) rotate(-4deg);box-shadow:0 6px 20px rgba(155,93,229,.55)}
/* 4. Input box — glow border trace */
@keyframes borderGlow{
0%{box-shadow:0 0 0 0 rgba(155,93,229,.0),0 0 0 3px rgba(155,93,229,.08)}
50%{box-shadow:0 0 20px rgba(155,93,229,.2),0 0 0 3px rgba(155,93,229,.15)}
100%{box-shadow:0 0 0 0 rgba(155,93,229,.0),0 0 0 3px rgba(155,93,229,.08)}
}
.ai-input-box:focus-within{animation:borderGlow 2s ease-in-out infinite}
/* 5. Send button — ripple + morph */
.ai-send{position:relative;overflow:hidden}
.ai-send::after{content:'';position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,.25);transform:scale(0);opacity:0;transition:transform .4s,opacity .4s}
.ai-send:active::after{transform:scale(2.5);opacity:0;transition:none}
/* 6. Chip hover — lift with glow */
.ai-tip{position:relative;overflow:hidden}
.ai-tip::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--purple),var(--pink));opacity:0;transition:opacity .18s;border-radius:20px}
.ai-tip:hover::before{opacity:1}
.ai-tip:hover span,.ai-tip:hover{color:#fff;position:relative;z-index:1}
/* 7. Message bubble hover glow */
.ai-bubble{transition:box-shadow .18s,transform .18s}
.ai-bubble.bot:hover{box-shadow:0 2px 16px rgba(155,93,229,.14);transform:translateX(2px)}
.ai-bubble.user:hover{box-shadow:0 2px 16px rgba(76,201,240,.14);transform:translateX(-2px)}
/* 8. Thinking bubble animated border */
@keyframes dashMove{to{stroke-dashoffset:-20}}
.think-bubble{position:relative}
/* 9. Dot bounce improved */
@keyframes dotBounce{
0%,80%,100%{transform:scale(.5) translateY(0);opacity:.4}
40%{transform:scale(1.1) translateY(-4px);opacity:1}
}
/* 10. Sender label slide */
.msg-sender{animation:msgSlideIn .18s ease both;animation-delay:.04s}
/* 11. Cursor blink */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.stream-cursor{display:inline-block;background:var(--purple);width:2px;height:1em;margin-left:2px;vertical-align:middle;border-radius:1px;animation:blink .65s ease-in-out infinite}
/* 12. Panel slide in — spring */
#aiPanel{transition:width .32s cubic-bezier(.34,1.2,.64,1),border .28s}
/* 13. Quick action sub-option hover */
.chip-sub{transition:all .14s cubic-bezier(.34,1.4,.64,1)}
.chip-sub:hover{transform:translateY(-2px) scale(1.06)}
/* 14. Scroll-to-bottom glow pulse on new message */
@keyframes scrollHint{
0%{box-shadow:0 -4px 16px rgba(155,93,229,.0)}
50%{box-shadow:0 -4px 16px rgba(155,93,229,.25)}
100%{box-shadow:0 -4px 16px rgba(155,93,229,.0)}
}
.ai-msgs.new-msg{animation:scrollHint .6s ease}
/* 15. AI tab pulse */
@keyframes tabPulse{
0%,100%{box-shadow:-3px 0 10px rgba(155,93,229,.3)}
50%{box-shadow:-3px 0 18px rgba(155,93,229,.6)}
}
#aiTab{animation:tabPulse 2.5s ease-in-out infinite}
/* 16. Night mode toggle spin */
#nightBtn{transition:none}
/* 17. Stop button pulse when active */
#stopBtn{transition:all .15s}
#stopBtn:hover{transform:scale(1.03);box-shadow:0 4px 14px rgba(255,111,183,.35)}
/* 18. Message action buttons — stagger */
.msg-action-btn{transition:all .14s cubic-bezier(.34,1.4,.64,1)}
.msg-action-btn:hover{transform:translateY(-1px) scale(1.05)}
/* 19. Frosted panel shimmer sweep on open */
@keyframes shimmerSweep{
from{background-position:-200% 0}
to{background-position:200% 0}
}
#aiPanel.visible::before{
content:'';
position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(155,93,229,.6),rgba(255,111,183,.6),transparent);
background-size:200% 100%;
animation:shimmerSweep .8s ease forwards;
border-radius:0;
pointer-events:none;
z-index:2;
}
#aiPanel{overflow:visible}
/* When panel is closed (width:0), its overflow content must not block clicks */
#aiPanel:not(.visible){pointer-events:none;overflow:hidden}
/* AI panel resize handle — desktop only */
#aiResizeHandle{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:60;border-radius:4px;transition:background .18s;pointer-events:auto}
#aiResizeHandle:hover,#aiResizeHandle.dragging{background:rgba(155,93,229,.28)}
@media(hover:none),(pointer:coarse){#aiResizeHandle{display:none}}
/* STUDIP DASHBOARD */
.sd-section-label{font-family:'Fredoka One',cursive;font-size:.72rem;color:var(--section-label);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.sd-glass-card{background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:20px;padding:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;overflow:hidden}
.sd-glass-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none}
.sd-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.sd-course-card{background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:16px;padding:18px 16px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.2,.64,1);position:relative;overflow:hidden}
.sd-course-card::before{content:'';position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none}
.sd-course-card:hover{transform:translateY(-4px);border-color:rgba(192,132,252,.45);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(192,132,252,.2)}
.sd-course-bar{width:100%;height:3px;border-radius:3px;margin-bottom:12px}
.sd-course-name{font-weight:800;font-size:.86rem;color:var(--on-glass);margin-bottom:4px;line-height:1.35}
.sd-course-meta{font-size:.68rem;color:var(--on-glass-faint);font-weight:600}
.sd-course-badge{display:inline-block;font-size:.64rem;font-weight:800;padding:3px 9px;border-radius:20px;margin-top:10px;background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--badge-color)}
.sd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.sd-two-col{grid-template-columns:1fr}}
.sd-tt-day{font-family:'Fredoka One',cursive;font-size:.72rem;color:rgba(192,132,252,.8);margin:10px 0 6px;position:relative;z-index:1}
.sd-tt-day:first-child{margin-top:0}
.sd-tt-slot{background:var(--slot-bg);border-left:3px solid rgba(192,132,252,.5);border-radius:0 10px 10px 0;padding:7px 11px;margin-bottom:5px;position:relative;z-index:1}
.sd-tt-time{font-size:.63rem;font-weight:800;color:var(--on-glass-faint)}
.sd-tt-name{font-weight:800;font-size:.76rem;color:var(--on-glass);margin:2px 0}
.sd-tt-room{font-size:.63rem;color:var(--on-glass-faint)}
.sd-mail{border-bottom:1px solid var(--divider);padding:10px 0;cursor:pointer;position:relative;z-index:1;transition:all .15s}
.sd-mail:last-child{border-bottom:none;padding-bottom:0}
.sd-mail:first-child{padding-top:0}
.sd-mail:hover .sd-mail-subj{color:rgba(192,132,252,.9)}
.sd-mail-subj{font-weight:800;font-size:.76rem;color:var(--on-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.sd-mail-unread{width:6px;height:6px;border-radius:50%;background:#c084fc;flex-shrink:0}
.sd-mail-date{font-size:.63rem;color:var(--on-glass-faint);margin-top:2px}
.sd-mail-prev{font-size:.7rem;color:var(--on-glass-muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sd-sem-btn{background:var(--glass-bg) !important;border-color:var(--glass-border) !important;color:var(--on-glass) !important}
.sd-sem-dd{background:var(--card) !important;border-color:var(--purple) !important}
.sd-sem-dd .sem-opt{color:var(--text);border-bottom-color:var(--divider) !important}
.sd-sem-dd .sem-opt:hover{background:rgba(155,93,229,.15) !important;color:var(--purple)}
.sd-sem-dd .sem-opt.sel{background:rgba(192,132,252,.2) !important;color:#c084fc}
/* TOAST NOTIFICATION */
#ss-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);z-index:9999;display:flex;align-items:center;gap:12px;background:var(--dp-modal);border:1px solid rgba(155,93,229,.3);border-radius:16px;padding:14px 20px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(192,132,252,.15);opacity:0;transition:all .35s cubic-bezier(.34,1.2,.64,1);pointer-events:none;max-width:380px;width:calc(100vw - 48px)}
#ss-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.ss-toast-icon{font-size:1.5rem;flex-shrink:0}
.ss-toast-body{flex:1;min-width:0}
.ss-toast-title{font-weight:800;font-size:.82rem;color:var(--on-glass);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-toast-sub{font-size:.71rem;color:rgba(255,255,255,.45);font-weight:600}
.ss-toast-action{background:rgba(192,132,252,.2);border:1px solid rgba(192,132,252,.4);border-radius:9px;padding:6px 13px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:#c084fc;cursor:pointer;flex-shrink:0;transition:all .14s;white-space:nowrap}
.ss-toast-action:hover{background:rgba(192,132,252,.35)}
.ext-install-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--row-bg);border:1px solid rgba(192,132,252,.25);border-radius:20px;padding:20px 24px;margin-bottom:12px;flex-wrap:wrap}
.ext-install-left{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.ext-install-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.ext-install-title{font-weight:800;font-size:.95rem;color:var(--on-glass);margin-bottom:4px}
.ext-install-sub{font-size:.78rem;color:var(--on-glass-faint);line-height:1.5}
.ext-install-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
.ext-install-btn{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:8px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;cursor:pointer;border:none;text-decoration:none;transition:all .18s}
.ext-install-primary{background:linear-gradient(135deg,rgba(192,132,252,.9),rgba(244,114,182,.9));color:#fff}
.ext-install-primary:hover{opacity:.88;transform:translateY(-1px)}
.ext-install-secondary{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.3);color:rgba(192,132,252,.9)}
.ext-install-secondary:hover{background:rgba(192,132,252,.22)}
.ext-howto{background:var(--row-bg);border:1px solid rgba(192,132,252,.18);border-radius:16px;padding:20px 24px;margin-bottom:20px}
.ext-howto-title{font-weight:800;font-size:.85rem;color:var(--on-glass);margin-bottom:12px}
.ext-howto-steps{margin:0 0 12px 0;padding-left:22px;color:var(--on-glass-faint);font-size:.82rem;line-height:2}
.ext-howto-steps li{margin-bottom:2px}
.ext-howto-steps code{background:rgba(192,132,252,.15);border-radius:5px;padding:1px 6px;font-size:.8rem;color:rgba(192,132,252,.9)}
.ext-howto-note{font-size:.78rem;color:var(--on-glass-faint);border-top:1px solid rgba(192,132,252,.15);padding-top:10px;line-height:1.6}
.ln-section{width:100%;margin-top:32px}
.ln-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ln-title{font-family:'Fredoka One',cursive;font-size:1.4rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ln-sync-btn{display:flex;align-items:center;gap:7px;background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);border-radius:20px;padding:7px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;color:rgba(192,132,252,.9);cursor:pointer;transition:all .18s}
.ln-sync-btn:hover{background:rgba(192,132,252,.25);border-color:rgba(192,132,252,.5)}
.ln-sync-dot{width:7px;height:7px;border-radius:50%;background:#c084fc;flex-shrink:0}
.ln-empty{text-align:center;padding:40px 20px;background:var(--row-bg);border:1px dashed var(--row-border);border-radius:20px;color:var(--on-glass-faint);font-size:.85rem;line-height:2}
.ln-empty-icon{font-size:2.5rem;display:block;margin-bottom:8px;filter:grayscale(1);opacity:.4}
.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ln-card{background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:18px;overflow:hidden;cursor:pointer;transition:all .2s cubic-bezier(.34,1.2,.64,1);position:relative}
.ln-card::before{content:'';position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none}
.ln-card:hover{transform:translateY(-4px);border-color:rgba(192,132,252,.4);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.ln-card-hdr{padding:16px 18px 12px;border-bottom:1px solid var(--divider)}
.ln-card-title{font-weight:800;font-size:.88rem;color:var(--on-glass);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ln-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ln-card-date{font-size:.66rem;color:var(--on-glass-faint);font-weight:700}
.ln-card-badge{font-size:.62rem;font-weight:800;padding:2px 9px;border-radius:20px;background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);color:rgba(192,132,252,.9)}
.ln-card-preview{padding:12px 18px 16px;font-size:.75rem;color:var(--on-glass-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Modal */
.ln-modal-bg{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.ln-modal-bg.show{display:flex}
.ln-modal{background:var(--dp-modal);border:1px solid rgba(192,132,252,.25);border-radius:24px;width:100%;max-width:680px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ln-modal-hdr{padding:20px 24px 16px;border-bottom:1px solid var(--divider);display:flex;align-items:flex-start;gap:14px;flex-shrink:0}
.ln-modal-title{flex:1;font-weight:800;font-size:1rem;color:var(--on-glass);line-height:1.4}
.ln-modal-close{width:32px;height:32px;border:1px solid var(--divider);border-radius:9px;background:var(--row-bg);color:var(--on-glass-muted);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .14s}
.ln-modal-close:hover{background:rgba(255,107,55,.2);border-color:rgba(255,107,55,.4);color:#ff6b35}
.ln-modal-body{flex:1;overflow-y:auto;padding:20px 24px;scrollbar-width:thin;scrollbar-color:rgba(155,93,229,.3) transparent;font-size:.82rem;color:var(--on-glass);line-height:1.8}
.ln-modal-body h3{font-family:'Fredoka One',cursive;font-size:1rem;color:#c084fc;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--divider)}
.ln-modal-body h3:first-child{margin-top:0}
.ln-modal-body h4{font-size:.82rem;font-weight:800;color:#f472b6;margin:10px 0 4px}
.ln-modal-body li{padding-left:14px;position:relative;margin-bottom:4px;list-style:none;color:var(--on-glass)}
.ln-modal-body li::before{content:'•';position:absolute;left:0;color:#c084fc}
.ln-modal-body strong{color:var(--text);font-weight:800}
.ln-modal-body code{background:rgba(192,132,252,.12);border-radius:5px;padding:1px 6px;font-family:'Courier New',monospace;font-size:.78em;color:#c084fc}
.ln-modal-foot{padding:14px 24px;border-top:1px solid var(--divider);display:flex;align-items:center;gap:10px;flex-shrink:0}
.ln-modal-del{margin-left:auto;background:rgba(255,107,55,.12);border:1px solid rgba(255,107,55,.25);border-radius:9px;padding:6px 14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.73rem;color:#ff6b35;cursor:pointer;transition:all .14s}
.ln-modal-del:hover{background:rgba(255,107,55,.25)}
/* EXTENSION DOWNLOAD BANNER */
.ext-banner {
width: 100%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(192,132,252,.2);
border-radius: 20px;
padding: 20px 24px;
margin-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
backdrop-filter: blur(20px);
flex-wrap: wrap;
}
.ext-banner-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; }
.ext-banner-icon {
width: 48px; height: 48px; border-radius: 14px;
background: linear-gradient(135deg, rgba(192,132,252,.3), rgba(244,114,182,.2));
border: 1px solid rgba(192,132,252,.3);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; flex-shrink: 0;
}
.ext-banner-text h3 {
font-weight: 800; font-size: .95rem; color: rgba(255,255,255,.9);
margin-bottom: 3px;
}
.ext-banner-text p { font-size: .75rem; color: var(--on-glass-muted); font-weight: 600; line-height: 1.5; }
.ext-download-btn {
display: flex; align-items: center; gap: 8px;
padding: 11px 22px;
background: linear-gradient(135deg, #c084fc, #f472b6);
border: none; border-radius: 30px;
font-family: 'Nunito', sans-serif; font-weight: 800;
font-size: .82rem; color: #fff; cursor: pointer;
white-space: nowrap; flex-shrink: 0;
box-shadow: 0 4px 20px rgba(192,132,252,.4);
transition: all .2s cubic-bezier(.34,1.2,.64,1);
text-decoration: none;
}
.ext-download-btn:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 28px rgba(192,132,252,.55);
}
.ext-steps {
width: 100%;
margin-top: 14px;
display: flex; gap: 10px; flex-wrap: wrap;
}
.ext-step {
display: flex; align-items: flex-start; gap: 8px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
border-radius: 12px; padding: 10px 14px; flex: 1; min-width: 140px;
}
.ext-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, rgba(192,132,252,.3), rgba(244,114,182,.2));
border: 1px solid rgba(192,132,252,.3);
display: flex; align-items: center; justify-content: center;
font-size: .68rem; font-weight: 800; color: #c084fc; flex-shrink: 0;
}
.ext-step-text { font-size: .72rem; color: rgba(255,255,255,.5); font-weight: 600; line-height: 1.5; }
.ext-step-text b { color: rgba(255,255,255,.8); display: block; margin-bottom: 1px; }
to { opacity:1; transform:translateY(0); }
}
@keyframes panelSlideIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.panel-enter {
animation: panelSlideIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* ── PORTAL SECTIONS ──────────────────────────────────────────────── */
.portal-section { width:100%; animation: fadeUp .25s ease both; }
/* Profile */
.profile-card { display:flex; gap:32px; width:100%; flex-wrap:wrap; }
.profile-avatar { display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
.profile-avatar-ring { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,#c084fc,#f472b6); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(192,132,252,.3),0 0 32px rgba(192,132,252,.25); }
.profile-initials { font-family:'Fredoka One',cursive; font-size:2.2rem; color:#fff; }
.profile-avatar-edit { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:5px 14px; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.6); cursor:pointer; transition:all .15s; }
.profile-avatar-edit:hover { background:rgba(255,255,255,.12); color:#fff; }
.profile-info { flex:1; min-width:240px; display:flex; flex-direction:column; gap:14px; }
.profile-field { display:flex; flex-direction:column; gap:5px; }
.profile-field label { font-size:.72rem; font-weight:800; color:rgba(255,255,255,.4); letter-spacing:.04em; text-transform:uppercase; }
.profile-field input { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 14px; font-family:'Nunito',sans-serif; font-size:.85rem; font-weight:700; color:rgba(255,255,255,.9); outline:none; transition:border-color .15s; }
.profile-field input:focus { border-color:rgba(192,132,252,.5); background:rgba(192,132,252,.08); }
.profile-save-btn { margin-top:6px; padding:11px 24px; background:linear-gradient(135deg,#c084fc,#f472b6); border:none; border-radius:30px; font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem; color:#fff; cursor:pointer; align-self:flex-start; box-shadow:0 4px 20px rgba(192,132,252,.35); transition:all .2s; }
.profile-save-btn:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(192,132,252,.5); }
/* Settings */
.settings-card { width:100%; max-width:580px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.settings-section-title { font-family:'Fredoka One',cursive; font-size:.95rem; color:rgba(192,132,252,.85); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.07); }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.settings-row:last-of-type { border-bottom:none; }
.settings-row-label { display:flex; align-items:center; gap:10px; font-size:.84rem; font-weight:700; color:rgba(255,255,255,.75); }
.settings-row-label span { font-size:1rem; }
.settings-toggle { position:relative; width:42px; height:24px; flex-shrink:0; }
.settings-toggle input { opacity:0; width:0; height:0; }
.settings-toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,.12); border-radius:24px; cursor:pointer; transition:background .2s; }
.settings-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.settings-toggle input:checked + .settings-toggle-slider { background:linear-gradient(135deg,#c084fc,#f472b6); }
.settings-toggle input:checked + .settings-toggle-slider::before { transform:translateX(18px); }
.settings-select { background:#1a2540; border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:6px 12px; font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:700; color:rgba(255,255,255,.8); outline:none; cursor:pointer; }
.settings-danger-btn { background:rgba(255,107,55,.12); border:1px solid rgba(255,107,55,.3); border-radius:9px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:.78rem; font-weight:800; color:rgba(255,107,55,.85); cursor:pointer; transition:all .15s; }
.settings-danger-btn:hover { background:rgba(255,107,55,.25); color:#ff6b35; }
.settings-save-btn{width:100%;padding:12px;background:linear-gradient(135deg,#c084fc,#f472b6);border:none;border-radius:12px;font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(192,132,252,.3);margin-top:4px}
.settings-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(192,132,252,.4)}
/* ── View Transitions: dark/light mode circular reveal ── */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* Settings — light mode overrides */
body:not(.night) .settings-section-title { color:#a855f7; border-bottom-color:rgba(168,85,247,.2); }
body:not(.night) .settings-row { border-bottom-color:rgba(168,85,247,.15); }
body:not(.night) .settings-row-label { color:#3b1a6b; }
body:not(.night) .settings-toggle-slider { background:rgba(168,85,247,.2); }
body:not(.night) .settings-toggle-slider::before { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
body:not(.night) .settings-select { background:rgba(168,85,247,.07); border-color:rgba(168,85,247,.25); color:#3b1a6b; }
body:not(.night) .settings-danger-btn { background:rgba(255,107,55,.08); border-color:rgba(255,107,55,.35); color:#d9480f; }
body:not(.night) .settings-danger-btn:hover { background:rgba(255,107,55,.16); color:#c0390a; }
/* Subscription */
.sub-current { background:rgba(192,132,252,.1); border:1px solid rgba(192,132,252,.25); border-radius:16px; padding:18px 22px; margin-bottom:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sub-badge { background:linear-gradient(135deg,rgba(192,132,252,.3),rgba(244,114,182,.2)); border:1px solid rgba(192,132,252,.35); border-radius:20px; padding:5px 16px; font-weight:800; font-size:.82rem; color:#c084fc; flex-shrink:0; }
.sub-desc { font-size:.82rem; color:rgba(255,255,255,.55); font-weight:600; flex:1; }
.sub-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; }
@media(max-width:500px){.sub-grid{grid-template-columns:1fr;}}
.sub-plan { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:24px 20px; display:flex; flex-direction:column; gap:12px; position:relative; }
.sub-plan-pro { background:rgba(192,132,252,.08); border-color:rgba(192,132,252,.35); box-shadow:0 0 40px rgba(192,132,252,.1); }
.sub-plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#c084fc,#f472b6); border-radius:20px; padding:3px 14px; font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap; }
.sub-plan-name { font-family:'Fredoka One',cursive; font-size:1.1rem; color:rgba(255,255,255,.9); }
.sub-plan-price { font-family:'Fredoka One',cursive; font-size:2rem; color:#fff; }
.sub-plan-price span { font-size:.9rem; color:rgba(255,255,255,.4); font-family:'Nunito',sans-serif; }
.sub-features { list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; }
.sub-feat { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.75); }
.sub-feat.dim { color:rgba(255,255,255,.25); }
.sub-btn { padding:11px 0; border-radius:30px; font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem; cursor:pointer; border:none; transition:all .2s; width:100%; }
.sub-btn-current { background:rgba(255,255,255,.07); color:rgba(255,255,255,.4); }
.sub-btn-upgrade { background:linear-gradient(135deg,#c084fc,#f472b6); color:#fff; box-shadow:0 4px 20px rgba(192,132,252,.4); }
.sub-btn-upgrade:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(192,132,252,.55); }
/* Hide native browser password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-textfield-decoration-container { display: none; }
input::-webkit-credentials-auto-fill-button { visibility: hidden; }
/* ═══════════════════════════════════════════════════════════════
NEW PORTAL SHELL — floating sidebar + main layout
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
PORTAL — matches preview_option2_midnight.html exactly
═══════════════════════════════════════════════════════ */
/* Color variables scoped to portal — dark (night) mode */
body.night #portal{
--dp-bg:linear-gradient(135deg,#0F172A 0%,#1E293B 50%,#0F172A 100%);
--glass-bg:rgba(30,41,59,.6);
--glass-border:rgba(255,255,255,.08);
--glass-border-top:rgba(255,255,255,.12);
--on-glass:#F1F5F9;
--on-glass-muted:#94A3B8;
--on-glass-faint:rgba(148,163,184,.4);
--card-inner:rgba(255,255,255,.04);
--card-inner-border:rgba(255,255,255,.08);
--row-bg:rgba(255,255,255,.04);
background:var(--dp-bg);
}
/* Color variables scoped to portal — light mode */
body:not(.night) #portal{
--dp-bg:linear-gradient(135deg,#EFF6FF 0%,#F8FAFC 50%,#F5F3FF 100%);
--glass-bg:rgba(255,255,255,.7);
--glass-border:rgba(0,0,0,.08);
--glass-border-top:rgba(255,255,255,.9);
--on-glass:#0F172A;
--on-glass-muted:#64748B;
--on-glass-faint:rgba(100,116,139,.4);
--card-inner:rgba(0,0,0,.03);
--card-inner-border:rgba(0,0,0,.07);
--row-bg:rgba(0,0,0,.03);
background:var(--dp-bg);
}
/* ── Shell ── */
#portal{overflow:hidden;min-height:100vh;min-height:100dvh}
#portal .shell{position:relative;z-index:1;height:100vh;height:100dvh;display:flex;align-items:stretch}
/* ── Sidebar ── */
#portal .sidebar{
position:relative;transform:none;
flex-shrink:0;width:var(--sb-collapsed);
margin:14px 0 14px 14px;
display:flex;flex-direction:column;
background:var(--glass-bg);
backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
border:1px solid var(--glass-border);
border-radius:20px;
box-shadow:0 8px 40px rgba(0,0,0,.4);
overflow-x:hidden;overflow-y:auto;
transition:width .3s cubic-bezier(.4,0,.2,1);
z-index:10;
}
#portal .sidebar:hover{width:var(--sb-w)}
/* User block */
.sb-user{
margin:14px 5px 12px;padding:6px;
background:var(--card-inner);border:1px solid var(--card-inner-border);
border-radius:16px;display:flex;align-items:center;gap:0;
cursor:pointer;transition:all .2s;
justify-content:center;
}
#portal .sidebar:hover .sb-user{justify-content:flex-start;margin:14px 12px 16px;padding:12px 14px}
.sb-user:hover{background:var(--row-bg);transform:translateX(2px)}
.sb-avatar{
width:38px;height:38px;border-radius:50%;
background:#252535;border:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:.9rem;color:var(--on-glass);flex-shrink:0;
}
.sb-user-info{display:flex;flex-direction:column;min-width:0}
.sb-user-name{font-weight:800;font-size:.82rem;color:var(--on-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-uni{font-size:.7rem;color:var(--on-glass-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nav */
.sb-nav{flex:1;padding:8px 4px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:none}
#portal .sidebar:hover .sb-nav{padding:8px 12px}
.sb-nav::-webkit-scrollbar{display:none}
.sb-section-label{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-glass-faint);
max-height:0;overflow:hidden;padding:0;opacity:0;
transition:max-height .3s,padding .3s,opacity .2s}
#portal .sidebar:hover .sb-section-label{max-height:30px;padding:12px 8px 4px;opacity:1}
.sb-divider{height:1px;background:var(--glass-border);margin:6px 4px;flex-shrink:0}
#portal .sidebar:hover .sb-divider{margin:6px 8px}
/* Nav items — override old .psb/.sidebar styles inside portal */
#portal .sidebar .sb-item{
display:flex;align-items:center;gap:0;padding:9px 0;
border-radius:12px;cursor:pointer;transition:all .18s;
color:var(--on-glass-muted);font-weight:700;font-size:.82rem;position:relative;
justify-content:center;background:none;border:none;width:100%;
overflow:visible;animation:none;
}
/* Suppress old psb shimmer inside sidebar */
#portal .sidebar .sb-item::after{display:none!important}
#portal .sidebar:hover .sb-item{justify-content:flex-start;padding:10px 12px}
#portal .sidebar .sb-item:hover{background:var(--row-bg);color:var(--on-glass);transform:translateX(3px)}
#portal .sidebar .sb-item.on,#portal .sidebar .sb-item.active{
background:rgba(37,99,235,.12);color:var(--on-glass);
animation:none;box-shadow:none;border-color:transparent;
}
body:not(.night) #portal .sidebar .sb-item.on,
body:not(.night) #portal .sidebar .sb-item.active{background:rgba(37,99,235,.08)}
#portal .sidebar .sb-item.on::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:60%;border-radius:3px;
background:linear-gradient(#2563EB,#7C3AED);
}
.sb-icon-img{width:22px;height:22px;object-fit:contain;display:block;pointer-events:none;}
.sb-sprite{
display:block;width:42px;height:42px;flex-shrink:0;
background-size:80%;background-repeat:no-repeat;background-position:center center;
pointer-events:none;
}
.sb-item-icon{
width:44px;height:44px;border-radius:13px;overflow:hidden;
display:flex;align-items:center;justify-content:center;
font-size:1.25rem;flex-shrink:0;
/* Dark mode: deep navy tile with subtle inner highlight */
background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
transition:box-shadow .18s,transform .18s;
}
#portal .sidebar .sb-item:hover .sb-item-icon{
transform:scale(1.08);
box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);
}
#portal .sidebar .sb-item.on .sb-item-icon,
#portal .sidebar .sb-item.active .sb-item-icon{
background:linear-gradient(145deg,rgba(124,58,237,.35),rgba(124,58,237,.18));
border-color:rgba(124,58,237,.4);
box-shadow:0 2px 12px rgba(124,58,237,.3),inset 0 1px 0 rgba(255,255,255,.12);
}
/* Light mode: white tile with soft shadow */
body:not(.night) .sb-item-icon{
background:#fff;
border:1px solid rgba(0,0,0,.07);
box-shadow:0 2px 8px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.06);
}
body:not(.night) #portal .sidebar .sb-item:hover .sb-item-icon{
box-shadow:0 4px 14px rgba(0,0,0,.13),0 1px 3px rgba(0,0,0,.08);
}
body:not(.night) #portal .sidebar .sb-item.on .sb-item-icon,
body:not(.night) #portal .sidebar .sb-item.active .sb-item-icon{
background:rgba(124,58,237,.08);
border-color:rgba(124,58,237,.2);
box-shadow:0 2px 10px rgba(124,58,237,.15);
}
/* Badge */
.sb-item-badge{
margin-left:0;background:#2563EB;color:#fff;
font-size:.6rem;font-weight:900;padding:0;border-radius:20px;flex-shrink:1;min-width:0;
opacity:0;max-width:0;overflow:hidden;transition:opacity .15s,max-width .3s cubic-bezier(.4,0,.2,1),padding .3s;
}
#portal .sidebar:hover .sb-item-badge{opacity:1;max-width:40px;margin-left:auto;padding:2px 7px}
/* Text collapse — zero width when hidden so icons stay centered */
#portal .sidebar .sb-item > span:not(.sb-item-badge),
#portal .sidebar .sb-user-info{
opacity:0;max-width:0;min-width:0;overflow:hidden;flex-shrink:1;white-space:nowrap;
transition:opacity .15s,max-width .3s cubic-bezier(.4,0,.2,1);
pointer-events:none;
}
#portal .sidebar:hover .sb-item > span:not(.sb-item-badge),
#portal .sidebar:hover .sb-user-info{
opacity:1;max-width:200px;pointer-events:auto;
}
/* Restore gaps on expand */
#portal .sidebar:hover .sb-item{gap:12px}
#portal .sidebar:hover .sb-user{gap:12px}
/* Bottom / night btn */
.sb-bottom{padding:12px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:4px}
.sb-night-btn{
display:flex;align-items:center;justify-content:center;
padding:6px 8px;cursor:pointer;background:none!important;border:none;width:100%;
}
/* pill track — compact when sidebar collapsed, full when expanded */
.sb-night-track{
position:relative;height:44px;width:44px;border-radius:999px;flex-shrink:0;
background:linear-gradient(135deg,#f97316,#fbbf24);
box-shadow:0 2px 14px rgba(249,115,22,.4);
transition:width .3s cubic-bezier(.4,0,.2,1),background .3s,box-shadow .3s;
overflow:hidden;
}
body.night .sb-night-track{
background:linear-gradient(135deg,#1e1b4b,#3730a3);
box-shadow:0 2px 14px rgba(55,48,163,.5);
}
#portal .sidebar:hover .sb-night-track{ width:128px }
/* sliding thumb */
.sb-night-thumb{
position:absolute;top:4px;left:4px;
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.3);
display:flex;align-items:center;justify-content:center;font-size:1.3rem;
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 1px 6px rgba(0,0,0,.2);
}
/* night: thumb slides right */
body.night #portal .sidebar:hover .sb-night-thumb{ transform:translateX(80px) }
/* label */
.sb-night-track-label{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;
color:rgba(255,255,255,.95);white-space:nowrap;
opacity:0;transition:opacity .15s;pointer-events:none;
}
body.night #portal .sidebar:hover .sb-night-track-label{ opacity:1 }
/* ── Main ── */
#portal .main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#portal .main .topbar{
display:flex;align-items:center;gap:12px;padding:16px 28px;
background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--glass-border);flex-shrink:0;
}
.tb-title{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--on-glass)}
.tb-crumb{
font-size:.75rem;font-weight:700;color:var(--on-glass-muted);
padding:4px 10px;border-radius:8px;
background:var(--row-bg);border:1px solid var(--glass-border);
}
.tb-spacer{flex:1}
.tb-action{
display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:12px;
background:linear-gradient(135deg,#2563EB,#7C3AED);
color:#fff;font-weight:900;font-size:.78rem;
cursor:pointer;border:none;font-family:'Nunito',sans-serif;
box-shadow:0 4px 20px rgba(37,99,235,.35);transition:all .2s;
}
.tb-action:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(37,99,235,.5)}
#portal .main .main-scroll{
flex:1;overflow-y:auto;overflow-x:hidden;padding:28px;
scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent;
}
/* When the editor is active the main-scroll must not add padding or scroll */
#portal .main .main-scroll.editor-active{
overflow:hidden;padding:0;
}
#portal .main .main-scroll::-webkit-scrollbar{width:5px}
#portal .main .main-scroll::-webkit-scrollbar-track{background:transparent}
#portal .main .main-scroll::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}
/* Portal sections */
.portal-section{display:block}
/* ── Dashboard greeting ── */
.dash-greeting{margin-bottom:28px}
.dash-greeting h1{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--on-glass);margin-bottom:4px}
.dash-greeting p{font-size:.85rem;font-weight:700;color:var(--on-glass-muted)}
/* ── Widget Dashboard ── */
.dash-canvas{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:14px;min-height:200px;padding-top:4px}
.dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px;gap:12px;text-align:center;pointer-events:none}
.dash-empty-glyph{font-size:3rem;opacity:.15;color:var(--on-glass);font-family:'Fredoka One',cursive}
.dash-empty-title{font-family:'Fredoka One',cursive;font-size:1.35rem;color:var(--on-glass);opacity:.35}
.dash-empty-sub{font-size:.82rem;color:var(--on-glass-muted);opacity:.6}
.dash-empty kbd{background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:6px;padding:1px 8px;font-family:inherit;font-weight:800}
/* Widget card (shared) */
.widget-card{
background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-top);
border-radius:20px;padding:22px;margin-bottom:16px;
}
.widget-title{font-weight:900;font-size:.85rem;color:var(--on-glass);display:flex;align-items:center;gap:8px;margin-bottom:14px}
/* ── Profile ── */
.profile-hero{
background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-top);
border-radius:24px;padding:32px;display:flex;align-items:center;gap:28px;margin-bottom:20px;
}
.ph-avatar{
width:80px;height:80px;border-radius:50%;flex-shrink:0;
background:#252535;
display:flex;align-items:center;justify-content:center;
font-size:1.8rem;font-weight:900;color:var(--on-glass);
border:2px solid rgba(255,255,255,.1);
box-shadow:0 4px 20px rgba(0,0,0,.4);
}
body:not(.night) .ph-avatar{background:#E2E8F0;border-color:rgba(0,0,0,.1)}
.ph-info h2{font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--on-glass);margin-bottom:4px}
.ph-info p{font-size:.78rem;font-weight:700;color:var(--on-glass-muted)}
.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-group{display:flex;flex-direction:column;gap:6px}
.pf-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--on-glass-faint)}
.pf-input{
background:var(--row-bg);border:1px solid var(--glass-border);border-radius:12px;
padding:10px 14px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.83rem;
color:var(--on-glass);outline:none;transition:border-color .15s,box-shadow .15s;
}
.pf-input:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.pf-save,.profile-save-btn{
grid-column:span 2;
background:linear-gradient(135deg,#2563EB,#7C3AED);
color:#fff;border:none;border-radius:14px;
padding:12px 24px;font-family:'Nunito',sans-serif;
font-weight:900;font-size:.85rem;cursor:pointer;
box-shadow:0 4px 18px rgba(37,99,235,.35);transition:all .2s;text-align:center;width:100%;
}
.pf-save:hover,.profile-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(37,99,235,.5)}
/* ── Settings ── */
.settings-block{
background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-top);
border-radius:20px;padding:24px;margin-bottom:16px;
}
.settings-block-title{font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-glass-muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.settings-row-new{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--glass-border)}
.settings-row-new:last-child{border-bottom:none}
.settings-row-lbl{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.82rem;color:var(--on-glass)}
.settings-row-ico{width:28px;height:28px;border-radius:8px;background:var(--card-inner);border:1px solid var(--card-inner-border);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{width:42px;height:24px;background:rgba(255,255,255,.1);border-radius:12px;transition:background .2s;position:relative}
body:not(.night) .toggle-track{background:rgba(0,0,0,.1)}
.toggle input:checked+.toggle-track{background:linear-gradient(90deg,#2563EB,#7C3AED)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .2s}
.toggle input:checked+.toggle-track::after{left:21px}
.settings-select-new{background:var(--row-bg);border:1px solid var(--glass-border);border-radius:10px;padding:6px 10px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.8rem;color:var(--on-glass);outline:none;cursor:pointer}
.settings-danger-btn{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:rgba(239,68,68,.8);border-radius:10px;padding:7px 14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;cursor:pointer;transition:all .15s}
.settings-danger-btn:hover{background:rgba(239,68,68,.2)}
/* ── Subscription ── */
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sub-card{
background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-top);
border-radius:22px;padding:28px 24px;
display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
}
.sub-card.featured{border:1px solid rgba(37,99,235,.35);background:rgba(37,99,235,.07)}
.sub-badge{
position:absolute;top:18px;right:18px;
background:#F59E0B;color:#0F172A;
font-size:.62rem;font-weight:900;padding:4px 10px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;
}
body:not(.night) .sub-badge{background:#D97706;color:#fff}
.sub-name{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--on-glass)}
.sub-price{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--on-glass);line-height:1}
.sub-price span{font-size:.8rem;font-family:'Nunito',sans-serif;font-weight:700;color:var(--on-glass-muted)}
.sub-features{display:flex;flex-direction:column;gap:8px;flex:1}
.sub-feat{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--on-glass-muted)}
.sub-feat::before{content:'✓';color:#22C55E;font-weight:900;flex-shrink:0}
body:not(.night) .sub-feat::before{color:#16A34A}
.sub-feat.off::before{content:'✕';color:var(--on-glass-faint)}.sub-feat.off{opacity:.5}
.sub-btn,.sub-btn-current,.sub-btn-upgrade{
background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;
border:none;border-radius:14px;padding:12px;font-family:'Nunito',sans-serif;
font-weight:900;font-size:.83rem;cursor:pointer;
box-shadow:0 4px 18px rgba(37,99,235,.35);transition:all .2s;width:100%;
}
.sub-btn:hover,.sub-btn-current:hover,.sub-btn-upgrade:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(37,99,235,.5)}
.sub-btn-current{background:var(--row-bg);color:var(--on-glass);border:1px solid var(--glass-border);box-shadow:none}
.sub-btn-current:hover{background:var(--card-inner);box-shadow:none;transform:none}
.sub-pay-methods{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.72rem;font-weight:700;color:var(--on-glass-muted)}
.sub-pay-icons{display:flex;gap:6px;flex-wrap:wrap}
.sub-pay-icon{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:3px 9px;font-size:.72rem;font-weight:800;color:var(--on-glass)}
.sub-grid-single{grid-template-columns:1fr;max-width:500px;margin:0 auto;width:100%}
#paywallModal{display:none}
.sub-trial-badge{display:inline-block;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-family:'Nunito',sans-serif;font-weight:900;font-size:.78rem;padding:4px 14px;border-radius:20px;margin-bottom:4px}
/* ── Widget panel ── */
.add-widget-fab{position:fixed;bottom:28px;right:28px;z-index:400;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#7C3AED);border:none;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 4px 24px rgba(37,99,235,.5);display:none;align-items:center;justify-content:center;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,opacity .2s}
.add-widget-fab.visible{display:flex}
.add-widget-fab:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 6px 32px rgba(37,99,235,.7)}
.add-widget-fab.open{transform:rotate(45deg)}
.wp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:490;opacity:0;pointer-events:none;transition:opacity .25s}
.wp-overlay.show{opacity:1;pointer-events:auto}
.widget-panel{position:fixed;top:14px;right:-354px;bottom:14px;z-index:500;width:320px;background:var(--glass-bg);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid var(--glass-border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 40px rgba(0,0,0,.5)}
.widget-panel.open{right:14px}
.wp-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--glass-border);flex-shrink:0}
.wp-title{font-family:'Fredoka One',cursive;font-size:1.05rem;color:var(--on-glass)}
.wp-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--card-inner-border);background:var(--card-inner);color:var(--on-glass-muted);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.wp-close:hover{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.3)}
.wp-body{flex:1;overflow-y:auto;padding:12px;scrollbar-width:none}
.wp-body::-webkit-scrollbar{display:none}
.wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wp-card{background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:14px;padding:14px 12px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:5px}
.wp-card:hover:not(.added){background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.3);transform:translateY(-2px);box-shadow:0 4px 16px rgba(37,99,235,.2)}
.wp-card.added{opacity:.4;cursor:default}
.wp-icon{font-size:1.4rem}.wp-name{font-weight:800;font-size:.76rem;color:var(--on-glass)}.wp-size{font-size:.62rem;color:var(--on-glass-muted)}
/* Dash widgets */
.dash-widget{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-top);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;transition:box-shadow .2s,opacity .2s,transform .28s cubic-bezier(.4,0,.2,1);user-select:none}
.dash-widget.is-dragging{opacity:.35;pointer-events:none}
.dw-header{display:flex;align-items:center;gap:8px;padding:11px 12px 6px;cursor:grab;flex-shrink:0}
.dw-header:active{cursor:grabbing}
.dw-icon{font-size:.9rem}.dw-title{font-family:'Fredoka One',cursive;font-size:.86rem;color:var(--on-glass);flex:1}
.dw-remove{width:20px;height:20px;border-radius:50%;border:none;background:none;color:var(--on-glass-faint);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s}
.dash-widget:hover .dw-remove{opacity:1}
.dw-remove:hover{background:rgba(239,68,68,.2);color:#f87171}
.dw-body{flex:1;padding:0 12px 10px;overflow:hidden;min-height:0;font-size:.78rem}
.dw-resize{position:absolute;bottom:4px;right:4px;width:18px;height:18px;cursor:se-resize;opacity:0;transition:opacity .15s}
.dash-widget:hover .dw-resize{opacity:.7}
.dw-resize::after{content:'';position:absolute;bottom:2px;right:2px;width:9px;height:9px;border-right:2px solid var(--on-glass-muted);border-bottom:2px solid var(--on-glass-muted)}
#dragGhost{position:fixed;z-index:1000;pointer-events:none;display:none;border-radius:18px;border:2px solid rgba(37,99,235,.55);background:rgba(37,99,235,.12);backdrop-filter:blur(8px)}
/* Widget content */
.tw-date{font-family:'Fredoka One',cursive;font-size:.95rem;color:var(--on-glass);margin-bottom:6px}
/* ── Google Calendar Widget ── */
.gcw-root{display:flex;flex-direction:column;height:100%;gap:0;overflow:hidden}
.gcw-connect{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;height:100%;text-align:center}
.gcw-connect-btn{padding:9px 22px;border-radius:20px;border:none;background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;font-weight:800;font-size:.82rem;cursor:pointer;transition:opacity .15s}
.gcw-connect-btn:hover{opacity:.88}
.gcw-connect-sub{font-size:.72rem;color:var(--on-glass-muted);max-width:180px}
/* Nav bar */
.gcw-nav{display:flex;align-items:center;gap:6px;padding:2px 0 8px;flex-shrink:0;position:relative}
.gcw-nav-btn{background:rgba(255,255,255,.06);border:none;color:var(--on-glass);border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .13s;flex-shrink:0}
.gcw-nav-btn:hover{background:rgba(255,255,255,.14)}
.gcw-month-label{flex:1;font-size:.82rem;font-weight:800;color:var(--on-glass);letter-spacing:.01em;cursor:pointer;border-radius:6px;padding:2px 5px;margin-left:-5px;transition:background .13s;user-select:none}
.gcw-month-label:hover{background:rgba(255,255,255,.08)}
/* Month/year picker popup */
@keyframes gcwPickerIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.gcw-picker{position:absolute;top:100%;left:0;z-index:500;background:var(--dp-solid,#1e1e2e);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.55);width:220px;overflow:hidden;animation:gcwPickerIn .18s cubic-bezier(.22,1,.36,1) both}
.gcw-picker-year-btn{width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.08);color:var(--on-glass);font-size:.82rem;font-weight:800;padding:10px 14px;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;transition:background .13s}
.gcw-picker-year-btn:hover{background:rgba(255,255,255,.07)}
.gcw-picker-year-arrow{font-size:.6rem;opacity:.5}
.gcw-picker-months{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:10px}
.gcw-picker-month{background:none;border:none;color:var(--on-glass);font-size:.74rem;font-weight:700;padding:8px 4px;border-radius:8px;cursor:pointer;transition:background .13s;text-align:center}
.gcw-picker-month:hover{background:rgba(255,255,255,.09)}
.gcw-picker-month.gcw-picker-active{background:#4285f4;color:#fff}
.gcw-picker-years{max-height:200px;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.gcw-picker-years::-webkit-scrollbar{width:4px}
.gcw-picker-years::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.gcw-picker-yr{background:none;border:none;color:var(--on-glass);font-size:.8rem;font-weight:700;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .13s;text-align:center}
.gcw-picker-yr:hover{background:rgba(255,255,255,.09)}
.gcw-picker-yr.gcw-picker-active{background:#4285f4;color:#fff}
body:not(.night) .gcw-picker{background:#fff;border-color:rgba(0,0,0,.12)}
body:not(.night) .gcw-picker-year-btn{color:#1a1a2e;border-color:rgba(0,0,0,.08)}
body:not(.night) .gcw-picker-year-btn:hover{background:rgba(0,0,0,.05)}
body:not(.night) .gcw-picker-month,.gcw-picker-yr{color:#1a1a2e}
body:not(.night) .gcw-picker-month:hover,.gcw-picker-yr:hover{background:rgba(0,0,0,.06)}
body:not(.night) .gcw-month-label:hover{background:rgba(0,0,0,.06)}
.gcw-add-btn{display:flex;align-items:center;gap:4px;padding:5px 13px;border-radius:20px;border:none;background:#4285f4;color:#fff;font-size:.72rem;font-weight:800;cursor:pointer;transition:background .13s;white-space:nowrap;flex-shrink:0}
.gcw-add-btn:hover{background:#3367d6}
/* Calendar grid */
@keyframes gcwSlideInRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes gcwSlideInLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes gcwFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gcw-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;flex-shrink:0}
.gcw-grid.gcw-anim-right{animation:gcwSlideInRight .22s cubic-bezier(.22,1,.36,1) both}
.gcw-grid.gcw-anim-left{animation:gcwSlideInLeft .22s cubic-bezier(.22,1,.36,1) both}
.gcw-month-label.gcw-anim-right{animation:gcwSlideInRight .22s cubic-bezier(.22,1,.36,1) both}
.gcw-month-label.gcw-anim-left{animation:gcwSlideInLeft .22s cubic-bezier(.22,1,.36,1) both}
.gcw-hdr{font-size:.6rem;font-weight:700;color:var(--on-glass-muted);text-align:center;padding:0 0 4px}
.gcw-cell{height:34px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .12s;position:relative;gap:2px;flex-shrink:0}
.gcw-cell:hover{background:rgba(255,255,255,.07)}
.gcw-cell.gcw-has-events{background:rgba(66,133,244,.1)}
.gcw-cell.gcw-has-events:hover{background:rgba(66,133,244,.18)}
.gcw-cell.gcw-selected{background:rgba(66,133,244,.15);outline:1.5px solid rgba(66,133,244,.4)}
.gcw-blank{pointer-events:none;background:none!important}
.gcw-today .gcw-day-num{background:#4285f4;color:#fff!important;border-radius:50%;width:20px;height:20px;font-size:.68rem}
.gcw-day-num{font-size:.68rem;font-weight:700;color:var(--on-glass);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.gcw-dot{width:3px;height:3px;border-radius:50%;background:#4285f4;flex-shrink:0}
/* Event list */
.gcw-event-list{flex:1;overflow-y:auto;min-height:0;margin-top:6px;padding-top:2px}
.gcw-list-empty{font-size:.72rem;color:var(--on-glass-muted);padding:2px 0 4px}
.gcw-list-add{color:#4285f4;cursor:pointer;font-size:.7rem;font-weight:700;margin-left:auto;background:none;border:none;padding:0}
.gcw-list-add-inline{color:#4285f4;cursor:pointer;text-decoration:none;font-weight:700}
.gcw-list-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:background .12s;margin-bottom:2px;background:rgba(255,255,255,.04);animation:gcwFadeUp .18s cubic-bezier(.22,1,.36,1) both}
.gcw-list-hdr{font-size:.72rem;font-weight:800;color:var(--on-glass);padding:0 0 7px;display:flex;align-items:center;animation:gcwFadeUp .14s cubic-bezier(.22,1,.36,1) both}
.gcw-list-row:hover{background:rgba(255,255,255,.08)}
.gcw-list-bar{width:3px;height:26px;border-radius:3px;background:#4285f4;flex-shrink:0}
.gcw-list-info{flex:1;min-width:0}
.gcw-list-title{font-size:.76rem;font-weight:700;color:var(--on-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcw-list-time{font-size:.66rem;color:var(--on-glass-muted);margin-top:1px}
.gcw-list-edit{background:none;border:none;color:var(--on-glass-muted);cursor:pointer;font-size:.78rem;padding:4px 6px;border-radius:6px;transition:background .12s;flex-shrink:0;opacity:0}
.gcw-list-row:hover .gcw-list-edit{opacity:1}
.gcw-list-edit:hover{background:rgba(255,255,255,.1);color:var(--on-glass)}
/* Modal */
.gcw-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:center;justify-content:center}
.gcw-modal{background:var(--dp-solid,#1e1e2e);border:1px solid rgba(255,255,255,.1);border-radius:16px;width:360px;max-width:calc(100vw - 32px);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.gcw-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.88rem;font-weight:700;color:var(--on-glass,#e2e8f0)}
.gcw-modal-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:15px;padding:2px 5px;border-radius:4px}
.gcw-modal-close:hover{color:#fff}
.gcw-modal-body{display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.gcw-label{font-size:.72rem;font-weight:700;color:var(--on-glass-muted,rgba(255,255,255,.45));margin-bottom:-4px}
.gcw-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--on-glass,#e2e8f0);font-size:.82rem;padding:8px 10px;box-sizing:border-box;font-family:inherit}
.gcw-input:focus{outline:none;border-color:rgba(66,133,244,.6)}
.gcw-textarea{resize:vertical;min-height:62px}
.gcw-modal-ftr{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.07)}
.gcw-del-btn{padding:7px 14px;border-radius:8px;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#ef4444;font-size:.8rem;cursor:pointer}
.gcw-del-btn:hover{background:rgba(239,68,68,.22)}
.gcw-cancel-btn{margin-left:auto;padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.55);font-size:.8rem;cursor:pointer}
.gcw-save-btn{padding:7px 18px;border-radius:8px;border:none;background:#4285f4;color:#fff;font-size:.8rem;font-weight:700;cursor:pointer}
.gcw-save-btn:hover:not([disabled]){background:#3367d6}
.gcw-save-btn[disabled]{opacity:.45;cursor:default}
body:not(.night) .gcw-connect-sub{color:rgba(0,0,0,.45)}
body:not(.night) .gcw-month-label{color:#1a1a2e}
body:not(.night) .gcw-hdr{color:rgba(0,0,0,.45)}
body:not(.night) .gcw-day-num{color:#1a1a2e}
body:not(.night) .gcw-modal{background:#fff;border-color:rgba(0,0,0,.1)}
body:not(.night) .gcw-modal-hdr{color:#1a1a2e;border-color:rgba(0,0,0,.08)}
body:not(.night) .gcw-input{background:#f4f5f9;border-color:rgba(0,0,0,.12);color:#222}
body:not(.night) .gcw-label{color:rgba(0,0,0,.45)}
body:not(.night) .gcw-list-title{color:#1a1a2e}
body:not(.night) .gcw-list-time{color:rgba(0,0,0,.45)}
body:not(.night) .gcw-list-row{background:rgba(0,0,0,.03)}
body:not(.night) .gcw-list-row:hover{background:rgba(66,133,244,.07)}
body:not(.night) .gcw-cell.gcw-has-events{background:rgba(66,133,244,.08)}
body:not(.night) .gcw-cell:hover{background:rgba(0,0,0,.05)}
body:not(.night) .gcw-nav-btn{background:rgba(0,0,0,.06)}
body:not(.night) .gcw-nav-btn:hover{background:rgba(0,0,0,.12)}
/* ── Google Calendar Reminder Bar ── */
@keyframes gcwReminderIn{from{opacity:0;transform:translateX(calc(100% + 24px))}to{opacity:1;transform:translateX(0)}}
@keyframes gcwReminderOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(calc(100% + 24px))}}
.gcw-reminder-bar{position:fixed;bottom:28px;right:24px;z-index:9999;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#1e243a,#252d47);border:1px solid rgba(66,133,244,.35);border-radius:16px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 0 1px rgba(66,133,244,.12);min-width:280px;max-width:360px;animation:gcwReminderIn .4s cubic-bezier(.22,1,.36,1) both}
.gcw-reminder-bar.gcw-reminder-out{animation:gcwReminderOut .35s cubic-bezier(.55,0,1,.45) both}
.gcw-reminder-icon{font-size:1.4rem;flex-shrink:0}
.gcw-reminder-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gcw-reminder-title{font-size:.84rem;font-weight:800;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcw-reminder-sub{font-size:.7rem;color:rgba(255,255,255,.5)}
.gcw-reminder-close{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:.72rem;padding:4px 6px;border-radius:6px;flex-shrink:0;transition:color .13s,background .13s}
.gcw-reminder-close:hover{color:#fff;background:rgba(255,255,255,.1)}
body:not(.night) .gcw-reminder-bar{background:linear-gradient(135deg,#fff,#f0f4ff);border-color:rgba(66,133,244,.3);box-shadow:0 8px 32px rgba(0,0,0,.15)}
body:not(.night) .gcw-reminder-title{color:#1a1a2e}
body:not(.night) .gcw-reminder-sub{color:rgba(0,0,0,.45)}
body:not(.night) .gcw-reminder-close{color:rgba(0,0,0,.35)}
body:not(.night) .gcw-reminder-close:hover{color:#1a1a2e;background:rgba(0,0,0,.07)}
/* ── Today's Calendar widget ── */
.tw-event{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid var(--card-inner-border)}
.tw-event:last-child{border-bottom:none}
.tw-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tw-time{color:var(--on-glass-muted);font-size:.68rem;width:34px;flex-shrink:0;font-weight:700}
.tw-name{flex:1;font-weight:700;color:var(--on-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.73rem}
.tw-room{font-size:.62rem;color:var(--on-glass-muted);flex-shrink:0}
.tw-none{text-align:center;padding:18px 0;color:var(--on-glass-muted);font-size:.8rem}
.cw-pills{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0}
.cw-pill{padding:4px 10px;border-radius:20px;font-size:.68rem;font-weight:800;background:var(--card-inner);border:1px solid var(--card-inner-border);color:var(--on-glass-muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.cw-pill:hover{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.3);color:var(--on-glass)}
.mw-badge{display:inline-block;margin-bottom:7px;padding:2px 10px;border-radius:20px;font-size:.63rem;font-weight:900;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#F59E0B}
.mw-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--card-inner-border)}
.mw-row:last-child{border-bottom:none}
.mw-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.66rem;color:#fff;flex-shrink:0}
.mw-info{flex:1;min-width:0}
.mw-from{font-weight:800;font-size:.71rem;color:var(--on-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-subj{font-size:.64rem;color:var(--on-glass-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-t{font-size:.61rem;color:var(--on-glass-faint);flex-shrink:0}
.nw-ta{width:100%;height:100%;min-height:80px;background:none;border:none;resize:none;color:var(--on-glass);font-family:'Nunito',sans-serif;font-size:.78rem;line-height:1.65;outline:none}
.nw-ta::placeholder{color:var(--on-glass-faint)}
.sw-chips{display:flex;gap:6px;margin-bottom:8px}
.sw-chip{flex:1;background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:10px;padding:7px 4px;text-align:center}
.sw-val{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--on-glass)}
.sw-lbl{font-size:.58rem;color:var(--on-glass-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sw-bar-row{display:flex;justify-content:space-between;font-size:.64rem;color:var(--on-glass-muted);margin-bottom:4px;font-weight:700}
.sw-bar{height:5px;border-radius:3px;background:var(--card-inner);overflow:hidden}
.sw-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#2563EB,#7C3AED)}
.dlw-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--card-inner-border)}
.dlw-row:last-child{border-bottom:none}
.dlw-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dlw-name{flex:1;font-size:.72rem;font-weight:700;color:var(--on-glass);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlw-date{font-size:.62rem;color:var(--on-glass-muted);flex-shrink:0}
.ww-temp{font-family:'Fredoka One',cursive;font-size:2.1rem;color:var(--on-glass);line-height:1;margin-top:2px}
.ww-desc{font-size:.74rem;color:var(--on-glass-muted);font-weight:700;margin-top:4px}
.ww-loc{font-size:.62rem;color:var(--on-glass-faint);font-weight:700}
.aw-row{display:flex;gap:6px;margin-top:4px}
.aw-in{flex:1;background:var(--card-inner);border:1px solid var(--card-inner-border);border-radius:10px;padding:7px 10px;font-size:.74rem;color:var(--on-glass);font-family:'Nunito',sans-serif;outline:none}
.aw-in:focus{border-color:rgba(37,99,235,.4)}
.aw-btn{padding:7px 12px;border-radius:10px;border:none;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-size:.78rem;font-weight:800;cursor:pointer;transition:opacity .15s}
.aw-btn:hover{opacity:.85}
.aw-hint{font-size:.61rem;color:var(--on-glass-faint);margin-top:5px;font-weight:700}
/* ── Portal topbar: back button + sidebar toggle for files view ── */
#portal .main .topbar .ptb-back-btn{
padding:6px 14px;border-radius:10px;
background:var(--row-bg);border:1px solid var(--glass-border);
color:var(--on-glass);font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;
cursor:pointer;flex-shrink:0;transition:all .15s;white-space:nowrap;
}
#portal .main .topbar .ptb-back-btn:hover{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.3)}
#portal .main .topbar .ptb-sb-toggle{
width:34px;height:34px;border-radius:9px;
background:var(--row-bg);border:1px solid var(--glass-border);
color:var(--on-glass);cursor:pointer;font-size:1rem;
display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;
}
#portal .main .topbar .ptb-sb-toggle:hover{background:rgba(37,99,235,.12)}
/* ── #app inside portal: override fixed overlay, become flex child ── */
#portal #app{
position:relative;inset:auto;z-index:auto;
flex:1;min-height:0;
display:none;flex-direction:column;
overflow:hidden;background:transparent;
}
#portal #app .app-body{background:transparent}
/* ── Fix: portal nav sidebar styles must NOT leak into #app's sidebar ── */
#portal #app .sidebar{
position:absolute;left:0;top:0;bottom:0;
width:var(--sb-w);transform:translateX(-100%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
background:var(--card);border-right:1px solid var(--glass-border);
z-index:90;box-shadow:4px 0 20px rgba(0,0,0,.18);
}
#portal #app .sidebar.visible{transform:translateX(0)}
#portal #app .sidebar:hover{width:var(--sb-w)}
/* ── Files view: replace purple with blue ── */
#portal #app .sb-x-btn{background:#EFF6FF;color:#2563EB}
#portal #app .sb-scroll{scrollbar-color:#2563EB #EFF6FF}
#portal #app .sb-scroll::-webkit-scrollbar-thumb{background:#2563EB}
#portal #app .sem-btn:hover,#portal #app .sem-btn.open{border-color:#2563EB}
#portal #app .sem-chev{color:#2563EB}
#portal #app .sem-dd{border-color:#2563EB}
#portal #app .sem-opt:hover{background:#EFF6FF;color:#2563EB}
#portal #app .sem-opt.sel{background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:#2563EB}
#portal #app .course-row:hover{border-color:#2563EB}
#portal #app .course-row.active{border-color:#2563EB;background:#DBEAFE}
#portal #app .file-row:hover{border-color:#2563EB;background:#EFF6FF}
#portal #app .file-row.active{border-color:#2563EB;background:#DBEAFE;color:#2563EB}
#portal #app .sb-back{color:#2563EB}
#portal #app .sb-back:hover{background:#EFF6FF}
#portal #app .sb-acc-item.open{border-color:#2563EB}
#portal #app .sb-acc-hdr:hover{background:#EFF6FF}
#portal #app .sb-acc-item.open .sb-acc-hdr{background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:#2563EB}
#portal #app .sb-acc-label-btn:hover{color:#2563EB}
#portal #app .sb-acc-chev{color:#2563EB}
#portal #app .sb-acc-item.open .sb-acc-body{scrollbar-color:#2563EB rgba(37,99,235,.08)}
#portal #app .sb-acc-item.open .sb-acc-body::-webkit-scrollbar-thumb{background:#2563EB}
#portal #app .sb-acc-row:hover{background:#DBEAFE;color:#2563EB}
#portal #app .sb-acc-row-active{background:#DBEAFE !important;color:#2563EB !important}
#portal #app .tt-day-sb{color:#2563EB}
#portal #app .tt-slot-sb{background:#EFF6FF;border-left-color:#2563EB}
#portal #app .mail-sb.unread{border-left-color:#2563EB;background:#EFF6FF}
#portal #app .pdf-toolbar{border-bottom-color:#BFDBFE}
#portal #app .pdf-tb-btn{background:#EFF6FF;border-color:#BFDBFE;color:#2563EB}
#portal #app .pdf-tb-btn:hover{background:#DBEAFE}
#portal #app .loading-dots span{background:#2563EB}
#portal #app #aiTab{background:linear-gradient(135deg,#2563EB,#1D4ED8)}
#portal #app .ai-av{background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:0 4px 14px rgba(37,99,235,.4)}
#portal #app .ai-hdr h3{color:#2563EB}
#portal #app .ai-icon-btn{border-color:rgba(37,99,235,.3);background:rgba(37,99,235,.1);color:#2563EB}
#portal #app .msg-sender.bot-sender{color:#2563EB}
#portal #app .msg-sender.bot-sender .msg-sender-dot{background:#2563EB}
#portal #app .msg-action-btn:hover{background:#2563EB;border-color:#2563EB}
#portal #app .ai-bubble b,#portal #app .ai-bubble strong{color:var(--text)}
#portal #app .ai-bubble code{background:rgba(37,99,235,.1);color:#2563EB}
#portal #app .ai-bubble .md-h{color:var(--text)}
#portal #app .ai-bubble .md-bq{border-left-color:#2563EB;background:rgba(37,99,235,.06)}
#portal #app .ai-bubble .md-code-lang{color:#2563EB;background:rgba(37,99,235,.08)}
#portal #app .typing-bubble span{background:#2563EB}
#portal #app .ai-sel-banner{border-color:rgba(37,99,235,.18);border-left-color:#2563EB;background:rgba(37,99,235,.04)}
#portal #app .ai-sel-banner b{color:#2563EB}
#portal #app .ai-sel-btn{background:linear-gradient(135deg,#2563EB,#1D4ED8)}
#portal #app .co-card h2{color:#2563EB}
#portal #app .co-logo{background:linear-gradient(135deg,#2563EB,#0EA5E9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#portal #app .co-nav-btn:hover{color:#2563EB;background:rgba(37,99,235,.09);border-color:rgba(37,99,235,.2)}
#portal #app .co-nav-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.12));color:#2563EB;border-color:rgba(37,99,235,.32)}
#portal #app .co-file-cb.checked{background:rgba(37,99,235,.5);border-color:#2563EB}
#portal #app .co-multi-count b{color:#60A5FA}
#portal #app .co-multi-bar{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(15,30,60,.98));border-top-color:rgba(37,99,235,.25)}
#portal #app .msm-save-btn{background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(14,165,233,.15));border-color:rgba(37,99,235,.35);color:#2563EB}
/* Dark mode blue overrides */
body.night #portal #app .sb-x-btn{background:rgba(37,99,235,.15);color:#60A5FA}
body.night #portal #app .sem-btn:hover,body.night #portal #app .sem-btn.open{border-color:#3B82F6}
body.night #portal #app .sem-chev{color:#60A5FA}
body.night #portal #app .sem-dd{border-color:#3B82F6;background:#1A1F2E}
body.night #portal #app .sem-opt:hover{background:rgba(37,99,235,.15);color:#60A5FA}
body.night #portal #app .sem-opt.sel{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(14,165,233,.15));color:#60A5FA}
body.night #portal #app .course-row:hover{border-color:#3B82F6}
body.night #portal #app .course-row.active{border-color:#3B82F6;background:rgba(37,99,235,.2)}
body.night #portal #app .file-row:hover{border-color:#3B82F6;background:rgba(37,99,235,.1)}
body.night #portal #app .file-row.active{border-color:#3B82F6;background:rgba(37,99,235,.2);color:#60A5FA}
body.night #portal #app .sb-back{color:#60A5FA}
body.night #portal #app .sb-acc-row-active{background:rgba(37,99,235,.25) !important;color:#60A5FA !important}
body.night #portal #app .pdf-tb-btn{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.3);color:#60A5FA}
body.night #portal #app #aiTab{background:linear-gradient(135deg,#2563EB,#1E40AF)}
body.night #portal #app .ai-hdr h3{color:#60A5FA}
body.night #portal #app .ai-icon-btn{border-color:rgba(96,165,250,.3);background:rgba(37,99,235,.15);color:#60A5FA}
body.night #portal #app .msg-sender.bot-sender{color:#60A5FA}
body.night #portal #app .msg-sender.bot-sender .msg-sender-dot{background:#60A5FA}
body.night #portal #app .ai-bubble b,body.night #portal #app .ai-bubble strong{color:var(--text)}
body.night #portal #app .ai-bubble code{background:rgba(96,165,250,.12);color:#60A5FA}
body.night #portal #app .ai-bubble .md-h{color:var(--text)}
body.night #portal #app .co-card h2{color:#60A5FA}
body.night #portal #app .co-nav-btn:hover{color:#60A5FA;background:rgba(37,99,235,.15);border-color:rgba(96,165,250,.3)}
body.night #portal #app .co-nav-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(14,165,233,.18));color:#60A5FA}
/* Active tab — override dark and light purple */
#portal #app .co-nav-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.32),rgba(14,165,233,.22));color:#fff;border-color:rgba(37,99,235,.45);box-shadow:0 2px 16px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.1)}
body:not(.night) #portal #app .co-nav-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.12));color:#2563EB;border-color:rgba(37,99,235,.32);box-shadow:0 2px 18px rgba(37,99,235,.2),inset 0 1px 0 rgba(255,255,255,.95)}
body:not(.night) #portal #app .co-nav-btn:hover{color:#2563EB;background:rgba(37,99,235,.09);border-color:rgba(37,99,235,.2);box-shadow:0 4px 16px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.9)}
/* Select multiple button */
#portal #app .co-select-toggle{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.1);color:#2563EB}
#portal #app .co-select-toggle:hover{background:rgba(37,99,235,.2)}
#portal #app .co-select-toggle.active{background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.6)}
body.night #portal #app .co-select-toggle{border-color:rgba(96,165,250,.35);background:rgba(37,99,235,.12);color:#60A5FA}
/* Open button (inline styled in JS — override via class) */
#portal #app .co-open-btn{background:rgba(37,99,235,.18) !important;color:rgba(96,165,250,.9) !important;border-color:rgba(37,99,235,.3) !important}
#portal #app .co-open-btn:hover{background:rgba(37,99,235,.3) !important}
/* Multi-select summarise bar */
#portal #app .co-multi-summarise{background:linear-gradient(135deg,rgba(37,99,235,.3),rgba(14,165,233,.2));border-color:rgba(37,99,235,.4)}
#portal #app .co-multi-summarise:hover{background:linear-gradient(135deg,rgba(37,99,235,.45),rgba(14,165,233,.35));box-shadow:0 4px 16px rgba(37,99,235,.3)}
/* AI input area + send button blue overrides */
#portal #app .ai-input-area{border-top-color:rgba(37,99,235,.1);background:rgba(37,99,235,.03)}
#portal #app .ai-input-box{border-color:rgba(37,99,235,.18)}
body.night #portal #app .ai-input-box{background:rgba(15,23,42,.75);border-color:rgba(37,99,235,.22)}
#portal #app .ai-input-box:focus-within{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.1),0 4px 20px rgba(37,99,235,.12)}
body.night #portal #app .ai-textarea:focus{border-color:#3B82F6;background:#1A1F2E}
#portal #app .ai-send{background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:0 4px 14px rgba(37,99,235,.35)}
#portal #app .ai-send:hover:not(.is-stop){box-shadow:0 6px 20px rgba(37,99,235,.5)}
#portal #app .ai-chip{border-color:rgba(37,99,235,.22);color:#2563EB}
#portal #app .ai-chip:hover{background:rgba(37,99,235,.1);border-color:#2563EB}
body.night #portal #app .ai-chip{border-color:rgba(37,99,235,.3);color:#60A5FA}
body.night #portal #app .ai-chip:hover{background:rgba(37,99,235,.15);border-color:#3B82F6}
/* PDF toolbar back button */
#portal #app .tb-portal-btn{color:#2563EB}
body.night #portal #app .tb-portal-btn{color:#60A5FA}
/* AI tip chips */
#portal #app .ai-tip{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.18);color:#2563EB}
body.night #portal #app .ai-tip{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.28);color:#60A5FA}
#portal #app .ai-tip:hover{background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(37,99,235,.35)}
#portal #app .ai-tip::before{background:linear-gradient(135deg,#2563EB,#0EA5E9)}
/* File chip in AI header */
#portal #app .ai-file-chip{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.22);color:#2563EB}
body.night #portal #app .ai-file-chip{background:rgba(37,99,235,.13);border-color:rgba(37,99,235,.28);color:#60A5FA}
#portal #app .ai-file-chip-bar{border-bottom-color:rgba(37,99,235,.1)}
/* AI scroll button */
#portal #app .ai-scroll-btn{border-color:rgba(37,99,235,.25);color:#2563EB}
body.night #portal #app .ai-scroll-btn{border-color:rgba(37,99,235,.3);color:#60A5FA}
/* AI panel scrollbar */
#portal #app .ai-msgs{scrollbar-color:#2563EB rgba(37,99,235,.08)}
#portal #app .ai-msgs::-webkit-scrollbar-thumb{background:#2563EB}
/* ── Portal: Kill purple bleed-through from old global rules ── */
/* Blobs → navy/blue instead of purple */
#portal .blob-1{background:#1E3A8A}
#portal .blob-2{background:#1E40AF}
#portal .blob-3{background:#0369A1}
body:not(.night) #portal .blob{opacity:.18}
/* Auth indicator — override !important purple in light mode */
#portal #authIndicator{background:var(--card-inner) !important;border-color:var(--card-inner-border) !important}
#portal #authName{color:var(--on-glass) !important}
/* Ext banner — override purple border */
#portal .ext-banner{border-color:var(--glass-border) !important}
/* Kill any remaining psb purple hover/active leaking into sidebar */
#portal .sidebar .sb-item:hover{color:var(--on-glass) !important;background:var(--row-bg) !important}
body:not(.night) #portal .sidebar .sb-item:hover{color:var(--on-glass) !important;background:var(--row-bg) !important}
/* ── Responsive ── */
@media(max-width:768px){
.sub-grid,.profile-fields{grid-template-columns:1fr}
.pf-save,.profile-save-btn{grid-column:span 1}
.dash-canvas{grid-template-columns:repeat(2,1fr)}
}
/* ── CHATBOT PAGE ──────────────────────────────────────────────────────────── */
#psec-aipage{height:calc(100dvh - var(--topbar-h) - 40px);min-height:500px;padding:0!important}
.aip-outer{display:flex;height:100%;overflow:hidden;border-radius:16px;border:1px solid var(--divider);background:var(--card-inner)}
/* Sidebar */
.aip-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--divider);display:flex;flex-direction:column;background:var(--row-bg);transition:width .25s cubic-bezier(.4,0,.2,1),opacity .2s;overflow:hidden}
.aip-sidebar.collapsed{width:0;opacity:0;border-right:none}
.aip-sidebar-top{padding:14px 12px 8px;flex-shrink:0}
.aip-new-chat-btn{display:flex;align-items:center;gap:8px;width:100%;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.22);color:var(--on-solid);border-radius:10px;padding:9px 14px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .18s}
.aip-new-chat-btn:hover{background:rgba(124,58,237,.2)}
.aip-sidebar-section-label{font-size:.65rem;font-weight:800;color:var(--secondary);text-transform:uppercase;letter-spacing:.07em;padding:8px 16px 4px;flex-shrink:0}
.aip-history-list{flex:1;overflow-y:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--purple) transparent}
.aip-history-item{padding:9px 12px;border-radius:10px;font-size:.8rem;cursor:pointer;color:var(--on-solid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s;display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:500}
.aip-history-item:hover{background:rgba(124,58,237,.1)}
.aip-history-item.active{background:rgba(124,58,237,.18);font-weight:600}
.aip-history-item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aip-history-del{opacity:0;background:none;border:none;color:var(--secondary);cursor:pointer;font-size:.8rem;padding:2px 4px;border-radius:4px;flex-shrink:0;transition:opacity .15s}
.aip-history-item:hover .aip-history-del{opacity:1}
.aip-history-del:hover{color:#f87171}
.aip-history-empty{color:var(--secondary);font-size:.78rem;padding:12px;text-align:center;opacity:.6}
/* Toggle button */
.aip-sb-toggle{background:none;border:none;color:var(--secondary);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s}
.aip-sb-toggle:hover{background:var(--row-bg)}
.aip-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;position:relative}
/* Landing view */
.aip-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:40px 24px 32px;gap:32px;text-align:center}
.aip-landing-hero{display:flex;flex-direction:column;gap:8px}
.aip-greeting{font-size:1.35rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.aip-subtitle{font-size:2rem;font-weight:800;color:var(--on-solid);line-height:1.2}
/* Center big input box */
.aip-center-box{width:100%;max-width:700px;background:var(--row-bg);border:1px solid var(--divider);border-radius:20px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 24px rgba(0,0,0,.1);transition:box-shadow .2s}
.aip-center-box:focus-within{box-shadow:0 4px 28px rgba(124,58,237,.18);border-color:rgba(124,58,237,.35)}
.aip-center-input{width:100%;background:transparent;border:none;outline:none;resize:none;font-size:.95rem;font-family:inherit;color:var(--on-solid);line-height:1.5;min-height:52px;max-height:140px;overflow-y:auto;padding:0}
.aip-center-input::placeholder{color:var(--secondary);opacity:.7}
.aip-center-send{align-self:flex-end;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#3B82F6);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,box-shadow .18s;box-shadow:0 3px 12px rgba(124,58,237,.4)}
.aip-center-send svg{display:block}
.aip-center-send:hover{transform:scale(1.1);box-shadow:0 5px 18px rgba(124,58,237,.55)}
.aip-center-send:active{transform:scale(.95)}
.aip-center-send:disabled{opacity:.35;cursor:not-allowed;transform:none}
/* Chip row */
.aip-chips-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:700px}
.aip-chip{background:var(--row-bg);border:1px solid var(--divider);border-radius:100px;padding:8px 16px;font-size:.8rem;font-family:inherit;cursor:pointer;color:var(--on-solid);transition:background .18s,border-color .18s,transform .15s;font-weight:500;white-space:nowrap}
.aip-chip:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.4);transform:translateY(-1px)}
/* Chat view */
.aip-chat-view{display:flex;flex-direction:column;height:100%;animation:aip-fadein .25s ease}
@keyframes aip-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aip-chat-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--divider);flex-shrink:0}
.aip-chat-topbar-title{font-weight:700;font-size:.9rem;color:var(--on-solid)}
.aip-clear-btn{background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.22);color:rgba(192,132,252,.9);border-radius:20px;padding:5px 14px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .18s;font-family:inherit}
.aip-clear-btn:hover{background:rgba(192,132,252,.22)}
.aip-msgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:var(--purple) transparent;max-width:800px;width:100%;margin:0 auto;box-sizing:border-box}
.aip-msgs::-webkit-scrollbar{width:4px}
.aip-msgs::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}
.aip-msg-row{display:flex;flex-direction:column;gap:4px;max-width:80%;animation:aip-fadein .22s ease}
.aip-msg-row.user{align-self:flex-end;align-items:flex-end}
.aip-msg-row.bot{align-self:flex-start;align-items:flex-start}
.aip-sender{font-size:.68rem;font-weight:700;opacity:.5;margin-bottom:2px}
.aip-bubble{padding:12px 16px;border-radius:18px;font-size:.88rem;line-height:1.65;word-break:break-word}
.aip-bubble.user{background:linear-gradient(135deg,#7C3AED,#3B82F6);color:#fff;border-bottom-right-radius:4px}
.aip-bubble.bot{background:var(--row-bg);border:1px solid var(--divider);color:var(--on-solid);border-bottom-left-radius:4px}
.aip-bubble.bot strong{color:var(--purple)}
.aip-bubble.bot code{background:rgba(124,58,237,.12);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.82rem}
.aip-bubble.bot pre{background:rgba(0,0,0,.15);border-radius:10px;padding:10px 12px;overflow-x:auto;margin:6px 0}
.aip-bubble.bot ul,.aip-bubble.bot ol{margin:4px 0;padding-left:18px}
.aip-bubble.bot h3{font-size:.9rem;margin:8px 0 4px;color:var(--purple)}
.aip-thinking{display:flex;gap:4px;padding:12px 15px;background:var(--row-bg);border:1px solid var(--divider);border-radius:18px;border-bottom-left-radius:4px;width:fit-content}
.aip-thinking span{width:7px;height:7px;border-radius:50%;background:rgba(124,58,237,.5);animation:aip-bounce .9s infinite}
.aip-thinking span:nth-child(2){animation-delay:.18s}
.aip-thinking span:nth-child(3){animation-delay:.36s}
@keyframes aip-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
/* Upload button */
.aip-upload-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--divider);border-radius:20px;padding:6px 12px;font-size:.75rem;font-weight:600;color:var(--secondary);cursor:pointer;transition:background .18s,border-color .18s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.aip-upload-btn:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35);color:var(--purple)}
body.night .aip-upload-btn{background:rgba(255,255,255,.06)}
/* Import-from-course modal */
.aip-course-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:800;display:flex;align-items:center;justify-content:center;}
.aip-course-modal{background:#1a2540;border:1px solid rgba(255,255,255,.1);border-radius:14px;width:420px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.7);}
.aip-course-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);flex-shrink:0;}
.aip-course-modal-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:15px;padding:2px 5px;border-radius:4px;}
.aip-course-modal-close:hover{color:#fff;}
.aip-course-modal-body{display:flex;flex-direction:column;gap:10px;padding:14px 18px;flex:1;overflow:hidden;min-height:0;}
.aip-course-sel{width:100%;background:#0f1623;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.8);font-size:.82rem;padding:8px 10px;cursor:pointer;}
.aip-course-sel:focus{outline:none;border-color:rgba(124,58,237,.5);}
.aip-course-file-list{flex:1;overflow-y:auto;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(0,0,0,.2);min-height:0;}
.aip-course-loading,.aip-course-empty{display:flex;align-items:center;justify-content:center;gap:8px;padding:28px;color:rgba(255,255,255,.35);font-size:.82rem;}
.aip-course-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.1);border-top-color:#7c3aed;border-radius:50%;animation:edSpin .7s linear infinite;flex-shrink:0;}
.aip-course-file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s;}
.aip-course-file-item:last-child{border-bottom:none;}
.aip-course-file-item:hover{background:rgba(124,58,237,.1);}
.aip-course-file-item input[type=checkbox]{accent-color:#7c3aed;width:15px;height:15px;flex-shrink:0;cursor:pointer;}
.aip-course-file-item-name{flex:1;font-size:.8rem;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aip-course-file-item-size{font-size:.7rem;color:rgba(255,255,255,.3);flex-shrink:0;}
.aip-course-folder-hdr{padding:6px 12px 4px;font-size:.7rem;font-weight:700;color:rgba(124,58,237,.7);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.04);}
.aip-course-modal-ftr{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.aip-course-sel-count{flex:1;font-size:.75rem;color:rgba(255,255,255,.35);}
.aip-course-cancel{padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.55);font-size:.8rem;cursor:pointer;transition:background .13s;}
.aip-course-cancel:hover{background:rgba(255,255,255,.06);}
.aip-course-import{padding:7px 18px;border-radius:8px;border:none;background:#7c3aed;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .13s;}
.aip-course-import:hover:not([disabled]){background:#6d28d9;}
.aip-course-import[disabled]{opacity:.35;cursor:default;}
.aip-course-search{width:100%;background:#0f1623;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.8);font-size:.82rem;padding:8px 10px;box-sizing:border-box;font-family:inherit;}
.aip-course-search:focus{outline:none;border-color:rgba(124,58,237,.5);}
.aip-course-search::placeholder{color:rgba(255,255,255,.28);}
.aip-course-breadcrumb{display:flex;align-items:center;gap:8px;padding:2px 0;}
.aip-course-back-btn{background:none;border:none;color:rgba(124,58,237,.85);font-size:.8rem;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .13s;}
.aip-course-back-btn:hover{background:rgba(124,58,237,.12);}
.aip-course-breadcrumb-label{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aip-course-folder-row{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s;}
.aip-course-folder-row:hover{background:rgba(124,58,237,.1);}
.aip-course-folder-icon{font-size:1rem;flex-shrink:0;}
.aip-course-folder-name{flex:1;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aip-course-folder-count{font-size:.72rem;color:rgba(255,255,255,.3);flex-shrink:0;}
.aip-course-folder-arrow{font-size:1.1rem;color:rgba(255,255,255,.3);flex-shrink:0;margin-left:2px;}
body:not(.night) .aip-course-modal{background:#fff;border-color:rgba(0,0,0,.1);}
body:not(.night) .aip-course-modal-hdr{color:#1a1a2e;border-bottom-color:rgba(0,0,0,.08);}
body:not(.night) .aip-course-sel{background:#f4f5f9;border-color:rgba(0,0,0,.12);color:#222;}
body:not(.night) .aip-course-search{background:#f4f5f9;border-color:rgba(0,0,0,.12);color:#222;}
body:not(.night) .aip-course-search::placeholder{color:rgba(0,0,0,.3);}
body:not(.night) .aip-course-file-list{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02);}
body:not(.night) .aip-course-file-item:hover{background:rgba(124,58,237,.06);}
body:not(.night) .aip-course-file-item-name{color:#333;}
body:not(.night) .aip-course-folder-row:hover{background:rgba(124,58,237,.06);}
body:not(.night) .aip-course-folder-name{color:#1a1a2e;}
body:not(.night) .aip-course-breadcrumb-label{color:rgba(0,0,0,.55);}
body:not(.night) .aip-course-back-btn{color:#6d28d9;}
body:not(.night) .aip-course-modal-ftr{border-top-color:rgba(0,0,0,.07);}
body:not(.night) .aip-course-sel-count{color:rgba(0,0,0,.35);}
body:not(.night) .aip-course-cancel{border-color:rgba(0,0,0,.12);color:#555;}
/* File preview strip (input area) */
.aip-file-preview{display:flex;flex-wrap:wrap;gap:6px;padding:0}
.aip-file-preview:empty{display:none}
.aip-file-thumb-wrap{position:relative;display:inline-flex;flex-shrink:0}
.aip-file-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--divider)}
.aip-file-thumb-wrap .aip-file-chip-del{position:absolute;top:-5px;right:-5px;background:rgba(0,0,0,.7);border:none;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:.6rem;padding:0;line-height:1}
.aip-file-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);border-radius:10px;padding:4px 8px;font-size:.73rem;color:var(--purple);font-weight:600;max-width:200px}
.aip-file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aip-file-chip .aip-file-chip-del{background:none;border:none;cursor:pointer;color:var(--purple);opacity:.7;padding:0;line-height:1;font-size:.85rem;flex-shrink:0}
.aip-file-chip .aip-file-chip-del:hover{opacity:1}
.aip-file-chip-loading{opacity:.7;animation:aip-pulse 1.2s ease-in-out infinite}
@keyframes aip-pulse{0%,100%{opacity:.5}50%{opacity:1}}
/* Message attachments (above bubble) */
.aip-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;justify-content:flex-end}
.aip-msg-thumb{width:120px;height:120px;border-radius:12px;object-fit:cover;border:2px solid rgba(124,58,237,.3)}
.aip-msg-file-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);border-radius:10px;padding:5px 10px;font-size:.75rem;color:var(--purple);font-weight:600}
/* Center box bottom row */
.aip-center-bottom{display:flex;align-items:center;gap:6px}
.aip-center-bottom .aip-center-send{margin-left:auto}
/* Chat input inner wrapper */
.aip-input-bar{display:flex;align-items:flex-end;gap:10px;padding:12px 24px 16px;border-top:1px solid var(--divider);flex-shrink:0;max-width:800px;width:100%;margin:0 auto;box-sizing:border-box}
.aip-input-inner{flex:1;background:var(--row-bg);border:1px solid var(--divider);border-radius:20px;padding:10px 14px 8px;display:flex;flex-direction:column;gap:8px;transition:border-color .18s}
.aip-input-inner:focus-within{border-color:rgba(124,58,237,.45)}
.aip-input{width:100%;background:transparent;border:none;outline:none;resize:none;font-size:.88rem;color:var(--on-solid);font-family:inherit;line-height:1.5;max-height:140px;overflow-y:auto;scrollbar-width:thin;padding:0}
.aip-input::placeholder{color:var(--secondary);opacity:.7}
.aip-input-actions{display:flex;align-items:center;gap:6px}
.aip-input-actions .aip-send-btn{margin-left:auto}
.aip-send-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#3B82F6);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:box-shadow .18s,transform .15s;box-shadow:0 3px 12px rgba(124,58,237,.4)}
.aip-send-btn svg{display:block}
.aip-send-btn:hover{transform:scale(1.1);box-shadow:0 5px 18px rgba(124,58,237,.55)}
.aip-send-btn:active{transform:scale(.96)}
.aip-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.aip-send-btn.is-stop{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 3px 12px rgba(239,68,68,.4)}
.aip-send-btn.is-stop:hover{box-shadow:0 5px 18px rgba(239,68,68,.55)}
@media(max-width:600px){.aip-subtitle{font-size:1.5rem}.aip-chips-row{gap:6px}.aip-msgs,.aip-input-bar{padding-left:14px;padding-right:14px}}
/* ── CHAT ─────────────────────────────────────────────────────────────────── */
#psec-chat{height:calc(100dvh - var(--topbar-h) - 40px);min-height:500px;padding:0!important}
.chat-wrap{display:flex;height:100%;gap:0;overflow:hidden;border-radius:20px;border:1px solid var(--divider);background:var(--card-inner)}
.chat-rooms-panel{width:220px;flex-shrink:0;border-right:1px solid var(--divider);display:flex;flex-direction:column;background:var(--row-bg)}
.chat-rooms-hdr{padding:16px 16px 10px;font-family:'Fredoka One',cursive;font-size:1rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}
.chat-rooms-list{flex:1;overflow-y:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px}
.chat-room-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:all .15s;font-size:.82rem;font-weight:700;color:var(--on-glass-muted)}
.chat-room-item:hover{background:var(--card-inner);color:var(--on-glass)}
.chat-room-item.active{background:rgba(192,132,252,.15);color:var(--on-glass);border:1px solid rgba(192,132,252,.25)}
.chat-room-icon{font-size:.9rem;flex-shrink:0}
.chat-room-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-rooms-section-label{font-size:.65rem;font-weight:800;color:var(--on-glass-faint);text-transform:uppercase;letter-spacing:.06em;padding:10px 10px 4px}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-main-hdr{padding:14px 20px;border-bottom:1px solid var(--divider);flex-shrink:0}
.chat-room-title{font-weight:800;font-size:.95rem;color:var(--on-glass)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.3) transparent}
.chat-empty{text-align:center;color:var(--on-glass-faint);font-size:.82rem;font-weight:700;margin:auto;padding:40px 20px}
.chat-loading{text-align:center;color:var(--on-glass-faint);font-size:.8rem;font-weight:700;padding:20px;margin:auto}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:72%}
.chat-msg-me{align-self:flex-end;align-items:flex-end}
.chat-msg-name{font-size:.68rem;font-weight:800;color:rgba(192,132,252,.9);margin-bottom:3px;padding-left:4px}
.chat-msg-bubble{background:var(--row-bg);border:1px solid var(--divider);border-radius:14px 14px 14px 3px;padding:9px 13px;font-size:.83rem;font-weight:600;color:var(--on-glass);line-height:1.5;word-break:break-word;max-width:100%}
.chat-msg-me .chat-msg-bubble{background:linear-gradient(135deg,rgba(192,132,252,.25),rgba(244,114,182,.18));border-color:rgba(192,132,252,.3);border-radius:14px 14px 3px 14px}
.chat-msg-time{font-size:.62rem;color:var(--on-glass-faint);font-weight:700;margin-top:3px;padding:0 4px}
.chat-date-divider{text-align:center;font-size:.65rem;font-weight:800;color:var(--on-glass-faint);letter-spacing:.05em;text-transform:uppercase;padding:4px 0;flex-shrink:0}
.chat-room-topic{font-size:.72rem;color:rgba(255,255,255,.4);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.chat-hdr-btn{background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.2);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:.85rem;color:var(--on-glass-muted);transition:all .15s}
.chat-hdr-btn:hover{background:rgba(192,132,252,.2)}
.chat-msg{position:relative}
.chat-msg-actions{display:none;position:absolute;top:-18px;right:4px;background:var(--dp-modal);border:1px solid rgba(192,132,252,.2);border-radius:10px;padding:2px 4px;gap:2px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.chat-msg:hover .chat-msg-actions{display:flex}
.chat-action-btn{background:none;border:none;cursor:pointer;font-size:.82rem;padding:2px 5px;border-radius:6px;color:var(--on-glass-muted);transition:background .12s}
.chat-action-btn:hover{background:rgba(192,132,252,.15)}
.chat-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chat-reaction-pill{background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.2);border-radius:20px;padding:2px 8px;font-size:.78rem;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;transition:all .12s}
.chat-reaction-pill.mine{background:rgba(192,132,252,.22);border-color:rgba(192,132,252,.5)}
.chat-reaction-pill:hover{background:rgba(192,132,252,.2)}
.chat-react-emoji{font-size:1.3rem;cursor:pointer;padding:4px;border-radius:8px;transition:background .12s}
.chat-react-emoji:hover{background:rgba(192,132,252,.15)}
.chat-reply-ref{background:rgba(192,132,252,.08);border-left:3px solid rgba(192,132,252,.5);border-radius:0 8px 8px 0;padding:4px 10px;margin-bottom:4px;font-size:.72rem;color:rgba(255,255,255,.5);cursor:pointer;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-reply-ref-name{color:rgba(192,132,252,.9);font-weight:800}
.chat-input-row{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--divider);flex-shrink:0;align-items:center}
.chat-tool-btn{background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.15);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:.78rem;font-weight:800;color:var(--on-glass-muted);transition:all .15s;flex-shrink:0;font-family:'Nunito',sans-serif}
.chat-tool-btn:hover{background:rgba(192,132,252,.18);color:#c084fc}
.chat-tool-btn:disabled{opacity:.35;cursor:not-allowed}
.chat-sidebar-tools{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--divider);flex-shrink:0}
.chat-input{flex:1;background:var(--row-bg);border:1px solid var(--divider);border-radius:22px;padding:10px 16px;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;color:var(--on-glass);outline:none;transition:border-color .15s}
.chat-input:focus{border-color:rgba(192,132,252,.5)}
.chat-input:disabled{opacity:.5;cursor:not-allowed}
.chat-send-btn{width:40px;height:40px;min-width:40px;min-height:40px;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#c084fc,#f472b6);border:none;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
.chat-send-btn:not(:disabled):hover{opacity:.85}
@media(max-width:640px){.chat-rooms-panel{width:64px}.chat-room-label{display:none}.chat-rooms-hdr{font-size:.7rem;padding:12px 8px 8px}}
/* ── CHAT FRIENDS ─────────────────────────────────────────────────────────── */
#psec-chat{position:relative}
.chat-rooms-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
.chat-add-friend-btn{background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);border-radius:8px;padding:4px 9px;font-size:.75rem;font-weight:800;color:rgba(192,132,252,.9);cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;flex-shrink:0}
.chat-add-friend-btn:hover{background:rgba(192,132,252,.28)}
.chat-friend-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:all .15s;color:var(--on-glass-muted)}
.chat-friend-item:hover{background:var(--card-inner);color:var(--on-glass)}
.chat-friend-item.active{background:rgba(192,132,252,.15);color:var(--on-glass);border:1px solid rgba(192,132,252,.25)}
.chat-friend-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0}
.chat-friend-name{font-size:.8rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chat-friend-pending{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:rgba(255,165,0,.06);border:1px solid rgba(255,165,0,.18)}
.chat-friend-pending-name{font-size:.78rem;font-weight:700;color:var(--on-glass-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-friend-accept-btn{background:rgba(6,214,160,.15);border:1px solid rgba(6,214,160,.3);border-radius:7px;padding:3px 8px;font-size:.68rem;font-weight:800;color:rgba(6,214,160,.9);cursor:pointer;white-space:nowrap;font-family:'Nunito',sans-serif}
.chat-friend-accept-btn:hover{background:rgba(6,214,160,.28)}
/* Friend search modal */
#chatFriendModal.open{display:flex!important}
.chat-friend-box{
background:rgba(12,18,36,.72);
backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.26);
border-radius:22px;
width:420px;max-width:calc(100vw - 32px);
display:flex;flex-direction:column;gap:0;overflow:hidden;
box-shadow:0 24px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16)
}
.chat-friend-box-hdr{
display:flex;align-items:center;justify-content:space-between;
padding:20px 20px 16px;
border-bottom:1px solid rgba(255,255,255,.1);
font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.03)
}
.chat-friend-box-close{
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.14);
border-radius:10px;width:32px;height:32px;cursor:pointer;
color:rgba(255,255,255,.55);font-size:.85rem;
display:flex;align-items:center;justify-content:center;
transition:all .15s
}
.chat-friend-box-close:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.chat-friend-search{
background:rgba(255,255,255,.06);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:none;border-bottom:1px solid rgba(255,255,255,.08);
padding:13px 20px;
font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:700;
color:rgba(255,255,255,.88);outline:none;width:100%;
transition:background .15s
}
.chat-friend-search::placeholder{color:rgba(255,255,255,.3)}
.chat-friend-search:focus{background:rgba(255,255,255,.09);border-bottom-color:rgba(108,99,255,.5)}
.chat-vis-btn{
flex:1;padding:8px 4px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;
color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s
}
.chat-vis-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.chat-vis-btn.active{
background:rgba(108,99,255,.3);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-color:rgba(108,99,255,.55);color:#a78bfa;
box-shadow:0 2px 12px rgba(108,99,255,.25)
}
.chat-friend-results{max-height:300px;overflow-y:auto;padding:8px}
.chat-friend-hint{text-align:center;padding:24px;font-size:.8rem;color:var(--on-glass-faint);font-weight:700}
.chat-friend-result-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;transition:background .12s}
.chat-friend-result-row:hover{background:var(--row-bg)}
.chat-friend-result-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0}
.chat-friend-result-info{flex:1;min-width:0}
.chat-friend-result-name{font-size:.85rem;font-weight:800;color:var(--on-glass)}
.chat-friend-result-prog{font-size:.68rem;color:var(--on-glass-faint);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-friend-req-btn{background:linear-gradient(135deg,rgba(192,132,252,.2),rgba(244,114,182,.15));border:1px solid rgba(192,132,252,.3);border-radius:9px;padding:6px 13px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.74rem;color:rgba(192,132,252,.9);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.chat-friend-req-btn:hover{background:linear-gradient(135deg,rgba(192,132,252,.35),rgba(244,114,182,.25))}
.chat-friend-req-btn:disabled{opacity:.5;cursor:default}
/* ── NOTIFICATIONS ── */
.notif-wrap{display:flex;flex-direction:column;gap:0;max-width:560px;width:100%;background:var(--card-inner);border:1px solid var(--divider);border-radius:20px;overflow:hidden}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;background:linear-gradient(135deg,rgba(192,132,252,.12),rgba(244,114,182,.08));border-bottom:1px solid var(--divider)}
.notif-header-left{display:flex;align-items:center;gap:14px}
.notif-title-icon{font-size:2rem;line-height:1}
.notif-title{font-family:'Fredoka One',cursive;font-size:1.4rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.notif-subtitle{font-size:.72rem;font-weight:700;color:var(--on-glass-faint);margin-top:1px}
.notif-mark-all{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.25);border-radius:20px;padding:7px 14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.74rem;color:rgba(192,132,252,.85);cursor:pointer;transition:all .15s}
.notif-mark-all:hover{background:rgba(192,132,252,.22)}
.notif-tabs{display:flex;gap:0;border-bottom:1px solid var(--divider);padding:0 24px}
.notif-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:var(--on-glass-faint);cursor:pointer;transition:all .15s;margin-bottom:-1px}
.notif-tab.active{color:#c084fc;border-bottom-color:#c084fc}
.notif-list{display:flex;flex-direction:column;min-height:200px}
.notif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 20px;flex:1}
.notif-empty-icon{font-size:2.8rem;opacity:.3}
.notif-empty-title{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--on-glass-muted)}
.notif-empty-sub{font-size:.78rem;font-weight:700;color:var(--on-glass-faint);text-align:center}
.notif-item{display:flex;align-items:flex-start;gap:14px;padding:14px 24px;border-bottom:1px solid var(--divider);transition:background .15s;cursor:pointer;position:relative}
.notif-item:hover{background:rgba(192,132,252,.05)}
.notif-item.unread{background:rgba(192,132,252,.07)}
.notif-item-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);flex-shrink:0;margin-top:6px}
.notif-item-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.2)}
.notif-item-body{flex:1;min-width:0}
.notif-item-msg{font-size:.82rem;font-weight:700;color:var(--on-glass);line-height:1.45}
.notif-item-time{font-size:.68rem;font-weight:700;color:var(--on-glass-faint);margin-top:3px}
/* ── GAMES HUB ── */
#psec-games{min-height:0}
.games-hub{padding:0}
.games-hub-hero{padding:28px 28px 20px;background:linear-gradient(135deg,rgba(192,132,252,.1),rgba(244,114,182,.06));border-bottom:1px solid var(--divider);border-radius:20px 20px 0 0}
.games-hub-hero-title{font-family:'Fredoka One',cursive;font-size:2rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.games-hub-hero-sub{font-size:.78rem;font-weight:700;color:var(--on-glass-faint);margin-top:3px}
.games-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:20px 24px}
.gh-card{background:var(--row-bg);border:1px solid var(--divider);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .22s;display:flex;flex-direction:column}
.gh-card:hover{border-color:rgba(192,132,252,.45);transform:translateY(-4px);box-shadow:0 16px 40px rgba(192,132,252,.14)}
.gh-card-preview{height:110px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(192,132,252,.08),rgba(244,114,182,.05))}
.gh-card-preview-tetris .gh-tetris-preview{display:grid;grid-template-columns:repeat(3,8px);gap:3px}
.gh-card-body{padding:14px 16px 8px;flex:1}
.gh-card-name{font-family:'Fredoka One',cursive;font-size:1.15rem;color:var(--on-glass);margin-bottom:4px}
.gh-card-desc{font-size:.73rem;font-weight:700;color:var(--on-glass-faint);line-height:1.5}
.gh-card-meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.gh-badge{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.2);border-radius:20px;padding:3px 10px;font-size:.66rem;font-weight:800;color:rgba(192,132,252,.8)}
.gh-card-play{padding:12px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;color:#c084fc;border-top:1px solid var(--divider);transition:background .15s}
.gh-card:hover .gh-card-play{background:rgba(192,132,252,.08)}
/* ── SHARED GAME SCREENS ── */
.games-level-screen,.games-play-screen{padding:20px 24px}
.gd-game-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.gd-game-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.game-play-hdr{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.game-back-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:7px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;color:var(--on-glass-muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.game-back-btn:hover{background:rgba(255,255,255,.13)}
.game-play-title{font-family:'Fredoka One',cursive;font-size:1.25rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.game-play-level-badge{background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);border-radius:20px;padding:4px 12px;font-size:.72rem;font-weight:800;color:rgba(192,132,252,.9)}
.tetris-start-btn{background:linear-gradient(135deg,#c084fc,#f472b6);border:none;border-radius:24px;padding:10px 28px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.88rem;color:#fff;cursor:pointer;transition:opacity .15s}
.tetris-start-btn:hover{opacity:.85}
/* ── LEVEL SELECT ── */
.lvl-hero{padding:24px 24px 0}
.lvl-hero-body{margin-top:16px}
.lvl-hero-title{font-family:'Fredoka One',cursive;font-size:1.8rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.lvl-hero-sub{font-size:.8rem;font-weight:700;color:var(--on-glass-faint);margin-top:6px}
.lvl-hero-stats{display:flex;gap:16px;margin-top:16px}
.lvl-hero-stat{background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.18);border-radius:12px;padding:10px 18px;display:flex;flex-direction:column;align-items:center;gap:2px}
.lvl-hero-stat-val{font-family:'Fredoka One',cursive;font-size:1.2rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lvl-hero-stat-label{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--on-glass-faint)}
.lvl-tiers{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.lvl-tier{display:flex;flex-direction:column;gap:8px}
.lvl-tier-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.lvl-tier-label::after{content:'';flex:1;height:1px;background:var(--divider)}
.lvl-tier-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.level-btn{border-radius:14px;padding:14px 8px 12px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;border:1px solid transparent}
.level-btn:hover{transform:translateY(-3px)}
.level-btn-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none}
.level-btn-num{font-family:'Fredoka One',cursive;font-size:1.7rem;line-height:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.level-btn-label{font-size:.6rem;font-weight:800;margin-top:4px;text-transform:uppercase;letter-spacing:.05em;opacity:.75;color:#fff}
.level-btn-speed{font-size:.58rem;font-weight:700;margin-top:3px;opacity:.55;color:#fff}
/* tier colours */
.lvl-btn-1{background:linear-gradient(135deg,#3b2d6b,#2a2050);border-color:rgba(192,132,252,.3)}
.lvl-btn-2{background:linear-gradient(135deg,#4a2a72,#341a5c);border-color:rgba(192,132,252,.35)}
.lvl-btn-3{background:linear-gradient(135deg,#7c2d8a,#5a1a70);border-color:rgba(244,114,182,.3)}
.lvl-btn-4{background:linear-gradient(135deg,#9a1f6e,#7b0f52);border-color:rgba(244,114,182,.4)}
.lvl-btn-5{background:linear-gradient(135deg,#b91c1c,#7f1d1d);border-color:rgba(248,113,113,.45)}
.lvl-btn-6{background:linear-gradient(135deg,#c2410c,#7c2d12);border-color:rgba(251,146,60,.4)}
.lvl-btn-7{background:linear-gradient(135deg,#92400e,#451a03);border-color:rgba(251,191,36,.35)}
.lvl-btn-8{background:linear-gradient(135deg,#1e3a8a,#1e1b4b);border-color:rgba(96,165,250,.3)}
.lvl-btn-9{background:linear-gradient(135deg,#065f46,#022c22);border-color:rgba(52,211,153,.3)}
.lvl-btn-10{background:linear-gradient(135deg,#0f0f0f,#1a0a2e);border-color:rgba(255,255,255,.25);box-shadow:0 0 18px rgba(192,132,252,.25)}
.level-btn:hover.lvl-btn-1,.level-btn:hover.lvl-btn-2{box-shadow:0 8px 24px rgba(192,132,252,.3)}
.level-btn:hover.lvl-btn-3,.level-btn:hover.lvl-btn-4{box-shadow:0 8px 24px rgba(244,114,182,.3)}
.level-btn:hover.lvl-btn-5,.level-btn:hover.lvl-btn-6{box-shadow:0 8px 24px rgba(239,68,68,.35)}
.level-btn:hover.lvl-btn-7,.level-btn:hover.lvl-btn-8{box-shadow:0 8px 24px rgba(96,165,250,.3)}
.level-btn:hover.lvl-btn-9{box-shadow:0 8px 24px rgba(52,211,153,.3)}
.level-btn:hover.lvl-btn-10{box-shadow:0 8px 24px rgba(192,132,252,.4)}
/* ── TETRIS ── */
.tetris-layout{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.tetris-stats-col{display:flex;flex-direction:column;gap:10px;min-width:80px}
.tetris-next-col{display:flex;flex-direction:column;gap:10px;min-width:80px}
.tstat{display:flex;flex-direction:column;background:var(--row-bg);border:1px solid var(--divider);border-radius:12px;padding:10px 12px;text-align:center}
.tstat-label{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--on-glass-faint);margin-bottom:3px}
.tstat-val{font-family:'Fredoka One',cursive;font-size:1.25rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.tetris-center-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.tetris-board-wrap{position:relative;flex-shrink:0}
#tetrisCanvas{display:block;border-radius:10px;border:2px solid rgba(192,132,252,.35);background:#08060f;box-shadow:0 0 32px rgba(192,132,252,.12)}
#tetrisNext{display:block;margin:0 auto;border-radius:8px;background:#08060f}
.tetris-overlay{position:absolute;inset:0;border-radius:10px;background:rgba(8,6,15,.9);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.tetris-overlay-title{font-family:'Fredoka One',cursive;font-size:1.8rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tetris-overlay-sub{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.35);text-align:center;padding:0 16px;line-height:1.6}
.tetris-controls{display:flex;flex-direction:column;align-items:center;gap:6px}
.tetris-ctrl-row{display:flex;gap:6px}
.tetris-ctrl-btn{height:44px;min-width:44px;padding:0 10px;background:var(--row-bg);border:1px solid var(--divider);border-radius:10px;font-size:.82rem;color:var(--on-glass);cursor:pointer;transition:all .1s;font-family:'Nunito',sans-serif;font-weight:800;white-space:nowrap}
.tetris-ctrl-btn:active,.tetris-ctrl-btn:hover{background:rgba(192,132,252,.18);border-color:rgba(192,132,252,.45)}
.tetris-ctrl-drop{padding:0 18px}
/* ── SOLITAIRE ── */
.sol-hdr-stats{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.sol-table{background:rgba(0,0,0,.25);border-radius:16px;border:1px solid var(--divider);padding:16px;overflow-x:auto;pointer-events:auto}
.sol-top-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sol-tableau{display:flex;gap:10px;align-items:flex-start}
.sol-pile{position:relative;width:62px;flex-shrink:0}
.sol-pile-empty{width:62px;height:88px;border-radius:8px;border:2px dashed rgba(192,132,252,.2);flex-shrink:0}
.sol-pile-foundation{background:rgba(192,132,252,.06)}
.sol-card{width:62px;height:88px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,#1e1535,#160f2a);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:4px 6px;cursor:pointer;position:relative;user-select:none;transition:box-shadow .12s;flex-shrink:0;font-family:'Nunito',sans-serif;pointer-events:auto}
.sol-card:hover{box-shadow:0 0 0 2px rgba(192,132,252,.5)}
.sol-card.selected{box-shadow:0 0 0 2px #c084fc,0 6px 20px rgba(192,132,252,.35)}
.sol-card.face-down{background:linear-gradient(145deg,#120d22,#0d0a1a);cursor:default}
.sol-card.face-down::after{content:'';position:absolute;inset:4px;border-radius:5px;background:repeating-linear-gradient(45deg,rgba(192,132,252,.07) 0,rgba(192,132,252,.07) 2px,transparent 2px,transparent 8px)}
.sol-card-rank{font-size:.72rem;font-weight:900;line-height:1}
.sol-card-suit{font-size:.72rem;line-height:1}
.sol-card-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.sol-card.red .sol-card-rank,.sol-card.red .sol-card-suit{color:#f472b6}
.sol-card.black .sol-card-rank,.sol-card.black .sol-card-suit{color:rgba(255,255,255,.9)}
.sol-tab-pile{position:relative;min-height:88px}
.sol-stacked-card{position:absolute;left:0;width:62px}
@keyframes solDeal{from{opacity:0;transform:translateY(-18px) scale(.9)}to{opacity:1;transform:none}}
.sol-drop-hover{box-shadow:0 0 0 2px #a78bfa,0 0 18px rgba(167,139,250,.4)!important;background:rgba(167,139,250,.12)!important}
.sol-hint-src{animation:solHintSrc .55s ease infinite alternate}
.sol-hint-dst{animation:solHintDst .55s ease infinite alternate}
@keyframes solHintSrc{from{box-shadow:0 0 0 2px #f472b6,0 0 12px rgba(244,114,182,.3)}to{box-shadow:0 0 0 3px #f472b6,0 0 28px rgba(244,114,182,.6);transform:translateY(-4px)}}
@keyframes solHintDst{from{box-shadow:0 0 0 2px #34d399,0 0 12px rgba(52,211,153,.3)}to{box-shadow:0 0 0 3px #34d399,0 0 28px rgba(52,211,153,.6)}}
.sol-shuffle-anim{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px}
.sol-shuffle-deck{width:62px;height:88px;border-radius:8px;background:linear-gradient(145deg,#1e1535,#160f2a);border:1px solid rgba(192,132,252,.3);animation:solShuffleDeck .6s ease infinite alternate;box-shadow:4px 4px 0 rgba(192,132,252,.15),8px 8px 0 rgba(192,132,252,.08)}
@keyframes solShuffleDeck{from{transform:rotate(-4deg) scale(.97)}to{transform:rotate(4deg) scale(1.03)}}
.sol-shuffle-label{font-family:'Fredoka One',cursive;font-size:1rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes sol-flip-card{0%{transform:scaleX(1)}45%{transform:scaleX(0)}55%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.sol-flip-anim{animation:sol-flip-card .35s ease;}
.sol-gameover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;z-index:50;animation:popIn .3s ease}
.sol-gameover-title{font-size:2.2rem;font-weight:800;color:#f87171;margin-bottom:6px;letter-spacing:.02em}
.sol-gameover-sub{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:20px}
.sol-gameover-btn{padding:9px 26px;background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:.02em}
.sol-gameover-btn:hover{filter:brightness(1.12)}
/* ── STUDY LOUNGE ── */
.lounge-streak-banner{display:flex;align-items:center;gap:16px;padding:18px 24px;background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(244,114,182,.1));border:1px solid rgba(192,132,252,.25);border-radius:16px;margin-bottom:28px}
.lounge-streak-flame{font-size:2.2rem;line-height:1}
.lounge-streak-val{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.lounge-streak-lbl{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.lounge-streak-msg{margin-left:auto;font-size:.82rem;color:rgba(255,255,255,.55);max-width:200px;text-align:right;line-height:1.4}
.lounge-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:36px}
.lounge-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:border-color .2s,background .2s}
.lounge-stat-card:hover{background:rgba(192,132,252,.07);border-color:rgba(192,132,252,.25)}
.lounge-stat-icon{font-size:1.6rem;line-height:1;margin-bottom:2px}
.lounge-stat-val{font-size:1.6rem;font-weight:800;color:#fff;line-height:1}
.lounge-stat-lbl{font-size:.72rem;font-weight:700;color:rgba(192,132,252,.8);text-transform:uppercase;letter-spacing:.05em}
.lounge-stat-sub{font-size:.68rem;color:rgba(255,255,255,.35);margin-top:2px;line-height:1.3}
.lounge-section-hdr{font-size:.78rem;font-weight:800;color:rgba(192,132,252,.6);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;margin-top:4px}
.lounge-course-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;min-height:36px}
.lounge-course-chip{padding:6px 14px;background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.25);border-radius:20px;font-size:.8rem;font-weight:700;color:rgba(192,132,252,.9)}
.lounge-recent-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.lounge-recent-item{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;font-size:.82rem}
.lounge-recent-item-icon{font-size:1.1rem;flex-shrink:0}
.lounge-recent-item-name{flex:1;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lounge-recent-item-course{font-size:.7rem;color:rgba(255,255,255,.35);white-space:nowrap}
.lounge-empty-msg{color:rgba(255,255,255,.25);font-size:.82rem;font-style:italic;padding:8px 0}
/* ── GERMAN LEARNER ── */
.gl-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(192,132,252,.12),rgba(244,114,182,.08));border:1px solid rgba(192,132,252,.2);border-radius:20px;padding:20px 24px;margin-bottom:20px}
.gl-hero-flag{font-size:2.4rem;line-height:1}
.gl-hero-text{flex:1}
.gl-hero-title{font-family:'Fredoka One',cursive;font-size:1.4rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gl-hero-sub{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.45);margin-top:3px}
.gl-hero-chip{padding:6px 14px;background:linear-gradient(135deg,#c084fc,#f472b6);border-radius:30px;font-family:'Fredoka One',cursive;font-size:.95rem;color:#fff;white-space:nowrap}
.gl-skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
@media(max-width:600px){.gl-skill-grid{grid-template-columns:repeat(2,1fr)}}
.gl-skill-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center}
.gl-skill-card:hover{border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.07)}
.gl-skill-icon{font-size:1.6rem}
.gl-skill-name{font-family:'Fredoka One',cursive;font-size:.95rem;color:#e2d9f3}
.gl-skill-sub{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.35);line-height:1.3}
.gl-ai-chip{padding:8px 14px;background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.25);border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;color:rgba(255,255,255,.7);cursor:pointer;transition:background .2s,color .2s}
.gl-ai-chip:hover{background:rgba(192,132,252,.2);color:#fff}
.gl-ai-msg{padding:10px 14px;border-radius:12px;font-size:.83rem;font-weight:600;line-height:1.55;max-width:92%}
.gl-ai-msg.user{background:linear-gradient(135deg,rgba(192,132,252,.18),rgba(244,114,182,.12));border:1px solid rgba(192,132,252,.25);color:#e2d9f3;align-self:flex-end}
.gl-ai-msg.bot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.85);align-self:flex-start}
.gl-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.3);border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;color:rgba(192,132,252,.9);cursor:pointer;transition:background .2s;line-height:1}
.gl-upload-btn:hover{background:rgba(192,132,252,.18)}
.gl-file-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px}
.gl-file-icon{font-size:1.1rem;flex-shrink:0}
.gl-file-name{flex:1;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-file-size{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.3);flex-shrink:0}
.gl-file-open{padding:4px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:rgba(255,255,255,.7);cursor:pointer;flex-shrink:0}
.gl-file-quiz{padding:4px 12px;background:linear-gradient(135deg,#c084fc,#f472b6);border:none;border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:#fff;cursor:pointer;flex-shrink:0}
.gl-file-explain{padding:4px 12px;background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:#c084fc;cursor:pointer;flex-shrink:0}
.gl-file-del{padding:4px 10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:rgba(239,68,68,.8);cursor:pointer;flex-shrink:0}
.gl-file-empty{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.25);font-style:italic;padding:4px 0}
/* ── FLAPPY BIRD ── */
.bird-wrap{display:flex;justify-content:center}
#birdCanvas{display:block;border-radius:16px;border:2px solid rgba(192,132,252,.3);cursor:pointer;box-shadow:0 0 40px rgba(192,132,252,.12)}
/* ── CHESS ── */
.chess-screen{padding:12px 16px!important}
.chess-main{display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-top:8px}
/* Board column */
.chess-board-col{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.chess-board-wrap{position:relative;border-radius:4px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.7)}
#chessBoard{display:block;width:min(464px,calc(100vw - 280px));height:min(464px,calc(100vw - 280px));cursor:pointer;image-rendering:crisp-edges}
@media(max-width:800px){#chessBoard{width:min(464px,calc(100vw - 32px));height:min(464px,calc(100vw - 32px))}.chess-main{flex-direction:column;align-items:center}.chess-panel{width:min(464px,calc(100vw - 32px))!important}}
/* Player bars */
.chess-player-bar{display:flex;align-items:center;gap:9px;padding:6px 4px}
.chess-player-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;flex-shrink:0;border:2px solid rgba(255,255,255,.15)}
.chess-player-meta{flex:1;min-width:0}
.chess-player-name{font-size:.82rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chess-player-elo{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.4)}
.chess-caps-row{display:flex;flex-wrap:wrap;gap:1px;font-size:.7rem;opacity:.65}
.chess-clock{font-size:.9rem;font-weight:800;font-family:monospace;background:rgba(255,255,255,.08);border-radius:6px;padding:4px 10px;border:1px solid rgba(255,255,255,.1)}
.chess-clock-active{background:rgba(118,149,86,.25)!important;border-color:rgba(118,149,86,.5)!important;color:#a3e635}
/* Board overlay */
.chess-board-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px)}
.chess-overlay-box{background:linear-gradient(135deg,#1a0d2e,#0f1623);border:1px solid rgba(192,132,252,.3);border-radius:16px;padding:28px 36px;text-align:center}
.chess-overlay-title{font-family:'Fredoka One',cursive;font-size:1.6rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}
.chess-overlay-sub{font-size:.85rem;color:rgba(255,255,255,.6);font-weight:700}
/* Right panel */
.chess-panel{width:220px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.chess-panel-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07)}
.chess-ptab{flex:1;padding:10px 4px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.04em}
.chess-ptab:hover{color:rgba(255,255,255,.7)}
.chess-ptab-active{color:#c084fc!important;border-bottom:2px solid #c084fc;margin-bottom:-1px}
.chess-tab-body{flex:1;padding:12px;overflow-y:auto;max-height:calc(min(464px,calc(100vw - 340px)) + 100px)}
/* Mode buttons */
.chess-mode-btns{display:flex;flex-direction:column;gap:8px}
.chess-mode-btn{display:flex;align-items:center;gap:10px;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;text-align:left;width:100%;transition:all .2s;font-family:'Nunito',sans-serif;color:#fff}
.chess-mode-btn:hover{background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.35);transform:translateX(2px)}
.chess-mode-icon{font-size:1.4rem;flex-shrink:0}
.chess-mode-name{font-size:.82rem;font-weight:800;color:#fff}
.chess-mode-sub{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:700;margin-top:1px}
.chess-mode-arrow{margin-left:auto;color:rgba(255,255,255,.3);font-size:1rem}
/* Section headers */
.chess-section-hdr{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:rgba(255,255,255,.7);margin-bottom:10px}
.chess-section-label{font-size:.65rem;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.chess-back-sm{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:rgba(255,255,255,.6);cursor:pointer;padding:3px 8px;font-size:.75rem;font-family:'Nunito',sans-serif}
/* Difficulty grid */
.chess-diff-grid{display:flex;flex-direction:column;gap:6px}
.chess-diff-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;transition:all .2s;background:rgba(255,255,255,.04)}
.chess-diff-btn:hover{transform:translateX(2px);filter:brightness(1.2)}
/* Online */
.chess-big-btn{width:100%;padding:11px;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;color:#fff;cursor:pointer;transition:all .2s}
.chess-big-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(168,85,247,.4)}
.chess-or-divider{text-align:center;font-size:.7rem;color:rgba(255,255,255,.25);font-weight:700;margin:10px 0}
.chess-room-input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;color:#fff;outline:none;text-transform:uppercase;letter-spacing:.1em;width:100%;box-sizing:border-box}
.chess-room-input::placeholder{color:rgba(255,255,255,.25);letter-spacing:0;text-transform:none}
/* Waiting */
.chess-waiting-box{text-align:center;padding:12px 0}
.chess-waiting-spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(192,132,252,.2);border-top-color:#c084fc;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.chess-waiting-label{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:8px}
.chess-room-code-display{font-size:1.6rem;font-weight:800;letter-spacing:.18em;color:#c084fc;font-family:monospace;background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.3);border-radius:8px;padding:8px 16px;margin:4px 0}
.chess-cancel-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.5);cursor:pointer;padding:6px 16px;font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:700}
/* Moves list */
.chess-moves-list{display:grid;grid-template-columns:28px 1fr 1fr;gap:1px;font-size:.76rem;font-weight:700;font-family:monospace}
.chess-mv-num{color:rgba(255,255,255,.3);padding:3px 4px;background:rgba(255,255,255,.03)}
.chess-mv-w,.chess-mv-b{padding:3px 6px;background:rgba(255,255,255,.03);border-radius:3px;cursor:pointer;color:rgba(255,255,255,.75)}
.chess-mv-w:hover,.chess-mv-b:hover{background:rgba(192,132,252,.15);color:#fff}
.chess-mv-active{background:rgba(192,132,252,.25)!important;color:#fff!important}
/* Ratings */
.chess-rating-hero{text-align:center;padding:14px 0 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:10px}
.chess-rating-big{font-family:'Fredoka One',cursive;font-size:2.4rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chess-wld-row{display:flex;gap:6px}
.chess-wld-box{flex:1;text-align:center;padding:8px 4px;border-radius:8px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.5)}
.chess-wld-num{font-size:1.2rem;font-weight:800;margin-bottom:2px}
.chess-wld-w{background:rgba(52,211,153,.1)}.chess-wld-w .chess-wld-num{color:#34d399}
.chess-wld-d{background:rgba(255,255,255,.06)}.chess-wld-d .chess-wld-num{color:rgba(255,255,255,.6)}
.chess-wld-l{background:rgba(239,68,68,.1)}.chess-wld-l .chess-wld-num{color:#ef4444}
.chess-bot-record{display:flex;align-items:center;justify-content:space-between;padding:5px 6px;border-radius:6px;margin-bottom:4px;background:rgba(255,255,255,.03);font-size:.72rem}
.chess-bot-record-name{font-weight:800;color:rgba(255,255,255,.6)}
.chess-bot-record-stats{font-weight:700;color:rgba(255,255,255,.35)}
/* ════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE — StudySphere
Breakpoints: 768px tablet | 480px phone | 360px small phone
════════════════════════════════════════════════════════════════ */
/* ── Portal sidebar: hidden by default on mobile, shown via overlay ── */
@media(max-width:768px){
/* Sidebar becomes a slide-in overlay drawer */
#portal .sidebar{
position:fixed!important;left:0;top:0;bottom:0;z-index:300;
width:var(--sb-w)!important;
transform:translateX(-100%)!important;
margin:0!important;border-radius:0!important;
transition:transform .28s cubic-bezier(.4,0,.2,1)!important;
box-shadow:4px 0 32px rgba(0,0,0,.4);
}
#portal .sidebar.mob-open{transform:translateX(0)!important}
/* Expand text on mobile drawer (don't need hover expand) */
#portal .sidebar .sb-item{justify-content:flex-start!important;padding:10px 12px!important;gap:12px!important}
#portal .sidebar .sb-item > span:not(.sb-item-badge),
#portal .sidebar .sb-user-info{opacity:1!important;max-width:200px!important;pointer-events:auto!important}
#portal .sidebar .sb-item-badge{opacity:1!important;max-width:40px!important;margin-left:auto!important;padding:2px 7px!important}
#portal .sidebar .sb-nav{padding:8px 12px!important}
#portal .sidebar .sb-user{justify-content:flex-start!important;margin:14px 12px 16px!important;padding:12px 14px!important;gap:12px!important}
#portal .sidebar .sb-night-btn{padding:6px 12px!important}
#portal .sidebar .sb-night-track{width:128px!important}
#portal .sidebar .sb-night-track-label{opacity:1!important}
body.night #portal .sidebar .sb-night-thumb{transform:translateX(80px)!important}
#portal .sidebar .sb-section-label{max-height:30px!important;padding:12px 8px 4px!important;opacity:1!important}
#portal .sidebar .sb-divider{margin:6px 8px!important}
/* Scrim behind drawer */
#portal .mob-scrim{
display:none;position:fixed;inset:0;z-index:299;
background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
}
#portal .mob-scrim.show{display:block}
/* Show hamburger toggle in topbar */
#portal .main .topbar{padding:12px 16px!important}
#portalHamburger{display:flex!important}
/* Main scrollarea */
#portal .main .main-scroll{padding:16px!important}
/* Shell no longer clips sidebar */
#portal .shell{overflow:visible}
}
/* Hamburger button — hidden on desktop, shown on mobile */
#portalHamburger{
display:none;width:38px;height:38px;border-radius:10px;
background:var(--row-bg);border:1px solid var(--glass-border);
color:var(--on-glass);cursor:pointer;font-size:1.1rem;
align-items:center;justify-content:center;flex-shrink:0;
transition:background .15s;
}
#portalHamburger:hover{background:rgba(37,99,235,.12)}
/* ── Nav pill bar: scrollable on small screens ── */
@media(max-width:540px){
.p-nav-bar{
flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
justify-content:flex-start;
padding:4px!important;gap:2px!important;
margin-bottom:24px!important;
}
.p-nav-bar::-webkit-scrollbar{display:none}
.psb{padding:7px 10px!important;font-size:.72rem!important;white-space:nowrap;flex-shrink:0}
.p-logo{font-size:2.4rem}
.p-grid{grid-template-columns:repeat(2,1fr)!important}
.p-inner{padding:32px 12px 60px!important}
.p-uni-badge{margin-bottom:28px}
}
@media(max-width:360px){
.psb{padding:6px 8px!important;font-size:.68rem!important}
.p-grid{grid-template-columns:1fr!important}
}
/* ── Dashboard widgets ── */
@media(max-width:600px){
.dash-canvas{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:140px!important}
.dash-greeting h1{font-size:1.5rem}
}
@media(max-width:400px){
.dash-canvas{grid-template-columns:1fr!important}
}
/* ── Profile fields ── */
@media(max-width:600px){
.profile-fields{grid-template-columns:1fr!important}
.pf-save,.profile-save-btn{grid-column:span 1!important}
.profile-hero{flex-direction:column;padding:20px}
}
/* ── AI panel: full-width bottom sheet on mobile ── */
@media(max-width:640px){
#aiPanel{
position:fixed!important;
right:0!important;left:0!important;bottom:0!important;top:auto!important;
width:100%!important;max-height:75vh;
border-left:none!important;border-radius:20px 20px 0 0;
box-shadow:0 -8px 40px rgba(0,0,0,.4)!important;
transition:transform .32s cubic-bezier(.34,1.2,.64,1),max-height .32s!important;
transform:translateY(100%);
}
#aiPanel.visible{
width:100%!important;
transform:translateY(0)!important;
border-left:none!important;
border-top:1px solid rgba(155,93,229,.25);
}
#aiResizeHandle{display:none!important}
#aiTab{
right:16px!important;top:auto!important;bottom:0!important;
transform:none!important;writing-mode:horizontal-tb!important;
padding:10px 16px!important;border-radius:12px 12px 0 0!important;
font-size:.72rem!important;letter-spacing:.04em!important;
box-shadow:0 -3px 10px rgba(155,93,229,.3)!important;
}
#aiHoverZone{display:none!important}
.ai-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
/* App view — AI panel inside portal */
#portal #aiPanel{
position:fixed!important;right:0!important;left:0!important;
bottom:0!important;top:auto!important;width:100%!important;
max-height:75vh;
}
#portal #aiPanel.visible{width:100%!important}
}
/* ── Files view (#app): topbar, sidebar, PDF ── */
@media(max-width:640px){
.topbar{padding:0 10px!important;gap:6px!important}
.tb-logo{font-size:1.05rem}
.tb-crumb{display:none!important}
.pdf-toolbar{flex-wrap:wrap;gap:4px;padding:6px 10px}
.pdf-tb-btn{padding:4px 8px!important;font-size:.68rem!important}
.pdf-zoom-pct{font-size:.68rem;padding:3px 6px}
/* Sidebar for files view: bigger tap targets */
.sidebar .sb-x-btn{width:36px;height:36px}
.sb-acc-hdr{min-height:44px}
.sb-acc-label-btn{min-height:44px}
}
/* ── Chess: responsive board + stacked layout ── */
@media(max-width:600px){
.chess-screen{padding:8px!important}
.chess-main{gap:10px!important;margin-top:4px!important}
#chessBoard{
width:min(400px,calc(100vw - 24px))!important;
height:min(400px,calc(100vw - 24px))!important;
}
.chess-panel{width:min(400px,calc(100vw - 24px))!important}
.chess-tab-body{max-height:280px!important}
.chess-overlay-box{padding:20px 24px!important}
.chess-overlay-title{font-size:1.3rem!important}
}
@media(max-width:360px){
#chessBoard{
width:calc(100vw - 16px)!important;
height:calc(100vw - 16px)!important;
}
.chess-panel{width:calc(100vw - 16px)!important}
}
/* ── Solitaire: scale down cards on small screens ── */
@media(max-width:480px){
/* Cards scale down so the full tableau fits without horizontal scroll on most phones */
.sol-pile,.sol-pile-empty,.sol-card,.sol-stacked-card{width:44px!important}
.sol-card,.sol-pile-empty{height:62px!important}
.sol-tableau{gap:4px!important}
.sol-top-row{gap:4px!important}
.sol-card-center{font-size:1rem!important}
.sol-card-rank,.sol-card-suit{font-size:.6rem!important}
}
@media(max-width:360px){
.sol-pile,.sol-pile-empty,.sol-card,.sol-stacked-card{width:38px!important}
.sol-card,.sol-pile-empty{height:54px!important}
.sol-tableau{gap:3px!important}
.sol-top-row{gap:3px!important}
}
/* ── Chat ── */
@media(max-width:480px){
.chat-rooms-panel{width:56px!important}
.chat-room-label{display:none!important}
.chat-rooms-hdr{padding:10px 6px 8px!important;font-size:0!important}
.chat-input-row{padding:8px 10px!important;gap:6px!important}
#psec-chat{height:calc(100dvh - var(--topbar-h) - 28px)!important}
}
/* ── Modals ── */
@media(max-width:520px){
.chat-friend-box{width:calc(100vw - 20px)!important;max-width:none!important;border-radius:16px!important}
.ln-modal{border-radius:16px!important;max-height:92vh!important}
.msm-box{border-radius:16px!important;max-height:92vh!important}
.ln-modal-hdr,.ln-modal-body,.ln-modal-foot,
.msm-hdr,.msm-body,.msm-foot{padding-left:16px!important;padding-right:16px!important}
#multiSumModal,#chatFriendModal,.ln-modal-bg{padding:10px!important}
}
/* ── Studip overlay ── */
@media(max-width:600px){
.sd-course-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}
}
/* ── Widget panel: full-width on very small screens ── */
@media(max-width:400px){
.widget-panel{width:calc(100vw - 28px)!important;right:-100vw!important}
.widget-panel.open{right:14px!important}
.add-widget-fab{bottom:16px!important;right:16px!important}
}
/* ── Toast: ensure bottom spacing on mobile ── */
@media(max-width:480px){
#ss-toast{bottom:16px!important;padding:10px 14px!important;font-size:.8rem}
.ss-toast-title{font-size:.78rem!important}
}
/* ── Level select grid: fewer columns on very small phone ── */
@media(max-width:360px){
.lvl-tier-row{grid-template-columns:repeat(3,1fr)!important;gap:4px!important}
}
/* ── Course overview inner padding ── */
@media(max-width:480px){
.co-inner{padding:28px 12px 40px!important}
.co-nav{margin-bottom:20px!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start}
.co-nav::-webkit-scrollbar{display:none}
.co-nav-btn{flex-shrink:0;white-space:nowrap;padding:6px 12px!important}
}
/* ── Games: shared layout ── */
@media(max-width:600px){
/* Games hub */
.games-hub-hero{padding:20px 16px 14px!important}
.games-hub-hero-title{font-size:1.5rem!important}
.games-hub-grid{grid-template-columns:1fr!important;padding:12px 14px!important;gap:10px!important}
/* All game screens */
.games-play-screen,.games-level-screen{padding:10px 12px!important}
/* Game header: stack back button on its own row, then title + status side by side */
.game-play-hdr{
flex-wrap:wrap!important;gap:8px!important;margin-bottom:12px!important;
align-items:center!important;
}
.game-back-btn{order:-1;flex-shrink:0}
.game-play-title{flex:1;min-width:0}
/* Solitaire header: stats + buttons wrap to 2 rows */
.sol-hdr-stats{
width:100%!important;
flex-wrap:wrap!important;
gap:6px!important;
margin-left:0!important;
justify-content:flex-start!important;
}
.sol-hdr-stats .tstat{padding:5px 10px!important;font-size:.75rem}
.sol-hdr-stats .tetris-start-btn{padding:6px 12px!important;font-size:.72rem!important}
/* Solitaire table: horizontal scroll with full card size preserved */
.sol-table{padding:10px 6px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.sol-tableau{gap:5px!important}
.sol-top-row{gap:5px!important;flex-wrap:nowrap!important}
/* Tetris: stack stats above board, next col beside board */
.tetris-layout{flex-direction:column!important;align-items:center!important;gap:8px!important}
.tetris-stats-col{
flex-direction:row!important;flex-wrap:wrap!important;
width:100%!important;justify-content:center!important;
gap:6px!important;min-width:0!important;order:0!important;
}
.tetris-center-col{align-items:center!important;order:1!important}
.tetris-next-col{order:2!important;min-width:0!important}
.tstat{min-width:58px!important;flex:1!important;max-width:90px!important}
/* Canvas sizing is handled by JS (initCanvas) — CSS just ensures display:block */
#tetrisCanvas{display:block!important;}
/* Flappy bird: scale canvas to fit — keep internal resolution, scale CSS display */
.bird-wrap{display:flex!important;justify-content:center!important;align-items:flex-start!important;overflow:hidden!important}
#birdCanvas{
width:min(360px,calc(100vw - 24px))!important;
height:auto!important; /* aspect ratio maintained by browser since canvas has width/height attrs */
display:block!important;
aspect-ratio:360/540!important;
}
/* Chess game header */
#gamesPlayChess .game-play-hdr{flex-wrap:wrap!important}
#gamesPlayChess .game-play-hdr > div{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:6px!important}
/* Level select */
.lvl-hero{padding:16px 14px 0!important}
.lvl-hero-title{font-size:1.4rem!important}
.lvl-hero-stats{flex-wrap:wrap!important;gap:8px!important}
.lvl-tier-row{grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
.level-btn{padding:10px 4px 8px!important}
.level-btn-num{font-size:1.4rem!important}
}
/* ── Sub/profile cards ── */
@media(max-width:480px){
.sub-grid{grid-template-columns:1fr!important}
.sub-current{flex-direction:column;gap:10px!important}
.profile-hero{padding:16px!important;gap:16px!important}
.ph-avatar{width:60px!important;height:60px!important;font-size:1.4rem!important}
}
/* ── Notifications ── */
@media(max-width:480px){
.notif-header{padding:14px 16px 12px!important}
.notif-tabs{padding:0 12px!important}
.notif-item{padding:12px 14px!important;gap:10px!important}
}
/* ── General touch improvements ── */
@media(hover:none),(pointer:coarse){
/* Minimum 44px tap targets for all buttons */
button,.psb,.sb-item,.course-row,.file-row,.co-file,
.chess-diff-btn,.chess-mode-btn,.gh-card,.level-btn,
.sb-acc-hdr,.notif-item,.chat-room-item,.chat-friend-item{
min-height:44px;
}
/* Disable hover-only transforms (can feel sticky on touch) */
.pc:hover{transform:none}
.co-file:hover{transform:none}
.ln-card:hover{transform:none}
.sd-course-card:hover{transform:none}
.chess-mode-btn:hover{transform:none}
.chess-diff-btn:hover{transform:none}
/* Improve scroll feel */
#portal .main .main-scroll,
.ai-msgs,.sb-scroll,.chat-msgs,
.chat-rooms-list,.msm-body,.ln-modal-body{
-webkit-overflow-scrolling:touch;
}
}
/* ── Solitaire Variant Picker ── */
.sol-variant-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:24px 0;max-width:780px}
.sol-vc{background:rgba(192,132,252,.1);border:2px solid rgba(192,132,252,.25);border-radius:18px;padding:24px 16px;text-align:center;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;user-select:none;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sol-vc:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(192,132,252,.25);border-color:rgba(192,132,252,.4)}
.sol-vc-icon{font-size:2.4rem;margin-bottom:10px}
.sol-vc-name{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--on-glass);margin-bottom:4px}
.sol-vc-desc{font-size:.75rem;color:var(--on-glass-muted)}
/* Spider sub-picker */
.sol-spider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:24px 0;max-width:680px}
.sol-spc{background:rgba(192,132,252,.08);border:2px solid rgba(192,132,252,.2);border-radius:18px;padding:16px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;user-select:none}
.sol-spc:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(192,132,252,.25);border-color:rgba(192,132,252,.45)}
.sol-spc-preview{background:rgba(30,20,50,.55);border-radius:10px;padding:10px 10px 6px;margin-bottom:10px;overflow:hidden}
.sol-spc-cols{display:flex;gap:5px;align-items:flex-start;height:88px}
.sol-spc-col{display:flex;flex-direction:column;flex:1}
.sol-spc-fd,.sol-spc-fu{border-radius:4px;font-size:.48rem;font-weight:700;height:14px;min-height:14px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;line-height:1}
.sol-spc-fd{background:repeating-linear-gradient(135deg,rgba(90,50,140,.5) 0px,rgba(90,50,140,.5) 3px,rgba(60,30,100,.5) 3px,rgba(60,30,100,.5) 6px);border:1px solid rgba(192,132,252,.2)}
.sol-spc-fu{background:rgba(240,235,255,.93);color:#1a1030;border:1px solid rgba(192,132,252,.3)}
.sol-spc-fu.red{color:#c0392b}
.sol-spc-name{font-family:'Fredoka One',cursive;font-size:1.05rem;color:var(--on-glass);margin-bottom:3px}
.sol-spc-desc{font-size:.72rem;color:var(--on-glass-muted)}
@media(max-width:500px){.sol-spider-grid{grid-template-columns:1fr;gap:12px}}
/* FreeCell free cell slots */
.sol-fc-cell{background:rgba(192,132,252,.06);border:2px dashed rgba(192,132,252,.25)}
/* Pyramid empty slot */
.sol-pyramid-empty{width:58px;height:82px;border-radius:8px;background:transparent}
/* Responsive variant picker */
@media(max-width:680px){
.sol-variant-grid{grid-template-columns:repeat(3,1fr);gap:10px}
}
@media(max-width:420px){
.sol-variant-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.sol-vc{padding:16px 10px}
.sol-vc-icon{font-size:1.8rem}
.sol-vc-name{font-size:.95rem}
}
/* ── Study Techniques ─────────────────────────────────────────────────────── */
.st-trigger-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border:none;border-radius:20px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(155,93,229,.3);transition:opacity .15s,transform .15s;flex-shrink:0}
.st-trigger-btn:hover{opacity:.88;transform:translateY(-1px)}
.st-mini-timer{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(155,93,229,.12);border:1.5px solid rgba(155,93,229,.25);color:var(--purple);font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0;animation:stMiniIn .3s ease}
body.night .st-mini-timer{background:rgba(155,93,229,.18);border-color:rgba(155,93,229,.35)}
.st-mini-label{font-size:.68rem;font-weight:600;color:var(--muted);margin-left:2px}
.st-mini-stop{background:none;border:none;cursor:pointer;color:var(--muted);padding:0 2px;font-size:.7rem;line-height:1;transition:color .15s}
.st-mini-stop:hover{color:#ff4040}
@keyframes stMiniIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.st-overlay{position:fixed;inset:0;z-index:4000;pointer-events:none}
.st-popup{position:absolute;top:calc(var(--topbar-h) + 6px);right:16px;width:340px;max-height:calc(100vh - var(--topbar-h) - 20px);background:var(--card);border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.18);border:1px solid rgba(155,93,229,.15);overflow-y:auto;overflow-x:hidden;transform-origin:top right;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;pointer-events:all}
body.night .st-popup{background:#1a1828;border-color:rgba(155,93,229,.25)}
.st-popup.shrinking{transform:scale(0);opacity:0}
.st-popup-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;border-bottom:1px solid rgba(155,93,229,.1)}
.st-popup-title{font-weight:800;font-size:1rem;color:var(--text)}
body.night .st-popup-title{color:#e2d9f3}
.st-popup-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:2px 6px;border-radius:6px;transition:background .15s}
.st-popup-close:hover{background:rgba(155,93,229,.1)}
.st-techniques{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px}
.st-tech-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 12px;border:1.5px solid rgba(155,93,229,.14);border-radius:14px;background:none;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.st-tech-card:hover{background:rgba(155,93,229,.07);border-color:rgba(155,93,229,.3)}
.st-tech-card.active{border-color:var(--purple);background:rgba(155,93,229,.08)}
body.night .st-tech-card{border-color:rgba(155,93,229,.2)}
body.night .st-tech-card.active{background:rgba(155,93,229,.15)}
.st-tech-icon{font-size:1.3rem}
.st-tech-name{font-size:.82rem;font-weight:800;color:var(--text)}
body.night .st-tech-name{color:#e2d9f3}
.st-tech-desc{font-size:.67rem;color:var(--muted);line-height:1.3}
.st-settings{padding:4px 16px 12px;display:flex;flex-direction:column;gap:10px}
.st-setting-row{display:flex;align-items:center;justify-content:space-between}
.st-setting-label{font-size:.78rem;color:var(--muted);font-weight:600}
.st-stepper{display:flex;align-items:center;gap:8px}
.st-step-btn{width:28px;height:28px;border:1.5px solid rgba(155,93,229,.25);border-radius:8px;background:none;cursor:pointer;font-size:1rem;color:var(--purple);font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s}
.st-step-btn:hover{background:rgba(155,93,229,.12)}
.st-step-val{font-size:.88rem;font-weight:800;color:var(--text);min-width:24px;text-align:center}
body.night .st-step-val{color:#e2d9f3}
.st-start-btn{width:calc(100% - 32px);margin:0 16px 16px;padding:12px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:.9rem;font-weight:800;cursor:pointer;transition:opacity .15s,transform .15s}
.st-start-btn:hover{opacity:.88;transform:translateY(-1px)}
.st-music-section{padding:2px 0 8px}
.st-music-sources{display:flex;gap:6px;padding:0 16px 6px}
.st-music-src{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border:1.5px solid rgba(155,93,229,.15);border-radius:12px;background:none;cursor:pointer;font-size:.7rem;font-weight:700;color:var(--muted);transition:border-color .15s,background .15s,color .15s}
.st-music-src:hover{border-color:rgba(155,93,229,.3);background:rgba(155,93,229,.06)}
.st-music-src.active{border-color:var(--purple);background:rgba(155,93,229,.1);color:var(--purple)}
body.night .st-music-src.active{background:rgba(155,93,229,.18)}
.st-music-src-icon{font-size:1.1rem}
.st-music-src-hint{font-size:.68rem;color:var(--muted);padding:0 16px 4px;min-height:18px}
.st-playlist-selector{padding:4px 16px 8px}
.st-playlist-select{width:100%;padding:8px 10px;border:1.5px solid rgba(155,93,229,.2);border-radius:10px;background:var(--bg);color:var(--text);font-size:.8rem;font-weight:600;outline:none;cursor:pointer}
body.night .st-playlist-select{background:#1a2540;border-color:rgba(155,93,229,.3);color:#e2d9f3}
.yt-pl-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:rgba(155,93,229,.06);border:1px solid rgba(155,93,229,.12);border-radius:10px;font-size:.78rem}
body.night .yt-pl-item{background:rgba(155,93,229,.1)}
.yt-pl-name{font-weight:700;color:var(--text)}
body.night .yt-pl-name{color:#e2d9f3}
.yt-pl-id{font-size:.67rem;color:var(--muted);font-family:monospace}
.yt-pl-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.8rem;padding:2px 4px;border-radius:4px;transition:color .15s}
.yt-pl-remove:hover{color:#ff4040}
.st-done-popup{background:var(--card);border-radius:24px;padding:36px 32px 28px;max-width:360px;width:90%;text-align:center;box-shadow:0 16px 60px rgba(0,0,0,.25);animation:stDoneIn .35s cubic-bezier(.34,1.56,.64,1)}
body.night .st-done-popup{background:#1a1828}
@keyframes stDoneIn{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.st-done-emoji{font-size:3rem;margin-bottom:12px}
.st-done-title{font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:10px}
body.night .st-done-title{color:#e2d9f3}
.st-done-sub{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:24px}
.st-done-actions{display:flex;flex-direction:column;gap:10px}
.st-done-btn{width:100%;padding:13px;border:none;border-radius:14px;font-size:.88rem;font-weight:800;cursor:pointer;transition:opacity .15s,transform .15s}
.st-done-btn:hover{opacity:.88;transform:translateY(-1px)}
.st-done-primary{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}
.st-done-secondary{background:rgba(155,93,229,.1);color:var(--purple);border:1.5px solid rgba(155,93,229,.2)}
body.night .st-done-secondary{background:rgba(155,93,229,.15)}
.st-music-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 14px}
.st-music-left{display:flex;align-items:center;gap:10px}
.st-music-icon{font-size:1.3rem}
.st-music-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.st-music-toggle input{opacity:0;width:0;height:0}
.st-music-track{position:absolute;inset:0;border-radius:999px;background:rgba(155,93,229,.18);transition:background .2s;cursor:pointer}
.st-music-toggle input:checked+.st-music-track{background:var(--purple)}
.st-music-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.st-music-toggle input:checked+.st-music-track .st-music-thumb{transform:translateX(18px)}
/* ── Floating Music Card ───────────────────────────────── */
@keyframes smcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#stYTHolder{position:fixed;bottom:24px;left:24px;z-index:3999;display:flex;flex-direction:column;align-items:flex-start}
.st-music-card{display:flex;flex-direction:column;align-items:center;width:200px;padding:14px 16px 16px;background:rgba(12,8,28,.92);border:1px solid rgba(192,132,252,.22);border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,.55);backdrop-filter:blur(18px);animation:smcIn .3s ease}
.smc-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:12px}
.smc-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.45);font-size:.85rem;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;padding:0}
.smc-btn:hover{background:rgba(192,132,252,.15);color:#e2c5ff}
.smc-art{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#db2777);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0}
.smc-track{width:100%;text-align:center;margin-bottom:10px}
.smc-title{font-size:.8rem;font-weight:700;color:#f0e6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px}
.smc-artist{font-size:.68rem;color:rgba(192,132,252,.7);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px}
.smc-progress-wrap{width:100%;margin-bottom:10px}
.smc-progress-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;background:linear-gradient(to right,#a855f7 var(--pct,0%),rgba(255,255,255,.12) var(--pct,0%));outline:none;cursor:pointer;margin:0}
.smc-progress-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#c084fc;box-shadow:0 0 6px rgba(168,85,247,.7);cursor:pointer;transition:transform .12s}
.smc-progress-range::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#c084fc;box-shadow:0 0 6px rgba(168,85,247,.7);cursor:pointer}
.smc-progress-range:hover::-webkit-slider-thumb{transform:scale(1.4)}
.smc-time-row{display:flex;justify-content:space-between;font-size:.6rem;color:rgba(192,132,252,.55);margin-top:4px}
.smc-controls{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.smc-ctrl{background:none;border:none;cursor:pointer;color:rgba(192,132,252,.8);font-size:1.1rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .12s;padding:0;line-height:1}
.smc-ctrl:hover{color:#e2c5ff;transform:scale(1.15)}
.smc-ctrl.smc-play{background:linear-gradient(135deg,#7c3aed,#a21caf);color:#fff;font-size:1rem;width:42px;height:42px;box-shadow:0 4px 14px rgba(124,58,237,.45)}
.smc-ctrl.smc-play:hover{transform:scale(1.1);box-shadow:0 6px 18px rgba(124,58,237,.6)}
.st-music-pill{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a21caf);border:none;cursor:pointer;font-size:1.15rem;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(124,58,237,.5);transition:transform .15s,box-shadow .15s;animation:smcIn .25s ease}
.st-music-pill:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(124,58,237,.65)}
/* Games locked during focus */
#psbGames.st-locked{opacity:.4;pointer-events:none;position:relative}
#psbGames.st-locked::after{content:'🔒';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:.7rem}
/* Music Services */
.music-service-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.music-service-info{display:flex;align-items:center;gap:12px}
.music-service-logo{width:28px;height:28px;flex-shrink:0}
.music-service-name{font-size:.88rem;font-weight:700;color:var(--text)}
body.night .music-service-name{color:#e2d9f3}
.music-service-status{font-size:.72rem;color:var(--muted);margin-top:1px}
.music-service-status.connected{color:#1DB954}
.music-connect-btn{padding:7px 16px;border:1.5px solid rgba(155,93,229,.3);border-radius:20px;background:none;color:var(--purple);font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.music-connect-btn:hover{background:rgba(155,93,229,.1);border-color:var(--purple)}
.music-connect-btn.connected{border-color:#1DB954;color:#1DB954}
.music-service-divider{height:1px;background:rgba(155,93,229,.1);margin:6px 0 14px}
.music-player-mini{background:rgba(155,93,229,.06);border:1px solid rgba(155,93,229,.14);border-radius:14px;padding:12px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
body.night .music-player-mini{background:rgba(155,93,229,.1)}
.music-now-playing{display:flex;align-items:center;gap:10px}
.music-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:rgba(155,93,229,.15)}
.music-track-name{font-size:.82rem;font-weight:700;color:var(--text)}
body.night .music-track-name{color:#e2d9f3}
.music-track-artist{font-size:.72rem;color:var(--muted)}
.music-controls{display:flex;align-items:center;gap:8px}
.music-ctrl-btn{width:34px;height:34px;border:none;border-radius:50%;background:rgba(155,93,229,.1);color:var(--purple);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.music-ctrl-btn:hover{background:rgba(155,93,229,.2)}
.music-play-btn{width:40px;height:40px;background:var(--purple);color:#fff}
.music-play-btn:hover{background:#8a4dd4}
.music-disconnect-btn{font-size:.72rem;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;align-self:flex-end}
.music-disconnect-btn:hover{color:#ff4040}
.music-yt-add-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.music-yt-input-row{display:flex;gap:8px;margin-bottom:10px}
.music-yt-input{flex:1;padding:9px 12px;border:1.5px solid rgba(155,93,229,.2);border-radius:10px;background:var(--bg);color:var(--text);font-size:.78rem;outline:none;transition:border-color .15s}
.music-yt-input:focus{border-color:var(--purple)}
body.night .music-yt-input{background:rgba(255,255,255,.05)}
.music-yt-saved{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:#1DB954;padding:4px 0}
/* ── DOCUMENT EDITOR ─────────────────────────────────────────────────────── */
.editor-portal-section{padding:14px 18px 18px;flex-direction:column;height:100%;overflow:hidden;box-sizing:border-box;}
.editor-card{display:flex;flex-direction:column;flex:1;border-radius:12px;overflow:hidden;box-shadow:0 12px 60px rgba(0,0,0,.65);background:#0f1623;min-height:0;}
/* Top bar */
.editor-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:50px;background:#0f1623;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;gap:10px;}
.editor-topbar-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.editor-topbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.editor-doc-icon{flex-shrink:0;opacity:.8;}
.editor-title-input{background:transparent;border:none;outline:none;color:rgba(255,255,255,.9);font-size:.88rem;font-weight:500;min-width:0;flex:1;cursor:default;}
.editor-title-input:not([disabled]){cursor:text;border-bottom:1px solid rgba(37,99,235,.6);}
.editor-title-input::placeholder{color:rgba(255,255,255,.3);}
.editor-back-btn{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:4px 6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0;}
.editor-back-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.editor-icon-btn{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.editor-icon-btn:hover{color:rgba(255,255,255,.7);}
body:not(.night) .editor-back-btn{color:rgba(0,0,0,.4);}
body:not(.night) .editor-back-btn:hover{background:rgba(0,0,0,.06);color:#222;}
.editor-save-badge{display:flex;align-items:center;gap:5px;background:rgba(37,99,235,.2);color:#60a5fa;font-size:.75rem;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.editor-top-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.65);font-size:.78rem;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.editor-top-btn:hover:not([disabled]){background:rgba(255,255,255,.07);color:#fff;}
.editor-top-btn[disabled]{opacity:.35;cursor:default;}
.editor-save-doc-btn{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;}
.editor-save-doc-btn:hover:not([disabled]){background:#1d4ed8!important;}
.editor-delete-btn{color:rgba(239,68,68,.7)!important;border-color:rgba(239,68,68,.2)!important;}
.editor-delete-btn:hover:not([disabled]){background:rgba(239,68,68,.1)!important;color:#ef4444!important;}
/* Export dropdown */
.ed-export-wrap{position:relative;}
.ed-export-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#1a2540;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:4px;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:500;}
.ed-export-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;border:none;background:transparent;color:rgba(255,255,255,.75);font-size:.8rem;cursor:pointer;border-radius:6px;text-align:left;transition:background .13s,color .13s;}
.ed-export-item:hover{background:rgba(37,99,235,.2);color:#fff;}
/* Export-to-course modal */
.ed-course-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;}
.ed-course-modal{background:#1a2540;border:1px solid rgba(255,255,255,.1);border-radius:14px;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.7);overflow:hidden;}
.ed-course-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);}
.ed-course-modal-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;}
.ed-course-modal-close:hover{color:#fff;}
.ed-course-modal-body{padding:18px;}
.ed-course-modal-lbl{display:block;font-size:.75rem;color:rgba(255,255,255,.45);margin-bottom:5px;}
.ed-course-modal-sel{width:100%;background:#0f1623;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:rgba(255,255,255,.8);font-size:.82rem;padding:8px 10px;cursor:pointer;}
.ed-course-modal-sel:focus{outline:none;border-color:rgba(37,99,235,.5);}
.ed-course-modal-ftr{display:flex;gap:8px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);}
.ed-course-modal-cancel{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.55);font-size:.8rem;cursor:pointer;transition:background .13s;}
.ed-course-modal-cancel:hover{background:rgba(255,255,255,.06);}
.ed-course-modal-confirm{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;border:none;background:#2563eb;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .13s;}
.ed-course-modal-confirm:hover{background:#1d4ed8;}
.ed-course-modal-confirm[disabled]{opacity:.4;cursor:default;}
body:not(.night) .ed-export-dropdown{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 8px 32px rgba(0,0,0,.15);}
body:not(.night) .ed-export-item{color:#333;}
body:not(.night) .ed-export-item:hover{background:rgba(37,99,235,.08);color:#1d4ed8;}
body:not(.night) .ed-course-modal{background:#fff;border-color:rgba(0,0,0,.1);}
body:not(.night) .ed-course-modal-hdr{color:#1a1a2e;border-bottom-color:rgba(0,0,0,.08);}
body:not(.night) .ed-course-modal-close{color:rgba(0,0,0,.35);}
body:not(.night) .ed-course-modal-lbl{color:rgba(0,0,0,.45);}
body:not(.night) .ed-course-modal-sel{background:#f4f5f9;border-color:rgba(0,0,0,.12);color:#222;}
body:not(.night) .ed-course-modal-ftr{border-top-color:rgba(0,0,0,.07);}
body:not(.night) .ed-course-modal-cancel{border-color:rgba(0,0,0,.12);color:#555;}
/* Toolbar */
.editor-toolbar{display:flex;align-items:center;padding:0 10px;height:44px;background:#131d2e;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;gap:2px;overflow-x:auto;overflow-y:hidden;}
.editor-toolbar::-webkit-scrollbar{height:3px;}
.editor-toolbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
.ed-tb-group{display:flex;align-items:center;gap:1px;flex-shrink:0;}
.ed-tb-sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 5px;flex-shrink:0;}
.ed-tb-ctx{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.ed-tb-right{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;}
.ed-tb-lbl{font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;}
.ed-tb-range{-webkit-appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.15);outline:none;cursor:pointer;width:65px;}
.ed-tb-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#2563eb;cursor:pointer;}
.ed-tool-modes{gap:1px;}
.ed-mode-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:none;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;}
.ed-mode-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
.ed-mode-btn.active{background:rgba(37,99,235,.25);color:#60a5fa;}
.ed-tool-btn{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;border-radius:5px;border:none;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;font-size:.8rem;gap:3px;transition:background .15s,color .15s;flex-shrink:0;}
.ed-tool-btn:hover:not([disabled]){background:rgba(255,255,255,.08);color:#fff;}
.ed-tool-btn.active{background:rgba(37,99,235,.25);color:#60a5fa;}
.ed-tool-btn[disabled]{opacity:.3;cursor:default;}
.ed-bold-btn{font-weight:700;} .ed-italic-btn{font-style:italic;}
.ed-tool-labeled{gap:3px;padding:0 6px;}
.ed-tb-select{background:#1a2540;border:1px solid rgba(255,255,255,.14);border-radius:5px;color:rgba(255,255,255,.8);font-size:.75rem;padding:3px 5px;cursor:pointer;height:26px;}
.ed-tb-select:focus{outline:none;border-color:rgba(37,99,235,.5);}
.ed-tb-color{width:24px;height:24px;border:none;border-radius:5px;padding:0;cursor:pointer;background:transparent;}
.ed-zoom-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:5px;color:rgba(255,255,255,.6);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:500;transition:background .15s;}
.ed-zoom-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.ed-zoom-label{font-size:.75rem;color:rgba(255,255,255,.5);min-width:38px;text-align:center;}
.ed-ann-btn,.ed-shape-btn{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;border-radius:5px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;font-size:.75rem;transition:background .15s,color .15s;}
.ed-ann-btn:hover,.ed-shape-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.ed-ann-btn.active,.ed-shape-btn.active{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.4);color:#60a5fa;}
/* Body */
.editor-body-wrap{display:flex;flex:1;min-height:0;overflow:hidden;}
.editor-pages-panel{width:152px;background:#0b1220;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.editor-pages-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.editor-pages-hdr span{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.55);}
.epg-icon-btn{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:3px;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.epg-icon-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);}
.editor-pages-list{flex:1;overflow-y:auto;padding:8px 6px;display:flex;flex-direction:column;gap:6px;}
.editor-pages-empty{font-size:.75rem;color:rgba(255,255,255,.25);text-align:center;padding:20px 0;}
.editor-page-thumb{border-radius:5px;border:2px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s;position:relative;}
.editor-page-thumb:hover{border-color:rgba(255,255,255,.2);}
.editor-page-thumb.active{border-color:#2563eb;}
.editor-page-thumb-preview{width:100%;aspect-ratio:0.707;background:#fff;border-radius:3px;overflow:hidden;}
.editor-page-thumb-lines{padding:8px 6px;display:flex;flex-direction:column;gap:3px;}
.editor-page-thumb-line{height:2px;border-radius:1px;background:#ddd;}
.editor-page-thumb-line.wide{width:100%;} .editor-page-thumb-line.mid{width:75%;} .editor-page-thumb-line.short{width:50%;}
.editor-page-thumb-num{text-align:center;font-size:.65rem;color:rgba(255,255,255,.35);padding:3px 0;}
.editor-page-thumb-actions{position:absolute;top:2px;right:2px;display:none;gap:2px;flex-direction:column;}
.editor-page-thumb:hover .editor-page-thumb-actions{display:flex;}
.ed-thumb-btn{background:rgba(15,22,35,.85);border:1px solid rgba(255,255,255,.15);border-radius:3px;color:rgba(255,255,255,.6);font-size:.65rem;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.ed-thumb-btn:hover{background:#1d2e48;color:#fff;}
/* Canvas */
.editor-canvas-wrap{flex:1;background:#111b2e;display:flex;flex-direction:column;overflow:hidden;position:relative;}
/* ── Editor home screen (doc list) ── */
.ed-home{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.ed-home-bar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 16px;flex-shrink:0;}
.ed-home-bar-left{display:flex;align-items:center;gap:10px;}
.ed-home-title{font-size:1.15rem;font-weight:700;color:rgba(255,255,255,.85);}
.ed-home-bar-right{display:flex;align-items:center;gap:8px;}
.ed-home-import-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:.8rem;cursor:pointer;transition:background .15s;}
.ed-home-import-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.ed-home-new-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;border:none;background:#2563eb;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s;}
.ed-home-new-btn:hover{background:#1d4ed8;}
.ed-home-body{flex:1;overflow-y:auto;padding:4px 28px 28px;}
.ed-home-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 0;color:rgba(255,255,255,.35);font-size:.85rem;}
.ed-home-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.1);border-top-color:#2563eb;border-radius:50%;animation:edSpin .7s linear infinite;flex-shrink:0;}
@keyframes edSpin{to{transform:rotate(360deg)}}
.ed-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.ed-home-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 0;}
.ed-home-empty-title{font-size:1rem;font-weight:600;color:rgba(255,255,255,.6);}
.ed-home-empty-sub{font-size:.8rem;color:rgba(255,255,255,.3);text-align:center;}
/* Document cards */
.ed-doc-card{position:relative;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden;}
.ed-doc-card:hover{border-color:rgba(37,99,235,.5);background:rgba(37,99,235,.07);}
.ed-doc-card-preview{background:#fff;aspect-ratio:0.707;padding:10px 8px;display:flex;flex-direction:column;gap:4px;overflow:hidden;}
.ed-doc-card-line{height:2.5px;border-radius:1px;background:#e2e8f0;}
.ed-doc-card-line.title{height:4px;background:#cbd5e1;width:70%;margin-bottom:4px;}
.ed-doc-card-line.short{width:55%;}
.ed-doc-card-info{padding:8px 10px 10px;}
.ed-doc-card-name{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ed-doc-card-date{font-size:.68rem;color:rgba(255,255,255,.35);margin-top:2px;}
.ed-doc-card-del{position:absolute;top:6px;right:6px;background:rgba(15,22,35,.75);border:1px solid rgba(255,255,255,.12);border-radius:5px;color:rgba(255,255,255,.5);width:24px;height:24px;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .12s,color .12s;}
.ed-doc-card:hover .ed-doc-card-del{display:flex;}
.ed-doc-card-del:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.3);color:#ef4444;}
/* Light mode */
body:not(.night) .ed-home-title{color:#1a1a2e;}
body:not(.night) .ed-home-import-btn{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04);color:#555;}
body:not(.night) .ed-home-import-btn:hover{background:rgba(0,0,0,.08);color:#222;}
body:not(.night) .ed-doc-card{border-color:rgba(0,0,0,.1);background:#f8faff;}
body:not(.night) .ed-doc-card:hover{border-color:#2563eb;background:rgba(37,99,235,.05);}
body:not(.night) .ed-doc-card-name{color:#1a1a2e;}
body:not(.night) .ed-doc-card-date{color:rgba(0,0,0,.35);}
body:not(.night) .ed-doc-card-del{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.15);color:rgba(0,0,0,.4);}
body:not(.night) .ed-home-empty-title{color:rgba(0,0,0,.45);}
body:not(.night) .ed-home-empty-sub{color:rgba(0,0,0,.3);}
body:not(.night) .ed-home-loading{color:rgba(0,0,0,.35);}
body:not(.night) .ed-home-spinner{border-color:rgba(0,0,0,.08);border-top-color:#2563eb;}
.editor-canvas-scroll{flex:1;overflow:auto;padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;transform-origin:top center;}
/* Page */
.ed-page-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* Custom black cursors — the system cursor turns white in dark-mode apps,
making it invisible on the white document page. SVG data-URI cursors
bypass the OS cursor colour entirely and are always dark/visible. */
.ed-page{position:relative;border-radius:2px;box-shadow:0 4px 40px rgba(0,0,0,.55);box-sizing:border-box;
cursor:url("data:image/svg+xml,") 1 1,default;}
.ed-page-content,.ed-page-content *,.ed-page-ann,.ed-page-objs{cursor:inherit!important;}
.ed-page[data-tool="text"],
.ed-page[data-tool="text"] .ed-page-content,
.ed-page[data-tool="text"] .ed-page-content *{
cursor:url("data:image/svg+xml,") 3 7,text!important;}
.ed-page[data-tool="highlight"],.ed-page[data-tool="comment"],.ed-page[data-tool="shape"]{cursor:crosshair;}
.ed-page[data-tool="highlight"] .ed-page-ann{pointer-events:all;}
.ed-page.active{outline:2px solid rgba(37,99,235,.45);outline-offset:4px;}
.ed-page-num-lbl{font-size:.68rem;color:rgba(255,255,255,.25);}
.ed-page-content{position:relative;z-index:1;min-height:100%;outline:none;word-break:break-word;line-height:1.7;font-size:11pt;color:#1a1a1a!important;caret-color:#111!important;}
.ed-page:not([data-tool="text"]) .ed-page-content{pointer-events:none;}
.ed-page-content p{margin:.25em 0;}
.ed-page-content h1{font-size:24pt;font-weight:700;margin:.4em 0 .3em;}
.ed-page-content h2{font-size:18pt;font-weight:600;margin:.4em 0 .25em;}
.ed-page-content blockquote{border-left:4px solid #c7d2fe;padding-left:14px;color:#555;margin:.5em 0;font-style:italic;}
.ed-page-content ul,.ed-page-content ol{padding-left:1.5em;margin:.3em 0;}
.ed-page-ann{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.ed-page[data-tool="highlight"] .ed-page-ann{pointer-events:all;cursor:crosshair;}
.ed-page-objs{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;}
.ed-page[data-tool="select"] .ed-page-objs,.ed-page[data-tool="shape"] .ed-page-objs{pointer-events:all;}
/* Objects */
.ed-obj{position:absolute;box-sizing:border-box;cursor:default;}
.ed-page[data-tool="select"] .ed-obj{cursor:move;}
.ed-obj.selected{outline:2px solid #2563eb;outline-offset:1px;}
.ed-obj img{pointer-events:none;user-select:none;width:100%;height:100%;object-fit:fill;display:block;}
/* Resize handles */
.ed-resize-handle{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid #2563eb;border-radius:2px;z-index:10;}
.ed-h-nw{top:-4px;left:-4px;cursor:nw-resize;} .ed-h-n{top:-4px;left:calc(50% - 4px);cursor:n-resize;} .ed-h-ne{top:-4px;right:-4px;cursor:ne-resize;}
.ed-h-e{top:calc(50% - 4px);right:-4px;cursor:e-resize;} .ed-h-se{bottom:-4px;right:-4px;cursor:se-resize;} .ed-h-s{bottom:-4px;left:calc(50% - 4px);cursor:s-resize;}
.ed-h-sw{bottom:-4px;left:-4px;cursor:sw-resize;} .ed-h-w{top:calc(50% - 4px);left:-4px;cursor:w-resize;}
/* Comments */
.ed-comment{position:absolute;z-index:5;background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;padding:7px 10px;font-size:.78rem;color:#1a1a1a;max-width:180px;word-break:break-word;box-shadow:0 3px 12px rgba(0,0,0,.25);}
.ed-comment-pin{position:absolute;top:-10px;left:8px;font-size:16px;line-height:1;}
.ed-comment-del{position:absolute;top:3px;right:5px;background:none;border:none;cursor:pointer;color:#92400e;font-size:11px;padding:0;opacity:.6;}
.ed-comment-del:hover{opacity:1;}
/* Props panel */
.editor-props-panel{width:196px;background:#0b1220;border-left:1px solid rgba(255,255,255,.07);overflow-y:auto;flex-shrink:0;}
.epp-heading{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.06);}
.epp-row{padding:8px 14px;display:flex;flex-direction:column;gap:5px;border-bottom:1px solid rgba(255,255,255,.04);}
.epp-row.epp-inline{flex-direction:row;align-items:center;justify-content:space-between;}
.epp-label{font-size:.72rem;color:rgba(255,255,255,.35);}
.epp-select{background:#1a2540;border:1px solid rgba(255,255,255,.14);border-radius:5px;color:rgba(255,255,255,.8);font-size:.75rem;padding:4px 6px;width:100%;cursor:pointer;}
.epp-num{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:5px;color:rgba(255,255,255,.7);font-size:.75rem;padding:3px 5px;width:100%;text-align:center;}
.epp-num:focus,.epp-select:focus{outline:none;border-color:rgba(37,99,235,.5);}
.epp-orient{display:flex;gap:5px;}
.epp-orient-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 3px;border-radius:5px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:.72rem;cursor:pointer;transition:background .15s,color .15s;}
.epp-orient-btn.active{background:rgba(37,99,235,.35);border-color:rgba(37,99,235,.5);color:#60a5fa;}
.epp-margins{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.epp-margin-cell{display:flex;flex-direction:column;gap:2px;}
.epp-margin-cell span{font-size:.65rem;color:rgba(255,255,255,.3);}
.epp-color{width:32px;height:24px;border:none;border-radius:5px;padding:0;cursor:pointer;background:transparent;}
.epp-switch{position:relative;display:inline-block;width:34px;height:18px;flex-shrink:0;}
.epp-switch input{opacity:0;width:0;height:0;}
.epp-track{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.15);border-radius:18px;transition:.2s;}
.epp-thumb{position:absolute;height:12px;width:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.epp-switch input:checked+.epp-track{background:#2563eb;}
.epp-switch input:checked+.epp-track .epp-thumb{transform:translateX(16px);}
.epp-desel-btn{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:12px;padding:2px 4px;}
.epp-desel-btn:hover{color:#fff;}
.epp-action-btn{flex:1;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:.72rem;cursor:pointer;transition:background .15s;}
.epp-action-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.epp-danger-btn{border-color:rgba(239,68,68,.25)!important;color:rgba(239,68,68,.7)!important;}
.epp-danger-btn:hover{background:rgba(239,68,68,.1)!important;color:#ef4444!important;}
/* Bottom bar */
.editor-bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:40px;background:#0f1623;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.editor-wordcount{font-size:.72rem;color:rgba(255,255,255,.3);}
.editor-page-nav{display:flex;align-items:center;gap:3px;}
.epn-btn{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:16px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .15s;}
.epn-btn:hover:not([disabled]){background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);}
.epn-btn[disabled]{opacity:.2;cursor:default;}
.epn-num{width:36px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.6);font-size:.75rem;padding:3px;}
.epn-num:focus{outline:none;border-color:rgba(37,99,235,.5);}
.epn-total{font-size:.75rem;color:rgba(255,255,255,.3);}
.epn-right{width:100px;}
.editor-doc-item{padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .15s;border:1px solid transparent;}
.editor-doc-item:hover{background:rgba(255,255,255,.05);}
.editor-doc-item.active{background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.25);}
.editor-doc-item-title{font-size:.8rem;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.editor-doc-item-date{font-size:.7rem;color:rgba(255,255,255,.3);margin-top:2px;}
.editor-empty-hint{font-size:.75rem;color:rgba(255,255,255,.25);text-align:center;padding:16px 0;}
/* Light mode */
body:not(.night) .editor-card{background:#f0f2f8;box-shadow:0 8px 40px rgba(0,0,0,.15);}
body:not(.night) .editor-topbar{background:#fff;border-bottom-color:rgba(0,0,0,.08);}
body:not(.night) .editor-title-input{color:#1a1a1a;}
body:not(.night) .editor-title-input::placeholder{color:rgba(0,0,0,.35);}
body:not(.night) .editor-icon-btn{color:rgba(0,0,0,.4);}
body:not(.night) .editor-top-btn{border-color:rgba(0,0,0,.13);color:#444;}
body:not(.night) .editor-top-btn:hover:not([disabled]){background:rgba(0,0,0,.05);}
body:not(.night) .editor-toolbar{background:#f4f5f9;border-bottom-color:rgba(0,0,0,.07);}
body:not(.night) .ed-mode-btn{color:rgba(0,0,0,.45);}
body:not(.night) .ed-mode-btn:hover{background:rgba(0,0,0,.06);color:#222;}
body:not(.night) .ed-mode-btn.active{background:rgba(37,99,235,.15);color:#2563eb;}
body:not(.night) .ed-tool-btn{color:#555;}
body:not(.night) .ed-tool-btn:hover:not([disabled]){background:rgba(37,99,235,.09);color:#1d4ed8;}
body:not(.night) .ed-tool-btn.active{background:rgba(37,99,235,.15);color:#2563eb;}
body:not(.night) .ed-tb-sep{background:rgba(0,0,0,.1);}
body:not(.night) .ed-tb-select{background:#fff;border-color:rgba(0,0,0,.13);color:#444;}
body:not(.night) .ed-zoom-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12);color:#555;}
body:not(.night) .ed-zoom-label{color:#666;}
body:not(.night) .ed-tb-lbl{color:rgba(0,0,0,.4);}
body:not(.night) .editor-pages-panel{background:#e9ebf4;border-right-color:rgba(0,0,0,.08);}
body:not(.night) .editor-pages-hdr{border-bottom-color:rgba(0,0,0,.08);}
body:not(.night) .editor-pages-hdr span{color:#444;}
body:not(.night) .epg-icon-btn{color:rgba(0,0,0,.4);}
body:not(.night) .epg-icon-btn:hover{background:rgba(0,0,0,.06);color:#222;}
body:not(.night) .editor-page-thumb{border-color:rgba(0,0,0,.1);}
body:not(.night) .editor-page-thumb:hover{border-color:rgba(0,0,0,.25);}
body:not(.night) .editor-page-thumb.active{border-color:#2563eb;}
body:not(.night) .editor-page-thumb-num{color:rgba(0,0,0,.35);}
body:not(.night) .editor-canvas-wrap{background:#cdd0dc;}
body:not(.night) .editor-empty-title{color:#1a1a2e;}
body:not(.night) .editor-empty-sub{color:rgba(0,0,0,.4);}
body:not(.night) .editor-empty-import{border-color:rgba(0,0,0,.15);color:#444;}
body:not(.night) .editor-props-panel{background:#e9ebf4;border-left-color:rgba(0,0,0,.08);}
body:not(.night) .epp-heading{color:rgba(0,0,0,.4);border-bottom-color:rgba(0,0,0,.07);}
body:not(.night) .epp-label{color:rgba(0,0,0,.45);}
body:not(.night) .epp-select,body:not(.night) .epp-num{background:#fff;border-color:rgba(0,0,0,.13);color:#333;}
body:not(.night) .epp-orient-btn{background:#fff;border-color:rgba(0,0,0,.12);color:#555;}
body:not(.night) .epp-track{background:rgba(0,0,0,.15);}
body:not(.night) .editor-bottom-bar{background:#fff;border-top-color:rgba(0,0,0,.08);}
body:not(.night) .epn-btn{color:rgba(0,0,0,.4);}
body:not(.night) .epn-btn:hover:not([disabled]){background:rgba(0,0,0,.06);color:#333;}
body:not(.night) .epn-num{background:#f5f5f5;border-color:rgba(0,0,0,.13);color:#333;}
body:not(.night) .epn-total{color:rgba(0,0,0,.4);}
/* ── Splash screen ──────────────────────────────────────────────────────── */
#ss-splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease;}
#ss-splash.ss-splash-out{opacity:0;pointer-events:none;}
.ss-splash-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;animation:ss-splash-in .4s ease both;}
@keyframes ss-splash-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ss-splash-icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',sans-serif;font-size:2.5rem;color:#fff;box-shadow:0 8px 32px rgba(155,93,229,.35);}
.ss-splash-name{font-family:'Fredoka One',sans-serif;font-size:1.75rem;background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ss-splash-dots{display:flex;gap:6px;margin-top:.3rem;}
.ss-splash-dots span{width:7px;height:7px;border-radius:50%;background:var(--purple);opacity:.5;animation:ss-dot-pulse 1.4s ease-in-out infinite;}
.ss-splash-dots span:nth-child(2){animation-delay:.2s;}
.ss-splash-dots span:nth-child(3){animation-delay:.4s;}
@keyframes ss-dot-pulse{0%,80%,100%{transform:scale(.72);opacity:.35}40%{transform:scale(1);opacity:1}}
body:not(.night) .editor-wordcount{color:rgba(0,0,0,.35);}
/* ── CHAT LAYOUT (glassy panels) ── */
#psec-chat{padding:12px!important;overflow:hidden;height:100%;flex-direction:row;gap:10px;box-sizing:border-box;background:linear-gradient(135deg,#0a1020 0%,#0d1628 60%,#0a1020 100%);position:relative}
#psec-chat::before{content:'';position:absolute;width:650px;height:650px;background:radial-gradient(circle,#06b6d4,transparent 65%);top:-160px;right:5%;border-radius:50%;filter:blur(80px);opacity:.6;pointer-events:none;z-index:0;animation:dc-blob-float 16s ease-in-out infinite alternate}
#psec-chat::after{content:'';position:absolute;width:550px;height:550px;background:radial-gradient(circle,#ec4899,transparent 65%);bottom:-120px;left:3%;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;z-index:0;animation:dc-blob-float 11s ease-in-out infinite alternate-reverse}
.dc-layout{display:flex;flex:1;overflow:hidden;gap:10px;position:relative;z-index:1}
/* Shared glass panel base */
.dc-panel{
background:rgba(255,255,255,.06);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,.1);
border-radius:20px;
overflow:hidden;
display:flex;flex-direction:column;
}
/* ── LEFT SIDEBAR ── */
.dc-layout{display:flex;flex:1;overflow:hidden;gap:10px}
.dc-sidebar{width:250px;min-width:220px;flex-shrink:0;display:flex;flex-direction:column;
background:rgba(14,12,32,.28);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.28);
border-radius:20px;overflow:hidden;
box-shadow:0 12px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.dc-sidebar-top{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.14)}
.dc-sidebar-title{font-family:'Fredoka One',cursive;font-size:1.2rem;background:linear-gradient(135deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:10px}
.dc-sidebar-btns{display:flex;gap:6px}
.dc-top-btn{flex:1;padding:7px 4px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:22px;cursor:pointer;transition:all .15s;white-space:nowrap}
.dc-top-btn:hover{background:rgba(192,132,252,.25);color:#c084fc;border-color:rgba(192,132,252,.4)}
.dc-sidebar-body{flex:1;overflow-y:auto;padding:10px 8px 4px;scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.2) transparent}
.dc-sidebar-section-label{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:14px 6px 4px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07)}
.dc-sidebar-section-label:first-child{border-top:none;padding-top:6px}
.dc-sidebar-footer{padding:10px 12px;border-top:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02)}
.dc-user-chip{display:flex;align-items:center;gap:10px}
.dc-user-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0;box-shadow:0 2px 10px rgba(192,132,252,.4)}
.dc-user-meta{flex:1;min-width:0}
.dc-user-name{font-size:.82rem;font-weight:800;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-user-status{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:5px}
.dc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dc-dot.online{background:#22c55e;box-shadow:0 0 6px #22c55e}
.dc-dot.offline{background:rgba(255,255,255,.2)}
.dc-cog-btn{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:.95rem;padding:5px;border-radius:8px;transition:all .15s;flex-shrink:0}
.dc-cog-btn:hover{background:rgba(192,132,252,.2);color:#c084fc}
/* Room list items */
.chat-room-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:12px;cursor:pointer;transition:all .15s;color:rgba(255,255,255,.45);font-size:.82rem;font-weight:700;position:relative}
.chat-room-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.chat-room-item.active{background:rgba(108,99,255,.28);color:#fff;font-weight:800;border:1px solid rgba(108,99,255,.4)}
.chat-room-item .chat-room-icon{width:22px;height:22px;flex-shrink:0;border-radius:6px;background:rgba(192,132,252,.18);display:flex;align-items:center;justify-content:center;font-size:.72rem}
.chat-room-item .chat-room-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-room-unread{min-width:18px;height:18px;background:linear-gradient(135deg,#c084fc,#f472b6);border-radius:9px;font-size:.6rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
/* ── MAIN CHAT AREA ── */
.dc-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;
background:rgba(14,12,32,.25);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.28);
border-radius:20px;
box-shadow:0 12px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.dc-main-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:56px;border-bottom:1px solid rgba(255,255,255,.14);flex-shrink:0;z-index:5;position:relative;background:rgba(255,255,255,.03)}
.dc-main-hdr-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-main-room-name{font-family:'Fredoka One',cursive;font-size:1.05rem;color:rgba(255,255,255,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-main-room-desc{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-main-hdr-right{display:flex;align-items:center;gap:2px;flex-shrink:0}
.dc-hdr-icon-btn{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);cursor:pointer;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .15s}
.dc-hdr-icon-btn:hover{background:rgba(192,132,252,.2);color:#c084fc}
/* Animated blobs behind messages */
.dc-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:20px}
.dc-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:dc-blob-float 14s ease-in-out infinite alternate}
.dc-blob-1{width:420px;height:420px;background:radial-gradient(circle,#06b6d4,transparent 70%);top:-80px;right:5%;animation-duration:16s}
.dc-blob-2{width:360px;height:360px;background:radial-gradient(circle,#ec4899,transparent 70%);bottom:-60px;left:8%;animation-duration:11s;animation-delay:-6s}
@keyframes dc-blob-float{from{transform:translate(0,0) scale(1)}to{transform:translate(28px,18px) scale(1.12)}}
/* Messages scroll area */
.dc-msgs{flex:1;overflow-y:auto;padding:16px 20px 10px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:2;scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.25) transparent}
.chat-empty{text-align:center;color:rgba(255,255,255,.3);font-weight:700;font-size:.9rem;margin:auto;padding:40px 20px}
.chat-date-sep{text-align:center;margin:16px 0 10px;display:flex;align-items:center;gap:10px}
.chat-date-sep::before,.chat-date-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.chat-date-sep span{font-size:.67rem;font-weight:800;color:rgba(255,255,255,.35);white-space:nowrap;padding:4px 12px;background:rgba(255,255,255,.06);border-radius:20px;border:1px solid rgba(255,255,255,.1)}
.chat-msg-group{display:flex;gap:12px;padding:4px 0;position:relative}
.chat-msg-group:hover .chat-msg-actions{opacity:1;pointer-events:auto}
.chat-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.92rem;color:#fff;flex-shrink:0;margin-top:1px;box-shadow:0 2px 10px rgba(192,132,252,.35)}
.chat-msg-body{flex:1;min-width:0}
.chat-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.chat-msg-name{font-size:.86rem;font-weight:800;color:#a78bfa}
.chat-msg-time{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.3)}
.chat-msg-text{font-size:.84rem;font-weight:600;color:rgba(255,255,255,.82);line-height:1.55;word-break:break-word}
.chat-msg-bubble{display:inline-block;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:0 16px 16px 16px;padding:9px 14px;max-width:520px}
.chat-msg-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chat-msg-reaction{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:3px 9px;font-size:.8rem;cursor:pointer;transition:all .15s;font-weight:700;color:rgba(255,255,255,.75)}
.chat-msg-reaction:hover,.chat-msg-reaction.mine{background:rgba(192,132,252,.22);border-color:rgba(192,132,252,.45)}
.chat-msg-reaction .react-count{font-size:.7rem;color:rgba(255,255,255,.5)}
/* Hover action row */
.chat-msg-actions{position:absolute;right:14px;top:-16px;display:flex;gap:2px;background:rgba(14,10,35,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:4px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.chat-act-btn{background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.88rem;transition:all .15s}
.chat-act-btn:hover{background:rgba(192,132,252,.2);color:#c084fc}
/* Reply bar */
.chat-reply-ctx{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.4);padding:3px 10px;border-left:3px solid rgba(192,132,252,.6);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Input row */
.dc-input-row{display:flex;align-items:center;gap:8px;padding:10px 14px 12px;flex-shrink:0;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
.dc-input-btn{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;color:rgba(255,255,255,.55);cursor:pointer;transition:all .15s;flex-shrink:0;font-family:'Nunito',sans-serif}
.dc-input-btn:hover:not(:disabled){background:rgba(192,132,252,.22);color:#c084fc;border-color:rgba(192,132,252,.4)}
.dc-input-btn:disabled{opacity:.3;cursor:default}
.dc-input-wrap{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:0 14px;gap:8px;min-width:0;transition:border-color .15s}
.dc-input-wrap:focus-within{border-color:rgba(192,132,252,.45)}
.dc-text-input{flex:1;background:none;border:none;outline:none;font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.85);padding:10px 0;min-width:0}
.dc-text-input::placeholder{color:rgba(255,255,255,.3)}
.dc-text-input:disabled{cursor:default}
.dc-mic-btn{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:1rem;padding:4px;border-radius:8px;transition:color .15s;flex-shrink:0}
.dc-mic-btn:hover{color:#c084fc}
.dc-send-btn{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#6c63ff,#7c3aed);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;box-shadow:0 4px 20px rgba(108,99,255,.55)}
.dc-send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 22px rgba(155,93,229,.6)}
.dc-send-btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.dc-send-btn svg{color:#fff}
/* ── RIGHT MEMBERS PANEL ── */
.dc-members-panel{width:210px;min-width:180px;flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;padding:14px 10px;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.2) transparent;
background:rgba(14,12,32,.28);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,.14);
border-top-color:rgba(255,255,255,.28);
border-radius:20px;
box-shadow:0 12px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.dc-members-section{margin-bottom:10px}
.dc-members-label{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:6px 6px 6px}
.dc-member-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:12px;cursor:default;transition:background .15s}
.dc-member-item:hover{background:rgba(255,255,255,.07)}
.dc-member-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#c084fc,#f472b6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0;position:relative}
.dc-member-av-status{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;border:2px solid rgba(10,8,18,1);background:#22c55e}
.dc-member-av-status.offline{background:rgba(255,255,255,.2)}
.dc-member-name{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-member-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dc-member-status-text{font-size:.64rem;font-weight:600;color:rgba(255,255,255,.3)}
.dc-member-badge{font-size:.56rem;font-weight:800;background:rgba(192,132,252,.2);color:#c084fc;border:1px solid rgba(192,132,252,.3);border-radius:5px;padding:1px 5px;white-space:nowrap}
/* Emoji picker */
.chat-react-emoji{font-size:1.35rem;cursor:pointer;padding:5px;border-radius:9px;transition:background .12s;line-height:1}
.chat-react-emoji:hover{background:rgba(192,132,252,.25)}
/* ── LIGHT MODE ── */
body:not(.night) .dc-sidebar,
body:not(.night) .dc-main,
body:not(.night) .dc-members-panel{
background:rgba(255,255,255,.55);
border-color:rgba(155,93,229,.15);
}
body:not(.night) .dc-sidebar-top,
body:not(.night) .dc-main-hdr,
body:not(.night) .dc-sidebar-footer{border-color:rgba(155,93,229,.1)}
body:not(.night) .dc-main-room-name,
body:not(.night) .dc-user-name{color:rgba(60,40,100,.88)}
body:not(.night) .dc-sidebar-title{background:linear-gradient(135deg,#7c3aed,#db2777);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body:not(.night) .dc-top-btn{background:rgba(155,93,229,.08);border-color:rgba(155,93,229,.18);color:rgba(60,40,100,.6)}
body:not(.night) .chat-room-item{color:rgba(60,40,100,.5)}
body:not(.night) .chat-room-item:hover{background:rgba(155,93,229,.08);color:rgba(60,40,100,.85)}
body:not(.night) .chat-room-item.active{background:rgba(155,93,229,.15);color:rgba(60,40,100,.9);border-color:rgba(155,93,229,.3)}
body:not(.night) .dc-hdr-icon-btn{color:rgba(60,40,100,.45)}
body:not(.night) .dc-hdr-icon-btn:hover{background:rgba(155,93,229,.12);color:#7c3aed}
body:not(.night) .dc-input-wrap{background:rgba(0,0,0,.04);border-color:rgba(155,93,229,.18)}
body:not(.night) .dc-text-input{color:rgba(60,40,100,.85)}
body:not(.night) .dc-text-input::placeholder{color:rgba(60,40,100,.35)}
body:not(.night) .dc-input-btn{background:rgba(0,0,0,.04);border-color:rgba(155,93,229,.15);color:rgba(60,40,100,.5)}
body:not(.night) .chat-msg-bubble{background:rgba(155,93,229,.07);border-color:rgba(155,93,229,.12)}
body:not(.night) .chat-msg-text{color:rgba(40,25,80,.82)}
body:not(.night) .chat-msg-time{color:rgba(60,40,100,.35)}
body:not(.night) .chat-date-sep span{background:rgba(155,93,229,.06);border-color:rgba(155,93,229,.12);color:rgba(60,40,100,.4)}
body:not(.night) .dc-member-name{color:rgba(60,40,100,.6)}
body:not(.night) .dc-member-av-status{border-color:#f0ecff}
body:not(.night) .dc-blob-1,.dc-blob-2{opacity:.07}
body:not(.night) .chat-msg-actions{background:rgba(240,235,255,.95);border-color:rgba(155,93,229,.2)}
body:not(.night) .chat-act-btn{color:rgba(60,40,100,.5)}
body:not(.night) .dc-members-label{color:rgba(60,40,100,.4)}
body:not(.night) .dc-sidebar-section-label{color:rgba(60,40,100,.35)}