:root {
    color-scheme: light;
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-soft: #f8f8fa;
    --surface-tint: #f1eef4;
    --text: #201d24;
    --text-soft: #6f6974;
    --text-faint: #99939d;
    --border: #e7e3e9;
    --border-strong: #d8d2dc;
    --primary: #5f1c58;
    --secondary: #8d3a82;
    --theme-fill: var(--primary);
    --primary-hover: color-mix(in srgb, var(--primary) 82%, #000000);
    --primary-soft: color-mix(in srgb, var(--primary) 11%, #ffffff);
    --primary-on: #ffffff;
    --hover-color: #f1e7f0;
    --button-primary: #5f1c58;
    --button-primary-on: #ffffff;
    --button-secondary: #ffffff;
    --button-secondary-on: #201d24;
    --green: #13835c;
    --green-soft: #e8f7f1;
    --blue: #2d67b2;
    --blue-soft: #eaf2fb;
    --amber: #a8660f;
    --amber-soft: #fff3df;
    --red: #b43e4e;
    --red-soft: #fdecef;
    --shadow-sm: 0 1px 2px rgba(33, 23, 35, .04), 0 4px 14px rgba(46, 25, 47, .035);
    --shadow-md: 0 16px 40px rgba(33, 22, 37, .09);
    --radius-sm: 9px;
    --radius: 12px;
    --radius-lg: 18px;
    --sidebar: 255px;
    --topbar: 68px;
    --transition: 160ms ease;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #141216;
    --surface: #1c191e;
    --surface-raised: #242027;
    --surface-soft: #211d23;
    --surface-tint: #2b222c;
    --text: #f2edf2;
    --text-soft: #b6adb7;
    --text-faint: #857b87;
    --border: #352f37;
    --border-strong: #48404a;
    --primary: #b96faf;
    --secondary: #7c3c75;
    --theme-fill: var(--primary);
    --primary-hover: color-mix(in srgb, var(--primary) 84%, #ffffff);
    --primary-soft: color-mix(in srgb, var(--primary) 22%, #171016);
    --primary-on: #1c111d;
    --hover-color: #302731;
    --button-primary: #b96faf;
    --button-primary-on: #1c111d;
    --button-secondary: #242027;
    --button-secondary-on: #f2edf2;
    --green: #56c89a;
    --green-soft: #1c362d;
    --blue: #7ca8df;
    --blue-soft: #202f42;
    --amber: #e4a755;
    --amber-soft: #3a2c1d;
    --red: #e78491;
    --red-soft: #3f242a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 18px rgba(0, 0, 0, .16);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.muted { color: var(--text-soft); }
.grow { flex: 1; min-width: 0; }
.mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: color-mix(in srgb, var(--primary) 24%, #171016); color: #eee6ed; z-index: 30; display: flex; flex-direction: column; padding: 14px 11px; }
html[data-theme="dark"] .sidebar { background: #171016; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--theme-fill); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.18); color: var(--primary-on); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-mark svg path:first-child { opacity: .32; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.16; }
.brand-copy strong { font-size: 16px; letter-spacing: -.25px; }
.brand-copy span { color: #bcaeba; font-size: 11px; letter-spacing: 1.15px; text-transform: uppercase; }
.nav-list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.nav-label { color: #8e7c8b; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; padding: 6px 10px 5px; }
.nav-search { position: relative; display: flex; align-items: center; margin: 0 1px 5px; }
.nav-search > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: #a99ca7; pointer-events: none; }
.nav-search input { width: 100%; height: 34px; padding: 0 56px 0 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; outline: none; color: #f5eef4; background: rgba(255,255,255,.055); font-size: 11px; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.nav-search input::placeholder { color: #948692; }
.nav-search input:focus { border-color: color-mix(in srgb, var(--secondary) 75%, #ffffff); background: rgba(255,255,255,.085); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 20%, transparent); }
.nav-search kbd { position: absolute; right: 7px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: #a99ca7; background: rgba(255,255,255,.06); font-family: inherit; font-size: 9px; line-height: 1.4; pointer-events: none; }
.nav-search input:focus + kbd { color: #e8dfe6; border-color: rgba(255,255,255,.22); }
.nav-favourites-toolbar { display: flex; margin: 0 1px 5px; }
.nav-favourites-toolbar button { width: 100%; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 8px; color: #a99ca7; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: 10px; text-align: left; }
.nav-favourites-toolbar button:hover { color: #f5eef4; background: rgba(255,255,255,.055); }
.nav-favourites-toolbar button[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--secondary) 20%, transparent); border-color: rgba(255,255,255,.1); }
.nav-favourites-toolbar svg { width: 14px; height: 14px; fill: currentColor; }
.nav-favourites-toolbar b { min-width: 18px; height: 18px; display: grid; place-items: center; margin-left: auto; color: #d8cdd6; background: rgba(255,255,255,.09); border-radius: 9px; font-size: 9px; }
.nav-menu-items { display: flex; flex-direction: column; gap: 2px; }
.nav-search-hidden { display: none !important; }
.nav-search-empty { margin: 9px 10px; color: #a99ca7; font-size: 11px; text-align: center; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; border-radius: 9px; color: #c9bec7; padding: 0 10px; font-size: 13px; font-weight: 550; transition: background var(--transition), color var(--transition), transform var(--transition); }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 44%, transparent), color-mix(in srgb, var(--secondary) 22%, transparent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }
.nav-item.active::before { content: ""; position: absolute; left: -16px; width: 3px; height: 24px; border-radius: 0 4px 4px 0; background: var(--secondary); }
.nav-item svg { width: 17px; height: 17px; opacity: .9; }
.nav-destination { position: relative; min-width: 0; }
.nav-destination > a { width: 100%; padding-right: 29px; }
.nav-destination > a.nav-subitem { display: flex; align-items: center; }
.nav-favourite-toggle { position: absolute; z-index: 2; top: 50%; right: 5px; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: #847682; background: transparent; border: 0; border-radius: 6px; opacity: 0; transform: translateY(-50%); cursor: pointer; transition: color var(--transition), background var(--transition), opacity var(--transition); }
.nav-destination:hover .nav-favourite-toggle, .nav-favourite-toggle:focus-visible, .nav-favourite-toggle[aria-pressed="true"] { opacity: 1; }
.nav-favourite-toggle:hover, .nav-favourite-toggle:focus-visible { color: #fff; background: rgba(255,255,255,.09); outline: none; }
.nav-favourite-toggle[aria-pressed="true"] { color: #f4c95d; }
.nav-favourite-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-favourite-toggle[aria-pressed="true"] svg { fill: currentColor; }
.nav-expand-toggle { width: 100%; border: 0; font-size: 13px; text-align: left; background: transparent; cursor: pointer; }
.nav-expand-toggle .nav-chevron { width: 22px; height: 22px; flex: 0 0 22px; margin-left: auto; padding: 3px; border-radius: 6px; color: #fff; background: rgba(255,255,255,.09); opacity: 1; transform: rotate(-90deg); transition: transform var(--transition), background var(--transition); }
.nav-expand-toggle:hover .nav-chevron, .nav-expand-toggle.active .nav-chevron { background: rgba(255,255,255,.15); }
.nav-expand-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(0deg); }
.nav-submenu { display: flex; flex-direction: column; gap: 1px; max-height: 0; margin: -1px 0 0 29px; padding-left: 11px; overflow: hidden; border-left: 1px solid transparent; opacity: 0; visibility: hidden; transform: translateY(-5px); pointer-events: none; transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease, margin-bottom 220ms ease, border-color 180ms ease, visibility 0s linear 260ms; }
.nav-submenu.expanded { max-height: 720px; margin-bottom: 3px; border-left-color: rgba(255,255,255,.13); opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.nav-subitem { position: relative; padding: 5px 8px; border-radius: 6px; color: #b9adb7; font-size: 12px; font-weight: 500; transition: color var(--transition), background var(--transition); }
.nav-subitem:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-subitem.active { color: #fff; background: rgba(255,255,255,.08); }
.nav-subitem.active::before { content: ""; position: absolute; width: 5px; height: 5px; left: -16px; top: 12px; border-radius: 50%; background: var(--secondary); }
.nav-submenu .nav-favourite-toggle { right: 1px; }
.nav-subgroup-toggle { width: 100%; min-height: 30px; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 0; border-radius: 7px; color: #d6cbd4; background: transparent; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.nav-subgroup-toggle:hover, .nav-subgroup-toggle[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.055); }
.nav-subgroup-toggle .nav-chevron { width: 18px; height: 18px; margin-left: auto; color: #cfc3cc; transform: rotate(-90deg); transition: transform var(--transition); }
.nav-subgroup-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(0deg); }
.nav-subgroup { display: flex; flex-direction: column; gap: 1px; max-height: 0; margin: 0 0 0 9px; padding-left: 10px; overflow: hidden; border-left: 1px solid transparent; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: max-height 230ms ease, opacity 160ms ease, transform 200ms ease, margin-bottom 200ms ease, border-color 160ms ease, visibility 0s linear 230ms; }
.nav-subgroup.expanded { max-height: 280px; margin-bottom: 3px; border-left-color: rgba(255,255,255,.11); opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.nav-subgroup .nav-subitem { padding: 7px 8px; }
.nav-subgroup .nav-destination > .nav-subitem { padding-right: 29px; }
.nav-subgroup .nav-subitem.active::before { left: -13px; }
@media (prefers-reduced-motion: reduce) {
    .nav-submenu, .nav-subgroup, .nav-chevron { transition-duration: 1ms !important; }
}
.sidebar-footer { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); color: #877785; font-size: 10px; }
.sidebar-footer p { margin: 8px 0 0; }
.environment-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; background: rgba(255,255,255,.06); color: #bcafba; border-radius: 6px; text-transform: capitalize; }
.environment-pill span { width: 6px; height: 6px; border-radius: 50%; background: #4ad395; box-shadow: 0 0 0 3px rgba(74,211,149,.12); }
.main-column { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { height: var(--topbar); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar h1 { font-size: 17px; line-height: 1.2; margin: 1px 0 0; letter-spacing: -.25px; }
.eyebrow { margin: 0; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.icon-button { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; cursor: pointer; transition: all var(--transition); }
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-soft); color: var(--text); transform: translateY(-1px); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button.subtle { width: 34px; height: 34px; background: transparent; }
.mobile-menu { display: none; }
.moon-icon { display: none; }
html[data-theme="dark"] .moon-icon { display: block; }
html[data-theme="dark"] .sun-icon { display: none; }
.user-menu { position: relative; }
.user-menu-trigger { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--text); cursor: pointer; padding: 4px 5px 4px 4px; border-radius: 11px; }
.user-menu-trigger:hover { background: var(--surface-soft); }
.user-menu-trigger > svg { width: 18px; color: var(--text-faint); }
.avatar { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--primary-on); background: var(--theme-fill); font-weight: 750; }
.avatar.soft { background: var(--primary-soft); color: var(--primary); }
.user-menu-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.user-menu-copy strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-menu-copy small { color: var(--text-soft); font-size: 11px; }
.user-dropdown { position: absolute; top: calc(100% + 9px); right: 0; width: 220px; display: none; padding: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); }
.user-dropdown.open { display: block; animation: dropdown-in .13s ease; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-identity { padding: 9px 10px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; }
.dropdown-identity span { color: var(--text-soft); font-size: 12px; }
.user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--surface-soft); }
.page-content { max-width: 1640px; margin: 0 auto; padding: 20px 22px; }

.hero-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin: 0 0 16px; }
.hero-row.compact { align-items: center; }
.hero-row h2 { margin: 2px 0 3px; font-size: clamp(23px, 1.8vw, 27px); letter-spacing: -.65px; line-height: 1.18; }
.hero-row p { color: var(--text-soft); margin: 0; }
.section-kicker { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 1.35px; text-transform: uppercase; }
.back-link { display: inline-block; color: var(--text-soft); font-size: 12px; margin-bottom: 7px; }
.back-link:hover { color: var(--primary); }

.button { min-height: 36px; border: 1px solid transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; cursor: pointer; font-weight: 650; font-size: 12px; transition: all var(--transition); white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: var(--button-primary-on); background: var(--button-primary); box-shadow: 0 5px 15px color-mix(in srgb, var(--button-primary) 22%, transparent); }
.button-primary:hover { background: color-mix(in srgb, var(--button-primary) 86%, var(--hover-color)); }
.button-secondary { border-color: var(--border-strong); background: var(--button-secondary); color: var(--button-secondary-on); }
.button-secondary:hover { background: color-mix(in srgb, var(--button-secondary) 76%, var(--hover-color)); }
.master-excel-download-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.button-ghost { color: var(--text-soft); background: transparent; }
.button-ghost:hover { color: var(--text); background: var(--surface-soft); }
.button-danger-ghost { color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, transparent); background: transparent; }
.button-large { width: 100%; min-height: 42px; font-size: 13px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat-card { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow-sm); }
.stat-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; }
.stat-icon svg { width: 22px; }
.stat-icon.plum { color: var(--primary); background: var(--primary-soft); }
.stat-icon.green { color: var(--green); background: var(--green-soft); }
.stat-icon.blue { color: var(--blue); background: var(--blue-soft); }
.stat-icon.amber { color: var(--amber); background: var(--amber-soft); }
.stat-card > div { display: grid; grid-template-columns: auto auto; align-items: baseline; width: 100%; }
.stat-card span { grid-column: 1; color: var(--text-soft); font-size: 12px; }
.stat-card strong { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 23px; letter-spacing: -.6px; }
.stat-card small { grid-column: 1; color: var(--text-faint); margin-top: 2px; }

.content-grid { display: grid; gap: 14px; }
.content-grid.two-thirds { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 16px 11px; }
.panel-header h3 { margin: 0 0 2px; font-size: 14px; letter-spacing: -.15px; }
.panel-header p { margin: 0; color: var(--text-soft); font-size: 12px; }
.panel-header a { color: var(--primary); font-size: 12px; font-weight: 650; }
.compact-list { padding: 0 7px 7px; }
.compact-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 7px 10px; border-top: 1px solid var(--border); }
.compact-row:first-child { border-top: 0; }
.compact-row .grow { display: flex; flex-direction: column; }
.compact-row .grow span { color: var(--text-soft); font-size: 11px; }
.timeline { padding: 2px 20px 16px; }
.timeline-item { position: relative; display: flex; gap: 13px; padding: 9px 0 13px; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 19px; bottom: -7px; width: 1px; background: var(--border); }
.timeline-dot { width: 9px; height: 9px; margin-top: 6px; flex: 0 0 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); z-index: 1; }
.timeline-item div { display: flex; flex-direction: column; }
.timeline-item strong { font-size: 12px; }
.timeline-item span { color: var(--text-soft); font-size: 11px; }

.data-panel { position: relative; overflow: hidden; }
.data-panel.grid-loading { cursor: progress; }
.data-panel.grid-loading::after { content: ""; position: absolute; inset: 0; z-index: 8; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(1px); }
.data-panel.grid-loading::before { content: ""; position: absolute; z-index: 9; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: grid-spin .65s linear infinite; }
.grid-loader-status { position: absolute; z-index: 10; top: calc(50% + 25px); left: 50%; display: none; transform: translateX(-50%); padding: 5px 9px; color: var(--text-soft); background: var(--surface); border-radius: 6px; box-shadow: var(--shadow-sm); font-size: 11px; white-space: nowrap; }
.data-panel.grid-loading .grid-loader-status, .grid-loader-status.grid-load-error { display: block; }
.grid-loader-status.grid-load-error { position: static; transform: none; margin: 8px 12px; color: var(--red); background: var(--red-soft); box-shadow: none; }
@keyframes grid-spin { to { transform: rotate(360deg); } }
html.js .grid-apply-button { display: none; }
.filter-bar { display: flex; gap: 7px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.filter-bar select, .filter-bar input { height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 0 10px; outline: none; }
.filter-bar select:focus, .filter-bar input:focus { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.grid-toolbar { border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.grid-toolbar-row { display: flex; gap: 7px; align-items: center; padding: 7px 9px; background: var(--surface-soft); }
.grid-toolbar select, .grid-toolbar input { height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 0 10px; outline: none; }
.grid-toolbar select:focus, .grid-toolbar input:focus { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.grid-search-group { min-width: 230px; flex: 1 1 310px; display: flex; gap: 7px; }
.grid-search-group .search-box { max-width: none; }
.grid-column-select { width: 128px; flex: 0 0 128px; }
.grid-page-size { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 11px; font-weight: 650; }
.grid-page-size select { width: 70px; }
.button-excel { color: #fff; background: #18794e; }
.grid-toolbar-row .button-excel { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.button-excel:hover { background: #11643f; }
.button-excel svg { width: 17px; height: 17px; fill: currentColor; }
.search-box { position: relative; flex: 1; max-width: 420px; }
.search-box svg { position: absolute; left: 10px; top: 9px; width: 17px; color: var(--text-faint); }
.search-box input { width: 100%; padding-left: 34px; }
.table-wrap { overflow-x: auto; }
.data-panel .grid-toolbar ~ .table-wrap { height: var(--app-grid-height, 320px); overflow: auto; background: var(--surface); }
.data-panel .grid-toolbar ~ form .table-wrap { height: var(--app-grid-height, 320px); overflow: auto; background: var(--surface); }
.data-panel.app-grid > .table-wrap, .data-panel.app-grid > form > .table-wrap { overflow: auto; background: var(--surface); }
.data-panel .grid-toolbar ~ .table-wrap .data-table thead { position: sticky; top: 0; z-index: 3; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { color: var(--text-soft); background: var(--surface); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; text-align: left; white-space: nowrap; padding: 6px 9px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 5px 9px; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; line-height: 1.25; }
.data-table tbody tr:hover { background: var(--hover-color); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.grid-group-bar { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--text-soft); background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; transition: background var(--transition), border-color var(--transition); }
.grid-group-bar > svg { width: 18px; height: 18px; color: var(--text-faint); }
.grid-group-bar.drag-ready { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.grid-group-bar.drag-over { color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 75%, var(--surface)); box-shadow: inset 0 0 0 2px var(--primary); }
.grid-group-bar.has-group > svg { color: var(--primary); }
.grid-group-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.grid-header-content { display: flex; align-items: center; gap: 4px; }
.grid-sort-label { min-width: 0; overflow: hidden; padding: 2px 1px; color: inherit; background: transparent; border: 0; text-overflow: ellipsis; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; font: inherit; font-weight: inherit; }
.grid-sort-label:hover { color: var(--primary); }
.data-table th.sort-asc .grid-sort-label::after { content: " ↑"; color: var(--primary); }
.data-table th.sort-desc .grid-sort-label::after { content: " ↓"; color: var(--primary); }
.grid-filter-button { width: 20px; height: 20px; flex: 0 0 20px; display: inline-grid; place-items: center; padding: 0; color: var(--text-faint); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.grid-filter-button:hover { color: var(--primary); background: var(--primary-soft); }
.grid-filter-button svg { width: 13px; height: 13px; }
.data-table th.filtered .grid-filter-button { color: var(--primary); background: var(--primary-soft); }
.data-table th[draggable="true"] { cursor: grab; }
.data-table th[draggable="true"]:active { cursor: grabbing; }
.grid-selection-cell { width: 38px; min-width: 38px; padding-left: 12px !important; padding-right: 6px !important; text-align: center !important; }
.grid-selection-cell label { display: grid; place-items: center; }
.grid-selection-cell input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.grid-group-row td { padding: 7px 14px; color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.grid-group-row td span { margin-right: 7px; }
.grid-group-row td strong { color: var(--text); font-size: 12px; }
.grid-group-row td em { margin-left: 8px; color: var(--text-faint); font-size: 10px; font-style: normal; }
.grid-active-bar { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 8px 18px; color: var(--text-soft); background: var(--surface); border-top: 1px solid var(--border); font-size: 11px; }
.grid-filter-chips { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.grid-chip { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 9px; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 7px; font-size: 11px; }
.grid-chip button { width: 19px; height: 19px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1; }
.grid-chip button:hover { background: color-mix(in srgb, var(--primary) 13%, transparent); }
.grid-selection-count { color: var(--text-soft); font-weight: 650; }
.grid-client-result { color: var(--text-faint); white-space: nowrap; }
.grid-clear-client { padding: 4px 0; color: var(--primary); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.grid-filter-popup { position: fixed; z-index: 100; width: 262px; max-height: 380px; display: flex; flex-direction: column; padding: 10px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 18px 45px rgba(20, 10, 18, .22); }
.grid-popup-search input { width: 100%; height: 34px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; outline: none; }
.grid-popup-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.grid-popup-select-all, .grid-filter-values label { display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 4px 6px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.grid-popup-select-all { margin-top: 7px; border-bottom: 1px solid var(--border); border-radius: 0; font-weight: 700; }
.grid-popup-select-all:hover, .grid-filter-values label:hover { background: var(--surface-soft); }
.grid-popup-select-all input, .grid-filter-values input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.grid-filter-values { min-height: 80px; overflow-y: auto; padding: 3px 0; }
.grid-filter-values label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-filter-popup footer { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.grid-filter-popup footer > span { flex: 1; }
.grid-filter-popup footer .button { min-height: 31px; padding: 6px 11px; font-size: 11px; }
.data-table .avatar { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; font-size: 12px; }
.data-table .icon-button.subtle { width: 28px; height: 28px; border-radius: 7px; }
.data-table .icon-button.subtle svg { width: 15px; height: 15px; }
.user-cell { min-width: 235px; display: flex; align-items: center; gap: 11px; }
.user-cell > div { display: flex; flex-direction: column; }
.user-cell strong { color: var(--text); font-size: 13px; }
.user-cell span { color: var(--text-soft); font-size: 11px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.badge { display: inline-flex; align-items: center; min-height: 21px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.badge.app-back_office, .role-icon.app-back_office { color: var(--primary); background: var(--primary-soft); }
.badge.app-ground_staff_app, .role-icon.app-ground_staff_app { color: var(--blue); background: var(--blue-soft); }
.badge.app-skypos_app, .role-icon.app-skypos_app { color: var(--amber); background: var(--amber-soft); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status-badge.active { color: var(--green); }
.status-badge.active::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.status-badge.inactive { color: var(--text-faint); }
.status-badge.inactive::before { background: var(--text-faint); }
.actions-cell { text-align: right; }
.table-footer { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 11px; background: var(--surface-soft); }
.grid-pagination { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 10px; background: var(--surface-soft); }
.grid-result-count { min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.grid-count-line { color: var(--text-soft); }
.grid-result-count strong { color: var(--text); }
.grid-footer-note { min-width: 0; overflow: hidden; color: var(--text-faint); text-overflow: ellipsis; }
.grid-footer-note::before { content: "·"; margin-right: 8px; color: var(--border-strong); }
.pagination-controls { display: flex; gap: 5px; align-items: center; }
.page-link { min-width: 29px; height: 29px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); background: var(--surface); font-weight: 650; transition: all var(--transition); }
.pagination-controls button.page-link { cursor: pointer; font: inherit; }
.pagination-controls button.page-link:disabled { pointer-events: none; }
.page-gap { min-width: 18px; text-align: center; color: var(--text-faint); }
.page-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.page-link.active { border-color: transparent; color: var(--primary-on); background: var(--theme-fill); box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 20%, transparent); }
.page-link.disabled { opacity: .42; cursor: not-allowed; }
.page-arrow { font-size: 19px; line-height: 1; }
.empty-state { min-height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-soft); text-align: center; padding: 30px; }
.empty-state strong { color: var(--text); margin-bottom: 3px; }
.empty-state.small { min-height: 100px; }

.form-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr); gap: 14px; align-items: start; }
.form-main, .form-side { display: flex; flex-direction: column; gap: 14px; }
.form-panel { padding-bottom: 15px; }
.form-panel > .field, .form-panel > .inline-form { margin: 2px 16px 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px 16px 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field > span { font-size: 11px; font-weight: 650; }
.field em { color: var(--red); font-style: normal; }
.field small { color: var(--text-faint); font-size: 10px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 0 12px; outline: none; transition: all var(--transition); }
.field input, .field select { height: 38px; }
.field textarea { min-height: 78px; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-select-native { position: fixed !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.search-select { position: relative; min-width: 135px; color: var(--text); }
.field .search-select { width: 100%; }
.grid-search-group .search-select.grid-column-select { width: 128px; min-width: 128px; flex: 0 0 128px; }
.grid-page-size .search-select { width: 70px; min-width: 70px; }
.search-select-button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; outline: none; cursor: pointer; text-align: left; }
.grid-toolbar .search-select-button { height: 36px; border-color: var(--border); }
.search-select-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select-button > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-faint); transition: transform var(--transition); }
.search-select-button.placeholder { color: var(--text-faint); }
.search-select-button:focus, .search-select.open .search-select-button { border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-select-button.invalid { border-color: var(--danger); }
.search-select.open { z-index: 80; }
.search-select.open .search-select-button > svg { transform: rotate(180deg); }
.search-select-popup { position: absolute; z-index: 90; top: calc(100% + 5px); left: 0; width: max(100%, 245px); max-width: min(360px, calc(100vw - 24px)); display: none; padding: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 36px rgba(20, 10, 18, .2); }
.search-select.drop-up .search-select-popup { top: auto; bottom: calc(100% + 5px); }
.search-select.open .search-select-popup { display: block; }
.search-select-popup.search-select-floating-open { z-index: 1000; display: block; }
.search-select-input { width: 100% !important; height: 34px !important; padding: 0 10px !important; border: 1px solid var(--border) !important; border-radius: 7px !important; background: var(--surface) !important; }
.search-select-options { max-height: min(245px, calc(var(--search-select-available-space, 310px) - 58px)); overflow-y: auto; margin-top: 6px; }
.search-select-option { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; color: var(--text-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; font-size: 11px; }
.search-select-option:hover, .search-select-option[aria-selected="true"] { color: var(--text); background: var(--primary-soft); }
.search-select-option:disabled { opacity: .42; cursor: not-allowed; background: var(--surface-soft); }
.search-select-option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select-option > svg { display: none; width: 15px; height: 15px; flex: 0 0 15px; color: var(--primary); }
.search-select-option[aria-selected="true"] > svg { display: block; }
.sticky-panel { position: sticky; top: calc(var(--topbar) + 20px); }
.role-options { padding: 0 10px; }
.role-group-title { display: flex; align-items: center; gap: 8px; color: var(--text-soft); padding: 11px 8px 7px; font-size: 10px; font-weight: 750; letter-spacing: .55px; text-transform: uppercase; }
.role-group-title small { margin-left: auto; color: var(--text-faint); font-weight: 600; letter-spacing: 0; text-transform: none; }
.app-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.app-dot.app-back_office { color: var(--primary); }
.app-dot.app-ground_staff_app { color: var(--blue); }
.app-dot.app-skypos_app { color: var(--amber); }
.role-option { display: flex; align-items: flex-start; gap: 9px; padding: 7px 7px; border-radius: 8px; cursor: pointer; }
.role-option:hover { background: var(--surface-soft); }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check { width: 19px; height: 19px; flex: 0 0 19px; border: 1px solid var(--border-strong); border-radius: 5px; display: grid; place-items: center; color: transparent; font-size: 11px; margin-top: 1px; }
.role-option input:checked + .custom-check { background: var(--primary); border-color: var(--primary); color: var(--primary-on); }
.role-option > span:last-child { display: flex; flex-direction: column; }
.role-option strong { font-size: 12px; }
.role-option small { color: var(--text-soft); font-size: 10px; line-height: 1.35; margin-top: 2px; }
.form-panel hr { border: 0; border-top: 1px solid var(--border); margin: 11px 16px; }
.switch-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 16px; cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; }
.switch-row strong { font-size: 12px; }
.switch-row small { color: var(--text-soft); font-size: 10px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { position: relative; width: 40px; height: 23px; flex: 0 0 40px; border-radius: 99px; background: var(--border-strong); transition: background var(--transition); }
.switch::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--transition); }
.switch-row input:checked + .switch { background: var(--green); }
.switch-row input:checked + .switch::after { transform: translateX(17px); }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.form-actions.in-panel { margin-top: 8px; }
.inline-form { display: flex; align-items: flex-end; gap: 10px; }
.password-compose { display: flex; gap: 8px; }
.password-compose input { flex: 1; }
.field .iti { width: 100%; }
.field .iti input { width: 100%; height: 38px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); outline: none; transition: all var(--transition); }
.field .iti input:focus { border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.iti { --iti-border-color: var(--border-strong); --iti-dialcode-color: var(--text-soft); --iti-dropdown-bg: var(--surface-raised); --iti-hover-color: var(--surface-soft); --iti-spacer-horizontal: 11px; }
.iti__dropdown-content { color: var(--text); box-shadow: var(--shadow-md); }
.field .iti__search-input { padding-left: 40px; padding-right: 38px; color: var(--text); background: var(--surface); }
.password-toggle.standalone { position: static; width: auto; color: var(--text-soft); background: transparent; border: 0; padding: 0 8px; cursor: pointer; }
.standalone-action { margin-top: -62px; width: max-content; position: relative; z-index: 2; }
.narrow-panel { max-width: 610px; padding: 18px; }
.narrow-panel .stack-form { max-width: none; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 14px; align-items: start; }
.settings-navigation { display: flex; gap: 7px; margin: -4px 0 14px; padding: 5px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.settings-navigation-item { min-width: 205px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--text-soft); transition: all var(--transition); }
.settings-navigation-item:hover { color: var(--text); background: var(--surface-soft); }
.settings-navigation-item.active { color: var(--primary); background: var(--primary-soft); }
.settings-navigation-item svg { width: 21px; flex: 0 0 21px; }
.settings-navigation-item > span { display: flex; flex-direction: column; }
.settings-navigation-item strong { font-size: 12px; }
.settings-navigation-item small { color: var(--text-faint); font-size: 10px; }
.settings-panel { overflow: hidden; }
.settings-fields { display: flex; flex-direction: column; gap: 14px; padding: 3px 16px 18px; }
.settings-fields > .field { max-width: 420px; }
.color-control, .range-control { display: flex; align-items: center; gap: 12px; }
.color-control input[type="color"] { width: 58px; height: 42px; flex: 0 0 58px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); cursor: pointer; }
.color-control output, .range-control output { min-width: 74px; color: var(--text-soft); font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.theme-gradient-toggle { max-width: 520px; padding: 4px 0; }
.gradient-options { max-width: 520px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); transition: opacity var(--transition); }
.gradient-options.disabled { opacity: .48; pointer-events: none; }
.theme-component-colors { max-width: 760px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.theme-component-colors .field { min-width: 0; }
.theme-preview-hover { margin-top: 16px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: background var(--transition); }
.theme-preview-hover:hover { background: var(--hover-color); }
.api-designer-shell { position: relative; min-height: 420px; }
.api-page-loader { position: fixed; z-index: 80; inset: var(--topbar) 0 0 var(--sidebar); display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; color: var(--text); background: color-mix(in srgb, var(--page) 78%, transparent); opacity: 0; backdrop-filter: blur(2px); transition: opacity 150ms ease, visibility 150ms ease; }
.api-page-loading .api-page-loader { visibility: visible; opacity: 1; }
.schedule-page-loader { position: fixed; z-index: 80; inset: var(--topbar) 0 0 var(--sidebar); display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; color: var(--text); background: color-mix(in srgb, var(--page) 78%, transparent); opacity: 0; backdrop-filter: blur(2px); transition: opacity 150ms ease, visibility 150ms ease; }
.schedule-form-loading .schedule-page-loader { visibility: visible; opacity: 1; }
.flight-msl-page-loader { position: fixed; z-index: 80; inset: var(--topbar) 0 0 var(--sidebar); display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; color: var(--text); background: color-mix(in srgb, var(--page) 78%, transparent); opacity: 0; backdrop-filter: blur(2px); transition: opacity 150ms ease, visibility 150ms ease; }
.flight-msl-form-loading .flight-msl-page-loader { visibility: visible; opacity: 1; }
.msl-page-loader { position: fixed; z-index: 80; inset: var(--topbar) 0 0 var(--sidebar); display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; color: var(--text); background: color-mix(in srgb, var(--page) 78%, transparent); opacity: 0; backdrop-filter: blur(2px); transition: opacity 150ms ease, visibility 150ms ease; }
.msl-form-loading .msl-page-loader { visibility: visible; opacity: 1; }
.master-excel-shell { position: relative; }
.master-excel-loader { position: fixed; z-index: 80; inset: var(--topbar) 0 0 var(--sidebar); display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; color: var(--text); background: color-mix(in srgb, var(--page) 78%, transparent); opacity: 0; backdrop-filter: blur(2px); transition: opacity 150ms ease,visibility 150ms ease; }
.master-excel-loading .master-excel-loader { visibility: visible; opacity: 1; }
.excel-stepper { max-width: 540px; display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; gap: 10px; margin: 0 auto 14px; }
.excel-stepper > div { display: flex; align-items: center; gap: 9px; color: var(--text-faint); }
.excel-stepper > div > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); font-weight: 800; }
.excel-stepper > div div { display: flex; flex-direction: column; line-height: 1.2; }.excel-stepper strong { font-size: 12px; }.excel-stepper small { margin-top: 3px; font-size: 10px; }
.excel-stepper > i { height: 1px; background: var(--border); }.excel-stepper > div.active { color: var(--text); }.excel-stepper > div.active > span { color: var(--primary-on); border-color: transparent; background: var(--theme-fill); }
.master-excel-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 0 16px 8px; }
.master-excel-section { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.master-excel-section:nth-last-child(-n+2) { border-bottom: 0; }.master-excel-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 900; }
.master-excel-section h4 { margin: 2px 0 3px; font-size: 13px; }.master-excel-section p { margin: 0 0 9px; color: var(--text-soft); font-size: 10px; }.master-excel-section .field { max-width: 480px; }
.master-excel-drop { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-top: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 9px; color: var(--text-soft); background: var(--surface-soft); cursor: pointer; transition: border-color var(--transition),background var(--transition); }
.master-excel-drop strong { font-size: 11px; }.master-excel-drop small { color: var(--text-faint); font-size: 10px; }.master-excel-drop.dragging,.master-excel-drop.has-file { border-color: var(--primary); background: var(--primary-soft); }
.master-excel-summary { display: grid; grid-template-columns: repeat(5,minmax(90px,1fr)); border-bottom: 1px solid var(--border); background: var(--surface-soft); }.master-excel-summary > div { padding: 10px 14px; border-right: 1px solid var(--border); }.master-excel-summary > div:last-child { border-right: 0; }.master-excel-summary small { display: block; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }.master-excel-summary strong { display: block; margin-top: 2px; font-size: 18px; }.master-excel-summary .success strong { color: var(--green); }.master-excel-summary .danger strong { color: var(--red); }
.master-excel-toolbar { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; }.master-excel-toolbar > .field:first-child { flex: 1; }.master-excel-toolbar .field { margin: 0; }.compact-row-select { display: flex; flex-direction: row; align-items: center; gap: 7px; }.compact-row-select span { white-space: nowrap; }.master-excel-preview-wrap { height: 330px !important; }.master-excel-preview { min-width: 1100px; }.master-excel-preview th,.master-excel-preview td { padding: 7px 9px; white-space: nowrap; }.master-excel-preview td:last-child { min-width: 260px; white-space: normal; }.validation-error { background: color-mix(in srgb,var(--red) 4%,var(--surface)); }
.master-excel-footer { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; color: var(--text-soft); font-size: 10px; }.master-excel-footer > div { display: flex; align-items: center; gap: 8px; }.master-excel-footer strong { min-width: 82px; text-align: center; }
.button.disabled { opacity: .48; pointer-events: none; }
.nav-subitem-featured { margin-bottom: 3px; font-weight: 750; }
.api-loader-spinner { width: 22px; height: 22px; border: 3px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: api-loader-spin .7s linear infinite; }
@keyframes api-loader-spin { to { transform: rotate(360deg); } }
.bulk-stepper { margin-top: 4px; }
.bulk-upload-fields { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(360px,1.3fr); gap: 12px; padding: 14px; }
.bulk-file-field { min-width: 0; }
.bulk-file-drop { min-height: 76px; display: flex; align-items: center; padding: 9px 11px; border: 1px dashed var(--border-strong); border-radius: 9px; color: var(--text-soft); background: var(--surface-soft); cursor: pointer; transition: border-color var(--transition),background var(--transition),box-shadow var(--transition); }
.bulk-file-drop:hover,.bulk-file-drop:focus-visible,.bulk-file-drop.dragging { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); outline: 0; }
.bulk-file-drop.has-file { border-style: solid; border-color: color-mix(in srgb,var(--green) 45%,var(--border)); background: color-mix(in srgb,var(--green-soft) 58%,var(--surface)); }
.bulk-file-empty,.bulk-file-selected { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.bulk-file-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }.bulk-file-icon svg { width: 18px; height: 18px; fill: currentColor; }
.bulk-file-empty > div,.bulk-file-selected > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.bulk-file-empty strong,.bulk-file-selected strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.bulk-file-empty small,.bulk-file-selected small { overflow: hidden; color: var(--text-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-file-success { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 16px; font-weight: 850; }
.bulk-import-notes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: var(--surface-soft); font-size: 11px; }
.bulk-import-notes strong { width: 100%; color: var(--text); }
.bulk-import-notes span::before { margin-right: 6px; color: var(--green); content: "✓"; font-weight: 800; }
.bulk-review-summary { display: grid; grid-template-columns: repeat(6,minmax(100px,1fr)); margin-bottom: 12px; overflow: hidden; }
.bulk-review-summary > div { padding: 11px 14px; border-right: 1px solid var(--border); }
.bulk-review-summary > div:last-child { border-right: 0; }
.bulk-review-summary small { display: block; color: var(--text-faint); font-size: 9px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.bulk-review-summary strong { display: block; margin-top: 3px; font-size: 18px; }
.bulk-review-summary .warning strong,.text-warning { color: var(--amber); }.bulk-review-summary .success strong { color: var(--green); }.bulk-review-summary .danger strong { color: var(--red); }
.bulk-data-issue-alert { margin-bottom: 12px; }.issue-count-badge { color: var(--red); background: var(--red-soft); }.bulk-issues-panel { border-color: color-mix(in srgb,var(--red) 24%,var(--border)); }.bulk-issue-table { max-height: 280px; overflow: auto; }.bulk-issue-table tbody tr { background: color-mix(in srgb,var(--red) 3%,var(--surface)); }.bulk-issue-table code { color: var(--red); font-size: 10px; font-weight: 700; }
.bulk-warning { margin-bottom: 12px; }.bulk-warning ul { margin: 5px 0 0 18px; }
.bulk-review-panel { margin-bottom: 12px; overflow: visible; }.bulk-master-table { max-height: 310px; overflow: auto; }.bulk-master-type { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 750; }
.bulk-trip-list { display: grid; gap: 7px; padding: 9px; }.bulk-trip { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.bulk-trip summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 7px 11px; cursor: pointer; list-style: none; }.bulk-trip summary::-webkit-details-marker { display: none; }.bulk-trip summary span { display: flex; flex-direction: column; gap: 2px; }.bulk-trip summary small { color: var(--text-soft); }.bulk-trip summary b { padding: 3px 7px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; }.bulk-trip[open] summary { border-bottom: 1px solid var(--border); background: var(--surface-soft); }.bulk-trip .table-wrap { max-height: 230px; overflow: auto; }
.bulk-review-actions { position: sticky; z-index: 12; top: calc(var(--topbar) + 6px); display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; margin-bottom: 12px; padding: 7px 9px 7px 13px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb,var(--surface) 94%,transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }.bulk-review-actions > div { display: flex; flex-direction: column; gap: 3px; }.bulk-review-actions > div small { color: var(--text-faint); font-size: 9px; }.bulk-review-actions > span { display: flex; align-items: center; gap: 7px; }
.bulk-progress-overlay { padding: 20px; }
.bulk-progress-card { width: min(580px,calc(100vw - 40px)); overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-lg); }
.bulk-progress-card header { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 15px 16px 12px; }.bulk-progress-card header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.bulk-progress-card header strong { font-size: 13px; }.bulk-progress-card header small { overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.bulk-progress-card header b { color: var(--primary); font-size: 13px; }
.bulk-progress-track { height: 5px; margin: 0 16px 13px; overflow: hidden; border-radius: 99px; background: var(--surface-muted); }.bulk-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--theme-fill); transition: width 180ms ease; }.bulk-progress-track i.indeterminate { animation: bulk-progress-indeterminate 1.1s ease-in-out infinite; }
.bulk-progress-stages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 1px; border-top: 1px solid var(--border); background: var(--border); }.bulk-progress-stages > div { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 1px 7px; min-height: 48px; padding: 8px 11px; background: var(--surface); }.bulk-progress-stages > div > span { grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 900; }.bulk-progress-stages strong { align-self: end; font-size: 10px; }.bulk-progress-stages small { color: var(--text-faint); font-size: 9px; }.bulk-progress-stages > div.complete > span { color: var(--green); background: var(--green-soft); }
.bulk-progress-stages.single-stage { grid-template-columns: 1fr; }
@keyframes bulk-progress-indeterminate { 0% { width: 12%; transform: translateX(-110%); } 55% { width: 42%; } 100% { width: 12%; transform: translateX(850%); } }
.api-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 0 0 12px; padding: 5px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.api-tabs button { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; color: var(--text-soft); border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 700; cursor: pointer; transition: color var(--transition),background var(--transition),box-shadow var(--transition); }
.api-tabs button:hover { color: var(--text); background: var(--hover-color); }
.api-tabs button.active { color: var(--primary-on); background: var(--theme-fill); box-shadow: var(--shadow-sm); }
.api-tabs button span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: inherit; background: color-mix(in srgb,currentColor 10%,transparent); font-size: 9px; }
.api-tab-panel { display: flex; flex-direction: column; gap: 12px; animation: api-panel-enter 180ms ease; }
.api-tab-panel[hidden] { display: none; }
@keyframes api-panel-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.api-manage-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; }
.api-run-grid { display: grid; grid-template-columns: minmax(420px,.85fr) minmax(420px,1.15fr); gap: 12px; align-items: stretch; }
.api-run-grid > .panel { min-width: 0; }
.api-run-method { min-width: 48px; padding: 5px 8px; border-radius: 7px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; font-weight: 800; text-align: center; }
.api-run-method[data-method="get"] { color: #286099; background: #e9f3ff; }.api-run-method[data-method="post"] { color: #08734c; background: #e6f7ef; }.api-run-method[data-method="put"],.api-run-method[data-method="patch"] { color: #965b08; background: #fff2dc; }
.api-response-panel { display: flex; flex-direction: column; overflow: hidden; }
.api-response-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.api-response-meta p { margin: 0; }
.api-response-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.api-response-status.is-success { border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: var(--green); }
.api-response-status.is-error { border-color: color-mix(in srgb, var(--red) 35%, transparent); background: color-mix(in srgb, var(--red) 9%, var(--surface)); color: var(--red); }
.api-response-panel pre { min-height: 360px; flex: 1; margin: 0; padding: 14px; overflow: auto; color: #d8e4ff; background: #111827; font: 11px/1.6 "Cascadia Code",Consolas,monospace; white-space: pre-wrap; word-break: break-word; }
.api-run-success { color: var(--green) !important; }.api-run-error { color: var(--red) !important; }
.api-contract-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 14px 14px; }
.api-keys-panel { margin-top: 0; }
.api-async-error { margin-bottom: 10px; }
.api-designer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.api-designer-main, .api-designer-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.api-group-block + .api-group-block { border-top: 1px solid var(--border); }
.api-group-block > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 15px 9px; }
.api-group-block h4 { display: inline; margin: 0 0 0 7px; font-size: 14px; }
.api-group-block p { margin: 5px 0 0; color: var(--text-soft); font-size: 11px; }
.api-group-block header > span { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.api-group-block td strong, .api-group-block td small { display: block; }
.api-group-block td code { display: block; max-width: 270px; overflow: hidden; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }
.api-method { display: inline-flex; min-width: 42px; justify-content: center; padding: 4px 6px; border-radius: 6px; font-size: 9px; font-weight: 800; }
.api-method-get { color: #286099; background: #e9f3ff; }
.api-method-post { color: #08734c; background: #e6f7ef; }
.api-method-put, .api-method-patch { color: #965b08; background: #fff2dc; }
html[data-theme="dark"] .api-method-get { color: #8fc2f6; background: #20354b; }
html[data-theme="dark"] .api-method-post { color: #83d9b5; background: #1f3b31; }
html[data-theme="dark"] .api-method-put, html[data-theme="dark"] .api-method-patch { color: #efbd75; background: #46351e; }
.code-editor { min-height: 180px; padding: 11px !important; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px !important; line-height: 1.6; tab-size: 4; }
.code-editor-small { min-height: 92px; }
.api-key-reveal { align-items: flex-start; }
.api-key-reveal code { display: block; margin-top: 8px; padding: 9px; border-radius: 7px; background: color-mix(in srgb,var(--amber) 9%,var(--surface)); word-break: break-all; user-select: all; }
.api-key-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--border); }
.api-key-list > div:first-child { border-top: 0; }
.api-key-list span { min-width: 0; }
.api-key-list strong, .api-key-list small, .api-key-list code { display: block; }
.api-key-list code { margin: 3px 0; color: var(--primary); }
.api-full-key { display: flex !important; align-items: center; gap: 7px; max-width: min(760px,75vw); }
.api-full-key code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.api-full-key .button { flex: 0 0 auto; }
.api-key-unavailable { color: var(--amber) !important; }
.api-key-actions { display: flex; align-items: center; gap: 6px; }
.api-row-actions { display: flex !important; align-items: center; gap: 6px; }
.protected-handler-card { padding: 12px; border: 1px solid color-mix(in srgb,var(--primary) 25%,var(--border)); border-radius: 9px; background: var(--primary-soft); }
.protected-handler-card span,.protected-handler-card strong { display: block; }.protected-handler-card span { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }.protected-handler-card strong { margin-top: 4px; color: var(--primary); font-family: "Cascadia Code",Consolas,monospace; }.protected-handler-card p { margin: 6px 0 0; color: var(--text-soft); font-size: 11px; }
.application-code-guide { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.application-code-guide > span { margin-right: 3px; color: var(--text-soft); font-size: 11px; font-weight: 700; }.application-code-guide code { padding: 4px 7px; border-radius: 6px; color: var(--primary); background: var(--surface); font-size: 10px; }.application-code-guide small { flex-basis: 100%; color: var(--text-faint); }
.api-contract { padding: 0 14px 13px; }.api-contract small,.api-contract code { display: block; }.api-contract small { margin-top: 10px; color: var(--text-faint); }.api-contract code { margin-top: 4px; padding: 7px; overflow-wrap: anywhere; border-radius: 6px; background: var(--surface-soft); color: var(--primary); }.api-contract p { margin: 11px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
@media (max-width: 1100px) { .api-run-grid { grid-template-columns: 1fr; }.api-response-panel pre { min-height: 260px; } }
@media (max-width: 980px) { .api-designer-grid,.api-manage-grid { grid-template-columns: 1fr; }.api-page-loader,.schedule-page-loader,.flight-msl-page-loader,.msl-page-loader,.master-excel-loader { left: 0; }.api-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }.api-contract-row { grid-template-columns: 1fr; }.master-excel-setup { grid-template-columns: 1fr; }.master-excel-section { border-bottom: 1px solid var(--border) !important; }.master-excel-summary { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 980px) { .bulk-upload-fields { grid-template-columns: 1fr; }.bulk-review-summary { grid-template-columns: repeat(2,1fr); }.bulk-review-summary > div { border-bottom: 1px solid var(--border); } }
@media (max-width: 680px) { .bulk-review-actions { position: static; align-items: stretch; flex-direction: column; }.bulk-review-actions > span { justify-content: flex-end; flex-wrap: wrap; }.bulk-progress-stages { grid-template-columns: 1fr; }.bulk-progress-card header { grid-template-columns: 24px minmax(0,1fr); }.bulk-progress-card header b { display: none; } }
.range-control input { min-width: 0; flex: 1; accent-color: var(--primary); }
.settings-actions { min-height: 54px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--surface-soft); }
.grid-settings-fields { padding-top: 8px; }
.grid-retention-settings { grid-column: 1 / -1; margin-top: 5px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.grid-retention-master { min-height: 58px; padding: 9px 12px; background: var(--surface); }
.grid-retention-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--border); transition: opacity var(--transition); }
.grid-retention-options.disabled { opacity: .48; pointer-events: none; }
.grid-retention-option { min-height: 54px; display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; background: var(--surface); cursor: pointer; }
.grid-retention-option input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); }
.grid-retention-option > span { display: flex; flex-direction: column; gap: 2px; }
.grid-retention-option strong { font-size: 12px; }
.grid-retention-option small { color: var(--text-soft); font-size: 10px; }

/* Schedule dashboard */
.schedule-dashboard-hero { align-items: flex-end; }
.dashboard-updated { color: var(--text-soft); font-size: 11px; white-space: nowrap; }
.schedule-dashboard { position: relative; display: flex; flex-direction: column; gap: 10px; }
.schedule-dashboard-controls { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(230px, 1.25fr) auto auto; align-items: end; gap: 10px; padding: 12px; }
.schedule-dashboard-controls .field { gap: 4px; }
.dashboard-range-control { display: flex; flex-direction: column; gap: 4px; }
.dashboard-range-control > span { color: var(--text); font-size: 11px; font-weight: 650; }
.dashboard-range-control > div { display: flex; overflow: hidden; height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
.dashboard-range-control button { min-width: 62px; padding: 0 11px; border: 0; border-right: 1px solid var(--border); color: var(--text-soft); background: transparent; font-size: 11px; cursor: pointer; }
.dashboard-range-control button:last-child { border-right: 0; }
.dashboard-range-control button.active { color: #fff; background: var(--primary); font-weight: 700; }
.schedule-dashboard-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dashboard-summary-card { position: relative; min-height: 78px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 2px 8px; overflow: hidden; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
.dashboard-summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); }
.dashboard-summary-card.green::before { background: var(--green); }
.dashboard-summary-card.amber::before { background: #c98717; }
.dashboard-summary-card.plum::before { background: #8a3b78; }
.dashboard-summary-card > span { color: var(--text-soft); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .35px; }
.dashboard-summary-card > strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 23px; }
.dashboard-summary-card > small { color: var(--text-faint); font-size: 9px; }
.dashboard-day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.dashboard-day-strip article { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.dashboard-day-strip article > div { min-width: 0; display: flex; flex-direction: column; }
.dashboard-day-strip strong { font-size: 11px; }
.dashboard-day-strip span, .dashboard-day-strip em { color: var(--text-soft); font-size: 9px; font-style: normal; }
.dashboard-day-strip progress { grid-column: 1 / -1; width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 5px; appearance: none; }
.dashboard-day-strip progress::-webkit-progress-bar { background: var(--surface-soft); }
.dashboard-day-strip progress::-webkit-progress-value { background: var(--primary); border-radius: 5px; }
.dashboard-day-strip progress::-moz-progress-bar { background: var(--primary); border-radius: 5px; }
.dashboard-workspace { position: relative; min-height: 360px; overflow: hidden; }
.dashboard-tabs-row { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.dashboard-tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.dashboard-tabs button { height: 31px; padding: 0 13px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; font-size: 11px; cursor: pointer; }
.dashboard-tabs button.active { color: #fff; background: var(--primary); box-shadow: 0 4px 10px var(--primary-soft); font-weight: 700; }
.dashboard-view-search { width: min(260px, 32vw); }
.dashboard-view-search input { height: 34px; }
.dashboard-view { min-height: 300px; }
.dashboard-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.dashboard-trip-card { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.dashboard-trip-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 11px; background: var(--surface-soft); }
.dashboard-trip-card > header > div { min-width: 0; display: flex; flex-direction: column; }
.dashboard-trip-card > header span:not(.status-badge), .dashboard-trip-card > header small { overflow: hidden; color: var(--text-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-trip-card > header strong { font-size: 13px; }
.dashboard-sector-flow { display: flex; flex-direction: column; }
.dashboard-sector-flow > div { display: grid; grid-template-columns: 43px minmax(0, 1fr) 43px; align-items: center; gap: 8px; padding: 7px 11px; border-top: 1px solid var(--border); }
.dashboard-sector-flow time { color: var(--text-soft); font-size: 10px; font-weight: 650; }
.dashboard-sector-flow time:last-child { text-align: right; }
.dashboard-sector-flow span { min-width: 0; display: flex; flex-direction: column; }
.dashboard-sector-flow strong { font-size: 11px; }
.dashboard-sector-flow small { color: var(--text-soft); font-size: 9px; }
.dashboard-trip-card > footer { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 9px; }
.dashboard-trip-card > footer a { color: var(--primary); font-weight: 700; }
.dashboard-table-wrap { max-height: 410px; overflow: auto; }
.dashboard-table thead { position: sticky; top: 0; z-index: 2; }
.dashboard-table td { height: 39px; }
.dashboard-table td:first-child { min-width: 180px; }
.dashboard-table td:first-child strong, .dashboard-table td:first-child small { display: block; }
.dashboard-table td:first-child small { margin-top: 1px; color: var(--text-soft); font-size: 9px; }
.dashboard-good { color: var(--green); font-weight: 700; }
.dashboard-warning { color: #a86500; font-weight: 700; }
.dashboard-inline-bar { display: block; width: 105px; }
.dashboard-inline-bar progress { width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 6px; appearance: none; }
.dashboard-inline-bar progress::-webkit-progress-bar { background: var(--surface-soft); }
.dashboard-inline-bar progress::-webkit-progress-value { background: var(--primary); border-radius: 6px; }
.dashboard-inline-bar progress::-moz-progress-bar { background: var(--primary); border-radius: 6px; }
.dashboard-route-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.dashboard-route-tags span { padding: 2px 5px; border-radius: 5px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; }
.schedule-dashboard-loader { position: absolute; inset: 54px 0 0; z-index: 5; display: none; place-content: center; justify-items: center; gap: 5px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(2px); }
.schedule-dashboard-loader strong { font-size: 12px; }
.schedule-dashboard-loader small { color: var(--text-soft); font-size: 10px; }
.schedule-dashboard.loading .schedule-dashboard-loader { display: grid; }
.schedule-dashboard.loading .dashboard-workspace { min-height: 360px; }
.dashboard-empty { min-height: 280px; }
.grid-height-control { position: relative; max-width: 210px; }
.grid-height-control input { width: 100%; padding-right: 42px; }
.grid-height-control > span { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--text-faint); font-size: 11px; font-weight: 700; pointer-events: none; }
.grid-height-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 660px; }
.grid-height-presets button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; transition: all var(--transition); }
.grid-height-presets button:hover { border-color: var(--primary); background: var(--hover-color); }
.grid-height-presets button.active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.grid-height-presets small { color: var(--text-faint); font-size: 9px; font-weight: 600; }
.grid-settings-preview { overflow: hidden; }
.mini-grid { height: 208px; margin: 0 14px 14px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; transition: height .2s ease; }
.mini-grid header, .mini-grid > div { display: grid; grid-template-columns: .75fr 1.5fr .6fr; align-items: center; min-height: 35px; padding: 0 10px; border-bottom: 1px solid var(--border); font-size: 10px; }
.mini-grid header { position: sticky; top: 0; z-index: 1; min-height: 32px; color: var(--text-faint); background: var(--surface-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mini-grid > div:last-child { border-bottom: 0; }
.mini-grid > div:hover { background: var(--hover-color); }
.mini-grid strong { font-size: 10px; }
.mini-grid em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 750; }
.settings-save-status { margin-right: auto; color: var(--green); font-size: 12px; }
.theme-preview { position: sticky; top: calc(var(--topbar) + 20px); overflow: hidden; }
.theme-preview-banner { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--primary-on); background: var(--theme-fill); }
.theme-preview-banner .brand-mark { flex: 0 0 38px; background: color-mix(in srgb, var(--surface) 20%, transparent); box-shadow: none; }
.theme-preview-banner > div { display: flex; flex-direction: column; }
.theme-preview-banner small { opacity: .78; }
.theme-preview-body { padding: 17px; }
.theme-preview-body h3 { margin: 5px 0 6px; font-size: 21px; }
.theme-preview-body p { margin: 0; color: var(--text-soft); line-height: 1.65; }
.theme-preview-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; }

.master-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.master-card { min-height: 168px; display: flex; flex-direction: column; gap: 11px; padding: 15px; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.master-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: var(--shadow-md); }
.master-card-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 12px; font-weight: 800; }
.master-card h3 { margin: 0 0 5px; font-size: 15px; }
.master-card p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.master-card footer { display: flex; align-items: baseline; gap: 5px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }
.master-card footer strong { color: var(--primary); font-size: 18px; }
.master-card footer span { color: var(--text-faint); font-size: 10px; }
.master-card footer em { margin-left: auto; color: var(--primary); font-size: 11px; font-style: normal; font-weight: 650; }
.master-table td { white-space: nowrap; }
.master-table td:nth-child(2), .master-table td:nth-child(3) { white-space: normal; }
.master-form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 14px; align-items: start; }
.master-form-grid { padding-bottom: 8px; }
.master-form-note { position: sticky; top: calc(var(--topbar) + 14px); padding: 16px; }
.master-form-note h3 { margin: 5px 0 7px; }
.master-form-note p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.master-form-note ul { margin: 16px 0 0; padding-left: 17px; color: var(--text-soft); font-size: 11px; }
.master-form-note li + li { margin-top: 5px; }

.schedule-table td { white-space: nowrap; }
.zone-count-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; }
.schedule-crew-cell { min-width: 230px; max-width: 360px; white-space: normal !important; }
.schedule-crew-cell span { display: block; font-size: 11px; line-height: 1.45; }
.schedule-form { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
.schedule-form-main { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.schedule-form-side { position: sticky; top: calc(var(--topbar) + 14px); display: flex; flex-direction: column; gap: 9px; }
.schedule-details-grid { margin-top: 12px; }
.schedule-flight-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 9px; }
.schedule-flight-summary > span { min-height: 52px; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; background: var(--surface-soft); }
.schedule-flight-summary small { color: var(--text-faint); font-size: 9px; font-weight: 750; letter-spacing: .55px; text-transform: uppercase; }
.schedule-flight-summary strong { margin-top: 3px; color: var(--text); font-size: 14px; }
.schedule-crew-count { color: var(--primary); font-size: 11px; font-weight: 700; }
.schedule-crew-search { display: block; padding: 9px 12px 7px; }
.schedule-crew-search input { width: 100%; height: 34px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; outline: none; }
.schedule-crew-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.schedule-crew-picker { max-height: 300px; overflow-y: auto; padding: 0 12px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.schedule-crew-option { min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.schedule-crew-option:hover, .schedule-crew-option:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-soft); }
.schedule-crew-option > input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.schedule-crew-option .avatar { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; font-size: 10px; }
.schedule-crew-option > span:nth-of-type(2) { min-width: 0; display: flex; flex-direction: column; }
.schedule-crew-option strong, .schedule-crew-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-crew-option strong { color: var(--text); font-size: 11px; }
.schedule-crew-option small { color: var(--text-faint); font-size: 9px; }
.schedule-crew-option .badge { justify-self: end; }
.schedule-readiness { padding: 15px; }
.schedule-readiness h3 { margin: 6px 0 10px; }
.schedule-readiness ul { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.schedule-readiness li::marker { color: var(--primary); }
.schedule-actions { justify-content: stretch; padding: 0; }
.schedule-actions .button { flex: 1; }
.sector-list { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; }
.sector-row { position: relative; display: block; overflow: visible; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.sector-row:has(.search-select.open) { z-index: 100; }
.sector-main { display: grid; grid-template-columns: 28px minmax(260px, 1fr) 145px 145px 34px; gap: 8px; align-items: start; padding: 8px; border-radius: 10px 10px 0 0; }
.sector-order { width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.sector-row .field { gap: 4px; }
.sector-caption { color: var(--text-faint); font-size: 9px; }
.sector-main > .sector-order, .sector-main > .remove-sector { align-self: start; margin-top: 21px; }
.sector-crew-assignment { overflow: visible; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; background: var(--surface); }
.sector-crew-assignment > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 10px; cursor: pointer; list-style: none; }
.sector-crew-assignment > summary::-webkit-details-marker { display: none; }
.sector-crew-assignment > summary > span { display: flex; flex-direction: column; gap: 2px; }
.sector-crew-assignment > summary strong { color: var(--text); font-size: 12px; }
.sector-crew-assignment > summary small { color: var(--text-faint); font-size: 9px; }
.sector-crew-assignment > summary::before { content: "›"; order: -1; color: var(--primary); font-size: 20px; line-height: 1; transition: transform var(--transition); }
.sector-crew-assignment[open] > summary::before { transform: rotate(90deg); }
.sector-crew-assignment .sector-crew-count { margin-left: auto; font-style: normal; }
.sector-crew-body { border-top: 1px solid var(--border); }
.sector-crew-body .schedule-crew-picker { max-height: 230px; }
.field-error-text { color: var(--red) !important; }
.remove-sector, .remove-msl-line { color: var(--red); }
.sector-cell { min-width: 330px; white-space: normal !important; }
.sector-cell span { display: block; line-height: 1.55; }
.table-action-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.msl-form { display: flex; flex-direction: column; gap: 13px; }
.msl-code-compose { display: flex; align-items: center; gap: 7px; }
.msl-code-compose input { min-width: 0; flex: 1; }
.msl-code-compose .button { height: 38px; flex: 0 0 auto; }
#msl-code-status.available { color: var(--green); }
#msl-code-status.unavailable, #msl-code-status.error { color: var(--red); }
#msl-template-code.code-available { border-color: var(--green); }
#msl-template-code.code-unavailable { border-color: var(--red); }
.msl-identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msl-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.msl-copy-zone-panel { display: flex; align-items: flex-end; gap: 9px; margin: -2px 12px 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 9px; background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface)); }
.msl-copy-zone-panel[hidden] { display: none; }
.msl-copy-zone-panel > div:first-child { min-width: 230px; margin-right: auto; align-self: center; }
.msl-copy-zone-panel strong, .msl-copy-zone-panel small, .msl-copy-zone-panel label > span { display: block; }
.msl-copy-zone-panel small { margin-top: 2px; color: var(--text-faint); font-size: 10px; }
.msl-copy-zone-panel label > span { margin-bottom: 3px; color: var(--text-soft); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.msl-copy-zone-panel select { min-width: 112px; height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.msl-copy-zone-panel .search-select { min-width: 112px; }
.msl-copy-zone-panel .search-select-button { height: 34px; }
.msl-copy-arrow { align-self: center; padding-top: 13px; color: var(--primary); font-size: 18px; }
@media (max-width: 1100px) { .msl-copy-zone-panel { flex-wrap: wrap; }.msl-copy-zone-panel > div:first-child { flex: 1 1 100%; }.msl-copy-zone-panel > .button { flex: 1 1 auto; } }
.flight-load-table { min-width: 940px; }
.flight-load-table th:nth-child(1), .flight-load-table td:nth-child(1) { width: 36px; }
.flight-load-table th:nth-child(2), .flight-load-table td:nth-child(2) { width: 320px; }
.flight-load-table th:nth-child(3), .flight-load-table td:nth-child(3) { width: 90px; }
.flight-load-table th:nth-child(4), .flight-load-table td:nth-child(4), .flight-load-table th:nth-child(5), .flight-load-table td:nth-child(5) { width: 105px; }
.flight-load-table th:nth-child(6), .flight-load-table td:nth-child(6) { width: 270px; }
.flight-load-table .search-select-button { height: 32px; }
.flight-load-table .compact-input { height: 32px; padding: 0 8px; }
.flight-msl-zone-heading td { width: auto !important; padding: 7px 10px !important; background: var(--surface-soft); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); }
.flight-msl-zone-heading td > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flight-msl-zone-heading span { display: flex; align-items: baseline; gap: 9px; }
.flight-msl-zone-heading strong { color: var(--text); font-size: 12px; }
.flight-msl-zone-heading small { color: var(--text-soft); font-size: 10px; }
.msl-import-status { display: none; margin: -3px 12px 8px; padding: 7px 10px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 10px; }
.msl-import-status.visible { display: block; }
.msl-import-status.error { color: var(--red); background: var(--red-soft); }
.msl-validity-cell { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.msl-validity-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.2; }
.msl-validity-badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.msl-validity-badge.valid { color: var(--green); background: var(--green-soft); }
.msl-validity-badge.upcoming { color: var(--blue); background: var(--blue-soft); }
.msl-validity-badge.expiring { color: var(--amber); background: var(--amber-soft); }
.msl-validity-badge.expired { color: var(--red); background: var(--red-soft); }
.msl-line-list { position: relative; padding: 0 12px 12px; overflow: visible; }
.msl-line-list:has(.msl-product-picker.open) { z-index: 130; }
.msl-line-head, .msl-line-row { min-width: 650px; display: grid; grid-template-columns: 32px minmax(300px, 620px) 90px 110px 36px; gap: 8px; align-items: center; justify-content: start; }
.msl-line-head { padding: 11px 7px; color: var(--text-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.msl-line-row { position: relative; padding: 7px; border-top: 1px solid var(--border); }
.msl-line-row:has(.search-select.open) { z-index: 140; }
.msl-line-row.line-complete { background: color-mix(in srgb, var(--green-soft) 42%, transparent); }
.msl-line-row input, .compact-input { min-width: 0; height: 34px; padding: 0 9px; color: var(--text); border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.msl-line-number { color: var(--text-faint); text-align: center; font-weight: 700; }
.msl-uom[readonly] { color: var(--text-soft); background: var(--surface-soft); cursor: default; }
.msl-line-row .search-select { min-width: 0; width: 100px; }
.msl-line-row .search-select-button { height: 34px; }
.msl-line-row .search-select-popup { top: auto; bottom: calc(100% + 5px); }
.msl-product-picker { position: relative; min-width: 0; }
.msl-product-picker.open { z-index: 110; }
.msl-product-trigger { width: 100%; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; text-align: left; }
.msl-product-trigger.placeholder { color: var(--text-faint); }
.msl-product-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msl-product-trigger > b { color: var(--text-faint); font-size: 13px; transition: transform var(--transition); }
.msl-product-picker.open .msl-product-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.msl-product-picker.open .msl-product-trigger > b { transform: rotate(180deg); }
.msl-product-popup { position: absolute; z-index: 120; top: calc(100% + 4px); left: 0; width: min(460px, calc(100vw - 40px)); padding: 7px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-md); }
.msl-product-picker.drop-up .msl-product-popup { top: auto; bottom: calc(100% + 4px); }
.msl-product-popup[hidden] { display: none; }
.msl-product-search { width: 100%; height: 34px !important; padding: 0 10px !important; }
.msl-product-options { min-height: 70px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.msl-product-option { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; color: var(--text); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.msl-product-option:hover, .msl-product-option:focus { background: var(--primary-soft); outline: none; }
.msl-product-option:disabled { opacity: .5; cursor: not-allowed; background: var(--surface-soft); }
.msl-product-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.msl-product-option small { flex: 0 0 auto; color: var(--text-faint); font-size: 9px; }
.msl-product-empty { margin: 0; padding: 22px 8px; color: var(--text-faint); font-size: 11px; text-align: center; }
.msl-product-empty.error { color: var(--red); }
.msl-product-popup footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 6px 2px 0; border-top: 1px solid var(--border); }
.msl-product-popup footer button { width: 28px; height: 27px; display: grid; place-items: center; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.msl-product-popup footer button:disabled { opacity: .4; cursor: default; }
.msl-product-page { margin-right: auto; color: var(--text-faint); font-size: 9px; }
.trip-strip { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 1px; margin-bottom: 18px; overflow: hidden; background: var(--border); }
.trip-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--surface); }
.trip-strip small { color: var(--text-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.compact-input.wide { min-width: 220px; width: 100%; }
.msl-notes { padding: 14px 18px 18px; border-top: 1px solid var(--border); }
.locked-note { margin-right: auto; color: var(--green); font-size: 11px; font-weight: 650; }
.status-badge.pending { color: var(--amber); background: var(--amber-soft); }

.access-control-panel { margin-top: 0; }
.access-control-form { display: block; }
.access-role-switcher { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.access-role-switcher-label { flex: 0 0 auto; padding: 0 4px; color: var(--text-faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.access-role-switcher-list { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.access-role-switch { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 4px 10px 4px 5px; color: var(--text-soft); border: 1px solid transparent; border-radius: 8px; text-decoration: none; transition: color var(--transition), border-color var(--transition), background var(--transition); }
.access-role-switch > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 9px; font-weight: 850; }
.access-role-switch strong { font-size: 11px; white-space: nowrap; }
.access-role-switch:hover { color: var(--primary); border-color: var(--border-strong); background: var(--surface); }
.access-role-switch.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); background: var(--primary-soft); }
.access-role-switch.active > span { color: var(--primary-on); border-color: transparent; background: var(--theme-fill); }
.access-role-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.access-role-header > div { display: flex; align-items: center; gap: 12px; }
.access-role-header > div > span:last-child { display: flex; flex-direction: column; }
.access-role-header .role-icon { width: 34px; height: 34px; border-radius: 8px; font-size: 11px; }
.access-role-header strong { font-size: 12px; }
.access-role-header small { color: var(--text-soft); font-size: 9px; }
.access-menu-order-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface)); }
.access-menu-order-editor > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.access-menu-order-editor > div:first-child strong { font-size: 11px; }
.access-menu-order-editor > div:first-child small { color: var(--text-faint); font-size: 8px; }
.access-menu-sortable { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; padding: 2px; }
.access-menu-sort-item { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 3px 5px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; cursor: grab; user-select: none; transition: opacity var(--transition), border-color var(--transition), transform var(--transition); }
.access-menu-sort-item:active { cursor: grabbing; }
.access-menu-sort-item.dragging { opacity: .38; }
.access-menu-sort-item.drag-target { border-color: var(--primary); transform: translateY(-1px); }
.access-menu-sort-item > strong { font-size: 9px; white-space: nowrap; }
.access-menu-drag-handle { width: 18px; height: 24px; display: grid; place-items: center; color: var(--text-faint); }
.access-menu-drag-handle svg { width: 14px; height: 14px; fill: currentColor; }
.access-menu-position { min-width: 17px; height: 17px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 5px; font-size: 8px; font-weight: 800; }
.access-menu-move-buttons { display: flex; }
.access-menu-move-buttons button { width: 20px; height: 20px; padding: 0; color: var(--text-soft); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.access-menu-move-buttons button:hover { color: var(--primary); background: var(--primary-soft); }
.left-menu-editor-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.left-menu-editor-header > div { display: flex; align-items: center; gap: 10px; }
.left-menu-editor-header > div > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.left-menu-editor-header strong { font-size: 12px; }
.left-menu-editor-header small { color: var(--text-soft); font-size: 10px; }
.left-menu-tree { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface-soft); }
.left-menu-tree-node { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); transition: opacity var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.left-menu-tree-node[draggable="true"] { cursor: grab; }
.left-menu-tree-node[draggable="true"]:active { cursor: grabbing; }
.left-menu-tree-node.dragging { opacity: .42; border-color: var(--primary); box-shadow: var(--shadow-sm); }
.left-menu-tree-row { min-height: 48px; display: grid; grid-template-columns: 24px 26px 26px minmax(220px, 1fr) minmax(110px, auto) 58px; align-items: center; gap: 7px; padding: 6px 10px; }
.left-menu-tree-drag { display: grid; place-items: center; color: var(--text-faint); }
.left-menu-tree-drag svg { width: 17px; height: 17px; fill: currentColor; }
.left-menu-tree-toggle { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: var(--text-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.left-menu-tree-toggle:not(:disabled):hover { color: var(--primary); background: var(--primary-soft); }
.left-menu-tree-toggle:disabled { opacity: .25; cursor: default; }
.left-menu-tree-toggle svg { width: 17px; height: 17px; fill: currentColor; transition: transform var(--transition); }
.left-menu-tree-node.children-collapsed .left-menu-tree-toggle svg { transform: rotate(-90deg); }
.left-menu-tree-position { width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 6px; font-size: 9px; font-weight: 850; }
.left-menu-tree-row label input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface); font: inherit; font-size: 11px; font-weight: 700; }
.left-menu-tree-row label input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.left-menu-tree-row code { color: var(--text-faint); font-size: 9px; }
.left-menu-tree-actions { display: flex; justify-content: flex-end; }
.left-menu-tree-actions button { width: 26px; height: 26px; padding: 0; color: var(--text-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.left-menu-tree-actions button:hover { color: var(--primary); background: var(--primary-soft); }
.left-menu-tree-children { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 4px 8px; max-height: 240px; padding: 8px 12px 10px 93px; overflow: hidden; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface)); opacity: 1; transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease;
}
.left-menu-tree-node.children-collapsed .left-menu-tree-children { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; opacity: 0; }
.left-menu-tree-children > div { display: flex; align-items: center; gap: 7px; min-height: 24px; color: var(--text-soft); font-size: 10px; }
.left-menu-tree-children > div > span { width: 8px; height: 1px; background: var(--border-strong); }
.left-menu-tree-children strong { font-weight: 600; }
.protected-role-badge { padding: 5px 9px; border-radius: 99px; color: var(--amber); background: var(--amber-soft); font-size: 10px; font-weight: 700; }
.permission-matrix th, .permission-matrix td { padding-top: 4px; padding-bottom: 4px; }
.permission-matrix th:not(:first-child), .permission-matrix td:not(:first-child) { width: 112px; text-align: center; }
.permission-module { min-width: 270px; display: flex; flex-direction: column; }
.permission-module strong { color: var(--text); font-size: 11px; line-height: 1.2; }
.permission-module span { color: var(--text-faint); font-size: 8px; line-height: 1.25; }
.permission-cell { text-align: center; }
.matrix-check { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.matrix-check input { position: absolute; opacity: 0; pointer-events: none; }
.matrix-check > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 7px; color: transparent; background: var(--surface); transition: all var(--transition); }
.matrix-check svg { width: 14px; }
.matrix-check em { color: var(--text-faint); font-size: 8px; line-height: 1; font-style: normal; }
.matrix-check:hover > span { border-color: var(--primary); background: var(--primary-soft); }
.matrix-check input:focus-visible + span { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
.matrix-check input:checked + span { border-color: var(--primary); color: var(--primary-on); background: var(--theme-fill); }
.matrix-check input:disabled + span { opacity: .65; cursor: not-allowed; }
.matrix-check:has(input:disabled) { cursor: not-allowed; }
.not-applicable { color: var(--text-faint); }
@media (max-width: 900px) {
    .access-menu-order-editor { grid-template-columns: 1fr; }
}

.role-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.role-card { padding: 20px; display: flex; flex-direction: column; min-height: 270px; }
.role-card-top { display: flex; align-items: center; gap: 12px; }
.role-icon { width: 43px; height: 43px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; }
.role-card h3 { margin: 4px 0 0; font-size: 15px; }
.role-card > p { color: var(--text-soft); font-size: 12px; min-height: 38px; }
.permission-list { display: flex; flex-direction: column; gap: 7px; padding: 12px 0; border-top: 1px solid var(--border); }
.permission-list span { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; }
.permission-list svg { width: 14px; flex: 0 0 14px; color: var(--green); margin-top: 1px; }
.role-card footer { margin-top: auto; display: flex; justify-content: space-between; color: var(--text-faint); font-size: 10px; }
.audit-action { color: var(--primary); font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }

.alert { display: flex; gap: 10px; align-items: flex-start; border: 1px solid; border-radius: 10px; padding: 11px 13px; margin-bottom: 17px; font-size: 12px; }
.alert > span { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.alert p { margin: 1px 0 0; }
.alert-error { color: var(--red); border-color: color-mix(in srgb, var(--red) 23%, transparent); background: var(--red-soft); }
.alert-error > span { color: var(--red-soft); background: var(--red); }
.alert-success { color: var(--green); border-color: color-mix(in srgb, var(--green) 23%, transparent); background: var(--green-soft); }
.alert-success > span { color: var(--green-soft); background: var(--green); }
.alert-info { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 23%, transparent); background: var(--primary-soft); }
.alert-info > span { color: var(--primary-on); background: var(--theme-fill); }
.msl-submit-errors[hidden] { display: none !important; }
.missing-zone-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.msl-schedule-context { margin: 0 0 12px; }

.app-date-picker-field { position: relative; width: 100%; }
.app-date-picker-input { width: 100%; padding-right: 38px !important; cursor: pointer; }
.app-date-picker-field::after { content: ""; position: absolute; top: 50%; right: 13px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; opacity: .72; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm13 8H4v10h16V10ZM4 8h16V6h-3v2h-2V6H9v2H7V6H4v2Zm3 5h3v3H7v-3Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm13 8H4v10h16V10ZM4 8h16V6h-3v2h-2V6H9v2H7V6H4v2Zm3 5h3v3H7v-3Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.app-time-picker-field { position: relative; width: 100%; }
.app-time-picker-input { width: 100%; padding-right: 38px !important; cursor: pointer; font-variant-numeric: tabular-nums; }
.app-time-picker-field::after { content: ""; position: absolute; top: 50%; right: 13px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; opacity: .72; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 3h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 3h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.air-datepicker { --adp-width: 292px; --adp-font-family: Inter, "Segoe UI", sans-serif; --adp-font-size: 13px; --adp-background-color: var(--surface-raised); --adp-background-color-hover: var(--hover-color); --adp-background-color-active: var(--primary-soft); --adp-color: var(--text); --adp-color-secondary: var(--text-soft); --adp-accent-color: var(--button-primary); --adp-color-current-date: var(--button-primary); --adp-color-other-month: var(--text-faint); --adp-border-color: var(--border-strong); --adp-border-color-inner: var(--border); --adp-border-radius: 12px; --adp-cell-border-radius: 7px; --adp-cell-background-color-selected: var(--button-primary); --adp-cell-background-color-selected-hover: var(--primary-hover); --adp-btn-color: var(--button-primary); --adp-btn-color-hover: var(--text); --adp-nav-height: 42px; --adp-day-cell-height: 36px; --adp-month-cell-height: 48px; --adp-year-cell-height: 48px; --adp-btn-height: 38px; box-shadow: var(--shadow-md); }
.air-datepicker--pointer::after { background: var(--surface-raised); }
.air-datepicker-nav--title { font-weight: 750; }
.air-datepicker-nav--title i { color: var(--button-primary); }
.air-datepicker-body--day-name { color: var(--text-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- { color: var(--button-primary-on); }
.air-datepicker-cell.-current- { font-weight: 800; }
.air-datepicker-button { font-family: inherit; font-size: 11px; font-weight: 750; }
.air-datepicker-buttons { gap: 3px; padding: 6px; }
.air-datepicker.-only-timepicker- { --adp-width: 270px; }
.air-datepicker.-only-timepicker- .air-datepicker-time { padding: 18px 16px 14px; border-top: 0; }
.air-datepicker.-only-timepicker- .air-datepicker-time--current { margin-bottom: 14px; font-size: 28px; font-weight: 800; line-height: 1; color: var(--text); }
.air-datepicker.-only-timepicker- .air-datepicker-time--current-colon { color: var(--button-primary); }
.air-datepicker.-only-timepicker- .air-datepicker-time--row { position: relative; height: 42px; padding-top: 13px; }
.air-datepicker.-only-timepicker- .air-datepicker-time--row::before { position: absolute; top: -2px; left: 0; color: var(--text-soft); font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.air-datepicker.-only-timepicker- .air-datepicker-time--row:first-of-type::before { content: "Hour · 00–23"; }
.air-datepicker.-only-timepicker- .air-datepicker-time--row:last-of-type::before { content: "Minute · 00–59"; }
.air-datepicker.-only-timepicker- input[type="range"] { accent-color: var(--button-primary); cursor: pointer; }
.air-datepicker-button.app-time-picker-done-button { color: var(--button-primary-on); background: var(--button-primary); border-radius: 7px; }
.air-datepicker-button.app-time-picker-done-button:hover { color: var(--button-primary-on); background: var(--primary-hover); }
.form-errors ul { margin: 4px 0 0; padding-left: 17px; }
.toast-message { animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

.auth-page { background: var(--surface); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, .85fr) minmax(520px, 1.15fr); }
.login-panel { display: flex; flex-direction: column; justify-content: center; width: min(100%, 510px); margin: 0 auto; padding: 48px 62px; }
.login-brand { position: absolute; top: 34px; display: flex; align-items: center; gap: 11px; }
.login-brand .brand-mark.large { width: 42px; height: 42px; }
.login-brand > div:last-child { display: flex; flex-direction: column; line-height: 1.08; }
.login-brand strong { font-size: 19px; }
.login-brand span { color: var(--text-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
.login-copy h1 { margin: 6px 0 26px; font-size: 34px; letter-spacing: -1px; }
.login-copy p { color: var(--text-soft); margin: 0 0 26px; line-height: 1.7; }
.stack-form { display: flex; flex-direction: column; gap: 17px; max-width: 460px; }
.input-with-icon { position: relative; }
.input-with-icon > svg { position: absolute; left: 13px; top: 12px; width: 18px; color: var(--text-faint); }
.input-with-icon input { padding-left: 41px; padding-right: 42px; }
.password-toggle { position: absolute; right: 5px; top: 5px; width: 33px; height: 33px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; }
.password-toggle svg { width: 17px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: -4px; }
.remember-option { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; cursor: pointer; }
.remember-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.login-text-button { padding: 2px 0; border: 0; color: var(--primary); background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }
.login-text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-faint); font-size: 10px; margin-top: 22px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.login-visual { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; color: #f9f1f8; background: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--secondary) 82%, #ffffff) 0, transparent 28%), radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--primary) 55%, #110b10) 0, transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--primary) 35%, #110b10), var(--primary) 55%, color-mix(in srgb, var(--secondary) 45%, #110b10)); padding: 8vw; }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, black, transparent); }
.login-theme { position: absolute; top: 30px; right: 30px; color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); z-index: 3; }
.visual-content { position: relative; z-index: 2; max-width: 570px; }
.visual-tag { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #d9c5d6; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; backdrop-filter: blur(8px); }
.visual-content h2 { font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -3.2px; margin: 22px 0 18px; max-width: 600px; }
.visual-content > p { color: #d7c5d4; max-width: 470px; font-size: 16px; line-height: 1.7; }
.visual-card { margin-top: 44px; display: flex; align-items: center; gap: 14px; max-width: 430px; padding: 15px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.09); border-radius: 14px; backdrop-filter: blur(16px); }
.visual-card-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: #d9a8d2; background: rgba(255,255,255,.1); border-radius: 10px; }
.visual-card-icon svg { width: 22px; }
.visual-card div { display: flex; flex-direction: column; }
.visual-card span { color: #d4c1d1; font-size: 11px; }
.login-visual footer { position: absolute; left: 8vw; bottom: 30px; color: rgba(255,255,255,.45); font-size: 10px; }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -170px; top: -180px; }
.orbit-two { width: 760px; height: 760px; right: -330px; top: -300px; }

.password-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(19, 12, 19, .62); backdrop-filter: blur(8px); }
.password-modal { width: min(100%, 500px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 28px 80px rgba(18, 10, 18, .28); animation: password-modal-in .2s ease-out; }
.password-modal-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; color: var(--primary); background: var(--primary-soft); border-radius: 13px; }
.password-modal-icon svg { width: 23px; }
.password-modal h2 { margin: 5px 0 7px; font-size: 25px; letter-spacing: -.6px; }
.password-modal > p { margin: 0 0 21px; color: var(--text-soft); line-height: 1.65; }
.password-modal .stack-form { max-width: none; }
.modal-heading-row { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-close { width: 34px; height: 34px; display: grid; place-items: center; margin: -5px -5px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--text); background: var(--surface-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes password-modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.error-state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-state > span { color: var(--primary); font-size: 70px; font-weight: 800; line-height: 1; opacity: .25; }
.error-state h2 { margin: 10px 0 3px; }
.error-state p { color: var(--text-soft); margin: 0 0 20px; }
.sidebar-overlay { display: none; }

@media (max-width: 1180px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .master-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-card-grid { grid-template-columns: repeat(2, 1fr); }
    .form-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr); }
    .msl-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-panel { padding: 48px 42px; }
    .schedule-dashboard-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .schedule-dashboard-controls { grid-template-columns: 1fr 1fr; }
    .dashboard-timeline { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-md); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { position: fixed; inset: 0; background: rgba(18,12,18,.5); backdrop-filter: blur(2px); z-index: 25; }
    .sidebar-overlay.open { display: block; }
    .main-column { margin-left: 0; }
    .mobile-menu { display: inline-grid; }
    .content-grid.two-thirds { grid-template-columns: 1fr; }
    .form-layout { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .master-form-layout { grid-template-columns: 1fr; }
    .master-form-note { position: static; }
    .settings-navigation { overflow-x: auto; }
    .grid-height-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-preview { position: static; }
    .form-side { grid-row: auto; }
    .sticky-panel { position: static; }
    .role-card-grid { grid-template-columns: 1fr 1fr; }
    .login-shell { grid-template-columns: 1fr; }
    .login-panel { min-height: 100vh; }
    .login-visual { display: none; }
    .auth-page::before { content: ""; position: fixed; width: 300px; height: 300px; border-radius: 50%; right: -160px; top: -140px; background: var(--primary-soft); }
    .dashboard-day-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    :root { --topbar: 62px; }
    .topbar { padding: 0 16px; }
    .topbar h1 { font-size: 17px; }
    .eyebrow, .user-menu-copy { display: none; }
    .page-content { padding: 16px 12px; }
    .hero-row { align-items: flex-start; flex-direction: column; }
    .hero-row .button { width: 100%; }
    .stat-grid { grid-template-columns: 1fr; gap: 10px; }
    .stat-card { padding: 15px; }
    .filter-bar { flex-wrap: wrap; }
    .grid-toolbar-row { align-items: stretch; flex-wrap: wrap; }
    .grid-search-group { min-width: 100%; flex-basis: 100%; }
    .grid-toolbar-row > select, .grid-toolbar-row > .search-select { flex: 1; min-width: 135px; }
    .grid-toolbar-row .button { flex: 1; }
    .grid-toolbar-row .button-excel { margin-left: 0; }
    .grid-page-size { flex: 0 0 auto; }
    .search-box { flex-basis: 100%; max-width: none; }
    .filter-bar select { flex: 1; min-width: 135px; }
    .table-footer { flex-direction: column; gap: 2px; }
    .grid-pagination { align-items: center; flex-direction: row; overflow-x: auto; }
    .grid-footer-note { max-width: 240px; }
    .grid-group-bar { min-height: 46px; padding: 9px 12px; }
    .grid-active-bar { align-items: flex-start; flex-wrap: wrap; padding: 8px 12px; }
    .grid-filter-chips { flex-basis: 100%; }
    .grid-filter-popup { width: calc(100vw - 16px); left: 8px !important; }
    .form-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .form-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 91%, transparent); backdrop-filter: blur(10px); padding: 12px 0; z-index: 5; }
    .inline-form, .password-compose { flex-direction: column; align-items: stretch; }
    .standalone-action { margin-top: 0; }
    .role-card-grid { grid-template-columns: 1fr; }
    .gradient-options { grid-template-columns: 1fr; }
    .theme-component-colors { grid-template-columns: 1fr; }
    .settings-actions { flex-wrap: wrap; }
    .settings-navigation-item { min-width: 190px; }
    .master-card-grid { grid-template-columns: 1fr; }
    .schedule-form { grid-template-columns: 1fr; }
    .schedule-form-side { position: static; }
    .schedule-crew-picker { grid-template-columns: 1fr; }
    .schedule-flight-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sector-main { grid-template-columns: 30px 1fr 1fr; }
    .sector-main .field:first-of-type { grid-column: 2 / -1; }
    .trip-strip { grid-template-columns: 1fr; }
    .settings-save-status { flex-basis: 100%; order: -1; }
    .login-panel { padding: 80px 24px 32px; }
    .login-brand { top: 23px; }
    .login-copy h1 { font-size: 30px; }
    .password-modal-backdrop { padding: 14px; }
    .password-modal { max-height: calc(100vh - 28px); padding: 24px 20px; border-radius: 17px; }
    .schedule-dashboard-controls { grid-template-columns: 1fr; }
    .schedule-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-day-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-tabs-row { align-items: stretch; flex-direction: column; }
    .dashboard-tabs { overflow-x: auto; }
    .dashboard-tabs button { flex: 0 0 auto; }
    .dashboard-view-search { width: 100%; }
}