/* Shared page surfaces. Keep this layer after component styles so every route
   uses the same open sections, filled panels and data-row hierarchy. */
:root {
    --ui-bg: #ffffff;
    --surface-fill: #f5f7fa;
    --surface-hover: #edf1f6;
    --surface-rule: #e5eaf1;
}

html.dark {
    --ui-bg: #11151c;
    --surface-fill: #1b222d;
    --surface-hover: #242e3b;
    --surface-rule: #2c3542;
}

html:not(.dark) body {
    background:
        linear-gradient(180deg, #ffffff 0, #f8fbff 15rem, #eef4fb 100%);
}

html.dark body {
    background:
        linear-gradient(180deg, #11151c 0, #0f1722 17rem, #090d14 100%);
}

body::before { display: none; }
.site-nav, .dark .site-nav {
    background: var(--ui-bg);
    border-color: var(--surface-rule);
    box-shadow: none;
}
.site-nav :is(.nav-link, .nav-dropdown-link, .mobile-primary-link, .mobile-exchange-link) {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.375rem;
}
html:not(.dark) .site-nav :is(.nav-link, .nav-dropdown-link, .mobile-primary-link, .mobile-exchange-link) {
    color: #000000;
}
.site-nav .nav-link[aria-haspopup] > svg { opacity: 1; }
.site-nav-row { min-height: 4rem; gap: 1.5rem; }
.site-brand { padding-right: 0; }
.site-brand::after { content: none; }
.desktop-navigation { gap: 1.5rem; }
.site-nav .desktop-navigation .nav-link {
    min-height: 4rem;
    padding: 0;
    border-radius: 0;
}
.site-nav .nav-link:is(:hover, .is-active) { background: transparent; }
.site-nav .nav-link.is-active::after { content: none; }
.site-nav .nav-actions .nav-link { padding-inline: .5rem; }
html:not(.dark) .site-nav :is(.nav-link, .nav-dropdown-link, .mobile-primary-link, .mobile-exchange-link):is(:hover, .is-active, [aria-current]) {
    color: var(--ui-accent);
}

/* Filled panels retain grouping without outlines or floating shadows. */
#main-content .glass-card,
#main-content .home-pulse-panel {
    border: 0;
    border-radius: 1rem;
    background: var(--surface-fill);
    box-shadow: none;
    backdrop-filter: none;
}

#main-content .watchlist-workspace,
#main-content .watchlist-workspace.glass-card {
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
}

#main-content .glow-hover:hover,
#main-content :is(.market-mover-card, .asset-directory-card, .watchlist-card,
    .exchange-price-card, .spread-card, .search-asset-card, .exchange-directory-card):hover {
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
}

/* Introductions share the page canvas and the content alignment below them. */
#main-content :is(.home-hero, .hero-panel, .methodology-hero) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: .5rem 0 1.5rem;
}
#main-content .home-hero {
    padding-block: 2rem 2.5rem;
    margin-bottom: 2rem;
}
#main-content .home-hero-grid { gap: clamp(2rem, 4vw, 4rem); }
#main-content .home-pulse-panel { padding: 1.5rem; }
#main-content .market-pulse-row { min-height: 4rem; }
#main-content .market-pulse-row + .market-pulse-row { border-color: var(--surface-rule); }
#main-content .methodology-hero::after,
#main-content .coin-price-summary::before,
#main-content .alert-panel::before,
#main-content .news-card::before { content: none; }
#main-content .page-header .glass-card {
    background: transparent;
    padding-inline: 0;
    border-radius: 0;
}
#main-content .page-header-card-link { min-width: 0; }
#main-content .page-header-card-link:hover { color: var(--ui-accent); }
#main-content .section-title::before { content: none; }
#main-content .section-heading .section-meta { margin-left: 0; }

/* Filtering and pagination are part of the list, without nested containers. */
#main-content :is(.toolbar, .stock-control-panel, .stock-control-filters,
    .stock-filter-strip, .news-filter-panel) {
    padding: .5rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#main-content .stock-control-panel { gap: .6rem; margin-bottom: .75rem; }
#main-content .stock-control-filters .stock-filter-strip { padding: 0; }
#main-content .segmented-control {
    padding: 0;
    gap: .25rem;
    border: 0;
    background: transparent;
}
#main-content :is(.segment-button, .filter-chip, .stock-universe-option, .stock-market-card) {
    border: 0;
    border-radius: .6rem;
    box-shadow: none;
    background: var(--surface-fill);
    color: var(--ui-muted-strong);
}
#main-content :is(.segment-button, .filter-chip, .stock-universe-option, .stock-market-card):hover {
    background: var(--surface-hover);
    color: var(--ui-text);
}
#main-content :is(.segment-button, .filter-chip, .stock-universe-option, .stock-market-card).is-active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    box-shadow: none;
}
#main-content :is(.stock-universe-option span, .stock-market-card small) { background: transparent; }
#main-content .stock-results-footer { padding-block: .5rem; gap: .75rem 1.5rem; }
#main-content .stock-results-copy {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    justify-content: start;
}
#main-content .stock-results-copy .result-summary { font-weight: 500; color: var(--ui-muted); }
#main-content .stock-results-copy .result-summary::before { content: none; }
#main-content .stock-results-footer :is(.stock-page-controls, .stock-page-jump) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
#main-content .stock-results-footer .stock-page-controls { gap: .6rem; }
#main-content .stock-results-footer .stock-page-jump { gap: .5rem; }

/* Continuous market rows replace individual rounded row cards. Opaque cells
   also keep the pinned symbol column legible while scrolling on small screens. */
#main-content .market-list-card,
#main-content .market-list-card:hover,
#main-content .market-list-card .market-table-shell {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
#main-content .market-list-card .market-table-scroll { padding: 0; }
#main-content .market-list-card .market-table { border-spacing: 0; }
#main-content .market-list-card .market-row { filter: none; }
#main-content .market-list-card .market-table :is(th, td) {
    border-radius: 0;
    border-bottom: 1px solid var(--surface-rule);
    background: var(--ui-bg);
    box-shadow: none;
}
#main-content .market-list-card .market-table th { padding-block: .6rem; }
#main-content .market-list-card .market-table td { padding-block: 1rem; }
#main-content .market-list-card .market-row:hover > td { background: var(--surface-fill); }
#main-content .market-list-card .market-row:last-child > td { border-bottom: 0; }

/* Quotes and descriptive data use spacing and rules instead of more boxes. */
#main-content :is(.coin-price-summary, .stock-market-strip) {
    padding: 1rem 0 1.5rem;
    border: 0;
    border-bottom: 1px solid var(--surface-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#main-content .coin-price-summary { border-bottom: 0; }
#main-content .stock-info-card {
    background: transparent;
    padding: .5rem 0 1rem;
}
#main-content .stock-info-list { gap: 0; }
#main-content .stock-info-list div {
    border: 0;
    border-bottom: 1px solid var(--surface-rule);
    border-radius: 0;
    background: transparent;
    padding: .9rem 0;
}
#main-content .stock-info-list div:last-child { border-bottom: 0; }
#main-content .metric-card {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--surface-rule);
    padding: 1rem 0;
}
#main-content .exchange-count {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: .75rem 0;
}
#main-content .exchange-count + .exchange-count { padding-left: 1rem; border-left: 1px solid var(--surface-rule); }

/* Forms retain clear input boundaries; remove only decorative inner framing. */
#main-content .page-jump-links { gap: .35rem; }
#main-content .page-jump-links a {
    border: 0;
    background: transparent;
    color: var(--ui-muted-strong);
    padding-inline: .75rem;
}
#main-content .page-jump-links a:first-child { padding-left: 0; }
#main-content .page-jump-links a:hover { color: var(--ui-accent); }
#main-content .choice-tabs { border: 0; background: var(--surface-hover); }
#main-content .choice-tab.is-selected {
    border-color: transparent;
    background: var(--ui-panel);
    box-shadow: none;
    color: var(--ui-accent);
}
#main-content .watchlist-toolbar {
    align-items: center;
    border-bottom: 0;
    margin-bottom: 1rem;
    padding: .5rem 0;
    background: transparent !important;
    box-shadow: none !important;
}
#main-content .watchlist-toolbar .watchlist-type-tabs {
    display: inline-flex;
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: .75rem;
    padding: 0;
    gap: .25rem;
    background: transparent;
    box-shadow: none;
}
#main-content .watchlist-toolbar .watchlist-type-tabs .segment-button {
    min-width: 5.4rem;
    min-height: 2.75rem;
    border: 0;
    border-radius: .6rem;
    padding: .65rem 1rem;
    background: var(--surface-fill);
    box-shadow: none;
    color: var(--ui-muted-strong);
}
#main-content .watchlist-toolbar .watchlist-type-tabs .segment-button:hover {
    color: var(--ui-accent);
    background: var(--surface-hover);
}
#main-content .watchlist-toolbar .watchlist-type-tabs .segment-button.is-active {
    background: var(--ui-accent-soft);
    box-shadow: none;
    color: var(--ui-accent);
}
#main-content .watchlist-modal-type-tabs {
    display: inline-flex;
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: .8rem;
    padding: 0;
    gap: .35rem;
    background: transparent;
}
#main-content .watchlist-modal-type-tabs .choice-tab {
    min-width: 4.5rem;
    min-height: 2.75rem;
    border: 0;
    border-radius: .72rem;
    padding: .6rem .95rem;
    background: var(--surface-fill);
    box-shadow: none;
    color: var(--ui-muted-strong);
}
#main-content .watchlist-modal-type-tabs .choice-tab:hover {
    color: var(--ui-accent);
    background: var(--surface-hover);
}
#main-content .watchlist-modal-type-tabs .choice-tab.is-selected {
    background: var(--ui-accent-soft);
    box-shadow: none;
    color: var(--ui-accent);
}
#main-content .watchlist-modal-type-tabs .choice-tab::after {
    display: none;
}
#main-content .watchlist-add-trigger {
    min-height: 2.75rem;
    border-radius: .7rem;
    padding: .65rem 1rem;
    white-space: nowrap;
}
#main-content .news-card { min-height: 12rem; }
#main-content .empty-state { border: 0; background: var(--surface-fill); }
#main-content .methodology-principle-card {
    background: transparent;
    border-radius: 0;
    border-top: 1px solid var(--surface-rule);
    padding-inline: 0;
}

@media (max-width: 768px) {
    #main-content .home-hero { padding-block: 1rem 1.5rem; margin-bottom: 1.5rem; }
    #main-content .home-pulse-panel { width: 100%; padding: 1.25rem; }
    #main-content .stock-control-filters .stock-global-search { flex-basis: auto; }
    #main-content .stock-control-filters .stock-universe-option { width: auto; }
    #main-content .stock-results-footer .stock-page-controls { justify-content: space-between; }
    #main-content .stock-results-footer .stock-page-jump { flex-wrap: wrap; justify-content: center; }
    #main-content .news-card { min-height: 0; }
    #main-content .page-jump-links { gap: .25rem .75rem; }
    #main-content .page-jump-links a { padding-inline: 0; }
}

/* Production-aligned refinements: preserve the live site's open section rhythm
   while keeping cross-page helper links from becoming detached header cards. */
#main-content .page-header > div {
    max-width: 56rem;
}

#main-content .page-subtitle-action {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .4rem;
    color: var(--ui-accent);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

#main-content .page-subtitle-action:hover {
    color: var(--ui-accent-strong);
    text-decoration: underline;
    text-underline-offset: .18rem;
}

#main-content .asset-toolbar {
    margin-top: -.2rem;
}

#main-content .methodology-tech-scene {
    position: relative;
    isolation: isolate;
}

#main-content .methodology-tech-scene::before,
#main-content .methodology-tech-scene::after {
    content: "";
    position: absolute;
    inset-inline: -4rem;
    top: -2.5rem;
    height: min(42rem, 74vh);
    z-index: -1;
    pointer-events: none;
}

#main-content .methodology-tech-scene::before {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(37,99,235,.36) 0 1px, transparent 1.8px),
        radial-gradient(circle at 34% 42%, rgba(20,184,166,.3) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 16%, rgba(99,102,241,.28) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 54%, rgba(56,189,248,.24) 0 1px, transparent 1.7px),
        linear-gradient(135deg, rgba(37,99,235,.08), rgba(20,184,166,.05) 42%, transparent 76%);
    background-size: 6.5rem 6.5rem, 9rem 9rem, 12rem 12rem, 15rem 15rem, auto;
    mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.78) 56%, transparent 100%);
    animation: methodology-star-drift 24s linear infinite;
}

#main-content .methodology-tech-scene::after {
    background-image:
        linear-gradient(rgba(37,99,235,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,.08) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 42%, rgba(37,99,235,.18) 42.3%, transparent 43.2% 100%);
    background-size: 3.75rem 3.75rem, 3.75rem 3.75rem, 100% 100%;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.52) 0, transparent 78%);
    opacity: .72;
    animation: methodology-scan-shift 9s ease-in-out infinite alternate;
}

html.dark #main-content .methodology-tech-scene::before {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(96,165,250,.58) 0 1px, transparent 1.9px),
        radial-gradient(circle at 34% 42%, rgba(45,212,191,.46) 0 1px, transparent 1.7px),
        radial-gradient(circle at 72% 16%, rgba(129,140,248,.48) 0 1px, transparent 1.6px),
        radial-gradient(circle at 88% 54%, rgba(56,189,248,.42) 0 1px, transparent 1.8px),
        linear-gradient(135deg, rgba(37,99,235,.18), rgba(20,184,166,.1) 44%, transparent 78%);
}

html.dark #main-content .methodology-tech-scene::after {
    background-image:
        linear-gradient(rgba(96,165,250,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,212,191,.1) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 42%, rgba(96,165,250,.22) 42.3%, transparent 43.2% 100%);
    opacity: .8;
}

#main-content .methodology-tech-scene .methodology-signals span {
    background: color-mix(in srgb, var(--ui-bg) 74%, transparent);
    backdrop-filter: blur(10px);
}

#main-content .methodology-tech-scene :is(.methodology-manifesto, .methodology-contact) {
    background: color-mix(in srgb, var(--surface-fill) 84%, transparent);
    backdrop-filter: blur(12px);
}

@keyframes methodology-star-drift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 6.5rem 4rem, -9rem 5.5rem, 12rem -4rem, -15rem -6rem, 0 0; }
}

@keyframes methodology-scan-shift {
    from { transform: translate3d(0, 0, 0); opacity: .56; }
    to { transform: translate3d(0, 1.25rem, 0); opacity: .84; }
}

@media (prefers-reduced-motion: reduce) {
    #main-content .methodology-tech-scene::before,
    #main-content .methodology-tech-scene::after {
        animation: none;
    }
}

@media (max-width: 768px) {
    #main-content .page-subtitle-action {
        margin-left: .25rem;
    }

    #main-content .asset-toolbar {
        margin-top: 0;
    }

    #main-content .methodology-tech-scene::before,
    #main-content .methodology-tech-scene::after {
        inset-inline: -1rem;
        top: -1.5rem;
        height: 34rem;
    }

    #main-content .methodology-tech-scene :is(.methodology-title, .methodology-section-intro h2, .methodology-manifesto h2, .methodology-contact h2) {
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
        overflow-wrap: anywhere;
        line-break: anywhere;
        text-wrap: wrap;
    }

    html:lang(zh-Hans) #main-content .methodology-tech-scene .methodology-hero .page-title,
    html:lang(zh-Hant) #main-content .methodology-tech-scene .methodology-hero .page-title,
    html:lang(ja) #main-content .methodology-tech-scene .methodology-hero .page-title {
        font-size: clamp(2rem, 9vw, 2.6rem);
        letter-spacing: 0;
    }

    #main-content .methodology-tech-scene .methodology-title > span {
        display: block;
    }

    #main-content .methodology-tech-scene .methodology-hero .page-subtitle {
        max-width: min(100%, 20.5rem);
    }

    #main-content .methodology-tech-scene :is(.methodology-section-intro h2, .methodology-manifesto h2, .methodology-contact h2) {
        max-width: 10em;
        font-size: clamp(1.65rem, 7.2vw, 2rem);
    }

    #main-content .methodology-tech-scene :is(.page-subtitle, .methodology-principle-card p,
        .methodology-manifesto p, .methodology-commitment-list p, .methodology-contact p) {
        max-width: min(100%, 20.5rem);
        word-break: break-all;
        overflow-wrap: anywhere;
        line-break: anywhere;
    }
}