:root{
    --bg-1:#0b0614;
    --bg-2:#12092a;
    --glass:#ffffff1a;
    --glass-2:#ffffff14;
    --stroke:#9b8cf33a;
    --text:#e9e6ff;
    --muted:#b8b2d6;
    --accent:#a176ff;
    --accent-2:#6c3cff;
    --cyan:#6be2ff;
    --radius:18px;
    --shadow:0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    font:16px/1.6 Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1400px 900px at 20% 10%, #6c3cff10, transparent 60%), linear-gradient(120deg,var(--bg-1),var(--bg-2)) fixed;
    overflow-x:hidden;
  }
  
  h1,h2,h3{font-family:"Space Grotesk", Inter, ui-sans-serif}
  .mono, code, pre{font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace}
  a{color:inherit}
  
  /* Background layers */
  #console-bg{position:fixed; inset:0; width:100%; height:100%; z-index:-6}
  .bg-veil{position:fixed; inset:0; z-index:-5; backdrop-filter: blur(2px) saturate(110%);}
  .bg-gradient{position:fixed; inset:-20%; z-index:-7;
    background:
      radial-gradient(1000px 600px at 20% 10%, #6c3cff18, transparent 60%),
      radial-gradient(900px 520px at 80% 90%, #a176ff18, transparent 60%);
  }
  .bg-grid{position:fixed; inset:0; z-index:-4; opacity:.14;
    background-image: linear-gradient(transparent 23px, #ffffff12 24px), linear-gradient(90deg, transparent 23px, #ffffff12 24px);
    background-size:24px 24px;
    mask-image: radial-gradient(1100px 800px at 50% 50%, #000 58%, transparent 100%);
  }
  .noise{position:fixed; inset:0; z-index:-3; opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='.25' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  
  /* Header */
  .top{display:flex; align-items:center; justify-content:space-between; width:min(1200px,92%); margin:18px auto 0}
  .brand img{width:140px; height:auto; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(108,60,255,.38))}
  .head-links{display:flex; gap:.6rem}
  .back{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); text-decoration:none; padding:.45rem .7rem; border-radius:12px; border:1px solid transparent; background:var(--glass-2)}
  .back:hover{color:#fff; border-color:var(--stroke)}
  
  /* Layout */
  .wrap{display:grid; place-items:center; min-height:calc(100dvh - 160px); padding:18px}
  .card{
    width:min(680px, 94%); display:block;
    overflow:hidden; border-radius:var(--radius); border:1px solid var(--stroke);
    background:linear-gradient(180deg,#ffffff20,#ffffff0c); box-shadow:var(--shadow);
    backdrop-filter: blur(12px) saturate(120%);
    padding:26px;
  }
  .card h1{margin:.4rem 0 .4rem}
  .muted{color:var(--muted)}
  
  /* Alerts */
  .alerts{display:grid; gap:.5rem; margin:10px 0 12px}
  .alert{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem;
    padding:.6rem .7rem; border-radius:12px; border:1px solid var(--stroke); background:var(--glass-2);
    font-size:.95rem;
  }
  .alert .ico{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-weight:700}
  .alert .msg strong{font-weight:700}
  .alert .close{all:unset; cursor:pointer; padding:.2rem .4rem; border-radius:8px; color:#e9e6ff66}
  .alert .close:hover{background:#ffffff18; color:#fff}
  .alert.success{border-color:#37d39b40} .alert.success .ico{background:#37d39b33}
  .alert.error{border-color:#ff6b6b45}  .alert.error .ico{background:#ff6b6b33}
  .alert.info{border-color:#6be2ff45}   .alert.info .ico{background:#6be2ff33}
  
  /* Fields */
  .field{display:grid; gap:.45rem; margin-bottom:14px}
  .field span{font-size:.92rem; color:#dcd7ff}
  .field input{
    width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--stroke); background:var(--glass-2); color:var(--text);
    outline:none; transition:.2s border-color, .2s background;
  }
  .field input::placeholder{color:#bfb8e6}
  .field input:focus{border-color:#7d69e9; background:#ffffff1f}
  
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.6rem; padding:.95rem 1.25rem; border-radius:14px;
    border:1px solid var(--stroke); background:var(--glass);
    color:var(--text); text-decoration:none; transition:.25s transform, .25s filter, .25s background, .25s box-shadow;
    backdrop-filter: blur(12px);
    position:relative; overflow:hidden;
  }
  .btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
  .btn.lg{font-size:1.06rem}
  .btn.primary{
    background: radial-gradient(300px 180px at 20% 0%, #8a64ff55, transparent 60%), linear-gradient(135deg,var(--accent),var(--accent-2));
    border-color:transparent; box-shadow:0 12px 26px rgba(108,60,255,.35);
  }
  .btn.disabled{opacity:.6; cursor:not-allowed}
  
  /* Links & small text */
  .links{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; justify-content:center; margin:12px 0 6px}
  .link{color:#dcd7ff; text-decoration:none; padding:.35rem .5rem; border-radius:10px; border:1px solid transparent}
  .link:hover{color:#fff; border-color:var(--stroke); background:var(--glass-2)}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--muted); display:inline-block}
  .tiny{font-size:.86rem}
  .agree-line{margin:10px 0 0}
  
  /* Glass util */
  .glass{
    background: linear-gradient(180deg, #ffffff20, #ffffff0c);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter: blur(12px) saturate(120%);
  }
  
  /* Footer */
  .container{width:min(1200px,92%); margin-inline:auto}
  .foot{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    width:min(1200px,92%); margin:18px auto 26px;
    color:var(--muted);
  }
  .foot-links{display:flex; gap:.6rem}
  .foot-links a{color:var(--muted); text-decoration:none; padding:.35rem .5rem; border-radius:10px; border:1px solid transparent}
  .foot-links a:hover{color:#fff; border-color:var(--stroke); background:var(--glass-2)}
  .social a{color:var(--muted); text-decoration:none; padding:.35rem; border-radius:10px; border:1px solid transparent}
  .social a:hover{color:#fff; border-color:var(--stroke); background:var(--glass-2)}
  
  /* Responsive */
  @media (max-width: 540px){
    .top{margin:12px auto 0}
    .wrap{padding:12px}
    .card{padding:20px}
  }