/* ============================================================
   登录门 —— /console、/phone、/agent 三个页面**共用这一份**
   ============================================================
   🔴 为什么抽成单独文件：这套样式一旦在每个页面各写一份，就又是"同一份东西抄多处、
      改一处漏一处"（本项目在 session 结构、VAD、SHOP_PROMPT、音色清单上已经栽过四次）。
      三个页面的差别只有品牌区那一行页面标签，没必要各自维护一套 CSS。

   🔴 背景全部用 CSS 画，**不引外部图片**：页面走 cloudflared 公网隧道，
      外链图会加载失败或被拦。登录页是第一印象，不能赌它能不能加载出来。

   配色：近黑的午夜靛蓝底 + 香槟金单一强调色。登录页有自己的视觉世界，不跟随 data-theme。

   🔴 登录页**不显示任何内部信息**：端口、部署形态、默认账号、"没有账号找谁申请"、
      "口令可以留空账号"这类提示一律不放。页面挂在公网隧道上，谁都能打开——
      写"账号留空只填口令即可"等于告诉人不用账号也能进、只要猜一个共享密码。

   ⚠️ 三个页面的隐藏类不一样：console 用 .hidden，phone/agent 用 .hide，
      两个都要支持（改 JS 的收益不值那个回归风险）。
   ============================================================ */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
 background:#06060c;overflow:hidden;
 font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
.gate.hidden,.gate.hide{display:none!important}

.gate-bg{position:absolute;inset:0;overflow:hidden;
 background:
   radial-gradient(115% 85% at 80% 6%, #1a1733 0%, transparent 56%),
   radial-gradient(95% 80% at 8% 96%, #141225 0%, transparent 62%),
   linear-gradient(165deg, #0b0a18 0%, #08070f 58%, #050509 100%)}
.gate-bg::before{content:"";position:absolute;inset:-2px;opacity:.42;
 background-image:linear-gradient(rgba(212,180,131,.05) 1px, transparent 1px),
   linear-gradient(90deg, rgba(212,180,131,.05) 1px, transparent 1px);
 background-size:60px 60px;
 mask-image:radial-gradient(78% 68% at 50% 42%, #000 28%, transparent 100%)}
.gate-bg .glow{position:absolute;border-radius:50%;filter:blur(100px)}
.gate-bg .g1{width:560px;height:560px;top:-190px;right:-140px;background:#4c3a8f55}   /* 靛紫 */
.gate-bg .g2{width:430px;height:430px;bottom:-170px;left:-130px;background:#8a6a3033}  /* 暖金 */
.gate-bg .g3{width:320px;height:320px;top:38%;left:54%;background:#2d2a5533}

/* 卡片：默认左品牌右表单；.compact = 单列（给 /phone、/agent 这种单一用途的页面） */
.gate-card{position:relative;display:grid;grid-template-columns:1.05fr .95fr;
 width:min(920px,100%);border-radius:22px;overflow:hidden;
 background:rgba(14,13,24,.74);backdrop-filter:blur(22px);
 border:1px solid rgba(232,205,155,.14);
 box-shadow:0 40px 90px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
 animation:gcard .5s cubic-bezier(.16,1,.3,1)}
@keyframes gcard{from{opacity:0;transform:translateY(14px) scale(.985)}}
.gate-card.compact{grid-template-columns:1fr;width:min(400px,100%)}
.gate-card.compact .gate-brand{padding:32px 30px 26px;text-align:center;align-items:center;
 border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
.gate-card.compact .gb-mark{margin:0 auto}
.gate-card.compact .gate-form{padding:28px 30px 32px}

/* 垂直居中：去掉页脚那行之后，左栏底部会空一块；居中比顶对齐好看
   （.compact 单列版仍然顶对齐，那边内容少、居中反而飘） */
.gate-brand{padding:46px 44px;color:#efe9df;position:relative;
 display:flex;flex-direction:column;justify-content:center;
 background:linear-gradient(155deg, rgba(232,205,155,.10), rgba(76,58,143,.10) 52%, transparent);
 border-right:1px solid rgba(255,255,255,.06)}
.gb-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#1a1509;
 background:linear-gradient(140deg,#e8cd9b,#c9a86b 60%,#a8873f);
 box-shadow:0 14px 34px -10px rgba(201,168,107,.7), 0 0 0 1px rgba(255,255,255,.14) inset}
.gb-mark svg{width:30px;height:30px}
.gb-name{margin:22px 0 0;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#f4efe6}
.gb-name span{background:linear-gradient(100deg,#e8cd9b,#c9a86b);-webkit-background-clip:text;
 background-clip:text;color:transparent;margin-left:2px}
.gate-card.compact .gb-name{font-size:27px;margin-top:16px}
.gb-cn{margin:11px 0 0;font-size:14.5px;letter-spacing:.3em;color:#9a917f;font-weight:500}
.gate-card.compact .gb-cn{font-size:12.5px;letter-spacing:.24em;margin-top:8px}
/* 页面标签：三个页面唯一的差别（控制台 / 客服软电话 / 坐席工作台） */
.gb-tag{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:20px;font-size:11.5px;
 letter-spacing:.14em;color:#e8cd9b;border:1px solid rgba(232,205,155,.3);
 background:rgba(232,205,155,.08)}
.gb-feats{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:16px}
.gb-feats li{font-size:13px;color:#9b9386;line-height:1.6;padding-left:22px;position:relative}
.gb-feats li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:3px;
 background:linear-gradient(140deg,#e8cd9b,#a8873f);box-shadow:0 0 12px rgba(232,205,155,.55)}
.gb-feats b{color:#efe9df;font-weight:650;margin-right:7px}

.gate-form{padding:46px 44px;background:rgba(8,8,14,.55)}
.gate-form h2{margin:0;font-size:23px;font-weight:750;color:#f6f2ea;letter-spacing:-.02em}
.gate-card.compact .gate-form h2{font-size:18px}
.gf-sub{margin:9px 0 30px;font-size:13px;color:#918a7c}
.gate-card.compact .gf-sub{margin-bottom:22px;font-size:12.5px}
.gf-sub code{background:rgba(232,205,155,.13);padding:1px 7px;border-radius:5px;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#e8cd9b}
.gf-field{display:block;margin-bottom:16px}
.gf-field span{display:block;font-size:12px;color:#918a7c;margin-bottom:7px;letter-spacing:.02em}
.gf-field input{width:100%;height:46px;padding:0 15px;border-radius:11px;font:inherit;font-size:14px;
 color:#f4efe6;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
 transition:border-color .16s, box-shadow .16s, background .16s;outline:0}
.gf-field input::placeholder{color:#5d5749}
.gf-field input:focus{border-color:#c9a86b;background:rgba(232,205,155,.07);
 box-shadow:0 0 0 4px rgba(201,168,107,.15)}
.gf-btn{width:100%;height:47px;margin-top:8px;border:0;border-radius:11px;cursor:pointer;
 font:inherit;font-size:15px;font-weight:750;letter-spacing:.22em;color:#1a1509;
 background:linear-gradient(100deg,#e8cd9b,#c9a86b);
 box-shadow:0 14px 32px -12px rgba(201,168,107,.85);transition:transform .12s, filter .16s}
.gf-btn:hover{filter:brightness(1.07)}
.gf-btn:active{transform:translateY(1px)}
.gate-err{color:#e88f8f;font-size:13px;margin-top:13px;min-height:18px}

@media(max-width:820px){
  .gate{padding:16px}
  .gate-card{grid-template-columns:1fr}
  .gate-brand{padding:30px 28px 24px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .gb-feats{display:none}                   /* 手机上只留品牌，别把表单挤下屏 */
  .gb-name{font-size:27px;margin-top:16px}
  .gate-form{padding:28px}
}

/* ============================================================
   背景配色可选版本：给 .gate 加一个修饰类即可整体换肤
   （默认那套是深靛黑 + 香槟金；下面三套是备选）
   ============================================================ */

/* ── A. 浅色商务：白卡 + 淡蓝底，与后台浅色主题一致，进后台没有明暗跳变 ── */
.gate.g-light{background:#eef1f7}
.gate.g-light .gate-bg{
  background:
    radial-gradient(120% 90% at 82% 4%, #dbe6fb 0%, transparent 58%),
    radial-gradient(95% 80% at 6% 96%, #e7ecf7 0%, transparent 62%),
    linear-gradient(165deg, #f4f6fb 0%, #eceff7 60%, #e6eaf4 100%)}
.gate.g-light .gate-bg::before{opacity:.5;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px)}
.gate.g-light .g1{background:#2563eb22}
.gate.g-light .g2{background:#0ea5e918}
.gate.g-light .g3{background:#6366f118}
.gate.g-light .gate-card{background:rgba(255,255,255,.9);border-color:rgba(20,40,80,.1);
  box-shadow:0 30px 70px -22px rgba(30,50,90,.28)}
.gate.g-light .gate-brand{color:#16213a;
  background:linear-gradient(155deg, rgba(37,99,235,.09), rgba(14,165,233,.05) 55%, transparent);
  border-right-color:rgba(20,40,80,.08)}
.gate.g-light .gb-mark{color:#fff;background:linear-gradient(140deg,#3b82f6,#2563eb);
  box-shadow:0 14px 32px -10px rgba(37,99,235,.55)}
.gate.g-light .gb-name{color:#131c33}
.gate.g-light .gb-name span{background:linear-gradient(100deg,#2563eb,#0ea5e9);
  -webkit-background-clip:text;background-clip:text}
.gate.g-light .gb-cn{color:#68748d}
.gate.g-light .gb-tag{color:#2563eb;border-color:rgba(37,99,235,.28);background:rgba(37,99,235,.07)}
.gate.g-light .gb-feats li{color:#606d85}
.gate.g-light .gb-feats b{color:#1c2740}
.gate.g-light .gb-feats li::before{background:linear-gradient(140deg,#3b82f6,#2563eb);box-shadow:none}
.gate.g-light .gate-form{background:rgba(255,255,255,.55)}
.gate.g-light .gate-form h2{color:#131c33}
.gate.g-light .gf-sub{color:#68748d}
.gate.g-light .gf-field span{color:#68748d}
.gate.g-light .gf-field input{color:#131c33;background:#fff;border-color:#d7dde9}
.gate.g-light .gf-field input::placeholder{color:#a3adc0}
.gate.g-light .gf-field input:focus{border-color:#2563eb;background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.gate.g-light .gf-btn{color:#fff;background:linear-gradient(100deg,#2563eb,#3b82f6);
  box-shadow:0 14px 30px -12px rgba(37,99,235,.6)}
.gate.g-light .gate-err{color:#d64545}

/* ── B. 深海军蓝：不是纯黑，蓝调更"企业"，金色照样压得住 ── */
.gate.g-navy{background:#0d1728}
.gate.g-navy .gate-bg{
  background:
    radial-gradient(115% 85% at 80% 6%, #1b3358 0%, transparent 56%),
    radial-gradient(95% 80% at 8% 96%, #16263f 0%, transparent 62%),
    linear-gradient(165deg, #12213a 0%, #0e1a2e 58%, #0a1524 100%)}
.gate.g-navy .g1{background:#2f6fbf55}
.gate.g-navy .g2{background:#8a6a3033}
.gate.g-navy .g3{background:#2b4a7a44}
.gate.g-navy .gate-card{background:rgba(16,29,50,.76)}

/* ── C. 墨绿：偏"稳"，跟蓝色系后台不撞色 ── */
.gate.g-jade{background:#08150f}
.gate.g-jade .gate-bg{
  background:
    radial-gradient(115% 85% at 80% 6%, #123024 0%, transparent 56%),
    radial-gradient(95% 80% at 8% 96%, #0e2419 0%, transparent 62%),
    linear-gradient(165deg, #0c1f16 0%, #08160f 58%, #061109 100%)}
.gate.g-jade .g1{background:#1f7a5455}
.gate.g-jade .g2{background:#8a6a3033}
.gate.g-jade .g3{background:#14543a44}
.gate.g-jade .gate-card{background:rgba(12,28,20,.76)}