:root {
  color-scheme: light;
  --brand-cyan: #00b4d8;
  --brand-cyan-deep: #087fa8;
  --brand-orange: #ff6b3d;
  --portal-bg: #f3f8fb;
  --portal-bg-gradient:
    radial-gradient(ellipse 120% 80% at 8% -10%, rgba(0, 180, 216, 0.11), transparent 52%),
    radial-gradient(ellipse 90% 60% at 92% 8%, rgba(255, 107, 61, 0.07), transparent 48%),
    linear-gradient(168deg, #eef8fc 0%, #f4f8fb 42%, #f8fafc 100%);
  --portal-panel: #ffffff;
  --portal-panel-glass: rgba(255, 255, 255, 0.72);
  --portal-line: #e2e8f0;
  --portal-line-soft: color-mix(in srgb, var(--portal-line) 65%, transparent);
  --portal-text: #0f172a;
  --portal-muted: #64748b;
  --portal-hint: #94a3b8;
  --portal-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
  --portal-shadow-soft: 0 8px 28px rgba(15, 23, 42, 0.05);
  --portal-shadow-glow: 0 24px 60px rgba(0, 180, 216, 0.12);
  --portal-header-bg: rgba(255, 255, 255, 0.88);
  --portal-radius: 16px;
  --portal-display-tracking: -0.04em;
  --accent: var(--brand-cyan);
  --accent-strong: var(--brand-cyan-deep);
}

[data-theme="dark"] {
  color-scheme: dark;
  --portal-bg: #0b1220;
  --portal-bg-gradient:
    radial-gradient(ellipse 110% 70% at 6% -8%, rgba(0, 180, 216, 0.14), transparent 50%),
    radial-gradient(ellipse 80% 55% at 94% 12%, rgba(255, 107, 61, 0.09), transparent 46%),
    linear-gradient(168deg, #0b1220 0%, #101a2b 46%, #141018 100%);
  --portal-panel: #1a2332;
  --portal-panel-glass: rgba(26, 35, 50, 0.78);
  --portal-line: #334155;
  --portal-line-soft: color-mix(in srgb, var(--portal-line) 55%, transparent);
  --portal-text: #e2e8f0;
  --portal-muted: #94a3b8;
  --portal-hint: #64748b;
  --portal-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  --portal-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.28);
  --portal-shadow-glow: 0 24px 60px rgba(0, 180, 216, 0.08);
  --portal-header-bg: rgba(11, 18, 32, 0.92);
}

body.portal-page {
  background: var(--portal-bg-gradient);
  color: var(--portal-text);
}

.portal-page header {
  background: var(--portal-header-bg);
  border-bottom-color: var(--portal-line);
  backdrop-filter: blur(12px);
}

.portal-page .card,
.portal-page .login-card,
.portal-page .plan-card,
.portal-page .hero-card,
.portal-page .side-card {
  background: var(--portal-panel);
  border-color: var(--portal-line);
  box-shadow: var(--portal-shadow);
  color: var(--portal-text);
}

.portal-page .header-links,
.portal-page .muted,
.portal-page .field-hint,
.portal-page .hero p {
  color: var(--portal-muted);
}

.portal-theme-toggle {
  border: 1px solid var(--portal-line);
  background: var(--portal-panel);
  color: var(--portal-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.portal-theme-toggle:hover {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-deep);
}

.portal-page .summary {
  background: color-mix(in srgb, var(--portal-panel) 92%, var(--portal-muted) 8%);
  border-color: var(--portal-line);
  color: var(--portal-muted);
}

.portal-page .summary strong {
  color: var(--portal-text);
}

.portal-page input,
.portal-page select,
.portal-page textarea {
  background: color-mix(in srgb, var(--portal-panel) 96%, var(--portal-muted) 4%);
  border-color: var(--portal-line);
  color: var(--portal-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.portal-page input:focus,
.portal-page select:focus,
.portal-page textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.portal-page input::placeholder,
.portal-page textarea::placeholder {
  color: var(--portal-hint);
}

[data-theme="dark"] .portal-theme-toggle {
  background: color-mix(in srgb, var(--portal-panel) 88%, #0b1220 12%);
  border-color: var(--portal-line);
}

[data-theme="dark"] .portal-theme-toggle:hover {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-light);
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-cyan) 18%, transparent);
}

.portal-page .btn-secondary {
  background: color-mix(in srgb, var(--portal-line) 55%, var(--portal-panel) 45%);
  color: var(--portal-text);
}

.portal-page .status.error {
  background: color-mix(in srgb, #dc2626 12%, var(--portal-panel) 88%);
  color: #fca5a5;
}

.portal-page .status.success {
  background: color-mix(in srgb, #16a34a 12%, var(--portal-panel) 88%);
  color: #86efac;
}

[data-theme="dark"] .portal-page .status.error {
  color: #fecaca;
}

[data-theme="dark"] .portal-page .status.success {
  color: #bbf7d0;
}

.portal-page footer {
  color: var(--portal-hint);
}