:root {
  --pink: #ff85a2;
  --pink-strong: #ff6e93;
  --pink-soft: #ffd1dc;
  --pink-mist: #fff0f5;
  --text: #3a2c31;
  --text-dim: #75616a;
  --card: rgba(255, 255, 255, 0.82);
  --ok: #34c759;
  --off: #ff9f0a;
  --gone: #ff3b30;
  --shadow: 0 12px 40px rgba(255, 133, 162, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f6e9ed;
    --text-dim: #b39aa1;
    --card: rgba(38, 28, 32, 0.82);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  display: flex;
  /* 必须显式 column：默认是 row，而 <noscript> 也是 body 的子元素，
     无 JS 时会和卡片并排挤成窄条。有了 column，noscript 正常堆在卡片上方。 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, #fff0f5 0%, transparent 55%),
    radial-gradient(circle at 88% 92%, #ffd1dc 0%, transparent 55%),
    linear-gradient(135deg, #fff7fa 0%, #ffe9f0 55%, #ffd9e3 100%);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(circle at 12% 8%, #3a2630 0%, transparent 55%),
      radial-gradient(circle at 88% 92%, #4a2b39 0%, transparent 55%),
      linear-gradient(135deg, #241a1e 0%, #2e2026 55%, #3a2730 100%);
  }
}

.card {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border-radius: 28px;
  background: var(--card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 133, 162, 0.18);
}

/* 内容栅格：窄屏单列（= 原来的手机观感），宽屏两列。
   桌面端不再是一根 420px 的手机竖条。 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* 窄屏也要允许收缩：长串文案撑宽时，不让 1fr 轨道的 auto 下限把卡片顶出去 */
.col { min-width: 0; }

/* 宽屏（平板/桌面）的响应式覆盖规则统一放在文件**末尾**——
   媒体查询不提升优先级，同特异性的规则按源码顺序决胜，
   写在这里会被后面的基础规则悄悄盖掉（详见文件末尾那段注释）。 */

.head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pink-mist), var(--pink-soft));
  box-shadow: inset 0 0 0 1px rgba(255, 133, 162, 0.25);
  /* 头像可以是一张图片（AVATAR_URL）：裁成圆角方块，别溢出 */
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.head-text { flex: 1 1 auto; min-width: 0; }

h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-switch { display: flex; gap: 4px; flex: 0 0 auto; }

.lang-btn {
  /* 36px：略大于原 30px，接近 WCAG 2.5.5 建议的 44px 触摸目标，
     同时保证三个按钮在 420px 卡片里不挤压标题 */
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 133, 162, 0.35);
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-btn:hover { border-color: var(--pink); color: var(--pink-strong); }

.lang-btn[aria-pressed="true"] {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.status {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 133, 162, 0.08);
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
}

/* 自定义文案上限 40 字，但可能是无空格长串（拉丁 / emoji）：
   flex 子项默认 min-width:auto 会拒绝收缩，`anywhere` 又能在字符间断行，
   两者一起才不会把整块内容顶出卡片。 */
.status-badge > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-dim);
  flex: 0 0 auto;
}

.dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18);
  animation: breathe 2.4s ease-in-out infinite;
}

.dot.offline { background: var(--off); box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.18); }
.dot.gone { background: var(--gone); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18); }

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .dot.online { animation: none; }
}

.status-detail {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.battery { margin-top: 20px; }

.battery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.battery-label { font-size: 14px; color: var(--text-dim); }

.battery-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.battery-bar {
  height: 12px;
  border-radius: 8px;
  background: rgba(255, 133, 162, 0.16);
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--pink-soft), var(--pink-strong));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.battery-fill.charging {
  background: linear-gradient(90deg, #a8e6a1, #34c759);
}

.battery-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

.section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.mood {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 209, 220, 0.28);
}

.mood-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  word-break: break-word;
}

#moodEmoji { margin-right: 6px; }

.mood-time {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.meta {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.meta-row dt { color: var(--text-dim); flex: 0 0 auto; }

.meta-row dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 133, 162, 0.16);
}

.foot p {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.foot-sub { margin-top: 4px; }

/* 必须写成 `.foot .stale`（特异性 0,2,0）而不是单独的 `.stale`（0,1,0）：
   `.foot p { color: var(--text-dim) }`（0,1,1）会压过后者的类选择器，
   于是「掉线提示」这个最该变色的元素反而不变色。

   也不能写成 `.foot p.stale`（0,1,1）：那只匹配 <p>，而 #refreshedAt 是 <p> 里的
   <span>，会让本轮新增的「读取失败」标记失效。`.foot .stale` 两者都覆盖。 */
.foot .stale { color: var(--off); }

/* 无 JS 时的提示条（app.js 加载失败或用户禁用脚本时唯一可见的说明） */
.noscript {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 159, 10, 0.12);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   宽屏（平板/桌面）：卡片放宽，内容左右分栏——
   左列「状态 + 电量」，右列「心情 + 明细」。

   必须放在文件最末尾：媒体查询**不提升优先级**，同特异性（0,1,0）的规则
   按源码顺序决胜。之前这段写在基础规则之前，结果里面 14 条覆盖声明
   （字号、头像、圆点、间距…）全被后面的基础规则盖掉——卡片确实变宽了、
   也确实分成两列，但里面全是手机尺寸，看起来「框大了、字还是小的」。
   ═══════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .card { max-width: 880px; padding: 32px 36px; }

  .grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 0 40px;
    /* 列内间距改由 .col 的 flex gap 控制（列内子项的 margin 会被归零），
       所以标题区到内容区的间距要在这里补回来，与窄屏的 .status margin-top 一致 */
    margin-top: 22px;
  }

  /* 两列各自成为独立纵向流：用 flex gap 而不是子项 margin。
     不能用 `.col > :first-child { margin-top: 0 }`——`:first-child` 是 DOM 序，
     右列首元素是带 hidden 的 `.mood`，可见的 `.meta` 反而会多吃 20px 顶边距。 */
  .col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* 列内间距统一由上面的 gap 提供，因此子项自己的 margin-top 必须归零，
     否则会变成「gap + margin」双重间距。
     这里用 (0,2,0) 的选择器而不是 `.col > *`：与各块自身的 (0,1,0) 拉开差距，
     不依赖「谁写在后面」这种一改就坏的前提。 */
  .col > .status,
  .col > .battery,
  .col > .mood,
  .col > .meta {
    margin-top: 0;
  }

  .head { gap: 14px; }
  .avatar { width: 60px; height: 60px; font-size: 30px; border-radius: 18px; }
  h1 { font-size: 22px; }
  .owner { font-size: 14px; }

  .status { padding: 16px 18px; }
  .status-badge { font-size: 19px; }
  .dot { width: 12px; height: 12px; }

  .battery-value { font-size: 46px; }
  .battery-bar { height: 14px; }
  .battery-sub { font-size: 14px; }

  .mood-text { font-size: 17px; }
  .mood-time { font-size: 13px; }

  .meta-row { font-size: 14px; }
  .meta { gap: 10px; }
}