/* ================================================================
   待办事项 · 流浪地球 WANDERING EARTH — UEG 深空任务终端
   深空近黑幕布 / 行星发动机等离子光柱 / MOSS 红光监控 / 银河带
   主形态为深色深空，浅色为"白昼航段"备用形态
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------------- 设计基调 ----------------
   深空幕布 #0f0f1c（近黑微紫）
   全息青 #2cc9ff —— 交互与数据读数
   发动机焰色 琥珀 #EE9B01 → 赤红 #EF3F28 —— 能量、预警、主行动
   MOSS 红 #ff3a3a —— 监控眼
------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #0f0f1c;
  --bg2: #090b16;
  --panel: rgba(17, 19, 34, 0.55);
  --panel-solid: #12142a;
  --line: rgba(44, 201, 255, 0.24);
  --hairline: rgba(44, 201, 255, 0.12);
  --accent: #2cc9ff;
  --accent2: #0e9fd8;
  --accent-soft: rgba(44, 201, 255, 0.09);
  --on-accent: #03121c;
  --text: #ebebeb;
  --muted: #8b96ad;
  --dim: #5d6880;
  --flame1: #ee9b01;
  --flame2: #ef3f28;
  --flame-grad: linear-gradient(150deg, var(--flame1) 0%, var(--flame2) 100%);
  --flame-soft: rgba(239, 63, 40, 0.12);
  --green: #3ddc97;
  --moss: #ff3a3a;
  --input-bg: rgba(8, 10, 22, 0.6);
  --hover-bg: rgba(44, 201, 255, 0.07);
  --soft-bg: rgba(44, 201, 255, 0.06);
  --checkbox-border: rgba(44, 201, 255, 0.5);
  --scrollbar: rgba(44, 201, 255, 0.2);
  --scrollbar-hover: rgba(44, 201, 255, 0.38);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(44, 201, 255, 0.16);
  --glow: 0 0 16px rgba(44, 201, 255, 0.35);
  --grid-line: rgba(44, 201, 255, 0.045);
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* 白昼航段（浅色备用形态）：参考橙金色星云的暖调暮光，清透不灰 */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3e8d7;
  --bg2: #e4cdac;
  --panel: rgba(253, 249, 241, 0.74);
  --panel-solid: #faf3e6;
  --line: rgba(150, 96, 32, 0.32);
  --hairline: rgba(150, 96, 32, 0.17);
  --accent: #b26a12;
  --accent2: #8f5309;
  --accent-soft: rgba(178, 106, 18, 0.1);
  --on-accent: #ffffff;
  --text: #2a2013;
  --muted: #6b5638;
  --dim: #97805e;
  --flame-soft: rgba(239, 63, 40, 0.12);
  --green: #0d9661;
  --input-bg: rgba(255, 253, 248, 0.6);
  --hover-bg: rgba(178, 106, 18, 0.1);
  --soft-bg: rgba(150, 96, 32, 0.08);
  --checkbox-border: rgba(178, 106, 18, 0.6);
  --scrollbar: rgba(150, 96, 32, 0.3);
  --scrollbar-hover: rgba(150, 96, 32, 0.48);
  --shadow-md: 0 16px 44px rgba(120, 80, 30, 0.22);
  --ring: 0 0 0 3px rgba(178, 106, 18, 0.2);
  --glow: 0 0 14px rgba(178, 106, 18, 0.3);
  --grid-line: rgba(150, 96, 32, 0.07);
}

html, body { height: 100%; }

body {
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  background: linear-gradient(168deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}

/* 星点 + 蓝图网格层（固定，不随滚动） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 7% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 66%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 38%, rgba(190,230,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 82%, rgba(255,255,255,.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 55%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 53% 28%, rgba(190,230,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 74%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 8%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 44%, rgba(255,255,255,.46) 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 88%, rgba(190,230,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 25%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 60%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 92%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 58%, rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 90%, rgba(190,230,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 48%, rgba(255,255,255,.36) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 68%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 15%, rgba(190,230,255,.6) 50%, transparent 51%),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 56px);
}
[data-theme="light"] body::before {
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 56px);
}

::selection { background: rgba(44, 201, 255, 0.3); }

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 应用铺满整个浏览器窗口 */
.app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vh, 32px) clamp(18px, 5vw, 56px) 18px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.auth-view { display: flex; flex-direction: column; width: 100%; flex: 1; min-height: 0; }
.auth-view.hidden { display: none; }
.hidden { display: none !important; }

/* ---------------- 顶栏（标识 / 遥测状态） ---------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 14px; }

/* 品牌环：UEG 雷达 —— 缓慢旋转的扫描弧 + 中心光点 */
.brand-ring {
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: var(--glow), inset 0 0 10px rgba(44, 201, 255, 0.2);
  flex-shrink: 0;
}
.brand-ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0deg, rgba(44,201,255,.25) 60deg, transparent 90deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56%);
          mask: radial-gradient(circle, transparent 0 55%, #000 56%);
  animation: radarSweep 6s linear infinite;
}
.brand-ring::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
@keyframes radarSweep { to { transform: rotate(360deg); } }

.brand-text h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 5px;
}
.brand-text h1 { text-shadow: 0 0 22px rgba(44, 201, 255, 0.4); }
[data-theme="light"] .brand-text h1 { text-shadow: none; }
.brand-text p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--dim);
  margin-top: 4px;
}
.telemetry {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.5px;
}
#telemetry-date { color: var(--accent); }
.online { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.online b { color: var(--green); font-weight: 600; }
.online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: onlinePulse 2.4s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* MOSS 监控眼：红色独眼 + 呼吸脉冲 + 周期性眨眼 */
.moss-eye {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  vertical-align: middle; margin-right: 8px; position: relative; flex-shrink: 0;
  background: radial-gradient(circle, #2a0608 0 28%, #6e0d14 29% 56%, var(--moss) 57% 72%, #5c0a10 73%);
  box-shadow: 0 0 8px rgba(255, 58, 58, 0.55), inset 0 0 4px rgba(0, 0, 0, 0.7);
  transform-origin: center; animation: mossBlink 7s ease-in-out infinite;
}
.moss-eye::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ff7a6a, #a8000f 62%, #3a0008);
}
.moss-eye::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: mossPulse 2.6s ease-in-out infinite;
}
@keyframes mossPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 58, 58, 0.18), 0 0 6px rgba(255, 58, 58, 0.35); }
  50% { box-shadow: 0 0 0 2px rgba(255, 58, 58, 0.3), 0 0 13px rgba(255, 58, 58, 0.75); }
}
@keyframes mossBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 95% { transform: scaleY(.12); }
}

/* 主题切换：HUD 角钮，CSS 绘制日/月图标 */
.theme-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, box-shadow .2s, background-color .3s;
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: var(--glow); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .tt-sun { display: none; }
[data-theme="light"] .theme-toggle .tt-sun { display: block; }
[data-theme="light"] .theme-toggle .tt-moon { display: none; }

/* ---------------- HUD 主面板（切角括号 + 楣标 + 扫描线质感） ---------------- */
.panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--panel);
  /* 四角切角括号 */
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px;
  background-position:
    left -1px top -1px, left -1px top -1px,
    right -1px top -1px, right -1px top -1px,
    left -1px bottom -1px, left -1px bottom -1px,
    right -1px bottom -1px, right -1px bottom -1px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 24px 28px 14px;
  transition: background-color .3s, border-color .3s;
}
/* 面板内极淡 CRT 扫描线 */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}
[data-theme="light"] .panel::after { background: none; }
.panel > * { position: relative; }

/* 面板楣标：骑在上边框中央，HUD 编号样式 */
.panel-tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(44, 201, 255, 0.5);
}
[data-theme="light"] .panel-tag { background: var(--bg); text-shadow: none; }
.panel-tag::before { content: "[ "; color: var(--dim); }
.panel-tag::after { content: " ]"; color: var(--dim); }

/* ---------------- 新建任务输入行 ---------------- */
.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.input-row input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 12px 15px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input-row input[type="text"]::placeholder { color: var(--dim); }
.input-row input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: var(--ring), var(--glow);
}
.input-row select,
.input-row input[type="date"] {
  padding: 11px 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.input-row select:hover,
.input-row input[type="date"]:hover { border-color: var(--accent); }
.input-row select:focus,
.input-row input[type="date"]:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* 主行动按钮：行星发动机点火 —— 琥珀到赤红的焰色梯度 */
.input-row button {
  padding: 12px 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(90, 20, 0, 0.45);
  background: var(--flame-grad);
  border: none;
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  cursor: pointer;
  white-space: nowrap;
  filter: drop-shadow(0 0 12px rgba(239, 63, 40, 0.45));
  transition: filter .2s, transform .15s;
}
.input-row button:hover {
  filter: brightness(1.1) drop-shadow(0 0 20px rgba(238, 155, 1, 0.55));
  transform: translateY(-1px);
}
.input-row button:active { transform: scale(0.97); }

/* ---------------- 筛选行 ---------------- */
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.filter-group {
  display: flex;
  gap: 2px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px;
}
.filter-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent2) 100%);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(44, 201, 255, 0.35);
}
#search-input {
  flex: 1;
  min-width: 140px;
  padding: 9px 14px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background-color .3s;
}
#search-input::placeholder { color: var(--dim); }
#search-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
#sort-select,
#category-filter {
  padding: 9px 11px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background-color .3s;
}
#sort-select:hover, #category-filter:hover { border-color: var(--accent); }
#sort-select:focus, #category-filter:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ---------------- 错误提示（焰色预警） ---------------- */
.error {
  background: var(--flame-soft);
  border: 1px solid var(--flame2);
  color: var(--flame2);
  font-size: 13px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.error.hidden { display: none; }

/* ---------------- 任务列表（发丝线分隔，无卡片墙） ---------------- */
.list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 2px 0;
}

.list { list-style: none; }
.list li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 15px 6px 15px 16px;
  border-bottom: 1px solid var(--hairline);
  animation: slide-in .25s ease;
  transition: background .2s;
}
.list li:hover { background: var(--hover-bg); }
/* 左侧优先级色条 */
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 28px;
  background: var(--dim);
  border-radius: 0 2px 2px 0;
}
.list li.pri2::before { background: var(--flame2); box-shadow: 0 0 8px rgba(239, 63, 40, 0.5); }
.list li.pri1::before { background: var(--accent); box-shadow: 0 0 8px rgba(44, 201, 255, 0.4); }
.list li.pri0::before { background: var(--dim); }
.list li.done::before { background: var(--green); box-shadow: 0 0 8px rgba(61, 220, 151, 0.45); }

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 圆环 checkbox：未选全息青环，完成绿色填充 */
.list li input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px; height: 19px;
  flex-shrink: 0;
  border: 2px solid var(--checkbox-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .1s;
}
.list li input[type="checkbox"]:hover { border-color: var(--accent); box-shadow: 0 0 8px rgba(44, 201, 255, 0.4); }
.list li input[type="checkbox"]:active { transform: scale(0.9); }
.list li input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(61, 220, 151, 0.5);
}
.list li input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #04131f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 优先级标签：等宽字体遥测编号（P1 焰红 / P2 青 / P3 灰） */
.priority-badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  user-select: none;
  min-width: 24px;
  text-align: center;
}
.priority-badge.p2 { color: var(--flame2); text-shadow: 0 0 10px rgba(239, 63, 40, 0.4); }
.priority-badge.p1 { color: var(--accent); }
.priority-badge.p0 { color: var(--dim); }

/* 截止日期：等宽遥测读数 */
.due-date {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}
.due-date.overdue { color: var(--flame2); font-weight: 700; text-shadow: 0 0 10px rgba(239, 63, 40, 0.35); }
.due-date.finished { color: var(--green); font-weight: 700; }

/* 分类标签：描边胶囊 */
.category-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  white-space: nowrap;
}

.list li .text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
  transition: color .25s;
  user-select: none;
}
.list li.done .text {
  text-decoration: line-through;
  text-decoration-color: var(--dim);
  color: var(--dim);
}

/* 编辑 / 删除按钮：低亮度常显 */
.list li .edit,
.list li .delete {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .2s, background .2s, color .2s, border-color .2s;
}
.list li:hover .edit,
.list li:hover .delete,
.list li:focus-within .edit,
.list li:focus-within .delete { opacity: 1; }
.list li .edit { font-size: 15px; }
.list li .edit:hover { background: var(--hover-bg); border-color: var(--accent); color: var(--accent); }
.list li .delete { font-size: 16px; }
.list li .delete:hover { background: var(--flame-soft); border-color: var(--flame2); color: var(--flame2); }
@media (hover: none) {
  .list li .edit,
  .list li .delete { opacity: 0.8; }
}

/* ---------------- 编辑模式 ---------------- */
.edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.edit-row input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  outline: none;
  color: var(--text);
  background: var(--input-bg);
  box-shadow: var(--ring);
}
.edit-row select,
.edit-row input[type="date"] {
  padding: 7px 8px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  color: var(--text);
  background: var(--input-bg);
}
.edit-row select:focus,
.edit-row input[type="date"]:focus { border-color: var(--accent); }
.edit-row button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.edit-row button:active { transform: scale(0.96); }
.edit-save { background: var(--accent); color: var(--on-accent); }
.edit-save:hover { background: var(--accent2); }
.edit-cancel { background: var(--hover-bg); color: var(--text); border: 1px solid var(--line); }
.edit-cancel:hover { border-color: var(--accent); }

/* ---------------- 空状态 ---------------- */
.empty {
  text-align: center;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 64px 0 30px;
}
.empty::before {
  content: "\1F6F8";
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.8;
}
.empty.hidden { display: none; }

/* ---------------- 底部状态栏 ---------------- */
footer {
  margin-top: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--muted);
}
#count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  white-space: nowrap;
}
/* 完成进度：发动机燃料焰色 */
.progress {
  flex: 0 1 240px;
  height: 4px;
  background: var(--soft-bg);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--flame1), var(--flame2));
  box-shadow: 0 0 8px rgba(238, 155, 1, 0.5);
  transition: width .35s ease;
}
.progress-text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--flame1);
  letter-spacing: 1px;
}
.footer-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.icp {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: .5px;
  opacity: .8;
}
.icp:hover { color: var(--accent); }
footer button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 2px;
  transition: color .2s, background .2s, border-color .2s;
}
footer button:hover { background: var(--accent-soft); border-color: var(--line); text-shadow: 0 0 10px rgba(44, 201, 255, 0.4); }
/* 关键操作用焰色预警 */
#clear-done, #logout-btn { color: var(--flame2); }
#clear-done:hover, #logout-btn:hover { background: var(--flame-soft); border-color: var(--flame2); text-shadow: 0 0 10px rgba(239, 63, 40, 0.4); }

/* ---------------- 登录视图：MOSS 身份验证 ---------------- */
.moss-login {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 18px;
}
/* 外圈旋转扫描环 */
.moss-login::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 40deg, rgba(255, 58, 58, 0.7) 55deg 70deg,
    transparent 85deg 180deg, rgba(255, 58, 58, 0.35) 200deg 210deg, transparent 225deg);
  -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 69% 78%, transparent 79%);
          mask: radial-gradient(circle, transparent 0 68%, #000 69% 78%, transparent 79%);
  animation: radarSweep 9s linear infinite;
}
.moss-login::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 58, 58, 0.35);
}
.moss-login-eye {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a0608 0 28%, #6e0d14 29% 56%, var(--moss) 57% 72%, #5c0a10 73%);
  box-shadow: 0 0 18px rgba(255, 58, 58, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.7);
  transform-origin: center;
  animation: mossBlink 7s ease-in-out infinite;
}
.moss-login-eye::before {
  content: ""; position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ff7a6a, #a8000f 62%, #3a0008);
}
.moss-login-eye::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: mossPulse 2.6s ease-in-out infinite;
}

.login-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--glow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 30px 30px 34px;
  width: 100%;
  max-width: 400px;
  margin: auto;
  transition: background-color .3s, border-color .3s;
}
.login-form h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 8px;
  text-indent: 8px;
  margin-bottom: 6px;
  text-align: center;
  color: var(--accent);
}
.login-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-align: center;
  color: var(--dim);
  margin-bottom: 20px;
}
.login-form input {
  width: 100%;
  padding: 13px 15px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.login-form input::placeholder { color: var(--dim); font-family: var(--mono); font-size: 13px; letter-spacing: 1px; }
.login-form input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring), var(--glow);
}
.login-form button {
  width: 100%;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 10px;
  text-indent: 10px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(90, 20, 0, 0.45);
  background: var(--flame-grad);
  border: none;
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  cursor: pointer;
  margin-top: 18px;
  filter: drop-shadow(0 0 12px rgba(239, 63, 40, 0.45));
  transition: filter .2s, transform .15s;
}
.login-form button:hover { filter: brightness(1.1) drop-shadow(0 0 18px rgba(238, 155, 1, 0.55)); }
.login-form button:active { transform: scale(0.97); }
.login-form button:disabled { opacity: .7; cursor: wait; }
.login-form .error { margin-bottom: 0; max-width: none; text-align: center; margin-top: 14px; }

/* ---------------- 弹窗通用 ---------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 11, 22, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in .15s ease;
}
.overlay.hidden { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px 28px 22px;
  width: min(380px, 90vw);
  box-shadow: var(--shadow-md), var(--glow);
  text-align: center;
  animation: pop-in .18s ease;
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

.modal h2 { font-size: 16px; font-weight: 700; letter-spacing: 3px; margin-bottom: 12px; color: var(--flame2); }
.modal h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 10px;
  background: var(--flame-grad);
  vertical-align: 1px;
}
.modal p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  word-break: break-word;
  max-height: 96px;
  overflow-y: auto;
}
.modal-actions { display: flex; gap: 12px; }
.modal-actions button {
  flex: 1;
  padding: 11px 0;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.modal-actions button:active { transform: scale(0.97); }
.btn-cancel { background: var(--hover-bg); color: var(--text); border: 1px solid var(--line); }
.btn-cancel:hover { border-color: var(--accent); }
.btn-danger { background: var(--flame2); color: #fff; box-shadow: 0 0 12px rgba(239, 63, 40, 0.4); }
.btn-danger:hover { background: var(--flame1); }

/* ---------------- 统计看板 ---------------- */
.stats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 11, 22, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: fade-in .15s ease;
}
.stats-overlay.hidden { display: none; }
.stats-panel {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 2px;
  width: min(660px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px 26px;
  box-shadow: var(--shadow-md), var(--glow);
}
.stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.stats-head h2 { font-size: 17px; letter-spacing: 3px; }
.stats-head h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 10px;
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  vertical-align: 1px;
}
.stats-close {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--hover-bg);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.stats-close:hover { color: var(--flame2); background: var(--flame-soft); border-color: var(--flame2); }
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--soft-bg);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 16px 8px;
  text-align: center;
  transition: background-color .3s, border-color .3s;
}
.stat-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--mono);
  text-shadow: 0 0 12px rgba(44, 201, 255, 0.35);
}
.stat-label { font-size: 12px; color: var(--muted); margin-top: 5px; letter-spacing: 2px; }
.stat-section { margin-bottom: 20px; }
.stat-section h3 { font-size: 13px; color: var(--muted); margin-bottom: 12px; letter-spacing: 2px; }
.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
  border-bottom: 1px solid var(--hairline);
  padding: 0 4px;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.chart-bar {
  width: 100%;
  max-width: 34px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px rgba(44, 201, 255, 0.3);
  transition: height .3s;
}
.chart-val { font-size: 11px; color: var(--text); margin-bottom: 4px; font-family: var(--mono); }
.chart-label { font-size: 11px; color: var(--dim); margin-top: 6px; white-space: nowrap; font-family: var(--mono); }

/* ---------------- 细滚动条 ---------------- */
.list-wrap::-webkit-scrollbar,
.stats-panel::-webkit-scrollbar { width: 8px; }
.list-wrap::-webkit-scrollbar-thumb,
.stats-panel::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
.list-wrap::-webkit-scrollbar-thumb:hover,
.stats-panel::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ---------------- 拖拽排序 ---------------- */
.list li[draggable="true"] { cursor: grab; }
.list li[draggable="true"]:active { cursor: grabbing; }
.drag-grip {
  flex-shrink: 0;
  margin-left: -8px;
  margin-right: -6px;
  color: var(--dim);
  font-size: 13px;
  user-select: none;
}
.list li:hover .drag-grip { color: var(--accent); }
.list li.dragging {
  opacity: 0.4;
  border: 1px dashed var(--accent);
  border-radius: 2px;
}

/* ---------------- 任务备注 ---------------- */
.note-toggle {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--dim);
  font-size: 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .15s;
}
.note-toggle:hover { color: var(--accent); border-color: var(--accent); }
.list li.note-open .note-toggle { color: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.todo-note {
  flex-basis: 100%;
  order: 99;
  display: none;
  margin: 8px 0 2px 35px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--soft-bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 2px 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.list li.note-open .todo-note { display: block; }
.note-input {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.note-input::placeholder { color: var(--dim); }
.note-input:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ---------------- 到期提醒横幅（焰色预警） ---------------- */
.due-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 9px 14px;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--flame2);
  background: var(--flame-soft);
  border: 1px solid rgba(239, 63, 40, 0.45);
  border-radius: 2px;
}
.due-banner.hidden { display: none; }
.due-banner-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  opacity: 0.75;
}
.due-banner-close:hover { opacity: 1; }

/* ---------------- 提示条（撤销删除） ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(44, 201, 255, 0.25);
  animation: toast-in 0.25s ease-out;
}
.toast.hidden { display: none; }
.toast-undo {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 2px;
  padding: 3px 12px;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 1px;
}
.toast-undo:hover { background: var(--accent); color: var(--on-accent); }
.toast-undo.hidden { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------- 重复徽标 / 图片缩略图 ---------------- */
.recur-badge {
  font-size: 12px;
  flex: none;
  opacity: 0.9;
}
.todo-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  flex: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.todo-thumb:hover { border-color: var(--accent); box-shadow: 0 0 10px rgba(44, 201, 255, 0.35); }

/* ---------------- 图片查看浮层 ---------------- */
.img-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 6, 14, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-overlay.hidden { display: none; }
.img-overlay img {
  max-width: 92vw;
  max-height: 90vh;
  border: 1px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 40px rgba(44, 201, 255, 0.3);
}

/* ---------------- 编辑模式：图片操作行 ---------------- */
.img-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
}
.img-btn {
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.img-btn:hover { border-color: var(--accent); color: var(--accent); }
.img-btn.danger:hover { border-color: var(--flame2); color: var(--flame2); }

/* ---------------- 今日聚焦 ---------------- */
.today-focus {
  margin: 10px 0 6px;
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  background: var(--accent-soft);
}
.today-focus.hidden { display: none; }
.tf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.tf-title {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent);
  font-family: var(--mono);
}
.tf-count {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.5px;
  font-family: var(--mono);
}
.tf-list { list-style: none; margin: 0; padding: 0; }
.tf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--hairline);
}
.tf-item:last-child { border-bottom: none; }
.tf-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
.tf-text { flex: 1; word-break: break-all; }
.tf-due {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--dim);
  flex: none;
  font-family: var(--mono);
}
.tf-item.overdue .tf-due { color: var(--flame2); }
.tf-item.overdue .tf-text { color: var(--flame2); }

/* ---------------- 提醒设置弹窗 ---------------- */
.remind-modal { max-width: 480px; }
.remind-modal h2::before { background: linear-gradient(150deg, var(--accent), var(--accent2)); }
.remind-section {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.remind-section h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent);
}
.remind-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.6;
}
.remind-status {
  margin: 0 0 8px;
  font-size: 13px;
}
.remind-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.remind-result {
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--accent);
}

/* ---------------- 番茄钟 ---------------- */
.pomo-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--accent); cursor: pointer;
  box-shadow: var(--shadow-md); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.pomo-fab svg { width: 24px; height: 24px; display: block; }
.pomo-fab:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md), var(--glow); }

.pomo-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 60;
  width: 300px; padding: 16px 18px 18px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.pomo-panel.hidden { display: none; }
.pomo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pomo-mode { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.pomo-mode.break { color: var(--green); }
.pomo-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.pomo-close:hover { color: var(--text); }

.pomo-ring { position: relative; width: 150px; height: 150px; margin: 6px auto 10px; }
.pomo-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pomo-track { fill: none; stroke: var(--hairline); stroke-width: 6; }
.pomo-prog {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .5s linear, stroke .2s;
}
.pomo-mode.break ~ .pomo-ring .pomo-prog, .pomo-panel.break .pomo-prog { stroke: var(--green); }
.pomo-time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 32px; font-weight: 600; color: var(--text);
  letter-spacing: 1px;
}

.pomo-controls { display: flex; gap: 6px; margin-bottom: 10px; }
.pomo-btn {
  flex: 1; padding: 7px 0; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--text);
  font-size: 13px; transition: background .15s, border-color .15s;
}
.pomo-btn:hover { background: var(--hover-bg); border-color: var(--accent); }
.pomo-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pomo-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }

.pomo-task, .pomo-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.pomo-task { flex-direction: column; align-items: stretch; gap: 4px; }
.pomo-task select, .pomo-settings input[type="number"] {
  width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--input-bg); color: var(--text); font-size: 12px;
}
.pomo-settings input[type="number"] { width: 56px; }
.pomo-settings label { display: inline-flex; align-items: center; gap: 4px; }
.pomo-summary {
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--muted); text-align: center;
}
.pomo-summary b { color: var(--accent); font-family: var(--mono); }

.pomo-badge {
  font-size: 11px; color: var(--flame2); background: var(--flame-soft);
  padding: 1px 6px; border-radius: 8px; margin-left: 6px; white-space: nowrap;
}
.pomo-start {
  background: none; border: none; cursor: pointer; font-size: 15px;
  padding: 0 4px; opacity: .6; transition: opacity .15s, transform .15s;
}
.pomo-start:hover { opacity: 1; transform: scale(1.15); }

/* ================================================================
   深空场景：银河带 + 流浪地球（主角） + 木星（远景巨物） + 土星（景深）
   全局环境光运动：漂移、闪烁、呼吸，无侵入式动画
   ================================================================ */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 1; transition: opacity 1.6s ease .15s; }
/* 登录前隐藏整个深空场景，登录后缓缓淡入 */
.scene.scene-off { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }

/* 星云：深空蓝紫基调（参考蓝紫星云图）+ 一抹紫色余晖，克制不彩虹 */
.scene-nebula { position: absolute; inset: 0; pointer-events: none; }
.neb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  mix-blend-mode: screen; opacity: .62;
}
.neb-1 { width: 62vmin; height: 62vmin; left: -12vmin; top: 6vmin;
  background: radial-gradient(circle, rgba(92, 96, 255, .46), rgba(54, 44, 170, .22) 48%, transparent 72%); }
.neb-2 { width: 56vmin; height: 56vmin; right: -6vmin; bottom: 2vmin;
  background: radial-gradient(circle, rgba(52, 118, 255, .36), rgba(30, 58, 180, .17) 50%, transparent 72%); }
.neb-3 { width: 46vmin; height: 46vmin; left: 30vmin; bottom: -14vmin;
  background: radial-gradient(circle, rgba(168, 84, 255, .18), rgba(110, 50, 200, .09) 50%, transparent 72%); }
.neb-4 { display: none; }

/* 银河带：全景星空贴图，极慢漂移 */
.scene-milkyway {
  position: absolute; inset: -12%; pointer-events: none;
  background: url("assets/galaxy.png") center/cover no-repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 42%, #000 30%, transparent 78%);
  animation: galaxyDrift 240s linear infinite alternate;
  will-change: transform;
}
@keyframes galaxyDrift {
  0% { transform: scale(1.04) rotate(0deg); }
  100% { transform: scale(1.1) rotate(1.6deg); }
}

/* 木星：右上角远景巨物，被视口裁切，制造"正在掠过木星"的尺度感 */
.scene-jupiter {
  position: absolute; top: -9vmin; right: -7vmin; width: 38vmin; height: 38vmin; border-radius: 50%;
  overflow: hidden; opacity: .55; transform: rotate(-5deg);
  background: url("assets/jupiter.jpg") 0 0 / 200% 100% repeat-x;
  box-shadow:
    inset -3vmin -2vmin 6vmin rgba(0,0,0,.6),
    inset 2vmin 2vmin 5vmin rgba(255,235,200,.16),
    0 0 70px rgba(220,160,100,.18);
  animation: jupiterSpin 90s linear infinite;
  will-change: background-position;
}
.scene-jupiter::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,248,230,.24), transparent 42%),
    radial-gradient(circle at 70% 72%, rgba(0,0,0,.55), transparent 60%);
}
@keyframes jupiterSpin { to { background-position-x: -76vmin; } }

/* 流浪地球：主角星体（位于左上角，原土星位置） —— 昼面贴图 + 独立云层 + 大气辉光 */
.scene-earth {
  position: absolute; left: 7vmin; top: 10vmin; width: 15vmin; height: 15vmin; border-radius: 50%;
  overflow: hidden; opacity: .92; transform: rotate(-8deg);
  background: #061a2e url("assets/earth-day.jpg") 0 0 / 200% 100% repeat-x;
  box-shadow:
    inset -1.6vmin -1.2vmin 2.6vmin rgba(0,0,0,.62),
    inset .9vmin .9vmin 1.8vmin rgba(180,225,255,.25),
    0 0 30px rgba(80,170,255,.38),
    0 0 80px rgba(80,170,255,.16);
  animation: earthSpin 60s linear infinite;
  will-change: background-position;
}
.earth-clouds {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: url("assets/earth-clouds.png") 0 0 / 200% 100% repeat-x;
  mix-blend-mode: screen; opacity: .55;
  animation: earthClouds 42s linear infinite;
  will-change: background-position;
}
.scene-earth::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 30%, rgba(200,235,255,.32), transparent 46%),
    radial-gradient(circle at 72% 74%, rgba(0,0,0,.58), transparent 62%);
}
@keyframes earthSpin { to { background-position-x: -34vmin; } }
@keyframes earthClouds { to { background-position-x: -34vmin; } }

/* 地平线行星发动机：横贯页脚的雪山山脉 + 蓝白等离子光柱（流浪地球海报意象） */
.scene-engines {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 58vmin;
  pointer-events: none;
}
.engine-range { position: absolute; inset: 0; }
/* 雪山山脉（3200×660 高清网络素材，夜色压暗处理）：横贯整个页面下方 */
.range-mountain {
  position: absolute;
  left: 0; right: 0; bottom: -1vmin;
  width: 100%; height: 30vmin;
  background: url("assets/engine-mountain.png") center top / cover no-repeat;
  filter: brightness(.62) contrast(1.05) saturate(.85);
  z-index: 2;
}
/* 等离子光柱：羽流素材作蒙版，渐变上色（可换任意焰色）；下半截藏在山脊后 */
.engine-range .beam {
  position: absolute;
  bottom: 8vmin;
  background: linear-gradient(to top,
    #ffffff 0%, #cfe9ff 18%, #8ec8ff 45%, #5aa9f5 72%,
    rgba(90, 169, 245, 0.35) 90%, rgba(90, 169, 245, 0) 100%);
  -webkit-mask: url("assets/engine-plume.png") center / 100% 100% no-repeat;
          mask: url("assets/engine-plume.png") center / 100% 100% no-repeat;
  transform-origin: bottom center;
  animation: jetFlicker 3.2s ease-in-out infinite alternate;
  will-change: opacity, transform;
  z-index: 1;
}
/* 琥珀色 / 紫罗兰色焰变体 */
.engine-range .beam-amber {
  background: linear-gradient(to top,
    #fff6e8 0%, #ffdfae 18%, #ffb85e 45%, #ff9c46 72%,
    rgba(255, 156, 70, 0.35) 90%, rgba(255, 156, 70, 0) 100%);
}
.engine-range .beam-violet {
  background: linear-gradient(to top,
    #fbf7ff 0%, #e2d2fb 18%, #bd9bf2 45%, #a87dff 72%,
    rgba(168, 125, 255, 0.35) 90%, rgba(168, 125, 255, 0) 100%);
}
@keyframes jetFlicker {
  0% { opacity: .8; transform: scaleY(.97); }
  100% { opacity: 1; transform: scaleY(1.04); }
}
/* 右侧主发动机群 */
.engine-range .beam-main {
  right: 13vmin; width: 5.4vmin; height: 46vmin;
  filter: drop-shadow(0 0 26px rgba(150, 212, 255, 0.6)) brightness(1.25);
}
.engine-range .beam-mid {
  right: 4.5vmin; width: 3vmin; height: 30vmin;
  opacity: .85;
  filter: drop-shadow(0 0 16px rgba(140, 205, 255, 0.5)) brightness(1.1);
  animation-delay: .8s;
}
.engine-range .beam-far {
  right: 20vmin; width: 2.2vmin; height: 24vmin;
  opacity: .6;
  filter: drop-shadow(0 0 12px rgba(140, 205, 255, 0.4));
  animation-delay: 1.5s;
}
.engine-range .beam-r1 {
  right: .5vmin; width: 2vmin; height: 21vmin;
  opacity: .75;
  filter: drop-shadow(0 0 14px rgba(170, 120, 255, 0.5));
  animation-delay: 2s;
}
.engine-range .beam-r2 {
  right: 8.5vmin; width: 2.8vmin; height: 33vmin;
  opacity: .9;
  filter: drop-shadow(0 0 18px rgba(255, 160, 80, 0.55)) brightness(1.1);
  animation-delay: .3s;
}
/* 左侧远景发动机 */
.engine-range .beam-l1 {
  left: 2vmin; width: 2.6vmin; height: 36vmin;
  opacity: .9;
  filter: drop-shadow(0 0 18px rgba(140, 205, 255, 0.5)) brightness(1.15);
  animation-delay: .5s;
}
.engine-range .beam-l2 {
  left: 9.5vmin; width: 1.7vmin; height: 23vmin;
  opacity: .8;
  filter: drop-shadow(0 0 14px rgba(255, 160, 80, 0.55)) brightness(1.05);
  animation-delay: 1.1s;
}
/* 喷流粒子：从喷口向上抛射的炽微粒（与光柱同位的兄弟层，避开光柱蒙版） */
.sparks { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.sparks s {
  position: absolute; top: 0;
  left: calc(var(--ox, 0) * var(--sw, 2vmin));
  width: var(--sz, 4px); height: var(--sz, 4px);
  margin: calc(var(--sz, 4px) / -2) 0 0 calc(var(--sz, 4px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, rgba(170, 220, 255, 0.9) 45%, rgba(170, 220, 255, 0) 72%);
  opacity: 0;
  animation: sparkRise var(--dur, 2.6s) cubic-bezier(.2, .65, .3, 1) calc((var(--dl, 0s) + var(--t0, 0s)) * -1) infinite;
  will-change: transform, opacity;
}
.sparks-amber s {
  background: radial-gradient(circle, #fff6e6, rgba(255, 190, 110, 0.9) 45%, rgba(255, 190, 110, 0) 72%);
}
.sparks-violet s {
  background: radial-gradient(circle, #f7f0ff, rgba(200, 165, 255, 0.9) 45%, rgba(200, 165, 255, 0) 72%);
}
.sparks s:nth-child(1)  { --ox: -.9;  --dx: -.2vmin;  --dy: -15vmin;   --dur: 1.4s;  --dl: 0s;    --sz: 5px; }
.sparks s:nth-child(2)  { --ox: -.55; --dx: .15vmin;  --dy: -12vmin;   --dur: 1.2s;  --dl: .25s;  --sz: 4px; }
.sparks s:nth-child(3)  { --ox: -.2;  --dx: .08vmin;  --dy: -18vmin;   --dur: 1.7s;  --dl: .5s;   --sz: 6px; }
.sparks s:nth-child(4)  { --ox: .15;  --dx: -.12vmin; --dy: -11vmin;   --dur: 1.3s;  --dl: .75s;  --sz: 3.5px; }
.sparks s:nth-child(5)  { --ox: .5;   --dx: .22vmin;  --dy: -16vmin;   --dur: 1.5s;  --dl: 1s;    --sz: 4.5px; }
.sparks s:nth-child(6)  { --ox: .85;  --dx: -.25vmin; --dy: -13vmin;   --dur: 1.25s; --dl: 1.2s;  --sz: 3px; }
.sparks s:nth-child(7)  { --ox: -.7;  --dx: .1vmin;   --dy: -17vmin;   --dur: 1.6s;  --dl: .12s;  --sz: 3.8px; }
.sparks s:nth-child(8)  { --ox: -.35; --dx: -.18vmin; --dy: -14vmin;   --dur: 1.35s; --dl: .62s;  --sz: 5.5px; }
.sparks s:nth-child(9)  { --ox: 0;    --dx: .05vmin;  --dy: -19vmin;   --dur: 1.8s;  --dl: .87s;  --sz: 4.2px; }
.sparks s:nth-child(10) { --ox: .35;  --dx: -.08vmin; --dy: -12.5vmin; --dur: 1.15s; --dl: 1.12s; --sz: 3.2px; }
.sparks s:nth-child(11) { --ox: .7;   --dx: .18vmin;  --dy: -15.5vmin; --dur: 1.45s; --dl: .37s;  --sz: 2.8px; }
.sparks s:nth-child(12) { --ox: 1;    --dx: -.1vmin;  --dy: -13.5vmin; --dur: 1.28s; --dl: .95s;  --sz: 4.8px; }
.sparks s:nth-child(13) { --ox: -1;   --dx: .12vmin;  --dy: -17.5vmin; --dur: 1.65s; --dl: 1.45s; --sz: 3.6px; }
.sparks s:nth-child(14) { --ox: -.6;  --dx: -.22vmin; --dy: -11.5vmin; --dur: 1.18s; --dl: 1.7s;  --sz: 2.5px; }
.sparks s:nth-child(15) { --ox: -.25; --dx: .07vmin;  --dy: -16.5vmin; --dur: 1.52s; --dl: .18s;  --sz: 5.2px; }
.sparks s:nth-child(16) { --ox: .1;   --dx: -.15vmin; --dy: -14.5vmin; --dur: 1.38s; --dl: .82s;  --sz: 3px; }
.sparks s:nth-child(17) { --ox: .45;  --dx: .2vmin;   --dy: -18.5vmin; --dur: 1.75s; --dl: 1.32s; --sz: 4px; }
.sparks s:nth-child(18) { --ox: .8;   --dx: -.05vmin; --dy: -12.8vmin; --dur: 1.22s; --dl: 1.58s; --sz: 3.4px; }
.sparks s:nth-child(19) { --ox: -.8;  --dx: .13vmin;  --dy: -15.8vmin; --dur: 1.48s; --dl: .55s;  --sz: 5.8px; }
.sparks s:nth-child(20) { --ox: -.45; --dx: -.28vmin; --dy: -13.8vmin; --dur: 1.32s; --dl: 1.85s; --sz: 2.6px; }
.sparks s:nth-child(21) { --ox: -.95; --dx: .1vmin;   --dy: -16.2vmin; --dur: 1.42s; --dl: .05s;  --sz: 3.3px; }
.sparks s:nth-child(22) { --ox: -.5;  --dx: -.1vmin;  --dy: -12.2vmin; --dur: 1.16s; --dl: .42s;  --sz: 4.4px; }
.sparks s:nth-child(23) { --ox: -.1;  --dx: .2vmin;   --dy: -17.2vmin; --dur: 1.62s; --dl: .68s;  --sz: 2.9px; }
.sparks s:nth-child(24) { --ox: .3;   --dx: -.2vmin;  --dy: -14.2vmin; --dur: 1.3s;  --dl: 1.05s; --sz: 5px; }
.sparks s:nth-child(25) { --ox: .65;  --dx: .08vmin;  --dy: -18.2vmin; --dur: 1.72s; --dl: 1.38s; --sz: 3.7px; }
.sparks s:nth-child(26) { --ox: .95;  --dx: -.15vmin; --dy: -13.2vmin; --dur: 1.24s; --dl: 1.62s; --sz: 2.7px; }
.sparks s:nth-child(27) { --ox: -.75; --dx: .12vmin;  --dy: -15.2vmin; --dur: 1.44s; --dl: .3s;   --sz: 4.6px; }
.sparks s:nth-child(28) { --ox: -.3;  --dx: -.08vmin; --dy: -11.2vmin; --dur: 1.12s; --dl: .78s;  --sz: 3.1px; }
.sparks s:nth-child(29) { --ox: .05;  --dx: .16vmin;  --dy: -16.8vmin; --dur: 1.56s; --dl: 1.18s; --sz: 5.4px; }
.sparks s:nth-child(30) { --ox: .55;  --dx: -.12vmin; --dy: -14.8vmin; --dur: 1.36s; --dl: 1.5s;  --sz: 3.9px; }
@keyframes sparkRise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translate(var(--dx, 8px), var(--dy, -14vmin)) scale(.25); opacity: 0; }
}
/* 各喷口的粒子发射位（对齐光柱顶端）；--t0 打散各发动机的发射节奏；--sw 发射面半宽 */
.sparks-main { right: 15.7vmin; bottom: 48.5vmin; --t0: 0s;   --sw: 2.4vmin; }
.sparks-mid  { right: 6vmin;   bottom: 34.4vmin; --t0: .9s;  --sw: 1.3vmin; }
.sparks-far  { right: 21.1vmin; bottom: 29vmin;   --t0: 1.7s; --sw: 1vmin; }
.sparks-l1   { left: 3.3vmin;  bottom: 39.7vmin; --t0: .5s;  --sw: 1.15vmin; }
.sparks-l2   { left: 10.35vmin; bottom: 28.2vmin; --t0: 2.3s; --sw: .75vmin; }
.sparks-r1   { right: 1.5vmin; bottom: 26.5vmin;  --t0: 1.2s; --sw: .9vmin; }
.sparks-r2   { right: 9.9vmin; bottom: 37vmin;    --t0: 2.8s; --sw: 1.25vmin; }
/* 山口被光柱照亮的云气：贴在光柱穿越山脊的位置 */
.range-glow {
  position: absolute;
  right: 9vmin; bottom: 14vmin;
  width: 28vmin; height: 11vmin;
  background: radial-gradient(ellipse at center, rgba(200, 232, 255, 0.5), rgba(90, 165, 230, 0.18) 55%, transparent 76%);
  z-index: 1;
  animation: cloudPulse 4.2s ease-in-out infinite alternate;
}
@keyframes cloudPulse {
  0% { opacity: .55; }
  100% { opacity: .95; }
}
/* 山脊云雾带：横贯山腰的薄雾，遮掩光柱与山体的交界 */
.range-mist {
  position: absolute;
  left: 0; right: 0; bottom: 12vmin;
  height: 14vmin;
  background: linear-gradient(to top,
    rgba(140, 190, 235, 0.22),
    rgba(140, 190, 235, 0.1) 45%,
    transparent 80%);
  filter: blur(6px);
  mix-blend-mode: screen;
  z-index: 3;
  pointer-events: none;
}

/* 全局渐晕：边缘沉入深空，星体贴图融入幕布（不再是贴纸感） */
.scene-vignette { position: absolute; inset: 0; }
.scene-vignette {
  background:
    radial-gradient(84.3% 84.3% at 50% 42%, transparent 28%, rgba(15, 15, 28, 0.5) 72%, var(--bg) 98%),
    radial-gradient(circle at 50% 46%, rgba(9, 11, 22, 0.42), transparent 58%);
}
[data-theme="light"] .scene-vignette {
  background:
    radial-gradient(90% 90% at 50% 42%, transparent 30%, rgba(216, 186, 146, 0.42) 74%, var(--bg) 99%),
    radial-gradient(circle at 50% 46%, rgba(234, 208, 170, 0.26), transparent 60%);
}
/* 浅色形态压低场景存在感 */
[data-theme="light"] .scene-milkyway { opacity: .12; }
[data-theme="light"] .scene-jupiter { opacity: .4; }
[data-theme="light"] .scene-earth { opacity: .7; }
[data-theme="light"] .neb { opacity: .55; }
/* 浅色星云：参考橙金色星云的暖调暮光 */
[data-theme="light"] .neb-1 {
  background: radial-gradient(circle, rgba(255, 176, 84, 0.5), rgba(226, 128, 40, 0.24) 48%, transparent 72%);
}
[data-theme="light"] .neb-2 {
  background: radial-gradient(circle, rgba(255, 150, 66, 0.42), rgba(214, 106, 32, 0.2) 50%, transparent 72%);
}
[data-theme="light"] .neb-3 {
  background: radial-gradient(circle, rgba(255, 204, 128, 0.5), rgba(238, 150, 60, 0.2) 50%, transparent 72%);
}
[data-theme="light"] .scene-engines { opacity: 1; }
/* 浅色下雪山自然亮度；光柱整体加深加粗，与暖底拉开色差 */
[data-theme="light"] .range-mountain { filter: brightness(1.12) saturate(.9); }
[data-theme="light"] .engine-range .beam {
  opacity: 1;
  background: linear-gradient(to top,
    #dcecfb 0%, #a8cdf2 20%, #4f97e0 50%, #1f74d6 78%,
    rgba(31, 116, 214, 0.4) 92%, rgba(31, 116, 214, 0) 100%);
  filter: drop-shadow(0 0 18px rgba(6, 80, 145, 0.85)) saturate(1.25);
}
[data-theme="light"] .engine-range .beam-main {
  width: 6.6vmin;
  filter: drop-shadow(0 0 26px rgba(6, 80, 145, 0.9)) saturate(1.3);
}
[data-theme="light"] .engine-range .beam-mid { width: 3.8vmin; }
[data-theme="light"] .engine-range .beam-far { width: 2.8vmin; }
[data-theme="light"] .engine-range .beam-l1 { width: 3.3vmin; }
[data-theme="light"] .engine-range .beam-r1 { width: 2.5vmin; }
[data-theme="light"] .engine-range .beam-r2 { width: 3.5vmin; }
[data-theme="light"] .engine-range .beam-l2 { width: 2.2vmin; }
[data-theme="light"] .engine-range .beam-amber {
  background: linear-gradient(to top,
    #ffe9c8 0%, #f7c37a 20%, #e89a3a 50%, #d97a1a 78%,
    rgba(217, 122, 26, 0.4) 92%, rgba(217, 122, 26, 0) 100%);
  filter: drop-shadow(0 0 18px rgba(190, 100, 15, 0.8)) saturate(1.2);
}
[data-theme="light"] .engine-range .beam-violet {
  background: linear-gradient(to top,
    #e9defb 0%, #c4a9ef 20%, #9a72dd 50%, #7b4fd0 78%,
    rgba(123, 79, 208, 0.4) 92%, rgba(123, 79, 208, 0) 100%);
  filter: drop-shadow(0 0 18px rgba(110, 60, 190, 0.75)) saturate(1.15);
}
/* 浅色模式：白热等离子炽芯（半透明，透出底层焰色），避免"烟雾感" */
[data-theme="light"] .engine-range .beam::after {
  content: "";
  position: absolute; inset: 0 24%;
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.97) 0%, rgba(244, 251, 255, 0.92) 35%,
    rgba(214, 238, 255, 0.55) 65%, rgba(200, 230, 255, 0) 92%);
  -webkit-mask: url("assets/engine-plume.png") center / 100% 100% no-repeat;
          mask: url("assets/engine-plume.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
/* 浅色模式粒子：加深加饱和，亮底上可见 */
[data-theme="light"] .sparks s {
  background: radial-gradient(circle, #ffffff, rgba(40, 120, 210, 0.95) 45%, rgba(40, 120, 210, 0) 72%);
  filter: drop-shadow(0 0 4px rgba(10, 90, 170, 0.8));
}
[data-theme="light"] .sparks-amber s {
  background: radial-gradient(circle, #fff3df, rgba(215, 130, 30, 0.95) 45%, rgba(215, 130, 30, 0) 72%);
  filter: drop-shadow(0 0 4px rgba(190, 110, 15, 0.8));
}
[data-theme="light"] .sparks-violet s {
  background: radial-gradient(circle, #f3ebff, rgba(130, 85, 210, 0.95) 45%, rgba(130, 85, 210, 0) 72%);
  filter: drop-shadow(0 0 4px rgba(110, 60, 190, 0.8));
}
[data-theme="light"] .range-glow {
  background: radial-gradient(ellipse at center, rgba(190, 222, 250, 0.8), rgba(90, 150, 210, 0.35) 55%, transparent 76%);
}
[data-theme="light"] .range-mist {
  background: linear-gradient(to top,
    rgba(255, 250, 240, 0.5),
    rgba(230, 220, 200, 0.22) 45%,
    transparent 80%);
}

/* ---------------- 小屏幕适配 ---------------- */
@media (max-width: 720px) {
  .telemetry { display: none; }
  .panel { padding: 20px 16px 12px; }
  .progress { flex-basis: 120px; }
}
@media (max-width: 640px) {
  .app { padding: 14px 12px 12px; }
  .input-row button { width: 100%; }
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
  .scene-jupiter { opacity: .4; }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}