:root {
    --ink: #071a2b;
    --ink-2: #102b43;
    --paper: #f4f7f8;
    --surface: #ffffff;
    --muted: #64748b;
    --line: #dbe4e8;
    --teal: #0f766e;
    --teal-bright: #14b8a6;
    --blue: #2563eb;
    --amber: #f59e0b;
    --danger: #dc2626;
    --shadow: 0 18px 50px rgba(7, 26, 43, .16);
    --header-h: 64px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 4px; color: var(--teal); font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.app-header { height: var(--header-h); padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--ink); color: white; position: relative; z-index: 100; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #2dd4bf, #0f766e); color: white; font-size: .72rem; font-weight: 900; letter-spacing: -.02em; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 8px 22px rgba(20,184,166,.24); }
.brand-mark.large { width: 54px; height: 54px; border-radius: 17px; margin: 0 auto 18px; font-size: .9rem; }
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: .86rem; letter-spacing: -.01em; }
.brand small { color: #a8c0ce; font-size: .64rem; margin-top: 1px; }
.top-nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { padding: 8px 10px; border-radius: 9px; color: #b7cbd6; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.top-nav a:hover, .top-nav a.active { color: white; background: rgba(255,255,255,.1); }

.button { min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-weight: 780; font-size: .85rem; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--teal); color: white; box-shadow: 0 8px 18px rgba(15,118,110,.22); }
.button.primary:hover { background: #0b665f; }
.button.secondary { border-color: var(--line); background: white; color: var(--ink); }
.button.ghost { background: transparent; border-color: var(--line); }
.button.danger { color: var(--danger); border-color: #fecaca; }
.button.compact { min-height: 36px; padding: 7px 11px; border-radius: 10px; font-size: .75rem; }
.button.wide { width: 100%; }
.icon-button { border: 0; background: transparent; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.icon-button:hover { background: #eef3f5; color: var(--ink); }
.glass-panel { background: rgba(255,255,255,.92); border: 1px solid rgba(212,225,230,.9); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

.board-shell { height: calc(100dvh - var(--header-h)); min-height: 500px; position: relative; overflow: hidden; background: #dce8e9; }
.board-toolbar { position: absolute; z-index: 30; top: 12px; left: 12px; right: 12px; padding: 13px; border-radius: 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.board-toolbar h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.04em; }
.live-indicator { display: grid; grid-template-columns: 8px auto; align-content: center; column-gap: 6px; }
.live-indicator span { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); animation: livePulse 2s infinite; }
.live-indicator strong { color: #15803d; font-size: .65rem; letter-spacing: .11em; }
.live-indicator small { grid-column: 2; color: var(--muted); font-size: .62rem; white-space: nowrap; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
.search-field { grid-column: 1/-1; height: 46px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; gap: 9px; background: #f8fafb; }
.search-field:focus-within { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(20,184,166,.12); background: white; }
.search-field svg { width: 19px; fill: none; stroke: var(--muted); stroke-width: 2; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .9rem; }
.search-field .icon-button { width: 34px; height: 34px; font-size: 1.2rem; }
.toolbar-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 7px; }
.search-results { grid-column: 1/-1; max-height: 240px; overflow: auto; margin: -2px 0 0; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 16px 28px rgba(7,26,43,.12); }
.search-result { width: 100%; padding: 10px; border: 0; border-radius: 10px; background: white; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.search-result:hover, .search-result.active { background: #eaf7f5; }
.search-result strong { font-size: .85rem; }
.search-result span { color: var(--muted); font-size: .72rem; }
.search-result em { grid-row: 1/3; grid-column: 2; align-self: center; font-style: normal; color: var(--teal); font-weight: 800; font-size: .7rem; }
.search-none { padding: 14px; color: var(--muted); text-align: center; font-size: .82rem; }

.map-viewport, .editor-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #dce8e9; }
.map-viewport:active, .editor-viewport.panning { cursor: grabbing; }
.map-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(30,91,94,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(30,91,94,.13) 1px, transparent 1px), linear-gradient(rgba(30,91,94,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(30,91,94,.07) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
.map-stage, .editor-stage { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
.map-hint, .editor-hint { position: absolute; z-index: 4; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 7px 11px; border-radius: 99px; background: rgba(7,26,43,.75); color: white; font-size: .64rem; white-space: nowrap; pointer-events: none; }
.zoom-controls { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: grid; border-radius: 12px; overflow: hidden; }
.zoom-controls button { width: 42px; height: 40px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 1.2rem; cursor: pointer; }
.zoom-controls button:last-child { border: 0; }
.yard-compass { position: absolute; z-index: 6; right: 70px; bottom: 14px; width: 62px; height: 62px; border: 1px solid rgba(7,26,43,.16); border-radius: 50%; background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 7px 20px rgba(7,26,43,.12); pointer-events: none; }
.yard-compass span { position: absolute; font-size: 9px; font-weight: 900; line-height: 1; }
.yard-compass .compass-east { top: 5px; left: 50%; transform: translateX(-50%); color: var(--danger); }
.yard-compass .compass-west { bottom: 5px; left: 50%; transform: translateX(-50%); }
.yard-compass .compass-north { left: 5px; top: 50%; transform: translateY(-50%); }
.yard-compass .compass-south { right: 5px; top: 50%; transform: translateY(-50%); }
.yard-compass i, .yard-compass i::after { position: absolute; content: ""; background: #94a3b8; }
.yard-compass i { left: 50%; top: 15px; bottom: 15px; width: 1px; }
.yard-compass i::after { top: 50%; left: -15px; width: 31px; height: 1px; }
.yard-compass::after { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid var(--danger); }
.map-empty { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); pointer-events: none; }
.map-empty strong, .map-empty span { display: block; }
.map-empty strong { color: var(--ink); }
.map-empty span { margin-top: 4px; font-size: .8rem; }

.layout-element { position: absolute; transform-origin: center; user-select: none; }
.layout-element .element-label { position: absolute; left: 0; right: 0; top: -23px; text-align: center; color: #34495e; font-size: 12px; font-weight: 850; white-space: nowrap; text-shadow: 0 1px white; }
.layout-element[data-type="block"] { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.block-header { position: absolute; inset: 0 0 auto; height: 25px; padding: 5px 8px; border-radius: 10px 10px 0 0; background: var(--element-color, #0f766e); color: white; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.block-header small { opacity: .8; font-size: 8px; }
.block-slots { position: absolute; inset: 0; }
.slot-cell { position: absolute; min-width: 0; min-height: 0; display: flex; padding: 0; }
.slot-cell.empty { border: 1px dashed rgba(71,85,105,.28); border-radius: 3px; background: rgba(255,255,255,.2); }
.slot-cell.empty::after { content: "VACANT"; margin: auto; color: rgba(51,65,85,.55); font-size: clamp(6px, 8px, 9px); font-weight: 850; letter-spacing: .05em; }
.slot-cell .coach-chip { width: 100%; height: 100%; }
.coach-chip { position: relative; min-width: 0; min-height: 0; padding: 5px; border: 2px solid #202124; border-radius: 3px; background: #c7c9ce; color: #17191c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.coach-chip::before, .coach-chip::after { display: none; }
.coach-roof { position: absolute; inset: 5px; border: 1px solid rgba(32,33,36,.18); border-radius: 2px; pointer-events: none; }
.coach-info { position: relative; z-index: 1; min-width: 0; width: 100%; max-width: 100%; padding: 0 1px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.coach-chip strong { display: block; flex: none; width: 100%; max-width: 100%; margin: 0; overflow: hidden; text-align: center; text-overflow: clip; font-size: var(--coach-number-size, 18px); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.coach-chip small { display: block; flex: none; width: 100%; max-width: 100%; overflow: hidden; text-align: center; text-overflow: clip; color: #262a30; font-size: var(--coach-type-size, 12px); font-weight: 800; line-height: 1; white-space: nowrap; }
.coach-chip.status-maintenance { background: #f6c88d; border-color: #9a3e0b; }
.coach-chip.status-held { background: #e9aaa9; border-color: #8e1d1d; }
.coach-chip.search-hit { outline: 4px solid rgba(245,158,11,.48); animation: coachPulse 1.1s ease-in-out infinite alternate; z-index: 4; }
@keyframes coachPulse { to { transform: scale(1.08); box-shadow: 0 8px 22px rgba(245,158,11,.35); } }
.layout-element.search-block { filter: drop-shadow(0 0 12px rgba(245,158,11,.7)); }
.layout-element.drop-target { outline: 7px solid rgba(20,184,166,.35); outline-offset: 5px; }
.layout-element[data-type="track_straight"], .layout-element[data-type="track_curve"] { background: transparent; overflow: visible; }
.track-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.track-ties line { stroke: #765b45; stroke-width: 4; stroke-linecap: square; }
.track-rails line, .track-rails path { fill: none; stroke: #3b4d5e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.layout-element[data-type="road"] { border: 2px solid #334155; border-radius: 4px; background: #526475; box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.layout-element[data-type="road"]::after { content: ""; position: absolute; left: 5%; right: 5%; top: 50%; border-top: 2px dashed #f8fafc; opacity: .7; }
.layout-element[data-type="road"].is-vertical::after { top: 5%; bottom: 5%; left: 50%; right: auto; border-top: 0; border-left: 2px dashed #f8fafc; }
.layout-element[data-type="building"] { border: 3px solid #854d0e; border-radius: 6px; background: var(--element-color, #b45309); box-shadow: inset 0 0 0 5px rgba(255,255,255,.12), 0 7px 15px rgba(7,26,43,.16); }
.layout-element[data-type="building"]::before { content: ""; position: absolute; inset: 15%; background: repeating-linear-gradient(90deg, #cbe5ec 0 13px, transparent 13px 28px); opacity: .9; }
.layout-element[data-type="tree"] { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #86efac, #15803d 58%, #14532d); box-shadow: 10px 8px 0 rgba(21,128,61,.28), -9px 9px 0 rgba(21,128,61,.22), 0 10px 15px rgba(7,26,43,.2); }
.layout-element[data-type="water_tank"] { border: 5px solid #0e7490; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cffafe, #22d3ee 45%, #0891b2); box-shadow: inset 0 -7px rgba(8,145,178,.25), 0 8px 18px rgba(7,26,43,.15); }
.layout-element[data-type="text"] { height: auto !important; padding: 5px; color: var(--element-color, #071a2b); font-size: 20px; font-weight: 850; line-height: 1.1; white-space: normal; }

.bottom-sheet { position: absolute; z-index: 40; left: 10px; right: 10px; bottom: 10px; max-height: min(55dvh, 480px); padding: 15px; border-radius: 18px; overflow: auto; }
.sheet-head, .dialog-head, .property-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sheet-head h2, .dialog-head h2, .property-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.03em; }
.vacant-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.vacant-card { padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; text-align: left; cursor: pointer; }
.vacant-card strong { display: block; font-size: .8rem; }
.vacant-card span { color: var(--teal); font-size: .7rem; font-weight: 750; }
.coach-focus-card { position: absolute; z-index: 35; left: 12px; right: 12px; bottom: 12px; padding: 13px 15px; border-radius: 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.coach-focus-card strong { font-size: .95rem; }
.coach-focus-card span { color: var(--muted); font-size: .73rem; }
.coach-focus-card button { grid-row: 1/3; grid-column: 2; align-self: center; }

.side-drawer { position: absolute; z-index: 42; inset: 10px 10px 10px auto; width: min(390px, calc(100% - 20px)); padding: 16px; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.mini-search input { width: 100%; height: 42px; margin: 12px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; }
.coach-list { display: grid; gap: 7px; overflow: auto; }
.coach-list-item { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; cursor: grab; touch-action: none; }
.coach-list-item strong { font-size: .82rem; }
.coach-list-item span { color: var(--muted); font-size: .7rem; }
.coach-list-item button { grid-row: 1/3; grid-column: 2; align-self: center; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; width: 150px; padding: 10px; border: 2px solid var(--teal-bright); border-radius: 11px; background: white; box-shadow: var(--shadow); transform: translate(-50%,-50%) rotate(-2deg); }
.drag-ghost strong, .drag-ghost small { display: block; }
.drag-ghost small { color: var(--muted); }

.app-dialog { width: min(620px, calc(100% - 22px)); max-height: calc(100dvh - 22px); padding: 18px; border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 35px 90px rgba(7,26,43,.35); overflow: auto; }
.app-dialog::backdrop { background: rgba(7,26,43,.68); backdrop-filter: blur(3px); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; }
label { display: grid; gap: 6px; color: #334155; font-size: .73rem; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; color: var(--ink); background: white; outline: 0; font-weight: 500; }
input, select { min-height: 43px; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(20,184,166,.12); }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dialog-actions > span { flex: 1; }
.toast-region { position: fixed; z-index: 2000; right: 14px; bottom: 14px; display: grid; gap: 8px; }
.toast { max-width: min(380px, calc(100vw - 28px)); padding: 12px 15px; border-radius: 12px; background: var(--ink); color: white; box-shadow: var(--shadow); font-size: .8rem; animation: toastIn .2s ease-out; }
.toast.error { background: #991b1b; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.auth-page { min-height: 100dvh; padding: 25px 14px; display: grid; place-items: center; background: radial-gradient(circle at top, #164e63 0, #071a2b 48%, #03101c 100%); }
.auth-card { width: min(430px, 100%); padding: 28px; border-radius: 24px; background: white; box-shadow: 0 35px 100px rgba(0,0,0,.35); text-align: center; }
.auth-card h1 { margin-bottom: 8px; font-size: 1.7rem; letter-spacing: -.05em; }
.auth-card .muted { font-size: .86rem; line-height: 1.55; }
.stack-form { display: grid; gap: 13px; margin: 22px 0 15px; text-align: left; }
.text-link { color: var(--teal); font-size: .78rem; font-weight: 750; }
.notice { margin: 15px 0; padding: 11px 13px; border-radius: 11px; text-align: left; font-size: .78rem; line-height: 1.4; }
.notice.success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.notice.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.setup-card { width: min(520px, 100%); }

/* Desktop track editor */
.layout-admin-page { min-width: 1100px; overflow: hidden; }
.layout-editor { height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 258px minmax(520px,1fr) 276px; overflow: hidden; }
.layout-palette, .property-panel { position: relative; z-index: 10; background: white; overflow-y: auto; }
.layout-palette { padding: 18px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.palette-heading h1 { margin-bottom: 7px; font-size: 1.42rem; letter-spacing: -.05em; }
.palette-heading > p:last-child { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.palette-group { padding: 11px 0; border-top: 1px solid var(--line); }
.palette-group h2 { margin: 0 0 7px; color: var(--muted); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase; }
.palette-item { width: 100%; padding: 8px; border: 0; border-radius: 10px; background: white; display: flex; align-items: center; gap: 10px; text-align: left; cursor: grab; }
.palette-item:hover { background: #edf7f6; }
.palette-item strong, .palette-item small { display: block; }
.palette-item strong { font-size: .75rem; }
.palette-item small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.palette-icon { width: 38px; height: 30px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; }
.block-icon { border: 2px solid var(--teal); background: #ccfbf1; }
.track-icon { height: 20px; border-top: 3px solid #405264; border-bottom: 3px solid #405264; background: repeating-linear-gradient(90deg, transparent 0 7px,#775b44 7px 10px,transparent 10px 15px); border-radius: 0; }
.curve-icon { border: 4px double #405264; border-left-color: transparent; border-bottom-color: transparent; border-radius: 0 100% 0 0; }
.road-icon { background: #526475; border: 2px solid #334155; }
.building-icon { background: #b45309; box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); }
.tree-icon { width: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 30%,#86efac,#15803d); }
.tank-icon { width: 30px; border-radius: 50%; border: 3px solid #0e7490; background: #67e8f9; }
.text-icon { background: #f1f5f9; font-weight: 900; }
.palette-footer { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.editor-workspace { min-width: 0; position: relative; background: #dce8e9; }
.editor-toolbar { position: absolute; z-index: 20; top: 12px; left: 12px; right: 12px; min-height: 52px; padding: 8px 10px 8px 14px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.editor-toolbar strong, .editor-toolbar small { display: block; }
.editor-toolbar strong { font-size: .76rem; }
.editor-toolbar small { margin-top: 2px; color: var(--muted); font-size: .64rem; }
.editor-toolbar .toolbar-actions { display: flex; flex-wrap: nowrap; align-items: center; }
#zoomReadout { min-width: 44px; color: var(--muted); text-align: center; font-size: .7rem; }
.editor-viewport { top: 0; }
.editor-element { cursor: move; }
.editor-element[data-type="block"] { border: 2px dashed color-mix(in srgb, var(--element-color, #0f766e) 72%, white); border-radius: 13px; background: color-mix(in srgb, var(--element-color, #0f766e) 7%, transparent); box-shadow: 0 8px 22px rgba(7,26,43,.1); pointer-events: none; }
.editor-element[data-type="block"] .block-header, .editor-element[data-type="block"] .resize-handle { pointer-events: auto; }
.editor-element.selected { outline: 2px solid var(--blue); outline-offset: 5px; }
.editor-element.selected::after { content: ""; position: absolute; width: 13px; height: 13px; right: -11px; bottom: -11px; border: 2px solid white; border-radius: 3px; background: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none; }
.resize-handle { position: absolute; z-index: 4; display: none; width: 26px; height: 26px; right: -17px; bottom: -17px; cursor: nwse-resize; }
.length-handle { position: absolute; z-index: 5; display: none; width: 22px; height: 34px; right: -17px; top: 50%; transform: translateY(-50%); border: 2px solid white; border-radius: 5px; background: var(--blue); box-shadow: 0 2px 7px rgba(0,0,0,.3); cursor: ew-resize; }
.editor-element.selected > .resize-handle, .editor-element.selected > .length-handle { display: block; }
.editor-element.is-vertical .length-handle { width: 34px; height: 22px; right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%); cursor: ns-resize; }
.editor-block-inactive { position: absolute; inset: 30px 8px 8px; border: 1px dashed #94a3b8; border-radius: 8px; background: repeating-linear-gradient(135deg,rgba(148,163,184,.12) 0 8px,rgba(255,255,255,.28) 8px 16px); display: grid; place-items: center; color: #64748b; font-size: 10px; font-weight: 800; text-align: center; }
.property-panel { padding: 18px 15px; border-left: 1px solid var(--line); }
.property-empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); }
.property-empty span { font-size: 2rem; }
.property-empty strong { color: var(--ink); font-size: .85rem; }
.property-empty p { max-width: 210px; margin: 6px auto; font-size: .7rem; line-height: 1.5; }
#propertyForm { display: grid; gap: 13px; }
.position-readout { padding: 9px; border-radius: 9px; background: #f1f5f9; display: flex; justify-content: space-around; color: var(--muted); font-size: .7rem; }
.position-readout b { color: var(--ink); }

.users-dialog { width: min(900px, calc(100% - 30px)); }
.users-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.user-list { max-height: 460px; overflow: auto; display: grid; align-content: start; gap: 7px; }
.user-card { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; cursor: pointer; }
.user-card.active { border-color: var(--teal); background: #eaf7f5; }
.user-card strong { font-size: .8rem; }
.user-card span { color: var(--muted); font-size: .67rem; }
.role-badge { grid-row: 1/3; grid-column: 2; align-self: center; padding: 4px 7px; border-radius: 99px; background: #e2e8f0; color: #334155 !important; font-size: .58rem !important; font-weight: 800; text-transform: uppercase; }
.check-label { grid-template-columns: auto 1fr; align-items: center; }
.check-label input { width: 18px; min-height: 18px; }
.form-note { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

@media (min-width: 760px) {
    .app-header { padding: 0 24px; }
    .brand strong { font-size: .95rem; }
    .top-nav a { padding: 9px 13px; font-size: .8rem; }
    .board-toolbar { top: 18px; left: 18px; right: auto; width: min(620px, calc(100% - 110px)); padding: 15px; grid-template-columns: auto auto minmax(250px,1fr); align-items: center; }
    .board-toolbar > div:first-child { min-width: 150px; }
    .board-toolbar h1 { font-size: 1.35rem; }
    .search-field { grid-column: 3; grid-row: 1; }
    .toolbar-actions { grid-column: 1/-1; }
    .search-results { grid-column: 3; grid-row: 2; align-self: start; }
    .bottom-sheet { left: auto; right: 18px; bottom: 18px; width: 390px; }
    .coach-focus-card { left: 50%; right: auto; width: 370px; transform: translateX(-50%); bottom: 18px; }
    .vacant-list { grid-template-columns: repeat(2,1fr); }
    .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-grid .full { grid-column: 1/-1; }
}

@media (max-width: 560px) {
    :root { --header-h: 58px; }
    .app-header { gap: 8px; }
    .brand small { display: none; }
    .brand > span:last-child { display: none; }
    .brand-mark { width: 34px; height: 34px; }
    .top-nav a { padding: 7px 8px; font-size: .68rem; }
    .top-nav a.active { display: none; }
    .admin-toolbar .mobile-hide { display: none; }
    .board-toolbar { max-height: 230px; }
    .map-hint { bottom: 8px; }
    .zoom-controls { bottom: 42px; }
    .coach-focus-card { bottom: 42px; }
    .dialog-actions { flex-wrap: wrap; }
    .dialog-actions .button { flex: 1; }
}

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