:root,[data-theme="dark"]{
--bg:#08090f;--bg2:#0f1019;--card:rgba(255,255,255,.04);--cardh:rgba(255,255,255,.07);
--bdr:rgba(255,255,255,.08);--bdr2:rgba(255,255,255,.14);
--txt:#e2e8f0;--txt2:#94a3b8;--txt3:#475569;
--acc:#f59e0b;--acc2:#fbbf24;--acch:#d97706;--accg:rgba(245,158,11,.12);--accg2:rgba(245,158,11,.3);
--suc:#10b981;--dan:#ef4444;--inf:#06b6d4;--pur:#8b5cf6;--pink:#ec4899;
}
[data-theme="neon"]{
--bg:#04060c;--bg2:#080c18;--card:rgba(0,255,200,.035);--cardh:rgba(0,255,200,.07);
--bdr:rgba(0,255,200,.1);--bdr2:rgba(0,255,200,.2);
--txt:#c8ffe8;--txt2:#5ee8a0;--txt3:#1e6845;
--acc:#00ffc8;--acc2:#40ffda;--acch:#00ddb0;--accg:rgba(0,255,200,.1);--accg2:rgba(0,255,200,.25);
--suc:#00ffc8;--dan:#ff3860;--inf:#00c8ff;--pur:#b040ff;--pink:#ff40b0;
}
[data-theme="light"]{
--bg:#f4f5f8;--bg2:#ffffff;--card:rgba(0,0,0,.04);--cardh:rgba(0,0,0,.07);
--bdr:rgba(0,0,0,.08);--bdr2:rgba(0,0,0,.14);
--txt:#1a1d26;--txt2:#4a4f5c;--txt3:#9ca0ab;
--acc:#d9480f;--acc2:#e8590c;--acch:#c4400d;--accg:rgba(217,72,15,.1);--accg2:rgba(217,72,15,.22);
--suc:#2b8a3e;--dan:#c92a2a;--inf:#1864ab;--pur:#6741d9;--pink:#c2255c;
}
[data-theme="hacker"]{
--bg:#080808;--bg2:#0e0e0e;--card:rgba(0,255,65,.04);--cardh:rgba(0,255,65,.08);
--bdr:rgba(0,255,65,.1);--bdr2:rgba(0,255,65,.2);
--txt:#00ff41;--txt2:#00cc33;--txt3:#005518;
--acc:#00ff41;--acc2:#33ff66;--acch:#00dd38;--accg:rgba(0,255,65,.1);--accg2:rgba(0,255,65,.25);
--suc:#00ff41;--dan:#ff2020;--inf:#20ccff;--pur:#aa20ff;--pink:#ff20aa;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;transition:background .35s,color .35s}
[data-theme="hacker"] body,[data-theme="hacker"] input,[data-theme="hacker"] select,[data-theme="hacker"] textarea{font-family:'Courier New',monospace!important}
[data-theme="hacker"] h1,[data-theme="hacker"] h2,[data-theme="hacker"] h3{font-family:'Courier New',monospace!important}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--txt3);border-radius:3px}
.hid{display:none!important}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
input,select,textarea{font-family:inherit;outline:none}
.gl{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--bdr);border-radius:10px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.25),0 0 15px -3px var(--accg);transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),box-shadow 0.3s ease,border-color 0.3s ease}
@media (hover: hover) {
  .gl:not(.modalB):not(.rwB):hover{transform:scale(1.01);box-shadow:0 12px 40px 0 rgba(0,0,0,0.35),0 0 25px 2px var(--accg2);border-color:var(--bdr2)}
}

/* focus music soundwave */
.soundwave{display:inline-flex;align-items:flex-end;gap:3px;height:16px;width:24px;margin-left:4px;flex-shrink:0}
.soundwave span{display:block;width:2.5px;height:100%;background:var(--acc);border-radius:1px;transform-origin:bottom;animation:bounce 0.8s ease-in-out infinite alternate}
.soundwave span:nth-child(1){animation-delay:-0.2s;height:40%}
.soundwave span:nth-child(2){animation-delay:-0.6s;height:80%}
.soundwave span:nth-child(3){animation-delay:-0.4s;height:100%}
.soundwave span:nth-child(4){animation-delay:-0.1s;height:60%}
.soundwave span:nth-child(5){animation-delay:-0.7s;height:50%}
@keyframes bounce{0%{transform:scaleY(0.25)}100%{transform:scaleY(1)}}

/* interactive heatmap tooltip */
.hm-tooltip{position:fixed;z-index:1000;pointer-events:none;padding:10px 14px;font-size:0.72rem;color:var(--txt);box-shadow:0 8px 32px 0 rgba(0,0,0,0.3),0 0 15px var(--accg);border-color:var(--acc2);opacity:0;transform:scale(0.9) translateY(5px);transition:opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;gap:5px;min-width:160px}
.hm-tooltip.show{opacity:1;transform:scale(1) translateY(0)}
.hm-tooltip-date{font-weight:700;border-bottom:1px solid var(--bdr);padding-bottom:4px;margin-bottom:2px;color:var(--acc);font-family:'Space Grotesk',sans-serif}
.hm-tooltip-row{display:flex;align-items:center;gap:6px;color:var(--txt2)}
.hm-tooltip-row i{width:14px;text-align:center;font-size:0.75rem}
.btn{padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8rem;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:var(--acc);color:#000}.btn-p:hover{background:var(--acch);transform:translateY(-1px);box-shadow:0 4px 14px var(--accg2)}
.btn-g{background:transparent;color:var(--txt2);border:1px solid var(--bdr)}.btn-g:hover{background:var(--cardh);color:var(--txt)}
.btn-d{background:rgba(239,68,68,.12);color:var(--dan)}.btn-d:hover{background:rgba(239,68,68,.2)}
.btn-s{padding:5px 10px;font-size:.72rem}
input,select,textarea{background:var(--card);border:1px solid var(--bdr);border-radius:7px;padding:8px 11px;color:var(--txt);font-size:.8rem;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
select option{background:var(--bg2);color:var(--txt)}
label{font-size:.73rem;font-weight:600;color:var(--txt2);margin-bottom:2px;display:block}

/* AUTH */
#authScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.authBg{position:absolute;inset:0}
.authBg canvas{width:100%;height:100%}
.authBox{width:100%;max-width:390px;padding:32px;position:relative;z-index:1}
.authLogo{display:flex;justify-content:center;margin-bottom:16px}
.authLogo img{height:96px;width:96px;object-fit:contain;filter:drop-shadow(0 4px 12px var(--accg2));transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.authBox:hover .authLogo img{transform:scale(1.08) rotate(3deg)}
.authBox h1{font-size:2rem;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.authBox .sub{text-align:center;color:var(--txt2);font-size:.75rem;margin:2px 0 22px}

/* PROFILE PICKER */
.pfGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:14px;margin-top:20px;justify-content:center}
.pfCard{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .2s ease;user-select:none;position:relative}
.pfCard:hover{border-color:var(--acc);background:var(--accg);transform:translateY(-3px);box-shadow:0 6px 16px var(--accg2)}
.pfCardAv{font-size:2.2rem;margin-bottom:6px;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.15));transition:transform .2s ease}
.pfCard:hover .pfCardAv{transform:scale(1.1)}
.pfCardName{font-size:.82rem;font-weight:700;color:var(--txt);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfCardLvl{font-size:.65rem;color:var(--txt2)}
.pfCard.new{border-style:dashed}
.pfCard.new .pfCardAv{color:var(--txt3);font-size:2rem;font-weight:300}
.pfCard.new:hover .pfCardAv{color:var(--acc)}

/* ONBOARDING WIZARD */
.obWelcome{font-size:1.35rem;margin-bottom:14px;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.obProgress{height:5px;background:var(--card);border-radius:3px;overflow:hidden;margin-bottom:20px}
.obProgressBar{height:100%;background:var(--acc);border-radius:3px;transition:width .3s ease;width:20%}
.obStep{animation:fu .2s ease}
.obStep label{font-size:.85rem;font-weight:600;color:var(--txt);margin-bottom:12px;display:block;text-align:center}
.obChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.obChoiceBtn{background:var(--card);border:1px solid var(--bdr);color:var(--txt2);padding:9px;border-radius:8px;font-weight:600;font-size:.78rem;cursor:pointer;transition:all .15s ease}
.obChoiceBtn:hover{background:var(--cardh);color:var(--txt)}
.obChoiceBtn.sel{background:var(--accg);border-color:var(--acc);color:var(--acc)}
.obTgtCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.obTgtCard{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s ease}
.obTgtCard:hover{background:var(--cardh);border-color:var(--bdr2)}
.obTgtCard.sel{background:var(--accg);border-color:var(--acc);box-shadow:0 0 12px var(--accg2)}
.obTgtVal{font-size:1.25rem;font-weight:700;color:var(--txt);font-family:'Space Grotesk',sans-serif}
.obTgtCard.sel .obTgtVal{color:var(--acc)}
.obTgtLbl{font-size:.65rem;color:var(--txt2)}
.obAvGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.obAvOpt{font-size:1.8rem;padding:6px;text-align:center;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}
.obAvOpt:hover{background:var(--cardh)}
.obAvOpt.sel{border-color:var(--acc);background:var(--accg);transform:scale(1.1)}
.obControls{display:flex;justify-content:space-between;margin-top:22px;align-items:center}

/* LAYOUT */
#appScreen{display:flex;min-height:100vh}
#sidebar{width:240px;height:100vh;position:fixed;left:0;top:0;background:var(--bg2);border-right:1px solid var(--bdr);display:flex;flex-direction:column;z-index:40;transition:transform .25s,background .35s}
.sbBrand{padding:16px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:12px}
.sbBrand img{height:44px;width:44px;object-fit:contain;transition:transform 0.3s ease}
.sbBrand:hover img{transform:scale(1.1) rotate(5deg)}
.sbBrand h2{font-size:1.05rem;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sbBrand span{font-size:.58rem;color:var(--txt3);display:block}
.sbNav{flex:1;padding:8px 6px;overflow-y:auto}
.nv{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--txt2);font-size:.8rem;font-weight:500;transition:.12s;margin-bottom:1px;width:100%;background:0}
.nv:hover{background:var(--cardh);color:var(--txt)}.nv.on{background:var(--accg);color:var(--acc);font-weight:600}
.nv i{width:17px;text-align:center;font-size:.88rem}
.sbBot{padding:12px;border-top:1px solid var(--bdr)}
.sbAv{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.avCirc{width:32px;height:32px;border-radius:50%;border:2px solid var(--acc);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.sbAvInfo{flex:1;min-width:0}.sbAvN{font-size:.78rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sbAvL{font-size:.62rem;color:var(--txt3)}
.xpBar{height:5px;background:var(--card);border-radius:3px;overflow:hidden}.xpFill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:3px;transition:width .5s;position:relative}
.xpFill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:shm 2.5s infinite}
@keyframes shm{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.xpLbl{display:flex;justify-content:space-between;margin-top:2px;font-size:.56rem;color:var(--txt3)}
.sbBadges{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.sbB{display:flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:.64rem;font-weight:700}
.sbB.stk{background:rgba(249,115,22,.12);color:#f97316}
.sbB.shl{background:rgba(6,182,212,.12);color:var(--inf)}
.sbB.stk i{animation:fp 1.4s ease-in-out infinite}
@keyframes fp{0%,100%{transform:scale(1)}50%{transform:scale(1.15);opacity:.8}}

#mainArea{margin-left:240px;flex:1;min-height:100vh;display:flex;flex-direction:column;transition:margin .25s;min-width:0}
#topbar{height:54px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);background:var(--bg);position:sticky;top:0;z-index:30;transition:background .35s}
.topL h2{font-size:1rem}
.topR{display:flex;align-items:center;gap:7px}
.topBtn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--txt2);font-size:.82rem;transition:.12s;border:1px solid var(--bdr)}
.topBtn:hover{background:var(--cardh);color:var(--txt)}
.topNotif{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--dan);font-size:.45rem;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}

#content{flex:1;padding:22px;overflow-y:auto;overflow-x:hidden;padding-bottom:36px}
.vw{animation:fu .2s ease}
@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Disable .vw fade on mobile — slide transitions handle it; prevents double-animation blink */
@media(max-width:768px){.vw{animation:none}}

/* STATS */
.stG{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:18px}
.stC{padding:14px;overflow:hidden}.stI{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-bottom:8px}
.stV{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:700}.stL{color:var(--txt2);font-size:.68rem;margin-top:1px}

/* XP */
.xpO{height:9px;background:var(--card);border-radius:5px;overflow:hidden}.xpI{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);background-size:200% 100%;animation:xpA 3s linear infinite}
@keyframes xpA{0%{background-position:200% 0}100%{background-position:-200% 0}}
.xpInfo{display:flex;justify-content:space-between;margin-top:4px;font-size:.67rem;color:var(--txt2)}

/* TASKS */
.tkFil{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.fCh{padding:4px 11px;border-radius:14px;font-size:.7rem;font-weight:600;background:var(--card);color:var(--txt2);border:1px solid var(--bdr);transition:.12s}
.fCh.on,.fCh:hover{background:var(--accg);color:var(--acc);border-color:rgba(245,158,11,.22)}
.tkList{display:flex;flex-direction:column;gap:5px}
.tkI{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:9px;background:var(--card);border:1px solid var(--bdr);transition:.12s}
.tkI:hover{background:var(--cardh);border-color:var(--bdr2)}
.tkI.done{opacity:.4}.tkI.done .tkT{text-decoration:line-through}
.tkI.pin{border-left:3px solid var(--acc)}
.tkChk{width:18px;height:18px;border-radius:5px;border:2px solid var(--txt3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.12s;cursor:pointer;margin-top:1px}
.tkChk:hover{border-color:var(--acc)}
.tkChk.ck{background:var(--suc);border-color:var(--suc);color:#fff;font-size:.6rem}
.tkInf{flex:1;min-width:0}.tkT{font-weight:600;font-size:.82rem}.tkM{display:flex;gap:5px;align-items:center;margin-top:2px;font-size:.64rem;color:var(--txt3);flex-wrap:wrap}
.tkCat{padding:1px 6px;border-radius:3px;font-weight:600;font-size:.6rem;color:#fff}
.tkPri{width:3px;height:22px;border-radius:2px;flex-shrink:0;margin-top:3px}
.tkActs{display:flex;gap:1px;opacity:0;transition:.1s;flex-shrink:0}
.tkI:hover .tkActs{opacity:1}
.tkA{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:0;color:var(--txt3);font-size:.72rem;transition:.1s}
.tkA:hover{background:var(--cardh);color:var(--txt)}
.tkEmpty{text-align:center;padding:40px 14px;color:var(--txt3)}.tkEmpty i{font-size:2rem;margin-bottom:8px;opacity:.4}
.subList{margin-top:5px;margin-left:8px}
.subI{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:.72rem;color:var(--txt2)}
.subChk{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--txt3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:.5rem;transition:.1s}
.subChk.ck{background:var(--suc);border-color:var(--suc);color:#fff}

/* TIMER */
.tmWrap{display:flex;flex-direction:column;align-items:center;padding:24px 0}
.tmSVG{width:240px;height:240px;transform:rotate(-90deg)}
.tmBg{fill:none;stroke:var(--card);stroke-width:7}
.tmProg{fill:none;stroke:var(--acc);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .4s,stroke .25s}
.tmTxt{text-anchor:middle;fill:var(--txt);font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700}
.tmModes{display:flex;gap:5px;margin-bottom:24px}
.tmMode{padding:6px 16px;border-radius:16px;font-size:.76rem;font-weight:600;background:var(--card);color:var(--txt2);border:1px solid var(--bdr);transition:.12s}
.tmMode.on{background:var(--accg);color:var(--acc);border-color:rgba(245,158,11,.22)}
.tmCtrls{display:flex;gap:9px;margin-top:20px;align-items:center}
.tmBtn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:.12s}
.tmMain{width:54px;height:54px;font-size:1.1rem}
.tmSess{margin-top:16px;display:flex;gap:4px}
.tmDot{width:8px;height:8px;border-radius:50%;background:var(--card);border:1px solid var(--bdr)}.tmDot.dn{background:var(--acc);border-color:var(--acc)}
.musBar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;background:var(--card);border:1px solid var(--bdr);margin-top:18px;max-width:360px;width:100%}
.musBar select{width:100px;padding:4px 7px;font-size:.7rem}
.musBar input[type=range]{width:70px;accent-color:var(--acc);height:3px}
.musBtn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cardh);color:var(--txt2);font-size:.75rem;border:1px solid var(--bdr);transition:.12s}
.musBtn.on{background:var(--accg);color:var(--acc);border-color:var(--acc)}

/* PLANNER */
.plG{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;overflow-x:auto}
.plD{min-height:130px;padding:7px;border-radius:9px;background:var(--card);border:1px solid var(--bdr)}
.plD.tod{border-color:var(--acc);background:var(--accg)}
.plDH{font-size:.66rem;font-weight:700;color:var(--txt2);text-align:center}
.plD.tod .plDH{color:var(--acc)}
.plDN{font-size:.95rem;font-weight:700;text-align:center;margin-bottom:5px}
.plTk{padding:2px 5px;border-radius:3px;font-size:.6rem;margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600}

/* QUESTS */
.qC{padding:12px;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.qIco{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0}
.qInf{flex:1;min-width:0}.qT{font-size:.78rem;font-weight:600}
.qBar{height:4px;background:var(--card);border-radius:2px;overflow:hidden;margin-top:4px}
.qFill{height:100%;border-radius:2px;transition:width .35s}
.qMeta{display:flex;justify-content:space-between;font-size:.6rem;color:var(--txt3);margin-top:2px}
.qClaim{padding:4px 10px;border-radius:5px;font-size:.66rem;font-weight:700;background:var(--acc);color:#000;transition:.12s}
.qClaim:disabled{opacity:.35;cursor:default}

/* GOALS */
.goC{padding:18px;margin-bottom:10px}
.goH{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.goT{font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:7px}
.goBar{height:7px;background:var(--card);border-radius:4px;overflow:hidden}
.goFill{height:100%;border-radius:4px;transition:width .4s}
.goInf{display:flex;justify-content:space-between;margin-top:4px;font-size:.66rem;color:var(--txt2)}

/* ACHIEVEMENTS */
.achG{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.achC{padding:12px;text-align:center;border-radius:9px;background:var(--card);border:1px solid var(--bdr);transition:.12s}
.achC.un{border-color:rgba(245,158,11,.22);background:var(--accg)}
.achC.lk{position:relative;background:rgba(255,255,255,.015);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--bdr);overflow:hidden}
.achC.lk::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:var(--txt3);background:rgba(0,0,0,.35);transition:all .25s cubic-bezier(0.16, 1, 0.3, 1);pointer-events:none;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.achC.lk:hover::after{color:var(--acc);background:rgba(0,0,0,.2);font-size:1.6rem;backdrop-filter:none;-webkit-backdrop-filter:none}
.achC.lk .achIc,.achC.lk .achN,.achC.lk .achD{filter:blur(1.2px) grayscale(.8);opacity:.4;transition:all .25s ease}
.achC.lk:hover .achIc,.achC.lk:hover .achN,.achC.lk:hover .achD{filter:blur(0.2px) grayscale(.3);opacity:.7}
.achIc{font-size:1.4rem;margin-bottom:5px}.achC.un .achIc{color:var(--acc)}
.achN{font-size:.68rem;font-weight:700;margin-bottom:1px}.achD{font-size:.58rem;color:var(--txt3)}

/* Achievement Tooltip styling */
.ach-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  padding: 10px 14px;
  font-size: 0.72rem;
  color: var(--txt);
  box-shadow: 0 10px 30px 0 rgba(0,0,0,0.35), 0 0 15px var(--accg);
  border: 1px solid var(--acc);
  opacity: 0;
  transform: scale(0.92) translateY(6px);
  transition: opacity 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
  background: rgba(15, 16, 25, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
}
.ach-tooltip.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.ach-tooltip-title {
  font-weight: 700;
  color: var(--txt);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.ach-tooltip-req {
  color: var(--txt3);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ach-tooltip-desc {
  color: var(--txt2);
  line-height: 1.3;
}

/* Tab sliding transitions */
@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideInFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.slide-in-right { animation: slideInFromRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.slide-out-left { animation: slideOutToLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.slide-in-left { animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.slide-out-right { animation: slideOutToRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* HEATMAP */
.hmWrap{overflow-x:auto;padding:6px 0}
.hm{display:flex;gap:2px}
.hmCol{display:flex;flex-direction:column;gap:2px}
.hmCell{width:12px;height:12px;border-radius:2px;background:var(--card);border:1px solid var(--bdr);cursor:pointer;transition:.1s}
.hmCell.l1{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.22)}
.hmCell.l2{background:rgba(245,158,11,.38);border-color:rgba(245,158,11,.42)}
.hmCell.l3{background:rgba(245,158,11,.58);border-color:rgba(245,158,11,.62)}
.hmCell.l4{background:var(--acc);border-color:var(--acc)}
.hmLeg{display:flex;align-items:center;gap:3px;margin-top:6px;font-size:.6rem;color:var(--txt3)}

/* PROFILE */
.pfSec{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.avBig{width:72px;height:72px;border-radius:50%;border:3px solid var(--acc);display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--accg)}
.avOpts{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.avOpt{width:36px;height:36px;border-radius:50%;border:2px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;transition:.12s}
.avOpt:hover,.avOpt.sel{border-color:var(--acc);background:var(--accg)}
.avOpt.lk{position:relative;background:rgba(255,255,255,.015);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px dashed var(--bdr);color:var(--txt3);cursor:pointer}
.avOpt.lk::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--txt3);background:rgba(0,0,0,.3);border-radius:50%;transition:all .25s ease}
.avOpt.lk:hover::after{color:var(--acc);background:rgba(0,0,0,.15)}
.thG{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.thC{padding:12px;border-radius:9px;background:var(--card);border:2px solid var(--bdr);cursor:pointer;transition:.12s;text-align:center}
.thC:hover{border-color:var(--bdr2)}.thC.on{border-color:var(--acc);background:var(--accg)}
.thC.lk{position:relative;background:rgba(255,255,255,.015);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid var(--bdr);overflow:hidden;cursor:pointer}
.thC.lk::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:var(--txt3);background:rgba(0,0,0,.35);transition:all .25s cubic-bezier(0.16, 1, 0.3, 1);pointer-events:none;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.thC.lk:hover::after{color:var(--acc);background:rgba(0,0,0,.2);font-size:1.6rem;backdrop-filter:none;-webkit-backdrop-filter:none}
.thC.lk .thPrev,.thC.lk .thN,.thC.lk .thR{filter:blur(1.2px) grayscale(.8);opacity:.4;transition:all .25s ease}
.thC.lk:hover .thPrev,.thC.lk:hover .thN,.thC.lk:hover .thR{filter:blur(0.2px) grayscale(.3);opacity:.7}
.thPrev{height:34px;border-radius:5px;margin-bottom:6px;display:flex;overflow:hidden}
.thPrev div{flex:1}.thN{font-size:.74rem;font-weight:700}.thR{font-size:.58rem;color:var(--txt3)}

/* IDLE */
.idleB{padding:10px 14px;display:flex;align-items:center;gap:10px;border-radius:9px;background:var(--card);border:1px solid var(--bdr);margin-bottom:14px;font-size:.8rem}
.idleT{font-weight:700;color:var(--dan)}

/* MODAL */
.modalO{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;animation:mfi .12s}
@keyframes mfi{from{opacity:0}to{opacity:1}}
.modalB{width:100%;max-width:460px;max-height:86vh;overflow-y:auto;padding:22px;animation:msi .15s ease}
@keyframes msi{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modalH{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modalH h3{font-size:1rem}
.modalX{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--txt2);font-size:.82rem;transition:.1s}
.modalX:hover{background:var(--cardh);color:var(--txt)}
.mF{margin-bottom:10px}.mR{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mAct{display:flex;gap:6px;justify-content:flex-end;margin-top:16px}

/* REWARD POPUP */
.rwO{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;animation:mfi .15s}
.rwB{padding:32px 38px;text-align:center;max-width:340px;animation:rwb .4s ease}
@keyframes rwb{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.rwIc{font-size:3rem;margin-bottom:10px}
.rwTtl{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.rwDesc{font-size:.85rem;color:var(--txt2);margin:4px 0 14px}
.rwAmt{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;color:var(--acc)}
.dailyDots{display:flex;gap:5px;justify-content:center;margin:12px 0}
.ddot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;border:2px solid var(--bdr);transition:.1s}
.ddot.got{background:var(--accg);border-color:var(--acc);color:var(--acc)}
.ddot.cur{border-color:var(--acc);box-shadow:0 0 10px var(--accg2);animation:pls 1.4s infinite}
@keyframes pls{0%,100%{box-shadow:0 0 10px var(--accg2)}50%{box-shadow:0 0 20px var(--accg2)}}
.ddot.wt{opacity:.25}

/* TOAST */
#toasts{position:fixed;bottom:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.tst{padding:10px 16px;border-radius:8px;display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;animation:ti .2s ease;min-width:240px;max-width:350px;box-shadow:0 6px 20px rgba(0,0,0,.22);pointer-events:auto}
.tst.xp{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(251,191,36,.06));border:1px solid rgba(245,158,11,.22);color:var(--acc)}
.tst.ok{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);color:var(--suc)}
.tst.nf{background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.22);color:var(--inf)}
.tst.er{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);color:var(--dan)}
.tst.rw{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(236,72,153,.06));border:1px solid rgba(139,92,246,.22);color:var(--pur)}
@keyframes ti{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.tstOut{animation:to .2s ease forwards}
@keyframes to{to{opacity:0;transform:translateX(24px)}}

/* LEVEL UP */
#lvlOv{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}
.lvlC{text-align:center;animation:lb .45s ease}
@keyframes lb{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.lvlLbl{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--acc);margin-bottom:4px}
.lvlNum{font-family:'Space Grotesk',sans-serif;font-size:5rem;font-weight:700;background:linear-gradient(135deg,var(--acc),var(--acc2),#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.lvlSub{color:var(--txt2);font-size:.85rem;margin-top:8px}
.lvlP{position:absolute;width:5px;height:5px;border-radius:50%;animation:lp 1.2s ease-out forwards}
@keyframes lp{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}

/* FOCUS MODE */
#focusOv{position:fixed;inset:0;z-index:250;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}
.focusTk{font-size:1.1rem;font-weight:700;margin-bottom:30px;text-align:center;max-width:420px}
.focusExit{position:absolute;top:14px;right:14px;font-size:.74rem;color:var(--txt3)}

/* CONFETTI */
.confP{position:fixed;pointer-events:none;z-index:280}
.confI{position:absolute;width:6px;height:6px;border-radius:2px;animation:cf 1s ease-out forwards}
@keyframes cf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(320px) rotate(720deg)}}

/* SETTING */
.setR{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--bdr)}
.setL{font-weight:600;font-size:.82rem}.setD{font-size:.66rem;color:var(--txt3);margin-top:1px}
.tog{width:42px;height:23px;border-radius:12px;background:var(--card);border:1px solid var(--bdr);position:relative;cursor:pointer;transition:.15s;flex-shrink:0}
.tog.on{background:var(--acc);border-color:var(--acc)}
.tog::after{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .15s}
.tog.on::after{transform:translateX(19px)}

/* MOBILE */
#mobNav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--bg2);border-top:1px solid var(--bdr);z-index:40;padding:0 8px;align-items:center;justify-content:space-around;box-shadow:0 -4px 20px rgba(0,0,0,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mnI{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 16px;border-radius:12px;color:var(--txt3);font-size:.62rem;font-weight:600;background:0;transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);position:relative}
.mnI.on{color:var(--acc);background:var(--accg)}
.mnI i{font-size:1.15rem;transition:transform .2s ease}
.mnI.on i{transform:translateY(-2px) scale(1.06)}
#appFoot{text-align:center;padding:12px;font-size:.6rem;color:var(--txt3);border-top:1px solid var(--bdr)}

/* RESPONSIVE GRID UTILITY & FLEX HEADER */
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.topL{display:flex;align-items:center}

/* SIDEBAR OVERLAY */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:35;opacity:0;pointer-events:none;transition:opacity .3s ease}
.sidebar-overlay.active{opacity:1;pointer-events:auto}

@media(max-width:768px){
#sidebar{transform:translateX(-100%);box-shadow:10px 0 35px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),background .35s;z-index:50;top:0;bottom:60px;height:auto}
.sidebar-overlay{bottom:60px}
#mainArea{margin-left:0;width:100%;overflow-x:hidden}
#mobNav{display:flex}
#content{padding:14px;padding-top:68px;padding-bottom:76px;overflow-x:hidden}
#topbar{padding:0 12px;position:fixed;top:0;left:0;right:0;z-index:30}
.topL h2{font-size:0.95rem}
.stG{grid-template-columns:repeat(2,1fr)}
.tmSVG{width:200px;height:200px}
.pfSec{flex-direction:column;align-items:center}
.menuBtn{display:flex!important}
.grid-2col{grid-template-columns:1fr}

/* Hide bottom nav duplicates from mobile sidebar */
#sidebar .nv[data-v="dashboard"],
#sidebar .nv[data-v="tasks"],
#sidebar .nv[data-v="tools"],
#sidebar .nv[data-v="quests"],
#sidebar .nv[data-v="profile"]{display:none!important}

/* Task action buttons always visible and wrapping on mobile */
.tkI{flex-wrap:wrap}
.tkInf{flex:1;min-width:calc(100% - 30px)}
.tkActs{opacity:1!important;width:100%;justify-content:flex-end;border-top:1px solid var(--bdr);padding-top:6px;margin-top:6px}

/* Vertical weekly planner on mobile */
.plG{display:flex;flex-direction:column;gap:10px}
.plD{display:flex;flex-direction:row;align-items:center;gap:16px;padding:12px;min-height:auto}
.plDHead{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:55px;height:55px;background:var(--cardh);border-radius:8px;border:1px solid var(--bdr);flex-shrink:0}
.plDH{font-size:.68rem;text-transform:uppercase}
.plDN{font-size:1.3rem;line-height:1;margin-bottom:0}
.plDBody{flex:1;display:flex;flex-direction:column;gap:4px}
}

@media(max-width:576px){
/* Bottom Sheet Modals for Mobile */
.modalO{align-items:flex-end}
.modalB{width:100%;max-width:100%;border-radius:20px 20px 0 0;border-bottom:none;margin-bottom:0;max-height:88vh;animation:msi-mobile .32s cubic-bezier(0.1, 0.76, 0.55, 0.94) forwards}
@keyframes msi-mobile{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

@media(max-width:480px){.stG{grid-template-columns:1fr 1fr}}

/* ==========================================================
   TOOLS HUB AND SUB-APPS STYLING
   ========================================================== */

.tools-hub-title {
  margin-bottom: 20px;
}
.tools-hub-title h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.tools-hub-title p {
  font-size: 0.8rem;
  color: var(--txt2);
}

.tools-cat-sec {
  margin-bottom: 28px;
}
.tools-cat-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--txt3);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 6px;
}
[data-theme="light"] .tools-cat-title {
  color: var(--txt2);
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  cursor: pointer;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.tool-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.tool-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--cardh);
  border: 1px solid var(--bdr);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.tool-info {
  flex: 1;
  min-width: 0;
}
.tool-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 3px;
}
.tool-desc {
  font-size: 0.72rem;
  color: var(--txt2);
  line-height: 1.35;
}
.tool-card-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--bdr);
  padding-top: 8px;
  font-size: 0.65rem;
}
.tool-status {
  font-weight: 600;
  color: var(--txt3);
  transition: color 0.2s;
}
.tool-card:hover .tool-status {
  color: var(--acc);
}
.coming-soon-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bdr);
  color: var(--txt2);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Tool Detail Layout */
.tool-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 10px;
}
.tool-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tool-detail-title h3 {
  font-size: 1.1rem;
}

/* GPA Calculator UI */
.gpa-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 0;
}
.gpa-card {
  padding: 20px;
  margin-bottom: 14px;
}
.gpa-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-end;
}
.gpa-row.three-col {
  grid-template-columns: 2fr 1fr 1fr;
}
.gpa-result-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.06);
  border: 1px dashed var(--inf);
  text-align: center;
}
.gpa-result-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--inf);
  margin-top: 4px;
  font-family: 'Space Grotesk', sans-serif;
}

/* Scientific Calculator UI */
.calc-container {
  max-width: 320px;
  margin: 0 auto;
  padding: 12px;
}
.calc-screen {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: right;
  font-size: 1.5rem;
  font-family: monospace;
  min-height: 56px;
  margin-bottom: 12px;
  color: var(--acc);
  word-break: break-all;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.calc-screen-sub {
  font-size: 0.72rem;
  color: var(--txt3);
  margin-bottom: 2px;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.calc-btn {
  background: var(--card);
  border: 1px solid var(--bdr);
  color: var(--txt);
  padding: 10px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-btn:hover {
  background: var(--cardh);
  border-color: var(--bdr2);
  transform: translateY(-0.5px);
}
.calc-btn:active {
  transform: translateY(0.5px);
}
.calc-btn.op {
  color: var(--acc);
  background: rgba(245, 158, 11, 0.05);
}
.calc-btn.fn {
  color: var(--pur);
  font-size: 0.7rem;
}
.calc-btn.eq {
  background: var(--acc);
  color: #000;
  grid-column: span 2;
  font-size: 1rem;
}
.calc-btn.eq:hover {
  background: var(--acc2);
}

/* Notes UI */
.notes-container {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notes-toolbar {
  display: flex;
  gap: 6px;
  background: var(--cardh);
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--bdr);
  overflow-x: auto;
}
.notes-tool-btn {
  background: transparent;
  color: var(--txt2);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.75rem;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.notes-tool-btn:hover {
  background: var(--card);
  color: var(--txt);
  border-color: var(--bdr);
}
.notes-editor {
  min-height: 240px;
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 12px;
}
.notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--txt3);
}

/* GPA Calculator Additional Styles */
.gpa-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
  padding-bottom: 8px;
}
.gpa-tab {
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}
.gpa-tab.active {
  background: var(--inf);
  color: #000;
  border-color: var(--inf);
}
.gpa-course-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.gpa-c-name {
  flex: 1.5;
}
.gpa-c-grade {
  flex: 1;
}
.gpa-c-credits {
  width: 70px;
}

/* Notes Task Select */
.notes-task-select {
  background: var(--card);
  color: var(--txt);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.72rem;
  outline: none;
  cursor: pointer;
  max-width: 180px;
  transition: all 0.2s;
}
.notes-task-select:hover {
  border-color: var(--bdr2);
}