@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.tool-box{
  --bg:#eef3f9; --surface:#ffffff; --surface-2:#f6f9fd; --fg:#0d1726; --muted:#56687e;
  --border:#d8e2ee; --border-strong:#c3d2e3; --accent:#0f8fd4; --accent-soft:#e2f1fb;
  --track:#dbe6f1;
  --sev-low:#2f9e68; --sev-mod:#d79a1f; --sev-high:#e0702a; --sev-ext:#d23b4e;
  --shadow:0 1px 2px rgba(13,23,38,.05),0 12px 32px -14px rgba(13,23,38,.18);
  --r:16px; --r-sm:11px;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}

@media (prefers-color-scheme:dark){ .tool-box:not([data-theme="light"]){
  --bg:#070d1a; --surface:#0f1a2e; --surface-2:#132339; --fg:#e8eef7; --muted:#8a9cb4;
  --border:#1d2d47; --border-strong:#2a3e5e; --accent:#3cc0f5; --accent-soft:#102a40;
  --track:#1b2b44;
  --sev-low:#3fc17f; --sev-mod:#f0bb4b; --sev-high:#f58b4c; --sev-ext:#f56077;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}}
.tool-box *{box-sizing:border-box}
.tool-box h1, .tool-box h2, .tool-box h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.02em}
.tool-box .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Grid */
.tool-box .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
@media (max-width:860px){.tool-box .grid{grid-template-columns:1fr}}
.tool-box .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.tool-box .panel-pad{padding:clamp(18px,2.6vw,26px)}
.tool-box .panel-title{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.tool-box .ic{display:inline-flex;align-items:center;color:var(--muted)}
.tool-box .ic svg{display:block}
.tool-box .panel-title .ic{font-size:15px}

/* Region chips */
.tool-box .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.tool-box .chip{cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--fg);
  border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:500;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;transition:.14s}
.tool-box .chip:hover{border-color:var(--accent)}
.tool-box .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 5px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.tool-box .chip .flag{display:inline-flex;align-items:center}
.tool-box .chip .flag svg{display:block}

/* Field + slider */
.tool-box .field{margin-bottom:20px}
.tool-box .field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.tool-box .field-head label{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.tool-box .field-head .ic{font-size:15px}
.tool-box .readout{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--accent)}
.tool-box .readout small{color:var(--muted);font-weight:400;font-size:12px}

.tool-box input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:999px;
  background:var(--track);outline:none;cursor:pointer}
.tool-box input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:grab;margin-top:0}
.tool-box input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--surface);
  border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:grab}
.tool-box input[type=range]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:4px}
.tool-box .scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px;font-family:var(--f-mono)}

/* Segmented + selects */
.tool-box .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:460px){.tool-box .two{grid-template-columns:1fr}}
.tool-box .seg{display:flex;flex-wrap:wrap;gap:6px}
.tool-box .seg button{flex:1 1 auto;min-width:0;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--fg);border-radius:var(--r-sm);padding:9px 8px;font-size:12.5px;font-weight:500;font-family:inherit;transition:.14s;white-space:nowrap}
.tool-box .seg button:hover{border-color:var(--accent)}
.tool-box .seg button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.tool-box .days .seg button{flex:1 1 0;padding:9px 4px}

.tool-box .switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);margin-top:4px}
.tool-box .switch-txt b{font-size:13.5px;display:block}
.tool-box .switch-txt span{font-size:12px;color:var(--muted)}
.tool-box .toggle{position:relative;width:48px;height:27px;flex:none;border-radius:999px;border:none;cursor:pointer;
  background:var(--border-strong);transition:.18s;padding:0}
.tool-box .toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.tool-box .toggle[aria-pressed="true"]{background:var(--accent)}
.tool-box .toggle[aria-pressed="true"]::after{left:24px}

.tool-box .txt{width:100%;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--fg);font-family:inherit;font-size:13.5px}
.tool-box .txt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.tool-box .txt::placeholder{color:var(--muted)}

.tool-box .run{width:100%;margin-top:22px;cursor:pointer;border:none;border-radius:var(--r-sm);padding:15px;
  font-family:var(--f-display);font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7d5cff));
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 75%,transparent);transition:.14s}
.tool-box .run:hover{transform:translateY(-1px)}
.tool-box .run:active{transform:translateY(0)}

/* Result panel */
.tool-box .result{position:sticky;top:calc(env(safe-area-inset-top,0px) + 14px)}
.tool-box .gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0 10px}
.tool-box .gauge{position:relative;width:230px;max-width:72vw;aspect-ratio:1}
.tool-box .gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.tool-box .gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tool-box .gauge-pct{font-family:var(--f-display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tool-box .gauge-pct span{font-size:26px;color:var(--muted);font-weight:600}
.tool-box .gauge-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}

.tool-box .verdict{text-align:center;font-family:var(--f-display);font-weight:600;font-size:19px;margin:6px 0 2px;text-wrap:balance}
.tool-box .sub-verdict{text-align:center;color:var(--muted);font-size:13.5px;max-width:40ch;margin:0 auto 18px}

.tool-box .badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.tool-box .badge{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2)}
.tool-box .badge .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.tool-box .badge .v{font-family:var(--f-display);font-weight:600;font-size:16px;display:flex;align-items:center;gap:7px}
.tool-box .sev-pip{width:9px;height:9px;border-radius:50%;flex:none}

.tool-box .breakdown .panel-title{margin-bottom:14px}
.tool-box .bar-row{margin-bottom:13px}
.tool-box .bar-row:last-child{margin-bottom:0}
.tool-box .bar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px}
.tool-box .bar-top .lab{font-weight:500;display:flex;align-items:center;gap:7px}
.tool-box .bar-top .lab .w{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:1px 5px;border-radius:5px}
.tool-box .bar-top .val{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px}
.tool-box .bar-track{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.tool-box .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--accent));transition:width .5s cubic-bezier(.2,.8,.2,1)}

.tool-box .mods{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.tool-box .mod{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border)}
.tool-box .mod .tag{font-family:var(--f-mono);font-size:11px;font-weight:600;margin-left:auto;padding:2px 7px;border-radius:6px}
.tool-box .mod.up .tag{color:var(--sev-ext);background:color-mix(in srgb,var(--sev-ext) 14%,transparent)}
.tool-box .mod.down .tag{color:var(--sev-low);background:color-mix(in srgb,var(--sev-low) 14%,transparent)}

@media (prefers-reduced-motion:reduce){.tool-box *{transition:none!important}}