:root {
    color-scheme: light;
    --page-bg: #edf3f1;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #ffffff;
    --surface-soft: #fbfcfc;
    --input-bg: #fbfcfd;
    --text: #18212b;
    --text-strong: #34424e;
    --text-body: #46535e;
    --text-muted: #64717d;
    --text-faint: #87939b;
    --border: #dce3e8;
    --border-strong: #cbd5dc;
    --divider: #e8edef;
    --divider-soft: #eef1f2;
    --accent: #26715f;
    --accent-soft: #e7f2ee;
    --accent-hover: #f1f7f5;
    --shadow: rgba(24, 33, 43, 0.09);
    --error-bg: #fff8f7;
    --error-text: #b34747;
    --error-border: #efd0d0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--page-bg);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #111918;
    --surface: rgba(26, 37, 35, 0.92);
    --surface-strong: #1a2523;
    --surface-soft: #202e2b;
    --input-bg: #16211f;
    --text: #e7efec;
    --text-strong: #d2dfda;
    --text-body: #bacac4;
    --text-muted: #9aada6;
    --text-faint: #82958e;
    --border: #344541;
    --border-strong: #465b55;
    --divider: #30413d;
    --divider-soft: #293a36;
    --accent: #6bc1a7;
    --accent-soft: #1d3d35;
    --accent-hover: #234b40;
    --shadow: rgba(0, 0, 0, 0.28);
    --error-bg: #3a2424;
    --error-text: #f09a96;
    --error-border: #704340;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--page-bg); }
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--page-bg); }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(54px); opacity: 0.58; will-change: transform; }
.ambient-orb-1 { top: -18%; left: -8%; width: min(46vw, 660px); aspect-ratio: 1; background: linear-gradient(135deg, rgba(244, 108, 99, 0.44), rgba(255, 196, 116, 0.18)); animation: ambient-float-1 17s ease-in-out infinite alternate; }
.ambient-orb-2 { right: -12%; bottom: -22%; width: min(54vw, 760px); aspect-ratio: 1; background: linear-gradient(225deg, rgba(42, 167, 147, 0.48), rgba(76, 151, 220, 0.18)); animation: ambient-float-2 21s ease-in-out infinite alternate; }
.ambient-orb-3 { top: 48%; left: 33%; width: min(32vw, 450px); aspect-ratio: 1; background: linear-gradient(120deg, rgba(111, 186, 177, 0.26), rgba(244, 180, 85, 0.19)); animation: ambient-float-3 19s ease-in-out infinite alternate; }
.ambient-glow { position: absolute; top: 50%; left: 50%; width: min(56vw, 800px); height: min(56vh, 520px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 70%); filter: blur(30px); opacity: 0.7; transform: translate(-50%, -50%); transition: transform 1.2s ease-out; }
.ambient-grid { position: absolute; inset: 0; opacity: 0.28; background-image: linear-gradient(to right, rgba(36, 80, 72, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(36, 80, 72, 0.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.ambient-noise { position: absolute; inset: 0; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.ambient-cursor-particles { position: absolute; inset: 0; overflow: hidden; }
.ambient-cursor-particle { position: absolute; width: var(--cursor-size); height: var(--cursor-size); border-radius: 1px; background: var(--cursor-color); box-shadow: 0 0 8px var(--cursor-color); opacity: 0; transform: translate(-50%, -50%) scale(0.2); animation: ambient-cursor-burst 680ms cubic-bezier(0.18, 0.74, 0.36, 1) forwards; }
.ambient-cursor-particle-star { clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
.ambient-cursor-particle-pixel { border-radius: 0; box-shadow: 0 0 5px var(--cursor-color); }
.layout { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.content-shell { min-width: 0; flex: 1; padding: 42px min(5vw, 64px); }
button { font: inherit; cursor: pointer; }
.theme-toggle { padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-strong); background: var(--surface-strong); }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 9px; text-align: left; }
.login-theme-toggle { width: auto; margin: 0; }
.theme-switch-track { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; width: 34px; height: 20px; padding: 2px; border-radius: 10px; background: var(--border-strong); transition: background 160ms ease; }
.theme-switch-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-strong); box-shadow: 0 1px 3px var(--shadow); transform: translateX(0); transition: transform 160ms ease; }
.theme-toggle-dark .theme-switch-track { background: var(--accent); }
.theme-toggle-dark .theme-switch-thumb { transform: translateX(14px); }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
h1 { margin: 0 0 12px; color: var(--text); font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
h2 { margin: 0; color: var(--text); font-size: 18px; line-height: 1.3; }
p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.eyebrow { margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.page-header-side { display: flex; flex-direction: column; align-items: end; gap: 10px; }
.checked-at { font-size: 13px; text-align: right; }
.checked-at-next { margin-top: 2px; color: var(--text-muted); }
.page-description { display: inline; }
.state { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.state::before { width: 8px; height: 8px; border-radius: 50%; background: #87939b; content: ""; }
.state-ok { color: var(--accent); }
.state-ok::before { background: #2d9a75; }
.state-updates { color: #a36319; }
.state-updates::before { background: #d89436; }
.state-info { color: #3d6ea3; }
.state-info::before { background: #5b8fc9; }
.state-error { color: #b34747; }
.state-error::before { background: #c95b5b; }
.empty, .error { padding: 20px 22px; font-size: 14px; }
.empty { color: var(--text-muted); }
.error { color: var(--error-text); background: var(--error-bg); }
.content-section { margin-bottom: 30px; }
body.ambient-lite .ambient-orb { animation: none; opacity: 0.32; }
body.ambient-lite .ambient-glow { transition: none; }

@keyframes ambient-float-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(10%, 8%, 0) scale(1.1); }
}

@keyframes ambient-float-2 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-9%, -7%, 0) scale(1.13); }
}

@keyframes ambient-float-3 {
    from { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.45; }
    to { transform: translate3d(-7%, 10%, 0) scale(1.08); opacity: 0.8; }
}

@keyframes ambient-cursor-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    15% { opacity: 0.92; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--cursor-x)), calc(-50% + var(--cursor-y))) scale(1) rotate(var(--cursor-turn)); }
}

:root[data-theme="dark"] .ambient-glow { background: radial-gradient(circle, rgba(107, 193, 167, 0.12), rgba(107, 193, 167, 0) 70%); }
:root[data-theme="dark"] .ambient-noise { mix-blend-mode: screen; opacity: 0.04; }
:root[data-theme="dark"] .state::before { background: var(--text-faint); }
:root[data-theme="dark"] .state-ok::before { background: #55b994; }
:root[data-theme="dark"] .state-updates { color: #e5ad67; }
:root[data-theme="dark"] .state-updates::before { background: #d89436; }
:root[data-theme="dark"] .state-info { color: #8db4e0; }
:root[data-theme="dark"] .state-info::before { background: #6fa0d6; }
:root[data-theme="dark"] .state-error { color: #f09a96; }
:root[data-theme="dark"] .state-error::before { background: #d86e68; }

@media (max-width: 720px) {
    .ambient-orb, .ambient-glow, .ambient-grid, .ambient-noise, .ambient-cursor-particles { display: none; }
    .layout { display: block; }
    .content-shell { padding: 32px 24px; }
}

@media (max-width: 560px) {
    .content-shell { padding: 28px 18px; }
    .page-header { display: block; }
}