/* ===========================================================
   silver-price.css · 今日银价
   主调：冷银灰 + 深空蓝 + 金属高光
   视觉风格：信息大屏 + 清晰对比 + 克制动效
   =========================================================== */

:root {
    --sp-bg: #f4f6f8;
    --sp-surface: #ffffff;
    --sp-surface-2: #f8fafc;
    --sp-border: #e3e8ee;
    --sp-border-2: #cfd7e3;

    --sp-silver: #c7d0dc;
    --sp-silver-deep: #8a95a5;
    --sp-steel: #4a5568;
    --sp-slate: #2d3748;
    --sp-ink: #1a202c;

    --sp-accent: #4e6ef2;      /* 蓝银 */
    --sp-accent-2: #6c5ce7;    /* 紫银 */
    --sp-up: #16a34a;
    --sp-down: #dc2626;

    --sp-grad-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 45%, #3a5a8a 100%);
    --sp-grad-silver: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 40%, #94a3b8 100%);
    --sp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --sp-shadow-md: 0 4px 10px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --sp-shadow-lg: 0 12px 28px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .06);

    --sp-radii-sm: 8px;
    --sp-radii-md: 14px;
    --sp-radii-lg: 20px;

    --sp-body: var(--sp-ink);
}

/* 深色主题（由导航栏主题开关控制：html[data-theme="dark"]） */
:root[data-theme="dark"] {
    --sp-bg: #0b1220;
    --sp-surface: #111a2e;
    --sp-surface-2: #162036;
    --sp-border: #1f2a44;
    --sp-border-2: #2a3656;
    --sp-silver: #64748b;
    --sp-silver-deep: #334155;
    --sp-steel: #94a3b8;
    --sp-slate: #cbd5e1;
    --sp-ink: #e2e8f0;
    --sp-body: #e2e8f0;
}

/* ========== Layout ========== */
.sp-page { margin-top: 20px; }

.sp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 40px;
    background: var(--sp-grad-hero);
    color: #e2e8f0;
    border-radius: var(--sp-radii-lg);
    box-shadow: var(--sp-shadow-lg);
    position: relative;
    overflow: hidden;
}
.sp-hero::before {
    content: '';
    position: absolute;
    inset: -40px auto auto -40px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(148,163,184,.18) 0%, transparent 70%);
    pointer-events: none;
}
.sp-hero::after {
    content: '';
    position: absolute;
    inset: auto -60px -120px auto;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(78,110,242,.22) 0%, transparent 70%);
    pointer-events: none;
}
.sp-hero-copy { position: relative; z-index: 1; }
.sp-kicker {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px; letter-spacing: .1em;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #cbd5e1;
    margin-bottom: 16px;
}
.sp-hero h1 {
    font-size: 42px; font-weight: 700; line-height: 1.15;
    margin: 0 0 14px 0;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}
.sp-sub {
    font-size: 15px; line-height: 1.75; color: #94a3b8;
    margin: 0 0 24px 0;
}
.sp-sub b { color: #e2e8f0; font-weight: 600; }

.sp-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-top: 28px;
}
.sp-facts > div {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--sp-radii-sm);
    padding: 12px 14px;
}
.sp-facts b {
    display: block; font-size: 18px; font-weight: 600;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}
.sp-facts span {
    font-size: 12px; color: #94a3b8;
    margin-top: 2px; display: block;
}

/* ========== Hero: Market Screen ========== */
.sp-screen {
    position: relative; z-index: 1;
    background: rgba(17, 26, 46, .72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--sp-radii-md);
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    display: flex; flex-direction: column;
}
.sp-screen-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.sp-screen-label {
    font-size: 13px; color: #94a3b8; letter-spacing: .06em;
}
.sp-screen-date {
    font-size: 12px; color: #64748b;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-screen-main {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 10px 0 6px 0;
}
.sp-screen-k {
    display: flex; flex-direction: column;
    gap: 4px;
}
.sp-screen-k span {
    font-size: 14px; color: #cbd5e1; font-weight: 500;
}
.sp-screen-sub { font-size: 12px; color: #64748b; }
.sp-screen-v {
    text-align: right;
    display: flex; align-items: baseline; gap: 6px;
}
.sp-screen-v b {
    font-size: 48px; font-weight: 700; color: #f8fafc;
    font-variant-numeric: tabular-nums;
    line-height: 1; letter-spacing: -0.02em;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sp-screen-unit {
    font-size: 14px; color: #94a3b8; font-style: normal;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-screen-chg {
    align-self: flex-end;
    font-size: 14px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: 8px;
    background: rgba(100,116,139,.25); color: #94a3b8;
}
.sp-screen-chg.is-up   { background: rgba(22,163,74,.18); color: #4ade80; }
.sp-screen-chg.is-down { background: rgba(220,38,38,.18);  color: #f87171; }
.sp-screen-chg.is-flat { background: rgba(100,116,139,.15); color: #94a3b8; }

.sp-screen-rows {
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
.sp-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}
.sp-row-k { color: #94a3b8; }
.sp-row-v { color: #e2e8f0; font-variant-numeric: tabular-nums; font-weight: 500; }

.sp-screen-meta {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,.15);
    font-size: 12px; color: #64748b;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sp-meta-dot { opacity: .5; }
.sp-stale-badge {
    margin-left: auto;
    background: rgba(251, 191, 36, .18);
    border: 1px solid rgba(251, 191, 36, .45);
    color: #fbbf24;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
}

/* ========== Section head ========== */
.sp-section {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radii-md);
    padding: 28px;
    margin-top: 20px;
    box-shadow: var(--sp-shadow-sm);
}
.sp-section-head {
    margin-bottom: 20px;
}
.sp-section-head h2 {
    font-size: 20px; font-weight: 700;
    color: var(--sp-slate);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}
.sp-section-head p {
    font-size: 14px; color: var(--sp-steel);
    line-height: 1.7; margin: 0;
}

/* ========== 4 Price Cards ========== */
.sp-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sp-card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radii-md);
    padding: 20px;
    background: var(--sp-surface-2);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative; overflow: hidden;
}
.sp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-shadow-md);
}
.sp-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sp-grad-bar, var(--sp-accent)), transparent);
    opacity: .8;
}
.sp-card--intl { --sp-grad-bar: linear-gradient(90deg, #4e6ef2, #60a5fa); }
.sp-card--td   { --sp-grad-bar: linear-gradient(90deg, #0ea5e9, #22d3ee); }
.sp-card--paper { --sp-grad-bar: linear-gradient(90deg, #6c5ce7, #a78bfa); }
.sp-card--recycle { --sp-grad-bar: linear-gradient(90deg, #f59e0b, #fbbf24); }

.sp-card-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.sp-card-tag {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    padding: 3px 8px; border-radius: 999px;
    background: var(--sp-grad-tag-bg, rgba(78,110,242,.1));
    color: var(--sp-grad-tag-fg, var(--sp-accent));
}
.sp-card--intl .sp-card-tag { background: rgba(78,110,242,.1); color: #4e6ef2; }
.sp-card--td   .sp-card-tag { background: rgba(14,165,233,.1); color: #0ea5e9; }
.sp-card--paper .sp-card-tag { background: rgba(108,92,231,.1); color: #6c5ce7; }
.sp-card--recycle .sp-card-tag { background: rgba(245,158,11,.12); color: #d97706; }

.sp-card-src {
    font-size: 11px; color: var(--sp-silver-deep);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-card h3 {
    font-size: 15px; font-weight: 600; margin: 0 0 12px 0;
    color: var(--sp-slate);
}
.sp-card-v {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 8px;
}
.sp-card-v b {
    font-size: 28px; font-weight: 700;
    color: var(--sp-slate);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.sp-card-v em {
    font-size: 12px; color: var(--sp-silver-deep);
    font-style: normal;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-card-sub {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--sp-steel);
}
.sp-card-sub b { color: var(--sp-slate); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-card-desc {
    margin: 12px 0 0 0;
    font-size: 12px; color: var(--sp-silver-deep);
    line-height: 1.65;
}
.sp-chg {
    font-size: 12px; font-weight: 600; padding: 2px 8px;
    border-radius: 999px;
}
.sp-chg.is-up   { background: rgba(22,163,74,.1);  color: var(--sp-up); }
.sp-chg.is-down { background: rgba(220,38,38,.1);   color: var(--sp-down); }
.sp-chg.is-flat { background: rgba(148,163,184,.15); color: var(--sp-silver-deep); }
.sp-chg--muted { color: var(--sp-silver-deep); background: transparent; padding: 0; }

/* ========== Toolbar ========== */
.sp-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.sp-toolbar-left, .sp-toolbar-right {
    display: flex; align-items: center; gap: 12px;
}
.sp-toolbar-label {
    font-size: 13px; color: var(--sp-steel); font-weight: 600;
}
.sp-seg {
    display: inline-flex;
    border: 1px solid var(--sp-border-2);
    border-radius: 999px;
    background: var(--sp-surface-2);
    padding: 3px;
}
.sp-seg-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    color: var(--sp-steel); border-radius: 999px;
    transition: background .2s, color .2s, box-shadow .2s;
    font-family: inherit;
}
.sp-seg-btn:hover { color: var(--sp-slate); }
.sp-seg-btn.is-active {
    background: var(--sp-grad-hero);
    color: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.15);
}
.sp-fx {
    font-size: 14px; font-weight: 600; color: var(--sp-slate);
    font-variant-numeric: tabular-nums;
    padding: 6px 14px;
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radii-sm);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-refresh {
    border: 1px solid var(--sp-border-2);
    background: var(--sp-surface-2);
    padding: 8px 10px;
    border-radius: var(--sp-radii-sm);
    cursor: pointer;
    color: var(--sp-steel);
    transition: color .2s, background .2s, transform .2s;
}
.sp-refresh:hover { color: var(--sp-slate); background: var(--sp-border); }
.sp-refresh:active { transform: scale(.95); }
.sp-refresh svg { display: block; }
.sp-refresh.is-loading svg { animation: spSpin 1s linear infinite; }
@keyframes spSpin { to { transform: rotate(360deg); } }

/* ========== Chart ========== */
.sp-chart-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.sp-chart-title {
    font-size: 14px; font-weight: 600; color: var(--sp-slate);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}
.sp-chart-range {
    display: inline-flex; gap: 2px;
    border: 1px solid var(--sp-border-2);
    border-radius: 999px;
    padding: 2px; background: var(--sp-surface-2);
}
.sp-chart-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 5px 12px; font-size: 12px; font-weight: 500;
    color: var(--sp-steel); border-radius: 999px;
    font-family: inherit;
}
.sp-chart-btn.is-active {
    background: var(--sp-slate);
    color: #fff;
}
.sp-chart-canvas-wrap {
    position: relative;
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radii-md);
    padding: 20px;
    min-height: 280px;
}
#spChartCanvas {
    width: 100%; height: auto;
    display: block;
}
.sp-chart-empty, .sp-chart-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--sp-silver-deep); font-size: 14px;
}
/* display:flex 会覆盖 [hidden]，必须显式复位 */
.sp-chart-empty[hidden], .sp-chart-loading[hidden] {
    display: none;
}
.sp-chart-loading {
    background: var(--sp-surface-2);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-chart-loading::before {
    content: '';
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--sp-border-2);
    border-top-color: var(--sp-accent);
    border-radius: 50%; margin-right: 8px;
    animation: spSpin 0.8s linear infinite;
}
.sp-chart-legend {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px;
    font-size: 12px; color: var(--sp-steel);
    flex-wrap: wrap; gap: 10px;
}
.sp-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.sp-leg-item b { color: var(--sp-slate); font-variant-numeric: tabular-nums; font-weight: 600; }
.sp-leg-dot {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 3px;
}
.sp-leg-dot--line { background: #4e6ef2; }
.sp-leg-dot--area { background: linear-gradient(90deg, rgba(78,110,242,.45), rgba(78,110,242,.05)); width: 18px; }

/* ========== Converters ========== */
.sp-convert, .sp-recycle-calc {
    display: grid; gap: 14px;
}
.sp-convert-row {
    display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center;
}
.sp-convert-row--out label { color: var(--sp-steel); }
.sp-convert-row label {
    font-size: 13px; font-weight: 600;
    color: var(--sp-slate);
}
.sp-convert input[type="number"],
.sp-convert input[type="text"],
.sp-convert select,
.sp-recycle-calc input,
.sp-recycle-calc select {
    font-size: 15px; padding: 10px 14px;
    border: 1px solid var(--sp-border-2);
    border-radius: var(--sp-radii-sm);
    background: var(--sp-surface-2);
    color: var(--sp-body);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    transition: border-color .2s, box-shadow .2s;
}
.sp-convert input:focus, .sp-recycle-calc input:focus, .sp-recycle-calc select:focus, .sp-convert select:focus {
    outline: none;
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(78,110,242,.12);
}
.sp-convert input[readonly], .sp-range-out {
    background: var(--sp-surface);
    cursor: default;
}
.sp-range-out {
    display: inline-flex; align-items: baseline; gap: 10px;
    padding: 10px 14px; border: 1px solid var(--sp-border-2); border-radius: var(--sp-radii-sm);
}
.sp-range-out b {
    font-size: 22px; font-weight: 700; color: var(--sp-ink);
    font-variant-numeric: tabular-nums;
}
.sp-range-sep {
    color: var(--sp-silver-deep); font-weight: 700; font-size: 14px;
}
.sp-convert-note {
    font-size: 12px; color: var(--sp-silver-deep); line-height: 1.75;
    margin: 4px 0 0 0;
}
.sp-convert-note code {
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    padding: 2px 6px; border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ========== FAQ ========== */
.sp-faq-section .sp-section-head h2 { color: var(--sp-slate); }
.sp-faq {
    border-bottom: 1px solid var(--sp-border);
    padding: 14px 0;
}
.sp-faq:last-child { border-bottom: none; }
.sp-faq summary {
    cursor: pointer;
    font-size: 15px; font-weight: 600;
    color: var(--sp-slate);
    display: flex; align-items: center; gap: 10px;
    list-style: none;
    padding-right: 30px;
    position: relative;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
    content: '+';
    position: absolute; right: 6px; top: 0;
    font-size: 22px; color: var(--sp-steel); font-weight: 400;
    transition: transform .2s;
}
.sp-faq[open] summary::after { content: '−'; }
.sp-faq p {
    margin: 12px 0 0 0;
    font-size: 14px; line-height: 1.8; color: var(--sp-steel);
}

/* ========== Disclaimer ========== */
.sp-disclaimer-section { padding: 0; }
.sp-disclaimer {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: var(--sp-radii-md);
    padding: 20px 22px;
    display: flex; gap: 14px; align-items: flex-start;
}
.sp-disclaimer-ico { font-size: 22px; flex-shrink: 0; }
.sp-disclaimer-body b {
    display: block; font-size: 15px; color: #78350f; font-weight: 700; margin-bottom: 6px;
}
.sp-disclaimer-body p {
    margin: 0; font-size: 13px; line-height: 1.8; color: #92400e;
}
:root[data-theme="dark"] .sp-disclaimer {
    background: linear-gradient(135deg, #2d1e08 0%, #3b2a08 100%);
    border-color: #854d0e;
}
:root[data-theme="dark"] .sp-disclaimer-body b { color: #fbbf24; }
:root[data-theme="dark"] .sp-disclaimer-body p { color: #fcd34d; }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .sp-hero { grid-template-columns: 1fr; padding: 28px; }
    .sp-cards { grid-template-columns: repeat(2, 1fr); }
    .sp-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .sp-page { margin-top: 10px; }
    .sp-hero { padding: 22px 18px; border-radius: var(--sp-radii-md); }
    .sp-hero h1 { font-size: 30px; }
    .sp-screen-v b { font-size: 36px; }
    .sp-facts { grid-template-columns: 1fr; gap: 8px; }
    .sp-cards { grid-template-columns: 1fr; gap: 12px; }
    .sp-section { padding: 20px 18px; border-radius: var(--sp-radii-md); }
    .sp-section-head h2 { font-size: 17px; }
    .sp-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .sp-toolbar-left, .sp-toolbar-right { justify-content: space-between; }
    .sp-convert-row, .sp-recycle-calc .sp-convert-row { grid-template-columns: 1fr; gap: 6px; }
    .sp-chart-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}