@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { background: var(--color-canvas); color: var(--color-text-primary); font-family: var(--font-family-body); }
body { background: var(--color-canvas); color: var(--color-text-primary); font-size: 1rem; line-height: 1.55; }
.authenticated-app {
  --color-canvas: var(--workspace-canvas);
  --color-surface: var(--workspace-surface);
  --color-surface-raised: var(--workspace-surface);
  --color-surface-soft: var(--workspace-surface-soft);
  --color-text-primary: var(--workspace-text);
  --color-text-muted: var(--workspace-muted);
  --color-action-primary: var(--workspace-action);
  --color-action-primary-hover: var(--workspace-action-hover);
  --color-action-on-primary: #ffffff;
  --color-on-action: #ffffff;
  --color-border: var(--workspace-border);
  --color-border-subtle: var(--workspace-border);
  --font-family-body: var(--workspace-font);
  --radius-control: 0.55rem;
  --radius-card: 0.8rem;
  --shadow-card: 0 0.5rem 1.5rem rgba(20, 32, 45, 0.07);
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
}
.app-rail { background: var(--workspace-rail); color: var(--workspace-rail-text); }
.app-rail a { color: inherit; text-decoration: none; }
.app-rail__brand > span { background: var(--workspace-action); border-radius: 0.65rem; color: #fff; font-weight: 850; }
.app-rail__brand strong { font-size: 0.74rem; }
.app-rail__nav a, .app-rail__logout button { background: transparent; border: 0; border-radius: 0.65rem; color: var(--workspace-rail-text); cursor: pointer; font: inherit; text-decoration: none; }
.app-rail__nav a strong, .app-rail__logout strong { font-size: 0.67rem; font-weight: 650; }
.app-rail__nav a:hover, .app-rail__logout button:hover { background: var(--workspace-rail-hover); color: #fff; }
.app-rail__nav a[aria-current="page"] { background: var(--workspace-action); color: #fff; }
.app-rail a:focus-visible, .app-rail button:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.app-topbar { background: color-mix(in srgb, var(--workspace-surface) 94%, transparent); border-bottom: 1px solid var(--workspace-border); backdrop-filter: blur(0.8rem); }
.app-topbar > div:first-child strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar > div:first-child span { color: var(--workspace-muted); font-size: 0.68rem; }
.app-topbar__notification { border-radius: 50%; color: var(--workspace-muted); text-decoration: none; }
.app-topbar__notification:hover { background: var(--workspace-surface-soft); color: var(--workspace-text); }
.app-topbar__identity { background: var(--workspace-action); border-radius: 50%; color: #fff; font-size: 0.76rem; font-weight: 800; }
.app-topbar__identity img { border-radius: inherit; height: 100%; object-fit: cover; width: 100%; }
.app-account-menu[open] .app-topbar__identity { box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-action) 22%, transparent); }
.app-account-menu__panel { background: var(--workspace-surface); border: 1px solid var(--workspace-border); border-radius: var(--radius-card); box-shadow: var(--shadow-dialog); color: var(--workspace-text); }
.app-account-menu__label { color: var(--workspace-muted); font-size: 0.66rem; font-weight: 700; }
.app-account-menu__panel strong { font-size: 0.78rem; }
.app-account-menu__panel form { border-top: 1px solid var(--workspace-border); margin-top: 0.25rem; padding-top: 0.5rem; }
.app-account-menu__panel button { background: transparent; border: 0; border-radius: var(--radius-control); color: var(--workspace-text); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700; }
.app-account-menu__panel button:hover { background: var(--workspace-surface-soft); }
a { color: inherit; text-decoration: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }
.skip-link { background: var(--color-text-primary); border-radius: var(--radius-control); color: var(--color-canvas); }
.app-header { backdrop-filter: blur(1rem); background: color-mix(in srgb, var(--color-canvas) 88%, transparent); border-bottom: 1px solid var(--color-border-subtle); }
.brand__mark { background: var(--color-text-primary); border-radius: 0.72rem; color: var(--color-canvas); font-size: 1rem; font-weight: 800; }
.brand__copy strong { font-size: 1rem; letter-spacing: -0.02em; }
.brand__copy small, .stage-card__signal span, .roadmap__item span, .app-footer { color: var(--color-text-muted); font-size: 0.78rem; }
.primary-nav a { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 600; transition: color var(--transition-fast); }
.primary-nav a:hover { color: var(--color-text-primary); }
.primary-nav--app a { border-radius: var(--radius-control); }
.primary-nav--app a:hover { background: var(--color-surface-soft); }
.header-account { border: 0; border-radius: var(--radius-control); color: var(--color-text-primary); font: inherit; font-size: 0.86rem; font-weight: 750; }
.header-account--quiet { background: transparent; color: var(--color-text-muted); cursor: pointer; }
.header-account:hover, .header-account--quiet:hover { background: var(--color-surface-soft); }
.icon-button { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); }
.icon-button:hover { background: var(--color-surface-soft); transform: translateY(-1px); }

.hero { background: radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 30%); }
.eyebrow, .overline { color: var(--color-action-primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.authenticated-app .eyebrow, .authenticated-app .overline { font-weight: 650; letter-spacing: 0.035em; text-transform: none; }
.status-pulse, .trust-list li::before, .capability-icon--ready { background: var(--color-feedback-success); border-radius: 50%; }
.status-pulse { box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--color-feedback-success) 16%, transparent); }
.hero h1 { font-size: clamp(2.65rem, 6vw, 5.35rem); letter-spacing: -0.065em; line-height: 0.98; }
.hero__lead, .section-heading > p, .roadmap-copy > p { color: var(--color-text-muted); font-size: clamp(1rem, 1.6vw, 1.18rem); }

.button { border: 1px solid transparent; border-radius: var(--radius-control); font-size: 0.92rem; font-weight: 750; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--color-action-primary); color: var(--color-action-on-primary); }
.button--primary:hover { background: var(--color-action-primary-hover); }
.button--quiet { background: var(--color-surface); border-color: var(--color-border); }
.button--quiet:hover { border-color: var(--color-action-primary); }
.trust-list { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 650; }

.stage-card, .capability-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.stage-card__header h2, .section-heading h2, .roadmap-copy h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.08; }
.stage-card__header h2 { font-size: 1.25rem; letter-spacing: -0.025em; }
.status-badge { border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.status-badge--active, .status-badge--ready { background: color-mix(in srgb, var(--color-feedback-success) 13%, transparent); color: var(--color-feedback-success); }
.status-badge--next { background: color-mix(in srgb, var(--color-feedback-info) 12%, transparent); color: var(--color-feedback-info); }
.status-badge--danger { background: color-mix(in srgb, var(--color-feedback-danger) 12%, transparent); color: var(--color-feedback-danger); }
.progress-summary__value strong { font-size: 2rem; letter-spacing: -0.04em; }
.progress-summary__value span { color: var(--color-text-muted); font-size: 0.75rem; }
.progress-track { appearance: none; background: var(--color-surface-soft); border: 0; border-radius: 999px; }
.progress-track::-webkit-progress-bar { background: var(--color-surface-soft); border-radius: 999px; }
.progress-track::-webkit-progress-value { background: var(--color-action-primary); border-radius: 999px; }
.progress-track::-moz-progress-bar { background: var(--color-action-primary); border-radius: 999px; }
.stage-card__signal { border-top: 1px solid var(--color-border-subtle); }
.signal-icon { background: color-mix(in srgb, var(--color-feedback-success) 12%, transparent); border-radius: 50%; color: var(--color-feedback-success); }
.stage-card__signal strong { font-size: 0.86rem; }

.section--soft { background: var(--color-surface-soft); border-block: 1px solid var(--color-border-subtle); }
.capability-card { box-shadow: none; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.capability-card:hover { border-color: var(--color-action-primary); transform: translateY(-3px); }
.capability-card h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
.capability-card p { color: var(--color-text-muted); font-size: 0.86rem; }
.capability-icon--next { border: 2px solid var(--color-feedback-info); border-radius: 50%; }
.capability-icon--active { background: var(--color-accent); border: 2px solid var(--color-action-primary); border-radius: 50%; }

.roadmap__item { border-bottom: 1px solid var(--color-border); }
.roadmap__number { border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); font-size: 0.78rem; font-weight: 800; }
.roadmap__item--active .roadmap__number { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-action-on-primary); }
.roadmap__item strong { font-size: 0.95rem; }
.app-footer { background: var(--color-canvas); border-top: 1px solid var(--color-border-subtle); }

.auth-shell__backdrop { background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 38%); }
.auth-card, .message-card, .context-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.auth-card__intro h1, .message-card h1, .secure-layout h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.05em; line-height: 1.03; }
.auth-card__intro > p:last-child, .message-card > p, .secure-lead, .auth-card__note { color: var(--color-text-muted); }
.support-reference { background: var(--color-surface-soft); border-radius: var(--radius-control); padding: 0.85rem 1rem; }
.support-reference span { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.support-reference code { color: var(--color-text-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.82rem; }
.form-field label { font-size: 0.86rem; font-weight: 750; }
.form-field input, .form-field select, .form-field textarea { background-color: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); font: inherit; }
.password-visibility-toggle { background: transparent; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--color-text-muted); cursor: pointer; }
.password-visibility-toggle:hover, .password-visibility-toggle:focus-visible { color: var(--color-action-primary); }
.choice-card-list > legend { color: var(--color-text-primary); font-size: 0.86rem; font-weight: 800; }
.choice-card { background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.choice-card:hover { border-color: color-mix(in srgb, var(--color-action-primary) 55%, var(--color-border)); }
.choice-card:has(input:checked) { background: color-mix(in srgb, var(--color-action-primary) 8%, var(--color-canvas)); border-color: var(--color-action-primary); box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--color-action-primary) 12%, transparent); }
.choice-card:focus-within { outline: 3px solid color-mix(in srgb, var(--focus-ring-color) 38%, transparent); outline-offset: 2px; }
.choice-card > input { accent-color: var(--color-action-primary); }
.choice-card strong { font-size: 0.88rem; line-height: 1.35; }
.choice-card small { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.45; }
.choice-card:has(input:disabled) { cursor: not-allowed; opacity: 0.62; }
.form-field .input-suffix > span { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--color-text-muted); font-size: 0.86rem; font-weight: 750; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-action-primary); }
select { background-color: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); font: inherit; }
select:not([multiple]) { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 1rem) calc(50% - 0.1rem), calc(100% - 0.7rem) calc(50% - 0.1rem); background-repeat: no-repeat; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; min-height: 2.75rem; padding: 0.6rem 2.35rem 0.6rem 0.8rem; }
select:hover { border-color: var(--color-action-primary); }
select:disabled { background-color: var(--color-surface-soft); color: var(--color-text-muted); cursor: not-allowed; }
.form-field span, .validation-summary { color: #b42318; font-size: 0.8rem; }
[data-color-scheme="dark"] .form-field span, [data-color-scheme="dark"] .validation-summary { color: #ffaaa4; }
.validation-summary ul { margin: 0; padding-left: 1.15rem; }
.field-validation-error { display: block; margin-top: 0.35rem; }
.check-field { color: var(--color-text-muted); font-size: 0.86rem; }
.auth-card__note { border-top: 1px solid var(--color-border-subtle); font-size: 0.78rem; padding-top: 1.25rem; }
.secure-shell { background: radial-gradient(circle at 20% 35%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 30%); }
.secure-layout h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); }
.secure-actions span { color: var(--color-text-muted); font-size: 0.78rem; }
.secure-actions code { color: var(--color-action-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.workspace-home__heading h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; }
.workspace-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.workspace-card:hover { border-color: var(--color-action-primary); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.workspace-card--primary { background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface-raised)), var(--color-surface-raised)); }
.workspace-card__number { background: var(--color-surface-soft); border-radius: 50%; color: var(--color-action-primary); font-size: 0.7rem; font-weight: 850; }
.workspace-card h2 { font-size: 1.65rem; letter-spacing: -0.035em; }
.workspace-card p:last-child { color: var(--color-text-muted); font-size: 0.88rem; }
.workspace-card > strong { color: var(--color-action-primary); font-size: 0.86rem; }
.context-card h2 { font-size: 1.6rem; letter-spacing: -0.03em; }
.context-card dl div { border-top: 1px solid var(--color-border-subtle); }
.context-card dt { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.context-card dd { font-size: 0.9rem; font-weight: 650; }
.invite-shell { background: radial-gradient(circle at 80% 25%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 32%); }
.invite-layout h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; }
.invite-layout .context-card p { color: var(--color-text-muted); }
.invite-heading h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; margin-block: 0.55rem 0; }
.workspace-tabs { border-bottom: 1px solid var(--color-border); }
.workspace-tab { border-bottom: 3px solid transparent; color: var(--color-text-muted); font-size: 0.88rem; font-weight: 750; }
.workspace-tab:hover { color: var(--color-text-primary); }
.workspace-tab[aria-selected="true"] { border-bottom-color: var(--color-action-primary); color: var(--color-action-primary); }
.ui-tab-list { border-bottom: 1px solid var(--color-border); }
.ui-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 750; }
.ui-tab:hover { color: var(--color-text-primary); }
.ui-tab[aria-selected="true"] { border-bottom-color: var(--color-action-primary); color: var(--color-action-primary); }
.ui-tab:focus-visible { border-radius: var(--radius-control); outline: 3px solid color-mix(in srgb, var(--focus-ring-color) 38%, transparent); outline-offset: -3px; }
.invitation-compose h2, .invitation-list h2 { font-size: 1.6rem; letter-spacing: -0.03em; }
.feedback { border-radius: var(--radius-control); font-size: 0.88rem; }
.feedback--success { background: color-mix(in srgb, var(--color-feedback-success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-feedback-success) 35%, transparent); color: var(--color-feedback-success); }
.feedback--warning { background: color-mix(in srgb, var(--color-feedback-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-feedback-warning) 35%, transparent); color: var(--color-feedback-warning); }
.feedback--danger { background: color-mix(in srgb, var(--color-feedback-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-feedback-danger) 35%, transparent); color: var(--color-feedback-danger); }
.ui-toast { animation: ui-toast-enter 180ms ease-out both; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); color: var(--color-text-primary); font-size: 0.84rem; }
.ui-toast--leaving { animation: ui-toast-leave 180ms ease-in both; }
.ui-toast__marker { background: var(--color-feedback-info); border-radius: 50%; box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-feedback-info) 12%, transparent); }
.ui-toast--success .ui-toast__marker { background: var(--color-feedback-success); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-feedback-success) 12%, transparent); }
.ui-toast--warning .ui-toast__marker { background: var(--color-feedback-warning); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-feedback-warning) 12%, transparent); }
.ui-toast--danger .ui-toast__marker { background: var(--color-feedback-danger); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-feedback-danger) 12%, transparent); }
.ui-toast__close { background: transparent; border: 0; border-radius: 50%; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 1.2rem; }
.ui-toast__close:hover { background: var(--color-surface-soft); color: var(--color-text-primary); }
.ui-toast__close:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
@keyframes ui-toast-enter { from { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes ui-toast-leave { to { opacity: 0; transform: translateY(-0.35rem); } }
@keyframes ui-button-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.button[data-loading-mode="spinner"].is-loading { color: transparent; }
.button[data-loading-mode="spinner"].is-loading::after { animation: ui-button-spin 650ms linear infinite; border: 0.16rem solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; border-top-color: currentColor; box-sizing: border-box; color: var(--color-action-primary-contrast, white); content: ""; height: 1rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1rem; }
.form-note, .ajax-status, .invitation-items span, .empty-state span { color: var(--color-text-muted); font-size: 0.8rem; }
.ajax-status { color: var(--color-text-primary); }
.invitation-items li { border-top: 1px solid var(--color-border-subtle); }
.invitation-items strong { font-size: 0.9rem; }
.empty-state { background: var(--color-surface-soft); border-radius: var(--radius-control); }
.invitation-filter label, .invitation-pagination span { color: var(--color-text-muted); font-size: 0.8rem; }
.invitation-filter select { background: var(--color-surface-soft); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); color: var(--color-text-primary); min-height: 2.75rem; padding-inline: 0.8rem; }
.notification-shell { background: radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 30%); }
.notification-heading h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; }
.ui-feed__item { border-top: 1px solid var(--color-border-subtle); }
.ui-feed__marker { background: var(--color-feedback-success); border-radius: 50%; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-feedback-success) 12%, transparent); }
.ui-dialog { background: transparent; color: var(--color-text-primary); }
.ui-dialog::backdrop { background: color-mix(in srgb, var(--color-text-primary) 52%, transparent); backdrop-filter: blur(0.16rem); }
.ui-dialog__surface { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-dialog); }
.ui-dialog__header { border-bottom: 1px solid var(--color-border-subtle); }
.ui-dialog__header h2 { font-size: 1.35rem; letter-spacing: -0.03em; }
.ui-dialog__header p { color: var(--color-text-muted); font-size: 0.78rem; }
.ui-dialog__close { border-radius: var(--radius-control); color: var(--color-text-muted); font-size: 1.4rem; text-decoration: none; }
.ui-dialog__close:hover { background: var(--color-surface-soft); color: var(--color-text-primary); }
.ui-dialog__close:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.ui-dialog__actions { border-top: 1px solid var(--color-border-subtle); }
.ui-dialog__surface.is-submitting { cursor: wait; }
.ui-dialog__busy { background: color-mix(in srgb, var(--color-surface-raised) 78%, transparent); backdrop-filter: blur(0.12rem); }
.ui-operation-busy { background: color-mix(in srgb, var(--color-canvas) 72%, transparent); backdrop-filter: blur(0.12rem); cursor: wait; }
.ui-dialog__busy-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); color: var(--color-text-primary); }
.ui-dialog__busy-spinner { animation: ui-dialog-spin 700ms linear infinite; border: 0.17rem solid color-mix(in srgb, var(--color-action-primary) 24%, transparent); border-radius: 50%; border-top-color: var(--color-action-primary); }
.ui-confirm-dialog__body h2 { font-size: 1.3rem; letter-spacing: -0.025em; }
.ui-confirm-dialog__body p { color: var(--color-text-muted); font-size: 0.84rem; line-height: 1.55; }
.ui-confirm-dialog__accept--danger { background: var(--color-feedback-danger); border-color: var(--color-feedback-danger); color: white; }
.ui-confirm-dialog__accept--danger:hover { filter: brightness(0.94); }
@keyframes ui-dialog-spin { to { transform: rotate(360deg); } }
.ui-feed__heading strong { font-size: 0.95rem; }
.ui-feed__heading time, .ui-feed__content p { color: var(--color-text-muted); font-size: 0.82rem; }
.ui-feed__content a { color: var(--color-action-primary); font-size: 0.82rem; font-weight: 750; }
.ui-feed__content a:hover { text-decoration: underline; }
.operations-shell { background: radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--color-feedback-danger) 10%, transparent), transparent 30%); }
.operations-heading h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; }
.settings-summary { border-top: 1px solid var(--color-border-subtle); }
.settings-summary div { border-bottom: 1px solid var(--color-border-subtle); }
.settings-summary dt { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.settings-summary dd { font-size: 0.86rem; font-weight: 700; }
.settings-card__heading { border-bottom: 1px solid var(--color-border-subtle); }
.settings-card__security { background: color-mix(in srgb, var(--color-feedback-success) 12%, transparent); border-radius: 999px; color: var(--color-feedback-success); font-size: 0.7rem; font-weight: 800; }
.settings-section { border-bottom: 1px solid var(--color-border-subtle); }
.settings-section--activation { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised)); }
.settings-section legend { font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }
.settings-section__intro, .settings-section .form-field small, .setting-toggle small, .check-field--panel small, .settings-actions small, .settings-test small { color: var(--color-text-muted); font-size: 0.78rem; }
.settings-section .form-field label { font-size: 0.82rem; font-weight: 750; }
.settings-section .form-field input { background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); font: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.settings-section .form-field input:hover { border-color: var(--color-action-primary); }
.settings-section .form-field input:focus { border-color: var(--color-action-primary); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-action-primary) 13%, transparent); }
.settings-section .form-field span { color: var(--color-feedback-danger); font-size: 0.78rem; }
.setting-toggle { cursor: pointer; }
.setting-toggle__control > span { background: var(--color-border); border-radius: 999px; transition: background var(--transition-fast); }
.setting-toggle__control > span::after { background: var(--color-surface-raised); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); transition: transform var(--transition-fast); }
.setting-toggle__control input:checked + span { background: var(--color-action-primary); }
.setting-toggle__control input:focus-visible + span { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }
.check-field--panel { background: var(--color-surface-soft); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); color: var(--color-text-primary); padding: 0.85rem 1rem; }
.settings-actions { background: var(--color-surface-soft); }
.settings-actions strong, .settings-test strong, .setting-toggle strong, .check-field--panel strong { font-size: 0.86rem; }
.settings-test { border-top: 1px solid var(--color-border-subtle); }
.status-pulse--danger { background: var(--color-feedback-danger); box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--color-feedback-danger) 14%, transparent); }
.job-item { border-top: 1px solid var(--color-border-subtle); }
.job-item__summary span, .job-item__details dd { color: var(--color-text-muted); font-size: 0.8rem; }
.job-item__details dt { color: var(--color-text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.job-item__details code { color: var(--color-text-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.job-item__guidance { background: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle); border-radius: 0.8rem; padding: 1rem; }
.job-item__guidance strong { color: var(--color-text-primary); font-size: 0.78rem; }
.job-item__guidance span, .job-item__attempts { color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.5; }
.job-item__attempts { margin: 0; }
.job-item__technical summary { color: var(--color-action-primary); cursor: pointer; font-size: 0.82rem; font-weight: 700; }
.course-shell { background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 32%); }
.course-heading h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -0.055em; line-height: 1; }
.course-heading p:last-child, .course-create > p:not(.overline), .course-items span { color: var(--color-text-muted); }
.course-list h2, .course-create h2 { font-size: 1.6rem; letter-spacing: -0.03em; }
.course-items li { border-top: 1px solid var(--color-border-subtle); }
.course-item__link { color: var(--color-text-primary); text-decoration: none; }
.course-item__link:hover strong { color: var(--color-action-primary); }
.course-item__link:focus-visible { border-radius: var(--radius-control); outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }
.course-items strong { font-size: 0.95rem; }
.course-items span { font-size: 0.8rem; }
.course-empty__mark { background: color-mix(in srgb, var(--color-action-primary) 12%, transparent); border-radius: 50%; color: var(--color-action-primary); font-size: 0.7rem; font-weight: 850; }
.course-breadcrumb { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 700; }
.course-breadcrumb a { color: var(--color-action-primary); }
.course-detail-heading h1 { font-size: clamp(2.35rem, 5vw, 4.2rem); letter-spacing: -0.05em; line-height: 1; }
.course-detail-heading p:last-child, .course-editor > p:not(.overline) { color: var(--color-text-muted); }
.course-steps { border-top: 1px solid var(--color-border-subtle); }
.course-step { border-radius: var(--radius-control); color: var(--color-text-muted); }
.course-step > span { background: var(--color-surface-soft); border-radius: 50%; font-size: 0.68rem; font-weight: 850; }
.course-step small { font-size: 0.72rem; }
.course-step--active { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-raised)); color: var(--color-text-primary); }
.course-step--active > span { background: var(--color-action-primary); color: var(--color-on-action); }
.course-step--complete > span { background: var(--color-feedback-success); color: var(--color-on-action); }
.course-editor h2 { font-size: 1.75rem; letter-spacing: -0.035em; }
.course-content h2 { font-size: 1.75rem; letter-spacing: -0.035em; }
.course-unit-list li { border-top: 1px solid var(--color-border-subtle); }
.course-unit-list li > span { background: var(--color-surface-soft); border-radius: 50%; color: var(--color-action-primary); font-size: 0.68rem; font-weight: 850; }
.course-unit-list small { color: var(--color-text-muted); font-size: 0.72rem; }
.course-studio { background: color-mix(in srgb, var(--color-canvas) 92%, var(--color-surface-soft)); }
.studio-header { border-bottom: 1px solid var(--color-border-subtle); }
.studio-course-mark { background: var(--color-text-primary); border-radius: 0.9rem; color: var(--color-surface-raised); font-size: 1.15rem; font-weight: 850; }
.studio-header h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.045em; }
.studio-header__meta { color: var(--color-text-muted); font-size: 0.78rem; }
.studio-layout { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: calc(var(--radius-card) + 0.25rem); box-shadow: var(--shadow-card); overflow: hidden; }
.studio-sidebar { background: color-mix(in srgb, var(--color-surface-soft) 76%, var(--color-surface-raised)); border-right: 1px solid var(--color-border-subtle); }
.studio-nav-item { border: 1px solid transparent; border-radius: var(--radius-control); color: var(--color-text-primary); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); }
.studio-nav-item > span { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: 0.65rem; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 850; }
.studio-nav-item small, .studio-sidebar__note span { color: var(--color-text-muted); font-size: 0.72rem; }
.studio-nav-item b { background: var(--color-surface-raised); border-radius: 999px; color: var(--color-text-muted); font-size: 0.68rem; padding: 0.2rem 0.45rem; }
.studio-nav-item:hover { background: var(--color-surface-raised); border-color: var(--color-border-subtle); }
.studio-nav-item[aria-current="page"] { background: var(--color-surface-raised); border-color: color-mix(in srgb, var(--color-action-primary) 35%, var(--color-border-subtle)); box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--color-text-primary) 7%, transparent); }
.studio-nav-item[aria-current="page"] > span { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-on-action); }
.studio-nav-item--disabled { opacity: 0.58; }
.studio-sidebar__note { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); }
.studio-section-heading h2 { font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -0.045em; }
.studio-section-heading > p, .studio-field-copy p, .studio-form__footer, .new-unit-panel > div > p:last-child { color: var(--color-text-muted); }
.studio-field-block { border-top: 1px solid var(--color-border-subtle); }
.studio-field-copy label { font-size: 0.95rem; font-weight: 800; }
.studio-field-copy p, .studio-field-help, .studio-form__footer { font-size: 0.78rem; }
.curriculum { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); overflow: hidden; }
.curriculum__heading { background: var(--color-surface-soft); border-bottom: 1px solid var(--color-border-subtle); }
.curriculum__heading h3 { font-size: 1rem; }
.curriculum__heading span, .curriculum-list small { color: var(--color-text-muted); font-size: 0.74rem; }
.curriculum-empty { background: var(--color-surface-raised); }
.curriculum-empty__icon { background: color-mix(in srgb, var(--color-action-primary) 12%, transparent); border-radius: 0.8rem; color: var(--color-action-primary); font-size: 1.25rem; font-weight: 700; }
.curriculum-empty p { color: var(--color-text-muted); font-size: 0.82rem; }
.curriculum-list li { border-bottom: 1px solid var(--color-border-subtle); }
.curriculum-list li:last-child { border-bottom: 0; }
.curriculum-item__handle { color: var(--color-text-muted); letter-spacing: -0.2em; }
.curriculum-item__number { background: var(--color-surface-soft); border-radius: 0.65rem; color: var(--color-action-primary); font-size: 0.68rem; font-weight: 850; }
.new-unit-panel { background: var(--color-surface-soft); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); }
.new-unit-panel h3 { font-size: 1.2rem; letter-spacing: -0.025em; }
.studio-feedback { margin-block: 1rem; }
.rich-editor { border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.rich-editor:focus-within { border-color: var(--color-action-primary); box-shadow: 0 0 0 3px var(--focus-ring-color); }
.rich-editor__toolbar, .rich-editor__link { background: var(--color-surface-soft); border-bottom: 1px solid var(--color-border-subtle); }
.rich-editor__toolbar button, .rich-editor__link button { background: transparent; border: 1px solid transparent; border-radius: 0.35rem; color: var(--color-text-primary); cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 750; }
.rich-editor__toolbar button:hover, .rich-editor__toolbar button:focus-visible, .rich-editor__link button:hover, .rich-editor__link button:focus-visible { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.rich-editor__toolbar button.is-active { background: color-mix(in srgb, var(--color-action-primary) 12%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-action-primary) 32%, var(--color-border)); color: var(--color-action-primary); }
.rich-editor__toolbar button:disabled { cursor: not-allowed; opacity: 0.45; }
.rich-editor__link label { color: var(--color-text-muted); font-weight: 750; }
.rich-editor__link input { background: var(--color-surface-raised); }
.rich-editor__surface { background: var(--color-surface-raised); border: 0; color: var(--color-text-primary); outline: 0; }
.rich-editor__surface .ql-editor { color: inherit; font: inherit; line-height: inherit; outline: 0; }
.rich-editor__surface .ql-editor.ql-blank::before { color: var(--color-text-muted); font-style: normal; left: 1rem; right: 1rem; }
.rich-editor__surface .ql-editor blockquote { border-left: 0.22rem solid var(--color-border); color: var(--color-text-muted); margin-inline: 0; padding-left: 0.85rem; }
.rich-editor__surface .ql-editor pre { background: var(--color-surface-soft); border-radius: 0.4rem; overflow: auto; padding: 0.75rem; }
.rich-editor__surface .ql-editor table, .rich-editor__surface .ql-editor td { border: 1px solid var(--color-border); }
.inline-element-editor { background: var(--color-surface-raised); border-radius: var(--radius-control); }
.inline-element-editor__heading { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 0.75rem; }
.inline-element-editor__heading h3 { font-size: 1rem; letter-spacing: -0.02em; }

@media (max-width: 860px) {
  .studio-sidebar { border-bottom: 1px solid var(--color-border-subtle); border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}