:root{--bg:#f8fafc;--surface:#ffffff;--surface2:#f1f5f9;--surface3:#e2e8f0;--ink:#0f172a;--ink-heading:#090d16;--muted:#64748b;--muted-light:#94a3b8;--line:#e2e8f0;--line-subtle:#f1f5f9;--line-strong:#cbd5e1;--primary:#4f46e5;--primary2:#6366f1;--primary-hover:#4338ca;--primary-subtle:#eef2ff;--primary-border:#c7d2fe;--primary-glow:rgba(79,70,229,0.15);--success:#10b981;--success-dark:#047857;--success-bg:#ecfdf5;--success-border:#a7f3d0;--danger:#ef4444;--danger-dark:#b91c1c;--danger-bg:#fef2f2;--danger-border:#fecaca;--warning:#f59e0b;--warning-dark:#b45309;--warning-bg:#fffbeb;--warning-border:#fde68a;--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.04);--shadow-sm:0 2px 4px 0 rgba(0,0,0,0.04);--shadow:0 10px 25px -5px rgba(15,23,42,0.04),0 8px 10px -6px rgba(15,23,42,0.03);--shadow-card:0 2px 8px -2px rgba(15,23,42,0.05),0 1px 3px rgba(15,23,42,0.03);--shadow-lg:0 20px 30px -10px rgba(15,23,42,0.08),0 10px 15px -5px rgba(15,23,42,0.04);--shadow-xl:0 25px 50px -12px rgba(15,23,42,0.15);--radius-xs:8px;--radius-sm:12px;--radius:16px;--radius-lg:22px;--sidebar-w:232px;--topbar-h:64px;--mobile-nav-h:64px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body,html{overflow-x:clip;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Plus Jakarta Sans,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh}audio,canvas,embed,iframe,img,object,svg,video{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px rgba(79,70,229,.25)!important}.brand button:focus-visible,.sidebar :focus-visible{outline:2px solid #818cf8;outline-offset:2px;box-shadow:0 0 0 4px rgba(129,140,248,.3)!important}[role=radio]:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px rgba(79,70,229,.28)!important}:focus:not(:focus-visible){outline:none}.skip-link{position:absolute;top:-120px;left:16px;background:var(--primary);color:#ffffff;padding:10px 18px;border-radius:var(--radius-xs);font-weight:800;font-size:13px;z-index:99999;text-decoration:none;box-shadow:var(--shadow-lg);transition:top .15s cubic-bezier(.16,1,.3,1)}.skip-link:focus,.skip-link:focus-visible{top:16px;outline:3px solid #ffffff;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;-webkit-transition:background .2s ease;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:#94a3b8}*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.app-layout{min-height:100vh;min-height:100dvh;display:flex;width:100%;position:relative}.sidebar{background:#0f172a;color:#f8fafc;padding:12px 10px 10px;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);height:100vh;height:100dvh;overflow:hidden;border-right:1px solid #1e293b;z-index:40;transition:transform .3s cubic-bezier(.16,1,.3,1)}.brand{display:flex;gap:10px;align-items:center;padding:0 4px 8px;border-bottom:1px solid #1e293b;margin-bottom:6px;flex-shrink:0}.brand-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#4338ca);display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.4);flex-shrink:0}.brand-info strong{font-size:13px;display:block;color:#ffffff;letter-spacing:-.01em;line-height:1.15}.brand-info small{display:block;color:#94a3b8;font-size:10px;margin-top:1px}.sidebar-nav-container{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.sidebar-nav-container::-webkit-scrollbar{width:3px}.sidebar-nav-container::-webkit-scrollbar-track{background:transparent}.sidebar-nav-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}.sidebar-nav-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}.nav-section{display:grid;grid-gap:1.5px;gap:1.5px;margin-bottom:4px}.nav-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:2px 6px 1px;font-weight:700}.nav-link{color:#cbd5e1;text-align:left;padding:5px 8px;border-radius:8px;display:flex;gap:9px;align-items:center;font-size:11.8px;font-weight:600;transition:all .15s ease;min-height:30px;text-decoration:none}.nav-link:hover{background:#1e293b;color:#ffffff;transform:translateX(2px)}.nav-link.active{background:linear-gradient(135deg,#4f46e5,#4338ca);color:#ffffff;box-shadow:0 3px 12px rgba(79,70,229,.35)}.sidebar-bottom{flex-shrink:0;margin-top:auto;border-top:1px solid #1e293b;padding:8px 4px 0;color:#94a3b8;font-size:11px;line-height:1.3}.side-subject-badge{display:flex;align-items:center;gap:7px;color:#94a3b8;font-size:11px;padding:3.5px 7px;border-radius:7px;transition:background .15s ease;text-decoration:none}.side-subject-badge:hover{background:#1e293b;color:#ffffff}.side-subject-dot{width:6.5px;height:6.5px;border-radius:50%;flex-shrink:0}.dot-math{background:#818cf8}.dot-science{background:#34d399}.dot-sst{background:#fb923c}.dot-english{background:#38bdf8}.mobile-sidebar-close{display:none}.main-wrapper{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg);position:relative}.topbar{height:var(--topbar-h);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);justify-content:space-between;padding:0 clamp(14px,2.5vw,24px);position:-webkit-sticky;position:sticky;top:0;z-index:30;width:100%}.breadcrumbs,.topbar{display:flex;align-items:center}.breadcrumbs{font-size:13px;color:var(--muted);gap:6px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:100%}.crumb-link{color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s ease;flex-shrink:0}.crumb-link:hover{color:var(--primary)}.crumb-sep{color:#cbd5e1;font-size:11px;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0}.breadcrumbs strong{color:var(--ink-heading);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.top-actions{display:flex;gap:8px}.pill,.top-actions{align-items:center;flex-shrink:0}.pill{background:var(--primary-subtle);color:var(--primary);border:1px solid var(--primary-border);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-flex;gap:6px;letter-spacing:.01em;max-width:100%;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pill.success{background:var(--success-bg);color:var(--success-dark);border-color:var(--success-border)}.pill.danger{background:var(--danger-bg);color:var(--danger-dark);border-color:var(--danger-border)}.pill.warning{background:var(--warning-bg);color:var(--warning-dark);border-color:var(--warning-border)}.badge-group,.pill-group{gap:6px;max-width:100%}.badge-group,.btn-group-responsive,.pill-group{display:flex;flex-wrap:wrap;align-items:center;min-width:0}.btn-group-responsive{gap:8px;width:100%}@media (max-width:640px){.btn-group-responsive.stack-mobile{flex-direction:column;align-items:stretch}.btn-group-responsive.stack-mobile>*{width:100%!important;justify-content:center!important}}.grid-responsive-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));grid-gap:clamp(10px,2vw,16px);gap:clamp(10px,2vw,16px);width:100%;min-width:0}.content-container{max-width:1200px;width:100%;margin:0 auto;padding:clamp(14px,2.5vw,24px) clamp(12px,2.5vw,22px);flex:1 1;min-width:0}.kpi-grid-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:clamp(10px,1.8vw,16px);gap:clamp(10px,1.8vw,16px);width:100%;min-width:0}@media (max-width:860px){.kpi-grid-4{grid-template-columns:repeat(2,1fr)}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,2.5vw,22px);box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;min-width:0;width:100%;overflow-wrap:anywhere;word-break:break-word}.card:hover{border-color:var(--line-strong)}.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 18px;font-size:13px;font-weight:700;transition:all .15s ease;cursor:pointer;text-decoration:none;line-height:1;min-height:42px;white-space:nowrap;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.action-btn:active{transform:scale(.97)}.action-btn.primary{background:linear-gradient(135deg,#4f46e5,#4338ca);color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.28)}.action-btn.primary:hover{background:linear-gradient(135deg,#4338ca,#3730a3);box-shadow:0 6px 20px rgba(79,70,229,.35);transform:translateY(-1px)}.action-btn.secondary{background:var(--primary-subtle);color:var(--primary);border:1px solid var(--primary-border)}.action-btn.secondary:hover{background:#e0e7ff;border-color:#a5b4fc}.action-btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.action-btn.ghost:hover{background:var(--surface2);border-color:var(--line-strong)}.action-btn.danger{background:var(--danger-bg);color:var(--danger-dark);border:1px solid var(--danger-border)}.katex-display{display:block;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0!important;max-width:100%!important;scrollbar-width:none!important;-ms-overflow-style:none!important;-webkit-overflow-scrolling:touch}.katex-display::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.katex{font-size:1em;max-width:100%;text-rendering:auto}.inline-math{display:inline-block;vertical-align:middle;max-width:100%;word-break:normal}.block-math{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;margin:6px 0;scrollbar-width:none!important;-ms-overflow-style:none!important;-webkit-overflow-scrolling:touch}.block-math::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.no-scrollbar{scrollbar-width:none!important;-ms-overflow-style:none!important}.no-scrollbar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spin{animation:spin 1s linear infinite}.session-grid-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-gap:20px;gap:20px;align-items:start;width:100%;min-width:0}.palette-backdrop{display:none}.mobile-palette-toggle{display:none!important}@media (max-width:960px){.mobile-palette-toggle{display:inline-flex!important}.session-grid-layout{grid-template-columns:1fr}.palette-sidebar-container{position:fixed;bottom:0;left:0;right:0;max-height:82vh;max-height:82dvh;background:#fff;z-index:110;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .3s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px))}.palette-sidebar-container.open{transform:translateY(0)}.palette-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:105;opacity:0;pointer-events:none;transition:opacity .25s ease}.palette-backdrop.open{opacity:1;pointer-events:auto}}.drawer-backdrop,.mobile-menu-trigger,.mobile-nav-bar{display:none}@media (max-width:1024px){.main-wrapper{margin-left:0;width:100%}.mobile-menu-trigger{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);margin-right:10px;flex-shrink:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:35}.mobile-menu-trigger,.mobile-sidebar-close{display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}.mobile-sidebar-close{width:28px;height:28px;border-radius:6px;background:#1e293b;color:#94a3b8;border:none}.mobile-sidebar-close:hover{background:#334155;color:#ffffff}.sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,85vw);height:100vh;height:100dvh;z-index:1000;transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.5);overflow-y:auto;padding-top:calc(16px + env(safe-area-inset-top, 0px));padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));transition:transform .28s cubic-bezier(.16,1,.3,1),visibility .28s ease;visibility:hidden;pointer-events:none}.sidebar.open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:990;opacity:0;pointer-events:none;transition:opacity .25s ease}.drawer-backdrop.open{display:block;opacity:1;pointer-events:auto}}@media (max-width:768px){:root{--topbar-h:58px}.topbar{padding:0 12px}.top-actions .hide-on-mobile{display:none!important}.breadcrumbs span:first-child,.breadcrumbs span:nth-child(2){display:none}.content-container{padding:12px 10px calc(var(--mobile-nav-h) + 24px + env(safe-area-inset-bottom, 0px))}.mobile-nav-bar{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom,0);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);z-index:50;align-items:center;justify-content:space-around;box-shadow:0 -4px 20px rgba(15,23,42,.06)}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10px;font-weight:700;text-decoration:none;flex:1 1;height:100%;transition:color .15s ease;padding:4px 0}.mobile-nav-item.active{color:var(--primary)}.mobile-nav-item svg{transition:transform .15s ease}.mobile-nav-item.active svg{transform:scale(1.1);stroke-width:2.5}.mobile-nav-indicator{width:16px;height:3px;background:var(--primary);border-radius:999px;margin-top:1px}}.access-overlay-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease-out}.access-overlay-card{background:#ffffff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,5vw,36px);max-width:490px;width:100%;box-shadow:0 25px 50px -12px rgba(0,0,0,.35);text-align:center;position:relative;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.badge-it{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd}.learn-subject-tabs-wrapper{position:relative;margin-top:10px;overflow:hidden}.learn-subject-tabs-track,.learn-subject-tabs-wrapper{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.learn-subject-tabs-track{display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;padding:4px 2px 10px;scroll-behavior:smooth}@media (min-width:1024px){.learn-subject-tabs-track{flex-wrap:wrap;overflow-x:visible}}.learn-subject-tab-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;cursor:pointer;border:1.5px solid transparent;transition:all .18s cubic-bezier(.16,1,.3,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;box-sizing:border-box}.learn-subject-tab-btn:hover{transform:translateY(-1px)}.learn-subject-tab-btn:active{transform:scale(.97)}.learn-subject-tab-badge{font-size:11px;font-weight:800;padding:1px 7px;border-radius:20px;line-height:1.4;letter-spacing:.02em}@media (max-width:640px){.learn-subject-tab-btn{padding:7px 12px;font-size:12.5px;gap:6px}}.formula-math-display{display:block;width:100%;max-width:100%;white-space:normal!important;overflow-wrap:break-word;word-break:normal}.formula-math-display .katex-display{margin:0!important;text-align:center;white-space:normal!important;display:block!important;width:100%}.formula-math-display .katex{white-space:normal!important;text-align:center;display:inline-block!important;max-width:100%;line-height:1.6}.formula-math-display .katex .katex-html{gap:2px 4px}.formula-math-display .katex .base,.formula-math-display .katex .katex-html{white-space:normal!important;display:inline-flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:baseline!important;max-width:100%}.formula-math-display .katex .base{width:auto!important;margin:2px 0}.formula-math-display .katex .mord.text{overflow-wrap:break-word!important;word-break:normal!important}.formula-math-display .katex .mord.text,.formula-math-display .katex .mord.text .mord{white-space:normal!important;display:inline!important}.formula-math-block,.formula-math-inline{white-space:normal!important;overflow-wrap:break-word;word-break:normal}.formula-math-block .katex-display{margin:0!important;white-space:normal!important}.formula-math-block .katex,.formula-math-inline .katex{white-space:normal!important;max-width:100%}.formula-math-block .katex .base,.formula-math-block .katex .katex-html,.formula-math-inline .katex .base,.formula-math-inline .katex .katex-html{white-space:normal!important;display:inline-flex!important;flex-wrap:wrap!important;align-items:baseline!important}.formula-math-block .katex .base,.formula-math-inline .katex .base{max-width:100%;width:auto!important}