: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;
    --ok:#5ef3b7;
    --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, "Liberation Mono", 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{display:inline-flex; align-items:center; text-decoration:none}
  .brand img{width:140px; height:auto; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(108,60,255,.38))}
  .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(1100px, 94%); display:grid; grid-template-columns:.7fr 1.3fr; /* more left space */
    gap:0; 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%);
  }
  .side{border-right:1px solid var(--stroke); background:linear-gradient(180deg,#ffffff14,#ffffff08)}
  .side-inner{padding:28px 28px 24px; max-width:620px}
  .kicker{font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-size:.8rem}
  .side h1{margin:.25rem 0 .2rem}
  .muted{color:var(--muted)}
  .accent{color:var(--cyan)}
  
  /* Left welcome list */
  .welcome-list{list-style:none; padding:0; margin:16px 0 8px; display:grid; gap:.8rem}
  .welcome-list li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start}
  .welcome-list .ico{
    display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
    border:1px solid var(--stroke); background:var(--glass-2)
  }
  .welcome-list .ico svg{width:20px; height:20px}
  .welcome-list .txt strong{display:block; font-weight:700}
  .welcome-list .txt span{color:var(--muted); font-size:.95rem}
  
  .quick{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:12px}
  .chip{display:inline-flex; align-items:center; padding:.34rem .6rem; border-radius:999px; border:1px solid var(--stroke); background:var(--glass-2); color:#eae6ff; font-size:.84rem; text-decoration:none}
  .chip:hover{background:#ffffff1b}
  
  /* Right form */
  .form{padding:28px 28px 22px}
  .form h2{margin:.2rem 0 1rem}
  
  /* Alerts */
  .alerts{display:grid; gap:.5rem; margin:4px 0 10px}
  .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}
  
  /* Fields */
  .field{display:grid; gap:.45rem; margin-bottom:14px}
  .field span{font-size:.92rem; color:#dcd7ff}
  .field input{
    width:100%; padding:.85rem .95rem; 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}
  
  .passwrap{position:relative}
  .peek{
    position:absolute; inset:0 8px 0 auto; display:inline-flex; align-items:center; justify-content:center;
    margin:auto; width:36px; height:36px; border-radius:10px; border:1px solid transparent; background:transparent; color:#d7d1ff; cursor:pointer;
  }
  .peek:hover{background:var(--glass-2); border-color:var(--stroke)}
  .caps{margin-top:.35rem; font-size:.86rem; color:#ffd889}
  
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.6rem; padding:.9rem 1.2rem; 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{padding:1.05rem 1.4rem; 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 #6c3cff45;
  }
  .btn.darkpulse{background:#1b0e35; border-color:#3a2b78; box-shadow:0 6px 18px rgba(108,60,255,.25) inset}
  .btn.darkpulse::before{
    content:""; position:absolute; inset:-2px; border-radius:14px;
    background: conic-gradient(from 0deg, #6c3cff, #a176ff, #6be2ff, #6c3cff);
    filter:blur(14px) opacity(.25); animation:spin 9s linear infinite; z-index:-1;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  
  /* Links row */
  .links{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; justify-content:center; margin:12px 0 8px}
  .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}
  
  /* Divider */
  .hr{display:flex; align-items:center; justify-content:center; gap:.8rem; margin:12px 0}
  .hr::before,.hr::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,#ffffff2a,transparent)}
  .hr span{color:var(--muted); font-size:.9rem}
  
  /* Alt action */
  .alt{display:flex; justify-content:center}
  .tiny{font-size:.86rem; margin-top:10px}
  .tiny a{color:#eae6ff}
  
  /* 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: 980px){
    .card{grid-template-columns:1fr}
    .side{border-right:none; border-bottom:1px solid var(--stroke)}
  }
  @media (max-width: 540px){
    .top{margin:12px auto 0}
    .wrap{padding:12px}
    .form{padding:18px}
    .side-inner{padding:18px}
  }