/* SynthXMedia themes. Light: white surfaces on a very light grey page. Dark (default): neutral graphite
   greys. Black: true black for OLED screens. All three use the logo's violet as the only accent, sharp 8px
   corners and thin borders. Every colour is a token below; <html data-theme="..."> picks the set (chosen in
   Account settings, stored in the sx-theme cookie). Built on Bootstrap 5.3, whose colour mode
   (data-bs-theme) is switched along with it, so standard Bootstrap components follow. */

:root {
    --sx-bg: #f6f6f9;
    /* Focus and "selected" border: a soft violet, like a hovered card (no glow). */
    --sx-focus-border: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-border-strong));
    --sx-sidebar: #ffffff;
    --sx-card: #ffffff;
    --sx-card-raised: #fbfaff;
    --sx-input: #ffffff;
    --sx-border: #e6e4ee;
    --sx-border-strong: #d6d3e2;
    --sx-text: #1d1a2b;
    --sx-heading: #13111d;
    --sx-muted: #6c6880;
    --sx-faint: #8b879d;
    --sx-accent: #7c4dd6;          /* the logo's violet */
    --sx-accent-hover: #6a3bc4;
    --sx-accent-soft: #f1ecfc;
    --sx-accent-text: #5f33b5;
    --sx-purple: #7c4dd6;
    --sx-blue: #3b6fe0;
    --sx-pink: #d6458f;
    --sx-orange: #e07a2e;
    --sx-green: #1f9d57;
    --sx-red: #d64545;
    --sx-teal: #138a83;
    --sx-radius: 8px;
    /* Every section, card, panel and popup uses this one corner radius. */
    --sx-radius-section: 12px;

    /* Surfaces and states that differ per theme. */
    --sx-hover: #f4f3f8;
    --sx-row-hover: #faf9fd;
    --sx-track: #eceaf3;
    --sx-label: #3a3650;
    --sx-menu-text: #4a4660;
    --sx-accent-border: #cdbff0;
    --sx-other-day: #c4c1d1;
    --sx-shadow: rgba(19, 17, 29, 0.04);
    --sx-shadow-strong: rgba(19, 17, 29, 0.08);
    /* Tag/avatar tints mix the item's colour towards these: background towards the base, text towards the ink. */
    --sx-mix-base: #ffffff;
    --sx-mix-ink: #000000;
    --sx-success-bg: #e6f6ec; --sx-success-text: #17643a; --sx-success-border: #bfe6cd; --sx-success-soft: #eefaf2;
    --sx-warning-bg: #fdf1de; --sx-warning-text: #8a5a0c; --sx-warning-border: #f2d9a8; --sx-warning-soft: #fff8ec; --sx-warning-ink: #6b4a0c;
    --sx-danger-bg: #fbe7e7;  --sx-danger-text: #a12a2a;  --sx-danger-border: #f0c6c6;  --sx-danger-soft: #fdf0f0;  --sx-danger-ink: #8a2424;
    --sx-neutral-bg: #efeef4; --sx-neutral-text: #4d4960;
    color-scheme: light;

    --bs-body-bg: var(--sx-bg);
    --bs-body-color: var(--sx-text);
    --bs-emphasis-color: var(--sx-heading);
    --bs-secondary-color: var(--sx-muted);
    --bs-tertiary-color: var(--sx-faint);
    --bs-secondary-bg: #f1f0f6;
    --bs-tertiary-bg: #f8f7fb;
    --bs-border-color: var(--sx-border);
    --bs-border-color-translucent: var(--sx-border);
    --bs-primary: var(--sx-accent);
    --bs-primary-rgb: 124, 77, 214;
    --bs-link-color: var(--sx-accent-text);
    --bs-link-color-rgb: 95, 51, 181;
    --bs-link-hover-color: var(--sx-accent-hover);
    --bs-link-hover-color-rgb: 106, 59, 196;
    --bs-body-font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    --sx-heading-font: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-border-radius: 6px;
    --bs-border-radius-lg: 8px;
    --bs-focus-ring-color: rgba(124, 77, 214, 0.25);
}

/* Dark: graphite. Neutral charcoal greys (no colour cast) so the violet accent is the only colour on screen;
   tag colours are lifted a little to stay readable on dark surfaces. */
:root[data-theme="dark"], :root[data-theme="black"] {
    --sx-bg: #111216;
    --sx-sidebar: #15161b;
    --sx-card: #1a1b21;
    --sx-card-raised: #1f2027;
    --sx-input: #15161b;
    --sx-border: #272830;
    --sx-border-strong: #363743;
    --sx-text: #d7d7de;
    --sx-heading: #f5f5f8;
    --sx-muted: #9a9aa8;
    --sx-faint: #7b7b89;
    --sx-accent: #7c4dd6;
    --sx-accent-hover: #8d62e3;
    --sx-accent-soft: #261f3b;
    --sx-accent-text: #b89ef6;
    --sx-purple: #9b74ec;
    --sx-blue: #5f8ff2;
    --sx-pink: #e76fac;
    --sx-orange: #f09a58;
    --sx-green: #43c17c;
    --sx-red: #ef6d6d;
    --sx-teal: #33b6ac;

    --sx-hover: #22232b;
    --sx-row-hover: #1f2026;
    --sx-track: #2a2b34;
    --sx-label: #c2c2cc;
    --sx-menu-text: #b3b3bf;
    --sx-accent-border: #4a3a77;
    --sx-other-day: #4b4c57;
    --sx-shadow: rgba(0, 0, 0, 0.25);
    --sx-shadow-strong: rgba(0, 0, 0, 0.35);
    --sx-mix-base: #1a1b21;
    --sx-mix-ink: #ffffff;
    --sx-success-bg: #16301f; --sx-success-text: #7ee0a6; --sx-success-border: #24543a; --sx-success-soft: #12251a;
    --sx-warning-bg: #36290f; --sx-warning-text: #f3c573; --sx-warning-border: #5c4620; --sx-warning-soft: #261e10; --sx-warning-ink: #f3d293;
    --sx-danger-bg: #3a1a1c;  --sx-danger-text: #f6a0a0;  --sx-danger-border: #5f2b2f;  --sx-danger-soft: #2a1618;  --sx-danger-ink: #f6abab;
    --sx-neutral-bg: #26272f; --sx-neutral-text: #b7b7c3;
    color-scheme: dark;

    --bs-secondary-bg: #202128;
    --bs-tertiary-bg: #18191e;
    --bs-link-color-rgb: 184, 158, 246;
    --bs-link-hover-color-rgb: 205, 187, 250;
    --bs-focus-ring-color: rgba(155, 116, 236, 0.35);
}

/* Black: true black page and sidebar for OLED screens, with near-black cards for structure. */
:root[data-theme="black"] {
    --sx-bg: #000000;
    --sx-sidebar: #000000;
    --sx-card: #0c0c0f;
    --sx-card-raised: #111115;
    --sx-input: #08080a;
    --sx-border: #1d1d23;
    --sx-border-strong: #2c2c34;
    --sx-heading: #ffffff;
    --sx-hover: #17171c;
    --sx-row-hover: #121216;
    --sx-track: #1d1d23;
    --sx-accent-soft: #1d1630;
    --sx-other-day: #3c3c45;
    --sx-shadow: transparent;
    --sx-shadow-strong: transparent;
    --sx-mix-base: #0c0c0f;
    --bs-secondary-bg: #131317;
    --bs-tertiary-bg: #0a0a0c;
}

html, body {
    font-family: var(--bs-body-font-family);
    background: var(--sx-bg);
    color: var(--sx-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sx-heading-font); color: var(--sx-heading); font-weight: 700; letter-spacing: -0.02em; }
.sx-card-title { font-family: var(--sx-heading-font); }
h1 { font-size: 1.6rem; }
h1:focus { outline: none; }
.text-muted { color: var(--sx-muted) !important; }
a { text-decoration: none; }
code { color: var(--sx-accent-text); background: var(--sx-accent-soft); padding: 0.05em 0.3em; border-radius: 4px; font-size: 0.85em; }
a:hover { text-decoration: underline; }
/* Links styled as buttons never underline. */
a.btn:hover, a.btn:focus { text-decoration: none; }

/* ---------- Buttons, forms, tables, cards ---------- */

.btn { border-radius: 6px; font-weight: 500; font-size: 0.9rem; }
.btn-primary {
    /* Bootstrap's own states (pressed, focus ring) use these; without them a click flashes Bootstrap blue. */
    --bs-btn-bg: var(--sx-accent); --bs-btn-border-color: var(--sx-accent); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sx-accent-hover); --bs-btn-hover-border-color: var(--sx-accent-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sx-accent-hover); --bs-btn-active-border-color: var(--sx-accent-hover); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--sx-accent); --bs-btn-disabled-border-color: var(--sx-accent); --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: 124, 77, 214;
    background: var(--sx-accent);
    border: 1px solid var(--sx-accent);
    color: #fff;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px var(--sx-shadow-strong);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sx-accent-hover);
    border-color: var(--sx-accent-hover);
    color: #fff;
    text-decoration: none;
}
.btn-primary:disabled { background: var(--sx-accent); border-color: var(--sx-accent); opacity: 0.45; }
.btn-outline-primary { --bs-btn-color: var(--sx-accent-text); --bs-btn-border-color: var(--sx-accent-border); --bs-btn-hover-bg: var(--sx-accent-soft); --bs-btn-hover-border-color: var(--sx-accent); --bs-btn-hover-color: var(--sx-accent-text); --bs-btn-active-bg: var(--sx-accent-soft); --bs-btn-active-color: var(--sx-accent-text); --bs-btn-active-border-color: var(--sx-accent); --bs-btn-disabled-color: var(--sx-accent-text); --bs-btn-disabled-border-color: var(--sx-accent-border); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-opacity: 0.45; }
.btn-outline-secondary { --bs-btn-color: var(--sx-text); --bs-btn-border-color: var(--sx-border-strong); --bs-btn-hover-bg: var(--sx-hover); --bs-btn-hover-border-color: var(--sx-border-strong); --bs-btn-hover-color: var(--sx-heading); --bs-btn-bg: var(--sx-card); --bs-btn-active-bg: var(--sx-hover); --bs-btn-active-color: var(--sx-heading); --bs-btn-active-border-color: var(--sx-border-strong); --bs-btn-disabled-color: var(--sx-muted); --bs-btn-disabled-border-color: var(--sx-border); --bs-btn-disabled-bg: var(--sx-card); }
.btn-outline-danger { --bs-btn-color: var(--sx-red); --bs-btn-border-color: color-mix(in srgb, var(--sx-red) 45%, transparent); --bs-btn-hover-bg: var(--sx-red); --bs-btn-hover-border-color: var(--sx-red); --bs-btn-disabled-color: var(--sx-red); --bs-btn-disabled-border-color: color-mix(in srgb, var(--sx-red) 30%, transparent); }
.btn-link { color: var(--sx-accent-text); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn:focus-visible, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--bs-focus-ring-color);
    border-color: var(--sx-accent);
}
.form-control:focus, .form-select:focus {
    box-shadow: none;
    border-color: var(--sx-focus-border);
}

.form-control, .form-select { background-color: var(--sx-input); border-color: var(--sx-border-strong); color: var(--sx-text); font-size: 0.9rem; }
/* One height for every standard control: text boxes, dropdowns, steppers and option switches line up. */
:root { --sx-control-h: 38px; }
input.form-control:not(.form-control-sm):not(.form-control-lg), .form-select:not(.form-select-sm) { min-height: var(--sx-control-h); }
.form-control::placeholder { color: var(--sx-faint); }
.form-label { font-weight: 500; font-size: 0.88rem; color: var(--sx-label); }
.form-check-input:checked { background-color: var(--sx-accent); border-color: var(--sx-accent); }

.card, .list-group-item { background-color: var(--sx-card); border-color: var(--sx-border); }
.card { border-radius: var(--sx-radius-section); }
.list-group { --bs-list-group-border-color: var(--sx-border); --bs-list-group-border-radius: var(--sx-radius); }

.table { --bs-table-bg: transparent; --bs-table-border-color: var(--sx-border); --bs-table-hover-bg: var(--sx-row-hover); --bs-table-color: var(--sx-text); --bs-table-hover-color: var(--sx-text); }
.table thead th { color: var(--sx-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.alert { border-radius: var(--sx-radius); }
.alert-warning { background: var(--sx-warning-soft); border-color: var(--sx-warning-border); color: var(--sx-warning-ink); }
.alert-danger { background: var(--sx-danger-soft); border-color: var(--sx-danger-border); color: var(--sx-danger-ink); }
.alert-success { background: var(--sx-success-soft); border-color: var(--sx-success-border); color: var(--sx-success-text); }
.alert a { color: inherit; text-decoration: underline; }

.nav-pills { --bs-nav-pills-link-active-bg: var(--sx-accent-soft); --bs-nav-pills-link-active-color: var(--sx-accent-text); --bs-nav-link-color: var(--sx-muted); --bs-nav-link-hover-color: var(--sx-heading); gap: 0.25rem; }

.badge { font-weight: 500; border-radius: 4px; padding: 0.3em 0.55em; font-size: 0.75rem; }
.text-bg-primary { background-color: var(--sx-accent-soft) !important; color: var(--sx-accent-text) !important; }
.text-bg-success { background-color: var(--sx-success-bg) !important; color: var(--sx-success-text) !important; }
.text-bg-warning { background-color: var(--sx-warning-bg) !important; color: var(--sx-warning-text) !important; }
.text-bg-danger { background-color: var(--sx-danger-bg) !important; color: var(--sx-danger-text) !important; }
.text-bg-secondary, .text-bg-light { background-color: var(--sx-neutral-bg) !important; color: var(--sx-neutral-text) !important; }

.content { padding-top: 1.5rem; padding-bottom: 2rem; }
.min-w-0 { min-width: 0; }

/* ---------- Shared building blocks ---------- */

.sx-card {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-section);
    padding: 1.15rem 1.25rem;
    box-shadow: 0 1px 2px var(--sx-shadow);
}
.sx-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.sx-card-title { font-size: 1rem; font-weight: 600; color: var(--sx-heading); margin: 0; }
.sx-card-link { color: var(--sx-muted); font-size: 0.85rem; }
.sx-card-link:hover { color: var(--sx-accent-text); text-decoration: none; }

.sx-tag {
    display: inline-flex; align-items: center; max-width: 11rem;
    padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--sx-tag) 12%, var(--sx-mix-base));
    color: color-mix(in srgb, var(--sx-tag) 80%, var(--sx-mix-ink));
}

.sx-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 0.68rem; font-weight: 600;
    background: color-mix(in srgb, var(--sx-tag) 14%, var(--sx-mix-base));
    color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
    border: 1px solid color-mix(in srgb, var(--sx-tag) 25%, var(--sx-mix-base));
}
.sx-avatar-lg { width: 36px; height: 36px; font-size: 0.8rem; }
.sx-avatar-xl { width: 96px; height: 96px; font-size: 2rem; }
img.sx-avatar { object-fit: cover; background: var(--sx-card); border-color: var(--sx-border); }
.sx-avatar-upload { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.sx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sx-tag); flex: none; }

.sx-progress { height: 6px; border-radius: 3px; background: var(--sx-track); overflow: hidden; }
.sx-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--sx-tag, var(--sx-accent)); }

.sx-icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.17em; }

/* ---------- Dashboard ---------- */

.sx-underline-tabs { display: inline-flex; gap: 1.1rem; }
.sx-underline-tabs button {
    border: 0; background: transparent; color: var(--sx-muted); padding: 0.3rem 0.05rem; font-size: 0.9rem; font-weight: 500;
    border-bottom: 2px solid transparent;
}
.sx-underline-tabs button:hover { color: var(--sx-heading); }
.sx-underline-tabs button.active { color: var(--sx-accent-text); border-bottom-color: var(--sx-accent); }
/* Diagonal "speed lines" echo the logo. */
.sx-cal-nav { border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-muted); border-radius: 6px; padding: 0.15rem 0.35rem; }
.sx-cal-nav:hover { color: var(--sx-heading); border-color: var(--sx-border-strong); }

/* ---------- Sign-in / anonymous pages ---------- */


/* ---------- Settings pages (Account settings, admin Settings): section menu + cards ---------- */

.sx-settings { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; max-width: 78rem; }
@media (max-width: 900px) { .sx-settings { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* The section menu: a quiet panel with groups, icon tiles and one-line hints. */
.sx-settings-nav {
    display: flex; flex-direction: column; gap: 0.1rem; position: sticky; top: 1rem; padding: 0.55rem;
    background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); box-shadow: 0 1px 2px var(--sx-shadow);
}
.sx-settings-group { padding: 0.8rem 0.65rem 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-faint); }
.sx-settings-group:first-child { padding-top: 0.35rem; }
.sx-settings-nav a {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 10px; min-width: 0;
    color: var(--sx-menu-text); font-weight: 500; font-size: 0.92rem; white-space: nowrap; transition: background 0.12s, color 0.12s;
}
.sx-settings-nav a:hover { background: var(--sx-hover); color: var(--sx-heading); text-decoration: none; }
.sx-settings-nav a.active { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-settings-nav-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px;
    background: var(--sx-hover); color: var(--sx-muted); transition: background 0.12s, color 0.12s;
}
.sx-settings-nav-icon .sx-icon { width: 1.05rem; height: 1.05rem; }
.sx-settings-nav a:hover .sx-settings-nav-icon { color: var(--sx-heading); }
.sx-settings-nav a.active .sx-settings-nav-icon { background: linear-gradient(135deg, var(--sx-accent), #9a6cf0); color: #fff; box-shadow: 0 4px 10px -4px rgba(124, 77, 214, 0.6); }
.sx-settings-nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sx-settings-nav-text .label { font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; }
.sx-settings-nav-text .hint { font-size: 0.75rem; font-weight: 400; color: var(--sx-faint); overflow: hidden; text-overflow: ellipsis; }
.sx-settings-nav a.active .hint { color: color-mix(in srgb, var(--sx-accent-text) 70%, var(--sx-faint)); }
.sx-settings-status { margin-left: auto; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sx-settings-status.ok { background: var(--sx-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-green) 18%, transparent); }
.sx-settings-status.off { background: transparent; border: 1.5px solid var(--sx-faint); }
.sx-settings-status.bad { background: var(--sx-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-red) 18%, transparent); }
@media (max-width: 900px) {
    .sx-settings-nav { flex-direction: row; overflow-x: auto; position: static; padding: 0.35rem; scrollbar-width: none; }
    .sx-settings-group, .sx-settings-nav-text .hint { display: none; }
    .sx-settings-nav a { flex: none; }
}

.sx-settings-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sx-settings-body > .sx-card .sx-card-title { display: flex; align-items: center; gap: 0.5rem; }
.sx-settings-body > .sx-card .sx-card-title + p { margin-top: 0.3rem; }

/* Admin Settings: page title, section header, setting cards. */
.sx-settings-top { margin-bottom: 1.5rem; }
.sx-settings-top h1 { margin-bottom: 0.25rem; }
.sx-settings-top p { margin: 0; color: var(--sx-muted); }
.sx-section-hero {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.35rem 1.5rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border);
    background:
        radial-gradient(28rem 10rem at 100% 0%, color-mix(in srgb, var(--sx-pink) 9%, transparent), transparent),
        linear-gradient(120deg, color-mix(in srgb, var(--sx-accent-soft) 90%, var(--sx-card)), var(--sx-card) 65%);
    box-shadow: 0 1px 2px var(--sx-shadow);
}
.sx-section-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: 13px;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff; box-shadow: 0 10px 22px -12px rgba(124, 77, 214, 0.9);
}
.sx-section-icon .sx-icon { width: 1.4rem; height: 1.4rem; }
.sx-section-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-accent-text); }
.sx-section-hero h2 { margin: 0.1rem 0 0.3rem; font-size: 1.4rem; font-weight: 700; }
.sx-section-hero p { margin: 0; max-width: 46rem; color: var(--sx-muted); font-size: 0.92rem; }
@media (max-width: 640px) { .sx-section-hero { flex-wrap: wrap; } }

.sx-settings-form { display: flex; flex-direction: column; gap: 1rem; }
.sx-setting-card { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.75rem; padding: 1.4rem 1.5rem; }
@media (max-width: 1000px) { .sx-setting-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.sx-setting-intro h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; }
.sx-setting-intro h3 .sx-icon { color: var(--sx-accent-text); }
.sx-setting-intro p { margin: 0; color: var(--sx-muted); font-size: 0.86rem; }
.sx-settings-saved {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 10px;
    background: var(--sx-success-soft); border: 1px solid var(--sx-success-border); color: var(--sx-success-text); font-weight: 500;
}
.sx-settings-actions {
    position: sticky; bottom: 0.75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 0.85rem 0.75rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border);
    background: color-mix(in srgb, var(--sx-card) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px -14px rgba(19, 17, 29, 0.3);
}

/* Folder structure preview (General › OneDrive folders). */
.sx-folder-tree { margin-top: 1.1rem; padding: 0.9rem 1rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px dashed var(--sx-border-strong); font-size: 0.86rem; }
.sx-folder-tree ul { list-style: none; margin: 0; padding: 0; }
.sx-folder-tree ul ul { margin: 0.2rem 0 0.2rem 0.45rem; padding-left: 0.95rem; border-left: 1px solid var(--sx-border-strong); }
.sx-folder-tree li { padding: 0.12rem 0; color: var(--sx-text); }
.sx-folder-tree li > .sx-icon { width: 0.95rem; height: 0.95rem; color: var(--sx-accent-text); vertical-align: -0.15em; margin-right: 0.2rem; }
.sx-folder-tree em { color: var(--sx-muted); }

.sx-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; padding-top: 1rem; border-top: 1px solid var(--sx-border); }
.sx-facts dt { font-size: 0.78rem; color: var(--sx-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.sx-facts dd { margin: 0.1rem 0 0; color: var(--sx-heading); }

.sx-steps { padding-left: 1.2rem; margin-bottom: 0.5rem; }
.sx-steps li { margin-bottom: 0.9rem; }
.sx-qr img { display: block; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--sx-border); }
.sx-code-input { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1.15rem; letter-spacing: 0.2em; }
.sx-recovery-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.4rem 1.5rem; padding: 0.9rem 1.1rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px dashed var(--sx-border-strong); }
.sx-recovery-codes code { background: none; padding: 0; font-size: 0.95rem; color: var(--sx-heading); letter-spacing: 0.05em; }
.sx-confirm { padding: 0.9rem 1rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px solid var(--sx-border); }

.sx-session-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sx-session-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid var(--sx-border); }
.sx-session-list li:first-child { border-top: 0; }
.sx-session-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--sx-hover); color: var(--sx-muted); flex: none; }

.sx-notify-table { border: 1px solid var(--sx-border); border-radius: var(--sx-radius); overflow: hidden; }
.sx-notify-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 6rem; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--sx-border); }
.sx-notify-row.head { border-top: 0; background: var(--sx-card-raised); font-size: 0.78rem; font-weight: 500; color: var(--sx-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.sx-notify-group { padding: 0.9rem 1rem 0.2rem; border-top: 1px solid var(--sx-border); font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); font-size: 0.9rem; }
.sx-notify-group + .sx-notify-row { border-top: 0; }
@media (max-width: 560px) { .sx-notify-row { grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem; gap: 0.5rem; } }

.sx-notification-list { list-style: none; padding: 0; margin: 0; overflow: hidden; }
.sx-notification-list li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem 0.25rem; border-top: 1px solid var(--sx-border); }
.sx-notification-list li:first-child { border-top: 0; }
.sx-notification-list li.unread .title { font-weight: 600; color: var(--sx-heading); }
.sx-notification-list li.unread .sx-notification-icon::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-accent); box-shadow: 0 0 0 2px var(--sx-card); }
.sx-notification-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 8px;
    background: color-mix(in srgb, var(--sx-tag) 13%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
}
.sx-notification-body { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; color: var(--sx-text); }
.sx-notification-body .body { white-space: pre-line; }
.sx-notification-body:hover .title { color: var(--sx-accent-text); }

.sx-inline-form { padding: 1rem 1.1rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px solid var(--sx-border); }
.sx-edit-row > td { background: var(--sx-card-raised) !important; padding: 1rem !important; }

/* ---------- Forms on their own page (New client, New project) ---------- */

.sx-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sx-page-head h1 { margin-top: 0.15rem; }

/* ---------- Client page ---------- */

.sx-client-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 1.1rem; align-items: center; }
.sx-client-head h1 { font-size: 1.55rem; }
.sx-client-mark {
    display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 14px; flex: none;
    font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em;
    background:
        repeating-linear-gradient(120deg, color-mix(in srgb, var(--sx-tag) 20%, transparent) 0 2px, transparent 2px 9px),
        color-mix(in srgb, var(--sx-tag) 12%, var(--sx-mix-base));
    color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
    border: 1px solid color-mix(in srgb, var(--sx-tag) 25%, var(--sx-mix-base));
}
.sx-client-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; color: var(--sx-muted); font-size: 0.9rem; }
.sx-client-meta a, .sx-client-meta > span { color: var(--sx-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-client-meta a:hover { color: var(--sx-accent-text); text-decoration: none; }
.sx-client-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.sx-client-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--sx-border); }
.sx-client-stats strong { font-family: var(--sx-heading-font); font-size: 1.25rem; color: var(--sx-heading); margin-right: 0.35rem; }
.sx-client-stats span { color: var(--sx-muted); font-size: 0.88rem; }
@media (max-width: 860px) {
    .sx-client-head { grid-template-columns: auto minmax(0, 1fr); }
    .sx-client-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.sx-client-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .sx-client-grid { grid-template-columns: minmax(0, 1fr); } }
.sx-client-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sx-card-title { display: flex; align-items: center; gap: 0.5rem; }

.sx-empty { padding: 1.4rem 1rem; text-align: center; color: var(--sx-muted); border: 1px dashed var(--sx-border-strong); border-radius: var(--sx-radius); }

.sx-list { display: flex; flex-direction: column; }
.sx-list-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.5rem; border-top: 1px solid var(--sx-border); color: inherit; border-radius: 6px; }
.sx-list-row:first-child { border-top: 0; }
a.sx-list-row:hover { background: var(--sx-row-hover); text-decoration: none; }
.sx-list-row.muted, .sx-contact.muted { opacity: 0.6; }

.sx-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.sx-contact { display: flex; flex-direction: column; padding: 0.85rem 0.95rem; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: var(--sx-card-raised); min-width: 0; }
.sx-contact-lines { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.6rem; font-size: 0.88rem; }
.sx-contact-lines a { color: var(--sx-text); display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.sx-contact-lines a:hover { color: var(--sx-accent-text); text-decoration: none; }

.sx-note { padding: 0.75rem 0.9rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px solid var(--sx-border); margin-bottom: 0.6rem; }
.sx-note:last-child { margin-bottom: 0; }

.sx-detail-list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--sx-border); }
.sx-detail-list > div:first-child { border-top: 0; padding-top: 0; }
.sx-detail-list > div.wide { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
.sx-detail-list dt { font-weight: 500; color: var(--sx-muted); font-size: 0.85rem; }
.sx-detail-list dd { margin: 0; color: var(--sx-text); overflow-wrap: anywhere; }

/* ---------- New client ---------- */

.sx-newclient { max-width: 72rem; padding-bottom: 6.5rem; }
.sx-newclient-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .sx-newclient-grid { grid-template-columns: minmax(0, 1fr); } .sx-newclient-side { order: -1; } }
.sx-newclient-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sx-newclient-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.5rem; }
@media (max-width: 1100px) { .sx-newclient-side { position: static; } .sx-next { display: none; } }

.sx-form-section { padding: 1.4rem 1.5rem 1.5rem; }
.sx-form-section > header { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.1rem; }
.sx-form-section > header p { margin: 0.15rem 0 0; color: var(--sx-muted); font-size: 0.88rem; }
.sx-step {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); font-family: var(--sx-heading-font); font-weight: 700; font-size: 0.85rem;
}
.sx-optional { margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.78rem; font-weight: 500; vertical-align: 0.1em; }
.sx-form-section .form-control-lg { font-size: 0.9rem; padding: 0.6rem 0.85rem; }
/* Inputs with a suggestion list get a grey background in Edge/Chrome; keep them like the others. */
.form-control[list] { background-color: var(--sx-input); }
.form-control[list]::-webkit-calendar-picker-indicator { opacity: 0.5; }

.sx-type-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 560px) { .sx-type-picker { grid-template-columns: minmax(0, 1fr); } }
.sx-type-option {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; text-align: left; width: 100%;
    background: var(--sx-card); border: 1px solid var(--sx-border-strong); border-radius: 10px; color: var(--sx-text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sx-type-option:hover { border-color: var(--sx-accent-border); }
.sx-type-option.selected { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 70%, var(--sx-card)); }
.sx-type-option:focus { outline: none; }
.sx-type-option:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-type-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--sx-hover); color: var(--sx-muted); }
.sx-type-option.selected .sx-type-icon { background: var(--sx-accent); color: #fff; }
.sx-type-check { margin-left: auto; color: var(--sx-accent-text); display: inline-flex; }

.sx-input-icon { position: relative; }
.sx-input-icon > .sx-icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--sx-faint); pointer-events: none; }
.sx-input-icon > .form-control { padding-left: 2.4rem; }
.sx-input-icon:focus-within > .sx-icon { color: var(--sx-accent-text); }
.sx-duplicate { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 8px;
    background: var(--sx-danger-soft); border: 1px solid var(--sx-danger-border); color: var(--sx-danger-ink); font-size: 0.88rem; }
.sx-duplicate .sx-icon { margin-top: 0.12rem; }
.sx-duplicate a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 0.25rem; }
.form-control.is-invalid { border-color: var(--sx-red); background-image: none; padding-right: 0.85rem; }
.sx-input-icon > .form-control.is-invalid { padding-left: 2.4rem; }

.sx-preview { padding: 1.25rem; }
.sx-preview-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); margin-bottom: 0.9rem; }
.sx-preview-name { font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.15rem; color: var(--sx-heading); }
.sx-preview-name.placeholder-text { color: var(--sx-faint); }
.sx-preview-lines { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; }
.sx-preview-lines li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; overflow-wrap: anywhere; }
.sx-preview-lines li.empty { color: var(--sx-faint); }
.sx-preview-lines .sx-icon { color: var(--sx-muted); }
.sx-completeness { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--sx-border); }
.sx-next ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.88rem; color: var(--sx-text); }
.sx-next li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.6rem; }
.sx-next .sx-icon { color: var(--sx-accent-text); margin-top: 0.15rem; }
.sx-client-mark.sm { width: 36px; height: 36px; border-radius: 9px; font-size: 0.8rem; }

/* Floating action bar: pinned to the bottom of the screen, clear of the sidebar. */
.sx-floating-bar { position: fixed; left: 260px; right: 0; bottom: 0; z-index: 25; padding: 0 2rem 1.1rem; pointer-events: none; }
@media (max-width: 991.98px) { .sx-floating-bar { left: 0; padding: 0 0.75rem 0.75rem; } }
.sx-floating-bar-inner {
    pointer-events: auto; max-width: 72rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem 0.75rem 1.1rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border);
    background: color-mix(in srgb, var(--sx-card) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 10px 30px -8px rgba(19, 17, 29, 0.22), 0 2px 6px rgba(19, 17, 29, 0.06);
}
:root[data-theme="dark"] .sx-floating-bar-inner, :root[data-theme="black"] .sx-floating-bar-inner { box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.7); border-color: var(--sx-border-strong); }
.sx-floating-summary { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex: 1; }
@media (max-width: 700px) {
    .sx-floating-bar-inner { flex-wrap: wrap; }
    .sx-floating-summary { flex-basis: 100%; }
    .sx-floating-bar-inner .btn { flex: 1; }
}

/* ---------- Services: picker, tags, admin list ---------- */

.sx-service-groups { display: flex; flex-direction: column; gap: 1rem; }
.sx-service-group-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); margin-bottom: 0.45rem; }
.sx-service-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sx-service-chips.sm { gap: 0.3rem; margin-top: 0.75rem; }
.sx-service-chip {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.5rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--sx-border-strong); background: var(--sx-card); color: var(--sx-text); font-size: 0.9rem; font-weight: 500;
    transition: border-color 0.15s, background 0.15s, color 0.15s; user-select: none;
}
.sx-service-chip:hover { border-color: var(--sx-accent-border); }
/* Focus ring only for keyboard use, not after a click. */
.sx-service-chip:has(input:focus-visible), button.sx-service-chip:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
button.sx-service-chip:focus { outline: none; }
button.sx-service-chip:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-service-chip .tick {
    display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    border: 1.5px solid var(--sx-border-strong); background: var(--sx-card); flex: none;
}
.sx-service-chip .tick .sx-icon { width: 0.8rem; height: 0.8rem; }
.sx-service-chip.on { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 70%, var(--sx-card)); color: var(--sx-accent-text); }
.sx-service-chip.on .tick { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-service-tag {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); white-space: nowrap;
}
.sx-service-tag .sx-icon { width: 0.85em; height: 0.85em; opacity: 0.7; }
.sx-service-tag.more { background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-preview-services { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1rem; }
.sx-icon-button.danger:hover { background: var(--sx-danger-bg); color: var(--sx-danger-text); }

/* ---------- Clients list ---------- */

.sx-list-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; max-width: 52rem; }
.sx-list-toolbar .form-select { max-width: 15rem; }

/* Custom dropdown (service filter). */
.sx-dropdown-chevron { margin-left: auto; display: inline-flex; color: var(--sx-muted); transition: transform 0.15s; }
.sx-dropdown-clear { display: inline-flex; padding: 0.15rem; border-radius: 4px; color: var(--sx-accent-text); margin-left: auto; }
.sx-dropdown-clear + .sx-dropdown-chevron { margin-left: 0; }
.sx-dropdown-clear:hover { background: color-mix(in srgb, var(--sx-accent) 15%, transparent); }
.sx-dropdown-backdrop { position: fixed; inset: 0; z-index: 40; }
.sx-dropdown-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 41; min-width: 100%; width: max-content; max-width: min(22rem, 92vw); max-height: 22rem; overflow-y: auto; padding: 0.35rem;
    background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(19, 17, 29, 0.28), 0 2px 6px rgba(19, 17, 29, 0.06); animation: sx-pop 0.12s ease-out;
}
:root[data-theme="dark"] .sx-dropdown-panel, :root[data-theme="black"] .sx-dropdown-panel { border-color: var(--sx-border-strong); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75); }
.sx-dropdown-group { padding: 0.65rem 0.6rem 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); }
.sx-dropdown-option {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: 7px;
    background: none; color: var(--sx-text); font-size: 0.9rem; text-align: left;
}
.sx-dropdown-panel.right { left: auto; right: 0; }
.sx-dropdown-option:hover, .sx-dropdown-option:focus-visible, .sx-dropdown-option.highlighted { background: var(--sx-hover); outline: none; }
.sx-dropdown-option.selected { color: var(--sx-accent-text); font-weight: 600; background: var(--sx-accent-soft); }
.sx-dropdown-option.empty .sx-dropdown-count { opacity: 0.5; }
.sx-dropdown-count { min-width: 1.5rem; padding: 0 0.35rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.75rem; font-weight: 600; text-align: center; }
.sx-dropdown-option.selected .sx-dropdown-count { background: color-mix(in srgb, var(--sx-accent) 15%, transparent); color: var(--sx-accent-text); }
.sx-dropdown-check { width: 1rem; display: inline-flex; color: var(--sx-accent-text); }
/* SelectMenu: the app's dropdown. */
.sx-select { position: relative; display: inline-block; }
.sx-select.open { z-index: 45; }
.sx-select.block { display: block; }
.sx-select-button {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: var(--sx-control-h); padding: 0.375rem 0.55rem 0.375rem 0.8rem;
    border-radius: var(--bs-border-radius); border: 1px solid var(--sx-border-strong); background: var(--sx-input);
    color: var(--sx-text); font-size: 0.9rem; text-align: left; transition: border-color 0.15s, background 0.15s;
}
.sx-select:not(.block) .sx-select-button { min-width: 12rem; font-weight: 500; }
.sx-select-button > .sx-icon { color: var(--sx-muted); flex: none; }
.sx-select-button:hover:not(:disabled) { border-color: var(--sx-accent-border); }
.sx-select-button:focus { outline: none; }
.sx-select-button:focus-visible, .sx-select.open .sx-select-button { border-color: var(--sx-focus-border); }
.sx-select-button:disabled { opacity: 0.6; cursor: not-allowed; background: var(--sx-hover); }
.sx-select-button.active { border-color: var(--sx-accent-border); background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-select-button.active > .sx-icon { color: var(--sx-accent-text); }
.sx-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Not Bootstrap's .placeholder: that one is a grey loading bar over the text. */
.sx-select-value.is-empty { color: var(--sx-faint); }
.sx-select.open .sx-dropdown-chevron { transform: rotate(180deg); }
.sx-select-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-tag); flex: none; }
.sx-select-clear-space { width: 1.35rem; flex: none; }
.sx-select-clear { position: absolute; top: 50%; right: 2.05rem; transform: translateY(-50%); z-index: 1; border: 0; background: none; font-size: 0.9rem; line-height: 1; }
.sx-select-clear:focus-visible { outline: 2px solid var(--sx-focus-border); outline-offset: 1px; }
.sx-select-search { position: sticky; top: -0.35rem; z-index: 1; display: flex; align-items: center; gap: 0.45rem; margin: -0.35rem -0.35rem 0.3rem; padding: 0.55rem 0.75rem; background: var(--sx-card); border-bottom: 1px solid var(--sx-border); color: var(--sx-muted); }
.sx-select-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sx-text); outline: none; font-size: 0.9rem; }
.sx-dropdown-option .text-muted { font-weight: 400; }
@media (max-width: 560px) { .sx-select:not(.block) { display: block; } .sx-dropdown-panel, .sx-dropdown-panel.right { left: 0; right: auto; min-width: 100%; } }

/* Radio choices shown as pills (works in plain, non-interactive forms too). */
.sx-radio-chips .sx-service-chip .tick .sx-icon { visibility: hidden; }
.sx-radio-chips .sx-service-chip:has(input:checked) { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 70%, var(--sx-card)); color: var(--sx-accent-text); }
.sx-radio-chips .sx-service-chip:has(input:checked) .tick { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-radio-chips .sx-service-chip:has(input:checked) .tick .sx-icon { visibility: visible; }
.sx-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin-bottom: 0.75rem; }
.sx-section-head h2 { font-size: 1.05rem; margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.sx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.35rem; padding: 0 0.4rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-family: var(--bs-body-font-family); font-size: 0.75rem; font-weight: 600; }

.sx-client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.9rem; }
.sx-client-card {
    display: flex; flex-direction: column; padding: 1.1rem 1.15rem 0.95rem; border-radius: var(--sx-radius-section); color: inherit;
    background: var(--sx-card); border: 1px solid var(--sx-border); box-shadow: 0 1px 2px var(--sx-shadow);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sx-client-card:hover { text-decoration: none; border-color: var(--sx-accent-border); box-shadow: 0 8px 22px -12px var(--sx-shadow-strong); transform: translateY(-1px); }
.sx-client-card .sx-client-mark { width: 46px; height: 46px; border-radius: 11px; font-size: 1rem; }
.sx-client-card-name { font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); font-size: 1.02rem; }
.sx-client-card-foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: auto; padding-top: 0.85rem; font-size: 0.82rem; color: var(--sx-muted); }
.sx-client-card-foot > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-client-card .sx-service-chips.sm { margin-bottom: 0.1rem; }

.sx-quiet-list { overflow: hidden; }
.sx-quiet-row { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--sx-border); }
.sx-quiet-row:first-child { border-top: 0; }
.sx-quiet-row:hover { background: var(--sx-row-hover); }
.sx-quiet-row.muted { opacity: 0.6; }
.sx-quiet-main { display: flex; align-items: center; gap: 0.8rem; min-width: 0; flex: 1; color: inherit; }
.sx-quiet-main:hover { text-decoration: none; }
.sx-quiet-main:hover .fw-semibold { color: var(--sx-accent-text); }
.sx-quiet-row .sx-service-chips.sm { margin-top: 0; flex-wrap: nowrap; }
.sx-quiet-when { min-width: 6.5rem; text-align: right; }
@media (max-width: 760px) { .sx-quiet-row .sx-service-chips, .sx-quiet-when { display: none; } }

.sx-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
.sx-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--sx-accent-soft); color: var(--sx-accent-text); margin-bottom: 0.9rem; }

/* ---------- Popup dialog ---------- */

.sx-modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(19, 17, 29, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: sx-fade 0.15s ease-out; }
.sx-modal-wrap { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem; overflow-y: auto; pointer-events: none; }
.sx-modal {
    pointer-events: auto; width: 100%; max-width: 34rem; display: flex; flex-direction: column; margin-bottom: 6vh;
    background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); outline: none;
    box-shadow: 0 24px 60px -16px rgba(19, 17, 29, 0.35); animation: sx-pop 0.16s ease-out;
}
.sx-modal.wide { max-width: 46rem; }
:root[data-theme="dark"] .sx-modal, :root[data-theme="black"] .sx-modal { box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8); border-color: var(--sx-border-strong); }
.sx-modal-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.35rem 0.9rem; border-bottom: 1px solid var(--sx-border); }
.sx-modal-close { margin-left: auto; border: 0; background: none; color: var(--sx-muted); padding: 0.3rem; border-radius: 6px; display: inline-flex; }
.sx-modal-close:hover { background: var(--sx-hover); color: var(--sx-heading); }
.sx-modal-body { padding: 1.2rem 1.35rem; }
.sx-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; padding: 0.9rem 1.35rem; border-top: 1px solid var(--sx-border); background: var(--sx-card-raised); border-radius: 0 0 var(--sx-radius-section) var(--sx-radius-section); }
/* Footer buttons are the same height with or without an icon (popups keep their size between steps). */
.sx-modal-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 2.4rem; }
@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Client page details ---------- */

.sx-status-pill { display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle; margin-left: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-family: var(--bs-body-font-family); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.sx-status-pill.busy { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-status-pill.busy::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sx-service-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); border: 1px solid var(--sx-accent-border);
}
.sx-service-pill .sx-icon { width: 0.85em; height: 0.85em; opacity: 0.7; }
button.sx-service-chip:disabled { opacity: 0.7; cursor: progress; }

.sx-contact-tools { display: flex; gap: 0.15rem; margin-left: auto; }
.sx-icon-button { border: 0; background: none; color: var(--sx-muted); padding: 0.3rem; border-radius: 6px; display: inline-flex; }
.sx-icon-button:hover { background: var(--sx-hover); color: var(--sx-heading); }
.sx-contact-notes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sx-note-compose { margin-bottom: 0.9rem; }
.sx-note-compose textarea { resize: vertical; }
.sx-note-body { white-space: pre-wrap; color: var(--sx-text); padding-left: calc(28px + 0.5rem); }

/* Activity as a small timeline. */
.sx-timeline { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.sx-timeline li { position: relative; padding: 0 0 0.9rem 1.2rem; }
.sx-timeline li::before { content: ""; position: absolute; left: 3px; top: 0.45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-accent-soft); }
.sx-timeline li::after { content: ""; position: absolute; left: 6px; top: 1.1rem; bottom: 0.1rem; width: 1px; background: var(--sx-border-strong); }
.sx-timeline li:last-child::after { display: none; }
.sx-timeline li:last-child { padding-bottom: 0.2rem; }

/* ---------- Sign-in pages ---------- */

.sx-auth { max-width: 26rem; margin: 3rem auto 0; }
.sx-auth-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; }
.sx-auth-head img { width: 46px; height: auto; flex: none; }
.sx-auth-head h1 { margin: 0; font-size: 1.5rem; }
.sx-auth .sx-card { padding: 1.5rem; }

/* ---------- Dashboard ---------- */

.sx-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sx-dash-date { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-accent-text); }
.sx-dash-head h1 { margin: 0.2rem 0 0.25rem; font-size: 1.8rem; }
.sx-dash-head p { margin: 0; color: var(--sx-muted); }
.sx-dash-attention {
    display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--sx-radius-section);
    background: var(--sx-warning-soft); border: 1px solid var(--sx-warning-border); color: var(--sx-warning-ink); font-size: 0.9rem;
}
.sx-dash-attention > .sx-icon { flex: none; margin-top: 0.15rem; }
.sx-dash-attention a { color: inherit; font-weight: 600; }

.sx-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1100px) { .sx-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-dash-stats { grid-template-columns: minmax(0, 1fr); } }
.sx-dash-stat {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label icon" "value icon" "sub sub";
    gap: 0.15rem 0.75rem; padding: 1.1rem 1.2rem; overflow: hidden;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text);
    box-shadow: 0 1px 2px var(--sx-shadow); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sx-dash-stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sx-tag); opacity: 0.85; }
.sx-dash-stat:hover { text-decoration: none; color: var(--sx-text); border-color: var(--sx-accent-border); box-shadow: 0 12px 26px -20px rgba(124, 77, 214, 0.6); transform: translateY(-1px); }
.sx-dash-stat-icon {
    grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 11px;
    background: color-mix(in srgb, var(--sx-tag) 13%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
}
.sx-dash-stat-label { grid-area: label; font-size: 0.82rem; font-weight: 600; color: var(--sx-muted); }
.sx-dash-stat-value { grid-area: value; font-family: var(--sx-heading-font); font-size: 1.75rem; font-weight: 800; color: var(--sx-heading); line-height: 1.15; }
.sx-dash-stat-sub { grid-area: sub; margin-top: 0.2rem; font-size: 0.8rem; color: var(--sx-faint); }

/* Pipeline: the nine stages as connected steps with their counts. */

.sx-dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.sx-dash-empty { display: flex; align-items: center; gap: 0.6rem; padding: 1rem; border-radius: 10px; background: var(--sx-success-soft); color: var(--sx-success-text); font-size: 0.9rem; }
.sx-next-list { display: flex; flex-direction: column; gap: 0.45rem; }
.sx-next-item {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--sx-border);
    background: var(--sx-card); color: var(--sx-text); transition: border-color 0.15s, background 0.15s;
}
.sx-next-item:hover { text-decoration: none; color: var(--sx-text); border-color: var(--sx-accent-border); background: var(--sx-row-hover); }
.sx-next-icon {
    --sx-tag: var(--sx-purple);
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 9px;
    background: color-mix(in srgb, var(--sx-tag) 13%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
}
.sx-next-icon .sx-icon { width: 1.05rem; height: 1.05rem; }
.sx-next-icon.changes { --sx-tag: var(--sx-red); }
.sx-next-icon.request_answered { --sx-tag: var(--sx-pink); }
.sx-next-icon.messages { --sx-tag: var(--sx-pink); }
.sx-next-icon.awaiting_deposit { --sx-tag: var(--sx-orange); }
.sx-next-icon.info_received, .sx-next-icon.launch { --sx-tag: var(--sx-green); }
.sx-next-icon.quote { --sx-tag: var(--sx-blue); }

/* Calendar. */
.sx-dcal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1rem; }
.sx-dcal-nav { display: flex; align-items: center; gap: 0.35rem; }
.sx-dcal-month { min-width: 9.5rem; text-align: center; font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); }
.sx-dcal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-left: auto; font-size: 0.78rem; color: var(--sx-muted); }
.sx-dcal-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-dcal-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sx-tag); }
.sx-dcal-dot, .sx-dcal-chip { --sx-tag: var(--sx-blue); }
.sx-dcal-dot.launch, .sx-dcal-chip.launch { --sx-tag: var(--sx-accent); }
.sx-dcal-dot.quote_expires, .sx-dcal-chip.quote_expires { --sx-tag: var(--sx-orange); }
.sx-dcal-dot.live, .sx-dcal-chip.live { --sx-tag: var(--sx-green); }
.sx-dcal-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .sx-dcal-body { grid-template-columns: minmax(0, 1fr); } }
.sx-dcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--sx-border); border-radius: 10px; overflow: hidden; background: var(--sx-border); gap: 1px; }
.sx-dcal-dayname { padding: 0.45rem; background: var(--sx-card-raised); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); text-align: center; }
.sx-dcal-day {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 5.6rem; padding: 0.35rem 0.35rem 0.4rem; border: 0;
    background: var(--sx-card); color: var(--sx-text); text-align: left; min-width: 0; transition: background 0.12s;
}
.sx-dcal-day:hover { background: var(--sx-row-hover); }
.sx-dcal-day.weekend { background: color-mix(in srgb, var(--sx-card-raised) 70%, var(--sx-card)); }
.sx-dcal-day.other .num { color: var(--sx-other-day); }
.sx-dcal-day .num { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.82rem; font-weight: 600; }
.sx-dcal-day.today .num { background: var(--sx-accent); color: #fff; }
.sx-dcal-day.selected { box-shadow: inset 0 0 0 1.5px var(--sx-focus-border); }
.sx-dcal-chip {
    display: block; padding: 1px 6px; border-radius: 5px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--sx-tag) 14%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
    border-left: 2px solid var(--sx-tag);
}
.sx-dcal-more { font-size: 0.78rem; color: var(--sx-muted); padding-left: 4px; }
.sx-dcal-agenda { padding: 0.9rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); max-height: 34rem; overflow-y: auto; }
.sx-dcal-agenda-date { margin: 0.8rem 0 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--sx-heading); }
.sx-dcal-agenda-date:first-of-type { margin-top: 0; }
.sx-dcal-event { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; border-radius: 8px; color: var(--sx-text); }
.sx-dcal-event:hover { text-decoration: none; background: var(--sx-hover); color: var(--sx-text); }
@media (max-width: 700px) {
    .sx-dcal-day { min-height: 3.4rem; }
    .sx-dcal-chip { font-size: 0; padding: 0; height: 5px; border-left: 0; }
    .sx-dcal-more { display: none; }
}

/* Projects list: the stage filter from the dashboard. */
.sx-proj-filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--sx-border-strong); color: var(--sx-muted); }
.sx-proj-filter-chip:hover { text-decoration: none; color: var(--sx-heading); border-color: var(--sx-accent-border); }
.sx-proj-filter-chip .sx-icon { width: 0.85rem; height: 0.85rem; }

/* ---------- Projects list ---------- */

.sx-proj-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0 1rem; }
.sx-proj-toolbar .sx-segmented button { padding: 0.4rem 0.9rem; }
.sx-proj-tab-count { margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.75rem; font-weight: 600; }
.sx-segmented button.on .sx-proj-tab-count { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-proj-search { width: min(20rem, 100%); }
.sx-proj-archived { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; font-size: 0.88rem; color: var(--sx-muted); cursor: pointer; }
.sx-proj-archived .form-check-input { margin: 0; }

.sx-proj-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sx-proj-row {
    display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr) 1.25rem;
    align-items: center; gap: 1rem; padding: 0.85rem 1.1rem;
}
a.sx-proj-row {
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text);
    box-shadow: 0 1px 2px var(--sx-shadow); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.sx-proj-row:hover { text-decoration: none; color: var(--sx-text); border-color: var(--sx-accent-border); box-shadow: 0 10px 24px -18px rgba(124, 77, 214, 0.55); transform: translateY(-1px); }
a.sx-proj-row.archived { opacity: 0.65; }
.sx-proj-head { padding-top: 0; padding-bottom: 0.2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); }
.sx-proj-main { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.sx-proj-name { display: block; font-weight: 600; color: var(--sx-heading); }
.sx-proj-sub { display: block; font-size: 0.82rem; color: var(--sx-muted); }
.sx-proj-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.sx-proj-progress { display: block; width: 100%; max-width: 9rem; height: 4px; border-radius: 999px; background: var(--sx-track); overflow: hidden; }
.sx-proj-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sx-accent), var(--sx-pink)); }
.sx-proj-date { display: flex; flex-direction: column; font-size: 0.88rem; color: var(--sx-text); }
.sx-proj-date small { font-size: 0.75rem; color: var(--sx-faint); }
.sx-proj-date.soon small { color: var(--sx-warning-text); font-weight: 600; }
.sx-proj-date.late { color: var(--sx-danger-text); }
.sx-proj-date.late small { color: var(--sx-danger-text); font-weight: 600; }
.sx-proj-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.sx-proj-warn { display: inline-flex; color: var(--sx-red); }
.sx-proj-go { display: inline-flex; color: var(--sx-faint); }
a.sx-proj-row:hover .sx-proj-go { color: var(--sx-accent-text); }
@media (max-width: 900px) {
    .sx-proj-head { display: none; }
    .sx-proj-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1rem; }
    .sx-proj-main { grid-column: 1 / -1; }
    .sx-proj-date::before { content: attr(data-label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
    .sx-proj-go { display: none; }
    .sx-proj-archived { margin-left: 0; }
}

/* ---------- Sign-in pages (AuthLayout): always dark, over the brand background ---------- */

.sx-login {
    --l-text: #e9e7f2; --l-muted: #9a97ab; --l-faint: #6f6c80; --l-violet: #7c4dd6; --l-violet-2: #9a6cf0; --l-lilac: #c9a7ff;
    --l-field: #121218; --l-field-border: #2a2933; --l-panel: rgba(12, 12, 17, 0.88);
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(26rem, 1fr);
    color: var(--l-text); color-scheme: dark;
    background: #0b0b10 url("img/login-bg.png") center / cover no-repeat;
}
.sx-login a { color: inherit; }

/* Left: the brand story. */
.sx-login-hero { position: relative; display: flex; flex-direction: column; padding: 3.4rem clamp(2rem, 6vw, 6rem) 3rem; min-width: 0; }
.sx-login-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: #fff; }
.sx-login-brand img { width: 44px; height: auto; }
.sx-login-brand span span { color: var(--l-violet-2); }
.sx-login-eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.42em; line-height: 2.2; text-transform: uppercase; color: var(--l-muted); }
.sx-login-hero .sx-login-eyebrow { margin-top: auto; padding-top: 4rem; }
.sx-login-hero .sx-login-eyebrow::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: 1.1rem; background: var(--l-violet); }
.sx-login-title {
    margin: 4.5rem 0 1.4rem; font-family: var(--sx-heading-font); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 3.9rem);
    line-height: 1.04; letter-spacing: -0.02em; color: #fff;
}
.sx-login-title span { background: linear-gradient(100deg, #b98cff, #e4c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-login-lead { max-width: 23rem; margin: 0; font-size: 1.12rem; line-height: 1.55; color: #c8c5d6; }
.sx-login-features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 16rem)); margin: auto 0 0; padding: 4rem 0 0; }
.sx-login-features li { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sx-login-features li:first-child { padding-left: 0; border-left: 0; }
.sx-login-features .sx-icon { width: 1.85rem; height: 1.85rem; stroke-width: 1.6; color: var(--l-violet-2); margin-bottom: 0.9rem; }
.sx-login-features strong { font-weight: 600; color: #fff; font-size: 0.93rem; }
.sx-login-features span { color: var(--l-muted); font-size: 0.86rem; line-height: 1.5; }

/* Right: the form. */
.sx-login-panel {
    display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(2rem, 5vw, 4.75rem) 2.25rem;
    background: var(--l-panel); border-left: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sx-login-form { width: 100%; max-width: 28rem; margin: auto 0; }
.sx-login-panel .sx-login-eyebrow.accent { color: var(--l-violet-2); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.38em; }
.sx-login-heading { margin: 0.35rem 0 0.6rem; font-family: var(--sx-heading-font); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sx-login-sub { margin: 0 0 2.1rem; color: var(--l-muted); font-size: 0.97rem; }
.sx-login-label { display: block; margin-bottom: 0.55rem; font-weight: 600; font-size: 0.9rem; color: #f2f0f8; }
.sx-login-password { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label link" "field field"; align-items: baseline; margin-top: 1.6rem; }
.sx-login-password > .sx-login-label { grid-area: label; }
.sx-login-password > .sx-login-link { grid-area: link; }
.sx-login-password > .sx-login-field { grid-area: field; }
.sx-login-link { border: 0; background: none; padding: 0; color: var(--l-violet-2) !important; font-weight: 600; font-size: 0.88rem; text-decoration: none; cursor: pointer; }
.sx-login-link:hover { color: var(--l-lilac) !important; text-decoration: underline; }
.sx-login-field { position: relative; display: flex; align-items: center; }
.sx-login-field > .sx-icon { position: absolute; left: 1.05rem; width: 1.15rem; height: 1.15rem; color: #a9a6b8; pointer-events: none; }
.sx-login-field input {
    width: 100%; height: 3.15rem; padding: 0 3rem 0 3.2rem; border-radius: 9px; font-size: 0.9rem;
    background: var(--l-field); color: #fff; border: 1px solid var(--l-field-border); outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sx-login-field input::placeholder { color: #7d7a8d; }
.sx-login-field input:focus { border-color: var(--l-violet-2); box-shadow: 0 0 16px -6px rgba(154, 108, 240, 0.5); }
.sx-login-field:focus-within > .sx-icon { color: #d9ccff; }
.sx-login-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px var(--l-field) inset; caret-color: #fff; }
.sx-login-eye { position: absolute; right: 0.75rem; display: inline-flex; padding: 0.4rem; border: 0; border-radius: 6px; background: none; color: #a9a6b8; }
.sx-login-eye:hover, .sx-login-eye.on { color: #fff; }
.sx-login-eye .sx-icon { width: 1.15rem; height: 1.15rem; }
.sx-login-code { letter-spacing: 0.3em; font-weight: 600; }
.sx-login-check { display: inline-flex; align-items: center; gap: 0.7rem; margin: 1.4rem 0 1.8rem; color: #d6d3e2; font-size: 0.9rem; cursor: pointer; user-select: none; }
.sx-login-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-login-check .box { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 5px; border: 1px solid #3a3946; background: var(--l-field); color: transparent; }
.sx-login-check .box .sx-icon { width: 0.95rem; height: 0.95rem; stroke-width: 3; }
.sx-login-check input:checked + .box { background: var(--l-violet); border-color: var(--l-violet); color: #fff; }
.sx-login-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(154, 108, 240, 0.45); }
.sx-login-submit {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; height: 3.25rem; border: 0; border-radius: 9px;
    background: linear-gradient(90deg, #6a3fd4, #7d52e6); color: #fff; font-size: 1.02rem; font-weight: 600;
    box-shadow: none; transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sx-login-submit:hover { filter: brightness(1.1); box-shadow: 0 14px 34px -10px rgba(124, 77, 214, 0.9); }
.sx-login-submit:active { transform: translateY(1px); }
.sx-login-submit .sx-icon { width: 1.1rem; height: 1.1rem; }
.sx-login-alert {
    display: flex; gap: 0.6rem; align-items: flex-start; margin: -1rem 0 1.6rem; padding: 0.8rem 1rem; border-radius: 10px;
    background: rgba(239, 109, 109, 0.1); border: 1px solid rgba(239, 109, 109, 0.35); color: #ffc2c2; font-size: 0.88rem;
}
.sx-login-alert .sx-icon { flex: none; margin-top: 0.15rem; }
.sx-login-hint { margin: 0.7rem 0 1.6rem; color: var(--l-muted); font-size: 0.84rem; }
.sx-login-popover {
    margin: auto; max-width: 22rem; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid #34323f;
    background: #17161e; color: var(--l-text); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
}
.sx-login-popover::backdrop { background: rgba(0, 0, 0, 0.5); }
.sx-login-popover p { margin: 0.4rem 0 0; color: var(--l-muted); }
.sx-login-foot { width: 100%; max-width: 28rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--l-muted); font-size: 0.86rem; }
.sx-login-brand-small { display: none; }
a.sx-login-submit, a.sx-login-submit:hover { color: #fff; text-decoration: none; }
.sx-login-submit:disabled { opacity: 0.55; cursor: not-allowed; filter: none; box-shadow: none; }
.sx-login-skip { display: block; margin: 1.1rem 0 0.4rem; text-align: center; color: #c8c5d6 !important; font-weight: 500; text-decoration: none; }
.sx-login-skip:hover { color: #fff !important; text-decoration: underline; }
.sx-login-secondary {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 2.9rem; border-radius: 10px;
    border: 1px solid var(--l-field-border); background: var(--l-field); color: #e9e7f2; font-weight: 600;
}
.sx-login-secondary:hover { border-color: var(--l-violet-2); }
a.sx-login-secondary, a.sx-login-secondary:hover { color: #e9e7f2; text-decoration: none; }
.sx-login-secondary .sx-icon { width: 1.05rem; height: 1.05rem; }
.sx-login-or { display: flex; align-items: center; gap: 0.9rem; margin: 1.4rem 0; color: var(--l-muted); font-size: 0.82rem; }
.sx-login-or::before, .sx-login-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.sx-login-muted { color: var(--l-muted); }
.sx-login-qr { display: flex; align-items: center; gap: 1.25rem; margin: -0.6rem 0 1.8rem; padding: 1rem; border-radius: 12px; border: 1px solid var(--l-field-border); background: var(--l-field); }
.sx-login-qr img { flex: none; padding: 8px; border-radius: 8px; background: #fff; }
.sx-login-secret { display: block; margin-top: 0.4rem; padding: 0; background: none; color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; word-break: break-all; }
.sx-login-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: -0.6rem 0 1.25rem; }
.sx-login-codes code { padding: 0.6rem; border-radius: 8px; text-align: center; background: var(--l-field); border: 1px solid var(--l-field-border); color: #fff; font-size: 1rem; letter-spacing: 0.08em; }
@media (max-width: 480px) { .sx-login-qr { flex-direction: column; align-items: flex-start; } }

@media (max-width: 1100px) {
    .sx-login-features { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .sx-login-features li { padding: 0; border: 0; }
}
@media (max-width: 860px) {
    .sx-login { grid-template-columns: minmax(0, 1fr); }
    .sx-login-hero { display: none; }
    .sx-login-panel { background: rgba(12, 12, 17, 0.72); border-left: 0; padding: 2rem 1.25rem; }
    .sx-login-brand-small { display: flex; font-size: 1.35rem; margin-bottom: 2.5rem; }
    .sx-login-brand-small img { width: 40px; }
    .sx-login-form, .sx-login-foot { margin-left: auto; margin-right: auto; }
}

/* ---------- Theme picker (Account settings) ---------- */

.sx-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 9.5rem)); gap: 0.75rem; }
@media (max-width: 520px) { .sx-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-theme-option {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; text-align: left;
    background: var(--sx-card); border: 1px solid var(--sx-border-strong); border-radius: var(--sx-radius);
    color: var(--sx-text); font-size: 0.88rem; font-weight: 500; cursor: pointer;
}
.sx-theme-option:hover { border-color: var(--sx-accent-border); }
.sx-theme-option.selected { border-color: var(--sx-accent); box-shadow: 0 0 0 2px var(--bs-focus-ring-color); }
.sx-theme-option .label { display: flex; align-items: center; justify-content: space-between; padding: 0 0.2rem 0.1rem; }
.sx-theme-option .check { color: var(--sx-accent-text); display: inline-flex; }
/* Miniature app (sidebar, a card, an accent bar) drawn in each option's own colours. */
.sx-theme-preview { display: flex; height: 4.2rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--p-border); background: var(--p-bg); }
.sx-theme-preview .side { width: 28%; background: var(--p-side); border-right: 1px solid var(--p-border); padding: 0.4rem 0.3rem; }
.sx-theme-preview .side i { display: block; height: 4px; border-radius: 2px; background: var(--p-line); margin-bottom: 4px; }
.sx-theme-preview .side i:first-child { background: #7c4dd6; width: 70%; }
.sx-theme-preview .page { flex: 1; padding: 0.45rem; }
.sx-theme-preview .card-mini { height: 100%; border-radius: 4px; background: var(--p-card); border: 1px solid var(--p-border); padding: 0.35rem; }
.sx-theme-preview .card-mini i { display: block; height: 4px; border-radius: 2px; background: var(--p-line); margin-bottom: 5px; width: 80%; }
.sx-theme-preview .card-mini i:first-child { width: 45%; background: var(--p-head); }
.sx-theme-preview .card-mini b { display: block; height: 6px; width: 35%; border-radius: 3px; background: #7c4dd6; margin-top: 8px; }
.sx-theme-preview.light { --p-bg: #f6f6f9; --p-side: #ffffff; --p-card: #ffffff; --p-border: #e6e4ee; --p-line: #e3e1ea; --p-head: #13111d; }
.sx-theme-preview.dark { --p-bg: #111216; --p-side: #15161b; --p-card: #1a1b21; --p-border: #2c2d36; --p-line: #33343e; --p-head: #f5f5f8; }
.sx-theme-preview.black { --p-bg: #000000; --p-side: #000000; --p-card: #0c0c0f; --p-border: #23232a; --p-line: #26262d; --p-head: #ffffff; }

/* ---------- Website journey (ADR-014) ---------- */

.sx-modal.xwide { max-width: 72rem; }
.sx-modal.xwide .sx-modal-body { padding: 1.35rem 1.5rem; }

/* Journey stepper: done (tick), current (violet ring), still to come. */
.sx-stepper { list-style: none; display: flex; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.sx-step-item { position: relative; flex: 1 0 5.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; min-width: 5.6rem; }
.sx-step-item::before { content: ""; position: absolute; top: 0.85rem; right: 50%; width: 100%; height: 2px; background: var(--sx-track); z-index: 0; }
.sx-step-item:first-child::before { display: none; }
.sx-step-item.done::before, .sx-step-item.current::before { background: var(--sx-accent); }
.sx-step-dot {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--sx-card); border: 2px solid var(--sx-border-strong); color: var(--sx-faint); font-size: 0.75rem; font-weight: 700;
}
.sx-step-dot .sx-icon { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
.sx-step-item.done .sx-step-dot { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-step-item.current .sx-step-dot { border-color: var(--sx-accent); color: var(--sx-accent-text); background: var(--sx-accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-accent) 14%, transparent); }
.sx-step-label { font-size: 0.76rem; line-height: 1.2; color: var(--sx-muted); padding: 0 0.2rem; }
.sx-step-item.done .sx-step-label { color: var(--sx-text); }
.sx-step-item.current .sx-step-label { color: var(--sx-accent-text); font-weight: 600; }
.sx-stepper.compact .sx-step-item { flex-basis: 2rem; min-width: 2rem; }
.sx-stepper.compact .sx-step-label { display: none; }
.sx-stepper.compact .sx-step-dot { width: 1.15rem; height: 1.15rem; font-size: 0; border-width: 2px; }
.sx-stepper.compact .sx-step-dot .sx-icon { width: 0.65rem; height: 0.65rem; }
.sx-stepper.compact .sx-step-item::before { top: 0.55rem; }
.sx-stepper.compact .sx-step-item.current .sx-step-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 16%, transparent); }

/* Stage pills (projects list, client page). */
.sx-stage-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap;
    --sx-tag: var(--sx-purple); background: color-mix(in srgb, var(--sx-tag) 12%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 80%, var(--sx-mix-ink));
}
.sx-stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-tag); }
.sx-stage-pill.quote { --sx-tag: var(--sx-blue); }
.sx-stage-pill.awaiting_approval, .sx-stage-pill.awaiting_deposit { --sx-tag: var(--sx-orange); }
.sx-stage-pill.setup { --sx-tag: var(--sx-teal); }
.sx-stage-pill.design, .sx-stage-pill.build { --sx-tag: var(--sx-purple); }
.sx-stage-pill.review { --sx-tag: var(--sx-pink); }
.sx-stage-pill.launch, .sx-stage-pill.live { --sx-tag: var(--sx-green); }

/* Tabs on the project page and the client dashboard. */
.sx-tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--sx-border); scrollbar-width: none; }
.sx-tabs button {
    display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: none; color: var(--sx-muted); white-space: nowrap;
    padding: 0.6rem 0.85rem; font-size: 0.9rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sx-tabs button:hover { color: var(--sx-heading); }
.sx-tabs button.active { color: var(--sx-accent-text); border-bottom-color: var(--sx-accent); }
.sx-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--sx-pink); color: #fff; font-size: 0.75rem; font-weight: 700; }

/* Project page header. */
.sx-project-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 1.1rem; align-items: center; }
.sx-project-head h1 { font-size: 1.55rem; }
.sx-project-head .sx-client-mark .sx-icon { width: 1.5rem; height: 1.5rem; }
.sx-project-stepper { grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--sx-border); }
@media (max-width: 860px) {
    .sx-project-head { grid-template-columns: auto minmax(0, 1fr); }
    .sx-project-head .sx-client-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.sx-mini-facts { display: flex; flex-direction: column; gap: 0.5rem; }
.sx-mini-facts > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.sx-mini-facts span { color: var(--sx-muted); }
.sx-delete-confirm { display: flex; gap: 0.9rem; align-items: flex-start; }
.sx-delete-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-stage-options { display: flex; flex-direction: column; gap: 0.4rem; }

/* The "Now" card with the current stage's actions. */
.sx-stage-card { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); box-shadow: 0 1px 2px var(--sx-shadow); overflow: hidden; }
.sx-stage-card-head {
    display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.35rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--sx-accent-soft) 85%, var(--sx-card)), var(--sx-card) 70%);
    border-bottom: 1px solid var(--sx-border);
}
.sx-stage-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff; font-family: var(--sx-heading-font); font-weight: 800; font-size: 1.15rem;
}
.sx-stage-title { font-family: var(--sx-heading-font); font-size: 1.3rem; font-weight: 700; color: var(--sx-heading); margin: 0 0 0.2rem; }
.sx-stage-card-body { padding: 1.25rem 1.35rem; }
.sx-stage-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .sx-stage-split { grid-template-columns: minmax(0, 1fr); } }
.sx-stage-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--sx-border); }
.sx-stage-cta > .small { flex: 1 1 16rem; }
.sx-big-total { font-family: var(--sx-heading-font); font-size: 1.8rem; font-weight: 800; color: var(--sx-heading); line-height: 1.1; letter-spacing: -0.01em; }
.sx-bank { margin-left: auto; padding: 0.75rem 1rem; border-radius: 8px; background: var(--sx-card); border: 1px dashed var(--sx-border-strong); font-size: 0.9rem; }
.sx-check-result { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid; }
.sx-check-result > .sx-icon { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; }
.sx-check-result.ready { background: var(--sx-success-soft); border-color: var(--sx-success-border); color: var(--sx-success-text); }
.sx-check-result.missing { background: var(--sx-warning-soft); border-color: var(--sx-warning-border); color: var(--sx-warning-ink); }
.sx-check-result.waiting { background: var(--sx-card-raised); border-color: var(--sx-border); color: var(--sx-text); }
.sx-check-result p { color: var(--sx-text); }
.sx-checklist { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.4rem; }
.sx-checklist li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; }
.sx-checklist li > .sx-icon { flex: none; margin-top: 0.2rem; width: 1rem; height: 1rem; padding: 2px; border-radius: 50%; stroke-width: 3; }
.sx-checklist li.ok > .sx-icon { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-checklist li.no > .sx-icon { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-prompt-box { position: relative; border: 1px solid var(--sx-border); border-radius: 10px; background: var(--sx-card-raised); }
.sx-prompt-box pre {
    margin: 0; padding: 0.9rem 2.6rem 0.9rem 1rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; font-size: 0.82rem; color: var(--sx-text);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.sx-prompt-box.tall pre { max-height: 32rem; }
.sx-prompt-box > .sx-copy-button { position: absolute; top: 0.45rem; right: 0.45rem; background: var(--sx-card); border: 1px solid var(--sx-border); }
/* Build step: the hand-off to the client, set apart from the build itself. */
.sx-part-num { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-right: 0.3rem; border-radius: 50%; background: var(--sx-accent-soft); color: var(--sx-accent-text); font-size: 0.75rem; letter-spacing: 0; vertical-align: 0.05em; }
.sx-handoff { margin-top: 1.5rem; padding: 1.15rem 1.25rem; border-radius: var(--sx-radius-section, 12px); border: 1px solid var(--sx-accent-border); background: linear-gradient(135deg, color-mix(in srgb, var(--sx-accent) 9%, var(--sx-card)), var(--sx-card) 65%); }
.sx-handoff-head { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1rem; }
.sx-handoff-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--sx-heading); margin: 0 0 0.25rem; }
.sx-handoff-head p { font-size: 0.88rem; color: var(--sx-muted); margin: 0; max-width: 46rem; }
.sx-handoff-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: linear-gradient(135deg, var(--sx-accent), #c04fd8); color: #fff; }
.sx-handoff-icon .sx-icon { width: 1.25rem; height: 1.25rem; }
.sx-handoff-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 0.85rem; }
.sx-review-status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
@media (max-width: 700px) { .sx-review-status { grid-template-columns: minmax(0, 1fr); } }
.sx-launch-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.sx-launch-list label { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0.6rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.sx-launch-list label:hover { background: var(--sx-hover); }
.sx-launch-list label .form-check-input { margin-top: 0.15rem; flex: none; }
.sx-launch-list label.done span { color: var(--sx-muted); text-decoration: line-through; }
.sx-live { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--sx-radius-section); background: linear-gradient(120deg, var(--sx-success-soft), var(--sx-card)); border: 1px solid var(--sx-success-border); }
.sx-live-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sx-green); color: #fff; flex: none; }
.sx-live-icon .sx-icon { width: 1.5rem; height: 1.5rem; }

/* Segmented control (two to five options). */
.sx-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--sx-hover); border: 1px solid var(--sx-border); }
.sx-segmented button { flex: 1; border: 0; background: none; padding: 0.35rem 0.85rem; border-radius: 7px; font-size: 0.86rem; font-weight: 500; color: var(--sx-muted); white-space: nowrap; }
.sx-segmented button:hover:not(:disabled) { color: var(--sx-heading); }
.sx-segmented button.on { background: var(--sx-card); color: var(--sx-accent-text); box-shadow: 0 1px 3px var(--sx-shadow-strong); }
.sx-segmented button:disabled { cursor: default; }

/* New-project wizard. */
.sx-wizard-steps { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1.35rem; flex-wrap: wrap; }
.sx-wizard-steps li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--sx-faint); font-size: 0.88rem; font-weight: 500; }
.sx-wizard-steps li + li::before { content: ""; width: 2rem; height: 1px; background: var(--sx-border-strong); margin-right: 0.25rem; }
.sx-wizard-steps .dot {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    border: 1.5px solid var(--sx-border-strong); font-size: 0.75rem; font-weight: 700;
}
.sx-wizard-steps .dot .sx-icon { width: 0.8rem; height: 0.8rem; stroke-width: 3; }
.sx-wizard-steps li.current { color: var(--sx-heading); }
.sx-wizard-steps li.current .dot { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-wizard-steps li.done { color: var(--sx-text); }
.sx-wizard-steps li.done .dot { background: var(--sx-accent-soft); border-color: var(--sx-accent-border); color: var(--sx-accent-text); }
.sx-wizard-note {
    display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 10px;
    background: var(--sx-warning-soft); border: 1px solid var(--sx-warning-border); color: var(--sx-warning-ink); font-size: 0.88rem;
}
.sx-wizard-note > .sx-icon { flex: none; margin-top: 0.15rem; }
/* New project › Client: search and client cards. */
.sx-picker-toolbar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.85rem; }
.sx-picker-search { width: min(22rem, 100%); }
.sx-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.6rem; max-height: 15.6rem; overflow-y: auto; padding: 2px; }
.sx-pick-card {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: var(--sx-radius-section); text-align: left;
    border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sx-pick-card:hover { border-color: var(--sx-accent-border); box-shadow: 0 6px 16px -12px rgba(124, 77, 214, 0.5); }
.sx-pick-card.selected { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 70%, var(--sx-card)); }
.sx-pick-card:focus { outline: none; }
.sx-pick-card:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-pick-meta { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--sx-faint); }
.sx-pick-meta.busy { color: var(--sx-success-text); }
.sx-pick-meta.busy::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-green); }
.sx-newclient-quick { padding: 1rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border); background: color-mix(in srgb, var(--sx-accent-soft) 45%, var(--sx-card)); }
/* New project › Project setup: the name first. */
.sx-project-name { margin-bottom: 1.4rem; }
.sx-project-name .form-control { font-size: 1rem; font-weight: 600; padding: 0.6rem 0.85rem; }
/* New project › Service: grouped cards. */
.sx-svc-group { display: flex; align-items: center; gap: 0.55rem; margin: 1.25rem 0 0.6rem; font-size: 0.92rem; color: var(--sx-heading); }
.sx-svc-group:first-of-type { margin-top: 0; }
.sx-svc-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-svc-group-icon .sx-icon { width: 1rem; height: 1rem; }
.sx-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.sx-svc-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.2rem; min-height: 3.4rem; padding: 0.85rem 2.4rem 0.85rem 1rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sx-svc-card:hover { border-color: var(--sx-accent-border); box-shadow: 0 8px 18px -14px rgba(124, 77, 214, 0.6); transform: translateY(-1px); }
.sx-svc-card:focus { outline: none; }
.sx-svc-card:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-svc-name { font-weight: 600; color: var(--sx-heading); }
.sx-svc-check {
    position: absolute; top: 50%; right: 0.85rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
    border-radius: 50%; border: 1.5px solid var(--sx-border-strong); color: transparent;
}
.sx-svc-check .sx-icon { width: 0.75rem; height: 0.75rem; stroke-width: 3.5; }
.sx-svc-card.selected { border-color: var(--sx-focus-border); background: linear-gradient(135deg, color-mix(in srgb, var(--sx-accent-soft) 85%, var(--sx-card)), var(--sx-card)); }
.sx-svc-card.selected .sx-svc-name { color: var(--sx-accent-text); }
.sx-svc-card.selected .sx-svc-check { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
/* New project › Service: who it's for. */
@media (max-width: 560px) { .sx-picker-toolbar { flex-wrap: wrap; } .sx-picker-search { width: 100%; order: 3; } }
/* Every step of the new-project popup has the same height (it scrolls inside), so the popup keeps its size. */
.sx-wizard-body { height: min(36rem, calc(100vh - 20rem)); min-height: 22rem; overflow-y: auto; overflow-x: hidden; margin: 0 -0.5rem; padding: 0.15rem 0.5rem; }
.sx-theme-switch button { padding: 0.25rem 0.8rem; font-size: 0.82rem; }

/* Quote viewer: the email framed like an email app, on a canvas, as on a computer or a phone. */
.sx-viewer { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0.6rem; }
.sx-viewer-toolbar { display: flex; align-items: center; gap: 0.5rem; }
.sx-viewer-toolbar .sx-segmented button { display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-viewer-toolbar .sx-segmented .sx-icon { width: 0.9rem; height: 0.9rem; }
.sx-viewer-mail {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card);
    box-shadow: 0 18px 40px -28px rgba(19, 17, 29, 0.45);
}
.sx-viewer-meta { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-viewer-from-mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: #15121f; color: #fff; font-weight: 700; font-size: 0.8rem;
}
.sx-viewer-from-mark img { width: 1.35rem; height: auto; }
.sx-viewer-subject { font-weight: 700; color: var(--sx-heading); font-size: 0.95rem; }
.sx-viewer-from { font-size: 0.8rem; color: var(--sx-muted); }
.sx-viewer-from strong { color: var(--sx-text); font-weight: 600; }
.sx-viewer-time { font-size: 0.75rem; color: var(--sx-faint); flex: none; }
.sx-viewer-canvas {
    flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden;
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sx-border-strong) 70%, transparent) 1px, transparent 0) 0 0 / 14px 14px, #f4f2f9;
}
.sx-viewer.dark .sx-viewer-canvas { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0) 0 0 / 14px 14px, #07070a; }
.sx-viewer-device { flex: 1; display: flex; min-height: 0; width: 100%; }
.sx-viewer-device iframe { flex: 1; width: 100%; height: 100%; border: 0; background: transparent; }
/* Phone: the email at phone width inside a device frame. */
.sx-viewer-canvas.phone { align-items: flex-start; padding: 1.1rem 0; overflow-y: auto; }
.sx-viewer-canvas.phone .sx-viewer-device {
    flex: none; width: 390px; max-width: calc(100% - 2rem); height: 100%; min-height: 26rem; padding: 10px; border-radius: 38px;
    background: #16151c; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sx-viewer-canvas.phone iframe { border-radius: 28px; background: #fff; }
.sx-viewer.dark .sx-viewer-canvas.phone iframe { background: #07070a; }
.sx-viewer-tall { height: min(72vh, 52rem); }

/* Quote builder. */
.sx-quote-builder { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
@media (max-width: 980px) { .sx-quote-builder { grid-template-columns: minmax(0, 1fr); } }
.sx-quote-form { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.sx-qb-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-muted); margin: 0 0 0.6rem; font-family: var(--bs-body-font-family); }
.sx-number-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--sx-border-strong); border-radius: 9px; overflow: hidden; background: var(--sx-input); }
.sx-number-stepper button { border: 0; background: var(--sx-hover); width: 2.4rem; font-size: 1.1rem; color: var(--sx-text); }
.sx-number-stepper button:hover:not(:disabled) { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-number-stepper button:disabled { opacity: 0.4; }
.sx-number-stepper input {
    width: 4rem; border: 0; text-align: center; font-weight: 700; font-size: 1.05rem; background: transparent; color: var(--sx-heading);
    -moz-appearance: textfield; appearance: textfield;
}
.sx-number-stepper input::-webkit-inner-spin-button, .sx-number-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sx-number-stepper input:focus { outline: none; }
.sx-page-counter { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px dashed var(--sx-border-strong); }
@media (max-width: 560px) { .sx-page-counter { flex-direction: column; } }
.sx-qb-items { display: grid; gap: 0.45rem; }
.sx-qb-item { border: 1px solid var(--sx-border); border-radius: 10px; background: var(--sx-card); transition: border-color 0.15s, background 0.15s; }
.sx-qb-item:hover { border-color: var(--sx-accent-border); }
.sx-qb-item.on { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 55%, var(--sx-card)); }
.sx-qb-toggle { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 0.85rem; border: 0; background: none; color: var(--sx-text); text-align: left; }
.sx-qb-toggle .tick {
    display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 5px;
    border: 1.5px solid var(--sx-border-strong); background: var(--sx-input); color: #fff;
}
.sx-qb-toggle .tick .sx-icon { width: 0.75rem; height: 0.75rem; stroke-width: 3.5; }
.sx-qb-item.on .tick { background: var(--sx-accent); border-color: var(--sx-accent); }
.sx-qb-item-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0 0.85rem 0.7rem 2.75rem; }
.sx-qb-item-options label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.sx-qb-item-options input { width: 4.5rem; }
.sx-qb-custom { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 9rem auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.sx-quote-summary { position: sticky; top: 0; }
.sx-quote-summary-card {
    padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sx-accent-soft) 45%, var(--sx-card)), var(--sx-card) 8rem);
}
.sx-qs-lines { list-style: none; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.45rem; font-size: 0.86rem; }
.sx-qs-lines li { display: flex; justify-content: space-between; gap: 0.75rem; }
.sx-qs-lines li span { color: var(--sx-text); min-width: 0; overflow-wrap: anywhere; }
.sx-qs-lines strong { white-space: nowrap; font-weight: 600; color: var(--sx-heading); }
.sx-qs-lines small { color: var(--sx-muted); font-weight: 500; }
.sx-qs-totals { border-top: 1px solid var(--sx-border); padding-top: 0.75rem; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.sx-qs-totals > div { display: flex; justify-content: space-between; color: var(--sx-muted); }
.sx-qs-totals .grand { color: var(--sx-heading); font-family: var(--sx-heading-font); font-weight: 800; font-size: 1.35rem; margin-top: 0.25rem; }
.sx-qs-totals .deposit { margin-top: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--sx-accent-soft); color: var(--sx-accent-text); font-weight: 600; }
.sx-qs-totals .recurring { color: var(--sx-text); }

/* Quote builder sections: numbered cards. */
.sx-qb-section { padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-qb-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.sx-qb-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.sx-qb-head p { margin: 0.1rem 0 0; color: var(--sx-muted); font-size: 0.84rem; }
.sx-qb-num {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); font-weight: 700; font-size: 0.8rem;
}
.sx-qb-breakdown { margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); font-size: 0.88rem; }
.sx-qb-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.sx-qb-breakdown > div.muted { color: var(--sx-faint); }
.sx-qb-breakdown strong { white-space: nowrap; color: var(--sx-heading); font-weight: 600; }
.sx-qb-breakdown > div.muted strong { color: var(--sx-faint); font-weight: 500; }
.sx-qb-search { margin-bottom: 0.4rem; }
.sx-qb-amounts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-top: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--sx-heading); }
.sx-qb-amounts .text-muted { font-weight: 500; }
.sx-qb-amounts > span + span { position: relative; }
.sx-qb-amounts > span + span::before { content: "·"; position: absolute; left: -0.6rem; color: var(--sx-faint); }
.sx-qb-category {
    display: flex; align-items: center; gap: 0.45rem; width: 100%; margin: 0.7rem 0 0.45rem; padding: 0.25rem 0; border: 0; background: none;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sx-muted); text-align: left;
}
.sx-qb-category:hover { color: var(--sx-heading); }
.sx-qb-category .sx-icon { width: 0.85rem; height: 0.85rem; transition: transform 0.15s; }
.sx-qb-category.open .sx-icon { transform: rotate(90deg); }
.sx-qb-category-count { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sx-faint); }
/* Pages: the full column and the same height as the dropdown beside it. */
.sx-number-stepper.wide { display: flex; width: 100%; height: var(--sx-control-h); }
.sx-number-stepper.wide input { flex: 1; width: auto; }
.sx-number-stepper.wide button { width: 3rem; }
.sx-number-stepper.small button { width: 1.9rem; font-size: 0.95rem; }
/* An extra's quantity and billing: the same height and width side by side. */
.sx-qb-item-options .sx-number-stepper, .sx-qb-item-options .sx-select { width: 9.5rem; height: 36px; }
.sx-qb-item-options .sx-number-stepper input { flex: 1; width: auto; }
.sx-qb-item-options .sx-select:not(.block) .sx-select-button { min-height: 36px; height: 36px; min-width: 0; width: 9.5rem; }
.sx-number-stepper.small input { width: 2.6rem; font-size: 0.9rem; }
.sx-qb-item-options { padding: 0 0.85rem 0.75rem 2.75rem; gap: 0.6rem; }
.sx-qb-custom { grid-template-columns: minmax(0, 1fr) 10rem 9rem 2rem; }
.sx-qb-custom-head { margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-qb-add {
    display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; justify-content: center; padding: 0.6rem; margin-top: 0.25rem;
    border-radius: 10px; border: 1px dashed var(--sx-border-strong); background: transparent; color: var(--sx-accent-text); font-weight: 600; font-size: 0.88rem;
}
.sx-qb-add:hover { border-color: var(--sx-accent-border); background: var(--sx-accent-soft); }
@media (max-width: 640px) { .sx-qb-custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sx-qb-custom-head { display: none; } }
/* Summary. */
.sx-qs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.sx-qs-updating { font-size: 0.78rem; color: var(--sx-accent-text); }
.sx-qs-group { margin: 0.6rem 0 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); }
.sx-qs-group:first-of-type { margin-top: 0; }
.sx-quote-form { gap: 1rem; }

/* Quotes on a project. */
.sx-quotes { display: grid; gap: 0.6rem; }
.sx-quote-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-quote-row.superseded, .sx-quote-row.declined { opacity: 0.65; }
.sx-quote-row.approved { border-color: var(--sx-success-border); background: var(--sx-success-soft); }
.sx-quote-number { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 6rem; }
.sx-quote-status { padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-quote-status.sent { background: color-mix(in srgb, var(--sx-blue) 14%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-blue) 80%, var(--sx-mix-ink)); }
.sx-quote-status.approved { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-quote-status.declined { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-quote-total { font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.1rem; color: var(--sx-heading); }
.sx-quote-total small { font-family: var(--bs-body-font-family); font-weight: 500; font-size: 0.8rem; }
.sx-quote-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }

/* Client login card. */
.sx-login-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.88rem; align-items: center; }
.sx-login-details dt { font-weight: 500; color: var(--sx-muted); }
.sx-login-details dd { margin: 0; display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.sx-login-details code { padding: 0.1rem 0.4rem; border-radius: 5px; background: var(--sx-hover); color: var(--sx-heading); font-size: 0.86rem; }
.sx-copy-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7rem; height: 1.7rem; padding: 0;
    border: 1px solid transparent; border-radius: 6px; background: none; color: var(--sx-muted); transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sx-copy-btn:hover { color: var(--sx-accent-text); background: var(--sx-hover); border-color: var(--sx-border); }
.sx-copy-btn .sx-icon { width: 0.9rem; height: 0.9rem; }
.sx-copy-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 6px; background: none; color: var(--sx-muted); }
.sx-copy-button:hover { background: var(--sx-hover); color: var(--sx-accent-text); }
.sx-copy-button.copied { color: var(--sx-green); }
.sx-copy-button .sx-icon { width: 0.95rem; height: 0.95rem; }

/* Files. */
.sx-upload { padding: 0.85rem; border-radius: 10px; border: 1px dashed var(--sx-border-strong); background: var(--sx-card-raised); }
.sx-upload-button { cursor: pointer; }
.sx-file-group { display: flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-muted); }
.sx-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.5rem; }
.sx-file { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card); min-width: 0; }
.sx-file a { color: var(--sx-text); }
.sx-file a:hover { color: var(--sx-accent-text); text-decoration: none; }
.sx-file-thumb { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: none; border-radius: 8px; overflow: hidden; background: var(--sx-hover); border: 1px solid var(--sx-border); }
.sx-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sx-file-ext { font-size: 0.75rem; font-weight: 800; color: var(--sx-accent-text); letter-spacing: 0.04em; }
.sx-file .small .sx-icon { width: 0.85rem; height: 0.85rem; vertical-align: -0.12em; }

/* Project setup form. */
.sx-setup { display: flex; flex-direction: column; gap: 1.5rem; }
.sx-setup-section { padding-bottom: 1.5rem; border-bottom: 1px solid var(--sx-border); }
.sx-setup-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.sx-setup-head { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.9rem; }
.sx-setup-head h3 { font-size: 1.02rem; margin: 0; }
.sx-setup-head p { margin: 0.1rem 0 0; color: var(--sx-muted); font-size: 0.86rem; }
.sx-setup-num { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; background: var(--sx-accent-soft); color: var(--sx-accent-text); font-weight: 700; font-size: 0.82rem; }
.sx-page-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sx-page-chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.35rem 0.25rem 0.7rem; border-radius: 999px;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); border: 1px solid var(--sx-accent-border); font-size: 0.86rem; font-weight: 500;
}
.sx-page-chip button { display: inline-flex; border: 0; background: none; color: inherit; padding: 0.1rem; border-radius: 50%; opacity: 0.6; }
.sx-page-chip button:hover { opacity: 1; background: color-mix(in srgb, var(--sx-accent) 15%, transparent); }
.sx-page-chip .sx-icon { width: 0.8rem; height: 0.8rem; }
.sx-page-add { width: 14rem; border-radius: 999px; }
.sx-provide-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--sx-border); }
.sx-setup-save {
    position: sticky; bottom: 0.75rem; display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: color-mix(in srgb, var(--sx-card) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px -12px rgba(19, 17, 29, 0.25);
}
.sx-setup-save .alert { margin: 0 auto 0 0; }

/* Login details. */
.sx-credential { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--sx-border); }
.sx-credential:first-child { padding-top: 0; }
.sx-credential-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; border-radius: 8px; background: var(--sx-hover); color: var(--sx-muted); }
.sx-credential-fields { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.86rem; margin-top: 0.2rem; }
.sx-credential-fields > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-credential-fields code { color: var(--sx-heading); }
.sx-credential-form { margin-top: 0.75rem; padding: 0.85rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); }

/* Chat. */
.sx-chat { display: flex; flex-direction: column; gap: 1rem; }
.sx-chat-messages { display: flex; flex-direction: column; gap: 0.9rem; max-height: 60vh; overflow-y: auto; padding: 0.25rem; }
.sx-chat-empty { text-align: center; color: var(--sx-muted); padding: 2rem 1rem; }
.sx-chat-message { display: flex; gap: 0.6rem; align-items: flex-end; max-width: 46rem; }
.sx-chat-message.mine { flex-direction: row-reverse; margin-left: auto; }
.sx-chat-bubble { padding: 0.6rem 0.85rem; border-radius: 14px 14px 14px 4px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); min-width: 0; }
.sx-chat-message.mine .sx-chat-bubble { border-radius: 14px 14px 4px 14px; background: var(--sx-accent-soft); border-color: var(--sx-accent-border); }
.sx-chat-meta { font-size: 0.76rem; color: var(--sx-muted); margin-bottom: 0.15rem; }
.sx-chat-meta strong { color: var(--sx-heading); font-weight: 600; }
.sx-chat-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sx-text); }
.sx-chat-file { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.86rem; }
.sx-chat-compose { padding-top: 0.9rem; border-top: 1px solid var(--sx-border); }
.sx-chat-compose .alert { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* Settings › AI and Pricing. */
.sx-model-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.sx-model-chips .sx-service-chip { font-size: 0.8rem; padding: 0.2rem 0.65rem; }
.sx-ai-tasks summary { cursor: pointer; color: var(--sx-accent-text); font-weight: 500; font-size: 0.9rem; }
.sx-ai-task-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 11rem; gap: 0.6rem 0.75rem; align-items: center; margin-top: 0.75rem; }
@media (max-width: 760px) { .sx-ai-task-grid { grid-template-columns: minmax(0, 1fr); } }
/* Settings › Services and pricing: groups and services on the left, the chosen one on the right. */
/* A compact settings menu here, so the editor gets the room. */
.sx-settings:has(.sx-svc-editor) { max-width: 96rem; grid-template-columns: 13rem minmax(0, 1fr); }
.sx-settings:has(.sx-svc-editor) .sx-settings-nav .hint { display: none; }
@media (max-width: 900px) { .sx-settings:has(.sx-svc-editor) { grid-template-columns: minmax(0, 1fr); } }
.sx-svc-editor { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .sx-svc-editor { grid-template-columns: minmax(0, 1fr); } }
/* One spacing step (0.75rem inside the list, 1rem between blocks) throughout. */
.sx-svc-nav {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card);
}
.sx-svc-nav-group, .sx-svc-nav-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.4rem 0.75rem; border: 0; border-radius: 8px;
    background: none; color: var(--sx-text); text-align: left; transition: background 0.12s, color 0.12s;
}
.sx-svc-nav-group { font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); }
.sx-svc-nav-group:not(:first-child):not(.sx-svc-nav-actions + .sx-svc-nav-group) { margin-top: 0.75rem; }
.sx-svc-nav-group.static { cursor: default; }
.sx-svc-nav-item { padding-left: 3.25rem; font-size: 0.88rem; }
.sx-svc-nav-group:not(.static):hover, .sx-svc-nav-item:hover { background: var(--sx-hover); }
.sx-svc-nav-group.selected, .sx-svc-nav-item.selected { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-svc-nav-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 7px;
    background: var(--sx-accent-soft); color: var(--sx-accent-text);
}
.sx-svc-nav-icon .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-svc-nav-count { font-size: 0.75rem; font-weight: 600; color: var(--sx-faint); }
.sx-svc-nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--sx-border); }
.sx-svc-nav-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 0; height: 2.25rem; padding: 0 0.5rem; white-space: nowrap; }
.sx-svc-nav-actions .btn .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-svc-pane { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sx-svc-pane > .sx-card { margin: 0; }
.sx-svc-pane .sx-card-header { margin-bottom: 1rem; }
.sx-svc-pane-head { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-svc-pane-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 12px;
    background: linear-gradient(135deg, var(--sx-accent-soft), transparent); border: 1px solid var(--sx-accent-border); color: var(--sx-accent-text);
}
.sx-svc-pane-icon .sx-icon { width: 1.3rem; height: 1.3rem; }
.sx-svc-pane-title { margin: 0.1rem 0 0.15rem; font-size: 1.35rem; }
.sx-svc-message {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9rem;
    background: var(--sx-success-soft); color: var(--sx-success-text);
}
.sx-svc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--sx-danger-soft); }
.sx-price-cat { margin: 1rem 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); }
.sx-card-header + .sx-price-cat { margin-top: 0; }
.sx-price-list { display: flex; flex-direction: column; border: 1px solid var(--sx-border); border-radius: 10px; overflow: hidden; }
.sx-price-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--sx-card); }
.sx-price-row + .sx-price-row { border-top: 1px solid var(--sx-border); }
.sx-price-row:hover { background: var(--sx-row-hover); }
.sx-price-row.archived { opacity: 0.65; }
.sx-toggle { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0; font-weight: 500; cursor: pointer; }
.sx-toggle.form-switch .form-check-input, .sx-offer-row.form-switch .form-check-input { flex: none; width: 2.3rem; height: 1.25rem; margin: 0; float: none; cursor: pointer; }
.sx-offer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 760px) { .sx-offer-list { grid-template-columns: minmax(0, 1fr); } }
.sx-offer-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--sx-border);
    background: var(--sx-card); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.sx-offer-row.form-switch { padding-left: 1rem; }
.sx-offer-row:not(.on) { opacity: 0.6; }
.sx-offer-row.on { border-color: var(--sx-accent-border); background: color-mix(in srgb, var(--sx-accent) 6%, var(--sx-card)); }
/* Price per billing option (PriceOptionsEditor). */
.sx-price-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .sx-price-options { grid-template-columns: minmax(0, 1fr); } }
.sx-price-option .form-label { margin-bottom: 0.4rem; }
.sx-price-option:not(.on) .sx-money > input { border-style: dashed; }
.sx-price-option.default .sx-money > input { border-color: var(--sx-accent-border); box-shadow: 0 0 0 1px var(--sx-accent-border); }
.sx-price-default { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--sx-muted); cursor: pointer; }
.sx-price-default input { accent-color: var(--sx-accent); margin: 0; }
.sx-price-default.disabled { opacity: 0.45; cursor: default; }
.sx-qb-billing { margin-top: 1rem; }
.sx-qb-billing-amount { margin-left: 0.3rem; font-weight: 600; color: var(--sx-heading); }
.sx-kind { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: 1px; background: var(--sx-hover); color: var(--sx-muted); }
.sx-kind.plugin { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
/* Inputs with a unit after the value (%, days). */
.sx-unit-input { position: relative; }
.sx-unit-input > span { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--sx-faint); font-size: 0.85rem; pointer-events: none; }
.sx-unit-input > input { padding-right: 3rem; }
/* A unit in front ("R") as well as after ("/ hour"). */
.sx-unit-input > span.pre { left: 0.8rem; right: auto; }
.sx-unit-input:has(> .pre) > input { padding-left: 1.9rem; padding-right: 3.9rem; }
/* Settings › Quotes and company › Quote design: two tiles with a tiny quote drawn in each design. */
.sx-quote-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); gap: 0.75rem; }
.sx-quote-theme { display: flex; flex-direction: column; padding: 0.6rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border-strong); background: var(--sx-card); color: var(--sx-text); text-align: left; }
.sx-quote-theme:hover { border-color: var(--sx-accent-border); }
.sx-quote-theme.selected { border-color: var(--sx-focus-border); background: color-mix(in srgb, var(--sx-accent-soft) 60%, var(--sx-card)); }
.sx-quote-theme-art { display: flex; flex-direction: column; gap: 5px; height: 6.5rem; padding: 0 0 8px; border-radius: 8px; overflow: hidden; border: 1px solid var(--sx-border); }
.sx-quote-theme-art i { display: block; margin: 0 10px; border-radius: 3px; }
.sx-quote-theme-art .head { margin: 0 0 4px; height: 2.4rem; border-radius: 0; }
.sx-quote-theme-art .line { height: 5px; width: 70%; }
.sx-quote-theme-art .line.short { width: 45%; }
.sx-quote-theme-art .cards { display: flex; gap: 6px; height: 1.4rem; background: none; }
.sx-quote-theme-art .cards b { flex: 1; border-radius: 4px; }
.sx-quote-theme-art.light { background: #ffffff; }
.sx-quote-theme-art.light .head { background: linear-gradient(135deg, #15121f, #2a1b4d 55%, #5b2fb3); }
.sx-quote-theme-art.light .line { background: #e6e2f0; }
.sx-quote-theme-art.light .cards b:first-child { background: #f3eefd; border: 1px solid #e2d7fa; }
.sx-quote-theme-art.light .cards b:last-child { background: #ebf7f0; border: 1px solid #cbe9d7; }
.sx-quote-theme-art.dark { background: #111016; border-color: #24222d; }
.sx-quote-theme-art.dark .head { background: url("img/login-bg.png") center / cover, #0b0a10; }
.sx-quote-theme-art.dark .line { background: #2a2833; }
.sx-quote-theme-art.dark .cards b:first-child { background: #1d1730; border: 1px solid #3a2d63; }
.sx-quote-theme-art.dark .cards b:last-child { background: #11241a; border: 1px solid #1f4a33; }
.sx-quote-theme-radio { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--sx-border-strong); color: #fff; }
.sx-quote-theme-radio .sx-icon { width: 0.7rem; height: 0.7rem; stroke-width: 3.5; }
.sx-quote-theme.selected .sx-quote-theme-radio { background: var(--sx-accent); border-color: var(--sx-accent); }
@media (max-width: 560px) { .sx-quote-themes { grid-template-columns: minmax(0, 1fr); } }
/* Money inputs with an "R" in front. */
.sx-money { position: relative; display: block; }
.sx-money > span { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--sx-faint); font-size: 0.85rem; pointer-events: none; }
.sx-money > input { padding-left: 1.75rem; }

/* A quote laid out for the client dashboard. */
/* The initial payment and its breakdown (InitialPayment). An amount still to pay, so the app's violet accent, not
   green (which reads as "paid"). */
.sx-initial-payment { padding: 1.1rem 1.25rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border); background: var(--sx-card-raised); }
.sx-initial-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.sx-initial-head .sx-big-total { color: var(--sx-accent-text); }
.sx-initial-items { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--sx-border); }
.sx-initial-items li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--sx-border); font-size: 0.92rem; }
.sx-initial-items strong { white-space: nowrap; color: var(--sx-heading); }
.sx-initial-kind { flex: none; min-width: 6.2rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-align: center; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-initial-kind.monthly { background: color-mix(in srgb, var(--sx-pink) 14%, transparent); color: var(--sx-pink); }
.sx-initial-kind.annually { background: color-mix(in srgb, var(--sx-blue) 14%, transparent); color: var(--sx-blue); }
.sx-qb-upfront { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0; font-size: 0.84rem; color: var(--sx-muted); cursor: pointer; }
.sx-qb-upfront .form-check-input { float: none; margin: 0; width: 2rem; height: 1.1rem; cursor: pointer; }
.sx-qb-item-options .sx-qb-upfront { margin: 0; }
.sx-qs-totals .upfront { font-size: 0.84rem; color: var(--sx-muted); }
.sx-qs-totals .initial { margin-top: 0.3rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--sx-success-soft); color: var(--sx-success-text); font-weight: 700; }
.sx-kind.upfront { background: var(--sx-success-soft); color: var(--sx-success-text); }
.sx-approve-box { margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }

/* ---------- Client dashboard (portal) ---------- */

.sx-portal {
    min-height: 100vh; display: flex; flex-direction: column;
    background:
        radial-gradient(60rem 22rem at 85% -6rem, color-mix(in srgb, var(--sx-pink) 10%, transparent), transparent),
        radial-gradient(50rem 22rem at 0% -8rem, color-mix(in srgb, var(--sx-accent) 12%, transparent), transparent),
        var(--sx-bg);
}
.sx-portal-bar {
    position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--sx-border);
    background: color-mix(in srgb, var(--sx-card) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sx-portal-bar-inner { max-width: 68rem; margin: 0 auto; padding: 0.7rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.sx-portal-brand { display: flex; align-items: center; gap: 0.65rem; color: var(--sx-heading); }
.sx-portal-brand:hover { text-decoration: none; color: var(--sx-heading); }
.sx-portal-brand img { width: 34px; height: auto; }
.sx-portal-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.sx-portal-brand strong { font-family: var(--sx-heading-font); font-weight: 800; }
.sx-portal-brand small { color: var(--sx-muted); font-size: 0.76rem; }
.sx-portal-nav { display: flex; gap: 0.25rem; }
.sx-portal-nav a { padding: 0.4rem 0.75rem; border-radius: 8px; color: var(--sx-muted); font-weight: 500; font-size: 0.92rem; }
.sx-portal-nav a:hover { color: var(--sx-heading); background: var(--sx-hover); text-decoration: none; }
.sx-portal-nav a.active { color: var(--sx-accent-text); background: var(--sx-accent-soft); }
.sx-portal-user { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.9rem; color: var(--sx-text); }
@media (max-width: 600px) {
    .sx-portal-bar-inner { flex-wrap: wrap; gap: 0.5rem 1rem; }
    .sx-portal-nav { order: 3; width: 100%; }
}
.sx-portal-main { flex: 1; width: 100%; max-width: 68rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.sx-portal-foot { text-align: center; color: var(--sx-faint); font-size: 0.8rem; padding: 1.5rem; }
.sx-portal-hero { margin-bottom: 1.5rem; }
.sx-portal-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.3rem; }
/* Client dashboard: one project per row, in groups. */
.sx-pp-group + .sx-pp-group { margin-top: 2rem; }
.sx-pp-group-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 1.05rem; }
.sx-pp-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.75rem; background: var(--sx-hover); color: var(--sx-muted); }
.sx-pp-group-hint { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--sx-muted); }
.sx-pp-group-title + .sx-pp-list { margin-top: 0.75rem; }
.sx-pp-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sx-pp-row {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: 1.25rem;
    padding: 1rem 1.25rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text);
    box-shadow: 0 1px 2px var(--sx-shadow); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sx-pp-row:hover { text-decoration: none; color: var(--sx-text); border-color: var(--sx-accent-border); transform: translateY(-1px); box-shadow: 0 14px 30px -20px rgba(124, 77, 214, 0.55); }
.sx-pp-row.action { border-color: var(--sx-accent-border); background: linear-gradient(100deg, color-mix(in srgb, var(--sx-accent) 9%, var(--sx-card)), var(--sx-card) 55%); }
.sx-pp-row.action::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--sx-accent), var(--sx-pink)); }
.sx-pp-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px;
    background: color-mix(in srgb, var(--sx-tag) 14%, var(--sx-mix-base)); color: color-mix(in srgb, var(--sx-tag) 85%, var(--sx-mix-ink));
}
.sx-pp-icon .sx-icon { width: 1.25rem; height: 1.25rem; }
.sx-pp-row.live .sx-pp-icon { background: var(--sx-success-soft) !important; color: var(--sx-success-text) !important; }
.sx-pp-main { display: flex; flex-direction: column; min-width: 0; }
.sx-pp-name { font-family: var(--sx-heading-font); font-size: 1.05rem; font-weight: 700; color: var(--sx-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pp-sub { margin-top: 0.15rem; font-size: 0.82rem; color: var(--sx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pp-progress { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.sx-pp-progress-label { font-size: 0.8rem; font-weight: 600; color: var(--sx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-pp-progress-label > span { margin-right: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-pp-bar { display: flex; gap: 3px; }
.sx-pp-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--sx-border-strong); }
.sx-pp-bar i.done { background: var(--sx-accent); }
.sx-pp-bar i.now { background: linear-gradient(90deg, var(--sx-accent), var(--sx-pink)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sx-accent) 25%, transparent); }
.sx-pp-row.live .sx-pp-bar i { background: var(--sx-success-text); }
.sx-pp-next { display: flex; flex-direction: column; min-width: 0; }
.sx-pp-next-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sx-faint); }
.sx-pp-next-text { margin-top: 0.15rem; font-weight: 600; color: var(--sx-heading); }
.sx-pp-row.action .sx-pp-next-label { color: var(--sx-pink); }
.sx-pp-row.action .sx-pp-next-text { color: var(--sx-accent-text); }
.sx-pp-messages { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--sx-pink); color: #fff; }
.sx-pp-messages .sx-icon { width: 0.85rem; height: 0.85rem; }
.sx-pp-go {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    border: 1px solid var(--sx-border); color: var(--sx-muted); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sx-pp-row:hover .sx-pp-go, .sx-pp-row.action .sx-pp-go { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
@media (max-width: 1000px) {
    .sx-pp-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon main msg go" "progress progress progress progress" "next next next next"; row-gap: 0.9rem; }
    .sx-pp-icon { grid-area: icon; } .sx-pp-main { grid-area: main; } .sx-pp-go { grid-area: go; } .sx-pp-row > :nth-child(5) { grid-area: msg; }
    .sx-pp-progress { grid-area: progress; } .sx-pp-next { grid-area: next; }
    .sx-pp-progress:empty { display: none; }
}
.sx-msg-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem;
    border-radius: 12px; border: 1px solid var(--sx-border-strong); background: var(--sx-card-raised); color: var(--sx-text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sx-msg-button:hover { border-color: var(--sx-accent-border); background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-msg-button .sx-icon { width: 1.25rem; height: 1.25rem; }
.sx-msg-count {
    position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem;
    padding: 0 0.3rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.75rem; font-weight: 700; box-shadow: 0 0 0 2px var(--sx-card);
}
.sx-portal-quote { display: block; width: 100%; height: 900px; margin-top: 1rem; border: 0; border-radius: 20px; background: transparent; }
.sx-portal-project-head h1 { font-size: 1.6rem; }
.sx-portal-project-head .sx-client-mark .sx-icon { width: 1.5rem; height: 1.5rem; }
.sx-portal-project-head .sx-project-stepper { margin-top: 1.1rem; }
.sx-next-card { padding: 1.5rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); box-shadow: 0 1px 2px var(--sx-shadow); }
.sx-next-card.action { border-color: var(--sx-accent-border); background: linear-gradient(160deg, color-mix(in srgb, var(--sx-accent-soft) 70%, var(--sx-card)), var(--sx-card) 12rem); }
.sx-next-card.action > .sx-preview-label { color: var(--sx-pink); }

/* ---------- Template leftovers kept for Blazor ---------- */

/* Blazor's error bar (both layouts): hidden until Blazor shows it. */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; color: #222; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sx-green); }
.invalid { outline: 1px solid var(--sx-red); }
.validation-message { color: var(--sx-danger-text); }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ---------- Project info first (ADR-022) ---------- */
.sx-spinner { display: inline-block; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -2px; animation: sx-spin 0.8s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-check-line { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.sx-check-line .form-check-input { margin: 0; flex: none; }

/* The two ways in: fill it in, or upload what you have. */
.sx-info-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 720px) { .sx-info-ways { grid-template-columns: minmax(0, 1fr); } }
.sx-info-way {
    position: relative; display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 1.15rem; border-radius: var(--sx-radius-section);
    border: 1px solid var(--sx-border); background: var(--sx-card-raised); color: var(--sx-text); text-align: left; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sx-info-way:hover { border-color: var(--sx-accent-border); }
.sx-info-way.selected { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 7%, var(--sx-card)); box-shadow: 0 0 0 1px var(--sx-accent); }
.sx-info-way .sx-type-check { position: absolute; top: 0.75rem; right: 0.75rem; }
.sx-info-way-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-info-way-icon.ai { background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff; }
.sx-info-way-title { display: block; font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); }
.sx-info-way-text { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--sx-muted); }
.sx-info-pack { margin-bottom: 1.25rem; padding: 1.1rem 1.15rem; border-radius: var(--sx-radius-section); border: 1px dashed var(--sx-accent-border); background: color-mix(in srgb, var(--sx-accent) 4%, var(--sx-card)); }
.sx-provide-block { padding: 0.25rem 0; border-bottom: 1px dashed var(--sx-border); }
.sx-provide-block .sx-provide-row { border-bottom: 0; }
.sx-provide-upload { margin: 0.25rem 0 0.75rem; padding: 0.85rem 1rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); }
.sx-info-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding: 0.85rem 0 0.25rem; background: linear-gradient(transparent, var(--sx-card) 30%); }
.sx-info-sent { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--sx-radius-section); background: var(--sx-card-raised); border: 1px solid var(--sx-accent-border); }
.sx-info-sent > .sx-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--sx-accent-text); }
.sx-info-sent-details { margin-top: 1rem; }
.sx-info-sent-details > summary { cursor: pointer; color: var(--sx-accent-text); font-weight: 600; margin-bottom: 0.75rem; }
.sx-info-status { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-info-status > .sx-icon { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; }
.sx-info-status.received { border-color: var(--sx-success-border); }
.sx-info-status.received > .sx-icon { color: var(--sx-success-text); }
.sx-info-status.waiting > .sx-icon { color: var(--sx-muted); }

/* The info check popup: busy, then the result. */
.sx-aicheck-busy { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem 0 0.5rem; text-align: center; }
.sx-aicheck-orb { position: relative; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; }
.sx-aicheck-orb > span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.sx-aicheck-orb > span:nth-child(1) { border-top-color: var(--sx-accent); border-right-color: var(--sx-accent); animation: sx-spin 1.4s linear infinite; }
.sx-aicheck-orb > span:nth-child(2) { inset: 0.6rem; border-bottom-color: var(--sx-pink); border-left-color: var(--sx-pink); animation: sx-spin 1.9s linear infinite reverse; }
.sx-aicheck-orb > span:nth-child(3) { inset: 1.35rem; background: radial-gradient(circle, color-mix(in srgb, var(--sx-accent) 45%, transparent), transparent 70%); animation: sx-pulse 1.6s ease-in-out infinite; }
.sx-aicheck-orb > .sx-icon { position: relative; width: 1.6rem; height: 1.6rem; color: #fff; animation: sx-pulse 1.6s ease-in-out infinite; }
@keyframes sx-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.05); } }
.sx-aicheck-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; text-align: left; }
.sx-aicheck-steps li { display: flex; align-items: center; gap: 0.6rem; color: var(--sx-faint); transition: color 0.3s; }
.sx-aicheck-steps li .dot { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid currentColor; }
.sx-aicheck-steps li .dot .sx-icon { width: 0.75rem; height: 0.75rem; }
.sx-aicheck-steps li.done { color: var(--sx-muted); }
.sx-aicheck-steps li.done .dot { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-aicheck-steps li.now { color: var(--sx-heading); font-weight: 600; }
.sx-aicheck-steps li.now .dot { border-color: var(--sx-accent); border-right-color: transparent; animation: sx-spin 0.9s linear infinite; }
.sx-aicheck-result { animation: sx-pop 0.25s ease-out; }
.sx-aicheck-summary { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-aicheck-summary > .sx-icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
.sx-aicheck-summary.ready > .sx-icon { color: var(--sx-success-text); }
.sx-aicheck-summary.missing > .sx-icon { color: var(--sx-warning-ink); }
.sx-aicheck-title { display: flex; align-items: center; gap: 0.45rem; margin: 1.25rem 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sx-aicheck-title .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-aicheck-title.required { color: var(--sx-red); }
.sx-aicheck-title.warning { color: var(--sx-warning-ink); }
.sx-aicheck-title.suggestion { color: var(--sx-accent-text); }
/* The check's lists: one card per section with quiet dividers and a small coloured dot (no heavy left borders). */
.sx-aicheck-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sx-border); border-radius: 12px; background: var(--sx-card-raised); overflow: hidden; }
.sx-aicheck-list li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.9rem; font-size: 0.9rem; }
/* The text beside its dot takes the rest of the line; only a ticked suggestion wraps (its box goes underneath). */
.sx-aicheck-list li > .min-w-0 { flex: 1 1 0; }
.sx-aicheck-list li.pick { flex-wrap: wrap; }
.sx-aicheck-list li + li { border-top: 1px solid var(--sx-border); }
.sx-aicheck-list li span { color: var(--sx-muted); }
.sx-aicheck-list li strong { color: var(--sx-heading); }
.sx-aicheck-list li .text-body, .sx-aicheck-list li .text-body span { color: var(--sx-text); }
.sx-aicheck-list li.on { background: color-mix(in srgb, var(--sx-accent) 7%, var(--sx-card-raised)); }
.sx-aicheck-dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.45rem; border-radius: 50%; }
.sx-aicheck-dot.required { background: var(--sx-red); }
.sx-aicheck-dot.warning { background: var(--sx-orange); }
.sx-aicheck-dot.suggestion { background: var(--sx-accent); }
.sx-aicheck-pick { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0; flex: 1 1 100%; cursor: pointer; }
.sx-aicheck-pick .form-check-input { flex: none; margin: 0.15rem 0 0; cursor: pointer; }
.sx-aicheck-need { margin-left: 1.65rem; flex: 1 1 100%; max-width: calc(100% - 1.65rem); }
.sx-aicheck-hint { margin-left: auto; font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sx-faint); }
.sx-aicheck-adds { display: inline-block; margin-top: 0.2rem; font-size: 0.76rem; font-weight: 600; color: var(--sx-accent-text) !important; }

/* Requests. */
.sx-requests { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.sx-requests > * { width: 100%; }
.sx-requests > .btn { width: auto; }
.sx-request-form { padding: 1rem; border-radius: 12px; border: 1px solid var(--sx-accent-border); background: var(--sx-card-raised); }
.sx-request { padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-request.answered { border-color: var(--sx-accent-border); }
.sx-request.closed { opacity: 0.7; }
.sx-request-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sx-request-status { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--sx-hover); color: var(--sx-muted); }
.sx-request-status.open { background: var(--sx-warning-soft); color: var(--sx-warning-ink); }
.sx-request-status.answered { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-request-questions { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.sx-request-questions li { margin-bottom: 0.25rem; }
.sx-request-answer { margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); }
.sx-request-answer-text { white-space: pre-wrap; margin-bottom: 0.4rem; }
.sx-request-card { margin-bottom: 1rem; padding: 1.15rem 1.25rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border); background: color-mix(in srgb, var(--sx-pink) 6%, var(--sx-card)); }
.sx-request-card-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.75rem; }
.sx-request-card-head h3 { font-size: 1.15rem; }
.sx-request-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--sx-pink); color: #fff; }
.sx-request-card .sx-request-questions { margin-bottom: 1rem; }

/* Chat requests. */
.sx-chat-message.request .sx-chat-bubble { border-color: var(--sx-pink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-pink) 45%, transparent); }
.sx-chat-request-tag { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.35rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--sx-pink); color: #fff; }
.sx-chat-request-tag .sx-icon { width: 0.7rem; height: 0.7rem; }
.sx-chat-mark { margin-left: 0.5rem; padding: 0; border: 0; background: none; font-size: 0.75rem; color: var(--sx-faint); text-decoration: underline; }
.sx-chat-mark:hover { color: var(--sx-accent-text); }

/* Staff: the approved quote, and the AI summary of the site. */
.sx-approved-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-success-border); background: color-mix(in srgb, var(--sx-success-soft) 55%, var(--sx-card)); }
.sx-approved-quote h2 { font-size: 1.2rem; }
.sx-approved-quote-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--sx-success-soft); color: var(--sx-success-text); }
.sx-site-summary { margin-bottom: 1rem; }
.sx-markdown { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.6; }

/* New project: the client's login, ready to send. */
.sx-wizard-done-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.25rem; }
.sx-wizard-done-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sx-accent); color: #fff; }
/* The client, then their dashboard login below it. */
.sx-wizard-done-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
.sx-wizard-client { padding: 1rem; border-radius: 12px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-wizard-client-facts { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; color: var(--sx-muted); }
.sx-wizard-client-facts li { display: flex; align-items: center; gap: 0.45rem; }
.sx-wizard-client-facts .sx-icon { width: 0.9rem; height: 0.9rem; }

/* Quote builder: AI suggestions. */
.sx-ai-suggest { margin-top: 1rem; padding: 1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border); background: linear-gradient(160deg, color-mix(in srgb, var(--sx-accent) 9%, var(--sx-card)), var(--sx-card) 60%); }
.sx-ai-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.sx-ai-suggest-head .sx-preview-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.sx-ai-suggest-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; width: 100%; margin-top: 0.45rem; padding: 0.6rem 0.7rem;
    border-radius: 9px; border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); text-align: left; font-size: 0.86rem; transition: border-color 0.15s;
}
.sx-ai-suggest-item:hover:not(:disabled) { border-color: var(--sx-accent-border); }
.sx-ai-suggest-item.added { opacity: 0.6; }
.sx-ai-add { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--sx-accent-text); }

/* Hosting packages and care plans (ADR-023): cards to choose from. */
.sx-packages-billing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.sx-packages-save { font-size: 0.82rem; font-weight: 600; color: var(--sx-accent-text); }
.sx-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.85rem; }
.sx-package {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 1.15rem 1.1rem 1.05rem; text-align: left;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card-raised); color: var(--sx-text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
}
.sx-package:hover:not(:disabled) { border-color: var(--sx-accent-border); box-shadow: 0 10px 22px -16px rgba(124, 77, 214, 0.7); transform: translateY(-1px); }
.sx-package:disabled { cursor: default; }
.sx-package:focus { outline: none; }
.sx-package:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-package.popular { border-color: var(--sx-accent-border); }
.sx-package.selected { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); box-shadow: 0 0 0 1px var(--sx-accent); }
/* "Not sure" / "No thanks": a slim choice under the plans, not a card of its own. */
.sx-package-none {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; margin-top: 0.75rem; padding: 0.75rem 1rem; text-align: left;
    border-radius: var(--sx-radius-section); border: 1px dashed var(--sx-border-strong); background: transparent; color: var(--sx-text);
    transition: border-color 0.15s, background 0.15s;
}
.sx-package-none:hover:not(:disabled) { border-color: var(--sx-accent-border); background: var(--sx-hover); }
.sx-package-none:focus { outline: none; }
.sx-package-none:focus-visible { outline: 1px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-package-none:disabled { cursor: default; }
.sx-package-none.selected { border-style: solid; border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); }
.sx-package-none-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--sx-border-strong); color: #fff; }
.sx-package-none.selected .sx-package-none-dot { border-color: var(--sx-accent); background: var(--sx-accent); }
.sx-package-none-dot .sx-icon { width: 0.75rem; height: 0.75rem; }
.sx-package-none-label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--sx-heading); }
.sx-package-none-hint { display: block; font-size: 0.8rem; color: var(--sx-muted); }
.sx-package-flag {
    position: absolute; top: -0.65rem; left: 1rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff;
}
.sx-package-flag.inline { position: static; display: inline-block; margin-left: 0.4rem; vertical-align: 0.15em; }
.sx-package-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sx-package-name { font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.05rem; color: var(--sx-heading); }
.sx-package-price { margin-top: 0.15rem; font-family: var(--sx-heading-font); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--sx-heading); }
.sx-package-price small { font-size: 0.8rem; font-weight: 600; color: var(--sx-muted); margin-left: 0.15rem; }
.sx-package-per { font-size: 0.75rem; color: var(--sx-faint); }
.sx-package-best { margin-top: 0.35rem; font-size: 0.84rem; color: var(--sx-muted); }
.sx-package-features { display: flex; flex-direction: column; margin-top: 0.6rem; border-top: 1px solid var(--sx-border); }
/* Each feature: its label above its value, so every row reads the same however long it is. */
.sx-package-feature { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0; line-height: 1.35; }
.sx-package-feature + .sx-package-feature { border-top: 1px dashed var(--sx-border); }
.sx-package-feature > span { font-size: 0.78rem; color: var(--sx-muted); }
.sx-package-feature strong { font-size: 0.86rem; font-weight: 600; color: var(--sx-heading); }
.sx-packages-note { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.9rem 0 0; font-size: 0.84rem; color: var(--sx-muted); }
.sx-packages-note .sx-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--sx-accent-text); }
.sx-package-step .sx-setup-section + .sx-setup-section { margin-top: 1.5rem; }

/* Domain search (hosting). */
.sx-domain { max-width: 40rem; }
.sx-domain-search { display: flex; gap: 0.5rem; }
.sx-domain-results { list-style: none; margin: 0.75rem 0 0; padding: 0; border: 1px solid var(--sx-border); border-radius: 10px; overflow: hidden; }
.sx-domain-results li { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.45rem 0.85rem; background: var(--sx-card); }
.sx-domain-results li + li { border-top: 1px solid var(--sx-border); }
.sx-domain-results li.chosen { background: color-mix(in srgb, var(--sx-accent) 7%, var(--sx-card)); }
.sx-domain-name { font-weight: 600; color: var(--sx-heading); margin-right: auto; word-break: break-all; }
.sx-domain-status { font-size: 0.78rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); white-space: nowrap; }
.sx-domain-results li.available .sx-domain-status { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-domain-results li.taken .sx-domain-name { color: var(--sx-faint); text-decoration: line-through; }
.sx-domain-results li.unknown .sx-domain-status { background: var(--sx-warning-bg); color: var(--sx-warning-text); }
.sx-domain-chosen { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-accent-border); font-size: 0.9rem; }
.sx-domain-chosen .sx-icon { flex: none; margin-top: 0.15rem; color: var(--sx-accent-text); }

/* The chosen package, on the project's next step. */
.sx-package-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem 1.5rem; padding: 1rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-package-summary-name { font-family: var(--sx-heading-font); font-size: 1.15rem; font-weight: 700; color: var(--sx-heading); }
.sx-package-summary-note { grid-column: 1 / -1; font-size: 0.9rem; }
.sx-wizard-note.info { background: color-mix(in srgb, var(--sx-accent) 6%, var(--sx-card)); border-color: var(--sx-accent-border); color: var(--sx-text); }
.sx-svc-card .sx-soon { margin-top: 0.1rem; }

/* Quote builder: hosting and care packages. */
.sx-qb-package-service { margin: 0.9rem 0 0.45rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sx-muted); }
.sx-qb-package-service:first-of-type { margin-top: 0; }
.sx-qb-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0.5rem; }
.sx-qb-package {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 0.75rem; border-radius: 10px; text-align: left;
    border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); font-size: 0.9rem; transition: border-color 0.15s, background 0.15s;
}
.sx-qb-package:hover { border-color: var(--sx-accent-border); }
.sx-qb-package.on { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); box-shadow: 0 0 0 1px var(--sx-accent); }
.sx-qb-package.on .fw-medium { color: var(--sx-accent-text); }
.sx-qb-package-price { font-size: 0.76rem; color: var(--sx-muted); }
.sx-qb-popular { color: var(--sx-accent-text); font-size: 0.8rem; }
.sx-qb-package-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.sx-qb-package-options .sx-money { width: 9.5rem; }
.sx-qb-item-options.sx-qb-package-options { padding: 0; }
.sx-qb-package-options .sx-money input { width: 100%; }
/* Settings › Services: a package's features, and the process choice. */
.sx-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.sx-process-choice { flex-wrap: wrap; }
.sx-kind.popular { background: var(--sx-accent-soft); color: var(--sx-accent-text); }

/* Client page › Projects: a tab per service, and their hosting / care packages. */
.sx-svc-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.sx-svc-tabs button {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-muted); transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sx-svc-tabs button:hover { color: var(--sx-heading); border-color: var(--sx-accent-border); }
.sx-svc-tabs button.on { color: var(--sx-accent-text); border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); }
.sx-svc-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.75rem; }
.sx-svc-tabs button.on .sx-svc-tab-count { background: var(--sx-accent); color: #fff; }
.sx-client-packages { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.85rem; }
.sx-client-package {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--sx-radius-section); text-decoration: none; color: var(--sx-text);
    border: 1px solid var(--sx-accent-border); background: linear-gradient(120deg, color-mix(in srgb, var(--sx-accent) 7%, var(--sx-card)), var(--sx-card) 70%);
}
.sx-client-package:hover { border-color: var(--sx-accent); color: var(--sx-text); }
.sx-client-package-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }

/* A popup that fits the screen: the body scrolls, the header and footer stay (the quote builder). */
.sx-modal.fit { max-height: calc(100vh - 6vh - 1rem); margin-bottom: 0; }
.sx-modal.fit .sx-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sx-modal.fit .sx-modal-head, .sx-modal.fit .sx-modal-foot { flex: none; }

/* Quote builder: every option control is the same size (the app's control height). */
.sx-qb-item-options .sx-number-stepper, .sx-qb-item-options .sx-select { height: var(--sx-control-h); }
.sx-qb-item-options .sx-select:not(.block) .sx-select-button { min-height: var(--sx-control-h); height: var(--sx-control-h); }
.sx-qb-package-options .sx-money input { height: var(--sx-control-h); }
.sx-qb-popular { margin-left: 0.2rem; }

/* Project requests (ADR-024): a new project with its services, before one project per service is created. */
.sx-request-tag { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; vertical-align: 0.3em;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff; }
.sx-stage-pill.request { --sx-tag: var(--sx-pink); }
.sx-req-services { display: flex; flex-direction: column; gap: 0.6rem; }
.sx-req-service { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.95rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-req-service.sent { border-color: var(--sx-accent-border); }
.sx-req-service-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-req-state { font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); white-space: nowrap; }
.sx-req-state.sent { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-req-confirm { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sx-req-confirm li { display: flex; align-items: center; gap: 0.5rem; }
.sx-req-confirm .sx-icon { color: var(--sx-accent-text); flex: none; }
.sx-req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sx-req-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: var(--sx-radius-section); text-decoration: none; color: var(--sx-text);
    border: 1px solid var(--sx-accent-border); background: linear-gradient(120deg, color-mix(in srgb, var(--sx-accent) 7%, var(--sx-card)), var(--sx-card) 70%); }
.sx-req-row:hover { border-color: var(--sx-accent); color: var(--sx-text); }
.sx-req-status { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-req-status.review { background: var(--sx-accent); color: #fff; }
/* The client: their services (remove / undo, the website type), more of ours by group, accept. */
.sx-req-chosen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.65rem; align-items: start; }
.sx-req-pick.website { grid-column: 1 / -1; }
.sx-req-pick { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.8rem 0.9rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border); background: color-mix(in srgb, var(--sx-accent) 6%, var(--sx-card)); }
.sx-req-pick-main { display: flex; align-items: center; gap: 0.7rem; }
.sx-req-pick.off { border-style: dashed; border-color: var(--sx-border-strong); background: var(--sx-card); opacity: 0.75; }
.sx-req-pick.off .fw-semibold { text-decoration: line-through; }
.sx-req-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; color: var(--sx-muted); line-height: 1.4; }
.sx-req-desc.one { -webkit-line-clamp: 1; }
.sx-req-types { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px dashed var(--sx-accent-border); }
.sx-req-types-label { margin-right: 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sx-faint); }
.sx-req-types button { padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-muted); font-size: 0.8rem; font-weight: 600; }
.sx-req-types button:hover:not(:disabled) { border-color: var(--sx-accent-border); color: var(--sx-heading); }
.sx-req-types button.on { border-color: var(--sx-accent); background: var(--sx-accent); color: #fff; }
.sx-req-more { display: flex; flex-direction: column; gap: 1rem; }
.sx-req-more-group h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--sx-heading); }
.sx-req-more-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--sx-hover); color: var(--sx-muted); }
.sx-req-more-icon .sx-icon { width: 0.9rem; height: 0.9rem; }
.sx-req-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.sx-req-more-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem 0.6rem 0.85rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); color: var(--sx-text); font-size: 0.9rem; transition: border-color 0.15s, background 0.15s; }
.sx-req-more-item:hover:not(:disabled) { border-color: var(--sx-accent-border); background: color-mix(in srgb, var(--sx-accent) 5%, var(--sx-card)); }
.sx-req-add { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--sx-accent-border); color: var(--sx-accent-text); }
.sx-req-more-item:hover:not(:disabled) .sx-req-add { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-req-add .sx-icon { width: 0.85rem; height: 0.85rem; }
.sx-req-new { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--sx-accent); color: #fff; vertical-align: 1px; }
.sx-req-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sx-border); }
/* The client's steps: one per service, then "we check it". */
.sx-req-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--sx-border); }
.sx-req-steps li > button, .sx-req-step-end { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem 0.35rem 0.4rem; border-radius: 999px;
    border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-muted); font-size: 0.86rem; font-weight: 600; }
.sx-req-steps li > button:disabled { cursor: default; }
.sx-req-steps .dot { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sx-hover); }
.sx-req-steps .dot .sx-icon { width: 0.85rem; height: 0.85rem; }
.sx-req-steps li.done > button { color: var(--sx-text); }
.sx-req-steps li.done .dot { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-req-steps li.current > button, .sx-req-steps li.current .sx-req-step-end { border-color: var(--sx-accent); color: var(--sx-accent-text); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); }
.sx-req-steps li.current .dot { background: var(--sx-accent); color: #fff; }
.sx-chat-request-tag.before { background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }

/* New project › Services as pills (more on screen without scrolling). */
.sx-svc-grid.pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sx-svc-grid.pills .sx-svc-card {
    flex-direction: row; align-items: center; gap: 0.5rem; min-height: 0; padding: 0.42rem 0.95rem 0.42rem 0.45rem; border-radius: 999px; transform: none;
}
.sx-svc-grid.pills .sx-svc-card:hover { transform: none; }
.sx-svc-grid.pills .sx-svc-check { position: static; transform: none; flex: none; }
.sx-svc-grid.pills .sx-svc-name { font-size: 0.9rem; }
.sx-svc-grid.pills .sx-svc-card.selected { background: color-mix(in srgb, var(--sx-accent) 14%, var(--sx-card)); }
.sx-wizard-body .sx-svc-group { margin: 0.9rem 0 0.45rem; }

/* Dashboard: next steps and the calendar side by side (50/50), activity below. The calendar has no side list now. */
.sx-dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sx-dash-grid .sx-dcal { margin: 0; }
.sx-dcal-body { display: block; }
.sx-dcal-agenda { margin-top: 1rem; max-height: none; }
.sx-dash-grid .sx-dcal-head { gap: 0.6rem 1rem; }
.sx-dash-grid .sx-dcal-legend { margin-left: 0; width: 100%; }
@media (max-width: 1100px) { .sx-dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* The large calendar (popup): taller days, the upcoming list beside the month. */
.sx-dcal.large .sx-dcal-body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.sx-dcal.large .sx-dcal-day { min-height: 7.2rem; }
.sx-dcal.large .sx-dcal-agenda { margin-top: 0; max-height: 40rem; overflow-y: auto; }
@media (max-width: 1000px) { .sx-dcal.large .sx-dcal-body { grid-template-columns: minmax(0, 1fr); } }

/* The Audit page: filters, then the activity grouped by day. */
.sx-audit-filters { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.sx-audit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.sx-audit-search { flex: 1 1 18rem; }
.sx-audit-select { flex: 0 1 13rem; min-width: 11rem; }
.sx-audit-dates { display: flex; align-items: center; gap: 0.4rem; }
.sx-audit-dates .form-control { width: 10.5rem; }
.sx-audit-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sx-audit-chips button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-muted); font-size: 0.85rem; font-weight: 600; }
.sx-audit-chips button .sx-icon { width: 0.85rem; height: 0.85rem; }
.sx-audit-chips button:hover { color: var(--sx-heading); border-color: var(--sx-accent-border); }
.sx-audit-chips button.on { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-audit-day { margin-bottom: 1.25rem; }
.sx-audit-date { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sx-muted); }
.sx-audit-date span { padding: 0 0.45rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.78rem; }
.sx-audit-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); background: var(--sx-card); overflow: hidden; }
.sx-audit-list li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.7rem 1rem; }
.sx-audit-list li + li { border-top: 1px solid var(--sx-border); }
.sx-audit-list li:hover { background: var(--sx-row-hover); }
.sx-audit-time { flex: none; width: 2.8rem; padding-top: 0.25rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--sx-faint); }
.sx-audit-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 8px; --sx-tag: var(--sx-accent);
    background: color-mix(in srgb, var(--sx-tag) 16%, var(--sx-card)); color: var(--sx-tag); }
.sx-audit-icon .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-audit-icon.clients { --sx-tag: var(--sx-blue); }
.sx-audit-icon.quotes { --sx-tag: var(--sx-pink); }
.sx-audit-icon.messages { --sx-tag: var(--sx-orange); }
.sx-audit-icon.emails { --sx-tag: var(--sx-teal); }
.sx-audit-icon.files { --sx-tag: var(--sx-green); }
.sx-audit-summary { color: var(--sx-text); font-size: 0.92rem; }
.sx-audit-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--sx-muted); }
.sx-audit-meta a { display: inline-flex; align-items: center; gap: 0.25rem; }
.sx-audit-meta .sx-icon { width: 0.8rem; height: 0.8rem; }

/* Request window: a service whose details are in is ready (green). */
.sx-req-state { display: inline-flex; align-items: center; gap: 0.3rem; }
.sx-req-state .sx-icon { width: 0.8rem; height: 0.8rem; }
.sx-req-state.sent { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-req-service.sent { border-color: var(--sx-success-border); }

/* A client's open projects as cards above a project (click straight through). */
.sx-switcher { display: flex; gap: 0.6rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.sx-switch { display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; max-width: 17rem; padding: 0.45rem 0.9rem 0.45rem 0.5rem;
    border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); text-decoration: none;
    transition: border-color 0.15s, background 0.15s; }
.sx-switch:hover { border-color: var(--sx-accent-border); color: var(--sx-text); }
.sx-switch.current { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 9%, var(--sx-card)); }
.sx-switch-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-switch-icon .sx-icon { width: 1rem; height: 1rem; }
.sx-switch-name { display: block; font-weight: 600; font-size: 0.88rem; color: var(--sx-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-switch.current .sx-switch-name { color: var(--sx-accent-text); }
.sx-switch-sub { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--sx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-switch-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-pink); }
.sx-switch, .sx-switch:hover, .sx-switch:focus { text-decoration: none; }
.sx-switch *, .sx-switch:hover * { text-decoration: none; }
.sx-switch-name { font-size: 0.9rem; }
.sx-switch .sx-switch-dot { margin-left: 0.1rem; }

/* Money (ADR-025): tiles, payments and ongoing billing, and a client's projects. */
.sx-money-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.sx-money-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .sx-money-tiles, .sx-money-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-money-tiles > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-money-tiles span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-money-tiles strong { font-family: var(--sx-heading-font); font-size: 1.2rem; color: var(--sx-heading); white-space: nowrap; }
.sx-money-tiles small { font-size: 0.75rem; color: var(--sx-muted); }
.sx-money-tiles .due { border-color: color-mix(in srgb, var(--sx-orange) 45%, var(--sx-border)); }
.sx-money-tiles .due strong { color: var(--sx-orange); }
.sx-money-tiles .clear strong { color: var(--sx-success-text); }
.sx-money-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sx-border); border-radius: 10px; overflow: hidden; }
.sx-money-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
.sx-money-list li + li { border-top: 1px solid var(--sx-border); }
.sx-money-list strong { white-space: nowrap; color: var(--sx-heading); }
.sx-money-date { flex: none; width: 6.5rem; font-size: 0.82rem; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.sx-money-state { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-money-state.ongoing { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-money-state.ended { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-money-projects { margin-top: 1rem; border: 1px solid var(--sx-border); border-radius: 10px; overflow: hidden; }
.sx-money-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.4fr); gap: 0.75rem; align-items: center; padding: 0.65rem 0.9rem;
    color: var(--sx-text); text-decoration: none; font-size: 0.88rem; }
.sx-money-row + .sx-money-row { border-top: 1px solid var(--sx-border); }
a.sx-money-row:hover { background: var(--sx-row-hover); color: var(--sx-text); text-decoration: none; }
.sx-money-row.head { background: var(--sx-card-raised); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-money-row .due { color: var(--sx-orange); font-weight: 700; }
@media (max-width: 760px) {
    .sx-money-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-money-row.head { display: none; }
    .sx-money-row > span[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--sx-faint); text-transform: uppercase; letter-spacing: 0.05em; }
}

/* Admin › Finance (ADR-026): totals, filters with counts, the rows and their tags. */
.sx-money-tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sx-money-tiles.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sx-money-tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-fin-count { margin-left: 0.15rem; padding: 0 0.4rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.75rem; }
.sx-audit-chips button.on .sx-fin-count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.sx-fin-table { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); background: var(--sx-card); overflow: hidden; }
.sx-fin-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
    gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; font-size: 0.88rem; border-left: 3px solid transparent; }
.sx-fin-row + .sx-fin-row { border-top: 1px solid var(--sx-border); }
.sx-fin-row.head { background: var(--sx-card-raised); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-fin-row a { color: inherit; }
.sx-fin-row a.text-muted:hover { color: var(--sx-accent-text) !important; }
.sx-fin-row .owed { font-weight: 700; color: var(--sx-heading); }
.sx-fin-row.warning { border-left-color: var(--sx-orange); }
.sx-fin-row.urgent { border-left-color: var(--sx-red); }
.sx-fin-row.suspend { border-left-color: #b4232a; background: color-mix(in srgb, var(--sx-red) 6%, var(--sx-card)); }
.sx-fin-tag { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-fin-tag.up_to_date { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-fin-tag.due_soon, .sx-fin-tag.due { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-fin-tag.overdue { background: var(--sx-warning-bg); color: var(--sx-warning-text); }
.sx-fin-tag.warning { background: color-mix(in srgb, var(--sx-orange) 22%, var(--sx-card)); color: var(--sx-orange); }
.sx-fin-tag.urgent { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-fin-tag.suspend { background: #b4232a; color: #fff; }
.sx-fin-scale { display: flex; border-radius: 999px; overflow: hidden; font-size: 0.78rem; font-weight: 700; }
.sx-fin-scale span { flex: 1; padding: 0.3rem 0.5rem; text-align: center; }
.sx-fin-scale .due { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-fin-scale .overdue { background: var(--sx-warning-bg); color: var(--sx-warning-text); }
.sx-fin-scale .warning { background: color-mix(in srgb, var(--sx-orange) 22%, var(--sx-card)); color: var(--sx-orange); }
.sx-fin-scale .urgent { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-fin-scale .suspend { background: #b4232a; color: #fff; }
@media (max-width: 900px) {
    .sx-fin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-fin-row.head { display: none; }
    .sx-fin-row > span[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--sx-faint); text-transform: uppercase; letter-spacing: 0.05em; }
}

/* Websites (ADR-027): the list, health dots and pills, care, uptime bars and the speed chart. */
.sx-health-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sx-faint); }
.sx-health-dot.up { background: var(--sx-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-green) 20%, transparent); }
.sx-health-dot.attention { background: var(--sx-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-orange) 22%, transparent); }
.sx-health-dot.down { background: var(--sx-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-red) 25%, transparent); animation: sx-pulse 1.6s ease-in-out infinite; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sx-red) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sx-health-dot.down { animation: none; } }
.sx-health-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-family: var(--bs-body-font-family); font-size: 0.78rem; font-weight: 700; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-health-pill.up { background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-health-pill.attention { background: var(--sx-warning-bg); color: var(--sx-warning-text); }
.sx-health-pill.down { background: var(--sx-danger-bg); color: var(--sx-danger-text); }
.sx-chip-divider { width: 1px; align-self: stretch; background: var(--sx-border); margin: 0 0.25rem; }
.sx-audit-chips button .sx-health-dot { width: 8px; height: 8px; box-shadow: none; animation: none; }
.sx-money-tiles .down { border-color: color-mix(in srgb, var(--sx-red) 45%, var(--sx-border)); }
.sx-money-tiles .down strong { color: var(--sx-red); }
@media (max-width: 960px) { .sx-money-tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sx-site-table { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); background: var(--sx-card); overflow: hidden; }
.sx-site-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; border-left: 3px solid transparent; color: var(--sx-text); text-decoration: none; font-size: 0.9rem; }
.sx-site-row + .sx-site-row { border-top: 1px solid var(--sx-border); }
a.sx-site-row:hover { background: var(--sx-hover); color: var(--sx-text); }
a.sx-site-row:hover .sx-site-name { color: var(--sx-accent-text); }
.sx-site-row.head { background: var(--sx-card-raised); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); padding-top: 0.55rem; padding-bottom: 0.55rem; }
.sx-site-row.down { border-left-color: var(--sx-red); background: color-mix(in srgb, var(--sx-red) 5%, var(--sx-card)); }
.sx-site-row.attention { border-left-color: var(--sx-orange); }
.sx-site-name { color: var(--sx-heading); }
.sx-soon { color: var(--sx-orange); font-weight: 600; }
@media (max-width: 900px) {
    .sx-site-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-site-row > :first-child { grid-column: 1 / -1; }
    .sx-site-row.head { display: none; }
    .sx-site-row > [data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sx-faint); }
}
.sx-care-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); }
.sx-care-pill .sx-icon { width: 0.8rem; height: 0.8rem; }
.sx-care-pill.on { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-care-pill.available { background: color-mix(in srgb, var(--sx-green) 14%, var(--sx-card)); color: var(--sx-success-text); }

.sx-care-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 0.75rem; padding: 0.9rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-care-bar.on { border-color: var(--sx-accent-border); background: linear-gradient(120deg, color-mix(in srgb, var(--sx-accent) 10%, var(--sx-card)), var(--sx-card) 70%); }
.sx-care-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--sx-neutral-bg); color: var(--sx-muted); }
.sx-care-bar.on .sx-care-icon { background: linear-gradient(135deg, var(--sx-accent), #c04fd8); color: #fff; }
.sx-care-icon .sx-icon { width: 1.2rem; height: 1.2rem; }
.sx-care-bar strong { color: var(--sx-heading); }
.sx-care-available { color: var(--sx-success-text); font-weight: 600; }
.sx-care-available .sx-icon { width: 0.85rem; height: 0.85rem; }

.sx-check-result.down { background: var(--sx-danger-soft); border-color: var(--sx-danger-border); color: var(--sx-danger-ink); }

.sx-uptime-bars { display: grid; grid-template-columns: repeat(168, minmax(0, 1fr)); gap: 1px; height: 2.25rem; }
.sx-uptime-bars span { border-radius: 2px; background: var(--sx-neutral-bg); }
.sx-uptime-bars span.up { background: color-mix(in srgb, var(--sx-green) 75%, var(--sx-card)); }
.sx-uptime-bars span.down { background: var(--sx-red); }
.sx-uptime-bars span:hover { filter: brightness(1.25); }
/* On a phone 168 bars with gaps would be under a pixel wide: no gaps or rounding there. */
@media (max-width: 575.98px) { .sx-uptime-bars { gap: 0; } .sx-uptime-bars span { border-radius: 0; } }
.sx-speed-chart { position: relative; height: 8rem; border-radius: 10px; background: var(--sx-card-raised); border: 1px solid var(--sx-border); padding: 0.5rem 0; }
.sx-speed-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sx-speed-chart polyline { fill: none; stroke: var(--sx-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sx-speed-chart line.slow { stroke: var(--sx-orange); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.sx-speed-max { position: absolute; top: 0.35rem; left: 0.6rem; font-size: 0.78rem; color: var(--sx-faint); }

.sx-plan-list { display: grid; gap: 0.45rem; }
.sx-plan { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card); color: var(--sx-text); }
.sx-plan:hover:not(:disabled) { border-color: var(--sx-accent-border); }
.sx-plan.on { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 8%, var(--sx-card)); }
.sx-plan:disabled { opacity: 0.55; cursor: not-allowed; }
.sx-plan-radio { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--sx-border-strong); }
.sx-plan.on .sx-plan-radio { border: 5px solid var(--sx-accent); }

/* Google Analytics (ADR-028): the settings card, the site's Analytics tab. */
.sx-google-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sx-google-connect.connected { border-color: var(--sx-success-border); background: linear-gradient(120deg, color-mix(in srgb, var(--sx-green) 9%, var(--sx-card)), var(--sx-card) 70%); }
.sx-google-connect.error { border-color: var(--sx-danger-border); }
.sx-google-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: #fff;
    background: conic-gradient(from 200deg, #f9ab00, #e37400, #4285f4, #34a853, #f9ab00); }
.sx-google-mark .sx-icon { width: 1.3rem; height: 1.3rem; }
.sx-google-mark.meta { background: linear-gradient(135deg, #0064e0, #0082fb 55%, #22b8ff); }
.sx-howto summary { cursor: pointer; font-weight: 600; color: var(--sx-heading); display: flex; align-items: center; gap: 0.5rem; }
.sx-howto ol { display: grid; gap: 0.45rem; padding-left: 1.2rem; margin-bottom: 0; }
.sx-howto code { word-break: break-all; }

.sx-ga-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.sx-ga-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; transition: opacity 0.2s; }
.sx-ga-tiles.loading { opacity: 0.55; }
@media (max-width: 1100px) { .sx-ga-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-ga-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-ga-tiles > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--sx-border); background: var(--sx-card); }
.sx-ga-tiles span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-ga-tiles strong { font-family: var(--sx-heading-font); font-size: 1.55rem; color: var(--sx-heading); line-height: 1.2; }
.sx-ga-change { font-size: 0.78rem; font-weight: 700; color: var(--sx-muted); }
.sx-ga-change.up { color: var(--sx-success-text); }
.sx-ga-change.down { color: var(--sx-red); }
.sx-ga-legend { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--sx-muted); }
.sx-ga-legend span { display: inline-block; width: 1.1rem; height: 0; border-top: 3px solid var(--sx-accent); border-radius: 2px; }
.sx-ga-legend span.before { border-top: 2px dashed var(--sx-faint); margin-left: 0.5rem; }
.sx-ga-chart { position: relative; height: 14rem; }
.sx-ga-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sx-ga-chart .grid { stroke: var(--sx-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sx-ga-chart .area { fill: url(#ga-fill); }
.sx-ga-chart polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sx-ga-chart polyline.now { stroke: var(--sx-accent); stroke-width: 2.5; }
.sx-ga-chart polyline.before { stroke: var(--sx-faint); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.7; }
.sx-ga-chart .hit { fill: transparent; }
.sx-ga-chart .hit:hover { fill: color-mix(in srgb, var(--sx-accent) 10%, transparent); }
.sx-ga-max { position: absolute; top: 0; left: 0; font-size: 0.78rem; color: var(--sx-faint); }
.sx-ga-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 900px) { .sx-ga-grid { grid-template-columns: minmax(0, 1fr); } }
.sx-ga-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sx-ga-bars li { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.88rem; overflow: hidden; }
.sx-ga-bars.compact li { padding: 0.35rem 0.6rem; }
.sx-ga-bars li > * { position: relative; }
.sx-ga-bars .bar { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: color-mix(in srgb, var(--sx-accent) 14%, transparent); }
.sx-ga-bars strong { font-variant-numeric: tabular-nums; color: var(--sx-heading); }
.sx-ga-split { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; gap: 2px; }
.sx-ga-split .c0, .sx-ga-legend-list .c0 { background: var(--sx-accent); }
.sx-ga-split .c1, .sx-ga-legend-list .c1 { background: #c04fd8; }
.sx-ga-split .c2, .sx-ga-legend-list .c2 { background: #4d9de0; }
.sx-ga-split .c3, .sx-ga-legend-list .c3 { background: var(--sx-faint); }
.sx-ga-legend-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.85rem; }
.sx-ga-legend-list .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.25rem; }

/* Monthly website reports (ADR-029): making one, and the list. */
.sx-report-make-intro { display: flex; gap: 0.9rem; align-items: flex-start; }
.sx-report-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, #1b1c22, #2b2440); border: 1px solid var(--sx-accent-border); box-shadow: inset 0 -3px 0 #8b5cf0; }
.sx-report-mark .sx-icon { width: 1.2rem; height: 1.2rem; }
.sx-report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sx-report-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; padding: 0.85rem 1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card); }
/* The text stays beside the month in a narrow column; the buttons go under it when there's no room. */
.sx-report-list li > .min-w-0 { flex: 1 1 14rem; }
.sx-report-month { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 3.2rem; height: 3.4rem; border-radius: 10px;
    background: #15161b; border: 1px solid var(--sx-border); color: #fff; box-shadow: inset 0 3px 0 var(--sx-accent); }
.sx-report-month strong { font-family: var(--sx-heading-font); font-size: 1rem; line-height: 1.1; color: #f5f5f8; }
.sx-report-month span { font-size: 0.75rem; color: #9a9aa8; }
/* Monthly marketing reports (ADR-037): the Reports tab of an SEO, ads or social media project, and its sources. */
.sx-mkt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: 1rem; align-items: start; }
.sx-source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sx-source-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-source-list li.empty { border-style: dashed; background: transparent; }
.sx-source-list li.empty .sx-source-value { color: var(--sx-muted); font-weight: 500; }
.sx-source-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; color: #fff; }
.sx-source-icon .sx-icon { width: 1.05rem; height: 1.05rem; }
.sx-source-icon.searchConsole { background: linear-gradient(135deg, #4285f4, #34a853); }
.sx-source-icon.analytics { background: linear-gradient(135deg, #f9ab00, #e37400); }
.sx-source-icon.metaAds { background: linear-gradient(135deg, #0064e0, #22b8ff); }
.sx-source-icon.facebook { background: linear-gradient(135deg, #1361d8, #3b8cff); }
.sx-source-icon.instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.sx-source-list li.empty .sx-source-icon { filter: grayscale(1); opacity: 0.6; }
.sx-source-label { font-size: 0.78rem; font-weight: 600; color: var(--sx-muted); }
.sx-source-value { font-size: 0.92rem; font-weight: 600; color: var(--sx-heading); }
.sx-source-problem { padding: 0.6rem 0.75rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px dashed var(--sx-border-strong); color: var(--sx-muted); }
@media (max-width: 991.98px) {
    .sx-mkt-layout { grid-template-columns: minmax(0, 1fr); }
    .sx-mkt-layout > aside { order: -1; }
}

.sx-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1080; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: 10px;
    background: var(--sx-heading); color: var(--sx-card); font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

/* SynthX Care (ADR-030): connecting the plugin, waiting updates. */
.sx-care-plug { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--sx-accent), #c04fd8); }
.sx-care-plug .sx-icon { width: 1.25rem; height: 1.25rem; }
.sx-care-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sx-care-steps > li { counter-increment: step; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center;
    padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-care-steps > li::before { content: counter(step); grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--sx-accent-soft); color: var(--sx-accent-text); font-weight: 700; font-size: 0.85rem; }
.sx-care-steps > li > strong { grid-column: 2; color: var(--sx-heading); font-size: 0.92rem; }
.sx-care-steps > li > span { grid-column: 2; font-size: 0.82rem; color: var(--sx-muted); }
.sx-care-steps > li > .btn { grid-column: 3; grid-row: 1 / span 2; }
.sx-care-steps > li.sx-care-key { counter-increment: none; display: block; padding: 0; border: 0; background: none; }
.sx-care-steps > li.sx-care-key::before { content: none; }
.sx-care-steps > li.sx-care-key pre { font-size: 1rem; letter-spacing: 0.02em; }
@media (max-width: 640px) { .sx-care-steps > li { grid-template-columns: 1.9rem minmax(0, 1fr); } .sx-care-steps > li > .btn { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 0.4rem; } }
.sx-update-versions { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--sx-muted); white-space: nowrap; }
.sx-update-versions .sx-icon { width: 0.8rem; height: 0.8rem; }
.sx-update-versions strong { color: var(--sx-success-text); }
.sx-care-pill.updates { background: var(--sx-warning-bg); color: var(--sx-warning-text); }

/* Google Ads on the Analytics tab (ADR-031). */
.sx-ga-section { display: flex; align-items: center; gap: 0.6rem; margin: 1.75rem 0 0.9rem; font-size: 1.15rem; color: var(--sx-heading); }
.sx-ga-ads-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9px; color: #fff; background: conic-gradient(from 220deg, #4285f4, #34a853, #fbbc04, #4285f4); }
.sx-ga-ads-mark .sx-icon { width: 1rem; height: 1rem; }
.sx-ga-spend { display: flex; align-items: flex-end; gap: 2px; height: 10rem; padding-top: 0.5rem; border-bottom: 1px solid var(--sx-border); }
.sx-ga-spend span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--sx-accent); }
.sx-ga-spend span:hover { filter: brightness(1.25); }

/* Admin Settings: the sections as a bar across the top (the content uses the full width below it). */
.sx-settings.horizontal { display: block; max-width: 84rem; }
.sx-settings.horizontal:has(.sx-svc-editor) { display: block; max-width: 96rem; }
.sx-settings.horizontal .sx-settings-nav {
    flex-direction: row; align-items: center; gap: 0.1rem; position: static; padding: 0.35rem; margin-bottom: 1.25rem;
    overflow-x: auto; scrollbar-width: thin;
}
.sx-settings.horizontal .sx-settings-group { display: none; }
.sx-settings.horizontal .sx-settings-divider { flex: none; width: 1px; height: 1.4rem; margin: 0 0.1rem; background: var(--sx-border); }
.sx-settings.horizontal .sx-settings-nav a { flex: none; gap: 0.35rem; padding: 0.5rem 0.5rem; font-size: 0.88rem; }
/* Plain icons (no tiles) so all the sections fit on one line. */
.sx-settings.horizontal .sx-settings-nav-icon,
.sx-settings.horizontal .sx-settings-nav a.active .sx-settings-nav-icon { width: auto; height: auto; background: none; box-shadow: none; color: inherit; }
.sx-settings.horizontal .sx-settings-nav-icon .sx-icon { width: 1rem; height: 1rem; }
.sx-settings.horizontal .sx-settings-nav-text .hint { display: none; }
.sx-settings.horizontal .sx-settings-status { margin-left: 0.1rem; }

/* Backups (WPvivid) and security (Atlant Security) on the Updates tab. */
.sx-protect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .sx-protect-grid { grid-template-columns: minmax(0, 1fr); } }
.sx-protect-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; margin: 0; }
.sx-protect-facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint); }
.sx-protect-facts dd { margin: 0.1rem 0 0; font-weight: 600; color: var(--sx-heading); font-size: 0.92rem; }
.sx-protect-facts dd.good { color: var(--sx-success-text); }
.sx-protect-facts dd.warn { color: var(--sx-orange); }
.sx-protect-facts dd.bad { color: var(--sx-red); }
.sx-care-pill.danger { background: var(--sx-danger-bg); color: var(--sx-danger-text); }

/* Websites in the client portal (ADR-032). */
.sx-psite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.8rem; }
.sx-psite { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-border); background: var(--sx-card);
    color: var(--sx-text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.sx-psite:hover { border-color: var(--sx-accent-border); color: var(--sx-text); text-decoration: none; transform: translateY(-1px); }
.sx-psite-top { display: flex; align-items: center; gap: 0.75rem; }
.sx-psite-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--sx-accent), #c04fd8); }
.sx-psite-icon.lg { width: 3.2rem; height: 3.2rem; border-radius: 14px; }
.sx-psite-icon .sx-icon { width: 1.2rem; height: 1.2rem; }
.sx-psite-host { display: block; font-family: var(--sx-heading-font); font-weight: 700; font-size: 1.05rem; color: var(--sx-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-psite-state { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--sx-muted); }
.sx-psite-state.up { color: var(--sx-success-text); }
.sx-psite-state.down { color: var(--sx-red); font-weight: 600; }
.sx-psite-line { font-size: 0.85rem; color: var(--sx-muted); }
.sx-psite-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.6rem; border-top: 1px solid var(--sx-border); font-size: 0.82rem; font-weight: 600; color: var(--sx-accent-text); }
.sx-psite-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sx-psite-hero h1 { font-size: 1.6rem; }
.sx-psite-care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 900px) { .sx-psite-care { grid-template-columns: minmax(0, 1fr); } }
.sx-psite-big { font-family: var(--sx-heading-font); font-size: 1.5rem; font-weight: 800; color: var(--sx-heading); margin-bottom: 0.35rem; }
.sx-psite-big span { font-family: var(--bs-body-font-family); font-size: 0.8rem; font-weight: 500; color: var(--sx-muted); }
.sx-psite-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.85rem; }
.sx-psite-updates li { display: flex; justify-content: space-between; gap: 0.75rem; }
.sx-psite-visitors { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.8rem; }
@media (max-width: 900px) { .sx-psite-visitors { grid-template-columns: minmax(0, 1fr); } }
.sx-psite-chart { height: 9rem; }

/* Waiting updates as cards (more fit on screen); tick to choose. */
.sx-update-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; }
.sx-update-card { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; margin: 0; padding: 0.75rem 0.85rem; border-radius: 12px; border: 1px solid var(--sx-border);
    background: var(--sx-card-raised); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.sx-update-card:hover { border-color: var(--sx-accent-border); }
.sx-update-card:has(input:checked) { border-color: var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 9%, var(--sx-card)); }
.sx-update-card.locked { cursor: not-allowed; opacity: 0.65; }
.sx-update-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.sx-update-card .form-check-input { margin: 0; flex: none; }
.sx-update-kind { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-update-kind.core { background: color-mix(in srgb, #4d9de0 18%, var(--sx-card)); color: #4d9de0; }
.sx-update-kind.theme { background: color-mix(in srgb, #c04fd8 18%, var(--sx-card)); color: #c04fd8; }
.sx-update-kind .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-update-name { font-weight: 600; color: var(--sx-heading); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-update-card .sx-update-versions { margin-top: auto; padding-top: 0.45rem; }

/* Service journeys (ADR-033): the brief form, its answers, and the brief box on the step. */
.sx-brief { display: grid; gap: 1.1rem; }
.sx-brief-field.missing .form-control { border-color: var(--sx-red); }
.sx-brief-missing { font-size: 0.8rem; color: var(--sx-red); margin-top: 0.3rem; }
.sx-req { color: var(--sx-red); font-weight: 700; }
.sx-brief-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sx-brief-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.85rem; border-radius: 999px; border: 1px solid var(--sx-border-strong);
    background: var(--sx-card); color: var(--sx-text); font-size: 0.88rem; font-weight: 500; transition: border-color 0.12s, background 0.12s; }
.sx-brief-chip:hover:not(:disabled) { border-color: var(--sx-accent-border); }
.sx-brief-chip.on { border-color: var(--sx-accent); background: var(--sx-accent-soft); color: var(--sx-accent-text); font-weight: 600; }
.sx-brief-chip .sx-icon { width: 0.85rem; height: 0.85rem; }
.sx-brief-field.missing .sx-brief-chip { border-color: color-mix(in srgb, var(--sx-red) 55%, var(--sx-border-strong)); }
.sx-brief-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem 1.25rem; margin: 0; }
.sx-brief-answers dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sx-faint); }
.sx-brief-answers dd { margin: 0.15rem 0 0; color: var(--sx-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-brief-box { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--sx-border); background: var(--sx-card-raised); }

/* Price boxes: typed incl. or excl. VAT (ADR-035), the other figure under each. */
.sx-price-vat { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0; margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--sx-label); cursor: pointer; }
.sx-price-vat .form-check-input { width: 2.3rem; height: 1.25rem; margin: 0; float: none; cursor: pointer; }
.sx-price-other { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--sx-muted); }
/* The plan chosen with a brief, first among the answers. */
.sx-brief-answers .sx-brief-plan dd { font-weight: 600; color: var(--sx-accent-text); }

/* A password box with show / hide. */
.sx-password-field { position: relative; }
.sx-password-field .form-control { padding-right: 2.75rem; }
.sx-password-field .sx-icon-button { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); }

/* Drag and drop (js/app.js): the upload area lights up while files are over it. */
.sx-upload, .sx-drop-area, .sx-chat-compose { transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s; }
.sx-upload.drag, .sx-drop-area.drag, .sx-chat-compose.drag { border-color: var(--sx-accent); background: var(--sx-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 22%, transparent); }
.sx-drop-area { border: 1px dashed transparent; border-radius: 10px; padding: 0.35rem; margin-left: -0.35rem; margin-right: -0.35rem; }
.sx-chat-compose.drag { border-radius: 10px; }

/* The social media content calendar (ADR-036): a month grid of posts, coloured by status. */
.sx-content-cal .sx-card-header { gap: 0.75rem; }
.sx-cal-month-name { min-width: 9.5rem; text-align: center; font-family: var(--sx-heading-font); font-weight: 700; color: var(--sx-heading); }
.sx-post-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: -0.25rem 0 0.9rem; }
.sx-post-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--sx-muted); }
.sx-post-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-faint); flex: none; }
.sx-post-status.sent .dot { background: var(--sx-orange); }
.sx-post-status.approved .dot { background: var(--sx-green); }
.sx-post-status.changes .dot { background: var(--sx-red); }
.sx-post-status.posted .dot { background: var(--sx-blue); }
.sx-cal-grid { border: 1px solid var(--sx-border); border-radius: 12px; overflow: hidden; background: var(--sx-card); }
.sx-cal-weekdays, .sx-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sx-cal-weekdays span { padding: 0.55rem 0.65rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-faint);
    background: var(--sx-card-raised); border-bottom: 1px solid var(--sx-border); }
.sx-cal-cell { min-width: 0; min-height: 7.25rem; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; border-right: 1px solid var(--sx-border); border-bottom: 1px solid var(--sx-border); }
.sx-cal-week .sx-cal-cell:last-child { border-right: 0; }
.sx-cal-week:last-child .sx-cal-cell { border-bottom: 0; }
.sx-cal-cell.other { background: color-mix(in srgb, var(--sx-card-raised) 70%, transparent); }
.sx-cal-cell.other .sx-cal-date { color: var(--sx-faint); }
.sx-cal-date { align-self: flex-start; border: 0; background: none; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--sx-text); }
.sx-cal-date:hover { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-cal-cell.today .sx-cal-date { background: var(--sx-accent); color: #fff; }
.sx-cal-weekday { display: none; }
.sx-post-chip { display: block; width: 100%; text-align: left; padding: 0.3rem 0.45rem; border: 1px solid var(--sx-border); border-left: 3px solid var(--sx-faint); border-radius: 8px;
    background: var(--sx-card-raised); font-size: 0.78rem; line-height: 1.3; color: var(--sx-text); transition: border-color 0.12s, transform 0.12s; }
.sx-post-chip:hover { border-color: var(--sx-accent-border); transform: translateY(-1px); }
.sx-post-chip.sent { border-left-color: var(--sx-orange); }
.sx-post-chip.approved { border-left-color: var(--sx-green); }
.sx-post-chip.changes { border-left-color: var(--sx-red); }
.sx-post-chip.posted { border-left-color: var(--sx-blue); opacity: 0.85; }
.sx-post-chip-meta { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sx-muted); }
.sx-post-chip-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-cal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }
@media (max-width: 767.98px) {
    .sx-cal-weekdays { display: none; }
    .sx-cal-week { grid-template-columns: 1fr; }
    .sx-cal-cell { min-height: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .sx-cal-cell.empty:not(.today), .sx-cal-cell.other { display: none; }
    .sx-cal-date { min-width: 4.75rem; }
    .sx-cal-weekday { display: inline; font-weight: 600; color: var(--sx-muted); }
    .sx-cal-cell .sx-post-chip { flex: 1 1 14rem; }
}

/* The post editor: images or videos to pick, numbered in order (the first is the cover). */
.sx-post-media-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; }
.sx-media-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--sx-card-raised); }
.sx-media-tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sx-media-tile.on { border-color: var(--sx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 25%, transparent); }
.sx-media-kind { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; height: 100%; font-size: 0.75rem; font-weight: 700; color: var(--sx-muted); }
.sx-media-order { position: absolute; top: 0.3rem; right: 0.3rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sx-accent);
    color: #fff; font-size: 0.75rem; font-weight: 800; }

/* The client's posts: cards to approve, coming up, and recently posted. */
.sx-post-section-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.sx-post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.sx-post-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sx-border); border-radius: 14px; background: var(--sx-card); }
.sx-post-card.sent { border-color: color-mix(in srgb, var(--sx-orange) 45%, var(--sx-border)); }
.sx-post-media { position: relative; aspect-ratio: 4 / 3; background: var(--sx-card-raised); }
.sx-post-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* A post without images or video: a short band instead of an empty picture frame. */
.sx-post-media.text, .sx-post-cards.compact .sx-post-media.text { aspect-ratio: auto; height: 4.5rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--sx-accent) 14%, var(--sx-card-raised)), color-mix(in srgb, var(--sx-pink) 10%, var(--sx-card-raised))); }
.sx-post-media.text .sx-post-media-kind { color: var(--sx-accent-text); }
.sx-post-media-kind { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--sx-muted); }
.sx-post-media-count { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; font-weight: 700; }
.sx-post-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1rem 1.05rem; }
.sx-post-when { font-size: 0.8125rem; font-weight: 700; color: var(--sx-accent-text); }
.sx-post-platforms { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sx-post-platforms span { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--sx-neutral-bg); color: var(--sx-neutral-text); font-size: 0.75rem; font-weight: 600; }
.sx-post-caption { margin: 0.2rem 0; font-size: 0.9375rem; color: var(--sx-text); white-space: pre-wrap; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.sx-post-cards.compact .sx-post-media { aspect-ratio: 16 / 9; }
.sx-post-cards.compact .sx-post-caption { -webkit-line-clamp: 3; line-clamp: 3; }

/* Custom apps (ADR-039): the specification in the brief, the AI assistant, the estimate and the plan. */
.sx-spec { padding: 1rem 1.1rem; border-radius: var(--sx-radius-section); border: 1px solid var(--sx-accent-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--sx-accent) 6%, var(--sx-card)), var(--sx-card) 65%); }
.sx-spec.empty { border-style: dashed; }
.sx-spec.drag { border-color: var(--sx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 20%, transparent); }
.sx-spec-file, .sx-spec-intro { display: flex; align-items: center; gap: 0.9rem; }
.sx-spec-doc { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 3.1rem; border-radius: 8px;
    background: var(--sx-card); border: 1px solid var(--sx-border-strong); color: var(--sx-accent-text); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em;
    box-shadow: inset 0 -3px 0 var(--sx-accent); }
.sx-spec-ok { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    background: var(--sx-success-bg); color: var(--sx-success-text); border: 1px solid var(--sx-success-border); }
.sx-spec-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.sx-ai-button { color: #fff; border: 0; background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sx-accent) 70%, transparent); }
.sx-ai-button:hover, .sx-ai-button:focus-visible { color: #fff; filter: brightness(1.08); }

.sx-assist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; min-height: 0; height: 100%; }
.sx-assist-chat, .sx-assist-doc { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-section); background: var(--sx-card-raised); }
.sx-assist-messages { flex: 1; min-height: 16rem; max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; scroll-behavior: smooth; }
.sx-assist-msg { display: flex; gap: 0.55rem; align-items: flex-end; max-width: 92%; }
.sx-assist-msg.me { margin-left: auto; flex-direction: row-reverse; }
.sx-assist-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); }
.sx-assist-avatar .sx-icon { width: 0.95rem; height: 0.95rem; }
.sx-assist-bubble { padding: 0.65rem 0.85rem; border-radius: 14px 14px 14px 4px; background: var(--sx-card); border: 1px solid var(--sx-border); font-size: 0.92rem; line-height: 1.5; color: var(--sx-text); }
.sx-assist-msg.me .sx-assist-bubble { border-radius: 14px 14px 4px 14px; background: var(--sx-accent-soft); border-color: var(--sx-accent-border); }
.sx-assist-typing { display: inline-flex; align-items: center; gap: 0.3rem; }
.sx-assist-typing > span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sx-accent); animation: sx-typing 1.2s ease-in-out infinite; }
.sx-assist-typing > span:nth-child(2) { animation-delay: 0.15s; }
.sx-assist-typing > span:nth-child(3) { animation-delay: 0.3s; }
.sx-assist-typing em { margin-left: 0.4rem; font-style: normal; color: var(--sx-muted); font-size: 0.85rem; }
@keyframes sx-typing { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sx-assist-typing > span { animation: none; opacity: 0.7; } }
.sx-assist-input { padding: 0.75rem; border-top: 1px solid var(--sx-border); }
.sx-assist-compose { display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.35rem 0.4rem 0.4rem 0.2rem; border-radius: 14px; border: 1px solid var(--sx-border-strong); background: var(--sx-input); transition: border-color 0.15s, box-shadow 0.15s; }
.sx-assist-compose:focus-within { border-color: var(--sx-focus-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 14%, transparent); }
.sx-assist-compose textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--sx-text); font-size: 0.92rem; line-height: 1.45; padding: 0.4rem 0.6rem; }
.sx-assist-compose textarea::placeholder { color: var(--sx-faint); }
.sx-assist-send {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-pink)); color: #fff; box-shadow: 0 6px 14px -8px rgba(124, 77, 214, 0.9);
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.sx-assist-send .sx-icon { width: 1rem; height: 1rem; transform: translate(-1px, 1px); }
.sx-assist-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(124, 77, 214, 1); }
.sx-assist-send:focus-visible { outline: 2px solid var(--sx-focus-border); outline-offset: 2px; }
.sx-assist-send:disabled { background: var(--sx-hover); color: var(--sx-faint); box-shadow: none; cursor: not-allowed; }
.sx-assist-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem 0.5rem; }
.sx-assist-progress { height: 4px; margin: 0 1rem; border-radius: 999px; background: var(--sx-border); overflow: hidden; }
.sx-assist-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sx-accent), var(--sx-pink)); transition: width 0.4s ease; }
.sx-assist-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.6rem 1rem 0; }
.sx-assist-chip { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; background: var(--sx-card); border: 1px solid var(--sx-border-strong); color: var(--sx-muted); }
.sx-assist-doc-body { flex: 1; min-height: 0; max-height: 62vh; overflow-y: auto; margin: 0.75rem; padding: 1.25rem 1.4rem; border-radius: 10px; background: var(--sx-card); border: 1px solid var(--sx-border); }
.sx-assist-doc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 12rem; color: var(--sx-muted); text-align: center; }
.sx-assist-doc-empty .sx-icon { width: 1.6rem; height: 1.6rem; color: var(--sx-accent-text); }
@media (max-width: 900px) { .sx-assist { grid-template-columns: minmax(0, 1fr); } .sx-assist-messages, .sx-assist-doc-body { max-height: 45vh; } }

.sx-md { color: var(--sx-text); font-size: 0.92rem; line-height: 1.6; }
.sx-md p { margin: 0 0 0.6rem; }
.sx-md ul, .sx-md ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.sx-md li { margin-bottom: 0.2rem; }
.sx-md li.d1 { margin-left: 1rem; } .sx-md li.d2 { margin-left: 2rem; } .sx-md li.d3 { margin-left: 3rem; }
.sx-md code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--sx-accent-soft); color: var(--sx-accent-text); font-size: 0.88em; }
.sx-md strong { color: var(--sx-heading); }
.sx-md hr { border-color: var(--sx-border); opacity: 1; }
.sx-md-h1, .sx-md-h2, .sx-md-h3, .sx-md-h4 { font-family: var(--sx-heading-font); color: var(--sx-heading); font-weight: 700; }
.sx-md-h1 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.sx-md-h2 { font-size: 1.08rem; margin: 1.1rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--sx-border); }
.sx-md-h3 { font-size: 0.98rem; margin: 0.9rem 0 0.35rem; }
.sx-md-h4 { font-size: 0.92rem; margin: 0.75rem 0 0.3rem; }
.sx-md > :first-child { margin-top: 0; }
.sx-md-table { overflow-x: auto; margin-bottom: 0.75rem; }
.sx-md-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sx-md-table th, .sx-md-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--sx-border); text-align: left; vertical-align: top; }
.sx-md-table th { color: var(--sx-heading); font-weight: 600; }

.sx-est-head { display: flex; align-items: flex-start; gap: 0.9rem; }
.sx-est-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.sx-est-tiles > div { padding: 0.75rem 0.9rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); background: var(--sx-card-raised); min-width: 0; }
.sx-est-tiles span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--sx-muted); }
.sx-est-tiles strong { display: block; margin-top: 0.15rem; font-family: var(--sx-heading-font); font-size: 1.05rem; color: var(--sx-heading); overflow-wrap: anywhere; }
.sx-est-tiles small { color: var(--sx-muted); font-size: 0.78rem; }
.sx-est-title { display: flex; align-items: center; gap: 0.45rem; margin: 1.4rem 0 0.6rem; font-size: 0.98rem; font-weight: 700; color: var(--sx-heading); }
.sx-est-table { border: 1px solid var(--sx-border); border-radius: var(--sx-radius); overflow: hidden; }
.sx-est-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.6rem 0.85rem; }
.sx-est-row + .sx-est-row { border-top: 1px solid var(--sx-border); }
.sx-est-hours { font-weight: 700; color: var(--sx-heading); white-space: nowrap; }
.sx-est-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.sx-est-list { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.sx-est-list li { margin-bottom: 0.3rem; }
.sx-est-plan-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.sx-est-plan-row label { font-size: 0.9rem; }
.sx-est-plan-row .sx-unit-input { width: 7rem; }
.sx-est-phase { padding: 0.5rem 0; border-bottom: 1px dashed var(--sx-border); }
.sx-est-weeks { width: 6.5rem; flex: none; }
.sx-est-plan-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--sx-border); font-weight: 600; color: var(--sx-heading); }
.sx-aicheck-busy.compact { flex-direction: row; gap: 1rem; padding: 0.5rem 0; text-align: left; }
.sx-aicheck-busy.compact .sx-aicheck-orb { width: 3.5rem; height: 3.5rem; }
@media (max-width: 720px) {
    .sx-est-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-est-row { grid-template-columns: minmax(0, 1fr) auto; }
    .sx-est-row > :last-child { grid-column: 1 / -1; }
    .sx-est-notes { grid-template-columns: minmax(0, 1fr); }
}

.sx-plan-bar { display: flex; gap: 3px; height: 0.7rem; margin: 0.25rem 0 1rem; }
.sx-plan-bar > span { flex-basis: 0; border-radius: 999px; min-width: 0.7rem; }
.sx-plan-bar .c0, .sx-plan-dot.c0 { background: var(--sx-accent); }
.sx-plan-bar .c1, .sx-plan-dot.c1 { background: var(--sx-pink); }
.sx-plan-bar .c2, .sx-plan-dot.c2 { background: #4d9de0; }
.sx-plan-bar .c3, .sx-plan-dot.c3 { background: var(--sx-green); }
.sx-plan-bar .c4, .sx-plan-dot.c4 { background: #f09a58; }
.sx-plan-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sx-plan-phases li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-plan-dot { flex: none; width: 0.7rem; height: 0.7rem; margin-top: 0.35rem; border-radius: 50%; }
.sx-plan-weeks { flex: none; font-weight: 700; color: var(--sx-heading); }
.sx-plan-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.sx-plan-hours > div { padding: 0.6rem 0.8rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); }
.sx-plan-hours span { display: block; font-size: 0.8rem; color: var(--sx-muted); }
.sx-plan-hours strong { font-family: var(--sx-heading-font); color: var(--sx-heading); }

/* A report just made (the popup's result). */
.sx-report-done { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 0.5rem 0; text-align: center; }
.sx-report-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, var(--sx-green), color-mix(in srgb, var(--sx-green) 60%, var(--sx-accent))); box-shadow: 0 10px 24px -10px var(--sx-green); animation: sx-pop 0.25s ease-out; }
.sx-report-done-icon .sx-icon { width: 1.6rem; height: 1.6rem; }
.sx-report-done-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; width: 100%; text-align: left; }
.sx-report-done-list li { padding: 0.55rem 0.8rem; border-radius: var(--sx-radius); background: var(--sx-card-raised); border: 1px solid var(--sx-border); font-size: 0.9rem; }

/* WordPress tools (ADR-041): the plugin kit, installing, and the SEO page check. */
.sx-kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.sx-kit-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); background: var(--sx-card-raised); }
.sx-kit-list li.missing { border-style: dashed; background: transparent; }
.sx-kit-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sx-success-bg); color: var(--sx-success-text); }
.sx-kit-list li.missing .sx-kit-dot { background: var(--sx-accent-soft); color: var(--sx-accent-text); }
.sx-kit-dot .sx-icon { width: 0.9rem; height: 0.9rem; }
.sx-kit-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sx-border); }
.sx-kit-found { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-accent-border); background: var(--sx-accent-soft); }
.sx-kit-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sx-kit-sites li { padding-bottom: 0.6rem; border-bottom: 1px solid var(--sx-border); }
.sx-kit-sites li:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-update-cards li.has-zip { display: flex; flex-direction: column; gap: 0.4rem; }
.sx-update-zip { width: 100%; }
@media (max-width: 720px) { .sx-kit-add { grid-template-columns: minmax(0, 1fr); } }

.sx-seo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; }
.sx-seo-primary { border-color: var(--sx-accent-border); font-weight: 600; }
.sx-seo-now { margin: 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.sx-seo-now dt { font-size: 0.78rem; font-weight: 600; color: var(--sx-muted); }
.sx-seo-now dd { margin: 0; overflow-wrap: anywhere; }
.sx-seo-preview { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--sx-radius); background: #fff; border: 1px solid #dadce0; font-family: Arial, sans-serif; }
.sx-seo-preview-url { font-size: 0.8rem; color: #4d5156; overflow-wrap: anywhere; }
.sx-seo-preview-title { margin-top: 0.15rem; font-size: 1.15rem; line-height: 1.3; color: #1a0dab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-seo-preview-desc { margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.45; color: #4d5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-seo-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.sx-seo-findings li { display: flex; gap: 0.55rem; align-items: baseline; }
.sx-seo-findings .dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sx-orange, #f09a58); transform: translateY(-0.05rem); }
.sx-seo-findings li.good .dot { background: var(--sx-green); }
.sx-seo-findings li.critical .dot { background: var(--sx-red); }
.sx-seo-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.sx-seo-facts > span { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; background: var(--sx-card-raised); border: 1px solid var(--sx-border); color: var(--sx-muted); }
@media (max-width: 900px) { .sx-seo-grid { grid-template-columns: minmax(0, 1fr); } }

/* Settings › Services, an app service's price (ADR-039): how an app is quoted, then its hourly rate. */
.sx-app-price-steps { list-style: none; counter-reset: sx-step; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.6rem; }
.sx-app-price-steps li { counter-increment: sx-step; position: relative; padding: 0.7rem 0.8rem 0.75rem 2.55rem; border-radius: var(--sx-radius); border: 1px solid var(--sx-border); background: var(--sx-card-raised); font-size: 0.8rem; line-height: 1.45; color: var(--sx-muted); }
.sx-app-price-steps li::before {
    content: counter(sx-step); position: absolute; left: 0.75rem; top: 0.72rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    font-size: 0.72rem; font-weight: 700; color: var(--sx-accent-text); background: var(--sx-accent-soft);
}
.sx-app-price-steps strong { display: block; margin-bottom: 0.1rem; font-size: 0.86rem; font-weight: 600; color: var(--sx-heading); }
.sx-app-rate-example { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0.55rem 0.8rem; border-radius: var(--sx-radius); background: var(--sx-accent-soft); font-size: 0.84rem; color: var(--sx-muted); }
.sx-app-rate-example strong { color: var(--sx-heading); }