/* Page reveal */
    .page-transition-overlay{position:fixed;inset:0;background:#0B1220;z-index:200;opacity:0;pointer-events:none;transition:opacity .24s ease;}
    html[data-theme="light"] .page-transition-overlay{background:#ffffff;}
    html[data-theme="dark"] .page-transition-overlay{background:#0B1220;}

    .page-transition-overlay.is-active{opacity:1;pointer-events:auto;}

    /* Header scrolled */
    #site-header.header-scrolled{background:rgba(2,6,23,.72);backdrop-filter: blur(10px);border-bottom:1px solid rgba(148,163,184,.14);}

    /* Cards (match sectioning style) */
    .trl-card{
      background: rgba(26,31,46,.96); /* ~ bg-[#1a1f2e] */
      border: 1px solid rgba(31,41,55,1); /* ~ border-gray-800 */
      border-radius: 18px;
      box-shadow: var(--shadow);
    }
    .trl-card-inner{
      border: 1px solid rgba(31,41,55,1); /* ~ border-gray-800 */
      background: rgba(14,17,23,.96); /* ~ bg-[#0E1117] */
    }

    /* Result bubbles (match  bubble style) */
    .trl-bubble{user-select:text;}

    /* Inputs */
    .trl-input{
      background: rgba(2,6,23,.55);
      border: 1px solid rgba(148,163,184,.16);
      color: var(--text);
    }
    html[data-theme="dark"] input:focus,
    html[data-theme="dark"] select:focus,
    html[data-theme="dark"] textarea:focus{
      outline: 2px solid rgba(59,130,246,.40);
      outline-offset: -2px;
      box-shadow: none;
      border-color: rgba(59,130,246,.55);
    }
    html[data-theme="light"] input:focus,
    html[data-theme="light"] select:focus,
    html[data-theme="light"] textarea:focus{
      outline: 2px solid rgba(59,130,246,.35);
      outline-offset: -2px;
      box-shadow: none;
      border-color: rgba(59,130,246,.55);
    }
    .trl-select{
      background: rgba(2,6,23,.55);
      border: 1px solid rgba(148,163,184,.16);
      color: var(--text);
    }

    /* Native select styling + arrow visibility (match ) */
    select.trl-select{
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      padding-left:14px;
      padding-right:42px;
      padding-top:10px;
      padding-bottom:10px;
      text-indent:0;
      background-repeat:no-repeat;
      background-position:right 14px center;
      background-size:16px 16px;
      line-height:1.35;
    }
    html[data-theme="light"] select.trl-select{
      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");
    }
    html[data-theme="dark"] select.trl-select{
      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");
    }
    html[data-theme="light"] select.trl-select option{color:#111827;background:#ffffff;}
    html[data-theme="dark"] select.trl-select option{color:#ffffff;background:#0E1117;}


    /* Custom dropdown (-style) */
    .trl-dd{ position:relative; width:100%; }
    .trl-dd-native{ display:none !important; }

    .trl-dd-btn{
      position:relative;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      text-align:left;
      background: var(--input) !important;
      border: 1px solid var(--inputBorder) !important;
      color: var(--fg) !important;
      padding-left:14px;
      padding-right:42px;
      padding-top:10px;
      padding-bottom:10px;
      line-height:1.35;
      /* Match other inputs: do NOT force-bold the displayed value */
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
}

    .trl-dd-btn:hover{ border-color: color-mix(in srgb, var(--blue) 35%, var(--inputBorder)) !important; }
    .trl-dd-btn:focus, .trl-dd-btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent) !important; outline-offset:2px; box-shadow:none !important; }
    /* Displayed value should not be bold; only the selected option in the open list is bold */
    .trl-dd-btn .trl-dd-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:inherit; }
    .trl-dd-btn .trl-dd-chevron{
      width:16px;
      height:16px;
      opacity:.85;
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      pointer-events:none;
    }

    .trl-dd-panel{
      position:absolute;
      left:0;
      right:0;
      top:100%;
      margin-top:6px;
      border-radius:14px;
      border:1px solid color-mix(in srgb, var(--inputBorder) 92%, transparent);
      background: var(--input);
      /* No extra shadow on open dropdown */
      box-shadow: none !important;
      filter: none !important;
      padding:6px;
      z-index:9999;
      max-height: 320px;
      overflow:auto;
      display:none;
    }
    .trl-dd[data-open="1"] .trl-dd-panel{ display:block; }

    .trl-dd-item{
      padding:10px 10px;
      border-radius:10px;
      font-size:14px;
      cursor:pointer;
      user-select:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .trl-dd-item.is-selected{ font-weight:800; }

    /* Hover highlight (blue) */
    html[data-theme="dark"] .trl-dd-item{ color:#ffffff; }
    html[data-theme="dark"] .trl-dd-item:hover{ background: rgba(37,99,235,1); }

    html[data-theme="light"] .trl-dd-item{ color:#0f172a; }
    html[data-theme="light"] .trl-dd-item:hover{ background: rgba(37,99,235,.14); }

    /* Slight divider feeling like native lists */
    .trl-dd-item + .trl-dd-item{ margin-top:2px; }

    /* Outline button helper (used in ) */
    .trl-btn-outline{border:1px solid rgba(148,163,184,.28);background:transparent;}
    html[data-theme="dark"] .trl-btn-outline{border-color:#374151;color:#e5e7eb;}
    html[data-theme="light"] .trl-btn-outline{border-color:#d1d5db;color:#111827;}
    html[data-theme="dark"] .trl-btn-outline:hover{background:rgba(255,255,255,.10);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 14px rgba(59,130,246,.10);}
    html[data-theme="light"] .trl-btn-outline:hover{background:rgba(0,0,0,.05);}

    /* ===== Delicate focus for outline buttons (no bulky frame) ===== */
    .btn{ box-shadow:none; }
    .btn:focus, .btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset:2px; box-shadow:none; }
    .btn.outline{ border-width:1px !important; box-shadow:none !important; }
    #themeBtn{ box-shadow:none !important; }
    #themeBtn:focus, #themeBtn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent) !important; outline-offset:2px; box-shadow:none !important; }

    /* Light mode: desktop Products dropdown should be light (not black) */
    html[data-theme="light"] #site-header nav .group > div.absolute{
      background: rgba(255,255,255,.96) !important;
      border: 1px solid rgba(15,23,42,.12) !important;
      box-shadow: 0 18px 45px rgba(15,23,42,.10) !important;
    }
    html[data-theme="light"] #site-header nav .group > div.absolute a{
      color: rgb(51 65 85) !important;
    }
    html[data-theme="light"] #site-header nav .group > div.absolute a:hover{
      background: rgba(15,23,42,.05) !important;
      color: rgb(15 23 42) !important;
    }

    /* Light mode: modal close (X) should not turn white on hover */
    html[data-theme="light"] .trl-modal-panel button[data-close="1"]{
      color:#64748b !important;
    }
    html[data-theme="light"] .trl-modal-panel button[data-close="1"]:hover,
    html[data-theme="light"] .trl-modal-panel button[data-close="1"]:active{
      color:#0f172a !important;
    }


    /* LIGHT MODE: cancel buttons contrast */
    html[data-theme="light"] #cancelTradeBtn{ color:#0f172a !important; }
    html[data-theme="light"] #cancelTradeBtn.trl-btn-ghost{ border-color: rgba(15,23,42,.14) !important; background: rgba(15,23,42,.04) !important; }
    html[data-theme="light"] #cancelExport,
    html[data-theme="light"] #cancelDel{ color:#0f172a !important; border-color: rgba(15,23,42,.14) !important; background: rgba(15,23,42,.04) !important; }


    /* Buttons */

    /* Delicate outline for theme switch (remove bulky focus ring/frame) */
    .btn{ box-shadow:none; }
    .btn:focus,.btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent) !important; outline-offset:2px; box-shadow:none !important; }
    .btn.outline{ border-width:1px !important; box-shadow:none !important; }

    /* Theme toggle: delicate outline like Cancel button (no bulky frame) */
    #themeBtn{
      border:1px solid rgba(148,163,184,.12) !important;
      background: rgba(255,255,255,.06) !important;
      box-shadow:none !important;
      outline:none !important;
    }
    #themeBtn:hover{ box-shadow:none !important; outline:none !important; }
    #themeBtn:focus, #themeBtn:focus-visible{
      outline:none !important;
      box-shadow:none !important;
    }
    html[data-theme="light"] #themeBtn{
      border-color: rgba(15,23,42,.14) !important;
      background: rgba(15,23,42,.04) !important;
    }

    .trl-btn{
      border-radius: 12px;
      font-weight: 650;
      transition: transform .12s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
    }
    .trl-btn:active{transform: translateY(1px) scale(.99);}
    .trl-btn-primary{
      background: linear-gradient(90deg, rgba(37,99,235,1), rgba(34,211,238,.95));
      box-shadow: 0 12px 28px rgba(59,130,246,.22);
    }
    .trl-btn-primary:hover{box-shadow: 0 14px 38px rgba(59,130,246,.30);}
    .trl-btn-ghost{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(148,163,184,.12);
    }
    .trl-btn-ghost:hover{background: rgba(255,255,255,.09);}
    .trl-btn-danger{
      background: rgba(239,68,68,.10);
      border:1px solid rgba(239,68,68,.25);
    }
    .trl-btn-danger:hover{background: rgba(239,68,68,.16);}


    /* Light mode button contrast (used in modals like Delete) */
    html[data-theme="light"] .trl-btn-ghost{
      background: #F3F4F6;
      border: 1px solid rgba(15,23,42,.14);
      color: #0f172a;
    }
    html[data-theme="light"] .trl-btn-ghost:hover{ background:#E2E8F0; }

    /* Fees settings header strip (match html look) */
    .trl-fees-strip{
      border-radius: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(148,163,184,.18);
      background: rgba(14,17,23,.96);
      cursor: pointer;
      user-select: none;
      transition: background .18s ease, border-color .18s ease, transform .12s ease;
    }
    .trl-fees-strip:hover{ background: rgba(14,17,23,1); }
    .trl-fees-strip:active{ transform: translateY(1px); }

    html[data-theme="light"] .trl-fees-strip{
      background: #F3F4F6;
      border: 1px solid rgba(15,23,42,.14);
      color: #0f172a;
    }
    html[data-theme="light"] .trl-fees-strip:hover{ background:#E2E8F0; }


    html[data-theme="light"] .trl-btn-danger{
      background: rgba(239,68,68,.12);
      border: 1px solid rgba(239,68,68,.35);
      color: #b91c1c;
    }
    html[data-theme="light"] .trl-btn-danger:hover{
      background: rgba(239,68,68,.18);
      color: #991b1b;
    }

    /* Heatmap trades modal contrast */
    .hmtr-count{ color: rgba(226,232,240,.92); }
    .hmtr-card{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); }
    .hmtr-meta{ color: rgba(148,163,184,.95); }
    .hmtr-notes{ color: rgba(203,213,225,.95); }

    html[data-theme="light"] .hmtr-count{ color:#334155; }
    html[data-theme="light"] .hmtr-card{ border:1px solid rgba(15,23,42,.12); background:#F8FAFC; }
    html[data-theme="light"] .hmtr-meta{ color:#64748b; }
    html[data-theme="light"] .hmtr-notes{ color:#334155; }

    

    /* Light mode: improve contrast for danger + ghost buttons */
    html[data-theme="light"] .trl-btn-ghost{ background: rgba(15,23,42,.04); border:1px solid rgba(15,23,42,.12); color: rgb(15 23 42); }
    html[data-theme="light"] .trl-btn-ghost:hover{ background: rgba(15,23,42,.06); }
    html[data-theme="light"] .trl-btn-danger{ background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color: rgb(185 28 28); }
    html[data-theme="light"] .trl-btn-danger:hover{ background: rgba(239,68,68,.18); color: rgb(153 27 27); }

    /* Heatmap trades modal: better light-mode contrast */
    .hmtr-count{ font-size: .9rem; margin-bottom: .75rem; color: rgba(226,232,240,.9); }
    .hmtr-card{ border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); padding: 12px; }
    .hmtr-meta{ font-size: .75rem; margin-top: 6px; color: rgba(148,163,184,.9); }
    .hmtr-notes{ font-size: .78rem; margin-top: 8px; color: rgba(226,232,240,.9); }

    html[data-theme="light"] .hmtr-count{ color: rgb(51 65 85); }
    html[data-theme="light"] .hmtr-card{ border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.70); }
    html[data-theme="light"] .hmtr-meta{ color: rgb(100 116 139); }
    html[data-theme="light"] .hmtr-notes{ color: rgb(15 23 42); }
/* Pills */
    .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .7rem;border-radius:999px;font-weight:650;font-size:.78rem;letter-spacing:.2px;}
    .pill-long{background: rgba(16,185,129,.12); color: rgba(16,185,129,1); border:1px solid rgba(16,185,129,.22);}
    .pill-short{background: rgba(239,68,68,.12); color: rgba(239,68,68,1); border:1px solid rgba(239,68,68,.22);}

    /* Metric cards glow */
    .metric-card{position:relative;overflow:hidden;}
    .metric-card::before{
      content:"";position:absolute;inset:-2px;
      background: radial-gradient(420px 220px at 30% 20%, rgba(59,130,246,.20), transparent 55%),
                  radial-gradient(420px 220px at 80% 60%, rgba(34,211,238,.10), transparent 55%);
      opacity:.9;pointer-events:none;
    }
    .metric-card .content{position:relative;}

    /* Tooltip */
    .trl-tooltip{position:fixed;z-index:9999;min-width:220px;max-width:320px;padding:10px 12px;border-radius:12px;
      background:#020617;border:1px solid #334155;
      box-shadow: 0 16px 40px rgba(2,6,23,.45);
      transform: translateY(6px);opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;
    }
    .trl-tooltip[data-open="1"]{opacity:1;transform: translateY(0);pointer-events:none;}

    html[data-theme="light"] .trl-tooltip{
      background:#ffffff;
      border: 1px solid #cbd5e1;
      box-shadow: 0 16px 40px rgba(2,6,23,.12);
    }

    /* Notes tooltip content */
    .trl-tooltip .tt-title{font-size:12px;font-weight:800;letter-spacing:.2px;color:#f8fafc;margin-bottom:6px;}
    .trl-tooltip .tt-body{font-size:12px;line-height:1.35;color:#e5e7eb;white-space:pre-wrap;}
    html[data-theme="light"] .trl-tooltip .tt-title{color:#0f172a;}
    html[data-theme="light"] .trl-tooltip .tt-body{color:#334155;}

    /* Table */
    .trl-table th{color: rgba(148,163,184,.9); font-size:.80rem; font-weight:700; padding: 14px 12px; text-align:left;}
    .trl-table td{padding: 16px 12px; border-top:1px solid rgba(148,163,184,.10); vertical-align:middle;}
    .trl-table{width:100%;}

    .trl-row{transition: background .14s ease;}
    .trl-row:hover{background: rgba(255,255,255,.035);}
    html[data-theme="light"] .trl-row:hover{background: rgba(15,23,42,.03);}

    /* Light mode table readability */
    html[data-theme="light"] .trl-table th{ color: rgba(51,65,85,.92); }
    html[data-theme="light"] .trl-table td{ color: rgba(15,23,42,.90); }

    /* Trade History table: desktop fit without horizontal scrolling */
    @media (min-width: 1024px){
      #tradeHistoryBody{overflow-x:visible;}
      #tradeHistoryBody table.trl-table{table-layout:fixed;}
      #tradeHistoryBody .trl-table th{padding:10px 6px; font-size:.70rem; text-align:center;}
      #tradeHistoryBody .trl-table td{padding:10px 6px; font-size:12px; word-break:break-word; text-align:center;}
      #tradeHistoryBody .trl-table td.text-right{white-space:nowrap; text-align:center;}
      #tradeHistoryBody .trl-table td.text-center{white-space:nowrap;}
    }


    /* Heatmap cells */
    .hm-grid{display:grid;gap:10px;}
    .hm-cell{border-radius:12px;border:1px solid rgba(148,163,184,.12);background: rgba(148,163,184,.06);
      padding: 10px 10px; min-height:56px; position:relative; cursor:pointer; transition: transform .10s ease, box-shadow .14s ease, background .14s ease;}
    .hm-cell:hover{transform:none; box-shadow:none; background: color-mix(in srgb, var(--blue) 6%, rgba(148,163,184,.06));}
    .hm-cell .small{font-size:.70rem;color: rgba(148,163,184,.9);}
    html[data-theme="light"] .hm-cell .small{color:#0f172a;}
    html[data-theme="dark"] .hm-cell .small{color:rgba(255,255,255,.92);}
    .hm-cell .big{font-weight:800;}

    /* Heatmap calendar (days) */
    .hm-month-title{font-weight:800;color:rgba(226,232,240,.92);margin-bottom:10px;}
    .hm-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:10px;}
    .hm-weekdays > div{font-size:11px;color:rgba(148,163,184,.9);text-align:center;font-weight:700;}
    .hm-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
    .hm-empty{border-radius:12px;border:1px dashed rgba(148,163,184,.12);background:transparent;min-height:72px;position:relative;}
    .hm-cell.hm-day{min-height:72px;padding:10px;padding-top:28px;cursor:pointer;}
    .hm-empty.hm-day{padding:10px;padding-top:28px;}
    .hm-daynum{position:absolute;top:10px;left:10px;font-size:11px;font-weight:800;color:rgba(148,163,184,.95);}

    /* Show day number even for out-of-range (empty) calendar cells */
    .hm-outside{cursor:default;}
    .hm-outside .hm-daynum{opacity:.60;}

    /* Hours view: more compact cells */
    .hm-cell.hm-hour{padding:8px 6px;min-height:52px;border-radius:10px;}
    .hm-cell.hm-hour .big{font-size:12px;}
    .hm-cell.hm-hour .small{font-size:10px;}

    /* Light mode: calendar readability */
    html[data-theme="light"] .hm-month-title{color:rgba(15,23,42,.92);}
    html[data-theme="light"] .hm-weekdays > div{color:rgba(51,65,85,.9);}
    html[data-theme="light"] .hm-daynum{color:rgba(51,65,85,.85);}
    html[data-theme="light"] .hm-empty{border-color:rgba(15,23,42,.12);}


    /* Modal */
    .trl-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;}
    .trl-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;padding:16px;}
    .trl-modal-panel{max-width:46rem;width:100%;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid rgba(148,163,184,.16);background: var(--bg);}

    /* Copyable bubble value */
    .copyable{user-select:text;}
    .copyable:hover{filter: brightness(1.05);}
    .copy-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.06);font-size:.78rem;color:rgba(226,232,240,.92);}

    /* Toast */
    #toastHost{position:fixed;right:18px;top:88px;z-index:1100;display:flex;flex-direction:column;gap:10px;}
    .trl-toast{min-width: 280px;max-width: 420px;border-radius:14px;border:1px solid rgba(148,163,184,.16);
      background: var(--bg);box-shadow:none;padding:12px 12px;}
.trl-toast .trl-toast-text{color:var(--text);opacity:.92;}
.trl-toast .trl-toast-close{color:rgba(148,163,184,.9);} 
.trl-toast .trl-toast-close:hover{color:var(--text);} 

    /* Light mode: required-fields toast should be white with dark text */
    html[data-theme="light"] .trl-toast{
      background:#ffffff !important;
      color:#0f172a !important;
      border-color: rgba(15,23,42,.12) !important;
    }
    html[data-theme="light"] .trl-toast .trl-toast-text{ color:#0f172a !important; opacity:.92; }
    html[data-theme="light"] .trl-toast .trl-toast-close{ color: rgba(100,116,139,.95) !important; }
    html[data-theme="light"] .trl-toast .trl-toast-close:hover{ color:#0f172a !important; }


    /* Theme tokens (single source of truth) */
    html[data-theme="dark"]{
      --bg:#0E1117;           /* page background */
      --fg:#ffffff;           /* primary text */
      --text: var(--fg);      /* legacy alias */
      --muted:#9aa4b2;
      --muted2:#c0c7d2;
      --card:#1a1f2e;
      --card2:#0E1117;
      --border:#252b3a;
      --border2:rgba(255,255,255,.10);
      --shadow:0 10px 30px rgba(0,0,0,.25);
      --input:#0E1117;
      --inputBorder:#3a4258;

      --blue:#2563eb;
      --blue2:#3b82f6;
      --green:#22c55e;
      --red:#ef4444;
      --yellow:#f59e0b;
      --purple:#a855f7;
      --purple2:#7c3aed;

      /* legacy layout/background aliases */
      --bg0: var(--bg);
      --bg1: #0B1220;
    }

/* Light mode */
    html[data-theme="light"]{
      --bg:#f8fafc;
      --fg:#0f172a;
      --text: var(--fg);
      --muted:#334155;
      --muted2:#475569;
      --card:#ffffff;
      --card2:#f8fafc;
      --border:rgba(15,23,42,.10);
      --border2:rgba(15,23,42,.14);
      --shadow: 0 20px 55px rgba(2,6,23,.12);
      --input:#F3F4F6;
      --inputBorder:#94a3b8;

      --blue:#2563eb;
      --blue2:#3b82f6;
      --green:#22c55e;
      --red:#ef4444;
      --yellow:#f59e0b;
      --purple:#a855f7;
      --purple2:#7c3aed;

      /* legacy layout/background aliases */
      --bg0: var(--bg);
      --bg1:#eef2ff;
    }

    html[data-theme="light"] body{
      background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.16), transparent 60%),
                  radial-gradient(1000px 700px at 80% 0%, rgba(34,211,238,.10), transparent 55%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      color: var(--text);
    }
    html[data-theme="light"] .trl-input, html[data-theme="light"] .trl-select{background: rgba(255,255,255,.9);}
    html[data-theme="light"] .trl-tooltip{background:#ffffff;border-color:#cbd5e1;}

    /* Ensure native date/time pickers follow theme (supported in Chromium browsers) */
    html[data-theme="dark"]{ color-scheme: dark; }
    html[data-theme="light"]{ color-scheme: light; }

    /* Dark mode: make native calendar icons white */
    html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
    html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
      /* Force the indicator to stay white in dark mode (some browsers render it dark) */
      filter: brightness(0) invert(1) brightness(1.25) contrast(1.05);
      opacity: 1;
    }
    html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
    html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
      filter: none;
      opacity: .85;
    }


    /* Explicit calendar indicator (especially for mobile pickers that hide the native icon) */
    .trl-dateicon{
      padding-right: 44px !important;
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px 18px;
    }
    html[data-theme="dark"] .trl-dateicon{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23E2E8F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    }
    html[data-theme="light"] .trl-dateicon{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    }

    /* Avoid double icon on desktop where native indicator exists */
    @media (min-width: 768px){
      .trl-dateicon{
        background-image: none !important;
        padding-right: 12px !important;
      }
    }

    /* Mobile-only in-field hint for date range (works even if the browser hides placeholders) */
    .trl-dt-wrap{ position: relative; }
    .trl-dt-hint{
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: rgba(148,163,184,.95);
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }
    @media (min-width: 768px){
      .trl-dt-hint{ display:none !important; }
    }

    /* Performance Statistics: bubble groups on black background (DARK only) */
html[data-theme="dark"] .stats-bubble-panel{
  background:#0E1117;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:16px;
}
html[data-theme="light"] .stats-bubble-panel{
  background:#F8FAFC;
  border:1px solid rgba(148,163,184,.35);
  border-radius:16px;
}
/* LIGHT MODE: improve readability (darker muted text like ) */
html[data-theme="light"] .text-slate-200{ color:#0f172a !important; }
html[data-theme="light"] .text-slate-300{ color:#334155 !important; }
html[data-theme="light"] .text-slate-400{ color:#475569 !important; }
/* =========================
       PROP FIRM STYLING OVERRIDES (from html)
       ========================= */
    body{ background: var(--bg) !important; color: var(--fg) !important; font-size:14px; }

    /* Map journal wrappers to propfirm sectioning */
    .trl-card{
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 22px !important;
      box-shadow: var(--shadow) !important;
    }
    .trl-card-inner{
      background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
      border-radius: 18px !important;
    }

    /* Light mode: stronger inner card contrast (like ) */
    html[data-theme="light"] .trl-card-inner{
      background: rgba(248,250,252,.98) !important;
      border-color: rgba(148,163,184,.55) !important;
    }

    
    /* Fees settings panel: dark mode background + black inputs (match ) */
    html[data-theme="dark"] .trl-fees-panel{
      background: rgba(17,24,39,.50) !important; /* #11182780 */
      border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
    }
    html[data-theme="dark"] .trl-fees-panel .trl-input,
    html[data-theme="dark"] .trl-fees-panel .trl-select,
    html[data-theme="dark"] .trl-fees-panel .trl-dd-btn{
      background: #0E1117 !important;
    }
/* Inputs/selects look/feel */
    .trl-input, .trl-select{
      background: var(--input) !important;
      border: 1px solid var(--inputBorder) !important;
      color: var(--fg) !important;
    }
    html[data-theme="light"] .trl-input, html[data-theme="light"] .trl-select{
      background: var(--input) !important;
      color: var(--fg) !important;
    }

    /* Buttons (match propfirm compact behavior) */
    .trl-btn{ border-radius:12px; font-weight:650; }
    .trl-btn:focus, .trl-btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent) !important; outline-offset:2px; box-shadow:none !important; }
    .trl-btn-primary{ background: linear-gradient(90deg, rgba(37,99,235,1), rgba(34,211,238,.95)) !important; }

    /* KPI bubbles (Propfirm) */
    .kpi{position:relative;border:1px solid var(--border);background:rgba(148,163,184,.08);border-radius:16px;padding:12px;cursor:pointer;user-select:none;overflow:hidden;transition:border-color .15s ease, background .15s ease;}
    html[data-theme="light"] .kpi{ background:#F3F4F6; }
    .kpi:hover{ border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
    .kpi-copy{ position:absolute; right:12px; top:12px; opacity:.65; }
    .kpi-title{ font-size:13px; color: var(--muted); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    .kpi-value{ font-weight:800; font-size:24px; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .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) !important; }
    .kpi.green .kpi-title, .kpi.green .kpi-sub{ color: color-mix(in srgb, var(--green) 75%, var(--muted)) !important; }

    .kpi.red{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.18); }
    .kpi.red .kpi-value{ color: var(--red) !important; }
    .kpi.red .kpi-title, .kpi.red .kpi-sub{ color: color-mix(in srgb, var(--red) 75%, var(--muted)) !important; }

    .kpi.yellow{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); }
    .kpi.yellow .kpi-value{ color: var(--yellow) !important; }
    .kpi.yellow .kpi-title, .kpi.yellow .kpi-sub{ color: color-mix(in srgb, var(--yellow) 75%, var(--muted)) !important; }

    .kpi.purple{ background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.18); }
    .kpi.purple .kpi-value{ color: var(--purple) !important; }
    .kpi.purple .kpi-title, .kpi.purple .kpi-sub{ color: color-mix(in srgb, var(--purple) 75%, var(--muted)) !important; }

    /* Neutral (gray) scheme for "blue" bubbles — match html */
    .kpi.blue{ background:rgba(148,163,184,.08); border-color:var(--border); }
    html[data-theme="light"] .kpi.blue{ background:#F3F4F6; border-color:var(--border); }

    /* Keep neutral bubbles neutral on hover (no blue-tinted border) */
    .kpi.blue:hover{ border-color:var(--border) !important; background:rgba(148,163,184,.08) !important; }
    html[data-theme="light"] .kpi.blue:hover{ border-color:var(--border) !important; background:#F3F4F6 !important; }

    .kpi.blue .kpi-title{ color:var(--fg) !important; }
    .kpi.blue .kpi-value{ color:var(--fg) !important; }
    html[data-theme="dark"] .kpi.blue .kpi-sub{ color:#94A3B8E6 !important; }
    html[data-theme="light"] .kpi.blue .kpi-sub{ color:#000000 !important; }

    html[data-theme="light"] .kpi.green{ background:#E3F5EB; border-color: rgba(34,197,94,.22); }
    html[data-theme="light"] .kpi.red{ background:#F8E8E8; border-color: rgba(239,68,68,.22); }
    html[data-theme="light"] .kpi.yellow{ background:#F9EDE3; border-color: rgba(245,158,11,.24); }
    html[data-theme="light"] .kpi.purple{ background:#F1E9FF; border-color: rgba(168,85,247,.20); }


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

    /* Theme-aware header colors (only for top bar) */
    html[data-theme="light"] #site-header{
      background: rgba(255,255,255,0.86) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(37,99,235,0.22) !important;
    }
    html[data-theme="light"] #site-header.header-scrolled{
      background: rgba(255,255,255,0.92) !important;
      box-shadow: 0 18px 45px rgba(15,23,42,0.12) !important;
      border-bottom-color: rgba(37,99,235,0.35) !important;
    }
    html[data-theme="light"] #site-header .text-slate-300{ color: rgb(51 65 85) !important; }
    html[data-theme="light"] #site-header .text-slate-400{ color: rgb(71 85 105) !important; }
    html[data-theme="light"] #site-header .text-slate-200{ color: rgb(15 23 42) !important; }
    html[data-theme="light"] #site-header a[href="/"] span.text-white{ color: rgb(15 23 42) !important; }

    /* Light mode: keep logo + Log out text white inside */
    html[data-theme="light"] #trl-logo-link .text-white{ color:#ffffff !important; }
    html[data-theme="light"] #header-logout-desktop,
    html[data-theme="light"] #header-logout-mobile{ color:#ffffff !important; }
    html[data-theme="light"] #header-logout-desktop,
    html[data-theme="light"] #header-logout-desktop:hover,
    html[data-theme="light"] #header-logout-desktop:focus{ color:#ffffff !important; }

    /* Mobile menu should react to theme (propfirm) */
    #mobile-menu .trl-mobile-panel{ background: rgb(15 23 42); border-color: rgb(30 41 59); }
    html[data-theme="light"] #mobile-menu .trl-mobile-panel{ background: rgba(255,255,255,.96) !important; border-color: rgba(15,23,42,.12) !important; }
    html[data-theme="light"] #mobile-menu .trl-mobile-backdrop{ background: rgba(15,23,42,.35) !important; }
    html[data-theme="light"] #mobile-menu .trl-mobile-panel nav a{ color: rgb(51 65 85) !important; }
    html[data-theme="light"] #mobile-menu .trl-mobile-panel nav a:hover{ color: rgb(15 23 42) !important; background: rgba(15,23,42,.05) !important; }
    html[data-theme="light"] #mobile-menu #trl-mobile-cta{ border-top-color: rgba(15,23,42,.10) !important; }
    html[data-theme="light"] #mobile-menu .trl-mobile-settings{ border-color: rgba(15,23,42,.14) !important; color: rgb(15 23 42) !important; background: rgba(15,23,42,.04) !important; }

    /* Keep Settings text true black in LIGHT mode */
    html[data-theme="light"] #mobile-menu #trl-mobile-cta a.trl-mobile-settings,
    html[data-theme="light"] #mobile-menu #trl-mobile-cta a.trl-mobile-settings:visited,
    html[data-theme="light"] #mobile-menu #trl-mobile-cta a.trl-mobile-settings:hover,
    html[data-theme="light"] #mobile-menu #trl-mobile-cta a.trl-mobile-settings:active{
      color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; opacity:1 !important; filter:none !important;
    }

  
    /* Propfirm Copy Toast */
    .toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:2000}
    .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));
    }
    html[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}}
    

    
    /* MOBILE: keep copy toast visible above browser UI / safe-area */
    @media (max-width: 767px){
      .toasts{
        left:50%;
        right:auto;
        transform: translateX(-50%);
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        align-items:center;
        width:auto;
        max-width: calc(100vw - 28px);
      }
      .toast{
        width:auto;
        max-width: calc(100vw - 28px);
        justify-content:center;
        margin:0 auto;
      }
    }

/* Propfirm tool actions (theme switch) */
    .toolActions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
      margin: 0 0 18px;
      padding-bottom:2px;
    }
    .btn{
      appearance:none;border:1px solid var(--border);
      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;
    }
    .btn:focus,.btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset:2px; box-shadow:none; }
    .btn:active{transform:translateY(1px)}
    .btn.outline{border-color: rgba(148,163,184,.22) !important; background: transparent !important;}
    html[data-theme="light"] .btn.outline{border-color: rgba(15,23,42,.14) !important; color: rgba(2,6,23,.86) !important;}
    .btn.outline:hover{ background: rgba(148,163,184,.10) !important; }
    html[data-theme="light"] .btn.outline:hover{ background: rgba(15,23,42,.06) !important; }
    .btn:focus,.btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent) !important; outline-offset:2px; }
    

    /* Refresh overlay color should match current theme */

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

/* CSP cleanup: former inline style attributes */
.trl-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;}
.trl-icon-sm{width:16px;height:16px;}
.trl-hidden{display:none;}
.trl-select-col{width:42px;}
#copyToast{display:none;}

/* Theme-aware scrollbars: light in light mode, preserved dark in dark mode */
html[data-theme="dark"]{scrollbar-color:rgba(100,116,139,.55) rgba(2,6,23,.92);}
html[data-theme="light"]{scrollbar-color:rgba(203,213,225,.95) rgba(248,250,252,.98);}
html[data-theme="dark"] *{scrollbar-color:rgba(100,116,139,.55) rgba(2,6,23,.92);}
html[data-theme="light"] *{scrollbar-color:rgba(203,213,225,.95) rgba(248,250,252,.98);}
*::-webkit-scrollbar{width:10px;height:10px;}
html[data-theme="dark"] *::-webkit-scrollbar-track{background:rgba(2,6,23,.92);}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(100,116,139,.55);border-radius:999px;border:2px solid rgba(2,6,23,.92);}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.70);}
html[data-theme="light"] *::-webkit-scrollbar-track{background:rgba(248,250,252,.98);}
html[data-theme="light"] *::-webkit-scrollbar-thumb{background:rgba(203,213,225,.95);border-radius:999px;border:2px solid rgba(248,250,252,.98);}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.95);}


/* Requested fix: light theme native date/time picker and calendar icon */
html[data-theme="dark"] input.trl-datetime,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"]{
  color-scheme: dark;
}
html[data-theme="light"] input.trl-datetime,
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"]{
  color-scheme: light;
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: brightness(0) saturate(100%);
  opacity: .85;
}

/* KPI bubbles: info icon like the other CSP-cleaned tools, no visible copy button */
.kpi-copy{display:none !important;}
.kpi[data-bubble="1"],
#kpiRealized,
#kpiTP,
#kpiSL,
#kpiRR,
.kpi[data-compare]{cursor:pointer;}
.kpi-help{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:var(--muted);
  cursor:help;
}
.kpi-help i{width:16px;height:16px;color:inherit;}
html[data-theme="light"] .kpi-help{color:rgba(15,23,42,.55);}
.kpi.green .kpi-help{color:color-mix(in srgb, var(--green) 82%, var(--muted));}
.kpi.red .kpi-help{color:color-mix(in srgb, var(--red) 82%, var(--muted));}
.kpi.yellow .kpi-help{color:color-mix(in srgb, var(--yellow) 82%, var(--muted));}
.kpi.purple .kpi-help{color:color-mix(in srgb, var(--purple) 82%, var(--muted));}
.kpi.blue .kpi-help{color:var(--fg);}
.kpi-title{padding-right:28px;}
.kpi-help:focus-visible{
  outline:2px solid color-mix(in srgb, var(--blue) 65%, transparent);
  outline-offset:2px;
  border-radius:999px;
}


/* Breakeven trade option */
.trl-breakeven-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid rgba(245,158,11,.22);
  background:rgba(245,158,11,.10);
}
html[data-theme="light"] .trl-breakeven-row{
  background:#FFF7E6;
  border-color:rgba(245,158,11,.30);
}
.trl-breakeven-toggle{
  color:var(--fg);
  white-space:nowrap;
}
.trl-pnl-breakeven{
  color:var(--yellow) !important;
}
.trl-be-pill{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:var(--yellow);
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.22);
  vertical-align:middle;
}
html[data-theme="light"] .trl-be-pill{
  background:#FFF7E6;
  border-color:rgba(245,158,11,.30);
}


/* Final Trading Journal fixes: light-mode P&L colors and mobile CTA spacing */
html[data-theme="light"] .text-emerald-400,
html[data-theme="light"] .text-green-400,
html[data-theme="light"] .text-emerald-500,
html[data-theme="light"] .numPos{
  color:#16a34a !important;
  -webkit-text-fill-color:#16a34a !important;
}
html[data-theme="light"] .text-red-400,
html[data-theme="light"] .text-red-500,
html[data-theme="light"] .numNeg{
  color:#dc2626 !important;
  -webkit-text-fill-color:#dc2626 !important;
}
html[data-theme="light"] .trl-pnl-breakeven,
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-yellow-400,
html[data-theme="light"] .numMid{
  color:#f59e0b !important;
  -webkit-text-fill-color:#f59e0b !important;
}
#mobile-menu #header-logout-mobile{
  margin-top:10px;
}
@media (max-width:1023px){
  #mobile-menu #trl-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
}


/* Info tooltips must be fully opaque in both themes */
.trl-tooltip{
  background:#020617 !important;
  border-color:#334155 !important;
  color:#e5e7eb !important;
}
html[data-theme="light"] .trl-tooltip{
  background:#ffffff !important;
  border-color:#cbd5e1 !important;
  color:#334155 !important;
}
.trl-tooltip .tt-title{color:#f8fafc !important;}
.trl-tooltip .tt-body{color:#e5e7eb !important;}
html[data-theme="light"] .trl-tooltip .tt-title{color:#0f172a !important;}
html[data-theme="light"] .trl-tooltip .tt-body{color:#334155 !important;}


/* Mobile-only fixes: chart legend lines + datetime hint overlay */
.wl-distribution-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
@media (max-width: 640px){
  .wl-distribution-legend{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    line-height:1.35;
  }
  .wl-distribution-legend .wl-dot,
  .wl-distribution-legend > .text-slate-500{
    display:none !important;
  }
  .trl-dt-hint.is-hidden{
    display:none !important;
  }
}
.trl-dt-hint.is-hidden{
  display:none !important;
}