/* 桌宠面板 —— 暗色玻璃(星空)
 * 规格抄自桥的 public/styles.css 文件头(2026-08-30 那版),硬规则照搬:
 *   1. 单色 —— 仅黑、白及透明度变化,零强调色;页面一切色彩来自背景视频
 *   2. 一切全圆角(胶囊/圆);表面零投影(唯一允许:inset 玻璃高光 + 文字 aura)
 *   3. 可读性不靠遮罩:靠多层文字阴影 aura + 玻璃面板
 *   4. 无入场动画、无滚动揭示;背景视频 0.5x 慢速循环
 */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --w-90: rgba(255, 255, 255, 0.9);
  --w-70: rgba(255, 255, 255, 0.7);
  --w-50: rgba(255, 255, 255, 0.5);
  --w-35: rgba(255, 255, 255, 0.35);
  --w-25: rgba(255, 255, 255, 0.25);
  --w-14: rgba(255, 255, 255, 0.14);
  --w-08: rgba(255, 255, 255, 0.08);
  --w-04: rgba(255, 255, 255, 0.04);

  --aura-title: 0 0 72px rgba(0, 0, 0, 0.42), 0 4px 28px rgba(0, 0, 0, 0.28);
  --aura-body: 0 0 30px rgba(0, 0, 0, 0.32), 0 1px 10px rgba(0, 0, 0, 0.20);

  --glass-rim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 34rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* ── 背景视频 ─────────────────────────────────────────────
 * 走两档:列表页那种长文阅读才压暗;这里内容不多,常压 0.55 就够,
 * 星云流动看得见又不抢正文。 */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  filter: brightness(0.8);
}

/* ── 玻璃面板 ──────────────────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
}
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 布局 ──────────────────────────────────────────────── */
main, .hdr, .foot { position: relative; z-index: 1; }

.hdr {
  margin: calc(12px + var(--safe-top)) 12px 0;
  padding: 14px 20px;
  border-radius: 26px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hdr-title { font-size: 17px; font-weight: 600; text-shadow: var(--aura-title); }
.hdr-status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--w-70); text-shadow: var(--aura-body); }

/* 状态点。不用颜色区分(单色规则),用【实心/空心】和呼吸动画区分。 */
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--w-25);
  box-shadow: inset 0 0 0 1px var(--w-50);
  flex: none;
}
.dot.on { background: var(--w-90); box-shadow: none; animation: pulse 2.4s ease-in-out infinite; }
.dot.warn { background: var(--w-50); box-shadow: none; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

.card {
  border-radius: 28px;
  padding: 20px;
  margin: 14px 12px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.card-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; text-shadow: var(--aura-title); }
.muted { color: var(--w-70); font-size: 13px; line-height: 1.55; margin-bottom: 14px; text-shadow: var(--aura-body); }
.hint { font-size: 12px; color: var(--w-50); line-height: 1.6; margin-top: 12px; text-shadow: var(--aura-body); }
.hint b { color: var(--w-90); font-weight: 600; }

.field-label { display: block; font-size: 12px; color: var(--w-50); margin: 14px 0 6px; text-shadow: var(--aura-body); }

/* ── 小屏预览 ──────────────────────────────────────────── */
.preview-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: #0a0c10;                 /* 和固件 C_DARKBG 一致 */
  /* 上下留黑边,做出"这就是那块 240x240 屏"的感觉 */
  padding: 0;
  line-height: 0;
}
#preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 172;
  image-rendering: pixelated;          /* 放大后保持像素感,别糊 */
  image-rendering: crisp-edges;
}

/* ── 按钮 / 输入 ───────────────────────────────────────── */
.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.btn {
  border: 1px solid var(--w-25);
  background: var(--w-08);
  color: var(--fg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
}
.btn:active { background: var(--w-14); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: #fff; border-color: #fff; color: #000; }
.btn-primary:disabled { background: var(--w-50); border-color: transparent; color: var(--w-90); }

/* 重启小宠物。配色和那颗星芒取自用户给的 claude-color.svg(#D97757)。
   ⚠️ 整页【只有这一处】有颜色 —— 是故意的:它在最上面,一眼就能找到。
   星芒用 currentColor 填,所以换字色就行,不用动 SVG 里的 fill。
   选择器跟 .btn / .btn:active 同权重,靠【写在后面】取胜,别把它挪到上面去。 */
.btn-claude {
  background: #D97757;
  border-color: #D97757;
  color: #fff;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(217, 119, 87, 0.35);
}
.btn-claude:active { background: #C4674A; border-color: #C4674A; box-shadow: none; }
/* SVG 自带 width="1em",这里必须显式压住,否则它跟着字号长成 14px 见方。 */
.btn-claude svg { width: 18px; height: 18px; flex: none; display: block; }

/* 模式切换:选中的那个变实心白 */
.seg-btn.active { background: #fff; border-color: #fff; color: #000; }

.text-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  background: var(--w-08);
  border: 1px solid var(--w-25);
  border-radius: 999px;
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
}
.text-input:focus { outline: none; border-color: var(--w-70); }
.text-input::placeholder { color: var(--w-50); }
/* datetime-local 的日历图标在深色底上是黑的,反相一下 */
#todoTime::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }

/* ── 上传区 ────────────────────────────────────────────── */
.drop {
  border: 1.4px dashed var(--w-25);
  border-radius: 22px;
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.drop:active, .drop.hot { background: var(--w-08); border-color: var(--w-70); }
.drop-main { font-size: 15px; font-weight: 600; text-shadow: var(--aura-body); }
.drop-sub { font-size: 12px; color: var(--w-50); margin-top: 6px; text-shadow: var(--aura-body); }
/* 拖拽区那行状态字【空着的时候不许占地方】—— 它现在默认是空的(解释性小字已删),
   只在选完文件后才由 app.js 写进「1200×800 · 点这里换一张」这种。
   ⚠️ 别顺手把这个元素从 HTML 里删掉:app.js 会往里写,取不到就抛,
   同函数里后面的代码(包括点亮「推到小屏」)全都不执行。见 app.js 的 setDropStatus。 */
.drop-sub:empty { display: none; }

/* ── 待办列表 ──────────────────────────────────────────── */
.todos { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.todo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--w-04);
  border: 1px solid var(--w-08);
}
.todo.done .todo-text { text-decoration: line-through; color: var(--w-50); }

.todo-check {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 1.4px solid var(--w-50);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #000; font-size: 13px; font-weight: 700; line-height: 1;
}
.todo.done .todo-check { background: #fff; border-color: #fff; }

.todo-text { flex: 1; font-size: 14px; line-height: 1.4; word-break: break-word; text-shadow: var(--aura-body); }
.todo-when { font-size: 11px; color: var(--w-50); font-family: var(--mono); flex: none; }
.todo-when.due { color: var(--w-90); }
.todo-del {
  border: none; background: none; color: var(--w-50);
  font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1; flex: none;
  font-family: inherit;
}
.todo-del:active { color: var(--w-90); }
.empty { font-size: 13px; color: var(--w-35); text-align: center; padding: 16px 0; text-shadow: var(--aura-body); }

/* ── 音乐 ──────────────────────────────────────────────── */
/* 「干完活自动放一首」那一行。壳直接复用待办那行的胶囊(.todo)+ 圆形勾
   (.todo-check)—— 它本来就是"一个可以点的勾加一行字",没必要另起一套。
   这里只补 <button> 自带的默认样式(浏览器会给按钮灰底、系统字体、
   居中文字),别的一律不动,免得跟 .todo 打架。 */
.music-auto {
  width: 100%;
  margin-top: 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.music-auto:active { background: var(--w-08); }
.music-auto.on .todo-check { background: #fff; border-color: #fff; }

/* ── 电脑状态 ──────────────────────────────────────────── */
.sys { display: flex; flex-direction: column; gap: 2px; }
.sys-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--w-08); }
.sys-row:last-child { border-bottom: none; }
.sys-k { font-size: 13px; color: var(--w-50); text-shadow: var(--aura-body); }
.sys-v { font-size: 13px; font-family: var(--mono); color: var(--w-90); text-shadow: var(--aura-body); }

/* ── 地址 / 页脚 / 提示条 ──────────────────────────────── */
.url-box {
  font-family: var(--mono);
  font-size: 15px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--w-08);
  border: 1px solid var(--w-25);
  text-align: center;
  word-break: break-all;
  text-shadow: var(--aura-body);
}

.foot {
  text-align: center;
  font-size: 11px;
  color: var(--w-35);
  padding: 18px 16px calc(28px + var(--safe-bottom));
  text-shadow: var(--aura-body);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 20;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  font-size: 14px;
  max-width: 88vw;
  text-align: center;
  text-shadow: var(--aura-body);
  animation: toast-in 0.18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ── 主题选择 ────────────────────────────────────────────
 * 每格里的 canvas 是【真画出来的】,不是缩略图。它自成一套配色,所以不受
 * 上面"单色规则"约束(那条管的是页面自己的配色,不管画面内容)。
 * 选中态也只能用黑白 —— 用强调色的话,六格里五格灰一格彩,看着像坏了。 */
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.theme-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--w-14);
  background: var(--w-04);
  border-radius: 18px;
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-tile:active { background: var(--w-08); }
.theme-tile canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 172;
  border-radius: 10px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.theme-name { font-size: 13px; font-weight: 600; text-shadow: var(--aura-body); }
.theme-hint { font-size: 11px; color: var(--w-50); line-height: 1.45; text-shadow: var(--aura-body); }
.theme-tile.active { border-color: var(--w-90); background: var(--w-14); }
.theme-tile.active .theme-name::after { content: ' ✓'; }

/* ── 会话明细(谁在忙)───────────────────────────────────
 * 汇总那四个数说不清的时候,这张表说得清。 */
.sess {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--w-04);
  border: 1px solid var(--w-08);
}
.sess.waiting { border-color: var(--w-50); box-shadow: inset 0 0 0 1px var(--w-25); }
.sess-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--w-35);
  color: var(--w-70);
}
.sess.busy .sess-tag, .sess.waiting .sess-tag { background: #fff; border-color: #fff; color: #000; }
.sess-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--aura-body); }
.sess-time { flex: none; font-size: 11px; color: var(--w-35); font-family: var(--mono); }
.sys-row.hot .sys-k, .sys-row.hot .sys-v { color: #fff; font-weight: 600; }

/* ── 响铃条 ──────────────────────────────────────────────
 * 不响的时候整个元素是 hidden 的(不占地方,页面上看不出有过这东西);
 * 一响就浮到最上面,盖住页头 —— 这是故意的:板子在响的时候,
 * 它是页面上唯一要紧的事,而人可能是从被窝里爬起来摸手机的。
 *
 * 白底黑字、按钮黑底白字:这没破"零强调色"那条规矩 —— 它一个颜色都没引入,
 * 只是把黑白用到极致。整页能和它抢注意力的只有 .btn-claude 那颗星芒,
 * 而那条在页头,正好被它盖住。
 * 不加入场动画(文件头第 4 条):它该是"一抬眼就在那儿",不是"滑进来"。 */
.alarm-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(12px + var(--safe-top));
  z-index: 30;                              /* 压过 .toast 的 20 */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px 11px 11px 20px;
  border-radius: 26px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;                          /* 窄屏上让按钮掉到第二行,别挤没 */
}
.alarm-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
/* 呼吸的黑点。复用 .dot.on 的 pulse —— 同一套语言,不新造一个动画。 */
.alarm-ico {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: #000;
  animation: pulse 1s ease-in-out infinite;
}
.alarm-text {
  font-size: 14px; font-weight: 600; color: #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ 必须写在 .btn / .btn:active【后面】(同权重,靠顺序取胜)—— 和 .btn-claude
   一个道理,别把它挪到上面去,挪了按钮就会变成浅灰底、白字、看不见。 */
.alarm-stop {
  background: #000; border-color: #000; color: #fff;
  flex: none;
  min-height: 40px;
  padding: 9px 20px;
}
.alarm-stop:active { background: #3a3a3a; border-color: #3a3a3a; }