/* SPG: dark, technical, quietly futuristic. MudBlazor's theme sets the palette; this adds the rest. */

:root {
    --spg-bg: #070B12;
    --spg-panel: #0E1522;
    --spg-panel-2: #111A29;
    --spg-line: #1C2636;
    --spg-text: #E6EDF3;
    --spg-muted: #8B98A9;
    --spg-cyan: #22D3EE;
    --spg-violet: #A78BFA;
    --spg-ok: #34D399;
    --spg-warn: #FBBF24;
    --spg-bad: #F87171;
    --spg-mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}

html, body {
    background: var(--spg-bg);
    color: var(--spg-text);
    /* Same stack as the MudBlazor theme, for pages rendered without it (sign-in). */
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

body {
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, 0.07), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(167, 139, 250, 0.06), transparent 60%);
    background-attachment: fixed;
}

.spg-page { padding: 28px clamp(16px, 3vw, 40px) 48px; max-width: 1480px; margin: 0 auto; }
.spg-muted { color: var(--spg-muted) !important; }
.spg-mono { font-family: var(--spg-mono); font-variant-numeric: tabular-nums; }

/* App bar and drawer */
.spg-appbar { backdrop-filter: blur(10px); border-bottom: 1px solid var(--spg-line); }
.spg-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-left: 6px; }
.spg-brand-icon { width: 30px; height: 30px; }
.spg-brand-word { height: 18px; margin-right: 4px; }
.spg-brand-sub { font-size: 12px; color: var(--spg-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.spg-session { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--spg-muted); }
.spg-drawer { border-right: 1px solid var(--spg-line); }
.spg-drawer-foot { position: absolute; bottom: 16px; left: 16px; }

/* Status lights */
.spg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: #4B5768; }
.spg-dot-ok { background: var(--spg-ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: spg-pulse 2.4s infinite; }
.spg-dot-warn { background: var(--spg-warn); box-shadow: 0 0 8px rgba(251, 191, 36, 0.45); }
.spg-dot-bad { background: var(--spg-bad); box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.spg-dot-idle { background: #4B5768; }
@keyframes spg-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.spg-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

/* Panels */
.spg-panel {
    background: linear-gradient(180deg, var(--spg-panel-2), var(--spg-panel));
    border: 1px solid var(--spg-line);
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spg-panel:hover { border-color: #26405A; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35); }
.spg-panel-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.spg-panel-body { border-top: 1px solid var(--spg-line); overflow-x: auto; } /* wide tables scroll inside their panel */

/* Metric tiles */
.spg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 26px; }
.spg-metric { padding: 14px 16px; border: 1px solid var(--spg-line); border-radius: 12px; background: rgba(14, 21, 34, 0.7); }
.spg-metric-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spg-muted); }
.spg-metric-value { font-family: var(--spg-mono); font-size: 24px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.spg-metric-unit { font-size: 12px; color: var(--spg-muted); margin-left: 4px; font-family: inherit; }

/* Type badges and addresses */
.spg-badge {
    font-family: var(--spg-mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--spg-line); color: var(--spg-muted); background: rgba(255, 255, 255, 0.02);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spg-badge-cyan { color: var(--spg-cyan); border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.06); }
.spg-badge-violet { color: var(--spg-violet); border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.06); }
.spg-badge-warn { color: var(--spg-warn); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.07); }
.spg-badge-bad { color: var(--spg-bad); border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); }
.spg-badge-ok { color: var(--spg-ok); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.07); display: inline-flex; align-items: center; gap: 6px; }
/* MudBlazor's menus and tooltip wrappers are inline boxes that sit on the text baseline, which puts
   a menu's icon button a few pixels above plain icon buttons beside it. Centred on the line, every
   icon button in a row lines up. */
.mud-menu, .mud-tooltip-root { vertical-align: middle; }

/* Analysis: what the agent sees inside an input, above its outputs */
.spg-analysis { border-bottom: 1px solid var(--spg-line); }
.spg-analysis-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; user-select: none; }
.spg-analysis-head:hover { background: rgba(255, 255, 255, 0.02); }
.spg-analysis-head:focus-visible { outline: 1px solid var(--spg-cyan); outline-offset: -1px; }
.spg-analysis-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spg-muted); }
/* One line per cell: a narrow window scrolls the table sideways (the panel body does) rather than wrapping it. */
.spg-analysis-table td { padding-top: 7px; padding-bottom: 7px; font-size: 13px; vertical-align: middle; white-space: nowrap; }
.spg-analysis-audio { display: flex; align-items: center; gap: 8px; }
.spg-meter { display: inline-block; width: 72px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.spg-meter > span { display: block; height: 100%; background: var(--spg-ok); }
.spg-meter > span.silent { background: var(--spg-warn); }
.spg-nowrap { white-space: nowrap; }
.spg-bad { color: var(--spg-bad); }
.spg-warn { color: var(--spg-warn); }
.spg-ok { color: var(--spg-ok); }
.spg-link { color: var(--spg-cyan); text-decoration: none; }
.spg-link:hover { text-decoration: underline; }
.spg-pre { white-space: pre-wrap; font-family: var(--spg-mono); font-size: 12.5px; margin: 0; }
.spg-audit-details { font-size: 12.5px; color: var(--spg-muted); max-width: 520px; overflow-wrap: anywhere; }
.spg-url { font-family: var(--spg-mono); font-size: 12.5px; word-break: break-all; }

/* Tables */
.spg-table { width: 100%; border-collapse: collapse; }
.spg-table th {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spg-muted);
    font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--spg-line);
}
.spg-table td { padding: 10px 14px; border-bottom: 1px solid #131C2A; vertical-align: middle; font-size: 13.5px; }
.spg-table tr:last-child td { border-bottom: 0; }
.spg-table .num { text-align: right; font-family: var(--spg-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spg-table tr.off td { opacity: 0.5; }
.spg-table tr.sub td { background: rgba(7, 11, 18, 0.55); font-size: 12.5px; }
.spg-table .actions { text-align: right; white-space: nowrap; }
.spg-warn-text { color: var(--spg-warn); }
.spg-bad-text { color: var(--spg-bad); }

.spg-empty { padding: 34px 18px; text-align: center; color: var(--spg-muted); }

/* Agent cards */
.spg-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.spg-agent { padding: 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.spg-agent-name { font-size: 17px; font-weight: 650; }
.spg-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.spg-kv dt { color: var(--spg-muted); }
.spg-kv dd { margin: 0; font-family: var(--spg-mono); font-size: 12.5px; }

/* Token box */
.spg-token {
    font-family: var(--spg-mono); font-size: 12px; line-height: 1.5; word-break: break-all;
    background: #060A10; border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 10px; padding: 14px;
    max-height: 220px; overflow: auto; color: #BFEFF8;
}

/* Sign-in */
.spg-login-bg { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.spg-login-card {
    width: min(420px, 100%); padding: 36px 32px 28px; border-radius: 18px;
    background: linear-gradient(180deg, #111A29, #0B121D); border: 1px solid var(--spg-line);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.06), 0 30px 80px rgba(0, 0, 0, 0.5);
}
.spg-login-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.spg-login-icon { width: 56px; height: 56px; }
.spg-login-word { height: 30px; }
.spg-login-sub { color: var(--spg-muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; }
.spg-login-form { display: grid; gap: 10px; }
.spg-login-form label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spg-muted); }
.spg-login-form input {
    font: 14px var(--spg-mono); padding: 12px 14px; border-radius: 10px; color: var(--spg-text);
    background: #070B12; border: 1px solid #2A3648; outline: none;
}
.spg-login-form input:focus { border-color: var(--spg-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); }
.spg-login-form button {
    margin-top: 8px; padding: 12px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
    color: #04121A; background: linear-gradient(90deg, var(--spg-cyan), #7DD3FC);
}
.spg-login-form button:hover { filter: brightness(1.08); }
.spg-login-form button.spg-login-passkey { background: transparent; color: var(--spg-text); border: 1px solid var(--spg-cyan); }
.spg-login-google { display: block; text-align: center; padding: 11px; border-radius: 8px; border: 1px solid var(--spg-line); color: var(--spg-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.spg-login-google:hover { border-color: var(--spg-cyan); }
.spg-login-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spg-muted); }
.spg-login-or::before, .spg-login-or::after { content: ""; flex: 1; border-top: 1px solid var(--spg-line); }
.spg-login-error { color: var(--spg-bad); font-size: 13px; }
.spg-login-hint { margin-top: 22px; font-size: 12px; color: var(--spg-muted); line-height: 1.5; }
.spg-login-hint code { font-family: var(--spg-mono); color: #BFEFF8; }

/* Profile page: plain server-rendered forms in the same look as sign-in */
.spg-h1 { font-size: 30px; font-weight: 700; margin: 0 0 4px; }
.spg-h2 { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.spg-small { font-size: 12px; }
.spg-card {
    max-width: 640px; padding: 22px 24px; border-radius: 14px;
    background: linear-gradient(180deg, var(--spg-panel-2), var(--spg-panel)); border: 1px solid var(--spg-line);
}
.spg-card .spg-kv { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.spg-card .spg-kv .spg-muted { margin-right: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.spg-form { display: grid; gap: 10px; }
.spg-form label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spg-muted); }
.spg-form input[type=text], .spg-form input:not([type]), .spg-form input[type=password], .spg-form input[type=tel] {
    font: 14px var(--spg-mono); padding: 11px 13px; border-radius: 10px; color: var(--spg-text);
    background: #070B12; border: 1px solid #2A3648; outline: none; max-width: 360px;
}
.spg-form input:focus { border-color: var(--spg-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); }
.spg-btn {
    margin-top: 6px; padding: 10px 16px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
    color: #04121A; background: linear-gradient(90deg, var(--spg-cyan), #7DD3FC);
}
.spg-btn:hover { filter: brightness(1.08); }
.spg-btn-quiet { background: transparent; color: var(--spg-bad); border: 1px solid rgba(248, 113, 113, 0.4); font-weight: 600; }
.spg-sms-form p { margin: 0 0 6px; line-height: 1.5; }
.spg-form label.spg-check {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 8px;
    font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--spg-text); line-height: 1.45; cursor: pointer;
}
.spg-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--spg-cyan); flex: none; }
.spg-sms-disclosure { margin-left: 28px; font-size: 13px; color: var(--spg-muted); line-height: 1.5; }
.spg-sms-current { padding: 12px 14px; border-radius: 10px; background: rgba(34, 211, 238, 0.06); border: 1px solid rgba(34, 211, 238, 0.2); }
.spg-notice { max-width: 640px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.spg-notice-ok { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); color: #A7F3D0; }

/* Acknowledge link page */
.spg-ack { display: grid; gap: 6px; }
.spg-ack-what { font-weight: 700; font-size: 18px; color: var(--spg-bad); }
.spg-ack-where { font-size: 13px; color: var(--spg-muted); }
.spg-ack p { margin: 6px 0 0; line-height: 1.5; }

/* Blazor's error bar */
#blazor-error-ui {
    background: #2A1215; color: #FECACA; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Multiviewer ---- */
.spg-wall { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.spg-wall-full { position: fixed; inset: 0; z-index: calc(var(--mud-zindex-dialog, 1400) - 1); margin: 0; background: var(--spg-bg); padding: 16px; overflow-y: auto; gap: 14px; }
.spg-wall-exit { display: none; align-self: flex-end; background: var(--spg-panel); color: var(--spg-text); border: 1px solid var(--spg-line); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.spg-wall-full .spg-wall-exit { display: block; }
.spg-wall-agent { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spg-text); margin-bottom: 8px; }
.spg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.spg-tile {
    background: var(--spg-panel); border: 2px solid var(--spg-line); border-radius: 10px; overflow: hidden; min-width: 0;
    transition: border-color 0.2s;
}
.spg-tile-bad { border-color: var(--spg-bad); box-shadow: 0 0 14px rgba(248, 113, 113, 0.25); }
.spg-tile-warn { border-color: var(--spg-warn); }
.spg-tile-info { border-color: var(--spg-cyan); }
.spg-tile-idle { opacity: 0.7; }
.spg-tile-arrange { cursor: grab; }
.spg-tile-watch { cursor: pointer; }
.spg-tile-watch:not(.spg-tile-bad):not(.spg-tile-warn):hover { border-color: var(--spg-cyan); }
.spg-tile-dragging { opacity: 0.4; }
.spg-tile-picture { position: relative; aspect-ratio: 16 / 9; background: #000; }
.spg-tile-picture img { display: block; width: 100%; height: 100%; object-fit: fill; }
.spg-tile-nopicture {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 44px;
    text-align: center; color: var(--spg-muted); font-size: 13px;
}
.spg-tile-faults { position: absolute; top: 6px; left: 6px; right: 40px; display: flex; flex-wrap: wrap; gap: 4px; }
.spg-tile-faults .spg-badge { background: rgba(7, 11, 18, 0.85); }
.spg-tile-meters { position: absolute; top: 6px; right: 6px; bottom: 6px; display: flex; gap: 3px; }
/* A level meter: the colour scale is fixed, and a dark cover hides the part above the level. */
.spg-vu {
    position: relative; width: 7px; border-radius: 2px; overflow: hidden;
    background: linear-gradient(to top, var(--spg-ok) 0%, var(--spg-ok) 70%, var(--spg-warn) 70%, var(--spg-warn) 90%, var(--spg-bad) 90%);
}
.spg-vu-cover { position: absolute; top: 0; left: 0; right: 0; background: rgba(7, 11, 18, 0.82); transition: height 0.25s linear; }
.spg-vu-peak { position: absolute; left: 0; right: 0; height: 2px; background: #fff; transition: bottom 0.25s linear; }
.spg-tile-foot { padding: 7px 10px 8px; }
.spg-tile-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spg-tile-detail { font-family: var(--spg-mono); font-size: 11px; color: var(--spg-muted); }
.spg-tile-detail > span { white-space: nowrap; }
@media (max-width: 600px) {
    .spg-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .spg-tile-name { font-size: 12.5px; }
}

/* Click to watch: the player over the Multiviewer */
.spg-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.spg-player video { display: block; width: 100%; height: 100%; }
.spg-player-notice {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px; text-align: center; color: var(--spg-text); background: rgba(7, 11, 18, 0.72);
}
.spg-player-sound {
    display: none; position: absolute; top: 12px; left: 12px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: rgba(7, 11, 18, 0.85); color: var(--spg-text); border: 1px solid var(--spg-line); font: inherit; font-size: 14px;
}

/* Sign-in security */
.spg-input {
    font: 14px var(--spg-font, inherit); padding: 9px 12px; border-radius: 8px; color: var(--spg-text);
    background: #070B12; border: 1px solid #2A3648; outline: none; min-width: 220px;
}
.spg-input:focus { border-color: var(--spg-cyan); }
.spg-qr { display: inline-block; background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
.spg-qr svg { width: 200px; height: 200px; }
.spg-secret { display: block; font-family: var(--spg-mono); font-size: 14px; letter-spacing: 0.05em; color: #BFEFF8; margin-top: 4px; word-break: break-all; }
.spg-recovery { border-color: var(--spg-warn); }
.spg-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.spg-recovery-codes code { font-family: var(--spg-mono); font-size: 15px; padding: 6px 10px; border: 1px solid var(--spg-line); border-radius: 6px; text-align: center; }

/* The SPG wordmark: heavy, widely spaced, in the signal gradient (solid Glass navy on light backgrounds) */
.spg-wordmark {
    font-weight: 800; letter-spacing: 0.2em; line-height: 1; display: inline-block;
    background: linear-gradient(90deg, var(--spg-cyan), var(--spg-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spg-wordmark-lg { font-size: 34px; }
.spg-wordmark-xl { font-size: 64px; }
.spg-wordmark-solid { background: none; color: var(--spg-bg); }

/* Public pages (legal and brand): readable documents, no sign-in */
.spg-doc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.spg-doc-header { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--spg-line); }
.spg-doc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.spg-doc-brand .spg-brand-icon { width: 28px; height: 28px; }
.spg-doc-brand-by { color: var(--spg-muted); font-size: 12px; letter-spacing: 0.08em; }
.spg-doc-signin { color: var(--spg-text); text-decoration: none; font-size: 14px; border: 1px solid var(--spg-line); padding: 7px 14px; border-radius: 8px; }
.spg-doc-signin:hover { border-color: var(--spg-cyan); }
.spg-doc { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 32px 16px 56px; line-height: 1.65; color: #C4CDD8; }
.spg-doc-nav { border-bottom: 1px solid var(--spg-line); padding-bottom: 14px; margin-bottom: 36px; }
.spg-doc-nav p { font-weight: 600; font-size: 14px; color: var(--spg-text); margin: 0 0 10px; }
.spg-doc-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0; font-size: 14px; }
.spg-doc .spg-doc-nav a { color: var(--spg-muted); text-decoration: none; }
.spg-doc .spg-doc-nav a:hover { color: var(--spg-text); }
.spg-doc h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; color: var(--spg-text); margin: 0 0 18px; letter-spacing: -0.01em; }
.spg-doc h2 { font-size: clamp(20px, 3vw, 26px); color: var(--spg-text); margin: 40px 0 14px; }
.spg-doc h3 { font-size: 16px; color: var(--spg-text); margin: 22px 0 6px; }
.spg-doc a { color: var(--spg-cyan); }
.spg-doc ul { padding-left: 20px; }
.spg-doc li { margin: 6px 0; }
.spg-doc strong { color: var(--spg-text); }
.spg-doc-lead { font-size: 18px; color: var(--spg-muted); }
.spg-doc-date { font-size: 13px; color: var(--spg-muted); margin: -10px 0 28px; }
.spg-doc-small { font-size: 14px; }
.spg-doc-sub { color: var(--spg-muted); font-size: 14px; margin: 0 0 12px; }
.spg-doc-card { background: var(--spg-panel); border: 1px solid var(--spg-line); border-radius: 14px; padding: 18px 22px; }
.spg-doc-card h3 { margin-top: 0; }
.spg-doc-card p { margin-bottom: 0; }
.spg-doc ul.spg-doc-plain { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.spg-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.spg-doc a.spg-doc-link { text-decoration: none; color: inherit; }
.spg-doc a.spg-doc-link:hover { border-color: var(--spg-cyan); }
.spg-doc-footer { border-top: 1px solid var(--spg-line); padding: 18px 16px; text-align: center; font-size: 12px; color: var(--spg-muted); }
.spg-doc-footer a { color: var(--spg-muted); }

/* Brand page: for viewing, not copying */
[data-spg-protected] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.spg-brand-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; }
.spg-brand-tiles-small { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spg-brand-tile { position: relative; border-radius: 14px; border: 1px solid var(--spg-line); min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px 44px; overflow: hidden; }
.spg-brand-tiles-small .spg-brand-tile { min-height: 140px; }
.spg-brand-tile-dark { background: var(--spg-bg); }
.spg-brand-tile-light { background: #F4F6F9; }
.spg-brand-tile-light .spg-brand-by { color: #4B5768; }
.spg-brand-tile-busy { background: repeating-linear-gradient(45deg, #F87171 0 10px, #FBBF24 10px 20px, #34D399 20px 30px); }
.spg-brand-by { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spg-muted); }
.spg-brand-caption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: var(--spg-muted); }
.spg-brand-tile-light .spg-brand-caption { color: #4B5768; }
.spg-brand-tile-busy .spg-brand-caption { color: #070B12; font-weight: 600; }
.spg-brand-wrong::after { content: "\00d7"; position: absolute; top: 8px; right: 12px; color: var(--spg-bad); font-size: 22px; font-weight: 700; }
.spg-brand-dodont { display: grid; gap: 8px; font-size: 14px; }
.spg-brand-yes, .spg-brand-no { display: inline-block; min-width: 52px; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.spg-brand-yes { color: var(--spg-ok); }
.spg-brand-no { color: var(--spg-bad); }
.spg-brand-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 16px 0; }
.spg-brand-chip { height: 88px; border-radius: 12px; border: 1px solid #2A3648; margin-bottom: 10px; }
.spg-brand-swatch-name { color: var(--spg-text); font-weight: 600; font-size: 14px; }
.spg-brand-swatch-hex { font-family: var(--spg-mono); font-size: 13px; color: var(--spg-muted); }
.spg-brand-swatch-use { font-size: 13px; color: var(--spg-muted); line-height: 1.4; }
.spg-brand-gradient { height: 72px; border-radius: 12px; background: linear-gradient(90deg, var(--spg-cyan), var(--spg-violet)); display: flex; align-items: flex-end; padding: 10px 14px; }
.spg-brand-gradient span { font-size: 12px; color: #04121A; font-weight: 600; }
.spg-brand-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.spg-brand-type > div { background: var(--spg-panel); border: 1px solid var(--spg-line); border-radius: 14px; padding: 18px 22px; }
.spg-brand-type-sample { font-size: 48px; font-weight: 700; color: var(--spg-text); line-height: 1.1; margin-bottom: 8px; }

/* Links under the sign-in card */
.spg-login-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12px; }
.spg-login-links a { color: var(--spg-muted); text-decoration: none; }
.spg-login-links a:hover { color: var(--spg-text); }

/* Brand page: the logo files */
.spg-brand-tile-tall { min-height: 340px; }
.spg-brand-img-logo { height: 240px; width: auto; }
.spg-brand-img-mark { height: 120px; width: auto; }
.spg-brand-img-word { height: 56px; width: auto; }
.spg-brand-img-anim { width: 100%; max-width: 260px; height: auto; border-radius: 8px; }
.spg-brand-img-small { height: 64px; width: auto; }
[data-spg-protected] img { -webkit-user-drag: none; pointer-events: none; }

/* Sign-in: the logo animation, centered. The GIF's dark backdrop blends into the card (lighten keeps the
   card where the GIF is darker), and the window shows only the logo, not the GIF's empty margins. */
.spg-login-intro { width: 260px; height: 290px; margin: -6px auto 2px; overflow: hidden; }
.spg-login-intro img { display: block; width: 650px; height: 520px; max-width: none; margin: -114px 0 0 -195px; mix-blend-mode: lighten; }
.spg-login-center { text-align: center; }
.spg-login-card:has(.spg-login-intro) .spg-login-hint { text-align: center; }

/* Sign-in at a client's own address: the client's name under the logo */
.spg-login-client { text-align: center; color: var(--spg-text); font-size: 16px; font-weight: 600; margin: -14px 0 22px; }

/* Password boxes: an eye button inside the right edge shows or hides what's typed */
.spg-reveal { position: relative; display: grid; }
.spg-reveal input { width: 100%; padding-right: 44px !important; }
.spg-reveal-btn {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; padding: 6px;
    display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--spg-muted); cursor: pointer;
}
.spg-login-form .spg-reveal-btn { margin: 0; padding: 6px; background: transparent; color: var(--spg-muted); filter: none; }
.spg-reveal-btn:hover, .spg-reveal-btn:focus-visible { color: var(--spg-text); background: rgba(255, 255, 255, 0.06); outline: none; }
.spg-reveal-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spg-reveal-btn[aria-pressed="true"] { color: var(--spg-cyan); }
.spg-reveal-btn[aria-pressed="true"] .spg-reveal-slash { display: none; }