:root{--g1:#4f46e5;--g2:#9333ea;--angle:135deg;--grad:linear-gradient(var(--angle),var(--g1),var(--g2));
--bg:#f5f6fa;--card:#fff;--text:#1b2033;--muted:#667085;--line:#e4e7ee;--danger:#d92d20;--ok:#12805c;--warn:#b54708;
--radius:10px;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font,Inter,"Segoe UI",system-ui,sans-serif);font-size:15px;line-height:1.45;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
background:var(--bg);background:linear-gradient(var(--angle),color-mix(in srgb,var(--g1) 22%,#fff),color-mix(in srgb,var(--g2) 22%,#fff)) fixed;transition:background .3s}
button,input,select,textarea{font:inherit}
.hidden{display:none!important}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
h1,h2,h3{margin:0 0 4px;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1rem}
.muted{color:var(--muted);font-size:.88rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:8px 14px;cursor:pointer;background:var(--grad);color:#fff;font-weight:600;font-size:.9rem;transition:filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.07)}
.btn:focus-visible,.icon-btn:focus-visible,.tab:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.btn.secondary{background:#fff;color:var(--text);border-color:var(--line)}
.btn.secondary:hover{background:#f9fafb;filter:none}
.btn.danger{background:#fff;color:var(--danger);border-color:#f3c5c1}
.btn.danger:hover{background:#fef3f2;filter:none}
.btn.small{padding:5px 10px;font-size:.82rem}
.btn.block{width:100%;justify-content:center}
input,select,textarea{width:100%;padding:8px 11px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--g1) 35%,transparent);border-color:var(--g1)}
input[type=color]{padding:2px;height:36px;width:56px;cursor:pointer}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--g1)}
input[type=range]{padding:0;accent-color:var(--g1)}
label{display:block;font-size:.8rem;font-weight:600;color:#344054;margin:12px 0 5px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 150px}
.row>.btn{flex:0 0 auto}
.err{color:var(--danger);font-size:.85rem;min-height:1.2em;margin-top:8px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
button.logo-link{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;border-radius:8px}
button.logo-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.logo-mark{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;place-items:center;border:1px solid rgba(255,255,255,.35)}
.logo-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* welcome */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-hero{background:var(--grad);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-hero .logo{font-size:1.25rem}
.auth-hero h1{font-size:2.2rem;line-height:1.15;max-width:460px;margin-bottom:12px}
.auth-hero p{opacity:.88;max-width:440px;margin:0}
.auth-hero ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;opacity:.95}
.auth-hero li{display:flex;gap:10px;align-items:center}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px}
.auth-box{width:100%;max-width:380px}
.seg{display:flex;background:#eef0f5;border-radius:9px;padding:3px;margin:18px 0 6px}
.seg button{flex:1;border:0;background:transparent;padding:7px;border-radius:7px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--text);box-shadow:var(--shadow)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;margin:16px 0}
.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}

/* top bar */
.head{position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(16,24,40,.12)}
.top{background:var(--grad);color:#fff}
.cats-bar{background:#fff;border-bottom:1px solid var(--line)}
.cats-in{max-width:1080px;margin:0 auto;padding:0 20px;height:46px;display:flex;align-items:center;gap:8px}
.cats-lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px;flex:0 0 auto}
.chips{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:#344054;border-radius:99px;padding:4px 12px 4px 10px;font-size:.82rem;font-weight:550;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.chip:hover{background:#f6f7fa;border-color:#cfd4dc}
.chip .d{width:8px;height:8px;border-radius:50%}
.chip em{font-style:normal;font-size:.72rem;color:var(--muted);background:#f2f4f7;border-radius:99px;padding:0 6px}
.chip.on{background:color-mix(in srgb,var(--g1) 10%,#fff);border-color:var(--g1);color:var(--g1)}
.chip.on em{background:var(--g1);color:#fff}
.chip.add{border-style:dashed;color:var(--muted);flex:0 0 auto}
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.font-opt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;text-align:left;cursor:pointer;color:var(--text)}
.font-opt:hover{border-color:#b9c0cc}
.font-opt.sel{border-color:var(--g1);box-shadow:0 0 0 2px color-mix(in srgb,var(--g1) 25%,transparent)}
.font-opt b{display:block;font-size:1.05rem}
.font-opt span{font-size:.75rem;color:var(--muted)}
.top-in{max-width:1080px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:8px}
.top .logo{margin-right:20px}
.tabs-nav{display:flex;gap:2px;flex:1;align-items:center}
.tab{background:transparent;border:0;color:rgba(255,255,255,.85);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:550;display:flex;align-items:center;gap:6px}
.tab:hover{background:rgba(255,255,255,.14);color:#fff}
.tab.active{background:rgba(255,255,255,.22);color:#fff}
.badge{background:#fff;color:var(--g1);border-radius:99px;font-size:.7rem;font-weight:700;padding:0 6px;min-width:18px;text-align:center}
.icon-btn{background:transparent;border:0;color:#fff;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover,.icon-btn.active{background:rgba(255,255,255,.22)}
.acct{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#fff;cursor:pointer;padding:5px 8px 5px 10px;border-radius:10px;text-align:right}
.acct:hover{background:rgba(255,255,255,.14)}
.acct .who{line-height:1.2;max-width:190px}
.acct .who b{display:block;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .who span{font-size:.72rem;opacity:.8}
.avatar{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--g1);font-weight:700;display:grid;place-items:center;flex:0 0 34px}
.sep{width:1px;height:26px;background:rgba(255,255,255,.3);margin:0 6px}

main{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.page-h{margin-bottom:20px}

/* dashboard */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-top:3px solid var(--g1)}
.stat span{color:var(--muted);font-size:.82rem;font-weight:600}
.stat b{display:block;font-size:1.9rem;font-weight:700;margin-top:2px}
.progress{height:8px;background:#eceff4;border-radius:99px;overflow:hidden;margin-top:10px}
.progress>div{height:100%;background:var(--grad);border-radius:99px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2 .card{margin:0}
.grid2{margin-bottom:16px}

/* tasks */
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0;padding-bottom:0}
.task:first-child{padding-top:0}
.task input[type=checkbox]{margin-top:3px}
.task.done .t-title{text-decoration:line-through;color:var(--muted)}
.task .body{flex:1;min-width:0}
.t-title{font-weight:600;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid transparent}
.pill.Pending{background:#fffaeb;color:var(--warn);border-color:#fedf89}
.pill.Completed{background:#ecfdf3;color:var(--ok);border-color:#abefc6}
.pill.Overdue{background:#fef3f2;color:var(--danger);border-color:#fecdca}
.pill.High{background:#fef3f2;color:#b42318;border-color:#fecdca}
.pill.Medium{background:#fffaeb;color:#b54708;border-color:#fedf89}
.pill.Low{background:#eff8ff;color:#175cd3;border-color:#b2ddff}
.pill.cat{background:#f9fafb;color:#344054;border-color:var(--line)}
.pill .d{width:8px;height:8px;border-radius:50%}
.actions{display:flex;gap:6px}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:12px}
.empty{text-align:center;padding:26px 10px;color:var(--muted)}

/* settings */
.settings{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow);position:sticky;top:120px}
.side button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:9px 12px;border-radius:8px;cursor:pointer;color:#344054;font-weight:550;text-align:left}
.side button:hover{background:#f2f4f7}
.side button.on{background:color-mix(in srgb,var(--g1) 12%,#fff);color:var(--g1)}
.cat{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.cat:last-of-type{border-bottom:0}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.swatch{height:72px;border-radius:10px;border:2px solid transparent;outline:1px solid var(--line);outline-offset:2px;cursor:pointer;color:#fff;font-weight:600;font-size:.78rem;display:flex;align-items:flex-end;padding:8px}
.swatch.sel{outline:2px solid var(--text)}
.preview{height:90px;border-radius:10px;margin:14px 0}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-of-type{border-bottom:0}
.kv span{color:var(--muted)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);margin:0;cursor:pointer;font-size:.95rem;font-weight:500;color:var(--text)}
.toggle:last-child{border-bottom:0}
.toggle>span:first-child{display:flex;flex-direction:column;gap:2px}
.toggle b{font-weight:600}
input[role=switch]{appearance:none;-webkit-appearance:none;width:42px;height:24px;flex:0 0 42px;padding:0;border:0;border-radius:99px;background:#d0d5dd;position:relative;cursor:pointer;transition:background .2s}
input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
input[role=switch]:checked{background:var(--g1)}
input[role=switch]:checked::after{transform:translateX(18px)}
.about-hero{background:var(--grad);color:#fff;border:0}
.about-hero p{margin:6px 0 0;opacity:.95;max-width:62ch}
.logo-big{margin-bottom:10px;display:inline-block}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.adv{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fafbfc}
.adv b{display:block;margin:8px 0 4px}
.adv p{margin:0}
.adv-i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff}
.win{padding:12px 0;border-bottom:1px solid var(--line)}
.win:last-child{border-bottom:0;padding-bottom:0}
.win b{color:var(--g1)}
.win p{margin:2px 0 0}
.tips{margin:8px 0 0;padding-left:20px;display:grid;gap:8px;color:#344054}
kbd{background:#f2f4f7;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;font-size:.8rem}
body.compact .card{padding:14px}body.compact .task{padding:8px 0}body.compact main{padding-top:18px}body.compact .toggle{padding:8px 0}
.note{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.note:last-child{border-bottom:0}
.note .u{width:8px;height:8px;border-radius:50%;background:var(--g1);margin-top:7px;flex:0 0 8px}
.note.read .u{background:transparent}
.banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--g1);background:#fff;border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)}

/* modal / toast */
.overlay{position:fixed;inset:0;background:rgba(16,24,40,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal{background:#fff;border-radius:14px;padding:24px;max-width:520px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 40px rgba(16,24,40,.25)}
.modal .row.end{justify-content:flex-end;margin-top:20px}
.chk{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--text);margin:8px 0;font-size:.95rem}
#toast-root{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{background:#101828;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:.88rem}

@media(max-width:860px){
 .auth-wrap{grid-template-columns:1fr}.auth-hero{padding:28px}.auth-hero ul{display:none}
 .grid2{grid-template-columns:1fr}.settings{grid-template-columns:1fr}
 .side{position:static;display:flex;overflow:auto}.side button{white-space:nowrap}
 .acct .who{display:none}.top .logo span{display:none}.top .logo{margin-right:6px}
 .tab span.l{display:none}.cats-lbl{display:none}.side{top:auto}.filters{grid-template-columns:1fr}.kv{grid-template-columns:1fr}
}

/* chat */
.toast-undo{background:transparent;border:0;color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;margin-left:6px}
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:25;width:54px;height:54px;border-radius:50%;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(16,24,40,.3)}
.chat-fab svg{width:24px;height:24px}
.chat-fab:hover{filter:brightness(1.08)}
.fab-badge{position:absolute;top:-4px;right:-4px;background:#d92d20;color:#fff;border-radius:99px;font-size:.7rem;font-weight:700;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.chat-panel{position:fixed;right:22px;bottom:88px;z-index:25;width:372px;height:min(560px,calc(100vh - 110px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(16,24,40,.25);display:flex;flex-direction:column;overflow:hidden}
.chat-h{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--grad);color:#fff}
.chat-h .muted{color:rgba(255,255,255,.8);font-size:.78rem}
.icon-btn.dark{width:30px;height:30px}
.chat-actions{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-list,.chat-scroll{overflow-y:auto;flex:1}
.room{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:10px 14px;cursor:pointer;text-align:left;color:var(--text)}
.room:hover{background:#f6f7fa}
.room .rt{flex:1;min-width:0;display:flex;flex-direction:column}
.room .rt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .rt em{font-style:normal;font-size:.68rem;background:#eff8ff;color:#175cd3;border-radius:99px;padding:1px 7px;margin-left:4px}
.room .rt .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.ava{width:36px;height:36px;border-radius:50%;background:#e4e7ee;color:#344054;display:grid;place-items:center;font-weight:700;flex:0 0 36px}
.ava.group{background:color-mix(in srgb,var(--g1) 15%,#fff);color:var(--g1);border-radius:10px}
.badge-u{background:var(--g1);color:#fff;border-radius:99px;font-size:.7rem;font-weight:700;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.chat-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:.9rem}
.chat-form{padding:14px}
.chat-tabs{display:flex;border-bottom:1px solid var(--line)}
.chat-tabs button{flex:1;border:0;background:#fff;padding:9px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.chat-tabs button.on{color:var(--g1);border-bottom-color:var(--g1)}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#f8f9fb}
.msg{align-self:flex-start;max-width:82%;background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:7px 11px;font-size:.9rem;word-break:break-word}
.msg.me{align-self:flex-end;background:var(--grad);color:#fff;border:0;border-radius:12px 12px 3px 12px}
.msg .from{display:block;font-size:.7rem;font-weight:700;color:var(--g1);margin-bottom:2px}
.msg .t{display:block;font-size:.65rem;opacity:.65;text-align:right;margin-top:2px}
.share{background:rgba(127,127,127,.12);border-left:3px solid var(--g1);border-radius:6px;padding:6px 9px;margin-bottom:4px;display:flex;flex-direction:column;font-size:.82rem}
.msg.me .share{background:rgba(255,255,255,.2);border-left-color:#fff}
.sys{align-self:center;font-size:.72rem;color:var(--muted);background:#eceff4;border-radius:99px;padding:2px 10px}
.composer{padding:10px 12px;border-top:1px solid var(--line);display:grid;gap:8px;background:#fff}
.composer select{font-size:.8rem;padding:5px 8px}
@media(max-width:480px){.chat-panel{right:8px;left:8px;width:auto;bottom:80px}}

/* friends, profile, collab */
.cats-sep{width:1px;height:22px;background:var(--line);margin:0 6px;flex:0 0 1px}
.friends{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.fav{border:2px solid #fff;background:transparent;padding:0;border-radius:50%;cursor:pointer;margin-left:-8px;box-shadow:0 0 0 1px var(--line)}
.fav:first-of-type{margin-left:0}
.fav:hover{transform:translateY(-1px)}
.avimg{width:26px;height:26px;border-radius:50%;object-fit:cover;display:grid;place-items:center;flex:0 0 auto}
.avimg.ph{background:color-mix(in srgb,var(--g1) 18%,#fff);color:var(--g1);font-weight:700;font-size:.78rem}
.avimg.sm{width:20px;height:20px;font-size:.65rem}
.avimg.lg{width:84px;height:84px;font-size:2rem}
.fav .avimg{width:26px;height:26px;display:grid}
.avatar{overflow:hidden}
.avatar .avimg{width:34px;height:34px}
.ava .avimg{width:36px;height:36px}
.chip em.req{background:#d92d20;color:#fff}
.person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.person .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.person .avimg{width:34px;height:34px}
.prof{display:flex;align-items:center;gap:16px;margin:14px 0 4px}
.share-list{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;max-height:130px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin-bottom:6px}
.share-list .chk{margin:5px 0}
.people{display:flex;align-items:center;gap:4px;margin-top:5px}
.people .avimg{margin-left:-6px;border:2px solid #fff}
.people .avimg:first-child{margin-left:0}
.people .muted{margin-left:8px}
@media(max-width:860px){.friends .cats-lbl{display:none}.cats-in{overflow-x:auto}}

/* calendar */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-head h2{flex:1;text-align:center;margin:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 0}
.cal-cell{min-height:64px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;font:inherit;color:var(--text)}
.cal-cell.blank{border:0;background:transparent;cursor:default}
.cal-cell:not(.blank):hover{background:#f5f6fa}
.cal-cell.today .n{background:var(--g1);color:#fff;border-radius:99px;padding:0 7px}
.cal-cell.sel{border-color:var(--g1);box-shadow:0 0 0 2px var(--g1) inset}
.cal-cell .n{font-size:.85rem;font-weight:600}
.cal-cell .dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cal-cell .dots .d{width:8px;height:8px;border-radius:50%}
.cal-cell .dots em{font-style:normal;font-size:.68rem;color:var(--muted)}
@media(max-width:600px){.cal-cell{min-height:48px;padding:4px}}

/* calendar widget (bottom-left, mirrors chat) */
.cal-fab{position:fixed;left:22px;bottom:22px;z-index:25;width:54px;height:54px;border-radius:50%;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(16,24,40,.3)}
.cal-fab svg{width:24px;height:24px}
.cal-fab:hover{filter:brightness(1.08)}
.cal-panel{position:fixed;left:22px;bottom:88px;z-index:25;width:340px;max-height:min(560px,calc(100vh - 110px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(16,24,40,.25);display:flex;flex-direction:column;overflow:hidden}
.cal-panel .chat-h{flex:0 0 auto}
.cal-body{padding:12px;overflow-y:auto}
.cal-panel .cal-head h2{font-size:.95rem}
.cal-panel .cal-cell{min-height:40px;padding:3px 4px;gap:2px}
.cal-panel .cal-cell .n{font-size:.78rem}
.cal-panel .cal-cell .dots .d{width:6px;height:6px}
.cal-sel{margin:12px 0 6px;font-size:.88rem}
.cal-task{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:.88rem}
.cal-task .d{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
@media(max-width:480px){.cal-panel{left:8px;right:8px;width:auto;bottom:80px}}

/* ---- Voice & video calls ---- */
.chat-h .icon-btn:disabled{opacity:.4;cursor:not-allowed}
.call{position:fixed;inset:0;z-index:40;background:#0b1020;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;border:0;border-radius:0;padding:0}
.call-remote.off{width:1px;height:1px;opacity:0;pointer-events:none}
.call-who{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.call-who .avimg{width:120px;height:120px;font-size:3rem;border-radius:50%;object-fit:cover}
.call-who b{font-size:1.4rem}
.call-who span{color:rgba(255,255,255,.75)}
.call-who.pulse .avimg{animation:callpulse 1.6s ease-out infinite}
@keyframes callpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 0 0 28px rgba(255,255,255,0)}}
.call-top{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:99px;display:flex;gap:10px;align-items:center}
.call-local{position:absolute;right:16px;bottom:104px;width:132px;height:176px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.7);background:#111;transform:scaleX(-1);padding:0;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.call-bar{position:absolute;bottom:26px;left:0;right:0;display:flex;gap:16px;justify-content:center}
.call-btn{width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.call-btn:hover{background:rgba(255,255,255,.3)}
.call-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.call-btn svg{width:24px;height:24px}
.call-btn.on{background:#fff;color:#111}
.call-btn.ok{background:#16a34a}
.call-btn.end{background:#dc2626}
.call-btn.end svg{transform:rotate(135deg)}
@media(max-width:480px){.call-local{width:96px;height:128px;bottom:96px;right:10px}}

/* ---- Sharpen Your Minds quiz ---- */
.quiz label{display:block;margin:10px 0 4px;font-weight:600}
.q-text{margin:18px 0 14px;line-height:1.35}.q-text.sm{font-size:1.02rem;margin:6px 0 10px}
.q-opts{display:grid;gap:8px}
.q-opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);cursor:pointer;font:inherit}
.q-opt b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f2f4f7;font-size:.82rem}
.q-opt span{flex:1}
.q-opt:hover:not(.static){border-color:var(--g1)}
.q-opt:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.q-opt.sel{border-color:var(--g1);background:color-mix(in srgb,var(--g1) 9%,#fff)}
.q-opt.sel b{background:var(--g1);color:#fff}
.q-opt.static{cursor:default}
.q-opt em{font-style:normal;font-size:.75rem;font-weight:700}
.q-opt.right{border-color:var(--ok);background:#ecfdf3}.q-opt.right b{background:var(--ok);color:#fff}.q-opt.right em{color:var(--ok)}
.q-opt.wrong{border-color:var(--danger);background:#fef3f2}.q-opt.wrong b{background:var(--danger);color:#fff}.q-opt.wrong em{color:var(--danger)}
.q-ok{color:var(--ok);font-weight:700}.q-bad{color:var(--danger);font-weight:700}
.q-exp{margin:12px 0 0;padding:10px 12px;background:#f9fafb;border-radius:8px;font-size:.9rem}
.score{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 18px}
.score b{font-size:2.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Progress page, datesheet & strategy ---- */
.card.link{cursor:pointer;transition:box-shadow .15s,transform .15s}
.card.link:hover{box-shadow:0 6px 18px rgba(16,24,40,.12);transform:translateY(-1px)}
.card.link:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.more{color:var(--g1)}
.pbar{margin-bottom:12px}.pbar-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:.9rem}
.pbar-h .d{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.ds-prompt{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:color-mix(in srgb,var(--g1) 8%,#fff);border:1px solid color-mix(in srgb,var(--g1) 30%,#fff);border-radius:10px;padding:12px;margin-bottom:12px}
.sch{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.sch.today{background:color-mix(in srgb,var(--g1) 6%,#fff);margin:0 -10px;padding:10px;border-radius:8px}
.sch-d{flex:0 0 118px;display:flex;flex-direction:column;gap:2px}
.sch-d em{font-style:normal;font-size:.7rem;font-weight:700;color:var(--g1)}.sch-d em.heavy{color:var(--warn)}
.sch-b{flex:1;display:grid;gap:6px;min-width:0}
.sch-s{display:flex;align-items:center;gap:10px}
.sch-ex{font-weight:700;color:var(--danger)}
.ph{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px}
.ph.Learn{background:#dbeafe;color:#1d4ed8}.ph.Practice{background:#fef3c7;color:#92400e}.ph.Revise{background:#dcfce7;color:#166534}
@media(max-width:480px){.sch{flex-direction:column;gap:4px}.sch-d{flex:none;flex-direction:row;gap:8px;align-items:center}}

/* ---- Datesheet table ---- */
.modal:has(.ds){max-width:680px;width:100%;max-height:92vh;overflow:auto}
.ds-head,.ds-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,.9fr) 34px;gap:8px;align-items:center}
.ds-head{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.ds-row{margin-bottom:8px}
.icon-x{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.icon-x:hover{background:#fef3f2;color:var(--danger)}
.icon-x svg{width:18px;height:18px}
@media(max-width:560px){.ds-head{display:none}.ds-row{grid-template-columns:1fr 1fr 34px;padding-bottom:8px;border-bottom:1px solid var(--line)}.ds-row [data-ds=subject]{grid-column:1/-1}}

/* ---- Lessons step & dashboard datesheet ---- */
.ls-block{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
.ls-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ls-block label{display:block;margin:8px 0 4px;font-weight:600;font-size:.88rem}
.ls-num{max-width:140px}
.ls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
@media(max-width:560px){.ls-grid{grid-template-columns:1fr}}
.sch-t{color:var(--muted);font-size:.85rem;min-width:0;overflow-wrap:anywhere}
.exrow{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.exd{flex:0 0 46px;height:50px;border-radius:10px;background:var(--grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.exd b{font-size:1.15rem}.exd span{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}

/* ---- Datesheet editor (inline on the strategy page) ---- */
.dx-card{padding:14px 16px}
.dx-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) 34px;gap:10px;align-items:end}
.dx-grid label,.dx-les{margin-top:0}
.dx-les{margin-top:10px}
.dx-les textarea{resize:vertical;min-height:64px;font-weight:400}
.dx-grid label input,.dx-grid label select{margin-top:5px;font-weight:400}
@media(max-width:620px){.dx-grid{grid-template-columns:1fr 34px}.dx-grid label:first-child{grid-column:1/-1}}

/* ---- Prep strategy: small datesheet column ---- */
.sp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.sp-main{min-width:0}
.sp-side{position:sticky;top:90px;padding:14px}
.sp-side h3{margin-bottom:10px;font-size:1rem}
.sp-ex{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.sp-ex:first-of-type{border-top:0}
@media(max-width:820px){.sp-wrap{grid-template-columns:1fr}.sp-side{position:static;order:-1}}

/* ---- Daily diary ---- */
.diary textarea{resize:vertical;min-height:90px}
.diary-past{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.diary-past summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--muted)}
.diary-e{padding:10px 0;border-bottom:1px solid var(--line)}
.diary-e:last-child{border-bottom:0}
.diary-e p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}

/* =====================================================================
   Professional polish layer (overrides – keeps theme colours/fonts)
   ===================================================================== */
:root{--radius:14px;--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06);--shadow-lg:0 2px 4px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.12);--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
::selection{background:color-mix(in srgb,var(--g1) 28%,#fff)}
body{letter-spacing:.005em;text-rendering:optimizeLegibility}
h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
h2{font-weight:700;letter-spacing:-.015em}
h3{font-weight:650}
.page-h h1{background:linear-gradient(135deg,var(--text),color-mix(in srgb,var(--g1) 60%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cards */
.card{border:1px solid rgba(228,231,238,.9);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(6px);padding:22px;transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s}
.card:hover{box-shadow:var(--shadow-lg)}
.card.link{cursor:pointer}
.card.link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--g1) 35%,var(--line))}
.card.link:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
.more{color:var(--g1)}
.empty{color:var(--muted);text-align:center;padding:18px 8px;font-size:.92rem}

/* stats */
.stat{position:relative;overflow:hidden;border:1px solid rgba(228,231,238,.9);border-top:0;background:rgba(255,255,255,.92);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat b{font-size:2.1rem;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}

/* buttons */
.btn{border-radius:10px;padding:9px 16px;box-shadow:0 1px 2px rgba(16,24,40,.12),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s var(--ease),box-shadow .2s,filter .15s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--g1) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.btn.secondary{box-shadow:0 1px 2px rgba(16,24,40,.06);background:#fff}
.btn.secondary:hover{box-shadow:0 4px 12px rgba(16,24,40,.1);border-color:#cfd4dc}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.small{border-radius:8px}

/* inputs */
input,select,textarea{border-radius:10px;border-color:#d6dae3;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#b9c0cc}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--g1);box-shadow:0 0 0 4px color-mix(in srgb,var(--g1) 16%,transparent)}
label{letter-spacing:.01em}

/* header & nav */
.head{box-shadow:0 4px 18px rgba(16,24,40,.16)}
.top{backdrop-filter:blur(8px)}
.tab{border-radius:10px;transition:background .18s,color .18s}
.tab.active{background:rgba(255,255,255,.26);box-shadow:inset 0 -2px 0 rgba(255,255,255,.85)}
.logo-mark{background:rgba(255,255,255,.22);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.cats-bar{background:rgba(255,255,255,.96);backdrop-filter:blur(6px)}
.chip{transition:background .15s,border-color .15s,transform .15s}
.chip:hover{transform:translateY(-1px)}

/* tasks & pills */
.task{transition:background .15s;border-radius:10px}
.pill{letter-spacing:.02em}
.progress{height:10px;background:#e8ebf2}
.progress>div{transition:width .6s var(--ease)}

/* modal & toast */
.overlay{backdrop-filter:blur(4px);animation:pFade .18s ease}
.modal{border-radius:18px;box-shadow:0 30px 70px rgba(16,24,40,.35);animation:pPop .25s var(--ease)}
#toast-root>*{border-radius:12px;box-shadow:var(--shadow-lg)}

/* modal/overlay keyframes */
@keyframes pFade{from{opacity:0}to{opacity:1}}
@keyframes pPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c3c9d6 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c3c9d6;border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#a8b0c0;background-clip:padding-box;border:2px solid transparent}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* =====================================================================
   Polish layer 2 – welcome page, tasks, settings, details
   ===================================================================== */

/* welcome / sign-in */
.auth-wrap{background:#f6f7fb}
.auth-hero{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(900px 500px at 15% -10%,rgba(255,255,255,.22),transparent 60%),radial-gradient(700px 480px at 100% 110%,rgba(255,255,255,.18),transparent 60%),var(--grad)}
.auth-hero:before,.auth-hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.08)}
.auth-hero:before{width:420px;height:420px;right:-140px;top:-120px}
.auth-hero:after{width:300px;height:300px;left:-90px;bottom:-90px;background:rgba(255,255,255,.06)}
.auth-hero h1{font-size:2.6rem;line-height:1.1;letter-spacing:-.03em;font-weight:750;background:none;color:#fff;-webkit-text-fill-color:#fff}
.auth-hero p{font-size:1.05rem;line-height:1.55}
.auth-hero li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 14px;backdrop-filter:blur(6px);transition:transform .2s var(--ease),background .2s;max-width:420px}
.auth-hero li:hover{transform:translateX(4px);background:rgba(255,255,255,.18)}
.auth-hero li svg{background:rgba(255,255,255,.22);border-radius:50%;padding:3px;width:22px;height:22px}
.auth-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 32px;box-shadow:0 24px 60px rgba(16,24,40,.12)}
.auth-box h1{font-size:1.6rem;background:none;color:var(--text);-webkit-text-fill-color:var(--text)}
.seg{background:#eef0f6;border-radius:12px;padding:4px}
.seg button{border-radius:9px;transition:background .15s,color .15s,box-shadow .15s}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr}.auth-hero{padding:32px 24px;gap:22px}.auth-hero h1{font-size:2rem}.auth-box{padding:26px 22px}}

/* dashboard & lists */
.page-h{padding-bottom:4px}
.task{padding:12px 10px;margin:0 -10px}
.task:hover{background:color-mix(in srgb,var(--g1) 5%,#fff)}
.task:first-child{padding-top:12px}
.t-title{letter-spacing:-.005em}
input[type=checkbox]{border-radius:5px;cursor:pointer;transition:transform .12s}
input[type=checkbox]:active{transform:scale(.88)}
.exrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.exrow:first-of-type{border-top:0}
.exd{width:46px;height:50px;border-radius:12px;flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;
  background:color-mix(in srgb,var(--g1) 10%,#fff);color:var(--g1);border:1px solid color-mix(in srgb,var(--g1) 22%,#fff)}
.exd b{font-size:1.15rem}.exd span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.diary textarea{background:#fcfcfe;line-height:1.6}
.diary-e{border-bottom:1px dashed var(--line)}

/* strategy page */
.ex-card{border-left:4px solid var(--g1)}
.sch{border-radius:12px;transition:background .15s}
.sch:hover{background:color-mix(in srgb,var(--g1) 4%,#fff)}
.sp-side{border-top:4px solid var(--g1)}
.ph{border-radius:99px;font-weight:700;letter-spacing:.03em}

/* settings */
.side{border-radius:16px;padding:10px}
.side button{border-radius:10px;transition:background .15s,color .15s,transform .15s}
.side button:hover{transform:translateX(2px)}
.side button.on{box-shadow:inset 3px 0 0 var(--g1)}
.adv{background:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.adv:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.about-hero{border-radius:18px;box-shadow:0 18px 40px color-mix(in srgb,var(--g1) 30%,transparent)}
.banner{border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--g1) 8%,#fff),#fff)}
.swatch{transition:transform .15s var(--ease)}
.swatch:hover{transform:scale(1.03)}

/* floating buttons & chat/calendar panels */
.cal-fab{box-shadow:0 10px 26px color-mix(in srgb,var(--g1) 45%,transparent);transition:transform .2s var(--ease),box-shadow .2s}
.cal-fab:hover{transform:scale(1.08) translateY(-2px)}
.cal-panel{border-radius:18px;box-shadow:0 24px 60px rgba(16,24,40,.28)}
.cal-cell{transition:background .12s}

/* footer breathing room & focus visibility */
main{padding-bottom:90px}
:focus-visible{outline:2px solid var(--g1);outline-offset:2px}

/* =====================================================================
   Theme-driven page background: follows the chosen colours + angle live
   ===================================================================== */
body{background:
  radial-gradient(900px 600px at 8% -5%,color-mix(in srgb,var(--g1) 34%,transparent),transparent 65%),
  radial-gradient(800px 600px at 100% 105%,color-mix(in srgb,var(--g2) 34%,transparent),transparent 65%),
  linear-gradient(var(--angle),color-mix(in srgb,var(--g1) 16%,#fff),color-mix(in srgb,var(--g2) 16%,#fff)) fixed;
  background-attachment:fixed;transition:background .4s}
.auth-wrap{background:transparent}
.auth-form{background:transparent}
.cats-bar{background:color-mix(in srgb,var(--g1) 5%,rgba(255,255,255,.96))}

/* =====================================================================
   Modern dashboard
   ===================================================================== */
.dash-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:radial-gradient(500px 260px at 90% -20%,rgba(255,255,255,.28),transparent 60%),var(--grad);color:#fff;border-radius:22px;padding:28px 30px;margin-bottom:18px;
  box-shadow:0 20px 44px color-mix(in srgb,var(--g1) 34%,transparent)}
.dash-hero:after{content:"";position:absolute;z-index:-1;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.1);right:-70px;bottom:-130px}
.dash-hero h1{color:#fff;-webkit-text-fill-color:#fff;background:none;font-size:2rem;font-weight:750;letter-spacing:-.03em;margin:4px 0 6px}
.dash-hero p{margin:0;opacity:.92;max-width:52ch}
.dh-date{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.btn.light{background:#fff;color:var(--g1);box-shadow:0 8px 20px rgba(0,0,0,.18);padding:11px 20px}
.btn.light:hover{box-shadow:0 12px 26px rgba(0,0,0,.25)}

.stats{gap:16px}
.stat{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px}
.stat:before{display:none}
.stat>i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 48px;font-style:normal;color:#fff;background:var(--grad);box-shadow:0 8px 18px color-mix(in srgb,var(--g1) 28%,transparent)}
.stat>i svg{width:22px;height:22px}
.stat.s-over>i{background:linear-gradient(135deg,#f97066,#d92d20);box-shadow:0 8px 18px rgba(217,45,32,.28)}
.stat.s-done>i{background:linear-gradient(135deg,#32d583,#12805c);box-shadow:0 8px 18px rgba(18,128,92,.28)}
.stat.s-today>i{background:linear-gradient(135deg,#fdb022,#dc6803);box-shadow:0 8px 18px rgba(220,104,3,.28)}
.stat b{margin-top:0;font-size:2rem;line-height:1.1}

.prog-card{display:flex;align-items:center;gap:22px;border-radius:18px}
.ring{--p:0;width:96px;height:96px;border-radius:50%;flex:0 0 96px;display:grid;place-items:center;
  background:conic-gradient(var(--g1),var(--g2) calc(var(--p)*1%),#e8ebf2 0)}
.ring span{width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:750;font-size:1.25rem;letter-spacing:-.02em}
.pc-body{flex:1;min-width:0}
.pc-body .progress{margin:10px 0 8px}

.dash-hero~.card,.stats~.card{border-radius:18px}
.grid2 .card{border-radius:18px}
@media(max-width:560px){.dash-hero{padding:22px 20px;border-radius:18px}.dash-hero h1{font-size:1.5rem}.prog-card{flex-direction:column;align-items:flex-start}}

/* =====================================================================
   Modern layer 3 – tasks, notifications, settings, quiz, chat, calendar
   ===================================================================== */

/* page headers: accent underline */
.page-h h1{position:relative;padding-bottom:10px}
.page-h h1:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;border-radius:99px;background:var(--grad)}
.dash-hero h1:after{display:none}

/* tasks page */
.filters{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.filters input,.filters select{background:#f8f9fc;border-color:transparent}
.filters input:focus,.filters select:focus{background:#fff}
.task{border:1px solid transparent;border-radius:14px;border-bottom:1px solid var(--line)}
.task:hover{border-color:color-mix(in srgb,var(--g1) 18%,var(--line));box-shadow:0 4px 14px rgba(16,24,40,.06)}
.task.done{opacity:.7}
.actions .btn,.actions .icon-btn{border-radius:9px}
.pill{padding:3px 10px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pill.cat{text-transform:none;letter-spacing:0;font-weight:600}

/* notifications */
.note{padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;transition:box-shadow .2s,transform .2s}
.note:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.note:last-child{border-bottom:1px solid var(--line)}
.note:not(.read){border-left:4px solid var(--g1);background:color-mix(in srgb,var(--g1) 4%,#fff)}
.note .u{box-shadow:0 0 0 4px color-mix(in srgb,var(--g1) 18%,transparent)}

/* settings */
.kv{border-bottom:1px solid var(--line);padding:12px 0}
.toggle{padding:14px 0}
input[role=switch]{width:46px;height:26px;flex:0 0 46px;background:#d6dae3;box-shadow:inset 0 1px 3px rgba(16,24,40,.15)}
input[role=switch]::after{width:20px;height:20px;transition:transform .22s var(--ease)}
input[role=switch]:checked{background:var(--grad)}
input[role=switch]:checked::after{transform:translateX(20px)}
.font-opt,.swatch{border-radius:14px}
.font-opt{transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.font-opt:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.preview{border-radius:16px;box-shadow:0 12px 28px color-mix(in srgb,var(--g1) 25%,transparent)}
.cat{padding:11px 4px;border-radius:10px;transition:background .15s}
.cat:hover{background:color-mix(in srgb,var(--g1) 4%,#fff)}

/* quiz */
.quiz{border-radius:20px}
.q-opt{border-radius:14px;padding:13px 16px;border-width:1.5px;transition:transform .15s var(--ease),border-color .15s,background .15s,box-shadow .15s}
.q-opt:hover:not(.static){transform:translateX(3px);box-shadow:var(--shadow)}
.q-opt b{background:#eef0f6;font-weight:700}
.q-exp{border-radius:12px;border-left:3px solid var(--g1)}
.score b{font-size:3.2rem;letter-spacing:-.03em}

/* toast */
.toast{background:rgba(16,24,40,.94);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px 16px;animation:pPop .25s var(--ease)}

/* chat */
.chat-fab,.cal-fab{width:58px;height:58px;box-shadow:0 12px 30px color-mix(in srgb,var(--g1) 45%,transparent);transition:transform .2s var(--ease),box-shadow .2s}
.chat-fab:hover{transform:scale(1.08) translateY(-2px);filter:none}
.chat-panel,.cal-panel{border-radius:20px;border:1px solid rgba(228,231,238,.8);box-shadow:0 28px 70px rgba(16,24,40,.28);animation:pPop .25s var(--ease)}
.chat-h{padding:14px 16px}
.room{transition:background .15s}
.room:hover{background:color-mix(in srgb,var(--g1) 5%,#fff)}
.msgs{background:linear-gradient(180deg,#f8f9fc,#f1f3f9)}
.msg{box-shadow:0 1px 2px rgba(16,24,40,.06);border-radius:16px 16px 16px 4px}
.msg.me{border-radius:16px 16px 4px 16px;box-shadow:0 4px 12px color-mix(in srgb,var(--g1) 30%,transparent)}
.chat-tabs button{transition:color .15s,border-color .15s}

/* calendar */
.cal-cell{border-radius:12px;border-color:transparent;background:#f6f7fb}
.cal-cell:not(.blank):hover{background:color-mix(in srgb,var(--g1) 8%,#fff)}
.cal-cell.today .n{background:var(--grad);padding:1px 8px}
.cal-cell.sel{border-color:var(--g1);background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--g1) 25%,transparent)}
.cal-task{border-radius:10px}

/* modals */
.modal h2{font-size:1.35rem}
.modal .row.end{gap:10px}
.modal label{margin-top:14px}

/* friends / avatars */
.avimg.ph,.avatar{box-shadow:0 2px 6px rgba(16,24,40,.12)}
.person{padding:10px 6px;border-radius:12px;transition:background .15s}
.person:hover{background:color-mix(in srgb,var(--g1) 5%,#fff)}

/* sticky header: slightly translucent so the themed background shows through */
.top{background:linear-gradient(var(--angle),color-mix(in srgb,var(--g1) 94%,#000),color-mix(in srgb,var(--g2) 94%,#000))}

/* =====================================================================
   Study timer, badges & streaks, plan progress
   ===================================================================== */
.dh-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.streak-chip{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);color:#fff;border-radius:99px;padding:9px 16px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,transform .15s}
.streak-chip:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}

.timer-card{text-align:center}
.tm-modes{display:inline-flex;background:#eef0f6;border-radius:12px;padding:4px;margin-bottom:18px}
.tm-modes button{border:0;background:transparent;padding:8px 22px;border-radius:9px;font-weight:600;color:var(--muted);cursor:pointer}
.tm-modes button.on{background:#fff;color:var(--text);box-shadow:var(--shadow)}
.tm-ring{--p:0;width:230px;height:230px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:conic-gradient(var(--g1),var(--g2) calc(var(--p)*1%),#e8ebf2 0);box-shadow:0 14px 34px color-mix(in srgb,var(--g1) 22%,transparent)}
.tm-in{width:196px;height:196px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tm-time{font-size:3.2rem;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.tm-presets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.timer-card label{text-align:left}
.tm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.tm-actions .btn{padding:11px 22px}
.tm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.tm-stats div,.sh-stats div{background:color-mix(in srgb,var(--g1) 6%,#fff);border-radius:14px;padding:12px;text-align:center}
.tm-stats b,.sh-stats b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.tm-stats span,.sh-stats span{font-size:.75rem;color:var(--muted);font-weight:600}
.bars{display:flex;gap:8px;align-items:flex-end;height:150px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.bar-v{flex:1;width:100%;display:flex;align-items:flex-end;background:#f1f3f8;border-radius:10px;overflow:hidden}
.bar-v i{display:block;width:100%;background:var(--grad);border-radius:10px;min-height:0;transition:height .5s var(--ease)}
.bar span{font-size:.7rem;color:var(--muted);font-weight:600}
.bar.now span{color:var(--g1)}
.tm-subj{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.timer-grid{align-items:start}

.streak-hero{display:grid;gap:18px}
.sh-main{display:flex;align-items:center;gap:16px}
.sh-flame{font-size:3.4rem;line-height:1;filter:drop-shadow(0 6px 14px rgba(249,115,22,.45))}
.sh-num{font-size:3.2rem;font-weight:800;line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,#f97316,#dc2626);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-week{display:flex;gap:10px;justify-content:space-between}
.wd{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;color:var(--muted);font-weight:600}
.wd i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:#eef0f6;color:#fff;font-weight:700}
.wd.on i{background:linear-gradient(135deg,#fb923c,#ef4444);box-shadow:0 6px 14px rgba(239,68,68,.3)}
.wd.now i{outline:2px solid var(--g1);outline-offset:2px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.bdg{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s}
.bdg:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bdg-i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:#eef0f6;filter:grayscale(1);opacity:.55}
.bdg .progress{width:100%;margin:6px 0 0;height:7px}
.bdg em{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600}
.bdg.on{border-color:color-mix(in srgb,var(--g1) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--g1) 7%,#fff),#fff)}
.bdg.on .bdg-i{background:var(--grad);filter:none;opacity:1;box-shadow:0 10px 24px color-mix(in srgb,var(--g1) 35%,transparent)}
.bdg.on em{color:var(--g1)}

.plan-prog .progress.big{height:14px}
.mini-prog{margin-top:10px}
.mini-prog .progress{height:7px;margin:0 0 4px}
.sess-chk{width:18px;height:18px;flex:0 0 18px;cursor:pointer}
.sch-s.done b,.sch-s.done .sch-t{text-decoration:line-through;color:var(--muted)}
.sch-s.done .ph{opacity:.55}
@media(max-width:560px){.tm-ring{width:200px;height:200px}.tm-in{width:170px;height:170px}.tm-time{font-size:2.7rem}}

/* =====================================================================
   Dark mode  (html[data-theme="dark"])
   ===================================================================== */
html[data-theme="dark"]{color-scheme:dark;--card:#161a2b;--text:#e9ecf6;--muted:#9aa3bb;--line:#2a3047;--ok:#3ccf91;--warn:#f5a347;--danger:#f97066;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.35);--shadow-lg:0 2px 4px rgba(0,0,0,.4),0 16px 38px rgba(0,0,0,.5)}
html[data-theme="dark"] body{background:
  radial-gradient(900px 600px at 8% -5%,color-mix(in srgb,var(--g1) 30%,transparent),transparent 65%),
  radial-gradient(800px 600px at 100% 105%,color-mix(in srgb,var(--g2) 28%,transparent),transparent 65%),#0d1020 fixed;background-attachment:fixed}
html[data-theme="dark"] label,html[data-theme="dark"] .tips,html[data-theme="dark"] .side button,html[data-theme="dark"] .chip{color:#c9d0e4}
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .bdg,html[data-theme="dark"] .banner,html[data-theme="dark"] .side,html[data-theme="dark"] .note,
html[data-theme="dark"] .adv,html[data-theme="dark"] .filters,html[data-theme="dark"] .auth-box,html[data-theme="dark"] .quiz{background:rgba(22,26,43,.92);border-color:var(--line)}
html[data-theme="dark"] .bdg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--g1) 18%,#161a2b),#161a2b)}
html[data-theme="dark"] .page-h h1{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--g1) 50%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .auth-box h1{color:var(--text);-webkit-text-fill-color:var(--text)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0f1324;border-color:#2f3652;color:var(--text)}
html[data-theme="dark"] input:hover,html[data-theme="dark"] select:hover,html[data-theme="dark"] textarea:hover{border-color:#464f73}
html[data-theme="dark"] .filters input,html[data-theme="dark"] .filters select{background:#0f1324}
html[data-theme="dark"] .diary textarea{background:#0f1324}
html[data-theme="dark"] input[role=switch]{background:#3a4263}
html[data-theme="dark"] .btn.secondary,html[data-theme="dark"] .chip,html[data-theme="dark"] .font-opt,html[data-theme="dark"] .q-opt,html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .msg,html[data-theme="dark"] .composer,html[data-theme="dark"] .chat-tabs button,html[data-theme="dark"] .tm-modes button.on,html[data-theme="dark"] .seg button.on{background:#1b2036;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .btn.secondary:hover,html[data-theme="dark"] .chip:hover,html[data-theme="dark"] .room:hover{background:#242a45}
html[data-theme="dark"] .btn.danger{background:#1b2036}
html[data-theme="dark"] .btn.light{background:#fff;color:var(--g1)}
html[data-theme="dark"] .seg,html[data-theme="dark"] .tm-modes{background:#0f1324}
html[data-theme="dark"] .cats-bar{background:rgba(18,22,38,.96);border-color:var(--line)}
html[data-theme="dark"] .chip em{background:#262c47;color:#aab2cc}
html[data-theme="dark"] .chip.on{background:color-mix(in srgb,var(--g1) 22%,#1b2036);color:#fff}
html[data-theme="dark"] .pill.cat,html[data-theme="dark"] .q-opt b,html[data-theme="dark"] kbd{background:#242a45;color:#c9d0e4;border-color:var(--line)}
html[data-theme="dark"] .pill.Pending,html[data-theme="dark"] .pill.Medium{background:#3a2a0e;color:#fcc86a;border-color:#6b4a14}
html[data-theme="dark"] .pill.Completed{background:#0f3325;color:#6ee7b0;border-color:#1c6b4b}
html[data-theme="dark"] .pill.Overdue,html[data-theme="dark"] .pill.High{background:#3b1613;color:#fda29b;border-color:#7a2a24}
html[data-theme="dark"] .pill.Low{background:#10294a;color:#8ec5ff;border-color:#1f4d86}
html[data-theme="dark"] .task:hover,html[data-theme="dark"] .sch:hover,html[data-theme="dark"] .cat:hover,html[data-theme="dark"] .person:hover{background:#1d2340}
html[data-theme="dark"] .sch.today{background:color-mix(in srgb,var(--g1) 14%,#161a2b)}
html[data-theme="dark"] .progress,html[data-theme="dark"] .bar-v{background:#262c47}
html[data-theme="dark"] .ring span,html[data-theme="dark"] .tm-in{background:#161a2b}
html[data-theme="dark"] .ring,html[data-theme="dark"] .tm-ring{background:conic-gradient(var(--g1),var(--g2) calc(var(--p)*1%),#262c47 0)}
html[data-theme="dark"] .tm-stats div,html[data-theme="dark"] .sh-stats div{background:#1d2340}
html[data-theme="dark"] .wd i,html[data-theme="dark"] .bdg-i{background:#262c47}
html[data-theme="dark"] .exd{background:color-mix(in srgb,var(--g1) 18%,#161a2b);border-color:color-mix(in srgb,var(--g1) 35%,#161a2b)}
html[data-theme="dark"] .modal,html[data-theme="dark"] .chat-panel,html[data-theme="dark"] .cal-panel{background:#161a2b;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .msgs{background:linear-gradient(180deg,#12162a,#0f1324)}
html[data-theme="dark"] .sys{background:#242a45}
html[data-theme="dark"] .cal-cell{background:#1b2036}
html[data-theme="dark"] .cal-cell:not(.blank):hover{background:#262d4c}
html[data-theme="dark"] .cal-cell.sel{background:#161a2b}
html[data-theme="dark"] .ds-prompt,html[data-theme="dark"] .q-exp,html[data-theme="dark"] .adv{background:#1b2036}
html[data-theme="dark"] .q-opt.right{background:#0f3325}html[data-theme="dark"] .q-opt.wrong{background:#3b1613}
html[data-theme="dark"] .note:not(.read){background:color-mix(in srgb,var(--g1) 12%,#161a2b)}
html[data-theme="dark"] .toast{background:rgba(30,36,60,.96)}
html[data-theme="dark"] .banner{background:linear-gradient(90deg,color-mix(in srgb,var(--g1) 14%,#161a2b),#161a2b)}
html[data-theme="dark"] .auth-wrap{background:transparent}
html[data-theme="dark"] .divider{color:var(--muted)}

html[data-theme="dark"] .ph.Learn{background:#10294a;color:#8ec5ff}html[data-theme="dark"] .ph.Practice{background:#3a2a0e;color:#fcc86a}html[data-theme="dark"] .ph.Revise{background:#0f3325;color:#6ee7b0}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4263;background-clip:padding-box}

/* =====================================================================
   Lighter header
   ===================================================================== */
.top-in{height:56px;gap:6px}
.top .logo{margin-right:14px}
.tabs-nav{gap:2px}
.tab{padding:7px 11px;font-size:.88rem;font-weight:500;gap:6px;white-space:nowrap;border-radius:99px}
.tab svg.i{width:16px;height:16px;opacity:.9}
.tab.active{background:rgba(255,255,255,.2);box-shadow:none;font-weight:600}
.icon-btn{width:34px;height:34px;opacity:.9}
.icon-btn svg.i{width:17px;height:17px}
.sep{height:20px;margin:0 4px;background:rgba(255,255,255,.22)}
.acct{padding:4px 6px 4px 8px}
.acct .who b{font-size:.82rem}
.acct .who span{display:none}
.avatar{width:30px;height:30px;flex:0 0 30px}
.cats-in .friends{margin-left:auto}
@media(max-width:1100px){.tab span.l{display:none}.tab{padding:8px 10px}.acct .who{display:none}}

/* =====================================================================
   Modern sign-in page
   ===================================================================== */
.auth-wrap{grid-template-columns:1.05fr .95fr}
.auth-hero{padding:44px 52px;gap:26px}
.ah-mid{display:flex;flex-direction:column;gap:16px}
.ah-eyebrow{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:99px}
.auth-hero h1{margin:0;font-size:3rem}
.auth-hero h1 .hl{background:linear-gradient(90deg,#fff,rgba(255,255,255,.65));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ah-cards{display:grid;gap:10px;max-width:440px;margin-top:6px}
.ah-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:12px 16px;backdrop-filter:blur(8px);transition:transform .2s var(--ease),background .2s}
.ah-card:hover{transform:translateX(5px);background:rgba(255,255,255,.18)}
.ah-card i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.22);flex:0 0 40px}
.ah-card b{display:block;font-size:.95rem}
.ah-card span{font-size:.8rem;opacity:.85}
.ah-preview{position:absolute;right:-26px;bottom:78px;width:250px;background:rgba(255,255,255,.96);color:#1b2033;border-radius:18px;padding:14px 16px;box-shadow:0 30px 60px rgba(0,0,0,.28);transform:rotate(-4deg);animation:floaty 6s ease-in-out infinite}
.ap-h{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.85rem}.ap-h span{color:#667085}
.ap-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #eef0f5;font-size:.82rem}
.ap-row i{width:16px;height:16px;border-radius:5px;border:2px solid #c3c9d6;flex:0 0 16px}
.ap-row em{margin-left:auto;font-style:normal;font-size:.7rem;color:#667085}
.ap-row.done{color:#98a2b3;text-decoration:line-through}.ap-row.done i{background:var(--g1);border-color:var(--g1)}
@keyframes floaty{50%{transform:rotate(-4deg) translateY(-10px)}}
.ah-foot{opacity:.7;font-size:.8rem}
.auth-form{position:relative;background:transparent;padding:32px}
.auth-dark{position:absolute;top:20px;right:20px;color:var(--text);background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(6px)}
.auth-box{max-width:410px;padding:38px 34px;border-radius:24px;box-shadow:0 30px 80px rgba(16,24,40,.16)}
.ab-logo .logo-mark{background:var(--grad);border:0;width:46px;height:46px;border-radius:14px;box-shadow:0 10px 22px color-mix(in srgb,var(--g1) 35%,transparent);margin-bottom:14px}
.ab-logo .logo-mark svg{width:24px;height:24px}
.auth-box h1{font-size:1.75rem;margin-bottom:4px}
.field{position:relative}
.field svg.i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#98a2b3;width:17px;height:17px;pointer-events:none}
.field input{padding-left:40px;height:46px;border-radius:12px;background:#f8f9fc}
.field input:focus{background:#fff}
.auth-go{height:48px;justify-content:center;font-size:1rem;border-radius:12px;margin-top:6px}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr}.ah-preview{display:none}.auth-hero{padding:28px 24px}.auth-hero h1{font-size:2.1rem}.ah-cards{display:none}}
html[data-theme="dark"] .field input{background:#0f1324}
html[data-theme="dark"] .field input:focus{background:#131830}
html[data-theme="dark"] .auth-dark{background:rgba(22,26,43,.8);color:var(--text)}
html[data-theme="dark"] .ab-logo .logo-mark{background:var(--grad)}

/* dashboard stat tiles: readable in dark mode */
html[data-theme="dark"] .stat b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;-webkit-text-fill-color:#fff}
html[data-theme="dark"] .stat span{color:#c4cbe0}
html[data-theme="dark"] .stat{color:#fff}
html[data-theme="dark"] .pc-body h3,html[data-theme="dark"] .ring span{color:#fff}
html[data-theme="dark"] .score b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Drink water ---- */
.w-btns{display:flex;gap:8px;align-items:center}
.glasses{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.gl{width:34px;height:40px;border-radius:10px 10px 14px 14px;display:grid;place-items:center;font-size:1.15rem;background:#eef4ff;border:1px solid #d6e4ff;filter:grayscale(1);opacity:.45;transition:all .25s var(--ease)}
.gl.on{filter:none;opacity:1;background:linear-gradient(180deg,#e0f2fe,#bae6fd);border-color:#7dd3fc;transform:translateY(-2px);box-shadow:0 6px 14px rgba(14,165,233,.28)}
.water .progress>div{background:linear-gradient(90deg,#38bdf8,#0ea5e9)}
.w-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.w-set label{margin:0;display:flex;align-items:center;gap:10px;font-weight:600}
.w-set select{width:auto;padding:6px 10px;border-radius:9px}
.w-goal{margin-left:auto!important}
html[data-theme="dark"] .gl{background:#14213a;border-color:#243a63}
html[data-theme="dark"] .gl.on{background:linear-gradient(180deg,#0c4a6e,#075985);border-color:#0ea5e9}

/* ---- Syllabus tracker ---- */
.syl-list{margin-top:10px}
.syl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 4px;border-top:1px solid var(--line)}
.syl-row:first-child{border-top:0}
.syl-n{font-weight:600;min-width:0;overflow-wrap:anywhere}
.syl-row.revised .syl-n{color:var(--muted);text-decoration:line-through}
.syl-st{display:inline-flex;background:#eef0f6;border-radius:99px;padding:3px;gap:2px}
.syl-st button{border:0;background:transparent;border-radius:99px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.syl-st button:hover{color:var(--text)}
.syl-st button.on{color:#fff;box-shadow:0 2px 6px rgba(16,24,40,.18)}
.syl-st button.on.none{background:#98a2b3}
.syl-st button.on.learning{background:linear-gradient(135deg,#fdb022,#dc6803)}
.syl-st button.on.revised{background:linear-gradient(135deg,#32d583,#12805c)}
.syl-add{display:flex;gap:8px;margin-top:12px}
.syl-add input{flex:1}
.syl .progress{margin-top:4px}
html[data-theme="dark"] .syl-st{background:#0f1324}

/* ---- Reminders as chat messages ---- */
.remind-room{background:color-mix(in srgb,var(--g1) 6%,#fff);border-bottom:1px solid var(--line)}
.ava.bot{background:var(--grad);color:#fff;font-size:1.05rem;border-radius:12px}
.msg.bot{border-left:3px solid var(--g1);max-width:90%}
.msg.bot .from{color:var(--g1)}
html[data-theme="dark"] .remind-room{background:color-mix(in srgb,var(--g1) 14%,#161a2b)}
html[data-theme="dark"] .room{color:var(--text)}

/* ---- Planova Assistant ---- */
.ideas{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ideas .chip{white-space:normal;text-align:left;border-radius:14px;padding:7px 12px}
.msg.bot .md{line-height:1.5}
.msg.typing{display:flex;gap:5px;padding:12px 14px}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:var(--g1);opacity:.35;animation:typ 1.2s infinite ease-in-out}
.msg.typing span:nth-child(2){animation-delay:.18s}.msg.typing span:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.sys.err-sys{background:#fef3f2;color:#b42318;border-radius:12px;padding:8px 12px;text-align:center;max-width:90%;font-size:.8rem}
.a-ctx{display:flex;align-items:center;gap:8px;margin:0;font-size:.74rem;color:var(--muted);font-weight:500}
.a-ctx input{width:15px;height:15px}
html[data-theme="dark"] .sys.err-sys{background:#3b1613;color:#fda29b}

/* ---- Calendar day notes ---- */
.cal-cell .dots .d.note{background:#f59e0b;border-radius:2px;transform:rotate(45deg)}
.cal-note{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:8px 10px;margin-bottom:6px;background:#fffbeb;border:1px solid #fde68a;border-left:3px solid #f59e0b;border-radius:10px;font-size:.88rem;overflow-wrap:anywhere}
.cal-note .icon-x{width:24px;height:24px;flex:0 0 24px}
.cal-note .icon-x svg{width:14px;height:14px}
.cal-note-add{display:flex;gap:8px;margin-top:8px}
.cal-note-add input{flex:1;min-width:0}
html[data-theme="dark"] .cal-note{background:#3a2a0e;border-color:#6b4a14;border-left-color:#f59e0b;color:#fde9b8}

/* calendar: a day with a note gets a small amber corner flag instead of a dot */
.cal-cell .dots .d.note{display:none}
.cal-cell.has-note{position:relative;overflow:hidden}
.cal-cell.has-note:after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent #f59e0b transparent transparent}
.cal-panel .cal-cell.has-note:after{border-width:0 11px 11px 0}

/* calendar: days with a note are highlighted yellow */
.cal-cell.has-note:after{display:none}
.cal-cell.has-note,.cal-cell.has-note:not(.blank):hover{background:#fef08a;border-color:#facc15;color:#422006}
.cal-cell.has-note:not(.blank):hover{background:#fde047}
.cal-cell.has-note.sel{background:#fde047;border-color:#eab308;box-shadow:0 0 0 2px rgba(234,179,8,.45)}
.cal-cell.has-note .dots em{color:#713f12}
html[data-theme="dark"] .cal-cell.has-note,html[data-theme="dark"] .cal-cell.has-note:not(.blank):hover{background:#a16207;border-color:#ca8a04;color:#fff}
html[data-theme="dark"] .cal-cell.has-note.sel{background:#ca8a04}