/* JEZT Digital Console theme, layered on the Base CRM's app.css.
   Part 1 re-tokens the workspace (light and dark) as a cool, neon "operations console".
   Part 2 is the sign-in experience (layout/auth.php + console-auth.js): canvases, HUD, boot log, 3D card.
   Local assets only (CSP style-src 'self'); fonts are SIL OFL (fonts/*-OFL.txt). */
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/orbitron-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/orbitron-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/orbitron-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------- 1. Workspace tokens */
:root {
  --cx-cyan: #00E5FF;
  --cx-violet: #7C4DFF;
  --cx-magenta: #FF2BD6;
  --cx-lime: #39FF88;
  --cx-amber: #FFB547;
  --cx-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --cx-display: 'Orbitron', 'JetBrains Mono', system-ui, sans-serif;
  --serif: var(--cx-display);

  --paper: #EEF3FA;
  --paper-2: #E2EAF5;
  --tan: #DDE6F2;
  --tan-2: #B4C3D8;
  --surface: #FFFFFF;
  --surface-2: #F5F8FD;
  --ink: #0B1730;
  --ink-2: #2A3A57;
  --muted: #5A6A85;
  --line: #D5DEEB;
  --line-strong: #C1CDDF;
  --placeholder: #7C8AA3;
  --accent: #00B8D9;
  --accent-ink: #001018;
  --accent-text: #00708A;
  --sidebar-bg: #060A14;
  --sidebar-ink: #CFE3FF;
  --sidebar-muted: #7F95B8;
  --bm-ink: #060A14;
  --radius: 8px; --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(6, 20, 50, .06);
  --shadow-pop: 0 18px 46px rgba(6, 20, 50, .18), 0 0 0 1px rgba(0, 184, 217, .08);
}
html[data-theme=dark] {
  --paper: #04060C;
  --paper-2: #070B15;
  --tan: #0D1424;
  --tan-2: #1F2C46;
  --surface: #080D1A;
  --surface-2: #0B1222;
  --ink: #E4EEFF;
  --ink-2: #B9C8E4;
  --muted: #7F92B4;
  --line: #131D33;
  --line-strong: #1E2B48;
  --placeholder: #56688A;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-text: color-mix(in srgb, var(--accent) 78%, #FFFFFF);
  --focus: var(--accent);
  --sidebar-ink: #CFE3FF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-pop: 0 22px 60px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Workspace chrome: a faint blueprint grid, glowing accents, display type for page titles. */
html[data-theme=dark] .app-page {
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--cx-violet) 12%, transparent), transparent 70%),
    radial-gradient(700px 420px at 10% 110%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--paper);
  background-attachment: fixed;
}
.app-page h1 { font-family: var(--cx-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(20px, 1.9vw, 26px); }
html[data-theme=dark] .app-page h1 { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.app-page .sidebar { border-right: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.app-page .brand-text strong { font-family: var(--cx-display); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.app-page .brand-text small { font-family: var(--cx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
html[data-theme=dark] .app-page .card,
html[data-theme=dark] .app-page .panel { border-color: var(--line-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent)), var(--surface)); }
html[data-theme=dark] .button:not(.button--ghost):not(.button--danger) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme=dark] .button:not(.button--ghost):not(.button--danger):hover { filter: brightness(1.12); box-shadow: 0 0 0 1px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme=dark] input:focus, html[data-theme=dark] select:focus, html[data-theme=dark] textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* The JEZT mark (layout/brand-mark.php). */
.brand-mark--jezt svg { overflow: visible; }
.brand-mark--jezt .jz-hex { fill: #060A14; stroke: var(--cx-cyan); stroke-width: 1.6; }
.brand-mark--jezt .jz-ring { fill: none; stroke: var(--cx-violet); stroke-width: 1; opacity: .7; }
.brand-mark--jezt .jz-j { fill: none; stroke: var(--cx-cyan); stroke-width: 2.6; stroke-linecap: round; }
.brand-mark--jezt .jz-node { fill: #E9FDFF; }
.brand-mark--jezt .jz-node--b { fill: var(--cx-magenta); }
html[data-theme=dark] .brand-mark--jezt svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cx-cyan) 55%, transparent)); }

/* ---------------------------------------------------------------- 2. Sign-in experience */
.cx-auth {
  --accent: var(--cx-cyan);
  --accent-ink: #001018;
  --focus: var(--cx-cyan);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: #DDEBFF;
  font-family: var(--cx-mono);
  background: radial-gradient(1200px 700px at 50% 42%, #0A1630 0%, #050A18 45%, #010208 100%);
}
.cx-layer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cx-layer--rain { opacity: .38; mix-blend-mode: screen; }
.cx-layer--core { z-index: 1; }

/* Synthwave floor: a CSS 3D plane of glowing grid lines rolling toward the viewer. */
.cx-floor { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; perspective: 340px; perspective-origin: 50% 0; overflow: hidden; pointer-events: none; z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%); }
.cx-floor__grid { position: absolute; left: -50%; right: -50%; top: 0; height: 200%; transform-origin: 50% 0; transform: rotateX(72deg);
  background:
    linear-gradient(color-mix(in srgb, var(--cx-violet) 70%, transparent) 2px, transparent 2px) 0 0 / 64px 64px,
    linear-gradient(90deg, color-mix(in srgb, var(--cx-cyan) 55%, transparent) 2px, transparent 2px) 0 0 / 64px 64px;
  animation: cx-floor 2.4s linear infinite; }
@keyframes cx-floor { to { background-position: 0 64px, 0 64px; } }

.cx-veil { position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .65) 100%); }
.cx-veil::after { content: ''; position: absolute; left: 0; right: 0; height: 18vh; top: -18vh; background: linear-gradient(to bottom, transparent, rgba(0, 229, 255, .06), transparent); animation: cx-sweep 7s linear infinite; }
@keyframes cx-sweep { to { transform: translateY(136vh); } }

/* Corner HUD readouts. */
.cx-hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; font: 400 11px/1.6 var(--cx-mono); letter-spacing: .14em; color: #7FA4D6; text-transform: uppercase; }
.cx-hud__corner { position: absolute; display: grid; gap: 2px; padding: 12px 16px; }
.cx-hud__corner::before { content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--cx-cyan) 70%, transparent); }
.cx-hud__corner--tl { top: 14px; left: 14px; } .cx-hud__corner--tl::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cx-hud__corner--tr { top: 14px; right: 14px; text-align: right; } .cx-hud__corner--tr::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cx-hud__corner--bl { bottom: 14px; left: 14px; } .cx-hud__corner--bl::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cx-hud__corner--br { bottom: 14px; right: 14px; text-align: right; } .cx-hud__corner--br::before { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.cx-hud b { color: #E4F4FF; font-weight: 700; }
.cx-hud__label { color: var(--cx-cyan); font-weight: 700; }
.cx-hud__clock { font: 700 20px/1.1 var(--cx-display); letter-spacing: .12em; color: #E9FDFF; text-shadow: 0 0 14px rgba(0, 229, 255, .6); }
.cx-hud__stream { color: var(--cx-lime); font-variant-numeric: tabular-nums; }
.cx-hud__meter { justify-self: end; width: 140px; height: 4px; background: rgba(127, 164, 214, .18); position: relative; overflow: hidden; }
.cx-hud__meter i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, var(--cx-cyan), var(--cx-magenta)); box-shadow: 0 0 10px var(--cx-cyan); transition: width .35s ease; }
.cx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--cx-lime); box-shadow: 0 0 8px var(--cx-lime); animation: cx-blink 2.2s ease-in-out infinite; }
.cx-dot--warn { background: var(--cx-amber); box-shadow: 0 0 8px var(--cx-amber); animation-delay: .7s; }
@keyframes cx-blink { 50% { opacity: .35; } }

/* Boot log, typed by console-auth.js on the first visit of a browser session. */
.cx-boot { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #010208; transition: opacity .6s ease, visibility .6s; }
.cx-boot[hidden] { display: none; }
.cx-boot.is-done { opacity: 0; visibility: hidden; }
.cx-boot__log { margin: 0; width: min(640px, calc(100vw - 32px)); min-height: 15em; font: 400 13px/1.7 var(--cx-mono); color: #9FFFD0; text-shadow: 0 0 8px rgba(57, 255, 136, .55); white-space: pre-wrap; }
.cx-boot__log .ok { color: var(--cx-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .7); }
.cx-boot__log .hot { color: #FFFFFF; text-shadow: 0 0 14px var(--cx-magenta); }
.cx-boot__log::after { content: '█'; animation: cx-blink .8s steps(1) infinite; }
.cx-boot__skip { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font: 400 11px var(--cx-mono); letter-spacing: .2em; text-transform: uppercase; color: #3F5A80; }

/* The card: centred both ways, tilting in 3D toward the pointer. */
.cx-shell { position: relative; z-index: 5; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 72px 16px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.cx-stage { width: min(440px, 100%); perspective: 1100px; }
.cx-card {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; isolation: isolate;
  padding: 30px 30px 18px; border-radius: 18px; border: 0;
  color: #DDEBFF;
  background:
    radial-gradient(420px 260px at var(--gx) var(--gy), rgba(0, 229, 255, .13), transparent 65%),
    linear-gradient(160deg, rgba(14, 26, 54, .78), rgba(5, 10, 24, .86));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 229, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
  animation: cx-materialize 1s cubic-bezier(.2, .8, .2, 1) backwards;
}
.cx-card.is-tracking { transition: transform .08s linear, box-shadow .3s; }
/* Animated neon border (a rotating conic gradient, masked to a 1.5px ring). */
.cx-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--cx-angle, 0deg), var(--cx-cyan), var(--cx-violet), var(--cx-magenta), rgba(0, 229, 255, .1) 55%, var(--cx-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cx-spin 6s linear infinite; }
@property --cx-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cx-spin { to { --cx-angle: 360deg; } }
@keyframes cx-materialize {
  0% { opacity: 0; transform: translateZ(-240px) rotateX(18deg); filter: blur(10px) hue-rotate(90deg); }
  60% { opacity: 1; filter: blur(0) hue-rotate(0); }
  100% { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
}
.cx-card__bracket { position: absolute; width: 22px; height: 22px; border: 2px solid var(--cx-cyan); filter: drop-shadow(0 0 6px var(--cx-cyan)); transform: translateZ(30px); pointer-events: none; }
.cx-card__bracket--tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.cx-card__bracket--tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; }
.cx-card__bracket--bl { bottom: -8px; left: -8px; border-right: 0; border-top: 0; }
.cx-card__bracket--br { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.cx-card__scan { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.cx-card__scan::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(to bottom, transparent, rgba(0, 229, 255, .09) 70%, rgba(0, 229, 255, .4) 99%, transparent); animation: cx-scan 4.5s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes cx-scan { to { transform: translateY(350%); } }
.cx-card.is-busy .cx-card__scan::after { animation-duration: .9s; }

.cx-card__head { text-align: center; transform: translateZ(50px); }
.cx-emblem { position: relative; width: 74px; height: 74px; margin: -4px auto 12px; display: grid; place-items: center; }
.cx-emblem .brand-mark svg { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(0, 229, 255, .8)); }
.cx-emblem__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 229, 255, .55); border-top-color: transparent; border-bottom-color: transparent; animation: cx-orbit 3.2s linear infinite; }
.cx-emblem__orbit--b { inset: 8px; border-color: rgba(255, 43, 214, .6); border-left-color: transparent; border-right-color: transparent; animation-duration: 2.1s; animation-direction: reverse; }
@keyframes cx-orbit { to { transform: rotate(360deg); } }

/* Glitching wordmark. */
.cx-wordmark { position: relative; margin: 0; font: 900 clamp(24px, 6.4vw, 32px)/1.1 var(--cx-display); letter-spacing: .14em; color: #F2FDFF;
  text-shadow: 0 0 10px rgba(0, 229, 255, .85), 0 0 34px rgba(0, 229, 255, .45); }
.cx-wordmark em { font-style: normal; color: var(--cx-magenta); text-shadow: 0 0 12px var(--cx-magenta); }
.cx-wordmark::before, .cx-wordmark::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: .8; }
.cx-wordmark::before { color: var(--cx-magenta); transform: translate(-2px, 0); clip-path: inset(0 0 100% 0); animation: cx-glitch-a 3.8s steps(1) infinite; text-shadow: none; }
.cx-wordmark::after { color: var(--cx-cyan); transform: translate(2px, 0); clip-path: inset(100% 0 0 0); animation: cx-glitch-b 3.8s steps(1) infinite; text-shadow: none; }
@keyframes cx-glitch-a { 0%, 86%, 100% { clip-path: inset(0 0 100% 0); } 87% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, -1px); } 89% { clip-path: inset(55% 0 20% 0); transform: translate(3px, 1px); } 91% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 0); } }
@keyframes cx-glitch-b { 0%, 87%, 100% { clip-path: inset(100% 0 0 0); } 88% { clip-path: inset(60% 0 8% 0); transform: translate(4px, 1px); } 90% { clip-path: inset(15% 0 70% 0); transform: translate(-3px, -1px); } 92% { clip-path: inset(40% 0 35% 0); transform: translate(2px, 0); } }
.cx-tagline { margin: 8px 0 0; font: 400 10.5px/1.5 var(--cx-mono); letter-spacing: .22em; color: #6F93C6; }

.cx-card__body { position: relative; z-index: 3; margin-top: 22px; transform: translateZ(28px); }
.cx-card h1 { font: 700 15px/1.3 var(--cx-display); letter-spacing: .18em; text-transform: uppercase; color: #E9FDFF; margin: 0 0 6px; }
.cx-card h1::before { content: '> '; color: var(--cx-cyan); }
.cx-card .muted { color: #8AA3C8; font-size: 12.5px; line-height: 1.55; }
.cx-card a { color: var(--cx-cyan); text-decoration-color: rgba(0, 229, 255, .45); }
.cx-card a:hover { color: #FFFFFF; text-shadow: 0 0 8px var(--cx-cyan); }
.cx-card .field label { font: 700 10.5px/1.2 var(--cx-mono); letter-spacing: .2em; text-transform: uppercase; color: #7FC8FF; }
.cx-card .field label span { color: #4F6C98; font-weight: 400; }
.cx-card input:not([type=checkbox]):not([type=radio]) {
  min-height: 46px; padding: 10px 14px; font: 400 15px var(--cx-mono); letter-spacing: .04em; color: #F2FBFF; caret-color: var(--cx-cyan);
  background: rgba(2, 8, 22, .72); border: 1px solid rgba(0, 229, 255, .22); border-radius: 10px; box-shadow: inset 0 0 18px rgba(0, 229, 255, .05);
}
.cx-card input::placeholder { color: #3D5376; }
.cx-card input:hover:not(:focus) { border-color: rgba(0, 229, 255, .45); }
.cx-card input:focus { border-color: var(--cx-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, .18), 0 0 26px rgba(0, 229, 255, .28), inset 0 0 18px rgba(0, 229, 255, .08); }
.cx-card input:-webkit-autofill { -webkit-text-fill-color: #F2FBFF; -webkit-box-shadow: 0 0 0 40px #06112A inset; transition: background-color 9999s; }
.cx-card .code-input { font: 700 26px/1 var(--cx-display); letter-spacing: .5em; text-indent: .5em; }
.cx-card .check { color: #A9BEDD; font-size: 12.5px; }
.cx-card .hint { color: #5E7BA6; }
.cx-card .button { min-height: 48px; border-radius: 10px; font: 700 13px/1 var(--cx-display); letter-spacing: .26em; text-transform: uppercase; }
.cx-card .button:not(.button--ghost) { color: #00111A; border: 0; background: linear-gradient(100deg, #00E5FF, #3F8CFF 55%, #A35BFF); box-shadow: 0 0 24px rgba(0, 229, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .5); position: relative; overflow: hidden; }
.cx-card .button:not(.button--ghost)::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); animation: cx-shine 3.6s ease-in-out infinite; }
@keyframes cx-shine { 60%, 100% { left: 130%; } }
.cx-card .button:not(.button--ghost):hover { filter: brightness(1.12) saturate(1.2); box-shadow: 0 0 38px rgba(0, 229, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.cx-card .button--ghost, .cx-card .text-button { background: rgba(0, 229, 255, .06); border: 1px solid rgba(0, 229, 255, .35); color: #CFF7FF; }
.cx-card .text-button { background: none; border: 0; font: 400 12px var(--cx-mono); letter-spacing: .08em; color: #6F93C6; cursor: pointer; }
.cx-card .text-button:hover { color: var(--cx-cyan); }
.cx-engage__busy { display: none; }
.cx-card.is-busy .cx-engage__label { display: none; }
.cx-card.is-busy .cx-engage__busy { display: inline; }
.cx-card.is-busy .cx-engage__busy::after { content: '...'; display: inline-block; width: 1.6em; text-align: left; animation: cx-dots 1s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes cx-dots { from { width: 0; } to { width: 1.6em; } }
.cx-card .alert { border-radius: 10px; font-size: 12.5px; background: rgba(255, 43, 214, .08); border-color: rgba(255, 43, 214, .45); color: #FFD6F6; }
.cx-card .alert--notice { background: rgba(57, 255, 136, .07); border-color: rgba(57, 255, 136, .4); color: #D7FFE9; }
.cx-card .alert--error { animation: cx-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
.cx-card .alert--error::before { background: var(--cx-magenta); box-shadow: 0 0 8px var(--cx-magenta); }
.cx-card .alert--notice::before { background: var(--cx-lime); box-shadow: 0 0 8px var(--cx-lime); }
@keyframes cx-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.cx-card .divider { color: #4F6C98; }
.cx-card .divider::before, .cx-card .divider::after { background: rgba(0, 229, 255, .18); }
.cx-card .qr { background: #FFFFFF; border: 0; border-radius: 12px; box-shadow: 0 0 0 2px var(--cx-cyan), 0 0 30px rgba(0, 229, 255, .5); }
.cx-card .secret { background: rgba(2, 8, 22, .8); border: 1px dashed rgba(0, 229, 255, .45); color: var(--cx-lime); font-family: var(--cx-mono); letter-spacing: .08em; }
.cx-card .recovery { border-top-color: rgba(0, 229, 255, .15); }
.cx-card .recovery summary { color: #6F93C6; }
.cx-card code, .cx-card pre { font-family: var(--cx-mono); }
.cx-card ol, .cx-card ul { color: #A9BEDD; }

.cx-card__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(0, 229, 255, .12); font: 400 9.5px/1 var(--cx-mono); letter-spacing: .2em; color: #4F6C98; transform: translateZ(18px); }
.cx-card__foot .cx-dot { width: 6px; height: 6px; margin-right: 6px; }

.cx-foot { position: relative; z-index: 5; color: #4F6C98; font: 400 11px/1.6 var(--cx-mono); letter-spacing: .06em; }
.cx-foot p { margin: 0; }
.cx-foot .legal-links a { color: #5F7DAA; }
.cx-foot .legal-links a:hover { color: var(--cx-cyan); }

/* Keystroke ripple from console-auth.js (positioned with CSS variables, never inline styles). */
.cx-ping { position: fixed; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1px solid var(--cx-cyan); pointer-events: none; z-index: 6; animation: cx-ping .7s ease-out forwards; }
@keyframes cx-ping { to { transform: scale(9); opacity: 0; } }

@media (max-width: 720px) {
  .cx-hud__corner--tr .cx-hud__clock { font-size: 15px; }
  .cx-hud__corner--bl, .cx-hud__corner--br { display: none; }
  .cx-hud__corner--tl span:not(.cx-hud__label) { display: none; }
  .cx-card { padding: 26px 20px 16px; }
}
@media (max-height: 640px) {
  .cx-hud__corner--bl, .cx-hud__corner--br { display: none; }
  .cx-shell { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-floor__grid, .cx-veil::after, .cx-card::before, .cx-card__scan::after, .cx-emblem__orbit, .cx-wordmark::before, .cx-wordmark::after,
  .cx-card .button::after, .cx-dot, .cx-boot__log::after { animation: none !important; }
  .cx-card { animation: none; transition: none; }
}