/* ============================================================
   NEWS PIPELINE · AI News & Content Platform · Login
   Palette
   --ink        #060b12  deep space background
   --panel      #0a1420  glass panel base
   --cyan       #45e0f5  primary neon
   --cyan-soft  #9beef9  bright text
   --orange     #ff9a3c  accent / warnings
   --steel      #8fa8b8  muted labels
   ============================================================ */

:root{
  --ink:#060b12;
  --panel:rgba(10,20,32,.78);
  --panel-solid:#0a1420;
  --cyan:#45e0f5;
  --cyan-dim:rgba(69,224,245,.35);
  --cyan-glow:rgba(69,224,245,.18);
  --cyan-soft:#c9f6ff;
  --orange:#ff9a3c;
  --orange-dim:rgba(255,154,60,.4);
  --green:#54f0b8;
  --steel:#7e97a8;
  --line:rgba(69,224,245,.22);
  --font-d:'Orbitron',sans-serif;
  --font-b:'Rajdhani',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
  background:var(--ink);
  font-family:var(--font-b);
  color:var(--cyan-soft);
  overflow-x:hidden;
  min-height:100vh;
}

/* ================= SCENE / BACKGROUND ================= */

.scene{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  perspective:1400px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  background:
    radial-gradient(1200px 700px at 50% 30%, #0d1c2c 0%, transparent 60%),
    radial-gradient(900px 600px at 15% 80%, #0a1826 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 75%, #0a1826 0%, transparent 55%),
    var(--ink);
}

/* moving grid floor */
.bg-floor{
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-12%;
  height:55%;
  background-image:
    linear-gradient(rgba(69,224,245,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,224,245,.10) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(62deg);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
  animation:floorScroll 14s linear infinite;
  pointer-events:none;
}
@keyframes floorScroll{
  from{background-position:0 0, 0 0}
  to{background-position:0 64px, 0 0}
}

/* ceiling cables */
.bg-cables{
  position:absolute;
  top:0;left:0;right:0;
  height:22%;
  pointer-events:none;
  opacity:.6;
}
.bg-cables svg{width:100%;height:100%}

/* ambient particles */
.bg-dust{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.dust{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--cyan);
  opacity:0;
  filter:blur(.5px);
  animation:dustFloat linear infinite;
}
@keyframes dustFloat{
  0%{transform:translateY(20px);opacity:0}
  15%{opacity:.55}
  85%{opacity:.35}
  100%{transform:translateY(-80vh);opacity:0}
}

/* far parallax layers — blurred news screens */
.bg-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:transform;
}

.screen{
  position:absolute;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 0 24px rgba(69,224,245,.08), inset 0 0 40px rgba(69,224,245,.05);
  padding:14px 16px;
  backdrop-filter:blur(2px);
}
.screen::after{ /* scanline sheen */
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  pointer-events:none;
}

.screen .s-head{
  font-family:var(--font-d);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--cyan-soft);
  margin-bottom:8px;
  white-space:nowrap;
}
.screen .s-line{
  height:5px;
  margin:6px 0;
  background:linear-gradient(90deg, rgba(126,151,168,.5), rgba(126,151,168,.08));
}
.screen .s-line.short{width:62%}
.screen .s-thumb{
  float:left;
  width:38px;height:38px;
  margin-right:10px;
  background:radial-gradient(circle at 35% 30%, rgba(69,224,245,.7), rgba(10,30,45,.9));
  border:1px solid var(--line);
}
.screen .s-big{
  font-family:var(--font-d);
  font-size:20px;
  font-weight:700;
  color:var(--cyan-soft);
  text-shadow:0 0 14px var(--cyan-dim);
}
.screen .s-cap{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--steel);
  text-transform:uppercase;
}

/* thin animated bars inside far screens */
.mini-bars{display:flex;align-items:flex-end;gap:4px;height:42px;margin-top:8px}
.mini-bars i{
  flex:1;
  background:linear-gradient(to top, rgba(69,224,245,.85), rgba(69,224,245,.15));
  animation:barPulse 2.6s ease-in-out infinite;
}
@keyframes barPulse{
  0%,100%{transform:scaleY(.45)}
  50%{transform:scaleY(1)}
}
.mini-bars i{transform-origin:bottom}

/* silhouettes of operators at desks */
.bg-people{
  position:absolute;
  bottom:0;left:0;right:0;
  height:26%;
  pointer-events:none;
  opacity:.5;
}
.bg-people svg{width:100%;height:100%}

/* ================= MAIN HUD PANEL ================= */

.hud{
  position:relative;
  width:min(1180px,100%);
  will-change:transform;
  transform-style:preserve-3d;
}

.hud-frame{
  position:relative;
  background:linear-gradient(180deg, rgba(12,24,38,.92), rgba(8,16,26,.94));
  border:1px solid var(--line);
  box-shadow:
    0 0 60px rgba(69,224,245,.10),
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 80px rgba(69,224,245,.04);
  padding:26px 26px 30px;
  clip-path:polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
}

/* corner brackets */
.corner{
  position:absolute;
  width:34px;height:34px;
  border:2px solid var(--cyan);
  filter:drop-shadow(0 0 6px var(--cyan-dim));
  pointer-events:none;
  z-index:5;
}
.corner.tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.corner.tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.corner.bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.corner.br{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* horizontal scan line sweeping the whole HUD */
.hud-scan{
  position:absolute;
  left:0;right:0;
  height:110px;
  top:-110px;
  background:linear-gradient(to bottom, transparent, rgba(69,224,245,.06) 60%, rgba(69,224,245,.14) 98%, rgba(69,224,245,.35) 100%);
  animation:hudScan 7s linear infinite;
  pointer-events:none;
  z-index:4;
}
@keyframes hudScan{
  0%{top:-110px;opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}

.hud-grid{
  display:grid;
  grid-template-columns:250px 1fr 250px;
  gap:22px;
  align-items:stretch;
}

/* ---------- shared card ---------- */
.card{
  position:relative;
  background:rgba(8,18,30,.7);
  border:1px solid var(--line);
  padding:12px 14px;
}
.card::before{ /* top accent notch */
  content:'';
  position:absolute;
  top:-1px;left:-1px;
  width:26px;height:3px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-dim);
}
.card.accent-orange::before{background:var(--orange);box-shadow:0 0 8px var(--orange-dim)}

.card-title{
  font-family:var(--font-d);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--steel);
  text-transform:uppercase;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.card-title .tag{color:var(--orange)}

/* ---------- LEFT COLUMN ---------- */

.col{display:flex;flex-direction:column;gap:18px}

.clock-card{padding:14px}
.clock-row{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.clock-time{
  font-family:var(--font-d);
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:#fff;
  text-shadow:0 0 18px var(--cyan-dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.clock-time .sec{
  font-size:.55em;
  color:var(--cyan);
  vertical-align:baseline;
}
.clock-date{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-d);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--cyan-soft);
  text-transform:uppercase;
  white-space:nowrap;
}
.clock-date::before{
  content:'';
  width:18px;
  height:2px;
  background:var(--orange);
  box-shadow:0 0 6px var(--orange-dim);
  flex:none;
}
.clock-status{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
}
.clock-status b{color:var(--green);font-weight:700}
.clock-status .div{color:var(--cyan-dim);padding:0 4px}

/* signal / waveform chart */
.wave-wrap{position:relative}
.wave-wrap svg{display:block;width:100%;height:96px}
.wave-cyan{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  filter:drop-shadow(0 0 4px var(--cyan-dim));
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:drawLine 4s ease forwards, waveShift 8s 4s ease-in-out infinite alternate;
}
.wave-orange{
  fill:none;
  stroke:var(--orange);
  stroke-width:1.6;
  opacity:.85;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:drawLine 4s .6s ease forwards, waveShift 9s 4.6s ease-in-out infinite alternate-reverse;
}
.wave-fill{
  fill:url(#waveGrad);
  opacity:0;
  animation:fadeIn 1.5s 2.2s forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes waveShift{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes fadeIn{to{opacity:1}}

.wave-grid line{stroke:rgba(69,224,245,.12);stroke-width:1}

/* radar dial */
.radar-wrap{
  display:flex;
  gap:14px;
  align-items:center;
}
.radar{
  position:relative;
  width:96px;height:96px;
  flex:none;
}
.radar svg{width:100%;height:100%;display:block}
.radar .ring{fill:none;stroke:var(--line);stroke-width:1}
.radar .ring.dashed{stroke-dasharray:3 5}
.radar .cross{stroke:rgba(69,224,245,.18);stroke-width:1}
.radar-sweep{
  position:absolute;inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(69,224,245,.5), transparent 70deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 12%, #000 13%);
          mask:radial-gradient(circle, transparent 12%, #000 13%);
  animation:spin 4s linear infinite;
}
.radar .blip{
  fill:var(--orange);
  animation:blip 2.4s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blip{0%,100%{opacity:.15}45%{opacity:1}}

.radar-legend{font-size:12px;line-height:1.9;color:var(--steel);letter-spacing:.05em;min-width:0}
.radar-legend b{color:var(--cyan-soft);font-family:var(--font-d);font-size:11px}
.radar-legend .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.c{background:var(--cyan);box-shadow:0 0 6px var(--cyan-dim)}
.dot.o{background:var(--orange);box-shadow:0 0 6px var(--orange-dim)}
.dot.g{background:var(--green);box-shadow:0 0 6px rgba(84,240,184,.4)}

/* metric ticks */
.ticks{display:flex;flex-direction:column;gap:9px}
.tick{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase}
.tick .bar{
  flex:1;height:4px;
  background:rgba(69,224,245,.12);
  position:relative;overflow:hidden;
}
.tick .bar i{
  position:absolute;inset:0;
  transform-origin:left;
  background:linear-gradient(90deg, var(--cyan), rgba(69,224,245,.4));
  animation:tickLoad 1.6s cubic-bezier(.2,.8,.2,1) forwards;
  transform:scaleX(0);
}
.tick .bar i.o{background:linear-gradient(90deg, var(--orange), rgba(255,154,60,.4))}
.tick .val{font-family:var(--font-d);font-size:11px;color:var(--cyan-soft);min-width:38px;text-align:right}
@keyframes tickLoad{to{transform:scaleX(var(--w,1))}}

/* ---------- CENTER COLUMN ---------- */

.center-col{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
}

.octagon{
  position:relative;
  width:min(520px,100%);
  padding:44px 48px 40px;
  background:
    radial-gradient(500px 300px at 50% 0%, rgba(69,224,245,.07), transparent 70%),
    rgba(6,14,24,.85);
  clip-path:polygon(
    18% 0, 82% 0,
    100% 14%, 100% 86%,
    82% 100%, 18% 100%,
    0 86%, 0 14%
  );
}
.octagon-border{
  position:absolute;inset:0;
  pointer-events:none;
}
.octagon-border svg{width:100%;height:100%;display:block}
.octagon-border path{
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.6;
  filter:drop-shadow(0 0 6px var(--cyan-dim));
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  animation:drawOct 2.6s .3s ease forwards;
}
.octagon-border path.inner{
  stroke:rgba(69,224,245,.35);
  stroke-width:1;
  stroke-dasharray:6 8;
  animation:none;
  stroke-dashoffset:0;
}
@keyframes drawOct{to{stroke-dashoffset:0}}

/* circuit traces behind form */
.circuits{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
}
.circuits svg{width:100%;height:100%}
.circuits path{stroke:rgba(69,224,245,.25);stroke-width:1;fill:none}
.circuits circle{fill:rgba(69,224,245,.5)}
.c-pulse{
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.4;
  stroke-dasharray:24 400;
  filter:drop-shadow(0 0 3px var(--cyan-dim));
  animation:circuitFlow 5s linear infinite;
}
@keyframes circuitFlow{to{stroke-dashoffset:-424}}

/* logo */
.logo{
  position:relative;
  width:92px;height:104px;
  margin:0 auto 14px;
  animation:logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.logo svg{width:100%;height:100%;display:block;overflow:visible}
.logo .hex-outer{
  fill:rgba(8,18,30,.9);
  stroke:url(#hexGrad);
  stroke-width:2.5;
  filter:drop-shadow(0 0 12px rgba(255,154,60,.35)) drop-shadow(0 0 20px rgba(69,224,245,.25));
}
.logo .hex-inner{fill:none;stroke:rgba(69,224,245,.4);stroke-width:1;stroke-dasharray:4 6}
.logo .glyph{
  font-family:var(--font-d);
  font-size:44px;
  font-weight:900;
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:central;
  filter:drop-shadow(0 0 8px var(--cyan))
}
.logo .halo{
  fill:none;
  stroke:var(--cyan-dim);
  stroke-width:1;
  animation:haloPulse 3s ease-in-out infinite;
  transform-origin:center;
}
@keyframes haloPulse{
  0%,100%{opacity:.2;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.06)}
}

.brand{
  text-align:center;
  margin-bottom:22px;
}
.brand h1{
  font-family:var(--font-d);
  font-size:clamp(21px,2.8vw,30px);
  font-weight:900;
  letter-spacing:.16em;
  margin-right:-.16em; /* optically re-center tracked caps */
  white-space:nowrap;
  color:#fff;
  text-shadow:
    0 0 10px rgba(69,224,245,.7),
    0 0 34px rgba(69,224,245,.35);
  animation:brandGlow 4s ease-in-out infinite;
}
@keyframes brandGlow{
  0%,100%{text-shadow:0 0 10px rgba(69,224,245,.7),0 0 34px rgba(69,224,245,.35)}
  50%{text-shadow:0 0 14px rgba(69,224,245,.95),0 0 48px rgba(69,224,245,.5)}
}
.brand .sub{
  font-family:var(--font-d);
  font-size:10px;
  font-weight:500;
  letter-spacing:.42em;
  margin-right:-.42em;
  color:var(--steel);
  text-transform:uppercase;
  margin-top:8px;
}

.form-head{
  text-align:center;
  margin-bottom:22px;
}
.form-head h2{
  font-family:var(--font-d);
  font-size:clamp(15px,1.6vw,19px);
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
}
.form-head p{
  font-family:var(--font-d);
  font-size:9px;
  letter-spacing:.34em;
  margin-right:-.34em;
  color:var(--cyan);
  margin-top:6px;
  text-transform:uppercase;
}
.form-head p::before,
.form-head p::after{
  content:'—';
  color:var(--cyan-dim);
  margin:0 8px;
}

/* form */
.field{margin-bottom:16px}
.field label{
  display:block;
  font-family:var(--font-d);
  font-size:10px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--cyan-soft);
  text-transform:uppercase;
  margin-bottom:7px;
}
.input-wrap{
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  background:rgba(4,10,18,.85);
  transition:border-color .25s, box-shadow .25s;
  position:relative;
}
.input-wrap:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(69,224,245,.25), 0 0 18px rgba(69,224,245,.15);
}
.input-wrap::after{ /* bottom loading line on focus */
  content:'';
  position:absolute;
  left:0;bottom:-1px;
  height:2px;width:100%;
  background:linear-gradient(90deg, var(--cyan), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.input-wrap:focus-within::after{transform:scaleX(1)}

.input-icon{
  flex:none;
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  background:rgba(69,224,245,.06);
}
.input-icon svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:1.8;filter:drop-shadow(0 0 4px var(--cyan-dim))}

.input-wrap input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  padding:12px 14px;
  color:#fff;
  font-family:var(--font-b);
  font-size:15px;
  font-weight:500;
  letter-spacing:.06em;
  caret-color:var(--cyan);
}
.input-wrap input::placeholder{color:rgba(126,151,168,.55)}
.input-wrap input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px #050d17 inset;
  -webkit-text-fill-color:#fff;
}

/* sign in button */
.btn-signin{
  position:relative;
  width:100%;
  margin-top:8px;
  padding:13px 18px;
  font-family:var(--font-d);
  font-size:15px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#03222b;
  cursor:pointer;
  border:1px solid var(--cyan);
  background:linear-gradient(180deg, #9ff1fd 0%, #45e0f5 55%, #23b9d6 100%);
  box-shadow:
    0 0 16px rgba(69,224,245,.45),
    0 0 46px rgba(69,224,245,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
  overflow:hidden;
}
.btn-signin .chev{letter-spacing:0;margin-left:10px;font-weight:900}
.btn-signin:hover{
  filter:brightness(1.08);
  box-shadow:0 0 24px rgba(69,224,245,.7), 0 0 70px rgba(69,224,245,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-signin:active{transform:translateY(1px) scale(.995)}
.btn-signin::before{ /* sweeping shine */
  content:'';
  position:absolute;
  top:-40%;bottom:-40%;
  width:34%;
  left:-45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform:skewX(-20deg);
  animation:shine 3.4s ease-in-out infinite;
}
@keyframes shine{
  0%,55%{left:-45%}
  85%,100%{left:130%}
}
.btn-signin:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* remember me */
.remember{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.remember label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  transition:color .2s;
  user-select:none;
}
.remember label:hover{color:var(--cyan-soft)}
.remember input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.chk{
  position:relative;
  width:18px;height:18px;
  flex:none;
  border:1px solid var(--cyan);
  background:rgba(4,10,18,.9);
  box-shadow:0 0 8px rgba(69,224,245,.2), inset 0 0 6px rgba(69,224,245,.08);
  transition:background .2s, box-shadow .2s;
  clip-path:polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.chk svg{
  position:absolute;inset:2px;
  stroke:#03222b;
  stroke-width:3;
  fill:none;
  stroke-dasharray:24;
  stroke-dashoffset:24;
  transition:stroke-dashoffset .28s ease .05s;
}
.remember input:checked + .chk{
  background:linear-gradient(180deg, #9ff1fd, #2fc7e2);
  box-shadow:0 0 12px rgba(69,224,245,.6), 0 0 30px rgba(69,224,245,.25);
}
.remember input:checked + .chk svg{stroke-dashoffset:0}
.remember input:focus-visible + .chk{outline:2px solid var(--cyan);outline-offset:3px}

.form-foot{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-family:var(--font-d);
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(126,151,168,.7);
  text-transform:uppercase;
}
.form-foot .ok{color:var(--green)}

/* fingerprint decorations near octagon */
.deco-node{
  position:absolute;
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,18,30,.8);
  z-index:3;
}
.deco-node::before{
  content:'';
  position:absolute;inset:5px;
  border:1px dashed var(--cyan-dim);
  border-radius:50%;
  animation:spin 12s linear infinite;
}
.deco-node svg{width:18px;height:18px;stroke:var(--cyan);fill:none;stroke-width:1.5}
.deco-node.tl2{top:-4px;left:6%}
.deco-node.br2{bottom:-4px;right:6%}

/* ---------- RIGHT COLUMN ---------- */

.status-list{display:flex;flex-direction:column;gap:8px}
.status-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  background:rgba(4,12,20,.7);
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
}
.status-item.orange{border-left-color:var(--orange)}
.status-item.green{border-left-color:var(--green)}
.status-item .ic{
  flex:none;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(69,224,245,.08);
  border:1px solid var(--line);
}
.status-item .ic svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:1.8}
.status-item .txt{flex:1;min-width:0}
.status-item .k{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--steel);
  text-transform:uppercase;
  line-height:1.25;
}
.status-item .v{
  font-family:var(--font-d);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
}
.status-item .v.green{color:var(--green);text-shadow:0 0 10px rgba(84,240,184,.4)}
.status-item .v.orange{color:var(--orange);text-shadow:0 0 10px var(--orange-dim)}
.status-item .v.cyan{color:var(--cyan);text-shadow:0 0 10px var(--cyan-dim)}
.pulse-dot{
  width:7px;height:7px;
  flex:none;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px rgba(84,240,184,.7);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* rotating core dial */
.core-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.core{position:relative;width:128px;height:128px}
.core svg{width:100%;height:100%;display:block;overflow:visible}
.core .r1{fill:none;stroke:var(--line);stroke-width:1}
.core .r2{
  fill:none;stroke:var(--cyan);stroke-width:2;
  stroke-dasharray:40 22 8 22;
  transform-origin:center;
  animation:spin 9s linear infinite;
  filter:drop-shadow(0 0 4px var(--cyan-dim));
}
.core .r3{
  fill:none;stroke:var(--orange);stroke-width:1.6;
  stroke-dasharray:14 30;
  transform-origin:center;
  animation:spinRev 13s linear infinite;
  opacity:.9;
}
.core .r4{
  fill:none;stroke:rgba(69,224,245,.5);stroke-width:1;
  stroke-dasharray:2 6;
  transform-origin:center;
  animation:spin 24s linear infinite;
}
@keyframes spinRev{to{transform:rotate(-360deg)}}
.core .core-val{
  font-family:var(--font-d);
  font-size:19px;font-weight:700;
  fill:#fff;
  text-anchor:middle;
  filter:drop-shadow(0 0 6px var(--cyan-dim));
}
.core .core-cap{
  font-family:var(--font-b);
  font-size:8.5px;
  letter-spacing:.2em;
  fill:var(--steel);
  text-anchor:middle;
  text-transform:uppercase;
}
/* bar chart card */
.bars-chart{display:flex;align-items:flex-end;gap:6px;height:72px;padding-top:4px}
.bars-chart i{
  flex:1;
  background:linear-gradient(to top, var(--cyan), rgba(69,224,245,.12));
  box-shadow:0 0 6px rgba(69,224,245,.2);
  transform:scaleY(0);
  transform-origin:bottom;
  animation:growBar .9s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.bars-chart i.hot{background:linear-gradient(to top, var(--orange), rgba(255,154,60,.12));box-shadow:0 0 6px var(--orange-dim)}
@keyframes growBar{to{transform:scaleY(1)}}

/* system load */
.load-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.load-row .lbl{
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;
}
.load-row .pct{
  font-family:var(--font-d);
  font-size:20px;font-weight:700;color:#fff;
  text-shadow:0 0 12px var(--cyan-dim);
  margin-left:auto;
  font-variant-numeric:tabular-nums;
}
.load-bar{
  margin-top:10px;
  height:8px;
  background:rgba(69,224,245,.1);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.load-bar i{
  position:absolute;
  inset:1px auto 1px 1px;
  width:0%;
  background:
    repeating-linear-gradient(-55deg, rgba(255,255,255,.25) 0 5px, transparent 5px 10px),
    linear-gradient(90deg, var(--cyan), #7cecfb);
  box-shadow:0 0 10px rgba(69,224,245,.5);
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}

/* ticker at bottom of hud */
.ticker{
  margin-top:22px;
  border:1px solid var(--line);
  background:rgba(4,12,20,.75);
  display:flex;
  align-items:center;
  overflow:hidden;
  height:38px;
}
.ticker .tk-label{
  flex:none;
  height:100%;
  display:flex;align-items:center;
  padding:0 14px;
  font-family:var(--font-d);
  font-size:10px;font-weight:700;
  letter-spacing:.2em;
  color:#03222b;
  background:linear-gradient(180deg,#9ff1fd,#2fc7e2);
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding-right:24px;
}
.tk-viewport{flex:1;overflow:hidden;position:relative;height:100%}
.tk-track{
  position:absolute;
  display:flex;
  align-items:center;
  height:100%;
  white-space:nowrap;
  animation:tick 38s linear infinite;
  will-change:transform;
}
.tk-track span{
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--cyan-soft);
  text-transform:uppercase;
  padding:0 26px;
}
.tk-track span b{color:var(--orange)}
.tk-track span::after{
  content:'◆';
  color:var(--cyan-dim);
  margin-left:26px;
  font-size:9px;
}
@keyframes tick{to{transform:translateX(-50%)}}

/* ================= RESPONSIVE ================= */

@media (max-width:1080px){
  .hud-grid{grid-template-columns:210px 1fr 210px;gap:16px}
  .octagon{padding:36px 30px 32px}
}

@media (max-width:900px){
  .scene{padding:28px 14px;align-items:flex-start}
  .hud-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "center center"
      "left right";
  }
  .center-col{grid-area:center}
  .col-left{grid-area:left}
  .col-right{grid-area:right}
  .octagon{width:min(560px,100%)}
}

@media (max-width:640px){
  .hud-frame{padding:16px 14px 20px;clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px)}
  .hud-grid{grid-template-columns:1fr;grid-template-areas:"center" "left" "right";gap:14px}
  .octagon{padding:30px 20px 26px;clip-path:polygon(12% 0, 88% 0, 100% 9%, 100% 91%, 88% 100%, 12% 100%, 0 91%, 0 9%)}
  .deco-node{display:none}
  .brand h1{font-size:clamp(17px,5.4vw,22px);letter-spacing:.12em;margin-right:-.12em}
  .clock-time{font-size:26px}
  .bg-people{display:none}
  .corner{width:24px;height:24px}
  .form-foot{flex-direction:column;gap:4px;align-items:center;text-align:center}
}

/* ================= MOTION SAFETY ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .tk-track{animation:none;transform:none}
  .hud{transform:none !important}
  .bg-layer{transform:none !important}
}

/* ================= SYMFONY: ошибка авторизации ================= */
.form-alert{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:10px 12px;
  border:1px solid var(--orange-dim);
  border-left:3px solid var(--orange);
  background:rgba(255,154,60,.07);
  color:#ffd9b0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
}
.form-alert svg{
  flex:none;
  width:16px;height:16px;
  stroke:var(--orange);
  fill:none;
  stroke-width:2;
  filter:drop-shadow(0 0 4px var(--orange-dim));
}

/* ================= TYPEWRITER: заголовок NEWS PIPELINE ================= */
/* ghost — невидимая копия текста, держит ширину и центровку h1;
   live печатается поверх неё слева, поэтому буквы не «переползают»
   при наборе. Каретка мигает и гаснет после набора. */
.brand h1{
  position:relative;
  display:inline-block;
}
.brand h1 .ghost{visibility:hidden}
.brand h1 .live{
  position:absolute;
  left:0;top:0;
  white-space:nowrap;
  text-align:left;
}
.type-caret{
  display:inline-block;
  width:.55ch;
  height:.95em;
  margin-left:2px;
  vertical-align:-.08em;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-dim), 0 0 24px var(--cyan-glow);
  animation:caretBlink .75s step-end infinite;
}
@keyframes caretBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}
.type-caret.off{
  animation:none;
  opacity:0;
  transition:opacity .4s ease;
}