/* The Spacenations look outside the game client: the landing page and the account pages (/Account/...). Same palette
   as the ops app and the player mails (src/SN.Communication/Mail/MailTemplates.cs). Plain CSS, linked directly (no LESS
   build), so the account pages don't depend on the client build. Examples: docs/mails/. */

:root {
    color-scheme: dark;
    --sn-bg: #0b1013;
    --sn-surface: #131a1d;
    --sn-border: rgba(255, 255, 255, .08);
    --sn-border-strong: rgba(255, 255, 255, .12);
    --sn-text: #dbe4e6;
    --sn-heading: #e6f2f2;
    --sn-body: #b9c7c9;
    --sn-label: #9fb1b4;
    --sn-muted: #7f9396;
    --sn-faint: #5d6f72;
    --sn-accent: #00aeae;
    --sn-accent-hover: #12c4c4;
    --sn-accent-text: #041013;
    --sn-link: #5ef0f0;
    --sn-mark: #5fb3b3;
    --sn-notice: #a59f4b;
    --sn-danger: #ff5d5d;
    --sn-danger-text: #ff8a8a;
    --sn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sn-page, .sn-page * { box-sizing: border-box; }
.sn-page { margin: 0; min-height: 100vh; background: var(--sn-bg); color: var(--sn-text); font: 15px/1.6 var(--sn-font); }
.sn-page a { color: var(--sn-link); }

.sn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sn-mark); text-decoration: none; }
.sn-page a.sn-brand { color: var(--sn-mark); }
.sn-brand span { color: var(--sn-heading); font-size: 12px; font-weight: 600; letter-spacing: .26em; }

.sn-card { background: var(--sn-surface); border: 1px solid var(--sn-border); border-top: 2px solid var(--sn-accent);
           border-radius: 12px; padding: 30px 30px 28px; }
.sn-card.notice { border-top-color: var(--sn-notice); }
.sn-card h1 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--sn-heading);
              display: flex; align-items: center; gap: 10px; }
.sn-card p { margin: 0 0 18px; color: var(--sn-body); }
.sn-card label { display: block; font-size: 13px; color: var(--sn-label); margin-bottom: 6px; }
.sn-card input[type=email], .sn-card input[type=password], .sn-card input[type=text] {
    display: block; width: 100%; padding: 10px 12px; margin: 0 0 14px; font: inherit; color: var(--sn-heading);
    background: rgba(255, 255, 255, .04); border: 1px solid var(--sn-border-strong); border-radius: 9px; }
.sn-card input:focus { outline: none; border-color: var(--sn-accent); box-shadow: 0 0 0 3px rgba(0, 174, 174, .18); }
.sn-card input.invalid { border-color: var(--sn-danger); }

.sn-badge { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
            justify-content: center; font-size: 14px; font-weight: 700; background: rgba(0, 174, 174, .16); color: var(--sn-link); }
.notice .sn-badge { background: rgba(165, 159, 75, .18); color: #e0d77a; }
.sn-hint { font-size: 13px; color: var(--sn-muted); margin: 4px 0 20px; }
.sn-error { margin: -6px 0 14px; font-size: 13px; color: var(--sn-danger-text); }

.sn-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 0;
             border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4;
             text-decoration: none; background: var(--sn-accent); color: var(--sn-accent-text); }
.sn-page a.sn-button { color: var(--sn-accent-text); }
.sn-button:hover { background: var(--sn-accent-hover); }
.sn-button:disabled { opacity: .6; cursor: default; }
.sn-button.secondary { background: rgba(255, 255, 255, .06); color: var(--sn-heading); border: 1px solid var(--sn-border-strong); }
.sn-page a.sn-button.secondary { color: var(--sn-heading); }
.sn-button.secondary:hover { background: rgba(255, 255, 255, .1); }
.sn-button.block { width: 100%; }

.sn-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
              animation: sn-spin .7s linear infinite; }
@keyframes sn-spin { to { transform: rotate(360deg); } }

.sn-footer { font-size: 12px; color: var(--sn-faint); }
.sn-page .sn-footer a { color: var(--sn-muted); }