/* ============================================================
   PrexusFx Dashboard — Design system (fra template)
   ============================================================ */
:root {
  --bg: #070a10;
  --bg-grad-1: #0b0f17;
  --panel: #10141d;
  --panel-2: #141925;
  --line: #1e2531;
  --line-soft: #171c27;
  --txt: #e9ecf2;
  --txt-dim: #8b94a7;
  --txt-faint: #5b6478;
  --amber: #f6c453;
  --amber-deep: #e0992f;
  --pos: #3ddc97;
  --pos-dim: #1f7a55;
  --neg: #ff5c6c;
  --neg-dim: #7a2530;
  --blue: #5aa9ff;
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(246,196,83,.06), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(90,169,255,.05), transparent 55%),
    var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--amber); }

.mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--txt-dim); font-size: 13px; }
.faint { color: var(--txt-faint); }

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 26px 60px;
}

/* ============================================================
   TOP BAR + NAVIGATION
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  opacity: 0;
  animation: fade .6s ease forwards;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .mark { width: 46px; height: 46px; flex: none; }
.brand h1 {
  font-family: 'Sora', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1;
}
.brand h1 .fx {
  font-family: 'JetBrains Mono', monospace;
  color: var(--amber);
  font-weight: 600;
}
.brand h1 a { color: inherit; }
.brand h1 a:hover { color: inherit; }
.brand .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 3px;
  color: var(--txt-faint);
  margin-top: 4px;
}

/* Main nav (between brand and user) */
.mainnav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 3px;
}
.mainnav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-dim);
  padding: 8px 14px;
  border-radius: 8px;
  transition: .15s;
  letter-spacing: .3px;
}
.mainnav a:hover { color: var(--txt); }
.mainnav a.active {
  background: var(--panel-2);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* User box */
.user-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-dim);
}
.user-box .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 8px var(--pos);
  animation: pulse 2s infinite;
}
.user-box a {
  color: var(--txt-faint);
  font-size: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.user-box a:hover { color: var(--amber); }

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  opacity: 0;
  animation: rise .6s ease forwards;
  margin-bottom: 18px;
}
.panel h2 {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel h2 .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-faint);
  font-weight: 400;
}

/* ============================================================
   KPI ROW
   ============================================================ */
.kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.kpi {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: rise .6s ease forwards;
}
.kpi::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%);
  pointer-events: none;
}
.kpi .label {
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--txt-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kpi .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1;
}
.kpi .delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi .accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

/* ============================================================
   SYMBOL GRID
   ============================================================ */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.symbol-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 14px 12px;
  text-align: center;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--txt);
  text-decoration: none;
  transition: all 0.15s;
}
.symbol-card:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-1px);
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  opacity: 0;
  animation: rise .6s ease forwards;
}
.login-logo {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 30px;
  display: block;
}
.login-card form { margin-top: 20px; }
.login-card label {
  display: block;
  margin: 14px 0 6px;
  color: var(--txt-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.login-card input {
  width: 100%;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--txt);
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.login-card input:focus {
  outline: none;
  border-color: var(--amber);
}
.login-card button {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  border: none;
  border-radius: 8px;
  color: #1a1206;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  transition: .15s;
}
.login-card button:hover { transform: translateY(-1px); }
.error {
  background: rgba(255,92,108,.1);
  border: 1px solid var(--neg-dim);
  color: var(--neg);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 16px;
}

/* ============================================================
   CARD / SECTION (legacy compat)
   ============================================================ */
.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  opacity: 0;
  animation: rise .6s ease forwards;
}
.card h3 {
  font-family: 'Sora', sans-serif;
  margin: 0 0 14px;
  color: var(--amber);
  font-size: 14px;
  font-weight: 600;
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-dim);
}
.back-link:hover { color: var(--amber); }

.symbol-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.symbol-header .symbol-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--amber);
}
.symbol-header .currencies {
  display: flex;
  gap: 6px;
}

/* ============================================================
   IMPACT FILTERS + TIMING
   ============================================================ */
.impact-toggles {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.impact {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .3px;
  user-select: none;
  transition: .15s;
}
.impact:hover { border-color: var(--amber); }
.impact input { margin-right: 8px; cursor: pointer; }
.impact-low { color: var(--pos); }
.impact-medium { color: var(--amber); }
.impact-high { color: var(--neg); }

.timing {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
}
.timing label {
  font-size: 12px;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.timing input[type="number"] {
  width: 55px;
  padding: 5px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   EVENTS TABLE
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.events-table th {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--txt-faint);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
}
.events-table td {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.events-table tr:last-child td { border-bottom: none; }
.events-table tr:hover { background: rgba(246,196,83,.02); }
.events-table input[type="checkbox"] { cursor: pointer; }
.events-table select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--txt);
  padding: 4px 8px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.events-table select:hover { border-color: var(--amber); }

.curr {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--panel);
  border: 1px solid var(--line);
  letter-spacing: .5px;
}
.curr-USD { color: #b2f2bb; border-color: #2d5016; }
.curr-EUR { color: #91c4f2; border-color: #182c4d; }
.curr-GBP { color: #f0a5d4; border-color: #4d1e3f; }
.curr-JPY { color: #ffd8a8; border-color: #4d2f10; }
.curr-AUD { color: #f7e16f; border-color: #4d4716; }
.curr-CAD { color: #ff8888; border-color: #4d1818; }
.curr-CHF { color: #99e9f2; border-color: #2c4d4d; }
.curr-NZD { color: #8ce99a; border-color: #1c4d3a; }

.impact-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .3px;
}
.impact-tag.impact-high { background: rgba(255,92,108,.12); color: var(--neg); }
.impact-tag.impact-medium { background: rgba(246,196,83,.12); color: var(--amber); }
.impact-tag.impact-low { background: rgba(61,220,151,.12); color: var(--pos); }
.impact-tag.impact-none { background: var(--panel); color: var(--txt-faint); }

/* Disabled events: dæmp event-navn men hold checkbox + dropdown fuldt klikbare */
.row-disabled td { color: var(--txt-faint); }
.row-disabled td:nth-child(3) { opacity: 0.55; }    /* event-navn dæmpes */
.row-disabled input[type=checkbox] { opacity: 1 !important; cursor: pointer; }
.row-disabled select { opacity: 1 !important; cursor: pointer; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  margin-top: 30px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--txt-faint);
  letter-spacing: .5px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fade { to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .mainnav { display: none; }  /* TODO: mobile menu */
}

/* ============================================================
   CHART PAGE � timeframe buttons + chart container
   ============================================================ */
.tf-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tf-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--txt-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: .12s;
}
.tf-btn:hover {
  color: var(--txt);
  border-color: var(--amber);
}
.tf-btn.active {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #1a1206;
  border-color: var(--amber-deep);
}
.tf-btn.small { padding: 5px 10px; font-size: 11px; }
.tf-btn.reload { color: var(--amber); }
.tf-sep {
  color: var(--txt-faint);
  margin: 0 6px;
  font-family: 'JetBrains Mono', monospace;
}
.tf-limit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--txt-dim);
  margin-left: 4px;
}
.tf-limit input[type="number"] {
  width: 65px;
  padding: 5px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-align: center;
  margin: 0 4px;
}
#chart-container {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
#last-price {
  margin-left: 16px;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-controls { padding: 14px 18px; }
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cal-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--txt-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cal-btn:hover { color: var(--txt); border-color: var(--amber); }
.cal-btn.active {
  background: var(--panel-2);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}
.cal-btn.nav { padding: 8px 11px; font-size: 11px; }
.cal-btn.small { padding: 5px 10px; font-size: 11px; }

/* Provider-grid (data sources) */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.provider-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--txt);
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.provider-card:hover {
  background: rgba(255,165,38,.04);
  border-color: var(--amber);
  transform: translateY(-1px);
}
.provider-card-stub { opacity: .55; }
.provider-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.provider-name {
  font-size: 18px; font-weight: 700; letter-spacing: .5px; color: var(--amber);
  font-family: 'Sora', sans-serif;
}
.provider-card-full {
  font-size: 12px; color: #9aa3b3; line-height: 1.4;
}
.provider-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: #7a8294;
  margin-top: 4px;
}
.provider-stat b { color: var(--txt); margin-right: 3px; }
.provider-stat.pos b { color: #5dbf60; }
.provider-stat.amber b { color: var(--amber); }
.provider-meta {
  margin-top: 6px;
  font-size: 11px;
}

/* History-knap i calendar-row */
.hist-btn {
  background: transparent;
  border: 1px solid rgba(255, 165, 38, 0.25);
  color: var(--amber);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: all 0.15s;
}
.hist-btn:hover {
  background: rgba(255, 165, 38, 0.15);
  border-color: var(--amber);
}
/* Expandable history-row */
tr.hist-row > td {
  background: #0c1118 !important;
  border-top: 1px solid #1f2a39;
  border-bottom: 1px solid #1f2a39;
}
tr.hist-row table th,
tr.hist-row table td {
  border: none !important;
}
tr.hist-row table tr {
  border-bottom: 1px solid rgba(31, 42, 57, 0.4);
}
tr.hist-row table tbody tr:hover td {
  background: rgba(255, 165, 38, 0.04);
}
.cal-btn.primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #1a1206;
  border-color: var(--amber-deep);
  font-weight: 600;
}
.cal-btn.date-trigger {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--txt);
  background: var(--panel-2);
  font-weight: 600;
}
.cal-search { flex: 1; min-width: 200px; }
.cal-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--txt);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
}
.cal-search input:focus { outline: none; border-color: var(--amber); }
.cal-impact-filter {
  display: flex;
  gap: 4px;
}
.impact-pill { padding: 7px 11px; font-size: 11px; }

.date-picker {
  margin-top: 14px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dp-row {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.dp-row label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dp-row input[type="date"] {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--amber);
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  color-scheme: dark;
}
.dp-quicks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dp-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* Impact icons */
.impact-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
}
.impact-icon.impact-high { background: var(--neg); box-shadow: 0 0 4px var(--neg-dim); }
.impact-icon.impact-medium { background: var(--amber); box-shadow: 0 0 4px var(--amber-deep); }
.impact-icon.impact-low { background: var(--pos); box-shadow: 0 0 4px var(--pos-dim); }
.impact-icon.impact- { background: var(--line); }

.impact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.impact-dot.impact-high { background: var(--neg); }
.impact-dot.impact-medium { background: var(--amber); }
.impact-dot.impact-low { background: var(--pos); }

.override-mark {
  color: var(--blue);
  font-size: 10px;
  margin-left: 4px;
  vertical-align: top;
}

/* Calendar table */
.cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cal-table thead th {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .5px;
  color: var(--txt-faint);
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel-2);
}
.cal-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.cal-table tbody tr:hover { background: rgba(246,196,83,.04); }

.col-date { width: 70px; }
.col-time { width: 60px; color: var(--txt-dim); }
.col-curr { width: 80px; }
.col-impact { width: 70px; text-align: left; }
.col-event { min-width: 250px; }
.col-actual, .col-forecast, .col-previous { width: 100px; text-align: right; }

.cal-table .col-actual { font-weight: 600; }

.date-cell {
  font-size: 12px;
}
.date-cell div:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--txt);
}
.date-cell .faint {
  font-size: 11px;
  margin-top: 2px;
}

@media (max-width: 720px) {
  .col-forecast, .col-previous { display: none; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-card {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: .15s;
}
.svc-card:hover { border-color: var(--line); }
.svc-icon {
  font-size: 28px;
  text-align: center;
  width: 50px;
  line-height: 1;
}
.svc-info { min-width: 0; }
.svc-name {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.svc-desc {
  font-size: 12px;
  color: var(--txt-dim);
  margin-bottom: 8px;
}
.svc-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-faint);
}
.svc-meta b { color: var(--txt-dim); font-weight: 600; }
.svc-error {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255,92,108,.08);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neg);
}
.svc-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.svc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 9px;
  border-radius: 4px;
}
.svc-status .svc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.svc-up { background: rgba(61,220,151,.12); color: var(--pos); }
.svc-up .svc-dot { background: var(--pos); box-shadow: 0 0 6px var(--pos); animation: pulse 2s infinite; }
.svc-down { background: rgba(255,92,108,.12); color: var(--neg); }
.svc-down .svc-dot { background: var(--neg); }
.svc-unknown { background: var(--panel-2); color: var(--txt-dim); }
.svc-unknown .svc-dot { background: var(--txt-faint); }

.cal-btn.danger {
  background: rgba(255,92,108,.1);
  border-color: var(--neg-dim);
  color: var(--neg);
}
.cal-btn.danger:hover { background: rgba(255,92,108,.2); }

/* ============================================================
   LOGS MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  max-width: 1000px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  margin: 0;
}
.log-pre {
  flex: 1;
  overflow: auto;
  padding: 14px 18px;
  margin: 0;
  background: #060810;
  color: #b8c0cc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.acc-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.acc-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.acc-row:last-child { border-bottom: none; }
.acc-label {
  color: var(--txt-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.acc-value {
  color: var(--txt);
  font-size: 13px;
  word-break: break-all;
}

.acc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 6px;
}
.acc-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acc-form label > span {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.acc-form input[type=password] {
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--txt);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.acc-form input[type=password]:focus {
  outline: none;
  border-color: var(--amber);
}
.acc-form small.faint {
  font-size: 11px;
  color: var(--txt-faint);
}
.acc-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.acc-msg {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
}
.acc-msg-ok {
  background: rgba(61,220,151,.1);
  border: 1px solid var(--pos);
  color: var(--pos);
}
.acc-msg-err {
  background: rgba(255,92,108,.1);
  border: 1px solid var(--neg-dim);
  color: var(--neg);
}

.user-box a:hover { color: var(--amber); }

/* ============================================================
   USERS / ADMIN PAGE
   ============================================================ */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.users-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  color: var(--txt-dim);
  border-bottom: 1px solid var(--line);
}
.users-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--txt);
}
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover { background: rgba(255,255,255,.02); }

.users-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.users-role-admin {
  background: rgba(246,196,83,.15);
  color: var(--amber);
}
.users-role-user {
  background: var(--panel-2);
  color: var(--txt-dim);
}

.users-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================
   READ-ONLY UI (non-admin)
   ============================================================ */
.readonly-badge {
  display: inline-block;
  background: rgba(255,92,108,.12);
  color: var(--neg);
  border: 1px solid var(--neg-dim);
  padding: 3px 9px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-right: 10px;
}
.readonly-card {
  position: relative;
}
.readonly-card input[disabled],
.readonly-card select[disabled],
input[disabled],
select[disabled] {
  opacity: .45;
  cursor: not-allowed !important;
}
input[type=checkbox][disabled] {
  pointer-events: none;
}
label:has(input[disabled]),
label:has(select[disabled]) {
  cursor: not-allowed;
  opacity: .65;
}

/* ============================================================
   TERMINAL BLOCKS (Multi-terminal dashboard)
   ============================================================ */
.terminal-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
  animation: fade-in .3s ease both;
}
.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.terminal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Sora', sans-serif;
}
.terminal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--amber);
  color: var(--bg);
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
}
.terminal-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
}
.terminal-meta {
  font-size: 11px;
}
.terminal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-left: 8px;
}
.terminal-status .svc-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.status-live { background: rgba(61,220,151,.12); color: var(--pos); }
.status-live .svc-dot { background: var(--pos); animation: pulse 2s infinite; }
.status-stale { background: rgba(246,196,83,.12); color: var(--amber); }
.status-stale .svc-dot { background: var(--amber); }
.status-waiting { background: var(--panel-2); color: var(--txt-dim); }
.status-waiting .svc-dot { background: var(--txt-faint); }

.terminal-chart {
  margin-top: 14px;
  background: var(--panel-2);
  border-radius: 6px;
  min-height: 100px;
}

/* ============================================================
   TERMINALS ADMIN PAGE � toggle-switch + radio + path display
   ============================================================ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: .2s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: var(--txt-faint);
  border-radius: 50%;
  transition: .2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: rgba(61,220,151,.2);
  border-color: var(--pos);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background: var(--pos);
}
.data-source-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.data-source-radio input[type=radio] {
  accent-color: var(--amber);
  cursor: pointer;
}
.terminal-name-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
}
.terminal-name-input:focus { outline: none; border-color: var(--amber); }
.terminal-path-cell { line-height: 1.4; }

.token-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #060810;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
#token-value {
  flex: 1;
  font-size: 12px;
  color: var(--amber);
  user-select: all;
  word-break: break-all;
}

/* ============================================================
   EQUITY CURVE CHART (per terminal)
   ============================================================ */
.terminal-chart-wrap {
  margin-top: 16px;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 14px;
}
.terminal-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.terminal-chart-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.terminal-chart-tabs {
  display: flex;
  gap: 4px;
}
.chart-range-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.chart-range-btn.active {
  background: rgba(246,196,83,.15) !important;
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}
.terminal-chart {
  width: 100%;
  height: 220px;
}

/* ============================================================
   POSITIONS TABLE (per terminal)
   ============================================================ */
.terminal-positions-wrap {
  margin-top: 12px;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 14px;
}
.positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.positions-table th {
  text-align: left;
  padding: 8px 10px;
  font-family: 'Sora', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  color: var(--txt-dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.positions-table th.right { text-align: right; }
.positions-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--txt);
  white-space: nowrap;
}
.positions-table td.right { text-align: right; }
.positions-table tr:last-child td { border-bottom: none; }
.positions-table tr:hover { background: rgba(255,255,255,.02); }

.pos-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
}
.pos-type-buy {
  background: rgba(61,220,151,.12);
  color: var(--pos);
}
.pos-type-sell {
  background: rgba(255,92,108,.12);
  color: var(--neg);
}

/* ============================================================
   CHART LEGEND (erstatter range tabs)
   ============================================================ */
.terminal-chart-legend {
  display: flex;
  gap: 16px;
  align-items: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-dim);
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 1.5px;
}

/* ============================================================
   SYMBOL PAGE TABS (Settings / Calendar / Log)
   ============================================================ */
.sym-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.sym-tab {
  padding: 10px 18px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: .15s;
  margin-bottom: -1px;
}
.sym-tab:hover { color: var(--txt); }
.sym-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ============================================================
   SERVICE SETTINGS PANEL (inline expand)
   ============================================================ */
.svc-settings-panel {
  margin-top: 12px;
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.svc-settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-settings-head {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.svc-settings-row {
  display: grid;
  grid-template-columns: 200px 120px 1fr;
  gap: 14px;
  align-items: center;
}
.svc-settings-label {
  font-size: 13px;
  color: var(--txt);
}
.svc-settings-row input {
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--txt);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.svc-settings-row input:focus { outline: none; border-color: var(--amber); }
.svc-settings-help {
  font-size: 11px;
  color: var(--txt-faint);
}
.svc-settings-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

/* ============================================================
   HOLIDAY ROWS i calendar (FMP bank holidays)
   ============================================================ */
.impact-dot.impact-holiday {
  background: #8b94a7;
  box-shadow: 0 0 6px rgba(139,148,167,.3);
}
.impact-icon.impact-holiday {
  background: #8b94a7;
}
.holiday-row {
  background: rgba(139,148,167,.04);
}
.holiday-row td {
  color: var(--txt-dim);
}
.holiday-row .col-event {
  font-style: italic;
  color: var(--txt-dim);
}

/* ALL-badge naar holiday spans alle currencies */
.curr.curr-ALL {
  background: linear-gradient(135deg, rgba(246,196,83,.18), rgba(90,169,255,.18));
  color: var(--amber);
  border: 1px solid var(--amber);
  font-weight: 700;
}

/* ============================================================
   NEWS SETTINGS - kategori-sektioner (Forex / Indices / Commodities)
   ============================================================ */
.symbol-section { margin-bottom: 22px; }
.symbol-section:last-child { margin-bottom: 0; }
.symbol-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.symbol-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.symbol-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-faint);
}
.symbol-card-index {
  background: linear-gradient(180deg, rgba(90,169,255,.08), var(--panel));
  border-color: rgba(90,169,255,.25);
}
.symbol-card-index:hover { border-color: var(--blue); color: var(--blue); }
.symbol-card-commodity {
  background: linear-gradient(180deg, rgba(246,196,83,.10), var(--panel));
  border-color: rgba(246,196,83,.30);
}
.symbol-card-commodity:hover { border-color: var(--amber); color: var(--amber); }