:root {
    color-scheme: light;
    --bg: #f5f2fb;
    --bg-wash: #ebe4f7;
    --surface: #ffffff;
    --surface-lavender: #fbf8ff;
    --surface-strong: #f0e9fb;
    --line: #ded3ef;
    --line-strong: #bba7df;
    --text: #211a32;
    --text-muted: #625772;
    --text-soft: #7a708b;
    --purple-950: #261047;
    --purple-850: #3c1b6e;
    --purple-700: #6d36c5;
    --purple-600: #8050df;
    --purple-500: #9368f0;
    --purple-200: #dfd1ff;
    --purple-100: #f1eaff;
    --magenta: #c026d3;
    --cyan: #0e7490;
    --green: #047857;
    --amber: #b45309;
    --red: #b91c1c;
    /* Canvas menus intentionally use a solid surface: plan detail must never
       compete with the controls placed over it. */
    --panel-bg: #ffffff;
    --canvas-menu-bg: #ffffff;
    --canvas-menu-header-bg: #fbf8ff;
    --panel-border: var(--line);
    --app-bg: var(--bg);
    --muted: var(--text-muted);
    --accent: var(--purple-700);
    --accent-strong: var(--purple-850);
    --danger: var(--red);
    --focus: var(--purple-600);
    --control-bg: var(--surface);
    --control-hover: var(--surface-lavender);
    --shadow: 0 18px 44px rgba(61, 37, 110, 0.12);
    --shadow-tight: 0 8px 20px rgba(61, 37, 110, 0.12);
    --shadow-persistent: 0 2px 8px rgba(61, 37, 110, 0.07);
    --radius: 8px;
    --modal-z: 1000;
    --modal-child-z: 1010;
    --modal-print-z: 1020;
    --modal-export-z: 1030;
}

/* Focused plan setup keeps the real canvas central and makes rough placement the obvious first action. */
.left-panel.is-plan-setup {
    bottom: auto;
    width: min(var(--designer-expanded-panel-width), calc(100% - 28px));
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    overflow: visible;
}

.designer-topbar.is-plan-setup {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto;
}

.designer-topbar.is-plan-setup .top-toolbar-shell {
    grid-column: 2;
    grid-row: 1;
}

.designer-topbar.is-plan-setup .top-toolbar {
    gap: 6px;
    padding-top: 2px;
}

.designer-topbar.is-plan-setup .toolbar-control-pill {
    padding: 5px;
}

.designer-topbar.is-plan-setup .toolbar-button {
    padding-right: 7px;
    padding-left: 7px;
}

.designer-topbar.is-plan-setup .toolbar-icon-button {
    padding: 0;
}

.canvas-stage.is-plan-setup {
    background:
        radial-gradient(circle at 72% 16%, rgba(128, 80, 223, 0.11), transparent 32%),
        linear-gradient(145deg, #fcfaff 0%, #f6f1fc 48%, #eee7f8 100%);
}

.plan-setup-palette {
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(123, 88, 182, 0.16);
    border-radius: 22px;
    color: var(--text);
    background: var(--canvas-menu-bg);
    box-shadow: var(--shadow-persistent);
}

.plan-setup-palette-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding: 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(100, 67, 151, 0.16);
    border-radius: 15px;
}

.plan-setup-palette-header > div {
    display: grid;
    gap: 3px;
}

.plan-setup-palette-header > p,
.plan-setup-shortcut-hint { grid-column: 1 / -1; }
.plan-setup-palette-header strong { font-size: 16px; line-height: 1.1; }
.plan-setup-palette-header p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.4; }

.plan-setup-shortcut-hint { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10px; font-weight: 800; }
.plan-setup-shortcut-hint kbd { min-width: 42px; padding: 3px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; color: var(--purple-850); background: #fff; font: inherit; text-align: center; }

.plan-setup-palette-collapse {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--purple-200);
    border-radius: 8px;
    color: var(--purple-850);
    background: rgba(255, 255, 255, 0.82);
}

.plan-setup-palette-collapse:hover,
.plan-setup-palette-collapse:focus-visible {
    outline: none;
    border-color: var(--purple-500);
    background: #ffffff;
}

.plan-setup-palette-collapse svg { width: 17px; height: 17px; }

.plan-setup-kicker {
    color: var(--purple-700);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.plan-setup-primary-tools {
    display: grid;
    gap: 8px;
    padding: 0;
}

.plan-setup-quick-area,
.plan-setup-trace-area {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid rgba(100, 67, 151, 0.16);
    border-radius: 14px;
    color: var(--text);
    text-align: left;
    background: #ffffff;
}

.plan-setup-quick-area.is-active,
.plan-setup-trace-area.is-active {
    border-color: var(--purple-500);
    background: linear-gradient(135deg, var(--purple-100), #fdfbff);
    box-shadow: 0 0 0 2px rgba(109, 54, 197, 0.08);
}

.plan-setup-quick-area:hover,
.plan-setup-trace-area:hover { border-color: var(--purple-700); }
.plan-setup-primary-tools button span:last-child { display: grid; gap: 2px; }
.plan-setup-primary-tools small { color: var(--text-muted); font-size: 10px; line-height: 1.3; }
.plan-setup-trace-area svg { width: 25px; height: 25px; margin: auto; color: var(--purple-700); }

.area-template-mark {
    display: block;
    width: 34px;
    height: 27px;
    margin: auto;
    border: 2px solid var(--purple-700);
    border-radius: 5px;
    background: rgba(147, 104, 240, 0.18);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}

.plan-setup-tip {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(100, 67, 151, 0.14);
    border-radius: 14px;
    color: #4d3c66;
    background: var(--purple-100);
    font-size: 11px;
    line-height: 1.4;
}
.plan-setup-tip svg { width: 17px; color: var(--purple-700); }

.plan-setup-area-list { display: flex; min-height: 0; max-height: 42dvh; flex-direction: column; overflow: auto; border: 1px solid rgba(100, 67, 151, 0.16); border-radius: 15px; background: rgba(255, 255, 255, 0.78); }
.plan-setup-area-list > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
.plan-setup-area-list > header span { min-width: 24px; padding: 2px 7px; border-radius: 999px; color: var(--purple-850); background: var(--purple-100); font-size: 11px; text-align: center; }

.plan-setup-area-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 6px;
    margin: 3px 8px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #faf8fd;
}
.plan-setup-area-row.is-selected { border-color: var(--purple-500); background: var(--purple-100); box-shadow: 0 0 0 2px rgba(109, 54, 197, 0.08); }
.plan-setup-area-color { width: 32px; height: 32px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; cursor: pointer; }
.plan-setup-area-color::-webkit-color-swatch-wrapper { padding: 0; }
.plan-setup-area-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.plan-setup-area-color::-moz-color-swatch { border: 0; border-radius: 5px; }
.plan-setup-area-color:hover { border-color: var(--purple-400); box-shadow: 0 0 0 2px rgba(109, 54, 197, 0.08); }
.plan-setup-area-color:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }
.plan-setup-area-color:disabled { cursor: not-allowed; opacity: 0.58; }
.plan-setup-area-name { min-width: 0; width: 100%; padding: 4px 2px; border: 0; border-radius: 4px; color: var(--text); background: transparent; font: inherit; font-size: 12px; font-weight: 800; }
.plan-setup-area-name:hover { background: rgba(255, 255, 255, 0.7); }
.plan-setup-area-name:focus { outline: 2px solid var(--purple-500); outline-offset: 1px; background: #fff; }
.plan-setup-area-lock { grid-column: 3; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 62px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--text-muted); background: #fff; font-size: 10px; font-weight: 850; }
.plan-setup-area-lock.is-locked { border-color: #d49731; color: #8a5708; background: #fff5dc; }
.plan-setup-area-lock svg { flex: 0 0 auto; width: 15px; }
.plan-setup-area-label-actions { grid-column: 2 / 4; display: flex; align-items: center; gap: 5px; padding-top: 2px; }
.plan-setup-area-label-actions > span { margin-right: auto; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-setup-area-label-actions button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--purple-850); background: #fff; }
.plan-setup-area-label-actions button:hover { border-color: var(--purple-300); background: var(--purple-100); }
.plan-setup-area-label-actions button:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }
.plan-setup-area-label-actions svg { width: 14px; height: 14px; }

.plan-setup-empty-areas { display: grid; justify-items: center; gap: 6px; margin: 8px; padding: 16px 10px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--text-muted); text-align: center; }
.plan-setup-empty-areas p { margin: 0; font-size: 11px; line-height: 1.45; }

.plan-setup-toolbar-actions { display: flex; align-items: center; margin-left: auto; }
.plan-setup-finish {
    color: #ffffff;
    border-color: transparent;
    background: var(--purple-700);
    box-shadow: 0 2px 6px rgba(109, 54, 197, 0.2);
}
.plan-setup-finish:hover { color: #ffffff; background: var(--purple-850); }
.plan-setup-auto-adjust { color: var(--purple-850); border-color: var(--purple-200); background: var(--purple-100); }
.area-template-mark + span { min-width: 0; }
.symbol-palette-pinned-action { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.symbol-palette-pinned-action .symbol-palette-textbox-tile { grid-column: auto; }
.symbol-palette-pinned-action .symbol-palette-crop-areas-tile,
.symbol-palette-pinned-action .symbol-palette-quick-area-tile,
.symbol-palette-pinned-action .symbol-palette-trace-area-tile,
.symbol-palette-pinned-action .symbol-palette-textbox-tile { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 2px; min-height: 46px; padding: 4px; font-size: 10px; text-align: center; }
.symbol-palette-crop-areas-tile svg { width: 17px; height: 17px; color: var(--purple-700); }
.symbol-palette-pinned-action .area-template-mark { width: 17px; height: 15px; border-width: 1px; }
.symbol-palette-trace-area-tile svg { width: 17px; height: 17px; color: var(--purple-700); }
.symbol-palette-pinned-action .symbol-mark { width: 17px; height: 17px; border-width: 2px; font-size: 11px; }
.symbol-palette-pinned-action .symbol-tile > span:last-child { font-size: 10px; }

.palette-drag-preview .area-template-mark { width: 38px; height: 30px; }

@media (max-width: 1600px) {
    .plan-setup-toolbar-actions { margin-left: 0; }
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Canvas"] .toolbar-button span,
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Plan"] .toolbar-button span { display: none; }
}

@media (max-width: 760px) {
    .left-panel.is-plan-setup { width: min(236px, calc(100% - 28px)); }
    .plan-setup-toolbar-actions .plan-setup-cancel { display: none; }
    .plan-setup-auto-adjust span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 18% 4%, rgba(147, 104, 240, 0.2), transparent 30rem),
        radial-gradient(circle at 86% 8%, rgba(192, 38, 211, 0.12), transparent 28rem),
        linear-gradient(160deg, var(--bg), #f9f7fe 42%, var(--bg-wash));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: 0;
}

button {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label.toolbar-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.16);
}

h1:focus {
    outline: none;
}

.designer-app {
    --designer-shell-gap: 14px;
    --designer-safe-top: 84px;
    --designer-safe-bottom: 14px;
    --designer-expanded-panel-width: 300px;
    --designer-left-panel-width: var(--designer-expanded-panel-width);
    --designer-right-panel-width: var(--designer-expanded-panel-width);
    --designer-side-rail-width: 96px;
    --designer-side-rail-compact-width: 88px;
    --designer-side-rail-icon-size: 16px;
    --designer-overlay-safe-left: 328px;
    --designer-overlay-safe-top: 84px;
    --designer-overlay-safe-right: 14px;
    --designer-overlay-safe-bottom: 14px;
    position: relative;
    display: block;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
}

.designer-topbar {
    position: absolute;
    top: 10px;
    right: var(--designer-shell-gap);
    left: var(--designer-shell-gap);
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 60px;
    padding: 0 10px;
    border: 1px solid rgba(119, 82, 178, 0.22);
    border-radius: var(--radius);
    background: var(--canvas-menu-bg);
    box-shadow: var(--shadow-persistent);
}

.designer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.designer-brand-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--purple-200);
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--purple-700), var(--magenta));
    box-shadow: 0 8px 18px rgba(128, 80, 223, 0.22);
    font-size: 1.05rem;
    font-weight: 850;
}

.designer-brand-logo {
    width: 34px;
    height: 34px;
    display: block;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 4px rgba(61, 37, 110, 0.12));
}

.designer-brand-text {
    min-width: 0;
}

.designer-topbar .designer-brand-text {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
}

.designer-brand-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.designer-topbar .designer-brand-title-row {
    grid-column: 1;
    grid-row: 1;
}

.designer-brand-context {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
}

.designer-topbar .designer-brand-context {
    display: contents;
}

.designer-project-name {
    overflow: hidden;
    min-width: 0;
    max-width: 112px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.designer-topbar .designer-project-name {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2px;
}

.designer-brand-text h1 {
    margin: 0;
    color: var(--purple-950);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.1;
}

.designer-brand-tagline {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.designer-topbar .designer-brand-tagline,
.designer-topbar .release-version {
    display: none;
}

.designer-save-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding-left: 6px;
    border-left: 1px solid var(--line);
}

.designer-topbar .designer-save-status {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    gap: 4px;
    padding-left: 0;
    border-left: 0;
}

.designer-save-summary {
    display: grid;
    justify-items: start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.designer-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.designer-save-actions > button {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
}

.designer-topbar .designer-save-summary > .status-pill {
    justify-self: start;
}

.designer-save-status-detail {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-version {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.designer-top-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.designer-account-menu {
    position: relative;
}

.designer-account-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: 188px;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--surface);
    cursor: pointer;
    list-style: none;
}

.designer-account-menu > summary::-webkit-details-marker { display: none; }
.designer-account-menu > summary:hover,
.designer-account-menu > summary:focus-visible { outline: none; border-color: var(--line-strong); background: var(--surface-lavender); }
.designer-account-menu > summary > i[data-lucide]:first-child > svg:first-child { width: 17px; height: 17px; }
.designer-account-name {
    overflow: hidden;
    max-width: 130px;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.designer-account-chevron { width: 11px; height: 11px; transition: transform 160ms ease; }
.designer-account-menu[open] .designer-account-chevron { transform: rotate(180deg); }

.designer-account-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 70;
    display: grid;
    gap: 4px;
    width: 210px;
    padding: 6px;
    border: 1px solid rgba(222, 211, 239, 0.92);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
    animation: menu-popover-enter 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.designer-account-scope {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.designer-account-scope span { color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.designer-account-scope strong { overflow: hidden; color: var(--purple-950); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.designer-account-identity {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.designer-account-identity strong,
.designer-account-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.designer-account-identity strong { color: var(--purple-950); font-size: 12px; }
.designer-account-identity span { color: var(--text-muted); font-size: 10px; font-weight: 700; }

.designer-account-action {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius);
    color: var(--text);
    background: transparent;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
}

.designer-account-action:hover,
.designer-account-action:focus-visible { outline: none; color: var(--purple-850); background: var(--surface-lavender); }
.designer-account-action svg { width: 16px; height: 16px; }

.designer-top-actions form,
.admin-nav form {
    margin: 0;
}

.account-settings-backdrop {
    z-index: 220;
    padding: 24px;
    background: rgba(38, 26, 57, 0.35);
    backdrop-filter: blur(7px);
}

.account-settings-modal {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(920px, calc(100vw - 48px));
    height: min(640px, calc(100vh - 48px));
    overflow: hidden;
    border: 1px solid var(--inspector-line);
    border-radius: 20px;
    color: var(--inspector-ink);
    background:
        linear-gradient(rgba(117, 82, 173, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 82, 173, 0.045) 1px, transparent 1px),
        #fbfafc;
    background-size: 24px 24px;
    box-shadow: 0 26px 70px rgba(37, 24, 57, 0.26);
}

.account-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--inspector-line);
    background: rgba(255, 255, 255, 0.94);
}

.account-settings-heading,
.account-settings-managed {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-settings-heading > div,
.account-settings-managed > span {
    display: grid;
    gap: 2px;
}

.account-settings-heading strong { color: var(--purple-950); font-size: 18px; }
.account-settings-heading span:not(.account-settings-icon) { color: var(--text-muted); font-size: 12px; font-weight: 650; }

.account-settings-icon,
.account-settings-nav-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(119, 82, 178, 0.26);
    border-radius: 14px;
    color: var(--purple-800);
    background: var(--surface-lavender);
}

.account-settings-icon svg,
.account-settings-nav-icon svg { width: 20px; height: 20px; }

.account-settings-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 0;
    padding: 14px;
    gap: 14px;
}

.account-settings-rail,
.account-settings-panel {
    min-height: 0;
    border: 1px solid var(--inspector-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.account-settings-rail { padding: 10px; }

.account-settings-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 66px;
    padding: 10px;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    color: var(--inspector-ink);
    background: #fff;
    text-align: left;
}

.account-settings-nav.is-active {
    border-color: rgba(119, 82, 178, 0.38);
    background: var(--surface-lavender);
    box-shadow: inset 3px 0 0 var(--purple-650);
}

.account-settings-nav > span:last-child { display: grid; gap: 2px; min-width: 0; }
.account-settings-nav strong { font-size: 13px; }
.account-settings-nav small { color: var(--text-muted); font-size: 10px; font-weight: 650; }

.account-settings-panel {
    overflow: auto;
    padding: 18px;
}

.account-settings-stage-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 2px 14px;
    border-bottom: 1px solid var(--inspector-line);
}

.account-settings-stage-header > div { display: grid; gap: 2px; }
.account-settings-stage-header > div > span { color: var(--purple-700); font-size: 10px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.account-settings-stage-header h2 { margin: 0; color: var(--purple-950); font-size: 24px; line-height: 1.1; }
.account-settings-stage-header p { max-width: 340px; margin: 0; color: var(--text-muted); font-size: 11px; font-weight: 650; line-height: 1.45; }

.account-settings-section {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--inspector-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
}

.account-settings-section-heading > div { display: grid; gap: 3px; }
.account-settings-section-heading strong { color: var(--purple-950); font-size: 14px; }
.account-settings-section-heading span { color: var(--text-muted); font-size: 11px; line-height: 1.4; }

.account-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-settings-field { display: grid; align-content: start; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 10px; font-weight: 800; }
.account-settings-field.is-wide { grid-column: 1 / -1; }
.account-settings-field > input,
.account-settings-password-input > input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(91, 55, 144, 0.38);
    border-radius: 12px;
    color: var(--inspector-ink);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(119, 82, 178, 0.06), 0 1px 2px rgba(37, 24, 57, 0.05);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.account-settings-field input:not(:disabled):hover { border-color: rgba(91, 55, 144, 0.58); }
.account-settings-field input:focus-visible { outline: 3px solid rgba(119, 82, 178, 0.2); border-color: var(--purple-650); background: #fff; }
.account-settings-field input:disabled { color: var(--text-soft); background: #f1eef4; cursor: not-allowed; }

.account-settings-password-input { position: relative; display: block; }
.account-settings-password-input > input { padding-right: 46px; }
.account-settings-password-input > button {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    color: var(--purple-750);
    background: transparent;
}
.account-settings-password-input > button:hover,
.account-settings-password-input > button:focus-visible { outline: none; background: var(--surface-lavender); }
.account-settings-password-input svg { width: 17px; height: 17px; }

.account-password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-password-requirements li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid var(--inspector-line);
    border-radius: 999px;
    color: var(--text-muted);
    background: #fbfafc;
    font-size: 10px;
    font-weight: 700;
}
.account-password-requirements svg { width: 12px; height: 12px; color: var(--purple-700); }
.account-password-requirements li.is-met { color: #14613f; border-color: rgba(32, 132, 87, 0.28); background: #effaf4; }
.account-password-requirements li.is-met svg { color: #1f8658; }

.account-settings-actions { display: flex; justify-content: flex-end; }
.account-settings-actions .primary-button,
.account-settings-confirm button { min-height: 44px; }

.account-settings-status,
.account-settings-managed,
.account-settings-confirm,
.account-settings-state {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
}

.account-settings-status.is-success { border-color: rgba(32, 132, 87, 0.28); color: #14613f; background: #effaf4; }
.account-settings-status.is-error,
.account-settings-state.is-error { border-color: rgba(177, 52, 67, 0.3); color: #8d2634; background: #fff2f3; }
.account-settings-managed { color: #57446e; background: #f8f4fd; }
.account-settings-managed > i[data-lucide] > svg { flex: 0 0 auto; width: 20px; height: 20px; }
.account-settings-managed small { color: var(--text-muted); font-size: 10px; font-weight: 650; line-height: 1.4; }
.account-settings-error { color: #a82f40; font-size: 10px; font-weight: 750; }

.account-settings-confirm,
.account-settings-discard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-color: rgba(160, 107, 20, 0.26);
    background: #fff9eb;
}
.account-settings-confirm > div { display: flex; gap: 8px; }
.account-settings-confirm > div:first-child { display: grid; gap: 3px; }

.account-settings-discard {
    position: absolute;
    inset: auto 18px 18px 18px;
    z-index: 2;
    padding: 14px;
    box-shadow: var(--shadow);
}
.account-settings-discard > div { display: flex; gap: 8px; }
.account-settings-discard > div:first-child { display: grid; gap: 2px; }

@media (max-width: 767px) {
    .modal-backdrop.account-settings-backdrop { padding: 0; }
    .account-settings-modal { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .account-settings-header { min-height: 64px; padding: 10px 12px; }
    .account-settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 10px; gap: 10px; }
    .account-settings-rail { padding: 6px; }
    .account-settings-nav { min-height: 52px; grid-template-columns: 34px minmax(0, 1fr); }
    .account-settings-nav-icon { width: 34px; height: 34px; border-radius: 10px; }
    .account-settings-nav small { display: none; }
    .account-settings-panel { padding: 12px; }
    .account-settings-stage-header { display: grid; gap: 8px; }
    .account-settings-stage-header p { max-width: none; }
    .account-settings-grid { grid-template-columns: minmax(0, 1fr); }
    .account-settings-field.is-wide { grid-column: auto; }
    .account-settings-confirm,
    .account-settings-discard { align-items: stretch; flex-direction: column; }
    .account-settings-confirm > div,
    .account-settings-discard > div { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .designer-account-chevron { transition: none; }
    .designer-account-popover { animation: none; }
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--purple-100);
    color: var(--purple-850);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.top-action-link,
.top-action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--purple-850);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.top-action-link:hover,
.top-action-button:hover {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.top-action-link svg,
.top-action-button svg {
    width: 15px;
    height: 15px;
}

.designer-main {
    position: absolute;
    inset: 0;
    interpolate-size: allow-keywords;
    z-index: 1;
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.left-panel,
.right-panel {
    position: absolute;
    top: var(--designer-safe-top);
    bottom: var(--designer-safe-bottom);
    z-index: 14;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
}

.canvas-plan-tools-toggle {
    position: absolute;
    top: var(--designer-safe-top);
    left: var(--designer-shell-gap);
    z-index: 31;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(123, 88, 182, 0.34);
    border-radius: var(--radius);
    color: #ffffff;
    background: var(--purple-700);
    box-shadow: var(--shadow-persistent);
}

.canvas-plan-tools-toggle:hover,
.canvas-plan-tools-toggle:focus-visible {
    outline: none;
    background: var(--purple-600);
}

.canvas-plan-tools-toggle svg { width: 18px; height: 18px; }

.left-panel {
    left: 14px;
    width: min(var(--designer-left-panel-width), calc(100% - 28px));
    height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    transform-origin: top left;
    transition: width 260ms cubic-bezier(0.2, 0.75, 0.2, 1), height 260ms cubic-bezier(0.2, 0.75, 0.2, 1), max-height 260ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.left-panel.is-collapsed {
    bottom: auto;
    width: 44px;
    height: 44px;
}

.left-panel.is-collapsed.is-symbol-rail {
    bottom: auto;
    width: min(var(--designer-side-rail-width), calc(100% - 28px));
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    overflow: visible;
}

.right-panel {
    right: 14px;
    width: min(var(--designer-right-panel-width), calc(100% - 28px));
    height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    transform-origin: top right;
    transition: width 260ms cubic-bezier(0.2, 0.75, 0.2, 1), height 260ms cubic-bezier(0.2, 0.75, 0.2, 1), max-height 260ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.symbol-palette-content {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    min-height: 0;
    max-height: none;
    overflow: auto;
    transition: opacity 180ms ease-in-out, max-height 200ms ease-in-out;
}

.symbol-palette.is-collapsed .symbol-palette-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.symbol-palette.is-collapsed {
    overflow: visible;
}

.symbol-palette-reopen {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(123, 88, 182, 0.34);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-tight);
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(12px);
}

.symbol-palette-reopen:hover,
.symbol-palette-reopen:focus-visible {
    outline: none;
    border-color: var(--purple-600);
    background: var(--surface-lavender);
}

.symbol-palette-reopen svg,
.symbol-palette-collapse svg {
    width: 16px;
    height: 16px;
}

.page-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 0 4px;
    overflow-x: auto;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    max-width: 150px;
    padding: 0 12px;
    border: 1px solid rgba(222, 211, 239, 0.96);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.page-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-tab:hover {
    border-color: var(--purple-300);
    color: var(--purple-850);
}

.page-tab.is-active {
    border-color: var(--purple-500);
    background: var(--purple-100);
    color: var(--purple-900);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.top-toolbar-shell {
    position: relative;
    min-width: 0;
    overflow: visible;
}

.top-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
    background: transparent;
    border-bottom: 0;
}

.top-toolbar:has(.toolbar-popover) {
    overflow: visible;
}

.toolbar-control-pill {
    display: grid;
    gap: 2px;
    min-width: max-content;
    padding: 3px 4px;
    border: 1px solid rgba(119, 82, 178, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 2px 7px rgba(61, 37, 110, 0.06);
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.toolbar-control-pill[aria-label="More"] { display: none; }

.toolbar-control-pill:hover {
    border-color: rgba(119, 82, 178, 0.34);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 3px 9px rgba(61, 37, 110, 0.08);
}

.toolbar-control-pill-header {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 12px;
    padding: 0 2px;
    color: var(--purple-850);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.toolbar-control-pill-header svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.25;
}

.toolbar-control-pill-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-button,
.secondary-button,
.primary-button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--control-bg);
    white-space: nowrap;
}

label.secondary-button {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toolbar-button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
}

.toolbar-control-pill .toolbar-button,
.top-toolbar > .designer-request-entry.toolbar-button {
    border-color: rgba(128, 80, 223, 0.14);
    background: rgba(251, 248, 255, 0.78);
    box-shadow: 0 1px 3px rgba(61, 37, 110, 0.05);
}

.toolbar-control-pill .toolbar-button:hover,
.top-toolbar > .designer-request-entry.toolbar-button:hover {
    border-color: rgba(128, 80, 223, 0.28);
    background: var(--purple-100);
}

.top-toolbar > .designer-request-entry.toolbar-button {
    align-self: flex-end;
    flex: 0 0 auto;
    margin-bottom: 4px;
}

.toolbar-icon-button {
    width: 34px;
    padding: 0;
}

.toolbar-chevron {
    width: 12px !important;
    height: 12px !important;
    margin-left: -2px;
}

.toolbar-button svg,
.secondary-button svg,
.icon-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

i[data-lucide][data-lucide-rendered] {
    display: contents;
}

.toolbar-button:hover,
.secondary-button:hover,
.icon-button:hover {
    background: var(--surface-lavender);
    border-color: var(--line-strong);
    color: var(--purple-850);
}

.toolbar-button:disabled,
.secondary-button:disabled,
.icon-button:disabled {
    color: var(--muted);
    background: #f8fafc;
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.62;
}

.toolbar-button.is-active {
    color: #ffffff;
    background: var(--purple-700);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(109, 54, 197, 0.2);
}

.toolbar-control-pill .toolbar-button.is-active {
    background: var(--purple-700);
}

.toolbar-button.has-active-options {
    border-color: var(--purple-400);
    color: var(--purple-850);
    background: var(--purple-100);
}

.toolbar-filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: var(--purple-700);
    font-size: 10px;
    font-weight: 900;
}

.canvas-filter-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: min(520px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 120px));
    overflow: auto;
    padding: 10px;
}

.canvas-filter-section { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.canvas-filter-section-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; color: var(--purple-900); background: var(--surface-lavender); font-size: 12px; font-weight: 900; text-align: left; }
.canvas-filter-section-toggle:hover { background: var(--purple-100); }
.canvas-filter-section-toggle svg { width: 15px; height: 15px; }
.canvas-filter-section-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 5px; }

.canvas-filter-menu-options,
.canvas-filter-type-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 5px;
}

.canvas-filter-type-list {
    max-height: 230px;
    overflow: auto;
    padding: 5px;
}

.canvas-filter-option,
.canvas-filter-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 7px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.canvas-filter-option:hover,
.canvas-filter-check:hover {
    background: var(--surface-lavender);
}

.canvas-filter-option svg {
    width: 15px;
    height: 15px;
    color: var(--purple-700);
}

.canvas-filter-check input {
    accent-color: var(--purple-700);
}

.canvas-filter-check small {
    color: var(--text-muted);
    font-weight: 800;
}

.canvas-filter-section .canvas-filter-check { grid-template-columns: 16px minmax(0, 1fr) auto; min-width: 0; padding: 0 5px; }
.canvas-filter-section .canvas-filter-check span { overflow: hidden; text-overflow: ellipsis; }

.canvas-filter-reset,
.canvas-filter-show-all {
    min-height: 32px;
    margin-top: 5px;
    border: 1px solid var(--purple-300);
    border-radius: 8px;
    color: var(--purple-850);
    background: var(--purple-100);
    font-size: 12px;
    font-weight: 850;
}

.canvas-filter-menu > .canvas-filter-reset { grid-column: 1 / -1; }

.toolbar-popover-root {
    position: relative;
}

.toolbar-menu-root {
    position: relative;
}

.toolbar-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 210px;
    padding: 12px;
    border: 1px solid rgba(222, 211, 239, 0.92);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    transform-origin: top center;
    animation: menu-popover-enter 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes menu-popover-enter {
    from { opacity: 0; transform: translateY(-5px) scaleY(0.96); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.toolbar-chevron {
    transition: transform 160ms ease, opacity 160ms ease;
}

.toolbar-popover-align-end,
.toolbar-menu-root-end > .toolbar-popover {
    right: 0;
    left: auto;
}

.save-options-menu,
.toolbar-action-menu {
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 6px;
    z-index: 70;
}

.save-menu-item,
.toolbar-menu-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius);
    color: var(--text);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.toolbar-menu-item:has(.toolbar-menu-state) {
    grid-template-columns: 18px minmax(0, 1fr) auto;
}

.save-menu-item:hover,
.save-menu-item:focus-visible,
.toolbar-menu-item:hover,
.toolbar-menu-item:focus-visible {
    outline: none;
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.save-menu-item svg,
.toolbar-menu-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.toolbar-menu-item.is-active {
    color: var(--purple-850);
    background: var(--purple-100);
}

.toolbar-menu-item:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.58;
}

.designer-canvas-context-menu {
    position: fixed;
    z-index: 120;
    display: grid;
    gap: 4px;
    min-width: 148px;
    padding: 6px;
    border: 1px solid rgba(222, 211, 239, 0.96);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.designer-canvas-context-menu-item {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius);
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.designer-canvas-context-menu-item:hover,
.designer-canvas-context-menu-item:focus-visible {
    outline: none;
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.designer-canvas-context-menu-item:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.58;
}

.toolbar-menu-state {
    color: var(--text-soft);
    font-size: 11px;
}

.toolbar-menu-divider {
    height: 1px;
    margin: 3px 4px;
    background: var(--line);
}

.canvas-options-menu {
    min-width: 230px;
}

.toolbar-menu-check,
.toolbar-menu-number {
    display: grid;
    gap: 8px;
    min-height: 34px;
    padding: 7px 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
}

.toolbar-menu-check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.toolbar-menu-number {
    grid-template-columns: 1fr 72px;
    align-items: center;
}

.toolbar-menu-number input {
    width: 72px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
}

.grid-options-popover {
    display: grid;
    gap: 10px;
}

.topbar-grid-options-popover {
    top: calc(100% + 8px);
    right: 42px;
    left: auto;
    z-index: 70;
}

.toolbar-check,
.toolbar-number {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.toolbar-check {
    grid-template-columns: auto 1fr;
    align-items: center;
    text-transform: none;
}

.toolbar-number input {
    height: 34px;
    min-width: 0;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
}

.file-input {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wire-button {
    min-width: 68px;
}

.wire-swatch {
    display: inline-block;
    width: 22px;
    height: var(--wire-width, 3px);
    min-height: 2px;
    border-radius: 999px;
    background: var(--wire-color);
}

.left-panel,
.right-panel,
.symbol-palette,
.object-list-panel {
    min-height: 0;
}

.designer-app[data-shell-mode="drawer"] .left-panel:not(.is-collapsed),
.designer-app[data-shell-mode="drawer"] .right-panel:not(.is-collapsed),
.designer-app[data-shell-mode="canvas-first"] .left-panel:not(.is-collapsed),
.designer-app[data-shell-mode="canvas-first"] .right-panel:not(.is-collapsed) {
    z-index: 30;
}

.designer-app[data-shell-mode="drawer"] .left-panel:not(.is-collapsed) .symbol-palette,
.designer-app[data-shell-mode="drawer"] .left-panel:not(.is-collapsed) .plan-setup-palette,
.designer-app[data-shell-mode="drawer"] .right-panel .contextual-inspector,
.designer-app[data-shell-mode="canvas-first"] .left-panel:not(.is-collapsed) .symbol-palette,
.designer-app[data-shell-mode="canvas-first"] .left-panel:not(.is-collapsed) .plan-setup-palette,
.designer-app[data-shell-mode="canvas-first"] .right-panel .contextual-inspector {
    box-shadow: 0 18px 42px rgba(37, 22, 67, 0.2);
}

.left-panel.is-plan-setup.is-collapsed .plan-setup-palette { display: none; }

.left-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    background: transparent;
    border-right: 0;
}

.right-panel {
    display: block;
    overflow: hidden;
    background: transparent;
}

.symbol-palette,
.object-list-panel {
    height: 100%;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    background: var(--canvas-menu-bg);
    border: 1px solid rgba(123, 88, 182, 0.16);
    border-radius: var(--radius);
    box-shadow: var(--shadow-persistent);
    overflow: auto;
}

.symbol-palette {
    --inspector-line: rgba(100, 67, 151, 0.16);
    --inspector-soft: #f7f3fc;
    --inspector-ink: #241b34;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    color: var(--inspector-ink);
    background: #fffefa;
    border-color: rgba(123, 88, 182, 0.2);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(42, 26, 68, 0.18);
    overflow: hidden;
    position: relative;
}

.symbol-palette-title {
    justify-content: space-between;
    gap: 10px;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
}

.symbol-palette-collapse {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: -5px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--purple-850);
    background: var(--surface-lavender);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.symbol-palette-collapse svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.5;
}

.symbol-palette-collapse.is-expanded {
    border-color: var(--purple-200);
}

.symbol-palette-collapse.is-collapsed {
    border-color: var(--purple-700);
    color: #ffffff;
    background: var(--purple-700);
    box-shadow: 0 4px 10px rgba(109, 54, 197, 0.24);
}

.symbol-palette-collapse.is-collapsed svg {
    animation: symbol-palette-open-cue 180ms ease-out;
}

.symbol-palette-collapse:hover,
.symbol-palette-collapse:focus-visible {
    outline: none;
    border-color: var(--purple-600);
    color: #ffffff;
    background: var(--purple-600);
    transform: translateY(-1px);
}

@keyframes symbol-palette-open-cue {
    from { transform: translateX(-3px); opacity: 0.45; }
    to { transform: translateX(0); opacity: 1; }
}

.symbol-palette-quick-pick {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 18;
    display: grid;
    gap: 7px;
    width: min(340px, calc(100vw - 28px));
    padding: 8px;
    border: 1px solid rgba(123, 88, 182, 0.28);
    border-radius: var(--radius);
    background: var(--canvas-menu-bg);
    box-shadow: 0 16px 34px rgba(37, 22, 67, 0.18);
}

.symbol-palette-quick-search {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple-700);
    background: #ffffff;
}

.symbol-palette-quick-search:focus-within {
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.16);
}

.symbol-palette-quick-search svg { width: 15px; height: 15px; }

.symbol-palette-quick-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}

.symbol-palette-quick-results {
    display: grid;
    gap: 5px;
    max-height: min(52vh, 420px);
    padding-right: 2px;
    overflow: auto;
}

.symbol-quick-pick-item {
    min-height: 36px;
}

.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;
}

.symbol-palette-sticky-tools {
    position: sticky;
    top: 36px;
    z-index: 2;
    background: var(--canvas-menu-bg);
}

.symbol-palette-pinned-action {
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--line);
}

.symbol-palette-textbox-tile {
    width: 100%;
    background: var(--surface-lavender);
}

.symbol-palette-sticky-tools .panel-search {
    gap: 2px;
    min-height: 52px;
    padding: 3px 8px;
}

.symbol-palette-sticky-tools .panel-search span { font-size: 9px; }
.symbol-palette-sticky-tools .panel-search input { height: 32px; padding: 0 8px; font-size: 12px; }

.panel-title {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    color: var(--purple-850);
    background: var(--canvas-menu-header-bg);
    border-bottom: 1px solid var(--panel-border);
}

.panel-title.symbol-palette-title {
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
}

.panel-title-actions { display: inline-flex; align-items: center; gap: 2px; }
.panel-pin-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: var(--purple-850); background: transparent; }
.panel-pin-toggle:hover, .panel-pin-toggle:focus-visible { outline: none; background: var(--purple-100); }
.panel-pin-toggle.is-active { color: #ffffff; background: var(--purple-700); }
.panel-pin-toggle svg { width: 15px; height: 15px; }
.panel-search {
    display: grid;
    gap: 5px;
    padding: 10px;
    background: var(--canvas-menu-bg);
}

.panel-search span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.panel-search input {
    width: 100%;
    height: 34px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
}

.panel-search input:focus {
    outline: 0;
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.16);
}

.palette-group {
    padding: 12px 10px 4px;
}

.palette-section,
.palette-subgroup {
    display: grid;
    gap: 6px;
    padding: 6px 8px;
}

.palette-section + .palette-section {
    border-top: 1px solid var(--line);
}

.palette-subgroup {
    padding: 0 0 0 8px;
    border-left: 1px solid var(--line);
}

.palette-toggle {
    position: relative;
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 5px 7px 5px 11px;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface-lavender);
    box-shadow: inset 0 -1px 0 var(--line);
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}

.palette-toggle::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 2px;
    width: 3px;
    border-radius: 999px;
    background: var(--line-strong);
}

.palette-toggle[aria-expanded="true"] {
    color: var(--purple-850);
    background: var(--purple-100);
}

.palette-toggle[aria-expanded="true"]::before {
    background: var(--purple-600);
}

.palette-toggle:hover,
.palette-toggle:focus-visible {
    outline: none;
    color: var(--purple-850);
    background: var(--purple-100);
}

.palette-toggle.is-system {
    color: var(--purple-850);
    background: var(--surface-lavender);
    box-shadow: inset 0 -1px 0 var(--line);
}

.palette-toggle.is-system[aria-expanded="true"] {
    background: var(--purple-100);
}

.palette-toggle.is-subgroup {
    color: var(--text-muted);
    background: transparent;
}

.palette-toggle.is-subgroup[aria-expanded="true"] {
    color: var(--purple-850);
    background: var(--surface-lavender);
}

/* The panel surface grows from an edge control that remains part of its header. */
.side-panel-toggle.side-panel-toggle {
    position: absolute;
    top: 10px;
    z-index: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

.side-panel-toggle.is-left { left: 10px; }
.side-panel-toggle.is-right { right: 10px; }
.side-panel-toggle svg { width: 16px; height: 16px; }

.symbol-palette-header,
.contextual-inspector-header {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    min-width: 0;
    overflow: hidden;
    gap: 8px;
    margin: 8px;
    padding: 8px;
}

.inspector-rail-heading .side-panel-toggle.side-panel-toggle {
    width: 32px;
    height: 32px;
}

.inspector-context-card.symbol-palette-header.is-panel {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-left: 48px;
}

.inspector-rail-heading.symbol-palette-header.is-rail {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
    padding-left: 48px;
}

.contextual-inspector-header.inspector-context-card.is-panel {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding-right: 48px;
}

.contextual-inspector-header.inspector-rail-heading.is-rail {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
    padding-right: 48px;
}

.inspector-context-copy,
.inspector-rail-copy,
.symbol-palette-rail-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.inspector-rail-copy,
.symbol-palette-rail-copy {
    justify-items: center;
    text-align: center;
}

@keyframes panel-content-reveal-left {
    from { opacity: 0; transform: translateX(-8px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes panel-content-reveal-right {
    from { opacity: 0; transform: translateX(8px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.symbol-palette:not(.is-collapsed) .symbol-palette-content {
    animation: panel-content-reveal-left 220ms 60ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.contextual-inspector[data-inspector-layout="panel"] .inspector-section-list,
.contextual-inspector[data-inspector-layout="panel"] .inspector-read-only-note {
    animation: panel-content-reveal-right 220ms 60ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.palette-caret {
    display: inline-grid;
    place-items: center;
    color: currentColor;
    font-weight: 900;
}

.palette-caret svg {
    width: 15px;
    height: 15px;
    transition: transform 180ms ease;
}

.animated-disclosure {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms ease, transform 200ms ease;
}

.animated-disclosure.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.animated-disclosure-content {
    min-height: 0;
    overflow: hidden;
}

.palette-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 10px;
    font-weight: 850;
}

.palette-group h2 {
    margin: 0 4px 8px;
    font-size: 12px;
    font-weight: 850;
    color: var(--text-muted);
    text-transform: uppercase;
}

.symbol-list {
    display: grid;
    gap: 4px;
}

.symbol-tile {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    min-height: 36px;
    padding: 4px 6px;
    border: 0;
    border-bottom: 1px solid rgba(222, 211, 239, 0.72);
    border-radius: 0;
    color: var(--text);
    background: transparent;
    cursor: grab;
    text-align: left;
}

.symbol-list > .symbol-tile:last-child {
    border-bottom-color: transparent;
}

.symbol-palette-pinned-action .symbol-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-lavender);
}

.symbol-tile:active {
    cursor: grabbing;
}

body.is-palette-dragging,
body.is-palette-dragging * {
    cursor: grabbing !important;
}

.palette-drag-preview {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    padding: 6px;
    border: 1px solid rgba(91, 76, 120, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 30px rgba(23, 16, 39, 0.18);
    opacity: 0.86;
    pointer-events: none;
}

.symbol-tile > span:last-child {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-tile-label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.symbol-tile-label > span,
.symbol-tile-label > small {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-tile-label > span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.12;
}

.symbol-tile-label > small {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.symbol-tile:hover {
    background: var(--surface-lavender);
    border-color: var(--line-strong);
    color: var(--purple-850);
}

.symbol-tile.is-active {
    border-color: var(--line);
    background: var(--purple-100);
    box-shadow: inset 3px 0 0 var(--accent);
}

.symbol-tile:disabled,
.symbol-tile.is-disabled {
    cursor: default;
    opacity: 0.56;
}

.wire-tile {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 36px;
}

.wire-path-mark {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 18px;
}

.wire-path-mark::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    height: var(--wire-width, 3px);
    border-radius: 999px;
    background: var(--wire-color);
    transform: translateY(-50%);
}

.wire-tile-label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.wire-tile-label > span,
.wire-tile-label > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wire-tile-label > span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}

.wire-tile-label > small {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.fixture-symbol-tile {
    align-items: center;
}

.fixture-tile-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.fixture-tile-label strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 20px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.fixture-tile-label span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.symbol-mark {
    position: relative;
    width: 18px;
    height: 18px;
    border: 3px solid var(--symbol-color);
    background: color-mix(in srgb, var(--symbol-color) 14%, white);
    box-sizing: border-box;
}

.symbol-mark.is-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: var(--line-strong);
    color: var(--purple-850);
    background: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.object-list-title {
    justify-content: space-between;
}

.schedule-modal {
    position: relative;
    width: min(1280px, calc(100vw - 48px));
    height: min(780px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    display: grid;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
    border: 1px solid rgba(123, 88, 182, 0.24);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.schedule-modal-header {
    min-height: 56px;
}

.schedule-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.schedule-heading span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.schedule-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: #fbf8ff;
    overflow-x: auto;
}

.schedule-builder-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.schedule-builder-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.schedule-builder-copy strong {
    color: var(--purple-950);
    font-size: 13px;
    font-weight: 900;
}

.schedule-builder-copy span,
.schedule-dirty-state {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.schedule-builder-modes {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
}

.schedule-mode {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
}

.schedule-mode.is-active {
    color: #ffffff;
    background: var(--purple-700);
}

.schedule-review-panel,
.schedule-close-choice {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.schedule-review-panel > div,
.schedule-close-choice {
    color: var(--text);
}

.schedule-review-panel > div {
    display: grid;
    gap: 3px;
}

.schedule-review-panel strong,
.schedule-close-choice strong {
    color: var(--purple-950);
    font-size: 13px;
    font-weight: 900;
}

.schedule-review-panel span,
.schedule-close-choice span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.schedule-review-panel ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schedule-review-panel li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
}

.schedule-review-panel li.is-blocker {
    border-color: rgba(185, 28, 28, 0.28);
    background: #fff1f2;
}

.schedule-review-panel li.is-warning {
    border-color: rgba(180, 83, 9, 0.28);
    background: #fffbeb;
}

.schedule-review-ready {
    margin: 0;
    color: #166534;
    font-size: 13px;
    font-weight: 850;
}

.schedule-close-choice {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    background: #fffbeb;
}

.schedule-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.schedule-tab-count {
    min-width: 22px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 11px;
    font-weight: 900;
}

.schedule-tab.is-active {
    color: #ffffff;
    border-color: transparent;
    background: var(--purple-700);
}

.schedule-tab.is-active .schedule-tab-count {
    color: var(--purple-850);
    background: #ffffff;
}

.schedule-modal-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.schedule-active-table {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.schedule-active-table strong {
    color: var(--purple-950);
    font-size: 14px;
    font-weight: 900;
}

.schedule-active-table span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.schedule-search {
    width: min(320px, 42vw);
    min-width: 220px;
    height: 36px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text-muted);
}

.schedule-search svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.schedule-search input {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}

.schedule-table-wrap {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    background: #fbf8ff;
    overflow: auto;
}

.project-equipment-schedule {
    display: grid;
    gap: 0.7rem;
    min-width: min(100%, 54rem);
}

.project-equipment-type {
    border: 1px solid var(--border-color, #ddd6fe);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.project-equipment-type > header {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(10rem, auto) auto auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
}

.project-equipment-expand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.project-equipment-designation {
    min-width: 2.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.35rem;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 800;
    text-align: center;
}

.project-equipment-details {
    display: grid;
    gap: 0.75rem;
    padding: 0 0.85rem 0.85rem;
    border-top: 1px solid #ede9fe;
}

.project-equipment-details dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0;
}

.project-equipment-details dl div {
    display: grid;
    gap: 0.2rem;
}

.project-equipment-details dt {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-equipment-details dd {
    margin: 0;
}

.project-equipment-type-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    gap: 0.65rem;
}

.project-equipment-type-fields label {
    display: grid;
    gap: 0.3rem;
    color: #4b5563;
    font-size: 0.76rem;
    font-weight: 800;
}

.project-equipment-type-fields input {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.42rem 0.55rem;
    background: #fff;
    color: #111827;
}

.project-equipment-instance-table {
    min-width: 42rem;
}

.project-equipment-transfer {
    position: absolute;
    inset: 5.5rem max(1rem, 8%) 4.5rem;
    z-index: 8;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
    border: 1px solid #c4b5fd;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.2rem 3rem rgba(30, 18, 61, 0.25);
}

.project-equipment-transfer > header,
.project-equipment-transfer > footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.project-equipment-transfer > header div,
.project-equipment-transfer fieldset,
.project-equipment-transfer label,
.project-equipment-transfer-preview {
    display: grid;
    gap: 0.4rem;
}

.project-equipment-transfer fieldset {
    max-height: 13rem;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    padding: 0.75rem;
}

.project-equipment-transfer fieldset label {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 0.55rem;
}

.project-equipment-transfer-preview {
    padding: 0.75rem;
    border-radius: 0.65rem;
    background: #f5f3ff;
}

.schedule-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    border: 1px solid var(--line);
    background: #ffffff;
    font-size: 12px;
}

.schedule-table--rooms {
    min-width: 760px;
}

.schedule-table--fixtures,
.schedule-table--loads,
.schedule-table--keypads {
    min-width: 1240px;
}

.equipment-schedule-table {
    min-width: 1780px;
}

.schedule-issues-table {
    min-width: 1180px;
}

.schedule-table th,
.schedule-table td {
    padding: 6px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.schedule-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--purple-850);
    background: #f2ebff;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.schedule-table input,
.schedule-table select {
    width: 100%;
    min-width: 90px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.schedule-table select {
    color: var(--text);
}

.schedule-table .schedule-code-input {
    min-width: 54px;
    text-align: center;
    font-weight: 850;
    text-transform: uppercase;
}

.schedule-table .schedule-color-input {
    min-width: 46px;
    padding: 2px;
}

.schedule-derived-quantity,
.schedule-placed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--purple-850);
    background: #f8f4fd;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.schedule-placed-count {
    min-width: 32px;
    background: var(--purple-100);
    font-variant-numeric: tabular-nums;
}

.schedule-table button[data-delete-blocked="true"] {
    cursor: help;
    opacity: 0.72;
}

.schedule-empty-row td {
    height: 72px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 750;
    text-align: center;
}

.schedule-table td:last-child,
.schedule-table th:last-child {
    width: 42px;
    text-align: center;
}

@media (max-width: 720px) {
    .schedule-table-wrap {
        overflow: auto;
    }

    .schedule-table,
    .schedule-table--rooms,
    .schedule-table--fixtures,
    .schedule-table--loads,
    .schedule-table--keypads,
    .equipment-schedule-table,
    .schedule-issues-table {
        display: block;
        min-width: 0;
        border: 0;
        background: transparent;
    }

    .schedule-table thead {
        display: none;
    }

    .schedule-table tbody {
        display: grid;
        gap: 10px;
    }

    .schedule-table tr {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #ffffff;
    }

    .schedule-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    .schedule-table td:last-child {
        width: auto;
        text-align: right;
    }

    .schedule-table input,
    .schedule-table select {
        min-width: 0;
    }

    .schedule-empty-row td {
        height: auto;
        padding: 12px;
        text-align: left;
    }
}

.schedule-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-lavender);
}

.schedule-actions .schedule-dirty-state {
    margin-right: auto;
}

.area-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.object-groups {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.object-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.object-group-toggle {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-lavender);
    color: var(--purple-850);
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}

.object-group-caret {
    display: inline-grid;
    place-items: center;
    color: var(--text-soft);
    font-weight: 900;
}

.object-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--purple-200);
    border-radius: 999px;
    color: var(--purple-850);
    background: var(--purple-100);
    font-size: 12px;
}

.object-table-wrap {
    overflow: auto;
}

.object-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    background: #ffffff;
}

.object-table th,
.object-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #ece5f6;
    vertical-align: top;
}

.object-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--purple-850);
    background: #f5efff;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.object-table th:nth-child(1),
.object-table td:nth-child(1) {
    width: 34%;
}

.object-table th:nth-child(2),
.object-table td:nth-child(2) {
    width: 20%;
}

.object-table th:nth-child(3),
.object-table td:nth-child(3) {
    width: 20%;
}

.object-table th:nth-child(4),
.object-table td:nth-child(4) {
    width: 26%;
}

.object-table tbody tr {
    cursor: pointer;
}

.object-table tbody tr:hover {
    background: #f8f2ff;
}

.object-table tbody tr.is-selected {
    background: var(--purple-100);
    box-shadow: inset 3px 0 0 var(--purple-700);
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 26px;
    padding: 0;
    border: 0;
    color: var(--purple-850);
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.table-sort-button span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
}

.object-kind {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-bottom: 5px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
    background: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.object-kind.is-symbol {
    border-color: var(--purple-200);
    color: var(--purple-850);
    background: var(--purple-100);
}

.object-kind.is-wire {
    border-color: #f2b2b2;
    color: #9b1c1c;
}

.object-kind.is-area {
    border-color: #93c5fd;
    color: #075985;
    background: #eff6ff;
}

.object-kind.is-label {
    border-color: #d9d2e6;
    color: var(--text-muted);
    background: #f1eef7;
}

.object-type {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
}

.object-id,
.object-label {
    display: block;
    line-height: 1.25;
}

.object-id {
    color: var(--purple-850);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.object-label {
    overflow-wrap: anywhere;
}

.object-text-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    font: inherit;
    resize: vertical;
}

.object-text-input.is-compact {
    min-height: 32px;
    resize: vertical;
}

.object-text-input:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.16);
    outline-offset: 1px;
    border-color: var(--accent);
}

.canvas-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 255, 0.94)),
        linear-gradient(90deg, rgba(128, 80, 223, 0.08), rgba(192, 38, 211, 0.04));
    box-shadow: none;
    height: 100%;
}

.canvas-filter-indicator {
    position: absolute;
    z-index: 12;
    width: 260px;
    max-width: min(280px, calc(100% - var(--designer-overlay-safe-left) - var(--designer-overlay-safe-right) - 16px));
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 14px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(67, 34, 110, 0.18);
    backdrop-filter: blur(14px);
}

.canvas-filter-indicator.is-collapsed {
    width: max-content;
    border-radius: 999px;
}

.canvas-filter-indicator-header {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 3px 5px;
}

.canvas-filter-drag-handle,
.canvas-filter-summary,
.canvas-filter-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 0;
    color: inherit;
    background: transparent;
}

.canvas-filter-drag-handle {
    width: 28px;
    cursor: grab;
    touch-action: none;
}

.canvas-filter-drag-handle:active { cursor: grabbing; }
.canvas-filter-drag-handle svg,
.canvas-filter-expand svg { width: 15px; height: 15px; }

.canvas-filter-summary {
    flex: 1;
    gap: 7px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.canvas-filter-summary svg { width: 16px; height: 16px; color: var(--purple-700); }
.canvas-filter-expand { width: 30px; }

.canvas-filter-indicator-body {
    display: grid;
    gap: 5px;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--line);
}

.canvas-filter-indicator-body > strong {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.canvas-filter-hidden-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 750;
}

.canvas-filter-hidden-row span:last-child {
    color: var(--text-muted);
}

.canvas-empty-state {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    gap: 6px;
    width: min(320px, calc(100% - 64px));
    padding: 14px 16px;
    border: 1px dashed rgba(128, 80, 223, 0.38);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: var(--shadow-tight);
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(8px);
}

.canvas-empty-state strong {
    color: var(--purple-850);
    font-size: 13px;
    font-weight: 850;
}

.canvas-empty-state span {
    font-size: 12px;
    line-height: 1.35;
}

.canvas-host {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(109, 54, 197, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(109, 54, 197, 0.06) 1px, transparent 1px),
        #fbf8ff;
    background-size: 24px 24px;
}

.canvas-legend {
    grid-row: 1;
    width: 100%;
    max-height: 50vh;
    overflow: auto;
    border: 1px solid rgba(17, 24, 39, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-persistent);
    scrollbar-gutter: stable;
}

.canvas-legend-overlay {
    overscroll-behavior: contain;
    --inspector-line: rgba(100, 67, 151, 0.16);
    --inspector-ink: #241b34;
    --legend-type-column: 80px;
    --legend-label-column: 152px;
    --legend-count-column: 56px;
    --legend-row-height: 36px;
    position: absolute;
    z-index: 13;
    max-width: min(560px, calc(100% - var(--designer-overlay-safe-left) - var(--designer-overlay-safe-right)));
    max-height: calc(100% - var(--designer-overlay-safe-top) - var(--designer-overlay-safe-bottom));
    overflow: auto;
    border: 1px solid rgba(123, 88, 182, 0.18);
    border-radius: 10px;
    background: var(--canvas-menu-bg);
    box-shadow: var(--shadow-persistent);
}

.canvas-legend-overlay-header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 28px 28px;
    align-items: center;
    min-height: 38px;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-bottom: 1px solid var(--line);
    cursor: grab;
    touch-action: none;
}

.canvas-legend-overlay-header:active { cursor: grabbing; }
.canvas-legend-overlay.is-dragging { user-select: none; will-change: left, top; }
.canvas-legend-overlay.is-resizing { user-select: none; will-change: width, left, top; }
.canvas-legend-overlay.is-collapsed { overflow: hidden; }
.canvas-legend-overlay.is-collapsed .canvas-legend-overlay-header { border-bottom: 0; }

.canvas-legend-overlay-header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.canvas-legend-drag-handle,
.canvas-legend-pin,
.canvas-legend-collapse,
.canvas-legend-clear {
    display: inline-grid;
    place-items: center;
    min-height: 28px;
    border: 0;
    border-radius: 8px;
    color: var(--purple-850);
    background: transparent;
}

.canvas-legend-drag-handle {
    width: 28px;
    cursor: grab;
    touch-action: none;
}

.canvas-legend-drag-handle:active { cursor: grabbing; }
.canvas-legend-drag-handle:hover,
.canvas-legend-drag-handle:focus-visible,
.canvas-legend-pin:hover,
.canvas-legend-pin:focus-visible,
.canvas-legend-collapse:hover,
.canvas-legend-collapse:focus-visible,
.canvas-legend-clear:hover,
.canvas-legend-clear:focus-visible { background: var(--purple-100); }

.canvas-legend-drag-handle svg { width: 15px; height: 15px; }
.canvas-legend-pin { width: 28px; }
.canvas-legend-pin svg { width: 15px; height: 15px; }
.canvas-legend-collapse { width: 28px; }
.canvas-legend-collapse svg { width: 15px; height: 15px; }

.canvas-legend-overlay-tools {
    display: flex;
    gap: 6px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
}

.canvas-legend-overlay-tools input {
    min-width: 0;
    flex: 1;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    font-size: 12px;
}

.canvas-legend-clear { padding: 0 7px; font-size: 11px; font-weight: 850; }

.canvas-legend-overlay-rows { display: grid; }
.canvas-legend-row-viewport {
    display: grid;
    max-height: calc(var(--legend-viewport-rows) * var(--legend-row-height));
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: auto;
}
.canvas-legend-row-viewport.is-scrollable {
    overflow-y: auto;
    scrollbar-color: rgba(109, 54, 197, 0.55) rgba(222, 211, 239, 0.35);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}
.canvas-legend-row-viewport.is-scrollable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.canvas-legend-row-viewport.is-scrollable::-webkit-scrollbar { width: 8px; }
.canvas-legend-row-viewport.is-scrollable::-webkit-scrollbar-track { background: rgba(222, 211, 239, 0.35); }
.canvas-legend-row-viewport.is-scrollable::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(109, 54, 197, 0.55);
    background-clip: padding-box;
}
.canvas-legend-overlay-row {
    display: grid;
    grid-template-columns: var(--legend-type-column) var(--legend-label-column) var(--legend-count-column);
    align-items: center;
    min-height: var(--legend-row-height);
    gap: 8px;
    padding: 0 8px;
    border-top: 0;
    border-bottom: 1px solid rgba(222, 211, 239, 0.72);
    color: var(--text);
    font-size: 12px;
    text-align: left;
    overflow: hidden;
}

.canvas-legend-overlay-row > [role="cell"],
.canvas-legend-overlay-row > [role="columnheader"] {
    min-width: 0;
    overflow: hidden;
}
.canvas-legend-overlay-row.is-selectable {
    width: 100%;
    height: var(--legend-row-height);
    max-height: var(--legend-row-height);
    border: 0;
    border-bottom: 1px solid rgba(222, 211, 239, 0.72);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.canvas-legend-overlay-row.is-selectable:last-child {
    border-bottom-color: transparent;
}
.canvas-legend-overlay-row.is-selectable:hover,
.canvas-legend-overlay-row.is-selectable:focus-within {
    background: rgba(109, 54, 197, 0.09);
    outline: none;
}

.canvas-legend-overlay-row.is-row-drop-before {
    box-shadow: inset 0 2px 0 var(--accent);
}

.canvas-legend-overlay-row.is-row-drop-after {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.palette-toggle.is-static {
    cursor: default;
}

.catalog-product-result {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
}

.catalog-product-result > i {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.catalog-product-result-copy {
    display: grid;
    min-width: 0;
    text-align: left;
}

.catalog-product-result-copy strong,
.catalog-product-result-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-product-result-copy span {
    color: var(--muted);
    font-size: 0.72rem;
}

.palette-search-summary {
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-lavender);
}

.palette-search-summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 750;
}

.palette-result-source {
    flex: 0 0 auto;
    align-self: center;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.4;
    text-transform: uppercase;
}

.palette-unified-results .symbol-list,
.symbol-palette-quick-results {
    align-content: start;
}

.palette-unified-results .symbol-tile,
.symbol-palette-quick-results .symbol-tile {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.canvas-legend-overlay-row.is-header {
    min-height: 32px;
    padding: 3px 8px;
    border-top: 0;
    border-bottom: 1px solid rgba(222, 211, 239, 0.72);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.canvas-legend-overlay-row.is-header > [role="columnheader"] {
    position: relative;
    min-width: 0;
}

.canvas-legend-column-resize {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: -5px;
    width: 10px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}

.canvas-legend-column-resize::after {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 1px;
    border-radius: 999px;
    background: transparent;
    content: "";
}

.canvas-legend-column-resize:hover::after,
.canvas-legend-column-resize:focus-visible::after {
    background: var(--accent);
}

.canvas-legend-column-resize:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.canvas-legend-sort {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    align-items: center;
    gap: 3px;
    padding: 0 5px;
    border: 1px solid var(--inspector-line);
    border-radius: 8px;
    color: var(--purple-850);
    background: #f8f4fd;
    box-shadow: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
    justify-content: flex-start;
}

.canvas-legend-sort:hover,
.canvas-legend-sort.is-active {
    color: var(--purple-850);
    border-color: rgba(100, 67, 151, 0.28);
    background: var(--purple-100);
}

.canvas-legend-sort:focus-visible {
    color: var(--purple-850);
    border-color: rgba(100, 67, 151, 0.28);
    background: var(--purple-100);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.canvas-legend-sort-indicator {
    min-width: 8px;
    font-size: 11px;
    line-height: 1;
}

.legend-type {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.canvas-legend-row-reorder,
.canvas-legend-row-select {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--legend-row-height) - 1px);
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
}

.canvas-legend-row-reorder {
    cursor: grab;
    touch-action: none;
}

.canvas-legend-row-reorder:active { cursor: grabbing; }
.canvas-legend-row-select { cursor: pointer; }
.canvas-legend-row-reorder:focus-visible,
.canvas-legend-row-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.canvas-legend-outer-resize {
    position: absolute;
    z-index: 4;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
}

.canvas-legend-outer-resize:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.canvas-legend-outer-resize.is-top,
.canvas-legend-outer-resize.is-bottom {
    right: 10px;
    left: 10px;
    height: 8px;
    cursor: row-resize;
}
.canvas-legend-outer-resize.is-top { top: 0; }
.canvas-legend-outer-resize.is-bottom { bottom: 0; }
.canvas-legend-outer-resize.is-left,
.canvas-legend-outer-resize.is-right {
    top: 10px;
    bottom: 10px;
    width: 8px;
    cursor: col-resize;
}
.canvas-legend-outer-resize.is-left { left: 0; }
.canvas-legend-outer-resize.is-right { right: 0; }
.canvas-legend-outer-resize.is-top-left,
.canvas-legend-outer-resize.is-top-right,
.canvas-legend-outer-resize.is-bottom-right,
.canvas-legend-outer-resize.is-bottom-left {
    width: 12px;
    height: 12px;
}
.canvas-legend-outer-resize.is-top-left { top: 0; left: 0; cursor: nwse-resize; }
.canvas-legend-outer-resize.is-top-right { top: 0; right: 0; cursor: nesw-resize; }
.canvas-legend-outer-resize.is-bottom-right { right: 0; bottom: 0; cursor: nwse-resize; }
.canvas-legend-outer-resize.is-bottom-left { bottom: 0; left: 0; cursor: nesw-resize; }

.canvas-legend-outer-resize.is-bottom-right::after {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(109, 54, 197, 0.78);
    border-bottom: 2px solid rgba(109, 54, 197, 0.78);
    border-radius: 0 0 3px;
    content: "";
}

.legend-type strong,
.legend-label,
.legend-count {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-type strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
}

.canvas-legend-overlay .legend-count {
    text-align: left;
}

.canvas-legend[hidden] {
    display: none;
}

.canvas-legend-title {
    padding: 8px 10px 7px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.12);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.canvas-legend-table {
    display: grid;
}

.canvas-legend-header,
.canvas-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 10px;
}

.canvas-legend-header {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.canvas-legend-row {
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    color: var(--text);
    font-size: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.legend-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.legend-name strong {
    min-width: 18px;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
}

.legend-name span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-count {
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

.canvas-browser-recovery-status {
    position: absolute;
    bottom: 68px;
    left: 12px;
    z-index: 12;
    max-width: min(460px, calc(100% - 24px));
    padding: 7px 10px;
    border: 1px solid #d1c8df;
    border-radius: 8px;
    background: #fff;
    color: #342849;
    font-size: 12px;
    pointer-events: none;
}

.canvas-browser-recovery-status:empty { display: none; }
.canvas-browser-recovery-status[data-recovery-state="Unavailable"] {
    border-color: #b78122;
    background: #fff8e7;
    color: #6d4500;
}

.canvas-zoom-hud {
    position: fixed;
    left: 50vw;
    bottom: calc(var(--designer-safe-bottom) + 12px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    max-width: calc(100vw - 20px);
    padding: 3px 4px;
    border: 1px solid rgba(222, 211, 239, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-persistent);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .left-panel,
    .right-panel,
    .symbol-palette-content,
    .animated-disclosure,
    .toolbar-chevron {
        transition: none;
    }

    .toolbar-popover {
        animation: none;
    }
}

/* Export Wizard V2 */
.export-wizard-backdrop {
    padding: 24px;
    background: rgba(35, 25, 66, 0.42);
    backdrop-filter: blur(7px);
}

.export-wizard {
    --export-ink: #241b34;
    --export-muted: #675c75;
    --export-line: rgba(100, 67, 151, 0.17);
    --export-soft: #f8f4fd;
    --export-cream: #fffdf7;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(1320px, calc(100vw - 48px));
    height: min(850px, calc(100vh - 48px));
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(109, 54, 197, 0.23);
    border-radius: 24px;
    color: var(--export-ink);
    background:
        linear-gradient(rgba(109, 54, 197, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 54, 197, 0.035) 1px, transparent 1px),
        var(--export-cream);
    background-size: 24px 24px;
    box-shadow: 0 28px 90px rgba(35, 25, 66, 0.32);
}

.export-wizard-header,
.export-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-color: var(--export-line);
    background: rgba(255, 253, 247, 0.94);
}

.export-wizard-header { border-bottom: 1px solid var(--export-line); }
.export-wizard-footer { border-top: 1px solid var(--export-line); }
.export-wizard-footer > span { color: var(--export-muted); font-size: 12px; }
.export-wizard-footer > div,
.export-wizard-header-actions,
.export-inline-actions { display: flex; align-items: center; gap: 8px; }

.export-wizard-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.export-wizard-heading > div { display: grid; gap: 2px; min-width: 0; }
.export-wizard-heading strong { font-size: 18px; line-height: 1.15; }
.export-wizard-heading span { color: var(--export-muted); font-size: 12px; }

.export-wizard-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(109, 54, 197, 0.22);
    border-radius: 14px;
    color: #5f2db4;
    background: linear-gradient(145deg, #fff, #f0e7fb);
}

.export-wizard-icon svg { width: 20px; height: 20px; }
.export-wizard-format { display: flex; padding: 3px; border: 1px solid var(--export-line); border-radius: 12px; background: #f3eef9; }
.export-format-button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; color: var(--export-muted); background: transparent; font-weight: 800; }
.export-format-button.is-active { color: #fff; background: #6d36c5; box-shadow: 0 4px 12px rgba(109, 54, 197, 0.25); }

.export-wizard-shell {
    display: grid;
    grid-template-columns: 176px minmax(360px, 1fr) minmax(320px, 0.82fr);
    min-height: 0;
}

.export-wizard-rail {
    padding: 16px 12px;
    overflow: auto;
    border-right: 1px solid var(--export-line);
    background: rgba(248, 244, 253, 0.8);
}

.export-wizard-rail ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.export-wizard-rail li { min-width: 0; }

.export-wizard-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--export-muted);
    text-align: left;
    background: transparent;
    width: 100%;
}

.export-wizard-step > span:last-child { display: grid; gap: 2px; }
.export-wizard-step strong { color: inherit; font-size: 13px; }
.export-wizard-step small { font-size: 10px; }
.export-wizard-step-index { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #6d36c5; background: #eee4fb; font-weight: 900; }
.export-wizard-step.is-active { border-color: rgba(109, 54, 197, 0.28); color: var(--export-ink); background: #fff; box-shadow: 0 8px 20px rgba(70, 45, 104, 0.09); }
.export-wizard-step.is-active .export-wizard-step-index { color: #fff; background: #6d36c5; }
.export-wizard-step.is-complete .export-wizard-step-index { color: #155e3d; background: #dff5e9; }

.export-wizard-content { min-width: 0; padding: 20px; overflow: auto; background: rgba(255, 255, 255, 0.72); }
.export-wizard-stage-header { display: grid; gap: 6px; margin-bottom: 16px; }
.export-wizard-stage-header > div { display: flex; align-items: baseline; gap: 9px; }
.export-wizard-stage-header > div > span { color: #6d36c5; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.export-wizard-stage-header strong { font-size: 23px; }
.export-wizard-stage-header p { margin: 0; color: var(--export-muted); font-size: 13px; }

.export-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.export-choice-card { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 10px; min-height: 112px; padding: 14px; border: 1px solid var(--export-line); border-radius: 16px; background: #fff; cursor: pointer; }
.export-choice-card input { position: absolute; inset: 10px 10px auto auto; }
.export-choice-card > i[data-lucide] > svg { width: 21px; height: 21px; padding: 8px; box-sizing: content-box; border-radius: 11px; color: #6d36c5; background: #f1e8fb; }
.export-choice-card > span,
.export-segment-card > span { display: grid; align-content: start; gap: 5px; }
.export-choice-card strong,
.export-segment-card strong { font-size: 13px; }
.export-choice-card small,
.export-segment-card small { color: var(--export-muted); font-size: 11px; line-height: 1.35; }
.export-choice-card.is-selected,
.export-segment-card.is-selected { border-color: #7b42cf; background: #faf7fe; box-shadow: inset 0 0 0 1px rgba(123, 66, 207, 0.16); }

.export-wizard-section,
.export-review-card {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--export-line);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
}

.export-wizard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.export-wizard-section-heading > div:first-child { display: grid; gap: 2px; }
.export-wizard-section-heading strong { font-size: 13px; }
.export-wizard-section-heading span { color: var(--export-muted); font-size: 11px; }
.text-button { min-height: 36px; padding: 0 8px; border: 0; color: #5f2db4; background: transparent; font-size: 11px; font-weight: 800; }

.export-area-tree { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.export-area-page { overflow: hidden; border: 1px solid var(--export-line); border-radius: 13px; background: #fcfbfe; }
.export-area-page-toggle { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 7px 10px; border: 0; color: var(--export-ink); text-align: left; background: #f8f4fd; }
.export-area-page-toggle > span { display: grid; }
.export-area-page-toggle strong { font-size: 12px; }
.export-area-page-toggle small { color: var(--export-muted); font-size: 10px; }
.export-area-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; }
.export-area-option { display: grid; grid-template-columns: 18px 10px 1fr; align-items: center; gap: 7px; min-height: 42px; padding: 6px 7px; border-radius: 10px; background: #fff; }
.export-area-option > span:last-child { display: grid; min-width: 0; }
.export-area-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.export-area-option small { color: var(--export-muted); font-size: 9px; }
.export-area-color { width: 9px; height: 9px; border: 1px solid rgba(35, 25, 66, 0.25); border-radius: 50%; }

.export-segmented-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.export-segment-card { position: relative; min-height: 76px; padding: 12px 10px 10px 34px; border: 1px solid var(--export-line); border-radius: 13px; background: #fff; }
.export-segment-card input { position: absolute; top: 13px; left: 11px; }

.export-layer-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.export-layer-pill { position: relative; display: grid; place-items: center; gap: 6px; min-height: 74px; padding: 9px; border: 1px solid var(--export-line); border-radius: 13px; background: #fff; font-size: 11px; font-weight: 800; }
.export-layer-pill input { position: absolute; top: 8px; right: 8px; }
.export-layer-pill svg { width: 18px; height: 18px; color: #6d36c5; }
.export-layer-pill:has(input:checked) { border-color: rgba(109, 54, 197, 0.4); background: #f7f1fd; }
.export-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.export-filter-chip { position: relative; }
.export-filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.export-filter-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--export-line); border-radius: 999px; color: var(--export-muted); background: #fff; font-size: 11px; font-weight: 800; }
.export-filter-chip input:checked + span { border-color: #7b42cf; color: #5f2db4; background: #f1e8fb; }
.export-filter-chip input:focus-visible + span { outline: 3px solid rgba(45, 130, 240, 0.3); outline-offset: 2px; }

.export-advanced-disclosure { padding: 0; }
.export-advanced-disclosure summary { display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; cursor: pointer; }
.export-advanced-disclosure summary > span { display: grid; }
.export-advanced-disclosure summary small { color: var(--export-muted); }
.export-advanced-disclosure[open] .export-filter-chips { padding: 0 14px 14px; }

.export-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; }
.export-switch-row > span { display: grid; gap: 2px; }
.export-switch-row strong { font-size: 12px; }
.export-switch-row small { color: var(--export-muted); font-size: 10px; }
.export-switch-row input { width: 42px; height: 22px; }
.export-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.export-form-grid label,
.export-review-file label { display: grid; gap: 5px; color: var(--export-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.export-form-grid input,
.export-form-grid select,
.export-review-file input { min-height: 42px; border: 1px solid var(--export-line); border-radius: 11px; color: var(--export-ink); background: #fff; }

.export-legend-design-disclosure {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--export-line);
    border-radius: 13px;
    background: var(--export-soft);
}

.export-legend-design-disclosure > summary {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 11px;
    cursor: pointer;
}

.export-legend-design-disclosure > summary > span { display: grid; gap: 2px; }
.export-legend-design-disclosure > summary strong { font-size: 12px; }
.export-legend-design-disclosure > summary small { color: var(--export-muted); font-size: 10px; }
.export-legend-design-disclosure > summary svg { width: 15px; height: 15px; color: #6d36c5; }

.export-legend-placement-editor { display: grid; gap: 12px; padding: 0 11px 12px; }
.export-legend-placement-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.export-legend-placement-preset { min-height: 34px; padding: 0 8px; border: 1px solid var(--export-line); border-radius: 10px; color: var(--export-muted); background: #fff; font-size: 10px; font-weight: 850; }
.export-legend-placement-preset.is-active { border-color: #7b42cf; color: #5f2db4; background: #f1e8fb; box-shadow: inset 0 0 0 1px rgba(123, 66, 207, 0.14); }
.export-legend-position-control { display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--export-muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; }
.export-legend-position-control > span { display: flex; justify-content: space-between; gap: 5px; }
.export-legend-position-control output { color: #5f2db4; }
.export-legend-position-control input { width: 100%; }

.export-wizard-legend-rows { display: grid; max-height: 250px; overflow-y: auto; border-top: 1px solid var(--export-line); background: #fff; }
.export-wizard-legend-row { display: grid; grid-template-columns: 16px minmax(54px, auto) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-bottom: 1px solid var(--export-line); }
.export-wizard-legend-row:last-child { border-bottom: 0; }
.export-wizard-legend-row-type { overflow: hidden; color: var(--export-muted); font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.export-wizard-legend-row input { min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--export-line); border-radius: 9px; color: var(--export-ink); background: #fff; }

.export-review-card { display: grid; gap: 14px; }
.export-review-file { display: grid; grid-template-columns: 42px 1fr; align-items: end; gap: 11px; }
.export-review-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.export-review-summary > div { padding: 10px; border-radius: 11px; background: var(--export-soft); }
.export-review-summary dt { color: var(--export-muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.export-review-summary dd { margin: 3px 0 0; font-size: 12px; font-weight: 800; }
.export-complete { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(29, 143, 85, 0.26); border-radius: 14px; color: #155e3d; background: #effaf3; }
.export-complete > div { display: grid; }
.export-complete span { font-size: 11px; }

.export-wizard-preview { min-width: 0; padding: 16px; overflow: auto; border-left: 1px solid var(--export-line); background: rgba(242, 236, 249, 0.84); }
.export-preview-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.export-preview-card-header > div { display: grid; }
.export-preview-card-header strong { font-size: 13px; }
.export-preview-card-header span { color: var(--export-muted); font-size: 10px; }
.export-rendering-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: #5f2db4 !important; background: #fff; font-weight: 800; }
.export-rendering-pill svg { width: 12px; height: 12px; animation: export-spin 0.9s linear infinite; }
@keyframes export-spin { to { transform: rotate(360deg); } }
.export-wizard-preview-frame { display: grid; place-items: center; min-height: 390px; overflow: hidden; border: 1px solid rgba(100, 67, 151, 0.2); border-radius: 17px; background: #dcd2e9; box-shadow: inset 0 0 30px rgba(35, 25, 66, 0.08); }
.export-preview-image-shell { position: relative; max-width: calc(100% - 24px); max-height: 540px; border-radius: 4px; background: #fff; box-shadow: 0 12px 30px rgba(35, 25, 66, 0.2); }
.export-preview-base-image { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.export-preview-legend-layer { position: absolute; z-index: 1; display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; outline: 0 solid transparent; color: #5f2db4; background: transparent; box-shadow: none; line-height: 0; }
.export-preview-legend-layer > img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.export-preview-legend-layer.is-interactive { cursor: grab; touch-action: none; }
.export-preview-legend-layer.is-interactive:hover,
.export-preview-legend-layer.is-interactive:focus-visible,
.export-preview-legend-layer.is-interactive.is-dragging { z-index: 2; outline: 2px solid rgba(109, 54, 197, 0.78); outline-offset: 2px; }
.export-preview-legend-layer.is-interactive:focus-visible { box-shadow: 0 0 0 5px rgba(109, 54, 197, 0.18); }
.export-preview-legend-layer.is-interactive.is-dragging { cursor: grabbing; }
.export-preview-legend-layer.is-interactive:disabled { cursor: wait; opacity: 0.82; }
.export-preview-legend-move-badge { position: absolute; top: -8px; left: -8px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 7px; color: #fff; background: #6d36c5; box-shadow: 0 3px 9px rgba(35, 25, 66, 0.28); opacity: 0.72; pointer-events: none; }
.export-preview-legend-move-badge svg { width: 11px; height: 11px; }
.export-preview-legend-layer:hover .export-preview-legend-move-badge,
.export-preview-legend-layer:focus-visible .export-preview-legend-move-badge,
.export-preview-legend-layer.is-dragging .export-preview-legend-move-badge { opacity: 1; }
.export-preview-placeholder { display: grid; justify-items: center; gap: 7px; max-width: 230px; color: var(--export-muted); text-align: center; }
.export-preview-placeholder svg { width: 30px; height: 30px; color: #6d36c5; }
.export-preview-placeholder strong { color: var(--export-ink); }
.export-preview-placeholder span { color: #5b5069; font-size: 11px; line-height: 1.4; }
.export-output-strip { display: grid; gap: 6px; margin-top: 10px; }
.export-output-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.export-output-preview-button { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 38px; padding: 4px 9px; overflow: hidden; border: 1px solid var(--export-line); border-radius: 12px; color: var(--export-ink); text-align: left; background: #fff; font-size: 10px; }
.export-output-preview-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-output-preview-button[aria-pressed="true"] { border-color: #7b42cf; background: #f7f1fd; box-shadow: inset 0 0 0 1px rgba(123, 66, 207, 0.14); }
.export-output-strip strong { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #6d36c5; }
.export-output-actions { display: flex; gap: 3px; }
.export-output-actions button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--export-line); border-radius: 10px; color: #5f2db4; background: #fff; }
.export-output-actions button:disabled { color: #a69ab8; background: #f6f3f8; }
.export-output-actions svg { width: 14px; height: 14px; }
.export-wizard-error { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-top: 1px solid rgba(185, 28, 28, 0.18); color: #991b1b; background: #fff1f2; font-size: 12px; }
.export-wizard-error svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
    .export-wizard-shell { grid-template-columns: 146px minmax(330px, 1fr) minmax(280px, 0.72fr); }
    .export-layer-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .export-choice-grid { grid-template-columns: 1fr; }
    .export-choice-card { min-height: 76px; }
}

@media (max-width: 959px) {
    .export-wizard-backdrop { padding: 0; }
    .export-wizard { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .export-wizard-header { padding: 10px 12px; }
    .export-wizard-heading > div > span { display: none; }
    .export-wizard-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, auto) minmax(260px, 1fr); overflow: auto; }
    .export-wizard-rail { position: sticky; top: 0; z-index: 2; padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--export-line); }
    .export-wizard-rail ol { display: grid; grid-template-columns: repeat(4, minmax(116px, 1fr)); }
    .export-wizard-step { min-height: 48px; grid-template-columns: 28px 1fr; }
    .export-wizard-step-index { width: 26px; height: 26px; }
    .export-wizard-content { padding: 16px; overflow: visible; }
    .export-wizard-preview { min-height: 320px; border-top: 1px solid var(--export-line); border-left: 0; }
    .export-wizard-preview-frame { min-height: 270px; }
    .export-wizard-footer { position: sticky; bottom: 0; z-index: 3; padding: 9px 12px; }
    .export-wizard-footer > span { display: none; }
    .export-wizard-footer > div { width: 100%; justify-content: flex-end; }
}

@media (max-width: 640px) {
    .export-wizard-heading strong { font-size: 15px; }
    .export-wizard-icon { width: 36px; height: 36px; }
    .export-wizard-header-actions { gap: 4px; }
    .export-format-button { min-height: 34px; padding: 0 9px; }
    .export-area-options,
    .export-segmented-options,
    .export-layer-pills,
    .export-form-grid,
    .export-review-summary { grid-template-columns: 1fr; }
    .export-legend-placement-presets { grid-template-columns: 1fr; }
    .export-legend-position-control { grid-template-columns: 1fr; }
    .export-wizard-legend-row { grid-template-columns: 16px minmax(0, 1fr); }
    .export-wizard-legend-row input { grid-column: 1 / -1; }
    .export-wizard-section-heading { align-items: flex-start; flex-direction: column; }
    .export-wizard-footer .secondary-button,
    .export-wizard-footer .primary-button { min-height: 44px; padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .export-rendering-pill svg { animation: none; }
    .export-wizard *,
    .export-wizard *::before,
    .export-wizard *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.zoom-percent-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(222, 211, 239, 0.95);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--purple-850);
    font-size: 12px;
    font-weight: 850;
}

.zoom-percent-input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: center;
}

.zoom-percent-control > span {
    position: absolute;
    right: 8px;
    pointer-events: none;
}

.zoom-percent-input:focus {
    outline: 2px solid rgba(112, 45, 166, 0.28);
    outline-offset: 2px;
}

.canvas-zoom-hud .canvas-zoom-button {
    flex: 0 0 32px;
}

.canvas-zoom-hud .canvas-zoom-fit {
    min-width: 50px;
    min-height: 32px;
    height: 32px;
    padding: 0 7px;
    font-size: 11px;
}

.canvas-zoom-fit svg {
    width: 14px;
    height: 14px;
}

.canvas-container {
    width: 100% !important;
    height: 100% !important;
    overscroll-behavior: contain;
}

.upper-canvas:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--purple-600) 72%, transparent);
    outline-offset: -2px;
}

.empty-panel {
    margin: 16px 14px;
    padding: 16px 0;
    color: var(--muted);
    font-size: 13px;
    border-bottom: 1px solid var(--panel-border);
}

.modal-header strong {
    color: var(--purple-950);
    font-weight: 850;
}
.type-editor input:focus,
.type-editor select:focus {
    outline: 0;
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.16);
}

.field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.secondary-button,
.primary-button {
    min-height: 36px;
    padding: 0 12px;
    font-weight: 700;
}

.secondary-button.danger-soft,
.toolbar-button.danger-soft {
    color: var(--red);
    border-color: #fecaca;
    background: #fff1f2;
}

.primary-button {
    color: #ffffff;
    background: var(--purple-700);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(109, 54, 197, 0.2);
}

.primary-button span,
.primary-button i,
.primary-button svg {
    color: inherit;
}

.primary-button:hover {
    background: var(--purple-850);
}

.icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
}

.icon-button.danger {
    color: var(--danger);
}

.toast-status {
    position: fixed;
    right: 18px;
    bottom: 48px;
    z-index: 20;
    max-width: min(420px, calc(100vw - 36px));
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: #ffffff;
    box-shadow: var(--shadow);
    font-size: 13px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    color: #14532d;
    background: #dcfce7;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-pill.is-working {
    color: #854d0e;
    background: #fef3c7;
}

.status-pill.is-read-only {
    color: #1e40af;
    background: #dbeafe;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z);
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(38, 16, 71, 0.34);
    backdrop-filter: blur(6px);
}

/* Plan Setup keeps the project wizard mounted so its upload draft survives, but it must not remain visible over the canvas. */
.modal-backdrop[hidden] {
    display: none;
}

.modal-backdrop--child {
    z-index: var(--modal-child-z);
}

.edit-lock-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, auto) 58px;
    width: min(460px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.edit-lock-body {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
}

.edit-lock-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    color: #1e40af;
    background: #dbeafe;
}

.edit-lock-copy {
    display: grid;
    gap: 5px;
    color: var(--text);
}

.edit-lock-copy span,
.edit-lock-status {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.editing-moved-modal {
    width: min(440px, calc(100vw - 40px));
}

.editing-moved-body {
    align-items: start;
}

.editing-moved-copy {
    min-width: 0;
}

.editing-moved-copy span {
    max-width: 40ch;
    overflow-wrap: anywhere;
}

.edit-lock-status {
    grid-column: 1 / -1;
    padding: 9px 10px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: var(--surface-lavender);
}

.edit-lock-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--panel-border);
    background: var(--surface-lavender);
}


.selectable-menu-pill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: left;
}

.selectable-menu-pill:hover,
.selectable-menu-pill:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    background: var(--surface-lavender);
    color: var(--purple-850);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.12);
}

.selectable-menu-pill.is-selected {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--purple-700), var(--magenta));
    box-shadow: none;
}

.selectable-menu-pill.is-recommended {
    border-color: rgba(122, 55, 203, 0.55);
    background: linear-gradient(90deg, rgba(245, 238, 255, 0.95), #ffffff 65%);
}

.selectable-menu-pill.is-disabled {
    cursor: not-allowed;
    opacity: 0.64;
    pointer-events: none;
}

.selectable-menu-pill-main {
    display: grid;
    min-width: 0;
}

.selectable-menu-pill.is-standard {
    min-height: 78px;
    place-items: center;
}

.selectable-menu-pill.is-standard .selectable-menu-pill-main {
    align-content: center;
    align-self: stretch;
    grid-column: 1 / -1;
    justify-items: center;
    justify-self: stretch;
    gap: 4px;
    text-align: center;
}

.selectable-menu-pill.is-standard .selectable-menu-pill-header {
    grid-area: auto;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.selectable-menu-pill.is-standard .selectable-menu-pill-supporting {
    line-height: 1.2;
}

.selectable-menu-pill.is-detailed .selectable-menu-pill-main {
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    grid-template-areas:
        "header timestamp"
        "metrics detail";
    gap: 7px 16px;
}

.selectable-menu-pill-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.selectable-menu-pill-header strong {
    color: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.1;
}

.selectable-menu-pill-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.selectable-menu-pill-status {
    color: var(--purple-700);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.selectable-menu-pill.is-selected .selectable-menu-pill-status {
    color: inherit;
}

.selectable-menu-pill-supporting,
.selectable-menu-pill-timestamp,
.selectable-menu-pill-detail {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.selectable-menu-pill.is-selected .selectable-menu-pill-supporting,
.selectable-menu-pill.is-selected .selectable-menu-pill-timestamp,
.selectable-menu-pill.is-selected .selectable-menu-pill-detail {
    color: rgba(255, 255, 255, 0.84);
}

.selectable-menu-pill-timestamp {
    grid-area: timestamp;
    justify-self: end;
    text-align: right;
}

.selectable-menu-pill-metrics {
    grid-area: metrics;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    min-width: 0;
}

.selectable-menu-pill-metrics > span {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.selectable-menu-pill-metrics > span + span::before {
    content: "·";
    margin-right: 10px;
    color: var(--text-soft);
}

.selectable-menu-pill-metrics strong {
    color: var(--purple-950);
    font-size: 12px;
}

.selectable-menu-pill-detail {
    grid-area: detail;
    justify-self: end;
    max-width: 260px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selectable-menu-pill-trailing {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--purple-700);
}

.selectable-menu-pill-trailing.is-busy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    font-size: 11px;
    font-weight: 850;
}

.selectable-menu-pill-trailing.is-busy svg {
    width: 16px;
    height: 16px;
    animation: selectable-menu-pill-spin 900ms linear infinite;
}

@keyframes selectable-menu-pill-spin {
    to {
        transform: rotate(360deg);
    }
}


.manage-types-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    width: min(920px, calc(100vw - 40px));
    height: min(720px, calc(100dvh - 40px));
    max-height: min(720px, calc(100dvh - 40px));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--surface-lavender);
}

.confirm-modal {
    width: min(440px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.confirm-modal-body {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.confirm-modal-body p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.rename-project-modal {
    width: min(420px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.rename-project-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.rename-project-field {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.rename-project-field input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.rename-project-status {
    padding: 10px 12px;
    border: 1px solid rgba(245, 158, 11, 0.34);
    border-radius: var(--radius);
    color: #92400e;
    background: #fffbeb;
    font-size: 13px;
    font-weight: 700;
}

.rename-project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
}

.open-project-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    width: min(760px, calc(100vw - 40px));
    max-height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.open-project-body {
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 14px;
    overflow: auto;
}

.open-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.open-action-card {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";
    align-items: center;
    gap: 2px 10px;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--control-bg);
    text-align: left;
    cursor: pointer;
}

button.open-action-card {
    font: inherit;
}

.open-action-card:hover,
.open-action-card:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    background: var(--surface-lavender);
    color: var(--purple-850);
}

.open-action-card:disabled,
.open-action-card.is-disabled {
    cursor: progress;
    opacity: 0.58;
    pointer-events: none;
}

.open-action-card svg {
    grid-area: icon;
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.open-action-title {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.open-action-text {
    grid-area: text;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.open-dialog-status {
    padding: 9px 10px;
    border: 1px solid rgba(222, 211, 239, 0.92);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 13px;
}

.print-modal-backdrop {
    z-index: var(--modal-print-z);
}

.project-progress-backdrop {
    z-index: var(--modal-print-z);
}

.print-upload-modal,
.project-progress-modal {
    display: grid;
    grid-template-rows: 48px auto;
    width: min(440px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.print-upload-body,
.project-progress-body {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
}

.print-upload-icon,
.project-progress-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.print-upload-icon svg,
.project-progress-icon svg {
    width: 20px;
    height: 20px;
}

.print-upload-copy,
.project-progress-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.print-upload-copy strong,
.project-progress-copy strong,
.print-preview-title strong {
    color: var(--purple-850);
}

.print-upload-copy span,
.project-progress-copy span,
.print-preview-title span,
.print-page-toolbar span,
.print-preview-toolbar span,
.print-preview-actions > span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-progress-track,
.project-progress-track {
    grid-column: 1 / -1;
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
}

.print-progress-fill,
.project-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #16a34a);
    transition: width 180ms ease;
}

.project-progress-track.is-indeterminate .project-progress-fill {
    width: 42%;
    animation: project-progress-indeterminate 1.15s ease-in-out infinite;
    transition: none;
}

@keyframes project-progress-indeterminate {
    0% {
        transform: translateX(-115%);
    }

    100% {
        transform: translateX(340%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-progress-track.is-indeterminate .project-progress-fill {
        width: 100%;
        animation: none;
        opacity: 0.72;
    }
}

.print-progress-percent,
.project-progress-percent {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.print-preview-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) auto auto;
    width: min(1120px, calc(100vw - 40px));
    height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.print-preview-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.print-preview-body {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    min-height: 0;
}

.print-page-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    border-right: 1px solid var(--line);
    background: #f8fafc;
}

.print-page-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.print-page-toolbar > span {
    grid-column: 1 / -1;
}

.print-page-toolbar .secondary-button {
    min-height: 32px;
    padding: 0 9px;
    font-size: 12px;
}

.print-page-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

.print-page-row {
    display: grid;
    grid-template-columns: 20px 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    cursor: pointer;
}

.print-page-row:hover,
.print-page-row.is-active {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.print-page-row.is-selected {
    box-shadow: inset 3px 0 0 #2563eb;
}

.print-page-row input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.print-page-row img {
    width: 64px;
    height: 76px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    object-fit: contain;
}

.print-page-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-preview-sheet {
    display: block;
    min-width: 0;
    min-height: 0;
    background: #e5e7eb;
}

.print-preview-viewport {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.print-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.print-preview-page-title {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.print-preview-page-title small,
.print-preview-page-size {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.print-preview-viewport-controls,
.zone-crop-view-controls,
.zone-crop-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.print-preview-viewport-controls .icon-button,
.zone-crop-view-controls .icon-button {
    width: 30px;
    height: 30px;
}

.print-preview-viewport-controls svg,
.zone-crop-view-controls svg {
    width: 15px;
    height: 15px;
}

.print-preview-zoom-value,
.zone-crop-zoom-value {
    min-width: 58px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: #ffffff;
    font-size: 11px;
    font-weight: 850;
}

.print-preview-fit-button {
    min-height: 30px;
    padding: 0 10px;
}

.print-preview-page-frame {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.print-preview-page-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
    object-fit: contain;
}

.print-preview-page-frame.is-interactive {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.print-preview-page-frame.is-interactive.is-panning {
    cursor: grabbing;
}

.print-preview-page-frame.is-interactive img {
    position: absolute;
    inset: 0 auto auto 0;
    max-width: none;
    max-height: none;
    will-change: transform;
    pointer-events: none;
}

.print-preview-status {
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    color: var(--red);
    background: #fff1f2;
    font-size: 13px;
    font-weight: 700;
}

.print-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.print-preview-actions > span {
    margin-right: auto;
}

.crop-modal-backdrop {
    z-index: var(--modal-export-z);
}

.crop-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) auto auto;
    width: min(1480px, calc(100vw - 32px));
    height: min(780px, calc(100dvh - 32px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.crop-modal-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crop-modal-title strong,
.crop-control-header strong {
    color: var(--purple-850);
}

.crop-modal-title span,
.crop-page-toolbar span,
.crop-preview-toolbar span,
.crop-control-header span,
.crop-actions > span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crop-modal-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 280px;
    min-height: 0;
}

.crop-page-sidebar,
.crop-controls-panel {
    display: grid;
    align-content: start;
    min-height: 0;
    background: #f8fafc;
}

.crop-page-sidebar {
    grid-template-rows: auto minmax(0, 1fr);
    border-right: 1px solid var(--line);
}

.crop-controls-panel {
    gap: 10px;
    padding: 12px;
    overflow: auto;
    border-left: 1px solid var(--line);
}

.crop-page-toolbar,
.crop-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.crop-page-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

.crop-page-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 8px;
    min-height: 58px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.crop-page-row:hover,
.crop-page-row.is-active {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.crop-page-row.is-cropped {
    box-shadow: inset 3px 0 0 #2563eb;
}

.crop-page-number {
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.crop-page-name,
.crop-page-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crop-page-name {
    font-size: 13px;
    font-weight: 850;
}

.crop-page-meta {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.crop-preview-sheet {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: #e5e7eb;
}

.crop-preview-frame {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.crop-preview-image-wrap {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.crop-preview-image-wrap img {
    display: block;
    max-width: min(100%, 920px);
    max-height: calc(100dvh - 230px);
    border: 1px solid #cbd5e1;
    object-fit: contain;
}

.crop-preview-dim,
.crop-preview-rect {
    position: absolute;
    pointer-events: none;
}

.crop-preview-dim {
    z-index: 1;
    background: rgba(15, 23, 42, 0.48);
}

.crop-preview-dim--top {
    top: 0;
    right: 0;
    left: 0;
}

.crop-preview-dim--right {
    top: 0;
    right: 0;
    bottom: 0;
}

.crop-preview-dim--bottom {
    right: 0;
    bottom: 0;
    left: 0;
}

.crop-preview-dim--left {
    top: 0;
    bottom: 0;
    left: 0;
}

.crop-preview-rect {
    z-index: 2;
    border: 2px solid #22c55e;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75);
}

.crop-control-header {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.crop-controls-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.crop-controls-actions .secondary-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.zone-crop-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.zone-crop-modebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    background: #fbfaff;
}

.zone-crop-modes,
.zone-crop-mode-actions,
.zone-crop-inspector-actions,
.zone-crop-add-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.zone-crop-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 850;
}

.zone-crop-mode svg,
.zone-crop-mode-actions svg,
.zone-crop-add-actions svg {
    width: 16px;
    height: 16px;
}

.zone-crop-mode:hover,
.zone-crop-mode:focus-visible {
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.zone-crop-mode.is-active {
    border-color: rgba(109, 54, 197, 0.35);
    color: var(--purple-950);
    background: #ffffff;
    box-shadow: var(--shadow-tight);
}

.zone-crop-body {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 330px;
    min-height: 0;
}

.zone-crop-pages,
.zone-crop-inspector {
    display: grid;
    align-content: start;
    min-height: 0;
    overflow: auto;
    background: #f8fafc;
}

.zone-crop-pages {
    gap: 8px;
    padding: 10px;
    border-right: 1px solid var(--line);
}

.zone-crop-inspector {
    gap: 10px;
    padding: 12px;
    border-left: 1px solid var(--line);
}

.zone-crop-panel-heading,
.zone-crop-canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zone-crop-panel-heading > span,
.zone-crop-canvas-toolbar small,
.zone-crop-version {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.zone-crop-page {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.zone-crop-page:hover,
.zone-crop-page.is-active {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.zone-crop-page > span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.zone-crop-page strong,
.zone-crop-page small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-crop-page small {
    color: var(--text-muted);
    font-size: 10px;
}

.zone-crop-page-number,
.zone-crop-count {
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 900;
}

.zone-crop-page-number {
    width: 30px;
    height: 30px;
    color: var(--purple-850);
    background: var(--purple-100);
}

.zone-crop-count {
    min-width: 22px;
    height: 22px;
    color: #ffffff;
    background: var(--purple-700);
}

.zone-crop-canvas-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    background: #dfe3ea;
}

.zone-crop-canvas-toolbar {
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.zone-crop-canvas-toolbar > span:first-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.zone-crop-view-controls {
    margin-left: auto;
}

.zone-crop-view-controls .icon-button.is-active {
    border-color: rgba(109, 54, 197, 0.45);
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.zone-crop-zoom-group {
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
}

.zone-crop-zoom-group .icon-button,
.zone-crop-zoom-group .zone-crop-zoom-value {
    border: 0;
}

.zone-crop-canvas-frame {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
    cursor: default;
}

.zone-crop-canvas-frame.is-drawing {
    cursor: crosshair;
}

.zone-crop-canvas-frame.is-panning {
    cursor: grab;
}

.zone-crop-canvas-frame.is-panning:active {
    cursor: grabbing;
}

.zone-crop-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - 225px);
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
    touch-action: none;
    user-select: none;
}

.zone-crop-dim {
    fill: rgba(15, 23, 42, 0.5);
    pointer-events: none;
}

.zone-crop-boundary {
    fill: rgba(34, 197, 94, 0.04);
    stroke: #22c55e;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
    cursor: move;
    pointer-events: all;
}

.zone-crop-resize-handle {
    fill: #ffffff;
    stroke: #16a34a;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.zone-crop-resize-handle.handle-n,
.zone-crop-resize-handle.handle-s {
    cursor: ns-resize;
}

.zone-crop-resize-handle.handle-e,
.zone-crop-resize-handle.handle-w {
    cursor: ew-resize;
}

.zone-crop-resize-handle.handle-ne,
.zone-crop-resize-handle.handle-sw {
    cursor: nesw-resize;
}

.zone-crop-resize-handle.handle-nw,
.zone-crop-resize-handle.handle-se {
    cursor: nwse-resize;
}

.zone-crop-canvas-status {
    min-height: 34px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    color: #334155;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 750;
}

.zone-proposal-polygon {
    fill: rgba(37, 99, 235, 0.14);
    stroke: #2563eb;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.zone-proposal-polygon.source-ai {
    fill: rgba(124, 58, 237, 0.12);
    stroke: #7c3aed;
    stroke-dasharray: 10 7;
}

.zone-proposal-polygon.status-stale,
.zone-proposal-polygon.status-rejected {
    fill: rgba(220, 38, 38, 0.08);
    stroke: #dc2626;
    stroke-dasharray: 8 8;
}

.zone-proposal-polygon.status-confirmed {
    fill: rgba(22, 163, 74, 0.14);
    stroke: #16a34a;
}

.zone-proposal-polygon.is-selected {
    stroke-width: 5;
    filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.45));
}

.zone-proposal-draft {
    fill: rgba(2, 132, 199, 0.08);
    stroke: #0284c7;
    stroke-width: 3;
    stroke-dasharray: 9 7;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.zone-proposal-draft-point,
.zone-proposal-vertex {
    fill: #ffffff;
    stroke: #7c3aed;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.zone-proposal-vertex {
    cursor: grab;
}

.zone-proposal-vertex:active,
.zone-proposal-vertex.is-selected {
    fill: #7c3aed;
    cursor: grabbing;
}

.zone-crop-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.zone-crop-fields label,
.zone-proposal-inspector label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.zone-crop-fields input,
.zone-proposal-inspector input,
.zone-crop-search input {
    min-width: 0;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
}

.zone-crop-note,
.zone-proposal-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.zone-crop-note {
    color: #1e3a8a;
    background: #eff6ff;
}

.zone-crop-note svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.zone-crop-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding-left: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: #ffffff;
}

.zone-crop-search svg {
    width: 15px;
    height: 15px;
}

.zone-crop-search input {
    padding-left: 0;
    border: 0;
    outline: 0;
}

.zone-proposal-list {
    display: grid;
    align-content: start;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
}

.zone-proposal-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 17px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.zone-proposal-row:hover,
.zone-proposal-row.is-selected {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.zone-proposal-row svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.zone-proposal-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f59e0b;
}

.zone-proposal-row.status-confirmed .zone-proposal-status-dot {
    background: #16a34a;
}

.zone-proposal-row.status-stale .zone-proposal-status-dot,
.zone-proposal-row.status-rejected .zone-proposal-status-dot {
    background: #dc2626;
}

.zone-proposal-row-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.zone-proposal-row-copy strong,
.zone-proposal-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-proposal-row-copy small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.zone-crop-add-actions > button,
.zone-crop-inspector-actions > button {
    flex: 1 1 0;
    min-width: 0;
}

.zone-proposal-inspector {
    display: grid;
    gap: 9px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.zone-proposal-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.zone-proposal-metrics span {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--purple-850);
    background: var(--purple-100);
    font-size: 10px;
    font-weight: 800;
}

.zone-proposal-warning {
    color: #991b1b;
    background: #fef2f2;
}

.zone-crop-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 24px 12px;
    color: var(--text-muted);
    text-align: center;
}

.zone-crop-empty svg {
    width: 28px;
    height: 28px;
    color: var(--purple-700);
}

.zone-crop-empty span {
    font-size: 11px;
    line-height: 1.4;
}

.crop-status {
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 13px;
    font-weight: 700;
}

.crop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.crop-actions > span {
    margin-right: auto;
}

.export-modal-backdrop {
    z-index: var(--modal-export-z);
}

.export-preview-modal {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) auto auto;
    width: min(1280px, calc(100vw - 32px));
    height: min(820px, calc(100dvh - 32px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.export-preview-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.export-preview-title strong {
    color: var(--purple-850);
}

.export-preview-title span,
.export-page-toolbar span,
.export-preview-toolbar span,
.export-preview-actions span,
.export-legend-rows-header span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-preview-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    min-height: 0;
}

.export-page-sidebar,
.export-legend-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    background: #f8fafc;
}

.export-page-sidebar {
    border-right: 1px solid var(--line);
}

.export-legend-panel {
    align-content: start;
    gap: 12px;
    padding: 12px;
    overflow: auto;
    border-left: 1px solid var(--line);
}

.export-page-toolbar,
.export-preview-toolbar,
.export-legend-rows-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.export-page-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

.export-page-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 8px;
    min-height: 58px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.export-page-row:hover,
.export-page-row.is-active {
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.export-page-row.is-rendered {
    box-shadow: inset 3px 0 0 #16a34a;
}

.export-page-number {
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.export-page-name,
.export-page-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-page-name {
    font-size: 13px;
    font-weight: 850;
}

.export-page-meta {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.export-preview-sheet {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: #e5e7eb;
}

.export-preview-page-frame {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.export-preview-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.export-preview-page-canvas {
    position: relative;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
    touch-action: none;
}

.export-preview-page-canvas > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #cbd5e1;
    object-fit: fill;
}

.export-preview-legend {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #111827;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    cursor: move;
    user-select: none;
}

.export-preview-legend-title {
    padding: 0.62em 10px 0.5em;
    border-bottom: 1px solid rgba(17, 24, 39, 0.16);
    font-size: 1.25em;
    font-weight: 900;
}

.export-preview-legend-table {
    display: grid;
}

.export-preview-legend-header,
.export-preview-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: start;
    gap: 8px;
    padding: 0.36em 10px;
}

.export-preview-legend-header {
    color: #374151;
    font-size: 0.9em;
    font-weight: 900;
    text-transform: uppercase;
}

.export-preview-legend-row {
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    font-size: 1em;
}

.export-preview-legend .legend-name span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.export-legend-section {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.export-basis-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.export-basis-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.export-basis-button:hover,
.export-basis-button.is-active {
    border-color: var(--line-strong);
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.export-basis-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.export-crop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.export-control.export-crop-control {
    grid-template-columns: 44px minmax(0, 1fr);
}

.export-crop-control input[type="number"] {
    width: 100%;
}

.export-control {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
}

.export-control input[type="text"] {
    grid-column: 2 / -1;
}

.export-control input[type="text"],
.export-control input[type="number"],
.export-legend-row-editor input[type="text"] {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--control-bg);
    font: inherit;
}

.export-control input[type="range"] {
    width: 100%;
}

.export-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
}

.export-check input,
.export-legend-row-editor input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.export-legend-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.export-legend-actions .secondary-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.export-legend-rows {
    padding: 0;
    overflow: hidden;
}

.export-legend-row-editor {
    display: grid;
    grid-template-columns: 18px 18px minmax(0, 1fr) 34px 30px 30px;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    border-top: 1px solid var(--line);
}

.export-legend-row-count {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.export-legend-row-editor .icon-button {
    width: 30px;
    height: 30px;
}

.export-preview-status {
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 13px;
    font-weight: 700;
}

.export-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.export-preview-actions > span {
    margin-right: auto;
}

.project-start-modal {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: min(1160px, calc(100vw - 80px));
    height: min(520px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.project-start-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.project-start-title span {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(109, 54, 197, 0.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(109, 54, 197, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(251, 248, 255, 0.9), #ffffff 260px);
    background-size: 28px 28px, 28px 28px, auto;
}

.project-start-modal--wizard {
    grid-template-rows: 54px minmax(0, 1fr);
    width: min(1240px, calc(100vw - 64px));
    height: min(820px, calc(100dvh - 48px));
}

.project-setup-shell {
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    min-height: 0;
    padding: 18px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(109, 54, 197, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(109, 54, 197, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #fbf8ff, #ffffff 280px);
    background-size: 28px 28px, 28px 28px, auto;
}

.project-setup-rail,
.project-setup-panel {
    min-height: 0;
    border: 1px solid rgba(222, 211, 239, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-tight);
}

.project-setup-rail {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    overflow: auto;
}

.project-setup-stage-pill {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.project-setup-stage-pill:hover,
.project-setup-stage-pill:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.project-setup-stage-pill.is-active {
    border-color: rgba(128, 80, 223, 0.42);
    background: linear-gradient(135deg, rgba(248, 245, 255, 0.98), #ffffff);
    box-shadow: 0 8px 18px rgba(128, 80, 223, 0.14);
}

.project-setup-stage-pill.needs-attention {
    border-color: rgba(185, 28, 28, 0.3);
}

.project-setup-stage-pill.needs-attention .project-setup-stage-copy span {
    color: #b91c1c;
}

.project-setup-stage-pill.is-ready .project-setup-stage-index {
    color: #ffffff;
    background: #166534;
}

.project-setup-stage-index {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    color: #ffffff;
    background: var(--purple-700);
    font-size: 14px;
    font-weight: 900;
}

.project-setup-stage-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.project-setup-stage-copy strong,
.project-setup-stage-copy span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-setup-stage-copy strong {
    color: var(--purple-950);
    font-size: 15px;
    font-weight: 900;
}

.project-setup-stage-copy span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.project-setup-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 18px;
    overflow: auto;
}

.project-setup-stage-header {
    display: grid;
    gap: 4px;
}

.project-setup-stage-header strong {
    color: var(--purple-950);
    font-size: 24px;
    font-weight: 900;
}

.project-setup-stage-header span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 750;
}

.project-setup-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.project-setup-section {
    display: grid;
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid rgba(128, 80, 223, 0.18);
}

.project-setup-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.project-setup-section-heading strong {
    color: var(--purple-950);
    font-size: 14px;
    font-weight: 900;
}

.project-setup-section-heading span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.project-setup-project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
    align-items: start;
    gap: 12px;
}

.project-setup-client-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.project-setup-location-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 12px;
}

.project-setup-import-trigger {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    align-self: end;
    color: var(--purple-850);
    background: rgba(248, 245, 255, 0.86);
    cursor: pointer;
}

.project-setup-import-trigger:hover,
.project-setup-import-trigger:focus-within {
    border-color: var(--purple-700);
    background: var(--purple-100);
}

.project-setup-import-trigger svg {
    width: 18px;
    height: 18px;
}

.project-setup-import-trigger span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.project-setup-import-trigger strong {
    color: var(--purple-950);
    font-size: 12px;
    font-weight: 900;
}

.project-setup-import-trigger small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-setup-full-field {
    grid-column: 1 / -1;
}

.project-setup-wide-field {
    grid-column: span 3;
}

.project-setup-short-field {
    grid-column: span 2;
}

.project-setup-third-field {
    grid-column: span 2;
}

.project-start-field small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
}

.project-start-field.has-error > label,
.project-start-field.has-error small {
    color: #b91c1c;
}

.project-start-field em {
    color: #b91c1c;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    text-transform: none;
}

.project-start-field.has-error input {
    border-color: rgba(185, 28, 28, 0.45);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.project-setup-upload-strip {
    display: grid;
    gap: 10px;
}

.project-setup-upload-card,
.project-setup-placeholder-card,
.project-setup-source-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 12px;
    min-height: 96px;
    padding: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: rgba(248, 245, 255, 0.86);
    text-align: left;
}

.project-setup-upload-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.project-setup-upload-card:hover,
.project-setup-upload-card:focus-within {
    border-color: var(--purple-700);
    background: var(--purple-100);
}

.project-setup-upload-card:focus-within {
    outline: 2px solid var(--purple-500);
    outline-offset: 2px;
}

.project-setup-upload-card.is-drag-over {
    border-style: solid;
    border-color: var(--purple-700);
    outline: 2px solid rgba(109, 54, 197, 0.24);
    outline-offset: 2px;
    background: var(--purple-100);
}

.project-setup-upload-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.project-setup-upload-input:disabled { cursor: not-allowed; }

.project-setup-upload-card.is-disabled,
.project-setup-placeholder-card:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.project-setup-upload-card svg,
.project-setup-placeholder-card svg,
.project-setup-source-card svg {
    grid-row: 1 / span 3;
    width: 22px;
    height: 22px;
}

.project-setup-upload-card span,
.project-setup-placeholder-card,
.project-setup-source-card {
    min-width: 0;
}

.project-setup-upload-card strong,
.project-setup-upload-card small,
.project-setup-placeholder-card strong,
.project-setup-placeholder-card small,
.project-setup-source-card strong,
.project-setup-source-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-setup-upload-card strong,
.project-setup-placeholder-card strong,
.project-setup-source-card strong {
    grid-column: 2;
    color: var(--purple-950);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.project-setup-upload-card small,
.project-setup-placeholder-card small,
.project-setup-source-card small {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.project-setup-card-status {
    justify-self: end;
    min-width: max-content;
    padding: 4px 8px;
    border: 1px solid rgba(128, 80, 223, 0.2);
    border-radius: 999px;
    color: var(--purple-850);
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.project-setup-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.project-setup-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-setup-source-card {
    border-style: solid;
    border-color: rgba(22, 101, 52, 0.28);
    background: rgba(240, 253, 244, 0.78);
}

.project-setup-card-status.is-available {
    color: #166534;
    border-color: rgba(22, 101, 52, 0.24);
    background: rgba(255, 255, 255, 0.82);
}

.project-setup-source-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.project-setup-inline-status {
    padding: 9px 11px;
    border: 1px solid rgba(128, 80, 223, 0.2);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 12px;
    font-weight: 800;
}

.project-setup-plan-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(22, 101, 52, 0.22);
    border-radius: var(--radius);
    background: rgba(240, 253, 244, 0.68);
}

.project-setup-plan-summary > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.project-setup-plan-summary span,
.project-setup-review-heading span,
.project-setup-review-areas span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-setup-plan-summary strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-setup-empty-state {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 150px;
    padding: 18px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: rgba(248, 245, 255, 0.5);
    text-align: center;
}

.project-setup-empty-state--compact {
    min-height: 112px;
}

.project-setup-empty-state svg {
    width: 28px;
    height: 28px;
    color: var(--purple-700);
}

.project-setup-empty-state strong {
    color: var(--purple-950);
    font-size: 14px;
    font-weight: 900;
}

.project-setup-empty-state span {
    max-width: 440px;
    font-size: 12px;
    font-weight: 700;
}

.project-setup-card-grid--compact .project-setup-placeholder-card {
    min-height: 64px;
}

.project-setup-card-grid--compact {
    grid-template-columns: 1fr;
}

.project-setup-schedule-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.project-setup-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-setup-table-header strong {
    color: var(--purple-950);
    font-size: 15px;
    font-weight: 900;
}

.project-setup-schedule-table {
    display: grid;
    gap: 6px;
    min-width: 0;
    overflow: auto;
}

.project-setup-schedule-head,
.project-setup-schedule-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) 145px minmax(150px, 1fr) 70px 160px minmax(140px, 1fr) 82px 84px;
    align-items: center;
    gap: 8px;
    min-width: 1080px;
}

.project-setup-schedule-head {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-setup-schedule-row {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.project-setup-schedule-row.is-incomplete {
    border-color: rgba(180, 83, 9, 0.38);
    background: rgba(255, 251, 235, 0.72);
}

.project-setup-schedule-row input,
.project-setup-schedule-row select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: #ffffff;
}

.project-setup-row-status {
    color: #92400e;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-setup-row-status.is-included {
    color: #166534;
}

.project-setup-type-summary {
    display: grid;
    min-width: 0;
}

.project-setup-type-summary strong,
.project-setup-type-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-setup-type-summary small {
    color: var(--text-muted);
    font-size: 11px;
}

.project-setup-type-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.project-setup-review-grid {
    display: grid;
    gap: 12px;
}

.project-setup-review-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.project-setup-review-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-setup-review-heading > div {
    display: grid;
    gap: 2px;
}

.project-setup-review-heading strong {
    color: var(--purple-950);
    font-size: 15px;
    font-weight: 900;
}

.project-setup-review-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.project-setup-review-card dl > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.project-setup-review-card dt {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-setup-review-card dd,
.project-setup-review-card p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.project-setup-review-warning {
    padding: 8px 10px;
    border-radius: var(--radius);
    color: #92400e;
    background: rgba(255, 251, 235, 0.9);
    font-size: 12px;
    font-weight: 800;
}

.project-setup-review-areas {
    display: grid;
    gap: 3px;
}

.project-setup-review-areas strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.project-setup-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.project-setup-action-spacer {
    flex: 1 1 auto;
}

.project-start-hero {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 1px 2px;
}

.project-start-hero-copy {
    min-width: 0;
}

.project-start-session-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.project-start-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(128, 80, 223, 0.24);
    border-radius: 999px;
    color: var(--purple-950);
    background: rgba(251, 248, 255, 0.9);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.project-start-session-pill svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.project-start-session-kicker {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.project-start-identity-pill strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-start-logout-form {
    display: flex;
    margin: 0;
}

button.project-start-logout-button {
    cursor: pointer;
    color: var(--purple-700);
    background: #ffffff;
}

button.project-start-logout-button:hover {
    border-color: rgba(109, 54, 197, 0.44);
    background: var(--purple-100);
}

button.project-start-logout-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 2px;
}

.project-start-launch-content {
    display: grid;
    gap: 6px;
}

.project-start-library-list {
    grid-template-rows: auto minmax(0, 1fr);
}

.project-start-project-item {
    min-height: 50px;
}

.project-start-project-item .library-list-item-select {
    padding-block: 6px;
}

.project-start-project-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.project-start-project-item .library-list-item-actions {
    flex-wrap: nowrap;
    padding-block: 3px;
}

.project-start-brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(128, 80, 223, 0.24);
    border-radius: var(--radius);
    color: #ffffff;
    background: linear-gradient(135deg, var(--purple-700), var(--magenta));
}

.project-start-brand-mark svg {
    width: 16px;
    height: 16px;
}

.project-start-hero-copy > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--purple-950);
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.project-start-close {
    align-self: start;
}

.project-start-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.project-start-empty svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.project-start-status {
    padding: 9px 10px;
    border: 1px solid rgba(222, 211, 239, 0.92);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--surface-lavender);
    font-size: 13px;
}

.project-start-browser-recovery {
    display: grid;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(180, 83, 9, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 251, 235, 0.78);
}

.project-start-browser-recovery-heading strong {
    color: #92400e;
    font-size: 13px;
}

.project-start-browser-recovery-heading p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.project-start-browser-recovery-list {
    display: grid;
    gap: 5px;
}

.project-start-browser-recovery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.74);
}

.project-start-browser-recovery-item > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.project-start-browser-recovery-item strong,
.project-start-browser-recovery-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-browser-recovery-item strong {
    color: var(--purple-950);
    font-size: 12px;
}

.project-start-browser-recovery-item span {
    color: var(--text-muted);
    font-size: 10px;
}

.project-start-browser-recovery-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.project-start-panel {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
}

.project-start-create-panel,
.project-start-library-panel {
    padding: 8px;
    border: 1px solid rgba(222, 211, 239, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.project-start-create-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: end;
    min-height: 96px;
}

.project-start-library-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.project-start-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-start-field input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-transform: none;
}

.project-start-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.project-start-list-header {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(260px, 360px) auto;
    align-items: center;
    gap: 8px;
}

.project-start-list-header strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--purple-950);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-list-header span {
    display: block;
    margin-top: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.project-start-search {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 28px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text-muted);
}

.project-start-search:focus-within {
    border-color: var(--purple-700);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.14);
}

.project-start-search svg {
    width: 14px;
    height: 14px;
}

.project-start-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}

.library-list-surface {
    display: grid;
    gap: 6px;
    min-height: 0;
    padding: 8px;
    border: 1px solid rgba(222, 211, 239, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.library-list-surface-header {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(190px, 320px) auto;
    align-items: center;
    gap: 8px;
}

.library-list-surface-heading {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.library-list-surface-heading > strong {
    overflow: hidden;
    color: var(--purple-950);
    font-size: 0.9rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-list-surface-heading > span,
.library-list-surface-supplement {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.library-list-surface-supplement > * {
    margin: 2px 0 0;
}

.library-list-search {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 28px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-muted);
    background: #ffffff;
}

.library-list-search:focus-within {
    border-color: var(--purple-700);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.14);
}

.library-list-search svg {
    width: 14px;
    height: 14px;
}

.library-list-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}

.library-list-surface-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.library-list-scroll-region {
    position: relative;
    min-height: 0;
}

.library-list-scroll-region.has-overflow::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 32px;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
}

.project-start-library-list .library-list-scroll-region.has-overflow::after {
    height: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18));
}

.library-list-items {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    max-height: min(32dvh, 300px);
    overflow: auto;
}

.library-list-scroll-cue {
    position: absolute;
    z-index: 1;
    bottom: 4px;
    left: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    pointer-events: none;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--purple-850);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-tight);
}

.library-list-scroll-cue svg {
    width: 14px;
    height: 14px;
}

.library-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 53px;
    overflow: hidden;
    border: 1px solid rgba(196, 174, 236, 0.92);
    border-radius: 8px;
    background: rgba(248, 245, 255, 0.86);
    box-shadow: var(--shadow-tight);
}

.library-list-item-select {
    display: grid;
    min-width: 0;
    padding: 6.65px 12px;
    border: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
}

.library-list-item-select:hover,
.library-list-item-select:focus-visible {
    outline: none;
    background: var(--surface-lavender);
}

.library-list-item-copy {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    padding: 6.65px 12px;
}

.library-list-item-select .library-list-item-copy {
    padding: 0;
}

.library-list-item-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 3.8px 6px;
    border-left: 1px solid rgba(128, 80, 223, 0.26);
    background: rgba(255, 255, 255, 0.5);
}

.library-list-item-expanded {
    display: grid;
    grid-column: 1 / -1;
}

.library-list-icon-action {
    display: grid;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
}

.library-list-icon-action svg {
    width: 16px;
    height: 16px;
}

.library-list-icon-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.library-list-icon-action.is-danger {
    border-color: rgba(220, 38, 38, 0.52);
    color: #dc2626;
    background: #ffffff;
}

.library-list-icon-action.is-favorite {
    border-color: rgba(214, 144, 23, 0.52);
    color: #a16207;
    background: #fff9e8;
}

.library-list-chip {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    background: var(--surface-lavender);
    font-size: 0.66rem;
    font-weight: 800;
}

.library-list-chip.is-root {
    border-color: rgba(122, 55, 203, 0.28);
    color: var(--purple-850);
}

.project-start-projects {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    max-height: min(32dvh, 300px);
    overflow: auto;
}

.project-start-project-scroll-region {
    position: relative;
    min-height: 0;
}

.project-start-project-scroll-region.has-overflow::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 32px;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
}

.project-start-scroll-cue {
    position: absolute;
    z-index: 1;
    bottom: 4px;
    left: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    pointer-events: none;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--purple-850);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-tight);
}

.project-start-scroll-cue svg {
    width: 14px;
    height: 14px;
}

.project-start-project-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) minmax(250px, 1.25fr) minmax(180px, 1fr) minmax(170px, 0.85fr);
    align-items: center;
    gap: 7px 14px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.project-start-project-row:hover,
.project-start-project-row:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    background: var(--surface-lavender);
}

.project-start-project-name,
.project-start-project-counts,
.project-start-project-detail,
.admin-person-list-name,
.admin-person-list-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-project-name,
.admin-person-list-name {
    color: var(--purple-950);
    font-size: 13px;
    font-weight: 850;
}

.project-start-project-detail,
.admin-person-list-detail,
.project-start-empty {
    color: var(--text-muted);
    font-size: 11px;
}

.project-start-project-detail {
    font-variant-numeric: tabular-nums;
}

.project-start-project-metrics {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.project-start-project-metric {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    gap: 4px;
    padding: 1px 6px;
    border: 1px solid rgba(128, 80, 223, 0.2);
    border-radius: 6px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.project-start-project-availability-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.project-start-project-metric-label {
    color: var(--text-muted);
}

.project-start-project-metric strong {
    color: var(--purple-950);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}

.project-start-project-availability.is-available {
    color: var(--green);
    border-color: rgba(4, 120, 87, 0.28);
    background: rgba(240, 253, 244, 0.78);
}

.project-start-project-availability.is-in-use {
    color: var(--amber);
    border-color: rgba(180, 83, 9, 0.28);
    background: rgba(255, 251, 235, 0.82);
}

.project-start-project-availability strong {
    color: currentColor;
}

.project-start-project-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-start-empty {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 86px;
    padding: 18px 10px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.project-start-file-input {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kos-project-list {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.kos-project-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kos-project-list-items {
    display: grid;
    gap: 6px;
    max-height: 290px;
    overflow: auto;
}

.kos-project-row-shell,
.project-start-project-row-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(196, 174, 236, 0.92);
    border-radius: 18px;
    background: rgba(248, 245, 255, 0.86);
    box-shadow: 0 8px 18px rgba(34, 20, 55, 0.07);
}

.kos-project-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.35fr) minmax(190px, 1.3fr) minmax(120px, 1fr) minmax(130px, 0.8fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
}

.project-start-project-row.kos-project-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 50px;
    padding: 7px 12px;
}

.project-start-project-row-shell {
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) 120px;
    border-radius: 8px;
    box-shadow: var(--shadow-tight);
}

.kos-project-row:hover,
.kos-project-row:focus-visible {
    outline: none;
    background: var(--surface-lavender);
}

.project-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 6px;
    border-left: 1px solid rgba(128, 80, 223, 0.26);
    background: rgba(255, 255, 255, 0.5);
}

.project-row-action {
    display: grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    font-weight: 800;
}

.project-row-action svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.project-row-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.project-row-action.is-danger {
    border-color: rgba(220, 38, 38, 0.52);
    color: #dc2626;
    background: #ffffff;
}

.kos-project-name,
.kos-project-meta,
.kos-project-source,
.kos-project-updated {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kos-project-name {
    font-weight: 800;
}

.kos-project-meta,
.kos-project-source,
.kos-project-updated,
.empty-project-list {
    color: var(--text-muted);
    font-size: 12px;
}

.empty-project-list {
    padding: 18px 10px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.manage-types-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.type-list {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    padding: 12px;
    overflow: auto;
    border-right: 1px solid var(--panel-border);
    background: var(--surface-lavender);
}

.type-list-button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    min-height: 44px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.type-list-button > .designer-symbol-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    justify-self: center;
}

.type-list-button > span:not(.designer-symbol-icon) {
    grid-row: 1;
    grid-column: 2;
}

.type-list-button > small {
    grid-row: 2;
    grid-column: 2;
}

.type-list-button.is-active {
    border-color: var(--accent);
    background: var(--purple-100);
    box-shadow: inset 3px 0 0 var(--accent);
}

.type-list-button span {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-list-button small {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.type-editor {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    min-width: 0;
    padding: 14px;
    overflow: auto;
}

.object-library-symbol-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface-lavender);
}

.object-library-symbol-preview strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-editor label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.type-editor input,
.type-editor select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: #ffffff;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

.command-console-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 24px 24px;
    background: rgba(15, 23, 42, 0.28);
}

.command-console {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
}

.command-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.command-console-header div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.command-console-header span {
    color: #64748b;
    font-size: 12px;
}

.command-console-body {
    display: grid;
    grid-template-rows: auto minmax(180px, 1fr) auto auto minmax(120px, 0.7fr);
    gap: 10px;
    min-height: 0;
    padding: 14px;
}

.command-console-help,
.command-console-actions,
.command-console-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.command-console-input {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.45;
}

.command-console-output {
    min-height: 120px;
    overflow: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.45;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
}

.link-button {
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.ai-help-page {
    min-height: 100vh;
    padding: 32px;
    background: #f1f5f9;
}

.ai-help-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

.ai-help-panel h1,
.ai-help-panel h2 {
    margin: 0 0 10px;
}

.ai-help-panel p {
    color: #475569;
}

.ai-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.ai-help-grid article {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.ai-object-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    padding: 0;
    list-style: none;
}

.ai-object-list li {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ai-object-list span {
    color: #64748b;
    font-size: 13px;
}

.login-page,
.admin-page {
    width: 100vw;
    height: 100dvh;
    overflow: auto;
}

.login-page {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    padding: 24px;
}

.login-panel {
    align-self: center;
    display: grid;
    gap: 18px;
    width: min(420px, calc(100vw - 40px));
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand h1 {
    margin: 0;
    color: var(--purple-950);
    font-size: 1.1rem;
}

.login-brand span {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-form label,
.admin-add-user label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.login-form input,
.admin-add-user input {
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.login-status {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 750;
}

.login-status.error {
    border: 1px solid #fecaca;
    color: var(--red);
    background: #fff1f2;
}

.login-status.warning {
    border: 1px solid #fde68a;
    color: var(--amber);
    background: #fffbeb;
}

.login-footer {
    align-self: end;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    padding: 0.3rem 0.5rem;
    text-align: center;
}

.auth-redirect {
    padding: 24px;
}

.admin-page {
    display: grid;
    padding: 18px;
}

.admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    width: min(1240px, 100%);
    margin: 0 auto;
    min-height: calc(100dvh - 36px);
}

.admin-shell--blocked,
.admin-shell--loading {
    grid-template-columns: minmax(0, 720px);
    align-content: start;
}

.admin-sidebar,
.admin-workspace,
.admin-panel,
.admin-table-panel {
    border: 1px solid rgba(119, 82, 178, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-tight);
}

.admin-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: 14px;
}

.admin-sidebar-header {
    display: grid;
    gap: 14px;
    padding: 4px;
}

.admin-sidebar-menu {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(119, 82, 178, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.38);
}

.admin-company-picker {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-company-picker select,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-row input,
.admin-detail-edit-form input {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.admin-company-picker select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-company-picker small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-rail {
    display: grid;
    gap: 8px;
    align-content: start;
}

.admin-rail-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.admin-rail-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.admin-rail-copy strong,
.admin-rail-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-rail-copy small {
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-rail-button.is-active .admin-rail-copy small {
    color: var(--purple-700);
}

.admin-rail-button.is-active {
    border-color: rgba(119, 82, 178, 0.22);
    background: var(--surface-lavender);
    color: var(--purple-950);
}

.admin-sidebar-footer {
    display: grid;
    gap: 12px;
    padding: 4px;
}

.admin-top-actions,
.admin-actions,
.admin-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-workspace {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 18px;
    min-width: 0;
}

.admin-workspace-header,
.admin-section-header,
.admin-list-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-workspace-header {
    flex-wrap: wrap;
}

.admin-workspace-header h2,
.admin-section-header h3 {
    margin: 0;
    color: var(--purple-950);
    font-size: 1rem;
}

.admin-workspace-header p,
.admin-section-header p,
.admin-list-pane-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.admin-workspace-context {
    display: grid;
    min-width: min(220px, 100%);
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid rgba(119, 82, 178, 0.18);
    border-radius: var(--radius);
    background: var(--surface-lavender);
}

.admin-workspace-context span,
.admin-workspace-context small {
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-workspace-context strong {
    overflow: hidden;
    color: var(--purple-950);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-panel,
.admin-table-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.admin-panel-eyebrow {
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-panel p,
.admin-inline-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.admin-guidance-actions {
    margin-top: auto;
}

.admin-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-confirm-row input {
    margin-top: 2px;
}

.catalog-review-table-wrap {
    max-height: 420px;
    overflow: auto;
}

.admin-two-pane {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.admin-list-pane,
.admin-detail-pane {
    display: grid;
    gap: 14px;
    align-content: start;
}

.admin-list {
    display: grid;
    gap: 10px;
}

.admin-list-item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.admin-list-item.is-active {
    border-color: rgba(119, 82, 178, 0.24);
    background: var(--surface-lavender);
}

.admin-company-detail-card {
    gap: 16px;
}

.admin-detail-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-detail-card-header strong {
    display: block;
    margin-top: 6px;
    color: var(--purple-950);
    font-size: 1.05rem;
}

.admin-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-detail-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-detail-summary-strip > div {
    display: grid;
    gap: 4px;
    min-height: 70px;
    padding: 12px;
    border: 1px solid rgba(119, 82, 178, 0.16);
    border-radius: var(--radius);
    background: var(--surface-lavender);
}

.admin-detail-summary-strip span,
.admin-detail-read-grid dt,
.admin-detail-edit-form label span {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-detail-summary-strip strong,
.admin-detail-read-grid dd {
    margin: 0;
    color: var(--purple-950);
    font-weight: 850;
}

.admin-detail-read-grid {
    display: grid;
    gap: 12px;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-detail-read-grid > div,
.admin-detail-edit-form {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.admin-detail-read-grid dd {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-detail-edit-form label {
    display: grid;
    gap: 6px;
}

.admin-detail-edit-form input[aria-invalid="True"],
.admin-detail-edit-form input[aria-invalid="true"] {
    border-color: rgba(199, 54, 79, 0.62);
    outline: 2px solid rgba(199, 54, 79, 0.12);
}

.admin-field-error {
    color: #a72138;
    font-size: 0.8rem;
    font-weight: 800;
}

.admin-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.admin-form-grid label,
.admin-form-row label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-form-action {
    display: flex;
    align-items: end;
}

.admin-form-row {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.admin-form-row > label {
    min-width: 0;
}

.admin-user-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.admin-user-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: var(--surface);
}

.admin-project-table {
    min-width: 980px;
}

.admin-project-table-wrap {
    max-height: min(52dvh, 520px);
    overflow: auto;
}

.admin-user-table th,
.admin-user-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 0.84rem;
}

.admin-project-table td {
    min-height: 56px;
    vertical-align: middle;
}

.admin-project-table tbody tr {
    height: 56px;
}

.admin-user-table th {
    color: var(--text-soft);
    background: var(--surface-lavender);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-user-table tr:last-child td {
    border-bottom: 0;
}

.admin-role-chip,
.admin-result {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid var(--purple-200);
    border-radius: var(--radius);
    color: var(--purple-850);
    background: var(--purple-100);
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-role-chip.muted {
    border-color: var(--line);
    color: var(--text-muted);
    background: var(--surface-lavender);
}

.admin-role-chip.is-root,
.admin-protected-note {
    border-color: rgba(122, 55, 203, 0.28);
    color: var(--purple-850);
    background: var(--surface-lavender);
}

.admin-count-chip {
    align-self: flex-start;
}

.admin-people-list {
    display: grid;
    gap: 6px;
    max-height: min(52dvh, 520px);
    overflow: auto;
}

.admin-people-list-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.admin-people-search {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: var(--surface);
}

.admin-people-search:focus-within {
    border-color: var(--purple-700);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.14);
}

.admin-people-search svg {
    width: 16px;
    height: 16px;
}

.admin-people-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}

.admin-person-row-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.admin-person-content {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 46px;
    padding: 7px 10px;
}

.admin-person-identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-person-name,
.admin-person-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-person-name {
    color: var(--purple-950);
    font-size: 0.84rem;
    font-weight: 850;
}

.admin-person-email {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.admin-person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.admin-person-scope-pill {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-soft);
    background: var(--surface-lavender);
    font-size: 0.66rem;
    font-weight: 800;
}

.admin-person-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 6px 8px;
    border-left: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.58);
}

.admin-person-action {
    display: grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

.admin-person-action svg {
    width: 17px;
    height: 17px;
}

.admin-person-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.admin-password-reset {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, 260px) auto;
    align-items: end;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-lavender);
}

.admin-password-reset > div:first-child {
    display: grid;
    gap: 3px;
}

.admin-password-reset strong {
    color: var(--purple-950);
    font-size: 0.8rem;
}

.admin-password-reset > div:first-child span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.admin-password-reset label {
    display: grid;
    gap: 5px;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-password-reset input {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.admin-protected-note {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid rgba(122, 55, 203, 0.28);
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-project-name-cell {
    min-width: 240px;
}

.admin-project-name-readout {
    display: block;
    max-width: 320px;
    margin-bottom: 6px;
    overflow: hidden;
    color: var(--purple-950);
    font-size: 0.84rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-project-name-input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.admin-project-name-input:focus {
    border-color: var(--purple-500);
    outline: 2px solid rgba(145, 102, 223, 0.18);
}

.admin-empty {
    color: var(--text-soft);
}

.admin-empty-state {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.58);
}

.admin-empty-state strong {
    color: var(--purple-950);
}

.admin-empty-state--warm {
    border-style: solid;
    border-color: rgba(119, 82, 178, 0.22);
    background: var(--surface-lavender);
}

.designer-blocked-state {
    display: grid;
    place-items: center;
    min-height: 420px;
}

.designer-blocked-card {
    display: grid;
    gap: 10px;
    width: min(520px, 100%);
    padding: 24px;
    border: 1px solid rgba(119, 82, 178, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-tight);
}

.designer-blocked-card strong {
    color: var(--purple-950);
}

@media (max-width: 1180px) {
    .designer-topbar {
        grid-template-columns: minmax(300px, 320px) minmax(0, 1fr) auto;
        gap: 6px;
    }

    .admin-shell,
    .admin-two-pane,
    .admin-panel-grid,
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-person-row-shell {
        grid-template-columns: 1fr;
    }

    .admin-people-list-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-person-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        padding: 8px 10px;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .admin-password-reset {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .modal-backdrop {
        padding: 12px;
    }

    .admin-actions,
    .admin-top-actions,
    .admin-workspace-header,
    .admin-section-header,
    .admin-list-pane-header {
        align-items: stretch;
        flex-direction: column;
    }

    .library-list-surface-header {
        grid-template-columns: 1fr;
    }

    .library-list-surface-actions {
        justify-content: flex-start;
    }

    .library-list-item {
        grid-template-columns: 1fr;
    }

    .library-list-item-actions {
        justify-content: flex-start;
        border-top: 1px solid rgba(128, 80, 223, 0.26);
        border-left: 0;
    }

    .project-start-project-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-start-hero {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .project-start-session-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .project-start-project-metrics {
        justify-content: flex-start;
    }

    .manage-types-modal,
    .schedule-modal,
    .open-project-modal,
    .project-start-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    .schedule-modal {
        height: calc(100dvh - 24px);
    }

    .schedule-modal-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-builder-overview,
    .schedule-close-choice {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .schedule-builder-overview {
        display: flex;
    }

    .schedule-builder-modes {
        width: 100%;
    }

    .schedule-mode {
        flex: 1;
    }

    .schedule-review-panel li {
        grid-template-columns: 1fr;
    }

    .schedule-search {
        width: 100%;
        min-width: 0;
    }

    .manage-types-modal {
        height: calc(100dvh - 24px);
    }

    .manage-types-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 34dvh) minmax(0, 1fr);
    }

    .type-list {
        border-right: 0;
        border-bottom: 1px solid var(--panel-border);
    }

    .modal-actions,
    .schedule-actions,
    .edit-lock-actions,
    .print-preview-actions {
        flex-wrap: wrap;
    }


    .selectable-menu-pill.is-detailed .selectable-menu-pill-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "timestamp"
            "metrics"
            "detail";
        gap: 6px;
    }

    .selectable-menu-pill-timestamp,
    .selectable-menu-pill-detail {
        justify-self: start;
        text-align: left;
    }

    .selectable-menu-pill-detail {
        max-width: 100%;
    }
}

.blazor-error-boundary {
    padding: 1rem;
    color: #ffffff;
    background: #b32121;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

@media (max-width: 980px) {
    .designer-topbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .designer-top-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .open-actions-grid {
        grid-template-columns: 1fr;
    }

    .print-preview-modal {
        height: min(780px, calc(100dvh - 32px));
        width: min(720px, calc(100vw - 32px));
    }

    .print-preview-body {
        grid-template-columns: 1fr;
        grid-template-rows: 190px minmax(0, 1fr);
    }

    .print-page-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .print-page-list {
        grid-auto-flow: column;
        grid-auto-columns: 160px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .print-page-row {
        grid-template-columns: 20px 52px minmax(0, 1fr);
        min-height: 76px;
    }

    .print-page-row img {
        width: 52px;
        height: 62px;
    }

    .export-preview-modal {
        width: min(760px, calc(100vw - 32px));
        height: min(820px, calc(100dvh - 32px));
    }

    .export-preview-body {
        grid-template-columns: 1fr;
        grid-template-rows: 150px minmax(0, 1fr) 260px;
    }

    .export-page-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .export-page-list {
        grid-auto-flow: column;
        grid-auto-columns: 170px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .export-legend-panel {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .kos-project-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .project-start-project-row.kos-project-row {
        grid-template-columns: 1fr;
    }

    .kos-project-row-shell,
    .project-start-project-row-shell {
        grid-template-columns: 1fr;
    }

    .project-row-actions {
        border-left: 0;
        border-top: 1px solid rgba(128, 80, 223, 0.26);
    }

    .project-row-action {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .project-start-actions-grid,
    .project-start-list-header,
    .project-start-project-row {
        grid-template-columns: 1fr;
    }

    .project-start-create-panel {
        grid-template-columns: 1fr;
    }

    .project-start-modal--wizard {
        width: calc(100vw - 24px);
    }

    .project-setup-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: auto;
    }

    .project-setup-rail {
        grid-auto-flow: column;
        grid-auto-columns: minmax(210px, 1fr);
        overflow-x: auto;
    }

    .project-setup-form-grid,
    .project-setup-card-grid,
    .project-setup-project-grid,
    .project-setup-client-grid,
    .project-setup-location-grid,
    .project-setup-plan-summary,
    .project-setup-review-card dl {
        grid-template-columns: 1fr;
    }

    .project-setup-full-field,
    .project-setup-wide-field,
    .project-setup-short-field,
    .project-setup-third-field {
        grid-column: auto;
    }

    .project-setup-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .project-setup-actions {
        flex-wrap: wrap;
    }

    .project-setup-actions .primary-button,
    .project-setup-actions .secondary-button {
        flex: 1 1 140px;
    }

    .project-start-library-panel {
        min-height: 260px;
    }

    .project-start-project-tags {
        grid-column: auto;
    }

    .project-start-actions {
        justify-content: stretch;
    }

    .project-start-actions .primary-button {
        width: 100%;
    }
}

@media (min-width: 1100px) and (max-width: 1322px) {
    .designer-topbar:not(.is-plan-setup) .toolbar-button {
        min-width: 34px;
        padding: 0 8px;
    }

    .designer-topbar:not(.is-plan-setup) .top-toolbar .toolbar-button > span {
        display: none;
    }
}

@media (max-width: 1099px) {
    .toolbar-button {
        min-width: 34px;
        padding: 0 8px;
    }

    .top-toolbar .toolbar-button > span {
        display: none;
    }

    .wire-button span:last-child {
        display: inline;
    }

    .toolbar-group {
        gap: 5px;
        padding: 4px;
    }
}

@media (max-width: 720px) {
    .symbol-palette-reopen {
        display: none;
    }

    .wire-button span:last-child {
        display: inline;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .designer-app[data-shell-mode="drawer"] .left-panel,
    .designer-app[data-shell-mode="drawer"] .right-panel {
        max-width: calc(100vw - 72px);
    }
}

@media (max-width: 899px) {
    .designer-app {
        --designer-shell-gap: 8px;
        --designer-safe-bottom: 8px;
    }

    .designer-topbar,
    .designer-topbar.is-plan-setup {
        top: 8px;
        right: 8px;
        left: 8px;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-rows: auto;
        gap: 4px;
        min-height: 52px;
        padding: 0 6px;
    }

    .designer-topbar .designer-brand {
        display: contents;
    }

    .designer-brand-logo { grid-column: 1; grid-row: 1; width: 30px; height: 30px; }
    /* Compact project context stays below the narrow toolbar without an action row. */
    .designer-topbar .designer-brand-text {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 2px 0 6px;
    }
    .designer-topbar .designer-brand-title-row { display: none; }
    .designer-topbar .designer-brand-context { display: flex; gap: 8px; }
    .designer-topbar .designer-project-name { flex: 1 1 auto; grid-column: auto; grid-row: auto; max-width: 100%; }
    .designer-topbar .designer-save-status {
        grid-column: auto;
        grid-row: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 8px;
    }
    .designer-topbar .designer-save-summary { display: flex; min-width: 0; max-width: 100%; }
    .designer-topbar .designer-save-actions { flex: 0 0 auto; }

    .designer-topbar .top-toolbar-shell,
    .designer-topbar.is-plan-setup .top-toolbar-shell {
        grid-column: 2;
        grid-row: 1;
    }

    .designer-top-actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
    }

    .designer-account-menu > summary {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
    }

    .top-toolbar {
        align-items: center;
        gap: 2px;
        overflow: visible;
    }

    .toolbar-control-pill {
        gap: 0;
        padding: 0 2px;
        border-left: 0;
    }

    .toolbar-control-pill-header { display: none; }
    .toolbar-control-pill-actions { gap: 2px; }
    .toolbar-control-pill[aria-label="Edit"],
    .toolbar-control-pill[aria-label="Plan"] { display: none; }
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Plan"] { display: grid; }
    .toolbar-control-pill[aria-label="More"] { display: grid; }

    .toolbar-button,
    .toolbar-icon-button {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        padding: 0;
    }

    .top-toolbar > .designer-request-entry.toolbar-button {
        width: auto;
        padding: 0 8px;
        align-self: center;
        margin-bottom: 0;
    }

    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Canvas"] .toolbar-control-pill-actions > :nth-child(n + 3),
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Plan"] .toolbar-control-pill-actions > :nth-child(n + 2),
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Areas"] .toolbar-icon-button {
        display: none;
    }

    .plan-setup-toolbar-actions {
        margin-left: 0;
    }

    .plan-setup-toolbar-actions .plan-setup-cancel { display: none; }

    .designer-topbar .toolbar-popover {
        position: fixed;
        top: var(--designer-safe-top);
        right: 12px;
        left: auto;
        width: min(360px, calc(100vw - 24px));
        max-height: calc(100dvh - var(--designer-safe-top) - 12px);
        overflow: auto;
    }

    .designer-topbar .canvas-filter-menu {
        width: min(560px, calc(100vw - 24px));
    }

    .toolbar-overflow-menu { min-width: min(280px, calc(100vw - 24px)); }

    .designer-app[data-shell-mode="canvas-first"] .left-panel,
    .designer-app[data-shell-mode="canvas-first"] .right-panel {
        max-width: calc(100vw - 64px);
    }
}

@media (max-width: 599px) {
    .toolbar-control-pill[aria-label="Project"] .toolbar-control-pill-actions > button:first-child,
    .designer-topbar.is-plan-setup .toolbar-control-pill[aria-label="Areas"] .plan-setup-auto-adjust {
        display: none;
    }
}

/* Contextual Inspector panel and collapsed toolbar layouts. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.right-panel.is-contextual-inspector {
    width: min(var(--designer-expanded-panel-width), calc(100% - 28px));
    overflow: visible;
}

.right-panel.is-contextual-inspector.is-inspector-rail {
    bottom: auto;
    width: min(var(--designer-side-rail-width), calc(100% - 28px));
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
}

.contextual-inspector {
    --inspector-line: rgba(100, 67, 151, 0.16);
    --inspector-soft: #f7f3fc;
    --inspector-ink: #241b34;
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    color: var(--inspector-ink);
    background: #fffefa;
    border: 1px solid rgba(123, 88, 182, 0.2);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(42, 26, 68, 0.18);
}

.contextual-inspector[data-inspector-layout="rail"] {
    grid-template-rows: auto minmax(0, 1fr);
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    overflow: visible;
    background:
        linear-gradient(rgba(122, 85, 176, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 85, 176, 0.045) 1px, transparent 1px),
        #fffdf5;
    background-size: 19px 19px;
    border-radius: 27px;
}

.inspector-context-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 10px;
    padding: 12px;
    border: 1px solid rgba(129, 79, 219, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, #fbf8ff 0%, #f5f0fb 100%);
}

.inspector-context-icon,
.inspector-rail-popover-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(129, 79, 219, 0.36);
    border-radius: 14px;
    color: var(--purple-700);
    background: #ffffff;
}

.inspector-context-icon svg { width: 24px; height: 24px; }
.inspector-context-card > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.inspector-context-card strong { overflow: hidden; font-size: 17px; line-height: 1.15; text-overflow: ellipsis; }
.inspector-context-card span:not(.inspector-context-icon) { color: var(--text-muted); font-size: 12px; line-height: 1.25; }
.inspector-context-actions { display: inline-flex; align-items: center; gap: 2px; }

.inspector-read-only-note {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 10px 8px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #5e4b29;
    background: #fff4cd;
    font-size: 12px;
}

.inspector-read-only-note svg { width: 15px; height: 15px; }

.inspector-section-list {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 0;
    padding: 2px 10px 14px;
}

.contextual-inspector[data-inspector-layout="panel"] .inspector-section-list {
    overflow: auto;
}

.inspector-disclosure {
    position: relative;
}

.inspector-disclosure.is-panel {
    overflow: clip;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    background: #ffffff;
}

.inspector-disclosure-trigger {
    display: grid;
    grid-template-columns: 18px 20px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 0;
    color: var(--inspector-ink);
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 850;
}

.inspector-disclosure-trigger:hover,
.inspector-disclosure-trigger:focus-visible {
    background: var(--inspector-soft);
}

.inspector-disclosure-trigger svg { width: 18px; height: 18px; }
.inspector-disclosure-chevron { color: #7c708a; }
.inspector-disclosure-icon { color: var(--purple-850); }

.inspector-disclosure-content {
    display: grid;
    gap: 10px;
    padding: 2px 14px 14px;
}

.inspector-field-stack { display: grid; gap: 10px; }

.inspector-layer-groups { gap: 9px; }

.inspector-layer-pill {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    background: #ffffff;
}

.inspector-layer-pill-title {
    color: var(--purple-950);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.inspector-layer-search {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(101, 70, 145, 0.22);
    border-radius: 10px;
    color: var(--text-muted);
    background: #ffffff;
}

.inspector-layer-search:focus-within {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.12);
}

.inspector-layer-search svg { width: 16px; height: 16px; }

.inspector-layer-search input {
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--inspector-ink);
    background: transparent;
    font-size: 12px;
}

.inspector-layer-search-status {
    color: var(--text-muted);
    font-size: 10px;
}

.inspector-layer-type-list { display: grid; gap: 2px; }

.inspector-layer-search-empty {
    margin: 0;
    padding: 14px 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.inspector-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.inspector-field input,
.inspector-field select,
.inspector-field textarea,
.inspector-cable-row input,
.inspector-cable-row select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid rgba(101, 70, 145, 0.22);
    border-radius: 9px;
    color: var(--inspector-ink);
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.inspector-field textarea { resize: vertical; line-height: 1.35; }
.inspector-field input:disabled,
.inspector-field select:disabled,
.inspector-field textarea:disabled { color: #72697e; background: #f3f0f5; }

.inspector-switch-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
}

.inspector-switch-row > span { display: grid; gap: 2px; min-width: 0; }
.inspector-switch-row strong { font-size: 12px; }
.inspector-switch-row small { color: var(--text-muted); font-size: 10px; line-height: 1.25; }
.inspector-switch-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--purple-700); }

.inspector-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: #eee9f3;
}

.inspector-segmented button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    color: #61566d;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
}

.inspector-segmented button.is-active {
    color: #ffffff;
    background: var(--purple-700);
    box-shadow: 0 3px 8px rgba(93, 47, 158, 0.22);
}

.inspector-segmented svg { width: 15px; height: 15px; }
.inspector-help,
.inspector-empty { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.4; }

.inspector-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.inspector-action-grid button,
.inspector-wide-action {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
}

.inspector-action-grid button { justify-content: flex-start; }
.inspector-action-grid svg,
.inspector-wide-action svg { width: 15px; height: 15px; }
.inspector-wide-action { width: 100%; }

.inspector-mini-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--inspector-line);
    border-radius: 11px;
    background: #faf8fc;
}

.inspector-mini-card > strong { font-size: 11px; }
.inspector-cable-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 5px; }
.inspector-color-field input[type="color"] { height: 38px; padding: 4px; }

.inspector-rail-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px;
    align-items: center;
    padding: 12px 8px 7px;
    text-align: center;
}

.inspector-rail-heading strong { font-size: 11px; }
.inspector-rail-heading .icon-button { width: 24px; height: 24px; }
.inspector-rail-read-only { grid-column: 1 / -1; color: #7a5b17; font-size: 9px; font-weight: 850; text-transform: uppercase; }

.contextual-inspector[data-inspector-layout="rail"] .inspector-section-list {
    gap: 3px;
    padding: 2px 7px 12px;
    overflow: visible;
}

.inspector-disclosure.is-rail .inspector-disclosure-trigger {
    grid-template-columns: 1fr;
    gap: 5px;
    justify-items: center;
    min-height: 66px;
    padding: 7px 3px;
    border-radius: 12px;
    text-align: center;
    font-size: 10px;
}

.inspector-disclosure.is-rail .inspector-disclosure-trigger svg {
    width: var(--designer-side-rail-icon-size);
    height: var(--designer-side-rail-icon-size);
}

.inspector-disclosure.is-rail .inspector-disclosure-trigger[aria-expanded="true"] {
    color: #ffffff;
    background: var(--purple-700);
}

.contextual-inspector-layout-root {
    display: contents;
}

.inspector-rail-popover {
    position: fixed;
    top: var(--designer-safe-top);
    right: calc(var(--designer-shell-gap) + var(--designer-side-rail-width) + 12px);
    z-index: 45;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(340px, calc(100vw - var(--designer-side-rail-width) - 42px));
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    overflow: auto;
    border: 1px solid rgba(123, 88, 182, 0.22);
    border-radius: 18px;
    outline: 0;
    background: #fffefa;
    box-shadow: 0 20px 48px rgba(42, 26, 68, 0.24);
}

.inspector-rail-popover:focus-visible { box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.18), 0 20px 48px rgba(42, 26, 68, 0.24); }
.inspector-rail-popover > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 9px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--inspector-line); }
.inspector-rail-popover-icon { width: 38px; height: 38px; border-radius: 11px; }
.inspector-rail-popover-icon svg { width: 19px; height: 19px; }
.inspector-rail-popover > header strong { font-size: 15px; }
.inspector-rail-popover > .inspector-disclosure-content { padding: 12px; }

.toolbar-state-indicator {
    border-color: rgba(123, 88, 182, 0.28);
    border-radius: 999px;
    background: #f8f4fd;
}

.toolbar-state-indicator.is-active {
    color: #ffffff;
    background: var(--purple-700);
}

/* The Objects palette mirrors the contextual Inspector's panel and labeled-rail grammar. */
.symbol-palette.is-collapsed {
    grid-template-rows: auto minmax(0, 1fr);
    height: fit-content;
    max-height: calc(100dvh - var(--designer-safe-top) - var(--designer-safe-bottom));
    overflow: visible;
    background:
        linear-gradient(rgba(122, 85, 176, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 85, 176, 0.045) 1px, transparent 1px),
        #fffdf5;
    background-size: 19px 19px;
    border-radius: 27px;
}

.symbol-palette-context-card { min-height: 78px; }
.symbol-palette-rail-heading { grid-template-columns: minmax(0, 1fr) 24px; }

.symbol-palette.is-collapsed .symbol-palette-collapse {
    width: 24px;
    height: 24px;
    margin-right: -3px;
    border-radius: 7px;
}

.symbol-palette.is-collapsed .symbol-palette-collapse svg {
    width: var(--designer-side-rail-icon-size);
    height: var(--designer-side-rail-icon-size);
}

.symbol-palette-rail-tools {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 7px;
    overflow: visible;
}

.symbol-palette-quick-search {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 5px;
    min-height: 34px;
    padding: 0 6px;
    border-color: var(--inspector-line);
    border-radius: 10px;
}

.symbol-palette.is-collapsed .symbol-palette-quick-search svg {
    width: var(--designer-side-rail-icon-size);
    height: var(--designer-side-rail-icon-size);
}

.symbol-palette-quick-search input {
    padding: 0;
    font-size: 11px;
}

.symbol-palette-rail-actions {
    display: grid;
    gap: 8px;
}

.symbol-palette-rail-action {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 61px;
    padding: 8px 4px;
    border: 1px solid var(--inspector-line);
    border-radius: 12px;
    color: var(--inspector-ink);
    background: #ffffff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.symbol-palette-rail-action:hover,
.symbol-palette-rail-action:focus-visible {
    outline: none;
    border-color: rgba(129, 79, 219, 0.44);
    background: #f8f4fd;
    box-shadow: 0 0 0 3px rgba(128, 80, 223, 0.12);
}

.symbol-palette-rail-action:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.symbol-palette-rail-action svg,
.symbol-palette-rail-action .symbol-mark,
.symbol-palette-rail-action .area-template-mark {
    width: var(--designer-side-rail-icon-size);
    height: var(--designer-side-rail-icon-size);
}

.symbol-palette-rail-action svg { color: var(--purple-700); }
.symbol-palette-rail-action .symbol-mark { border-width: 2px; font-size: 12px; }
.symbol-palette-rail-action .area-template-mark { border-width: 2px; }

.symbol-palette-rail-count {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--purple-850);
    background: var(--purple-100);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.symbol-palette-quick-pick {
    top: 58px;
    left: calc(var(--designer-side-rail-width) + 12px);
    z-index: 45;
    gap: 0;
    width: min(340px, calc(100vw - var(--designer-side-rail-width) - 32px));
    max-height: calc(100dvh - var(--designer-safe-top) - 20px);
    padding: 0;
    border-radius: 18px;
    background: #fffefa;
    box-shadow: 0 20px 48px rgba(42, 26, 68, 0.24);
    overflow: hidden;
}

.symbol-palette-quick-pick > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 9px;
    align-items: center;
    padding: 11px 12px;
    border-bottom: 1px solid var(--inspector-line);
}

.symbol-palette-quick-pick > header .inspector-rail-popover-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.symbol-palette-quick-pick > header .inspector-rail-popover-icon svg { width: 19px; height: 19px; }
.symbol-palette-quick-pick > header > div { display: grid; gap: 2px; min-width: 0; }
.symbol-palette-quick-pick > header strong { font-size: 15px; }
.symbol-palette-quick-pick > header span:not(.inspector-rail-popover-icon) { color: var(--text-muted); font-size: 11px; }

.symbol-palette-rail-search-field {
    padding: 10px 12px;
    border-bottom: 1px solid var(--inspector-line);
}

.symbol-palette-rail-search-popover .symbol-palette-quick-search {
    min-height: 42px;
    padding: 0 10px;
}

.symbol-palette-rail-search-popover .symbol-palette-quick-search:focus-within {
    border-color: var(--purple-700);
    background: #ffffff;
    box-shadow: none;
}

.symbol-palette-rail-search-popover .symbol-palette-quick-search input {
    font-size: 13px;
}

.symbol-palette-rail-search-popover .symbol-palette-quick-search input:focus,
.symbol-palette-rail-search-popover .symbol-palette-quick-search input:focus-visible {
    outline: none;
    box-shadow: none;
}

.symbol-palette-quick-results {
    max-height: min(52vh, 420px);
    padding: 8px;
}

.symbol-palette-rail-search-popover .symbol-quick-pick-item {
    min-height: 32px;
    padding-block: 3px;
}

.symbol-palette-rail-search-popover .symbol-tile-label > strong,
.symbol-palette-rail-search-popover .wire-tile-label > strong,
.symbol-palette-rail-search-popover .catalog-product-result-copy > strong,
.symbol-palette-rail-search-popover .fixture-tile-label > strong {
    font-size: 11px;
    line-height: 1.12;
}

.symbol-palette-rail-search-popover .symbol-tile-label > span,
.symbol-palette-rail-search-popover .wire-tile-label > span,
.symbol-palette-rail-search-popover .catalog-product-result-copy > span,
.symbol-palette-rail-search-popover .fixture-tile-label > span {
    font-size: 9px;
    line-height: 1.12;
}

.symbol-palette-rail-search-popover .symbol-tile > .palette-result-source {
    padding: 1px 5px;
    font-size: 8px;
}

.symbol-palette-empty-search {
    margin: 0;
    padding: 18px 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.symbol-palette-search-guidance {
    margin: 0;
    padding: 18px 20px 22px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.symbol-palette-fixtures-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 18px 28px;
    color: var(--text-muted);
    text-align: center;
}

.symbol-palette-fixtures-empty svg { width: 24px; height: 24px; color: var(--purple-700); }
.symbol-palette-fixtures-empty strong { color: var(--inspector-ink); font-size: 13px; }
.symbol-palette-fixtures-empty span { font-size: 11px; line-height: 1.4; }

.symbol-palette-sticky-tools {
    top: 0;
    padding-top: 2px;
    background: #fffefa;
}

.symbol-palette-pinned-action {
    gap: 8px;
    padding: 2px 10px 10px;
    border-bottom: 0;
}

.symbol-palette-pinned-action .symbol-tile {
    min-height: 58px;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
}

.symbol-palette-sticky-tools .panel-search {
    gap: 4px;
    min-height: 58px;
    padding: 5px 10px;
    background: transparent;
}

.symbol-palette-sticky-tools .panel-search span { font-size: 10px; }
.symbol-palette-sticky-tools .panel-search input { height: 38px; padding: 0 10px; border-radius: 12px; font-size: 12px; }

.palette-section,
.palette-subgroup {
    gap: 8px;
    padding: 5px 10px;
}

.palette-section + .palette-section { border-top: 0; }

.palette-subgroup {
    padding: 0 0 0 9px;
    border-left-color: rgba(100, 67, 151, 0.14);
}

.palette-toggle,
.palette-toggle.is-system {
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--inspector-line);
    border-radius: 14px;
    color: var(--inspector-ink);
    background: #ffffff;
    box-shadow: none;
    font-size: 13px;
    text-transform: none;
}

.palette-toggle::before { display: none; }

.palette-toggle[aria-expanded="true"],
.palette-toggle.is-system[aria-expanded="true"] {
    color: var(--purple-850);
    background: #f8f4fd;
}

.palette-toggle.is-subgroup {
    min-height: 40px;
    border: 1px solid rgba(100, 67, 151, 0.12);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.76);
    font-size: 12px;
}

.palette-toggle.is-subgroup[aria-expanded="true"] {
    color: var(--purple-850);
    background: var(--surface-lavender);
}

@media (max-width: 899px) {
    .designer-app { --designer-side-rail-width: var(--designer-side-rail-compact-width); }

    .right-panel.is-contextual-inspector {
        right: 8px;
        max-width: calc(100vw - 64px);
    }

    .right-panel.is-contextual-inspector.is-inspector-rail { width: var(--designer-side-rail-width); }
    .inspector-rail-popover { right: calc(var(--designer-side-rail-width) + 20px); width: min(340px, calc(100vw - var(--designer-side-rail-width) - 40px)); }
    .left-panel.is-collapsed.is-symbol-rail { left: 8px; width: var(--designer-side-rail-width); }
    .symbol-palette-quick-pick { position: fixed; top: var(--designer-safe-top); left: calc(var(--designer-side-rail-width) + 20px); width: min(340px, calc(100vw - var(--designer-side-rail-width) - 40px)); }
}

/* These state-independent insets keep the embedded edge control physically stationary. */
.symbol-palette .symbol-palette-header.symbol-palette-header,
.contextual-inspector .contextual-inspector-header.contextual-inspector-header {
    gap: 8px;
    margin: 8px;
    padding: 8px;
}

.symbol-palette .symbol-palette-header.symbol-palette-header {
    padding-left: 48px;
}

.contextual-inspector .contextual-inspector-header.contextual-inspector-header {
    padding-right: 48px;
}

.symbol-palette-header.is-rail,
.contextual-inspector-header.is-rail {
    border: 1px solid transparent;
    border-radius: 16px;
}

/* Rail titles establish hierarchy; the shared expand control follows below. */
.symbol-palette .symbol-palette-header.is-rail,
.contextual-inspector .contextual-inspector-header.is-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 32px;
    justify-items: center;
    min-height: 78px;
    padding: 8px;
}

.symbol-palette-header.is-rail .symbol-palette-rail-copy,
.contextual-inspector-header.is-rail .inspector-rail-copy {
    grid-row: 1;
    justify-items: center;
    text-align: center;
}

.symbol-palette-header.is-rail .side-panel-toggle.side-panel-toggle,
.contextual-inspector-header.is-rail .side-panel-toggle.side-panel-toggle {
    position: static;
    grid-row: 2;
    justify-self: center;
}

@media (prefers-reduced-motion: reduce) {
    .left-panel,
    .right-panel,
    .animated-disclosure-content,
    .symbol-palette:not(.is-collapsed) .symbol-palette-content,
    .contextual-inspector[data-inspector-layout="panel"] .inspector-section-list,
    .contextual-inspector[data-inspector-layout="panel"] .inspector-read-only-note {
        transition: none !important;
        animation: none !important;
    }
}

/* Export-only controls sit outside the box so tiny overview legends retain separate targets. */
.export-preview-legend-content { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.export-preview-legend-content > img { display:block; width:100%; height:100%; max-width:none; max-height:none; pointer-events:none; user-select:none; }
.export-preview-legend-move-target { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; }
.export-preview-legend-move-target:focus-visible { outline:2px solid #6d36c5; outline-offset:2px; }
.export-preview-legend-resize-handle { position:absolute; z-index:3; display:block; width:12px; height:12px; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; touch-action:none; }
.export-preview-legend-resize-handle::after { content:""; position:absolute; inset:3px; border:1px solid #fff; border-radius:1px; background:#6d36c5; pointer-events:none; }
.export-preview-legend-resize-handle.is-n { top:-18px; left:calc(50% - 6px); cursor:ns-resize; }
.export-preview-legend-resize-handle.is-s { bottom:-18px; left:calc(50% - 6px); cursor:ns-resize; }
.export-preview-legend-resize-handle.is-e { right:-18px; top:calc(50% - 6px); cursor:ew-resize; }
.export-preview-legend-resize-handle.is-w { left:-18px; top:calc(50% - 6px); cursor:ew-resize; }
.export-preview-legend-resize-handle.is-ne { top:-18px; right:-18px; cursor:nesw-resize; }
.export-preview-legend-resize-handle.is-se { bottom:-18px; right:-18px; cursor:nwse-resize; }
.export-preview-legend-resize-handle.is-sw { bottom:-18px; left:-18px; cursor:nesw-resize; }
.export-preview-legend-resize-handle.is-nw { top:-18px; left:-18px; cursor:nwse-resize; }
.export-preview-legend-resize-handle:focus-visible { outline:2px solid #111827; outline-offset:2px; }
.export-preview-legend-layer.is-interactive { box-sizing:border-box; background:rgba(255,255,255,.94); border:1px solid #111827; }
.export-preview-legend-layer.is-interactive:focus-within { z-index:2; outline:2px solid rgba(109,54,197,.78); outline-offset:2px; }