/* wormdesk 设计令牌与基础组件 —— 公开站、控制台、Ghost 主题共用。
   视觉以 web/design/sample.html 为准。中文字体用系统自带（PingFang / 微软雅黑 / Noto CJK），
   英文与数字用本地 IBM Plex（fonts.css），不依赖 Google Fonts。 */
@import url("./fonts.css");

/* 布局：公开站是单列阅读流（导航 → 自我介绍 → 文章 → 作品 → 工具）；控制台是固定状态条 + 左侧导航 + 只滚动内容区 */
:root {
  color-scheme: dark;
  /* 中性：同一组偏青的蓝灰，四个明度台阶 */
  --bg: #0f131a;
  --panel: #151a22;
  --raise: #1c222c;
  --line: rgba(230, 237, 243, 0.08);
  --line-strong: rgba(230, 237, 243, 0.14);
  --fg: #e6edf3;
  --fg-2: #9aa4b2;
  --fg-3: #6b7480;
  /* 唯一强调色：降饱和的青，按透明度分层 */
  --accent: #5ee6c8;
  --accent-60: rgba(94, 230, 200, 0.6);
  --accent-22: rgba(94, 230, 200, 0.22);
  --accent-10: rgba(94, 230, 200, 0.10);
  /* 状态色：只表达状态，永远配文字 */
  --warn: #e3b341;
  --bad: #f2545b;

  --sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --cn: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --num: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --r-page: 12px; --r-card: 8px; --r-ctl: 6px;
  --gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body { font-family: var(--cn); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }


/* ── 面板 + 角标（保留自 speedweb 的唯一装饰母题） ── */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.tag {
  position: absolute; top: -9px; left: 14px; padding: 0 7px; height: 18px; display: inline-flex; align-items: center;
  font-size: 11.5px; color: var(--accent); background: var(--bg); border: 1px solid var(--accent-22); border-radius: 4px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.off { background: var(--fg-3); }
.dot.live { box-shadow: 0 0 0 0 var(--accent-60); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-60); } 70%, 100% { box-shadow: 0 0 0 7px rgba(94,230,200,0); } }
@media (prefers-reduced-motion: reduce) { .dot.live, .flow { animation: none !important; } }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13.5px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); color: var(--fg-2); }
.btn:hover { border-color: var(--accent-60); color: var(--fg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #08201b; font-weight: 500; }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px;
  color: var(--fg-2); background: var(--raise); }
.pill svg.i { width: 13px; height: 13px; }
.pill.warn { color: var(--warn); background: rgba(227,179,65,.1); }