:root{--bg: #f5f5f0;--bg-panel: #ffffff;--border: #d0d0c8;--text: #1a1a1a;--text-muted: #6b6b60;--accent: #0066cc;--success: #2d8a4e;--danger: #cc3333;--font-ui: "Helvetica Neue", "Arial", sans-serif;--font-mono: "SF Mono", "Consolas", "Liberation Mono", monospace;--panel-radius: 2px;--shadow: 0 1px 3px rgba(0,0,0,.08);--station-found: #1a1a1a;--station-ghost: #d0d0c8}[data-theme=dark]{--bg: #1a1a1e;--bg-panel: #26262a;--border: #3a3a40;--text: #e8e8e0;--text-muted: #8a8a80;--accent: #4d9fff;--success: #4dbd6e;--danger: #ff5555;--shadow: 0 1px 3px rgba(0,0,0,.3);--station-found: #e8e8e0;--station-ghost: #3a3a40}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:14px;line-height:1.4}#app{display:flex;height:100vh;width:100vw}.app-layout{display:flex;width:100%;height:100%}.map-area{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.map-container{flex:1;position:relative;overflow:hidden;background:var(--bg);cursor:grab}.map-container.panning{cursor:grabbing}.map-container svg{width:100%;height:100%;display:block}.input-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-panel);border-top:2px solid var(--border);position:relative}.input-bar input{flex:1;padding:8px 12px;font-size:16px;font-family:var(--font-ui);border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}.input-bar input:focus{border-color:var(--accent)}.input-bar input::placeholder{color:var(--text-muted)}.input-feedback{position:absolute;bottom:100%;left:16px;right:16px;padding:6px 12px;font-size:13px;text-align:center;border-radius:var(--panel-radius) var(--panel-radius) 0 0;background:var(--bg-panel);border:2px solid var(--border);border-bottom:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:100}.input-feedback.visible{opacity:1;transform:translateY(0)}.input-feedback.muted{color:var(--text-muted)}.input-feedback.error{color:var(--danger)}.sidebar{width:320px;background:var(--bg-panel);border-left:2px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.sidebar-section{padding:16px;border-bottom:2px solid var(--border)}.sidebar-section h3{font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px}.city-select{display:flex;gap:6px;flex-wrap:wrap}.city-btn{padding:6px 14px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);cursor:pointer;font-family:var(--font-ui);font-size:13px;transition:all .15s}.city-btn:hover{border-color:var(--accent)}.city-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.mode-select{display:flex;gap:6px}.mode-btn{flex:1;padding:8px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);cursor:pointer;font-family:var(--font-mono);font-size:12px;text-align:center;transition:all .15s}.mode-btn:hover{border-color:var(--accent)}.mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.challenge-config{margin-top:12px;display:none}.challenge-config.visible{display:block}.challenge-type-select{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.challenge-type-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);cursor:pointer;font-size:12px}.challenge-type-btn.active{background:var(--text);color:var(--bg-panel)}.challenge-target-select{margin-top:8px}.challenge-target-select select{width:100%;padding:6px 8px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px}.challenge-start-btn{margin-top:8px;width:100%;padding:8px;background:var(--success);color:#fff;border:none;border-radius:var(--panel-radius);cursor:pointer;font-family:var(--font-mono);font-size:13px;font-weight:600}.challenge-start-btn:hover{opacity:.9}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-item{background:var(--bg);padding:10px;border:1px solid var(--border);border-radius:var(--panel-radius)}.stat-value{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--text)}.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.line-progress{display:flex;flex-direction:column;gap:8px}.line-progress-item{display:flex;align-items:center;gap:8px}.line-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.line-name{font-size:12px;flex-shrink:0;min-width:60px}.progress-bar{flex:1;height:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;transition:width .3s ease;border-radius:4px}.line-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);min-width:36px;text-align:right}.hints-grid{display:flex;flex-direction:column;gap:6px}.hint-toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 0}.hint-toggle label{font-size:13px;cursor:pointer}.hint-toggle input[type=checkbox]{cursor:pointer}.hint-btn{padding:6px 12px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);cursor:pointer;font-size:12px;margin-top:4px}.hint-btn:hover{border-color:var(--accent)}.badges-grid{display:flex;flex-wrap:wrap;gap:8px}.badge{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:var(--panel-radius);font-size:22px;background:var(--bg);position:relative;transition:all .2s}.badge.unlocked{border-color:var(--success);background:var(--bg-panel)}.badge.locked{opacity:.4;filter:grayscale(1)}.badge-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:4px 8px;background:var(--text);color:var(--bg-panel);font-size:11px;white-space:nowrap;border-radius:var(--panel-radius);z-index:10}.badge:hover .badge-tooltip{display:block}.timer-bar{display:none;padding:8px 16px;background:var(--bg-panel);border-bottom:2px solid var(--border);font-family:var(--font-mono);font-size:18px;text-align:center}.timer-bar.visible{display:block}.timer-bar.warning{color:var(--danger)}.action-buttons{display:flex;gap:6px;flex-wrap:wrap}.action-btn{padding:6px 12px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg);color:var(--text);cursor:pointer;font-family:var(--font-mono);font-size:12px;transition:all .15s}.action-btn:hover{border-color:var(--accent)}.action-btn.danger:hover{border-color:var(--danger);color:var(--danger)}.theme-toggle{position:absolute;top:12px;right:12px;z-index:50;padding:6px 10px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg-panel);color:var(--text);cursor:pointer;font-size:16px}.achievement-notification{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100px);background:var(--bg-panel);border:2px solid var(--success);border-radius:var(--panel-radius);padding:12px 24px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 16px #00000026;z-index:1000;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.achievement-notification.visible{transform:translate(-50%) translateY(0)}.achievement-notification .badge-icon{font-size:28px}.achievement-notification .badge-info h4{font-size:14px;color:var(--success)}.achievement-notification .badge-info p{font-size:12px;color:var(--text-muted)}.map-container svg{--s: 1}.station-label{font-family:var(--font-ui);font-size:min(1.3px,calc(var(--s) * 13px));fill:var(--text);pointer-events:none}.station-dot{cursor:pointer}.station-dot.found{r:calc(var(--s) * 6);stroke-width:calc(var(--s) * 2);fill:#fff;opacity:1}.station-dot.ghost{r:calc(var(--s) * 4);opacity:.2}.station-dot.selected,.station-dot.highlight-target{stroke:var(--accent)!important;stroke-width:calc(var(--s) * 3)!important}.river-path{stroke-width:1}.transfer-indicator{stroke-linecap:round;stroke-linejoin:round}.transfer-bg{stroke-width:calc(var(--s) * 8)}.transfer-fg{stroke-width:calc(var(--s) * 5)}.connection-line{fill:none;stroke-linecap:round;stroke-width:calc(var(--s) * 4);opacity:0;transition:opacity .4s}.connection-line.drawn{opacity:1}.connection-line.guide{opacity:.12}.undo-btn{position:absolute;bottom:60px;right:12px;z-index:50;padding:8px 12px;border:2px solid var(--border);border-radius:var(--panel-radius);background:var(--bg-panel);color:var(--text);cursor:pointer;font-family:var(--font-mono);font-size:13px;display:none}.undo-btn.visible{display:block}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.dialog{background:var(--bg-panel);border:2px solid var(--border);border-radius:var(--panel-radius);padding:24px;max-width:400px;width:90%}.dialog h3{margin-bottom:12px}.dialog p{margin-bottom:16px;color:var(--text-muted)}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}.dialog-actions button{padding:8px 16px;border:2px solid var(--border);border-radius:var(--panel-radius);cursor:pointer;font-family:var(--font-ui);font-size:13px;background:var(--bg);color:var(--text)}.dialog-actions button.primary{background:var(--danger);color:#fff;border-color:var(--danger)}@media(max-width:768px){.app-layout{flex-direction:column}.sidebar{width:100%;border-left:none;border-top:2px solid var(--border);max-height:40vh;overflow-y:auto}.map-area{flex:1;min-height:50vh}}.share-canvas{display:none}@keyframes neighbor-flash{0%{opacity:0;transform:scale(.5)}50%{opacity:.6;transform:scale(1.2)}to{opacity:0;transform:scale(.5)}}.neighbor-flash{animation:neighbor-flash 1.5s ease-out forwards;transform-origin:center;transform-box:fill-box}@keyframes station-appear{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.station-appear{animation:station-appear .4s ease-out forwards;transform-origin:center;transform-box:fill-box}@keyframes connection-draw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.connection-draw{stroke-dasharray:100;animation:connection-draw .6s ease-out forwards}