#app{--sidebar-width:190px;min-height:100dvh}
#app header{margin-left:var(--sidebar-width);padding-left:28px;padding-right:28px}
#app main{width:min(1040px,calc(100% - var(--sidebar-width)));margin-left:var(--sidebar-width);margin-right:auto;padding-bottom:40px}
#app nav{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100dvh;padding:84px 12px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:7px;background:#fff;border-top:0;border-right:1px solid var(--line);box-shadow:8px 0 28px #18366f0a;overflow-y:auto;z-index:10}
#app nav button{position:relative;width:100%;min-height:52px;padding:10px 12px;display:flex;align-items:center;justify-content:flex-start;gap:12px;border-radius:13px;background:transparent;color:#6f7c8d;font-size:21px;text-align:left;transition:background .18s ease,color .18s ease,transform .18s ease}
#app nav button span{display:block;min-width:0;font-size:14px;line-height:1.2;font-weight:750;overflow-wrap:anywhere}
#app nav button:hover{background:#f2f5fa;color:var(--navy)}
#app nav button.active{background:#eaf0fb;color:var(--navy)}
#app nav button.active::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--mint2)}
#app nav button:active{transform:scale(.98)}
.menu-toggle,.menu-backdrop{display:none}
.legal-footer{display:flex;align-items:center;justify-content:center;gap:18px;padding:9px 14px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);font-size:11px;line-height:1.25;color:var(--muted);backdrop-filter:blur(8px)}
.legal-footer a{color:inherit;text-decoration:none;white-space:nowrap}
.legal-footer a:hover,.legal-footer a:focus{color:var(--navy);text-decoration:underline}
.login{padding-bottom:48px}
.login-legal{position:fixed;right:0;bottom:0;left:0;z-index:11}
.app-legal{position:fixed;right:0;bottom:0;left:var(--sidebar-width);z-index:8}
#app main{padding-bottom:76px}
@media(max-width:600px){
  #app{--sidebar-width:244px}
  #app header{height:61px;margin-left:0;padding-left:8px;padding-right:10px;justify-content:flex-start;gap:5px}
  #app header .brand{flex:1;min-width:0}
  #app header .brand img.header-logo{width:105px}
  #app main{width:100%;margin-left:0;padding:16px 14px 92px}
  #app nav{padding:76px 12px max(14px,env(safe-area-inset-bottom));gap:6px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 35px #07152245;z-index:20}
  #app nav button{min-height:54px;padding:9px 12px;gap:12px;font-size:20px;border-radius:11px}
  #app nav button span{font-size:14px;line-height:1.15}
  #app nav button.active::before{left:-12px;top:9px;bottom:9px}
  #app.menu-open nav{transform:translateX(0)}
  .menu-toggle{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#eef2f8;color:var(--navy);font-size:30px;font-weight:900;line-height:1;letter-spacing:2px}
  .menu-backdrop{position:fixed;inset:0;z-index:15;width:100%;height:100%;padding:0;border:0;background:#07152280;opacity:0;pointer-events:none;transition:opacity .22s ease}
  #app.menu-open .menu-backdrop{display:block;opacity:1;pointer-events:auto}
  #app.menu-open{overflow:hidden}
  #app .hero{padding:20px 14px}
  #app .hero h1{font-size:clamp(23px,7vw,32px)}
  #app .stats{grid-template-columns:1fr;gap:8px;margin:14px 0 24px}
  #app .stats article{display:flex;align-items:center;justify-content:space-between;gap:12px}
  #app .section-title{gap:8px}
  #app .section-title h1{font-size:24px}
  .app-legal{left:0;z-index:12}
  .legal-footer{gap:7px;padding:8px 6px;font-size:9px;flex-wrap:wrap}
  .legal-footer a{padding:2px 3px}
}