:root {
  --bg: #0b0e14;
  --bg-alt: #0f1115;
  --card: #151a24;
  --card-alt: #181b22;
  --border: #232a38;
  --text: #f2f2f2;
  --muted: #8a93a6;
  --accent: #7c4dff;
  --accent-2: #00e5c7;
  --accent-gradient: linear-gradient(90deg, #7c4dff, #00e5c7);
}

* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg-alt); color:var(--text); }
.center { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.card { background:var(--card-alt); border:1px solid var(--border); border-radius:14px; padding: 32px; width: 100%; max-width: 380px; }
h1 { margin-top:0; font-size:1.5rem; color: #fff;}
.muted { color: var(--muted); }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
input[type=text], input[type=password], input[type=date] {
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid #2c313c; background:var(--bg-alt); color:#fff;
  font-size:1rem; margin-bottom:14px;
}
input[type=date] { color-scheme: dark; }
.btn {
  background:var(--accent-gradient); color:#fff; border:none; padding:13px 20px; border-radius:10px;
  font-weight:600; cursor:pointer; font-size:1rem; width:100%; text-align:center; text-decoration:none; display:inline-block;
}
.btn.outline {
  background:transparent; border:1px solid var(--border); color:var(--text);
}
.btn.outline:hover { border-color:var(--accent-2); color:var(--accent-2); }
.error { color:#ff8a8a; margin-top: -6px; margin-bottom: 14px; font-size:.9rem; }

.wrap { margin: 0 auto; padding: 40px 20px 80px; }
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px; }
.badge { background:var(--card-alt); padding:6px 14px; border-radius:999px; font-size:.85rem; border:1px solid var(--border); }
.section { background:var(--card-alt); border:1px solid var(--border); border-radius:14px; padding:22px 24px; margin-bottom:20px; }
.section h3 { margin:0 0 14px; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.row { display:flex; gap:10px; }

/* ================= UIkit component overrides - same accent as the rest of the app,
   not UIkit's default blue ================= */
.uk-button-primary {
  background: var(--accent-gradient);
  border: none;
  color: #fff;
}
.uk-button-primary:hover { filter: brightness(1.08); color: #fff; }
.uk-button-default {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.uk-button-default:hover { border-color: var(--accent-2); color: var(--accent-2); }
.uk-alert-primary {
  background: var(--card);
  border: 1px solid var(--accent-2);
  color: var(--text);
}
.uk-alert {
  background: var(--card-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
[uk-icon] { color: var(--accent-2); vertical-align: middle; }

/* Subscription status pills */
.sub-tag { padding:3px 9px; border-radius:999px; font-size:.75rem; white-space:nowrap; }
.sub-tag.lifetime { background:#1f2f4d; color:#7ea3ff; }
.sub-tag.active { background:#1f4d3a; color:#4ade80; }
.sub-tag.warning { background:#4d3a1f; color:#e5a03e; }
.sub-tag.expired { background:#4d2a2c; color:#ff8a8a; }