:root {
    color-scheme: light;
    --font-sans: Arial, Helvetica, sans-serif;
    --brand-primary: #ed5a96;
    --brand-primary-dark: #d64b85;
    --brand-primary-light: #fbe2ef;
    --brand-secondary: #1b2140;
    --brand-secondary-soft: #30375f;
    --brand-accent: #9b3ea5;
    --brand-surface: #f5f5f7;
    --brand-sidebar: var(--brand-primary);
    --brand-header: #ffffff;
    --brand-text-on-primary: #ffffff;
    --brand-focus: #06b6d4;
    --text: #111827;
    --text-muted: #6b7280;
    --text-soft: #8a94a3;
    --surface: #ffffff;
    --surface-subtle: var(--brand-surface);
    --surface-tint: #fff7fb;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --control-border: #d1d5db;
    --control-border-hover: #c37a9e;
    --focus-border: var(--brand-primary-dark);
    --focus-ring: 0 0 0 3px rgba(237, 90, 150, 0.22);
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --focus: var(--brand-focus);
    --shadow: 0 18px 45px rgba(27, 33, 64, 0.12);
    --shadow-soft: 0 10px 24px rgba(27, 33, 64, 0.08);
    --shadow-hover: 0 12px 28px rgba(27, 33, 64, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-compact: 4px;
    --page-padding: clamp(0.85rem, 1.35vw, 1.45rem);
    --page-padding-compact: clamp(0.65rem, 1vw, 1rem);
    --page-top-padding: clamp(0.55rem, 0.8vw, 0.85rem);
    --header-content-gap: 0.18rem;
    --breadcrumb-gap: 0.35rem;
    --section-gap: clamp(1rem, 1.15vw, 1.2rem);
    --dashboard-section-gap: 1.25rem;
    --panel-padding: clamp(1rem, 1.15vw, 1.25rem);
    --panel-padding-compact: 0.75rem;
    --control-height: 2.35rem;
    --control-height-sm: 1.9rem;
    --button-height: 2.2rem;
    --button-height-sm: 1.85rem;
    --button-padding: 0.38rem 0.72rem;
    --button-padding-sm: 0.26rem 0.52rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.84rem;
    --font-size-base: 0.93rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.85rem;
    --line-height-tight: 1.22;
    --table-row-height: 2.45rem;
    --grid-gap: var(--section-gap);
    --table-cell-padding: 0.5rem 0.65rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --sidebar-width: 16.25rem;
    --sidebar-width-collapsed: 11.5rem;
    --sidebar-collapsed-width: var(--sidebar-width-collapsed);
    --header-height: 3.625rem;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    background: var(--surface-subtle);
    color: var(--text);
    font-size: var(--font-size-base);
    line-height: 1.42;
}

a { color: var(--brand-primary-dark); }
a:hover { color: var(--brand-secondary); }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip-link {
    position: fixed;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 1000;
    transform: translateY(-160%);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}
.skip-link:focus { transform: translateY(0); }

.app-body { overflow-x: hidden; }
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.app-workspace { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.app-main {
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    padding: var(--page-top-padding) var(--page-padding) var(--page-padding);
}
.readable-content, .readable-form { max-width: 72rem; }
.full-width { width: 100%; }

.guest-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(237, 90, 150, 0.15), transparent 30rem),
        linear-gradient(135deg, rgba(27, 33, 64, 0.06), rgba(251, 226, 239, 0.72)),
        var(--brand-surface);
}
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(0.85rem, 3vw, 2rem);
}
.login-card {
    width: min(100%, 25rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 5px solid var(--brand-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: clamp(1rem, 3vw, 1.45rem);
}
.login-card__brand {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}
.login-card__logo { width: min(12rem, 68vw); height: auto; display: block; }
.login-card h1 { margin: 0 0 var(--space-4); font-size: 1.45rem; line-height: 1.15; color: var(--brand-secondary); }
label { display: block; font-weight: 650; font-size: var(--font-size-sm); margin: 0 0 var(--space-2); color: var(--brand-secondary); }
input, select, textarea {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-compact);
    padding: 0.45rem 0.6rem;
    background: var(--surface);
    color: var(--text);
}
input[type="checkbox"], input[type="radio"] {
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem;
    min-height: 1rem;
    padding: 0;
    margin: 0;
    flex: 0 0 1rem;
    accent-color: var(--brand-primary);
    vertical-align: middle;
}
input[type="checkbox"] { border-radius: 0.2rem; }
input[type="radio"] { border-radius: 999px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
input:hover, select:hover, textarea:hover { border-color: var(--control-border-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--focus-border); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--focus-border); box-shadow: var(--focus-ring); }

.invitation-accept-shell { padding: clamp(1rem, 4vw, 2.25rem); }
.invitation-accept {
    width: min(100%, 24rem);
    display: grid;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: clamp(1rem, 3vw, 1.4rem);
}
.invitation-accept__brand { display: flex; justify-content: center; }
.invitation-accept__logo { width: min(8.75rem, 56vw); height: auto; display: block; }
.invitation-accept__intro { text-align: center; display: grid; gap: var(--space-1); }
.invitation-accept__intro .eyebrow { margin: var(--space-1) 0 0; }
.invitation-accept h1 { margin: 0; color: var(--brand-secondary); font-size: 1.45rem; line-height: 1.15; }
.invitation-accept__intro p:not(.eyebrow), .invitation-accept__meta { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.35; }
.invitation-accept__form { display: grid; gap: var(--space-3); }
.invitation-accept .btn--primary { width: 100%; margin-top: var(--space-1); }