:root {
    --color-primary: #1859d1;
    --color-primary-dark: #103f9f;
    --color-secondary: #0b7fa8;
    --color-accent: #d86f0b;
    --color-background: #f5f9ff;
    --color-surface: #ffffff;
    --color-surface-blue: #eaf3ff;
    --color-text: #14213d;
    --color-muted: #5e6f89;
    --color-border: #dce7f5;
    --color-up: #08785b;
    --color-up-soft: #e5f8f1;
    --color-down: #c53f4b;
    --color-down-soft: #fff0f1;
    --color-neutral: #64748b;
    --shadow-sm: 0 1px 2px rgba(32, 71, 118, .05);
    --shadow-md: 0 10px 30px rgba(35, 83, 145, .09);
    --shadow-lg: 0 24px 60px rgba(35, 83, 145, .14);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shell: 1240px;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

:focus-visible {
    outline: 3px solid rgba(24, 89, 209, .35);
    outline-offset: 3px;
}

.shell {
    width: min(calc(100% - 32px), var(--shell));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--color-primary-dark);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

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

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(220, 231, 245, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
}
.brand-logo { width: 218px; height: 50px; object-fit: contain; object-position: left center; }

.primary-nav { display: flex; align-items: center; gap: 8px; }
.primary-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 10px;
    color: #44546c;
    font-size: 14px;
    font-weight: 650;
    transition: color .18s ease, background .18s ease;
}
.primary-nav a:hover { color: var(--color-primary); background: var(--color-surface-blue); }
.primary-nav a[aria-current="page"] { color: var(--color-primary-dark); background: var(--color-surface-blue); }

.hero {
    position: relative;
    overflow: hidden;
    padding: 78px 0 82px;
    background:
        radial-gradient(circle at 88% 12%, rgba(66, 178, 235, .23), transparent 26%),
        radial-gradient(circle at 4% 88%, rgba(109, 226, 196, .18), transparent 24%),
        linear-gradient(145deg, #f8fbff 0%, #eef6ff 55%, #f7fffd 100%);
}

.hero::before, .hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(24, 89, 209, .10);
    border-radius: 50%;
    pointer-events: none;
}
.hero::before { width: 420px; height: 420px; right: -190px; top: -210px; }
.hero::after { width: 280px; height: 280px; left: -180px; bottom: -190px; }

.hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    align-items: center;
    gap: clamp(44px, 7vw, 96px);
}

.eyebrow, .section-kicker {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.eyebrow {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px;
    border: 1px solid #cfe1fb;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    letter-spacing: .04em;
    text-transform: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0a9a71;
    box-shadow: 0 0 0 5px rgba(10, 154, 113, .10);
}

.hero h1 {
    margin: 20px 0;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.06;
    letter-spacing: -.045em;
}
.hero h1 span { color: var(--color-primary); }
.hero-copy > p { max-width: 650px; margin: 0; color: #51627d; font-size: 18px; line-height: 1.85; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button-primary { color: #fff; background: var(--color-primary); box-shadow: 0 10px 22px rgba(24, 89, 209, .24); }
.button-primary:hover { background: var(--color-primary-dark); box-shadow: 0 13px 28px rgba(24, 89, 209, .3); }
.button-secondary { color: var(--color-primary); border-color: #c6daf6; background: rgba(255, 255, 255, .72); }
.button-secondary:hover { border-color: #91b5e8; background: #fff; }

.market-pulse {
    position: relative;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(196, 219, 248, .9);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--shadow-lg);
}

.market-pulse::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--color-primary), #55c9cb, #ffc466);
}

.pulse-head, .pulse-grid { display: flex; justify-content: space-between; gap: 16px; }
.pulse-head > div { display: flex; flex-direction: column; }
.pulse-head span, .pulse-number small, .pulse-grid span { color: var(--color-muted); font-size: 13px; }
.pulse-head strong { margin-top: 4px; font-size: 15px; }
.live-badge { align-self: flex-start; padding: 4px 8px; border-radius: 6px; color: var(--color-up) !important; background: var(--color-up-soft); font-size: 10px !important; font-weight: 850; letter-spacing: .08em; }
.pulse-number { padding: 30px 0 26px; border-bottom: 1px solid var(--color-border); }
.pulse-number { display: flex; flex-direction: column; }
.pulse-number strong { margin-top: 2px; font-size: clamp(32px, 4vw, 48px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pulse-grid { padding-top: 24px; }
.pulse-grid > div { min-width: 0; display: flex; flex-direction: column; }
.pulse-grid strong { margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }
.market-pulse > p { margin: 22px 0 0; color: var(--color-muted); font-size: 12px; }

.market-section { padding: 76px 0 84px; background: #fff; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { margin: 5px 0 4px; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; letter-spacing: -.025em; }
.section-heading p { margin: 0; color: var(--color-muted); }
.market-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; }

.market-search {
    width: min(100%, 270px);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f8fbff;
    color: var(--color-primary);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.market-search:focus-within { border-color: #82ade8; box-shadow: 0 0 0 4px rgba(24, 89, 209, .10); }
.market-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--color-text); background: transparent; font-size: 14px; }
.market-search input::placeholder { color: #8796aa; }

.data-notice { margin-bottom: 16px; padding: 12px 16px; border: 1px solid #f1d5a4; border-radius: 10px; color: #815113; background: #fff9e9; font-size: 14px; }
.market-board { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.market-grid { display: grid; grid-template-columns: minmax(225px, 1.5fr) repeat(4, minmax(88px, .7fr)) minmax(118px, .95fr) minmax(124px, 1fr) 42px; align-items: center; gap: 12px; }
.market-grid-head { min-height: 50px; padding: 0 20px; color: #65758e; background: #f2f7fd; font-size: 12px; font-weight: 700; }
.market-grid-head span:not(:first-child) { text-align: right; }
.market-list { margin: 0; padding: 0; list-style: none; }
.market-list-item + .market-list-item { border-top: 1px solid #edf2f8; }
.market-row { min-height: 72px; padding: 9px 20px; background: #fff; transition: background .18s ease, box-shadow .18s ease; cursor: pointer; }
.market-row:hover { position: relative; z-index: 1; background: #f7fbff; box-shadow: inset 3px 0 var(--color-primary); }
.coin-cell { min-width: 0; display: flex; align-items: center; gap: 12px; }
.rank-number { width: 24px; color: #7b8aa0; font-size: 13px; font-variant-numeric: tabular-nums; }
.coin-logo { width: var(--logo-size, 42px); height: var(--logo-size, 42px); flex: 0 0 auto; border-radius: 50%; object-fit: contain; }
.coin-logo-fallback { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--color-primary), #55b8d8); font-size: 11px; font-weight: 800; }
.coin-names { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.coin-names strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.coin-names small { margin-top: 2px; color: var(--color-muted); font-size: 12px; }
.data-value, .change-value { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-value { font-size: 14px; }
.change-value { font-weight: 750; }
.change-value b { display: inline-block; margin-right: 3px; font-size: 11px; }
.change-up { color: var(--color-up) !important; }
.change-down { color: var(--color-down) !important; }
.change-neutral { color: var(--color-neutral) !important; }
.row-arrow { color: #8ba0ba; text-align: right; transition: color .18s ease, transform .18s ease; }
.market-row:hover .row-arrow { color: var(--color-primary); transform: translateX(3px); }
.empty-filter { padding: 42px 20px; color: var(--color-muted); text-align: center; }
.market-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--color-muted); font-size: 12px; }

.breadcrumb { min-height: 58px; display: flex; align-items: center; color: var(--color-muted); font-size: 13px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { min-width: 0; }
.breadcrumb li + li::before { margin-right: 10px; color: #8ba0ba; content: "/"; }
.breadcrumb a { color: var(--color-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a:focus-visible { border-radius: 3px; outline: 2px solid var(--color-primary); outline-offset: 3px; }

.coin-hero { padding: 52px 0 42px; background: radial-gradient(circle at 90% 5%, rgba(52, 180, 219, .15), transparent 24%), linear-gradient(135deg, #f7fbff, #eef6ff); }
.coin-hero-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: center; }
.coin-title-row { display: flex; align-items: flex-start; gap: 20px; }
.coin-title-row .coin-logo { --logo-size: 72px; padding: 4px; border: 1px solid var(--color-border); background-color: #fff; box-shadow: var(--shadow-md); }
.rank-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 999px; color: var(--color-primary); background: #e5f0ff; font-size: 12px; font-weight: 750; }
.coin-title-row h1 { margin: 9px 0 10px; font-size: clamp(30px, 4.5vw, 50px); line-height: 1.15; letter-spacing: -.035em; }
.coin-title-row p { max-width: 760px; margin: 0; color: #556780; line-height: 1.8; }
.coin-quote { padding: 25px; border: 1px solid #cfe1f7; border-radius: var(--radius-md); background: rgba(255, 255, 255, .88); box-shadow: var(--shadow-md); }
.coin-quote > span:first-child { color: var(--color-muted); font-size: 13px; }
.hero-price { display: block; margin: 6px 0 8px; font-size: clamp(30px, 4vw, 44px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cny-reference { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 12px 0 16px; padding: 11px 13px; border: 1px solid #d8e8fa; border-radius: 10px; background: #f3f8ff; }
.cny-reference span { color: var(--color-muted); font-size: 12px; }
.cny-reference strong { color: var(--color-primary-dark); font-size: 18px; font-variant-numeric: tabular-nums; }
.quote-change { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; font-size: 13px; font-weight: 800; }
.quote-change.change-up { background: var(--color-up-soft); }
.quote-change.change-down { background: var(--color-down-soft); }
.coin-quote small { display: block; margin-top: 13px; color: var(--color-muted); }

.coin-stats { padding: 28px 0 42px; background: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.stat-grid div { min-width: 0; padding: 18px 20px; }
.stat-grid div + div { border-left: 1px solid var(--color-border); }
.stat-grid dt { color: var(--color-muted); font-size: 12px; }
.stat-grid dd { overflow: hidden; margin: 5px 0 0; font-size: 15px; font-weight: 750; text-overflow: ellipsis; font-variant-numeric: tabular-nums; white-space: nowrap; }

.market-insight { padding: 0 0 28px; background: #fff; }
.insight-card { padding: clamp(24px, 4vw, 38px); border: 1px solid #cfe1f7; border-radius: var(--radius-md); background: linear-gradient(135deg, #f8fbff, #f2f8ff); box-shadow: var(--shadow-sm); }
.insight-card .compact-heading { margin-bottom: 16px; }
.insight-card .eyebrow { color: var(--color-primary); }
.insight-copy { max-width: 920px; }
.insight-copy p { margin: 0; color: #40536f; font-size: 16px; line-height: 1.9; }
.insight-copy p + p { margin-top: 12px; }
.insight-copy strong { color: #17365f; font-variant-numeric: tabular-nums; }
.insight-copy strong.change-up { color: var(--color-up) !important; }
.insight-copy strong.change-down { color: var(--color-down) !important; }

.trend-section { padding: 0 0 60px; background: #fff; }
.trend-card { padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #f8fbff; }
.compact-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.compact-heading h2 { font-size: clamp(24px, 3vw, 32px); }
.compact-heading > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trend-item { padding: 18px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.trend-item > div { display: flex; justify-content: space-between; gap: 16px; }
.trend-item span { color: var(--color-muted); font-size: 13px; }
.trend-item strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.trend-track { height: 6px; display: block; overflow: hidden; margin-top: 14px; border-radius: 99px; background: #edf2f7; }
.trend-track i { height: 100%; display: block; margin-left: 50%; border-radius: 99px; background: currentColor; transform: translateX(-50%); }

.coin-content { padding: 72px 0; background: var(--color-background); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: clamp(42px, 6vw, 76px); align-items: start; }
.article-main { min-width: 0; }
.article-main section { scroll-margin-top: 100px; }
.article-main section + section { margin-top: 64px; }
.article-main h2 { margin: 8px 0 19px; font-size: clamp(26px, 3.5vw, 38px); line-height: 1.25; letter-spacing: -.025em; }
.article-main h3 { margin: 8px 0 5px; font-size: 17px; }
.article-main p { max-width: 820px; margin: 0 0 16px; color: #445672; font-size: 17px; line-height: 1.9; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-grid > div { padding: 23px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.feature-grid p { margin: 0; font-size: 14px; line-height: 1.7; }
.feature-index { color: #8fb1df; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.check-list, .number-list { margin: 0; padding: 0; list-style: none; }
.check-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; padding: 17px; border-radius: 12px; color: #344863; background: #eaf8f4; }
.check-list li span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--color-up); font-size: 12px; }
.number-list { display: grid; gap: 12px; }
.number-list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.number-list li > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--color-primary); background: var(--color-surface-blue); font-size: 13px; font-weight: 800; }
.number-list p { margin: 1px 0 0; font-size: 16px; }
.risk-section { padding: 30px; border: 1px solid #f0d9b6; border-radius: var(--radius-md); background: #fffaf0; }
.risk-section ul { margin: 0; padding-left: 22px; color: #5f4b35; }
.risk-section li + li { margin-top: 8px; }
.risk-note { margin: 20px 0 0 !important; padding-top: 18px; border-top: 1px solid #f0d9b6; color: #765a3b !important; font-size: 14px !important; }
.faq-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.faq-list details + details { border-top: 1px solid var(--color-border); }
.faq-list summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; cursor: pointer; font-weight: 750; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--color-primary); font-size: 22px; font-weight: 400; transition: transform .18s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: none; margin: 0; padding: 0 20px 19px; color: var(--color-muted); font-size: 15px; }
.context-links { padding: 15px 17px; border-left: 3px solid #8fb9ea; border-radius: 0 10px 10px 0; background: #f4f8fd; font-size: 15px !important; }
.context-links a { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-decoration-color: #aac8ec; text-underline-offset: 3px; }
.context-links a:hover { text-decoration-color: currentColor; }
.content-review { max-width: none !important; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 38px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--color-border); color: var(--color-muted) !important; font-size: 13px !important; }

.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.profile-grid div { padding: 19px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.profile-grid dt { color: var(--color-muted); font-size: 12px; }
.profile-grid dd { margin: 7px 0 0; color: #263d5c; font-size: 15px; font-weight: 750; line-height: 1.5; }

.mechanism-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.mechanism-flow > div { position: relative; padding: 24px; border: 1px solid #d5e4f6; border-radius: 14px; background: linear-gradient(145deg, #fff, #f6faff); }
.mechanism-flow > div > span { color: #8eb1de; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.mechanism-flow h3 { margin-top: 10px; }
.mechanism-flow p { margin: 7px 0 0; font-size: 14px; line-height: 1.75; }

.coin-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.coin-timeline::before { width: 2px; position: absolute; top: 12px; bottom: 12px; left: 72px; content: ""; background: #d8e6f7; }
.coin-timeline li { min-height: 72px; position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 26px; align-items: start; padding: 12px 0; }
.coin-timeline li::before { width: 12px; height: 12px; position: absolute; top: 18px; left: 67px; z-index: 1; content: ""; border: 3px solid #fff; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px #afcbed; }
.coin-timeline .timeline-date { color: var(--color-primary); font-size: 14px; font-weight: 800; }
.coin-timeline p { margin: 0; padding: 0 0 0 12px; font-size: 15px; line-height: 1.75; }

.supply-panel { margin-top: 26px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.supply-progress-copy { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.supply-progress-copy strong { color: #24496f; }
.supply-progress-copy span { color: var(--color-muted); font-size: 13px; }
.supply-progress { height: 12px; overflow: hidden; border-radius: 99px; background: #e8f0f9; }
.supply-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #46b5d6); }
.flexible-supply { display: grid; gap: 7px; padding: 17px 18px; border-radius: 12px; background: #eef6ff; }
.flexible-supply strong { color: #214c78; }
.flexible-supply span { color: #536a85; font-size: 14px; line-height: 1.65; }
.supply-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 0; }
.supply-metrics div { min-width: 0; padding: 16px; border-radius: 10px; background: #f7f9fc; }
.supply-metrics dt { color: var(--color-muted); font-size: 12px; }
.supply-metrics dd { overflow-wrap: anywhere; margin: 7px 0 0; color: #263d5c; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }

.position-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 0; }
.position-grid div { padding: 20px; border: 1px solid #d6e5f6; border-radius: 13px; background: linear-gradient(145deg, #fff, #f5f9ff); }
.position-grid dt { color: var(--color-muted); font-size: 12px; }
.position-grid dd { margin: 8px 0 0; color: var(--color-primary-dark); font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.position-context { margin-top: 17px !important; padding: 14px 16px; border-radius: 10px; background: #f4f8fd; font-size: 14px !important; }

.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.comparison-card { min-width: 0; padding: 22px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.comparison-title { display: flex; align-items: center; gap: 12px; }
.comparison-title .coin-logo { --logo-size: 42px; }
.comparison-title div { display: grid; }
.comparison-title strong { color: #263d5c; }
.comparison-title span { color: var(--color-muted); font-size: 12px; }
.comparison-card dl { display: grid; gap: 9px; margin: 20px 0 0; }
.comparison-card dl div { display: flex; justify-content: space-between; gap: 18px; padding-top: 9px; border-top: 1px solid #edf2f8; }
.comparison-card dt { color: var(--color-muted); font-size: 12px; }
.comparison-card dd { max-width: 62%; margin: 0; color: #314a68; font-size: 13px; font-weight: 700; text-align: right; }
.comparison-card > a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 15px; color: var(--color-primary); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.coin-calculator { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; padding: 24px; border: 1px solid #cfe1f7; border-radius: var(--radius-md); background: linear-gradient(145deg, #f7fbff, #eef6ff); }
.calculator-input > label { display: block; margin-bottom: 8px; color: #304a69; font-size: 13px; font-weight: 750; }
.calculator-input > div:first-of-type { min-height: 50px; display: flex; align-items: center; overflow: hidden; border: 1px solid #bcd2ea; border-radius: 11px; background: #fff; }
.calculator-input input { width: 100%; min-width: 0; height: 50px; padding: 0 14px; border: 0; outline: 0; color: #1c3554; background: transparent; font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; }
.calculator-input input:focus { box-shadow: inset 0 0 0 2px var(--color-primary); }
.calculator-input > div:first-of-type > span { padding: 0 15px; color: var(--color-primary); font-size: 13px; font-weight: 800; }
.calculator-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calculator-presets button { min-width: 52px; min-height: 44px; padding: 0 12px; border: 1px solid #c7d9ed; border-radius: 9px; color: #31577f; background: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: border-color .18s ease, background .18s ease; }
.calculator-presets button:hover, .calculator-presets button:focus-visible { border-color: var(--color-primary); background: #f2f7fd; }
.calculator-results { display: grid; grid-template-columns: 1fr; gap: 10px; }
.calculator-results div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #d8e6f5; border-radius: 11px; background: rgba(255, 255, 255, .9); }
.calculator-results span { color: var(--color-muted); font-size: 13px; }
.calculator-results strong { color: #173c67; font-size: 18px; font-variant-numeric: tabular-nums; }

.history-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 14px; }
.history-metrics div { padding: 17px; border: 1px solid var(--color-border); border-radius: 11px; background: #fff; }
.history-metrics dt { color: var(--color-muted); font-size: 12px; }
.history-metrics dd { margin: 7px 0 0; color: #263d5c; font-weight: 800; font-variant-numeric: tabular-nums; }
.history-chart { padding: 16px; border: 1px solid var(--color-border); border-radius: 13px; background: #fff; }
.history-chart svg { width: 100%; height: auto; display: block; }
.history-chart line { stroke: #dfE9f5; stroke-width: 1; }
.history-chart polyline { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.history-empty { display: grid; gap: 9px; padding: 25px; border: 1px dashed #b9cfe8; border-radius: 14px; background: #f6faff; }
.history-empty strong { color: #234a74; font-size: 17px; }
.history-empty p { margin: 0; font-size: 14px; }
.history-empty span { color: var(--color-muted); font-size: 12px; }

.article-aside { position: sticky; top: 98px; display: grid; gap: 14px; }
.aside-card { padding: 20px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.aside-card > strong { display: block; margin-bottom: 10px; font-size: 14px; }
.aside-nav a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; color: var(--color-muted); font-size: 13px; }
.aside-nav a:hover { color: var(--color-primary); background: #f4f8fd; }

/* News */
.news-hero { padding: 46px 0 56px; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, #fff 0%, #f2f7ff 58%, #e7f2ff 100%); }
.news-hero h1 { margin: 12px 0 8px; font-size: clamp(36px, 5vw, 56px); line-height: 1.12; letter-spacing: -.035em; }
.news-hero > .shell > p { max-width: 730px; margin: 0; color: var(--color-muted); font-size: 17px; line-height: 1.8; }
.news-breadcrumb { margin-bottom: 34px; color: var(--color-muted); font-size: 13px; }
.news-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; }
.news-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.news-breadcrumb li + li::before { margin-right: 8px; color: #9eb0c7; content: "/"; }
.news-breadcrumb a { min-height: 36px; display: inline-flex; align-items: center; color: #46617f; }
.news-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.news-breadcrumb [aria-current="page"] { color: #72839b; }
.news-section, .news-article-section { padding: 68px 0 84px; }
.news-article-section { padding-top: 8px; }
.news-article-breadcrumb { margin: 28px 0 20px; }
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(30px, 4vw, 56px); align-items: start; }
.news-main { min-width: 0; }
.news-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #cbdcf1; }
.news-list-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.news-list-heading p { margin: 4px 0 0; color: var(--color-muted); font-size: 13px; }
.news-list { display: grid; margin: 0; padding: 0; list-style: none; }
.news-list > li { border-bottom: 1px solid var(--color-border); }
.news-list-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 28px 4px; }
.news-list-number { padding-top: 24px; color: #91a9c6; font-size: 13px; font-weight: 850; letter-spacing: .08em; }
.news-list-card time { color: #6d819d; font-size: 12px; }
.news-list-card h2 { margin: 7px 0 9px; font-size: clamp(20px, 2vw, 25px); line-height: 1.4; letter-spacing: -.018em; }
.news-list-card h2 a:hover { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.news-list-card p { max-width: 770px; margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.8; }
.news-sidebar { position: sticky; top: 94px; }
.hot-coins-card { overflow: hidden; border: 1px solid #d3e2f4; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.hot-coins-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, #f8fbff, #edf5ff); }
.hot-coins-head > span { color: var(--color-primary); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.hot-coins-head h2 { margin: 3px 0 0; font-size: 20px; }
.hot-coins-list { display: grid; margin: 0; padding: 7px 14px; list-style: none; }
.hot-coins-list li + li { border-top: 1px solid #edf2f8; }
.hot-coins-list a { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 9px; }
.hot-coins-list a:hover { background: #f6faff; }
.hot-coin-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.hot-coin-identity > b { width: 17px; flex: 0 0 17px; color: #8da0b8; font-size: 11px; text-align: center; }
.hot-coin-identity .coin-logo { --logo-size: 34px; width: 34px; height: 34px; flex: 0 0 34px; }
.hot-coin-identity > span { min-width: 0; display: grid; }
.hot-coin-identity strong { overflow: hidden; color: #233d5c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hot-coin-identity small { color: #8293a9; font-size: 10px; }
.hot-coin-price { display: grid; justify-items: end; flex: 0 0 auto; }
.hot-coin-price > strong { color: #284566; font-size: 12px; font-variant-numeric: tabular-nums; }
.hot-coin-price > small { font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.hot-coins-more { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-top: 1px solid var(--color-border); color: var(--color-primary); font-size: 12px; font-weight: 750; }
.hot-coins-more:hover { background: #f5f9ff; }

.news-article { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.news-article-header { padding: clamp(28px, 5vw, 58px) clamp(24px, 6vw, 70px) 34px; border-bottom: 1px solid var(--color-border); background: linear-gradient(145deg, #fff, #f7faff); }
.news-article-header h1 { max-width: 850px; margin: 12px 0 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.28; letter-spacing: -.035em; }
.news-article-lead { max-width: 790px; margin: 0; color: #536a85; font-size: 17px; line-height: 1.85; }
.news-article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; color: #7c8ea6; font-size: 12px; }
.news-article-body { max-width: 830px; padding: 36px clamp(24px, 6vw, 70px) 48px; }
.news-article-body p { margin: 0; color: #263d59; font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.news-article-body p + p { margin-top: 24px; }
.news-article-body h2 { margin: 32px 0 14px; color: #233d5c; font-size: clamp(21px, 2.5vw, 26px); line-height: 1.5; overflow-wrap: anywhere; }
.news-risk-paragraph { padding: 18px 20px; border-left: 3px solid #e59a3b; border-radius: 0 10px 10px 0; color: #604b2d !important; background: #fff9ef; font-size: 14px !important; }
.coin-inline-link { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-decoration-color: #9dbce8; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.coin-inline-link:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }
.news-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); background: #f8fbff; }
.news-adjacent > * { min-width: 0; }
.news-adjacent a { min-height: 108px; display: grid; align-content: center; gap: 5px; padding: 20px clamp(20px, 4vw, 40px); }
.news-adjacent a + a { border-left: 1px solid var(--color-border); text-align: right; }
.news-adjacent a:hover { background: #edf5ff; }
.news-adjacent span { color: #7f91a8; font-size: 11px; }
.news-adjacent strong { overflow: hidden; color: #2d4c6f; font-size: 13px; line-height: 1.55; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.not-found { min-height: 65vh; display: grid; place-items: center; padding: 80px 0; }
.not-found-card { max-width: 680px; padding: 60px 30px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); text-align: center; }
.not-found h1 { margin: 14px 0 8px; font-size: clamp(34px, 5vw, 54px); }
.not-found p { margin: 0 0 24px; color: var(--color-muted); }

.site-footer { padding: 54px 0 22px; color: #dce9fb; background: #122541; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; }
.footer-brand { padding: 6px 10px; background: #fff; }
.footer-brand .brand-logo { width: 208px; height: 48px; }
.footer-grid p { max-width: 520px; margin: 16px 0 0; color: #aebfda; font-size: 13px; }
.footer-links { min-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-links strong { margin-bottom: 4px; color: #fff; font-size: 13px; }
.footer-links a { min-height: 34px; display: inline-flex; align-items: center; color: #b8c9e0; font-size: 13px; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .10); color: #8fa7c7; font-size: 12px; }

.data-flash { animation: data-flash .55s ease; }
@keyframes data-flash { 0% { background-color: #fff2b8; } 100% { background-color: transparent; } }

@media (max-width: 1100px) {
    .hero-layout { grid-template-columns: 1fr .82fr; gap: 40px; }
    .market-grid { grid-template-columns: minmax(210px, 1.45fr) repeat(3, minmax(82px, .65fr)) minmax(112px, .9fr) 38px; }
    .market-grid > :nth-child(3), .market-grid > :nth-child(7) { display: none; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-grid div:nth-child(4) { border-left: 0; border-top: 1px solid var(--color-border); }
    .stat-grid div:nth-child(5), .stat-grid div:nth-child(6) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 820px) {
    .hero { padding: 54px 0 62px; }
    .hero-layout, .coin-hero-layout, .article-layout { grid-template-columns: 1fr; }
    .hero h1 { font-size: clamp(42px, 11vw, 62px); }
    .market-pulse { max-width: 620px; }
    .market-heading-row { align-items: stretch; flex-direction: column; }
    .market-search { width: 100%; max-width: none; }
    .market-grid-head { display: none; }
    .market-board { border: 0; border-radius: 0; box-shadow: none; }
    .market-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .market-list-item, .market-list-item + .market-list-item { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
    .market-row { min-height: 168px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "coin coin" "price change" "cap arrow"; gap: 14px 10px; padding: 16px; }
    .market-row:hover { box-shadow: none; }
    .coin-cell { grid-area: coin; }
    .price-value { grid-area: price; align-self: end; text-align: left; font-size: 17px; }
    .market-row > [data-field="percent_change_24h"] { grid-area: change; align-self: end; }
    .market-cap-value { grid-area: cap; align-self: end; text-align: left; color: var(--color-muted); }
    .market-cap-value::before { content: "市值 "; font-size: 11px; }
    .row-arrow { grid-area: arrow; align-self: end; }
    .market-row > [data-field="percent_change_1h"], .market-row > [data-field="percent_change_7d"], .volume-value { display: none; }
    .market-meta, .compact-heading { align-items: flex-start; flex-direction: column; }
    .coin-quote { max-width: 520px; }
    .feature-grid, .check-list { grid-template-columns: 1fr; }
    .profile-grid, .mechanism-flow { grid-template-columns: repeat(2, 1fr); }
    .position-grid { grid-template-columns: repeat(2, 1fr); }
    .coin-calculator { grid-template-columns: 1fr; }
    .article-aside { position: static; grid-template-columns: repeat(2, 1fr); }
    .aside-nav { display: none; }
    .news-layout { grid-template-columns: 1fr; }
    .news-sidebar { position: static; }
    .hot-coins-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
    .hot-coins-list li:nth-child(2) { border-top: 0; }
}

@media (max-width: 560px) {
    .shell { width: min(calc(100% - 24px), var(--shell)); }
    .header-inner { min-height: 64px; }
    .brand-logo { width: 184px; height: 44px; }
    .primary-nav { gap: 2px; }
    .primary-nav a { padding: 0 9px; font-size: 13px; }
    .hero { padding-top: 44px; }
    .hero-copy > p { font-size: 16px; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .market-pulse { padding: 22px; }
    .pulse-grid { flex-direction: column; }
    .market-section, .coin-content { padding: 58px 0; }
    .market-list { grid-template-columns: 1fr; }
    .market-meta { font-size: 11px; }
    .coin-title-row { flex-direction: column; gap: 16px; }
    .coin-hero { padding-top: 35px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-grid div:nth-child(odd) { border-left: 0; }
    .stat-grid div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
    .trend-card { padding: 20px; }
    .insight-card { padding: 22px; }
    .insight-copy p { font-size: 15px; line-height: 1.8; }
    .trend-grid { grid-template-columns: 1fr; }
    .profile-grid, .mechanism-flow, .supply-metrics, .comparison-grid, .history-metrics { grid-template-columns: 1fr; }
    .supply-progress-copy { align-items: flex-start; flex-direction: column; }
    .calculator-results div { align-items: flex-start; flex-direction: column; gap: 5px; }
    .coin-timeline::before { left: 58px; }
    .coin-timeline li { grid-template-columns: 58px 1fr; gap: 20px; }
    .coin-timeline li::before { left: 53px; }
    .article-main section + section { margin-top: 48px; }
    .article-main p { font-size: 16px; }
    .risk-section { padding: 22px; }
    .article-aside { grid-template-columns: 1fr; }
    .news-hero { padding: 30px 0 42px; }
    .news-breadcrumb { margin-bottom: 22px; }
    .news-article-breadcrumb { margin: 18px 0 12px; }
    .news-section, .news-article-section { padding-bottom: 58px; }
    .news-list-card { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 24px 0; }
    .news-list-number { padding-top: 22px; }
    .news-list-card p { font-size: 14px; }
    .news-article-header { padding-inline: 20px; }
    .news-article-lead { font-size: 16px; }
    .news-article-body { padding: 30px 20px 38px; }
    .news-article-body p { font-size: 16px; line-height: 1.9; }
    .news-adjacent { grid-template-columns: 1fr; }
    .news-adjacent a + a { border-top: 1px solid var(--color-border); border-left: 0; text-align: left; }
    .hot-coins-list { grid-template-columns: 1fr; }
    .hot-coins-list li:nth-child(2) { border-top: 1px solid #edf2f8; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-links { min-width: 0; }
    .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}