:root {
  --bg:      #04080f;
  --panel:   #080e1a;
  --green:   #00c97a;
  --blue:    #3b9eff;
  --orange:  #ff8c42;
  --red:     #ff3333;
  --text:    #eef4ff;
  --muted:   #7a9ab8;
  --border:  #152840;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
}

/* ── SCANLINE overlay ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.03) 0px,
    rgba(0,0,0,0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events:none;
}

/* ── GRID background ── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(59,158,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,158,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
}

/* ── CORNER brackets ── */
.corner {
  position:fixed; width:60px; height:60px; z-index:5;
  opacity:0.4;
}
.corner::before, .corner::after {
  content:''; position:absolute;
  background: var(--blue);
}
.corner::before { width:2px; height:100%; }
.corner::after  { width:100%; height:2px; }
.corner.tl { top:20px; left:20px; }
.corner.tr { top:20px; right:20px; transform:scaleX(-1); }
.corner.bl { bottom:20px; left:20px; transform:scaleY(-1); }
.corner.br { bottom:20px; right:20px; transform:scale(-1); }

/* ── RADAR sweep ── */
.radar-wrap {
  position:fixed;
  bottom:-300px; right:-300px;
  width:700px; height:700px;
  z-index:1; opacity:0.06;
  border-radius:50%;
  border: 1px solid var(--green);
  overflow:hidden;
}
.radar-inner {
  position:absolute; inset:50px;
  border-radius:50%;
  border: 1px solid var(--green);
}
.radar-inner2 {
  position:absolute; inset:150px;
  border-radius:50%;
  border: 1px solid var(--green);
}
.radar-sweep {
  position:absolute; inset:0;
  border-radius:50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0,201,122,0.4) 20deg,
    transparent 21deg
  );
  animation: sweep 4s linear infinite;
}
@keyframes sweep { to { transform:rotate(360deg); } }

/* ── STATUS BAR top ── */
.statusbar {
  position:fixed; top:0; left:0; right:0; z-index:10;
  height:32px;
  background: rgba(8,14,26,0.95);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap:20px;
  padding:0 24px;
  font-family:'Share Tech Mono', monospace;
  font-size:11px; color:#7a9ab8;
}
.statusbar .dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  animation: blink 2s infinite;
  flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.statusbar .sep { width:1px; height:16px; background:var(--border); }
#clk-top { color:var(--text); min-width:80px; }

/* ── MAIN layout ── */
.main {
  position:relative; z-index:2;
  width:100%; height:100vh;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:0;
  padding-top:32px;
}

/* ── LOGO block ── */
.logo-block {
  text-align:center;
  animation: fadeDown 0.8s ease both;
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

.logo-eyebrow {
  font-family:'Share Tech Mono', monospace;
  font-size:13px; letter-spacing:6px;
  color:#8ab4d4;
  text-transform:uppercase;
  margin-bottom:16px;
}
.logo-eyebrow span { color:var(--blue); }

.logo-main {
  font-family:'Orbitron', sans-serif;
  font-size:clamp(56px, 10vw, 96px);
  font-weight:900;
  letter-spacing:12px;
  color:#fff;
  text-shadow:
    0 0 40px rgba(59,158,255,0.4),
    0 0 80px rgba(59,158,255,0.15);
  line-height:1;
  margin-bottom:8px;
}

.logo-sub {
  font-family:'Share Tech Mono', monospace;
  font-size:14px; letter-spacing:4px;
  color:#7ac4ff;
  text-transform:uppercase;
  opacity:1;
  margin-bottom:32px;
}

/* ── DIVIDER ── */
.divider {
  display:flex; align-items:center; gap:12px;
  width:clamp(280px,40vw,480px);
  margin:0 auto 32px;
  animation: fadeDown 0.8s 0.2s ease both;
  opacity:0;
}
.divider-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); }
.divider-diamond {
  width:6px; height:6px;
  background:var(--green);
  transform:rotate(45deg);
}

/* ── TAGLINES ── */
.taglines {
  text-align:center;
  animation: fadeDown 0.8s 0.3s ease both;
  opacity:0;
  margin-bottom:40px;
}
.tagline-main {
  font-size:clamp(16px, 2vw, 20px);
  font-weight:300;
  color:#eef4ff;
  letter-spacing:1px;
  margin-bottom:10px;
  line-height:1.6;
}
.tagline-main strong {
  color:var(--green);
  font-weight:500;
}
.tagline-sub {
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  color:#8ab4d4;
  letter-spacing:2px;
}

/* ── LOGIN BOX ── */
.login-box {
  background: rgba(8,14,26,0.9);
  border:1px solid var(--border);
  border-radius:8px;
  padding:28px 32px;
  width:clamp(280px, 90vw, 360px);
  animation: fadeUp 0.8s 0.5s ease both;
  opacity:0;
  position:relative;
  overflow:hidden;
}
.login-box::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.login-label {
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:3px;
  color:#8ab4d4;
  text-transform:uppercase;
  margin-bottom:10px;
}

.login-input-wrap {
  display:flex; gap:8px; margin-bottom:8px;
}
.login-input {
  flex:1;
  background: rgba(4,8,15,0.8);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  padding:10px 14px;
  font-size:14px;
  font-family:'Share Tech Mono', monospace;
  letter-spacing:3px;
  outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.login-input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(59,158,255,0.1);
}
.login-input.error {
  border-color:var(--red);
  animation:shake .4s ease;
}
@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

.login-btn {
  background: var(--blue);
  border:none; border-radius:5px;
  color:#04080f;
  padding:10px 16px;
  font-family:'Orbitron', sans-serif;
  font-size:11px; font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .1s;
  letter-spacing:1px;
}
.login-btn:hover { background:#5ab0ff; }
.login-btn:active { transform:scale(0.97); }

.login-err {
  font-family:'Share Tech Mono', monospace;
  font-size:11px; color:var(--red);
  margin-bottom:4px;
  display:none;
  letter-spacing:1px;
}

.login-hint {
  font-family:'Share Tech Mono', monospace;
  font-size:10px; color:#7a9ab8;
  text-align:center;
  margin-top:12px;
  letter-spacing:1px;
}

/* ── BOTTOM badges ── */
.badges {
  display:flex; gap:16px; margin-top:28px;
  animation: fadeUp 0.8s 0.7s ease both;
  opacity:0;
}
.badge {
  display:flex; align-items:center; gap:6px;
  background:rgba(8,14,26,0.8);
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 12px;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; color:#8ab4d4;
  letter-spacing:1px;
}
.badge .dot-sm {
  width:5px; height:5px; border-radius:50%;
}
.badge.green .dot-sm { background:var(--green); }
.badge.blue  .dot-sm { background:var(--blue); }
.badge.orange .dot-sm { background:var(--orange); }

/* ── FOOTER ── */
.footer {
  position:fixed; bottom:16px; left:0; right:0; z-index:10;
  text-align:center;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; color:#6a8aaa;
  letter-spacing:2px;
  animation: fadeUp 0.8s 0.9s ease both;
  opacity:0;
}
.footer span { color:var(--border); margin:0 8px; }

/* ── TRANSITION overlay ── */
#transition {
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
}
#transition.active { display:flex; }
.boot-text {
  font-family:'Share Tech Mono', monospace;
  font-size:13px; color:var(--green);
  letter-spacing:3px;
}
.boot-bar {
  width:240px; height:2px;
  background:var(--border); border-radius:1px; overflow:hidden;
}
.boot-fill {
  height:100%; background:var(--green);
  animation:boot 1.2s ease forwards;
}
@keyframes boot { from{width:0} to{width:100%} }