/* ============================================================
   TrackPhone UI — Skin: Verio · Reversly Classic（基准还原）
   来源：ui-system/verio.html + UI-SYSTEM.md 第 5 章
   用法：全站 <head> 内在业务样式之后引入（覆盖层）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
  /* -- 基础 token（UI-SYSTEM.md Verio） -- */
  --canvas: #F5FAFF;
  --card: #FFFFFF;
  --navy: #011A61;
  --navy-light: #01257F;
  --emerald: #028C6E;
  --cta: #1664FA;
  --cta-hover: #0B57E0;
  --ink: #181D27;
  --muted-ink: #414753;
  --border-v: #E9EAEB;
  --border-strong-v: #D5D8DC;
  --ok: #028C6E;
  --warn: #D97706;
  --err: #F04438;
  --radius-card: 24px;
  --shadow-card-verio: 0 4px 6px -1px rgba(1,26,97,.05), 0 10px 15px -3px rgba(1,26,97,.03), 0 20px 25px -5px rgba(1,26,97,.05);

  /* -- Verio 皮肤完整 token（verio.html） -- */
  --brand: #011A61;
  --brand-deep: #01257F;
  --accent: #028C6E;
  --accent-text: #027458;
  --faint: #6B7385;
  --ok-bg: #EAF7F3; --ok-bd: #C7EADF; --ok-text: #027458;
  --warn-v: #B45309; --amber: #E8A80A;
  --hero-bg: linear-gradient(100deg, #EFF9FE, #EFFF8);
  --band: linear-gradient(180deg, #EFF9FE, #F7FCFF);
  --grad-text: linear-gradient(92deg, #011A61 20%, #028C6E);
  --final-bg: #011A61;
  --grad-text-final: linear-gradient(92deg, #FFFFFF, #9FE8D4);
  --bar: linear-gradient(90deg, #1664FA, #028C6E);
  --head-bg: #FFFFFF;
  --foot-bg: #01257F; --foot-text: #C3CDEB; --foot-muted: #8D9CC8;
  --foot-border: rgba(255,255,255,.14); --foot-strong: #FFFFFF;
  --r-card: 24px; --r-inner: 16px; --r-pill: 50px; --r-sm: 12px;
  --r-btn: 50px; --r-hero: 24px;
  --shadow-pop: 0 16px 40px rgba(1,26,97,.14);
  --font-verio: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -- legal-pages.css 语义桥接 -- */
  --primary: #1664FA;
  --primary-hover: #0B57E0;
  --blue: #01257F;
  --surface: #FFFFFF;
  --surface-soft: #EFF6FF;
  --text: #181D27;
  --muted: #414753;
  --border: rgba(25,35,60,.12);
  --bg: #F5FAFF;

  /* -- support-widget.css 语义桥接 -- */
  --sw-brand: #1664FA;
  --sw-brand-hover: #0B57E0;
  --sw-border: #E9EAEB;
  --sw-border-strong: #D5D8DC;
  --sw-text: #181D27;
  --sw-muted: #414753;
  --sw-placeholder: #8B93A4;
  --sw-shadow: 0 22px 48px rgba(1,26,97,.14);
  --sw-success-bg: #EAF7F3; --sw-success-border: #C7EADF; --sw-success-text: #056B54;
  --sw-warn-bg: #FDF6E7; --sw-warn-border: #F2E0B2; --sw-warn-text: #8A5A0A;
  --sw-error-bg: #FDEEEC; --sw-error-border: #F6CDC6; --sw-error-text: #B32B18;

  /* -- 账户页 fgl-* 桥接（UI-SYSTEM.md 第 2 章） -- */
  --fgl-bg: #F5FAFF;
  --fgl-bg-soft: #EFF6FF;
  --fgl-surface: #FFFFFF;
  --fgl-surface-soft: #EFF6FF;
  --fgl-surface-muted: #F5FAFF;
  --fgl-border: rgba(25,35,60,.12);
  --fgl-border-strong: rgba(25,35,60,.18);
  --fgl-dark: #011A61;
  --fgl-text: #181D27;
  --fgl-muted: #414753;
  --fgl-blue: #1664FA;
  --fgl-orange: #D97706;
  --fgl-green: #028C6E;
  --fgl-purple: #028C6E;
  --fgl-shadow: 0 4px 6px -1px rgba(1,26,97,.05), 0 10px 15px -3px rgba(1,26,97,.03), 0 20px 25px -5px rgba(1,26,97,.05);
  --fgl-radius: 24px;
}

/* ============ 全局基底 ============ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--canvas) !important;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
:is(button, input, select, textarea) { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 4px; }

/* ============ legal-pages.css 组件换肤 ============ */
body {
  background: linear-gradient(180deg, #F5FAFF 0%, #F5FAFF 100%) !important;
}
.brand { font-family: "DM Sans", system-ui, sans-serif !important; letter-spacing: -.01em; color: var(--navy); }
.brand-badge {
  background: linear-gradient(135deg, #011A61, #1664FA) !important;
  box-shadow: 0 14px 26px rgba(1,26,97,.20) !important;
  border-radius: 14px;
}
.nav a:hover, .lang-toggle:hover {
  background: rgba(22,100,250,.08) !important;
  color: var(--cta) !important;
}
.header-cta, .cta-link {
  background: var(--cta) !important;
  color: #fff !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  border-radius: 50px !important;
  transition: background .2s ease;
}
.header-cta:hover, .cta-link:hover { background: var(--cta-hover) !important; }
.topbar {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border-v);
}
.panel {
  border-radius: 24px !important;
  box-shadow: var(--shadow-card-verio) !important;
  border: 1px solid var(--border-v);
}
.panel h2, .section-block h3, h1 {
  font-family: "DM Sans", system-ui, sans-serif !important;
  color: var(--navy) !important;
}
.highlight-card, .contact-item {
  border-radius: 16px !important;
  background: var(--surface-soft) !important;
  border: 1px solid #E3EDFB !important;
}
.eyebrow {
  background: rgba(2,140,110,.10) !important;
  color: var(--emerald) !important;
}
.footer { background: #01257F !important; }
.footer h4 { font-family: "DM Sans", system-ui, sans-serif !important; }
.footer-divider { border-top: 1px solid rgba(255,255,255,.14); color: #8D9CC8; }

/* ============ support-widget.css 组件换肤 ============ */
.fgl-support-fab-badge {
  background: var(--cta) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 40px rgba(1,26,97,.18) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
}
.sw-panel {
  border-radius: 16px;
  font-family: "DM Sans", system-ui, sans-serif !important;
}
.sw-field input[type="text"]:focus,
.sw-field input[type="email"]:focus,
.sw-field textarea:focus,
.sw-field select:focus {
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 2px rgba(22,100,250,.12) !important;
}

/* ============ Astro scoped CSS 覆盖（营销主站） ============
   属性选择器命中 scoped 类（哈希稳定），旧橙 #f48343 / 紫 #8e97fd → Verio */
body#oximize [class*="_orange_"], body#oximize [class*="_orangeMob_"] {
  background: var(--cta) !important;
  color: #fff !important;
  border-radius: 50px !important;
  transition: background .2s ease;
}
body#oximize [class*="_orange_"]:hover, body#oximize [class*="_orangeMob_"]:hover {
  background: var(--cta-hover) !important;
}
body#oximize [class*="_loading_"] {
  background-color: #8B93A4 !important;
  border: 1px solid #8B93A4 !important;
}
/* 步骤数字：紫青渐变文字 → Verio 藏青→翡翠渐变 */
body#oximize [class*="_number_"] {
  background-image: var(--grad-text) !important;
  color: var(--navy);
}
/* 步骤首项左侧竖线 #01fff0 → 翡翠 */
body#oximize [class*="_steps_"] [class*="_item_"]:first-of-type:before {
  background-color: var(--emerald) !important;
}
/* 评价作者名渐变 → 藏青→翡翠 */
body#oximize [class*="_authorName_"] {
  background-image: var(--grad-text) !important;
}
/* 页面画布 #f4f7fd → Verio 淡蓝 */
body#oximize { background: #F5FAFF !important; }
/* 头部深色区文字 #b3c4ff → Verio 藏蓝浅文字 */
body#oximize [class*="_title_"][class*="_dark_"], body#oximize [class*="_dark_"] [class*="_title_"] { color: #C3CDEB !important; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body#oximize *, body { transition: none !important; animation: none !important; }
}