/* ============================================================
   has-design.css — HAS-Agent 前端统一设计 token 源（has-design 规范）
   2026-09-03 建立,与海丝平台 DESIGN.md 同源:
   · 主色 #2563eb 家族（单一家族,白底 WCAG AA）
   · hairline 四档阴影（DESIGN.md 5.1 亮色原子值）,禁传统大阴影
   · 锐圆角体系:页面表面一律 radius-md(4px),浮层 radius-lg(8px)
   · 极光五色 --aurora-* 仅背景装饰,禁用于文字/图表/状态色
   单亮色主题:token 按语义命名,未来加 [data-theme="dark"] 覆盖块
   即可补齐双主题。消费方:index.html / admin.html / subscribe.html
   / web/subscribe.py 结果页。取代原 4 套互不一致的 :root 词表。
   ============================================================ */

/* ===== 字体（全站唯一一份 @font-face;本地优先 + jsDelivr 降级） ===== */
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: local('Alibaba PuHuiTi 3.0 Regular'), local('AlibabaPuHuiTi-3-55-Regular'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-55-regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: local('Alibaba PuHuiTi 3 85 Bold'), local('AlibabaPuHuiTi-3-85-Bold'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-85-bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: local('Alibaba PuHuiTi 3 95 Black'), local('AlibabaPuHuiTi-3-95-ExtraBold'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-95-extrabold/AlibabaPuHuiTi-3-95-ExtraBold.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* 品牌主色 #2563eb 家族 */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #3b82f6;
  --primary-lighter: #60a5fa;
  --primary-deep: #1e40af;
  --primary-bg: rgba(37, 99, 235, .06);
  --primary-bg-hover: rgba(37, 99, 235, .1);
  --text-on-accent: #ffffff;

  /* 背景 / 表面 */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-hover: #f0f0f2;
  --surface-active: #e4e4ee;

  /* 文字 5 级 */
  --text-primary: #1a1a1e;
  --text-secondary: #333333;
  --text-tertiary: #555555;
  --text-quaternary: #707070;
  --text-placeholder: #999999;

  /* 边框三档（浅→强） */
  --border-subtle: #ebebef;
  --border-default: #e2e2e6;
  --border-strong: #c8c8cc;

  /* 公卫风险四级（红/橙/黄/绿） */
  --risk-critical: #dc2626;
  --risk-high: #f97316;
  --risk-medium: #eab308;
  --risk-low: #22c55e;

  /* 语义状态 + 浅底配对 */
  --status-live: #22c55e;
  --status-success: #22c55e;   --status-success-bg: #f0fdf4;
  --status-warning: #f97316;   --status-warning-bg: #ffedd5;   --status-warning-deep: #c2410c;
  --status-error: #dc2626;     --status-error-bg: #fef2f2;     --status-error-hover: #b91c1c;
  --status-info: #2563eb;
  --tag-amber: #d97706;        --tag-amber-bg: #fffbeb;        --tag-amber-deep: #a16207;

  /* 圆角（has-design:页面表面一律 md,浮层 lg） */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* hairline 四档原子值（DESIGN.md 5.1） + 组合档 */
  --hairline-edge: 0 0 0 1px rgba(0, 0, 0, .06);
  --hairline-contact: 0 1px 2px rgba(0, 0, 0, .04);
  --hairline-ambient: 0 4px 12px rgba(0, 0, 0, .06);
  --hairline-top-glow: inset 0 1px 0 rgba(255, 255, 255, .5);
  --hairline-contact-b: 0 1px 0 rgba(0, 0, 0, .05);          /* 顶栏/贴顶元素下沿分割线 */
  --shadow-flat: var(--hairline-edge), var(--hairline-contact);
  --shadow-surface: var(--hairline-edge), var(--hairline-contact), var(--hairline-ambient), var(--hairline-top-glow);
  --shadow-surface-hover: 0 0 0 1px rgba(37, 99, 235, .2), 0 2px 4px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow-overlay: 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 32px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .6);

  /* 字号（对齐海丝 typography token 值） */
  --text-h1: 20px;
  --text-h2: 15px;
  --text-h3: 13px;
  --text-body-lg: 13px;
  --text-body-md: 12px;
  --text-body-sm: 11px;
  --text-label-caps: 10px;

  /* 字体族 */
  --font-sans: 'Alibaba PuHuiTi 3.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Alibaba PuHuiTi 3.0', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'MapleMono-NF-CN', 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  /* 间距 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* 过渡 */
  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 300ms cubic-bezier(.4, 0, .2, 1);

  /* 毛玻璃（顶栏/胶囊平台语言） */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(68, 98, 120, .14);
  --glass-highlight: linear-gradient(135deg, rgba(219, 243, 255, .52), rgba(255, 255, 255, .45));

  /* 极光装饰五色（DESIGN.md 2.7,仅背景,禁用于文字/图表/状态色） */
  --aurora-green: #a8cf45;
  --aurora-orange: #f58634;
  --aurora-blue-light: #91d8f7;
  --aurora-blue-mid: #7caada;
  --aurora-blue-deep: #5d9ad2;
  --aurora-sky-top: #fdfdff;
  --aurora-sky-bottom: #f3f6fb;
}

/* ===== 基础 ===== */
* { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 全站极光光晕背景（fixed 铺底,内容 z:1 之上） ===== */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--aurora-sky-top) 0%, var(--aurora-sky-bottom) 100%);
}
.aurora .shape {
  position: absolute; width: 55vw; max-width: 820px; opacity: .32;
  filter: blur(48px); user-select: none; pointer-events: none;
}
.aurora .shape-1 { top: -8%; left: -6%; transform: rotate(-18deg); }
.aurora .shape-2 { width: 48vw; max-width: 720px; bottom: -12%; right: -8%; opacity: .28; transform: rotate(24deg); }
.aurora .blob { position: absolute; border-radius: var(--radius-circle); filter: blur(90px); }
.aurora .blob-green  { width: 360px; height: 360px; top: 18%;  right: 8%;  opacity: .3;  background: radial-gradient(circle, var(--aurora-green), transparent 70%); }
.aurora .blob-orange { width: 300px; height: 300px; bottom: 22%; left: 10%;  opacity: .24; background: radial-gradient(circle, var(--aurora-orange), transparent 70%); }
.aurora .blob-blue   { width: 420px; height: 420px; top: 45%;  left: 42%;  opacity: .22; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--aurora-blue-mid), transparent 70%); }

/* ===== topbar 骨架（毛玻璃顶栏:logo + 平台名 + 竖分隔线 + 子系统名） ===== */
.topbar {
  position: sticky; top: 0; z-index: 100; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  background: var(--glass-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--hairline-contact-b);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: default; text-decoration: none; }
.brand-logo { height: 28px; width: auto; display: block; flex-shrink: 0; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: .5px; color: var(--text-primary); white-space: nowrap; }
.brand-sep { width: 1px; height: 18px; background: var(--border-subtle); flex-shrink: 0; }
.brand-product { font-size: 15px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }

/* ===== 毛玻璃胶囊 pill（平台语言） ===== */
.pill, .pill-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; font-family: inherit;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: var(--glass-highlight);
  border: .5px solid var(--glass-border); color: var(--text-secondary);
  transition: all var(--t-fast); cursor: default; text-decoration: none;
}
.pill-btn { cursor: pointer; }
.pill-btn:hover { background: linear-gradient(135deg, rgba(219, 243, 255, .72), rgba(255, 255, 255, .6)); color: var(--text-primary); border-color: rgba(68, 98, 120, .24); }
.pill .dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--text-placeholder); }
.pill.live .dot { background: var(--status-live); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.pill.busy .dot { background: var(--status-warning); box-shadow: 0 0 0 3px rgba(249, 115, 22, .22); animation: hd-pulse 1s infinite; }
.pill.err .dot { background: var(--status-error); box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }
@keyframes hd-pulse { 50% { opacity: .35; } }

/* ===== 通用组件（收编原 shared.css,admin/subscribe 消费） ===== */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-secondary);
  font-size: 13px; font-family: inherit; font-weight: 500;
  cursor: pointer; transition: all var(--t-fast); text-decoration: none;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--primary-hover); color: var(--text-on-accent); }
.btn-danger { background: var(--surface); border-color: rgba(220, 38, 38, .4); color: var(--status-error); }
.btn-danger:hover { background: var(--status-error); color: var(--text-on-accent); }

.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table th, .mp-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left; border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.mp-table th { font-size: 11px; color: var(--text-quaternary); font-weight: 700; letter-spacing: .05em; }
.mp-table td { word-break: break-word; }
.mp-table tr:hover td { background: var(--primary-bg); }

/* 白卡 hairline（默认 contact 组合,hover 才升级;grid/main 直系卡 hover 位移） */
.mp-card {
  min-width: 0; background: var(--surface);
  border: none; border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-surface);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.mp-card:hover { box-shadow: var(--shadow-surface-hover); }
.grid > .mp-card:hover, main > .mp-card:hover { transform: translateY(-2px); }

.mp-tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; line-height: 1.6;
}
.mp-tag.blue  { background: var(--primary-bg); color: var(--primary-deep); }
.mp-tag.green { background: var(--status-success-bg); color: var(--status-success); }
.mp-tag.red   { background: var(--status-error-bg); color: var(--status-error); }
.mp-tag.amber { background: var(--tag-amber-bg); color: var(--tag-amber); }
.mp-tag.gray  { background: var(--bg); color: var(--text-quaternary); }

.mp-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-size: 13px; font-family: inherit; outline: none; background: var(--surface);
  color: var(--text-primary);
}
.mp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.mp-empty { color: var(--text-quaternary); font-size: 13px; padding: var(--space-5); text-align: center; }
.mp-note { font-size: 12px; color: var(--text-quaternary); line-height: 1.7; }