:root { color-scheme: dark; --portal-bg: #0b0f14; --portal-panel: #171e27; --portal-panel-2: #202a36; --portal-ink: #f2f6fa; --portal-muted: #a9b5c3; --portal-green: #36da72; --portal-blue: #6db7ff; --portal-danger: #ff7b7b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html[data-auth-state="pending"] body.protected-page { visibility: hidden; }
body.portal-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 0%, #173221 0, transparent 34%), radial-gradient(circle at 85% 8%, #112d48 0, transparent 32%), var(--portal-bg); color: var(--portal-ink); font: 16px/1.5 system-ui, sans-serif; }
a { color: inherit; }
.portal-shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.portal-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.portal-brand { color: var(--portal-ink); font-size: 19px; font-weight: 900; letter-spacing: .02em; text-decoration: none; }
.portal-brand span { color: var(--portal-green); }
.portal-nav-actions { display: flex; align-items: center; gap: 12px; color: var(--portal-muted); }
.portal-button, .auth-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #425166; border-radius: 10px; padding: 9px 16px; background: var(--portal-panel-2); color: var(--portal-ink); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.portal-button.primary { border-color: #28be60; background: #176235; }
.portal-button:disabled, .auth-form input:disabled { cursor: wait; opacity: .62; }
.landing-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 54px; align-items: center; min-height: calc(100vh - 96px); padding: 48px 0 80px; }
.hero-copy h1 { max-width: 760px; margin: 0 0 20px; font-size: clamp(42px, 7vw, 82px); line-height: 1.02; letter-spacing: -.045em; }
.hero-copy h1 span { color: var(--portal-green); }
.hero-copy > p { max-width: 660px; color: #c4cfda; font-size: 19px; }
.trust-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--portal-muted); }
.trust-list li::before { content: "✓"; margin-right: 10px; color: var(--portal-green); font-weight: 900; }
.auth-card { border: 1px solid #354356; border-radius: 20px; padding: 24px; background: #151c25ee; box-shadow: 0 24px 70px #0008; }
.auth-card h2 { margin: 0 0 6px; }
.auth-card > p { margin: 0 0 20px; color: var(--portal-muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.auth-tabs button[aria-selected="true"] { border-color: var(--portal-green); color: #a4f5bf; background: #173924; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { font-weight: 750; }
.auth-form input { width: 100%; min-height: 46px; border: 1px solid #46566c; border-radius: 9px; padding: 10px 12px; background: #0e141c; color: var(--portal-ink); font: inherit; }
.auth-form input:focus { outline: 2px solid var(--portal-green); outline-offset: 2px; }
.auth-help { display: flex; justify-content: flex-end; font-size: 14px; }
.auth-help a { color: var(--portal-blue); }
.auth-status { min-height: 24px; margin: 16px 0 0; color: var(--portal-muted); }
.auth-status[data-tone="success"] { color: #91efb1; }
.auth-status[data-tone="error"] { color: var(--portal-danger); }
.auth-status[data-tone="warning"] { color: #ffd27d; }
.setup-notice { margin-bottom: 18px; border: 1px solid #8a6a2c; border-radius: 10px; padding: 12px; background: #382d16; color: #ffe2a8; }
.continue-link { width: 100%; margin-top: 14px; }
.dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 68px 0 30px; }
.dashboard-head h1 { margin: 0 0 8px; font-size: clamp(34px, 5vw, 58px); }
.dashboard-head p { margin: 0; color: var(--portal-muted); }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 80px; }
.app-card { min-height: 250px; display: flex; flex-direction: column; border: 1px solid #3a485b; border-radius: 18px; padding: 24px; background: linear-gradient(145deg, #202a36, #151c25); text-decoration: none; box-shadow: 0 14px 38px #0004; }
.app-card.available:hover, .app-card.available:focus-visible { border-color: var(--portal-green); transform: translateY(-2px); }
.app-card h2 { margin: 14px 0 8px; font-size: 25px; }
.app-card p { margin: 0; color: var(--portal-muted); }
.app-card .app-status { margin-top: auto; padding-top: 24px; color: #9aefb6; font-size: 14px; font-weight: 750; }
.app-card.coming-soon { opacity: .62; }
.app-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #173924; color: var(--portal-green); font-size: 23px; font-weight: 900; }
.simple-auth { min-height: calc(100vh - 92px); display: grid; place-items: center; padding: 50px 0 90px; }
.simple-auth .auth-card { width: min(460px, 100%); }
@media (max-width: 850px) { .landing-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 34px; } .hero-copy h1 { font-size: clamp(42px, 12vw, 68px); } .app-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .portal-shell { width: min(100% - 24px, 1160px); } .portal-nav { align-items: flex-start; } .portal-nav-actions { flex-direction: column; align-items: flex-end; font-size: 13px; } .auth-card { padding: 18px; } .dashboard-head { align-items: flex-start; flex-direction: column; padding-top: 38px; } }