@import url("signal.css");

/* K2TP theme — a quieter, more editorial navy.
 *
 * Deep navy ground, hairline borders instead of filled boxes, serif headings, a section-link bar
 * across the top (a menu button, side menu and bottom tab bar on a phone). Up/down
 * colours live in signal.css (--k-up / --k-down); amber caution is unchanged.
 *
 * Loaded after typography.css on every page except admin. Pages that hard-coded neutral colours
 * now read these --k-* tokens, so the whole palette lives here.
 */

:root,
body:not(.admin-page) {
  /* =========================================
     BASE
     ========================================= */

  --bg-main: #000b13;

  /* =========================================
     TEXT TOKENS
     ========================================= */

  --k-t1: #fafcfd;  /* Primary */
  --k-t2: #cbd3d8;  /* Secondary */
  --k-t3: #7f8b92;  /* Muted / Metadata */
  --k-t4: #7f8b92;  /* Subtle / Field labels */
  --k-t5: #505c63;  /* Faint / Placeholders */

  /* Up/down and the GEX ramp live in signal.css (--k-up, --k-down, --heat-*). */

  --k-warn: #FBBF24;  /* Caution / Extended Hours */

  /* =========================================
     LINK / ACCENT
     ========================================= */

  --k-link: #346ce8;  /* Link / Navigation */
  --blue:   #346ce8;
  --accent: #346ce8;  /* Brand / Highlight / Kicker */

  /* Solid button fills. Hover is #346ce8 mixed 18% toward white. */
  --btn-fill: #346ce8;
  --btn-fill-hover: color-mix(in srgb, #346ce8 82%, #ffffff);

  /* =========================================
     SURFACES
     ========================================= */

  --surface-1:        #061722; /* Main cards */
  --surface-2:        #091c27; /* Inner sections */
  --surface-3:        #0d2430; /* Headers / controls */

  --k-bg:             var(--bg-main);
  --k-header:         var(--surface-3);
  --k-toolbar:        var(--surface-2);
  --k-surface:        var(--surface-1);
  --k-surface-2:      var(--surface-2);
  --k-surface-3:      var(--surface-3);

  /* =========================================
     BORDERS & DIVIDERS
     ========================================= */

  --border:           #163746;
  --border-subtle:    #0f2a36;
  --k-border:         var(--border);
  --k-border-soft:    var(--border-subtle);
  --k-border-focus:   var(--border);
  --divider:          #12313e;
  --divider-strong:   var(--border);

  /* =========================================
     INTERACTION STATES
     ========================================= */

  --surface-hover:    #0b222e;
  --surface-active:   #103040;
  --surface-selected: #12394a;
  --surface-focus:    var(--surface-active);

  /* =========================================
     SEMANTIC BACKGROUNDS & BORDERS
     ========================================= */

  --warn-bg:   rgba(251, 191, 36, 0.12);
  --link-bg:   rgba(52, 108, 232, 0.10);
  --accent-bg: rgba(52, 108, 232, 0.10);

  --warn-border:   rgba(251, 191, 36, 0.35);
  --link-border:   rgba(52, 108, 232, 0.35);
  --accent-border: rgba(52, 108, 232, 0.35);

  /* =========================================
     SHADOWS
     ========================================= */

  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.36);

  /* Shared frost. Login-card navy at 50% so the page shows through a 22px
     saturate blur. Solid stops are the opaque equivalents
     (rgba(12,20,40) / rgba(5,9,22) with no alpha) for browsers that cannot
     blur. The hairline is neutral — not the teal --k-line.
     Used by the phone tab bar, the sticky header and ticker, card header
     strips, layer-2 / layer-3 surfaces, and the dashboard pulse cards.
     Pop-ups use --glass-fill-solid (same stops, no alpha) so type stays
     on an opaque field. */
  --glass-bg-top: rgba(12, 20, 40, 0.5);
  --glass-bg-bottom: rgba(5, 9, 22, 0.5);
  --glass-bg-top-solid: #0c1428;
  --glass-bg-bottom-solid: #050916;
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-fill: linear-gradient(180deg, var(--glass-bg-top), var(--glass-bg-bottom));
  --glass-fill-solid: linear-gradient(180deg, var(--glass-bg-top-solid), var(--glass-bg-bottom-solid));
  --glass-fill-use: var(--glass-fill);
  --glass-blur: blur(22px) saturate(140%);
  /* Solids behind the public-page retarget. Hover, active, selected, and
     --k-raise keep these so interaction states stay opaque. */
  --surface-2-solid: #091c27;
  --surface-3-solid: #0d2430;

  /* PR #137 names. Aliases of the shared frost so the tab bar and anything
     that still reads --nav-* stays on the same stops. */
  --nav-bg-top: var(--glass-bg-top);
  --nav-bg-bottom: var(--glass-bg-bottom);
  --nav-bg-top-solid: var(--glass-bg-top-solid);
  --nav-bg-bottom-solid: var(--glass-bg-bottom-solid);
  --nav-border: var(--glass-border);

  /* =========================================
     ALIASES & COMPATIBILITY
     ========================================= */

  --k-page:     var(--k-bg);
  --k-card:     var(--k-surface);
  --k-raise:    var(--k-surface-3);
  --k-active:   var(--surface-active);
  --k-hover:    var(--surface-hover);
  --k-deep:     var(--k-bg);
  --k-track:    var(--k-toolbar);
  --k-line:     var(--k-border);
  --k-line-2:   var(--k-border);
  --k-line-soft:var(--k-border-soft);

  --bg:         var(--k-bg);
  --header:     var(--k-header);
  --toolbar:    var(--k-toolbar);
  --surface:    var(--k-surface);
  --border:     var(--k-border);

  --ink:        var(--k-bg);
  --panel:      var(--k-surface);
  --panel-2:    var(--k-surface-2);
  --line:       var(--k-border);
  --text:       var(--k-t1);
  --text-2:     var(--k-t2);
  --text-3:     var(--k-t3);
  --text-4:     var(--k-t4);
  --text-dim:   var(--k-t3);
  --gold:       var(--k-warn);
  --warning:    var(--k-warn);

  --radius:     8px;
  --radius-sm:  6px;
}

/* Public pages: layer 2 (inner sections) and layer 3 (headers / controls)
   paint the shared frost. :root above keeps the solid hex so admin, which
   does not match this rule, stays on #091c27 / #0d2430. --k-raise stays the
   opaque layer-3 solid because hover, active, and selected states use it. */
body:not(.admin-page) {
  --surface-2: var(--glass-fill-use);
  --surface-3: var(--glass-fill-use);
  --k-raise: var(--surface-3-solid);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass-fill-use: var(--glass-fill-solid); }
}

html { background: var(--bg-main, #000b13); }
body:not(.admin-page) { background: var(--bg-main, #000b13); color: var(--k-t1); }

/* ---- surfaces: solid & hairline borders --------------------------------------------- */
body:not(.admin-page) :is(.card, .panel, .gex-panel, .gex-card, .gex-toolbar, .kpi, .tw, .rep, .feat, .coffee) {
  background: var(--k-card);
  border: 1px solid var(--k-line);
  border-radius: 8px;
}
body:not(.admin-page) table thead th { border-bottom: 1px solid var(--k-line); }
body:not(.admin-page) tbody tr { border-color: var(--k-line-soft); }
body:not(.admin-page) tbody tr:hover { background: var(--k-hover); }
body:not(.admin-page) a { text-underline-offset: 2px; }
body:not(.admin-page) hr { border-color: var(--k-line); }

/* ---- form controls ------------------------------------------------------------------ */
body:not(.admin-page) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--k-card);
  border: 1px solid var(--k-line-2);
  border-radius: 6px;
  color: var(--k-t1);
}
body:not(.admin-page) :is(input, select, textarea):focus { border-color: var(--k-t3) !important; }
body:not(.admin-page) ::placeholder { color: var(--k-t5); opacity: 1; }

/* ---- the top bar -------------------------------------------------------------------- */
.k-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 46px;
  padding: 6px 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.k-brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.k-brand picture { display: inline-flex; align-items: center; height: 100%; }
.k-brand img { display: block; height: 36px; width: auto; }
.k-links { display: flex; align-items: stretch; gap: 36px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.k-links::-webkit-scrollbar { display: none; }
.k-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-nav, 12px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--k-t1, #ffffff);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -7px;
  padding-bottom: 5px;
  padding-top: 5px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.k-links a:hover { color: var(--accent, #346ce8); }
.k-links a.on { color: var(--accent, #346ce8); font-weight: 600; border-bottom-color: var(--accent, #346ce8); }
.k-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.k-user { display: inline-flex; align-items: center; gap: 8px; color: var(--k-t2); text-decoration: none; font-size: var(--fs-sm, 11px); }
.k-user:hover { color: var(--k-t1); }
.k-avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--k-raise); border: 1px solid var(--k-line-2); color: var(--k-t1);
  font-size: var(--fs-xs); font-weight: 600;
}
.k-avatar.lg { width: 40px; height: 40px; font-size: var(--fs-lg); }
.k-signin {
  font-size: var(--fs-sm); font-weight: 600; color: var(--k-t1); text-decoration: none;
  border: 1px solid var(--k-line-2); border-radius: 6px; padding: 6px 12px;
}
.k-signin:hover { background: var(--k-raise); }

/* Header shells the existing pages already have: the bar replaces their old brand + Home row. */
header.site-head:not(.is-admin) .header-row-top { padding: 0; gap: 0; }
header.site-head:not(.is-admin) { gap: 6px; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--k-line); }

.k-tabbar { display: none; }
.k-count { display: inline-block; margin-left: 4px; min-width: 16px; padding: 0 5px; border-radius: 999px; background: #d64550; color: #fff; font-size: var(--fs-2xs); text-align: center; }

/* The account chip and its small menu. */
.k-right { position: relative; }
button.k-user { background: none; border: 0; padding: 2px; cursor: pointer; font-family: inherit; }
.k-pop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; z-index: 300;
  background: var(--k-card); border: 1px solid var(--k-line-2); border-radius: 8px; padding: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.k-pop[hidden] { display: none; }
.k-pop a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
  color: var(--k-t2); text-decoration: none; font-size: var(--fs-sm, 11px); font-weight: 500;
}
.k-pop a:hover { background: var(--k-raise); color: var(--k-t1); }
.k-pop a svg { width: 16px; height: 16px; flex: none; }
.k-phone-only { display: none; }
@media (max-width: 640px) { .k-phone-only { display: flex; } }

/* Dashboard header: one row — logo and links, then status, bell and support, then the account chip.
   The old Menu dropdown and the name line are replaced by the chip's own menu. */
.header-nav .menu-wrap { display: none; }
.account-bar .acct-name, .account-bar > a.acct-user:not(.acct-admin-link) { display: none; }
.header-row-top:has(#kAccount) { align-items: center; gap: 10px; }
.header-row-top:has(#kAccount) .header-nav { flex-direction: row; align-items: center; gap: 8px; flex: none; }
.header-row-top:has(#kAccount) .header-nav-main { flex-direction: row; align-items: center; gap: 8px; }

/* Supplied artwork icons (solid shapes) drawn through a mask so they follow the text colour. */
.k-ico {
  display: block; width: 28px; height: 28px; background: currentColor;
  -webkit-mask: var(--k-ico-src) center / contain no-repeat; mask: var(--k-ico-src) center / contain no-repeat;
}
/* Every icon box is the same height so the labels line up; the wide ones get a wider box. */
.k-tabbar .k-ico { width: 25px; height: 25px; }
.k-tabbar .k-ico-explore { width: 32px; height: 25px; }
.k-tabbar .k-ico-library { width: 29px; height: 25px; }
.k-ico-dash { --k-ico-src: url("/static/header/dashboard.svg?v=18"); }
.k-ico-struct { --k-ico-src: url("/static/header/structure.svg?v=8"); }
.k-ico-gex { --k-ico-src: url("/static/header/gex.svg?v=18"); }
.k-ico-explore { --k-ico-src: url("/static/header/explorer.svg?v=18"); }
.k-ico-library { --k-ico-src: url("/static/header/library.svg?v=18"); }
.k-ico-profile { --k-ico-src: url("/static/header/profile.svg?v=18"); }
.k-ico-more { --k-ico-src: url("/static/header/more.svg?v=8"); }
.k-ico-announcement { --k-ico-src: url("/static/header/announcement.svg?v=8"); }
.k-ico-brief-pre   { --k-ico-src: url("/static/brief/premarket.svg?v=2"); }
.k-ico-brief-mid   { --k-ico-src: url("/static/brief/midday.svg?v=2"); }
.k-ico-brief-close { --k-ico-src: url("/static/brief/preclose.svg?v=2"); }
.k-ico-brief-recap { --k-ico-src: url("/static/brief/recap.svg?v=2"); }
.d2-tab-btn .d2-tab-ico.k-ico { display: inline-block; width: 18px; height: 18px; flex: none; margin-right: 6px; }
.k-pop a .k-ico { width: 16px; height: 16px; flex: none; }

/* ---- shared header: notification bell + optional live-status dots --------
   One copy for every page (templates/_header.html), replacing what used to
   be near-duplicate rules in base.html's and dashboard.html's own inline
   <style> blocks. Sized to base.html's dimensions (38px button / 24px icon)
   since that was already the shape on the majority of pages; dashboard.html
   drops its own smaller 28px variant in favor of this one. */
.notif-btn {
  background: rgba(6, 18, 36, .42); border: 1px solid var(--k-line); color: var(--k-t3);
  font-family: inherit; font-size: var(--fs-lg, 11px); padding: 7px 12px;
  border-radius: 6px; cursor: pointer; letter-spacing: .03em; min-height: 34px; flex: none; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}
.notif-btn:hover { background: rgba(52, 108, 232, .09); border-color: #346ce8; color: var(--k-t1); }
#notifBtn {
  position: relative; display: grid; place-items: center;
  width: 38px; min-width: 38px; height: 38px; padding: 0 !important;
  border: 0 !important; background: transparent !important;
}
#notifBtn:hover { border: 0; background: rgba(52, 108, 232, .12) !important; }
/* color, not background+mask: an external SVG mask silently failed to paint
   on Safari for this exact control on Market Structure/GEX before — see
   templates/_header.html's own note. currentColor via `color` is what the
   inline <svg> in the header partial resolves its stroke against. */
.ico-notif { display: block; width: 24px; height: 24px; color: var(--k-t3); }
#notifBtn.active .ico-notif { color: var(--accent, #346ce8); }
#notifBadge {
  position: absolute; right: -1px; bottom: 1px;
  min-width: 18px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--k-line); border-radius: 4px; background: var(--k-page);
  color: var(--k-t3); font-size: var(--fs-xs); font-weight: 700; line-height: 15px;
  text-align: center; font-variant-numeric: tabular-nums;
}
#notifBtn.active #notifBadge { border-color: var(--accent, #346ce8); color: var(--accent, #346ce8); }
/* Connection dot + market-session words — only rendered where a page passes
   header_show_status (today: Dashboard, the one page with a live scanner
   feed to report on). */
.status-dots { display: flex; align-items: center; gap: 8px; padding: 0 4px; flex: none; }
.mkt-state {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .04em; white-space: nowrap; color: var(--k-warn);
}
.mkt-state[hidden] { display: none; }
.mkt-state[data-state="ok"] { color: var(--k-pos); }
.mkt-state[data-state="bad"] { color: var(--k-neg); }
.sdot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; cursor: default;
  background: var(--k-warn); box-shadow: 0 0 0 3px rgba(227, 165, 52, .15);
}
.sdot[data-state="ok"] { background: var(--k-up); box-shadow: 0 0 0 3px rgba(17, 166, 142, .18); }
.sdot[data-state="bad"] { background: var(--k-down); box-shadow: 0 0 0 3px rgba(237, 41, 57, .18); }
@media (max-width: 700px) {
  .status-dots { gap: 5px; padding: 0; }
  .mkt-state { letter-spacing: 0; }
}
.header-nav { display: flex; align-items: center; gap: 8px; }


/* ---- shared page shell: Library and Explorer -------------------------------------------------
   Both pages put their header in the same box, from the same rules, so moving between them leaves
   the header exactly where it was. A page opts in with class="k-shell" on <body> and wraps its header
   and content in <div class="wrap">. Nothing here may depend on a page's own :root tokens: these
   pages swap their CSS when navigating without a reload, so only the shared --k-* tokens are safe. */
html body.k-shell:not(.admin-page) {
  --k-pad-x: 16px;
  margin: 0;
  max-width: 100%;
  padding: 20px var(--k-pad-x) 60px;
  background: var(--k-page);
}
html body.k-shell:not(.admin-page) > .wrap { max-width: 100%; }
html body.k-shell:not(.admin-page) header.site-head {
  display: flex; flex-direction: column; gap: 6px;
  max-width: none; padding: 0 0 8px; margin: 0 0 14px;
  background: var(--k-header, #031420);
  border-bottom: 1px solid var(--k-border, #0e3752);
  position: sticky; top: 0; z-index: 50;
  line-height: 1.5; /* not inherited from the page: Library's body is 1.75, Explorer's 1.6 */
}
/* The top row is the same height whether or not a page puts something (Library's VI/EN switch) in it. */
html body.k-shell:not(.admin-page) header.site-head .header-row-top { min-height: 49px; align-items: center; }
html body.k-shell:not(.admin-page) header.site-head .header-row-top .lib-actions { align-self: center; line-height: 1; }
html body.k-shell:not(.admin-page) header.site-head .k-signin {
  font-size: var(--fs-sm, 11px); color: var(--k-t1);
}
html body.k-shell:not(.admin-page) header.site-head .k-pop a {
  font-size: var(--fs-sm, 11px); color: var(--k-t2);
}
html body.k-shell:not(.admin-page) header.site-head .k-pop a:hover { color: var(--k-t1); }
/* Reserve the scrollbar's width on both pages so the account chip does not shift 15px between them. */
html:has(body.k-shell) { scrollbar-gutter: stable; }
/* The page's own scrollbar is the same width and colour on every page that shares the shell (it was 10px
   styled on the Dashboard and the browser's 15px elsewhere, which moved the right-hand side of the
   header by 5px between them). */
html:has(body.k-shell)::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(body.k-shell)::-webkit-scrollbar-track { background: transparent; }
html:has(body.k-shell)::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box;
}
html:has(body.k-shell):hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #687CA3 75%, transparent); background-clip: padding-box;
}
html:has(body.k-shell)::-webkit-scrollbar-thumb:hover { background: #8EA3C9; background-clip: padding-box; }

/* Universal dark scrollbars for inner widgets, cards, charts and tables */
body.k-shell * {
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 108, 232, 0.3) transparent;
}
body.k-shell *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.k-shell *::-webkit-scrollbar-track {
  background: transparent;
}
body.k-shell *::-webkit-scrollbar-thumb {
  background: rgba(52, 108, 232, 0.25);
  border-radius: 4px;
}
body.k-shell *::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 108, 232, 0.55);
}
/* The account slot must not be squeezed by the nav beside it: "Sign in" was wrapping onto two lines
   and stretching the whole header row. */
#kAccount { flex: none; }
.k-signin { white-space: nowrap; }
@media (max-width: 640px) {
  html body.k-shell:not(.admin-page) { --k-pad-x: 9px; padding: 18px 9px 44px; }
  /* Carry the wider phone shell into the first content frame on the pages
     that add their own inset. Index Dynamics' .id-wrap has no such inset. */
  html body.k-shell:not(.admin-page) .lib-block main { padding-left: 16px; padding-right: 16px; }
  html body.k-shell:not(.admin-page) :is(.mobile-macro, .mobile-news) { padding-left: 10px; padding-right: 10px; }
}


/* ---- keeping the header still between pages ------------------------------------------------------
   A real navigation (Dashboard <-> Market Structure <-> the rest) now runs as a view transition: the
   browser holds the header (and the phone tab bar) as their own layer and does not animate it, so it
   does not blink while the page under it is replaced. Browsers without support just navigate as before.
   Turned off for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
html body.k-shell:not(.admin-page) header.site-head { view-transition-name: site-header; }
.k-tabbar { view-transition-name: site-tabbar; }
::view-transition-group(site-header), ::view-transition-group(site-tabbar) { animation-duration: 0s; }
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(site-tabbar), ::view-transition-new(site-tabbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.12s; }


/* ==== the desktop header (supplied design) =========================================================
   Logo on the left, the four sections in the middle (30px icon over a 12px label, blue underline on the
   current one), market status / notifications / profile on the right. It runs edge to edge; the phone
   keeps its own top bar and floating tab bar. All artwork is drawn at the same 30px. */
@media (min-width: 768px) {
  /* The header sits at the very top now, so the body needs no padding above it. */
  html body.k-shell:not(.admin-page) { padding-top: 0; }
  html body.k-shell:not(.admin-page) header.site-head {
    height: auto; gap: 0; padding: 0 16px;
    margin: 0 calc(-1 * var(--k-pad-x)) 14px;
    background: var(--k-header, #0d2430);
    border-bottom: 1px solid var(--k-border, #0e3752);
    line-height: 1.5;
  }
  html body.k-shell:not(.admin-page) header.site-head .header-row-top { height: 64px; min-height: 64px; padding: 0; width: 100%; max-width: none; }
  html body.k-shell:not(.admin-page) header.site-head .k-nav {
    display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
    align-items: center; gap: 0; height: 64px; min-height: 64px; padding: 0; width: 100%; max-width: none; margin: 0;
  }
  html body.k-shell header.site-head .k-brand { justify-self: start; height: 100%; }
  html body.k-shell header.site-head .k-brand img { height: 36px; width: auto; max-width: 320px; object-fit: contain; }
  html body.k-shell header.site-head .k-links { justify-self: center; height: 100%; align-self: stretch; display: flex; align-items: center; gap: 36px; overflow: visible; }
  html body.k-shell header.site-head .k-links .k-navitem {
    position: relative; width: 34px; min-width: 34px; height: 34px; margin: 0; padding: 0;
    display: grid; place-items: center; border: none; border-radius: 0;
    background: transparent; color: #ffffff; text-decoration: none; cursor: pointer;
    transition: color 0.22s ease, transform 0.22s cubic-bezier(0.2, 0, 0, 1);
  }
  html body.k-shell header.site-head .k-links .k-navitem span:not(.ui-svg) { display: none; }
  html body.k-shell header.site-head .k-links .k-navitem:hover {
    background: transparent; border: none; box-shadow: none;
    color: var(--accent, #346ce8) !important; transform: translateY(-2px);
  }
  html body.k-shell header.site-head .k-links .k-navitem.on {
    color: var(--accent, #346ce8) !important; background: transparent;
    border: none; box-shadow: none;
  }

  html body.k-shell header.site-head .k-actions { justify-self: end; display: flex; align-items: center; gap: 8px; height: 100%; }
  html body.k-shell header.site-head .k-actions .k-right { margin-left: 0; }
  html body.k-shell header.site-head .k-actions .header-nav { display: flex; align-items: center; }

  html body.k-shell header.site-head .k-market,
  html body.k-shell header.site-head #notifBtn,
  html body.k-shell header.site-head .k-profile {
    position: relative; height: 40px; min-width: 40px; padding: 0 !important; margin: 0;
    display: grid; place-items: center; border: 1px solid var(--k-border, #0e3752) !important; border-radius: 999px !important;
    background: var(--k-surface-2, #082438) !important; color: inherit; cursor: pointer; text-decoration: none;
  }
  html body.k-shell header.site-head .k-market:hover,
  html body.k-shell header.site-head #notifBtn:hover,
  html body.k-shell header.site-head .k-profile:hover { filter: brightness(1.12); background: var(--surface-hover, #09273c) !important; border-color: var(--k-border-focus, #144e73) !important; }

  /* The market icon is the same 30px; the tag sits around its 4 o'clock corner. */
  html body.k-shell header.site-head .k-market { width: 48px; margin-right: 2px; }
  .k-market-wrap { position: relative; width: 30px; height: 30px; display: block; }
  .k-market-tag {
    position: absolute; right: -19px; bottom: -7px; min-width: 42px; height: 18px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid currentColor;
    background: var(--pos-bg, rgba(17, 166, 142, 0.12)); border-color: var(--pos-border, rgba(17, 166, 142, 0.35));
    font-size: var(--fs-2xs); font-weight: 800; line-height: 1; letter-spacing: 0.045em;
    color: var(--k-up, #11a68e);
  }
  .k-market-tag.extended { color: var(--k-warn, #FBBF24); background: var(--warn-bg, rgba(251, 191, 36, 0.12)); border-color: var(--warn-border, rgba(251, 191, 36, 0.35)); }
  .k-market-tag.closed { color: #e0a526; background: var(--k-surface-2, #082438); border-color: var(--k-border, #0e3752); }

  /* Bell: the badge counts the notification areas that are on (0 hides it), so it is green, not an
     unread-red count. */
  html body.k-shell header.site-head #notifBtn { margin-left: 6px; }
  html body.k-shell header.site-head #notifBtn .ui-svg { color: inherit; }
  html body.k-shell header.site-head #notifBadge {
    position: absolute; top: -3px; right: -3px; bottom: auto; min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--accent, #346ce8); color: #ffffff; font-size: var(--fs-xs); font-weight: 700; line-height: 1;
    border: 2px solid var(--bg-main, #000b13);
  }
  html body.k-shell header.site-head #notifBadge:empty,
  html body.k-shell header.site-head #notifBtn:not(.active) #notifBadge { display: none; }

  html body.k-shell header.site-head .k-profile { margin-left: 2px; }
  html body.k-shell header.site-head .k-user .ui-svg, html body.k-shell header.site-head .k-profile .ui-svg { margin: 0; }
  html body.k-shell header.site-head .k-pop { top: calc(100% + 10px); right: 0; }
}
/* Narrower desktop and tablet: the same header with the labels dropped. */
@media (min-width: 768px) and (max-width: 1100px) {
  html body.k-shell header.site-head .k-nav { grid-template-columns: 220px 1fr auto; }
  html body.k-shell header.site-head .k-brand img { height: 36px; max-width: 210px; }
  html body.k-shell header.site-head .k-links { gap: 24px; }
  html body.k-shell header.site-head .k-links .k-navitem { width: 34px; min-width: 34px; border: none; background: transparent; border-radius: 0; }
  html body.k-shell header.site-head .k-links .k-navitem span:not(.ui-svg) { display: none; }
}

/* All the header artwork is drawn at one size (the supplied SVGs are huge; unsized they blow the header up). */
.ui-svg { width: 30px; height: 30px; display: block; object-fit: contain; flex: 0 0 30px; }

/* The supplied bell image is used at every size; the old outline bell stays in the markup but is not shown. */
.k-bell-img { display: block; }
html body.k-shell header.site-head #notifBtn .ico-notif { display: none; }

/* ---- the market strip under the header's dividing line -------------------------------------------------
   SPX / NDX / DOW / RUSSELL / GOLD / OIL / BTC, running. It hangs directly from the 64px bar (which keeps its
   own height) and belongs to the header, so the sticky things below it (the Dashboard tabs, Market Structure's
   section bar) read the taller header height and sit under both. Dashboard, Market Structure and Explorer have
   it; Library does not. */
/* ---- Thinkorswim Market Strip in header --------------------------------- */
.k-market-strip {
  display: flex;
  align-items: center;
  height: 40px;
  position: relative;
  margin-right: 12px;
  padding-right: 16px;
  border: 0;
  border-right: 1px solid var(--k-border, #0e3752);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  user-select: none;
  overflow: hidden;
  min-width: 0;
}
.k-ms-slots {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.k-ms-slot {
  width: 250px;
  height: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  outline: none;
  min-width: 0;
}
@media (max-width: 1199px) and (min-width: 768px) {
  .k-ms-slot {
    width: 180px;
  }
  .k-ms-spark {
    display: none !important;
  }
}
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) header.site-head .k-market-strip {
    position: absolute;
    z-index: 1;
    left: 56px;
    right: calc(4px + var(--k-actions-w, 120px) + 4px);
    top: calc(8px + env(safe-area-inset-top, 0px));
    height: 32px;
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    border: 0;
    background: transparent;
  }
  .k-ms-slots {
    width: 100%;
  }
  .k-ms-slot {
    width: 100% !important;
    height: 32px !important;
  }
  .k-ms-spark svg {
    width: 56px !important;
    height: 22px !important;
  }
}

.k-ms-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 200ms ease, transform 200ms ease;
  will-change: opacity, transform;
}
.k-ms-card.k-ms-anim-out {
  opacity: 0;
  transform: translateY(-4px);
}
.k-ms-card.k-ms-anim-in {
  opacity: 0;
  transform: translateY(4px);
}
@media (prefers-reduced-motion: reduce) {
  .k-ms-card {
    transition: none !important;
    transform: none !important;
  }
}

.k-ms-spark {
  flex: none;
  display: flex;
  align-items: center;
}
.k-ms-spark svg {
  display: block;
  width: 72px;
  height: 28px;
}
.k-ms-spark-empty {
  opacity: 0.3;
  border: 1px dashed var(--k-border, #0e3752);
  border-radius: 2px;
  box-sizing: border-box;
}

.k-ms-data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}

.k-ms-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.k-ms-ticker {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--k-t1, #fafcfd);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.k-ms-price {
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  min-width: max-content;
  flex-shrink: 0;
}

.k-ms-row-bottom {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.k-ms-change {
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
}
.k-ms-arr {
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle;
}

/* Color states */
.k-ms-card.pos .k-ms-price,
.k-ms-card.pos .k-ms-change {
  color: var(--k-pos, #11a68e);
}
.k-ms-card.neg .k-ms-price,
.k-ms-card.neg .k-ms-change {
  color: var(--k-neg, #ed2939);
}
.k-ms-card.flat .k-ms-price,
.k-ms-card.flat .k-ms-change {
  color: var(--k-t3, #7f8b92);
}

.k-ms-card.is-stale .k-ms-row-bottom {
  opacity: 0.55;
}
.k-ms-stale {
  font-size: var(--fs-2xs, 10px);
  color: var(--k-warn, #fbbf24);
  text-transform: uppercase;
  padding: 0 3px;
  border: 1px solid var(--k-warn, #fbbf24);
  border-radius: 2px;
  line-height: 1;
  margin-left: 2px;
}

.k-ms-ctrls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.k-ms-btn {
  background: transparent;
  border: none;
  color: var(--k-t3, #7f8b92);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}
.k-ms-btn:hover, .k-ms-btn:focus-visible {
  color: var(--k-t1, #fafcfd);
  background: var(--surface-3, #0d2430);
}

/* Settings Modal */
.k-ms-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-ms-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.k-ms-modal-box {
  position: relative;
  background: var(--surface-1, #061722);
  border: 1px solid var(--k-border, #0e3752);
  border-radius: 8px;
  width: 320px;
  max-width: 90vw;
  padding: 16px;
  color: var(--k-t1, #fafcfd);
  font-family: var(--font-mono, 'K2TP Mono', monospace);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.k-ms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--k-border, #0e3752);
  padding-bottom: 8px;
}
.k-ms-modal-title {
  font-size: var(--fs-md);
  font-weight: 500;
}
.k-ms-modal-close {
  background: transparent;
  border: none;
  color: var(--k-t3, #7f8b92);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.k-ms-sec-title {
  font-size: var(--fs-xs, 11px);
  color: var(--k-t3, #7f8b92);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.k-ms-chk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.k-ms-chk-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.k-ms-modal-foot {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.k-ms-btn-save {
  background: var(--btn-fill, #346ce8);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.k-ms-btn-save:hover {
  background: var(--btn-fill-hover, #4a7ff0);
}

/* ==== actions and market status, all sizes (supplied design) =========================================
   Market status, notifications and profile have no frame; the market state reads as small text right under
   its icon (open green, pre/post-market amber, closed grey). */
.k-brand-btn, .k-more, .k-rail { display: none; }
html body.k-shell header.site-head .k-actions { gap: 14px; }
html body.k-shell header.site-head .k-market,
html body.k-shell header.site-head #notifBtn,
html body.k-shell header.site-head .k-profile {
  position: relative; width: 42px; height: 42px; min-width: 42px; margin: 0; padding: 0 !important;
  display: grid; place-items: center; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; filter: none; cursor: pointer; text-decoration: none; color: inherit;
}
html body.k-shell header.site-head .k-market:hover,
html body.k-shell header.site-head #notifBtn:hover,
html body.k-shell header.site-head .k-profile:hover { filter: none; opacity: 0.85; }
html body.k-shell header.site-head .k-market { margin-right: 0; }
html body.k-shell header.site-head .k-market-tag {
  position: absolute; left: 50%; right: auto; top: calc(100% + 1px); bottom: auto; transform: translateX(-50%);
  min-width: 0; height: auto; padding: 0; display: block; border: 0; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
  font-size: var(--fs-2xs); line-height: 1.2; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--k-up, #11a68e);
}
html body.k-shell header.site-head .k-market-tag.extended { color: var(--k-warn, #fbbf24); }
html body.k-shell header.site-head .k-market-tag.closed { color: #e0a526; }
html body.k-shell header.site-head #notifBadge { top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--fs-2xs); border-width: 0; }
html body.k-shell header.site-head #notifBtn, html body.k-shell header.site-head .k-profile { margin-left: 0; }

/* ==== phone (up to 767px): the supplied top bar and floating bottom bar ============================== */
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) { padding-top: 0; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  html body.k-shell:not(.admin-page) header.site-head {
    position: sticky; top: 0; z-index: 1200; height: auto; gap: 0; padding: 0;
    margin: 0 calc(-1 * var(--k-pad-x)) 14px;
    background: var(--k-header, #0d2430);
    border-bottom: 1px solid var(--k-border, #0e3752);
  }
  html body.k-shell:not(.admin-page) header.site-head .header-row-top {
    height: calc(64px + env(safe-area-inset-top, 0px)); min-height: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  }
  html body.k-shell header.site-head .k-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; min-height: 0; padding: 0; gap: 0; }
  html body.k-shell header.site-head .k-brand { display: none !important; }
  html body.k-shell header.site-head .k-brand-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    z-index: 2;
    transition: transform 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  html body.k-shell header.site-head .k-brand-btn:hover {
    opacity: 0.9;
  }
  html body.k-shell header.site-head .k-brand-btn:active {
    transform: scale(0.92);
    opacity: 0.8;
  }
  html body.k-shell header.site-head .k-brand-btn picture,
  .k-brand-btn picture {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  html body.k-shell header.site-head .k-brand-btn img,
  .k-brand-btn img {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    display: block;
    object-fit: contain;
    pointer-events: none;
  }
  html body.k-shell header.site-head .k-links { display: none; }
  html body.k-shell header.site-head #kAccount { display: none; }
  html body.k-shell header.site-head .k-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; height: auto; }
  html body.k-shell header.site-head .k-market, html body.k-shell header.site-head #notifBtn { width: 36px; height: 40px; min-width: 0; }

  /* MORE button on mobile: handled by the brand button (.k-brand-btn #kMore) */
  .k-more img, .k-rail-close img { width: 32px; height: 32px; object-fit: contain; }

  /* The rail opens slowly from the left across the whole top bar, deliberately over the market status and
     the bell, and scrolls sideways. What it holds depends on the page. */
  html body.k-shell header.site-head .k-rail {
    position: absolute; left: -6px; right: -6px; top: 5px; height: 38px; z-index: 10;
    display: flex; align-items: center; gap: 8px; padding: 0 8px 0 5px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); border-radius: 19px;
    /* Sheet over the top bar: opaque stops, no frost. */
    background: var(--glass-fill-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    opacity: 0; clip-path: inset(0 100% 0 0 round 19px); transform: translateY(-2px); transform-origin: left center;
    pointer-events: none;
    transition: clip-path 0.48s cubic-bezier(0.22, 0.8, 0.22, 1), opacity 0.24s ease, transform 0.48s cubic-bezier(0.22, 0.8, 0.22, 1);
  }
  /* While the rail is out it takes the place of the bar's own icons: nothing of them shows at either side. */
  body.k-rail-open header.site-head .k-brand-btn, body.k-rail-open header.site-head .k-more, body.k-rail-open header.site-head .k-actions { visibility: hidden; }
  html body.k-shell header.site-head .k-rail.open { opacity: 1; clip-path: inset(0 0 0 0 round 19px); transform: none; pointer-events: auto; }
  .k-rail-close {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer;
    opacity: 0; transform: translateX(-10px); transition: opacity 0.22s ease 0.1s, transform 0.38s cubic-bezier(0.22, 0.8, 0.22, 1) 0.1s;
  }
  .k-rail-scroll {
    min-width: 0; flex: 1; height: 34px; display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    opacity: 0; transform: translateX(-14px); transition: opacity 0.24s ease 0.16s, transform 0.42s cubic-bezier(0.22, 0.8, 0.22, 1) 0.16s;
  }
  .k-rail-scroll::-webkit-scrollbar { display: none; }
  .k-rail.open .k-rail-close, .k-rail.open .k-rail-scroll { opacity: 1; transform: translateX(0); }
  .k-rail-item {
    flex: 0 0 auto; height: 34px; min-width: 72px; padding: 0 12px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); border-radius: 12px; background: var(--surface-2-solid, #091c27); color: var(--k-t1);
    font-family: var(--font-mono); font-size: var(--fs-tab, 11px); font-weight: 600; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
    text-transform: uppercase !important;
    opacity: 0; transform: translateX(-8px);
  }
  .k-rail-item:hover { background: var(--surface-hover, #09273c); }
  .k-rail.open .k-rail-item { animation: kRailItemIn 0.36s ease forwards; }
  .k-rail.open .k-rail-item:nth-child(1) { animation-delay: 0.14s; }
  .k-rail.open .k-rail-item:nth-child(2) { animation-delay: 0.18s; }
  .k-rail.open .k-rail-item:nth-child(3) { animation-delay: 0.22s; }
  .k-rail.open .k-rail-item:nth-child(4) { animation-delay: 0.26s; }
  .k-rail.open .k-rail-item:nth-child(5) { animation-delay: 0.3s; }
  .k-rail.open .k-rail-item:nth-child(6) { animation-delay: 0.34s; }
  .k-rail.open .k-rail-item:nth-child(n+7) { animation-delay: 0.38s; }
  @keyframes kRailItemIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

  /* Bottom bar: five items (Dashboard, GEX, Explorer, Library, Profile). Same frost as the header and layer 2/3.
     --glass-fill-use falls back to the opaque stops when backdrop-filter is missing. */
  .k-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 1100;
    min-height: 58px; padding: 4px 6px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 0;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); border-radius: 22px;
    background: var(--glass-fill-use);
    -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(140%));
    backdrop-filter: var(--glass-blur, blur(22px) saturate(140%));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: visible;
  }
  .k-tabbar .k-tab {
    position: relative; width: 100%; min-width: 44px; height: 48px; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; color: var(--k-t2); text-decoration: none;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .k-tabbar .k-tab .k-ico,
  .k-tabbar .k-tab-img,
  .k-tabbar .k-badge {
    pointer-events: none;
  }
  .k-tab-img { width: 22px; height: 22px; object-fit: contain; display: block; }
  .k-tabbar .k-lbl { display: none; }
  .k-tabbar .k-tab.on { color: var(--accent, #346ce8); background: var(--surface-3-solid, #0d2430); }
  @media (hover: hover) and (pointer: fine) {
    .k-tabbar .k-tab:hover:not(.on) { background: var(--surface-hover, #09273c); }
  }
  .k-tab-acct { position: relative; display: flex; width: 100%; justify-self: stretch; }
  .k-tab-acct .k-tab {
    flex: 1 1 auto; width: 100%; min-height: 48px; min-width: 44px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .k-tab-acct .k-pop { top: auto; bottom: calc(100% + 12px); right: 0; }
  .k-badge {
    position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--k-down, #ed2939); color: #fff; font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
    display: grid; place-items: center;
  }
  .k-badge[hidden] { display: none; }
}
@media (max-width: 390px) {
  .k-tabbar { left: 7px; right: 7px; padding-left: 4px; padding-right: 4px; }
}

/* The bell's badge counts the notification areas that are on; nothing to show when none are (all sizes). */
html body.k-shell header.site-head #notifBadge:empty,
html body.k-shell header.site-head #notifBtn:not(.active) #notifBadge { display: none; }
html body.k-shell header.site-head .k-more[hidden] { display: none !important; }

/* ==== desktop (768px and up): MORE is a drop-down under the header ===================================
   The same per-page menu the phone rail shows, as a list that drops from the button, so the page's own
   sub-navigation bars can go. */
@media (min-width: 768px) {
  html body.k-shell header.site-head .k-nav { position: relative; }
  html body.k-shell header.site-head .k-more {
    display: none;   /* wide screens: the menu drops from the current page's own tab instead */
  }
  html body.k-shell header.site-head .k-more:hover { background: var(--k-hover, #0b255e); }
  html body.k-shell header.site-head .k-more img { width: 30px; height: 30px; object-fit: contain; }
  html body.k-shell header.site-head .k-rail {
    display: flex; flex-direction: column; position: absolute; left: 0; top: 60px; width: 220px; z-index: 1300;
    padding: 4px; gap: 0; height: auto;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); border-radius: 8px;
    /* Dropdown over the page: same navy stops as the frost, fully opaque. */
    background: var(--glass-fill-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 0.8, 0.22, 1), visibility 0s linear 0.22s;
  }
  html body.k-shell header.site-head .k-rail.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .k-rail-close { display: none; }
  .k-rail-scroll { display: flex; flex-direction: column; align-items: stretch; gap: 2px; height: auto; overflow: visible; opacity: 1; transform: none; }
  .k-rail-item {
    display: flex; align-items: center; justify-content: flex-start; height: auto; min-width: 0; padding: 9px 10px;
    border: 0; border-radius: 6px; background: transparent; color: var(--k-t2); text-decoration: none;
    font-family: var(--font-mono); font-size: var(--fs-tab, 12px); font-weight: 500; text-align: left; cursor: pointer;
    text-transform: uppercase !important;
    opacity: 1; transform: none; animation: none;
  }
  .k-rail-item:hover { background: var(--k-hover, #11231A); color: var(--k-t1); }
}

/* ==== market status, trading-platform style (all sizes) ===============================================
   No icon: a coloured dot, the session in words and the New York time, as plain text in the bar. */
html body.k-shell header.site-head .k-market {
  width: auto; min-width: 0; height: 42px; padding: 0 6px !important; margin: 0 4px 0 0;
  display: inline-flex; align-items: center; gap: 7px; border-radius: 6px !important;
}
html body.k-shell header.site-head .k-market:hover { opacity: 1; background: var(--k-raise) !important; }
.k-market-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8b949e; }
.k-market-open,
.k-market-extended { display: none; }
.k-market[data-state="open"] .k-market-dot { display: none; }
.k-market[data-state="pre-market"] .k-market-dot { display: none; }
.k-market[data-state="post-market"] .k-market-dot { display: none; }
.k-market-text {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.1;
  justify-content: center;
}
html body.k-shell header.site-head .k-market-tag {
  position: static; transform: none; display: block; font-weight: 800; letter-spacing: 0.03em;
  white-space: nowrap; line-height: 1.1; font-size: var(--fs-xs); text-transform: uppercase;
}
.k-market-clock {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em; color: var(--k-t1, #e6edf3);
  white-space: nowrap; line-height: 1.1; font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  html body.k-shell header.site-head .k-market { height: 40px; padding: 0 2px !important; margin: 0; }
}

/* Closed: hourglass + countdown; open/extended: session icon + label + countdown. */
/* The supplied hourglass (static/header/afterhour.svg) drawn inline so it needs no request and takes the amber. */
.k-market-glass { display: none; color: #f1b74a; }
.k-market[data-state="closed"] .k-market-dot { display: none; }
/* Desktop: closed 11+9; open/extended 11+9; icons --k-market-icon 18px. Phone: 10+8 all. */
html body.k-shell header.site-head .k-market[data-state="closed"] .k-market-tag {
  color: #e0a526; font-size: var(--fs-xs); font-weight: 800;
}
html body.k-shell header.site-head .k-market[data-state="open"] .k-market-tag {
  color: var(--k-up, #11a68e); font-size: var(--fs-xs); font-weight: 800;
}
html body.k-shell header.site-head .k-market[data-state="pre-market"] .k-market-tag,
html body.k-shell header.site-head .k-market[data-state="post-market"] .k-market-tag {
  color: #f1b74a; font-size: var(--fs-2xs); font-weight: 800;
}
html body.k-shell header.site-head .k-market[data-state="open"] .k-market-clock,
html body.k-shell header.site-head .k-market[data-state="pre-market"] .k-market-clock,
html body.k-shell header.site-head .k-market[data-state="post-market"] .k-market-clock {
  color: var(--k-t1, #e6edf3); font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .k-market-clock { display: block; }
}

.k-market-clock:empty { display: none !important; }

/* Announcement icon in the bell's place: the count sits at its 5 o'clock, hugging the handle (all sizes). */
html body.k-shell header.site-head #notifBadge {
  top: auto; right: auto; left: 19px; bottom: 5px; min-width: 14px; height: 14px; padding: 0 3px;
  font-size: var(--fs-2xs); border-width: 0;
}

/* ==== one icon size for every SVG in the header and the tab bar, desktop and phone ==================== */
:root { --k-icon: 24px; --k-market-icon: 18px; }
html body.k-shell header.site-head .ui-svg,
html body.k-shell header.site-head .k-more img,
html body.k-shell header.site-head .k-rail-close img,
html body.k-shell .k-tab-img {
  width: var(--k-icon) !important; height: var(--k-icon) !important; min-width: 0; flex: 0 0 var(--k-icon) !important; object-fit: contain;
}
/* Closed / open / extended: one fixed box so every session icon is the same height. */
html body.k-shell header.site-head .k-market-glass,
html body.k-shell header.site-head .k-market-open,
html body.k-shell header.site-head .k-market-extended {
  width: var(--k-market-icon) !important;
  height: var(--k-market-icon) !important;
  min-width: var(--k-market-icon) !important;
  max-width: var(--k-market-icon) !important;
  min-height: var(--k-market-icon) !important;
  max-height: var(--k-market-icon) !important;
  flex: 0 0 var(--k-market-icon) !important;
  object-fit: contain;
  object-position: center;
  align-self: center;
  box-sizing: border-box;
}
html body.k-shell header.site-head .k-market-open,
html body.k-shell header.site-head .k-market-extended { display: none; }
html body.k-shell header.site-head .k-market-glass { display: none; }
/* One buffalo, always on. OPEN is gain green; every other session is muted gold. */
html body.k-shell header.site-head .k-market-buffalo {
  width: var(--k-icon, 24px) !important;
  height: var(--k-icon, 24px) !important;
  min-width: var(--k-icon, 24px) !important;
  max-width: var(--k-icon, 24px) !important;
  min-height: var(--k-icon, 24px) !important;
  max-height: var(--k-icon, 24px) !important;
  flex: 0 0 var(--k-icon, 24px) !important;
  display: block;
  color: #e0a526;
  line-height: 0;
}
html body.k-shell header.site-head .k-market-buffalo svg,
html body.k-shell header.site-head .k-market-buffalo img {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  object-fit: contain;
}
html body.k-shell header.site-head .k-market[data-state="open"] .k-market-buffalo { color: #11a68e; }
html body.k-shell header.site-head .k-market[data-state="closed"] .k-market-buffalo,
html body.k-shell header.site-head .k-market:not([data-state="open"]) .k-market-buffalo { color: #e0a526; }
@media (max-width: 767px) {
  html body.k-shell header.site-head .k-market-buffalo {
    width: var(--k-icon, 24px) !important;
    height: var(--k-icon, 24px) !important;
    min-width: var(--k-icon, 24px) !important;
    max-width: var(--k-icon, 24px) !important;
    min-height: var(--k-icon, 24px) !important;
    max-height: var(--k-icon, 24px) !important;
    flex: 0 0 var(--k-icon, 24px) !important;
  }
}

/* Market status sits close to the announcement icon. */
html body.k-shell header.site-head .k-actions { gap: 4px; }
html body.k-shell header.site-head .k-market { margin: 0 !important; }
html body.k-shell header.site-head #notifBtn { margin-left: 0 !important; }
@media (max-width: 767px) { html body.k-shell header.site-head .k-actions { gap: 6px; } }
html body.k-shell header.site-head #notifBtn, html body.k-shell header.site-head .k-profile { width: 30px !important; min-width: 30px !important; }
html body.k-shell header.site-head .k-market { padding-right: 0 !important; }

html body.k-shell header.site-head .k-actions { gap: 0 !important; }
html body.k-shell header.site-head #notifBtn, html body.k-shell header.site-head .k-profile { width: 26px !important; min-width: 26px !important; }
html body.k-shell header.site-head .k-market { gap: 5px; }
html body.k-shell header.site-head #notifBtn { margin-left: 4px !important; }
html body.k-shell header.site-head .k-profile { margin-left: 2px !important; }

/* The page itself never pans sideways (nothing is meant to overflow it); inner scrollers such as tables and
   tab strips still scroll on their own. `clip` on the body does not turn it into a scroll container. */
html { overscroll-behavior-x: none; }
html body.k-shell { overflow-x: clip; overscroll-behavior-x: none; max-width: 100vw; }

/* An expand iframe is the only scroller for its sheet. html stays clipped
   so the page padding and overflow-x rule cannot open a second scrollbar
   beside the one on the body. */
html.is-embedded {
  height: 100%;
  overflow: hidden !important;
}
html.is-embedded body.k-shell {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}
html.is-embedded,
html.is-embedded body.k-shell {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) #000b13;
}
html.is-embedded::-webkit-scrollbar,
html.is-embedded body.k-shell::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.is-embedded::-webkit-scrollbar-track,
html.is-embedded body.k-shell::-webkit-scrollbar-track {
  background: #000b13;
}
html.is-embedded::-webkit-scrollbar-thumb,
html.is-embedded body.k-shell::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
html.is-embedded::-webkit-scrollbar-thumb:hover,
html.is-embedded body.k-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* The shared table rule pins every cell to 12px. Block tables need the
   reading and the values at 13px, and the score header over the number. */
html body.k-shell:not(.admin-page) .ue-blocktbl .ue-table td {
  font-size: var(--fs-md);
}
html body.k-shell:not(.admin-page) .ue-blocktbl .ue-table th.ue-score-h,
html body.k-shell:not(.admin-page) .ue-blocktbl .ue-table td.ue-score-cell {
  text-align: right;
}

/* Phone: MORE hugs the left edge and the status / announcement cluster hugs the right one, which leaves the
   market strip more room between them. */
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) header.site-head .header-row-top { padding-left: 4px; padding-right: 4px; }
  html body.k-shell header.site-head .k-more { width: 44px; }
}

/* Desktop: the status, announcement and profile get room to breathe (the tight spacing is for the phone). */
@media (min-width: 768px) {
  html body.k-shell header.site-head .k-actions { gap: 4px !important; }
  html body.k-shell header.site-head #notifBtn, html body.k-shell header.site-head .k-profile { width: 34px !important; min-width: 34px !important; margin-left: 0 !important; }
  html body.k-shell header.site-head .k-market { padding-right: 0 !important; }
  html body.k-shell header.site-head #notifBadge { left: 21px; }
}

/* The count is a plain number, no disc: bold digit at the icon's 5 o'clock, with a dark halo so it reads over the art. */
html body.k-shell header.site-head #notifBtn.active #notifBadge, html body.k-shell header.site-head #notifBadge {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  min-width: 0; width: auto; height: auto; padding: 0; line-height: 1;
  color: var(--accent, #346ce8) !important; font-size: var(--fs-sm); font-weight: 800;
  text-shadow: 0 0 3px #020e26, 0 0 3px #020e26, 0 0 2px #020e26;
}

/* Phone: a thinner top bar (48px plus the safe area) and the strip stays running under the MORE rail. */
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) header.site-head .header-row-top {
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding: calc(4px + env(safe-area-inset-top, 0px)) 4px 4px;
  }
  html body.k-shell header.site-head .k-more { height: 44px; }
  html body.k-shell header.site-head .k-market { height: 36px; }
  html body.k-shell header.site-head .k-rail { top: 1px; height: 38px; }
}

/* ==== one icon size for every SVG in the header and the tab bar, desktop and phone ==================== */
:root { --k-icon: 24px; --k-market-icon: 18px; }
html body.k-shell header.site-head .ui-svg,
html body.k-shell header.site-head .k-links .k-navitem .k-ico,
html body.k-shell header.site-head .k-links .k-navitem .ui-svg,
html body.k-shell header.site-head .k-market-buffalo,
html body.k-shell header.site-head .k-market-buffalo img,
html body.k-shell header.site-head #marketStatusImg,
html body.k-shell header.site-head .ico-notif,
html body.k-shell header.site-head #notifBtn .ui-svg,
html body.k-shell header.site-head #notifBtn svg,
html body.k-shell header.site-head .k-profile .ui-svg,
html body.k-shell header.site-head .k-profile .k-ico,
html body.k-shell header.site-head .k-user .ui-svg,
html body.k-shell header.site-head .k-user .k-ico,
html body.k-shell header.site-head .k-more .k-ico,
html body.k-shell header.site-head .k-rail-close .k-ico,
html body.k-shell .k-tabbar .k-tab-img,
html body.k-shell header.site-head .k-user .k-avatar,
html body.k-shell header.site-head .k-profile .k-avatar,
html body.k-shell header.site-head .k-market-open,
html body.k-shell header.site-head .k-market-extended,
html body.k-shell header.site-head .k-market-glass {
  width: var(--k-icon) !important;
  height: var(--k-icon) !important;
  min-width: var(--k-icon) !important;
  max-width: var(--k-icon) !important;
  min-height: var(--k-icon) !important;
  max-height: var(--k-icon) !important;
  flex: 0 0 var(--k-icon) !important;
  object-fit: contain;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), filter 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  will-change: transform;
}

/* Header logo: 36px with smooth hover lift & brand glow */
html body.k-shell header.site-head .k-brand img,
.k-brand img {
  height: 36px !important;
  width: auto !important;
  max-height: 36px !important;
  display: block;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), filter 0.22s ease;
  will-change: transform;
}
html body.k-shell header.site-head .k-brand:hover img,
.k-brand:hover img {
  transform: translateY(-1.5px) scale(1.04);
  filter: drop-shadow(0 3px 8px rgba(52, 108, 232, 0.45));
}

/* Header & Tab bar links & icons:
   Normal: pure white (#ffffff)
   Hover & Active: exact brand blue (#346ce8)
   Color transitions smoothly via currentColor with zero black frame / zero flicker */
html body.k-shell header.site-head .k-links .k-navitem,
html body.k-shell header.site-head .k-more,
html body.k-shell header.site-head .k-rail-close,
html body.k-shell header.site-head #notifBtn,
html body.k-shell header.site-head #marketStatusBtn,
html body.k-shell header.site-head .k-profile,
html body.k-shell header.site-head .k-user,
html body.k-shell header.site-head #kAccount a,
html body.k-shell header.site-head #kAccount button {
  color: #ffffff;
  transition: color 0.22s ease, transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  will-change: transform;
}

html body.k-shell .k-tabbar .k-tab,
html body.k-shell .k-tabbar .k-tab-acct .k-tab {
  color: #ffffff;
  transition: color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

html body.k-shell header.site-head .k-links .k-navitem .k-ico,
html body.k-shell header.site-head .k-more .k-ico,
html body.k-shell header.site-head .k-rail-close .k-ico,
html body.k-shell header.site-head #notifBtn .k-ico,
html body.k-shell header.site-head .k-profile .k-ico,
html body.k-shell header.site-head .k-user .k-ico,
html body.k-shell header.site-head .k-profile .ui-svg,
html body.k-shell header.site-head .k-user .ui-svg {
  background-color: currentColor;
  opacity: 0.95;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), filter 0.22s ease, opacity 0.22s ease;
  will-change: transform;
}

html body.k-shell .k-tabbar .k-tab .k-ico,
html body.k-shell .k-tabbar .k-tab-acct .k-tab .k-ico {
  background-color: currentColor;
  opacity: 0.95;
  transition: opacity 0.22s ease;
}

/* Active tab (.on): exact Brand Blue (#346ce8) */
html body.k-shell header.site-head .k-links .k-navitem.on,
html body.k-shell .k-tabbar .k-tab.on {
  color: var(--accent, #346ce8) !important;
  font-weight: 600;
  border-bottom-color: var(--accent, #346ce8);
}
html body.k-shell header.site-head .k-links .k-navitem.on .k-ico,
html body.k-shell .k-tabbar .k-tab.on .k-ico {
  opacity: 1;
}

/* Hover state: exact Brand Blue (#346ce8) + Brand Blue Glow & 3D Lift (Zero Flicker) */
html body.k-shell header.site-head .k-links .k-navitem:hover,
html body.k-shell header.site-head .k-more:hover,
html body.k-shell header.site-head .k-rail-close:hover,
html body.k-shell header.site-head #notifBtn:hover,
html body.k-shell header.site-head #marketStatusBtn:hover,
html body.k-shell header.site-head .k-profile:hover,
html body.k-shell header.site-head .k-user:hover,
html body.k-shell header.site-head #kAccount a:hover,
html body.k-shell header.site-head #kAccount button:hover {
  color: var(--accent, #346ce8) !important;
}

html body.k-shell header.site-head .k-links .k-navitem:hover .k-ico {
  transform: translateY(-2.5px) scale(1.08);
  filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
  opacity: 1;
}

html body.k-shell header.site-head .k-more:hover .k-ico,
html body.k-shell header.site-head .k-rail-close:hover .k-ico {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
  opacity: 1;
}

html body.k-shell header.site-head #notifBtn:hover .k-ico,
html body.k-shell header.site-head #notifBtn:hover .ico-notif,
.notif-btn:hover .ico-notif {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
  color: var(--accent, #346ce8) !important;
}

/* Profile / Account hover lift & glow */
html body.k-shell header.site-head .k-profile:hover,
html body.k-shell header.site-head .k-user:hover,
html body.k-shell header.site-head #kAccount a:hover,
html body.k-shell header.site-head #kAccount button:hover {
  transform: translateY(-2.5px) scale(1.08) !important;
}
html body.k-shell header.site-head .k-profile:hover .k-ico,
html body.k-shell header.site-head .k-user:hover .k-ico,
html body.k-shell header.site-head .k-profile:hover .ui-svg,
html body.k-shell header.site-head .k-user:hover .ui-svg {
  filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  html body.k-shell .k-tabbar .k-tab:hover,
  html body.k-shell .k-tabbar .k-tab-acct .k-tab:hover {
    color: var(--accent, #346ce8) !important;
  }
  html body.k-shell .k-tabbar .k-tab:hover .k-ico {
    transform: translateY(-2.5px) scale(1.08);
    filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
    opacity: 1;
  }
  html body.k-shell .k-tabbar .k-tab-acct .k-tab:hover {
    transform: translateY(-2.5px) scale(1.08) !important;
  }
  html body.k-shell .k-tabbar .k-tab-acct .k-tab:hover .k-ico {
    filter: drop-shadow(0 2px 8px rgba(52, 108, 232, 0.65));
    opacity: 1;
  }
}

html body.k-shell header.site-head #marketStatusBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(52, 108, 232, 0.35);
  border-color: var(--accent, #346ce8);
}
html body.k-shell header.site-head #marketStatusBtn:hover .k-market-buffalo {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(52, 108, 232, 0.45));
}

html body.k-shell header.site-head .k-user:hover .k-avatar,
html body.k-shell header.site-head .k-profile:hover .k-avatar {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 10px rgba(52, 108, 232, 0.35);
  border-color: var(--accent, #346ce8);
  color: var(--accent, #346ce8);
}

/* Language switch VI / EN: header and mobile floating buttons hidden (moved to Profile menu) */
.k-lang-header,
.k-lang-fixed,
#kLangHeader,
#kLangFixed {
  display: none !important;
}
.language-switch {
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
  will-change: transform;
}
.k-lang-header .language-switch .lang-pill,
.k-lang-fixed .language-switch .lang-pill,
.language-switch .lang-pill {
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}
.k-lang-header .language-switch:hover,
.k-lang-fixed .language-switch:hover,
.language-switch:hover {
  transform: translateY(-2px) scale(1.08) !important;
  opacity: 1 !important;
}
.k-lang-header .language-switch:hover .lang-pill,
.k-lang-fixed .language-switch:hover .lang-pill,
.language-switch:hover .lang-pill {
  color: var(--accent, #346ce8) !important;
  border-color: var(--accent, #346ce8) !important;
  background: rgba(52, 108, 232, 0.18) !important;
  box-shadow: 0 0 10px rgba(52, 108, 232, 0.45) !important;
}

/* ==== shared frost on the sticky header, card heads, and layer 2/3 =========
   Blur only the outermost frosted layer. The sticky header and the phone tab
   bar blur because content scrolls behind them. A card header strip blurs
   because it is the layer-3 surface on an opaque surface-1 card. Anything
   nested inside one of those keeps the translucent gradient (via the layer
   tokens) and does not add a second backdrop-filter — stacked blurs are
   expensive on iPhone and do not change the pixels much. */
html body.k-shell:not(.admin-page) header.site-head {
  background: var(--glass-fill-use);
  border-bottom-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html body.k-shell:not(.admin-page) .site-head.has-tape .head-rule {
  background: var(--glass-border);
}
/* The MORE menu is a dropdown (desktop) or a sheet (phone). Both stay
   opaque — see the .k-rail background rules — so they do not blur the page
   through the labels. On a phone the rail also sits inside the header,
   which already blurs; a second filter would not help the type. */
@media (min-width: 768px) {
  html body.k-shell:not(.admin-page) header.site-head .k-rail {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) header.site-head .k-rail,
  html body.k-shell:not(.admin-page) header.site-head .k-market-strip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Card header strips keep the frost fill and the neutral hairline. The
   card body under them is the blur layer now, so the strip does not add
   a second backdrop-filter. Nested sub-cards are solid page color; their
   strips stay this fill too, still without a filter. */
html body.k-shell:not(.admin-page) :is(
  .d2-panel-head,
  .card-head-title,
  .id-sec-head,
  .sx-card-head,
  .screener-top-bar,
  .is-chart-head,
  .is-snap-head,
  .ue-bar,
  .gex-card-head
) {
  background: var(--glass-fill-use);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.k-shell:not(.admin-page) .d2-panel-head {
  margin: -8px -10px 6px;
  padding: 8px 10px 5px;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 6px 6px 0 0;
}
html body.k-shell:not(.admin-page) .id-sec-head {
  margin: -14px -16px 12px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 7px 7px 0 0;
}
@media (max-width: 640px) {
  html body.k-shell:not(.admin-page) .id-sec-head {
    margin: -12px -12px 12px;
    padding: 10px 12px 8px;
  }
}
html body.k-shell:not(.admin-page) :is(.is-chart-head, .is-snap-head) {
  margin: -8px -10px 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 6px 6px 0 0;
}
html body.k-shell:not(.admin-page) .gex-card-head {
  margin: -12px -12px 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 8px 8px 0 0;
}
html body.k-shell:not(.admin-page) .gex-toolbar {
  padding: 8px 10px;
  border-radius: 8px;
}
html body.k-shell:not(.admin-page) .card-head-title,
html body.k-shell:not(.admin-page) .screener-top-bar,
html body.k-shell:not(.admin-page) .sx-card-head {
  border-bottom: 1px solid var(--glass-border);
}
html body.k-shell:not(.admin-page) .ue-bar {
  border-bottom: 1px solid var(--glass-border);
  padding-left: 8px;
  padding-right: 8px;
}

/* Dashboard pulse cards sit on the page, so they take the same frost as the
   header: translucent gradient, 22px saturate blur, neutral hairline.
   trading-shell.css paints every card's resting border with --line (teal);
   this rule loads later and is more specific, so the teal does not return.
   --glass-fill-use swaps to the opaque stops when backdrop-filter is missing. */
html body.k-shell:not(.admin-page) .d2-pulse-card {
  background: var(--glass-fill-use);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Pop-up text surfaces that followed surface-2 onto the frost. The shell
   behind them (--panel / --k-card) is already opaque; these inner fields
   were not. Solid inner-section color, no blur. Admin does not match
   (its surface-2 never became glass). */
html body.k-shell:not(.admin-page) :is(
  .rp-box,
  .notification-box,
  .modal-box,
  .k2tp-bot-mini,
  .k2tp-bot-modal,
  .d2-modal-box,
  .d2-embed-modal
) :is(
  .notif-option,
  .notif-alert,
  .modal-grid,
  .ct-company,
  .vol-say,

  .fund-grid .g,
  .vol-grid .g,
  #priceChart
) {
  background: var(--surface-2-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* A frosted strip inside another frosted strip keeps the fill and drops the blur. */
html body.k-shell:not(.admin-page) :is(
  header.site-head,
  .d2-panel-head,
  .card-head-title,
  .id-sec-head,
  .is-chart-head,
  .is-snap-head,
  .sx-card-head,
  .ue-bar,
  .k-tabbar,
  .k-rail
) :is(
  .d2-panel-head,
  .card-head-title,
  .id-sec-head,
  .is-chart-head,
  .is-snap-head,
  .sx-card-head,
  .screener-top-bar,
  .ue-bar,
  .k-rail-item
) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==== public card bodies ===================================================
   Same frost as the pulse row: one backdrop-filter on each outer card.
   Nested sub-cards use the page color, solid, with a neutral hairline and
   no second filter. Pop-up shells stay opaque. Admin does not match. */
html body.k-shell:not(.admin-page) :is(
  .d2-panel,
  .panel,
  .card,
  .gex-panel,
  .kpi,
  .rep,
  .coffee,
  .id-sec-panel,
  .ue-card,
  .wheel-card,
  .wheel-card-cycle,
  .wheel-card-add,
  .wheel-card-active,
  .wheel-card-ideas,
  .wheel-card-cc,
  .breaking-panel,
  .macro-panel,
  .mobile-macro,
  .mobile-news,
  .drop-chip,
  .feed-card,
  .k-page-card,
  .gex-card,
  .gex-toolbar
) {
  background: var(--glass-fill-use);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Drops keep a gold frame when pinned. The fill is still the shared frost. */
html body.k-shell:not(.admin-page) .drop {
  background: var(--glass-fill-use);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html body.k-shell:not(.admin-page) .drop.pinned {
  border-color: rgba(212, 162, 78, 0.5);
}
/* Featured slides keep their cover photo. Only the teal frame changes. */
html body.k-shell:not(.admin-page) .feat {
  border-color: var(--glass-border);
}
html body.k-shell:not(.admin-page) .lib-block .hero {
  background: var(--glass-fill-use);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@media (min-width: 1100px) {
  html body.k-shell:not(.admin-page) .side-box {
    background: var(--glass-fill-use);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
/* /screener flattens .panel to transparent so the terminal is full-bleed.
   That sheet is the screener card: frost it, and leave the embed (a pop-up
   document) without a filter. */
html.screener-page body.k-shell:not(.admin-page) #tab-screener .panel,
html body.screener-page.k-shell:not(.admin-page) #tab-screener .panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.screener-page:not(.is-embedded) body.k-shell:not(.admin-page) #tab-screener .panel,
html body.screener-page.k-shell:not(.admin-page):not(.is-embedded) #tab-screener .panel {
  background: var(--glass-fill-use) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html.is-embedded body.k-shell:not(.admin-page) .panel,
body.is-embedded.k-shell:not(.admin-page) .panel {
  /* The screener page flattens this sheet to transparent. Inside the
     expand pop-up that reads as a faded hole, so the sheet is opaque. */
  background: var(--glass-fill-solid) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1;
}
html body.k-shell:not(.admin-page) .d2-panel .d2-decision-block {
  border-color: var(--glass-border);
}

/* Nested sub-cards: page background, solid, no blur, no teal frame. */
html body.k-shell:not(.admin-page) :is(
  .d2-panel,
  .panel,
  .card,
  .gex-panel,
  .id-sec-panel,
  .ue-card,
  .wheel-card,
  .wheel-card-cycle,
  .wheel-card-add,
  .wheel-card-active,
  .wheel-card-ideas,
  .wheel-card-cc,
  .breaking-panel,
  .macro-panel,
  .mobile-macro,
  .mobile-news,
  .feed-card,
  .drop,
  .gex-card
) :is(
  .is-chart-card,
  .is-snap-card,
  .is-adv-card,
  .dr-card,
  .ib-panel,
  .rot-chart-card,
  .rot-layout,
  .sc-card,
  .sx-card,
  .sx-form,
  .sx-empty,
  .d2-report-module,
  .d2-report-header-card,
  .d2-k2tp-brief-keyreads,
  .d2-k2tp-rail-panel--neutral,
  .d2-brief-body,
  .d2-table-wrap,
  .tw,
  .gex-plot,
  .gex-table-wrap
) {
  background: var(--bg-main);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.k-shell:not(.admin-page) .d2-panel .d2-report-module .d2-report-module-body {
  background: var(--bg-main);
}
/* Grouped screener rows keep the gold leading edge. */
html body.k-shell:not(.admin-page) .panel .sc-card.child {
  border-left-color: var(--gold-dim, #87662c);
}
html body.k-shell:not(.admin-page) .d2-panel .d2-report-module:hover {
  border-color: rgba(52, 108, 232, 0.45);
}
html body.k-shell:not(.admin-page) .d2-panel .d2-report-module[open] {
  border-color: rgba(52, 108, 232, 0.55);
}
html body.k-shell:not(.admin-page) :is(.drop-chip, .feed-card, .drop, .feat, .mobile-macro, .mobile-news):hover {
  border-color: var(--green, var(--k-up));
}

/* Expanded heatmap / vol sheet is a pop-up. Solid stops, no blur.
   The page frost must not leak through: no alpha fill, no filter. */
html body.k-shell:not(.admin-page) .is-adv-card.hm-expanded {
  background: var(--glass-fill-solid);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  filter: none;
}
html body.k-shell:not(.admin-page) .is-adv-card.hm-expanded :is(
  .heatmap-wrap,
  .volsurf-wrap,
  .gex-heatmap-legend,
  .vs-legend,
  .vs-summary,
  .heatmap
) {
  background: var(--bg-main);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}

/* Dashboard expand shell. Opaque stops, above the dim scrim, no frost. */
html body.k-shell:not(.admin-page) .d2-embed-modal {
  background: var(--glass-fill-solid);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  filter: none;
}
html body.k-shell:not(.admin-page) .d2-embed-modal :is(.d2-embed-wrap, #d2ReportHost, #d2Us10yHost) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.k-shell:not(.admin-page) .d2-embed-modal :is(
  .d2-report-module,
  .d2-report-module-body,
  .d2-report-header-card,
  .d2-report-summary-box,
  .d2-k2tp-brief-keyreads,
  .d2-k2tp-brief-sources,
  .d2-k2tp-rail-panel--neutral,
  .mc-info-card,
  .mc-chart-box
) {
  background: var(--bg-main);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}
html body.k-shell:not(.admin-page) .d2-embed-modal .d2-report-module summary {
  background: #0b1930;
  opacity: 1;
}
html body.k-shell:not(.admin-page) .d2-embed-modal .mc-info-card {
  background: var(--bg-main) !important;
  border-color: var(--glass-border) !important;
}
html body.k-shell:not(.admin-page) .d2-embed-modal .d2-k2tp-brief,
html body.k-shell:not(.admin-page) .d2-embed-modal .d2-k2tp-brief-columns,
html body.k-shell:not(.admin-page) .d2-embed-modal .mc-info-grid,
html body.k-shell:not(.admin-page) .d2-embed-modal .mc-chart-box {
  width: 100%;
  max-width: none;
}
html body.k-shell:not(.admin-page) .d2-embed-modal .mc-chart-box {
  height: clamp(260px, 46vh, 480px) !important;
}
@media (max-width: 640px) {
  html body.k-shell:not(.admin-page) .d2-embed-modal .mc-info-grid {
    grid-template-columns: 1fr !important;
  }
  html body.k-shell:not(.admin-page) .d2-embed-modal .mc-chart-box {
    height: clamp(200px, 36vh, 320px) !important;
  }
}

/* Pages shown inside an expand iframe. The page frost is 50% alpha; in a
   pop-up that reads as a faded card. Outer cards use the opaque stops.
   Nested tiles stay #000b13 from the nested-sub-card rule. */
html.is-embedded body.k-shell:not(.admin-page) :is(
  .id-sec-panel,
  .ue-card,
  .d2-panel,
  .card,
  .gex-panel
),
body.is-embedded.k-shell:not(.admin-page) :is(
  .id-sec-panel,
  .ue-card,
  .d2-panel,
  .card,
  .gex-panel
) {
  background: var(--glass-fill-solid);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  filter: none;
}
html.is-embedded body.k-shell:not(.admin-page) :is(
  .id-sec-head,
  .ue-bar,
  .screener-top-bar,
  .card-head-title,
  .sx-card-head
),
body.is-embedded.k-shell:not(.admin-page) :is(
  .id-sec-head,
  .ue-bar,
  .screener-top-bar,
  .card-head-title,
  .sx-card-head
) {
  background: var(--glass-fill-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}
html.is-embedded body.k-shell:not(.admin-page) :is(.is-chart-head, .is-snap-head),
body.is-embedded.k-shell:not(.admin-page) :is(.is-chart-head, .is-snap-head) {
  background: var(--bg-main);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}
html.is-embedded body.k-shell:not(.admin-page) :is(
  .id-sec-panel,
  .is-top-split,
  .is-adv-charts,
  .ue-regime-grid,
  .ue-mei-top,
  .ue-blocks,
  .rot-layout,
  .dr-grid
),
body.is-embedded.k-shell:not(.admin-page) :is(
  .id-sec-panel,
  .is-top-split,
  .is-adv-charts,
  .ue-regime-grid,
  .ue-mei-top,
  .ue-blocks,
  .rot-layout,
  .dr-grid
) {
  width: 100%;
  max-width: none;
}

/* Row rules and sticky cells. Dividers go neutral; frozen cells stay
   opaque so a frosted card cannot show scrolled numbers through them. */
html body.k-shell:not(.admin-page) table thead th {
  border-bottom-color: var(--glass-border);
}
html body.k-shell:not(.admin-page) tbody tr {
  border-color: var(--glass-border);
}
html body.k-shell:not(.admin-page) .rot-th {
  background-color: var(--bg-main);
  border-bottom-color: var(--glass-border);
}
html body.k-shell:not(.admin-page) :is(.dr-card h3, .is-delta-grid, .news-item) {
  border-color: var(--glass-border);
}

/* Phone gutters, 767px and below. One page inset, one card pad, one tile
   pad. Expand sheets sit on the screen edge, above the tab bar, with only
   the safe-area inset. Desktop is outside this block. */
@media (max-width: 767px) {
  html body.k-shell:not(.admin-page) {
    --k-pad-x: 8px;
    --phone-gutter: 8px;
    --phone-card-pad: 10px;
    --phone-tile-pad: 8px;
    --phone-gap: 8px;
    padding-left: var(--phone-gutter) !important;
    padding-right: var(--phone-gutter) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.is-embedded body.k-shell:not(.admin-page),
  body.is-embedded.k-shell:not(.admin-page) {
    padding: 0 !important;
  }
  /* An embed draws its own VI/EN pill on top of the sheet's first line.
     The parent sheet already has the switch, so the copy inside the frame goes. */
  html.is-embedded body.k-shell:not(.admin-page) .k-lang-fixed,
  body.is-embedded.k-shell:not(.admin-page) .k-lang-fixed {
    display: none !important;
  }
  /* While a sheet or modal is open, hide page-level floating language switches */
  html body.k-shell:not(.admin-page).hm-locked :is(#kLangFixed, #kLangHeader, .k-lang-fixed, .k-lang-header) {
    display: none !important;
  }

  html body.k-shell:not(.admin-page) :is(.d2-embed-modal, .is-adv-card.hm-expanded) {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px) !important;
    z-index: 1260;
  }
  html body.k-shell:not(.admin-page) .hm-backdrop {
    z-index: 1190;
  }
  html body.k-shell:not(.admin-page) .d2-embed-modal .d2-embed-head {
    padding: 8px 10px 6px;
    margin-bottom: 10px;
  }
  html body.k-shell:not(.admin-page) .d2-embed-modal .d2-embed-head .ov-label {
    font-size: var(--fs-xs);
  }
  html body.k-shell:not(.admin-page) .d2-embed-modal .d2-embed-wrap {
    border: 0;
    border-radius: 0;
  }
  html body.k-shell:not(.admin-page) .is-adv-card.hm-expanded .is-adv-head {
    padding-left: 8px;
    padding-right: 8px;
  }

  html body.k-shell:not(.admin-page) :is(.d2-panel, .id-sec-panel) {
    padding: var(--phone-card-pad) 12px;
  }
  html body.k-shell:not(.admin-page) .d2-main-grid,
  html body.k-shell:not(.admin-page) .d2-col {
    gap: var(--phone-gap);
  }
  html body.k-shell:not(.admin-page) .id-sec {
    margin-bottom: 10px;
  }
  html.is-embedded body.k-shell:not(.admin-page) .id-wrap,
  body.is-embedded.k-shell:not(.admin-page) .id-wrap {
    padding: 0 var(--phone-gutter) 12px !important;
  }
  html body.k-shell:not(.admin-page) .panel {
    padding: var(--phone-card-pad) 12px;
  }
  html body.k-shell:not(.admin-page) #tab-wheels .panel {
    padding: 16px 13px;
  }
  html body.k-shell:not(.admin-page) :is(.feed-card, .drop) {
    padding: 10px 12px;
  }
  html body.k-shell:not(.admin-page) .lib-block main {
    padding: 12px var(--phone-gutter) 8px;
  }
  html body.k-shell:not(.admin-page) .lib-block .hero,
  html body.k-shell:not(.admin-page) .lib-path .lesson,
  html body.k-shell:not(.admin-page) .lib-path .card,
  html body.k-shell:not(.admin-page) .lib-path .callout,
  html body.k-shell:not(.admin-page) .lib-path .example,
  html body.k-shell:not(.admin-page) .lib-path .warning,
  html body.k-shell:not(.admin-page) .lib-path .quiz,
  html body.k-shell:not(.admin-page) .lib-guide .guide-shell,
  html body.k-shell:not(.admin-page) .lib-guide .toc,
  html body.k-shell:not(.admin-page) .lib-guide .callout,
  html body.k-shell:not(.admin-page) .lib-guide .keypoint {
    padding: 12px;
  }

  /* A tile that fills its card does not draw a second frame. The card
     itself keeps its border; only the inner scroller's frame goes. */
  html body.k-shell:not(.admin-page) .d2-panel .d2-table-wrap:has(table.phone-stack),
  html body.k-shell:not(.admin-page) .ue-card .ue-scroll,
  html body.k-shell:not(.admin-page) .lib-path .table-wrap,
  html body.k-shell:not(.admin-page) .lib-guide .table-scroll {
    border: 0;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
  }

  html body.k-shell:not(.admin-page) table.phone-stack {
    min-width: 0 !important;
    width: 100%;
    font-size: var(--fs-md);
  }
  html body.k-shell:not(.admin-page) table.phone-stack thead {
    display: none;
  }
  html body.k-shell:not(.admin-page) table.phone-stack,
  html body.k-shell:not(.admin-page) table.phone-stack tbody,
  html body.k-shell:not(.admin-page) table.phone-stack tr,
  html body.k-shell:not(.admin-page) table.phone-stack td {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  html body.k-shell:not(.admin-page) table.phone-stack tr {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--glass-border);
  }
  html body.k-shell:not(.admin-page) table.phone-stack td {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
    padding: 3px 0;
    border: 0;
    text-align: right;
    font-size: var(--fs-md);
    overflow-wrap: break-word;
  }
  html body.k-shell:not(.admin-page) .ue-blocktbl table.phone-stack td::before {
    color: var(--k-t2);
    font-size: var(--fs-xs);
  }
  html body.k-shell:not(.admin-page) table.phone-stack td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-t4, #7f8b92);
    text-align: left;
  }
  html body.k-shell:not(.admin-page) table.phone-stack td.phone-stack-title {
    display: block;
    text-align: left;
    font-size: var(--fs-lg);
    padding-bottom: 4px;
  }
  html body.k-shell:not(.admin-page) table.phone-stack td.phone-stack-title::before {
    content: none;
  }
  html body.k-shell:not(.admin-page) table.phone-stack .ue-hide-sm {
    display: grid;
  }
}