/* ==========================================================================
   大屏查分模式（/kiosk）
   面向校园触控大屏（1080p / 4K，横屏或竖屏）的公共自助查分终端样式。

   设计约定：
     · 尺寸全部用 clamp() + vw/vh 双基准，同一套样式在 1080p 与 4K 上都成立；
     · 触控优先：键盘按键 ≥ 72px、其它可点区域 ≥ 64px，按压态用 transform 反馈，
       不依赖 hover；禁用文字选择与双击缩放，避免大屏误操作；
     · 待机态用 flex 布局吃掉整屏高度（.kiosk 固定 100dvh + overflow:hidden），
       1920×1080 下不出现滚动条；只有科目网格与结果明细允许内部纵向滚动；
     · 一屏一科：第一屏是科目选择（老师装机时选定），结果页只讲这一个科目；
     · 颜色只用语义 token（tokens.css），自动适配浅色/深色主题。

   类名前缀统一为 kiosk-*：
     容器        .kiosk / .kiosk__stage / .kiosk-view（--idle/--loading/--result/--panel）
     标题        .kiosk-head（__mark/__text/__title/__sub）
     输入字段    .kiosk-fields（.is-shake）/ .kiosk-field（.is-active/__head/__label/__hint）
     数字槽      .kiosk-display（__hint，含 .is-gentle）/ .kiosk-slots（--id/--pw/.is-dense/.is-busy）
                 .kiosk-slot（.is-filled/.is-caret/.is-dot）
     触摸键盘    .kiosk-pad（--busy/__keys）/ .kiosk-key（--util/__glyph/__sub）
                 .kiosk-submit（__text/__hint/.is-ready/:disabled）
     加载        .kiosk-loading（__spinner/__title/__username/__subject）
     结果        .kiosk-result-head / .kiosk-student（__name/__meta）
                 .kiosk-countdown（__track/__fill/__text）/ .kiosk-result-body
                 .kiosk-hero（--slim/__main/__label/__value/__unit/__aside/__facts/__side*）
                 .kiosk-block（__title）/ .kiosk-subjects / .kiosk-subject-card（__name/__score）
                 .kiosk-sumline（__label/__value/__sep）
                 .kiosk-records / .kiosk-record（__icon/__reason/__meta/__score）/ .kiosk-empty
                 .kiosk-coupons / .kiosk-coupon（__icon/__body/__name/__title/__meta/__note/__action）
                 .kiosk-chip（--brand/--warning/--danger/--neutral）
                 .kiosk-actions / .kiosk-action（--primary）
     浮层        .kiosk-banner（--success/--danger/__icon/__text）
                 .kiosk-sheet（__panel/__icon/__title/__desc/__note/__actions）
     面板        .kiosk-panel（--warning/--danger/__icon/__title/__desc/__extra/__actions）
     退出        .kiosk-exit

   v4.2.0 结果页重做（§24–§29，详见文件末尾）：
     卡片        .kiosk-card（__head/__body/__nav）—— 毛玻璃；正文滚动、按钮常驻
     按钮行      .kiosk-tab（.is-active/__label）/ .kiosk-tool / .kiosk-back
     总览·主区   .kiosk-overview / .kiosk-prime（__label/__title/__tag/__row/__value/__unit/__stats/__stat）
                 .kiosk-dot（.is-add/.is-deduct）/ .kiosk-record--compact
     总览·次区   .kiosk-second（__head/__label/__total/__count）/ .kiosk-subjects--compact
     细分视图    .kiosk-detail（__head/__icon/__text/__title/__note/__hero/__hero--soft/__value/__unit/__hero-note）
                 .kiosk-srows / .kiosk-srow（__subject/__reason/__meta/__score）
     兑换券      .kiosk-balance（__icon/__label/__value/__unit）/ .kiosk-cblock（__title）
                 .kiosk-store-list / .kiosk-store（.is-locked/__head/__name/__types/__desc/__note/__meta/__foot/__price/__hint）
                 .kiosk-buy / .kiosk-chip--success / .kiosk-chip--info

    v4.7.0 幸运大转盘（§30，详见文件末尾）：
      抽奖视图    .kiosk-wheel（--empty）/ .kiosk-wheel__wallet（__icon/__label/__value/__unit）
                  .kiosk-wheel__tabs（-inner）/ .kiosk-wheel__tab
                  .kiosk-wheel__board / __disc / __canvas / __pointer / __hub（__icon/__text）
                  .kiosk-wheel__result（--win/--thanks/--warn/__icon/__text/__title/__note）
                  .kiosk-wheel__spin（:disabled）/ .kiosk-wheel__hint（.is-warning）
                  .kiosk-wheel__legend-block / .kiosk-wheel__legend（-item/__legend-dot/__legend-label/__legend-kind）

   历史遗留（v4.1.0 起新流程不再渲染，保留样式以备回退）：
     科目选择与单科目结果    .kiosk-pick* / .kiosk-pick-empty / .kiosk-subject-bar / .kiosk-switch
                            .kiosk-subject-tag / .kiosk-stats / .kiosk-stat
     v4.1.0 结果页旧结构（v4.2.0 已不再渲染，保留样式以备回退）
                            .kiosk-result-body / .kiosk-block（__title）/ .kiosk-hero*
                            .kiosk-sumline*
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面容器与状态
   -------------------------------------------------------------------------- */
.kiosk {
  /* 本页局部尺寸变量：纵向节奏看 vh，横向尺寸看 vw，保证横竖屏都端正 */
  --kiosk-gap: clamp(7px, 1.3vh, 22px);
  --kiosk-radius: clamp(9px, 0.79vw, 20px);
  --kiosk-text-secondary: clamp(9px, min(0.94vw, 1.37vh), 19px);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--text-primary);
  background-color: var(--bg-app);
  background-image: var(--bg-app-gradient);
  /* 大屏是公共终端：禁止选中文本与双击缩放，避免学生误拖拽/误缩放 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kiosk__stage {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.kiosk-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kiosk-gap);
  min-height: 0;
  width: 100%;
  padding: clamp(15px, 2.2vh, 38px) clamp(16px, 2.7vw, 61px) clamp(16px, 2.4vh, 41px);
}

/* 待机态：从上到下铺开（键盘区吃掉剩余高度），保证一屏之内不滚动 */
.kiosk-view--idle {
  justify-content: flex-start;
}

/* 结果态：纵向节奏略紧，给单科目明细留更多空间 */
.kiosk-view--result {
  --kiosk-gap: clamp(6px, 1.01vh, 19px);
}

/* 加载态：数字槽已锁定，禁止误触 */
.kiosk-view--loading .kiosk-slots {
  pointer-events: none;
}

.kiosk-view--panel {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/*
 * 路由入场动画默认带 translateY(12px)，会让 100dvh 的容器瞬间多出一截可滚动空间
 * （大屏上会出现一闪而过的竖向滚动条）。全屏终端改为纯淡入。
 */
.kiosk.page-enter {
  animation: fade-in var(--dur-normal) var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   2. 顶部站点标题（待机 / 加载共用，切换状态时标题不跳位）
   -------------------------------------------------------------------------- */
.kiosk-head {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.01vw, 23px);
  flex: 0 0 auto;
}

.kiosk-head__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(35px, 4.75vh, 75px);
  height: clamp(35px, 4.75vh, 75px);
  border-radius: clamp(9px, 0.72vw, 20px);
  background: var(--fill-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.kiosk-head__mark svg {
  width: clamp(17px, 2.45vh, 39px);
  height: clamp(17px, 2.45vh, 39px);
}

.kiosk-head__text {
  min-width: 0;
}

.kiosk-head__title {
  font-size: clamp(16px, min(1.87vw, 2.74vh), 45px);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.kiosk-head__sub {
  margin-top: clamp(1px, 0.43vh, 7px);
  font-size: clamp(10px, min(1.08vw, 1.58vh), 24px);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   3. 科目选择态（本机第一屏：老师在这里选定这台大屏查哪个科目）
   -------------------------------------------------------------------------- */
.kiosk-view--pick {
  --kiosk-gap: clamp(6px, 1.01vh, 19px);
}

/* 说明文字：一行说清"谁来选、什么时候要重选" */
.kiosk-pick__desc {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
  font-size: clamp(10px, min(1.08vw, 1.58vh), 24px);
  color: var(--text-secondary);
}

.kiosk-pick__desc svg {
  flex: 0 0 auto;
  width: clamp(12px, min(1.15vw, 1.73vh), 26px);
  height: clamp(12px, min(1.15vw, 1.73vh), 26px);
  color: var(--brand-500);
}

/* 从 422（科目缺失/非法）或失效科目回来时的提示语 */
.kiosk-pick__hint {
  flex: 0 0 auto;
  font-size: clamp(11px, min(1.15vw, 1.73vh), 26px);
  font-weight: 620;
  color: var(--warning);
}

/* 科目网格：科目多时容器内部纵向滚动，页面本身仍然不滚动 */
.kiosk-pick {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(173px, 18.72vw, 446px)), 1fr));
  /* 触控硬要求：每个科目按钮不低于 72px */
  grid-auto-rows: minmax(clamp(72px, 8.64vh, 158px), auto);
  gap: clamp(7px, 0.86vw, 22px);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: clamp(518px, 60.48vw, 1656px);
  margin-inline: auto;
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}

.kiosk-pick__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.72vw, 17px);
  min-height: clamp(72px, 8.64vh, 158px);
  padding: clamp(7px, 1.15vh, 20px) clamp(12px, 1.3vw, 30px);
  border: 2px solid var(--border-default);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 按压态：缩放 + 品牌色（大屏没有 hover，反馈必须落在 :active 上） */
.kiosk-pick__item:active {
  transform: scale(0.965);
  border-color: var(--brand-400);
  background: var(--bg-active);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}

.kiosk-pick__item:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

.kiosk-pick__name {
  min-width: 0;
  font-size: clamp(19px, min(2.16vw, 3.31vh), 56px);
  font-weight: 700;
  line-height: 1.15;
}

.kiosk-pick__go {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--brand-500);
}

.kiosk-pick__go svg {
  width: clamp(16px, min(1.73vw, 2.59vh), 43px);
  height: clamp(16px, min(1.73vw, 2.59vh), 43px);
}

/* 科目为空（老师还没建科目）：居中放友好面板，面板样式复用 .kiosk-panel */
.kiosk-pick-empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   4. 待机态：当前科目 + 切换科目
   -------------------------------------------------------------------------- */
.kiosk-subject-bar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.79vw, 19px);
  width: 100%;
  max-width: clamp(518px, 60.48vw, 1656px);
  margin-inline: auto;
}

.kiosk-subject-bar__current {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

/* 当前科目用框架的 badge，这里按大屏放大 */
.kiosk-subject-bar .badge {
  gap: clamp(2px, 0.29vw, 6px);
  padding: clamp(3px, 0.5vh, 10px) clamp(7px, 0.79vw, 20px);
  font-size: clamp(10px, min(1.08vw, 1.66vh), 24px);
}

.kiosk-subject-bar .badge svg {
  width: clamp(11px, min(1.08vw, 1.66vh), 24px);
  height: clamp(11px, min(1.08vw, 1.66vh), 24px);
}

/* 切换科目：触控硬要求 ≥ 72px，回到科目选择界面 */
.kiosk-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 13px);
  min-height: clamp(72px, 6.19vh, 108px);
  padding: 0 clamp(13px, 1.3vw, 32px);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-size: clamp(12px, min(1.22vw, 1.87vh), 27px);
  font-weight: 660;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-switch svg {
  flex: 0 0 auto;
  width: clamp(14px, min(1.44vw, 2.16vh), 32px);
  height: clamp(14px, min(1.44vw, 2.16vh), 32px);
  color: var(--brand-500);
}

.kiosk-switch:active {
  transform: scale(0.96);
  border-color: var(--brand-400);
  background: var(--bg-active);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}

.kiosk-switch:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. 待机输入态：学号数字槽
   -------------------------------------------------------------------------- */
.kiosk-display {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.01vh, 16px);
  width: 100%;
}

/* 空学号却点了查询：轻微左右抖动，提示"还没输入" */
.kiosk-display.is-shake {
  animation: shake-x 440ms var(--ease-out) both;
}

.kiosk-slots {
  --slot-w: clamp(30px, 3.89vw, 95px);
  --slot-h: clamp(42px, 6.19vh, 108px);
  --slot-font: clamp(20px, min(2.59vw, 4.32vh), 62px);

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(3px, 0.5vw, 12px);
  width: 100%;
}

/* 位数很多（>8）时整体缩小，保证 12 位也排得下、不撑破一行 */
.kiosk-slots.is-dense {
  --slot-w: clamp(22px, 2.59vw, 62px);
  --slot-h: clamp(30px, 4.32vh, 76px);
  --slot-font: clamp(14px, min(1.87vw, 3.17vh), 42px);
}

.kiosk-slot {
  display: grid;
  place-items: center;
  flex: 0 1 var(--slot-w);
  width: var(--slot-w);
  height: var(--slot-h);
  border: 2px solid var(--border-subtle);
  border-radius: clamp(6px, 0.65vw, 17px);
  background: transparent;
  font-size: var(--slot-font);
  font-weight: 720;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 已输入的位：实心 + 品牌色描边，远距离也能一眼数清位数 */
.kiosk-slot.is-filled {
  border-color: var(--brand-300);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* 下一个待输入位：光标闪烁 */
.kiosk-slot.is-caret {
  border-color: var(--brand-500);
  background: var(--bg-active);
  box-shadow: 0 0 0 clamp(1px, 0.22vw, 6px) color-mix(in srgb, var(--brand-500) 16%, transparent);
  animation: kiosk-caret-blink 1.1s var(--ease-in-out) infinite;
}

/* 查询中：数字槽转为"已锁定"的静默状态 */
.kiosk-slots.is-busy .kiosk-slot {
  opacity: 0.55;
  animation: none;
}

.kiosk-display__hint {
  font-size: clamp(11px, min(1.15vw, 1.73vh), 26px);
  color: var(--text-secondary);
  text-align: center;
}

.kiosk-display__hint.is-warn {
  color: var(--warning);
  font-weight: 620;
}

.kiosk-display__hint.is-busy {
  color: var(--brand-500);
  font-weight: 620;
}

@keyframes kiosk-caret-blink {
  0%, 100% { border-color: var(--brand-500); opacity: 1; }
  50% { border-color: color-mix(in srgb, var(--brand-500) 22%, transparent); opacity: 0.66; }
}

/* --------------------------------------------------------------------------
   6. 待机输入态：触摸数字键盘 + 查询按钮
   -------------------------------------------------------------------------- */
.kiosk-pad {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(clamp(130px, 14.4vw, 288px), 0.44fr);
  gap: clamp(6px, 0.79vw, 20px);
  align-content: center;
  min-height: 0;
  width: 100%;
  max-width: clamp(518px, 60.48vw, 1656px);
  margin-inline: auto;
}

/* 加载态：键盘区换成大转圈，同样居中 */
.kiosk-pad--busy {
  align-content: center;
}

.kiosk-pad__keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 0.79vw, 20px);
  min-height: 0;
}

.kiosk-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.29vh, 7px);
  /* 触控硬要求：按键高度不低于 72px */
  min-height: clamp(72px, 8.64vh, 158px);
  padding: clamp(4px, 0.72vh, 13px);
  border: 2px solid var(--border-default);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-size: clamp(20px, min(2.45vw, 3.89vh), 56px);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 按压态：缩放 + 品牌色，触屏没有 hover，反馈必须落在 :active / .is-pressed 上 */
.kiosk-key:active,
.kiosk-key.is-pressed {
  transform: scale(0.955);
  border-color: var(--brand-400);
  background: var(--bg-active);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}

.kiosk-key:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* 功能键（清空 / 退格）：字号小一些、颜色弱一些，避免抢数字键的视觉 */
.kiosk-key--util {
  font-size: clamp(14px, min(1.73vw, 2.45vh), 35px);
  color: var(--text-secondary);
}

.kiosk-key__glyph {
  display: block;
}

.kiosk-key__sub {
  font-size: clamp(9px, min(0.94vw, 1.44vh), 20px);
  font-weight: 560;
  color: var(--text-tertiary);
}

/* 查询按钮：跨满键盘右侧（竖屏时跨满整行），是最显眼的主操作 */
.kiosk-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.72vh, 13px);
  min-height: clamp(72px, 8.64vh, 158px);
  padding: clamp(7px, 1.15vh, 20px) clamp(10px, 1.15vw, 26px);
  border: none;
  border-radius: var(--kiosk-radius);
  background: var(--fill-brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-submit:active {
  transform: scale(0.972);
  filter: brightness(1.06);
  box-shadow: var(--shadow-md);
}

.kiosk-submit:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 4px;
}

.kiosk-submit svg {
  width: clamp(22px, min(2.59vw, 4.03vh), 58px);
  height: clamp(22px, min(2.59vw, 4.03vh), 58px);
}

.kiosk-submit__text {
  font-size: clamp(19px, min(2.3vw, 3.6vh), 52px);
  font-weight: 720;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.kiosk-submit__hint {
  font-size: clamp(9px, min(0.86vw, 1.3vh), 17px);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   7. 加载态（保留待机态的骨架，只把键盘换成大转圈）
   -------------------------------------------------------------------------- */
.kiosk-loading {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.44vh, 26px);
  min-height: 0;
  text-align: center;
}

.kiosk-loading__spinner {
  display: grid;
  place-items: center;
}

/* 复用框架的 .spinner，这里按屏幕尺寸放大（选择器权重更高，可覆盖固定宽高） */
.kiosk-loading__spinner .spinner {
  width: clamp(39px, min(5.04vw, 6.48vh), 115px);
  height: clamp(39px, min(5.04vw, 6.48vh), 115px);
  border-width: clamp(3px, 0.43vw, 10px);
}

.kiosk-loading__title {
  font-size: clamp(17px, min(2.16vw, 3.17vh), 48px);
  font-weight: 700;
}

.kiosk-loading__username {
  font-size: clamp(11px, min(1.15vw, 1.73vh), 23px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 查询中也要让学生/老师看得见当前查的是哪个科目 */
.kiosk-loading__subject {
  font-size: clamp(12px, min(1.22vw, 1.87vh), 26px);
  font-weight: 660;
  color: var(--brand-500);
}

/* --------------------------------------------------------------------------
   8. 结果态（单科目：分数 / 排名 / 班级平均 / 差值 / 本学科加减分明细）
   -------------------------------------------------------------------------- */
.kiosk-result-head {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(7px, 1.15vw, 29px);
}

.kiosk-student {
  min-width: 0;
}

.kiosk-student__name {
  font-size: clamp(23px, min(3.31vw, 4.61vh), 78px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.kiosk-student__meta {
  margin-top: clamp(1px, 0.43vh, 9px);
  font-size: clamp(10px, min(1.08vw, 1.58vh), 23px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 科目名标签：结果页最显眼的信息之一（一屏只讲这一科） */
.kiosk-subject-tag {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
  margin-bottom: clamp(3px, 0.65vh, 12px);
  padding: clamp(3px, 0.58vh, 10px) clamp(9px, 0.94vw, 23px);
  border: 1px solid color-mix(in srgb, var(--brand-500) 32%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-600);
  font-size: clamp(15px, min(1.66vw, 2.45vh), 40px);
  font-weight: 740;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.kiosk-subject-tag svg {
  flex: 0 0 auto;
  width: clamp(13px, min(1.44vw, 2.16vh), 35px);
  height: clamp(13px, min(1.44vw, 2.16vh), 35px);
}

.kiosk-subject-tag__name {
  min-width: 0;
}

/* 自动返回倒计时（隐私保护）：进度条 + 剩余秒数 */
.kiosk-countdown {
  flex: 0 1 clamp(144px, 18.72vw, 403px);
  min-width: clamp(130px, 15.84vw, 317px);
}

.kiosk-countdown__track {
  height: clamp(7px, 1.01vh, 19px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  overflow: hidden;
}

.kiosk-countdown__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--fill-brand);
  transition: width 220ms linear;
}

.kiosk-countdown__text {
  margin-top: clamp(3px, 0.58vh, 10px);
  font-size: clamp(10px, min(1.01vw, 1.51vh), 22px);
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kiosk-result-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(7px, 1.15vh, 20px);
  min-height: 0;
  /* 只有结果区内部滚动，页面本身不滚动 */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}

.kiosk-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.44vw, 37px);
  padding: clamp(10px, 1.58vh, 30px) clamp(13px, 1.73vw, 42px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(10px, 1.01vw, 26px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.kiosk-hero__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(4px, 0.65vw, 16px);
  min-width: 0;
}

.kiosk-hero__label {
  font-size: clamp(10px, min(1.08vw, 1.58vh), 23px);
  color: var(--text-secondary);
}

.kiosk-hero__value {
  font-size: clamp(37px, min(5.76vw, 7.92vh), 151px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.kiosk-hero__value.is-positive { color: var(--success); }
.kiosk-hero__value.is-negative { color: var(--danger); }

.kiosk-hero__unit {
  font-size: clamp(12px, min(1.3vw, 1.87vh), 30px);
  color: var(--text-tertiary);
}

/* 右侧信息区：上面是排名 / 较平均两个徽章，下面是班级平均分 */
.kiosk-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(6px, 0.86vh, 16px);
}

/* 徽章容器（节点由 JS appendChild 进来，绝不进 html`` 模板） */
.kiosk-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 0.58vw, 13px);
}

/* 排名与差值用框架的 badge，这里按大屏放大 */
.kiosk-hero .badge {
  gap: clamp(2px, 0.29vw, 6px);
  padding: clamp(3px, 0.5vh, 10px) clamp(7px, 0.79vw, 20px);
  font-size: clamp(10px, min(1.08vw, 1.66vh), 24px);
}

.kiosk-hero .badge svg {
  width: clamp(11px, min(1.08vw, 1.66vh), 24px);
  height: clamp(11px, min(1.08vw, 1.66vh), 24px);
}

.kiosk-hero__side {
  display: flex;
  align-items: baseline;
  gap: clamp(3px, 0.58vw, 12px);
  padding: clamp(6px, 1.01vh, 17px) clamp(10px, 1.3vw, 27px);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.kiosk-hero__side-label {
  font-size: clamp(9px, min(0.94vw, 1.37vh), 20px);
  color: var(--text-secondary);
}

.kiosk-hero__side-value {
  font-size: clamp(22px, min(2.45vw, 3.6vh), 63px);
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kiosk-hero__side-unit {
  font-size: clamp(9px, min(0.94vw, 1.37vh), 20px);
  color: var(--text-tertiary);
}

.kiosk-block {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.86vh, 14px);
}

.kiosk-block__title {
  font-size: clamp(12px, min(1.22vw, 1.73vh), 26px);
  font-weight: 660;
  color: var(--text-secondary);
}

/* 本科目加减分概览：三张小卡片（加分 / 扣分 / 记录条数） */
.kiosk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(158px, 14.4vw, 346px)), 1fr));
  gap: clamp(7px, 0.79vw, 19px);
}

.kiosk-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(4px, 0.65vw, 14px);
  padding: clamp(7px, 1.15vh, 20px) clamp(10px, 1.15vw, 24px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(9px, 0.86vw, 22px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.kiosk-stat__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(22px, 2.74vh, 48px);
  height: clamp(22px, 2.74vh, 48px);
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.kiosk-stat__icon svg {
  width: clamp(12px, 1.51vh, 26px);
  height: clamp(12px, 1.51vh, 26px);
}

.kiosk-stat__icon.is-add {
  background: var(--success-soft);
  color: var(--success);
}

.kiosk-stat__icon.is-deduct {
  background: var(--danger-soft);
  color: var(--danger);
}

.kiosk-stat__label {
  font-size: clamp(10px, min(1.01vw, 1.51vh), 22px);
  color: var(--text-secondary);
}

.kiosk-stat__value {
  margin-left: auto;
  font-size: clamp(13px, min(1.37vw, 2.09vh), 33px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kiosk-stat__value.is-add { color: var(--success); }
.kiosk-stat__value.is-deduct { color: var(--danger); }

.kiosk-records {
  display: flex;
  flex-direction: column;
}

.kiosk-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 0.72vw, 17px);
  min-height: clamp(40px, 5.04vh, 86px);
  padding: clamp(4px, 0.72vh, 13px) clamp(6px, 0.72vw, 17px);
  border-bottom: 1px solid var(--border-subtle);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.kiosk-record:last-child {
  border-bottom: none;
}

.kiosk-record__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(24px, 2.88vh, 52px);
  height: clamp(24px, 2.88vh, 52px);
  border-radius: 50%;
}

.kiosk-record__icon svg {
  width: clamp(13px, 1.58vh, 29px);
  height: clamp(13px, 1.58vh, 29px);
}

.kiosk-record__icon.is-add {
  background: var(--success-soft);
  color: var(--success);
}

.kiosk-record__icon.is-deduct {
  background: var(--danger-soft);
  color: var(--danger);
}

.kiosk-record__reason {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(12px, min(1.22vw, 1.73vh), 26px);
  font-weight: 580;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-record__meta {
  flex: 0 1 auto;
  font-size: clamp(9px, min(0.86vw, 1.3vh), 19px);
  color: var(--text-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kiosk-record__score {
  flex: 0 0 auto;
  min-width: clamp(46px, 5.04vw, 122px);
  font-size: clamp(14px, min(1.58vw, 2.3vh), 40px);
  font-weight: 720;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kiosk-record__score.is-add { color: var(--success); }
.kiosk-record__score.is-deduct { color: var(--danger); }

.kiosk-empty {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
  padding: clamp(9px, 1.15vh, 22px) 0;
  font-size: clamp(11px, min(1.08vw, 1.58vh), 23px);
  color: var(--text-secondary);
}

.kiosk-empty svg {
  flex: 0 0 auto;
  width: clamp(13px, 1.58vh, 27px);
  height: clamp(13px, 1.58vh, 27px);
  color: var(--success);
}

/* --------------------------------------------------------------------------
   9. 结果态与面板的操作按钮
   -------------------------------------------------------------------------- */
.kiosk-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: clamp(7px, 0.86vw, 20px);
}

.kiosk-action {
  display: flex;
  flex: 1 1 clamp(144px, 17.28vw, 346px);
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.65vw, 14px);
  /* 触控硬要求：不小于 64px 高 */
  min-height: clamp(64px, 7.92vh, 137px);
  padding: clamp(7px, 1.01vh, 19px) clamp(12px, 1.3vw, 30px);
  border: 2px solid var(--border-default);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-size: clamp(14px, min(1.58vw, 2.3vh), 39px);
  font-weight: 660;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-action:active:not(:disabled) {
  transform: scale(0.972);
  border-color: var(--brand-400);
  box-shadow: var(--shadow-xs);
}

.kiosk-action:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

.kiosk-action--primary {
  border-color: transparent;
  background: var(--fill-brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}

.kiosk-action:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
}

.kiosk-action svg {
  flex: 0 0 auto;
  width: clamp(16px, min(1.73vw, 2.45vh), 42px);
  height: clamp(16px, min(1.73vw, 2.45vh), 42px);
}

/* --------------------------------------------------------------------------
   10. 大号面板（出错 / 未开放 / 配置或科目读取失败）
   -------------------------------------------------------------------------- */
.kiosk-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.01vh, 17px);
  width: min(clamp(302px, 50.4vw, 1152px), 100%);
  padding: clamp(16px, 2.88vh, 55px) clamp(14px, 2.45vw, 63px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(12px, 1.3vw, 32px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: rise-in-lg var(--dur-slow) var(--ease-out) both;
}

.kiosk-panel__icon {
  display: grid;
  place-items: center;
  width: clamp(60px, 9.36vh, 137px);
  height: clamp(60px, 9.36vh, 137px);
  border-radius: 50%;
  background: var(--info-soft);
  color: var(--info);
}

.kiosk-panel__icon svg {
  width: clamp(33px, 5.04vh, 75px);
  height: clamp(33px, 5.04vh, 75px);
}

.kiosk-panel--warning .kiosk-panel__icon {
  background: var(--warning-soft);
  color: var(--warning);
}

.kiosk-panel--danger .kiosk-panel__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.kiosk-panel__title {
  font-size: clamp(17px, min(2.3vw, 3.31vh), 59px);
  font-weight: 720;
  line-height: 1.22;
}

.kiosk-panel__desc {
  max-width: 26em;
  font-size: clamp(11px, min(1.15vw, 1.73vh), 26px);
  color: var(--text-secondary);
}

.kiosk-panel__extra {
  font-size: clamp(9px, min(0.94vw, 1.44vh), 20px);
  color: var(--text-tertiary);
}

.kiosk-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7px, 0.86vw, 20px);
  width: 100%;
  margin-top: clamp(3px, 0.72vh, 13px);
}

.kiosk-panel__actions .kiosk-action {
  flex: 0 1 auto;
  min-width: clamp(144px, 15.84vw, 317px);
}

/* --------------------------------------------------------------------------
   11. 退出大屏（左下角，小而不显眼，但点击区域足够大并需二次确认）
   -------------------------------------------------------------------------- */
.kiosk-exit {
  position: fixed;
  left: clamp(7px, 1.15vw, 26px);
  bottom: clamp(7px, 1.15vh, 23px);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.43vw, 10px);
  min-height: clamp(64px, 6.48vh, 78px);
  padding: 0 clamp(14px, 1.44vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-glass);
  color: var(--text-tertiary);
  font-size: clamp(9px, min(0.79vw, 1.22vh), 17px);
  cursor: pointer;
  opacity: 0.66;
  backdrop-filter: blur(10px);
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-spring);
}

.kiosk-exit svg {
  width: clamp(12px, 1.3vh, 20px);
  height: clamp(12px, 1.3vh, 20px);
}

.kiosk-exit:hover,
.kiosk-exit:focus-visible {
  opacity: 1;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.kiosk-exit:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   12. 页脚（后台「系统设置 → 页脚」的 HTML，右下角，小字不抢视线）
   -------------------------------------------------------------------------- */
.kiosk-footer {
  position: fixed;
  right: clamp(7px, 1.15vw, 26px);
  bottom: clamp(7px, 1.15vh, 23px);
  z-index: var(--z-sticky);
  max-width: min(37.44vw, 648px);
  max-height: 8.6vh;
  overflow: hidden;
  font-size: clamp(9px, min(0.79vw, 1.22vh), 17px);
  line-height: 1.5;
  color: var(--text-tertiary);
  text-align: right;
  opacity: 0.8;
  pointer-events: none;
}

.kiosk-footer > :first-child {
  margin-top: 0;
}

.kiosk-footer > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. 竖屏 / 方形屏：键盘与查询按钮上下排布，信息纵向铺开
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 1 / 1) {
  .kiosk-pad {
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
  }

  .kiosk-submit {
    flex-direction: row;
    min-height: clamp(72px, 6.48vh, 122px);
  }

  /* 竖屏空间紧，隐藏次要说明文字（主文案「查询」保留） */
  .kiosk-submit__hint {
    display: none;
  }

  /* 竖屏：科目网格单列铺满，横向不挤压科目名 */
  .kiosk-pick {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 竖屏：当前科目与「切换科目」各占一行，按钮铺满更好点 */
  .kiosk-subject-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .kiosk-switch {
    width: 100%;
  }

  .kiosk-result-head {
    flex-direction: column;
    align-items: stretch;
  }

  .kiosk-countdown {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .kiosk-countdown__text {
    text-align: left;
  }

  .kiosk-record__meta {
    flex-basis: 100%;
    text-align: left;
  }

  .kiosk-actions {
    flex-direction: column;
  }

  .kiosk-action {
    flex: 0 0 auto;
    width: 100%;
  }

  .kiosk-hero {
    justify-content: center;
  }

  /* 竖屏：hero 右侧信息改为整行居中，排名/差值不贴右边 */
  .kiosk-hero__aside {
    align-items: stretch;
    width: 100%;
  }

  .kiosk-hero__facts,
  .kiosk-hero__side {
    justify-content: center;
  }

  .kiosk-stat__value {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   14. 4K / 拼接大屏：内容收进舒适宽度，卡片更宽，避免一行过长
   -------------------------------------------------------------------------- */
@media (min-width: 2400px) {
  .kiosk-view {
    max-width: 2016px;
    margin-inline: auto;
  }

  .kiosk-pick {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.6rem), 1fr));
  }
}

/* --------------------------------------------------------------------------
   15. 屏幕偏矮（笔记本预览 / 小尺寸一体机）：压缩纵向留白，但按键仍 ≥72px
   -------------------------------------------------------------------------- */
@media (max-height: 820px) {
  .kiosk-slots {
    --slot-h: clamp(35px, 5.33vh, 69px);
    --slot-font: clamp(17px, min(2.16vw, 3.6vh), 40px);
  }

  .kiosk-head__mark {
    width: clamp(30px, 3.89vh, 46px);
    height: clamp(30px, 3.89vh, 46px);
  }

  .kiosk-head__title {
    font-size: clamp(14px, 1.87vh, 29px);
  }

  .kiosk-key {
    font-size: clamp(17px, min(2.16vw, 3.46vh), 40px);
  }

  /* 矮屏：切换科目按钮收到触控下限 72px，别再长高 */
  .kiosk-switch {
    min-height: 72px;
  }

  /* 矮屏：待机态多了「当前科目」栏，纵向节奏相应收紧，把高度找回来 */
  .kiosk-view--idle,
  .kiosk-view--loading,
  .kiosk-view--pick {
    --kiosk-gap: clamp(4px, 0.86vh, 14px);
  }
}

/* --------------------------------------------------------------------------
   16. 无障碍：减少动效时，光标改为静态高亮（不闪）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kiosk-slot.is-caret {
    animation: none;
    opacity: 1;
    border-color: var(--brand-500);
  }
}

/* ==========================================================================
   v4.1.0 新增：学号 + 密码双字段输入、平时分/行规分/兑换券结果页、兑换券确认浮层
   ========================================================================== */

/* --------------------------------------------------------------------------
   17. 输入字段（学号 2 槽 + 密码 4 槽，键盘共用；点整块即可切换焦点）
   -------------------------------------------------------------------------- */
.kiosk-fields {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(7px, 1.15vh, 20px);
  width: 100%;
  max-width: clamp(518px, 60.48vw, 1656px);
  margin-inline: auto;
}

/* 输入不合法（空学号点查询 / 密码不满 4 位）时的轻微抖动 */
.kiosk-fields.is-shake {
  animation: shake-x 440ms var(--ease-out) both;
}

.kiosk-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.72vh, 12px);
  padding: clamp(6px, 1.15vh, 20px) clamp(10px, 1.44vw, 32px);
  border: 2px solid var(--border-subtle);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  touch-action: manipulation;
  /* 未聚焦的字段整体弱化，聚焦的字段高亮：远距离也能一眼看出"现在在输什么" */
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-field.is-active {
  opacity: 1;
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 7%, var(--bg-surface));
  box-shadow: 0 0 0 clamp(1px, 0.26vw, 6px) color-mix(in srgb, var(--brand-500) 20%, transparent), var(--shadow-sm);
}

.kiosk-field:active {
  transform: scale(0.995);
}

.kiosk-field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 13px);
}

.kiosk-field__label {
  font-size: clamp(12px, min(1.22vw, 1.87vh), 29px);
  font-weight: 700;
  color: var(--text-secondary);
}

.kiosk-field.is-active .kiosk-field__label {
  color: var(--brand-600);
}

.kiosk-field__hint {
  font-size: clamp(9px, min(0.94vw, 1.37vh), 21px);
  color: var(--text-tertiary);
}

/* 学号 2 槽：很大，远距离可读 */
.kiosk-slots--id {
  --slot-w: clamp(52px, 6.48vw, 156px);
  --slot-h: clamp(64px, 9.5vh, 168px);
  --slot-font: clamp(30px, min(4.32vw, 6.9vh), 100px);
}

/* 密码 4 槽：略小，圆点显示 */
.kiosk-slots--pw {
  --slot-w: clamp(44px, 5.18vw, 124px);
  --slot-h: clamp(52px, 7.5vh, 132px);
  --slot-font: clamp(22px, min(2.88vw, 4.6vh), 68px);
}

/* 密码已输入的位只画一个圆点，字号比数字小 */
.kiosk-slot.is-dot {
  font-size: clamp(13px, min(1.58vw, 2.59vh), 40px);
  letter-spacing: 0;
}

/* 提示区：主提示 + 连续输错后的温和提示 */
.kiosk-hints {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.43vh, 8px);
  min-height: clamp(18px, 2.16vh, 34px);
}

.kiosk-display__hint.is-gentle {
  color: var(--warning);
  font-weight: 600;
}

/* 两个字段都填满：把「查询」按钮点亮（密码输满 320ms 后会自动提交） */
.kiosk-submit.is-ready {
  box-shadow: 0 0 0 clamp(2px, 0.36vw, 9px) color-mix(in srgb, var(--brand-500) 34%, transparent),
    var(--shadow-brand);
}

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

/* --------------------------------------------------------------------------
   18. 结果页：平时分（总分 + 各科网格）与行规分（总分 + 一行统计）
   -------------------------------------------------------------------------- */
.kiosk-subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(150px, 13.68vw, 330px)), 1fr));
  gap: clamp(6px, 0.72vw, 18px);
}

.kiosk-subject-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(6px, 0.72vw, 17px);
  min-height: clamp(52px, 6.5vh, 110px);
  padding: clamp(6px, 1.01vh, 18px) clamp(9px, 1.08vw, 26px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(9px, 0.86vw, 22px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.kiosk-subject-card__name {
  min-width: 0;
  font-size: clamp(12px, min(1.22vw, 1.8vh), 29px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-subject-card__score {
  flex: 0 0 auto;
  font-size: clamp(18px, min(2.02vw, 3.02vh), 48px);
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kiosk-subject-card__score.is-positive { color: var(--success); }
.kiosk-subject-card__score.is-negative { color: var(--danger); }

/* 行规分总分比平时分小一号：它是"另一本账"，不该抢平时分的视觉重心 */
.kiosk-hero--slim {
  padding: clamp(8px, 1.22vh, 22px) clamp(11px, 1.44vw, 34px);
}

.kiosk-hero--slim .kiosk-hero__value {
  font-size: clamp(26px, min(3.46vw, 5.18vh), 88px);
}

/* 一行小字：加分 6 次 +15 / 扣分 2 次 -2.5 */
.kiosk-sumline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(4px, 0.65vw, 14px);
  font-size: clamp(11px, min(1.15vw, 1.73vh), 26px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.kiosk-sumline__value {
  font-weight: 700;
}

.kiosk-sumline .is-add { color: var(--success); }
.kiosk-sumline .is-deduct { color: var(--danger); }

.kiosk-sumline__sep {
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   19. 结果页：我的兑换券（券卡 + 状态徽章 + 到期时间 + 申请按钮）
   -------------------------------------------------------------------------- */
.kiosk-coupons {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.86vw, 18px);
}

.kiosk-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.01vw, 24px);
  padding: clamp(8px, 1.44vh, 24px) clamp(10px, 1.44vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* 可申请使用的券：描边强调，引导视线到右侧按钮 */
.kiosk-coupon.is-requestable {
  border-color: color-mix(in srgb, var(--brand-500) 34%, transparent);
}

.kiosk-coupon.is-expired {
  opacity: 0.72;
}

.kiosk-coupon__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(40px, 5.04vh, 88px);
  height: clamp(40px, 5.04vh, 88px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-500);
}

.kiosk-coupon__icon svg {
  width: clamp(20px, 2.59vh, 46px);
  height: clamp(20px, 2.59vh, 46px);
}

.kiosk-coupon__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(2px, 0.43vh, 8px);
  min-width: 0;
}

.kiosk-coupon__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
}

.kiosk-coupon__title {
  font-size: clamp(14px, min(1.58vw, 2.3vh), 36px);
  font-weight: 700;
  line-height: 1.2;
}

.kiosk-coupon__meta {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.43vw, 10px);
  font-size: clamp(10px, min(1.08vw, 1.58vh), 24px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.kiosk-coupon__meta svg {
  flex: 0 0 auto;
  width: clamp(12px, 1.58vh, 24px);
  height: clamp(12px, 1.58vh, 24px);
}

/* 剩余 ≤3 天：警告色；已过期：危险色 */
.kiosk-coupon__meta--warning {
  color: var(--warning);
  font-weight: 620;
}

.kiosk-coupon__meta--danger {
  color: var(--danger);
  font-weight: 620;
}

.kiosk-coupon__note {
  font-size: clamp(9px, min(0.94vw, 1.37vh), 21px);
  color: var(--text-tertiary);
}

/* 申请使用：右侧大按钮（触控硬要求 ≥64px），整卡最显眼的操作 */
.kiosk-coupon__action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 13px);
  min-height: clamp(64px, 7.92vh, 130px);
  padding: 0 clamp(14px, 1.58vw, 36px);
  border: none;
  border-radius: var(--kiosk-radius);
  background: var(--fill-brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
  font-size: clamp(13px, min(1.44vw, 2.09vh), 33px);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-coupon__action:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(1.06);
}

.kiosk-coupon__action:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

.kiosk-coupon__action:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.kiosk-coupon__action svg {
  flex: 0 0 auto;
  width: clamp(18px, 2.3vh, 40px);
  height: clamp(18px, 2.3vh, 40px);
}

/* 状态徽章（未使用 / 申请中 / 已使用 / 已过期） */
.kiosk-chip {
  display: inline-flex;
  align-items: center;
  padding: clamp(2px, 0.36vh, 7px) clamp(7px, 0.72vw, 17px);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: clamp(10px, min(1.01vw, 1.51vh), 22px);
  font-weight: 640;
  line-height: 1.3;
  white-space: nowrap;
}

.kiosk-chip--brand {
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-600);
}

.kiosk-chip--warning {
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.kiosk-chip--danger {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

.kiosk-chip--neutral {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   20. 大号提示横幅（兑换券申请结果；公共终端不用右上角 Toast）
   -------------------------------------------------------------------------- */
.kiosk-banner {
  position: fixed;
  top: clamp(10px, 2.16vh, 34px);
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.86vw, 20px);
  width: min(90vw, 1400px);
  padding: clamp(10px, 1.58vh, 26px) clamp(16px, 2.02vw, 44px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translateX(-50%);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
}

.kiosk-banner--success {
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
}

.kiosk-banner--danger {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
}

.kiosk-banner__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.kiosk-banner__icon svg {
  width: clamp(22px, 2.88vh, 50px);
  height: clamp(22px, 2.88vh, 50px);
}

.kiosk-banner--success .kiosk-banner__icon { color: var(--success); }
.kiosk-banner--danger .kiosk-banner__icon { color: var(--danger); }

.kiosk-banner__text {
  font-size: clamp(13px, min(1.44vw, 2.09vh), 33px);
  font-weight: 660;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   21. 兑换券确认面板（大号、两键、默认不误触：Esc 取消 / Enter 确认）
   -------------------------------------------------------------------------- */
.kiosk-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.16vh, 40px) clamp(12px, 2.16vw, 48px);
  background: color-mix(in srgb, var(--bg-app) 66%, transparent);
  backdrop-filter: blur(6px);
  animation: fade-in var(--dur-fast) var(--ease-out) both;
}

.kiosk-sheet__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.3vh, 24px);
  width: min(clamp(320px, 52vw, 1152px), 100%);
  padding: clamp(20px, 3.6vh, 66px) clamp(18px, 2.88vw, 72px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(14px, 1.44vw, 36px);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: rise-in-lg var(--dur-slow) var(--ease-out) both;
}

.kiosk-sheet__icon {
  display: grid;
  place-items: center;
  width: clamp(56px, 8.64vh, 128px);
  height: clamp(56px, 8.64vh, 128px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  color: var(--brand-500);
}

.kiosk-sheet__icon svg {
  width: clamp(30px, 4.6vh, 68px);
  height: clamp(30px, 4.6vh, 68px);
}

.kiosk-sheet__title {
  font-size: clamp(18px, min(2.45vw, 3.6vh), 64px);
  font-weight: 740;
  line-height: 1.24;
}

.kiosk-sheet__desc {
  max-width: 30em;
  font-size: clamp(12px, min(1.22vw, 1.87vh), 29px);
  color: var(--text-secondary);
}

.kiosk-sheet__note {
  max-width: 34em;
  font-size: clamp(10px, min(1.08vw, 1.58vh), 24px);
  color: var(--text-tertiary);
}

.kiosk-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.86vw, 20px);
  width: 100%;
  margin-top: clamp(4px, 0.86vh, 16px);
}

.kiosk-sheet__actions .kiosk-action {
  flex: 1 1 clamp(140px, 16vw, 330px);
}

/* --------------------------------------------------------------------------
   22. 竖屏补充：字段铺满宽度，兑换券按钮整行，横幅收窄
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 1 / 1) {
  .kiosk-coupon {
    align-items: flex-start;
  }

  .kiosk-coupon__action {
    flex: 1 1 100%;
    width: 100%;
  }

  .kiosk-coupon__body {
    flex-basis: 60%;
  }

  .kiosk-subject-card__name {
    white-space: normal;
  }

  .kiosk-banner {
    width: calc(100% - clamp(20px, 4vw, 60px));
  }

  .kiosk-sheet__actions .kiosk-action {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   23. 矮屏补充：字段与券卡的纵向节奏收紧（按键仍 ≥72px）
   -------------------------------------------------------------------------- */
@media (max-height: 820px) {
  .kiosk-slots--id {
    --slot-h: clamp(52px, 7.5vh, 84px);
    --slot-font: clamp(24px, min(3.46vw, 5.5vh), 52px);
  }

  .kiosk-slots--pw {
    --slot-h: clamp(44px, 6.19vh, 70px);
    --slot-font: clamp(18px, min(2.3vw, 3.6vh), 40px);
  }

  .kiosk-fields {
    --kiosk-gap: clamp(4px, 0.86vh, 12px);
  }

  .kiosk-coupon {
    padding-top: clamp(6px, 1.01vh, 14px);
    padding-bottom: clamp(6px, 1.01vh, 14px);
  }
}

/* ==========================================================================
   v4.2.0 新增：结果页重做为「一张毛玻璃卡片 + 卡片内切换视图」
     · 行规分为主（.kiosk-prime）、平时分为次（.kiosk-second）；
     · 底部一排大号按钮（.kiosk-tab）常驻不滚走，当前视图高亮；
     · 细分视图（.kiosk-detail）含行规分时间线 / 平时分明细 / 兑换券（我的券 + 商城购买）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   24. 结果卡片外壳（毛玻璃：半透明底 + 背景模糊 + 大圆角 + 柔和阴影）
   -------------------------------------------------------------------------- */
.kiosk-view--result {
  /* 结果页不再让整页滚动：只有卡片正文（.kiosk-card__body）内部滚动 */
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kiosk-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(6px, 1.01vh, 18px);
  width: 100%;
  max-width: clamp(560px, 78vw, 1900px);
  min-height: 0;
  margin-inline: auto;
  padding: clamp(10px, 1.73vh, 30px) clamp(12px, 1.73vw, 40px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(14px, 1.58vw, 40px);
  /* 毛玻璃：半透明底 + 背景模糊（卡片后面是大屏背景与页脚，透一点更"悬浮"） */
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: rise-in-lg var(--dur-slow) var(--ease-out) both;
}

/* 不支持 backdrop-filter（老一体机 / 部分 Android 浏览器）时降级为不透明底色，保证可读性 */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .kiosk-card {
    background: var(--bg-surface);
  }
}

.kiosk-card__head {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(7px, 1.15vw, 29px);
}

/* 卡片正文：纵向内容自己滚动，横向绝不溢出（细分视图再长也只是这一块在滚） */
.kiosk-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 45%, transparent) transparent;
}

.kiosk-card__body > * {
  flex: 0 0 auto;
}

/* 细/隐蔽的滚动条（大屏上滚动条只是"还能往下看"的暗示，不该抢视线） */
.kiosk-card__body::-webkit-scrollbar {
  width: clamp(3px, 0.42vw, 9px);
}

.kiosk-card__body::-webkit-scrollbar-track {
  background: transparent;
}

.kiosk-card__body::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-tertiary) 45%, transparent);
}

/* --------------------------------------------------------------------------
   25. 卡片底部按钮行：三个视图大按钮（当前视图高亮）+ 三个次要操作
   -------------------------------------------------------------------------- */
.kiosk-card__nav {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 0.86vw, 20px);
}

/* 视图大按钮：触控硬要求 ≥64px 高，这里从 72px 起，横向平铺三等分 */
.kiosk-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 14px);
  min-height: clamp(72px, 9vh, 150px);
  padding: clamp(6px, 1.01vh, 18px) clamp(8px, 0.86vw, 20px);
  border: 2px solid var(--border-default);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-size: clamp(15px, min(1.73vw, 2.59vh), 42px);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-tab svg {
  flex: 0 0 auto;
  width: clamp(20px, min(2.02vw, 3.02vh), 48px);
  height: clamp(20px, min(2.02vw, 3.02vh), 48px);
}

.kiosk-tab__label {
  min-width: 0;
}

.kiosk-tab:active {
  transform: scale(0.972);
  border-color: var(--brand-400);
  background: var(--bg-active);
  box-shadow: var(--shadow-xs);
}

.kiosk-tab:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* 当前视图：实心品牌色（大屏没有 hover，必须一眼看出"现在在哪一屏"） */
.kiosk-tab.is-active {
  border-color: transparent;
  background: var(--fill-brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}

/* 次要操作：视觉退到第二排，但触控区域仍 ≥64px */
.kiosk-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.5vw, 12px);
  min-height: clamp(64px, 7vh, 110px);
  padding: clamp(4px, 0.72vh, 13px) clamp(8px, 0.86vw, 20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--kiosk-radius);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: clamp(11px, min(1.22vw, 1.87vh), 29px);
  font-weight: 620;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.kiosk-tool svg {
  flex: 0 0 auto;
  width: clamp(15px, min(1.58vw, 2.3vh), 36px);
  height: clamp(15px, min(1.58vw, 2.3vh), 36px);
}

.kiosk-tool:active {
  transform: scale(0.972);
  border-color: var(--brand-400);
  background: var(--bg-active);
  color: var(--brand-600);
}

.kiosk-tool:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* 「返回总览」：细分视图头部的显式出口（与"再点一次高亮按钮"等价） */
.kiosk-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.5vw, 12px);
  min-height: clamp(64px, 7vh, 110px);
  padding: 0 clamp(12px, 1.3vw, 30px);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  font-size: clamp(12px, min(1.3vw, 2.02vh), 31px);
  font-weight: 660;
  cursor: pointer;
  touch-action: manipulation;
}

.kiosk-back svg {
  flex: 0 0 auto;
  width: clamp(16px, min(1.73vw, 2.45vh), 40px);
  height: clamp(16px, min(1.73vw, 2.45vh), 40px);
  color: var(--brand-500);
}

.kiosk-back:active {
  transform: scale(0.972);
  border-color: var(--brand-400);
  background: var(--bg-active);
  color: var(--brand-600);
}

.kiosk-back:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   26. 总览·主区：行规分（大数字 + 加减分统计 + 最近明细，绿点加分 / 红点扣分）
   -------------------------------------------------------------------------- */
.kiosk-overview {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vh, 22px);
}

.kiosk-prime {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.86vh, 16px);
  padding: clamp(9px, 1.58vh, 28px) clamp(11px, 1.44vw, 34px);
  border: 1px solid color-mix(in srgb, var(--brand-500) 28%, transparent);
  border-radius: clamp(10px, 1.01vw, 26px);
  /* 主区带一点品牌色底，和下面灰色的次区形成明确的层级差 */
  background: color-mix(in srgb, var(--brand-500) 7%, transparent);
}

.kiosk-prime__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
  font-size: clamp(12px, min(1.3vw, 2.02vh), 31px);
  font-weight: 700;
  color: var(--brand-600);
}

.kiosk-prime__label svg {
  flex: 0 0 auto;
  width: clamp(16px, min(1.73vw, 2.59vh), 42px);
  height: clamp(16px, min(1.73vw, 2.59vh), 42px);
}

.kiosk-prime__title {
  font-weight: 740;
  letter-spacing: -0.01em;
}

.kiosk-prime__tag {
  padding: clamp(1px, 0.29vh, 6px) clamp(6px, 0.58vw, 14px);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  color: var(--brand-600);
  font-size: clamp(9px, min(0.94vw, 1.44vh), 21px);
  font-weight: 620;
}

.kiosk-prime__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(4px, 0.72vw, 16px);
}

/* 行规分大数字：整页最大的数字（这是学生最该看见的信息） */
.kiosk-prime__value {
  font-size: clamp(48px, min(7.2vw, 10.8vh), 200px);
  font-weight: 830;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.kiosk-prime__value.is-positive { color: var(--success); }
.kiosk-prime__value.is-negative { color: var(--danger); }

.kiosk-prime__unit {
  font-size: clamp(13px, min(1.44vw, 2.16vh), 34px);
  color: var(--text-tertiary);
}

.kiosk-prime__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(4px, 0.58vw, 13px);
  margin-left: auto;
  font-size: clamp(11px, min(1.15vw, 1.8vh), 27px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.kiosk-prime__stat {
  padding: clamp(2px, 0.36vh, 7px) clamp(6px, 0.65vw, 15px);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
}

.kiosk-prime__stat.is-add { color: var(--success); }
.kiosk-prime__stat.is-deduct { color: var(--danger); }

/* 总览预览的明细行：更矮、字号更小，只放最近几条 */
.kiosk-record--compact {
  min-height: clamp(30px, 4.03vh, 68px);
  padding: clamp(2px, 0.5vh, 9px) clamp(2px, 0.36vw, 9px);
}

.kiosk-record--compact .kiosk-record__reason {
  font-size: clamp(11px, min(1.15vw, 1.66vh), 25px);
}

/* 绿点加分 / 红点扣分：远距离一眼分清加与扣 */
.kiosk-dot {
  flex: 0 0 auto;
  width: clamp(10px, 1.3vh, 22px);
  height: clamp(10px, 1.3vh, 22px);
  border-radius: 50%;
}

.kiosk-dot.is-add {
  background: var(--success);
  box-shadow: 0 0 0 clamp(2px, 0.29vw, 6px) var(--success-soft);
}

.kiosk-dot.is-deduct {
  background: var(--danger);
  box-shadow: 0 0 0 clamp(2px, 0.29vw, 6px) var(--danger-soft);
}

/* --------------------------------------------------------------------------
   27. 总览·次区：平时分（合计 + 各科小卡 + 最近明细）与细分视图外壳
   -------------------------------------------------------------------------- */
/* 次区：更小的字号、更弱的对比（灰底 + 次色文字），明确低于行规分的视觉层级 */
.kiosk-second {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.72vh, 13px);
  padding: clamp(7px, 1.15vh, 20px) clamp(9px, 1.15vw, 26px);
  border: 1px solid var(--border-subtle);
  border-radius: clamp(10px, 1.01vw, 26px);
  background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
}

.kiosk-second__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(4px, 0.58vw, 13px);
}

.kiosk-second__label {
  font-size: clamp(11px, min(1.15vw, 1.8vh), 27px);
  font-weight: 660;
  color: var(--text-secondary);
}

/* 平时分合计：只有行规分数字的约 1/3 大，刻意不抢视线 */
.kiosk-second__total {
  font-size: clamp(18px, min(2.02vw, 3.17vh), 58px);
  font-weight: 720;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kiosk-second__total.is-positive { color: var(--success); }
.kiosk-second__total.is-negative { color: var(--danger); }

.kiosk-second__count {
  margin-left: auto;
  font-size: clamp(9px, min(0.94vw, 1.44vh), 21px);
  color: var(--text-tertiary);
}

/* 总览里的科目卡更紧凑（一行放下更多科） */
.kiosk-subjects--compact {
  gap: clamp(4px, 0.5vw, 13px);
}

.kiosk-subjects--compact .kiosk-subject-card {
  min-height: clamp(40px, 5.04vh, 86px);
  padding: clamp(4px, 0.72vh, 13px) clamp(7px, 0.79vw, 19px);
}

.kiosk-subjects--compact .kiosk-subject-card__score {
  font-size: clamp(15px, min(1.73vw, 2.59vh), 40px);
}

/* 平时分明细列表（总览预览与细分视图共用） */
.kiosk-srows {
  display: flex;
  flex-direction: column;
}

.kiosk-srow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(5px, 0.65vw, 15px);
  min-height: clamp(38px, 4.75vh, 82px);
  padding: clamp(3px, 0.65vh, 11px) clamp(3px, 0.43vw, 11px);
  border-bottom: 1px solid var(--border-subtle);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.kiosk-srow:last-child {
  border-bottom: none;
}

.kiosk-srow__subject {
  flex: 0 1 auto;
  max-width: 40%;
  font-size: clamp(11px, min(1.15vw, 1.73vh), 26px);
  font-weight: 660;
  color: var(--brand-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-srow__reason {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(11px, min(1.15vw, 1.66vh), 25px);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-srow__meta {
  flex: 0 1 auto;
  font-size: clamp(9px, min(0.86vw, 1.3vh), 19px);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.kiosk-srow__score {
  flex: 0 0 auto;
  min-width: clamp(44px, 4.75vw, 116px);
  font-size: clamp(13px, min(1.44vw, 2.16vh), 34px);
  font-weight: 720;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kiosk-srow__score.is-add { color: var(--success); }
.kiosk-srow__score.is-deduct { color: var(--danger); }

/* 细分视图外壳（在卡片正文里，纵向排布；滚动交给 .kiosk-card__body） */
.kiosk-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.15vh, 20px);
}

.kiosk-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 0.86vw, 20px);
}

.kiosk-detail__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(40px, 5.76vh, 96px);
  height: clamp(40px, 5.76vh, 96px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-500) 13%, transparent);
  color: var(--brand-500);
}

.kiosk-detail__icon svg {
  width: clamp(20px, 2.88vh, 48px);
  height: clamp(20px, 2.88vh, 48px);
}

.kiosk-detail__text {
  flex: 1 1 auto;
  min-width: 0;
}

.kiosk-detail__title {
  font-size: clamp(15px, min(1.73vw, 2.59vh), 42px);
  font-weight: 740;
  line-height: 1.2;
}

.kiosk-detail__note {
  margin-top: clamp(1px, 0.29vh, 6px);
  font-size: clamp(10px, min(1.01vw, 1.51vh), 23px);
  color: var(--text-secondary);
}

/* 细分视图的主数字：行规分视图用大号，平时分视图（--soft）刻意小一号 */
.kiosk-detail__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(4px, 0.72vw, 16px);
  padding: clamp(8px, 1.3vh, 24px) clamp(10px, 1.3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--brand-500) 26%, transparent);
  border-radius: clamp(10px, 1.01vw, 26px);
  background: color-mix(in srgb, var(--brand-500) 7%, transparent);
}

.kiosk-detail__hero--soft {
  border-color: var(--border-subtle);
  background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
}

.kiosk-detail__value {
  font-size: clamp(34px, min(5.04vw, 7.56vh), 140px);
  font-weight: 810;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kiosk-detail__hero--soft .kiosk-detail__value {
  font-size: clamp(26px, min(3.46vw, 5.18vh), 96px);
  font-weight: 760;
}

.kiosk-detail__value.is-positive { color: var(--success); }
.kiosk-detail__value.is-negative { color: var(--danger); }

.kiosk-detail__unit {
  font-size: clamp(12px, min(1.3vw, 1.94vh), 31px);
  color: var(--text-tertiary);
}

.kiosk-detail__hero-note {
  margin-left: auto;
  font-size: clamp(10px, min(1.01vw, 1.51vh), 23px);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   28. 兑换券细分视图：余额 + 我的兑换券 + 兑换券商城（用行规分购买）
   -------------------------------------------------------------------------- */
.kiosk-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(5px, 0.72vw, 16px);
  padding: clamp(8px, 1.3vh, 24px) clamp(10px, 1.3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  border-radius: clamp(10px, 1.01vw, 26px);
  background: var(--tint-brand);
}

.kiosk-balance__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  color: var(--brand-500);
}

.kiosk-balance__icon svg {
  width: clamp(20px, 2.88vh, 48px);
  height: clamp(20px, 2.88vh, 48px);
}

.kiosk-balance__label {
  align-self: center;
  font-size: clamp(11px, min(1.15vw, 1.8vh), 27px);
  font-weight: 660;
  color: var(--text-secondary);
}

.kiosk-balance__value {
  font-size: clamp(30px, min(3.89vw, 5.76vh), 106px);
  font-weight: 810;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kiosk-balance__value.is-positive { color: var(--success); }
.kiosk-balance__value.is-negative { color: var(--danger); }

.kiosk-balance__unit {
  font-size: clamp(11px, min(1.15vw, 1.73vh), 27px);
  color: var(--text-tertiary);
}

/* 两段（我的兑换券 / 兑换券商城）：各有标题，学生一眼知道"哪张是我的、哪个能买" */
.kiosk-cblock {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.86vh, 15px);
}

.kiosk-cblock__title {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.58vw, 13px);
  font-size: clamp(12px, min(1.3vw, 2.02vh), 31px);
  font-weight: 700;
  color: var(--text-secondary);
}

.kiosk-cblock__title svg {
  flex: 0 0 auto;
  width: clamp(14px, min(1.44vw, 2.16vh), 34px);
  height: clamp(14px, min(1.44vw, 2.16vh), 34px);
  color: var(--brand-500);
}

/* 商城卡片：横向两列起（大屏上比纵向堆叠更容易扫） */
.kiosk-store-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(280px, 30vw, 690px)), 1fr));
  gap: clamp(6px, 0.86vw, 20px);
}

.kiosk-store {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.58vh, 11px);
  padding: clamp(8px, 1.3vh, 24px) clamp(9px, 1.15vw, 28px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--kiosk-radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* 不可购买（未开始 / 已结束 / 已售罄 / 余额不足）：整卡降透明度，一眼区分 */
.kiosk-store.is-locked {
  opacity: 0.76;
}

.kiosk-store__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 0.58vw, 13px);
}

.kiosk-store__name {
  min-width: 0;
  font-size: clamp(14px, min(1.58vw, 2.3vh), 36px);
  font-weight: 720;
  line-height: 1.2;
}

.kiosk-store__types {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(3px, 0.43vw, 10px);
}

.kiosk-store__desc {
  font-size: clamp(11px, min(1.15vw, 1.66vh), 25px);
  color: var(--text-secondary);
}

.kiosk-store__note {
  font-size: clamp(9px, min(0.94vw, 1.44vh), 21px);
  color: var(--text-tertiary);
}

.kiosk-store__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.65vw, 14px);
  font-size: clamp(9px, min(1.01vw, 1.51vh), 22px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.kiosk-store__meta-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.43vw, 10px);
}

.kiosk-store__meta-item svg {
  flex: 0 0 auto;
  width: clamp(12px, 1.44vh, 26px);
  height: clamp(12px, 1.44vh, 26px);
  color: var(--brand-500);
}

.kiosk-store__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(5px, 0.72vw, 16px);
  margin-top: auto;
}

.kiosk-store__price {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(3px, 0.43vw, 10px);
  font-size: clamp(20px, min(2.45vw, 3.6vh), 64px);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

.kiosk-store__price-unit {
  font-size: clamp(9px, min(1.01vw, 1.51vh), 22px);
  font-weight: 620;
  color: var(--text-tertiary);
}

/* 余额不足等中文原因：一行说明，禁用按钮旁边必须写清楚为什么 */
.kiosk-store__hint {
  font-size: clamp(9px, min(1.01vw, 1.51vh), 22px);
  color: var(--text-tertiary);
}

.kiosk-store__hint.is-warning {
  color: var(--warning);
  font-weight: 640;
}

/* 购买按钮：触控硬要求 ≥64px；禁用时去掉阴影并降透明度 */
.kiosk-buy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 13px);
  min-height: clamp(64px, 7.92vh, 130px);
  padding: 0 clamp(14px, 1.58vw, 36px);
  border: none;
  border-radius: var(--kiosk-radius);
  background: var(--fill-brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
  font-size: clamp(13px, min(1.44vw, 2.09vh), 33px);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-buy:active:not(:disabled) {
  transform: scale(0.972);
  filter: brightness(1.06);
}

.kiosk-buy:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

.kiosk-buy:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.kiosk-buy svg {
  flex: 0 0 auto;
  width: clamp(18px, 2.3vh, 40px);
  height: clamp(18px, 2.3vh, 40px);
}

/* 徽章补两种语气（商城的可购买 / 未开始），沿用既有 .kiosk-chip 尺寸 */
.kiosk-chip--success {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.kiosk-chip--info {
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  background: var(--info-soft);
  color: var(--info);
}

/* --------------------------------------------------------------------------
   29. 结果卡片：竖屏 / 矮屏 / 4K / 无障碍补充
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 1 / 1) {
  /* 竖屏：卡片铺满可用宽度，主数字按屏宽缩放 */
  .kiosk-card {
    max-width: 100%;
    padding-inline: clamp(10px, 3.6vw, 28px);
  }

  /* 竖屏：卡片铺满整宽后会压到左下角固定的「退出大屏」，底部留一条安全带 */
  .kiosk-view--result {
    padding-bottom: clamp(76px, 8.6vh, 96px);
  }

  .kiosk-prime__value {
    font-size: clamp(42px, min(11vw, 9vh), 130px);
  }

  .kiosk-prime__stats {
    margin-left: 0;
  }

  .kiosk-detail__hero-note {
    margin-left: 0;
  }

  /* 竖屏：商城单列铺满，券说明不挤压 */
  .kiosk-store-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .kiosk-srow__subject {
    max-width: 100%;
    flex-basis: 100%;
  }

  .kiosk-store__foot {
    justify-content: flex-start;
  }

  .kiosk-buy {
    flex: 1 1 100%;
  }

  .kiosk-card__nav {
    gap: clamp(4px, 1.2vw, 12px);
  }
}

@media (max-height: 820px) {
  /* 矮屏：主数字与会话卡片纵向节奏收紧，但按钮仍 ≥64px（触控下限不动） */
  .kiosk-prime__value {
    font-size: clamp(38px, min(6.05vw, 9.5vh), 120px);
  }

  .kiosk-card {
    gap: clamp(4px, 0.86vh, 12px);
    padding-block: clamp(7px, 1.3vh, 18px);
  }

  .kiosk-tab,
  .kiosk-tool,
  .kiosk-back,
  .kiosk-buy {
    min-height: 64px;
  }

  .kiosk-detail__value {
    font-size: clamp(28px, min(4.32vw, 7vh), 100px);
  }
}

@media (min-width: 2400px) {
  .kiosk-card {
    max-width: 2100px;
  }
}

/* 无障碍：减少动效时卡片不做入场动画，数字也不做过渡 */
@media (prefers-reduced-motion: reduce) {
  .kiosk-card {
    animation: none;
  }

  .kiosk-store,
  .kiosk-srow {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   30. 幸运大转盘（v4.7.0）：余额 → 大号 tabs → Canvas 盘面 → 结果横幅 → 抽奖按钮
   触控与可读性约定同前：抽奖按钮 ≥72px（矮屏也守 72），盘面按 min(可用宽, 46vh, 52vw)
   自适应，竖屏 / 矮屏 / 4K 各自收紧或放开，全部走 clamp()。
   -------------------------------------------------------------------------- */

/* 按钮行从「三个视图」变成「四个视图」：4 列时四个大按钮占满第一排、
   三个次要操作自然落到第二排（7 个格子正好排成 4 + 3，不出现孤零零的半排）。 */
.kiosk-card__nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kiosk-wheel {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.15vh, 20px);
}

/* 空态 / 失败态：只留标题行与一句中文说明，不画盘面 */
.kiosk-wheel--empty {
  gap: clamp(8px, 1.3vh, 24px);
}

/* 顶部余额（大字）：远距离一眼看到「我还够不够抽」 */
.kiosk-wheel__wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(5px, 0.72vw, 16px);
  margin-left: auto;
  padding: clamp(6px, 1.01vh, 18px) clamp(10px, 1.15vw, 28px);
  border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
}

.kiosk-wheel__wallet-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  color: var(--brand-500);
}

.kiosk-wheel__wallet-icon svg {
  width: clamp(18px, 2.59vh, 43px);
  height: clamp(18px, 2.59vh, 43px);
}

.kiosk-wheel__wallet-label {
  align-self: center;
  font-size: clamp(10px, min(1.08vw, 1.66vh), 25px);
  font-weight: 640;
  color: var(--text-secondary);
}

.kiosk-wheel__wallet-value {
  font-size: clamp(26px, min(3.46vw, 5.18vh), 96px);
  font-weight: 810;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kiosk-wheel__wallet-unit {
  font-size: clamp(10px, min(1.08vw, 1.66vh), 25px);
  color: var(--text-tertiary);
}

/* 多转盘时的大号 tabs（单个转盘时容器是空的，直接不占位） */
.kiosk-wheel__tabs:empty {
  display: none;
}

.kiosk-wheel__tabs-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(240px, 26vw, 560px)), 1fr));
  gap: clamp(6px, 0.86vw, 20px);
}

.kiosk-wheel__tab {
  min-height: clamp(72px, 8.6vh, 140px);
}

/* 盘面：正方形容器居中，指针 fixed 在正上方，盘面本体跟随 JS 的 rotate 旋转 */
.kiosk-wheel__board {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, clamp(200px, 46vh, 520px));
  max-width: clamp(200px, 52vw, 560px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.kiosk-wheel__disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* transition / transform 由 JS 写行内样式（换转盘时先归零再落位） */
  will-change: transform;
  box-shadow: var(--shadow-sm);
}

.kiosk-wheel__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 指针：12 点方向的实心三角（纯 CSS 三角，离线可用、不依赖图片） */
.kiosk-wheel__pointer {
  position: absolute;
  top: clamp(-8px, -0.72vh, -3px);
  left: 50%;
  z-index: 3;
  width: clamp(18px, 2.88vh, 46px);
  height: clamp(24px, 3.89vh, 62px);
  transform: translateX(-50%);
  background: var(--danger);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.35));
}

/* 中心转轴：不跟着盘面转，抽奖时用短文案说明状态（开始 / 抽取中 / 再来一把） */
.kiosk-wheel__hub {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 1px;
  width: clamp(64px, 21%, 150px);
  aspect-ratio: 1 / 1;
  border: 3px solid color-mix(in srgb, var(--brand-500) 34%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  text-align: center;
  pointer-events: none;
}

.kiosk-wheel__hub-icon {
  display: grid;
  place-items: center;
  color: var(--brand-500);
}

.kiosk-wheel__hub-icon svg {
  width: clamp(16px, 2.16vh, 36px);
  height: clamp(16px, 2.16vh, 36px);
}

.kiosk-wheel__hub-text {
  font-size: clamp(8px, min(0.86vw, 1.3vh), 20px);
  font-weight: 660;
  color: var(--text-secondary);
}

/* 结果横幅：中奖（成功绿）/ 谢谢惠顾（中性）/ 提示（警告黄）三种语气 */
.kiosk-wheel__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 1.15vw, 24px);
  padding: clamp(8px, 1.44vh, 26px) clamp(10px, 1.3vw, 30px);
  border: 2px solid var(--border-default);
  border-radius: clamp(10px, 1.01vw, 26px);
  animation: rise-in var(--dur-normal) var(--ease-out) both;
}

.kiosk-wheel__result--win {
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.kiosk-wheel__result--thanks {
  border-color: var(--border-subtle);
  background: color-mix(in srgb, var(--bg-muted) 82%, transparent);
}

.kiosk-wheel__result--warn {
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.kiosk-wheel__result-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(44px, 7.2vh, 108px);
  height: clamp(44px, 7.2vh, 108px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
  color: var(--brand-500);
}

.kiosk-wheel__result--win .kiosk-wheel__result-icon { color: var(--success); }
.kiosk-wheel__result--warn .kiosk-wheel__result-icon { color: var(--warning); }

.kiosk-wheel__result-icon svg {
  width: clamp(24px, 3.89vh, 58px);
  height: clamp(24px, 3.89vh, 58px);
}

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

.kiosk-wheel__result-title {
  font-size: clamp(19px, min(2.3vw, 3.46vh), 60px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kiosk-wheel__result-note {
  margin-top: clamp(2px, 0.43vh, 8px);
  font-size: clamp(11px, min(1.22vw, 1.87vh), 29px);
  color: var(--text-secondary);
}

/* 抽奖按钮：触控硬要求 ≥72px（大屏上最大的那个可点区域） */
.kiosk-wheel__spin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.72vw, 16px);
  min-height: clamp(72px, 9.5vh, 160px);
  padding: clamp(8px, 1.3vh, 24px) clamp(14px, 1.58vw, 40px);
  border: none;
  border-radius: var(--kiosk-radius);
  background: var(--fill-brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
  font-size: clamp(15px, min(1.73vw, 2.59vh), 42px);
  font-weight: 740;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-instant) var(--ease-spring), filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.kiosk-wheel__spin:active:not(:disabled) {
  transform: scale(0.972);
  filter: brightness(1.06);
}

.kiosk-wheel__spin:focus-visible {
  outline: 4px solid var(--brand-400);
  outline-offset: 3px;
}

/* 禁用（动画中 / 余额不足）：去掉品牌底与阴影，让"现在不能点"一眼可见 */
.kiosk-wheel__spin:disabled {
  opacity: 0.62;
  background: var(--bg-muted);
  color: var(--text-secondary);
  box-shadow: none;
  cursor: default;
}

.kiosk-wheel__spin svg {
  flex: 0 0 auto;
  width: clamp(22px, 3.02vh, 48px);
  height: clamp(22px, 3.02vh, 48px);
}

/* 按钮下方的一行说明：正常是规则、余额不足时变警告色并写明还差多少分 */
.kiosk-wheel__hint {
  font-size: clamp(10px, min(1.08vw, 1.66vh), 25px);
  color: var(--text-tertiary);
  text-align: center;
}

.kiosk-wheel__hint.is-warning {
  color: var(--warning);
  font-weight: 660;
}

/* 奖项一览：一格一枚小胶囊（canvas 画不出时的可读性兜底，也让读屏能念出每一格奖） */
.kiosk-wheel__legend-block {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.72vh, 13px);
}

.kiosk-wheel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.58vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kiosk-wheel__legend-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.43vw, 10px);
  padding: clamp(3px, 0.58vh, 10px) clamp(7px, 0.79vw, 18px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: clamp(10px, min(1.01vw, 1.51vh), 23px);
}

.kiosk-wheel__legend-dot {
  flex: 0 0 auto;
  width: clamp(8px, 1.15vh, 18px);
  height: clamp(8px, 1.15vh, 18px);
  border-radius: 50%;
  background: var(--kiosk-wheel-dot, var(--brand-500));
}

.kiosk-wheel__legend-label {
  font-weight: 640;
}

.kiosk-wheel__legend-kind {
  color: var(--text-tertiary);
}

/* 竖屏：余额挪到标题下方（右浮动会挤掉转盘名），盘面按屏宽收窄 */
@media (max-aspect-ratio: 1 / 1) {
  .kiosk-wheel__wallet {
    width: 100%;
    margin-left: 0;
  }

  .kiosk-wheel__board {
    width: min(100%, clamp(190px, 34vh, 460px));
    max-width: 100%;
  }

  .kiosk-wheel__pointer {
    height: clamp(20px, 3.2vh, 46px);
  }
}

/* 矮屏：盘面再收一点，但抽奖按钮仍守 72px（触控下限不动） */
@media (max-height: 820px) {
  .kiosk-wheel__board {
    width: min(100%, clamp(170px, 38vh, 380px));
    max-width: clamp(170px, 46vw, 420px);
  }

  .kiosk-wheel__spin {
    min-height: 72px;
  }

  .kiosk-wheel__result-title {
    font-size: clamp(17px, min(2.16vw, 3.24vh), 50px);
  }
}

/* 4K：盘面不再无限放大（再大也看不完，只会把按钮挤出屏幕） */
@media (min-width: 2400px) {
  .kiosk-wheel__board {
    width: min(100%, 560px);
    max-width: 560px;
  }
}

/* 无障碍：减少动效时结果横幅不做入场动画（盘面多圈旋转由 JS 直接跳过） */
@media (prefers-reduced-motion: reduce) {
  .kiosk-wheel__result {
    animation: none;
  }
}