/* console.css —— 控制台视图（大人用）：信息密度优先，不追求童趣 */

#view-console { max-width: 980px; padding-bottom: 60px; }

.console-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
}

.console-title { font-size: 32px; font-weight: 800; color: var(--yellow); margin-right: auto; }

.countdown-pill {
  font-size: 21px;
  font-weight: 700;
  color: var(--teal);
  background: rgba(77, 216, 192, .12);
  border: 2px solid rgba(77, 216, 192, .4);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-variant-numeric: tabular-nums;
}

.countdown-pill.urgent { color: var(--red); border-color: rgba(255, 90, 90, .5); background: rgba(255, 90, 90, .1); }

.console-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.stat-chip {
  font-size: 20px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--card-line);
}

.stat-chip b { color: var(--yellow); font-size: 24px; }

.tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tab {
  padding: 0 22px;
  background: rgba(255, 255, 255, .07);
  color: var(--ink);
  border: 2px solid var(--card-line);
  box-shadow: none;
  font-size: 22px;
  position: relative;
}

.tab.active {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: #3a2800;
  box-shadow: var(--glow);
}

.tab .badge {
  position: absolute;
  top: -10px;
  right: -8px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--red);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.panel {
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--card-line);
  padding: 20px;
}

.panel h3 {
  font-size: 24px;
  color: var(--yellow);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel .empty { font-size: 21px; color: var(--ink-dim); padding: 14px 4px; }

/* 事件 / 券 行 */
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 21px;
}

.row:last-child { border-bottom: none; }

.row .r-time { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.row .r-type { font-weight: 800; }
.row .r-type.plus { color: var(--teal); }
.row .r-type.minus-mark { color: var(--orange); }
.row .r-note { color: var(--ink-dim); flex: 1; min-width: 120px; }
.row .r-delta { font-weight: 900; color: var(--yellow); font-variant-numeric: tabular-nums; }
.row .r-actions { display: flex; gap: 10px; margin-left: auto; }

.row .r-actions button { padding: 0 18px; font-size: 21px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
}

/* 批次F ②：浅草地底下加深文字色（面板/文字其余走 :root 浅底变量自动适配） */
.chip.pending { color: #0F8F7D; background: rgba(77, 216, 192, .18); }
.chip.fulfilled { color: #8A5A16; background: rgba(255, 201, 77, .2); }
.chip.expired { color: var(--ink-dim); background: rgba(255, 255, 255, .4); }
.chip.cancelled { color: #D63A3A; background: rgba(255, 90, 90, .12); }

/* 表单区 */
.form-block {
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  padding: 18px;
  margin-bottom: 16px;
}

.form-block h4 { font-size: 22px; color: var(--teal); margin-bottom: 12px; }

.form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.form-row label { font-size: 21px; min-width: 110px; }

.form-row .hint { font-size: 20px; color: var(--ink-dim); }

.btn-pick {
  padding: 0 20px;
  font-size: 21px;
  background: rgba(255, 255, 255, .55); /* 批次F ② */
  color: var(--ink);
  border: 2px solid var(--card-line);
  box-shadow: none;
}

.btn-pick.active {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: #3a2800;
  border-color: transparent;
}

/* 规则编辑 */
.rule-group { margin-bottom: 18px; }

.rule-group h4 { font-size: 22px; color: var(--teal); margin-bottom: 10px; }

.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.rule-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border-radius: 16px;
  padding: 10px 14px;
}

.rule-field label { font-size: 20px; }

.rule-field input {
  min-height: 56px;
  width: 110px;
  text-align: center;
  font-size: 21px;
  border-radius: 12px;
}

/* 数字键盘（门控 / PIN） */
.gate-title { font-size: 30px; font-weight: 800; }

.gate-sub { font-size: 21px; color: var(--ink-dim); margin-top: 6px; }

.gate-question {
  font-size: 44px;
  font-weight: 900;
  color: var(--yellow);
  margin: 18px 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gate-answer {
  font-size: 32px;
  font-weight: 800;
  min-height: 72px;
  width: 100%;
  text-align: center;
  letter-spacing: 8px;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 18px 0 20px;
}

.pin-dots .pdot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35);
}

.pin-dots .pdot.filled {
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 201, 77, .7);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.keypad .key {
  min-height: 82px;
  font-size: 32px;
  font-weight: 800;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
  border: 2px solid var(--card-line);
  box-shadow: none;
}

.keypad .key:active { transform: scale(.96); }

.gate-msg { font-size: 21px; min-height: 30px; margin-top: 14px; color: var(--red); font-weight: 700; }
.gate-msg.ok { color: var(--teal); }

.gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  box-shadow: none;
}

/* v2.0 批次D 铁律③：hydrateIcons 产出的 svg 无宽高属性，不给尺寸会渲染成 0×0
   （现存 bug 一行修复——与图鉴页 #bows-close svg 同口径） */
.gate-close svg { width: 28px; height: 28px; }

.modal-box { position: relative; }

/* 数据面板 */
.data-actions { display: flex; flex-direction: column; gap: 14px; }
.data-actions button { width: 100%; }

.data-result {
  margin-top: 14px;
  font-size: 20px;
  color: var(--ink-dim);
  white-space: pre-wrap;
  text-align: left;
}

/* ============================================================================
   v2.2 奖券设置（控制台规则页）
   每行：启用勾选 + 样式色块预览 + 券名 + 积分输入
   色块与 kid.css 的 .vstyle-* 保持同色系（只做小方块预览，不复制整张券）
   ============================================================================ */
.vgrid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.vrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 2px solid var(--card-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .45);
}
.vrow.on { border-color: #7BAF4E; background: rgba(123, 175, 78, .10); }
.vchk { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; cursor: pointer; }
.vchk input[type="checkbox"] { width: 26px; height: 26px; }
.vsw {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.vname { min-width: 84px; }
/* 🔴 v2.3：券名自定义输入框（Jeff 12:15 定） */
.vtitle {
  width: 150px;
  font-size: 20px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 10px;
  border: 2px solid var(--card-line);
  background: rgba(255, 255, 255, .8);
  color: var(--ink);
}
.vtitle:focus { border-color: #7BAF4E; outline: none; }
.vnum { display: flex; align-items: center; gap: 8px; font-size: 19px; margin-left: auto; }
.vnum input { width: 96px; font-size: 20px; padding: 6px 10px; }
.vhint { margin-top: 10px; font-size: 17px; color: rgba(74, 54, 40, .72); }

/* 样式色块（与 kid.css .vstyle-* 同色系） */
.vstyle-preview-default        { background: linear-gradient(165deg, #FFF3D0, #F5C860); }
.vstyle-preview-red            { background: linear-gradient(165deg, #FFE4E4, #E87A7A); }
.vstyle-preview-orange         { background: linear-gradient(165deg, #FFEEDC, #F09A4D); }
.vstyle-preview-green          { background: linear-gradient(165deg, #E4F8E4, #6FC46F); }
.vstyle-preview-teal           { background: linear-gradient(165deg, #DDF6F3, #59C4B7); }
.vstyle-preview-blue           { background: linear-gradient(165deg, #E3EEFF, #7DA9ED); }
.vstyle-preview-purple         { background: linear-gradient(165deg, #F0E6FF, #A483E8); }
.vstyle-preview-pink           { background: linear-gradient(165deg, #FFE8F4, #F58CC4); }
.vstyle-preview-metallic_gold  { background: linear-gradient(150deg, #FFF6D8, #F5D46A 40%, #C08F12); }
.vstyle-preview-metallic_silver{ background: linear-gradient(150deg, #F7F9FC, #D6DCE6 40%, #8C96A6); }
.vstyle-preview-sparkle        { background: radial-gradient(circle at 30% 30%, #FFF, #FFE9A8 60%, #F5D179); }
.vstyle-preview-rainbow        { background: linear-gradient(150deg, #FF9AA2, #FFE07A 35%, #A8E6A1 60%, #8ED9F0 78%, #D9A8F0); }
.vstyle-preview-starry         { background: radial-gradient(circle at 35% 30%, #6A6AAE, #1C1C4E 70%, #101034); }

/* 商店卡片顶部的花色细条（让孩子对上券包里的那张） */
.shop-card .sc-swatch {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #E8D9B8;
}
.shop-card.vstyle-default .sc-swatch  { background: linear-gradient(90deg, #FFF3D0, #F5C860); }
.shop-card.vstyle-red .sc-swatch      { background: linear-gradient(90deg, #FFE4E4, #E87A7A); }
.shop-card.vstyle-orange .sc-swatch   { background: linear-gradient(90deg, #FFEEDC, #F09A4D); }
.shop-card.vstyle-green .sc-swatch    { background: linear-gradient(90deg, #E4F8E4, #6FC46F); }
.shop-card.vstyle-teal .sc-swatch     { background: linear-gradient(90deg, #DDF6F3, #59C4B7); }
.shop-card.vstyle-blue .sc-swatch     { background: linear-gradient(90deg, #E3EEFF, #7DA9ED); }
.shop-card.vstyle-purple .sc-swatch   { background: linear-gradient(90deg, #F0E6FF, #A483E8); }
.shop-card.vstyle-pink .sc-swatch     { background: linear-gradient(90deg, #FFE8F4, #F58CC4); }
.shop-card.vstyle-metallic_gold .sc-swatch   { background: linear-gradient(90deg, #FFF6D8, #F5D46A 45%, #C08F12); }
.shop-card.vstyle-metallic_silver .sc-swatch { background: linear-gradient(90deg, #F7F9FC, #D6DCE6 45%, #8C96A6); }
.shop-card.vstyle-sparkle .sc-swatch  { background: radial-gradient(circle at 40% 50%, #FFF, #FFE9A8 60%, #F5D179); }
.shop-card.vstyle-rainbow .sc-swatch  { background: linear-gradient(90deg, #FF9AA2, #FFE07A 30%, #A8E6A1 55%, #8ED9F0 78%, #D9A8F0); }
.shop-card.vstyle-starry .sc-swatch   { background: radial-gradient(circle at 40% 50%, #6A6AAE, #1C1C4E 70%, #101034); }

/* v2.4 控制台券缩略图（替代纯色块） */
.vsw-img {
  width: 62px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, .16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* 🔴 v2.4：4 风格族的兜底色块（有 PNG 时走 .vsw-img，无 art 时才用本类） */
.vstyle-preview-pixel   { background: linear-gradient(150deg, #2E6E6A, #14504D); }
.vstyle-preview-cute    { background: linear-gradient(150deg, #DCEEE2, #A8D8BE); }
.vstyle-preview-game    { background: linear-gradient(150deg, #3A5FCF, #1C2E6E); }
.vstyle-preview-classic { background: linear-gradient(150deg, #D9B96C, #8A5A16); }

/* ============================================================================
   v2.5 安全设置（改密码）—— 数据 Tab 顶部
   ============================================================================ */
.sec-card {
  border: 2px solid var(--card-line);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .5);
  margin-bottom: 20px;
}
.sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sec-row label {
  width: 90px;
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.sec-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid var(--card-line);
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
}
.sec-row input:focus { border-color: #7BAF4E; outline: none; }
.sec-hint {
  margin-top: 10px;
  font-size: 16px;
  color: rgba(74, 54, 40, .7);
}
#pin-change { margin-top: 4px; }

/* 首次设置密码 / 常规门控 共用（复用 gate 样式） */
.gate-title { font-size: 24px; font-weight: 900; color: var(--accent-ink); }
.gate-sub { font-size: 18px; color: rgba(74,54,40,.78); margin: 6px 0 14px; }

/* ============================================================
   v3.1 关于卡片（作者署名）
   🔴 设计原则：不做推广语、不要二维码、不要行动号召。
      只回答一个问题「这东西是谁做的」，克制才可信。
   ============================================================ */
.about-card {
  margin: 4px 0 8px;
  padding: 16px 18px;
  background: #FAF7F0;
  border: 1px solid #E5DCCC;
  border-left: 4px solid #7BAF4E;
  border-radius: 12px;
}

.about-name {
  font-size: 18px;
  font-weight: 700;
  color: #2E4A22;
  margin-bottom: 4px;
}

.about-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: #6B6152;
  margin-bottom: 10px;
}

.about-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: #4A3628;
}

.about-row span {
  flex: 0 0 56px;
  color: #8A8074;
}

.about-row b {
  font-weight: 600;
  color: #2E4A22;
  word-break: break-all;
}

.about-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #DCD3C3;
  font-size: 13px;
  line-height: 1.65;
  color: #7A7064;
}

/* v3.2 关于卡片底部：构建版本号（查 bug 用，弱化显示） */
.about-version {
  margin-top: 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #A39A8C;
  letter-spacing: 0.2px;
  word-break: break-all;
}