/* ================= 前台首页（Zenith 语言） ================= */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --fg: #0a0a0a;
  --muted-fg: #737373;
  --soft-fg: #a3a3a3;
  --border: #e8e8e8;
  --muted: #f4f4f5;
  --primary: #f43f5e;
  --primary-fg: #ffffff;
  --overlay: rgba(255,255,255,.5);
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --radius: 12px;
}
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --card: #161618;
  --fg: #fafafa;
  --muted-fg: #a1a1aa;
  --soft-fg: #6b6b74;
  --border: #2a2a2e;
  --muted: #232327;
  --primary: #fb7185;
  --primary-fg: #1c0a0e;
  --overlay: rgba(0,0,0,.55);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ---------- 主题色（用户可在背景面板选择，后台可设默认值） ---------- */
:root[data-color="neutral"] { --primary:#171717; --primary-fg:#ffffff; }
:root[data-color="zinc"]    { --primary:#3f3f46; --primary-fg:#ffffff; }
:root[data-color="blue"]    { --primary:#2563eb; --primary-fg:#ffffff; }
:root[data-color="violet"]  { --primary:#7c3aed; --primary-fg:#ffffff; }
:root[data-color="orange"]  { --primary:#ea580c; --primary-fg:#ffffff; }
:root[data-theme="dark"][data-color="neutral"] { --primary:#e5e5e5; --primary-fg:#0a0a0a; }
:root[data-theme="dark"][data-color="zinc"]    { --primary:#a1a1aa; --primary-fg:#18181b; }
:root[data-theme="dark"][data-color="blue"]    { --primary:#60a5fa; --primary-fg:#0b1220; }
:root[data-theme="dark"][data-color="violet"]  { --primary:#a78bfa; --primary-fg:#17102b; }
:root[data-theme="dark"][data-color="orange"]  { --primary:#fb923c; --primary-fg:#2a1503; }
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; height:100%; touch-action: manipulation; }
body {
  font-family: Inter, ui-sans-serif, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  height:100%;
  background: var(--bg);
  color: var(--fg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  overflow:hidden;                        /* 全屏：禁止下拉/滚动 */
  overscroll-behavior:none;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}

/* ---------- 背景图层 ---------- */
#bgLayer, #bgOverlay { position:fixed; inset:0; z-index:0; display:none; }
#bgLayer { background-size:cover; background-position:center; }
#bgOverlay { background:var(--overlay); }

/* ---------- 主卡片 ---------- */
.card {
  position:relative; z-index:1;
  width:100%; max-width:350px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 26px 26px;
  text-align:center;
  transition: background .2s ease, border-color .2s ease;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-fg);
  border:1px solid var(--border); border-radius:999px;
  padding:4px 11px; margin-bottom:16px;
}
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--primary); transition:background-color .35s ease; }
h1 { font-size:18px; font-weight:600; letter-spacing:.02em; }
.names { color:var(--muted-fg); font-size:13px; margin-top:3px; margin-bottom:24px; }

.label { font-size:12.5px; color:var(--muted-fg); margin-bottom:2px; }
.days {
  font-size:74px; font-weight:700; line-height:1.05;
  letter-spacing:-.03em;
  font-variant-numeric: tabular-nums;
}
.unit { font-size:14px; color:var(--muted-fg); margin:2px 0 20px; font-variant-numeric: tabular-nums; }

.bar {
  height:6px; border-radius:999px; background:var(--muted);
  overflow:hidden; margin:0 0 18px; width:100%;
}
.bar i {
  display:block; height:100%;
  background:var(--primary); border-radius:999px; width:0%;
  transition: width 1s ease, background-color .35s ease;
}

.meta {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  width:100%;
  margin-bottom:22px;
}
.meta > div {
  border:1px solid var(--border); border-radius:10px;
  padding:8px 6px;
}
.meta .k { font-size:10px; color:var(--soft-fg); letter-spacing:.08em; margin-bottom:3px; }
.meta .v { font-size:12px; color:var(--muted-fg); font-variant-numeric: tabular-nums; }

/* ---------- 解锁按钮 ---------- */
.unlock-btn {
  display:inline-block; width:100%;
  padding:12px 0; border-radius:var(--radius);
  background:var(--primary); color:var(--primary-fg);
  font-size:14.5px; font-weight:600; text-decoration:none;
  border:none; cursor:pointer;
  transition: opacity .15s ease, transform .15s ease, background-color .35s ease;
}
.unlock-btn:hover { opacity:.9; }
.unlock-btn:active { transform:scale(.99); }

.unlock-btn.locked {
  background:var(--muted); color:var(--soft-fg);
  border:1px solid var(--border);
  box-shadow:none; cursor:default;
}
.unlock-btn.locked:active { transform:none; }

/* ---------- 弹窗 ---------- */
.mask {
  position:fixed; inset:0; z-index:20; display:flex;
  background:rgba(0,0,0,.45);
  align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.mask.open { opacity:1; visibility:visible; pointer-events:auto; }
.modal {
  width:100%; max-width:320px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  overflow:hidden;
  text-align:left;
  transform:scale(.94) translateY(10px);
  opacity:0;
  transition:transform .24s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.mask.open .modal { transform:scale(1) translateY(0); opacity:1; }
.modal .inner { padding:22px 22px 20px; }
.modal h3 { font-size:15px; font-weight:600; margin-bottom:6px; }
.modal p { font-size:12.5px; color:var(--muted-fg); line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.modal .bar { margin:14px 0 8px; }
.modal .hint { font-size:11px; color:var(--soft-fg); display:flex; justify-content:space-between; }
.modal .btn-close {
  margin-top:16px; width:100%;
  padding:10px 0; border-radius:10px;
  background:var(--fg); color:var(--card);
  border:none; font-size:13px; font-weight:600; cursor:pointer;
}

/* 通知弹窗倒计时自动关闭 */
.cd { margin-top:16px; }
.cd-bar {
  height:6px; border-radius:999px; background:var(--muted);
  overflow:hidden;
}
.cd-bar i {
  display:block; height:100%; width:100%;
  background:var(--primary); border-radius:999px;
  transition:background-color .35s ease;
}
.cd-meta {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--soft-fg); margin-top:6px;
}

/* 通知弹窗顶部横幅（类型色） */
.banner { height:5px; width:100%; transition:background-color .35s ease; }
.banner.t-primary { background:var(--primary); }
.banner.t-success { background:#22c55e; }
.banner.t-info    { background:#3b82f6; }
.banner.t-warning { background:#f59e0b; }
.banner.t-danger  { background:#ef4444; }
.badge-type {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.05em;
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
.badge-type.t-primary { background:var(--soft, #ffe4e6); color:var(--primary); }
.badge-type.t-success { background:rgba(34,197,94,.12); color:#16a34a; }
.badge-type.t-info    { background:rgba(59,130,246,.12); color:#2563eb; }
.badge-type.t-warning { background:rgba(245,158,11,.14); color:#d97706; }
.badge-type.t-danger  { background:rgba(239,68,68,.12); color:#dc2626; }
:root[data-theme="dark"] .badge-type.t-success { color:#4ade80; }
:root[data-theme="dark"] .badge-type.t-info    { color:#60a5fa; }
:root[data-theme="dark"] .badge-type.t-warning { color:#fbbf24; }
:root[data-theme="dark"] .badge-type.t-danger  { color:#f87171; }

/* 通知弹窗排版：徽章行与正文对齐 */
.info-head { display:flex; align-items:center; margin-bottom:12px; }
.info-body {
  font-size:13px; color:var(--fg); line-height:1.8;
  word-break:break-word;
}
.info-body > :last-child { margin-bottom:0; }
.info-body p { margin:0 0 10px; }
.info-body a { color:var(--primary); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.info-body img { max-width:100%; border-radius:8px; display:block; margin:8px 0; }
.info-body ul, .info-body ol { padding-left:20px; margin:0 0 10px; }

/* ---------- 左下角连体按钮组 ---------- */
.fab-group {
  position:fixed; left:16px; bottom:16px; z-index:5;
  display:flex; align-items:stretch;
  background:var(--card); border:1px solid var(--border);
  border-radius:999px; overflow:hidden;
  box-shadow:var(--shadow);
  transition: background .2s ease;
}
.fab-group button {
  height:38px; min-width:40px; padding:0 11px;
  border:none; cursor:pointer;
  background:transparent; color:var(--muted-fg);
  font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit;
  transition: background .12s, color .12s;
}
.fab-group button + button { border-left:1px solid var(--border); }
.fab-group button:hover { color:var(--fg); background:var(--muted); }
.fab-group button svg { flex-shrink:0; }
.fab-group button.on { color:var(--primary); transition:background .12s, color .35s ease; }
.fab-group button.on:hover { color:var(--primary); }
.fab-group .lbl { font-size:12px; font-weight:500; letter-spacing:.02em; }

/* 主题按钮：明亮显示月亮（点击切暗黑），暗黑显示太阳（点击切明亮） */
.fab-group .ic-sun { display:none; }
:root[data-theme="dark"] .fab-group .ic-sun { display:inline; }
:root[data-theme="dark"] .fab-group .ic-moon { display:none; }

/* ---------- 背景选择面板 ---------- */
.bg-panel {
  position:fixed; left:16px; bottom:66px; z-index:5;
  width:216px; background:var(--card);
  border:1px solid var(--border); border-radius:12px;
  padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px) scale(.98); transform-origin:bottom left;
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.9,.3,1.1), visibility .2s ease;
}
.bg-panel.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.bg-panel .t { font-size:11px; color:var(--soft-fg); padding:4px 6px 8px; letter-spacing:.06em; }
.bg-item {
  display:flex; align-items:center; gap:9px;
  padding:6px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--fg);
}
.bg-item:hover { background:var(--muted); }
.bg-item.on { background:var(--muted); font-weight:600; }
.bg-item .no { font-size:10.5px; color:var(--soft-fg); margin-left:auto; }
.bg-thumb {
  width:44px; height:30px; border-radius:6px; flex-shrink:0;
  object-fit:cover; border:1px solid var(--border);
}
.bg-dot {
  width:44px; height:30px; border-radius:6px; flex-shrink:0;
  background:var(--bg); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
}

/* 主题色选择（背景面板内） */
.color-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  padding:2px 4px 6px;
}
.color-dot {
  height:34px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); position:relative;
  transition: transform .12s ease;
}
.color-dot:hover { transform:scale(1.04); }
.color-dot.on::after {
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.color-dot.c-neutral { background:#171717; }
.color-dot.c-zinc    { background:#3f3f46; }
.color-dot.c-blue    { background:#2563eb; }
.color-dot.c-violet  { background:#7c3aed; }
.color-dot.c-rose    { background:#e11d48; }
.color-dot.c-orange  { background:#ea580c; }