/* TWStockDashboard — Design Tokens */
:root {
  /* Dark theme (default) */
  --bg-app: #0B0F14;
  --bg-surface: #111820;
  --bg-elevated: #16212B;
  --bg-hover: #1B2733;
  --bg-active: #22303C;
  --border: #22303C;
  --border-strong: #2C3E4D;
  --text-1: #E6EDF3;
  --text-2: #8B9AAA;
  --text-3: #5F6E7C;
  --text-disabled: #475463;

  --accent: #4DA3FF;
  --accent-soft: rgba(77, 163, 255, 0.12);
  --warning: #F6C85F;
  --warning-soft: rgba(246, 200, 95, 0.14);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.14);

  /* Market colors — overridden per-row by data-market */
  --tw-up: #EF4444;
  --tw-down: #22C55E;
  --us-up: #22C55E;
  --us-down: #EF4444;

  /* Default up/down (TW mode) — JS swaps via [data-color-mode] */
  --c-up: #EF4444;
  --c-down: #22C55E;
  --c-up-soft: rgba(239, 68, 68, 0.14);
  --c-down-soft: rgba(34, 197, 94, 0.14);

  /* Type scale */
  --type-scale: 1;
  --fs-xs: calc(11px * var(--type-scale));
  --fs-sm: calc(12px * var(--type-scale));
  --fs-base: calc(13px * var(--type-scale));
  --fs-md: calc(14px * var(--type-scale));
  --fs-lg: calc(16px * var(--type-scale));
  --fs-xl: calc(20px * var(--type-scale));
  --fs-2xl: calc(26px * var(--type-scale));
  --fs-3xl: calc(34px * var(--type-scale));

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h: 52px;
  --marketbar-h: 60px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shadow tier — soft, financial dashboard tone */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-glow-accent: 0 0 0 1px rgba(77, 163, 255, 0.18), 0 6px 16px rgba(77, 163, 255, 0.10);

  /* Spring-y motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --bg-app: #F4F6F8;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover: #EEF2F5;
  --bg-active: #E2E8EC;
  --border: #E4E9EE;
  --border-strong: #C2CBD3;
  --text-1: #0E1620;
  --text-2: #495564;
  --text-3: #7A8694;
  --text-disabled: #B0B8C2;
  --accent-soft: rgba(77, 163, 255, 0.10);

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-glow-accent: 0 0 0 1px rgba(77, 163, 255, 0.18), 0 6px 16px rgba(77, 163, 255, 0.10);
}

/* Color mode for TW (red up) vs US (green up) — applied per page or row */
[data-color-mode="tw"] {
  --c-up: var(--tw-up);
  --c-down: var(--tw-down);
  --c-up-soft: rgba(239, 68, 68, 0.14);
  --c-down-soft: rgba(34, 197, 94, 0.14);
}
[data-color-mode="us"] {
  --c-up: var(--us-up);
  --c-down: var(--us-down);
  --c-up-soft: rgba(34, 197, 94, 0.14);
  --c-down-soft: rgba(239, 68, 68, 0.14);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input, select, textarea {
  font-family: inherit;
  color: inherit;
}

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: #3A4D5E; }

/* Utility */
.up { color: var(--c-up); }
.down { color: var(--c-down); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }

.hr { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Pill / badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
.pill.up { background: var(--c-up-soft); color: var(--c-up); border-color: transparent; }
.pill.down { background: var(--c-down-soft); color: var(--c-down); border-color: transparent; }
.pill.warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Subtle striped image placeholder */
.placeholder-stripe {
  background-image: repeating-linear-gradient(
    135deg,
    var(--bg-elevated) 0 8px,
    var(--bg-surface) 8px 16px
  );
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* Form controls */
.input, .select {
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--text-1);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); color: #0B0F14; border-color: var(--accent); }
.btn.primary:hover { background: #6BB4FF; border-color: #6BB4FF; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text-1); }
.btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn.danger-ghost:hover { background: var(--danger-soft); }

/* Switch */
.switch {
  position: relative;
  width: 30px;
  height: 16px;
  background: var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); }

/* Segmented control */
.seg {
  display: inline-flex;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.seg button {
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-radius: 4px;
  font-weight: 500;
}
.seg button.active {
  background: var(--bg-elevated);
  color: var(--text-1);
  box-shadow: 0 1px 0 var(--border);
}

/* Section title */
.sec-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0;
}

/* Card surface (no nested cards) */
.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* Table reset */
table { border-collapse: collapse; width: 100%; }
th { font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 8px 10px; font-size: var(--fs-base); border-bottom: 1px solid var(--border); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

.num-r { text-align: right; }
.num-r th, .num-r td { text-align: right; }