:root {
  --bg:#0d1117; --panel:#161b22; --panel2:#1c222c; --line:#2a3342; --ink:#dbe3ec;
  --dim:#7d8b9f; --accent:#3fb27f; --accent-hi:#57d9a0; --amber:#e8b34d; --red:#d45d63;
  --radius:12px;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; }
body {
  background:var(--bg); color:var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: max(10px, env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));
  max-width: 720px; margin: 0 auto;
}
header { display:flex; align-items:center; justify-content:space-between; padding:8px 4px 14px; }
h1 { font-size:20px; letter-spacing:.14em; color:var(--accent); font-weight:700; }
.sub { font-size:11px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }
.offline { font-size:10px; letter-spacing:.1em; color:var(--amber); border:1px solid var(--amber); border-radius:99px; padding:2px 8px; }
.hidden { display:none !important; }

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}
h2 { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
h2 .mini { margin-left:auto; }
.mini {
  background:none; border:1px solid var(--line); color:var(--dim); border-radius:8px;
  font-size:11px; padding:3px 10px; cursor:pointer;
}
.mini:active { background:var(--panel2); }

.seg { display:flex; gap:6px; margin-bottom:10px; }
.seg button {
  flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:9px 0; font-size:14px; cursor:pointer;
}
.seg button.on { background:var(--accent); border-color:var(--accent); color:#06281a; font-weight:600; }

.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.chips button {
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  border-radius:99px; padding:7px 15px; font-size:14px; cursor:pointer;
}
.chips button.on { color:var(--accent-hi); border-color:var(--accent); background:rgba(63,178,127,.08); }

input[type=search] {
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:11px 12px; font-size:16px; margin-bottom:8px;
}
select {
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:11px 8px; font-size:16px; -webkit-appearance:none; appearance:none;
}
select option { background:var(--panel2); color:var(--ink); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.grid3 > :only-child { grid-column:1 / -1; }
label { display:flex; flex-direction:column; font-size:11px; color:var(--dim); gap:3px; }
.unit { color:var(--dim); font-size:10px; text-transform:lowercase; }
input[type=number], input[type=text] {
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:10px 10px; font-size:16px;
}
input:focus, select:focus { outline:none; border-color:var(--accent); }

.fpe-line { margin-top:10px; font-size:13px; color:var(--dim); }
.fpe-line b { color:var(--accent-hi); font-size:16px; }
.hint { font-size:11px; color:var(--dim); margin-top:8px; }

.summary { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.summary .chip {
  background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  padding:6px 10px; font-size:12px; color:var(--dim);
}
.summary .chip b { color:var(--ink); font-size:13px; }

#graph { width:100%; height:220px; display:block; margin-bottom:10px; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:9px; }
table { border-collapse:collapse; width:100%; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
th, td { padding:6px 9px; text-align:right; border-bottom:1px solid var(--line); }
th:first-child, td:first-child { text-align:left; color:var(--dim); }
thead th { position:sticky; top:0; background:var(--panel2); color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
tbody tr:nth-child(even) { background:rgba(255,255,255,.015); }
tr.zero-row td { color:var(--accent-hi); font-weight:600; background:rgba(63,178,127,.10); }
td.neg { color:var(--amber); }
td.dim2 { color:var(--dim); }

footer { margin-top:18px; font-size:11px; color:var(--dim); display:flex; flex-direction:column; gap:3px; text-align:center; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; width:100%; max-width:420px; }
.modal-box h3 { font-size:15px; margin-bottom:12px; }
.modal-box label { margin-bottom:10px; }
.modal-actions { display:flex; gap:8px; margin-top:14px; }
.modal-actions button { flex:1; padding:10px 0; border-radius:9px; border:1px solid var(--accent); background:var(--accent); color:#06281a; font-size:14px; font-weight:600; cursor:pointer; }
.modal-actions .ghost { background:none; color:var(--dim); border-color:var(--line); font-weight:400; }
#profiles .prof { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
#profiles .prof b { flex:1; font-size:14px; font-weight:500; }
#profiles .prof span { font-size:11px; color:var(--dim); }
#profiles .prof button { background:none; border:none; color:var(--red); font-size:13px; padding:4px 8px; cursor:pointer; }
#profiles .empty { color:var(--dim); font-size:13px; padding:12px 0; }

/* ---- active setup strip (minimal) ---- */
.strip { display:flex; gap:6px; align-items:stretch; margin-bottom:6px; }
.strip select {
  flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:10px 10px; font-size:14px; font-weight:600;
  -webkit-appearance:none; appearance:none;
}
.strip .mini {
  background:var(--panel); border:1px solid var(--line); color:var(--dim);
  border-radius:10px; padding:0 14px; font-size:12px; cursor:pointer; min-width:52px;
}
.strip .mini:active, .icon-btn.on { background:var(--panel2); }
.icon-btn {
  background:var(--panel); border:1px solid var(--line); color:var(--dim);
  border-radius:10px; width:44px; font-size:17px; cursor:pointer;
}
.icon-btn.on { color:var(--accent-hi); border-color:var(--accent); }
.strip-sub { font-size:11px; color:var(--dim); padding:0 4px 10px; }

/* ---- shot card: laser range in, answer out ---- */
.shot { text-align:center; }
.shot-row {
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  font-size:15px; color:var(--dim); margin-bottom:10px;
}
.shot-row .shot-label { font-size:15px; color:var(--dim); }
.shot-row input {
  width:150px; text-align:center; font-size:44px; font-weight:700; color:var(--accent-hi);
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:6px 10px; font-variant-numeric:tabular-nums;
}
.u-lg { font-size:18px; }
.seg-small { max-width:220px; margin:0 auto 8px; }
.seg-small button { padding:6px 0; font-size:13px; }
.shot-answer { margin:6px 0 10px; }
.shot-answer .big { font-size:38px; font-weight:800; color:var(--amber); line-height:1.1; }
.shot-answer .big .u { font-size:16px; color:var(--dim); font-weight:600; }
.shot-answer .sub2 { font-size:13px; color:var(--dim); margin-top:2px; }
.shot-answer .windline { font-size:13px; color:var(--accent-hi); margin-top:4px; }
#reticle { width:100%; height:210px; display:block; margin-top:4px; }

/* ---- settings (collapsed) ---- */
.settings-title {
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  margin:4px 2px 10px; display:block;
}
#settings.hidden { display:none; }
#settings .card { margin-bottom:12px; }

/* ---- error banner + version ---- */
.errbanner {
  background:#4a1f22; border:1px solid var(--red); color:#ffd7d9;
  border-radius:10px; padding:10px 12px; margin-bottom:10px;
  font-size:13px; line-height:1.4; word-break:break-word;
}