/* ============ 基础 ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --cream: #fff7ef;
  --paper: #ffffff;
  --ink: #241f1a;
  --ink-2: #6d6157;
  --ink-3: #a2958a;
  --coral: #ff6b4a;
  --coral-deep: #e04e2c;
  --mint: #12a594;
  --sun: #ffb020;
  --line: #efe2d4;
  --shadow-sm: 0 2px 8px rgba(80, 54, 32, 0.06);
  --shadow-md: 0 10px 30px rgba(80, 54, 32, 0.1);
  --shadow-lg: 0 24px 60px rgba(80, 54, 32, 0.16);
  --radius: 20px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;
}

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

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* 手机上长按文字会弹「复制/查询」菜单：孩子点说话按钮时特别容易误触。
     这两屏没有需要选中的正文，只在输入框里放开。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
  color: inherit;
}

input,
textarea {
  font-family: inherit;
  font-size: 15px;
}

.hide {
  display: none !important;
}

/* ============ 首页 ============ */
.home {
  height: 100%;
  overflow-y: auto;
  padding: 48px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--coral), #ff9a6b);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: var(--shadow-sm);
}

.brand h1 {
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.2px;
}

.subtitle {
  color: var(--ink-2);
  font-size: 14px;
  margin: 6px 0 34px;
}

.entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 900px;
}

.entry {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  color: inherit;
}

.entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.entry .icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 4px;
}

.entry h2 {
  font-size: 17px;
  margin: 0;
}

.entry p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.entry .go {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral-deep);
}

.note {
  max-width: 900px;
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ============ 通用条 ============ */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  flex: none;
  z-index: 20;
}

.topbar .title {
  font-weight: 650;
  font-size: 15px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}

.dot.on {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(18, 165, 148, 0.16);
}

.dot.warn {
  background: var(--sun);
}

.dot.off {
  background: #d5c8bb;
}

.pill {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f6ece1;
  color: var(--ink-2);
  white-space: nowrap;
}

.spacer {
  flex: 1;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(14px);
  background: rgba(36, 31, 26, 0.92);
  color: #fff;
  font-size: 13.5px;
  padding: 11px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.24s ease;
  z-index: 999;
  max-width: 80vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ 孩子端 ============ */
.kid {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #fff3e6 0%, #ffe8d6 46%, #ffdcc6 100%);
}

.kid-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 20px 20px 0;
  min-height: 0;
  position: relative;
}

.kid-status {
  font-size: 15px;
  color: #8a6a52;
  font-weight: 550;
  text-align: center;
  min-height: 22px;
}

.orb-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  flex: none;
}

.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 74, 0.28);
  animation: breathe 3.6s ease-in-out infinite;
}

.orb-ring:nth-child(2) {
  animation-delay: 0.7s;
}

.orb-ring:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes breathe {
  0% {
    transform: scale(0.72);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.06);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.orb {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ff7f5c, var(--coral-deep));
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 18px 40px rgba(224, 78, 44, 0.36), inset 0 -6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.14s ease, box-shadow 0.2s ease;
  z-index: 2;
}

.orb:active {
  transform: scale(0.96);
}

.orb .big {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.25;
}

.orb .small {
  font-size: 12.5px;
  opacity: 0.86;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

.orb.live {
  background: linear-gradient(150deg, #12a594, #0b7d70);
  box-shadow: 0 18px 40px rgba(18, 165, 148, 0.36), inset 0 -6px 18px rgba(0, 0, 0, 0.12);
}

.orb.live .orb-ring,
.orb-wrap.live .orb-ring {
  border-color: rgba(18, 165, 148, 0.3);
}

/* 家长正在看的浮层 */
.peer-mini {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6; /* 家长大画面在 DOM 里更靠后，不给 z-index 会被它整个盖住 */
  width: 128px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: #2c2620;
  box-shadow: var(--shadow-md);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.peer-mini video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peer-mini .tag {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  padding: 2px 6px;
  border-radius: 6px;
}

/* 家长文字朗读字幕 */
.caption {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  max-width: 88%;
  background: #fff;
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%) translateY(-8px);
  border-left: 4px solid var(--mint);
}

.caption.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.caption .who {
  display: block;
  font-size: 11.5px;
  color: var(--mint);
  font-weight: 650;
  margin-bottom: 4px;
  letter-spacing: 0.4px;
}

/* 孩子端底部操作 */
.kid-bar {
  flex: none;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: linear-gradient(to top, rgba(255, 240, 228, 0.96), rgba(255, 240, 228, 0));
}

.kbtn {
  height: 68px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 15px;
  font-weight: 650;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform 0.12s ease, background 0.18s ease;
  user-select: none;
}

.kbtn small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}

.kbtn:active,
.kbtn.pressed {
  transform: scale(0.97);
}

/* 两个按钮用不同颜色区分功能，陪读时扫一眼就知道哪个是开着的：
   橙 = 说话（按下才传声），青 = 一直收音（开着就一直传声）。
   关掉是浅底描边，打开是实心亮色。 */
.kbtn.talk {
  background: linear-gradient(150deg, #fff4ed, #ffe3d5);
  color: var(--coral-deep);
  border-color: #ffd2c0;
  box-shadow: 0 6px 16px rgba(224, 78, 44, 0.1);
}

.kbtn.talk small {
  color: #bd7a60;
}

.kbtn.talking {
  background: linear-gradient(150deg, #ff7f5c, #e04e2c);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(224, 78, 44, 0.34);
}

.kbtn.talking small {
  color: rgba(255, 255, 255, 0.85);
}

.kbtn.micbtn {
  background: linear-gradient(150deg, #14b3a1, #0b7d70);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(18, 165, 148, 0.26);
}

.kbtn.micbtn small {
  color: rgba(255, 255, 255, 0.85);
}

.kbtn.micbtn.muted {
  background: linear-gradient(150deg, #eef9f7, #dff2ee);
  color: #2e8578;
  border-color: #c3e5de;
  box-shadow: 0 4px 12px rgba(18, 165, 148, 0.08);
}

.kbtn.micbtn.muted small {
  color: #5fa197;
}

/* ---- 说话按钮上的声波：孩子端和家长端共用 ---- */
.waves {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  flex: none;
}

.waves i {
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.45;
  /* 只过渡高度，让跳动跟得住声音又不抖 */
  transition: height 0.08s linear, opacity 0.2s ease;
}

.kbtn.talking .waves i,
.talkbtn.on .waves i {
  opacity: 0.95;
}

.ptt-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kbtn .waves {
  height: 20px;
}

/* 长按不再选择文字后，双击缩放也一起按掉 */
.kbtn,
.talkbtn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 说话中给按钮一圈呼吸光，孩子一眼看出「现在家长能听见」 */
.kbtn.talking::after,
.talkbtn.on::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  border: 2px solid rgba(18, 165, 148, 0.45);
  animation: talkpulse 1.4s ease-out infinite;
  pointer-events: none;
}

/* 孩子端的说话按钮是橙色，光圈跟着变，别和青色的一直收音撞色 */
.kbtn.talking::after {
  border-color: rgba(224, 78, 44, 0.45);
}

.kbtn,
.talkbtn {
  position: relative;
}

@keyframes talkpulse {
  0% {
    opacity: 0.85;
    transform: scale(0.97);
  }
  70% {
    opacity: 0;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kbtn.talking::after,
  .talkbtn.on::after {
    animation: none;
    opacity: 0.5;
  }
}

/* ============ 家长端 ============ */
.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #17130f;
}

.parent .topbar {
  background: rgba(23, 19, 15, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.parent .topbar .title {
  color: #fff;
}

.parent .pill {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}

.parent .pill.hot {
  background: rgba(255, 107, 74, 0.2);
  color: #ff9d84;
}

.stage {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0d0b09;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0d0b09;
}

/* 旋转模式：几何由 JS 精确设置（宽=容器高、高=容器宽，转 90° 居中） */
.tile.rot90 video {
  object-fit: contain;
}

.tile .label {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 11.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 9px;
  border-radius: 7px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}

.tile .empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  line-height: 1.8;
}

.thumbs {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.thumb {
  width: 108px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0b09;
  border: 2px solid rgba(255, 255, 255, 0.25);
  position: relative;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.thumb.active {
  border-color: var(--coral);
  transform: translateY(-2px);
}

.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb .tag {
  position: absolute;
  left: 5px;
  bottom: 4px;
  font-size: 9.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 家长端底部控制台 */
.console {
  flex: none;
  background: #100d0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.talkbtn {
  width: 74px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 650;
  gap: 2px;
  user-select: none;
  flex: none;
  transition: background 0.16s ease, transform 0.1s ease;
}

.talkbtn small {
  font-size: 10px;
  opacity: 0.6;
  font-weight: 500;
}

.talkbtn:active,
.talkbtn.pressed {
  transform: scale(0.96);
}

.talkbtn.on {
  background: linear-gradient(150deg, #12a594, #0b7d70);
  box-shadow: 0 8px 20px rgba(18, 165, 148, 0.35);
}

.saybox {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.saybox textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  resize: none;
  height: 38px;
  line-height: 38px;
  max-height: 96px;
  font-size: 15px;
}

.saybox textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.sendbtn {
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  flex: none;
  transition: opacity 0.16s ease;
}

.sendbtn:disabled {
  opacity: 0.4;
}

.sendbtn.busy {
  opacity: 0.6;
}

/* 快捷短语：平时只露「⚡ 快捷回复」按钮，点开是可左右滑动的短语条 */
.quick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 10px;
}

.qtoggle {
  align-self: flex-start;
  flex: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.qtoggle.on {
  color: #fff;
  background: rgba(232, 115, 74, 0.55);
  border-color: rgba(232, 115, 74, 0.7);
}

.quickstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.quickstrip::-webkit-scrollbar {
  display: none;
}

.quickstrip button {
  flex: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.quickstrip button:active {
  background: rgba(255, 255, 255, 0.16);
}

/* 呼叫弹窗 */
.ringing {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 100;
}

.ringing .card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px 24px;
  width: min(340px, 84vw);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: pop 0.26s cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes pop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
}

.ringing .avatar {
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffb08a, var(--coral));
  display: grid;
  place-items: center;
  font-size: 34px;
  animation: shake 1.1s ease-in-out infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(-6deg) scale(1);
  }
  50% {
    transform: rotate(6deg) scale(1.05);
  }
}

.ringing h3 {
  margin: 0 0 6px;
  font-size: 19px;
}

.ringing p {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.ringing .acts {
  display: flex;
  gap: 10px;
}

.ringing .acts button {
  flex: 1;
  height: 46px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
}

.ringing .accept {
  background: linear-gradient(150deg, #12a594, #0b7d70);
  color: #fff;
}

.ringing .later {
  background: #f3ebe2;
  color: var(--ink-2);
}

/* ============ 副机位 ============ */
.cam {
  height: 100%;
  background: #0d0b09;
  display: flex;
  flex-direction: column;
}

.cam-stage {
  flex: 1;
  position: relative;
  min-height: 0;
}

.cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-hud {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hud-tag {
  font-size: 11.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
}

.cam-foot {
  flex: none;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

.cam-foot button {
  height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* ============ 进房闸门 ============ */
.gate {
  position: fixed;
  inset: 0;
  background: radial-gradient(110% 80% at 50% 0%, #fff5ea, #ffe9d8);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 200;
}

.gate .box {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 24px;
  padding: 30px 26px 24px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.gate h2 {
  margin: 0 0 8px;
  font-size: 21px;
}

.gate p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.gate .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-bottom: 14px;
}

.gate label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.gate input {
  height: 48px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: #fdf8f3;
  padding: 0 14px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 3px;
  text-align: center;
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.gate input:focus {
  border-color: var(--coral);
  background: #fff;
}

.gate .primary {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
  box-shadow: 0 10px 24px rgba(224, 78, 44, 0.28);
}

.gate .primary:disabled {
  opacity: 0.55;
  box-shadow: none;
}

.gate .tip {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
}

/* 窄屏手机 */
@media (max-width: 420px) {
  .orb-wrap {
    width: 200px;
    height: 200px;
  }
  .orb {
    width: 150px;
    height: 150px;
  }
  .orb .big {
    font-size: 22px;
  }
  .thumbs {
    right: 18px;
    bottom: 18px;
  }
  .thumb {
    width: 84px;
    height: 60px;
  }
  .talkbtn {
    width: 66px;
  }
}

/* ============ 官网落地页 ============ */
.site {
  height: 100%;
  overflow-y: auto;
  background: radial-gradient(120% 70% at 50% 0%, #fff6ec 0%, var(--cream) 60%);
}

.nav {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav .links {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav a.mini {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
}

.nav a.mini:hover {
  background: #fff;
}

.hero {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 24px 30px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.22;
  letter-spacing: -1px;
  margin: 0 0 18px;
}

.hero h1 em {
  font-style: normal;
  color: var(--coral-deep);
  position: relative;
}

.hero p.lead {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 30px;
}

.hero .acts {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  height: 52px;
  padding: 0 30px;
  border-radius: 15px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(224, 78, 44, 0.3);
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}

.btn-ghost {
  height: 52px;
  padding: 0 26px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}

.features {
  max-width: 1040px;
  margin: 20px auto 0;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.feature {
  background: #fff;
  border-radius: 20px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.feature .ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 21px;
  margin-bottom: 12px;
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.feature p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.steps {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 70px;
}

.steps h2 {
  font-size: 22px;
  margin: 0 0 20px;
}

.steprow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.steprow .s {
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
}

.steprow .s b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #ffe7dc;
  color: var(--coral-deep);
  font-size: 13px;
  margin-bottom: 10px;
}

.steprow .s p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.foot {
  border-top: 1px solid var(--line);
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.9;
}

/* ============ 登录 / 注册 ============ */
.authwrap {
  /* body 是 overflow:hidden，这里必须固定高度做内部滚动，
     否则横屏内容超高时整页被裁掉且滑不动 */
  height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: radial-gradient(120% 80% at 50% 0%, #fff6ec, #ffead9);
  overflow-y: auto;
}

.authbox {
  width: min(404px, 100%);
  margin: auto; /* 内容超高时可滚动到顶，不会被居中裁掉 */
  background: #fff;
  border-radius: 24px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-lg);
}

.authbox h1 {
  font-size: 21px;
  margin: 0 0 6px;
}

.authbox .sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 20px;
  line-height: 1.7;
}

.tabs {
  display: flex;
  background: #f7efe7;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}

.tabs button {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.tabs button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.field2 {
  margin-bottom: 13px;
}

.field2 label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}

.field2 input {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fdf9f4;
  padding: 0 14px;
  outline: none;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field2 input:focus {
  border-color: var(--coral);
  background: #fff;
}

.submit {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
  box-shadow: 0 10px 24px rgba(224, 78, 44, 0.26);
}

.submit:disabled {
  opacity: 0.55;
  box-shadow: none;
}

.formerr {
  font-size: 13px;
  color: #d33a1e;
  min-height: 18px;
  margin: 8px 0 0;
}

.altline {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 16px;
}

/* ============ 家长控制台 ============ */
.console-page {
  height: 100%;
  overflow-y: auto;
  background: var(--cream);
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ============ 左右栏布局：控制台与 admin 后台共用 ============ */

.console-body {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.sidenav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--shadow-sm);
}

.navitem {
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--ink-2);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.navitem:hover {
  background: var(--cream, #faf3ea);
}

.navitem.active {
  background: linear-gradient(150deg, #12a594, #0b7d70);
  color: #fff;
  font-weight: 650;
}

.panels {
  min-width: 0;
}

/* 手机：菜单变成顶部横向滚动条，卡片宽度自适应设备 */
@media (max-width: 860px) {
  .console-body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 12px 60px;
  }

  .sidenav {
    position: sticky;
    top: 8px;
    z-index: 20;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
    border-radius: 14px;
  }

  .navitem {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  .card {
    padding: 16px;
  }
}

.card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-bottom: 16px;
}

.card h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.card .desc {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 16px;
  line-height: 1.7;
}

.rowbtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* 输入框下面留出空隙，否则和下面的邀请码卡片贴在一起 */
  margin-bottom: 16px;
}

.btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: #f5ece2;
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.btn.primary {
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(224, 78, 44, 0.24);
}

.btn.teal {
  background: linear-gradient(150deg, #16b3a1, #0b7d70);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 165, 148, 0.24);
}

.btn.sm {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  border-radius: 10px;
}

.invitebox {
  margin-top: 14px;
  background: #f4fbf9;
  border: 1px dashed #9fdbd1;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.invitebox .code {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 7px;
  color: #0b7d70;
  font-variant-numeric: tabular-nums;
}

.invitebox .meta {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

.devlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 收款码配置：微信 / 支付宝两行之间也要留出间隙 */
.paysheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fbf7f2;
  border: 1px solid #f0e6da;
}

/* 手机上成员/订单行允许换行，文字不再被挤成竖排 */
@media (max-width: 640px) {
  .dev {
    flex-wrap: wrap;
  }

  .dev .info {
    flex: 1 1 calc(100% - 48px);
    min-width: 0;
  }

  .dev .uacts {
    margin-left: 48px;
  }
}

.dev .ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #ffe7dc;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: none;
}

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

.dev .info b {
  display: block;
  font-size: 14px;
}

.dev .info span {
  font-size: 12px;
  color: var(--ink-3);
}

.dev .del {
  font-size: 12.5px;
  color: #c0392b;
  padding: 6px 10px;
  border-radius: 8px;
}

.dev .del:hover {
  background: #fdecea;
}

.emptyhint {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.8;
  padding: 10px 0;
}

.hintbar {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  background: #fff8ec;
  border: 1px solid #f5e2c4;
  border-radius: 13px;
  padding: 12px 14px;
  margin-top: 14px;
}

.hintbar code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

/* ============ 家庭管理 ============ */

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

.famswitch {
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  max-width: 200px;
}

.memlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 13px;
  background: #fbf7f2;
  border: 1px solid #f0e6da;
}

.mem .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #ffd6c1, #ffb18c);
  color: #8a4a2c;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.mem .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mem .info b {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mem .info span {
  font-size: 12px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ownertag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  background: #e8f6f3;
  color: #0b7d70;
}

.mem .del {
  font-size: 12.5px;
  color: #c0392b;
  padding: 6px 10px;
  border-radius: 8px;
  flex: none;
}

.mem .del:hover {
  background: #fdecea;
}

.dev .ren {
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 6px 10px;
  border-radius: 8px;
  flex: none;
}

.dev .ren:hover {
  background: #f1e7db;
}

.joinrow {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.joinrow input,
.namefield {
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  min-width: 0;
}

.joinrow input:focus,
.namefield:focus {
  border-color: #12a594;
  box-shadow: 0 0 0 3px rgba(18, 165, 148, 0.12);
}

.joinrow input {
  flex: 0 1 230px;
  letter-spacing: 4px;
  font-weight: 700;
}

.namefield {
  flex: 1 1 200px;
}

/* ============ 家长端：谁在说话 ============ */

.speakbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(18, 165, 148, 0.14);
  border-top: 1px solid rgba(18, 165, 148, 0.24);
  color: #d4f3ec;
  font-size: 12.5px;
}

.speakbar.mine {
  background: rgba(255, 176, 32, 0.14);
  border-top-color: rgba(255, 176, 32, 0.28);
  color: #ffe4b5;
}

.speakbar .swho {
  font-weight: 650;
}

.speakbar .squeue {
  opacity: 0.72;
}

.speakbar .linkbtn {
  margin-left: auto;
  color: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  opacity: 0.85;
}

/* ============ 孩子端绑定页 ============ */
.bind {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 22px;
  background: radial-gradient(120% 90% at 50% 0%, #fff3e6 0%, #ffe8d6 55%, #ffdcc6 100%);
  overflow-y: auto;
}

.bindbox {
  width: min(360px, 100%);
  margin: auto; /* 内容超高时可滚动到顶，不会被居中裁掉 */
  text-align: center;
}

.bindbox .emoji {
  font-size: 54px;
  margin-bottom: 12px;
}

.bindbox h1 {
  font-size: 22px;
  margin: 0 0 8px;
}

.bindbox p {
  font-size: 13.5px;
  color: #8a6a52;
  line-height: 1.75;
  margin: 0 0 22px;
}

.codeinput {
  width: 100%;
  height: 64px;
  border-radius: 16px;
  border: 2px solid #ffd3bd;
  background: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--ink);
  outline: none;
  margin-bottom: 12px;
}

.codeinput:focus {
  border-color: var(--coral);
}

.nameinput {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid #ffd3bd;
  background: #fff;
  text-align: center;
  font-size: 15px;
  outline: none;
  margin-bottom: 14px;
}

.bindbtn {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(224, 78, 44, 0.3);
}

.bindbtn:disabled {
  opacity: 0.5;
}

/* ============ 孩子端：播放解锁 ============ */

.tapbar {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(150deg, #ff8a63, var(--coral-deep));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(224, 78, 44, 0.36);
  z-index: 40;
  animation: tapPulse 1.8s ease-in-out infinite;
}

.tapbar.hide {
  display: none;
}

.tapbar .wave {
  font-size: 18px;
}

.tapbar span:last-child {
  white-space: nowrap;
}

@keyframes tapPulse {
  0%,
  100% {
    box-shadow: 0 14px 30px rgba(224, 78, 44, 0.36);
  }
  50% {
    box-shadow: 0 14px 30px rgba(224, 78, 44, 0.36), 0 0 0 10px rgba(255, 138, 99, 0.22);
  }
}

.topbar .pill#soundbtn {
  cursor: pointer;
  border: 0;
  font-family: inherit;
}

/* ============ 控制台：我的声音 ============ */

.voicegrid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.voicerow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voicerow .btn {
  flex: none;
}

.voicesel {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fdf9f4;
  padding: 0 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}

.voicesel:focus {
  border-color: var(--coral);
}

.previewline {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.previewline input {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fdf9f4;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
  min-width: 0;
}

/* ============ 控制台：录音克隆 ============ */

.clonebox {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f7fbfa;
  border: 1px solid #d8ece7;
}

.clonehead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.clonehead b {
  font-size: 14.5px;
}

.clonehead .tagline {
  font-size: 12px;
  color: #0b7d70;
}

.clonedesc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 12px;
}

.cloneprompt {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px dashed #9fdbd1;
  margin-bottom: 12px;
}

.cloneprompt .ptext {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 8px;
}

.cloneprompt .ptimer {
  font-size: 12.5px;
  color: #0b7d70;
  font-variant-numeric: tabular-nums;
}

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

/* ============ 录音克隆：文案与实时时长 ============ */

.cloneprompt .phead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cloneprompt .plabel {
  font-size: 12.5px;
  color: var(--ink-2);
}

.cloneprompt .plabel b {
  color: #0b7d70;
  font-variant-numeric: tabular-nums;
}

.linkbtn {
  margin-left: auto;
  font-size: 12.5px;
  color: #0b7d70;
  background: #eaf7f4;
  padding: 5px 11px;
  border-radius: 9px;
  font-weight: 600;
  flex: none;
}

.linkbtn:hover {
  background: #d9f0ea;
}

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

.cloneprompt .ptext {
  font-size: 15.5px;
  line-height: 2;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

.cloneprompt .ptimer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.cloneprompt .psec {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cloneprompt .phint {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff4e4;
  color: #b4661a;
}

.cloneprompt .phint.good {
  background: #e8f7f3;
  color: #0b7d70;
}

.recmeter {
  height: 7px;
  border-radius: 999px;
  background: #e7dccd;
  overflow: hidden;
  margin-top: 10px;
}

.recfill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb020, #ff6b4a);
  transition: width 0.12s linear;
}

/* ============ 自绘音频播放器 ============ */

.player {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid #d9ece8;
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
}

.playbtn {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, #16b3a1, #0b7d70);
  color: #fff;
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(18, 165, 148, 0.3);
  line-height: 1;
}

.playbtn:active {
  transform: scale(0.96);
}

.player .track {
  position: relative;
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: #e7dccd;
  cursor: pointer;
  touch-action: none;
}

.player .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3ecfba, #0b7d70);
}

.player .knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0b7d70;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(30, 20, 10, 0.22);
  pointer-events: none;
}

.player .pcode {
  flex: none;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ============ 孩子端：字幕历史（最近 3 条，可滚动） ============ */

.caption-panel {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 118px;
  max-height: 33vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 12;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  scrollbar-width: none;
}

.caption-panel::-webkit-scrollbar {
  display: none;
}

.caption-panel.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.caption-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caption-item {
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid var(--mint);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  word-break: break-word;
}

.caption-item.in {
  opacity: 1;
  transform: translateY(0);
}

/* 越旧越淡，但保持能看清 */
.caption-item.old {
  opacity: 0.62;
  box-shadow: var(--shadow-sm);
  border-left-color: #b9dfd8;
}

.caption-item .who {
  display: block;
  font-size: 11.5px;
  color: var(--mint);
  font-weight: 650;
  margin-bottom: 3px;
  letter-spacing: 0.4px;
}

/* ============ 孩子端：摄像头切换 ============ */

.topbar .pill.icon {
  padding: 0;
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 15px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.topbar .pill.icon:active {
  transform: scale(0.94);
}

/* 前置画面像照镜子，后置拍作业不能镜像（否则字是反的） */
.peer-mini video {
  transition: transform 0.2s ease;
}

.peer-mini:not(.back) video {
  transform: scaleX(-1);
}

.peer-mini .tag {
  max-width: 84%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 孩子端：大画面是自己，小窗是家长，横屏左右分栏 ============ */

.kid-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kid-main {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 0;
}

/* 大画面：孩子自己的镜头，前置拍你 / 后置拍作业（拍作业是主视角） */
.self-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #16110d;
  box-shadow: var(--shadow-md);
}

.self-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transition: transform 0.2s ease;
}

/* 前置画面像照镜子，后置拍作业不能镜像（否则字是反的） */
.self-stage:not(.back) video {
  transform: scaleX(-1);
}

.self-stage .tag {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 8px;
  border-radius: 7px;
  max-width: 84%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 家长画面：小窗浮在右上角，给大画面让位 */
.parent-mini {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 6;
  width: 132px;
  aspect-ratio: 4 / 3;
  max-height: 30vh;
  border-radius: 14px;
  overflow: hidden;
  background: #16110d;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-md);
}

/* contain：家长竖屏/横屏都不裁切不变形 */
.parent-mini video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.parent-mini .stage-tag {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 10.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 6px;
  pointer-events: none;
}

/* 控制区：竖屏在画面下方；横屏时整个变右栏 */
.kid-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 16px 0;
}

.kid-side .kid-bar {
  width: 100%;
  background: none;
  padding: 0 0 calc(14px + env(safe-area-inset-bottom));
}

/* 字幕浮在大画面顶部，给右上角的家长小窗留出位置 */
.caption-panel {
  left: 14px;
  right: 164px;
  top: 14px;
  max-height: 28vh;
}

/* 横屏：画面在左、控制在右，两栏都够大好点按 */
@media (orientation: landscape) {
  .kid-body {
    flex-direction: row;
  }

  .kid-main {
    flex: 1.5;
    /* 上下留一样的 10px 间隙，画面不贴底 */
    padding: 10px 6px 10px 14px;
  }

  /* 右栏内容已紧凑到一屏放得下：垂直居中更好看；
     超矮屏仍可滚动兜底 */
  .kid-side {
    flex: 1;
    max-width: 320px;
    min-height: 0;
    justify-content: center;
    overflow-y: auto;
    scrollbar-width: none;
    gap: 9px;
    padding: 4px 14px calc(8px + env(safe-area-inset-bottom)) 6px;
  }

  .kid-side::-webkit-scrollbar {
    display: none;
  }

  .kid-side .kid-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 0 4px;
  }

  /* 矮横屏圆钮收一圈，保证状态条和两个按钮一屏放得下 */
  .kid-side .orb-wrap {
    width: 116px;
    height: 116px;
  }

  .kid-side .orb {
    width: 84px;
    height: 84px;
  }

  .kid-side .orb .big {
    font-size: 13.5px;
    letter-spacing: 0.5px;
  }

  .kid-side .orb .small {
    font-size: 10px;
    margin-top: 3px;
  }

  /* 横屏状态条：一行小字，别占地方 */
  .kid-side .kid-status {
    font-size: 12.5px;
    min-height: 18px;
    line-height: 1.4;
  }

  /* 横屏两个按钮压矮，字也小一号 */
  .kid-side .kbtn {
    height: 50px;
    border-radius: 16px;
    font-size: 13.5px;
    gap: 1px;
  }

  .kid-side .kbtn small {
    font-size: 10px;
  }

  .kid-side .kbtn .waves {
    height: 14px;
  }

  .parent-mini {
    width: 110px;
  }

  .caption-panel {
    left: 20px;
    right: 150px;
  }
}

/* 呼叫按钮原来 240px 太大，收一圈 */
.orb-wrap {
  width: 176px;
  height: 176px;
}

.orb {
  width: 126px;
  height: 126px;
  box-shadow: 0 12px 28px rgba(224, 78, 44, 0.3), inset 0 -4px 14px rgba(0, 0, 0, 0.12);
}

.orb .big {
  font-size: 20px;
  letter-spacing: 0.5px;
}

/* 顶栏按钮变多后，窄屏可横向滑动，不再挤成一团 */
.topbar {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.topbar::-webkit-scrollbar {
  display: none;
}

.topbar > * {
  flex: none;
}

.topbar .spacer {
  flex: 1 1 auto;
  min-width: 6px;
}

/* ============ 声音卡：系统声音 / 我的声音 双标签 ============ */

.vtabbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.vtab {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-weight: 650;
  font-size: 14px;
  position: relative;
  transition: all 0.15s ease;
}

.vtab.active {
  background: linear-gradient(150deg, #ff7f5c, #e04e2c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 78, 44, 0.24);
}

/* 标签右上角的小圆点：这个声音源正在被使用 */
.vtab.using::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid #fff;
}

/* 标签下面那行：随时告诉家长「孩子现在听到的是哪个声音」 */
.vuseline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: -6px 0 14px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #faf5ef;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.vuseline b {
  color: var(--ink);
  font-weight: 700;
}

.vuseline span {
  color: var(--ink-3);
}

/* 当前标签就是正在用的声音：绿色，一眼确认 */
.vuseline.on {
  background: rgba(18, 165, 148, 0.08);
  border-color: rgba(18, 165, 148, 0.35);
}

.vuseline.on b {
  color: var(--mint);
}

/* 本月字数条：告诉家长「怎么算的」 */
.vusage {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-radius: 12px;
  background: #fdf7f1;
  border: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.vusage b {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  margin-bottom: 2px;
}

/* 音色 ID 行：只读展示，只能删 */
.vidrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #faf5ef;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.vidlabel {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
}

.vidval {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  letter-spacing: 0.4px;
}

.vidrow .vdel {
  margin-left: auto;
}

.payhint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
  background: #fdf6ec;
  border: 1px solid #f5e3c8;
  border-radius: 12px;
  padding: 10px 14px;
}

/* ============ 个人中心 ============ */

.me-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) {
  .me-grid {
    grid-template-columns: 1fr;
  }
}

.me-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.me-title {
  font-size: 13px;
  color: var(--mint);
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.balrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bal {
  font-size: 26px;
  font-weight: 750;
  color: var(--ink);
}

.usage {
  font-size: 12.5px;
  color: var(--ink-3);
}

.topuprow {
  display: flex;
  gap: 8px;
}

.reqstat {
  font-size: 12.5px;
  color: #b06a1f;
}

/* 成员行里的用量 / 余额 */
.memusage,
.membal {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}

.memcache {
  font-style: normal;
  color: var(--mint);
}

.membal {
  color: #b06a1f;
}

/* 代付审批 */
.payreqtitle {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #b06a1f;
}

.payreq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fdf6ec;
  border: 1px solid #f5e3c8;
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 8px;
}

.payreq .pr {
  font-size: 13px;
  color: var(--ink-2);
}

.payreq .pr span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* 通用弹窗 */
.modal-ov {
  position: fixed;
  inset: 0;
  background: rgba(40, 28, 18, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 20px;
}

.modal {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  margin: 0 0 8px;
}

.modal .mdesc {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 16px;
}

.modal .macts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.modal .mhint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 14px 0 0;
}

.modal .mdesc.warn {
  color: #c04c2c;
}

/* 充值收款码弹窗 */
.qrmodal .qrcode {
  display: block;
  width: 210px;
  max-width: 100%;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* 我的充值订单列表 */
.topup-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}

.topup-order:last-child {
  border-bottom: none;
}

.topup-order .st-pending,
.topup-order .st-reviewing {
  color: #b06a1f;
  white-space: nowrap;
}

.topup-order .st-approved {
  color: #12805f;
  white-space: nowrap;
}

.topup-order .st-rejected {
  color: #c04c2c;
  white-space: nowrap;
}

/* 可折叠卡片（副机位）：右上角折叠按钮 + 折叠时隐藏内容 */
.card.foldable {
  position: relative;
}

.foldbtn {
  position: absolute;
  top: 20px;
  right: 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.foldbtn:hover {
  background: var(--cream, #faf3ea);
}

.card.folded .foldbody {
  display: none;
}

.card.folded {
  padding-bottom: 18px;
}

/* 套餐信息条 + 购买/加购（家庭管理卡） */
.planslot {
  background: #f2faf8;
  border: 1px solid #cfe8e2;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.planline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--ink-2);
}

.planline b {
  color: var(--ink);
}

.planbuy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.planhint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
}

/* 成员行的会员编号 + 创建者分配控件 */
.memno {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 400;
}

.allocrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.allocrow .chk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* admin：筛选行 + 分页器 */
.filterrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* 搜索框与旁边的下拉框用同一套规格：42px 高、12px 圆角、
   1.5px 边框、同底色同字号，这样整行高度才对得齐 */
.filterrow input {
  min-width: 160px;
  height: 42px;
  padding: 0 46px 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fdf9f4;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.filterrow input::placeholder {
  color: var(--ink-3);
}

.filterrow input:focus {
  border-color: var(--coral);
  background: #fffdfa;
}

/* 下拉框在筛选行里按内容宽度排，别用 voicesel 默认的 width:100%，
   否则会把搜索框挤到换行 */
.filterrow select {
  width: auto;
  flex: none;
}

/* 清除按钮：做成 24px 的小圆片，稳稳落在 42px 的框里（上下各留 9px），
   样式和身份标签/状态用的是同一套圆角与灰阶，不再往外顶 */
.filterrow .searchbox {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 160px;
}

.filterrow .searchbox input {
  width: 100%;
}

.searchclear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #efe5d9;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}

/* 视觉只有 24px，但往四周多给 6px 透明热区，点偏一点也算命中 */
.searchclear::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.searchclear:hover {
  background: #e5d7c5;
  color: var(--ink);
}

.searchclear:active {
  transform: translateY(-50%) scale(0.9);
  background: #dccab4;
  color: var(--ink);
}

.searchclear[hidden] {
  display: none;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-2);
}

.pager button:disabled {
  opacity: 0.45;
  cursor: default;
}

.st-approved,
.st-paid {
  color: #12805f;
}

.st-pending,
.st-reviewing {
  color: #b06a1f;
}

.st-rejected {
  color: #c04c2c;
}

.st-cancelled {
  color: #8d857f;
}

/* 后台订单列表：用户取消的订单压暗显示 + 写明原因，不会被当成“系统丢单” */
.dev.ord-cancelled {
  background: #fbfaf9;
}
.dev.ord-cancelled .info b {
  color: #8d857f;
}
.ocancel {
  color: #9a8f86;
}
/* 从消息中心点进来时高亮一下这笔订单 */
.dev.hit {
  animation: devhit 1.8s ease-out;
}
@keyframes devhit {
  0%,
  40% {
    box-shadow: 0 0 0 3px rgba(11, 125, 112, 0.28);
    background: #f2fbf8;
  }
  100% {
    box-shadow: 0 0 0 3px rgba(11, 125, 112, 0);
  }
}

/* admin：收款码缩略图 */
.qrprev {
  display: inline-block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  vertical-align: middle;
  margin-right: 6px;
}

/* ============ admin 后台：套餐表格 ============ */
.plantable {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.planrow {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fffdfb;
}

.planhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.planid {
  font-size: 12px;
  color: var(--ink-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.planfields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  color: var(--ink-2);
}

.planfields label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.planfields input[type='number'] {
  width: 110px;
}

.planfields .chk input {
  width: auto;
}

.uacts {
  display: flex;
  gap: 6px;
}

/* ============ 控制台：家庭条 / 入家邀请 / 孩子管理列表 ============ */

.fambar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 2px;
}

.fambar .linkbtn {
  font-size: 13px;
  color: var(--coral-deep);
  padding: 6px 4px;
}

.inboxcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(150deg, #fff7ef, #ffeadd);
  border: 1.5px solid #ffd2b8;
  box-shadow: var(--shadow-sm);
}

.inboxcard .ib {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
}

.inboxcard .ib b {
  color: var(--coral-deep);
}

.inboxcard .ib span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}

.inboxcard .ibacts {
  display: flex;
  gap: 8px;
  flex: none;
}

.kidrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fbf7f2;
  border: 1px solid #f0e6da;
}

.kidrow .ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffe7dc;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}

.kidrow .kinfo {
  flex: 1;
  min-width: 96px;
}

.kidrow .kinfo b {
  display: block;
  font-size: 14.5px;
}

.kidrow .kcode {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.kidrow .kcode code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
  background: #fff;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid #efe4d6;
}

/* 邀请码是长期固定的：换手机也用这个码，别让家长以为换设备就得换码 */
.kidrow .kfixed {
  margin-left: 7px;
  font-size: 11.5px;
  color: var(--mint);
  background: rgba(18, 165, 148, 0.1);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.kstate {
  font-size: 12px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  flex: none;
}

.kstate.on {
  color: #0b7d70;
  background: #d9f4ef;
}

.kstate.off {
  color: #9a8c7e;
  background: #f2ece4;
}

.kstate.wait {
  color: #a07a2c;
  background: #fdf1d8;
}

.kidrow .kacts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.kidrow .kacts .btn.sm {
  padding: 7px 12px;
  font-size: 12.5px;
}

.kidrow .kdel {
  font-size: 12.5px;
  color: #c0392b;
  padding: 7px 8px;
  border-radius: 8px;
}

.kidrow .kdel:hover {
  background: #fdecea;
}

.sentlist {
  margin-top: 10px;
}

.senttitle {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.sentrow {
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 10px;
  background: #fbf7f2;
  border: 1px dashed #e8dbca;
  margin-bottom: 6px;
}

.sentrow span {
  color: var(--ink-3);
  font-size: 12px;
}

@media (max-width: 480px) {
  .kidrow .kacts {
    width: 100%;
    margin-left: 48px;
  }
  .inboxcard {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 孩子端退出按钮：低调但可点 */
.pill.kexit {
  color: #9a8c7e;
  font-size: 12px;
}
.pill.kexit:active {
  background: #fdecea;
  color: #c0392b;
}

/* ============ 发音调节（语速 + 语气） ============ */
.tunebox {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: #fffdf9;
  display: grid;
  gap: 10px;
}
.tunetitle {
  font-size: 13.5px;
  color: var(--ink);
}
.tunerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tunelabel {
  font-size: 12.5px;
  color: var(--ink-2);
  width: 34px;
  flex: none;
}
.tuneside {
  font-size: 11.5px;
  color: var(--ink-3);
}
.tunebox input[type='range'] {
  flex: 1;
  min-width: 140px;
  accent-color: var(--coral);
}
.tuneval {
  font-size: 13px;
  color: var(--coral-deep);
  min-width: 48px;
  text-align: right;
}
.moodchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.moodchip {
  font-size: 12.5px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.moodchip.on {
  background: #fff0eb;
  border-color: var(--coral);
  color: var(--coral-deep);
  font-weight: 600;
}
.tunehint {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ============ 陪读看板 ============ */
.studystats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sstat {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fffdf9;
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
}
.sstat b {
  font-size: 16px;
  color: var(--ink);
}
.sstat span {
  font-size: 11.5px;
  color: var(--ink-3);
}
.studybars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 96px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.sbcol {
  flex: 1;
  min-width: 22px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 4px;
}
.sbar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #ffc9b8, var(--coral));
  min-height: 2px;
}
.sbcol:hover .sbar {
  background: var(--coral-deep);
}
.sblab {
  font-size: 9.5px;
  color: var(--ink-3);
  padding-bottom: 4px;
  white-space: nowrap;
}
.sblab.today {
  color: var(--coral-deep);
  font-weight: 700;
}
.notelist {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.noterow {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fffdf9;
}
.notehead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.notehead b {
  font-size: 13px;
}
.notemeta {
  font-size: 11.5px;
  color: var(--ink-3);
  flex: 1;
}
.notedel {
  font-size: 11.5px;
  color: #c0392b;
  background: none;
  border: none;
  cursor: pointer;
}
.notebody {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============ 我的订单（独立面板） ============ */
.ordrow .uacts {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ordcd {
  color: #d35400;
  font-variant-numeric: tabular-nums;
}
.st-closed {
  color: #95a5a6 !important;
}
.receiptmodal {
  max-width: min(560px, 92vw);
}
.receiptimg {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

/* ============ 陪读看板：记录列表 ============ */
.sessscore {
  font-size: 12.5px;
  flex: none;
}
.sessopen {
  color: var(--ink-3);
  font-style: normal;
}
.notebtn {
  flex: none;
}
.notebodybig {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffdf9;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 40vh;
  overflow: auto;
}

/* ============ 陪读界面：科目条（深色房间页） ============ */
.studybar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sblab {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  flex: none;
}
.studysel {
  max-width: 130px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 13px;
}
.studysel option {
  color: #222;
}
.studybtn {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}
.studybtn.on {
  background: #e8734a;
  border-color: #e8734a;
  font-weight: 600;
}
.studytimer {
  font-size: 12.5px;
  color: #ffd9a8;
  font-variant-numeric: tabular-nums;
}
.scoresel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.scorechip {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.scorechip.on {
  background: #fff0eb;
  border-color: var(--coral);
  color: var(--coral-deep);
  font-weight: 600;
}
.modal textarea {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

/* ============ 快捷回复短语编辑（个人中心） ============ */
.qplist {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.qprow {
  display: flex;
  gap: 6px;
  align-items: center;
}
.qprow input {
  flex: 1;
  min-width: 0;
}
.qpdel {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: #c0392b;
  cursor: pointer;
  font-size: 13px;
}
.qpdel:active {
  background: #fdecea;
}

/* ============ 家长端三模式大按钮（点一下说 / 快捷回复 / 开始陪读） ============ */
.talkbtn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* 非说话模式的按钮配色（青色系），一眼看出当前短按是干嘛 */
.talkbtn.alt {
  background: linear-gradient(155deg, #2fa7a0, #1d7f79);
  box-shadow: 0 10px 24px rgba(31, 128, 122, 0.35);
}

/* 快捷回复弹窗：竖向列表，鼠标滚轮 / 手指上下滑都能选 */
.quickmodal .quicklist {
  display: grid;
  gap: 8px;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y proximity;
  padding: 2px 8px 6px 2px;
  margin: 0 0 6px;
  scrollbar-width: thin;
  scrollbar-color: #e6cfbd transparent;
}

.quickmodal .quicklist:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 12px;
}

.quickmodal .quicklist::-webkit-scrollbar {
  width: 6px;
}

.quickmodal .quicklist::-webkit-scrollbar-thumb {
  background: #e6cfbd;
  border-radius: 3px;
}

.quickmodal .quicklist::-webkit-scrollbar-track {
  background: transparent;
}

.qchip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  font-size: 14.5px;
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fffdf9;
  color: var(--ink);
  scroll-snap-align: start;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.qchip .qn {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f6e7db;
  color: #a4795c;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.qchip .qt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qchip:hover {
  background: #fff6f1;
  border-color: var(--coral);
}

.qchip:active {
  transform: scale(0.985);
  background: #fff0eb;
  border-color: var(--coral);
  color: var(--coral-deep);
}

.qchip:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* 「下面还有」提示：滚到底部自动消失 */
.quickmodal .qmore {
  margin: 0 0 12px;
  transition: opacity 0.15s;
}

.quickmodal .qmore.hide {
  opacity: 0;
  pointer-events: none;
}

.quickmodal .qcount {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}

/* ============ admin 会员详情弹窗 ============ */
.mlink {
  color: var(--coral-deep);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn.warn {
  background: #fff;
  border: 1.5px solid #e0784a;
  color: #c0562c;
}

.btn.warn:active {
  background: #fdeee6;
}

.mdmodal {
  max-width: min(520px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
}

.mdgrid {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 7px 10px;
  font-size: 13px;
  margin: 10px 0 4px;
}

.mdgrid > span {
  color: var(--ink-3);
}

.mdgrid > b {
  color: var(--ink);
  font-weight: 600;
  word-break: break-all;
}

.mdbal {
  color: var(--coral-deep);
  font-size: 15px;
}

.baladj {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.baladj input {
  min-width: 0;
}

.baladj #mdamt {
  width: 150px;
  flex: none;
}

.baladj #mdnote {
  flex: 1;
  min-width: 120px;
}

/* 后台：重置会员密码后展示新密码的框 */
.rpwbox {
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px dashed var(--coral);
  border-radius: 12px;
  background: #fff6f1;
}

.rpwbox .lb {
  font-size: 12.5px;
  color: var(--ink-3);
}

.rpwbox .pw {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--coral-deep);
  word-break: break-all;
  margin: 2px 0 4px;
}

.rpwbox .hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
}

.rpwbox .row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mdorders {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}

.mdorow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 5px;
}

/* 孩子端全屏按钮：竖屏时屏幕够用不显示，横屏才出现 */
#fsbtn {
  display: none;
}

@media (orientation: landscape) {
  #fsbtn {
    display: inline-flex;
  }
}

/* 全屏状态下把孩子端底色铺满，避免四周留黑边观感突兀 */
#kidview:fullscreen {
  background: #ffe8d6;
}

/* ============================================================
   控制台新增：会员身份 / 陪读套餐 / 我的账户 / 快捷回复 / 看板点柱
   ============================================================ */

/* ---- 会员身份标签（个人中心、套餐页共用） ---- */
.idtag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 11px;
  letter-spacing: 0.2px;
}
.idtag.owner {
  background: #e7f7f3;
  color: #0d7f72;
}
.idtag.member {
  background: #eef2fd;
  color: #3b5bdb;
}
.idtag.plain {
  background: #f4efe8;
  color: #8a7460;
}

/* ---- 个人中心：头像条 + 基本信息 ---- */
.meprofile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fbf7f2;
  border: 1px solid #f0e6da;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.me-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ffe7dc;
  color: var(--coral-deep);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 700;
  flex: none;
}
.me-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.me-who b {
  font-size: 15.5px;
}
.me-who span {
  font-size: 12.5px;
  color: var(--ink-3);
  word-break: break-all;
}
.idbadge {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
}
.idbadge.owner {
  background: #e7f7f3;
  color: #0d7f72;
}
.idbadge.member {
  background: #eef2fd;
  color: #3b5bdb;
}
.idbadge.plain {
  background: #f4efe8;
  color: #8a7460;
}
.kvrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed #f0e6da;
}
.kvrow span {
  color: var(--ink-3);
  flex: none;
}
.kvrow b {
  color: var(--ink);
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}
.idbox {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fffdfa;
}
.idbox p {
  margin: 9px 0 0;
  font-size: 12.8px;
  color: var(--ink-2);
  line-height: 1.75;
}

/* ---- 我的账户：余额卡 + 当前套餐卡 ---- */
.accttop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.acctbal {
  background: linear-gradient(135deg, #fff3ec, #ffe9df);
  border: 1px solid #f7d9c9;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.acctbal span {
  font-size: 12.5px;
  color: #a4705a;
}
.acctbal b {
  font-size: 34px;
  font-weight: 780;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.acctbal i {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-3);
}
.acctplan {
  background: #fbf7f2;
  border: 1px solid #f0e6da;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.acctplantag {
  font-size: 11.5px;
  color: #0d7f72;
  background: #e7f7f3;
  border-radius: 999px;
  padding: 3px 10px;
  align-self: flex-start;
}
.acctplanline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.acctplanline b {
  font-size: 15px;
}
.acctplanline span {
  font-size: 12.5px;
  color: var(--ink-3);
}
.acctplanlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.acctplanlist li {
  font-size: 12.5px;
  color: var(--ink-2);
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.acctplanlist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffc9b8;
}
@media (max-width: 820px) {
  .accttop {
    grid-template-columns: 1fr;
  }
}

/* ---- 陪读套餐：身份状态条 + 三张套餐卡 ---- */
.planstate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  background: #f2faf8;
  border: 1px solid #cfe8e2;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.planwarn {
  color: #b3341c;
  background: #fdecea;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
}
.plancards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0 18px;
}
.plancard {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: #fffdfa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plancard.iscur {
  border-color: var(--mint);
  background: #f4fbf9;
  box-shadow: 0 6px 20px rgba(18, 165, 148, 0.1);
}
.planhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planhead b {
  font-size: 15.5px;
}
.planflag {
  font-size: 11px;
  font-weight: 700;
  background: var(--mint);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
}
.planprice {
  font-size: 26px;
  font-weight: 760;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.planprice i {
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: var(--ink-3);
  margin-left: 3px;
}
.plancard ul {
  margin: 2px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.plancard li {
  font-size: 12.8px;
  color: var(--ink-2);
  padding-left: 16px;
  position: relative;
  line-height: 1.55;
}
.plancard li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffc9b8;
}
.plancard .planbtn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.planbtn.cur {
  background: #e8f4f1;
  color: #0d7f72;
  border: 1px solid #bfe3dc;
}
.planrules {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}
.planrules b {
  font-size: 13px;
  color: var(--mint);
}
.planrules ul {
  margin: 9px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.planrules li {
  font-size: 12.8px;
  color: var(--ink-2);
  line-height: 1.75;
}
@media (max-width: 820px) {
  .plancards {
    grid-template-columns: 1fr;
  }
}

/* ---- 快捷回复页：右侧短语列表 ---- */
.quickhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 10px;
}
.quickhead b {
  font-size: 14px;
}
.qplist {
  gap: 8px;
}
.qprow {
  gap: 10px;
  background: #fbf7f2;
  border: 1px solid #f0e6da;
  border-radius: 12px;
  padding: 6px 8px 6px 10px;
}
.qpno {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffe7dc;
  color: var(--coral-deep);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.qprow input {
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}
.qprow input:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}
.qpnum {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.qpnum.full {
  color: var(--coral-deep);
  font-weight: 600;
}
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---- 陪读看板：柱子可点，选中高亮 ---- */
.barshint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 8px 0 0;
}
.daychip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff3ec;
  border: 1px solid #f7d9c9;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 10px 0 4px;
  font-size: 13px;
  color: #a4705a;
}
.daychip b {
  color: var(--coral-deep);
}
button.sbcol {
  background: none;
  border: 0;
  padding: 4px 0 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
}
button.sbcol:hover {
  background: #fff3ec;
}
button.sbcol.picked {
  background: #ffe9df;
  box-shadow: inset 0 0 0 1px #f3c4b2;
}
button.sbcol.zero .sbar {
  background: #f0e6da;
}
button.sbcol.picked .sbar {
  background: var(--coral-deep);
}
button.sbcol.picked .sblab {
  color: var(--coral-deep);
  font-weight: 700;
}

/* ============================================================
   套餐体系改版：1 元试用身份 / 有效期 / 续费 / 滚动条不位移
   ============================================================ */

/* 滚动条出现时不再挤压居中容器：左右栏不会横向抖一下。
   注意：控制台改版后页面本身不再滚动（滚动条只出现在卡片里），
   所以 .console-page / .console-body 不能再留 stable 槽位 ——
   overflow:hidden 仍是滚动容器，留槽位会白占 15px，导致顶栏右侧缺一条。 */
.home {
  scrollbar-gutter: stable;
}

/* 普通会员（试用）：琥珀色，和创建人（青）、成员（蓝）、普通（灰）区分开 */
.idtag.trial,
.idbadge.trial {
  background: #fff4e0;
  color: #a9711b;
}
.planflag.trial {
  background: #f5b83d;
  color: #4a3208;
}
/* 已排队、下个周期才生效的套餐 */
.planflag.pending {
  background: #e8f0ff;
  color: #2a5bd7;
}
.plancard.ispend {
  border-color: #b9cffb;
  background: #f7faff;
}

/* 套餐卡里的到期时间 */
.planexp {
  font-size: 12px;
  color: var(--ink-3);
  margin: -2px 0 2px;
}

/* ============================================================
   陪读看板：月历视图（替代原来的 14 天柱状图）
   日期文字用深色，红点 = 这天有陪读记录
   ============================================================ */
.studybars {
  display: block;
  height: auto;
  padding: 0;
  border-bottom: 0;
  overflow: visible;
}
.kcalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kcalhead b {
  font-size: 14px;
  color: #2c2a28;
}
.kcallegend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #7a736c;
}
.kcallegend .kdot {
  position: static;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
}
.kcalweek {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
.kcalweek span {
  text-align: center;
  font-size: 11.5px;
  color: #8a8177;
  font-weight: 600;
}
.kcalgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.kcalblank {
  height: 42px;
}
.kcalday {
  position: relative;
  height: 42px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 1px solid #efe4d8;
  border-radius: 10px;
  background: #fffdfa;
  font: inherit;
  color: #33302c;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kcalday .kcalnum {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #33302c;
}
.kdot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.kcalday.has .kdot {
  background: #e5484d;
}
.kcalday:hover {
  background: #fff5ee;
}
.kcalday.today {
  border-color: #f0b8a6;
  background: #fff6f1;
}
.kcalday.picked {
  border-color: var(--coral-deep);
  background: #fff2ea;
  box-shadow: 0 0 0 2px rgba(236, 111, 79, 0.16);
}
.kcalhint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #8a8177;
}
@media (max-width: 420px) {
  .kcalgrid,
  .kcalweek {
    gap: 4px;
  }
  .kcalday,
  .kcalblank {
    height: 38px;
  }
  .kcalday .kcalnum {
    font-size: 12px;
  }
}

/* ============================================================
   账号锁定页：套餐/试用到期后整页盖住，只能买套餐或接受邀请
   ============================================================ */
.lockscreen {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  padding: 28px 16px;
  background: linear-gradient(180deg, #fff8f3 0%, #fdf3ec 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lockcard {
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: #fffdfa;
  border: 1.5px solid #f0dfd2;
  border-radius: 20px;
  padding: 26px 22px 20px;
  box-shadow: 0 16px 48px rgba(196, 120, 82, 0.14);
  text-align: center;
}
.lockicon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 6px;
}
.lockcard h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: #2c2a28;
}
.lockwhy {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #7a6a5f;
}
.locksec {
  text-align: left;
  padding: 14px 0;
  border-top: 1px dashed #f0e0d3;
}
.locksec > b {
  display: block;
  font-size: 13.5px;
  color: #3a332d;
  margin-bottom: 10px;
}
.lockplans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lockplan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid #f3d9c9;
  border-radius: 12px;
  background: #fff7f1;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lockplan:hover {
  background: #fff1e7;
  border-color: var(--coral);
}
.lockplan .lpname {
  font-size: 13.5px;
  font-weight: 700;
  color: #33302c;
}
.lockplan .lpprice {
  font-size: 12px;
  color: #9a6a4f;
}
.lockhint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #8a8177;
}
.lockacts {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 14px;
  border-top: 1px dashed #f0e0d3;
}
@media (max-width: 420px) {
  .lockplans {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   布局改版：顶栏固定 + 右侧每个卡片内部滚动
   （页面本身不再滚动，滚动条只出现在当前卡片右侧，不会让顶栏右侧缺一块）
   ============================================================ */
.console-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.console-page > .topbar {
  flex: none;
}
.console-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  align-items: stretch;
  padding: 20px 20px 18px;
}
.sidenav {
  position: static;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.panels {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panels > .card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 0;
  scrollbar-gutter: stable;
}
.panels > #inbox {
  flex: none;
}
/* 卡片内的滚动条：细一点，圆角，不抢视觉 */
.panels > .card::-webkit-scrollbar,
.sidenav::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.panels > .card::-webkit-scrollbar-thumb,
.sidenav::-webkit-scrollbar-thumb {
  background: #e2d5c7;
  border-radius: 8px;
}
.panels > .card::-webkit-scrollbar-thumb:hover,
.sidenav::-webkit-scrollbar-thumb:hover {
  background: #d3c1ae;
}
.panels > .card::-webkit-scrollbar-track,
.sidenav::-webkit-scrollbar-track {
  background: transparent;
}
@media (max-width: 860px) {
  .console-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 10px 8px;
  }
  .sidenav {
    position: static;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* 套餐卡片：一行两张 */
.plancards {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
  .plancards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   消息中心：右上角铃铛 + 下拉列表
   ============================================================ */
.notifwrap {
  position: relative;
  flex: none;
}
.notifbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.notifbtn:hover {
  background: #fff7f0;
}
.nbadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.nbadge.hide {
  display: none !important;
}
.notifpanel {
  position: absolute;
  top: 44px;
  right: 0;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(80, 55, 35, 0.18);
  z-index: 60;
  padding: 8px;
}
.notifpanel.hide {
  display: none !important;
}
.notifhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
  border-bottom: 1px solid #f4ece3;
  margin-bottom: 6px;
}
.notifhead b {
  font-size: 13.5px;
  color: #33302c;
}
.notifhead button {
  border: 0;
  background: transparent;
  color: var(--coral-deep, #c85a3a);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.notifempty {
  padding: 22px 10px;
  text-align: center;
  font-size: 12.5px;
  color: #9a928a;
}
.notifitem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}
.notifitem:hover {
  background: #fff7f0;
}
.notifitem.unread {
  background: #fff9f4;
}
.notifico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #f7efe7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.notifbody {
  min-width: 0;
  flex: 1 1 auto;
}
.notifbody b {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: #2f2b27;
  line-height: 1.45;
}
.notifbody span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #8a8177;
  line-height: 1.5;
}
.notifmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.notifmeta i {
  font-style: normal;
  font-size: 11px;
  color: #a8a09a;
}
/* 消息中心的小提示（全部已读的反馈） */
.notiftoast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: rgba(38, 34, 30, 0.92);
  color: #fff;
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1300;
}
.notiftoast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.nstate {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: #f4efe9;
  color: #8a7f76;
  font-weight: 650;
}
.nstate.is-waiting {
  background: #fff5e6;
  color: #b8730f;
}
.nstate.is-review {
  background: #e9f4ff;
  color: #1f6fb2;
}
.nstate.is-done {
  background: #e8f7f2;
  color: #0b7d70;
}
.nstate.is-revoked {
  background: #f2f2f2;
  color: #8d8d8d;
}
/* 已取消/已撤销的消息压暗一点，一眼能看出这条不用再管 */
.notifitem.is-revoked .notifbody b {
  color: #8d857f;
}
.notifgo {
  font-size: 11.5px;
  font-weight: 650;
  color: #0b7d70;
}
.notifdot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5484d;
  margin-top: 11px;
}

/* 锁号弹窗层级：顶栏（含消息中心）仍然可用，弹窗盖在内容区上 */
.console-page > .topbar {
  position: relative;
  z-index: 400;
}
.lockscreen {
  z-index: 300;
  padding-top: 76px;
}
.notifpanel {
  z-index: 1200;
}

/* 消息面板挂在 body 下（fixed 定位），不被顶栏的横向滚动裁掉 */
.notifpanel {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 480px);
}