@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ivory:#e9e4d8; --charcoal:#263436; --surface:var(--charcoal); --foreground:var(--ivory); --ink:var(--foreground); --muted:var(--foreground); --panel:var(--surface); --line:color-mix(in srgb,var(--foreground) 28%,var(--surface)); --accent:var(--foreground); --bg:var(--surface); --surface-hover:color-mix(in srgb,var(--foreground) 10%,var(--surface)); --surface-active:color-mix(in srgb,var(--foreground) 18%,var(--surface)); --focus-ring:color-mix(in srgb,var(--foreground) 70%,transparent); --shadow:color-mix(in srgb,var(--foreground) 16%,transparent); --shadow-hover:color-mix(in srgb,var(--foreground) 28%,transparent); --stage-background:#1b2729; --stage-grid:#3d5154; --canvas-board:#203032; --canvas-border:#607174; --canvas-grid:#3d5154; --canvas-track-base:#d9e5df; --canvas-track-hover:#ffffff; --canvas-rail:#10201e; --canvas-endpoint:#f4f8f5; --canvas-endpoint-connected:#d2d5d7; --canvas-endpoint-open:#e05252; --canvas-endpoint-selected:#2f80ed; --canvas-endpoint-border:#202020; --canvas-label-background:#10201e; --canvas-label-text:#f4f8f5; --canvas-label-border:#d9e5df; --ruler-background:#202b2d; --ruler-border:#718082; --ruler-tick:#a8b5b5; --ruler-text:#d8e0dc; }
:root[data-theme="light"] { --surface:var(--ivory); --foreground:var(--charcoal); --stage-background:#f7fbf8; --stage-grid:#d9dad4; --canvas-board:#ffffff; --canvas-border:#7e8982; --canvas-grid:#c5cec7; --canvas-track-base:#36564a; --canvas-track-hover:#17352a; --canvas-rail:#24332e; --canvas-endpoint:#17352a; --canvas-endpoint-connected:#5b6b63; --canvas-endpoint-open:#c43f3f; --canvas-endpoint-selected:#1769aa; --canvas-endpoint-border:#263832; --canvas-label-background:#ffffff; --canvas-label-text:#17352a; --canvas-label-border:#36564a; --ruler-background:#e5e9e5; --ruler-border:#8d9991; --ruler-tick:#66736c; --ruler-text:#33413a; }
:root[data-theme="light"] body { background:#edf4f0; }
:root[data-theme="light"] .app-shell { background:radial-gradient(circle at 15% 0%,#d7e8dc 0,transparent 31%),#edf4f0; }
:root[data-theme="light"] .topbar { background:rgba(255,255,255,.84); border-color:#c9d8d1; }
:root[data-theme="light"] .sidebar { background:#f7fbf8; border-color:#c9d8d1; }
:root[data-theme="light"] .topbar-title-input,:root[data-theme="light"] .sidebar-tabs,:root[data-theme="light"] .inspector-input,:root[data-theme="light"] .inspector-select { background:#ffffff; }
:root[data-theme="light"] .secondary-button,:root[data-theme="light"] .layer-controls button,:root[data-theme="light"] .axis-buttons button,:root[data-theme="light"] .cat-btn,:root[data-theme="light"] .stage-btn,:root[data-theme="light"] .floating-action-bar button { background:#f2f7f4; border-color:#b9cdc3; color:#31423b; }
:root[data-theme="light"] .secondary-button:hover:not(:disabled),:root[data-theme="light"] .stage-btn:hover,:root[data-theme="light"] .floating-action-bar button:hover { background:#e2eee6; }
:root[data-theme="light"] .track-card,:root[data-theme="light"] .inspector-panel { background:#ffffff; border-color:#c9d8d1; }
:root[data-theme="light"] .track-preview { background:#f1f7f3; border-color:#b9cdc3; }
:root[data-theme="light"] .stage-wrap { background-color:#e6eee8; background-image:linear-gradient(rgba(73,96,84,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(73,96,84,.12) 1px,transparent 1px); }
:root[data-theme="light"] .stage-toolbar,:root[data-theme="light"] .floating-stats { background:rgba(255,255,255,.9); border-color:#c9d8d1; box-shadow:0 4px 16px rgba(39,64,51,.14); }
:root[data-theme="light"] .floating-action-bar { background:rgba(255,255,255,.94); border-color:#c9d8d1; box-shadow:0 8px 24px rgba(39,64,51,.18); }
:root[data-theme="light"] .toast { background:#ffffff; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font-family:Manrope,system-ui,sans-serif; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 15% 0%,#18332d 0,transparent 31%),#07100f; }
.topbar { height:68px; padding:0 28px; border-bottom:1px solid #1d312d; display:flex; align-items:center; gap:26px; background:rgba(7,16,15,.78); }
.brand { font-size:15px; letter-spacing:.04em; white-space:nowrap; }.brand b { font-weight:800; }.mark { display:inline-grid; place-items:center; width:24px;height:24px; margin-right:8px; color:#09110e; background:var(--accent); border-radius:4px; font-size:19px; font-weight:bold; line-height:1; text-align:center; vertical-align:middle; }.file-name { margin-left:auto; color:var(--muted); font:12px 'DM Mono'; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.open-button,.primary-button { cursor:pointer; border:1px solid #6e9769; color:#152213; background:var(--accent); padding:10px 14px; border-radius:5px; font-size:12px; font-weight:800; }.open-button input,.primary-button input { display:none; }
.empty-state { text-align:center; margin:clamp(70px,15vh,155px) auto; max-width:600px; padding:30px; }.drop-icon { width:54px;height:54px;display:grid;place-items:center;margin:auto;background:#18312b;border:1px solid #426350;color:var(--accent);border-radius:10px;font-size:28px; }.empty-state h1 { font-size:clamp(24px,3vw,38px);letter-spacing:-.045em;margin:22px 0 9px; }.empty-state p { color:var(--muted);line-height:1.75;font-size:14px;margin:0 auto 26px; }.empty-state code { color:var(--accent); }.primary-button { display:inline-block; }.empty-state.dragging { outline:2px dashed var(--accent); outline-offset:14px; border-radius:12px; }
.hidden { display:none!important; }.viewer { height:calc(100vh - 68px);display:flex; }.sidebar { width:340px;flex:none;padding:30px 24px;border-right:1px solid #1d312d;background:#0b1715;z-index:2; }.project-title>span,.label { display:block;color:#6e8b82;font:10px 'DM Mono';letter-spacing:.17em; }.project-title h1 { margin:8px 0 25px;font-size:20px;letter-spacing:-.035em;word-break:break-word; }.stats { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;gap:7px; }.stats strong,.stats span { display:block; }.stats strong { color:var(--accent);font:500 18px 'DM Mono'; }.stats span { color:var(--muted);font-size:10px;margin-top:5px; }.control-group { margin-top:28px; }.segmented { display:flex;border:1px solid #324841;border-radius:5px;overflow:hidden;margin-top:10px; }.segmented button { flex:1;color:var(--muted);background:transparent;border:0;padding:9px 4px;font:11px Manrope;cursor:pointer; }.segmented button.active { background:#243932;color:var(--accent); }.switch-row { position:relative;display:flex;align-items:center;justify-content:space-between;margin-top:14px;color:#bdc9c5;font-size:12px;cursor:pointer; }.switch-row input { position:absolute;opacity:0; }.switch-row i { width:30px;height:16px;background:#263934;border-radius:20px;position:relative; }.switch-row i:after { content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#8b9b96;top:3px;left:3px;transition:.2s; }.switch-row input:checked+i { background:#50733e; }.switch-row input:checked+i:after { background:var(--accent);transform:translateX(14px); }.hint { position:absolute;bottom:20px;color:#637771;font-size:10px;line-height:1.8; }.stage-wrap { position:relative;flex:1;min-width:0;overflow:hidden;background-color:#10201e;background-image:linear-gradient(rgba(135,178,155,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(135,178,155,.045) 1px,transparent 1px);background-size:32px 32px; }.stage-wrap:before { content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(2,9,8,.35)); }.stage-wrap canvas { width:100%;height:100%;display:block;cursor:grab; }.stage-wrap canvas:active { cursor:grabbing; }.view-label { position:absolute;top:18px;left:20px;color:#84a297;font:10px 'DM Mono';letter-spacing:.16em; }.track-tooltip { position:absolute;z-index:3;pointer-events:none;white-space:pre-line;padding:8px 10px;border:1px solid #5f7a6d;border-radius:4px;background:rgba(7,16,15,.94);color:#e9f0ee;font:11px/1.55 'DM Mono';box-shadow:0 5px 18px rgba(0,0,0,.3); }.fit-button { position:absolute;right:18px;top:15px;border:1px solid #3d564e;color:#d5e4dd;background:#132622;padding:8px 11px;border-radius:4px;font:11px Manrope;cursor:pointer; }.legend { position:absolute;left:20px;bottom:18px;font:10px 'DM Mono';color:#79928a; }.legend i { display:inline-block;width:23px;border-top:2px solid var(--accent);vertical-align:middle;margin-right:7px; }.legend b { display:inline-block;width:6px;height:6px;border-radius:50%;background:#5e8577;margin:0 6px; }
@media(max-width:700px){ .topbar{padding:0 14px}.file-name{display:none}.sidebar{position:absolute;bottom:0;width:100%;height:125px;padding:14px 16px;border-right:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px}.project-title h1{font-size:15px;margin:4px 0}.stats{padding:7px 0}.control-group{margin:0}.sidebar .control-group:nth-of-type(2),.hint{display:none}.viewer{height:calc(100vh - 68px)} }

.layers-panel { margin-top:10px;border:1px solid #2c443c;border-radius:5px;overflow:hidden; }
.layer-row { display:flex;align-items:center;gap:8px;padding:8px 9px;border-bottom:1px solid #21352f;color:#afc0b9;font:11px Manrope;cursor:pointer; }
.layer-row:last-child { border-bottom:0; }.layer-row input { accent-color:#a9e463; }
.layer-name { min-width:0; flex:1; }
.layer-row .layer-controls { flex:none; }
.layer-controls button:disabled { opacity:0.35; cursor:default; }
.layer-color { flex:none;width:22px;height:22px;padding:2px;border:1px solid #385047;border-radius:4px;background:#142722;cursor:pointer; }.layer-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.number-row { display:flex;align-items:center;gap:7px;margin-top:10px;color:#afc0b9;font-size:11px; }.number-row input { margin-left:auto;width:72px;border:1px solid #3b554c;border-radius:3px;background:#10211d;color:#eaf4ef;padding:5px;font:11px 'DM Mono'; }.number-row em { color:#718881;font:10px 'DM Mono';font-style:normal; }
.layer-controls { margin-left:auto;display:flex;gap:3px; }.layer-controls button,.axis-buttons button { border:1px solid #385047;background:#142722;color:#b7cbc2;border-radius:3px;cursor:pointer;font:11px Manrope; }.layer-controls button { width:24px;height:22px;line-height:18px;padding:0;display:grid;place-items:center; }.layer-controls button.is-active { color:var(--surface);border-color:var(--accent);background:var(--accent); }.layer-control-icon { position:relative;display:block;width:14px;height:14px;color:currentColor; }.layer-select-icon { font:700 12px/14px 'DM Mono',monospace; }.layer-lock-icon { width:auto;height:14px;margin-top:0;font:14px/14px 'Segoe UI Symbol','Noto Sans Symbols 2',sans-serif;font-variant-emoji:text; }.layer-visibility-icon { width:14px;height:9px;margin-top:2px;border:1.5px solid currentColor;border-radius:50%; }.layer-visibility-icon::after { content:'';position:absolute;width:3px;height:3px;left:4px;top:1.5px;border:1px solid currentColor;border-radius:50%; }.layer-visibility-icon::before { content:'';position:absolute;width:2px;height:18px;left:5px;top:-5px;background:currentColor;border-radius:2px;transform:rotate(-45deg);opacity:0; }.layer-controls button.is-active .layer-visibility-icon::before { opacity:1; }.axis-buttons { display:flex;gap:6px;margin-top:10px; }.axis-buttons button { flex:1;padding:7px 4px; }.axis-buttons button.active { color:#102012;background:#a9e463;border-color:#a9e463;font-weight:700; }

/* Creator Layout & Controls */
.topbar-link { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 5px; border: 1px solid transparent; transition: all 0.2s; }
.topbar-link:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,0.04); }

.topbar-title-input { background: #0c1816; border: 1px solid var(--line); color: var(--accent); font: 500 14px 'DM Mono', monospace; padding: 6px 12px; border-radius: 5px; width: 180px; outline: none; transition: border-color 0.2s; }
.topbar-title-input:focus { border-color: var(--accent); }
.view-mode-toggle { width:200px; margin:0; flex:none; }
.view-mode-toggle button { padding:7px 4px; }
body.view-3d .sidebar,body.view-3d .stage-toolbar,body.view-3d .floating-action-bar,body.view-3d .bridge-pier-action,body.view-3d .selected-track-name,body.view-3d .legend { display:none!important; }
body.view-3d #editorCanvas { cursor:grab; }
body.view-3d #editorCanvas:active { cursor:grabbing; }
#advancedGpuCanvas { position:absolute;inset:0;z-index:0;pointer-events:none; }
#advancedGpuCanvas[hidden],.advanced-renderer-status[hidden] { display:none; }
body.view-advanced-gpu #editorCanvas { position:relative;z-index:1; }
.advanced-renderer-status { position:absolute;left:18px;top:18px;pointer-events:none;padding:5px 8px;border-radius:4px;background:var(--surface);color:var(--foreground);font-size:10px; }
.gpu-loading-overlay { position:absolute; inset:0; z-index:100; display:grid; place-items:center; background:color-mix(in srgb,var(--surface) 36%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:1; transition:opacity 450ms ease,backdrop-filter 450ms ease; cursor:wait; }
.gpu-loading-overlay[hidden] { display:none; }
.gpu-loading-overlay.is-fading { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); }
.gpu-loading-card { display:grid; justify-items:center; gap:14px; padding:28px 36px; max-width:calc(100% - 32px); border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface) 80%,transparent); color:var(--foreground); box-shadow:0 12px 40px var(--shadow); text-align:center; }
.gpu-loading-card strong { font-size:18px; }
.gpu-loading-card > span:last-child { font-size:12px; }
.gpu-loading-spinner { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--foreground); border-radius:50%; animation:gpu-loading-spin 900ms linear infinite; }
@keyframes gpu-loading-spin { to { transform:rotate(360deg); } }
.stage-wrap { --fleet-dock-width:min(370px,calc(100% - 52px)); }
.fleet-dock { display:none; position:absolute; inset:0 auto 0 0; z-index:33; grid-template-columns:minmax(0,1fr) 44px; width:var(--fleet-dock-width); transform:translateX(calc(-100% + 44px)); transition:transform .24s ease; }
body.debug-mode.view-3d .fleet-dock { display:grid; }
.fleet-dock.is-open { transform:translateX(0); }
.fleet-dock-content { min-width:0; min-height:0; overflow:hidden; }
.fleet-dock-toggle { align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:104px; padding:10px 6px; border:1px solid var(--line); border-left:0; border-radius:0 9px 9px 0; background:color-mix(in srgb,var(--surface) 95%,transparent); color:var(--foreground); box-shadow:6px 8px 20px var(--shadow); backdrop-filter:blur(12px); font:700 12px Manrope,sans-serif; cursor:pointer; }
.fleet-dock-toggle:focus-visible { outline:2px solid var(--foreground); outline-offset:2px; }
.fleet-dock-icon { font-size:24px; line-height:1; }
.fleet-dock-chevron { font:700 20px/1 Manrope,sans-serif; transition:transform .24s ease; }
.fleet-dock.is-open .fleet-dock-chevron { transform:rotate(180deg); }
.train-console { display:none; width:100%; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); color:var(--foreground); font-family:Manrope,sans-serif; }
body.debug-mode.view-3d .train-console:not([hidden]) { display:block; }
.train-console-status { min-width:0; padding:0; }
.train-console-status { display:grid; grid-template-columns:1fr; gap:5px; align-items:center; }
#trainSettingsFields { display:grid; gap:5px; min-width:0; margin:0; padding:0; border:0; }
#trainSettingsFields:disabled { opacity:.5; }
.train-console strong { color:color-mix(in srgb,var(--foreground) 74%,var(--surface)); font:700 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.train-console-status strong { grid-column:1 / -1; }
.train-console-status small { color:color-mix(in srgb,var(--foreground) 68%,var(--surface)); font-size:10px; }
.turnout-slider { width:100%; min-width:0; height:22px; margin:0; accent-color:var(--foreground); }
.train-car-count-control { display:grid; grid-template-columns:40px 1fr 36px; gap:6px; align-items:center; color:var(--foreground); font:700 10px 'DM Mono',monospace; }
.train-car-count-control input { width:100%; min-width:0; margin:0; accent-color:var(--foreground); }
.train-car-count-control output { text-align:right; }
.train-car-length-control { display:grid; grid-template-columns:64px 1fr; gap:6px; align-items:center; color:var(--foreground); font:700 10px 'DM Mono',monospace; }
.train-car-length-control select { width:100%; min-width:0; height:26px; padding:0 6px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--foreground); font:700 11px Manrope,sans-serif; cursor:pointer; }
.train-skin-control { display:grid; grid-template-columns:auto minmax(0,1fr) 22px; gap:6px; align-items:center; min-width:0; }
.train-skin-upload { display:grid; place-items:center; min-height:26px; padding:0 8px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--foreground); font:700 10px Manrope,sans-serif; cursor:pointer; white-space:nowrap; }
.train-skin-upload input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
.train-skin-upload:focus-within { outline:2px solid var(--foreground); outline-offset:2px; }
#trainSkinName { min-width:0; overflow:hidden; color:color-mix(in srgb,var(--foreground) 72%,var(--surface)); font:10px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
#clearTrainSkinBtn { width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--foreground); font:700 15px/1 Manrope,sans-serif; cursor:pointer; }
#clearTrainSkinBtn[hidden] { display:none; }
.train-display-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px 8px; color:var(--foreground); font:600 10px Manrope,sans-serif; }
.train-display-options label { display:flex; align-items:center; gap:5px; min-width:0; cursor:pointer; white-space:nowrap; }
.train-display-options input { width:13px; height:13px; margin:0; accent-color:var(--foreground); }
.fleet-panel { display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; overflow:auto; padding:10px; border:1px solid var(--line); border-right:0; border-radius:0; background:color-mix(in srgb,var(--surface) 95%,transparent); color:var(--foreground); box-shadow:0 10px 28px var(--shadow); backdrop-filter:blur(12px); pointer-events:auto; }
.fleet-panel[hidden] { display:none; }
.fleet-train-list { display:grid; gap:8px; margin-top:10px; }
.fleet-train-row.is-selected { border-color:var(--foreground); background:var(--surface-hover); }
.fleet-train-row { display:grid; grid-template-columns:54px minmax(65px,1fr) 52px 52px; grid-template-rows:30px 28px; gap:6px; padding:8px; border:1px solid var(--line); border-radius:8px; align-items:center; }
.fleet-train-row { box-shadow:0 3px 8px var(--shadow); }
.fleet-train-row button,.fleet-train-status,.fleet-train-speed { box-shadow:0 2px 5px var(--shadow); }
.fleet-train-row button:hover { box-shadow:0 4px 10px var(--shadow-hover); }
.fleet-train-row:focus-visible { outline:2px solid var(--foreground); outline-offset:2px; }
.fleet-train-row button { min-width:0; height:28px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--foreground); cursor:pointer; font-size:11px; }
.fleet-train-row .fleet-train-icon { grid-row:1 / 3; height:64px; font-size:32px; cursor:grab; touch-action:none; }
.fleet-train-icon small { display:block; font-size:10px; }
.fleet-train-status { padding:4px; border:1px solid var(--line); border-radius:5px; font-size:11px; text-align:center; }
.fleet-train-speed { grid-column:2 / 4; width:100%; min-width:0; margin:0; accent-color:var(--foreground); }
.fleet-train-row .fleet-train-delete { color:#ef4444; }
.train-style-thumbnail { display:block; width:40px; height:40px; flex:none; background-repeat:no-repeat; background-position:left top; border-radius:4px; }
.fleet-train-icon .train-style-thumbnail { width:32px; height:32px; margin:auto; }
.train-style-picker { position:fixed; inset:auto; z-index:60; width:252px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); margin:0; padding:8px; overflow:visible; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--foreground); box-shadow:0 12px 32px var(--shadow); }
.train-style-picker::before { content:''; position:absolute; top:var(--style-arrow-top,42px); left:-7px; width:12px; height:12px; background:var(--surface); border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
.train-style-picker.is-left::before { left:auto; right:-7px; transform:rotate(225deg); }
.train-style-picker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.train-style-selection { min-width:0; }
.train-style-picker-header h3 { margin:0; font-size:13px; overflow-wrap:anywhere; }
.train-style-picker-header p { margin:5px 0 0; font-size:10px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.train-style-picker-header button { flex:none; padding:3px 7px; }
.train-formation-select { min-width:0; max-width:104px; height:28px; padding:0 4px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--foreground); font:11px Manrope,sans-serif; box-shadow:0 2px 5px var(--shadow); }
.train-formation-select[hidden] { display:none; }
.train-style-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-top:8px; max-height:min(320px,calc(100vh - 160px)); overflow:auto; }
.train-style-option { display:grid; place-items:center; min-width:0; height:66px; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--surface-hover); color:var(--foreground); font:30px Manrope,sans-serif; cursor:pointer; }
.train-style-option .train-style-thumbnail { width:48px; height:48px; }
.train-style-option:hover:not(:disabled) { background:var(--surface-active); border-color:var(--foreground); }
.train-style-option[aria-pressed="true"] { border-color:var(--foreground); box-shadow:inset 0 0 0 1px var(--foreground); background:var(--surface-active); }
.train-style-option:focus-visible { outline:2px solid var(--foreground); outline-offset:-3px; }
.train-style-option:disabled { opacity:.5; cursor:wait; }
.train-style-tooltip { position:fixed; z-index:61; max-width:min(300px,calc(100vw - 16px)); padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--foreground); box-shadow:0 6px 16px var(--shadow); white-space:pre-line; overflow-wrap:anywhere; font:11px/1.6 Manrope,sans-serif; pointer-events:none; }
.train-style-tooltip[hidden] { display:none; }
.fleet-dragging,.fleet-dragging * { cursor:grabbing!important; }
@media (max-width:640px) {
  .stage-wrap { --fleet-dock-width:min(340px,calc(100% - 48px)); }
  .fleet-dock { grid-template-columns:minmax(0,1fr) 40px; transform:translateX(calc(-100% + 40px)); }
}
.turnout-picker { position:absolute; z-index:36; display:grid; grid-template-columns:1fr 34px 34px; align-items:center; gap:6px; min-width:138px; padding:7px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb,var(--surface) 96%,transparent); color:var(--foreground); box-shadow:0 10px 24px var(--shadow); backdrop-filter:blur(10px); }
.turnout-picker[hidden] { display:none!important; }
.turnout-picker span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 10px 'DM Mono',monospace; }
.turnout-picker button { height:28px; border:1px solid var(--line); border-radius:5px; background:var(--surface-hover); color:var(--foreground); font:900 12px Manrope,sans-serif; cursor:pointer; }
.turnout-picker button.active { background:var(--foreground); border-color:var(--foreground); color:var(--surface); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-actions > .secondary-button,.topbar-actions > .primary-button,.topbar-actions > .dropdown-container > .primary-button { height:36px; padding-top:0; padding-bottom:0; }
.topbar-actions > .icon-btn { width:36px; padding-left:0; padding-right:0; }

/* Export Dropdown Menu */
.dropdown-container { position: relative; display: inline-flex; align-items: center; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dropdown-arrow { font-size: 10px; transition: transform 0.2s ease; }
.dropdown-container.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 175px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px var(--shadow); padding: 5px; display: flex; flex-direction: column; gap: 3px; z-index: 100; }
.dropdown-menu.hidden { display: none !important; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; border: 0; border-radius: 4px; color: var(--foreground); font: 600 12px Manrope, sans-serif; cursor: pointer; text-align: left; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.dropdown-item:hover { background: var(--surface-hover); color: var(--foreground); }

.secondary-button { cursor: pointer; border: 1px solid #385047; color: #b7cbc2; background: #142722; padding: 8px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.secondary-button:hover:not(:disabled) { background: #203a34; color: var(--ink); border-color: #4c6b5e; }
.secondary-button:disabled { opacity: 0.4; cursor: not-allowed; }
.secondary-button input { display: none; }
.icon-btn { padding: 8px 10px; font-size: 14px; }

/* Sidebar Tabs & Catalog */
.sidebar-tabs { display: flex; border-bottom: 1px solid var(--line); margin: -10px -24px 20px -24px; padding: 0 16px; background: #081211; }
.sidebar-tab { flex: 1; padding: 12px 6px; border: 0; background: transparent; color: var(--muted); font: 600 11px Manrope, sans-serif; cursor: pointer; border-bottom: 2px solid transparent; text-align: center; transition: all 0.2s; }
.sidebar-tab:hover { color: var(--ink); }
.sidebar-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(169, 228, 99, 0.05); }

.sidebar-scroll { overflow-y: auto; max-height: calc(100vh - 220px); padding-right: 4px; scrollbar-color: color-mix(in srgb, var(--foreground) 72%, var(--surface)) transparent; scrollbar-width: thin; }
.sidebar-scroll::-webkit-scrollbar, .track-summary::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb, .track-summary::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--foreground) 72%, var(--surface)); border-radius: 2px; }
.sidebar-scroll::-webkit-scrollbar-track, .track-summary::-webkit-scrollbar-track { background: transparent; }

.catalog-cats { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.catalog-search { display: block; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 10px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--foreground); font: 11px 'DM Mono', monospace; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.catalog-search::placeholder { color: color-mix(in srgb, var(--foreground) 58%, var(--surface)); transition: color .18s ease; }
.catalog-search:hover { border-color: color-mix(in srgb, var(--foreground) 65%, var(--surface)); background: var(--surface-hover); }
.catalog-search:focus { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground), 0 3px 10px var(--shadow); background: var(--surface-hover); }
.catalog-search:focus::placeholder { color: color-mix(in srgb, var(--foreground) 38%, var(--surface)); }
.catalog-search::-webkit-search-cancel-button { width: 13px; height: 13px; margin-right: 1px; cursor: pointer; filter: grayscale(1); opacity: .7; }
.catalog-search::-webkit-search-cancel-button:hover { opacity: 1; }
.parameter-import { width: 100%; margin-bottom: 12px; text-align: center; }
.parameter-import input { display: none; }
.parameter-settings { margin-bottom: 12px; }
.parameter-settings-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.parameter-settings-toggle::-webkit-details-marker { display: none; }
.parameter-settings-toggle::after { content: ''; flex: none; width: 0; height: 0; margin-left: 12px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.parameter-settings[open] .parameter-settings-toggle::after { border-top: 0; border-bottom: 6px solid currentColor; }
.parameter-settings-panel { display: grid; gap: 8px; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.parameter-defaults { display: grid; gap: 2px; }
.parameter-default { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--foreground); font: 10px 'DM Mono'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parameter-default input { flex: none; margin: 0; accent-color: var(--foreground); }
.parameter-default span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parameter-default:last-child { border-bottom: 0; }
.parameter-settings .parameter-import { margin-bottom: 0; }
.cat-btn { background: #10211d; border: 1px solid #283e37; color: var(--muted); font: 10px 'DM Mono'; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.cat-btn.active, .cat-btn:hover { background: #1f3630; color: var(--accent); border-color: var(--accent); }

.catalog-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.catalog-group { display: grid; gap: 4px; }
.catalog-group-title { margin: 0; padding: 0 2px 4px; border-bottom: 1px solid #36534b; color: var(--accent); font: 600 10px 'DM Mono'; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.catalog-group-title::marker { color: var(--muted); }
.catalog-group-count { float: right; color: var(--muted); font-weight: 400; }
.catalog-group-items { display: grid; gap: 6px; }
.catalog-subgroup { display: grid; gap: 5px; margin-left: 8px; }
.catalog-subgroup-title { padding: 4px 2px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 10px 'DM Mono'; cursor: pointer; }
.catalog-subgroup-title::marker { color: var(--muted); }
.catalog-subgroup-count { float: right; font-weight: 400; }
.catalog-subgroup-items { display: grid; gap: 6px; padding-left: 6px; }
.track-card { background: #0f1d1b; border: 1px solid #20352f; border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; gap: 9px; }
.track-card:hover { border-color: var(--accent); background: #152724; transform: translateY(-1px); }
.track-preview { flex: none; width: 76px; height: 40px; border: 1px solid #29463d; border-radius: 3px; background: #0a1614; }
.track-card-info h4 { margin: 0 0 3px 0; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.track-card-info p { margin: 0; font: 11px 'DM Mono'; color: var(--muted); }
.track-card-info { min-width: 0; flex: 1; }
.track-card-add { background: #1d332d; border: 1px solid #36534b; color: var(--accent); width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; font-size: 16px; font-weight: bold; transition: all 0.15s; }
.track-card:hover .track-card-add { background: var(--accent); color: #07100f; border-color: var(--accent); }

/* Inspector Panel */
.inspector-panel { background: #0f1d1b; border: 1px solid #213831; border-radius: 6px; padding: 14px; margin-top: 10px; }
.inspector-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.inspector-row label { font: 11px 'DM Mono'; color: #879f97; }
.inspector-input { background: #081211; border: 1px solid #2b443c; color: var(--ink); font: 12px 'DM Mono'; padding: 5px 8px; border-radius: 4px; width: 76px; text-align: right; }
.inspector-input:focus { border-color: var(--accent); outline: none; }
.inspector-select { background: #081211; border: 1px solid #2b443c; color: var(--ink); font: 12px Manrope; padding: 5px 8px; border-radius: 4px; width: 110px; }

.btn-group { display: flex; gap: 5px; margin-top: 8px; }
.btn-group button { flex: 1; padding: 6px 4px; font-size: 11px; }
.height-section { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.height-section-title { margin-bottom: 8px; color: var(--accent); font: 11px 'DM Mono'; }
.height-endpoint-labels { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:4px; color:var(--muted); font:11px 'DM Mono'; }
.height-input-pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:5px; margin-bottom:10px; color:var(--muted); font:10px 'DM Mono'; }
.height-input-pair .inspector-input { width:100%; min-width:0; }
.inspector-input.slope-value[data-grade="safe"] { color:#167344; background:#e3f6e9; border-color:#268650; }
.inspector-input.slope-value[data-grade="caution"] { color:#735300; background:#fff2ba; border-color:#b88a00; }
.inspector-input.slope-value[data-grade="danger"] { color:#ac2222; background:#ffe4e4; border-color:#c73e3e; }
.slope-warning { margin:0 0 10px; color:#d13b3b; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.height-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.height-actions button { padding: 6px 4px; font-size: 10px; white-space: nowrap; }

.btn-danger { background: #3d1717; border-color: #632626; color: #ff8585; }
.btn-danger:hover { background: #5a2020; color: #ffffff; border-color: #8c3232; }

/* Floating Stage Controls & Toast */
.stage-toolbar { position: absolute; top: 48px; right: 16px; display: flex; gap: 8px; z-index: 10; background: rgba(11, 23, 21, 0.88); backdrop-filter: blur(8px); border: 1px solid #20352f; padding: 6px; border-radius: 6px; }
.stage-btn { background: #142722; border: 1px solid #2c443c; color: var(--ink); font: 11px Manrope; padding: 6px 10px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s; }
.stage-btn:hover { background: #213a33; border-color: #416358; }
.stage-btn.active { background: var(--accent); color: #081211; font-weight: 700; border-color: var(--accent); }

.floating-action-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; align-self: flex-start; flex-wrap: nowrap; width: max-content; height: max-content; white-space: nowrap; gap: 6px; background: rgba(11, 23, 21, 0.92); backdrop-filter: blur(8px); border: 1px solid #2a463e; padding: 8px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 10; pointer-events: auto; transition: left 0.12s ease, top 0.12s ease; }
.bridge-pier-action { position:absolute; display:flex; z-index:11; pointer-events:auto; transform:translate(10px,-50%); }
.bridge-pier-height { height:30px; padding:5px 8px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--foreground); font:11px 'DM Mono',monospace; display:inline-flex; align-items:center; box-shadow:0 6px 16px var(--shadow); white-space:nowrap; }
.bridge-pier-action button { height:30px; padding:5px 9px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--foreground); font:11px Manrope; cursor:pointer; box-shadow:0 6px 16px var(--shadow); white-space:nowrap; }
.bridge-pier-action button:hover:not(:disabled) { background:var(--surface-active); border-color:var(--foreground); }
.bridge-pier-action button:disabled { opacity:.55; cursor:default; }
.floating-action-bar button { flex: 0 0 auto; width: auto; min-width: 0; height: 36px; min-height: 36px; writing-mode: horizontal-tb; background: #172d28; border: 1px solid #335248; color: var(--ink); font: 12px Manrope; padding: 7px 12px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.floating-action-bar button:hover { background: #23423b; border-color: var(--accent); color: var(--accent); }
.selection-rotate-handle { position:absolute; z-index:11; width:30px; height:30px; padding:5px; transform:translate(-50%, -50%); border:1px solid var(--foreground); border-radius:50%; background:var(--surface); color:var(--foreground); cursor:ew-resize; touch-action:none; user-select:none; }
.selection-rotate-handle svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.selection-rotate-handle:hover,.selection-rotate-handle.is-rotating { background:var(--surface-active); color:var(--accent); border-color:var(--accent); }
.selection-rotate-handle[hidden],body.view-3d .selection-rotate-handle { display:none; }

.toast { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; background: #18332d; border: 1px solid var(--accent); color: var(--ink); padding: 8px 18px; border-radius: 20px; font: 12px 'DM Mono', monospace; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; z-index: 20; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.floating-stats { position: absolute; bottom: 16px; right: 16px; z-index: 30; background: rgba(11, 23, 21, 0.88); backdrop-filter: blur(8px); border: 1px solid #20352f; border-radius: 8px; padding: 10px 14px; display: flex; gap: 18px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,0.4); pointer-events: auto; }
.floating-stats div { text-align: center; }
.floating-stats strong { color: var(--accent); font: 600 15px 'DM Mono', monospace; line-height: 1.2; }
.floating-stats span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }

/* Shiki-shima palette: every interface surface uses only ivory and charcoal. */
body,.app-shell,.sidebar,.sidebar-tabs,.topbar,.topbar-title-input,.number-row input,.track-card,.track-preview,.inspector-panel,.inspector-input,.inspector-select,.secondary-button,.layer-controls button,.axis-buttons button,.cat-btn,.stage-btn,.floating-action-bar,.floating-action-bar button,.stage-toolbar,.floating-stats,.toast,.drop-icon { background:var(--surface); color:var(--foreground); border-color:var(--line); box-shadow:none; }
.app-shell { background:var(--surface); }
.topbar { background:var(--surface); }
.mark,.open-button,.primary-button { background:var(--foreground); color:var(--surface); border-color:var(--foreground); }
.track-card-add { background:var(--surface-active); color:var(--foreground); border-color:var(--foreground); }
.topbar-link,.project-title>span,.label,.switch-row,.hint,.layer-row,.number-row,.number-row em,.track-card-info p,.catalog-group-count,.inspector-row label,.floating-stats span { color:var(--foreground); }
.topbar-link:hover,.secondary-button:hover:not(:disabled),.stage-btn:hover,.floating-action-bar button:hover,.track-card:hover,.layer-controls button:hover,.axis-buttons button:hover,.sidebar-tab:hover,.cat-btn:hover { background:var(--surface-hover); color:var(--foreground); border-color:var(--foreground); }
.segmented button.active,.axis-buttons button.active,.sidebar-tab.active,.cat-btn.active,.stage-btn.active { background:var(--surface-active); color:var(--foreground); border-color:var(--foreground); }
.track-card:hover .track-card-info h4,.track-card:hover .track-card-info p,.track-card:hover .track-card-add { color:var(--foreground); }
.track-card:hover .track-preview { background:var(--surface-active); border-color:var(--foreground); }
.track-card:hover .track-card-add { background:var(--surface-active); border-color:var(--foreground); }
.topbar-title-input:focus,.inspector-input:focus,.inspector-select:focus { border-color:var(--foreground); outline:2px solid var(--focus-ring); outline-offset:1px; }
.segmented,.layers-panel,.catalog-group-title,.track-card,.inspector-panel,.sidebar-tabs,.stats { border-color:var(--line); }
.sidebar-tab.active { border-bottom-color:var(--foreground); }
.stage-wrap { background-color:var(--stage-background); background-image:none; }
body.view-immersive-space .stage-wrap,:root[data-theme="light"] body.view-immersive-space .stage-wrap { background:linear-gradient(to bottom,#52a6c8 min(0%,var(--immersive-horizon,47%)),#d0e8ef var(--immersive-horizon,47%),#dbd9d3 var(--immersive-horizon,47%),#dbd9d3 100%) center / 100% 100% no-repeat; }
body.view-immersive-space .stage-wrap::before { background:none; }
:root[data-theme="light"] body:not(.view-3d) .stage-wrap { background-color:#f4f8f5; background-image:none; }
:root[data-theme="light"] body:not(.view-3d) .stage-wrap::before { background:radial-gradient(ellipse at center,transparent 45%,rgba(45,65,55,.1)); }
.switch-row i { background:var(--surface-active); }
.switch-row input:checked+i { background:var(--foreground); }
.switch-row i:after,.switch-row input:checked+i:after { background:var(--surface); }
.switch-control { width:32px; height:18px; padding:0; border:1px solid var(--line); border-radius:20px; background:var(--surface-active); cursor:pointer; }
.switch-control i { display:block; width:12px; height:12px; margin:2px; border-radius:50%; background:var(--foreground); transition:transform .2s, background-color .2s; }
.switch-control i:after { content:none; }
.switch-control.is-on { background:var(--foreground); border-color:var(--foreground); }
.switch-control.is-on i { background:var(--surface); transform:translateX(14px); }
.btn-danger,.btn-danger:hover { background:var(--foreground); color:var(--surface); border-color:var(--foreground); }
:root[data-theme="light"] .topbar-link:hover,:root[data-theme="light"] .secondary-button:hover:not(:disabled),:root[data-theme="light"] .stage-btn:hover,:root[data-theme="light"] .floating-action-bar button:hover,:root[data-theme="light"] .track-card:hover,:root[data-theme="light"] .layer-controls button:hover,:root[data-theme="light"] .axis-buttons button:hover,:root[data-theme="light"] .sidebar-tab:hover,:root[data-theme="light"] .cat-btn:hover { background:var(--surface-hover); color:var(--foreground); border-color:var(--foreground); }
:root[data-theme="light"] .segmented button.active,:root[data-theme="light"] .axis-buttons button.active,:root[data-theme="light"] .sidebar-tab.active,:root[data-theme="light"] .cat-btn.active,:root[data-theme="light"] .stage-btn.active { background:var(--surface-active); color:var(--foreground); border-color:var(--foreground); }
.topbar { box-shadow:0 2px 8px var(--shadow); }
.sidebar { box-shadow:4px 0 12px var(--shadow); }
.topbar-title-input,.number-row input,.inspector-input,.inspector-select,.secondary-button,.layer-controls button,.axis-buttons button,.cat-btn,.stage-btn,.track-card-add { box-shadow:0 2px 5px var(--shadow); }
.track-card,.inspector-panel,.layers-panel,.track-preview { box-shadow:0 3px 8px var(--shadow); }
.stage-toolbar,.floating-stats,.floating-action-bar,.toast { box-shadow:0 6px 16px var(--shadow); }
.topbar-link:hover,.secondary-button:hover:not(:disabled),.stage-btn:hover,.floating-action-bar button:hover,.track-card:hover,.layer-controls button:hover,.axis-buttons button:hover,.sidebar-tab:hover,.cat-btn:hover { box-shadow:0 4px 10px var(--shadow-hover); }
:root[data-theme="light"] .stage-toolbar,:root[data-theme="light"] .floating-stats,:root[data-theme="light"] .floating-action-bar,:root[data-theme="light"] .toast { box-shadow:0 6px 16px var(--shadow); }
.legend { left:44px; bottom:18px; z-index:4; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--foreground); box-shadow:0 4px 12px var(--shadow); backdrop-filter:blur(5px); }
.selected-track-name { position:absolute; left:44px; bottom:54px; z-index:4; max-width:420px; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--accent); box-shadow:0 4px 12px var(--shadow); backdrop-filter:blur(5px); font:700 10px 'DM Mono'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.three-d-panel { display:none; position:absolute; z-index:12; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--foreground); box-shadow:0 4px 12px var(--shadow); backdrop-filter:blur(5px); font:10px 'DM Mono',monospace; pointer-events:none; }
body.view-3d .three-d-panel { display:grid; }
body.view-3d .topbar-actions .layout-edit-action { display:none; }
#threeDTrackInfo[hidden] { display:none!important; }
.three-d-help { top:18px; right:16px; grid-template-columns:auto auto; gap:4px 10px; max-width:250px; }
.three-d-help strong { grid-column:1 / -1; color:var(--accent); font:700 10px 'DM Mono',monospace; }
.three-d-help span { color:var(--foreground); font-size:10px; white-space:nowrap; }
.three-d-track-info { bottom:54px; left:44px; gap:3px; max-width:min(420px,calc(100% - 88px)); color:var(--accent); white-space:pre-line; line-height:1.5; font:700 10px 'DM Mono',monospace; }

/* Modal Overlay & Dialog */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.hidden { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 340px; max-width: 90vw; padding: 20px; box-shadow: 0 12px 32px var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.modal-card-wide { width: 420px; }
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--foreground); }
.modal-body { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--foreground); }
.modal-grid { display: grid; gap: 10px; }
.modal-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-grid label, .upload-field { display: flex; flex-direction: column; gap: 6px; }
.modal-grid input, .upload-field input { width: 100%; box-sizing: border-box; }
.board-image-preview { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface-hover) 80%, transparent); overflow: hidden; }
.board-image-preview img { display: block; max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 5px; }
.small-button { align-self: flex-start; padding: 6px 10px; }
.modal-hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
:root[data-theme="light"] .layer-controls button.is-active,:root[data-theme="light"] .layer-controls button.is-active:hover { color:var(--surface); background:var(--accent); border-color:var(--accent); }

/* Shared floating surface treatment for stage tools, selection actions, legend, and status panels. */
.stage-toolbar,.floating-action-bar,.floating-stats,.legend,.selected-track-name { background:color-mix(in srgb, var(--surface) 94%, transparent); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 16px var(--shadow); backdrop-filter:blur(8px); }
.stage-toolbar,.floating-action-bar { padding:6px; gap:8px; }
.floating-stats { padding:4px 14px 12px; }
.stage-toolbar .stage-btn,.floating-action-bar button { height:auto; min-height:0; padding:6px 10px; background:var(--surface-hover); border:1px solid var(--line); border-radius:5px; color:var(--foreground); font:11px Manrope; }
.stage-toolbar .stage-btn:hover,.floating-action-bar button:hover { background:var(--surface-active); border-color:var(--foreground); color:var(--foreground); }
.stage-toolbar .stage-btn.active { background:var(--surface-active); border-color:var(--foreground); color:var(--foreground); }
.floating-stats { cursor:pointer; flex-direction:column; align-items:stretch; gap:10px; user-select:none; transition:padding .28s ease, gap .28s ease; }
.floating-stats.is-expanded { padding:8px 14px; gap:10px; }
.stats-summary { display:flex; gap:18px; min-height:33px; align-items:center; justify-content:center; }
.track-summary { display:grid; gap:7px; min-width:0; max-height:0; overflow:hidden; padding:0 10px; border-bottom:0 solid transparent; opacity:0; transform:translateY(6px); scrollbar-color:color-mix(in srgb, var(--foreground) 72%, var(--surface)) transparent; scrollbar-width:thin; transition:max-height .32s cubic-bezier(.22,.61,.36,1), padding .28s ease, border-color .28s ease, opacity .18s ease, transform .32s cubic-bezier(.22,.61,.36,1); }
.floating-stats:not(.is-expanded) .track-summary { flex:0 0 0; width:0; max-width:0; padding-left:0; padding-right:0; }
.floating-stats.is-expanded .track-summary { flex:0 1 auto; width:auto; max-width:none; min-width:230px; max-height:50vh; padding:0 10px 9px; border-bottom:1px solid var(--line); opacity:1; transform:translateY(0); overflow-y:auto; }
.floating-stats.is-expanded:not(.has-track-summary) .track-summary { min-width:0; }
.track-summary-header,.track-summary-row { display:grid; grid-template-columns:var(--track-number-column,70px) minmax(0,1fr) 30px; align-items:center; column-gap:8px; }
.track-summary-header { padding-bottom:5px; border-bottom:1px solid var(--line); color:var(--foreground); font:600 10px 'DM Mono',monospace; }
.track-summary-header strong { color:var(--muted); font:10px 'DM Mono',monospace; text-align:right; }
.track-summary-row { width:100%; padding:2px 0; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--foreground); font:inherit; text-align:left!important; font-size:11px; line-height:1.45; cursor:pointer; }
.track-summary-row.is-pinned { border-color:#fbbf24; background:color-mix(in srgb, #fbbf24 14%, transparent); }
.track-summary-row.is-hovered,.track-summary-row:focus-visible { outline:1px solid #22d3ee; background:color-mix(in srgb, #22d3ee 14%, transparent); }
.track-summary-row span:first-child { white-space:nowrap; }
.track-summary-row span:nth-child(2) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-summary-row strong { flex:none; color:var(--accent); font:600 12px 'DM Mono',monospace; }
.track-summary-empty { color:var(--muted); font-size:11px; text-align:center; }