:root {
    --pico-font-family: "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pico-font-size: 100%;
    --pico-border-radius: .5rem;
    --pico-line-height: 1.5;
    --pico-form-element-spacing-vertical: .6rem;
    --pico-form-element-spacing-horizontal: 1rem;
    --pico-typography-spacing-vertical: 1.4rem;
    --pico-spacing: 1.5rem;
    --app-radius: .85rem;
    --app-control-height: 3rem;
    --app-focus-glow: 0 0 0 3px var(--pico-primary-focus);
    --app-card-glow: 0 0 0 1px var(--app-border);
    --app-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
}

:root[data-theme="light"] {
    color-scheme: light;
    --pico-primary: #b60b55;
    --pico-primary-background: #b60b55;
    --pico-primary-border: #b60b55;
    --pico-primary-hover: #920943;
    --pico-primary-hover-background: #920943;
    --pico-primary-hover-border: #920943;
    --pico-primary-focus: rgba(182, 11, 85, .2);
    --pico-primary-inverse: #fff;
    --pico-background-color: #fff;
    --pico-color: #373239;
    --pico-muted-color: #6f6770;
    --pico-muted-border-color: #ece5ea;
    --pico-card-background-color: #fff;
    --pico-card-border-color: #eadde5;
    --pico-card-sectioning-background-color: #fff8fb;
    --pico-form-element-background-color: #fff;
    --pico-form-element-border-color: #dfd4dc;
    --pico-form-element-active-border-color: #b60b55;
    --pico-form-element-focus-color: #b60b55;
    --pico-switch-checked-background-color: #b60b55;
    --pico-del-color: #b42318;
    --app-bg: #f6f7f9;
    --app-surface: #fff;
    --app-surface-strong: #f5f6f8;
    --app-text: #312831;
    --app-muted: #6f6270;
    --app-border: #e1e4e8;
    --app-brand: #c51c5d;
    --app-brand-strong: #87083f;
    --app-brand-halo: rgba(240, 82, 148, .16);
    --app-accent: #f05294;
    --app-accent-2: #2aa89a;
    --app-glow: rgba(182, 11, 85, .22);
    --app-soft-glow: rgba(42, 168, 154, .14);
    --app-shadow: none;
    --app-header-shadow: 0 .55rem 1.5rem rgba(80, 24, 55, .07);
    --app-toggle-background: #fff;
    --app-toggle-shadow: 0 .35rem 1.1rem rgba(75, 28, 56, .12);
    --app-navigation-background: #fff;
    --app-nav-hover: #fff1f7;
    --app-nav-active-background: #f5eaf0;
    --app-nav-active-color: #970746;
    --app-sun: #f7b733;
    --app-moon: #5b315f;
    --app-brand-mark: linear-gradient(135deg, var(--app-brand), var(--app-accent), var(--app-accent-2));
    --app-header-background: color-mix(in srgb, var(--app-surface) 88%, transparent);
    --app-glass-highlight: rgba(255, 255, 255, .7);
    --app-glass: #fffafde8;
    --app-success: #28705c;
    --app-warning: #835d18;
    --app-info: #4966a9;
    --app-error: #a53750;
}

/* SFS internal server palette. Brand pink matches PoshInsights siAccent. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #17191e;
    --app-surface: #1e2128;
    --app-surface-strong: #252932;
    --app-text: #edf0f5;
    --app-muted: #a9b1bf;
    --app-border: #363c48;
    --app-brand: #c51c5d;
    --app-brand-strong: #f273a6;
    --app-accent: #f273a6;
    --app-accent-2: #83cbbb;
    --app-brand-halo: #39202c;
    --app-glow: #f273a638;
    --app-soft-glow: #83cbbb20;
    --app-shadow: none;
    --app-header-shadow: none;
    --app-toggle-background: #2a2732;
    --app-toggle-shadow: none;
    --app-navigation-background: #1c1a22;
    --app-nav-hover: #22252d;
    --app-nav-active-background: #35212c;
    --app-nav-active-color: #f9a9ca;
    --app-sun: #eac886;
    --app-moon: #b8bdce;
    --app-brand-mark: #c51c5d;
    --app-header-background: #1e2128;
    --app-glass-highlight: #ffffff17;
    --app-glass: #292530de;
    --app-success: #8bdfc1;
    --app-warning: #f3ce8c;
    --app-info: #a8bdfa;
    --app-error: #f6a4b9;
    --pico-primary: #f273a6;
    --pico-primary-background: #c51c5d;
    --pico-primary-border: #c51c5d;
    --pico-primary-hover: #f9a9ca;
    --pico-primary-hover-background: #ab164f;
    --pico-primary-hover-border: #ab164f;
    --pico-primary-focus: #f273a64d;
    --pico-primary-inverse: #fff;
    --pico-background-color: var(--app-bg);
    --pico-color: var(--app-text);
    --pico-h1-color: var(--app-text);
    --pico-h2-color: var(--app-text);
    --pico-h3-color: var(--app-text);
    --pico-muted-color: var(--app-muted);
    --pico-muted-border-color: var(--app-border);
    --pico-card-background-color: var(--app-surface);
    --pico-card-border-color: var(--app-border);
    --pico-card-sectioning-background-color: var(--app-surface-strong);
    --pico-form-element-background-color: #191c22;
    --pico-form-element-border-color: #4b5362;
    --pico-form-element-active-background-color: #211f27;
    --pico-form-element-active-border-color: var(--app-accent);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    --pico-form-element-color: var(--app-text);
    --pico-form-element-placeholder-color: #898d9e;
    --pico-switch-background-color: #665968;
    --pico-switch-checked-background-color: var(--app-brand);
    --pico-code-background-color: #2a2732;
    --pico-code-color: #f9a9ca;
    --pico-dropdown-background-color: var(--app-surface);
    --pico-dropdown-border-color: var(--app-border);
    --pico-dropdown-hover-background-color: var(--app-surface-strong);
    --pico-secondary: #b8bdce;
    --pico-secondary-border: #665968;
    --pico-secondary-hover: #f7f0f3;
    --pico-secondary-hover-border: #777e93;
    --pico-del-color: #f5a49e;
    --pico-table-border-color: var(--app-border);
}

/* Shared studio foundations; component styles own layout, not palette. */
html { background: var(--app-bg); }
body { margin: 0; color: var(--app-text); background: var(--app-bg); }
[x-cloak] { display: none !important; }
h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.25rem; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--app-text); }
h1, h2, h3, p, a, label { overflow-wrap: anywhere; }
h1:focus { outline: none; }
small { font-size: .875rem; }
a { text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }
button, [role=button], input, select, textarea { max-width: 100%; transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, transform .2s ease; }
button, [role=button], input:not([type=checkbox],[type=radio],[type=range],[type=hidden]), select { min-height: var(--app-control-height); }
button, [role=button] { font-weight: 550; }
button:not(.secondary,.outline,.contrast), [role=button]:not(.secondary,.outline,.contrast) { background-image: linear-gradient(155deg, #ffffff0d, #0000000d); box-shadow: inset 0 1px var(--app-glass-highlight); }
button:disabled { cursor: not-allowed; }
input:not([type=checkbox],[type=radio],[type=range],[type=hidden]), select, textarea { font-size: 1rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { box-shadow: var(--app-focus-glow); }
input[type=checkbox][role=switch] { width: 3rem; height: 1.65rem; }
label:has(input[type=checkbox],input[type=radio]) { padding-block: .5rem; }
fieldset { min-width: 0; }
fieldset:disabled { opacity: .6; }
form > div:has(> label) { margin-bottom: 1.25rem; }
button.contrast, [role=button].contrast { color: var(--app-error); background: color-mix(in srgb, var(--app-error) 8%, var(--app-surface)); border-color: color-mix(in srgb, var(--app-error) 40%, var(--app-border)); }
pre, code, kbd, samp { font-family: var(--app-mono); font-size: .875rem; }
pre { padding: 1.5rem; line-height: 1.9; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface-strong); overflow: auto; }
code { color: var(--app-brand-strong); }
table { font-size: 1rem; }
th, td { padding: 1.25rem 1.5rem; border-color: var(--app-border); }
thead th { color: var(--app-muted); background: var(--app-surface-strong); font-size: .9375rem; }
tbody tr:hover { background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface)); }
.app-panel { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-glass { background: linear-gradient(145deg, var(--app-glass-highlight), transparent), var(--app-glass); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); }
.app-glow { transition: box-shadow .3s ease, border-color .3s ease, transform .25s ease; }
.app-glow:focus-within { border-color: var(--app-accent); box-shadow: var(--app-card-glow); }
.app-eyebrow { color: var(--app-brand-strong); font-size: .875rem; letter-spacing: .045em; margin-bottom: 1rem; }
.app-intro { max-width: 48rem; color: var(--app-muted); font-size: 1.0625rem; line-height: 1.8; margin-bottom: 2rem; }
/* Alert semantics stay in the markup; color is never the only indication. */
:where(.app-callout, main [role=alert], dialog [role=alert]):not(:empty) {
    --notice-color: var(--app-error);
    position: relative; padding: 1.5rem 1.5rem 1.5rem 5.5rem; margin-block: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--notice-color) 30%, var(--app-border)); border-radius: var(--app-radius);
    background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--notice-color) 10%, transparent), transparent 70%), var(--app-glass);
    box-shadow: inset 0 1px var(--app-glass-highlight), 0 0 24px color-mix(in srgb, var(--notice-color) 6%, transparent);
    color: var(--app-text); overflow-wrap: anywhere;
}
:where(.app-callout, main [role=alert], dialog [role=alert]):not(:empty)::before {
    content: '!'; position: absolute; left: 1.5rem; top: 1.5rem; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: .9rem; font-size: 1.25rem; font-weight: 600; color: var(--notice-color);
    border: 1px solid color-mix(in srgb, var(--notice-color) 35%, transparent);
    background: color-mix(in srgb, var(--notice-color) 10%, transparent);
    box-shadow: inset 0 1px #ffffff17, 0 0 20px color-mix(in srgb, var(--notice-color) 16%, transparent);
}
.app-callout.app-callout--success { --notice-color: var(--app-success); }
.app-callout.app-callout--success::before { content: '✓'; }
.app-callout.app-callout--info { --notice-color: var(--app-info); }
.app-callout.app-callout--info::before { content: 'i'; }
.app-callout.app-callout--warning { --notice-color: var(--app-warning); }
.app-callout :last-child { margin-bottom: 0; }
.validation-message { color: var(--app-error); font-size: .9375rem; margin-block: .5rem 1rem; }
.invalid { border-color: var(--app-error); }
.validation-errors { list-style-position: inside; }
dialog { padding: 1rem; }
dialog::backdrop { background: #080910a6; backdrop-filter: blur(6px); }
dialog article { border: 1px solid var(--app-border); border-radius: 1.5rem; background: var(--app-surface); box-shadow: 0 24px 80px #0005; }
dialog article > header, dialog article > footer { background: transparent; }
.blazor-error-boundary { padding: 1.5rem; border-radius: 1rem; background: var(--app-error); color: var(--app-bg); }
.blazor-error-boundary::after { content: "An error has occurred."; }
@media (hover: hover) {
    button:not(:disabled):hover, [role=button]:hover { transform: translateY(-1px); }
    .app-glow:hover { transform: translateY(-3px); border-color: var(--app-accent); box-shadow: var(--app-card-glow); }
}
@media (max-width: 767px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
    :where(.app-callout, main [role=alert], dialog [role=alert]):not(:empty) { padding: 1.25rem 1.25rem 1.25rem 4.5rem; }
    :where(.app-callout, main [role=alert], dialog [role=alert]):not(:empty)::before { left: 1rem; top: 1.25rem; width: 2.5rem; height: 2.5rem; }
}
@supports not (backdrop-filter: blur(1px)) { .app-glass, dialog article { background: var(--app-surface-strong); } }
@media (prefers-reduced-transparency: reduce) { .app-glass, dialog article { backdrop-filter: none; background: var(--app-surface-strong); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    button:hover, [role=button]:hover, .app-glow:hover { transform: none; }
}

/* Theme icons live in MainLayout; html is outside CSS isolation. */
[data-theme="light"] .theme-icon-moon,
[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
    transform: translateY(1.4rem) rotate(45deg) scale(.78);
}
[data-theme="light"] .theme-icon-sun,
[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
}

/* Data workspaces share one compact search surface across host modules. */
.search-form { padding: 1.25rem; margin-block: 1.25rem; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); }
.search-form > label, .search-form .filters label, .referral-filters label { font-size: .875rem; font-weight: 600; color: var(--app-muted); }
.search-form .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem 1rem; margin-top: .75rem; }
.search-form input, .search-form select, .referral-filters input, .referral-filters select { margin-bottom: .5rem; min-height: 2.75rem; padding-block: .5rem; }
.search-form > button { width: auto; min-height: 2.5rem; padding: .4rem .75rem; margin: .5rem 0 0; font-size: .875rem; }
.detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.detail-heading h2, .detail-heading button { margin: 0; }
.detail-heading button { width: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) { .search-form { padding: 1rem; } }