:root{
  --bg:#ECF4F6; --card:#FFFFFF; --soft:#F2FAFC; --tint:#F2FAFC;
  --ink:#0A2E35; --ink2:#005966; --muted:#5E7A82; --dim:#9DB4BA;
  --line:#E2EEF1; --line2:#D3E5E9;
  --blue:#00A2B9; --blue2:#33B4C7; --indigo:#005966;
  --green:#00A2B9; --red:#EF6B5B; --amber:#F5A524;
  --grad:linear-gradient(135deg,#00B6CE 0%,#005966 100%);
  --grad-green:linear-gradient(135deg,#00B6CE,#00879A);
  --shadow-sm:0 1px 2px rgba(8,50,60,.05),0 3px 10px rgba(8,50,60,.06);
  --shadow:0 2px 6px rgba(8,50,60,.06),0 16px 34px -16px rgba(0,89,102,.20);
  --shadow-blue:0 16px 36px -12px rgba(0,162,185,.55);
  --r:18px; --rs:11px;
  --mono:"Inter",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--bg);background-image:
    radial-gradient(900px 500px at 88% -8%,rgba(0,162,185,.10),transparent 60%),
    radial-gradient(800px 520px at -6% 4%,rgba(0,89,102,.10),transparent 55%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
button{font-family:inherit}
::selection{background:#BFE8EE}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 26px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.mark{width:38px;height:38px;background:var(--grad);box-shadow:var(--shadow-blue);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;flex:none;
  position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%)}
.brand .bt{font-size:10px;letter-spacing:.26em;color:var(--blue);font-weight:700;text-transform:uppercase}
.brand h1{font-size:16px;font-weight:700;margin:1px 0 0;letter-spacing:-.02em;color:var(--ink2)}
.dot{color:var(--blue);font-weight:800}
.topmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.pill{font-size:11.5px;color:var(--muted);background:var(--soft);border:1px solid var(--line);
  padding:6px 12px;border-radius:9px;white-space:nowrap;font-weight:500}
.pill b{color:var(--ink);font-weight:700}
.verdict{font-size:11px;font-weight:800;letter-spacing:.06em;padding:6px 13px;border-radius:9px;text-transform:uppercase}
.verdict.ok{color:#fff;background:var(--grad-green);box-shadow:0 10px 22px -10px rgba(0,162,185,.55)}
.verdict.no{color:#fff;background:linear-gradient(135deg,#EF6B5B,#E0503E);box-shadow:0 10px 22px -10px rgba(239,107,91,.55)}

.wrap{display:grid;grid-template-columns:374px 1fr;gap:24px;padding:24px 26px 60px;max-width:1480px;margin:0 auto;align-items:start}
@media(max-width:960px){.wrap{grid-template-columns:1fr;gap:18px;padding:18px}}

/* filter panel */
.deck{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 20px 26px;position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto}
@media(max-width:960px){.deck{position:static;max-height:none}}
.deck::-webkit-scrollbar{width:8px}.deck::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.deck::-webkit-scrollbar-track{background:transparent}
.glab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700;
  margin:22px 0 11px;display:flex;align-items:center;gap:9px}
.glab:first-child{margin-top:0}
.glab .nm{color:var(--blue);letter-spacing:.02em;text-transform:none;font-weight:600}
.glab::after{content:"";flex:1;height:1px;background:var(--line)}

.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tab{appearance:none;border:1px solid var(--line2);background:var(--soft);color:var(--muted);
  padding:9px 4px;border-radius:var(--rs);cursor:pointer;font-size:11px;font-weight:600;line-height:1.15;
  transition:transform .14s,box-shadow .18s,background .18s,color .18s,border-color .18s;text-align:center}
.tab .ti{font-size:9px;color:var(--dim);display:block;margin-bottom:3px;font-weight:700}
.tab:hover{transform:translateY(-1px);border-color:#BCD9DF;color:var(--ink);box-shadow:var(--shadow-sm)}
.tab[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-blue)}
.tab[aria-pressed="true"] .ti{color:rgba(255,255,255,.85)}

.field{display:flex;align-items:center;gap:10px;padding:7px 0}
.field+.field{border-top:1px solid #EDF5F7}
.field label{color:var(--muted);font-size:12px;flex:1;font-weight:500}
.field .unit{font-size:10px;color:var(--dim);min-width:48px;text-align:right;font-weight:500}
.field input{width:92px;background:var(--tint);border:1px solid var(--line2);
  color:var(--blue);font-weight:700;font-size:13px;text-align:right;padding:7px 10px;border-radius:9px;
  font-variant-numeric:tabular-nums;transition:border-color .14s,box-shadow .14s,background .14s}
.field input:hover{background:#E4F4F7}
.field input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(0,162,185,.16)}

.swingbox{background:linear-gradient(135deg,#F0FAFB,#EAF6F8);border:1px solid var(--line2);border-radius:var(--r);padding:15px 16px}
.swinghead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.swinghead .lab{font-size:12px;color:var(--muted);font-weight:500}
.swinghead .val{font-size:23px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--blue) var(--p,20%),#CFE6EA var(--p,20%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:none;box-shadow:0 0 0 5px var(--blue),0 4px 10px -2px rgba(0,162,185,.7);cursor:grab;margin-top:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:5px solid var(--blue);cursor:grab}
.swingscale{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-top:9px;font-weight:600}
.hint{font-size:10.5px;color:var(--dim);margin-top:9px;line-height:1.45}

.resetbtn{margin-top:24px;width:100%;background:#fff;border:1px solid var(--line2);color:var(--muted);
  padding:11px;border-radius:12px;cursor:pointer;font-size:12px;font-weight:600;transition:all .14s}
.resetbtn:hover{border-color:var(--red);color:var(--red);background:#FFF3F1;box-shadow:var(--shadow-sm)}

/* results */
.results{min-width:0;display:flex;flex-direction:column;gap:18px}
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:14px}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;
  box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:10px}
.kpi .v{font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.kpi .vu{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .s{font-size:10.5px;color:var(--muted);margin-top:8px;font-weight:500}
.kpi.hero{background:var(--grad);border:none;box-shadow:var(--shadow-blue);position:relative;overflow:hidden}
.kpi.hero::after{content:"";position:absolute;right:-30px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.kpi.hero .k{color:rgba(255,255,255,.78)}
.kpi.hero .v{color:#fff;font-size:31px}
.kpi.hero .s{color:rgba(255,255,255,.82)}
.pos{color:var(--green)} .neg{color:var(--red)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px 22px}
.chead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px;flex-wrap:wrap}
.chead h2{font-size:16px;font-weight:800;margin:0;letter-spacing:-.02em;color:var(--ink2)}
.chead .sub{font-size:11px;color:var(--muted);font-weight:500}
.cdesc{font-size:11.5px;color:var(--muted);margin:0 0 16px;max-width:64ch;line-height:1.5}

.toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:3px}
.toggle button{appearance:none;border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:700;
  padding:6px 15px;border-radius:7px;cursor:pointer;letter-spacing:.03em;transition:all .14s}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}

svg{display:block;width:100%;height:auto;overflow:visible}
.axislbl{font-size:9px;fill:var(--dim);font-weight:600}
.barlbl{font-size:10.5px;fill:var(--muted);font-weight:600}
.barval{font-size:10px;font-weight:700}
.gridln{stroke:#E6F1F3;stroke-width:1}
.baseln{stroke:#8FAAB2;stroke-width:1.5;stroke-dasharray:3 4}

.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin-top:14px;font-weight:600}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.footnote{font-size:10.5px;color:var(--dim);line-height:1.6;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 20px}
.footnote b{color:var(--muted)}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chart-anim{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes barGrow{from{transform:scaleY(.0001)}to{transform:scaleY(1)}}
.chart-anim .gbar{transform-box:fill-box;transform-origin:bottom;animation:barGrow .55s cubic-bezier(.2,.85,.25,1) both}
.kpi,.card{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}