.tc-inline-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;}

.tc-noscript-message{color:white;padding:24px;font-family:system-ui;}


/* Trading Calculator CSP cleanup moved inline style attributes */
html[data-theme="dark"],html[data-theme="dark"] body{background:#0E1117;color-scheme:dark;}
html[data-theme="light"],html[data-theme="light"] body{background:#f8fafc;color-scheme:light;}
html.trl-plan-prehide-active body{visibility:hidden;}
#trl-desktop-cta,#trl-mobile-cta{visibility:hidden;}

/* Theme-aware scrollbars: light in light mode; dark mode keeps the original dark feel */
html[data-theme="light"],body[data-theme="light"]{scrollbar-color:#cbd5e1 #f8fafc;}
html[data-theme="light"]::-webkit-scrollbar,body[data-theme="light"]::-webkit-scrollbar,body[data-theme="light"] *::-webkit-scrollbar{width:12px;height:12px;}
html[data-theme="light"]::-webkit-scrollbar-track,body[data-theme="light"]::-webkit-scrollbar-track,body[data-theme="light"] *::-webkit-scrollbar-track{background:#f8fafc;}
html[data-theme="light"]::-webkit-scrollbar-thumb,body[data-theme="light"]::-webkit-scrollbar-thumb,body[data-theme="light"] *::-webkit-scrollbar-thumb{background:#cbd5e1;border:3px solid #f8fafc;border-radius:999px;}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,body[data-theme="light"]::-webkit-scrollbar-thumb:hover,body[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
html[data-theme="dark"],body[data-theme="dark"]{scrollbar-color:#374151 #0E1117;}
html[data-theme="dark"]::-webkit-scrollbar,body[data-theme="dark"]::-webkit-scrollbar,body[data-theme="dark"] *::-webkit-scrollbar{width:12px;height:12px;}
html[data-theme="dark"]::-webkit-scrollbar-track,body[data-theme="dark"]::-webkit-scrollbar-track,body[data-theme="dark"] *::-webkit-scrollbar-track{background:#0E1117;}
html[data-theme="dark"]::-webkit-scrollbar-thumb,body[data-theme="dark"]::-webkit-scrollbar-thumb,body[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#374151;border:3px solid #0E1117;border-radius:999px;}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,body[data-theme="dark"]::-webkit-scrollbar-thumb:hover,body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#4b5563;}


/* moved from <style id=trl-theme-firstpaint> */
/* Ensure correct background from the very first paint (no black/white flash) */
    html, body{ background:#0E1117 !important; }
    html[data-theme="light"], html[data-theme="light"] body{ background:#f8fafc !important; }


/* moved from <style id=trl-plan-prehide> */
html.trl-plan-prehide-active body{visibility:hidden;}


/* moved from <style> */
.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:42rem;width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);}
    button,[role="button"]{pointer-events:auto;}
  
    /* --- TRL theme helpers (only what is necessary for requested fixes) --- */
    [data-theme="dark"] .trl-btn-outline{border-color:#374151;color:#e5e7eb;}
    [data-theme="light"] .trl-btn-outline{border-color:#d1d5db;color:#111827;background:#ffffff;}
    [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);}
    [data-theme="light"] .trl-btn-outline:hover{background:rgba(0,0,0,.05);}



/* --- TRL FIX (v2): Make ALL form field labels CSS-driven like big headers --- */
/* These labels were previously colored via React darkMode conditionals.
   We convert them to use a dedicated class so they follow live theme toggles instantly. */
html[data-theme="light"] #root .trl-field-label{ color:#000000 !important; }
body[data-theme="light"] #root .trl-field-label{ color:#000000 !important; }
html[data-theme="dark"] #root .trl-field-label{ color:#ffffff !important; }
body[data-theme="dark"] #root .trl-field-label{ color:#ffffff !important; }

/* --- TRL FIX: Field labels must update immediately on theme toggle (no refresh) --- */
/* The app's internal `darkMode` flag is derived from `body[data-theme]` (see bundle.js),
   but the top-bar theme toggle updates `html[data-theme]`. That mismatch means small form labels
   can keep the previous Tailwind text-gray-* class until refresh.
   Fix: make label text color purely CSS-driven from the live theme attribute. */

/* Light mode: labels black */
html[data-theme="light"] #root label,
html[data-theme="light"] #root label *{
  color:#0f172a !important; /* black-ish */
}

/* Dark mode: labels white */
html[data-theme="dark"] #root label,
html[data-theme="dark"] #root label *{
  color:#ffffff !important;
}

/* --- TRL FIX: Panel headers must update immediately on theme toggle --- */
    /* Some headings are rendered from cached HTML; force correct color from current theme */
    html[data-theme="light"] #root h2.text-lg.font-semibold,
    html[data-theme="light"] #root h3.text-lg.font-semibold{
      color:#0f172a !important; /* near Tailwind gray-900/black */
    }
    html[data-theme="dark"] #root h2.text-lg.font-semibold,
    html[data-theme="dark"] #root h3.text-lg.font-semibold{
      color:#ffffff !important;
    }

/* Dialog close button color per theme (Symbol Settings) */
    [data-theme="dark"] .trl-dialog-close{color:#9ca3af;}
    [data-theme="dark"] .trl-dialog-close:hover{color:#ffffff;}
    [data-theme="light"] .trl-dialog-close{color:#111827;}
    [data-theme="light"] .trl-dialog-close:hover{color:#111827;}


    /* Native select styling + arrow visibility + move arrow inward */
    select.trl-select{
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      padding-left:14px; /* avoid clipped text */
      padding-right:42px; /* room for arrow */
      padding-top:10px;   /* prevent descenders clipping */
      padding-bottom:10px;/* prevent descenders clipping */
      text-indent:0;
      background-repeat:no-repeat;
      background-position:right 14px center; /* move arrow inside */
      background-size:16px 16px;
      line-height:1.35;
    }
    [data-theme="dark"] select.trl-select{
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      padding-left:14px; /* avoid clipped text */
      padding-right:42px; /* room for arrow */
      padding-top:10px;   /* prevent descenders clipping */
      padding-bottom:10px;/* prevent descenders clipping */
      text-indent:0;
      background-repeat:no-repeat;
      background-position:right 14px center; /* move arrow inside */
      background-size:16px 16px;
      line-height:1.35;
    }
    [data-theme="light"] select.trl-select{
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      padding-left:14px; /* avoid clipped text */
      padding-right:42px; /* room for arrow */
      padding-top:10px;   /* prevent descenders clipping */
      padding-bottom:10px;/* prevent descenders clipping */
      text-indent:0;
      background-repeat:no-repeat;
      background-position:right 14px center; /* move arrow inside */
      background-size:16px 16px;
      line-height:1.35;
    }
    [data-theme="light"] select.trl-select option{color:#111827;background:#ffffff;}
    [data-theme="dark"] select.trl-select option{color:#ffffff;background:#0E1117;}

    /* Smaller selects (e.g., h-8 in Profiles) need tighter vertical padding to avoid clipped descenders */
    select.trl-select.trl-select-sm{
      padding-top:6px !important;
      padding-bottom:6px !important;
      line-height:1.2 !important;
    }

    /* h-9 selects (e.g., Margin-based helper) - prevent clipped descenders */
    select.trl-select.trl-select-h9{
      padding-top:8px !important;
      padding-bottom:8px !important;
      line-height:1.2 !important;
    }


    /* Dropdown arrow colors per theme (appearance:none removes native arrow) */
    [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");
    }
    [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");
    }


  
    /* Consistent focus ring (inside element so it won't get clipped by overflow-hidden parents) */
    [data-theme="dark"] input:focus,
    [data-theme="dark"] select:focus,
    [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);
    }
    [data-theme="light"] input:focus,
    [data-theme="light"] select:focus,
    [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);
    }


    /* Disable focus outlines for the Category combo input (requested) */
    input.trl-no-focus:focus{
      outline: none !important;
      outline-offset: 0 !important;
      box-shadow: none !important;
      border-color: inherit !important;
    }

/* Switch colors (Light mode: OFF = light gray, ON = blue) */
    [data-theme="light"] .trl-switch-track:not(.bg-blue-600){
      background:#e5e7eb;
      border-color:#d1d5db;
    }


  

    /* --- TRL plan-based feature locks (Trading Calculator) --- */
    html[data-trl-plan="free"] #trl-symbol-settings-btn{
      opacity:0.55 !important;
      filter:grayscale(1) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    html[data-trl-plan="free"] #trl-profiles-locked-area-desktop,
    html[data-trl-plan="free"] #trl-profiles-locked-area-mobile{
      opacity:0.55 !important;
      filter:grayscale(1) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    /* Ensure nested interactive controls cannot be clicked/opened (selects, buttons, etc.) */
    html[data-trl-plan="free"] #trl-profiles-locked-area-desktop *,
    html[data-trl-plan="free"] #trl-profiles-locked-area-mobile *{
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    html[data-trl-plan="free"] #trl-margin-helper-locked-area-desktop,
    html[data-trl-plan="free"] #trl-margin-helper-locked-area-mobile{
      opacity:0.55 !important;
      filter:grayscale(1) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    /* Ensure nested interactive controls cannot be clicked/opened (selects, buttons, etc.) */
    html[data-trl-plan="free"] #trl-margin-helper-locked-area-desktop *,
    html[data-trl-plan="free"] #trl-margin-helper-locked-area-mobile *{
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    html[data-trl-plan="free"] #trl-risk-percent-label-desktop,
    html[data-trl-plan="free"] #trl-risk-fixed-label-desktop,
    html[data-trl-plan="free"] #trl-risk-qty-label-desktop,
    html[data-trl-plan="free"] #trl-risk-percent-label-mobile,
    html[data-trl-plan="free"] #trl-risk-fixed-label-mobile,
    html[data-trl-plan="free"] #trl-risk-qty-label-mobile{
      opacity:0.55 !important;
      filter:grayscale(1) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
    }
    html[data-trl-plan="free"] #trl-risk-percent-input-desktop,
    html[data-trl-plan="free"] #trl-risk-fixed-input-desktop,
    html[data-trl-plan="free"] #trl-risk-qty-input-desktop,
    html[data-trl-plan="free"] #trl-risk-percent-input-mobile,
    html[data-trl-plan="free"] #trl-risk-fixed-input-mobile,
    html[data-trl-plan="free"] #trl-risk-qty-input-mobile{
      opacity:0.55 !important;
      filter:grayscale(1) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
    }


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


/* moved from <style> */
/* ---- TRL header (copied from html) ---- */
      #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);
      }
    
      /* Theme-aware header colors (only for top bar) */
      /* First-paint safety: also key off <html data-theme> so header is correct before body[data-theme] is set */
      html[data-theme="light"] #site-header{
        background: rgba(255,255,255,0.86);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(37,99,235,0.22);
      }
      html[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);
      }
      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; }
      html[data-theme="light"] #site-header a[href="/"] [data-lucide="calculator"]{ color: #ffffff !important; stroke: #ffffff !important; }

      html[data-theme="light"] #site-header .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
      html[data-theme="light"] #site-header .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }
      html[data-theme="light"] #site-header .text-white{ color: rgb(15 23 42) !important; }

      /* Light mode: keep desktop Log out text white inside gradient button */
      html[data-theme="light"] #site-header #header-logout-desktop,
      html[data-theme="light"] #site-header #header-logout-desktop *{
        color: #ffffff !important;
      }
      html[data-theme="light"] #site-header .bg-slate-900\/95{ background: rgba(255,255,255,0.96) !important; }
      html[data-theme="light"] #site-header .border-slate-800{ border-color: rgba(15,23,42,0.10) !important; }


      
      body[data-theme="light"] #site-header{
        background: rgba(255,255,255,0.86);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        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="/home"] span.text-white{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #site-header a[href="/home"] [data-lucide="calculator"]{ color: #ffffff !important; stroke: #ffffff !important; }

      body[data-theme="light"] #site-header .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #site-header .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }
      body[data-theme="light"] #site-header .text-white{ color: rgb(15 23 42) !important; }

      /* Light mode: keep desktop Log out text white inside gradient button */
      body[data-theme="light"] #site-header #header-logout-desktop,
      body[data-theme="light"] #site-header #header-logout-desktop *{
        color: #ffffff !important;
      }
      body[data-theme="light"] #site-header .bg-slate-900\/95{ background: rgba(255,255,255,0.96) !important; }
      body[data-theme="light"] #site-header .border-slate-800{ border-color: rgba(15,23,42,0.10) !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;
      }

      /* 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;
      }
      html[data-theme="light"] .page-transition-overlay{
        background-color: #f8fafc;
      }
      body[data-theme="light"] .page-transition-overlay{
        background-color: #f8fafc;
      }

      /* Lightweight first-paint loader (shows while scripts/React hydrate) */
      .trl-page-loader{
        position:absolute;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
      }
            .trl-page-loader-ring{
        width: 92px;
        height: 58px;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        gap: 7px;
        position:relative;
        transform: translateZ(0);
        will-change: transform;
        /* subtle stage + baseline */
        background: linear-gradient(180deg,
          rgba(148,163,184,0.00) 0%,
          rgba(148,163,184,0.00) 66%,
          rgba(148,163,184,0.10) 68%,
          rgba(148,163,184,0.00) 100%);
        border-radius: 14px;
      }
      /* soft glow “market aura” behind candles */
      .trl-page-loader-ring::before{
        content:"";
        position:absolute;
        inset: -16px -22px -12px -22px;
        border-radius: 18px;
        background:
          radial-gradient(70% 60% at 50% 40%,
            rgba(34,211,238,0.20) 0%,
            rgba(59,130,246,0.14) 36%,
            rgba(59,130,246,0.00) 72%);
        filter: blur(10px);
        opacity: 0.55;
        animation: trl-glow 3200ms ease-in-out infinite;
        pointer-events:none;
      }
      body[data-theme="light"] .trl-page-loader-ring::before{
        background:
          radial-gradient(70% 60% at 50% 40%,
            rgba(37,99,235,0.18) 0%,
            rgba(6,182,212,0.12) 38%,
            rgba(37,99,235,0.00) 74%);
        opacity: 0.48;
      }
.trl-page-loader-ring span{
        position:relative;
        width: 11px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(59,130,246,0.98) 0%, rgba(34,211,238,0.98) 100%);
        box-shadow: 0 10px 22px rgba(59,130,246,0.16), 0 2px 0 rgba(255,255,255,0.06) inset;
        transform-origin: bottom;
        animation: trl-candle 1900ms ease-in-out infinite;
      }
      body[data-theme="light"] .trl-page-loader-ring span{
        background: linear-gradient(180deg, rgba(37,99,235,0.92) 0%, rgba(6,182,212,0.92) 100%);
        box-shadow: 0 10px 22px rgba(37,99,235,0.14), 0 2px 0 rgba(255,255,255,0.28) inset;
      }
      .trl-page-loader-ring span::before,
      .trl-page-loader-ring span::after{
        content:"";
        position:absolute;
        left:50%;
        width: 2px;
        border-radius: 9999px;
        background: rgba(148,163,184,0.70);
        transform: translateX(-50%);
        opacity: 0.95;
      }
      body[data-theme="light"] .trl-page-loader-ring span::before,
      body[data-theme="light"] .trl-page-loader-ring span::after{
        background: rgba(71,85,105,0.55);
      }
      /* Upper wick */
      .trl-page-loader-ring span::before{
        bottom: 100%;
        height: 14px;
      }
      /* Lower wick */
      .trl-page-loader-ring span::after{
        top: 100%;
        height: 10px;
        opacity: 0.75;
      }

      .trl-page-loader-ring span:nth-child(1){ animation-delay: -0ms;   height: 30px; }
      .trl-page-loader-ring span:nth-child(2){ animation-delay: -380ms; height: 38px; }
      .trl-page-loader-ring span:nth-child(3){ animation-delay: -760ms; height: 34px; }
      .trl-page-loader-ring span:nth-child(4){ animation-delay: -1140ms; height: 42px; }
      .trl-page-loader-ring span:nth-child(5){ animation-delay: -1520ms; height: 32px; }

      /* Price sweep line removed (was overlaying candles) */
      .trl-page-loader-ring::after{
        content:none;
      }
.trl-page-loader-dots{
        position:absolute;
        transform: translateY(78px);
        width: min(420px, 90vw);
        text-align:center;
        opacity:.92;
      }
      .trl-page-loader-dots span{
        width:6px;
        height:6px;
        border-radius:9999px;
        background: rgba(148,163,184,.9); /* slate-400 */
        animation: trl-bounce 0.9s ease-in-out infinite;
      }
      body[data-theme="light"] .trl-page-loader-dots span{
        background: rgba(71,85,105,.65); /* slate-600 */
      }
      .trl-page-loader-dots span:nth-child(2){ animation-delay: 0.12s; }
      .trl-page-loader-dots span:nth-child(3){ animation-delay: 0.24s; }

      

      .trl-page-loader-advice{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        max-width: min(520px, 92vw);
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 13.5px;
        line-height: 1.45;
        font-weight: 500;
        letter-spacing: 0.2px;
        color: rgba(226,232,240,0.92); /* slate-200 */
        background: rgba(15,23,42,0.55); /* slate-900 */
        border: 1px solid rgba(148,163,184,0.22); /* slate-400 */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-shadow: 0 10px 28px rgba(0,0,0,0.35);
        user-select: none;
        will-change: transform, opacity;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      body[data-theme="light"] .trl-page-loader-advice{
        color: rgba(15,23,42,0.92); /* slate-900 */
        background: rgba(255,255,255,0.75);
        border-color: rgba(71,85,105,0.22); /* slate-600 */
        text-shadow: 0 10px 28px rgba(0,0,0,0.12);
      }
      .trl-page-loader-advice.trl-advice-swap{
        animation: trl-advice-swap 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      @keyframes trl-advice-swap{
        0%{ opacity: 0; transform: translateY(6px); }
        38%{ opacity: 1; transform: translateY(0); }
        100%{ opacity: 0.92; transform: translateY(0); }
      }
            @keyframes trl-glow{
        0%   { opacity: 0.45; transform: scale(0.98); }
        50%  { opacity: 0.62; transform: scale(1.02); }
        100% { opacity: 0.45; transform: scale(0.98); }
      }

@keyframes trl-candle{
        0%   { transform: translateY(1px) scaleY(0.92); filter: saturate(0.99) brightness(0.99); opacity: 0.82; }
        30%  { transform: translateY(0px) scaleY(1.03); filter: saturate(1.03) brightness(1.02); opacity: 0.96; }
        55%  { transform: translateY(-1px) scaleY(1.06); filter: saturate(1.05) brightness(1.03); opacity: 1; }
        80%  { transform: translateY(0px) scaleY(1.00); filter: saturate(1.02) brightness(1.01); opacity: 0.93; }
        100% { transform: translateY(1px) scaleY(0.92); filter: saturate(0.99) brightness(0.99); opacity: 0.82; }
      }


      @keyframes trl-sweep{
        0%   { transform: translateX(-12px); opacity: 0.10; }
        40%  { opacity: 0.22; }
        60%  { opacity: 0.18; }
        100% { transform: translateX(12px); opacity: 0.10; }
      }


      @keyframes trl-bounce{
        0%, 100%{ transform: translateY(0); opacity: .55; }
        50%{ transform: translateY(-6px); opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce){
        .trl-page-loader-ring, .trl-page-loader-ring span, .trl-page-loader-ring::after, .trl-page-loader-dots span, .trl-page-loader-advice{ animation: none !important; }
      }

      /* Light mode: keep logo + Log out text white inside */
      body[data-theme="light"] #trl-logo-link .text-white,
      body[data-theme="light"] #trl-logo-link svg,
      body[data-theme="light"] #trl-logo-link [data-lucide="calculator"]{
        color: #ffffff !important;
        stroke: #ffffff !important;
      }
      body[data-theme="light"] #header-logout-desktop,
      body[data-theme="light"] #header-logout-mobile{ color: #ffffff !important; }
      /* Light mode: keep desktop Log out text white inside (override any utility classes) */
      body[data-theme="light"] #header-logout-desktop,
      body[data-theme="light"] #header-logout-desktop:hover,
      body[data-theme="light"] #header-logout-desktop:focus{ color: #ffffff !important; }

      /* Light mode: mobile menu - keep Dashboard label black even if it is the current/active page */
      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 plan badge variants (Free/Core/Pro/Prop) ---- */
      #trl-plan-badge{min-width:132px;contain:layout paint;will-change:transform;}
      #trl-plan-label{display:inline-block;}

      #trl-plan-badge.trl-plan-free { background: linear-gradient(to right, rgba(148,163,184,0.45), rgba(59,130,246,0.35)); box-shadow: 0 10px 30px rgba(2,6,23,0.55); }
      #trl-plan-badge.trl-plan-core { background: linear-gradient(to right, rgba(59,130,246,1), rgba(34,211,238,1)); }
      #trl-plan-badge.trl-plan-pro  { background: linear-gradient(to right, rgba(168,85,247,1), rgba(34,211,238,0.95)); box-shadow: 0 10px 30px rgba(168,85,247,0.22); }
      #trl-plan-badge.trl-plan-prop { background: linear-gradient(to right, rgba(249,115,22,1), rgba(220,38,38,0.95)); box-shadow: 0 10px 30px rgba(249,115,22,0.20); }

      /* ---- TRL plan lock overlay (tool page) ---- */
      #trl-tool-lock-overlay{position:fixed;inset:0;z-index:2000;display:none;}
      #trl-tool-lock-overlay.trl-show{display:block;}


/* TRL mobile side menu auth buttons: match Trading Journal placement + spacing */
#mobile-menu .trl-mobile-panel{
  background: rgb(15 23 42);
  border-color: rgb(30 41 59);
}
#mobile-menu #header-logout-mobile{
  margin-top:10px;
}
@media (max-width:1023px){
  #mobile-menu #trl-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
}
html[data-theme="light"] #mobile-menu .trl-mobile-panel,
body[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,
body[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,
body[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,
body[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-settings,
html[data-theme="light"] #mobile-menu .trl-mobile-settings:visited,
html[data-theme="light"] #mobile-menu .trl-mobile-settings:hover,
html[data-theme="light"] #mobile-menu .trl-mobile-settings:active,
body[data-theme="light"] #mobile-menu .trl-mobile-settings,
body[data-theme="light"] #mobile-menu .trl-mobile-settings:visited,
body[data-theme="light"] #mobile-menu .trl-mobile-settings:hover,
body[data-theme="light"] #mobile-menu .trl-mobile-settings:active{
  border-color: rgba(15,23,42,.14) !important;
  color: rgb(15 23 42) !important;
  background: rgba(15,23,42,.04) !important;
}

/* === TRL accessibility settings + zoom/reflow patch (homepage-aligned) === */
.trl-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.trl-a11y-settings-button {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  margin-left: 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  box-sizing: border-box;
  overflow: visible;
  transition: background-color 160ms ease, color 160ms ease;
}

.trl-a11y-settings-button:hover,
.trl-a11y-settings-button:active {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

html[data-theme="light"] .trl-a11y-settings-button,
body[data-theme="light"] .trl-a11y-settings-button {
  color: #0f172a;
}

html[data-theme="light"] .trl-a11y-settings-button:hover,
html[data-theme="light"] .trl-a11y-settings-button:active,
body[data-theme="light"] .trl-a11y-settings-button:hover,
body[data-theme="light"] .trl-a11y-settings-button:active {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

#trl-desktop-cta.trl-a11y-nav-host {
  position: relative;
}

@media (min-width: 1024px) {
  #trl-desktop-cta.trl-a11y-nav-host .trl-a11y-settings-button {
    position: absolute;
    right: calc(100% + 0.5rem);
    left: auto;
    top: 50%;
    margin-left: 0;
    transform: translateY(-50%);
  }

  #trl-desktop-cta.trl-a11y-nav-host .trl-a11y-settings-button:hover,
  #trl-desktop-cta.trl-a11y-nav-host .trl-a11y-settings-button:active {
    transform: translateY(-50%);
  }
}

@media (max-width: 1023px) {
  .trl-a11y-settings-button {
    margin-left: auto;
    margin-right: 0.35rem;
    position: relative;
    z-index: 55;
  }
}

.trl-a11y-pause-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  width: 1rem;
  height: 1rem;
}

.trl-a11y-pause-icon span {
  display: block;
  width: 0.22rem;
  height: 0.88rem;
  border-radius: 999px;
  background: currentColor;
}

.trl-a11y-settings-button:focus-visible {
  outline: 2px solid #67e8f9 !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.trl-a11y-settings-panel {
  position: fixed;
  top: 5.75rem;
  right: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
  z-index: 2500;
  width: min(24rem, calc(100vw - 2rem));
  color: #ffffff;
}

.trl-a11y-settings-panel[hidden] {
  display: none !important;
}

.trl-a11y-panel-inner {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.25rem;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);
  padding: 1rem;
}

html[data-theme="light"] .trl-a11y-panel-inner,
body[data-theme="light"] .trl-a11y-panel-inner {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 80px rgba(15, 23, 42, 0.18);
}

.trl-a11y-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.trl-a11y-panel-header h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #ffffff;
}

html[data-theme="light"] .trl-a11y-panel-header h2,
body[data-theme="light"] .trl-a11y-panel-header h2 {
  color: #0f172a;
}

.trl-a11y-panel-close {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 0;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}

.trl-a11y-panel-close::before {
  content: "×";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -53%);
  color: currentColor;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 800;
}

html[data-theme="light"] .trl-a11y-panel-close,
body[data-theme="light"] .trl-a11y-panel-close {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

.trl-a11y-panel-copy {
  margin: 0.55rem 0 0.875rem;
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html[data-theme="light"] .trl-a11y-panel-copy,
body[data-theme="light"] .trl-a11y-panel-copy {
  color: rgba(15, 23, 42, 0.72);
}

.trl-a11y-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.trl-a11y-switch-row:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="light"] .trl-a11y-switch-row,
body[data-theme="light"] .trl-a11y-switch-row {
  background: rgba(15, 23, 42, 0.035);
  border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .trl-a11y-switch-row:hover,
body[data-theme="light"] .trl-a11y-switch-row:hover {
  background: rgba(15, 23, 42, 0.055);
  border-color: rgba(15, 23, 42, 0.16);
}

.trl-a11y-switch-row strong,
.trl-a11y-switch-row small {
  display: block;
}

.trl-a11y-switch-row strong {
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 900;
}

.trl-a11y-switch-row small {
  margin-top: 0.25rem;
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.75rem;
  line-height: 1.35;
}

html[data-theme="light"] .trl-a11y-switch-row strong,
body[data-theme="light"] .trl-a11y-switch-row strong {
  color: #0f172a;
}

html[data-theme="light"] .trl-a11y-switch-row small,
body[data-theme="light"] .trl-a11y-switch-row small {
  color: rgba(15, 23, 42, 0.62);
}

.trl-a11y-switch-row input[role="switch"] {
  width: 2.875rem;
  height: 1.625rem;
  flex: 0 0 auto;
  accent-color: #38bdf8;
}

.trl-a11y-reset-button {
  margin-top: 0.875rem;
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 0.8125rem;
  font-weight: 900;
}

html[data-theme="light"] .trl-a11y-reset-button,
body[data-theme="light"] .trl-a11y-reset-button {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

.trl-a11y-reset-button:hover,
.trl-a11y-panel-close:hover {
  background: rgba(255, 255, 255, 0.10);
}

html[data-theme="light"] .trl-a11y-reset-button:hover,
html[data-theme="light"] .trl-a11y-panel-close:hover,
body[data-theme="light"] .trl-a11y-reset-button:hover,
body[data-theme="light"] .trl-a11y-panel-close:hover {
  background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1023px) {
  .trl-a11y-settings-panel {
    top: 4.75rem;
    right: 1rem;
  }
}

html.trl-motion-paused *,
html.trl-motion-paused *::before,
html.trl-motion-paused *::after,
html.trl-reduced-motion *,
html.trl-reduced-motion *::before,
html.trl-reduced-motion *::after {
  animation-play-state: paused !important;
  scroll-behavior: auto !important;
}

html.trl-motion-paused .trl-page-loader-ring,
html.trl-motion-paused .trl-page-loader-ring::before,
html.trl-motion-paused .trl-page-loader-ring span,
html.trl-motion-paused .trl-page-loader-dots span,
html.trl-motion-paused .trl-page-loader-advice,
html.trl-reduced-motion .trl-page-loader-ring,
html.trl-reduced-motion .trl-page-loader-ring::before,
html.trl-reduced-motion .trl-page-loader-ring span,
html.trl-reduced-motion .trl-page-loader-dots span,
html.trl-reduced-motion .trl-page-loader-advice {
  animation: none !important;
  transform: none !important;
}

html.trl-motion-paused canvas[id*="canvas"],
html.trl-motion-paused .particles,
html.trl-motion-paused .particle,
html.trl-reduced-motion canvas[id*="canvas"],
html.trl-reduced-motion .particles,
html.trl-reduced-motion .particle {
  display: none !important;
}

/* Keep page colors/backgrounds intact while stopping motion effects. */
html.trl-motion-paused body,
html.trl-reduced-motion body,
html.trl-motion-paused #root,
html.trl-reduced-motion #root {
  background-color: inherit;
}

/* === TRL zoom/reflow patch: scrollable overlays at 200%-400% zoom === */
#mobile-menu,
#mobile-menu .trl-mobile-panel,
.trl-a11y-settings-panel,
.trl-a11y-panel-inner,
.trl-modal,
.trl-modal-panel,
#root,
#root * {
  box-sizing: border-box;
}

#root p,
#root li,
#root a,
#root button,
#root label,
#root h1,
#root h2,
#root h3,
#root span,
#root input,
#root select,
#root textarea {
  overflow-wrap: anywhere;
}

@media (max-height: 700px), (max-width: 480px) {
  body.trl-mobile-menu-open,
  body.trl-modal-open {
    overflow: hidden;
  }

  #mobile-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #mobile-menu .trl-mobile-panel {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .trl-a11y-settings-panel {
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .trl-a11y-panel-inner,
  .trl-modal-panel {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  #root {
    overflow-x: clip;
  }

  #root .max-w-\[1600px\],
  #root .max-w-7xl,
  #root .max-w-6xl,
  #root .max-w-5xl,
  #root .max-w-4xl,
  #root .max-w-3xl {
    max-width: 100%;
  }
}


/* === TRL FIX: keep help/info boxes readable only at high zoom/reflow === */
html.trl-high-zoom-info-box-mode .trl-help-tooltip,
html.trl-high-zoom-info-box-mode div.whitespace-pre-line.text-xs.shadow-lg.border[style*="position: fixed"] {
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  min-width: min(16rem, calc(100vw - 24px)) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.4 !important;
  z-index: 2147483647 !important;
}

html.trl-high-zoom-info-box-mode .trl-help-tooltip,
html.trl-high-zoom-info-box-mode div.whitespace-pre-line.text-xs.shadow-lg.border[style*="position: fixed"] {
  width: calc(100vw - 24px) !important;
  min-width: 0 !important;
}