/* ===== css/tokens.css ===== */
/* ============================================================
   KAIRION · Design tokens — SINGLE SOURCE OF TRUTH
   Loaded FIRST (before every other stylesheet). All --kx-* / --kx5- /
   --k- namespaces and component rules resolve against the --kr-* vars
   defined here. See docs/design-language.md and docs/refactor-backlog.md (P4).
   ============================================================ */

:root {
  /* — neutrals — warm graphite, with enough luminance separation to make
     dense dashboard layers readable without drawing borders around each one. — */
  --kr-bg:         #0b0b0f;
  --kr-bg-2:       #111117;
  --kr-surface:    #18181f;
  --kr-surface-2:  #20212a;
  --kr-elev:       #292b36;
  --kr-line:       rgba(244,242,250,0.08);
  --kr-line-2:     rgba(244,242,250,0.15);
  --kr-ink:        #f4f2f8;
  --kr-ink-2:      #c0bdc9;
  --kr-ink-3:      #9895a3;
  /* Kept ≥4.5:1 on --kr-bg for WCAG AA so muted meta/separator text stays
     legible without breaking the warm palette. */
  --kr-ink-4:      #898693;

  /* — mono accent — primary CTA + status pill — */
  --kr-accent:     #f4f2f8;
  --kr-accent-dim: rgba(244,242,248,0.10);
  --kr-accent-line:rgba(244,242,248,0.24);

  /* — brand accent — active states, focus, links and primary progress only — */
  --kr-violet:     #9b8cff;
  --kr-violet-2:   #b3a8ff;
  --kr-violet-dim: rgba(155,140,255,0.14);
  --kr-violet-line:rgba(155,140,255,0.36);
  --kr-violet-soft:rgba(155,140,255,0.07);

  /* — semantic — green / red ONLY on P&L numbers — */
  --kr-up:         #67d391;
  --kr-up-dim:     rgba(103,211,145,0.11);
  --kr-up-line:    rgba(103,211,145,0.30);
  --kr-dn:         #ff7b86;
  --kr-dn-dim:     rgba(255,123,134,0.11);
  --kr-dn-line:    rgba(255,123,134,0.30);

  /* — amber — warnings only — */
  --kr-warn:       #f2b84b;
  --kr-warn-dim:   rgba(242,184,75,0.12);
  --kr-warn-line:  rgba(242,184,75,0.32);

  /* — alias old token names so legacy CSS doesn't go orange — */
  --kx5-amber:     var(--kr-violet-2);
  --kx5-amber-dim: var(--kr-violet-dim);
  --kx-amber:      var(--kr-violet-2);
  --kx-amber-dim:  var(--kr-violet-dim);
  --k-amber:       var(--kr-violet-2);
  --k-amber-dim:   var(--kr-violet-dim);
  --orange:        var(--kr-violet-2);

  /* — geometry — Dark Dia: one notch softer for that rounded, friendly feel. — */
  --kr-r-xs: 8px;
  --kr-r-sm: 12px;
  --kr-r-md: 16px;
  --kr-r-lg: 22px;
  --kr-r-xl: 26px;

  /* — spacing scale (4px base, per docs/design-language.md §5) — */
  --kr-sp-1: 4px;
  --kr-sp-2: 8px;
  --kr-sp-3: 12px;
  --kr-sp-4: 16px;
  --kr-sp-5: 24px;
  --kr-sp-6: 32px;
  --kr-sp-7: 48px;

  /* — extra canonical tokens consumed by the --kx5-/--k- alias layers — */
  --kr-shadow-sm: 0 0 0 1px rgba(244,242,250,0.02), 0 14px 34px rgba(0,0,0,0.24);
  --kr-up-glow: rgba(103,211,145,0.38);

  /* — fonts — */
  --kr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kr-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — shadow — only modal/drawer/toast — */
  --kr-shadow-md: 0 1px 0 rgba(244,242,250,0.05) inset, 0 10px 28px rgba(0,0,0,0.32);
  --kr-shadow-lg: 0 1px 0 rgba(244,242,250,0.06) inset, 0 22px 56px rgba(0,0,0,0.44);

  /* — motion — state changes only; keep dense trading screens calm — */
  --kr-motion-instant: 80ms;
  --kr-motion-fast: 120ms;
  --kr-motion-base: 180ms;
  --kr-motion-slow: 220ms;
  --kr-ease-out: cubic-bezier(.2,.6,.2,1);
  --kr-ease-emphasized: cubic-bezier(.2,.8,.2,1);
}


/* ===== css/style.css ===== */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

  :root {
    /* === Legacy --k-* palette — now aliases the canonical --kr-* scale
       (single source of truth in kairion-redesign.css). --k-amber /
       --k-amber-dim are defined there too (mapped to violet). === */
    --k-bg:       var(--kr-bg);
    --k-bg-2:     var(--kr-bg-2);
    --k-panel:    var(--kr-surface);
    --k-panel-2:  var(--kr-surface-2);
    --k-line:     var(--kr-line);
    --k-line-2:   var(--kr-line-2);
    --k-ink:      var(--kr-ink);
    --k-ink-2:    var(--kr-ink-2);
    --k-ink-3:    var(--kr-ink-3);
    --k-ink-4:    var(--kr-ink-4);
    --k-up:       var(--kr-up);
    --k-up-dim:   var(--kr-up-dim);
    --k-up-line:  var(--kr-up-line);
    --k-dn:       var(--kr-dn);
    --k-dn-dim:   var(--kr-dn-dim);
    --k-dn-line:  var(--kr-dn-line);
    --k-mono:     var(--kr-mono);
    --k-sans:     var(--kr-sans);

    /* === LEGACY ALIASES → mapped to Terminal Pro tokens === */
    --bg-primary:    var(--k-bg);
    --bg-secondary:  var(--k-bg-2);
    --bg-card:       var(--k-panel);
    --bg-card-2:     var(--k-panel-2);
    --bg-card-hover: var(--k-bg-2);
    --border:        var(--k-line-2);
    --border-strong: var(--k-line-2);
    --border-glow:   rgba(245, 165, 36, 0.3);
    --text-primary:  var(--k-ink);
    --text-secondary:var(--k-ink-2);
    --text-muted:    var(--k-ink-3);
    --green:         var(--k-up);
    --green-dim:     var(--k-up-dim);
    --green-glow:    var(--kr-up-glow);
    --red:           var(--k-dn);
    --red-dim:       var(--k-dn-dim);
    /* All accents collapse to single amber for Bloomberg-style discipline */
    --blue:          var(--k-amber);
    --blue-dim:      var(--k-amber-dim);
    --yellow:        var(--k-amber);
    --yellow-dim:    var(--k-amber-dim);
    --purple:        var(--k-amber);
    --purple-dim:    var(--k-amber-dim);
    --cyan:          var(--k-amber);
    --cyan-dim:      var(--k-amber-dim);
    --orange:        var(--k-amber);
    --orange-dim:    var(--k-amber-dim);
  }

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

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }

  body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: none;
    pointer-events: none;
    z-index: 0;
  }
  /* === Typography: Inter for UI/readability, JetBrains Mono for data === */
  body { font-family: var(--k-sans); }
  .topbar { backdrop-filter: none !important; background: var(--k-bg) !important; border-bottom: 1px solid var(--k-line-2) !important; }
  /* Legacy base radius for un-classed form elements. NOT !important so the
     Dark Dia class rules (kairion-redesign) win by specificity without needing
     their own !important — see docs/refactor-backlog.md P2. */
  .card, .panel, button, input, select, textarea { border-radius: 2px; }
  /* Tabular numerics for data columns */
  table, .num, .price, .pnl, .score, .home-kpi-value, .signal-dir-cell,
  .signal-last-cell, .signal-delta-cell, .signal-level-cell, .signal-rr-cell,
  .signal-win-cell, .signal-conf-cell, .metric-value, .health-value {
    font-family: var(--k-mono);
    font-variant-numeric: tabular-nums;
  }

  /* === DECORATIVE NEUTRALIZERS — Bloomberg discipline ===
     Strip gradients, glows, blurs, soft shadows from chrome.
     Sentiment color stays only on numbers/direction chips. */
  /* Kill backdrop blur + glassmorphism */
  .topbar, .nav-tabs, .modal, .dropdown, .toast, .control-bar,
  [class*="glass"], [class*="blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Kill big colored glows on cards */
  .card, .panel, [class*="-card"], [class*="-panel"], .signal-card, .position-card {
    box-shadow: none !important;
    background-image: none !important;
  }
  /* Kill rainbow accent dots, neon borders, glow rings */
  [class*="glow"], [class*="neon"], [class*="-ring"] {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Buttons: flat, mono-typed */
  button { font-family: var(--k-mono); letter-spacing: 0.04em; }
  /* Kill soft outer shadows on header/footer/sticky regions */
  header, footer, [class*="sticky"] {
    box-shadow: none !important;
  }
  /* Reset gradient text headings to flat ink */
  h1, h2, h3, h4, .heading, .title, [class*="-title"] {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--k-ink) !important;
    text-shadow: none !important;
  }
  /* Tables: dense terminal rows */
  table thead th { font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--k-ink-4) !important; font-weight: 500 !important; }
  table tbody td { font-variant-numeric: tabular-nums; }
  /* Inputs: square, terminal */
  input, select, textarea {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink) !important;
    font-family: var(--k-mono) !important;
  }
  /* Scrollbars: thin terminal */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--k-bg); }
  ::-webkit-scrollbar-thumb { background: var(--k-line-2); border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background: var(--k-ink-4); }
  /* Selection */
  ::selection { background: var(--k-amber-dim); color: var(--k-amber); }

  .app { position: relative; z-index: 1; }

  /* Top nav */
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    background: rgba(10, 14, 23, 0.85);
    position: sticky; top: 0; z-index: 100;
  }

  .logo {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
    font-weight: 800; font-size: 20px; letter-spacing: -0.5px;
  }

  .logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    box-shadow: 0 4px 15px rgba(59,130,246,0.3);
  }

  .logo-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

  .topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .live-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--green-dim);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 20px;
    font-size: 13px; font-weight: 700;
    color: var(--green);
    letter-spacing: 0.5px;
  }
  .live-badge-sep {
    color: rgba(16,185,129,0.55);
    font-weight: 500;
  }
  .live-badge-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--green);
    opacity: 0.9;
  }

  .live-dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse-dot 1.5s infinite;
    box-shadow: 0 0 8px var(--green-glow);
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .refresh-info {
    font-size: 13px; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
  }

  /* Main layout */
  .main {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto;
    padding: 18px 0 56px;
    min-width: 0;
  }

  .section-title {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--text-muted);
    margin: 28px 0 14px;
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }

  .section-title:first-child { margin-top: 0; }

  .section-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }

  .section-title .badge {
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    letter-spacing: 0.5px;
    font-weight: 600;
  }

  .focus-section {
    margin-bottom: 28px;
    margin-top: 6px;
  }

  /* Primary content: trading signals — clear title ladder */
  .focus-section-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .focus-section-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  /* ── Profile sections (short / swing / grid rendered side-by-side) ── */
  .profile-section {
    margin-top: 14px;
  }
  .profile-section:first-child {
    margin-top: 0;
  }
  .profile-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .profile-section-bar {
    display: inline-block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--ps-accent, rgba(96,165,250,0.85));
    flex: 0 0 auto;
  }
  .profile-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .profile-section-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.015em;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.4;
  }
  .profile-section-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .profile-section-empty {
    padding: 18px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
  }
  .profile-section-empty-sub {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .signal-table-shell {
    border: 1px solid var(--k-line-2);
    background: var(--k-bg-2);
    border-radius: 2px;
    overflow: hidden;
  }
  .signal-table-caption {
    padding: 10px 14px 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--k-ink-3);
    border-bottom: 1px solid var(--k-line);
  }
  .signal-table-scroll {
    overflow-x: auto;
  }
  .signal-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
  }
  .signal-table thead th {
    padding: 11px 10px;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--k-ink-4) !important;
    font-weight: 600 !important;
    text-align: left;
    border-bottom: 1px solid var(--k-line-2);
    background: rgba(255,255,255,0.01);
  }
  .signal-table thead th:nth-child(n+2):not(:nth-child(5)) {
    text-align: center;
  }
  .signal-row td {
    padding: 14px 10px;
    border-top: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
    color: var(--k-ink);
  }
  .signal-row:first-child td {
    border-top: 0;
  }
  .signal-row--long {
    background: linear-gradient(90deg, rgba(45,212,126,0.025), transparent 18%);
  }
  .signal-row--short {
    background: linear-gradient(90deg, rgba(240,85,106,0.03), transparent 18%);
  }
  .signal-row[data-details-trigger] {
    cursor: pointer;
    user-select: none;
  }
  .signal-row[data-details-trigger]:focus {
    outline: none;
  }
  .signal-row[data-details-trigger]:focus-visible {
    outline: 1px solid rgba(245,165,36,0.58);
    outline-offset: -1px;
  }
  .signal-row.signal-row--details-open {
    background: rgba(255,255,255,0.03);
  }
  .signal-symbol-cell {
    min-width: 0;
  }
  .signal-symbol-main {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--k-ink);
  }
  .signal-symbol-sub {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--k-ink-4);
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  .signal-dir-cell,
  .signal-last-cell,
  .signal-delta-cell,
  .signal-level-cell,
  .signal-rr-cell,
  .signal-win-cell,
  .signal-conf-cell {
    text-align: center;
    font-family: var(--k-mono);
    font-variant-numeric: tabular-nums;
  }
  .signal-dir-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid var(--k-line-2);
    background: var(--k-bg);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .signal-dir-chip--long {
    color: var(--k-up);
    border-color: rgba(45,212,126,0.26);
    background: rgba(45,212,126,0.06);
  }
  .signal-dir-chip--short {
    color: var(--k-dn);
    border-color: rgba(240,85,106,0.26);
    background: rgba(240,85,106,0.06);
  }
  .signal-dir-chip--neutral {
    color: var(--k-ink-2);
  }
  .signal-last-cell,
  .signal-level-cell {
    font-size: 14px;
    font-weight: 700;
    color: var(--k-ink);
  }
  .signal-delta-cell.up {
    color: var(--k-up);
  }
  .signal-delta-cell.down {
    color: var(--k-dn);
  }
  .signal-score-cell {
    text-align: left;
    padding-right: 14px;
  }
  .signal-score-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--k-mono);
    color: var(--k-ink);
  }
  .signal-score-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--k-ink);
  }
  .signal-score-den {
    font-size: 12px;
    color: var(--k-ink-4);
    font-weight: 700;
  }
  .signal-score-track {
    margin-top: 5px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148,163,184,0.10);
    overflow: hidden;
  }
  .signal-score-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(245,165,36,0.6), var(--k-amber));
  }
  .signal-rr-cell,
  .signal-win-cell {
    font-size: 14px;
    font-weight: 700;
    color: var(--k-ink);
  }
  .signal-detail-row td {
    padding: 0 14px 16px;
    border-top: 0;
    background: rgba(0,0,0,0.12);
  }
  .signal-empty-row td {
    padding: 26px 16px;
    text-align: center;
    background: rgba(255,255,255,0.01);
    color: var(--k-ink-3);
    border-top: 0;
  }
  .signal-empty-msg {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .signal-empty-sub {
    margin-top: 8px;
    font-size: 13px;
    color: var(--k-ink-4);
    line-height: 1.5;
  }
  .signal-row-details {
    border-top: 1px solid var(--k-line);
    padding-top: 10px;
  }
  .signal-detail-row:has(.signal-row-details:not([open])) {
    display: none;
  }
  .signal-row-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--k-ink-2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    user-select: none;
  }
  .signal-row-details > summary::-webkit-details-marker { display: none; }
  .signal-row-details > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 2px;
    transition: transform 0.15s;
  }
  .signal-row-details[open] > summary::before {
    transform: rotate(90deg);
  }
  .signal-row-details > .signal-row-details-summary--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .signal-row-details > .signal-row-details-summary--hidden::before {
    content: none;
  }
  .signal-row-details-body {
    margin-top: 12px;
    display: grid;
    gap: 10px;
  }
  .signal-detail-warn {
    padding: 8px 10px;
    border: 1px solid rgba(245,165,36,0.24);
    background: rgba(42,33,19,0.8);
    color: var(--k-amber);
    font-size: 13px;
    line-height: 1.5;
  }
  .signal-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .signal-table--grid .signal-row--grid {
    background: linear-gradient(90deg, rgba(59,130,246,0.02), transparent 18%);
  }
  .signal-table--grid .signal-score-num {
    color: var(--k-amber);
  }
  .signal-table--grid .signal-last-cell {
    text-align: left;
  }
  .signal-table--grid .grid-row-last-main {
    font-size: 14px;
    font-weight: 700;
    color: var(--k-ink);
    line-height: 1.15;
  }
  .signal-table--grid .grid-row-last-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--k-ink-4);
    line-height: 1.35;
  }
  .signal-table--grid .signal-delta-cell {
    font-size: 13px;
    color: var(--k-ink-2);
    text-align: center;
  }
  .signal-table--grid .signal-level-cell--sl {
    color: var(--k-dn);
  }
  .signal-table--grid .signal-rr-cell,
  .signal-table--grid .signal-win-cell {
    font-size: 13px;
  }
  .signal-table--grid .signal-detail-row td {
    background: rgba(0,0,0,0.14);
  }
  .signal-table--grid .signal-row-details-body {
    gap: 8px;
  }
  .grid-detail-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--k-line);
    background: rgba(15,23,42,0.5);
    font-size: 13px;
    color: var(--k-ink-2);
    line-height: 1.45;
  }
  .grid-detail-strip b {
    color: var(--k-ink);
    font-weight: 800;
    margin-right: 6px;
  }
  .grid-detail-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .grid-detail-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--k-line);
    background: rgba(15,23,42,0.42);
    font-size: 13px;
    color: var(--k-ink-2);
  }
  .grid-detail-metric strong {
    color: var(--k-ink);
    font-size: 12px;
    font-family: var(--k-mono);
  }
  .grid-row-notes {
    padding: 6px 2px 2px;
  }
  .grid-row-note {
    font-size: 13px;
    color: var(--k-ink-4);
    line-height: 1.5;
  }
  .signal-table thead th:nth-child(1) { text-align: left; }
  .signal-table thead th:nth-child(5) { text-align: left; }
  /* Profile accent colors: short=amber, swing=blue, grid=violet */
  .profile-section--short { --ps-accent: rgba(251, 191, 36, 0.78); }
  .profile-section--swing { --ps-accent: rgba(96, 165, 250, 0.82); }
  .profile-section--grid  { --ps-accent: rgba(167, 139, 250, 0.82); }
  @media (max-width: 640px) {
    .profile-section-head {
      flex-wrap: wrap;
      gap: 8px;
    }
    .profile-section-count { margin-left: 0; }
    .signal-table {
      min-width: 760px;
    }
    .signal-table-caption {
      padding: 10px 12px 8px;
    }
    .signal-table-scroll {
      -webkit-overflow-scrolling: touch;
    }
    .signal-table-scroll::after {
      content: '可左右滑動查看更多欄位';
      display: block;
      padding: 8px 12px 0;
      font-size: 12px;
      color: var(--k-ink-4);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .signal-table--empty thead {
      display: none;
    }
    .signal-table--empty {
      min-width: 0;
    }
    .signal-table--empty .signal-empty-row td {
      padding: 14px 12px;
    }
    .signal-table--empty .signal-empty-msg {
      font-size: 13px;
      letter-spacing: 0.03em;
    }
    .signal-table--empty .signal-empty-sub {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.45;
    }
    .signal-table-shell--empty {
      display: none;
    }
    .signal-table thead th:first-child,
    .signal-row td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      background: linear-gradient(90deg, rgba(8,11,15,0.98), rgba(8,11,15,0.92));
      box-shadow: 8px 0 16px rgba(0,0,0,0.16);
    }
    .signal-table thead th:first-child {
      z-index: 3;
    }
    .signal-row td {
      padding: 10px 7px;
    }
    .signal-symbol-main {
      font-size: 15px;
    }
    .signal-last-cell,
    .signal-level-cell,
    .signal-rr-cell,
    .signal-win-cell {
      font-size: 13px;
    }
    .signal-score-num {
      font-size: 16px;
    }
    .signal-detail-row td {
      padding: 0 10px 14px;
    }
    .signal-row-details-body {
      gap: 8px;
    }
    .signal-row-details-body--grid .grid-detail-strip,
    .signal-row-details-body--grid .grid-detail-metrics {
      grid-template-columns: 1fr;
    }
    .signal-row-details-body--grid .grid-detail-metric {
      padding: 8px 10px;
    }
    .signal-row-details-body--grid .grid-row-note {
      font-size: 12px;
    }
    .signal-row-details--grid > summary {
      gap: 6px;
      font-size: 8.5px;
      letter-spacing: 0.12em;
    }
    .signal-row-details--grid .signal-row-details-sub {
      display: none;
    }
    .signal-detail-row--grid td {
      padding: 0 8px 10px;
    }
  }
  /* Grid candidates panel */
  .grid-candidates-panel {
    margin-top: 14px;
  }
  .grid-candidates-panel:empty {
    display: none;
  }
  .grid-candidates-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .grid-candidates-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    border-left: 3px solid rgba(96,165,250,0.7);
    padding-left: 10px;
  }
  .grid-candidates-sub {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 52ch;
    line-height: 1.5;
  }
  .grid-candidates-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .grid-card {
    border: 1px solid var(--k-line-2);
    border-radius: 2px;
    padding: 14px 16px 16px;
    background: var(--k-bg-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .grid-card--good { border-color: rgba(34,197,94,0.35); }
  .grid-card--warn { border-color: rgba(245,158,11,0.35); }
  .grid-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .grid-card-sym {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
  }
  .grid-card-sym small {
    margin-left: 6px;
    font-weight: 500;
    font-size: 10.5px;
    color: var(--text-muted);
  }
  .grid-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: 11.5px;
  }
  .grid-card-metric-k {
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .grid-card-metric-v {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .grid-card-metric-v--hl {
    color: var(--cyan, #60a5fa);
    font-weight: 800;
  }
  .grid-card-more {
    margin-top: 2px;
  }
  .grid-card-more > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--k-ink-3);
    padding: 2px 0;
    user-select: none;
  }
  .grid-card-more > summary::-webkit-details-marker { display: none; }
  .grid-card-more > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
  }
  .grid-card-more[open] > summary::before { transform: rotate(90deg); }
  .grid-card-more > summary:hover { color: var(--text-primary); }
  .grid-card-metrics--more {
    margin-top: 4px;
    opacity: 0.9;
    font-size: 13px;
  }
  .grid-card-range {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 2px;
    background: var(--k-bg);
    border: 1px solid var(--k-line);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
  }
  .grid-card-range-k {
    color: var(--text-muted);
    margin-right: 6px;
  }
  .grid-card-notes {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
  }
  /* ── Action strip: direction + entry timing + entry price ── */
  .grid-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 2px;
    background: var(--k-bg);
    border: 1px solid var(--k-line);
    font-size: 13px;
    flex-wrap: wrap;
  }
  .grid-action--long {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.3);
  }
  .grid-action--short {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
  }
  .grid-action-bias {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .grid-action-icon {
    font-size: 12px;
    line-height: 1;
  }
  .grid-action--long .grid-action-icon { color: #22c55e; }
  .grid-action--short .grid-action-icon { color: #ef4444; }
  .grid-action--neutral .grid-action-icon { color: #60a5fa; }
  .grid-action-timing {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .grid-action-timing--now {
    background: rgba(34,197,94,0.18);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
  }
  .grid-action-timing--wait {
    background: rgba(245,158,11,0.14);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,0.32);
  }
  .grid-action-entry {
    margin-left: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
  }
  /* ── Position-in-range indicator bar ── */
  .grid-card-posbar {
    position: relative;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(
      to right,
      rgba(239,68,68,0.22) 0%,
      rgba(59,130,246,0.18) 50%,
      rgba(34,197,94,0.22) 100%
    );
    border: 1px solid var(--border);
    margin-top: -2px;
  }
  .grid-card-posbar-fill {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 8px rgba(255,255,255,0.35);
    pointer-events: none;
  }
  .grid-card-posbar-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.02em;
  }
  /* ── Stop row (range-break liquidation-style exit) ── */
  .grid-card-stoprow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 2px;
    background: var(--k-amber-dim);
    border: 1px solid rgba(245,165,36,0.24);
    font-size: 13px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .grid-card-stop-k {
    color: var(--k-amber);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .grid-card-stop-v {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--k-ink);
    font-size: 13px;
  }

  /* Mobile grid-card readability */
  @media (max-width: 640px) {
    .grid-candidates-list {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .grid-card {
      padding: 14px 14px;
      border-radius: 14px;
      gap: 10px;
    }
    .grid-card-head {
      align-items: flex-start;
    }
    .grid-card-sym {
      font-size: 15px;
      line-height: 1.15;
    }
    .grid-card-sym small {
      display: inline-block;
      margin-left: 8px;
      margin-top: 2px;
      font-size: 13px;
    }

    .grid-action {
      padding: 10px 10px;
      font-size: 12px;
      gap: 8px 10px;
    }
    .grid-action-entry {
      width: 100%;
      margin-left: 0;
      font-size: 12px;
      opacity: 0.95;
    }
    .grid-action-timing {
      font-size: 13px;
    }

    .grid-card-range {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 10px 10px;
      font-size: 12px;
      line-height: 1.4;
    }

    .grid-card-posbar {
      height: 8px;
      margin-top: 0;
    }
    .grid-card-posbar-label {
      font-size: 13px;
      opacity: 0.9;
    }

    .grid-card-stoprow {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 10px 10px;
      font-size: 12px;
    }
    .grid-card-stop-v {
      font-size: 12px;
    }

    .grid-card-metrics {
      grid-template-columns: 1fr;
      gap: 6px 0;
      font-size: 12px;
      padding: 10px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .grid-card-metric-k {
      font-size: 13px;
    }
    .grid-card-metric-v {
      justify-self: start;
      font-size: 12.5px;
    }

    .grid-card-more > summary {
      padding: 8px 0;
      font-size: 12px;
    }
    .grid-card-notes {
      font-size: 12px;
      line-height: 1.55;
    }
  }
  .focus-section-heading {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    border-left: 3px solid var(--green);
    padding-left: 12px;
    line-height: 1.25;
  }
  .focus-section-lede {
    margin: 0;
    padding-left: 15px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    font-weight: 500;
    max-width: 52ch;
  }
  .focus-kpi-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #93c5fd;
    vertical-align: middle;
    white-space: nowrap;
  }
  .focus-aux {
    margin-bottom: 12px;
  }
  .focus-aux:empty {
    display: none;
    margin: 0;
  }
  #short-diag-panel:empty {
    display: none;
    margin: 0;
  }

  /* Collapsed utility panels: scanner + position — grouped, less visual weight */
  .dashboard-utilities {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }
  .dashboard-utilities .control-panel {
    margin-bottom: 0;
  }

  /* Unified Control Bar — tabbed surface for scanner / position / single-symbol tools */
  .control-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 22px;
    overflow: hidden;
  }
  .control-bar-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
    border-bottom: 1px solid var(--border);
    overflow-x: visible;
    scrollbar-width: none;
  }
  .control-bar-tabs::-webkit-scrollbar { display: none; }
  .control-bar-tab {
    flex: 1 1 0;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    text-align: left;
    position: relative;
    opacity: 0.65;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
  }
  .control-bar-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.22s ease;
  }
  .control-bar-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    opacity: 0.95;
  }
  .control-bar-tab:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.55);
  }
  .control-bar-tab.is-active {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.08));
    border-color: rgba(96, 165, 250, 0.45);
    color: var(--text-primary);
    opacity: 1;
    box-shadow: 0 1px 0 rgba(96, 165, 250, 0.15) inset, 0 4px 12px -6px rgba(59, 130, 246, 0.4);
  }
  .control-bar-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .control-bar-tab-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .control-bar-tab-meta {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    opacity: 0.85;
  }
  .control-bar-tab.is-active .control-bar-tab-meta {
    color: var(--text-secondary);
    opacity: 1;
  }
  /* Trading tab — compact status only; full controls live in its panel */
  .control-bar-tab--trading {
    flex: 1.1 1 0;
    min-width: 150px;
    padding: 8px 12px !important;
  }
  .control-bar-tab--trading .control-bar-tab-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    margin-right: 4px;
    vertical-align: middle;
  }
  body.trading-enabled .control-bar-tab--trading .control-bar-tab-label::before {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 0 8px rgba(34, 197, 94, 0.6);
    animation: trading-pulse 2s ease-in-out infinite;
  }
  body.trading-paused .control-bar-tab--trading .control-bar-tab-label::before {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2), 0 0 6px rgba(245, 158, 11, 0.5);
  }
  @keyframes trading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  /* Inline action buttons */
  .trading-tab-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .trading-tab-action {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .trading-tab-action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
  }
  .trading-tab-action:active {
    transform: scale(0.92);
  }
  .trading-tab-action:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.6);
  }
  .trading-tab-action--toggle {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
  }
  .trading-tab-action--toggle:hover {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.5);
  }
  body.trading-enabled .trading-tab-action--toggle {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.25);
    background: rgba(248, 113, 113, 0.06);
  }
  body.trading-enabled .trading-tab-action--toggle:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.5);
  }
  .trading-tab-action--pause {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.06);
  }
  .trading-tab-action--pause:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
  }
  .trading-tab-action--kill {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    font-size: 13px;
  }
  .trading-tab-action--kill:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fee2e2;
  }
  .trading-tab-dashboard-shell {
    width: 100%;
    min-width: 0;
    padding-top: 0;
    border-top: 0;
    cursor: default;
  }
  .control-bar-panel[data-tab="trading"] {
    gap: 12px;
  }
  .control-bar-panel[data-tab="trading"] .trading-tab-actions {
    align-self: flex-start;
  }
  .control-bar-panel[data-tab="trading"] .trading-tab-dashboard-shell {
    padding-top: 0;
  }

  /* Responsive: collapse extras on narrow screens */
  @media (max-width: 880px) {
    .control-bar-tab--trading {
      flex: 1.1 1 0;
      min-width: 150px;
    }
  }
  @media (max-width: 640px) {
    .kx-topbar-shell {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      padding: 8px 10px !important;
      min-height: 0 !important;
      height: auto !important;
    }
    .kx-topbar-l,
    .kx-topbar-r {
      width: 100%;
    }
    .kx-topbar-l {
      justify-content: space-between;
      gap: 10px;
      flex: 0 0 auto;
    }
    .kx-topbar-r {
      justify-content: flex-end;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 640px) {
    .control-bar-tab--trading {
      min-width: 120px;
    }
  }
  .control-bar-tab-sep {
    opacity: 0.5;
  }
  .control-bar-panels {
    padding: 14px 16px 16px;
  }
  .control-bar-panel[hidden] { display: none !important; }
  .control-bar-panel { display: flex; flex-direction: column; gap: 12px; }

  .control-bar-collapse {
    order: 20;
    flex: 0 0 auto;
    width: 36px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .control-bar-collapse:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-color: var(--border);
  }
  .control-bar-collapse:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.55);
  }
  .control-bar-collapse-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .control-bar.is-collapsed .control-bar-tabs {
    border-bottom-color: transparent;
  }
  .control-bar.is-collapsed .control-bar-panels {
    display: none;
  }
  .control-bar.is-collapsed .control-bar-collapse-icon {
    transform: rotate(-90deg);
  }

  @media (max-width: 600px) {
    .control-bar-tab { min-width: 80px; padding: 8px 10px; }
    .control-bar-tab-meta { font-size: 12px; }
    .control-bar-panels { padding: 12px; }
  }

  .control-panel-summary-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }
  @media (min-width: 760px) {
    .control-panel-summary-main--scanner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
  }
  .control-panel-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .scanner-threshold-pill {
    font-size: 13px;
    font-weight: 650;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .control-panel-hint-inline {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.4;
    max-width: min(100%, 48ch);
  }
  @media (min-width: 760px) {
    .control-panel-summary-main--position {
      flex-direction: row;
      align-items: center;
      gap: 14px;
    }
    .control-panel-hint-inline {
      margin-left: auto;
      text-align: right;
      max-width: 36ch;
    }
  }

  /* SHORT candidate strip — tertiary diagnostic */
  .short-diag {
    display: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  }
  .short-diag__summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    border: 0;
    background: transparent;
    font-size: 11px;
    text-align: left;
  }
  .short-diag__summary::-webkit-details-marker { display: none; }
  .short-diag__summary:hover {
    opacity: 0.8;
  }
  .short-diag__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }
  .short-diag__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .short-diag__hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
  }
  .short-diag__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .short-diag__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text-secondary);
  }
  .short-diag__stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text-primary);
  }
  .short-diag__stat--live {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(16, 185, 129, 0.08);
    color: #86efac;
  }
  .short-diag__stat--live .short-diag__stat-val {
    color: #86efac;
  }
  .short-diag__stat--muted {
    opacity: 0.88;
  }
  .short-diag__chev {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.2s;
  }
  details.short-diag[open] .short-diag__chev {
    transform: rotate(180deg);
  }
  .short-diag .no-signal-debug-body {
    margin-top: 6px;
  }
  .short-diag__live-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-secondary);
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(74, 222, 128, 0.2);
  }
  .short-diag__live-syms {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #86efac;
    word-break: break-word;
  }

  .control-panel {
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-width: 0;
    overflow: hidden;
  }

  /* Collapsed summary row */
  .control-panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    min-height: 48px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .control-panel-summary::-webkit-details-marker { display: none; }
  .control-panel-summary:hover { background: rgba(255,255,255,0.02); }

  .control-panel-summary-left {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
  }
  .control-panel-summary-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }

  .scanner-toggle-icon {
    font-size: 12px; color: var(--text-muted);
    transition: transform 0.2s;
    display: inline-block;
  }
  details[open] .scanner-toggle-icon { transform: rotate(180deg); }

  /* Expanded body */
  .control-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border);
  }

  .control-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .control-header > div:first-child {
    min-width: 0;
  }

  .control-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .control-title {
    font-size: 13px;
    font-weight: 800;
  }

  .control-subtitle {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .control-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }

  .winrate-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--green-dim);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.22);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .threshold-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: center;
    min-width: 0;
  }

  .threshold-panel {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.24);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.45;
    max-width: 100%;
  }
  .threshold-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
  }
  .scanner-summary-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .scanner-summary-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.02em;
  }
  .scanner-summary-line #scan-mode-label {
    color: #e2e8f0;
  }
  .scanner-summary-line #th-compact {
    color: #fde68a;
  }
  .scanner-summary-sep {
    opacity: 0.4;
  }

  .chip-k {
    font-weight: 650;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  .scanner-summary-compact {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.35;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scanner-threshold-details {
    margin-bottom: 4px;
  }

  .footer-full { display: none; }
  .footer-compact { display: inline; }

  .market-hint {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.08);
    color: #fde68a;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
  }
  /* Secondary contextual hint — sits under signal header, not a loud banner */
  .market-hint--contextual {
    text-align: left;
    font-weight: 650;
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 12px 8px 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid rgba(245, 158, 11, 0.55);
    border-radius: 0 12px 12px 0;
  }
  .market-hint--contextual::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.85);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  }

  .tc2-sm-top1 {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
  }
  .tc2-sm-top1.agree {
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.35);
    background: rgba(16,185,129,0.08);
  }
  .tc2-sm-top1.conflict {
    color: #fecaca;
    border-color: rgba(248,113,113,0.35);
    background: rgba(248,113,113,0.08);
  }

  .threshold-details summary::-webkit-details-marker { display: none; }
  .threshold-details summary { list-style: none; }

  .threshold-note {
    width: 100%;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
  }

  .symbol-search {
    position: relative;
    min-width: 0;
    padding: 13px;
    border-radius: 15px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
  }

  .symbol-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .symbol-search-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.2px;
  }

  .symbol-search-hint {
    font-size: 13px;
    color: var(--text-muted);
  }

  .symbol-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

  .symbol-input {
    flex: 1;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
    font-size: 14px;
  }

  .symbol-input:focus {
    outline: none;
    border-color: rgba(59,130,246,0.55);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  }

  .symbol-add-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,0.35);
    background: rgba(59,130,246,0.14);
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  .symbol-add-btn:hover {
    background: rgba(59,130,246,0.2);
  }

  .symbol-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--bg-card-2);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    max-height: 280px;
    overflow-y: auto;
    display: none;
  }

  .symbol-results.visible {
    display: block;
  }

  .symbol-result {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
  }

  .symbol-result:last-child {
    border-bottom: none;
  }

  .symbol-result:hover {
    background: rgba(255,255,255,0.04);
  }

  .symbol-result-main {
    font-size: 13px;
    font-weight: 800;
  }

  .symbol-result-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .selected-shell {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
  }

  .selected-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
  }

  .selected-toggle::-webkit-details-marker { display: none; }

  .selected-toggle strong {
    color: var(--text-primary);
  }

  .selected-toggle #selected-symbols-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.24);
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 800;
  }

  .selected-arrow {
    color: var(--text-muted);
    transition: transform 0.2s ease;
  }

  .selected-shell[open] .selected-arrow {
    transform: rotate(180deg);
  }

  .selected-body {
    margin-top: 10px;
    padding: 10px 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    max-height: 230px;
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .selected-symbols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
  }

  .scanner-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .single-analyzer {
    margin: 0 0 20px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(59,130,246,0.07), rgba(15,23,42,0.02) 38%, rgba(16,185,129,0.05)),
      rgba(255,255,255,0.028);
  }

  .single-analyzer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .single-analyzer-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--text-primary);
  }

  .single-analyzer-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .single-analyzer-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 250px) auto;
    gap: 12px;
    align-items: end;
  }

  .single-analyzer-field {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
  }

  .single-analyzer-input,
  .single-analyzer-select {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    background: rgba(2,6,23,0.36);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 15px;
    outline: none;
  }

  .single-analyzer-input:focus,
  .single-analyzer-select:focus {
    border-color: rgba(96,165,250,0.7);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
  }

  .single-analyzer-btn {
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #5b8dff, #3b6eea);
    color: #fff;
    padding: 0 22px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(59,130,246,0.22);
  }

  .single-analyzer-btn:hover {
    filter: brightness(1.06);
  }

  .single-analyzer-btn:disabled {
    cursor: progress;
    opacity: 0.72;
  }

  .single-output {
    margin-top: 14px;
  }

  .single-output-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(7,12,24,0.54);
    padding: 18px;
  }

  .single-output-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
  }

  .single-symbol {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 24px;
    font-weight: 950;
    color: var(--text-primary);
  }

  .single-symbol-code {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
  }

  .single-setup-line {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 750;
    color: var(--text-muted);
  }

  .single-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    min-height: 42px;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  .single-status.long { background: rgba(34,197,94,0.14); color: var(--green); }
  .single-status.short { background: rgba(239,68,68,0.14); color: var(--red); }
  .single-status.no-trade {
    background: rgba(148,163,184,0.13);
    color: var(--text-secondary);
    border: 1px dashed rgba(148,163,184,0.22);
  }

  .single-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
  }

  .single-price-strip,
  .single-quality-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .single-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .single-metric {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 11px 12px;
    background: rgba(255,255,255,0.032);
  }

  .single-metric.primary {
    background: rgba(59,130,246,0.08);
    border-color: rgba(96,165,250,0.18);
  }

  .single-metric.danger {
    background: rgba(249,115,22,0.07);
    border-color: rgba(249,115,22,0.22);
  }

  .single-metric-label {
    font-size: 12px;
    font-weight: 850;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .single-metric-value {
    margin-top: 5px;
    font-size: 19px;
    font-weight: 950;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .single-metric-value.good { color: var(--green); }
  .single-metric-value.bad { color: var(--orange); }

  .single-notes {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .single-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.025);
  }

  .single-note::before {
    content: "";
    width: 3px;
    min-width: 3px;
    align-self: stretch;
    border-radius: 999px;
    background: rgba(148,163,184,0.38);
  }

  .single-note.warn {
    color: #fed7aa;
  }

  .single-note.warn::before {
    background: var(--orange);
  }

  .single-side-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .single-side {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.025);
    font-size: 12px;
    color: var(--text-secondary);
  }

  .single-side.is-selected {
    border-color: rgba(96,165,250,0.22);
    background: rgba(59,130,246,0.07);
  }

  .single-side strong {
    color: var(--text-primary);
  }

  .preset-section {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
  }

  .preset-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .preset-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-primary);
  }

  .preset-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .preset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .preset-btn {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.28);
    background: rgba(59,130,246,0.1);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
  }

  .preset-btn:hover {
    background: rgba(59,130,246,0.18);
    border-color: rgba(96,165,250,0.42);
  }

  @media (min-width: 960px) {
    .scanner-tools-grid {
      gap: 14px;
    }
  }

  .symbol-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main remove"
      "sub remove";
    align-items: center;
    gap: 2px 8px;
    min-height: 50px;
    padding: 9px 10px 9px 11px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    max-width: 100%;
  }

  .symbol-chip-main {
    grid-area: main;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .symbol-chip-sub {
    grid-area: sub;
    font-size: 13px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
  }

  .symbol-chip-remove {
    grid-area: remove;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(239,68,68,0.12);
    color: var(--red);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
  }

  .symbol-chip-remove:hover {
    background: rgba(239,68,68,0.2);
  }

  .control-note {
    font-size: 13px;
    color: var(--text-muted);
  }

  .topbar-nav-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .topbar-nav-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-1px);
  }
  .topbar-nav-btn svg {
    display: block;
    opacity: 0.9;
  }

  .settings-nav-btn {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
  }

  .history-nav-btn {
    border-color: rgba(59,130,246,0.30);
    color: #60a5fa;
    background: rgba(59,130,246,0.08);
  }
  .history-nav-btn:hover {
    background: rgba(59,130,246,0.14);
    border-color: rgba(59,130,246,0.50);
  }

  /* Market cards */
  .market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
  }

  .market-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    position: relative; overflow: hidden;
    transition: all 0.3s;
  }

  .market-card:hover { border-color: var(--border-strong); }

  .mc-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }

  .coin-info { display: flex; align-items: center; gap: 12px; }

  .coin-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
  }

  .coin-icon.btc { background: linear-gradient(135deg, #f7931a30, #f7931a10); color: #f7931a; border: 1px solid #f7931a40; }
  .coin-icon.eth { background: linear-gradient(135deg, #627eea30, #627eea10); color: #627eea; border: 1px solid #627eea40; }

  .coin-name { font-weight: 700; font-size: 15px; }
  .coin-symbol { font-size: 13px; color: var(--text-muted); letter-spacing: 0.5px; }

  .market-price {
    font-size: 30px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -1px;
    margin-bottom: 6px;
  }

  .change-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
  }

  .change-badge.up { background: var(--green-dim); color: var(--green); }
  .change-badge.down { background: var(--red-dim); color: var(--red); }

  .mc-stats {
    display: flex; gap: 18px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-muted);
  }

  .mc-stats span { color: var(--text-primary); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

  /* Regime banner */
  .regime-banner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 4px;
  }

  .regime-item { display: flex; flex-direction: column; gap: 4px; }
  .regime-label {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted);
  }
  .regime-value {
    font-size: 18px; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
  }
  .regime-chip {
    font-size: 12px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    letter-spacing: 0.5px; text-transform: uppercase;
  }
  .regime-chip.trending { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
  .regime-chip.ranging  { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }
  .regime-chip.high { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
  .regime-chip.normal { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }
  .regime-chip.low { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(139,92,246,0.3); }

  /* MTF Matrix */
  .mtf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .mtf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
  }

  .mtf-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .mtf-title { font-size: 14px; font-weight: 800; }

  .mtf-rows { display: flex; flex-direction: column; gap: 8px; }

  .mtf-row {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 1fr 1fr 70px;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
  }

  .mtf-row.header {
    background: transparent;
    border: none;
    padding: 0 10px 4px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 13px;
  }

  .mtf-tf {
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }

  .mtf-indicator {
    text-align: center;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
  }

  .ind-bull { color: var(--green); }
  .ind-bear { color: var(--red); }
  .ind-neutral { color: var(--text-muted); }

  .mtf-trend-badge {
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 5px;
    letter-spacing: 0.3px;
  }

  .trend-bull-strong { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
  .trend-bull-weak { background: rgba(16,185,129,0.08); color: var(--green); opacity: 0.7; }
  .trend-bear-strong { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
  .trend-bear-weak { background: rgba(239,68,68,0.08); color: var(--red); opacity: 0.7; }
  .trend-neutral { background: rgba(148,163,184,0.1); color: var(--text-muted); }

  /* Confluence cards */
  .conf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
  }

  .conf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    transition: all 0.3s;
  }

  .conf-card.high { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 20px rgba(16,185,129,0.08); }

  .conf-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }

  .conf-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
  }

  .conf-dir {
    font-size: 12px; font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.5px;
  }

  .conf-dir.long { background: var(--green-dim); color: var(--green); }
  .conf-dir.short { background: var(--red-dim); color: var(--red); }

  .conf-score {
    font-size: 36px; font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 4px;
    letter-spacing: -1px;
  }
  .conf-score .suffix {
    font-size: 16px; color: var(--text-muted); font-weight: 600;
  }

  .conf-bar-track {
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px 0 6px;
  }

  .conf-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
  }

  .conf-bar-fill.long { background: linear-gradient(90deg, var(--green), #34d399); }
  .conf-bar-fill.short { background: linear-gradient(90deg, var(--red), #f87171); }

  .conf-quality {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
  }
  .conf-quality.high { color: var(--green); }
  .conf-quality.mid { color: var(--yellow); }
  .conf-quality.low { color: var(--text-muted); }

  /* Indicator panel */
  .ind-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ind-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
  }

  .ind-panel-title {
    font-size: 13px; font-weight: 800;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }

  .ind-panel-title .tf-chip {
    font-size: 13px; font-weight: 700;
    padding: 2px 6px;
    background: var(--blue-dim);
    color: var(--blue);
    border-radius: 4px;
    letter-spacing: 0.5px;
  }

  .ind-rows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

  .ind-box {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px;
  }

  .ind-box-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .ind-box-value {
    font-size: 16px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
  }

  .ind-box-sub {
    font-size: 12px;
    margin-top: 2px;
    color: var(--text-muted);
  }

  /* Best Trade banner */
  .best-trade-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.03));
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 20px;
    padding: 24px 28px;
    display: flex; align-items: center; gap: 22px;
    margin-bottom: 4px;
  }

  .decision-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }

  .decision-pill {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 16px;
  }

  .decision-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .decision-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
  }

  .decision-value.long { color: var(--green); }
  .decision-value.short { color: var(--red); }
  .decision-value.neutral { color: var(--text-secondary); }

  .best-icon {
    width: 54px; height: 54px;
    background: var(--yellow-dim);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    border: 1px solid rgba(245,158,11,0.3);
  }

  .best-content { flex: 1; }
  .best-content h3 { font-size: 17px; font-weight: 800; color: var(--yellow); margin-bottom: 4px; }
  .best-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

  .best-stats { display: flex; gap: 18px; flex-shrink: 0; }
  .best-stat { text-align: center; }
  .best-stat-value {
    font-size: 20px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
  }
  .best-stat-label {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
  }

  /* Trade cards */
  .trades-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
  }

  .signals-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .decision-debug-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .decision-debug-pill {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
  }

  .decision-debug-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .decision-debug-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
  }

  .decision-debug-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
  }

  .signals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
  }

  .signals-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .signals-kicker {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .signals-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .signals-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
  }

  .signals-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .analytics-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }

  .analytics-stat,
  .analytics-card,
  .analytics-empty {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
  }

  .analytics-stat {
    padding: 18px;
  }

  .analytics-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
  }

  .analytics-stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
  }

  .analytics-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .analytics-card {
    padding: 18px;
  }

  .analytics-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
  }

  .analytics-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .analytics-row {
    padding: 14px 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    line-height: 1.5;
  }

  .analytics-row:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 14px;
  }

  .analytics-row:nth-child(even) {
    background: rgba(255,255,255,0.04);
  }

  .analytics-row-main,
  .analytics-row-sub {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .analytics-row-main {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .analytics-row-sub {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .analytics-card-full {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .analytics-conf-card {
    border-color: rgba(59, 130, 246, 0.22);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, var(--bg-card) 48%);
  }
  .analytics-conf-intro {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 16px;
    max-width: 920px;
  }
  .analytics-conf-section { margin-bottom: 18px; }
  .analytics-conf-section:last-child { margin-bottom: 0; }
  .analytics-conf-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
  }
  .analytics-conf-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .analytics-conf-row {
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .analytics-conf-row-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .analytics-conf-row-sub {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .analytics-conf-row-edge {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
  }
  .analytics-edge-ok { color: var(--green); }
  .analytics-edge-warn { color: var(--yellow); }
  .analytics-edge-na { color: var(--text-muted); font-weight: 600; }

  .analytics-empty {
    padding: 22px;
  }

  .analytics-empty h4 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .analytics-empty p {
    color: var(--text-secondary);
    font-size: 13px;
  }

  .trade-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    min-width: 0;
  }

  .trade-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-glow);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  }

  .trade-card.best {
    border-color: var(--yellow);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.1);
  }

  .trade-card.best::after {
    content: '★ BEST';
    position: absolute;
    top: 14px; right: 14px;
    font-size: 13px; font-weight: 800;
    letter-spacing: 1px;
    color: var(--yellow);
    background: var(--yellow-dim);
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid rgba(245, 158, 11, 0.3);
  }

  .trade-header {
    padding: 20px 22px 0;
    display: flex; align-items: flex-start; gap: 12px;
    flex-wrap: wrap;
  }

  .trade-number {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    flex-shrink: 0;
  }

  .trade-number.long { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
  .trade-number.short { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }

  .trade-coin {
    font-size: 18px; font-weight: 800;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }

  .trade-direction {
    font-size: 12px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
  }
  .trade-direction.long { background: var(--green-dim); color: var(--green); }
  .trade-direction.short { background: var(--red-dim); color: var(--red); }

  .trade-type { font-size: 12px; color: var(--text-muted); }

  .trade-body { padding: 18px 22px; }

  .trade-levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .level-item {
    background: rgba(255,255,255,0.02);
    border-radius: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.04);
  }

  .level-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 4px;
  }

  .level-value {
    font-size: 13px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
  }

  .level-value.entry { color: var(--blue); }
  .level-value.sl { color: var(--red); }
  .level-value.tp { color: var(--green); }

  .trade-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
  }

  .metric {
    text-align: center;
    padding: 10px 4px;
    background: rgba(255,255,255,0.02);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.04);
  }

  .metric-value {
    font-size: 16px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
  }

  .metric-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted);
  }

  .trade-logic {
    padding: 14px;
    background: var(--blue-dim);
    border-radius: 10px;
    border: 1px solid rgba(59,130,246,0.15);
  }

  .trade-logic details {
    border-radius: 8px;
  }

  .trade-logic summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--blue);
  }

  .trade-logic summary::-webkit-details-marker { display: none; }

  .trade-logic-title {
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--blue);
  }

  .trade-logic-hint {
    font-size: 12px;
    color: var(--text-muted);
  }

  .trade-logic-body {
    margin-top: 10px;
  }

  .trade-logic ul { list-style: none; padding: 0; }

  .trade-logic li {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding-left: 12px;
    position: relative;
    margin-bottom: 3px;
  }

  .trade-logic li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--blue);
  }

  /* No trade state */
  .no-trade {
    padding: 28px 24px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: 16px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .no-trade h3 { color: var(--text-secondary); font-size: 16px; font-weight: 700; }
  .no-trade p { font-size: 13px; color: var(--text-muted); max-width: 520px; line-height: 1.55; }

  /* Improved section headers */
  .section-title.has-accent {
    padding-left: 10px;
    border-left: 3px solid var(--blue);
  }

  /* Risk */
  .risk-warning {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex; gap: 14px; align-items: flex-start;
  }

  .risk-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

  .risk-content h4 { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--orange); }

  .risk-content ul { list-style: none; padding: 0; }
  .risk-content li {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.65;
    padding-left: 14px;
    position: relative;
  }
  .risk-content li::before {
    content: '!'; position: absolute; left: 0;
    font-weight: 800; color: var(--orange);
  }

  /* Loading */
  .loading-overlay {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: min(420px, calc(100vw - 36px));
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid rgba(96,165,250,0.22);
    border-radius: 16px;
    background: rgba(10, 14, 23, 0.92);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.5s, transform 0.25s ease;
    box-shadow: 0 18px 50px rgba(0,0,0,0.36);
    pointer-events: none;
  }
  .loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .loading-overlay.is-slow {
    border-color: rgba(245,165,36,0.28);
    box-shadow: 0 18px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(245,165,36,0.08) inset;
  }
  .loading-overlay.is-slow .spinner {
    width: 26px;
    height: 26px;
    margin: 0 0 8px;
    border-width: 2px;
  }
  .loading-overlay.is-slow .loading-text {
    font-size: 12px;
    font-weight: 800;
  }
  .loading-overlay.is-slow .loading-sub {
    font-size: 10.5px;
    line-height: 1.45;
  }
  .spinner {
    width: 48px; height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .loading-text { font-size: 13px; color: var(--text-secondary); }
  .loading-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

  /* Error state */
  .error-banner {
    background: var(--red-dim);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--red);
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
  }
  .error-banner.error-banner--actionable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .error-banner-text {
    flex: 1 1 260px;
    min-width: 0;
  }
  .error-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .error-action-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(248,113,113,0.34);
    background: rgba(15,23,42,0.52);
    color: #fecaca;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  .error-action-btn:hover {
    background: rgba(239,68,68,0.18);
  }

  .footer {
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 32px;
    line-height: 1.6;
  }

  /* Responsive */
  @media (max-width: 1100px) {
    .topbar {
      padding: 14px 20px;
    }
    .main {
      padding: 18px 20px 48px;
    }
    .conf-grid { grid-template-columns: 1fr 1fr; }
    .regime-banner { grid-template-columns: 1fr 1fr; }
    .analytics-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analytics-detail-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .market-grid, .mtf-grid, .ind-grid { grid-template-columns: 1fr; }
    .trades-grid { grid-template-columns: 1fr; }
    .best-trade-banner { flex-direction: column; align-items: flex-start; }
    .decision-strip { grid-template-columns: 1fr; }
    .decision-debug-strip { grid-template-columns: 1fr 1fr; }
    .signals-header { align-items: flex-start; flex-direction: column; }
    .signals-actions { width: 100%; }
    .control-panel {
      padding: 14px;
      border-radius: 16px;
    }
    .topbar {
      align-items: flex-start;
    }
    .topbar-right {
      width: 100%;
      justify-content: flex-start;
    }
    .refresh-info {
      width: 100%;
    }
    .control-header, .symbol-search-row { flex-direction: column; }
    .control-header-main {
      width: 100%;
    }
    .symbol-add-btn {
      width: 100%;
    }
    .symbol-search-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .preset-section-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .preset-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .preset-btn {
      width: 100%;
    }
    .selected-toggle {
      align-items: flex-start;
    }
	    .selected-symbols {
	      grid-template-columns: 1fr;
	    }
	    .single-analyzer-form {
	      grid-template-columns: 1fr;
	    }
	    .single-output-top,
	    .single-decision-grid {
	      grid-template-columns: 1fr;
	    }
	    .single-metrics {
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	    }
	    .single-price-strip,
	    .single-quality-strip {
	      grid-template-columns: 1fr;
	    }
	    .single-side-grid {
	      grid-template-columns: 1fr;
	    }
	  }
  @media (max-width: 780px) {
    .topbar-right > * {
      flex: 1 1 auto;
    }
    .decision-debug-strip {
      grid-template-columns: 1fr;
    }
    .section-title::after {
      min-width: 48px;
    }
  }
  @media (max-width: 640px) {
    .footer-full { display: none; }
    .footer-compact { display: inline; }

    .topbar {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      grid-template-areas:
        "logo    .        settings history"
        ".       .        .        status";
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
    }
    .logo { grid-area: logo; }
    #settings-nav { grid-area: settings; }
    #history-nav { grid-area: history; }
    .topbar-right {
      display: contents;
    }
    .live-badge {
      grid-area: status;
      justify-self: end;
    }
    .live-badge {
      grid-area: status;
      justify-self: start;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 650;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.09);
      color: var(--text-secondary);
      letter-spacing: 0.3px;
    }
    .live-badge .live-dot {
      box-shadow: 0 0 6px rgba(16, 185, 129, 0.35);
    }
    .control-panel {
      border-color: rgba(255, 255, 255, 0.065);
    }
    .refresh-info {
      display: none;
    }
    #settings-nav,
    #history-nav {
      width: auto;
      min-width: 0;
      min-height: 36px;
      padding: 0 12px;
      font-size: 12px;
      justify-self: end;
    }
    .control-bar {
      margin-bottom: 16px;
    }
    .control-bar-tabs {
      padding: 5px;
      gap: 4px;
    }
    .control-bar-tab {
      min-width: 0;
      min-height: 48px;
      padding: 8px 7px;
      align-items: center;
      text-align: center;
    }
    .control-bar-tab-meta {
      display: none;
    }
    .control-bar-tab.is-active .control-bar-tab-meta {
      display: flex;
      justify-content: center;
      font-size: 9.5px;
      max-width: 100%;
    }
    .control-bar-collapse {
      width: 40px;
      min-height: 48px;
    }
    .control-bar.is-collapsed .control-bar-tab {
      min-height: 42px;
    }
    .control-bar.is-collapsed .control-bar-tab-meta {
      display: none;
    }
    .loading-overlay {
      left: 14px;
      right: 14px;
      bottom: 14px;
      width: auto;
    }
    .error-banner.error-banner--actionable {
      align-items: stretch;
    }
    .error-banner-actions,
    .error-action-btn {
      width: 100%;
    }
    .error-action-btn {
      flex: 1 1 100%;
    }
    #settings-nav svg,
    #history-nav svg {
      width: 14px;
      height: 14px;
    }

    /* Scanner strip: one compact row when collapsed */
    .control-panel-summary {
      align-items: center;
      padding: 12px 14px;
      gap: 10px;
      min-height: 44px;
    }
    .control-panel-summary-main {
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    details#scanner-panel:not([open]) .control-panel-summary-main--scanner {
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
    }
    details#scanner-panel:not([open]) .control-panel-summary-meta {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: flex-end;
    }
    #position-review-panel .control-panel-summary-main--position {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    #position-review-panel .control-panel-hint-inline {
      margin-left: 0;
      text-align: left;
      max-width: 100%;
    }
    .control-title {
      font-size: 14px;
      font-weight: 750;
      letter-spacing: -0.03em;
      color: var(--text-primary);
      flex-shrink: 0;
    }

    /* Collapsed: hide chips; show only one-line summary next to title */
    details.control-panel:not([open]) .scanner-summary-chips {
      display: none;
    }
    details.control-panel:not([open]) .scanner-threshold-pill {
      flex: 1 1 auto;
      min-width: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Expanded: full layout below */
    details.control-panel[open] .control-panel-summary-main {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 10px;
    }
    details.control-panel[open] .scanner-summary-chips {
      display: inline-flex;
      gap: 6px;
    }
    .scanner-summary-chips .chip-k {
      font-size: 13px;
      letter-spacing: 0.03em;
      opacity: 0.85;
    }
    .mode-chip,
    .winrate-chip {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text-secondary);
      font-weight: 650;
      padding: 7px 11px;
      font-size: 13px;
    }
    details.control-panel[open] .scanner-threshold-pill {
      flex-basis: auto;
      white-space: normal;
      padding: 9px 11px;
      margin-top: 0;
      border-top: none;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--text-secondary);
      font-family: inherit;
      font-weight: 560;
      font-size: 12px;
      line-height: 1.45;
    }
    .scanner-threshold-details .threshold-panel {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
      color: var(--text-secondary);
    }
    .scanner-threshold-details .threshold-note {
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    /* Trade card levels: list-like rows instead of nested boxes */
    .tc2-levels-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }
    .tc2-levels-grid .tc2-lv {
      background: var(--k-bg);
      border: 1px solid var(--k-line-2);
      border-radius: 2px;
      padding: 14px 14px 12px;
      text-align: left;
      min-height: 92px;
    }
    .tc2-levels-grid .tc2-lv-label {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 13px;
      font-weight: 800;
      color: var(--k-ink-4);
      margin-bottom: 8px;
    }
    .tc2-body {
      padding: 0 16px 18px;
    }
    .trade-card-v2.rank-1 {
      box-shadow: none;
    }

    .focus-section-header {
      margin-bottom: 12px;
      padding-bottom: 10px;
    }
    .focus-section-heading {
      font-size: 1.05rem;
    }
    .focus-kpi-pill {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .conf-grid { grid-template-columns: 1fr; }
    .regime-banner { grid-template-columns: 1fr; }
    .analytics-summary-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .analytics-stat {
      padding: 13px 14px;
      border-color: rgba(255, 255, 255, 0.065);
      border-radius: 12px;
    }
    .analytics-stat-value {
      font-size: 21px;
    }
    .decision-debug-strip { grid-template-columns: 1fr; }
    .main { padding: 16px; padding-bottom: 28px; }
    .logo {
      gap: 10px;
      font-size: 17px;
      grid-area: logo;
      min-width: 0;
    }
    .logo-sub {
      font-size: 13px;
      letter-spacing: 0.8px;
    }
    .logo-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    .section-title {
      gap: 8px;
      margin: 18px 0 12px;
      letter-spacing: 0.06em;
    }
    .control-meta {
      gap: 6px;
    }
    .mode-chip,
    .winrate-chip,
    .threshold-panel {
      max-width: 100%;
    }
    .symbol-input {
      min-height: 42px;
      font-size: 16px;
    }
    .preset-actions {
      grid-template-columns: 1fr;
    }
    .selected-shell {
      margin-top: 2px;
    }
    .selected-body {
      max-height: 190px;
    }
    .trade-card {
      border-radius: 16px;
    }
    .trade-header {
      padding: 18px 18px 0;
      gap: 10px;
    }
    .trade-body {
      padding: 16px 18px 18px;
    }
    .trade-coin {
      font-size: 16px;
    }
    .trade-levels {
      grid-template-columns: 1fr;
    }
    .trade-metrics {
      grid-template-columns: 1fr 1fr;
    }
    .level-item,
    .metric {
      padding: 10px 11px;
    }
    .footer {
      padding: 20px 8px 0;
      font-size: 12px;
    }
  }
  @media (max-width: 420px) {
    .decision-debug-pill {
      padding: 9px 10px;
    }
    .trade-header {
      padding: 16px 16px 0;
    }
    .trade-body {
      padding: 14px 16px 16px;
    }
    .trade-number {
      width: 30px;
      height: 30px;
      font-size: 13px;
    }
    .trade-coin {
      font-size: 15px;
    }
    .metric-value {
      font-size: 22px;
    }
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg-primary); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  /* ════════════════════════════════════════════════════════
     KAIRION TERMINAL PRO — FULL OVERRIDE
     Re-skins the existing layout without touching DOM/JS
     ════════════════════════════════════════════════════════ */

  /* Global reset */
  body, .app, .main, body * {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  }
  body::before, body::after { display: none !important; }
  body { background: var(--k-bg) !important; }

  /* Sharpen everything */
  .card, .panel, button, input, select, textarea,
  .control-bar, .control-bar-tab, .focus-section, .trade-card-v2,
  .preset-btn, .symbol-add-btn, .single-analyzer-btn,
  .topbar-nav-btn, .live-badge,
  .selected-shell, .pr-advanced, details,
  .control-bar-panel, .scanner-tools-grid > *,
  .symbol-search, .preset-section, .position-review-form-wrap,
  .single-analyzer-head, .single-analyzer-form,
  [class*="card"], [class*="panel"], [class*="shell"], [class*="wrap"] {
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  /* Topbar */
  .topbar {
    background: var(--k-bg) !important;
    border-bottom: 1px solid var(--k-line-2) !important;
    backdrop-filter: none !important;
    height: 44px !important;
    padding: 0 16px !important;
  }
  .logo {
    gap: 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--k-ink) !important;
  }
  .logo-icon {
    width: 22px !important; height: 22px !important;
    background: var(--k-amber) !important;
    color: var(--k-bg) !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  /* Live badge */
  .live-badge {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink-2) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    padding: 5px 10px !important;
  }
  .live-dot { background: var(--k-up) !important; }

  /* Topbar nav buttons (設定/歷史) */
  .topbar-nav-btn, .settings-nav-btn, .history-nav-btn {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink-2) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    padding: 6px 10px !important;
    text-transform: uppercase !important;
  }
  .topbar-nav-btn:hover { color: var(--k-amber) !important; border-color: var(--k-amber) !important; }

  /* Control bar (掃描/持倉/試算/交易) */
  .control-bar {
    background: var(--k-panel) !important;
    border: 1px solid var(--k-line-2) !important;
    padding: 0 !important;
  }
  .control-bar-tabs {
    border-bottom: 1px solid var(--k-line-2) !important;
    background: var(--k-bg-2) !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .control-bar-tab {
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--k-line) !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    color: var(--k-ink-3) !important;
  }
  .control-bar-tab.is-active {
    color: var(--k-amber) !important;
    background: var(--k-bg) !important;
    box-shadow: inset 0 -2px 0 var(--k-amber) !important;
  }
  .control-bar-tab-label {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  .control-bar-tab-meta {
    font-size: 10px !important;
    color: var(--k-ink-4) !important;
    letter-spacing: 0.06em !important;
  }
  .control-bar-panel {
    background: var(--k-panel) !important;
    padding: 14px !important;
  }

  /* Trading panel inside tab */
  .control-bar-tab--trading {
    border-left: 1px solid var(--k-line-2) !important;
  }
  .trading-tab-stat-label { color: var(--k-ink-4) !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; }
  .trading-tab-stat-value { color: var(--k-ink) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; }
  .trading-tab-stat--failed .trading-tab-stat-value { color: var(--k-dn) !important; }
  .trading-tab-action {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    border-radius: 2px !important;
    color: var(--k-ink-2) !important;
  }
  .trading-tab-action--toggle { color: var(--k-up) !important; border-color: var(--k-up-line) !important; }
  .trading-tab-action--pause  { color: var(--k-amber) !important; border-color: rgba(245,165,36,0.3) !important; }
  .trading-tab-action--kill   { color: var(--k-dn) !important; border-color: var(--k-dn-line) !important; }

  /* Preset / search inside scanner panel */
  .preset-section, .symbol-search, .selected-shell {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    padding: 12px !important;
  }
  .preset-title, .symbol-search-title, .single-analyzer-title {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    color: var(--k-ink-2) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  .preset-sub, .symbol-search-hint, .single-analyzer-sub {
    color: var(--k-ink-4) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
  }
  .preset-btn, .symbol-add-btn, .single-analyzer-btn {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink-2) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
  }
  .preset-btn:hover, .symbol-add-btn:hover, .single-analyzer-btn:hover {
    color: var(--k-amber) !important;
    border-color: var(--k-amber) !important;
  }

  /* Inputs */
  .symbol-input, .single-analyzer-input, .single-analyzer-select,
  input[type="text"], input[type="number"], input[type="datetime-local"],
  select, textarea {
    background: var(--k-bg) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink) !important;
    border-radius: 2px !important;
    font-family: var(--k-mono) !important;
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--k-amber) !important;
    outline: 0 !important;
  }

  /* Focus section (交易建議) */
  .focus-section {
    background: var(--k-panel) !important;
    border: 1px solid var(--k-line-2) !important;
  }
  .focus-section-header {
    background: var(--k-bg-2) !important;
    border-bottom: 1px solid var(--k-line-2) !important;
    padding: 10px 14px !important;
  }
  .focus-section-heading {
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    color: var(--k-ink-2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .focus-section-heading::before {
    content: '' !important;
    display: inline-block !important;
    width: 3px !important; height: 11px !important;
    background: var(--k-amber) !important;
  }

  /* Trade cards → flat terminal rows */
  .trade-card-v2 {
    background: var(--k-panel) !important;
    border: 1px solid var(--k-line-2) !important;
    border-radius: 2px !important;
  }
  .trade-card-v2.rank-1 {
    border-color: var(--k-amber) !important;
    box-shadow: none !important;
  }
  .tc2-rank {
    border-radius: 2px !important;
    background: var(--k-bg-2) !important;
    color: var(--k-ink-2) !important;
    border: 1px solid var(--k-line-2) !important;
    font-weight: 700 !important;
  }
  .trade-card-v2.rank-1 .tc2-rank {
    background: var(--k-amber-dim) !important;
    color: var(--k-amber) !important;
    border-color: var(--k-amber) !important;
  }
  .tc2-symbol { font-weight: 700 !important; letter-spacing: 0.04em !important; }
  .tc2-dir {
    border-radius: 2px !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  /* Tables */
  table {
    border-collapse: collapse !important;
    font-variant-numeric: tabular-nums !important;
  }
  table thead th {
    background: var(--k-bg-2) !important;
    color: var(--k-ink-4) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--k-line-2) !important;
    padding: 7px 12px !important;
  }
  table tbody tr { border-bottom: 1px solid var(--k-line) !important; }
  table tbody tr:hover { background: var(--k-bg-2) !important; }
  table td { padding: 9px 12px !important; font-size: 11.5px !important; }

  /* Loading */
  .loading-overlay { background: var(--k-bg) !important; }
  .spinner {
    border-color: var(--k-line-2) !important;
    border-top-color: var(--k-amber) !important;
  }
  .loading-text { color: var(--k-ink-2) !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; }
  .loading-sub { color: var(--k-ink-4) !important; }

  /* Selected symbols chips */
  .selected-symbols .chip, .selected-symbols > * {
    background: var(--k-bg-2) !important;
    border: 1px solid var(--k-line-2) !important;
    border-radius: 2px !important;
    color: var(--k-ink-2) !important;
    font-size: 10.5px !important;
  }

  /* Position review form */
  .pr-group-tag {
    background: var(--k-bg) !important;
    border: 1px solid var(--k-line-2) !important;
    color: var(--k-ink-3) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
  }
  .pr-group-tag--req { color: var(--k-amber) !important; border-color: var(--k-amber) !important; }
  .pr-form-actions button[type="submit"],
  form button[type="submit"] {
    background: var(--k-amber-dim) !important;
    color: var(--k-amber) !important;
    border: 1px solid var(--k-amber) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
  }

  /* Force tabular nums on price-like cells */
  [class*="price"], [class*="value"], [class*="score"], [class*="pnl"],
  [class*="rate"], [class*="metric"], .num, .tc2-symbol, td {
    font-variant-numeric: tabular-nums !important;
  }

  /* Remove all gradients */
  [class*="card"], [class*="panel"], [class*="banner"], [class*="badge"],
  [class*="header"], button, .topbar, .focus-section {
    background-image: none !important;
  }

  /* Scrollbar refinement */
  ::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
  ::-webkit-scrollbar-track { background: var(--k-bg) !important; }
  ::-webkit-scrollbar-thumb { background: var(--k-line-2) !important; border-radius: 0 !important; }
  ::-webkit-scrollbar-thumb:hover { background: var(--k-ink-4) !important; }

  /* ═══ Trade Card v2 (Chinese) ═══ */
  .trade-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s;
  }
  .trade-card-v2:hover { border-color: var(--border-strong); }
  .trade-card-v2.rank-1 { border-color: var(--yellow); box-shadow: 0 0 25px rgba(245,158,11,0.1); }
  .trade-card-v2.rank-1 .tc2-rank { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }

  .tc2-header {
    padding: 20px 22px 14px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .tc2-left { display: flex; align-items: center; gap: 12px; }
  .tc2-rank {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    background: rgba(255,255,255,0.05); color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .tc2-symbol { font-size: 20px; font-weight: 800; }
  .tc2-dir {
    font-size: 13px; font-weight: 800; padding: 3px 10px;
    border-radius: 6px; letter-spacing: 0.5px;
  }
  .tc2-dir.long { background: var(--green-dim); color: var(--green); }
  .tc2-dir.short { background: var(--red-dim); color: var(--red); }
  .tc2-grade {
    font-size: 22px; font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
  }
  .tc2-grade.ap { color: var(--green); }
  .tc2-grade.a { color: var(--blue); }
  .tc2-grade.b { color: var(--yellow); }

  .tc2-body { padding: 0 22px 20px; }

  .tc2-levels {
    display: grid; gap: 8px;
    margin-bottom: 14px;
  }
  .tc2-levels-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tc2-lv {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px; padding: 10px 12px; text-align: center;
  }
  .tc2-lv-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px;
  }
  .tc2-lv-val {
    font-size: 14px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
  }
  .tc2-lv-val.entry { color: var(--blue); }
  .tc2-lv-val.sl { color: var(--red); }
  .tc2-lv-val.tp { color: var(--green); }
  .tc2-lv-val.tp1 { color: #34d399; }
  .tc2-lv-val.tp2 { color: var(--green); }
  .tc2-lv-pct {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0.78;
  }
  .tc2-lv-pct.pos { color: #34d399; }
  .tc2-lv-pct.neg { color: rgba(248, 113, 113, 0.88); }

  .tc2-rr-row {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-bottom: 14px;
    padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
  }
  .tc2-rr-item { text-align: center; }
  .tc2-rr-val {
    font-size: 18px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
  }
  .tc2-rr-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-muted); margin-top: 2px;
  }

  /* Score explainability: totalScore vs baseFinalScore vs finalScore */
  .tc2-score-explain {
    margin: 0 0 12px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
  }
  .tc2-score-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 6px;
    margin-bottom: 6px;
    text-align: center;
  }
  .tc2-score-explain-k {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .tc2-score-explain-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-primary);
  }
  .tc2-score-explain-val.tc2-score-final {
    color: #fbbf24;
  }
  .tc2-score-explain-note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
	  .tc2-score-explain--simple {
	    text-align: center;
	  }
	  .tc2-score-explain--simple .tc2-validation-boost {
	    text-align: left;
	  }
	  .tc2-score-hero {
	    position: relative;
	    overflow: hidden;
	    padding: 13px;
	    border-radius: 16px;
	    background:
	      radial-gradient(circle at 18% 0%, rgba(34,197,94,0.14), transparent 34%),
	      linear-gradient(145deg, rgba(15,23,42,0.88), rgba(2,6,23,0.82));
	    border: 1px solid rgba(96,165,250,0.18);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
	  }
	  .tc2-score-hero-top {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    gap: 10px;
	    margin-bottom: 10px;
	  }
	  .tc2-score-eyebrow {
	    font-size: 12px;
	    font-weight: 900;
	    letter-spacing: 0.12em;
	    text-transform: uppercase;
	    color: rgba(148,163,184,0.9);
	  }
	  .tc2-score-status-pill {
	    display: inline-flex;
	    align-items: center;
	    gap: 4px;
	    padding: 5px 9px;
	    border-radius: 999px;
	    font-size: 13px;
	    font-weight: 900;
	    line-height: 1;
	    border: 1px solid rgba(148,163,184,0.18);
	    background: rgba(15,23,42,0.78);
	  }
	  .tc2-score-status-pill.tc2-score-verdict--yes {
	    color: #86efac;
	    border-color: rgba(74,222,128,0.28);
	    background: rgba(22,163,74,0.13);
	  }
	  .tc2-score-status-pill.tc2-score-verdict--no {
	    color: rgba(203,213,225,0.92);
	    border-color: rgba(148,163,184,0.22);
	    background: rgba(148,163,184,0.08);
	  }
	  .tc2-score-metrics {
	    display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    gap: 10px;
	  }
	  .tc2-score-metric {
	    min-width: 0;
	    padding: 12px 11px;
	    border-radius: 13px;
	    background: rgba(2,6,23,0.48);
	    border: 1px solid rgba(148,163,184,0.12);
	    text-align: left;
	  }
	  .tc2-score-metric--primary {
	    border-color: rgba(251,191,36,0.22);
	    background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(2,6,23,0.46));
	  }
	  .tc2-score-metric-label,
	  .tc2-score-metric-note {
	    display: block;
	  }
	  .tc2-score-metric-label {
	    font-size: 12px;
	    font-weight: 900;
	    letter-spacing: 0.08em;
	    text-transform: uppercase;
	    color: rgba(148,163,184,0.92);
	    margin-bottom: 5px;
	  }
	  .tc2-score-metric-value {
	    display: block;
	    font-family: 'JetBrains Mono', monospace;
	    font-size: 26px;
	    font-weight: 900;
	    line-height: 1.05;
	    color: #fbbf24;
	    letter-spacing: 0.02em;
	  }
	  .tc2-score-metric-note {
	    margin-top: 6px;
	    font-size: 12px;
	    font-weight: 700;
	    color: rgba(148,163,184,0.86);
	    line-height: 1.35;
	  }
	  .tc2-score-verdict {
	    font-size: 12px;
	    font-weight: 800;
	    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }
  .tc2-score-verdict--yes { color: #4ade80; }
  .tc2-score-verdict--no { color: rgba(148, 163, 184, 0.95); }
  .tc2-score-one-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 8px;
  }
  .tc2-score-one-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }
  .tc2-score-one-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: #fbbf24;
  }
  .tc2-score-one-hint {
    font-size: 12px;
    color: var(--text-muted);
    width: 100%;
    text-align: center;
    margin-top: 2px;
  }
  .no-signal-verdict {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
  }
  .no-signal-verdict--no { color: rgba(252, 165, 165, 0.95); }
  .no-signal-verdict--maybe { color: rgba(253, 224, 71, 0.9); }
  .no-signal-one-score {
    text-align: center;
    margin-top: 6px;
  }
  .no-signal-one-score-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .no-signal-one-score-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #fcd34d;
  }
  .no-signal-one-score-sep { font-size: 22px; font-weight: 700; opacity: 0.4; }
  .no-signal-one-score-th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.9);
  }
  .no-signal-one-score-sub {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 10px;
  }
  .no-signal-meter-track--thin {
    height: 6px;
    max-width: 240px;
    margin: 0 auto;
  }
  .no-signal-vc-hint {
    margin: 12px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
  }
  .no-signal-vc-hint strong { color: rgba(226, 232, 240, 0.95); }
  .no-signal-vc-bad { color: rgba(252, 165, 165, 0.95); }
  .no-signal-vc-ok { color: rgba(167, 243, 208, 0.9); }
  .tc2-validation-boost {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
  }
  .tc2-validation-boost summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .tc2-vb-body {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .tc2-vb-line { margin: 4px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .tc2-vb-meta { margin-bottom: 6px; opacity: 0.95; }
  .tc2-vb-warn {
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
  }

	  .tc2-section {
	    margin-bottom: 10px;
	  }
	  .tc2-section-card {
	    position: relative;
	    padding: 12px 13px;
	    border-radius: 14px;
	    background: rgba(15,23,42,0.58);
	    border: 1px solid rgba(148,163,184,0.14);
	    overflow: hidden;
	  }
	  .tc2-section-card::before {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    width: 3px;
	    background: rgba(148,163,184,0.34);
	  }
	  .tc2-section-card--good {
	    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(15,23,42,0.58) 44%);
	    border-color: rgba(16,185,129,0.16);
	  }
	  .tc2-section-card--good::before { background: var(--green); }
	  .tc2-section-card--risk {
	    background: linear-gradient(135deg, rgba(245,158,11,0.09), rgba(15,23,42,0.58) 44%);
	    border-color: rgba(245,158,11,0.18);
	  }
	  .tc2-section-card--risk::before { background: var(--orange); }
	  .tc2-section-card--context::before { background: rgba(96,165,250,0.7); }
	  .tc2-section-head {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    gap: 10px;
	    margin-bottom: 7px;
	  }
	  .tc2-section-title {
	    font-size: 12px; font-weight: 800; text-transform: uppercase;
	    letter-spacing: 1px; margin-bottom: 6px;
	    color: rgba(226,232,240,0.92);
	  }
	  .tc2-section-head .tc2-section-title { margin-bottom: 0; }
	  .tc2-section-title.green { color: var(--green); }
	  .tc2-section-count {
	    min-width: 22px;
	    height: 22px;
	    padding: 0 7px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 999px;
	    background: rgba(148,163,184,0.12);
	    border: 1px solid rgba(148,163,184,0.12);
	    color: rgba(203,213,225,0.92);
	    font-family: 'JetBrains Mono', monospace;
	    font-size: 12px;
	    font-weight: 900;
	  }

	  .tc2-list { list-style: none; padding: 0; margin: 0; }
	  .tc2-list li {
	    font-size: 12px; color: var(--text-secondary); line-height: 1.6;
	    padding-left: 14px; position: relative;
  }
	  .tc2-list li::before {
	    content: ''; position: absolute; left: 0; top: 8px;
	    width: 5px; height: 5px; border-radius: 50%;
	  }
	  .tc2-section-card--context .tc2-list li::before { background: rgba(96,165,250,0.85); }
	  .tc2-list.green li::before { background: var(--green); }

  .tc2-action {
    margin-top: 14px; padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .tc2-action--warn{
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: rgba(253, 230, 138, 0.95);
    margin-top: 10px;
  }
  .tc2-action.go {
    background: var(--green-dim); color: var(--green);
    border: 1px solid rgba(16,185,129,0.25);
  }
  .tc2-action.small {
    background: var(--blue-dim); color: var(--blue);
    border: 1px solid rgba(59,130,246,0.25);
  }
  .tc2-action.watch {
    background: rgba(255,255,255,0.03); color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
  }

	  /* Layer-1: compact structure confirmation strip */
	  .tc2-signal-strips {
	    display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    gap: 9px;
	    margin: 10px 0;
	  }
	  .tc2-confirm-strip {
	    display: flex;
	    flex-wrap: wrap;
	    align-items: center;
	    gap: 6px 10px;
	    margin-top: 0;
	    padding: 10px 12px;
	    border-radius: 13px;
	    background: rgba(15,23,42,0.62);
	    border: 1px solid rgba(148,163,184,0.14);
	    border-left: 3px solid rgba(148,163,184,0.35);
	    font-size: 12px;
	    line-height: 1.4;
	    color: var(--text-secondary);
  }
  .tc2-confirm-strip.tc2-confirm-level--strong { border-left-color: var(--green); }
  .tc2-confirm-strip.tc2-confirm-level--medium { border-left-color: var(--yellow); }
  .tc2-confirm-strip.tc2-confirm-level--weak { border-left-color: var(--orange); }
  .tc2-confirm-strip.tc2-confirm-level--none { border-left-color: var(--text-muted); }
  .tc2-strip-main { font-weight: 700; color: var(--text-primary); }
  .tc2-strip-pill {
    font-weight: 800;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
  }
  .tc2-strip-sep { color: var(--text-muted); user-select: none; }
  .tc2-strip-bits { font-weight: 600; color: var(--text-secondary); }

  .tc2-sm-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(15,23,42,0.62);
    border: 1px solid rgba(148,163,184,0.14);
    border-left: 3px solid rgba(148,163,184,0.35);
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
  }
  .tc2-sm-strip.tc2-sm--bull { border-left-color: var(--green); background: rgba(16,185,129,0.06); }
  .tc2-sm-strip.tc2-sm--bear { border-left-color: var(--red); background: rgba(239,68,68,0.06); }
  .tc2-sm-strip.tc2-sm--neutral { border-left-color: var(--text-muted); background: rgba(255,255,255,0.03); }

	  .tc2-oi-strip {
	    display: flex;
	    flex-wrap: wrap;
	    align-items: center;
	    gap: 6px 10px;
	    margin-top: 0;
	    padding: 10px 12px;
	    border-radius: 13px;
	    background: rgba(59,130,246,0.07);
	    border: 1px solid rgba(59,130,246,0.16);
	    border-left: 3px solid rgba(96,165,250,0.5);
	    font-size: 13px;
	    line-height: 1.35;
	    color: var(--text-secondary);
  }
  .tc2-oi-strip.tc2-oi--strong { border-left-color: var(--green); }
  .tc2-oi-strip.tc2-oi--medium { border-left-color: var(--yellow); }
  .tc2-oi-strip.tc2-oi--weak { border-left-color: var(--orange); }
  .tc2-oi-strip.tc2-oi--none { border-left-color: var(--text-muted); background: rgba(255,255,255,0.02); }
  .tc2-oi-main { font-weight: 800; color: var(--text-primary); }
  .tc2-oi-pill {
    font-weight: 800;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
  }
  .tc2-oi-sep { color: var(--text-muted); user-select: none; }
  .tc2-oi-bits { font-weight: 650; }

  /* Layer-2: progressive disclosure */
	  .tc2-card-details {
	    margin-top: 10px;
	    border-radius: 14px;
	    border: 1px solid rgba(96,165,250,0.20);
	    background: linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.18));
	    overflow: hidden;
	  }
	  .tc2-card-details-summary {
	    list-style: none;
	    cursor: pointer;
	    padding: 12px 14px;
	    font-size: 12px;
	    font-weight: 700;
	    color: var(--text-secondary);
	    background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(255,255,255,0.02));
	    display: flex;
	    align-items: center;
	    gap: 8px;
	    user-select: none;
  }
  .tc2-card-details-summary::-webkit-details-marker { display: none; }
  .tc2-card-details-summary::before {
    content: '';
    width: 0; height: 0;
    border-left: 5px solid var(--text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
  }
  .tc2-card-details[open] > .tc2-card-details-summary::before {
    transform: rotate(90deg);
  }
	  .tc2-card-details-summary:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
	  .tc2-details-title {
	    color: rgba(226,232,240,0.96);
	    font-size: 13px;
	    font-weight: 900;
	    letter-spacing: 0.02em;
	  }
	  .tc2-details-sub {
	    margin-left: auto;
	    padding: 4px 8px;
	    border-radius: 999px;
	    background: rgba(15,23,42,0.74);
	    border: 1px solid rgba(148,163,184,0.12);
	    color: rgba(148,163,184,0.9);
	    font-size: 12px;
	    font-weight: 800;
	    white-space: nowrap;
	  }
	  .tc2-card-details-summary:focus { outline: none; }
	  .tc2-card-details-summary:focus-visible {
	    box-shadow: inset 0 0 0 2px rgba(59,130,246,0.45);
	  }
	  .tc2-card-details-inner {
	    padding: 12px 14px 14px;
	    border-top: 1px solid rgba(255,255,255,0.05);
	  }
	  .tc2-card-details-inner .tc2-section:first-child { margin-top: 10px; }
	  .tc2-confirm-block--nested { margin-top: 8px; }

	  .tc2-confirm-block { margin-top: 10px; }
  .tc2-confirm-block abbr {
    text-decoration: underline dotted rgba(148,163,184,0.5);
    text-underline-offset: 2px;
    cursor: help;
  }
  .tc2-confirm-lede {
    margin: 2px 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    font-weight: 500;
  }
	  .tc2-confirm-rows {
	    background: rgba(15,23,42,0.62);
	    border: 1px solid rgba(96,165,250,0.16);
	    border-radius: 14px;
	    padding: 11px 12px;
	    font-size: 13px;
	    line-height: 1.45;
	    border-left: 3px solid rgba(148,163,184,0.35);
	  }
  .tc2-confirm-rows.tc2-confirm-level--strong { border-left-color: var(--green); }
  .tc2-confirm-rows.tc2-confirm-level--medium { border-left-color: var(--yellow); }
  .tc2-confirm-rows.tc2-confirm-level--weak { border-left-color: var(--orange); }
  .tc2-confirm-rows.tc2-confirm-level--none { border-left-color: var(--text-muted); }
	  .tc2-confirm-row {
	    display: flex; justify-content: space-between; align-items: baseline;
	    gap: 10px;
	    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
	  }
  .tc2-confirm-row:last-of-type { border-bottom: none; }
  .tc2-confirm-k { color: var(--text-secondary); font-weight: 600; }
  .tc2-confirm-v { color: var(--text-primary); font-weight: 600; text-align: right; }
	  .tc2-confirm-overall {
	    margin: 0;
	    margin-top: 9px; padding: 9px 10px;
	    border-radius: 11px;
	    border: 1px solid rgba(255,255,255,0.06);
	    background: rgba(2,6,23,0.34);
	    font-weight: 800; font-size: 13px;
	  }
  .tc2-confirm-overall.conf-strong { color: var(--green); }
	  .tc2-confirm-overall.conf-medium { color: var(--yellow); }
	  .tc2-confirm-overall.conf-weak { color: var(--orange); }
	  .tc2-confirm-overall.conf-none { color: var(--text-secondary); }

	  @media (max-width: 640px) {
	    .tc2-score-hero-top {
	      align-items: flex-start;
	      flex-direction: column;
	    }
	    .tc2-score-metrics,
	    .tc2-signal-strips {
	      grid-template-columns: 1fr;
	    }
	    .tc2-score-metric-value {
	      font-size: 24px;
	    }
	    .tc2-details-sub {
	      display: none;
	    }
	    .tc2-confirm-row {
	      align-items: flex-start;
	      flex-direction: column;
	      gap: 4px;
	    }
	    .tc2-confirm-v {
	      text-align: left;
	    }
	  }

	  /* ── Smart Money badge ── */
  .sm-badge {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 10px 0 4px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid transparent;
  }
  .sm-align {
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  }
  .sm-align.agree   { color: var(--green); }
  .sm-align.conflict { color: var(--orange); }

  /* ── Execute button ── */
  .tc2-execute {
    display: block; width: 100%;
    margin-top: 10px; padding: 11px 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.08));
    border: 1px solid rgba(59,130,246,0.35);
    border-radius: 10px;
    color: var(--blue); font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.3px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .tc2-execute:hover:not(:disabled) {
    background: rgba(59,130,246,0.25);
    border-color: rgba(59,130,246,0.6);
  }
  .tc2-execute.executed,
  .tc2-execute:disabled {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.3);
    color: var(--green); cursor: default;
  }

  /* Track button */
  .tc2-track-row {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 10px;
  }
  .tc2-track-btn {
    flex: 1; padding: 10px; border-radius: 10px;
    background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25);
    color: var(--purple); font-size: 12px; font-weight: 700;
    cursor: pointer; text-align: center; transition: background 0.15s;
  }
  .tc2-track-btn:hover { background: rgba(139,92,246,0.2); }
  .tc2-result-btns {
    display: flex; gap: 8px; flex: 1;
  }
  .tc2-result-btn {
    flex: 1; padding: 10px; border-radius: 10px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    text-align: center; border: none; transition: background 0.15s;
  }
  .tc2-result-btn.win {
    background: var(--green-dim); color: var(--green);
    border: 1px solid rgba(16,185,129,0.25);
  }
  .tc2-result-btn.win:hover { background: rgba(16,185,129,0.25); }
  .tc2-result-btn.lose {
    background: var(--red-dim); color: var(--red);
    border: 1px solid rgba(239,68,68,0.25);
  }
  .tc2-result-btn.lose:hover { background: rgba(239,68,68,0.25); }
  .tc2-recorded {
    font-size: 12px; font-weight: 700; text-align: center;
    padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
  }

  /* Stats bar */
  .stats-bar {
    display: flex; gap: 16px; margin-bottom: 18px;
  }
  .stat-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
  }
  .stat-pill-val {
    font-size: 18px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
  }
  .stat-pill-label {
    font-size: 13px; color: var(--text-muted);
    font-weight: 600;
  }

  /* No signal v2 */
  .no-signal-v2 {
    padding: 36px 20px 28px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  .no-signal-icon {
    font-size: 28px; color: rgba(148, 163, 184, 0.45);
    margin-bottom: 12px; line-height: 1;
    animation: pulse-dot 2.5s infinite;
  }
  .no-signal-title {
    font-size: 18px; font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
  }
  .no-signal-sub {
    font-size: 13px; color: var(--text-muted);
    line-height: 1.65; max-width: 340px; margin: 0 auto;
  }
  .no-signal-icon,
  .no-signal-title,
  .no-signal-sub,
  .no-signal-tags,
  .no-signal-lead {
    grid-column: 1 / -1;
  }
  .no-signal-sub strong { color: var(--text-secondary); }
  .no-signal-lead {
    margin: 14px auto 0;
    max-width: 340px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    opacity: 0.92;
  }
  .no-signal-tags {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .no-signal-tag {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .no-signal-insight,
  .no-signal-nearmiss,
  .no-signal-debug {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Insight card — best candidate + meter + chips */
  .no-signal-insight {
    margin-top: 20px;
    text-align: left;
    padding: 14px 16px 16px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: linear-gradient(165deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.92));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  }
  .no-signal-hard-block {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(251, 113, 133, 0.35);
    background: rgba(127, 29, 29, 0.22);
    text-align: left;
  }
  .no-signal-hard-block-k {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(254, 202, 202, 0.95);
    margin-bottom: 8px;
  }
  .no-signal-hard-block-msg {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.55;
    color: rgba(254, 243, 199, 0.98);
  }
  .no-signal-hard-block-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.82);
    opacity: 0.92;
  }
  .no-signal-insight-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    text-align: center;
  }
  .no-signal-insight-badge {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, 0.95);
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(147, 197, 253, 0.28);
    background: rgba(37, 99, 235, 0.12);
  }
  .no-signal-insight-symbol {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    line-height: 1.1;
    word-break: break-word;
    text-align: center;
  }
  .no-signal-meter-labels {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .no-signal-meter-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .no-signal-meter-nums {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
  }
  .no-signal-meter-curr { color: #fcd34d; }
  .no-signal-meter-sep { opacity: 0.45; margin: 0 2px; font-weight: 700; }
  .no-signal-meter-cap { color: rgba(226, 232, 240, 0.88); }
  .no-signal-meter-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
  }
  .no-signal-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.85), rgba(56, 189, 248, 0.95));
    transition: width 0.35s ease;
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.25);
  }
  .no-signal-meter-fill--hot {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.92), rgba(251, 113, 133, 0.88));
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.28);
  }
  .no-signal-meter-caption {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
  }
  .no-signal-meter-caption strong {
    color: var(--text-secondary);
    font-weight: 800;
  }
  .no-signal-meter-hint {
    font-size: 13px;
    opacity: 0.88;
  }
  .no-signal-meter-hint strong {
    font-weight: 700;
    color: rgba(226, 232, 240, 0.92);
  }
  .no-signal-factors {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.08);
  }
  .no-signal-factors-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .no-signal-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .no-signal-chip {
    font-size: 13px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(226, 232, 240, 0.92);
    line-height: 1.35;
  }
  .no-signal-chip--hot {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
  }
  .no-signal-chip--ok {
    border-style: dashed;
    opacity: 0.9;
  }
  .no-signal-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }
  .no-signal-score-cell {
    padding: 8px 8px 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
  }
  .no-signal-score-cell--final {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.06);
  }
  .no-signal-score-k {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .no-signal-score-v {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
  }

  /* Simplified score ladder (no-signal insight) */
  .no-signal-score-simple {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    text-align: left;
  }
  .no-signal-score-lead {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.88);
  }
  .no-signal-score-lead-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: #fcd34d;
    margin: 0 2px;
  }
  .no-signal-score-details {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.2);
    overflow: hidden;
  }
  .no-signal-score-details-sum {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(147, 197, 253, 0.95);
    background: rgba(59, 130, 246, 0.07);
    user-select: none;
  }
  .no-signal-score-details-sum::-webkit-details-marker { display: none; }
  .no-signal-score-details-sum::after {
    content: '\25bc';
    float: right;
    font-size: 12px;
    opacity: 0.55;
  }
  .no-signal-score-details[open] .no-signal-score-details-sum::after {
    transform: rotate(-180deg);
    display: inline-block;
  }
  .no-signal-score-flow {
    margin: 0;
    padding: 10px 12px 12px 14px;
    list-style: none;
    counter-reset: nsflow;
  }
  .no-signal-score-flow-item {
    position: relative;
    padding: 10px 0 12px 6px;
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    margin-left: 10px;
    padding-left: 14px;
  }
  .no-signal-score-flow-item:last-child { padding-bottom: 4px; }
  .no-signal-score-flow-item--final {
    border-left-color: rgba(251, 191, 36, 0.45);
  }
  .no-signal-flow-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
  }
  .no-signal-flow-step {
    font-size: 13px;
    font-weight: 800;
    color: rgba(148, 163, 184, 0.9);
    min-width: 1.5em;
  }
  .no-signal-flow-k {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    flex: 1;
    min-width: 120px;
  }
  .no-signal-flow-v {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
  }
  .no-signal-score-flow-item--final .no-signal-flow-v {
    color: #fcd34d;
  }
  .no-signal-flow-d {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
  }

  /* Near-miss list */
  .no-signal-nearmiss {
    margin-top: 18px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.18);
    overflow: hidden;
  }
  .no-signal-nearmiss-sum {
    cursor: pointer;
    list-style: none;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .no-signal-nearmiss-sum::-webkit-details-marker { display: none; }
  .no-signal-nearmiss-sum::after {
    content: '\25bc';
    float: right;
    font-size: 12px;
    opacity: 0.55;
    transition: transform 0.2s ease;
  }
  .no-signal-nearmiss[open] .no-signal-nearmiss-sum::after {
    transform: rotate(-180deg);
  }
  .no-signal-nearmiss-list {
    list-style: none;
    margin: 0;
    padding: 6px 4px 10px;
    max-height: 280px;
    overflow-y: auto;
  }
  .no-signal-nearmiss-item {
    padding: 10px 12px;
    border-radius: 10px;
    margin: 4px 6px;
    border: 1px solid transparent;
    transition: background 0.15s ease;
  }
  .no-signal-nearmiss-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.05);
  }
  .no-signal-nearmiss-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .no-signal-nearmiss-sym {
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--text-primary);
  }
  .no-signal-nearmiss-scores {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
  }
  .no-signal-nearmiss-fs { color: #fcd34d; }
  .no-signal-nearmiss-gap {
    font-size: 13px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.95);
  }
  .no-signal-nearmiss-chips .no-signal-chip {
    font-size: 12px;
    padding: 3px 8px;
  }
  .no-signal-nearmiss-foot {
    margin: 0;
    padding: 8px 14px 12px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.15);
  }

  .no-signal-debug {
    margin-top: 16px; text-align: left;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .no-signal-debug-sum {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(59, 130, 246, 0.06);
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .no-signal-debug-sum::-webkit-details-marker { display: none; }
  .no-signal-debug-sum:hover {
    color: var(--text-secondary);
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.1);
  }
  .no-signal-debug-body {
    margin-top: 10px; padding: 14px 14px 12px;
    background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 13px; color: var(--text-muted);
    line-height: 1.65;
  }
  .no-signal-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0 0 12px;
    align-items: baseline;
  }
  .no-signal-dl dt {
    font-weight: 700;
    color: rgba(148, 163, 184, 0.95);
    margin: 0;
  }
  .no-signal-dl dd {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
  }
  .no-signal-debug-h {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 10px 0 6px;
  }
  .no-signal-debug-line {
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(203, 213, 225, 0.88);
  }
  .no-signal-debug-line--mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(148, 163, 184, 0.95);
    word-break: break-word;
  }
  .no-signal-debug-n {
    font-weight: 800;
    color: rgba(251, 191, 36, 0.85);
    margin-left: 6px;
  }

  @media (min-width: 920px) {
    .no-signal-v2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
      row-gap: 14px;
      padding-inline: 12px;
    }
    .no-signal-icon,
    .no-signal-title,
    .no-signal-sub,
    .no-signal-tags,
    .no-signal-lead,
    .no-signal-debug {
      grid-column: 1 / -1;
    }
    .no-signal-insight {
      grid-column: 1 / 2;
      margin-top: 0;
    }
    .no-signal-nearmiss {
      grid-column: 2 / 3;
      margin-top: 0;
      align-self: start;
    }
    .no-signal-debug {
      margin-top: 4px;
      max-width: none;
    }
    .no-signal-nearmiss-list {
      max-height: 320px;
    }
  }

  /* ═══ History Panel ═══ */
  .history-section { margin-top: 8px; }

  .history-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  .history-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
  }
  .history-stat-val {
    font-size: 26px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
  }
  .history-stat-label {
    margin-top: 4px; font-size: 13px;
    color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
  }

  /* Strategy breakdown */
  .strategy-stats {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
  }
  .strategy-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    font-size: 12px;
  }
  .strategy-chip-name { font-weight: 700; color: var(--text-primary); }
  .strategy-chip-detail { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

  /* History list */
  .history-list {
    display: flex; flex-direction: column; gap: 8px;
  }
  .history-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
  }
  .hi-main { display: flex; flex-direction: column; gap: 4px; }
  .hi-top {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .hi-symbol { font-size: 14px; font-weight: 800; }
  .hi-dir {
    font-size: 12px; font-weight: 700; padding: 2px 8px;
    border-radius: 5px;
  }
  .hi-dir.long { background: var(--green-dim); color: var(--green); }
  .hi-dir.short { background: var(--red-dim); color: var(--red); }
  .hi-grade {
    font-size: 13px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
  }
  .hi-grade.ap { color: var(--green); }
  .hi-grade.a { color: var(--blue); }
  .hi-grade.b { color: var(--yellow); }
  .hi-rank {
    font-size: 12px; font-weight: 700; padding: 2px 7px;
    border-radius: 5px; background: rgba(255,255,255,0.04);
    color: var(--text-muted);
  }
  .hi-status {
    font-size: 12px; font-weight: 800; padding: 3px 9px;
    border-radius: 6px; letter-spacing: 0.3px;
  }
  .hi-status.pending { background: var(--yellow-dim); color: var(--yellow); }
  .hi-status.win { background: var(--green-dim); color: var(--green); }
  .hi-status.loss { background: var(--red-dim); color: var(--red); }
  .hi-status.skipped { background: rgba(255,255,255,0.04); color: var(--text-muted); }

  .hi-meta {
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
  }
  .hi-meta span { color: var(--text-secondary); font-weight: 600; }

  .hi-actions {
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-end;
  }
  .hi-btn {
    padding: 6px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; border: none; white-space: nowrap;
    transition: background 0.15s;
  }
  .hi-btn.took {
    background: rgba(139,92,246,0.12); color: var(--purple);
    border: 1px solid rgba(139,92,246,0.25);
  }
  .hi-btn.took:hover { background: rgba(139,92,246,0.2); }
  .hi-btn.mark-win {
    background: var(--green-dim); color: var(--green);
    border: 1px solid rgba(16,185,129,0.25);
  }
  .hi-btn.mark-win:hover { background: rgba(16,185,129,0.25); }
  .hi-btn.mark-loss {
    background: var(--red-dim); color: var(--red);
    border: 1px solid rgba(239,68,68,0.25);
  }
  .hi-btn.mark-loss:hover { background: rgba(239,68,68,0.25); }

  .history-empty {
    padding: 32px; text-align: center;
    color: var(--text-muted); font-size: 13px;
  }

  @media (max-width: 640px) {
    .history-stats-grid { grid-template-columns: 1fr; }
    .history-item { grid-template-columns: 1fr; }
    .hi-actions { flex-direction: row; align-items: center; }
  }

  /* Collapsible scanner panel */
  details.control-panel { margin-bottom: 20px; }
  .dashboard-utilities details.control-panel { margin-bottom: 0; }
  details.control-panel[open] .scanner-toggle-icon { transform: rotate(180deg); }

  /* Settings Panel */

  .settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 8, 20, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    overflow: hidden;
  }

  .settings-panel.open {
    display: flex;
  }

  body.settings-open {
    overflow: hidden;
  }

  .settings-dialog {
    width: min(94vw, 760px);
    max-width: 760px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    max-height: min(84vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    animation: modalIn 0.24s ease-out;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
  }

  .settings-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .settings-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
  }

  .settings-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .settings-summary-pill strong {
    color: #e2e8f0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
  }

  .settings-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .settings-close-btn:hover {
    color: var(--text-primary);
  }

  .settings-content {
    padding: 18px;
    padding-bottom: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
  }

  .settings-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .settings-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .settings-section {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.018));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .settings-section--feature {
    background:
      radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 44%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
    border-color: rgba(96, 165, 250, 0.16);
  }

  .settings-section--compact {
    padding-bottom: 14px;
  }

  .settings-threshold-grid,
  .settings-automation-grid {
    display: grid;
    gap: 14px;
  }

  .settings-threshold-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .settings-automation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-advanced {
    overflow: hidden;
  }

  .settings-advanced-summary {
    list-style: none;
    cursor: pointer;
    margin-bottom: 0;
  }

  .settings-advanced-summary::-webkit-details-marker {
    display: none;
  }

  .settings-advanced-summary::after {
    content: '展開';
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .settings-advanced[open] .settings-advanced-summary::after {
    content: '收起';
    color: #cbd5e1;
  }

  .settings-advanced-body {
    margin-top: 10px;
  }

  .settings-advanced-body > .settings-lead:first-child {
    margin-top: 0;
  }

  .settings-section + .settings-section {
    margin-top: 0;
  }

  .settings-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .settings-section-head .settings-label {
    margin-bottom: 0;
  }
  .settings-badge {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan, #06b6d4);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.22);
  }
  .settings-lead {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    font-weight: 500;
  }

  .settings-mode-note {
    margin-bottom: 0;
    max-width: 42ch;
  }
  .settings-row-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
  }
  .settings-row-check input {
    margin-top: 2px;
    flex-shrink: 0;
  }
  .settings-daily-limit-control {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .settings-unlimited-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .settings-unlimited-option input {
    width: 16px;
    height: 16px;
    accent-color: #8b5cf6;
  }
  .settings-slider:disabled {
    cursor: not-allowed;
    opacity: 0.35;
  }
  .settings-field {
    margin-top: 4px;
  }
  .settings-range-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
  .settings-range-value {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: center;
  }
  .settings-range-input {
    width: 100%;
    margin: 0;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59,130,246,0.85), rgba(96,165,250,0.35));
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }
  .settings-range-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #60a5fa;
    border: 2px solid rgba(17,24,39,0.9);
    box-shadow: 0 0 0 4px rgba(96,165,250,0.18);
    cursor: pointer;
  }
  .settings-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #60a5fa;
    border: 2px solid rgba(17,24,39,0.9);
    box-shadow: 0 0 0 4px rgba(96,165,250,0.18);
    cursor: pointer;
  }
  .settings-range-input::-moz-range-track {
    height: 6px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59,130,246,0.85), rgba(96,165,250,0.35));
  }
	  .settings-field-label {
	    display: block;
	    font-size: 12px;
	    font-weight: 700;
	    color: #cbd5e1;
	    margin: 10px 0 6px;
	    font-family: 'JetBrains Mono', ui-monospace, monospace;
	  }
  .settings-field-help {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
  }
	  .settings-input-native {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .settings-input-native::placeholder {
    color: #64748b;
  }
  .settings-input-native:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  }
  .settings-estimated-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .settings-more {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .settings-more summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    list-style: none;
    user-select: none;
  }
  .settings-more summary::-webkit-details-marker {
    display: none;
  }
  .settings-more[open] summary {
    color: #cbd5e1;
    margin-bottom: 10px;
  }
  .settings-more .settings-row-check {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 12px;
    color: #cbd5e1;
  }
  .settings-summary-strip .settings-summary-pill strong#settings-summary-threshold {
    color: #93c5fd;
  }

  /* === v2 simplified settings layout === */
  .settings-section-head-v2 {
    margin: 0 0 14px;
    padding: 0;
    border: none;
  }
  .settings-section-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .settings-section-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .settings-subgroup {
    padding: 12px 14px;
    margin-top: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .settings-subgroup:first-of-type {
    margin-top: 0;
  }
  .settings-subgroup-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .settings-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .settings-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .settings-danger-zone {
    border-color: rgba(248, 113, 113, 0.18);
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.04), rgba(248, 113, 113, 0.015));
  }
  .settings-danger-title {
    color: #f87171 !important;
  }
  .settings-actions .btn-primary:last-child {
    grid-column: auto;
  }
  @media (max-width: 639px) {
    .settings-grid-2,
    .settings-grid-3 {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .settings-subgroup {
      padding: 10px 12px;
    }
  }

  /* Threshold Display */
  .threshold-display {
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .threshold-value {
    font-size: 24px;
    font-weight: 700;
    color: #60a5fa;
  }

  .threshold-mode {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* Custom Threshold Slider */
  .custom-threshold-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .threshold-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .threshold-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #60a5fa;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(96, 165, 250, 0.5);
    transition: box-shadow 0.2s;
  }

  .threshold-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
  }

  .threshold-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #60a5fa;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 4px rgba(96, 165, 250, 0.5);
    transition: box-shadow 0.2s;
  }

  .threshold-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
  }

  .threshold-slider::-moz-range-track {
    background: transparent;
    border: none;
  }

  .reset-threshold-btn {
    padding: 6px 12px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .reset-threshold-btn:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
  }

  .reset-threshold-btn:active {
    background: rgba(96, 165, 250, 0.3);
  }

  /* Min RR Control */
  .min-rr-control {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .settings-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 13px;
  }

  .settings-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
  }

  .unit {
    color: var(--text-muted);
    font-size: 12px;
  }

  /* Settings Summary */
  .settings-summary {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin: 18px 0 0;
    border: 1px solid rgba(255,255,255,0.05);
  }

  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
  }

  .summary-label {
    color: var(--text-muted);
  }

  .summary-value {
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Action Buttons */
  .settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 0;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, rgba(17,24,39,0.72), var(--bg-card) 38%);
    backdrop-filter: blur(6px);
    flex: 0 0 auto;
  }

  .settings-actions .btn-primary:last-child {
    grid-column: 1 / -1;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 40px;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
  }

  .btn-primary:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
  }

  .btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .btn-danger {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0.08);
  }

  .btn-danger:hover {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.32);
  }

  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Responsive settings layout */
  @media (max-width: 639px) {
    .settings-panel {
      padding: 10px;
    }
    .settings-dialog {
      width: 100%;
      max-width: none;
      max-height: 88vh;
      border-radius: 16px;
    }
    .settings-content {
      padding: 12px;
    }
    .settings-summary-strip {
      padding: 10px 12px 12px;
    }
	    .settings-layout {
	      grid-template-columns: 1fr;
	      gap: 12px;
	    }
    .settings-threshold-grid,
    .settings-automation-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .settings-column {
      gap: 12px;
    }
    .settings-advanced-summary::after {
      font-size: 13px;
    }
    .settings-actions {
      padding: 12px;
    }
    .settings-actions .btn-primary:last-child {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 479px) {
    .settings-content {
      padding: 12px;
    }
    .settings-summary-strip {
      padding: 10px 12px 12px;
    }
    .settings-section {
      padding: 12px;
    }
    .settings-summary-pill {
      padding: 6px 9px;
    }
    .btn-primary,
    .btn-secondary {
      min-height: 38px;
    }
    .settings-advanced-body {
      margin-top: 8px;
    }
    .threshold-display {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    .reset-threshold-btn {
      width: 100%;
    }
    .settings-summary {
      margin-top: 14px;
    }
    .settings-range-head {
	      align-items: flex-start;
	      flex-direction: column;
	    }
    .settings-threshold-grid,
    .settings-automation-grid {
      grid-template-columns: 1fr;
    }
	  }

  .settings-input-native[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .settings-input-native[type="number"]::-webkit-outer-spin-button,
  .settings-input-native[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  @media (max-height: 600px) and (orientation: landscape) {
    .settings-panel { padding: 12px; }
    .settings-dialog {
      max-height: 92vh;
      width: min(94vw, 600px);
      border-radius: 16px;
    }
    .settings-content {
      padding: 12px;
    }
    .settings-summary-strip {
      padding: 10px 12px 12px;
    }
    .settings-layout {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .settings-threshold-grid,
    .settings-automation-grid {
      grid-template-columns: 1fr;
    }
    .settings-section {
      padding: 12px;
    }
  }

  /* Open position quick review */
  .position-review-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
  }
  .position-review-lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    font-weight: 600;
  }
  .position-review-more {
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
  }
  .position-review-more summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    user-select: none;
  }
  .position-review-more summary::-webkit-details-marker { display: none; }
  .position-review-more summary::after {
    content: '▾';
    float: right;
    font-size: 12px;
    opacity: 0.65;
  }
  .position-review-more[open] summary::after {
    transform: rotate(180deg);
    display: inline-block;
  }
  .position-review-more-body {
    margin: 0;
    padding: 0 11px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .position-review-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .pr-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pr-group {
    display: grid;
    grid-template-columns: minmax(52px, auto) 1fr;
    gap: 8px 12px;
    align-items: start;
  }
  @media (max-width: 520px) {
    .pr-group {
      grid-template-columns: 1fr;
    }
  }
  .pr-group-tag {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 8px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    align-self: start;
  }
  .pr-group-tag--req {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #93c5fd;
  }
  .pr-group-tag--opt {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text-muted);
  }
  .pr-group-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    min-width: 0;
  }
  .pr-group--opt .pr-group-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pr-advanced {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.18);
    overflow: hidden;
  }
  .pr-advanced > summary {
    min-height: 44px;
    padding: 10px 12px;
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    user-select: none;
  }
  .pr-advanced > summary::-webkit-details-marker { display: none; }
  .pr-advanced > summary::after {
    content: '▾';
    color: var(--text-muted);
    transition: transform 0.16s ease;
  }
  .pr-advanced[open] > summary::after {
    transform: rotate(180deg);
  }
  .pr-advanced > summary small {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
  }
  .pr-advanced .pr-group {
    padding: 0 12px 12px;
  }
  .pr-field-opened-at {
    grid-column: span 2;
    min-width: 0;
  }
  @media (max-width: 900px) {
    .pr-group-fields,
    .pr-group--opt .pr-group-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pr-field-opened-at {
      grid-column: span 2;
    }
  }
  @media (max-width: 420px) {
    .pr-group-fields,
    .pr-group--opt .pr-group-fields {
      grid-template-columns: 1fr;
    }
    .pr-field-opened-at {
      grid-column: span 1;
    }
  }
  .position-review-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 0;
  }
  .position-review-form input,
  .position-review-form select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 13px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .position-review-form button[type="submit"] {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    justify-self: end;
    width: 100%;
  }
  @media (min-width: 520px) {
    .position-review-form button[type="submit"] {
      width: auto;
      min-width: 120px;
    }
  }
  .pr-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
  }
  .position-review-form input[type="datetime-local"] {
    min-width: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
  }
  .pr-datetime-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
  }
  .pr-datetime-row input[type="datetime-local"] {
    flex: 1;
    min-width: 0;
  }
  .pr-datetime-picker-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 38px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .pr-datetime-picker-btn:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(96, 165, 250, 0.5);
  }
  .pr-datetime-picker-btn:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.55);
    outline-offset: 2px;
  }
  .pr-datetime-picker-btn svg {
    width: 18px;
    height: 18px;
    opacity: 0.95;
  }
  /* Grid-friendliness card (網格友善度) */
  .pr-grid-card {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.025);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pr-grid-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .pr-grid-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  .pr-grid-badge {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.1;
  }
  .pr-grid-badge--good {
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.35);
    color: #86efac;
  }
  .pr-grid-badge--warn {
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.35);
    color: #fcd34d;
  }
  .pr-grid-badge--bad {
    background: rgba(239,68,68,0.14);
    border: 1px solid rgba(239,68,68,0.35);
    color: #fca5a5;
  }
  .pr-grid-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 14px;
  }
  .pr-grid-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pr-grid-metric-k {
    font-size: 10.5px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .pr-grid-metric-v {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .pr-grid-notes {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
  }
  .pr-grid-notes strong {
    color: var(--text);
  }
  .position-review-time-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
  }
  .position-review-time-note--warn {
    color: #fde68a;
  }
  .position-review-time-note--err {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.15);
    color: #fecaca;
  }
  .position-review-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: -6px 0 12px;
    line-height: 1.4;
  }
  .position-review-output {
    min-height: 24px;
  }
  .position-review-loading {
    color: var(--text-muted);
    font-size: 13px;
  }
  .position-review-err {
    color: #f87171;
    font-size: 13px;
    margin: 0 0 8px;
  }
  .position-review-result {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    display: grid;
    gap: 12px;
  }
  .position-review-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.03);
  }
  .pr-k {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 4.5em;
  }
  .pr-v { font-size: 14px; font-weight: 600; }
  .pr-thesis-intact { color: #4ade80; }
  .pr-thesis-weakening { color: #fbbf24; }
  .pr-thesis-broken { color: #f87171; }
  .pr-action { color: #60a5fa; }
  .position-review-sum {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
  }
  .position-review-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .position-review-meta-item {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .position-review-meta-item-k {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
	  .position-review-meta-item strong {
	    color: var(--text-primary);
	    font-weight: 700;
	    font-size: 13px;
	  }

	  /* UI refresh layer: align the rest of the app with the expanded trade-card visual system. */
	  :root {
	    --surface-glass: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.58));
	    --surface-glass-soft: linear-gradient(145deg, rgba(30, 41, 59, 0.48), rgba(15, 23, 42, 0.34));
	    --surface-border: rgba(148, 163, 184, 0.13);
	    --surface-border-strong: rgba(96, 165, 250, 0.24);
	    --surface-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
	    --surface-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
	    --ring-focus: 0 0 0 3px rgba(96, 165, 250, 0.22);
	  }

	  body {
	    background:
	      radial-gradient(circle at 14% -8%, rgba(59,130,246,0.16), transparent 32%),
	      radial-gradient(circle at 86% 8%, rgba(16,185,129,0.08), transparent 28%),
	      linear-gradient(180deg, #080c15 0%, #0a0e17 38%, #050812 100%);
	  }

	  body::before { background: none !important; }

	  button,
	  input,
	  select,
	  summary {
	    -webkit-tap-highlight-color: transparent;
	  }

	  button:focus-visible,
	  input:focus-visible,
	  select:focus-visible,
	  summary:focus-visible,
	  .symbol-result:focus-visible {
	    outline: none;
	    box-shadow: var(--ring-focus);
	    border-color: rgba(96,165,250,0.52);
	  }

	  .topbar {
	    border-bottom-color: rgba(96,165,250,0.16);
	    background:
	      linear-gradient(180deg, rgba(10,14,23,0.94), rgba(10,14,23,0.78)),
	      rgba(10,14,23,0.86);
	    box-shadow: 0 10px 38px rgba(0,0,0,0.24);
	  }

	  .logo-icon {
	    border-radius: 14px;
	    background: linear-gradient(135deg, #60a5fa, #6366f1 50%, #22c55e);
	    box-shadow: 0 10px 30px rgba(59,130,246,0.26);
	  }

	  .topbar-nav-btn,
	  .live-badge {
	    border-color: rgba(148,163,184,0.14);
	    background: rgba(15,23,42,0.66);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
	  }

	  .topbar-nav-btn:hover,
	  .symbol-add-btn:hover,
	  .tc2-execute:hover:not(:disabled),
	  .position-review-form button[type="submit"]:hover,
	  .btn-primary:hover,
	  .btn-secondary:hover {
	    transform: translateY(-1px);
	  }

	  .main {
	    width: calc(100% - 24px);
	    max-width: none;
	    margin: 0 auto;
	    padding-left: 0;
	    padding-right: 0;
	  }

	  .trades-grid {
	    grid-template-columns: minmax(0, 1fr);
	    align-items: start;
	    gap: 14px;
	  }

	  .trades-grid--count-1 {
	    grid-template-columns: minmax(0, 1fr);
	    justify-content: start;
	  }

	  .trades-grid--count-2 {
	    grid-template-columns: minmax(0, 1fr);
	    justify-content: start;
	  }

	  .trades-grid--count-1 .trade-card-v2 {
	    max-width: none;
	  }

	  .section-title {
	    color: rgba(203,213,225,0.86);
	    font-size: 13px;
	    font-weight: 900;
	  }

	  .section-title.has-accent {
	    padding: 10px 0 10px 13px;
	    border-left-width: 4px;
	    border-radius: 2px;
	  }

	  .section-title .badge {
	    padding: 4px 9px;
	    border-radius: 999px;
	    border: 1px solid rgba(96,165,250,0.26);
	    background: rgba(59,130,246,0.12);
	    color: #bfdbfe;
	  }

	  .control-panel,
	  .market-card,
	  .regime-banner,
	  .mtf-card,
	  .conf-card,
	  .ind-panel,
	  .analytics-stat,
	  .analytics-card,
	  .analytics-empty,
	  .history-stat,
	  .strategy-chip,
	  .history-item,
	  .trade-card-v2,
	  .no-trade,
	  .no-signal-insight,
	  .no-signal-nearmiss,
	  .no-signal-debug-body,
	  .position-review-result {
	    background: var(--surface-glass);
	    border-color: var(--surface-border);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), var(--surface-shadow-soft);
	  }

	  .control-panel {
	    padding: 0;
	    border-radius: 18px;
	    border-color: rgba(96,165,250,0.18);
	    background:
	      radial-gradient(circle at 0% 0%, rgba(59,130,246,0.12), transparent 30%),
	      var(--surface-glass);
	  }

	  .control-panel[open] {
	    border-color: rgba(96,165,250,0.28);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--surface-shadow);
	  }

	  .control-panel-summary {
	    min-height: 58px;
	    padding: 14px 18px;
	    background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(255,255,255,0.015));
	  }

	  .control-panel-summary:hover {
	    background: linear-gradient(90deg, rgba(59,130,246,0.16), rgba(255,255,255,0.035));
	  }

	  .control-title {
	    color: rgba(241,245,249,0.96);
	    font-weight: 900;
	    letter-spacing: 0.01em;
	  }

	  .scanner-toggle-icon,
	  .selected-arrow {
	    width: 24px;
	    height: 24px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 999px;
	    background: rgba(148,163,184,0.10);
	    border: 1px solid rgba(148,163,184,0.10);
	  }

	  .control-panel-body {
	    padding: 16px 18px 18px;
	    border-top-color: rgba(255,255,255,0.06);
	  }

	  .mode-chip,
	  .winrate-chip,
	  .threshold-panel,
	  .symbol-search,
	  .selected-body,
	  .tc2-lv,
	  .tc2-rr-row,
	  .ind-box,
	  .decision-debug-pill,
	  .analytics-row,
	  .analytics-conf-row,
	  .position-review-row,
	  .position-review-meta-item {
	    background: rgba(15,23,42,0.52);
	    border-color: rgba(148,163,184,0.12);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
	  }

	  .mode-chip {
	    color: #bfdbfe;
	    border-color: rgba(96,165,250,0.24);
	  }

	  .winrate-chip {
	    color: #86efac;
	    border-color: rgba(74,222,128,0.22);
	  }

	  .symbol-search {
	    padding: 15px;
	    border-radius: 2px;
	    background: var(--k-bg-2) !important;
	    border: 1px solid var(--k-line-2) !important;
	  }

	  .selected-body,
	  .threshold-panel,
	  .mode-chip,
	  .winrate-chip {
	    border-radius: 2px !important;
	  }

	  .symbol-input,
	  .settings-input,
	  .settings-input-native,
	  .position-review-form input,
	  .position-review-form select {
	    min-height: 42px;
	    border-radius: 2px;
	    border-color: var(--k-line-2);
	    background: var(--k-bg);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
	  }

	  .symbol-input:focus,
	  .settings-input:focus,
	  .settings-input-native:focus,
	  .position-review-form input:focus,
	  .position-review-form select:focus {
	    outline: none;
	    border-color: var(--k-amber);
	    background: var(--k-bg);
	    box-shadow: 0 0 0 2px rgba(245,165,36,0.12);
	  }

	  .symbol-add-btn,
	  .position-review-form button[type="submit"],
	  .tc2-execute,
	  .btn-primary {
	    border-radius: 2px;
	    background: var(--k-amber-dim);
	    border-color: var(--k-amber);
	    color: var(--k-amber);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
	  }

	  .btn-secondary,
	  .reset-threshold-btn,
	  .preset-btn {
	    border-color: var(--k-line-2);
	    background: var(--k-bg-2);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
	  }

	  .selected-shell {
	    padding-top: 14px;
	    border-top-color: rgba(255,255,255,0.07);
	  }

	  .selected-toggle {
	    padding: 2px 2px 0;
	  }

	  .symbol-chip {
	    min-height: 54px;
	    border-radius: 2px;
	    background: var(--k-bg-2);
	    border-color: var(--k-line-2);
	  }

	  .trade-card-v2 {
	    border-radius: 2px;
	    position: relative;
	    overflow: hidden;
	    border-top: 1px solid var(--k-amber);
	  }

	  .trade-card-v2::before {
	    content: '';
	    position: absolute;
	    inset: 0 0 auto;
	    height: 1px;
	    background: linear-gradient(90deg, transparent, rgba(245,165,36,0.3), transparent);
	    pointer-events: none;
	  }

	  .trade-card-v2:hover {
	    border-color: var(--k-amber);
	    box-shadow: none;
	  }

	  .trade-card-v2.rank-1 {
	    border-color: var(--k-amber);
	    background: var(--k-panel);
	  }

	  .tc2-header {
	    background: var(--k-bg);
	    border-bottom: 1px solid var(--k-line);
	    padding: 18px 18px 12px;
	  }

	  .tc2-rank,
	  .tc2-dir,
	  .tc2-grade,
	  .change-badge,
	  .regime-chip,
	  .conf-dir,
	  .conf-quality,
	  .mtf-trend-badge,
	  .hi-status,
	  .hi-rank {
	    border-radius: 2px;
	  }

	  .tc2-dir {
	    font-size: 12px;
	    letter-spacing: 0.16em;
	    padding: 5px 8px;
	    background: var(--k-bg-2);
	    border: 1px solid var(--k-line-2);
	    text-transform: uppercase;
	    font-weight: 700;
	  }

	  .tc2-dir.long { background: var(--k-up-dim); color: var(--k-up); }
	  .tc2-dir.short { background: var(--k-dn-dim); color: var(--k-dn); }

	  .tc2-lv {
	    text-align: left;
	    padding: 14px 14px 12px;
	    border-radius: 2px;
	    background: var(--k-bg);
	    border: 1px solid var(--k-line-2);
	    min-height: 92px;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	  }

	  .tc2-rr-row {
	    justify-content: space-around;
	    border-radius: 2px;
	    background: var(--k-bg);
	    border: 1px solid var(--k-line-2);
	    padding: 14px 12px;
	  }

	  .tc2-action,
	  .market-hint,
	  .error-banner {
	    border-radius: 2px;
	  }

	  .tc2-action {
	    border: 1px solid var(--k-line-2);
	    border-left: 3px solid var(--k-amber);
	    background: var(--k-bg);
	    padding: 10px 12px;
	    line-height: 1.45;
	  }

	  .tc2-action--warn {
	    border-left-color: var(--k-amber);
	    background: var(--k-amber-dim);
	    color: var(--k-amber);
	  }

	  .tc2-card-details-summary {
	    list-style: none;
	    cursor: pointer;
	    padding: 10px 14px;
	    font-size: 13px;
	    font-weight: 800;
	    color: var(--k-ink-2);
	    background: var(--k-bg);
	    border-top: 1px solid var(--k-line);
	    display: flex;
	    align-items: center;
	    gap: 8px;
	    user-select: none;
	  }
	  .tc2-card-details-summary::-webkit-details-marker { display: none; }
	  .tc2-card-details-summary::before {
	    content: '';
	    width: 0;
	    height: 0;
	    border-left: 5px solid var(--k-ink-4);
	    border-top: 4px solid transparent;
	    border-bottom: 4px solid transparent;
	    transition: transform 0.15s ease;
	    flex-shrink: 0;
	  }
	  .tc2-card-details[open] > .tc2-card-details-summary::before {
	    transform: rotate(90deg);
	  }
	  .tc2-card-details-summary:hover {
	    color: var(--k-ink);
	    background: var(--k-amber-dim);
	  }
	  .tc2-details-title {
	    color: var(--k-ink);
	    font-size: 13px;
	    font-weight: 900;
	    letter-spacing: 0.14em;
	    text-transform: uppercase;
	  }
	  .tc2-details-sub {
	    margin-left: auto;
	    padding: 4px 8px;
	    border-radius: 2px;
	    background: var(--k-bg-2);
	    border: 1px solid var(--k-line-2);
	    color: var(--k-ink-3);
	    font-size: 13px;
	    font-weight: 800;
	    letter-spacing: 0.12em;
	    text-transform: uppercase;
	    white-space: nowrap;
	  }
	  .tc2-card-details-summary:focus { outline: none; }
	  .tc2-card-details-summary:focus-visible {
	    box-shadow: inset 0 0 0 2px rgba(245,165,36,0.35);
	  }
	  .tc2-card-details-inner {
	    padding: 12px 14px 14px;
	    border-top: 1px solid var(--k-line);
	    background: var(--k-bg-2);
	  }

	  .tc2-header {
	    display: flex;
	    align-items: flex-start;
	    justify-content: space-between;
	    gap: 12px;
	    background: var(--k-bg);
	    border-bottom: 1px solid var(--k-line);
	    padding: 18px 18px 12px;
	  }
	  .tc2-header-left {
	    min-width: 0;
	    flex: 1;
	  }
	  .tc2-symbol-line {
	    display: flex;
	    align-items: center;
	    gap: 8px;
	    flex-wrap: wrap;
	  }
	  .tc2-rank {
	    min-width: 36px;
	    height: 36px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    border: 1px solid var(--k-line-2);
	    color: var(--k-ink-3);
	    background: var(--k-bg-2);
	    font-family: var(--k-mono);
	    font-size: 12px;
	    font-weight: 800;
	    border-radius: 2px;
	  }
	  .trade-card-v2.rank-1 .tc2-rank {
	    border-color: var(--k-amber);
	    color: var(--k-amber);
	    background: var(--k-amber-dim);
	  }
	  .trade-card-v2.rank-1 {
	    box-shadow: none;
	    background: var(--k-panel);
	    border-color: var(--k-amber);
	  }
	  .tc2-chip {
	    display: inline-flex;
	    align-items: center;
	    min-height: 28px;
	    padding: 0 10px;
	    border-radius: 2px;
	    border: 1px solid var(--k-line-2);
	    background: var(--k-bg-2);
	    color: var(--k-ink-2);
	    font-size: 12px;
	    font-weight: 800;
	    letter-spacing: 0.16em;
	    text-transform: uppercase;
	    white-space: nowrap;
	  }
	  .tc2-chip--amber {
	    background: var(--k-amber-dim);
	    border-color: var(--k-amber);
	    color: var(--k-amber);
	  }
	  .tc2-chip--soft {
	    background: var(--k-bg-2);
	    color: var(--k-ink-2);
	  }
	  .tc2-chip--long {
	    background: var(--k-up-dim);
	    border-color: var(--k-up-line);
	    color: var(--k-up);
	  }
	  .tc2-chip--short {
	    background: var(--k-dn-dim);
	    border-color: var(--k-dn-line);
	    color: var(--k-dn);
	  }
	  .tc2-chip--no-trade {
	    background: rgba(255,255,255,0.03);
	    border-color: rgba(255,255,255,0.08);
	    color: var(--k-ink-3);
	  }
	  .tc2-symbol {
	    font-size: 28px;
	    font-weight: 900;
	    letter-spacing: 0.04em;
	    color: var(--k-ink);
	  }
	  .tc2-body {
	    padding: 0 18px 18px;
	  }
	  .tc2-note {
	    margin-top: 8px;
	    padding: 10px 12px;
	    border: 1px solid var(--k-line-2);
	    border-left: 3px solid var(--k-amber);
	    background: var(--k-bg);
	    color: var(--k-ink-2);
	    border-radius: 2px;
	    font-size: 12px;
	    font-weight: 700;
	    line-height: 1.45;
	  }
	  .tc2-note--warn {
	    background: var(--k-amber-dim);
	    color: var(--k-amber);
	  }
	  .tc2-riskline {
	    margin: 10px 2px 12px;
	    font-family: var(--k-mono);
	    font-size: 13px;
	    color: var(--k-ink-2);
	    letter-spacing: 0.04em;
	  }
	  .tc2-levels-grid {
	    gap: 10px;
	    margin-bottom: 12px;
	  }
	  .tc2-levels-grid .tc2-lv {
	    background: var(--k-bg);
	    border: 1px solid var(--k-line-2);
	    border-radius: 2px;
	    padding: 14px 14px 12px;
	    text-align: left;
	    min-height: 92px;
	  }
	  .tc2-levels-grid .tc2-lv-label {
	    text-transform: uppercase;
	    letter-spacing: 0.14em;
	    font-size: 13px;
	    font-weight: 800;
	    color: var(--k-ink-4);
	    margin-bottom: 8px;
	  }
	  .tc2-levels-grid .tc2-lv-val {
	    font-size: 14px;
	    font-weight: 800;
	    font-family: var(--k-mono);
	    color: var(--k-ink);
	  }
	  .tc2-levels-grid .tc2-lv-val.entry { color: var(--k-amber); }
	  .tc2-levels-grid .tc2-lv-val.sl { color: var(--k-dn); }
	  .tc2-levels-grid .tc2-lv-val.tp1,
	  .tc2-levels-grid .tc2-lv-val.tp2,
	  .tc2-levels-grid .tc2-lv-val.tp3 { color: var(--k-up); }
	  .tc2-levels-grid .tc2-lv-pct {
	    margin-top: 6px;
	    font-size: 12px;
	    font-weight: 800;
	    font-family: var(--k-mono);
	    letter-spacing: 0.04em;
	    line-height: 1;
	  }
	  .tc2-rr-row {
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	    gap: 12px;
	    margin-bottom: 14px;
	    padding: 14px 12px;
	    border-radius: 2px;
	    background: var(--k-bg);
	    border: 1px solid var(--k-line-2);
	  }
	  .tc2-rr-item { text-align: center; }
	  .tc2-rr-val {
	    font-size: 18px;
	    font-weight: 800;
	    font-family: var(--k-mono);
	  }
	  .tc2-rr-label {
	    font-size: 13px;
	    font-weight: 700;
	    text-transform: uppercase;
	    letter-spacing: 0.6px;
	    color: var(--k-ink-4);
	    margin-top: 2px;
	  }

	  .focus-section-header {
	    border-bottom-color: rgba(255, 255, 255, 0.08);
	  }
	  .short-diag__summary {
	    background: rgba(15, 23, 42, 0.52);
	    border-color: rgba(96, 165, 250, 0.22);
	  }
	  .short-diag__summary:hover {
	    border-color: rgba(96, 165, 250, 0.35);
	    background: rgba(59, 130, 246, 0.08);
	  }

	  .no-signal-v2 {
	    max-width: 980px;
	    padding: 38px 18px 30px;
	    border-radius: 2px;
	    border: 1px solid var(--k-line-2);
	    background: var(--k-bg-2);
	  }

	  .no-signal-icon {
	    width: 44px;
	    height: 44px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    justify-self: center;
	    border-radius: 999px;
	    border: 1px solid rgba(148,163,184,0.15);
	    background: rgba(15,23,42,0.65);
	    color: rgba(147,197,253,0.72);
	  }

	  .analytics-stat-value,
	  .history-stat-val,
	  .market-price,
	  .conf-score,
	  .tc2-grade,
	  .tc2-rr-val {
	    letter-spacing: -0.035em;
	  }

	  .analytics-conf-card {
	    background:
	      radial-gradient(circle at 0% 0%, rgba(59,130,246,0.10), transparent 34%),
	      var(--surface-glass);
	  }

	  .settings-dialog {
	    border-color: rgba(96,165,250,0.18);
	    background:
	      radial-gradient(circle at 22% 0%, rgba(59,130,246,0.12), transparent 34%),
	      linear-gradient(145deg, rgba(15,23,42,0.96), rgba(2,6,23,0.94));
	    box-shadow: 0 30px 100px rgba(0,0,0,0.55);
	  }

	  .settings-section,
	  .settings-summary,
	  .threshold-display, {
	    border: 1px solid rgba(148,163,184,0.12);
	    background: rgba(15,23,42,0.52);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
	  }

	  .position-review-hint {
	    margin: 0 0 14px;
	    padding: 11px 13px;
	    border-radius: 13px;
	    border: 1px solid rgba(148,163,184,0.10);
	    background: rgba(15,23,42,0.48);
	    color: rgba(203,213,225,0.78);
	  }

	  .position-review-lead {
	    color: rgba(148, 163, 184, 0.88);
	  }
	  .position-review-more {
	    border-color: rgba(148, 163, 184, 0.14);
	    background: rgba(15, 23, 42, 0.4);
	  }
	  .position-review-more summary {
	    color: rgba(203, 213, 225, 0.9);
	  }
	  .position-review-more-body code {
	    font-size: 12px;
	    padding: 1px 5px;
	    border-radius: 4px;
	    background: rgba(0, 0, 0, 0.25);
	  }

	  .position-review-time-note {
	    border-color: rgba(245, 158, 11, 0.26);
	    background: rgba(120, 53, 15, 0.18);
	  }
	  .position-review-time-note--warn {
	    color: #fde68a;
	  }
	  .position-review-time-note--err {
	    border-color: rgba(248, 113, 113, 0.35);
	    background: rgba(127, 29, 29, 0.22);
	    color: #fecaca;
	  }

	  .position-review-form label {
	    font-weight: 800;
	    letter-spacing: 0.02em;
	  }

	  .pr-datetime-picker-btn {
	    border-color: rgba(96, 165, 250, 0.4);
	    background: rgba(59, 130, 246, 0.18);
	    color: #bfdbfe;
	  }
	  .pr-datetime-picker-btn:hover {
	    background: rgba(59, 130, 246, 0.28);
	    border-color: rgba(96, 165, 250, 0.55);
	  }

	  .position-review-result {
	    border-color: rgba(96,165,250,0.20);
	  }

	  .footer {
	    border-top-color: rgba(96,165,250,0.12);
	    color: rgba(148,163,184,0.78);
	  }

	  @media (max-width: 900px) {
	    .main {
	      width: min(100% - 32px, 1560px);
	    }
	    .trades-grid,
	    .trades-grid--count-1,
	    .trades-grid--count-2 {
	      grid-template-columns: 1fr;
	    }
	    .control-panel {
	      padding: 0;
	    }
	  }

	  @media (max-width: 640px) {
	    .main {
	      width: auto;
	      padding: 14px;
	      padding-bottom: 30px;
	    }
	    .topbar {
	      border-bottom-color: rgba(96,165,250,0.12);
	    }
	    .control-panel-summary {
	      min-height: 50px;
	      padding: 12px 14px;
	    }
	    .control-panel-body {
	      padding: 14px;
	    }
	    .no-signal-v2 {
	      padding: 28px 12px 22px;
	    }
	  }

    /* === KAIRION TERMINAL — TOPBAR + FUNCTION BAR === */
    .kx-topbar-shell {
      display: flex !important; align-items: center; justify-content: space-between;
      padding: 0 12px !important; height: 44px !important;
      background: var(--k-bg) !important;
      border-bottom: 1px solid var(--k-line-2) !important;
      backdrop-filter: none !important;
      gap: 12px;
    }
    .kx-topbar-l { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
    .kx-topbar-r { display: flex !important; align-items: center; gap: 8px; }
    .kx-logo { display: flex !important; align-items: center; gap: 8px; flex-shrink: 0; }
    .kx-logo-mark {
      width: 22px !important; height: 22px !important;
      display: flex; align-items: center; justify-content: center;
      background: var(--k-amber) !important;
      color: var(--k-bg) !important;
      font-weight: 700 !important; font-size: 13px !important;
      border-radius: 2px !important;
    }
    .kx-logo-text {
      font-family: var(--k-mono) !important;
      font-size: 11px !important; font-weight: 700 !important;
      letter-spacing: 0.18em !important;
      color: var(--k-ink) !important;
    }
    /* CLOCK / LIVE BADGE */
    .kx-topbar-shell .live-badge.kx-clock {
      display: flex !important; align-items: center; gap: 6px;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      font-family: var(--k-mono) !important;
      font-size: 11px !important;
      color: var(--k-ink-2) !important;
    }
    .kx-topbar-shell .live-dot.kx-dot {
      width: 6px !important; height: 6px !important;
      border-radius: 50% !important;
      background: var(--k-up) !important;
      box-shadow: 0 0 6px var(--k-up) !important;
      animation: none !important;
    }

    /* ICON BUTTONS */
    .kx-topbar-shell .kx-icon-btn {
      width: 28px !important; height: 28px !important;
      padding: 0 !important;
      display: flex !important; align-items: center; justify-content: center;
      color: var(--k-ink-3) !important;
      background: var(--k-bg) !important;
      border: 1px solid var(--k-line-2) !important;
      border-radius: 2px !important;
    }
    .kx-topbar-shell .kx-icon-btn:hover { color: var(--k-amber) !important; border-color: var(--k-amber) !important; }
    .kx-topbar-shell .kx-icon-btn span { display: none !important; }

    .control-bar {
      background: var(--k-bg-2) !important;
      border: 1px solid var(--k-line-2) !important;
      border-radius: 2px !important;
      margin-bottom: 18px !important;
      overflow: hidden !important;
    }
    .control-bar-tabs {
      border-bottom: 1px solid var(--k-line-2) !important;
      background: var(--k-bg) !important;
      padding: 0 !important;
      gap: 0 !important;
    }
    .control-bar-tab {
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid var(--k-line) !important;
      border-radius: 0 !important;
      padding: 8px 12px !important;
      color: var(--k-ink-3) !important;
      opacity: 1 !important;
    }
    .control-bar-tab.is-active {
      color: var(--k-amber) !important;
      background: var(--k-bg-2) !important;
      box-shadow: inset 0 -2px 0 var(--k-amber) !important;
    }
    .control-bar-tab-label {
      font-size: 11px !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      font-weight: 700 !important;
    }
    .control-bar-tab-meta {
      font-size: 9.5px !important;
      color: var(--k-ink-4) !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
    }
    .control-bar-panels {
      padding: 12px !important;
    }
    .control-bar-panel {
      gap: 10px !important;
    }
    .control-bar-collapse {
      border-left: 1px solid var(--k-line) !important;
      border-radius: 0 !important;
      color: var(--k-ink-3) !important;
    }
    .control-bar-collapse:hover {
      background: var(--k-amber-dim) !important;
      color: var(--k-amber) !important;
      border-color: var(--k-amber) !important;
    }

    .control-panel-summary,
    .control-panel-body,
    .selected-shell,
    .preset-section,
    .symbol-search,
    .position-review-form-wrap,
    .single-analyzer-form,
    .single-analyzer-head,
    .scanner-tools-grid > *,
    .trade-card-v2,
    .focus-section {
      border-radius: 2px !important;
      box-shadow: none !important;
    }

    .section-title,
    .preset-title,
    .symbol-search-title,
    .position-review-form legend,
    .single-analyzer-head h2,
    .trading-orders h4 {
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
    }

    /* Mobile topbar: stop clipping/wrapping into a single 44px strip */
    .kx-topbar-shell {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "main right";
      align-items: start;
      column-gap: 8px;
      row-gap: 6px;
      height: auto !important;
      min-height: 0 !important;
      padding: 8px 10px !important;
    }
    .kx-topbar-l {
      grid-area: main;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      min-width: 0;
    }
    .kx-topbar-r {
      grid-area: right;
      align-self: start;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .kx-logo {
      width: auto;
    }


/* ===== css/kx-v5.css ===== */
/* ============================================================
   Kairion Simplified V5
   Visual override based on /Users/eddie/Downloads/redesign
   Layered after existing site styles.
   ============================================================ */

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

:root {
  /* Neutrals, semantics and fonts alias the canonical --kr-* scale
     (single source of truth in kairion-redesign.css). --kx5-amber /
     --kx5-amber-dim are also defined there (mapped to violet). */
  --kx5-bg: var(--kr-bg);
  --kx5-bg-2: var(--kr-bg-2);
  --kx5-panel: var(--kr-surface);
  --kx5-panel-2: var(--kr-surface-2);
  --kx5-line: var(--kr-line);
  --kx5-line-2: var(--kr-line-2);
  --kx5-ink: var(--kr-ink);
  --kx5-ink-2: var(--kr-ink-2);
  --kx5-ink-3: var(--kr-ink-3);
  --kx5-ink-4: var(--kr-ink-4);
  --kx5-up: var(--kr-up);
  --kx5-up-dim: var(--kr-up-dim);
  --kx5-dn: var(--kr-dn);
  --kx5-dn-dim: var(--kr-dn-dim);
  --kx5-sans: var(--kr-sans);
  --kx5-mono: var(--kr-mono);
  --kx5-r: var(--kr-r-xs);
  --kx5-soft-shadow: var(--kr-shadow-sm);
}

html, body {
  background: var(--kx5-bg) !important;
  color: var(--kx5-ink) !important;
  font-family: var(--kx5-sans) !important;
}

body {
  font-size: 13px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app,
.main,
.control-bar,
.settings-panel,
.trading-tab-dashboard-shell,
#trading-dashboard,
.history-shell,
.card,
.modal,
.dropdown,
.toast {
  background: var(--kx5-bg) !important;
}

body::before {
  content: none !important;
}

.app,
.main,
.loading-overlay,
.settings-panel,
.control-bar,
.error-banner,
.toast {
  position: relative;
  z-index: 1;
}

.app-view[hidden] {
  display: none !important;
}

/* Header */
.kx-topbar-shell,
.topbar {
  height: 64px !important;
  padding: 0 26px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  background: rgba(9,12,16,0.97) !important;
  backdrop-filter: blur(8px);
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 26px !important;
}

.kx-topbar-l {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  min-width: 0 !important;
}
.kx-logo,
.brand {
  gap: 10px !important;
}
.kx-logo {
  padding: 0 !important;
  border-right: 0 !important;
}
.kx-logo-mark,
.brand-mark,
.logo-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  background: var(--kx5-amber) !important;
  color: var(--kx5-bg) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.kx-logo-text,
.brand-name,
.kx-logo-text {
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  color: var(--kx5-ink) !important;
}

.kx-clock,
.live-pill,
.live-badge {
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-2) !important;
  border-radius: 999px !important;
}
.kx-topbar-shell .kx-clock,
.topbar .live-badge {
  min-height: 36px !important;
  padding: 7px 14px !important;
}
.kx-topbar-r,
.topbar-right {
  align-items: center !important;
  align-self: center !important;
  gap: 10px !important;
  height: auto !important;
}
.kx-dot,
.live-dot {
  box-shadow: 0 0 0 4px var(--kx5-up-dim) !important;
  background: var(--kx5-up) !important;
}

.kx-icon-btn,
.icon-btn,
.topbar-nav-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--kx5-ink-2) !important;
}
.kx-topbar-shell .kx-icon-btn,
.topbar .topbar-nav-btn {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.kx-icon-btn:hover,
.icon-btn:hover,
.topbar-nav-btn:hover {
  background: var(--kx5-panel) !important;
  color: var(--kx5-ink) !important;
}

.kx-primary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.kx-primary-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  color: var(--kx5-ink-3) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background .12s ease, color .12s ease !important;
}
.kx-primary-nav-link:hover {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
}
.kx-primary-nav-link.is-active {
  color: var(--kx5-ink) !important;
  background: var(--kx5-panel) !important;
}

/* Nav bars */
.nav {
  background: var(--kx5-bg) !important;
  border-bottom: 1px solid var(--kx5-line) !important;
}
.nav a:hover {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
}
.nav a.is-active {
  color: var(--kx5-ink) !important;
  background: var(--kx5-panel) !important;
}
/* Main layout */
.main {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 32px 20px 88px !important;
}
.history-main {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 32px 20px 88px !important;
  background: transparent !important;
}
.history-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
#focus-signals {
  scroll-margin-top: 84px !important;
}

.kx-mobile-tabs {
  display: none !important;
}

/* Home hero */
.home-hero {
  background: var(--kx5-panel) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  padding: 38px 32px 32px !important;
  margin: 0 0 26px !important;
  box-shadow: var(--kx5-soft-shadow) !important;
}
.home-hero-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 30px !important;
}
.home-hero-status {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0 !important;
}
.home-status-light {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--kx5-up) !important;
  box-shadow: 0 0 0 4px var(--kx5-up-dim) !important;
  flex: 0 0 auto !important;
}
.home-status-light.is-paused {
  background: var(--kx5-amber) !important;
  box-shadow: 0 0 0 4px var(--kx5-amber-dim) !important;
}
.home-status-light.is-off {
  background: var(--kx5-ink-4) !important;
  box-shadow: 0 0 0 4px rgba(82, 92, 102, 0.12) !important;
}
.home-hero-title-wrap {
  min-width: 0 !important;
}
.home-hero-title {
  font-size: 25px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kx5-ink) !important;
}
.home-hero-sub {
  font-size: 12.5px !important;
  color: var(--kx5-ink-2) !important;
  margin-top: 4px !important;
}
.home-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.home-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: var(--kx5-line) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  overflow: hidden !important;
}
.home-kpi {
  background: var(--kx5-panel) !important;
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.home-kpi-label {
  font-size: 12px !important;
  color: var(--kx5-ink-3) !important;
  letter-spacing: 0.04em !important;
}
.home-kpi-value {
  font-family: var(--kx5-mono) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--kx5-ink) !important;
}
.home-kpi-sub {
  font-size: 11.5px !important;
  color: var(--kx5-ink-3) !important;
}

.home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr) !important;
  gap: 26px !important;
  align-items: start !important;
  margin-top: 26px !important;
}
.home-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.home-side-card {
  background: var(--kx5-panel) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  overflow: hidden !important;
  box-shadow: var(--kx5-soft-shadow) !important;
}
.home-side-card-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-bottom: 0 !important;
}
.home-side-list {
  display: flex !important;
  flex-direction: column !important;
}
.home-position-row,
.home-activity-row {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
}
.home-position-row:last-child,
.home-activity-row:last-child {
  border-bottom: 0 !important;
}
.home-position-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
.home-position-sym {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kx5-ink) !important;
}
.home-position-pnl {
  font-family: var(--kx5-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.home-position-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--kx5-ink-3) !important;
}
.home-activity-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: baseline !important;
}
.home-activity-time {
  color: var(--kx5-ink-3) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 11px !important;
}
.home-activity-main {
  min-width: 0 !important;
  color: var(--kx5-ink) !important;
  font-size: 12.5px !important;
}
.home-activity-status {
  margin-left: 8px !important;
  color: var(--kx5-ink-4) !important;
  font-size: 11px !important;
}
.home-activity-amt {
  font-family: var(--kx5-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.home-side-empty {
  padding: 14px 18px !important;
  color: var(--kx5-ink-4) !important;
  font-size: 12px !important;
}

/* Control bar */
.control-bar,
.card,
.focus-section,
.set,
.summary,
.sig-hero,
.equity,
.tools,
.settings-panel .settings-dialog,
.trading-tab-dashboard-shell {
  background: var(--kx5-panel) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  box-shadow: var(--kx5-soft-shadow) !important;
}

.control-bar {
  margin: 22px 0 !important;
  overflow: hidden !important;
}
.control-bar.is-collapsed {
  margin-bottom: 12px !important;
}
.control-bar.is-collapsed .control-bar-panels {
  display: none !important;
}
.control-bar.is-collapsed .control-bar-tabs {
  border-bottom: 0 !important;
}
.control-bar.is-collapsed .control-bar-collapse-icon {
  transform: rotate(-90deg) !important;
}
.control-bar-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  gap: 8px !important;
  padding: 8px 10px !important;
}
.control-bar-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--kx5-ink-3) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
.control-bar-tab:hover {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
}
.control-bar-tab.is-active {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
  border-color: var(--kx5-line-2) !important;
}
.control-bar-tab--trading .control-bar-tab-label {
  color: var(--kx5-amber) !important;
}
.control-bar-tab-label {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.control-bar-tab-meta {
  font-size: 11px !important;
  color: var(--kx5-ink-4) !important;
}
.control-bar-collapse {
  color: var(--kx5-ink-3) !important;
}
.control-bar.is-collapsed .control-bar-collapse {
  color: var(--kx5-amber) !important;
}
.control-panel-body {
  padding: 20px !important;
}

/* Hero / KPI */
.hero,
.summary,
.sig-hero,
.equity,
.tools,
.card {
  overflow: hidden !important;
}
.hero,
.sig-hero {
  padding: 22px 24px !important;
  margin-bottom: 18px !important;
}
.hero-title,
.card-title,
.sig-hero-sym,
.sum-value {
  letter-spacing: -0.01em !important;
}
.summary {
  gap: 1px !important;
  background: var(--kx5-line) !important;
}
.sum-cell {
  background: var(--kx5-panel) !important;
}
.sum-label {
  color: var(--kx5-ink-3) !important;
}
.sum-sub {
  color: var(--kx5-ink-3) !important;
}

.delta-chip.up,
.pos,
.dir-tag.long,
.dir-long,
.badge-long,
[data-direction="long"] {
  color: var(--kx5-up) !important;
  background: var(--kx5-up-dim) !important;
}
.delta-chip.dn,
.neg,
.dir-tag.short,
.dir-short,
.badge-short,
[data-direction="short"] {
  color: var(--kx5-dn) !important;
  background: var(--kx5-dn-dim) !important;
}
.am {
  color: var(--kx5-amber) !important;
}

/* Buttons */
.btn,
.btn-secondary,
.btn-primary,
.preset-btn,
.symbol-add-btn,
.single-analyzer-btn,
.position-review-form button[type="submit"],
.pr-form-actions button,
.settings-actions button,
.save-bar .btn,
.settings-nav-btn,
.history-nav-btn,
.trading-tab-action,
.icon-btn,
.link-btn,
.chip,
.error-action-btn {
  font-family: var(--kx5-sans) !important;
  box-shadow: none !important;
}
.btn,
.btn-secondary,
.preset-btn,
.symbol-add-btn,
.single-analyzer-btn,
.position-review-form button[type="submit"],
.pr-form-actions button,
.settings-actions button,
.trading-tab-action,
.chip,
.error-action-btn {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink) !important;
  border: 1px solid var(--kx5-line-2) !important;
  border-radius: 8px !important;
}
.link-btn {
  background: transparent !important;
  color: var(--kx5-ink-2) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.link-btn:hover {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
  border-color: var(--kx5-line-2) !important;
}
.btn:hover,
.btn-secondary:hover,
.preset-btn:hover,
.symbol-add-btn:hover,
.single-analyzer-btn:hover,
.position-review-form button[type="submit"]:hover,
.pr-form-actions button:hover,
.settings-actions button:hover,
.trading-tab-action:hover,
.chip:hover,
.error-action-btn:hover {
  background: var(--kx5-panel-2) !important;
  border-color: var(--kx5-ink-4) !important;
}
.btn-primary,
.single-analyzer-btn,
.position-review-form button[type="submit"],
.pr-form-actions button {
  background: var(--kx5-amber) !important;
  color: var(--kx5-bg) !important;
  border-color: var(--kx5-amber) !important;
  font-weight: 600 !important;
}
.btn-danger,
.trading-tab-action--kill {
  color: var(--kx5-dn) !important;
  border-color: rgba(240,85,106,0.30) !important;
}
.trading-tab-action--toggle {
  background: var(--kx5-amber) !important;
  color: var(--kx5-bg) !important;
  border-color: var(--kx5-amber) !important;
}

/* Cards / tables */
.card-hd,
.focus-section-header,
.card-header,
.tools-hd {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  background: transparent !important;
}
.card-title,
.focus-section-heading {
  color: var(--kx5-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.focus-section-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.focus-section-sub {
  color: var(--kx5-ink-3) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.03em !important;
}
.count-pill,
.status-pill,
.sig-status,
.live-pill {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-2) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 6px !important;
}

table,
.trades {
  border-collapse: collapse !important;
}
thead th,
.trades thead th {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-3) !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
tbody td,
.trades tbody td,
.sig {
  border-bottom: 1px solid var(--kx5-line) !important;
}
tbody tr:hover,
.trades tbody tr:hover,
.sig:hover,
.preset:hover,
.chip:hover {
  background: var(--kx5-bg-2) !important;
}

/* Signals / lists */
#signals-container { padding: 0 !important; }
.sig-panel,
.sig-panel--no-trade {
  background: var(--kx5-panel) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  overflow: hidden !important;
}
.sig-panel-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
}
.sig-panel-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
.sig-panel-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kx5-line) !important;
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11px !important;
  font-family: var(--kx5-mono) !important;
}
.sig-panel-sub {
  padding: 16px 24px 10px !important;
}
/* Left-align the "目前無交易訊號" status with the panel header + section content
   (base rule centers it via margin:0 auto / max-width on narrow viewports). */
.sig-panel-sub .no-signal-sub {
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
.sig-list--no-trade .sig {
  background: transparent !important;
}
.signal-empty-shell {
  background: transparent !important;
  border-top: 1px solid var(--kx5-line) !important;
}
.signal-empty-shell .signal-table-caption {
  border-bottom: 1px solid var(--kx5-line) !important;
}
.signal-empty-row {
  padding: 16px 18px 18px !important;
}
.signal-empty-msg {
  font-size: 12px !important;
  color: var(--kx5-ink-2) !important;
}
.signal-empty-sub {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--kx5-ink-3) !important;
  font-family: var(--kx5-mono) !important;
}
.signal-card,
.signal-row,
.strategy-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 24px !important;
}
.signal-card:hover,
.signal-row:hover {
  background: var(--kx5-bg-2) !important;
}
.signal-table-shell {
  background: var(--kx5-panel) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.signal-list-head {
  display: grid !important;
  grid-template-columns: 86px minmax(220px, 1fr) 72px 120px 108px !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 24px !important;
  background: rgba(8, 12, 17, 0.38) !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-3) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.signal-list-head span:nth-child(4),
.signal-list-head span:nth-child(5) {
  text-align: right !important;
}
.signal-table-caption {
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.signal-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
.signal-list .signal-row {
  display: grid !important;
  grid-template-columns: 86px minmax(220px, 1fr) 72px 120px 108px;
  grid-template-areas: "score symbol dir price status";
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  background: transparent !important;
  min-height: 88px !important;
}
.signal-list .signal-row:last-of-type {
  border-bottom: 0 !important;
}
.signal-list .signal-row:hover {
  background: var(--kx5-bg-2) !important;
}
.signal-list .signal-row[data-details-trigger] {
  cursor: pointer !important;
  user-select: none !important;
}
.signal-list .signal-row[data-details-trigger]:focus {
  outline: none !important;
}
.signal-list .signal-row[data-details-trigger]:focus-visible {
  outline: 1px solid rgba(245, 165, 36, 0.58) !important;
  outline-offset: -1px !important;
}
.signal-list .signal-row.signal-row--details-open {
  background: var(--kx5-bg-2) !important;
}
.signal-list .signal-score-cell {
  grid-area: score !important;
}
.signal-list .signal-symbol-cell {
  grid-area: symbol !important;
}
.signal-list .signal-last-cell {
  grid-area: price !important;
  text-align: right !important;
}
.signal-list .signal-delta-cell {
  grid-area: status !important;
  text-align: right !important;
}
.signal-list .signal-dir-cell {
  grid-area: dir !important;
}
.signal-row-meta {
  display: none !important;
}
.signal-detail-row {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  background: rgba(17, 22, 28, 0.48) !important;
}
.signal-detail-row:has(.signal-row-details:not([open])) {
  display: none !important;
}
.signal-detail-row td {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px 18px !important;
  border: 0 !important;
}
.signal-row-details {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border-top: 1px solid var(--kx5-line) !important;
  padding-top: 12px !important;
}
.signal-row-details-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 8px !important;
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-2) !important;
  cursor: pointer !important;
}
.signal-row-details-summary--hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.signal-row-details-summary--hidden::before {
  content: none !important;
}
.signal-row-details-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  padding-top: 14px !important;
  overflow: hidden !important;
}
.signal-symbol-main {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kx5-ink) !important;
  letter-spacing: -0.01em !important;
}
.signal-symbol-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 4px !important;
  color: var(--kx5-ink-3) !important;
  font-size: 13px !important;
  overflow-wrap: anywhere !important;
}
.signal-symbol-name,
.signal-symbol-reason {
  color: var(--kx5-ink-3) !important;
}
.signal-symbol-reason {
  font-family: var(--kx5-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.01em !important;
}
.signal-dir-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border: 1px solid transparent !important;
}
.signal-dir-chip--long {
  background: rgba(45, 212, 126, 0.10) !important;
  color: var(--kx5-up) !important;
}
.signal-dir-chip--short {
  background: rgba(240, 85, 106, 0.10) !important;
  color: var(--kx5-dn) !important;
}
.signal-delta-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.signal-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px !important;
  padding: 4px 9px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}
.signal-status-chip--executed {
  background: rgba(45, 212, 126, 0.10) !important;
  color: var(--kx5-up) !important;
}
.signal-status-chip--queued {
  background: rgba(245, 165, 36, 0.10) !important;
  color: var(--kx5-amber) !important;
}
.signal-status-chip--watch {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-3) !important;
  border-color: var(--kx5-line) !important;
}
.signal-status-chip--blocked {
  background: rgba(148, 163, 184, 0.08) !important;
  color: var(--kx5-ink-3) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
.signal-score-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin-bottom: 4px !important;
}
.signal-score-num {
  font-family: var(--kx5-mono) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--kx5-ink) !important;
}
.signal-score-den {
  font-size: 10px !important;
  color: var(--kx5-ink-4) !important;
}
.signal-score-track {
  width: 44px !important;
  height: 3px !important;
  background: var(--kx5-line) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.signal-score-fill {
  height: 100% !important;
  background: var(--kx5-amber) !important;
}
.signal-score-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}
.signal-score-label.strong-buy { color: #22c55e !important; }
.signal-score-label.buy { color: #4ade80 !important; }
.signal-score-label.consider { color: #fbbf24 !important; }
.signal-score-label.watch { color: #9ca3af !important; }
.signal-score-label.avoid { color: #ef4444 !important; }
.signal-score-label.invalid { color: #6b7280 !important; }

/* Signal detail content */
.signal-row-details-body *,
.tc2-score-hero *,
.tc2-section-card *,
.tc2-confirm-strip *,
.tc2-oi-strip * {
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}
.tc2-score-hero,
.tc2-score-explain {
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  background: rgba(9, 12, 16, 0.38) !important;
  overflow: hidden !important;
}
.tc2-score-hero-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
.tc2-score-eyebrow {
  color: var(--kx5-ink-3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.tc2-score-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kx5-line) !important;
  background: var(--kx5-bg-2) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.tc2-score-status-pill.tc2-score-verdict--yes {
  color: var(--kx5-up) !important;
  background: var(--kx5-up-dim) !important;
  border-color: rgba(45, 212, 126, 0.24) !important;
}
.tc2-score-status-pill.tc2-score-verdict--no {
  color: var(--kx5-ink-2) !important;
}
.tc2-score-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.tc2-score-metric {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 8px !important;
  background: var(--kx5-bg-2) !important;
}
.tc2-score-metric-label,
.tc2-score-metric-note {
  display: block !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.tc2-score-metric-value {
  display: block !important;
  margin: 6px 0 !important;
  color: var(--kx5-amber) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.tc2-signal-strips {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.tc2-confirm-strip,
.tc2-oi-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--kx5-line) !important;
  border-left: 3px solid var(--kx5-amber) !important;
  border-radius: 8px !important;
  background: var(--kx5-bg-2) !important;
}
.tc2-strip-main,
.tc2-oi-main {
  color: var(--kx5-ink) !important;
  font-weight: 700 !important;
}
.tc2-strip-pill,
.tc2-oi-pill {
  display: inline-flex !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--kx5-amber-dim) !important;
  color: var(--kx5-amber) !important;
  font-size: 11px !important;
}
.tc2-strip-bits,
.tc2-oi-bits {
  min-width: 0 !important;
  color: var(--kx5-ink-3) !important;
  font-size: 12px !important;
  overflow-wrap: anywhere !important;
}
.tc2-section-card,
.tc2-confirm-block {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 8px !important;
  background: rgba(9, 12, 16, 0.32) !important;
  overflow: hidden !important;
}
.tc2-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.tc2-section-title {
  color: var(--kx5-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.tc2-section-title.green { color: var(--kx5-up) !important; }
.tc2-section-count {
  display: inline-flex !important;
  min-width: 24px !important;
  justify-content: center !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-3) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 11px !important;
}
.tc2-list {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.tc2-list li {
  min-width: 0 !important;
  color: var(--kx5-ink-2) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
}
.tc2-confirm-rows {
  display: grid !important;
  gap: 8px !important;
}
.tc2-confirm-row {
  display: grid !important;
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  color: var(--kx5-ink-2) !important;
  font-size: 12px !important;
}
.tc2-confirm-v {
  min-width: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}
.signal-detail-warn,
.signal-detail-actions {
  width: 100% !important;
}
.tc2-compact-overview {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.tc2-compact-overview .tc2-score-explain {
  margin: 0 !important;
  padding: 10px 12px !important;
}
.tc2-score-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 10px !important;
}
.tc2-sc-item {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
}
.tc2-sc-label {
  min-width: 0 !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.tc2-sc-val {
  min-width: 0 !important;
  color: var(--kx5-ink) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: right !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.tc2-execute.disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  filter: grayscale(0.4) !important;
}
.tc2-compact-strips {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.tc2-compact-strips .tc2-confirm-strip,
.tc2-compact-strips .tc2-oi-strip,
.tc2-compact-strips .tc2-sm-strip {
  align-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}
.tc2-compact-strips .tc2-strip-bits,
.tc2-compact-strips .tc2-oi-bits {
  display: block !important;
  flex-basis: 100% !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.tc2-compact-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
.tc2-compact-section {
  min-width: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid var(--kx5-line) !important;
  border-left: 3px solid rgba(96, 165, 250, 0.8) !important;
  border-radius: 8px !important;
  background: rgba(9, 12, 16, 0.32) !important;
}
.tc2-compact-section--good {
  border-left-color: var(--kx5-up) !important;
  background: rgba(45, 212, 126, 0.05) !important;
}
.tc2-compact-section--risk {
  border-left-color: var(--kx5-amber) !important;
  background: rgba(245, 158, 11, 0.055) !important;
}
.tc2-compact-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
  color: var(--kx5-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.tc2-compact-section-title em {
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-3) !important;
  font-family: var(--kx5-mono) !important;
  font-size: 10px !important;
  font-style: normal !important;
}
.tc2-compact-list {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.tc2-compact-list li {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 12px !important;
  color: var(--kx5-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.tc2-compact-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.58em !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: 0.72 !important;
}
@media (max-width: 980px) {
  .tc2-compact-overview,
  .tc2-compact-summary {
    grid-template-columns: 1fr !important;
  }
  .tc2-compact-strips {
    grid-template-columns: 1fr !important;
  }
}
.grid-mini-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  background: var(--kx5-line) !important;
  border-top: 1px solid var(--kx5-line) !important;
}
.grid-mini-row {
  background: var(--kx5-panel) !important;
  padding: 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.grid-mini-row:hover {
  background: var(--kx5-bg-2) !important;
}
.grid-mini-top,
.grid-mini-mid,
.grid-mini-bot {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.grid-mini-top {
  align-items: baseline !important;
  line-height: 1 !important;
}
.grid-mini-sym {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kx5-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}
.grid-mini-tags {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.grid-mini-return {
  font-family: var(--kx5-mono) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kx5-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}
.grid-mini-return-unit {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--kx5-ink-3) !important;
  margin-left: 3px !important;
  line-height: 1 !important;
}
.grid-mini-bias {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  border: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-2) !important;
  background: var(--kx5-bg-2) !important;
}
.grid-mini-bias.grid-action--long {
  color: var(--kx5-up) !important;
  background: var(--kx5-up-dim) !important;
  border-color: rgba(45, 212, 126, 0.18) !important;
}
.grid-mini-bias.grid-action--short {
  color: var(--kx5-dn) !important;
  background: var(--kx5-dn-dim) !important;
  border-color: rgba(240, 85, 106, 0.18) !important;
}
.grid-mini-stat,
.grid-mini-note {
  font-family: var(--kx5-mono) !important;
  font-size: 10.5px !important;
  color: var(--kx5-ink-3) !important;
}
.grid-mini-mid .grid-mini-stat {
  color: var(--kx5-ink-2) !important;
}
.grid-mini-bot {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
.grid-mini-bot .grid-mini-stat + .grid-mini-stat::before {
  content: '·';
  margin: 0 6px 0 0 !important;
  color: var(--kx5-ink-4) !important;
}
.grid-mini-note {
  color: var(--kx5-ink-4) !important;
  font-size: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.score-chip,
.signal-score {
  font-family: var(--kx5-mono) !important;
  font-weight: 600 !important;
}
.sig {
  gap: 16px !important;
  padding: 14px 18px !important;
}
.sig--compact {
  align-items: center !important;
}
.profile-section {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(13, 18, 24, 0.62) !important;
}
.profile-section:first-child {
  border-top: 0 !important;
}
.profile-section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  background: linear-gradient(90deg, rgba(17, 24, 32, 0.98), rgba(14, 19, 25, 0.82)) !important;
  position: relative !important;
}
.profile-section-bar {
  position: absolute !important;
  left: 22px !important;
  top: 20px !important;
  width: 4px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: var(--ps-accent, var(--kx5-amber)) !important;
}
.profile-section-copy {
  min-width: 0 !important;
  padding-left: 18px !important;
}
.profile-section-kicker {
  margin-bottom: 4px !important;
  font-family: var(--kx5-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--ps-accent, var(--kx5-amber)) !important;
  text-transform: uppercase !important;
}
.profile-section-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--kx5-ink) !important;
  letter-spacing: 0 !important;
}
.profile-section-desc {
  margin: 6px 0 0 !important;
  color: var(--kx5-ink-3) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.profile-section-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.profile-section-meta,
.profile-section-count {
  font-family: var(--kx5-mono) !important;
  font-size: 11px !important;
  color: var(--kx5-ink-2) !important;
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  white-space: nowrap !important;
}
.profile-section-count {
  color: var(--kx5-up) !important;
  background: rgba(45, 212, 126, 0.08) !important;
  border-color: rgba(45, 212, 126, 0.22) !important;
}
.profile-section-body {
  padding: 0 !important;
}
.profile-section-empty,
.no-signal-v2 {
  padding: 18px !important;
}
.no-signal-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.no-signal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--kx5-ink) !important;
}
.no-signal-sub,
.no-signal-debug,
.no-signal-nearmiss,
.no-signal-hard-block-note,
.no-signal-hard-block-msg,
.no-signal-hard-block {
  color: var(--kx5-ink-3) !important;
}
.sig-score,
.sum-value {
  font-family: var(--kx5-mono) !important;
}
.sig-status.executed,
.status-pill {
  background: var(--kx5-up-dim) !important;
  color: var(--kx5-up) !important;
  border-color: transparent !important;
}
.sig-status.queued {
  background: var(--kx5-amber-dim) !important;
  color: var(--kx5-amber) !important;
  border-color: transparent !important;
}
.sig-action {
  color: var(--kx5-ink-3) !important;
}
.sig:hover .sig-action {
  color: var(--kx5-ink) !important;
}

/* Forms */
.field input,
.field select,
.symbol-input,
.single-analyzer-input,
.single-analyzer-select,
.position-review-form input,
.position-review-form select,
.pr-fields input,
.pr-fields select,
.settings-input-native,
.settings-range-input,
.settings-field input,
.settings-field select,
.secret-row .field input {
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-family: var(--kx5-mono) !important;
}
.field input:focus,
.field select:focus,
.symbol-input:focus,
.single-analyzer-input:focus,
.single-analyzer-select:focus,
.position-review-form input:focus,
.position-review-form select:focus,
.pr-fields input:focus,
.pr-fields select:focus,
.settings-input-native:focus,
.settings-range-input:focus,
.settings-field input:focus,
.settings-field select:focus,
.secret-row .field input:focus {
  outline: 1px solid var(--kx5-amber) !important;
  border-color: var(--kx5-amber) !important;
}
.field label,
.settings-field-label,
.set-label,
.set-hint,
.sig-reasons,
.loading-sub,
.text-muted,
.muted {
  color: var(--kx5-ink-3) !important;
}

/* Loading */
.loading-overlay {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: min(360px, calc(100vw - 36px)) !important;
  min-height: 78px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  background: rgba(15, 20, 27, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(245,165,36,0.08) inset !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}
.loading-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.loading-overlay.is-slow .spinner {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border-width: 2px !important;
}
.loading-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: var(--kx5-ink-2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.loading-sub {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: var(--kx5-ink-4) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  margin-top: 0 !important;
  font-family: var(--kx5-mono) !important;
}
.spinner {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid var(--kx5-line-2) !important;
  border-top-color: var(--kx5-amber) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
  margin: 0 !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error banner */
.error-banner {
  background: rgba(240,85,106,0.08) !important;
  border: 1px solid rgba(240,85,106,0.25) !important;
  color: var(--kx5-dn) !important;
  border-radius: var(--kx5-r) !important;
}
.error-banner.error-banner--actionable {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.error-action-btn {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink) !important;
  border: 1px solid var(--kx5-line-2) !important;
}

/* Settings panel */
.settings-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 2000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
  background: rgba(5,7,10,0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.settings-panel.open {
  display: flex !important;
}
.settings-dialog {
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  height: auto !important;
  max-height: min(820px, calc(100dvh - 48px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid var(--kx5-line) !important;
  background: var(--kx5-panel) !important;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5) !important;
}
.settings-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 64px !important;
  padding: 18px 24px !important;
  background: var(--kx5-panel) !important;
  border-bottom: 1px solid var(--kx5-line) !important;
}
.settings-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 20px 24px !important;
}
.settings-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}
.settings-section,
.settings-subgroup,
.settings-advanced {
  min-width: 0 !important;
}
.settings-grid-2,
.settings-grid-3 {
  display: grid !important;
  gap: 12px !important;
}
.settings-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.settings-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.settings-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  background: var(--kx5-panel) !important;
  border-top: 1px solid var(--kx5-line) !important;
}
.settings-actions .btn-primary,
.settings-actions .btn-secondary {
  width: auto !important;
  min-width: 132px !important;
}
.settings-header,
.settings-actions,
.settings-section-head-v2,
.settings-advanced-summary,
.settings-subgroup-title {
  border-color: var(--kx5-line) !important;
}
.settings-section-title,
.settings-header h3 {
  color: var(--kx5-ink) !important;
}
.settings-field-help,
.settings-section-sub {
  color: var(--kx5-ink-3) !important;
}
.settings-row-check {
  border: 1px solid var(--kx5-line) !important;
  border-radius: 6px !important;
  background: var(--kx5-bg-2) !important;
}
.settings-estimated-value {
  color: var(--kx5-ink) !important;
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line) !important;
}
.settings-range-value {
  color: var(--kx5-ink-2) !important;
}

@media (max-width: 720px) {
  .settings-panel {
    align-items: stretch !important;
    padding: 10px !important;
  }
  .settings-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
  }
  .settings-header {
    min-height: 56px !important;
    padding: 14px 16px !important;
  }
  .settings-content {
    padding: 14px !important;
  }
  .settings-grid-2,
  .settings-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .settings-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 12px 14px !important;
  }
  .settings-actions .btn-primary,
  .settings-actions .btn-secondary {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Trading dashboard */
.trading-tab-dashboard-shell {
  border: 1px solid var(--kx5-line) !important;
}
.trading-tab-actions {
  gap: 8px !important;
}
.trading-tab-action {
  width: 36px !important;
  height: 36px !important;
}
.trading-tab-action--toggle {
  background: var(--kx5-amber) !important;
  color: var(--kx5-bg) !important;
}

/* History */
.summary,
.equity,
.card {
  border-radius: var(--kx5-r) !important;
}
/* History page — align typography with redesign */
.history-section {
  background: var(--kx5-panel) !important;
  border: 0 !important;
  border-radius: var(--kr-r-lg) !important;
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: var(--kx5-soft-shadow) !important;
}
.history-section-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--kx5-line) !important;
}
.history-section-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--kx5-ink) !important;
}
.section-meta-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--kx5-ink-3) !important;
}
.history-section > .metrics-grid,
.history-section > .health-grid {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 var(--kx5-r) var(--kx5-r) !important;
}
.history-section > .equity-body,
.history-section > .trades-table-wrapper,
.history-section > .symbols-table-wrapper {
  padding: 0 !important;
}
.metric-card,
.health-card {
  background: var(--kx5-panel) !important;
  text-align: left !important;
  padding: 22px 24px !important;
  gap: 6px !important;
}
.metric-label,
.health-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--kx5-ink-3) !important;
}
.metric-value,
.health-value {
  font-family: var(--kx5-mono) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--kx5-ink) !important;
  line-height: 1.15 !important;
}
.metric-value.positive,
.health-value.positive {
  color: var(--kx5-up) !important;
}
.metric-value.negative,
.health-value.negative {
  color: var(--kx5-dn) !important;
}
.metric-unit,
.health-unit {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--kx5-ink-4) !important;
}

/* History range tabs — segmented redesign style */
.history-range-tabs {
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 2px !important;
}
.history-range-tab {
  padding: 4px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.history-range-tab:hover {
  color: var(--kx5-ink) !important;
}
.history-range-tab.is-active {
  background: var(--kx5-panel) !important;
  color: var(--kx5-ink) !important;
}

/* Period select / export / clear — match redesign button family */
.period-select,
.export-btn {
  background: var(--kx5-bg-2) !important;
  border: 1px solid var(--kx5-line-2) !important;
  border-radius: 8px !important;
  color: var(--kx5-ink) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}
.period-select:hover,
.export-btn:hover {
  border-color: var(--kx5-ink-4) !important;
  background: var(--kx5-panel-2) !important;
}
/* Conclusion banner */
.conclusion-banner {
  background: var(--kx5-panel) !important;
  border: 1px solid var(--kx5-line) !important;
  border-radius: var(--kx5-r) !important;
  padding: 16px 24px !important;
  box-shadow: var(--kx5-soft-shadow) !important;
}
.conclusion-banner.warning {
  border-color: rgba(245,165,36,0.30) !important;
}
.conclusion-banner.success {
  border-color: rgba(45,212,126,0.30) !important;
}
.conclusion-text {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--kx5-ink-2) !important;
}

/* Trades table */
.trades-table thead th {
  background: var(--kx5-bg-2) !important;
  border-bottom: 1px solid var(--kx5-line) !important;
  color: var(--kx5-ink-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 12px 18px !important;
}
.trades-table tbody td {
  border-bottom: 1px solid var(--kx5-line) !important;
  padding: 14px 18px !important;
  font-size: 12.5px !important;
  color: var(--kx5-ink-2) !important;
}
.trades-table tbody tr:hover {
  background: var(--kx5-bg-2) !important;
}
.symbols-table thead th {
  background: var(--kx5-bg-2) !important;
  color: var(--kx5-ink-3) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* Mobile */
@media (max-width: 720px) {
  .kx-topbar-shell,
  .topbar {
    padding: 0 14px !important;
    height: 56px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .kx-topbar-l {
    flex: 0 1 auto !important;
    width: auto !important;
    gap: 0 !important;
  }
  .kx-topbar-r,
  .topbar-right {
    flex: 0 0 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
  }
  .kx-primary-nav {
    display: none !important;
  }
  .nav {
    padding: 0 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .main {
    padding: 18px 12px 88px !important;
  }
  .history-main {
    padding: 18px 12px 88px !important;
  }
  .history-container {
    gap: 16px !important;
  }
  .kx-mobile-tabs {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 120 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background: rgba(11,13,16,0.98) !important;
    border-top: 1px solid var(--kx5-line) !important;
  }
  .kx-mobile-tabs a {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    color: var(--kx5-ink-3) !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
  }
  .kx-mobile-tabs a.is-active {
    color: var(--kx5-amber) !important;
  }
  .kx-mobile-tabs svg {
    width: 18px !important;
    height: 18px !important;
  }
  .home-hero {
    padding: 22px 18px !important;
  }
  .home-hero-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .home-hero-title {
    font-size: 21px !important;
  }
  .home-hero-actions {
    width: 100% !important;
  }
  .home-hero-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .home-kpis {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 76% !important;
    overflow-x: auto !important;
    border: 0 !important;
    background: transparent !important;
  }
  .home-kpi {
    border: 1px solid var(--kx5-line) !important;
    border-radius: var(--kx5-r) !important;
  }
  .home-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .home-sidebar {
    gap: 16px !important;
  }
  .control-bar {
    margin: 12px 0 !important;
  }
  .control-bar-tabs {
    overflow-x: auto !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .control-bar-tab {
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
  .control-panel-body {
    padding: 12px !important;
  }
  .scanner-tools-grid,
  .body-grid,
  .settings-shell,
  .grid {
    grid-template-columns: 1fr !important;
  }
  .loading-overlay {
    left: 14px !important;
    right: 14px !important;
    bottom: 76px !important;
    width: auto !important;
  }
  .profile-section-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }
  .profile-section-bar {
    left: 18px !important;
    top: 18px !important;
    height: 40px !important;
  }
  .profile-section-stats {
    justify-content: flex-start !important;
    padding-left: 18px !important;
  }
  .profile-section-title {
    font-size: 17px !important;
  }
  .profile-section-desc {
    font-size: 12px !important;
  }
  .signal-list-head {
    display: none !important;
  }
  .signal-table {
    min-width: 0 !important;
  }
  .signal-list .signal-row {
    grid-template-columns: 64px minmax(0, 1fr) 86px !important;
    grid-template-areas:
      "score symbol status"
      "score price status" !important;
    gap: 8px 12px !important;
    padding: 16px 18px !important;
  }
  .signal-list .signal-score-cell {
    grid-area: score !important;
  }
  .signal-list .signal-symbol-cell {
    grid-area: symbol !important;
  }
  .signal-list .signal-last-cell {
    grid-area: price !important;
    text-align: left !important;
  }
  .signal-list .signal-delta-cell {
    grid-area: status !important;
  }
  .signal-list .signal-dir-cell {
    display: none !important;
  }
  .signal-status-chip {
    min-width: 74px !important;
  }
  .signal-symbol-sub {
    display: block !important;
  }
  .signal-detail-row td {
    padding: 0 18px 14px !important;
  }
  .tc2-score-metrics,
  .tc2-signal-strips {
    grid-template-columns: 1fr !important;
  }
  .tc2-score-metric-value {
    font-size: 22px !important;
  }
  .tc2-confirm-row {
    grid-template-columns: 1fr !important;
  }
  .trades-table-wrapper,
  .symbols-table-wrapper {
    overflow: visible !important;
  }
  .trades-table,
  .trades-table thead,
  .trades-table tbody,
  .trades-table tr,
  .trades-table td,
  .symbols-table,
  .symbols-table thead,
  .symbols-table tbody,
  .symbols-table tr,
  .symbols-table td {
    display: block !important;
    width: 100% !important;
  }
  .trades-table thead,
  .symbols-table thead {
    display: none !important;
  }
  .trades-table tbody,
  .symbols-table tbody {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Trade history — 3-line tappable card: headline / meta / reason */
  .trades-table tr.trade-row {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr 1.1fr 0.7fr !important;
    grid-template-areas:
      "symbol side   pnl     pnl"
      "time   score  winrate r"
      "reason reason reason  reason" !important;
    align-items: center !important;
    gap: 9px 8px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--kx5-line) !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  .trades-table tr.trade-row.is-expanded {
    border-color: rgba(245, 165, 36, 0.4) !important;
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .symbols-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 14px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--kx5-line) !important;
    background: transparent !important;
  }
  .trades-table tr.trade-row td:not(.td-side),
  .symbols-table td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    width: auto !important;
  }
  /* Headline row */
  .trades-table .td-symbol {
    grid-area: symbol !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--kx5-ink) !important;
  }
  .trades-table .td-side {
    grid-area: side !important;
    justify-self: start !important;
    width: auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--kx5-ink-3) !important;
    padding: 2px 9px !important;
    border: 1px solid var(--kx5-line) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .trades-table .td-side.side-long {
    color: var(--kr-up) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
    background: rgba(74, 222, 128, 0.08) !important;
  }
  .trades-table .td-side.side-short {
    color: var(--kr-dn) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    background: rgba(248, 113, 113, 0.08) !important;
  }
  .trades-table .td-pnl {
    grid-area: pnl !important;
    justify-self: end !important;
    text-align: right !important;
    font-size: 16px !important;
    font-family: var(--kx5-mono) !important;
  }
  /* Meta row — tiny labels keep bare numbers legible without a header */
  .trades-table .td-time {
    grid-area: time !important;
    font-size: 11px !important;
    color: var(--kx5-ink-3) !important;
    white-space: nowrap !important;
  }
  .trades-table .td-score {
    grid-area: score !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--kx5-ink) !important;
  }
  .trades-table .td-winrate {
    grid-area: winrate !important;
    font-size: 12px !important;
    color: var(--kx5-ink-3) !important;
  }
  .trades-table .td-r {
    grid-area: r !important;
    font-size: 13px !important;
    color: var(--kx5-ink-2) !important;
  }
  .trades-table .td-score::before {
    content: "分 " !important;
    color: var(--kx5-ink-3) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
  }
  .trades-table .td-r::before {
    content: "R " !important;
    color: var(--kx5-ink-3) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
  }
  /* Reason row */
  .trades-table .td-reason {
    grid-area: reason !important;
    font-size: 11px !important;
    color: var(--kx5-ink-3) !important;
    border-top: 1px solid var(--kx5-line) !important;
    padding-top: 8px !important;
  }
  .symbols-table td:first-child {
    grid-column: 1 !important;
    font-size: 15px !important;
    color: var(--kx5-ink) !important;
  }
  .symbols-table td:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: right !important;
    font-family: var(--kx5-mono) !important;
  }
  .symbols-table td:not(:first-child):not(:last-child) {
    grid-column: 1 / -1 !important;
    color: var(--kx5-ink-3) !important;
    font-size: 12px !important;
  }
  .trade-detail-row td {
    display: block !important;
    padding: 14px 18px !important;
  }

  /* Daily PnL — one compact labelled card per day instead of 6 bare stacked
     cells. Headline: date + net PnL; then realized / fee / funding as labelled
     mini-stats; then the per-coin chips. */
  .daily-pnl-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "date     date  net"
      "realized fee   funding"
      "coins    coins coins" !important;
    align-items: center !important;
    gap: 12px 10px !important;
    padding: 13px 14px !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--kx5-line) !important;
    border-radius: 12px !important;
  }
  .daily-pnl-table tbody tr td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .daily-pnl-table .td-time {
    grid-area: date !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--kx5-ink-2) !important;
  }
  .daily-pnl-table .td-net {
    grid-area: net !important;
    text-align: right !important;
  }
  .daily-pnl-table .td-realized { grid-area: realized !important; }
  .daily-pnl-table .td-fee { grid-area: fee !important; }
  .daily-pnl-table .td-funding { grid-area: funding !important; }
  /* Field labels */
  .daily-pnl-table .td-net::before,
  .daily-pnl-table .td-realized::before,
  .daily-pnl-table .td-fee::before,
  .daily-pnl-table .td-funding::before {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--kx5-ink-3) !important;
  }
  .daily-pnl-table .td-net::before { content: "淨盈虧" !important; }
  .daily-pnl-table .td-realized::before { content: "已實現" !important; }
  .daily-pnl-table .td-fee::before { content: "手續費" !important; }
  .daily-pnl-table .td-funding::before { content: "資金費" !important; }
  .daily-pnl-table .td-net .pnl-value { font-size: 17px !important; }
  .daily-pnl-table .td-realized .pnl-value,
  .daily-pnl-table .td-fee .pnl-value,
  .daily-pnl-table .td-funding .pnl-value { font-size: 13px !important; }
  .daily-pnl-table .td-coins {
    grid-area: coins !important;
    min-width: 0 !important;
    border-top: 1px solid var(--kx5-line) !important;
    padding-top: 10px !important;
  }

  .no-data {
    display: block !important;
    width: 100% !important;
    padding: 18px !important;
  }
}

/* Global spacing pass: keep the dashboard dense enough to read in one viewport. */
:root {
  --kx5-page-x: clamp(14px, 1.5vw, 22px);
  --kx5-page-top: 18px;
  --kx5-page-bottom: 28px;
  --kx5-section-gap: 14px;
  --kx5-card-pad-x: 18px;
  --kx5-card-pad-y: 14px;
}

.main,
.history-main {
  padding: var(--kx5-page-top) var(--kx5-page-x) var(--kx5-page-bottom) !important;
}

.history-container {
  gap: var(--kx5-section-gap) !important;
}

.home-hero {
  margin: 0 0 var(--kx5-section-gap) !important;
  padding: 22px var(--kx5-card-pad-x) !important;
}

.home-hero-toolbar {
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.home-hero-status {
  gap: 12px !important;
}

.home-kpi {
  padding: 16px var(--kx5-card-pad-x) !important;
}

.control-bar {
  margin: 0 0 var(--kx5-section-gap) !important;
}

.control-bar-panels {
  padding: 16px !important;
}

.control-bar.is-collapsed {
  margin-bottom: var(--kx5-section-gap) !important;
}

.control-panel-body {
  padding: var(--kx5-card-pad-y) var(--kx5-card-pad-x) !important;
}

.home-grid {
  gap: var(--kx5-section-gap) !important;
  margin-top: 0 !important;
}

.home-sidebar {
  gap: var(--kx5-section-gap) !important;
}

.home-side-card-hd,
.home-position-row,
.home-activity-row,
.home-side-empty {
  padding-left: var(--kx5-card-pad-x) !important;
  padding-right: var(--kx5-card-pad-x) !important;
}

.card-hd,
.focus-section-header,
.card-header,
.tools-hd,
.sig-panel-hd {
  padding: 14px var(--kx5-card-pad-x) !important;
}

.focus-aux,
.focus-aux:not(:empty) {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
  padding: 0 var(--kx5-card-pad-x) !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

.short-diag:not([open]) > .no-signal-debug-body {
  display: none !important;
}

.short-diag[open] > .no-signal-debug-body {
  display: block !important;
}

.profile-section {
  margin-top: 14px !important;
}

.sig-panel-sub {
  padding: 10px var(--kx5-card-pad-x) 8px !important;
}

.signal-table-caption {
  padding: 10px var(--kx5-card-pad-x) !important;
}

.signal-list-head {
  gap: 14px !important;
  padding: 9px var(--kx5-card-pad-x) !important;
}

.signal-list .signal-row {
  gap: 14px !important;
  min-height: 68px !important;
  padding: 14px var(--kx5-card-pad-x) !important;
}

.profile-section-head {
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px var(--kx5-card-pad-x) !important;
}

.profile-section-bar {
  left: var(--kx5-card-pad-x) !important;
  top: 16px !important;
  height: 34px !important;
}

.profile-section-copy {
  padding-left: 16px !important;
}

.profile-section-title {
  font-size: 16px !important;
}

.profile-section-desc {
  margin-top: 4px !important;
}

.profile-section-stats {
  gap: 8px !important;
}

.grid-mini-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto !important;
  gap: 4px 16px !important;
  padding: 10px 16px !important;
  align-items: center !important;
}

.grid-mini-top {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.grid-mini-mid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.grid-mini-bot {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  gap: 6px !important;
}

.grid-mini-note {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 1px !important;
}

.grid-mini-bias {
  padding: 2px 7px !important;
}

.signal-row-details {
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}

.signal-detail-row td {
  padding: 0 var(--kx5-card-pad-x) 14px !important;
}

.signal-row-details-summary {
  margin-bottom: 2px !important;
}

.signal-row-details-summary--hidden {
  margin: -1px !important;
}

.signal-row-details-body {
  gap: 10px !important;
  padding-top: 10px !important;
}

.tc2-card-details {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.tc2-card-details-summary {
  padding: 12px 14px !important;
}

.tc2-card-details-inner {
  padding: 14px !important;
}

.trading-dashboard-body > * + * {
  margin-top: 18px !important;
}

.trading-orders {
  margin-top: 18px !important;
  padding-top: 18px !important;
}

.trading-orders h4,
.automation-health h4,
.strategy-learning h4,
.trading-dynamic-sl h4 {
  margin: 0 0 14px !important;
  line-height: 1.35 !important;
}

#trading-orders-table {
  margin-bottom: 18px !important;
}

.automation-health {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--kx5-line) !important;
}

.automation-health .health-grid,
.strategy-learning .learning-grid {
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.automation-health .health-card,
.strategy-learning .learning-card {
  padding: 14px !important;
}

.history-section-header {
  margin-bottom: 12px !important;
  padding: 16px var(--kx5-card-pad-x) !important;
}

.history-section > .metrics-grid,
.history-section > .health-grid,
.history-section > .equity-body,
.history-section > .trades-table-wrapper,
.history-section > .symbols-table-wrapper {
  margin-top: 0 !important;
}

.history-section > .metrics-grid,
.history-section > .health-grid {
  border-radius: 0 0 var(--kx5-r) var(--kx5-r) !important;
}

.history-section > .equity-body,
.history-section > .trades-table-wrapper,
.history-section > .symbols-table-wrapper {
  padding-top: 0 !important;
}

.settings-content {
  padding-top: 24px !important;
}

.settings-section + .settings-section,
.settings-section + .settings-advanced,
.settings-advanced + .settings-advanced {
  margin-top: 16px !important;
}

.scanner-tools-grid,
.body-grid,
.settings-shell,
.grid,
.trades-grid {
  gap: var(--kx5-section-gap) !important;
}

.footer {
  min-height: 0 !important;
  padding: 8px 0 0 !important;
}

@media (max-width: 720px) {
  :root {
    --kx5-page-x: 12px;
    --kx5-page-top: 14px;
    --kx5-page-bottom: 74px;
    --kx5-section-gap: 12px;
    --kx5-card-pad-x: 14px;
    --kx5-card-pad-y: 12px;
  }

  .home-hero {
    padding: 18px var(--kx5-card-pad-x) !important;
  }

  .home-hero-toolbar {
    margin-bottom: 14px !important;
  }

  .signal-list .signal-row {
    min-height: 0 !important;
    padding: 13px var(--kx5-card-pad-x) !important;
  }

  .profile-section-head {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px var(--kx5-card-pad-x) !important;
  }

  .grid-mini-row {
    grid-template-columns: 1fr !important;
  }

  .grid-mini-top,
  .grid-mini-mid,
  .grid-mini-bot,
  .grid-mini-note {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .grid-mini-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}


/* ===== css/kairion-redesign.css ===== */
/* ============================================================
   KAIRION · Production redesign override (MONO direction)
   Replaces the previous override. Loaded LAST so we win.

   Imports my prototype's MONO design system:
   - Tokens from theme-mono.css (renamed --kx-* → --kr-*)
   - Component rules from base.css (adapted to existing class names)

   Hard rules (see DESIGN_SPEC.md):
   1. Mono accent — only P&L is colored (green/red); accent purple sparingly
   2. Layering by border + bg shift; shadow ONLY on modals / toasts
   3. JetBrains Mono for ALL numbers; tabular-nums; no padding shifts
   4. No emoji, no large gradients (except hero corner glow + sparkline fade)
   ============================================================ */

/* Fonts: Inter + JetBrains Mono — assumed loaded by another stylesheet
   (style.css / kx-v5.css already pull from Google Fonts). If not, the
   font-family below falls back to system sans / monospace. */

/* Design tokens moved to css/tokens.css (loaded first). See that file
   for the canonical --kr-* :root + docs/design-language.md. */

/* ─── Root / body reset ───────────────────────────────── */

html, body {
  background: var(--kr-bg) !important;
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--kr-violet);
  color: #fff;
  border-radius: var(--kr-r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .2s;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body::before { content: none !important; }

.app, .main, .history-main { background: var(--kr-bg) !important; }
.main, .history-main {
  max-width: 1440px !important;
  padding: 28px 28px 96px !important;
}

/* All numbers get mono + tabular-nums when matching these atoms */
[class*='-mono'],
.signal-score-num, .signal-last-cell, .signal-row-meta,
.home-hero-title, .home-kpi-value,
.home-position-pnl, .home-activity-amt, .home-activity-time,
.metric-value, .health-value,
.kx-clock,
#refresh-info, #th-compact {
  font-family: var(--kr-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─── Top bar ──────────────────────────────────────────── */

.kx-topbar-shell, .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  padding: 0 28px !important;
  background: color-mix(in srgb, var(--kr-bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--kr-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.kx-topbar-l { display: flex !important; align-items: center !important; gap: 24px !important; min-width: 0 !important; }
.kx-topbar-r, .topbar-right { display: flex !important; align-items: center !important; gap: 10px !important; }

.market-ticker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 0 0 8px;
}
.market-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  font-family: var(--kr-mono) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.market-ticker-symbol {
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
.market-ticker-price {
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.market-ticker-change {
  font-size: 11px !important;
  font-weight: 600 !important;
}
.market-ticker-item.is-up .market-ticker-change { color: var(--kr-up) !important; }
.market-ticker-item.is-down .market-ticker-change { color: var(--kr-dn) !important; }
.market-ticker-item.is-loading .market-ticker-price,
.market-ticker-item.is-loading .market-ticker-change {
  color: var(--kr-ink-3) !important;
}

.kx-logo, .logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: inherit;
  text-decoration: none;
}
.kx-logo[href] {
  border-radius: var(--kr-r-sm);
  cursor: pointer;
}
.kx-logo[href]:focus-visible {
  outline: 2px solid var(--kr-violet);
  outline-offset: 4px;
}
.kx-logo-mark, .logo-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 9px !important;
  display: grid !important; place-items: center !important;
  font-weight: 700 !important; font-size: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%) !important;
  color: var(--kr-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(0,0,0,0.4),
    0 0 0 1px rgba(139,113,255,0.18),
    0 0 14px -2px rgba(139,113,255,0.45) !important;
}
.kx-logo-text {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
}

.kx-primary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--kr-line) !important;
  margin-left: 4px !important;
  height: 30px !important;
}
.kx-primary-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.kx-primary-nav-link:hover { color: var(--kr-ink) !important; background: var(--kr-line) !important; }
.kx-primary-nav-link.is-active {
  color: var(--kr-ink) !important;
  background: var(--kr-line) !important;
  border-color: transparent !important;
}

/* Live badge + clock */
.kx-clock, .live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
}
.kx-dot, .live-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--kr-up) !important;
  box-shadow: 0 0 0 3px var(--kr-up-dim) !important;
  animation: kr-pulse 2s ease-in-out infinite !important;
}
@keyframes kr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.live-badge-time, #refresh-info { color: var(--kr-ink) !important; }

/* Icon buttons (settings, etc.) */
.kx-icon-btn, .topbar-nav-btn, .settings-nav-btn {
  width: 44px !important; height: 44px !important;
  display: grid !important; place-items: center !important;
  border: 1px solid var(--kr-line) !important;
  background: var(--kr-surface) !important;
  color: var(--kr-ink-2) !important;
  border-radius: var(--kr-r-sm) !important;
  transition: color .15s, background .15s, border-color .15s !important;
}
.kx-icon-btn:hover, .topbar-nav-btn:hover, .settings-nav-btn:hover {
  color: var(--kr-ink) !important;
  background: var(--kr-surface-2) !important;
  border-color: var(--kr-line-2) !important;
}

/* ─── Hero (戰情室) ────────────────────────────────────── */

.home-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 30px 32px !important;
  margin: 0 0 24px !important;
  border: 0 !important;
  border-radius: var(--kr-r-xl) !important;
  background:
    radial-gradient(80% 60% at 100% 0%, var(--kr-violet-soft), transparent 55%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.04), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 32%),
    var(--kr-surface) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(255,255,255,0.02) inset,
    0 20px 60px rgba(0,0,0,0.40) !important;
}
.home-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at top right, var(--kr-violet-dim), transparent 60%);
  pointer-events: none;
  opacity: 0.75;
}

.home-hero-toolbar {
  position: relative !important; z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}
.home-hero-status {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.home-status-light {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--kr-up) !important;
  box-shadow: 0 0 0 4px var(--kr-up-dim) !important;
  margin-top: 14px !important;
  flex-shrink: 0 !important;
  animation: kr-pulse 2s ease-in-out infinite !important;
}
.home-status-light.is-paused { background: var(--kr-violet) !important; box-shadow: 0 0 0 4px var(--kr-violet-dim) !important; }
.home-status-light.is-off { background: var(--kr-ink-4) !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.04) !important; animation: none !important; }

.home-hero--positions .home-status-light {
  display: none !important;
}

.home-hero-title-wrap { min-width: 0 !important; position: relative !important; }
.home-hero--positions .home-hero-title-wrap::before {
  content: none !important;
  display: none !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--kr-violet) !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
  font-family: var(--kr-sans) !important;
  font-weight: 600 !important;
}
.home-hero-headline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.home-hero-title {
  font-family: var(--kr-mono) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.home-hero-title.pos { color: var(--kr-up) !important; background: transparent !important; }
.home-hero-title.neg { color: var(--kr-dn) !important; background: transparent !important; }
/* Noise-level book P&L (see pnlTone): stay neutral so the headline doesn't
   scream over a few cents. Sign in the text still shows direction. */
.home-hero-title.is-flat { color: var(--kr-ink) !important; background: transparent !important; }

.home-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
  font-variant-numeric: tabular-nums !important;
}
.home-hero-chip.neg { background: var(--kr-dn-dim) !important; color: var(--kr-dn) !important; }
.home-hero-chip.is-hidden { display: none; }

.home-hero-sub {
  margin-top: 12px !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
}
.home-hero-sub .pos { color: var(--kr-up) !important; font-variant-numeric: tabular-nums !important; }
.home-hero-sub .neg { color: var(--kr-dn) !important; font-variant-numeric: tabular-nums !important; }

.home-decision-summary {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-width: 720px;
}
.home-decision-main {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--kr-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kr-surface) 72%, transparent) !important;
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.home-decision-summary.tone-good .home-decision-main {
  border-color: var(--kr-up-line);
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-decision-summary.tone-warn .home-decision-main {
  border-color: var(--kr-violet-line);
  color: var(--kr-violet-2) !important;
  background: var(--kr-violet-dim) !important;
}
.home-decision-summary.tone-danger .home-decision-main {
  border-color: var(--kr-dn-line);
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}
.home-decision-main {
  display: none;
}
.home-decision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-decision-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--kr-line);
  border-radius: 999px;
  color: var(--kr-ink-3) !important;
  background: transparent !important;
  font-family: var(--kr-mono) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  opacity: 0.85;
}

.home-hero-actions {
  position: relative !important; z-index: 1 !important;
  display: flex !important; gap: 10px !important; flex-shrink: 0 !important;
  align-items: center !important;
}

/* Hide emergency close when no positions */
.home-hero--empty .home-hero-actions .btn-danger {
  display: none !important;
}
.home-hero-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line);
  color: var(--kr-ink-2) !important;
}
.home-hero-state-pill.is-running {
  border-color: rgba(74,222,128,0.35);
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.home-hero-state-pill.is-paused {
  border-color: rgba(167,139,250,0.4) !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet) !important;
}
.home-hero-state-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}
.home-hero-state-pill.is-off .home-hero-state-dot { background: var(--kr-ink-4) !important; box-shadow: none !important; }

/* ─── Position cards row ──────────────────────────────────── */
.home-positions {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 14px;
}
.home-positions-empty {
  grid-column: 1 / -1;
  padding: 22px;
  text-align: center !important;
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  background: var(--kr-bg-2) !important;
  border: 1px dashed var(--kr-line);
  border-radius: var(--kr-r-md);
}

.home-position-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  background: var(--kr-surface) !important;
  border: 0 !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: var(--kr-shadow-md) !important;
  overflow: hidden !important;
}
.home-position-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--kr-up) !important;
}
.home-position-card.short::before { background: var(--kr-dn) !important; }

.home-position-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-position-card-title {
  font-family: var(--kr-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--kr-ink) !important;
}
.home-position-card-tag {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.home-position-card-tag.short { background: var(--kr-dn-dim) !important; color: var(--kr-dn) !important; }
.home-position-card-hold {
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--kr-line);
  color: var(--kr-ink-2) !important;
  background: rgba(255,255,255,0.026) !important;
  font-family: var(--kr-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.home-position-card-trailing {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--kr-line);
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--kr-ink-2) !important;
  background: rgba(255,255,255,0.035) !important;
  white-space: nowrap !important;
}
.home-position-card-trailing.tone-good {
  border-color: var(--kr-up-line);
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-position-card-trailing.tone-active {
  border-color: var(--kr-violet-line);
  color: var(--kr-violet-2) !important;
  background: var(--kr-violet-dim) !important;
}
.home-position-card-trailing.tone-muted {
  color: var(--kr-ink-3) !important;
}
.home-position-card-trailing.tone-danger {
  border-color: var(--kr-dn-line);
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}
.home-position-card-hd-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.home-position-card-protection {
  padding: 3px 7px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kr-line) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--kr-ink-2) !important;
  background: rgba(255,255,255,0.035) !important;
  white-space: nowrap !important;
}
.home-position-card-close {
  min-width: 50px;
  min-height: 0;
  padding: 3px 7px;
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: 4px;
  background: var(--kr-dn-dim);
  color: var(--kr-dn);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.home-position-card-close:hover {
  background: color-mix(in srgb, var(--kr-dn-dim) 80%, var(--kr-dn));
  border-color: var(--kr-dn);
  color: #fff;
}
.home-position-card-close:focus-visible {
  outline: 2px solid var(--kr-dn);
  outline-offset: 2px;
}

/* Quiet sub-line: hold time + trailing status as muted text, not bordered
   badges. Keeps the header to two meaningful chips (direction + protection)
   per docs/design-language.md §9. */
.home-position-card-submeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kr-mono) !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kr-ink-3) !important;
}
.hpc-sub-sep { color: var(--kr-ink-4) !important; }
.hpc-sub-trailing.tone-good { color: var(--kr-up) !important; }
.hpc-sub-trailing.tone-active { color: var(--kr-violet-2) !important; }
.hpc-sub-trailing.tone-danger { color: var(--kr-dn) !important; }
.hpc-sub-trailing.tone-muted { color: var(--kr-ink-3) !important; }
.home-position-card-meta dd.hpc-realized {
  font-weight: 600 !important;
}
.home-position-card-meta dd.hpc-realized.pos { color: var(--kr-up) !important; background: transparent !important; }
.home-position-card-meta dd.hpc-realized.neg { color: var(--kr-dn) !important; background: transparent !important; }
.home-position-card-protection.ok {
  border-color: rgba(74,222,128,0.32) !important;
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-position-card-protection.warn {
  border-color: var(--kr-warn-line) !important;
  color: var(--kr-warn) !important;
  background: var(--kr-warn-dim) !important;
}
.home-position-card-protection.danger {
  border-color: rgba(248,113,113,0.35) !important;
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}
.home-position-card-spark {
  flex: 1;
  height: 26px;
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--kr-up) 12%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--kr-up) 28%, transparent) 6px 7px) !important;
  border-radius: 4px;
  opacity: 0.45;
  min-width: 0;
}
.home-position-card.short .home-position-card-spark {
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--kr-dn) 12%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--kr-dn) 28%, transparent) 6px 7px) !important;
}

.home-position-card-pnl {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.home-position-card-pnl-value {
  font-family: var(--kr-mono) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-card-pnl-pct {
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-card-pnl-value.pos, .home-position-card-pnl-pct.pos { color: var(--kr-up) !important; background: transparent !important; }
.home-position-card-pnl-value.neg, .home-position-card-pnl-pct.neg { color: var(--kr-dn) !important; background: transparent !important; }
/* Noise-level move (see pnlTone): neutral ink instead of full green/red. The
   +/- sign in the text still carries direction. */
.home-position-card-pnl-value.is-flat { color: var(--kr-ink) !important; background: transparent !important; }
.home-position-card-pnl-pct.is-flat { color: var(--kr-ink-3) !important; background: transparent !important; }
/* Hero sub-line inline pos/neg spans should be transparent too — global
   .neg / .pos atoms in kx-v5.css add a dim red/green backplate that's
   unwanted on inline summary text. */
.home-hero-sub .pos, .home-hero-sub .neg { background: transparent !important; }

.home-position-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}
.home-position-alert {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--kr-line);
  border-radius: 999px;
  color: var(--kr-ink-2) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.home-position-alert.tone-good {
  border-color: var(--kr-up-line);
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-position-alert.tone-warn {
  border-color: var(--kr-violet-line);
  color: var(--kr-violet-2) !important;
  background: var(--kr-violet-dim) !important;
}
.home-position-alert.tone-danger {
  border-color: var(--kr-dn-line);
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}

.home-position-card-meta {
  display: grid;
  /* 6-col base, every field spanning 2 → three equal columns shared by both
     rows, so the second row lines up under the first: TP1 under 本金 and
     止損 under 進場 (the cell under 標記 is intentionally left empty). */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}
.home-position-card-meta > div { grid-column: span 2; }
.home-position-card-meta dt {
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kr-ink-3) !important;
  margin-bottom: 2px;
}
.home-position-card-meta dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kr-ink) !important;
}
.home-position-card-meta dd span {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
/* Hierarchy: reference figures (本金/進場/標記) sit one ink-step quieter than
   the decision-critical prices (TP1/止損) so the eye gets an anchor instead of
   a flat wall of equally-bright numbers. Still 11:1 — comfortably AA. */
.home-position-card-meta dd.hpc-ref {
  color: var(--kr-ink-2) !important;
  font-weight: 400 !important;
}
/* Annotation: the projected P&L at TP1 / stop carries profit-loss meaning, so
   it earns the semantic colour (dim per "綠紅只給數字"); the distance % stays
   neutral grey. */
.home-position-card-meta dd .hpc-meta-proj.pos { color: var(--kr-up) !important; }
.home-position-card-meta dd .hpc-meta-proj.neg { color: var(--kr-dn) !important; }

.home-position-card-btn {
  flex: 0 0 auto !important;
  padding: 8px 16px !important;
  background: var(--kr-bg) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 6px !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
}
.home-position-card-btn:hover {
  background: var(--kr-bg-3, rgba(255,255,255,0.04)) !important;
  color: var(--kr-ink) !important;
  border-color: color-mix(in srgb, var(--kr-line) 60%, var(--kr-ink-3)) !important;
}
.home-position-card-btn--danger {
  background: var(--kr-dn-dim) !important;
  border-color: rgba(248,113,113,0.35) !important;
  color: var(--kr-dn) !important;
}
.home-position-card-btn--danger:hover {
  background: color-mix(in srgb, var(--kr-dn-dim) 80%, var(--kr-dn)) !important;
  color: #fff !important;
  border-color: var(--kr-dn) !important;
}

@media (max-width: 960px) {
  .home-positions { grid-template-columns: 1fr; }
}

/* KPI strip */
.home-kpis {
  position: relative !important; z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 !important;
  background: var(--kr-line) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  overflow: hidden !important;
}
.home-kpi {
  background: var(--kr-bg-2) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.home-kpi-label {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kr-ink-3) !important;
  font-weight: 600 !important;
}
.home-kpi-value {
  font-family: var(--kr-mono) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.01em !important;
}
.home-kpi-sub {
  font-size: 11.5px !important;
  color: var(--kr-ink-3) !important;
}

/* ─── Buttons ──────────────────────────────────────────── */

.btn, .btn-primary, .btn-secondary,
.preset-btn, .symbol-add-btn,
.single-analyzer-btn,
.trading-tab-action,
.link-btn, .export-btn,
.history-range-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  border-radius: var(--kr-r-sm) !important;
  border: 1px solid var(--kr-line) !important;
  background: var(--kr-surface-2) !important;
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition:
    background var(--kr-motion-fast) var(--kr-ease-out),
    border-color var(--kr-motion-fast) var(--kr-ease-out),
    color var(--kr-motion-fast) var(--kr-ease-out),
    transform var(--kr-motion-instant) var(--kr-ease-out),
    opacity var(--kr-motion-fast) var(--kr-ease-out) !important;
  cursor: pointer !important;
}
.btn:hover, .btn-secondary:hover,
.preset-btn:hover, .symbol-add-btn:hover,
.single-analyzer-btn:hover, .trading-tab-action:hover,
.link-btn:hover, .export-btn:hover,
.history-range-tab:hover {
  background: var(--kr-elev) !important;
  border-color: var(--kr-line-2) !important;
  color: var(--kr-ink) !important;
}
.btn:active, .btn-primary:active,
button.kr-is-pressed, [role="button"].kr-is-pressed {
  transform: translateY(1px) scale(.98) !important;
}

button.is-busy,
button[aria-busy="true"] {
  cursor: wait !important;
  opacity: .72 !important;
}
button.is-busy::after,
button[aria-busy="true"]::after {
  content: '' !important;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  border: 2px solid currentColor !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  animation: kr-button-spin .7s linear infinite !important;
}
@keyframes kr-button-spin { to { transform: rotate(360deg); } }

/* Primary — white pill (mono accent).
   Use higher-specificity selectors so we always override kx-v5.css.
   NOTE: btn-primary is kept out of this list so we don't affect the trading dashboard. */
body #home-toggle-btn,
body .symbol-add-btn,
body .single-analyzer-btn,
body .pr-form-actions button[type="submit"] {
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: var(--kr-bg) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.3) !important;
}
body #home-toggle-btn:hover,
body .symbol-add-btn:hover,
body .single-analyzer-btn:hover,
body .pr-form-actions button[type="submit"]:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  color: var(--kr-bg) !important;
}

/* Toggle "on" state — show automation running in soft green */
#home-toggle-btn[aria-pressed="true"] {
  background: var(--kr-up-dim) !important;
  border-color: var(--kr-up-line) !important;
  color: var(--kr-up) !important;
  box-shadow: none !important;
}
#home-toggle-btn[aria-pressed="true"]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kr-up); margin-right: 4px;
  animation: kr-pulse 1.6s ease-in-out infinite;
}

/* Danger — emergency close */
.btn-danger, .trading-tab-action--kill {
  background: var(--kr-dn-dim) !important;
  border-color: var(--kr-dn-line) !important;
  color: var(--kr-dn) !important;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--kr-dn) 18%, transparent) !important;
  color: var(--kr-dn) !important;
}
.btn-danger::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kr-dn); display: inline-block; margin-right: 2px;
}

.link-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 8px !important;
  color: var(--kr-violet-2) !important;
  font-size: 12px !important;
}
.link-btn:hover { color: var(--kr-violet-2) !important; background: var(--kr-violet-soft) !important; text-decoration: none !important; }

.preset-btn.is-active,
.history-range-tab.is-active {
  background: var(--kr-violet-dim) !important;
  border-color: var(--kr-violet-line) !important;
  color: var(--kr-violet-2) !important;
}

/* ─── Inputs / selects ─────────────────────────────────── */

input, select, textarea,
.symbol-input,
.single-analyzer-input,
.single-analyzer-select,
.period-select {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: var(--kr-r-sm) !important;
  min-height: 34px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus,
.symbol-input:focus,
.single-analyzer-input:focus,
.single-analyzer-select:focus {
  outline: none !important;
  border-color: var(--kr-violet-line) !important;
  box-shadow: 0 0 0 3px var(--kr-violet-soft) !important;
}
input::placeholder { color: var(--kr-ink-3) !important; }

/* ─── Control bar (4 tabs) ─────────────────────────────── */

.control-bar {
  margin: 0 0 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0) 35%),
    var(--kr-surface) !important;
  border: 0 !important;
  border-radius: var(--kr-r-lg) !important;
  overflow: visible !important;
  box-shadow: var(--kr-shadow-md) !important;
}
.control-bar-tabs {
  display: flex !important;
  align-items: center !important;
  padding: 16px 18px !important;
  gap: 14px !important;
  background: var(--kr-bg-2) !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
.control-bar-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.control-bar-picker-label {
  flex: 0 0 auto;
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
.control-bar-select-wrap {
  position: relative;
  flex: 0 1 220px;
  min-width: 150px;
}
.control-bar-select-wrap::after {
  content: none;
}
.control-bar-select-native {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.control-mode-button {
  width: 100% !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 13px 0 15px !important;
  border: 1px solid var(--kr-line-2) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--kr-surface) 82%, transparent) !important;
  color: var(--kr-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.control-mode-button:hover,
.control-mode-button.is-open {
  background: var(--kr-surface-2) !important;
  border-color: var(--kr-violet-line) !important;
}
.control-mode-button:focus-visible {
  border-color: var(--kr-violet-line) !important;
  box-shadow: 0 0 0 3px var(--kr-violet-soft) !important;
}
.control-mode-button-icon {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  transition: transform .15s;
}
.control-mode-button.is-open .control-mode-button-icon {
  transform: rotate(180deg) !important;
}
.control-mode-list {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--kr-line-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--kr-bg-2) 96%, black) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(139,113,255,.08);
}
.control-mode-list[hidden] {
  display: none;
}
.control-mode-option {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.control-mode-option:hover,
.control-mode-option:focus-visible {
  background: var(--kr-line) !important;
  color: var(--kr-ink) !important;
  outline: none !important;
}
.control-mode-option.is-selected {
  background: var(--kr-violet-soft) !important;
  color: var(--kr-ink) !important;
}

/* ─── Reusable custom select (js/customSelect.js) ──────────
   Upgrades native .period-select dropdowns to the control-mode pill+listbox
   look. Visual classes (control-mode-*) are reused; only layout differs. */
.kx-select {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  min-width: 150px !important;
}
.kx-select > select { display: none; }
.kx-select .kx-select-button { width: 100% !important; }
.kx-select .kx-select-list { min-width: 100%; }

/* Ensure custom selects fill their container inside forms */
.pr-group-fields .kx-select,
.single-analyzer-field .kx-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
.pr-group-fields .kx-select .control-mode-button,
.single-analyzer-field .kx-select .control-mode-button {
  min-height: 44px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.control-bar-picker-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  color: var(--kr-ink-3) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
}
.control-bar-tablist {
  display: none;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.control-bar-tab {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 16px 18px !important;
  min-height: 64px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--kr-line) !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  position: relative !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .15s, background .15s !important;
}
.control-bar-tab:last-of-type { border-right: 1px solid var(--kr-line) !important; }
.control-bar-tab:hover { background: var(--kr-surface-2) !important; color: var(--kr-ink) !important; }
.control-bar-tab.is-active {
  background: var(--kr-surface) !important;
  color: var(--kr-ink) !important;
  border-color: var(--kr-line) !important;
  box-shadow: none !important;
}
.control-bar-tab.is-active::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 -1px 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--kr-violet), transparent) !important;
}
.control-bar-tab-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit !important;
}
.control-bar-tab-meta {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.control-bar-tab.is-active .control-bar-tab-meta { color: var(--kr-ink) !important; }
.control-bar-tab.is-active .control-bar-tab-sep { color: var(--kr-ink) !important; }
.control-bar-tab-sep { color: var(--kr-ink-4) !important; }
.control-bar-tab--trading .control-bar-tab-label { color: inherit !important; }

.control-bar-collapse {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 10px !important;
  background: var(--kr-surface) !important;
  color: var(--kr-ink-3) !important;
  cursor: pointer !important;
}
.control-bar-collapse:hover { color: var(--kr-ink) !important; background: var(--kr-surface-2) !important; }
.control-bar-collapse-icon {
  display: inline-block !important;
  transition: transform .2s !important;
}
.control-bar.is-collapsed .control-bar-collapse-icon { transform: rotate(180deg) !important; }
.control-bar-panels {
  display: grid !important;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--kr-motion-slow) var(--kr-ease-emphasized),
    opacity var(--kr-motion-fast) var(--kr-ease-out) !important;
}
.control-bar-panels > * { min-height: 0; overflow: hidden; }
.control-bar.is-collapsed .control-bar-panels {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.control-panel-body, .control-bar-panel {
  padding: 22px !important;
  background: var(--kr-surface) !important;
}
.control-bar-panel { padding: 0 !important; }
.control-bar-panel.is-active { display: block !important; }

/* ─── Motion & micro-interactions ───────────────────────── */

@keyframes kr-view-enter {
  from { transform: translateY(5px); }
  to { transform: translateY(0); }
}
@keyframes kr-panel-enter {
  from { transform: translateY(3px); }
  to { transform: translateY(0); }
}
.kr-view-enter {
  animation: kr-view-enter var(--kr-motion-slow) var(--kr-ease-out) both;
}
.kr-panel-enter {
  animation: kr-panel-enter var(--kr-motion-base) var(--kr-ease-out) both;
}

.kr-value-updated {
  border-radius: 6px;
  animation: kr-value-update-semantic 500ms var(--kr-ease-out);
}
.kr-value-updated--up { --kr-value-flash: var(--kr-up-dim); }
.kr-value-updated--down { --kr-value-flash: var(--kr-dn-dim); }
@keyframes kr-value-update-semantic {
  0% { background-color: transparent; }
  24% { background-color: var(--kr-value-flash, var(--kr-violet-dim)); }
  100% { background-color: transparent; }
}

.signal-row[data-details-trigger],
.trade-row,
.tc2-card-details-summary,
.selected-toggle,
.settings-nav-item {
  transition:
    background var(--kr-motion-fast) var(--kr-ease-out),
    color var(--kr-motion-fast) var(--kr-ease-out),
    transform var(--kr-motion-fast) var(--kr-ease-out),
    box-shadow var(--kr-motion-base) var(--kr-ease-out) !important;
}
.signal-row[data-details-trigger]:hover,
.signal-row[data-details-trigger]:focus-visible,
.tc2-card-details-summary:hover,
.selected-toggle:hover {
  transform: translateY(-1px);
}

details > summary .selected-arrow,
details > summary [class*="chev"],
details > summary [class*="caret"] {
  transition: transform var(--kr-motion-base) var(--kr-ease-out) !important;
}
details[open] > summary .selected-arrow,
details[open] > summary [class*="chev"],
details[open] > summary [class*="caret"] {
  transform: rotate(180deg);
}

.scanner-tools-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
@media (max-width: 900px) { .scanner-tools-grid { grid-template-columns: 1fr !important; } }

/* Output / aux areas that show content still need a subtle surface */
.position-review-output,
.focus-aux {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

/* Form shells — remove the extra background layer.
   .control-bar-panel already provides a surface, so inner forms
   should be transparent and borderless for a cleaner single-layer look. */
.preset-section, .symbol-search,
.selected-shell,
.position-review-form, .single-analyzer-form, .single-output {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--kr-r-md) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

/* On desktop the SHORT diagnostics strip (.short-diag) is hidden, so the
   #short-diag-panel wrapper would render as a stray 1px border-top line.
   Hide the empty wrapper at the same widths where its content is hidden. */
@media (min-width: 760px) {
  #short-diag-panel {
    display: none !important;
  }
}

.preset-title, .symbol-search-title {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.preset-sub, .symbol-search-hint { color: var(--kr-ink-3) !important; font-size: 12px !important; margin-top: 2px !important; }
.preset-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; }
.preset-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.preset-btn { padding: 8px 14px !important; min-height: 44px !important; border-radius: 999px !important; font-size: 13px !important; white-space: nowrap !important; }
.symbol-search-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin-bottom: 10px !important; }
.symbol-search-row { display: flex !important; gap: 8px !important; }
.symbol-input { flex: 1 !important; }

.selected-shell { padding: 0 !important; overflow: hidden !important; }
.selected-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; cursor: pointer !important; }
.selected-body { padding: 0 16px 14px !important; }
#selected-symbols-count,
.selected-toggle #selected-symbols-count {
  display: inline-block;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 1px 8px !important;
  margin-left: 6px !important;
  border-radius: 999px !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border: 1px solid var(--kr-violet-line) !important;
}

.pr-fields { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.pr-group { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.pr-group-tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 4px; background: var(--kr-line); color: var(--kr-ink-3); text-transform: uppercase; letter-spacing: 0.08em; align-self: flex-start; }
.pr-group-tag--req { color: var(--kr-violet-2); background: var(--kr-violet-dim); }
.pr-group-fields { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 10px !important; }
.pr-group-fields label { display: flex !important; flex-direction: column !important; gap: 6px !important; font-size: 12px !important; color: var(--kr-ink-3) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
.pr-advanced summary { cursor: pointer; padding: 8px 0; color: var(--kr-ink-2); font-size: 12.5px; }
.pr-advanced summary small { color: var(--kr-ink-3); margin-left: 8px; font-size: 12px; }
.pr-form-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.pr-form-actions button[type="submit"] { padding: 9px 16px !important; background: linear-gradient(180deg, #fff, #e4e4e7) !important; color: var(--kr-bg) !important; border-color: rgba(255,255,255,0.2) !important; font-weight: 600 !important; }

.single-analyzer-head { margin-bottom: 14px !important; }
.single-analyzer-title { font-size: 14px !important; font-weight: 600 !important; color: var(--kr-ink) !important; }
.single-analyzer-sub { font-size: 12px !important; color: var(--kr-ink-3) !important; margin-top: 2px !important; }
.single-analyzer-form { display: grid !important; grid-template-columns: 2fr 1fr auto !important; gap: 12px !important; align-items: end !important; }
@media (max-width: 720px) { .single-analyzer-form { grid-template-columns: 1fr !important; } }
.single-analyzer-field { display: flex !important; flex-direction: column !important; gap: 6px !important; font-size: 12px !important; color: var(--kr-ink-3) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }

/* ─── Home content grid ────────────────────────────────── */

.home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 22px !important;
  margin-top: 0 !important;
  align-items: start !important;
}
.home-grid > #focus-signals {
  margin-top: 0 !important;
}
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr !important; } }
.home-sidebar { display: flex !important; flex-direction: column !important; gap: 16px !important; }

/* Focus section (signals container) */
.focus-section, .home-side-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.focus-section-header, .home-side-card-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-bottom: 0 !important;
}
.focus-section-header-row { display: flex !important; align-items: baseline !important; gap: 10px !important; }
.focus-section-heading, .card-title, #focus-signals-heading {
  position: relative !important;
  padding-left: 12px !important;
  border-left: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--kr-ink) !important;
  margin: 0 !important;
}
.focus-section-heading::before,
#focus-signals-heading::before,
.card-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 3px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: var(--kr-violet) !important;
  transform: translateY(-50%) !important;
}
.focus-section-sub { color: var(--kr-ink-3) !important; font-size: 12px !important; }

.count-pill {
  display: inline-block;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border: 1px solid var(--kr-violet-line) !important;
}

/* ─── Sidebar lists (positions / activity) ─────────────── */

.home-side-list { display: flex !important; flex-direction: column !important; }
.home-side-empty { padding: 18px 20px !important; color: var(--kr-ink-3) !important; font-size: 12.5px !important; }

.home-position-row {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
.home-position-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--kr-up);
  opacity: 0.6;
}
.home-position-row:last-child { border-bottom: 0 !important; }
.home-position-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.home-position-sym {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: 0.01em !important;
}
.home-position-pnl {
  font-family: var(--kr-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-pnl.pos, .home-position-pnl.up { color: var(--kr-up) !important; }
.home-position-pnl.neg, .home-position-pnl.dn { color: var(--kr-dn) !important; }
.home-position-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 4px 12px !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  min-width: 0 !important;
}
.home-position-meta > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* Activity rows — Desktop: single-line layout */
.home-activity-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  font-size: 13px !important;
}
.home-activity-row:last-child { border-bottom: 0 !important; }

.act-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.act-time {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  width: 44px;
}

.act-event {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.act-sym {
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  min-width: 0;
}

.act-dir {
  font-family: var(--kr-mono) !important;
  font-size: 11px !important;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600 !important;
  flex-shrink: 0;
}
.act-dir.long { background: var(--kr-up-dim) !important; color: var(--kr-up) !important; }
.act-dir.short { background: var(--kr-dn-dim) !important; color: var(--kr-dn) !important; }

.act-arrow {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  flex-shrink: 0;
}

.act-status {
  font-size: 12px !important;
  color: var(--kr-ink-2) !important;
  flex-shrink: 0;
}
.act-status.fail { color: var(--kr-dn) !important; }

.act-result {
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}
.act-result.pos { color: var(--kr-up) !important; }
.act-result.neg { color: var(--kr-dn) !important; }

/* ─── Dir tag (LONG / SHORT chip) ──────────────────────── */

.dir-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.05em !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  text-transform: uppercase !important;
}
.dir-tag.long, .signal-row--long .dir-tag {
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.dir-tag.short, .signal-row--short .dir-tag {
  background: var(--kr-dn-dim) !important;
  color: var(--kr-dn) !important;
}

/* ─── Profile section + signal table ───────────────────── */

.profile-section {
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.profile-section:first-child { border-top: 0 !important; }
.profile-section-head {
  display: grid !important;
  grid-template-columns: 4px 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  border-bottom: 0 !important;
  position: relative !important;
  min-height: 0 !important;
}
.profile-section-bar {
  position: static !important;
  width: 4px !important;
  height: 36px !important;
  border-radius: 2px !important;
  background: var(--kr-violet-2) !important;
  opacity: 0.86 !important;
  transform: none !important;
}
.profile-section--swing .profile-section-bar,
.profile-section--short .profile-section-bar,
.profile-section--grid .profile-section-bar { background: var(--kr-violet-2) !important; }
.profile-section-copy { padding: 0 !important; min-width: 0 !important; }
.profile-section-kicker {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--kr-violet-2) !important;
  margin-bottom: 4px !important;
}
.profile-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.profile-section-desc {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
}
.profile-section-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.profile-section-count, .profile-section-meta {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.profile-section-count {
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border-color: var(--kr-violet-line) !important;
  display: none !important;
}
.profile-section-meta {
  display: none !important;
}
.profile-section-body {
  padding: 0 0 12px !important;
  background: transparent !important;
}

/* Signal table */
.signal-table-shell { padding: 12px 0 0 !important; background: transparent !important; }
/* Hide signal section header and list header for cleaner UI */
#focus-signals .focus-section-header {
  display: none !important;
}

.signal-list-head {
  display: none !important;
}
.signal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px 0 12px !important;
  width: 100% !important;
}

.signal-list .signal-row {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  grid-template-areas:
    'score symbol dir price status'
    'meta  meta   meta meta  meta' !important;
  gap: 8px 14px !important;
  align-items: center !important;
  padding: 14px 20px 12px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  background: rgba(8, 8, 10, 0.82) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.signal-list .signal-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--kr-violet-2);
  opacity: 0.44;
}
.signal-list .signal-row--long::before,
.signal-list .signal-row--short::before { background: var(--kr-violet-2) !important; opacity: 0.44 !important; }
.signal-list .signal-row:hover {
  background: rgba(19, 19, 22, 0.96) !important;
  border-color: var(--kr-line-2) !important;
}
.signal-list .signal-row.signal-row--details-open {
  background: rgba(19, 19, 22, 0.96) !important;
  border-color: var(--kr-violet-line) !important;
}
.signal-list .signal-row[data-details-trigger]:focus-visible {
  outline: 2px solid var(--kr-violet-line) !important;
  outline-offset: 0 !important;
}

/* Score cell */
.signal-list .signal-score-cell {
  grid-area: score !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-left: 6px !important;
}
.signal-score-line { display: flex !important; align-items: baseline !important; gap: 2px !important; }
.signal-score-num {
  font-family: var(--kr-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
.signal-score-den { font-family: var(--kr-mono) !important; font-size: 12px !important; color: var(--kr-ink-3) !important; }
.signal-score-track {
  height: 4px !important;
  background: var(--kr-line) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.signal-score-fill {
  height: 100% !important;
  background: linear-gradient(90deg, rgba(244,244,246,0.55), var(--kr-violet-2)) !important;
  border-radius: 2px !important;
}
.signal-score-label {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--kr-ink-3) !important;
  text-transform: uppercase !important;
}
.signal-score-label.high { color: var(--kr-violet-2) !important; }
.signal-score-label.mid  { color: var(--kr-ink-2) !important; }
.signal-score-label.low  { color: var(--kr-ink-3) !important; }

/* Symbol cell */
.signal-list .signal-symbol-cell { grid-area: symbol !important; min-width: 0 !important; }
.signal-symbol-main {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.signal-symbol-sub {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px 10px !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.signal-symbol-name {
  color: var(--kr-ink-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.signal-symbol-reason {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Direction cell + chip */
.signal-list .signal-dir-cell { grid-area: dir !important; }
.signal-dir-chip {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.06em !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
}
.signal-dir-chip--long {
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
  border: 1px solid var(--kr-up-line) !important;
}
.signal-dir-chip--short {
  background: var(--kr-dn-dim) !important;
  color: var(--kr-dn) !important;
  border: 1px solid var(--kr-dn-line) !important;
}

/* Last price */
.signal-list .signal-last-cell {
  grid-area: price !important;
  font-family: var(--kr-mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* Status cell */
.signal-list .signal-delta-cell {
  grid-area: status !important;
  text-align: right !important;
}
.signal-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.signal-status-chip--pending { color: var(--kr-violet-2) !important; background: var(--kr-violet-dim) !important; border-color: var(--kr-violet-line); }
.signal-status-chip--queued  { color: var(--kr-ink-2) !important; }
.signal-status-chip--filled  { color: var(--kr-violet-2) !important; background: var(--kr-violet-dim) !important; border-color: var(--kr-violet-line); }
.signal-status-chip--rejected,
.signal-status-chip--failed  { color: var(--kr-dn) !important; background: var(--kr-dn-dim) !important; border-color: var(--kr-dn-line); }

/* Row meta strip (TP1 / SL / R / WR) */
.signal-list .signal-row .signal-row-meta,
.signal-row-meta {
  display: flex !important;
  grid-area: meta !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px 14px !important;
  margin: 4px 0 0 !important;
  padding: 10px 8px 2px !important;
  border-top: 1px dashed var(--kr-line) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-2) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}
.signal-row-meta > span { white-space: nowrap !important; color: var(--kr-ink-2) !important; }

/* Grid profile: keep it analytical, not rainbow-colored. */
.signal-table--grid {
  background: transparent !important;
}
.signal-table--grid thead th {
  background: rgba(255,255,255,0.018) !important;
  color: var(--kr-ink-3) !important;
  border-color: var(--kr-line) !important;
}
.signal-table--grid tbody td {
  background: rgba(8, 8, 10, 0.82) !important;
  border-color: var(--kr-line) !important;
}
.signal-table--grid .signal-row--grid {
  background: rgba(8, 8, 10, 0.82) !important;
}
.signal-table--grid .signal-row--grid:hover td {
  background: rgba(19, 19, 22, 0.96) !important;
}
.signal-table--grid .signal-score-num,
.signal-table--grid .signal-delta-cell.up,
.signal-table--grid .signal-level-cell--sl {
  color: var(--kr-ink) !important;
}
.signal-table--grid .grid-row-last-main {
  color: var(--kr-ink) !important;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.signal-table--grid .grid-row-last-sub,
.grid-row-note,
.grid-mini-note {
  color: var(--kr-ink-3) !important;
}
.signal-dir-chip--neutral,
.grid-action--neutral,
.grid-action--long,
.grid-action--short,
.grid-mini-bias {
  background: rgba(255,255,255,0.045) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line-2) !important;
}
.grid-detail-strip,
.grid-detail-metric,
.signal-table--grid .signal-detail-row td {
  background: rgba(255,255,255,0.018) !important;
  border-color: var(--kr-line) !important;
}
.grid-detail-strip b,
.grid-detail-metric strong {
  color: var(--kr-ink) !important;
}

/* Grid mini cards — card style like position cards */
.grid-mini-row {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px 20px !important;
  background: var(--kr-surface) !important;
  border: 0 !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: var(--kr-shadow-md) !important;
  gap: 14px !important;
  margin: 0 0 10px !important;
}
.grid-mini-row::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--kr-violet-2) !important;
  opacity: 0.75 !important;
}
.grid-mini-row:hover {
  background: var(--kr-bg-2) !important;
  border-color: var(--kr-line-2) !important;
}
.grid-mini-list {
  gap: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
}

@media (max-width: 980px) {
  .signal-list-head { display: none !important; }
  .signal-list .signal-row {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    grid-template-areas:
      'score symbol dir'
      'price status status'
      'meta  meta   meta' !important;
    gap: 6px 12px !important;
    padding: 14px 20px 10px !important;
  }
  .signal-list .signal-last-cell  { text-align: left !important; padding-left: 6px !important; }
  .signal-list .signal-delta-cell { text-align: right !important; }
}

/* ─── Tools / preset section legacy ────────────────────── */

.selected-symbols { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.symbol-results { margin-top: 8px !important; }

/* ─── History view ─────────────────────────────────────── */

.history-container { display: flex; flex-direction: column; gap: 22px; }
.conclusion-banner {
  padding: 16px 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
}

.history-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  padding: 22px !important;
  box-shadow: none !important;
}
.history-section-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.history-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.section-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--kr-ink-3); }
.section-meta-label { display: inline-flex; align-items: center; gap: 6px; color: var(--kr-ink-3); }

.history-range-tabs { display: inline-flex; background: var(--kr-bg-2); border: 1px solid var(--kr-line); border-radius: var(--kr-r-sm); padding: 2px; }
.history-range-tab { background: transparent !important; border: 0 !important; padding: 5px 10px !important; font-size: 12px !important; color: var(--kr-ink-2) !important; min-height: 0 !important; border-radius: 6px !important; }
.history-range-tab.is-active { background: var(--kr-surface) !important; color: var(--kr-ink) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.25) !important; }

.metrics-grid, .health-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 980px) {
  .metrics-grid, .health-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.metric-card, .health-card {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.metrics-grid {
  background: transparent !important;
  border: 0 !important;
}
.metric-card {
  background: transparent !important;
}
.metric-label, .health-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--kr-ink-3) !important;
  font-weight: 600 !important;
}
.metric-value, .health-value {
  font-family: var(--kr-mono) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
.metric-unit, .health-unit {
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
}
/* Value + unit on one line (e.g. "9.9999 USDT") for a more compact KPI card. */
.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap !important;
}

.history-equity .equity-body { padding: 8px 0 !important; }
.chart-shell svg { width: 100% !important; height: 220px !important; display: block !important; }
.chart-shell line { stroke: var(--kr-line) !important; }
/* Data path/circle colors are set inline by renderEquityCurve (green/red by
   realized PnL sign); only enforce stroke width here so the inline color wins. */
.chart-shell path[fill="none"] { stroke-width: 1.75 !important; }

.trades-table, .symbols-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.trades-table th, .symbols-table th {
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--kr-ink-2) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
.trades-table td, .symbols-table td {
  padding: 12px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  color: var(--kr-ink) !important;
}
.trades-table tbody tr:hover, .symbols-table tbody tr:hover { background: var(--kr-bg-2) !important; }
.no-data { text-align: center; padding: 32px 0 !important; color: var(--kr-ink-3) !important; }

/* ─── Footer ───────────────────────────────────────────── */

.footer {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--kr-line) !important;
  text-align: center !important;
}
.footer-compact { font-family: var(--kr-mono) !important; font-size: 12px !important; color: var(--kr-ink-3) !important; letter-spacing: 0.04em !important; }

/* ─── Trading dashboard (legacy injected) ──────────────── */

.trading-dashboard, .trading-dashboard * { font-family: var(--kr-sans) !important; }
.trading-dashboard input, .trading-dashboard select, .trading-dashboard button {
  font-family: inherit !important;
}
.trading-dashboard table, .trading-dashboard th, .trading-dashboard td {
  border-color: var(--kr-line);
}
#trading-queue-summary,
#automation-health-section,
#strategy-learning-section {
  display: none !important;
}
.trading-order-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
.order-summary-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-filter-field {
  display: none;
  grid-template-columns: auto minmax(150px, 220px);
  align-items: center;
  gap: 10px;
}
.order-filter-label {
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.order-filter-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.order-filter-select {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.order-filter-button {
  width: 100% !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 13px 0 15px !important;
  border: 1px solid var(--kr-violet-line) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--kr-surface) 84%, transparent) !important;
  color: var(--kr-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.order-filter-button:hover,
.order-filter-button.is-open {
  background: var(--kr-surface-2) !important;
  border-color: var(--kr-violet-line) !important;
}
.order-filter-button:focus-visible {
  border-color: var(--kr-violet-line) !important;
  box-shadow: 0 0 0 3px var(--kr-violet-soft) !important;
}
.order-filter-button-icon {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  transition: transform .15s;
}
.order-filter-button.is-open .order-filter-button-icon {
  transform: rotate(180deg) !important;
}
.order-filter-list {
  position: absolute;
  z-index: 85;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--kr-line-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--kr-bg-2) 96%, black) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(139,113,255,.08);
}
.order-filter-list[hidden] {
  display: none;
}
.order-filter-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.order-filter-option strong {
  color: inherit !important;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
.order-filter-option:hover,
.order-filter-option:focus-visible {
  background: var(--kr-line) !important;
  color: var(--kr-ink) !important;
  outline: none !important;
}
.order-filter-option.is-selected {
  background: var(--kr-violet-soft) !important;
  color: var(--kr-ink) !important;
}
#trading-dashboard .order-summary-chip {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
#trading-dashboard .order-summary-chip strong {
  color: var(--kr-ink) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
}
#trading-dashboard button.order-summary-chip:hover,
#trading-dashboard button.order-summary-chip.is-active {
  border-color: rgba(139, 113, 255, 0.45) !important;
  background: rgba(139, 113, 255, 0.13) !important;
  color: var(--kr-violet-2) !important;
}
#trading-dashboard .order-summary-chip.pending {
  border-color: rgba(139, 113, 255, 0.28) !important;
}
#trading-dashboard .order-summary-chip.running,
#trading-dashboard .order-summary-chip.profit {
  border-color: var(--kr-up-line) !important;
}
#trading-dashboard .order-summary-chip.loss,
#trading-dashboard .order-summary-chip.failed {
  border-color: var(--kr-dn-line) !important;
}
#trading-dashboard .order-summary-chip.closed {
  border-color: var(--kr-line) !important;
}
#trading-dashboard .order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--kr-line-2);
  background: var(--kr-bg-2) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
#trading-dashboard .order-status.status-pending {
  color: var(--kr-violet-2) !important;
  border-color: rgba(139, 113, 255, 0.35);
  background: rgba(139, 113, 255, 0.12) !important;
}
#trading-dashboard .order-status.status-running,
#trading-dashboard .order-status.status-executed,
#trading-dashboard .order-status.status-filled {
  color: var(--kr-violet-2) !important;
  border-color: rgba(139, 113, 255, 0.28);
  background: rgba(139, 113, 255, 0.10) !important;
}
#trading-dashboard .order-status.status-profit {
  color: var(--kr-up) !important;
  border-color: var(--kr-up-line);
  background: var(--kr-up-dim) !important;
}
#trading-dashboard .order-status.status-loss,
#trading-dashboard .order-status.status-negative,
#trading-dashboard .order-status.status-failed,
#trading-dashboard .order-status.status-error,
#trading-dashboard .order-status.status-blocked,
#trading-dashboard .order-status.status-rejected {
  color: var(--kr-dn) !important;
  border-color: var(--kr-dn-line);
  background: var(--kr-dn-dim) !important;
}
#trading-dashboard .order-status.status-closed,
#trading-dashboard .order-status.status-neutral {
  color: var(--kr-ink-2) !important;
  border-color: var(--kr-line);
  background: var(--kr-bg-2) !important;
}

/* ─── Toast & loading ──────────────────────────────────── */

.toast, .toast-container > * {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line-2) !important;
  border-radius: var(--kr-r-md) !important;
  box-shadow: var(--kr-shadow-md) !important;
  color: var(--kr-ink) !important;
}
.loading-overlay {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line-2) !important;
  border-left: 3px solid var(--kr-violet) !important;
  border-radius: var(--kr-r-md) !important;
  box-shadow: var(--kr-shadow-md) !important;
  color: var(--kr-ink-2) !important;
}
.loading-overlay .spinner {
  border-color: var(--kr-line-2) !important;
  border-top-color: var(--kr-violet-2) !important;
}

/* ─── Bottom-right toast notifications ─────────────────── */

.kx-toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.kx-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: var(--kr-r-md);
  background: var(--kr-surface);
  border: 1px solid var(--kr-line-2);
  border-left: 3px solid var(--kr-ink-3);
  box-shadow: var(--kr-shadow-md);
  color: var(--kr-ink);
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}
.kx-toast.is-in { opacity: 1; transform: translateY(0); }
.kx-toast--loading { border-left-color: var(--kr-violet-2); }
.kx-toast--success { border-left-color: var(--kr-up); }
.kx-toast--error { border-left-color: var(--kr-dn); }
.kx-toast-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.kx-toast--success .kx-toast-icon::before { content: '✓'; color: var(--kr-up); }
.kx-toast--error .kx-toast-icon::before { content: '✕'; color: var(--kr-dn); }
.kx-toast--loading .kx-toast-icon {
  border: 2px solid var(--kr-line-2);
  border-top-color: var(--kr-violet-2);
  border-radius: 50%;
  animation: kx-toast-spin .7s linear infinite;
}
.kx-toast-msg { flex: 1; line-height: 1.35; }
@keyframes kx-toast-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .kx-toast-container { right: 12px; left: 12px; bottom: 12px; }
  .kx-toast { min-width: 0; max-width: none; }
}

/* ─── Semantic helper classes ──────────────────────────── */

.up, .pos, .delta-chip.up { color: var(--kr-up) !important; }
.dn, .neg, .delta-chip.dn { color: var(--kr-dn) !important; }
.am, .neutral { color: var(--kr-violet-2) !important; }

.delta-chip {
  display: inline-flex; align-items: center;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  border: 1px solid var(--kr-line) !important;
}
.delta-chip.up { background: var(--kr-up-dim) !important; border-color: var(--kr-up-line) !important; }
.delta-chip.dn { background: var(--kr-dn-dim) !important; border-color: var(--kr-dn-line) !important; }

/* ─── Accessibility ─────────────────────────────────────── */

:focus-visible {
  /* Solid violet (was the 0.32-alpha --kr-violet-line, too faint on the dark
     surface). Offset gap + halo keep the ring visible on both the dark UI and
     the light primary CTA. */
  outline: 2px solid var(--kr-violet) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--kr-violet-dim) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 980px) {
  .main, .history-main { padding: 20px 16px 72px !important; }
  .home-hero { padding: 22px 22px !important; }
  .home-hero-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .home-hero-actions { width: 100% !important; }
  .home-kpis {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--kr-line) !important;
    background: var(--kr-line) !important;
  }
  .home-kpi {
    min-width: 0 !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
  }
  .control-bar-tabs { flex-wrap: wrap !important; }
  .control-bar-tab {
    flex: 1 1 calc(50% - 22px) !important;
    max-width: calc(50% - 22px) !important;
    min-width: 0 !important;
    border-bottom: 1px solid var(--kr-line) !important;
  }
  .control-bar-tab:nth-of-type(odd) { border-right: 1px solid var(--kr-line) !important; }
  .control-bar-tab:nth-of-type(even) { border-right: 0 !important; }
  .control-bar-tab:nth-of-type(3),
  .control-bar-tab:nth-of-type(4) { border-bottom: 0 !important; }
  .control-bar-collapse {
    flex: 0 0 44px !important;
    border-left: 1px solid var(--kr-line) !important;
    border-bottom: 1px solid var(--kr-line) !important;
    align-self: stretch !important;
  }
}
@media (max-width: 640px) {
  .kx-topbar-shell, .topbar { padding: 0 16px !important; }
  .kx-primary-nav { display: none !important; }
  .market-ticker {
    display: none;
  }
  .market-ticker-item {
    padding: 0 10px;
    gap: 7px;
  }
  .market-ticker-item:nth-child(n+2) {
    display: none;
  }
  .market-ticker-change {
    display: none;
  }
  .kx-clock,
  .live-badge {
    display: none !important;
  }
  .home-hero-title { font-size: 32px !important; }
}


/* [#13] Desktop automated-trading panel: two visual layers only. The control
   panel is the surface; tables and analytics use transparent rows + dividers. */
@media (min-width: 721px) {
  #trading-panel .trading-dashboard-body {
    padding: 18px 20px 20px !important;
    background: var(--kr-surface) !important;
  }
  #trading-panel .trading-orders {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #trading-panel .trading-order-summary {
    margin-bottom: 14px !important;
  }
  #trading-dashboard .order-summary-chip {
    background: transparent !important;
    border-color: var(--kr-line-2) !important;
    color: var(--kr-ink-2) !important;
  }
  #trading-dashboard .order-summary-chip.pending,
  #trading-dashboard .order-summary-chip.running,
  #trading-dashboard .order-summary-chip.profit,
  #trading-dashboard .order-summary-chip.loss,
  #trading-dashboard .order-summary-chip.failed,
  #trading-dashboard .order-summary-chip.closed {
    border-color: var(--kr-line-2) !important;
    color: var(--kr-ink-2) !important;
  }
  #trading-dashboard button.order-summary-chip:hover {
    background: var(--kr-line) !important;
    border-color: var(--kr-line-2) !important;
    color: var(--kr-ink) !important;
  }
  #trading-dashboard button.order-summary-chip.is-active {
    background: var(--kr-violet-soft) !important;
    border-color: var(--kr-violet-line) !important;
    color: var(--kr-violet-2) !important;
  }

  #trading-orders-table {
    background: transparent !important;
    border: 1px solid var(--kr-line) !important;
  }
  #trading-orders-table thead,
  #trading-orders-table th {
    background: transparent !important;
  }
  #trading-orders-table tbody,
  #trading-orders-table tr,
  #trading-orders-table td {
    background: transparent !important;
  }
  #trading-orders-table th,
  #trading-orders-table td {
    border-color: var(--kr-line) !important;
  }
  #trading-orders-table tr:hover,
  #trading-orders-table tbody tr:hover td {
    background: var(--kr-line) !important;
  }

  #trading-dashboard .trading-loss-analysis {
    margin-top: 18px !important;
    padding: 16px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--kr-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #trading-dashboard .trading-loss-analysis h4 {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-grid {
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--kr-line) !important;
    border-bottom: 1px solid var(--kr-line) !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-card {
    min-height: 92px !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-card + .dynamic-sl-card {
    border-left: 1px solid var(--kr-line) !important;
  }
  #trading-dashboard .trading-loss-analysis .la-hint {
    margin: 0 !important;
    padding: 12px 0 0 !important;
  }
}

/* [#9] Strategy profiles use the same quiet, single-layer list language as
   今日活動. The outer focus section provides the container; rows only need
   spacing and separators, not another stack of cards and pills. */
#focus-signals .profile-section {
  margin: 0 !important;
}
#focus-signals .profile-section + .profile-section {
  margin-top: 0 !important;
  border-top: 8px solid var(--kr-bg) !important;
}
#focus-signals .profile-section-head {
  grid-template-columns: 2px minmax(0, 1fr) !important;
  grid-template-areas: "bar copy" !important;
  gap: 12px !important;
  padding: 14px 20px 12px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
#focus-signals .profile-section-bar {
  grid-area: bar !important;
  width: 2px !important;
  height: 28px !important;
  opacity: 0.72 !important;
}
#focus-signals .profile-section-copy {
  grid-area: copy !important;
}
#focus-signals .profile-section-kicker {
  margin-bottom: 2px !important;
  font-family: var(--kr-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
#focus-signals .profile-section-title {
  font-size: 14px !important;
}
#focus-signals .profile-section-desc {
  margin-top: 2px !important;
  line-height: 1.45 !important;
}
#focus-signals .profile-section-body,
#focus-signals .signal-table-shell {
  padding: 0 !important;
}
#focus-signals .signal-list,
#focus-signals .grid-mini-list {
  gap: 0 !important;
  padding: 0 !important;
}
#focus-signals .signal-list .signal-row,
#focus-signals .grid-mini-row {
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kr-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#focus-signals .signal-list .signal-row::before,
#focus-signals .grid-mini-row::before {
  content: none !important;
}
#focus-signals .signal-list .signal-row:hover,
#focus-signals .grid-mini-row:hover,
#focus-signals .signal-list .signal-row.signal-row--details-open {
  background: var(--kr-line) !important;
  border-color: var(--kr-line) !important;
}
#focus-signals .signal-decision-cell {
  padding: 0 0 5px !important;
}
#focus-signals .signal-decision-cell strong {
  font-size: 12px !important;
}
#focus-signals .signal-row-meta {
  gap: 6px 16px !important;
  margin-top: 2px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid var(--kr-line) !important;
}
#focus-signals .signal-row-meta > span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--kr-ink-3) !important;
}
#focus-signals .grid-mini-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto !important;
  grid-template-areas:
    "top mid"
    "bot mid"
    "note note" !important;
  align-items: center !important;
  gap: 4px 16px !important;
}
#focus-signals .grid-mini-top {
  grid-area: top !important;
}
#focus-signals .grid-mini-mid {
  grid-area: mid !important;
  justify-self: end !important;
  gap: 8px !important;
}
#focus-signals .grid-mini-bot {
  grid-area: bot !important;
}
#focus-signals .grid-mini-note {
  grid-area: note !important;
  margin-top: 4px !important;
}
#focus-signals .grid-mini-bias {
  padding: 2px 7px !important;
  border-radius: 999px !important;
}

@media (max-width: 720px) {
  #focus-signals .profile-section + .profile-section {
    border-top-width: 6px !important;
  }
  #focus-signals .profile-section-head {
    padding: 12px 14px 10px !important;
  }
  #focus-signals .profile-section-desc {
    display: none !important;
  }
  #focus-signals .signal-list .signal-row,
  #focus-signals .grid-mini-row {
    padding: 12px 14px !important;
  }
  #focus-signals .signal-decision-cell {
    border-bottom: 0 !important;
  }
  #focus-signals .grid-mini-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* Mobile signal section separation */
@media (max-width: 720px) {
  .focus-section {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .focus-section-header {
    display: none !important;
    padding: 0 0 10px !important;
    border-bottom: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
      var(--kr-surface) !important;
  }

  .focus-section-header-row {
    display: grid !important;
    gap: 6px !important;
  }

  .focus-section-sub {
    padding-left: 14px !important;
    line-height: 1.45 !important;
  }

  .focus-aux,
  .focus-aux:not(:empty) {
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    border-top: 1px solid var(--kr-line) !important;
    background: rgba(255,255,255,0.012) !important;
  }

  .short-diag {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .focus-aux:empty {
    display: none !important;
  }

  #short-diag-panel {
    display: none !important;
  }

  .short-diag__summary {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .short-diag[open] .short-diag__summary {
    border-bottom: 0 !important;
  }

  .profile-section {
    margin: 12px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .profile-section + .profile-section {
    margin-top: 16px !important;
  }

  .profile-section-head {
    grid-template-columns: 4px 1fr !important;
    grid-template-areas: "bar copy" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background:
      linear-gradient(180deg, rgba(139, 113, 255, 0.075), rgba(255,255,255,0.012)),
      var(--kr-surface) !important;
    border-bottom: 0 !important;
  }

  .profile-section-bar {
    height: 32px !important;
  }

  .profile-section-desc,
  .profile-section-stats {
    display: none !important;
  }

  .profile-section-body {
    padding: 0 !important;
    background: transparent !important;
  }

  .grid-mini-list,
  .signal-list {
    gap: 8px !important;
    padding-top: 8px !important;
  }

  .grid-mini-row,
  .signal-list .signal-row {
    margin: 0 !important;
    border-radius: 12px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: var(--kr-bg-2) !important;
    border: 1px solid var(--kr-line) !important;
    padding: 14px !important;
  }

  .grid-mini-row + .grid-mini-row,
  .signal-list .signal-row + .signal-row {
    border-top: 0 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 430px) {
  .main,
  .history-main {
    padding-inline: 7px !important;
  }

  .live-badge-time,
  #refresh-info {
    max-width: 54px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .kx-logo-text {
    display: none !important;
  }

  .home-hero {
    padding: 14px !important;
  }

  .home-hero-title {
    font-size: 28px !important;
  }

  .home-position-card-meta {
    grid-template-columns: 1fr;
    gap: 6px 0;
  }
  .home-position-card-meta > div:nth-child(-n+3),
  .home-position-card-meta > div:nth-child(n+4) { grid-column: auto; }
  .home-position-card-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--kr-line);
  }
  .home-position-card-meta div:last-child {
    border-bottom: 0;
  }
  .home-position-card-meta dt {
    flex-shrink: 0;
    color: var(--kr-ink-3) !important;
  }
  .home-position-card-meta dd {
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .control-bar-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 40px !important;
  }

  .control-bar-tab {
    min-height: 50px !important;
    padding: 8px 5px !important;
  }

  .control-bar-tab-meta {
    display: none !important;
  }

  .control-bar-tab:nth-of-type(2) {
    border-right: 1px solid var(--kr-line) !important;
  }

  .control-bar-tab:nth-of-type(3),
  .control-bar-tab:nth-of-type(4) {
    border-top: 0 !important;
  }

  .control-bar-collapse {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .profile-section-desc {
    display: none !important;
  }

  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "symbol"
      "dir"
      "score"
      "price"
      "status"
      "meta" !important;
  }

  .signal-list .signal-dir-cell,
  .signal-list .signal-last-cell,
  .signal-list .signal-delta-cell {
    text-align: left !important;
    padding-left: 6px !important;
  }

  .signal-status-chip,
  .signal-dir-chip {
    max-width: 100% !important;
  }
}

/* ─── Simpler UX layer ─────────────────────────────────── */

.home-position-card-btn,
.history-range-tab,
.symbol-chip-remove,
.kx-primary-nav-link,
.settings-nav-btn,
.topbar-nav-btn {
  min-height: 44px !important;
}
.symbol-chip-remove {
  min-width: 44px !important;
}
.home-position-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}
.home-hero-actions .btn-danger {
  border-width: 1px !important;
}

.signal-list .signal-row {
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  grid-template-areas:
    "decision decision decision decision decision"
    "score    symbol   dir      price    status"
    "meta     meta     meta     meta     meta" !important;
}
.signal-decision-cell {
  grid-area: decision;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 0 0 10px 6px;
  border-bottom: 0;
}
.signal-decision-cell strong {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}
.signal-decision-cell span {
  display: none;
}
.signal-decision-cell--go strong {
  color: var(--kr-up) !important;
}
.signal-decision-cell--caution strong {
  color: var(--kr-violet-2) !important;
}
.signal-decision-cell--wait strong {
  color: var(--kr-ink-2) !important;
}
.signal-dir-chip {
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.signal-row-meta > span {
  padding: 3px 8px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.025) !important;
}

.selected-unit {
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  margin-left: 4px;
}

.history-equity.is-empty .chart-shell {
  min-height: 160px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed var(--kr-line-2) !important;
  border-radius: var(--kr-r-md) !important;
  background: var(--kr-bg-2) !important;
}
.history-equity.is-empty .chart-shell svg {
  display: none !important;
}
.history-equity.is-empty .chart-shell::before {
  content: none !important;
}
.history-empty-state,
.history-table-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 420px;
  margin-inline: auto;
  text-align: center !important;
}
.history-empty-title,
.history-table-empty strong {
  color: var(--kr-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.history-empty-copy,
.history-table-empty span {
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.history-empty-action,
.history-table-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid var(--kr-violet-line);
  border-radius: 999px;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none;
}

@media (max-width: 720px) {
  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision decision"
      "symbol   dir"
      "score    price"
      "status   status"
      "meta     meta" !important;
    padding: 12px 12px 10px !important;
    gap: 8px 10px !important;
  }
  .signal-decision-cell {
    padding: 0 0 8px 6px;
  }
  .signal-decision-cell strong {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }
  .signal-decision-cell span {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }
  .signal-list .signal-symbol-cell {
    padding-left: 6px !important;
  }
  .signal-list .signal-dir-cell {
    display: block !important;
    justify-self: end !important;
    padding-left: 0 !important;
  }
  .signal-list .signal-delta-cell {
    justify-self: end !important;
    text-align: right !important;
    padding-left: 0 !important;
  }
  .signal-list .signal-score-cell {
    padding-left: 6px !important;
  }
  .signal-list .signal-last-cell {
    align-self: center !important;
    text-align: right !important;
    padding-left: 0 !important;
  }
  .signal-row-meta > span {
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision decision"
      "symbol   dir"
      "score    price"
      "meta     status" !important;
  }
  .signal-list .signal-row .signal-row-meta,
  .signal-row-meta {
    border-top: 1px dashed var(--kr-line) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, auto)) !important;
    justify-content: start !important;
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 9px 0 0 6px !important;
    overflow: hidden !important;
  }
  .signal-row-meta > span {
    padding: 2px 6px !important;
    font-size: 10.5px !important;
  }
  .signal-status-chip,
  .signal-dir-chip {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
}

/* Final touch-target normalization. Older theme layers set explicit widths with
   !important, so keep this at the end of the final stylesheet. */
.kx-icon-btn,
.topbar-nav-btn,
.settings-nav-btn,
.kx-topbar-shell .kx-icon-btn,
.topbar .topbar-nav-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
.symbol-input,
.single-analyzer-input,
.single-analyzer-select,
.period-select {
  min-height: 44px !important;
}
.control-bar-collapse {
  min-width: 44px !important;
}
@media (max-width: 720px) {
  .control-bar-collapse {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}
@media (max-width: 430px) {
  .control-bar-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .control-bar-tab {
    min-height: 50px !important;
    padding: 8px 5px !important;
  }
  .control-bar-tab-meta {
    display: none !important;
  }
  .control-bar-collapse {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 720px) {
  #trading-panel.control-bar-panel {
    margin-inline: -12px !important;
  }

  #trading-panel .trading-tab-dashboard-shell,
  #trading-panel .trading-dashboard-shell {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #trading-panel #trading-dashboard,
  #trading-panel .trading-dashboard {
    background: transparent !important;
  }

  #trading-panel .trading-dashboard-head {
    display: none;
  }

  #trading-panel .trading-dashboard-body {
    gap: 14px !important;
    padding: 0 !important;
  }

  .trading-orders {
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  .trading-orders h4 {
    padding-inline: 12px !important;
    margin-bottom: 12px !important;
  }

  .trading-order-summary {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }

  .order-summary-chip-list {
    display: none;
  }

  .order-filter-field {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .order-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .order-filter-wrap {
    min-width: 0;
  }

  .order-filter-button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .order-filter-list {
    min-width: 100%;
  }

  #trading-orders-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
  }

  #trading-orders-table thead {
    display: none !important;
  }

  #trading-orders-table tbody {
    display: grid !important;
    gap: 10px !important;
    padding-inline: 12px !important;
  }

  #trading-orders-table tr.trading-order-empty {
    display: block;
    padding: 18px 14px;
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-md);
    background: var(--kr-bg-2) !important;
  }

  #trading-orders-table tr.trading-order-empty td {
    display: block;
    padding: 0;
    color: var(--kr-ink-3) !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  #trading-orders-table tr.trading-order-empty td::before {
    content: none;
  }

  #trading-orders-table tr.trading-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    grid-template-areas: "symbol status"
      "time direction"
      "levels pnl"
      "entry entry"
      "reason reason";
    gap: 9px 14px;
    padding: 14px;
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-md);
    background: var(--kr-bg-2) !important;
  }

  #trading-orders-table tr.trading-order-row--error {
    display: block;
  }

  #trading-orders-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--kr-ink) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #trading-orders-table td::before {
    content: attr(data-label) !important;
    flex: 0 0 auto !important;
    color: var(--kr-ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  #trading-orders-table td:nth-child(1) { grid-area: time !important; }
  #trading-orders-table td:nth-child(2) { grid-area: symbol !important; }
  #trading-orders-table td:nth-child(3) { grid-area: direction !important; }
  #trading-orders-table td:nth-child(4) { grid-area: status !important; justify-content: flex-end !important; }
  #trading-orders-table td:nth-child(5) { grid-area: entry !important; }
  #trading-orders-table td:nth-child(6) { grid-area: reason !important; }
  #trading-orders-table td:nth-child(7) { grid-area: pnl !important; justify-content: flex-end !important; text-align: right !important; }
  #trading-orders-table td:nth-child(8) { grid-area: levels !important; justify-content: flex-start !important; }

  #trading-orders-table td:nth-child(2)::before,
  #trading-orders-table td:nth-child(4)::before,
  #trading-orders-table td:nth-child(7)::before {
    content: none !important;
  }

  #trading-orders-table td:nth-child(2) {
    justify-content: flex-start !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #trading-orders-table td:nth-child(1),
  #trading-orders-table td:nth-child(3),
  #trading-orders-table td:nth-child(8) {
    white-space: nowrap !important;
  }

  #trading-orders-table td:nth-child(1) {
    justify-content: flex-start !important;
  }

  #trading-orders-table td:nth-child(3) {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  #trading-orders-table .order-entry-reason,
  #trading-orders-table .order-reason,
  #trading-orders-table .order-levels {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  #trading-orders-table .order-entry-reason {
    color: var(--kr-ink-2) !important;
    text-align: left !important;
  }

  #trading-orders-table .order-reason {
    color: var(--kr-ink-3) !important;
    text-align: left !important;
  }

  #trading-orders-table .order-levels {
    color: var(--kr-ink-2) !important;
    text-align: left !important;
  }

  #trading-orders-table .order-status {
    min-height: 30px;
    padding-inline: 11px;
  }

  #trading-orders-table .order-pnl {
    display: inline-grid !important;
    justify-items: end !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
}

#trading-panel .trading-tab-dashboard-shell,
#trading-panel .trading-dashboard-shell {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#trading-panel #trading-dashboard,
#trading-panel .trading-dashboard {
  background: transparent !important;
}

#trading-panel .trading-dashboard-head {
  display: none;
}

#trading-panel .trading-orders {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 640px) {
  .kx-topbar-shell,
  .topbar {
    padding-inline: 10px !important;
    gap: 8px !important;
  }

  .kx-topbar-l {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .market-ticker {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0;
  }

  .market-ticker-item {
    height: 36px;
    padding-inline: 10px;
    align-items: center;
    border: 0;
    background: transparent !important;
    border-radius: 0;
  }

  .market-ticker-item:nth-child(n+2),
  .market-ticker-change,
  .kx-clock,
  .live-badge,
  .kx-topbar-shell .live-badge.kx-clock,
  .topbar .live-badge.kx-clock {
    display: none !important;
  }

  .kx-topbar-r,
  .topbar-right {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  .settings-nav-btn,
  .topbar-nav-btn,
  .kx-topbar-shell .kx-icon-btn,
  .topbar .topbar-nav-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 390px) {
  .kx-logo-text {
    display: none !important;
  }

  .market-ticker-symbol {
    font-size: 10px !important;
  }

  .market-ticker-price {
    font-size: 11px !important;
  }
}

/* Compact control mode selector. Keep this after legacy mobile tab overrides. */
.control-bar .control-bar-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  overflow: visible !important;
  border-bottom: 0 !important;
}

.focus-section {
  border-top: 0 !important;
}

.control-bar .control-bar-picker {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.control-bar .control-bar-picker-label {
  display: none !important;
  align-items: center !important;
  color: var(--kr-ink-3) !important;
  white-space: nowrap !important;
}

.control-bar .control-bar-select-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 360px !important;
}

.control-bar .control-bar-picker-meta {
  display: none !important;
}

.control-bar .control-bar-tablist {
  display: none !important;
}

.control-bar .control-bar-collapse {
  position: static !important;
  inset: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 10px !important;
  background: var(--kr-surface) !important;
}

@media (max-width: 640px) {
  .control-bar .control-bar-tabs {
    padding: 12px !important;
    gap: 10px !important;
  }

  .control-bar .control-bar-picker-label {
    display: none !important;
  }

  .control-bar .control-bar-select-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .control-bar .control-mode-button {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  .control-bar .control-bar-collapse {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* ============================================================
   KAIRION · Control Bar UX Optimizations (Scanner / Position / Single)
   Structure reshaped: desktop gets horizontal breathing, mobile keeps touch
   ============================================================ */

/* ─── Scanner Panel ───────────────────────────────────────
   Reshaped into a single compact toolbar row.
   Left: preset chips. Right: search + add.
   Headings and subtitles are hidden on desktop to save space. */

/* Container: single row, no wrapping */
.scanner-tools-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
}

/* Left side: preset chips (single row, no wrap) */
.preset-section {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hide the heavy heading block on desktop */
.preset-section-head {
  display: none !important;
}

/* Preset buttons: compact chips */
.preset-actions {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.preset-btn {
  border-radius: 8px !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--kr-elev) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.preset-btn:hover {
  background: var(--kr-surface-2) !important;
  color: var(--kr-ink) !important;
  border-color: var(--kr-line-2) !important;
}

/* Right side: search input (takes remaining space) */
.symbol-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hide heading block */
.symbol-search-head {
  display: none !important;
}

.symbol-search-row {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}
.symbol-input {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
.symbol-input::placeholder {
  color: var(--kr-ink-4) !important;
  font-size: 13px !important;
}

/* Selected shell: tighter status bar */
.selected-shell {
  margin-top: 8px !important;
}
.selected-toggle {
  min-height: 36px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
}
.selected-body {
  padding: 0 12px 8px !important;
}

/* ─── Unified Primary CTA Buttons ───────────────────────
   All submit / action buttons: white on dark, consistent 10px radius */
body .symbol-add-btn,
body .single-analyzer-btn,
body .pr-form-actions button[type="submit"] {
  min-height: 44px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
  color: var(--kr-bg) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.3) !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s !important;
}
body .symbol-add-btn:hover,
body .single-analyzer-btn:hover,
body .pr-form-actions button[type="submit"]:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  color: var(--kr-bg) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
body .symbol-add-btn:active,
body .single-analyzer-btn:active,
body .pr-form-actions button[type="submit"]:active {
  transform: translateY(1px) !important;
}

/* Selected shell: compact bar */
.selected-toggle {
  min-height: 40px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}
.selected-body {
  padding: 0 14px 10px !important;
}

/* ─── Position Review Panel ───────────────────────────── */

/* Kill all intrusive tags */
.pr-group-tag {
  display: none !important;
}

/* Desktop: 4-column grid so the form fills the width */
.pr-group-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.pr-group-fields label {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  gap: 4px !important;
  color: var(--kr-ink-3) !important;
  text-transform: uppercase !important;
}

/* Remove the purple left-bar accent — it’s visual noise */
.pr-group-fields label:has(input[required], input[aria-required="true"]) {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.pr-group-fields input,
.pr-group-fields select,
.pr-group-fields .kx-select .control-mode-button {
  min-height: 44px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* Advanced options: tighter bar */
.pr-advanced {
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-sm) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
.pr-advanced summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--kr-bg-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kr-ink-2) !important;
  min-height: 40px !important;
}
.pr-advanced summary small {
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--kr-ink-4) !important;
  font-weight: 400 !important;
}
.pr-advanced summary::after {
  content: '▾' !important;
  font-size: 11px !important;
  color: var(--kr-ink-4) !important;
  transition: transform .15s ease !important;
}
.pr-advanced[open] summary::after {
  transform: rotate(180deg) !important;
}
.pr-advanced .pr-group-fields {
  padding: 10px 12px 2px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* CTA: smaller, right-aligned */
.pr-form-actions {
  padding-top: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.pr-form-actions button[type="submit"] {
  min-height: 40px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: linear-gradient(180deg, #fff, #e4e4e7) !important;
  color: var(--kr-bg) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ─── Single Analyzer Panel ───────────────────────────── */

/* No title block needed — the form is self-explanatory */
.single-analyzer-head {
  display: none !important;
}

/* Desktop: inline form with better proportions */
.single-analyzer-form {
  grid-template-columns: 3fr 2fr auto !important;
  gap: 10px !important;
  align-items: end !important;
}

.single-analyzer-field {
  gap: 4px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--kr-ink-3) !important;
  text-transform: uppercase !important;
}

.single-analyzer-input,
.single-analyzer-select,
.single-analyzer-field .kx-select .control-mode-button {
  min-height: 44px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

.single-analyzer-btn {
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Hide empty single-output to avoid stray blank block */
.single-output:empty,
.position-review-output:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ─── Responsive: ≤900px (tablet) ─────────────────────── */

@media (max-width: 900px) {
  .scanner-tools-grid {
    gap: 12px !important;
  }

  .single-analyzer-form {
    grid-template-columns: 2fr 1.5fr auto !important;
  }
}

/* ─── Responsive: ≤720px (mobile) ─────────────────────── */

@media (max-width: 720px) {
  /* ─── Shared: compact panel padding ─── */
  .control-panel-body,
  .control-bar-panel {
    padding: 12px !important;
  }
  .control-bar-panel.is-active {
    padding: 0 !important;
  }

  /* ─── Scanner: buttons row → search row → status bar ─── */
  .scanner-tools-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .preset-section {
    width: 100% !important;
  }
  .preset-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .preset-btn {
    min-height: 44px !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  .symbol-search {
    width: 100% !important;
  }
  .symbol-search-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }
  .symbol-input {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .symbol-add-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
  }

  .selected-toggle {
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* ─── Position Review: 2×2 grid + full-width CTA ─── */
  .pr-group-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .pr-group-fields label {
    gap: 4px !important;
    font-size: 11px !important;
  }
  .pr-group-fields input,
  .pr-group-fields select,
  .pr-group-fields .kx-select .control-mode-button {
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
  .pr-group-fields label:has(input[required]) {
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .pr-advanced {
    margin-top: 6px !important;
  }
  .pr-advanced summary {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .pr-advanced .pr-group-fields {
    padding: 10px 12px 4px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pr-form-actions {
    padding-top: 10px !important;
    display: flex !important;
  }
  body .pr-form-actions button[type="submit"] {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
    color: var(--kr-bg) !important;
  }

  /* ─── Single Analyzer: coin full-width, period + eval side-by-side ─── */
  .single-analyzer-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: end !important;
  }
  .single-analyzer-field:first-child {
    grid-column: 1 / -1 !important;
  }
  .single-analyzer-input,
  .single-analyzer-select,
  .single-analyzer-field .kx-select .control-mode-button {
    min-height: 44px !important;
    font-size: 14px !important;
  }
  body .single-analyzer-btn {
    min-height: 44px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
    background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
    color: var(--kr-bg) !important;
    font-size: 14px !important;
  }
}

/* ─── Responsive: ≤430px (small phone) ────────────────── */

@media (max-width: 430px) {
  .preset-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .preset-btn {
    font-size: 12px !important;
    padding: 8px 2px !important;
    min-height: 44px !important;
  }

  body .symbol-add-btn,
  body .single-analyzer-btn,
  body .pr-form-actions button[type="submit"] {
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .pr-group-fields input,
  .pr-group-fields select,
  .pr-group-fields .kx-select .control-mode-button {
    min-height: 44px !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }

  .single-analyzer-input,
  .single-analyzer-select,
  .single-analyzer-field .kx-select .control-mode-button {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UI/UX optimization pass — kept at file end so these intentionally win
   the !important cascade over the scattered earlier rules.
   ═══════════════════════════════════════════════════════════════════ */

/* [#1] Topbar overlap on tablet widths (641–960px): the logo + nav + 3-item
   ticker + clock all competed for the row and overlapped. The ticker is
   secondary info — collapse it below 960px so the nav stays legible. It only
   shows on genuine desktop now. */
@media (max-width: 960px) {
  .kx-topbar-shell .market-ticker,
  .market-ticker {
    display: none !important;
  }
}

/* [#3] Hero headline number was an unlabeled giant figure that read as a
   duplicate of the single position card. Re-enable a concise eyebrow so it is
   unambiguously the portfolio-level total. */
.home-hero--positions .home-hero-title-wrap::before {
  content: '持倉損益 · 含已實現' !important;
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--kr-ink-3) !important;
  font-family: var(--kr-sans) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  opacity: 1 !important;
}

/* [#8] "每日下單上限" field when 無上限 is checked: hide the disabled input so
   the same state is not shown twice next to the checked toggle. */
#settings-panel .settings-input-compact.is-unlimited {
  display: none !important;
}

/* [#2] Scanner signal rows on mobile. A base-scope rule (the decision-area
   grid) was clobbering the intended mobile stack, so the desktop 5-column grid
   was squeezed onto phones and the TP/SL/RR/WR meta pills overlapped. Re-assert
   a clean stacked layout and let the meta pills wrap instead of colliding. */
@media (max-width: 720px) {
  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision decision"
      "symbol   dir"
      "score    price"
      "status   status"
      "meta     meta" !important;
    gap: 8px 10px !important;
  }
  .signal-decision-cell {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kr-line);
  }
  .signal-row-meta {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px 8px !important;
  }
  .signal-row-meta > span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
}

/* [#10] Mobile signal summary: optimize for quick scanning. Full TP/SL/RR,
   win-rate and analysis remain available by tapping the row. */
@media (max-width: 720px) {
  #focus-signals .profile-section-head {
    padding: 11px 14px !important;
  }
  #focus-signals .profile-section-bar {
    height: 24px !important;
  }
  #focus-signals .profile-section-copy {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  #focus-signals .profile-section-title {
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
  }
  #focus-signals .profile-section-kicker {
    order: 2 !important;
    margin: 0 !important;
    color: var(--kr-ink-3) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #focus-signals .profile-section-kicker::before {
    content: '· ' !important;
    color: var(--kr-ink-4) !important;
  }

  #focus-signals .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision status"
      "symbol   dir"
      "score    price" !important;
    gap: 7px 12px !important;
    min-height: 112px !important;
    padding: 11px 14px !important;
  }
  #focus-signals .signal-decision-cell {
    padding: 0 !important;
    align-self: center !important;
  }
  #focus-signals .signal-decision-cell strong {
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }
  #focus-signals .signal-symbol-cell {
    padding-left: 0 !important;
  }
  #focus-signals .signal-symbol-main {
    font-size: 15px !important;
  }
  #focus-signals .signal-symbol-sub {
    margin-top: 1px !important;
  }
  #focus-signals .signal-symbol-name {
    display: none !important;
  }
  #focus-signals .signal-symbol-reason {
    font-family: var(--kr-sans) !important;
    font-size: 11.5px !important;
  }
  #focus-signals .signal-score-cell {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 7px !important;
    padding-left: 0 !important;
  }
  #focus-signals .signal-score-num {
    font-size: 17px !important;
  }
  #focus-signals .signal-score-track {
    display: none !important;
  }
  #focus-signals .signal-score-label {
    font-family: var(--kr-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
  #focus-signals .signal-dir-cell,
  #focus-signals .signal-delta-cell,
  #focus-signals .signal-last-cell {
    padding-left: 0 !important;
    justify-self: end !important;
    text-align: right !important;
  }
  #focus-signals .signal-dir-chip {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }
  #focus-signals .signal-status-chip {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--kr-ink-3) !important;
    font-family: var(--kr-sans) !important;
    font-size: 11px !important;
  }
  #focus-signals .signal-row-meta {
    display: none !important;
  }

  #focus-signals .grid-mini-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "top mid"
      "bot mid" !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    gap: 3px 10px !important;
  }
  #focus-signals .grid-mini-note {
    display: none !important;
  }
  #focus-signals .grid-mini-mid {
    align-self: center !important;
    gap: 4px !important;
  }
  #focus-signals .grid-mini-mid .grid-mini-stat {
    font-size: 10px !important;
  }
  #focus-signals .grid-mini-bot {
    gap: 6px !important;
  }
  #focus-signals .grid-mini-stat {
    font-size: 10.5px !important;
  }
}

@media (max-width: 340px) {
  #focus-signals .grid-mini-bot .grid-mini-stat + .grid-mini-stat {
    display: none !important;
  }
}

/* [#11] Mobile strategy panel: restore the contained card hierarchy used by
   the rest of the dashboard and align every summary to the same two columns. */
@media (max-width: 720px) {
  #focus-signals.focus-section {
    padding: 8px !important;
    background: var(--kr-surface) !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-lg) !important;
    overflow: hidden !important;
  }
  #focus-signals .profile-section,
  #focus-signals .profile-section + .profile-section {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--kr-bg-2) !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-md) !important;
    overflow: hidden !important;
  }
  #focus-signals .profile-section + .profile-section {
    margin-top: 8px !important;
  }
  #focus-signals .profile-section-head {
    min-height: 46px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,0.018) !important;
    border-bottom: 1px solid var(--kr-line) !important;
  }
  #focus-signals .profile-section-bar {
    height: 22px !important;
  }
  #focus-signals .profile-section-title {
    line-height: 1.2 !important;
  }

  #focus-signals .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "symbol   dir"
      "decision status"
      "score    price" !important;
    align-items: center !important;
    gap: 7px 12px !important;
    min-height: 108px !important;
    padding: 12px !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
  #focus-signals .signal-list .signal-row + .signal-row {
    border-top: 1px solid var(--kr-line) !important;
  }
  #focus-signals .signal-symbol-cell,
  #focus-signals .signal-decision-cell,
  #focus-signals .signal-score-cell {
    justify-self: stretch !important;
    min-width: 0 !important;
  }
  #focus-signals .signal-dir-cell,
  #focus-signals .signal-delta-cell,
  #focus-signals .signal-last-cell {
    min-width: 68px !important;
  }
  #focus-signals .signal-symbol-main {
    line-height: 1.2 !important;
  }
  #focus-signals .signal-symbol-reason {
    display: block !important;
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #focus-signals .signal-score-cell {
    min-height: 28px !important;
  }

  #focus-signals .grid-mini-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "top mid"
      "bot mid" !important;
    min-height: 70px !important;
    padding: 11px 12px !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
  #focus-signals .grid-mini-row + .grid-mini-row {
    border-top: 1px solid var(--kr-line) !important;
  }
  #focus-signals .grid-mini-top,
  #focus-signals .grid-mini-bot {
    min-width: 0 !important;
  }
  #focus-signals .grid-mini-top {
    gap: 8px !important;
  }
  #focus-signals .grid-mini-bot {
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  #focus-signals .grid-mini-mid {
    min-width: 106px !important;
    justify-content: flex-end !important;
  }
}

/* Grid candidate summary: strong metric hierarchy and resilient wrapping. */
#focus-signals .grid-mini-row {
  grid-template-columns: minmax(180px, 1fr) minmax(210px, auto) !important;
  grid-template-areas:
    "top mid"
    "bot mid"
    "note note" !important;
  gap: 8px 24px !important;
  min-height: 86px !important;
  padding-block: 14px !important;
}
#focus-signals .grid-mini-top {
  align-items: center !important;
  gap: 12px !important;
}
#focus-signals .grid-mini-sym {
  font-size: 17px !important;
  font-weight: 680 !important;
  letter-spacing: -0.02em !important;
}
#focus-signals .grid-mini-bias {
  padding: 3px 9px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
#focus-signals .grid-mini-mid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(82px, auto)) !important;
  align-items: end !important;
  justify-content: end !important;
  gap: 10px 22px !important;
  min-width: 0 !important;
}
#focus-signals .grid-mini-metric {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  text-align: right !important;
}
#focus-signals .grid-mini-metric-label {
  color: var(--kr-ink-3) !important;
  font-family: var(--kr-sans) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
#focus-signals .grid-mini-return,
#focus-signals .grid-mini-metric-value {
  color: var(--kr-ink) !important;
  font-family: var(--kr-mono) !important;
  font-size: 19px !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#focus-signals .grid-mini-metric--return .grid-mini-return {
  font-size: 24px !important;
}
#focus-signals .grid-mini-metric-value small {
  margin-left: 4px !important;
  color: var(--kr-ink-3) !important;
  font-family: var(--kr-sans) !important;
  font-size: 11px !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}
#focus-signals .grid-mini-bot {
  align-items: center !important;
  gap: 8px 14px !important;
}
#focus-signals .grid-mini-bot .grid-mini-stat {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  color: var(--kr-ink-2) !important;
  font-size: 11px !important;
}
#focus-signals .grid-mini-bot .grid-mini-stat small {
  color: var(--kr-ink-4) !important;
  font-family: var(--kr-sans) !important;
  font-size: 9px !important;
  font-weight: 560 !important;
  letter-spacing: 0.06em !important;
}
#focus-signals .grid-mini-bot .grid-mini-stat + .grid-mini-stat::before {
  content: none !important;
}

@media (max-width: 720px) {
  #focus-signals .grid-mini-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "top"
      "mid"
      "bot" !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 14px 12px !important;
  }
  #focus-signals .grid-mini-top {
    justify-content: space-between !important;
  }
  #focus-signals .grid-mini-mid {
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) !important;
    justify-content: stretch !important;
    gap: 12px !important;
    padding: 11px 0 !important;
    border-top: 1px solid var(--kr-line) !important;
    border-bottom: 1px solid var(--kr-line) !important;
  }
  #focus-signals .grid-mini-metric {
    text-align: left !important;
  }
  #focus-signals .grid-mini-metric + .grid-mini-metric {
    padding-left: 14px !important;
    border-left: 1px solid var(--kr-line) !important;
  }
  #focus-signals .grid-mini-metric--return .grid-mini-return {
    font-size: 22px !important;
  }
  #focus-signals .grid-mini-bot {
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* [#12] Mobile automated-trading history and loss analysis. Use one contained
   panel with aligned rows instead of a stack of oversized cards. */
@media (max-width: 720px) {
  /* The running-orders list duplicates the home hero position cards, which are
     clearer on a narrow screen — hide it on mobile. Full order history stays
     on the 歷史 page. (Styling kept below for if it's re-enabled.) */
  #trading-dashboard .trading-orders {
    display: none !important;
    /* +5px inset (instead of -4px breakout) lands the card 9px from the page
       edge — the same contained-card edge as #focus-signals .profile-section,
       so the strategy/order cards align when stacked on mobile. */
    margin: 0 5px !important;
    padding: 8px !important;
    background: var(--kr-bg-2) !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-lg) !important;
    overflow: visible !important;
  }
  #trading-dashboard .trading-order-summary {
    margin: 0 0 8px !important;
  }
  #trading-dashboard .order-filter-button {
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: var(--kr-r-sm) !important;
    background: var(--kr-bg-2) !important;
  }
  #trading-orders-table tbody {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--kr-bg-2) !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-md) !important;
  }
  #trading-orders-table tr.trading-order-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "symbol status"
      "time direction"
      "levels pnl"
      "entry entry"
      "reason reason" !important;
    gap: 7px 12px !important;
    min-height: 140px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #trading-orders-table tr.trading-order-row + tr.trading-order-row {
    border-top: 1px solid var(--kr-line) !important;
  }
  #trading-orders-table td {
    font-size: 12px !important;
  }
  #trading-orders-table td::before {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
  }
  #trading-orders-table td:nth-child(2) {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  #trading-orders-table td:nth-child(1),
  #trading-orders-table td:nth-child(3),
  #trading-orders-table td:nth-child(8) {
    justify-content: flex-start !important;
  }
  #trading-orders-table td:nth-child(3) {
    justify-content: flex-end !important;
  }
  #trading-orders-table .order-status {
    min-height: 26px !important;
    padding: 3px 9px !important;
    font-size: 11px !important;
  }
  #trading-orders-table .order-pnl .pnl-percent {
    font-size: 13px !important;
  }
  #trading-orders-table .order-pnl .pnl-amount {
    font-size: 10.5px !important;
  }
  #trading-orders-table .order-reason {
    min-height: 16px !important;
  }
  #trading-orders-table .order-reason:not([title]),
  #trading-orders-table .order-reason[title="—"] {
    display: none !important;
  }

  #trading-dashboard .trading-loss-analysis {
    /* match .trading-orders inset so both align with the home strategy cards */
    margin: 12px 5px 0 !important;
    padding: 0 !important;
    background: var(--kr-bg-2) !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-lg) !important;
    overflow: hidden !important;
  }
  #trading-dashboard .trading-loss-analysis h4 {
    margin: 0 !important;
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--kr-line) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: transparent !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label value"
      "unit value" !important;
    align-items: center !important;
    gap: 2px 12px !important;
    min-height: 64px !important;
    padding: 10px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-card + .dynamic-sl-card {
    border-top: 1px solid var(--kr-line) !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-label {
    grid-area: label !important;
    margin: 0 !important;
    color: var(--kr-ink-2) !important;
    font-size: 12px !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-value {
    grid-area: value !important;
    justify-self: end !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  #trading-dashboard .trading-loss-analysis .dynamic-sl-unit {
    grid-area: unit !important;
    margin: 0 !important;
    color: var(--kr-ink-3) !important;
    font-size: 10.5px !important;
  }
  #trading-dashboard .trading-loss-analysis .la-hint {
    margin: 0 !important;
    padding: 11px 14px 13px !important;
    border-top: 1px solid var(--kr-line) !important;
    color: var(--kr-ink-3) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/* [#13] Unify the vertical rhythm on mobile. The stacked top-level blocks
   (hero → control bar → strategy/signal cards → activity) previously had
   gaps of 12 / 28 / 36 / 50px because each seam summed a different stack of
   margins + paddings. Normalize every block-to-block seam to 16px. */
@media (max-width: 720px) {
  .home-hero { margin-bottom: 16px !important; }

  /* control-bar frames its panel content with 16px above; the gap below the
     bar is carried entirely by its own margin so the seam is a single 16px. */
  .control-bar { margin-bottom: 16px !important; }
  .control-bar-panels { padding-top: 16px !important; padding-bottom: 0 !important; }
  #trading-dashboard .trading-loss-analysis { margin-top: 0 !important; }
  /* the alerts banner keeps a 12px margin even when empty, which inflated the
     dropdown→first-card seam to 28px — drop it when there's nothing to show. */
  #trading-dashboard .trading-alerts:empty { margin: 0 !important; }

  /* signal section: no extra margins of its own — the 16px above comes from
     control-bar's margin, the 16px below from the home-grid gap. */
  #focus-signals.focus-section { margin-top: 0 !important; margin-bottom: 0 !important; }
  .home-grid { gap: 16px !important; }

  /* Do not render an empty signal shell while the first scan is still loading.
     Once the renderer adds either signals or an empty-result message, the
     section returns to the normal card layout automatically. */
  #focus-signals:has(#signals-container:empty):has(#short-diag-panel:empty) {
    display: none !important;
  }
}

/* [#14] Desktop orders table — visual rebalance only (no data/behaviour
   change). Auto table-layout sized 時間 to ~209px while the middle columns
   stayed cramped; pin column widths so the row reads evenly, and give cells a
   little more breathing room. Mobile re-lays the table as cards, so this is
   scoped to wide viewports. */
@media (min-width: 721px) {
  #trading-dashboard #trading-orders-table { table-layout: fixed; }
  #trading-dashboard #trading-orders-table th,
  #trading-dashboard #trading-orders-table td { padding: 10px 12px !important; }
  #trading-dashboard #trading-orders-table th:nth-child(1),
  #trading-dashboard #trading-orders-table td:nth-child(1) { width: 11%; }  /* 時間 */
  #trading-dashboard #trading-orders-table th:nth-child(2),
  #trading-dashboard #trading-orders-table td:nth-child(2) { width: 9%; }   /* 幣種 */
  #trading-dashboard #trading-orders-table th:nth-child(3),
  #trading-dashboard #trading-orders-table td:nth-child(3) { width: 7%; }   /* 方向 */
  #trading-dashboard #trading-orders-table th:nth-child(4),
  #trading-dashboard #trading-orders-table td:nth-child(4) { width: 10%; }  /* 狀態 */
  #trading-dashboard #trading-orders-table th:nth-child(5),
  #trading-dashboard #trading-orders-table td:nth-child(5) { width: 18%; }  /* 使用策略 */
  #trading-dashboard #trading-orders-table th:nth-child(6),
  #trading-dashboard #trading-orders-table td:nth-child(6) { width: 11%; }  /* 失敗原因 */
  #trading-dashboard #trading-orders-table th:nth-child(7),
  #trading-dashboard #trading-orders-table td:nth-child(7) { width: 11%; }  /* 損益 */
  #trading-dashboard #trading-orders-table th:nth-child(8),
  #trading-dashboard #trading-orders-table td:nth-child(8) { width: 23%; }  /* 水位 */

  #trading-dashboard #trading-orders-table .order-entry-reason {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #trading-dashboard #trading-orders-table .order-entry-main {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #trading-dashboard #trading-orders-table .order-entry-score {
    display: block;
    margin-top: 3px;
    color: var(--k-ink-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
  }
}

/* Below-threshold candidates reuse the standard row layout. Directional
   candidates (待執行 / 觀察 with a long|short bias) still render a 做空/做多 chip,
   so the desktop template must keep a `dir` slot — otherwise the chip becomes an
   unplaced grid item and drops to a phantom row at the bottom-right. */
#focus-signals .signal-list-head--candidate,
#focus-signals .signal-list .signal-row--candidate {
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  grid-template-areas:
    "score symbol dir price status"
    "meta  meta   meta meta  meta" !important;
}

@media (max-width: 720px) {
  #focus-signals .signal-list .signal-row--candidate {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "symbol status"
      "score  price" !important;
    min-height: 82px !important;
  }
  /* Candidate (closest-miss) rows are non-actionable, so the mobile template
     only places symbol/status/score/price. The dir chip and TP/SL/RR meta have
     no matching area — left visible they become unplaced grid items that spawn
     phantom 0px tracks and shove the score text over the price. Hide them. */
  #focus-signals .signal-list .signal-row--candidate .signal-dir-cell,
  #focus-signals .signal-list .signal-row--candidate .signal-row-meta {
    display: none !important;
  }
}

/* Analysis view: mobile-native metric and attribution layouts. */
@media (max-width: 720px) {
  .loading-overlay {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 68px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--kr-line-2) !important;
    border-left: 3px solid var(--kr-violet) !important;
    border-radius: 14px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 2px 10px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38) !important;
  }

  .loading-overlay .spinner,
  .loading-overlay.is-slow .spinner {
    width: 24px !important;
    height: 24px !important;
  }

  .loading-overlay .loading-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .loading-overlay .loading-sub {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  #analysis-view .history-container,
  #strategy-view .history-container {
    gap: 12px !important;
  }

  #analysis-view .history-section,
  #strategy-view .history-section {
    padding: 16px 14px !important;
  }

  #analysis-view .history-section-header,
  #strategy-view .history-section-header {
    margin-bottom: 10px !important;
  }

  #analysis-view .history-section-title,
  #strategy-view .history-section-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  #analysis-view .unit-hint,
  #strategy-view .unit-hint {
    display: block !important;
    margin: 5px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #loss-shape-section .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #loss-shape-section .metrics-grid > .metric-card {
    grid-column: auto !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    text-align: left !important;
  }

  #loss-shape-section .metric-value-row {
    min-width: 0 !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
  }

  #loss-shape-section .metric-value {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    /* 22px 對齊成效總覽的 KPI 字級，同一頁只有一種 KPI 尺寸。 */
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  #loss-shape-section .metric-unit {
    flex: 0 0 auto !important;
  }

  #loss-shape-section .metric-sublabel {
    margin-top: 2px !important;
  }

  /* 灰階說明文字收斂成兩階：附註/標籤 12px、導語 13px。sublabel 需要
     !important 蓋掉 index.html 上的 font-size:11px inline style；
     conclusion-text/section-meta-label 則是收編 kx-v5 的 12.5px/11.5px。 */
  #analysis-view .metric-sublabel,
  #strategy-view .metric-sublabel,
  #history-view .metric-sublabel {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #analysis-view .conclusion-text,
  #strategy-view .conclusion-text,
  #history-view .conclusion-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  #analysis-view .section-meta-label,
  #strategy-view .section-meta-label,
  #history-view .section-meta-label {
    font-size: 12px !important;
  }

  #loss-shape-section .attribution-hint {
    margin: 4px 2px 0 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  #entry-attribution-section .attribution-hint {
    margin-bottom: 12px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  #entry-attribution-section .attribution-grid {
    gap: 22px !important;
  }

  #entry-attribution-section .attribution-col {
    min-width: 0 !important;
  }

  #entry-attribution-section .attribution-col-title {
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }

  #entry-attribution-section .attribution-table-wrapper {
    margin: 0 !important;
    overflow: visible !important;
  }

  #entry-attribution-section .attribution-table,
  #entry-attribution-section .attribution-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #entry-attribution-section .attribution-table thead {
    display: none !important;
  }

  #entry-attribution-section .attribution-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 16px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: 14px !important;
    background: var(--kr-bg-2) !important;
  }

  #entry-attribution-section .attribution-table tr:last-child {
    margin-bottom: 0 !important;
  }

  #entry-attribution-section .attribution-table td {
    display: flex !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-family: var(--kr-mono) !important;
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
  }

  #entry-attribution-section .attribution-table td:first-child {
    grid-column: 1 / -1 !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid var(--kr-line) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  #entry-attribution-section .attribution-table td::before {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--kr-ink-3) !important;
  }

  #entry-attribution-section .attribution-table td:nth-child(2)::before { content: "筆數"; }
  #entry-attribution-section .attribution-table td:nth-child(3)::before { content: "平均 R"; }
  #entry-attribution-section .attribution-table td:nth-child(4)::before { content: "R 淨效益"; }
  #entry-attribution-section .attribution-table td:nth-child(5)::before { content: "勝率"; }
  #entry-attribution-section .attribution-table td:nth-child(6)::before { content: "累積損益"; }

  #entry-attribution-section .risk-control-table td:nth-child(2)::before { content: "Shadow"; }
  #entry-attribution-section .risk-control-table td:nth-child(3)::before { content: "假拒率"; }
  #entry-attribution-section .risk-control-table td:nth-child(4)::before { content: "Shadow 平均 R"; }
  #entry-attribution-section .risk-control-table td:nth-child(5)::before { content: "Live 降倉"; }
  #entry-attribution-section .risk-control-table td:nth-child(6)::before { content: "建議"; }

  #entry-attribution-section .attribution-row--untrusted {
    opacity: 0.58 !important;
  }

  #entry-attribution-section .no-data {
    grid-column: 1 / -1 !important;
    display: block !important;
    padding: 8px !important;
    text-align: center !important;
  }
}

/* Global long-page navigation. Kept on the left to avoid toast collisions. */
.kr-back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--kr-line-2);
  border-radius: 50%;
  background: rgba(20, 22, 29, 0.94);
  color: var(--kr-ink-2);
  box-shadow: var(--kr-shadow-md);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.94);
  transition:
    opacity var(--kr-motion-fast) var(--kr-ease-out),
    transform var(--kr-motion-fast) var(--kr-ease-out),
    visibility var(--kr-motion-fast);
}

.kr-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.kr-back-to-top:hover {
  border-color: var(--kr-violet-line);
  background: var(--kr-surface-2);
  color: var(--kr-ink);
  transform: translateY(-2px);
}

.kr-back-to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  .kx-logo,
  #settings-nav,
  .control-bar-collapse {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .control-mode-button {
    height: 44px !important;
    min-height: 44px !important;
  }

  .control-bar .control-bar-collapse {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .kr-back-to-top {
    left: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  body:has(.loading-overlay:not(.hidden)) .kr-back-to-top {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* ── 網格候選卡 ──────────────────────────────────────────────────────────
   The 網格 panel reuses the swing/short .signal-row markup (see
   buildGridCandidatesHtml includeHead=false) so it lines up with 波段. These
   rules override the generic #focus-signals .signal-list .signal-row grid
   template (which assumes the 5-cell directional layout) down to the 4 cells
   a grid candidate has: 月報酬 (score slot) · 標的+原因 · 現價 · 偏向 chip.
   The bias chip sits to the RIGHT of the price. Placed at end-of-file so they
   win the equal-specificity cascade against the directional row rules above. */
#focus-signals .signal-list .signal-row--gridmini {
  /* The score slot holds "月報酬 %/月" — three-digit returns (≥100%) outgrow a
     fixed track, so let the column widen to its content instead of overlapping
     the symbol cell (which yields via its minmax(0, 1fr)). */
  grid-template-columns: minmax(86px, max-content) minmax(0, 1fr) auto auto !important;
  grid-template-areas: "score symbol dir price" !important;
  align-items: center !important;
  gap: 18px 14px !important;
  min-height: 0 !important;
  cursor: default !important;
}
#focus-signals .signal-row--gridmini .signal-score-line {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 2px !important;
  line-height: 1.1 !important;
}
#focus-signals .signal-row--gridmini .signal-score-num {
  font-size: 16px !important;
}
#focus-signals .signal-row--gridmini .signal-score-den {
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
#focus-signals .signal-row--gridmini .signal-dir-cell {
  justify-self: end !important;
}
#focus-signals .signal-row--gridmini .signal-symbol-cell {
  justify-content: center !important;
}

@media (max-width: 720px) {
  #focus-signals .signal-list .signal-row--gridmini {
    grid-template-columns: minmax(80px, max-content) minmax(0, 1fr) auto auto !important;
    grid-template-areas: "score symbol dir price" !important;
    gap: 0 12px !important;
    min-height: 0 !important;
    padding: 13px 14px !important;
  }
  #focus-signals .signal-row--gridmini .signal-last-cell,
  #focus-signals .signal-row--gridmini .signal-dir-cell {
    align-self: center !important;
  }
}

/* ── Mobile persistent primary tabs ───────────────────────────────────── */
.kx-mobile-tabs {
  display: none !important;
}

@media (max-width: 720px) {
  :root {
    --kr-mobile-tab-h: calc(74px + env(safe-area-inset-bottom));
  }

  html {
    scroll-padding-bottom: var(--kr-mobile-tab-h);
  }

  body {
    padding-bottom: var(--kr-mobile-tab-h) !important;
  }

  .main,
  .history-main {
    padding-bottom: calc(var(--kr-mobile-tab-h) + 20px) !important;
  }

  .kx-mobile-tabs {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    height: 58px !important;
    padding: 6px !important;
    border: 1px solid var(--kr-line-2) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--kr-surface) 92%, transparent) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 18px 52px rgba(0,0,0,0.48) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
    transform: translateZ(0) !important;
  }

  .kx-mobile-tabs a {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    border-radius: 18px !important;
    color: var(--kr-ink-3) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition:
      background 180ms var(--kr-ease-out),
      color 180ms var(--kr-ease-out),
      transform 180ms var(--kr-ease-out) !important;
  }

  .kx-mobile-tabs a:active {
    transform: scale(0.98) !important;
  }

  .kx-mobile-tabs a.is-active {
    color: var(--kr-ink) !important;
    background: var(--kr-elev) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset !important;
  }

  .kx-mobile-tab-label {
    display: block !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .kr-back-to-top {
    bottom: calc(var(--kr-mobile-tab-h) + 12px) !important;
  }
}

@keyframes kr-view-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.kr-view-enter {
  animation: kr-view-enter 220ms var(--kr-ease-out) both !important;
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .kr-view-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   KAIRION · Micro-interaction polish (Phase 2)
   Extends the KairionMotion system. Honours docs/design-language.md §8:
   slow / steady / restrained, 160–220ms, state-changes only.
   Everything here is suppressed by the global prefers-reduced-motion
   rule (§ ~2498). Tokens only — no wild hex.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Skeleton shimmer — replaces bare "載入中" flicker ──────── */
@keyframes kr-shimmer {
  0%   { background-position: -160% 0; }
  100% { background-position: 160% 0; }
}
.market-ticker-item.is-loading .market-ticker-price,
.market-ticker-item.is-loading .market-ticker-change {
  color: transparent !important;
  border-radius: 6px !important;
  background-image: linear-gradient(
    90deg,
    var(--kr-surface-2) 0%,
    var(--kr-elev) 50%,
    var(--kr-surface-2) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: kr-shimmer 1.4s ease-in-out infinite !important;
}
/* Give the ticker placeholders a real block width so the shimmer reads
   as "data arriving" rather than two stray pills. */
.market-ticker-item.is-loading .market-ticker-price { display: inline-block; min-width: 52px; height: 11px; }
.market-ticker-item.is-loading .market-ticker-change { display: inline-block; min-width: 36px; height: 10px; }

/* ── 2. First-paint entrance: market ticker (one-time, nodes persist) ── */
@keyframes kr-ticker-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kr-motion-ready .market-ticker-item {
  animation: kr-ticker-in var(--kr-motion-slow) var(--kr-ease-out) both;
}
.kr-motion-ready .market-ticker-item:nth-child(1) { animation-delay: 0ms; }
.kr-motion-ready .market-ticker-item:nth-child(2) { animation-delay: 35ms; }
.kr-motion-ready .market-ticker-item:nth-child(3) { animation-delay: 70ms; }
.kr-motion-ready .market-ticker-item:nth-child(4) { animation-delay: 105ms; }
.kr-motion-ready .market-ticker-item:nth-child(5) { animation-delay: 140ms; }
.kr-motion-ready .market-ticker-item:nth-child(n+6) { animation-delay: 175ms; }

/* ── 3. New-item entrance — only fires for a genuinely new card
   (a position that wasn't on the book last render). Driven by JS so
   live P&L updates on existing cards never re-animate. ──────────── */
@keyframes kr-enter-item {
  from { opacity: 0; transform: translateY(6px) scale(.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kr-enter-item {
  animation: kr-enter-item var(--kr-motion-slow) var(--kr-ease-emphasized) both;
  animation-delay: var(--kr-stagger, 0ms);
}

/* ── 4. Tab-panel content stagger — runs on user-initiated switch ── */
@keyframes kr-panel-child-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.control-bar-panel.is-active > * {
  animation: kr-panel-child-in var(--kr-motion-base) var(--kr-ease-out) both;
}
.control-bar-panel.is-active > :nth-child(1) { animation-delay: 0ms; }
.control-bar-panel.is-active > :nth-child(2) { animation-delay: 40ms; }
.control-bar-panel.is-active > :nth-child(3) { animation-delay: 80ms; }
.control-bar-panel.is-active > :nth-child(n+4) { animation-delay: 120ms; }

/* ── 5. Active-tab underline: snap-in instead of hard appear ──────── */
@keyframes kr-underline-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.control-bar-tab.is-active::after {
  transform-origin: center !important;
  animation: kr-underline-in var(--kr-motion-base) var(--kr-ease-emphasized) both !important;
}

/* ── 6. Toast success — checkmark pops in ───────────────────────── */
@keyframes kr-check-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.kx-toast--success .kx-toast-icon::before,
.kx-toast--error .kx-toast-icon::before {
  display: inline-block;
  animation: kr-check-pop var(--kr-motion-slow) var(--kr-ease-emphasized) both;
}

/* ── 7. Position card hover — lift + reveal secondary meta ──────────
   Detail rows sit one ink-step quieter at rest, then brighten on hover.
   Info is never hidden (stays AA-legible), so touch / no-hover is fine. */
.home-position-card {
  transition:
    transform var(--kr-motion-base) var(--kr-ease-out),
    box-shadow var(--kr-motion-base) var(--kr-ease-out) !important;
}
@media (hover: hover) {
  .home-position-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--kr-shadow-lg) !important;
  }
  .home-position-card .home-position-card-meta dd {
    transition: color var(--kr-motion-base) var(--kr-ease-out) !important;
  }
  .home-position-card:hover .home-position-card-meta dd {
    color: var(--kr-ink) !important;
  }
}

/* ── Mobile trade history: card rows instead of horizontal spreadsheet ── */
@media (max-width: 720px) {
  #history-view #trades-wrapper {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  #history-view #trades-table,
  #history-view #trades-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #history-view #trades-table thead {
    display: none !important;
  }

  #history-view #trades-table tr.trade-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "symbol pnl"
      "side r"
      "time score"
      "exp history"
      "reason reason" !important;
    gap: 8px 14px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-md) !important;
    background: var(--kr-surface) !important;
    box-shadow: var(--kr-shadow-sm) !important;
  }

  #history-view #trades-table tr.trade-row.is-expanded {
    margin-bottom: 0 !important;
    border-color: var(--kr-violet-line) !important;
  }

  #history-view #trades-table tr.trade-row td {
    display: flex !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
  }

  #history-view #trades-table tr.trade-row td::before {
    color: var(--kr-ink-3) !important;
    font-family: var(--kr-sans) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
  }

  #history-view #trades-table .td-symbol {
    grid-area: symbol !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  #history-view #trades-table .td-pnl {
    grid-area: pnl !important;
    align-items: flex-end !important;
    text-align: right !important;
    font-size: 17px !important;
  }

  #history-view #trades-table .td-side { grid-area: side !important; }
  #history-view #trades-table .td-r {
    grid-area: r !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  #history-view #trades-table .td-time { grid-area: time !important; }
  #history-view #trades-table .td-score {
    grid-area: score !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  #history-view #trades-table .td-exp-winrate { grid-area: exp !important; }
  #history-view #trades-table .td-winrate {
    grid-area: history !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  #history-view #trades-table .td-reason {
    grid-area: reason !important;
    display: flex !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--kr-line) !important;
    color: var(--kr-ink-2) !important;
  }

  #history-view #trades-table .td-side::before { content: "方向"; }
  #history-view #trades-table .td-score::before { content: "分數"; }
  #history-view #trades-table .td-exp-winrate::before { content: "預估勝率"; }
  #history-view #trades-table .td-winrate::before { content: "歷史勝率"; }
  #history-view #trades-table .td-pnl::before { content: "損益"; }
  #history-view #trades-table .td-r::before { content: "R 倍數"; }
  #history-view #trades-table .td-reason::before { content: "平倉原因"; }

  #history-view #trades-table .trade-detail-row {
    display: block !important;
    margin: 0 0 10px !important;
  }

  #history-view #trades-table .trade-detail-row > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #history-view #trades-table .trade-detail-content {
    border-color: var(--kr-violet-line) !important;
    border-radius: 0 0 var(--kr-r-md) var(--kr-r-md) !important;
    background: var(--kr-bg-2) !important;
  }
}

/* ── Design-language consolidation: history / analysis / settings / trading ── */
#history-view .history-section,
#analysis-view .history-section,
#strategy-view .history-section,
#history-view .conclusion-banner,
#analysis-view .conclusion-banner,
#strategy-view .conclusion-banner {
  border-color: var(--kr-line) !important;
  background: var(--kr-surface) !important;
  box-shadow: var(--kr-shadow-sm) !important;
}

#history-view .history-section-title,
#analysis-view .history-section-title,
#strategy-view .history-section-title,
#history-view .section-meta-label,
#analysis-view .section-meta-label,
#strategy-view .section-meta-label,
#history-view .metric-label,
#analysis-view .metric-label,
#strategy-view .metric-label,
#history-view .health-label,
#analysis-view .health-label,
#strategy-view .health-label,
#history-view .unit-hint,
#analysis-view .unit-hint,
#strategy-view .unit-hint,
#history-view .footer,
#analysis-view .footer,
#strategy-view .footer {
  color: var(--kr-ink-3) !important;
}

#history-view .conclusion-text,
#analysis-view .conclusion-text,
#strategy-view .conclusion-text,
#history-view .metric-value,
#analysis-view .metric-value,
#strategy-view .metric-value,
#history-view .health-value,
#analysis-view .health-value,
#strategy-view .health-value,
#history-view .sp-name,
#strategy-view .sp-name,
#history-view .detail-value,
#analysis-view .detail-value,
#strategy-view .detail-value {
  color: var(--kr-ink) !important;
}

#history-view .period-select,
#analysis-view .period-select,
#strategy-view .period-select,
#history-view .export-btn,
#analysis-view .export-btn,
#strategy-view .export-btn,
#history-view .history-range-tabs,
#analysis-view .history-range-tabs,
#strategy-view .history-range-tabs,
#history-view .chart-shell,
#analysis-view .chart-shell,
#strategy-view .chart-shell {
  border-color: var(--kr-line) !important;
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-2) !important;
}

#history-view .period-select:hover,
#analysis-view .period-select:hover,
#strategy-view .period-select:hover,
#history-view .export-btn:hover,
#analysis-view .export-btn:hover,
#strategy-view .export-btn:hover,
#history-view .history-range-tab:hover,
#analysis-view .history-range-tab:hover,
#strategy-view .history-range-tab:hover {
  border-color: var(--kr-violet-line) !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-ink) !important;
}

#history-view .history-range-tab.is-active,
#analysis-view .history-range-tab.is-active,
#strategy-view .history-range-tab.is-active {
  background: var(--kr-surface-2) !important;
  color: var(--kr-ink) !important;
}

#history-view .metrics-grid,
#analysis-view .metrics-grid,
#strategy-view .metrics-grid,
#history-view .health-grid,
#analysis-view .health-grid,
#strategy-view .health-grid {
  /* Cards already carry their own bg-2 fill + border; the grid stays
     transparent so the 12px gaps read as the dark section, not a pale
     --kr-line band. (--kr-line is a near-white tint — using it as the grid
     fill produced visible light strips between/under the cards.) */
  border: 0 !important;
  background: transparent !important;
}

#history-view .metric-card,
#analysis-view .metric-card,
#strategy-view .metric-card,
#history-view .health-card,
#analysis-view .health-card,
#strategy-view .health-card,
#strategy-view .sp-card {
  border-color: var(--kr-line) !important;
  background: var(--kr-bg-2) !important;
}

#strategy-view .sp-card:hover,
#history-view .trades-table tbody tr:hover,
#history-view .symbols-table tbody tr:hover,
#analysis-view .trades-table tbody tr:hover,
#strategy-view .trades-table tbody tr:hover,
#analysis-view .symbols-table tbody tr:hover,
#strategy-view .symbols-table tbody tr:hover {
  background: var(--kr-surface-2) !important;
}

#history-view .trades-table thead,
#history-view .symbols-table th,
#analysis-view .trades-table thead,
#analysis-view .symbols-table th,
#strategy-view .trades-table thead,
#strategy-view .symbols-table th {
  background: var(--kr-bg-2) !important;
}

#history-view .trades-table th,
#history-view .symbols-table th,
#analysis-view .trades-table th,
#analysis-view .symbols-table th,
#strategy-view .trades-table th,
#strategy-view .symbols-table th {
  border-bottom-color: var(--kr-line) !important;
  color: var(--kr-ink-3) !important;
}

#history-view .trades-table tbody tr,
#history-view .symbols-table tbody tr,
#analysis-view .trades-table tbody tr,
#analysis-view .symbols-table tbody tr,
#strategy-view .trades-table tbody tr,
#strategy-view .symbols-table tbody tr {
  border-bottom-color: var(--kr-line) !important;
}

#history-view .td-time,
#history-view .td-winrate,
#history-view .td-reason,
#history-view .pnl-value.pnl-open,
#history-view .pnl-value.pnl-float .pnl-float-tag,
#history-view .detail-hint,
#history-view .winrate-value .winrate-n,
#history-view .winrate-value.winrate-thin,
#history-view .strategy-badge,
#history-view .strategy-flag,
#history-view .sp-subtitle,
#history-view .sp-sub,
#history-view .sp-val-count,
#history-view .sample-note,
#history-view .no-data,
#analysis-view .no-data,
#strategy-view .no-data {
  color: var(--kr-ink-3) !important;
}

#history-view .td-exp-winrate,
#history-view .strategy-flag.on,
#strategy-view .strategy-flag.on {
  color: var(--kr-violet-2) !important;
}

#history-view .pnl-value.pnl-zero,
#analysis-view .pnl-value.pnl-zero,
#strategy-view .pnl-value.pnl-zero {
  color: var(--kr-ink-4) !important;
}

#history-view .pnl-value.positive,
#analysis-view .pnl-value.positive,
#strategy-view .pnl-value.positive,
#history-view .sp-pnl.pos,
#strategy-view .sp-pnl.pos,
#history-view .sp-toggle.on,
#strategy-view .sp-toggle.on,
#history-view .coin-chip.positive .coin-chip-val {
  color: var(--kr-up) !important;
}

#history-view .pnl-value.negative,
#analysis-view .pnl-value.negative,
#strategy-view .pnl-value.negative,
#history-view .sp-pnl.neg,
#strategy-view .sp-pnl.neg,
#history-view .coin-chip.negative .coin-chip-val,
#history-view .conclusion-text.error-text,
#analysis-view .conclusion-text.error-text,
#strategy-view .conclusion-text.error-text {
  color: var(--kr-dn) !important;
}

/* 小樣本（n<10）與已關閉策略的損益降灰 — 必須跟上面的 !important
   同層對打，否則 history.css 的規則永遠輸（既有雙 source of truth 雷）。 */
#history-view .sp-pnl.sp-pnl--thin.pos,
#strategy-view .sp-pnl.sp-pnl--thin.pos,
#history-view .sp-pnl.sp-pnl--thin.neg,
#strategy-view .sp-pnl.sp-pnl--thin.neg,
#history-view .sp-card.disabled .sp-pnl.pos,
#strategy-view .sp-card.disabled .sp-pnl.pos,
#history-view .sp-card.disabled .sp-pnl.neg,
#strategy-view .sp-card.disabled .sp-pnl.neg {
  color: var(--kr-ink-3) !important;
}

#history-view .strategy-badge,
#strategy-view .strategy-badge,
#history-view .strategy-flag,
#strategy-view .strategy-flag,
#history-view .sample-note,
#analysis-view .sample-note,
#strategy-view .sample-note,
#history-view .coin-chip,
#history-view .coin-chip-toggle {
  border-color: var(--kr-line) !important;
  background: var(--kr-bg-2) !important;
}

#history-view .coin-chip.positive {
  border-color: var(--kr-up-line) !important;
  background: var(--kr-up-dim) !important;
}

#history-view .coin-chip.negative {
  border-color: var(--kr-dn-line) !important;
  background: var(--kr-dn-dim) !important;
}

#history-view .strategy-flag.on,
#strategy-view .strategy-flag.on {
  border-color: var(--kr-violet-line) !important;
  background: var(--kr-violet-dim) !important;
}

#history-view .strategy-flag.coverage .starved,
#strategy-view .strategy-flag.coverage .starved {
  color: var(--kr-warn) !important;
  border-color: var(--kr-warn-line) !important;
  background: var(--kr-warn-dim) !important;
}

#history-view .sp-toggle-track,
#strategy-view .sp-toggle-track,
#history-view .sp-val-bar,
#strategy-view .sp-val-bar {
  background: var(--kr-line-2) !important;
}

#history-view .sp-toggle-knob,
#strategy-view .sp-toggle-knob {
  background: var(--kr-ink-3) !important;
}

#history-view .sp-toggle.on .sp-toggle-track,
#strategy-view .sp-toggle.on .sp-toggle-track {
  background: var(--kr-up-dim) !important;
}

#history-view .sp-toggle.on .sp-toggle-knob,
#strategy-view .sp-toggle.on .sp-toggle-knob,
#history-view .sp-val-validated .sp-val-bar i,
#strategy-view .sp-val-validated .sp-val-bar i {
  background: var(--kr-up) !important;
}

#history-view .sp-val-bar i,
#history-view .sp-val-collecting .sp-val-bar i,
#strategy-view .sp-val-bar i,
#strategy-view .sp-val-collecting .sp-val-bar i {
  background: var(--kr-violet-2) !important;
}

#history-view .sp-val-starved .sp-val-bar i,
#strategy-view .sp-val-starved .sp-val-bar i {
  background: var(--kr-warn) !important;
}

#history-view .trade-detail-row,
#analysis-view .trade-detail-row,
#strategy-view .trade-detail-row,
#history-view .trades-table tbody tr.trade-row.is-expanded {
  background: var(--kr-violet-dim) !important;
}

#history-view .trade-detail-content,
#analysis-view .trade-detail-content,
#strategy-view .trade-detail-content {
  border-color: var(--kr-line) !important;
  background: var(--kr-bg-2) !important;
}

#history-view .detail-label,
#analysis-view .detail-label,
#strategy-view .detail-label {
  color: var(--kr-ink-3) !important;
}

#history-view .daily-pnl-table .dp-total-row td {
  border-top-color: var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
}

#history-view .daily-pnl-table .dp-total-row .td-time,
#history-view .coin-chip-sym {
  color: var(--kr-ink-2) !important;
}

/* ── Mobile history reading flow ────────────────────────────────────────
   Result first, explanation second, deeper evidence on demand. Both data
   tables become vertical cards so reading never depends on horizontal scroll. */
.history-section-description {
  display: none;
  margin: 5px 0 0;
  color: var(--kr-ink-3);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  #history-view .history-main,
  #history-view.history-main {
    padding-inline: 10px !important;
  }

  #history-view .history-container {
    gap: 12px !important;
  }

  #history-view .history-section {
    gap: 16px !important;
    padding: 16px !important;
  }

  #history-view .history-section-heading,
  #history-view .history-section-description {
    display: block;
    width: 100%;
  }

  #history-view .history-section-title {
    color: var(--kr-ink) !important;
    /* 16px 對齊分析/策略分頁的手機標題字級。 */
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #history-view .history-section-title .unit-hint {
    margin-left: 5px;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  #history-view .daily-pnl-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  #history-view .daily-pnl-header .history-section-heading {
    min-width: 0 !important;
  }

  #history-view .daily-pnl-header .section-meta {
    display: block !important;
    width: auto !important;
  }

  #history-view .daily-pnl-header .history-control {
    display: block !important;
  }

  #history-view .daily-pnl-header .period-select {
    width: auto !important;
    min-width: 116px !important;
    min-height: 40px !important;
    padding: 0 32px 0 12px !important;
    font-size: 13px !important;
  }

  #history-view .section-meta.history-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #history-view .history-control {
    display: flex !important;
    flex: none !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    color: var(--kr-ink-3) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  #history-view .history-control .period-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 34px 0 12px !important;
    color: var(--kr-ink) !important;
    font-size: 13px !important;
  }

  #history-view #export-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  #history-view #daily-pnl-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #history-view #daily-pnl-table,
  #history-view #daily-pnl-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #history-view #daily-pnl-table thead {
    display: none !important;
  }

  #history-view #daily-pnl-table .daily-pnl-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "date net"
      "realized realized"
      "fee funding" !important;
    gap: 10px 14px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-md) !important;
    background: var(--kr-surface) !important;
  }

  #history-view #daily-pnl-table .daily-pnl-row td {
    display: flex !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
    white-space: normal !important;
  }

  #history-view #daily-pnl-table .daily-pnl-row td::before {
    color: var(--kr-ink-3) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .06em !important;
    line-height: 1.2 !important;
  }

  #history-view #daily-pnl-table .td-time { grid-area: date !important; }
  #history-view #daily-pnl-table .td-net {
    grid-area: net !important;
    align-items: flex-end !important;
    text-align: right !important;
    font-size: 17px !important;
  }
  #history-view #daily-pnl-table .td-realized {
    grid-area: realized !important;
    padding: 2px 0 !important;
  }
  #history-view #daily-pnl-table .td-fee { grid-area: fee !important; }
  #history-view #daily-pnl-table .td-funding {
    grid-area: funding !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  #history-view #daily-pnl-table .daily-pnl-row .td-coins {
    display: none !important;
  }

  #history-view #daily-pnl-table .daily-pnl-row .td-time::before { content: "日期"; }
  #history-view #daily-pnl-table .daily-pnl-row .td-net::before { content: "當日淨盈虧"; }
  #history-view #daily-pnl-table .daily-pnl-row .td-realized::before { content: "已實現損益"; }
  #history-view #daily-pnl-table .daily-pnl-row .td-fee::before { content: "手續費"; }
  #history-view #daily-pnl-table .daily-pnl-row .td-funding::before { content: "資金費"; }

  #history-view #daily-pnl-table .dp-total-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 12px !important;
    padding: 14px !important;
    border: 1px solid var(--kr-line-2) !important;
    border-radius: var(--kr-r-md) !important;
    background: var(--kr-bg-2) !important;
  }

  #history-view #daily-pnl-table .dp-total-row td {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #history-view #daily-pnl-table .dp-total-row .td-time,
  #history-view #daily-pnl-table .dp-total-row .td-net {
    display: flex !important;
    align-items: flex-start !important;
  }

  #history-view #daily-pnl-table .dp-total-row .td-time {
    color: var(--kr-ink-2) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #history-view #daily-pnl-table .dp-total-row .td-net {
    flex-direction: column !important;
    align-items: flex-end !important;
    font-size: 17px !important;
  }

  #history-view #daily-pnl-table .dp-total-row .td-net::before {
    content: "累計淨盈虧";
    color: var(--kr-ink-3);
    font-family: var(--kr-sans);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    line-height: 1.2;
  }

  #history-view #trades-table tr.trade-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "symbol symbol symbol pnl pnl pnl"
      "side side r r time time"
      "score score reason reason reason reason"
      "exp exp exp history history history"
      "action action action action action action" !important;
    gap: 11px 10px !important;
    padding: 15px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #history-view #trades-table .td-time {
    align-items: flex-end !important;
    text-align: right !important;
  }

  #history-view #trades-table .td-score,
  #history-view #trades-table .td-exp-winrate,
  #history-view #trades-table .td-winrate {
    padding-top: 10px !important;
    border-top: 1px solid var(--kr-line) !important;
  }

  #history-view #trades-table .td-exp-winrate {
    align-items: center !important;
    text-align: center !important;
  }

  #history-view #trades-table .td-side,
  #history-view #trades-table .td-r,
  #history-view #trades-table .td-time,
  #history-view #trades-table .td-score,
  #history-view #trades-table .td-exp-winrate,
  #history-view #trades-table .td-winrate,
  #history-view #trades-table .td-reason {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 5px !important;
  }

  #history-view #trades-table .td-time,
  #history-view #trades-table .td-r,
  #history-view #trades-table .td-winrate {
    justify-content: flex-end !important;
  }

  #history-view #trades-table .td-exp-winrate {
    justify-content: center !important;
  }

  #history-view #trades-table .td-side::before { content: "方向："; }
  #history-view #trades-table .td-r::before { content: "R："; }
  #history-view #trades-table .td-time::before { content: "時間："; }
  #history-view #trades-table .td-score::before { content: "分："; }
  #history-view #trades-table .td-exp-winrate::before { content: "預估："; }
  #history-view #trades-table .td-winrate::before { content: "歷史："; }
  #history-view #trades-table .td-reason::before { content: "平倉原因："; }

  #history-view #trades-table tr.trade-row::after {
    content: "查看交易詳情　⌄";
    grid-area: action;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding-top: 9px;
    border-top: 1px solid var(--kr-line);
    color: var(--kr-violet-2);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;
  }

  #history-view #trades-table tr.trade-row.is-expanded::after {
    content: "收合交易詳情　⌃";
  }

  #history-view #trades-table tr.trade-row:focus-visible {
    outline: 3px solid var(--kr-violet-line) !important;
    outline-offset: 2px !important;
  }

  #history-view .coin-chip-toggle {
    min-height: 36px !important;
    padding-inline: 12px !important;
  }
}

#settings-panel .settings-dialog {
  background: var(--kr-bg) !important;
  color: var(--kr-ink) !important;
}

#settings-panel .settings-header,
#settings-panel .settings-nav,
#settings-panel .settings-actions {
  border-color: var(--kr-line) !important;
  background: var(--kr-surface) !important;
}

#settings-panel .settings-row,
#settings-panel .settings-advanced-block,
#settings-panel .settings-risk-cell,
#settings-panel .settings-runbar,
#settings-panel .settings-input-native,
#settings-panel .settings-select,
#settings-panel .settings-input-compact,
#settings-panel .settings-segmented,
#settings-panel .settings-theme-swatch {
  border-color: var(--kr-line) !important;
  background-color: var(--kr-bg-2) !important;
}

#settings-panel .settings-nav-item:hover,
#settings-panel .settings-btn:hover,
#settings-panel .settings-segmented button:hover,
#settings-panel .settings-theme-swatch:hover {
  background: var(--kr-surface-2) !important;
}

#settings-panel .settings-nav-item.is-active,
#settings-panel .settings-segmented button.is-active,
#settings-panel .settings-theme-swatch.is-active {
  border-color: var(--kr-violet-line) !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-ink) !important;
}

#settings-panel .settings-row-label,
#settings-panel .settings-group-title,
#settings-panel .settings-advanced-title {
  color: var(--kr-ink) !important;
}

#settings-panel .settings-row-hint,
#settings-panel .settings-group-sub,
#settings-panel .settings-advanced-sub,
#settings-panel .settings-foot-status,
#settings-panel .settings-muted {
  color: var(--kr-ink-3) !important;
}

#trading-dashboard .trading-dashboard-shell,
#trading-dashboard .trading-config,
#trading-dashboard .trading-queue-summary,
#trading-dashboard .health-card,
#trading-dashboard .learning-card,
#trading-dashboard .trading-dynamic-sl {
  border-color: var(--kr-line) !important;
  background: var(--kr-surface) !important;
}

#trading-dashboard #trading-orders-table th,
#trading-dashboard #trading-orders-table td,
#trading-dashboard .dynamic-sl-history th,
#trading-dashboard .dynamic-sl-history td {
  border-color: var(--kr-line) !important;
}

#trading-dashboard #trading-orders-table th {
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-3) !important;
}

#trading-dashboard #trading-orders-table tr:hover {
  background: var(--kr-surface-2) !important;
}

#trading-dashboard .order-status,
#trading-dashboard .order-summary-chip,
#trading-dashboard .binance-track-chip {
  border-color: var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-2) !important;
}

#trading-dashboard .order-status.status-pending,
#trading-dashboard .order-summary-chip.pending,
#trading-dashboard .binance-track-chip.entry {
  border-color: var(--kr-warn-line) !important;
  background: var(--kr-warn-dim) !important;
  color: var(--kr-warn) !important;
}

#trading-dashboard .order-status.status-running,
#trading-dashboard .order-status.status-executed,
#trading-dashboard .order-summary-chip.running,
#trading-dashboard .binance-track-chip.protection {
  border-color: var(--kr-violet-line) !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
}

#trading-dashboard .order-status.status-filled,
#trading-dashboard .order-status.status-profit,
#trading-dashboard .order-summary-chip.profit,
#trading-dashboard .binance-track-chip.trailing,
#trading-dashboard .binance-track-chip.done {
  border-color: var(--kr-up-line) !important;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}

#trading-dashboard .order-status.status-loss,
#trading-dashboard .order-status.status-negative,
#trading-dashboard .order-status.status-failed,
#trading-dashboard .order-status.status-error,
#trading-dashboard .order-status.status-blocked,
#trading-dashboard .order-status.status-rejected,
#trading-dashboard .order-summary-chip.loss,
#trading-dashboard .order-summary-chip.failed,
#trading-dashboard .binance-track-chip.bad {
  border-color: var(--kr-dn-line) !important;
  background: var(--kr-dn-dim) !important;
  color: var(--kr-dn) !important;
}

#trading-dashboard .order-status.status-closed,
#trading-dashboard .order-status.status-neutral,
#trading-dashboard .order-summary-chip.closed {
  border-color: var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-2) !important;
}

#trading-dashboard .alert-success { color: var(--kr-up) !important; border-left-color: var(--kr-up) !important; }
#trading-dashboard .alert-error { color: var(--kr-dn) !important; border-left-color: var(--kr-dn) !important; }
#trading-dashboard .alert-warning { color: var(--kr-warn) !important; border-left-color: var(--kr-warn) !important; }
#trading-dashboard .no-data { color: var(--kr-ink-3) !important; }

/* ── UI density + final information hierarchy pass ─────────────────────── */
.density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--kr-line);
  border-radius: 999px;
  background: var(--kr-bg-2);
  color: var(--kr-ink-2);
  font-family: var(--kr-sans);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.density-toggle:hover,
.density-toggle[aria-pressed="true"] {
  border-color: var(--kr-violet-line);
  background: var(--kr-violet-dim);
  color: var(--kr-ink);
}

.density-toggle-icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid currentColor;
  box-shadow: inset 0 -4px 0 currentColor;
  opacity: .9;
}

/* Compact trims genuinely-secondary lines only. The decision conclusion and
   the absolute $ P&L stay visible in every density — they are the protagonists
   the design language asks us to lead with, not optional detail. */
html[data-ui-density="compact"] #focus-signals .signal-row-meta,
html[data-ui-density="compact"] #focus-signals .signal-score-label,
html[data-ui-density="compact"] #focus-signals .signal-symbol-reason,
html[data-ui-density="compact"] #trading-dashboard .order-status-detail,
html[data-ui-density="compact"] #analysis-view .metric-sublabel,
html[data-ui-density="compact"] #history-view .detail-hint,
html[data-ui-density="compact"] #strategy-view .sp-sub,
html[data-ui-density="compact"] #strategy-view .sp-val-row {
  display: none !important;
}

html[data-ui-density="compact"] #focus-signals .signal-list .signal-row {
  grid-template-areas:
    "decision decision decision decision decision"
    "score    symbol   dir      price    status" !important;
  padding-block: 13px !important;
}

html[data-ui-density="compact"] #focus-signals .signal-list .signal-row--candidate {
  /* Keep the dir slot (see base candidate rule) so the 做空/做多 chip stays
     inline instead of dropping to a phantom row. */
  grid-template-areas: "score symbol dir price status" !important;
}

html[data-ui-density="compact"] #focus-signals .signal-symbol-main {
  font-size: 16px !important;
}

html[data-ui-density="detail"] #focus-signals .signal-row-meta {
  display: flex !important;
}

#focus-signals .signal-list .signal-row--candidate .signal-symbol-sub,
#focus-signals .signal-list .signal-row--gridmini .signal-symbol-sub {
  display: none !important;
}

#focus-signals .signal-list .signal-row--gridmini .signal-symbol-cell,
#focus-signals .signal-list .signal-row--candidate .signal-symbol-cell {
  align-self: center !important;
}

#focus-signals .signal-status-chip,
#trading-dashboard .order-status,
#trading-dashboard .order-summary-chip,
.home-position-card-protection,
.home-position-card-close {
  min-height: 28px;
}

.home-position-card-protection,
.home-position-card-close,
.home-position-card-side {
  border-radius: 8px !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .03em !important;
}

button[aria-busy="true"],
button.is-busy,
.settings-btn[disabled] {
  cursor: wait !important;
  opacity: .72 !important;
}

#settings-panel .settings-nav {
  gap: 6px !important;
}

#settings-panel .settings-nav-item {
  min-height: 38px !important;
  border-radius: 10px !important;
}

#settings-panel .settings-drawer-section {
  max-width: 820px;
}

#settings-panel .settings-group {
  padding-top: 2px;
}

#settings-panel .settings-group-title,
#settings-panel .settings-advanced-title {
  font-size: 13px !important;
  color: var(--kr-ink) !important;
}

#settings-panel .settings-group-sub,
#settings-panel .settings-advanced-sub,
#settings-panel .settings-row-hint {
  max-width: 58ch;
  color: var(--kr-ink-3) !important;
  line-height: 1.55 !important;
}

#settings-panel .settings-row {
  min-height: 56px;
}

#settings-panel .settings-row:hover {
  background: var(--kr-surface-2) !important;
}

#settings-panel .settings-section-subtitle::before {
  content: "設定";
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--kr-violet-line);
  border-radius: 999px;
  background: var(--kr-violet-dim);
  color: var(--kr-violet-2);
  font-family: var(--kr-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

#analysis-view .conclusion-banner,
#strategy-view .conclusion-banner {
  border-left: 3px solid var(--kr-violet) !important;
}

#analysis-view .history-section:first-of-type .history-section-title::after {
  content: "先看可行動指標";
  margin-left: 10px;
  color: var(--kr-ink-3);
  font-family: var(--kr-mono);
  font-size: 11px;
  font-weight: 500;
}

/* ── Strategy + analysis: mobile reading and touch pass ─────────────── */
@media (max-width: 720px) {
  #analysis-view .analysis-summary-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #analysis-view .analysis-summary-header .section-meta {
    display: block !important;
    width: auto !important;
  }

  #analysis-view .analysis-summary-header .history-control {
    display: block !important;
  }

  #analysis-view .analysis-summary-header .period-select {
    width: auto !important;
    min-width: 116px !important;
    min-height: 40px !important;
    padding: 0 32px 0 12px !important;
    font-size: 13px !important;
  }

  #analysis-view #summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #analysis-view #summary-metrics .metric-card {
    min-width: 0 !important;
    padding: 14px !important;
    text-align: left !important;
  }

  #analysis-view #summary-metrics .metric-card:first-child {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
  }

  #analysis-view #summary-metrics .metric-value-row {
    justify-content: flex-start !important;
  }

  #analysis-view .conclusion-banner {
    padding: 14px 16px !important;
    border-radius: var(--kr-r-md) !important;
  }

  #analysis-view .history-equity .chart-shell {
    height: 200px !important;
  }

  #strategy-view .strategy-panel-flags {
    gap: 7px !important;
    margin-bottom: 4px !important;
  }

  #strategy-view .strategy-flag {
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  #strategy-view .strategy-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #strategy-view .sp-card {
    padding: 16px !important;
    border-radius: var(--kr-r-md) !important;
  }

  #strategy-view .sp-head {
    gap: 8px !important;
  }

  #strategy-view .sp-name {
    font-size: 15px !important;
  }

  #strategy-view .sp-toggle {
    display: grid !important;
    min-width: 44px !important;
    min-height: 44px !important;
    place-items: center !important;
  }

  #strategy-view .sp-toggle-track {
    width: 30px !important;
    height: 17px !important;
  }

  #strategy-view .sp-toggle-knob {
    width: 11px !important;
    height: 11px !important;
    transform: translate(0, 1px) !important;
  }

  #strategy-view .sp-toggle.on .sp-toggle-knob {
    transform: translate(15px, 1px) !important;
  }

  #strategy-view .sp-result {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: baseline !important;
    gap: 4px 10px !important;
    margin: 8px 0 10px !important;
  }

  #strategy-view .sp-result-label {
    grid-column: auto !important;
    color: var(--kr-ink-3) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .06em !important;
  }

  #strategy-view .sp-pnl {
    background: transparent !important;
  }

  #strategy-view .sp-result-meta {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  #strategy-view .sp-evidence {
    gap: 5px !important;
    margin: 0 0 12px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #strategy-view .sp-card-details {
    margin: 0 !important;
    border-top: 1px solid var(--kr-line) !important;
  }

  #strategy-view .sp-card-details + .sp-card-details {
    border-top: 0 !important;
  }

  #strategy-view .sp-card-details summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    gap: 10px !important;
    color: var(--kr-ink-2) !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    list-style: none !important;
  }

  #strategy-view .sp-card-details summary::-webkit-details-marker {
    display: none !important;
  }

  #strategy-view .sp-card-details summary::after {
    display: none;
  }

  #strategy-view .sp-card-details[open] summary::after {
    display: none;
  }

  #strategy-view .sp-details-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--kr-ink-3);
    font-family: var(--kr-mono);
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #strategy-view .sp-controls {
    gap: 10px !important;
    margin: 0 0 14px !important;
  }

  #strategy-view .sp-controls label {
    gap: 5px !important;
    font-size: 11px !important;
  }

  #strategy-view .sp-controls select {
    min-height: 44px !important;
    padding-inline: 10px !important;
    font-size: 13px !important;
  }

  #strategy-view .sp-advice {
    margin: 8px 0 !important;
    padding: 0 0 0 10px !important;
    border: 0 !important;
    border-left: 2px solid var(--kr-line-2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #strategy-view .sp-advice--warn {
    border-left-color: var(--kr-warn) !important;
  }

  #strategy-view .attribution-insights {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #strategy-view .attribution-insight-col {
    padding: 14px !important;
  }

  #strategy-view .attribution-details-summary {
    min-height: 48px !important;
    padding: 12px 14px !important;
  }

  #strategy-view .attribution-details-sub {
    font-size: 11px !important;
  }
}

/* 策略卡風控選單走 kx custom select；兩欄 grid 裡 150px min-width 會撐爆
   窄卡，改為填滿自己的格子（桌機/手機皆適用）。 */
#strategy-view .sp-controls .kx-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ── 桌機版策略控制台（≥721px；手機版在上方 @720 區塊，互不影響）──
   桌機原本只吃 history.css 的基底樣式：<details> 收合列是瀏覽器預設的
   ▶ 三角、徽章貼著文字無間距、無樣本卡的勝率 meta 跟損益擠同一行。
   這裡以桌機尺度補上手機已定案的收合列/結果區設計。 */
@media (min-width: 721px) {
  #strategy-view .strategy-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }

  #strategy-view .sp-card {
    padding: 16px 16px 13px;
    border-radius: var(--kr-r-md);
  }

  #strategy-view .sp-name {
    font-size: 14px;
  }

  #strategy-view .sp-subtitle {
    font-size: 11px;
  }

  /* KPI lockup：小標籤一行、大數字+勝率 meta 同基線一行。
     無樣本卡（— / 0 筆）也走同一格線，整排卡片基線才對得齊。 */
  #strategy-view .sp-result {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: baseline;
    gap: 3px 10px;
    margin: 12px 0 10px;
  }

  #strategy-view .sp-result-label {
    grid-column: auto;
    color: var(--kr-ink-4);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .08em;
  }

  #strategy-view .sp-result-meta {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #strategy-view .sp-card-details {
    border-top: 1px solid var(--kr-line);
  }

  #strategy-view .sp-card-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    color: var(--kr-ink-3);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 650;
    list-style: none;
    transition: color 120ms ease;
  }

  #strategy-view .sp-card-details summary:hover {
    color: var(--kr-ink);
  }

  #strategy-view .sp-card-details summary::-webkit-details-marker {
    display: none;
  }

  #strategy-view .sp-card-details summary::after {
    display: none;
  }

  #strategy-view .sp-card-details[open] summary::after {
    display: none;
  }

  #strategy-view .sp-details-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--kr-ink-3);
    font-family: var(--kr-mono);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 展開後的內文：10px 灰字在深底上低於可讀底線，統一升到 11px。 */
  #strategy-view .sp-controls {
    margin: 2px 0 12px;
    gap: 10px;
  }

  #strategy-view .sp-controls label {
    gap: 4px;
    font-size: 11px;
  }

  #strategy-view .sp-advice {
    font-size: 12px;
  }

  #strategy-view .sp-evidence {
    gap: 4px;
    font-size: 11px;
    line-height: 1.5;
  }

  #strategy-view .sp-val-count {
    font-size: 11px;
  }
}

.no-data,
.history-table-empty,
.history-empty-state,
.attribution-empty,
.attribution-insight-empty {
  color: var(--kr-ink-3) !important;
}

.no-data {
  min-height: 76px;
  vertical-align: middle !important;
}

.history-table-empty,
.history-empty-state,
.attribution-empty,
.attribution-insight-empty {
  padding: 18px 12px;
}

.history-table-empty strong,
.history-empty-title,
.attribution-empty strong,
.attribution-insight-empty strong {
  color: var(--kr-ink) !important;
}

.history-table-empty span,
.history-empty-copy,
.attribution-empty span,
.attribution-insight-empty span {
  color: var(--kr-ink-3) !important;
}

.single-metric-sublabel {
  margin-top: 2px;
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .density-toggle {
    min-width: 34px;
    padding-inline: 9px;
  }

  .density-toggle-label {
    display: none;
  }

  html[data-ui-density="compact"] #history-view #trades-table .td-exp-winrate,
  html[data-ui-density="compact"] #history-view #trades-table .td-winrate {
    display: none !important;
  }

  html[data-ui-density="compact"] #history-view #trades-table tr.trade-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "symbol symbol symbol pnl pnl pnl"
      "side side r r time time"
      "score score reason reason reason reason"
      "action action action action action action" !important;
  }

  html[data-ui-density="compact"] #history-view #trades-table .td-score {
    align-items: flex-start !important;
    text-align: left !important;
  }

  html[data-ui-density="compact"] #focus-signals .signal-list .signal-row {
    min-height: 74px !important;
  }
}

/* ── UX action pass: anchor offset, mobile nav, touch targets ───────────── */
#overview,
#strategy,
#analysis,
#history,
.app-view {
  scroll-margin-top: 80px;
}

.skip-link {
  min-height: 44px;
}

#skip-link:focus,
#skip-link:focus-visible {
  transform: translateY(0) !important;
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

@media (max-width: 720px) {
  #overview,
  #strategy,
  #analysis,
  #history,
  .app-view {
    scroll-margin-top: 64px;
  }

  .kx-icon-btn,
  .topbar-nav-btn,
  .settings-nav-btn,
  .density-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .density-toggle {
    justify-content: center;
    padding-inline: 0 !important;
    border-radius: var(--kr-r-sm);
  }

  .home-position-card-hd-actions {
    gap: 8px !important;
  }

  /* 平倉與已保護是同一排的一對 chip，尺寸完全對齊（32px 高、同 padding、
     同圓角），不再放大成 44px 觸控 pill——高低不一看起來像兩種元件。
     平倉點下去還有確認步驟，稍小的點擊面積可接受。 */
  .home-position-card-close {
    min-width: 56px !important;
    min-height: 32px !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .home-position-card-protection {
    min-width: 56px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}

/* ── Mobile declutter（2026-07-05 UIUX 稽核）──────────────
   手機上頂欄與角落控制項瘦身：導覽由底部 tab bar 唯一承擔。 */
@media (max-width: 720px) {
  /* 回頂鈕固定在左下會壓住卡片文字（閱讀起點側）；tab bar 本身
     就是永遠可見的錨點，手機上不需要第二顆懸浮鈕。 */
  .kr-back-to-top { display: none !important; }

  /* 首屏壓縮：hero 空狀態框與標題在 375px 高度上吃掉近一整屏，
     訊號列表被推到第二屏。收緊垂直節奏，不動資訊內容。 */
  .home-hero-title { font-size: 28px !important; }
  .home-positions-empty {
    padding: 14px 12px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  /* 密度切換只影響總覽頁的細節列，icon-only 在手機上不可解讀；
     手機一律用預設「詳細」，把頂欄空間留給設定入口。 */
  .density-toggle { display: none !important; }
}