@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/dm-sans-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Deep Advantage Master Palette: #0A0A0A (Dark Base), #F8FAFC (Light Canvas / Dark FG),
     #D4A843 (Executive Gold). Strictly standard across website and app. */
  :root,
  :root[data-theme="light"] {
    color-scheme: light;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press: 120ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-sheet: 320ms;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    --r-card: 20px;
    --r-control: 12px;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-reader: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-display: clamp(2rem, 1.4rem + 3vw, 3rem);
    --text-reader-title: clamp(1.25rem, 0.65rem + 3vw, 2.25rem);
    --measure: 75ch;

    --navy: #0A0A0A;
    --navy-raised: #141414;
    --gold: #84651E;
    --gold-decorative: #D4A843;
    --cream: #F8FAFC;
    --cream-raised: #F1F5F9;

    --ink: #0A0A0A;
    --muted: #5E697E;
    --rule: rgba(10, 10, 10, 0.08);
    --border: rgba(10, 10, 10, 0.10);
    --border-strong: rgba(10, 10, 10, 0.44);
    --paper: #F8FAFC;
    --paper-raised: #F1F5F9;
    --surface: #FFFFFF;
    --surface-2: #F1F4F8;
    --surface-raised: #F8FAFC;
    --gold-glow: rgba(132, 101, 30, 0.15);
    --thumb-bg: #E2E8F0;
    --install-bg: #F1F5F9;
    --install-border: rgba(10, 10, 10, 0.08);
    --excerpt: var(--muted);
    --serif: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --brand-serif: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    
    --nav-clearance: calc(4.9rem + env(safe-area-inset-bottom));
    --fab-clearance: calc(4.5rem + env(safe-area-inset-bottom));
    --reader-font-scale: 1;
    --reader-line-height: 1.65;

    --header-bg: transparent;
    --header-ink: var(--ink);
    --header-muted: var(--muted);
    --header-rule: rgba(10, 10, 10, 0.08);

    --glass-bg-solid: rgba(248, 250, 252, 0.94);
    --glass-bg-blur: rgba(248, 250, 252, 0.84);
    --glass-saturate: saturate(160%);
    --glass-border: 1px solid rgba(10, 10, 10, 0.08);
    --glass-shadow: 0 8px 32px rgba(10, 10, 10, 0.08);

    --bg: var(--paper);
    --text: var(--ink);
    --text-reader-color: #0A0A0A;
    --text-muted: rgba(10, 10, 10, 0.62);
    --accent: var(--gold-decorative);
    --accent-text: #8A6A1C;
    --on-accent: var(--navy);
    --focus: #8A6A1C;
    --video-scrim: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.5) 52%, rgba(10, 10, 10, 0.08) 100%);
    --video-stage-bg: var(--navy);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --navy: #0A0A0A;
    --navy-raised: #141414;
    --cream: #F8FAFC;
    --cream-raised: #F1F5F9;
    --gold: #D4A843;
    --gold-decorative: #D4A843;
    --gold-glow: rgba(212, 168, 67, 0.22);
    --ink: #F8FAFC;
    --muted: #8A95A8;
    --rule: rgba(248, 250, 252, 0.10);
    --border: rgba(248, 250, 252, 0.10);
    --border-strong: rgba(248, 250, 252, 0.36);
    --paper: var(--navy);
    --paper-raised: #121212;
    --surface: #121212;
    --surface-2: #1A1A1A;
    --surface-raised: #1A1A1A;
    --thumb-bg: #141414;
    --install-bg: var(--paper-raised);
    --install-border: #22201C;
    --excerpt: var(--muted);

    --header-bg: transparent;
    --header-ink: var(--ink);
    --header-muted: var(--muted);
    --header-rule: rgba(248, 250, 252, 0.10);

    --glass-bg-solid: rgba(18, 18, 18, 0.94);
    --glass-bg-blur: rgba(18, 18, 18, 0.62);
    --glass-saturate: saturate(140%);
    --glass-border: 1px solid rgba(248, 250, 252, 0.10);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);

    --bg: var(--paper);
    --text: var(--ink);
    --text-reader-color: rgba(248, 250, 252, 0.88);
    --text-muted: rgba(248, 250, 252, 0.64);
    --accent: var(--gold);
    --accent-text: var(--gold);
    --on-accent: var(--navy);
    --focus: #D4A843;
    --video-scrim: linear-gradient(to top, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.52) 52%, rgba(10, 10, 10, 0.1) 100%);
    --video-stage-bg: var(--navy);
  }

  * { box-sizing: border-box; }

  [hidden] { display: none !important; }

  html {
    background-color: var(--paper);
    color: var(--ink);
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(
      120% 70% at 50% 0%,
      rgba(255, 255, 255, 0.96) 0%,
      #F4F6F9 72%
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  :root[data-theme="dark"] body {
    background-color: #0A0A0A; /* solid fallback */
    background-image: radial-gradient(
      ellipse 140% 65% at 50% -15%,
      #221E16 0%,
      #0A0A0A 60%
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  a { color: inherit; }

  header.masthead {
    position: relative;
    padding: 0.95rem 1.25rem 0.95rem;
    display: flex;
    flex-direction: column;
    background: var(--header-bg);
    border: none;
    border-bottom: none;
    transition: background-color 0.2s ease;
  }

  .masthead__top {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
  }

  .masthead__logo {
    position: static;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--header-rule);
    flex-shrink: 0;
  }

  .masthead__actions {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    z-index: 2;
    margin-left: auto;
  }

  .masthead__action-btn,
  .masthead__search-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  @media (hover: hover) {
    .masthead__action-btn:hover,
    .masthead__search-btn:hover {
      background: var(--surface-raised);
      border-color: rgba(10, 10, 10, 0.22);
      color: var(--ink);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    :root[data-theme="dark"] .masthead__action-btn:hover,
    :root[data-theme="dark"] .masthead__search-btn:hover {
      border-color: rgba(248, 250, 252, 0.24);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
  }
  .masthead__action-btn:focus-visible,
  .masthead__search-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .masthead__action-btn:active,
  .masthead__search-btn:active {
    transform: scale(0.94);
    background: var(--surface-raised);
  }
  .masthead__action-btn svg,
  .masthead__search-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
  }

  .masthead__wordmark { height: 42px; width: auto; max-width: calc(100% - 138px); object-fit: contain; }

  .masthead__profile-btn {
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--rule);
    padding: 2px;
  }
  .masthead__profile-btn:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-glow);
  }
  .masthead-profile-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.35), rgba(132, 101, 30, 0.65));
    border-radius: 50%;
  }
  :root[data-theme="dark"] .masthead-profile-avatar {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.45), rgba(10, 10, 10,  0.9));
  }
  .masthead-profile-initials {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .masthead-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  @media (max-width: 400px) {
    .masthead__wordmark { height: 34px; max-width: calc(100% - 132px); }
    .masthead__action-btn, .masthead__search-btn { width: 34px; height: 34px; }
  }

  /* Two wordmark assets, not a CSS filter — the dark variant recolors just
     the "Deep" glyphs to #F8FAFC (extracted and repainted from the same
     source PNG, pixel for pixel) while leaving "Advantage" gold untouched,
     which a CSS invert()/hue-rotate() can't reliably reproduce. Swapped
     purely by data-theme, no JS required. */
  .masthead__wordmark--dark { display: none; }
  :root[data-theme="dark"] .masthead__wordmark--light { display: none; }
  :root[data-theme="dark"] .masthead__wordmark--dark { display: block; }

  main {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: var(--nav-clearance);
  }

  .status {
    padding: 2rem 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
  }

  /* --- Home Page: Global Macro Infinite Micro-Card Marquee --- */
  .home-macro-marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0.65rem 1.1rem 0;
    padding: 0.25rem 0;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    contain: paint;
  }
  .home-macro-marquee::-webkit-scrollbar {
    display: none;
  }

  .home-macro-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
  }

  .home-macro-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--paper), transparent);
  }

  .home-macro-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--paper), transparent);
  }

  .home-macro-marquee__track {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: max-content;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
    animation: homeMacroMarqueeDrift 38s linear infinite;
    padding: 2px 0;
  }

  .home-macro-marquee:hover .home-macro-marquee__track,
  .home-macro-marquee:active .home-macro-marquee__track,
  .home-macro-marquee:focus-within .home-macro-marquee__track,
  .home-macro-marquee.is-paused .home-macro-marquee__track {
    animation-play-state: paused;
  }

  @keyframes homeMacroMarqueeDrift {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }

  /* Micro-Card matching the Global Macro cards in Markets */
  .home-macro-card {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 136px;
    min-width: 136px;
    flex-shrink: 0 !important;
    height: 52px;
    padding: 0.42rem 0.62rem;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 12px;
    font-family: var(--sans);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .home-macro-card:hover,
  .home-macro-card:focus-visible {
    transform: translateY(-1.5px);
    border-color: rgba(212, 168, 67, 0.60);
    box-shadow: 0 8px 20px rgba(10, 10, 10, 0.07);
    outline: none;
  }

  :root[data-theme="dark"] .home-macro-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  }

  :root[data-theme="dark"] .home-macro-card:hover,
  :root[data-theme="dark"] .home-macro-card:focus-visible {
    border-color: rgba(212, 168, 67, 0.50);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.14), 0 12px 28px -8px rgba(0, 0, 0, 0.75), 0 0 16px rgba(212, 168, 67, 0.08);
  }

  .home-macro-card:active {
    transform: scale(0.97);
    opacity: 0.88;
  }

  .home-macro-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    line-height: 1;
  }

  .home-macro-card__name {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-macro-card__change {
    font-size: 0.67rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
    line-height: 1;
  }

  .home-macro-card__change--pos {
    color: #059669;
  }

  .home-macro-card__change--neg {
    color: #dc2626;
  }

  :root[data-theme="dark"] .home-macro-card__change--pos {
    color: #34d399;
  }

  :root[data-theme="dark"] .home-macro-card__change--neg {
    color: #f87171;
  }

  .home-macro-card__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    line-height: 1.1;
  }

  .home-macro-card__price {
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .home-macro-card__tag {
    font-size: 0.60rem;
    font-weight: 500;
    color: var(--muted);
    opacity: 0.8;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-macro-marquee__track {
      animation: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }
    .home-macro-marquee__fade {
      display: none;
    }
  }

  @media (max-width: 440px) {
    .home-macro-marquee {
      margin: 0.55rem 0.85rem 0;
      padding: 0.2rem 0;
    }
    .home-macro-marquee__track {
      gap: 0.45rem;
    }
    .home-macro-card {
      width: 126px;
      min-width: 126px;
      flex-shrink: 0;
      height: 49px;
      padding: 0.38rem 0.52rem;
      border-radius: 12px;
    }
    .home-macro-card__name {
      font-size: 0.65rem;
    }
    .home-macro-card__price {
      font-size: 0.77rem;
    }
    .home-macro-card__change {
      font-size: 0.63rem;
    }
  }

  /* Hero — sleek inset-media card built from the latest issue */
  .hero {
    display: block;
    text-decoration: none;
    margin: 1.1rem 1.1rem 0.5rem;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background-color 0.22s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }

  .hero:not(.hero--podcast) {
    display: flex;
    flex-direction: column;
    margin: 1.5rem 1.1rem 0;
    padding: 0.6rem;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.08);
    box-shadow: 0 6px 22px rgba(10, 10, 10,  0.045), 0 1px 3px rgba(10, 10, 10,  0.025);
  }

  :root[data-theme="dark"] .hero:not(.hero--podcast) {
    background: rgba(20, 20, 20,  0.82);
    border-color: rgba(248, 250, 252, 0.11);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  }

  .hero__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-card);
    overflow: hidden;
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .hero:not(.hero--podcast) .hero__image {
    border-radius: var(--r-control);
  }

  .hero__img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero__panel {
    background: transparent;
    color: var(--ink);
    padding: 0.8rem 0.2rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .hero:not(.hero--podcast) .hero__panel {
    padding: 0.85rem 0.55rem 0.45rem;
    gap: 0;
  }

  .hero__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
  }

  .hero__date {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
  }

  .hero:not(.hero--podcast) .hero__date {
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .hero__title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
    margin: 0;
    display: none;
  }

  .hero:not(.hero--podcast) .hero__title {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    text-wrap: balance;
  }

  .hero__excerpt {
    display: none;
  }

  .hero:not(.hero--podcast) .hero__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.48;
    color: var(--muted);
    margin: 0 0 0.75rem 0;
  }

  .hero__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.1rem;
  }

  .card-arrow-prompt {
    display: none !important;
  }

  @media (max-width: 480px) {
    .hero:not(.hero--podcast) {
      margin: 1.35rem 0.95rem 0;
      padding: 0.52rem;
      border-radius: 20px;
    }
    .hero:not(.hero--podcast) .hero__image {
      border-radius: 14px;
    }
    .hero:not(.hero--podcast) .hero__panel {
      padding: 0.75rem 0.45rem 0.38rem;
    }
    .hero:not(.hero--podcast) .hero__excerpt {
      font-size: 0.85rem;
      line-height: 1.44;
      margin-bottom: 0.65rem;
    }
  }

  .hero__cta {
    display: none;
  }

  .hero__cta-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }

  /* List — mirrors the site's "Recent posts" rows */
  .issue-list { list-style: none; margin: 0; padding: 0; }

  #issue-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    margin: 0 1.1rem;
    padding: 0;
    border-top: none;
    position: relative;
  }

  @media (max-width: 480px) {
    #issue-list {
      margin: 0 0.95rem;
      padding: 0;
      gap: 0.68rem;
    }
  }

  #issue-list > li {
    position: relative;
    z-index: 3;
  }

  #issue-list > li.is-deck-hidden {
    display: none;
  }

  #issue-list.is-deck-expanded > li.is-deck-hidden {
    display: block;
    animation: deckCardReveal 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes deckCardReveal {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #issue-list.is-deck-expanded > li.is-deck-hidden {
      animation: none;
    }
  }

  /* Stacked Deck Peek underneath the 3rd card (matches reference image) */
  .issue-deck-peek-item {
    list-style: none;
    margin-top: -0.72rem;
    position: relative;
    z-index: 2;
  }

  @media (max-width: 480px) {
    .issue-deck-peek-item {
      margin-top: -0.68rem;
    }
  }

  .issue-deck-peek {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    font-family: var(--sans);
  }

  .issue-deck-peek:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 16px;
  }

  .issue-deck-peek__layer-1 {
    width: calc(100% - 22px);
    height: 13px;
    background: var(--surface);
    border: 1px solid rgba(10, 10, 10, 0.09);
    border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 14px rgba(10, 10, 10, 0.045);
    position: relative;
    z-index: 2;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  }

  :root[data-theme="dark"] .issue-deck-peek__layer-1 {
    background: var(--surface);
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
  }

  .issue-deck-peek__layer-2 {
    width: calc(100% - 46px);
    height: 11px;
    margin-top: -1px;
    background: var(--surface);
    border: 1px solid rgba(10, 10, 10, 0.07);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 6px 12px rgba(10, 10, 10, 0.035);
    opacity: 0.78;
    position: relative;
    z-index: 1;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, opacity 0.2s ease;
  }

  :root[data-theme="dark"] .issue-deck-peek__layer-2 {
    background: var(--surface);
    border-color: rgba(248, 250, 252, 0.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38);
  }

  .issue-deck-peek:hover .issue-deck-peek__layer-1 {
    transform: translateY(2px);
    border-color: var(--gold);
  }

  .issue-deck-peek:hover .issue-deck-peek__layer-2 {
    transform: translateY(4px);
    opacity: 0.95;
  }

  .issue {
    display: block;
    text-decoration: none;
    padding: 1.35rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
  }

  .issue__row { display: flex; gap: 1rem; align-items: flex-start; }
  .issue__body { flex: 1; min-width: 0; }

  .hero__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
  }

  .issue__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    gap: 0.5rem;
  }

  .card-bookmark-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border-radius: 6px;
    transition: color 0.18s ease, transform 0.15s ease, background-color 0.18s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .card-bookmark-btn:hover {
    color: var(--ink);
    background-color: rgba(10, 10, 10,  0.05);
  }
  :root[data-theme="dark"] .card-bookmark-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .card-bookmark-btn.is-bookmarked {
    color: var(--gold);
  }
  :root[data-theme="dark"] .card-bookmark-btn.is-bookmarked {
    color: var(--gold-decorative);
  }
  .card-bookmark-btn:active {
    transform: scale(0.92);
  }
  .card-bookmark-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }

  .reader-panel__bookmark-btn {
    color: var(--muted);
    transition: color 0.18s ease, transform 0.15s ease;
  }
  .reader-panel__bookmark-btn.is-bookmarked {
    color: var(--gold);
  }
  :root[data-theme="dark"] .reader-panel__bookmark-btn.is-bookmarked {
    color: var(--gold-decorative);
  }
  .reader-panel__bookmark-btn:active {
    transform: scale(0.92);
  }

  .bookmarks-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(132, 101, 30, 0.12);
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
  }
  :root[data-theme="dark"] .bookmarks-count-pill {
    background: rgba(212, 168, 67, 0.18);
    color: var(--gold-decorative);
  }

  /* Bookmarks Filter Tabs (All, Articles, Markets, Episodes) */
  .bookmarks-filter-bar {
    display: flex;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-warm, rgba(0, 0, 0, 0.02));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .bookmarks-filter-bar::-webkit-scrollbar {
    display: none;
  }
  .bookmarks-tabs-chevron {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface, #FFFFFF);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.06);
    transition: all 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bookmarks-tabs-chevron:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    transform: scale(1.05);
  }
  .bookmarks-tabs-chevron:active:not(:disabled) {
    transform: scale(0.94);
  }
  .bookmarks-tabs-chevron:disabled {
    opacity: 0.32;
    cursor: default;
    box-shadow: none;
  }
  :root[data-theme="dark"] .bookmarks-tabs-chevron {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #F8FAFC;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  }
  @media (min-width: 640px) {
    .bookmarks-tabs-chevron {
      display: none;
    }
  }
  .bookmarks-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .bookmarks-filter-tab:hover {
    color: var(--ink);
    border-color: var(--ink);
  }
  .bookmarks-filter-tab:active {
    transform: scale(0.96);
  }
  .bookmarks-filter-tab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  .bookmarks-filter-tab.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  :root[data-theme="dark"] .bookmarks-filter-tab {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--muted);
  }
  :root[data-theme="dark"] .bookmarks-filter-tab:hover {
    color: var(--ink);
    border-color: var(--gold);
  }
  :root[data-theme="dark"] .bookmarks-filter-tab.is-active {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
    box-shadow: 0 1px 8px rgba(212, 168, 67, 0.25);
  }
  .bookmarks-filter-tab__count {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.18);
    color: inherit;
    line-height: 1.2;
    font-weight: 600;
  }
  .bookmarks-filter-tab.is-active .bookmarks-filter-tab__count {
    background: rgba(255, 255, 255, 0.24);
    color: var(--paper);
  }
  :root[data-theme="dark"] .bookmarks-filter-tab.is-active .bookmarks-filter-tab__count {
    background: rgba(10, 10, 10,  0.22);
    color: #0A0A0A;
    font-weight: 700;
  }

  /* Tactile Bookmark Micro-Bounce Animation */
  @keyframes bookmarkPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.24); }
    100% { transform: scale(1); }
  }
  .card-bookmark-btn.is-bookmarked svg {
    animation: bookmarkPop 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* Market News Card Bookmark Buttons */
  .markets-news-bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    border-radius: 999px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    z-index: 3;
    position: relative;
    flex-shrink: 0;
  }
  .markets-news-bookmark-btn::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
  }
  /* Floating Frosted Glass for Grid View */
  .markets-news-bookmark-btn--floating {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(10, 10, 10,  0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--muted);
  }
  :root[data-theme="dark"] .markets-news-bookmark-btn--floating {
    background: rgba(10, 10, 10,  0.76);
    border: 1px solid rgba(212, 168, 67, 0.26);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    color: var(--muted);
  }
  .markets-news-bookmark-btn--floating:hover {
    color: var(--ink);
    transform: scale(1.06);
  }
  .markets-news-bookmark-btn--floating.is-bookmarked {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.96);
  }
  :root[data-theme="dark"] .markets-news-bookmark-btn--floating.is-bookmarked {
    color: var(--gold-decorative);
    border-color: rgba(212, 168, 67, 0.55);
    background: rgba(10, 10, 10,  0.88);
  }
  /* Inline subtle button for List View */
  .markets-news-bookmark-btn--inline {
    width: 28px;
    height: 28px;
    color: var(--muted);
    border-radius: 6px;
  }
  .markets-news-bookmark-btn--inline:hover {
    background: rgba(10, 10, 10,  0.05);
    color: var(--ink);
  }
  :root[data-theme="dark"] .markets-news-bookmark-btn--inline:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .markets-icon-btn.is-bookmarked {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
  }
  :root[data-theme="dark"] .markets-icon-btn.is-bookmarked {
    color: var(--gold-decorative);
    border-color: rgba(212, 168, 67, 0.45);
    background: rgba(212, 168, 67, 0.16);
  }

  .issue__podcast-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    margin-bottom: 0.35rem;
  }

  /* Podcast Player Modern Sleek Layout & Liquid Glass Controls */
  #podcast-overlay > .reader-panel {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  #podcast-detail-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    height: auto;
    max-height: none;
    z-index: 28;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 50% 24%, rgba(212, 168, 67, 0.16) 0%, rgba(212, 168, 67, 0.05) 38%, transparent 68%),
      radial-gradient(circle at 82% 84%, rgba(10, 10, 10,  0.06) 0%, transparent 55%),
      var(--paper);
    overflow: hidden;
  }
  #podcast-detail-view[hidden] {
    display: none !important;
  }
  :root[data-theme="dark"] #podcast-detail-view {
    background:
      radial-gradient(circle at 50% 24%, rgba(212, 168, 67, 0.20) 0%, rgba(212, 168, 67, 0.06) 40%, transparent 70%),
      radial-gradient(circle at 18% 82%, rgba(212, 168, 67, 0.08) 0%, transparent 60%),
      linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
  }
  /* Full-width scroll container so desktop never shows a scrollbar line in the middle of the screen,
     while inner sections stay centered at max-width: 430px and scroll smoothly on both desktop & mobile */
  #podcast-cover-mode {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.65rem 1.25rem 0.9rem;
    gap: clamp(0.45rem, 1.4dvh, 0.85rem);
  }
  #podcast-cover-mode > .podcast-np-header,
  #podcast-cover-mode > .podcast-track-meta-row,
  #podcast-cover-mode > .podcast-player__scrub,
  #podcast-cover-mode > .podcast-player__controls,
  #podcast-cover-mode > .podcast-glass-dock {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  #podcast-cover-mode[hidden] {
    display: none !important;
  }
  .podcast-np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.1rem 0;
    flex-shrink: 0;
  }
  .podcast-np-header .reader-panel__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.26) 100%);
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  :root[data-theme="dark"] .podcast-np-header .reader-panel__close {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 1px 1.5px rgba(255, 255, 255, 0.28);
  }
  .podcast-np-header__center {
    text-align: center;
    min-width: 0;
    flex: 1;
    padding: 0 0.5rem;
  }
  .podcast-np-header__title {
    font-family: var(--sans);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0;
    line-height: 1.2;
  }
  /* Large Podcast Thumbnail with Liquid Glass Pedestal & Specular Lens Effect */
  .podcast-media-stage {
    position: relative;
    width: 100%;
    max-width: min(272px, 70vw, 31.5dvh);
    aspect-ratio: 1 / 1;
    margin: 0.35rem auto 0.55rem;
    padding: 10px;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.28) 48%, rgba(212, 168, 67, 0.20) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    box-shadow:
      0 24px 50px -12px rgba(10, 10, 10,  0.22),
      0 6px 20px rgba(212, 168, 67, 0.12),
      inset 0 2px 3px rgba(255, 255, 255, 0.95),
      inset 0 -2px 4px rgba(10, 10, 10,  0.08);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    flex-shrink: 0;
    transition: aspect-ratio 0.25s ease, max-width 0.25s ease;
  }
  :root[data-theme="dark"] .podcast-media-stage {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(212, 168, 67, 0.16) 100%);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
      0 28px 58px -10px rgba(0, 0, 0, 0.65),
      0 0 38px rgba(212, 168, 67, 0.14),
      inset 0 2px 3px rgba(255, 255, 255, 0.42),
      inset 0 -2px 5px rgba(0, 0, 0, 0.45);
  }
  /* Liquid glass glossy lens reflection over the thumbnail */
  .podcast-media-stage::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.08) 26%,
      transparent 50%,
      rgba(255, 255, 255, 0.05) 86%,
      rgba(212, 168, 67, 0.14) 100%
    );
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 255, 0.60),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .podcast-media-stage.is-video-mode {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    padding: 6px;
    border-radius: 24px;
  }
  .podcast-media-stage.is-video-mode::after {
    display: none;
  }
  #podcast-player-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 22px;
  }
  #podcast-player-art[hidden],
  #podcast-video[hidden],
  #podcast-video-fs-btn[hidden] {
    display: none !important;
  }
  #podcast-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    border-radius: 18px;
  }
  .podcast-video-fs-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(10, 10, 10,  0.65);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .podcast-track-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
    flex-shrink: 0;
  }
  .podcast-track-meta-text {
    min-width: 0;
    flex: 1;
  }
  #podcast-player-title {
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin: 0 0 0.22rem;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #podcast-player-author {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .podcast-glass-circle-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1.2px solid rgba(255, 255, 255, 0.82);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.26) 100%);
    box-shadow:
      0 8px 20px rgba(10, 10, 10,  0.09),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.92);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  :root[data-theme="dark"] .podcast-glass-circle-btn {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.42),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.32);
  }
  .podcast-glass-circle-btn:active {
    transform: scale(0.92);
  }
  .podcast-glass-circle-btn.is-bookmarked {
    color: var(--gold-decorative);
    border-color: rgba(212, 168, 67, 0.55);
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.26) 0%, rgba(212, 168, 67, 0.08) 100%);
  }
  .podcast-player__scrub {
    width: 100%;
    margin: 0.1rem 0;
    flex-shrink: 0;
  }
  .podcast-player__range {
    --podcast-track-rest: rgba(10, 10, 10,  0.14);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--gold-decorative) 0%, var(--gold-decorative) 0%, var(--podcast-track-rest) 0%, var(--podcast-track-rest) 100%);
    outline: none;
    cursor: pointer;
    margin: 0;
    display: block;
  }
  :root[data-theme="dark"] .podcast-player__range {
    --podcast-track-rest: rgba(248, 250, 252, 0.18);
  }
  .podcast-player__range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: transparent;
  }
  .podcast-player__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold-decorative);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22), 0 2px 6px rgba(0, 0, 0, 0.32);
    margin-top: -5px;
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .podcast-player__range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
  }
  .podcast-player__range::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: transparent;
  }
  .podcast-player__range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold-decorative);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22), 0 2px 6px rgba(0, 0, 0, 0.32);
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .podcast-player__times {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .podcast-player__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0.1rem 0;
    padding: 0 0.15rem;
    flex-shrink: 0;
  }
  #podcast-play-btn {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    max-width: 68px;
    max-height: 68px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--paper);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 12px 28px rgba(10, 10, 10,  0.24);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.25s ease;
  }
  :root[data-theme="dark"] #podcast-play-btn {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), 0 0 24px rgba(248, 250, 252, 0.14);
  }
  #podcast-play-btn:active {
    transform: scale(0.93);
  }
  #podcast-play-icon,
  #podcast-pause-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
  }
  #podcast-play-btn.is-playing #podcast-play-icon,
  #podcast-play-btn:not(.is-playing) #podcast-pause-icon,
  #podcast-play-btn-mini.is-playing #podcast-play-icon-mini,
  #podcast-play-btn-mini:not(.is-playing) #podcast-pause-icon-mini,
  #podcast-play-icon[hidden],
  #podcast-pause-icon[hidden],
  #podcast-play-icon-mini[hidden],
  #podcast-pause-icon-mini[hidden] {
    display: none !important;
  }
  #podcast-play-btn:not(.is-playing) #podcast-play-icon,
  #podcast-play-btn.is-playing #podcast-pause-icon,
  #podcast-play-btn-mini:not(.is-playing) #podcast-play-icon-mini,
  #podcast-play-btn-mini.is-playing #podcast-pause-icon-mini {
    display: block !important;
  }
  #podcast-play-icon {
    margin-left: 3px;
  }
  #podcast-play-btn-mini {
    position: relative;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--paper);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.25s ease;
  }
  #podcast-play-icon-mini,
  #podcast-pause-icon-mini {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  #podcast-play-icon-mini {
    margin-left: 2px;
  }
  .podcast-transport-side-btn,
  .podcast-player__skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }
  .podcast-transport-side-btn:active,
  .podcast-player__skip:active {
    transform: scale(0.9);
  }
  .podcast-transport-side-btn.is-active {
    color: var(--gold-decorative);
  }
  .podcast-transport-side-btn.is-active::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-decorative);
  }
  /* Noticeable Liquid Frosted Glass 3-Icon Bottom Dock */
  .podcast-glass-dock {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 58px;
    padding: 0 0.65rem;
    border-radius: 22px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(255, 255, 255, 0.34) 52%,
      rgba(212, 168, 67, 0.14) 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    box-shadow:
      0 14px 32px rgba(10, 10, 10,  0.10),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px rgba(10, 10, 10,  0.05);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .podcast-glass-dock {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.05) 52%,
      rgba(212, 168, 67, 0.10) 100%
    );
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.46),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.30),
      inset 0 -1px 2px rgba(0, 0, 0, 0.35);
  }
  .podcast-dock-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    border-radius: 15px;
    border: none;
    background: transparent;
    color: var(--ink);
    opacity: 0.78;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .podcast-dock-btn:hover,
  .podcast-dock-btn.is-active {
    opacity: 1;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.32);
  }
  :root[data-theme="dark"] .podcast-dock-btn:hover,
  :root[data-theme="dark"] .podcast-dock-btn.is-active {
    background: rgba(255, 255, 255, 0.10);
  }
  .podcast-dock-btn.is-downloaded {
    opacity: 1;
    color: var(--gold-decorative);
  }
  .podcast-dock-btn.is-downloading {
    opacity: 1;
    color: var(--gold-decorative);
    animation: pulse 1.2s infinite ease-in-out;
  }
  .podcast-dock-btn:active {
    transform: scale(0.92);
  }
  .podcast-dock-dot {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-decorative);
  }
  .podcast-dock-dot[hidden],
  #podcast-download-icon[hidden],
  #podcast-downloaded-icon[hidden] {
    display: none !important;
  }
  .podcast-queue-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    max-height: 68%;
    display: flex;
    flex-direction: column;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(160deg, rgba(248, 245, 238, 0.94) 0%, rgba(248, 250, 252, 0.90) 100%);
    border-top: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 -16px 44px rgba(10, 10, 10,  0.18), inset 0 1.5px 2px rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    padding: 1rem 1.25rem 1.25rem;
  }
  :root[data-theme="dark"] .podcast-queue-sheet {
    background: linear-gradient(160deg, rgba(20, 20, 20,  0.92) 0%, rgba(10, 10, 10,  0.94) 100%);
    border-top-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.68), inset 0 1.5px 2px rgba(255, 255, 255, 0.25);
  }
  .podcast-queue-sheet[hidden] {
    display: none !important;
  }
  .podcast-queue-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.7rem;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .podcast-queue-item:hover {
    background: rgba(212, 168, 67, 0.08);
  }
  .podcast-queue-item.is-current {
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.28);
  }

  @media (min-width: 768px) {
    #podcast-cover-mode {
      padding: 1rem 1.5rem 1.15rem;
      gap: 0.85rem;
    }
    .podcast-media-stage:not(.is-video-mode) {
      max-width: min(320px, 36dvh);
    }
  }

  .bookmarks-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 380px;
  }
  .bookmarks-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(132, 101, 30, 0.08);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }
  :root[data-theme="dark"] .bookmarks-empty-icon {
    background: rgba(212, 168, 67, 0.14);
    color: var(--gold-decorative);
  }
  .bookmarks-empty-title {
    font-family: var(--sans);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.5rem;
  }
  .bookmarks-empty-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 1.5rem;
  }
  .bookmarks-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  :root[data-theme="dark"] .bookmarks-explore-btn {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  .bookmarks-explore-btn:hover {
    opacity: 0.92;
  }
  .bookmarks-explore-btn:active {
    transform: scale(0.97);
  }

  .issue__title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.03rem;
    line-height: 1.28;
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
    color: var(--ink);
  }

  .issue__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 0.55rem 0;
  }

  @media (max-width: 640px) {
    #issue-list .issue__excerpt,
    .issue-list .issue__excerpt,
    .issue__excerpt {
      font-size: calc(0.88rem - 3pt) !important;
      line-height: 1.45 !important;
    }
  }

  .issue__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .issue__thumb {
    width: 72px;
    height: 54px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-control);
    flex-shrink: 0;
    background: var(--surface-2);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .install-banner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.9rem 1.25rem 0;
    padding: 0.75rem 1rem;
    background: var(--install-bg);
    border: 1px solid var(--install-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--ink);
  }

  .install-banner__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .install-banner__text { flex: 1; line-height: 1.4; }

  .install-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  :root[data-theme="dark"] .install-progress {
    background: rgba(255, 255, 255, 0.12);
  }

  .install-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--gold-decorative);
  }

  .install-banner__install {
    background: var(--gold-decorative);
    color: var(--navy);
    border: none;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s ease;
  }
  .install-banner__install:hover {
    filter: brightness(1.08);
  }

  .install-banner__dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
    flex-shrink: 0;
  }

  .issue:focus-visible,
  .hero:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* Desktop hover lift effect for hero banner and issue cards */
  @media (hover: hover), (min-width: 768px) {
    .hero:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(10, 10, 10,  0.09);
    }
    :root[data-theme="dark"] .hero:hover {
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    }
    .hero:active {
      transform: translateY(-1px);
    }

    .issue:hover {
      transform: translateY(-2px);
      z-index: 1;
    }
    .issue:active {
      transform: translateY(0);
    }
    #issue-list .issue:hover {
      background-color: rgba(10, 10, 10,  0.025);
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(10, 10, 10,  0.04);
    }
    :root[data-theme="dark"] #issue-list .issue:hover {
      background-color: rgba(255, 255, 255, 0.035);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .hero:hover,
    .issue:hover {
      animation: none;
    }

    .home-podcast-card:hover {
      transform: translateY(-3px);
      border-color: rgba(10, 10, 10,  0.2);
      box-shadow: 0 10px 28px rgba(10, 10, 10,  0.08);
    }

    :root[data-theme="dark"] .home-podcast-card:hover {
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    }

    .home-podcast-card:hover .home-podcast-card__art {
      transform: scale(1.04);
    }

    .home-podcast-card:hover .home-podcast-card__play-btn {
      transform: scale(1.03);
    }

    .home-podcast-card:hover .home-podcast-card__play-icon {
      transform: translateX(1px);
    }

    .home-podcast-card:active {
      transform: translateY(-1px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero,
    .issue,
    .home-podcast-card,
    .home-podcast-card__art,
    .home-podcast-card__play-btn,
    .home-podcast-card__play-icon {
      transition: none;
    }
    .hero:hover,
    .issue:hover,
    .hero:active,
    .issue:active,
    .home-podcast-card:hover,
    .home-podcast-card:active {
      transform: none;
    }
  }

  /* --- Home Page: Latest Episodes Horizontal Peek Carousel --- */
  .home-podcast {
    margin: 2.85rem 0 0;
  }

  .home-podcast__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0 1.15rem;
  }

  @media (max-width: 480px) {
    .home-podcast {
      margin: 2.5rem 0 0;
    }
    .home-podcast__header {
      padding: 0 1rem;
    }
  }

  .home-podcast__heading {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(0.95rem, 3.7vw, 1.02rem);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  @media (max-width: 480px) {
    .home-podcast__heading {
      font-size: 0.95rem;
    }
  }

  .home-podcast__wave {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    height: 14px;
    vertical-align: middle;
  }

  .home-podcast__wave span {
    width: 2.5px;
    border-radius: 2px;
    background: var(--gold);
    display: inline-block;
  }

  .home-podcast__wave span:nth-child(1) { height: 6px; }
  .home-podcast__wave span:nth-child(2) { height: 13px; }
  .home-podcast__wave span:nth-child(3) { height: 8px; }
  .home-podcast__wave span:nth-child(4) { height: 14px; }
  .home-podcast__wave span:nth-child(5) { height: 7px; }

  .home-podcast-carousel {
    display: flex;
    align-items: stretch;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.1rem;
    padding: 0.2rem 1.1rem 0.65rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home-podcast-carousel::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 480px) {
    .home-podcast-carousel {
      gap: 0.8rem;
      scroll-padding-left: 0.95rem;
      padding: 0.15rem 0.95rem 0.55rem;
    }
  }

  .home-podcast-slide-card,
  :root[data-theme="dark"] .home-podcast-slide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 80%;
    width: 80%;
    max-width: 330px;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0.72rem 0.72rem 0.92rem;
    border-radius: 22px;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    color: #0A0A0A;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 6px 22px rgba(10, 10, 10,  0.045), 0 1px 3px rgba(10, 10, 10,  0.025);
    contain: layout paint;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
  }

  :root[data-theme="dark"] .home-podcast-slide-card {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  }

  @media (hover: hover) {
    .home-podcast-slide-card:hover {
      transform: translateY(-3px);
      border-color: rgba(132, 101, 30, 0.32);
      box-shadow: 0 12px 28px rgba(10, 10, 10,  0.085), 0 2px 6px rgba(10, 10, 10,  0.04);
    }
    :root[data-theme="dark"] .home-podcast-slide-card:hover {
      border-color: rgba(212, 168, 67, 0.42);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
    }
    .home-podcast-slide-card:hover .home-podcast-slide__art {
      transform: scale(1.03);
    }
  }

  .home-podcast-slide-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  #podcast-hero-wrap {
    margin: 0 0 1.05rem;
  }

  #podcast-hero-slot {
    width: 100%;
  }

  .home-podcast-slide-card--hero,
  :root[data-theme="dark"] .home-podcast-slide-card--hero {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    padding: 0.62rem 0.65rem 0.78rem;
    border-radius: 20px;
    margin: 0;
  }

  .home-podcast-slide-card--hero .home-podcast-slide__eyebrow {
    margin-bottom: 0.2rem;
  }

  .home-podcast-slide-card--hero .home-podcast-slide__title {
    font-size: 1.02rem;
    margin-bottom: 0.46rem;
  }

  .home-podcast-slide-card--hero .home-podcast-slide__bookmark,
  :root[data-theme="dark"] .home-podcast-slide-card--hero .home-podcast-slide__bookmark {
    top: 0.95rem;
    right: 0.95rem;
    width: 34px;
    height: 34px;
  }

  @media (max-width: 480px) {
    .home-podcast-slide-card,
    :root[data-theme="dark"] .home-podcast-slide-card {
      flex: 0 0 83%;
      width: 83%;
      max-width: none;
      min-height: 0;
      aspect-ratio: auto;
      padding: 0.65rem 0.65rem 0.85rem;
      border-radius: 20px;
    }
    .home-podcast-slide-card--hero,
    :root[data-theme="dark"] .home-podcast-slide-card--hero {
      flex: none;
      width: 100%;
      max-width: 100%;
      aspect-ratio: auto;
      min-height: 0;
      max-height: none;
      padding: 0.58rem 0.6rem 0.72rem;
      border-radius: 18px;
    }
    .home-podcast-slide-card--hero .home-podcast-slide__title {
      font-size: 0.96rem;
      margin-bottom: 0.42rem;
    }
  }

  /* 2-Column Clean Pedestal Card for All Episodes Grid View (Zero Glass Blur for 60fps Scroll) */
  .home-podcast-slide-card--grid,
  :root[data-theme="dark"] .home-podcast-slide-card--grid {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0.6rem 0.6rem 0.78rem;
    border-radius: 18px;
    margin: 0;
    color: #0A0A0A;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 6px 22px rgba(10, 10, 10,  0.045), 0 1px 3px rgba(10, 10, 10,  0.025);
    contain: layout paint;
  }

  :root[data-theme="dark"] .home-podcast-slide-card--grid {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  }

  .home-podcast-slide-card--grid .home-podcast-slide__art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    margin-bottom: 0.62rem;
    flex-shrink: 0;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__bookmark,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__bookmark {
    top: 0.95rem;
    right: 0.95rem;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(10, 10, 10,  0.15) !important;
    color: #0A0A0A !important;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__bookmark:hover,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__bookmark:hover,
  .home-podcast-slide-card--grid .home-podcast-slide__bookmark.is-bookmarked,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__bookmark.is-bookmarked {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(10, 10, 10,  0.26) !important;
    color: #0A0A0A !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__bookmark svg {
    width: 14px;
    height: 14px;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__glass {
    position: static;
    padding: 0 0.15rem;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__eyebrow,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.22rem;
    color: rgba(10, 10, 10,  0.72) !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__title,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__title {
    font-size: 0.88rem;
    line-height: 1.22;
    margin-bottom: 0.5rem;
    -webkit-line-clamp: 2;
    color: #0A0A0A !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__footer {
    gap: 0.35rem;
    margin-top: auto;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__date,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__date {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(10, 10, 10,  0.72) !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__cta,
  :root[data-theme="dark"] .home-podcast-slide-card--grid .home-podcast-slide__cta {
    padding: 0.24rem 0.54rem;
    font-size: 0.62rem;
    gap: 0.24rem;
    background: rgba(10, 10, 10,  0.07) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(10, 10, 10,  0.18) !important;
    color: #0A0A0A !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }

  .home-podcast-slide-card--grid .home-podcast-slide__cta svg {
    width: 9px;
    height: 9px;
    color: currentColor !important;
    fill: currentColor !important;
  }

  @media (max-width: 420px) {
    .home-podcast-slide-card--grid {
      min-height: 0;
      aspect-ratio: auto;
      padding: 0.52rem 0.52rem 0.68rem;
      border-radius: 16px;
    }
    .home-podcast-slide-card--grid .home-podcast-slide__glass {
      padding: 0 0.1rem;
    }
    .home-podcast-slide-card--grid .home-podcast-slide__title {
      font-size: 0.82rem;
      margin-bottom: 0.44rem;
    }
    .home-podcast-slide-card--grid .home-podcast-slide__eyebrow {
      font-size: 0.55rem;
    }
    .home-podcast-slide-card--grid .home-podcast-slide__date {
      font-size: 0.56rem;
    }
    .home-podcast-slide-card--grid .home-podcast-slide__cta {
      padding: 0.22rem 0.48rem;
      font-size: 0.58rem;
    }
  }

  .home-podcast-slide__art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    margin-bottom: 0.72rem;
    flex-shrink: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-podcast-slide-card--hero .home-podcast-slide__art {
    aspect-ratio: 16 / 8.8;
    max-height: 210px;
    border-radius: 14px;
    margin-bottom: 0.56rem;
  }

  @media (max-width: 480px) {
    .home-podcast-slide-card--hero .home-podcast-slide__art {
      aspect-ratio: 16 / 8.8;
      max-height: 178px;
      border-radius: 13px;
      margin-bottom: 0.52rem;
    }
  }

  /* Top-right Clean Squircle Bookmark Button (Zero Glass Blur) */
  .home-podcast-slide__bookmark,
  :root[data-theme="dark"] .home-podcast-slide__bookmark {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(10, 10, 10,  0.15) !important;
    color: #0A0A0A !important;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .home-podcast-slide__bookmark:hover,
  :root[data-theme="dark"] .home-podcast-slide__bookmark:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(10, 10, 10,  0.26) !important;
    color: #0A0A0A !important;
    transform: scale(1.05);
  }

  .home-podcast-slide__bookmark.is-bookmarked,
  :root[data-theme="dark"] .home-podcast-slide__bookmark.is-bookmarked {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(132, 101, 30, 0.38) !important;
    color: #0A0A0A !important;
  }

  /* Bottom Clean Pedestal Content Panel (Zero Glass Blur) */
  .home-podcast-slide__glass {
    position: static;
    padding: 0 0.2rem;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .home-podcast-slide__eyebrow,
  :root[data-theme="dark"] .home-podcast-slide__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(10, 10, 10,  0.72) !important;
    margin-bottom: 0.3rem;
    transition: color 0.2s ease;
  }

  .home-podcast-slide__title,
  :root[data-theme="dark"] .home-podcast-slide__title {
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.2;
    color: #0A0A0A !important;
    margin: 0 0 0.72rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
  }

  .home-podcast-slide__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
  }

  .home-podcast-slide__date,
  :root[data-theme="dark"] .home-podcast-slide__date {
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(10, 10, 10,  0.72) !important;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .home-podcast-slide__cta,
  :root[data-theme="dark"] .home-podcast-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.07) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(10, 10, 10,  0.18) !important;
    color: #0A0A0A !important;
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .home-podcast-slide-card:hover .home-podcast-slide__cta {
    background: rgba(10, 10, 10,  0.12) !important;
    border-color: rgba(10, 10, 10,  0.28) !important;
    transform: scale(1.02);
  }

  .home-podcast-slide__cta svg {
    width: 11px;
    height: 11px;
    color: currentColor !important;
    fill: currentColor !important;
    flex-shrink: 0;
  }

  @media (max-width: 420px) {
    .home-podcast-slide__glass {
      padding: 0 0.15rem;
    }
    .home-podcast-slide__title {
      font-size: 1rem;
      margin-bottom: 0.62rem;
    }
    .home-podcast-slide__eyebrow {
      font-size: 0.64rem;
    }
    .home-podcast-slide__date {
      font-size: 0.69rem;
    }
    .home-podcast-slide__cta {
      padding: 0.3rem 0.68rem;
      font-size: 0.7rem;
    }
  }

  /* Carousel Pagination Indicator Dots */
  .home-podcast-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    margin-top: 0.35rem;
  }

  .home-podcast-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(10, 10, 10,  0.18);
    cursor: pointer;
    transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  :root[data-theme="dark"] .home-podcast-dot {
    background: rgba(255, 255, 255, 0.22);
  }

  .home-podcast-dot.is-active {
    width: 16px;
    background: var(--gold);
  }

  :root[data-theme="dark"] .home-podcast-dot.is-active {
    background: var(--gold-decorative);
  }

  .home-podcast-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 18px;
    padding: 0.68rem 0.9rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(10, 10, 10,  0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s ease,
                background-color 0.22s ease;
    cursor: pointer;
  }

  :root[data-theme="dark"] .home-podcast-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(20, 20, 20,  0.78) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  @media (hover: hover) {
    .home-podcast-card:hover {
      transform: translateY(-2px);
      border-color: rgba(132, 101, 30, 0.32);
      box-shadow: 0 12px 28px rgba(10, 10, 10,  0.085), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }
    :root[data-theme="dark"] .home-podcast-card:hover {
      border-color: rgba(212, 168, 67, 0.42);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
  }

  .home-podcast-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .home-podcast-card__art-wrap {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0A0A0A 0%, #242424 100%);
    box-shadow: 0 3px 10px rgba(10, 10, 10,  0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :root[data-theme="dark"] .home-podcast-card__art-wrap {
    background: linear-gradient(135deg, #0A0A0A 0%, #171717 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .home-podcast-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-podcast-card:hover .home-podcast-card__art {
    transform: scale(1.05);
  }

  .home-podcast-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.26rem;
  }

  .home-podcast-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.36rem;
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    margin: 0;
  }

  .home-podcast-card__date {
    letter-spacing: 0.02em;
  }

  .home-podcast-card__dot {
    opacity: 0.45;
    font-size: 0.65rem;
  }

  .home-podcast-card__title {
    font-family: var(--serif);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.22;
    margin: 0;
    min-width: 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
  }

  /* Vertically Centered Right-Side Modern Circular Play/Pause Button */
  .home-podcast-card__circle-play {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.2px solid rgba(10, 10, 10,  0.12);
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    color: var(--ink);
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.92);
    cursor: pointer;
    padding: 0;
    z-index: 3;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease;
  }
  :root[data-theme="dark"] .home-podcast-card__circle-play {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #F4F0E8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36), inset 0 1px 1.5px rgba(255, 255, 255, 0.24);
  }
  .home-podcast-card__circle-play:hover {
    transform: scale(1.06);
    border-color: var(--gold);
  }
  .home-podcast-card__circle-play:active {
    transform: scale(0.93);
  }
  .home-podcast-card--in-progress .home-podcast-card__circle-play {
    border-color: rgba(212, 168, 67, 0.52);
  }
  .home-podcast-card__circle-play .icon-play {
    display: block;
    transform: translateX(1px);
  }
  .home-podcast-card__circle-play .icon-pause {
    display: none;
  }
  .home-podcast-card.is-active-playing .home-podcast-card__circle-play {
    background: var(--gold-decorative);
    border-color: var(--gold-decorative);
    color: #0A0A0A;
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.36);
  }
  .home-podcast-card.is-active-playing .home-podcast-card__circle-play .icon-play {
    display: none;
  }
  .home-podcast-card.is-active-playing .home-podcast-card__circle-play .icon-pause {
    display: block;
  }

  .home-podcast-card__badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Responsive tuning for small phones */
  @media (max-width: 420px) {
    .home-podcast-card {
      padding: 0.62rem 0.78rem;
      gap: 0.72rem;
      border-radius: 16px;
    }
    .home-podcast-card__art-wrap {
      width: 60px;
      height: 60px;
      border-radius: 11px;
    }
    .home-podcast-card__title {
      font-size: 0.88rem;
      line-height: 1.24;
      margin: 0;
    }
    .home-podcast-card__meta {
      font-size: 0.66rem;
      margin: 0;
    }
    .home-podcast-card__circle-play {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
    }
  }

  /* --- Home Page: Market News Infinite Slideshow --- */
  .home-market-news {
    margin: 2.85rem 1.1rem 2.75rem;
  }

  .home-market-news__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding: 0 0.15rem;
  }

  .home-market-news__heading {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(0.95rem, 3.7vw, 1.02rem);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  @media (max-width: 480px) {
    .home-market-news__heading {
      font-size: 0.95rem;
    }
  }

  .home-market-news__pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: newsLivePulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    display: inline-block;
    flex-shrink: 0;
  }

  @keyframes newsLivePulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }

  /* Card deck container */
  .home-market-news-card {
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(10, 10, 10,  0.045), 0 1px 2px rgba(10, 10, 10,  0.02);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
  }

  :root[data-theme="dark"] .home-market-news-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  /* Viewport and slide track */
  .home-news-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
  }

  .home-news-track {
    display: flex;
    width: 100%;
    transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  /* Single-story slide matching the main Market News list card */
  .home-news-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.95rem 1.05rem 0.85rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.16s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .home-news-slide:hover,
  .home-news-slide:focus-visible {
    background: rgba(132, 101, 30, 0.04);
    outline: none;
  }

  :root[data-theme="dark"] .home-news-slide:hover,
  :root[data-theme="dark"] .home-news-slide:focus-visible {
    background: rgba(212, 168, 67, 0.05);
  }

  .home-news-slide:active {
    background: rgba(132, 101, 30, 0.08);
  }

  .home-news-slide__main-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
  }

  /* Left body column */
  .home-news-slide__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* Top metadata row */
  .home-news-slide__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    line-height: 1;
    margin-bottom: 0.20rem;
  }

  @media (min-width: 640px) {
    .home-news-slide__meta {
      margin-bottom: 0.47rem;
    }
  }

  .home-news-slide__left-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-news-slide__source {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .home-news-slide__bullet {
    color: var(--muted);
    opacity: 0.5;
    font-size: 0.62rem;
  }

  .home-news-slide__time {
    color: var(--muted);
    white-space: nowrap;
    font-size: 0.68rem;
  }

  /* Headline */
  .home-news-slide__title {
    margin: 0 0 0.50rem;
    font-family: var(--sans);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.34;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
  }

  .home-news-slide:hover .home-news-slide__title {
    color: var(--gold);
  }

  /* Summary snippet */
  .home-news-slide__summary {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.44;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Card footer row: CTA & Bookmark */
  .home-news-slide__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.45rem;
    padding-top: 0;
  }

  @media (min-width: 640px) {
    .home-news-slide__footer {
      margin-top: 0.60rem;
    }
  }

  .home-news-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold);
    transition: transform 0.18s ease;
  }

  .home-news-slide:hover .home-news-slide__cta svg {
    transform: translateX(3px);
  }

  .home-news-slide__cta svg {
    transition: transform 0.18s ease;
  }

  /* Right-anchored thumbnail */
  .home-news-slide__thumb-wrap {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 1px solid var(--rule);
    background: var(--surface-raised);
    box-shadow: 0 1px 4px rgba(10, 10, 10,  0.04);
  }

  :root[data-theme="dark"] .home-news-slide__thumb-wrap {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
  }

  .home-news-slide__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
  }

  .home-news-slide:hover .home-news-slide__thumb {
    transform: scale(1.05);
  }

  .home-news-slide__thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--sans);
    letter-spacing: 0.04em;
    color: var(--gold);
    background: rgba(132, 101, 30, 0.08);
  }

  :root[data-theme="dark"] .home-news-slide__thumb-fallback {
    background: rgba(212, 168, 67, 0.1);
  }

  /* Slideshow Footer Controls Bar */
  .home-news-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.58rem 1.15rem;
    background: rgba(10, 10, 10,  0.02);
    border-top: 1px solid var(--rule);
  }

  :root[data-theme="dark"] .home-news-controls {
    background: rgba(255, 255, 255, 0.02);
  }

  .home-news-region-badge {
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

  .home-news-region-badge svg {
    color: var(--gold);
    flex-shrink: 0;
  }

  .home-news-region-badge span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dots pagination */
  .home-news-dots {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .home-news-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--muted);
    opacity: 0.35;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .home-news-dot.is-active {
    width: 18px;
    background: var(--gold);
    opacity: 1;
  }

  .home-news-dot.is-edge {
    width: 4.5px;
    height: 4.5px;
    opacity: 0.22;
  }

  .home-news-dot.is-out-of-window {
    display: none;
  }

  /* Arrow nav buttons */
  .home-news-nav-btns {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .home-news-arrow-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .home-news-arrow-btn:hover {
    background: var(--surface-raised);
    border-color: var(--gold);
    color: var(--gold);
  }

  .home-news-arrow-btn:active {
    transform: scale(0.92);
  }

  @media (max-width: 600px) {
    .home-market-news {
      margin: 2.5rem 0.85rem 2.5rem;
    }
    .home-news-slide {
      padding: 0.80rem 0.88rem 0.72rem;
      gap: 0.65rem;
    }
    .home-news-slide__main-row {
      gap: 0.75rem;
    }
    .home-news-slide__thumb-wrap {
      width: 62px;
      height: 62px;
      border-radius: 8px;
    }
    .home-news-slide__title {
      font-size: 0.86rem;
      line-height: 1.28;
      margin-bottom: 0.30rem;
    }
    .home-news-slide__summary {
      font-size: 0.73rem;
      line-height: 1.34;
      margin-bottom: 0;
    }
    .home-news-slide__footer {
      margin-top: 0.40rem;
    }
    .home-news-controls {
      padding: 0.52rem 0.95rem;
    }
    .home-news-region-badge span {
      max-width: 130px;
    }
  }

  @media (max-width: 380px) {
    .home-news-slide {
      padding: 0.85rem 0.88rem;
      gap: 0.7rem;
    }
    .home-news-slide__thumb-wrap {
      width: 62px;
      height: 62px;
    }
    .home-news-slide__title {
      font-size: 0.84rem;
    }
    .home-news-slide__summary {
      display: -webkit-box;
      -webkit-line-clamp: 2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-news-track {
      transition: none !important;
    }
    .home-market-news__pulse-dot {
      animation: none !important;
    }
  }

  /* Podcast Navigation Controls, Continue Listening, and Layouts */
  .podcast-search-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .podcast-search-toggle-btn:hover {
    background: var(--surface-raised);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .podcast-search-toggle-btn:active {
    transform: scale(0.92);
  }

  .podcast-search-toggle-btn.is-active {
    background: rgba(212, 168, 67, 0.14);
    border-color: var(--gold);
    color: var(--gold);
  }

  .podcast-search-bar-wrap {
    margin-bottom: 1.15rem;
    animation: podcastSearchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes podcastSearchSlideDown {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .podcast-search-feedback {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: 0.45rem;
    padding: 0 0.2rem;
  }

  .podcast-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding: 0 0.1rem;
  }

  /* Podcast Rounded Curved Sheet Layout (Matching Store Sheet Architecture) */
  #podcast-list-view {
    background: #EEF2F6;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  :root[data-theme="dark"] #podcast-list-view {
    background: #060A12;
  }

  #podcast-list-view > .reader-panel__scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100dvh - 56px);
  }

  #podcast-hero-wrap {
    margin: 0.75rem 0 1.15rem;
  }

  @media (max-width: 480px) {
    #podcast-hero-wrap {
      margin: 0.65rem 0 1.1rem;
    }
  }

  #podcast-recent-wrap {
    flex: 1;
    margin: 0.25rem -1rem -4rem;
    padding: 1.35rem 1.15rem 4.5rem;
    min-height: 58vh;
    background: var(--paper, #F8FAFC);
    border-radius: 30px 30px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 -8px 26px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  :root[data-theme="dark"] #podcast-recent-wrap {
    background: linear-gradient(180deg, #161616 0%, #0A0A0A 220px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .podcast-curved-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .podcast-curved-sheet-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .podcast-filter-circle-btn {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  :root[data-theme="dark"] .podcast-filter-circle-btn {
    background: var(--navy-raised);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .podcast-filter-circle-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
  }

  .podcast-filter-circle-btn.is-open,
  .podcast-filter-circle-btn.has-active-filter {
    border-color: var(--gold);
    color: var(--gold);
  }

  .podcast-filter-circle-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px var(--paper-raised);
  }

  :root[data-theme="dark"] .podcast-filter-circle-dot {
    box-shadow: 0 0 0 1.5px var(--navy-raised);
  }

  .podcast-filter-drawer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: -0.25rem 0 1rem;
    padding: 0.1rem 0;
    animation: podcastDrawerFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .podcast-filter-drawer[hidden] {
    display: none !important;
  }

  @keyframes podcastDrawerFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #podcast-recent-wrap .podcast-section-header {
    margin-bottom: 0;
  }

  /* Continue Listening Section */
  .podcast-continue-wrap {
    margin-bottom: 1.15rem;
  }

  .podcast-continue-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 1.05rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
  }

  .podcast-continue-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--gold-glow);
  }

  .podcast-continue-card:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
  }

  .podcast-continue-art {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
  }

  .podcast-continue-info {
    flex: 1;
    min-width: 0;
  }

  .podcast-continue-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
  }

  .podcast-continue-title {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.45rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .podcast-progress-bar-wrap {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--rule);
    overflow: hidden;
    margin-bottom: 0.35rem;
  }

  .podcast-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
    position: relative;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1);
    will-change: width;
  }

  .podcast-progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: podcastProgressFlow 2.4s linear infinite;
    pointer-events: none;
    opacity: 0.85;
  }

  .podcast-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 500;
  }

  .podcast-continue-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  :root[data-theme="dark"] .podcast-continue-resume-btn {
    background: var(--gold);
    color: #0A0A0A;
  }

  .podcast-continue-card:hover .podcast-continue-resume-btn {
    transform: scale(1.08);
  }

  /* Podcast Episodes Section Toolbar */
  .podcast-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }

  .podcast-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0 0 0.95rem;
  }

  .podcast-toolbar-right {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .podcast-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: nowrap;
  }

  .podcast-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border-radius: 9999px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
  }

  .podcast-toolbar-btn:hover {
    background: var(--surface-raised);
    border-color: var(--gold);
    color: var(--gold);
  }

  .podcast-toolbar-btn:active {
    transform: scale(0.97);
  }

  .podcast-toolbar-btn svg {
    flex-shrink: 0;
    color: var(--gold);
  }

  .podcast-toolbar-btn.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .podcast-toolbar-btn.is-active svg {
    color: var(--paper);
  }

  :root[data-theme="dark"] .podcast-toolbar-btn.is-active {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
  }

  :root[data-theme="dark"] .podcast-toolbar-btn.is-active svg {
    color: #0A0A0A;
  }

  .podcast-toolbar-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
    flex-shrink: 0;
  }

  .podcast-toolbar-btn.is-active .podcast-toolbar-dot {
    background: var(--paper);
  }

  :root[data-theme="dark"] .podcast-toolbar-btn.is-active .podcast-toolbar-dot {
    background: #0A0A0A;
  }

  .podcast-toolbar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.08);
    color: inherit;
    margin-left: 0.15rem;
  }

  :root[data-theme="dark"] .podcast-toolbar-count {
    background: rgba(255, 255, 255, 0.14);
  }

  .podcast-toolbar-btn.is-active .podcast-toolbar-count {
    background: rgba(255, 255, 255, 0.22);
  }

  :root[data-theme="dark"] .podcast-toolbar-btn.is-active .podcast-toolbar-count {
    background: rgba(10, 10, 10,  0.28);
  }

  /* Grid/List View Toggle Group */
  .podcast-view-toggle-group {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 2px;
    gap: 2px;
  }

  .podcast-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .podcast-view-btn:hover {
    color: var(--ink);
  }

  .podcast-view-btn.is-active {
    background: var(--ink);
    color: var(--paper);
  }

  :root[data-theme="dark"] .podcast-view-btn.is-active {
    background: var(--gold);
    color: #0A0A0A;
  }

  /* Episode Card Visual Progress Indicator */
  .home-podcast-card__progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(10, 10, 10,  0.08);
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
  }

  :root[data-theme="dark"] .home-podcast-card__progress-track {
    background: rgba(255, 255, 255, 0.1);
  }

  .home-podcast-card__progress-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
    position: relative;
    overflow: hidden;
    /* Smooth width transition so progress glides continuously rather than jumping */
    transition: width 0.35s cubic-bezier(0.2, 0, 0, 1);
    will-change: width;
  }

  /* Animated traveling shimmer/glow wave across the progress bar */
  .home-podcast-card__progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: podcastProgressFlow 2.4s linear infinite;
    pointer-events: none;
    opacity: 0.85;
  }

  /* When the episode is actively playing */
  .home-podcast-card.is-active-playing .home-podcast-card__progress-fill {
    transition: width 0.28s linear;
    background: linear-gradient(90deg, #9E782F 0%, var(--gold) 100%);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.6);
  }

  .home-podcast-card.is-active-playing .home-podcast-card__progress-fill::after {
    animation-duration: 1.5s;
    opacity: 1;
  }

  @keyframes podcastProgressFlow {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-podcast-card__progress-fill,
    .podcast-progress-bar-fill {
      transition: none !important;
    }
    .home-podcast-card__progress-fill::after,
    .podcast-progress-bar-fill::after {
      animation: none !important;
      display: none !important;
    }
  }

  .home-podcast-card__progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(132, 101, 30, 0.12);
    padding: 0.14rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(132, 101, 30, 0.28);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  :root[data-theme="dark"] .home-podcast-card__progress-badge {
    background: rgba(212, 168, 67, 0.16);
    border-color: rgba(212, 168, 67, 0.35);
    color: var(--gold);
  }

  .home-podcast-card__progress-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    box-shadow: 0 0 5px var(--gold);
    animation: podcastProgressPulse 2s ease-in-out infinite;
  }

  @keyframes podcastProgressPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.85); }
  }

  /* Prominent Duration Styling */
  .home-podcast-card__duration-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    background: rgba(132, 101, 30, 0.12);
    border: 1px solid rgba(132, 101, 30, 0.26);
    padding: 0.16rem 0.55rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(10, 10, 10,  0.04);
    white-space: nowrap;
  }

  :root[data-theme="dark"] .home-podcast-card__duration-pill {
    background: rgba(212, 168, 67, 0.16);
    border-color: rgba(212, 168, 67, 0.35);
    color: #F8FAFC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  .home-podcast-card__duration-pill svg {
    color: var(--gold);
    flex-shrink: 0;
  }

  .home-podcast-card__art-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 34px;
    box-sizing: border-box;
    background: rgba(10, 10, 10,  0.82);
    backdrop-filter: blur(8px) saturate(135%);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 3px 4px;
    font-family: var(--sans);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }

  :root[data-theme="dark"] .home-podcast-card__art-duration {
    background: rgba(9, 14, 24, 0.84);
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
  }

  /* Episodes List Layouts */
  .podcast-episodes-list--list {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
  }

  .podcast-episodes-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  @media (max-width: 640px) {
    .podcast-section-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .podcast-toolbar {
      width: 100%;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 0.45rem;
    }
    .podcast-filter-group {
      flex-wrap: nowrap;
      gap: 0.38rem;
    }
    .podcast-episodes-list--grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.72rem;
    }
    .podcast-continue-card {
      padding: 0.85rem 1rem;
      gap: 0.85rem;
    }
    .podcast-continue-art {
      width: 56px;
      height: 56px;
    }
  }

  /* Podcast Autoplay Button & Indicators */
  .podcast-autoplay-toggle-btn {
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  }
  .podcast-autoplay-toggle-btn:active {
    transform: scale(0.92);
  }
  .podcast-autoplay-toggle-btn.is-active {
    color: var(--gold) !important;
  }
  .podcast-autoplay-toggle-btn:not(.is-active) {
    color: var(--muted) !important;
    opacity: 0.65;
  }

  /* Up Next Bar */
  .podcast-up-next-bar {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .podcast-up-next-bar:hover {
    background: rgba(132, 101, 30, 0.1);
  }
  :root[data-theme="dark"] .podcast-up-next-bar {
    background: rgba(212, 168, 67, 0.1);
    border-color: rgba(212, 168, 67, 0.25);
  }
  :root[data-theme="dark"] .podcast-up-next-bar:hover {
    background: rgba(212, 168, 67, 0.16);
  }

  /* Interactive Full-Text Transcript Read-Along — Liquid Glass Media Player Aesthetic */
  #podcast-text-mode {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  #podcast-text-mode[hidden] {
    display: none !important;
  }
  .podcast-text-header-wrap {
    position: sticky;
    top: 0;
    z-index: 15;
    width: 100%;
    padding: 0.75rem 1.25rem 0.6rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(248, 250, 252, 0.72) 76%, transparent 100%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  :root[data-theme="dark"] .podcast-text-header-wrap {
    background: linear-gradient(180deg, rgba(14, 14, 14,  0.94) 0%, rgba(14, 14, 14,  0.72) 76%, transparent 100%);
  }
  .podcast-text-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .podcast-text-header__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.2px solid rgba(255, 255, 255, 0.82);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.26) 100%);
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.08), inset 0 1.5px 2px rgba(255, 255, 255, 0.92);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  :root[data-theme="dark"] .podcast-text-header__btn {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), inset 0 1.5px 2px rgba(255, 255, 255, 0.30);
  }
  .podcast-text-header__btn:active {
    transform: scale(0.92);
  }
  .podcast-text-header__identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
    padding: 0.32rem 0.75rem 0.32rem 0.34rem;
    border-radius: 999px;
    border: 1.2px solid rgba(255, 255, 255, 0.78);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.26) 100%);
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.06), inset 0 1px 1.5px rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: pointer;
  }
  :root[data-theme="dark"] .podcast-text-header__identity {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36), inset 0 1px 1.5px rgba(255, 255, 255, 0.24);
  }
  .podcast-text-header__thumb-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 3px 10px rgba(10, 10, 10,  0.16);
    flex-shrink: 0;
    background: rgba(10, 10, 10,  0.08);
  }
  :root[data-theme="dark"] .podcast-text-header__thumb-wrap {
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
  #podcast-text-art {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .podcast-text-header__meta {
    min-width: 0;
    flex: 1;
    text-align: left;
  }
  #podcast-text-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  #podcast-text-sub {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .podcast-transcript-content-col {
    padding: 0.35rem 1.25rem 0;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  .podcast-transcript-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0.15rem 0 0.9rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.045);
    border: 1px solid rgba(10, 10, 10,  0.07);
  }
  :root[data-theme="dark"] .podcast-transcript-stats {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }
  .podcast-transcript-p {
    position: relative;
    padding: 0.9rem 1.1rem;
    margin: 0 0 0.75rem;
    border-radius: 20px;
    border: 1.5px solid transparent;
    cursor: pointer;
    opacity: 0.64;
    transition: opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
    -webkit-user-select: text;
    user-select: text;
  }
  .podcast-transcript-p:hover {
    opacity: 0.92;
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.65);
  }
  :root[data-theme="dark"] .podcast-transcript-p:hover {
    opacity: 0.92;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .podcast-transcript-p.is-reading-active {
    opacity: 1;
    border-radius: 22px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.56) 52%,
      rgba(212, 168, 67, 0.20) 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.94);
    box-shadow:
      0 14px 32px rgba(10, 10, 10,  0.09),
      0 2px 10px rgba(212, 168, 67, 0.12),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.96);
  }
  :root[data-theme="dark"] .podcast-transcript-p.is-reading-active {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.07) 52%,
      rgba(212, 168, 67, 0.16) 100%
    );
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.46),
      0 0 26px rgba(212, 168, 67, 0.12),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.34);
  }

  .podcast-transcript-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sans);
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.03em;
    padding: 0.16rem 0.52rem;
    border-radius: 999px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.22);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  :root[data-theme="dark"] .podcast-transcript-time {
    color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.15);
    border-color: rgba(212, 168, 67, 0.28);
  }

  .podcast-transcript-p.is-reading-active .podcast-transcript-time {
    background: var(--gold-decorative);
    color: #0A0A0A;
    border-color: var(--gold-decorative);
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.32);
  }
  :root[data-theme="dark"] .podcast-transcript-p.is-reading-active .podcast-transcript-time {
    background: var(--gold-decorative);
    color: #0A0A0A;
    border-color: var(--gold-decorative);
  }

  .podcast-transcript-text {
    line-height: 1.65;
    font-size: 1.02rem;
    color: var(--ink);
    -webkit-user-select: text;
    user-select: text;
  }

  /* Floating Liquid Frosted Glass Mini-Player Pod */
  .podcast-mini-player-dock-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 0.4rem 1.25rem 1.05rem;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(248, 250, 252, 0.88) 0%, rgba(248, 250, 252, 0.35) 65%, transparent 100%);
  }
  :root[data-theme="dark"] .podcast-mini-player-dock-wrap {
    background: linear-gradient(0deg, rgba(10, 10, 10,  0.88) 0%, rgba(10, 10, 10,  0.38) 65%, transparent 100%);
  }
  .podcast-mini-player {
    pointer-events: auto;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0.75rem 1.1rem 0.7rem;
    border-radius: 24px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.38) 52%,
      rgba(212, 168, 67, 0.16) 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    backdrop-filter: blur(24px) saturate(185%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow:
      0 16px 36px rgba(10, 10, 10,  0.13),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px rgba(10, 10, 10,  0.05);
  }
  :root[data-theme="dark"] .podcast-mini-player {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 52%,
      rgba(212, 168, 67, 0.12) 100%
    );
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.56),
      inset 0 1.5px 2px rgba(255, 255, 255, 0.32),
      inset 0 -1px 2px rgba(0, 0, 0, 0.38);
  }
  .podcast-mini-player__times {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-family: var(--sans);
    font-size: 0.69rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .podcast-mini-player__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.2rem;
    padding: 0 0.15rem;
  }

  .podcast-transcript-highlight {
    background-color: rgba(255, 224, 102, 0.65);
    color: #000;
    border-radius: 2px;
    padding: 0 2px;
  }
  :root[data-theme="dark"] .podcast-transcript-highlight {
    background-color: rgba(212, 168, 67, 0.6);
    color: #fff;
  }

  @media (prefers-reduced-motion: no-preference) {
    .issue-list[data-loaded="true"] .issue,
    .hero[data-loaded="true"] {
      animation: rise 0.35s ease;
    }
    .issue-list[data-loaded="true"] .issue:nth-child(n+6) { animation-duration: 0s; }
    @keyframes rise {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  /* In-app reader — a full-screen view of an issue, rendered from the same
     feed data every list row already has. Features liquid glassmorphism in both
     light and dark modes with solid fallback. */
  .reader-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--paper);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--ink);
  }

  :root[data-theme="dark"] .reader-overlay {
    background-color: #0A0A0A;
    background-image: none;
  }

  /* Crisp, plain, solid reader background — zero blurry transparency for optimal reading comfort */
  #reader-overlay {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  :root[data-theme="dark"] #reader-overlay {
    background-color: #0A0A0A !important;
    background-image: none !important;
    background: #0A0A0A !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #reader-overlay .reader-panel {
    background: var(--paper);
    min-height: 100vh;
  }
  :root[data-theme="dark"] #reader-overlay .reader-panel {
    background: #0A0A0A;
  }

  /* Thin reading-progress bar — sticky above the bar itself so it stays
     visible even while the bar below it auto-hides on scroll. Deliberately
     not chunky: 3px, one fill color, no track decoration beyond a hairline
     of the surface it sits on. Only meaningful (and only rendered) inside
     the actual issue reader, not Archive/About/Paid/Vault/Podcast, which
     reuse this same panel shell for much shorter content. */
  .reading-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: height 0.22s ease;
  }
  .reading-progress.is-complete-shimmer-wrap {
    height: 3.5px;
  }
  .reading-progress__fill {
    height: 100%;
    width: 0%;
    background: var(--gold-decorative);
  }
  @media (prefers-reduced-motion: no-preference) {
    .reading-progress__fill { transition: width 0.12s linear; }
  }

  .reader-panel__bar,
  .reader-panel__bar.glass-surface {
    position: relative;
    top: auto;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: var(--paper);
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease, box-shadow 0.2s ease;
  }
  :root[data-theme="dark"] .reader-panel__bar,
  :root[data-theme="dark"] .reader-panel__bar.glass-surface {
    background: #0A0A0A;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Article reading view header remains sticky and borderless with progress bar */
  #reader-overlay .reader-panel__bar {
    position: sticky;
    top: 0;
    z-index: 30;
    border: none !important;
    border-bottom: none !important;
  }

  /* Glassmorphism effect when article reader is scrolling (borderless) */
  .reader-panel__bar.is-scrolled {
    background: rgba(248, 250, 252, 0.86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
  }
  :root[data-theme="dark"] .reader-panel__bar.is-scrolled {
    background: rgba(10, 10, 10,  0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
  }

  /* When the option dropdown menu is open, suspend the bar's own backdrop-filter
     so the menu card's glassmorphic blur samples the underlying page cleanly anywhere in the issue. */
  .reader-panel__bar.has-more-open,
  .reader-panel__bar:has(#reader-more-menu:not([hidden])) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }

  /* Modern 'Aa' Typography Settings Bar in Reader Header */
  .reader-panel__aa-bar {
    height: 34px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: rgba(10, 10, 10,  0.04);
    color: var(--ink);
    font-family: var(--brand-serif);
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .reader-panel__aa-bar:hover {
    background: rgba(10, 10, 10,  0.08);
    border-color: var(--gold);
    color: var(--gold);
  }
  :root[data-theme="dark"] .reader-panel__aa-bar {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
  }
  :root[data-theme="dark"] .reader-panel__aa-bar:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gold-decorative);
    color: var(--gold-decorative);
  }
  .reader-panel__aa-bar:active {
    transform: scale(0.95);
  }
  @media (max-width: 480px) {
    .reader-panel__aa-bar {
      padding: 0 0.6rem;
      font-size: 0.9rem;
    }
  }

  .reader-panel__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: none;
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .reader-panel__close:hover {
    background: rgba(10, 10, 10,  0.06);
  }
  :root[data-theme="dark"] .reader-panel__close:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .reader-panel__close:active {
    transform: scale(0.94);
  }

  .reader-toast {
    position: fixed;
    bottom: calc(5rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    max-width: 90vw;
  }
  .reader-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  :root[data-theme="dark"] .reader-toast {
    background: #E8DFD1;
    color: #0A0A0A;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  .reader-panel__online-link {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--gold);
  }

  /* Bottom padding uses --nav-clearance rather than a fixed value because
     the bottom nav stays visible above every overlay (Reader, Archive,
     About, Paid, Vault all share this class) — same reasoning as footer
     above. */
  .reader-panel__scroll { padding: 1.5rem 1.25rem var(--nav-clearance); max-width: 640px; margin: 0 auto; }

  .reader-panel__offline-note {
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.85rem;
    background: var(--install-bg);
    border: 1px solid var(--install-border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--ink);
  }

  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .reader-cover-plate {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--s-2);
    margin-bottom: var(--s-6);
  }

  :root[data-theme="light"] .reader-cover-plate {
    background: var(--surface-2);
    border-color: var(--border);
  }

  .reader-cover-plate__body {
    display: flex;
    flex-direction: column;
    padding: var(--s-3) var(--s-3) var(--s-4);
  }

  @media (min-width: 480px) {
    .reader-cover-plate__body {
      padding: var(--s-4) var(--s-4) var(--s-5);
    }
  }

  .reader-panel__date {
    display: inline-block;
    font-size: var(--text-xs);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin: 0;
  }

  .reader-panel__title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--text-reader-title);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0 0 var(--s-2);
    color: var(--text);
    text-wrap: balance;
  }

  .reader-panel__title:has(+ .reader-panel__excerpt[hidden]) {
    margin-bottom: var(--s-5);
  }

  .reader-panel__excerpt {
    font-family: var(--sans);
    font-weight: 400;
    margin: 0 0 var(--s-5);
    font-size: var(--text-base);
    line-height: 1.48;
    color: var(--text-muted);
    max-width: 62ch;
    text-wrap: pretty;
  }

  .reader-cover-figure {
    margin: 0;
    border-radius: var(--r-control);
    overflow: hidden;
    width: 100%;
    background: var(--surface-2);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .reader-cover-figure:has(~ .reader-companion-audio:not([hidden])) {
    margin-bottom: var(--s-4);
  }

  .reader-cover-figure[hidden] {
    display: none !important;
  }

  .reader-cover-figure__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-control);
  }

  /* font-size and line-height read from the Reader Settings Panel's two
     controls (Text size, Line spacing) rather than fixed values, so a
     change there applies live without touching any other rule. */
  .reader-panel__body {
    max-width: 66ch;
    font-family: var(--reader-font-family, var(--sans)) !important;
    font-size: calc(var(--text-reader) * var(--reader-font-scale, 1));
    line-height: var(--reader-line-height, 1.65);
    color: var(--text-reader-color);
    font-synthesis: none;
  }
  .reader-panel__body p,
  .reader-panel__body li,
  .reader-panel__body p *,
  .reader-panel__body li * {
    font-family: inherit;
    font-synthesis: none;
  }

  .reader-panel__body .captioned-image-container,
  .reader-panel__body figure,
  .reader-panel__body .image-link,
  .reader-panel__body .image2-inset,
  .reader-panel__body picture {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .reader-panel__body .captioned-image-container,
  .reader-panel__body figure {
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
  }

  .reader-panel__body > .captioned-image-container:first-child,
  .reader-panel__body > figure:first-child,
  .reader-panel__body > .captioned-image-container:first-child figure {
    margin-top: 0;
  }

  .reader-panel__body .image-link-expand,
  .reader-panel__body .restack-image,
  .reader-panel__body .image2-button-wrapper {
    display: none !important;
  }

  .reader-panel__body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--r-card);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .reader-panel__body figcaption {
    font-family: var(--sans);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: var(--s-2);
    text-align: left;
  }

  .reader-panel__body p {
    margin: 0 0 1em;
    text-wrap: pretty;
  }

  .reader-panel__body p:empty {
    display: none;
  }

  .reader-panel__body a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent-text);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
  }

  /* Structural Section Headings (This Week, Feature, Below the Surface, The Deeper Cut) */
  .reader-panel__body h1,
  .reader-panel__body h2,
  .reader-panel__body h3,
  .reader-panel__body h4 {
    font-family: var(--brand-serif);
    font-weight: 600;
    font-size: calc(var(--text-2xl) * var(--reader-font-scale, 1));
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: var(--s-7) 0 var(--s-4);
    padding-top: var(--s-6);
    padding-bottom: var(--s-3);
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-wrap: balance;
  }

  .reader-panel__body > h1:first-child,
  .reader-panel__body > h2:first-child,
  .reader-panel__body > h3:first-child,
  .reader-panel__body > .da-plate:first-child > h3:first-child,
  .reader-panel__body > figure:first-child + h2,
  .reader-panel__body > figure:first-child + h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Editorial Plate Containers */
  .reader-panel__body .da-plate {
    display: block;
    margin: 0 0 var(--s-7);
  }

  /* Section 1 Plate: This Week (Executive Lead Standfirst) */
  .reader-panel__body .da-plate--this-week {
    padding-bottom: var(--s-2);
  }

  .reader-panel__body .da-plate--this-week > h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: var(--s-4);
  }

  .reader-panel__body .da-plate--this-week > p:first-of-type {
    font-family: var(--reader-font-family, var(--sans));
    font-weight: 400;
    font-size: calc(var(--text-lg) * var(--reader-font-scale, 1));
    line-height: calc(var(--reader-line-height, 1.65) * 0.96);
    letter-spacing: 0;
    color: var(--text);
    margin-bottom: var(--s-4);
  }

  .reader-panel__body .da-plate--this-week p {
    font-size: calc(var(--text-lg) * var(--reader-font-scale, 1));
    line-height: calc(var(--reader-line-height, 1.65) * 0.96);
    color: var(--text);
  }

  /* Section 2 Plate: Feature (Core Strategic Essay) */
  .reader-panel__body .da-plate--feature > h3:first-child {
    margin-top: 0;
    padding-top: var(--s-6);
    border-top: 1px solid var(--border-strong);
    margin-bottom: var(--s-5);
  }

  /* Section 3 Plate: Below the Surface (Tonal Dossier Plate) */
  .reader-panel__body .da-plate--dossier {
    margin: var(--s-7) 0;
    padding: var(--s-6);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-card);
  }

  :root[data-theme="dark"] .reader-panel__body .da-plate--dossier {
    background: var(--surface);
  }

  @media (max-width: 480px) {
    .reader-panel__body .da-plate--dossier {
      padding: var(--s-5);
    }
  }

  .reader-panel__body .da-plate--dossier > h3:first-child {
    margin-top: 0;
    margin-bottom: var(--s-4);
    padding-top: 0;
    padding-bottom: var(--s-3);
    border-top: none;
    border-bottom: 1px solid var(--border-strong);
  }

  .reader-panel__body .da-plate--dossier p:last-child {
    margin-bottom: 0;
  }

  /* Section 4 Plate: The Deeper Cut */
  .reader-panel__body .da-plate--deeper-cut {
    margin: var(--s-7) 0;
  }

  .reader-panel__body .da-plate--deeper-cut > h3:first-child {
    margin-top: 0;
    padding-top: var(--s-6);
    border-top: 1px solid var(--border-strong);
    margin-bottom: var(--s-5);
  }

  .reader-panel__body h1 *,
  .reader-panel__body h2 *,
  .reader-panel__body h3 *,
  .reader-panel__body h4 * {
    font-family: inherit !important;
    color: inherit !important;
  }

  /* Strip any legacy <mark> background or color overrides while preserving user highlights */
  .reader-panel__body mark:not(.da-user-highlight) {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
  }

  /* Editorial Pull Quotes — Bricolage 500 with top and bottom hairlines (v2 4.3) */
  .reader-panel__body blockquote {
    font-family: var(--brand-serif) !important;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    font-size: calc(var(--text-xl) * var(--reader-font-scale, 1));
    line-height: 1.32;
    color: var(--text);
    margin: var(--s-6) 0;
    padding: var(--s-5) 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    border-left: none;
    border-radius: 0;
    text-wrap: balance;
  }
  .reader-panel__body blockquote p {
    margin: 0;
    font-family: inherit !important;
  }
  .reader-panel__body blockquote em,
  .reader-panel__body blockquote i {
    font-style: normal;
    font-family: inherit !important;
  }

  /* Section 4 Body: The Deeper Cut (Editorial Book Recommendation) */
  .reader-panel__body .da-deeper-cut {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    margin: 0;
  }

  .reader-panel__body .da-deeper-cut__cover {
    width: 112px !important;
    max-width: 112px !important;
    flex-shrink: 0;
    align-self: center;
    margin: 0 auto !important;
  }

  .reader-panel__body .da-deeper-cut__cover img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-inline: auto;
    border-radius: var(--r-control);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .reader-panel__body .da-deeper-cut__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .reader-panel__body .da-deeper-cut__body p {
    margin: 0;
    text-align: left;
    color: var(--text-reader-color);
  }

  @media (min-width: 600px) {
    .reader-panel__body .da-deeper-cut {
      display: grid;
      grid-template-columns: 128px 1fr;
      gap: var(--s-5);
      align-items: start;
    }
    .reader-panel__body .da-deeper-cut__cover {
      width: 128px !important;
      max-width: 128px !important;
      align-self: start;
      margin: 0 !important;
    }
  }

  /* Section 5: This Week's Question (Flat Tonal Section) */
  .reader-panel__body .da-weekly-question {
    margin: var(--s-7) 0;
    padding: var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-card);
    text-align: left;
  }

  :root[data-theme="dark"] .reader-panel__body .da-weekly-question {
    background: var(--surface);
  }

  .reader-panel__body .da-weekly-question h3 {
    margin: 0 0 var(--s-3);
    padding: 0 0 var(--s-3);
    border-top: none;
    border-bottom: 1px solid var(--border);
    font-family: var(--brand-serif);
    font-weight: 600;
    font-size: calc(var(--text-xl) * var(--reader-font-scale, 1));
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
  }

  .reader-panel__body .da-weekly-question__prompt {
    margin: 0 0 var(--s-4);
    font-family: var(--brand-serif) !important;
    font-weight: 500;
    font-size: calc(1.18rem * var(--reader-font-scale, 1));
    line-height: 1.48;
    letter-spacing: -0.015em;
    color: var(--text);
    text-wrap: pretty;
  }

  .reader-panel__body .da-weekly-question__meta {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
  }

  .reader-panel__body .da-weekly-question__reply {
    color: var(--text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--accent-text);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
    margin-left: var(--s-2);
  }

  /* Section 6: The Closing Line (Typographic Verdict) */
  .reader-panel__body .da-closing-line {
    margin: var(--s-7) 0;
    padding: var(--s-6) 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
  }

  .reader-panel__body .da-closing-line h3 {
    margin: 0 0 var(--s-3);
    padding: 0;
    border-top: none;
    border-bottom: none;
    font-family: var(--brand-serif);
    font-weight: 600;
    font-size: calc(var(--text-lg) * var(--reader-font-scale, 1));
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--text-muted);
  }

  .reader-panel__body .da-closing-line__verdict {
    margin: 0;
    font-family: var(--brand-serif) !important;
    font-weight: 600;
    font-size: calc((var(--text-2xl) - var(--s-1)) * var(--reader-font-scale, 1));
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: balance;
  }

  /* Minimalist Author Colophon */
  .reader-colophon {
    margin: var(--s-7) 0 var(--s-6);
    padding: var(--s-6) 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .reader-colophon__advisory {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .reader-colophon__text {
    margin: 0 !important;
    font-family: var(--sans) !important;
    font-size: calc(0.96rem * var(--reader-font-scale, 1)) !important;
    line-height: 1.65 !important;
    color: var(--text) !important;
    font-style: normal !important;
    font-weight: 400 !important;
  }

  .reader-colophon__email {
    color: var(--text) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--accent-text) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 0.18em !important;
  }

  .reader-colophon__divider {
    height: 1px;
    background: var(--border);
    width: 100%;
  }

  .reader-colophon__share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
  }

  .reader-colophon__share-text {
    margin: 0 !important;
    font-family: var(--sans) !important;
    font-size: calc(var(--text-sm) * var(--reader-font-scale, 1)) !important;
    line-height: 1.5 !important;
    color: var(--text-muted) !important;
    font-style: normal !important;
    flex: 1 1 240px;
  }

  .reader-colophon__share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    min-height: 44px;
    border-radius: var(--r-card);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }

  .reader-colophon__share-btn svg {
    stroke: currentColor;
  }

  .reader-colophon__share-btn:active {
    transform: scale(0.97);
  }

  /* Fallback: if raw advisory blockquote or share p are ever rendered without colophon wrapper */
  .reader-panel__body blockquote:has(a[href*="victory@"]),
  .reader-panel__body blockquote:has(strong:empty) {
    border-top: none;
    border-bottom: none;
    border-left: none;
    padding: 0;
  }

  /* Modern Universal Search & Archive System */
  .search-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0.85rem;
  }

  .search-input-icon {
    position: absolute;
    left: 0.95rem;
    pointer-events: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .search-input-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    opacity: 0.8;
  }

  .archive-search {
    width: 100%;
    font-family: var(--sans);
    font-size: 1rem;
    padding: 0.75rem 2.6rem 0.75rem 2.65rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-appearance: none;
  }

  .archive-search::placeholder {
    color: var(--muted);
    opacity: 0.75;
  }

  .archive-search:focus-visible {
    outline: none;
    border-color: rgba(10, 10, 10, 0.32);
    box-shadow: none;
  }
  :root[data-theme="dark"] .archive-search:focus-visible {
    border-color: rgba(248, 250, 252, 0.28);
    box-shadow: none;
  }

  .search-clear-btn {
    position: absolute;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--rule);
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    padding: 0;
  }

  .search-clear-btn:hover {
    background: var(--gold);
    color: #0A0A0A;
    transform: scale(1.08);
  }

  /* Filter pill tabs */
  .search-filters-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.85rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .search-filters-row::-webkit-scrollbar { display: none; }

  .search-filter-pill {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .search-filter-pill:hover {
    color: var(--ink);
    border-color: var(--gold);
    background: var(--surface-raised);
  }

  .search-filter-pill.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
  }

  :root[data-theme="dark"] .search-filter-pill.is-active {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
  }

  .search-filter-count {
    font-size: 0.72rem;
    opacity: 0.85;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.15);
  }

  .search-filter-pill.is-active .search-filter-count {
    background: rgba(255, 255, 255, 0.2);
  }

  :root[data-theme="dark"] .search-filter-pill.is-active .search-filter-count {
    background: rgba(0, 0, 0, 0.18);
  }

  /* Suggested topic chips */
  .search-topics-section {
    margin-top: 0.15rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--rule);
  }

  .search-topics-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.55rem;
    font-weight: 600;
  }

  .search-topics-title svg {
    opacity: 0.75;
    flex-shrink: 0;
  }

  .search-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .search-topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.85rem;
    min-height: 34px;
    border-radius: 9999px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--rule);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  :root[data-theme="dark"] .search-topic-chip {
    background: rgba(248, 250, 252, 0.05);
  }

  .search-topic-chip:hover {
    color: var(--ink);
    border-color: rgba(10, 10, 10, 0.2);
    background: rgba(10, 10, 10, 0.08);
  }
  :root[data-theme="dark"] .search-topic-chip:hover {
    border-color: rgba(248, 250, 252, 0.22);
    background: rgba(248, 250, 252, 0.1);
  }

  .search-topic-chip.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
    box-shadow: none;
  }
  :root[data-theme="dark"] .search-topic-chip.is-active {
    background: #F8FAFC;
    color: #0A0A0A;
    border-color: #F8FAFC;
    box-shadow: none;
  }

  .search-topic-chip:active {
    transform: translateY(0);
  }

  /* Universal search result cards */
  .search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .search-result-item {
    display: block;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .search-result-item:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    background: var(--surface-raised);
  }

  .search-result-item:active {
    transform: translateY(0);
  }

  .search-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }

  .search-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .search-badge svg {
    flex-shrink: 0;
  }

  .search-badge--article {
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.28);
  }

  .search-badge--podcast {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
  }

  :root[data-theme="dark"] .search-badge--podcast {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
  }

  .search-badge--vault {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
  }

  :root[data-theme="dark"] .search-badge--vault {
    background: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.3);
  }

  .search-meta-tag {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
  }

  .search-result-title {
    font-family: var(--sans);
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.35rem 0;
  }
  .search-result-item--podcast .search-result-title,
  .search-result-item--vault .search-result-title,
  .search-result-item--podcast .archive-card__title,
  .search-result-item--vault .archive-card__title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.03rem;
    line-height: 1.28;
    letter-spacing: -0.015em;
  }

  .search-result-snippet {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.48;
    color: var(--muted);
    margin: 0 0 0.55rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .search-result-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--muted);
  }

  .search-result-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gold);
    font-weight: 600;
    font-size: 0.8rem;
  }

  .search-result-cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
  }

  .search-empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
  }

  .search-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
  }

  .search-empty-title {
    font-family: var(--sans);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
  }

  .search-empty-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Home Recent Articles Section Header */
  .home-articles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.55rem;
    margin-bottom: 0.55rem;
    padding: 0 1.15rem;
  }

  @media (max-width: 480px) {
    .home-articles-header {
      margin-top: 2.25rem;
      margin-bottom: 0.45rem;
      padding: 0 1rem;
    }
  }

  .home-articles-heading {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(0.95rem, 3.7vw, 1.02rem);
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  @media (max-width: 480px) {
    .home-articles-heading {
      font-size: 0.95rem;
    }
  }

  .home-articles__icon {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex-shrink: 0;
    vertical-align: middle;
  }

  .home-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.15rem 0.35rem 0.65rem;
    min-height: 38px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .home-view-all-btn:hover,
  .home-view-all-btn:focus-visible {
    color: var(--ink);
    background: transparent;
    outline: none;
  }

  .home-view-all-btn:active {
    opacity: 0.65;
    transform: none;
  }

  .home-view-all-btn svg {
    color: currentColor;
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
    transition: transform 0.15s ease;
  }

  .home-view-all-btn:hover svg,
  .home-view-all-btn:focus-visible svg {
    transform: translateX(2px);
  }

  .search-empty-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0.85rem auto 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .search-empty-reset-btn:hover {
    background: var(--surface-raised);
    border-color: var(--ink);
  }

  /* Archive Toolbar & Layout Controls */
  .archive-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.65rem;
    margin-bottom: 1.15rem;
    padding: 0.2rem 0;
  }

  .archive-count-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.01em;
  }

  .archive-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
  }

  /* Archive Container Views */
  .archive-list--list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    border-top: none;
  }

  .archive-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.15rem;
  }

  /* Archive Cards */
  .archive-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
  }

  .archive-card--grid:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    background: var(--surface-raised);
  }

  .archive-card--grid:active {
    transform: translateY(0);
  }

  /* Editorial List Row — Text on Left, Compact 72x54px (4:3) Artwork on Right */
  .archive-card--list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
  }

  :root[data-theme="dark"] .archive-card--list {
    background: var(--surface);
    border-color: var(--border);
  }

  @media (hover: hover) and (pointer: fine) {
    .archive-card--list:hover {
      border-color: var(--border-strong);
    }
  }

  .archive-card--list:active {
    transform: scale(0.97);
    opacity: 0.92;
  }

  .archive-card--list .archive-card__thumb-wrap {
    order: 1;
    width: 72px;
    height: 54px;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-control);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--surface-2);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  .archive-card--list .archive-card__thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-control);
    display: block;
    box-shadow: none;
  }

  .archive-card--list .archive-card__body {
    order: 2;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }

  .archive-card__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .archive-card__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.38rem;
  }

  .archive-card__bottom-row .card-bookmark-btn {
    margin-right: 0.15rem;
    margin-bottom: -0.15rem;
  }

  .archive-card__thumb-brand {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Grid Card Layout — Sleek Inset-Media Card */
  .archive-card--grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.55rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 4px 18px rgba(10, 10, 10,  0.04);
  }

  :root[data-theme="dark"] .archive-card--grid {
    background: rgba(20, 20, 20,  0.82);
    border-color: rgba(248, 250, 252, 0.11);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  }

  .archive-card--grid .archive-card__cover-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    border-radius: var(--r-control);
    overflow: hidden;
    position: relative;
    background: var(--surface-2);
    outline: 1px solid var(--border);
    outline-offset: -1px;
  }

  :root[data-theme="dark"] .archive-card--grid .archive-card__cover-wrap {
    border-color: rgba(255, 255, 255, 0.07);
  }

  .archive-card--grid .archive-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .archive-card__cover-wrap--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(10, 10, 10,  0.06) 0%, rgba(212, 168, 67, 0.15) 100%);
  }

  :root[data-theme="dark"] .archive-card__cover-wrap--placeholder {
    background: linear-gradient(135deg, rgba(20, 20, 20,  0.9) 0%, rgba(212, 168, 67, 0.18) 100%);
  }

  .archive-card__cover-brand {
    font-family: var(--brand-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold);
    letter-spacing: 0.05em;
  }

  .archive-card--grid .archive-card__body {
    padding: 0.8rem 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Card Elements */
  .archive-card__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.32rem;
  }

  .archive-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    gap: 0.5rem;
  }

  .archive-card__date {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .archive-card__title {
    font-family: var(--sans);
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    flex: 1;
    min-width: 0;
  }

  .archive-card--grid .archive-card__title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-card--list .archive-card__top-row {
    margin-bottom: 0;
  }

  .archive-card--list .archive-card__title {
    font-size: 0.91rem;
    line-height: 1.25;
    letter-spacing: -0.018em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-card__excerpt {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.48;
    color: var(--muted);
    margin: 0 0 0.7rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-card--list .archive-card__excerpt {
    font-size: 0.78rem;
    line-height: 1.36;
    margin: 0.18rem 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-card--list .archive-card__date {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .archive-card--grid .archive-card__excerpt {
    -webkit-line-clamp: 2;
    flex-grow: 1;
  }

  .archive-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.2rem;
  }

  .archive-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold);
    transition: gap 0.15s ease;
  }

  .archive-card:hover .archive-card__cta {
    gap: 0.55rem;
  }

  .archive-card__cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .archive-list--grid {
      grid-template-columns: 1fr;
    }
  }

  /* --- Explore by Theme (Home) & Unified Archive Enhancements --- */
  .home-themes-strip {
    margin: 0.85rem 0 1.45rem;
  }
  .home-themes-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
  }
  .home-themes-strip__title {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }
  .home-themes-strip__scroll {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .home-themes-strip__scroll::-webkit-scrollbar {
    display: none;
  }
  .home-theme-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.45rem 0.85rem;
    min-height: 36px;
    border-radius: 20px;
    border: 1px solid var(--rule);
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .home-theme-pill:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
  }
  .home-theme-pill__count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
  }
  :root[data-theme="dark"] .home-theme-pill__count {
    color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.16);
  }

  /* Archive Format Filter Segmented Control */
  .archive-type-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 0.2rem;
    gap: 0.15rem;
    margin-bottom: 0.85rem;
  }
  :root[data-theme="dark"] .archive-type-tabs {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.1);
  }
  .archive-type-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.38rem 0.85rem;
    min-height: 32px;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .archive-type-tab:hover {
    color: var(--ink);
  }
  .archive-type-tab.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
    box-shadow: none;
  }
  :root[data-theme="dark"] .archive-type-tab.is-active {
    background: #F8FAFC;
    color: #0A0A0A;
    border-color: #F8FAFC;
    font-weight: 600;
    box-shadow: none;
  }

  /* Archive Card Topic Pills & Match Snippets */
  .archive-card__topics,
  .archive-card__meta-row,
  .search-badge {
    display: none !important;
  }
  .archive-card__snippet {
    font-family: var(--sans);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--muted);
    background: transparent;
    border-left: none;
    padding: 0;
    margin: 0.2rem 0 0.55rem;
  }
  .archive-search-mark {
    background: transparent;
    color: var(--gold);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    padding: 0;
  }
  :root[data-theme="dark"] .archive-search-mark {
    color: var(--gold-decorative);
  }
  .archive-card__timestamp-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 0.45rem;
  }
  :root[data-theme="dark"] .archive-card__timestamp-cue {
    color: var(--gold-decorative);
  }

  /* Reader Topic Pills & Companion Audio Banner */
  .reader-topics-row {
    display: none !important;
  }
  .reader-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.68rem;
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(212, 168, 67, 0.32);
    background: rgba(212, 168, 67, 0.09);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  :root[data-theme="dark"] .reader-topic-pill {
    color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.14);
  }
  .reader-topic-pill:hover {
    background: rgba(212, 168, 67, 0.22);
    transform: translateY(-1px);
  }
  .reader-companion-audio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin: var(--s-2) 0 0;
    border-radius: var(--r-card);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .reader-companion-audio:active {
    transform: scale(0.97);
  }
  .reader-companion-audio__left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
  }
  .reader-companion-audio__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .reader-companion-audio__icon {
    background: var(--accent);
    color: var(--on-accent);
  }
  .reader-companion-audio__meta {
    min-width: 0;
  }
  .reader-companion-audio__title {
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .reader-companion-audio__sub {
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-top: var(--s-1);
  }
  .reader-companion-audio__cta {
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-text);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .reader-recent__header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .reader-recent__sub {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    margin: -0.45rem 0 0.95rem;
  }

  /* Reader End-of-Article Upgrade Plan Card (Subtle, Simple & Sleek) */
  .reader-upgrade-card {
    margin: 2.5rem 0 1.5rem;
    padding: 1.35rem 1.4rem;
    border-radius: 20px;
    background: var(--paper-raised);
    border: 1px solid rgba(132, 101, 30, 0.22);
    box-shadow: 0 4px 18px rgba(10, 10, 10,  0.04);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .reader-upgrade-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--muted);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  .reader-upgrade-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 8px 24px var(--gold-glow);
  }
  :root[data-theme="dark"] .reader-upgrade-card:hover {
    border-color: var(--muted);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .reader-upgrade-card:active {
    transform: translateY(0);
  }
  .reader-upgrade-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    margin-bottom: 0.45rem;
  }
  :root[data-theme="dark"] .reader-upgrade-card__badge {
    color: var(--gold-decorative);
  }
  .reader-upgrade-card__title {
    font-family: var(--sans);
    font-size: calc(1.3rem - 2pt);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.4rem;
    line-height: 1.25;
  }
  .reader-upgrade-card__desc {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
  }
  .reader-upgrade-card__action {
    display: flex;
    align-items: center;
  }
  .reader-upgrade-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
  }
  :root[data-theme="dark"] .reader-upgrade-card__btn {
    background: var(--gold-decorative);
    color: #0A0A0A;
    font-weight: 700;
  }
  .reader-upgrade-card:hover .reader-upgrade-card__btn {
    transform: scale(1.02);
  }
  @media (min-width: 600px) {
    .reader-upgrade-card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.5rem 1.75rem;
    }
    .reader-upgrade-card__content {
      flex: 1;
      min-width: 0;
    }
    .reader-upgrade-card__action {
      flex-shrink: 0;
    }
  }

  /* Recent posts — shown after the article body inside the in-app reader.
     Reuses the same .issue-list row styling as the home page and archive,
     so a "recent post" here looks identical to one there. Every link still
     opens in the in-app reader, never Substack — same as everywhere else. */
  .reader-recent {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
  }

  .reader-recent__heading {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(0.95rem, 3.7vw, 1.02rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    color: var(--ink);
  }

  @media (max-width: 480px) {
    .reader-recent__heading {
      font-size: 0.95rem;
    }
  }

  .reader-recent__list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    border-top: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Asymmetric Editorial Masthead Strip (ISSUE 00X left | Date + Read Time right) */
  .reader-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: 0;
    padding-bottom: var(--s-3);
    margin-top: 0;
    margin-bottom: var(--s-4);
    border-top: none;
    border-bottom: none;
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--text-muted);
  }
  .reader-meta-bar:not(:has(~ :not([hidden]))) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .reader-meta-bar__cell {
    padding: 0;
    white-space: nowrap;
  }
  .reader-meta-bar__issue {
    display: inline-flex;
    align-items: center;
    font-family: var(--brand-serif);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--text);
    border-right: none;
  }
  .reader-meta-bar__issue::before {
    display: none;
    content: none;
  }
  .reader-meta-bar__utility {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    min-width: 0;
  }
  .reader-meta-bar__sep {
    width: 1px;
    height: var(--s-3);
    background: var(--border-strong);
    flex-shrink: 0;
  }
  .reader-meta-bar .reader-panel__date {
    display: inline-block;
    margin: 0;
    text-align: right;
    color: var(--text-muted);
    font-weight: 500;
  }
  .reader-meta-bar__est {
    padding-right: 0;
    border-left: none;
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
  }
  .reader-meta-bar__spent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.28);
    border-radius: 9999px;
    color: var(--gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  :root[data-theme="dark"] .reader-meta-bar__spent {
    background: rgba(212, 168, 67, 0.14);
    border-color: rgba(212, 168, 67, 0.38);
    color: var(--gold);
  }
  .reader-meta-bar__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
    animation: readerPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes readerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
  }

  /* Reading Activity Statistics Card removed from article view per request; accessible exclusively via Admin Analytics console */
  .reader-stats-card {
    display: none !important;
    margin: 2.5rem 0 0.5rem;
    padding: 1.4rem 1.5rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(10, 10, 10,  0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  :root[data-theme="dark"] .reader-stats-card {
    background: rgba(18, 18, 18,  0.75);
    border-color: rgba(212, 168, 67, 0.22);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }

  .reader-stats-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
  }

  .reader-stats-card__title-group {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .reader-stats-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
  }

  :root[data-theme="dark"] .reader-stats-card__icon {
    background: rgba(212, 168, 67, 0.18);
    color: var(--gold);
  }

  .reader-stats-card__label {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gold);
  }

  .reader-stats-badge {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
  }

  .reader-stats-badge--active {
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.3);
  }

  .reader-stats-badge--completed {
    background: rgba(46, 160, 67, 0.14);
    color: #2ea043;
    border: 1px solid rgba(46, 160, 67, 0.3);
  }
  :root[data-theme="dark"] .reader-stats-badge--completed {
    background: rgba(56, 189, 110, 0.18);
    color: #38bd6e;
    border-color: rgba(56, 189, 110, 0.4);
  }

  .reader-stats-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: readerPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .reader-stats-card__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 0.85rem;
    align-items: stretch;
  }

  @media (max-width: 540px) {
    .reader-stats-card__grid {
      grid-template-columns: 1fr;
      gap: 0.65rem;
    }
  }

  .reader-stats-card__item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(10, 10, 10,  0.025);
    border: 1px solid var(--rule);
  }

  :root[data-theme="dark"] .reader-stats-card__item {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
  }

  .reader-stats-card__item--featured {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.25);
  }
  :root[data-theme="dark"] .reader-stats-card__item--featured {
    background: rgba(212, 168, 67, 0.12);
    border-color: rgba(212, 168, 67, 0.35);
  }

  .reader-stats-card__metric-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }

  .reader-stats-card__value {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .reader-stats-card__item--featured .reader-stats-card__value {
    color: var(--gold);
  }

  .reader-stats-card__caption {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 0.3rem;
    font-weight: 500;
  }

  .reader-stats-card__progress-wrap {
    margin-top: 1.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--rule);
  }

  .reader-stats-card__progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.45rem;
  }

  .reader-stats-card__progress-track {
    height: 4px;
    background: var(--rule);
    border-radius: 9999px;
    overflow: hidden;
  }

  .reader-stats-card__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--gold);
    border-radius: 9999px;
    transition: width 0.2s ease-out;
  }

  /* Static in-app pages — About, Paid Membership, Intelligence Vault.
     Same reader-overlay/reader-panel shell as Archive above. The
     difference is there's no feed behind these: it's Victory's own
     written copy, sitting directly in the markup since it changes rarely
     and there's currently no server-side source to pull it from. */
  .static-page__intro {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--excerpt);
    margin: 0 0 1.4rem;
  }

  .offer-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    border: 1px solid rgba(10, 10, 10,  0.09);
    border-radius: 20px;
    padding: 1.45rem 1.35rem 1.5rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 8px 24px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  }
  :root[data-theme="dark"] .offer-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(20, 20, 20,  0.68) 100%);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .offer-card--premium {
    border: 1.5px solid var(--gold);
  }
  :root[data-theme="dark"] .offer-card--premium {
    border-color: rgba(212, 168, 67, 0.65);
  }

  .offer-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.55rem;
  }

  .offer-card__name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.02em;
  }

  .offer-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.26rem 0.64rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.06);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(10, 10, 10,  0.14);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  :root[data-theme="dark"] .offer-card__badge {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .offer-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-family: var(--sans);
    margin: 0;
  }

  .offer-card__amount {
    font-family: var(--sans);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .offer-card__unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
  }

  .offer-card__annual {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.28);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-left: 0.15rem;
  }

  .pricing-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem 0 1.65rem;
  }

  .pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    user-select: none;
  }

  .pricing-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .pricing-toggle__track {
    width: 48px;
    height: 26px;
    background: rgba(120, 120, 120, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  :root[data-theme="light"] .pricing-toggle__track {
    background: rgba(10, 10, 10, 0.12);
    border-color: rgba(10, 10, 10, 0.18);
  }

  .pricing-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pricing-toggle__input:checked + .pricing-toggle__track {
    background: var(--gold, #D4A843);
    border-color: var(--gold, #D4A843);
  }

  .pricing-toggle__input:checked + .pricing-toggle__track .pricing-toggle__thumb {
    transform: translateX(22px);
  }

  .pricing-toggle__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
  }

  .pricing-toggle__discount-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid rgba(212, 168, 67, 0.45);
    color: var(--gold, #D4A843);
  }

  .paid-title-br {
    display: none;
  }
  @media (max-width: 640px) {
    .paid-title-br {
      display: block;
    }
  }



  .offer-card__divider {
    height: 1px;
    background: var(--rule);
    margin: 1.05rem 0 1.1rem;
    border: none;
  }

  .offer-card__features {
    list-style: none;
    margin: 0 0 1.45rem;
    padding: 0;
  }

  .offer-card__features li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.85rem;
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
  }
  .offer-card__features li:first-child {
    padding-top: 0.1rem;
  }
  .offer-card__features li:last-child {
    padding-bottom: 0.1rem;
    margin-bottom: 0;
  }

  .offer-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.46rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(132, 101, 30, 0.12);
    border: 1px solid rgba(132, 101, 30, 0.28);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384651E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .offer-card__features li:first-child::before {
    top: 0.2rem;
  }
  :root[data-theme="dark"] .offer-card__features li::before {
    background-color: rgba(212, 168, 67, 0.15);
    border-color: rgba(212, 168, 67, 0.34);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A843' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .offer-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    background: var(--gold-decorative);
    color: #0A0A0A;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 0.82rem 1.4rem;
    border-radius: 999px;
    margin-top: 0.2rem;
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.22);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  }

  .offer-card__cta--vip {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.14);
  }

  .offer-card__cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }

  .offer-card__cta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .offer-card__note {
    margin: 0.65rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
  }

  /* ==========================================================================
     Payment Success Overlay — Minimalist Flat Design
     ========================================================================== */
  #payment-success-overlay {
    z-index: 100;
  }

  .payment-success-badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .payment-success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .payment-success-btn {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border-radius: 20px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    border: none;
  }

  .payment-success-btn--primary {
    background: var(--gold-accent, #D4A843);
    color: #0A0A0A;
  }

  .payment-success-btn--primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }

  .payment-success-btn--secondary {
    background: transparent;
    color: var(--text, #F8FAFC);
    border: 1px solid var(--border, rgba(248, 250, 252, 0.15));
  }

  .payment-success-btn--secondary:hover {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.3);
  }

  /* ==========================================================================
     Executive Video Briefings — Liquid Glass Switcher, Mid-Feed Rail & Modal
     ========================================================================== */
  .markets-hero-header {
    width: 100%;
    margin-bottom: 0.85rem;
    padding: 0;
  }

  .markets-hero-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    gap: 0.25rem;
    padding: 4px;
    border-radius: 20px;
    box-sizing: border-box;
    background: rgba(10, 10, 10, 0.045);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04);
  }

  :root[data-theme="dark"] .markets-hero-mode-tabs {
    background: rgba(18, 18, 18, 0.94);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.32);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .markets-hero-mode-tabs {
      background: rgba(10, 10, 10, 0.04);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
    }
    :root[data-theme="dark"] .markets-hero-mode-tabs {
      background: rgba(18, 18, 18, 0.72);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .markets-hero-mode-tabs {
      background: rgba(248, 250, 252, 0.92);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    :root[data-theme="dark"] .markets-hero-mode-tabs {
      background: rgba(18, 18, 18, 0.94);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  .markets-hero-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.42rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: 16px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
  }

  .markets-hero-mode-tab:hover:not(.active),
  .markets-hero-mode-tab:focus-visible:not(.active) {
    color: var(--text);
    outline: none;
  }

  .markets-hero-mode-tab.active {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.07), 0 1px 2px rgba(10, 10, 10, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  :root[data-theme="dark"] .markets-hero-mode-tab.active {
    background: rgba(248, 250, 252, 0.09);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(248, 250, 252, 0.14);
  }

  .markets-video-rail-wrap {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    margin: 0.5rem 0 0.7rem;
    padding: 0.9rem 0 0.75rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .markets-video-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding: 0 0.1rem;
  }

  .markets-video-rail-title {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
  }

  .markets-video-rail-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.5rem;
    margin: -0.4rem -0.35rem -0.4rem 0;
    background: transparent;
    border: none;
    color: var(--accent-text);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.16s ease-out;
  }

  .markets-video-rail-more:hover {
    opacity: 0.8;
  }

  .markets-video-rail {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.05rem 0.1rem 0.25rem;
  }

  .markets-video-rail::-webkit-scrollbar {
    display: none;
  }

  .markets-video-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
  }

  @media (min-width: 768px) {
    .markets-video-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.9rem;
    }
  }

  @media (min-width: 1100px) {
    .markets-video-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .markets-video-card {
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--thumb-bg);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.18s ease-out, border-color 0.18s ease-out;
    user-select: none;
  }

  .markets-video-card--rail {
    flex: 0 0 134px;
    width: 134px;
    height: 238px;
    scroll-snap-align: start;
  }

  .markets-video-card--grid {
    width: 100%;
    aspect-ratio: 9 / 16;
  }

  .markets-video-card:hover,
  .markets-video-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent);
    outline: none;
  }

  .markets-video-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .markets-video-card__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .markets-video-card__scrim {
    position: absolute;
    inset: 0;
    background: var(--video-scrim);
    pointer-events: none;
  }

  .markets-video-card__play {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.62);
    border: 1px solid rgba(248, 250, 252, 0.22);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .markets-video-card__content {
    position: relative;
    z-index: 1;
    padding: 0.65rem 0.65rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }

  .markets-video-card__meta {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .markets-video-card__title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cream);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
  }

  .markets-video-offline-note {
    grid-column: 1 / -1;
    padding: 0.85rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.8rem;
    text-align: center;
  }

  /* Full-Screen Native Video Briefing Modal */
  .markets-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  @media (min-width: 640px) {
    .markets-video-modal {
      padding: 1.25rem;
    }
  }

  .markets-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.82);
  }

  .markets-video-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    height: 100dvh;
    max-height: 100dvh;
    background: rgba(18, 18, 18, 0.94);
    color: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .markets-video-panel {
      background: rgba(18, 18, 18, 0.78);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
    }
  }

  @media (min-width: 640px) {
    .markets-video-panel {
      height: min(820px, 92dvh);
      border-radius: 20px;
      border: 1px solid rgba(248, 250, 252, 0.14);
    }
  }

  .markets-video-panel__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: calc(0.65rem + env(safe-area-inset-top)) 0.85rem 0.65rem;
    border-bottom: 1px solid rgba(248, 250, 252, 0.1);
    flex-shrink: 0;
  }

  .markets-video-panel__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .markets-video-panel__counter {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
    margin-right: 0.25rem;
    flex-shrink: 0;
  }

  .markets-video-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 20px;
    border: 1px solid rgba(248, 250, 252, 0.14);
    background: rgba(248, 250, 252, 0.06);
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
  }

  .markets-video-icon-btn:hover,
  .markets-video-icon-btn:focus-visible {
    background: rgba(248, 250, 252, 0.14);
    border-color: var(--accent);
    outline: none;
  }

  .markets-video-icon-btn:disabled {
    opacity: 0.36;
    cursor: not-allowed;
  }

  .markets-video-stage {
    position: relative;
    flex: 1;
    width: 100%;
    background: var(--video-stage-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .markets-video-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .markets-video-stage__status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--video-stage-bg);
    color: rgba(248, 250, 252, 0.82);
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.5;
    z-index: 3;
  }

  .markets-video-pause-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 10, 10, 0.9);
    cursor: pointer;
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .markets-video-pause-shield {
      background: rgba(18, 18, 18, 0.74);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
    }
  }

  .markets-video-pause-shield__card {
    width: 100%;
    max-width: 310px;
    padding: 1.25rem 1.15rem;
    border-radius: 20px;
    border: 1px solid rgba(248, 250, 252, 0.12);
    background: rgba(18, 18, 18, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
  }

  .markets-video-pause-shield__meta {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .markets-video-pause-shield__title {
    font-family: var(--serif);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cream);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .markets-video-resume-btn {
    min-height: 44px;
    padding: 0 1.15rem;
    margin-top: 0.2rem;
    border-radius: 20px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: opacity 0.16s ease-out;
  }

  .markets-video-resume-btn:hover {
    opacity: 0.9;
  }

  .markets-video-panel__footer {
    padding: 0.8rem 0.95rem calc(0.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(248, 250, 252, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex-shrink: 0;
  }

  .markets-video-panel__headline {
    margin: 0;
    font-family: var(--serif);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.34;
    color: var(--cream);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .markets-video-panel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .markets-video-nav-btn {
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(248, 250, 252, 0.14);
    background: rgba(248, 250, 252, 0.06);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
  }

  .markets-video-nav-btn:hover:not(:disabled),
  .markets-video-nav-btn:focus-visible:not(:disabled) {
    background: rgba(248, 250, 252, 0.14);
    border-color: var(--accent);
    outline: none;
  }

  .markets-video-nav-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  .markets-video-source-link {
    min-height: 44px;
    padding: 0 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(212, 168, 67, 0.35);
    background: rgba(212, 168, 67, 0.12);
    color: var(--accent);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: background-color 0.16s ease-out;
  }

  .markets-video-source-link:hover {
    background: rgba(212, 168, 67, 0.22);
  }

  @media (prefers-reduced-motion: reduce) {
    .markets-video-card,
    .markets-video-icon-btn,
    .markets-video-nav-btn,
    .markets-video-source-link {
      transition: none;
    }
  }

  /* ==========================================================================
     In-App Email Newsletter Subscription — Modern & Sleek
     ========================================================================== */
  .newsletter-signup-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 1.5rem 1.4rem;
    margin: 1.25rem 0 1.5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  :root[data-theme="dark"] .newsletter-signup-card {
    background: rgba(16, 16, 16,  0.65);
    border-color: rgba(212, 168, 67, 0.18);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .newsletter-signup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.8;
  }
  .newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.28);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
  }
  .newsletter-signup-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.28;
    margin: 0 0 0.35rem;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .newsletter-signup-schedule {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.85rem;
  }
  .newsletter-signup-desc {
    font-family: var(--sans);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--excerpt);
    margin: 0 0 1.2rem;
  }
  .newsletter-form {
    margin: 0;
  }
  .newsletter-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  @media (min-width: 520px) {
    .newsletter-input-group {
      flex-direction: row;
      align-items: stretch;
    }
  }
  .newsletter-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .newsletter-input-icon {
    position: absolute;
    left: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.18s ease;
  }
  .newsletter-input {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.95rem;
    padding: 0.78rem 1rem 0.78rem 2.6rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    min-height: 46px;
    box-sizing: border-box;
  }
  :root[data-theme="dark"] .newsletter-input {
    background: rgba(10, 10, 10,  0.75);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .newsletter-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
  }
  .newsletter-input-wrap:focus-within .newsletter-input-icon {
    color: var(--gold);
  }
  .newsletter-input::placeholder {
    color: var(--muted);
    opacity: 0.75;
  }
  .newsletter-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.4rem;
    background: var(--gold-decorative);
    color: var(--navy);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 46px;
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.25);
  }
  .newsletter-submit-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.35);
  }
  .newsletter-submit-btn:active {
    transform: translateY(0);
  }
  .newsletter-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    filter: none;
  }
  .newsletter-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(10, 10, 10,  0.3);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: newsletter-spin 0.6s linear infinite;
  }
  @keyframes newsletter-spin {
    to { transform: rotate(360deg); }
  }
  .newsletter-feedback {
    margin-top: 0.65rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.4;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
  }
  .newsletter-feedback--error {
    background: rgba(224, 82, 82, 0.12);
    color: #e05252;
    border: 1px solid rgba(224, 82, 82, 0.28);
  }
  .newsletter-success-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.25);
    border-radius: 14px;
    padding: 1.15rem;
  }
  .newsletter-success-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .newsletter-success-title {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.25rem;
  }
  .newsletter-success-text {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--excerpt);
    margin: 0 0 0.5rem;
  }
  .newsletter-change-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: underline;
    cursor: pointer;
  }
  .newsletter-change-btn:hover {
    filter: brightness(1.15);
  }
  .home-newsletter-section {
    margin: 2.2rem 0 1.5rem;
  }
  .reader-newsletter-card {
    margin: 2rem 0 1.5rem;
  }

  /* ==========================================================================
     Store / Intelligence Vault — Modern & Sleek Executive UI
     ========================================================================== */
  #vault-overlay,
  #vault-overlay .reader-panel {
    background: #EEF2F6;
  }
  :root[data-theme="dark"] #vault-overlay,
  :root[data-theme="dark"] #vault-overlay .reader-panel {
    background: #060A12;
  }

  #vault-overlay .reader-panel__scroll {
    max-width: 680px;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  #store-catalog-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
  }
  #store-catalog-view[hidden],
  .store-detail-view[hidden] {
    display: none !important;
  }

  /* --- Layer 1: Recessed Upper Header Deck (Above the Rounded Curve) --- */
  .store-upper-deck {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1.05rem 1.15rem 1.15rem;
  }

  /* --- Layer 2: Elevated Rounded Content Sheet (Below the Curve) --- */
  .store-content-sheet {
    flex: 1;
    background: var(--paper, #F8FAFC);
    border-radius: 30px 30px 0 0;
    padding: 1.45rem 1.15rem calc(var(--nav-clearance, 5rem) + 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 -8px 26px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  :root[data-theme="dark"] .store-content-sheet {
    background: linear-gradient(180deg, #161616 0%, #0A0A0A 220px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* --- Sheet Header Row (Inside the Curve: Title + 3-Line Toggle Icon) --- */
  .store-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
  }

  .store-user-greeting {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  .store-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--paper-raised);
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-family: var(--brand-serif);
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08);
  }
  :root[data-theme="dark"] .store-avatar {
    background: var(--navy-raised);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }

  .store-greeting-title {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
  }

  .store-greeting-sub {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.15rem 0 0;
    line-height: 1.35;
  }

  /* --- Search & Layout Controls --- */
  .store-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  .store-search-box__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .store-search-box__input {
    width: 100%;
    padding: 0.72rem 1rem 0.72rem 2.55rem;
    font-family: var(--sans);
    font-size: 0.88rem;
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ink);
    transition: all 0.18s ease;
    box-shadow: 0 3px 12px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  :root[data-theme="dark"] .store-search-box__input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .store-search-box__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.18);
  }
  .store-search-box__input::placeholder {
    color: var(--muted);
    opacity: 0.85;
  }

  .store-view-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .store-view-toggle {
    background: var(--navy-raised);
  }
  .store-view-toggle:hover {
    color: var(--gold);
    border-color: var(--gold);
  }

  /* --- Category Tabs (Bookworm For You / Best Seller / Coming Soon) --- */
  .store-nav-tabs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.75rem;
    margin-bottom: 1.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .store-nav-tabs::-webkit-scrollbar { display: none; }

  .store-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
  }
  .store-tab:hover {
    color: var(--ink);
    border-color: var(--gold);
  }
  .store-tab.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.14);
  }
  :root[data-theme="dark"] .store-tab.is-active {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  /* --- Featured Banner (Podcast List View Card Design) --- */
  .store-featured-wrap {
    margin-bottom: 1.65rem;
  }

  .store-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .store-section-label__title {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0;
  }

  .store-section-label__badge {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .store-featured-banner {
    display: flex;
    align-items: center;
    gap: 1.08rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 20px;
    padding: 1.05rem 1.12rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s ease,
                background-color 0.22s ease;
    will-change: transform;
    cursor: pointer;
  }
  .store-animate-in .store-featured-banner {
    animation: storeCardEntrance 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.05s;
  }
  :root[data-theme="dark"] .store-featured-banner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(20, 20, 20,  0.68) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  @media (hover: hover) {
    .store-featured-banner:hover {
      transform: translateY(-2px);
      border-color: rgba(132, 101, 30, 0.32);
      box-shadow: 0 12px 28px rgba(10, 10, 10,  0.085), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }
    :root[data-theme="dark"] .store-featured-banner:hover {
      border-color: rgba(212, 168, 67, 0.42);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    .store-featured-banner:hover .store-featured-banner__img {
      transform: scale(1.05);
    }
    .store-featured-banner:hover .store-banner-cta {
      background: rgba(10, 10, 10,  0.12);
      border-color: rgba(10, 10, 10,  0.22);
      transform: scale(1.02);
    }
    :root[data-theme="dark"] .store-featured-banner:hover .store-banner-cta {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.38);
    }
  }
  .store-featured-banner:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .store-featured-banner__thumb {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0A0A0A 0%, #242424 100%);
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :root[data-theme="dark"] .store-featured-banner__thumb {
    background: linear-gradient(135deg, #0A0A0A 0%, #171717 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .store-featured-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .store-featured-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .store-featured-banner__title {
    font-family: var(--serif);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 0.64rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.02em;
  }

  .store-featured-banner__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.36rem;
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    margin: 0 0 0.78rem;
  }

  .store-featured-banner__kicker {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .store-featured-banner__dot {
    opacity: 0.45;
    font-size: 0.65rem;
  }

  .store-featured-banner__foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .store-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: rgba(10, 10, 10,  0.075);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(10, 10, 10,  0.14);
    color: var(--ink);
    padding: 0.34rem 0.82rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.05), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  }
  .store-banner-cta svg {
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .store-featured-banner:hover .store-banner-cta svg {
    transform: translateX(1.5px);
  }
  :root[data-theme="dark"] .store-banner-cta {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  @media (max-width: 420px) {
    .store-featured-banner {
      padding: 0.92rem 0.96rem;
      gap: 0.92rem;
      border-radius: 16px;
    }
    .store-featured-banner__thumb {
      width: 86px;
      height: 86px;
      border-radius: 12px;
    }
    .store-featured-banner__title {
      font-size: 0.96rem;
      line-height: 1.26;
      margin: 0 0 0.38rem;
    }
    .store-featured-banner__meta {
      font-size: 0.66rem;
      margin: 0 0 0.68rem;
    }
    .store-banner-cta {
      padding: 0.3rem 0.74rem;
      font-size: 0.71rem;
    }
  }

  /* --- 2-Column Pedestal Catalog Grid (Screenshot-Inspired Design) --- */
  .store-book-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 2rem;
  }
  @media (min-width: 580px) {
    .store-book-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.1rem;
    }
  }

  /* Optional List View when toggled */
  .store-book-grid.is-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .store-book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.65rem 0.65rem 0.85rem;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(10, 10, 10,  0.08);
    box-shadow: 0 6px 20px rgba(10, 10, 10,  0.045), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
  }
  .store-animate-in .store-book-card {
    animation: storeCardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.1s + var(--stagger-index, 0) * 0.065s);
  }
  :root[data-theme="dark"] .store-book-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(18, 18, 18,  0.84) 100%);
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--ink);
  }
  @media (hover: hover) {
    .store-book-card:hover {
      transform: translateY(-3px);
      border-color: rgba(132, 101, 30, 0.32);
      box-shadow: 0 12px 28px rgba(10, 10, 10,  0.085), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
    :root[data-theme="dark"] .store-book-card:hover {
      border-color: rgba(212, 168, 67, 0.42);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .store-book-card:hover .store-book-card__cover {
      transform: scale(1.04);
    }
    .store-book-card:hover .store-book-card__cta svg {
      transform: translateX(2px);
    }
  }
  .store-book-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .store-book-card__cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.04;
    border-radius: 14px;
    background: linear-gradient(135deg, #0A0A0A 0%, #242424 100%);
    overflow: hidden;
    margin-bottom: 0.72rem;
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.1);
    border: 1px solid rgba(10, 10, 10,  0.06);
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .store-book-card__cover-wrap {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
  }

  .store-book-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .store-book-card__badge {
    display: none;
  }

  /* Clean Bottom Pedestal Text Area Below Cover Artwork */
  .store-book-card__info {
    position: static;
    padding: 0 0.2rem;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: none;
    box-shadow: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }

  .store-book-card__title {
    font-family: var(--serif);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.22;
    color: var(--ink);
    margin: 0 0 0.38rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.015em;
    transition: color 0.2s ease;
  }

  .store-book-card__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .store-book-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.26rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.18s ease, color 0.2s ease;
  }
  .store-book-card__cta svg {
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }

  @media (max-width: 420px) {
    .store-book-card {
      padding: 0.56rem 0.56rem 0.76rem;
      border-radius: 18px;
    }
    .store-book-card__cover-wrap {
      border-radius: 12px;
      margin-bottom: 0.62rem;
    }
    .store-book-card__title {
      font-size: 0.86rem;
      margin-bottom: 0.32rem;
    }
    .store-book-card__cta {
      font-size: 0.68rem;
    }
  }

  .store-tag-mini {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.06);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: var(--ink);
    border: 1px solid rgba(10, 10, 10,  0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }
  :root[data-theme="dark"] .store-tag-mini {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .store-tag-mini--gold {
    background: rgba(10, 10, 10,  0.075);
    color: var(--ink);
    border-color: rgba(10, 10, 10,  0.15);
  }
  :root[data-theme="dark"] .store-tag-mini--gold {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.32);
  }

  /* List view variation for store card (matches Podcast List View .home-podcast-card) */
  .store-book-grid.is-list .store-book-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    aspect-ratio: auto;
    min-height: auto;
    padding: 0.88rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64) 0%, rgba(248, 250, 252, 0.78) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 8px 24px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    color: var(--ink);
  }
  :root[data-theme="dark"] .store-book-grid.is-list .store-book-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(20, 20, 20,  0.68) 100%);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .store-book-grid.is-list .store-book-card__cover-wrap {
    position: relative;
    inset: auto;
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .store-book-grid.is-list .store-book-card__badge {
    display: none;
  }
  .store-book-grid.is-list .store-book-card__info {
    position: static;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .store-book-grid.is-list .store-book-card__title {
    color: var(--ink);
    font-size: 0.98rem;
    margin-bottom: 0.36rem;
    padding-right: 0;
    text-align: left;
  }
  .store-book-grid.is-list .store-book-card__tags {
    justify-content: flex-start;
  }
  .store-book-grid.is-list .store-book-card__tag {
    color: var(--muted);
    font-size: 0.66rem;
  }
  .store-book-grid.is-list .store-book-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    background: rgba(10, 10, 10,  0.075);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(10, 10, 10,  0.14);
    border-radius: 999px;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.05), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.32rem 0.78rem;
  }
  .store-book-grid.is-list .store-book-card__cta svg {
    color: var(--gold);
  }
  :root[data-theme="dark"] .store-book-grid.is-list .store-book-card__cta {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  /* --- Detail Screen (Screen 3 of Bookworm) --- */
  .store-detail-view {
    flex: 1;
    min-height: 100vh;
    background: var(--paper, #F8FAFC);
    border-radius: 30px 30px 0 0;
    padding: 1.35rem 1.2rem calc(var(--nav-clearance, 5rem) + 1rem);
    margin-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 -8px 26px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: storeFadeIn 0.22s ease;
  }
  :root[data-theme="dark"] .store-detail-view {
    background: linear-gradient(180deg, #161616 0%, #0A0A0A 220px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  @keyframes storeFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes storeCardEntrance {
    0% {
      opacity: 0;
      transform: translateY(18px) scale(0.97);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .store-animate-in .store-featured-banner,
    .store-animate-in .store-book-card {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  .store-detail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }

  .store-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
  }
  .store-back-btn:hover {
    color: var(--gold);
  }

  .store-detail-bar__title {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
  }

  .store-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 10,  0.08);
    background: #FFFFFF;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(10, 10, 10,  0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .store-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .store-icon-btn svg {
    flex-shrink: 0;
    display: block;
  }
  .store-icon-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
  }
  .store-icon-btn.is-active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 67, 0.14);
  }
  :root[data-theme="dark"] .store-icon-btn.is-active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 67, 0.18);
  }
  .store-icon-btn.is-active svg {
    fill: currentColor;
  }

  /* Detail Hero Card (matching Screen 3) */
  .store-detail-hero {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 20px rgba(10, 10, 10,  0.05);
  }
  :root[data-theme="dark"] .store-detail-hero {
    background: var(--navy-raised);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  }
  @media (min-width: 520px) {
    .store-detail-hero {
      grid-template-columns: 140px 1fr;
      gap: 1.5rem;
    }
  }

  .store-detail-hero__cover-wrap {
    width: 100%;
    aspect-ratio: 1 / 1.35;
    border-radius: 12px;
    overflow: hidden;
    background: #0A0A0A;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
  }

  .store-detail-hero__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .store-detail-hero__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
  }

  .store-detail-hero__title {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.18;
    margin: 0;
  }

  .store-detail-hero__author {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
  }

  .store-detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
  }

  /* Detail Primary CTA Button */
  .store-detail-cta-wrap {
    margin-bottom: 1.25rem;
  }

  .store-detail-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    background: #D4A843; /* App Brand Gold */
    color: #0A0A0A; /* Deep Navy text for crisp high contrast on gold */
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(212, 168, 67, 0.32);
    transition: all 0.18s ease;
  }
  .store-detail-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 168, 67, 0.42);
  }
  .store-detail-cta-btn:active {
    transform: translateY(0);
  }

  .store-detail-cta__note {
    font-size: 0.74rem;
    color: var(--muted);
    text-align: center;
    margin: 0.45rem 0 0;
  }

  /* Secondary Action Row (+ My List, Review, Share) */
  .store-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .store-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.4rem;
    border-radius: 12px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .store-action-btn {
    background: var(--navy-raised);
  }
  .store-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .store-action-btn svg {
    color: var(--gold);
  }

  /* Save to Vault heart micro-interaction */
  #store-btn-save {
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1),
                border-color 0.2s ease,
                color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;
  }

  #store-save-icon {
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                fill 0.25s ease,
                stroke 0.25s ease,
                filter 0.25s ease;
    transform-origin: center;
  }

  #store-btn-save.is-saved {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 67, 0.08);
  }
  :root[data-theme="dark"] #store-btn-save.is-saved {
    background: rgba(212, 168, 67, 0.14);
  }

  #store-btn-save.is-saved #store-save-icon {
    color: var(--gold);
  }

  /* Tactile Haptic Button Bounce */
  #store-btn-save.save-haptic {
    animation: storeHapticTap 0.38s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Heart Pop & Fill Explosion */
  #store-btn-save.save-pop #store-save-icon {
    animation: storeHeartFillPop 0.52s cubic-bezier(0.175, 0.885, 0.32, 1.35);
  }

  /* Heart Deflation when un-saving */
  #store-btn-save.unsave-pop #store-save-icon {
    animation: storeHeartUnsavePop 0.32s ease;
  }

  @keyframes storeHapticTap {
    0% {
      transform: scale(1);
    }
    22% {
      transform: scale(0.92) translateY(1.5px);
    }
    48% {
      transform: scale(1.05) translateY(-1.5px);
      box-shadow: 0 0 16px rgba(212, 168, 67, 0.38);
    }
    75% {
      transform: scale(0.98) translateY(0.5px);
    }
    100% {
      transform: scale(1) translateY(0);
      box-shadow: none;
    }
  }

  @keyframes storeHeartFillPop {
    0% {
      transform: scale(1);
      fill: none;
    }
    20% {
      transform: scale(0.62);
      fill: var(--gold);
    }
    45% {
      transform: scale(1.42);
      fill: var(--gold);
      filter: drop-shadow(0 0 7px rgba(212, 168, 67, 0.7));
    }
    70% {
      transform: scale(0.92);
      fill: var(--gold);
    }
    85% {
      transform: scale(1.06);
      fill: var(--gold);
    }
    100% {
      transform: scale(1);
      fill: var(--gold);
      filter: none;
    }
  }

  @keyframes storeHeartUnsavePop {
    0% {
      transform: scale(1);
    }
    35% {
      transform: scale(0.78);
    }
    70% {
      transform: scale(1.08);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #store-btn-save.save-haptic,
    #store-btn-save.save-pop #store-save-icon,
    #store-btn-save.unsave-pop #store-save-icon {
      animation: none !important;
    }
  }

  .store-detail-section {
    margin-bottom: 1.5rem;
  }

  .store-detail-section__title {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.5rem;
  }

  .store-detail-desc {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--excerpt);
    margin: 0;
  }

  .store-steps-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .store-step-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--excerpt);
  }

  .store-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(212, 168, 67, 0.15);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .store-empty-search {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.25rem 3.25rem;
    margin: 1.25rem auto 2.5rem;
    max-width: 440px;
    background: var(--paper-raised);
    border: 1px dashed var(--rule);
    border-radius: 20px;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  :root[data-theme="dark"] .store-empty-search {
    background: var(--navy-raised);
    border-color: rgba(212, 168, 67, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .store-empty-illustration-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .store-empty-illustration {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(212, 168, 67, 0.16));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .store-empty-search:hover .store-empty-illustration {
    transform: scale(1.05) rotate(-1deg);
  }

  .store-empty-title {
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.45rem;
    letter-spacing: -0.02em;
  }

  .store-empty-subtitle {
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 1.25rem;
    max-width: 320px;
  }

  .store-empty-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.32);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .store-empty-clear-btn:hover {
    background: rgba(212, 168, 67, 0.22);
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.2);
  }
  .store-empty-clear-btn:active {
    transform: translateY(0);
  }
  .store-empty-clear-btn svg {
    margin: 0;
    opacity: 0.95;
  }

  /* Settings — currently just Appearance, but its own section block so a
     future setting has somewhere to go without restructuring this page. */
  .settings-section { margin: 0 0 2rem; }

  .settings-section__label {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.75rem;
  }

  .theme-switch {
    display: flex;
    gap: 0.28rem;
    padding: 0.26rem;
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 14px;
    background: rgba(10, 10, 10,  0.055);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10,  0.04);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  :root[data-theme="dark"] .theme-switch {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(248, 250, 252, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .theme-switch__option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.58rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .theme-switch__option svg { width: 16px; height: 16px; flex-shrink: 0; }

  .theme-switch__option:hover {
    color: var(--ink);
    background: rgba(10, 10, 10,  0.035);
  }
  :root[data-theme="dark"] .theme-switch__option:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
  }

  .theme-switch__option[aria-checked="true"] {
    background: #FFFFFF;
    color: #0A0A0A;
    font-weight: 700;
    border-color: rgba(10, 10, 10,  0.08);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
  }

  :root[data-theme="dark"] .theme-switch__option[aria-checked="true"] {
    background: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    font-weight: 700;
    border-color: rgba(248, 250, 252, 0.16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .theme-switch__option:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  /* Notification Settings in Settings Page */
  .settings-section__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .settings-section__description {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 1rem;
  }

  .settings-section__sublabel {
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.25rem 0 0.65rem;
  }

  .settings-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--rule);
    color: var(--muted);
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .settings-badge--active {
    background: rgba(132, 101, 30, 0.16);
    color: var(--gold);
    border: 1px solid rgba(132, 101, 30, 0.35);
  }

  :root[data-theme="dark"] .settings-badge--active {
    background: rgba(212, 168, 67, 0.18);
    color: var(--gold);
    border-color: rgba(212, 168, 67, 0.4);
  }

  .settings-badge--blocked {
    background: rgba(190, 50, 50, 0.15);
    color: #c93b3b;
    border: 1px solid rgba(190, 50, 50, 0.3);
  }

  :root[data-theme="dark"] .settings-badge--blocked {
    background: rgba(235, 87, 87, 0.2);
    color: #ff7878;
    border-color: rgba(235, 87, 87, 0.4);
  }

  .settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .settings-card__content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
  }

  .settings-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
  }

  .settings-card__icon svg {
    width: 19px;
    height: 19px;
  }

  .settings-card__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }

  .settings-card__subtitle {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    margin-top: 0.15rem;
  }

  /* Accessible Modern Toggle Switch */
  .settings-toggle-switch {
    position: relative;
    width: 48px;
    height: 28px;
    background: rgba(10, 10, 10,  0.18);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.22s ease, border-color 0.22s ease;
    display: inline-flex;
    align-items: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  :root[data-theme="dark"] .settings-toggle-switch {
    background: rgba(248, 250, 252, 0.18);
  }

  .settings-toggle-switch__thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.22s ease;
    display: block;
    transform: translateX(0);
    pointer-events: none;
  }

  .settings-toggle-switch[aria-checked="true"] {
    background: #0A0A0A;
    border-color: #0A0A0A;
  }

  .settings-toggle-switch[aria-checked="true"] .settings-toggle-switch__thumb {
    background: #FFFFFF;
    transform: translateX(20px);
  }

  :root[data-theme="dark"] .settings-toggle-switch[aria-checked="true"] {
    background: #F8FAFC;
    border-color: #F8FAFC;
  }

  :root[data-theme="dark"] .settings-toggle-switch[aria-checked="true"] .settings-toggle-switch__thumb {
    background: #0A0A0A;
  }

  .settings-toggle-switch:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .settings-toggle-switch--sm {
    width: 42px;
    height: 24px;
    padding: 2px;
  }

  .settings-toggle-switch--sm .settings-toggle-switch__thumb {
    width: 18px;
    height: 18px;
  }

  .settings-toggle-switch--sm[aria-checked="true"] .settings-toggle-switch__thumb {
    transform: translateX(18px);
  }

  .settings-notification-channels {
    transition: opacity 0.2s ease;
  }

  .settings-notification-channels[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  .settings-topic-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.85rem;
  }

  .settings-topic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .settings-topic-info {
    flex: 1;
    min-width: 0;
  }

  .settings-topic-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }

  .settings-topic-subtitle {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.4;
    margin-top: 0.15rem;
  }

  .settings-notif-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }

  .settings-test-notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 8px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .settings-test-notif-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  .settings-notif-hint {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.4;
  }

  .settings-notif-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(190, 50, 50, 0.08);
    border: 1px solid rgba(190, 50, 50, 0.25);
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  :root[data-theme="dark"] .settings-notif-warning {
    background: rgba(235, 87, 87, 0.12);
    border-color: rgba(235, 87, 87, 0.35);
  }

  .settings-notif-warning svg {
    color: #c93b3b;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }

  :root[data-theme="dark"] .settings-notif-warning svg {
    color: #ff7878;
  }

  /* Settings Unsubscribe & Email Briefing */
  .settings-unsubscribe-btn {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-size: 0.78rem;
    font-family: var(--sans);
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .settings-unsubscribe-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: rgba(10, 10, 10,  0.05);
  }

  :root[data-theme="dark"] .settings-unsubscribe-btn:hover {
    background: rgba(248, 250, 252, 0.08);
  }

  .settings-unsubscribe-btn--resubscribe {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 67, 0.08);
  }

  .settings-unsubscribe-btn--resubscribe:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
  }

  .settings-badge--unsubscribed {
    background: var(--rule);
    color: var(--muted);
    border: 1px solid transparent;
  }

  /* --- Auto-Dim Reading Panel System ------------------------------------
     Dynamically adjusts the reading panel brightness, contrast, and circadian
     warmth based on local time of day, beyond simple light/dark theme selection. */
  #reader-overlay.autodim-active .reader-panel {
    filter: brightness(var(--reader-dim-brightness, 1)) contrast(var(--reader-dim-contrast, 1)) sepia(var(--reader-dim-sepia, 0%));
    transition: filter 0.4s ease;
  }

  .reader-dim-curtain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    background: rgba(10, 10, 10,  var(--reader-curtain-alpha, 0));
    transition: opacity 0.4s ease, background-color 0.4s ease;
  }

  :root[data-theme="dark"] .reader-dim-curtain {
    background: rgba(0, 0, 0, var(--reader-curtain-alpha, 0));
  }

  .autodim-status-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.85rem;
    border-radius: 13px;
    border: 1px solid rgba(10, 10, 10,  0.06);
    background: rgba(10, 10, 10,  0.04);
    margin-top: 0.55rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  }

  :root[data-theme="dark"] .autodim-status-card {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .autodim-off-caption {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
  }

  .autodim-status-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.06);
    color: #0A0A0A;
    border: 1px solid rgba(10, 10, 10, 0.08);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  :root[data-theme="dark"] .autodim-status-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .autodim-status-icon svg {
    width: 18px;
    height: 18px;
  }

  .autodim-status-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .autodim-status-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }

  .autodim-status-desc {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.35;
  }

  .autodim-subcontrols {
    transition: opacity 0.2s ease;
  }

  .autodim-subcontrols[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
  }

  .autodim-intensity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
  }

  .autodim-intensity-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
  }

  .autodim-intensity-switch {
    flex: 1;
    max-width: 220px;
  }

  .autodim-intensity-switch .theme-switch__option {
    padding: 0.35rem 0.5rem;
    font-size: 0.76rem;
  }

  .autodim-mode-switch .theme-switch__option {
    padding: 0.45rem 0.4rem;
    font-size: 0.8rem;
  }

  /* --- Glass morphism ---------------------------------------------------
     Scoped to exactly two places, per the UI brief: the floating reading-
     settings button and the sheet it opens. Never the reading surface
     itself (flat and solid there, on purpose, see the brief's Glass
     Morphism section — nothing busy sits behind that text to blur, and
     backdrop-filter is one of the more GPU-expensive things a browser can
     render, the wrong cost to add to a screen someone stares at for nine
     minutes). Solid rgba fallback first, so Opera Mini's data-saver mode
     and any other non-supporting browser gets a perfectly readable panel
     with no broken effect. */
  .glass-surface {
    /* Stage 1: Explicit solid fallback base using official brand tokens (#F8FAFC in light, #0A0A0A in dark) */
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--glass-shadow, 0 4px 18px rgba(10, 10, 10, 0.05));
  }
  :root[data-theme="dark"] .glass-surface {
    background: #0A0A0A;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  }
  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .glass-surface {
      background: var(--glass-bg-blur);
      -webkit-backdrop-filter: blur(20px) var(--glass-saturate);
      backdrop-filter: blur(20px) var(--glass-saturate);
      border: var(--glass-border);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: transform;
    }
    :root[data-theme="dark"] .glass-surface {
      background: rgba(10, 10, 10, 0.82);
      border-color: rgba(255, 255, 255, 0.08);
    }
  }
  /* Stage 3: Explicit Opera Mini & Low-End GPU Fallback Hardening */
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .glass-surface {
      background: #F8FAFC !important;
      border: 1px solid rgba(10, 10, 10, 0.12) !important;
      box-shadow: 0 4px 14px rgba(10, 10, 10, 0.08) !important;
    }
    :root[data-theme="dark"] .glass-surface {
      background: #0A0A0A !important;
      border: 1px solid rgba(212, 168, 67, 0.22) !important;
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7) !important;
    }
  }

  /* Floating settings button — bottom-right, persists regardless of scroll
     position or the bar's auto-hide state (it's a sibling of .reader-panel,
     not a child of the bar), because forcing someone to scroll up first
     just to reach text-size controls is friction at the exact moment
     they've decided the text is too small. Only rendered inside the actual
     issue reader. */
  .reader-fab {
    position: fixed;
    right: 1.1rem;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    z-index: 22;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(16, 16, 16,  0.18);
    cursor: pointer;
  }
  :root[data-theme="dark"] .reader-fab { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
  .reader-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .reader-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 10, 10,  0.36);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
  }

  :root[data-theme="dark"] .reader-settings-backdrop {
    background: rgba(4, 8, 16, 0.58);
  }

  .reader-settings-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 41;
    max-width: 540px;
    max-height: calc(100vh - 64px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0.65rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(10, 10, 10,  0.08);
    border-left: 1px solid rgba(10, 10, 10,  0.08);
    border-right: 1px solid rgba(10, 10, 10,  0.08);
    border-bottom: none;
    box-shadow: 0 -12px 40px rgba(10, 10, 10,  0.16), 0 -2px 10px rgba(10, 10, 10,  0.05);
    touch-action: pan-y;
    overflow: hidden;
  }
  @supports (backdrop-filter: blur(28px)) or (-webkit-backdrop-filter: blur(28px)) {
    .reader-settings-sheet {
      background: rgba(255, 255, 255, 0.95);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      backdrop-filter: blur(28px) saturate(160%);
    }
  }
  :root[data-theme="dark"] .reader-settings-sheet {
    background: rgba(18, 18, 18,  0.98);
    border-top-color: rgba(248, 250, 252, 0.10);
    border-left-color: rgba(248, 250, 252, 0.10);
    border-right-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  }
  @supports (backdrop-filter: blur(28px)) or (-webkit-backdrop-filter: blur(28px)) {
    :root[data-theme="dark"] .reader-settings-sheet {
      background: rgba(18, 18, 18,  0.96);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      backdrop-filter: blur(28px) saturate(160%);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .reader-settings-sheet {
      animation: sheet-rise-tall 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
      transition: transform 0.15s ease-out;
    }
    @keyframes sheet-rise-tall {
      from { opacity: 0; transform: translateY(32px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  .reader-settings-sheet__drag-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: grab;
    padding-bottom: 0.25rem;
    flex-shrink: 0;
  }

  .reader-settings-sheet__handle {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.18);
    margin: 0.15rem auto 0.65rem;
  }
  :root[data-theme="dark"] .reader-settings-sheet__handle {
    background: rgba(248, 250, 252, 0.22);
  }

  .reader-settings-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(10, 10, 10,  0.07);
    margin-bottom: 0.85rem;
  }
  :root[data-theme="dark"] .reader-settings-sheet__header {
    border-bottom-color: rgba(248, 250, 252, 0.08);
  }

  .reader-settings-sheet__title {
    font-family: var(--sans);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .reader-settings-sheet__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: rgba(10, 10, 10,  0.06);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
  }
  :root[data-theme="dark"] .reader-settings-sheet__close {
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
  }
  .reader-settings-sheet__close:hover {
    color: var(--ink);
    background: rgba(10, 10, 10,  0.11);
  }
  :root[data-theme="dark"] .reader-settings-sheet__close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.14);
  }
  .reader-settings-sheet__close:active {
    transform: scale(0.92);
  }

  .reader-settings-sheet__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.15rem;
    padding-bottom: 0.25rem;
    overscroll-behavior: contain;
  }

  .reader-settings-sheet .settings-section {
    margin: 0 0 1.05rem;
  }
  .reader-settings-sheet .settings-section__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0 0 0.5rem;
  }
  .reader-settings-sheet__last {
    margin-bottom: 0 !important;
    padding-top: 0.25rem;
  }

  /* Full-Width Horizontal Sliders (Option B: Text Size & Brightness) */
  .settings-section--sliders {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.25rem 0 0.85rem;
  }

  .reader-slider-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
  }

  .reader-slider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0;
    width: 22px;
  }

  .reader-slider-track-wrap {
    position: relative;
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .reader-slider-track-wrap:focus-visible {
    outline: none;
  }
  .reader-slider-track-wrap:focus-visible .reader-slider-thumb {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .reader-slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.08);
    border: 1px solid rgba(10, 10, 10, 0.06);
    overflow: hidden;
  }

  :root[data-theme="dark"] .reader-slider-track {
    background: rgba(248, 250, 252, 0.10);
    border-color: rgba(248, 250, 252, 0.08);
  }

  .reader-slider-fill {
    height: 100%;
    background: #0A0A0A;
    border-radius: 999px;
    transition: width 0.04s ease-out;
  }

  :root[data-theme="dark"] .reader-slider-fill {
    background: #F8FAFC;
  }

  .reader-slider-thumb {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #0A0A0A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: left 0.04s ease-out, transform 0.1s ease;
  }

  :root[data-theme="dark"] .reader-slider-thumb {
    background: #0A0A0A;
    border-color: #F8FAFC;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  }

  .reader-slider-track-wrap:active .reader-slider-thumb {
    transform: translate(-50%, -50%) scale(1.15);
  }

  .reader-slider-label {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 42px;
    text-align: right;
    flex-shrink: 0;
  }

  /* Select Font Grid */
  .font-selector-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    width: 100%;
  }

  .font-selector-card {
    min-height: 74px;
    padding: 0.65rem 0.3rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }

  .font-selector-card:hover {
    border-color: var(--ink);
  }

  .font-selector-card:active {
    transform: scale(0.96);
  }

  /* Monochrome High-Contrast Active Font State (Black in Light, White in Dark) */
  .font-selector-card.is-active {
    border: 2px solid #0A0A0A !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.08);
  }

  :root[data-theme="dark"] .font-selector-card.is-active {
    border: 2px solid #F8FAFC !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }

  .font-selector-card__sample {
    font-size: 1.28rem;
    line-height: 1;
    font-weight: 500;
    color: var(--ink);
  }

  .font-sample--dm-sans {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .font-sample--charter {
    font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  }
  .font-sample--georgia {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }
  .font-sample--system {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .font-selector-card__name {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
  }

  .font-selector-card.is-active .font-selector-card__sample {
    color: #0A0A0A !important;
    font-weight: 600;
  }
  :root[data-theme="dark"] .font-selector-card.is-active .font-selector-card__sample {
    color: #F8FAFC !important;
  }

  .font-selector-card.is-active .font-selector-card__name {
    color: #0A0A0A !important;
    font-weight: 700;
  }
  :root[data-theme="dark"] .font-selector-card.is-active .font-selector-card__name {
    color: #F8FAFC !important;
  }

  /* Reader Custom Brightness */
  #reader-overlay .reader-panel {
    filter: brightness(var(--reader-custom-brightness, 1));
  }
  #reader-overlay.autodim-active .reader-panel {
    filter: brightness(calc(var(--reader-custom-brightness, 1) * var(--reader-dim-brightness, 1))) contrast(var(--reader-dim-contrast, 1)) sepia(var(--reader-dim-sepia, 0%));
    transition: filter 0.4s ease;
  }

  /* --- Deep Advantage Strategic Interrogation Sheet & Trigger Styles --- */
  .reader-interrogate-bar {
    position: fixed;
    right: var(--s-4);
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    z-index: 32;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .reader-interrogate-bar.is-scroll-hidden {
    transform: translate3d(0, calc(100% + var(--s-5)), 0);
    opacity: 0;
  }
  .reader-interrogate-bar.is-scroll-hidden .reader-interrogate-btn {
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .reader-interrogate-bar {
      transition: opacity var(--dur-fast) var(--ease-out);
    }
    .reader-interrogate-bar.is-scroll-hidden {
      transform: none;
      opacity: 0;
    }
  }
  .reader-interrogate-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-7);
    height: var(--s-7);
    min-height: var(--s-7);
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    touch-action: manipulation;
    transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  :root[data-theme="dark"] .reader-interrogate-btn {
    background: var(--surface-2);
  }
  .reader-interrogate-btn svg {
    flex-shrink: 0;
    color: var(--text);
  }
  :root[data-theme="dark"] .reader-interrogate-btn svg {
    color: var(--accent);
  }
  @media (hover: hover) and (pointer: fine) {
    .reader-interrogate-btn:hover {
      border-color: var(--border-strong);
    }
  }
  .reader-interrogate-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .reader-interrogate-btn:active {
    transform: scale(0.97);
  }
  .reader-interrogate-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-control);
    background: var(--surface-2);
    color: var(--accent-text);
  }

  /* --- Deep Advantage Strategic Interrogation Slide-Up Bottom Sheet --- */
  .ai-interrogate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.2s ease;
  }
  :root[data-theme="light"] .ai-interrogate-backdrop {
    background: rgba(10, 10, 10, 0.35);
  }

  .ai-sheet-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
    overscroll-behavior: contain;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  :root[data-theme="light"] .ai-sheet-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 -8px 30px rgba(10, 10, 10, 0.12);
  }

  :root[data-theme="dark"] .ai-sheet-modal {
    background: rgba(18, 18, 18, 0.94);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.65);
  }

  .ai-sheet-drag-area {
    padding: 0.6rem 1.25rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    cursor: grab;
    touch-action: pan-y;
  }
  .ai-sheet-drag-area:active {
    cursor: grabbing;
  }

  .ai-sheet-handle {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(120, 120, 120, 0.35);
    transition: background 0.2s ease;
  }
  .ai-sheet-drag-area:hover .ai-sheet-handle {
    background: rgba(120, 120, 120, 0.55);
  }

  .ai-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ai-issue-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: calc(100% - 46px);
    font-family: var(--sans);
    font-size: 0.76rem;
  }
  .ai-kicker-tag {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--accent-text);
    flex-shrink: 0;
  }
  .ai-kicker-dot {
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
  }
  .ai-kicker-title {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
  }

  .ai-sheet-action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .ai-sheet-action-btn:hover {
    color: var(--text);
    border-color: rgba(212, 168, 67, 0.45);
  }
  .ai-sheet-action-btn.is-active {
    border-color: #D4A843;
    background: rgba(212, 168, 67, 0.15);
    color: var(--accent-text);
  }

  .ai-sheet-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    position: relative;
  }

  .ai-sheet-headline {
    font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0.15rem 0 0;
    letter-spacing: -0.01em;
  }

  .ai-interrogate-chips-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0 0.35rem;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  .ai-interrogate-chips-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .ai-prompt-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    min-height: 44px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    box-sizing: border-box;
  }
  :root[data-theme="light"] .ai-prompt-chip {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10, 0.12);
    color: #0A0A0A;
  }
  :root[data-theme="light"] .ai-prompt-chip svg {
    stroke: #8A6A1C;
  }
  :root[data-theme="dark"] .ai-prompt-chip {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.12);
    color: #F8FAFC;
  }
  :root[data-theme="dark"] .ai-prompt-chip svg {
    stroke: #D4A843;
  }
  .ai-prompt-chip:hover, .ai-prompt-chip.is-active {
    border-color: #D4A843;
    background: rgba(212, 168, 67, 0.15);
    color: var(--accent-text);
  }
  .ai-prompt-chip:active {
    transform: scale(0.97);
  }

  /* Conversational Chat Thread */
  .ai-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
  }

  .ai-thread-empty {
    padding: 0.85rem 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-style: normal;
  }

  .ai-msg-turn {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    animation: aiMsgFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes aiMsgFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ai-msg-turn.is-user {
    align-items: flex-end;
  }
  .ai-user-bubble {
    max-width: 86%;
    padding: 0.65rem 0.95rem;
    border-radius: 18px 18px 4px 18px;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.32);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: break-word;
  }
  :root[data-theme="light"] .ai-user-bubble {
    background: rgba(212, 168, 67, 0.10);
    border-color: rgba(138, 106, 28, 0.32);
    color: #0A0A0A;
  }
  :root[data-theme="dark"] .ai-user-bubble {
    background: rgba(212, 168, 67, 0.14);
    border-color: rgba(212, 168, 67, 0.32);
    color: #F8FAFC;
  }

  .ai-msg-turn.is-assistant {
    align-items: flex-start;
  }
  .ai-assistant-card {
    width: 100%;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.95rem 1.15rem;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  }
  :root[data-theme="light"] .ai-assistant-card {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10, 0.08);
  }
  :root[data-theme="dark"] .ai-assistant-card {
    background: rgba(18, 18, 18, 0.85);
    border-color: rgba(248, 250, 252, 0.08);
  }

  .ai-followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-top: 0.2rem;
  }
  .ai-followup-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.82rem;
    min-height: 36px;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.16s ease;
    box-sizing: border-box;
    max-width: 100%;
  }
  :root[data-theme="light"] .ai-followup-btn {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.10);
    color: rgba(10, 10, 10, 0.75);
  }
  :root[data-theme="dark"] .ai-followup-btn {
    background: rgba(248, 250, 252, 0.04);
    border-color: rgba(248, 250, 252, 0.10);
    color: rgba(248, 250, 252, 0.78);
  }
  .ai-followup-btn:hover {
    border-color: #D4A843;
    background: rgba(212, 168, 67, 0.12);
    color: var(--accent-text);
  }
  :root[data-theme="light"] .ai-followup-btn:hover {
    border-color: #D4A843;
    background: rgba(212, 168, 67, 0.08);
    color: #8A6A1C;
  }
  .ai-followup-btn:active {
    transform: scale(0.98);
  }
  .ai-followup-btn svg {
    flex-shrink: 0;
    stroke: var(--accent-text);
  }

  /* History Drawer */
  .ai-history-drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    overflow-y: auto;
  }
  :root[data-theme="light"] .ai-history-drawer {
    background: rgba(255, 255, 255, 0.98);
  }
  :root[data-theme="dark"] .ai-history-drawer {
    background: rgba(18, 18, 18, 0.98);
  }
  .ai-history-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
  }
  .ai-history-heading {
    font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
  }
  .ai-history-close {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ai-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .ai-history-item {
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .ai-history-item:hover {
    border-color: rgba(212, 168, 67, 0.45);
    background: rgba(212, 168, 67, 0.05);
  }
  .ai-history-item-info {
    min-width: 0;
    flex: 1;
  }
  .ai-history-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
  }
  .ai-history-item-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
  }
  .ai-history-item-del {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .ai-history-item-del:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.12);
  }

  .ai-interrogate-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 0;
    width: 100%;
  }
  .ai-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border) 25%, rgba(212, 168, 67, 0.22) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: aiSkeletonShimmer 1.5s infinite;
  }
  .ai-skeleton-line.short { width: 40%; }
  .ai-skeleton-line.medium { width: 70%; }
  @keyframes aiSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Dynamic Thought Status Verbs */
  .ai-thought-status {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.2rem 0.5rem;
    width: 100%;
    box-sizing: border-box;
    animation: aiMsgFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ai-thought-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    background: transparent;
    border: none;
  }
  :root[data-theme="light"] .ai-thought-indicator {
    background: transparent;
    border: none;
  }
  .ai-thought-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .ai-rotating-star {
    width: 18px;
    height: 18px;
    display: block;
    animation: aiStarSpin 2.6s linear infinite;
    transform-origin: center center;
    filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.45));
  }
  :root[data-theme="light"] .ai-rotating-star {
    filter: drop-shadow(0 1px 2px rgba(138, 106, 28, 0.25));
  }
  @keyframes aiStarSpin {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(1.1);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }
  .ai-thought-verb {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    transition: opacity 180ms ease-out;
    user-select: none;
  }
  .ai-thought-verb.is-fading {
    opacity: 0.15;
  }

  /* Admin AI Controller Drawer */
  .ai-tuner-drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.25rem 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  :root[data-theme="light"] .ai-tuner-drawer {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
  }
  :root[data-theme="dark"] .ai-tuner-drawer {
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(20px);
  }
  .ai-tuner-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .ai-tuner-body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 0.5rem 0 1.5rem;
  }
  .ai-tuner-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .ai-tuner-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ai-tuner-label {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .ai-tuner-val {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-text);
  }
  .ai-tuner-hint {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .ai-tuner-select {
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    min-height: 44px;
    outline: none;
    cursor: pointer;
  }
  :root[data-theme="light"] .ai-tuner-select {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10, 0.15);
  }
  :root[data-theme="dark"] .ai-tuner-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .ai-tuner-range {
    width: 100%;
    accent-color: #D4A843;
    cursor: pointer;
    margin: 0.35rem 0;
  }
  .ai-tuner-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
  }
  .ai-tuner-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: monospace;
    font-size: 0.76rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
  }
  :root[data-theme="light"] .ai-tuner-textarea {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10, 0.15);
  }
  :root[data-theme="dark"] .ai-tuner-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .ai-tuner-reset-btn {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
  }
  .ai-tuner-reset-btn:hover {
    text-decoration: underline;
  }
  .ai-tuner-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    border-radius: 20px;
    background: #D4A843;
    color: #0A0A0A;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.16s ease;
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.25);
    min-height: 48px;
    width: 100%;
  }
  .ai-tuner-save-btn:hover {
    opacity: 0.94;
    transform: translateY(-1px);
  }
  .ai-tuner-save-btn:active {
    transform: scale(0.99);
  }

  .ai-result-content {
    font-family: var(--sans);
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
  }
  .ai-result-content p {
    margin: 0 0 0.75rem;
  }
  .ai-result-content p:last-child {
    margin-bottom: 0;
  }
  .ai-result-content h1, .ai-result-content h2, .ai-result-content h3 {
    font-family: var(--font-heading, 'Bricolage Grotesque', sans-serif);
    font-weight: 700;
    margin: 0.85rem 0 0.4rem;
    color: var(--text);
  }
  .ai-result-content h2 { font-size: 1rem; }
  .ai-result-content h3 { font-size: 0.92rem; }
  .ai-result-content ul {
    margin: 0 0 0.75rem 1.2rem;
    padding: 0;
  }
  .ai-result-content li {
    margin-bottom: 0.35rem;
  }
  .ai-result-content strong {
    color: var(--text);
    font-weight: 700;
  }


  /* Bottom Query Input Dock */
  .ai-sheet-dock-wrap {
    flex-shrink: 0;
    padding: 0.55rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .ai-sheet-dock-card {
    width: 100%;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .ai-sheet-dock-card:focus-within {
    border-color: rgba(212, 168, 67, 0.55);
    box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.15);
  }
  .ai-sheet-dock-input-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
  }
  .ai-sheet-dock-icon {
    flex-shrink: 0;
    color: var(--accent-text);
  }
  .ai-sheet-dock-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.88rem;
    padding: 0.4rem 0;
  }
  .ai-sheet-dock-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
  }
  .ai-sheet-send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: none;
    background: #D4A843;
    color: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
  }
  .ai-sheet-send-btn:hover {
    background: #e5b954;
    transform: scale(1.04);
  }
  .ai-sheet-send-btn:active {
    transform: scale(0.96);
  }

  /* 5-Hour Rolling Usage Quota Status Bar */
  .ai-dock-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem 0.45rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    line-height: 1.3;
    user-select: none;
  }
  .ai-quota-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .ai-quota-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
  }
  .ai-quota-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(120, 120, 120, 0.32);
    transition: all 0.2s ease;
  }
  .ai-quota-dot.is-filled {
    background: #D4A843;
    box-shadow: 0 0 5px rgba(212, 168, 67, 0.45);
  }
  :root[data-theme="light"] .ai-quota-dot.is-filled {
    background: #8A6A1C;
    box-shadow: none;
  }
  .ai-quota-text {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-quota-text.is-locked {
    color: var(--accent-text);
    font-weight: 600;
  }
  .ai-quota-window-note {
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.72;
    flex-shrink: 0;
  }
  .ai-sheet-dock-card.is-locked {
    border-color: rgba(212, 168, 67, 0.3);
    background: rgba(120, 120, 120, 0.05);
  }
  .ai-sheet-dock-input:disabled {
    cursor: not-allowed;
    opacity: 0.72;
  }
  .ai-sheet-send-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none;
  }
  .ai-prompt-chip.is-disabled,
  .ai-followup-btn.is-disabled {
    opacity: 0.52;
  }

  .stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    background: rgba(10, 10, 10,  0.055);
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 14px;
    padding: 0.26rem;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .stepper {
    background: rgba(6, 10, 18, 0.65);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  }
  .stepper__btn {
    flex: 1;
    padding: 0.52rem 0;
    border: 1px solid rgba(10, 10, 10,  0.08);
    background: #FFFFFF;
    color: #0A0A0A;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
    transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
  :root[data-theme="dark"] .stepper__btn {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.13);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  .stepper__btn:hover {
    background: #FFFFFF;
  }
  :root[data-theme="dark"] .stepper__btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
  }
  .stepper__btn:active {
    transform: scale(0.96);
  }
  .stepper__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .stepper__value {
    flex: 1.3;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink);
  }

  .offline-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 14px;
    background: rgba(10, 10, 10,  0.045);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  :root[data-theme="dark"] .offline-save-btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .offline-save-btn:hover {
    background: rgba(10, 10, 10,  0.08);
  }
  :root[data-theme="dark"] .offline-save-btn:hover {
    background: rgba(255, 255, 255, 0.09);
  }
  .offline-save-btn:active {
    transform: scale(0.985);
  }
  .offline-save-btn__icon { width: 17px; height: 17px; display: flex; flex-shrink: 0; }
  .offline-save-btn__icon svg { width: 100%; height: 100%; }
  .offline-save-btn[aria-pressed="true"] {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10,  0.12) !important;
    color: #0A0A0A;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .offline-save-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #F8FAFC;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  .offline-save-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .offline-save-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
  }

  /* The reading screen only: hides the bottom nav (see "Chrome and the
     reading experience" in the UI brief — a persistent nav bar eating
     space on the one screen someone reads 2,000 words on is exactly the
     chrome that should disappear). Scoped to a body class set only while
     an actual issue is open, so Archive/About/Paid/Vault/Podcast keep
     their nav exactly as before. */
  @media (prefers-reduced-motion: no-preference) {
    .bottom-nav { transition: transform 0.2s ease; }
  }
  body.is-reading-issue .bottom-nav {
    transform: translate3d(0, 110%, 0);
    -webkit-transform: translate3d(0, 110%, 0);
    pointer-events: none;
  }
  

  /* Bottom padding uses --fab-clearance (not --nav-clearance) only inside
     the issue reader, since the nav it would otherwise clear is hidden —
     the floating settings button is what content needs to clear instead. */
  #reader-overlay .reader-panel__scroll { padding-bottom: var(--fab-clearance); }

  /* Bottom tab bar — persistent across every page and overlay (z-index 34
     sits above .reader-overlay's 20 and .reader-panel__bar's 30, so
     Home/Podcast/Markets/Store/Profile stay reachable at all times).
     Uses a rock-solid high-opacity surface without GPU-heavy backdrop-filter
     so mobile browsers never evict or drop the bar during fast scrolling. */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 34;
    display: flex;
    border-top: 1px solid var(--rule);
    padding: 0.35rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    box-shadow: 0 -4px 20px rgba(10, 10, 10,  0.06);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  :root[data-theme="dark"] .bottom-nav {
    background: #0A0A0A;
    border-top-color: rgba(248, 250, 252, 0.12);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.48);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.4rem 0.15rem;
    border: none;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s ease;
  }

  .bottom-nav__item svg {
    width: 22px;
    height: 22px;
    display: block;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
  }
  .bottom-nav__item.active svg {
    transform: scale(1.14);
  }

  .bottom-nav__label {
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
  }

  .bottom-nav__item.active { color: var(--gold); }

  .bottom-nav__item:active {
    background: rgba(0, 0, 0, 0.045);
    transform: scale(0.97);
  }
  :root[data-theme="dark"] .bottom-nav__item:active {
    background: rgba(255, 255, 255, 0.07);
    transform: scale(0.97);
  }

  .bottom-nav__item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  /* "More" sheet — a small popover anchored just above the bar, not a
     full-screen overlay, since it's just a two-item menu. z-index 40 sits
     above the bar itself (30) and the backdrop (35). */
  .more-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.32);
  }

  .more-sheet {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    z-index: 40;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  }

  :root[data-theme="dark"] .more-sheet { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }

  @media (prefers-reduced-motion: no-preference) {
    .more-sheet { animation: sheet-rise 0.16s ease both; }
    @keyframes sheet-rise {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  .more-sheet__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.15rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--rule);
  }

  .more-sheet__item:last-child { border-bottom: none; }

  .more-sheet__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
  .more-sheet__icon svg { width: 100%; height: 100%; display: block; }

  .more-sheet__item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  .more-sheet__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    margin-left: auto;
  }
  :root[data-theme="dark"] .more-sheet__badge {
    background: var(--gold-decorative);
    color: var(--navy);
  }

  /* =========================================================================
     Library Multi-Select Toolbar, Checkboxes & Confirmation Modal
     ========================================================================= */
  .bookmarks-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: 14px;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--rule);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .bookmarks-select-bar {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .bookmarks-select-bar[hidden],
  .bookmarks-selection-footer[hidden],
  .bookmarks-clear-modal[hidden] {
    display: none !important;
  }
  .bookmarks-select-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.2rem 0.3rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bookmarks-selected-count {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
  }
  .bookmarks-select-cancel-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .bookmarks-select-cancel-btn:hover {
    color: var(--ink);
    background: rgba(128, 128, 128, 0.1);
  }
  .bookmarks-item-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.8px solid var(--muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.75rem;
    align-self: center;
    transition: all 0.16s ease;
    color: transparent;
  }
  .bookmarks-item-check.is-checked {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #FAF8F3;
  }
  :root[data-theme="dark"] .bookmarks-item-check.is-checked {
    background: #D4A843;
    border-color: #D4A843;
    color: #0A0A0A;
  }
  .issue.is-selectable-card {
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .issue.is-selected-card {
    background: rgba(212, 168, 67, 0.08) !important;
    border-radius: 14px;
  }
  /* Modern Top-Right Clear / Select Trigger Button in Library */
  .bookmarks-clear-trigger-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 10,  0.08);
    background: #FFFFFF;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 3px 10px rgba(10, 10, 10,  0.06);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .bookmarks-clear-trigger-btn:hover {
    border-color: rgba(220, 38, 38, 0.35);
    color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(220, 38, 38, 0.12);
  }
  .bookmarks-clear-trigger-btn:active {
    transform: scale(0.93);
  }
  .bookmarks-clear-trigger-btn.is-active {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #FAF8F3;
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.22);
  }
  :root[data-theme="dark"] .bookmarks-clear-trigger-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #F8FAFC;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="dark"] .bookmarks-clear-trigger-btn:hover {
    border-color: rgba(248, 113, 113, 0.45);
    color: #f87171;
  }
  :root[data-theme="dark"] .bookmarks-clear-trigger-btn.is-active {
    background: #F8FAFC;
    border-color: #F8FAFC;
    color: #0A0A0A;
  }

  .bookmarks-selection-footer {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .bookmarks-clear-selected-btn {
    pointer-events: auto;
    width: 100%;
    max-width: 420px;
    padding: 0.88rem 1.35rem;
    border-radius: 999px;
    border: none;
    background: #FF0000;
    color: #FFFFFF;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .bookmarks-clear-selected-btn:disabled {
    background: #FF0000;
    color: #FFFFFF;
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] .bookmarks-clear-selected-btn:disabled {
    background: #FF0000;
    color: #FFFFFF;
    opacity: 0.42;
    box-shadow: none !important;
  }
  .bookmarks-clear-selected-btn:not(:disabled):active {
    transform: scale(0.98);
  }

  /* Confirmation Modal for Clearing Selected Library Items */
  .bookmarks-clear-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }
  .bookmarks-clear-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0,  0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .bookmarks-clear-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 24px;
    padding: 1.6rem 1.4rem 1.35rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0,  0.24);
    animation: sheet-rise 0.18s ease both;
  }
  :root[data-theme="dark"] .bookmarks-clear-modal__card {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
  }
  .bookmarks-clear-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 0.9rem;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :root[data-theme="dark"] .bookmarks-clear-modal__icon {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
  }
  .bookmarks-clear-modal__title {
    font-family: var(--sans);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.45rem;
    letter-spacing: -0.02em;
  }
  .bookmarks-clear-modal__desc {
    font-family: var(--sans);
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 1.3rem;
  }
  .bookmarks-clear-modal__actions {
    display: flex;
    gap: 0.65rem;
  }
  .bookmarks-clear-modal__btn {
    flex: 1;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
  }
  .bookmarks-clear-modal__btn--cancel {
    background: rgba(10, 10, 10,  0.06);
    color: var(--ink);
  }
  :root[data-theme="dark"] .bookmarks-clear-modal__btn--cancel {
    background: rgba(255, 255, 255, 0.09);
    color: #F8FAFC;
  }
  .bookmarks-clear-modal__btn--confirm {
    background: #FF0000;
    color: #FFFFFF;
    box-shadow: none !important;
  }

  /* =========================================================================
     User Profile & Settings — Reference Image Architecture
     (Clean White & Pearl Gradient in Light Mode / Obsidian Navy in Dark Mode)
     ========================================================================= */
  #profile-overlay,
  #profile-overlay .reader-panel {
    background:
      radial-gradient(circle at 92% 6%, rgba(0, 0, 0,  0.04) 0%, rgba(0, 0, 0,  0) 48%),
      radial-gradient(circle at 6% 90%, rgba(0, 0, 0,  0.03) 0%, rgba(0, 0, 0,  0) 50%),
      linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 55%, #EEF2F6 100%);
  }
  :root[data-theme="dark"] #profile-overlay,
  :root[data-theme="dark"] #profile-overlay .reader-panel {
    background:
      radial-gradient(circle at 88% 8%, rgba(212, 168, 67, 0.06) 0%, rgba(56, 189, 248, 0) 42%),
      linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
  }

  #profile-overlay .reader-panel__scroll {
    max-width: 540px;
    margin: 0 auto;
    padding: 0.65rem 1.2rem calc(var(--nav-clearance, 5rem) + 2rem) !important;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .profile-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0 0.35rem;
  }

  .profile-floating-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 10,  0.05);
    background: #FFFFFF;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .profile-floating-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.09);
  }
  .profile-floating-back-btn:active {
    transform: scale(0.95);
  }
  :root[data-theme="dark"] .profile-floating-back-btn {
    background: rgba(22, 22, 22,  0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  .profile-page-heading {
    font-family: var(--sans);
    font-size: 1.68rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0.55rem 0 1.15rem 0.15rem;
    line-height: 1.15;
  }

  /* Centered Portrait Hero Card (Matches Reference Image) */
  .profile-hero-card {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.05);
    border-radius: 26px;
    padding: 1.75rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 1.15rem;
    box-shadow: 0 12px 34px rgba(10, 10, 10,  0.055);
    cursor: default;
    user-select: none;
  }
  :root[data-theme="dark"] .profile-hero-card {
    background: rgba(20, 20, 20,  0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  }

  .profile-hero-edit-pill {
    margin-top: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.45rem;
    border-radius: 999px;
    border: none;
    background: #0A0A0A;
    color: #FAF8F3;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.16);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .profile-hero-edit-pill:hover {
    background: #141414;
    transform: translateY(-1px);
  }
  .profile-hero-edit-pill:active {
    transform: scale(0.97);
  }
  :root[data-theme="dark"] .profile-hero-edit-pill {
    background: #F8FAFC;
    color: #0A0A0A;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }
  :root[data-theme="dark"] .profile-hero-edit-pill:hover {
    background: #FAF8F3;
  }

  .profile-hero-meta-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--muted);
  }

  /* Compact Muted Footer Legal Links */
  .profile-legal-footer {
    margin-top: 1.35rem;
    padding-top: 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
  }
  .profile-legal-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }
  .profile-legal-footer__link {
    background: none;
    border: none;
    padding: 0.15rem 0.2rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .profile-legal-footer__link:hover {
    color: var(--gold);
    text-decoration: underline;
  }
  .profile-legal-footer__dot {
    font-size: 0.7rem;
    color: var(--muted);
    opacity: 0.45;
    user-select: none;
  }
  .profile-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 0.8rem;
    cursor: pointer;
  }
  .profile-hero-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E1E1E 0%, #0A0A0A 100%);
    color: #FAF8F3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 22px rgba(10, 10, 10,  0.12);
    overflow: hidden;
  }
  :root[data-theme="dark"] .profile-hero-avatar {
    background: linear-gradient(135deg, #334155 0%, #1E1E1E 100%);
    color: #F8FAFC;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .profile-hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  .profile-avatar-change-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0A0A0A;
    color: #FAF8F3;
    border: 2px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.2);
    transition: transform 0.15s ease, background-color 0.15s ease;
    padding: 0;
    z-index: 2;
  }
  .profile-avatar-change-badge:hover {
    transform: scale(1.1);
    background: #1E1E1E;
  }
  :root[data-theme="dark"] .profile-avatar-change-badge {
    background: #F8FAFC;
    color: #0A0A0A;
    border-color: #0A0A0A;
  }
  #profile-overlay .settings-toggle-switch[aria-checked="true"] {
    background: #0A0A0A;
    border-color: #0A0A0A;
  }
  :root[data-theme="dark"] #profile-overlay .settings-toggle-switch[aria-checked="true"] {
    background: #F8FAFC;
    border-color: #F8FAFC;
  }
  :root[data-theme="dark"] #profile-overlay .settings-toggle-switch[aria-checked="true"] .settings-toggle-switch__thumb {
    background: #0A0A0A;
  }
  .profile-hero-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
  }
  .profile-hero-name {
    font-family: var(--sans);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .profile-hero-email {
    font-family: var(--sans);
    font-size: 0.84rem;
    color: var(--muted);
    margin: 0.22rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .profile-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .profile-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    transition: all 0.2s ease;
  }
  .profile-tier-badge--free {
    background: rgba(100, 116, 139, 0.12);
    color: var(--muted);
    border: 1px solid rgba(100, 116, 139, 0.25);
  }
  :root[data-theme="dark"] .profile-tier-badge--free {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.25);
  }
  .profile-tier-badge--premium {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.35);
  }
  :root[data-theme="dark"] .profile-tier-badge--premium {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
  }
  .profile-tier-badge--vip {
    background: rgba(212, 168, 67, 0.15);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.45);
    box-shadow: 0 1px 6px rgba(212, 168, 67, 0.15);
  }
  :root[data-theme="dark"] .profile-tier-badge--vip {
    background: rgba(212, 168, 67, 0.22);
    color: var(--gold-decorative);
    border-color: rgba(212, 168, 67, 0.55);
    box-shadow: 0 1px 8px rgba(212, 168, 67, 0.22);
  }
  .profile-hero-chevron {
    color: var(--muted);
    opacity: 0.65;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
  }
  .profile-hero-card:hover .profile-hero-chevron {
    opacity: 1;
    transform: translateX(2px);
    color: var(--gold);
  }

  /* Provision for Unregistered / Returning users to Login / Sign Up on Profile Hero Card */
  .profile-hero-auth-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.05rem;
    flex-wrap: nowrap;
    width: auto;
  }
  .profile-hero-auth-btn {
    border: none;
    outline: none;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.16s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-height: 36px;
    line-height: 1;
    flex-shrink: 0;
  }
  .profile-hero-auth-btn svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
  }
  .profile-hero-auth-btn:active {
    transform: scale(0.97);
  }
  /* Login Button: Subtle outline pill for returning users */
  .profile-hero-auth-btn--login {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--rule);
  }
  .profile-hero-auth-btn--login:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 67, 0.08);
  }
  :root[data-theme="dark"] .profile-hero-auth-btn--login {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.16);
  }
  :root[data-theme="dark"] .profile-hero-auth-btn--login:hover {
    border-color: var(--gold-decorative);
    color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.14);
  }
  /* Signup Button: Deep Navy pill in Light mode / Warm Ivory pill in Dark mode */
  .profile-hero-auth-btn--signup {
    background: #0A0A0A;
    color: #FAF8F3;
    border: 1px solid rgba(10, 10, 10,  0.9);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .profile-hero-auth-btn--signup:hover {
    background: #141414;
    border-color: #141414;
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.2);
  }
  :root[data-theme="dark"] .profile-hero-auth-btn--signup {
    background: #F8FAFC;
    color: #0A0A0A;
    border-color: #F8FAFC;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="dark"] .profile-hero-auth-btn--signup:hover {
    background: #FAF8F3;
    border-color: #FAF8F3;
  }

  /* Section Groups & Rounded Curved Card Stacks (Matches Reference Image) */
  .profile-section-group {
    margin-bottom: 1.05rem;
  }
  .profile-section-title {
    display: none;
  }
  .profile-card-group {
    background: transparent;
    border: none;
    border-radius: 22px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    box-shadow: none;
  }
  :root[data-theme="dark"] .profile-card-group {
    box-shadow: none;
  }

  /* Cross-Device Account Sync Styles */
  .sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.2s ease;
  }
  .sync-badge--active {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
  }
  :root[data-theme="dark"] .sync-badge--active {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
  }
  .sync-badge--syncing {
    background: rgba(212, 168, 67, 0.14);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.35);
  }
  .sync-badge--offline {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  .sync-badge--guest {
    display: none !important;
  }
  .sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
  }
  .sync-dot--active {
    background: #16a34a;
    box-shadow: 0 0 7px rgba(34, 197, 94, 0.7);
  }
  :root[data-theme="dark"] .sync-dot--active {
    background: #4ade80;
    box-shadow: 0 0 7px rgba(74, 222, 128, 0.8);
  }
  .sync-dot--pulsing {
    background: var(--gold);
    animation: syncDotPulse 1.1s infinite ease-in-out;
  }
  @keyframes syncDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 1; }
  }
  .sync-dot--offline {
    background: #d97706;
  }
  .sync-dot--idle {
    background: var(--muted);
  }
  .profile-sync-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  }
  :root[data-theme="dark"] .profile-sync-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .profile-sync-card__info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
  }
  .profile-sync-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gold-glow, rgba(212, 168, 67, 0.12));
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .profile-sync-text {
    flex: 1;
    min-width: 0;
  }
  .profile-sync-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .profile-sync-desc {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0.2rem 0 0;
    line-height: 1.45;
  }
  .profile-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.48rem 0.9rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 9px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .profile-sync-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-glow, rgba(212, 168, 67, 0.08));
  }
  .profile-sync-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .spin-sync {
    animation: spinSync 1s linear infinite;
  }
  @keyframes spinSync {
    100% { transform: rotate(360deg); }
  }

  .profile-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgba(10, 10, 10,  0.04);
    border-radius: 18px;
    text-decoration: none;
    color: var(--ink);
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.035);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    font-family: var(--sans);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .profile-row-item {
    background: rgba(20, 20, 20,  0.9);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  }
  .profile-card-group > .profile-row-item:first-child {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .profile-card-group > .profile-row-item:last-child {
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  .profile-row-item:hover {
    background: #FAF8F3;
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.06);
  }
  :root[data-theme="dark"] .profile-row-item:hover {
    background: rgba(28, 28, 28,  0.95);
  }
  .profile-row-item:active {
    transform: scale(0.99);
  }
  .profile-row-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
  .profile-row-item__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
  }
  .profile-row-item__icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .profile-row-item__icon-wrap svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  .profile-row-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .profile-row-item__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  .profile-row-item__desc {
    font-size: 0.77rem;
    color: var(--muted);
    line-height: 1.3;
  }
  .profile-row-item__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 0.65rem;
  }
  .profile-row-item__value {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--muted);
  }
  .profile-row-item__chevron {
    color: var(--muted);
    opacity: 0.65;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
  }
  .profile-row-item:hover .profile-row-item__chevron {
    opacity: 1;
    transform: translateX(2px);
    color: var(--gold);
  }
  .profile-row-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
  }
  :root[data-theme="dark"] .profile-row-item__badge {
    background: var(--gold-decorative);
    color: var(--navy);
  }

  /* Reset Preferences & Cache Button (Image 2 Log Out style) */
  .profile-reset-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(220, 53, 69, 0.28);
    background: rgba(220, 53, 69, 0.05);
    color: #c82333;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .profile-reset-btn:hover {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.45);
  }
  .profile-reset-btn:active {
    transform: scale(0.98);
  }
  :root[data-theme="dark"] .profile-reset-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }
  :root[data-theme="dark"] .profile-reset-btn:hover {
    background: rgba(239, 68, 68, 0.18);
  }

  /* Profile Edit Modal — Compact & Elevated Above Bottom Nav */
  .profile-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.15rem calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .profile-edit-modal[hidden] {
    display: none !important;
  }
  .profile-edit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0,  0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .profile-edit-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 24px;
    padding: 1.25rem 1.3rem 1.25rem;
    box-shadow: 0 20px 48px rgba(0, 0, 0,  0.25);
  }
  :root[data-theme="dark"] .profile-edit-modal__card {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
  }
  .profile-edit-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
  }
  .profile-edit-modal__title {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
  }
  .profile-edit-modal__close {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
  }
  .profile-edit-modal__close:hover {
    color: var(--ink);
    background: var(--surface-raised);
  }
  .profile-edit-field {
    margin-bottom: 0.75rem;
  }
  .profile-edit-label {
    display: block;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.35rem;
  }
  .profile-edit-input {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .profile-edit-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
  }
  .profile-edit-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.5rem;
  }
  .profile-edit-btn {
    padding: 0.65rem 1.15rem;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
  }
  .profile-edit-btn--ghost {
    background: transparent;
    color: var(--muted);
  }
  .profile-edit-btn--ghost:hover {
    background: var(--surface-raised);
    color: var(--ink);
  }
  .profile-edit-btn--primary {
    background: var(--gold);
    color: #fff;
  }
  .profile-edit-btn--primary:hover {
    background: #6f5316;
  }
  :root[data-theme="dark"] .profile-edit-btn--primary {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  /* Ultra-Modern Mandatory Onboarding & Authentication Studio (System Theme Adaptive: #F8FAFC Light & #0A0A0A Dark + Subtle White Glow) */
  :root.is-auth-gated body {
    overflow: hidden !important;
    background: var(--paper) !important;
  }
  :root.is-auth-gated #auth-modal[hidden] {
    display: flex !important;
  }
  #auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    color: #0A0A0A;
    font-family: var(--sans);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  :root[data-theme="dark"] #auth-modal {
    background: #0A0A0A;
    color: #F8FAFC;
  }
  #auth-modal[hidden] {
    display: none;
  }
  #auth-modal .profile-edit-modal__backdrop {
    display: none;
  }
  .da-auth-shell {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse 95% 52% at 50% -8%, #FFFFFF 0%, #F8FAFC 72%);
    background-color: #F8FAFC;
    overflow: hidden;
  }
  :root[data-theme="dark"] .da-auth-shell {
    background:
      radial-gradient(ellipse 88% 48% at 50% -6%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 46%, transparent 74%),
      #0A0A0A;
    background-color: #0A0A0A;
  }
  /* Faint fractal-noise film grain overlay to prevent gradient banding */
  .da-auth-shell::before,
  .da-auth-right::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.025;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='daGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23daGrain)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
  }
  :root[data-theme="dark"] .da-auth-shell::before,
  :root[data-theme="dark"] .da-auth-right::before {
    opacity: 0.042;
  }
  .da-auth-left {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100dvh;
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.6rem calc(1.65rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  .da-auth-right {
    display: none;
  }
  /* Top-Left Brand Wordmark (Swaps /assets/wordmark.png and /assets/wordmark-dark.png via data-theme) */
  .da-auth-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
  }
  .da-auth-wordmark {
    height: 28px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
  }
  .da-auth-wordmark--dark {
    display: none;
  }
  :root[data-theme="dark"] .da-auth-wordmark--light {
    display: none;
  }
  :root[data-theme="dark"] .da-auth-wordmark--dark {
    display: block;
  }
  /* Step 1 & Step 2 Container */
  .da-auth-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
    animation: daAuthStepFade 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .da-auth-step[hidden] {
    display: none !important;
  }
  @keyframes daAuthStepFade {
    from {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .da-auth-welcome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.15rem;
  }
  /* Break-Proof Live Issue Thumbnail & Global Benchmark Slideshow (14:9 Canva Native Aspect Ratio) */
  .da-auth-showcase {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: auto 0;
    padding: 0.45rem 0 0.35rem;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Subtle White Radial Spotlight Bloom behind Slideshow Stage (Breathing Ambient Light Orb) */
  .da-auth-showcase::before {
    content: "";
    position: absolute;
    inset: -32px -26px -22px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 74% 58% at 50% 44%, rgba(10, 10, 10,  0.045) 0%, transparent 72%);
    animation: daAuthOrbBreath 7.5s ease-in-out infinite alternate;
    will-change: transform, opacity;
  }
  :root[data-theme="dark"] .da-auth-showcase::before {
    background: radial-gradient(ellipse 76% 62% at 50% 42%, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.03) 48%, transparent 74%);
  }
  @keyframes daAuthOrbBreath {
    0% {
      opacity: 0.78;
      transform: translate3d(0, -3px, 0) scale(0.96);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 4px, 0) scale(1.05);
    }
  }
  .da-auth-showcase__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 14 / 9;
    max-height: 226px;
    margin: 0 auto;
    touch-action: pan-y;
    cursor: grab;
  }
  .da-auth-showcase__stage:active {
    cursor: grabbing;
  }
  .da-auth-showcase__stage::before {
    display: none;
  }
  .da-auth-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(10, 10, 10,  0.08);
    box-shadow:
      0 14px 34px rgba(10, 10, 10,  0.075),
      inset 0 1px 0 #FFFFFF;
    opacity: 0;
    transform: translate3d(22px, 0, 0) scale(0.975);
    pointer-events: none;
    transition:
      opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    will-change: transform, opacity;
  }
  :root[data-theme="dark"] .da-auth-slide {
    background: linear-gradient(180deg, rgba(20, 20, 20,  0.82) 0%, rgba(10, 10, 10,  0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  /* Crisp 1px White Specular Rim Highlight on Top Edge (Aligno Reference Style) */
  :root[data-theme="dark"] .da-auth-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    pointer-events: none;
    z-index: 3;
  }
  .da-auth-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    border-color: rgba(10, 10, 10,  0.1);
    pointer-events: auto;
    z-index: 2;
  }
  :root[data-theme="dark"] .da-auth-slide.is-active {
    border-color: rgba(255, 255, 255, 0.14);
  }
  .da-auth-slide.is-prev {
    opacity: 0;
    transform: translate3d(-22px, 0, 0) scale(0.975);
    z-index: 1;
  }
  /* Pure Edge-to-Edge Canva Issue Cover Slide (Zero Text Overlay + Subtle Ken Burns Motion) */
  .da-auth-slide--issue {
    padding: 0;
    background: #E2E8F0;
  }
  :root[data-theme="dark"] .da-auth-slide--issue {
    background: #0A0A0A;
  }
  .da-auth-issue-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 19px;
    pointer-events: none;
    transform: scale(1.045);
    transition: transform 3.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .da-auth-slide--issue.is-active .da-auth-issue-thumb {
    transform: scale(1);
  }
  .da-auth-slide--issue.is-fallback-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 80%, rgba(212, 168, 67, 0.2) 0%, #0A0A0A 75%);
  }
  .da-auth-slide--issue.is-fallback-cover::after {
    content: "DEEP ADVANTAGE";
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #D4A843;
  }
  /* Real-Time Global Benchmark 1x2 Pair Slide (Optimized for 14:9 Frame) */
  .da-auth-slide--markets {
    padding: 0.78rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .da-auth-bench-header {
    display: none;
  }
  .da-auth-bench-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-family: var(--sans);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8A95A8;
  }
  .da-auth-bench-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.85);
    animation: daAuthLivePulse 2s ease-in-out infinite;
  }
  @keyframes daAuthLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
  }
  .da-auth-bench-status {
    font-family: var(--sans);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #8A95A8;
  }
  .da-auth-bench-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    min-height: 0;
  }
  .da-auth-bench-card {
    position: relative;
    border-radius: 14px;
    padding: 0.68rem 0.75rem 0.55rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid rgba(10, 10, 10,  0.08);
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.05), inset 0 1px 0 #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  :root[data-theme="dark"] .da-auth-bench-card {
    background: linear-gradient(180deg, rgba(20, 20, 20,  0.78) 0%, rgba(10, 10, 10,  0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .da-auth-bench-card.is-tick-up {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
  }
  .da-auth-bench-card.is-tick-down {
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(244, 63, 94, 0.08);
  }
  .da-auth-bench-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }
  .da-auth-bench-name {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: #0A0A0A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :root[data-theme="dark"] .da-auth-bench-name {
    color: #F8FAFC;
  }
  .da-auth-bench-chg {
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.12rem 0.38rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .da-auth-bench-chg.text-up {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
  }
  :root[data-theme="dark"] .da-auth-bench-chg.text-up {
    color: #34D399;
    background: rgba(16, 185, 129, 0.14);
  }
  .da-auth-bench-chg.text-down {
    color: #E11D48;
    background: rgba(244, 63, 94, 0.12);
  }
  :root[data-theme="dark"] .da-auth-bench-chg.text-down {
    color: #FB7185;
    background: rgba(244, 63, 94, 0.14);
  }
  .da-auth-bench-chg.text-neutral {
    color: #5E697E;
    background: rgba(138, 149, 168, 0.14);
  }
  :root[data-theme="dark"] .da-auth-bench-chg.text-neutral {
    color: #8A95A8;
  }
  .da-auth-bench-price {
    font-family: var(--serif);
    font-size: clamp(1.02rem, 3.6vw, 1.22rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0A0A0A;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin: 0.18rem 0 0.22rem;
  }
  :root[data-theme="dark"] .da-auth-bench-price {
    color: #F8FAFC;
  }
  .da-auth-bench-chart {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: flex-end;
  }
  .da-auth-bench-chart svg {
    width: 100%;
    height: 36px;
    display: block;
    overflow: visible;
  }
  /* Live Self-Drawing SVG Sparkline via Coordinate-Locked ClipPath + Pulsing Radar Tip */
  .da-auth-spark-clip-rect {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
  }
  .da-auth-spark-area {
    opacity: 0;
  }
  .da-auth-slide.is-active .da-auth-spark-clip-rect {
    animation: daAuthSparkClipReveal 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards;
  }
  .da-auth-slide.is-active .da-auth-spark-area {
    animation: daAuthSparkAreaFade 0.85s ease-out 0.14s forwards;
  }
  @keyframes daAuthSparkClipReveal {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes daAuthSparkAreaFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .da-auth-spark-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: daAuthRadarPulse 2.1s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
  @keyframes daAuthRadarPulse {
    0% {
      transform: scale(0.9);
      opacity: 0.85;
    }
    75%, 100% {
      transform: scale(3.1);
      opacity: 0;
    }
  }
  /* Story-Style Liquid Progress Pill Pagination */
  .da-auth-showcase__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0.95rem;
  }
  .da-auth-showcase__tab {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .da-auth-showcase__tab {
    background: rgba(138, 149, 168, 0.28);
  }
  .da-auth-showcase__tab:hover {
    background: rgba(100, 116, 139, 0.48);
  }
  :root[data-theme="dark"] .da-auth-showcase__tab:hover {
    background: rgba(138, 149, 168, 0.48);
  }
  .da-auth-showcase__tab.is-active {
    width: 26px;
    background: rgba(10, 10, 10,  0.12);
  }
  :root[data-theme="dark"] .da-auth-showcase__tab.is-active {
    background: rgba(255, 255, 255, 0.16);
  }
  .da-auth-showcase__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }
  :root[data-theme="dark"] .da-auth-showcase__fill {
    background: #D4A843;
  }
  .da-auth-showcase__tab.is-active .da-auth-showcase__fill {
    animation: daAuthSlideProgress 3.2s linear forwards;
  }
  .da-auth-showcase.is-paused .da-auth-showcase__tab.is-active .da-auth-showcase__fill {
    animation-play-state: paused;
  }
  @keyframes daAuthSlideProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  /* Staggered Entrance Choreography for Welcome Studio */
  #auth-welcome-step .da-auth-welcome-top {
    animation: daAuthRevealUp 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #auth-welcome-step .da-auth-showcase {
    animation: daAuthRevealUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
  }
  #auth-welcome-step .da-auth-headline {
    animation: daAuthRevealUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  }
  #auth-welcome-step .da-auth-welcome-lead {
    animation: daAuthRevealUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
  }
  #auth-welcome-step .da-auth-welcome-footer {
    animation: daAuthRevealUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
  }
  @keyframes daAuthRevealUp {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .da-auth-welcome-body {
    margin-top: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .da-auth-headline {
    font-family: var(--serif);
    font-size: clamp(2.15rem, 8.2vw, 2.95rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #0A0A0A;
    margin: 0 0 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  :root[data-theme="dark"] .da-auth-headline {
    color: #F8FAFC;
  }
  /* Line 1: [Foresight -> Clarity -> Depth] is the (same line, zero descender clipping) */
  .da-auth-headline__line1 {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    gap: 0.24em;
  }
  .da-auth-headline__rotor {
    position: relative;
    display: inline-grid;
    grid-template-areas: "word";
    align-items: baseline;
    justify-items: start;
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
    overflow: visible;
    perspective: 600px;
    transition: width 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .da-auth-headline__word {
    grid-area: word;
    display: inline-block;
    width: max-content;
    font-family: var(--serif);
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--gold);
    opacity: 0;
    transform: translate3d(0, 62%, 0) rotateX(-38deg);
    filter: blur(4px);
    transition:
      transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
    pointer-events: none;
    white-space: nowrap;
  }
  :root[data-theme="dark"] .da-auth-headline__word {
    color: #D4A843;
  }
  .da-auth-headline__word.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0px);
    pointer-events: auto;
  }
  .da-auth-headline__word.is-ExitUp {
    opacity: 0;
    transform: translate3d(0, -62%, 0) rotateX(38deg);
    filter: blur(4px);
  }
  .da-auth-headline__inline {
    display: inline-block;
    white-space: nowrap;
  }
  .da-auth-headline__line2 {
    display: block;
    white-space: nowrap;
  }
  .da-auth-welcome-lead {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.52;
    color: #5E697E;
    margin: 0 0 2.35rem;
    max-width: 350px;
  }
  :root[data-theme="dark"] .da-auth-welcome-lead {
    color: #8A95A8;
  }
  /* Welcome Bottom Action Row (Dashboard / Market News Liquid Elevated Effect — Light & Dark Adaptive) */
  .da-auth-welcome-footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    align-items: center;
    background: rgba(10, 10, 10,  0.055);
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 14px;
    padding: 0.28rem;
    gap: 0.35rem;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .da-auth-welcome-footer {
    background: rgba(6, 10, 18, 0.65);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  }
  .da-auth-welcome-login-pill {
    height: 44px;
    border-radius: 10px;
    padding: 0 1rem;
    background: transparent;
    border: 1px solid transparent;
    color: #5E697E;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .da-auth-welcome-login-pill {
    color: #8A95A8;
  }
  .da-auth-welcome-login-pill:hover {
    background: rgba(10, 10, 10,  0.035);
    color: #0A0A0A;
  }
  :root[data-theme="dark"] .da-auth-welcome-login-pill:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #F8FAFC;
  }
  .da-auth-welcome-login-pill:active {
    transform: scale(0.985);
  }
  .da-auth-welcome-start-pill {
    position: relative;
    overflow: hidden;
    height: 44px;
    border-radius: 10px;
    padding: 0 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.08);
    color: #0A0A0A;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .da-auth-welcome-start-pill {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  /* Periodic Diagonal Specular Sheen across Get Started CTA */
  .da-auth-welcome-start-pill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65%;
    background: linear-gradient(
      110deg,
      transparent 0%,
      rgba(212, 168, 67, 0.14) 45%,
      rgba(255, 255, 255, 0.55) 52%,
      transparent 100%
    );
    transform: translate3d(-190%, 0, 0) skewX(-18deg);
    animation: daAuthCtaShimmer 4.6s cubic-bezier(0.16, 1, 0.3, 1) 1.4s infinite;
    pointer-events: none;
  }
  :root[data-theme="dark"] .da-auth-welcome-start-pill::after {
    background: linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 35%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 100%
    );
  }
  @keyframes daAuthCtaShimmer {
    0% { transform: translate3d(-190%, 0, 0) skewX(-18deg); }
    34%, 100% { transform: translate3d(260%, 0, 0) skewX(-18deg); }
  }
  .da-auth-welcome-start-pill svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .da-auth-welcome-start-pill:hover svg {
    transform: translate3d(3px, 0, 0);
  }
  @media (prefers-reduced-motion: reduce) {
    .da-auth-showcase::before,
    .da-auth-welcome-start-pill::after,
    .da-auth-spark-pulse,
    .da-auth-showcase__tab.is-active .da-auth-showcase__fill {
      animation: none !important;
    }
    .da-auth-spark-clip-rect {
      transform: scaleX(1) !important;
      animation: none !important;
    }
    .da-auth-spark-area {
      opacity: 1 !important;
      animation: none !important;
    }
  }
  .da-auth-welcome-start-pill:hover {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10,  0.14);
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.11);
  }
  :root[data-theme="dark"] .da-auth-welcome-start-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .da-auth-welcome-start-pill:active {
    transform: scale(0.985);
  }
  /* Step 2: Auth Studio (Log In / Sign Up / Recovery) */
  .da-auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-bottom: 1.5rem;
  }
  .da-auth-topbar__left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }
  .da-auth-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(10, 10, 10,  0.08);
    color: #0A0A0A;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .da-auth-icon-btn {
    background: rgba(20, 20, 20,  0.65);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #F8FAFC;
    box-shadow: none;
  }
  .da-auth-icon-btn:hover {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10,  0.15);
  }
  :root[data-theme="dark"] .da-auth-icon-btn:hover {
    background: rgba(24, 24, 24,  0.9);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .da-auth-icon-btn:active {
    transform: scale(0.94);
  }
  :root.is-auth-gated #auth-modal-close {
    visibility: hidden;
    pointer-events: none;
  }
  .da-auth-welcome-guest-wrap {
    margin-top: 1.15rem;
    display: flex;
    justify-content: center;
  }
  .da-auth-welcome-guest-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 1.1rem;
    border-radius: 9999px;
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.35);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .da-auth-welcome-guest-link:hover {
    background: rgba(212, 168, 67, 0.16);
    border-color: var(--gold);
    transform: translateY(-1px);
  }
  .da-auth-welcome-guest-link:active {
    transform: translateY(0) scale(0.98);
  }
  .da-auth-header {
    text-align: center;
    margin-bottom: 1.45rem;
  }
  .da-auth-title {
    font-family: var(--serif);
    font-size: clamp(1.85rem, 6vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0A0A0A;
    margin: 0 0 0.45rem;
  }
  :root[data-theme="dark"] .da-auth-title {
    color: #F8FAFC;
  }
  .da-auth-subtitle {
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.48;
    color: #5E697E;
    margin: 0 auto;
    max-width: 330px;
  }
  :root[data-theme="dark"] .da-auth-subtitle {
    color: #8A95A8;
  }
  .auth-google-btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(10, 10, 10,  0.09);
    background: #FFFFFF;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: #0A0A0A;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.05), inset 0 1px 0 #FFFFFF;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .auth-google-btn {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(20, 20, 20,  0.68);
    color: #F8FAFC;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .auth-google-btn:hover {
    background: #F8FAFC;
    border-color: rgba(10, 10, 10,  0.16);
  }
  :root[data-theme="dark"] .auth-google-btn:hover {
    background: rgba(24, 24, 24,  0.88);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .auth-google-btn:active {
    transform: scale(0.98);
  }
  .auth-google-btn:disabled,
  .da-auth-submit-btn:disabled,
  .profile-edit-btn:disabled {
    opacity: 0.65;
    cursor: wait;
  }
  .auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.05rem 0;
    color: #5E697E;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
  }
  :root[data-theme="dark"] .auth-divider {
    color: #8A95A8;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(10, 10, 10,  0.1), transparent);
  }
  :root[data-theme="dark"] .auth-divider::before,
  :root[data-theme="dark"] .auth-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  /* Rounded-Rectangle (14px) Frosted Liquid-Glass Inputs */
  .da-auth-field {
    margin-bottom: 0.82rem;
  }
  .da-auth-input {
    width: 100%;
    height: 50px;
    padding: 0 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(10, 10, 10,  0.09);
    background: #FFFFFF;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #0A0A0A;
    font-family: var(--sans);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.03), inset 0 1px 0 #FFFFFF;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  :root[data-theme="dark"] .da-auth-input {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(20, 20, 20,  0.62);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .da-auth-input::placeholder {
    color: rgba(94, 105, 126, 0.72);
  }
  :root[data-theme="dark"] .da-auth-input::placeholder {
    color: rgba(138, 149, 168, 0.75);
  }
  .da-auth-input:focus {
    border-color: rgba(10, 10, 10,  0.26);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(10, 10, 10,  0.05);
  }
  :root[data-theme="dark"] .da-auth-input:focus {
    border-color: rgba(248, 250, 252, 0.28);
    background: rgba(24, 24, 24,  0.88);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
  }
  .auth-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .auth-password-wrap .da-auth-input {
    padding-right: 3rem;
  }
  .auth-password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: #5E697E;
    padding: 0.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.15s ease;
  }
  :root[data-theme="dark"] .auth-password-toggle {
    color: #8A95A8;
  }
  .auth-password-toggle:hover {
    color: #0A0A0A;
  }
  :root[data-theme="dark"] .auth-password-toggle:hover {
    color: #F8FAFC;
  }
  .da-auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.15rem 0.2rem 1.15rem;
    font-size: 0.78rem;
  }
  .da-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #5E697E;
    cursor: pointer;
    user-select: none;
  }
  :root[data-theme="dark"] .da-auth-remember {
    color: #8A95A8;
  }
  .da-auth-remember input {
    width: 15px;
    height: 15px;
    accent-color: var(--gold);
    border-radius: 4px;
    cursor: pointer;
  }
  :root[data-theme="dark"] .da-auth-remember input {
    accent-color: #D4A843;
  }
  .da-auth-forgot-btn {
    background: none;
    border: none;
    color: #0A0A0A;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0;
    transition: color 0.15s ease;
  }
  :root[data-theme="dark"] .da-auth-forgot-btn {
    color: #F8FAFC;
  }
  .da-auth-forgot-btn:hover {
    color: var(--gold);
  }
  :root[data-theme="dark"] .da-auth-forgot-btn:hover {
    color: #D4A843;
  }
  /* Liquid Elevated Primary Submit Button (14px Radius — Light & Dark Adaptive) */
  .da-auth-submit-btn {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1px solid rgba(10, 10, 10,  0.12);
    background: #0A0A0A;
    color: #FFFFFF;
    font-family: var(--sans);
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(10, 10, 10,  0.14);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .da-auth-submit-btn {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.38);
  }
  .da-auth-submit-btn:hover {
    background: #1A1A1A;
  }
  :root[data-theme="dark"] .da-auth-submit-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
  }
  .da-auth-submit-btn:active {
    transform: scale(0.985);
  }
  .da-auth-switch-row {
    text-align: center;
    margin-top: 1.05rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: #5E697E;
  }
  :root[data-theme="dark"] .da-auth-switch-row {
    color: #8A95A8;
  }
  .da-auth-switch-btn {
    background: none;
    border: none;
    padding: 0 0.2rem;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  :root[data-theme="dark"] .da-auth-switch-btn {
    color: #D4A843;
  }
  .da-auth-switch-btn:hover {
    color: #0A0A0A;
    text-decoration: underline;
  }
  :root[data-theme="dark"] .da-auth-switch-btn:hover {
    color: #F8FAFC;
  }
  .da-auth-legal-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: rgba(94, 105, 126, 0.78);
  }
  :root[data-theme="dark"] .da-auth-legal-footer {
    color: rgba(138, 149, 168, 0.75);
  }
  .da-auth-legal-link {
    background: none;
    border: none;
    padding: 0.15rem 0.25rem;
    color: rgba(10, 10, 10,  0.78);
    font-family: var(--sans);
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  :root[data-theme="dark"] .da-auth-legal-link {
    color: rgba(248, 250, 252, 0.78);
  }
  .da-auth-legal-link:hover {
    color: var(--gold);
  }
  :root[data-theme="dark"] .da-auth-legal-link:hover {
    color: #D4A843;
  }
  /* Desktop Split-Screen View (>= 660px — Viewport-Adaptive at 100% Browser Zoom) */
  @media (min-width: 660px) {
    #auth-modal {
      padding: clamp(0.6rem, 1.8vh, 1.5rem);
      background: #F1F5F9;
    }
    :root[data-theme="dark"] #auth-modal {
      background: #000000;
    }
    .da-auth-shell {
      width: min(980px, 96vw);
      height: auto;
      min-height: min(490px, 88dvh);
      max-height: 94dvh;
      border-radius: 24px;
      background: #F8FAFC;
      border: 1px solid rgba(10, 10, 10,  0.08);
      box-shadow: 0 28px 70px rgba(10, 10, 10,  0.10), inset 0 1px 0 #FFFFFF;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      overflow: hidden;
    }
    :root[data-theme="dark"] .da-auth-shell {
      background:
        radial-gradient(ellipse 85% 48% at 50% -8%, rgba(255, 255, 255, 0.07) 0%, transparent 70%),
        #0A0A0A;
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
    .da-auth-left {
      min-height: 0;
      max-height: 94dvh;
      overflow-y: auto;
      padding: clamp(1.15rem, 3vh, 2.15rem) clamp(1.2rem, 2.6vw, 2.65rem);
      background: transparent;
    }
    .da-auth-step {
      max-width: 390px;
    }
    .da-auth-welcome-body {
      margin-top: auto;
      margin-bottom: auto;
      padding: clamp(0.5rem, 1.6vh, 1.35rem) 0;
    }
    .da-auth-welcome-lead {
      font-size: clamp(0.84rem, 1.05vw, 0.95rem);
      margin: 0 0 clamp(1.2rem, 3vh, 2.25rem);
    }
    /* On desktop, show the slideshow inside the right-hand showcase panel above the pull-quote so the left column stays pure editorial typography */
    .da-auth-left .da-auth-showcase {
      display: none;
    }
    .da-auth-headline {
      font-size: clamp(1.68rem, min(2.75vw, 4.6vh), 2.75rem);
      margin: 0 0 clamp(0.5rem, 1.3vh, 0.85rem);
    }
    .da-auth-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: clamp(1rem, 2.4vh, 1.85rem);
      position: relative;
      margin: 10px 10px 10px 0;
      padding: clamp(1.1rem, 2.6vh, 2.1rem) clamp(1.15rem, 2.2vw, 2.35rem);
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 245, 249, 0.92) 100%);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid rgba(10, 10, 10,  0.08);
      box-shadow: 0 12px 32px rgba(10, 10, 10,  0.06), inset 0 1px 0 #FFFFFF;
    }
    :root[data-theme="dark"] .da-auth-right {
      background:
        radial-gradient(ellipse 80% 55% at 50% 35%, rgba(255, 255, 255, 0.065) 0%, transparent 72%),
        linear-gradient(180deg, rgba(20, 20, 20,  0.72) 0%, rgba(10, 10, 10,  0.94) 100%);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    .da-auth-right .da-auth-showcase {
      width: 100%;
      max-width: min(380px, calc((90dvh - 175px) * 14 / 9));
      margin: 0 auto;
      padding: 0;
    }
    .da-auth-right .da-auth-showcase__stage {
      width: 100%;
      aspect-ratio: 14 / 9;
      max-height: none;
    }
    .da-auth-right__quote-wrap {
      position: relative;
      z-index: 2;
      margin: 0;
      width: 100%;
    }
    /* Option B (Aligno Reference Style): Line 1 Italic Cormorant Garamond + Line 2 Bold Bricolage Grotesque */
    .da-auth-pullquote {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.2rem;
      margin: 0;
    }
    .da-auth-pullquote__serif {
      font-family: var(--brand-serif);
      font-style: italic;
      font-weight: 600;
      font-size: clamp(0.96rem, min(1.5vw, 2.4vh), 1.46rem);
      line-height: 1.24;
      letter-spacing: -0.01em;
      color: #475569;
      display: block;
    }
    :root[data-theme="dark"] .da-auth-pullquote__serif {
      color: rgba(248, 250, 252, 0.84);
    }
    .da-auth-pullquote__bold {
      font-family: var(--serif);
      font-style: normal;
      font-weight: 700;
      font-size: clamp(0.9rem, min(1.38vw, 2.25vh), 1.36rem);
      line-height: 1.22;
      letter-spacing: -0.025em;
      color: #0A0A0A;
      display: block;
    }
    :root[data-theme="dark"] .da-auth-pullquote__bold {
      color: #F8FAFC;
    }
  }
  .auth-btn-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: authSpin 0.65s linear infinite;
    vertical-align: middle;
  }
  .auth-btn-spinner[hidden] {
    display: none !important;
  }
  @keyframes authSpin {
    to { transform: rotate(360deg); }
  }

  /* Legal & Compliance Overlay, Documents & Privacy Nutrition Label */
  #legal-overlay {
    z-index: 10050;
  }
  .legal-panel__scroll {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 6rem;
  }
  .legal-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.3);
    margin-bottom: 0.65rem;
  }
  :root[data-theme="dark"] .legal-badge-pill {
    background: rgba(212, 168, 67, 0.16);
    border-color: rgba(212, 168, 67, 0.35);
    color: var(--gold-decorative);
  }
  .legal-header-title {
    font-family: var(--sans);
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: var(--ink);
    margin: 0 0 0.35rem;
  }
  @media (max-width: 640px) {
    .legal-header-title {
      font-size: 1.14rem;
    }
  }
  .legal-header-meta {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .legal-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: none;
    scrollbar-width: none;
  }
  .legal-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .legal-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 0.95rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .legal-tab-btn:hover {
    color: var(--ink);
    border-color: var(--muted);
    background: var(--paper-raised);
  }
  .legal-tab-btn[aria-selected="true"] {
    color: var(--ink);
    border-color: var(--gold);
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  :root[data-theme="dark"] .legal-tab-btn[aria-selected="true"] {
    background: var(--navy-raised);
    border-color: var(--gold-decorative);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .legal-doc {
    font-family: var(--sans);
    color: var(--ink);
    animation: fadeIn 0.18s ease-out;
  }
  .legal-doc[hidden] {
    display: none !important;
  }
  .legal-doc h2 {
    font-family: var(--sans);
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 1.65rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
    line-height: 1.3;
  }
  .legal-doc h3 {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.2rem 0 0.4rem;
    line-height: 1.35;
  }
  .legal-doc p {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 1rem;
  }
  .legal-doc ul, .legal-doc ol {
    margin: 0 0 1.1rem 1.2rem;
    padding: 0;
    font-size: 0.86rem;
    line-height: 1.62;
    color: var(--ink);
  }
  .legal-doc li {
    margin-bottom: 0.45rem;
  }
  .legal-callout {
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin: 1.4rem 0;
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--ink);
  }
  :root[data-theme="dark"] .legal-callout {
    border-left-color: var(--gold-decorative);
  }
  .legal-callout-title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .legal-quick-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.25);
    text-decoration: none;
    margin: 0.35rem 0 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .legal-quick-jump:hover {
    background: rgba(212, 168, 67, 0.16);
    border-color: var(--gold);
  }

  /* Privacy Nutrition Label Grid */
  .nutrition-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.2rem;
  }
  .nutrition-banner {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.08) 0%, rgba(10, 10, 10,  0.03) 100%);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  :root[data-theme="dark"] .nutrition-banner {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
  }
  .nutrition-banner__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
  }
  .nutrition-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  }
  :root[data-theme="dark"] .nutrition-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  .nutrition-card__header {
    padding: 0.9rem 1.05rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
  }
  .nutrition-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .nutrition-card__title {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
  }
  .nutrition-pill-badge {
    display: none !important;
  }
  .nutrition-card__body {
    padding: 0.35rem 1.05rem 0.95rem;
  }
  .nutrition-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
    gap: 0.5rem;
  }
  .nutrition-row:last-child {
    border-bottom: none;
  }
  .nutrition-row__left {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    width: 100%;
  }
  .nutrition-row__name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    line-height: 1.32;
  }
  .nutrition-row__desc {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.4;
  }
  .nutrition-row__tag {
    display: none !important;
  }

  /* Destructive Confirmation Modal (Admin & Chat Data Protection) */
  .da-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }
  .da-confirm-modal[hidden] {
    display: none !important;
  }
  .da-confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10,  0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: daConfirmFadeIn 0.16s ease-out;
  }
  .da-confirm-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    animation: daConfirmScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="dark"] .da-confirm-modal__card {
    background: #0A0A0A;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  }
  @keyframes daConfirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes daConfirmScaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .da-confirm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
  }
  .da-confirm-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .da-confirm-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 0.35rem;
  }
  .da-confirm-title {
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
  }
  .da-confirm-text {
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.5;
    margin: 0 0 0.75rem;
  }
  .da-confirm-warning-box {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: #dc2626;
    line-height: 1.45;
  }
  :root[data-theme="dark"] .da-confirm-warning-box {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
  }
  .da-confirm-btn-danger {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #ffffff;
    font-weight: 600;
  }
  .da-confirm-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
  }
  :root[data-theme="dark"] .da-confirm-btn-danger {
    background: #ef4444;
    border-color: #ef4444;
  }
  :root[data-theme="dark"] .da-confirm-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
  }

  /* Avatar change inside modal */
  .profile-edit-avatar-section {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.15rem 0 0.9rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.9rem;
  }
  .profile-modal-avatar-preview {
    position: relative;
    flex-shrink: 0;
  }
  .profile-modal-avatar-preview .profile-hero-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
  }
  .profile-edit-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .profile-edit-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--rule);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .profile-edit-photo-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .profile-remove-photo-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #ef4444;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    text-align: left;
    width: fit-content;
  }
  .profile-remove-photo-btn:hover {
    text-decoration: underline;
  }

  /* Manage Subscription Section & Nestuge Billing */
  .profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    padding: 0 0.35rem;
  }
  .profile-plan-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
  }
  :root[data-theme="dark"] .profile-plan-status-pill {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
  }
  .profile-plan-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
  }
  .profile-plan-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  }
  :root[data-theme="dark"] .profile-plan-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .profile-plan-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: none;
    padding-bottom: 0;
  }
  .profile-plan-card__info {
    flex: 1 1 200px;
  }
  .profile-plan-tier-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }
  .profile-plan-badge {
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(10, 10, 10,  0.08);
    color: #0A0A0A;
    border: 1px solid rgba(10, 10, 10,  0.12);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
  }
  :root[data-theme="dark"] .profile-plan-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
    border-color: rgba(255, 255, 255, 0.16);
  }
  .profile-plan-badge--free {
    background: rgba(10, 10, 10,  0.07);
    color: #334155;
    border: 1px solid rgba(10, 10, 10,  0.1);
  }
  :root[data-theme="dark"] .profile-plan-badge--free {
    background: rgba(255, 255, 255, 0.09);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.15);
  }
  .profile-plan-badge--premium {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
  }
  :root[data-theme="dark"] .profile-plan-badge--premium {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
  }
  .profile-plan-badge--vip {
    background: #0A0A0A;
    color: #FAF8F3;
    border-color: #0A0A0A;
  }
  :root[data-theme="dark"] .profile-plan-badge--vip {
    background: #F8FAFC;
    color: #0A0A0A;
    border-color: #F8FAFC;
  }
  .profile-plan-price {
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
  }
  .profile-plan-title {
    font-family: var(--sans);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.25rem;
    line-height: 1.25;
  }
  .profile-plan-desc {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.35;
  }
  .profile-plan-switch-btn {
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.2);
  }
  .profile-plan-switch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.32);
  }
  :root[data-theme="dark"] .profile-plan-switch-btn {
    background: var(--gold-decorative);
    color: var(--navy);
    border-color: var(--gold-decorative);
  }
  .profile-plan-perks {
    padding: 0.85rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .profile-plan-perk-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink);
  }
  .profile-plan-perk-item svg {
    color: var(--gold);
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .profile-plan-perk-item svg {
    color: var(--gold-decorative);
  }
  .profile-plan-actions {
    padding-top: 0.95rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .profile-nestuge-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(132, 101, 30, 0.1), rgba(212, 168, 67, 0.05));
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
  }
  :root[data-theme="dark"] .profile-nestuge-btn {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.15), rgba(10, 10, 10,  0.6));
    border-color: var(--gold-decorative);
  }
  .profile-nestuge-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--gold-glow);
  }
  .profile-nestuge-btn:active {
    transform: scale(0.99);
  }
  .profile-nestuge-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .profile-nestuge-btn__icon {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  .profile-nestuge-btn__text {
    flex: 1;
    min-width: 0;
  }
  .profile-nestuge-btn__title {
    display: block;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
  }
  .profile-nestuge-btn__subtitle {
    display: block;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.25;
    margin-top: 0.15rem;
  }
  .profile-nestuge-btn__arrow {
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .profile-nestuge-btn:hover .profile-nestuge-btn__arrow {
    transform: translateX(3px);
  }
  :root[data-theme="dark"] .profile-nestuge-btn__arrow {
    color: var(--gold-decorative);
  }
  .profile-plan-nestuge-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.35;
    padding: 0 0.25rem;
  }
  .profile-plan-nestuge-note svg {
    flex-shrink: 0;
    color: var(--gold);
  }

  /* Plan Switcher Modal & Options */
  .profile-plan-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 2px;
  }
  .profile-plan-option-card {
    border: 1.5px solid var(--rule);
    background: var(--surface-raised);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.15s ease;
  }
  .profile-plan-option-card:hover {
    border-color: var(--gold);
  }
  .profile-plan-option-card.selected {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(132, 101, 30, 0.08), rgba(212, 168, 67, 0.04));
    box-shadow: 0 0 0 1px var(--gold);
  }
  :root[data-theme="dark"] .profile-plan-option-card.selected {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.12), rgba(10, 10, 10,  0.4));
    border-color: var(--gold-decorative);
  }
  .profile-plan-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .profile-plan-option-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .profile-plan-option-name {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .profile-plan-option-price {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold);
  }
  :root[data-theme="dark"] .profile-plan-option-price {
    color: var(--gold-decorative);
  }
  .profile-plan-option-desc {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
    margin: 0;
  }
  .profile-plan-option-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--rule);
    margin-top: 0.2rem;
  }
  .profile-plan-option-select-btn {
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .profile-plan-option-select-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .profile-plan-option-select-btn.active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
  }
  :root[data-theme="dark"] .profile-plan-option-select-btn.active {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  .profile-plan-option-nestuge-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
  }
  .profile-plan-option-nestuge-link:hover {
    text-decoration: underline;
  }
  :root[data-theme="dark"] .profile-plan-option-nestuge-link {
    color: var(--gold-decorative);
  }

  /* --- Podcast --------------------------------------------------------- */

  /* One-level-back step out of an episode's detail view, distinct from the
     panel's own "×" (which always fully exits to Home from either
     sub-view — see the HTML comment above the overlay). */
  .podcast-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 1.25rem;
    padding: 0.4rem 0.6rem 0.4rem 0.3rem;
    border: none;
    background: none;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
  }
  .podcast-back svg { width: 18px; height: 18px; }
  .podcast-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

  /* Custom player rather than the native <audio controls> element —
     browsers (Android's especially) render that with inconsistent,
     dated-looking chrome that can't be themed, which fights the rest of
     this app's deliberate look. The <audio> tag itself stays in the
     markup purely as the playback engine; every visible control here is
     hand-built and driven by it. */
  /* Legacy podcast-player rules consolidated into modern player styles above */

  /* Small play badge overlaid on an episode row's thumbnail — the one-tap
     "start listening now" affordance. Tapping the row's title/excerpt area
     instead opens the same episode paused; see wireEpisodeLink in the
     script. A <button> here rather than nesting inside the row's own link
     keeps two independently-interactive controls, which nesting a button
     inside an anchor cannot do correctly. */
  .podcast-thumb-btn {
    position: relative;
    display: block;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
  }
  .podcast-thumb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .podcast-thumb-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
  }
  .podcast-thumb-play svg { width: 13px; height: 13px; margin-left: 1px; }

  #podcast-episode-list .issue,
  #podcast-episode-list .issue__row { padding-left: 0; padding-right: 0; }

  /* --- Skeleton Loader --- */
  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--paper-raised) 0%,
      var(--thumb-bg) 50%,
      var(--paper-raised) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
  }
  .skeleton-hero-card {
    margin: 0.85rem 1.1rem 0.65rem;
    padding: 0.6rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .skeleton-hero-card {
    background: rgba(20, 20, 20,  0.65);
  }
  .skeleton-hero-img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 15px;
    margin: 0 0 0.85rem;
  }
  .skeleton-hero-title {
    height: 1.5rem;
    width: 68%;
    margin: 0 0.4rem 0.5rem;
  }
  .skeleton-hero-meta {
    height: 0.9rem;
    width: 45%;
    margin: 0 0.4rem 0.35rem;
  }
  .skeleton-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.85rem;
    padding: 0.52rem 0.75rem 0.52rem 0.52rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
  }
  .skeleton-item-body {
    flex: 1;
    min-width: 0;
  }
  .skeleton-item-title {
    height: 0.95rem;
    width: 88%;
    margin-bottom: 0.4rem;
  }
  .skeleton-item-title:nth-child(2) {
    width: 58%;
  }
  .skeleton-item-meta {
    height: 0.72rem;
    width: 42%;
  }
  .skeleton-item-thumb {
    width: 86px;
    height: 86px;
    border-radius: 14px;
    flex-shrink: 0;
    order: -1;
  }
  @media (max-width: 380px) {
    .skeleton-item {
      padding: 0.46rem 0.65rem 0.46rem 0.46rem;
      gap: 0.72rem;
    }
    .skeleton-item-thumb {
      width: 78px;
      height: 78px;
      border-radius: 13px;
    }
  }

  /* --- Reader 'Share as Image' & Quote Card Generator --- */
  .reader-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .reader-panel__quote-btn {
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--muted);
    background: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .reader-panel__quote-btn:hover {
    background: var(--paper-raised);
    border-color: var(--muted);
    color: var(--ink);
  }
  :root[data-theme="dark"] .reader-panel__quote-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--muted);
    color: var(--ink);
  }
  .reader-panel__quote-btn:active {
    transform: scale(0.96);
  }
  .reader-panel__quote-btn svg {
    flex-shrink: 0;
  }

  @media (max-width: 480px) {
    #reader-share-image-btn {
      display: none !important;
    }
  }

  /* Reader 3-dots (⋮) options menu */
  .reader-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .reader-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 196px;
    padding: 0.38rem;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(10, 10, 10, 0.10);
    box-shadow: 0 12px 32px rgba(10, 10, 10, 0.14), 0 2px 8px rgba(10, 10, 10, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 80;
    transform-origin: top right;
    animation: readerMoreFadeIn 0.16s ease-out;
  }
  .reader-more-menu[hidden] {
    display: none !important;
  }
  :root[data-theme="dark"] .reader-more-menu {
    background: rgba(18, 18, 18, 0.94);
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 168, 67, 0.08);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (prefers-reduced-transparency: no-preference) {
      .reader-more-menu {
        background: rgba(248, 250, 252, 0.74);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        backdrop-filter: blur(20px) saturate(140%);
      }
      :root[data-theme="dark"] .reader-more-menu {
        background: rgba(18, 18, 18, 0.62);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        backdrop-filter: blur(20px) saturate(140%);
      }
    }
  }
  @keyframes readerMoreFadeIn {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reader-more-menu {
      animation: none;
    }
  }

  .reader-more-item {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
  }
  .reader-more-item:hover,
  .reader-more-item:focus-visible {
    background: rgba(10, 10, 10, 0.06);
    outline: none;
  }
  :root[data-theme="dark"] .reader-more-item:hover,
  :root[data-theme="dark"] .reader-more-item:focus-visible {
    background: rgba(248, 250, 252, 0.08);
  }
  .reader-more-item:active {
    background: rgba(10, 10, 10, 0.10);
  }
  :root[data-theme="dark"] .reader-more-item:active {
    background: rgba(248, 250, 252, 0.12);
  }
  .reader-more-item__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ink);
  }
  .reader-more-item__aa {
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .reader-more-item--mobile-only {
    display: none;
  }
  @media (max-width: 480px) {
    .reader-more-item--mobile-only {
      display: flex;
    }
  }

  /* Floating Liquid-Glass Selection Bar (Highlight · Share as Image · Copy) */
  .da-selection-bar {
    position: fixed;
    z-index: 62;
    transform: translate(-50%, -100%);
    background: rgba(248, 250, 252, 0.94);
    color: var(--ink);
    border: 1px solid rgba(10, 10, 10,  0.14);
    box-shadow: 0 12px 32px rgba(10, 10, 10,  0.22), 0 2px 8px rgba(10, 10, 10,  0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 0.26rem 0.32rem;
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    white-space: nowrap;
    transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    animation: quote-pill-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .da-selection-bar[hidden] {
    display: none !important;
  }
  .da-selection-bar.is-below {
    transform: translate(-50%, 0%);
    animation: quote-pill-pop-below 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  :root[data-theme="dark"] .da-selection-bar {
    background: rgba(14, 14, 14,  0.94);
    border-color: rgba(212, 168, 67, 0.38);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.62), 0 0 18px rgba(212, 168, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .da-selection-bar {
      background: rgba(248, 250, 252, 0.80);
      -webkit-backdrop-filter: blur(20px) saturate(155%);
      backdrop-filter: blur(20px) saturate(155%);
    }
    :root[data-theme="dark"] .da-selection-bar {
      background: rgba(10, 10, 10,  0.80);
      -webkit-backdrop-filter: blur(22px) saturate(165%);
      backdrop-filter: blur(22px) saturate(165%);
    }
  }
  @keyframes quote-pill-pop {
    from { opacity: 0; transform: translate(-50%, -82%) scale(0.91); }
    to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  }
  @keyframes quote-pill-pop-below {
    from { opacity: 0; transform: translate(-50%, -12%) scale(0.91); }
    to { opacity: 1; transform: translate(-50%, 0%) scale(1); }
  }
  .da-selection-bar__btn,
  .reader-selection-quote-btn {
    background: transparent;
    color: var(--ink);
    border: none;
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .da-selection-bar__btn:hover,
  .reader-selection-quote-btn:hover {
    background: rgba(10, 10, 10,  0.07);
    color: var(--ink);
  }
  :root[data-theme="dark"] .da-selection-bar__btn:hover,
  :root[data-theme="dark"] .reader-selection-quote-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #F4EFE6;
  }
  .da-selection-bar__btn:active,
  .reader-selection-quote-btn:active {
    transform: scale(0.95);
  }
  .da-selection-bar__btn svg,
  .reader-selection-quote-btn svg {
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  :root[data-theme="dark"] .da-selection-bar__btn svg,
  :root[data-theme="dark"] .reader-selection-quote-btn svg {
    color: var(--gold-decorative);
  }
  .da-selection-bar__divider {
    width: 1px;
    height: 16px;
    background: rgba(10, 10, 10,  0.12);
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .da-selection-bar__divider {
    background: rgba(248, 250, 252, 0.14);
  }

  /* Editorial Liquid-Gold Reader & Transcript Highlight */
  mark.da-user-highlight {
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.28) 0%, rgba(212, 168, 67, 0.18) 100%);
    color: inherit;
    border-bottom: 1.5px solid rgba(132, 101, 30, 0.48);
    border-radius: 4px;
    padding: 0.04em 0.16em;
    margin: 0 -0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  :root[data-theme="dark"] mark.da-user-highlight {
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.30) 0%, rgba(212, 168, 67, 0.16) 100%);
    color: #F7F4ED;
    border-bottom-color: rgba(212, 168, 67, 0.65);
  }
  mark.da-user-highlight:hover {
    background: rgba(212, 168, 67, 0.38);
  }
  mark.da-user-highlight.is-fresh {
    animation: da-highlight-flash 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes da-highlight-flash {
    0% { background-color: rgba(212, 168, 67, 0.65); box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.22); }
    100% { background-color: rgba(212, 168, 67, 0.24); box-shadow: 0 0 0 0 rgba(212, 168, 67, 0); }
  }

  /* Quote Generator Modal (Sleek High-Opacity Architectural Surface matching Reader Preferences) */
  .quote-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(10, 10, 10,  0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 0.2s ease;
  }
  :root[data-theme="dark"] .quote-modal-backdrop {
    background: rgba(4, 8, 16, 0.65);
  }

  .quote-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 500px);
    max-height: calc(88vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(88dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    z-index: 66;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(10, 10, 10,  0.08);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(10, 10, 10,  0.22), 0 4px 16px rgba(10, 10, 10,  0.06);
    overflow: hidden;
    animation: da-modal-spring-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes da-modal-spring-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @supports (backdrop-filter: blur(28px)) or (-webkit-backdrop-filter: blur(28px)) {
    .quote-modal {
      background: rgba(255, 255, 255, 0.95);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      backdrop-filter: blur(28px) saturate(160%);
    }
  }
  :root[data-theme="dark"] .quote-modal {
    background: rgba(18, 18, 18,  0.98);
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  }
  @supports (backdrop-filter: blur(28px)) or (-webkit-backdrop-filter: blur(28px)) {
    :root[data-theme="dark"] .quote-modal {
      background: rgba(18, 18, 18,  0.96);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      backdrop-filter: blur(28px) saturate(160%);
    }
  }

  .quote-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.35rem 0.8rem;
    border-bottom: 1px solid rgba(10, 10, 10,  0.07);
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .quote-modal__header {
    border-bottom-color: rgba(248, 250, 252, 0.08);
  }
  .quote-modal__title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .quote-modal__scroll {
    padding: 1.15rem 1.35rem 1.35rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
  }

  .quote-card-preview-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(10, 10, 10,  0.045);
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 18px;
    padding: 1rem;
  }
  :root[data-theme="dark"] .quote-card-preview-area {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .quote-card-canvas-wrap {
    width: 100%;
    max-width: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .quote-card-canvas-wrap canvas {
    width: 100%;
    height: auto;
    max-height: 36vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(10, 10, 10,  0.22);
    display: block;
  }

  .quote-modal__section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .quote-modal__textarea {
    width: 100%;
    border: 1px solid rgba(10, 10, 10,  0.09);
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink);
    background: rgba(10, 10, 10,  0.04);
    resize: vertical;
    min-height: 70px;
    max-height: 136px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  :root[data-theme="dark"] .quote-modal__textarea {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .quote-modal__textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px var(--gold-glow);
  }
  :root[data-theme="dark"] .quote-modal__textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--gold);
  }

  .quote-modal__quote-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .quote-chip {
    border: 1px solid rgba(10, 10, 10,  0.07);
    background: rgba(10, 10, 10,  0.045);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .quote-chip {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .quote-chip:hover {
    border-color: rgba(10, 10, 10,  0.14);
    color: var(--ink);
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.06);
  }
  :root[data-theme="dark"] .quote-chip:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.11);
  }

  .quote-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  @media (max-width: 480px) {
    .quote-modal__row {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }

  .quote-modal__col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Theme and format switch controls inside Quote Modal matching Reader Preferences */
  .quote-modal .theme-switch__option {
    font-size: 0.81rem;
    padding: 0.52rem 0.4rem;
  }

  .quote-modal__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(10, 10, 10,  0.07);
  }
  :root[data-theme="dark"] .quote-modal__actions {
    border-top-color: rgba(248, 250, 252, 0.08);
  }
  .quote-modal__btn {
    flex: 1;
    height: 44px;
    box-sizing: border-box;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }
  .quote-modal__btn:active {
    transform: scale(0.97);
  }
  .quote-modal__btn--primary {
    background: #0A0A0A;
    color: #F8FAFC;
    border-color: rgba(10, 10, 10,  0.12);
    box-shadow: 0 4px 14px rgba(10, 10, 10,  0.16);
  }
  :root[data-theme="dark"] .quote-modal__btn--primary {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F8FAFC;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  .quote-modal__btn--primary:hover {
    opacity: 0.94;
  }
  :root[data-theme="dark"] .quote-modal__btn--primary:hover {
    background: rgba(255, 255, 255, 0.19);
  }
  .quote-modal__btn--secondary {
    background: rgba(10, 10, 10,  0.055);
    border-color: rgba(10, 10, 10,  0.08);
    color: var(--ink);
  }
  :root[data-theme="dark"] .quote-modal__btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .quote-modal__btn--secondary:hover {
    background: rgba(10, 10, 10,  0.09);
  }
  :root[data-theme="dark"] .quote-modal__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.10);
  }
  .quote-modal__btn--ghost {
    background: rgba(10, 10, 10,  0.055);
    border-color: rgba(10, 10, 10,  0.08);
    color: var(--ink);
    flex: 0 0 auto;
    padding: 0.74rem 0.85rem;
  }
  :root[data-theme="dark"] .quote-modal__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .quote-modal__btn--ghost:hover {
    background: rgba(10, 10, 10,  0.09);
  }
  :root[data-theme="dark"] .quote-modal__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
  }
  .quote-modal__btn--secondary.is-active {
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    color: var(--ink);
  }
  :root[data-theme="dark"] .quote-modal__btn--secondary.is-active {
    border-color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.16);
    color: #F4EFE6;
  }

  /* 1-Tap Social Media Share Tray inside Share as Image Modal */
  .quote-modal__social-tray {
    margin-top: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-radius: 16px;
    background: rgba(10, 10, 10,  0.04);
    border: 1px solid rgba(10, 10, 10,  0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: da-social-tray-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quote-modal__social-tray[hidden] {
    display: none !important;
  }
  :root[data-theme="dark"] .quote-modal__social-tray {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(248, 250, 252, 0.10);
  }
  @keyframes da-social-tray-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .quote-modal__social-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .quote-modal__social-hint {
    font-size: 0.69rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold);
  }
  :root[data-theme="dark"] .quote-modal__social-hint {
    color: var(--gold-decorative);
  }
  .quote-modal__social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
  }
  @media (max-width: 400px) {
    .quote-modal__social-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .quote-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0.58rem 0.5rem;
    border-radius: 12px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(10, 10, 10,  0.09);
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .quote-social-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.11);
    color: #F8FAFC;
  }
  .quote-social-btn:hover {
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.10);
    box-shadow: 0 4px 12px rgba(10, 10, 10,  0.08);
  }
  :root[data-theme="dark"] .quote-social-btn:hover {
    border-color: var(--gold-decorative);
    background: rgba(212, 168, 67, 0.14);
  }
  .quote-social-btn:active {
    transform: scale(0.95);
  }
  .quote-social-btn svg {
    flex-shrink: 0;
  }

  /* Core Animations, Completion Shimmer, Audio Aura & Pull-to-Refresh */
  .reading-progress__fill.is-complete-shimmer {
    background: linear-gradient(90deg, var(--gold-decorative) 0%, #FFF9DB 45%, #FFFFFF 50%, #FFF9DB 55%, var(--gold-decorative) 100%);
    background-size: 220% 100%;
    animation: da-progress-shimmer 1.35s cubic-bezier(0.22, 1, 0.36, 1) 1;
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.8), 0 0 4px rgba(255, 249, 219, 0.9);
  }
  @keyframes da-progress-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  #podcast-play-btn.is-playing,
  :root[data-theme="dark"] #podcast-play-btn.is-playing {
    box-shadow: 0 12px 28px rgba(10, 10, 10,  0.32), 0 0 18px rgba(212, 168, 67, 0.32);
  }
  #podcast-play-btn-mini.is-playing,
  :root[data-theme="dark"] #podcast-play-btn-mini.is-playing {
    box-shadow: 0 6px 18px rgba(10, 10, 10,  0.26), 0 0 14px rgba(212, 168, 67, 0.32);
  }
  #podcast-play-btn::after,
  #podcast-play-btn-mini::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--gold-decorative);
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    will-change: transform, opacity;
  }
  #podcast-play-btn.is-playing::after,
  #podcast-play-btn-mini.is-playing::after {
    animation: da-audio-aura-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
  @keyframes da-audio-aura-pulse {
    0% {
      transform: scale(0.98);
      opacity: 0.78;
    }
    72% {
      transform: scale(1.34);
      opacity: 0;
    }
    100% {
      transform: scale(1.34);
      opacity: 0;
    }
  }

  .da-ptr-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    z-index: 55;
    transform: translate(-50%, -64px) scale(0.85);
    opacity: 0;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(212, 168, 67, 0.36);
    box-shadow: 0 8px 24px rgba(10, 10, 10,  0.16);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }
  :root[data-theme="dark"] .da-ptr-indicator {
    background: rgba(14, 14, 14,  0.92);
    border-color: rgba(212, 168, 67, 0.42);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: #F4EFE6;
  }
  .da-ptr-indicator.is-spinning svg {
    animation: da-ptr-spin 0.75s linear infinite;
  }
  @keyframes da-ptr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .da-selection-bar,
    .quote-modal,
    .quote-modal__social-tray,
    .da-ptr-indicator,
    .da-ptr-indicator.is-spinning svg,
    #podcast-play-btn.is-playing,
    #podcast-play-btn-mini.is-playing,
    #podcast-play-btn.is-playing::after,
    #podcast-play-btn-mini.is-playing::after,
    .reading-progress,
    .reading-progress__fill.is-complete-shimmer,
    mark.da-user-highlight.is-fresh,
    .da-view-enter,
    .da-view-exit,
    .da-sheet-enter,
    .da-sheet-exit,
    .da-detail-enter,
    .da-detail-exit,
    .da-cascade-item,
    .markets-row-card.is-tick-up,
    .markets-row-card.is-tick-down,
    .markets-macro-card.is-tick-up,
    .markets-macro-card.is-tick-down,
    .markets-overview-pill.is-tick-up,
    .markets-overview-pill.is-tick-down {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ==========================================================================
     MODULE 1: 60FPS CORE MOTION, SPRING TACTILE PRESS, OVERLAY CURVES & CASCADES
     ========================================================================== */
  /* Step 1.1: Unified Spring-Physics Tactile Press (scale(0.97) + cubic-bezier(0.22, 1, 0.36, 1)) */
  :root:not(.is-low-motion) .hero,
  :root:not(.is-low-motion) .issue,
  :root:not(.is-low-motion) .home-podcast-card,
  :root:not(.is-low-motion) .home-podcast-slide-card,
  :root:not(.is-low-motion) .podcast-episode-card,
  :root:not(.is-low-motion) .archive-card,
  :root:not(.is-low-motion) .markets-row-card,
  :root:not(.is-low-motion) .markets-macro-card,
  :root:not(.is-low-motion) .markets-overview-pill,
  :root:not(.is-low-motion) .markets-news-card,
  :root:not(.is-low-motion) .store-book-card,
  :root:not(.is-low-motion) .store-featured-banner,
  :root:not(.is-low-motion) .archive-filter-chip,
  :root:not(.is-low-motion) .bookmarks-tab,
  :root:not(.is-low-motion) .markets-filter-tab,
  :root:not(.is-low-motion) .markets-news-filter-btn,
  :root:not(.is-low-motion) .markets-range-btn,
  :root:not(.is-low-motion) .markets-stance-chip,
  :root:not(.is-low-motion) .store-tab,
  :root:not(.is-low-motion) .podcast-toolbar-btn,
  :root:not(.is-low-motion) .markets-icon-btn {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  :root:not(.is-low-motion) .hero:active,
  :root:not(.is-low-motion) .issue:active,
  :root:not(.is-low-motion) .home-podcast-card:active,
  :root:not(.is-low-motion) .home-podcast-slide-card:active,
  :root:not(.is-low-motion) .podcast-episode-card:active,
  :root:not(.is-low-motion) .archive-card:active,
  :root:not(.is-low-motion) .markets-row-card:active,
  :root:not(.is-low-motion) .markets-macro-card:active,
  :root:not(.is-low-motion) .markets-overview-pill:active,
  :root:not(.is-low-motion) .markets-news-card:active,
  :root:not(.is-low-motion) .store-book-card:active,
  :root:not(.is-low-motion) .store-featured-banner:active,
  :root:not(.is-low-motion) .archive-filter-chip:active,
  :root:not(.is-low-motion) .bookmarks-tab:active,
  :root:not(.is-low-motion) .markets-filter-tab:active,
  :root:not(.is-low-motion) .markets-news-filter-btn:active,
  :root:not(.is-low-motion) .markets-range-btn:active,
  :root:not(.is-low-motion) .markets-stance-chip:active,
  :root:not(.is-low-motion) .store-tab:active,
  :root:not(.is-low-motion) .podcast-toolbar-btn:active,
  :root:not(.is-low-motion) .markets-icon-btn:active {
    transform: scale(0.97) !important;
  }

  /* Step 1.2: Smooth Overlay & Detail Transitions (cubic-bezier(0.32, 0.72, 0, 1)) */
  :root:not(.is-low-motion) .da-view-enter {
    animation: da-view-enter-kf 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    will-change: transform, opacity;
  }
  :root:not(.is-low-motion) .da-view-exit {
    animation: da-view-exit-kf 0.21s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    pointer-events: none;
    will-change: transform, opacity;
  }
  @keyframes da-view-enter-kf {
    0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes da-view-exit-kf {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.99); }
  }

  :root:not(.is-low-motion) .da-sheet-enter {
    animation: da-sheet-enter-kf 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    will-change: transform, opacity;
  }
  :root:not(.is-low-motion) .da-sheet-exit {
    animation: da-sheet-exit-kf 0.22s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    pointer-events: none;
    will-change: transform, opacity;
  }
  @keyframes da-sheet-enter-kf {
    0% { opacity: 0; transform: translate3d(0, 32px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes da-sheet-exit-kf {
    0% { opacity: 1; transform: translate3d(0, 0, 0); }
    100% { opacity: 0; transform: translate3d(0, 32px, 0); }
  }

  :root:not(.is-low-motion) .da-detail-enter {
    animation: da-detail-enter-kf 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    will-change: transform, opacity;
  }
  :root:not(.is-low-motion) .da-detail-exit {
    animation: da-detail-exit-kf 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    pointer-events: none;
    will-change: transform, opacity;
  }
  @keyframes da-detail-enter-kf {
    0% { opacity: 0; transform: translate3d(18px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes da-detail-exit-kf {
    0% { opacity: 1; transform: translate3d(0, 0, 0); }
    100% { opacity: 0; transform: translate3d(18px, 0, 0); }
  }

  /* Step 1.3A: 30ms Staggered Cascade Reveals (translateY(8px) -> 0) */
  :root:not(.is-low-motion) .da-cascade-item {
    animation: da-cascade-in-kf 0.26s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--da-stagger-delay, 0ms);
  }
  @keyframes da-cascade-in-kf {
    0% { opacity: 0; transform: translate3d(0, 8px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  /* Step 1.3B: Markets Emerald & Crimson Live Price-Tick Flashes */
  :root:not(.is-low-motion) .markets-row-card.is-tick-up,
  :root:not(.is-low-motion) .markets-macro-card.is-tick-up,
  :root:not(.is-low-motion) .markets-overview-pill.is-tick-up {
    animation: da-price-tick-up 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  }
  :root:not(.is-low-motion) .markets-row-card.is-tick-down,
  :root:not(.is-low-motion) .markets-macro-card.is-tick-down,
  :root:not(.is-low-motion) .markets-overview-pill.is-tick-down {
    animation: da-price-tick-down 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes da-price-tick-up {
    0% {
      border-color: rgba(16, 185, 129, 0.65);
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), inset 0 0 22px rgba(16, 185, 129, 0.16);
    }
    100% {
      border-color: var(--rule);
      box-shadow: none;
    }
  }
  @keyframes da-price-tick-down {
    0% {
      border-color: rgba(244, 63, 94, 0.65);
      box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.35), inset 0 0 22px rgba(244, 63, 94, 0.16);
    }
    100% {
      border-color: var(--rule);
      box-shadow: none;
    }
  }

  /* Module 5: GPU Compositor Layer Isolation for Full Liquid-Glass Blur (Infinix Hot 30i 60fps) */
  .bottom-nav,
  .reader-panel__bar,
  .da-selection-bar,
  .da-ptr-indicator {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .reader-overlay[hidden],
  .reader-overlay[hidden] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  :root.is-low-motion .bottom-nav,
  :root.is-low-motion .reader-panel__bar,
  :root.is-low-motion .da-selection-bar,
  :root.is-low-motion .da-ptr-indicator {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* --- Tactile Horizontal Swipe-to-Close Gestures --- */
  .swipe-edge-cue {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) translateX(-24px) scale(0.85);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 10, 10,  0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 168, 67, 0.45);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.16s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  }

  .swipe-edge-cue.is-active {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }

  .swipe-edge-cue.is-ready {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
    transform: translateY(-50%) translateX(4px) scale(1.1);
    box-shadow: 0 6px 22px rgba(212, 168, 67, 0.48);
  }

  :root[data-theme="light"] .swipe-edge-cue {
    background: rgba(255, 255, 255, 0.94);
    color: #0A0A0A;
    border-color: rgba(10, 10, 10,  0.22);
    box-shadow: 0 4px 16px rgba(10, 10, 10,  0.18);
  }

  :root[data-theme="light"] .swipe-edge-cue.is-ready {
    background: #0A0A0A;
    color: var(--gold);
    border-color: #0A0A0A;
    box-shadow: 0 6px 20px rgba(10, 10, 10,  0.35);
  }

  .is-swiping-back {
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* ==========================================================================
     CIRCLE NAVIGATION & WHATSAPP-STYLE EXECUTIVE COMMUNITY
     ========================================================================== */
  .bottom-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-nav__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--gold);
    color: #0A0A0A;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 1.5px solid var(--paper);
    font-family: var(--mono);
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  :root[data-theme="dark"] .bottom-nav__badge {
    color: #0A0A0A;
    background: var(--gold);
    border-color: #0A0A0A;
  }

  /* --- Firebase Auth & Security UI Components --- */
  .auth-tabs {
    display: flex;
    gap: 0.35rem;
    background: var(--surface-raised);
    padding: 0.3rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    border: 1px solid var(--rule);
  }
  .auth-google-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  }
  .auth-google-btn:hover {
    background: var(--surface-raised);
    border-color: var(--gold);
  }
  .auth-google-btn:active {
    transform: scale(0.99);
  }
  :root[data-theme="dark"] .auth-google-btn {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
  }
  :root[data-theme="dark"] .auth-google-btn:hover {
    background: #1F1F1F;
    border-color: var(--gold);
  }
  .auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.15rem 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--rule);
  }
  .auth-divider span {
    padding: 0 0.75rem;
  }
  .auth-tab {
    flex: 1;
    padding: 0.55rem 0.65rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
  }
  .auth-tab.is-active {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
  :root[data-theme="dark"] .auth-tab.is-active {
    background: #171717;
    color: #F8FAFC;
  }
  .auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 0.84rem;
    line-height: 1.4;
    margin-bottom: 1.15rem;
  }
  .auth-alert[hidden] {
    display: none !important;
  }
  .auth-alert--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
  }
  .auth-alert--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
  }
  :root[data-theme="dark"] .auth-alert--success {
    color: #4ade80;
  }
  .auth-alert--warning {
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.3);
    color: #a16207;
  }
  :root[data-theme="dark"] .auth-alert--warning {
    color: #eab308;
  }
  .auth-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .auth-password-toggle {
    position: absolute;
    right: 0.65rem;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-password-toggle:hover {
    color: var(--ink);
  }
  .auth-link-btn {
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
  }
  .auth-link-btn:hover {
    text-decoration: underline;
  }
  .auth-avatar-selector {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.25rem 0;
  }
  .auth-avatar-option {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    background: var(--surface-raised);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .auth-avatar-option.is-selected {
    border-color: var(--gold);
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--gold-glow);
  }
  .auth-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Email Verification Banner */
  .email-verify-banner {
    background: #F1F5F9;
    border-bottom: none;
    padding: 0.65rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    z-index: 40;
    position: relative;
    top: auto;
  }
  :root[data-theme="dark"] .email-verify-banner {
    background: #1A1A1A;
    border-bottom: none;
  }
  .email-verify-banner[hidden] {
    display: none !important;
  }
  .email-verify-banner__content {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
  }
  .email-verify-banner__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    background: var(--gold);
    color: #fff;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .email-verify-banner__badge {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  .email-verify-banner__text {
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .email-verify-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .email-verify-banner__btn {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .email-verify-banner__btn:hover {
    border-color: var(--gold);
  }
  .email-verify-banner__btn--check {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
  }
  :root[data-theme="dark"] .email-verify-banner__btn--check {
    background: var(--gold-decorative);
    color: var(--navy);
  }
  .email-verify-banner__close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
  }

  /* --- Executive Admin Console Styles (obiechefuvictory@gmail.com) --- */
  .admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 10, 10,  0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: stretch;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .admin-overlay[hidden] {
    display: none !important;
  }

  .admin-panel {
    width: 100%;
    max-width: 960px;
    height: 100%;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  :root[data-theme="dark"] .admin-panel {
    background: #0A0A0A;
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    border-right: 1px solid rgba(148, 163, 184, 0.15);
  }

  .admin-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.15rem;
    border: none;
    border-bottom: none;
    background: var(--paper);
    flex-shrink: 0;
    z-index: 10;
  }
  :root[data-theme="dark"] .admin-bar {
    background: #141414;
    border: none;
    border-bottom: none;
  }
  .admin-bar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .admin-bar__close-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
  .admin-bar__close-btn:hover {
    background: var(--surface-raised);
    border-color: var(--gold);
    color: var(--gold);
  }
  .admin-bar__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .admin-bar__title {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .admin-bar__sub {
    font-family: var(--sans);
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(212, 168, 67, 0.15);
    border: 1px solid rgba(212, 168, 67, 0.35);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  /* Admin Tabs Navigation */
  .admin-tabs-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1.15rem;
    background: var(--surface);
    border-bottom: none;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .admin-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  :root[data-theme="dark"] .admin-tabs-nav {
    background: #141414;
    border-bottom: none;
  }
  .admin-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
  }
  .admin-tab-btn:hover {
    color: var(--ink);
    background: rgba(148, 163, 184, 0.12);
  }
  .admin-tab-btn.is-active {
    color: var(--ink);
    background: var(--paper);
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  :root[data-theme="dark"] .admin-tab-btn.is-active {
    background: #1E1E1E;
    border-color: rgba(212, 168, 67, 0.35);
    color: var(--gold);
  }
  .admin-tab-btn__count {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.2);
    color: var(--ink);
  }
  .admin-tab-btn.is-active .admin-tab-btn__count {
    background: var(--gold);
    color: #0A0A0A;
  }

  /* Admin Scroll Content */
  .admin-content-scroll {
    flex: 1 0 auto;
    overflow-y: visible;
    padding: 1.15rem 1.15rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Stat Metric Cards */
  .admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
  @media (max-width: 768px) {
    .admin-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .admin-stat-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  :root[data-theme="dark"] .admin-stat-card {
    background: #1C1C1C;
    border-color: rgba(148, 163, 184, 0.16);
  }
  .admin-stat-card:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
  }
  .admin-stat-card__label {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .admin-stat-card__value {
    font-family: var(--sans);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1.15;
  }
  .admin-stat-card__sub {
    font-family: var(--sans);
    font-size: 0.65rem;
    color: #16a34a;
    font-weight: 600;
  }
  :root[data-theme="dark"] .admin-stat-card__sub {
    color: #4ade80;
  }

  /* Admin Action Toolbar */
  .admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .admin-toolbar__search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 9px;
    padding: 0.45rem 0.75rem;
    flex: 1;
    min-width: 220px;
  }
  :root[data-theme="dark"] .admin-toolbar__search-box {
    background: #141414;
    border-color: rgba(148, 163, 184, 0.2);
  }
  .admin-toolbar__search-box input {
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink);
    outline: none;
    width: 100%;
  }
  .admin-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    white-space: nowrap;
  }
  .admin-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
  }
  .admin-btn--primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #0A0A0A;
    font-weight: 700;
  }
  .admin-btn--primary:hover {
    background: #c59736;
    color: #0A0A0A;
  }
  .admin-btn--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
  }
  .admin-btn--danger:hover {
    background: #ef4444;
    color: #ffffff;
  }

  /* Filter Chips */
  .admin-chip-group {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .admin-chip {
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .admin-chip:hover {
    border-color: var(--gold);
    color: var(--ink);
  }
  .admin-chip.is-active {
    background: var(--surface-raised);
    border-color: var(--gold);
    color: var(--gold);
  }

  /* Admin Cards & Groups */
  .admin-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  }
  :root[data-theme="dark"] .admin-card {
    background: #141414;
    border-color: rgba(148, 163, 184, 0.16);
  }
  .admin-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .admin-card__header {
    border-bottom-color: rgba(148, 163, 184, 0.14);
  }
  .admin-card__title {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Moderation Log Feed */
  .admin-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .admin-log-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: border-color 0.15s ease;
  }
  :root[data-theme="dark"] .admin-log-item {
    background: #0A0A0A;
    border-color: rgba(148, 163, 184, 0.14);
  }
  .admin-log-item:hover {
    border-color: rgba(148, 163, 184, 0.35);
  }
  .admin-log-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .admin-log-icon-badge--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
  }
  .admin-log-icon-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
  }
  .admin-log-icon-badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
  }
  .admin-log-icon-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
  }
  .admin-log-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .admin-log-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .admin-log-item__action {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
  }
  .admin-log-item__time {
    font-family: var(--sans);
    font-size: 0.68rem;
    color: var(--muted);
  }
  .admin-log-item__excerpt {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.45;
    background: rgba(148, 163, 184, 0.08);
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    border-left: 2px solid var(--rule);
  }
  .admin-log-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
  .admin-log-item__actor {
    font-family: var(--sans);
    font-size: 0.68rem;
    color: var(--gold);
    font-weight: 600;
  }

  /* User Subscription Row */
  .admin-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .admin-user-row {
    background: #0A0A0A;
    border-color: rgba(148, 163, 184, 0.14);
  }
  .admin-user-row:hover {
    border-color: var(--gold);
  }
  .admin-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
  }
  .admin-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-decorative), var(--gold));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .admin-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .admin-user-name {
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-user-email {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-user-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .admin-user-tier-select {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }

  /* Security Clearance Restricted Screen */
  .admin-guard-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 480px;
    margin: 2rem auto;
    background: var(--surface);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  :root[data-theme="dark"] .admin-guard-wrap {
    background: #141414;
    border-color: rgba(239, 68, 68, 0.25);
  }
  .admin-guard-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }
  .admin-guard-title {
    font-family: var(--sans);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
  }
  .admin-guard-desc {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 1.25rem;
  }
  .admin-guard-target-email {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 1.25rem;
  }

  /* =========================================================================
     Markets Intelligence Dashboard (Deep Advantage × Yahoo Finance)
     ========================================================================= */
  :root {
    --market-up: #10B981;
    --market-down: #F43F5E;
    --market-neutral: var(--gold);
    --market-up-glow: rgba(16, 185, 129, 0.12);
    --market-down-glow: rgba(244, 63, 94, 0.12);
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
  }

  .markets-header-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    min-height: 50px;
    border: none !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08) !important;
    box-shadow: none !important;
    background: rgba(248, 250, 252, 0.94) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    transition: background 0.2s ease, -webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease;
  }

  :root[data-theme="dark"] .markets-header-bar {
    border-bottom: 1px solid rgba(248, 250, 252, 0.08) !important;
    background: rgba(10, 10, 10, 0.92) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
  }

  .markets-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.2rem 0.6rem;
    height: 32px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
    width: fit-content;
    flex-shrink: 0;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .markets-status-badge {
    background: transparent;
    border: none;
  }
  .markets-status-badge:hover {
    opacity: 0.75;
  }
  .markets-status-badge:active {
    transform: scale(0.96);
  }

  .markets-live-dot {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.7);
    animation: livePulse 2.2s ease-in-out infinite;
  }

  .markets-status-text {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
  }
  :root[data-theme="dark"] .markets-status-text {
    color: #F8FAFC;
  }

  .markets-status-refresh-icon {
    color: var(--muted);
    opacity: 0.7;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform-origin: center center;
  }

  .markets-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 1;
  }

  .markets-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    padding: 0;
  }
  .markets-icon-btn:hover {
    background: var(--paper-raised);
    border-color: var(--gold);
  }
  .markets-icon-btn:active {
    transform: scale(0.94);
  }

  .markets-alerts-btn-wrap {
    position: relative;
    display: inline-flex;
  }

  .markets-alerts-active-dot {
    display: none !important;
  }

  .markets-alerts-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.25);
  }

  .markets-alerts-badge--off {
    background: rgba(10, 10, 10,  0.06);
    color: var(--muted);
    border-color: var(--rule);
  }

  :root[data-theme="dark"] .markets-alerts-badge--off {
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .markets-fx-rate-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.42rem;
    border-radius: 9999px;
    background: transparent !important;
    color: var(--muted);
    border: 1px solid var(--rule);
    line-height: 1.2;
  }
  :root[data-theme="dark"] .markets-fx-rate-pill {
    background: transparent !important;
    color: var(--muted);
    border-color: rgba(255, 255, 255, 0.16);
  }

  /* --- Executive Watchlist Alerts Modal Styling --- */
  .markets-alerts-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 0.95rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--rule);
  }
  .markets-alerts-modal-title {
    font-family: var(--sans);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .markets-alerts-modal-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
  }
  .markets-alerts-modal-badge {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
  }
  .markets-alerts-modal-badge.is-active {
    color: #10B981;
    font-weight: 600;
  }
  .markets-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .markets-alerts-push-notice {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.28);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .markets-alerts-push-icon {
    color: var(--gold);
    margin-top: 1px;
    flex-shrink: 0;
  }

  .markets-alerts-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
  }
  .markets-alerts-section-label {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.5rem;
  }
  .markets-alerts-section-header .markets-alerts-section-label {
    margin-bottom: 0;
  }
  .markets-alerts-hint {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
  }

  /* Unified Card */
  .markets-alerts-card {
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 0.2rem 1rem;
    box-shadow: 0 2px 10px rgba(10, 10, 10,  0.03);
  }
  .markets-alerts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 0;
  }
  .markets-alerts-row-info {
    min-width: 0;
    flex: 1;
  }
  .markets-alerts-row-title {
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }
  .markets-alerts-row-desc {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.18rem;
    line-height: 1.35;
  }
  .markets-alerts-card-divider {
    height: 1px;
    background: var(--rule);
    opacity: 0.8;
  }

  .markets-alerts-sensitivity-wrap {
    padding: 0.85rem 0 0.95rem;
    border-top: 1px solid var(--rule);
  }
  .markets-alerts-sensitivity-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.55rem;
  }

  /* Segmented Slider Control */
  .markets-segmented-control {
    display: flex;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 3px;
    gap: 3px;
  }
  .markets-segmented-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.25rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-segmented-btn .markets-sub-tag {
    font-size: 0.62rem;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 1px;
  }
  .markets-segmented-btn.active {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.12);
  }
  :root[data-theme="light"] .markets-segmented-btn.active {
    background: var(--navy);
    color: #FFFFFF;
  }
  :root[data-theme="dark"] .markets-segmented-btn.active {
    background: var(--gold);
    color: #0A0A0A;
  }

  /* Guarded Chips Grid */
  .markets-guarded-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .markets-guarded-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.72rem;
    border-radius: 9999px;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
  }
  .markets-guarded-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(10, 10, 10,  0.05);
  }
  .markets-guarded-chip__ticker {
    letter-spacing: 0.02em;
  }
  .markets-guarded-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(10, 10, 10,  0.08);
    border: none;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .markets-guarded-chip__remove {
    background: rgba(255, 255, 255, 0.15);
  }
  .markets-guarded-chip:hover .markets-guarded-chip__remove {
    background: rgba(244, 63, 94, 0.15);
    color: #F43F5E;
  }

  /* Modern Switch Toggle */
  .executive-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .executive-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .executive-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(10, 10, 10,  0.12);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
  }
  :root[data-theme="dark"] .executive-toggle-slider {
    background-color: rgba(255, 255, 255, 0.15);
  }
  .executive-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  :root[data-theme="dark"] .executive-toggle-slider:before {
    background-color: #F8FAFC;
  }
  .executive-toggle-switch input:checked + .executive-toggle-slider {
    background-color: var(--gold);
  }
  .executive-toggle-switch input:checked + .executive-toggle-slider:before {
    transform: translateX(20px);
    background-color: #ffffff;
  }

  /* Discreet Test Delivery Footer */
  .markets-alerts-footer-test {
    margin-top: 1.4rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .markets-alerts-test-label {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
  }
  .markets-alerts-test-actions {
    display: flex;
    gap: 0.45rem;
  }
  .markets-alerts-test-btn {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 0.28rem 0.65rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .markets-alerts-test-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .markets-alerts-test-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* FX & Purchasing Power Switch (Liquid Elevated Pill Design) */
  .markets-fx-segment-bar {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 14px;
    padding: 0.22rem 0.28rem;
    gap: 0.35rem;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  :root[data-theme="dark"] .markets-fx-segment-bar {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(248, 250, 252, 0.08);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .markets-fx-segment-bar::-webkit-scrollbar {
    display: none;
  }
  .markets-fx-tab {
    flex: 0 0 auto;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.44rem 0.65rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    outline: none;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  .markets-fx-tab__flag-img {
    display: none;
    width: 16px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .markets-fx-tab__flag-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .markets-fx-tab__flag-emoji {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .markets-fx-tab__flag-emoji { display: none; }
    .markets-fx-tab__flag-img { display: inline-flex; align-items: center; justify-content: center; }
  }
  .markets-fx-tab__code {
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .markets-fx-tab:hover {
    color: var(--ink);
    background: rgba(10, 10, 10, 0.035);
  }
  :root[data-theme="dark"] .markets-fx-tab:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
  }
  .markets-fx-tab:active {
    transform: scale(0.98);
  }
  .markets-fx-tab.active {
    background: #FFFFFF;
    color: #0A0A0A;
    font-weight: 700;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08), 0 1px 2px rgba(10, 10, 10, 0.04);
  }
  :root[data-theme="dark"] .markets-fx-tab.active {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F8FAFC;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  .markets-price-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: 0.12rem;
    letter-spacing: 0.01em;
  }

  /* Executive Overview Utility Bar: Search Bar + Watchlist Alerts */
  .markets-overview-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.60rem;
    margin-bottom: 1.15rem;
    width: 100%;
  }
  .markets-search-container {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .markets-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 16px;
    padding: 0 0.85rem;
    height: 44px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  :root[data-theme="dark"] .markets-search-input-wrap {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .markets-search-input-wrap:focus-within {
    border-color: #D4A843;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.18);
  }
  .markets-search-input-wrap svg {
    color: var(--muted);
    flex-shrink: 0;
  }
  .markets-search-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.55rem 0.6rem;
    font-family: var(--sans);
    font-size: 0.86rem;
    color: var(--ink);
    outline: none;
    min-width: 0;
  }
  .markets-search-input-wrap input::placeholder {
    color: var(--muted);
    opacity: 0.7;
  }
  #markets-search-clear {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .markets-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(10, 10, 10, 0.14), 0 2px 8px rgba(10, 10, 10, 0.05);
    max-height: 280px;
    overflow-y: auto;
  }
  :root[data-theme="dark"] .markets-search-results {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  }
  .markets-alerts-btn-overview {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.03);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="dark"] .markets-alerts-btn-overview {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .markets-alerts-btn-overview:hover {
    border-color: #D4A843;
    color: #D4A843;
    transform: translateY(-1px);
  }
  .markets-alerts-btn-overview:active {
    transform: scale(0.95);
  }
  .markets-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .markets-search-item:last-child {
    border-bottom: none;
  }
  .markets-search-item:hover {
    background: rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .markets-search-item:hover {
    background: rgba(248, 250, 252, 0.05);
  }

  /* Global Benchmarks — Sleek Executive Bento Grid & 5-Section Filter Strip */
  .markets-macro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }
  .markets-benchmarks-tabs-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
  }
  .markets-benchmarks-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.15rem 0.1rem;
  }
  .markets-benchmarks-tabs::-webkit-scrollbar {
    display: none;
  }
  .markets-benchmarks-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.85rem;
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .markets-benchmarks-tab {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .markets-benchmarks-tab:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: var(--surface-2);
    }
    :root[data-theme="dark"] .markets-benchmarks-tab:hover {
      color: var(--text);
      border-color: var(--border-strong);
      background: var(--surface-2);
    }
  }
  .markets-benchmarks-tab:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-benchmarks-tab:active {
    transform: scale(0.97);
  }
  .markets-benchmarks-tab.active,
  :root[data-theme="dark"] .markets-benchmarks-tab.active {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    border-color: var(--border-strong);
    box-shadow: none;
  }
  .markets-macro-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.28rem 0.68rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .markets-macro-toggle-btn {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .markets-macro-toggle-btn:hover {
    color: var(--ink);
    border-color: var(--gold);
  }
  .markets-macro-toggle-btn svg {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-macro-toggle-btn.is-expanded svg {
    transform: rotate(180deg);
  }

  .markets-macro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  @media (max-width: 560px) {
    .markets-macro-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
  }

  .markets-macro-card {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 20px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.42rem;
    cursor: pointer;
    min-width: 140px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  :root[data-theme="dark"] .markets-macro-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 16px 36px -16px rgba(0, 0, 0, 0.65);
  }
  .markets-macro-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 168, 67, 0.60);
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.07);
  }
  :root[data-theme="dark"] .markets-macro-card:hover {
    border-color: rgba(212, 168, 67, 0.50);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.14), 0 20px 40px -16px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 168, 67, 0.08);
  }
  .markets-macro-card:active {
    transform: scale(0.985);
  }

  .markets-macro-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .markets-macro-name {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-macro-change {
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .markets-macro-price {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-macro-chart {
    width: 100%;
    height: 30px;
    margin-top: 0.2rem;
  }
  .markets-macro-chart svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Filter Tabs */
  .markets-pills-scroll-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 0.85rem;
  }
  .markets-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(10, 10, 10,  0.045);
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 999px;
    padding: 0.22rem 2.25rem 0.22rem 0.24rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10,  0.03);
  }
  :root[data-theme="dark"] .markets-filter-tabs {
    background: rgba(6, 10, 18, 0.55);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .markets-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .markets-pills-next-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: -6px 0 10px var(--paper-raised), 0 2px 6px rgba(10, 10, 10,  0.12);
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  :root[data-theme="dark"] .markets-pills-next-btn {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--gold);
    box-shadow: -8px 0 12px var(--navy-raised), 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .markets-pills-next-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .markets-pills-next-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.88);
  }
  .markets-pills-next-btn--news {
    right: 2px;
    top: calc(50% - 2px);
    box-shadow: -8px 0 12px var(--paper), 0 2px 6px rgba(10, 10, 10,  0.12);
  }
  :root[data-theme="dark"] .markets-pills-next-btn--news {
    box-shadow: -8px 0 12px #0A0A0A, 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .markets-pills-prev-btn {
    left: 4px;
    right: auto;
    box-shadow: 6px 0 10px var(--paper-raised), 0 2px 6px rgba(10, 10, 10,  0.12);
  }
  :root[data-theme="dark"] .markets-pills-prev-btn {
    box-shadow: 8px 0 12px var(--navy-raised), 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .markets-pills-prev-btn--news {
    left: 4px;
    right: auto;
    top: 50%;
    box-shadow: 6px 0 10px var(--paper-raised), 0 2px 6px rgba(10, 10, 10,  0.12);
  }
  :root[data-theme="dark"] .markets-pills-prev-btn--news {
    box-shadow: 8px 0 12px var(--navy-raised), 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .markets-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.35rem 0.78rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
  }
  .markets-filter-tab:hover {
    color: var(--ink);
    background: rgba(10, 10, 10,  0.035);
  }
  :root[data-theme="dark"] .markets-filter-tab:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
  }
  .markets-filter-tab.active,
  :root[data-theme="light"] .markets-filter-tab.active {
    background: #FFFFFF;
    color: #0A0A0A;
    font-weight: 700;
    border-color: rgba(10, 10, 10,  0.09);
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .markets-filter-tab.active {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F8FAFC;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.32);
  }
  .markets-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.12rem 0.36rem;
    border-radius: 999px;
    background: rgba(10, 10, 10,  0.07);
    color: var(--muted);
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .markets-tab-count {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(248, 250, 252, 0.7);
  }
  .markets-filter-tab.active .markets-tab-count,
  :root[data-theme="light"] .markets-filter-tab.active .markets-tab-count,
  .markets-news-filter-btn.active .markets-tab-count,
  :root[data-theme="light"] .markets-news-filter-btn.active .markets-tab-count {
    background: rgba(10, 10, 10,  0.09);
    color: #0A0A0A;
  }
  :root[data-theme="dark"] .markets-filter-tab.active .markets-tab-count,
  :root[data-theme="dark"] .markets-news-filter-btn.active .markets-tab-count {
    background: rgba(255, 255, 255, 0.16);
    color: #F8FAFC;
  }

  /* Watchlist Section Header & Modern Region Dropdown */
  .markets-watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.65rem;
  }
  .markets-watchlist-title,
  .markets-news-title {
    font-family: var(--sans);
    font-size: clamp(0.94rem, 3.7vw, 1.02rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 480px) {
    .markets-watchlist-title,
    .markets-news-title {
      font-size: 0.94rem;
    }
  }
  .markets-region-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .markets-region-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
  }
  .markets-region-trigger:hover {
    border-color: var(--gold);
    background: var(--surface-raised);
  }
  .markets-region-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .markets-news-view-toggle-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
  }
  .markets-news-view-toggle-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--surface-raised);
  }
  .markets-news-view-toggle-btn:active {
    transform: scale(0.93);
  }
  .markets-news-view-toggle-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .markets-region-trigger-icon,
  .markets-region-item-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(10, 10, 10,  0.14);
  }
  :root[data-theme="dark"] .markets-region-trigger-icon,
  :root[data-theme="dark"] .markets-region-item-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
  .markets-region-trigger-icon svg,
  .markets-region-item-flag svg,
  .markets-region-trigger-icon img,
  .markets-region-item-flag img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
  }
  .markets-region-chevron {
    color: var(--muted);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-region-dropdown.is-open .markets-region-chevron {
    transform: rotate(180deg);
  }
  .markets-region-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: max-content;
    width: auto;
    max-width: calc(100vw - 2rem);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 0.35rem;
    box-shadow: 0 14px 32px rgba(10, 10, 10,  0.15), 0 2px 6px rgba(10, 10, 10,  0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 55;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    animation: overviewMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* When the dropdown container is anchored on the left (e.g. in Market News), align menu to left edge */
  #markets-news-region-dropdown .markets-region-menu {
    right: auto;
    left: 0;
  }
  .markets-region-menu[hidden] {
    display: none !important;
  }
  :root[data-theme="dark"] .markets-region-menu {
    background: #0D1117;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .markets-region-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    user-select: none;
    outline: none;
  }
  .markets-region-menu-item span {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .markets-region-menu-item:hover {
    background: rgba(10, 10, 10,  0.05);
    color: var(--ink);
  }
  :root[data-theme="dark"] .markets-region-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
  }
  .markets-region-menu-item.active {
    background: rgba(10, 10, 10, 0.06);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(10, 10, 10, 0.04);
  }
  :root[data-theme="dark"] .markets-region-menu-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .markets-region-check {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    color: rgba(10, 10, 10, 0.75);
    transition: opacity 0.15s ease;
  }
  :root[data-theme="dark"] .markets-region-check {
    color: rgba(248, 250, 252, 0.85);
  }
  .markets-region-menu-item.active .markets-region-check {
    opacity: 1;
  }
  .markets-region-badge-pill {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
  }

  /* Watchlist List */
  .markets-watchlist-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
  }
  .markets-row-card {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 20px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 260px;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease;
  }
  :root[data-theme="dark"] .markets-row-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 16px 36px -16px rgba(0, 0, 0, 0.65);
  }
  .markets-row-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 168, 67, 0.60);
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.07);
  }
  :root[data-theme="dark"] .markets-row-card:hover {
    border-color: rgba(212, 168, 67, 0.50);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.14), 0 20px 40px -16px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 168, 67, 0.08);
  }
  .markets-row-card:active {
    transform: scale(0.985);
  }

  .markets-row-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1.2;
  }
  .markets-row-logo-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  .markets-row-logo-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
  }
  :root[data-theme="dark"] .markets-row-logo-wrap {
    background: #181818;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  .markets-row-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  .markets-row-logo-fallback-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .markets-row-logo-fallback-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
  }
  .markets-row-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 0.76rem;
    color: var(--ink);
    letter-spacing: -0.01em;
    background: rgba(10, 10, 10, 0.04);
  }
  :root[data-theme="dark"] .markets-row-logo-fallback {
    background: rgba(248, 250, 252, 0.06);
    color: #F8FAFC;
  }
  .markets-row-info {
    min-width: 0;
  }
  .markets-row-ticker {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .markets-row-name {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .markets-row-sparkline {
    width: 72px;
    height: 28px;
    flex-shrink: 0;
  }
  @media (max-width: 380px) {
    .markets-row-sparkline {
      display: none;
    }
  }

  .markets-row-right {
    text-align: right;
    flex-shrink: 0;
  }
  .markets-row-price {
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-row-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    margin-top: 0.15rem;
  }
  .markets-row-pill.pill-up {
    color: var(--market-up);
    background: var(--market-up-glow);
  }
  .markets-row-pill.pill-down {
    color: var(--market-down);
    background: var(--market-down-glow);
  }
  .markets-row-pill.pill-neutral {
    color: var(--muted);
    background: var(--paper-raised);
  }

  /* Colors */
  .text-up { color: var(--market-up); }
  .text-down { color: var(--market-down); }
  .text-neutral { color: var(--muted); }

  /* Skeletons */
  .markets-skeleton-card {
    height: 110px;
    border-radius: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    opacity: 0.6;
    animation: pulse 1.5s infinite;
  }
  .markets-skeleton-row {
    height: 60px;
    border-radius: 18px;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    opacity: 0.6;
    animation: pulse 1.5s infinite;
  }

  /* Detail Sheet Modal */
  .markets-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .markets-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10,  0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: daBackdropFadeIn 0.26s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .markets-detail-modal.is-closing .markets-detail-backdrop {
    animation: daBackdropFadeOut 0.21s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .markets-detail-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 96vh;
    height: calc(100dvh - env(safe-area-inset-top) - 0.5rem);
    max-height: calc(100dvh - env(safe-area-inset-top) - 0.5rem);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background: #121212;
    border: 1px solid rgba(248, 250, 252, 0.10);
    border-bottom: none;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto;
    padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  :root[data-theme="light"] .markets-detail-panel {
    background: #FFFFFF;
    border-color: rgba(10, 10, 10, 0.10);
    box-shadow: 0 -8px 30px rgba(10, 10, 10, 0.12);
  }
  @media (min-width: 641px) {
    .markets-detail-panel {
      height: auto;
      max-height: calc(100dvh - 2rem);
    }
  }
  .markets-detail-modal.is-closing .markets-detail-panel {
    animation: slideDownSheet 0.21s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  @keyframes slideUp {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: translate3d(0, 0, 0); }
  }
  @keyframes slideDownSheet {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(0, 100%, 0); opacity: 0; }
  }
  @keyframes daBackdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes daBackdropFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .markets-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .markets-detail-header > div:first-child {
    flex: 1;
    min-width: 0;
  }
  #markets-detail-close.markets-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    margin-left: 0.4rem;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
  }
  #markets-detail-close svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    display: block;
    aspect-ratio: 1 / 1;
  }
  .markets-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .markets-detail-symbol {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: var(--surface-raised);
    border: 0.5px solid var(--border);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .markets-detail-exchange-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.10rem 0.38rem;
    border-radius: 6px;
    background: var(--surface-raised);
    border: 0.5px solid var(--border);
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
  }
  .markets-detail-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .markets-detail-flag svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .markets-detail-exchange,
  #detail-asset-exchange {
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--ink);
    max-width: 140px;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
  }
  @media (max-width: 480px) {
    .markets-detail-exchange-chip {
      padding: 0.08rem 0.32rem;
    }
    .markets-detail-exchange,
    #detail-asset-exchange {
      font-size: 0.52rem;
      max-width: 110px;
      min-width: 0;
    }
  }
  .markets-detail-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    transition: opacity 0.2s ease;
    flex-shrink: 0;
  }
  .markets-detail-session-pill.is-open {
    color: var(--muted);
  }
  .markets-detail-session-pill.is-open .markets-detail-session-status {
    color: #10B981;
    font-weight: 600;
  }
  .markets-detail-session-pill.is-extended {
    color: var(--muted);
  }
  .markets-detail-session-pill.is-extended .markets-detail-session-status {
    color: #F59E0B;
    font-weight: 600;
  }
  .markets-detail-session-pill.is-closed {
    opacity: 0.85;
    color: var(--muted);
  }
  .markets-detail-session-pill.is-closed .markets-detail-session-status {
    color: var(--muted);
    font-weight: 500;
  }
  .markets-detail-session-time {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--muted);
  }
  .markets-detail-session-status {
    font-family: var(--sans);
    font-weight: 600;
  }
  .markets-detail-name {
    font-family: var(--sans);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0.80rem 0 0;
    line-height: 1.2;
  }

  .markets-detail-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .markets-detail-price {
    font-family: var(--sans);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .markets-detail-change {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0.35rem;
  }

  /* Executive Segmented Navigation Tabs (Overview / Financials / News) */
  .markets-detail-nav-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    background: #141518;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    margin: 0 auto 1.25rem auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .markets-detail-nav-tabs::-webkit-scrollbar {
    display: none;
  }
  :root[data-theme="light"] .markets-detail-nav-tabs {
    background: rgba(10, 10, 10, 0.05);
    border: 1px solid rgba(10, 10, 10, 0.08);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04);
  }
  .markets-detail-nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100%;
    padding: 0.5rem 0.6rem;
    min-height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(248, 250, 252, 0.55);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
  }
  :root[data-theme="light"] .markets-detail-nav-tab {
    color: rgba(10, 10, 10, 0.55);
  }
  .markets-detail-nav-tab:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
  }
  :root[data-theme="light"] .markets-detail-nav-tab:hover {
    color: #0A0A0A;
    background: rgba(10, 10, 10, 0.04);
  }
  .markets-detail-nav-tab.active,
  .markets-detail-nav-tab[aria-selected="true"] {
    background: #2C2D30;
    color: #FFFFFF;
    font-weight: 600;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root[data-theme="light"] .markets-detail-nav-tab.active,
  :root[data-theme="light"] .markets-detail-nav-tab[aria-selected="true"] {
    background: #FFFFFF;
    color: #0A0A0A;
    font-weight: 600;
    border: none;
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.08);
  }
  .markets-detail-nav-tab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
  }
  :root[data-theme="light"] .markets-detail-nav-tab:focus-visible {
    outline-color: rgba(10, 10, 10, 0.3);
  }
  @media (min-width: 641px) {
    .markets-detail-nav-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 100%;
      margin: 0 auto 1.25rem auto;
      gap: 6px;
      padding: 5px;
    }
    .markets-detail-nav-tab {
      flex: 1 1 0;
      padding: 0.52rem 0.75rem;
      min-height: 38px;
      font-size: 0.88rem;
      border-radius: 9px;
    }
  }

  .markets-detail-tab-panel {
    display: block;
    animation: marketsTabFadeIn 0.18s ease-out;
  }
  .markets-detail-tab-panel[hidden] {
    display: none !important;
  }
  @keyframes marketsTabFadeIn {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Asset News Panel in Detail Sheet */
  .markets-asset-news-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .markets-asset-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
  }
  .markets-asset-news-title {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .markets-asset-news-status {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
  }
  .markets-asset-news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .markets-detail-news-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: inherit;
    outline: none;
  }
  .markets-detail-news-card:hover,
  .markets-detail-news-card:focus-visible {
    border-color: rgba(212, 168, 67, 0.4);
    transform: translateY(-1px);
  }
  .markets-detail-news-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .markets-detail-news-card__title {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
    flex: 1;
    min-width: 0;
  }
  .markets-detail-news-card__snippet {
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .markets-detail-news-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
    flex-wrap: wrap;
  }
  .markets-detail-news-card__source {
    font-weight: 600;
    color: var(--ink);
  }
  .markets-detail-news-card__bullet {
    opacity: 0.5;
  }
  .markets-detail-news-card__thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-raised);
    border: 1px solid var(--border);
  }
  .markets-detail-news-card__fallback {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
  }
  .markets-detail-news-card__link-icon {
    margin-left: auto;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
  }

  .markets-pin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9999px;
    padding: 0.22rem 0.65rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
  }
  :root[data-theme="light"] .markets-pin-btn {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.10);
  }
  .markets-pin-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .markets-pin-btn:hover {
    border-color: #D4A843;
    color: var(--ink);
  }
  .markets-pin-btn.is-pinned {
    background: #D4A843 !important;
    color: #0A0A0A !important;
    border-color: #D4A843 !important;
  }
  .markets-pin-btn.is-pinned svg {
    stroke: #0A0A0A !important;
    fill: #0A0A0A !important;
  }
  .markets-perf-header .markets-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .markets-perf-header .markets-pin-btn {
    margin-left: 0;
  }
  .markets-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
  }
  :root[data-theme="light"] .markets-expand-btn {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.10);
  }
  .markets-expand-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .markets-expand-btn:hover {
    border-color: #D4A843;
    color: #D4A843;
  }
  /* Edge-to-Edge Fullscreen Chart Overlay (TradingView Terminal Mode) */
  .markets-chart-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #0A0A0A;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    animation: daFsChartFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes daFsChartFadeIn {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
  }
  .markets-chart-fs-overlay.is-closing {
    animation: daFsChartFadeOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes daFsChartFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.985); }
  }
  .markets-chart-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.65rem + env(safe-area-inset-top)) 1rem 0.65rem;
    border-bottom: 1px solid rgba(248, 250, 252, 0.08);
    background: #121212;
    flex-shrink: 0;
    gap: 0.75rem;
  }
  :root[data-theme="light"] .markets-chart-fs-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  }
  .markets-chart-fs-title-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
  }
  .markets-chart-fs-symbol {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-chart-fs-name {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-chart-fs-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
  }
  .markets-chart-fs-price {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .markets-chart-fs-change {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .markets-chart-fs-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
  }
  :root[data-theme="light"] .markets-chart-fs-close-btn {
    background: rgba(10, 10, 10, 0.05);
    border-color: rgba(10, 10, 10, 0.10);
  }
  .markets-chart-fs-close-btn:hover {
    border-color: #D4A843;
    color: #D4A843;
  }
  /* TradingView Persistent OHLC & Indicator HUD Strip */
  .markets-chart-fs-hud {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  :root[data-theme="light"] .markets-chart-fs-hud {
    background: rgba(10, 10, 10, 0.02);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
  }
  .markets-chart-fs-hud::-webkit-scrollbar {
    display: none;
  }
  .markets-chart-fs-hud-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .markets-chart-fs-hud-item strong {
    color: var(--ink);
    font-weight: 600;
  }
  /* Full-Bleed Chart Body */
  .markets-chart-fs-body {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .markets-chart-fs-body .markets-chart-viewport {
    width: 100%;
    height: 100%;
    position: relative;
    flex: 1;
  }
  /* Docked Bottom Timeframe Bar */
  .markets-chart-fs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(248, 250, 252, 0.08);
    background: #121212;
    flex-shrink: 0;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :root[data-theme="light"] .markets-chart-fs-footer {
    background: #FFFFFF;
    border-top: 1px solid rgba(10, 10, 10, 0.08);
  }
  .markets-chart-fs-footer::-webkit-scrollbar {
    display: none;
  }

  /* ==========================================================================
     EXECUTIVE PERFORMANCE DASHBOARD (Matching User Reference Design)
     ========================================================================== */
  .markets-perf-card {
    background: #181818;
    border: 1px solid rgba(248, 250, 252, 0.08);
    border-radius: 20px;
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: 1.35rem;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  :root[data-theme="light"] .markets-perf-card {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 10px 30px rgba(10, 10, 10,  0.06), 0 1px 3px rgba(10, 10, 10,  0.04);
  }

  .markets-perf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }

  .markets-perf-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .markets-perf-title {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :root[data-theme="light"] .markets-perf-title {
    color: #0A0A0A;
  }

  .markets-perf-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .markets-style-toggle-group {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 0.14rem;
    gap: 0.15rem;
    flex-shrink: 0;
  }
  :root[data-theme="light"] .markets-style-toggle-group {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
  }
  .markets-style-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
  }
  .markets-style-btn svg {
    flex-shrink: 0;
  }
  .markets-style-btn:hover {
    color: var(--ink);
  }
  .markets-style-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  :root[data-theme="light"] .markets-style-btn.active {
    background: #0A0A0A;
    color: #FFFFFF;
  }

  .markets-perf-timeframe-bar {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.75rem;
  }
  .markets-perf-timeframe-bar::-webkit-scrollbar {
    display: none;
  }
  .markets-perf-pills {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  :root[data-theme="light"] .markets-perf-pills {
    background: rgba(10, 10, 10,  0.04);
    border-color: rgba(10, 10, 10,  0.06);
  }

  .markets-range-btn {
    flex: 1;
    text-align: center;
    background: transparent;
    border: none;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: #8B949E;
    padding: 0.32rem 0.4rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    line-height: 1;
    white-space: nowrap;
  }

  :root[data-theme="light"] .markets-range-btn {
    color: #5E697E;
  }

  .markets-range-btn:hover {
    color: #FFFFFF;
  }

  :root[data-theme="light"] .markets-range-btn:hover {
    color: #0A0A0A;
  }

  /* Active timeframe pill - matches area/candlestick toggle segmented active state */
  .markets-range-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  :root[data-theme="light"] .markets-range-btn.active {
    background: #0A0A0A;
    color: #FFFFFF;
  }

  /* Dedicated Technical Overlays Toolbar */
  .markets-perf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
  }
  .markets-indicator-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    flex-wrap: wrap;
  }
  .markets-ind-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9999px;
    padding: 0.22rem 0.52rem;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--sans);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.16s ease;
    line-height: 1;
  }
  :root[data-theme="light"] .markets-ind-btn {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.07);
  }
  .markets-ind-btn:hover {
    color: var(--ink);
  }
  .markets-ind-btn.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: currentColor;
    color: #FFFFFF;
    font-weight: 700;
  }
  :root[data-theme="light"] .markets-ind-btn.active {
    background: rgba(10, 10, 10, 0.08);
    color: #0A0A0A;
  }
  .markets-ind-dot {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    display: inline-block;
  }
  .markets-ind-readout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
  }

  .markets-chart-viewport {
    position: relative;
    width: 100%;
    height: 220px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .markets-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Floating Obsidian Tooltip Badge */
  .markets-perf-tooltip {
    position: absolute;
    pointer-events: none;
    background: #000000;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-family: var(--sans);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -100%);
    margin-top: -12px;
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.15s ease, transform 0.08s ease-out;
  }

  :root[data-theme="light"] .markets-perf-tooltip {
    background: #0A0A0A;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(10, 10, 10,  0.25);
  }

  .markets-perf-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
  }

  :root[data-theme="light"] .markets-perf-tooltip::after {
    border-color: #0A0A0A transparent transparent transparent;
  }

  .markets-perf-tooltip__val {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .markets-perf-tooltip__sub {
    font-size: 0.68rem;
    color: #94A3B8;
    margin-top: 2px;
    line-height: 1;
  }

  /* Chart Loading Spinner */
  .markets-chart-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(11, 14, 20, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    border-radius: 12px;
    color: #8B949E;
    font-family: var(--sans);
    font-size: 0.8rem;
  }

  :root[data-theme="light"] .markets-chart-loader {
    background: rgba(255, 255, 255, 0.8);
    color: #5E697E;
  }

  .markets-chart-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10B981;
    border-radius: 50%;
    animation: chartSpin 0.75s linear infinite;
  }

  @keyframes chartSpin {
    to { transform: rotate(360deg); }
  }

  /* Live Chart Error State (Strict Real-Time, No Simulation) */
  .markets-chart-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 6;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    color: #94A3B8;
    font-family: var(--sans);
    font-size: 0.8rem;
  }

  :root[data-theme="light"] .markets-chart-error {
    background: rgba(255, 255, 255, 0.9);
    color: #5E697E;
  }

  .markets-chart-retry-btn {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .markets-chart-retry-btn:hover {
    background: #10B981;
    color: #FFFFFF;
  }

  /* Mobile Viewport Optimization */
  @media (max-width: 480px) {
    .markets-perf-card {
      padding: 0.9rem 0.75rem 0.75rem;
      border-radius: 16px;
    }
    .markets-perf-header {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0.45rem;
      margin-bottom: 0.65rem;
    }
    .markets-perf-title {
      font-size: 0.96rem;
    }
    .markets-perf-title-wrap {
      gap: 0.35rem;
    }
    .markets-perf-pills {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0.15rem;
    }
    .markets-range-btn {
      flex: 1;
      text-align: center;
      padding: 0.28rem 0.15rem;
      font-size: 0.7rem;
    }
    .markets-perf-toolbar {
      gap: 0.35rem;
      margin-bottom: 0.45rem;
    }
    .markets-ind-btn {
      padding: 0.18rem 0.42rem;
      font-size: 0.64rem;
    }
    .markets-chart-viewport {
      height: 205px;
    }
  }

  .markets-fundamentals-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .markets-fundamentals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
  }
  .markets-fundamentals-title {
    font-family: var(--sans);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .markets-stats-list {
    display: flex;
    flex-direction: column;
    border-top: none;
  }
  .markets-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.68rem 0;
    border-bottom: none;
    gap: 1rem;
    position: relative;
  }
  .markets-stat-lbl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .markets-stat-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 5px;
    margin: -5px -2px;
    color: var(--muted);
    opacity: 0.65;
    cursor: pointer;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  }
  .markets-stat-info-btn:hover,
  .markets-stat-info-btn:focus-visible,
  .markets-stat-info-btn.is-active {
    opacity: 1;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
  }
  :root[data-theme="light"] .markets-stat-info-btn:hover,
  :root[data-theme="light"] .markets-stat-info-btn:focus-visible,
  :root[data-theme="light"] .markets-stat-info-btn.is-active {
    background: rgba(10, 10, 10, 0.06);
  }
  .markets-stat-info-btn svg {
    width: 12px;
    height: 12px;
    display: block;
    pointer-events: none;
  }
  .markets-stat-val {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-align: right;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-stat-popover {
    position: absolute;
    z-index: 60;
    max-width: 260px;
    min-width: 170px;
    padding: 0.55rem 0.75rem;
    background: #141518;
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-family: var(--sans);
    font-size: 0.74rem;
    line-height: 1.35;
    pointer-events: auto;
    transition: opacity 0.15s ease, transform 0.12s ease;
  }
  :root[data-theme="light"] .markets-stat-popover {
    background: #FFFFFF;
    color: #0A0A0A;
    border: 1px solid rgba(10, 10, 10, 0.14);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.15);
  }
  .markets-stat-popover[hidden] {
    display: none !important;
  }
  .markets-about-section {
    margin-top: 1.45rem;
    padding-top: 0;
  }
  .markets-about-title {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.55rem 0;
    letter-spacing: -0.01em;
  }
  .markets-about-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .markets-about-text {
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    word-break: break-word;
  }
  .markets-about-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .markets-about-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.45rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.3;
    transition: opacity 0.15s ease;
  }
  .markets-about-toggle-btn:hover {
    opacity: 0.85;
    text-decoration: underline;
  }
  .markets-about-toggle-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Related Assets Horizontal Swipe Rail */
  .markets-related-section {
    margin-top: 1.45rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  :root[data-theme="light"] .markets-related-section {
    border-top-color: rgba(10, 10, 10, 0.10);
  }
  .markets-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .markets-related-title {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .markets-related-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0.2rem 0.55rem 0.2rem;
    margin: 0 -0.2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .markets-related-rail::-webkit-scrollbar {
    display: none;
  }
  .markets-related-card {
    flex: 0 0 148px;
    width: 148px;
    min-width: 148px;
    max-width: 148px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    user-select: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="light"] .markets-related-card {
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(10, 10, 10, 0.04);
  }
  .markets-related-card:hover {
    border-color: rgba(212, 168, 67, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  .markets-related-card:active {
    transform: scale(0.97);
  }
  .markets-related-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .markets-related-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .markets-related-logo-slot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .markets-related-logo-slot .markets-row-logo-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
  }
  .markets-related-change-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.16rem 0.42rem;
    border-radius: 7px;
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .markets-related-change-badge.badge-up {
    color: var(--market-up);
    background: var(--market-up-glow);
  }
  .markets-related-change-badge.badge-down {
    color: var(--market-down);
    background: var(--market-down-glow);
  }
  .markets-related-change-badge.badge-neutral {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
  }
  :root[data-theme="light"] .markets-related-change-badge.badge-up {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
  }
  :root[data-theme="light"] .markets-related-change-badge.badge-down {
    color: #BE123C;
    background: rgba(244, 63, 94, 0.12);
  }
  :root[data-theme="light"] .markets-related-change-badge.badge-neutral {
    color: rgba(10, 10, 10, 0.62);
    background: rgba(10, 10, 10, 0.05);
  }
  .markets-related-card-mid {
    margin-top: 0.65rem;
    min-width: 0;
  }
  .markets-related-card-symbol {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .markets-related-card-name {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-related-card-bottom {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-top: 0.75rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  :root[data-theme="light"] .markets-related-card-bottom {
    border-top-color: rgba(10, 10, 10, 0.08);
  }
  .markets-related-card-price {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* Related Assets Carousel Dots */
  .markets-related-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.15rem 0;
  }
  .markets-related-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="light"] .markets-related-dot {
    background: rgba(10, 10, 10, 0.20);
  }
  .markets-related-dot.active {
    width: 18px;
    background: var(--gold);
  }
  .markets-related-dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* Executive Scratchpad & Private Entry Targets */
  .markets-scratchpad-card {
    margin-top: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 0.95rem 1.05rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .markets-scratchpad-card:focus-within {
    border-color: rgba(212, 168, 67, 0.45);
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.08);
  }
  .markets-scratchpad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
  }
  .markets-scratchpad-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .markets-scratchpad-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
  }
  .markets-scratchpad-title {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-scratchpad-privacy {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
  }
  .markets-scratchpad-status {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.2s ease;
  }
  .markets-scratchpad-status.is-syncing {
    color: var(--gold);
  }
  .markets-scratchpad-status.is-saved {
    color: #10B981;
  }

  .markets-scratchpad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
  }
  @media (max-width: 420px) {
    .markets-scratchpad-grid {
      grid-template-columns: 1fr;
      gap: 0.65rem;
    }
  }
  .markets-scratchpad-label {
    display: block;
    font-family: var(--sans);
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }
  .markets-scratchpad-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0 0.65rem;
    height: 40px;
    transition: border-color 0.15s ease;
  }
  .markets-scratchpad-input-wrap:focus-within {
    border-color: var(--gold);
  }
  .markets-scratchpad-cur {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    margin-right: 0.25rem;
    user-select: none;
  }
  .markets-scratchpad-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
  }
  .markets-scratchpad-input::placeholder {
    color: var(--muted);
    opacity: 0.55;
    font-weight: 400;
  }

  .markets-target-badge {
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--muted);
    transition: all 0.2s ease;
  }
  .markets-target-badge.is-in-range {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #10B981;
  }
  .markets-target-badge.is-pending {
    background: rgba(212, 168, 67, 0.1);
    border-color: rgba(212, 168, 67, 0.32);
    color: var(--gold);
  }

  .markets-scratchpad-stances-row {
    margin-bottom: 0.8rem;
  }
  .markets-stance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .markets-stance-chip {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
  }
  .markets-stance-chip:hover {
    color: var(--ink);
    border-color: var(--gold);
  }
  .markets-stance-chip.is-active {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.25);
  }

  .markets-scratchpad-textarea-wrap {
    margin-bottom: 0.65rem;
  }
  .markets-scratchpad-textarea {
    width: 100%;
    min-height: 64px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--ink);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
  }
  .markets-scratchpad-textarea:focus {
    border-color: var(--gold);
  }
  .markets-scratchpad-textarea::placeholder {
    color: var(--muted);
    opacity: 0.6;
    font-size: 0.8rem;
  }

  .markets-scratchpad-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.25rem;
  }
  .markets-scratchpad-meta {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .markets-scratchpad-clear-btn {
    background: none;
    border: none;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: color 0.15s ease;
  }
  .markets-scratchpad-clear-btn:hover {
    color: #F43F5E;
  }

  /* Watchlist Row Executive Indicators */
  .markets-row-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.28);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    margin-left: 0.35rem;
    letter-spacing: -0.01em;
    vertical-align: middle;
  }
  .markets-row-stance-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* --- Markets Section Header Above Tabs --- */
  .markets-view-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    padding: 0 0.15rem;
  }
  .markets-view-title {
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
  }
  @media (max-width: 420px) {
    .markets-view-title {
      font-size: 1.2rem;
    }
    .markets-view-heading {
      margin-bottom: 0.35rem;
    }
  }

  /* --- Executive Markets View Primary Navigation: Unboxed Top Header Tabs --- */
  .markets-nav-tabs-wrap {
    margin-bottom: 0;
    position: relative;
    top: auto;
    z-index: 25;
    padding: 0;
    background: transparent;
    border-bottom: none;
    width: 100%;
  }

  :root[data-theme="dark"] .markets-nav-tabs-wrap {
    border-bottom: none;
  }

  .markets-nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    box-shadow: none;
    position: relative;
  }

  .markets-nav-tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 50px;
    padding: 0.45rem 0.15rem 0.35rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: rgba(10, 10, 10, 0.58);
    font-family: var(--sans);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.15s ease, opacity 0.18s ease;
    white-space: nowrap;
    user-select: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  :root[data-theme="dark"] .markets-nav-tab-btn {
    color: rgba(248, 250, 252, 0.55);
  }

  .markets-nav-tab-btn:hover {
    color: #0A0A0A;
  }

  :root[data-theme="dark"] .markets-nav-tab-btn:hover {
    color: #F8FAFC;
  }

  .markets-nav-tab-btn:active {
    transform: scale(0.96);
  }

  /* Active State: Deep Advantage Gold illumination & structural indicator */
  .markets-nav-tab-btn.is-active {
    color: #8A6A1C;
    font-weight: 700;
    background: transparent;
  }

  :root[data-theme="dark"] .markets-nav-tab-btn.is-active {
    color: #D4A843;
    background: transparent;
  }

  /* Structural Active Indicator Pip / Baseline Dot */
  .markets-nav-tab-btn::after {
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 22px;
    height: 2.5px;
    border-radius: 999px;
    background: #8A6A1C;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  :root[data-theme="dark"] .markets-nav-tab-btn::after {
    background: #D4A843;
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.65);
  }

  .markets-nav-tab-btn.is-active::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* SVG Icons: 18px Outline */
  .markets-nav-tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .markets-nav-tab-btn:hover .markets-nav-tab-icon {
    opacity: 1;
    transform: translateY(-1px);
  }

  .markets-nav-tab-btn.is-active .markets-nav-tab-icon {
    opacity: 1;
    transform: translateY(-1px);
  }

  /* Typography: Centered micro-label */
  .markets-nav-tab-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }

  .markets-nav-tab-btn.is-active .markets-nav-tab-label {
    font-weight: 700;
  }

  /* News Live Pulsing Indicator Dot */
  .markets-nav-tab-dot {
    position: absolute;
    top: 4px;
    right: calc(50% - 12px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.85);
    display: inline-block;
    flex-shrink: 0;
    animation: overview-dot-pulse-green 2s infinite;
  }

  @media (max-width: 360px) {
    .markets-nav-tab-btn {
      min-height: 46px;
      padding: 0.35rem 0.1rem 0.25rem;
      gap: 0.24rem;
    }
    .markets-nav-tab-icon {
      width: 17px;
      height: 17px;
    }
    .markets-nav-tab-label {
      font-size: 0.64rem;
    }
    .markets-nav-tab-dot {
      top: 3px;
      right: calc(50% - 11px);
      width: 4.5px;
      height: 4.5px;
    }
  }

  /* Tab Panel Transitions */
  .markets-tab-panel {
    display: block;
    animation: marketsTabIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-tab-panel[hidden] {
    display: none !important;
  }

  @keyframes marketsTabIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* In Market News tab, tighten header spacing */
  #markets-tab-panel-news .markets-news-section {
    margin-top: 0.25rem;
  }

  /* --- Executive Markets Multi-Asset Wave Overview Card --- */
  .markets-overview-card {
    border-radius: 20px;
    padding: 1.1rem 1.15rem 1rem;
    margin-bottom: 2.2rem;
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: #FFFFFF;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: visible; /* Ensure dropdown menu floats cleanly over card */
  }
  :root[data-theme="dark"] .markets-overview-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
  }
  .markets-overview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 10;
    gap: 0.5rem;
  }
  
  /* Modern Executive Dropdown Menu */
  .markets-overview-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .markets-overview-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem 0.2rem 0;
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    transition: color 0.15s ease, opacity 0.15s ease;
    outline: none;
  }
  .markets-overview-dropdown-trigger:hover {
    opacity: 0.85;
  }
  .markets-overview-dropdown-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .markets-overview-chevron {
    color: var(--muted);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-overview-dropdown.is-open .markets-overview-chevron {
    transform: rotate(180deg);
  }
  
  /* Floating Frosted Glass Menu Capsule */
  .markets-overview-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 195px;
    background: #0D1117;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 0.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    animation: overviewMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="light"] .markets-overview-menu {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10,  0.09);
    box-shadow: 0 14px 32px rgba(10, 10, 10,  0.12), 0 2px 6px rgba(10, 10, 10,  0.04);
  }
  @keyframes overviewMenuIn {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .markets-overview-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.52rem 0.75rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: #8B949E;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    user-select: none;
    outline: none;
  }
  :root[data-theme="light"] .markets-overview-menu-item {
    color: #5E697E;
  }
  .markets-overview-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
  }
  :root[data-theme="light"] .markets-overview-menu-item:hover {
    background: rgba(10, 10, 10,  0.04);
    color: #0A0A0A;
  }
  .markets-overview-menu-item.active {
    color: #FFFFFF;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
  }
  :root[data-theme="light"] .markets-overview-menu-item.active {
    color: #0A0A0A;
    background: rgba(10, 10, 10,  0.05);
  }
  .markets-overview-item-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .markets-overview-item-label {
    flex: 1;
  }
  .markets-overview-check {
    color: #10B981;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
  }
  .markets-overview-menu-item.active .markets-overview-check {
    opacity: 1;
  }

  .markets-overview-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(10, 10, 10,  0.04);
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  :root[data-theme="dark"] .markets-overview-status {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .markets-overview-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.65);
    animation: overview-dot-pulse-green 2s infinite;
    flex-shrink: 0;
  }
  .markets-overview-pulse-dot.is-closed {
    background: var(--gold);
    box-shadow: 0 0 5px rgba(212, 168, 67, 0.5);
    animation: none;
  }

  /* Top-Right Header Stepper for Sliding Asset Capsules (Zero Overlap) */
  .markets-overview-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: rgba(10, 10, 10,  0.035);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.14rem 0.2rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  :root[data-theme="dark"] .markets-overview-stepper {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .markets-overview-stepper.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
  }
  .markets-overview-step-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--paper-raised);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all 0.16s ease;
    box-shadow: 0 1px 3px rgba(10, 10, 10,  0.08);
  }
  :root[data-theme="dark"] .markets-overview-step-btn {
    background: rgba(255, 255, 255, 0.09);
    color: var(--gold);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  .markets-overview-step-btn:hover:not(:disabled) {
    color: var(--gold);
    transform: scale(1.06);
  }
  .markets-overview-step-btn:active:not(:disabled) {
    transform: scale(0.94);
  }
  .markets-overview-step-btn:disabled {
    opacity: 0.28;
    cursor: default;
    box-shadow: none;
  }

  /* Legend / Mini-Stat Asset Capsules Row (Full Width, Unobstructed) */
  .markets-overview-pills-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 0.85rem;
  }
  .markets-overview-pills {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.05rem 0.05rem 0.18rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .markets-overview-pills::-webkit-scrollbar {
    display: none;
  }
  .markets-overview-pill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.22rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 13px;
    padding: 0.48rem 0.72rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    flex: 0 0 142px;
    min-width: 142px;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.02);
  }
  :root[data-theme="dark"] .markets-overview-pill {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .markets-overview-pill:hover {
    border-color: rgba(212, 168, 67, 0.5);
    transform: translateY(-1px);
  }
  .markets-overview-pill.is-dimmed {
    opacity: 0.36;
    transform: scale(0.985);
  }
  .markets-overview-pill.is-focused {
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.07);
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.14);
  }
  :root[data-theme="dark"] .markets-overview-pill.is-focused {
    background: rgba(212, 168, 67, 0.11);
    border-color: var(--gold);
  }
  .markets-overview-pill-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }
  .markets-overview-pill-id {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
  }
  .markets-overview-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .markets-overview-pill-name {
    font-weight: 600;
    font-size: 0.71rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-overview-pill-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
  }
  .markets-overview-pill-price {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-overview-pill-change {
    font-weight: 700;
    font-size: 0.67rem;
    padding: 0.08rem 0.34rem;
    border-radius: 6px;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .markets-overview-pill-change.text-up {
    color: #10B981;
    background: rgba(16, 185, 129, 0.11);
  }
  .markets-overview-pill-change.text-down {
    color: #F43F5E;
    background: rgba(244, 63, 94, 0.11);
  }
  .markets-overview-pill-change.text-neutral {
    color: var(--muted);
    background: rgba(148, 163, 184, 0.1);
  }

  /* Multi-Timeframe Segmented Range Bar */
  .markets-overview-range-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    padding: 2px;
    margin: 0.15rem 0 0.55rem 0;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
  }
  :root[data-theme="dark"] .markets-overview-range-bar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .markets-overview-range-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 0.25rem 0.2rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--r-control) - 3px);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    touch-action: manipulation;
    transition: color var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
  }
  .markets-overview-range-btn::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    right: 0;
  }
  .markets-overview-range-btn:hover {
    color: var(--text);
  }
  .markets-overview-range-btn:active {
    transform: scale(0.97);
  }
  .markets-overview-range-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }
  .markets-overview-range-btn.active {
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    border-color: var(--border-strong);
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.08);
  }
  :root[data-theme="dark"] .markets-overview-range-btn.active {
    background: #1E1E1E;
    color: #F8FAFC;
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  @media (max-width: 639px) {
    .markets-overview-range-btn.markets-range-desktop-only {
      display: none !important;
    }
  }

  /* Multi-Asset Wave Chart Container with 1:1 Pixel Coordinate System */
  .markets-overview-chart-wrap {
    position: relative;
    width: 100%;
    height: 172px;
    margin-top: 0.15rem;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: crosshair;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .markets-overview-chart-wrap.is-range-loading {
    opacity: 0.48;
    pointer-events: none;
  }
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: crosshair;
  }
  .markets-overview-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Precision Terminal Scrubber HUD Tooltip */
  .markets-overview-scrub-tooltip {
    position: absolute;
    top: -6px;
    pointer-events: none;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    padding: var(--s-1) var(--s-3);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    box-shadow: var(--glass-shadow);
    z-index: 25;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity var(--dur-press) var(--ease-out);
  }
  :root[data-theme="light"] .markets-overview-scrub-tooltip {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--glass-shadow);
    color: var(--text);
  }
  .markets-overview-scrub-tooltip::after {
    display: none;
  }

  @media (max-width: 480px) {
    .markets-overview-card {
      padding: 0.95rem 0.95rem 0.85rem;
      border-radius: 18px;
    }
    .markets-overview-chart-wrap {
      height: 158px;
    }
    .markets-overview-menu {
      min-width: 185px;
    }
    .markets-overview-menu-item {
      padding: 0.65rem 0.85rem;
      font-size: 0.85rem;
    }
  }

  /* --- Executive US Treasury Yield Curve & Recession Spread Card --- */
  .markets-yield-card {
    border-radius: 20px;
    padding: 1.2rem 1.25rem 1.15rem;
    margin-bottom: 2.2rem;
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: #FFFFFF;
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="dark"] .markets-yield-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
  }
  .markets-yield-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .markets-yield-eyebrow {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: 0.2rem;
  }
  .markets-yield-title {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .markets-spread-badge {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.32rem;
    padding: 0;
    margin: -0.25rem 0 0.25rem 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }
  .markets-spread-dot {
    display: none;
  }
  .markets-spread-badge.is-normal {
    background: transparent;
    color: #10B981;
    border: none;
  }
  .markets-spread-badge.is-inverted {
    background: transparent;
    color: #EF4444;
    border: none;
    animation: none;
  }
  .markets-spread-badge.is-flat {
    background: transparent;
    color: #F59E0B;
    border: none;
  }
  .markets-spread-val {
    font-weight: 800;
  }
  .markets-yield-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
  }
  :root[data-theme="dark"] .markets-yield-metrics-strip {
    background: rgba(10, 10, 10, 0.45);
    border-color: rgba(255, 255, 255, 0.06);
  }
  .markets-yield-metric-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .markets-yield-metric-col:not(:last-child) {
    border-right: 1px solid var(--rule);
    padding-right: 0.5rem;
  }
  :root[data-theme="dark"] .markets-yield-metric-col:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.08);
  }
  .markets-yield-metric-label {
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .markets-yield-metric-num {
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-yield-metric-sub {
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--muted);
  }
  .markets-yield-chart-wrap {
    position: relative;
    width: 100%;
    height: 185px;
    margin-bottom: 0.85rem;
  }
  .markets-yield-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .markets-yield-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--muted);
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .markets-yield-footer {
    border-top-color: rgba(255, 255, 255, 0.07);
  }
  .markets-yield-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
  }
  .markets-yield-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .markets-yield-legend-line {
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
  }
  .markets-yield-legend-line--current {
    background: #10B981;
  }
  .markets-yield-legend-line--prev {
    background: #64748B;
    border-top: 1.5px dashed #94A3B8;
  }
  @media (max-width: 480px) {
    .markets-yield-card {
      padding: 1rem 0.95rem 0.9rem;
      border-radius: 18px;
      margin-bottom: 1.75rem;
    }
    .markets-yield-metrics-strip {
      padding: 0.5rem 0.55rem;
      gap: 0.35rem;
    }
    .markets-yield-metric-num {
      font-size: 0.88rem;
    }
    .markets-yield-chart-wrap {
      height: 165px;
    }
    .markets-yield-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.45rem;
    }
  }

  @keyframes macroModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .markets-macro-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .markets-macro-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .markets-macro-modal-title {
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 0.2rem 0;
  }
  .markets-macro-modal-cat {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }


  /* --- Global Market Session State Pulse & Status Styling --- */
  .markets-session-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .markets-session-pill.is-open .markets-session-dot {
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
    animation: sessionDotPulse 2s infinite ease-in-out;
  }
  .markets-session-pill.is-extended .markets-session-dot {
    background: #F59E0B;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.6);
  }
  .markets-session-pill.is-closed .markets-session-dot {
    background: #64748B;
  }
  @keyframes sessionDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.22); opacity: 0.65; }
  }
  .markets-session-time {
    font-size: 0.64rem;
    font-weight: 500;
    opacity: 0.78;
    margin-left: 0.1rem;
  }


  /* --- Personal Portfolio Tracker (PORT-Lite) Styles --- */
  .portfolio-hero-card {
    border-radius: 20px;
    padding: 1.25rem 1.3rem 1.15rem;
    margin-bottom: 1.35rem;
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: #FFFFFF;
    box-shadow: 0 8px 26px rgba(10, 10, 10, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="dark"] .portfolio-hero-card {
    background: radial-gradient(120% 90% at 0% 0%, rgba(248, 250, 252, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.035), rgba(248, 250, 252, 0.012)), #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.10), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
  }
  .portfolio-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .portfolio-hero-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    display: block;
    margin-bottom: 0.15rem;
  }
  .portfolio-hero-subtitle {
    font-size: calc(0.85rem + 1pt);
    font-weight: 700;
    color: var(--muted);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1;
  }
  .portfolio-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .portfolio-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--rule);
    background: var(--surface-raised);
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
    text-decoration: none;
    outline: none;
  }
  .portfolio-action-btn:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
  }
  .portfolio-action-btn:active {
    transform: scale(0.97);
  }
  .portfolio-action-btn--primary {
    background: var(--gold);
    color: #0A0A0A;
    border-color: var(--gold);
  }
  .portfolio-action-btn--primary:hover {
    background: #e5b94f;
    border-color: #e5b94f;
    box-shadow: none;
  }
  #portfolio-add-trigger-btn:hover {
    box-shadow: none;
  }
  .portfolio-action-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 12px;
  }
  .portfolio-action-btn--icon svg {
    flex-shrink: 0;
    display: block;
  }
  .portfolio-hero-val-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
  }
  .portfolio-hero-val {
    font-size: 2.15rem;
    font-weight: 800;
    font-family: var(--sans);
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .portfolio-hero-cur {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
  }
  .portfolio-hero-pnl-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
  }
  .portfolio-pnl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .portfolio-pnl-pill.pill-up {
    color: var(--market-up);
    background: transparent !important;
  }
  .portfolio-pnl-pill.pill-down {
    color: var(--market-down);
    background: transparent !important;
  }
  .portfolio-pnl-pill.pill-neutral {
    color: var(--muted);
    background: transparent !important;
  }
  .portfolio-pnl-period {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .portfolio-pnl-day {
    font-size: 0.74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  /* --- Portfolio Aggregate Equity Curve Performance Chart --- */
  .portfolio-perf-chart-wrap {
    margin: 0.85rem 0 0.95rem;
    position: relative;
    width: 100%;
  }
  .portfolio-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.60rem;
    flex-wrap: wrap;
  }
  .portfolio-chart-controls-left {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
  }
  .portfolio-timeframe-pills {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.05);
    border: 1px solid rgba(10, 10, 10, 0.07);
    border-radius: 999px;
    padding: 0.16rem;
    gap: 0.15rem;
  }
  :root[data-theme="dark"] .portfolio-timeframe-pills {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .portfolio-timeframe-btn {
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .portfolio-timeframe-btn:hover {
    color: var(--ink);
  }
  .portfolio-timeframe-btn.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(10, 10, 10, 0.08);
  }
  :root[data-theme="dark"] .portfolio-timeframe-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .portfolio-style-toggle-group {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.05);
    border: 1px solid rgba(10, 10, 10, 0.07);
    border-radius: 999px;
    padding: 0.16rem;
    gap: 0.15rem;
  }
  :root[data-theme="dark"] .portfolio-style-toggle-group {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .portfolio-style-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
  }
  .portfolio-style-btn svg {
    flex-shrink: 0;
  }
  .portfolio-style-btn:hover {
    color: var(--ink);
  }
  .portfolio-style-btn.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(10, 10, 10, 0.08);
  }
  :root[data-theme="dark"] .portfolio-style-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .portfolio-chart-metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.70rem;
    font-variant-numeric: tabular-nums;
  }
  .portfolio-chart-metric-badge span:first-child {
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .portfolio-chart-pnl-text {
    font-weight: 700;
  }
  .portfolio-chart-viewport {
    position: relative;
    width: 100%;
    height: 148px;
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
  }
  .portfolio-chart-axis-y text,
  .portfolio-chart-axis-x text {
    fill: currentColor;
    opacity: 0.62;
    font-size: 8.5px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  :root[data-theme="dark"] .portfolio-chart-axis-y text,
  :root[data-theme="dark"] .portfolio-chart-axis-x text {
    opacity: 0.55;
  }
  .portfolio-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .portfolio-chart-line {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
  }
  .portfolio-chart-cursor {
    stroke: rgba(16, 185, 129, 0.6);
    stroke-width: 1.2;
    stroke-dasharray: 3 3;
    pointer-events: none;
  }
  :root[data-theme="dark"] .portfolio-chart-cursor {
    stroke: rgba(16, 185, 129, 0.7);
  }
  .portfolio-chart-dot {
    fill: #10B981;
    stroke: #0A0A0A;
    stroke-width: 2.2;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  }
  .portfolio-chart-tooltip {
    position: absolute;
    top: 6px;
    left: 8px;
    pointer-events: none;
    z-index: 10;
    background: rgba(18, 18, 18, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 168, 67, 0.4);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="light"] .portfolio-chart-tooltip {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(10, 10, 10, 0.12);
    box-shadow: 0 4px 14px rgba(10, 10, 10, 0.08);
  }
  .portfolio-chart-tooltip-val {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .portfolio-chart-tooltip-meta {
    font-size: 0.62rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .portfolio-chart-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: rgba(18, 18, 18, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    z-index: 5;
  }
  :root[data-theme="light"] .portfolio-chart-loader {
    background: rgba(248, 250, 252, 0.55);
  }
  .portfolio-chart-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(212, 168, 67, 0.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: newsSkeletonPulse 0.9s linear infinite;
  }
  .portfolio-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 0.75rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 500;
    opacity: 0.75;
  }

  .portfolio-hero-stats-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .portfolio-hero-stats-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .portfolio-footer-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    width: 100%;
  }
  .portfolio-footer-stat:first-child {
    text-align: left;
    align-items: flex-start;
  }
  .portfolio-footer-stat:first-child .portfolio-footer-stat-lbl,
  .portfolio-footer-stat:first-child .portfolio-footer-stat-val {
    text-align: left;
    width: 100%;
  }
  .portfolio-footer-stat:nth-child(2) {
    text-align: center;
    align-items: center;
  }
  .portfolio-footer-stat:nth-child(2) .portfolio-footer-stat-lbl,
  .portfolio-footer-stat:nth-child(2) .portfolio-footer-stat-val {
    text-align: center;
    width: 100%;
  }
  .portfolio-footer-stat:last-child {
    text-align: right;
    align-items: flex-end;
  }
  .portfolio-footer-stat:last-child .portfolio-footer-stat-lbl,
  .portfolio-footer-stat:last-child .portfolio-footer-stat-val {
    text-align: right;
    width: 100%;
  }
  .portfolio-footer-stat-lbl {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .portfolio-footer-stat-val {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Capital Allocation Matrix */
  .portfolio-allocation-card {
    border-radius: 18px;
    padding: 1rem 1.15rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.02);
  }
  :root[data-theme="dark"] .portfolio-allocation-card {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.07);
  }
  .portfolio-allocation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .portfolio-allocation-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .portfolio-allocation-title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .portfolio-breakdown-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(100, 116, 139, 0.12);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
  }
  :root[data-theme="dark"] .portfolio-breakdown-toggle {
    background: rgba(255, 255, 255, 0.06);
  }
  .portfolio-breakdown-toggle-btn {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.48rem;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .portfolio-breakdown-toggle-btn.active {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  :root[data-theme="dark"] .portfolio-breakdown-toggle-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
  }
  .portfolio-allocation-meta {
    font-size: 0.68rem;
    color: var(--muted);
  }
  .portfolio-alloc-bar {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.15);
    display: flex;
    overflow: hidden;
    margin-bottom: 0.75rem;
  }
  .portfolio-alloc-seg {
    height: 100%;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .portfolio-alloc-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
  }
  .portfolio-alloc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s ease;
  }
  .portfolio-alloc-pill:hover {
    opacity: 0.8;
  }
  .portfolio-alloc-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .portfolio-alloc-name {
    font-weight: 600;
  }
  .portfolio-alloc-pct {
    font-weight: 700;
    color: var(--muted);
  }

  /* Donut / Pie View Layout */
  .portfolio-pie-chart-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1.25rem;
    padding: 0.5rem 0 0.25rem 0;
  }
  @media (max-width: 540px) {
    .portfolio-pie-chart-wrap {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  }
  .portfolio-pie-chart-svg-container {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    position: relative;
  }
  .portfolio-pie-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .portfolio-pie-seg {
    transition: stroke-width 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
  }
  .portfolio-pie-seg:hover,
  .portfolio-pie-seg.highlighted {
    stroke-width: 19px !important;
    opacity: 1 !important;
  }
  .portfolio-pie-center-val {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    fill: var(--ink);
    transition: all 0.15s ease;
  }
  :root[data-theme="dark"] .portfolio-pie-center-val {
    fill: #F8FAFC;
  }
  .portfolio-pie-center-lbl {
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 600;
    fill: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .portfolio-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .portfolio-pie-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.72rem;
  }
  .portfolio-pie-legend-row:hover,
  .portfolio-pie-legend-row.highlighted {
    background: rgba(100, 116, 139, 0.08);
  }
  :root[data-theme="dark"] .portfolio-pie-legend-row:hover,
  :root[data-theme="dark"] .portfolio-pie-legend-row.highlighted {
    background: rgba(255, 255, 255, 0.05);
  }
  .portfolio-pie-legend-left {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .portfolio-pie-legend-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .portfolio-pie-legend-val {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  :root[data-theme="dark"] .portfolio-pie-legend-val {
    color: #F8FAFC;
  }
  .portfolio-pie-legend-pct {
    font-weight: 600;
    color: var(--muted);
    font-size: 0.68rem;
    min-width: 38px;
    text-align: right;
  }

  /* Portfolio Filter & Sorting Toolbar */
  .portfolio-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    width: 100%;
  }
  .portfolio-toolbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
  }
  .portfolio-toolbar-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .portfolio-toolbar-heading {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.62);
    margin: 0;
    line-height: 1;
    user-select: none;
  }
  :root[data-theme="dark"] .portfolio-toolbar-heading {
    color: rgba(248, 250, 252, 0.64);
  }
  .portfolio-toolbar-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--sans);
    border-radius: 9999px;
    background: rgba(212, 168, 67, 0.12);
    color: #8A6A1C;
    border: 1px solid rgba(212, 168, 67, 0.25);
    line-height: 1;
  }
  :root[data-theme="dark"] .portfolio-toolbar-count-badge {
    background: rgba(212, 168, 67, 0.14);
    color: #D4A843;
    border-color: rgba(212, 168, 67, 0.28);
  }
  .portfolio-filter-tabs-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
  }
  .portfolio-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 2px 4px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .portfolio-filter-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .portfolio-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border: 1px solid rgba(10, 10, 10, 0.10);
    background: #FFFFFF;
    padding: 0.36rem 0.72rem;
    border-radius: 20px;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(10, 10, 10, 0.62);
    cursor: pointer;
    user-select: none;
    transition: all 0.16s ease;
    white-space: nowrap;
    outline: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  .portfolio-filter-btn:hover {
    color: #0A0A0A;
    border-color: rgba(212, 168, 67, 0.40);
    background: #F8FAFC;
  }
  .portfolio-filter-btn.is-empty:not(.is-active) {
    opacity: 0.62;
  }
  .portfolio-filter-btn.is-active {
    background: #FFFFFF;
    color: #0A0A0A;
    border-color: #D4A843;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08), inset 0 0 0 1px rgba(212, 168, 67, 0.25);
  }
  .portfolio-filter-label {
    line-height: 1;
  }
  .portfolio-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.26rem;
    font-size: 0.63rem;
    font-weight: 700;
    border-radius: 9999px;
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.55);
    line-height: 1;
    transition: all 0.16s ease;
  }
  .portfolio-filter-btn.is-active .portfolio-filter-count {
    background: rgba(212, 168, 67, 0.18);
    color: #8A6A1C;
  }
  :root[data-theme="dark"] .portfolio-filter-btn {
    background: #141414;
    border-color: rgba(248, 250, 252, 0.08);
    color: rgba(248, 250, 252, 0.64);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  :root[data-theme="dark"] .portfolio-filter-btn:hover {
    color: #F8FAFC;
    border-color: rgba(212, 168, 67, 0.35);
    background: #181818;
  }
  :root[data-theme="dark"] .portfolio-filter-btn.is-active {
    background: #1A1A1A;
    color: #F8FAFC;
    border-color: #D4A843;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(212, 168, 67, 0.25);
  }
  :root[data-theme="dark"] .portfolio-filter-count {
    background: rgba(248, 250, 252, 0.08);
    color: rgba(248, 250, 252, 0.55);
  }
  :root[data-theme="dark"] .portfolio-filter-btn.is-active .portfolio-filter-count {
    background: rgba(212, 168, 67, 0.20);
    color: #D4A843;
  }
  /* Modern Executive Portfolio Sort Dropdown Menu */
  .portfolio-sort-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .portfolio-sort-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 0.35rem 0.65rem 0.35rem 0.75rem;
    height: 32px;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    user-select: none;
  }
  .portfolio-sort-dropdown-trigger:hover {
    border-color: rgba(10, 10, 10, 0.20);
  }
  .portfolio-sort-dropdown-trigger:focus-visible,
  .portfolio-sort-dropdown-trigger:focus {
    border-color: rgba(10, 10, 10, 0.25);
    box-shadow: none;
    outline: none;
  }
  :root[data-theme="dark"] .portfolio-sort-dropdown-trigger {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.10);
    color: #F8FAFC;
  }
  :root[data-theme="dark"] .portfolio-sort-dropdown-trigger:hover {
    border-color: rgba(248, 250, 252, 0.22);
  }
  :root[data-theme="dark"] .portfolio-sort-dropdown-trigger:focus-visible,
  :root[data-theme="dark"] .portfolio-sort-dropdown-trigger:focus {
    border-color: rgba(248, 250, 252, 0.25);
    box-shadow: none;
    outline: none;
  }
  .portfolio-sort-dropdown.is-open .portfolio-sort-dropdown-trigger {
    border-color: rgba(10, 10, 10, 0.22);
  }
  :root[data-theme="dark"] .portfolio-sort-dropdown.is-open .portfolio-sort-dropdown-trigger {
    border-color: rgba(248, 250, 252, 0.25);
  }
  .portfolio-sort-chevron {
    color: var(--muted);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
  }
  .portfolio-sort-dropdown.is-open .portfolio-sort-chevron {
    transform: rotate(180deg);
  }

  /* Floating Frosted Glass Menu Capsule */
  .portfolio-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 175px;
    background: #0D1117;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 0.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    animation: portfolioSortMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="light"] .portfolio-sort-menu {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.09);
    box-shadow: 0 14px 32px rgba(10, 10, 10, 0.12), 0 2px 6px rgba(10, 10, 10, 0.04);
  }
  @keyframes portfolioSortMenuIn {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .portfolio-sort-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: #8B949E;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    user-select: none;
    outline: none;
  }
  :root[data-theme="light"] .portfolio-sort-menu-item {
    color: #5E697E;
  }
  .portfolio-sort-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
  }
  :root[data-theme="light"] .portfolio-sort-menu-item:hover {
    background: rgba(10, 10, 10, 0.04);
    color: #0A0A0A;
  }
  .portfolio-sort-menu-item.active {
    color: #FFFFFF;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
  }
  :root[data-theme="light"] .portfolio-sort-menu-item.active {
    color: #0A0A0A;
    background: rgba(10, 10, 10, 0.05);
  }
  .portfolio-sort-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .portfolio-sort-item-label {
    flex: 1;
    white-space: nowrap;
  }
  .portfolio-sort-check {
    color: #D4A843;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
  }
  .portfolio-sort-menu-item.active .portfolio-sort-check {
    opacity: 1;
  }

  /* Holdings Cards List - Modern Minimal Executive Architecture */
  .portfolio-holdings-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .portfolio-holding-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 0.95rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    user-select: none;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  :root[data-theme="dark"] .portfolio-holding-card {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.07);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  }
  .portfolio-holding-card:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 168, 67, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  }
  :root[data-theme="dark"] .portfolio-holding-card:hover {
    background: #161616;
    border-color: rgba(212, 168, 67, 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  }
  .portfolio-card-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid rgba(10, 10, 10, 0.07);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    font-family: var(--sans);
    letter-spacing: -0.01em;
    flex-shrink: 0;
    overflow: hidden;
  }
  .portfolio-card-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
  }
  :root[data-theme="dark"] .portfolio-card-avatar {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.08);
    color: #F8FAFC;
  }
  .portfolio-card-avatar.crypto {
    color: #A855F7;
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.22);
  }
  .portfolio-card-avatar.commodities {
    color: #D4A843;
    background: rgba(212, 168, 67, 0.10);
    border-color: rgba(212, 168, 67, 0.22);
  }
  .portfolio-card-avatar.bonds {
    color: #10B981;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.22);
  }
  .portfolio-card-avatar.cash {
    color: #64748B;
    background: rgba(100, 116, 139, 0.10);
    border-color: rgba(100, 116, 139, 0.20);
  }
  :root[data-theme="dark"] .portfolio-card-avatar.cash {
    color: #94A3B8;
  }
  .portfolio-card-avatar.real_estate {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.22);
  }
  :root[data-theme="light"] .portfolio-card-avatar.real_estate {
    color: #B45309;
  }
  .portfolio-card-avatar.others {
    color: #EC4899;
    background: rgba(236, 72, 153, 0.10);
    border-color: rgba(236, 72, 153, 0.22);
  }

  .portfolio-card-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
  }
  .portfolio-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
  }
  .portfolio-card-row--primary {
    align-items: center;
  }
  .portfolio-card-row--secondary {
    align-items: baseline;
  }

  .portfolio-card-asset-info {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .portfolio-card-symbol {
    font-family: var(--sans);
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .portfolio-card-name {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .portfolio-card-val-row {
    line-height: 1.2;
    flex-shrink: 0;
    text-align: right;
  }
  .portfolio-card-val {
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .portfolio-card-stats-line {
    font-size: 0.71rem;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    flex: 1;
    min-width: 0;
  }

  .portfolio-card-pill-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .portfolio-card-pnl-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  /* Portfolio Empty State */
  .portfolio-empty-state {
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  :root[data-theme="dark"] .portfolio-empty-state {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .portfolio-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .portfolio-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
  }
  .portfolio-empty-desc {
    font-size: 0.78rem;
    color: var(--muted);
    max-width: 360px;
    line-height: 1.45;
    margin: 0;
  }
  .portfolio-empty-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Portfolio Modals */
  .portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    animation: macroModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .portfolio-modal[hidden] {
    display: none !important;
  }
  .portfolio-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  :root[data-theme="light"] .portfolio-backdrop {
    background: rgba(10, 10, 10, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .portfolio-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 1.35rem 1.45rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.15);
    animation: macroPanelSlideUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="dark"] .portfolio-panel {
    background: #121212;
    border-color: rgba(248, 250, 252, 0.10);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 168, 67, 0.08);
  }
  .portfolio-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .portfolio-panel-header {
    border-bottom-color: rgba(248, 250, 252, 0.08);
  }
  .portfolio-modal-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #D4A843;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.25);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    margin-bottom: 0.35rem;
  }
  :root[data-theme="light"] .portfolio-modal-tag {
    color: #8A6A1C;
    background: rgba(212, 168, 67, 0.15);
    border-color: rgba(212, 168, 67, 0.35);
  }
  .portfolio-modal-title {
    font-family: 'Bricolage Grotesque', var(--sans);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0;
  }
  .portfolio-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.16s ease;
    flex-shrink: 0;
    padding: 0;
  }
  .portfolio-modal-close-btn:hover {
    color: var(--ink);
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.10);
    transform: scale(1.04);
  }
  .portfolio-modal-close-btn:active {
    transform: scale(0.95);
  }

  .portfolio-form-group {
    margin-bottom: 1.05rem;
  }
  .portfolio-form-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.4rem;
  }
  .portfolio-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    height: 40px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  :root[data-theme="dark"] .portfolio-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(248, 250, 252, 0.10);
    color: #F8FAFC;
  }
  .portfolio-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.20);
  }

  /* Segmented Asset Class Controller with Mobile Scroll & Edge Back/Next Buttons */
  .portfolio-cat-segmented-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .portfolio-cat-segmented {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 3px 2.1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
  }
  .portfolio-cat-segmented::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  :root[data-theme="dark"] .portfolio-cat-segmented {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(248, 250, 252, 0.09);
  }
  .portfolio-cat-choice-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 0.44rem 0.72rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.16s ease;
    text-align: center;
    user-select: none;
    white-space: nowrap;
    min-height: 32px;
  }
  .portfolio-cat-choice-btn:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
  }
  :root[data-theme="light"] .portfolio-cat-choice-btn:hover {
    background: rgba(10, 10, 10, 0.04);
  }
  .portfolio-cat-choice-btn.active {
    background: #D4A843 !important;
    color: #0A0A0A !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  }
  .portfolio-cat-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--muted);
    cursor: pointer;
    z-index: 2;
    transition: all 0.16s ease;
  }
  .portfolio-cat-nav-btn.portfolio-cat-prev-btn {
    left: 4px;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.10);
  }
  .portfolio-cat-nav-btn.portfolio-cat-next-btn {
    right: 4px;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.10);
  }
  :root[data-theme="dark"] .portfolio-cat-nav-btn {
    background: #141414;
    border-color: rgba(248, 250, 252, 0.12);
    color: rgba(248, 250, 252, 0.75);
  }
  :root[data-theme="dark"] .portfolio-cat-nav-btn.portfolio-cat-prev-btn {
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="dark"] .portfolio-cat-nav-btn.portfolio-cat-next-btn {
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
  }
  .portfolio-cat-nav-btn:hover {
    color: var(--gold);
    border-color: rgba(212, 168, 67, 0.35);
  }
  .portfolio-cat-nav-btn:active {
    transform: translateY(-50%) scale(0.92);
  }

  /* Quick-Pick Popular Asset Chips */
  .portfolio-hint-chip {
    border: 1px solid rgba(212, 168, 67, 0.24);
    background: rgba(212, 168, 67, 0.06);
    color: var(--ink);
    border-radius: 6px;
    padding: 0.18rem 0.45rem;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .portfolio-hint-chip:hover {
    border-color: var(--gold);
    background: rgba(212, 168, 67, 0.16);
    transform: translateY(-1px);
  }

  /* Use Live Price Text Button */
  .portfolio-use-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 700;
    color: #D4A843;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease;
  }
  :root[data-theme="light"] .portfolio-use-live-btn {
    color: #8A6A1C;
  }
  .portfolio-use-live-btn:hover {
    opacity: 0.8;
  }
  .portfolio-use-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10B981;
  }

  /* Real-time Ticker Autocomplete Suggestions in Modal */
  .portfolio-symbol-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10070;
    background: #121212;
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(248, 250, 252, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.50);
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
  }
  :root[data-theme="light"] .portfolio-symbol-suggestions {
    background: #FFFFFF;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(10, 10, 10, 0.10);
    box-shadow: 0 16px 36px rgba(10, 10, 10, 0.12);
  }
  .portfolio-symbol-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    border-radius: 9px;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    transition: background 0.14s ease;
    user-select: none;
  }
  .portfolio-symbol-item:hover,
  .portfolio-symbol-item.active {
    background: rgba(212, 168, 67, 0.10);
  }
  :root[data-theme="light"] .portfolio-symbol-item:hover,
  :root[data-theme="light"] .portfolio-symbol-item.active {
    background: rgba(212, 168, 67, 0.12);
  }
  .portfolio-symbol-item-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .portfolio-symbol-item-ticker {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .portfolio-symbol-item-name {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
  }
  .portfolio-symbol-item-badge {
    font-size: 0.65rem;
    color: #D4A843;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(212, 168, 67, 0.12);
    border: 1px solid rgba(212, 168, 67, 0.22);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    flex-shrink: 0;
    margin-left: 0.5rem;
  }
  :root[data-theme="light"] .portfolio-symbol-item-badge {
    color: #8A6A1C;
    background: rgba(212, 168, 67, 0.14);
    border-color: rgba(212, 168, 67, 0.30);
  }

  @media (max-width: 480px) {
    .portfolio-hero-card {
      padding: 1rem 1rem 0.95rem;
      border-radius: 18px;
    }
    .portfolio-hero-val {
      font-size: 1.85rem;
    }
    /* Add Asset button compact sizing on mobile */
    .portfolio-hero-actions #portfolio-add-trigger-btn {
      padding: 0.28rem 0.55rem;
      font-size: 0.68rem;
      height: 28px;
      gap: 0.24rem;
      border-radius: 14px;
    }
    .portfolio-hero-actions #portfolio-add-trigger-btn svg {
      width: 11px;
      height: 11px;
    }
    .portfolio-hero-actions .portfolio-action-btn--icon {
      padding: 0;
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .portfolio-hero-actions .portfolio-action-btn--icon svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      display: block;
    }

    .portfolio-hero-stats-footer {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.35rem;
    }
    .portfolio-footer-stat-val {
      font-size: 0.58rem;
    }
    .portfolio-footer-stat-lbl {
      font-size: 0.58rem;
    }
    .portfolio-toolbar {
      gap: 0.55rem;
      margin-bottom: 0.95rem;
    }
    .portfolio-toolbar-heading {
      font-size: 0.68rem;
    }
    .portfolio-filter-tabs {
      gap: 0.28rem;
      padding: 1px 1px 3px 1px;
    }
    .portfolio-filter-btn {
      padding: 0.3rem 0.58rem;
      font-size: 0.71rem;
      gap: 0.3rem;
    }
    .portfolio-filter-count {
      min-width: 0.95rem;
      height: 0.95rem;
      font-size: 0.6rem;
      padding: 0 0.22rem;
    }
    .portfolio-sort-dropdown {
      margin-left: auto;
    }
    .portfolio-sort-dropdown-trigger {
      font-size: 0.7rem;
      padding: 0.28rem 0.5rem 0.28rem 0.6rem;
      height: 30px;
      gap: 0.35rem;
    }
    .portfolio-sort-menu {
      right: 0;
      left: auto;
      min-width: 160px;
      max-width: calc(100vw - 20px);
    }
    .portfolio-holding-card {
      padding: 0.85rem 0.95rem;
      border-radius: 18px;
      gap: 0.7rem;
    }
    .portfolio-card-avatar {
      width: 34px;
      height: 34px;
      min-width: 34px;
      font-size: 0.70rem;
      border-radius: 10px;
    }
    .portfolio-card-symbol {
      font-size: 0.88rem;
    }
    .portfolio-card-name {
      font-size: 0.70rem;
    }
    .portfolio-card-stats-line {
      font-size: 0.65rem;
    }
    .portfolio-card-val {
      font-size: 0.88rem;
    }
    .portfolio-card-pnl-pill {
      font-size: 0.60rem;
      padding: 0.10rem 0.35rem;
    }
  }

  /* --- Executive Briefing (Market News Feed) --- */
  .markets-news-section {
    margin-top: 1.85rem;
    margin-bottom: 2.25rem;
  }
  .markets-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .markets-feeds-control-bar {
    min-height: 44px;
    gap: 0.5rem;
  }
  .markets-feeds-drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    background: transparent;
    border: none;
    border-radius: var(--r-control, 12px);
    color: var(--ink, var(--text));
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1), transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .markets-feeds-drawer-trigger:active {
    transform: scale(0.97);
  }
  .markets-feeds-drawer-trigger:focus-visible {
    outline: 2px solid var(--focus, var(--gold));
    outline-offset: 2px;
  }
  .markets-feeds-hamburger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink, var(--text));
    flex-shrink: 0;
  }
  :root[data-theme="dark"] .markets-feeds-hamburger-icon {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .markets-feeds-active-label {
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink, var(--text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
  }
  .markets-feeds-active-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted, var(--text-muted));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  /* Feedly-Style Slide-Out Feeds Drawer */
  .markets-feeds-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: var(--scrim, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .markets-feeds-drawer-backdrop.is-open {
    opacity: 1;
  }
  .markets-feeds-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    height: 100dvh;
    background: var(--surface, #121212);
    border-right: 1px solid var(--rule, rgba(248, 250, 252, 0.1));
    box-shadow: var(--shadow-float, 0 12px 32px rgba(0, 0, 0, 0.45));
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior-y: contain;
    user-select: none;
  }
  :root[data-theme="light"] .markets-feeds-drawer {
    background: #FFFFFF;
  }
  :root[data-theme="dark"] .markets-feeds-drawer {
    background: #121212;
  }
  .markets-feeds-drawer-backdrop.is-open .markets-feeds-drawer {
    transform: translateX(0);
  }
  .markets-feeds-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.85rem 0.75rem 1.15rem;
    border-bottom: 1px solid var(--rule, rgba(248, 250, 252, 0.1));
    flex-shrink: 0;
  }
  .markets-feeds-drawer__title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted, var(--text-muted));
  }
  .markets-feeds-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -0.35rem -0.35rem -0.35rem 0;
    background: transparent;
    border: none;
    border-radius: var(--r-control, 12px);
    color: var(--muted, var(--text-muted));
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1), transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .markets-feeds-drawer__close:active {
    transform: scale(0.95);
  }
  .markets-feeds-drawer__close:focus-visible {
    outline: 2px solid var(--focus, var(--gold));
    outline-offset: -2px;
  }
  .markets-feeds-drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0.45rem 0 1.5rem;
    scrollbar-width: thin;
  }
  .markets-feeds-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 1.1rem 0 0.5rem;
    background: transparent;
    border: none;
    color: var(--ink, var(--text));
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .markets-feeds-row:focus-visible {
    outline: 2px solid var(--focus, var(--gold));
    outline-offset: -2px;
  }
  .markets-feeds-row.is-active {
    font-weight: 500;
    color: var(--accent-text, var(--gold));
    background: rgba(212, 168, 67, 0.08);
  }
  .markets-feeds-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding-right: 1.1rem;
    padding-left: 0.25rem;
  }
  .markets-feeds-group-header.is-active {
    background: rgba(212, 168, 67, 0.08);
  }
  .markets-feeds-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--muted, var(--text-muted));
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .markets-feeds-chevron-btn svg {
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .markets-feeds-group.is-collapsed .markets-feeds-chevron-btn svg {
    transform: rotate(-90deg);
  }
  .markets-feeds-group-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-height: 44px;
    padding: 0 0 0 0.15rem;
    background: transparent;
    border: none;
    color: var(--ink, var(--text));
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .markets-feeds-group-header.is-active .markets-feeds-group-select {
    color: var(--accent-text, var(--gold));
  }
  .markets-feeds-group-children {
    display: flex;
    flex-direction: column;
  }
  .markets-feeds-group.is-collapsed .markets-feeds-group-children {
    display: none;
  }
  .markets-feeds-row--source {
    padding-left: 2.85rem;
    min-height: 44px;
    gap: 0.75rem;
  }
  .markets-feeds-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--muted, var(--text-muted));
  }
  .markets-feeds-row.is-active .markets-feeds-row__icon {
    color: var(--accent-text, var(--gold));
  }
  .markets-feeds-monogram {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    background: rgba(248, 250, 252, 0.08);
    color: var(--ink, var(--text));
    border: 1px solid var(--rule, rgba(248, 250, 252, 0.1));
  }
  :root[data-theme="light"] .markets-feeds-monogram {
    background: rgba(10, 10, 10, 0.05);
    border-color: rgba(10, 10, 10, 0.1);
  }
  .markets-publisher-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  .markets-feeds-row__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.5rem;
  }
  .markets-feeds-row__count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted, var(--text-muted));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .markets-feeds-drawer,
    .markets-feeds-drawer-backdrop,
    .markets-feeds-chevron-btn svg,
    .markets-discover-sheet,
    .markets-discover-backdrop {
      transition-duration: 0.01ms;
    }
  }

  /* Discover Sources Trigger & Full-Page Feedly-Style View */
  .markets-feeds-discover-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .markets-feeds-discover-btn:active {
    transform: scale(0.97);
  }
  .markets-feeds-discover-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-feeds-discover-btn svg {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .markets-discover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9850;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .markets-discover-backdrop.is-open {
    opacity: 1;
  }
  .markets-discover-sheet {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    transform: translateY(var(--s-2));
    transition: transform var(--dur-fast) var(--ease-out);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior-y: contain;
    overflow: hidden;
  }
  .markets-discover-backdrop.is-open .markets-discover-sheet {
    transform: translateY(0);
  }
  .markets-discover-page-inner {
    width: 100%;
    max-width: 640px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Feedly-Style Top App Bar */
  .markets-discover-topbar {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    min-height: 56px;
    padding: var(--s-1) var(--s-3) 0;
    flex-shrink: 0;
  }
  .markets-discover-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--r-control);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .markets-discover-back-btn:active {
    transform: scale(0.96);
  }
  .markets-discover-back-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-discover-title {
    margin: 0;
    text-align: center;
    font-family: var(--serif);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-discover-reset-btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--s-2);
    background: transparent;
    border: none;
    border-radius: var(--r-control);
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .markets-discover-reset-btn:active {
    transform: scale(0.96);
  }
  .markets-discover-reset-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* Feedly-Style 3-Tab Underline Strip */
  .markets-discover-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    padding: 0 var(--s-2);
    flex-shrink: 0;
  }
  .markets-discover-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 var(--s-2);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 400;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--dur-press) var(--ease-out);
  }
  .markets-discover-tab-btn.is-active {
    color: var(--accent-text);
    font-weight: 500;
  }
  .markets-discover-tab-btn.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-text);
  }
  .markets-discover-tab-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  /* Full-Width Rounded Search Input */
  .markets-discover-controls {
    padding: var(--s-3) var(--s-4) var(--s-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .markets-discover-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .markets-discover-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .markets-discover-search-icon {
    position: absolute;
    left: var(--s-3);
    color: var(--text-muted);
    pointer-events: none;
  }
  .markets-discover-search-input {
    width: 100%;
    height: var(--s-7);
    padding: 0 var(--s-3) 0 2.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-base);
    caret-color: var(--accent);
  }
  .markets-discover-search-input::placeholder {
    color: var(--text-muted);
  }
  .markets-discover-search-input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-color: var(--border-strong);
  }
  .markets-discover-notice {
    margin: var(--s-2) 0 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-control);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-xs);
    line-height: 1.4;
  }

  /* Main Scrollable Body */
  .markets-discover-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--s-4) var(--s-4) var(--s-8);
    scrollbar-width: thin;
  }

  /* Feedly Hub Section Headings */
  .markets-discover-hub-group {
    margin-bottom: var(--s-6);
  }
  .markets-discover-hub-heading {
    margin: 0 0 var(--s-3);
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: -0.01em;
  }

  /* Featured Horizontal Photographic Card Rail */
  .markets-discover-featured-rail {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    padding-bottom: var(--s-1);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .markets-discover-featured-rail::-webkit-scrollbar {
    display: none;
  }
  .markets-discover-featured-card {
    position: relative;
    flex: 0 0 152px;
    width: 152px;
    height: 214px;
    border-radius: var(--r-control);
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    scroll-snap-align: start;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .markets-discover-featured-card:active {
    transform: scale(0.97);
  }
  .markets-discover-featured-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-discover-featured-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .markets-discover-featured-card__scrim {
    position: absolute;
    inset: 0;
    background: var(--video-scrim);
    transform: rotate(180deg);
    pointer-events: none;
  }
  .markets-discover-featured-card__content {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--s-4) var(--s-3) var(--s-3);
    text-align: center;
  }
  .markets-discover-featured-card__title {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cream);
    text-wrap: balance;
  }
  .markets-discover-featured-card__count {
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--cream-raised);
    opacity: 0.86;
  }
  .markets-discover-featured-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0.55rem;
  }
  .markets-discover-featured-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--muted, rgba(10, 10, 10, 0.35));
    opacity: 0.35;
    border: none;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  :root[data-theme="dark"] .markets-discover-featured-dot {
    background: var(--text-muted, rgba(248, 250, 252, 0.4));
    opacity: 0.35;
  }
  .markets-discover-featured-dot::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
  }
  .markets-discover-featured-dot.active,
  .markets-discover-featured-dot.is-active {
    width: 18px;
    background: var(--gold);
    opacity: 1;
    transform: none;
  }
  .markets-discover-featured-dot:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* Feedly-Style Category Directory List Rows (44x44 Rounded Thumbnails) */
  .markets-discover-topic-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  .markets-discover-topic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 58px;
    padding: var(--s-2) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .markets-discover-topic-row:last-child {
    border-bottom: none;
  }
  .markets-discover-topic-row:active {
    transform: scale(0.99);
  }
  .markets-discover-topic-row:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-discover-topic-row__left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    flex: 1;
  }
  .markets-discover-topic-thumb-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--r-control);
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .markets-discover-topic-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .markets-discover-topic-thumb-fallback {
    font-family: var(--serif);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
  }
  .markets-discover-topic-name {
    font-family: var(--sans);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .markets-discover-topic-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  /* Drill-Down Header inside Categories View */
  .markets-discover-drilldown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .markets-discover-drilldown-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--accent-text);
    font-family: var(--sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .markets-discover-drilldown-back:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-discover-drilldown-count {
    font-family: var(--sans);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Publication Rows */
  .markets-discover-section {
    margin-top: var(--s-4);
  }
  .markets-discover-section:first-child {
    margin-top: 0;
  }
  .markets-discover-section-title {
    margin: 0 0 var(--s-2);
    font-family: var(--serif);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text);
  }
  .markets-discover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
  }
  .markets-discover-row[data-discover-open-source] {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .markets-discover-row[data-discover-open-source]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--r-control);
  }
  .markets-discover-row:last-child {
    border-bottom: none;
  }
  .markets-discover-row__left {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    flex: 1;
    transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .markets-discover-row[data-discover-open-source]:active .markets-discover-row__left {
    opacity: 0.78;
    transform: scale(0.99);
  }
  .markets-discover-monogram {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-control);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .markets-discover-info {
    min-width: 0;
    flex: 1;
  }
  .markets-discover-name-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
  }
  .markets-discover-name {
    font-family: var(--sans);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
  }
  .markets-discover-region-tag {
    font-family: var(--sans);
    font-size: var(--text-xs);
    color: var(--text-muted);
  }
  .markets-discover-desc {
    margin: var(--s-1) 0 0;
    font-family: var(--sans);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (min-width: 640px) {
    .markets-discover-desc {
      -webkit-line-clamp: 1;
    }
  }
  .markets-discover-follow-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    height: 32px;
    min-width: 76px;
    padding: 0 var(--s-2);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
  }
  .markets-discover-follow-btn::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
  .markets-discover-follow-btn:active {
    transform: scale(0.97);
  }
  .markets-discover-follow-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .markets-discover-follow-btn.is-following {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
  }
  .markets-discover-empty {
    padding: var(--s-6) 0;
    text-align: center;
    font-family: var(--sans);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  /* Publisher Profile Header (Discover Source Preview & Single-Source Market Wire) */
  .markets-source-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-4) var(--s-3) var(--s-5);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
  }
  .markets-source-profile-wire-wrap {
    width: 100%;
    grid-column: 1 / -1;
  }
  .markets-source-profile-logo {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-control);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--s-3);
    flex-shrink: 0;
  }
  .markets-source-profile-title {
    margin: 0 0 var(--s-2);
    font-family: var(--serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: balance;
  }
  .markets-source-profile-desc {
    margin: 0 0 var(--s-4);
    max-width: 50ch;
    font-family: var(--sans);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: pretty;
  }
  .markets-source-profile-follow-btn {
    min-width: 96px;
  }
  .markets-discover-source-feed {
    padding-bottom: var(--s-6);
  }

  /* List & Grid Container Views matching Deep Advantage Archive */
  .markets-news-list--list {
    display: flex;
    flex-direction: column;
    gap: 0.60rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .markets-news-list--list {
      display: flex;
      flex-direction: column;
      gap: 0.68rem;
    }
  }
  @media (min-width: 1024px) {
    .markets-news-list--list {
      display: flex;
      flex-direction: column;
      gap: 0.72rem;
      max-width: 860px;
      margin-left: 0;
      margin-right: auto;
    }
  }
  .markets-news-list--grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .markets-news-list--grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
  }
  @media (min-width: 1024px) {
    .markets-news-list--grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
    }
  }

  /* News Card matching Markets Design System */
  .markets-news-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.95rem 1.05rem 0.85rem;
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.045), 0 1px 2px rgba(10, 10, 10, 0.02);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
  }
  .markets-news-card:hover,
  .markets-news-card:focus-visible {
    border-color: rgba(212, 168, 67, 0.65);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.07), 0 0 0 1px rgba(212, 168, 67, 0.25);
    outline: none;
  }
  .markets-news-card:active {
    transform: translateY(0);
  }
  :root[data-theme="dark"] .markets-news-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  :root[data-theme="dark"] .markets-news-card:hover,
  :root[data-theme="dark"] .markets-news-card:focus-visible {
    border-color: rgba(212, 168, 67, 0.65);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 168, 67, 0.30);
  }
  :root[data-theme="dark"] .markets-news-card:active {
    transform: translateY(0);
  }

  /* --- Breaking News Hero Carousel --- */
  .breaking-news-hero {
    margin-bottom: 1rem;
    padding: 0.15rem 0;
  }
  .breaking-news-scroll-container {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.15rem 0.1rem 0.4rem;
    margin: 0 -0.25rem;
  }
  .breaking-news-scroll-container::-webkit-scrollbar {
    display: none;
  }
  .breaking-news-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0.55rem;
  }
  .breaking-news-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--muted, rgba(10, 10, 10, 0.35));
    opacity: 0.35;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="dark"] .breaking-news-dot {
    background: var(--text-muted, rgba(248, 250, 252, 0.4));
    opacity: 0.35;
  }
  .breaking-news-dot.active,
  .breaking-news-dot.is-active {
    width: 18px;
    background: var(--gold);
    opacity: 1;
    transform: none;
  }
  .breaking-news-card {
    flex: 0 0 84%;
    width: 84%;
    height: 205px;
    min-height: 205px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.8rem 0.85rem;
    background: #121212;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  @media (min-width: 640px) {
    .breaking-news-card {
      flex: 0 0 380px;
      width: 380px;
      height: 220px;
      min-height: 220px;
    }
  }
  @media (min-width: 1024px) {
    .breaking-news-card {
      flex: 0 0 410px;
      width: 410px;
      height: 230px;
      min-height: 230px;
    }
  }
  .breaking-news-card:active {
    transform: scale(0.98);
  }
  .breaking-news-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease;
  }
  .breaking-news-card:hover .breaking-news-card__bg {
    transform: scale(1.03);
  }
  .breaking-news-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.58) 52%, rgba(10, 10, 10, 0.15) 100%);
    z-index: 2;
  }
  .breaking-news-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #F8FAFC;
  }
  .breaking-news-card__headline {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    color: #F8FAFC;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .breaking-news-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: 0.1rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(248, 250, 252, 0.15);
  }
  .breaking-news-publisher {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(248, 250, 252, 0.85);
    min-width: 0;
    overflow: hidden;
  }
  .breaking-news-publisher__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .breaking-news-publisher__time {
    opacity: 0.65;
    font-size: 0.68rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .breaking-news-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
  }
  .breaking-news-action-btn {
    background: rgba(248, 250, 252, 0.15);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #F8FAFC;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    padding: 0;
  }
  .breaking-news-action-btn:hover {
    background: rgba(212, 168, 67, 0.3);
    color: #D4A843;
  }
  .breaking-news-card:hover .breaking-news-action-btn--read {
    background: #D4A843;
    color: #0A0A0A;
  }
  .breaking-news-action-btn:active {
    transform: scale(0.92);
  }

  .markets-news-card__main-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
  }

  /* Left body column */
  .markets-news-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* Top metadata row */
  .markets-news-card__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    line-height: 1;
    margin-bottom: 0.20rem;
  }

  @media (min-width: 640px) {
    .markets-news-card__meta {
      margin-bottom: 0.47rem;
    }
  }

  .markets-news-card__left-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .markets-news-card__source {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    white-space: nowrap;
  }

  .markets-news-card__bullet {
    color: var(--muted);
    opacity: 0.5;
    font-size: 0.62rem;
  }

  .markets-news-card__time {
    font-size: 0.68rem;
    color: var(--muted);
    white-space: nowrap;
  }

  /* Headline */
  .markets-news-card__title {
    margin: 0 0 0.35rem 0;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.30;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Summary snippet */
  .markets-news-card__summary {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.76rem;
    line-height: 1.44;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Right-anchored thumbnail */
  .markets-news-card__thumb-wrap {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 1px solid var(--rule);
    background: var(--surface-raised);
    box-shadow: 0 1px 4px rgba(10, 10, 10, 0.04);
  }

  :root[data-theme="dark"] .markets-news-card__thumb-wrap {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
  }

  .markets-news-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
  }

  .markets-news-card:hover .markets-news-card__thumb {
    transform: scale(1.05);
  }

  .markets-news-card__thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--sans);
    letter-spacing: 0.04em;
    color: var(--gold);
    background: rgba(132, 101, 30, 0.08);
  }

  :root[data-theme="dark"] .markets-news-card__thumb-fallback {
    background: rgba(212, 168, 67, 0.1);
  }

  /* Full-width card footer row */
  .markets-news-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.45rem;
    padding-top: 0;
    gap: 0.55rem;
    width: 100%;
  }

  @media (min-width: 640px) {
    .markets-news-card__footer {
      margin-top: 0.60rem;
    }
  }

  .markets-news-card__footer-right {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
  }

  .markets-news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.60rem;
    font-weight: 700;
    font-family: var(--sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8A6A1C;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }

  :root[data-theme="dark"] .markets-news-tag {
    color: #D4A843;
    border: none;
  }

  .markets-news-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold);
    transition: transform 0.18s ease;
  }

  .markets-news-card:hover .markets-news-card__cta svg {
    transform: translateX(3px);
  }

  .markets-news-ticker-badge {
    font-size: 0.58rem;
    font-family: var(--mono, monospace);
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.08rem 0.32rem;
    letter-spacing: 0.02em;
    display: inline-block;
  }
  :root[data-theme="dark"] .markets-news-ticker-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
  }

  /* Grid vs List Card Modifiers */
  .markets-news-card--grid {
    padding: 0.85rem 0.95rem 0.80rem;
    gap: 0.55rem;
  }
  .markets-news-card--grid .markets-news-card__main-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.55rem;
  }
  .markets-news-card--grid .markets-news-card__thumb-wrap {
    width: 100%;
    height: 155px;
    border-radius: 12px;
  }
  @media (min-width: 640px) {
    .markets-news-card--grid {
      padding: 0.75rem 0.80rem 0.70rem;
      gap: 0.50rem;
    }
    .markets-news-card--grid .markets-news-card__thumb-wrap {
      height: 135px;
    }
    .markets-news-card--grid .markets-news-card__summary {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .markets-news-card--grid .markets-news-card__thumb-wrap {
      height: 140px;
    }
  }
  .markets-news-card--grid .markets-news-card__title {
    font-size: 0.92rem;
    line-height: 1.30;
    margin-bottom: 0.30rem;
    -webkit-line-clamp: 2;
  }
  @media (min-width: 640px) {
    .markets-news-card--grid .markets-news-card__title {
      font-size: 0.84rem;
      line-height: 1.28;
      margin-bottom: 0.25rem;
    }
  }
  .markets-news-card--grid .markets-news-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.76rem;
    line-height: 1.40;
    color: var(--muted);
    margin-bottom: 0;
  }
  /* List View: 2-Row Structural Wire Layout (Flush Top & Locked Baseline) */
  .markets-news-card--list {
    padding: 0.78rem 0.90rem 0.72rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: unset;
  }
  /* Row 1: Headline + Thumbnail (Title aligned to middle of thumbnail) */
  .markets-news-card--list .markets-news-card__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
  }
  .markets-news-card--list .markets-news-card__text-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .markets-news-card--list .markets-news-card__title {
    width: 100%;
    min-width: 0;
    font-size: 0.80rem;
    font-weight: 600;
    line-height: 1.38;
    color: var(--ink);
    margin: 0;
    padding-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .markets-news-card--list .markets-news-card__snippet {
    display: none;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--muted);
    margin: 0.22rem 0 0 0;
  }
  @media (min-width: 641px) {
    .markets-news-card--list .markets-news-card__snippet {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .markets-news-card--list .markets-news-card__thumb-wrap {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    flex-shrink: 0;
    margin: 0;
  }
  .markets-news-card--list .markets-news-card__thumb-fallback {
    font-size: 0.78rem;
  }
  /* Row 2: Shared Bottom Baseline (Metadata on Left, Bookmark on Right) */
  .markets-news-card--list .markets-news-card__bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.50rem;
    width: 100%;
  }
  .markets-news-card--list .markets-news-card__wire-meta {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .markets-news-card--list .markets-news-card__wire-meta .markets-news-card__source {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink);
  }
  .markets-news-card--list .markets-news-card__wire-meta .markets-news-tag {
    font-size: 0.52rem;
    padding: 0.08rem 0.38rem 0.06rem;
  }
  .markets-news-card--list .markets-news-bookmark-btn--wire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .markets-news-card--list .markets-news-bookmark-btn--wire:hover {
    color: var(--ink);
    transform: scale(1.1);
  }
  .markets-news-card--list .markets-news-bookmark-btn--wire.is-bookmarked {
    color: var(--gold);
  }
  .markets-news-card--list .markets-news-card__summary {
    display: none !important;
  }

  /* Filter Pills */
  /* Filter Pills - Option 1: Liquid Glass & Tonal Elevation Segmented Control */
  .markets-news-filters-wrap {
    position: relative;
    margin-bottom: 0.95rem;
    width: 100%;
  }
  .markets-news-filters {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(10, 10, 10,  0.045);
    border: 1px solid rgba(10, 10, 10,  0.06);
    border-radius: 999px;
    padding: 0.22rem 2.25rem 0.22rem 0.24rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    margin-bottom: 0;
    scroll-snap-type: x proximity;
    scroll-padding: 0.5rem;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10,  0.03);
  }
  :root[data-theme="dark"] .markets-news-filters {
    background: rgba(6, 10, 18, 0.55);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .markets-news-filters::-webkit-scrollbar {
    display: none;
  }
  .markets-news-filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.35rem 0.78rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }
  .markets-news-filter-btn:hover {
    color: var(--ink);
    background: rgba(10, 10, 10,  0.035);
  }
  :root[data-theme="dark"] .markets-news-filter-btn:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
  }
  .markets-news-filter-btn.active,
  :root[data-theme="light"] .markets-news-filter-btn.active {
    background: #FFFFFF;
    color: #0A0A0A;
    font-weight: 700;
    border-color: rgba(10, 10, 10,  0.09);
    box-shadow: 0 2px 6px rgba(10, 10, 10,  0.08), 0 1px 2px rgba(10, 10, 10,  0.04);
  }
  :root[data-theme="dark"] .markets-news-filter-btn.active {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F8FAFC;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.32);
  }

  /* Skeleton Loading in List & Grid */
  .markets-news-skeleton-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
  }
  .markets-news-skeleton-card--list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.15rem 1.25rem;
    gap: 1.15rem;
  }
  .markets-news-skeleton-card--list .markets-news-skeleton-body {
    flex: 1;
    min-width: 0;
  }
  .markets-news-skeleton-card--list .markets-news-skeleton-thumb {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    background: var(--rule);
    flex-shrink: 0;
    animation: newsSkeletonPulse 1.4s ease-in-out infinite;
  }
  .markets-news-skeleton-card--grid {
    display: flex;
    flex-direction: column;
  }
  .markets-news-skeleton-card--grid .markets-news-skeleton-cover {
    width: 100%;
    height: 160px;
    background: var(--rule);
    animation: newsSkeletonPulse 1.4s ease-in-out infinite;
  }
  .markets-news-skeleton-card--grid .markets-news-skeleton-body {
    padding: 1.15rem 1.25rem;
  }
  .markets-news-skeleton-meta {
    width: 35%;
    height: 10px;
    border-radius: 4px;
    background: var(--rule);
    margin-bottom: 0.65rem;
    animation: newsSkeletonPulse 1.4s ease-in-out infinite;
  }
  .markets-news-skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: var(--rule);
    margin-bottom: 0.5rem;
    animation: newsSkeletonPulse 1.4s ease-in-out infinite;
  }
  @keyframes newsSkeletonPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
  }

  /* In-App Executive News Detail Modal Sheet Cover */
  .markets-news-modal-cover-wrap {
    width: 100%;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--thumb-bg);
    border: 1px solid var(--rule);
  }
  .markets-news-modal-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Mobile Responsive Tweaks */
  @media (max-width: 640px) {
    .markets-news-list--grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.75rem;
    }
    .markets-news-card {
      padding: 0.80rem 0.88rem 0.72rem;
      gap: 0.65rem;
    }
    .markets-news-card--grid {
      padding: 0.85rem 0.92rem 0.80rem;
      gap: 0.55rem;
    }
    .markets-news-card--grid .markets-news-card__thumb-wrap {
      width: 100%;
      height: 155px;
      border-radius: 12px;
    }
    .markets-news-card--grid .markets-news-card__title {
      font-size: 0.92rem;
      line-height: 1.30;
      margin-bottom: 0.28rem;
    }
    .markets-news-card--grid .markets-news-card__summary {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75rem;
      line-height: 1.38;
      color: var(--muted);
      margin-bottom: 0;
    }
    .markets-news-card--grid .markets-news-card__footer {
      margin-top: 0.45rem;
    }
    .markets-news-card--grid .markets-news-tag {
      font-size: 0.56rem;
      padding: 0.12rem 0.42rem 0.10rem;
    }
    .markets-news-card--list {
      padding: 0.68rem 0.78rem 0.64rem;
      gap: 0.48rem;
    }
    .markets-news-card--list .markets-news-card__top-row {
      gap: 0.72rem;
      align-items: center;
    }
    .markets-news-card--list .markets-news-card__thumb-wrap {
      width: 58px;
      height: 58px;
      border-radius: 10px;
    }
    .markets-news-card--list .markets-news-card__title {
      font-size: 0.77rem;
      line-height: 1.38;
      margin: 0;
      padding-top: 0;
      -webkit-line-clamp: 2;
    }
    .markets-news-card--list .markets-news-card__wire-meta {
      font-size: 0.64rem;
      gap: 0.30rem;
    }
    .markets-news-card--list .markets-news-card__wire-meta .markets-news-card__source {
      font-size: 0.64rem;
    }
    .markets-news-card--list .markets-news-card__wire-meta .markets-news-tag {
      font-size: 0.54rem;
      padding: 0;
    }
    .markets-news-skeleton-card--list {
      padding: 0.68rem 0.78rem;
      gap: 0.72rem;
    }
    .markets-news-skeleton-card--list .markets-news-skeleton-thumb {
      width: 58px;
      height: 58px;
      border-radius: 10px;
    }
    .markets-news-skeleton-card--grid .markets-news-skeleton-cover {
      height: 155px;
    }
    .markets-news-skeleton-card--grid .markets-news-skeleton-body {
      padding: 1rem 1.05rem;
    }
    .markets-news-modal-cover-wrap {
      height: 150px;
      border-radius: 10px;
      margin-bottom: 0.85rem;
    }
  }

  /* In-App Executive News Detail Modal Sheet */
  .markets-news-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 10, 10,  0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeInModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-news-panel {
    background: var(--paper-raised);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 600px;
    padding: 1.25rem 1.4rem 2.2rem;
    border: 1px solid var(--rule);
    border-bottom: none;
    box-shadow: 0 -8px 32px rgba(10, 10, 10,  0.2);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .markets-news-sheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
    margin-top: 1.25rem;
  }
  .markets-news-sheet-btn:hover {
    opacity: 0.92;
  }
  .markets-news-sheet-btn--secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
    margin-top: 0;
  }
  .markets-news-sheet-btn--secondary:hover {
    background: var(--surface-raised);
    border-color: var(--muted);
  }
  :root[data-theme="dark"] .markets-news-sheet-btn--secondary {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.15);
  }
  :root[data-theme="dark"] .markets-news-sheet-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  /* ==========================================================================
     DATA INTELLIGENCE LAYER: DFI Flow Tracker & Decision Calendar
     ========================================================================== */
  .intel-scroll-container {
    padding: 1.15rem 1rem 5.5rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .intel-vintage-pill {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.28rem 0.65rem;
    border-radius: 12px;
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 67, 0.25);
    letter-spacing: 0.02em;
  }
  :root[data-theme="light"] .intel-vintage-pill {
    color: #8A6A1C;
    background: rgba(138, 106, 28, 0.08);
    border-color: rgba(138, 106, 28, 0.22);
  }

  .intel-hero-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 1.35rem 1.25rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.04);
  }
  :root[data-theme="dark"] .intel-hero-card {
    background: var(--surface);
    border-color: rgba(248, 250, 252, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .intel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
  }
  :root[data-theme="light"] .intel-eyebrow {
    color: #8A6A1C;
  }
  .intel-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .intel-headline-verdict {
    font-family: var(--serif);
    font-size: clamp(1.22rem, 4.4vw, 1.48rem);
    font-weight: 600;
    line-height: 1.32;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
    text-wrap: balance;
  }

  .intel-vintage-sub {
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--muted);
  }

  .intel-section {
    margin-bottom: 1.75rem;
  }

  .intel-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .intel-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 0.75rem;
  }
  .intel-section-header-row .intel-section-title {
    margin-bottom: 0;
  }

  .intel-badge-count {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  /* Executive Metrics Rows */
  .intel-metrics-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
  }
  :root[data-theme="dark"] .intel-metrics-list {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-metric-row {
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
  }
  :root[data-theme="dark"] .intel-metric-row {
    border-bottom-color: rgba(248, 250, 252, 0.08);
  }
  .intel-metric-row:last-child {
    border-bottom: none;
  }

  .intel-metric-row__label {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .intel-metric-row__val {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .intel-metric-row__sub {
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  /* Horizontal Instrument Mix Allocation Bar */
  .intel-instrument-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  :root[data-theme="dark"] .intel-instrument-card {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-bar-track {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.05);
    border: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .intel-bar-track {
    background: rgba(248, 250, 252, 0.06);
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-bar-segment {
    height: 100%;
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .intel-bar-debt {
    background: #3B82F6;
  }
  .intel-bar-equity {
    background: var(--gold);
  }
  :root[data-theme="light"] .intel-bar-equity {
    background: #8A6A1C;
  }
  .intel-bar-guarantee {
    background: #10B981;
  }

  .intel-bar-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.74rem;
  }

  .intel-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .intel-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .intel-legend-debt {
    background: #3B82F6;
  }
  .intel-legend-equity {
    background: var(--gold);
  }
  :root[data-theme="light"] .intel-legend-equity {
    background: #8A6A1C;
  }
  .intel-legend-guarantee {
    background: #10B981;
  }

  .intel-legend-name {
    color: var(--muted);
  }

  .intel-legend-pct {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .intel-legend-vol {
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
  }

  /* In The Room Prose */
  .intel-prose-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 1.15rem 1.25rem;
  }
  :root[data-theme="dark"] .intel-prose-card {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-prose {
    font-family: var(--sans);
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--ink);
    margin: 0;
  }
  :root[data-theme="dark"] .intel-prose {
    color: rgba(248, 250, 252, 0.88);
  }

  /* Decision Calendar */
  .intel-calendar-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .intel-calendar-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease;
  }
  :root[data-theme="dark"] .intel-calendar-row {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-calendar-date-box {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 48px;
    border-radius: 12px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--rule);
    font-family: var(--sans);
    text-align: center;
    padding: 0.2rem;
  }
  :root[data-theme="dark"] .intel-calendar-date-box {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-cal-date-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .intel-calendar-content {
    flex: 1;
    min-width: 0;
  }

  .intel-cal-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.22rem;
  }

  .intel-cal-title {
    font-family: var(--serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }

  .intel-cal-country {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
    flex-shrink: 0;
  }
  :root[data-theme="light"] .intel-cal-country {
    color: #8A6A1C;
  }

  .intel-cal-note {
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.44;
    color: var(--muted);
    margin: 0;
  }

  /* Deal Flow Registry */
  .intel-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
  }

  .intel-search-input {
    width: 100%;
    margin-bottom: 0;
  }

  /* Filter Dropdowns matching Markets Capsule Architecture */
  .intel-filter-dropdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .intel-dropdown {
    position: relative;
    display: flex;
    width: 100%;
  }

  .intel-dropdown-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
    outline: none;
  }
  :root[data-theme="dark"] .intel-dropdown-trigger {
    border-color: rgba(248, 250, 252, 0.12);
  }
  .intel-dropdown-trigger:hover {
    border-color: var(--border-strong);
  }
  .intel-dropdown-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  :root[data-theme="light"] .intel-dropdown-trigger:focus-visible {
    outline-color: #8A6A1C;
  }

  .intel-dropdown-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }

  .intel-dropdown-chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .intel-dropdown.is-open .intel-dropdown-chevron {
    transform: rotate(180deg);
  }

  /* Floating Frosted Glass Menu Capsule */
  .intel-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 185px;
    max-height: 240px;
    overflow-y: auto;
    background: #0D1117;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 0.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    animation: overviewMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :root[data-theme="light"] .intel-dropdown-menu {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.09);
    box-shadow: 0 14px 32px rgba(10, 10, 10, 0.12), 0 2px 6px rgba(10, 10, 10, 0.04);
  }

  .intel-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.52rem 0.65rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: #8B949E;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    user-select: none;
    outline: none;
  }
  :root[data-theme="light"] .intel-dropdown-item {
    color: #5E697E;
  }
  .intel-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
  }
  :root[data-theme="light"] .intel-dropdown-item:hover {
    background: rgba(10, 10, 10, 0.04);
    color: #0A0A0A;
  }
  .intel-dropdown-item.active {
    color: #FFFFFF;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
  }
  :root[data-theme="light"] .intel-dropdown-item.active {
    color: #0A0A0A;
    background: rgba(10, 10, 10, 0.05);
  }

  .intel-dropdown-item-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .intel-dropdown-check {
    display: none;
    color: var(--gold);
    flex-shrink: 0;
  }
  :root[data-theme="light"] .intel-dropdown-check {
    color: #8A6A1C;
  }
  .intel-dropdown-item.active .intel-dropdown-check {
    display: inline-block;
  }

  .intel-deals-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.15rem;
  }

  .intel-deal-row {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  :root[data-theme="dark"] .intel-deal-row {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .intel-deal-main {
    flex: 1;
    min-width: 0;
  }

  .intel-deal-sponsor-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
  }

  .intel-deal-sponsor {
    font-family: var(--serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .intel-deal-repeat-tag {
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
    text-transform: uppercase;
  }
  :root[data-theme="light"] .intel-deal-repeat-tag {
    color: #8A6A1C;
  }

  .intel-deal-meta {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .intel-deal-side {
    text-align: right;
    flex-shrink: 0;
  }

  .intel-deal-ticket {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .intel-deal-instrument {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
  }

  /* Provenance Footer */
  .intel-provenance-box {
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  :root[data-theme="dark"] .intel-provenance-box {
    border-top-color: rgba(248, 250, 252, 0.08);
  }

  .intel-provenance-line {
    font-family: var(--sans);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* =========================================================================
     The Real Return Lens (Markets Flagship - Dataset 4)
     ========================================================================= */
  .markets-real-return-card {
    border-radius: var(--r-card);
    border: 1px solid var(--rule);
    padding: 1.25rem 1.15rem;
    margin-bottom: 2rem;
    position: relative;
  }
  :root[data-theme="dark"] .markets-real-return-card {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .markets-real-return-header {
    margin-bottom: 1.15rem;
  }

  .markets-real-return-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
  }
  :root[data-theme="light"] .markets-real-return-eyebrow {
    color: #8A6A1C;
  }

  .markets-real-return-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  .markets-real-return-headline {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 3.8vw, 1.28rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.45rem 0;
  }

  .markets-real-return-sub {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.45;
  }

  .markets-real-return-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
    flex-wrap: wrap;
  }

  .markets-real-return-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.05);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 2px;
  }
  :root[data-theme="dark"] .markets-real-return-toggle {
    background: rgba(248, 250, 252, 0.05);
    border-color: rgba(248, 250, 252, 0.1);
  }

  .markets-real-return-btn {
    padding: 0.32rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .markets-real-return-btn.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  :root[data-theme="dark"] .markets-real-return-btn.is-active {
    background: rgba(248, 250, 252, 0.15);
    color: #F8FAFC;
  }

  .markets-real-return-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.76rem;
  }

  .markets-real-return-sort-label {
    color: var(--muted);
    font-weight: 500;
  }

  .markets-real-return-sort-select {
    padding: 0.32rem 1.6rem 0.32rem 0.65rem;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
  }
  :root[data-theme="dark"] .markets-real-return-sort-select {
    border-color: rgba(248, 250, 252, 0.12);
  }

  .markets-real-return-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--surface);
  }
  :root[data-theme="dark"] .markets-real-return-table-wrap {
    border-color: rgba(248, 250, 252, 0.08);
  }

  .markets-real-return-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-family: var(--sans);
    text-align: left;
  }

  .markets-real-return-table th {
    padding: 0.65rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    background: rgba(10, 10, 10, 0.02);
  }
  :root[data-theme="dark"] .markets-real-return-table th {
    background: rgba(248, 250, 252, 0.02);
    border-bottom-color: rgba(248, 250, 252, 0.08);
  }

  .rrt-col-econ {
    text-align: left;
    min-width: 105px;
  }
  .rrt-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .rrt-col-drag {
    font-weight: 700;
  }

  .rrt-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .rrt-row {
    border-bottom-color: rgba(248, 250, 252, 0.06);
  }
  .rrt-row:last-child {
    border-bottom: none;
  }
  .rrt-row:hover {
    background: rgba(10, 10, 10, 0.03);
  }
  :root[data-theme="dark"] .rrt-row:hover {
    background: rgba(248, 250, 252, 0.04);
  }

  .markets-real-return-table td {
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--ink);
  }

  .rrt-econ-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .rrt-econ-name {
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .rrt-econ-idx {
    font-size: 0.68rem;
    color: var(--muted);
    white-space: nowrap;
  }

  .rrt-val-positive {
    color: #10B981;
    font-variant-numeric: tabular-nums;
  }
  .rrt-val-negative {
    color: #F43F5E;
    font-variant-numeric: tabular-nums;
  }
  .rrt-val-drag {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #F43F5E;
  }
  .rrt-val-drag.is-boost {
    color: #10B981;
  }

  .markets-real-return-footer {
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule);
  }
  :root[data-theme="dark"] .markets-real-return-footer {
    border-top-color: rgba(248, 250, 252, 0.08);
  }

  .markets-real-return-note {
    font-family: var(--sans);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* Modal Details */
  .markets-real-return-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-bottom: 1.15rem;
  }

  .markets-real-return-modal-stat {
    background: rgba(10, 10, 10, 0.03);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.65rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  :root[data-theme="dark"] .markets-real-return-modal-stat {
    background: rgba(248, 250, 252, 0.04);
    border-color: rgba(248, 250, 252, 0.1);
  }

  .markets-real-return-chart-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.15rem;
  }
  :root[data-theme="dark"] .markets-real-return-chart-card {
    border-color: rgba(248, 250, 252, 0.1);
  }

  .markets-chart-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    font-family: var(--sans);
    font-size: 0.75rem;
  }

  .markets-chart-title {
    font-weight: 600;
    color: var(--ink);
  }

  .markets-chart-legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--muted);
  }

  .rrt-legend-local, .rrt-legend-dollar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .rrt-legend-local .rrt-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3B82F6;
  }
  .rrt-legend-dollar .rrt-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
  }
  :root[data-theme="light"] .rrt-legend-dollar .rrt-legend-dot {
    background: #8A6A1C;
  }

  .markets-real-return-svg {
    width: 100%;
    height: 120px;
    display: block;
  }