/* A white, touch-friendly sidebar at every viewport size. */
.nav-panel,.nav-panel-account{display:contents}
.nav-backdrop,.nav-panel-head,.nav-account-label,.nav-panel-note,.navlink-symbol,.navlink-arrow,.nav-close{display:none}
body.nav-drawer-open{overflow:hidden}
#app .topbar.drawer-layout{height:auto;max-height:none;overflow:visible;z-index:60;align-items:stretch;backdrop-filter:none}
#app .drawer-layout .navrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;padding-top:8px;padding-bottom:8px}
#app .drawer-layout .navrow .brand{grid-column:1;grid-row:1;min-width:0}
#app .drawer-layout .navrow .brand img{width:min(48vw,185px);height:44px}
#app .drawer-layout .nav-toggle{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;min-width:100px;padding:12px 16px;border:1px solid #dedbfa;border-radius:12px;background:var(--soft);color:#3835bb;font-size:.85rem;font-weight:800;cursor:pointer;touch-action:manipulation;transition:background .2s ease,transform .2s ease}
#app .drawer-layout .nav-toggle:hover{background:#e5e2ff}
#app .drawer-layout .nav-toggle[aria-expanded="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
#app .nav-toggle-icon{position:relative;display:block;width:20px;height:18px;border:0}
#app .nav-toggle-icon::before{content:none}
.nav-toggle-icon i{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .15s ease,width .3s ease;transform-origin:center}
.nav-toggle-icon i:nth-child(1){top:1px}.nav-toggle-icon i:nth-child(2){top:8px;width:14px}.nav-toggle-icon i:nth-child(3){top:15px}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2){opacity:0;transform:translateX(6px)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#app .drawer-layout .nav-backdrop{display:block;position:fixed;inset:0;z-index:61;background:#17203366;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s;cursor:pointer}
#app .drawer-layout .nav-panel{display:flex;position:fixed;inset:0 0 0 auto;z-index:62;flex-direction:column;width:min(388px,calc(100vw - 24px));height:100dvh;max-height:100dvh;padding:0;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 48px #1720331a;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility .35s}
#app .drawer-layout.menu-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
#app .drawer-layout.menu-open .nav-panel{transform:translateX(0);visibility:visible}
#app .drawer-layout .nav-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0;padding:32px 24px 24px;background:var(--soft);border-bottom:1px solid #e6e3f8}
.nav-panel-kicker,.nav-account-label{font-size:.65rem;line-height:1.5;letter-spacing:.12em;font-weight:800;color:#514ce4}
.nav-panel-head h2{font-family:Manrope,Inter,sans-serif;font-size:1.4rem;letter-spacing:-.04em;line-height:1.3;color:var(--ink);margin:8px 0}
.nav-panel-head p{font-size:.8rem;line-height:1.5;color:var(--muted);margin:0}
#app .drawer-layout .nav-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #d8d3f3;border-radius:50%;background:#fff;color:#3835bb;font-size:1.8rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.nav-close:hover{background:#e5e2ff}.nav-close:active{transform:scale(.94)}.nav-close:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
#app .drawer-layout .nav-panel .navlinks{display:grid;position:static;grid-template-columns:minmax(0,1fr);grid-row:auto;gap:8px;width:auto;margin:0;padding:24px 16px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#app .drawer-layout .navlinks .navlink{display:flex;justify-content:flex-start;gap:12px;width:100%;min-height:60px;padding:12px 16px;font-size:.94rem;white-space:normal;color:#4d566a;border-radius:12px;box-shadow:none}
#app .drawer-layout .navlinks .navlink.active{background:var(--indigo);color:#fff}
#app .drawer-layout .navlink-symbol{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:#f2f1fc;color:#514ce4}
.navlink-symbol svg{width:20px;height:20px}
#app .drawer-layout .navlink.active .navlink-symbol{background:#ffffff20;color:#fff}
#app .drawer-layout .navlink-arrow{display:block;margin-left:auto;font-size:1.4rem;font-weight:500;opacity:.6}
#app .drawer-layout .nav-panel-account{display:block;margin-top:auto;padding:24px;border-top:1px solid var(--line);background:#fafaff}
#app .drawer-layout .nav-account-label{display:block;margin-bottom:12px;color:var(--muted)}
#app .drawer-layout .nav-panel .navend{display:grid;position:static;grid-template-columns:minmax(0,1fr);grid-row:auto;gap:8px;width:100%;max-width:none;margin:0;padding:0;border:0;overflow:visible}
#app .drawer-layout .navend .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:.85rem;font-weight:700;line-height:1.4;text-align:center;white-space:normal}
#app .drawer-layout .navend .btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
#app .drawer-layout .nav-panel-note{display:block;margin:0;padding:16px 24px calc(20px + env(safe-area-inset-bottom));font-size:.7rem;line-height:1.5;color:var(--muted);background:#fafaff}
@media(max-width:520px){#app .drawer-layout .navrow{gap:0 8px}#app .drawer-layout .navrow .brand img{width:min(45vw,165px);height:40px}#app .drawer-layout .nav-toggle{min-width:88px;padding:12px;gap:8px}}
@media(max-width:360px){#app .drawer-layout .navrow .brand img{width:132px}.brand-beta{flex:none}#app .drawer-layout .nav-panel-head{padding:24px 16px}#app .drawer-layout .nav-panel .navlinks{padding:16px 8px}#app .drawer-layout .nav-panel-account{padding:20px 16px}}
@media(prefers-reduced-motion:no-preference){.drawer-layout.menu-open .navlink{animation:nav-link-in .3s ease both}.drawer-layout.menu-open .navlink:nth-child(2){animation-delay:.04s}.drawer-layout.menu-open .navlink:nth-child(3){animation-delay:.08s}.drawer-layout.menu-open .navlink:nth-child(4){animation-delay:.12s}@keyframes nav-link-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}}
@media(prefers-reduced-motion:reduce){#app .nav-toggle-icon i,#app .drawer-layout .nav-toggle,#app .drawer-layout .nav-panel,#app .drawer-layout .nav-backdrop,.navlinks .navlink,.nav-close{transition:none;animation:none}}