/* ===== Moved from inline <style> ===== */
/* =========================
     THEME + BASE (match TRL/prop firm styling)
     ========================= */
  :root {
    --bg: #0E1117;
    --fg: #ffffff;
    --muted: #9aa4b2;
    --card: #1a1f2e;
    --border: #252b3a;
    --input: #0E1117;
    --inputBorder: #3a4258;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
    --blue: #2563eb;
    --blue2: #3b82f6;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #f59e0b;
    --purple: #a855f7;
    --cyan: #06b6d4;
  }
  /* IMPORTANT: match trading_journal technique — theme must apply BEFORE <body> exists */
  html[data-theme="light"] {
    --bg: #f8fafc;
    --fg: #0f172a;
    --muted: #475569;
    --card: #ffffff;
    --border: #d1d5db;
    --input: #f3f4f6;
    --inputBorder: #cbd5e1;
    --shadow: 0 10px 25px rgba(2,6,23,.08);
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--fg);
    min-height:100vh;
    font-size:14px;
  }
  a{ color:inherit; }


  /* Theme-aware scrollbars: light in light mode, dark in dark mode */
  html[data-theme="dark"],
  body[data-theme="dark"]{
    color-scheme: dark;
    scrollbar-color: #252b3a #0E1117;
  }
  html[data-theme="light"],
  body[data-theme="light"]{
    color-scheme: light;
    scrollbar-color: #cbd5e1 #f8fafc;
  }
  html[data-theme="dark"] *{ scrollbar-color: #252b3a #0E1117; }
  html[data-theme="light"] *{ scrollbar-color: #cbd5e1 #f8fafc; }

  html[data-theme="dark"] ::-webkit-scrollbar{ width: 12px; height: 12px; }
  html[data-theme="dark"] ::-webkit-scrollbar-track{ background: #0E1117; }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: #252b3a; border: 3px solid #0E1117; border-radius: 999px; }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: #3a4258; }

  html[data-theme="light"] ::-webkit-scrollbar{ width: 12px; height: 12px; }
  html[data-theme="light"] ::-webkit-scrollbar-track{ background: #f8fafc; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb{ background: #cbd5e1; border: 3px solid #f8fafc; border-radius: 999px; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background: #94a3b8; }

  /* Page entrance overlay (render everything together) */
  .page-transition-overlay{
    position: fixed;
    inset: 0;
    background-color: #0E1117;
    opacity: 0;
    pointer-events: none;
    transition: opacity 170ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 9999;
  }
  .page-transition-overlay.is-active{ opacity: 1; pointer-events: auto; }
  /* Match trading_journal refresh flash: pure white in light mode */
  html[data-theme="light"] .page-transition-overlay{ background-color:#ffffff; }

  main{ display:block; }
  .container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 94px 16px 52px;
    zoom: 0.95;
    transform-origin: top center;
    transform: scale(1);
  }
  html.trl-nozoom .container{
    zoom: 1;
    transform: scale(0.9);
    width: calc(100% / 0.9);
  }

  /* Control row (Export + Theme toggle) */
  .toolActions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
    padding-bottom:2px;
  }

  /* Buttons */
  .btn{
    appearance:none;
    /* Subtle outline like html (Symbol Settings) */
    border:1px solid #374151;
    background:transparent;
    color:var(--fg);
    padding:8px 10px;
    border-radius:10px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    user-select:none;
    outline:none;
    box-shadow:none;
  }
  body[data-theme="light"] .btn{
    border-color: #d1d5db;
    color: rgba(2,6,23,.86);
  }

  /* Prevent any UA focus ring / inner border artifacts (all states) */
  .btn,
  .btn *{
    outline: none !important;
    box-shadow: none !important;
  }
  .btn::-moz-focus-inner{ border:0; }

  /* No bulky focus frames on buttons (all themes) */
  .btn:focus,
  .btn:focus-visible{
    outline:none !important;
    box-shadow:none !important;
  }
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
  .btn.primary{background:var(--blue);border-color:rgba(37,99,235,.35);color:#fff}
  .btn.primary:hover{background:var(--blue2)}

  /* Outline buttons (NO bulky frames) */
  .btn.outline{
    border-color: #374151 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-theme="light"] .btn.outline{
    border-color: #d1d5db !important;
    color: rgba(2,6,23,.86) !important;
  }
  .btn.outline:hover{ background: rgba(148,163,184,.10) !important; }
  body[data-theme="light"] .btn.outline:hover{ background: rgba(15,23,42,.06) !important; }



  /* Custom dropdown (for Symbol/Side) */
  .trl-select{ position:relative; width:100%; }
  .trl-select-native{ display:none !important; }
  .trl-select-btn{
    width:100%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--inputBorder);
    background: var(--input);
    color: var(--fg);
    font-size: 14px;
    outline:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    user-select:none;
  }
  body[data-theme="dark"] .trl-select-btn{ background: rgba(14,17,23,.85); border-color:#374151; }
  body[data-theme="light"] .trl-select-btn{ background:#f3f4f6; border-color:#cbd5e1; color: rgba(2,6,23,.86); }

  .trl-select-menu{
    position:absolute;
    left:0;
    right:0;
    top: calc(100% + 8px);
    background: rgba(14,17,23,.98);
    border: 1px solid #374151;
    border-radius: 14px;
    overflow:hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    z-index: 999;
    display:none;
  }
  body[data-theme="light"] .trl-select-menu{ background: #ffffff; border-color:#d1d5db; box-shadow: 0 14px 34px rgba(2,6,23,.12); }

  .trl-select.open .trl-select-menu{ display:block; }

  .trl-select-opt{
    padding: 10px 12px;
    font-size: 14px;
    color: var(--fg);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  body[data-theme="light"] .trl-select-opt{ color: rgba(2,6,23,.86); }

  .trl-select-opt:hover{ background: rgba(37,99,235,.18); }
  .trl-select-opt.is-active{ font-weight: 800; }

  .trl-select-caret{
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(148,163,184,.9);
    border-bottom: 2px solid rgba(148,163,184,.9);
    transform: rotate(45deg);
    margin-top: -2px;
    flex: 0 0 auto;
  }
  body[data-theme="light"] .trl-select-caret{ border-right-color: rgba(2,6,23,.55); border-bottom-color: rgba(2,6,23,.55); }
/* Cards */
  .card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 18px;
    overflow:hidden;
  }
  .subtitle{color:var(--muted);margin:6px 0 0;font-size:12px;line-height:1.35}
  .cardHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    user-select:none;
  }
  .cardHeader h2{ margin:0; font-size: 15px; font-weight: 900; }
  .chevron{ transition: transform .18s ease; opacity:.9; }
  .chevron.open{ transform: rotate(180deg); }
  .sectionBody{ margin-top: 14px; }

  /* Grid */
  .grid{ display:grid; gap:14px; }
  .grid-1{ grid-template-columns: minmax(0,1fr); }
  .grid-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .grid-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }
  @media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 720px){ .container{padding:98px 12px 20px; zoom:1; transform:scale(1); width:auto;} html.trl-nozoom .container{zoom:1; transform:scale(1); width:auto;} .grid-3{ grid-template-columns: minmax(0,1fr); } .grid-2{ grid-template-columns: minmax(0,1fr); } }

  label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  .labelRow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);font-weight:700;margin:0 0 8px}

  .input{
    width:100%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--inputBorder);
    background: var(--input);
    color: var(--fg);
    font-size: 14px;
    outline: none;
  }

  /* Disabled/greyed numeric list inputs (By Risk vs By Size) */
  .input:disabled,
  .input.isDisabled{
    opacity: .55;
    cursor: not-allowed;
  }

  /* Inputs + dropdowns: match html (Profiles > Category) */
  body[data-theme="dark"] .input{
    background: rgba(14,17,23,.85);
    border-color:#374151;
  }
  body[data-theme="light"] .input{
    background:#f3f4f6;
    border-color:#d1d5db;
    color:#0f172a;
  }
  body[data-theme="dark"] .input:focus, body[data-theme="dark"] select:focus, body[data-theme="dark"] textarea:focus{
    outline: 2px solid rgba(59,130,246,.40);
    outline-offset: -2px;
    border-color: rgba(59,130,246,.55);
  }
  body[data-theme="light"] .input:focus, body[data-theme="light"] select:focus, body[data-theme="light"] textarea:focus{
    outline: 2px solid rgba(59,130,246,.35);
    outline-offset: -2px;
    border-color: rgba(59,130,246,.55);
  }

  select.input{ padding-right: 34px; }

  /* Custom select arrow + native appearance removal ( style) */
  select.input{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:18px 18px;
  }
  body[data-theme="light"] select.input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat !important;
    background-position:right 10px center !important;
    background-size:18px 18px !important;
  }
  body[data-theme="dark"] select.input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat !important;
    background-position:right 10px center !important;
    background-size:18px 18px !important;
  }
  body[data-theme="dark"] select.input option{ color:#ffffff; background:#0E1117; }
  body[data-theme="light"] select.input option{ color:#111827; background:#ffffff; }

  /* Seg buttons */
  .seg{ display:flex; gap:8px; flex-wrap:wrap; }
  /* Use the same outline style as other buttons (inactive stays subtle; active turns blue) */
  .seg .btn{ padding:7px 10px; border-radius:10px; font-size:13px; border:1px solid rgba(148,163,184,.18) !important; background: transparent; }
  body[data-theme="light"] .seg .btn{ border-color: rgba(15,23,42,.14) !important; color: rgba(2,6,23,.86); }
  .seg .btn:hover{ background: rgba(148,163,184,.08); }
  body[data-theme="light"] .seg .btn:hover{ background: rgba(15,23,42,.06); }
  .seg .btn.active{ background: var(--blue) !important; border-color: rgba(37,99,235,.35) !important; color:#fff !important; }

  /* Large segmented buttons (match the reference layout: wide, equal, active blue, inactive light) */
  .segLarge{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
  /* Make Custom preset button span full row */
  #paramTplCustom{ grid-column: 1 / -1; width: 100%; }

  @media (max-width: 720px){ .segLarge{ grid-template-columns: minmax(0,1fr); } }
  .segLarge .btn{ justify-content:center; padding:10px 12px; border-radius:12px; font-weight:800; }
  /* Inactive = gray, Active = blue (requested) */
  body[data-theme="dark"] .segLarge .btn{ background: rgba(148,163,184,.10); color: #e5e7eb; }
  body[data-theme="light"] .segLarge .btn{ background: rgba(15,23,42,.06); color:#0f172a; }
  .segLarge .btn.active{ background: var(--blue) !important; color:#fff !important; border-color: rgba(37,99,235,.35) !important; }

  .segLarge2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
  @media (max-width: 720px){ .segLarge2{ grid-template-columns: minmax(0,1fr); } }
  .segLarge2 .btn{ justify-content:center; padding:10px 12px; border-radius:12px; font-weight:800; }
  /* Inactive = gray, Active = blue (requested) */
  body[data-theme="dark"] .segLarge2 .btn{ background: rgba(148,163,184,.10); color: #e5e7eb; }
  body[data-theme="light"] .segLarge2 .btn{ background: rgba(15,23,42,.06); color:#0f172a; }
  .segLarge2 .btn.active{ background: var(--blue) !important; color:#fff !important; border-color: rgba(37,99,235,.35) !important; }

  /* Chips */
  .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--border) 80%, transparent); background: rgba(148,163,184,.08); font-size:12px; color: var(--muted); }
  .chip strong{ color: var(--fg); font-weight:800; }

  /* KPI / bubbles */
  .resultsSection{ margin: 16px -16px -16px; padding: 16px; background: var(--bg); border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 0 0 22px 22px; }
  .resultsGrid{ display:grid; gap:14px; }

  /* Match bubble typography + background scheme from html */
  .kpi{
    position:relative;
    padding:12px;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(148,163,184,.08);
    cursor:pointer;
    user-select:text; /* keep copyable */
    transition:border-color .15s ease, background .15s ease;
    overflow:hidden;
  }
  body[data-theme="light"] .kpi{ background:#F3F4F6; }
  .kpi:hover{ border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }

  .kpi-title{ font-size: 13px; color: var(--muted); margin-bottom: 4px; display:flex; align-items:center; gap:8px; }
  .kpi-value{ font-size: 24px; font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing: 0; }
  .kpi-sub{ font-size: 13px; color: var(--muted); margin-top: 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .kpi.green{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.18); }
  .kpi.green .kpi-value{ color: var(--green); }

  /* Light mode bubble palette (match html) */
  body[data-theme="light"] .kpi.green{ background:#E3F5EB; border-color:rgba(34,197,94,.22); }

  .kpi.red{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.18); }
  .kpi.red .kpi-value{ color: var(--red); }

  body[data-theme="light"] .kpi.red{ background:#F8E8E8; border-color:rgba(239,68,68,.22); }

  /* Neutral (blue in RoR is actually neutral gray/white) */
  .kpi.blue{ background:rgba(148,163,184,.08); border-color:var(--border); }
  body[data-theme="light"] .kpi.blue{ background:#F3F4F6; }
  .kpi.blue:hover{ border-color:var(--border) !important; background:rgba(148,163,184,.08) !important; }
  body[data-theme="light"] .kpi.blue:hover{ background:#F3F4F6 !important; }
  .kpi.blue .kpi-title{ color: var(--fg) !important; }
  .kpi.blue .kpi-value{ color: var(--fg) !important; }
  [data-theme="dark"] .kpi.blue .kpi-sub{ color:#94A3B8E6 !important; }
  [data-theme="light"] .kpi.blue .kpi-sub{ color:#000000 !important; }

  /* Keep additional colors used by this tool */
  .kpi.yellow{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.22); }
  .kpi.yellow .kpi-value{ color: var(--yellow); }

  /* Light mode variants (match  bubbles: blue/green/red/orange) */
  body[data-theme="light"] .kpi.yellow{ background:#F9EDE3; border-color:rgba(245,158,11,.24); }
  body[data-theme="light"] .kpi.purple{ background:#F3F4F6; border-color:var(--border); }

  .kpi.purple{ background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.18); }


  /* KPI text tinting (titles/subtitles) to match bubble color (like multiple-entries.html) */
  .kpi.green .kpi-title, .kpi.green .kpi-sub{ color: color-mix(in srgb, var(--green) 75%, var(--muted)); }
  .kpi.red .kpi-title, .kpi.red .kpi-sub{ color: color-mix(in srgb, var(--red) 75%, var(--muted)); }
  .kpi.yellow .kpi-title, .kpi.yellow .kpi-sub{ color: color-mix(in srgb, var(--yellow) 75%, var(--muted)); }
  .kpi.purple .kpi-title, .kpi.purple .kpi-sub{ color: color-mix(in srgb, var(--purple) 75%, var(--muted)); }
  .kpi.purple .kpi-value{ color: var(--purple); }

  /* Comparison table (Saved Scenarios) cell highlights */
  .cmpPill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:4px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:rgba(148,163,184,.10);font-weight:900;font-size:12px;color:var(--fg)}
  .cmpPill.good{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.12);color:var(--green)}
  .cmpPill.bad{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.12);color:var(--red)}
  .cmpPill.tie{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.12);color:var(--blue)}
  .cmpBestRow td{border-top:1px solid rgba(148,163,184,.14); padding-top:10px}
/* Info boxes */
  .info-box{ margin-top: 16px; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.35; border: 1px solid var(--border); background: rgba(148,163,184,0.07); }
  .info-box.info { background: color-mix(in srgb, var(--blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue); }
  .info-box.success { background: color-mix(in srgb, var(--green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); color: var(--green); }
  .info-box.warning { background: color-mix(in srgb, var(--yellow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--yellow); }
  .info-box.danger { background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); color: var(--red); }


  /* --- Comparison table (match  style) --- */
  .compCard{border-radius:16px; overflow:hidden; border:1px solid rgba(148,163,184,.10); background:rgba(0,0,0,.16)}
  [data-theme="light"] .compCard{background:#ffffff;border-color:#e5e7eb}
  .compHead{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
  .compBody{padding:14px 16px}
  .compScenarioGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .scA{border:1px solid color-mix(in srgb, var(--blue2) 25%, var(--border));background:color-mix(in srgb, var(--blue2) 10%, transparent);border-radius:12px;padding:12px}
  .scB{border:1px solid color-mix(in srgb, var(--purple) 25%, var(--border));background:color-mix(in srgb, var(--purple) 10%, transparent);border-radius:12px;padding:12px}
  .scA .k{color:color-mix(in srgb, var(--blue2) 80%, var(--fg));font-weight:900;font-size:13px}
  .scB .k{color:color-mix(in srgb, var(--purple) 80%, var(--fg));font-weight:900;font-size:13px}
  .scA .d,.scB .d{font-size:12px;color:var(--muted);margin-top:4px}

  .scorePill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:rgba(148,163,184,.10);font-weight:900;font-size:12px;margin-top:10px}
  .scorePill.blue{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.12);color:var(--blue)}
  .scorePill.purple{border-color:rgba(168,85,247,.28);background:rgba(168,85,247,.12);color:var(--purple)}

  .compMatrix{display:grid;gap:8px;margin-top:10px}
  .compMatrixHead{display:grid;grid-template-columns:minmax(160px,1.4fr) minmax(90px,1fr) 16px minmax(90px,1fr) minmax(70px,.9fr);gap:10px;padding:8px 12px;border-radius:12px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.10);font-size:12px;font-weight:900;color:var(--muted)}
  .compMatrixHead .hA{color:color-mix(in srgb, var(--blue2) 80%, var(--muted))}
  .compMatrixHead .hB{color:color-mix(in srgb, var(--purple) 80%, var(--muted))}

  .cmpRow{display:grid;grid-template-columns:minmax(160px,1.4fr) minmax(90px,1fr) 16px minmax(90px,1fr) minmax(70px,.9fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.14);border:1px solid rgba(148,163,184,.10)}
  [data-theme="light"] .cmpRow{background:#F3F4F6;border-color:rgba(15,23,42,0.10)}
  .cmpMetric{font-size:13px;font-weight:800;color:color-mix(in srgb, var(--fg) 90%, var(--muted))}
  .cmpVal{font-weight:900;text-align:right}
  .cmpVal.bVal{text-align:left}
  .cmpColon{font-size:12px;color:var(--muted);font-weight:800;text-align:center}
  .cmpDelta{text-align:right}
  .cmpBadge{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:rgba(148,163,184,.10);font-weight:900;font-size:12px;color:var(--fg)}
  .cmpBadge.good{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.12);color:var(--green)}
  .cmpBadge.bad{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.12);color:var(--red)}
  .cmpBadge.tie{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.12);color:var(--blue)}
  .good{color:var(--green)} .bad{color:var(--red)} .neutral{color:var(--fg)} .tie{color:color-mix(in srgb, var(--blue2) 85%, var(--fg))}

  @media(max-width:720px){
    .compMatrixHead,.cmpRow{grid-template-columns:minmax(150px,1fr) 90px 12px 90px 70px;gap:8px}
  }
  @media(max-width:520px){
    .compMatrixHead{display:none}
    .cmpRow{grid-template-columns:1fr;gap:6px}
    .cmpVal,.cmpVal.bVal{ text-align:left }
    .cmpColon{display:none}
    .cmpDelta{text-align:left}
    .cmpVal.aVal::before{content:"A: ";color:var(--muted);font-weight:800}
    .cmpVal.bVal::before{content:"B: ";color:var(--muted);font-weight:800}
  }


  /* --- Best/Worst case cards (match screenshot color scheme) --- */
  .caseHead{display:flex;align-items:center;gap:10px}
  .caseIcon{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center}
  .caseTitle{font-weight:900}
  .bestCaseCard{border-color:rgba(34,197,94,.22);background:color-mix(in srgb, rgba(34,197,94,.14) 40%, var(--card));}
  .worstCaseCard{border-color:rgba(239,68,68,.22);background:color-mix(in srgb, rgba(239,68,68,.14) 40%, var(--card));}

  /* --- Light mode: header dropdown/menu readability --- */
  body[data-theme="light"] #trl-logo-link span{ color:#0f172a !important; }
  body[data-theme="light"] #site-header nav > a,
  body[data-theme="light"] #site-header nav .group > a{ color: rgba(2,6,23,.78) !important; }
  body[data-theme="light"] #site-header nav > a:hover,
  body[data-theme="light"] #site-header nav .group > a:hover{ color:#0f172a !important; background: rgba(15,23,42,.06) !important; }
  body[data-theme="light"] #site-header nav .group > a i{ color: rgba(2,6,23,.55) !important; }
  body[data-theme="light"] #site-header nav .group > a:hover i{ color: rgba(2,6,23,.72) !important; }
  body[data-theme="light"] #site-header nav .group > div{ background: rgba(255,255,255,.98) !important; border-color: rgba(15,23,42,.12) !important; box-shadow: 0 14px 34px rgba(2,6,23,.10) !important; }
  body[data-theme="light"] #site-header nav .group > div a{ color: rgba(2,6,23,.78) !important; }
  body[data-theme="light"] #site-header nav .group > div a:hover{ background: rgba(15,23,42,.06) !important; color:#0f172a !important; }
  /* Theme-aware MOBILE side panel (off-canvas menu) */
  body[data-theme="light"] #mobile-menu .bg-slate-900{ background: rgba(255,255,255,0.96) !important; }
  body[data-theme="light"] #mobile-menu .border-slate-800{ border-color: rgba(15,23,42,0.10) !important; }
  body[data-theme="light"] #mobile-menu .border-slate-700{ border-color: rgba(15,23,42,0.14) !important; }
  body[data-theme="light"] #mobile-menu nav .text-slate-300{ color: rgb(15 23 42) !important; }
  body[data-theme="light"] #mobile-menu nav .text-white{ color: rgb(15 23 42) !important; }
  body[data-theme="light"] #mobile-menu nav .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
  body[data-theme="light"] #mobile-menu nav .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }

  body[data-theme="light"] #mobile-menu #trl-mobile-cta{ border-top-color: rgba(15,23,42,0.10) !important; }
  body[data-theme="light"] #mobile-menu #trl-mobile-cta a[href="/account-settings"]{
    color: rgb(15 23 42) !important;
    border-color: rgba(15,23,42,0.14) !important;
  }
  body[data-theme="light"] #mobile-menu #trl-mobile-cta a[href="/account-settings"]:hover{
    background: rgba(15,23,42,0.06) !important;
  }

  /* Same as above, but for html[data-theme] (theme is applied pre-paint on <html>) */
  html[data-theme="light"] #mobile-menu .bg-slate-900{ background: rgba(255,255,255,0.96) !important; }
  html[data-theme="light"] #mobile-menu .border-slate-800{ border-color: rgba(15,23,42,0.10) !important; }
  html[data-theme="light"] #mobile-menu .border-slate-700{ border-color: rgba(15,23,42,0.14) !important; }
  html[data-theme="light"] #mobile-menu nav .text-slate-300{ color: rgb(15 23 42) !important; }
  html[data-theme="light"] #mobile-menu nav .text-white{ color: rgb(15 23 42) !important; }
  html[data-theme="light"] #mobile-menu nav .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
  html[data-theme="light"] #mobile-menu nav .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }

  html[data-theme="light"] #mobile-menu #trl-mobile-cta{ border-top-color: rgba(15,23,42,0.10) !important; }
  html[data-theme="light"] #mobile-menu #trl-mobile-cta a[href="/account-settings"]{
    color: rgb(15 23 42) !important;
    border-color: rgba(15,23,42,0.14) !important;
  }
  html[data-theme="light"] #mobile-menu #trl-mobile-cta a[href="/account-settings"]:hover{
    background: rgba(15,23,42,0.06) !important;
  }

  /* --- Saved Scenarios Comparison table: center values --- */
  #compareBox table th, #compareBox table td{ text-align: center; }

  /* --- Saved Scenarios table: fixed column sizing + alignment --- */
  #savedScenariosTable{ table-layout: fixed; }
  #savedScenariosTable th, #savedScenariosTable td{ text-align: center; }
  #savedScenariosTable th:nth-child(2), #savedScenariosTable td:nth-child(2){ text-align: left; }
  #savedScenariosTable td:nth-child(2){ padding-right: 14px; }
  #savedScenariosTable input[data-name-edit]{ width:100%; min-width:0; max-width:none; }
  .savedActions{ display:flex; justify-content:center; align-items:center; gap:8px; }
  .caseIcon.best{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.25);color:var(--green)}
  .caseIcon.worst{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.25);color:var(--red)}
  body[data-theme="light"] .bestCaseCard{background:#E3F5EB;border-color:rgba(34,197,94,.22)}
  body[data-theme="light"] .worstCaseCard{background:#F8E8E8;border-color:rgba(239,68,68,.22)}
  body[data-theme="light"] .bestCaseCard .subtitle{color:color-mix(in srgb, var(--green) 55%, var(--muted))}
  body[data-theme="light"] .worstCaseCard .subtitle{color:color-mix(in srgb, var(--red) 55%, var(--muted))}

  /* Table */
  .tableWrap{ overflow:auto; border-radius: 16px; border: 1px solid var(--border); background: rgba(148,163,184,.06); }
  body[data-theme="light"] .tableWrap{ background: rgba(2,6,23,.03); }
  body[data-theme="light"] #paramGenBtn{color:#fff}

  /* Scenario grid: white gaps between inputs in light mode */
  body[data-theme="light"] .card[data-section="editgrid"] .tableWrap{ background:#ffffff; }
  table{ width:100%; border-collapse: separate; border-spacing:0; min-width: 980px; }
  th, td{ padding: 10px 10px; text-align:left; border-bottom:1px solid color-mix(in srgb, var(--border) 75%, transparent); font-size: 13px; white-space:nowrap; }
  th{ position: sticky; top:0; z-index:2; background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); font-weight:800; cursor:pointer; }
  body[data-theme="light"] th{ background: #ffffff; }
  tr:hover td{ background: color-mix(in srgb, var(--blue) 6%, transparent); }
  .thSort{ display:inline-flex; align-items:center; gap:6px; }
  .pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid color-mix(in srgb, var(--border) 75%, transparent); background: rgba(148,163,184,.08); }
  .pill.ok{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); color: var(--green); }
  .pill.bad{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: var(--red); }

  /* Switch (pure CSS) */
  .switch{ position:relative; width:44px; height:24px; display:inline-block; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background: rgba(148,163,184,.22); transition:.18s; border-radius:999px; border:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  .slider:before{ position:absolute; content:""; height:18px; width:18px; left:3px; top:50%; transform: translateY(-50%); background: white; transition:.18s; border-radius:999px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .switch input:checked + .slider{ background: rgba(37,99,235,.45); border-color: rgba(37,99,235,.35); }
  .switch input:checked + .slider:before{ transform: translateY(-50%) translateX(20px); }

  /* Toasts */
  .toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:200}
  .toast{
    background:rgba(2,6,23,.90);
    color:#fff;
    border:1px solid rgba(148,163,184,.18);
    padding:10px 12px;border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    font-size:13px;display:flex;align-items:center;gap:10px;
    animation: toastIn .18s ease;
    max-width:min(360px, calc(100vw - 28px));
  }
  body[data-theme="light"] .toast{background:#ffffff;color:#0f172a;border-color:rgba(15,23,42,.12);box-shadow:0 12px 28px rgba(15,23,42,.12)}
  @keyframes toastIn{from{transform:translateY(6px);opacity:.7}to{transform:translateY(0);opacity:1}}

  /* ---- TRL Helpers (help tooltip) ---- */
  .trl-help-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    margin-left:6px;
    cursor:help;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    flex:0 0 auto;
    line-height:0;
    /* Match trading-calculator.html tooltip icon look */
    width:16px;height:16px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.35);
    background: transparent;
    color: rgba(148,163,184,.95);
  }
  .trl-help-icon:hover{ border-color: rgba(148,163,184,.55); background: transparent; color: rgba(226,232,240,.95); }
  .trl-help-icon:focus{ outline: none; }
  .trl-help-icon:focus-visible{ outline: 2px solid rgba(59,130,246,.45); outline-offset: 2px; }

  .trl-help-icon i{color:inherit}
  .trl-help-icon svg{ display:block; width:14px; height:14px; }

  body[data-theme="light"] .trl-help-icon{
    border-color: rgba(15,23,42,.22);
    background: transparent;
    color: rgba(15,23,42,.55);
  }
  body[data-theme="light"] .trl-help-icon:hover{ border-color: rgba(15,23,42,.32); background: transparent; color: rgba(15,23,42,.70); }
  .trl-help-tooltip{
    position:fixed;z-index:9999;pointer-events:none;
    max-width:260px;
    transform:translateY(-50%);
    border-radius:12px;
    padding:10px 12px;
    font-size:12px;line-height:1.35;
    background:rgba(0,0,0,.92);
    border:1px solid rgba(51,65,85,.55);
    color:#fff;
    box-shadow:none;
  }
  body[data-theme="light"] .trl-help-tooltip{ background:#ffffff; border-color:rgba(15,23,42,0.12); color:#0f172a; box-shadow:none; }

  /* ---- TRL header ---- */
  #site-header {
    background: rgba(26,31,46,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(30,64,175,0.45);
  }
  #site-header.header-scrolled {
    background: rgba(26,31,46,0.96);
    box-shadow: 0 18px 45px rgba(15,23,42,0.95);
    border-bottom-color: rgba(37,99,235,0.7);
  }

  body[data-theme="light"] #site-header{ background: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(37,99,235,0.22); }
  body[data-theme="light"] #site-header.header-scrolled{ background: rgba(255,255,255,0.92); box-shadow: 0 18px 45px rgba(15,23,42,0.12); border-bottom-color: rgba(37,99,235,0.35); }
  body[data-theme="light"] #site-header .text-slate-300{ color: rgb(51 65 85) !important; }
  body[data-theme="light"] #site-header .text-slate-400{ color: rgb(71 85 105) !important; }
  body[data-theme="light"] #site-header .text-slate-200{ color: rgb(15 23 42) !important; }
  body[data-theme="light"] #site-header a[href="/"] span.text-white{ color: rgb(15 23 42) !important; }
  body[data-theme="light"] #header-logout-desktop,
  body[data-theme="light"] #header-logout-mobile{ color: #ffffff !important; }
  body[data-theme="light"] #mobile-menu a[href="/dashboard"],
  body[data-theme="light"] #mobile-menu a[href="/dashboard"][aria-current="page"]{ color:#0f172a !important; opacity: 1 !important; }

  #trl-desktop-cta,#trl-mobile-cta{visibility:hidden}

  /* Fees strip clickable header */
  .feesStripHeader{ padding: 4px 2px; border-radius: 12px; }
  .feesStripHeader:hover{ background: rgba(255,255,255,.04); }
  body[data-theme="light"] .feesStripHeader:hover{ background: rgba(15,23,42,.04); }
  .feesStripHeader:focus{ outline: 2px solid rgba(59,130,246,.45); outline-offset: 2px; }


/* ===== Moved from inline <style> #trl-auth-prehide ===== */
#trl-desktop-cta,#trl-mobile-cta{visibility:hidden}


/* ===== Moved from inline style="" attributes ===== */
.scenarios-inline-1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scenarios-inline-2{width:16px;height:16px}
.scenarios-inline-3{width:20px;height:20px}
.scenarios-inline-4{margin-top:6px}
.scenarios-inline-5{width:14px;height:14px}
.scenarios-inline-6{margin-top:14px}
.scenarios-inline-7{display:flex;align-items:center;justify-content:space-between;gap:12px;user-select:none;cursor:pointer}
.scenarios-inline-8{display:flex;align-items:center;gap:10px}
.scenarios-inline-9{font-size:12px;color:var(--muted)}
.scenarios-inline-10{width:18px;height:18px}
.scenarios-inline-11{display:none; margin-top:14px}
.scenarios-inline-12{margin-top:8px}
.scenarios-inline-13{margin-top:12px}
.scenarios-inline-14{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.scenarios-inline-15{font-size:13px;color:var(--muted)}
.scenarios-inline-16{display:none; margin-top:12px}
.scenarios-inline-17{margin-top:10px}
.scenarios-inline-18{margin-top:18px}
.scenarios-inline-19{margin-bottom:6px}
.scenarios-inline-20{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.scenarios-inline-21{display:none}
.scenarios-compare-hidden{display:none}
.scenarios-inline-22{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.scenarios-inline-23{margin-top:10px; margin-bottom:14px}
.scenarios-inline-24{margin:0 0 0 8px;display:inline}
.scenarios-inline-25{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.scenarios-inline-26{min-width:760px}
.scenarios-inline-27{text-align:center}
.scenarios-inline-28{margin:0}
.scenarios-inline-29{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.scenarios-inline-30{display:flex;gap:10px;flex-wrap:wrap}
.scenarios-inline-31{margin-top:12px; min-width:0}
.scenarios-inline-32{min-width:720px}
.scenarios-inline-33{width:64px}
.scenarios-inline-34{width:360px}
.scenarios-inline-35{width:90px}
.scenarios-inline-36{width:110px}
.scenarios-inline-37{width:140px}
.scenarios-inline-38{width:120px}
.scenarios-inline-39{cursor:default}
.scenarios-inline-40{font-weight:900; margin-bottom:8px}
.scenarios-inline-41{background:transparent; border:0}
.scenarios-inline-42{min-width:860px}

/* Mobile side-menu auth layout — matched to Trading Journal pattern */
#trl-mobile-cta.trl-mobile-auth-area,
#trl-mobile-cta{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mobile-menu #trl-mobile-cta .trl-mobile-auth-row{
  width: 100% !important;
  display: block !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 16px !important;
}

#mobile-menu #trl-mobile-cta .trl-mobile-auth-button{
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  color: #ffffff !important;
}

html[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-row,
body[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-row{
  color: rgb(15 23 42) !important;
}

html[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-row:hover,
body[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-row:hover{
  background: transparent !important;
  color: rgb(15 23 42) !important;
}

html[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-button,
body[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-auth-button{
  color: #ffffff !important;
}
