:root {
  --bg: #0b0f14;
  --bg-accent-1: rgba(255,183,3,0.08);
  --bg-accent-2: rgba(99,179,237,0.12);
  --card: #0f1725;
  --border: rgba(255, 255, 255, 0.1);
  --text: #e9f2ff;
  --muted: #a6b7cd;
  --brand: #ffb703;
  --brand-2: #ffd166;
  --shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  --border-strong: rgba(255, 255, 255, 0.18);
  --blob-opacity: 1;
}

[data-theme="light"] {
  --bg: #f8fafc;
  --bg-accent-1: rgba(251,191,36,0.08);
  --bg-accent-2: rgba(59,130,246,0.10);
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #6b7280;
  --brand: #f59e0b;
  --brand-2: #fbbf24;
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --blob-opacity: 0.55;
  --border-strong: #cbd5e1;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(120% 120% at 20% 20%, var(--bg-accent-1), transparent 45%),
    radial-gradient(140% 140% at 80% 0%, var(--bg-accent-2), transparent 40%),
    var(--bg);
  color: var(--text);
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
}

.blur-blob { position:absolute; filter: blur(140px); opacity:var(--blob-opacity); mix-blend-mode:screen; z-index:0; }
.blob-1 { background: #4fd1c5; width:360px; height:260px; top:6%; left:6%; animation: floatA 18s ease-in-out infinite; }
.blob-2 { background: #6c5ce7; width:320px; height:240px; top:14%; right:8%; animation: floatB 22s ease-in-out infinite; }
.blob-3 { background: #ffb703; width:360px; height:240px; bottom:6%; right:18%; animation: floatC 26s ease-in-out infinite; }
@keyframes floatA { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(30px,40px,0);} 100%{transform:translate3d(0,0,0);} }
@keyframes floatB { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(-35px,-25px,0);} 100%{transform:translate3d(0,0,0);} }
@keyframes floatC { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(18px,-35px,0);} 100%{transform:translate3d(0,0,0);} }

.card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card::after { content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; border:1px solid rgba(255,255,255,0.04); }

.muted { color: var(--muted); }
.row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; font-size:14px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; }
.link { color: var(--brand); font-weight:700; }
small { color: var(--muted); }
.error { margin-top:10px; color:#ff6b6b; font-weight:600; }
.success { margin-top:10px; color:#5cd992; font-weight:700; }
.meta { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px; }
.hint { font-size:13px; color:var(--muted); }
footer { margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; }
.trust { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dot { width:8px; height:8px; border-radius:50%; background: #5cd992; box-shadow: 0 0 0 6px rgba(92,217,146,0.08); }

.ui-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  padding: 32px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.02);
}
.ui-card h1,
.ui-card p,
.ui-card .pill,
.ui-card form {
  margin-left: 4px;
  margin-right: 4px;
}
.ui-kicker { color: var(--muted); }
.logo img { height: 44px; width: auto; display:block; }
header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.brand { display:grid; gap:2px; }
.name { font-size:20px; font-weight:800; }
.tagline { color:var(--muted); font-size:13px; }

.ui-btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #0b0f14; }
.ui-btn { width: 100%; justify-content: center; }

.input-block { margin-bottom: 12px; display: grid; gap: 6px; }
.input-block input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, #ffffff 8%);
  color: var(--text);
}

@media (max-width: 540px) {
  .card { padding: 22px; }
}