/**
 * Lite marketing / legal — dark mode via CSS variables only.
 * Scope: html[data-theme="dark"] on lite pages (not v1/v2/workspace).
 */
@import url("/assets/design-tokens.css");

html.site-unified-chrome:not(.has-v2-user-chrome):not(.page-cost-v2) {
  --bg: #f7f7fa;
  --surface: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --border: #ececf1;
  --primary: #6d5ae6;

  --site-page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #fff) 0%, var(--bg) 100%);
  --text-main: var(--text);
  --text-sub: var(--muted);
  --card-bg: var(--surface);
  --line: var(--border);
  --dark-bg: var(--bg);
  --primary-2: #7c6cf5;
}

html.site-unified-chrome:not(.has-v2-user-chrome):not(.page-cost-v2)[data-theme="dark"] {
  --bg: #0b0d12;
  --surface: #161b22;
  --text: #f3f4f6;
  --muted: #b8c0cc;
  --border: rgba(255, 255, 255, 0.1);
  --primary: #8b7cf8;

  --site-page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #000) 0%, var(--bg) 100%);
  --primary-2: #a5b4fc;
  color-scheme: dark;
}

html[data-theme="dark"].site-unified-chrome:not(.has-v2-user-chrome) body > header {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom-color: var(--border);
}

html[data-theme="dark"].site-unified-chrome:not(.has-v2-user-chrome) .home-mobile-backdrop {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="dark"].site-unified-chrome:not(.has-v2-user-chrome) .home-mobile-drawer__panel {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"].site-unified-chrome:not(.has-v2-user-chrome) .home-bg-glow,
html[data-theme="dark"].site-unified-chrome:not(.has-v2-user-chrome) .toket-bg-glow {
  opacity: 0.45;
}

/* —— Toket marketing: /news/ index (news-lite.html) —— */
html.site-unified-chrome body.news-lite-doc {
  font-family: var(--toket-font-sans, var(--dt-font-sans, system-ui, sans-serif));
  min-height: 100vh;
  background-attachment: fixed;
}

html.site-unified-chrome body.news-lite-doc::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(
    --toket-bg-glow,
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.12), transparent 55%)
  );
}

html.site-unified-chrome:is([data-theme="dark"], .dark) body.news-lite-doc::before {
  background:
    radial-gradient(circle at 50% -4%, rgba(99, 91, 255, 0.14), transparent 36%),
    radial-gradient(circle at 92% 88%, rgba(124, 108, 255, 0.05), transparent 32%);
}

html.site-unified-chrome body.news-lite-doc .news-lite {
  position: relative;
  z-index: 1;
}

html.site-unified-chrome[data-theme="light"] body.news-lite-doc {
  background: linear-gradient(180deg, #f8fafc 0%, #f6f8fc 52%, #f0f4fa 100%);
  color-scheme: light;
}

html.site-unified-chrome:is([data-theme="dark"], .dark) body.news-lite-doc {
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 91, 255, 0.2), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(124, 108, 255, 0.07), transparent 36%),
    #0b1020;
  color-scheme: dark;
}

html.site-unified-chrome body.news-lite-doc > header {
  background: color-mix(in srgb, var(--toket-card-bg, var(--card-bg)) 78%, transparent);
  backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  -webkit-backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

html.site-unified-chrome body.news-lite-doc .home-header-cta {
  background: var(--toket-gradient-primary) !important;
  box-shadow: var(--toket-btn-primary-shadow);
}

html.site-unified-chrome body.news-lite-doc .home-header-cta:hover {
  background: var(--toket-gradient-primary-hover) !important;
  box-shadow: var(--toket-btn-primary-shadow-hover);
}

/* News index: desktop header theme; mobile drawer (lite-chrome.css) */
@media (min-width: 961px) {
  html.site-unified-chrome body.news-lite-doc .nav-end > #homeThemeSwitch.home-theme-switch--desktop {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.news-lite .hero {
  padding: 56px 0 44px;
  text-align: center;
}

.news-lite .hero .wrap {
  position: relative;
  max-width: 720px;
  padding: 40px 32px 36px;
  border-radius: var(--toket-radius-card-lg, 24px);
  background: var(--toket-card-bg, var(--card-bg));
  border: var(--toket-card-border, 1px solid var(--line));
  box-shadow: var(--toket-card-shadow);
  backdrop-filter: blur(var(--toket-blur-card-light, 16px));
  -webkit-backdrop-filter: blur(var(--toket-blur-card-light, 16px));
}

.news-lite .hero__badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--toket-brand-2, var(--primary-2));
  background: color-mix(in srgb, var(--toket-brand, var(--primary)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--toket-brand, var(--primary)) 24%, transparent);
  border-radius: 999px;
}

.news-lite .hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-main);
}

.news-lite .hero p {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--text-sub) 92%, transparent);
  line-height: 1.65;
}

.news-lite-search {
  border-radius: var(--toket-radius-control, 14px);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--toket-card-bg, var(--card-bg)) 88%, transparent);
}

.news-lite-search:focus {
  border-color: color-mix(in srgb, var(--toket-brand, var(--primary)) 45%, var(--line));
  box-shadow: var(--toket-focus-ring, 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent));
}

.news-lite-tab.is-active {
  background: color-mix(in srgb, var(--toket-brand, var(--primary)) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--toket-brand, var(--primary)) 40%, var(--line));
  color: var(--toket-brand, var(--primary));
}

.news-lite .news-card {
  background: var(--toket-card-bg, var(--card-bg));
  border: var(--toket-card-border, 1px solid var(--line));
  border-radius: var(--toket-radius-panel, 16px);
  box-shadow: var(--toket-card-shadow, 0 4px 16px rgba(15, 23, 42, 0.06));
  backdrop-filter: blur(var(--toket-blur-card-light, 16px));
  -webkit-backdrop-filter: blur(var(--toket-blur-card-light, 16px));
  transition:
    border-color var(--toket-transition-ui, 0.2s ease),
    transform var(--toket-transition-ui, 0.2s ease);
}

.news-lite .news-card:hover {
  border-color: color-mix(in srgb, var(--toket-brand, var(--primary)) 35%, var(--line));
  transform: translateY(var(--toket-translate-hover-card, -2px));
  box-shadow: var(--toket-card-shadow);
}

.news-lite .news-card__tag {
  padding: 3px 10px;
  background: color-mix(in srgb, var(--toket-brand, var(--primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--toket-brand, var(--primary)) 22%, transparent);
  border-radius: 999px;
  color: var(--toket-brand-2, var(--primary-2));
  font-weight: 600;
}

html.site-unified-chrome:is([data-theme="dark"], .dark) body.news-lite-doc .news-lite .hero .wrap,
html.site-unified-chrome:is([data-theme="dark"], .dark) body.news-lite-doc .news-lite .news-card {
  backdrop-filter: blur(var(--toket-blur-card-dark, 20px));
  -webkit-backdrop-filter: blur(var(--toket-blur-card-dark, 20px));
}

/* —— SEO static pages: /zh|en /(tools|blog|models|compare)/*.html —— */
html.site-unified-chrome:has(body.seo-lite-doc):not(.page-cost-v2) {
  --surface: var(--dt-card-bg, var(--card-bg));
  --panel: var(--surface);
  --site-page-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg, var(--dt-page-bg)) 96%, #fff) 0%,
    var(--bg, var(--dt-page-bg)) 100%
  );
}

html.site-unified-chrome:has(body.seo-lite-doc):not(.page-cost-v2)[data-theme="dark"],
html.site-unified-chrome:has(body.seo-lite-doc):not(.page-cost-v2).dark {
  --site-page-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg, var(--dt-page-bg)) 92%, #000) 0%,
    var(--bg, var(--dt-page-bg)) 100%
  );
}

html.site-unified-chrome body.seo-lite-doc {
  font-family: var(--toket-font-sans, var(--dt-font-sans, system-ui, sans-serif));
  min-height: 100vh;
  color: var(--text-main, var(--text, var(--dt-text)));
  background-attachment: fixed;
}

html.site-unified-chrome body.seo-lite-doc::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(
    --toket-bg-glow,
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.12), transparent 55%)
  );
}

html.site-unified-chrome:is([data-theme="dark"], .dark) body.seo-lite-doc::before {
  background:
    radial-gradient(circle at 50% -4%, rgba(99, 91, 255, 0.14), transparent 36%),
    radial-gradient(circle at 92% 88%, rgba(124, 108, 255, 0.05), transparent 32%);
}

html.site-unified-chrome body.seo-lite-doc .seo-lite,
html.site-unified-chrome body.seo-lite-doc #siteFooterMount,
html.site-unified-chrome body.seo-lite-doc > footer {
  position: relative;
  z-index: 1;
}

html.site-unified-chrome[data-theme="light"] body.seo-lite-doc {
  background: linear-gradient(180deg, #f8fafc 0%, #f6f8fc 52%, #f0f4fa 100%);
  color-scheme: light;
}

html.site-unified-chrome:is([data-theme="dark"], .dark) body.seo-lite-doc {
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 91, 255, 0.2), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(124, 108, 255, 0.07), transparent 36%),
    #0b1020;
  color-scheme: dark;
}

html.site-unified-chrome body.seo-lite-doc > header {
  background: color-mix(in srgb, var(--toket-card-bg, var(--card-bg)) 78%, transparent);
  backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  -webkit-backdrop-filter: blur(var(--toket-blur-overlay, 12px));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

html.site-unified-chrome body.seo-lite-doc .home-header-cta {
  background: var(--toket-gradient-primary) !important;
  box-shadow: var(--toket-btn-primary-shadow);
}

html.site-unified-chrome body.seo-lite-doc .home-header-cta:hover {
  background: var(--toket-gradient-primary-hover) !important;
  box-shadow: var(--toket-btn-primary-shadow-hover);
}

@media (min-width: 961px) {
  html.site-unified-chrome body.seo-lite-doc .nav-end > #homeThemeSwitch.home-theme-switch--desktop {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}