/* RED FOLDER FX — dashboards (desk / admin / members)
   Dark terminal surfaces. Red stays ≤10% of any layout (accent only). */

:root {
  --bg: #F7F7F3;
  --red: #FF2E2E;
  --red-soft: rgba(255, 46, 46, 0.14);
  --black: #0F0F12;
  --char: #1A1D21;
  --char-2: #22262B;
  --hair-dark: #2A2E33;
  --gray: #8A8F98;
  --gray-2: #5C5F66;
  --paper: #FFFFFF;
  --font-head: 'Sora', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body.rfx-dash {
  background: var(--black);
  color: #F7F7F3;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

a { color: inherit; }

/* ---------- nav ---------- */
.dash-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair-dark);
}
.dash-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dash-logo img { width: 26px; height: 26px; border-radius: 6px; }
.dash-logo span {
  font-family: var(--font-head); font-weight: 800; font-size: 14px;
  letter-spacing: 0.06em; color: #F7F7F3;
}
.dash-logo em { font-style: normal; color: var(--red); }
.dash-nav-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--gray); text-transform: uppercase;
  padding-left: 16px; border-left: 1px solid var(--hair-dark);
}
.dash-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dash-nav-right a.plain {
  font-family: var(--font-mono); font-size: 12px; color: var(--gray);
  text-decoration: none; letter-spacing: 0.04em;
}
.dash-nav-right a.plain:hover { color: #F7F7F3; }
.dash-btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  padding: 9px 18px; border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.dash-btn:active { transform: scale(0.97); }
.dash-btn-red { background: var(--red); color: #fff; }
.dash-btn-red:hover { background: #e62222; }
.dash-btn-ghost { border-color: var(--hair-dark); color: #F7F7F3; background: transparent; }
.dash-btn-ghost:hover { border-color: var(--gray-2); }

/* ---------- layout ---------- */
.dash-wrap { max-width: 1120px; margin: 0 auto; padding: 34px 24px 80px; }
.dash-head { margin-bottom: 26px; }
.dash-head h1 {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -0.01em; line-height: 1.1; text-transform: uppercase;
}
.dash-head h1 em { font-style: normal; color: var(--red); }
.dash-head p { color: var(--gray); margin-top: 8px; max-width: 640px; }
.dash-sync {
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-2);
  margin-top: 10px; letter-spacing: 0.06em;
}

/* ---------- countdown strip ---------- */
.dash-next {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--hair-dark); border-radius: 12px;
  background: var(--char); padding: 14px 18px; margin-bottom: 26px;
  font-family: var(--font-mono); font-size: 13px;
}
.dash-next .lbl { color: var(--gray); font-size: 11px; letter-spacing: 0.18em; }
.dash-next .ev { color: #F7F7F3; letter-spacing: 0.02em; }
.dash-next .cd { margin-left: auto; color: #F7F7F3; font-size: 15px; }
.dash-next.armed { border-color: rgba(255, 46, 46, 0.5); }
.dash-next.armed .cd, .dash-next.armed .lbl { color: var(--red); }
.dash-next .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gray-2); flex: none;
}
.dash-next.armed .dot { background: var(--red); animation: dashPulse 1.1s infinite; }
@keyframes dashPulse { 50% { opacity: 0.25; } }

/* ---------- stat tiles ---------- */
.dash-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px;
}
.tile {
  background: var(--char); border: 1px solid var(--hair-dark); border-radius: 12px;
  padding: 18px 18px 16px;
}
.tile .t-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--gray); text-transform: uppercase;
}
.tile .t-value {
  font-family: var(--font-head); font-weight: 800; font-size: 30px;
  letter-spacing: -0.01em; margin-top: 6px; line-height: 1;
}
.tile .t-sub { font-family: var(--font-mono); font-size: 11px; color: var(--gray-2); margin-top: 6px; }
.t-value.pos { color: #F7F7F3; }
.t-value.neg { color: var(--red); }

/* ---------- cards & tables ---------- */
.dash-card {
  background: var(--char); border: 1px solid var(--hair-dark); border-radius: 12px;
  padding: 20px; margin-bottom: 26px;
}
.dash-card h2 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--gray); text-transform: uppercase; font-weight: 500; margin-bottom: 14px;
}
.dash-card h2 b { color: #F7F7F3; font-weight: 600; }

.dash-tablewrap { overflow-x: auto; }
table.dash-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.dash-table th {
  text-align: left; color: var(--gray-2); font-weight: 500; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid var(--hair-dark); white-space: nowrap;
}
.dash-table td {
  padding: 10px; border-bottom: 1px solid rgba(42, 46, 51, 0.55);
  white-space: nowrap; color: #DDDDD8;
}
.dash-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.dash-table td.num { font-variant-numeric: tabular-nums; }
.dash-table td.pos { color: #F7F7F3; }
.dash-table td.neg { color: var(--red); }
.dash-table td.mut, .dash-table span.mut { color: var(--gray-2); }
.dash-empty {
  padding: 34px 10px; text-align: center; color: var(--gray);
  font-family: var(--font-mono); font-size: 12.5px;
}

/* badges — label + color, never color alone */
.bdg {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--hair-dark);
}
.bdg-win  { color: #F7F7F3; background: rgba(247, 247, 243, 0.07); border-color: #3A3E44; }
.bdg-loss { color: var(--red); background: rgba(255, 46, 46, 0.08); border-color: rgba(255, 46, 46, 0.45); }
.bdg-be   { color: var(--gray); }
.bdg-sd   { color: var(--gray); border-style: dashed; }
.bdg-live { color: var(--red); border-color: rgba(255, 46, 46, 0.45); }
.bdg-live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 6px; animation: dashPulse 1.1s infinite;
}

/* ---------- equity chart ---------- */
.equity-box { position: relative; }
.equity-box canvas { width: 100%; height: 240px; display: block; }
.equity-tip {
  position: absolute; pointer-events: none; display: none;
  background: var(--black); border: 1px solid var(--hair-dark); border-radius: 8px;
  padding: 8px 12px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  color: #DDDDD8; white-space: nowrap; z-index: 5;
}
.equity-tip b { color: #F7F7F3; font-weight: 600; }

/* ---------- gate overlay (admin / members) ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--black); padding: 20px;
}
.gate-card {
  width: 100%; max-width: 420px; background: var(--char); border: 1px solid var(--hair-dark);
  border-radius: 14px; padding: 30px;
}
.gate-card img { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px; }
.gate-card h1 { font-family: var(--font-head); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.gate-card h1 em { font-style: normal; color: var(--red); }
.gate-card p { color: var(--gray); font-size: 13.5px; margin: 10px 0 18px; }
.gate-card input {
  width: 100%; background: var(--black); border: 1px solid var(--hair-dark); border-radius: 8px;
  color: #F7F7F3; font-family: var(--font-mono); font-size: 14px; padding: 12px 14px;
  outline: none; margin-bottom: 12px;
}
.gate-card input:focus { border-color: var(--gray-2); }
.gate-card .gate-err { color: var(--red); font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; display: none; }
.gate-card .dash-btn { width: 100%; text-align: center; }

/* ---------- filters (admin) ---------- */
.dash-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-filters select, .dash-filters input {
  background: var(--black); border: 1px solid var(--hair-dark); border-radius: 8px;
  color: #F7F7F3; font-family: var(--font-mono); font-size: 12.5px; padding: 8px 12px; outline: none;
}
.dash-filters select:focus, .dash-filters input:focus { border-color: var(--gray-2); }

/* ---------- member guide ---------- */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide-steps { counter-reset: step; list-style: none; }
.guide-steps li {
  counter-increment: step; display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(42, 46, 51, 0.55); font-size: 14px; color: #DDDDD8;
}
.guide-steps li:last-child { border-bottom: none; }
.guide-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px; color: var(--red); padding-top: 2px; flex: none;
}
.guide-steps code {
  font-family: var(--font-mono); font-size: 12px; background: var(--black);
  border: 1px solid var(--hair-dark); border-radius: 5px; padding: 1px 7px; color: #F7F7F3;
  word-break: break-all;
}
.side-card p { color: var(--gray); font-size: 13.5px; margin-bottom: 14px; }
.pill-status {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  border: 1px solid var(--hair-dark); border-radius: 999px; padding: 5px 14px; color: #F7F7F3;
  margin-bottom: 12px;
}
.pill-status i { font-style: normal; color: var(--red); }

/* ---------- footer ---------- */
.dash-foot {
  border-top: 1px solid var(--hair-dark); margin-top: 20px; padding: 26px 28px 40px;
  color: var(--gray-2); font-size: 12px; max-width: 1120px; margin-left: auto; margin-right: auto;
}
.dash-foot a { color: var(--gray); }

@media (max-width: 900px) {
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: 1fr; }
  .dash-next .cd { margin-left: 0; width: 100%; }
  .dash-nav { padding: 12px 16px; }
  .dash-nav-title { display: none; }
}