/* === Palette tuned to your hero/header === */
:root{
  --bg: #0b0712;                  /* deep space */
  --panel: #120b1e;               /* card surface */
  --panel-2: #1a112b;             /* hover/focus surface */
  --border: #2b1d45;
  --text: #f0eaff;
  --muted: #b9aee0;

  --primary: #b06cff;             /* neon purple */
  --primary-2: #8b5cf6;           /* softer purple */
  --glow: #d6a6ff;
  --danger: #ff6b8a;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.45 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(80vmax 60vmax at 20% -10%, #2a0d4d40 0%, transparent 60%),
              radial-gradient(80vmax 60vmax at 120% 120%, #1b0b3a40 0%, transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

/* Subtle animated blobs to mirror the mesh vibe */
.bg-blob{
  position:fixed; inset:auto;
  width:50vmax; height:50vmax; border-radius:50%;
  filter:blur(60px) saturate(1.2);
  opacity:.35; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 30% 30%, var(--primary) 0%, transparent 60%);
  animation:float 18s ease-in-out infinite;
}
.blob-1{ left:-15vmax; top:-10vmax; }
.blob-2{ right:-12vmax; bottom:-12vmax; animation-delay:-7s }
@keyframes float {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(18px) }
}

.topbar{
  position:fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  padding:0 18px;
  border-bottom:1px solid #00000040;
}
.brand{display:flex; gap:10px; align-items:center; color:#e8d7ff}
.logo{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  font-weight:800;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#11081c;
  box-shadow:0 0 0 1px #ffffff1a, 0 8px 30px #8b5cf633;
}

.wrap{
  min-height:100%;
  display:grid; place-items:center;
  padding:100px 16px 48px;
}

.auth-card{
  width:min(520px, 92vw);
  background:linear-gradient(180deg, var(--panel) 0%, #0f0a1a 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:
    0 10px 40px rgba(0,0,0,.55),
    0 0 0 1px #ffffff0b inset,
    0 0 60px -10px var(--primary) inset;
  position:relative; z-index:1;
}
.card-head{margin-bottom:10px}
.card-head h1{margin:0 0 6px; font-size:24px}
.sub{margin:0; color:var(--muted); font-size:14px}

form{display:grid; gap:14px}
.field{display:grid; gap:8px}
.field span{color:#d8c9ff; font-size:.92rem}
input{
  width:100%; padding:0.9rem 1rem; border-radius:12px;
  border:1px solid var(--border); outline:none;
  background:#0d0917; color:var(--text);
  transition:border .15s, box-shadow .15s, background .15s;
}
input::placeholder{color:#8b7fb4}
input:focus{
  border-color:#b388ff;
  box-shadow:0 0 0 3px #9b5cff33, 0 0 40px -10px var(--glow) inset;
  background:var(--panel-2);
}

.row{display:flex; justify-content:space-between; align-items:center; margin-top:2px}
.check{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.check input{position:absolute; opacity:0; width:0; height:0}
.check i{
  width:18px; height:18px; border-radius:6px; border:1px solid var(--border);
  background:#0f0a18; box-shadow:inset 0 0 0 2px #00000055;
  display:inline-block; position:relative; flex:0 0 18px;
}
.check input:checked + i{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color:transparent;
  box-shadow:0 0 0 1px #ffffff20 inset, 0 4px 16px #9b5cff55;
}
.check span{color:#cdbff2}

.link{
  color:#d1b3ff; text-decoration:none; font-size:.95rem;
  border-bottom:1px dashed #d1b3ff33; padding-bottom:1px;
}
.link:hover{color:#fff}

.btn-primary{
  margin-top:6px;
  width:100%; padding:0.95rem 1rem; border:none; border-radius:12px;
  font-weight:800; color:#11081c; cursor:pointer;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow:0 10px 30px #7c3aed55, 0 0 0 1px #ffffff1a inset;
  transition:transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{ filter:saturate(1.1) brightness(1.04) }
.btn-primary:active{ transform:translateY(1px) }

.btn-ghost{
  display:inline-block; text-align:center; width:100%;
  padding:.9rem 1rem; border-radius:12px; color:#d7c9ff;
  background:#0d0a16; border:1px dashed #8b5cf655;
}
.btn-ghost:hover{ background:#130e22; border-style:solid }

.msg{min-height:1.2em; margin:.25rem 2px 0; color:var(--danger); font-size:.95rem}

.divider{
  display:flex; align-items:center; gap:10px; margin:8px 0 0;
  color:#c1b2ee88; font-size:.85rem;
}
.divider:before, .divider:after{
  content:""; height:1px; background:linear-gradient(90deg, transparent, #6336c7, transparent);
  flex:1;
}

/* Modal */
dialog{
  border:none; border-radius:16px; padding:22px; width:min(500px,92vw);
  background:linear-gradient(180deg, #140c24, #0e0a19);
  color:var(--text);
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px #ffffff0f inset;
}
dialog::backdrop{ background:rgba(5,2,12,.7) }
dialog h3{margin:0 0 6px}
dialog p{margin:0 0 12px; color:var(--muted)}
dialog .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px }