/* ==========================================================================
   登录 / 注册 / 找回密码 —— 浅冰蓝科技风
   色值与主页面 ui/assets/style.css 对齐：--nav #E8F2FC · --primary #2B6CB0
   质感取自浅冰蓝参考图（白色发光环 + 金属光球 + 细网格）
   构图取自仪表盘参考图（外框 + 发光文档 + 节点网络 + 环）

   约束：不引入任何外部资源（无外链字体/图片/图标库），装饰图形全部 CSS 绘制；
        保留原有全部类名与变量名，避免影响 auth.js 与页面脚本。
   本文件由 tools/gen_auth_css.py 生成。
   ========================================================================== */

:root {
  --bg: #F2F8FE;
  --panel: #FFFFFF;
  --border: #DFE6EC;
  --text: #1A202C;
  --muted: #5A6C7D;
  --primary: #2B6CB0;
  --primary-dark: #1F5488;
  --danger: #C0392B;
  --ok: #2F855A;
  --shadow: 0 1px 3px rgba(16, 42, 67, .06), 0 10px 30px rgba(16, 42, 67, .10);

  --cyan: #12A0DC;
  --cyan-soft: rgba(18, 160, 220, .40);
  --nav: #E8F2FC;
  --ice: #CFE3F8;
  --ice-deep: #B4D3F0;
  --ink: #1C3D5F;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  display: flex; line-height: 1.6; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(980px 560px at 12% -10%, rgba(43, 108, 176, .10), transparent 62%),
    radial-gradient(820px 520px at 92% 112%, rgba(18, 160, 220, .12), transparent 64%),
    linear-gradient(180deg, #EFF7FE 0%, #F7FBFF 45%, #EAF4FD 100%);
  background-attachment: fixed;
}

.wrap { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

/* ==========================================================================
   左侧：仪表盘面板
   ========================================================================== */
.brand {
  position: relative; overflow: hidden; color: var(--text);
  padding: 40px 44px; display: flex; flex-direction: column; justify-content: center;
  /* 一整片由外到内的蓝色渐变（无边框）：
     左侧文字区最亮 → 中部过渡 → 右侧与四周最深，形成连续层次 */
  background:
    radial-gradient(112% 84% at 22% 46%, #EBF4FD 0%, #C2DDF6 42%, #90BDE8 82%, #74A9DB 100%),
    linear-gradient(158deg, #90BDE8 0%, #74A9DB 100%);
  border-right: 1px solid rgba(43, 108, 176, .28);
}
/* 细网格底纹（比底色更深一档，才能看出网格） */
.brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,108,176,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,176,.10) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(130% 100% at 34% 40%, #000 36%, transparent 82%);
  -webkit-mask-image: radial-gradient(130% 100% at 34% 40%, #000 36%, transparent 82%);
}
/* 外框切角已移除：层次完全由渐变承担，不再有边框线 */

/* 内层"仪表盘"面板 */
.brand-frame {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  /* 无边框无底色：完全融入左栏渐变，只保留内边距做版心 */
  background: none; border: none; box-shadow: none;
  padding: 34px 34px 30px;
  overflow: hidden;
}
/* 面板四角发光切角 */
.brand-frame::before,
.brand-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border-color: rgba(28, 61, 95, .38); border-style: solid;
}
.brand-frame::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 8px 0 0 0; }
.brand-frame::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 8px 0; }

.brand-inner { position: relative; z-index: 2; max-width: 100%; margin-bottom: 158px; }

/* 短横线 + 标题 */
.brand-inner > h1::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  margin-bottom: 18px; background: #1C3D5F; opacity: .85;
}
.brand h1 {
  font-size: 29px; margin: 0 0 8px; font-weight: 700; letter-spacing: .6px;
  color: #1C3D5F; text-shadow: 0 1px 0 #fff;
}
.brand .sub { font-size: 14px; color: #4A6B88; margin-bottom: 24px; letter-spacing: .3px; }

/* 三条说明：浅蓝填充卡片 + 青色对勾圆点 */
.brand ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.brand li {
  font-size: 14px; color: #24425E;
  padding: 10px 22px 10px 42px; position: relative; margin-bottom: 9px;
  max-width: 372px;              /* 容纳最长一条不换行 */
  background: linear-gradient(90deg, rgba(232,242,252,.96), rgba(232,242,252,.55) 88%, rgba(232,242,252,0));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 42, 67, .045);
  transition: box-shadow .18s ease, transform .18s ease;
}
.brand li:hover { box-shadow: 0 6px 16px rgba(16, 42, 67, .09); transform: translateX(3px); }
.brand li::before {
  content: "✓"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; border-radius: 50%; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 160, 220, .14); border: 1px solid rgba(18, 160, 220, .45);
  color: #0B7FB0;
}
.brand .foot {
  font-size: 12.5px; color: #5D7B96; margin-top: 20px;
  position: relative; z-index: 2;
}

/* ---- 白色发光同心环 + 金属光球（参考图一的右下角） ---- */
.holo-orbit {
  /* 作为整体氛围放在中右侧（避开底部甲板，避免两套同心圆打架） */
  position: absolute; right: -150px; top: 54%; width: 520px; height: 520px;
  margin-top: -260px; pointer-events: none; z-index: 1;
}
.holo-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .92);
  box-shadow:
    0 0 0 1px rgba(43, 108, 176, .10),
    0 0 26px rgba(255, 255, 255, .95),
    inset 0 0 22px rgba(255, 255, 255, .55);
}
.holo-ring.r1 { width: 210px; height: 210px; }
.holo-ring.r2 { width: 340px; height: 340px; border-width: 2px; opacity: .85; }
.holo-ring.r3 { width: 478px; height: 478px; border-width: 1.5px; opacity: .55; }
/* 金属光球 */
.holo-core {
  position: absolute; left: 50%; top: 50%; width: 66px; height: 66px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffffff 0%, #F2F8FF 34%, #DCE9F7 62%, #C4D8EC 100%);
  box-shadow:
    0 0 26px rgba(255, 255, 255, .95),
    0 0 60px rgba(120, 180, 230, .55),
    inset 0 -6px 14px rgba(120, 160, 200, .35),
    inset 0 6px 12px #fff;
  animation: pulse 7s ease-in-out infinite;
}
/* 环上的分散节点 */
.holo-orbit::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 3.0px at 500.2px 380.0px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 536.6px 473.5px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 486.5px 435.9px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 475.2px 535.6px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 448.3px 479.0px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 392.0px 562.0px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 394.5px 499.4px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 306.0px 546.7px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 337.4px 492.4px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 237.0px 493.3px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 290.0px 459.7px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 200.8px 413.8px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 263.3px 408.8px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 205.6px 326.7px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 263.3px 351.2px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 250.3px 251.7px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 290.0px 300.3px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 324.8px 206.2px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 337.4px 267.6px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 411.9px 200.4px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 394.5px 260.6px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 491.7px 235.8px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 448.3px 281.0px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 545.9px 304.2px, rgba(18,160,220,.55), transparent 70%),
    radial-gradient(circle 3.0px at 486.5px 324.1px, rgba(18,160,220,.75), transparent 70%),
    radial-gradient(circle 2.4px at 562.1px 390.0px, rgba(18,160,220,.55), transparent 70%);
}

/* ---- 发光文档（参考图二的中心文档） ---- */
.holo-doc {
  position: absolute; right: 2px; top: 12%; z-index: 3;
  width: 136px; height: 166px; pointer-events: none; border-radius: 12px;
  background: linear-gradient(170deg, #FFFFFF 0%, #EDF6FF 46%, #CFE2F6 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 0 0 1px rgba(43, 108, 176, .24),
    0 18px 38px rgba(16, 42, 67, .18),
    inset 0 1px 0 #fff;
  transform: rotate(-6deg);
  animation: holo-float 7s ease-in-out infinite;
}
.holo-doc i {
  position: absolute; left: 17px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(30,80,130,.42), rgba(30,80,130,.12));
}
.holo-doc i:nth-child(1) { top: 30px; width: 102px; }
.holo-doc i:nth-child(2) { top: 44px; width: 102px; }
.holo-doc i:nth-child(3) { top: 58px; width: 102px; }
.holo-doc i:nth-child(4) { top: 72px; width: 70px; }

@keyframes holo-float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-10px); }
}
@keyframes pulse {
  0%, 100% { opacity: .92; }
  50%      { opacity: 1; }
}

/* ---- 顶部 HUD 状态条 ---- */
.hud-top {
  position: absolute; left: 26px; right: 26px; top: 16px; z-index: 4;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.hud-top .hud-tag { flex: 1; }
.hud-top i {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(18,160,220,.55);
  box-shadow: 0 0 6px rgba(18,160,220,.5);
}
.hud-top i:nth-child(3) { background: rgba(43,108,176,.45); }
.hud-tag {
  font-family: Consolas, "Courier New", monospace;
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(43, 108, 176, .62);
}

/* --------------------------------------------------------------------------
   仪表盘甲板：底部两块小型仪表（雷达图 + 指标柱状图）
   呼应参考图的"分区面板"结构；文字内容不与它重叠。
   -------------------------------------------------------------------------- */
.hud-deck {
  position: absolute; left: 26px; right: 26px; bottom: 16px; z-index: 4;
  display: grid; grid-template-columns: 148px 1fr; gap: 12px;
  pointer-events: none;
}
.hud-panel {
  position: relative; border-radius: 10px; padding: 10px 12px 12px;
  /* 无边框：靠蓝白渐变 + 柔和投影浮起，避免与整体渐变割裂 */
  background: linear-gradient(165deg, rgba(244,250,255,.94) 0%, rgba(206,229,250,.84) 58%, rgba(176,208,242,.90) 100%);
  border: none;
  box-shadow:
    0 6px 18px rgba(24, 66, 110, .18),
    0 1px 0 rgba(255, 255, 255, .85) inset;
}
.hud-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.hud-head em {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(43,108,176,.28), transparent);
}

/* 雷达图 */
.hud-radar {
  position: relative; width: 118px; height: 118px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(232,242,252,.9), rgba(255,255,255,.4));
}
.rd-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(43, 108, 176, .26);
}
.rd-ring.q1 { width: 38px;  height: 38px; }
.rd-ring.q2 { width: 74px;  height: 74px; }
.rd-ring.q3 { width: 110px; height: 110px; }
.rd-spoke {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 55px;
  background: linear-gradient(180deg, rgba(43,108,176,.30), transparent);
  transform-origin: 50% 0;
}
.rd-spoke.s1 { transform: rotate(0deg); }
.rd-spoke.s2 { transform: rotate(90deg); }
.rd-spoke.s3 { transform: rotate(180deg); }
.rd-spoke.s4 { transform: rotate(270deg); }
/* 扫描扇形 */
.rd-sweep {
  position: absolute; left: 50%; top: 50%; width: 110px; height: 110px;
  margin: -55px 0 0 -55px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(18,160,220,.34), rgba(18,160,220,0) 42%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 68%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 68%, transparent 70%);
  animation: sweep 6s linear infinite;
}
.rd-blip {
  position: absolute; left: 68%; top: 34%; width: 6px; height: 6px; border-radius: 50%;
  background: #12A0DC; box-shadow: 0 0 8px rgba(18,160,220,.7);
  animation: pulse 2.6s ease-in-out infinite;
}

/* 指标柱状图 */
.hud-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-bottom: 8px;
}
.hud-bars span {
  flex: 1; height: var(--v); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgba(18,160,220,.75), rgba(43,108,176,.30));
  box-shadow: 0 0 8px rgba(18,160,220,.18);
}
.hud-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: #35577A; padding: 2.5px 0;
  border-top: 1px dashed rgba(43, 108, 176, .26);
}
.hud-chip { letter-spacing: .2px; }
.hud-foot-row b {
  font-family: Consolas, monospace; font-size: 11px; color: #0B7FB0; font-weight: 700;
}

@keyframes sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   右侧：登录卡片
   ========================================================================== */
.form-side {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: center; padding: 48px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(242,248,254,.82));
}
.form-side::before {
  content: ""; position: absolute; pointer-events: none;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(43, 108, 176, .10), transparent 68%);
}
.form-inner {
  position: relative; z-index: 1; width: 100%; max-width: 396px;
  padding: 32px 30px 26px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(43, 108, 176, .16);
  box-shadow:
    0 1px 2px rgba(16, 42, 67, .04),
    0 18px 44px rgba(16, 42, 67, .12);
}
.form-inner::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(18,160,220,.7), transparent);
}
.form-inner::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px;
  border: 2px solid rgba(18, 160, 220, .5); border-width: 0 2px 2px 0; border-radius: 0 0 14px 0;
}

.form-side h2 { font-size: 22px; margin: 0 0 6px; letter-spacing: .6px; color: #1C3D5F; }
.form-side .hint { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }
label.field { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

.input {
  width: 100%; border: 1px solid #DFE6EC; border-radius: 9px; padding: 11px 13px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
  margin-bottom: 15px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input::placeholder { color: #94A7B8; }
.input:hover { border-color: rgba(43, 108, 176, .36); }
.input:focus {
  outline: none; border-color: rgba(18, 160, 220, .75); background: #FBFDFF;
  box-shadow: 0 0 0 3px rgba(18, 160, 220, .13), 0 2px 10px rgba(18, 160, 220, .10);
}

.field-row { display: flex; gap: 10px; margin-bottom: 15px; }
.field-row .input { margin-bottom: 0; flex: 1; min-width: 0; }
.captcha-img {
  width: 120px; height: 42px; border-radius: 9px; cursor: pointer; flex: 0 0 120px;
  background: #F2F7FC; border: 1px solid #DFE6EC;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.captcha-img:hover { border-color: rgba(18, 160, 220, .58); box-shadow: 0 0 12px rgba(18, 160, 220, .16); }
.btn-code {
  flex: 0 0 116px; border: 1px solid rgba(43, 108, 176, .36); border-radius: 9px;
  background: var(--nav); color: #2B6CB0;
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn-code:hover:not(:disabled) { background: #DCEBFA; border-color: rgba(18, 160, 220, .6); }
.btn-code:disabled { color: #A3B4C4; cursor: not-allowed; background: #F3F6F9; border-color: #DFE6EC; }

button.primary {
  width: 100%; border: none; border-radius: 9px; padding: 12px 16px; font-size: 15px;
  font-family: inherit; font-weight: 600; color: #fff; cursor: pointer;
  margin-top: 4px; letter-spacing: 1.2px;
  background: linear-gradient(135deg, #2B6CB0 0%, #3E93D8 55%, #22A6DE 100%);
  box-shadow: 0 8px 20px rgba(43, 108, 176, .26);
  transition: box-shadow .18s ease, transform .1s ease, filter .18s ease;
}
button.primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(43, 108, 176, .34), 0 0 18px rgba(18, 160, 220, .24);
}
button.primary:active { transform: translateY(1px); }
button.primary:disabled { background: #A9BDD1; cursor: not-allowed; box-shadow: none; filter: none; }

.msg { font-size: 13px; border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; display: none; }
.msg.is-error { display: block; color: #C0392B; background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .28); }
.msg.is-ok { display: block; color: #2F855A; background: rgba(47, 133, 90, .08); border: 1px solid rgba(47, 133, 90, .28); }
.msg.is-info { display: block; color: var(--primary-dark); background: rgba(43, 108, 176, .07); border: 1px solid rgba(43, 108, 176, .24); }
.msg.warning {
  background: rgba(183, 121, 31, .10); border: 1px solid rgba(183, 121, 31, .32);
  border-radius: 9px; padding: 8px 12px; margin-top: 8px; font-size: 14px; color: #7A5111;
}

.is-error {
  border-color: rgba(192, 57, 43, .75) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important;
}

.form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 13px; }
.form-foot a { color: #2B6CB0; text-decoration: none; }
.form-foot a:hover { text-decoration: underline; color: #1F5488; }
.form-foot .plain { color: var(--muted); }
.form-foot input[type="checkbox"] { accent-color: #2B6CB0; width: 14px; height: 14px; }

.demo-code {
  margin-top: 12px; padding: 9px 11px; border-radius: 9px; font-size: 12.5px;
  background: rgba(183, 121, 31, .09); color: #7A5111;
  border: 1px solid rgba(183, 121, 31, .28); display: none;
}
.demo-code.is-show { display: block; }
.demo-code b { font-family: Consolas, monospace; font-size: 15px; letter-spacing: 2px; color: #6B470F; }

input[readonly] { background: #F3F6F9; cursor: not-allowed; }

a:focus-visible, button:focus-visible, input:focus-visible, .captcha-img:focus-visible {
  outline: 2px solid #12A0DC; outline-offset: 2px;
}

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; }
  .brand {
    padding: 28px 22px; border-right: none;
    border-bottom: 1px solid rgba(43, 108, 176, .16);
  }
  .brand::after { inset: 10px; }
  .brand-frame { padding: 52px 22px 168px; min-height: 470px; }
  .brand-inner { margin-bottom: 0; }
  .brand h1 { font-size: 23px; }
  .brand .sub { margin-bottom: 16px; }
  .brand li { max-width: 100%; }
  .brand ul { display: none; }
  /* 窄屏：图形缩小并靠右下，避免压字 */
  .holo-orbit { right: -180px; top: auto; bottom: -60px; margin-top: 0; width: 400px; height: 400px; }
  .holo-ring.r1 { width: 170px; height: 170px; }
  .holo-ring.r2 { width: 276px; height: 276px; }
  .holo-ring.r3 { width: 386px; height: 386px; }
  .holo-core { width: 54px; height: 54px; }
  .holo-doc { width: 104px; height: 128px; right: -10px; top: 16px; }
  /* 窄屏：缩小甲板并压到右下，避免占用文字空间 */
  .hud-deck {
    left: 18px; right: 18px; bottom: 16px;
    grid-template-columns: 112px 1fr; gap: 9px;
  }
  .hud-radar { width: 92px; height: 92px; }
  .rd-ring.q1 { width: 30px; height: 30px; }
  .rd-ring.q2 { width: 58px; height: 58px; }
  .rd-ring.q3 { width: 88px; height: 88px; }
  .rd-spoke { height: 44px; }
  .rd-sweep { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .hud-bars { height: 32px; }
  .hud-foot-row { font-size: 9.5px; }
  .hud-top { left: 20px; right: 20px; top: 14px; }
  .form-side { padding: 32px 22px; }
  .form-side::before { width: 380px; height: 380px; }
  .form-inner { max-width: 100%; padding: 26px 22px 22px; }
  .captcha-img { flex-basis: 104px; width: 104px; }
  .btn-code { flex-basis: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .holo-core, .holo-doc, .rd-sweep, .rd-blip { animation: none; }
  .brand li, button.primary, .input, .btn-code { transition: none; }
}