/* AEON_UI_THEME_V3 — Terminal Professional */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg:      #080c10;
  --bg1:     #0c1118;
  --bg2:     #111820;
  --bg3:     #161e28;
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.12);
  --text:    #e8edf2;
  --muted:   #6b7a8d;
  --muted2:  #4a5568;
  --accent:  #00e676;
  --accent2: #00994d;
  --good:    #00e676;
  --warn:    #ffb300;
  --bad:     #ff4444;
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'IBM Plex Sans', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;}

body::before{
  content:'';position:fixed;inset:0;z-index:999;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
}

a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);}
.muted{color:var(--muted);}
.small{font-size:11px;color:var(--muted);}
.hr{height:1px;background:var(--border);margin:12px 0;}

/* ---- LAYOUT ---- */
.app{display:grid;grid-template-columns:220px 1fr;height:100%;}

/* ---- SIDEBAR ---- */
.nav{
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.nav::after{
  content:'';position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:.2;
}
.brand{
  padding:22px 20px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.brand-icon{
  width:26px;height:26px;border:1px solid var(--accent);
  display:grid;place-items:center;flex-shrink:0;
}
.brand-icon::before{
  content:'';width:7px;height:7px;
  background:var(--accent);box-shadow:0 0 10px var(--accent);
}
.brand-name{font-size:13px;font-weight:700;letter-spacing:.25em;}
.brand-ver{font-size:9px;color:var(--muted2);letter-spacing:.15em;font-family:var(--mono);margin-top:2px;}

.nav-section{padding:14px 12px 6px;}
.nav-section-label{
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);padding:0 8px;margin-bottom:5px;
}
.link{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:2px;
  font-size:12px;font-weight:500;color:var(--muted);
  border:1px solid transparent;cursor:pointer;
  transition:all .15s;letter-spacing:.02em;position:relative;
}
.link:hover{color:var(--text);background:rgba(255,255,255,.04);}
.link.active{
  color:var(--accent);background:rgba(0,230,118,.06);
  border-color:rgba(0,230,118,.15);
}
.link.active::before{
  content:'';position:absolute;left:-1px;top:20%;bottom:20%;
  width:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);
}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--muted2);flex-shrink:0;}
.nav-dot.good{background:var(--good);box-shadow:0 0 5px var(--good);}
.nav-dot.warn{background:var(--warn);}
.nav-dot.bad{background:var(--bad);}
.nav-dot.accent{background:var(--accent);box-shadow:0 0 5px var(--accent);}
.nav .sep{height:1px;background:var(--border);margin:10px 12px;}

.nav-footer{
  margin-top:auto;padding:12px 20px;
  border-top:1px solid var(--border);
  font-size:10px;color:var(--muted2);font-family:var(--mono);
}
.pulse-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 5px var(--good);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- MAIN ---- */
.main{display:flex;flex-direction:column;background:var(--bg);overflow:hidden;}

.top{
  display:flex;align-items:center;gap:14px;
  padding:0 24px;height:50px;
  border-bottom:1px solid var(--border);
  background:var(--bg1);flex-shrink:0;
}
.title{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.title span{color:var(--text);}
.right{margin-left:auto;display:flex;align-items:center;gap:10px;}

.chip{
  display:flex;align-items:center;gap:5px;
  padding:4px 9px;background:var(--bg2);border:1px solid var(--border);
  font-size:10px;font-weight:500;letter-spacing:.05em;
  font-family:var(--mono);color:var(--muted);
}
.chip.live{border-color:rgba(0,230,118,.2);color:var(--good);background:rgba(0,230,118,.05);}

.btn{
  padding:7px 13px;background:transparent;
  border:1px solid var(--border2);color:var(--text);
  font-size:11px;font-weight:600;letter-spacing:.08em;
  cursor:pointer;font-family:var(--sans);transition:all .15s;
}
.btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,230,118,.05);}
.btn-good{border-color:rgba(0,230,118,.3);color:var(--good);background:rgba(0,230,118,.06);}
.btn-bad{border-color:rgba(255,68,68,.3);color:var(--bad);background:rgba(255,68,68,.06);}
.btn-warn{border-color:rgba(255,179,0,.3);color:var(--warn);background:rgba(255,179,0,.06);}
.btn-sm{padding:4px 9px;font-size:10px;}

/* ---- VIEW ---- */
.view{flex:1;overflow-y:auto;padding:20px 24px;}
.view::-webkit-scrollbar{width:3px;}
.view::-webkit-scrollbar-thumb{background:var(--border2);}

/* ---- GRID ---- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-content:start;}
.col-12{grid-column:span 12}.col-9{grid-column:span 9}.col-8{grid-column:span 8}
.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}

/* ---- SUMMARY STRIP ---- */
.summary-strip{
  display:grid;grid-template-columns:repeat(4,1fr) auto;
  gap:1px;background:var(--border);
  border:1px solid var(--border);margin-bottom:20px;
}
.summary-cell{background:var(--bg1);padding:14px 18px;}
.s-label{
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:7px;font-family:var(--mono);
}
.s-val{font-size:20px;font-weight:700;font-family:var(--mono);letter-spacing:-.01em;}
.s-val.pos{color:var(--good);}
.s-val.neg{color:var(--bad);}
.s-val.warn{color:var(--warn);}
.s-sub{font-size:10px;color:var(--muted2);margin-top:3px;font-family:var(--mono);}
.summary-action{background:var(--bg1);padding:14px 18px;display:flex;align-items:center;}

/* ---- SECTION HEADER ---- */
.section-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.section-title{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.section-count{
  font-size:10px;font-family:var(--mono);color:var(--muted2);
  background:var(--bg2);border:1px solid var(--border);padding:1px 6px;
}
.section-line{flex:1;height:1px;background:var(--border);}

/* ---- FIRM BLOCK ---- */
.firm-block{margin-bottom:14px;animation:fadeUp .25s ease both;}
.firm-block:nth-child(2){animation-delay:.04s;}
.firm-block:nth-child(3){animation-delay:.08s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.firm-header{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:var(--bg2);
  border:1px solid var(--border);border-bottom:none;
}
.firm-name{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.firm-env{
  font-size:9px;font-family:var(--mono);padding:2px 6px;
  border:1px solid rgba(0,230,118,.25);color:var(--accent);letter-spacing:.08em;
}
.firm-env.demo{border-color:rgba(255,179,0,.25);color:var(--warn);}
.firm-connected{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--good);font-family:var(--mono);}
.firm-error{font-size:10px;color:var(--bad);font-family:var(--mono);}
.firm-meta{margin-left:auto;font-size:10px;color:var(--muted2);font-family:var(--mono);}

/* ---- ACCOUNT TABLE ---- */
.acct-table{width:100%;border-collapse:collapse;border:1px solid var(--border);}
.acct-table th{
  background:var(--bg3);padding:7px 14px;
  font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted2);text-align:left;border-bottom:1px solid var(--border);
  font-family:var(--mono);
}
.acct-table td{
  padding:11px 14px;border-bottom:1px solid var(--border);
  font-size:12px;font-family:var(--mono);background:var(--bg1);
}
.acct-table tr:last-child td{border-bottom:none;}
.acct-table tr:hover td{background:var(--bg2);}
.acct-id{color:var(--muted);font-size:11px;}
.val-pos{color:var(--good);font-weight:600;}
.val-neg{color:var(--bad);font-weight:600;}
.val-neu{color:var(--text);}

/* ---- HEALTH BAR ---- */
.health-wrap{display:flex;flex-direction:column;gap:3px;}
.health-row{display:flex;align-items:center;gap:8px;}
.health-bg{flex:1;height:3px;background:var(--bg3);border:1px solid var(--border);max-width:80px;}
.health-fill{height:100%;transition:width .4s;}
.health-fill.good{background:var(--good);box-shadow:0 0 5px var(--good);}
.health-fill.warn{background:var(--warn);}
.health-fill.bad{background:var(--bad);box-shadow:0 0 5px var(--bad);}
.health-pct{font-size:10px;color:var(--muted);min-width:32px;}
.health-pct.bad{color:var(--bad);}
.health-floor{font-size:10px;font-family:var(--mono);color:#ffffff;opacity:1;font-weight:600;}.btn-flat{background:transparent;border:1px solid var(--bad);color:var(--bad);font-family:var(--mono);font-size:10px;padding:2px 6px;cursor:pointer;letter-spacing:1px;}.btn-flat:hover{background:var(--bad);color:#000;}

/* ---- POSITION TAG ---- */
.pos-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 6px;border:1px solid rgba(0,230,118,.2);
  font-size:10px;color:var(--accent);font-family:var(--mono);
  background:rgba(0,230,118,.05);
}

/* ---- ERROR MSG ---- */
.err-msg{
  padding:7px 12px;background:rgba(255,68,68,.08);
  border:1px solid rgba(255,68,68,.2);color:var(--bad);
  font-size:11px;font-family:var(--mono);margin-bottom:8px;
}

/* ---- WIZARD (ADD FIRM FORM) ---- */
.wizard{border:1px solid var(--border);background:var(--bg1);margin-top:4px;}
.wizard-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg2);
}
.wizard-step{
  width:20px;height:20px;border:1px solid var(--accent);
  display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--accent);font-family:var(--mono);
}
.wizard-title{font-size:12px;font-weight:600;letter-spacing:.06em;}
.wizard-note-header{font-size:10px;color:var(--muted2);margin-left:auto;font-family:var(--mono);}
.wizard-body{padding:18px;}
.wizard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field-label{
  font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted2);font-family:var(--mono);
}
.field-input{
  background:var(--bg);border:1px solid var(--border2);
  color:var(--text);padding:8px 11px;
  font-size:12px;font-family:var(--mono);outline:none;transition:border-color .15s;
}
.field-input:focus{border-color:var(--accent);background:rgba(0,230,118,.03);}
.field-select{
  background:var(--bg);border:1px solid var(--border2);
  color:var(--text);padding:8px 11px;
  font-size:12px;font-family:var(--mono);outline:none;appearance:none;cursor:pointer;
}
.field-select option{background:var(--bg1);}
.wizard-footer{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-top:1px solid var(--border);background:var(--bg2);
}
.wizard-note{font-size:10px;color:var(--muted2);font-family:var(--mono);}
.wizard-note .warn-text{color:var(--warn);}

/* ---- CARDS (overview etc) ---- */
.card{
  background:var(--bg1);border:1px solid var(--border);padding:14px;
}
.card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.card .head .h{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.card .head .meta{font-size:10px;color:var(--muted2);font-family:var(--mono);}

/* ---- BADGES ---- */
.badge{
  display:inline-flex;align-items:center;padding:3px 7px;
  font-size:10px;font-weight:600;font-family:var(--mono);
  border:1px solid var(--border);color:var(--muted);
}
.badge.good{border-color:rgba(0,230,118,.3);color:var(--good);background:rgba(0,230,118,.07);}
.badge.warn{border-color:rgba(255,179,0,.3);color:var(--warn);background:rgba(255,179,0,.07);}
.badge.bad{border-color:rgba(255,68,68,.3);color:var(--bad);background:rgba(255,68,68,.07);}
.badge.info{border-color:rgba(0,230,118,.2);color:var(--accent);background:rgba(0,230,118,.05);}

/* ---- PILL / ROW ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border:1px solid var(--border);
  font-size:11px;color:var(--muted);font-family:var(--mono);
}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ---- TABLE ---- */
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:11px;text-align:left;}
.table th{color:var(--muted2);font-weight:600;letter-spacing:.08em;font-size:10px;font-family:var(--mono);}
.table tr:hover td{background:rgba(255,255,255,.02);}

/* ---- CHARTS ---- */
.chartRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.chart{
  height:150px;border:1px solid var(--border);
  background:var(--bg1);position:relative;overflow:hidden;
}
.chart::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 18px);
}
.chart .label{position:absolute;left:10px;top:8px;font-weight:700;font-size:11px;font-family:var(--mono);}
.chart .sub{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--muted2);font-family:var(--mono);}

/* ---- ACTIONS ---- */
.actions{display:flex;gap:8px;margin-top:10px;}
.actions .btn{flex:1;padding:10px;}

/* ---- KPI ---- */
.kpi2{font-size:20px;font-weight:700;font-family:var(--mono);}

/* ---- P&L colors ---- */
.pnl.pos{color:var(--good);}
.pnl.neg{color:var(--bad);}

@media(max-width:1100px){
  body{overflow:auto;}
  .app{grid-template-columns:1fr;}
  .nav{position:sticky;top:0;z-index:10;}
  .main{overflow:visible;}
  .view{overflow:visible;}
  .chartRow{grid-template-columns:1fr;}
  .col-6,.col-3,.col-4,.col-8,.col-9{grid-column:span 12;}
  .summary-strip{grid-template-columns:1fr 1fr;}
  .wizard-grid{grid-template-columns:1fr 1fr;}
}

.nav-user{font-size:10px;color:var(--good);font-family:var(--mono);padding:4px 0;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted2);font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:7px;cursor:pointer;margin-top:6px;}
.btn-logout:hover{border-color:var(--bad);color:var(--bad);}