*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg1: #fff; --bg2: #f5f5f0; --bg3: #eceae3;
  --t1: #1a1a18; --t2: #5f5e5a; --t3: #888780;
  --bd: #d3d1c7; --bd2: #b4b2a9;
  --acc: #534AB7; --acc-bg: #EEEDFE; --acc-t: #3C3489;
  --ok: #0F6E56; --ok-bg: #E1F5EE; --ok-t: #085041;
  --er: #A32D2D; --er-bg: #FCEBEB; --er-t: #791F1F;
  --rad: 8px; --radl: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg1: #1e1e1c; --bg2: #161614; --bg3: #2c2c2a;
    --t1: #f1efe8; --t2: #b4b2a9; --t3: #888780;
    --bd: #444441; --bd2: #5f5e5a;
    --acc-bg: #26215C; --acc-t: #AFA9EC;
    --ok-bg: #04342C; --ok-t: #9FE1CB;
    --er-bg: #501313; --er-t: #F7C1C1;
  }
}

body { font-family: system-ui, sans-serif; background: var(--bg2); color: var(--t1); }

.app { display: flex; flex-direction: column; height: 100vh; }

header {
  background: var(--bg1); border-bottom: .5px solid var(--bd);
  padding: 10px 20px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.logo { font-size: 15px; font-weight: 500; }
.api-url { font-size: 12px; color: var(--t3); margin-left: auto; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd2); }
.status-dot.ok { background: #1D9E75; }
.status-dot.err { background: #E24B4A; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.ok { background: #1D9E75; }
.dot.err { background: #E24B4A; }

.layout { display: grid; grid-template-columns: 260px 1fr; flex: 1; overflow: hidden; }

.sidebar {
  background: var(--bg1); border-right: .5px solid var(--bd);
  overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 16px;
}
.sidebar section { display: flex; flex-direction: column; gap: 6px; }
.sidebar h3 { font-size: 11px; font-weight: 500; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.sidebar label { font-size: 12px; color: var(--t2); }
.sidebar select, .sidebar input[type=number] {
  background: var(--bg2); border: .5px solid var(--bd); border-radius: var(--rad);
  padding: 6px 8px; font-size: 13px; color: var(--t1); width: 100%; outline: none;
}
.sidebar input[type=range] { width: 100%; accent-color: var(--acc); }
.btn-full { width: 100%; padding: 8px; background: var(--bg2); border: .5px solid var(--bd2); border-radius: var(--rad); font-size: 13px; cursor: pointer; color: var(--t1); }
.btn-full:hover { background: var(--bg3); }

.sig-info { font-size: 11px; color: var(--t3); display: flex; flex-direction: column; gap: 2px; }
.iq-canvas { width: 100%; border: .5px solid var(--bd); border-radius: var(--rad); background: var(--bg2); }

.history { border: .5px solid var(--bd); border-radius: var(--rad); overflow: hidden; }
.history-item { padding: 6px 10px; border-bottom: .5px solid var(--bd); font-size: 12px; }
.history-item:last-child { border-bottom: none; }
.h-ep { font-weight: 500; color: var(--acc); margin-right: 4px; }
.h-label { color: var(--t2); }
.h-time { font-size: 10px; color: var(--t3); display: block; }
.h-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--t3); }

main { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.tabs { display: flex; gap: 0; border-bottom: .5px solid var(--bd); }
.tab { padding: 8px 16px; font-size: 13px; color: var(--t3); cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -.5px; }
.tab.active { color: var(--acc); border-bottom-color: var(--acc); font-weight: 500; }

.card { background: var(--bg1); border: .5px solid var(--bd); border-radius: var(--radl); padding: 16px 20px; }
.card h2 { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.card h3 { font-size: 13px; font-weight: 500; margin-bottom: 10px; color: var(--t2); }
.card h4 { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.hint { font-size: 12px; color: var(--t3); margin-bottom: 12px; }

.btn-row, .btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
button {
  background: transparent; border: .5px solid var(--bd2); border-radius: var(--rad);
  padding: 7px 14px; font-size: 13px; color: var(--t1); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover:not(:disabled) { background: var(--bg2); }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn-primary:hover:not(:disabled) { opacity: .9; background: var(--acc); }

.results-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.big-badge { display: inline-block; padding: 4px 12px; border-radius: var(--rad); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.big-badge.accent { background: var(--acc-bg); color: var(--acc-t); }
.big-badge.ok { background: var(--ok-bg); color: var(--ok-t); }
.big-badge.danger { background: var(--er-bg); color: var(--er-t); }

.meta { font-size: 11px; color: var(--t3); margin-bottom: 8px; }

.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bar-label { font-size: 12px; color: var(--t1); min-width: 72px; }
.bar-track { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--acc); border-radius: 3px; transition: width .3s; }
.bar-pct { font-size: 11px; color: var(--t2); min-width: 36px; text-align: right; }

.metric-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.metric { background: var(--bg2); border-radius: var(--rad); padding: 8px 12px; flex: 1; min-width: 80px; }
.mval { font-size: 18px; font-weight: 500; color: var(--t1); }
.mlbl { font-size: 11px; color: var(--t3); margin-top: 2px; }

.track { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.fill { height: 100%; border-radius: 3px; transition: width .4s; }
.fill.ok { background: var(--ok); }
.fill.danger { background: var(--er); }

.emb-vis { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.emb-cell { width: 13px; height: 13px; border-radius: 2px; }

.json-box { background: var(--bg2); border: .5px solid var(--bd); border-radius: var(--rad); padding: 12px; font-size: 11px; font-family: monospace; overflow-x: auto; white-space: pre; max-height: 300px; overflow-y: auto; color: var(--t1); }

.alert { padding: 10px 14px; border-radius: var(--rad); font-size: 13px; }
.alert.err { background: var(--er-bg); color: var(--er-t); }

.compare-layout { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.compare-side { display: flex; flex-direction: column; gap: 8px; }
.compare-mid { display: flex; flex-direction: column; align-items: center; }
.compare-result { width: 100%; }
.compare-empty { text-align: center; color: var(--t3); font-size: 13px; padding: 20px; border: .5px dashed var(--bd); border-radius: var(--rad); }
.fp-saved { font-size: 12px; color: var(--ok-t); background: var(--ok-bg); padding: 6px 10px; border-radius: var(--rad); }
.fp-empty { font-size: 12px; color: var(--t3); font-style: italic; }
.threshold-note { font-size: 11px; color: var(--t3); text-align: center; margin-top: 6px; }

textarea { width: 100%; background: var(--bg2); border: .5px solid var(--bd); border-radius: var(--rad); padding: 8px 10px; font-size: 12px; font-family: monospace; color: var(--t1); outline: none; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.form-row label { font-size: 12px; color: var(--t2); display: block; margin-bottom: 4px; }
.form-row input { width: 100%; background: var(--bg2); border: .5px solid var(--bd); border-radius: var(--rad); padding: 6px 8px; font-size: 13px; color: var(--t1); outline: none; }

.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }