/* FDE 深色主题 —— 复刻线上版（Base44）视觉 token；加载于 styles.css 之后，只覆盖颜色与质感，不改布局。 */
:root {
  color-scheme: dark;
  --background: 235 35% 6%; --foreground: 230 30% 94%; --card-h: 236 30% 10%; --primary-h: 245 85% 66%;
  --secondary-h: 236 25% 15%; --muted-h: 232 15% 62%; --accent-h: 275 80% 66%; --border-h: 236 25% 18%;
  --blue: hsl(245 85% 66%); --blue-deep: hsl(245 85% 60%); --ink: hsl(230 30% 94%); --muted: hsl(232 15% 62%);
  --line: hsl(236 25% 18%); --canvas: #070A14; --green: #34d399; --radius: .85rem;
  --card: hsl(236 30% 10%); --card-2: hsl(236 28% 12.5%); --sec: hsl(236 25% 15%);
  --text: hsl(230 30% 94%); --surface: hsl(236 30% 10%); --surface-2: hsl(236 25% 15%);
  --grad: linear-gradient(90deg, #37E6FF, #4F6BFF 50%, #A78BFA);
  --grad-btn: linear-gradient(90deg, #4f46e5, #9333ea);
  font-family: var(--font-body, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
html { background: #070A14; }
body { background: #070A14; color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(46rem 26rem at 18% -4%, rgba(79,70,229,.16), transparent 70%), radial-gradient(40rem 24rem at 100% 8%, rgba(168,85,247,.12), transparent 70%); }
.app-shell, .sidebar { position: relative; z-index: 1; }
.sidebar { position: fixed; }
h1, h2, h3, .page-title h1, .hero h1 { font-family: var(--font-heading, inherit); color: var(--ink); }
button:focus-visible, a:focus-visible { outline-color: rgba(129,140,248,.7); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(99,102,241,.45); border-color: var(--blue); }
::selection { background: rgba(99,102,241,.4); }
* { scrollbar-color: hsl(236 25% 22%) transparent; }

/* 侧栏 / 顶栏 */
.sidebar { background: rgba(9,11,20,.92); border-right-color: var(--line); backdrop-filter: blur(14px); }
.brand small, .nav-caption, .sidebar-foot, .sidebar-bottom p { color: var(--muted); }
.brand-mark { background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 6px 18px rgba(99,102,241,.35); font-style: normal; }
.nav-item { color: var(--muted); }
.nav-item:hover { background: hsl(236 25% 13%); color: var(--ink); }
.nav-item.active { background: hsl(245 50% 18% / .7); color: #c7d2fe; }
.nav-item .nav-dot { background: #a5b4fc; }
.sidebar-bottom { background: linear-gradient(140deg, hsl(245 45% 14%), hsl(275 40% 13%)); border-color: hsl(245 40% 24%); }
.network-icon { background: var(--card); border-color: hsl(245 50% 35%); color: #a5b4fc; box-shadow: 7px -5px 0 hsl(245 40% 20%); }
.text-button, .subtle-link { color: #a5b4fc; }
.topbar { background: rgba(9,11,20,.78); border-bottom-color: var(--line); backdrop-filter: blur(14px); }
.breadcrumb-root, .divider, .breadcrumb-home, .service-status, .icon-button, .notify-bell { color: var(--muted); }
.icon-button:hover { background: var(--sec); color: var(--ink); }
.avatar { background: hsl(245 50% 22%); color: #c7d2fe; }
.page-footer { border-top-color: var(--line); color: var(--muted); }

/* 按钮 */
.button { background: var(--sec); border-color: var(--line); color: var(--ink); }
.button:hover:not(:disabled) { background: hsl(236 25% 19%); filter: none; }
.button.primary { background: var(--grad-btn); border-color: transparent; color: #fff; box-shadow: 0 6px 20px -6px rgba(124,58,237,.6); }
.button.primary:hover:not(:disabled) { background: var(--grad-btn); filter: brightness(1.12); }
.button.soft { background: hsl(245 50% 20%); border-color: transparent; color: #c7d2fe; }
.button.danger { color: #fca5a5; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }

/* 卡片类表面 */
.panel, .list-item, .metric, .filter-panel, .app-card, .stats-row, .integration-item, .notify-item, .queue-metric, .search-box, .empty-state, dialog, .notice {
  background: var(--card); border-color: var(--line); color: var(--ink); }
.app-card:hover { border-color: hsl(245 50% 40%); box-shadow: 0 14px 40px -18px rgba(99,102,241,.55); }
.stat { border-right-color: var(--line); }
.stat-icon, .empty-symbol, .callout-icon { background: hsl(245 45% 17%); color: #a5b4fc; border-color: hsl(245 40% 26%); }
.stat-label, .section-heading p, .section-kicker, .catalog-toolbar, .filter-label, .card-summary, .developer-line, .card-bottom, .muted-text,
.page-title p, .list-item p, .list-meta, .field, .field small, .check-field, .metric-label, .metric small, .detail-summary, .detail-item dt,
.message-header, .modal-header p, .integration-item p, .section-description, td, th, .empty-state, .initial-state, .hero-note,
.notify-foot, .notify-item .review-reason, .callout p { color: var(--muted); }
.empty-state h3, .catalog-toolbar strong, .price, .detail-item dd, .message-body, .json-view { color: var(--ink); }
.empty-state { border-style: dashed; border-color: hsl(236 25% 22%); }
.filter-row { border-bottom-color: var(--line); }
.chip { color: var(--muted); }
.chip:hover { color: var(--ink); background: var(--sec); }
.chip.active { background: hsl(245 50% 20%); color: #c7d2fe; }
.filter-select, .field input, .field select, .field textarea, .search-box input {
  background: var(--sec); border-color: transparent; color: var(--ink); }
.field input::placeholder, .field textarea::placeholder, .search-box input::placeholder { color: hsl(232 12% 46%); }
.search-box { color: var(--muted); }
.app-icon { background: hsl(245 45% 17%); color: #a5b4fc; border-color: hsl(245 40% 26%); }
.app-icon[data-color="green"], .app-icon[data-color="teal"] { background: rgba(52,211,153,.1); color: #6ee7b7; border-color: rgba(52,211,153,.22); }
.app-icon[data-color="purple"] { background: rgba(168,85,247,.12); color: #d8b4fe; border-color: rgba(168,85,247,.26); }
.app-icon[data-color="orange"] { background: rgba(251,146,60,.1); color: #fdba74; border-color: rgba(251,146,60,.24); }
.app-icon[data-color="cyan"] { background: rgba(55,230,255,.1); color: #67e8f9; border-color: rgba(55,230,255,.24); }
.card-arrow { color: hsl(232 15% 45%); }
.card-bottom { border-top-color: var(--line); }
.price.free { color: #6ee7b7; }
.tag { background: var(--sec); border-color: var(--line); color: var(--muted); }
.tag.demo { background: rgba(251,191,36,.08); color: #fcd34d; border-color: rgba(251,191,36,.25); }
.tag.blue { background: hsl(245 50% 20%); color: #c7d2fe; border-color: hsl(245 40% 30%); }
.tag.warn { background: rgba(251,146,60,.1); color: #fdba74; border-color: rgba(251,146,60,.25); }
.callout { background: linear-gradient(100deg, hsl(245 45% 13%), hsl(275 40% 12%)); border-color: hsl(245 40% 24%); }

/* 提示 / 状态 */
.alert { background: hsl(245 45% 13% / .7); border-color: hsl(245 40% 26%); color: #c7d2fe; }
.alert.warning, .review-note.warning, .metadata-status, .rule-label, .queue-metric.warning { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.28); color: #fcd34d; }
.alert.error, .form-error, .notice.error { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); color: #fca5a5; }
.status-pill { background: var(--sec); border-color: var(--line); color: var(--muted); }
.status-pill.ready { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.25); color: #6ee7b7; }
.review-note, .detail-item, .json-view, .message, .key-secret { background: var(--sec); border-color: var(--line); }
.message.mine { background: hsl(245 45% 17%); border-color: hsl(245 40% 28%); }
.notify-item.unread { background: hsl(245 40% 13%); border-color: hsl(245 40% 28%); }
.runner-alert strong { color: #fcd34d; } .runner-alert small { color: #d6b25e; }
.spinner { border-color: hsl(245 40% 22%); border-top-color: #818cf8; }
.tiny-dot { background: #34d399; } .tiny-dot.muted { background: hsl(232 12% 42%); }

/* 表格 */
th { background: hsl(236 28% 12%); }
th, td { border-bottom-color: var(--line); }
.runner-stats strong, .queue-metric strong, .trend-day { color: var(--ink); }
.failure-track, .trend-bar { background: var(--sec); }

/* 弹窗 / 遮罩 */
dialog { box-shadow: 0 30px 120px -20px rgba(0,0,0,.8); }
dialog::backdrop { background: rgba(3,5,12,.66); }
.modal-header { border-bottom-color: var(--line); }
.mobile-shade.visible { background: rgba(3,5,12,.6); }
.notice { box-shadow: 0 12px 40px rgba(0,0,0,.5); color: var(--ink); }
.auth-tabs button { color: var(--muted); }
.test-shot { background: var(--sec); border-color: var(--line); } .test-shot img { background: #0b0d16; }

/* ---------- 首页 Hero（复刻线上 Mk 组件） ---------- */
.hero.hero-x { min-height: 560px; padding: 0; margin: -6px 0 26px; border: 0; background: none; border-radius: 0; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 28px; align-items: center; }
.hero-x .hero-copy { max-width: 600px; position: relative; z-index: 2; }
.hero-x .eyebrow { color: #22d3ee; font-size: 11px; letter-spacing: 3px; font-weight: 600; font-family: var(--font-en, inherit); margin-bottom: 18px; }
.hero-x .eyebrow-line { width: 22px; height: 1px; background: #22d3ee; }
.hero-x h1 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.3; letter-spacing: .01em; margin-bottom: 16px; font-weight: 700; }
.hero-x h1 span.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-x p { font-size: 15px; color: hsl(232 18% 72%); line-height: 1.75; margin-bottom: 22px; }
.hero-search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 6px 6px 6px 16px; border-radius: 14px; background: hsl(236 30% 9% / .85); border: 1px solid var(--line); color: var(--muted); }
.hero-search:focus-within { border-color: hsl(245 60% 50%); box-shadow: 0 0 0 4px rgba(99,102,241,.15); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-size: 14px; outline: none; }
.hero-search input:focus { outline: none; }
.hero-search button { height: 100%; padding: 0 20px; border: 0; border-radius: 10px; color: #fff; font-weight: 600; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 22px; }
.hero-tags button { padding: 5px 12px; border-radius: 8px; font-size: 12px; color: hsl(232 18% 76%); background: hsl(236 25% 13%); border: 1px solid var(--line); }
.hero-tags button:hover { color: #fff; border-color: hsl(245 50% 40%); }
.hero-x .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-x .hero-actions .button { height: 46px; padding: 0 22px; font-size: 14px; border-radius: 12px; }
.hero-x .hero-actions .button.primary { background: linear-gradient(90deg, #37E6FF, #6b7bff 55%, #A78BFA); color: #fff; box-shadow: 0 10px 30px -10px rgba(79,107,255,.8); }
.hero-x .hero-actions .button.ghost { background: transparent; border-color: hsl(236 20% 30%); }
.era-banner { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 14px; border-radius: 12px; background: hsl(236 30% 10% / .9); border: 1px solid var(--line); font-size: 13px; color: hsl(232 18% 80%); }
.era-banner .bolt { color: #22d3ee; font-size: 16px; }
.era-banner .msg { flex: 1; min-width: 0; }
.era-banner a { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #a5f3fc; border: 1px solid rgba(34,211,238,.45); background: rgba(34,211,238,.08); }
.era-banner a:hover { background: rgba(34,211,238,.16); }
.era-banner .x { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 11px; line-height: 1; padding: 0; display: grid; place-items: center; }
.hero-globe { position: relative; align-self: stretch; min-height: 520px; display: flex; flex-direction: column; }
.globe-stage { position: relative; flex: 1; min-height: 440px; }
.globe-stage::before { content: ""; position: absolute; inset: 12% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(79,70,229,.25), transparent 72%); filter: blur(10px); }
.globe-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.globe-stage canvas:active { cursor: grabbing; }
.globe-horizon { position: absolute; left: 0; right: 0; bottom: 40px; height: 120px; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(99,102,241,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.35) 1px, transparent 1px);
  background-size: 40px 40px; transform: perspective(300px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.globe-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding-top: 6px; }
.globe-stats b { display: block; font: 700 24px/1.3 var(--font-en, inherit); color: #fff; }
.globe-stats b.soon { font-size: 14px; line-height: 2.2; font-family: inherit; }
.globe-stats span { font-size: 11px; color: var(--muted); }
.stats-row.compact { display: none; }
@media (max-width: 1200px) { .hero.hero-x { grid-template-columns: 1fr; } .hero-globe { min-height: 440px; } }
@media (max-width: 760px) {
  .hero.hero-x { min-height: 0; gap: 8px; }
  .hero-x h1 { font-size: 26px; }
  .hero-globe { min-height: 360px; } .globe-stage { min-height: 300px; }
  .globe-stats b { font-size: 20px; }
  .era-banner { flex-wrap: wrap; }
}
.hero.hero-x { margin-top: 12px; }
.globe-stage { margin-top: 18px; }
.sidebar-bottom .text-button { display: block; text-align: left; margin-top: 6px; }
@media (max-width: 760px) { .hero-x h1 { font-size: 23px; } .hero-x h1 br { display: none; } .hero-x .eyebrow { font-size: 10px; letter-spacing: 2px; } }
.hero-globe { overflow: hidden; } .globe-stats { overflow: visible; }