:root{--bg:#f6f7f9;--card:#fff;--tx:#14181f;--mut:#667085;--bd:#e4e7ec;--ac:#0e7490;--ok:#16a34a;--warn:#d97706;--bad:#dc2626}
[data-theme=dark]{--bg:#0e1116;--card:#171b22;--tx:#e8ecf2;--mut:#98a2b3;--bd:#262c36}
[data-accent=emerald]{--ac:#059669}[data-accent=sunset]{--ac:#ea580c}[data-accent=violet]{--ac:#7c3aed}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{font:15px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden}
a{color:var(--ac)}button,input,select{font:inherit;color:inherit}
.btn{min-height:44px;padding:0 16px;border:1px solid var(--bd);border-radius:8px;background:var(--card);cursor:pointer}
.btn.p{background:var(--ac);border-color:var(--ac);color:#fff}
input,select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--bd);border-radius:8px;background:var(--card)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}
aside{background:var(--card);border-right:1px solid var(--bd);padding:16px 10px;overflow-y:auto;height:100dvh;position:sticky;top:0}
aside h1{font-size:18px;padding:0 10px 14px}
aside a,aside summary{display:block;padding:10px;border-radius:8px;color:var(--tx);text-decoration:none;cursor:pointer;min-height:44px}
aside a.on,aside a:hover{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
aside details div{padding-left:14px}
header{display:flex;gap:8px;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
header .sp{flex:1}header select{width:auto}#menu{display:none}
main{padding:clamp(12px,3vw,28px);max-width:100%;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px}
.kpi b{display:block;font-size:clamp(20px,4vw,28px)}.kpi span{color:var(--mut);font-size:13px}
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
.tag{padding:2px 8px;border-radius:99px;font-size:12px;color:#fff}
.g{background:var(--ok)}.a{background:var(--warn)}.r{background:var(--bad)}
form.f{display:grid;gap:10px;max-width:520px;margin:12px 0}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:8px;z-index:99}
@media(max-width:800px){
.shell{grid-template-columns:minmax(0,1fr)}
aside{position:fixed;left:0;top:0;width:260px;z-index:20;transform:translateX(-100%);transition:transform .2s}
body.open aside{transform:none}#menu{display:inline-block}
table{min-width:0}thead{display:none}tr{display:block;padding:8px;border-bottom:1px solid var(--bd)}
td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 6px;white-space:normal}
td::before{content:attr(data-l);color:var(--mut)}
main{padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}