/* =========================================================
   星核服务器 · 共享主题样式
   设计语言：Microsoft / Fluent 2 风格 + 橙色品牌色
   依赖：design-system/tokens.css（此处内联同等变量，避免额外请求）
   ========================================================= */

:root {
  --brand-10:#2B0A00; --brand-20:#491402; --brand-30:#661E01;
  --brand-40:#842804; --brand-50:#A23302; --brand-60:#BF3F00;
  --brand-70:#D94F00; --brand-80:#F2610C; --brand-90:#FF7A1A;
  --brand-100:#FFE9DC;

  --neutral-bg:#FFFFFF; --neutral-bg-2:#F5F5F5; --neutral-bg-3:#FAFAFA;
  --neutral-fg-1:#1B1B1B; --neutral-fg-2:#424242; --neutral-fg-3:#616161;
  --neutral-stroke-1:#E0E0E0; --neutral-stroke-2:#D1D1D1;

  --status-success:#107C10; --status-warning:#F7630C;
  --status-danger:#C42B1C; --status-info:#0F6CBD;

  --font-sans:"Segoe UI Variable","Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;

  --text-display:44px; --text-title-1:32px; --text-title-2:24px;
  --text-title-3:20px; --text-body:15px; --text-caption:13px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --layout-max:1200px; --layout-gutter:24px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 0 1px rgba(0,0,0,.1);
  --shadow-card-hover:0 6px 16px rgba(0,0,0,.10);
  --shadow-float:0 16px 48px rgba(0,0,0,.18);

  --motion-fast:120ms; --motion-normal:200ms;
  --motion-curve:cubic-bezier(.33,0,.67,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-body);
  line-height:1.6; color:var(--neutral-fg-1); background:var(--neutral-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,ul,ol { margin:0; }
ul,ol { padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }

/* 可见焦点态（可访问性） */
:focus-visible { outline:2px solid var(--brand-80); outline-offset:2px; border-radius:var(--radius-sm); }

/* ---------- 排版工具类 ---------- */
.container { max-width:var(--layout-max); margin:0 auto; padding:0 var(--layout-gutter); }
.section { padding:var(--space-8) 0; }
.section--alt { background:var(--neutral-bg-2); }
.eyebrow-no { /* 刻意不提供英文小标题样式，遵守规范 */ }

.display { font-size:var(--text-display); line-height:1.27; font-weight:600; letter-spacing:-.01em; }
.title-1 { font-size:var(--text-title-1); line-height:1.31; font-weight:600; }
.title-2 { font-size:var(--text-title-2); line-height:1.33; font-weight:600; }
.title-3 { font-size:var(--text-title-3); line-height:1.4; font-weight:600; }
.lead { font-size:18px; line-height:1.6; color:var(--neutral-fg-2); }
.muted { color:var(--neutral-fg-3); }
.center { text-align:center; }
.stack > * + * { margin-top:var(--space-4); }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:40px; padding:0 20px; border-radius:var(--radius-sm);
  font-size:var(--text-body); font-weight:600; border:1px solid transparent;
  transition:background var(--motion-fast) var(--motion-curve),
             border-color var(--motion-fast) var(--motion-curve),
             transform var(--motion-fast) var(--motion-curve);
  white-space:nowrap;
}
.btn--primary { background:var(--brand-80); color:#fff; }
.btn--primary:hover { background:var(--brand-90); }
.btn--primary:active { background:var(--brand-70); transform:translateY(1px); }
.btn--secondary { background:#fff; color:var(--neutral-fg-1); border-color:var(--neutral-stroke-2); }
.btn--secondary:hover { background:var(--neutral-bg-2); }
.btn--ghost { background:transparent; color:var(--brand-60); padding:0 8px; }
.btn--ghost:hover { color:var(--brand-80); }
.btn--block { width:100%; }
.btn--lg { height:48px; padding:0 28px; font-size:16px; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--neutral-stroke-1);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; }
.brand__mark {
  width:28px; height:28px; border-radius:var(--radius-sm);
  object-fit:contain; display:inline-block; flex:none;
}
.nav__links { display:flex; align-items:center; gap:4px; }
.nav__links a {
  padding:8px 12px; border-radius:var(--radius-sm); color:var(--neutral-fg-2);
  font-size:14px; font-weight:500; transition:background var(--motion-fast),color var(--motion-fast);
}
.nav__links a:hover { background:var(--neutral-bg-2); color:var(--neutral-fg-1); }
.nav__links a.is-active { color:var(--brand-60); font-weight:600; }
.nav__toggle { display:none; background:none; border:1px solid var(--neutral-stroke-2);
  border-radius:var(--radius-sm); width:40px; height:40px; font-size:18px; color:var(--neutral-fg-1); }

/* ---------- 卡片 ---------- */
.grid { display:grid; gap:var(--space-5); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

.card {
  background:#fff; border:1px solid var(--neutral-stroke-1); border-radius:var(--radius-md);
  padding:var(--space-5); box-shadow:var(--shadow-card);
  transition:border-color var(--motion-normal) var(--motion-curve),
             box-shadow var(--motion-normal) var(--motion-curve),
             transform var(--motion-normal) var(--motion-curve);
}
.card:hover { border-color:var(--brand-80); box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.card__icon {
  width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand-100);
  color:var(--brand-70); display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:var(--space-4);
}
.card__title { margin-bottom:var(--space-2); }
.card__text { color:var(--neutral-fg-2); font-size:14px; }
.link-more { display:inline-flex; align-items:center; gap:4px; color:var(--brand-60);
  font-weight:600; font-size:14px; margin-top:var(--space-4); }
.link-more:hover { color:var(--brand-80); }

/* ---------- 统计条 ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.stat__num { font-size:32px; font-weight:600; color:var(--brand-70); line-height:1.2; }
.stat__label { color:var(--neutral-fg-3); font-size:14px; margin-top:4px; }

/* ---------- Hero ---------- */
.hero { padding:var(--space-8) 0; background:
  radial-gradient(1200px 400px at 80% -10%, rgba(242,97,12,.10), transparent 60%),
  var(--neutral-bg); }
.hero__inner { max-width:760px; }
.hero .display { margin-bottom:var(--space-4); }
.hero .lead { margin-bottom:var(--space-6); }
.hero__actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.hero__badge {
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--brand-100); color:var(--brand-70); font-size:13px; font-weight:600; margin-bottom:var(--space-5);
}

/* ---------- 步骤 ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); counter-reset:step; }
.step { padding:var(--space-5); border:1px solid var(--neutral-stroke-1); border-radius:var(--radius-md); background:#fff; }
.step__num {
  width:36px; height:36px; border-radius:var(--radius-pill); background:var(--brand-80); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:var(--space-3);
}

/* ---------- 表单 ---------- */
.field { margin-bottom:var(--space-4); }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:var(--space-2); }
.field .req { color:var(--status-danger); margin-left:2px; }
.input, .textarea, .select {
  width:100%; padding:10px 12px; font-size:15px; font-family:inherit; color:var(--neutral-fg-1);
  background:#fff; border:1px solid var(--neutral-stroke-2); border-radius:var(--radius-sm);
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color:var(--brand-80); box-shadow:0 0 0 3px rgba(242,97,12,.18);
}
.textarea { min-height:120px; resize:vertical; line-height:1.5; }
.field__hint { font-size:13px; color:var(--neutral-fg-3); margin-top:6px; }
.field--error .input { border-color:var(--status-danger); }
.field__error { font-size:13px; color:var(--status-danger); margin-top:6px; display:none; }
.field--error .field__error { display:block; }

/* 表单内联提示（替代 alert） */
.form-msg { display:none; align-items:flex-start; gap:8px; margin-top:var(--space-3);
  padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; line-height:1.5; }
.form-msg.is-show { display:flex; }
.form-msg--error { background:#FDECEC; border:1px solid #F5C2C2; color:#B42318; }
.form-msg--success { background:#EAF6EC; border:1px solid #BFE3C6; color:#1E7A36; }
.form-msg__icon { flex:none; font-size:16px; line-height:1.4; }

/* 按钮禁用态（验证码倒计时等） */
.btn[disabled] { opacity:.55; cursor:not-allowed; pointer-events:none; }

/* ---------- 徽章 / 提示框 ---------- */
.badge { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; background:var(--brand-100); color:var(--brand-70); }
.notice { display:flex; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-md);
  border:1px solid var(--neutral-stroke-1); background:var(--neutral-bg-3); }
.notice--warning { border-color:#F6C7A8; background:#FFF6EF; }
.notice__icon { font-size:20px; line-height:1.4; }

/* ---------- 面包屑 / 页面头 ---------- */
.page-head { padding:var(--space-7) 0 var(--space-5); background:var(--neutral-bg-2); }
.breadcrumb { font-size:13px; color:var(--neutral-fg-3); margin-bottom:var(--space-3); }
.breadcrumb a:hover { color:var(--brand-60); }

/* ---------- FAQ 折叠 ---------- */
.faq { border-top:1px solid var(--neutral-stroke-1); }
.faq__item { border-bottom:1px solid var(--neutral-stroke-1); }
.faq__q {
  width:100%; text-align:left; background:none; border:none; padding:var(--space-4) 0;
  font-size:16px; font-weight:600; color:var(--neutral-fg-1); display:flex;
  justify-content:space-between; align-items:center; gap:var(--space-4);
}
.faq__q .chev { transition:transform var(--motion-normal) var(--motion-curve); color:var(--neutral-fg-3); }
.faq__item[open] .chev { transform:rotate(180deg); }
.faq__a { padding:0 0 var(--space-4); color:var(--neutral-fg-2); max-width:760px; }
.faq__a p + p { margin-top:var(--space-3); }

/* ---------- 账号框架 ---------- */
.auth-wrap { max-width:420px; margin:0 auto; }
.auth-card { background:#fff; border:1px solid var(--neutral-stroke-1); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-card); }
.auth-switch { text-align:center; margin-top:var(--space-4); font-size:14px;
  color:var(--neutral-fg-3); }
.auth-switch a { color:var(--brand-60); font-weight:600; text-decoration:none; }
.auth-switch a:hover { text-decoration:underline; }
.auth-terms { text-align:center; margin-top:var(--space-3); font-size:13px;
  color:var(--neutral-fg-3); }
.auth-terms a { color:var(--brand-60); text-decoration:none; }
.auth-terms a:hover { text-decoration:underline; }
.divider { display:flex; align-items:center; gap:var(--space-3); color:var(--neutral-fg-3);
  font-size:13px; margin:var(--space-5) 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--neutral-stroke-1); }

/* ---------- 页脚 ---------- */
.site-footer { background:var(--neutral-bg-2); border-top:1px solid var(--neutral-stroke-1);
  padding:var(--space-7) 0 var(--space-5); margin-top:var(--space-8); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-6); }
.footer-col h4 { font-size:14px; font-weight:600; margin-bottom:var(--space-3); }
.footer-col a { display:block; color:var(--neutral-fg-2); font-size:14px; padding:6px 0; }
.footer-col a:hover { color:var(--brand-60); }
.footer-bottom { margin-top:var(--space-6); padding-top:var(--space-4);
  border-top:1px solid var(--neutral-stroke-1); font-size:13px; color:var(--neutral-fg-3);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); }

/* ---------- 响应式 ---------- */
@media (max-width:960px) {
  .grid--3, .steps { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  :root { --text-display:32px; --text-title-1:26px; --text-title-2:21px; }
  .nav__links { display:none; position:absolute; top:60px; left:0; right:0;
    flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--neutral-stroke-1);
    padding:var(--space-3) var(--layout-gutter); gap:2px; }
  .nav__links.is-open { display:flex; }
  .nav__toggle { display:inline-flex; align-items:center; justify-content:center; }
  .grid--3, .grid--2, .steps, .stats { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero__actions { flex-direction:column; align-items:stretch; }
}