* { box-sizing: border-box; }
:root {
  --ink:#0e1b19; --paper:#fbfaf6; --card:#ffffff; --line:#e6e3d8;
  --text:#16221f; --muted:#6f7d78; --gold:#a8761f; --gold2:#cda44e;
  --green:#2f7d5b; --red:#bd4a30;
}
html,body { margin:0; padding:0; }
body {
  font-family:'Inter',system-ui,sans-serif; color:var(--text);
  background:var(--ink); min-height:100vh; line-height:1.5;
}
.wrap { max-width:1080px; margin:0 auto; padding:0 18px 72px; }
header { padding:44px 0 26px; color:#eef2ee; }
.eyebrow { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); margin:0 0 16px; }
h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(30px,6.2vw,50px); line-height:1.02; margin:0; letter-spacing:-.02em; }
.sub { color:#9fb0aa; max-width:66ch; margin:14px 0 0; font-size:14.5px; }

.search { background:rgba(255,255,255,.04); border:1px solid rgba(205,164,78,.28); border-radius:14px; padding:18px; margin-bottom:22px; }
.searchrow { display:flex; gap:10px; flex-wrap:wrap; }
.input-main { flex:1 1 220px; background:#0b1614; border:1px solid rgba(255,255,255,.14); color:#eef2ee; font-family:'IBM Plex Mono',monospace; font-size:15px; padding:12px 14px; border-radius:10px; outline:none; }
.input-main::placeholder { color:#5f706b; }
.input-main:focus { border-color:var(--gold2); }
.btn { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; border:none; border-radius:10px; padding:12px 20px; cursor:pointer; transition:transform .12s ease, filter .15s ease; }
.btn:active { transform:translateY(1px); }
.btn-go { background:var(--gold); color:#1a1206; }
.btn-go:hover { filter:brightness(1.07); }
.btn-go:disabled { opacity:.55; cursor:not-allowed; }
.btn-ghost { background:transparent; color:#cda44e; border:1px solid rgba(205,164,78,.4); }
.btn-ghost:hover { background:rgba(205,164,78,.1); }
.keys { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.keybox label { display:block; font-size:11.5px; color:#9fb0aa; margin-bottom:5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; }
.keybox input { width:100%; background:#0b1614; border:1px solid rgba(255,255,255,.12); color:#cfe0d9; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 11px; border-radius:8px; outline:none; }
.keybox input:focus { border-color:var(--gold2); }
.keybox small { display:block; color:#7d8d88; font-size:11px; margin-top:4px; }
.keybox small a { color:#cda44e; }
.ownerrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.modechip { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; border:1px solid rgba(205,164,78,.5); color:var(--gold2); border-radius:6px; padding:2px 8px; white-space:nowrap; }
.modenote { font-size:12px; color:#7d8d88; }
.loginbox { margin-left:auto; font-size:12px; color:#9fb0aa; }
.loginbox summary { cursor:pointer; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; }
.loginbox summary:hover { color:#cda44e; }
.loginrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.loginrow input { background:#0b1614; border:1px solid rgba(255,255,255,.14); color:#eef2ee; font-size:13px; padding:8px 10px; border-radius:8px; outline:none; width:130px; }
.loginrow input:focus { border-color:var(--gold2); }
.btn-sm { padding:8px 14px; font-size:13px; }
.loginmsg { color:#e89178; font-size:12px; margin:6px 0 0; min-height:14px; }
#logoutBtn { margin-left:auto; }
.status { margin:12px 0 0; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#9fb0aa; min-height:16px; white-space:pre-wrap; }
.status.err { color:#e89178; }
.srcnote { margin:6px 0 0; font-size:12px; color:#7d8d88; }

.grid { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.cardhead { display:flex; align-items:baseline; gap:10px; margin:0 0 18px; }
.tag { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--gold); border:1px solid var(--gold); border-radius:6px; padding:1px 7px; }
.cardtitle { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:0; letter-spacing:-.01em; }
.cardsub { color:var(--muted); font-size:12.5px; margin:-12px 0 18px; }
.secthead { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.divider { height:1px; background:var(--line); margin:18px 0; }
.sub2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }

.field { margin-bottom:14px; }
.label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:6px; flex-wrap:wrap; }
.autotag { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; background:var(--gold); color:#fff; border-radius:4px; padding:1px 5px; }
.unit { font-size:11.5px; color:var(--muted); }
.numinput { width:100%; background:#faf8f1; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--text); outline:none; }
.numinput:focus { border-color:var(--gold); background:#fff; }
.hint { font-size:11.5px; color:var(--muted); margin-top:4px; }

.slider-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.slider-val { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; color:var(--gold); }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:var(--line); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; border:2px solid #fff; }

.result { background:var(--ink); border-radius:14px; padding:22px; margin-top:4px; color:#eef2ee; }
.result-lab { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#cda44e; margin:0 0 6px; }
.result-big { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:clamp(34px,8vw,46px); line-height:1; margin:0; transition:color .35s ease; }
.result-cur { font-size:.45em; color:#9fb0aa; margin-right:8px; font-weight:500; }
.result-row { display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:13.5px; }
.result-row .k { color:#9fb0aa; }
.upside { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:18px; }
.warn { background:#fbeee9; border:1px solid #e8b9a7; color:#9b3b21; font-size:12.5px; border-radius:8px; padding:8px 11px; margin-top:12px; }
.mini { display:flex; justify-content:space-between; font-size:12px; color:#9fb0aa; margin-top:8px; font-family:'IBM Plex Mono',monospace; }

.peg-big { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:clamp(40px,10vw,58px); line-height:1; margin:6px 0; transition:color .35s ease; }
.badge { display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; border-radius:8px; padding:6px 14px; margin-top:4px; }
.gauge { height:8px; border-radius:8px; background:linear-gradient(90deg,#2f7d5b 0%,#cda44e 50%,#bd4a30 100%); position:relative; margin:18px 0 8px; }
.gauge-pin { position:absolute; top:-4px; width:4px; height:16px; border-radius:3px; background:#16221f; transform:translateX(-50%); transition:left .35s ease; }
.gauge-scale { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.peg-note { font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.55; }

.sens { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin-top:18px; }
table { width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; }
th,td { padding:9px 6px; text-align:center; font-size:12.5px; }
.corner { font-family:'Inter',sans-serif; font-size:10.5px; color:var(--muted); font-weight:500; text-align:left; line-height:1.3; }
.colhead,.rowhead { color:var(--muted); font-weight:600; font-size:12px; }
.cell { border-radius:7px; font-weight:500; }
.cell.base { outline:2px solid var(--ink); outline-offset:-2px; font-weight:600; }
.legend { display:flex; align-items:center; gap:14px; margin-top:16px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.legend .sw { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:5px; vertical-align:-2px; }

.foot { color:#7d8d88; font-size:12px; margin-top:26px; line-height:1.6; }
.foot b { color:#9fb0aa; }
@media (max-width:760px){ .grid{grid-template-columns:1fr;} .keys{grid-template-columns:1fr;} .sub2{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .result-big,.peg-big,.gauge-pin,.btn{transition:none;} }