:root {
    color-scheme: dark;
    --bg: #0a0b0e;
    --panel: #121419;
    --panel-strong: #191c22;
    --panel-raised: #22252d;
    --line: rgba(236, 238, 242, 0.11);
    --line-strong: rgba(236, 238, 242, 0.2);
    --text: #f5f6f8;
    --muted: rgba(245, 246, 248, 0.7);
    --dim: rgba(245, 246, 248, 0.44);
    --orange: #ff7133;
    --orange-soft: rgba(255, 107, 26, 0.14);
    --green: #32d583;
    --green-soft: rgba(50, 213, 131, 0.14);
    --blue: #55a7ff;
    --blue-soft: rgba(85, 167, 255, 0.15);
    --pink: #f970c8;
    --pink-soft: rgba(249, 112, 200, 0.14);
    --yellow: #f5c451;
    --red: #f85b5b;
    --board: #0d1512;
    --header-h: 66px;
    --radius: 8px;
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    width: 100%;
    min-width: 300px;
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    letter-spacing: 0;
}

body {
    overflow: hidden;
}

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

button,
input[type="range"] {
    accent-color: var(--orange);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.board:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

button {
    color: inherit;
}

.app-header {
    height: var(--header-h);
    padding: 0 18px;
    display: grid;
    grid-template-columns: auto minmax(220px, 380px) 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    background: #0d0f13;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.brand img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 12px rgba(255, 107, 26, 0.28));
}

.brand span {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand strong {
    font-size: 1rem;
}

.brand small {
    margin-top: 4px;
    color: var(--orange);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.project-name span {
    color: var(--dim);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-name input {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 700;
}

.project-name input:hover,
.project-name input:focus {
    border-color: var(--line-strong);
}

.header-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.private-badge {
    height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(85, 167, 255, 0.28);
    border-radius: 6px;
    background: var(--blue-soft);
    color: #98caff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.private-badge svg {
    width: 13px;
    height: 13px;
}

.save-state {
    color: var(--dim);
    font-size: 0.72rem;
}

.header-actions,
.simulation-control,
.mode-control,
.speed-control,
.zoom-control {
    display: flex;
    align-items: center;
}

.header-actions {
    gap: 5px;
}

.header-demo-button {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 107, 26, 0.52);
    border-radius: 7px;
    background: rgba(255, 107, 26, 0.1);
    color: #ff9a61;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.header-demo-button:hover {
    border-color: var(--orange);
    background: rgba(255, 107, 26, 0.2);
    color: #fff;
}

.header-demo-button svg {
    width: 16px;
    height: 16px;
}

.header-clear-button {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(248, 91, 91, 0.52);
    border-radius: 7px;
    background: rgba(248, 91, 91, 0.1);
    color: #ff8d8d;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.header-clear-button:hover {
    border-color: #f85b5b;
    background: rgba(248, 91, 91, 0.2);
    color: #fff;
}

.header-clear-button svg {
    width: 16px;
    height: 16px;
}

.icon-button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    cursor: pointer;
}

.icon-button:hover:not(:disabled) {
    border-color: rgba(255, 107, 26, 0.48);
    color: var(--orange);
    background: var(--orange-soft);
}

.icon-button:disabled {
    opacity: 0.3;
    cursor: default;
}

.icon-button svg {
    width: 17px;
    height: 17px;
}

.account-button {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.account-button:hover {
    border-color: rgba(85, 167, 255, 0.48);
    background: var(--blue-soft);
    color: #acd4ff;
}

.account-button svg {
    width: 17px;
    height: 17px;
}

#share-button.is-active {
    border-color: rgba(50, 213, 131, 0.42);
    background: var(--green-soft);
    color: var(--green);
}

#ai-session-button.is-active {
    border-color: rgba(255, 107, 26, 0.58);
    background: var(--orange-soft);
    color: var(--orange);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.08);
}

.workspace {
    height: calc(100dvh - var(--header-h));
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr) 304px;
    overflow: hidden;
}

.tool-panel,
.inspector-panel {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(245, 246, 248, 0.22) transparent;
    scrollbar-width: thin;
    background: var(--panel);
}

.tool-panel::-webkit-scrollbar,
.inspector-panel::-webkit-scrollbar {
    width: 7px;
}

.tool-panel::-webkit-scrollbar-thumb,
.inspector-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 7px;
    background: rgba(245, 246, 248, 0.22);
    background-clip: padding-box;
}

.tool-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
}

.inspector-panel {
    border-left: 1px solid var(--line);
}

.inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 14px 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #111318;
    box-shadow: 0 8px 18px rgba(9, 10, 13, 0.34);
}

.inspector-tabs button {
    height: 31px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.inspector-tabs button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.panel-heading {
    padding: 19px 16px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-heading h2,
.timeline-heading h2 {
    margin: 3px 0 0;
    font-size: 1.04rem;
    line-height: 1.2;
}

.panel-kicker {
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mobile-close {
    display: none;
}

.tool-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #111318;
    box-shadow: 0 8px 18px rgba(9, 10, 13, 0.34);
}

.tool-tab {
    min-width: 0;
    min-height: 34px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.tool-tab.is-active {
    background: var(--panel-raised);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.tool-tab-panel {
    display: none;
    padding: 15px 14px;
}

.tool-tab-panel.is-active {
    display: block;
}

.tool-section-label {
    margin: 0 0 8px;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tool-section-label:not(:first-child) {
    margin-top: 20px;
}

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

.tool-button {
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.tool-button > span {
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tool-button:hover {
    border-color: rgba(255, 107, 26, 0.5);
    background: var(--orange-soft);
    color: var(--orange);
}

.tool-button:active,
.yard-starter-grid button:active,
.wide-command:active:not(:disabled) {
    transform: translateY(1px);
}

.tool-button.scare:hover {
    border-color: rgba(249, 112, 200, 0.5);
    background: var(--pink-soft);
    color: var(--pink);
}

.tool-button.effect:hover {
    border-color: rgba(85, 167, 255, 0.5);
    background: var(--blue-soft);
    color: var(--blue);
}

.tool-button svg {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    padding: 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: #c7cbd2;
}

.tool-button.scare svg {
    background: var(--pink-soft);
    color: var(--pink);
}

.tool-button.effect svg {
    background: var(--blue-soft);
    color: var(--blue);
}

.tool-button.frightlink:hover {
    border-color: rgba(50, 213, 131, 0.5);
    background: var(--green-soft);
    color: var(--green);
}

.tool-button.frightlink svg {
    background: var(--green-soft);
    color: var(--green);
}

.tool-button.frightlink > span {
    min-width: 0;
    line-height: 1.08;
}

.frightlink-product-status {
    display: block;
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.54rem;
    font-weight: 700;
}

.tool-button.property:hover {
    border-color: rgba(79, 154, 102, 0.58);
    background: rgba(79, 154, 102, 0.12);
    color: #85d39d;
}

.tool-button.property svg {
    background: rgba(79, 154, 102, 0.12);
    color: #85d39d;
}

.prop-import-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.prop-import-row input {
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font: inherit;
    font-size: 0.72rem;
}

.prop-import-row button {
    min-width: 72px;
    height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(255, 113, 51, 0.45);
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.prop-import-row button:disabled {
    opacity: 0.55;
    cursor: default;
}

.prop-import-row button svg {
    width: 16px;
    height: 16px;
}

.prop-import-row button.is-loading svg {
    animation: prop-import-spin 900ms linear infinite;
}

@keyframes prop-import-spin {
    to { transform: rotate(360deg); }
}

.prop-import-hint {
    margin: 8px 0 0;
    color: var(--dim);
    font-size: 0.68rem;
    line-height: 1.45;
}

.prop-import-error {
    margin: 8px 0 0;
    color: #ff9a9a;
    font-size: 0.68rem;
    line-height: 1.45;
}

.inventory-upload-command {
    margin-top: 8px;
    min-height: 44px;
}

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

.inventory-card {
    position: relative;
    min-width: 0;
}

.inventory-place {
    width: 100%;
    min-height: 96px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.inventory-place:hover {
    border-color: rgba(249, 112, 200, 0.5);
    background: var(--pink-soft);
    color: var(--pink);
}

.inventory-place:active:not(:disabled) {
    transform: translateY(1px);
}

.inventory-thumb {
    width: 100%;
    height: 62px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
}

.inventory-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.inventory-thumb svg {
    width: 24px;
    height: 24px;
    color: var(--pink);
}

.inventory-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.inventory-card-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.inventory-card-remove:hover {
    background: rgba(248, 91, 91, 0.12);
    color: #ff9a9a;
}

.inventory-card-remove svg {
    width: 14px;
    height: 14px;
}

.inventory-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 12px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--dim);
    font-size: 0.7rem;
    line-height: 1.5;
}

.frightlink-toggle {
    margin-top: 14px;
}

.frightlink-summary {
    margin-top: 14px;
}

.frightlink-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.frightlink-metrics > div {
    min-height: 58px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(50, 213, 131, 0.045);
}

.frightlink-metrics span,
.frightlink-device small {
    color: var(--dim);
    font-size: 0.56rem;
    text-transform: uppercase;
}

.frightlink-metrics strong {
    margin-top: 2px;
    color: #8ff0bc;
    font-size: 1rem;
}

.frightlink-devices {
    margin-top: 8px;
    border-top: 1px solid var(--line);
}

.frightlink-device {
    min-height: 39px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.frightlink-device i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dim);
}

.frightlink-device.is-online i { background: var(--green); box-shadow: 0 0 8px rgba(50, 213, 131, 0.5); }
.frightlink-device.is-attention i { background: var(--yellow); }
.frightlink-device strong { overflow: hidden; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.frightlink-device small { white-space: nowrap; }

.frightlink-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--dim);
    font-size: 0.64rem;
    text-align: center;
}

.plan-mode-control {
    margin-bottom: 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.plan-mode-control button {
    min-height: 34px;
    padding: 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.57rem;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
}

.plan-mode-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.yard-starter-grid {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.yard-starter-grid button {
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    display: grid;
    overflow: hidden;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(79, 154, 102, 0.25);
    border-radius: 7px;
    background: rgba(79, 154, 102, 0.07);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.yard-starter-grid button > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.yard-starter-grid button:hover,
.yard-starter-grid button.is-active {
    border-color: rgba(79, 154, 102, 0.58);
    background: rgba(79, 154, 102, 0.14);
    color: #9de1b0;
}

.yard-starter-grid button.is-active {
    box-shadow: inset 0 0 0 1px rgba(116, 201, 140, 0.28);
}

.yard-starter-grid svg {
    width: 20px;
    height: 20px;
    color: #74c98c;
}

.property-tool-grid {
    margin-bottom: 14px;
}

.layer-filter-grid {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.layer-filter {
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--dim);
    font-size: 0.61rem;
    font-weight: 800;
    cursor: pointer;
}

.layer-filter.is-active {
    border-color: rgba(255, 113, 51, 0.34);
    background: rgba(255, 113, 51, 0.07);
    color: var(--muted);
}

.layer-filter > svg {
    width: 15px;
    height: 15px;
    color: var(--orange);
}

.layer-filter input {
    width: 14px;
    height: 14px;
    accent-color: var(--orange);
}

.zone-controls {
    margin-bottom: 16px;
}

.zone-filter-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.zone-filter-field > span {
    color: var(--dim);
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.zone-filter-field select,
.zone-create-row input {
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font: inherit;
    font-size: 0.68rem;
}

.zone-create-row {
    margin-top: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
}

.zone-create-row button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 113, 51, 0.45);
    border-radius: 6px;
    background: var(--orange-soft);
    color: var(--orange);
    cursor: pointer;
}

.zone-create-row svg {
    width: 16px;
}

.zone-summary {
    margin-top: 8px;
}

.zone-empty {
    margin: 0;
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--dim);
    font-size: 0.61rem;
    line-height: 1.4;
}

.zone-item {
    --zone-color: var(--orange);
    min-height: 44px;
    margin-top: 5px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px 31px;
    align-items: center;
    border: 1px solid var(--line);
    border-left: 3px solid var(--zone-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.zone-item.is-selected,
.zone-item.is-filtered {
    border-color: color-mix(in srgb, var(--zone-color) 55%, var(--line));
    background: color-mix(in srgb, var(--zone-color) 9%, transparent);
}

.zone-select-button,
.zone-filter-button,
.zone-delete-button {
    min-width: 0;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.zone-select-button {
    padding: 0 8px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: var(--muted);
    text-align: left;
}

.zone-select-button svg,
.zone-filter-button svg,
.zone-delete-button svg {
    width: 14px;
}

.zone-select-button strong,
.zone-select-button small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-select-button strong { font-size: 0.65rem; }
.zone-select-button small { margin-top: 2px; color: var(--dim); font-size: 0.55rem; }
.zone-filter-button:hover { color: var(--blue); }
.zone-delete-button:hover { color: var(--red); }

.yard-edit-command {
    margin: -6px 0 6px;
}

.yard-remove-command {
    margin: 0 0 14px;
}

.yard-edit-command[hidden],
.yard-remove-command[hidden] {
    display: none;
}

.tool-footer {
    position: sticky;
    bottom: 0;
    z-index: 13;
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: #111318;
    box-shadow: 0 -10px 22px rgba(9, 10, 13, 0.42);
}

.onboarding-tip {
    position: fixed;
    top: calc(var(--header-h) + 68px);
    left: 260px;
    z-index: 80;
    width: min(326px, calc(100vw - 24px));
    padding: 16px;
    border: 1px solid rgba(255, 107, 26, 0.5);
    border-radius: 8px;
    background: #17191f;
    color: var(--text);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.58);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.onboarding-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 54px;
    width: 12px;
    height: 12px;
    border: solid rgba(255, 107, 26, 0.5);
    border-width: 1px 0 0 1px;
    background: #17191f;
    transform: rotate(45deg);
}

.onboarding-tip[hidden] {
    display: none;
}

.onboarding-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.onboarding-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.onboarding-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.onboarding-close svg {
    width: 16px;
    height: 16px;
}

.onboarding-heading {
    padding-right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-heading > svg {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
}

.onboarding-heading span {
    display: block;
    color: var(--orange);
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.onboarding-heading h2 {
    margin: 3px 0 0;
    font-size: 0.93rem;
    line-height: 1.2;
}

.onboarding-steps {
    margin: 15px 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.onboarding-steps li {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.onboarding-steps b {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(85, 167, 255, 0.12);
    color: var(--blue);
    font-size: 0.65rem;
}

.onboarding-steps li:nth-child(2) b {
    background: rgba(249, 112, 200, 0.12);
    color: var(--pink);
}

.onboarding-steps li:nth-child(3) b {
    background: rgba(50, 213, 131, 0.12);
    color: var(--green);
}

.onboarding-start {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--orange);
    border-radius: 7px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.onboarding-start svg {
    width: 16px;
    height: 16px;
}

.wide-command {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.wide-command > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.wide-command:hover,
.wide-command.is-active {
    border-color: rgba(255, 107, 26, 0.55);
    background: var(--orange-soft);
    color: var(--orange);
}

.wide-command svg {
    width: 16px;
    height: 16px;
}

.wide-command:disabled {
    opacity: 0.38;
    cursor: default;
}

.danger-command:not(:disabled) {
    border-color: rgba(248, 91, 91, 0.24);
    color: #ff9a9a;
}

.toggle-row {
    min-height: 43px;
    margin-bottom: 9px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.toggle-row > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.toggle-row svg {
    width: 15px;
    height: 15px;
    color: var(--orange);
}

.toggle-row input {
    width: 34px;
    height: 18px;
}

.flow-marker-grid {
    margin-bottom: 18px;
}

.branch-empty {
    margin: 0;
    padding: 11px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--dim);
    font-size: 0.66rem;
    text-align: center;
}

.branch-item {
    margin-bottom: 7px;
    padding: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(85, 167, 255, 0.045);
}

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

.branch-item > div > svg {
    width: 16px;
    color: var(--blue);
}

.branch-item strong,
.branch-item small {
    display: block;
}

.branch-item strong {
    overflow: hidden;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-item small,
.branch-item label span {
    color: var(--dim);
    font-size: 0.6rem;
}

.branch-delete {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.branch-delete:hover {
    background: rgba(248, 91, 91, 0.12);
    color: var(--red);
}

.branch-delete svg {
    width: 14px;
}

.branch-item label {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px 8px;
}

.branch-item label output {
    color: var(--blue);
    font-size: 0.64rem;
    font-weight: 800;
}

.branch-item label input {
    grid-column: 1 / -1;
}

.site-upload {
    width: 100%;
    min-height: 66px;
    margin-bottom: 20px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px dashed rgba(85, 167, 255, 0.42);
    border-radius: 7px;
    background: var(--blue-soft);
    color: #b9dcff;
    text-align: left;
    cursor: pointer;
}

.site-upload > svg {
    width: 24px;
    height: 24px;
}

.site-upload span,
.site-upload strong,
.site-upload small {
    min-width: 0;
    display: block;
}

.site-upload strong {
    max-width: 150px;
    overflow: hidden;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-upload small {
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.61rem;
}

.site-distance-field input[type="number"] {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
}

.scale-readout {
    margin: 9px 0 17px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-left: 2px solid var(--green);
    background: rgba(50, 213, 131, 0.06);
}

.scale-readout span {
    color: var(--dim);
    font-size: 0.62rem;
}

.scale-readout strong {
    color: var(--green);
    font-size: 0.62rem;
    text-align: right;
}

.control-group {
    margin-bottom: 22px;
}

.control-label {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.73rem;
    font-weight: 700;
}

.control-label output {
    color: var(--orange);
    font-size: 0.68rem;
}

input[type="range"] {
    width: 100%;
    height: 4px;
}

.stage-shell {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 54px minmax(280px, 1fr) 38px 134px;
    background: #0e1014;
    overflow: hidden;
}

.stage-toolbar {
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(18, 20, 25, 0.97);
}

.mode-control,
.speed-control,
.zoom-control {
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.zoom-control {
    gap: 2px;
}

.zoom-control .icon-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
}

.zoom-readout {
    width: 52px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
    cursor: pointer;
}

.zoom-readout:hover {
    background: var(--panel-raised);
    color: var(--text);
}

.mode-button {
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.mode-button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.mode-button svg {
    width: 14px;
    height: 14px;
}

.simulation-control {
    gap: 7px;
}

.play-button {
    height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--orange);
    border-radius: 7px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
}

.play-button.is-running {
    border-color: var(--green);
    background: var(--green);
    color: #04170e;
}

.play-button svg {
    width: 16px;
    height: 16px;
}

.speed-control button {
    min-width: 34px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dim);
    font-size: 0.69rem;
    font-weight: 800;
    cursor: pointer;
}

.speed-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.canvas-wrap {
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        #0b0d11;
    background-size: 32px 32px, 32px 32px, auto;
    scrollbar-color: rgba(255, 113, 51, 0.38) rgba(255, 255, 255, 0.03);
}

.canvas-stage {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.board {
    position: absolute;
    width: min(100%, calc((100dvh - var(--header-h) - 246px) * 1.4286));
    max-width: 1000px;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border: 1px solid rgba(156, 181, 169, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px),
        linear-gradient(120deg, #102019, #17151d 62%, #211711);
    background-size: 5% 7.142%, 5% 7.142%, auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32), 0 20px 48px rgba(0, 0, 0, 0.42);
    touch-action: none;
    transform-origin: 0 0;
    user-select: none;
}

.board.is-route-mode {
    cursor: crosshair;
}

.board.is-route-mode[data-route-tool="freehand"] { cursor: crosshair; }
.board.is-route-mode[data-route-tool="circle"],
.board.is-route-mode[data-route-tool="rectangle"] { cursor: nwse-resize; }
.board.is-calibration-mode { cursor: cell; }

.site-plan-image,
.property-layer,
.board-route,
.frightlink-network-layer,
.heatmap-layer,
.coverage-layer,
.zone-layer,
.entity-layer,
.route-point-layer,
.calibration-layer,
.guest-layer,
.effect-wash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-plan-image {
    z-index: 0;
    object-fit: fill;
    filter: saturate(0.78) contrast(1.08);
    pointer-events: none;
}

.property-layer {
    z-index: 0;
    pointer-events: none;
}

.board-route {
    z-index: 1;
    pointer-events: none;
}

.frightlink-network-layer {
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.frightlink-network-layer .hub-range {
    fill: rgba(50, 213, 131, 0.035);
    stroke: rgba(50, 213, 131, 0.24);
    stroke-width: 2;
    stroke-dasharray: 12 10;
}

.frightlink-network-layer .network-link {
    fill: none;
    stroke: rgba(85, 167, 255, 0.62);
    stroke-width: 3;
    stroke-dasharray: 8 7;
    vector-effect: non-scaling-stroke;
}

.frightlink-network-layer .network-link.is-online { stroke: rgba(50, 213, 131, 0.76); }
.frightlink-network-layer .network-link.is-attention { stroke: rgba(245, 196, 81, 0.82); }

#route-shadow,
#route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.branch-shadow,
.branch-line,
#route-preview {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.branch-shadow {
    stroke: rgba(0, 0, 0, 0.72);
    stroke-width: 22;
}

.branch-line {
    stroke: rgba(85, 167, 255, 0.9);
    stroke-width: 6;
    stroke-dasharray: 10 8;
}

#route-preview {
    stroke: var(--orange);
    stroke-width: 6;
    stroke-dasharray: 8 7;
    filter: drop-shadow(0 0 5px rgba(255, 113, 51, 0.72));
}

#route-shadow {
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: var(--route-stroke, 24);
}

#route-line {
    stroke: rgba(255, 211, 104, 0.92);
    stroke-width: 7;
    stroke-dasharray: 15 10;
}

#route-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 42;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
    cursor: pointer;
}

.board.is-route-mode[data-route-tool="point"] #route-hit,
.board.is-route-mode[data-route-tool="branch"] #route-hit,
.board.is-route-mode[data-route-tool="arc"] #route-hit {
    pointer-events: stroke;
    cursor: copy;
}

.heatmap-layer {
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.heat-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(38px + (var(--heat) * 48px));
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, rgb(248, 91, 91) calc(var(--heat) * 100%), rgb(245, 196, 81));
    filter: blur(14px);
    opacity: calc(0.16 + (var(--heat) * 0.32));
    transform: translate(-50%, -50%);
}

.calibration-layer {
    z-index: 8;
    pointer-events: none;
}

.calibration-layer svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.calibration-layer line {
    stroke: var(--green);
    stroke-width: 4;
    stroke-dasharray: 10 7;
}

.calibration-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 2px solid #092516;
    border-radius: 50%;
    background: var(--green);
    color: #092516;
    box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.25);
    font-size: 0.62rem;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.coverage-layer {
    z-index: 2;
    pointer-events: none;
}

.zone-layer {
    z-index: 3;
    pointer-events: none;
}

.plan-zone {
    position: absolute;
    left: calc(var(--zone-left) * 1%);
    top: calc(var(--zone-top) * 1%);
    width: calc(var(--zone-width) * 1%);
    height: calc(var(--zone-height) * 1%);
    border: 1px dashed color-mix(in srgb, var(--zone-color) 48%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--zone-color) 4%, transparent);
    pointer-events: none;
}

.plan-zone.is-selected {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--zone-color) 82%, white);
    background: color-mix(in srgb, var(--zone-color) 8%, transparent);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.zone-drag-handle {
    position: absolute;
    top: -14px;
    left: 8px;
    height: 27px;
    max-width: calc(100% - 16px);
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--zone-color) 70%, white);
    border-radius: 5px;
    background: #13151a;
    color: var(--text);
    font-size: 0.59rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
    cursor: grab;
}

.zone-drag-handle:active {
    cursor: grabbing;
}

.zone-drag-handle svg {
    width: 13px;
    flex: 0 0 auto;
    color: var(--zone-color);
}

.entity-layer {
    z-index: 4;
    pointer-events: none;
}

.route-point-layer {
    z-index: 5;
    pointer-events: none;
}

.guest-layer {
    z-index: 6;
    pointer-events: none;
}

.effect-wash {
    z-index: 7;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.18);
    transition: opacity 180ms ease;
}

.effect-wash.is-active {
    opacity: 1;
}

.coverage-zone {
    position: absolute;
    width: calc(var(--range) * 2%);
    aspect-ratio: 1;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    transform: translate(-50%, -50%);
    border: 1px dashed color-mix(in srgb, var(--entity-color) 42%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--entity-color) 5%, transparent);
    opacity: 0.22;
    transition: opacity 160ms ease, background 160ms ease;
}

.coverage-zone.is-selected {
    background: color-mix(in srgb, var(--entity-color) 10%, transparent);
    opacity: 0.9;
}

.plan-entity {
    --entity-color: var(--orange);
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--entity-width) * 1%);
    height: calc(var(--entity-height) * 1%);
    min-width: 18px;
    min-height: 18px;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--entity-color) 78%, white);
    border-radius: 50%;
    background: color-mix(in srgb, var(--entity-color) 28%, #111015);
    color: var(--text);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) rotate(calc(var(--angle) * 1deg));
    cursor: grab;
    pointer-events: auto;
}

.plan-entity:hover,
.plan-entity.is-selected {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--entity-color) 20%, transparent), 0 8px 20px rgba(0, 0, 0, 0.48);
}

.plan-entity.is-active {
    animation: entity-pulse 650ms ease-out;
}

@keyframes entity-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--entity-color) 72%, transparent); }
    100% { box-shadow: 0 0 0 20px transparent; }
}

.plan-entity svg {
    width: 17px;
    height: 17px;
    transform: rotate(calc(var(--angle) * -1deg));
}

.plan-entity.has-custom-image {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.plan-entity.has-custom-image:hover,
.plan-entity.has-custom-image.is-selected {
    box-shadow: none;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--entity-color) 62%, transparent));
}

.entity-custom-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.55));
}

.plan-entity[data-type="wall"],
.plan-entity[data-type="queue"] {
    border-radius: 5px;
}

.plan-entity[data-type="wall"] {
    --entity-color: #a29baa;
    background: repeating-linear-gradient(90deg, #39343e 0 12px, #26222b 12px 24px);
}

.plan-entity[data-type="queue"] {
    --entity-color: var(--yellow);
    border-style: dashed;
    background: rgba(245, 196, 81, 0.1);
}

.plan-entity[data-type="tree"] { --entity-color: var(--green); }
.plan-entity[data-type="door"] { --entity-color: #c89b6d; }
.plan-entity[data-type="exit"] { --entity-color: var(--green); }
.plan-entity[data-type="emergency"] { --entity-color: #ff8b5f; }
.plan-entity[data-type="bottleneck"] { --entity-color: var(--yellow); }
.plan-entity[data-type="power"] { --entity-color: var(--yellow); }
.plan-entity[data-type="camera"] { --entity-color: var(--blue); }
.plan-entity[data-type="staff"] { --entity-color: #a58bff; }
.plan-entity[data-type="jump"] { --entity-color: var(--red); }
.plan-entity[data-type="actor"] { --entity-color: var(--pink); }
.plan-entity[data-type="prop"] { --entity-color: var(--orange); }
.plan-entity[data-type="sensor"] { --entity-color: var(--green); }
.plan-entity[data-type="strobe"] { --entity-color: #f7f5ff; }
.plan-entity[data-type="speaker"] { --entity-color: var(--blue); }
.plan-entity[data-type="fog"] { --entity-color: #92a4b8; }
.plan-entity[data-type="light"] { --entity-color: var(--yellow); }
.plan-entity[data-type="frightHub"] { --entity-color: #32d583; border-radius: 7px; }
.plan-entity[data-type="frightMotion"] { --entity-color: #55a7ff; }
.plan-entity[data-type="frightPressure"] { --entity-color: #f970c8; }
.plan-entity[data-type="frightRelay"] { --entity-color: #f5c451; border-radius: 7px; }

.entity-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    min-width: max-content;
    max-width: 130px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 4px;
    background: rgba(9, 10, 13, 0.93);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    transform: translateX(-50%) rotate(calc(var(--angle) * -1deg));
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, top 140ms ease;
}

.plan-entity:hover .entity-label,
.plan-entity:focus-visible .entity-label,
.plan-entity.is-selected .entity-label,
.plan-entity[data-type="queue"] .entity-label,
.plan-entity[data-type="exit"] .entity-label {
    top: calc(100% + 9px);
    opacity: 1;
}

.plan-entity.is-property {
    width: calc(var(--entity-width) * 1%);
    height: calc(var(--entity-height) * 1%);
    min-width: 36px;
    min-height: 18px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.plan-entity.is-property svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    opacity: 0.74;
}

.plan-entity.is-property .entity-label,
.plan-entity.is-property:hover .entity-label,
.plan-entity.is-property:focus-visible .entity-label,
.plan-entity.is-property.is-selected .entity-label {
    position: static;
    min-width: 0;
    max-width: calc(100% - 20px);
    padding: 2px 5px;
    border: 0;
    background: rgba(8, 10, 12, 0.48);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.58rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: rotate(calc(var(--angle) * -1deg));
    opacity: 1;
}

.plan-entity[data-type="street"] {
    border-color: rgba(187, 196, 205, 0.38);
    background: #343941;
}

.plan-entity[data-type="street"]::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(245, 196, 81, 0.72) 0 24px, transparent 24px 42px);
    transform: translateY(-50%);
    pointer-events: none;
}

.plan-entity[data-type="street"] > * {
    position: relative;
    z-index: 1;
}

.plan-entity[data-type="sidewalk"] {
    border-color: rgba(224, 222, 216, 0.5);
    background: repeating-linear-gradient(90deg, #7d7e7d 0 38px, #a0a09d 39px 40px);
}

.plan-entity[data-type="lawn"] {
    border-color: rgba(117, 193, 136, 0.44);
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        #234a31;
    background-size: 18px 18px, 18px 18px, auto;
}

.plan-entity[data-type="walkway"] {
    border-color: rgba(224, 218, 204, 0.5);
    background: repeating-linear-gradient(0deg, #87857f 0 25px, #aaa69d 26px 28px);
}

.plan-entity[data-type="driveway"] {
    border-color: rgba(192, 199, 204, 0.4);
    background: linear-gradient(90deg, #545a60, #656c72 50%, #545a60);
}

.plan-entity[data-type="house"] {
    border-color: rgba(222, 159, 148, 0.48);
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
        #553638;
}

.plan-entity[data-type="porch"] {
    border-color: rgba(211, 172, 128, 0.5);
    background: repeating-linear-gradient(90deg, #604b39 0 12px, #765c43 12px 14px);
}

.plan-entity[data-type="gazebo"] {
    border-color: rgba(219, 181, 140, 0.55);
    background: repeating-linear-gradient(90deg, rgba(198, 155, 114, 0.34) 0 12px, rgba(90, 67, 52, 0.5) 12px 15px);
}

.plan-entity[data-type="fence"] {
    border-color: rgba(205, 195, 182, 0.5);
    background: repeating-linear-gradient(90deg, #59534d 0 8px, #81786e 8px 10px);
}

.plan-entity[data-type="shed"] {
    border-color: rgba(190, 137, 117, 0.5);
    background: #4c3632;
}

.plan-entity[data-type="bush"],
.plan-entity[data-type="landscape"] {
    border-color: rgba(117, 193, 136, 0.48);
    border-radius: 45%;
    background: radial-gradient(circle at 30% 30%, #477d4f, #24442c);
}

.plan-entity[data-type="patio"] {
    border-color: rgba(210, 205, 198, 0.48);
    background:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        #55514e;
    background-size: 20px 20px, 20px 20px, auto;
}

.plan-entity[data-type="pool"] {
    border-color: rgba(111, 211, 230, 0.62);
    border-radius: 45%;
    background: repeating-radial-gradient(ellipse at center, #2e7f96 0 8px, #3b9bb2 9px 12px);
}

.route-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 2px solid #211b0d;
    border-radius: 50%;
    background: var(--yellow);
    color: #211b0d;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: grab;
    font-size: 0.5rem;
    font-weight: 900;
}

.route-point span {
    pointer-events: none;
}

.route-point::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}

.route-point.is-selected {
    box-shadow: 0 0 0 4px rgba(255, 113, 51, 0.34), 0 0 0 7px rgba(0, 0, 0, 0.5), 0 5px 12px rgba(0, 0, 0, 0.55);
}

.route-point.is-endpoint {
    width: 25px;
    height: 25px;
    border-color: #0d271b;
    background: var(--green);
    color: #052013;
}

.board:not(.is-route-mode) .route-point {
    display: none;
}

.route-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9;
    min-height: 38px;
    padding: 4px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: rgba(13, 15, 19, 0.94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.route-tool-strip,
.route-command-strip {
    display: flex;
    align-items: center;
    gap: 4px;
}

.route-tool-strip {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.route-command-strip {
    justify-content: flex-end;
}

.board.is-route-mode .route-actions {
    display: flex;
}

.route-count {
    min-width: 86px;
    padding: 0 8px;
    color: var(--dim);
    font-size: 0.63rem;
    font-weight: 700;
    white-space: nowrap;
}

.route-count strong {
    color: var(--text);
    font-size: 0.72rem;
}

.route-action-button,
.route-done-button {
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.route-action-button {
    width: 29px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--muted);
}

.route-action-button:hover:not(:disabled) {
    background: var(--orange-soft);
    color: var(--orange);
}

.route-action-button.is-active {
    background: var(--orange);
    color: #1b0900;
}

.route-action-button:disabled {
    color: var(--dim);
    opacity: 0.38;
    cursor: default;
}

.route-action-button svg,
.route-done-button svg {
    width: 15px;
    height: 15px;
}

.route-done-button {
    padding: 0 9px;
    gap: 5px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.64rem;
    font-weight: 900;
}

.heatmap-legend {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 9;
    padding: 6px 8px;
    display: none;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: rgba(13, 15, 19, 0.9);
    color: var(--dim);
    font-size: 0.56rem;
    font-weight: 700;
    pointer-events: none;
}

.heatmap-legend.is-visible {
    display: flex;
}

.heatmap-legend i {
    width: 58px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
}

.guest {
    --guest-color: #f7f5ff;
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 11px;
    height: 11px;
    border: 2px solid #08070a;
    border-radius: 50%;
    background: var(--guest-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--guest-color) 35%, transparent), 0 3px 8px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%);
}

.guest.is-lead {
    width: 14px;
    height: 14px;
    background: var(--orange);
}

.board-label,
.board-scale {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    pointer-events: none;
}

.board-label svg {
    width: 13px;
    height: 13px;
}

.board-label--entry {
    left: 12px;
    bottom: 12px;
}

.board-scale {
    right: 12px;
    bottom: 12px;
}

.board-scale span {
    width: 48px;
    height: 5px;
    border: solid rgba(255, 255, 255, 0.46);
    border-width: 0 1px 1px;
}

.stage-status {
    min-width: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    color: var(--dim);
    font-size: 0.7rem;
}

.stage-status span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.stage-status svg {
    width: 13px;
    height: 13px;
}

.stage-status strong {
    color: var(--muted);
}

.stage-status .status-mode {
    margin-left: auto;
    color: var(--orange);
    font-weight: 800;
}

.timeline {
    min-width: 0;
    padding: 12px 16px 13px;
    overflow: hidden;
    background: #0e1014;
}

.timeline-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.timeline-now {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--orange);
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-now i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px rgba(255, 107, 26, 0.6);
}

.timeline-track {
    position: relative;
    height: 86px;
    margin-top: 9px;
    border-top: 1px solid var(--line-strong);
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.045) calc(10% - 1px) 10%);
}

.timeline-track::before,
.timeline-track::after {
    position: absolute;
    top: -20px;
    color: var(--dim);
    font-size: 0.6rem;
}

.timeline-track::before {
    content: "ENTRY";
    left: 0;
}

.timeline-track::after {
    content: "EXIT";
    right: 0;
}

.timeline-event {
    --event-color: var(--orange);
    position: absolute;
    left: calc(var(--progress) * 1%);
    top: calc(5px + (var(--row) * 18px));
    width: 2px;
    height: 16px;
    background: color-mix(in srgb, var(--event-color) 48%, transparent);
}

.timeline-event::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--event-color);
    box-shadow: 0 0 9px color-mix(in srgb, var(--event-color) 55%, transparent);
}

.timeline-event span {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 88px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
}

.timeline-event.edge-end span {
    right: 7px;
    left: auto;
    text-align: right;
}

.timeline-playhead-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--progress) * 1%);
    z-index: 4;
    width: 1px;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255, 107, 26, 0.5);
    pointer-events: none;
}

.analysis-grid {
    padding: 0 14px 17px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.metric {
    min-height: 88px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 2px 0 rgba(255, 113, 51, 0.2);
}

.metric span,
.metric small {
    color: var(--dim);
    font-size: 0.64rem;
}

.metric strong {
    margin: 3px 0 1px;
    color: var(--text);
    font-size: 1.42rem;
    line-height: 1;
}

.analysis-section {
    padding: 16px 14px;
    border-top: 1px solid var(--line);
}

.analysis-section h3 {
    margin: 0;
    font-size: 0.82rem;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.live-indicator {
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--dim);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.live-indicator.is-live {
    border-color: rgba(50, 213, 131, 0.36);
    background: var(--green-soft);
    color: var(--green);
}

.live-stats {
    margin: 12px 0 0;
}

.live-stats div {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.live-stats dt {
    color: var(--dim);
    font-size: 0.69rem;
}

.live-stats dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.71rem;
    font-weight: 800;
    text-align: right;
}

.check-list,
.event-log {
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding: 7px 0 7px 21px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
}

.check-list li.is-warning::before {
    background: var(--yellow);
}

.check-list li.is-danger::before {
    background: var(--red);
}

.event-section {
    min-height: 160px;
}

.text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dim);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
}

.text-button:hover {
    color: var(--orange);
}

.event-log li {
    padding: 7px 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--muted);
    font-size: 0.66rem;
}

.event-log time {
    color: var(--orange);
    font-weight: 800;
}

.event-log .empty-log {
    display: block;
    color: var(--dim);
}

.forecast-panel {
    padding-bottom: 22px;
}

.forecast-scenario-bar {
    padding: 0 14px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    align-items: end;
    gap: 6px;
}

.forecast-scenario-bar label > span,
.forecast-field-grid label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.forecast-scenario-bar select,
.forecast-field-grid input,
.forecast-field-grid select {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font-size: 0.72rem;
}

.forecast-section {
    padding: 15px 14px;
    border-top: 1px solid var(--line);
}

.forecast-section h3 {
    margin: 0 0 13px;
    font-size: 0.78rem;
}

.forecast-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 8px;
}

.capacity-mode-control {
    margin-top: 15px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.capacity-mode-control button {
    height: 30px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

.capacity-mode-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.manual-capacity-fields {
    margin-top: 12px;
}

.operational-limit-fields {
    margin-top: 12px;
}

.capacity-source-row {
    min-height: 35px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.capacity-source-row p {
    margin: 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.35;
}

.capacity-source-row button {
    min-width: max-content;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 800;
    cursor: pointer;
}

.capacity-source-row button:hover {
    border-color: rgba(255, 113, 51, 0.46);
    color: var(--orange);
}

.capacity-source-row button svg {
    width: 13px;
    height: 13px;
}

.forecast-slider {
    margin-top: 17px;
    display: block;
}

.forecast-slider > span {
    margin-bottom: 9px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.67rem;
}

.forecast-slider output {
    color: var(--orange);
    font-weight: 800;
}

.capacity-grid {
    padding: 0 14px 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.capacity-grid > div {
    min-height: 79px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.capacity-grid span,
.capacity-grid small {
    color: var(--dim);
    font-size: 0.59rem;
}

.capacity-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.capacity-title button {
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--dim);
    cursor: pointer;
}

.capacity-title button:hover {
    border-color: rgba(255, 113, 51, 0.48);
    color: var(--orange);
}

.capacity-title button svg {
    width: 12px;
    height: 12px;
}

.capacity-grid strong {
    margin: 3px 0 1px;
    color: #a9d3ff;
    font-size: 1.25rem;
    line-height: 1;
}

.money-input,
.percent-input {
    position: relative;
}

.money-input i,
.percent-input i {
    position: absolute;
    top: 50%;
    color: var(--dim);
    font-size: 0.68rem;
    font-style: normal;
    transform: translateY(-50%);
    pointer-events: none;
}

.money-input i { left: 9px; }
.percent-input i { right: 9px; }
.money-input input { padding-left: 20px; }
.percent-input input { padding-right: 20px; }

.finance-summary {
    margin: 0 14px;
    padding: 4px 12px 10px;
    border-left: 2px solid var(--green);
    background: rgba(50, 213, 131, 0.055);
}

.finance-summary > div {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.finance-summary span {
    color: var(--dim);
    font-size: 0.65rem;
}

.finance-summary strong {
    font-size: 0.72rem;
}

.finance-summary .finance-total {
    min-height: 45px;
    border-bottom: 0;
}

.finance-total strong {
    color: var(--green);
    font-size: 1rem;
}

.finance-total strong.is-negative {
    color: var(--red);
}

.finance-summary p {
    margin: 5px 0 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.4;
}

.forecast-disclaimer {
    margin: 14px 14px 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.45;
}

.editor-form {
    padding: 0 14px 16px;
}

.editor-preview {
    min-height: 78px;
    margin-bottom: 15px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.editor-preview-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
}

.editor-preview-icon svg {
    width: 18px;
    height: 18px;
}

.editor-preview-image {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.editor-preview-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.45));
}

.editor-preview strong {
    display: block;
    font-size: 0.84rem;
}

.editor-preview small {
    color: var(--dim);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.field {
    margin-bottom: 14px;
}

.field > span,
.field-row label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.field > .control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.field > .control-label > span {
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.field > .control-label output {
    flex: 0 0 auto;
    color: var(--orange);
    font-size: 0.7rem;
    font-weight: 800;
}

.field input[type="text"],
.field select,
.field-row input {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font-size: 0.76rem;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.dimension-editor {
    margin: 2px 0 14px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(85, 167, 255, 0.045);
}

.dimension-heading {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dimension-heading span {
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dimension-heading small {
    color: var(--blue);
    font-size: 0.56rem;
    font-weight: 800;
}

.dimension-editor .field-row {
    margin-bottom: 0;
}

.color-field input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
}

.zone-editor-help {
    margin: 0 0 12px;
    padding: 10px;
    display: flex;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--dim);
    font-size: 0.61rem;
    line-height: 1.4;
}

.zone-editor-help svg {
    width: 15px;
    flex: 0 0 auto;
    color: var(--orange);
}

.zone-member-list {
    max-height: 180px;
    margin-bottom: 14px;
    overflow: auto;
    border-top: 1px solid var(--line);
}

.zone-member-list button {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 0.65rem;
    text-align: left;
    cursor: pointer;
}

.zone-member-list button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.035);
}

.zone-member-list svg {
    width: 14px;
    color: var(--orange);
}

.zone-member-list p {
    margin: 0;
    padding: 12px 0;
    color: var(--dim);
    font-size: 0.62rem;
}

.field .control-label {
    margin-bottom: 8px;
}

.editor-actions {
    padding-top: 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--line);
}

.editor-actions button {
    min-height: 36px;
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.editor-actions .delete-button {
    border-color: rgba(248, 91, 91, 0.28);
    color: var(--red);
}

.prop-media-group {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(249, 112, 200, 0.24);
    border-radius: 7px;
    background: rgba(249, 112, 200, 0.035);
}

.prop-media-group .tool-section-label {
    color: #f4a7d8;
}

.prop-media-preview {
    height: 126px;
    margin-bottom: 9px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
}

.prop-media-preview img {
    max-width: 94%;
    max-height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.48));
}

.prop-media-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap: 6px;
}

.prop-media-actions button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    cursor: pointer;
}

.prop-media-actions button:hover {
    border-color: rgba(249, 112, 200, 0.48);
    color: #f4a7d8;
}

.prop-media-actions button svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.prop-media-actions .delete-button {
    border-color: rgba(248, 91, 91, 0.25);
    color: #ff9a9a;
}

.system-field-group {
    padding: 12px;
    border: 1px solid rgba(50, 213, 131, 0.22);
    border-radius: 7px;
    background: rgba(50, 213, 131, 0.035);
}

.system-field-group .tool-section-label {
    color: #8be8b5;
}

.system-field-group .field:last-child {
    margin-bottom: 0;
}

.app-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: min(720px, calc(100dvh - 36px));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #15171c;
    color: var(--text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}

.app-dialog::backdrop {
    background: rgba(3, 4, 6, 0.76);
    backdrop-filter: blur(5px);
}

.auth-dialog {
    width: min(430px, calc(100vw - 28px));
}

.ai-sync-dialog {
    width: min(540px, calc(100vw - 28px));
}

.promo-dialog {
    width: min(960px, calc(100vw - 28px));
    overflow: hidden;
}

.promo-media {
    background: #08090c;
}

.promo-media video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #050609;
}

.promo-downloads {
    min-height: 56px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--line);
    background: #15171c;
}

.promo-downloads a {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
}

.promo-downloads a:hover {
    border-color: rgba(255, 113, 51, 0.48);
    background: var(--orange-soft);
    color: var(--orange);
}

.promo-downloads svg {
    width: 15px;
    height: 15px;
}

.dialog-heading {
    min-height: 76px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
}

.dialog-heading h2 {
    margin: 3px 0 0;
    font-size: 1rem;
}

#signed-out-auth,
.account-summary,
.share-state,
.shared-plan-actions,
.ai-sync-content {
    padding: 18px 16px;
}

.ai-sync-off {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.ai-sync-off > .ai-sync-primary {
    grid-column: 1 / -1;
}

.ai-sync-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 107, 26, 0.34);
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
}

.ai-sync-mark svg {
    width: 20px;
    height: 20px;
}

.ai-sync-off strong {
    display: block;
    font-size: 0.82rem;
}

.ai-sync-off p,
.ai-sync-note {
    margin: 4px 0 0;
    color: var(--dim);
    font-size: 0.68rem;
    line-height: 1.45;
}

.ai-sync-active {
    display: grid;
    gap: 14px;
}

.ai-sync-active[hidden],
.ai-sync-off[hidden] {
    display: none;
}

.ai-sync-live {
    min-height: 38px;
    padding: 0 11px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(50, 213, 131, 0.3);
    border-radius: 6px;
    background: var(--green-soft);
}

.ai-sync-live > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.12);
}

.ai-sync-live strong {
    font-size: 0.7rem;
}

.ai-sync-live small {
    color: #8dddb6;
    font-size: 0.62rem;
}

.ai-session-code span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-session-code input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
}

.ai-sync-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
}

.ai-sync-actions button,
.ai-sync-primary {
    min-height: 39px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 800;
    cursor: pointer;
}

.ai-sync-primary {
    border-color: rgba(255, 107, 26, 0.5);
    background: var(--orange);
    color: #1b0900;
}

.ai-sync-actions button.danger {
    border-color: rgba(248, 91, 91, 0.35);
    color: #ff9a9a;
}

.ai-sync-actions svg,
.ai-sync-primary svg {
    width: 16px;
    height: 16px;
}

.ai-sync-content > .dialog-error {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .ai-sync-actions {
        grid-template-columns: 1fr 1fr;
    }

    .ai-sync-actions .ai-sync-primary {
        grid-column: 1 / -1;
    }
}

.google-signin,
.share-primary {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(85, 167, 255, 0.36);
    border-radius: 7px;
    background: var(--blue-soft);
    color: #b9dcff;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.google-signin svg,
.share-primary svg {
    width: 17px;
}

.dialog-divider {
    position: relative;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--dim);
    font-size: 0.6rem;
}

.dialog-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line);
}

.dialog-divider span {
    position: relative;
    padding: 0 8px;
    background: #15171c;
}

.dialog-field {
    margin-bottom: 12px;
    display: block;
}

.dialog-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dialog-field input,
.share-link-row input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font-size: 0.75rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.dialog-actions button,
.account-summary > button,
.plans-toolbar button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.dialog-actions button.primary {
    border-color: var(--orange);
    background: var(--orange);
    color: #1b0900;
}

.dialog-error {
    min-height: 17px;
    margin: 10px 0 0;
    color: #ff9a9a;
    font-size: 0.65rem;
}

.account-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.account-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
}

.account-avatar svg { width: 22px; }
.account-summary strong,
.account-summary small { display: block; }
.account-summary strong { font-size: 0.76rem; }
.account-summary small { margin-top: 3px; color: var(--dim); font-size: 0.63rem; }

.plans-toolbar {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--line);
}

.plans-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plans-toolbar button:disabled {
    opacity: 0.35;
    cursor: default;
}

.plans-toolbar svg { width: 14px; }

.plans-list {
    min-height: 110px;
    padding: 10px 16px;
}

.plan-list-item {
    min-height: 58px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.plan-list-item.is-active {
    border-color: rgba(50, 213, 131, 0.34);
    background: var(--green-soft);
}

.plan-list-item > div,
.plan-open {
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.plan-open {
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.plan-list-item > div > svg,
.plan-open > svg {
    width: 17px;
    flex: 0 0 auto;
    color: var(--green);
}

.plan-list-item strong,
.plan-list-item small {
    display: block;
}

.plan-list-item strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-list-item small {
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.6rem;
}

.plan-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.plan-icon:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.plan-icon.delete-plan:hover { background: rgba(248, 91, 91, 0.12); color: var(--red); }
.plan-icon svg { width: 14px; }

.plans-signed-out,
.empty-plans {
    margin: 0;
    padding: 10px 16px 16px;
    color: var(--dim);
    font-size: 0.65rem;
    line-height: 1.45;
}

.share-state > p,
.shared-plan-actions > p {
    margin: 0 0 15px;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.share-link-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
}

.revoke-share {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ff9a9a;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

.shared-readonly .private-badge {
    border-color: rgba(50, 213, 131, 0.35);
    background: var(--green-soft);
    color: var(--green);
}

.shared-readonly .plan-entity {
    cursor: pointer;
}

.mobile-dock {
    display: none;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 100;
    max-width: min(360px, calc(100vw - 32px));
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #1c1820;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.is-actionable {
    pointer-events: auto;
}

.toast-action {
    min-width: 44px;
    min-height: 30px;
    margin-left: 10px;
    padding: 0 10px;
    border: 1px solid rgba(255, 113, 51, 0.5);
    border-radius: 6px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

/* Phone-only chrome is hidden everywhere outside the phone layer below. */
.phone-only,
.sheet-grabber,
.phone-board-ui,
.phone-stat-strip,
.phone-context-bar,
.phone-handle,
.phone-placement-chip,
.phone-tray,
.phone-route-strip,
.phone-mode-bar,
.phone-transport,
.phone-scrim,
.phone-sheet-shell,
.phone-menu,
.phone-confirm,
.phone-banner,
.phone-tour,
.check-show {
    display: none;
}

@media (min-width: 681px) {
    .tool-button {
        min-height: 68px;
        padding: 8px 5px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    .yard-starter-grid button {
        min-height: 74px;
        padding: 8px 5px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 22px auto;
        justify-items: center;
        gap: 6px;
        text-align: center;
    }
}

@media (max-width: 1120px) {
    .onboarding-tip {
        left: 236px;
    }

    .layer-filter {
        padding: 0 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
        font-size: 0.57rem;
    }

    .layer-filter > svg {
        display: none;
    }

    .workspace {
        grid-template-columns: 220px minmax(0, 1fr) 250px;
    }

    .app-header {
        grid-template-columns: auto minmax(160px, 280px) 1fr auto;
    }

    .private-badge {
        display: none;
    }

    .plan-mode-control button {
        min-width: 0;
        padding: 3px 1px;
        overflow: hidden;
        font-size: 0.53rem;
    }
}

@media (max-width: 880px) {
    .workspace {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .inspector-panel {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        z-index: 40;
        width: min(310px, 92vw);
        border-left: 1px solid var(--line-strong);
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.46);
        transform: translateX(105%);
        transition: transform 180ms ease;
    }

    body.mobile-inspector-open .inspector-panel {
        transform: translateX(0);
    }

    .mobile-close {
        display: inline-grid;
    }
}

@media (min-width: 681px) and (max-width: 880px) {
    .app-header {
        padding: 0 12px;
        grid-template-columns: auto minmax(150px, 220px) 1fr auto;
        gap: 10px;
    }

    .brand span,
    .project-name span,
    .save-state,
    .account-button span {
        display: none;
    }

    .brand img {
        width: 34px;
        height: 34px;
    }

    .project-name input {
        height: 36px;
    }

    .header-actions {
        gap: 4px;
    }

    .header-actions .icon-button,
    .account-button,
    .header-demo-button,
    .header-clear-button {
        width: 34px;
        height: 34px;
    }

    .header-demo-button,
    .header-clear-button {
        padding: 0;
    }

    .header-demo-button span,
    .header-clear-button span {
        display: none;
    }

    .account-button {
        padding: 0;
        justify-content: center;
    }

    .stage-toolbar {
        padding: 0 8px;
        gap: 7px;
    }

    .mode-button span,
    .play-button span,
    .speed-control {
        display: none;
    }

    .mode-button {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .play-button {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .simulation-control .icon-button {
        width: 34px;
        height: 34px;
    }

    .zoom-control .icon-button {
        width: 28px;
        height: 28px;
    }

    .zoom-readout {
        width: 42px;
    }

    .tool-panel .mobile-close {
        display: none;
    }

    .mobile-dock {
        position: fixed;
        right: 12px;
        bottom: 12px;
        z-index: 60;
        display: block;
    }

    .mobile-dock button {
        display: none;
    }

    .mobile-dock button[data-mobile-panel="inspector"] {
        min-width: 94px;
        height: 40px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid var(--line-strong);
        border-radius: 7px;
        background: rgba(25, 28, 34, 0.96);
        color: var(--muted);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
        font-size: 0.65rem;
        font-weight: 800;
    }

    .mobile-dock button[data-mobile-panel="inspector"] svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   PHONE LAYER (max-width: 680px) - board-first mobile chrome.
   Keep this breakpoint in sync with PHONE_BP in lab.js.
   Nothing above this fence may change for phones; nothing in
   this fence may leak upward past 680px.
   ============================================================ */
@media (max-width: 680px) {
    :root {
        --header-h: calc(48px + env(safe-area-inset-top));
        --phone-bar-h: calc(56px + env(safe-area-inset-bottom));
    }

    /* ---- top bar: back, name, save dot, menu ---- */
    .app-header {
        padding: env(safe-area-inset-top) 6px 0 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .brand img {
        width: 30px;
        height: 30px;
    }

    .brand span,
    .project-name span,
    .header-status,
    #promo-button,
    #plans-button,
    #share-button,
    #account-button,
    #ai-session-button,
    #demo-plan-button,
    .header-clear-button,
    #undo-button,
    #redo-button,
    #export-button,
    .onboarding-tip,
    .mobile-dock {
        display: none;
    }

    .project-name input {
        height: 40px;
        padding: 0 8px;
        font-size: 0.82rem;
        font-weight: 800;
        text-overflow: ellipsis;
    }

    .header-actions {
        gap: 0;
    }

    .phone-only {
        display: inline-grid;
    }

    .phone-save-dot {
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .phone-save-dot i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--dim);
        transition: background 200ms ease;
    }

    .phone-save-dot[data-state="saving"] i { background: var(--orange); }
    .phone-save-dot[data-state="cloud"] i { background: var(--green); }
    .phone-save-dot[data-state="error"] i { background: var(--red); }

    #phone-menu-button {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
    }

    .app-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 28px);
    }

    .plans-toolbar button {
        flex: 1 1 120px;
        justify-content: center;
    }

    .promo-downloads {
        justify-content: stretch;
    }

    .promo-downloads a {
        flex: 1;
        justify-content: center;
    }

    /* ---- the board IS the screen ---- */
    .workspace {
        height: calc(100dvh - var(--header-h) - var(--phone-bar-h));
        display: block;
    }

    .stage-shell {
        width: 100%;
        height: 100%;
        grid-template-rows: minmax(0, 1fr);
    }

    .stage-toolbar,
    .stage-status,
    .stage-shell .timeline,
    .tool-footer,
    .board.is-route-mode .route-actions,
    .board.is-route-mode .heatmap-legend {
        display: none;
    }

    .canvas-wrap {
        padding: 0;
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    .board {
        border-radius: 6px;
    }

    /* ---- elements: 44px hit target, labels on zoom/selection ----
       NOTE (fork): no fixed width/height here - this build sizes entities
       from --entity-width / --entity-height (real feet), so a phone-only
       32px override would break the dimension editor. */
    .plan-entity::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
    }

    .plan-entity.is-selected {
        box-shadow: 0 0 0 2px var(--orange), 0 8px 20px rgba(0, 0, 0, 0.48);
    }

    .plan-entity.phone-pulse {
        animation: phone-pulse 800ms ease-out 2;
    }

    @keyframes phone-pulse {
        0% { outline: 3px solid rgba(255, 113, 51, 0.9); outline-offset: 2px; }
        100% { outline: 3px solid transparent; outline-offset: 16px; }
    }

    .entity-label {
        display: none;
        font-size: 0.7rem;
    }

    body.phone-zoom-labels .entity-label,
    .plan-entity.is-selected .entity-label,
    .plan-entity.is-property .entity-label {
        display: block;
        top: calc(100% + 8px);
        opacity: 1;
    }

    .plan-entity.is-property .entity-label {
        top: auto;
        font-size: 0.7rem;
    }

    .route-point {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .route-point.is-endpoint {
        width: 30px;
        height: 30px;
    }

    /* ---- floating board controls ---- */
    .phone-board-ui {
        display: block;
        position: fixed;
        left: calc(10px + env(safe-area-inset-left));
        right: calc(10px + env(safe-area-inset-right));
        top: calc(var(--header-h) + 10px);
        z-index: 30;
        pointer-events: none;
    }

    .phone-board-ui > * {
        pointer-events: auto;
    }

    .phone-board-ui.is-play {
        top: calc(var(--header-h) + 50px);
    }

    .phone-board-ui.is-play .phone-undo-pill,
    .phone-board-ui.is-play .phone-health-chip {
        display: none;
    }

    .phone-undo-pill {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        overflow: hidden;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.92);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    .phone-undo-pill button {
        width: 47px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--muted);
    }

    .phone-undo-pill button:first-child {
        border-right: 1px solid var(--line);
    }

    .phone-undo-pill button:disabled {
        opacity: 0.35;
    }

    .phone-undo-pill svg {
        width: 18px;
        height: 18px;
    }

    .phone-float-right {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    #phone-fit-button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgba(20, 22, 28, 0.92);
        color: var(--muted);
    }

    #phone-fit-button svg {
        width: 18px;
        height: 18px;
    }

    .phone-zoom-readout {
        min-width: 44px;
        height: 30px;
        padding: 0 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.85);
        color: var(--dim);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-health-chip {
        min-width: 44px;
        height: 38px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.92);
        color: var(--dim);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .phone-health-chip svg {
        width: 15px;
        height: 15px;
    }

    .phone-health-chip.is-warning {
        border-color: rgba(255, 113, 51, 0.5);
        color: var(--orange);
    }

    .check-show {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        margin-left: 8px;
        padding: 0 11px;
        border: 1px solid rgba(255, 113, 51, 0.45);
        border-radius: 999px;
        background: var(--orange-soft);
        color: var(--orange);
        font-size: 0.7rem;
        font-weight: 800;
        cursor: pointer;
    }

    /* ---- live stat strip (Play) ---- */
    .phone-stat-strip {
        position: fixed;
        left: calc(10px + env(safe-area-inset-left));
        right: calc(10px + env(safe-area-inset-right));
        top: calc(var(--header-h) + 8px);
        z-index: 31;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(13, 15, 19, 0.82);
        backdrop-filter: blur(8px);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
    }

    .phone-stat-strip span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .phone-stat-strip b {
        color: var(--text);
    }

    .phone-stat-strip svg {
        width: 13px;
        height: 13px;
    }

    /* ---- bottom mode bar: Build / Route / Play + "+" ---- */
    .phone-mode-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: var(--phone-bar-h);
        padding: 0 calc(86px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line-strong);
        background: rgba(11, 12, 16, 0.97);
        backdrop-filter: blur(14px);
    }

    .phone-mode-tab {
        margin: 6px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--dim);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-mode-tab.is-active {
        background: var(--orange-soft);
        color: var(--orange);
    }

    .phone-mode-tab svg {
        width: 18px;
        height: 18px;
    }

    .phone-add-button {
        position: absolute;
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--orange);
        color: #1b0900;
        font-size: 1.3rem;
        font-weight: 900;
        box-shadow: 0 10px 26px rgba(255, 113, 51, 0.4);
        cursor: pointer;
    }

    .phone-add-button svg {
        width: 24px;
        height: 24px;
    }

    .phone-add-button:disabled {
        opacity: 0.35;
    }

    body[data-phone-mode="route"] .phone-add-button,
    body[data-phone-mode="play"] .phone-add-button,
    body[data-phone-mode="play"] .phone-mode-bar,
    body.phone-sheet-raised .phone-mode-bar,
    body.phone-sheet-raised .phone-add-button {
        display: none;
    }

    /* ---- transport bar (Play) ---- */
    .phone-transport.is-visible {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: var(--phone-bar-h);
        padding: 0 calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
        display: flex;
        align-items: center;
        gap: 4px;
        border-top: 1px solid var(--line-strong);
        background: rgba(11, 12, 16, 0.97);
        backdrop-filter: blur(14px);
    }

    .phone-transport button {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-transport svg {
        width: 17px;
        height: 17px;
    }

    .phone-transport .phone-transport-play {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--orange);
        color: #1b0900;
    }

    .phone-transport .phone-transport-play.is-running {
        background: var(--green);
        color: #04170e;
    }

    .phone-transport .phone-transport-play svg {
        width: 21px;
        height: 21px;
    }

    .phone-speed {
        margin-left: auto;
        padding: 3px;
        display: flex;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.3);
    }

    .phone-transport .phone-speed button {
        min-width: 38px;
        min-height: 38px;
        border-radius: 999px;
        color: var(--dim);
        font-size: 0.7rem;
    }

    .phone-transport .phone-speed button.is-active {
        background: var(--panel-raised);
        color: var(--text);
    }

    /* ---- route mode strip ---- */
    .phone-route-strip {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--phone-bar-h);
        z-index: 58;
        height: 48px;
        padding: 0 8px 0 calc(14px + env(safe-area-inset-left));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-top: 1px solid var(--line);
        background: rgba(16, 18, 23, 0.97);
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
    }

    #phone-route-hint {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #phone-route-done {
        min-width: 78px;
        height: 40px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.78rem;
        font-weight: 900;
    }

    #phone-route-done svg {
        width: 15px;
        height: 15px;
    }

    /* ---- placement chip + recent tray ---- */
    .phone-placement-chip {
        position: fixed;
        left: 50%;
        bottom: calc(var(--phone-bar-h) + 82px);
        z-index: 58;
        max-width: calc(100vw - 24px);
        padding: 5px 5px 5px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 113, 51, 0.55);
        border-radius: 999px;
        background: rgba(38, 20, 10, 0.95);
        color: var(--orange);
        font-size: 0.74rem;
        font-weight: 800;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        transform: translateX(-50%);
    }

    .phone-placement-chip svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

    .phone-placement-chip span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #phone-placement-done {
        min-width: 62px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.74rem;
        font-weight: 900;
    }

    .phone-tray {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--phone-bar-h);
        z-index: 57;
        padding: 8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
        display: flex;
        justify-content: center;
        gap: 8px;
        overflow-x: auto;
        border-top: 1px solid var(--line);
        background: rgba(11, 12, 16, 0.94);
    }

    .phone-tray-item {
        width: 62px;
        min-height: 56px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 700;
    }

    .phone-tray-item span {
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .phone-tray-item.is-active {
        border-color: var(--orange);
        background: var(--orange-soft);
        color: var(--orange);
    }

    .phone-tray-item svg {
        width: 18px;
        height: 18px;
    }

    /* ---- selection context bar + handles ---- */
    .phone-context-bar {
        position: fixed;
        z-index: 62;
        display: flex;
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(18, 20, 26, 0.97);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    }

    .phone-context-bar button {
        min-width: 52px;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-context-bar button:active {
        background: rgba(255, 255, 255, 0.07);
    }

    .phone-context-bar button.is-danger {
        color: #ff9a9a;
    }

    .phone-context-bar svg {
        width: 16px;
        height: 16px;
    }

    .phone-handle {
        position: fixed;
        z-index: 61;
        width: 44px;
        height: 44px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 113, 51, 0.6);
        border-radius: 50%;
        background: rgba(24, 16, 10, 0.95);
        color: var(--orange);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        touch-action: none;
    }

    .phone-handle svg {
        width: 17px;
        height: 17px;
    }

    /* ---- sheet system ---- */
    .tool-panel,
    .inspector-panel,
    .phone-sheet-shell {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        width: 100%;
        height: 92dvh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--line-strong);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        background: #14161c;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(105%);
        transition: transform 220ms cubic-bezier(0.33, 1, 0.5, 1);
    }

    body.mobile-tools-open .tool-panel,
    body.mobile-inspector-open .inspector-panel {
        transform: translateY(105%);
    }

    .tool-panel.is-dragging,
    .inspector-panel.is-dragging,
    .phone-sheet-shell.is-dragging {
        transition: none;
    }

    .sheet-grabber {
        position: sticky;
        top: 0;
        z-index: 15;
        min-height: 30px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding-top: 8px;
        background: inherit;
        touch-action: none;
        cursor: grab;
    }

    .sheet-grabber::before {
        content: "";
        position: absolute;
        inset: -8px 0;
    }

    .sheet-grabber span {
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-close {
        display: none !important;
    }

    .phone-sheet-body {
        padding: 0 4px 22px;
    }

    #run-of-show-body .timeline {
        display: block;
        padding: 8px 14px 22px;
        background: transparent;
    }

    #run-of-show-body .timeline-track {
        height: 96px;
    }

    #run-of-show-body .timeline-event span {
        width: 72px;
        font-size: 0.7rem;
    }

    /* library: horizontal category chips + 3-up grid */
    .tool-tabs {
        position: static;
        margin: 2px 10px 10px;
        padding: 4px;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        border-radius: 999px;
    }

    .tool-tab {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 0.74rem;
    }

    .tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .tool-button {
        min-height: 88px;
        padding: 10px 6px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 0.72rem;
    }

    .tool-button svg {
        width: 32px;
        height: 32px;
    }

    .yard-starter-grid button {
        min-height: 74px;
    }

    .plan-mode-control button {
        min-height: 44px;
        font-size: 0.7rem;
    }

    .inspector-tabs button,
    .capacity-mode-control button {
        min-height: 44px;
    }

    /* ---- scrims, menu, confirm ---- */
    .phone-scrim {
        position: fixed;
        inset: 0;
        z-index: 64;
        background: rgba(0, 0, 0, 0.4);
    }

    .phone-scrim.is-visible {
        display: block;
    }

    #phone-menu-scrim {
        z-index: 88;
        background: rgba(0, 0, 0, 0.35);
    }

    .phone-menu.is-open {
        position: fixed;
        top: calc(var(--header-h) + 6px);
        right: 8px;
        z-index: 90;
        min-width: 228px;
        padding: 6px;
        display: block;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: #181b21;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    .phone-menu button {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 700;
        text-align: left;
    }

    .phone-menu button:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .phone-menu button.is-danger {
        color: #ff9a9a;
    }

    .phone-menu svg {
        width: 16px;
        height: 16px;
    }

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

    .phone-confirm {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: block;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-strong);
        border-radius: 16px 16px 0 0;
        background: #171a20;
        transform: translateY(110%);
        transition: transform 200ms ease;
    }

    .phone-confirm.is-open {
        transform: translateY(0);
    }

    .phone-confirm h3 {
        margin: 0 0 8px;
        font-size: 0.95rem;
    }

    .phone-confirm p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .phone-confirm-actions {
        display: flex;
        gap: 8px;
    }

    .phone-confirm-actions button {
        min-height: 46px;
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        font-size: 0.8rem;
        font-weight: 800;
    }

    .phone-confirm-actions .is-danger {
        border-color: rgba(248, 91, 91, 0.5);
        background: rgba(248, 91, 91, 0.14);
        color: #ff9a9a;
    }

    /* ---- quick start: banner + spotlight tour ---- */
    .phone-banner {
        position: fixed;
        left: 8px;
        right: 8px;
        top: calc(var(--header-h) + 6px);
        z-index: 85;
        max-height: 56px;
        padding: 6px 6px 6px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 113, 51, 0.4);
        border-radius: 14px;
        background: rgba(30, 20, 14, 0.97);
        color: var(--text);
        font-size: 0.76rem;
        font-weight: 700;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform: translateY(-120%);
        transition: transform 240ms ease, opacity 240ms ease;
        pointer-events: none;
    }

    .phone-banner.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* While the banner is up, drop the floating board controls below it. */
    body.phone-banner-open .phone-board-ui {
        top: calc(var(--header-h) + 72px);
    }

    body.phone-banner-open .phone-board-ui.is-play {
        top: calc(var(--header-h) + 112px);
    }

    body.phone-banner-open .phone-stat-strip {
        top: calc(var(--header-h) + 70px);
    }

    .phone-banner > svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: var(--orange);
    }

    .phone-banner span {
        flex: 1;
        min-width: 0;
    }

    #phone-banner-start {
        min-width: 60px;
        min-height: 40px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.74rem;
        font-weight: 900;
    }

    #phone-banner-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: var(--dim);
        font-size: 0.9rem;
    }

    .phone-tour.is-visible {
        position: fixed;
        inset: 0;
        z-index: 96;
        display: block;
    }

    .phone-tour-ring {
        position: fixed;
        border: 2px solid var(--orange);
        border-radius: 16px;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    }

    .phone-tour-card {
        position: fixed;
        left: 16px;
        right: 16px;
        max-height: 96px;
        padding: 12px 14px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: #181b21;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }

    .phone-tour-card p {
        margin: 0 0 10px;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .phone-tour-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .phone-tour-actions button {
        min-width: 64px;
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 800;
    }

    #phone-tour-next {
        border-color: var(--orange);
        background: var(--orange);
        color: #1b0900;
    }

    /* ---- toasts above the bottom bar ---- */
    .toast {
        bottom: calc(var(--phone-bar-h) + 8px);
        max-width: calc(100vw - 24px);
        font-size: 0.74rem;
    }
}

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

/* Desktop and tablet workspace polish. Keep phone behavior intentionally
   separate while giving pointer-based layouts full-size controls and canvas. */
@media (min-width: 881px) {
    :root {
        --header-h: 72px;
    }

    .app-header {
        padding: 0 16px;
        grid-template-columns: auto minmax(210px, 310px) minmax(100px, 1fr) auto;
        gap: 14px;
    }

    .brand img {
        width: 42px;
        height: 42px;
    }

    .brand strong {
        font-size: 1.08rem;
    }

    .brand small,
    .project-name span,
    .private-badge,
    .save-state {
        font-size: 0.72rem;
    }

    .project-name input,
    .account-button,
    .header-demo-button,
    .header-clear-button,
    .header-actions .icon-button {
        height: 42px;
    }

    .header-actions .icon-button {
        width: 42px;
    }

    .header-actions .icon-button svg,
    .account-button svg,
    .header-demo-button svg,
    .header-clear-button svg {
        width: 20px;
        height: 20px;
    }

    .account-button,
    .header-demo-button,
    .header-clear-button {
        font-size: 0.78rem;
    }

    .workspace {
        grid-template-columns: 272px minmax(0, 1fr) 336px;
    }

    .panel-heading {
        padding: 20px 18px 16px;
    }

    .panel-heading h2,
    .timeline-heading h2 {
        font-size: 1.1rem;
    }

    .panel-kicker,
    .tool-section-label {
        font-size: 0.72rem;
    }

    .tool-tabs {
        margin: 0 16px;
        padding: 4px;
    }

    .tool-tab {
        min-height: 42px;
        font-size: 0.72rem;
    }

    .tool-tab-panel {
        padding: 18px 16px;
    }

    .tool-grid {
        gap: 8px;
    }

    .tool-button {
        min-height: 82px;
        padding: 10px 7px;
        gap: 8px;
        font-size: 0.78rem;
    }

    .tool-button svg {
        width: 32px;
        height: 32px;
    }

    .prop-import-row input,
    .prop-import-row button {
        height: 46px;
        font-size: 0.78rem;
    }

    .prop-import-hint,
    .prop-import-error {
        font-size: 0.74rem;
    }

    .inventory-place {
        min-height: 116px;
        font-size: 0.76rem;
    }

    .inventory-thumb {
        height: 76px;
    }

    .inventory-empty {
        font-size: 0.76rem;
    }

    .control-label,
    .toggle-row,
    .wide-command {
        font-size: 0.8rem;
    }

    .stage-shell {
        grid-template-rows: 64px minmax(300px, 1fr) 42px 104px;
    }

    .stage-toolbar {
        padding: 0 16px;
        gap: 12px;
    }

    .mode-control,
    .zoom-control,
    .speed-control {
        padding: 4px;
    }

    .mode-button {
        height: 42px;
        padding: 0 15px;
        gap: 8px;
        font-size: 0.82rem;
    }

    .mode-button svg {
        width: 19px;
        height: 19px;
    }

    .zoom-control .icon-button,
    .simulation-control .icon-button {
        width: 40px;
        height: 40px;
    }

    .zoom-readout {
        width: 58px;
        height: 40px;
        font-size: 0.76rem;
    }

    .play-button {
        height: 44px;
        padding: 0 17px;
        font-size: 0.82rem;
    }

    .speed-control button {
        min-width: 40px;
        height: 34px;
        font-size: 0.76rem;
    }

    .board {
        width: min(calc(100% - 32px), calc((100dvh - var(--header-h) - 226px) * 1.4286));
        max-width: 1200px;
    }

    .board-route {
        z-index: 5;
        pointer-events: auto;
    }

    #route-shadow,
    #route-line,
    #route-preview,
    .branch-shadow,
    .branch-line {
        pointer-events: none;
    }

    #route-hit {
        stroke-width: 54;
        pointer-events: stroke;
    }

    .route-actions {
        top: 16px;
        left: 16px;
        min-height: 48px;
        padding: 7px;
        gap: 7px;
    }

    .route-tool-strip,
    .route-command-strip {
        gap: 6px;
    }

    .route-action-button {
        width: 42px;
        height: 42px;
    }

    .route-done-button {
        min-width: 76px;
        height: 42px;
        padding: 0 13px;
        gap: 7px;
        font-size: 0.78rem;
    }

    .route-action-button svg,
    .route-done-button svg {
        width: 20px;
        height: 20px;
    }

    .route-count {
        min-width: 102px;
        font-size: 0.72rem;
    }

    .route-count strong {
        font-size: 0.84rem;
    }

    .route-point {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .route-point.is-endpoint {
        width: 34px;
        height: 34px;
    }

    .stage-status {
        padding: 0 16px;
        font-size: 0.75rem;
    }

    .timeline {
        padding: 10px 16px;
    }

    .timeline-track {
        height: 58px;
        margin-top: 7px;
    }

    .inspector-tabs button {
        height: 40px;
        font-size: 0.78rem;
    }

    .onboarding-tip {
        width: 320px;
    }
}

@media (min-width: 881px) and (max-width: 1439px) {
    .workspace {
        grid-template-columns: 272px minmax(0, 1fr);
    }

    .inspector-panel {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        z-index: 70;
        width: min(360px, 92vw);
        border-left: 1px solid var(--line-strong);
        box-shadow: -20px 0 48px rgba(0, 0, 0, 0.5);
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 180ms ease;
    }

    body.mobile-inspector-open .inspector-panel {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .inspector-panel .mobile-close {
        display: inline-grid;
    }

    .mobile-dock {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 80;
        display: block;
    }

    .mobile-dock button {
        display: none;
    }

    .mobile-dock button[data-mobile-panel="inspector"] {
        min-width: 118px;
        height: 46px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 1px solid var(--line-strong);
        border-radius: 7px;
        background: rgba(25, 28, 34, 0.97);
        color: var(--text);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.46);
        font-size: 0.76rem;
        font-weight: 800;
    }

    .mobile-dock button[data-mobile-panel="inspector"] svg {
        width: 20px;
        height: 20px;
        color: var(--orange);
    }
}

@media (min-width: 881px) and (max-width: 1180px) {
    .app-header {
        grid-template-columns: auto minmax(170px, 250px) 1fr auto;
        gap: 10px;
    }

    .header-status,
    #promo-button,
    #share-button,
    #export-button {
        display: none;
    }
}