/* DORNIER FLIGHT COMMAND — LOGIN EXPERIENCE */
:root {
  --ink: #071629;
  --navy: #0a2039;
  --navy-2: #102e50;
  --blue: #2f7ee8;
  --blue-bright: #65b9ff;
  --paper: #f8fbff;
  --muted: #7d8ba0;
  --line: rgba(145, 164, 188, .24);
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body.command-login {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-ui);
  background: #071629; overflow-x: hidden; isolation: isolate;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.mono { font-family: var(--font-mono); letter-spacing: .06em; }
.ambient-scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background:
  radial-gradient(ellipse at 28% 30%, rgba(245, 158, 11, .2), transparent 48%),
  radial-gradient(ellipse at 82% 82%, rgba(217, 119, 6, .16), transparent 42%),
  radial-gradient(ellipse at 15% 85%, rgba(35, 100, 174, .16), transparent 45%),
  #051121; }
.ambient-grid { position: absolute; inset: -20%; opacity: .14; background-image: linear-gradient(rgba(245,158,11,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(115,176,231,.12) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(800px) rotateX(58deg) scale(1.5); transform-origin: center bottom; mask-image: linear-gradient(to bottom, transparent 8%, black 60%, transparent); }
.ambient-orb { position: absolute; width: 42vw; height: 42vw; min-width: 300px; min-height: 300px; border-radius: 50%; filter: blur(75px); opacity: .18; }
.ambient-orb--one { background: radial-gradient(circle, #f59e0b, #d97706); top: -16%; left: -8%; }
.ambient-orb--two { background: radial-gradient(circle, #b45309, #1e40af); right: -18%; bottom: -28%; }
.ambient-scan { position: absolute; inset: 0; opacity: .14; background: linear-gradient(transparent 0%, rgba(251,191,36,.14) 50%, transparent 100%); height: 28%; animation: ambientScan 12s linear infinite; }
.flight-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .24; }
.flight-lines path { fill: none; stroke: #fbbf24; stroke-width: 1; stroke-dasharray: 5 10; animation: dashFlight 24s linear infinite; }
.flight-lines circle { fill: #fef08a; filter: drop-shadow(0 0 7px #f59e0b); }
@keyframes ambientScan { from { transform: translateY(-40%); } to { transform: translateY(400%); } }
@keyframes dashFlight { to { stroke-dashoffset: -420; } }

.login-page-container { min-height: 100vh; display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); }
.portal-card {
  width: min(1380px, 98vw); min-height: 820px; display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(400px, 0.96fr);
  border: 1px solid rgba(251,191,36,.28); border-radius: 28px; overflow: hidden; position: relative;
  background: rgba(246,250,255,.96); box-shadow: 0 45px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.12);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.portal-card::before { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; background: linear-gradient(130deg,rgba(254,240,138,.16),transparent 24%,transparent 76%,rgba(245,158,11,.1)); }

/* ==========================================================================
   LEFT COLUMN: Monumental Branding Panel & Cinematic Aviation Environment
   ========================================================================== */
.portal-brand-pane {
  min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px clamp(22px, 3.2vw, 44px) 24px; color: #f4f8ff;
  background:
    radial-gradient(circle at 50% 48%, rgba(245, 158, 11, .34) 0%, rgba(217, 119, 6, .22) 28%, rgba(180, 83, 9, .12) 48%, transparent 70%),
    radial-gradient(ellipse at 50% 44%, rgba(254, 240, 138, .18) 0%, rgba(234, 179, 8, .22) 34%, transparent 64%),
    radial-gradient(ellipse at 85% 90%, rgba(217, 119, 6, .26), transparent 50%),
    radial-gradient(ellipse at 15% 15%, rgba(245, 158, 11, .15), transparent 45%),
    linear-gradient(155deg, #09172c 0%, #061222 55%, #030a15 100%);
  isolation: isolate; overflow: hidden;
}

/* Top Tactical Status Bar */
.brand-topline {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 10; padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 158, 11, .18);
  font: 500 9px var(--font-mono); letter-spacing: .14em; color: #e2c08d;
}
.topline-left, .topline-right { display: flex; align-items: center; gap: 8px; }
.brand-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #f59e0b; display: inline-block; }
.topline-divider { width: 1px; height: 12px; background: rgba(245, 158, 11, .28); margin: 0 2px; }
.accent-gold { color: #fbbf24; font-weight: 600; text-shadow: 0 0 8px rgba(245,158,11,.4); }
.hud-tag { padding: 2px 7px; border: 1px solid rgba(245, 158, 11, .35); border-radius: 4px; background: rgba(245, 158, 11, .12); color: #fde047; }
.hud-coords { color: #d4a359; font-size: 8px; }

/* ==========================================================================
   CINEMATIC STAGE: ENORMOUS CENTERED EMBLEM + DYNAMIC AVIATION ENVIRONMENT
   ========================================================================== */
.cinematic-stage {
  flex: 1; min-height: 520px; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible; isolation: isolate; padding: 18px 0;
}

/* 1. Volumetric Lights, Grid & Horizon Canvas with Warm Yellowish-Gold */
.atmosphere-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.volumetric-light { position: absolute; border-radius: 50%; pointer-events: none; }
.volumetric-light--primary {
  left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: 660px; height: 660px;
  background: radial-gradient(circle, rgba(245, 158, 11, .38) 0%, rgba(217, 119, 6, .24) 34%, rgba(180, 83, 9, .12) 54%, transparent 72%);
  filter: blur(52px);
}
.volumetric-light--gold {
  left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: 490px; height: 490px;
  background: radial-gradient(circle, rgba(254, 240, 138, .48) 0%, rgba(250, 204, 21, .38) 26%, rgba(245, 158, 11, .28) 46%, transparent 70%);
  filter: blur(34px);
}
.volumetric-light--cyan {
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 580px; height: 380px;
  background: radial-gradient(ellipse, rgba(234, 179, 8, .26) 0%, rgba(217, 119, 6, .18) 40%, transparent 70%);
  filter: blur(44px);
}
.atmosphere-grid {
  position: absolute; inset: -15%; opacity: .13;
  background-image:
    linear-gradient(rgba(245, 158, 11, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 179, 8, .16) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(700px) rotateX(60deg) scale(1.4);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent 10%, black 65%, transparent);
}
.ocean-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px; pointer-events: none; overflow: hidden;
}
.horizon-line {
  position: absolute; bottom: 65px; left: -10%; right: -10%; height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, rgba(245, 158, 11, .35) 25%, rgba(254, 240, 138, .8) 50%, rgba(245, 158, 11, .35) 75%, transparent 95%);
  box-shadow: 0 0 18px rgba(245, 158, 11, .7);
}
.ocean-reflection {
  position: absolute; bottom: 0; left: 0; right: 0; height: 65px;
  background: linear-gradient(to bottom, rgba(217, 119, 6, .26), rgba(180, 83, 9, .08) 50%, transparent 85%);
  mask-image: repeating-linear-gradient(0deg, black, black 2px, transparent 3px, transparent 5px);
  -webkit-mask-image: repeating-linear-gradient(0deg, black, black 2px, transparent 3px, transparent 5px);
}

/* 2. Concentric Multi-Ring Radar & Yellowish-Gold Scanning Beam */
.radar-system {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 680px; height: 680px; pointer-events: none; z-index: 2;
}
.radar-concentric {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; aspect-ratio: 1;
}
.radar-concentric--outer {
  width: 650px; border: 1px solid rgba(245, 158, 11, .2);
  box-shadow: 0 0 35px rgba(245, 158, 11, .08), inset 0 0 35px rgba(245, 158, 11, .05);
}
.radar-concentric--middle {
  width: 520px; border: 1px dashed rgba(251, 191, 36, .28);
  animation: radarSpinCW 40s linear infinite;
}
.radar-concentric--calibration {
  width: 440px; border: 1px dotted rgba(254, 240, 138, .36);
  box-shadow: 0 0 16px rgba(245, 158, 11, .18);
  animation: radarSpinCCW 32s linear infinite;
}
.radar-concentric--inner {
  width: 320px; border: 1px solid rgba(245, 158, 11, .28);
}
.radar-crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(245, 158, 11, .18);
}
.radar-crosshair--x { width: 670px; height: 1px; }
.radar-crosshair--y { width: 1px; height: 670px; }
.radar-scan-beam {
  position: absolute; left: 50%; top: 50%; width: 330px; height: 330px;
  transform-origin: 0 0; border-radius: 0 100% 0 0;
  background: conic-gradient(from 0deg at 0 0, rgba(251, 191, 36, .35) 0deg, rgba(245, 158, 11, .18) 25deg, rgba(217, 119, 6, .06) 45deg, transparent 65deg);
  filter: blur(2px); animation: radarSpinCW 6.5s linear infinite;
}
.range-tag { position: absolute; font-size: 8px; color: #eab308; }
.range-tag--10nm { left: calc(50% + 168px); top: 50%; transform: translateY(-50%); }
.range-tag--25nm { left: calc(50% + 268px); top: 50%; transform: translateY(-50%); }
.range-tag--50nm { left: calc(50% + 332px); top: 50%; transform: translateY(-50%); }

/* 3. Orbital Flight Vectors & HUD Graphics */
.orbital-flight-system {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 720px; height: 720px; pointer-events: none; z-index: 3; overflow: visible;
}
.flight-orbit { fill: none; stroke-linecap: round; }
.flight-orbit--cyan {
  stroke: #38bdf8; stroke-width: 1.5; stroke-dasharray: 10 18;
  animation: orbitDashStream 18s linear infinite; opacity: .55;
  filter: drop-shadow(0 0 6px #0284c7);
}
.flight-orbit--gold {
  stroke: #fbbf24; stroke-width: 1.8; stroke-dasharray: 8 20;
  animation: orbitDashStreamRev 22s linear infinite; opacity: .85;
  filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 18px rgba(245, 158, 11, .6));
}
.waypoint-text { font-size: 9px; fill: #fde047; letter-spacing: .08em; }

/* 4. Luminous Particles & Meteor Streaks */
.particles-field { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.meteor {
  position: absolute; width: 130px; height: 1.8px;
  background: linear-gradient(90deg, #ffffff, #fef08a, #f59e0b, transparent);
  border-radius: 999px; filter: drop-shadow(0 0 6px #f59e0b);
  opacity: 0; transform: rotate(-35deg);
}
.meteor--1 { top: 16%; right: 18%; animation: meteorStreak 7s ease-in-out infinite 1.8s; }
.meteor--2 { top: 58%; left: 16%; animation: meteorStreak 9s ease-in-out infinite 4.5s; }

/* 5. Energy Aura & Center Solar Power Halo */
.crest-power-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, .5) 0%, rgba(245, 158, 11, .42) 30%, rgba(217, 119, 6, .26) 52%, transparent 72%);
  filter: blur(28px); z-index: 4; pointer-events: none;
}
.crest-rim-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 120, .6) 0%, rgba(245, 158, 11, .48) 45%, rgba(180, 83, 9, .2) 65%, transparent 75%);
  filter: blur(18px); z-index: 3; pointer-events: none;
}
.crest-light-burst {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 650px; height: 650px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, .3) 0%, rgba(217, 119, 6, .15) 40%, transparent 68%);
  filter: blur(48px); z-index: 2; pointer-events: none;
}

/* ==========================================================================
   6. THE MONUMENTAL CENTERPIECE: HUGE DORNIER TRAINING FLIGHT EMBLEM
   ========================================================================== */
.monumental-crest-anchor {
  position: relative; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px; transform-style: preserve-3d;
}
.crest-3d-rig {
  position: relative; display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; transition: transform .15s ease-out;
}

/* ENORMOUS LOGO (400px–520px wide on desktop) WITH VIBRANT YELLOWISH-GOLDEN CORONA */
.monumental-crest-img {
  width: clamp(380px, 34vw, 510px);
  height: auto; max-width: 510px; aspect-ratio: 1 / 1;
  object-fit: contain; display: block; position: relative; z-index: 5;
  user-select: none; -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 45px rgba(245, 158, 11, .68))
    drop-shadow(0 0 20px rgba(254, 240, 138, .45))
    drop-shadow(0 25px 50px rgba(0, 0, 0, .9))
    drop-shadow(0 0 85px rgba(217, 119, 6, .45));
  transition: filter .5s ease;
}

/* Animated Specular Sheen Glint Sweep Masked to the Authentic Logo Shape */
.crest-specular-sweep {
  position: absolute; inset: -10%; z-index: 6; pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(254, 240, 138, .08) 44%,
    rgba(255, 255, 255, .75) 50%,
    rgba(245, 158, 11, .15) 56%,
    transparent 65%
  );
  mask-image: url('../images/dtf-logo.png');
  -webkit-mask-image: url('../images/dtf-logo.png');
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-position: center;
  mix-blend-mode: overlay;
  transform: translateX(-150%);
}

/* ==========================================================================
   BOTTOM HIERARCHY: DIGNIFIED, HIGH-STATUS AVIATION TYPOGRAPHY
   ========================================================================== */
.brand-hero-footer {
  position: relative; z-index: 10; padding-top: 14px;
  border-top: 1px solid rgba(245, 158, 11, .18);
}
.brand-org-kicker {
  display: block; font: 700 10px var(--font-mono); letter-spacing: .22em;
  color: #fbbf24; margin-bottom: 5px; text-shadow: 0 0 10px rgba(245,158,11,.4);
}
.brand-title-monumental {
  margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.1; color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.brand-title-monumental span { color: #fde047; font-weight: 600; text-shadow: 0 0 12px rgba(245,158,11,.5); }
.brand-caption-monumental {
  margin: 6px 0 0; font-size: 11px; color: #ebd1aa; letter-spacing: .01em; line-height: 1.6;
}
.brand-system-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.system-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px;
  background: rgba(30, 25, 10, .6); border: 1px solid rgba(245, 158, 11, .28);
  font-size: 9px; color: #fde047; letter-spacing: .08em;
}
.tag-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #fbbf24;
  box-shadow: 0 0 6px #f59e0b; display: inline-block;
}

/* Keyframe Animations */
@keyframes radarSpinCW { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes radarSpinCCW { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes orbitDashStream { to { stroke-dashoffset: -400; } }
@keyframes orbitDashStreamRev { to { stroke-dashoffset: 400; } }
@keyframes meteorStreak {
  0% { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  15% { opacity: 1; }
  30% { opacity: 0; transform: translate(-240px, 160px) rotate(-35deg); }
  100% { opacity: 0; transform: translate(-240px, 160px) rotate(-35deg); }
}

.portal-form-pane { min-width:0;display:flex;flex-direction:column;padding:34px clamp(28px,4vw,58px) 25px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,253,.96));position:relative; }
.form-pane-topline { justify-content:space-between;color:#73849a; }
.secure-label { display:inline-flex;align-items:center;gap:8px; }
.secure-icon { width:19px;height:19px;display:grid;place-items:center;border:1px solid #d7e2ef;border-radius:6px;color:#3677c7;font-size:13px; }
.form-build { color:#a3afbf;font-size:9px; }
.form-content { width:100%;max-width:390px;margin:auto; }
.form-header { margin-bottom:28px; }
.form-kicker { margin:0 0 12px;color:#347bd0;font-size:9px; }
.form-title { margin:0;color:#0b1d33;font-size:clamp(29px,3vw,38px);line-height:1.13;letter-spacing:-.055em;font-weight:700; }
.form-title span { color:#397bc1; }
.form-subtitle { margin:13px 0 0;color:#7b899b;font-size:12px;line-height:1.7; }
.login-form { display:grid;gap:19px; }
.form-group { min-width:0; }
.form-label { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#20334b;font-size:11px;font-weight:650;letter-spacing:.005em; }
.label-required { color:#367bd0;margin-left:5px; }
.input-wrapper { min-height:53px;display:flex;align-items:center;position:relative;border:1px solid #dce5ef;border-radius:12px;background:rgba(255,255,255,.8);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .25s ease; }
.input-wrapper:focus-within { border-color:#6aa8eb;background:#fff;box-shadow:0 0 0 4px rgba(64,135,213,.1),0 8px 20px rgba(36,92,151,.05);transform:translateY(-1px); }
.input-icon-prefix { width:48px;display:grid;place-items:center;flex-shrink:0;color:#8b9bb0;transition:color .25s ease; }
.input-icon-prefix svg { width:19px;height:19px; }
.input-wrapper:focus-within .input-icon-prefix { color:#367bd0; }
.form-input { width:100%;min-width:0;height:51px;border:0;outline:0;background:transparent;color:#10253e;font-size:12px;font-weight:500;padding:0 14px 0 0; }
.form-input::placeholder { color:#a4afbd;font-weight:400; }
.password-toggle-btn { width:45px;height:45px;display:grid;place-items:center;flex-shrink:0;margin-right:4px;border:0;border-radius:9px;background:transparent;color:#8292a7;cursor:pointer;transition:color .2s ease,background .2s ease; }
.password-toggle-btn:hover { color:#286cb6;background:#edf5ff; }
.password-toggle-btn svg { width:19px;height:19px; }
.field-error-message { display:block;min-height:0;margin-top:0;font-size:10px;color:#c43f50; }
.field-error-message.visible { margin-top:6px; }
.input-wrapper:has(.form-input.is-invalid) { border-color:#d75b6a;box-shadow:0 0 0 3px rgba(215,91,106,.08); }
.security-notice-card { display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #dce9f7;border-radius:12px;background:linear-gradient(110deg,#f0f7ff,#f8fbff); }
.notice-icon { width:32px;height:32px;display:grid;place-items:center;flex-shrink:0;border-radius:10px;background:#e0efff;color:#357bc7; }
.notice-icon svg { width:18px;height:18px; }
.security-notice-card strong,.security-notice-card small { display:block; }
.security-notice-card strong { color:#25415f;font-size:10px;font-weight:700; }
.security-notice-card small { margin-top:4px;color:#7c8fa5;font-size:9px;line-height:1.55; }
.glass-button-wrap { --pointer-x:50%;--pointer-y:50%;position:relative;isolation:isolate;width:100%;margin:2px 0 0;perspective:1000px;transform-style:preserve-3d; }
.glass-button { position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:15px 22px;overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:12px;color:#fff;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.24),transparent 34%),linear-gradient(115deg,#397fce 0%,#1c5ca5 48%,#0c2a4c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 -1px 0 rgba(255,255,255,.08),0 9px 20px rgba(23,77,135,.2),0 2px 4px rgba(7,28,53,.1);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);transform-style:preserve-3d;transition:box-shadow .3s ease,border-color .3s ease,filter .3s ease;cursor:pointer; }
.glass-button::before { content:"";position:absolute;inset:-80% -45%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.04) 43%,rgba(255,255,255,.44) 49%,rgba(255,255,255,.08) 54%,transparent 60%);transform:translateX(-70%) rotate(12deg);transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.glass-button::after { content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.14);border-radius:11px;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 36%,transparent 72%,rgba(145,204,255,.12)); }
.glass-button:hover { border-color:rgba(255,255,255,.9);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 0 1px rgba(92,167,255,.2),0 0 25px rgba(57,139,239,.26),0 16px 30px rgba(10,35,70,.24); }
.glass-button:hover::before { transform:translateX(70%) rotate(12deg); }
.glass-button:active { filter:brightness(.96); }
.glass-button:focus-visible { outline:3px solid #7bbcff;outline-offset:4px; }
.glass-button-text { position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:11px;transform:translateZ(16px);font-size:12px;font-weight:650;letter-spacing:.035em; }
.submit-arrow { width:17px;height:17px;margin-left:4px;transition:transform .25s ease; }
.glass-button:hover .submit-arrow { transform:translateX(4px); }
.button-glint { position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.18),transparent 40%);transition:opacity .25s ease; }
.glass-button:hover .button-glint { opacity:1; }
.glass-button-shadow { position:absolute;z-index:-1;left:12%;right:12%;bottom:-12px;height:23px;border-radius:50%;background:rgba(24,91,166,.3);filter:blur(16px);opacity:.62;transition:opacity .3s ease,transform .3s ease; }
.glass-button-wrap:hover .glass-button-shadow { opacity:.95;transform:scale(1.08); }
.glass-button:disabled { cursor:wait;opacity:.78;transform:none; }
.spinner { display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite; }
.is-loading .spinner { display:inline-block; }
.is-loading .submit-arrow { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.alert-banner { display:none;align-items:flex-start;gap:10px;padding:11px 13px;margin-bottom:16px;border:1px solid transparent;border-radius:10px;font-size:11px;line-height:1.55; }
.alert-banner.visible { display:flex;animation:alertEnter .28s ease both; }
.alert-banner svg { width:17px;height:17px;flex-shrink:0; }
.alert-error { color:#9e2637;background:#fff1f2;border-color:#ffd5da; }
.alert-info { color:#245d95;background:#edf6ff;border-color:#cfe5ff; }
@keyframes alertEnter { from { opacity:0;transform:translateY(-5px); } to { opacity:1;transform:translateY(0); } }
.prototype-helper { margin-top:24px;padding-top:17px;border-top:1px solid #e4eaf2; }
.prototype-heading { display:flex;align-items:center;gap:10px; }
.prototype-tag { font:600 8px var(--font-mono);letter-spacing:.11em;color:#73849a;white-space:nowrap; }
.prototype-line { height:1px;flex:1;background:#e3eaf2; }
.prototype-helper-text { margin:8px 0 12px;color:#929eae;font-size:10px;line-height:1.6; }
.demo-chip-group { display:flex;flex-wrap:wrap;gap:7px; }
.demo-chip { min-height:31px;padding:7px 10px;border:1px solid #dce5ef;border-radius:8px;background:rgba(255,255,255,.7);color:#53677f;font-size:9px;font-weight:600;cursor:pointer;transition:all .2s ease; }
.demo-chip:hover { border-color:#9fc7f3;background:#edf6ff;color:#205d9c;transform:translateY(-1px); }
.demo-chip--clear { color:#8c97a6;background:transparent; }
.portal-form-footer { display:flex;flex-direction:column;gap:7px;padding-top:20px;margin-top:26px;border-top:1px solid #e6ecf3;color:#9aa6b5;font:8px var(--font-mono);letter-spacing:.06em; }
.portal-form-footer i { font-style:normal;color:#c1ccd8;margin:0 5px; }
.portal-form-footer b { color:#4c92d9;margin:0 4px; }
/* ==========================================================================
   RESPONSIVE SCALING & ADAPTIVE VIEWPORTS
   ========================================================================== */
@media (min-width: 1200px) {
  .portal-card { min-height: 840px; }
  .monumental-crest-img { width: clamp(420px, 35vw, 520px); }
}

@media (max-width: 1100px) {
  .portal-card { grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.95fr); min-height: 760px; }
  .monumental-crest-img { width: clamp(340px, 32vw, 420px); }
  .radar-system, .orbital-flight-system { width: 560px; height: 560px; }
  .radar-concentric--outer { width: 540px; }
  .radar-concentric--middle { width: 440px; }
  .radar-concentric--calibration { width: 360px; }
  .radar-concentric--inner { width: 260px; }
}

@media (max-width: 900px) {
  .login-page-container { padding: 18px; min-height: 100vh; }
  .portal-card { display: flex; flex-direction: column; min-height: 0; border-radius: 24px; }
  .portal-brand-pane { padding: 24px 22px 20px; }
  .cinematic-stage { min-height: 380px; padding: 14px 0; }
  .monumental-crest-img { width: clamp(280px, 60vw, 360px); max-width: 360px; }
  .radar-system, .orbital-flight-system { width: 440px; height: 440px; }
  .radar-concentric--outer { width: 420px; }
  .radar-concentric--middle { width: 340px; }
  .radar-concentric--calibration { width: 280px; }
  .radar-concentric--inner { width: 200px; }
  .crest-power-halo { width: 340px; height: 340px; }
  .crest-rim-glow { width: 280px; height: 280px; }
  .volumetric-light--primary { width: 460px; height: 460px; }
  .brand-title-monumental { font-size: 25px; }
  .portal-form-pane { padding: 28px 24px 22px; }
  .form-content { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .login-page-container { padding: 8px; }
  .portal-brand-pane, .portal-form-pane { padding: 18px 16px; }
  .cinematic-stage { min-height: 310px; }
  .monumental-crest-img { width: clamp(230px, 75vw, 300px); }
  .radar-system, .orbital-flight-system { width: 320px; height: 320px; }
  .radar-concentric--outer { width: 310px; }
  .radar-concentric--middle { width: 250px; }
  .radar-concentric--calibration { width: 200px; }
  .radar-concentric--inner { width: 150px; }
  .crest-power-halo { width: 260px; height: 260px; }
  .crest-rim-glow { width: 220px; height: 220px; }
  .brand-title-monumental { font-size: 22px; }
  .brand-caption-monumental { font-size: 10px; }
  .brand-system-tags { gap: 6px; }
  .system-tag { font-size: 8px; padding: 2px 6px; }
  .demo-chip { padding: 6px 8px; font-size: 8px; }
}

/* ==========================================================================
   DARK THEME REFINEMENT FOR LOGIN PORTAL (SECTION 7)
   ========================================================================== */
:root[data-theme="dark"] .portal-card {
  background: rgba(20, 36, 58, 0.96);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(245, 158, 11, 0.2);
}

:root[data-theme="dark"] .portal-form-pane {
  background: linear-gradient(145deg, rgba(20, 36, 58, 0.98), rgba(13, 26, 45, 0.96));
  color: #F0F5FC;
}

:root[data-theme="dark"] .form-title {
  color: #F0F5FC;
}

:root[data-theme="dark"] .form-title span {
  color: #65B9FF;
}

:root[data-theme="dark"] .form-subtitle {
  color: #A5B7CE;
}

:root[data-theme="dark"] .form-label {
  color: #CBD5E1;
}

:root[data-theme="dark"] .input-wrapper {
  background: rgba(18, 34, 56, 0.85);
  border-color: #2C425C;
}

:root[data-theme="dark"] .input-wrapper:focus-within {
  background: #14243A;
  border-color: #3B82F6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 8px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .form-input {
  color: #F0F5FC;
}

:root[data-theme="dark"] .form-input::placeholder {
  color: #64748B;
}

:root[data-theme="dark"] .password-toggle-btn {
  color: #A5B7CE;
}

:root[data-theme="dark"] .password-toggle-btn:hover {
  color: #65B9FF;
  background: rgba(59, 130, 246, 0.15);
}

:root[data-theme="dark"] .security-notice-card {
  background: linear-gradient(110deg, #10243C, #142842);
  border-color: #2C425C;
}

:root[data-theme="dark"] .security-notice-card strong {
  color: #F0F5FC;
}

:root[data-theme="dark"] .security-notice-card small {
  color: #A5B7CE;
}

:root[data-theme="dark"] .notice-icon {
  background: rgba(37, 99, 235, 0.2);
  color: #60A5FA;
}

:root[data-theme="dark"] .form-footer-disclaimer {
  color: #64748B;
}

:root[data-theme="dark"] .alert-error {
  color: #FCA5A5;
  background: rgba(153, 27, 27, 0.25);
  border-color: rgba(248, 113, 113, 0.35);
}

:root[data-theme="dark"] .alert-info {
  color: #93C5FD;
  background: rgba(30, 58, 138, 0.25);
  border-color: rgba(96, 165, 250, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .crest-specular-sweep, .radar-scan-beam, .meteor { display: none !important; }
  .monumental-crest-img {
    opacity: 1 !important;
    transform: none !important;
    filter: drop-shadow(0 0 25px rgba(217, 119, 6, 0.4)) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8)) !important;
  }
}