/* Pgari Live · shared glass-dark tokens — exakt samma vokabulär som 06-glass-dark
   som Arash älskade. ALDRIG heritage/skeumorfiskt/serif/folie. */
:root {
  /* DARK BLUE — den Arash älskade. Djup marin med kall glas-glow. */
  --bg-deep: #050d22;
  --bg-mid:  #0a173a;
  --bg-accent-1: rgba(95,144,210,0.08);
  --bg-accent-2: rgba(212,166,74,0.05);
  --text:   #f1f3f6;
  --text-2: #cdd1d8;
  --text-3: #8a8e96;
  --text-4: #45494f;
  --glass:        rgba(255,255,255,0.035);
  --glass-2:      rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.08);
  --line:   rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.04);
  --blue:      #a8b9cc;
  --blue-soft: rgba(168,185,204,0.18);
  --gold:      #d4af37;
  --green:     #5fbb87;
  --green-soft:rgba(95,187,135,0.14);
  --red:       #e35577;
  --red-soft:  rgba(227,85,119,0.14);
  --amber:     #f7c843;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% 0%, var(--bg-accent-1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, var(--bg-accent-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:13px;min-height:100vh;
  padding:24px 16px 28px;
  -webkit-font-smoothing:antialiased;
}
.panel{
  background:var(--glass);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.sub-h{font-size:11px;letter-spacing:2.2px;color:var(--text-3);text-transform:uppercase;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.k{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.3px;font-weight:600}
.v{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;margin-top:3px}
.v.neg{color:var(--red)} .v.pos{color:var(--green)}

/* Power-knapp (matchar prod) */
.power-btn{width:42px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-2);color:var(--text-3);border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:0}
.power-btn svg{width:14px;height:14px}
.power-btn.on{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55);box-shadow:inset 0 0 8px rgba(255,255,255,.35)}
.power-btn.on svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.85))}

/* AUTOMATIC banner */
.ready-banner{padding:13px;border-radius:14px;text-align:center;font-size:12px;font-weight:700;letter-spacing:5px;text-transform:uppercase;border:2px solid #d5a975;background:rgba(213,169,117,.14);color:#fff;animation:glow-warm-amber 1.2s infinite}
@keyframes glow-warm-amber{0%,100%{box-shadow:0 0 6px #d5a975}50%{box-shadow:0 0 18px #d5a975}}

/* Level meter — vertikal som prod */
.level-meter{position:relative;width:9.8px;height:200px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px}
.level-meter .fill{position:absolute;left:0;right:0;border-radius:99px}
.level-meter .threshold{position:absolute;left:-3px;right:-3px;top:50%;height:1px;background:rgba(255,255,255,.5);box-shadow:0 0 4px rgba(255,255,255,.25)}
.level-meter .marker{position:absolute;left:-4px;right:-14px;height:2px;background:rgba(255,255,255,.85);border-radius:1px}
.level-meter .meter-val{position:absolute;left:calc(100% + 10px);transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;padding:1px 7px;border:1px solid var(--line);border-radius:999px;background:rgba(10,14,26,.8);white-space:nowrap}
.component-cell{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);min-width:84px}
.component-cell.long{background:var(--green-soft);border-color:rgba(95,187,135,.4)}
.component-cell.short{background:var(--red-soft);border-color:rgba(227,85,119,.4)}
.component-cell .label{font-size:10px;letter-spacing:1.4px;color:var(--text-3);text-transform:uppercase;font-weight:600;text-align:center}
.component-cell .value{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.5px}
.component-cell.long .value{color:var(--green)}
.component-cell.short .value{color:var(--red)}
.component-cell.long .level-meter .fill{background:linear-gradient(0deg,rgba(95,187,135,.2),rgba(95,187,135,.55))}
.component-cell.short .level-meter .fill{background:linear-gradient(180deg,rgba(227,85,119,.2),rgba(227,85,119,.55))}
.component-cell.short .level-meter .marker{background:var(--red);box-shadow:0 0 6px rgba(227,85,119,.45)}
.component-cell.long .level-meter .marker{background:var(--green);box-shadow:0 0 6px rgba(95,187,135,.45)}

/* Cert auto-quote (2x2 like prod) */
.auto-quote{padding:8px 12px;border:2px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);position:relative}
.auto-quote.short{border-color:rgba(227,85,119,.3)}
.auto-quote.long{border-color:rgba(95,187,135,.3)}
.auto-quote.short.active{border-color:var(--red);background:var(--red-soft);box-shadow:0 0 14px rgba(227,85,119,.35)}
.auto-quote.long.active{border-color:var(--green);background:var(--green-soft);box-shadow:0 0 14px rgba(95,187,135,.35)}
.auto-quote .aq-side{font-size:10px;font-weight:700;letter-spacing:1.4px}
.auto-quote.short .aq-side{color:var(--red)} .auto-quote.long .aq-side{color:var(--green)}
.auto-quote .aq-name{font-size:11px;color:var(--text-3);margin-top:1px}
.auto-quote .aq-prices{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;margin-top:2px;letter-spacing:.5px}
.auto-quote .aq-meta{font-size:10px;color:var(--text-3);margin-top:3px}

/* Manual-execution chips */
.fn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.fn-chip{padding:10px 12px;background:var(--glass-2);border:1px solid var(--line);border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-size:11px}
.fn-chip .fn-name{color:var(--text-3);letter-spacing:1.2px;text-transform:uppercase;font-weight:600}
.fn-chip.on{border-color:rgba(95,187,135,.45);background:rgba(95,187,135,.10);color:var(--green)}
.exec-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.exec-btn{padding:14px;font-weight:700;letter-spacing:3px;font-size:13px;border-radius:10px;cursor:pointer;font-family:inherit}
.exec-btn.buy{background:rgba(95,187,135,.15);color:var(--green);border:1.5px solid rgba(95,187,135,.55)}
.exec-btn.sell{background:rgba(227,85,119,.15);color:var(--red);border:1.5px solid rgba(227,85,119,.55)}

/* Trades log */
.trades-table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:10.5px}
.trades-table th{font-size:9px;letter-spacing:1.5px;color:var(--text-3);text-transform:uppercase;font-weight:600;padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-mid);z-index:2}
.trades-table td{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.03)}
.trades-table td.pos{color:var(--green)} .trades-table td.neg{color:var(--red)}
.trades-table td.s{color:var(--red);font-weight:700} .trades-table td.l{color:var(--green);font-weight:700}

/* Info-strip */
.info-strip{display:grid;gap:6px}
.info-cell{background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.info-cell .k{font-size:9px;letter-spacing:1.2px;margin-bottom:3px}
.info-cell .v{font-size:13px;margin-top:0}
.info-cell .v.amber{color:var(--gold)}

/* Concept label */
.concept-label{position:fixed;bottom:10px;right:14px;font-size:9px;letter-spacing:5px;color:var(--text-4);text-transform:uppercase;z-index:99}
.back-link{position:fixed;top:14px;left:14px;font-size:10px;letter-spacing:2px;color:var(--text-3);text-decoration:none;background:var(--glass-2);padding:7px 12px;border-radius:8px;border:1px solid var(--line);z-index:99}
.back-link:hover{color:var(--text);border-color:var(--text-3)}