/* ==========================================================================
   MacroLens — Global Stylesheet
   Shared across every page (layout, header, sidebar, ticker, footer, panels).
   Loaded once from layouts/app.blade.php — no build step required.
   ========================================================================== */

  :root{
    /* ---- token system : "ledger" light, colorful pass ---- */
    --paper:#FBFAF7;          /* primary background — soft, low-chroma warm white */
    --paper-raised:#FFFFFF;   /* card surfaces */
    --paper-sunk:#F4F2EC;     /* recessed wells: tracks, table stripes — closer to paper now */
    --line:#EAE6DC;           /* hairline borders — quieter than before */
    --line-strong:#DDD8CB;

    --ink-900:#2B2C26;        /* primary text */
    --ink-700:#54544A;
    --ink-500:#83816F;
    --ink-300:#ACA994;

    --brass:#C68A1E;          /* signature accent — vivid brass/amber, not olive */
    --brass-deep:#9A6A0F;
    --brass-bright:#E0A53A;
    --brass-wash:#FBEFD3;

    --sage:#3E8F5F;           /* gains / strengthening — clear, confident green */
    --sage-deep:#2E7048;
    --sage-wash:#DFF0E5;
    --clay:#D1573C;           /* losses / weakening — warm, clear coral-red */
    --clay-deep:#B23F28;
    --clay-wash:#FCE4DC;

    --azure:#3171B8;          /* tertiary accent — used for select currency identities */
    --azure-wash:#DDEAF8;
    --plum:#8A4F9E;           /* tertiary accent — used for select currency identities */
    --plum-wash:#EFE1F3;
    --teal:#1E8C8C;
    --teal-wash:#DCF0EE;

    /* Fixed "ink stamp" chrome -- table headers, tooltips, selected-date
       pills, the burger's ink lines' hover state. Deliberately NOT
       redefined under [data-theme="dark"] below: these are always a
       near-black bar with white text by design (same idea as the
       footer/ticker, which are already hardcoded dark regardless of
       theme), not a "paper" surface that should invert. Reusing
       --ink-900 for this doubled its job as both "primary text" (which
       must invert) and "dark chrome background" (which must not) --
       impossible to satisfy both with one token once dark mode exists. */
    --chrome:#2B2C26;
    --chrome-hover:#3A3B33;

    --font-display:'Spectral', serif;
    --font-ui:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    --radius:4px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --shadow-sm: 0 1px 2px rgba(35,36,31,0.04), 0 1px 1px rgba(35,36,31,0.03);
    --shadow-md: 0 4px 16px rgba(35,36,31,0.06), 0 1px 2px rgba(35,36,31,0.04);
  }

  /* ---- token system : dark override ----
     Same "ledger" warmth carried into dark mode (a warm near-black, not
     cold blue-gray) -- brand accents (brass/sage/clay/azure/plum/teal)
     brightened slightly for contrast against a dark surface, and each
     "-wash" flips from a light pastel to a dark-tinted one since it's
     used as a subtle background fill (badge/chip backgrounds) that
     needs to stay subtle in both directions. --chrome intentionally
     absent -- see the comment above where it's defined. */
  html[data-theme="dark"]{
    --paper:#1C1B17;
    --paper-raised:#25241F;
    --paper-sunk:#17160F;
    --line:#39372E;
    --line-strong:#4A4739;

    --ink-900:#F2EFE6;
    --ink-700:#E8E4D8;
    --ink-500:#C2BDAC;
    --ink-300:#7A7566;

    --brass:#D89B32;
    --brass-deep:#EAB55A;
    --brass-bright:#F0C476;
    --brass-wash:#3A2E12;

    --sage:#4FAE72;
    --sage-deep:#6FC98F;
    --sage-wash:#16301F;
    --clay:#E37A5C;
    --clay-deep:#EC9576;
    --clay-wash:#3A1C14;

    --azure:#5FA0DE;
    --azure-wash:#16283A;
    --plum:#B187C0;
    --plum-wash:#2E2036;
    --teal:#45BDBD;
    --teal-wash:#12302E;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink-900);
    font-family:var(--font-ui);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}

  /* ================= GLOBAL BUTTON PRESS FEEL =================
     Every button/action-link across the admin panels only ever
     transitioned background-color on :hover -- clicking one had zero
     visual feedback beyond the instant background swap, which is
     exactly what reads as "hard"/unresponsive. This adds a consistent
     tactile press (a small scale-down while the mouse is held) plus a
     smoother easing curve, targeted broadly via `button`/.filter-chip
     and this codebase's own -btn/-link naming convention (every action
     element site-wide follows it: .aw-btn, .user-edit-link,
     .sp-delete-link, .rvad-approve-btn, .confirm-btn-confirm, etc.) so
     it reaches every admin button without editing dozens of individual
     page stylesheets. The !important is deliberate and scoped to just
     this one property: most of those per-page classes redeclare their
     own `transition:` shorthand for their hover color, which silently
     drops transform from animating -- :active's transform is the one
     thing here worth guaranteeing over a page-local override, since it
     never competes with anything else for control of color/layout. */
  button, .filter-chip,
  a[class*="-btn"], a[class*="-link"],
  span[class*="-btn"], span[class*="-link"],
  [class$="-btn"], [class*="-btn-"]{
    transition:background-color .15s var(--ease), border-color .15s var(--ease),
               color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
  }
  button:active, .filter-chip:active,
  a[class*="-btn"]:active, a[class*="-link"]:active,
  span[class*="-btn"]:active, span[class*="-link"]:active,
  [class$="-btn"]:active, [class*="-btn-"]:active{
    transform:scale(0.97) !important;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ================= LAYOUT SHELL ================= */
  .shell{
    display:grid;
    grid-template-columns: 0px 1fr;
    transition:grid-template-columns .38s var(--ease);
    min-height:100vh;
  }
  .shell.panel-open{ grid-template-columns: 264px 1fr; }

  /* ================= SIDEBAR ================= */
  .sidebar{
    background:linear-gradient(180deg, var(--paper-raised) 0%, var(--paper-sunk) 100%);
    border-right:1px solid var(--line-strong);
    overflow:hidden;
    white-space:nowrap;
    position:sticky;
    top:0;
    height:100vh;
  }
  .sidebar-inner{
    width:264px;
    height:100%;
    display:flex;
    flex-direction:column;
    padding:24px 0 18px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
  }
  .sb-brand{
    display:flex; align-items:baseline; gap:8px;
    padding:0 22px 20px;
    border-bottom:2px solid var(--brass);
    margin-bottom:6px;
  }
  .sb-brand .mark{font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--brass-deep); font-style:italic;}
  .sb-brand .sub{font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; color:var(--sage-deep); text-transform:uppercase; font-weight:600;}

  .sb-group-label{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--brass-deep); padding:16px 22px 7px; font-weight:700; opacity:.75;
  }
  .sb-nav{display:flex; flex-direction:column; gap:2px; padding:0 10px;}
  .sb-item{
    display:flex; align-items:center; gap:11px;
    padding:9px 12px;
    color:var(--ink-900);
    font-size:13.5px; font-weight:600;
    border-left:3px solid transparent;
    border-radius:6px;
    transition:background .16s, color .16s, border-color .16s;
  }
  .sb-item:hover{ background:var(--azure-wash); color:var(--azure); }
  .sb-item.active{
    color:#FFFFFF;
    border-left-color:var(--brass-deep);
    background:var(--brass);
    box-shadow:0 2px 8px rgba(198,138,30,0.35);
  }
  .sb-item .ic{ width:17px; height:17px; flex:0 0 17px; opacity:.9; color:var(--brass-deep); }
  .sb-item:hover .ic{ color:var(--azure); }
  .sb-item.active .ic{ opacity:1; color:#FFFFFF; }
  /* Only nav items with a "NEW"-style badge need their label wrapped in
     this (see partials/sidebar.blade.php) -- it's what lets the label
     shrink/ellipsis instead of pushing the badge past the sidebar's
     right edge on narrower widths. */
  .sb-item-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-item .tag{
    margin-left:auto; flex:0 0 auto; font-family:var(--font-mono); font-size:13px; padding:2px 7px;
    border-radius:10px; background:var(--sage); color:#FFFFFF; letter-spacing:.04em; font-weight:700;
  }

  .sb-foot{ margin-top:auto; padding:14px 22px 0; border-top:1px solid var(--line-strong); }
  .sb-status{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--sage-deep); padding-top:13px; font-weight:600;}
  .dot-live{width:7px;height:7px;border-radius:50%;background:var(--sage); flex:0 0 7px; box-shadow:0 0 0 3px var(--sage-wash);}

  /* ================= MAIN COLUMN ================= */
  .main{ display:flex; flex-direction:column; min-width:0; }

  /* ---- HEADER ---- */
  header.topbar{
    background:var(--paper-raised);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:30;
    min-width:0;
  }
  .topbar-row{
    display:flex; align-items:center; gap:16px;
    max-width:100%;
    padding:13px 28px;
  }
  .burger{
    width:36px; height:36px; flex:0 0 36px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong); border-radius:var(--radius);
    background:var(--paper); transition:border-color .2s, background .2s;
  }
  .burger:hover{ border-color:var(--brass); background:var(--brass-wash); }
  .burger span{display:block; width:14px; height:1px; background:var(--ink-700); position:relative;}
  .burger span::before, .burger span::after{content:'';position:absolute;left:0;width:14px;height:1px;background:var(--ink-700);}
  .burger span::before{top:-5px;} .burger span::after{top:5px;}

  .brandline{ display:flex; align-items:center; gap:12px; }
  .brandline .word{ font-family:var(--font-display); font-size:23px; font-weight:700; font-style:italic; letter-spacing:-.005em; color:var(--azure);}
  .brandline .word em{ color:var(--brass); font-style:italic; }
  .brandline .motto{
    font-family:var(--font-mono); font-size:11px; color:var(--sage-deep); letter-spacing:.08em; text-transform:uppercase;
    display:none; padding:4px 10px; background:var(--sage-wash); border-radius:20px; font-weight:700;
  }
  @media(min-width:980px){ .brandline .motto{display:inline;} }

  .session-clock .seg{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  padding:5px 10px; border-radius:8px; background:var(--paper-sunk);
}
.session-clock .seg.live{ background:var(--sage-wash); }
.session-clock .seg b{color:var(--ink-900); font-weight:700;}
.session-clock .seg.live b{ color:var(--sage-deep); }
.session-clock .seg .lbl{font-size:8.5px; letter-spacing:.1em; color:var(--ink-700); font-weight:600;}
.session-pip{width:6px;height:6px;border-radius:50%; display:inline-block; margin-right:5px;}
.pip-on{
  background:var(--sage);
  box-shadow:0 0 0 0 rgba(94,138,110,0.6);
  animation:pip-blink 1.6s ease-in-out infinite;
}
.pip-off{ background:var(--ink-300); }
@keyframes pip-blink{
  0%{ box-shadow:0 0 0 0 rgba(94,138,110,0.55); }
  70%{ box-shadow:0 0 0 5px rgba(94,138,110,0); }
  100%{ box-shadow:0 0 0 0 rgba(94,138,110,0); }
}

.topbar-spacer{flex:1;}


  .session-clock{
    display:flex; gap:14px; font-family:var(--font-mono); font-size:13px; color:var(--ink-700);
    padding-right:14px; border-right:1px solid var(--line); margin-right:6px;
  }
  .session-clock .seg{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .session-clock .seg b{color:var(--ink-900); font-weight:500;}
  .session-clock .seg .lbl{font-size:8.5px; letter-spacing:.1em; color:var(--ink-500);}
  .session-pip{width:5px;height:5px;border-radius:50%; display:inline-block; margin-right:5px;}
  .pip-on{background:var(--sage);} .pip-off{background:var(--ink-300);}

  .icon-btn{
    width:35px; height:35px; border-radius:var(--radius); border:1px solid transparent;
    display:flex; align-items:center; justify-content:center; color:var(--ink-500);
    transition:all .2s;
  }
  .icon-btn:hover{ color:var(--brass-deep); background:var(--brass-wash); border-color:var(--line); }

  /* Theme toggle -- both icons always in the DOM, CSS picks which one
     shows based on the current theme so there's no JS-driven re-render
     needed on click, just the [data-theme] attribute flipping. */
  html:not([data-theme="dark"]) #themeToggleBtn .theme-icon-sun{ display:none; }
  html[data-theme="dark"] #themeToggleBtn .theme-icon-moon{ display:none; }

  .user-chip{
    display:flex; align-items:center; gap:10px;
    padding:5px 12px 5px 5px; border-radius:24px; border:1px solid var(--line-strong);
    transition:border-color .2s, background .2s;
  }
  .user-chip:hover{ border-color:var(--brass); background:var(--brass-wash); }
  .user-chip .avatar{
    width:29px; height:29px; border-radius:50%; flex:0 0 29px;
    background:linear-gradient(145deg, var(--brass), var(--clay));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:12.5px; color:#FFF;
  }
  .user-chip .who{display:flex; flex-direction:column; line-height:1.2;}
  .user-chip .who b{font-size:12.5px; font-weight:600;}
  .user-chip .who span{font-size:12px; color:var(--ink-500); font-family:var(--font-mono);}

  /* ---- NOTIFICATION BELL ---- */
  .notif-bell-wrap{ position:relative; }
  .notif-badge{
    position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px;
    border-radius:10px; background:var(--clay); color:#FFF; font-size:9.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
    border:2px solid var(--paper-raised); line-height:1;
    box-shadow:0 0 0 0 rgba(209,87,60,0.6);
    animation:notif-blink 1.6s ease-in-out infinite;
  }
  @keyframes notif-blink{
    0%{ box-shadow:0 0 0 0 rgba(209,87,60,0.55); }
    70%{ box-shadow:0 0 0 6px rgba(209,87,60,0); }
    100%{ box-shadow:0 0 0 0 rgba(209,87,60,0); }
  }
  .notif-dropdown{
    position:absolute; top:calc(100% + 10px); right:0; width:360px; max-width:90vw;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-md); z-index:60; overflow:hidden; text-align:left;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98);
    transform-origin:top right;
    transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }
  .notif-dropdown.is-open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
  }
  .notif-dropdown-head{
    display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
    border-bottom:1px solid var(--line); font-weight:700; font-size:13.5px; color:var(--ink-900);
  }
  .notif-dropdown-head-title{ display:flex; align-items:center; gap:8px; }
  .notif-dropdown-unread-count{
    font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--clay-deep);
    background:var(--clay-wash); padding:2px 7px; border-radius:20px;
  }
  .notif-mark-read-btn{
    background:none; border:none; font-family:var(--font-mono); font-size:11px; font-weight:600;
    color:var(--brass-deep); cursor:pointer; padding:2px 4px;
  }
  .notif-mark-read-btn:hover{ text-decoration:underline; }
  .notif-dropdown-list{ max-height:360px; overflow-y:auto; }
  .notif-item{
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--line); transition:background .12s;
  }
  .notif-item:hover{ background:var(--paper-sunk); }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item.is-unread{ background:var(--brass-wash); box-shadow:inset 3px 0 0 var(--brass); }
  .notif-item-dot{ width:6px; height:6px; border-radius:50%; flex:0 0 6px; margin-top:6px; background:transparent; }
  .notif-item.is-unread .notif-item-dot{ background:var(--brass-deep); }
  .notif-item-flag{
    width:24px; height:24px; border-radius:50%; overflow:hidden; flex:0 0 24px;
    box-shadow:0 0 0 1px var(--line); margin-top:1px;
  }
  .notif-item-flag svg{ width:100%; height:100%; object-fit:cover; }
  .notif-item-body{ flex:1; min-width:0; }
  .notif-item-title{
    font-size:13px; font-weight:600; color:var(--ink-700); margin-bottom:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .notif-item.is-unread .notif-item-title{ font-weight:700; color:var(--ink-900); }
  .notif-item-msg{
    font-size:12px; color:var(--ink-500); margin-bottom:4px; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .notif-item-time{ font-size:10.5px; color:var(--ink-500); font-family:var(--font-mono); }
  .notif-empty{ padding:28px 16px; text-align:center; color:var(--ink-500); font-size:13px; }
  .notif-dropdown-foot{
    display:block; text-align:center; padding:12px; font-size:12px; font-weight:600;
    color:var(--brass-deep); border-top:1px solid var(--line); background:var(--paper-sunk);
  }
  .notif-dropdown-foot:hover{ background:var(--brass-wash); }

  /* ---- TICKER ---- */
  .ticker-bar{
    background:var(--chrome);
    border-bottom:1px solid var(--line);
    display:flex; align-items:stretch;
    overflow:hidden;
    position:relative;
  }
  .ticker-flag{
    flex:0 0 auto; display:flex; align-items:center; gap:8px;
    background:var(--clay); color:#FFF7F2; padding:0 18px;
    font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    z-index:2;
  }
  .ticker-flag::after{
    content:''; position:absolute; right:-14px; top:0; bottom:0; width:14px;
    background:var(--clay); clip-path:polygon(0 0,100% 50%,0 100%);
  }
  .ticker-viewport{ flex:1; min-width:0; overflow:hidden; position:relative; }
  .ticker-track{
    display:flex; gap:0; white-space:nowrap;
    animation:scroll-left 48s linear infinite;
    width:max-content;
  }
  .ticker-track:hover{ animation-play-state:paused; }
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .tick-item{
    display:flex; align-items:center; gap:9px;
    padding:9px 22px; font-size:12.5px; color:#E8E4D8;
    border-right:1px solid rgba(255,255,255,0.08);
  }
  .tick-item .pair{ font-family:var(--font-mono); color:#FFFFFF; font-weight:500;}
  .tick-flags{ display:flex; align-items:center; flex:0 0 auto; }
  .tick-flags .ccy-flag{
    width:16px; height:11px; flex:0 0 16px; border-radius:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.25);
  }
  .tick-flags .ccy-flag + .ccy-flag{ margin-left:-5px; }
  .tick-tag{
    display:inline-flex; align-items:center; gap:4px;
    font-family:var(--font-mono); font-weight:700; font-size:12px;
    padding:3px 9px; border-radius:20px; white-space:nowrap;
  }
  .tick-tag svg{ width:9px; height:9px; flex:0 0 9px; }
  .tick-tag-up{ background:rgba(143,203,160,0.16); color:#8FCBA0; }
  .tick-tag-down{ background:rgba(226,153,138,0.16); color:#E2998A; }

  /* ================= CONTENT ================= */
  /* flex:1 makes this stretch to fill any leftover height in .main's
     column (header + content + footer) -- without it, a short page's
     content collapsed to its own height and the footer sat right under
     it instead of staying pinned to the bottom of the viewport. */
  .content{ padding:30px 28px 0; max-width:1480px; width:100%; margin:0 auto; flex:1 0 auto; }

  .page-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-bottom:26px;
  }
  .eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:8px; }
  .page-title{ font-family:var(--font-display); font-size:32px; font-weight:500; letter-spacing:-.01em; color:var(--ink-900);}
  .page-sub{ color:var(--ink-700); font-size:13.5px; margin-top:6px; max-width:560px; }
  .as-of{ font-family:var(--font-mono); font-size:13px; color:var(--ink-500); text-align:right; }
  .as-of b{ color:var(--ink-700); display:block; font-size:13px; margin-top:2px; font-weight:500;}

  /* ---- SECTION HEADERS ---- */
  .sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:15px; gap:16px; flex-wrap:wrap;}
  .sec-title{ font-family:var(--font-display); font-size:18.5px; font-weight:600; display:flex; align-items:center; gap:9px; color:var(--ink-900);}
  .sec-title .bar{width:3px; height:15px; background:var(--brass); display:inline-block; border-radius:1px;}
  .sec-icon{ width:18px; height:18px; flex:0 0 18px; color:var(--brass-deep); }
  .sec-note{ font-size:13.5px; color:var(--ink-500); font-family:var(--font-mono); }

  /* Section titles that link out to the full page -- same look as a
     plain title until hovered, so it doesn't read as a button on sight. */
  .sec-title-link{ text-decoration:none; transition:color .15s; }
  .sec-title-link:hover{ color:var(--brass-deep); }
  .sec-title-link:hover .bar{ background:var(--brass-deep); }

  .rate-cell{ text-decoration:none; display:block; transition:background .15s; }
  .rate-cell:hover{ background:var(--paper-sunk); }

  /* ---- Small initials avatar, e.g. admin user tables ---- */
  .mini-avatar{
    width:30px; height:30px; border-radius:50%; flex:0 0 30px;
    background:linear-gradient(145deg, var(--brass), var(--clay));
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:12px; color:#FFF;
  }

  /* ================= EMERGENCY BROADCAST BANNER ================= */
  .emergency-banner{
    display:flex; align-items:center; gap:14px;
    background:#7A1E14;
    background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 20px);
    border-radius:6px;
    padding:13px 16px;
    margin-bottom:26px;
    box-shadow:0 4px 18px rgba(122,30,20,0.28);
    position:relative;
    overflow:hidden;
  }
  .emergency-banner.is-hidden{ display:none; }
  .em-icon{
    flex:0 0 34px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.14);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .em-icon svg{ width:18px; height:18px; color:#FFF; }
  .em-icon::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(255,255,255,0.5);
    animation:em-pulse 1.8s ease-out infinite;
  }
  @keyframes em-pulse{
    0%{ transform:scale(0.9); opacity:0.9; }
    80%{ transform:scale(1.6); opacity:0; }
    100%{ transform:scale(1.6); opacity:0; }
  }
  .em-body{ flex:1; min-width:0; }
  .em-label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:#FFD9CC; font-weight:700; display:flex; align-items:center; gap:8px;
  }
  .em-label .em-time{ color:rgba(255,255,255,0.55); font-weight:500; letter-spacing:.04em; text-transform:none; }
  .em-headline{ color:#FFFFFF; font-size:14.5px; font-weight:600; margin-top:3px; line-height:1.35; }
  .em-body{ transition:opacity .25s ease; }
  .em-body.is-fading{ opacity:0; }
  .em-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .em-btn{
    font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.03em;
    color:#FFFFFF; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3);
    padding:7px 13px; border-radius:5px; transition:background .15s;
    white-space:nowrap;
  }
  .em-btn:hover{ background:rgba(255,255,255,0.28); }
  .em-dismiss{
    width:30px; height:30px; flex:0 0 30px; border-radius:5px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; cursor:pointer;
    color:rgba(255,255,255,0.7); transition:background .15s, color .15s;
  }
  .em-dismiss:hover{ background:rgba(255,255,255,0.16); color:#FFF; }

  @media(max-width:700px){
    .emergency-banner{ flex-wrap:wrap; }
    .em-actions{ width:100%; justify-content:flex-end; margin-top:4px; }
  }

  /* ================= STRENGTH LADDER (signature element) ================= */
  .ladder-card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 26px 22px;
    margin-bottom:30px;
    box-shadow:var(--shadow-sm);
  }
  .ladder-tabs{ display:flex; gap:4px; background:var(--paper-sunk); padding:3px; border-radius:6px; }
  .ladder-tab{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; padding:6px 13px; border-radius:4px; color:var(--ink-700); transition:all .16s; border:none; background:transparent;}
  .ladder-tab.active{ background:var(--paper-raised); color:var(--ink-900); box-shadow:var(--shadow-sm); }

  .ladder-search-wrap{ position:relative; margin:14px 0 0; }
  .ladder-search-wrap svg{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--ink-500); pointer-events:none;
  }
  .ladder-search-input{
    width:100%; padding:9px 14px 9px 38px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--paper-raised); color:var(--ink-900); font-family:var(--font-ui); font-size:13px;
    transition:border-color .15s;
  }
  .ladder-search-input:focus{ outline:none; border-color:var(--brass); }
  .ladder-search-input::placeholder{ color:var(--ink-300); }

  .filter-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
  .filter-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); margin-right:4px;}
  .filter-chip{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
    padding:6px 12px; border-radius:20px; border:1px solid var(--line-strong);
    background:var(--paper-raised); color:var(--ink-700);
    transition:all .15s;
  }
  .filter-chip:hover{ border-color:var(--brass); color:var(--ink-900); }
  .filter-chip.active{ background:var(--chrome); color:#FFFFFF; border-color:var(--chrome); }

  /* ---- Asset-class dropdown (Strength Ladder) -- same rounded-panel
     language as .eco-cal-dp-panel (economic-calendar.css), just a plain
     option list instead of a calendar grid. Sits at the end of
     .filter-row via margin-left:auto rather than its own row. ---- */
  .ladder-class-dd{ position:relative; margin-left:auto; }
  .ladder-class-dd-trigger{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; font-weight:600;
    padding:6px 12px; border-radius:20px; border:1px solid var(--line-strong);
    background:var(--paper-raised); color:var(--ink-700); cursor:pointer;
    transition:border-color .15s, color .15s;
  }
  .ladder-class-dd-trigger:hover{ border-color:var(--brass); color:var(--ink-900); }
  .ladder-class-dd-chevron{ transition:transform .18s ease; }
  .ladder-class-dd.is-open .ladder-class-dd-chevron{ transform:rotate(180deg); }

  .ladder-class-dd-panel{
    position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:180px;
    background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:10px;
    box-shadow:0 10px 28px rgba(43,44,38,.14); padding:6px;
    opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .ladder-class-dd.is-open .ladder-class-dd-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

  .ladder-class-dd-opt{
    display:block; width:100%; text-align:left;
    font-family:var(--font-mono); font-size:12.5px; padding:8px 10px; border-radius:6px;
    border:none; background:transparent; color:var(--ink-700); cursor:pointer;
    transition:background .13s ease, color .13s ease;
  }
  .ladder-class-dd-opt:hover{ background:var(--brass-wash); color:var(--brass-deep); }
  .ladder-class-dd-opt.active{ background:var(--chrome); color:#FFFFFF; font-weight:600; }

  /* ---- Pagination (resources/views/vendor/pagination/custom.blade.php) ---- */
  .pg-nav{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .pg-nav-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
  .pg-disabled{ opacity:.4; cursor:default; pointer-events:none; }
  .pg-numbers{ display:flex; align-items:center; gap:3px; }
  .pg-page-num{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; padding:0 8px; border-radius:8px;
    font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--ink-700);
    border:1px solid transparent; transition:all .15s;
  }
  a.pg-page-num:hover{ background:var(--paper-sunk); border-color:var(--line-strong); color:var(--ink-900); }
  .pg-page-current{ background:var(--chrome); color:#FFFFFF; }
  .pg-ellipsis{ color:var(--ink-300); font-family:var(--font-mono); font-size:12.5px; padding:0 4px; }
  .pg-summary{ font-family:var(--font-mono); font-size:12px; color:var(--ink-500); }

  /* ---- Numbered pagination variant (vendor/pagination/numbered.blade.php)
     "Prev 1 2 … last Next" -- opted into per-page via ->links('vendor.
     pagination.numbered') rather than replacing the summary-style default
     above everywhere. .pg-num/.pg-dots reuse .filter-chip's own sizing. */
  .pg-numbers{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .pg-num{ min-width:34px; text-align:center; justify-content:center; }
  .pg-dots{
    font-family:var(--font-mono); font-size:12px; color:var(--ink-500);
    padding:0 2px; user-select:none;
  }

  .ladder-rows{ display:flex; flex-direction:column; margin-top:14px; }
  .ladder-row{
    display:grid;
    grid-template-columns: 30px 1fr 96px 168px;
    align-items:center;
    gap:16px;
    padding:11px 4px;
    border-bottom:1px solid var(--line);
    transition:opacity .2s, transform .2s;
  }
  .ladder-row:last-child{ border-bottom:none; }
  .ladder-row-link{ text-decoration:none; color:inherit; cursor:pointer; }
  .ladder-row-link:hover{ background:var(--paper-sunk); }
  .rank-num{ font-family:var(--font-mono); font-size:13px; color:var(--brass-deep); text-align:right; font-weight:700; }
  .ccy-tag{ display:flex; align-items:center; gap:10px; }
  .ccy-flag{ width:24px; height:17px; border-radius:3px; flex:0 0 24px; overflow:hidden; display:inline-flex; box-shadow:0 0 0 1px var(--line); }
  .ccy-flag svg{ width:100%; height:100%; display:block; }
  .ccy-code{ font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.01em; color:var(--ink-900);}
  .ccy-name{ font-size:12px; color:var(--ink-500); margin-left:2px; }
  .score-val{ font-family:var(--font-mono); font-size:15px; text-align:right; color:var(--ink-900); font-weight:600;}
  .score-val span{ font-size:12px; color:var(--ink-500); font-weight:400; }

  .bias-chip{
    justify-self:end;
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.03em;
    padding:5px 11px; border-radius:20px; white-space:nowrap;
  }
  /* A trending-up/minus/trending-down icon (masked with currentColor)
     instead of a plain dot -- mask-image rather than a background-image
     so the icon auto-matches whichever tier color is set below with no
     per-tier color rule of its own needed. Same trio tradersentiments.com
     itself uses for its own Bullish/Neutral/Bearish badges. */
  .bias-dot{
    display:inline-block; width:12px; height:12px; flex:0 0 12px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  .bias-very-bullish .bias-dot, .bias-bullish .bias-dot{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
  }
  .bias-neutral .bias-dot{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  }
  .bias-bearish .bias-dot, .bias-very-bearish .bias-dot{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 17h6v-6'/%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 17h6v-6'/%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3C/svg%3E");
  }
  .bias-very-bullish{ background:var(--sage-wash); color:var(--sage-deep); }
  .bias-bullish{ background:var(--sage-wash); color:var(--sage); }
  .bias-neutral{ background:var(--paper-sunk); color:var(--ink-700); }
  .bias-bearish{ background:var(--clay-wash); color:var(--clay); }
  .bias-very-bearish{ background:var(--clay-wash); color:var(--clay-deep); }

  .ladder-foot{ display:flex; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--ink-500); }
  .group-label-mini{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); padding-left:4px; margin-top:6px;}
  .row-hidden{ display:none !important; }

  @media(max-width:700px){
    /* .ladder-row's actual grid-template-columns lives in the second
       @media(max-width:700px) block further down (search "sidebar
       becomes an overlay drawer") -- this file has two separate blocks
       at the same breakpoint, and a rule declared later in the cascade
       always wins a same-specificity tie regardless of which block
       looks more "current". Not redeclared here to avoid the two
       silently drifting out of sync again. */
    .ccy-tag{ min-width:0; }
    .ccy-code{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* "Major pair" / "Cross pair" / "Index" -- wraps to 2 lines in the
       cramped column at phone widths and collides with score-val next
       to it, since .ccy-tag is a flex row with no wrap guard. Rank +
       flag + code + score is the whole signal anyway; drop the label. */
    .ccy-name{ display:none; }
    .carry-row{ grid-template-columns: 108px 1fr; }
    .carry-note{ display:none; }
    /* Bullish/Bearish and Favorable/Unfavorable are the actual read on
       these rows, not decoration -- rather than hiding .bias-chip (a
       shared badge also used on ~20 other pages, e.g. economic heatmap's
       VIX reading, so a bare ".bias-chip{display:none}" here was wiping
       it out everywhere, not just these two rows), it drops to its own
       full-width line under the row instead of fighting the score/rate
       column for space. */
    .ladder-row .bias-chip, .carry-row .bias-chip{
      grid-column: 1 / -1; justify-self:start; margin:6px 0 0 40px;
    }
  }

  /* ================= GRID OF PANELS ================= */
  .grid-2{ display:grid; grid-template-columns: 1.25fr 1fr; gap:20px; margin-bottom:30px; }
  .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:30px; }
  @media(max-width:1100px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

  .panel{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 22px; box-shadow:var(--shadow-sm);
  }

  /* COT panel */
  .cot-row{ display:grid; grid-template-columns: 78px 1fr 58px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
  .cot-row:last-child{ border-bottom:none; }
  .cot-bipolar{ height:10px; background:var(--paper-sunk); border-radius:5px; position:relative; }
  .cot-bipolar .mid{ position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line-strong); }
  .cot-bipolar .fill{ position:absolute; top:0; bottom:0; border-radius:5px; }
  .cot-net{ font-family:var(--font-mono); text-align:right; font-size:13.5px; }

  /* Sentiment gauges */
  .sent-row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);}
  .sent-row:last-child{border-bottom:none;}
  .sent-pair{ font-family:var(--font-mono); font-weight:600; font-size:12.5px; width:60px; flex:0 0 60px; color:var(--ink-900);}
  /* Fades to transparent (not --sage-wash/--clay-wash) toward the middle,
     over a neutral --line-strong track -- those wash tokens are a pale
     pastel in light mode (blends smoothly) but a dark-tinted fill in
     dark mode (they're also reused for badge/chip backgrounds there),
     which turned the middle of this bar into a near-black seam once
     dark mode existed. Transparent fading onto a theme-adapting neutral
     track looks right either way. */
  .sent-gauge{
    flex:1; height:8px; border-radius:4px; position:relative;
    background-color:var(--line-strong);
    background-image:linear-gradient(90deg, var(--sage) 0%, transparent 42%, transparent 58%, var(--clay) 100%);
  }
  .sent-mark{ position:absolute; top:-5px; width:3px; height:18px; background:var(--chrome); border-radius:1.5px; box-shadow:0 0 0 2px var(--paper-raised); }
  .sent-pct{ font-family:var(--font-mono); font-size:13px; color:var(--ink-900); width:72px; text-align:right; font-weight:600; }

  /* ---- Risk Appetite badge (topbar, next to the session clock) ----
     Same shape language as the session-clock chips beside it (rounded
     pill, .seg-style padding), single row. The score reads as a battery
     charge level -- 0% empty, 100% full -- filled and colored by bias
     tier, a more immediately legible metaphor than a plain gradient bar.
     A solid --paper-sunk + border base (not a bias-colored wash) keeps
     it visible in dark mode, where the old wash-tinted pill had almost
     no contrast against --chrome. */
  .risk-badge{
    display:flex; align-items:center; gap:7px; min-width:132px;
    padding:6px 12px; border-radius:8px;
    background:var(--paper-sunk); border:1px solid var(--line);
    margin-right:6px; cursor:pointer; text-decoration:none;
    transition:border-color .15s, background .15s;
  }
  .risk-badge:hover{ border-color:var(--line-strong); background:var(--line); }

  .risk-live-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%; flex:0 0 6px;
    background:var(--brass-deep); animation:risk-blink 1.6s ease-in-out infinite;
  }
  @keyframes risk-blink{
    0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(198,138,30,.5); }
    50%      { opacity:.35; box-shadow:0 0 0 5px rgba(198,138,30,0); }
  }

  .risk-badge-label{
    font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-700); white-space:nowrap;
  }
  .risk-badge-score{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink-900); margin-left:auto; }
  .risk-badge.bias-very-bullish .risk-badge-label, .risk-badge.bias-bullish .risk-badge-label,
  .risk-badge.bias-very-bullish .risk-badge-score, .risk-badge.bias-bullish .risk-badge-score{ color:var(--sage-deep); }
  .risk-badge.bias-very-bearish .risk-badge-label, .risk-badge.bias-bearish .risk-badge-label,
  .risk-badge.bias-very-bearish .risk-badge-score, .risk-badge.bias-bearish .risk-badge-score{ color:var(--clay-deep); }

  /* Speedometer arc: a clay-to-sage gradient track with a needle at the
     score's position -- same dial language as CNN's own Fear & Greed
     gauge (fitting, since this score partly blends that index). Needle
     angle is computed server-side (see the blade partial) since there's
     no trig in Blade; only the two coordinates change per render. */
  .risk-gauge{ flex:0 0 auto; overflow:visible; }
  .risk-gauge-needle{ stroke:var(--ink-900); stroke-width:2; stroke-linecap:round; transition:x2 .3s var(--ease), y2 .3s var(--ease); }
  .risk-gauge-pivot{ fill:var(--ink-900); }

  @media(max-width:1100px){
    .risk-badge{ display:none; }
  }

  /* News list with thumbnails */
  .news-item{ display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
  .news-item:last-child{ border-bottom:none; }
  .news-thumb{
    width:56px; height:56px; border-radius:4px; flex:0 0 56px;
    background-size:cover; background-position:center;
    border:1px solid var(--line); position:relative; overflow:hidden;
  }
  .news-thumb::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
  .news-body{ min-width:0; }
  .news-time{ font-family:var(--font-mono); font-size:12px; color:var(--brass-deep); font-weight:600; }
  .news-tag{ display:inline-block; font-family:var(--font-mono); font-size:10.5px; padding:3px 7px; border-radius:2px; margin:3px 0 5px; letter-spacing:.04em; font-weight:600;}
  .tag-high{ background:var(--clay-wash); color:var(--clay-deep);}
  .tag-med{ background:var(--brass-wash); color:var(--brass-deep);}
  .tag-flow{ background:var(--azure-wash); color:var(--azure);}
  .news-headline{ font-size:13px; line-height:1.38; color:var(--ink-900); font-weight:500;}
  .news-src{ font-size:12.5px; color:var(--ink-700); margin-top:5px; display:flex; align-items:center; gap:6px; font-weight:500; }
  .src-badge{
    width:18px; height:18px; border-radius:50%; flex:0 0 18px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:9px; font-weight:700; color:#fff;
    letter-spacing:0;
  }

  /* Econ calendar */
  .cal-table{ width:100%; border-collapse:collapse; font-size:12.5px;}
  .cal-table th{ text-align:left; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:#FFFFFF; padding:9px 8px; background:var(--chrome); font-weight:700;}
  .cal-table th:first-child{ border-radius:6px 0 0 6px; }
  .cal-table th:last-child{ border-radius:0 6px 6px 0; }
  .cal-table td{ padding:11px 8px; vertical-align:middle; color:var(--ink-900); font-weight:500; border-bottom:1px solid var(--line); }
  .cal-table tbody tr:last-child td{ border-bottom:none; }
  .cal-num{ font-family:var(--font-mono); text-align:right; font-weight:700; }
  .cal-num.beat{ color:var(--sage-deep); } .cal-num.miss{ color:var(--clay-deep); }
  .impact-dots{ display:inline-flex; gap:3px; }
  .impact-dots span{ width:7px; height:7px; border-radius:50%; background:var(--line-strong);}
  .impact-dots span.on{ background:var(--brass); }
  .cal-time{ font-family:var(--font-mono); color:var(--brass-deep); font-weight:600; }
  .cal-ccy{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.02em; padding:3px 8px; border-radius:4px; display:inline-block; }
  .cal-ccy-wrap{ display:inline-flex; align-items:center; gap:7px; }
  .cal-num{ font-family:var(--font-mono); text-align:right; }
  .cal-num.beat{ color:var(--sage); } .cal-num.miss{ color:var(--clay); }

  /* Carry trade */
  .carry-row{ display:grid; grid-template-columns: 118px 1fr auto 152px; align-items:center; gap:16px; padding:11px 4px; border-bottom:1px solid var(--line); }
  .carry-row:last-child{ border-bottom:none; }
  .carry-pair{ font-family:var(--font-mono); font-weight:700; font-size:14.5px; color:var(--ink-900);}
  .carry-note{ font-size:12.5px; color:var(--ink-700); }
  .carry-val{ font-family:var(--font-mono); font-size:14px; color:var(--ink-700); text-align:right; white-space:nowrap;}

  /* Interest rate strip */
  .rate-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .rate-cell{ background:var(--paper-raised); padding:16px 12px 15px; text-align:center; border-top:3px solid var(--brass); }
  .rate-cell .ccy{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-900); letter-spacing:.06em; font-weight:700; }
  .rate-cell .val{ font-family:var(--font-display); font-size:23px; margin-top:6px; color:var(--ink-900); font-weight:600;}
  .rate-cell .chg{ font-family:var(--font-mono); font-size:12px; margin-top:5px; font-weight:600; }
  .chg-up{ color:var(--sage-deep); } .chg-flat{ color:var(--brass-deep); } .chg-down{ color:var(--clay-deep); }

  /* ================= FOOTER (full desk footer) ================= */
  footer.site-footer{
    margin-top:44px;
    background:var(--chrome);
    position:relative;
  }
  footer.site-footer::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:4px;
    background:linear-gradient(90deg, var(--brass), var(--clay), var(--azure), var(--sage));
  }
  .footer-grid{
    max-width:1480px; margin:0 auto; padding:44px 28px 26px;
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px;
  }
  @media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  .footer-brand .mark{ font-family:var(--font-display); font-size:22px; font-style:italic; font-weight:700; color:var(--brass-bright); }
  .footer-brand p{ color:#E8E4D8; font-size:12.5px; line-height:1.65; margin-top:10px; max-width:280px;}
  .footer-social{ margin-top:16px; }
  .footer-social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.06);
    transition:background-color .15s;
  }
  .footer-social-link:hover{ background:rgba(88,101,242,0.18); }
  .footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-bright); margin-bottom:13px; font-weight:700;}
  .footer-col a{ display:block; font-size:13px; color:#DEDCCB; padding:5px 0; transition:color .15s;}
  .footer-col a:hover{ color:var(--brass-bright); }
  .footer-row{
    max-width:1480px; margin:0 auto; padding:16px 28px 22px;
    border-top:1px solid rgba(255,255,255,0.1);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-family:var(--font-mono); font-size:13px; color:#E8E4D8;
  }
  .footer-row .right{ display:flex; gap:18px; align-items:center; }
  .footer-row a{ color:#DEDCCB; transition:color .15s; }
  .footer-row a:hover{ color:var(--brass-bright); }
  .footer-row .dot-sep{ color:rgba(255,255,255,0.2); }
  .disclaimer-strip{
    background:#1F211B; padding:10px 28px; text-align:center;
    font-family:var(--font-mono); font-size:12px; color:#C2BDAC; letter-spacing:.01em;
  }

  /* ---- focus visibility ---- */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

  /* ---- scrollbar ---- */
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:var(--paper); }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }

  @media(max-width:700px){
    .topbar-row{
      padding:11px 16px; gap:10px;
      /* Safety net: whatever doesn't fit (brand, search, alerts, user
         chip) stays reachable via a horizontal swipe/scroll instead of
         silently vanishing -- body has overflow-x:hidden site-wide by
         design, so anything that overflows *this row* specifically,
         with nowhere else to go, would otherwise be permanently
         unreachable, not just visually cramped. flex-shrink:0 on the
         children keeps icons/avatar at their real size (never squished)
         and lets the row scroll instead. */
      overflow-x:auto; scrollbar-width:none;
    }
    .topbar-row::-webkit-scrollbar{ display:none; }
    .topbar-row > *{ flex-shrink:0; }
    .topbar-spacer{ flex:1 0 16px; }
    .content{ padding:20px 16px 0; }
    .session-clock{ display:none; }
    .brandline .word{ font-size:19px; }
    .page-title{ font-size:24px; }
    /* ccy-tag needs to be the flexible track (flag+code, since .ccy-name
       is hidden at this width) -- a fixed 78px here was too narrow for
       flag+code and forced them to wrap into score-val's column. */
    .ladder-row{ grid-template-columns: 24px 1fr 70px 0px; }

    /* ---- Sidebar becomes an overlay drawer instead of a grid column
       that pushes the content ----
       Desktop widens the grid's first track to fit the sidebar, which
       squeezes .main into whatever's left. On a phone-width screen
       there's no "whatever's left" to give -- the content column was
       being squeezed down to nothing, which is what caused text to
       clip/overlap site-wide whenever the drawer was open. Below this
       breakpoint the grid stays a single 1fr track always; the sidebar
       is pulled out of grid flow via position:fixed and slides in over
       the content instead, so opening it never resizes anything. */
    .shell, .shell.panel-open{ grid-template-columns: 1fr; }

    .sidebar{
      position:fixed; top:0; left:0; z-index:110;
      width:220px; height:100vh;
      transform:translateX(-100%);
      transition:transform .3s var(--ease);
      box-shadow:none;
    }
    .shell.panel-open .sidebar{
      transform:translateX(0);
      box-shadow:10px 0 30px rgba(43,44,38,0.3);
    }
    .sidebar-inner{ width:220px; }

    /* Backdrop -- dims the page behind the open drawer. JS already
       closes the drawer on any click outside it (see app.js), so this
       needs no click handler of its own, just the dimmed look. */
    .shell.panel-open::before{
      content:''; position:fixed; inset:0; z-index:100;
      background:rgba(43,44,38,0.55);
    }

    /* Notification dropdown -- position:fixed escapes .topbar-row's
       overflow-x:auto (which clips absolute-positioned descendants
       vertically too, since setting overflow-x forces overflow-y to
       compute as clipping rather than visible). top is set inline by
       app.js from the bell button's real position each time it opens,
       since fixed positioning can't use the button-relative
       top:calc(100% + 10px) that works for desktop's absolute version.
       left/right stay fixed 12px insets rather than being anchored to
       the bell's edge -- the bell sits near the screen's right edge, so
       a right-anchored box wide enough to be usable (up to 360px) had
       nowhere to go but off the left edge on anything wider than a
       narrow phone (e.g. a ~500px window: 360px box, ~320px of room
       to its left -- guaranteed overflow). Centering it with equal
       insets keeps it fully on-screen at every width in this range. */
    .notif-dropdown{
      position:fixed; left:12px; right:12px; width:auto; max-width:360px;
      margin:0 auto; z-index:120;
    }
  }

  /* Below ~480px, also drop the user name/plan text (the avatar alone
     still links to Settings) so the common case needs no scrolling at
     all -- the row above still covers it if something still doesn't fit. */
  @media(max-width:480px){
    .topbar-row{ padding:10px 8px; gap:4px; }
    .user-chip{ padding:2px; gap:0; border-width:0; }
    .user-chip .who{ display:none; }
    .brandline .word{ font-size:15px; }
    .icon-btn{ width:30px; height:30px; }
  }

/* ================= UNIVERSAL MOBILE TABLE SCROLL =================
   Every data table on the site (economic heatmap, interest rates, COT
   data, the calendar widgets, etc.) is a plain <table> with several
   fixed-ish columns -- on a phone-width screen those columns add up to
   well beyond the viewport. Rather than hunting down and wrapping every
   individual <table> in every page's own blade file, this makes ANY
   table on the site become its own horizontally-scrollable block below
   860px: display:block lets a table element scroll on its own axis,
   -webkit-overflow-scrolling gives it momentum scrolling on iOS. Tables
   that already have a bespoke wrapper (.rt-table-wrap, .cal-table-wrap,
   etc.) just get a harmless second scroll container -- not a conflict. */
@media(max-width:860px){
  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  table thead, table tbody{ display:table; width:100%; }
}

/* ---- Flex headers that pair a title/id with a big number (currency
   strength cards, pair-score header) wrap to two lines instead of
   clipping the number off the right edge once both sides can't fit on
   one line. ---- */
@media(max-width:480px){
  .cs-card-top{ flex-wrap:wrap; gap:8px; }
  .ps-header{ flex-direction:column; align-items:flex-start; }
}

/* ================= GLOBAL CONFIRM MODAL =================
   Replaces the browser's native confirm() everywhere on the site. One
   instance is included once per page (partials.confirm-modal, via
   layouts.app) and reused for every data-confirm form -- see the
   submit-interceptor in js/app.js. Lives in app.css (not a page-scoped
   stylesheet) precisely because it must be available on every page that
   uses layouts.app, not just one. */
.confirm-overlay{
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(43,44,38,0.6); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.confirm-overlay.is-open{ display:flex; }
.confirm-modal{
  background:var(--paper-raised); border-radius:14px; border:2px solid var(--clay);
  box-shadow:0 20px 60px rgba(43,44,38,0.35);
  max-width:440px; width:100%; padding:30px 28px 26px;
}
.confirm-modal.tone-primary{ border-color:var(--brass); }
.confirm-title{
  font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--clay-deep);
  margin:0 0 12px;
}
.confirm-modal.tone-primary .confirm-title{ color:var(--ink-900); }
.confirm-message{ font-size:13.5px; color:var(--ink-700); line-height:1.6; margin:0 0 22px; }
.confirm-actions{ display:flex; gap:10px; }
.confirm-btn-confirm{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1;
  font-family:var(--font-mono); font-weight:700; font-size:12.5px;
  padding:12px 20px; border-radius:7px; background:var(--clay-deep); color:#FFFFFF;
  border:none; cursor:pointer; transition:background .15s;
}
.confirm-btn-confirm:hover{ background:#8f2f1e; }
.confirm-modal.tone-primary .confirm-btn-confirm{ background:var(--brass); }
.confirm-modal.tone-primary .confirm-btn-confirm:hover{ background:var(--brass-deep, var(--brass)); }
.confirm-btn-cancel{
  flex:1; font-family:var(--font-mono); font-weight:700; font-size:12.5px;
  padding:12px 20px; border-radius:7px; background:var(--paper); color:var(--ink-700);
  border:1px solid var(--line-strong); cursor:pointer; transition:background .15s;
}
.confirm-btn-cancel:hover{ background:var(--paper-raised); }