:root {
  --portal-bg: #080b0e;
  --portal-panel: rgba(18, 23, 28, 0.84);
  --portal-panel-strong: #151a1f;
  --portal-line: rgba(255, 255, 255, 0.1);
  --portal-line-strong: rgba(255, 255, 255, 0.18);
  --portal-text: #f4f5f3;
  --portal-muted: #969da2;
  --portal-soft: #c5c9c9;
  --portal-accent: #e6fb58;
  --portal-accent-soft: rgba(230, 251, 88, 0.14);
  --portal-accent-border: rgba(230, 251, 88, 0.35);
  --portal-glow: rgba(230, 251, 88, 0.45);
  --portal-danger: #ff735f;
  --portal-radius: 22px;
  --portal-radius-small: 13px;
  --portal-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

#portal-root[data-theme="light"] {
  --portal-bg: #edf0f0;
  --portal-panel: rgba(255, 255, 255, 0.86);
  --portal-panel-strong: #fdfefe;
  --portal-line: rgba(22, 31, 36, 0.12);
  --portal-line-strong: rgba(22, 31, 36, 0.22);
  --portal-text: #12191d;
  --portal-muted: #667177;
  --portal-soft: #3e4a50;
  --portal-accent: #294956;
  --portal-accent-soft: rgba(41, 73, 86, 0.1);
  --portal-accent-border: rgba(41, 73, 86, 0.34);
  --portal-glow: rgba(176, 239, 255, 0.78);
  --portal-shadow: 0 24px 70px rgba(31, 43, 49, 0.1);
  min-height: 100vh;
  background:
    radial-gradient(circle at 38% -12%, rgba(255, 255, 255, 0.98), transparent 42%),
    linear-gradient(145deg, #f7f8f8 0%, #edf0f0 72%);
}

#portal-root {
  color: var(--portal-text);
  overflow-x: hidden;
}

#portal-root[data-theme="dark"] {
  --portal-accent: #edf7fa;
  --portal-accent-soft: rgba(237, 247, 250, 0.1);
  --portal-accent-border: rgba(237, 247, 250, 0.28);
  --portal-glow: rgba(174, 235, 252, 0.55);
  min-height: 100vh;
}

body[data-route="portal"] {
  overflow: auto;
  background: var(--portal-bg);
  color: var(--portal-text);
}

body[data-route="portal"][data-portal-theme="light"] {
  background: #edf0f0;
}

body[data-route="portal"] .page.portal-page {
  display: block;
}

.portal-page {
  min-height: 100vh;
  overflow-anchor: none;
  background:
    radial-gradient(circle at 75% -10%, rgba(230, 251, 88, 0.055), transparent 35%),
    linear-gradient(145deg, #0c1014 0%, #080b0e 65%);
  color: var(--portal-text);
}

#portal-root[data-theme="light"] .portal-shell {
  background: transparent;
}

.portal-page *,
.portal-page *::before,
.portal-page *::after {
  box-sizing: border-box;
}

.portal-page button,
.portal-page select,
.portal-page textarea,
.portal-page input {
  font: inherit;
}

.portal-page button,
.portal-page a,
.portal-page select,
.portal-page label {
  -webkit-tap-highlight-color: transparent;
}