/* Shared Figma-inspired shell: every Django page uses this header and drawer. */
:root{--f-bg:#f7f5f1;--f-white:#fff;--f-navy:#0e1b35;--f-navy70:#536075;--f-navy40:#8b95a7;--f-emerald:#059669;--f-emerald-dark:#047857;--f-border:#e5e5df;--f-shadow:0 12px 35px rgba(14,27,53,.08);--topbar-height:58px}
.drawer-backdrop{z-index:1000;background:rgba(14,27,53,.28)!important;backdrop-filter:blur(7px)}.site-drawer{inset-block:78px auto!important;inset-inline-start:max(18px,calc((100vw - 1200px)/2))!important;width:min(310px,calc(100vw - 36px))!important;height:auto!important;max-height:calc(100vh - 96px)!important;overflow:auto;visibility:hidden;border:1px solid rgba(14,27,53,.1)!important;border-radius:22px!important;background:rgba(255,255,255,.96)!important;color:var(--f-navy)!important;box-shadow:0 28px 70px rgba(14,27,53,.2)!important;transform:translateY(-14px) scale(.96)!important;transform-origin:top right;opacity:0;transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s!important;backdrop-filter:blur(20px) saturate(1.3)}.site-drawer.open{visibility:visible;transform:none!important;opacity:1;transition-delay:0s!important}
.compact-drawer-header{display:flex;min-height:66px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--f-border)}.compact-drawer-header strong{font-size:1rem}.compact-drawer-header button{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--f-border);border-radius:10px;background:var(--f-bg);color:var(--f-navy70);font-size:1.35rem;cursor:pointer}.compact-drawer-navigation{display:grid;gap:6px;padding:12px}.compact-drawer-navigation>a,.compact-drawer-disabled,.compact-ai-link,.compact-drawer-navigation summary{display:grid;width:100%;min-height:50px;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:12px;background:transparent;color:var(--f-navy);text-align:right;font:inherit;cursor:pointer;transition:background .18s,color .18s,transform .18s}.compact-drawer-navigation>a:hover,.compact-ai-link:hover,.compact-drawer-navigation summary:hover{background:#ecfdf5;color:var(--f-emerald-dark);transform:translateX(-2px)}.compact-drawer-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:var(--f-bg);color:var(--f-emerald-dark)}.compact-drawer-disabled{color:var(--f-navy40);cursor:not-allowed}.compact-drawer-disabled small,.compact-drawer-submenu small{font-size:.62rem;color:var(--f-navy40)}.compact-drawer-navigation details{border:0}.compact-drawer-navigation summary{list-style:none}.compact-drawer-navigation summary::-webkit-details-marker{display:none}.compact-drawer-navigation summary:after{content:"⌄";color:var(--f-navy40);transition:transform .2s}.compact-drawer-navigation details[open] summary:after{transform:rotate(180deg)}.compact-drawer-submenu{display:grid;gap:4px;margin:2px 46px 5px 8px;padding:8px 12px;border-radius:12px;background:var(--f-bg)}.compact-drawer-submenu span{display:flex;min-height:29px;align-items:center;justify-content:space-between;color:var(--f-navy70);font-size:.76rem}.compact-drawer-submenu span:before,.compact-drawer-submenu a:before{margin-left:8px;color:var(--f-emerald);content:"•"}.compact-drawer-submenu a{display:flex;min-height:29px;align-items:center;justify-content:space-between;padding-inline:7px;border-radius:8px;color:var(--f-emerald-dark);font-size:.76rem;font-weight:750}.compact-drawer-submenu a:hover{background:#d1fae5}
@media(max-width:700px){.site-drawer{inset-block:62px auto!important;inset-inline:10px!important;width:calc(100vw - 20px)!important;max-height:calc(100vh - 74px)!important;border-radius:18px!important}.compact-drawer-submenu{margin-inline-start:40px}}

/* The shell owns navigation styling on every page, including the landing page. */
.topbar{position:sticky;top:0;z-index:1000;height:var(--topbar-height)!important;min-height:var(--topbar-height)!important;box-sizing:border-box;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;padding:5px max(28px,calc((100vw - 1200px)/2))!important;border-bottom:1px solid var(--f-border)!important;background:rgba(247,245,241,.94)!important;color:var(--f-navy)!important;box-shadow:none!important;font-family:var(--site-font);backdrop-filter:blur(18px) saturate(1.4)}
.topbar-start{justify-self:start;gap:10px}.topbar-actions{justify-self:end}.topbar-navigation{justify-self:center;gap:18px}.topbar .site-brand,.topbar .site-brand:hover{display:inline-flex;color:var(--f-navy)!important;font-family:var(--site-font);font-size:1.25rem}.topbar .site-brand:before{display:none!important;content:none!important}.topbar .brand-name{font-family:Arial,sans-serif;font-weight:850;letter-spacing:-.045em}.brand-number,.brand-symbol{color:var(--f-emerald)!important}.brand-symbol svg{stroke:currentColor!important}.topbar .menu-button{width:auto;min-width:40px;height:40px;min-height:40px;padding-inline:10px;border:1px solid var(--f-border)!important;border-radius:11px;background:#fff!important;color:var(--f-navy)!important;box-shadow:none!important}.topbar .menu-button:hover{border-color:#a7dfd1!important;background:#ecfdf5!important}.topbar .login-button{min-height:39px;border:1px solid var(--f-border)!important;border-radius:10px;background:transparent!important;color:var(--f-navy)!important}.topbar .signup-button{display:inline-flex;min-height:39px;padding-inline:18px;border:1px solid var(--f-emerald)!important;border-radius:10px;background:var(--f-emerald)!important;color:#fff!important;box-shadow:0 8px 20px rgba(5,150,105,.16)}.topbar-navigation-link{min-height:38px;padding:7px 4px;border-radius:0;background:transparent!important;color:var(--f-navy70)!important;font-family:var(--site-font);font-size:.82rem;font-weight:650}.topbar-navigation-link:hover,.topbar-navigation-link.active{background:transparent!important;color:var(--f-emerald)!important}.topbar-navigation-link.active{font-weight:800}.topbar-navigation-link.active:after{right:0;bottom:2px;left:0;background:var(--f-emerald)!important}
.site-search{border-color:var(--f-border)!important;background:var(--f-white)!important}.site-search:focus-within{border-color:var(--f-emerald)!important;box-shadow:0 0 0 4px rgba(5,150,105,.1)!important}.site-search input,.site-search input::placeholder{color:var(--f-navy70)!important}.search-button{color:var(--f-emerald)!important}
@media(max-width:900px){.topbar{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-inline:14px!important}.topbar-navigation{display:none}.topbar .site-brand{display:flex!important}.topbar .signup-button{display:none}.topbar-actions{min-width:0}.learning-status{display:flex}}
@media(max-width:540px){:root{--topbar-height:54px}.topbar{padding:4px 10px!important}.topbar-start{width:auto;justify-self:start;gap:4px}.topbar-actions{display:flex}.topbar .site-brand{font-size:.92rem}.topbar .brand-symbol{width:24px;height:24px}.topbar .menu-button{width:36px!important;min-width:36px;height:36px;min-height:36px;padding:0!important}.topbar .login-button{min-height:40px;padding-inline:11px}.topbar:has(.learning-status){gap:5px}.learning-status{gap:3px}.learning-stat,.learning-stat.xp-stat{min-height:36px;padding:4px 5px;gap:2px;border-radius:9px}.learning-stat-icon{width:20px;height:20px}.learning-stat strong{font-size:.74rem}.learning-stat small{display:none}}
.xp-stat .learning-stat-icon svg{width:21px;height:21px;fill:#dbeafe;stroke:#2563eb;stroke-width:1.7;stroke-linejoin:round}.streak-stat .learning-stat-icon{filter:none}
@media(max-width:900px){.learning-stat.streak-stat{display:inline-flex}}