/* ============================================================
   Pro Star Secure Access — CRT / circuit / gears
   ============================================================ */
:root {
  --ps-primary: #0ff;
  --ps-secondary: #0fa;
  --ps-accent: #f70;
  --ps-glow: #0ff;
  --ps-error: #f00;
  --ps-bg: #000;
}

*,*::before,*::after { box-sizing:border-box; }
html, body {
  margin:0; padding:0; height:100vh;
  background: var(--ps-bg);
  color: var(--ps-primary);
  font-family: 'Courier New', monospace;
  overflow: hidden;
  position: relative;
}

/* ---------- CRT overlay ---------- */
@keyframes ps-textShadow {
  0%   { text-shadow: 0.44px 0 1px rgba(0,30,255,.5), -0.44px 0 1px rgba(255,0,80,.3), 0 0 3px; }
  5%   { text-shadow: 2.79px 0 1px rgba(0,30,255,.5), -2.79px 0 1px rgba(255,0,80,.3), 0 0 3px; }
  100% { text-shadow: 0.44px 0 1px rgba(0,30,255,.5), -0.44px 0 1px rgba(255,0,80,.3), 0 0 3px; }
}
.crt-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%);
  background-size: 100% 4px;
  z-index: 1000; pointer-events: none;
  animation: ps-textShadow 1.6s infinite;
}

@keyframes ps-scanlineMove {
  0%    { transform: translateY(-100%); }
  25%   { transform: translateY(100%); }
  25.1% { transform: translateY(-100%); opacity: 0; }
  90%   { transform: translateY(-100%); opacity: 0; }
  90.1% { transform: translateY(-100%); opacity: 1; }
  100%  { transform: translateY(-100%); opacity: 1; }
}
.scanline {
  position: absolute; top:0; left:0;
  width: 100%; height: 100px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,255,200,.2) 10%, rgba(0,255,200,.2) 90%, transparent 100%);
  animation: ps-scanlineMove 8s linear infinite;
  pointer-events: none; z-index: 1;
}

/* ---------- Container layout ---------- */
.ps-container {
  position: relative;
  width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
}

/* ---------- Circuit / soldering field ---------- */
.circuit-container {
  position: fixed; inset: 0; pointer-events: none;
  z-index: -1; overflow: hidden;
}
@keyframes ps-circuitFlow {
  0%   { stroke-dashoffset: 1000; opacity: .3; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .3; }
}
.circuit {
  position: absolute; width: 100%; height: 100%;
  stroke: var(--ps-primary); stroke-width: 2; fill: none;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: ps-circuitFlow 8s linear infinite;
}
.solder-trace {
  fill: none; stroke: rgba(0,255,200,.15); stroke-width: 2;
  filter: drop-shadow(0 0 2px rgba(0,255,200,.3));
}
.trace-light {
  width: 8px; height: 8px; position: absolute;
  background: radial-gradient(circle at center, rgba(0,255,200,1) 0%, rgba(0,255,200,.8) 30%, rgba(0,255,200,0) 100%);
  border-radius: 50%; filter: drop-shadow(0 0 5px rgba(0,255,200,.8));
}
@keyframes ps-moveLight {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 100%; }
  100% { offset-distance: 0%; }
}
.server-node {
  fill: rgba(0,255,255,.05);
  stroke: var(--ps-primary); stroke-width: 2;
  filter: drop-shadow(0 0 8px var(--ps-glow));
}
.connection-line {
  stroke: var(--ps-primary); stroke-width: 1.5; opacity: .4;
}
.endpoint-node {
  fill: var(--ps-primary); filter: drop-shadow(0 0 6px var(--ps-glow));
}
.data-point {
  fill: var(--ps-secondary); filter: drop-shadow(0 0 6px var(--ps-secondary));
}

/* ---------- Rotating gears ---------- */
@keyframes ps-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.rotating-gear {
  position: absolute; width: 100px; height: 100px;
  animation: ps-rotate 10s linear infinite;
  opacity: .3;
}
#gear1 { top: 10%; left: 10%; }
#gear2 { top: 80%; right: 10%; animation-direction: reverse; }

/* ---------- Status display (top-right) ---------- */
@keyframes ps-pulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.status-display {
  position: absolute; top: 20px; right: 20px;
  font-size: 12px; color: var(--ps-secondary);
  text-align: right; z-index: 2000;
  background: rgba(0,0,0,.5); padding: 10px; border-radius: 5px;
}
.status-display > * { position: relative; z-index: 2001; }
.warning-light {
  display: inline-block; width: 10px; height: 10px;
  background: var(--ps-accent); border-radius: 50%;
  margin-left: 10px;
  animation: ps-pulse 2s infinite;
}
.logout-button {
  display: inline-block; margin-top: 10px;
  padding: 8px 15px; background: transparent;
  border: 2px solid var(--ps-error); color: var(--ps-error);
  font-family: 'Courier New', monospace; font-size: 12px;
  cursor: pointer; transition: all .3s ease;
  text-decoration: none;
}
.logout-button:hover {
  background: var(--ps-error); color: #000;
  box-shadow: 0 0 10px var(--ps-error);
}

/* ---------- Login card ---------- */
.login-container {
  position: relative;
  width: 400px; max-width: 92vw;
  padding: 40px;
  background: rgba(0,20,20,1);
  border: 2px solid var(--ps-primary);
  border-radius: 10px;
  z-index: 100;
  box-shadow: 0 0 20px var(--ps-glow), inset 0 0 20px var(--ps-glow);
  transform-style: preserve-3d;
  transition: transform .8s ease, box-shadow .8s ease;
  overflow: hidden;
}
.login-container:hover {
  transform: scale(1.02) translateZ(20px);
  box-shadow: 0 0 30px var(--ps-glow), inset 0 0 30px var(--ps-glow);
}
.login-header {
  text-align: center;
  font-size: 22px; margin-bottom: 30px;
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--ps-primary);
  text-shadow: 0 0 10px var(--ps-glow);
}

/* ---------- Inputs (floating labels) ---------- */
.input-group { position: relative; margin-bottom: 30px; }
.input-group input {
  width: 100%; padding: 10px;
  background: transparent; border: none;
  border-bottom: 2px solid var(--ps-secondary);
  color: var(--ps-primary);
  font-family: 'Courier New', monospace; font-size: 16px;
  outline: none;
  transition: all .3s ease;
}
.input-group label {
  position: absolute; top: 0; left: 0;
  padding: 10px;
  pointer-events: none;
  transition: all .3s ease;
  color: var(--ps-secondary);
  letter-spacing: 1px;
}
.input-group input:focus + label,
.input-group input:valid + label {
  transform: translateY(-22px);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ps-secondary);
}

/* ---------- Login button ---------- */
.login-button {
  width: 100%; padding: 12px;
  background: transparent;
  border: 2px solid var(--ps-primary);
  color: var(--ps-primary);
  font-family: 'Courier New', monospace; font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer; transition: all .3s ease;
  position: relative; overflow: hidden;
}
.login-button:hover {
  background: var(--ps-primary); color: #000;
  box-shadow: 0 0 20px var(--ps-glow);
}

/* ---------- Access denied overlay ---------- */
@keyframes ps-glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(-2px,-2px); }
  60%  { transform: translate( 2px, 2px); }
  80%  { transform: translate( 2px,-2px); }
  100% { transform: translate(0); }
}
.access-denied-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.9); z-index: 5000;
  justify-content: center; align-items: center;
  flex-direction: column;
}
.access-denied-content {
  color: var(--ps-error); text-align: center;
  font-family: 'Courier New', monospace;
  animation: ps-glitch .3s infinite;
}
.access-denied-content h1 { font-size: 4em; margin: 0 0 20px; }
.access-denied-content p { font-size: 1.1em; color: var(--ps-primary); margin: .5rem; }

/* ---------- Cursor / typed welcome ---------- */
@keyframes ps-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.typed-text { color: var(--ps-primary); text-shadow: 0 0 10px var(--ps-glow); }
.cursor { display: inline-block; width: 2px; animation: ps-blink 1s infinite; color: var(--ps-primary); }

/* ---------- Back link ---------- */
.back-link {
  position: absolute; top: 20px; left: 20px;
  z-index: 2000;
  color: var(--ps-secondary);
  font-family: 'Courier New', monospace; font-size: 12px;
  text-decoration: none; letter-spacing: 1px;
  padding: 8px 14px; border: 1px solid var(--ps-secondary);
  border-radius: 4px;
  background: rgba(0,0,0,.5);
  transition: all .3s ease;
}
.back-link:hover { color: #000; background: var(--ps-secondary); }