:root {
  --bg:       #07090e;
  --surface:  rgba(20, 25, 35, .72);
  --border:   rgba(148, 163, 184, .12);
  --border-2: rgba(148, 163, 184, .2);
  --text:     #e6ebf3;
  --muted:    #7c8799;
  --faint:    #4b5566;
  --accent:   #8b7bff;
  --accent-2: #22d3ee;
  --green:    #22c55e;
  --red:      #f05252;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  color: var(--text); background: var(--bg);
  font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh;
}
.hidden { display: none !important; }

/* ── Left: showcase ─────────────────────────────────────────── */
.showcase {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(139,123,255,.18), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(34,211,238,.12), transparent 60%),
    #090c12;
  border-right: 1px solid var(--border);
}
.showcase::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 14s ease-in-out infinite alternate; }
.orb-a { width: 320px; height: 320px; background: #6d5dfc; top: -80px; left: -60px; }
.orb-b { width: 260px; height: 260px; background: #0891b2; bottom: -60px; right: -40px; animation-delay: -7s; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.1); } }

.showcase-inner { position: relative; max-width: 460px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; margin-bottom: 44px; }
.brand img { border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(139,123,255,.8); }
h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.035em; font-weight: 750; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 16px; }
.lede b { color: var(--text); font-weight: 600; }

.preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 30px; }
.pv-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px;
  display: flex; align-items: center; gap: 12px; backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.pv-card.wide { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 10px; }
.pv-card small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.pv-card b { font-size: 20px; letter-spacing: -.02em; }
.pv-ring { width: 46px; height: 46px; transform: rotate(-90deg); flex-shrink: 0; }
.pv-ring circle { fill: none; stroke: rgba(148,163,184,.12); stroke-width: 10; }
.pv-ring .fg { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 238.76; stroke-dashoffset: calc(238.76 * (1 - var(--p))); animation: fill 1.4s cubic-bezier(.2,.8,.2,1); }
@keyframes fill { from { stroke-dashoffset: 238.76; } }
.pv-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pv-row b { font-size: 13px; color: var(--text); }
.pv-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.pv-row .pill { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(139,123,255,.14); color: var(--accent); }
.pv-spark { width: 100%; height: 40px; }
.pv-spark path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 2s .3s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.features li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.features li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(34,197,94,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* ── Right: form ────────────────────────────────────────────── */
.panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.card { width: 100%; max-width: 380px; }
.mobile-brand { display: none; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 28px; }
.mobile-brand img { border-radius: 9px; }
.form-head { margin-bottom: 26px; }
.form-head h2 { font-size: 26px; letter-spacing: -.025em; font-weight: 700; }
.form-head p { color: var(--muted); margin-top: 6px; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; margin-bottom: 18px; font-size: 13px;
  background: rgba(240,82,82,.08); border: 1px solid rgba(240,82,82,.28); color: #fca5a5; animation: shake .35s; }
.alert svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.alert-ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.28); color: #86efac; animation: none; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

form { display: flex; flex-direction: column; gap: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: var(--faint); pointer-events: none; transition: fill .15s; }
.input-wrap input {
  width: 100%; padding: 12px 44px 12px 40px; border-radius: 12px; font: inherit; font-size: 14px; color: var(--text);
  background: rgba(0,0,0,.28); border: 1px solid var(--border-2); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input-wrap input::placeholder { color: var(--faint); }
.input-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,123,255,.2); }
.input-wrap:focus-within > svg { fill: var(--accent); }
.toggle-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 7px; border-radius: 8px; color: var(--muted); display: grid; }
.toggle-pw:hover { color: var(--text); background: rgba(148,163,184,.08); }
.toggle-pw svg { width: 18px; height: 18px; fill: currentColor; }
.toggle-pw .eye-off, .toggle-pw[aria-pressed="true"] .eye { display: none; }
.toggle-pw[aria-pressed="true"] .eye-off { display: block; }
.caps { font-size: 11.5px; color: #fbbf24; margin-top: 6px; }

/* ── First-run setup (register.php) ─────────────────────────── */
.tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: rgba(139,123,255,.12); border: 1px solid rgba(139,123,255,.25); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.meter { height: 4px; border-radius: 4px; background: rgba(148,163,184,.12); margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s, background .25s; }
.steps-list { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; }
.steps-list li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--accent); background: rgba(139,123,255,.12); border: 1px solid rgba(139,123,255,.3); }
.steps-list b { font-size: 14px; }
.steps-list span { font-size: 12.5px; color: var(--muted); }

.captcha-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(148,163,184,.05); border: 1px solid var(--border); }
.captcha-box p { font-size: 12.5px; color: var(--muted); text-align: center; }
.captcha-box .h-captcha { min-height: 78px; }

.btn-primary {
  margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px; border: none; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #6d5dfc); box-shadow: 0 10px 24px -10px rgba(139,123,255,.9);
  transition: filter .15s, transform .1s;
}
.btn-primary svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:active { transform: scale(.985); }
.btn-primary.loading { pointer-events: none; opacity: .8; }
.btn-primary.loading svg { display: none; }
.btn-primary.loading::after { content: ''; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 26px; font-size: 12px; color: var(--faint); }
.foot svg { width: 14px; height: 14px; fill: currentColor; }
.foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--text); }

@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .showcase { display: none; }
  .mobile-brand { display: flex; }
  body { background: radial-gradient(700px 400px at 50% -10%, rgba(139,123,255,.16), transparent 60%), var(--bg); }
  .panel { padding: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}