:root {
    color-scheme: light;
    --accent: #5b5ce2;
    --accent-rgb: 91, 92, 226;
    --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
    --accent-muted: color-mix(in srgb, var(--accent) 19%, transparent);
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-soft: #f8f9fc;
    --surface-strong: #eef1f7;
    --text: #192033;
    --text-soft: #5f687c;
    --text-muted: #8891a5;
    --border: #e2e6ef;
    --border-strong: #d2d8e5;
    --success: #16815b;
    --success-soft: #e6f7ef;
    --warning: #b36a12;
    --warning-soft: #fff4df;
    --danger: #c63d52;
    --danger-soft: #fff0f2;
    --info: #3275c7;
    --info-soft: #eaf3ff;
    --shadow-sm: 0 1px 2px rgba(30, 39, 64, .04), 0 5px 18px rgba(30, 39, 64, .05);
    --shadow-md: 0 14px 40px rgba(30, 39, 64, .10);
    --shadow-lg: 0 28px 70px rgba(19, 27, 48, .18);
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 21px;
    --radius-xl: 28px;
    --sidebar-width: 268px;
    --sidebar-collapsed: 84px;
    --topbar-height: 76px;
    --space-unit: 1;
    --control-height: 46px;
    --page-gap: 26px;
    --transition: 180ms cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"], html[data-resolved-theme="dark"] {
    color-scheme: dark;
    --bg: #0e1320;
    --surface: #151b2a;
    --surface-raised: #1a2132;
    --surface-soft: #111725;
    --surface-strong: #20283b;
    --text: #f2f5fb;
    --text-soft: #aab3c5;
    --text-muted: #788398;
    --border: #293247;
    --border-strong: #39435a;
    --success: #66d7ac;
    --success-soft: rgba(46, 173, 126, .14);
    --warning: #f1b45f;
    --warning-soft: rgba(231, 152, 45, .14);
    --danger: #ff8091;
    --danger-soft: rgba(226, 77, 98, .14);
    --info: #78b7ff;
    --info-soft: rgba(67, 139, 225, .14);
    --shadow-sm: 0 2px 18px rgba(0, 0, 0, .16);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, .28);
    --shadow-lg: 0 32px 80px rgba(0, 0, 0, .42);
}

html[data-density="compact"] {
    --space-unit: .82;
    --control-height: 40px;
    --page-gap: 19px;
    --topbar-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--text);
    background: var(--bg);
    font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 2px;
}

::selection { background: var(--accent-muted); color: var(--text); }
::placeholder { color: var(--text-muted); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 42%, transparent); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 10000; transform: translateY(-150%); padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--surface); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--light { color: rgba(255,255,255,.7); }

/* Buttons */
.button, .icon-button {
    border: 0;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button--primary { color: #fff; background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent); }
.button--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, #000); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 31%, transparent); }
.button--secondary { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.button--secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-soft); }
.button--ghost { color: var(--text-soft); background: transparent; }
.button--ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-strong); }
.button--danger { color: #fff; background: var(--danger); }
.button--light { color: #222a3a; background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.button--glass { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.button--sm { min-height: 36px; padding: 0 13px; border-radius: 10px; font-size: 13px; }
.button--lg { min-height: 52px; padding: 0 23px; border-radius: 14px; }
.button--block { width: 100%; }
.button.is-loading { pointer-events: none; opacity: .8; }
.button-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.38); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-soft);
    background: var(--surface);
}
.icon-button:hover { color: var(--text); background: var(--surface-soft); border-color: var(--border-strong); }
.icon-button--sm { width: 31px; height: 31px; border-radius: 9px; }
.icon-button--sm .icon { width: 16px; height: 16px; }
.icon-button--accent { color: #fff; background: var(--accent); border-color: var(--accent); }
.icon-button--danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }

/* Forms */
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field label { color: var(--text); font-size: 13px; font-weight: 750; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .field select, .field textarea,
.search-box input, .local-filter-bar select {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 13px;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.field textarea { resize: vertical; min-height: 90px; }
.field select, .local-filter-bar select { appearance: none; padding-inline-end: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .field select, [dir="rtl"] .local-filter-bar select { background-position: 17px 50%, 12px 50%; }
.field input:focus, .field select:focus, .field textarea:focus, .search-box input:focus, .local-filter-bar select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field--invalid input, .field--invalid select, .field--invalid textarea, [aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft); }
.field__help { color: var(--text-muted); font-size: 12px; }
.field__error { margin: 0; color: var(--danger); font-size: 12px; font-weight: 650; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > input { padding-inline-end: 46px !important; }
.input-wrap:has(.input-wrap__icon) > input { padding-inline-start: 43px !important; }
.input-wrap__icon { position: absolute; inset-inline-start: 13px; z-index: 1; color: var(--text-muted); pointer-events: none; }
.input-wrap__icon .icon { width: 18px; height: 18px; }
.input-wrap__action { position: absolute; inset-inline-end: 5px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; }
.input-wrap__action:hover { color: var(--text); background: var(--surface-strong); }
.input-wrap__action .icon { width: 18px; height: 18px; }
.form-grid { display: grid; gap: calc(18px * var(--space-unit)); }
.form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field--span-2 { grid-column: span 2; }
.settings-form { display: flex; flex-direction: column; gap: 24px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-block-start: 20px; border-block-start: 1px solid var(--border); }
.stack-form { display: flex; flex-direction: column; gap: 18px; }

.checkbox-row, .radio-row, .toggle-row { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: 13px; cursor: pointer; }
.checkbox-row input, .radio-row input, .toggle-row > input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-control, .radio-control { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border: 1.5px solid var(--border-strong); background: var(--surface); transition: all var(--transition); }
.checkbox-control { border-radius: 6px; }
.radio-control { border-radius: 50%; }
.checkbox-control .icon { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.5); transition: all var(--transition); }
.checkbox-row input:checked + .checkbox-control, .acknowledgement input:checked + .checkbox-control { background: var(--accent); border-color: var(--accent); }
.checkbox-row input:checked + .checkbox-control .icon, .acknowledgement input:checked + .checkbox-control .icon { opacity: 1; transform: scale(1); }
.radio-row input:checked + .radio-control, .accent-option input:checked + .radio-control { border: 6px solid var(--accent); }
.toggle-row { justify-content: space-between; }
.toggle-row > span:first-child { display: flex; align-items: center; gap: 9px; }
.toggle-row small { display: block; color: var(--text-muted); }
.toggle-control { position: relative; width: 44px; height: 25px; flex: 0 0 auto; border-radius: 30px; background: var(--surface-strong); border: 1px solid var(--border); transition: all var(--transition); }
.toggle-control::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.16); transition: transform var(--transition); }
.toggle-row input:checked + .toggle-control, .widget-visibility-list input:checked + .toggle-control { background: var(--accent); border-color: var(--accent); }
.toggle-row input:checked + .toggle-control::after, .widget-visibility-list input:checked + .toggle-control::after { transform: translateX(19px); }
[dir="rtl"] .toggle-row input:checked + .toggle-control::after, [dir="rtl"] .widget-visibility-list input:checked + .toggle-control::after { transform: translateX(-19px); }

.color-input { min-height: var(--control-height); display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.color-input input { width: 36px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.color-input input::-webkit-color-swatch { border: 0; border-radius: 9px; }
.color-input output { font: 700 13px ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text-soft); }
.color-input--compact { margin-inline-start: auto; min-height: 39px; }

/* App shell */
.app-body { overflow-x: hidden; }
.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    z-index: 50;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(18px);
    transition: width 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1);
}
.sidebar__brand { min-height: var(--topbar-height); display: flex; align-items: center; gap: 8px; padding: 12px 17px; border-block-end: 1px solid var(--border); }
.brand { min-width: 0; display: flex; align-items: center; gap: 11px; flex: 1; }
.brand__mark, .brand__image { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--accent); font-size: 14px; font-weight: 850; letter-spacing: -.03em; box-shadow: 0 9px 22px var(--accent-muted); }
.brand__image { overflow: hidden; background: #fff; border: 1px solid var(--border); }
.brand__image img { width: 100%; height: 100%; object-fit: contain; }
.brand__copy { min-width: 0; display: flex; flex-direction: column; transition: opacity var(--transition), width var(--transition); }
.brand__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.brand__copy small { color: var(--text-muted); font-size: 12px; }
.sidebar__mobile-close { display: none; }
.sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 12px; }
.nav-section + .nav-section { margin-block-start: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--border); }
.nav-section__label { margin: 0 11px 8px; color: var(--text-muted); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.nav-section ul { margin: 0; padding: 0; list-style: none; }
.nav-section li + li { margin-block-start: 4px; }
.nav-item { position: relative; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 11px; color: var(--text-soft); font-weight: 650; transition: background var(--transition), color var(--transition); }
.nav-item:hover { color: var(--text); background: var(--surface-soft); }
.nav-item.is-active { color: var(--accent); background: var(--accent-soft); }
.nav-item.is-active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: -12px; width: 3px; border-radius: 0 4px 4px 0; background: var(--accent); }
[dir="rtl"] .nav-item.is-active::before { border-radius: 4px 0 0 4px; }
.nav-item__icon { display: grid; place-items: center; flex: 0 0 20px; }
.nav-item__label { white-space: nowrap; transition: opacity var(--transition); }
.version-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px 13px; }
.version-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px var(--success-soft); }
.version-chip__copy { display: flex; flex-direction: column; }
.version-chip__copy strong { font-size: 12px; }
.version-chip__copy small { max-width: 170px; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-toggle { width: 100%; min-height: 41px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 10px; color: var(--text-muted); background: transparent; cursor: pointer; font-weight: 650; }
.sidebar-toggle:hover { color: var(--text); background: var(--surface-soft); }
.sidebar-is-collapsed .sidebar { width: var(--sidebar-collapsed); }
.sidebar-is-collapsed .brand__copy, .sidebar-is-collapsed .nav-item__label, .sidebar-is-collapsed .nav-section__label, .sidebar-is-collapsed .version-chip__copy, .sidebar-is-collapsed .sidebar-toggle span { width: 0; opacity: 0; overflow: hidden; }
.sidebar-is-collapsed .brand { justify-content: center; }
.sidebar-is-collapsed .sidebar__brand { padding-inline: 20px; }
.sidebar-is-collapsed .sidebar__nav { padding-inline: 13px; }
.sidebar-is-collapsed .nav-section + .nav-section { margin-block-start: 12px; padding-block-start: 12px; }
.sidebar-is-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-is-collapsed .nav-item.is-active::before { inset-inline-start: -13px; }
.sidebar-is-collapsed .version-chip { justify-content: center; }
.sidebar-is-collapsed .sidebar-toggle { justify-content: center; padding: 0; }
.sidebar-is-collapsed .sidebar-toggle .icon { transform: scaleX(-1); }
[dir="rtl"] .sidebar-is-collapsed .sidebar-toggle .icon { transform: none; }
.sidebar-is-collapsed .nav-item[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 80; inset-inline-start: calc(100% + 12px); inset-block-start: 50%; transform: translateY(-50%) translateX(-4px); padding: 7px 10px; border-radius: 8px; color: #fff; background: #1d2435; box-shadow: var(--shadow-md); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: all var(--transition); }
.sidebar-is-collapsed .nav-item[data-tooltip]:hover::after, .sidebar-is-collapsed .nav-item[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.app-main { min-height: 100vh; margin-inline-start: var(--sidebar-width); transition: margin var(--transition); }
.sidebar-is-collapsed .app-main { margin-inline-start: var(--sidebar-collapsed); }
.topbar { position: sticky; z-index: 40; inset-block-start: 0; min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-block-end: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); }
.topbar__left, .topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar__menu { display: none; }
.topbar__context { display: flex; flex-direction: column; line-height: 1.25; }
.topbar__context strong { font-size: 15px; }
.topbar__eyebrow { color: var(--text-muted); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.profile-menu { position: relative; }
.profile-menu__trigger { min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 0; border-radius: 14px; color: var(--text); background: transparent; cursor: pointer; }
.profile-menu__trigger:hover, .profile-menu__trigger[aria-expanded="true"] { background: var(--surface-strong); }
.profile-menu__copy { max-width: 170px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.profile-menu__copy strong { width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; white-space: nowrap; }
.profile-menu__copy small { color: var(--text-muted); font-size: 12px; }
.profile-menu__chevron { width: 15px; height: 15px; color: var(--text-muted); }
.dropdown-menu { position: absolute; z-index: 90; inset-block-start: calc(100% + 8px); min-width: 245px; padding: 7px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-raised); box-shadow: var(--shadow-lg); animation: menu-in var(--transition); }
.dropdown-menu--right { inset-inline-end: 0; }
.dropdown-menu__identity { display: flex; flex-direction: column; padding: 10px 11px 12px; border-block-end: 1px solid var(--border); margin-block-end: 6px; }
.dropdown-menu__identity strong { font-size: 13px; }
.dropdown-menu__identity span { color: var(--text-muted); font-size: 12px; }
.dropdown-menu a, .dropdown-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; font-weight: 650; text-align: start; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { color: var(--text); background: var(--surface-strong); }
.dropdown-menu .icon { width: 18px; height: 18px; }
.dropdown-menu__separator { margin: 6px 3px; border-block-start: 1px solid var(--border); }
.dropdown-menu .dropdown-menu__danger { color: var(--danger); }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #b463f0)); box-shadow: 0 0 0 1px var(--border); font-weight: 800; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 36px; height: 36px; font-size: 12px; }
.avatar--md { width: 44px; height: 44px; font-size: 12px; }
.avatar--xl { width: 72px; height: 72px; font-size: 18px; }
.avatar--2xl { width: 96px; height: 96px; font-size: 23px; }

.view-content { min-height: calc(100vh - var(--topbar-height)); padding: calc(28px * var(--space-unit)); }
.page { width: min(1480px, 100%); margin: 0 auto; animation: page-in 280ms cubic-bezier(.2,.8,.2,1); }
.page-header { margin-block-end: var(--page-gap); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 9px; padding: 0; list-style: none; color: var(--text-muted); font-size: 12px; font-weight: 650; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumbs a:hover { color: var(--accent); }
.page-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.page-header__copy h1, .page-header__copy h2 { margin: 0; color: var(--text); font-size: clamp(27px, 3vw, 36px); line-height: 1.14; letter-spacing: -.035em; }
.page-header__copy p { max-width: 720px; margin: 7px 0 0; color: var(--text-soft); }
.page-header__actions { display: flex; align-items: center; gap: 10px; }

.feature-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.feature-icon--sm { width: 36px; height: 36px; border-radius: 10px; }
.feature-icon--lg { width: 62px; height: 62px; border-radius: 18px; }
.feature-icon--success { color: var(--success); background: var(--success-soft); }
.feature-icon--warning { color: var(--warning); background: var(--warning-soft); }
.status-pill, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 25px; padding: 3px 9px; border-radius: 999px; color: var(--text-soft); background: var(--surface-strong); font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.status-pill .icon { width: 13px; height: 13px; }
.status-pill > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--accent { color: var(--accent); background: var(--accent-soft); }
.status-pill--success { color: var(--success); background: var(--success-soft); }
.status-pill--warning { color: var(--warning); background: var(--warning-soft); }
.status-pill--danger { color: var(--danger); background: var(--danger-soft); }
.status-pill--info { color: var(--info); background: var(--info-soft); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.status-dot--success { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.status-dot--danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--page-gap); align-items: stretch; }
.dashboard-widget { position: relative; grid-column: span 4; min-width: 0; min-height: 310px; display: flex; flex-direction: column; padding: calc(24px * var(--space-unit)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); }
.dashboard-widget:hover { border-color: color-mix(in srgb, var(--border-strong) 75%, var(--accent)); box-shadow: var(--shadow-md); }
.dashboard-widget--wide { grid-column: span 8; }
.dashboard-widget--hero { grid-column: 1 / -1; min-height: 315px; padding: 0; overflow: hidden; border: 0; background: var(--accent); color: #fff; box-shadow: 0 22px 48px color-mix(in srgb, var(--accent) 24%, transparent); }
.dashboard-widget.is-dragging { opacity: .45; transform: scale(.985); }
.dashboard-widget.is-drag-over { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dashboard-widget__toolbar { position: absolute; z-index: 3; inset-block-start: 15px; inset-inline-end: 15px; display: flex; align-items: center; gap: 5px; opacity: 0; transition: opacity var(--transition); }
.dashboard-widget:hover .dashboard-widget__toolbar, .dashboard-widget:focus-within .dashboard-widget__toolbar { opacity: 1; }
.dashboard-widget--hero .dashboard-widget__toolbar { color: #fff; }
.widget-drag { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--text-muted); background: var(--surface-strong); cursor: grab; }
.widget-drag:active { cursor: grabbing; }
.widget-order-actions { display: flex; gap: 3px; }
.dashboard-widget--hero .widget-drag, .dashboard-widget--hero .icon-button { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); }
.welcome-widget { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .8fr); gap: 20px; align-items: center; padding: clamp(32px, 4vw, 52px); overflow: hidden; }
.welcome-widget::before { content: ""; position: absolute; width: 540px; height: 540px; inset-block-start: -350px; inset-inline-start: 36%; border-radius: 50%; background: rgba(255,255,255,.08); }
.welcome-widget__copy { position: relative; z-index: 2; max-width: 720px; }
.welcome-widget .status-pill { color: #fff; background: rgba(255,255,255,.14); }
.welcome-widget h2 { margin: 19px 0 10px; color: #fff; font-size: clamp(28px, 4vw, 43px); line-height: 1.12; letter-spacing: -.04em; }
.welcome-widget p { max-width: 660px; margin: 0; color: rgba(255,255,255,.75); font-size: 16px; }
.welcome-widget__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 25px; }
.welcome-visual { position: relative; z-index: 1; width: 230px; height: 230px; margin: auto; }
.welcome-visual__core { position: absolute; z-index: 2; inset: 66px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 25px; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); box-shadow: inset 0 1px rgba(255,255,255,.32), 0 24px 50px rgba(0,0,0,.17); color: #fff; font-size: 26px; font-weight: 850; transform: rotate(-8deg); }
.welcome-visual__orbit { position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: orbit 13s linear infinite; }
.welcome-visual__orbit--two { inset: 0; animation-direction: reverse; animation-duration: 18s; }
.welcome-visual__orbit i { position: absolute; inset-block-start: -5px; inset-inline-start: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(255,255,255,.12); }
.widget-heading { display: flex; align-items: flex-start; gap: 12px; padding-inline-end: 60px; margin-block-end: 22px; }
.widget-heading > div { min-width: 0; flex: 1; }
.widget-heading h2 { margin: 1px 0 3px; font-size: 16px; letter-spacing: -.015em; }
.widget-heading p { margin: 0; color: var(--text-muted); font-size: 12px; }
.widget-heading > .status-pill { margin-inline-start: auto; }
.readiness-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.readiness-grid > div { position: relative; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) 8px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.readiness-grid > div > span:first-child { grid-row: 1 / span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.readiness-grid small { align-self: end; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.readiness-grid strong { align-self: start; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.readiness-grid .status-dot { grid-column: 3; grid-row: 1 / span 2; }
.profile-widget { flex: 1; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; background: var(--surface-soft); }
.profile-widget > div { min-width: 0; display: flex; flex-direction: column; }
.profile-widget strong, .branding-widget strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.profile-widget span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-widget small { width: fit-content; margin-block-start: 8px; padding: 3px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.card-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--border); color: var(--accent); font-size: 12px; font-weight: 750; }
.card-link .icon { width: 16px; height: 16px; transition: transform var(--transition); }
.card-link:hover .icon { transform: translateX(3px); }
[dir="rtl"] .card-link:hover .icon { transform: translateX(-3px); }
.branding-widget { flex: 1; display: flex; align-items: center; gap: 14px; }
.branding-widget__logo, .branding-widget__mark { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); }
.branding-widget__logo img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.branding-widget__mark { color: #fff; background: var(--accent); border: 0; font-size: 18px; font-weight: 850; }
.branding-widget > div { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.branding-widget > div span { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font: 700 11px ui-monospace, Consolas, monospace; }
.branding-widget > div i, .accent-dot { width: 14px; height: 14px; display: inline-block; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.appearance-widget { flex: 1; display: grid; gap: 8px; }
.appearance-widget > span { min-width: 0; display: grid; grid-template-columns: 33px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); }
.appearance-widget > span > .icon, .appearance-widget > span > i { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--accent); }
.appearance-widget small { color: var(--text-muted); font-size: 12px; }
.appearance-widget strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quick-links { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.quick-links a { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); transition: all var(--transition); }
.quick-links a:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.quick-links a > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.quick-links strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quick-links > a > .icon { width: 16px; height: 16px; color: var(--text-muted); }
.dashboard-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 390px; padding: 45px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.dashboard-empty h2 { margin: 17px 0 5px; }
.dashboard-empty p { margin: 0 0 20px; color: var(--text-soft); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }

/* Panels, settings, profile, appearance, branding */
.panel-card { min-width: 0; padding: calc(25px * var(--space-unit)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-card__header { display: flex; align-items: flex-start; gap: 13px; margin-block-end: 24px; }
.panel-card__header > div { min-width: 0; flex: 1; }
.panel-card__header h2 { margin: 1px 0 3px; font-size: 17px; letter-spacing: -.02em; }
.panel-card__header p { margin: 0; color: var(--text-muted); font-size: 12px; }
.panel-card__header > .status-pill { margin-inline-start: auto; }
.settings-stack { display: flex; flex-direction: column; gap: var(--page-gap); }
.settings-grid { display: grid; gap: var(--page-gap); }
.settings-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid--profile { grid-template-columns: minmax(0, 2fr) minmax(270px, .75fr); align-items: start; }
.settings-grid--profile .panel-card--wide { grid-column: 1; }
.profile-summary-card { position: sticky; inset-block-start: calc(var(--topbar-height) + 24px); grid-column: 2; grid-row: 1 / span 2; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 32px 25px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; }
.profile-summary-card__accent { position: absolute; inset: 0 0 auto; height: 105px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 48%, #b062ef)); }
.profile-summary-card .avatar { position: relative; margin-block-start: 28px; border-width: 4px; }
.profile-summary-card h2 { margin: 16px 0 2px; font-size: 18px; }
.profile-summary-card > p { margin: 0 0 11px; color: var(--text-muted); font-size: 12px; }
.profile-summary-card dl { width: 100%; margin: 24px 0 0; padding-block-start: 8px; border-block-start: 1px solid var(--border); }
.profile-summary-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 3px; border-block-end: 1px solid var(--border); text-align: start; }
.profile-summary-card dt { color: var(--text-muted); font-size: 12px; }
.profile-summary-card dd { margin: 0; font-size: 12px; font-weight: 750; text-align: end; }
.avatar-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; background: var(--surface-soft); }
.avatar-editor > .field__error { width: 100%; flex-basis: 100%; }
.avatar-editor__preview { flex: 0 0 auto; }
.avatar-editor__copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.avatar-editor__copy > span { color: var(--text-muted); font-size: 12px; }
.avatar-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 12px; }

.appearance-form { display: flex; flex-direction: column; gap: var(--page-gap); }
.appearance-preview { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr); align-items: center; gap: 30px; min-height: 235px; padding: 32px 38px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.appearance-preview::before { content: ""; position: absolute; width: 280px; height: 280px; inset-block-start: -180px; inset-inline-start: -100px; border-radius: 50%; background: var(--accent-soft); filter: blur(2px); }
.appearance-preview__copy { position: relative; z-index: 1; }
.appearance-preview__copy h2 { margin: 6px 0 4px; font-size: 28px; letter-spacing: -.035em; }
.appearance-preview__copy p { margin: 0; color: var(--text-soft); }
.appearance-preview__copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 20px; }
.mini-shell { position: relative; height: 170px; display: grid; grid-template-columns: 72px 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: var(--bg); box-shadow: var(--shadow-md); transform: perspective(900px) rotateY(-5deg) rotateX(2deg); }
[dir="rtl"] .mini-shell { transform: perspective(900px) rotateY(5deg) rotateX(2deg); }
.mini-shell aside { display: flex; flex-direction: column; gap: 10px; padding: 15px 11px; background: var(--surface); border-inline-end: 1px solid var(--border); }
.mini-shell aside i { height: 17px; border-radius: 6px; background: var(--surface-strong); }
.mini-shell aside i:first-child { width: 35px; height: 35px; margin: 0 auto 8px; border-radius: 10px; background: var(--accent); }
.mini-shell main header { height: 34px; border-block-end: 1px solid var(--border); background: var(--surface); }
.mini-shell main section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; padding: 14px; }
.mini-shell main section div { min-height: 94px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mini-shell main section div:nth-child(3) { grid-column: 1 / -1; min-height: 12px; background: var(--accent-soft); }
.choice-grid { display: grid; gap: 13px; }
.choice-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.choice-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.choice-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); cursor: pointer; transition: border var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }
.choice-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.choice-card > input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }
.choice-card__check { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: transparent; background: var(--surface); }
.choice-card:has(input:checked) .choice-card__check, .demo-card--selectable:has(input:checked) .choice-card__check { color: #fff; background: var(--accent); border-color: var(--accent); }
.choice-card__check .icon { width: 13px; height: 13px; }
.choice-card > .icon { width: 24px; height: 24px; margin-block-end: 9px; color: var(--accent); }
.choice-card strong { font-size: 13px; }
.choice-card small { color: var(--text-muted); font-size: 12px; }
.theme-preview { height: 94px; display: grid; grid-template-columns: 26% 1fr; gap: 6px; padding: 8px; margin-block-end: 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.theme-preview i { border-radius: 6px; }
.theme-preview b { border-radius: 6px; }
.theme-preview--light { background: #f5f6fa; }
.theme-preview--light i, .theme-preview--light b { background: #fff; border: 1px solid #e4e7ef; }
.theme-preview--dark { background: #0e1320; border-color: #2b3448; }
.theme-preview--dark i, .theme-preview--dark b { background: #1a2132; border: 1px solid #2b3448; }
.theme-preview--system { background: linear-gradient(90deg, #f5f6fa 50%, #0e1320 50%); }
.theme-preview--system i { background: linear-gradient(90deg, #fff 50%, #1a2132 50%); }
.theme-preview--system b { background: linear-gradient(90deg, #fff 50%, #1a2132 50%); }
.accent-options { display: grid; gap: 11px; }
.accent-option { position: relative; min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); cursor: pointer; }
.accent-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.accent-option > input { position: absolute; opacity: 0; }
.accent-option > i { width: 35px; height: 35px; flex: 0 0 auto; border: 4px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.accent-option > span:not(.radio-control):not(.color-input) { min-width: 0; display: flex; flex-direction: column; }
.accent-option strong { font-size: 13px; }
.accent-option small { color: var(--text-muted); font-size: 12px; }
.segmented-control { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; }
.segmented-control label > span { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); text-align: center; transition: all var(--transition); }
.segmented-control label:has(input:checked) > span { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.segmented-control .icon { width: 23px; height: 23px; margin-block-end: 5px; }
.segmented-control strong { font-size: 12px; }
.segmented-control small { color: var(--text-muted); font-size: 12px; }
.sticky-form-actions { position: sticky; z-index: 20; inset-block-end: 15px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(16px); }
.sticky-form-actions > div { min-width: 0; display: flex; align-items: center; gap: 9px; margin-inline-end: auto; color: var(--text-muted); font-size: 12px; }
.sticky-form-actions > div .icon { width: 18px; height: 18px; color: var(--success); }

.brand-stage { position: relative; min-height: 245px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.7fr); align-items: center; gap: 25px; padding: 36px; border-radius: var(--radius-xl); color: #fff; background: var(--brand-preview-accent); box-shadow: 0 23px 55px color-mix(in srgb, var(--brand-preview-accent) 25%, transparent); }
.brand-stage::before, .brand-stage::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.brand-stage::before { width: 360px; height: 360px; inset-block-start: -240px; inset-inline-start: 25%; }
.brand-stage::after { width: 260px; height: 260px; inset-block-end: -190px; inset-inline-start: 10%; }
.brand-stage__identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.brand-stage__logo, .brand-stage__mark { width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 22px; color: #263048; background: #fff; box-shadow: 0 16px 35px rgba(0,0,0,.16); font-size: 21px; font-weight: 850; }
.brand-stage__logo img { width: 100%; height: 100%; padding: 10px; object-fit: contain; }
.brand-stage__identity > div { min-width: 0; }
.brand-stage__identity span { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brand-stage__identity h2 { max-width: 520px; overflow: hidden; margin: 4px 0 2px; color: #fff; font-size: clamp(25px,3vw,38px); text-overflow: ellipsis; white-space: nowrap; }
.brand-stage__identity p { margin: 0; color: rgba(255,255,255,.7); }
.brand-stage__login { position: relative; z-index: 1; height: 170px; display: grid; place-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.brand-stage__login > i { position: absolute; width: 44px; height: 44px; inset-block-start: 13px; inset-inline-start: 13px; border-radius: 12px; background: rgba(255,255,255,.2); }
.brand-stage__login > div { width: 75%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-stage__login > div > span { width: 36px; height: 36px; margin-block-end: 7px; border-radius: 10px; background: #fff; }
.brand-stage__login strong { max-width: 100%; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.brand-stage__login small { width: 100%; overflow: hidden; color: rgba(255,255,255,.65); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.brand-stage__login button { width: 90px; height: 21px; margin-block-start: 12px; border: 0; border-radius: 7px; background: #fff; }
.asset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.field__error--span { grid-column: 1 / -1; }
.asset-card { min-width: 0; display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.asset-card__preview { height: 135px; display: grid; place-items: center; overflow: hidden; margin-block-end: 14px; border: 1px dashed var(--border-strong); border-radius: 13px; background-image: linear-gradient(45deg,var(--surface-strong) 25%,transparent 25%),linear-gradient(-45deg,var(--surface-strong) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface-strong) 75%),linear-gradient(-45deg,transparent 75%,var(--surface-strong) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.asset-card__preview img { width: 100%; height: 100%; padding: 15px; object-fit: contain; }
.asset-card__preview > span { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 15px; color: var(--accent); background: var(--accent-soft); font-weight: 850; }
.asset-card__preview--favicon > span, .asset-card__preview--favicon img { width: 55px; height: 55px; padding: 0; }
.asset-card__copy { flex: 1; }
.asset-card__copy h3 { margin: 0 0 3px; font-size: 13px; }
.asset-card__copy p { margin: 0; color: var(--text-muted); font-size: 12px; }
.asset-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 13px; padding-block-start: 12px; border-block-start: 1px solid var(--border); }

/* Alerts, overlays, loaders, toast */
.alert { display: flex; align-items: flex-start; gap: 11px; padding: 14px 15px; border: 1px solid transparent; border-radius: 13px; }
.alert > .icon { width: 20px; height: 20px; margin-block-start: 1px; }
.alert > div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.alert strong { font-size: 12px; }
.alert span { color: currentColor; opacity: .76; font-size: 12px; }
.alert--success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb,var(--success) 18%,transparent); }
.alert--info { color: var(--info); background: var(--info-soft); border-color: color-mix(in srgb,var(--info) 18%,transparent); }
.alert--warning { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb,var(--warning) 18%,transparent); }
.alert--danger { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb,var(--danger) 18%,transparent); }
.view-loader { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; background: color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(8px); transition: opacity var(--transition), visibility var(--transition); }
.view-loader.is-visible { visibility: visible; opacity: 1; }
.view-loader__panel { min-width: 210px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.view-loader__panel strong { font-size: 13px; }
.loader-ring { width: 35px; height: 35px; display: inline-block; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
.view-loader__bar { width: 100%; height: 4px; overflow: hidden; border-radius: 5px; background: var(--surface-strong); }
.view-loader__bar i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--accent); animation: loader-bar 1.25s ease-in-out infinite; }
.is-locally-loading { position: relative; pointer-events: none; }
.is-locally-loading::after { content: ""; position: absolute; z-index: 8; inset: -1px; border-radius: inherit; background: color-mix(in srgb,var(--surface) 70%,transparent); backdrop-filter: blur(2px); }
.is-locally-loading::before { content: ""; position: absolute; z-index: 9; width: 28px; height: 28px; inset: 50% auto auto 50%; margin: -14px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.toast-region { position: fixed; z-index: 300; inset-inline-end: 20px; inset-block-end: 20px; width: min(390px, calc(100vw - 30px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { position: relative; overflow: hidden; display: grid; grid-template-columns: 38px minmax(0,1fr) 28px; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-raised); box-shadow: var(--shadow-lg); pointer-events: auto; cursor: pointer; animation: toast-in 280ms cubic-bezier(.2,.8,.2,1); }
.toast.is-leaving { animation: toast-out 200ms ease forwards; }
.toast__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; }
.toast__copy { min-width: 0; display: flex; flex-direction: column; }
.toast__copy strong { font-size: 12px; }
.toast__copy span { color: var(--text-soft); font-size: 12px; }
.toast__close { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--text-muted); background: transparent; cursor: pointer; }
.toast__close .icon { width: 15px; height: 15px; }
.toast__timer { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; background: currentColor; animation: toast-timer 5s linear forwards; }
.toast--success .toast__icon { color: var(--success); background: var(--success-soft); }
.toast--info .toast__icon { color: var(--info); background: var(--info-soft); }
.toast--warning .toast__icon { color: var(--warning); background: var(--warning-soft); }
.toast--error .toast__icon { color: var(--danger); background: var(--danger-soft); }
.toast--success .toast__timer { color: var(--success); }.toast--info .toast__timer { color: var(--info); }.toast--warning .toast__timer { color: var(--warning); }.toast--error .toast__timer { color: var(--danger); }
.modal, .drawer { position: fixed; z-index: 200; inset: 0; visibility: hidden; pointer-events: none; }
.modal.is-open, .drawer.is-open { visibility: visible; pointer-events: auto; }
.modal__scrim, .drawer__scrim { position: absolute; inset: 0; opacity: 0; background: rgba(12,17,28,.56); backdrop-filter: blur(5px); transition: opacity var(--transition); }
.modal.is-open .modal__scrim, .drawer.is-open .drawer__scrim { opacity: 1; }
.modal { display: grid; place-items: center; padding: 20px; }
.modal__panel { position: relative; width: min(580px,100%); max-height: min(760px,calc(100vh - 40px)); overflow: auto; opacity: 0; transform: translateY(12px) scale(.98); border: 1px solid var(--border); border-radius: 21px; background: var(--surface-raised); box-shadow: var(--shadow-lg); transition: all 230ms cubic-bezier(.2,.8,.2,1); }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__header { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 18px; border-block-end: 1px solid var(--border); }
.modal__header > div { flex: 1; }
.modal__header h2 { margin: 1px 0 3px; font-size: 17px; }
.modal__header p { margin: 0; color: var(--text-muted); font-size: 12px; }
.modal__body { padding: 22px; }
.modal__footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px; border-block-start: 1px solid var(--border); }
.modal__panel--confirm { max-width: 440px; padding: 27px; text-align: center; }
.modal__panel--confirm h2 { margin: 15px 0 6px; font-size: 19px; }
.modal__panel--confirm > p { margin: 0 0 18px; color: var(--text-soft); font-size: 12px; }
.modal__panel--confirm .modal__footer { margin: 22px -27px -27px; }
.confirm-icon { width: 61px; height: 61px; display: grid; place-items: center; margin: auto; border-radius: 18px; }
.confirm-icon--warning { color: var(--warning); background: var(--warning-soft); }
.confirm-icon .icon { width: 27px; height: 27px; }
.checkbox-row--boxed { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); text-align: start; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(460px,100%); display: flex; flex-direction: column; transform: translateX(100%); border-inline-start: 1px solid var(--border); background: var(--surface-raised); box-shadow: var(--shadow-lg); transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__header { display: flex; align-items: flex-start; gap: 15px; padding: 23px; border-block-end: 1px solid var(--border); }
.drawer__header > div { flex: 1; }
.drawer__header h2 { margin: 0 0 3px; font-size: 19px; }
.drawer__header p { margin: 0; color: var(--text-muted); font-size: 12px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 23px; }
.drawer__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 15px 23px; border-block-start: 1px solid var(--border); }
.drawer__footer > span { display: flex; align-items: center; gap: 7px; margin-inline-end: auto; color: var(--text-muted); font-size: 12px; }
.drawer__footer > span .icon { width: 16px; color: var(--success); }
.widget-visibility-list { display: flex; flex-direction: column; gap: 9px; }
.widget-visibility-list > label { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); cursor: pointer; }
.widget-visibility-list > label strong { flex: 1; font-size: 12px; }
.widget-visibility-list input { position: absolute; opacity: 0; }

@keyframes loader-bar { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(230%); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px) scale(.96); } }
@keyframes toast-timer { to { width: 0; } from { width: 100%; } }

/* Login */
.auth-body { overflow: hidden; background: var(--surface); }
.auth-main { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px,1.06fr) minmax(430px,.94fr); }
.login-story { position: relative; overflow: hidden; min-height: 100vh; padding: clamp(35px,5vw,72px); color: #fff; background: var(--accent); }
.login-story::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 28px 28px; mask-image: linear-gradient(135deg,#000,transparent 75%); }
.login-story__glow { position: absolute; width: 650px; height: 650px; inset-block-start: -440px; inset-inline-end: -240px; border-radius: 50%; background: rgba(255,255,255,.15); box-shadow: 0 0 0 90px rgba(255,255,255,.04),0 0 0 180px rgba(255,255,255,.025); }
.login-story__content { position: relative; z-index: 2; min-height: calc(100vh - clamp(70px,10vw,144px)); display: flex; flex-direction: column; }
.login-story__brand { display: flex; align-items: center; gap: 12px; }
.login-story__mark, .login-story__logo { width: 51px; height: 51px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; color: var(--accent); background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.14); font-weight: 850; }
.login-story__logo img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.login-story__brand > span:last-child { display: flex; flex-direction: column; }
.login-story__brand strong { font-size: 15px; }
.login-story__brand small { color: rgba(255,255,255,.62); font-size: 12px; }
.login-story__message { max-width: 650px; margin-block: auto; padding-block: 70px; }
.login-story__message h2 { margin: 14px 0 14px; color: #fff; font-size: clamp(39px,5vw,64px); line-height: 1.05; letter-spacing: -.055em; }
.login-story__message p { max-width: 590px; margin: 0; color: rgba(255,255,255,.72); font-size: 16px; }
.login-story__features { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.login-story__features li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.74); font-size: 12px; font-weight: 650; }
.login-story__features .icon { width: 16px; height: 16px; }
.login-story__orb { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.login-story__orb--one { width: 340px; height: 340px; inset-inline-end: -160px; inset-block-end: -170px; }
.login-story__orb--two { width: 120px; height: 120px; inset-inline-end: 45px; inset-block-end: 70px; background: rgba(255,255,255,.06); }
.login-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,7vw,95px); background: var(--surface); }
.login-panel__mobile-brand { display: none; }
.login-card { width: min(450px,100%); margin: auto; }
.login-card__header { margin-block-end: 30px; }
.login-card__header h1 { margin: 8px 0 7px; font-size: clamp(31px,4vw,42px); line-height: 1.12; letter-spacing: -.045em; }
.login-card__header p { margin: 0; color: var(--text-soft); }
.login-panel__footer { display: flex; justify-content: space-between; gap: 15px; margin-block-start: 30px; color: var(--text-muted); font-size: 12px; }

/* Installer */
.installer-body { min-height: 100vh; background: #f0f3f9; }
.installer-main { min-height: 100vh; }
.installer-shell { min-height: 100vh; }
.installer-header { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px,4vw,52px); border-block-end: 1px solid #e0e5ef; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.installer-header__brand { display: flex; align-items: center; gap: 11px; }
.installer-header__brand > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.installer-header__brand strong { font-size: 14px; }
.installer-header__brand small { color: #8a93a6; font-size: 12px; }
.installer-header__status { display: flex; align-items: center; gap: 8px; color: #6f788a; font-size: 12px; font-weight: 700; }
.installer-header__status > span { width: 8px; height: 8px; border-radius: 50%; background: #1ea978; box-shadow: 0 0 0 5px #e6f7ef; }
.installer-layout { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(300px,380px) minmax(0,1fr); }
.installer-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(34px,4.6vw,64px); color: #fff; background: #161d30; }
.installer-intro::before { content: ""; position: absolute; width: 480px; height: 480px; inset-block-start: -350px; inset-inline-start: -260px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.018); }
.installer-intro > * { position: relative; z-index: 1; }
.installer-intro h1 { margin: 12px 0 10px; color: #fff; font-size: clamp(29px,3vw,41px); line-height: 1.1; letter-spacing: -.045em; }
.installer-intro > p { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; }
.installer-progress-copy { display: flex; justify-content: space-between; gap: 15px; margin-block-start: 36px; color: rgba(255,255,255,.62); font-size: 12px; }
.installer-progress-copy strong { color: #fff; }
.installer-progress { height: 4px; overflow: hidden; margin-block: 8px 27px; border-radius: 5px; background: rgba(255,255,255,.1); }
.installer-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 350ms cubic-bezier(.2,.8,.2,1); }
.installer-step-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.installer-step-list li { min-height: 49px; display: grid; grid-template-columns: 35px 1fr 19px; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 11px; color: rgba(255,255,255,.44); transition: all var(--transition); }
.installer-step-list li > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); }
.installer-step-list li > span .icon { width: 17px; height: 17px; }
.installer-step-list li > div { display: flex; flex-direction: column; }
.installer-step-list small { font-size: 12px; letter-spacing: .08em; }
.installer-step-list strong { font-size: 12px; }
.installer-step-list__check { width: 15px; height: 15px; opacity: 0; }
.installer-step-list li.is-active { color: #fff; background: rgba(255,255,255,.07); }
.installer-step-list li.is-active > span { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 18px rgba(91,92,226,.28); }
.installer-step-list li.is-complete { color: rgba(255,255,255,.7); }
.installer-step-list li.is-complete > span { color: #69ddb5; border-color: rgba(105,221,181,.25); background: rgba(105,221,181,.08); }
.installer-step-list li.is-complete .installer-step-list__check { color: #69ddb5; opacity: 1; }
.installer-workspace { min-width: 0; display: flex; padding: clamp(25px,4vw,55px); }
.installer-form { width: min(940px,100%); min-height: 650px; display: flex; flex-direction: column; margin: auto; padding: clamp(25px,3.5vw,44px); border: 1px solid #e0e5ef; border-radius: 25px; background: #fff; box-shadow: 0 22px 60px rgba(31,41,67,.09); }
.installer-panel { flex: 1; animation: page-in 260ms ease; }
.installer-panel__heading { display: flex; align-items: flex-start; gap: 14px; margin-block-end: 28px; }
.installer-panel__heading > div { flex: 1; }
.installer-panel__heading h2 { margin: 1px 0 4px; color: #1a2132; font-size: 23px; letter-spacing: -.03em; }
.installer-panel__heading p { margin: 0; color: #7d8698; font-size: 12px; }
.environment-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.environment-check { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e4e8f0; border-radius: 12px; background: #f9fafc; }
.environment-check__icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; }
.environment-check__icon .icon { width: 17px; height: 17px; }
.environment-check.is-passed .environment-check__icon { color: #16815b; background: #e6f7ef; }
.environment-check.is-failed .environment-check__icon { color: #c63d52; background: #fff0f2; }
.environment-check > div { min-width: 0; display: flex; flex-direction: column; }
.environment-check strong { overflow: hidden; color: #283044; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.environment-check small { overflow: hidden; color: #929aab; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.installer-panel > .alert { margin-block-start: 18px; }
.database-test-row { display: flex; align-items: center; gap: 13px; margin-block-start: 19px; padding-block-start: 18px; border-block-start: 1px solid #e4e8f0; }
.database-test-result { color: #6d7587; font-size: 12px; }
.database-test-result.is-success { color: #16815b; font-weight: 700; }
.database-test-result.is-error { color: #c63d52; font-weight: 700; }
.info-card { display: flex; align-items: center; gap: 13px; margin-block-start: 21px; padding: 15px; border: 1px solid #e4e8f0; border-radius: 14px; background: #f9fafc; }
.info-card > .icon { width: 23px; height: 23px; color: var(--accent); }
.info-card > div { flex: 1; }
.info-card strong { color: #283044; font-size: 12px; }
.info-card p { margin: 2px 0 0; color: #7d8698; font-size: 12px; }
.branding-preview-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin-block-end: 24px; padding: 22px; border-radius: 18px; color: #fff; background: var(--accent); }
.branding-preview-card::after { content: ""; position: absolute; width: 180px; height: 180px; inset-block-start: -120px; inset-inline-end: -70px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.branding-preview-card__mark { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 15px; color: var(--accent); background: #fff; font-weight: 850; }
.branding-preview-card > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.branding-preview-card strong { font-size: 14px; }
.branding-preview-card span { color: rgba(255,255,255,.68); font-size: 12px; }
.branding-preview-card > i { position: absolute; inset-block-end: 0; inset-inline: 0; height: 4px; background: rgba(255,255,255,.45); }
.security-visual { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 28px; padding: 24px; border: 1px solid #e4e8f0; border-radius: 18px; background: #f9fafc; }
.security-visual__ring { position: relative; width: 145px; height: 145px; display: grid; place-items: center; margin: auto; border: 1px solid #dfe4ef; border-radius: 50%; }
.security-visual__ring::before { content: ""; position: absolute; inset: 18px; border: 1px dashed #cfd6e4; border-radius: 50%; animation: spin 18s linear infinite; }
.security-visual__ring span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 19px; color: #fff; background: var(--accent); box-shadow: 0 15px 30px rgba(91,92,226,.25); }
.security-visual__ring span .icon { width: 29px; height: 29px; }
.security-visual__items { display: flex; flex-direction: column; gap: 9px; }
.security-visual__items > div { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e5e9f1; border-radius: 11px; background: #fff; }
.security-visual__items > div > .icon { width: 18px; height: 18px; color: var(--accent); }
.security-visual__items span { display: flex; flex-direction: column; }
.security-visual__items strong { color: #283044; font-size: 12px; }
.security-visual__items small { color: #8a93a6; font-size: 12px; }
.acknowledgement { position: relative; display: flex; align-items: flex-start; gap: 11px; margin-block-start: 18px; padding: 15px; border: 1px solid #e4e8f0; border-radius: 13px; color: #596276; background: #fff; cursor: pointer; font-size: 12px; }
.acknowledgement > input { position: absolute; opacity: 0; }
.acknowledgement > span:last-child { display: flex; flex-direction: column; }
.acknowledgement strong { color: var(--accent); font-size: 12px; text-transform: uppercase; }
.review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.review-grid > div { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 14px; border: 1px solid #e4e8f0; border-radius: 13px; background: #f9fafc; }
.review-grid > div > span { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: rgba(91,92,226,.09); }
.review-grid small { color: #8a93a6; font-size: 12px; }
.review-grid strong { overflow: hidden; color: #283044; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.installer-actions { display: flex; align-items: center; gap: 10px; margin-block-start: 30px; padding-block-start: 21px; border-block-start: 1px solid #e4e8f0; }
.installer-actions__spacer { flex: 1; }
.installation-overlay { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(13,18,30,.7); backdrop-filter: blur(10px); }
.installation-overlay__card { width: min(440px,100%); display: flex; flex-direction: column; align-items: center; padding: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; color: #fff; background: #161d30; box-shadow: 0 35px 90px rgba(0,0,0,.4); text-align: center; }
.installation-overlay__card h2 { margin: 23px 0 6px; color: #fff; font-size: 20px; }
.installation-overlay__card p { margin: 0 0 21px; color: rgba(255,255,255,.56); font-size: 12px; }
.installation-overlay__card .view-loader__bar { background: rgba(255,255,255,.1); }
.installation-orbit { position: relative; width: 110px; height: 110px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; animation: spin 9s linear infinite; }
.installation-orbit > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: var(--accent); transform: rotate(0); }
.installation-orbit i { position: absolute; width: 8px; height: 8px; inset-block-start: -4px; border-radius: 50%; background: #fff; }
.installation-orbit i:last-child { inset-block: auto -4px; }
.installer-complete { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px 20px; background: #f2f4fa; text-align: center; }
.installer-complete__visual { position: relative; width: 126px; height: 126px; display: grid; place-items: center; margin-block-end: 25px; border-radius: 37px; color: #fff; background: var(--accent); box-shadow: 0 25px 50px rgba(91,92,226,.24); transform: rotate(-5deg); }
.installer-complete__visual > span { transform: rotate(5deg); }
.installer-complete__visual .icon { width: 50px; height: 50px; stroke-width: 2.2; }
.installer-complete__visual i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.installer-complete__visual i:nth-child(2) { inset-block-start: -20px; inset-inline-end: 10px; }.installer-complete__visual i:nth-child(3) { inset-block-end: 0; inset-inline-start: -26px; }.installer-complete__visual i:nth-child(4) { inset-block-end: -17px; inset-inline-end: -15px; }
.installer-complete h1 { margin: 9px 0 7px; color: #1a2132; font-size: clamp(32px,5vw,48px); letter-spacing: -.05em; }
.installer-complete > p { max-width: 590px; margin: 0; color: #758093; }
.complete-summary { width: min(690px,100%); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: 30px 0; }
.complete-summary > div { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #e0e5ef; border-radius: 14px; background: #fff; text-align: start; }
.complete-summary > div > .icon { width: 21px; height: 21px; color: var(--accent); }
.complete-summary span { min-width: 0; display: flex; flex-direction: column; }
.complete-summary small { color: #8a93a6; font-size: 12px; }.complete-summary strong { overflow: hidden; color: #283044; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.installer-complete__version { margin-block-start: 24px; color: #a0a7b5; }

/* Showcase */
.showcase-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: var(--page-gap); padding: 18px 20px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); }
.showcase-controls > div:first-child { display: flex; align-items: center; gap: 12px; }
.showcase-controls h2 { margin: 0 0 2px; font-size: 15px; }.showcase-controls p { margin: 0; color: var(--text-muted); font-size: 12px; }
.showcase-controls__actions { display: flex; align-items: center; gap: 19px; }
.showcase-controls__actions .toggle-row { gap: 13px; }
.showcase-canvas { border-radius: var(--radius-lg); transition: padding var(--transition), background var(--transition); }
.showcase-canvas.is-compact { --space-unit: .78; --control-height: 39px; padding: 12px; background: var(--surface-soft); }
.tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); overflow-x: auto; }
.tabs--sticky { position: sticky; z-index: 25; inset-block-start: calc(var(--topbar-height) + 10px); margin-block-end: 20px; box-shadow: var(--shadow-sm); backdrop-filter: blur(15px); }
.tabs button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 9px; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tabs button:hover { color: var(--text); }.tabs button.is-active { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-sm); }
.tabs button .icon { width: 16px; height: 16px; }
.showcase-tab-panel { display: flex; flex-direction: column; gap: 20px; animation: page-in 220ms ease; }
.showcase-section { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.showcase-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 19px 21px; border-block-end: 1px solid var(--border); }
.showcase-section > header > span { display: flex; align-items: center; gap: 10px; }
.showcase-section > header small { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font: 800 9px ui-monospace,monospace; }
.showcase-section > header h2 { margin: 0; font-size: 15px; }.showcase-section > header p { max-width: 520px; margin: 0; color: var(--text-muted); font-size: 12px; text-align: end; }
.showcase-surface { padding: calc(22px * var(--space-unit)); }
.component-row { display: flex; align-items: center; gap: 10px; }.component-row--wrap { flex-wrap: wrap; }.component-row + .component-row { margin-block-start: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--border); }.component-row--spaced { justify-content: center; }
.component-note { color: var(--text-muted); font-size: 12px; }
[data-tooltip] { position: relative; }
body:not(.sidebar-is-collapsed) [data-tooltip]:not(.nav-item)::after { content: attr(data-tooltip); position: absolute; z-index: 100; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(3px); padding: 6px 8px; border-radius: 7px; color: #fff; background: #1d2435; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all var(--transition); }
body:not(.sidebar-is-collapsed) [data-tooltip]:not(.nav-item):hover::after, body:not(.sidebar-is-collapsed) [data-tooltip]:not(.nav-item):focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.showcase-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; padding: 22px; }
.demo-card { position: relative; min-width: 0; min-height: 225px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.demo-card h3 { margin: 14px 0 4px; font-size: 13px; }.demo-card p { margin: 0; color: var(--text-muted); font-size: 12px; }.demo-card a { display: flex; align-items: center; gap: 6px; margin-block-start: auto; color: var(--accent); font-size: 12px; font-weight: 750; }.demo-card a .icon { width: 14px; }
.demo-card--stat > span { color: var(--accent); }.demo-card--stat > small { margin-block-start: 20px; color: var(--text-muted); }.demo-card--stat > strong { margin-block: 5px 18px; font-size: 34px; letter-spacing: -.04em; }.demo-card--stat > i { width: 100%; height: 6px; overflow: hidden; margin-block-start: auto; border-radius: 7px; background: var(--surface-strong); }.demo-card--stat > i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.demo-card--image { padding: 0; overflow: hidden; }.demo-card__image { width: 100%; height: 105px; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent-soft),var(--surface-strong)); }.demo-card__image span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--accent); font-weight: 850; }.demo-card--image > div:last-child { padding: 15px; }.demo-card--image h3 { margin-block-start: 9px; }
.demo-card--selectable { cursor: pointer; }.demo-card--selectable > input { position: absolute; opacity: 0; }.demo-card--selectable:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.showcase-header-demo .page-header__copy h2 { font-size: 24px; }
.local-filter-bar { display: flex; align-items: center; gap: 9px; margin-block-start: 20px; padding-block-start: 17px; border-block-start: 1px solid var(--border); }
.search-box { min-width: 220px; flex: 1; position: relative; display: flex; align-items: center; }.search-box > .icon { position: absolute; inset-inline-start: 13px; z-index: 1; width: 17px; color: var(--text-muted); }.search-box input { padding-inline-start: 40px; }.local-filter-bar select { width: 180px; }
.control-demo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-block-start: 23px; padding-block-start: 21px; border-block-start: 1px solid var(--border); }.control-demo-grid > div { display: flex; flex-direction: column; gap: 11px; padding: 15px; border-radius: 14px; background: var(--surface-soft); }.control-demo-grid h3 { margin: 0 0 2px; font-size: 12px; }
.alert-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.local-loader-demo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-block-start: 20px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }.local-loader-demo > div:first-child { display: flex; align-items: center; gap: 10px; flex: 1; }.local-loader-demo > div span:last-child { display: flex; flex-direction: column; }.local-loader-demo strong { font-size: 12px; }.local-loader-demo small { color: var(--text-muted); font-size: 12px; }.local-overlay { position: absolute; z-index: 3; inset: 0; display: grid !important; place-items: center; opacity: 0; pointer-events: none; background: color-mix(in srgb,var(--surface) 72%,transparent); backdrop-filter: blur(2px); transition: opacity var(--transition); }.local-loader-demo.is-loading .local-overlay { opacity: 1; pointer-events: auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-block-start: 24px; }.pagination button { min-width: 35px; height: 35px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); background: var(--surface); cursor: pointer; }.pagination button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }.pagination button.is-active { color: #fff; border-color: var(--accent); background: var(--accent); }.pagination button:disabled { opacity: .4; }.pagination .icon { width: 15px; }
.wizard-demo { padding: 25px; }.wizard-steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 29px; padding: 0; list-style: none; }.wizard-steps::before { content: ""; position: absolute; inset-block-start: 16px; inset-inline: 12.5%; height: 2px; background: var(--border); }.wizard-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text-muted); text-align: center; }.wizard-steps li > span { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 800; }.wizard-steps li strong { font-size: 12px; }.wizard-steps li.is-active { color: var(--accent); }.wizard-steps li.is-active > span { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }.wizard-steps li.is-complete > span { color: #fff; border-color: var(--success); background: var(--success); }
.wizard-demo__panel { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 25px; border: 1px dashed var(--border-strong); border-radius: 16px; background: var(--surface-soft); }.wizard-demo__panel h3 { margin: 4px 0 3px; font-size: 16px; }.wizard-demo__panel p { margin: 0; color: var(--text-muted); font-size: 12px; }.wizard-demo__actions { display: flex; align-items: center; gap: 10px; margin-block-start: 18px; }.wizard-demo__actions span { flex: 1; }
.state-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; padding: 22px; }.empty-state, .skeleton-card, .progress-demo { min-height: 230px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }.empty-state__visual { width: 61px; height: 61px; display: grid; place-items: center; border-radius: 19px; color: var(--accent); background: var(--accent-soft); }.empty-state__visual .icon { width: 27px; height: 27px; }.empty-state h3 { margin: 13px 0 3px; font-size: 14px; }.empty-state p { margin: 0 0 15px; color: var(--text-muted); font-size: 12px; }
.skeleton-card { display: flex; flex-direction: column; gap: 15px; padding: 21px; overflow: hidden; }.skeleton-card > span { width: 52px; height: 52px; border-radius: 15px; background: var(--surface-strong); }.skeleton-card > div { display: flex; flex-direction: column; gap: 9px; }.skeleton-card i, .skeleton-card b { height: 11px; display: block; border-radius: 7px; background: linear-gradient(90deg,var(--surface-strong),color-mix(in srgb,var(--surface-strong) 55%,var(--surface)),var(--surface-strong)); background-size: 200% 100%; animation: skeleton 1.5s ease infinite; }.skeleton-card i:nth-child(1) { width: 75%; }.skeleton-card i:nth-child(2) { width: 95%; }.skeleton-card i:nth-child(3) { width: 58%; }.skeleton-card b { height: 40px; margin-block-start: auto; }
.progress-demo { display: flex; align-items: center; gap: 13px; padding: 21px; }.progress-demo > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }.progress-demo small { color: var(--text-muted); font-size: 12px; }.progress-demo > div > span { height: 6px; overflow: hidden; margin-block-start: 12px; border-radius: 6px; background: var(--surface-strong); }.progress-demo > div > span i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.progress-demo > b { color: var(--accent); font-size: 18px; }
.error-preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; padding: 22px; }.error-preview-grid a { position: relative; min-height: 150px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); transition: all var(--transition); }.error-preview-grid a:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }.error-preview-grid a > span { color: var(--accent); font: 850 26px ui-monospace,monospace; }.error-preview-grid strong { margin-block-start: 10px; font-size: 12px; }.error-preview-grid small { max-width: 80%; color: var(--text-muted); font-size: 12px; }.error-preview-grid a > .icon { position: absolute; inset-block-start: 17px; inset-inline-end: 17px; width: 17px; color: var(--text-muted); }
@keyframes skeleton { to { background-position: -200% 0; } }

/* Error pages */
.error-body { overflow: hidden; background: var(--bg); }.error-main { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; }.error-card { width: min(620px,100%); display: flex; flex-direction: column; align-items: center; text-align: center; }.error-visual { position: relative; width: 145px; height: 145px; display: grid; place-items: center; margin-block-end: 24px; border-radius: 42px; color: var(--accent); background: var(--accent-soft); transform: rotate(-5deg); }.error-visual > span { transform: rotate(5deg); }.error-visual .icon { width: 61px; height: 61px; stroke-width: 1.4; }.error-visual > i { position: absolute; border: 1px solid var(--accent); border-radius: 50%; opacity: .25; }.error-visual > i:nth-child(2) { width: 35px; height: 35px; inset-block-start: -17px; inset-inline-end: -22px; }.error-visual > i:nth-child(3) { width: 15px; height: 15px; inset-block-end: 5px; inset-inline-start: -25px; background: var(--accent); }.error-visual--403 { color: var(--warning); background: var(--warning-soft); }.error-visual--500 { color: var(--danger); background: var(--danger-soft); }.error-code { color: var(--accent); font: 850 13px ui-monospace,monospace; letter-spacing: .14em; }.error-card h1 { margin: 9px 0 7px; font-size: clamp(30px,5vw,45px); line-height: 1.1; letter-spacing: -.05em; }.error-card > p { max-width: 530px; margin: 0; color: var(--text-soft); }.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block: 25px 19px; }.error-card > small { color: var(--text-muted); font-size: 12px; }

/* Responsive and RTL readiness */
@media (max-width: 1180px) {
    .dashboard-widget { grid-column: span 6; }.dashboard-widget--wide { grid-column: span 12; }.showcase-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.readiness-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.quick-links { grid-template-columns: repeat(2,minmax(0,1fr)); }.asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.installer-layout { grid-template-columns: 300px minmax(0,1fr); }.installer-intro { padding: 35px 28px; }.environment-list { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .sidebar { width: min(310px,86vw); transform: translateX(-105%); box-shadow: var(--shadow-lg); }.sidebar-is-collapsed .sidebar { width: min(310px,86vw); }.sidebar-mobile-open .sidebar { transform: none; }.sidebar-is-collapsed .brand__copy, .sidebar-is-collapsed .nav-item__label, .sidebar-is-collapsed .nav-section__label, .sidebar-is-collapsed .version-chip__copy, .sidebar-is-collapsed .sidebar-toggle span { width: auto; opacity: 1; overflow: visible; }.sidebar-is-collapsed .brand { justify-content: flex-start; }.sidebar-is-collapsed .sidebar__brand { padding: 12px 17px; }.sidebar-is-collapsed .sidebar__nav { padding: 18px 12px; }.sidebar-is-collapsed .nav-section + .nav-section { margin-block-start: 22px; padding-block-start: 20px; }.sidebar-is-collapsed .nav-item { justify-content: flex-start; padding: 0 12px; }.sidebar-is-collapsed .version-chip { justify-content: flex-start; }.sidebar-is-collapsed .sidebar-toggle { justify-content: flex-start; padding: 0 12px; }.sidebar-is-collapsed .sidebar-toggle .icon { transform: none; }.sidebar-is-collapsed .nav-item[data-tooltip]::after { display: none; }.sidebar__mobile-close { display: grid; }.sidebar-toggle { display: none; }.sidebar-scrim { position: fixed; z-index: 45; inset: 0; visibility: hidden; opacity: 0; background: rgba(10,14,24,.48); backdrop-filter: blur(3px); transition: all var(--transition); }.sidebar-mobile-open .sidebar-scrim { visibility: visible; opacity: 1; }.app-main, .sidebar-is-collapsed .app-main { margin-inline-start: 0; }.topbar__menu { display: grid; }.settings-grid--profile { grid-template-columns: 1fr; }.settings-grid--profile .panel-card--wide, .profile-summary-card { grid-column: 1; }.profile-summary-card { position: relative; inset: auto; grid-row: auto; }.appearance-preview { grid-template-columns: 1fr; }.mini-shell { display: none; }.brand-stage { grid-template-columns: 1fr; }.brand-stage__login { display: none; }.login-shell { grid-template-columns: 1fr; }.login-story { display: none; }.login-panel { padding: 35px clamp(24px,8vw,85px); }.login-panel__mobile-brand { display: flex; align-items: center; gap: 10px; margin-block-end: 50px; }.installer-layout { display: block; }.installer-intro { min-height: auto; padding: 27px; }.installer-intro h1, .installer-intro > p, .installer-step-list { display: none; }.installer-progress-copy { margin-block-start: 18px; }.installer-progress { margin-block-end: 0; }.installer-workspace { padding: 22px; }.installer-form { min-height: 620px; }.complete-summary { grid-template-columns: 1fr; }
    [dir="rtl"] .sidebar { transform: translateX(105%); } [dir="rtl"] .sidebar-mobile-open .sidebar { transform: none; }
}
@media (max-width: 700px) {
    :root { --page-gap: 16px; --radius-lg: 17px; }.topbar { padding: 0 15px; }.topbar__context { display: none; }.profile-menu__copy, .profile-menu__chevron { display: none; }.view-content { padding: 18px 14px 30px; }.page-header__row { align-items: flex-start; flex-direction: column; }.page-header__actions, .page-header__actions .button { width: 100%; }.page-header__copy h1 { font-size: 28px; }.dashboard-grid { display: flex; flex-direction: column; }.dashboard-widget { min-height: 285px; }.dashboard-widget--hero { min-height: 390px; }.welcome-widget { grid-template-columns: 1fr; padding: 29px; }.welcome-visual { position: absolute; width: 180px; height: 180px; inset-inline-end: -40px; inset-block-end: -45px; opacity: .38; }.welcome-widget__copy { max-width: 92%; }.welcome-widget__actions { align-items: flex-start; flex-direction: column; }.readiness-grid, .quick-links { grid-template-columns: 1fr; }.dashboard-widget__toolbar { opacity: 1; }.widget-drag { display: none; }.form-grid--two, .form-grid--three, .form-grid--four, .settings-grid--two, .choice-grid--two, .choice-grid--three, .asset-grid, .alert-grid, .state-grid, .error-preview-grid, .control-demo-grid, .review-grid { grid-template-columns: 1fr; }.field--span-2 { grid-column: span 1; }.panel-card { padding: 20px 17px; }.avatar-editor { align-items: flex-start; flex-direction: column; }.appearance-preview { padding: 24px 20px; }.choice-grid--three { grid-template-columns: 1fr; }.theme-preview { height: 72px; }.accent-option { flex-wrap: wrap; }.accent-option .color-input { width: 100%; margin: 5px 0 0 32px; }.sticky-form-actions { inset-block-end: 8px; flex-wrap: wrap; }.sticky-form-actions > div { width: 100%; }.brand-stage { min-height: 210px; padding: 25px 20px; }.brand-stage__identity { align-items: flex-start; flex-direction: column; }.brand-stage__identity h2 { font-size: 27px; }.showcase-controls { align-items: flex-start; flex-direction: column; }.showcase-controls__actions { width: 100%; align-items: flex-start; flex-direction: column; }.tabs--sticky { inset-block-start: calc(var(--topbar-height) + 4px); }.showcase-section > header { align-items: flex-start; flex-direction: column; }.showcase-section > header p { text-align: start; }.showcase-card-grid { grid-template-columns: 1fr; }.local-filter-bar { align-items: stretch; flex-direction: column; }.local-filter-bar select { width: 100%; }.wizard-steps strong { display: none; }.wizard-demo__panel { align-items: flex-start; flex-direction: column; }.showcase-surface { padding: 16px; }.modal { padding: 10px; }.modal__panel { max-height: calc(100vh - 20px); border-radius: 17px; }.toast-region { inset-inline: 15px; width: auto; }.installer-header { padding: 0 17px; }.installer-header__status { display: none; }.installer-workspace { padding: 13px; }.installer-form { min-height: calc(100vh - 130px); padding: 21px 16px; border-radius: 18px; }.installer-panel__heading h2 { font-size: 20px; }.environment-check { grid-template-columns: 35px minmax(0,1fr); }.environment-check > .status-pill { display: none; }.security-visual { grid-template-columns: 1fr; }.security-visual__ring { display: none; }.installer-actions { position: sticky; inset-block-end: 0; margin-inline: -16px; padding: 14px 16px 0; background: #fff; }.installer-actions .button { padding-inline: 13px; }.complete-summary { width: 100%; }.login-panel { padding: 28px 20px; }.login-panel__mobile-brand { margin-block-end: 38px; }.login-panel__footer { align-items: flex-start; flex-direction: column; }.error-actions { flex-direction: column; }.error-actions .button { width: 100%; }
}
@media (max-width: 420px) {
    .segmented-control { grid-template-columns: 1fr; }.profile-summary-card { padding-inline: 17px; }.welcome-widget__copy { max-width: 100%; }.button { padding-inline: 14px; }.installer-intro { padding-inline: 20px; }.installer-panel__heading .feature-icon { display: none; }
}

[dir="rtl"] .icon:where(.profile-menu__chevron) { transform: scaleX(-1); }
[dir="rtl"] .breadcrumbs ol, [dir="rtl"] .page-header__row, [dir="rtl"] .widget-heading, [dir="rtl"] .panel-card__header { direction: rtl; }
[dir="rtl"] .card-link .icon, [dir="rtl"] .quick-links > a > .icon, [dir="rtl"] .button .icon:where(:last-child) { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v0.2 Users & Security additions — composed from the v0.1 tokens and surfaces. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.login-secondary-action { margin-block-start: 18px; text-align: center; }
.login-secondary-action a { color: var(--text-soft); font-size: 12px; font-weight: 700; }
.login-secondary-action a:hover { color: var(--accent); }
.stat-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--page-gap); margin-block-end: var(--page-gap); }
.stat-card-grid > article { min-height: 128px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 4px 12px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.stat-card-grid .feature-icon { grid-row: 1 / span 2; }
.stat-card-grid small { align-self: end; color: var(--text-muted); font-weight: 700; }
.stat-card-grid strong { align-self: start; font-size: 28px; letter-spacing: -.04em; }
.admin-management-grid { grid-template-columns: minmax(310px,.75fr) minmax(620px,2fr); align-items: start; }
.panel-card--wide-list { min-width: 0; }
.admin-management-grid .local-filter-bar { flex-wrap: wrap; }
.coordinator-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-block-start: 18px; }
.coordinator-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.coordinator-card > header { display: flex; align-items: center; gap: 10px; }
.coordinator-card > header > div { min-width: 0; flex: 1; }
.coordinator-card h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.coordinator-card p { overflow: hidden; margin: 2px 0 0; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.coordinator-card__workspace { display: flex; gap: 10px; margin-block: 14px; padding: 12px; border-radius: 12px; background: var(--surface); }
.coordinator-card__workspace > div { min-width: 0; display: flex; flex-direction: column; }
.coordinator-card__workspace small { color: var(--text-muted); }
.coordinator-card__workspace strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coordinator-card__workspace code { margin-block-start: 3px; color: var(--accent); font-size: 11px; }
.coordinator-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0 0 14px; }
.coordinator-card dl > div { display: flex; flex-direction: column; }
.coordinator-card dt { color: var(--text-muted); font-size: 10px; }
.coordinator-card dd { overflow: hidden; margin: 2px 0 0; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.credential-panel, .recovery-code-panel { margin-block-end: var(--page-gap); padding: 22px; border: 1px solid color-mix(in srgb,var(--warning) 35%,var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb,var(--warning-soft) 45%,var(--surface)); box-shadow: var(--shadow-sm); }
.credential-panel__heading, .recovery-code-panel > header { display: flex; align-items: flex-start; gap: 13px; margin-block-end: 18px; }
.credential-panel__heading > div, .recovery-code-panel > header > div { min-width: 0; flex: 1; }
.credential-panel h2, .recovery-code-panel h2 { margin: 1px 0 3px; font-size: 17px; }
.credential-panel p, .recovery-code-panel p { margin: 0; color: var(--text-muted); font-size: 12px; }
.credential-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-block-end: 14px; }
.credential-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.credential-grid small { color: var(--text-muted); }
.credential-grid strong, .manual-secret code, .recovery-code-grid code { overflow-wrap: anywhere; font: 750 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.data-table-wrap { width: 100%; overflow-x: auto; margin-block-start: 18px; border: 1px solid var(--border); border-radius: 14px; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--surface); }
.data-table th, .data-table td { padding: 13px 14px; border-block-end: 1px solid var(--border); text-align: start; vertical-align: middle; }
.data-table th { color: var(--text-muted); background: var(--surface-soft); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.data-table td { color: var(--text-soft); font-size: 12px; }
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody tr:hover { background: color-mix(in srgb,var(--surface-soft) 55%,transparent); }
.table-identity { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.table-identity > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.table-identity strong, .data-table td > strong { color: var(--text); }
.table-identity small, .table-subtext { display: block; color: var(--text-muted); font-size: 11px; }
.table-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.table-empty strong { margin-block-start: 12px; color: var(--text); }
.table-empty small { color: var(--text-muted); }
.management-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.management-actions form { margin: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.detail-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 12px; background: var(--surface-soft); }
.detail-grid small { color: var(--text-muted); }
.detail-grid strong { overflow-wrap: anywhere; }
.settings-subnav { display: flex; gap: 7px; margin-block-end: var(--page-gap); padding: 7px; overflow-x: auto; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.settings-subnav a { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 10px; color: var(--text-soft); font-size: 12px; font-weight: 750; white-space: nowrap; }
.settings-subnav a:hover { background: var(--surface-soft); }
.settings-subnav a.is-active { color: var(--accent); background: var(--accent-soft); }
.settings-subnav .icon { width: 16px; height: 16px; }
.security-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--page-gap); }
.security-setting-card { min-height: 132px; display: flex; align-items: center; gap: 14px; padding: 21px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.security-setting-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.security-setting-card > div { min-width: 0; flex: 1; }
.security-setting-card h2 { margin: 0 0 4px; font-size: 15px; }
.security-setting-card p { margin: 0; color: var(--text-muted); font-size: 12px; }
.security-setting-card > .icon:last-child { width: 17px; color: var(--text-muted); }
.security-form-card { max-width: 920px; margin-inline: auto; }
.policy-toggle-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.policy-toggle-list .toggle-row, .policy-primary-toggle { min-height: 72px; padding: 14px 16px; background: var(--surface-soft); }
.policy-primary-toggle { border: 1px solid var(--border); border-radius: 14px; }
.policy-toggle-list .toggle-row > span:first-child, .policy-primary-toggle > span:first-child { display: block; }
.input-suffix { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.input-suffix input { min-width: 0; flex: 1; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.input-suffix span { padding-inline: 14px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.card-footer-action { display: flex; align-items: center; margin-block-start: 20px; padding-block-start: 18px; border-block-start: 1px solid var(--border); }
.compact-security-form { margin-block-start: 20px; padding-block-start: 18px; border-block-start: 1px solid var(--border); }
.security-focus-card, .two-factor-setup-card { max-width: 880px; margin-inline: auto; }
.security-focus-card > .alert { margin-block-end: 22px; }
.two-factor-setup { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 26px; align-items: center; margin-block-end: 25px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.qr-code { display: grid; place-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.qr-code img { width: 100%; max-width: 260px; height: auto; }
.two-factor-steps ol { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.two-factor-steps li { display: flex; align-items: flex-start; gap: 10px; }
.two-factor-steps li > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 850; }
.two-factor-steps li > div { display: flex; flex-direction: column; }
.two-factor-steps li small { color: var(--text-muted); }
.manual-secret { display: grid; grid-template-columns: 1fr auto; gap: 5px 9px; align-items: center; margin-block-start: 18px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface); }
.manual-secret small { grid-column: 1 / -1; color: var(--text-muted); }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.recovery-code-grid code { padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); text-align: center; }
.recovery-code-panel > footer { display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 16px; }
.dashboard-facts { display: flex; flex-direction: column; gap: 1px; overflow: hidden; margin-block: 16px; border-radius: 12px; background: var(--border); }
.dashboard-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-soft); }
.dashboard-facts span { color: var(--text-muted); font-size: 12px; }
.dashboard-facts strong { text-align: end; font-size: 12px; }
.dashboard-stat { min-height: 145px; display: flex; flex-direction: column; justify-content: center; }
.dashboard-stat > strong { color: var(--accent); font-size: 42px; letter-spacing: -.05em; }
.dashboard-stat > span { color: var(--text-muted); }
.dashboard-stat > i { height: 7px; overflow: hidden; margin-block-start: 15px; border-radius: 8px; background: var(--surface-strong); }
.dashboard-stat > i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.dashboard-state { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; }
.dashboard-state > small { color: var(--text-muted); }
.audit-mini-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; margin-block: 12px; border-radius: 12px; background: var(--border); }
.audit-mini-list > div { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--surface-soft); }
.audit-mini-list p { min-width: 0; display: flex; flex-direction: column; margin: 0; }
.audit-mini-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.audit-mini-list small { color: var(--text-muted); font-size: 11px; }
.audit-mini-list__empty { min-height: 130px; justify-content: center; color: var(--text-muted); }
.workspace-id-visual { align-self: center; max-width: 290px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 25px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); text-align: center; }
.workspace-id-visual small { color: rgba(255,255,255,.72); font-weight: 750; }
.workspace-id-visual strong { color: #fff; font: 850 16px ui-monospace,SFMono-Regular,Consolas,monospace; }
.workspace-stage { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 30px; border-radius: var(--radius-lg); color: #fff; background: var(--workspace-preview-accent); box-shadow: 0 22px 48px color-mix(in srgb,var(--workspace-preview-accent) 24%,transparent); }
.workspace-stage > div:first-child { display: flex; align-items: center; gap: 16px; }
.workspace-stage__logo, .workspace-stage__mark { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; background: #fff; color: var(--workspace-preview-accent); font-size: 22px; font-weight: 850; }
.workspace-stage__logo img { width: 100%; height: 100%; object-fit: contain; }
.workspace-stage small { color: rgba(255,255,255,.72); }
.workspace-stage h2 { margin: 2px 0; font-size: 27px; }
.workspace-stage > div:first-child strong { font: 750 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.completion-ring { width: 110px; height: 110px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 9px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.1); }
.completion-ring strong { font-size: 24px; }
.asset-picker { min-height: 165px; display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 16px; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.asset-picker__preview { width: 125px; height: 125px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; color: var(--text-muted); background: var(--surface); }
.asset-picker__preview img { width: 100%; height: 100%; object-fit: contain; }
.asset-picker__preview .icon { width: 32px; height: 32px; }
.asset-picker > div:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.asset-picker small { color: var(--text-muted); }
.quick-links--stack { grid-template-columns: 1fr; }
.audit-filter-grid { display: grid; grid-template-columns: minmax(220px,2fr) repeat(3,minmax(150px,1fr)); gap: 10px; align-items: end; margin-block: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.audit-filter-grid select { width: 100%; min-height: var(--control-height); padding: 9px 35px 9px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); }
.audit-filter-actions { display: flex; gap: 8px; grid-column: 3 / -1; justify-content: flex-end; }
.data-table--audit td:last-child { min-width: 270px; }
.audit-limit-note { margin-block-start: 16px; }

@media (max-width: 1180px) {
    .admin-management-grid { grid-template-columns: 1fr; }
    .stat-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .audit-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .audit-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .stat-card-grid, .security-card-grid, .credential-grid, .detail-grid, .recovery-code-grid, .audit-filter-grid, .coordinator-card-grid { grid-template-columns: 1fr; }
    .credential-panel__heading, .recovery-code-panel > header { flex-wrap: wrap; }
    .credential-panel__heading > .status-pill, .recovery-code-panel > header > .status-pill { margin-inline-start: 53px; }
    .settings-subnav { margin-inline: -4px; }
    .two-factor-setup { grid-template-columns: 1fr; padding: 14px; }
    .workspace-stage { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
    .completion-ring { width: 92px; height: 92px; }
    .asset-picker { grid-template-columns: 1fr; }
    .asset-picker__preview { width: 100%; }
    .audit-filter-actions { grid-column: 1; }
}
@media print {
    body:has([data-recovery-codes]) .sidebar, body:has([data-recovery-codes]) .topbar, body:has([data-recovery-codes]) .page-header, body:has([data-recovery-codes]) .panel-card, body:has([data-recovery-codes]) .recovery-code-panel > footer { display: none !important; }
    body:has([data-recovery-codes]) .app-main { margin: 0 !important; }
    body:has([data-recovery-codes]) .view-content { padding: 0 !important; }
    body:has([data-recovery-codes]) .recovery-code-panel { display: block !important; border: 0; box-shadow: none; background: #fff; color: #000; }
    body:has([data-credential-panel]) .sidebar, body:has([data-credential-panel]) .topbar, body:has([data-credential-panel]) .page-header, body:has([data-credential-panel]) .stat-card-grid, body:has([data-credential-panel]) .settings-grid, body:has([data-credential-panel]) [data-print-credentials] { display: none !important; }
    body:has([data-credential-panel]) .app-main { margin: 0 !important; }
    body:has([data-credential-panel]) .view-content { padding: 0 !important; }
    body:has([data-credential-panel]) .credential-panel { display: block !important; border: 0; box-shadow: none; background: #fff; color: #000; }
}

/* v0.3 Partners & Master Data additions — extends the approved v0.1/v0.2 visual language. */
.status-pill[style*="--pill-color"] { color: var(--pill-color); background: color-mix(in srgb,var(--pill-color) 12%,transparent); }
.modal__panel--wide { width: min(900px,100%); }
.modal__panel > .settings-form { padding: 22px; }
.modal__panel > .settings-form .form-actions { margin-inline: -22px; margin-block-end: -22px; padding: 16px 22px; }

.master-card-grid, .venue-card-grid, .partner-card-grid, .contact-card-grid { display: grid; gap: 12px; margin-block-start: 18px; }
.master-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.master-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); }
.master-card > header { display: flex; align-items: center; gap: 11px; padding: 15px; }
.master-card > header > div { min-width: 0; flex: 1; }
.master-card h3, .venue-card h3, .partner-card h3, .contact-card h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.master-card p, .venue-card header p, .contact-card header p { overflow: hidden; margin: 2px 0 0; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.master-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 15px; border-block-start: 1px solid var(--border); background: var(--surface); }
.master-card__actions form { margin: 0; }
.type-swatch { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--type-color); background: color-mix(in srgb,var(--type-color) 13%,var(--surface)); font: 850 13px ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--type-color) 24%,transparent); }

.venue-create-card { margin-block-end: var(--page-gap); }
.venue-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.venue-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.venue-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); box-shadow: var(--shadow-sm); }
.venue-card > header { display: flex; align-items: center; gap: 11px; padding: 16px; border-block-end: 1px solid var(--border); background: var(--surface); }
.venue-card > header > div { min-width: 0; flex: 1; }
.venue-card dl, .contact-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 15px; }
.venue-card dl > div, .contact-card dl > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.venue-card dt, .contact-card dt, .detail-list dt { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.venue-card dd, .contact-card dd { overflow: hidden; margin: 0; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }

.local-filter-bar--wrap { flex-wrap: wrap; }
.local-filter-bar--wrap .search-box { flex-basis: 290px; }
.partner-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.partner-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 260px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-soft); transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.partner-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); box-shadow: var(--shadow-md); }
.partner-card > header { display: flex; align-items: center; gap: 12px; padding: 17px; border-block-end: 1px solid var(--border); background: var(--surface); }
.partner-card > header > div { min-width: 0; flex: 1; }
.partner-card code, .identity-code { color: var(--accent); font: 750 11px ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
.partner-image { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius: 14px; color: var(--accent); background: linear-gradient(145deg,var(--accent-soft),var(--surface-strong)); font-size: 13px; font-weight: 850; }
.partner-image--personal { border-radius: 50%; }
.partner-image--xl { width: 88px; height: 88px; border-radius: 23px; font-size: 23px; }
.partner-image img { width: 100%; height: 100%; object-fit: cover; }
.partner-image--enterprise img { object-fit: contain; background: var(--surface); }
.partner-card__badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 17px 0; }
.partner-card__location { min-height: 45px; display: flex; align-items: flex-start; gap: 7px; margin: 14px 17px; color: var(--text-soft); font-size: 12px; }
.partner-card__location .icon { width: 15px; height: 15px; margin-block-start: 2px; color: var(--accent); }
.partner-card > footer { display: flex; align-items: center; gap: 10px; margin-block-start: auto; padding: 13px 17px; border-block-start: 1px solid var(--border); background: var(--surface); }
.partner-card > footer > span { min-width: 0; flex: 1; color: var(--text-muted); font-size: 10px; }
.identity-code { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.partner-form, .partner-address-form { display: flex; flex-direction: column; gap: var(--page-gap); }
.partner-form .avatar-editor { align-items: flex-start; flex-direction: column; }
.duplicate-warning { padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--warning) 28%,var(--border)); border-radius: 13px; color: var(--warning); background: var(--warning-soft); font-size: 12px; }
.duplicate-warning a { color: inherit; font-weight: 800; text-decoration: underline; }

.partner-hero, .portal-welcome { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; margin-block-end: var(--page-gap); padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.partner-hero::after, .portal-welcome::after { content: ""; position: absolute; width: 230px; height: 230px; inset-block-start: -155px; inset-inline-end: -75px; border-radius: 50%; background: var(--accent-soft); pointer-events: none; }
.partner-hero > div, .portal-welcome > div { min-width: 0; flex: 1; position: relative; z-index: 1; }
.partner-hero h2, .portal-welcome h2 { margin: 4px 0 7px; font-size: 27px; letter-spacing: -.035em; }
.partner-hero .partner-card__badges, .portal-welcome .partner-card__badges { padding: 0; }
.portal-welcome p { max-width: 720px; margin: 0 0 14px; color: var(--text-soft); }
.partner-hero > .identity-code { position: relative; z-index: 1; }
.detail-tabs { position: sticky; z-index: 24; inset-block-start: calc(var(--topbar-height) + 9px); display: flex; gap: 5px; margin-block-end: var(--page-gap); padding: 6px; overflow-x: auto; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb,var(--surface) 94%,transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.detail-tabs a { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 10px; color: var(--text-soft); font-size: 12px; font-weight: 750; white-space: nowrap; }
.detail-tabs a:hover { color: var(--text); background: var(--surface-soft); }
.detail-tabs a.is-active { color: var(--accent); background: var(--accent-soft); }
.detail-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--border); }
.detail-list > div { min-width: 0; display: grid; grid-template-columns: minmax(120px,.65fr) minmax(0,1.35fr); align-items: center; gap: 12px; padding: 11px 13px; background: var(--surface-soft); }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 750; text-align: end; }
.address-card, .note-card, .internal-note { display: block; margin: 0 0 14px; padding: 15px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-soft); background: var(--surface-soft); font-size: 13px; font-style: normal; }
.note-card small, .internal-note small { color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.note-card p, .internal-note p { margin: 6px 0 0; overflow-wrap: anywhere; }
.internal-note { border-color: color-mix(in srgb,var(--warning) 25%,var(--border)); background: color-mix(in srgb,var(--warning-soft) 48%,var(--surface)); }

.contact-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.contact-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.contact-card > header { display: flex; align-items: center; gap: 11px; padding: 16px; border-block-end: 1px solid var(--border); background: var(--surface); }
.contact-card > header > div { min-width: 0; flex: 1; }
.contact-card > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 15px; border-block-start: 1px solid var(--border); background: var(--surface); }
.contact-card > footer form { margin: 0; }
.activity-timeline { position: relative; display: flex; flex-direction: column; }
.activity-timeline article { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-inline-start: 9px; padding: 0 0 22px 28px; border-inline-start: 1px solid var(--border); }
.activity-timeline article:last-of-type { padding-block-end: 0; }
.activity-timeline__dot { position: absolute; width: 11px; height: 11px; inset-inline-start: -6px; inset-block-start: 5px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.activity-timeline strong { font-size: 13px; }
.activity-timeline p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.activity-timeline code { align-self: start; padding: 4px 7px; border-radius: 7px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; }
.credential-actions { display: flex; flex-direction: column; gap: 10px; margin-block-start: 17px; padding-block-start: 17px; border-block-start: 1px solid var(--border); }
.credential-actions form { display: grid; grid-template-columns: minmax(150px,1fr) auto; gap: 8px; margin: 0; }
.credential-actions input { min-width: 0; min-height: 38px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }

.portal-shortcut-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--page-gap); margin-block-end: var(--page-gap); }
.portal-shortcut-grid > a { min-width: 0; display: flex; align-items: center; gap: 13px; min-height: 105px; padding: 19px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.portal-shortcut-grid > a:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.portal-shortcut-grid > a > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.portal-shortcut-grid strong { font-size: 14px; }
.portal-shortcut-grid small { color: var(--text-muted); font-size: 11px; }
.portal-shortcut-grid > a > .icon:last-child { width: 17px; color: var(--text-muted); }
.portal-ready-state { display: flex; align-items: center; gap: 15px; }
.portal-ready-state h2 { margin: 0 0 3px; font-size: 15px; }
.portal-ready-state p { margin: 0; color: var(--text-muted); font-size: 12px; }

@media (max-width: 1180px) {
    .partner-card-grid, .venue-card-grid, .contact-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .master-card-grid, .partner-card-grid, .venue-card-grid, .contact-card-grid, .portal-shortcut-grid { grid-template-columns: 1fr; }
    .partner-hero, .portal-welcome { align-items: flex-start; flex-direction: column; padding: 21px 18px; }
    .partner-hero h2, .portal-welcome h2 { font-size: 23px; }
    .partner-hero > .identity-code { align-self: flex-start; }
    .detail-tabs { inset-block-start: calc(var(--topbar-height) + 4px); }
    .detail-list > div { grid-template-columns: 1fr; gap: 3px; }
    .detail-list dd { text-align: start; }
    .credential-actions form { grid-template-columns: 1fr; }
    .activity-timeline article { grid-template-columns: 1fr; }
    .activity-timeline code { justify-self: start; }
    .venue-card dl, .contact-card dl { grid-template-columns: 1fr; }
}

/* v0.4 Courses & Course Content Library — extends the approved v0.3 visual language. */
.course-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--page-gap); padding-block-start: 22px; }
.course-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 440px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.course-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); box-shadow: var(--shadow-md); }
.course-card__visual { position: relative; height: 155px; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg,color-mix(in srgb,var(--accent) 92%,#17184d),color-mix(in srgb,var(--accent) 52%,#101729)); }
.course-card__visual::after { content: ""; position: absolute; width: 190px; height: 190px; inset-block-start: -95px; inset-inline-end: -50px; border-radius: 50%; background: rgba(255,255,255,.10); }
.course-card__visual > img { width: 100%; height: 100%; object-fit: cover; }
.course-card__visual > span { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.course-card__visual > span .icon { width: 34px; height: 34px; opacity: .72; }
.course-card__visual > span strong { font-size: 34px; letter-spacing: -.04em; }
.course-card__visual > .status-pill { position: absolute; z-index: 2; inset-block-start: 13px; inset-inline-end: 13px; font-style: normal; box-shadow: 0 5px 18px rgba(0,0,0,.14); }
.course-card__body { min-width: 0; flex: 1; padding: 18px; }
.course-card__identity h3 { margin: 0 0 4px; overflow: hidden; color: var(--text); font-size: 17px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.course-card__identity code { color: var(--accent); font: 750 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.course-card__identity code + span { display: inline-flex; margin-inline-start: 7px; padding: 2px 7px; border-radius: 6px; color: var(--text-soft); background: var(--surface-strong); font: 750 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.course-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 12px; }
.course-card__body > p { min-height: 42px; display: -webkit-box; overflow: hidden; margin: 0 0 13px; color: var(--text-soft); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.skill-chip-row, .skill-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chip-row span, .skill-cloud > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; font-weight: 750; }
.skill-cloud > span { padding: 8px 11px; font-size: 12px; }
.skill-cloud .icon { width: 14px; height: 14px; color: var(--success); }
.course-card > footer { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-block-start: 1px solid var(--border); background: var(--surface-soft); }
.course-card > footer > span { min-width: 0; flex: 1; color: var(--text-muted); font-size: 10px; }
.course-card > footer > div { display: flex; gap: 5px; }
.course-card-grid > .empty-state { grid-column: 1 / -1; }

.course-form { display: flex; flex-direction: column; gap: var(--page-gap); }
.course-image-editor { align-items: flex-start; flex-direction: column; }
.course-image-preview { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; color: var(--accent); background: linear-gradient(145deg,var(--accent-soft),var(--surface)); }
.course-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.course-image-preview .icon { width: 38px; height: 38px; }
.course-image-editor .avatar-editor__copy { width: 100%; }
.tag-picker-search { max-width: 360px; margin-block-end: 14px; }
.tag-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.tag-picker label { min-width: 0; cursor: pointer; }
.tag-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tag-picker label > span { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface-soft); font-size: 12px; font-weight: 700; transition: border-color var(--transition),background var(--transition),color var(--transition); }
.tag-picker label > span .icon { width: 14px; height: 14px; opacity: .25; }
.tag-picker input:checked + span { border-color: color-mix(in srgb,var(--accent) 45%,var(--border)); color: var(--accent); background: var(--accent-soft); }
.tag-picker input:checked + span .icon { opacity: 1; }
.tag-picker input:focus-visible + span { outline: 3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset: 2px; }
.duplicate-warning.is-hard-block { border-color: color-mix(in srgb,var(--danger) 35%,var(--border)); color: var(--danger); background: var(--danger-soft); }

.course-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 148px minmax(0,1fr) auto; align-items: center; gap: 23px; margin-block-end: var(--page-gap); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.course-hero::after { content: ""; position: absolute; z-index: 0; width: 290px; height: 290px; inset-block-start: -205px; inset-inline-end: -75px; border-radius: 50%; background: var(--accent-soft); pointer-events: none; }
.course-hero__visual { width: 148px; height: 100px; position: relative; z-index: 1; overflow: hidden; display: grid; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 48%,#101729)); }
.course-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.course-hero__visual > span { display: flex; align-items: center; gap: 9px; }
.course-hero__visual .icon { width: 28px; height: 28px; opacity: .75; }
.course-hero__visual strong { font-size: 26px; }
.course-hero__copy { min-width: 0; position: relative; z-index: 1; }
.course-hero__copy h2 { margin: 4px 0 0; font-size: 27px; letter-spacing: -.035em; }
.course-hero__metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(80px,1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.course-hero__metrics > div { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 12px; background: var(--surface-soft); text-align: center; }
.course-hero__metrics strong { color: var(--accent); font-size: 23px; letter-spacing: -.04em; }
.course-hero__metrics span { color: var(--text-muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.course-prose { color: var(--text-soft); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.course-overview-grid .panel-card--wide { grid-column: 1 / -1; }

.sortable-stack { display: flex; flex-direction: column; gap: 10px; }
.sortable-stack > [data-sortable-item], .library-folder-grid > [data-sortable-item], .course-file-list > [data-sortable-item] { transition: opacity var(--transition),transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
[data-sortable-item].is-dragging { opacity: .42; transform: scale(.99); border-color: var(--accent); box-shadow: var(--shadow-md); }
.drag-handle { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; cursor: grab; border-radius: 9px; color: var(--text-muted); background: var(--surface-strong); }
.drag-handle:active { cursor: grabbing; }
.drag-handle .icon { width: 17px; height: 17px; }
.structure-card, .learning-item, .assessment-card { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.structure-card__number, .learning-item__number { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; margin-block-start: 3px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 850; }
.structure-card__copy { min-width: 0; flex: 1; }
.structure-card__copy h3, .learning-item h3, .assessment-card h3 { margin: 1px 0 5px; font-size: 14px; }
.structure-card__actions, .learning-item__actions, .assessment-card__actions, .library-item-actions, .course-file-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin-inline-start: auto; }
.structure-card__actions form, .learning-item__actions form, .assessment-card__actions form, .library-item-actions form, .course-file-card__actions form { margin: 0; }
.structure-card__actions .icon-button, .learning-item__actions .icon-button, .assessment-card__actions .icon-button, .library-item-actions .icon-button, .course-file-card__actions .icon-button { width: 34px; height: 34px; }
.learning-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--page-gap); align-items: start; }
.learning-item { align-items: center; }
.learning-item > p { min-width: 0; flex: 1; margin: 0; color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; }
.assessment-separation-note { display: flex; align-items: flex-start; gap: 10px; margin-block-end: 18px; padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--info) 25%,var(--border)); border-radius: 12px; color: var(--info); background: var(--info-soft); font-size: 11px; }
.assessment-separation-note .icon { width: 17px; height: 17px; flex: 0 0 auto; }
.assessment-card { align-items: center; }
.assessment-card > div:nth-of-type(1) { min-width: 0; flex: 1; }
.assessment-card h3 { margin: 0 0 3px; }
.assessment-card p { overflow: hidden; margin: 0; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.assessment-card small { color: var(--text-muted); font-size: 9px; }
.assessment-type { min-width: 52px; padding: 5px 7px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 850; text-align: center; }
.assessment-type--post { color: var(--success); background: var(--success-soft); }
.assessment-type--daily { color: var(--warning); background: var(--warning-soft); }
.assessment-type--other { color: var(--info); background: var(--info-soft); }

.course-library-shell { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: var(--page-gap); align-items: start; }
.course-library-roots { position: sticky; inset-block-start: calc(var(--topbar-height) + 76px); padding: 14px; }
.course-library-roots > header { display: flex; align-items: center; gap: 10px; padding: 5px 4px 15px; }
.course-library-roots > header > div { min-width: 0; }
.course-library-roots h2 { margin: 0; font-size: 14px; }
.course-library-roots p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.course-library-roots nav { display: flex; flex-direction: column; gap: 5px; }
.course-library-roots nav a { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border-radius: 11px; color: var(--text-soft); }
.course-library-roots nav a:hover { color: var(--text); background: var(--surface-soft); }
.course-library-roots nav a.is-active { color: var(--accent); background: var(--accent-soft); }
.course-library-roots nav a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-strong); }
.course-library-roots nav a.is-active > span { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); }
.course-library-roots nav .icon { width: 16px; height: 16px; }
.course-library-roots nav strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.course-library-roots nav small { color: var(--text-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.course-library-main { min-width: 0; display: flex; flex-direction: column; gap: var(--page-gap); }
.library-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 15px; }
.library-toolbar > div:last-child { margin-inline-start: auto; }
.library-breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 7px; overflow-x: auto; }
.library-breadcrumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }
.library-breadcrumbs a:hover { color: var(--accent); }
.library-breadcrumbs > span { color: var(--text-muted); }
.library-breadcrumbs .icon { width: 14px; height: 14px; }
.course-upload-panel { padding: 14px; }
.course-drop-zone { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; padding: 25px; border: 2px dashed var(--border-strong); border-radius: 16px; color: var(--text-soft); background: var(--surface-soft); text-align: center; transition: border-color var(--transition),background var(--transition),transform var(--transition); }
.course-drop-zone:hover, .course-drop-zone.is-drag-over { transform: translateY(-1px); border-color: var(--accent); background: var(--accent-soft); }
.course-drop-zone__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-block-end: 3px; border-radius: 16px; color: var(--accent); background: var(--accent-soft); }
.course-drop-zone__icon .icon { width: 25px; height: 25px; }
.course-drop-zone strong { color: var(--text); font-size: 15px; }
.course-drop-zone small { max-width: 580px; color: var(--text-muted); font-size: 10px; }
.upload-queue { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 12px; }
.upload-queue > span { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; }
.upload-queue > span.is-failed { border-color: color-mix(in srgb,var(--danger) 30%,var(--border)); color: var(--danger); background: var(--danger-soft); }
.upload-progress { position: relative; height: 24px; overflow: hidden; margin-block-start: 12px; border-radius: 8px; background: var(--surface-strong); }
.upload-progress i { position: absolute; height: 100%; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--accent); transition: width 120ms linear; }
.upload-progress span { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: var(--text); font-size: 9px; font-weight: 850; }
.course-upload-actions { margin-block-start: 12px; }
.library-browser { overflow: hidden; padding: 0; }
.library-browser > .panel-card__header { align-items: center; margin: 0; padding: 20px 22px; border-block-end: 1px solid var(--border); }
.library-section-heading { display: flex; align-items: baseline; gap: 10px; padding: 20px 22px 10px; }
.library-section-heading h3 { margin: 0; font-size: 12px; }
.library-section-heading small { color: var(--text-muted); font-size: 9px; }
.library-folder-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 22px 12px; }
.library-folder-card { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.library-folder-card > a { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; }
.library-folder-card__icon { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--warning); background: var(--warning-soft); }
.library-folder-card__icon .icon { width: 19px; height: 19px; }
.library-folder-card > a > div { min-width: 0; display: flex; flex-direction: column; }
.library-folder-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-card small { color: var(--text-muted); font-size: 9px; }
.library-folder-card .library-item-actions { flex-wrap: nowrap; }
.course-file-list { display: flex; flex-direction: column; gap: 8px; padding: 0 22px 22px; }
.course-file-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.course-file-card__type { width: 48px; height: 48px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.course-file-card__type .icon { width: 18px; height: 18px; }
.course-file-card__type strong { margin-block-start: 1px; font-size: 7px; }
.course-file-card__copy { min-width: 0; flex: 1; }
.course-file-card__copy h3 { overflow: hidden; margin: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.course-file-card__copy p { overflow: hidden; margin: 1px 0; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.course-file-card__copy > span { display: block; color: var(--text-muted); font-size: 9px; }
.course-file-card__copy > small { display: -webkit-box; overflow: hidden; margin-block-start: 4px; color: var(--text-soft); font-size: 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.file-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 18px 22px; }
.modal-divider { height: 1px; background: var(--border); }
.modal-divider + form { padding: 20px 22px; }
.library-empty { min-height: 270px; margin: 0 22px 22px; }

@media (max-width: 1280px) {
    .course-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .course-hero { grid-template-columns: 125px minmax(0,1fr); }
    .course-hero__visual { width: 125px; }
    .course-hero__metrics { grid-column: 1 / -1; width: 100%; }
    .library-folder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .course-library-shell { grid-template-columns: 1fr; }
    .course-library-roots { position: static; }
    .course-library-roots nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .learning-columns { grid-template-columns: 1fr; }
    .tag-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .course-card-grid, .tag-picker, .library-folder-grid, .course-library-roots nav, .file-action-grid { grid-template-columns: 1fr; }
    .course-card > footer { align-items: flex-start; flex-direction: column; }
    .course-card > footer > div { width: 100%; }
    .course-card > footer .button { flex: 1; }
    .course-hero { grid-template-columns: 1fr; padding: 18px; }
    .course-hero__visual { width: 100%; height: 130px; }
    .course-hero__metrics { grid-column: 1; }
    .course-hero__copy h2 { font-size: 23px; }
    .structure-card, .learning-item, .assessment-card { align-items: flex-start; flex-wrap: wrap; }
    .structure-card__copy, .learning-item > p, .assessment-card > div:nth-of-type(1) { flex-basis: calc(100% - 90px); }
    .structure-card__actions, .learning-item__actions, .assessment-card__actions { width: 100%; margin-inline-start: 0; padding-inline-start: 47px; justify-content: flex-start; }
    .assessment-card > .status-pill { margin-inline-start: auto; }
    .library-toolbar { align-items: flex-start; flex-direction: column; }
    .library-toolbar > div:last-child { margin-inline-start: 0; }
    .course-drop-zone { min-height: 165px; padding: 18px; }
    .course-file-card { align-items: flex-start; flex-wrap: wrap; }
    .course-file-card__copy { flex-basis: calc(100% - 65px); }
    .course-file-card__actions { width: 100%; justify-content: flex-start; padding-inline-start: 60px; }
    .library-folder-grid, .course-file-list { padding-inline: 14px; }
    .library-browser > .panel-card__header, .library-section-heading { padding-inline: 14px; }
}

/* v0.45 modification round */
.view-content { padding-block-end: calc(100px * var(--space-unit)); }
.dedicated-form-card { width: min(980px,100%); margin-inline: auto; }

/* Coordinated personal theme presets. Classic intentionally keeps the v0.4 palette. */
html[data-preset="ocean"] { --accent:#087ea4; --bg:#f1f7fb; --surface-soft:#f7fbfd; --surface-strong:#e4f1f7; --border:#d7e7ef; --border-strong:#bfd7e2; --info:#147da8; --info-soft:#e3f4fb; }
html[data-preset="ocean"][data-resolved-theme="dark"] { --accent:#38bdf8; --bg:#071722; --surface:#0d202d; --surface-raised:#122837; --surface-soft:#091b27; --surface-strong:#173140; --text:#eef9fd; --text-soft:#aac5d1; --text-muted:#7895a4; --border:#214051; --border-strong:#31576b; }
html[data-preset="emerald"] { --accent:#087f5b; --bg:#f1f8f5; --surface-soft:#f7fbf9; --surface-strong:#e2f2eb; --border:#d3e7de; --border-strong:#b9d8ca; --success:#087f5b; --success-soft:#e1f5ec; }
html[data-preset="emerald"][data-resolved-theme="dark"] { --accent:#34d399; --bg:#071a15; --surface:#0d241d; --surface-raised:#122c24; --surface-soft:#091e18; --surface-strong:#17372c; --text:#effbf6; --text-soft:#accbbd; --text-muted:#799a8c; --border:#20483a; --border-strong:#326151; }
html[data-preset="violet"] { --accent:#6d4aff; --bg:#f6f3fc; --surface-soft:#faf8fe; --surface-strong:#ece6fa; --border:#e1daf1; --border-strong:#cfc3e8; --info:#6750d8; --info-soft:#eeeafd; }
html[data-preset="violet"][data-resolved-theme="dark"] { --accent:#a78bfa; --bg:#130e20; --surface:#1c162b; --surface-raised:#241c35; --surface-soft:#171124; --surface-strong:#2c2240; --text:#f8f4ff; --text-soft:#c8bcdd; --text-muted:#9285aa; --border:#3b2e52; --border-strong:#51406d; }
html[data-preset="amber"] { --accent:#b45309; --bg:#faf6ee; --surface-soft:#fdfaf5; --surface-strong:#f5ead5; --border:#ebdfc9; --border-strong:#dbc7a4; --warning:#a9550a; --warning-soft:#fff0d2; }
html[data-preset="amber"][data-resolved-theme="dark"] { --accent:#fbbf24; --bg:#1c1408; --surface:#271d0e; --surface-raised:#302513; --surface-soft:#211809; --surface-strong:#3b2c16; --text:#fff9ec; --text-soft:#d8c6a2; --text-muted:#a08b66; --border:#503b1c; --border-strong:#6a5028; }
html[data-preset="rose"] { --accent:#be185d; --bg:#fbf3f6; --surface-soft:#fef9fb; --surface-strong:#f8e5ed; --border:#edd7e0; --border-strong:#dfbdca; --danger:#c0265f; --danger-soft:#fde8ef; }
html[data-preset="rose"][data-resolved-theme="dark"] { --accent:#fb7185; --bg:#200c14; --surface:#2b131d; --surface-raised:#351925; --surface-soft:#251019; --surface-strong:#40202d; --text:#fff4f7; --text-soft:#ddb9c5; --text-muted:#aa7e8d; --border:#543041; --border-strong:#704056; }
html[data-preset="slate"] { --accent:#475569; --bg:#f3f5f7; --surface-soft:#f8f9fb; --surface-strong:#e7ebef; --border:#dce1e7; --border-strong:#c5ccd5; --info:#2563eb; --info-soft:#e8effd; }
html[data-preset="slate"][data-resolved-theme="dark"] { --accent:#94a3b8; --bg:#0d1117; --surface:#151b23; --surface-raised:#1b222d; --surface-soft:#11171e; --surface-strong:#222b37; --text:#f1f5f9; --text-soft:#b4becb; --text-muted:#7f8b9a; --border:#303a47; --border-strong:#424e5d; }
html[data-preset="midnight"] { --accent:#1e3a8a; --bg:#f1f4f9; --surface-soft:#f7f8fc; --surface-strong:#e4e9f3; --border:#d6ddea; --border-strong:#bdc8dc; --info:#294da5; --info-soft:#e7ecf8; }
html[data-preset="midnight"][data-resolved-theme="dark"] { --accent:#60a5fa; --bg:#050b18; --surface:#0b1426; --surface-raised:#101b30; --surface-soft:#07101f; --surface-strong:#17243b; --text:#f2f6ff; --text-soft:#abb9d1; --text-muted:#7385a1; --border:#22314b; --border-strong:#334766; }
html[data-preset="corporate-blue"] { --accent:#1d4ed8; --bg:#f1f5fb; --surface-soft:#f7f9fd; --surface-strong:#e4ebf7; --border:#d5dfef; --border-strong:#bac9e1; --info:#0369a1; --info-soft:#e3f2fa; }
html[data-preset="corporate-blue"][data-resolved-theme="dark"] { --accent:#60a5fa; --bg:#07111f; --surface:#0d1a2b; --surface-raised:#132238; --surface-soft:#091625; --surface-strong:#192d47; --text:#f0f7ff; --text-soft:#aec3db; --text-muted:#788fab; --border:#233c59; --border-strong:#345574; }

.theme-preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-preset-card { position:relative; min-width:0; display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--border); border-radius:15px; background:var(--surface-soft); cursor:pointer; transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition); }
.theme-preset-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.theme-preset-card > input { position:absolute; opacity:0; pointer-events:none; }
.theme-preset-card:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.theme-preset-card .choice-card__check { position:absolute; z-index:2; inset-block-start:8px; inset-inline-end:8px; opacity:0; transform:scale(.8); }
.theme-preset-card:has(input:checked) .choice-card__check { opacity:1; transform:scale(1); }
.theme-preset-card > strong { font-size:13px; }
.theme-preset-card > small { min-height:34px; color:var(--text-muted); font-size:10px; line-height:1.5; }
.theme-preset-card__previews { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-block-end:4px; }
.theme-preset-mini { position:relative; height:56px; overflow:hidden; display:grid; grid-template-columns:15px 1fr; gap:5px; padding:7px; border:1px solid color-mix(in srgb,var(--text-muted) 22%,transparent); border-radius:10px; }
.theme-preset-mini--light { background:#f7f9fc; }
.theme-preset-mini--dark { background:#111827; }
.theme-preset-mini i { grid-row:1/3; border-radius:4px; background:var(--preset-light-primary); }
.theme-preset-mini b,.theme-preset-mini em { display:block; border-radius:3px; background:color-mix(in srgb,var(--preset-light-secondary) 35%,#fff); }
.theme-preset-mini em { width:68%; background:var(--preset-light-secondary); }
.theme-preset-mini--dark i { background:var(--preset-dark-primary); }
.theme-preset-mini--dark b { background:color-mix(in srgb,var(--preset-dark-secondary) 45%,#1f2937); }
.theme-preset-mini--dark em { background:var(--preset-dark-secondary); }
.theme-preset-card__variants { display:flex; justify-content:space-between; color:var(--text-muted); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.settings-tabs { display:flex; align-items:center; gap:5px; overflow-x:auto; margin:-8px 0 var(--page-gap); padding:7px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); scrollbar-width:thin; }
.settings-tabs a { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 13px; border-radius:10px; color:var(--text-soft); font-size:12px; font-weight:750; white-space:nowrap; }
.settings-tabs a:hover { color:var(--text); background:var(--surface-soft); }
.settings-tabs a.is-active { color:var(--accent); background:var(--accent-soft); }
.settings-tabs .icon { width:16px; height:16px; }

/* Structured Course Outline builder */
.outline-builder { overflow:hidden; padding:0; }
.outline-builder__header { align-items:center; margin:0; padding:20px 22px; border-block-end:1px solid var(--border); }
.outline-builder__header-actions,.outline-module__actions,.outline-topic__actions,.outline-subtopic__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px; margin-inline-start:auto; }
.outline-builder__header-actions form,.outline-module__actions form,.outline-topic__actions form,.outline-subtopic__actions form { margin:0; }
.outline-builder__guide { display:flex; align-items:flex-start; gap:11px; margin:16px 22px 0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--info) 22%,var(--border)); border-radius:12px; color:var(--info); background:var(--info-soft); }
.outline-builder__guide > span { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb,var(--info) 12%,transparent); }
.outline-builder__guide .icon { width:17px; height:17px; }
.outline-builder__guide div { display:flex; flex-direction:column; }
.outline-builder__guide strong { font-size:12px; }
.outline-builder__guide small { color:var(--text-soft); font-size:10px; }
.outline-module-list { padding:18px 22px 22px; }
.outline-module { overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-sm); }
.outline-module.is-drag-over,.outline-topic.is-drag-over,.outline-subtopic.is-drag-over { border-color:var(--accent); }
.outline-module__header { display:flex; align-items:center; gap:10px; min-height:70px; padding:13px 14px; background:linear-gradient(90deg,var(--surface-soft),var(--surface)); }
.outline-module__number { flex:0 0 auto; padding:5px 9px; border-radius:8px; color:var(--accent); background:var(--accent-soft); font-size:10px; font-weight:850; text-transform:uppercase; }
.outline-module__identity { min-width:150px; flex:1; }
.outline-module__identity h3 { margin:0; font-size:15px; letter-spacing:-.015em; }
.outline-module__identity small { display:block; margin-block-start:2px; color:var(--text-muted); font-size:9px; }
.outline-module__actions .icon-button,.outline-topic__actions .icon-button,.outline-subtopic__actions .icon-button { width:32px; height:32px; border-radius:9px; }
.outline-module__actions .icon { width:15px; height:15px; }
.outline-module__toggle { min-height:32px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:0; border-radius:9px; color:var(--text-soft); background:var(--surface-strong); cursor:pointer; font-size:10px; font-weight:750; }
.outline-module__toggle .icon { width:14px; height:14px; transition:transform var(--transition); }
.outline-module.is-collapsed .outline-module__toggle .icon { transform:rotate(-90deg); }
.outline-module__body { padding:0 16px 16px; border-block-start:1px solid var(--border); }
.outline-module__description { margin:14px 0; padding:13px 15px; border-inline-start:3px solid var(--accent); border-radius:0 10px 10px 0; background:var(--surface-soft); }
.outline-module__description p { margin:5px 0 0; color:var(--text-soft); font-size:11px; line-height:1.7; }
.outline-topic-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 10px; }
.outline-topic-heading > div { display:flex; flex-direction:column; }
.outline-topic-heading strong { font-size:12px; }
.outline-topic-heading small { color:var(--text-muted); font-size:9px; }
.outline-topic-list { display:flex; flex-direction:column; gap:9px; }
.outline-topic { overflow:hidden; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }
.outline-topic__row { min-height:53px; display:flex; align-items:center; gap:9px; padding:9px 10px; }
.drag-handle--sm { width:29px; height:29px; }
.outline-topic__number,.outline-subtopic__number { color:var(--accent); font:800 9px ui-monospace,SFMono-Regular,Consolas,monospace; }
.outline-topic__row h4 { min-width:0; flex:1; margin:0; font-size:12px; overflow-wrap:anywhere; }
.outline-topic__count { color:var(--text-muted); font-size:8px; font-weight:750; white-space:nowrap; }
.outline-subtopic-list { display:flex; flex-direction:column; gap:5px; padding:0 10px 10px 48px; }
.outline-subtopic { min-height:42px; display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.outline-subtopic__branch { width:12px; height:12px; flex:0 0 auto; border-inline-start:1px solid var(--border-strong); border-block-end:1px solid var(--border-strong); }
.outline-subtopic p { min-width:0; flex:1; margin:0; color:var(--text-soft); font-size:11px; overflow-wrap:anywhere; }
.outline-topic-empty { display:flex; align-items:center; gap:11px; padding:13px; border:1px dashed var(--border-strong); border-radius:12px; color:var(--text-muted); background:var(--surface-soft); }
.outline-topic-empty > span { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--accent-soft); }
.outline-topic-empty p { display:flex; flex:1; flex-direction:column; margin:0; }
.outline-topic-empty strong { color:var(--text); font-size:11px; }
.outline-topic-empty small { font-size:9px; }
.outline-builder__empty { margin:0; }
.export-format-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Outline preview */
.syllabus-sheet { width:min(1000px,100%); overflow:hidden; margin-inline:auto; border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-md); }
.syllabus-sheet__header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 26px; border-block-end:4px solid var(--syllabus-accent,var(--accent)); background:var(--surface-soft); }
.syllabus-sheet__brand { display:flex; align-items:center; gap:11px; }
.syllabus-sheet__brand > span { width:42px; height:42px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:#fff; }
.syllabus-sheet__brand img { width:100%; height:100%; object-fit:contain; }
.syllabus-sheet__brand p { display:flex; flex-direction:column; margin:0; }
.syllabus-sheet__brand strong { font-size:13px; }
.syllabus-sheet__brand small,.syllabus-sheet__header code { color:var(--text-muted); font-size:9px; }
.syllabus-sheet__hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:30px; align-items:center; padding:40px 42px; background:linear-gradient(135deg,var(--accent-soft),transparent 58%); }
.syllabus-sheet__hero h1 { margin:7px 0 16px; font-size:clamp(29px,4vw,43px); line-height:1.08; letter-spacing:-.045em; }
.syllabus-sheet__meta { display:flex; flex-wrap:wrap; gap:8px; }
.syllabus-sheet__meta > span { display:flex; flex-direction:column; padding:8px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.syllabus-sheet__meta small { color:var(--text-muted); font-size:8px; font-weight:750; text-transform:uppercase; }
.syllabus-sheet__meta strong { font-size:10px; }
.syllabus-sheet__description { margin:17px 0 0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.syllabus-sheet__image { height:150px; overflow:hidden; margin:0; border-radius:17px; box-shadow:var(--shadow-sm); }
.syllabus-sheet__image img { width:100%; height:100%; object-fit:cover; }
.syllabus-sheet__section { padding:30px 42px; border-block-start:1px solid var(--border); }
.syllabus-sheet__section > header { display:flex; align-items:center; gap:12px; margin-block-end:18px; }
.syllabus-sheet__section > header > span,.syllabus-module > header > span { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; color:var(--accent); background:var(--accent-soft); font:850 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.syllabus-sheet__section > header div,.syllabus-module > header div { display:flex; flex-direction:column; }
.syllabus-sheet__section > header small,.syllabus-module > header small { color:var(--text-muted); font-size:8px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.syllabus-sheet__section h2 { margin:0; font-size:19px; }
.syllabus-module-list { display:flex; flex-direction:column; gap:12px; }
.syllabus-module { padding:17px 19px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); break-inside:avoid; }
.syllabus-module > header { display:flex; align-items:center; gap:11px; }
.syllabus-module h3 { margin:0; font-size:14px; }
.syllabus-module > p { margin:10px 0; color:var(--text-soft); font-size:11px; line-height:1.65; }
.syllabus-module > ol { margin:13px 0 0; padding-inline-start:23px; color:var(--text); font-size:11px; }
.syllabus-module > ol > li + li { margin-block-start:9px; }
.syllabus-module ul { margin:5px 0 0; padding-inline-start:19px; color:var(--text-soft); }
.syllabus-learning-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.syllabus-learning-grid > section { padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.syllabus-learning-grid h3 { margin:10px 0; font-size:13px; }
.syllabus-learning-grid ol { margin:0; padding-inline-start:20px; color:var(--text-soft); font-size:11px; }
.syllabus-sheet__empty { padding:30px; border:1px dashed var(--border-strong); border-radius:13px; color:var(--text-muted); text-align:center; }
.syllabus-sheet__footer { display:flex; justify-content:space-between; gap:20px; padding:15px 26px; border-block-start:1px solid var(--border); color:var(--text-muted); background:var(--surface-soft); font-size:8px; }

/* Body-level tooltip avoids clipping by the scrollable collapsed sidebar. */
.sidebar-is-collapsed .nav-item[data-tooltip]::after { display:none; }
.sidebar-nav-tooltip { position:fixed; z-index:1000; max-width:240px; padding:8px 11px; border:1px solid color-mix(in srgb,var(--border) 50%,transparent); border-radius:9px; color:var(--text); background:var(--surface-raised); box-shadow:var(--shadow-lg); font-size:12px; font-weight:700; white-space:nowrap; pointer-events:none; opacity:0; transform:translateX(-4px); transition:opacity var(--transition),transform var(--transition); }
.sidebar-nav-tooltip.is-visible { opacity:1; transform:translateX(0); }

@media (max-width: 980px) {
    .theme-preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .outline-module__header { align-items:flex-start; flex-wrap:wrap; }
    .outline-module__identity { min-width:calc(100% - 120px); }
    .outline-module__actions { width:100%; justify-content:flex-start; padding-inline-start:39px; }
}
@media (max-width: 700px) {
    .view-content { padding-block-end:90px; }
    .theme-preset-grid,.export-format-actions,.syllabus-learning-grid { grid-template-columns:1fr; }
    .settings-tabs { margin-block-start:-4px; }
    .settings-tabs a { min-height:38px; }
    .outline-builder__header { align-items:flex-start; flex-wrap:wrap; padding:17px; }
    .outline-builder__header > div:nth-child(2) { min-width:calc(100% - 62px); }
    .outline-builder__header-actions { width:100%; justify-content:flex-start; margin-inline-start:0; }
    .outline-builder__guide { margin-inline:15px; }
    .outline-module-list { padding-inline:15px; }
    .outline-module__actions { padding-inline-start:0; }
    .outline-topic__row { align-items:flex-start; flex-wrap:wrap; }
    .outline-topic__row h4 { flex-basis:calc(100% - 90px); }
    .outline-topic__count { margin-inline-start:67px; }
    .outline-topic__actions { width:100%; justify-content:flex-start; padding-inline-start:38px; }
    .outline-subtopic-list { padding-inline-start:16px; }
    .outline-subtopic { flex-wrap:wrap; }
    .outline-subtopic p { flex-basis:calc(100% - 90px); }
    .outline-subtopic__actions { width:100%; justify-content:flex-start; padding-inline-start:37px; }
    .syllabus-sheet__hero { grid-template-columns:1fr; padding:28px 22px; }
    .syllabus-sheet__image { height:180px; }
    .syllabus-sheet__section { padding:24px 22px; }
}

/* v0.49 Course Assessment authoring */
.form-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.header-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-inline-start:auto; }
.muted-copy { color:var(--text-muted); font-size:11px; }
.modal__panel--compact { width:min(480px,100%); }
.modal__panel--wide { width:min(920px,100%); }
.choice-fieldset { min-width:0; margin:0; padding:0; border:0; }
.choice-fieldset + .choice-fieldset { margin-block-start:20px; }
.choice-fieldset > legend { margin-block-end:9px; color:var(--text); font-size:13px; font-weight:800; }
.choice-fieldset > legend small { color:var(--text-muted); font-weight:600; }
.choice-card-grid { display:grid; gap:10px; }
.choice-card-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-card-grid .choice-card > span { display:flex; flex-direction:column; gap:3px; }
.choice-card-grid .choice-card > span > .icon { width:22px; height:22px; margin-block-end:6px; color:var(--accent); }
.choice-card:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:2px; }

.assessment-panel { overflow:hidden; padding:0; }
.assessment-panel__header { align-items:center; margin:0; padding:20px 22px; border-block-end:1px solid var(--border); }
.assessment-summary-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 22px 0; }
.assessment-summary-strip > span { min-width:86px; display:flex; align-items:baseline; justify-content:center; gap:5px; padding:8px 12px; border:1px solid var(--border); border-radius:11px; color:var(--text-soft); background:var(--surface-soft); font-size:11px; font-weight:700; }
.assessment-summary-strip strong { color:var(--text); font-size:16px; }
.segmented-filter { display:flex; align-items:center; gap:4px; margin:14px 22px 0; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.segmented-filter a { min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:8px; color:var(--text-soft); font-size:12px; font-weight:750; }
.segmented-filter a:hover { color:var(--text); }
.segmented-filter a.is-active { color:var(--accent); background:var(--surface); box-shadow:var(--shadow-sm); }
.assessment-card-grid { display:flex; flex-direction:column; gap:12px; padding:18px 22px 22px; }
.assessment-definition-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition); }
.assessment-definition-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.assessment-definition-card.is-drag-over { border-color:var(--accent); }
.assessment-definition-card > header { display:flex; align-items:center; gap:8px; min-height:48px; padding:9px 13px; border-block-end:1px solid var(--border); background:linear-gradient(90deg,var(--surface-soft),var(--surface)); }
.assessment-type { display:inline-flex; align-items:center; min-height:25px; padding:3px 9px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:11px; font-weight:800; }
.assessment-definition-card__body { padding:17px 18px; }
.assessment-definition-card__body h3 { margin:4px 0 5px; font-size:18px; letter-spacing:-.025em; }
.assessment-definition-card__body h3 a:hover { color:var(--accent); }
.assessment-definition-card__body > p { max-width:850px; margin:0; color:var(--text-soft); font-size:12px; line-height:1.65; }
.assessment-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,150px)); gap:8px; margin-block-start:14px; }
.assessment-metrics > span { display:flex; flex-direction:column; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); }
.assessment-metrics strong { font-size:14px; }
.assessment-metrics small { color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; }
.assessment-skill-row { margin-block-start:13px; }
.tag-chip { display:inline-flex; align-items:center; min-height:25px; padding:3px 9px; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:10px; font-weight:750; }
.tag-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.assessment-definition-card__actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:11px 13px; border-block-start:1px solid var(--border); background:var(--surface-soft); }
.assessment-definition-card__actions form { margin:0; }
.assessment-definition-card__actions .icon-button { width:36px; height:36px; border-radius:10px; }
.assessment-definition-card__actions .icon-button .icon { width:16px; height:16px; }
.assessment-empty-state { margin:0; }
.destructive-summary,.publish-lock-summary { display:flex; align-items:flex-start; gap:12px; margin:0 22px 20px; padding:14px; border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border)); border-radius:13px; color:var(--danger); background:var(--danger-soft); }
.destructive-summary > .icon,.publish-lock-summary > .icon { margin-block-start:2px; }
.destructive-summary p,.publish-lock-summary p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.6; }
.publish-lock-summary { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 25%,var(--border)); background:var(--warning-soft); }
.publish-lock-summary div { display:flex; flex-direction:column; gap:7px; }
.publish-lock-summary strong { color:var(--text); font-size:13px; }

.assessment-hero { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:22px; padding:21px 24px; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--accent-soft),var(--surface) 48%); box-shadow:var(--shadow-sm); }
.assessment-hero__identity { min-width:0; display:flex; align-items:center; gap:13px; }
.feature-icon--large { width:49px; height:49px; border-radius:14px; }
.assessment-hero__identity h2 { overflow:hidden; margin:2px 0 0; font-size:20px; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
.assessment-hero__identity p { margin:2px 0 0; color:var(--text-muted); font-size:11px; }
.assessment-hero__badges { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.assessment-hero__metrics { display:flex; align-items:center; gap:8px; }
.assessment-hero__metrics > span { min-width:88px; display:flex; flex-direction:column; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.assessment-hero__metrics strong { font-size:15px; }
.assessment-hero__metrics small { color:var(--text-muted); font-size:8px; font-weight:750; text-transform:uppercase; }
.published-lock-banner,.publish-review-banner,.builder-publish-bar { display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid color-mix(in srgb,var(--warning) 24%,var(--border)); border-radius:14px; color:var(--warning); background:var(--warning-soft); }
.published-lock-banner div,.publish-review-banner div { min-width:0; flex:1; }
.published-lock-banner strong,.publish-review-banner strong { color:var(--text); font-size:12px; }
.published-lock-banner p,.publish-review-banner p { margin:2px 0 0; color:var(--text-soft); font-size:10px; }
.assessment-tabs { margin-block-start:0; }
.assessment-overview-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:var(--page-gap); align-items:start; }
.assessment-overview-aside { display:flex; flex-direction:column; gap:var(--page-gap); }
.definition-list { display:flex; flex-direction:column; margin:0; }
.definition-list > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-block-end:1px solid var(--border); }
.definition-list > div:last-child { border:0; }
.definition-list dt { color:var(--text-muted); font-size:11px; }
.definition-list dd { margin:0; font-size:11px; font-weight:700; text-align:end; }
.definition-list code { color:var(--accent); font:750 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.stacked-actions { display:flex; flex-direction:column; gap:8px; }
.stacked-actions form,.stacked-actions .button { width:100%; }
.stacked-actions form .button { width:100%; }

.assessment-builder { overflow:hidden; padding:0; }
.assessment-builder__header { align-items:center; margin:0; padding:20px 22px; border-block-end:1px solid var(--border); }
.builder-publish-bar { justify-content:space-between; margin:16px 22px 0; color:var(--info); border-color:color-mix(in srgb,var(--info) 24%,var(--border)); background:var(--info-soft); }
.builder-publish-bar > div { display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:11px; }
.question-card-list { display:flex; flex-direction:column; gap:12px; padding:18px 22px 22px; }
.question-builder-card { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); }
.question-builder-card.is-drag-over { border-color:var(--accent); }
.question-builder-card__header { display:flex; align-items:center; gap:7px; padding:10px 13px; border-block-end:1px solid var(--border); background:var(--surface-soft); }
.question-number { min-width:36px; min-height:28px; display:inline-grid; place-items:center; padding:3px 7px; border-radius:8px; color:#fff; background:var(--accent); font:850 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.question-marks { margin-inline-start:auto; color:var(--text-soft); font-size:11px; }
.question-builder-card__content { padding:17px 18px; }
.question-builder-card__content > h3 { margin:0; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.question-option-preview,.preview-options { display:grid; gap:7px; margin:14px 0; padding:0; list-style-position:inside; }
.question-option-preview li,.preview-options li { padding:9px 11px; border:1px solid var(--border); border-radius:10px; color:var(--text-soft); background:var(--surface-soft); font-size:11px; }
.question-option-preview li.is-correct,.preview-options li.is-correct { border-color:color-mix(in srgb,var(--success) 35%,var(--border)); color:var(--success); background:var(--success-soft); font-weight:700; }
.question-option-preview li small,.preview-options li small { float:inline-end; display:inline-flex; align-items:center; gap:4px; color:var(--success); font-size:9px; font-weight:800; }
.question-option-preview li small .icon,.preview-options li small .icon { width:13px; height:13px; }
.written-answer-summary { display:flex; align-items:center; gap:8px; margin:13px 0; padding:10px 12px; border:1px dashed var(--border-strong); border-radius:10px; color:var(--text-muted); background:var(--surface-soft); font-size:10px; }
.written-answer-summary .icon { width:16px; height:16px; color:var(--accent); }
.trainer-notes { margin-block-start:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }
.trainer-notes summary { padding:9px 12px; cursor:pointer; color:var(--text-soft); font-size:10px; font-weight:750; }
.trainer-notes > div { padding:10px 12px; border-block-start:1px solid var(--border); }
.trainer-notes strong { font-size:10px; }.trainer-notes p { margin:4px 0 0; color:var(--text-soft); font-size:10px; line-height:1.65; }
.question-builder-card__actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 13px; border-block-start:1px solid var(--border); background:var(--surface-soft); }
.question-builder-card__actions form { margin:0; }
.question-builder-card__actions .icon-button { width:35px; height:35px; border-radius:9px; }
.question-editor-form { padding-block-start:2px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); cursor:pointer; }
.switch-row > span { display:flex; flex-direction:column; }.switch-row strong { font-size:12px; }.switch-row small { color:var(--text-muted); font-size:10px; }
.switch-row > input[type="checkbox"] { position:absolute; opacity:0; }
.switch-row > i { position:relative; width:42px; height:24px; flex:0 0 auto; border-radius:999px; background:var(--border-strong); transition:background var(--transition); }
.switch-row > i::after { content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); transition:transform var(--transition); }
.switch-row:has(input:checked) > i { background:var(--accent); }.switch-row:has(input:checked) > i::after { transform:translateX(18px); }
[dir="rtl"] .switch-row:has(input:checked) > i::after { transform:translateX(-18px); }
.switch-row:has(input:focus-visible) { outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:2px; }
.question-options-editor { min-width:0; margin:0; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.question-options-editor > legend { padding-inline:5px; font-size:12px; font-weight:800; }
.option-editor-list { display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.option-editor-row { display:grid; grid-template-columns:30px 28px minmax(0,1fr) 86px 68px 38px; align-items:center; gap:7px; padding:7px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.option-editor-row.is-dragging { opacity:.55; }
.option-editor-row .drag-handle { width:30px; height:34px; }
.option-letter { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; color:var(--accent); background:var(--accent-soft); font:850 10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.option-editor-row .field input { min-height:38px !important; padding:7px 10px !important; }
.option-correct-control { display:flex; align-items:center; gap:6px; color:var(--text-soft); font-size:10px; font-weight:750; cursor:pointer; }
.option-correct-control input { accent-color:var(--accent); }
.option-move-controls { display:inline-flex; gap:3px; }
.option-move-controls .icon-button { width:30px; height:30px; }
.option-editor-row .icon-button { width:34px; height:34px; border-radius:9px; }
.assessment-skill-picker { max-height:180px; grid-template-columns:repeat(3,minmax(0,1fr)); }

.publish-review-banner { position:sticky; z-index:15; inset-block-start:calc(var(--topbar-height) + 8px); color:var(--success); border-color:color-mix(in srgb,var(--success) 25%,var(--border)); background:var(--success-soft); box-shadow:var(--shadow-sm); }
.assessment-preview-shell { overflow:hidden; padding:0; }
.assessment-preview-toolbar { align-items:center; margin:0; padding:18px 22px; border-block-end:1px solid var(--border); }
.preview-mode-toggle { display:flex; gap:4px; margin-inline-start:auto; padding:4px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }
.preview-mode-toggle a { min-height:34px; display:flex; align-items:center; gap:6px; padding:0 11px; border-radius:8px; color:var(--text-soft); font-size:10px; font-weight:750; }
.preview-mode-toggle a.is-active { color:var(--accent); background:var(--surface); box-shadow:var(--shadow-sm); }
.preview-mode-toggle .icon { width:14px; height:14px; }
.assessment-paper { position:relative; width:min(920px,calc(100% - 44px)); overflow:hidden; margin:22px auto; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-md); }
.assessment-paper.is-draft::after { content:""; position:absolute; inset:0; border:2px dashed color-mix(in srgb,var(--warning) 25%,transparent); border-radius:18px; pointer-events:none; }
.draft-preview-mark { position:absolute; z-index:0; inset-block-start:160px; inset-inline-start:50%; transform:translateX(-50%) rotate(-24deg); color:color-mix(in srgb,var(--warning) 9%,transparent); font-size:clamp(72px,14vw,150px); font-weight:900; letter-spacing:.08em; pointer-events:none; }
.assessment-paper__header { position:relative; z-index:1; padding:38px 42px 28px; border-block-end:4px solid var(--accent); background:linear-gradient(135deg,var(--accent-soft),transparent 65%); }
.assessment-paper__header h1 { margin:6px 0 12px; font-size:clamp(28px,4vw,42px); line-height:1.1; letter-spacing:-.045em; }
.assessment-paper__header > p { margin:15px 0 0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.assessment-paper__meta { display:flex; flex-wrap:wrap; gap:7px; }
.assessment-paper__meta span { padding:6px 9px; border:1px solid var(--border); border-radius:9px; color:var(--text-soft); background:var(--surface); font-size:9px; font-weight:750; }
.assessment-instructions { position:relative; z-index:1; padding:22px 42px; border-block-end:1px solid var(--border); background:var(--surface-soft); }
.assessment-instructions h2 { margin:0 0 7px; font-size:15px; }.assessment-instructions p { margin:0; color:var(--text-soft); font-size:11px; line-height:1.7; }
.assessment-preview-questions { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; padding:28px 42px 42px; }
.preview-question { padding:18px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface) 96%,transparent); break-inside:avoid; }
.preview-question > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:start; }
.preview-question > header small { color:var(--text-muted); font-size:9px; font-weight:750; }.preview-question h2 { margin:3px 0 0; font-size:14px; line-height:1.6; }.preview-question > header > strong { color:var(--text-soft); font-size:10px; }
.model-answer-box,.rationale-box { margin-block-start:12px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--success) 24%,var(--border)); border-radius:10px; background:var(--success-soft); }
.rationale-box { border-color:color-mix(in srgb,var(--info) 24%,var(--border)); background:var(--info-soft); }
.model-answer-box strong,.rationale-box strong { font-size:10px; }.model-answer-box p,.rationale-box p { margin:4px 0 0; color:var(--text-soft); font-size:10px; line-height:1.65; }
.written-response-space { display:flex; flex-direction:column; gap:15px; margin-block-start:16px; color:var(--text-muted); font-size:9px; }
.written-response-space i { display:block; border-block-end:1px solid var(--border-strong); }
.assessment-preview-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:15px 22px; border-block-start:1px solid var(--border); background:var(--surface-soft); }
.assessment-preview-footer form { margin:0; }

@media (max-width: 1060px) {
    .assessment-hero { grid-template-columns:minmax(0,1fr) auto; }
    .assessment-hero__metrics { grid-column:1/-1; justify-content:flex-end; }
    .assessment-overview-grid { grid-template-columns:1fr; }
    .assessment-overview-aside { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .form-grid--2,.choice-card-grid--2 { grid-template-columns:1fr; }
    .assessment-panel__header,.assessment-builder__header,.assessment-preview-toolbar { align-items:flex-start; flex-wrap:wrap; }
    .header-actions,.assessment-builder__header > .button,.preview-mode-toggle { width:100%; margin-inline-start:0; }
    .header-actions .button { flex:1; }
    .segmented-filter { overflow-x:auto; }
    .assessment-definition-card__actions > .button { flex:1; }
    .assessment-hero { grid-template-columns:1fr; align-items:start; }
    .assessment-hero__badges { justify-content:flex-start; }
    .assessment-hero__metrics { grid-column:auto; justify-content:flex-start; overflow-x:auto; }
    .assessment-overview-aside { display:flex; }
    .builder-publish-bar,.publish-review-banner { align-items:flex-start; flex-direction:column; }
    .publish-review-banner { position:relative; inset:auto; }
    .builder-publish-bar .button,.publish-review-banner .button { width:100%; }
    .question-builder-card__header { flex-wrap:wrap; }.question-marks { margin-inline-start:0; }
    .option-editor-row { grid-template-columns:28px 25px minmax(0,1fr) 36px; }
    .option-correct-control { grid-column:3/4; }.option-editor-row > .icon-button { grid-column:4; grid-row:1; }
    .option-move-controls { grid-column:3/5; grid-row:3; justify-self:end; }
    .assessment-skill-picker { grid-template-columns:1fr; }
    .assessment-paper { width:calc(100% - 24px); margin:12px auto; }
    .assessment-paper__header,.assessment-instructions,.assessment-preview-questions { padding-inline:20px; }
    .preview-question > header { grid-template-columns:auto minmax(0,1fr); }.preview-question > header > strong { grid-column:2; }
    .assessment-preview-footer { align-items:stretch; flex-direction:column; }.assessment-preview-footer .button { width:100%; }
}

@media print {
    .sidebar,.topbar,.sidebar-scrim,.view-loader,.toast-region,.syllabus-preview-page > .page-header,.assessment-detail-page > .page-header,.assessment-detail-page > .assessment-hero,.assessment-detail-page > .published-lock-banner,.assessment-tabs,.assessment-preview-toolbar,.assessment-preview-footer,.publish-review-banner { display:none !important; }
    .app-main { margin:0 !important; }
    .view-content { padding:0 !important; }
    body { background:#fff !important; }
    .syllabus-sheet { width:100%; border:0; border-radius:0; box-shadow:none; }
    .syllabus-sheet__section,.syllabus-module { break-inside:avoid; }
    .assessment-preview-shell { border:0; box-shadow:none; }.assessment-paper { width:100%; margin:0; border:0; border-radius:0; box-shadow:none; }.preview-question { break-inside:avoid; }
}

/* v0.5 · Training Booking Core (additive to the approved visual baseline) */
.form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--page-gap); margin-block-end:var(--page-gap); }
.stat-card { min-height:112px; display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.stat-card > div { display:flex; flex-direction:column; gap:2px; }
.stat-card small { color:var(--text-muted); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.stat-card strong { font-size:27px; line-height:1; letter-spacing:-.04em; }
.booking-filter-bar { flex-wrap:wrap; margin:0 0 18px; padding:0 0 18px; }
.booking-filter-bar .search-box { flex:1 1 290px; }
.booking-filter-bar > select { min-width:145px; flex:1 1 145px; }
.filter-date { min-height:var(--control-height); display:flex; align-items:center; gap:7px; padding-inline-start:11px; border:1px solid var(--border); border-radius:12px; color:var(--text-muted); background:var(--surface); font-size:9px; font-weight:750; text-transform:uppercase; }
.filter-date input { width:132px; min-height:calc(var(--control-height) - 2px); padding-inline:4px 9px; border:0; background:transparent; }

.booking-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.booking-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface-soft); transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.booking-card::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--booking-status); }
.booking-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--booking-status) 32%,var(--border)); box-shadow:var(--shadow-md); }
.booking-card__main { display:block; padding:18px 18px 14px 20px; color:inherit; }
.booking-card__main > header,.booking-session-card > header,.booking-assessment-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.booking-card h2 { margin:4px 0 3px; font-size:16px; }.booking-card h2 + p { margin:0; color:var(--text-soft); font-size:10px; }
.booking-card__parties { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; margin:15px 0; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.booking-card__parties > span { min-width:0; display:flex; flex-direction:column; }.booking-card__parties > span:nth-child(2) { color:var(--accent); }
.booking-card__parties small,.booking-card__metrics small { color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; }.booking-card__parties strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.booking-card__metrics { display:grid; grid-template-columns:1.45fr .65fr 1fr; gap:10px; }
.booking-card__metrics span { min-width:0; display:flex; flex-direction:column; gap:3px; }.booking-card__metrics strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.booking-card > footer { display:flex; flex-wrap:wrap; gap:7px 13px; padding:10px 18px 11px 20px; border-block-start:1px solid var(--border); color:var(--text-muted); background:color-mix(in srgb,var(--surface) 72%,transparent); font-size:9px; font-weight:700; }
.booking-card > footer span { display:inline-flex; align-items:center; gap:4px; }.booking-card > footer .icon { width:12px; height:12px; }
.text-warning { color:var(--warning) !important; }
.status-pill[style*="--pill-color"] { color:var(--pill-color); border-color:color-mix(in srgb,var(--pill-color) 30%,var(--border)); background:color-mix(in srgb,var(--pill-color) 11%,var(--surface)); }

.booking-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin-block-end:var(--page-gap); padding:22px; overflow:hidden; border:1px solid color-mix(in srgb,var(--booking-status) 22%,var(--border)); border-radius:var(--radius-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--booking-status) 9%,var(--surface)),var(--surface) 62%); box-shadow:var(--shadow-sm); }
.booking-hero::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--booking-status); }
.booking-hero__status { display:flex; align-items:center; gap:14px; min-width:0; }.booking-hero__status h2 { margin:4px 0; font-size:21px; }.booking-hero__status p { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0; color:var(--text-soft); font-size:11px; }.booking-hero__status p .icon { width:13px; }
.booking-hero__metrics { display:flex; gap:7px; }.booking-hero__metrics > div { min-width:112px; display:flex; flex-direction:column; gap:6px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface) 88%,transparent); }.booking-hero__metrics small { color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; }.booking-hero__metrics strong { font-size:12px; }
.booking-tabs a span { min-width:18px; height:18px; display:grid; place-items:center; padding-inline:4px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:8px; }
.booking-tab-stack { display:flex; flex-direction:column; gap:var(--page-gap); }

.booking-wizard { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-md); }
.booking-wizard__steps { position:sticky; inset-block-start:calc(var(--topbar-height) + 15px); display:flex; flex-direction:column; gap:4px; padding:16px; border-inline-end:1px solid var(--border); background:var(--surface-soft); }
.booking-wizard__steps button { width:100%; min-height:49px; display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:center; padding:7px 9px; border:0; border-radius:11px; color:var(--text-soft); background:transparent; text-align:start; cursor:pointer; }
.booking-wizard__steps button:hover { background:var(--surface); }.booking-wizard__steps button.is-active { color:var(--accent); background:var(--accent-soft); }.booking-wizard__steps button.is-complete { color:var(--success); }
.booking-wizard__steps button > span { width:27px; height:27px; display:grid; place-items:center; border:1px solid currentColor; border-radius:9px; font-size:9px; font-weight:800; }.booking-wizard__steps button strong { font-size:10px; }
.booking-wizard__body { min-width:0; padding:28px; }
.booking-step { min-height:460px; animation:page-in 180ms ease; }.booking-step > h2 { margin:5px 0 5px; font-size:23px; }.booking-step > h2 + p,.step-heading-row p { margin:0 0 22px; color:var(--text-soft); font-size:11px; }
.booking-wizard__actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-block-start:22px; padding-block-start:18px; border-block-start:1px solid var(--border); }.booking-wizard__actions > a:first-child { margin-inline-end:auto; }
.step-heading-row { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }.step-heading-row h2 { margin:5px 0; }
.booking-session-builder,.booking-delivery-builder { margin-block-end:12px; padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.booking-session-builder > header,.booking-delivery-builder > header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-block-end:14px; }.booking-session-builder h3,.booking-delivery-builder h3 { margin:3px 0 0; font-size:14px; }
.booking-delivery-builder > header { justify-content:flex-start; }.booking-delivery-builder .segmented-control,.settings-form .segmented-control { grid-template-columns:repeat(3,minmax(0,1fr)); }.booking-delivery-builder .segmented-control label > span,.settings-form .segmented-control label > span { min-height:48px; }
.delivery-day-preview { display:flex; flex-wrap:wrap; gap:6px; margin-block-start:12px; }.delivery-day-preview > span { display:flex; flex-direction:column; gap:1px; min-width:76px; padding:7px 9px; border:1px solid var(--border); border-radius:9px; color:var(--text-soft); background:var(--surface); }.delivery-day-preview strong { font-size:9px; }.delivery-day-preview small { color:var(--text-muted); font-size:8px; }
.calculation-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-block-start:20px; }.calculation-preview > span { display:flex; flex-direction:column; gap:5px; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.calculation-preview small { color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; }.calculation-preview strong { font-size:17px; }
.booking-loading-placeholder { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:25px; border:1px dashed var(--border-strong); border-radius:14px; color:var(--text-muted); background:var(--surface-soft); text-align:center; }
.wizard-planner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.wizard-planner-grid > article { min-width:0; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }.wizard-planner-grid > article > header { display:flex; align-items:center; gap:10px; margin-block-end:12px; }.wizard-planner-grid h3 { margin:2px 0 0; font-size:13px; }.wizard-planner-grid fieldset { margin:10px 0 0; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }.wizard-planner-grid legend { padding-inline:5px; color:var(--text-soft); font-size:9px; font-weight:750; }
.check-row { display:flex; align-items:flex-start; gap:8px; padding:7px; border-radius:8px; color:var(--text-soft); font-size:10px; cursor:pointer; }.check-row:hover { background:var(--surface-soft); }.check-row input { margin-block-start:2px; accent-color:var(--accent); }.check-row span { min-width:0; }.check-row span small { display:block; margin-block-start:2px; color:var(--warning); }
.wizard-assessment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.wizard-assessment-grid .choice-card { margin:0; }
.booking-wizard .choice-card { position:relative; display:flex; cursor:pointer; }.booking-wizard .choice-card > input { position:absolute; opacity:0; }.booking-wizard .choice-card > span { width:100%; min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }.booking-wizard .choice-card > input:checked + span { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent); }.booking-wizard .choice-card strong { font-size:11px; }.booking-wizard .choice-card small { color:var(--text-muted); font-size:9px; }
.booking-review { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-block:20px; }.booking-review article { display:flex; flex-direction:column; gap:5px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }.booking-review small { color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; }.booking-review strong { font-size:11px; }
.booking-form-error { margin-block:12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border)); border-radius:10px; background:var(--danger-soft); }

.booking-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--page-gap); }.booking-summary-grid .panel-card { margin:0; }
.snapshot-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-block-start:16px; }.snapshot-metrics > span { display:flex; flex-direction:column; gap:4px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.snapshot-metrics small { color:var(--text-muted); font-size:8px; font-weight:750; text-transform:uppercase; }.snapshot-metrics strong { font-size:13px; }
.snapshot-diff { display:flex; flex-wrap:wrap; gap:6px; margin-block-start:12px; }.notes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.notes-grid > div { padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }.notes-grid h3 { margin:0 0 7px; font-size:11px; }.notes-grid p { margin:0; color:var(--text-soft); font-size:10px; line-height:1.7; }
.input-pair { display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:7px; }
.money { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }.dirham-symbol { width:14px; height:14px; object-fit:contain; }.currency-mark img { width:25px; height:25px; }.theme-dark .dirham-symbol,.theme-dark .currency-mark img,[data-theme="dark"] .dirham-symbol,[data-theme="dark"] .currency-mark img { filter:invert(1); }

.booking-session-list { display:flex; flex-direction:column; gap:12px; }.booking-session-card { padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }.booking-session-card > header > div:last-child { display:flex; align-items:center; gap:7px; }.booking-session-card h3 { margin:3px 0; font-size:14px; }.booking-session-card header p { margin:0; color:var(--text-soft); font-size:10px; }
.session-delivery-summary { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0; }.session-delivery-summary > span,.session-delivery-summary > a { display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--border); border-radius:9px; color:var(--text-soft); background:var(--surface); font-size:9px; }.session-delivery-summary .icon { width:13px; height:13px; color:var(--accent); }
.delivery-day-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.delivery-day-chip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }.delivery-day-chip__date { width:43px; height:43px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:11px; color:var(--accent); background:var(--accent-soft); }.delivery-day-chip__date strong { font-size:14px; line-height:1; }.delivery-day-chip__date small { margin-block-start:2px; font-size:7px; font-weight:750; text-transform:uppercase; }.delivery-day-chip h4 { margin:2px 0; font-size:10px; }.delivery-day-chip p { margin:0; color:var(--text-muted); font-size:8px; }.delivery-day-chip > div:last-child { display:flex; gap:3px; }

.planner-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; align-items:start; }.planner-library { position:sticky; inset-block-start:calc(var(--topbar-height) + 78px); padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.planner-library h3 { margin:4px 0 12px; font-size:13px; }.planner-library details { margin-block-start:7px; }.planner-library summary { display:flex; justify-content:space-between; padding:7px 0; color:var(--text-soft); font-size:10px; font-weight:750; cursor:pointer; }.planner-library summary span { color:var(--accent); }.planner-library details > div { display:flex; flex-direction:column; gap:5px; }.planner-source { display:flex; align-items:center; gap:6px; padding:6px 7px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:8px; }.planner-source .icon { width:11px; height:11px; color:var(--accent); }
.planner-days { display:flex; flex-direction:column; gap:10px; }.planner-day { padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.planner-day > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; margin-block-end:10px; }.planner-day h3 { margin:2px 0 0; font-size:13px; }.planner-day__groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.planner-day fieldset { min-width:0; margin:0; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }.planner-day legend { padding-inline:5px; color:var(--text-muted); font-size:8px; font-weight:750; }.check-row.needs-review { color:var(--warning); background:var(--warning-soft); }.planner-removed-item { display:inline-flex; margin:3px 4px 3px 0; padding:4px 6px; border:1px solid color-mix(in srgb,var(--warning) 25%,var(--border)); border-radius:7px; background:var(--warning-soft); font-size:8px; }
.form-actions--sticky { position:sticky; z-index:12; inset-block-end:10px; margin-block-start:14px; padding:10px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--shadow-md); backdrop-filter:blur(12px); }.form-actions--sticky > span { margin-inline-end:auto; color:var(--text-muted); font-size:9px; }

.booking-assessment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-block-start:15px; }.booking-assessment-card { display:flex; flex-direction:column; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.booking-assessment-card h3 { margin:3px 0 0; font-size:13px; }.booking-assessment-card > p { color:var(--text-soft); font-size:9px; line-height:1.6; }.booking-assessment-card__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-block:auto 12px; }.booking-assessment-card__metrics span { display:flex; flex-direction:column; gap:2px; padding:7px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.booking-assessment-card__metrics small { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }.booking-assessment-card__metrics strong { font-size:9px; }.booking-assessment-card > footer { display:flex; flex-wrap:wrap; gap:6px; padding-block-start:11px; border-block-start:1px solid var(--border); }.booking-assessment-card > footer form { margin:0; }
.assessment-copy-questions { max-height:min(65vh,620px); display:flex; flex-direction:column; gap:10px; overflow:auto; padding:2px; }.assessment-copy-questions > article { padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.assessment-copy-questions > article > header { display:grid; grid-template-columns:26px minmax(0,1fr); gap:9px; }.assessment-copy-questions > article > header > span { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--accent); background:var(--accent-soft); font-size:9px; font-weight:800; }.assessment-copy-questions h3 { margin:3px 0; font-size:11px; line-height:1.55; }.assessment-copy-questions p { color:var(--text-soft); font-size:9px; line-height:1.6; }.assessment-copy-options { margin:10px 0; padding-inline-start:25px; }.assessment-copy-options li { padding:4px; color:var(--text-soft); font-size:9px; }.assessment-copy-options li.is-correct { color:var(--success); font-weight:750; }

.booking-upload-form { margin-block-end:14px; }.booking-file-list { display:flex; flex-direction:column; gap:8px; }.booking-file-list > article { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.booking-file-list h3 { margin:0 0 3px; font-size:11px; }.booking-file-list p { margin:0; color:var(--text-muted); font-size:8px; }.booking-file-list form { margin:0; }.file-type-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--accent-soft); }.file-type-icon .icon { width:17px; height:17px; }
.activity-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--page-gap); }.activity-history-grid .panel-card { min-width:0; margin:0; }.activity-list,.schedule-history-list { display:flex; flex-direction:column; gap:8px; margin-block-start:15px; }.activity-list > article { display:grid; grid-template-columns:10px minmax(0,1fr); gap:10px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); }.activity-list__dot { width:8px; height:8px; margin-block-start:4px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); }.activity-list article header,.schedule-history-list article > header { display:flex; justify-content:space-between; gap:9px; }.activity-list strong { font-size:9px; }.activity-list time,.schedule-history-list time { color:var(--text-muted); font-size:8px; }.activity-list p { margin:3px 0; color:var(--text-muted); font-size:8px; }.activity-list details { font-size:8px; }.activity-list pre { max-height:150px; overflow:auto; padding:8px; border-radius:8px; background:var(--surface); font-size:7px; white-space:pre-wrap; }
.schedule-history-list > article { padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.schedule-history-list > article > p { color:var(--text-soft); font-size:9px; }.history-schedule { display:flex; flex-direction:column; gap:5px; margin-block:8px; }.history-schedule span { display:flex; justify-content:space-between; gap:8px; padding:7px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:8px; }.history-schedule small { color:var(--text-muted); }.schedule-history-list dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:8px 0 0; }.schedule-history-list dl div { padding:7px; border-radius:8px; background:var(--surface); }.schedule-history-list dt { color:var(--text-muted); font-size:7px; text-transform:uppercase; }.schedule-history-list dd { margin:3px 0 0; font-size:9px; font-weight:750; }
.master-card .currency-mark { font-size:17px; font-weight:800; }.status-swatch { width:42px; height:42px; display:block; border:7px solid color-mix(in srgb,var(--status-color) 12%,var(--surface)); border-radius:13px; background:var(--status-color); box-shadow:0 0 0 1px color-mix(in srgb,var(--status-color) 25%,var(--border)); }.booking-master-page code { padding:2px 5px; border-radius:5px; color:var(--accent); background:var(--accent-soft); font-size:8px; }

@media (max-width:1100px) {
    .booking-card-grid,.booking-assessment-grid,.activity-history-grid { grid-template-columns:1fr; }
    .booking-hero { grid-template-columns:1fr; }.booking-hero__metrics { justify-content:flex-start; overflow-x:auto; }
    .planner-layout { grid-template-columns:1fr; }.planner-library { position:static; }.planner-library details > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-grid--3,.booking-review { grid-template-columns:1fr; }
    .booking-wizard { grid-template-columns:1fr; }.booking-wizard__steps { position:static; flex-direction:row; overflow-x:auto; border-inline-end:0; border-block-end:1px solid var(--border); }.booking-wizard__steps button { min-width:120px; }.booking-wizard__body { padding:20px; }
    .wizard-planner-grid,.wizard-assessment-grid,.booking-summary-grid { grid-template-columns:1fr; }
    .planner-day__groups { grid-template-columns:1fr; }.delivery-day-list { grid-template-columns:1fr; }
    .notes-grid,.activity-history-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .stats-grid { gap:9px; }.stat-card { min-height:92px; padding:13px; }.stat-card strong { font-size:22px; }
    .booking-filter-bar > * { width:100%; flex-basis:100%; }.filter-date input { flex:1; width:auto; }
    .booking-card__metrics { grid-template-columns:1fr 1fr; }.booking-card__metrics span:first-child { grid-column:1/-1; }
    .booking-hero { padding:17px; }.booking-hero__metrics { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.booking-hero__metrics > div { min-width:0; }.booking-hero__metrics > div:last-child { grid-column:1/-1; }
    .booking-wizard__body { padding:16px; }.booking-wizard__actions { flex-wrap:wrap; }.booking-wizard__actions .button { flex:1; }.booking-wizard__actions > a:first-child { width:100%; margin:0; }
    .calculation-preview,.snapshot-metrics,.booking-assessment-card__metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .booking-session-card > header { flex-direction:column; }.booking-session-card > header > div:last-child { width:100%; justify-content:flex-end; }
    .booking-file-list > article { grid-template-columns:auto minmax(0,1fr); }.booking-file-list > article > .button,.booking-file-list > article > form { grid-column:auto; }.booking-file-list > article > form .button { width:100%; }
    .planner-library details > div { grid-template-columns:1fr; }.planner-day > header { grid-template-columns:auto minmax(0,1fr); }.planner-day > header > .status-pill { grid-column:2; }
    .schedule-history-list dl { grid-template-columns:1fr; }.history-schedule span { flex-direction:column; }
}

/* v0.8 — Booking Analytics, Learning Paths and Reports */
.analytics-page { display:flex; flex-direction:column; gap:16px; }
.analytics-page > .card,.analytics-section { min-width:0; }
.analytics-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-block-start:14px; }
.analytics-status-grid article { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.analytics-status-grid strong { font-size:11px; }.analytics-status-grid p { margin:0; color:var(--text-muted); font-size:8px; line-height:1.5; }
.status-pill--complete,.status-pill--strength,.status-pill--approved { color:var(--success); background:var(--success-soft); }
.status-pill--partial,.status-pill--pending,.status-pill--developing,.status-pill--draft { color:var(--warning); background:var(--warning-soft); }
.status-pill--na { color:var(--text-muted); background:var(--surface-strong); }.status-pill--gap { color:var(--danger); background:var(--danger-soft); }
.analytics-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.metric-card { display:flex; flex-direction:column; gap:5px; min-width:0; padding:17px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.metric-card small { color:var(--text-muted); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.metric-card strong { color:var(--text); font-size:23px; line-height:1; }.metric-card span { overflow:hidden; color:var(--text-soft); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.metric-card--accent { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 66%,#13164a)); }.metric-card--accent small,.metric-card--accent strong,.metric-card--accent span { color:#fff; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-block-start:12px; }.kpi-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }.kpi-card > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }.kpi-card small { color:var(--text-muted); font-size:8px; font-weight:800; text-transform:uppercase; }.kpi-card > div > span { color:var(--accent); font-size:8px; font-weight:750; }.kpi-card > strong { display:block; margin:8px 0 9px; font-size:21px; }.kpi-card p { margin:7px 0 0; color:var(--text-muted); font-size:8px; }
.analytics-bar { overflow:hidden; height:7px; border-radius:99px; background:var(--surface-strong); }.analytics-bar i { display:block; width:0; height:100%; border-radius:inherit; background:var(--bar-color,var(--accent)); transition:width .35s ease; }
.skill-analysis-list { display:flex; flex-direction:column; gap:9px; margin-block-start:12px; }.skill-analysis-list article { padding:12px 13px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.skill-analysis-list article > div:first-child { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; margin-block-end:8px; }.skill-analysis-list strong { min-width:0; font-size:10px; }.skill-analysis-list b { font-size:10px; }.skill-analysis-list small { display:block; margin-block-start:6px; color:var(--text-muted); font-size:7px; }
.analytics-page .table-wrap td strong { display:block; }.analytics-page .table-wrap td small { display:block; margin-block-start:2px; color:var(--text-muted); font-size:7px; }.analytics-page .table-wrap table { min-width:1180px; }.analytics-skill-summary { min-width:180px; max-width:280px; color:var(--text-soft); font-size:8px; line-height:1.55; }
.learning-path-list { display:flex; flex-direction:column; gap:12px; margin-block-start:13px; }.learning-path-card { overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--surface-soft); }.learning-path-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px; border-block-end:1px solid var(--border); background:var(--surface); }.learning-path-card h3 { margin:6px 0 3px; font-size:13px; }.learning-path-card header small { color:var(--text-muted); font-size:8px; }
.path-items { display:flex; flex-direction:column; gap:8px; margin:0; padding:13px; list-style:none; }.path-items > li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }.path-items > li.is-dragging { opacity:.55; }.path-items > li.is-drag-over { border-color:var(--accent); }.path-item__handle { color:var(--text-muted); cursor:grab; }.path-item__handle .icon { width:17px; height:17px; }.path-items strong { display:block; font-size:10px; }.path-items p { margin:4px 0; color:var(--text-soft); font-size:8px; line-height:1.5; }.path-items small { color:var(--accent); font-size:7px; font-weight:750; }.path-item__actions { display:flex; align-items:center; gap:4px; }.path-item__actions form { margin:0; }
.inline-create-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px; padding:13px; border-block-start:1px solid var(--border); }.report-builder { margin-block-start:8px; }.check-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.option-fieldset { min-width:0; padding:12px; border:1px solid var(--border); border-radius:13px; }.option-fieldset legend { padding-inline:5px; color:var(--text-soft); font-size:9px; font-weight:800; }.check-card { position:relative; min-width:0; display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); cursor:pointer; }.check-card input { accent-color:var(--accent); }.check-card span { font-size:8px; font-weight:750; }.check-card:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--accent-soft); }
.analytics-admin-list { display:flex; flex-direction:column; gap:16px; margin-block-start:16px; }.analytics-band-editor { display:flex; flex-direction:column; gap:8px; }.analytics-band-row { display:grid; grid-template-columns:minmax(160px,1fr) minmax(100px,.5fr) minmax(100px,.5fr) 90px; gap:9px; align-items:end; padding:9px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.analytics-band-row input[type="color"] { width:100%; min-height:42px; padding:4px; }
@media (max-width:1100px) { .analytics-metric-grid,.kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.check-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:800px) { .analytics-status-grid { grid-template-columns:1fr; }.learning-path-card > header { flex-direction:column; }.inline-create-form,.analytics-band-row { grid-template-columns:1fr; }.check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .analytics-metric-grid,.kpi-grid,.check-grid { grid-template-columns:1fr; }.path-items > li { grid-template-columns:auto minmax(0,1fr); }.path-item__actions { grid-column:2; flex-wrap:wrap; } }

.snapshot-review-lists { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-block:14px; }
.snapshot-review-lists section { min-width:0; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }
.snapshot-review-lists h3 { margin:0 0 8px; font-size:10px; }
.snapshot-review-lists ul { display:flex; flex-direction:column; gap:6px; margin:0; padding-inline-start:18px; }
.snapshot-review-lists li { color:var(--text-soft); font-size:9px; line-height:1.55; }
.snapshot-review-lists li .icon { width:11px; height:11px; margin-inline:5px; vertical-align:middle; }
.snapshot-review-lists li span { color:var(--text-muted); }
.booking-final-review { grid-template-columns:repeat(2,minmax(0,1fr)); margin-block-end:14px; }

@media (max-width:600px) {
    .snapshot-review-lists,.booking-final-review { grid-template-columns:1fr; }
}

/* v0.6 · Participants & Attendance (additive to the approved v0.5 visual baseline) */
.panel-actions,.button-group { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.panel-actions { margin-inline-start:auto; justify-content:flex-end; }
.button-group { gap:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; }
.button-group .button { border:0; border-radius:0; }.button-group .button + .button { border-inline-start:1px solid var(--border); }
.identity-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }
.identity-banner code { color:var(--accent); font-size:10px; font-weight:800; }
.candidate-duplicate-warning { margin-block:2px 5px; }
.candidate-card-grid,.candidate-assignment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-block-start:15px; }
.candidate-card,.candidate-assignment-card { min-width:0; display:flex; flex-direction:column; gap:12px; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); transition:border-color var(--transition),transform var(--transition),opacity var(--transition); }
.candidate-card:hover,.candidate-assignment-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); }
.candidate-card > header,.candidate-assignment-card > header { display:flex; align-items:center; gap:10px; min-width:0; }
.candidate-card > header > div,.candidate-assignment-card > header > div { min-width:0; flex:1; }
.candidate-card h3,.candidate-assignment-card h3 { overflow:hidden; margin:2px 0; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.candidate-card header p { margin:0; color:var(--text-muted); font-size:9px; }
.candidate-card dl,.candidate-assignment-card dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0; }
.candidate-card dl div,.candidate-assignment-card dl div { min-width:0; padding:8px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.candidate-card dt,.candidate-assignment-card dt { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }
.candidate-card dd,.candidate-assignment-card dd { overflow:hidden; margin:3px 0 0; color:var(--text-soft); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.candidate-card > footer,.candidate-assignment-card > footer { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-block-start:auto; padding-block-start:11px; border-block-start:1px solid var(--border); }
.candidate-card > footer form,.candidate-assignment-card > footer form { margin:0; }.candidate-assignment-card.is-removed { opacity:.72; border-style:dashed; }
.candidate-assignment-card > header > .status-pill { margin-inline-start:auto; }
.candidate-directory .local-filter-bar { margin-block:14px 0; }

.import-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 var(--page-gap); padding:0; list-style:none; }
.import-steps li { display:flex; align-items:center; gap:9px; padding:11px; border:1px solid var(--border); border-radius:12px; color:var(--text-muted); background:var(--surface); }
.import-steps li span { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border:1px solid currentColor; border-radius:8px; font-size:9px; font-weight:800; }
.import-steps li strong { font-size:9px; }.import-steps li.is-active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); background:var(--accent-soft); }.import-steps li.is-complete { color:var(--success); }
.import-mapping-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.import-preview-list { display:flex; flex-direction:column; gap:9px; margin-block-start:15px; }
.import-preview-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; padding:12px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }
.import-row-form { display:grid; grid-template-columns:62px repeat(4,minmax(110px,1fr)) minmax(150px,1.35fr) auto; gap:8px; align-items:end; min-width:0; }
.import-row-form .field { gap:4px; }.import-row-form .field label { font-size:7px; }.import-row-form .field input,.import-row-form .field textarea { min-height:35px; padding:7px 9px; font-size:9px; }
.import-row-number { align-self:center; color:var(--accent); font-size:8px; font-weight:800; }.import-row-warning { grid-column:2/-1; margin:0; padding:7px 9px; }.import-row-warning span { font-size:8px; }
.import-preview-row > form:last-child { margin:0; }.import-preview-card > .form-actions { margin-block-end:0; }

.booking-candidate-summary { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; margin-block:15px; }
.booking-candidate-summary > div,.booking-candidate-summary > span,.candidate-partner-counts > span { min-width:145px; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }
.booking-candidate-summary > div { position:relative; padding-inline-start:48px; }.booking-candidate-summary > div .feature-icon { position:absolute; inset-inline-start:9px; width:30px; height:30px; }
.booking-candidate-summary strong,.candidate-partner-counts strong { font-size:10px; }.booking-candidate-summary small,.candidate-partner-counts small { color:var(--text-muted); font-size:8px; }
.candidate-picker-list { max-height:420px; overflow:auto; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.candidate-picker-list h3 { position:sticky; z-index:2; inset-block-start:0; margin:0; padding:9px; border-block-end:1px solid var(--border); color:var(--accent); background:color-mix(in srgb,var(--surface) 94%,transparent); font-size:9px; backdrop-filter:blur(8px); }
.candidate-picker-row { align-items:center; padding:9px; border-block-end:1px solid var(--border); }.candidate-picker-row:last-child { border:0; }.candidate-picker-row strong { color:var(--text); font-size:10px; }.candidate-picker-row span small { color:var(--text-muted); }.candidate-picker-row.is-disabled { opacity:.55; cursor:not-allowed; }
.candidate-partner-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.booking-candidate-summary-card { grid-column:1/-1; }

.attendance-day-selector { display:flex; gap:8px; overflow-x:auto; margin-block-start:15px; padding-block-end:5px; }
.attendance-day-selector a { min-width:100px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px; border:1px solid var(--border); border-radius:12px; color:var(--text-soft); background:var(--surface-soft); transition:all var(--transition); }
.attendance-day-selector a span { color:var(--accent); font-size:18px; font-weight:800; line-height:1; }.attendance-day-selector a strong { font-size:9px; }.attendance-day-selector a small { max-width:90px; overflow:hidden; color:var(--text-muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.attendance-day-selector a:hover,.attendance-day-selector a.is-active { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); }.attendance-day-selector a.is-historical { border-style:dashed; opacity:.72; }
.responsive-table { width:100%; overflow-x:auto; margin-block-start:14px; border:1px solid var(--border); border-radius:13px; }.responsive-table .data-table { min-width:720px; }.responsive-table .data-table th,.responsive-table .data-table td { padding:10px 12px; font-size:9px; }
.data-table td > a { display:flex; flex-direction:column; gap:2px; color:inherit; }.data-table td > a small,.data-table td > small { color:var(--text-muted); font-size:8px; }
.attendance-table { min-width:620px !important; }.attendance-table tr.is-not-applicable { opacity:.58; }.attendance-status { min-width:132px; min-height:34px; padding:6px 9px; border-color:var(--border); font-size:9px; font-weight:750; }
.attendance-status--present,.attendance-pill--present { color:var(--success); background:var(--success-soft); }.attendance-status--absent,.attendance-pill--absent { color:var(--danger); background:var(--danger-soft); }.attendance-status--late,.attendance-pill--late { color:var(--warning); background:var(--warning-soft); }.attendance-status--excused,.attendance-pill--excused { color:var(--info); background:var(--info-soft); }.attendance-status--unmarked,.attendance-pill--unmarked { color:var(--text-muted); background:var(--surface-soft); }

@media (max-width:1100px) {
    .import-row-form { grid-template-columns:62px repeat(2,minmax(130px,1fr)); }.import-row-form .import-row-notes { grid-column:2/4; }
}
@media (max-width:800px) {
    .candidate-card-grid,.candidate-assignment-grid,.candidate-partner-counts,.import-mapping-grid { grid-template-columns:1fr; }
    .panel-card__header .panel-actions { width:100%; margin-inline-start:0; justify-content:flex-start; }
    .import-row-form { grid-template-columns:1fr 1fr; }.import-row-number { grid-column:1/-1; }.import-row-form .import-row-notes,.import-row-warning { grid-column:1/-1; }
}
@media (max-width:600px) {
    .import-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.candidate-card dl,.candidate-assignment-card dl { grid-template-columns:1fr; }
    .import-preview-row { grid-template-columns:1fr; }.import-preview-row > form:last-child { justify-self:end; }.import-row-form { grid-template-columns:1fr; }.import-row-form .import-row-notes,.import-row-warning,.import-row-number { grid-column:auto; }
    .booking-candidate-summary > div,.booking-candidate-summary > span { min-width:calc(50% - 4px); flex:1; }
}

/* v0.7 · Assessment Execution & Results (additive to the approved v0.6 visual baseline) */
.booking-assessment-card--results { gap:12px; }
.assessment-result-counts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding-block:11px; border-block:1px solid var(--border); }
.assessment-result-counts span { min-width:0; display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:9px; background:var(--surface); }
.assessment-result-counts small { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }
.assessment-result-counts strong { color:var(--text); font-size:14px; }.assessment-result-counts .is-pass strong { color:var(--success); }.assessment-result-counts .is-fail strong { color:var(--danger); }
.assessment-lock-note { display:flex; align-items:center; gap:7px; margin:0; color:var(--text-muted); font-size:8px; }.assessment-lock-note .icon { width:14px; height:14px; }
.booking-result-summary-list { display:flex; flex-direction:column; gap:7px; margin-block-start:14px; }
.booking-result-summary-list a { display:grid; grid-template-columns:minmax(180px,1fr) auto auto auto; align-items:center; gap:14px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); transition:border-color var(--transition),transform var(--transition); }
.booking-result-summary-list a:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); }
.booking-result-summary-list a > span { display:flex; flex-direction:column; gap:2px; color:var(--text-soft); font-size:9px; }.booking-result-summary-list a > span:first-child strong { color:var(--text); font-size:10px; }.booking-result-summary-list small { color:var(--text-muted); }.booking-result-summary-list b { color:var(--accent); }

.result-hero,.result-detail-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-soft) 52%,var(--surface))); box-shadow:var(--shadow-sm); }
.result-hero > div,.result-detail-identity { min-width:0; display:flex; align-items:center; gap:14px; }.result-hero h2,.result-detail-hero h2 { margin:2px 0; font-size:20px; }.result-hero p,.result-detail-hero p { margin:0; color:var(--text-soft); font-size:9px; }
.result-hero dl,.result-detail-hero dl { display:grid; grid-auto-flow:column; gap:8px; margin:0; }
.result-hero dl div,.result-detail-hero dl div { min-width:105px; padding:10px; border:1px solid var(--border); border-radius:11px; background:color-mix(in srgb,var(--surface) 88%,transparent); }
.result-hero dt,.result-detail-hero dt { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }.result-hero dd,.result-detail-hero dd { margin:4px 0 0; color:var(--text); font-size:11px; font-weight:800; }
.result-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.result-stat-grid article { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--border); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-sm); }.result-stat-grid article div { min-width:0; display:flex; flex-direction:column; }.result-stat-grid small { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }.result-stat-grid strong { color:var(--text); font-size:18px; }
.result-table td > strong,.result-table td > small { display:block; }.result-table td > small { margin-block-start:3px; }

.result-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); align-items:start; gap:14px; }
.result-question-list { display:flex; flex-direction:column; gap:11px; }
.result-question-card { overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.result-question-card > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:start; padding:14px; border-block-end:1px solid var(--border); background:var(--surface-soft); }
.result-question-number { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--accent); font-size:10px; font-weight:850; }
.result-question-card h3 { margin:4px 0 0; font-size:12px; line-height:1.55; }
.result-question-card > footer { display:flex; align-items:stretch; justify-content:space-between; gap:9px; padding:10px 14px; border-block-start:1px solid var(--border); background:var(--surface-soft); }
.result-question-card > footer span { display:flex; flex-direction:column; gap:2px; }.result-question-card > footer small { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }.result-question-card > footer strong { font-size:9px; }
.result-option-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:14px; }
.result-option { position:relative; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); cursor:pointer; transition:all var(--transition); }
.result-option input { position:absolute; opacity:0; pointer-events:none; }.result-option .checkbox-control { width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:7px; color:transparent; background:var(--surface); }.result-option input[type="radio"] + .checkbox-control { border-radius:50%; }
.result-option input:checked + .checkbox-control { color:#fff; border-color:var(--accent); background:var(--accent); }.result-option strong { min-width:0; font-size:9px; }.result-option small { grid-column:2; color:var(--success); font-size:7px; font-weight:750; }
.result-option:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--accent-soft); }.result-option.is-correct { box-shadow:inset 3px 0 0 var(--success); }.result-option:has(input:disabled) { cursor:default; }
.result-written-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.75fr); gap:13px; padding:14px; }.result-written-grid > aside { display:flex; flex-direction:column; gap:9px; }
.result-guidance { padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); }.result-guidance small { color:var(--accent); font-size:7px; font-weight:800; text-transform:uppercase; }.result-guidance p { margin:5px 0 0; color:var(--text-soft); font-size:8px; line-height:1.55; }
.result-score-sidebar { position:sticky; inset-block-start:calc(var(--topbar-height) + 14px); display:flex; flex-direction:column; gap:11px; }.result-score-totals { display:flex; flex-direction:column; gap:0; margin:0 0 12px; }.result-score-totals div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-block-end:1px solid var(--border); }.result-score-totals dt { color:var(--text-soft); font-size:8px; }.result-score-totals dd { margin:0; color:var(--text); font-size:12px; font-weight:850; }.result-metadata-card .detail-list { margin-block-start:10px; }
.result-events-card { margin-block-end:35px; }

.result-import-steps { grid-template-columns:repeat(6,minmax(0,1fr)); }.result-import-steps li { min-width:0; }.result-import-steps li { flex-wrap:wrap; }.result-import-steps li small { width:100%; padding-inline-start:34px; color:var(--text-muted); font-size:7px; }.result-import-steps li.is-optional { opacity:.65; }
.result-import-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.result-import-rules > span { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 8px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); }.result-import-rules .icon { grid-row:1/3; color:var(--accent); }.result-import-rules strong { font-size:9px; }.result-import-rules small { color:var(--text-muted); font-size:8px; }
.result-mapping-list,.result-match-list,.result-preview-list,.result-scoring-list { display:flex; flex-direction:column; gap:9px; margin-block-start:14px; }
.result-mapping-row { display:grid; grid-template-columns:minmax(170px,.8fr) auto minmax(220px,1.2fr); align-items:center; gap:12px; padding:11px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }.result-mapping-row > div:first-child { min-width:0; display:flex; flex-direction:column; gap:2px; }.result-mapping-row > div:first-child small { color:var(--accent); font-size:7px; font-weight:800; text-transform:uppercase; }.result-mapping-row > div:first-child strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.result-mapping-row > div:first-child p { overflow:hidden; margin:0; color:var(--text-muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.result-mapping-row > .icon { color:var(--text-muted); }.result-mapping-row .field { gap:4px; }
.result-match-row { position:relative; display:grid; grid-template-columns:minmax(160px,.75fr) minmax(300px,1.25fr) auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }.result-match-row > header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.result-match-row.is-confirmed { border-color:color-mix(in srgb,var(--success) 38%,var(--border)); }.result-match-source { display:flex; flex-direction:column; gap:3px; }.result-match-source small { color:var(--text-muted); font-size:7px; font-weight:750; text-transform:uppercase; }.result-match-source strong { font-size:8px; font-weight:650; }.result-match-form { display:flex; align-items:end; gap:8px; }.result-match-form .field { min-width:0; flex:1; gap:4px; }.result-match-row > form:last-child { margin:0; }
.result-preview-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; padding:13px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }.result-preview-row > header { grid-column:1/-1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-block-end:9px; border-block-end:1px solid var(--border); }.result-preview-row h3 { margin:2px 0; font-size:12px; }.result-preview-row header p { margin:0; color:var(--text-muted); font-size:8px; }.result-preview-form { min-width:0; }.result-preview-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.result-preview-questions .field { gap:4px; }.result-preview-questions .field label { font-size:8px; }.result-preview-questions .field__hint { font-size:7px; }.result-preview-form > footer { display:flex; justify-content:flex-end; margin-block-start:9px; }.result-conflict-choice { margin-block-start:10px; padding:10px; border:1px solid var(--warning); border-radius:11px; background:var(--warning-soft); }
.result-scoring-list > article { padding:13px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }.result-scoring-list > article > header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block-end:10px; border-block-end:1px solid var(--border); }.result-scoring-list h3 { margin:2px 0; font-size:11px; }
.result-written-score-row { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:13px; align-items:start; padding:11px 0; border-block-end:1px solid var(--border); }.result-written-score-row > div:first-child { display:flex; flex-direction:column; gap:5px; }.result-written-score-row strong { font-size:10px; }.result-written-score-row p { margin:0; padding:9px; border-radius:9px; color:var(--text-soft); background:var(--surface); font-size:9px; line-height:1.55; }.result-written-score-row details { color:var(--text-soft); font-size:8px; }.result-written-score-row.is-blank { opacity:.7; }.result-written-score-form > footer { display:flex; justify-content:flex-end; margin-block-start:10px; }
.result-import-cancel { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block:14px 0; padding:10px 0 34px; color:var(--text-muted); font-size:8px; }

@media (max-width:1100px) {
    .result-hero,.result-detail-hero { align-items:flex-start; flex-direction:column; }.result-detail-hero dl,.result-hero dl { width:100%; grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); }
    .result-detail-layout { grid-template-columns:1fr; }.result-score-sidebar { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .result-import-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .assessment-result-counts { grid-template-columns:repeat(3,minmax(0,1fr)); }.result-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .result-option-list,.result-written-grid,.result-preview-questions { grid-template-columns:1fr; }
    .result-mapping-row { grid-template-columns:1fr; }.result-mapping-row > .icon { transform:rotate(90deg); }
    .result-match-row { grid-template-columns:1fr auto; }.result-match-source { grid-column:1/-1; }.result-match-form { grid-column:1; }
}
@media (max-width:600px) {
    .assessment-result-counts,.result-stat-grid,.result-import-rules { grid-template-columns:1fr 1fr; }
    .booking-result-summary-list a { grid-template-columns:minmax(0,1fr) auto; }.booking-result-summary-list a > span:nth-child(3) { display:none; }
    .result-detail-hero dl,.result-hero dl { grid-template-columns:1fr 1fr; }.result-detail-hero dl div,.result-hero dl div { min-width:0; }
    .result-question-card > header { grid-template-columns:auto minmax(0,1fr); }.result-question-card > header > .status-pill { grid-column:2; justify-self:start; }.result-question-card > footer { flex-direction:column; }
    .result-score-sidebar { grid-template-columns:1fr; }.result-import-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .result-match-row { grid-template-columns:1fr; }.result-match-form { flex-direction:column; align-items:stretch; }.result-match-row > form:last-child { justify-self:end; }
    .result-preview-row { grid-template-columns:1fr; }.result-preview-row > form:last-child { justify-self:end; }
    .result-written-score-row { grid-template-columns:1fr; }.result-import-cancel { align-items:flex-start; flex-direction:column; }
}

/* v0.9 Training Financials — additive extension of the approved visual system. */
.financial-page{display:grid;gap:var(--page-gap)}
.financial-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.financial-kpi{display:grid;gap:.4rem;min-width:0}
.financial-kpi>.feature-icon{margin-bottom:.35rem}.financial-kpi>small{color:var(--text-muted);font-weight:700}.financial-kpi>strong{font-size:clamp(1.2rem,2vw,1.85rem);line-height:1.2;overflow-wrap:anywhere}.financial-kpi>p{margin:0;color:var(--text-muted);font-size:.78rem}
.financial-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;overflow:hidden}.financial-shortcuts>a{display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;padding:1.1rem 1.25rem;color:inherit;text-decoration:none;border-inline-end:1px solid var(--border)}.financial-shortcuts>a:last-child{border:0}.financial-shortcuts>a>.icon{grid-row:1/3;width:1.25rem;height:1.25rem;color:var(--accent)}.financial-shortcuts>a>span{font-size:.78rem;color:var(--text-muted)}.financial-shortcuts>a:hover{background:var(--surface-soft)}
.financial-form-grid{align-items:stretch}.financial-line-panel{overflow:visible}.financial-lines{display:grid;gap:.75rem}.financial-line{display:grid;grid-template-columns:auto minmax(220px,2fr) repeat(5,minmax(105px,1fr)) auto;gap:.65rem;align-items:end;padding:.85rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-soft)}.financial-line .field{margin:0}.financial-line__handle{align-self:center;color:var(--text-muted)}.financial-line__description textarea{min-height:46px}.financial-inline-input{display:grid;grid-template-columns:minmax(74px,.8fr) minmax(70px,1fr);gap:.35rem}.financial-total-preview,.financial-totals{display:grid;gap:.5rem;margin:1rem 0}.financial-total-preview>div,.financial-totals>div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .75rem;border-bottom:1px solid var(--border)}.financial-total-preview dt,.financial-totals dt{color:var(--text-muted)}.financial-total-preview dd,.financial-totals dd{margin:0;font-weight:750}.financial-total-preview .is-grand,.financial-totals .is-grand{border:0;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);font-size:1.08rem}
.financial-document-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.financial-document-summary section{display:grid;align-content:start;gap:.4rem}.financial-document-summary h2,.financial-document-summary p{margin:0}.financial-document-paper>header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.financial-document-side{display:grid;align-content:start;gap:18px}.financial-copy{padding:1rem 0;border-top:1px solid var(--border)}.financial-copy h3,.financial-copy p{margin:.25rem 0}.stack-actions{display:grid;gap:.65rem}.table-actions{position:relative}.table-actions>form{display:grid;gap:.5rem;min-width:250px;margin-top:.5rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.master-list{display:grid;gap:.65rem;margin-top:1rem}.master-list>article{display:flex;align-items:center;gap:.55rem;padding:.7rem;border:1px solid var(--border);border-radius:var(--radius-md)}.master-list>article>form:first-child{display:flex;align-items:center;gap:.45rem;flex:1}.master-list input{min-width:80px}.compact-check{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem}.inline-form,.inline-upload{display:flex;align-items:end;gap:.65rem}.inline-form .field{flex:1;margin:0}.financial-booking-actions{margin:1rem 0}.financial-kpi-grid--booking{grid-template-columns:repeat(4,minmax(0,1fr))}
.financial-payment-balance{display:grid;gap:.35rem;margin:1rem 0}.financial-payment-balance>div{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--border)}.financial-payment-balance>div:last-child{border:0;color:var(--accent);font-weight:750}.financial-payment-balance dt{color:var(--text-muted)}.financial-payment-balance dd{margin:0;font-weight:750}.field__label-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.field__label-actions label{margin:0}.field__label-actions .button{white-space:nowrap}
@media(max-width:1200px){.financial-kpi-grid,.financial-document-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.financial-line{grid-template-columns:auto minmax(220px,2fr) repeat(3,minmax(105px,1fr))}.financial-line>.field:nth-of-type(5),.financial-line>.field:nth-of-type(6){grid-column:span 2}}
@media(max-width:760px){.financial-kpi-grid,.financial-document-summary,.financial-shortcuts{grid-template-columns:1fr}.financial-shortcuts>a{border-inline-end:0;border-bottom:1px solid var(--border)}.financial-line{grid-template-columns:1fr 1fr}.financial-line__handle{display:none}.financial-line__description{grid-column:1/-1}.financial-line>.field:nth-of-type(5),.financial-line>.field:nth-of-type(6){grid-column:auto}.financial-line>.icon-button{justify-self:end}.financial-document-paper>header,.master-list>article,.master-list>article>form:first-child,.inline-form,.inline-upload{align-items:stretch;flex-direction:column}.financial-kpi-grid--booking{grid-template-columns:1fr}.financial-document-paper .button-group{flex-wrap:wrap}.field__label-actions{align-items:flex-start;flex-direction:column}}

/* v1.0 Calendar and final Coordinator Dashboard consolidation. */
.calendar-page{display:flex;flex-direction:column;gap:var(--page-gap)}.calendar-shell{min-width:0;overflow:hidden;padding:0}.calendar-toolbar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:16px;padding:17px 19px;border-block-end:1px solid var(--border);background:var(--surface)}
.calendar-navigation,.calendar-toolbar__controls,.calendar-view-switch{display:flex;align-items:center;gap:7px}.calendar-heading{min-width:0;text-align:center}.calendar-heading h2{overflow:hidden;margin:3px 0 0;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.calendar-toolbar__controls{justify-content:flex-end}.calendar-date-jump{display:flex;align-items:center;gap:7px}.calendar-date-jump span{color:var(--text-muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.calendar-date-jump input{width:138px;min-height:34px;padding:7px 9px;font-size:9px}
.segmented-control.calendar-view-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}.calendar-view-switch button{min-height:27px;padding:5px 9px;border:0;border-radius:7px;color:var(--text-muted);background:transparent;font:inherit;font-size:8px;font-weight:800;cursor:pointer;transition:color var(--transition),background var(--transition),box-shadow var(--transition)}.calendar-view-switch button:hover{color:var(--text)}.calendar-view-switch button.is-active{color:var(--accent);background:var(--surface);box-shadow:var(--shadow-sm)}
.calendar-filters{margin:0;padding:11px 19px;border-block-end:1px solid var(--border);border-radius:0;background:var(--surface-soft)}.calendar-filters select{min-width:138px;flex:1 1 150px}.calendar-filters .button{flex:0 0 auto}.calendar-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 15px;padding:9px 19px;border-block-end:1px solid var(--border);color:var(--text-muted);background:var(--surface);font-size:8px}.calendar-legend span{display:flex;align-items:center;gap:6px}.calendar-legend i{width:8px;height:8px;display:block;border-radius:3px;background:var(--legend-color)}.calendar-legend__block{background:var(--warning)!important}.calendar-legend__info{background:var(--info)!important}
.calendar-stage{position:relative;min-height:430px;overflow:auto;background:var(--surface)}.calendar-stage.is-loading::after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:color-mix(in srgb,var(--surface) 26%,transparent)}.calendar-local-loader{min-height:430px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--text-muted);font-size:9px}.calendar-grid{min-width:720px}.calendar-weekdays,.calendar-week__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{position:sticky;z-index:3;inset-block-start:0;border-block-end:1px solid var(--border);background:var(--surface-soft)}.calendar-weekdays span{padding:9px 12px;color:var(--text-muted);font-size:8px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.05em}
.calendar-week{position:relative;border-block-end:1px solid var(--border)}.calendar-week:last-child{border-block-end:0}.calendar-week__days{min-height:44px}.calendar-day{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:8px 10px;border-inline-end:1px solid var(--border);color:var(--text);background:var(--surface)}.calendar-day:last-child{border-inline-end:0}.calendar-day span{display:none;color:var(--text-muted);font-size:7px;text-transform:uppercase}.calendar-day strong{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;font-size:9px}.calendar-day.is-outside{color:var(--text-muted);background:color-mix(in srgb,var(--surface-soft) 70%,var(--surface))}.calendar-day.is-today strong{color:#fff;background:var(--accent);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 25%,transparent)}
.calendar-week__events{min-height:max(88px,calc(var(--calendar-lanes) * 32px + 14px));display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:27px;gap:4px 0;align-content:start;padding:5px 0 10px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(14.2857% - 1px),var(--border) calc(14.2857% - 1px),var(--border) 14.2857%)}.calendar-week--expanded .calendar-week__events{min-height:max(380px,calc(var(--calendar-lanes) * 34px + 18px));grid-auto-rows:29px}.calendar-week--expanded .calendar-day{min-height:51px;justify-content:center;flex-direction:column;gap:2px}.calendar-week--expanded .calendar-day span{display:block}
.calendar-event{z-index:1;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;margin-inline:3px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--event-color,var(--accent)) 34%,var(--border));border-inline-start:3px solid var(--event-color,var(--accent));border-radius:7px;color:var(--text);background:color-mix(in srgb,var(--event-color,var(--accent)) 12%,var(--surface));text-align:start;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.calendar-event:hover,.calendar-agenda__item:hover{z-index:2;transform:translateY(-1px);border-color:var(--event-color,var(--accent));box-shadow:var(--shadow-sm)}.calendar-event strong{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.calendar-event small{min-width:0;overflow:hidden;color:var(--text-muted);font-size:7px;text-overflow:ellipsis;white-space:nowrap}.calendar-event__icon{display:grid;flex:0 0 auto}.calendar-event__icon .icon{width:11px;height:11px}.calendar-event--block{--event-color:var(--warning);color:color-mix(in srgb,var(--warning) 85%,var(--text));border-style:dashed}.calendar-event--block.is-informational{--event-color:var(--info)}.calendar-event.is-muted{opacity:.58;filter:saturate(.65)}.calendar-week__empty{grid-column:1/-1;align-self:center;justify-self:center;color:var(--text-muted);font-size:8px}.calendar-empty{min-height:420px}
.calendar-agenda{min-width:640px;display:flex;flex-direction:column}.calendar-agenda__day{display:grid;grid-template-columns:94px minmax(0,1fr);border-block-end:1px solid var(--border)}.calendar-agenda__day>header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px;border-inline-end:1px solid var(--border);background:var(--surface-soft)}.calendar-agenda__day>header span{color:var(--text-muted);font-size:8px;font-weight:800;text-transform:uppercase}.calendar-agenda__day>header strong{font-size:17px}.calendar-agenda__day>div{display:flex;flex-direction:column;gap:6px;padding:10px}.calendar-agenda__item{--event-color:var(--accent);min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--event-color) 28%,var(--border));border-inline-start:3px solid var(--event-color);border-radius:10px;color:var(--text);background:color-mix(in srgb,var(--event-color) 9%,var(--surface));text-align:start;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.calendar-agenda__item>span{min-width:0;display:flex;align-items:center;gap:7px}.calendar-agenda__item>span>strong,.calendar-agenda__item>span>small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-agenda__item strong{font-size:9px}.calendar-agenda__item small,.calendar-agenda__item em{color:var(--text-muted);font-size:8px;font-style:normal}
.calendar-detail-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block-end:15px}.calendar-detail-status .status-pill[style]{color:var(--pill-color);background:color-mix(in srgb,var(--pill-color) 12%,var(--surface))}.calendar-detail-status>small{color:var(--text-muted);font-size:8px}.calendar-detail-list{margin-block-end:17px}.calendar-drawer__section{padding-block-start:16px;border-block-start:1px solid var(--border)}.calendar-drawer__section h3{margin:0 0 10px;font-size:11px}.calendar-drawer__empty{margin:0;color:var(--text-muted);font-size:9px}.calendar-delivery-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.calendar-delivery-days span{min-width:0;display:flex;flex-direction:column;gap:3px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}.calendar-delivery-days strong{font-size:9px}.calendar-delivery-days small{overflow:hidden;color:var(--text-muted);font-size:7px;text-overflow:ellipsis;white-space:nowrap}.calendar-block-form fieldset{margin:0}.calendar-drawer__footer{flex-wrap:wrap}

/* Shared table layer: consistent containment, hierarchy and responsive scrolling. */
:where(.table-wrap,.responsive-table,.data-table-wrap){width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--border);border-radius:13px;background:var(--surface);scrollbar-width:thin}:where(.table-wrap,.responsive-table,.data-table-wrap)>table{width:100%;border-collapse:collapse;background:var(--surface)}:where(.table-wrap,.responsive-table,.data-table-wrap)>table th,:where(.table-wrap,.responsive-table,.data-table-wrap)>table td{padding:11px 13px;border-block-end:1px solid var(--border);text-align:start;vertical-align:middle}:where(.table-wrap,.responsive-table,.data-table-wrap)>table th{color:var(--text-muted);background:var(--surface-soft);font-size:8px;font-weight:800;line-height:1.35;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}:where(.table-wrap,.responsive-table,.data-table-wrap)>table td{max-width:34rem;color:var(--text-soft);font-size:9px;line-height:1.45;overflow-wrap:anywhere}:where(.table-wrap,.responsive-table,.data-table-wrap)>table tbody tr:last-child td{border-block-end:0}:where(.table-wrap,.responsive-table,.data-table-wrap)>table tbody tr{transition:background var(--transition)}:where(.table-wrap,.responsive-table,.data-table-wrap)>table tbody tr:hover{background:color-mix(in srgb,var(--surface-soft) 58%,transparent)}:where(.table-wrap,.responsive-table,.data-table-wrap)>table td>small{display:block;margin-block-start:3px;color:var(--text-muted);font-size:8px}html[data-density="compact"] :where(.table-wrap,.responsive-table,.data-table-wrap)>table th,html[data-density="compact"] :where(.table-wrap,.responsive-table,.data-table-wrap)>table td{padding:8px 10px}
@media(max-width:1050px){.calendar-toolbar{grid-template-columns:auto minmax(150px,1fr)}.calendar-toolbar__controls{grid-column:1/-1;justify-content:space-between}}
@media(max-width:700px){.calendar-toolbar{grid-template-columns:1fr;gap:11px}.calendar-navigation,.calendar-toolbar__controls{justify-content:center}.calendar-toolbar__controls{grid-column:auto;flex-wrap:wrap}.calendar-filters>*{width:100%;flex-basis:100%}.calendar-date-jump{flex:1 1 165px}.calendar-date-jump input{flex:1;width:auto}.calendar-view-switch{flex:1 1 auto}.calendar-view-switch button{flex:1}.calendar-legend{gap:7px 11px}.calendar-drawer__footer .button{flex:1}}
.coordinator-dashboard-filter{display:flex;align-items:end;gap:9px}.coordinator-dashboard-filter .field--inline{min-width:135px;display:flex;flex-direction:column;gap:4px;margin:0}.coordinator-dashboard-filter .field--inline span{color:var(--text-muted);font-size:8px;font-weight:800;text-transform:uppercase}.coordinator-dashboard-filter>small{margin-inline-start:auto;align-self:center;color:var(--text-muted);font-size:8px}.coordinator-metric-widget{min-height:285px}.coordinator-money-stat>strong{font-size:clamp(23px,2.6vw,37px);letter-spacing:-.035em}.coordinator-money-stat>strong span{font-size:.55em}.coordinator-upcoming-heading{display:flex;align-items:baseline;gap:8px;margin-block:-3px 10px}.coordinator-upcoming-heading strong{color:var(--accent);font-size:28px}.coordinator-upcoming-heading span{color:var(--text-muted);font-size:9px}.coordinator-upcoming-list{display:flex;flex:1;flex-direction:column;gap:6px}.coordinator-upcoming-list>a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;color:inherit;background:var(--surface-soft);transition:border-color var(--transition),transform var(--transition)}.coordinator-upcoming-list>a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}.coordinator-upcoming-list>a>.icon{width:14px;color:var(--accent)}.coordinator-upcoming-list>a>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.coordinator-upcoming-list>a>span:nth-child(2) strong,.coordinator-upcoming-list>a>span:nth-child(2) small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coordinator-upcoming-list>a>span:nth-child(2) strong{font-size:9px}.coordinator-upcoming-list>a>span:nth-child(2) small{color:var(--text-muted);font-size:7px}.coordinator-upcoming-date{width:35px;height:35px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;color:var(--accent);background:var(--accent-soft)}.coordinator-upcoming-date strong{font-size:12px;line-height:1}.coordinator-upcoming-date small{font-size:7px;font-weight:800;text-transform:uppercase}.coordinator-upcoming-empty{display:flex;align-items:center;gap:10px;flex:1;padding:14px;border:1px dashed var(--border);border-radius:11px;color:var(--text-muted)}.coordinator-upcoming-empty>div{display:flex;flex-direction:column;gap:3px}.coordinator-upcoming-empty strong{color:var(--text);font-size:9px}.coordinator-upcoming-empty small{font-size:8px}
@media(max-width:850px){.coordinator-dashboard-filter{align-items:stretch;flex-direction:column}.coordinator-dashboard-filter>small{margin:3px 0 0}.coordinator-dashboard-filter .field--inline{width:100%}}