@font-face {
  font-family: "FangZheng Pixel";
  src:
    url("fonts/BoutiqueBitmap9x9_1.9.woff2") format("woff2"),
    url("fonts/BoutiqueBitmap9x9_1.9（常规体）.ttf") format("truetype");
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================
   Classic Macintosh (System 6/7) 黑白像素风 —— 默认主题
   - 50% 抖动灰桌面 + 纯白窗体 + 黑墨边框 + 硬黑投影
   - 高亮使用「反相」(黑底白字)，无霓虹/辉光，纯像素质感
   ============================================================ */
:root,
[data-theme="classic"] {
  --accent: #000000;
  --accent-muted: #555555;
  --accent-dim: #b6b6b6;
  --bg: #8c8c8c;
  --surface: #ffffff;
  --surface-alt: #d4d4d4;
  --screen: #ffffff;
  --hl: #000000;
  --hl-text: #ffffff;
  --danger: #000000;
  --warning: #000000;
  --text-on-accent: #ffffff;
  /* 经典麦金塔窗体投影：纯黑硬边 */
  --pixel-shadow: #000000;
  /* 显示器边框质感：1px 浅灰内线 + 3px 黑外框 + 硬投影，像立在桌面上的老式 CRT */
  --bezel-inner: #999999;
  /* 像素颗粒（抖动网纹）的着色 */
  --grain: rgba(0, 0, 0, 0.10);
  --heart: #000000;
  /* ---- 日志命令行配色（黑白主题） ---- */
  --log-prompt: #b6b6b6;
  --log-gold:   #7a5c00;
  --log-ok:     #2a6e2a;
  --log-err:    #cc2222;
  --log-warn:   #8b5e00;
  --log-sys:    #666666;
  --log-act:    #000000;
  --mainline-bg: #6b5a00;
  --mainline-fg: #ffffff;
  --log-mainline: #6b5a00;
  /* ---- 状态栏金色点缀（镶嵌金边/小图标） ---- */
  --gold: #d9ab3c;          /* 亮金，深色底上的点缀 */
  --gold-deep: #8f6b12;     /* 镶嵌金边 */
  --gold-icon: #8a6410;     /* 浅色底上的小图标金（深一点保证对比度） */
  /* 像素爱心，单格=3px，颜色用 currentColor（见 .pixel-heart::before） */
  --heart-shadow:
    3px 0, 6px 0, 12px 0, 15px 0,
    0 3px, 3px 3px, 6px 3px, 9px 3px, 12px 3px, 15px 3px, 18px 3px,
    0 6px, 3px 6px, 6px 6px, 9px 6px, 12px 6px, 15px 6px, 18px 6px,
    3px 9px, 6px 9px, 9px 9px, 12px 9px, 15px 9px,
    6px 12px, 9px 12px, 12px 12px,
    9px 15px;
}

[data-theme="miku"] {
  --accent: #39c5bb;
  --accent-muted: #7ad8d2;
  --accent-dim: #2a9e97;
  --bg: #0c0f1c;
  --surface: #1a1f2e;
  --surface-alt: #243047;
  --screen: #05070f;
  --hl: #39c5bb;
  --hl-text: #0c0f1c;
  --danger: #ff6b6b;
  --warning: #ffd166;
  --text-on-accent: #0c0f1c;
  /* 扁平硬投影：深青色块，在近黑背景上也能看清 */
  --pixel-shadow: #0e5c57;
  --bezel-inner: #0d3d39;
  --grain: rgba(255, 255, 255, 0.09);
  --heart: #ff7aa2;
  /* ---- 日志命令行配色（深色青色主题） ---- */
  --log-prompt: #1a4a46;
  --log-gold:   #ffd700;
  --log-ok:     #4fe0a4;
  --log-err:    #ff6b6b;
  --log-warn:   #ffd166;
  --log-sys:    #5ab5b0;
  --log-act:    #39c5bb;
  --mainline-bg: #e8b84a;
  --mainline-fg: #0c0f1c;
  --log-mainline: #e8b84a;
  /* ---- 状态栏金色点缀（镶嵌金边/小图标） ---- */
  --gold: #ffd166;
  --gold-deep: #a97f1e;
  --gold-icon: #ffd166;
  /* 像素爱心，单格=3px，颜色用 currentColor（见 .pixel-heart::before） */
  --heart-shadow:
    3px 0, 6px 0, 12px 0, 15px 0,
    0 3px, 3px 3px, 6px 3px, 9px 3px, 12px 3px, 15px 3px, 18px 3px,
    0 6px, 3px 6px, 6px 6px, 9px 6px, 12px 6px, 15px 6px, 18px 6px,
    3px 9px, 6px 9px, 9px 9px, 12px 9px, 15px 9px,
    6px 12px, 9px 12px, 12px 12px,
    9px 15px;
}

/* legacy pink (dark) kept for back-compat */
[data-theme="sakura"] {
  --accent: #f4b8c8;
  --accent-muted: #ffd4de;
  --accent-dim: #e89aad;
  --hl: #f4b8c8;
  --hl-text: #2a1218;
  --heart: #ff5e87;
  --pixel-shadow: #a85068;
  --bezel-inner: #7a3d4d;
  --grain: rgba(255, 255, 255, 0.05);
  /* ---- 日志命令行配色（深色樱粉主题） ---- */
  --log-prompt: #7a5060;
  --log-gold:   #ffcc33;
  --log-ok:     #7eca8a;
  --log-err:    #ff7b8a;
  --log-warn:   #e8b84a;
  --log-sys:    #d4a0b0;
  --log-act:    #f4b8c8;
  --mainline-bg: #ffcc33;
  --mainline-fg: #2a1218;
  --log-mainline: #ffcc33;
}

/* ============================================================
   Macintosh-style light pink themes (藕粉系)
   - 浅色窗体 + 深藕色墨水文字 + 粉色高光，呼应经典麦金塔质感
   ============================================================ */

/* 藕粉（主推：灰调玫瑰，柔和不偏红） */
[data-theme="lotus"] {
  --bg: #ecdcdf;
  --surface: #faf3f4;
  --surface-alt: #e7cdd3;
  --screen: #fdf8f9;
  --accent: #614a54;
  --accent-muted: #9a8089;
  --accent-dim: #d8c2c8;
  --hl: #d9a7b2;
  --hl-text: #3f2e36;
  --danger: #b4566b;
  --warning: #a9762f;
  --text-on-accent: #faf3f4;
  --pixel-shadow: #c9a3ac;
  --bezel-inner: #b58a94;
  --heart: #d98ba0;
  /* ---- 日志命令行配色（藕粉浅色主题） ---- */
  --log-prompt: #d8c2c8;
  --log-gold:   #7a5c00;
  --log-ok:     #2a7a3a;
  --log-err:    #b4566b;
  --log-warn:   #a9762f;
  --log-sys:    #9a8089;
  --log-act:    #614a54;
  --mainline-bg: #8b6914;
  --mainline-fg: #faf3f4;
  --log-mainline: #8b6914;
  /* ---- 状态栏金色点缀（镶嵌金边/小图标） ---- */
  --gold: #d9a844;
  --gold-deep: #b3822f;
  --gold-icon: #a9762f;
}

/* 腮红藕（暖调，柔粉不偏红） */
[data-theme="blush"] {
  --bg: #f1dcdd;
  --surface: #fdf4f4;
  --surface-alt: #f0ccce;
  --screen: #fef8f8;
  --accent: #6a4a4d;
  --accent-muted: #a17f81;
  --accent-dim: #e1c4c5;
  --hl: #ecadb1;
  --hl-text: #45292b;
  --danger: #bb5360;
  --warning: #ad7833;
  --text-on-accent: #fdf4f4;
  --pixel-shadow: #d3a3a6;
  --bezel-inner: #b8868a;
  --heart: #e88994;
  /* ---- 日志命令行配色（腮红藕浅色主题） ---- */
  --log-prompt: #e1c4c5;
  --log-gold:   #8b6914;
  --log-ok:     #2a7a3a;
  --log-err:    #bb5360;
  --log-warn:   #ad7833;
  --log-sys:    #9a787c;
  --log-act:    #6a4a4d;
  --mainline-bg: #9a7030;
  --mainline-fg: #fdf4f4;
  --log-mainline: #8b6914;
}

/* 丁香藕（冷调，紫粉） */
[data-theme="mauve"] {
  --bg: #e7dcec;
  --surface: #f7f3fa;
  --surface-alt: #ddccea;
  --screen: #fbf8fd;
  --accent: #574a5e;
  --accent-muted: #8c7d97;
  --accent-dim: #d3c4de;
  --hl: #c2a3d2;
  --hl-text: #382b40;
  --danger: #a85a82;
  --warning: #9c7a3f;
  --text-on-accent: #f7f3fa;
  --pixel-shadow: #b79ec8;
  --bezel-inner: #9a83b0;
  --heart: #c98ec6;
  /* ---- 日志命令行配色（丁香藕浅色主题） ---- */
  --log-prompt: #d3c4de;
  --log-gold:   #7a5a2e;
  --log-ok:     #2a7a3a;
  --log-err:    #a85a82;
  --log-warn:   #9c7a3f;
  --log-sys:    #8c7d97;
  --log-act:    #574a5e;
  --mainline-bg: #7a5a9a;
  --mainline-fg: #f7f3fa;
  --log-mainline: #6b4a8a;
}

/* 蜜桃藕（暖桃调，柔和不偏红） */
[data-theme="peach"] {
  --bg: #f4ddd5;
  --surface: #fdf4ef;
  --surface-alt: #f3d2c4;
  --screen: #fef8f4;
  --accent: #6b4d44;
  --accent-muted: #a1837a;
  --accent-dim: #e6cabe;
  --hl: #ecae9b;
  --hl-text: #46291f;
  --danger: #bd5b56;
  --warning: #b0762f;
  --text-on-accent: #fdf4ef;
  --pixel-shadow: #d6a695;
  --bezel-inner: #bc8d7d;
  --heart: #ec9a8f;
  /* ---- 日志命令行配色（蜜桃藕浅色主题） ---- */
  --log-prompt: #e6cabe;
  --log-gold:   #8b6914;
  --log-ok:     #2a7a3a;
  --log-err:    #bd5b56;
  --log-warn:   #b0762f;
  --log-sys:    #a1837a;
  --log-act:    #6b4d44;
  --mainline-bg: #b07830;
  --mainline-fg: #fdf4ef;
  --log-mainline: #8b6914;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--accent);
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

/* 经典麦金塔桌面：2px 棋盘抖动灰，营造 System 6/7 桌面质感 */
body[data-theme="classic"] {
  background-color: #909090;
  background-image: conic-gradient(
    #7d7d7d 0deg 90deg,
    #a0a0a0 90deg 180deg,
    #7d7d7d 180deg 270deg,
    #a0a0a0 270deg 360deg
  );
  background-size: 4px 4px;
}

/* 像素爱心：用 box-shadow 绘制，可复用 */
.pixel-heart {
  position: relative;
  display: inline-block;
  width: 21px;
  height: 18px;
  vertical-align: middle;
  animation: heart-beat 2s ease-in-out infinite;
}

.pixel-heart::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  background: transparent;
  color: var(--heart);
  box-shadow: var(--heart-shadow);
}

@keyframes heart-beat {
  0%, 72%, 100% { transform: scale(1); }
  36% { transform: scale(1.15); }
  52% { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-heart,
  .pixel-btn:hover:not(:disabled),
  .flower-swatch[aria-pressed="true"] {
    animation: none !important;
  }
}

.terminal {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ============================================================
   状态栏：像素金线镶嵌 + 欧式庭园藤蔓点缀
   - 金边嵌在窗框内部，不再使用容易误读成贴图错误的中央「金扣」
   - 状态项以细金线和小玫瑰节点分隔，不使用虚线
   ============================================================ */
.status-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 9px 10px;
  border: 3px solid var(--accent);
  background-color: var(--surface);
  box-shadow:
    4px 4px 0 var(--pixel-shadow);
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* 两端的小玫瑰与折线藤蔓：只做边角金饰，不占用信息区 */
/* ---- 像素小图标：box-shadow 绘制，单格 2px，随 currentColor 着色 ---- */
.px-ico {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--accent-muted);
}

.px-ico::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  background: transparent;
}

/* 日历（天数）：顶部装订环 + 一个已标记的日期格 */
.ico-calendar::before {
  box-shadow:
    2px 0, 12px 0,
    2px 2px, 12px 2px,
    0 4px, 2px 4px, 4px 4px, 6px 4px, 8px 4px, 10px 4px, 12px 4px, 14px 4px,
    0 6px, 2px 6px, 4px 6px, 6px 6px, 8px 6px, 10px 6px, 12px 6px, 14px 6px,
    0 8px, 6px 8px, 8px 8px, 14px 8px,
    0 10px, 6px 10px, 8px 10px, 14px 10px,
    0 12px, 14px 12px,
    0 14px, 2px 14px, 4px 14px, 6px 14px, 8px 14px, 10px 14px, 12px 14px, 14px 14px;
}

/* 苹果（肥胖值）：果柄 + 叶子 */
.ico-apple::before {
  box-shadow:
    8px 0,
    8px 2px, 10px 2px, 12px 2px,
    2px 4px, 4px 4px, 6px 4px, 8px 4px, 10px 4px, 12px 4px,
    0 6px, 2px 6px, 4px 6px, 6px 6px, 8px 6px, 10px 6px, 12px 6px, 14px 6px,
    0 8px, 2px 8px, 4px 8px, 6px 8px, 8px 8px, 10px 8px, 12px 8px, 14px 8px,
    0 10px, 2px 10px, 4px 10px, 6px 10px, 8px 10px, 10px 10px, 12px 10px, 14px 10px,
    2px 12px, 4px 12px, 6px 12px, 8px 12px, 10px 12px, 12px 12px,
    4px 14px, 6px 14px, 8px 14px, 10px 14px;
}

/* 宝石（圆石）：空心切面轮廓，避免缩小时糊成一枚实心「金扣」 */
.ico-gem::before {
  box-shadow:
    6px 0, 8px 0,
    4px 2px, 10px 2px,
    2px 4px, 12px 4px,
    0 6px, 14px 6px,
    2px 8px, 12px 8px,
    4px 10px, 10px 10px,
    6px 12px, 8px 12px;
}

/* 五角星（保底）：短腿带尖 */
.ico-star::before {
  box-shadow:
    6px 0, 8px 0,
    4px 2px, 6px 2px, 8px 2px, 10px 2px,
    0 4px, 2px 4px, 4px 4px, 6px 4px, 8px 4px, 10px 4px, 12px 4px, 14px 4px,
    2px 6px, 4px 6px, 6px 6px, 8px 6px, 10px 6px, 12px 6px,
    4px 8px, 6px 8px, 8px 8px, 10px 8px,
    2px 10px, 4px 10px, 10px 10px, 12px 10px,
    2px 12px, 12px 12px;
}

/* 卷尺（腰围） */
.ico-ruler::before {
  box-shadow:
    0 4px, 2px 4px, 4px 4px, 6px 4px, 8px 4px, 10px 4px, 12px 4px, 14px 4px,
    0 6px, 4px 6px, 10px 6px, 14px 6px,
    0 8px, 2px 8px, 4px 8px, 6px 8px, 8px 8px, 10px 8px, 12px 8px, 14px 8px;
}

/* ---- 天数：无按钮外框，以对称金藤蔓包围，强调「装饰」而不是「可按」 ---- */
.stat-day {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 8px;
}

.day-text {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  letter-spacing: 2px;
}

.day-zi {
  font-size: 13px;
  color: var(--accent-muted);
}

.day-num {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
}

/* ---- 属性位：图标 + 上标签下数值，以细金藤蔓和小玫瑰节点划界 ---- */
.stat-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 6px 6px 8px;
}

.stat-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--accent-dim);
  opacity: 0.8;
}

.stat-chip::after {
  display: none;
}

.stat-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.stat-label {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--accent-muted);
  white-space: nowrap;
}

.stat-val {
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
}

/* ---- ≥481px：天数与四项状态保持单行 ---- */
@media (min-width: 481px) {
  .status-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 9px 12px;
  }

  .stat-day {
    flex: 0 0 auto;
    padding: 0 16px 0 6px;
    gap: 6px;
  }

  .day-zi {
    font-size: 14px;
  }

  .day-num {
    font-size: 20px;
  }

  .stat-chip {
    flex: 1 1 0;
    gap: 8px;
    padding: 2px 6px 2px 8px;
    justify-content: center;
  }

  .stat-label {
    font-size: 11px;
  }

  .stat-val {
    font-size: 17px;
  }
}

/* ---- 手机端天数：标题栏同款条纹，不可按 ---- */
.button-panel .day-badge {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 2px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--accent);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0,
    var(--accent) 1px,
    transparent 1px,
    transparent 3px
  );
  border: 3px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.button-panel .day-badge::before,
.button-panel .day-badge::after {
  display: none;
}

.button-panel .day-badge-text {
  position: relative;
  z-index: 1;
  background: var(--surface);
  padding: 0 6px;
}

.button-panel .day-badge .px-ico {
  color: var(--accent-muted);
  transform: scale(1);
  position: relative;
  z-index: 1;
  background: var(--surface);
  margin: 0 2px;
}

.stat-blip {
  position: absolute;
  right: 6px;
  bottom: -12px;
  font-size: 13px;
  padding: 1px 8px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--warning);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.stat-blip.show {
  animation: blip-show 1.9s ease-out forwards;
}

@keyframes blip-show {
  0% { opacity: 0; transform: translateY(-4px); }
  12% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(2px); }
}

.stat.stat-blink {
  animation: stat-blink 0.9s ease-in-out;
}

/* 数值变动：经典麦金塔「反相」闪烁，无辉光 */
@keyframes stat-blink {
  0%, 100% { color: inherit; background: transparent; }
  50% { color: var(--hl-text); background: var(--hl); }
}

/* 闪烁时芯片内的文字/图标一并反相 */
.stat.stat-blink .stat-label,
.stat.stat-blink .stat-val,
.stat.stat-blink .px-ico {
  animation: stat-blink-child 0.9s ease-in-out;
}

@keyframes stat-blink-child {
  50% { color: var(--hl-text); }
}

.stat.flash-red .stat-label,
.stat.flash-red .stat-val,
.stat.flash-red .px-ico {
  color: var(--hl-text);
}

.stat {
  white-space: nowrap;
}

/* 日志事件标签：为特殊事件添加小徽章 */
.log-tag {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  padding: 1px 6px;
  border: 2px solid var(--log-gold);
  color: var(--log-gold);
  margin-left: 6px;
  vertical-align: baseline;
}

.viewport {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--accent);
  background: var(--screen);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    4px 4px 0 var(--pixel-shadow);
}

.viewport.panel-open .log-shell {
  display: none;
}

.log-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.log-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  font-size: 15px;
  line-height: 1.3;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  background: var(--screen);
  color: var(--accent);
  -webkit-overflow-scrolling: touch;
}

/* 命令行终端风格日志行：不同类型显示不同颜色 */
.log-line {
  margin: 0;
  padding: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.3;
}

/* 仅抽卡结果留出轻微呼吸感；其余日志统一使用上方的紧凑间距。 */
.log-line.log-spotlight {
  margin: 4px 0;
  padding: 3px 0;
}
.log-line + .log-line {
  border-top: none;
}

/* 落意每日回顾：终端时间线中的持久节点，不随最近 20 条普通日志被挤掉 */
.luoyi-review-slot {
  margin-top: 14px;
  padding: 2px 2px 6px;
}

.luoyi-review-card {
  border: 3px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
}

.luoyi-review-toggle {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--accent);
  padding: 8px 10px;
  background: var(--surface-alt);
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.luoyi-review-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.luoyi-review-kicker {
  color: var(--log-sys);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.luoyi-review-toggle-label {
  flex: 0 0 auto;
  color: var(--log-act);
  font-size: 12px;
}

.luoyi-review-body {
  min-height: 142px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.luoyi-review-portrait-frame {
  position: relative;
  display: block;
  width: 126px;
  height: 142px;
  border: 2px solid var(--accent);
  background: var(--screen);
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
}

.luoyi-review-portrait {
  position: absolute;
  left: 56%;
  top: 77%;
  display: block;
  width: 145%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.luoyi-review-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.luoyi-review-mode {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 6px;
  border: 2px solid var(--accent);
  color: var(--log-act);
  font-size: 11px;
}

.luoyi-review-copy p,
.luoyi-review-loading-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.65;
}

.luoyi-review-loading-text {
  align-self: center;
  color: var(--log-sys);
}

.luoyi-review-card.is-loading,
.luoyi-review-card.is-error {
  border-color: var(--accent-muted);
}

.luoyi-review-card.is-loading .luoyi-review-heading,
.luoyi-review-card.is-error .luoyi-review-heading {
  padding: 8px 10px;
  border-bottom: 2px solid var(--accent-muted);
}

.luoyi-review-error-row {
  padding: 12px;
  color: var(--log-err);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.luoyi-review-card.is-collapsed .luoyi-review-toggle {
  border-bottom: 0;
}

.luoyi-review-card.is-collapsed .luoyi-review-body {
  display: none;
}

.luoyi-review-card.is-collapsed .luoyi-unlock {
  display: none;
}

.luoyi-unlock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 11px;
  align-items: center;
  padding: 10px;
  border-top: 2px solid var(--accent);
  background: var(--surface-alt);
}

.luoyi-heart-lock {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--accent);
  color: var(--log-act);
  background: var(--surface);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  animation: luoyi-heart-open 0.9s steps(3, end) 1;
}

.luoyi-unlock-copy {
  min-width: 0;
}

.luoyi-unlock-copy strong {
  display: block;
  font-size: 14px;
}

.luoyi-unlock-copy p {
  margin: 4px 0 0;
  color: var(--accent-muted);
  font-size: 13px;
  line-height: 1.5;
}

.luoyi-unlock-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.luoyi-unlock-state {
  color: var(--log-act);
  font-size: 12px;
}

@keyframes luoyi-heart-open {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .luoyi-heart-lock {
    animation: none;
  }
}

.luoyi-intro-heading {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--accent);
}

.luoyi-intro-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.luoyi-intro-copy {
  align-self: stretch;
}

.luoyi-intro-line {
  min-height: 3.3em;
}

.luoyi-intro-line.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.9em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.08em;
  animation: luoyiTypingCursor 0.7s steps(1) infinite;
}

@keyframes luoyiTypingCursor {
  50% { opacity: 0; }
}

.luoyi-intro-progress {
  margin-top: 9px;
  color: var(--log-sys);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.luoyi-intro-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px 10px;
}

.luoyi-intro-skip {
  flex: 0 0 auto;
  margin: 1px 0 0;
  padding: 2px 0 2px 8px;
  border: 0;
  background: transparent;
  color: var(--accent-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  opacity: 0.7;
}

.luoyi-intro-skip:hover {
  opacity: 1;
}

.luoyi-intro-next.is-final {
  background: var(--mainline-bg);
  color: var(--mainline-fg);
  border-color: var(--mainline-bg);
}

.luoyi-intro-status {
  margin: -3px 10px 10px;
  color: var(--log-err);
  font-size: 11px;
  text-align: right;
}

.luoyi-intro-card.is-complete {
  opacity: 0;
  transition: opacity 0.16s ease;
}

/* 提示符（标准输出） */
.log-line .prompt { color: var(--log-prompt); }
.log-line.ok  { color: var(--log-ok); }
.log-line.win { color: var(--log-gold); }
.log-line.err { color: var(--log-err); }
.log-line.warn{ color: var(--log-warn); }
.log-line.sys { color: var(--log-sys); }
.log-line.act { color: var(--log-act); }
.log-line.mainline { color: var(--log-mainline); }

.button-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  flex-shrink: 0;
  background-color: var(--bg);
  /* 底部按下比 hover 的 surface-alt 更深，快按时也能看出色差 */
  --nav-press-bg: color-mix(in srgb, var(--surface-alt) 68%, var(--accent) 32%);
}

.button-panel .pixel-btn,
.button-panel .day-badge {
  margin: 4px;
}

.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 16px;
  background-color: var(--surface);
  border: 3px solid var(--accent);
  color: var(--accent);
  border-radius: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
  transition:
    background-color 0.05s steps(1),
    color 0.05s steps(1),
    border-color 0.05s steps(1),
    box-shadow 0.05s steps(1),
    transform 0.05s steps(1);
  -webkit-tap-highlight-color: transparent;
}

/* 颗粒感在表面元素上不做复杂分层，依靠双线斜角边框+硬投影体现像素感 */

button.pixel-btn,
summary.pixel-btn {
  -webkit-appearance: none;
  appearance: none;
}

@media (hover: hover) {
  .pixel-btn:hover:not(:disabled) {
    background-color: var(--surface-alt);
  }
}

/* 面板/表单按钮：麦金塔反相 + 硬投影收短（:active + .is-pressed） */
.pixel-btn:active:not(:disabled),
.pixel-btn.is-pressed:not(:disabled) {
  background: var(--hl);
  color: var(--hl-text);
  border-color: var(--hl-text);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    1px 1px 0 var(--pixel-shadow);
  transform: translate(2px, 2px);
}

/* 底部导航：物理键 — 深于 hover + 位移，不用 --hl 反相 */
.button-panel .pixel-btn:active:not(:disabled),
.button-panel .pixel-btn.is-pressed:not(:disabled) {
  background-color: var(--nav-press-bg);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    1px 1px 0 var(--pixel-shadow);
  transform: translate(2px, 2px);
}

.button-panel .pixel-btn.insufficient:active:not(:disabled),
.button-panel .pixel-btn.insufficient.is-pressed:not(:disabled) {
  background-color: var(--nav-press-bg);
  color: var(--accent-muted);
  border-color: var(--accent-muted);
  border-style: dashed;
}

.pixel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pixel-btn.small {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  font-size: 16px;
}

.pixel-btn.danger {
  border-color: var(--danger);
  color: var(--danger);
}

#gacha-btn.insufficient,
.pixel-btn.insufficient {
  opacity: 0.45;
  border: 3px dashed var(--accent-muted);
  color: var(--accent-muted);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
}

#gacha-btn.insufficient:hover:not(:disabled),
.pixel-btn.insufficient:hover:not(:disabled) {
  background-color: var(--surface-alt);
}

.pixel-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--screen);
  border: 3px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 18px;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner);
}

.pixel-input:focus {
  outline: none;
  /* 用 background-color 而非 background 简写：避免清掉 select 的自绘箭头背景图 */
  background-color: var(--surface);
}

.pixel-input.is-hidden,
.shop-weight-field.is-hidden {
  display: none;
}

.pixel-input.tiny {
  width: 64px;
  min-height: 40px;
  padding: 6px;
}

/* 数字框：把原生上下调节按钮收到距右边框 ~3px，与下拉箭头观感统一 */
input[type="number"].pixel-input {
  padding-right: 4px;
}

input[type="number"].pixel-input::-webkit-inner-spin-button,
input[type="number"].pixel-input::-webkit-outer-spin-button {
  margin: 0 0 0 6px;
}

/* 下拉框：去掉原生箭头，改用跟随主题色（--accent）的像素 V 形箭头，
   右间距 ~3px，与数字框调节按钮对齐 */
select.pixel-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 24px;
  background-color: var(--screen);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    right 11px center,
    right 6px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select.pixel-input::-ms-expand {
  display: none;
}

.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--screen);
  overflow: hidden;
}

.panel.hidden {
  display: none;
}

.panel.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* classic Macintosh window title bar:
   - 横向细纹铺满整条标题栏（System 6/7 活动窗外观）
   - 居中标题牌 + 左上角关闭框，二者用同色底「挖空」细纹，互不穿插 */
.panel-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 7px 40px;
  border-bottom: 2px solid var(--accent);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0,
    var(--accent) 1px,
    transparent 1px,
    transparent 3px
  );
  background-position: center;
  flex-shrink: 0;
}

.panel-header h2 {
  margin: 0;
  font-size: 19px;
  padding: 1px 16px;
  background: var(--surface);
  position: relative;
  z-index: 1;
}

/* 经典麦金塔关闭框：左上角小方块，四周留白挖断细纹 */
.panel-header .close-panel {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* 同色光环：擦掉关闭框四周的标题栏细纹，避免横线穿过按钮 */
  box-shadow: 0 0 0 4px var(--surface);
}

/* 像素 X 图标：用 ::before ::after 画两条对角线构成 X */
.panel-header .close-panel::before,
.panel-header .close-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 10px;
  background: var(--accent);
  transform-origin: center;
}
.panel-header .close-panel::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.panel-header .close-panel::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 悬停时显示内部细纹（经典 Mac 关闭框的可点提示） */
.panel-header .close-panel:hover {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0,
    var(--accent) 1px,
    transparent 1px,
    transparent 3px
  );
}
.panel-header .close-panel:hover::before,
.panel-header .close-panel:hover::after {
  display: none;
}

/* 按下时反相填充为实心黑块 */
.panel-header .close-panel:active {
  transform: translateY(-50%);
  background-color: var(--accent);
  background-image: none;
  box-shadow: 0 0 0 4px var(--surface);
}
.panel-header .close-panel:active::before,
.panel-header .close-panel:active::after {
  background: var(--surface);
}

.panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.task-list,
.item-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.item-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-alt);
}

/* command-line dialogue style rows (tasks / inventory): no table lines */
.task-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0 10px;
}

.task-item + .task-item {
  border-top: 1px dashed var(--surface-alt);
}

.task-item.done {
  opacity: 0.5;
}

/* 任务类型徽章：一次性灰色底，可重复反相黑底白字 */
.task-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  padding: 2px 7px;
  border: 2px solid var(--accent);
  margin-right: 6px;
  vertical-align: baseline;
}
.task-once {
  background: var(--surface-alt);
  color: var(--accent);
}
.task-repeat {
  background: var(--accent);
  color: var(--text-on-accent);
}
.task-mainline {
  background: var(--mainline-bg);
  color: var(--mainline-fg);
  border-color: var(--accent);
}

/* 主线任务完成：占住原位淡出，下一条再在同一位置淡入 */
.task-item.mainline-complete .cli-line.cli-title strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.task-item.mainline-complete {
  opacity: 0.85;
  transition: opacity 0.16s ease;
}
.task-item.mainline-vanish {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.task-item.mainline-final-vanish {
  animation: taskMainlineFinalVanish 0.28s ease forwards;
}
@keyframes taskMainlineFinalVanish {
  from {
    opacity: 0.85;
    transform: translateY(0);
    max-height: 140px;
    margin-top: 0;
    margin-bottom: 0;
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
.task-item.mainline-enter {
  opacity: 0;
}
.task-item.mainline-enter-active {
  transition: opacity 0.2s ease;
}

/* 可重复任务循环箭头图标（像素风 ↻） */
.task-repeat-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 3px;
  position: relative;
}
.task-repeat-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 像素箭头环：2px 边框 + 缺口 */
  border: 2px solid var(--text-on-accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.task-repeat-icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 5px solid var(--text-on-accent);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* 重复次数输入区域：紧凑尺寸，与 small 按钮协调 */
.repeat-input-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-alt);
  border: 2px solid var(--accent);
  padding: 1px 2px 1px 6px;
  height: 32px;
  box-sizing: border-box;
}
.repeat-input-label {
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}
.repeat-input-group .pixel-input.tiny {
  border: none;
  box-shadow: none;
  background: transparent;
  min-height: 0;
  height: 24px;
  width: 32px;
  padding: 0 0 0 4px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  -moz-appearance: textfield;
}
.repeat-input-group .pixel-input.tiny::-webkit-outer-spin-button,
.repeat-input-group .pixel-input.tiny::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cli-line {
  font-size: 15px;
  line-height: 1.6;
  color: var(--accent-muted);
}

.cli-line.cli-title {
  color: var(--accent-muted);
}

.cli-line.cli-title strong {
  color: var(--accent);
  font-weight: normal;
  font-size: 17px;
}

.cli-line .tag {
  color: var(--accent);
}

.cli-line .tag-done {
  color: var(--warning);
}

.task-info,
.gacha-pool-info,
.row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.task-meta,
.item-meta {
  display: block;
  font-size: 16px;
  color: var(--accent-muted);
}

.task-actions,
.gacha-manage-actions,
.row-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.task-actions form,
.gacha-manage-actions form,
.item-row form,
.row-actions form {
  margin: 0;
  display: flex;
  align-items: center;
}

.item-row > span:first-child:not(.inventory-type) {
  flex: 1;
  min-width: 0;
}

.inventory-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.inventory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0 10px;
}

.inventory-row + .inventory-row {
  border-top: 1px dashed var(--surface-alt);
}

.inventory-info {
  min-width: 0;
}

.inventory-list:not(.delete-mode) .inventory-delete-form {
  display: none;
}

.inventory-delete-toggle {
  margin-top: 8px;
}

.inventory-action {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inventory-action form {
  margin: 0;
  display: flex;
  align-items: center;
}

.gacha-pool-info,
.shop-item-info {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--accent-muted);
}

.gacha-pool-info > span:first-child {
  color: var(--accent);
}

.shop-item-info > span:first-child {
  color: var(--accent);
}

.shop-item.is-unaffordable .shop-item-info > span:first-child {
  color: var(--accent-muted);
}

.shop-item-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.shop-list:not(.manage-mode) .shop-manage-actions {
  display: none;
}

.shop-manage-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.shop-manage-actions form {
  margin: 0;
  display: flex;
  align-items: center;
}

.shop-manage-toggle {
  margin-top: 8px;
}

.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.stack-form h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.task-delete-toggle {
  margin-bottom: 12px;
}

.task-list:not(.delete-mode) .task-delete-form {
  display: none;
}

.gacha-pool-item,
.shop-item {
  flex-wrap: wrap;
  padding-left: 6px;
}

.shop-list .shop-item:last-child {
  border-bottom: 0;
}

.item-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex: 1 1 100%;
}

.gacha-pool-item.is-editing .gacha-delete-form,
.gacha-pool-item.is-editing .edit-toggle-btn,
.shop-item.is-editing .shop-buy-form,
.shop-item.is-editing .shop-delete-form,
.shop-item.is-editing .edit-toggle-btn {
  display: none !important;
}

.edit-panel {
  flex: 1 1 100%;
  width: 100%;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--surface-alt);
}

.edit-panel.hidden {
  display: none;
}

.edit-panel-form {
  margin-bottom: 0;
}

.edit-panel-btns {
  display: flex;
  gap: 8px;
}

.gacha-pool-list:not(.manage-mode) .gacha-manage-actions {
  display: none;
}

.gacha-manage-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.gacha-manage-actions form {
  margin: 0;
  display: flex;
  align-items: center;
}

.gacha-manage-toggle {
  margin-bottom: 8px;
}

.gacha-draw-btn {
  width: 100%;
  min-height: 58px;
  margin: 14px 0 12px;
  font-size: 22px;
  letter-spacing: 1px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    5px 5px 0 var(--pixel-shadow);
}

.gacha-draw-btn:not(.insufficient) {
  background: var(--hl);
  color: var(--hl-text);
  border-color: var(--hl-text);
}

@media (hover: hover) {
  .gacha-draw-btn:not(.insufficient):hover {
    background: var(--accent);
    color: var(--text-on-accent);
  }
}

.gacha-action-divider {
  width: 100%;
  height: 0;
  margin: 0 0 12px;
  border-top: 2px dashed var(--accent-muted);
  opacity: 0.8;
}

/* 腰围图表面板：独立于 log-lines，避免刷新日志时被清除 */
.waist-chart-panel {
  display: none;
  margin: 10px 0 6px;
  padding: 0 4px;
}

.waist-chart-panel.active {
  display: block;
}

.waist-chart-panel.hidden {
  display: none;
}

.waist-chart-messages {
  margin-bottom: 6px;
}

.waist-chart-messages .log-line {
  padding: 3px 0;
}

/* 日志内像素折线图 */
.log-waist-chart-block {
  margin: 10px auto 12px;
  padding: 10px;
  width: fit-content;
  max-width: calc(100% - 16px);
  background: var(--screen);
  border: 3px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    4px 4px 0 var(--pixel-shadow);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;
  transition: opacity 0.32s ease, transform 0.36s cubic-bezier(0.22, 1.05, 0.32, 1);
}

.log-waist-chart-block.visible {
  opacity: 1;
  transform: scale(1);
}

.waist-chart-canvas {
  display: block;
  width: 336px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.task-delete-form {
  margin: 0;
}

.edit-details summary {
  list-style: none;
  cursor: pointer;
}

.edit-details summary::-webkit-details-marker {
  display: none;
}

.pixel-details {
  padding-top: 12px;
  margin-bottom: 12px;
}

/* 列表/区块与下方首个操作区之间加分隔线（item-row 列表已有 border-bottom，不再重复） */
.task-list + .pixel-details,
.inventory-list + .pixel-details,
.shop-list + .pixel-details,
.theme-section + .pixel-details {
  border-top: 1px solid var(--surface-alt);
}

/* 相邻折叠面板之间加分隔线 */
.pixel-details + .pixel-details {
  border-top: 1px solid var(--surface-alt);
}

.pixel-details summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  padding: 0 16px;
  background-color: var(--surface);
  border: 3px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 18px;
  touch-action: manipulation;
  user-select: none;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
  transition: background-color 0.05s steps(1);
}

.pixel-details summary::-webkit-details-marker {
  display: none;
}

.pixel-details[open] summary {
  background: var(--hl);
  border-color: var(--hl-text);
  color: var(--hl-text);
  margin-bottom: 8px;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
}

.pixel-details > .stack-form {
  margin-top: 8px;
}

.add-task-form,
.add-shop-form {
  margin-top: 8px;
  margin-bottom: 0;
}

.logout-form {
  margin-top: 12px;
}

.empty-hint,
.hint {
  color: var(--accent-muted);
  font-size: 16px;
  margin: 0 0 12px;
}

.theme-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  text-align: center;
}

.section-title {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--accent);
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
}

/* 设置项分组：用小标题建立主次层级，避免一排平级长条 */
.settings-group {
  margin-bottom: 18px;
}

.group-title {
  margin: 0 0 8px;
  padding-bottom: 5px;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent-muted);
  border-bottom: 2px solid var(--accent-dim);
}

/* 分组内首个折叠面板不再需要顶部分隔线（由分组标题分隔） */
.settings-group > .pixel-details:first-of-type {
  border-top: none;
}

.luoyi-service-status {
  margin: -6px 0 10px;
  color: var(--log-ok);
}

.luoyi-service-status.is-offline {
  color: var(--log-warn);
}

#luoyi-current-model {
  word-break: break-all;
}

.weight-cap-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.weight-cap-preset-form {
  margin: 0;
}

.weight-cap-preset-form .pixel-btn.active-preset:not(.is-pressed):not(:active) {
  background: var(--hl);
  color: var(--hl-text);
  border-color: var(--hl-text);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
}

.inventory-use-hint {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent-muted);
  line-height: 1.35;
  text-align: right;
  display: none;
}

.inventory-use-hint.is-visible {
  display: block;
  color: var(--log-err);
  animation: inventoryUseHint 0.18s ease;
}

@keyframes inventoryUseHint {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.theme-flowers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 6px 0 10px;
}

.flower-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 116px;
  min-width: 116px;
  min-height: 88px;
  padding: 10px 10px 9px;
  background-color: var(--surface);
  border: 3px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
  transition: background-color 0.05s steps(1);
}

.swatch-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

.flower-swatch:hover {
  background-color: var(--surface-alt);
}

.flower-swatch[aria-pressed="true"] {
  border-color: var(--hl-text);
  background: var(--hl);
  color: var(--hl-text);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    3px 3px 0 var(--pixel-shadow);
}

.flower-swatch[aria-pressed="true"] .swatch-name {
  color: var(--hl-text);
}

/* 选中时花瓣反色，与 Mac/葱 图标一致的反相效果 */
.flower-swatch[aria-pressed="true"] .flower-icon i {
  background: var(--hl-text);
}

/* SOFT 主题色板图标：低精度像素爱心 */
.heart-icon {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 0;
  color: #d9a7b2;
}

.heart-icon svg {
  display: block;
}

.flower-swatch[aria-pressed="true"] .heart-icon {
  color: var(--hl-text);
}

.mac-icon,
.heart-icon,
.leek-icon {
  flex: 0 0 32px;
  margin: 0 auto;
}

.flower-icon {
  --flower-color: var(--accent);
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
}

.flower-icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 13px;
  margin-left: -4.5px;
  margin-top: -12px;
  background: var(--flower-color);
  border-radius: 50% 50% 42% 42%;
  transform-origin: 50% 100%;
}

.flower-icon i:nth-child(1) { transform: rotate(0deg); }
.flower-icon i:nth-child(2) { transform: rotate(72deg); }
.flower-icon i:nth-child(3) { transform: rotate(144deg); }
.flower-icon i:nth-child(4) { transform: rotate(216deg); }
.flower-icon i:nth-child(5) { transform: rotate(288deg); }

/* GREEN_LINE 主题色板图标：初音葱（像素风，向右倾斜，上绿下白） */
.leek-icon {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 0;
  color: var(--accent);
}

.leek-icon svg {
  display: block;
}

.flower-swatch[aria-pressed="true"] .leek-icon {
  color: var(--hl-text);
}

/* 经典麦金塔主题色板图标：迷你 Mac 机箱（纯像素方块绘制） */
.mac-icon {
  position: relative;
  display: block;
  width: 26px;
  height: 30px;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: var(--surface);
}

.mac-icon::before {
  /* 屏幕 */
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  right: 3px;
  height: 13px;
  border: 2px solid var(--accent);
  background: var(--accent);
}

.mac-icon::after {
  /* 软驱缝 */
  content: "";
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

.flower-swatch[aria-pressed="true"] .mac-icon,
.flower-swatch[aria-pressed="true"] .mac-icon::before {
  border-color: var(--hl-text);
}

.flower-swatch[aria-pressed="true"] .mac-icon {
  background: var(--hl);
}

.flower-swatch[aria-pressed="true"] .mac-icon::before,
.flower-swatch[aria-pressed="true"] .mac-icon::after {
  background: var(--hl-text);
}

.account-section {
  border-top: 1px solid var(--surface-alt);
  padding-top: 12px;
  margin-top: 8px;
}

.legal-section {
  margin-bottom: 18px;
}

.legal-section > .legal-updated {
  margin: -2px 0 10px;
}

.legal-body {
  padding: 4px 2px 8px;
}

.legal-updated {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--accent-muted);
}

.legal-heading {
  margin: 12px 0 6px;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.legal-heading:first-of-type {
  margin-top: 0;
}

.legal-list {
  margin: 0 0 8px;
  padding-left: 18px;
  color: var(--accent-muted);
  font-size: 15px;
  line-height: 1.55;
}

.legal-list li + li {
  margin-top: 6px;
}

.creator-plaque {
  margin-top: 20px;
  border: 3px solid var(--accent);
  background-color: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    4px 4px 0 var(--pixel-shadow);
  overflow: hidden;
}

.creator-plaque-titlebar {
  padding: 7px 12px;
  background: var(--hl);
  color: var(--hl-text);
  text-align: center;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 3px;
  border-bottom: 3px solid var(--accent);
}

.creator-plaque-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.creator-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--accent);
  background-color: var(--surface-alt);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}

.creator-info {
  flex: 1;
  min-width: 0;
}

.creator-label {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent-muted);
  margin-bottom: 2px;
}

.creator-name {
  display: block;
  font-family: "FangZheng Pixel", "Courier New", Consolas, monospace;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 4px;
}

.creator-project {
  display: block;
  font-size: 14px;
  color: var(--accent-muted);
  letter-spacing: 0.5px;
}

.creator-plaque-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px 11px;
  border-top: 2px dashed var(--accent-dim);
  font-size: 13px;
  color: var(--accent-muted);
}

.creator-heart {
  flex-shrink: 0;
  transform: scale(0.72);
  margin: 0 -3px;
}

.creator-footnote {
  letter-spacing: 1px;
}

.account-status {
  padding: 12px 14px;
  border: 3px solid var(--accent);
  background-color: var(--surface);
  margin-bottom: 12px;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    4px 4px 0 var(--pixel-shadow);
}

.account-label {
  display: block;
  font-size: 14px;
  color: var(--accent-muted);
  margin-bottom: 4px;
}

.account-value {
  display: block;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 8px;
}

.account-feedback {
  padding: 9px 11px;
  border: 2px solid currentColor;
  font-size: 15px;
  line-height: 1.45;
  background: var(--surface);
}

.account-feedback.error {
  color: var(--log-err);
}

.account-feedback.success {
  color: var(--log-ok);
}

.account-mail-feedback {
  margin-top: 2px;
}

.feedback-field {
  display: grid;
  gap: 6px;
  color: var(--accent-muted);
  font-size: 14px;
}

.feedback-message-input {
  min-height: 132px;
  resize: vertical;
  line-height: 1.55;
}

.feedback-privacy-note {
  padding: 9px 10px;
  border-left: 3px solid var(--accent-dim);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
}

.feedback-inline-result {
  margin-top: 2px;
}

.block-hint {
  margin: 0 0 10px;
  padding: 0;
}

.pixel-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

.pixel-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.pixel-scroll::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 2px solid var(--surface-alt);
}

.pixel-scroll::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: inset 0 0 0 1px var(--surface);
}

.pixel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-muted);
}

.pixel-scroll::-webkit-scrollbar-corner {
  background: var(--bg);
}

.stat.shake,
#gacha-btn.shake {
  animation: shake 0.5s ease-in-out;
}

.stat.flash-red {
  color: var(--hl-text);
  background: var(--danger);
}

.gem-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  border: 3px solid var(--accent);
  background-color: var(--surface);
  padding: 22px 30px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    6px 6px 0 var(--pixel-shadow);
  animation: toast-pop 0.3s ease-out, toast-fade 0.4s ease-in 1.2s forwards;
}

.gem-toast.hidden {
  display: none;
}

.gem-toast p {
  margin: 0;
  font-size: 24px;
  color: var(--danger);
}

.gem-toast-sub {
  margin-top: 8px !important;
  font-size: 18px !important;
  color: var(--accent-muted) !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes toast-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes toast-fade {
  to { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

/* 抽卡遮罩：经典麦金塔模态——半透明抖动灰桌面盖住背景 */
.gacha-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(60, 60, 60, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.gacha-overlay.hidden {
  display: none;
}

/* 遮罩背景的抖动网纹（替代赛博 CRT 扫描线），静态、无辉光 */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0.18) 0deg 90deg,
    transparent 90deg 180deg,
    rgba(0, 0, 0, 0.18) 180deg 270deg,
    transparent 270deg 360deg
  );
  background-size: 4px 4px;
}

/* 抽卡终端反馈：渲染为经典麦金塔对话框（白窗体 + 黑边 + 硬投影） */
.gacha-feed {
  position: relative;
  z-index: 1;
  width: min(90%, 460px);
  padding: 20px 24px;
  background-color: var(--surface);
  border: 3px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    6px 6px 0 var(--pixel-shadow);
  font-size: 18px;
  line-height: 1.8;
  color: var(--accent);
}

.feed-line {
  white-space: pre-wrap;
  word-break: break-word;
  animation: feed-in 0.12s steps(2);
}

.feed-line.ok { color: var(--accent-muted); }
.feed-line.err { color: var(--danger); }

.feed-line.win {
  font-size: 21px;
  font-weight: bold;
  margin-top: 8px;
}

.feed-line.win-4 {
  color: var(--accent);
}

/* 五星：经典麦金塔「反相」高亮块，强调而不靠霓虹辉光 */
.feed-line.win-5 {
  display: inline-block;
  padding: 2px 8px;
  background: var(--hl);
  color: var(--hl-text);
}

@keyframes feed-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (min-width: 481px) {
  .button-panel {
    grid-template-columns: repeat(5, 1fr);
  }

  .task-info {
    flex: 1 1 auto;
  }
}

/* ===== 手机端字体统一缩小 ===== */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .terminal {
    padding: 6px 6px 0 6px;
  }

  .status-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 9px 7px;
    gap: 0;
    margin-bottom: 6px;
    border-width: 3px;
  }

  /* 手机/PWA 固定在菜单栏显示天数，不依赖运行时搬运。 */
  .status-bar #stat-day {
    display: none;
  }

  .status-bar .stat-chip {
    justify-content: center;
    gap: 6px;
    padding: 3px 2px;
  }

  /* 手机端第一项左侧不画分隔花边，其余三项保留金藤蔓 */
  .status-bar .stat-chip:nth-child(2)::before,
  .status-bar .stat-chip:nth-child(2)::after {
    display: none;
  }

  .status-bar .px-ico {
    transform: none;
    margin: 0;
  }

  .status-bar .stat-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0;
  }

  .status-bar .stat-val {
    font-size: 12px;
  }

  .button-panel .day-badge {
    display: flex;
    min-height: 42px;
    padding-inline: 10px;
    font-size: 16px;
  }

  .viewport {
    margin-bottom: 6px;
  }

  .log-shell {
    font-size: 12px;
    padding: 4px;
  }

  .log-area {
    font-size: 13px;
    padding: 4px;
  }

  .panel-header h2 {
    font-size: 17px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  }

  .panel-body {
    padding: 6px;
    overflow-x: visible;
  }

  .cli-line.cli-title strong {
    font-size: 16px;
  }

  .task-meta,
  .item-meta {
    font-size: 15px;
  }

  .task-type-badge {
    font-size: 12px;
    padding: 1px 5px;
  }

  .stack-form h3 {
    font-size: 14px;
  }

  .hint {
    font-size: 12px;
  }

  .section-title {
    font-size: 14px;
  }

  .flower-swatch {
    flex: 0 0 82px;
    min-width: 82px;
    padding: 6px 4px 5px;
    min-height: 64px;
  }

  .pixel-btn {
    font-size: 13px;
  }

  .button-panel .pixel-btn {
    font-size: 15px;
  }

  .cli-line {
    font-size: 15px;
  }

  .gacha-draw-btn {
    font-size: 18px;
    min-height: 46px;
    width: calc(100% - 3px);
    box-shadow:
      inset 0 0 0 1px var(--bezel-inner),
      3px 3px 0 var(--pixel-shadow);
  }

  .gacha-pool-info,
  .shop-item-info {
    font-size: 16px;
  }

  .pixel-details summary {
    font-size: 14px;
    min-height: 40px;
    padding: 0 10px;
  }

  .pixel-checkbox-text {
    font-size: 13px;
  }
}

.account-action-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.account-action-window {
  width: min(520px, 100%);
  border: 3px solid var(--border, #000);
  background: var(--panel, #fff);
  box-shadow: 7px 7px 0 var(--border, #000);
}

.account-action-content {
  padding: 24px;
}

.account-action-content h1 {
  margin: 0 0 18px;
  font-size: 22px;
}

.account-action-message {
  margin: 0 0 20px;
  line-height: 1.7;
}

.account-action-message.error {
  color: var(--danger, #b00020);
}

.account-action-nav {
  margin-top: 4px;
}

.account-action-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--accent, #000);
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.account-action-back:hover {
  color: var(--hl-text, #fff);
  background: var(--accent, #000);
}

.account-action-back:focus-visible {
  outline: 3px solid var(--accent, #000);
  outline-offset: 4px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .terminal {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
  }

  @media (max-width: 480px) {
    .terminal {
      padding-top: calc(6px + env(safe-area-inset-top));
      padding-right: calc(6px + env(safe-area-inset-right));
      padding-bottom: 0;
      padding-left: calc(6px + env(safe-area-inset-left));
    }
  }
}

/* ===== 像素风勾选框（进度重置：保留收藏品） ===== */
.pixel-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 4px 0 2px;
}

.pixel-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pixel-checkbox-box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 3px solid var(--accent);
  background: var(--screen);
  box-shadow: inset 0 0 0 1px var(--bezel-inner);
  position: relative;
}

.pixel-checkbox input:checked + .pixel-checkbox-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
}

.pixel-checkbox input:focus-visible + .pixel-checkbox-box {
  outline: 2px dashed var(--accent-muted);
  outline-offset: 2px;
}

.pixel-checkbox-text {
  font-size: 16px;
  color: var(--accent);
  line-height: 1.2;
}

/* ===== PWA 更新提示 ===== */
.app-update-notice {
  position: fixed;
  z-index: 125;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(520px, calc(100% - 24px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  color: var(--accent);
  border: 3px solid var(--accent);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    5px 5px 0 var(--pixel-shadow);
  transform: translateX(-50%);
}

.app-update-notice.hidden {
  display: none;
}

.app-update-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.app-update-copy strong {
  font-size: 17px;
}

.app-update-copy span {
  color: var(--accent-muted);
  font-size: 13px;
  line-height: 1.35;
}

.app-update-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.app-update-actions .pixel-btn {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .app-update-notice {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .app-update-actions .pixel-btn {
    flex: 1 1 0;
  }
}

/* ===== 像素风确认弹窗 ===== */
.pixel-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.15s steps(2);
}

.pixel-modal.hidden {
  display: none;
}

.pixel-modal.visible {
  opacity: 1;
}

.pixel-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(60, 60, 60, 0.55);
}

.pixel-modal-box {
  position: relative;
  width: min(380px, 100%);
  box-sizing: border-box;
  padding: 22px 22px 20px;
  text-align: center;
  border: 3px solid var(--accent);
  background-color: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--bezel-inner),
    6px 6px 0 var(--pixel-shadow);
  transform: translateY(8px);
  transition: transform 0.15s steps(2);
}

.pixel-modal.visible .pixel-modal-box {
  transform: translateY(0);
}

.pixel-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pixel-warn .pw-tri {
  fill: var(--danger);
}

.pixel-warn .pw-cut {
  fill: var(--surface);
}

.pixel-modal-title {
  margin: 0 0 14px;
  font-size: 22px;
  color: var(--danger);
  letter-spacing: 1px;
}

.pixel-modal-body {
  margin-bottom: 18px;
}

.pixel-modal-line {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.pixel-modal-line.pm-reset {
  color: var(--accent);
}

.pixel-modal-line.pm-keep {
  color: var(--accent-muted);
}

.pixel-modal-question {
  margin: 14px 0 0;
  font-size: 17px;
  color: var(--accent);
}

.pixel-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.pixel-modal-actions .pixel-btn {
  flex: 1 1 0;
  font-size: 16px;
}

@media (max-width: 480px) {
  .inventory-row.has-use-hint {
    padding-bottom: 4px;
  }

  .inventory-list.has-last-use-hint {
    margin-bottom: 4px;
  }

  .inventory-list.has-last-use-hint + .inventory-delete-toggle {
    margin-top: 0;
  }

  .luoyi-review-slot {
    margin-top: 10px;
    padding: 2px 1px 8px;
  }

  .luoyi-review-body {
    grid-template-columns: 106px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px;
  }

  .luoyi-review-portrait-frame {
    width: 106px;
    height: 120px;
  }

  .luoyi-review-copy p,
  .luoyi-review-loading-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .luoyi-review-error-row {
    align-items: stretch;
    flex-direction: column;
  }
}