/* Fit the original solver controls into the first design's application shell. */
body.tsp-next {
    --bg: var(--bg-color);
    --sidebar: var(--sidebar-bg);
    --panel: var(--panel-bg);
    --canvas: var(--input-bg);
    --border: var(--border-color);
    --muted: var(--text-dim);
    --text: var(--text-main);
    --accent: var(--icon-blue);
    --accent-soft: rgba(var(--icon-blue-rgb), .13);
    --danger: var(--danger-color);
    font-family: var(--font);
    background-image: none;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.tsp-next .secondary { background: var(--panel); color: var(--text-secondary); border-color: var(--border); }
.tsp-next .secondary:hover { background: var(--active-bg); color: var(--text); border-color: var(--accent); }
.tsp-next .breadcrumb > span { color: var(--text-secondary); }
.tsp-next .preview-label { color: var(--muted); border-color: var(--border); }
.tsp-next .icon-button, .tsp-next .text-button { color: var(--muted); }
.tsp-next .icon-button:hover, .tsp-next .text-button:hover { color: var(--accent); background: var(--active-bg); }
.tsp-next .metrics > div + div { border-color: var(--border); }
.tsp-next .workspace-footer { color: var(--muted); }
.tsp-next * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tsp-next .app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; min-height: 0; }
.tsp-next .sidebar { width: auto; min-height: 0; max-height: none; padding: 29px 15px 0; border-right: 1px solid var(--border); box-shadow: none; overflow-y: auto; }
.tsp-next .brand { padding: 0 7px 24px; gap: 10px; margin: 0; border: 0; background: none; text-align: left; }
.tsp-next .brand-title { margin: 0; font: 750 23px/1.15 var(--display); letter-spacing: -.9px; white-space: nowrap; color: var(--text); text-shadow: none; }
.tsp-next .brand-version { display: block; margin-top: 4px; font: 500 10px/1.2 var(--font); letter-spacing: .5px; color: var(--muted); }
.tsp-next .brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 0; background: transparent; object-fit: contain; filter: none; }
.tsp-next .sidebar-nav { flex: 0 0 auto; padding: 0; }
.tsp-next .nav-item { margin-bottom: 12px; border: 0; }
.tsp-next .nav-header { padding: 11px 10px; border: 0; border-radius: 7px; font: 600 10px var(--font); letter-spacing: 1.1px; color: var(--muted); }
.tsp-next .nav-header i { width: 16px; font-size: 13px; margin-right: 9px; color: var(--muted); }
.tsp-next .nav-header .arrow { width: 10px; font-size: 8px; margin: 0; }
.tsp-next .nav-header:hover { text-shadow: none; color: var(--text); background: var(--active-bg); }
.tsp-next .nav-item.active .nav-header { border: 0; background: transparent; color: var(--muted); }
.tsp-next .nav-content { position: static; min-width: 0; width: auto; background: transparent; border: 0; border-radius: 0; }
.tsp-next .nav-item.active .nav-content { border: 0; }
.tsp-next .nav-content a, .tsp-next .nav-content label { padding: 7px 9px 7px 12px; margin: 2px 0; border: 0; border-radius: 6px; font: 12px/1.4 var(--font); color: var(--text-secondary); }
.tsp-next .nav-content a:hover, .tsp-next .nav-content label:hover { color: var(--text); background: var(--active-bg); border: 0; }
.tsp-next .nav-content label:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.tsp-next .nav-content i { width: 16px; margin-right: 9px; font-size: 12px; color: var(--muted); }
.tsp-next .nav-content input[type=radio] { width: 13px; height: 13px; flex-basis: 13px; border-radius: 50%; border-color: var(--muted); }
.tsp-next .nav-content input[type=radio]::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: none; }
.tsp-next .nav-content input[type=radio]:checked { border-color: var(--accent); }
.tsp-next .sidebar-bottom { padding-top: 15px; }
.tsp-next .sidebar-footer { background: transparent; padding: 12px 0; border-top: 1px solid var(--border); text-align: left; }
.tsp-next .sidebar-footer .cyber-btn { display: block; margin: 5px 0 !important; padding: 8px 10px; min-height: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); font: 500 9px/1.6 var(--font); letter-spacing: .1px; text-align: left !important; clip-path: none; box-shadow: none; }
.tsp-next .sidebar-footer .cyber-btn:hover { color: var(--text); background: var(--active-bg); transform: none; }
.tsp-next .desktop-update-button { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; color: var(--text-secondary) !important; text-align: center !important; }
.tsp-next .desktop-update-button svg { width: 15px; height: 15px; color: var(--accent); }
.tsp-next .seo-faq-card { background: transparent; border: 0; }
.tsp-next .seo-faq-card summary { font: 500 10px var(--font); padding: 8px 10px; color: var(--muted); }
.tsp-next .seo-faq-content { font-family: var(--font); }
.tsp-next .seo-faq-content h2, .tsp-next .seo-faq-content h3 { font-family: var(--font); }
.tsp-next .system-status { margin: 17px 9px 0; color: var(--muted); font: 9px var(--font); letter-spacing: .5px; }
.tsp-next .system-status::before { color: var(--accent); animation: none; }
.tsp-next .topbar { height: 68px; }
.tsp-next .breadcrumb > i { font-size: 8px; color: var(--muted); }
.tsp-next main.cyber-main { display: flex; flex-direction: column; height: calc(100vh - 68px); padding: 27px 30px 0; gap: 0; overflow: hidden; }
.tsp-next .workbench { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 276px; gap: 20px; overflow: hidden; }
.tsp-next .canvas-panel, .tsp-next .inspector { height: 100%; min-height: 0; border-color: var(--border); }
.tsp-next .canvas-heading { background: var(--panel); padding: 17px 18px; min-height: 72px; gap: 14px; flex-wrap: wrap; }
.tsp-next .dataset-heading { flex: 0 0 auto; }
.tsp-next .dataset-heading h2 { font-family: var(--font); font-size: 12px; }
.tsp-next .dataset-icon { background: var(--active-bg); border-color: var(--border); color: var(--muted); }
.tsp-next .dataset-icon i { font-size: 14px; }
.tsp-next #inputModeControls { flex: 1 1 auto; width: auto; padding: 0; margin: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; font: 10px var(--font); }
.tsp-next .input-mode-header { min-height: 0; gap: 10px; justify-content: flex-end; flex-wrap: wrap; text-align: left; }
.tsp-next .input-mode-header > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tsp-next .input-mode-options { gap: 3px; background: var(--input-bg); padding: 3px; border: 1px solid var(--border); border-radius: 6px; }
.tsp-next .input-mode-options label { margin: 0; gap: 5px; padding: 6px 8px; font-size: 10px; border-radius: 4px; color: var(--muted); }
.tsp-next .input-mode-options label:has(input:checked) { color: var(--text); background: var(--active-bg); }
.tsp-next .input-mode-options input[type=radio] { width: 10px; height: 10px; flex-basis: 10px; margin: 0; border-radius: 50%; border-color: var(--muted); }
.tsp-next .input-mode-options input[type=radio]::before { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: none; }
.tsp-next #air3dControls { font-size: 10px; gap: 8px; }
.tsp-next #air3dToggle { accent-color: var(--accent); }
.tsp-next #airZSlider { width: 85px; accent-color: var(--accent); }
.tsp-next .canvas-panel .cyber-top-bar { flex: 0 0 auto; min-height: 44px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: 7px 12px; background: var(--panel); box-shadow: none; backdrop-filter: none; }
.tsp-next .action-buttons { width: 100%; gap: 4px; align-items: center; }
.tsp-next .canvas-panel .cyber-btn { padding: 6px 8px; min-height: 28px; border: 0; background: transparent; font: 500 10px var(--font); letter-spacing: 0; color: var(--muted); border-radius: 5px; clip-path: none; box-shadow: none; }
.tsp-next .canvas-panel .cyber-btn:hover { background: var(--active-bg); color: var(--text); transform: none; }
.tsp-next .canvas-panel .cyber-btn.danger { color: var(--danger); }
.tsp-next .canvas-panel .cyber-btn[onclick="toggleSettings()"] { margin-left: auto; }
.tsp-next .canvas-panel .divider { width: 1px; height: 17px; margin: 0 5px; }
.tsp-next #workspacePrimary { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.tsp-next #canvasContainer:not(.fullscreen-canvas) { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.tsp-next #canvasContainer:hover { box-shadow: none; }
.tsp-next .canvas-footer { flex: 0 0 auto; background: var(--panel); color: var(--muted); }
.tsp-next .canvas-actions { top: 12px; right: 12px; gap: 6px; }
.tsp-next .canvas-action-btn { min-width: 29px; min-height: 29px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: var(--font); box-shadow: none; }
.tsp-next .canvas-action-btn:hover { color: var(--accent); background: var(--active-bg); box-shadow: none; }
.tsp-next .inspector { display: flex; flex-direction: column; overflow: hidden; }
.tsp-next .result-section { padding: 21px 20px; }
.tsp-next .result-section .distance-label { margin-top: 23px; }
.tsp-next .distance-value { font: 650 35px/1.25 var(--display); letter-spacing: -1.4px; }
.tsp-next .distance-unit { color: var(--muted); }
.tsp-next .result-status { background: var(--accent-soft); color: var(--accent); }
.tsp-next .result-status.pending { background: var(--active-bg); color: var(--muted); }
.tsp-next .solver-section { padding: 18px 20px; flex: 0 0 auto; }
.tsp-next .solver-section select { background: var(--input-bg); border-color: var(--border); font: 11px var(--font); color: var(--text); }
.tsp-next .solver-facts { margin-top: 16px; margin-bottom: 20px; }
.tsp-next .solver-facts strong { color: var(--text-secondary); }
.tsp-next .solver-section .cyber-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 11px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: var(--input-bg); font: 700 12px var(--font); letter-spacing: .1px; clip-path: none; box-shadow: none; }
.tsp-next .solver-section .cyber-btn:hover { filter: brightness(1.08); transform: none; box-shadow: none; }
.tsp-next .solver-section .cyber-btn i { margin: 0; }
.tsp-next .inspector #statusContainer { flex: 1 1 200px; width: 100% !important; height: auto !important; min-height: 120px; margin: 0 !important; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--panel); box-shadow: none; }
.tsp-next #statusContainer .status-header { padding: 10px 13px; background: var(--panel); border-bottom: 0; gap: 5px; }
.tsp-next .status-title { color: var(--text-secondary); font: 600 9px var(--font); letter-spacing: .5px; }
.tsp-next .status-title i { color: var(--muted); margin-right: 5px; }
.tsp-next .status-actions { display: flex; gap: 1px; }
.tsp-next .status-btn { width: 24px; height: 26px; border-radius: 4px; font-size: 10px; color: var(--muted); }
.tsp-next .status-btn:hover { background: var(--active-bg); color: var(--accent); }
.tsp-next #status { margin: 0 10px 10px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text-secondary); font: 10px/1.7 'Cascadia Code', Consolas, monospace; }
.tsp-next .route-details-accordion { margin: 0 10px 8px; border: 1px solid var(--border); border-radius: 6px; }
.tsp-next .route-detail-item summary { padding: 10px; font: 11px/1.5 var(--font); color: var(--text); }
.tsp-next .route-detail-body { padding: 10px; font: 10px/1.7 Consolas, monospace; color: var(--text-secondary); }
.tsp-next .inspector-footer { padding: 12px 20px 16px; flex: 0 0 auto; }
.tsp-next .export-button { background: var(--input-bg); color: var(--text-secondary); border-color: var(--border); }
.tsp-next .button > i { font-size: 12px; }
.tsp-next .button .export-arrow { font-size: 8px; margin-left: auto; }
.tsp-next .workspace-footer { flex: 0 0 auto; min-height: 43px; padding: 10px 0; }
.tsp-next .workspace-footer > span:nth-child(2) { color: var(--muted); }
.tsp-next .road-entry-panel { border: 0; padding: 22px; background: var(--input-bg); }
.tsp-next .road-entry-heading { flex-direction: column; align-items: flex-start; gap: 7px; }
.tsp-next .road-entry-heading strong { font: 600 13px var(--font); color: var(--text); }
.tsp-next .road-entry-actions .cyber-btn { min-height: 36px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text-secondary); font: 550 11px var(--font); clip-path: none; }
.tsp-next .road-entry-actions .cyber-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--input-bg); }
.tsp-next #addressInput { padding: 13px; border-radius: 6px; color: var(--text); font: 13px/1.6 var(--font); }
.tsp-next .modal { background: #070b0dbd; backdrop-filter: blur(5px); }
.tsp-next .modal-content, .tsp-next .settings { border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 70px #0005; color: var(--text); background: var(--panel); }
.tsp-next .settings { outline: none; width: 330px; padding: 23px 19px; }
.tsp-next .modal-content h2, .tsp-next .settings h3 { font: 650 23px var(--display); letter-spacing: -.7px; color: var(--text); text-align: left; text-transform: none; padding-bottom: 16px; }
.tsp-next .modal-content h3 { font: 600 14px var(--font); color: var(--text); border-color: var(--border); padding-bottom: 8px; }
.tsp-next .modal-content label, .tsp-next .setting label { font: 12px/1.6 var(--font); color: var(--text-secondary); }
.tsp-next .modal-content input[type=number], .tsp-next .modal-content input[type=text], .tsp-next .modal-content select, .tsp-next .settings select { border: 1px solid var(--border); border-radius: 6px; padding: 9px; background: var(--input-bg); font: 12px var(--font); color: var(--text); }
.tsp-next .modal-content select { width: 100%; margin-top: 6px; }
.tsp-next .modal-content input[type=checkbox], .tsp-next .settings input[type=checkbox] { accent-color: var(--accent); }
.tsp-next .modal-content .cyber-btn, .tsp-next .modal-content .action-button { padding: 10px 14px; border-radius: 6px; clip-path: none; font: 600 11px var(--font); letter-spacing: .1px; box-shadow: none; }
.tsp-next .modal-content .action-button { background: var(--accent); color: var(--input-bg); border: 1px solid var(--accent); }
.tsp-next .fullscreen-menu-container { background: var(--sidebar); border-right: 1px solid var(--border); box-shadow: 8px 0 30px #0003; }
.tsp-next .fullscreen-menu-toggle { border-radius: 7px; box-shadow: none; }
.tsp-next .fullscreen-section-header, .tsp-next .fullscreen-menu-exit button { font: 600 12px var(--font); color: var(--text); letter-spacing: 0; border-left-width: 1px; }
.tsp-next .fullscreen-menu-exit button { border-radius: 6px; }
.tsp-next .spinner-text { font-family: var(--font); letter-spacing: 2px; text-shadow: none; }
.tsp-next button:focus-visible, .tsp-next a:focus-visible, .tsp-next select:focus-visible, .tsp-next summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tsp-next .brand .mobile-toggle-btn { display: none; }
body.tsp-next.canvas-fullscreen-active .topbar, body.tsp-next.canvas-fullscreen-active .canvas-heading, body.tsp-next.canvas-fullscreen-active .canvas-footer, body.tsp-next.canvas-fullscreen-active .inspector, body.tsp-next.canvas-fullscreen-active .workspace-footer { display: none; }
body.tsp-next.canvas-fullscreen-active .app-shell { grid-template-columns: 1fr; }
body.tsp-next.canvas-fullscreen-active .cyber-main { padding: 0; height: 100vh; }

@media (min-width: 901px) and (max-width: 1180px) {
    .tsp-next .app-shell { grid-template-columns: 215px minmax(0,1fr); }
    .tsp-next .sidebar { padding-inline: 10px; }
    .tsp-next .brand { gap: 8px; padding-inline: 5px; }
    .tsp-next .brand-title { font-size: 21px; }
    .tsp-next .nav-content a, .tsp-next .nav-content label { font-size: 11px; }
    .tsp-next main.cyber-main { padding: 23px 20px 0; }
    .tsp-next .workbench { grid-template-columns: minmax(0,1fr) 250px; gap: 15px; }
    .tsp-next .canvas-heading { padding: 14px; }
    .tsp-next .input-mode-header { justify-content: flex-start; }
    .tsp-next .result-section, .tsp-next .solver-section { padding-inline: 17px; }
    .tsp-next .distance-value { font-size: 32px; }
}
@media (min-width: 901px) and (max-height: 850px) {
    .tsp-next .topbar { height: 57px; }
    .tsp-next main.cyber-main { height: calc(100vh - 57px); padding-top: 22px; }
    .tsp-next .result-section { padding-block: 16px; }
    .tsp-next .result-section .distance-label { margin-top: 15px; }
    .tsp-next .metrics { margin-top: 15px; padding-top: 12px; }
    .tsp-next .solver-section { padding-block: 13px; }
    .tsp-next .solver-facts { margin: 12px 0 15px; }
    .tsp-next .inspector #statusContainer { min-height: 90px; }
}
@media (max-width: 900px) {
    .tsp-next .app-shell { display: flex; flex-direction: column; height: auto; width: 100%; }
    .tsp-next .sidebar { width: 100%; height: auto; min-height: 0; max-height: 64px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--border); overflow: hidden; }
    .tsp-next .sidebar.mobile-open { max-height: 85vh; overflow-y: auto; }
    .tsp-next .brand { padding: 12px 3px; min-height: 63px; }
    .tsp-next .brand-title { font-size: 21px; }
    .tsp-next .brand-version { font-size: 9px; margin-top: 3px; }
    .tsp-next .brand .mobile-toggle-btn { display: block; margin-left: auto; font-size: 20px; color: var(--accent); }
    .tsp-next .sidebar-nav { padding-top: 13px; }
    .tsp-next .sidebar-bottom { padding: 0 10px 10px; }
    .tsp-next .topbar { display: none; }
    .tsp-next main.cyber-main { height: auto; padding: 23px 15px 0; overflow: visible; }
    .tsp-next .workbench { display: grid; grid-template-columns: minmax(0,1fr); flex: none; gap: 16px; overflow: visible; }
    .tsp-next .canvas-panel { height: 550px; min-height: 0; }
    .tsp-next #workspacePrimary { min-height: 0; overflow: hidden; }
    .tsp-next #canvasContainer:not(.fullscreen-canvas) { height: 100% !important; min-height: 0; margin: 0 !important; }
    .tsp-next .canvas-heading { padding: 14px; }
    .tsp-next #inputModeControls { margin: 0; }
    .tsp-next .input-mode-header { flex-direction: row; justify-content: flex-end; align-items: center; }
    .tsp-next .inspector { height: 650px; }
    .tsp-next .inspector #statusContainer { min-height: 150px; height: auto !important; }
    .tsp-next .road-entry-panel { height: 100%; min-height: 0; }
    .tsp-next .settings { width: min(330px,calc(100vw - 24px)); right: 12px; }
}
@media (max-width: 500px) {
    .tsp-next main.cyber-main { padding-inline: 10px; }
    .tsp-next .canvas-panel { height: 510px; }
    .tsp-next .canvas-heading { gap: 12px; }
    .tsp-next #inputModeControls { flex-basis: 100%; }
    .tsp-next .input-mode-header { justify-content: flex-start; }
    .tsp-next .canvas-panel .cyber-btn { font-size: 9px; padding: 6px; }
    .tsp-next .canvas-panel .divider { margin: 0 2px; }
    .tsp-next .canvas-panel .cyber-btn i { margin-right: 4px; }
}