#app{min-height:100vh;display:flex;flex-direction:column}#app[hidden]{display:none}.topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);background:linear-gradient(110deg,var(--green) 0%,color-mix(in srgb,var(--green) 55%,var(--pink)) 38%,var(--pink) 100%);border-bottom:var(--bw) solid var(--border);box-shadow:var(--shadow-sm)}.topbar .brand,.topbar .brand b{color:#fff}.topbar .brand b{opacity:0.9}.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:800;font-size:1.1rem;letter-spacing:0.2px}.brand .dot{width:12px;height:12px;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--pink),var(--green));box-shadow:var(--shadow-pink)}.brand b{color:var(--pink-soft)}.topbar .spacer{flex:1}.modenav{display:flex;gap:var(--sp-2);padding:var(--sp-4) var(--sp-6) var(--sp-2);background:var(--bg-main)}.mode{flex:1;max-width:280px;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);cursor:pointer;border:var(--bw) solid var(--border);border-radius:var(--r-md);background:var(--bg-card);color:var(--text-secondary);font-family:inherit;font-size:1rem;font-weight:800;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}.mode:hover{background:var(--bg-elevated)}.mode[aria-selected="true"]{background:linear-gradient(135deg,var(--pink),var(--pink-soft));border-color:transparent;color:#fff;box-shadow:var(--shadow-pink)}.tabnav{position:sticky;top:var(--topbar-h);z-index:30;display:flex;gap:var(--sp-2);overflow-x:auto;padding:var(--sp-3) var(--sp-6);background:var(--bg-main);border-bottom:var(--bw) solid var(--border)}.tab{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);border:var(--bw) solid transparent;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:0.95rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}.tab .ico{font-size:1.1rem}.tab[hidden]{display:none}.tab:hover{background:var(--bg-card);color:var(--text-primary)}.tab[aria-selected="true"]{background:var(--pink-bg);color:var(--pink-soft);border-color:var(--border-strong)}.subnav{display:flex;gap:var(--sp-2);overflow-x:auto;margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:var(--bw) solid var(--border)}.subtab{flex:0 0 auto;padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-family:inherit;font-size:0.78rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .12s ease,background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}.subtab:hover{color:var(--pink);border-color:var(--pink);transform:translateY(-1px)}.subtab[aria-selected="true"]{background:var(--pink);color:#fff;border-color:var(--pink);font-weight:700}.subpanel{display:none}.subpanel.active{display:block;animation:fade-in var(--t-base)}.view{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-7)}.panel{display:none;animation:fade-in var(--t-base)}.panel.active{display:block}@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-head{margin-bottom:var(--sp-4)}.card{margin-bottom:var(--sp-3)}.grid{margin-bottom:var(--sp-3)}.grid>.card{margin-bottom:0}.panel-head h2{display:flex;align-items:center;gap:var(--sp-3)}.panel-head .sub{color:var(--text-muted);margin-top:var(--sp-1)}.grid{display:grid;gap:var(--sp-5)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}@media (max-width:820px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}.view{padding:var(--sp-5) var(--sp-4) var(--sp-7)}}@media (max-width:600px){.tabnav{padding:var(--sp-2) var(--sp-3)}.tab span:not(.ico){display:none}.tab[aria-selected="true"] span:not(.ico){display:inline}.tab{padding:var(--sp-2) var(--sp-3)}}