:root{--bg: #0b1220;--surface: #111827;--surface-2: #0f172a;--surface-3: #1b2536;--header-bg: #0b1220;--ink: #e5e9f0;--muted: #94a3b8;--border: #1f2a3a;--primary: #3b82f6;--primary-hover: #2563eb;--primary-soft: #16243d;--accent: #60a5fa;--good: #22c55e;--warn: #d97706;--danger: #dc2626;--listened: #64748b;--radius: 10px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}button,input,select{font-family:inherit}.wc-app{display:flex;flex-direction:column;height:100%;overflow:hidden}.wc-header{display:flex;align-items:center;gap:8px;padding:0 14px;height:52px;background:var(--header-bg);border-bottom:1px solid var(--border);flex:0 0 auto}.wc-logo{display:inline-flex;color:var(--accent)}.wc-titles{min-width:0}.wc-titles h1{font-size:16px;font-weight:700;margin:0;letter-spacing:.02em;white-space:nowrap}.wc-spacer{flex:1}.wc-chip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted)}.wc-chip.ok{color:#86efac;border-color:#22c55e66;background:#22c55e1a}.wc-chip.warn{color:#fcd34d;border-color:#d9770666;background:#d977061a}.wc-chip.muted{color:var(--muted)}.wc-genre-pill{padding:6px 12px;font-size:12px;font-weight:600;border-radius:999px;border:1px solid var(--primary);background:var(--primary-soft);color:var(--accent);cursor:pointer;white-space:nowrap}.wc-genre-pill:hover{background:#1a2c49}.wc-lang{font-size:12px;padding:5px 6px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}.wc-lang option{color:#111}.wc-main{flex:1;min-height:0;display:flex}.wc-map-wrap{position:relative;flex:1;min-height:0}.wc-map{height:100%;width:100%;background:var(--surface-2)}.wc-map .leaflet-container{background:var(--surface-2);font-family:inherit}.wc-map .leaflet-control-attribution{font-size:10px;background:#0b1220cc;color:var(--muted)}.wc-map .leaflet-control-attribution a{color:var(--accent)}.wc-map .leaflet-control-zoom a{background:var(--surface);color:var(--ink);border-color:var(--border)}.wc-map .leaflet-control-zoom a:hover{background:var(--surface-3)}.wc-me-icon{background:transparent!important;border:none!important}.me-dot{position:relative;display:block;width:16px;height:16px;margin:3px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 2px #60a5fa80}.me-pulse{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;background:#60a5fa59;animation:me-pulse 1.8s ease-out infinite}@keyframes me-pulse{0%{transform:scale(.6);opacity:.8}to{transform:scale(1.8);opacity:0}}.wc-badge-icon{background:transparent!important;border:none!important}.wc-badge{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700;border:2px solid #0b1220;box-shadow:0 1px 4px #0006}.wc-badge.listened{background:var(--listened)}.wc-popup .leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius)}.wc-popup .leaflet-popup-tip{background:var(--surface);border:1px solid var(--border)}.wc-popup .leaflet-popup-content{margin:12px 14px}.wc-pop-title{display:block;font-size:14px;font-weight:700}.wc-pop-count{display:block;font-size:11px;color:var(--muted);margin:2px 0 8px}.wc-pop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.wc-pop-list li{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--border)}.wc-pop-ep{flex:1;font-size:12px;min-width:0}.wc-pop-dur{font-size:11px;color:var(--muted)}.wc-pop-play{flex:0 0 auto;padding:4px 10px;font-size:11px;font-weight:600;border-radius:999px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer}.wc-pop-play:hover{background:var(--primary-hover)}.wc-pop-done{flex:0 0 auto;font-size:11px;color:var(--listened)}.wc-map-note{position:absolute;left:50%;bottom:16px;transform:translate(-50%);z-index:800;max-width:90%;padding:8px 14px;font-size:12px;border-radius:999px;background:#111827eb;border:1px solid var(--border);color:var(--muted);text-align:center;box-shadow:0 2px 10px #0006}.wc-map-note.warn{color:#fcd34d;border-color:#d9770666}.wc-player{flex:0 0 auto;display:grid;grid-template-columns:1fr auto;grid-template-areas:"info controls" "seek seek";gap:8px 12px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}.wc-player-info{grid-area:info;min-width:0}.wc-player-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wc-player-zone{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wc-player-queue{color:var(--accent)}.wc-player-idle{font-size:13px;color:var(--muted)}.wc-player-seek{grid-area:seek;display:flex;align-items:center;gap:10px}.wc-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px}.wc-time:last-child{text-align:right}.wc-seekbar{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--pct, 0%),var(--border) var(--pct, 0%),var(--border) 100%);cursor:pointer}.wc-seekbar:disabled{opacity:.5;cursor:default}.wc-seekbar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer}.wc-seekbar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer}.wc-player-controls{grid-area:controls;display:flex;align-items:center;gap:8px}.wc-ctrl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface-3);color:var(--ink);cursor:pointer;transition:background .12s,opacity .12s}.wc-ctrl:hover{background:#243246}.wc-ctrl:disabled{opacity:.4;cursor:default}.wc-ctrl.primary{background:var(--primary);border-color:var(--primary);color:#fff}.wc-ctrl.primary:hover{background:var(--primary-hover)}.wc-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;background:#080c16eb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.wc-overlay-card{position:relative;width:100%;max-width:460px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 24px;box-shadow:0 20px 60px #00000080}.wc-overlay-close{position:absolute;top:14px;right:14px;display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:var(--surface-3);color:var(--muted);cursor:pointer}.wc-overlay-close:hover{color:var(--ink)}.wc-overlay-title{font-size:20px;font-weight:700;margin:0 0 8px}.wc-overlay-sub{font-size:13px;color:var(--muted);margin:0 0 20px}.wc-genre-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wc-genre-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s,transform .12s}.wc-genre-card:hover{border-color:var(--primary);background:var(--surface-3)}.wc-genre-card:active{transform:scale(.98)}.wc-genre-card.active{border-color:var(--primary);background:var(--primary-soft)}.wc-genre-icon{display:inline-flex;color:var(--accent)}.wc-genre-label{font-size:14px;font-weight:600}.wc-start-card{text-align:center}.wc-start-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;font-size:16px;font-weight:700;border-radius:999px;border:none;background:var(--primary);color:#fff;cursor:pointer;transition:background .12s,transform .12s}.wc-start-btn:hover{background:var(--primary-hover)}.wc-start-btn:active{transform:scale(.98)}.wc-start-note{font-size:12px;color:var(--muted);margin:16px 0 0}@media (max-width: 768px){.wc-titles h1{font-size:15px}.wc-header{gap:6px;padding:0 10px}.wc-genre-pill{padding:5px 10px;font-size:11px}}