/* US Market component layer, design system v2 「掌上 × 研報」 (DESIGN.md, 2026-11-07). Load last.
   Applies the shared shell and component rules on top of usmarket.css. Page-specific restyling comes in later batches.
   !important is limited to properties that page-specific rules in usmarket.css override. */

/* ---------- Base ---------- */
body {
    font-family: var(--ds-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Numbers line up in tables and KPI tiles. */
:where(table, .kpi, [class*="kpi"], [class*="metric"]) {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus is always visible. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-interactive);
    outline-offset: 2px;
}

/* ---------- Header (掌上) ---------- */
.usm-nav {
    background: color-mix(in srgb, var(--ds-background) 86%, transparent);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ds-border) 70%, transparent);
}

.usm-nav-links a,
.usm-nav-trigger,
.text-btn {
    border-radius: var(--ds-radius-full);
    font-weight: 600;
}

.usm-nav-links a[aria-current="page"],
.usm-nav-group.is-current .usm-nav-trigger {
    background: var(--ds-surface);
    color: var(--ds-on-surface);
    box-shadow: var(--ds-shadow-card);
}

.usm-nav-menu {
    border-color: transparent;
    border-radius: var(--ds-radius-card-sm);
    box-shadow: var(--ds-shadow-overlay);
    padding: 8px;
}

.usm-nav-menu a {
    border-radius: 12px;
}

.icon-btn {
    border-radius: var(--ds-radius-full);
    border-color: transparent;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-card);
}

.lang-pill {
    border-radius: var(--ds-radius-full);
    font-weight: 700;
}

.usm-footer {
    color: var(--ds-muted);
}

/* ---------- Phone tab bar: keep the floating round button and notch; the button is flat violet ---------- */
@media (max-width: 640px) {
    body[data-authenticated="true"] .usm-mobile-bottom-nav,
    html[data-theme="dark"] body[data-authenticated="true"] .usm-mobile-bottom-nav {
        --usm-tab-fab-shadow: color-mix(in srgb, var(--ds-primary) 38%, transparent);
    }

    .usm-tab-fab {
        background: var(--ds-primary) !important;
        box-shadow: 0 10px 22px var(--usm-tab-fab-shadow), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    }

    .usm-tab-fab::after {
        display: none;
    }

    .usm-tab-fab-icon {
        fill: var(--ds-on-primary) !important;
    }

    body[data-authenticated="true"] .usm-mobile-bottom-nav a.is-active {
        color: var(--ds-interactive);
    }

    .usm-tab-label {
        font-weight: 600;
    }
}

/* ---------- Buttons: pills ---------- */
.command-btn,
.advisor-btn,
.quote-submit-btn,
.terms-search-control,
.fcn-detail-primary-action,
.usm-google-button,
[class*="-refresh-button"],
[class*="-cta"]:where(a, button) {
    border-radius: var(--ds-radius-full) !important;
    font-weight: 700;
    transition: transform var(--ds-dur-fast) var(--ds-ease-spring), background-color 0.15s ease, color 0.15s ease;
}

:where(.command-btn, .advisor-btn, .quote-submit-btn, .terms-search-control, .fcn-detail-primary-action, [class*="-refresh-button"]):not([disabled]):active {
    transform: scale(0.97);
}

/* One primary per screen: violet. */
.terms-search-control,
.quote-submit-btn,
.command-btn.primary,
.fcn-detail-primary-action {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
    border-color: var(--ds-primary) !important;
}

.terms-search-control:hover,
.quote-submit-btn:hover,
.command-btn.primary:hover,
.fcn-detail-primary-action:hover {
    background: var(--ds-primary-hover) !important;
}

/* Secondary buttons: soft violet, no outline. */
.command-btn:not(.primary):not(.ghost) {
    background: var(--ds-accent-soft);
    color: var(--ds-on-accent-soft);
    border-color: transparent;
}

/* ---------- Chips and badges: pills ---------- */
.status-pill,
.risk-badge,
.ticker-chip,
.run-chip,
.fcn-hot-chip,
.quote-quality-badge,
.analyst-consensus-pill,
.usm-macro-indicator-pill,
.fcn-promo-tag {
    border-radius: var(--ds-radius-full) !important;
    font-weight: 700;
}

.ticker-chip {
    border-color: transparent;
    background: var(--ds-accent-soft);
    color: var(--ds-on-accent-soft);
}

/* ---------- Segmented options (FCN strategy and opportunity tabs) ---------- */
.risk-mode-tab {
    background: var(--ds-surface) !important;
    color: var(--ds-on-surface) !important;
    border-color: transparent !important;
    border-radius: var(--ds-radius-full) !important;
    box-shadow: var(--ds-shadow-card) !important;
    transition: background-color var(--ds-dur-fast) ease, color var(--ds-dur-fast) ease, transform var(--ds-dur-fast) var(--ds-ease-spring);
}

.risk-mode-tab i {
    color: inherit !important;
}

.risk-mode-tab::before {
    display: none !important;
}

.risk-mode-tab:hover {
    background: var(--ds-surface-2) !important;
}

.risk-mode-tab.is-active,
.risk-mode-tab[aria-pressed="true"] {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
}

/* ---------- Cards (掌上): one rounded surface on a soft shadow, no outline, no top rail ---------- */
.media-front-block,
.bright-terminal-strip,
.media-masthead,
.media-latest-panel,
.media-rail-card,
.analyst-summary-card,
.results-panel,
.fcn-detail-panel,
.advisor-action-card,
.advisor-entry-panel,
.stock-research-summary-card,
.quote-internal-card,
.usm-auth-card,
.usm-login-card,
.usm-consent-card,
.usm-info-card,
.usm-home-entry-card,
.usm-tool-card,
.usm-tools-example-card,
.usm-fb-rail-card,
.usm-check-panel,
.tenk-card,
.ticker-card,
.media-fcn-card,
.fcn-locked-card,
.top-movers-locked-panel,
.stock-research-locked-value-panel,
.market-table-shell,
.media-table-shell,
.table-shell {
    border-color: transparent !important;
    border-width: 1px !important;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-card) !important;
}

/* No decorative rails: page-top bars and coloured left edges on cards (DESIGN.md Don'ts). */
.media-rail-card::before,
.media-front-block::before,
.market-home::before,
.market-media-page::before,
.market-desk::before,
.workbench-hero::before,
.fcn-media-masthead::before {
    display: none !important;
}

.media-tape-item,
.media-session-card,
.movers-brief {
    border-left-width: 1px !important;
    border-left-color: transparent !important;
}

/* ---------- Tables: quiet header, violet hover ---------- */
.market-table th,
.fcn-table th,
.media-market-table th,
.movers-context-table th {
    background: transparent;
    color: var(--ds-muted);
    font-weight: 600;
    text-transform: none;
}

.market-table tbody tr:hover > td,
.fcn-table tbody tr:hover > td,
.media-market-table tbody tr:hover > td,
.movers-context-table tbody tr:hover > td {
    background: var(--ds-accent-soft);
}

/* Model yields are figures, not price moves: always ink (DESIGN.md Colors). */
.fcn-semantic-yield,
.fcn-screener-workbench .fcn-table .yield-text {
    color: var(--ds-on-surface) !important;
}

/* ---------- Dialogs and drawers ---------- */
.usm-feedback-dialog,
.analyst-login-modal,
.analyst-detail-modal,
.fcn-login-modal,
.tenk-modal,
.fcn-subscribe-confirm,
.advisor-crm-drawer {
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-overlay) !important;
}

/* ---------- Editorial (研報): news and article blocks opt in with .ds-editorial ---------- */
.ds-editorial {
    background: var(--ds-paper);
    border-radius: var(--ds-radius-card);
}

.ds-editorial :where(h1, h2, h3, .ds-headline) {
    font-family: var(--ds-font-serif);
    font-weight: 700;
    text-wrap: balance;
}

.ds-editorial .ds-rule-label {
    border-top: 2px solid var(--ds-rule);
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ds-editorial mark,
.ds-mark {
    background: linear-gradient(transparent 50%, var(--ds-marker) 50%, var(--ds-marker) 92%, transparent 92%);
    color: inherit;
    padding: 0 0.06em;
}

html[data-theme="dark"] .ds-editorial mark,
html[data-theme="dark"] .ds-mark {
    background: var(--ds-marker);
    color: var(--ds-on-marker);
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :where(.command-btn, .advisor-btn, .quote-submit-btn, .risk-mode-tab, [class*="-refresh-button"]) {
        transition: none !important;
    }
}

/* ---------- Home: market news and trending analysis use the editorial treatment (研報) ---------- */
.ds-editorial.media-front-block {
    box-shadow: 0 0 0 1px var(--ds-border) !important;
    padding: 6px 22px 22px;
}

html[data-theme="dark"] .ds-editorial.media-front-block {
    box-shadow: none !important;
}

.ds-editorial .media-section-title {
    border-bottom: 0 !important;
    border-top: 2px solid var(--ds-rule) !important;
    margin-top: 16px;
    padding: 8px 0 12px !important;
    background: transparent !important;
}

.ds-editorial .media-section-title.is-row {
    align-items: baseline;
}

.ds-editorial .media-section-title p {
    margin: 0;
    color: var(--ds-on-surface);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ds-editorial .media-section-title h2 {
    font-family: var(--ds-font-sans);
    color: var(--ds-muted);
    font-size: 13px;
    font-weight: 500;
}

.ds-editorial .media-lead-layout {
    gap: 24px;
}

.ds-editorial .media-lead-story {
    border-right: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
    align-content: start;
}

.ds-editorial .media-lead-story h3 {
    font-family: var(--ds-font-serif);
    font-weight: 700;
    font-size: clamp(22px, 2.3vw, 28px);
    line-height: 1.35;
    letter-spacing: 0;
}

.ds-editorial .media-latest-panel {
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ds-editorial .media-subhead {
    background: transparent !important;
    border-bottom: 1px solid var(--ds-border);
    padding: 0;
}

.ds-editorial .media-news-line {
    padding: 12px 0;
    border-bottom: 1px solid var(--ds-border);
}

.ds-editorial .media-news-line-copy h3 {
    font-family: var(--ds-font-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.45;
}

.ds-editorial .media-analysis-grid {
    column-gap: 28px;
}

.ds-editorial .media-analysis-card {
    border-left: 0;
    border-top: 1px solid var(--ds-border);
    padding: 14px 0 16px;
    min-height: 0;
}

.ds-editorial .media-analysis-card h3 {
    font-family: var(--ds-font-serif);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.45;
}

.ds-editorial :where(.media-lead-story, .media-news-line, .media-analysis-card) img {
    border-radius: var(--ds-radius-img);
}

/* The featured tool card sits inside a card: no second surface and no top rail. */
.media-tool-rail .media-tool-card {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ---------- Article pages (研報): /analysis, daily and topic articles, methodology, about ----------
   The page is one sheet of paper: no cards, a serif headline, a 2px rule opens each section, hairlines separate rows,
   tables have square corners. Reading pages (.ds-article-reading) keep one centred column. Motion: none. */
body:has(.ds-article) {
    background: var(--ds-paper) !important;
}

.ds-editorial.ds-article {
    --media-bg: var(--ds-paper) !important;
    --media-surface: var(--ds-paper) !important;
    --media-surface-soft: var(--ds-paper) !important;
    --media-text: var(--ds-on-surface) !important;
    --media-muted: var(--ds-muted) !important;
    --media-border: var(--ds-border) !important;
    --media-border-strong: var(--ds-border-strong) !important;
    background: var(--ds-paper);
    border-radius: 0;
    padding-inline: clamp(8px, 2.2vw, 28px);
    padding-bottom: 56px;
}

.ds-article-reading > * {
    max-width: 760px;
    margin-inline: auto !important;
    width: 100%;
}

/* Masthead: rule label, serif headline, lede, plain byline. */
.ds-article .media-masthead {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 36px 0 24px !important;
}

.ds-article .bright-info-copy {
    gap: 14px;
}

.ds-article .media-kicker {
    display: inline-block;
    justify-self: start;
    border-top: 2px solid var(--ds-rule);
    padding-top: 8px;
    color: var(--ds-on-surface);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ds-article .media-kicker::before {
    display: none;
}

.ds-article .bright-info-copy h1,
.ds-article .bright-info-copy h1.usm-topic-title {
    font-family: var(--ds-font-serif);
    font-size: clamp(28px, 3.1vw, 42px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0;
    max-width: 22em;
    text-wrap: balance;
}

.ds-article .media-masthead p.media-lede {
    color: var(--ds-muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 40em;
    margin: 0;
}

.ds-article .bright-info-meta {
    gap: 6px 18px;
}

.ds-article .bright-info-meta span {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    min-height: 0;
    padding: 0;
    color: var(--ds-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Section links: a quiet row between two hairlines. */
.ds-article .media-topic-nav {
    background: transparent;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    gap: 22px;
    padding: 0;
}

.ds-article .media-topic-nav a {
    color: var(--ds-muted);
    font-size: 14px;
    padding: 12px 0;
    text-decoration: none;
}

.ds-article .media-topic-nav a:hover,
.ds-article .media-topic-nav a:focus-visible {
    border-color: var(--ds-rule);
    color: var(--ds-on-surface);
}

@media (max-width: 640px) {
    .ds-article .media-topic-nav {
        gap: 0 18px;
    }

    .ds-article .media-topic-nav a {
        padding: 10px 0;
    }
}

/* Body: flat paper, no card. */
.ds-article .media-front-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 0 !important;
}

.ds-article .media-section-title {
    margin-top: 0;
    padding: 10px 0 0 !important;
}

.ds-article .media-section-title h2 {
    font-family: var(--ds-font-serif);
    color: var(--ds-on-surface);
    font-size: clamp(21px, 2vw, 25px);
    font-weight: 700;
    line-height: 1.4;
    margin-top: 6px;
}

.ds-article .usm-seo-content .usm-seo-topic {
    border-top: 0;
    gap: 16px;
    padding-top: 0;
    margin-top: 40px;
}

.ds-article .usm-seo-content > .media-section-title:first-child {
    display: none;
}

.ds-article .usm-seo-topic > p,
.ds-article .usm-topic-section > p,
.ds-article .usm-daily-article p {
    color: var(--ds-on-surface);
    font-size: 16.5px;
    line-height: 1.9;
    max-width: 42em;
}

/* Guide grids (topic lists, methodology points): hairline rows, no column rules. */
.ds-article .media-guide-grid {
    column-gap: 32px;
}

.ds-article-reading .media-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-article .media-guide-grid article {
    border-left: 0 !important;
    border-top: 1px solid var(--ds-border);
    padding: 14px 0 18px;
}

.ds-article .media-guide-grid strong {
    color: var(--ds-on-surface);
    font-size: 15px;
    margin-bottom: 6px;
}

.ds-article .media-guide-grid strong:has(a) {
    font-family: var(--ds-font-serif);
    font-size: 17px;
    line-height: 1.45;
}

.ds-article .media-guide-grid strong a {
    color: var(--ds-on-surface);
    text-decoration: none;
}

.ds-article .media-guide-grid strong a:hover,
.ds-article .media-guide-grid strong a:focus-visible {
    color: var(--ds-interactive);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ds-article .media-guide-grid p {
    color: var(--ds-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* Actions: pills; the today link on /analysis is the page's one primary. Dark-theme shell rules are more specific,
   so colours carry !important. */
.ds-article .bright-briefing-actions {
    gap: 8px;
    margin: 6px 0 4px;
}

.ds-article .bright-briefing-actions a,
.ds-article .bright-briefing-actions a:first-child {
    background: var(--ds-accent-soft) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-full);
    color: var(--ds-on-accent-soft) !important;
    font-size: 14px;
    font-weight: 700;
    min-height: 40px;
    padding: 8px 16px;
    text-decoration: none;
}

.ds-article .bright-briefing-actions a:hover,
.ds-article .bright-briefing-actions a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ds-article [data-today-archive] .bright-briefing-actions a:first-child {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
}

.ds-article [data-today-archive] .bright-briefing-actions a:first-child:hover {
    background: var(--ds-primary-hover) !important;
}

/* Daily archive: a plain list of dates, not buttons. */
.ds-article .bright-briefing-actions[aria-label="每日文章歸檔"] {
    gap: 0 28px;
}

.ds-article .bright-briefing-actions[aria-label="每日文章歸檔"] a,
.ds-article .bright-briefing-actions[aria-label="每日文章歸檔"] a:first-child {
    background: transparent !important;
    border-radius: 0;
    color: var(--ds-on-surface) !important;
    font-weight: 600;
    padding: 6px 0;
}

/* Topic article: direct answer, sections, tables, points, FAQ, related links. */
.ds-article .usm-topic-article {
    gap: 36px;
    padding: 8px 0 0 !important;
}

.ds-article .usm-topic-article > * {
    max-width: none;
}

.ds-article .usm-topic-answer {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    border-top: 2px solid var(--ds-rule);
    border-bottom: 1px solid var(--ds-border);
    gap: 8px;
    padding: 12px 0 20px;
}

.ds-article .usm-topic-answer strong {
    color: var(--ds-on-surface);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.ds-article .usm-topic-answer p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.85;
}

.ds-article .usm-topic-section {
    border-top: 0;
    gap: 16px;
    padding-top: 0;
}

.ds-article .usm-topic-section h2,
.ds-article .usm-daily-article h2 {
    font-family: var(--ds-font-serif);
    color: var(--ds-on-surface);
    font-size: clamp(22px, 2.1vw, 26px);
    font-weight: 700;
    line-height: 1.4;
}

.ds-article .usm-topic-table figcaption,
.ds-article .usm-daily-table caption {
    color: var(--ds-on-surface);
    font-size: 14px;
    font-weight: 700;
    padding: 0 0 8px;
}

.ds-article .usm-topic-table__scroll,
.ds-article .usm-daily-table {
    border: 0;
    border-top: 2px solid var(--ds-rule);
    border-bottom: 1px solid var(--ds-rule);
    border-radius: 0;
}

.ds-article .usm-daily-table:has(caption) {
    border-top: 0;
}

.ds-article .usm-daily-table caption + thead th {
    border-top: 2px solid var(--ds-rule);
}

.ds-article .usm-topic-table thead th,
.ds-article .usm-daily-table thead th {
    background: transparent;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-article .usm-topic-table th,
.ds-article .usm-topic-table td,
.ds-article .usm-daily-table th,
.ds-article .usm-daily-table td {
    padding: 11px 12px;
    font-variant-numeric: tabular-nums;
}

.ds-article .usm-topic-table :where(th, td):first-child,
.ds-article .usm-daily-table :where(th, td):first-child {
    padding-left: 0;
}

.ds-article .usm-topic-table :where(th, td):last-child,
.ds-article .usm-daily-table :where(th, td):last-child {
    padding-right: 0;
}

.ds-article .usm-topic-table__note,
.ds-article .usm-daily-note {
    font-size: 12.5px;
}

.ds-article .usm-topic-points {
    column-gap: 32px;
}

.ds-article .usm-topic-points div {
    border-top: 1px solid var(--ds-border);
    padding: 14px 0 16px;
}

.ds-article .usm-topic-points dt {
    color: var(--ds-on-surface);
    font-size: 15px;
    font-weight: 700;
}

.ds-article .usm-topic-points dd {
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

.ds-article .usm-topic-faq {
    gap: 0;
    border-bottom: 1px solid var(--ds-border);
}

.ds-article .usm-topic-faq details {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ds-border);
    border-radius: 0;
}

.ds-article .usm-topic-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    min-height: 54px;
    padding: 12px 0;
    color: var(--ds-on-surface);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.ds-article .usm-topic-faq summary::-webkit-details-marker {
    display: none;
}

.ds-article .usm-topic-faq summary::after {
    content: "+";
    flex: none;
    color: var(--ds-muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.ds-article .usm-topic-faq details[open] summary::after {
    content: "\2212";
}

.ds-article .usm-topic-faq p {
    color: var(--ds-on-surface);
    font-size: 15.5px;
    line-height: 1.85;
    padding: 0 0 18px;
}

.ds-article .usm-topic-related {
    column-gap: 32px;
    row-gap: 0;
}

.ds-article .usm-topic-related a {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ds-border);
    border-radius: 0;
    padding: 14px 0 16px;
    text-decoration: none;
}

.ds-article .usm-topic-related strong {
    color: var(--ds-on-surface);
    font-size: 15px;
}

.ds-article .usm-topic-related a:hover strong,
.ds-article .usm-topic-related a:focus-visible strong {
    color: var(--ds-interactive);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ds-article .usm-topic-related span {
    color: var(--ds-muted);
}

.ds-article .usm-topic-disclaimer {
    border-top: 1px solid var(--ds-border);
    padding-top: 16px;
    font-size: 12.5px;
}

/* Daily article byline. */
.ds-article .usm-article-trust-panel {
    gap: 6px 22px;
    border-bottom: 1px solid var(--ds-border);
    padding: 4px 0 14px;
}

.ds-article .usm-article-trust-panel span {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-article .usm-article-trust-panel strong {
    color: var(--ds-on-surface);
}

.ds-article .usm-daily-article section {
    gap: 14px;
    margin-bottom: 40px;
}

.ds-article .usm-seo-article-content a,
.ds-article .usm-topic-section a,
.ds-article .usm-topic-disclaimer a {
    color: var(--ds-interactive);
    text-underline-offset: 3px;
}

/* ---------- Market pages (掌上): top movers, analyst recommendations, stock research ----------
   Scope: .market-information-shell (exactly these three templates). The title sits on the page like an app screen;
   one violet primary per screen (search); refresh and filters are soft pills; tables have a quiet header; no rails.
   Several page rules (and their dark-theme twins) are more specific than this layer, so colours carry !important. */
.market-information-shell .media-masthead {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 20px 4px 8px !important;
}

.market-information-shell .media-kicker {
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.market-information-shell .media-kicker::before {
    display: none;
}

.market-information-shell .media-masthead h1 {
    color: var(--ds-on-surface);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.market-information-shell .media-refresh-panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Status chips: a soft fill, no outline; warning is amber, not red. */
.market-information-shell .status-pill {
    border-color: transparent !important;
    background: var(--ds-surface-2) !important;
    color: var(--ds-muted) !important;
}

.market-information-shell .status-pill.success {
    background: var(--ds-risk-low-soft) !important;
    color: var(--ds-risk-low) !important;
}

.market-information-shell .status-pill.warning {
    background: var(--ds-risk-medium-soft) !important;
    color: var(--ds-risk-medium) !important;
}

/* Buttons: refresh is a soft pill, search is the screen's primary, ghost is a quiet surface pill. */
.market-information-shell .media-refresh-button {
    background: var(--ds-accent-soft) !important;
    border-color: transparent !important;
    color: var(--ds-on-accent-soft) !important;
    box-shadow: none !important;
}

.market-information-shell .media-refresh-button:hover {
    background: var(--ds-interactive-soft) !important;
}

.market-information-shell .media-refresh-button.is-ghost {
    background: var(--ds-surface-2) !important;
    color: var(--ds-on-surface) !important;
}

.market-information-shell .stock-research-search-button,
.market-information-shell .analyst-search-form button[type="submit"] {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
}

.market-information-shell .stock-research-search-button:hover,
.market-information-shell .analyst-search-form button[type="submit"]:hover {
    background: var(--ds-primary-hover) !important;
}

.market-information-shell .analyst-search-form label {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-on-accent-soft) !important;
    border-radius: var(--ds-radius-full) !important;
}

.market-information-shell .analyst-source-note {
    border-color: transparent !important;
}

/* Filter chips and research tabs: surface pills, the active one violet. */
.market-information-shell .market-tab,
.market-information-shell .stock-research-tab {
    background: var(--ds-surface-2) !important;
    border-color: transparent !important;
    border-radius: var(--ds-radius-full) !important;
    box-shadow: none !important;
    color: var(--ds-on-surface) !important;
    font-weight: 600;
    transition: background-color var(--ds-dur-fast) ease, color var(--ds-dur-fast) ease, transform var(--ds-dur-fast) var(--ds-ease-spring);
}

.market-information-shell .market-tab:hover,
.market-information-shell .stock-research-tab:hover {
    background: var(--ds-accent-soft) !important;
}

.market-information-shell .market-tab:active,
.market-information-shell .stock-research-tab:active {
    transform: scale(0.97);
}

.market-information-shell .market-tab.active,
.market-information-shell .stock-research-tab.is-active {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
}

.market-information-shell .stock-research-tab-list {
    background: transparent !important;
    border-color: transparent !important;
}

/* Scope switch (大型股／全市場): a segmented track with a raised white choice. */
.market-information-shell .movers-scope {
    background: var(--ds-surface-2) !important;
    border-color: transparent !important;
    border-radius: 18px !important;
    padding: 4px;
}

.market-information-shell .movers-scope-button {
    border-radius: 14px !important;
}

.market-information-shell .movers-scope-button.active {
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-card) !important;
}

/* Movers summary: four separate cards instead of one boxed strip. */
.market-information-shell .media-mover-summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 12px;
}

.market-information-shell .media-mover-summary-card {
    background: var(--ds-surface) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-card-sm) !important;
    box-shadow: var(--ds-shadow-card) !important;
    padding: 16px 18px !important;
}

/* Section headings: no tinted band. */
.market-information-shell .media-section-title {
    background: transparent !important;
}

/* Tables: quiet header on the card surface (it stays opaque when the header sticks). */
.market-information-shell .market-table thead th {
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    color: var(--ds-muted) !important;
    font-weight: 600;
}

.market-information-shell .market-table thead th :where(button, a, span, i, svg) {
    color: inherit !important;
}

/* A table inside a card is not a second card. */
.market-information-shell .media-table-block .market-table-shell {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.market-information-shell .mover-heat-tile {
    border-radius: var(--ds-radius-md);
}

/* Stock research: no left rail on the conclusion, a soft ticker chip, an amber data note. */
.market-information-shell .stock-research-conclusion {
    border: 0 !important;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-card) !important;
}

.market-information-shell .stock-research-terminal-ticker-chip {
    background: var(--ds-accent-soft) !important;
    border-color: transparent !important;
    border-radius: var(--ds-radius-full) !important;
    color: var(--ds-on-accent-soft) !important;
}

.market-information-shell .stock-research-warning-notice {
    background: var(--ds-risk-medium-soft) !important;
    border-color: transparent !important;
}

/* App pages sit on the soft page background so white cards float; every block is a plain card surface. */
body:has(.market-information-shell) {
    background: var(--ds-background) !important;
}

.market-information-shell {
    --media-bg: var(--ds-background) !important;
    --media-surface-soft: var(--ds-surface-2) !important;
}

.market-information-shell .media-front-block,
.market-information-shell .movers-brief {
    background: var(--ds-surface) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: var(--ds-shadow-card) !important;
}

.market-information-shell .analyst-search-form,
.market-information-shell .stock-research-form {
    border-color: var(--ds-border) !important;
}

/* ---------- FCN pages and the advisor workbench (掌上) ----------
   The advisor sidebar was navy in v1; on the v2 violet its muted labels were unreadable in both themes. It is now a
   white card: ink labels, the current item on a soft violet pill, the QL mark in violet. */
.advisor-orders-sidebar {
    background: var(--ds-surface) !important;
    color: var(--ds-on-surface) !important;
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
}

.advisor-orders-brand > span {
    background: var(--ds-primary) !important;
    color: var(--ds-on-primary) !important;
    border-radius: 12px;
}

.advisor-orders-brand strong {
    color: var(--ds-on-surface) !important;
}

.advisor-orders-brand small {
    color: var(--ds-muted) !important;
}

.advisor-orders-sidebar a {
    color: var(--ds-muted) !important;
    border-radius: var(--ds-radius-full);
}

.advisor-orders-sidebar a:hover {
    background: var(--ds-surface-2) !important;
    color: var(--ds-on-surface) !important;
}

.advisor-orders-sidebar a.is-active {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-on-accent-soft) !important;
}

/* Advisor landing: the priority list keeps its coloured labels, without the left rails. */
.fcn-advisor-landing-priority-list li {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* FCN pages: the page chip is a soft violet label, not an outlined tag. */
.fcn-media-workbench .fcn-media-masthead .media-kicker,
.fcn-media-workbench .fcn-media-masthead [class*="eyebrow"] {
    background: var(--ds-accent-soft);
    border-color: transparent !important;
    color: var(--ds-on-accent-soft) !important;
}

/* Desktop: the sidebar card is as tall as its links and stays in view while the workbench scrolls. */
@media (min-width: 1121px) {
    .advisor-orders-sidebar {
        align-self: start;
        min-height: 0 !important;
        position: sticky;
        top: 84px;
    }
}

/* ---------- Learn, tools, auth, comments, admin, plus site-wide label cleanups ----------
   Kickers lose the leading dash (no decorative rules); small uppercase eyebrows are muted labels, not the teal that
   means "low risk"; the admin header loses its 5px top rail; the text-only brand mark on sign-in is violet. */
.media-kicker::before {
    display: none !important;
}

.media-kicker {
    font-weight: 700;
}

.eyebrow {
    color: var(--ds-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.usm-admin-hero {
    background: var(--ds-surface) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-card) !important;
}

.usm-brand-mark:not(:has(img)) {
    background: var(--ds-primary);
    color: var(--ds-on-primary);
}

/* Information pages (education, downloads): section headings without a tinted band. */
.media-info-page .media-section-title {
    background: transparent !important;
}

/* ---------- Whole-site acceptance fixes (2026-11-07) ---------- */
/* Home rates strip: an unchanged reading sat on a dark grey chip (the v1 rule colour at 30%); now a light neutral chip. */
.usm-macro-indicator-pill small {
    background: var(--ds-surface-2);
    color: var(--ds-on-surface);
}

/* Heat tiles and rating-flip badges: lighter tints so the red/green figures on them pass WCAG AA (4.5:1). */
.market-information-shell .mover-heat-tile.is-up {
    background: color-mix(in srgb, var(--media-up) calc(var(--heat) * .12), var(--media-surface)) !important;
}

.market-information-shell .mover-heat-tile.is-down {
    background: color-mix(in srgb, var(--media-down) calc(var(--heat) * .12), var(--media-surface)) !important;
}

/* Badges are opaque (8% over the card surface) so a tinted table row under them cannot pull them below 4.5:1. */
.market-information-shell .analyst-flip.is-up,
.market-information-shell .mover-badge.is-high {
    background: color-mix(in srgb, var(--media-up) 8%, var(--ds-surface)) !important;
}

.market-information-shell .analyst-flip.is-down,
.market-information-shell .mover-badge.is-low {
    background: color-mix(in srgb, var(--media-down) 8%, var(--ds-surface)) !important;
}

/* Stock research (signed-out preview): the insight summary loses its gold left rail. */
.stock-research-insight-summary {
    border-left: 0 !important;
}

/* FCN margin admin: no 5–6px top rails; section labels on the light neutral; the status line on the low-risk soft fill. */
.usm-margin-hero,
.usm-margin-policy-panel,
.usm-margin-preview-panel {
    border-top-width: 1px !important;
}

.usm-margin-section-head span {
    background: var(--ds-surface-2) !important;
}

.usm-margin-status.is-success,
.usm-margin-preview-status.is-success {
    background: var(--ds-risk-low-soft) !important;
}

/* The margin preview table had a solid violet header; tables use the quiet header (DESIGN.md Components). */
.usm-margin-preview-panel .fcn-table thead th {
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    color: var(--ds-muted) !important;
}

/* Admin context bar (the base image's admin/_usmarket_admin_context.html with css/admin/usmarket_context.css, loaded
   after this layer on admin pages): v1 navy strip → light bar with ink title and soft violet link pills. `body` raises
   specificity above that later stylesheet. */
body .usm-admin-context {
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-on-surface);
}

body .usm-admin-context__links a {
    background: var(--ds-accent-soft);
    border-color: transparent;
    color: var(--ds-on-accent-soft);
}

body .usm-admin-context__links a:hover,
body .usm-admin-context__links a:focus-visible {
    background: var(--ds-interactive-soft);
    color: var(--ds-on-accent-soft);
}