/* ═══════════════════════════════════════════════════════════════════
   TTT Trading Hub — Shared Theme
   Include in every page: <link rel="stylesheet" href="../shared/theme.css">
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Base colors */
  --bg:  #0a0b0f;  --bg2: #12131a;  --bg3: #1a1b25;  --bg4: #22232f;
  --tx:  #e8e9f0;  --lt:  #6b6d80;  --mt:  #9395a8;
  --ac:  #00d4aa;  --ac2: #00b894;  --ac3: #00d4aa22;
  --gn:  #00d4aa;  --rd:  #ff4757;  --yl:  #ffc312;  --bl:  #3498ff; --pp: #7c4dff; --or: #ff9100; --cy: #06b6d4;
  --gn2: #00d4aa18; --rd2: #ff475718;
  --brd: #ffffff08; --brd2:#ffffff12;
  
  /* Radii */
  --radius: 12px; --radius2: 8px;
  
  /* Fonts */
  --sans: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--tx);
}

/* ─── SHARED COMPONENTS ─── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--bg2); border:1px solid var(--brd); border-radius:var(--radius); padding:16px 18px; }
.stat-card .label { font-size:10px; font-weight:600; color:var(--lt); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.stat-card .value { font-family:var(--mono); font-size:22px; font-weight:700; }
.stat-card .value.pos { color:var(--gn); }
.stat-card .value.neg { color:var(--rd); }
.stat-card .sub { font-size:11px; color:var(--lt); margin-top:3px; }

.panel { background:var(--bg2); border:1px solid var(--brd); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--brd); }
.panel-head h3 { font-size:13px; font-weight:600; }

table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; padding:10px 14px; font-size:10px; font-weight:600; color:var(--lt); text-transform:uppercase; letter-spacing:.8px; border-bottom:1px solid var(--brd); white-space:nowrap; }
td { padding:10px 14px; border-bottom:1px solid var(--brd); white-space:nowrap; }
tr:hover td { background:var(--bg3); }
.mono { font-family:var(--mono); font-size:12px; }

.btn { padding:8px 18px; border:none; border-radius:var(--radius2); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--sans); }
.btn-primary { background:var(--ac); color:#000; }
.btn-primary:hover { background:var(--ac2); }
.btn-secondary { background:var(--bg3); color:var(--tx); border:1px solid var(--brd2); }
.btn-secondary:hover { border-color:var(--ac); }
.btn-sm { padding:5px 12px; font-size:11px; }
.btn-danger { background:var(--rd2); color:var(--rd); }

input, select, textarea {
  font-family: var(--sans);
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--brd2);
  border-radius: var(--radius2);
  color: var(--tx);
  font-size: 13px;
  outline: none;
  transition: border .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--ac); }

/* Toast notifications */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; }
.toast { padding:12px 22px; border-radius:var(--radius2); font-size:13px; font-weight:500; margin-top:8px; transform:translateY(80px); opacity:0; transition:all .3s; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { background:var(--gn); color:#000; }
.toast.error { background:var(--rd); color:#fff; }
.toast.info { background:var(--bl); color:#fff; }

/* ─── PAGE WRAPPER (used inside iframes) ─── */
.page-wrap { padding:24px 28px; max-width:1400px; }
.page-title { font-size:22px; font-weight:700; margin-bottom:20px; }