@charset "UTF-8";
/* =============================================================================
   元一 AI 直播 · 云端控制台 · 组件库
   components.css  —  依赖 theme.css 的 token（可单独引用：先 theme.css 后本文件）
   覆盖：导航 / 卡片 / 按钮 / 表单 / 开关 / 分段 / Tabs / 步骤条 / 徽章 /
         状态灯 / KPI / 积分条 / 表格 / 分页 / 空态 / 骨架 / 错误态 / Toast /
         Modal / 播放器 / 字幕条 / 上传区 / 日志控制台 / 弹幕流 / 房间卡 / 二维码占位
   版本：v1.0 · 2026-11-01
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. 视图容器（单页多视图，JS 切 .is-active）
   -------------------------------------------------------------------------- */
.view { display: none; }
.view.is-active { display: block; animation: viewIn var(--dur-slow) var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   1. 品牌 & 侧栏导航
   -------------------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.brand__mark {
  position: relative;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  box-shadow: var(--glow-brand);
  color: #041019;
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 17px;
  letter-spacing: -.04em;
}
.brand__mark::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 15px;
  border: 1px solid rgba(56, 189, 248, .32);
  opacity: .7;
  pointer-events: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--fg-hi); letter-spacing: .02em; }
.brand__sub { font-size: 10px; letter-spacing: .16em; color: var(--fg-low); text-transform: uppercase; white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__group { padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-mid);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav__item:hover { color: var(--fg-hi); background: rgba(96, 165, 250, .07); }
.nav__item.is-active {
  color: var(--fg-hi);
  background: linear-gradient(90deg, rgba(56, 189, 248, .16), rgba(59, 130, 246, .04));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .20);
}
.nav__item.is-active::before {
  content: "";
  position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 2px; border-radius: 2px;
  background: var(--grad-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, .9);
}
.nav__icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.nav__label { overflow: hidden; text-overflow: ellipsis; }
.nav__count {
  margin-left: auto;
  font-family: var(--font-num); font-size: 10px; line-height: 1;
  padding: 3px 6px; border-radius: var(--r-pill);
  background: rgba(56, 189, 248, .14); color: var(--blue-300);
  border: 1px solid rgba(56, 189, 248, .22);
}
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--line-1); }

/* 侧栏积分小组件 */
.side-credit {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--grad-panel), rgba(9, 17, 30, .7);
  border: 1px solid var(--line-2);
}
.side-credit__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.side-credit__num { font-family: var(--font-num); font-size: var(--fs-20); font-weight: var(--fw-semi); color: var(--fg-hi); font-variant-numeric: tabular-nums; }
.side-credit__unit { font-size: 10px; color: var(--fg-low); }
.side-credit .meter { margin-top: var(--sp-2); }

/* 用户行 */
.user-chip { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); transition: background var(--dur-fast); }
.user-chip:hover { background: rgba(96, 165, 250, .07); }
.avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-12); font-weight: var(--fw-semi);
  color: var(--blue-100);
  background: linear-gradient(160deg, rgba(59, 130, 246, .55), rgba(34, 211, 238, .28));
  border: 1px solid rgba(147, 197, 253, .34);
}
.avatar--lg { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--fs-14); }
.user-chip__meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-chip__name { font-size: var(--text-sm); color: var(--fg-hi); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__role { font-size: var(--text-micro); color: var(--fg-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   2. 顶栏 / 页头 / 面包屑
   -------------------------------------------------------------------------- */
.topbar__title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar__title h1 { font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--fg-hi); letter-spacing: .01em; }
.topbar__title span { font-size: var(--text-micro); color: var(--fg-low); }

.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--fg-low); }
.crumbs__sep { opacity: .5; }
.crumbs a { color: var(--fg-mid); }
.crumbs a:hover { color: var(--cyan-300); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head__main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.page-head__title { display: flex; align-items: center; gap: var(--sp-3); }
.page-head__title h2 { font-size: var(--fs-24); font-weight: var(--fw-semi); color: var(--fg-hi); letter-spacing: var(--ls-tight); }
.page-head__desc { font-size: var(--text-sm); color: var(--fg-mid); max-width: 72ch; }
.page-head__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   3. 卡片
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--r-card);
  background: var(--grad-panel), var(--glass-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2), var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card--flat { background: var(--bg-panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--inset { background: var(--bg-inset); box-shadow: var(--sh-1); }
.card--hover:hover {
  border-color: var(--line-brand);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(56, 189, 248, .10), var(--glass-highlight);
  transform: translateY(-1px);
}
.card--active { border-color: var(--line-brand); box-shadow: var(--sh-3), var(--glow-brand); }
.card--live { border-color: var(--live-line); box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 77, 109, .12), var(--glow-live); }
.card--danger { border-color: var(--danger-line); }
.card--vip { border-color: var(--vip-line); }
.card--section { overflow: hidden; }
.card--flush > .card__body { padding: 0; }

.card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--pad-card);
  border-bottom: 1px solid var(--line-1);
  min-height: 56px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .05), transparent);
}
.card__head--plain { background: none; border-bottom: 0; }
.card__title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.card__title h3 { font-size: var(--text-h3); font-weight: var(--fw-semi); color: var(--fg-hi); }
.card__sub { font-size: var(--text-xs); color: var(--fg-low); font-weight: var(--fw-regular); }
.card__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card__body { padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--sp-4); }
.card__body--tight { padding: var(--sp-3); gap: var(--sp-3); }
.card__foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--pad-card);
  border-top: 1px solid var(--line-1);
  background: rgba(4, 9, 17, .35);
}
.card__foot--end { justify-content: flex-end; }

/* 区块序号（①→⑦）：小圆形编号，提示操作顺序 */
.sec-no {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-num);
  font-size: var(--text-xs); font-weight: var(--fw-semi);
  color: var(--blue-200);
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .34);
  box-shadow: 0 0 12px -2px rgba(56, 189, 248, .5);
}
.sec-no--done { color: #031a12; background: var(--ok); border-color: transparent; }
.sec-no--warn { color: #1f1400; background: var(--warn); border-color: transparent; }

/* 卡片内的次级分组 */
.sub-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.sub-block__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-micro); font-weight: var(--fw-semi);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low);
}
.sub-block__label::after { content: ""; flex: 1; height: 1px; background: var(--line-1); }

/* -----------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: var(--h-control);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-control);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-base);
  transition: 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),
              transform var(--dur-instant) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.btn[disabled], .btn.is-disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn__icon { width: 16px; height: 16px; flex: 0 0 16px; }
.btn--block { width: 100%; }
.btn--sm { --btn-h: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn--lg { --btn-h: var(--h-control-lg); padding: 0 var(--sp-6); font-size: var(--fs-15); }
.btn--icon { width: var(--btn-h); padding: 0; }
.btn--pill { border-radius: var(--r-pill); }

/* 主按钮：品牌渐变 + 投影 + 顶部内高光 + 悬停扫光 */
.btn--primary {
  background: var(--grad-brand);
  color: var(--fg-on-brand);
  font-weight: var(--fw-semi);
  box-shadow: 0 6px 18px -8px rgba(56, 189, 248, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .34) 46%, transparent 64%);
  transform: translateX(-120%);
  transition: transform var(--dur-xslow) var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 10px 26px -8px rgba(56, 189, 248, 1), inset 0 1px 0 rgba(255, 255, 255, .34);
  filter: brightness(1.06);
}
.btn--primary:hover:not(:disabled)::after { transform: translateX(120%); }

/* 次按钮：玻璃描边 */
.btn--secondary {
  background: rgba(56, 189, 248, .07);
  border-color: rgba(96, 165, 250, .34);
  color: var(--blue-100);
  box-shadow: inset 0 1px 0 rgba(215, 235, 255, .06);
}
.btn--secondary:hover:not(:disabled) {
  background: rgba(56, 189, 248, .14);
  border-color: rgba(125, 211, 252, .55);
  box-shadow: 0 6px 18px -12px rgba(56, 189, 248, .8), inset 0 1px 0 rgba(215, 235, 255, .1);
  color: #fff;
}

/* 幽灵按钮 */
.btn--ghost { color: var(--fg-mid); }
.btn--ghost:hover:not(:disabled) { background: rgba(96, 165, 250, .09); color: var(--fg-hi); }
/* 选中态（分段/单选按钮）：任意变体加 .btn--on 或 .is-active 都成立 */
.btn--on,
.btn.is-active {
  background: rgba(56, 189, 248, .16);
  border-color: var(--line-brand);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .22), 0 4px 16px -12px rgba(56, 189, 248, .9);
}

/* 危险按钮（软底，避免大面积红） */
.btn--danger {
  background: rgba(251, 113, 133, .10);
  border-color: var(--danger-line);
  color: #FFD5DC;
}
.btn--danger:hover:not(:disabled) { background: rgba(251, 113, 133, .2); border-color: rgba(251, 113, 133, .6); box-shadow: var(--glow-danger); }

/* 实心危险（仅用于"关闭直播"这类关键动作） */
.btn--danger-solid {
  background: linear-gradient(135deg, #FF6B81, #F43F5E);
  color: #2A0410;
  font-weight: var(--fw-semi);
  box-shadow: 0 6px 18px -8px rgba(244, 63, 94, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn--danger-solid:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 10px 26px -8px rgba(244, 63, 94, 1); }

/* 开播按钮：品牌渐变 + 呼吸光环 */
.btn--start { padding: 0 var(--sp-6); }
.btn--start:not(:disabled) { animation: startBreath 3.4s var(--ease-in-out) infinite; }
@keyframes startBreath {
  0%, 100% { box-shadow: 0 6px 18px -8px rgba(56, 189, 248, .8), inset 0 1px 0 rgba(255, 255, 255, .28); }
  50%      { box-shadow: 0 10px 30px -6px rgba(34, 211, 238, 1), 0 0 0 3px rgba(56, 189, 248, .12), inset 0 1px 0 rgba(255, 255, 255, .4); }
}

/* VIP 按钮 */
.btn--vip { background: var(--grad-vip); color: #160A33; font-weight: var(--fw-semi); box-shadow: var(--glow-vip); }
.btn--vip:hover:not(:disabled) { filter: brightness(1.08); }

/* 文字按钮 */
.btn--link { height: auto; padding: 0; color: var(--info); font-size: var(--text-sm); }
.btn--link:hover:not(:disabled) { color: var(--cyan-300); text-decoration: underline; text-underline-offset: 3px; }

/* Loading 态：文字变淡 + 转圈，宽度不变防止布局跳动 */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--fg-on-brand);
  animation: spin .7s linear infinite;
  visibility: visible;
}
.btn--secondary.is-loading::before, .btn--ghost.is-loading::before, .btn--danger.is-loading::before { color: var(--blue-200); }
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(147, 197, 253, .3);
  border-top-color: var(--cyan-300);
  animation: spin .7s linear infinite;
  flex: 0 0 auto;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 26px; height: 26px; border-width: 3px; }

/* 按钮组：首尾圆角相连 */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--r-control) 0 0 var(--r-control); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; }
.btn-group > .btn:only-child { border-radius: var(--r-control); }
.btn-group > .btn:focus-visible { z-index: 1; }

/* -----------------------------------------------------------------------------
   5. 表单：Field / Input / Select / Textarea / 前后缀
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--fg-base);
}
.field__label .req { color: var(--danger); font-size: var(--fs-11); }
.field__hint { font-size: var(--text-xs); color: var(--fg-low); line-height: var(--lh-snug); }
.field__err { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--danger); }
.field__err::before { content: "!"; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(251, 113, 133, .18); font-size: 9px; font-weight: 700; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger-line); box-shadow: 0 0 0 3px rgba(251, 113, 133, .10); }
.field--error .input:focus, .field--error .select:focus, .field--error .textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(251, 113, 133, .16); }

.input, .select, .textarea {
  width: 100%;
  height: var(--h-control);
  padding: 0 var(--sp-3);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  color: var(--fg-hi);
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: var(--r-control);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-low); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--line-brand);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14), inset 0 1px 2px rgba(0, 0, 0, .3);
  background: #07101D;
}
.input:disabled, .select:disabled, .textarea:disabled {
  color: var(--fg-low);
  background: rgba(6, 13, 24, .6);
  border-color: var(--line-1);
  cursor: not-allowed;
  opacity: .8;
}
.input[readonly] { color: var(--fg-mid); background: rgba(6, 13, 24, .55); }
.input--sm { height: var(--h-control-sm); font-size: var(--text-sm); }
.input--lg { height: var(--h-control-lg); font-size: var(--fs-15); }
.input--mono { font-family: var(--font-num); letter-spacing: .06em; }
.textarea { height: auto; min-height: 112px; padding: var(--sp-3); line-height: var(--lh-body); resize: vertical; }

/* 下拉箭头 */
.select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2393A6C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.select option { background: var(--bg-raised); color: var(--fg-base); }

/* 前后缀：单位 / 图标 / 内嵌按钮 */
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap .input { padding-right: 76px; }
.input-wrap__suffix {
  position: absolute; right: var(--sp-3);
  font-size: var(--text-xs); color: var(--fg-low);
  font-family: var(--font-num);
  pointer-events: none;
}
.input-wrap__prefix {
  position: absolute; left: var(--sp-3);
  color: var(--fg-low);
  display: flex; align-items: center;
  pointer-events: none;
}
.input-wrap--prefix .input { padding-left: 36px; }
.input-wrap--action .input { padding-right: 96px; }
.input-wrap__btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }

/* 单行"标签 + 控件"网格（卡片内最常见的排版） */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.form-row__label { padding-top: 9px; font-size: var(--text-sm); color: var(--fg-mid); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 复选框 / 单选 */
.check { display: inline-flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: var(--text-sm); color: var(--fg-base); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 16px; height: 16px; flex: 0 0 16px;
  margin-top: 3px;
  border-radius: 4px;
  border: 1px solid var(--line-3);
  background: var(--bg-inset);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.check__box::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #041019;
  border-bottom: 2px solid #041019;
  transform: rotate(-45deg) scale(.4);
  opacity: 0;
  transition: all var(--dur-fast) var(--ease-spring);
  margin-top: -2px;
}
.check input:checked + .check__box { background: var(--grad-brand); border-color: transparent; box-shadow: 0 2px 8px -2px rgba(56, 189, 248, .7); }
.check input:checked + .check__box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--cyan-300); outline-offset: 2px; }
.check__text { line-height: var(--lh-snug); }
.check--block { display: flex; }
.check a { color: var(--info); }

/* 滑块 */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px;
  background: transparent; cursor: pointer;
  --range-pct: 50%;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan-400) 0%, var(--blue-500) var(--range-pct), rgba(125, 165, 220, .18) var(--range-pct), rgba(125, 165, 220, .18) 100%);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px;
  border-radius: 50%; border: 2px solid #041019;
  background: var(--cyan-300);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .55), 0 0 14px rgba(34, 211, 238, .8);
}
.range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(125, 165, 220, .18); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--grad-brand); }
.range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--cyan-300); border: 2px solid #041019; }

/* 开关 */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  width: 42px; height: 24px; flex: 0 0 42px;
  border-radius: var(--r-pill);
  background: rgba(125, 165, 220, .16);
  border: 1px solid var(--line-2);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.switch__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #E8F2FF, #B9CEE8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform var(--dur) var(--ease-spring), background var(--dur);
}
.switch input:checked + .switch__track { background: var(--grad-brand); border-color: transparent; box-shadow: 0 0 16px -2px rgba(56, 189, 248, .8); }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: #041019; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--cyan-300); outline-offset: 3px; }
.switch input:disabled + .switch__track { opacity: .4; cursor: not-allowed; }
.switch__text { font-size: var(--text-sm); color: var(--fg-base); }
.switch--sm .switch__track { width: 34px; height: 20px; flex-basis: 34px; }
.switch--sm .switch__track::after { width: 14px; height: 14px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(14px); }

/* 开关行（标签 + 说明 + 开关，卡片内高频） */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--line-1);
}
.toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.toggle-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row__title { font-size: var(--text-sm); color: var(--fg-base); font-weight: var(--fw-medium); }
.toggle-row__desc { font-size: var(--text-xs); color: var(--fg-low); line-height: var(--lh-snug); }

/* -----------------------------------------------------------------------------
   6. 分段控件 / Tabs
   -------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-md);
  background: var(--bg-inset);
  border: 1px solid var(--line-1);
}
.segmented__item {
  height: 30px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  color: var(--fg-mid);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.segmented__item:hover { color: var(--fg-hi); background: rgba(96, 165, 250, .08); }
.segmented__item.is-active {
  color: var(--fg-hi);
  background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(59, 130, 246, .10));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .32), 0 1px 6px -2px rgba(56, 189, 248, .5);
}
.segmented--block { display: flex; }
.segmented--block .segmented__item { flex: 1; text-align: center; }

.tabs { display: flex; align-items: center; gap: var(--sp-5); border-bottom: 1px solid var(--line-1); }
.tab {
  position: relative;
  padding: var(--sp-3) 2px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-mid);
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--fg-hi); }
.tab.is-active { color: var(--fg-hi); }
.tab.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: var(--grad-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, .85);
}
.tab__count {
  margin-left: 6px;
  font-family: var(--font-num); font-size: 10px;
  padding: 2px 5px; border-radius: var(--r-pill);
  background: rgba(56, 189, 248, .14); color: var(--blue-300);
}
.tabs--pill { border-bottom: 0; gap: var(--sp-2); padding: 4px; background: var(--bg-inset); border-radius: var(--r-md); border: 1px solid var(--line-1); }
.tabs--pill .tab { padding: 6px var(--sp-3); border-radius: var(--r-xs); }
.tabs--pill .tab.is-active { background: rgba(56, 189, 248, .16); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .28); }
.tabs--pill .tab.is-active::after { display: none; }

/* -----------------------------------------------------------------------------
   7. 步骤条
   -------------------------------------------------------------------------- */
.steps { display: flex; align-items: flex-start; gap: 0; }
.step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); min-width: 0; padding: 0 var(--sp-2); }
.step__dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--fw-semi);
  color: var(--fg-low);
  background: var(--bg-raised);
  border: 1px solid var(--line-2);
  transition: all var(--dur) var(--ease-out);
}
.step__line {
  position: absolute; top: 14px; left: 50%; right: -50%; height: 1px;
  background: var(--line-2);
  z-index: 0;
}
.step:last-child .step__line { display: none; }
.step__label { font-size: var(--text-xs); color: var(--fg-low); line-height: var(--lh-snug); }
.step__desc { font-size: 10px; color: var(--fg-faint); }
.step.is-done .step__dot { color: #041019; background: var(--blue-400); border-color: transparent; }
.step.is-done .step__line { background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); }
.step.is-done .step__label { color: var(--fg-mid); }
.step.is-active .step__dot {
  color: #041019;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .14), 0 0 18px rgba(56, 189, 248, .8);
}
.step.is-active .step__label { color: var(--fg-hi); font-weight: var(--fw-medium); }
.step.is-active .step__line { background: linear-gradient(90deg, var(--cyan-400), var(--line-2)); }
.step--err .step__dot { color: #2A0410; background: var(--danger); border-color: transparent; }

/* 竖向步骤（右侧控制坞的"开播自检"用它） */
.steps--v { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.steps--v .step { flex-direction: row; align-items: center; text-align: left; gap: var(--sp-3); padding: var(--sp-2) 0; }
.steps--v .step__line { display: none; }
.steps--v .step__dot { width: 22px; height: 22px; font-size: 10px; flex: 0 0 22px; }
.steps--v .step__label { color: var(--fg-base); font-size: var(--text-sm); }

/* -----------------------------------------------------------------------------
   8. 徽章 / 状态灯 / 标签
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
  background: rgba(147, 197, 253, .08);
  color: var(--blue-200);
  border-color: rgba(147, 197, 253, .22);
}
.badge--lg { height: 26px; padding: 0 10px; font-size: var(--text-xs); }
.badge--ok { background: var(--ok-soft); color: #8FF0C9; border-color: var(--ok-line); }
.badge--warn { background: var(--warn-soft); color: #FFE1A3; border-color: var(--warn-line); }
.badge--danger { background: var(--danger-soft); color: #FFC2CB; border-color: var(--danger-line); }
.badge--live { background: var(--live-soft); color: #FFC7D1; border-color: var(--live-line); }
.badge--vip { background: var(--vip-soft); color: #DCCBFF; border-color: var(--vip-line); }
.badge--info { background: var(--info-soft); color: var(--blue-200); border-color: var(--info-line); }
.badge--muted { background: rgba(125, 165, 220, .07); color: var(--fg-low); border-color: var(--line-1); }
.badge--solid-ok { background: var(--ok); color: #04241A; border-color: transparent; }
.badge--solid-live { background: var(--grad-live); color: #2A0410; border-color: transparent; box-shadow: 0 0 14px -3px rgba(255, 77, 109, .9); }
.badge--mono { font-family: var(--font-num); letter-spacing: .04em; }

/* 状态圆点（可随徽章或独立出现） */
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dot--pulse { animation: dotPulse 1.8s var(--ease-in-out) infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

/* 直播状态灯：呼吸红环 + 外扩波纹，长时间直播也不刺眼 */
.live-light {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 77, 109, .20), rgba(255, 77, 109, .08));
  border: 1px solid var(--live-line);
  color: #FFD3DB;
  font-size: var(--text-xs); font-weight: var(--fw-semi);
  letter-spacing: .06em;
  box-shadow: 0 0 20px -6px rgba(255, 77, 109, .8);
}
.live-light__core {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live-strong);
  box-shadow: 0 0 10px 1px rgba(255, 77, 109, .95);
}
.live-light__core::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 77, 109, .8);
  animation: liveRipple 2.4s var(--ease-out) infinite;
}
@keyframes liveRipple {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.live-light--idle {
  background: rgba(125, 165, 220, .07);
  border-color: var(--line-2);
  color: var(--fg-mid);
  box-shadow: none;
  letter-spacing: .02em;
  font-weight: var(--fw-medium);
}
.live-light--idle .live-light__core { background: var(--fg-low); box-shadow: none; }
.live-light--idle .live-light__core::after { display: none; }

/* 直播时长计时（等宽，随秒跳动） */
.live-timer { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-15); color: var(--fg-hi); letter-spacing: .04em; }

/* 普通标签（可关闭） */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  color: var(--fg-mid);
  background: rgba(125, 165, 220, .08);
  border: 1px solid var(--line-1);
}
.tag__x { color: var(--fg-low); font-size: 13px; line-height: 1; }
.tag__x:hover { color: var(--danger); }

/* -----------------------------------------------------------------------------
   9. KPI 数字块
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--fg-low); letter-spacing: .04em; }
.stat__value { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-24); font-weight: var(--fw-semi); color: var(--fg-hi); line-height: 1.1; letter-spacing: -.01em; }
.stat__unit { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--fg-low); font-family: var(--font-sans); }
.stat__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-micro); font-family: var(--font-num); }
.stat__delta--up { color: var(--ok); }
.stat__delta--down { color: var(--danger); }
.stat__delta--flat { color: var(--fg-low); }
.stat--live .stat__value { color: #FFC7D1; }
.stat--warn .stat__value { color: var(--warn); }
.stat--danger .stat__value { color: var(--danger); }
.stat--ok .stat__value { color: var(--ok); }

/* KPI 横排（直播状态条用） */
.stat-strip { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.stat-strip .stat { padding: 0 var(--sp-5); }
.stat-strip .stat + .stat { border-left: 1px solid var(--line-1); }
.stat-strip .stat:first-child { padding-left: 0; }
@media (max-width: 900px) {
  .stat-strip .stat { padding: var(--sp-2) var(--sp-4); }
  .stat-strip .stat:first-child { padding-left: 0; }
}

/* -----------------------------------------------------------------------------
   10. 积分条 / 进度条 / 环形
   -------------------------------------------------------------------------- */
.meter {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(125, 165, 220, .13);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 50%);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(56, 189, 248, .7);
  transition: width var(--dur-xslow) var(--ease-out), background var(--dur-slow);
}
/* 流动光带：表示"还在计费中" */
.meter--flow .meter__fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: meterFlow 2.4s var(--ease-in-out) infinite;
}
@keyframes meterFlow {
  0%   { background-position: -70% 0; }
  100% { background-position: 170% 0; }
}
.meter--lg { height: 10px; }
.meter--sm { height: 4px; }
.meter--warn .meter__fill { background: linear-gradient(90deg, #FBBF24, #F59E0B); box-shadow: 0 0 12px rgba(251, 191, 36, .7); }
.meter--danger .meter__fill { background: linear-gradient(90deg, #FB7185, #F43F5E); box-shadow: 0 0 12px rgba(244, 63, 94, .7); }
.meter--ok .meter__fill { background: linear-gradient(90deg, #34D399, #10B981); box-shadow: 0 0 12px rgba(52, 211, 153, .7); }

/* 带刻度的积分条（余额 0~满） */
.credit { display: flex; flex-direction: column; gap: var(--sp-2); }
.credit__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.credit__label { font-size: var(--text-xs); color: var(--fg-low); }
.credit__nums { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.credit__used { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--fg-hi); }
.credit__total { font-size: var(--text-xs); color: var(--fg-low); }
.credit__foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-mid); }

/* 环形进度（VIP 资格/库存等小指标） */
.ring { --pct: 60; --size: 44px; width: var(--size); height: var(--size); position: relative; flex: 0 0 auto; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--cyan-400) calc(var(--pct) * 1%), rgba(125, 165, 220, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6));
}
.ring__text { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-size: 10px; color: var(--fg-base); }

/* -----------------------------------------------------------------------------
   11. 表格
   -------------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow: auto; border-radius: var(--r-md); border: 1px solid var(--line-1); background: rgba(4, 9, 17, .28); }
.table { font-size: var(--text-sm); min-width: 560px; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-micro);
  font-weight: var(--fw-semi);
  letter-spacing: .08em;
  color: var(--fg-low);
  white-space: nowrap;
  background: linear-gradient(180deg, #0A1524, #08111E);
  border-bottom: 1px solid var(--line-2);
}
.table tbody td {
  padding: 11px var(--sp-4);
  color: var(--fg-base);
  border-bottom: 1px solid var(--line-1);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: rgba(56, 189, 248, .05); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: rgba(56, 189, 248, .09); }
.table tbody tr.is-muted td { color: var(--fg-low); }
.table .cell-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .cell-time { white-space: nowrap; }
.table .cell-strong { color: var(--fg-hi); font-weight: var(--fw-medium); }
.table .cell-tight { padding-top: 8px; padding-bottom: 8px; }
.table .cell-actions { text-align: right; white-space: nowrap; }
.table--dense tbody td { padding: 7px var(--sp-3); font-size: var(--text-xs); }
.table--dense thead th { padding: 8px var(--sp-3); }
.table--fixed { table-layout: fixed; }
.table__empty td { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--fg-low); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.th-sort:hover { color: var(--fg-base); }
.th-sort__arrow { opacity: .5; font-size: 9px; }

/* -----------------------------------------------------------------------------
   12. 分页
   -------------------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pager__info { font-size: var(--text-xs); color: var(--fg-low); margin-right: auto; font-family: var(--font-num); }
.pager__btn {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  font-family: var(--font-num);
  color: var(--fg-mid);
  background: rgba(125, 165, 220, .05);
  border: 1px solid var(--line-1);
  transition: all var(--dur-fast) var(--ease-out);
}
.pager__btn:hover:not(:disabled) { color: var(--fg-hi); border-color: var(--line-brand); background: rgba(56, 189, 248, .10); }
.pager__btn.is-active {
  color: #041019; font-weight: var(--fw-semi);
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(56, 189, 248, .9);
}
.pager__btn:disabled { opacity: .35; cursor: not-allowed; }
.pager__gap { color: var(--fg-faint); font-family: var(--font-num); padding: 0 2px; }

/* -----------------------------------------------------------------------------
   13. 空态 / 骨架屏 / 错误态
   -------------------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-5); }
.empty__art {
  position: relative;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 20px;
  color: var(--blue-400);
  background: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, .18), transparent 70%), var(--bg-panel-2);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 24px rgba(56, 189, 248, .10);
}
.empty__art svg { width: 34px; height: 34px; opacity: .85; }
.empty__art::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 26px;
  border: 1px dashed rgba(56, 189, 248, .22);
  animation: emptyOrbit 22s linear infinite;
}
@keyframes emptyOrbit { to { transform: rotate(360deg); } }
.empty__title { font-size: var(--text-h3); color: var(--fg-hi); font-weight: var(--fw-semi); }
.empty__desc { font-size: var(--text-sm); color: var(--fg-mid); max-width: 46ch; line-height: var(--lh-body); }
.empty__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-1); }
.empty--sm { padding: var(--sp-6) var(--sp-3); }
.empty--sm .empty__art { width: 52px; height: 52px; border-radius: 14px; }
.empty--sm .empty__art svg { width: 24px; height: 24px; }
.empty--sm .empty__title { font-size: var(--text-sm); }
.empty--sm .empty__desc { font-size: var(--text-xs); }

/* 错误态：用红色边光包住整个卡片区 */
.state-error {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 0%, rgba(244, 63, 94, .13), transparent 62%);
  border: 1px dashed var(--danger-line);
}
.state-error__icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: #FFC2CB;
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  font-family: var(--font-num); font-size: 20px; font-weight: 700;
  box-shadow: 0 0 24px -6px rgba(244, 63, 94, .8);
}
.state-error__title { font-size: var(--text-h3); color: #FFD5DC; font-weight: var(--fw-semi); }
.state-error__desc { font-size: var(--text-sm); color: var(--fg-mid); max-width: 52ch; line-height: var(--lh-body); }
.state-error__code { font-family: var(--font-num); font-size: var(--text-xs); color: var(--fg-low); padding: 4px 8px; border-radius: var(--r-xs); background: rgba(4, 9, 17, .6); border: 1px solid var(--line-1); }

/* 骨架屏：加载中用，形状与真实内容一致，避免跳动 */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: rgba(125, 165, 220, .09);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(147, 197, 253, .16) 46%, transparent 72%);
  background-size: 200% 100%;
  animation: skel 1.5s var(--ease-in-out) infinite;
}
@keyframes skel {
  0%   { background-position: 140% 0; }
  100% { background-position: -60% 0; }
}
.skeleton--text { height: 12px; margin: 6px 0; }
.skeleton--title { height: 18px; width: 38%; }
.skeleton--line { height: 12px; }
.skeleton--w40 { width: 40%; } .skeleton--w60 { width: 60%; } .skeleton--w80 { width: 80%; }
.skeleton--block { height: 84px; border-radius: var(--r-md); }
.skeleton--circle { border-radius: 50%; width: 36px; height: 36px; }

/* -----------------------------------------------------------------------------
   14. 提示条 Alert / Banner（积分不足、卡密到期都靠它）
   -------------------------------------------------------------------------- */
.alert {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(9, 17, 30, .72);
  font-size: var(--text-sm);
  color: var(--fg-base);
  overflow: hidden;
}
.alert__icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; }
.alert__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.alert__title { font-weight: var(--fw-semi); color: var(--fg-hi); font-size: var(--text-sm); }
.alert__desc { color: var(--fg-mid); font-size: var(--text-xs); line-height: var(--lh-body); }
.alert__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.alert--info { border-color: var(--info-line); background: linear-gradient(90deg, rgba(56, 189, 248, .11), rgba(9, 17, 30, .7) 55%); }
.alert--info .alert__icon { background: rgba(56, 189, 248, .18); color: var(--blue-200); }
.alert--ok { border-color: var(--ok-line); background: linear-gradient(90deg, rgba(52, 211, 153, .10), rgba(9, 17, 30, .7) 55%); }
.alert--ok .alert__icon { background: rgba(52, 211, 153, .18); color: #8FF0C9; }
.alert--warn { border-color: var(--warn-line); background: linear-gradient(90deg, rgba(251, 191, 36, .12), rgba(9, 17, 30, .7) 55%); }
.alert--warn .alert__icon { background: rgba(251, 191, 36, .18); color: #FFE1A3; }
.alert--danger { border-color: var(--danger-line); background: linear-gradient(90deg, rgba(244, 63, 94, .13), rgba(9, 17, 30, .7) 55%); }
.alert--danger .alert__icon { background: rgba(244, 63, 94, .2); color: #FFC2CB; }
.alert--solid-warn { border-color: transparent; background: linear-gradient(90deg, rgba(251, 191, 36, .20), rgba(251, 191, 36, .06)); }
/* 左侧发光竖条：让"积分不足"在长页里一眼可见 */
.alert--strip::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--info);
  box-shadow: 0 0 14px 1px rgba(56, 189, 248, .7);
}
.alert--warn.alert--strip::before { background: var(--warn); box-shadow: 0 0 14px 1px rgba(251, 191, 36, .7); }
.alert--danger.alert--strip::before { background: var(--danger); box-shadow: 0 0 14px 1px rgba(244, 63, 94, .7); }
.alert--ok.alert--strip::before { background: var(--ok); box-shadow: 0 0 14px 1px rgba(52, 211, 153, .7); }

/* -----------------------------------------------------------------------------
   15. Toast
   -------------------------------------------------------------------------- */
.toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); width: 356px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--glass-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-4);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  animation: toastIn var(--dur-slow) var(--ease-spring) both;
  overflow: hidden;
}
.toast.is-leaving { animation: toastOut var(--dur) var(--ease-in-out) both; }
@keyframes toastIn {
  from { opacity: 0; transform: translate3d(18px, -6px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(16px, 0, 0) scale(.98); }
}
.toast::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--info);
  box-shadow: 0 0 14px 1px currentColor;
}
.toast--ok::before { background: var(--ok); }
.toast--warn::before { background: var(--warn); }
.toast--danger::before { background: var(--danger); }
.toast__icon { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(56, 189, 248, .16); color: var(--blue-200); margin-top: 1px; }
.toast--ok .toast__icon { background: rgba(52, 211, 153, .16); color: #8FF0C9; }
.toast--warn .toast__icon { background: rgba(251, 191, 36, .16); color: #FFE1A3; }
.toast--danger .toast__icon { background: rgba(244, 63, 94, .18); color: #FFC2CB; }
.toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.toast__title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--fg-hi); }
.toast__desc { font-size: var(--text-xs); color: var(--fg-mid); line-height: var(--lh-snug); }
.toast__close { color: var(--fg-low); padding: 2px; font-size: 14px; line-height: 1; }
.toast__close:hover { color: var(--fg-hi); }
/* 自动关闭进度线 */
.toast__timer { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: rgba(56, 189, 248, .55); transform-origin: left; animation: toastTimer 4.6s linear both; }
.toast--ok .toast__timer { background: rgba(52, 211, 153, .6); }
.toast--warn .toast__timer { background: rgba(251, 191, 36, .6); }
.toast--danger .toast__timer { background: rgba(244, 63, 94, .6); }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* -----------------------------------------------------------------------------
   16. Modal
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.modal.is-open { display: block; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 5, 11, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn var(--dur) var(--ease-out) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal__dialog {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  margin: 10vh auto 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0C1727, #070E1A);
  border: 1px solid var(--line-brand);
  box-shadow: var(--sh-4), var(--glow-brand);
  animation: modalIn var(--dur-slow) var(--ease-spring) both;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
@keyframes modalIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal__dialog--lg { width: min(760px, calc(100vw - 32px)); }
.modal__dialog--sm { width: min(400px, calc(100vw - 32px)); }
.modal__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal__title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal__title h3 { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--fg-hi); }
.modal__title p { font-size: var(--text-xs); color: var(--fg-mid); line-height: var(--lh-body); }
.modal__close { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--fg-low); font-size: 16px; flex: 0 0 28px; }
.modal__close:hover { background: rgba(125, 165, 220, .1); color: var(--fg-hi); }
.modal__body { padding: var(--sp-2) var(--sp-5) var(--sp-5); overflow: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.modal__foot { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-1); background: rgba(4, 9, 17, .35); border-radius: 0 0 var(--r-lg) var(--r-lg); flex-wrap: wrap; }
.modal__foot--between { justify-content: space-between; }
.modal__hint { font-size: var(--text-xs); color: var(--fg-low); margin-right: auto; }
/* 顶部发光细线，增强"浮起"感 */
.modal__dialog::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: var(--grad-fade-x);
  opacity: .9;
}

/* -----------------------------------------------------------------------------
   17. 播放器 / 字幕条
   -------------------------------------------------------------------------- */
.player {
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, .16), transparent 60%),
    linear-gradient(180deg, rgba(11, 21, 36, .9), rgba(6, 13, 24, .95));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(215, 235, 255, .05), var(--sh-1);
  overflow: hidden;
}
.player__top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.player__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player__now { font-size: var(--text-xs); color: var(--fg-low); }
.player__title { font-size: var(--text-sm); color: var(--fg-hi); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: auto; }
.player__eq span { width: 2px; border-radius: 2px; background: var(--cyan-400); box-shadow: 0 0 6px rgba(34, 211, 238, .8); animation: eqBounce 1.15s var(--ease-in-out) infinite; }
.player__eq span:nth-child(1) { height: 35%; animation-delay: -.1s; }
.player__eq span:nth-child(2) { height: 85%; animation-delay: -.35s; }
.player__eq span:nth-child(3) { height: 55%; animation-delay: -.6s; }
.player__eq span:nth-child(4) { height: 100%; animation-delay: -.2s; }
.player__eq span:nth-child(5) { height: 45%; animation-delay: -.75s; }
@keyframes eqBounce { 0%, 100% { transform: scaleY(.35); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.player__eq.is-paused span { animation-play-state: paused; opacity: .35; }

/* 进度 / 波形 */
.player__wave { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 var(--sp-4); }
.player__wave i { flex: 1; border-radius: 2px; background: rgba(96, 165, 250, .25); min-height: 3px; }
.player__wave i.is-played { background: linear-gradient(180deg, var(--cyan-300), var(--blue-500)); box-shadow: 0 0 8px rgba(34, 211, 238, .55); }
.player__wave i.is-head { background: var(--cyan-200); box-shadow: 0 0 10px rgba(165, 243, 252, .9); }

.player__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.player__btn {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--fg-base);
  background: rgba(125, 165, 220, .08);
  border: 1px solid var(--line-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.player__btn:hover { color: var(--fg-hi); background: rgba(56, 189, 248, .16); border-color: var(--line-brand); }
.player__btn--main {
  width: 42px; height: 42px; flex-basis: 42px;
  color: #041019;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 4px 16px -4px rgba(56, 189, 248, .9);
}
.player__btn--main:hover { filter: brightness(1.08); }
.player__time { font-family: var(--font-num); font-size: var(--text-xs); color: var(--fg-mid); letter-spacing: .02em; }
.player__seek { flex: 1; height: 4px; border-radius: 4px; background: rgba(125, 165, 220, .16); position: relative; overflow: hidden; }
.player__seek i { position: absolute; inset: 0 auto 0 0; width: var(--pct, 28%); border-radius: 4px; background: var(--grad-brand); box-shadow: 0 0 10px rgba(56, 189, 248, .7); }
.player__vol { display: flex; align-items: center; gap: 6px; width: 86px; }
.player__vol .meter { height: 4px; }
.player__tag { margin-left: auto; }

/* 字幕条：直播画面上的叠层字幕（预览用渐变底模拟） */
.subtitle {
  margin: 0 var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(3, 8, 16, .82);
  border: 1px solid rgba(56, 189, 248, .2);
  box-shadow: inset 0 0 26px rgba(37, 99, 235, .14);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  overflow: hidden;
}
.subtitle::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, .9);
}
.subtitle__index { font-family: var(--font-num); font-size: 10px; letter-spacing: .1em; color: var(--cyan-300); }
.subtitle__text {
  font-size: var(--fs-15);
  line-height: 1.5;
  color: #F4F9FF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  transition: opacity var(--dur-slow);
}
.subtitle__text.is-swap { animation: subSwap var(--dur-slow) var(--ease-out); }
@keyframes subSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
   18. 参考音上传区
   -------------------------------------------------------------------------- */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px dashed rgba(96, 165, 250, .40);
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .10), transparent 62%),
    rgba(6, 13, 24, .5);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--cyan-400);
  background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .18), transparent 62%), rgba(6, 13, 24, .6);
  box-shadow: inset 0 0 40px rgba(34, 211, 238, .10), 0 0 0 3px rgba(56, 189, 248, .07);
}
.dropzone.is-over { border-style: solid; }
.dropzone__icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--cyan-300);
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .3);
  box-shadow: 0 0 20px -6px rgba(56, 189, 248, .8);
}
.dropzone__title { font-size: var(--text-sm); color: var(--fg-hi); font-weight: var(--fw-medium); }
.dropzone__desc { font-size: var(--text-xs); color: var(--fg-low); line-height: var(--lh-snug); }
.dropzone__hint { font-size: 10px; color: var(--fg-faint); font-family: var(--font-num); }

/* 已上传参考音条目 */
.clip {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(125, 165, 220, .06);
  border: 1px solid var(--line-1);
  transition: all var(--dur-fast);
}
.clip:hover { border-color: var(--line-brand); background: rgba(56, 189, 248, .07); }
.clip.is-active { border-color: var(--line-brand); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .18); }
.clip__wave { display: flex; align-items: center; gap: 1.5px; height: 22px; flex: 0 0 54px; }
.clip__wave i { width: 2px; border-radius: 1px; background: rgba(147, 197, 253, .45); }
.clip.is-active .clip__wave i { background: linear-gradient(180deg, var(--cyan-300), var(--blue-500)); }
.clip__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.clip__name { font-size: var(--text-sm); color: var(--fg-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip__info { font-size: 10px; color: var(--fg-low); font-family: var(--font-num); }
.clip__del { color: var(--fg-low); width: 22px; height: 22px; border-radius: var(--r-xs); display: grid; place-items: center; flex: 0 0 22px; }
.clip__del:hover { color: var(--danger); background: rgba(244, 63, 94, .12); }

/* 空槽位（音库为空时占位） */
.slot-empty {
  display: grid; place-items: center;
  min-height: 68px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  color: var(--fg-low);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--sp-3);
}

/* -----------------------------------------------------------------------------
   19. 日志控制台
   -------------------------------------------------------------------------- */
.console {
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(4, 9, 17, .92), rgba(3, 6, 12, .96));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(215, 235, 255, .04);
  overflow: hidden;
}
.console__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  border-bottom: 1px solid var(--line-1);
  background: rgba(11, 21, 36, .7);
}
.console__dots { display: flex; gap: 5px; margin-right: var(--sp-2); }
.console__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(125, 165, 220, .28); }
.console__dots i:first-child { background: rgba(244, 63, 94, .6); }
.console__dots i:nth-child(2) { background: rgba(251, 191, 36, .6); }
.console__dots i:nth-child(3) { background: rgba(52, 211, 153, .6); }
.console__title { font-family: var(--font-num); font-size: 10px; letter-spacing: .1em; color: var(--fg-low); text-transform: uppercase; }
.console__tools { margin-left: auto; display: flex; gap: var(--sp-1); }
.console__tool { font-size: 10px; color: var(--fg-low); padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
.console__tool:hover { color: var(--fg-base); border-color: var(--line-2); }
.console__body {
  padding: var(--sp-3);
  max-height: 190px;
  overflow: auto;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  line-height: 1.75;
  display: flex; flex-direction: column; gap: 1px;
  scroll-behavior: auto;
}
.log-line { display: flex; gap: var(--sp-2); white-space: pre-wrap; word-break: break-word; animation: logIn var(--dur-slow) var(--ease-out) both; }
@keyframes logIn { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: none; } }
.log-line__t { color: var(--fg-faint); flex: 0 0 auto; }
.log-line__lv { flex: 0 0 42px; text-align: center; font-size: 10px; border-radius: 3px; height: 16px; line-height: 16px; margin-top: 1px; letter-spacing: .04em; }
.log-line__msg { color: var(--fg-mid); flex: 1; min-width: 0; }
.log-line--info .log-line__lv { color: var(--blue-200); background: rgba(56, 189, 248, .12); }
.log-line--ok .log-line__lv { color: #8FF0C9; background: rgba(52, 211, 153, .12); }
.log-line--ok .log-line__msg { color: #A8DCC9; }
.log-line--warn .log-line__lv { color: #FFE1A3; background: rgba(251, 191, 36, .12); }
.log-line--warn .log-line__msg { color: #E8D1A0; }
.log-line--err .log-line__lv { color: #FFC2CB; background: rgba(244, 63, 94, .16); }
.log-line--err .log-line__msg { color: #F3B9C2; }
.log-line--sys .log-line__lv { color: var(--violet-400); background: rgba(139, 92, 246, .14); }
/* 末尾光标：表示"正在推流日志" */
.console__cursor { display: inline-block; width: 6px; height: 12px; background: var(--cyan-300); vertical-align: -1px; animation: caret 1.05s steps(1) infinite; box-shadow: 0 0 8px rgba(103, 232, 249, .9); }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* -----------------------------------------------------------------------------
   20. 弹幕流
   -------------------------------------------------------------------------- */
.danmu-stream { display: flex; flex-direction: column; gap: 0; max-height: 220px; overflow: auto; }
.danmu-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border-bottom: 1px dashed var(--line-1);
  font-size: var(--text-xs);
  animation: danmuIn var(--dur-slow) var(--ease-out) both;
}
@keyframes danmuIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.danmu-item:last-child { border-bottom: 0; }
.danmu-item__t { color: var(--fg-faint); font-family: var(--font-num); font-size: 10px; flex: 0 0 46px; padding-top: 1px; }
.danmu-item__who { color: var(--cyan-300); flex: 0 0 auto; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danmu-item__text { color: var(--fg-base); flex: 1; min-width: 0; line-height: 1.5; word-break: break-word; }
.danmu-item--enter .danmu-item__text { color: var(--fg-mid); }
.danmu-item--enter .danmu-item__who { color: var(--violet-400); }
.danmu-item--reply .danmu-item__text { color: #BFE3FF; }
.danmu-item__flag { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: rgba(56, 189, 248, .14); color: var(--blue-200); flex: 0 0 auto; margin-top: 1px; }

/* 统计小条 */
.mini-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.mini-stat { display: flex; align-items: baseline; gap: 5px; font-size: var(--text-xs); color: var(--fg-low); }
.mini-stat b { font-family: var(--font-num); font-size: var(--fs-13); color: var(--fg-hi); font-weight: var(--fw-semi); }

/* -----------------------------------------------------------------------------
   21. 房间卡（房间列表页）
   -------------------------------------------------------------------------- */
.room-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--grad-panel), var(--glass-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  overflow: hidden;
}
.room-card:hover { transform: translateY(-2px); border-color: var(--line-brand); box-shadow: var(--sh-3), 0 0 0 1px rgba(56, 189, 248, .08); }
.room-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-fade-x);
  opacity: .45;
}
.room-card--live { border-color: var(--live-line); box-shadow: var(--sh-3), 0 0 28px -14px rgba(255, 77, 109, .9); }
.room-card--live::after { background: linear-gradient(90deg, transparent, rgba(255, 77, 109, .75), transparent); opacity: .9; }
.room-card--expired { border-color: var(--warn-line); }
.room-card--expired::after { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .7), transparent); }
.room-card__top { display: flex; align-items: center; gap: var(--sp-3); }
.room-card__icon {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: var(--fw-bold); font-size: var(--fs-15);
  color: var(--blue-200);
  background: rgba(56, 189, 248, .10);
  border: 1px solid rgba(56, 189, 248, .26);
}
.room-card--live .room-card__icon { color: #FFC7D1; background: var(--live-soft); border-color: var(--live-line); }
.room-card--expired .room-card__icon { color: #FFE1A3; background: var(--warn-soft); border-color: var(--warn-line); }
.room-card__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room-card__name b { font-size: var(--fs-15); color: var(--fg-hi); font-weight: var(--fw-semi); }
.room-card__name span { font-size: 10px; color: var(--fg-low); font-family: var(--font-num); letter-spacing: .04em; }
.room-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--text-xs); color: var(--fg-mid); }
.room-card__meta div { display: flex; align-items: center; gap: 5px; }
.room-card__meta b { font-family: var(--font-num); color: var(--fg-base); font-weight: var(--fw-medium); }
.room-card__actions { display: flex; gap: var(--sp-2); margin-top: auto; }
.room-card__actions .btn { flex: 1; }
.room-card__ribbon {
  position: absolute; top: 12px; right: -26px;
  transform: rotate(35deg);
  padding: 2px 30px;
  font-size: 9px; letter-spacing: .1em;
  color: #2A0410; font-weight: var(--fw-bold);
  background: var(--grad-live);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* -----------------------------------------------------------------------------
   22. 二维码占位（扫码充值：接口未接时用它占位，接上后替换为真实二维码）
   -------------------------------------------------------------------------- */
.qr-box {
  position: relative;
  width: 132px; height: 132px;
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg, rgba(56, 189, 248, .18) 1px, transparent 1px) 0 0/11px 11px,
    linear-gradient(0deg, rgba(56, 189, 248, .18) 1px, transparent 1px) 0 0/11px 11px,
    var(--bg-inset);
  border: 1px solid var(--line-brand);
  box-shadow: inset 0 0 30px rgba(37, 99, 235, .18);
  display: grid; place-items: center;
  overflow: hidden;
}
.qr-box::before, .qr-box::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--cyan-300);
}
.qr-box::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.qr-box::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.qr-box__label { font-size: 10px; color: var(--fg-mid); text-align: center; line-height: 1.5; padding: 0 10px; }
.qr-box__scan {
  position: absolute; left: 6px; right: 6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
  box-shadow: 0 0 14px 2px rgba(34, 211, 238, .8);
  animation: qrScan 2.6s var(--ease-in-out) infinite;
}
@keyframes qrScan { 0% { top: 8%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 92%; opacity: 0; } }

/* -----------------------------------------------------------------------------
   23. 卡密展示 / 代码块 / 键值列表
   -------------------------------------------------------------------------- */
.code-box {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(4, 9, 17, .7);
  border: 1px solid var(--line-2);
  font-family: var(--font-num);
  font-size: var(--text-sm);
  letter-spacing: .1em;
  color: var(--cyan-200);
}
.code-box__code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-box--live { border-color: var(--live-line); color: #FFC7D1; }

.kv { display: flex; flex-direction: column; gap: var(--sp-2); }
.kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-xs); }
.kv__k { color: var(--fg-low); white-space: nowrap; }
.kv__v { color: var(--fg-base); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kv__v--hi { color: var(--fg-hi); font-weight: var(--fw-semi); }
.kv__v--live { color: #FFC7D1; }
.kv__v--warn { color: var(--warn); }
.kv__v--ok { color: var(--ok); }
.kv__v--danger { color: var(--danger); }

/* 复制按钮的短暂成功反馈 */
.copy-btn.is-copied { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }

/* =============================================================================
   24. 高密度一屏组件（Compact Console）
   —— 与紧凑模式配套：同样信息量，高度约为常规的 60~70%；配合 3~4 列卡片网格使用
   —— 规则：紧凑模式只用 .card--compact 内部的尺寸修饰类，不改变常规页面观感
   ========================================================================== */

/* 24.1 紧凑卡片：头 38px / 体 10-12px / 间距 8px */
.card--compact { border-radius: var(--r-md); }
.card--compact > .card__head { min-height: 38px; padding: 6px 12px; gap: 8px; }
.card--compact > .card__head .card__title { gap: 8px; }
.card--compact > .card__head .card__title h3 { font-size: var(--fs-13); }
.card--compact > .card__head .card__sub { font-size: 10px; }
.card--compact > .card__body { padding: 10px 12px 12px; gap: var(--compact-gap); }
.card--compact > .card__foot { padding: 7px 12px; gap: 6px; }
.card--compact .sec-no { width: 20px; height: 20px; font-size: 10px; box-shadow: none; }
.card--compact .card__head .badge { height: 18px; font-size: 9px; padding: 0 6px; }
.card--compact.card--section { overflow: hidden; }
/* 卡片内部纵向排布：主内容吃掉剩余高度，折叠/操作靠底 */
.card--compact > .card__body { display: flex; flex-direction: column; min-height: 0; }
.card--compact .push-bottom { margin-top: auto; }

/* 24.2 小尺寸控件 */
.input--xs, .select--xs { height: 28px; padding: 0 8px; font-size: var(--fs-12); border-radius: var(--r-xs); }
.select--xs { padding-right: 26px; background-position: right 9px center; background-size: 10px 7px; }
.textarea--xs { min-height: 56px; padding: 8px; font-size: var(--fs-12); border-radius: var(--r-xs); }
.segmented--xs { padding: 2px; border-radius: var(--r-xs); gap: 1px; }
.segmented--xs .segmented__item { height: 24px; padding: 0 9px; font-size: var(--fs-11); border-radius: 4px; }
.segmented--xs.segmented--block .segmented__item { padding: 0 4px; }
.switch--xs .switch__track { width: 30px; height: 18px; flex-basis: 30px; }
.switch--xs .switch__track::after { width: 12px; height: 12px; }
.switch--xs input:checked + .switch__track::after { transform: translateX(12px); }
.switch--xs .switch__text { font-size: var(--fs-11); color: var(--fg-mid); }
.badge--xs { height: 18px; padding: 0 6px; font-size: 9px; gap: 4px; }
.badge--xs .dot { width: 5px; height: 5px; flex-basis: 5px; }
.tag--xs { height: 20px; padding: 0 6px; font-size: 10px; gap: 4px; }

/* 24.3 胶囊选择（≤4 个选项，替代下拉；可换行） */
.pill-group { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 25px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  color: var(--fg-mid);
  background: rgba(125, 165, 220, .06);
  border: 1px solid var(--line-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pill:hover { color: var(--fg-hi); border-color: var(--line-brand); background: rgba(56, 189, 248, .08); }
.pill.is-active {
  color: var(--fg-hi);
  background: linear-gradient(180deg, rgba(56, 189, 248, .24), rgba(59, 130, 246, .10));
  border-color: rgba(56, 189, 248, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 10px -5px rgba(56, 189, 248, .9);
}
.pill--vip.is-active { background: linear-gradient(180deg, rgba(139, 92, 246, .28), rgba(99, 102, 241, .12)); border-color: var(--vip-line); }
.pill--add { border-style: dashed; color: var(--blue-200); }
.pill--danger { color: #FFC2CB; border-color: var(--danger-line); background: var(--danger-soft); }
.pill__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .85; flex: 0 0 5px; }

/* 24.4 数字步进（替代数字输入框） */
.stepper {
  display: inline-flex; align-items: center;
  height: 26px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--bg-inset);
  overflow: hidden;
  flex: 0 0 auto;
}
.stepper__btn {
  width: 22px; height: 100%;
  display: grid; place-items: center;
  color: var(--fg-mid);
  font-family: var(--font-num); font-size: 13px; line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.stepper__btn:hover { color: var(--fg-hi); background: rgba(56, 189, 248, .14); }
.stepper__btn:active { background: rgba(56, 189, 248, .22); }
.stepper__input {
  width: 28px; height: 100%;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg-hi);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus { background: rgba(56, 189, 248, .08); }
.stepper__unit { padding-right: 6px; font-size: 9px; color: var(--fg-low); white-space: nowrap; }

/* 24.5 行内字段：label 左 / 控件右（紧凑卡片的主力排版） */
.field-inline {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.field-inline--wide { grid-template-columns: 62px minmax(0, 1fr); }
.field-inline__label {
  font-size: var(--fs-11);
  color: var(--fg-low);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field-inline--top { align-items: start; }
.field-inline--top .field-inline__label { padding-top: 5px; }
.field-inline__ctrl { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }

/* 24.6 卡片内滚动区（日志 / 弹幕 / 流水唯一允许滚动的地方） */
.scroll-area {
  position: relative;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: var(--r-xs);
  overscroll-behavior: contain;
}
.scroll-area--inset { background: rgba(4, 9, 17, .5); border: 1px solid var(--line-1); padding: 6px 8px; }
.scroll-area--inset::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-area--inset::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, .35); border-radius: 3px; border: 0; }
.scroll-area--x { overflow-x: auto; overflow-y: hidden; }

/* 24.7 折叠：高级项默认收起（<details> 原生，无需 JS） */
.fold { border-top: 1px dashed var(--line-1); padding-top: 6px; }
.fold > summary {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-11);
  color: var(--fg-low);
  user-select: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "›";
  display: inline-block;
  font-size: 13px; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { color: var(--blue-200); }
.fold > summary .badge { margin-left: auto; }
.fold__body { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; }

/* 24.8 迷你 KPI（吸顶状态条专用） */
.kpi-mini { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kpi-mini__label { font-size: 9px; letter-spacing: .08em; color: var(--fg-low); white-space: nowrap; line-height: 1.2; }
.kpi-mini__value {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--fg-hi); line-height: 1.1;
}
.kpi-mini__unit { font-size: 9px; color: var(--fg-low); font-family: var(--font-sans); font-weight: var(--fw-regular); }
.kpi-mini--live .kpi-mini__value { color: #FFC7D1; }
.kpi-mini--warn .kpi-mini__value { color: var(--warn); }
.kpi-mini--danger .kpi-mini__value { color: var(--danger); }
.kpi-mini--ok .kpi-mini__value { color: var(--ok); }
.kpi-sep { width: 1px; height: 22px; background: var(--line-1); flex: 0 0 1px; }

/* 24.9 紧凑音色胶囊 / 参考音条（替代"大下拉 + 大上传区"） */
.voice-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px 0 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(125, 165, 220, .06);
  font-size: var(--fs-11); color: var(--fg-base);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.voice-pill:hover { border-color: var(--line-brand); color: var(--fg-hi); }
.voice-pill__avatar {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: var(--fw-bold); color: #041019;
  background: linear-gradient(160deg, rgba(59, 130, 246, .85), rgba(34, 211, 238, .55));
}
.voice-pill.is-active { border-color: var(--line-brand); background: rgba(56, 189, 248, .14); color: var(--fg-hi); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .22); }
.voice-pill__x { color: var(--fg-low); display: inline-flex; }
.voice-pill__x:hover { color: var(--danger); }
.upload-mini {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px;
  border-radius: var(--r-pill);
  border: 1px dashed rgba(56, 189, 248, .5);
  color: var(--blue-200);
  font-size: var(--fs-11);
  transition: all var(--dur-fast);
}
.upload-mini:hover { background: rgba(56, 189, 248, .12); border-color: var(--cyan-400); color: #fff; }

/* 24.10 一屏模式下的紧凑播放器 / 自检条 */
.player--compact .player__top { padding: 8px 10px 4px; }
.player--compact .player__top { padding: 7px 10px 3px; }
.player--compact .player__now { font-size: 10px; line-height: 1.3; }
.player--compact .player__title { font-size: 12.5px; line-height: 1.35; }
.player--compact .player__eq { height: 12px; }
.player--compact .player__wave { height: 26px; padding: 0 10px; }
.player--compact .player__bar { padding: 3px 8px 6px; gap: 6px; }
.player--compact .player__btn--main { width: 34px; height: 34px; flex-basis: 34px; }
.player--compact .subtitle { margin: 0 8px 6px; padding: 4px 8px; gap: 2px; flex: 0 0 auto; }
.player--compact .subtitle__index { font-size: 9px; letter-spacing: .06em; }
.player--compact .subtitle__text { font-size: var(--fs-12); line-height: 1.4; }
/* 紧凑播放器内部块不参与 flex 收缩，避免字幕被压扁裁切 */
.player--compact .player__top,
.player--compact .player__wave,
.player--compact .player__bar { flex: 0 0 auto; }
.check-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 10px;
  color: var(--fg-mid);
  background: rgba(125, 165, 220, .07);
  border: 1px solid var(--line-1);
  white-space: nowrap;
}
.check-chip__mark { font-family: var(--font-num); font-size: 10px; color: var(--fg-low); }
.check-chip--ok { color: #A8DCC9; background: var(--ok-soft); border-color: var(--ok-line); }
.check-chip--ok .check-chip__mark { color: var(--ok); }
.check-chip--warn { color: #FFE1A3; background: var(--warn-soft); border-color: var(--warn-line); }
.check-chip--warn .check-chip__mark { color: var(--warn); }
.check-chip--danger { color: #FFC2CB; background: var(--danger-soft); border-color: var(--danger-line); }

/* 24.11 紧凑日志条目（一屏模式日志卡内） */
.log-line--dense { font-size: 10.5px; line-height: 1.6; }
.log-line--dense .log-line__lv { flex-basis: 34px; height: 14px; line-height: 14px; font-size: 9px; }
.log-line--dense .log-line__t { font-size: 9.5px; }