/* ===========================================================================
     本文件只放"预览页专属布局"。组件样式一律在 components.css，
     令牌一律在 theme.css —— 便于前端直接复用，不把业务布局混进组件库。
     ========================================================================= */

  /* --- 页面骨架修正：登录页不需要侧栏/顶栏 --- */
  .app.is-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
  .app.is-auth .app__sidebar,
  .app.is-auth .app__topbar { display: none; }
  .app.is-auth .app__main { padding: 0; }

  /* 预览页右栏不吸顶：内容比一屏高，吸顶会被视口裁切 */
  .live-dock { position: static !important; }

  /* ---------------- 登录 / 注册 ---------------- */
  .auth { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); min-height: 100vh; }
  .auth__visual {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8);
    padding: clamp(32px, 4vw, 64px);
    border-right: 1px solid var(--line-1);
    background:
      radial-gradient(60% 50% at 12% 8%, rgba(37, 99, 235, .30), transparent 66%),
      radial-gradient(50% 44% at 88% 82%, rgba(34, 211, 238, .16), transparent 70%);
  }
  /* 同心环 + 中心光核：品牌视觉记忆点 */
  .auth__rings { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
  .auth__rings i {
    position: absolute; border-radius: 50%; border: 1px solid rgba(96, 165, 250, .14);
    width: var(--d); height: var(--d);
  }
  .auth__rings i::after {
    content: ""; position: absolute; top: -3px; left: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cyan-300); box-shadow: 0 0 12px 2px rgba(103, 232, 249, .9);
  }
  .auth__rings i:nth-child(1) { --d: 380px; animation: orbit 34s linear infinite; }
  .auth__rings i:nth-child(2) { --d: 580px; border-style: dashed; animation: orbit 52s linear infinite reverse; }
  .auth__rings i:nth-child(3) { --d: 820px; border-color: rgba(96, 165, 250, .08); animation: orbit 78s linear infinite; }
  @keyframes orbit { to { transform: rotate(360deg); } }
  .auth__rings::after {
    content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, .26), transparent 68%);
    filter: blur(28px); animation: corePulse 6s var(--ease-in-out) infinite;
  }
  @keyframes corePulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
  .auth__brand { position: relative; display: flex; align-items: center; gap: var(--sp-3); }
  .auth__copy { position: relative; max-width: 620px; }
  .auth__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--blue-300); padding: 6px 12px; border-radius: var(--r-pill);
    background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .24);
  }
  .auth__title {
    margin: 20px 0 16px;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.16; font-weight: var(--fw-bold); letter-spacing: -.025em;
    color: var(--fg-hi);
  }
  .auth__desc { font-size: var(--fs-15); color: var(--fg-mid); line-height: 1.78; max-width: 54ch; }
  .auth__features { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 14px; }
  .auth__features li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); color: var(--fg-base); line-height: var(--lh-body); }
  .auth__features .fi {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
    color: var(--cyan-300); background: rgba(56, 189, 248, .10); border: 1px solid rgba(56, 189, 248, .26);
  }
  .auth__features b { color: var(--fg-hi); font-weight: var(--fw-semi); }
  .auth__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .auth__form { display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); position: relative; }
  .auth__card { width: min(412px, 100%); }
  .auth__card .card__body { gap: var(--sp-5); padding: var(--sp-6); }
  .auth__switch-hint { text-align: center; font-size: var(--text-xs); color: var(--fg-low); }
  .auth__switch-hint button { color: var(--info); }
  .auth__switch-hint button:hover { color: var(--cyan-300); text-decoration: underline; text-underline-offset: 3px; }
  .divider-h { display: flex; align-items: center; gap: var(--sp-3); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
  .divider-h::before, .divider-h::after { content: ""; flex: 1; height: 1px; background: var(--line-1); }

  /* ---------------- 顶栏元素 ---------------- */
  .credit-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px;
    border-radius: var(--r-pill);
    background: rgba(56, 189, 248, .07);
    border: 1px solid rgba(56, 189, 248, .22);
    font-size: var(--text-xs); color: var(--fg-mid);
  }
  .credit-chip b { font-family: var(--font-num); font-size: var(--fs-14); color: var(--fg-hi); font-variant-numeric: tabular-nums; }
  .credit-chip--low { border-color: var(--warn-line); background: var(--warn-soft); color: #FFE1A3; }
  .credit-chip--low b { color: var(--warn); }
  .topbar__divider { width: 1px; height: 24px; background: var(--line-2); }
  .topbar__room { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(9, 17, 30, .6); font-size: var(--text-xs); color: var(--fg-mid); }
  .topbar__room b { color: var(--fg-base); font-weight: var(--fw-medium); }

  /* ---------------- 房间总览 ---------------- */
  .rooms-layout { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--section-gap); align-items: start; }
  .rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: var(--sp-4); }
  .rooms-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--h-topbar) + var(--content-pad)); }
  .quota-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-xs); color: var(--fg-mid); }
  .room-card__badge-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .add-room {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 214px; border-radius: var(--r-lg);
    border: 1px dashed var(--line-2); color: var(--fg-low);
    transition: all var(--dur) var(--ease-out); text-align: center; padding: var(--sp-4);
  }
  .add-room:hover { border-color: var(--line-brand); color: var(--blue-200); background: rgba(56, 189, 248, .05); }
  .add-room__plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(56, 189, 248, .06); }
  .add-room:hover .add-room__plus { border-color: var(--line-brand); box-shadow: 0 0 20px -6px rgba(56, 189, 248, .8); }

  /* ---------------- 直播间主页：紧凑一屏（v1.1） ----------------
     目标：1366~1920 宽一屏装下 ①~⑦；外层不滚动，只有日志/弹幕区内滚。
     结构：吸顶主状态条 → 单行异常提示（仅异常时）→ 左 3~4 列卡片网格 + 右固定监看坞 */
  :root { --w-live-dock: 360px; }
  @media (max-width: 1599px) { :root { --w-live-dock: 320px; } }
  @media (max-width: 1399px) { :root { --w-live-dock: 300px; } }

  /* 一屏模式：应用壳固定在视口高度，页面本身不滚动 */
  .app.is-fit { height: 100vh; overflow: hidden; --h-topbar: 52px; }
  .app.is-fit .app__main { padding: 10px 12px 12px; min-height: 0; overflow: hidden; }
  .view--fit { height: 100%; min-height: 0; }
  .view.is-active.view--fit { display: flex; }
  .view--fit > .page-wrap { height: 100%; max-width: none; width: 100%; display: flex; min-height: 0; }
  .live-console { display: flex; flex-direction: column; gap: 8px; width: 100%; flex: 1 1 auto; min-height: 0; }
  /* 一屏模式：顶栏只保留积分/通知/头像，房间与直播状态交给吸顶状态条，避免重复 */
  .app.is-fit .topbar__room,
  .app.is-fit #topLive { display: none; }

  /* 主状态条（吸顶，52px） */
  .live-bar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    min-height: var(--h-statusbar);
    padding: 6px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(11, 21, 36, .97), rgba(7, 14, 26, .95));
    box-shadow: var(--sh-2), var(--glass-highlight);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    transition: border-color var(--dur-slow), box-shadow var(--dur-slow);
  }
  .live-bar.is-live { border-color: var(--live-line); box-shadow: 0 0 0 1px rgba(255, 77, 109, .10), 0 10px 26px -18px rgba(255, 77, 109, .9); }
  .live-bar__id { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .live-bar__room {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 7px; border-radius: var(--r-xs);
    font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--fg-hi);
  }
  .live-bar__room:hover { background: rgba(96, 165, 250, .10); }
  .live-bar__stats { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
  .live-bar__warn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 8px; border-radius: var(--r-pill);
    font-size: 10px; color: #FFE1A3;
    background: var(--warn-soft); border: 1px solid var(--warn-line);
    white-space: nowrap; animation: barWarn 2.6s var(--ease-in-out) infinite;
  }
  .live-bar__warn .dot { color: var(--warn); }
  @keyframes barWarn { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, .12); } }
  .live-bar__actions { display: flex; align-items: center; gap: 5px; }

  /* 单行异常提示（积分不足 / 卡密到期 / 播放中断） */
  .live-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: var(--r-sm);
    font-size: var(--fs-12); line-height: 1.4;
    border: 1px solid var(--line-2); background: rgba(9, 17, 30, .82);
    animation: viewIn var(--dur) var(--ease-out) both;
  }
  .live-alert--warn { border-color: var(--warn-line); background: linear-gradient(90deg, rgba(251, 191, 36, .16), rgba(9, 17, 30, .78) 62%); }
  .live-alert--danger { border-color: var(--danger-line); background: linear-gradient(90deg, rgba(244, 63, 94, .17), rgba(9, 17, 30, .78) 62%); }
  .live-alert__icon { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; background: rgba(251, 191, 36, .2); color: #FFE1A3; }
  .live-alert--danger .live-alert__icon { background: rgba(244, 63, 94, .22); color: #FFC2CB; }
  .live-alert b { color: var(--fg-hi); font-weight: var(--fw-semi); }
  .live-alert .muted { color: var(--fg-mid); }
  .live-alert__spacer { flex: 1 1 auto; }
  .live-alert .btn { flex: 0 0 auto; }

  /* 主体：左网格 + 右监看坞（唯一占用剩余高度的容器） */
  .live-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-live-dock); gap: 8px; flex: 1 1 auto; min-height: 0; }
  .live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 0; }
  .live-grid > .card, .live-dock > .card { display: flex; flex-direction: column; min-height: 0; }
  .live-grid > .card--log { grid-column: span 1; }
  .live-dock { display: grid; grid-template-rows: minmax(0, 1.06fr) minmax(0, .94fr); gap: 8px; min-height: 0; }
  @media (min-width: 1760px) {
    .live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .live-grid > .card--log { grid-column: span 3; }
  }
  .live-grid .card__body, .live-dock .card__body { flex: 1 1 auto; min-height: 0; }
  .live-grid .card__foot, .live-dock .card__foot { flex: 0 0 auto; }

  /* ② 文案：文本域吃掉可伸缩高度，但不超过 84px */
  .live-textarea { flex: 1 1 auto; min-height: 46px; max-height: 84px; resize: none; font-size: var(--fs-12); line-height: 1.55; padding: 7px 8px; }
  .sentence--dense { padding: 3px 5px; font-size: 10.5px; gap: 6px; }
  .sentence--dense .sentence__n { flex-basis: 14px; font-size: 9.5px; }
  .sentence--dense .sentence__len { font-size: 9.5px; }

  /* ③ 弹幕：列表内部滚动，行高压缩 */
  .danmu-item--dense { padding: 3px 2px; font-size: 10.5px; gap: 5px; }
  .danmu-item--dense .danmu-item__t { flex-basis: 36px; font-size: 9px; }
  .danmu-item--dense .danmu-item__who { max-width: 60px; }
  .danmu-item--dense .danmu-item__flag { font-size: 8px; padding: 0 3px; }

  .mini-stat--dense { font-size: 10px; gap: 3px; }
  .sec3-help { color: var(--fg-low); font-size: 10px; line-height: 1.45; }
  .mini-stat--dense b { font-size: 11px; }

  /* ⑦ 开播控制：紧凑状态行 + 自检胶囊 */
  .dock-state { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-xs); background: rgba(4, 9, 17, .5); border: 1px solid var(--line-1); }
  .dock-actions { display: flex; gap: 6px; margin-top: auto; }
  .dock-actions .btn { flex: 1 1 0; }
  /* ⑥ 播放器：在坞内吸满剩余高度，字幕贴底，绝不被裁切 */
  #sec6 > .card__body { gap: 6px; }
  #sec6 .player { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 172px; }
  /* 大屏时让波形吃掉多余高度，避免播放器中间出现空洞 */
  #sec6 .player__wave { flex: 1 1 auto; height: auto; min-height: 26px; }
  #sec6 .player .subtitle { margin-top: auto; }
  .kv--dense { gap: 4px; }
  .kv--dense .kv__row { font-size: 10.5px; }

  /* 日志卡：控制台铺满卡片，内部滚动 */
  .card--log .console { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .card--log .console__head { border-radius: 0; }
  .card--log .console__body { max-height: none; flex: 1 1 auto; min-height: 0; font-size: 10.5px; line-height: 1.65; }
  .card--log .log-line { font-size: 10.5px; }

  /* 页内锚点：只在一屏模式失效时（窄屏流式）才出现 */
  .sec-nav { display: none; }

  .sentence-area { max-height: 78px; }

  /* 矮屏（1366×768 等）：继续压高度，保证 ①~⑤ + 日志一屏不出现卡片内滚 */
  @media (max-height: 800px) and (min-width: 1240px) {
    .app.is-fit .app__main { padding: 8px 10px 10px; }
    .live-console { gap: 6px; }
    .live-bar { min-height: 46px; padding: 4px 8px; gap: 8px; }
    .live-bar__room { height: 24px; }
    .live-alert { padding: 4px 9px; font-size: 11px; }
    .card--compact > .card__head { min-height: 34px; padding: 4px 10px; }
    .card--compact > .card__body { gap: 6px; padding: 8px 10px 10px; }
    .card--compact > .card__foot { padding: 5px 10px; }
    .live-textarea { min-height: 38px; max-height: 50px; }
    .sentence-area { max-height: 44px; }
    .live-grid, .live-body, .live-dock { gap: 6px; }
    .pill { height: 23px; padding: 0 8px; }
    .field-inline { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
    .field-inline--wide { grid-template-columns: 54px minmax(0, 1fr); }
    .fold { padding-top: 4px; }
    .danmu-item--dense { padding: 2px; }
    .player--compact .subtitle { padding: 5px 8px; }
    .player--compact .subtitle__text { font-size: var(--fs-12); }
    .dock-state { padding: 5px 7px; }
    #sec6 .kv--dense .kv__row:nth-child(3) { display: none; }
    #danmuStream, #logBody {
      -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
    }
  }

  /* 流式降级：<1240 恢复页面滚动，网格降列 */
  @media (max-width: 1239px) {
    .app.is-fit { height: auto; overflow: visible; }
    .app.is-fit .app__main { padding: var(--content-pad); overflow: visible; }
    .view--fit { height: auto; }
    .view.is-active.view--fit { display: block; }
    .view--fit > .page-wrap { display: block; height: auto; }
    .live-console { display: block; }
    .live-bar { margin-bottom: 8px; }
    .live-body { display: block; }
    .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(230px, auto); }
    .live-grid > .card--log { grid-column: span 2; min-height: 220px; }
    .live-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; margin-top: 8px; }
    .live-dock > .card { min-height: 320px; }
    .live-alert { margin-bottom: 8px; }
    /* 流式档才出现的 7 区块锚点导航（一屏档不需要跳转） */
    .sec-nav {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      margin-bottom: 8px; padding: 6px;
      border-radius: var(--r-md);
      background: rgba(8, 16, 30, .94);
      border: 1px solid var(--line-2);
      box-shadow: var(--sh-2);
      position: sticky; top: 52px; z-index: var(--z-sticky);
      overflow-x: auto; scrollbar-width: none;
    }
    .sec-nav::-webkit-scrollbar { display: none; }
    .sec-nav__item {
      display: inline-flex; align-items: center; gap: 5px;
      height: 30px; padding: 0 9px; border-radius: var(--r-xs);
      font-size: var(--fs-11); color: var(--fg-mid); white-space: nowrap;
    }
    .sec-nav__item:hover { color: var(--fg-hi); background: rgba(96, 165, 250, .08); }
    .sec-nav__item.is-active { color: var(--fg-hi); background: rgba(56, 189, 248, .15); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .32); }
    .sec-nav__no { font-family: var(--font-num); font-size: 11px; color: var(--blue-300); }
    .sec-nav__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--fg-faint); flex: 0 0 6px; }
    .sec-nav__dot.is-ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(52, 211, 153, .8); }
    .sec-nav__dot.is-warn { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 8px rgba(251, 191, 36, .9); }
  }
  @media (max-width: 760px) {
    .live-grid { grid-template-columns: minmax(0, 1fr); }
    .live-grid > .card--log { grid-column: span 1; }
    .live-dock { grid-template-columns: minmax(0, 1fr); }
    .live-bar__stats { margin-left: 0; width: 100%; justify-content: space-between; gap: 6px; }
    .live-bar__actions { width: 100%; justify-content: flex-end; }
  }
  /* ---------------- 充值中心 ---------------- */
  .billing-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
  .billing-hero__num { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
  .billing-hero__num b { font-family: var(--font-num); font-size: var(--fs-52); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.02em; color: var(--fg-hi); font-variant-numeric: tabular-nums; }
  .billing-hero__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding-left: var(--sp-6); border-left: 1px solid var(--line-1); }
  .denom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .denom {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--sp-3) var(--sp-2); border-radius: var(--r-sm);
    border: 1px solid var(--line-2); background: rgba(125, 165, 220, .04);
    font-family: var(--font-num); color: var(--fg-base); transition: all var(--dur-fast);
  }
  .denom span { font-size: 10px; font-family: var(--font-sans); color: var(--fg-low); }
  .denom b { font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--fg-hi); }
  .denom:hover { border-color: var(--line-brand); background: rgba(56, 189, 248, .08); }
  .denom.is-active { border-color: var(--line-brand); background: linear-gradient(180deg, rgba(56, 189, 248, .18), rgba(59, 130, 246, .06)); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .28), 0 6px 18px -12px rgba(56, 189, 248, .9); }
  .denom.is-active b { color: var(--fg-hi); }
  .pay-method { display: flex; gap: var(--sp-2); }
  .pay-method .btn { flex: 1; }
  .pay-qr { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .pay-qr__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .filter-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .filter-bar .input-wrap { flex: 1 1 220px; max-width: 280px; }

  /* ---------------- 管理后台 ---------------- */
  .admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .admin-stats .card { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
  .admin-stats .stat__value { font-size: var(--fs-24); }
  .admin-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .panel { display: none; }
  .panel.is-active { display: flex; flex-direction: column; gap: var(--sp-4); animation: viewIn var(--dur) var(--ease-out) both; }
  .gen-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); align-items: end; }
  .gen-result { display: flex; flex-direction: column; gap: var(--sp-2); }
  .gen-result__list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow: auto; }
  .price-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(120px, .5fr)); gap: var(--sp-4); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line-1); }
  .price-row:last-child { border-bottom: 0; }
  .price-row__name { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--fg-base); }
  .price-row__name span { font-size: var(--text-micro); color: var(--fg-low); }
  .admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--section-gap); align-items: start; }

  /* ---------------- 组件与状态（设计验收页） ---------------- */
  /* 卡片瀑布流：多列排版 + break-inside，避免高度差造成的大块空洞 */
  .gallery-grid { column-count: 4; column-gap: var(--sp-5); }
  .gallery-grid > .card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 var(--sp-5);
  }
  .gallery-grid > .card--wide { display: block; column-span: all; -webkit-column-span: all; }
  @media (max-width: 1600px) { .gallery-grid { column-count: 3; } }
  @media (max-width: 1240px) { .gallery-grid { column-count: 2; } }
  @media (max-width: 860px) { .gallery-grid { column-count: 1; } }
  .spec-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-2); }
  .swatch { display: flex; flex-direction: column; gap: 5px; }
  .swatch__chip { height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-1); }
  .swatch__name { font-family: var(--font-num); font-size: 10px; color: var(--fg-mid); }
  .swatch__val { font-family: var(--font-num); font-size: 10px; color: var(--fg-faint); }
  .note {
    display: flex; gap: var(--sp-2); align-items: flex-start;
    padding: var(--sp-3); border-radius: var(--r-sm);
    background: rgba(56, 189, 248, .05); border: 1px dashed var(--line-brand);
    font-size: var(--text-xs); color: var(--fg-mid); line-height: var(--lh-body);
  }
  .note b { color: var(--blue-200); }

  /* ---------------- 预览控制台（仅设计稿，不属于产品 UI） ---------------- */
  .pv {
    position: fixed; left: calc(var(--w-sidebar) + 18px); bottom: 18px; z-index: var(--z-toast);
    width: 296px;
    border-radius: var(--r-md);
    background: rgba(7, 13, 24, .94);
    border: 1px solid var(--line-brand);
    box-shadow: var(--sh-4), 0 0 0 1px rgba(56, 189, 248, .1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    font-size: var(--text-xs);
  }
  .pv__head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; background: rgba(56, 189, 248, .07); border-bottom: 1px solid var(--line-1); }
  .pv__head b { font-size: var(--text-xs); color: var(--fg-hi); font-weight: var(--fw-semi); letter-spacing: .02em; }
  .pv__head .badge { height: 18px; font-size: 9px; }
  .pv__head .chev { margin-left: auto; color: var(--fg-low); transition: transform var(--dur); }
  .pv.is-open .pv__head .chev { transform: rotate(180deg); }
  .pv__body { display: none; padding: var(--sp-3); flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
  .pv.is-open .pv__body { display: flex; }
  .pv__title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low); }
  .pv__row { display: flex; flex-wrap: wrap; gap: 5px; }
  .pv__btn {
    padding: 5px 9px; border-radius: var(--r-xs);
    font-size: 11px; color: var(--fg-mid);
    background: rgba(125, 165, 220, .07); border: 1px solid var(--line-1);
    transition: all var(--dur-fast);
  }
  .pv__btn:hover { color: var(--fg-hi); border-color: var(--line-brand); background: rgba(56, 189, 248, .10); }
  .pv__btn.is-active { color: #041019; background: var(--grad-brand); border-color: transparent; font-weight: var(--fw-semi); }
  .pv__hr { height: 1px; background: var(--line-1); }

  /* ---------------- 响应式（预览页） ---------------- */
  @media (max-width: 1400px) {
    .rooms-layout { grid-template-columns: minmax(0, 1fr); }
    .rooms-side { position: static; }
    .admin-cols { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 1180px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__visual { display: none; }
    .auth__form { min-height: 100vh; }
    .billing-hero { grid-template-columns: minmax(0, 1fr); }
    .billing-hero__kpis { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-1); padding-top: var(--sp-4); }
    .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .split-2 { grid-template-columns: minmax(0, 1fr); }
    .rooms-grid { grid-template-columns: minmax(0, 1fr); }
    .pv { left: 12px; width: calc(100vw - 24px); bottom: 12px; }
  }

/* =============================================================================
   真实系统桥接层（task-16）
   设计稿 preview 的布局/组件样式逐字复用；这里只补真实系统才有的元素，
   不改动设计稿任何规则（不改颜色/间距/网格）。
   ============================================================================= */

.denom { position: relative; }
.denom__price { font-size: 9.5px; color: var(--fg-low); margin-top: 1px; letter-spacing: .02em; }
.denom.is-disabled { opacity: .55; cursor: not-allowed; }
.denom.is-active .denom__price { color: var(--fg-mid); }

.field-inline__label--wide { flex: 0 0 auto; max-width: 118px; white-space: normal; line-height: 1.25; }
#voiceSel { text-overflow: ellipsis; }

/* 全部语种弹窗：18 语种网格（中文名 + 官方语言国家） */
#allLangPills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lang-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: rgba(125, 165, 220, .04); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.lang-pill:hover { border-color: var(--line-brand); background: rgba(56, 189, 248, .07); }
.lang-pill.is-active { border-color: var(--line-brand); background: rgba(56, 189, 248, .10); }
.lang-pill__name { font-size: var(--text-sm); color: var(--fg-hi); display: inline-flex; align-items: center; gap: 5px; }
.lang-pill__countries { font-size: 9.5px; color: var(--fg-low); line-height: 1.35; }

/* 音色库 tabs / 上传浮层（task-23） */
#voiceTabs { margin-bottom: var(--sp-2); }
[data-vpanel] { display: flex; flex-direction: column; gap: var(--sp-2); }
[data-vpanel][hidden] { display: none; }
.voice-row__actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#modalUploadVoice .modal__body { gap: var(--sp-3); }
#upConsentRow { align-items: flex-start; }
#upConsentRow .check__text { font-size: 10.5px; line-height: 1.45; color: var(--fg-mid); }
#vipKeyBlock .sub-block__label { color: var(--vip); }

/* ① 口音/用词跨两列（每句上限删除后） */
.adv-cell--wide { grid-column: span 2; }
/* ② 自动分段提示 */
.auto-seg { font-size: 10px; color: var(--fg-low); line-height: 1.45; padding: 3px 7px;
  border-radius: var(--r-xs); border: 1px dashed var(--line-1); background: rgba(125, 165, 220, .04); }
.auto-seg::before { content: "⚙ "; color: var(--blue-300); }

/* 后台计费单价：DeepSeek 分时（官方成本×1.3） */
.ds-price-block { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: rgba(125, 165, 220, .04); }
.ds-price-block__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg-hi); margin-bottom: 6px; flex-wrap: wrap; }
.ds-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px; gap: 3px 10px; font-size: var(--text-xs); color: var(--fg-mid); }
.ds-price-grid__h { color: var(--fg-low); font-size: 10px; letter-spacing: .04em; }
.ds-price-grid .num { text-align: right; font-family: var(--font-num); }

/* VIP 弹窗：EL 额度 / 消耗（task-38） */
#elQuotaBlock .meter, #vipSpendBlock .kv { margin: 2px 0; }
.el-quota-warn { color: var(--warn); }
.el-quota-danger { color: var(--danger); font-weight: var(--fw-medium); }
#vipSpendBlock .kv__row { padding: 2px 0; }

/* ④ 四行连续排列（轮换周期/在岗时间紧接音色/风格，task-29） */
#sec4 .card__body { gap: 6px; }

/* ② 上传参考话术（醒目） */
.btn--upload-script { background: linear-gradient(180deg, rgba(56, 189, 248, .20), rgba(37, 99, 235, .14));
  border: 1px solid rgba(96, 165, 250, .48); color: #DFF6FF; box-shadow: 0 0 10px rgba(56, 189, 248, .16); }
.btn--upload-script:hover { background: linear-gradient(180deg, rgba(56, 189, 248, .30), rgba(37, 99, 235, .22)); color: #fff; }

/* ③ 设置违禁词 / 设置欢迎话术：彩色可点文字按钮 + 数量 */
.text-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: var(--fw-medium); padding: 0 2px; }
.text-btn__count { font-family: var(--font-num); font-size: 9.5px; line-height: 1; padding: 1px 5px; border-radius: var(--r-pill); }
.text-btn--warn { color: #FBBF24; } .text-btn--warn:hover { color: #FDE68A; }
.text-btn--warn .text-btn__count { color: #FDE68A; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .30); }
.text-btn--info { color: var(--cyan-300); } .text-btn--info:hover { color: var(--cyan-200); }
.text-btn--info .text-btn__count { color: var(--cyan-200); background: rgba(56, 189, 248, .14); border: 1px solid rgba(56, 189, 248, .30); }

/* 保存按钮：与开始直播同色系（稍弱） */
.live-bar__actions .btn--save { background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(37, 99, 235, .18));
  border: 1px solid rgba(96, 165, 250, .55); color: #DFF6FF; box-shadow: 0 0 10px rgba(56, 189, 248, .18); }
.live-bar__actions .btn--save:hover { background: linear-gradient(180deg, rgba(56, 189, 248, .32), rgba(37, 99, 235, .26)); color: #fff; }

/* 开始直播：更大/更亮/辉光 */
.live-bar__actions .btn--start { height: 34px; padding: 0 20px; font-size: 13px; font-weight: var(--fw-semi); letter-spacing: .02em;
  background: linear-gradient(180deg, #67E8F9 0%, #38BDF8 38%, #2563EB 100%);
  border: 1px solid rgba(165, 243, 252, .85); color: #03131F; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .55), 0 0 18px rgba(56, 189, 248, .55), 0 6px 20px rgba(37, 99, 235, .38); }
.live-bar__actions .btn--start:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(165, 243, 252, .8), 0 0 26px rgba(56, 189, 248, .75), 0 8px 24px rgba(37, 99, 235, .46); }

/* 音色行内试听按钮 */
.voice-row__actions { flex-wrap: nowrap; }
.voice-row__actions .btn { height: 24px; padding: 0 7px; font-size: 10.5px; }
.voice-row__actions .btn.is-loading { opacity: .7; }

/* ① 高级项平铺（task-24）：2 列 × 2 行，填满卡片底部空白 */
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-top: 3px; }
.adv-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adv-cell__label { font-size: 9.5px; letter-spacing: .02em; color: var(--fg-low); white-space: nowrap; }
.adv-cell .select--xs { height: 24px; font-size: 10.5px; padding: 0 6px; }
.adv-cell .segmented--xs .segmented__item { height: 24px; font-size: 10px; padding: 0 8px; }
.adv-cell .stepper__input { height: 24px; width: 34px; font-size: 10.5px; }
.adv-cell .stepper__btn { height: 24px; width: 22px; }
.adv-cell .stepper__unit { font-size: 9.5px; }

/* ⑥ 播放器波形：播放时动态起伏（对齐 preview 的动效） */
.player--playing .player__wave i { animation-play-state: running; opacity: 1; }
.player__wave i { animation: waveBar 1.1s var(--ease-in-out) infinite; animation-play-state: paused; opacity: .5; transform-origin: center; }
.player__wave i:nth-child(3n+1) { animation-duration: .9s; }
.player__wave i:nth-child(4n+2) { animation-duration: 1.35s; }
.player__wave i:nth-child(5n+3) { animation-duration: 1.6s; }
.player__wave i:nth-child(7n) { animation-duration: .75s; }
.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); }
@keyframes waveBar { 0%, 100% { transform: scaleY(.30); } 50% { transform: scaleY(1); } }

/* VIP 弹窗状态行（preview modal 同款） */
.dialog-status { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); flex-wrap: wrap; }

/* 语种/音色胶囊组：窄卡片内自动换行、不撑破 */
.field-inline .pill-group { flex-wrap: wrap; gap: 4px; }
.field-inline .pill { height: 24px; padding: 0 8px; font-size: 10.5px; }

/* 抽屉（设计稿只有弹窗；真实系统的音色库/断句/违禁词/欢迎/令牌/字幕抽屉沿用 P1 形态） */
.drawer-mask { position: fixed; inset: 0; z-index: var(--z-drawer); display: none;
  background: rgba(2, 5, 10, .62); backdrop-filter: blur(4px); }
.drawer-mask.is-open { display: block; }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 94vw);
  display: flex; flex-direction: column; background: var(--glass-3);
  border-left: 1px solid var(--line-2); box-shadow: var(--sh-4);
  animation: drawerIn var(--dur) var(--ease-out) both; }
@keyframes drawerIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-1); }
.drawer__head h3 { font-size: var(--text-h3); color: var(--fg-hi); font-weight: var(--fw-semi); }
.drawer__head p { font-size: var(--text-xs); color: var(--fg-low); }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer__foot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-1); }
.voice-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); border: 1px solid var(--line-1); background: rgba(125, 165, 220, .04); }
.voice-row.is-active { border-color: var(--line-brand); background: rgba(56, 189, 248, .07); }
.voice-row__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.voice-row__name { font-size: var(--text-sm); color: var(--fg-hi); }
.voice-row__sub { font-size: 10.5px; color: var(--fg-low); }
.upload-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.upload-row .input { flex: 1 1 140px; }
.textarea--mono { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; min-height: 200px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line-1); }
.switch-row:last-child { border-bottom: 0; }
.switch-row__text { display: flex; flex-direction: column; gap: 1px; }
.switch-row__title { font-size: var(--text-sm); color: var(--fg-base); }
.switch-row__desc { font-size: 10.5px; color: var(--fg-low); }
#splitList .sentence { display: flex; align-items: baseline; gap: 8px; padding: 5px 7px;
  border-bottom: 1px dashed var(--line-1); font-size: var(--text-xs); color: var(--fg-mid); }
#splitList .sentence__n { flex: 0 0 24px; font-family: var(--font-num); color: var(--blue-300); }
#splitList .sentence__len { margin-left: auto; font-family: var(--font-num); color: var(--fg-faint); }

/* 内联 SVG 图标精灵不占布局 */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 数据源徽章 / 演示场景条（设计稿没有这两块，仅开发/演示用） */
.source-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 10.5px; letter-spacing: .02em;
  border: 1px solid var(--line-2); color: var(--fg-low); background: rgba(125, 165, 220, .06); }
.source-chip.is-mock { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.source-chip.is-real { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.mock-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden;
  height: 26px; padding: 0 8px; border-radius: var(--r-xs); border: 1px dashed var(--warn-line);
  background: var(--warn-soft); font-size: 10.5px; color: #FFE1A3; }
.mock-bar > .dim { display: none; }
.mock-bar select { height: 22px; font-size: 10.5px; border-radius: var(--r-xs); max-width: 170px; flex: 0 0 auto; }
.mock-bar .btn { height: 22px; padding: 0 7px; font-size: 10.5px; flex: 0 0 auto; }

/* 保存状态（吸顶条内） */
.live-bar__save { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-low); white-space: nowrap; }
.live-bar__save .dot { width: 6px; height: 6px; }
.live-bar__save.is-dirty { color: var(--warn); }
.live-bar__save.is-fail { color: var(--danger); }
.live-bar__save.is-ok { color: var(--ok); }

/* ⑦ 自检胶囊（真实系统由 JS 填充） */
.check-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 58px; overflow: auto; }
.check-chips .check-chip { font-size: 9.5px; height: 21px; padding: 0 7px; gap: 4px; }
.check-chips .checks-empty { font-size: 10px; color: var(--fg-faint); }

/* ② 断句预览（真实系统本地断句填充） */
.sentence-area { max-height: 78px; }
#splitPreview .sentence { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px;
  border-bottom: 1px dashed var(--line-1); font-size: 10.5px; color: var(--fg-mid); }
#splitPreview .sentence:last-child { border-bottom: 0; }
#splitPreview .sentence__n { flex: 0 0 18px; font-family: var(--font-num); color: var(--blue-300); font-size: 9.5px; }
#splitPreview .sentence__len { margin-left: auto; font-family: var(--font-num); font-size: 9.5px; color: var(--fg-faint); }

/* ⑥ 音量仍是真实控件 */
.player__vol .range { width: 56px; }
#danmuStream { max-height: none; }
#danmuStream .danmu-item__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--fg-low); }

/* 房间列表：真实系统的到期/未激活/上限态 + 新建卡 */
.room-card.is-expired { border-color: rgba(251, 191, 36, .30); background: linear-gradient(180deg, rgba(251, 191, 36, .05), transparent 42%), var(--glass-1); }
.room-card.is-draft { border-style: dashed; background: rgba(9, 17, 30, .42); }
.add-room[disabled], .add-room.is-limit { cursor: not-allowed; opacity: .66; }
.add-room[disabled]:hover { border-color: var(--line-2); color: var(--fg-low); background: none; }
.room-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--fg-low); }
.room-card__meta b { color: var(--fg-base); font-weight: var(--fw-medium); }

/* 通用小件（充值/后台沿用 P1 样式，设计稿已有大部分） */
.empty-row { padding: var(--sp-6); text-align: center; color: var(--fg-low); font-size: var(--text-sm); }
.pager { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager__info { font-size: var(--text-xs); color: var(--fg-low); margin-right: auto; }
.pager__btn { min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); font-size: 12px; color: var(--fg-mid); font-family: var(--font-num); }
.pager__btn:hover:not(:disabled) { border-color: var(--line-brand); color: var(--fg-hi); }
.pager__btn.is-active { color: #041019; background: var(--grad-brand); border-color: transparent; font-weight: var(--fw-semi); }
.pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.pager__gap { color: var(--fg-faint); padding: 0 2px; }
.ledger-table td.cell-neg { color: var(--danger); }
.ledger-table td.cell-pos { color: var(--ok); }
.ledger-table td, .ledger-table th { font-size: 11px; }

/* VIP 页（设计稿只有 VIP 弹窗，没有独立页；沿用 P1 样式） */
.vip-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--section-gap); align-items: start; }
.vip-badge-xl { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--vip-line); background: var(--vip-soft); }
.vip-badge-xl__ico { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-vip); box-shadow: var(--glow-vip); color: #1a1030; }
.vip-faq details { border-bottom: 1px dashed var(--line-1); padding: var(--sp-3) 0; }
.vip-faq details:last-child { border-bottom: 0; }
.vip-faq summary { cursor: pointer; font-size: var(--text-sm); color: var(--fg-base); list-style: none; }
.vip-faq summary::-webkit-details-marker { display: none; }
.vip-faq summary::before { content: "＋"; color: var(--blue-300); margin-right: 8px; }
.vip-faq details[open] summary::before { content: "－"; }
.vip-faq p { margin-top: 8px; font-size: var(--text-xs); color: var(--fg-mid); line-height: var(--lh-body); }

/* 充值页：真实系统的流水筛选与分页 */
#ledgerSeg { margin-left: auto; }
.billing-hero__num b { font-size: var(--fs-40); }

/* 一屏档：吸顶条内的操作按钮不换行 */
.live-bar__actions { flex-wrap: nowrap; }
.live-bar__actions .btn { height: 28px; padding: 0 9px; font-size: 11.5px; }
.live-bar__save { margin-right: 2px; }
@media (max-height: 820px) {
  .live-bar__actions .btn { height: 26px; padding: 0 8px; font-size: 11px; }
  .live-bar__save { font-size: 10px; }
  .check-chips { max-height: 46px; }
  .sentence-area { max-height: 58px; }
}


/* 开始直播按钮最终尺寸/辉光（覆盖吸顶条通用按钮规则，task-25） */
.live-bar__actions .btn.btn--start {
  height: 34px; min-height: 34px; padding: 0 20px; font-size: 13px; font-weight: var(--fw-semi);
  background: linear-gradient(180deg, #67E8F9 0%, #38BDF8 38%, #2563EB 100%);
  border: 1px solid rgba(165, 243, 252, .85); color: #03131F;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .55), 0 0 18px rgba(56, 189, 248, .55), 0 6px 20px rgba(37, 99, 235, .38);
}
.live-bar__actions .btn.btn--start:hover { filter: brightness(1.08); }
@media (max-height: 820px) {
  .live-bar__actions .btn.btn--start { height: 32px; min-height: 32px; padding: 0 18px; font-size: 12.5px; }
}

/* 确认弹窗需盖在其它 modal（如 VIP）之上 */
#modalConfirm { z-index: 1200; }

/* ===== /admin 独立后台（task-41） ===== */
.app.is-admin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
.app.is-admin .app__sidebar, .app.is-admin .app__topbar { display: none !important; }
.app.is-admin .app__main { padding: var(--sp-5); overflow: auto; min-height: 0; }
.app.is-admin .page-wrap { max-width: 1680px; }
#view-admin-auth { display: none; }
#view-admin-auth.is-active { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2 * var(--sp-5)); }
.admin-auth { width: 100%; display: flex; justify-content: center; }
#view-admin-auth .auth__eyebrow { color: var(--blue-300); }

/* ===== 联系客服（用户端右下角） ===== */
.contact-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 12px; color: #DFF6FF;
  background: linear-gradient(180deg, rgba(56,189,248,.28), rgba(37,99,235,.24));
  border: 1px solid rgba(96,165,250,.55); box-shadow: 0 0 14px rgba(56,189,248,.28), var(--sh-2); cursor: pointer; }
.contact-fab:hover { filter: brightness(1.08); }
.contact-fab[hidden] { display: none; }
.app.is-admin .contact-fab { display: none !important; }
.contact-qr { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.contact-qr img { width: 168px; height: 168px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: #fff; padding: 6px; }
.contact-link { color: var(--cyan-300); text-decoration: none; }
.contact-link:hover { color: var(--cyan-200); text-decoration: underline; }

/* 后台「客服设置」 */
.contact-qr-preview { width: 150px; height: 150px; border-radius: var(--r-sm); border: 1px dashed var(--line-2);
  display: grid; place-items: center; background: rgba(125,165,220,.04); overflow: hidden; }
.contact-qr-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
@media (max-width: 640px) {
  .contact-fab { right: 12px; bottom: 12px; height: 32px; padding: 0 10px; font-size: 11px; }
  .contact-qr img { width: 140px; height: 140px; }
}

/* 激活弹窗只读目标房间（task-42） */
.readonly-target { display: flex; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: rgba(125,165,220,.06); color: var(--fg-hi); font-size: var(--text-sm); }


/* 邀请用户（task-44） */
.invite-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--section-gap); align-items: start; }
.invite-code { font-family: var(--font-num); font-size: 26px; letter-spacing: .12em; color: var(--cyan-200);
  background: rgba(56,189,248,.08); border: 1px dashed rgba(56,189,248,.35); border-radius: var(--r-md);
  padding: 12px 10px; text-align: center; margin-bottom: 10px; word-break: break-all; }
.invite-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.invite-stats > div { display: flex; flex-direction: column; gap: 2px; }
.invite-stats b { font-size: var(--fs-22); color: var(--fg-hi); font-family: var(--font-num); }
@media (max-width: 1180px) { .invite-grid { grid-template-columns: minmax(0, 1fr); } }

/* 后台平台密钥（task-46） */
.secret-group { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); background: rgba(125,165,220,.03); }
.secret-group__title { font-size: var(--text-sm); color: var(--cyan-200); margin-bottom: var(--sp-2); letter-spacing: .04em; }
.secret-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 6px 0; border-top: 1px dashed var(--line-1); flex-wrap: wrap; }
.secret-row:first-of-type { border-top: 0; }
.secret-row__meta { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.secret-row__name { font-size: var(--text-sm); color: var(--fg-hi); }
.secret-row__hint { font-size: 10.5px; color: var(--fg-low); line-height: 1.35; }
.secret-row__ctrl { flex: 0 1 420px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.secret-row__ctrl .input-wrap { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .secret-row__ctrl { flex: 1 1 100%; }
}

/* 开播异常定位闪烁（task-48） */
.block-flash { animation: blockFlash 1.4s var(--ease-in-out); }
@keyframes blockFlash { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px rgba(248,113,113,.75), 0 0 22px rgba(248,113,113,.35); } }