* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  /* —— Hand-Drawn 设计令牌 —— */
  --paper:  #fdfbf7;   /* 暖纸白 */
  --ink:    #2d2d2d;   /* 软铅笔黑（非纯黑） */
  --muted:  #e5e0d8;   /* 旧纸 / 橡皮灰 */
  --accent: #ff4d4d;   /* 红修正液 */
  --blue:   #2d5da1;   /* 蓝原子笔 */
  --postit: #fff9c4;   /* 便利贴黄 */
  /* 不规则手绘圆角（拒绝直线） */
  --wobbly-lg:   220px 18px 200px 18px / 18px 200px 18px 220px;
  --wobbly-md:   18px 120px 22px 120px / 120px 22px 120px 18px;
  --wobbly-sm:   16px 80px 18px 80px / 80px 18px 80px 16px;
  --wobbly-btn:  180px 20px 160px 20px / 20px 160px 20px 180px;
  --wobbly-input:14px 40px 16px 40px / 40px 16px 40px 14px;
  /* 硬偏移阴影（无模糊） */
  --hard: 4px 4px 0 var(--ink);
  --hard-md: 6px 6px 0 var(--ink);
  --hard-sm: 2px 2px 0 var(--ink);
  /* 字体：优先 Kalam/Patrick Hand（若本地/自托管可用），回退手写系/系统字体 */
  --font-head: 'Kalam', 'Comic Sans MS', 'Segoe Print', 'Bradley Hand', cursive, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', 'Bradley Hand', cursive, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 方格配色（设置面板实时修改） */
  --c-past: #98c3b9; --c-sleep: #c1e8f9; --c-work: #ab9f93; --c-retired: #f8c039;
  --c-slack: #d9b8a0; --c-happy: #f4a7b9; --c-surplus: #e2e2e2;
  /* 背景纹理 / 聚焦环（主题可覆盖） */
  --bg-image: radial-gradient(var(--muted) 1px, transparent 1px);
  --bg-size: 24px 24px;
  --bg-repeat: repeat;
  --ring: rgba(45, 93, 161, .20);
  /* 手绘装饰固定色（不随风格切换改变，保留到所有风格） */
  --deco-ink: #2d2d2d;
  --deco-red: #ff4d4d;
  --deco-blue: #2d5da1;
  --deco-yellow: #fff9c4;
}

/* —— 主题：活泼几何 Playful Geometric —— */
body[data-theme="geo"] {
  /* 色彩：暖奶油底 + Slate 深灰 + 紫/粉/黄/绿 confetti 调色板 */
  --paper: #FFFDF5;      /* background：暖奶油（纸感） */
  --ink: #1E293B;        /* foreground：Slate 800（较纯黑柔和） */
  --muted: #F1F5F9;      /* Slate 100 */
  --muted-ink: #64748B;  /* mutedForeground：Slate 500 次要文字 */
  --accent: #8B5CF6;     /* Vivid Violet 主品牌（主操作） */
  --blue: #F472B6;       /* Hot Pink（点缀） */
  --postit: #FBBF24;     /* Amber 乐观黄（hover 填充/强调） */
  --green: #34D399;      /* Emerald 清新绿（装饰） */
  --border: #E2E8F0;     /* Slate 200（边框/软硬阴影） */
  /* 圆角：几何系 8 / 16 / 24 / full */
  --wobbly-lg: 24px; --wobbly-md: 16px; --wobbly-sm: 8px; --wobbly-btn: 9999px; --wobbly-input: 16px;
  /* Pop 硬阴影：无模糊实色偏移（hover 6px 上浮 / active 2px 下压） */
  --hard: 4px 4px 0 var(--ink);
  --hard-md: 8px 8px 0 var(--border);
  --hard-sm: 2px 2px 0 var(--ink);
  /* 字体：几何标题 Outfit / 人文正文 Plus Jakarta Sans */
  --font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  /* 点阵纹理（Stable Grid 基础） */
  --bg-image: radial-gradient(#E2E8F0 1px, transparent 1px);
  --bg-size: 22px 22px; --bg-repeat: repeat;
  --ring: rgba(139, 92, 246, .22);
  /* 装饰碎片（confetti）：紫/粉/黄 */
  --deco-ink: #1E293B;
  --deco-red: #F472B6; --deco-blue: #8B5CF6; --deco-yellow: #FBBF24;
}

/* —— 主题：俏皮几何 · 组件覆盖（Stable Grid, Wild Decoration）—— */
/* 标题：几何粗体 Outfit 800 */
body[data-theme="geo"] header h1,
body[data-theme="geo"] .hand-title,
body[data-theme="geo"] .topbar-title,
body[data-theme="geo"] .modal-body h2,
body[data-theme="geo"] .style-head { font-weight: 800; letter-spacing: .01em; }

/* 徽章 eyebrow：紫底白字胶囊 */
body[data-theme="geo"] .eyebrow {
  background: var(--accent); color: #fff;
  border: 2px solid var(--ink); border-radius: 9999px;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
}

/* 卡片：Sticker 贴纸卡（白底 + 2px 深边框 + 软硬阴影 + wiggle hover） */
body[data-theme="geo"] .card-wob {
  border: 2px solid var(--ink); border-radius: var(--wobbly-md);
  box-shadow: 8px 8px 0 var(--border);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.34,1.56,.64,1), background-color .15s ease;
}
body[data-theme="geo"] .card-wob:hover { transform: rotate(-1deg) scale(1.02); box-shadow: 10px 10px 0 var(--border); }
body[data-theme="geo"] .card-wob.note { background: #fff; box-shadow: 8px 8px 0 var(--blue); }
body[data-theme="geo"] .card-wob.note:hover { box-shadow: 10px 10px 0 var(--blue); }

/* 按钮：糖果主按钮（紫底） / 描边次按钮（hover 填黄） */
body[data-theme="geo"] .btn,
body[data-theme="geo"] .topbar-back,
body[data-theme="geo"] .modal-close,
body[data-theme="geo"] .style-chip { border-width: 2px; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.34,1.56,.64,1), background-color .15s ease, color .15s ease; }
body[data-theme="geo"] .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--hard); }
body[data-theme="geo"] .btn-primary .ico { background: #fff; color: var(--accent); }
body[data-theme="geo"] .btn-primary:hover { background: var(--accent); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
body[data-theme="geo"] .btn-primary:hover .ico { background: var(--accent); color: #fff; }
body[data-theme="geo"] .btn-primary:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
body[data-theme="geo"] .btn-ghost { background: transparent; box-shadow: none; }
body[data-theme="geo"] .btn-ghost:hover { background: var(--postit); color: var(--ink); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
body[data-theme="geo"] .btn-ghost:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
body[data-theme="geo"] .topbar-back { background: #fff; }
body[data-theme="geo"] .topbar-back:hover { background: var(--accent); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
body[data-theme="geo"] .topbar-back:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
body[data-theme="geo"] .modal-close { background: #fff; }
body[data-theme="geo"] .modal-close:hover { background: var(--accent); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
body[data-theme="geo"] .modal-close:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* 输入框：几何卡式，focus 紫色硬阴影 */
body[data-theme="geo"] input.nya-input,
body[data-theme="geo"] input.life-input {
  border: 2px solid #CBD5E1; border-radius: var(--wobbly-input);
  box-shadow: 4px 4px 0 transparent;
}
body[data-theme="geo"] input.nya-input:focus,
body[data-theme="geo"] input.life-input:focus { border-color: var(--accent); outline: none; box-shadow: 4px 4px 0 var(--accent); }
body[data-theme="geo"] .field-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-ink); margin: 16px 0 6px; }

/* 主网格：Stable Grid（几何圆角格 + 2px 边框） */
body[data-theme="geo"] .box { border: 2px solid var(--ink); border-radius: var(--wobbly-lg); box-shadow: var(--hard-md); padding: 10px; }
body[data-theme="geo"] .block { border-radius: 6px; border: 2px solid rgba(30,41,59,.1); margin: 2px; }

/* 顶栏：几何条（不旋转） */
body[data-theme="geo"] .topbar { border: 2px solid var(--ink); border-radius: var(--wobbly-md); box-shadow: var(--hard-md); transform: none; }

/* 弹窗：厚卡 + 深色硬阴影 */
body[data-theme="geo"] .modal-body { border: 2px solid var(--ink); border-radius: var(--wobbly-md); box-shadow: 8px 8px 0 var(--ink); }

/* 风格切换 chips：胶囊 + hover 填黄 / active 紫 */
body[data-theme="geo"] .style-chip { border-radius: 9999px; background: #fff; }
body[data-theme="geo"] .style-chip:hover { background: var(--postit); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
body[data-theme="geo"] .style-chip.active { background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--ink); }

/* 图例色块：贴纸 */
body[data-theme="geo"] .hint .sw { border-radius: 8px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }

/* 颜色选择器 */
body[data-theme="geo"] .color-row input[type=color] { border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--hard-sm); }

/* 快照卡片：贴纸卡（白底 + 2px 深边框 + 软硬阴影） */
body[data-theme="geo"] .snap-card { border: 2px solid var(--ink); border-radius: var(--wobbly-md); box-shadow: 8px 8px 0 var(--border); }

/* confetti 装饰碎片：紫/粉/黄/绿旋转使用（Wild Decoration） */
body[data-theme="geo"] .shape.s1 { background: var(--deco-red); }
body[data-theme="geo"] .shape.s2 { background: var(--deco-blue); }
body[data-theme="geo"] .shape.s3 { background: var(--deco-yellow); }
body[data-theme="geo"] .shape.s4 { background: var(--green); }
body[data-theme="geo"] .shape.s5 { border-color: var(--deco-blue); }

/* 移动端：压扁 Pop 阴影（省空间） */
@media (max-width: 480px) {
  body[data-theme="geo"] .btn { box-shadow: 2px 2px 0 var(--ink); }
  body[data-theme="geo"] .card-wob, body[data-theme="geo"] .topbar { box-shadow: 2px 2px 0 var(--border); }
}

/* —— 主题：瑞士国际 Swiss International —— */
body[data-theme="swiss"] {
  --paper: #FFFFFF; --ink: #000000; --muted: #F2F2F2; --accent: #FF3000;
  --blue: #000000; --postit: #F2F2F2;
  --wobbly-lg: 0px; --wobbly-md: 0px; --wobbly-sm: 0px; --wobbly-btn: 0px; --wobbly-input: 0px;
  --hard: none; --hard-md: none; --hard-sm: none;
  --font-head: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 24px 可见网格纹理（无模糊、纯平面） */
  --bg-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 24px);
  --bg-size: auto; --bg-repeat: repeat;
  --ring: rgba(255, 48, 0, .30);
}
/* 瑞士风：平面 / 直角 / 左对齐 / 严格去手绘装饰 */
body[data-theme="swiss"] .deco,
body[data-theme="swiss"] .squiggle,
body[data-theme="swiss"] .tape,
body[data-theme="swiss"] .tack { display: none; }
body[data-theme="swiss"] .eyebrow {
  background: var(--accent); color: #fff; border-color: var(--ink);
  transform: none; letter-spacing: .22em;
}
body[data-theme="swiss"] header,
body[data-theme="swiss"] .progress-wrap,
body[data-theme="swiss"] .modal-body h2,
body[data-theme="swiss"] .style-head { text-align: left; }
body[data-theme="swiss"] .modal-body h2,
body[data-theme="swiss"] .card-wob,
body[data-theme="swiss"] .topbar,
body[data-theme="swiss"] .time-grid .card-wob,
body[data-theme="swiss"] .time-grid .card-wob:nth-child(2),
body[data-theme="swiss"] .progress-wrap .hand-title,
body[data-theme="swiss"] .style-head { transform: none; }
body[data-theme="swiss"] .modal-body { box-shadow: none; }
body[data-theme="swiss"] .block { border: 1px solid rgba(0,0,0,.16); }
body[data-theme="swiss"] .time-grid .card .list { border-bottom: 1px solid var(--ink); }
body[data-theme="swiss"] .progress-wrap .box { margin-left: 0; margin-right: 0; }
body[data-theme="swiss"] .modal-close { border-radius: 0; }
body[data-theme="swiss"] .btn:hover,
body[data-theme="swiss"] .btn:active,
body[data-theme="swiss"] .btn-ghost:hover,
body[data-theme="swiss"] .btn-ghost:active,
body[data-theme="swiss"] .topbar-back:hover,
body[data-theme="swiss"] .topbar-back:active,
body[data-theme="swiss"] .modal-close:hover,
body[data-theme="swiss"] .modal-close:active,
body[data-theme="swiss"] .style-chip:hover { transform: none; }

/* —— 主题：报刊 Newsprint（国际主义印刷风） —— */
body[data-theme="newsprint"] {
  --paper: #F9F9F7; --ink: #111111; --muted: #E5E5E0; --accent: #CC0000;
  --blue: #111111; --postit: #F5F5F5;
  --wobbly-lg: 0px; --wobbly-md: 0px; --wobbly-sm: 0px; --wobbly-btn: 0px; --wobbly-input: 0px;
  --hard: 4px 4px 0 var(--ink); --hard-md: 4px 4px 0 var(--ink); --hard-sm: 2px 2px 0 var(--ink);
  --font-head: 'Playfair Display', 'Times New Roman', 'Songti SC', 'SimSun', serif;
  --font-body: 'Inter', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 4×4px 网点纸纹（模拟新闻纸颗粒） */
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='0.04' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'/%3E%3C/path%3E%3C/svg%3E");
  --bg-size: 4px 4px; --bg-repeat: repeat;
  --ring: rgba(204, 0, 0, .25);
}
/* 报刊风：直角 / 硬阴影裁切感 / 左对齐编辑感 / 去手绘装饰 */
body[data-theme="newsprint"] .deco,
body[data-theme="newsprint"] .squiggle,
body[data-theme="newsprint"] .tape,
body[data-theme="newsprint"] .tack { display: none; }
body[data-theme="newsprint"] header,
body[data-theme="newsprint"] .topbar,
body[data-theme="newsprint"] .progress-wrap,
body[data-theme="newsprint"] .modal-body h2,
body[data-theme="newsprint"] .style-head { text-align: left; }
body[data-theme="newsprint"] .eyebrow,
body[data-theme="newsprint"] .hand-title,
body[data-theme="newsprint"] .progress-wrap .hand-title,
body[data-theme="newsprint"] .style-head,
body[data-theme="newsprint"] .modal-body h2,
body[data-theme="newsprint"] .card-wob,
body[data-theme="newsprint"] .time-grid .card-wob,
body[data-theme="newsprint"] .time-grid .card-wob:nth-child(2),
body[data-theme="newsprint"] .topbar { transform: none; }
body[data-theme="newsprint"] .block { border-radius: 0; border-color: rgba(17,17,17,.15); }
body[data-theme="newsprint"] .hint .sw { border-radius: 0; }
body[data-theme="newsprint"] .modal-close { border-radius: 0; }
body[data-theme="newsprint"] .time-grid .card .list { border-bottom: 1px solid var(--muted); }

/* —— 主题：复古 Retro / 90s Nostalgia（Windows 95 · 高饱和 · 三维斜角 · 跑马灯） —— */
body[data-theme="retro"] {
  --paper: #c0c0c0;       /* Win95 银灰桌面 */
  --ink: #000000;         /* 纯黑正文 */
  --muted: #808080;       /* 50% 灰 */
  --accent: #0000ff;      /* 超链接蓝（主交互） */
  --blue: #ff0000;        /* 热红（强调 / CTA） */
  --postit: #ffffcc;      /* 浅黄面板（说明卡） */
  --wobbly-lg: 0px; --wobbly-md: 0px; --wobbly-sm: 0px; --wobbly-btn: 0px; --wobbly-input: 0px;
  --hard: none; --hard-md: none; --hard-sm: none;
  --font-head: "Arial Black", Impact, Haettenschweiler, "Microsoft YaHei", sans-serif;
  --font-body: "MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, "Microsoft YaHei", sans-serif;
  /* 90 年代斜纹平铺底纹 */
  --bg-image:
    linear-gradient(45deg, #b8b8b8 25%, transparent 25%),
    linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #b8b8b8 75%),
    linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);
  --bg-size: 4px 4px;
  --bg-repeat: repeat;
  --ring: rgba(0,0,128,.35);
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
}
/* 复古风：直角 / 平面 / 高饱和 / 隐藏手绘装饰，由 Win95 斜角与跑马灯取代 */
body[data-theme="retro"] .deco,
body[data-theme="retro"] .squiggle,
body[data-theme="retro"] .tape,
body[data-theme="retro"] .tack { display: none; }

/* —— 三维斜角（Win95 标志性）—— */
body[data-theme="retro"] .card-wob,
body[data-theme="retro"] .topbar,
body[data-theme="retro"] .box,
body[data-theme="retro"] .modal-body,
body[data-theme="retro"] .btn,
body[data-theme="retro"] .btn-primary,
body[data-theme="retro"] .btn-ghost,
body[data-theme="retro"] .topbar-back,
body[data-theme="retro"] .style-chip,
body[data-theme="retro"] .modal-close,
body[data-theme="retro"] input.nya-input,
body[data-theme="retro"] input.life-input,
body[data-theme="retro"] .eyebrow,
body[data-theme="retro"] .color-row input[type=color],
body[data-theme="retro"] .hint .sw,
body[data-theme="retro"] .retro-bar,
body[data-theme="retro"] .retro-counter,
body[data-theme="retro"] .retro-stripe {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;
  border-radius: 0;
  transition: none;
}
/* 凹陷（sunken）：进度盒与输入框 */
body[data-theme="retro"] .box,
body[data-theme="retro"] input.nya-input,
body[data-theme="retro"] input.life-input {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
/* 按下态：凹陷 + 偏移（即时） */
body[data-theme="retro"] .btn:active,
body[data-theme="retro"] .btn-primary:active,
body[data-theme="retro"] .btn-ghost:active,
body[data-theme="retro"] .topbar-back:active,
body[data-theme="retro"] .style-chip:active,
body[data-theme="retro"] .modal-close:active {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  transform: translate(1px, 1px);
}
/* 悬停：仅提亮，不变形（无缓动） */
body[data-theme="retro"] .btn-primary { background: #0000ff; color: #fff; border-color: #5555ff #000080 #000080 #5555ff; }
body[data-theme="retro"] .btn-primary:hover { background: #1a1aff; color: #fff; transform: none; box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf; }
body[data-theme="retro"] .btn-primary:active { background: #0000cc; border-color: #000080 #5555ff #5555ff #000080; }
body[data-theme="retro"] .btn-ghost,
body[data-theme="retro"] .topbar-back { background: #c0c0c0; color: #000; }
body[data-theme="retro"] .btn-ghost:hover,
body[data-theme="retro"] .topbar-back:hover { background: #d4d4d4; color: #000; transform: none; box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf; }
body[data-theme="retro"] .style-chip { background: #c0c0c0; color: #000; text-transform: uppercase; }
body[data-theme="retro"] .style-chip:hover { background: #d4d4d4; color: #000; transform: none; }
body[data-theme="retro"] .style-chip.active { background: #0000ff; color: #fff; border-color: #5555ff #000080 #000080 #5555ff; }
body[data-theme="retro"] .modal-close { background: #c0c0c0; color: #000; }
body[data-theme="retro"] .modal-close:hover { background: #d4d4d4; color: #000; transform: none; }

/* 聚焦：点状黑框（Win95 风） */
body[data-theme="retro"] .btn:focus-visible,
body[data-theme="retro"] .btn-primary:focus-visible,
body[data-theme="retro"] .btn-ghost:focus-visible,
body[data-theme="retro"] .topbar-back:focus-visible,
body[data-theme="retro"] .style-chip:focus-visible,
body[data-theme="retro"] .modal-close:focus-visible,
body[data-theme="retro"] input:focus-visible {
  outline: 2px dotted #000000; outline-offset: 2px;
}
body[data-theme="retro"] input:focus { border-color: #0000ff; outline: 2px dotted #000; outline-offset: 2px; box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf; }

/* —— 窗体标题栏（海军蓝渐变条）—— */
body[data-theme="retro"] .hand-title,
body[data-theme="retro"] .progress-wrap .hand-title,
body[data-theme="retro"] .modal-body h2,
body[data-theme="retro"] .style-head {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #ffffff; font-family: var(--font-head); text-transform: uppercase;
  border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
  padding: 5px 10px; margin: 0 0 10px; letter-spacing: .04em; transform: none; text-align: left;
}
body[data-theme="retro"] .progress-wrap .hand-title { display: block; }
/* HOT! 脉冲徽章（纯 CSS） */
body[data-theme="retro"] .progress-wrap .hand-title::after,
body[data-theme="retro"] .modal-body h2::after {
  content: ' HOT!';
  background: #ff0000; color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  padding: 1px 6px; margin-left: 8px; vertical-align: middle; letter-spacing: .05em;
  border: 2px solid; border-color: #ff8080 #800000 #800000 #ff8080;
  animation: retro-pulse 1.5s ease-in-out infinite;
}

/* —— 卡片 / 顶栏 / 弹窗：银灰面板 —— */
body[data-theme="retro"] .card-wob,
body[data-theme="retro"] .topbar,
body[data-theme="retro"] .modal-body {
  background: #c0c0c0; color: #000; transform: none;
}
body[data-theme="retro"] .card-wob.note { background: #ffffcc; }
body[data-theme="retro"] .topbar { transform: none; }
body[data-theme="retro"] .modal-mask { background: #808080; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-theme="retro"] .modal-body { animation: none; }
body[data-theme="retro"] .modal-body .sub { color: #000080; }

/* 进度盒 */
body[data-theme="retro"] .box { background: #ffffff; padding: 6px; }
body[data-theme="retro"] .block { border: 1px solid #808080; border-radius: 0; }
body[data-theme="retro"] .box .flash {
  background-color: #ff0000 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 8px #ff0000 !important;
}

/* —— 表头 / 排版 —— */
body[data-theme="retro"] header { text-align: center; }
body[data-theme="retro"] header h1 {
  font-family: var(--font-head); font-size: 44px; font-weight: 900; letter-spacing: .02em;
  color: #ff0000; text-shadow: 2px 2px 0 #808080;
  animation: retro-rainbow 4s linear infinite;
}
body[data-theme="retro"] header p { color: #000080; font-family: var(--font-body); font-weight: 700; letter-spacing: .06em; }
body[data-theme="retro"] .eyebrow {
  display: inline-block; background: #c0c0c0; color: #000080;
  font-family: "Courier New", monospace; text-transform: uppercase; letter-spacing: .15em;
  font-size: 12px; padding: 3px 10px; margin-bottom: 14px; transform: none;
}

/* 时间卡：电子表格风（交替行底纹 + 等宽数字） */
body[data-theme="retro"] .time-grid .card-wob { transform: none; }
body[data-theme="retro"] .time-grid .card .name { font-family: "Courier New", monospace; font-size: 22px; letter-spacing: 0; }
body[data-theme="retro"] .time-grid .card .date { font-family: "Courier New", monospace; }
body[data-theme="retro"] .time-grid .card .list { border-bottom: 1px solid #808080; padding: 4px 2px; }
body[data-theme="retro"] .time-grid .card .list:nth-child(odd) { background: #ffffff; }
body[data-theme="retro"] .time-grid .card .list:nth-child(even) { background: #e8e8e8; }

/* 凹槽分隔线（蚀刻感） */
body[data-theme="retro"] .time-grid::after {
  content: ''; grid-column: 1 / -1; height: 4px; margin: 10px 0;
  background: linear-gradient(to bottom, #808080 0%, #808080 50%, #ffffff 50%, #ffffff 100%);
}

/* 说明 / 图例 */
body[data-theme="retro"] .hint li { color: #000; }
body[data-theme="retro"] .hint .sw { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; border-radius: 0; box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf; }
body[data-theme="retro"] .note { color: #000; }

/* 设置弹窗 */
body[data-theme="retro"] .style-head { font-family: var(--font-head); color: #fff; transform: none; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; }
body[data-theme="retro"] .color-row { border-bottom: 1px solid #808080; }
body[data-theme="retro"] .color-label { color: #000; }
body[data-theme="retro"] .color-row input[type=color] { width: 48px; height: 36px; }

/* 跑马灯 / 计数器 / 警示条 */
body[data-theme="retro"] .retro-bar { display: block; background: #000080; margin: 8px 0; overflow: hidden; white-space: nowrap; }
body[data-theme="retro"] .retro-bar span { display: inline-block; padding: 6px 0; font-family: "Courier New", monospace; font-weight: 700; font-size: 14px; letter-spacing: .05em; color: #ffff00; animation: retro-marquee 14s linear infinite; }
body[data-theme="retro"] .retro-counter { display: block; background: #000080; color: #00ff00; font-family: "Courier New", monospace; font-size: 13px; text-align: center; padding: 6px; letter-spacing: .1em; margin: 10px 0; }
body[data-theme="retro"] .retro-stripe { display: block; height: 18px; margin: 10px 0; background: repeating-linear-gradient(45deg, #ffff00, #ffff00 10px, #000000 10px, #000000 20px); }


/* —— 主题：植物 Botanical / Organic Serif（植物园 · 陶土 · 鼠尾草 · 羊皮纸肌理） —— */
body[data-theme="botanical"] {
  --paper: #F9F8F4;       /* 暖石膏白（页面底） */
  --ink: #2D3A31;         /* 深森林绿（正文） */
  --muted: #DCCFC2;       /* 软陶土（次级表面） */
  --accent: #8C9A84;      /* 鼠尾草绿（主交互） */
  --blue: #C27B66;        /* 陶土红（悬停 / CTA） */
  --postit: #F2F0EB;      /* 浅陶土（说明卡底） */
  /* 高度圆角：卡片 24px / 按钮与输入胶囊 */
  --wobbly-lg: 24px; --wobbly-md: 24px; --wobbly-sm: 16px; --wobbly-btn: 9999px; --wobbly-input: 9999px;
  /* 柔散绿调阴影（无重墨暗投） */
  --hard: 0 4px 10px -1px rgba(45,58,49,0.06);
  --hard-md: 0 20px 40px -10px rgba(45,58,49,0.12);
  --hard-sm: 0 4px 6px -1px rgba(45,58,49,0.05);
  /* 字体：Playfair Display 衬线标题 + Source Sans 3 人文无衬线正文 */
  --font-head: 'Playfair Display', 'Songti SC', 'STSong', Georgia, serif;
  --font-body: 'Source Sans 3', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  /* 纸张肌理由 ::after 固定叠层提供，此处背景置空 */
  --bg-image: none;
  --bg-size: auto; --bg-repeat: repeat;
  --ring: rgba(140,154,132,.40);
}
/* 环境色晕：鼠尾草绿柔光斑（固定，置于内容之后） */
body[data-theme="botanical"]::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none; filter: blur(80px);
  top: -120px; right: -90px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(140,154,132,.20), transparent 70%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
/* 纸张颗粒（必选肌理：极淡分形噪点，固定全屏叠层） */
body[data-theme="botanical"]::after {
  content: ''; position: fixed; inset: 0; z-index: 49; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* 隐藏手绘涂鸦（与植物园氛围冲突） */
body[data-theme="botanical"] .deco,
body[data-theme="botanical"] .squiggle,
body[data-theme="botanical"] .tape,
body[data-theme="botanical"] .tack { display: none; }

/* —— 框架：白底 + 石色细边 + 柔影 —— */
body[data-theme="botanical"] .card-wob,
body[data-theme="botanical"] .topbar,
body[data-theme="botanical"] .box,
body[data-theme="botanical"] .modal-body {
  background: #FFFFFF;
  border: 1px solid #E6E2DA;
  box-shadow: var(--hard);
  transform: none;
  color: var(--ink);
  transition: box-shadow .5s ease, border-color .3s ease;
}
body[data-theme="botanical"] .card-wob.note { background: #F2F0EB; }
/* 悬停：柔影绽放 + 鼠尾草描边（轻抬改为柔光，避免与入场动画冲突） */
body[data-theme="botanical"] .card-wob:hover { box-shadow: var(--hard-md); border-color: var(--accent); }
body[data-theme="botanical"] .topbar { transform: none; }
body[data-theme="botanical"] .box { border: 1px solid #E6E2DA; border-radius: 24px; }
body[data-theme="botanical"] .block { border: 1px solid rgba(45,58,49,.06); border-radius: 6px; }
body[data-theme="botanical"] .box .flash {
  background-color: #C27B66 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(194,123,102,.7) !important;
}

/* —— 排版 —— */
body[data-theme="botanical"] header { text-align: center; }
body[data-theme="botanical"] header h1 {
  font-family: var(--font-head); font-size: 50px; font-weight: 700; letter-spacing: .01em; color: var(--ink);
}
body[data-theme="botanical"] header p { color: #7A857C; font-family: var(--font-body); letter-spacing: .04em; }
/* 额标 → 鼠尾草绿 Playfair 斜体 overline */
body[data-theme="botanical"] .eyebrow {
  display: inline-block; border: none; background: transparent; box-shadow: none; transform: none;
  padding: 0; margin-bottom: 14px;
  color: var(--accent); font-family: var(--font-head); font-style: italic; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; font-size: 13px;
}
/* 章节标题：Playfair 衬线，森林绿 */
body[data-theme="botanical"] .hand-title {
  font-family: var(--font-head); font-weight: 600; color: var(--ink); transform: none; letter-spacing: .01em;
}

/* —— 分隔纹（章节间鼠尾草小花饰） —— */
body[data-theme="botanical"] .time-grid::after {
  content: '❧';
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  height: 28px; margin: 8px 0 2px;
  color: var(--accent); font-size: 18px;
}

/* —— 表单 —— */
body[data-theme="botanical"] .field-label { font-family: var(--font-body); color: var(--ink); font-weight: 500; letter-spacing: .03em; }
body[data-theme="botanical"] input.nya-input,
body[data-theme="botanical"] input.life-input {
  background: #F2F0EB; border: 1px solid #E6E2DA; color: var(--ink);
  border-radius: 9999px; font-family: var(--font-body);
}
body[data-theme="botanical"] input::placeholder { color: #9aa39c; font-style: italic; }
body[data-theme="botanical"] input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140,154,132,.35); outline: none; }

/* —— 按钮（胶囊 + 森林绿 / 陶土悬停） —— */
body[data-theme="botanical"] .btn,
body[data-theme="botanical"] .topbar-back,
body[data-theme="botanical"] .style-chip,
body[data-theme="botanical"] .modal-close {
  border: 1px solid var(--accent); border-radius: 9999px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 15px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body[data-theme="botanical"] .btn-primary,
body[data-theme="botanical"] .modal-close {
  background: #2D3A31; color: #fff; border-color: #2D3A31;
}
body[data-theme="botanical"] .btn-primary:hover,
body[data-theme="botanical"] .modal-close:hover {
  background: #C27B66; border-color: #C27B66; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(194,123,102,.5);
}
body[data-theme="botanical"] .btn-primary:active,
body[data-theme="botanical"] .modal-close:active { background: #a9664f; }
body[data-theme="botanical"] .btn-ghost,
body[data-theme="botanical"] .topbar-back {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
}
body[data-theme="botanical"] .btn-ghost:hover,
body[data-theme="botanical"] .topbar-back:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
body[data-theme="botanical"] .btn-ghost:active,
body[data-theme="botanical"] .topbar-back:active { background: #7a8a73; }
body[data-theme="botanical"] .btn .ico { background: var(--accent); color: #fff; }
body[data-theme="botanical"] .btn-primary:hover .ico { background: #fff; color: #C27B66; }
body[data-theme="botanical"] .topbar-title { font-family: var(--font-head); font-weight: 600; color: var(--ink); letter-spacing: .02em; }

/* —— 时间卡内部 —— */
body[data-theme="botanical"] .time-grid .card-wob { transform: none; }
body[data-theme="botanical"] .time-grid .card .name { font-family: var(--font-head); font-weight: 600; }
body[data-theme="botanical"] .time-grid .card .list { border-bottom: 1px solid #E6E2DA; }
body[data-theme="botanical"] .time-grid .card .list:last-child { border-bottom: none; }

/* —— 说明 / 图例 —— */
body[data-theme="botanical"] .hint li { color: var(--ink); }
body[data-theme="botanical"] .hint .sw { border: 1px solid #E6E2DA; border-radius: 6px; box-shadow: var(--hard-sm); }
body[data-theme="botanical"] .card-wob.note p.note { color: #7A857C; font-style: italic; }

/* —— 设置弹窗 —— */
body[data-theme="botanical"] .modal-mask { background: rgba(45,58,49,.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body[data-theme="botanical"] .modal-body h2 { font-family: var(--font-head); font-weight: 700; color: var(--ink); transform: none; letter-spacing: .01em; }
body[data-theme="botanical"] .style-head { font-family: var(--font-body); color: var(--accent); transform: none; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: 14px; }
body[data-theme="botanical"] .modal-body .sub { color: #7A857C; font-style: italic; }
body[data-theme="botanical"] .style-chip { background: #F2F0EB; color: var(--ink); border: 1px solid #E6E2DA; border-radius: 9999px; box-shadow: none; }
body[data-theme="botanical"] .style-chip:hover { border-color: var(--accent); color: var(--accent); }
body[data-theme="botanical"] .style-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
body[data-theme="botanical"] .color-row { border-bottom: 1px solid #E6E2DA; }
body[data-theme="botanical"] .color-label { color: var(--ink); font-family: var(--font-body); font-weight: 500; }
body[data-theme="botanical"] .color-row input[type=color] { border: 1px solid #E6E2DA; border-radius: 12px; box-shadow: var(--hard-sm); }


body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  background-color: var(--paper);
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  min-height: 100vh;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* —— 手绘装饰碎片（有限调色板 + 硬阴影 + 微旋）—— */
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.shape { position: absolute; border: 3px solid var(--deco-ink); box-shadow: 2px 2px 0 var(--deco-ink); }
.shape.s1 { width: 56px; height: 56px; background: var(--deco-red); border-radius: var(--wobbly-sm); top: -14px; right: 10px; transform: rotate(8deg); }
.shape.s2 { width: 46px; height: 46px; background: var(--deco-blue); border-radius: 50%; bottom: 12%; left: -14px; transform: rotate(-6deg); }
.shape.s3 { width: 44px; height: 44px; background: var(--deco-yellow); border-radius: var(--wobbly-sm); top: 40%; right: -12px; transform: rotate(12deg); }
.shape.s4 { width: 26px; height: 26px; background: var(--deco-red); border-radius: 50%; top: 22%; left: 6%; animation: bob 3s ease-in-out infinite; }
.shape.s5 { width: 30px; height: 30px; background: transparent; border-color: var(--deco-blue); border-radius: var(--wobbly-sm); bottom: 26%; right: 8%; transform: rotate(-10deg); }
@media (max-width: 480px) { .shape.s2, .shape.s3, .shape.s5 { display: none; } }

.lifecount { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 14px; }
.screen[hidden] { display: none; }

/* —— 头部 —— */
header { text-align: center; padding: 26px 0 6px; position: relative; }
.eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink); background: var(--postit);
  border: 3px solid var(--ink); border-radius: var(--wobbly-sm);
  padding: 4px 14px; box-shadow: var(--hard-sm);
  transform: rotate(-2deg); margin-bottom: 14px;
}
header h1 {
  font-family: var(--font-head);
  font-size: 42px; font-weight: 700; color: var(--ink);
  margin: 0 0 4px; letter-spacing: .01em;
}
header p { font-size: 15px; color: var(--ink); margin: 0 0 8px; font-weight: 400; opacity: .8; }
.squiggle { display: block; width: 200px; height: 14px; margin: 2px auto 0; }
.squiggle path { stroke: var(--deco-red); }

/* —— 手绘卡（贴纸/便签）—— */
.card-wob {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--wobbly-md);
  padding: 20px;
  margin: 18px 0;
  box-shadow: var(--hard-md);
  animation: pop .45s ease both;
}
.card-wob.note { background: var(--postit); }       /* 说明用便利贴黄 */
.hand-title {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  margin: 0 0 12px; letter-spacing: .01em;
}
.hand-title.lg { font-size: 26px; }
.hand-title.sm { font-size: 22px; }

/* 胶带 / 图钉 装饰 */
.tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 116px; height: 30px;
  background: rgba(170,170,170,.45);
  border: 1px dashed rgba(90,90,90,.55);
}
.tack {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--deco-red); border: 3px solid var(--deco-ink);
  box-shadow: 2px 2px 0 var(--deco-ink);
}

/* —— 表单标签与输入（手绘框）—— */
.field-label {
  display: block; font-size: 15px; color: var(--ink);
  margin: 14px 0 6px; letter-spacing: .04em; font-weight: 700;
}
.field-label:first-child { margin-top: 0; }
input.nya-input, input.life-input {
  width: 100%; height: 54px;
  border: 3px solid var(--ink);
  border-radius: var(--wobbly-input);
  padding: 0 16px; font-size: 17px; font-family: var(--font-body);
  color: var(--ink); background: #fff;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s, border-color .15s;
}
input.life-input { margin-top: 4px; }
input::placeholder { color: rgba(45,45,45,.4); font-weight: 400; }
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }

/* —— 按钮（手绘椭圆 + 硬阴影 + 按压压平）—— */
.btn-row { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.btn {
  flex: 1; min-height: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid var(--ink);
  border-radius: var(--wobbly-btn);
  font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; color: var(--ink); background: #fff;
  box-shadow: var(--hard);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
}
.btn .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 17px; font-weight: 900; line-height: 1;
}
.btn-primary:hover { background: var(--accent); color: #fff; transform: translate(2px,2px); box-shadow: var(--hard-sm); }
.btn-primary:hover .ico { background: #fff; color: var(--accent); }
.btn-primary:active { transform: translate(4px,4px); box-shadow: none; }
.btn-ghost { background: var(--muted); }
.btn-ghost:hover { background: var(--blue); color: #fff; transform: translate(2px,2px); box-shadow: var(--hard-sm); }
.btn-ghost:active { transform: translate(4px,4px); box-shadow: none; }

/* —— 结果页顶栏（手绘条）—— */
.topbar {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 3px solid var(--ink);
  border-radius: var(--wobbly-md); padding: 12px 16px;
  box-shadow: var(--hard-md); margin: 16px 0 4px; transform: rotate(-0.6deg);
}
.topbar-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); }
.topbar-back {
  flex: 0 0 auto; min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 3px solid var(--ink); border-radius: var(--wobbly-btn);
  background: var(--muted); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease;
}
.topbar-back:hover { background: var(--blue); color: #fff; transform: translate(2px,2px); box-shadow: none; }
.topbar-back:active { transform: translate(4px,4px); }

/* —— ① 你的人生进度（单框：标题+胶带在框外，框内即网格，不套框）—— */
.progress-wrap { position: relative; margin: 22px 0 18px; text-align: center; }
.progress-wrap .hand-title { display: inline-block; transform: rotate(-1deg); }
.box {
  font-size: 0; width: 460px; height: 460px; max-width: 100%;
  margin: 6px auto 0;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--wobbly-lg);
  padding: 10px;
  box-shadow: var(--hard-md);
}
@media (max-width: 520px) { .box { height: 360px; width: 360px; } }
@media (max-width: 380px) { .box { height: 300px; width: 300px; } }
.box .flash {
  animation: flash ease 1.6s infinite;
  background-color: #4fa38c !important;
  box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(79,163,140,.7);
}
@keyframes flash { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.block {
  display: inline-block;
  width: calc(100% / 20 - 5px); height: calc(100% / 20 - 5px);
  margin: 2.5px; border-radius: 3px;
  border: 1px solid rgba(45,45,45,.12);
}
.block.past { background-color: var(--c-past); }
.block.sleep { background-color: var(--c-sleep); }
.block.work { background-color: var(--c-work); }
.block.slack { background-color: var(--c-slack); }
.block.happy { background-color: var(--c-happy); }
.block.surplus { background-color: var(--c-surplus); }
.block.retired { background-color: var(--c-retired); }

/* —— ② 已经过去了 / 剩下的时间（并列）—— */
.time-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 16px 0; }
.time-grid .card-wob { margin: 0; min-width: 0; transform: rotate(0.5deg); }
.time-grid .card-wob:nth-child(2) { transform: rotate(-0.6deg); }
.time-grid .card { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; text-align: left; margin: 0; }
.time-grid .card .list {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; min-width: 0;
  border-bottom: 2px dashed var(--muted); padding: 4px 2px; gap: 2px 8px;
}
.time-grid .card .list:last-child { border-bottom: none; }
.time-grid .card .name { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.1; flex: 0 0 auto; white-space: nowrap; }
.time-grid .card .name small { font-size: 13px; color: var(--ink); opacity: .65; margin-left: 2px; }
.time-grid .card .date { font-size: 13px; color: var(--ink); opacity: .7; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.time-grid .card .date small { margin-left: 1px; }
/* 已过去 / 剩余 始终在一行（窄屏只缩小字号与间距，不再堆叠） */
@media (max-width: 400px) {
  .time-grid { gap: 10px; }
  .time-grid .card-wob { padding: 12px; }
  .time-grid .card .name { font-size: 17px; }
  .time-grid .card .date { font-size: 11px; }
  .time-grid .card .list { padding: 3px 1px; }
}

/* —— 设置：风格切换 —— */
.style-head { font-family: var(--font-head); text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); margin: 4px 0 12px; transform: rotate(-1deg); }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.style-chip {
  min-height: 46px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: 3px solid var(--ink); border-radius: var(--wobbly-sm);
  background: #fff; color: var(--ink); box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
}
.style-chip:hover { transform: translate(2px, 2px); box-shadow: none; }
.style-chip.active { background: var(--accent); color: #fff; box-shadow: var(--hard-sm); }

/* —— ③ 说明 / 图例 —— */
.hint-sub {
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--ink); opacity: .75; margin: 16px 0 2px; letter-spacing: .02em;
}
.hint { margin: 6px 0 4px; padding: 0; }
.hint li { display: flex; align-items: flex-start; margin: 10px 0; list-style: none; line-height: 1.5; font-size: 14px; color: var(--ink); font-weight: 400; }
.hint .sw {
  width: 20px; height: 20px; border-radius: 5px 8px 6px 9px; margin-right: 10px; margin-top: 1px; flex: 0 0 auto;
  border: 3px solid var(--ink); box-shadow: var(--hard-sm);
}
.note { font-size: 13px; color: var(--ink); opacity: .7; margin: 12px 0 0; font-weight: 400; }

/* —— 设置弹窗（手绘厚卡 + 模糊遮罩）—— */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(45,45,45,.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* 包裹框 + 关闭按钮，让 × 浮在框框外部 */
.modal-frame { position: relative; width: 92%; max-width: 440px; }
.modal-close {
  position: absolute; top: -18px; right: 4px; z-index: 2;
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; font-weight: 700; font-family: var(--font-body);
  border: 3px solid var(--ink); border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--accent); color: #fff; transform: translate(2px, 2px); box-shadow: none; }
.modal-close:active { transform: translate(4px, 4px); }
.modal-body {
  position: relative; width: 100%;
  background: #fff; border: 3px solid var(--ink);
  border-radius: var(--wobbly-md); padding: 24px;
  max-height: 82vh; overflow: auto;
  box-shadow: 8px 8px 0 var(--ink);
  animation: pop .4s ease both;
}
.modal-body h2 { font-family: var(--font-head); text-align: center; font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 6px; transform: rotate(-1deg); }
.modal-body .sub { text-align: center; font-size: 13px; color: var(--ink); opacity: .7; margin: 0 0 16px; }
.color-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 2px dashed var(--muted); }
.color-row:last-of-type { border-bottom: none; }
.color-label { font-size: 15px; color: var(--ink); font-weight: 700; }
.color-row input[type=color] {
  width: 54px; height: 40px; border: 3px solid var(--ink); border-radius: var(--wobbly-input);
  background: #fff; padding: 2px; cursor: pointer; box-shadow: var(--hard-sm);
}

/* —— 动效 —— */
@keyframes pop { 0% { transform: scale(.9) rotate(-1deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }

/* 复古风专属：跑马灯 / 彩虹字 / 脉冲徽章（默认隐藏，仅复古风显示） */
.retro-bar, .retro-counter, .retro-stripe { display: none; }
@keyframes retro-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes retro-rainbow { 0% { color: #ff0000; } 17% { color: #ff8000; } 33% { color: #ffff00; } 50% { color: #00ff00; } 67% { color: #0080ff; } 83% { color: #8000ff; } 100% { color: #ff0000; } }
@keyframes retro-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 480px) {
  .btn { box-shadow: var(--hard-sm); }
  .card-wob { box-shadow: var(--hard); }
  .topbar { box-shadow: var(--hard); }
  .modal-body { box-shadow: var(--hard-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card-wob, .modal-body { animation: none !important; }
  .btn:hover, .btn-ghost:hover, .topbar-back:hover { transform: none !important; }
}

/* ============================================================
   ④ 生成卡片 / 历史记录（Page Flip 翻页）
   ============================================================ */

/* —— 结果页底部操作行 —— */
.action-row { display: flex; gap: 14px; margin: 22px 0 10px; flex-wrap: wrap; }
.action-row .btn { flex: 1; min-width: 140px; }

/* —— Toast 轻提示 —— */
.toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 200;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 22px; max-width: 86vw;
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  border-radius: var(--wobbly-btn); box-shadow: var(--hard-sm);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* —— 历史弹层 —— */
.history-frame { max-width: 480px; }
.history-body { padding: 20px 16px 14px; }
.flip-area { position: relative; margin-top: 4px; }

/* 空状态 */
.flip-empty { text-align: center; padding: 30px 10px 26px; }
.flip-empty p { margin: 0 0 8px; font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); }
.flip-empty .flip-empty-sub { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink); opacity: .6; }

/* —— 翻页书（Page Flip）：
   grid 同格堆叠所有页；页面绕左缘（书脊）rotateY 翻转，
   backface-visibility 让翻过的页自然消失，露出下一页 —— */
.flipbook {
  position: relative;
  display: grid;
  perspective: 1800px;
  -webkit-perspective: 1800px;
  width: 100%;
}
/* 右缘"纸页厚度"装饰（暗示下面还有更多页） */
.flipbook::after {
  content: ""; position: absolute; top: 7px; bottom: 7px; right: -6px; width: 5px;
  background: repeating-linear-gradient(to bottom, #fff 0 3px, var(--muted) 3px 5px);
  border-radius: 0 4px 4px 0; border: 1px solid rgba(45,45,45,.18); border-left: none;
  z-index: 0; pointer-events: none;
}
/* 单卡预览（仅本次卡片）时，不显示"还有更多页"的厚度暗示 */
.flipbook.single::after { display: none; }
.flip-page {
  grid-area: 1 / 1;
  position: relative;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.35,.08,.22,1);
}
.flipbook.no-anim .flip-page { transition: none !important; }
.flip-page.flipped { transform: rotateY(-180deg); }
/* 翻页过程中页面内侧渐暗（纸张背光感） */
.flip-page::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--wobbly-sm);
  background: linear-gradient(to right, rgba(0,0,0,.30), rgba(0,0,0,.06) 42%, transparent 72%);
  opacity: 0; transition: opacity .62s ease; pointer-events: none;
}
.flip-page.flipped::after { opacity: 1; }

/* 点击热区（覆盖当前页左右半区） */
.flip-hot {
  grid-area: 1 / 1; position: relative; z-index: 500;
  width: 50%; height: 100%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip-hot.left { justify-self: start; cursor: w-resize; }
.flip-hot.right { justify-self: end; cursor: e-resize; }

/* —— 翻页导航 —— */
.flip-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.flip-arrow {
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink); border-radius: var(--wobbly-btn);
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 24px; font-weight: 900; line-height: 1;
  cursor: pointer; box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease, opacity .15s ease;
}
.flip-arrow:hover:not(.disabled) { background: var(--blue); color: #fff; transform: translate(2px,2px); box-shadow: none; }
.flip-arrow:active:not(.disabled) { transform: translate(4px,4px); box-shadow: none; }
.flip-arrow.disabled { opacity: .3; cursor: default; box-shadow: none; }
.flip-indicator {
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink);
  min-width: 64px; text-align: center;
}

/* —— 底部计数 / 清空 —— */
.history-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--muted);
}
.history-count { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink); opacity: .65; }
.history-clear {
  min-height: 36px; padding: 0 16px;
  display: inline-flex; align-items: center;
  border: 2px solid var(--ink); border-radius: var(--wobbly-btn);
  background: var(--muted); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.history-clear:hover { background: var(--accent); color: #fff; }
.history-clear.armed { background: #d32f2f; border-color: #d32f2f; color: #fff; animation: retro-pulse 1s infinite; }

/* —— 卡片快照（每一页的内容） —— */
.snap-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--wobbly-md);
  box-shadow: var(--hard);
  padding: 14px 14px 11px;
}
/* 书脊阴影（左缘压暗，书本感） */
.snap-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 16px;
  background: linear-gradient(to right, rgba(0,0,0,.13), transparent);
  border-radius: inherit; pointer-events: none;
}
.snap-head { display: flex; align-items: center; gap: 8px; }
.snap-badge {
  font-family: var(--font-body); font-size: 11px; font-weight: 900; letter-spacing: .08em;
  background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.snap-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); flex: 1; }
.snap-theme {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--ink); opacity: .85;
  border: 2px solid var(--ink); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.snap-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px;
  font-family: var(--font-body); font-size: 11.5px; color: var(--ink); opacity: .65;
}

/* 迷你格子（20×20，颜色取自卡片记录的 --c-* 变量） */
.mini-box {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 1px;
  width: 100%; max-width: 250px; margin: 2px auto 0;
  background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 4px;
}
.mb { aspect-ratio: 1 / 1; border-radius: 1px; background: var(--c-surplus); }
.mb.past { background: var(--c-past); }
.mb.sleep { background: var(--c-sleep); }
.mb.work { background: var(--c-work); }
.mb.slack { background: var(--c-slack); }
.mb.happy { background: var(--c-happy); }
.mb.surplus { background: var(--c-surplus); }
.mb.retired { background: var(--c-retired); }
.mb.now { box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }

/* 已过去 / 剩下 概览行 */
.snap-rows { display: flex; gap: 8px; }
.snap-row {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  background: var(--muted); border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}
.snap-row b { font-family: var(--font-head); font-size: 14px; }

/* 六类格数统计（3 列 × 2 行） */
.snap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 8px; }
.snap-stat {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 12px; color: var(--ink); white-space: nowrap;
}
.snap-stat b { font-family: var(--font-head); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); flex: 0 0 auto; }
.dot.past { background: var(--c-past); }
.dot.sleep { background: var(--c-sleep); }
.dot.work { background: var(--c-work); }
.dot.slack { background: var(--c-slack); }
.dot.happy { background: var(--c-happy); }
.dot.surplus { background: var(--c-surplus); }
.dot.retired { background: var(--c-retired); }

.snap-foot {
  text-align: center; font-family: var(--font-body); font-size: 10.5px; font-weight: 400;
  color: var(--ink); opacity: .5; letter-spacing: .08em;
}

@media (max-width: 400px) {
  .snap-stats { grid-template-columns: repeat(2, 1fr); }
  .snap-row { font-size: 12px; padding: 5px 8px; }
  .history-frame { width: 96%; }
}

/* 确保 hidden 属性始终生效（覆盖 .flip-nav/.history-foot/.flipbook 等 display:flex/grid 作者样式） */
[hidden] { display: none !important; }

/* ============================================================
   ⑤ 高级设置（Toggle 开关 / 自定义方格 / 示例卡片堆叠）
   ============================================================ */

/* 分隔线 */
.adv-sep { height: 0; border-top: 3px dashed var(--muted); margin: 22px 0 4px; transform: rotate(-0.4deg); }

/* Toggle 开关 */
.adv-toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 6px; }
.adv-toggle-label { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); }
.toggle { position: relative; display: inline-block; width: 58px; height: 32px; cursor: pointer; flex: 0 0 auto; }
.toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track { position: absolute; inset: 0; background: var(--muted); border: 3px solid var(--ink); border-radius: 9999px; transition: background-color .18s ease; box-shadow: var(--hard-sm); }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border: 3px solid var(--ink); border-radius: 50%; transition: transform .18s cubic-bezier(.34,1.56,.64,1); box-sizing: border-box; }
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(26px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--ring); }

.adv-body { margin-top: 6px; }
.adv-sub { font-size: 13px; color: var(--ink); opacity: .75; margin: 6px 0 10px; line-height: 1.5; }
.adv-unit { font-family: var(--font-body); font-weight: 700; margin-left: 6px; }

/* 总时间：分段控件 */
.seg { display: flex; gap: 8px; margin: 4px 0 2px; }
.seg-btn { flex: 1; min-height: 44px; font-family: var(--font-body); font-weight: 700; font-size: 14px; border: 3px solid var(--ink); border-radius: var(--wobbly-sm); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--hard-sm); transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease; }
.seg-btn:hover { transform: translate(2px, 2px); box-shadow: none; }
.seg-btn.active { background: var(--accent); color: #fff; box-shadow: var(--hard-sm); }
#advTimeRange .nya-input, #advTimeDays .life-input { margin-top: 8px; }

/* 方格种类编辑器 */
.cat-row { border: 3px solid var(--ink); border-radius: var(--wobbly-md); padding: 12px; margin: 12px 0; background: #fff; box-shadow: var(--hard-sm); }
.cat-head { display: flex; gap: 8px; align-items: center; }
.cat-name { flex: 1; height: 46px; }
.cat-del { flex: 0 0 auto; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%; background: var(--muted); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--hard-sm); font-family: var(--font-body); transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease; }
.cat-del:hover { background: var(--accent); color: #fff; transform: translate(2px, 2px); box-shadow: none; }
.cat-meta { display: flex; gap: 14px; margin: 10px 0; align-items: center; flex-wrap: wrap; }
.cat-color-wrap, .cat-shape-wrap { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); }
.cat-color { width: 46px; height: 38px; border: 3px solid var(--ink); border-radius: var(--wobbly-input); background: #fff; padding: 2px; cursor: pointer; box-shadow: var(--hard-sm); }
.cat-shape, .mini-select { height: 38px; border: 3px solid var(--ink); border-radius: var(--wobbly-input); background: #fff; font-family: var(--font-body); font-weight: 700; padding: 0 6px; color: var(--ink); }
.cat-desc { height: 44px; margin: 6px 0; }
.cat-rule-label { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); margin: 8px 0 4px; opacity: .85; }
.cat-rule { width: 100%; height: 44px; border: 3px solid var(--ink); border-radius: var(--wobbly-input); background: #fff; font-family: var(--font-body); font-weight: 700; padding: 0 8px; color: var(--ink); }
.cat-rule-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.inline-field { display: inline-flex; align-items: center; gap: 4px; }
.inline-label, .inline-text { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); }
.mini-select, .mini-num { height: 38px; border: 3px solid var(--ink); border-radius: var(--wobbly-input); background: #fff; font-family: var(--font-body); font-weight: 700; padding: 0 6px; color: var(--ink); }
.mini-num { width: 74px; }
.adv-add { width: 100%; margin-top: 4px; }

/* 示例：卡片堆叠 Card Stack（像一摞扑克牌，滑动切走最上面一张） */
.card-stack { position: relative; height: 200px; margin-top: 10px; touch-action: pan-y; }
.ex-card {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wobbly-md);
  box-shadow: var(--hard-sm); cursor: grab; user-select: none; -webkit-user-select: none;
  transition: transform .35s cubic-bezier(.22,.9,.3,1), opacity .35s ease;
  will-change: transform;
}
.ex-card.dragging { transition: none; cursor: grabbing; box-shadow: var(--hard-md); }
.ex-card.fly { transition: transform .42s ease, opacity .42s ease; }
.ex-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; border: 3px solid var(--ink); }
.ex-body { flex: 1; min-width: 0; }
.ex-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); }
.ex-sub { font-family: var(--font-body); font-size: 12px; color: var(--ink); opacity: .7; margin: 2px 0 6px; }
.ex-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ex-dot { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 4px 6px 5px 7px; }
.ex-dot.shape-circle { border-radius: 50%; }
.ex-dot.shape-triangle { border-radius: 0; clip-path: polygon(50% 4%, 96% 96%, 4% 96%); }
.ex-dot.shape-diamond { border-radius: 0; clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.ex-apply { flex: 0 0 auto; align-self: stretch; padding: 0 16px; border: 3px solid var(--ink); border-radius: var(--wobbly-btn); background: var(--muted); color: var(--ink); font-family: var(--font-body); font-weight: 700; cursor: pointer; box-shadow: var(--hard-sm); transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease; }
.ex-apply:hover { background: var(--accent); color: #fff; transform: translate(2px, 2px); box-shadow: none; }
.stack-wrap { position: relative; }
.stack-hint { position: absolute; right: 0; bottom: 100%; margin-bottom: 4px; font-family: var(--font-body); font-size: 12px; color: var(--ink); opacity: .55; }
/* 生成格子后的展示页：副标题与说明 */
.adv-subtitle { font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 1.5; margin: 2px 0 10px; color: var(--ink); opacity: .75; letter-spacing: .02em; }
.adv-note { font-family: var(--font-body); font-size: 14px; line-height: 1.7; opacity: .85; margin: 0 0 14px; white-space: normal; }

/* 高级网格（替代默认 20×20 固定布局，按内容生长） */
.adv-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: auto !important; align-content: start; }
.adv-grid .block { width: auto; height: auto; aspect-ratio: 1 / 1; margin: 0; border-radius: 3px; }
.adv-block.shape-circle { border-radius: 50%; }
.adv-block.shape-triangle { border-radius: 0; clip-path: polygon(50% 4%, 96% 96%, 4% 96%); }
.adv-block.shape-diamond { border-radius: 0; clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.adv-empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; font-family: var(--font-body); font-weight: 700; color: var(--ink); opacity: .7; }
.adv-empty-cell { background: repeating-linear-gradient(45deg, #0000000d, #0000000d 4px, transparent 4px, transparent 8px) !important; border: 1px dashed rgba(0,0,0,.18); }

/* 复古风下隐藏手绘装饰但保留高级控件 */
body[data-theme="retro"] .ex-num { color: #fff; }

/* ===== 做同款浮动入口（右下角紧凑 pill，不占文档流）===== */
.replica-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 9999px;
  background: #ffffff;
  color: #2d2d2d;
  font-family: var(--font-body), "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.replica-fab:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.16); }
.replica-fab:focus-visible { outline: 3px solid rgba(45,93,161,.35); outline-offset: 2px; }
.replica-fab:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.replica-fab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replica-fab[data-state="hidden"] { display: none; }

/* 复制成功 / 失败提示（pill 上方短暂浮现） */
.replica-toast {
  position: fixed;
  right: 16px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  max-width: min(320px, calc(100vw - 32px));
  padding: 9px 14px;
  border-radius: 14px;
  background: #1f2937;
  color: #fff;
  font-family: var(--font-body), "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.replica-toast.show { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .replica-fab, .replica-toast { transition: none; }
}