:root{
    --bg: #05070b;
    --panel: rgba(14,19,27,0.68);
    --line: #1e2733;
    --line-bright: #2c3947;
    --cyan: #5ce4ec;
    --cyan-dim: rgba(92,228,236,0.35);
    --amber: #e8a33d;
    --amber-dim: rgba(232,163,61,0.35);
    --bad: #e2604f;
    --good: #4fbf7f;
    --text: #e9edf3;
    --text-dim: #7f8b9c;
    --text-faint: #4b5563;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height:100%;
    display:flex; align-items:center; justify-content:center;
    padding: 24px;
    position: relative;
    overflow-x:hidden;
  }
  canvas#stars{ position:fixed; inset:0; z-index:0; }
  .nebula{
    position: fixed; inset: 0; z-index: 1; pointer-events:none;
    background:
      radial-gradient(ellipse 46% 38% at 82% 14%, rgba(92,228,236,0.10), transparent 60%),
      radial-gradient(ellipse 50% 42% at 10% 82%, rgba(232,163,61,0.06), transparent 62%),
      radial-gradient(ellipse 100% 80% at 50% 50%, rgba(5,7,11,0) 30%, rgba(5,7,11,0.75) 100%);
  }
  .hud-grid{
    position: fixed; inset:0; z-index:1; pointer-events:none; opacity:0.45;
    background-image:
      linear-gradient(rgba(92,228,236,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(92,228,236,0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 40%, transparent 80%);
  }
  .bracket{ position: fixed; width: 30px; height: 30px; z-index: 5; opacity: 0.5; pointer-events:none; }
  .bracket.tl{ top: 20px; left: 20px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
  .bracket.tr{ top: 20px; right: 20px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
  .bracket.bl{ bottom: 20px; left: 20px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
  .bracket.br{ bottom: 20px; right: 20px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

  .card{
    position: relative; z-index: 10;
    width: 100%; max-width: 400px;
    background: var(--panel);
    border: 1px solid var(--line-bright);
    border-radius: 6px;
    padding: 30px 28px 26px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .brandline{
    display:flex; align-items:center; gap:10px; margin-bottom: 22px;
    text-decoration:none; color: var(--text);
  }
  .brandline .mark{
    width: 28px; height: 28px; flex-shrink:0;
    border: 1px solid var(--cyan-dim); border-radius: 3px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(92,228,236,0.06);
  }
  .brandline .mark::before{
    content:""; width: 9px; height:9px; background: var(--amber);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .brandline b{
    font-family:'Rajdhani', sans-serif; font-weight:700; font-size: 17px;
    letter-spacing:0.03em; text-transform:uppercase;
  }

  .tabs{ display:flex; gap:6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
  .tabs button{
    flex:1; background:transparent; border:none; cursor:pointer;
    color: var(--text-dim);
    font-family:'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing:0.1em;
    text-transform:uppercase; padding: 10px 4px 12px;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .tabs button.active{ color: var(--cyan); border-color: var(--cyan); }
  .tabs button:hover{ color: var(--text); }

  form{ display:none; flex-direction:column; gap:14px; }
  form.active{ display:flex; }

  label{
    font-family:'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color: var(--text-faint); margin-bottom: 6px; display:block;
  }
  input{
    width:100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
    border-radius: 4px; color: var(--text); font-family:'Inter', sans-serif;
    font-size: 14px; padding: 11px 12px; outline:none;
    transition: border-color .15s, background .15s;
  }
  input:focus{ border-color: var(--cyan-dim); background: rgba(92,228,236,0.04); }

  .btn{
    margin-top: 6px;
    background: var(--cyan); color: #05070b; border:none; border-radius: 3px;
    font-family:'JetBrains Mono', monospace; font-weight:600; font-size: 12.5px;
    letter-spacing:0.12em; text-transform:uppercase; padding: 12px; cursor:pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(92,228,236,0.25); background:#7defef; }
  .btn:disabled{ opacity:0.5; cursor:default; transform:none; box-shadow:none; }

  .msg{
    font-family:'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing:0.03em;
    padding: 9px 11px; border-radius: 4px; display:none; line-height:1.5;
  }
  .msg.show{ display:block; }
  .msg.err{ background: rgba(226,96,79,0.10); border: 1px solid rgba(226,96,79,0.35); color: #f2988a; }
  .msg.ok{ background: rgba(79,191,127,0.10); border: 1px solid rgba(79,191,127,0.35); color: #8fe0ab; }

  .hint{ font-size: 11.5px; color: var(--text-faint); margin-top: 2px; line-height:1.5; }