/* ==========================================================================
   Pricing page (pricing.html) — NewAPI look. Requires newapi-theme.css tokens.
   ========================================================================== */
:root, :root.light-mode {
    --bg: var(--na-background);
    --card-bg: var(--na-card);
    --card-border: var(--na-border);
    --text: var(--na-foreground);
    --text2: var(--na-muted-foreground);
    --text3: color-mix(in srgb, var(--na-muted-foreground) 75%, var(--na-background));
    --border: var(--na-border);
    --mono: var(--na-font-mono);
    --sans: var(--na-font-sans);
    --gradient: var(--na-primary);
}
body {
    background: var(--na-background);
    background-image: none;
    color: var(--na-foreground);
    font-family: var(--na-font-sans);
    -webkit-font-smoothing: antialiased;
}
code {
    font-family: var(--na-font-mono);
    font-size: 0.92em;
    background: var(--na-muted);
    border: 1px solid var(--na-border);
    border-radius: 6px;
    padding: 0 5px;
}

/* Nav: NewAPI header (logo + name, hairline bottom) */
.nav { border-bottom: 1px solid var(--na-border); padding-bottom: 14px; }
.nav-brand { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--na-foreground); }
.nav-brand span { background: none; -webkit-text-fill-color: currentColor; color: var(--na-primary); font-weight: 700; }
.nav-brand:hover { color: var(--na-primary-text); }

.page-title { font-weight: 700; letter-spacing: -0.025em; }
.page-sub { color: var(--na-muted-foreground); }

/* Rate guide panel -> NewAPI card */
.rate-guide-panel {
    background: var(--na-card);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    box-shadow: var(--na-shadow-sm);
}
.rate-guide-panel::before { display: none; }
.rate-guide-title { color: var(--na-foreground); font-weight: 600; }
.rate-guide-badge { color: var(--na-secondary-foreground); background: var(--na-secondary); border: 1px solid transparent; font-weight: 500; }
.rate-card {
    background: var(--na-muted);
    border: 1px solid var(--na-border);
    border-radius: calc(var(--na-radius) - 4px);
}
.rate-card:hover { transform: none; border-color: color-mix(in srgb, var(--na-primary) 45%, var(--na-border)); }
.rate-card-tag { color: var(--na-muted-foreground); font-weight: 600; }
.rate-card-value { font-weight: 700; }
.rate-formula-bar {
    background: var(--na-accent);
    border: 1px solid color-mix(in srgb, var(--na-primary) 30%, transparent);
    border-radius: calc(var(--na-radius) - 4px);
}
.formula-main { color: var(--na-primary-text); font-weight: 600; }
.formula-examples { color: var(--na-muted-foreground); }
.formula-ex-item code { color: var(--na-success); background: color-mix(in srgb, var(--na-success) 12%, transparent); border-color: color-mix(in srgb, var(--na-success) 25%, transparent); font-weight: 700; }

/* Segmented view switcher */
.view-switcher { background: var(--na-muted); border: none; box-shadow: none; }
.view-btn { color: var(--na-muted-foreground); font-weight: 500; }
.view-btn:hover { color: var(--na-foreground); }
.view-btn.active { background: var(--na-background); color: var(--na-foreground); box-shadow: var(--na-shadow-sm); border: 1px solid var(--na-border); }
:root:not(.light-mode) .view-btn.active { background: var(--na-secondary); }

/* Ranking panel */
.ranking-panel { background: var(--na-card); border: 1px solid var(--na-border); border-radius: var(--na-radius); box-shadow: var(--na-shadow-sm); backdrop-filter: none; }
.ranking-title-wrap h3 { font-weight: 600; }
.metric-tabs { background: var(--na-muted); border: none; border-radius: 999px; }
.metric-btn { border-radius: 999px; color: var(--na-muted-foreground); font-weight: 500; border: 1px solid transparent; }
.metric-btn.active { background: var(--na-primary); color: var(--na-primary-foreground); border-color: var(--na-primary); }
.legend-bar { background: var(--na-muted); border: 1px solid var(--na-border); border-radius: 10px; }
.legend-solid-dot { background: var(--na-primary); }
.chart-item { background: transparent; border: 1px solid var(--na-border); border-radius: 12px; }
.chart-item:hover { background: var(--na-accent); border-color: color-mix(in srgb, var(--na-primary) 35%, transparent); transform: none; }
.rank-badge { background: var(--na-muted); color: var(--na-muted-foreground); border-radius: 999px; }
.rank-1 { background: var(--na-destructive); color: #fff; box-shadow: none; }
.rank-2 { background: var(--na-warning); color: #fff; }
.rank-3 { background: var(--na-primary); color: #fff; }
.model-col-name { font-weight: 700; }
.bar-track { background: var(--na-muted); border: 1px solid var(--na-border); }
.bar-solid.bar-red { background: var(--na-destructive); box-shadow: none; }
.bar-solid.bar-orange { background: var(--na-warning); }
.bar-solid.bar-blue { background: var(--na-primary); }
.bar-solid.bar-green { background: var(--na-success); box-shadow: none; }
.bar-solid-text { color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.45); font-weight: 700; }
.bar-translucent { backdrop-filter: none; }
.ext-tag-text { color: var(--na-destructive); text-shadow: none; }
.stat-price { font-weight: 700; }
.ext-desc-badge { border-radius: 999px; font-weight: 500; }
.ext-desc-badge.has-ext { background: color-mix(in srgb, var(--na-destructive) 12%, transparent); color: var(--na-destructive); border-color: color-mix(in srgb, var(--na-destructive) 28%, transparent); }
.ext-desc-badge.warn-ext { background: color-mix(in srgb, var(--na-warning) 12%, transparent); color: var(--na-warning); border-color: color-mix(in srgb, var(--na-warning) 28%, transparent); }
.ext-desc-badge.no-ext { background: var(--na-accent); color: var(--na-primary-text); border-color: color-mix(in srgb, var(--na-primary) 28%, transparent); }
.ranking-footer-tips { border-top: 1px solid var(--na-border); color: var(--na-muted-foreground); }
.tip-pill { background: var(--na-muted); border: 1px solid var(--na-border); border-radius: 999px; }

/* Card view */
.section-header { border-bottom: 1px solid var(--na-border); }
.section-title { font-weight: 600; }
.section-note { background: var(--na-muted); color: var(--na-muted-foreground); border: 1px solid var(--na-border); }
.card {
    background: var(--na-card);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    box-shadow: var(--na-shadow-sm);
    backdrop-filter: none;
}
.card:hover { transform: none; border-color: color-mix(in srgb, var(--na-primary) 45%, var(--na-border)); box-shadow: var(--na-shadow-md); }
.model-name { font-weight: 700; }
.model-desc { color: var(--na-muted-foreground); }
.flag-badge { border-radius: 999px; font-weight: 500; }
.flag-gold { background: color-mix(in srgb, var(--na-warning) 13%, transparent); color: var(--na-warning); border-color: color-mix(in srgb, var(--na-warning) 30%, transparent); }
.flag-blue { background: var(--na-accent); color: var(--na-primary-text); border-color: color-mix(in srgb, var(--na-primary) 30%, transparent); }
.flag-green { background: color-mix(in srgb, var(--na-success) 12%, transparent); color: var(--na-success); border-color: color-mix(in srgb, var(--na-success) 28%, transparent); }
.flag-purple { background: color-mix(in srgb, var(--na-violet) 14%, transparent); color: var(--na-violet); border-color: color-mix(in srgb, var(--na-violet) 30%, transparent); }
.rate { font-weight: 600; }
.rate-green { background: color-mix(in srgb, var(--na-success) 12%, transparent); color: var(--na-success); border-color: color-mix(in srgb, var(--na-success) 28%, transparent); }
.rate-blue { background: var(--na-accent); color: var(--na-primary-text); border-color: color-mix(in srgb, var(--na-primary) 28%, transparent); }
.rate-purple { background: color-mix(in srgb, var(--na-violet) 14%, transparent); color: var(--na-violet); border-color: color-mix(in srgb, var(--na-violet) 30%, transparent); }
.rate-red { background: color-mix(in srgb, var(--na-destructive) 12%, transparent); color: var(--na-destructive); border-color: color-mix(in srgb, var(--na-destructive) 28%, transparent); }
.rate-yellow { background: color-mix(in srgb, var(--na-warning) 12%, transparent); color: var(--na-warning); border-color: color-mix(in srgb, var(--na-warning) 28%, transparent); }
.price-table-wrap { background: var(--na-card); border: 1px solid var(--na-border); border-radius: 12px; }
.price-table th { background: var(--na-muted); color: var(--na-muted-foreground); border-bottom: 1px solid var(--na-border); }
.price-table td { border-bottom: 1px solid var(--na-border); }
.pval-long { color: var(--na-warning); }
.pval-danger { color: var(--na-destructive); }
.pval-cny { color: var(--na-success); }
.pval-cache { color: var(--na-info); }
.card-foot, .foot-row { color: var(--na-muted-foreground); }
.foot-row { border-top: 1px solid var(--na-border); }
.foot-val { color: var(--na-primary-text); }
.foot-val.cny { color: var(--na-success); }
.alert { border-radius: 10px; }
.alert.yellow { background: color-mix(in srgb, var(--na-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--na-warning) 28%, transparent); color: var(--na-warning); }
.alert.blue { background: var(--na-accent); border: 1px solid color-mix(in srgb, var(--na-primary) 28%, transparent); color: var(--na-primary-text); }
.alert.red { background: color-mix(in srgb, var(--na-destructive) 10%, transparent); border: 1px solid color-mix(in srgb, var(--na-destructive) 28%, transparent); color: var(--na-destructive); }

/* Inline colour literals in the markup / JS templates -> NewAPI tokens */
[style*="color: #60a5fa"], [style*="color:#60a5fa"] { color: var(--na-primary-text) !important; }
[style*="color: #34d399"], [style*="color:#34d399"] { color: var(--na-success) !important; }
[style*="color: #fbbf24"], [style*="color:#fbbf24"] { color: var(--na-warning) !important; }
.formula-main [style*="color: #fff"] { color: var(--na-foreground) !important; background: var(--na-background) !important; border: 1px solid var(--na-border); }
.card[style*="rgba(16, 185, 129"] { border-color: color-mix(in srgb, var(--na-success) 40%, transparent) !important; background: color-mix(in srgb, var(--na-success) 4%, var(--na-card)) !important; }
.alert.green { background: color-mix(in srgb, var(--na-success) 10%, transparent) !important; border: 1px solid color-mix(in srgb, var(--na-success) 28%, transparent) !important; color: var(--na-success) !important; }
.section-note[style*="#34d399"] { border-color: color-mix(in srgb, var(--na-success) 30%, transparent) !important; background: color-mix(in srgb, var(--na-success) 10%, transparent); }