.tsp-next .brand-version { color: var(--muted); font: 550 12px var(--font); letter-spacing: .6px; }
.tsp-next .brand { align-items: center; }
.tsp-next { --start-point-color: #e6c286; }
html[data-theme="light"] .tsp-next { --start-point-color: #9c6b24; }
.tsp-next .route-start-marker {
    position: absolute;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--input-bg);
    background: var(--start-point-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--start-point-color) 18%, transparent), 0 0 12px color-mix(in srgb, var(--start-point-color) 25%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.tsp-next .start-point-legend { flex: 0 0 auto; gap: 6px; color: var(--muted); }
.tsp-next .start-point-legend > i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--start-point-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--start-point-color) 14%, transparent); }
.tsp-next .canvas-footer > span:first-child { flex: 1; min-width: 0; }
.tsp-next #toolHint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsp-next #canvasContainer.route-map-active .route-start-marker,
.tsp-next #canvasContainer.tsp3d-view-active .route-start-marker { display: none; }
.tsp-next #canvasContainer[data-grid-visible="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(var(--icon-blue-rgb), .18) .8px, transparent 1px);
    background-size: 24px 24px;
    background-position: 12px 12px;
}
.tsp-next #canvasContainer.route-map-active::after,
.tsp-next #canvasContainer.tsp3d-view-active::after { display: none; }
.tsp-next #calculationSpinnerOverlay { background: rgba(5, 10, 12, .62); backdrop-filter: blur(5px); }
.tsp-next .solve-card { width: min(420px, calc(100vw - 36px)); padding: 25px 25px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.35); overflow: hidden; animation: solve-appear .2s ease-out; }
.tsp-next .solve-heading { display: flex; align-items: center; gap: 13px; }
.tsp-next .solve-symbol { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(var(--icon-blue-rgb), .22); border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.tsp-next .solve-heading h2 { margin: 0 0 6px; color: var(--text); font: 650 20px var(--display); letter-spacing: -.55px; }
.tsp-next .solve-running { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 10px var(--font); }
.tsp-next .solve-running i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: solve-breathe 1.8s ease-in-out infinite; }
.tsp-next .solve-visual { margin: 21px -7px 19px; border-radius: 8px; background-image: radial-gradient(circle, rgba(var(--icon-blue-rgb), .12) .6px, transparent .9px); background-size: 18px 18px; }
.tsp-next .solve-visual svg { display: block; width: 100%; height: auto; stroke-linecap: round; stroke-linejoin: round; }
.tsp-next .solve-candidate { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0; animation: solve-candidates 6s ease-in-out infinite; }
.tsp-next .candidate-two { animation-delay: -3s; }
.tsp-next .solve-tour { stroke: var(--accent); stroke-width: 1.2; opacity: .32; animation: solve-breathe 3s ease-in-out infinite; }
.tsp-next .solve-trace { stroke: var(--accent); stroke-width: 2.3; stroke-dasharray: 17 83; animation: solve-travel 3.8s linear infinite; filter: drop-shadow(0 0 3px rgba(var(--icon-blue-rgb), .38)); }
.tsp-next .solve-nodes circle { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; animation: solve-nodes 2.4s ease-in-out infinite; }
.tsp-next .solve-nodes circle:nth-child(3n) { animation-delay: -.8s; }
.tsp-next .solve-nodes circle:nth-child(3n + 1) { animation-delay: -1.6s; }
.tsp-next .solve-origin { fill: var(--accent); }
.tsp-next .solve-origin-ring { stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: solve-ring 2s ease-out infinite; }
.tsp-next .solve-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 0 21px; border-top: 1px solid var(--border); }
.tsp-next .solve-footer strong { display: block; color: var(--text-secondary); font: 550 11px var(--font); }
.tsp-next .solve-footer small { display: block; margin-top: 5px; color: var(--muted); font: 10px var(--font); }
.tsp-next #solveElapsed { color: var(--accent); font: 12px 'Cascadia Code', Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsp-next .solve-activity { height: 2px; margin: 0 -25px; overflow: hidden; background: var(--border); }
.tsp-next .solve-activity span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: solve-sweep 2.2s ease-in-out infinite; }
@keyframes solve-appear { from { opacity: .96; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes solve-travel { to { stroke-dashoffset: -100; } }
@keyframes solve-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes solve-candidates { 0%, 100% { opacity: 0; } 20%, 45% { opacity: .24; } 70% { opacity: 0; } }
@keyframes solve-nodes { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }
@keyframes solve-ring { from { opacity: .7; transform: scale(.7); } to { opacity: 0; transform: scale(1.8); } }
@keyframes solve-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
    .tsp-next .solve-card, .tsp-next .solve-card * { animation: none !important; }
    .tsp-next .solve-trace { stroke-dasharray: none; }
    .tsp-next .solve-origin-ring { opacity: .25; }
    .tsp-next .solve-activity span { width: 100%; opacity: .5; }
}
@media (max-width: 500px) { .tsp-next #coordinateHint { display: none; } }