/* =====================================================
   THE FIRST EXPLORERS PROJECT — Main Stylesheet
   Dark Futuristic Space / Mission Control Theme
   ===================================================== */

/* ---------- CSS Variables ---------- */
:root {
  /* Deep space dark foundation */
  --bg-primary:   #020712;
  --bg-secondary: #040b1a;
  --bg-panel:     rgba(3, 8, 22, 0.96);
  --bg-card:      rgba(5, 12, 30, 0.92);
  --bg-input:     rgba(8, 18, 42, 0.80);
  --bg-glass:     rgba(0, 212, 255, 0.05);
  --border-glow:  rgba(0, 212, 255, 0.32);
  --border-dim:   rgba(0, 212, 255, 0.10);

  --text-primary:   #EEF4FF;
  --text-secondary: #AAC0D8;
  --text-muted:     #6A88A4;
  --text-dim:       #3C5470;

  /* Primary neon cyan accent — NASA/cinematic */
  --accent:       #00CFFF;
  --accent-bright:#50E8FF;
  --accent-glow:  rgba(0, 207, 255, 0.45);
  --accent-deep:  #0090CC;

  --green:      #1EE6B4;
  --green-glow: rgba(30, 230, 180, 0.45);
  --orange:     #FF9040;
  --orange-glow:rgba(255, 144, 64, 0.4);
  --red:        #FF6B6B;
  --red-glow:   rgba(255, 107, 107, 0.4);
  --purple:     #B088FF;

  --header-h:    62px;
  --controlbar-h:52px;
  --radius:    10px;
  --radius-sm:  6px;
  --shadow-glow: 0 0 30px rgba(0, 207, 255, 0.20), 0 4px 32px rgba(0,0,0,0.80);
  --shadow-deep: 0 10px 60px rgba(0,0,0,0.90);
  --transition:  all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #030912;
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; border: none; outline: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; outline: none; border: none; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 2px; }

/* ---------- Space Background — ultra-dark deep-space ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    /* 中央に地球の暖かい光を演出する淡いグロー */
    radial-gradient(ellipse 75% 55% at 50% 55%, rgba(0, 60, 140, 0.30) 0%, transparent 60%),
    /* 左上: 光源方向の微妙なハイライト */
    radial-gradient(ellipse 55% 40% at 15% 12%, rgba(0, 30, 90, 0.20) 0%, transparent 58%),
    /* 右下: 深宇宙の奥行き */
    radial-gradient(ellipse 45% 30% at 88% 82%, rgba(0, 10, 50, 0.14) 0%, transparent 55%),
    /* ベース: 純粋な暗黒宇宙 */
    radial-gradient(ellipse 100% 100% at 50% 50%, #030c1e 0%, #010810 50%, #00040c 100%);
}

/* Animated star canvas — above body bg, below UI chrome */
#starCanvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  /* 星の視認性を高めて宇宙感を強調 */
  opacity: 0.95;
}

/* User location pulse marker */
.user-location-marker {
  width: 20px; height: 20px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.user-location-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #38BDF8;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(56,189,248,0.8);
  position: relative; z-index: 2;
}
.user-location-pulse {
  position: absolute; inset: -4px;
  border-radius: 50%;
  /* transform:scale を使わず box-shadow だけでパルス（globe 3D変換と干渉しない） */
  box-shadow: 0 0 0 0 rgba(56,189,248,0.6);
  animation: userLocPulse 2s ease-out infinite;
}
@keyframes userLocPulse {
  0%   { box-shadow: 0 0 0 0 rgba(56,189,248,0.6); opacity: 1; }
  100% { box-shadow: 0 0 0 14px rgba(56,189,248,0); opacity: 0; }
}

/* Place-search result item (geocoded) */
.search-result-item.place-result .search-result-icon {
  background: rgba(167,139,250,0.15);
  border-color: rgba(167,139,250,0.3);
  color: #A78BFA;
}

/* ====================================================
   HEADER
   ==================================================== */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: rgba(2, 6, 18, 0.98);
  border-bottom: 1px solid rgba(0, 207, 255, 0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(0,207,255,0.06), 0 4px 32px rgba(0,0,0,0.7);
}

/* Logo */
.header-left { display: flex; align-items: center; flex-shrink: 0; }

.app-logo { display: flex; align-items: center; gap: 10px; }

.logo-icon {
  position: relative; width: 32px; height: 32px; flex-shrink: 0;
}
.logo-orbit {
  position: absolute; inset: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.7;
  animation: orbitSpin 6s linear infinite;
}
.logo-orbit::after {
  content: '';
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}
.logo-core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent), 0 0 4px #fff;
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.app-title {
  display: flex; flex-direction: column; line-height: 1;
}
.title-main {
  font-size: 14px; font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-primary);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0,212,255,0.3);
}
.title-sub {
  font-size: 8px; font-weight: 700;
  letter-spacing: 3.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.85;
}

/* Nav — pill capsule matching reference */
.header-nav {
  display: none; /* MENUボタンに統合したため常時非表示 */
  align-items: center; gap: 2px;
  margin: 0 auto;
  background: rgba(0, 5, 18, 0.60);
  border: 1px solid rgba(0, 207, 255, 0.14);
  border-radius: 32px;
  padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.3px;
  color: rgba(160, 195, 220, 0.65);
  border-radius: 26px;
  transition: var(--transition);
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-btn i { font-size: 11px; opacity: 0.6; }
.nav-btn:hover { color: var(--accent); background: rgba(0,207,255,0.08); }
.nav-btn.active {
  color: #010810;
  background: linear-gradient(135deg, var(--accent) 0%, #00a8dd 100%);
  box-shadow: 0 0 18px rgba(0,207,255,0.55), 0 0 8px rgba(0,207,255,0.8), inset 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 800;
}
.nav-btn.active i { opacity: 1; }

/* Header Right */
.header-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto;
}
.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  transition: var(--transition);
  background: rgba(0, 15, 35, 0.60);
  border: 1px solid rgba(0, 207, 255, 0.10);
}
.icon-btn:hover { color: var(--accent); background: rgba(0,207,255,0.08); border-color: var(--border-glow); box-shadow: 0 0 12px rgba(0,207,255,0.22); }
/* Language button — text style matching reference "EN / 日本語" */
.lang-btn {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-secondary);
  width: auto; padding: 0 10px;
  min-width: 52px;
  gap: 5px;
  display: flex; align-items: center; justify-content: center;
}
.lang-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.lang-code {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent);
  font-family: 'Courier New', monospace;
}
/* 旧スタイル（非表示） */
.lang-sep  { display: none; }
.lang-native { display: none; }
.mobile-menu-btn {
  display: none;
  /* モバイルでのタップ操作改善 */
  -webkit-tap-highlight-color: rgba(0,207,255,0.1);
  user-select: none;
}

/* ====================================================
   MAIN
   ==================================================== */
.app-main {
  position: fixed;
  top: var(--header-h); left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.view { display: none; width: 100%; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* ====================================================
   CONTROL BAR
   ==================================================== */
.control-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: rgba(3, 8, 22, 0.92);
  border-bottom: 1px solid rgba(0,212,255,0.10);
  z-index: 100;
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

/* Search Bar */
.search-bar-wrapper {
  position: relative;
  flex: 1; min-width: 200px;
}
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(5, 15, 35, 0.85);
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: 10px;
  padding: 0 14px;
  transition: var(--transition);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.2), inset 0 1px 3px rgba(0,0,0,0.3);
}
.search-icon { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.search-bar input {
  flex: 1;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 0;
  min-width: 0;
}
.search-bar input::placeholder { color: var(--text-dim); }
.search-clear {
  color: var(--text-muted); font-size: 11px; padding: 4px;
  border-radius: 4px; transition: var(--transition);
}
.search-clear:hover { color: var(--red); }

/* Search Dropdown — fixed so overflow:hidden on .app-main doesn't clip it */
.search-results-dropdown {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
  z-index: 2500;
  max-height: 320px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  min-width: 220px;
}
.search-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-dim);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-glass); }
.search-result-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  font-size: 12px; color: var(--accent); flex-shrink: 0;
}
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub { font-size: 11px; color: var(--text-muted); }
.search-no-results { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
.search-section-label { padding: 6px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); opacity: 0.75; border-bottom: 1px solid var(--border-dim); }

/* Search provider badges — appear inline in search dropdown items */
.search-result-item { display: flex; align-items: center; gap: 8px; position: relative; }
.search-provider-badge {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; margin-left: auto; white-space: nowrap;
}
.search-provider-saved     { background: rgba(30,230,180,0.12); color: #1EE6B4; border: 1px solid rgba(30,230,180,0.3); }
.search-provider-mapbox    { background: rgba(0,207,255,0.10); color: rgba(0,207,255,0.8); border: 1px solid rgba(0,207,255,0.25); }
.search-provider-zenrin    { background: rgba(255,158,35,0.12); color: #FF9E23; border: 1px solid rgba(255,158,35,0.3); }
.search-provider-google    { background: rgba(66,133,244,0.12); color: #4285F4; border: 1px solid rgba(66,133,244,0.3); }
.search-provider-nominatim { background: rgba(76,175,80,0.12);  color: #4CAF50; border: 1px solid rgba(76,175,80,0.3); }
.search-provider-photon    { background: rgba(156,39,176,0.12); color: #CE93D8; border: 1px solid rgba(156,39,176,0.3); }

/* Address suggestion provider badges */
.address-sugg-item { display: flex; align-items: center; gap: 8px; }
.sugg-provider-badge {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 5px; margin-left: auto;
}
.sugg-provider-mapbox    { background: rgba(0,207,255,0.10); color: rgba(0,207,255,0.7); border: 1px solid rgba(0,207,255,0.2); }
.sugg-provider-zenrin    { background: rgba(255,158,35,0.12); color: #FF9E23; border: 1px solid rgba(255,158,35,0.3); }
.sugg-provider-google    { background: rgba(66,133,244,0.12); color: #4285F4; border: 1px solid rgba(66,133,244,0.3); }
.sugg-provider-nominatim { background: rgba(76,175,80,0.12);  color: #4CAF50; border: 1px solid rgba(76,175,80,0.3); }
.sugg-provider-photon    { background: rgba(156,39,176,0.12); color: #CE93D8; border: 1px solid rgba(156,39,176,0.3); }

/* Filters */
.filter-group { display: flex; gap: 8px; flex-shrink: 0; }
.filter-select-wrapper {
  position: relative; display: flex; align-items: center;
}
.filter-select {
  appearance: none;
  background: rgba(5, 15, 35, 0.85);
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  padding: 9px 30px 9px 14px;
  cursor: pointer;
  transition: var(--transition);
  min-width: 120px;
  letter-spacing: 0.3px;
}
.filter-select:focus, .filter-select:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.filter-arrow {
  position: absolute; right: 10px;
  pointer-events: none;
  color: var(--text-muted); font-size: 10px;
}

/* ====================================================
   MAP WRAPPER
   ==================================================== */
.map-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#map {
  width: 100%; height: 100%;
}

/* ── Globe Atmosphere: #globeAtmosCanvas (JS Canvas 2D) で描画 ──────────
   大気ハロー・軌道リング・ビネットは app.js の initGlobeAtmosphere() で描画。
   CSS box-shadow は使用しない。
──────────────────────────────────────────────────────────────────────── */
.mapboxgl-map {
  will-change: transform;
}

/* PIN-FIX: Globe marker overlay — must be a child of map.getCanvasContainer() (.mapboxgl-map).
   position:absolute inset:0 covers the exact same pixel area as the Mapbox canvas,
   so map.project() coordinates map 1:1 to CSS left/top without any offset drift.
   pointer-events:none on container; individual markers set pointer-events:auto. */
#globeMarkerOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
  /* Isolate compositing context — prevents animations inside from affecting
     the parent canvas's stacking context or triggering repaints */
  isolation: isolate;
}

/* Mapbox overrides */
.mapboxgl-ctrl-logo { display: none !important; }
.mapboxgl-ctrl-attrib { opacity: 0.4 !important; font-size: 9px !important; }
.mapboxgl-ctrl-group { display: none !important; }
.mapboxgl-popup { max-width: 280px !important; }
.mapboxgl-popup-content {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-glow) !important;
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.mapboxgl-popup-tip { border-top-color: var(--border-glow) !important; }
.mapboxgl-popup-close-button {
  color: var(--text-muted) !important;
  font-size: 18px !important;
  padding: 4px 8px !important;
  right: 2px !important; top: 2px !important;
  z-index: 1;
}
.mapboxgl-popup-close-button:hover { color: var(--text-primary) !important; background: none !important; }

/* Custom Popup Content */
.map-popup {
  padding: 12px 14px;
}
.map-popup-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.map-popup-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  padding: 2px 8px; border-radius: 12px;
  text-transform: uppercase;
}
.map-popup-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
  line-height: 1.3;
}
.map-popup-location {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 4px;
}
.map-popup-desc {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  max-height: 60px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.map-popup-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}
.map-popup-price { font-size: 12px; font-weight: 600; color: var(--green); }
.map-popup-btn {
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  background: var(--accent); color: var(--bg-primary);
  border-radius: 6px; cursor: pointer; transition: var(--transition);
  letter-spacing: 0.3px;
}
.map-popup-btn:hover { background: var(--accent-bright); }

/* Live Indicator */
.live-indicator {
  position: absolute; top: 14px; left: 14px; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  background: rgba(1, 5, 15, 0.94);
  border: 1px solid rgba(30, 230, 180, 0.45);
  border-radius: 10px;
  padding: 7px 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 24px rgba(30, 230, 180, 0.12), 0 4px 20px rgba(0,0,0,0.6);
}
.live-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--green), 0 0 5px var(--green);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px var(--green); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 4px var(--green); }
}
.live-label { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: var(--green); text-transform: uppercase; }
.live-time { font-size: 12px; font-weight: 600; color: #D8EEFF; font-variant-numeric: tabular-nums; font-family: 'Courier New', monospace; letter-spacing: 1.8px; }

/* Map Stats — top-right panel */
.map-stats {
  position: absolute; top: 14px; right: 14px; z-index: 100;
  display: flex; align-items: center; gap: 0;
  background: rgba(1, 5, 15, 0.94);
  border: 1px solid rgba(0, 207, 255, 0.16);
  border-radius: 10px;
  padding: 8px 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 24px rgba(0,207,255,0.07), 0 4px 24px rgba(0,0,0,0.65);
}
.stat-item { display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
.stat-num { font-size: 18px; font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(0,207,255,0.65); }
.stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.stat-divider { width: 1px; height: 30px; background: rgba(0, 207, 255, 0.12); }

/* Map Controls */
.map-controls {
  position: absolute; bottom: 80px; right: 14px; z-index: 100;
  display: flex; flex-direction: column; gap: 4px;
}
.map-ctrl-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1, 5, 16, 0.94);
  border: 1px solid rgba(0, 207, 255, 0.14);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 13px;
  transition: var(--transition);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.map-ctrl-btn:hover {
  color: var(--accent); border-color: var(--border-glow);
  box-shadow: 0 0 16px rgba(0,207,255,0.32), 0 2px 14px rgba(0,0,0,0.55);
  background: rgba(0,207,255,0.08);
}
/* 自動回転ボタン アクティブ状態 */
#autoRotateBtn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,207,255,0.12);
  box-shadow: 0 0 12px rgba(0,207,255,0.45), 0 2px 14px rgba(0,0,0,0.55);
}
#autoRotateBtn.active i {
  animation: spin-globe 2s linear infinite;
}
@keyframes spin-globe {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* FAB Button */
.fab-btn {
  position: absolute; bottom: 20px; right: 14px; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, #0090cc 100%);
  color: #010810;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px;
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(0,207,255,0.50), 0 4px 22px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: var(--transition);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.10);
}
.fab-btn:hover {
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
  transform: translateY(-2px);
  box-shadow: 0 0 42px rgba(0,207,255,0.65), 0 8px 28px rgba(0,0,0,0.65);
}
.fab-btn i { font-size: 13px; }

/* ====================================================
   CUSTOM MARKERS
   ==================================================== */
/* Mapbox Markerの位置はMapboxが制御 — コンテナにtransformを使わない */
/* ====================================================
   MAP MARKER — beacon style
   position:absolute要素のtransform:scaleはMapbox GL座標変換と干渉するため、
   アニメーション専用ラッパーを使い親要素には一切transformを適用しない
   ==================================================== */
/* ====================================================
   MARKER — PIN ANIMATION FIX (#1)
   Mapbox GL manages .mapboxgl-marker via transform:translate().
   We must NOT use transform on .marker-beacon itself.
   All child animations use position:absolute + translate(-50%,-50%)
   so scale() operations never move the pin's anchor point.
   ==================================================== */
.marker-beacon {
  /* Fixed 24×24 container — no transform, no will-change */
  position: relative;
  width: 24px; height: 24px;
  cursor: pointer;
  /* Isolate children's stacking from Mapbox GL marker stack */
  isolation: isolate;
}
.marker-beacon .marker-core {
  /* Centered via translate — scale() would stay centered if needed */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  z-index: 2;
  flex-shrink: 0;
}
/* Pulse ring — borderの opacity アニメーションのみ使用 (box-shadowの拡張がマーカー座標に影響しないように) */
.marker-beacon .marker-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: beaconPulse 2.5s ease-out infinite;
  will-change: opacity;
  z-index: 1;
}
/* Outer ripple ring */
.marker-beacon .marker-ring-outer {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: beaconRipple 2.5s ease-out infinite;
  animation-delay: 0.6s;
  will-change: opacity;
  z-index: 0;
}
@keyframes beaconPulse {
  0%   { opacity: 0.85; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes beaconRipple {
  0%   { opacity: 0.5; }
  100% { opacity: 0; }
}

/* Type colors — matching reference glowing dots */
/* color: を各タイプに設定して currentColor が box-shadow で正しく機能するようにする */
.marker-train { color: #00CFFF; }
.marker-train .marker-core { background: #00CFFF; box-shadow: 0 0 12px #00CFFF, 0 0 4px #fff; }
.marker-train .marker-ring { border-color: #00CFFF; }
.marker-train .marker-ring-outer { border-color: #00CFFF; }

.marker-bus { color: #1EE6B4; }
.marker-bus .marker-core { background: #1EE6B4; box-shadow: 0 0 12px #1EE6B4, 0 0 4px #fff; }
.marker-bus .marker-ring { border-color: #1EE6B4; }
.marker-bus .marker-ring-outer { border-color: #1EE6B4; }

.marker-ship { color: #38D0FF; }
.marker-ship .marker-core { background: #38D0FF; box-shadow: 0 0 12px #38D0FF, 0 0 4px #fff; }
.marker-ship .marker-ring { border-color: #38D0FF; }
.marker-ship .marker-ring-outer { border-color: #38D0FF; }

.marker-air { color: #FF9040; }
.marker-air .marker-core { background: #FF9040; box-shadow: 0 0 12px #FF9040, 0 0 4px #fff; }
.marker-air .marker-ring { border-color: #FF9040; }
.marker-air .marker-ring-outer { border-color: #FF9040; }

.marker-other { color: #B088FF; }
.marker-other .marker-core { background: #B088FF; box-shadow: 0 0 12px #B088FF, 0 0 4px #fff; }
.marker-other .marker-ring { border-color: #B088FF; }
.marker-other .marker-ring-outer { border-color: #B088FF; }

/* Cluster */
.marker-cluster {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.25) 0%, rgba(56,189,248,0.05) 70%);
  border: 2px solid var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  cursor: pointer;
  animation: clusterGlow 3s ease-in-out infinite;
  position: relative;
}
.marker-cluster::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  /* Use border (not box-shadow) for ripple ring — no layout side-effects */
  border: 1.5px solid rgba(56,189,248,0.5);
  animation: clusterRipple 3s ease-out infinite;
  will-change: opacity, transform;
}
/* PIN-FIX: clusterGlow changed from box-shadow animation to opacity-only.
   box-shadow size changes force browser composite layer recalculation which
   can interfere with map.project() coordinate mapping and cause pin drift.
   opacity is GPU-composited and never affects layout or coordinate spaces. */
@keyframes clusterGlow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.72; }
}
/* PIN-FIX: clusterRipple uses opacity only; box-shadow removed for same reason. */
@keyframes clusterRipple {
  0%   { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.cluster-count {
  font-size: 13px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px var(--accent);
}

/* ====================================================
   DETAIL PANEL
   ==================================================== */
.detail-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.detail-overlay.open { display: block; opacity: 1; }

.detail-panel {
  position: fixed;
  bottom: -100%; left: 0; right: 0;
  z-index: 950;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-glow);
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(20px);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.8), 0 0 60px rgba(56,189,248,0.08);
  transition: bottom 0.4s cubic-bezier(0.4,0,0.2,1);
  overscroll-behavior: contain;
}
.detail-panel.open { bottom: 0; }

/* Desktop: side panel */
@media (min-width: 768px) {
  .detail-panel {
    top: var(--header-h); bottom: 0;
    right: -420px; left: auto;
    width: 400px;
    max-height: none;
    border-radius: 0;
    border-top: none;
    border-left: 1px solid var(--border-glow);
    transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .detail-panel.open { right: 0; bottom: 0; }
  .detail-overlay.open { display: none; }
}

.detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  position: sticky; top: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-dim);
  backdrop-filter: blur(12px);
  z-index: 1;
}
.detail-type-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 12px;
  text-transform: uppercase;
}
.detail-actions { display: flex; gap: 6px; }
.detail-action-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  transition: var(--transition);
}
.detail-action-btn:hover { color: var(--accent); border-color: var(--border-glow); }
.detail-action-btn.close-btn:hover { color: var(--red); }
.detail-action-btn.bookmarked { color: var(--accent); }

.detail-media { background: #000; position: relative; }
.detail-media img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
/* メディア下のグラデーション */
.detail-media::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to top, var(--bg-panel) 0%, transparent 100%);
  pointer-events: none;
}

.detail-body { padding: 16px 18px 20px; }

.detail-title {
  font-size: 20px; font-weight: 800;
  color: var(--text-primary); line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.detail-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.detail-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  padding: 3px 10px;
}
.detail-meta-item i { color: var(--accent); font-size: 10px; }
.detail-meta-item span { color: var(--text-secondary); }

.detail-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: 8px; margin-bottom: 14px;
}
.detail-info-item {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 10px 12px;
  transition: var(--transition);
}
.detail-info-item:hover { border-color: var(--border-glow); }
.detail-info-item i { color: var(--accent); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.detail-info-item label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 2px; }
.detail-info-item span { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.detail-description {
  font-size: 13px; color: var(--text-secondary); line-height: 1.65;
  margin-bottom: 14px;
  /* 長い説明文の省略なし — スクロール可能 */
}

.detail-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.detail-tag {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 12px;
  color: var(--accent);
  letter-spacing: 0.3px;
  transition: var(--transition);
}
.detail-tag:hover { background: rgba(56,189,248,0.18); }

.detail-caution {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  background: rgba(251,146,60,0.07);
  border: 1px solid rgba(251,146,60,0.22);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 12px; color: #FCA97C;
  line-height: 1.5;
}
.detail-caution i { color: var(--orange); margin-top: 2px; flex-shrink: 0; }

.detail-coords {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 14px;
  font-family: 'Courier New', monospace;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 6px 10px;
}
.detail-coords i { color: var(--text-muted); font-size: 10px; }

.detail-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-dim);
  flex-wrap: wrap;
  gap: 8px;
}
.detail-date { font-size: 11px; color: var(--text-dim); }

/* ====================================================
   MODAL
   ==================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: none; opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.open { display: block; opacity: 1; }

.modal {
  position: fixed; z-index: 1200;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(90vw, 600px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  box-shadow: var(--shadow-glow), var(--shadow-deep);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  display: none;
  overscroll-behavior: contain;
}
.modal.open {
  display: block; opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-dim);
  position: sticky; top: 0;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  z-index: 1;
}
.modal-header h2 {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.modal-header h2 i { color: var(--accent); }
.modal-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-muted); font-size: 14px;
  transition: var(--transition);
}
.modal-close:hover { color: var(--red); background: rgba(248,113,113,0.1); }

.modal-body { padding: 18px 20px 20px; }

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }

.form-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 6px;
}
.form-label i { color: var(--accent); }

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 12px;
  transition: var(--transition);
  width: 100%;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--text-dim); }
.form-input option { background: var(--bg-secondary); color: var(--text-primary); }
.form-textarea {
  resize: vertical; min-height: 90px; max-height: 200px; line-height: 1.5;
}

.map-pick-label {
  display: flex !important; align-items: center; justify-content: space-between;
}
.btn-pick-map {
  font-size: 11px; font-weight: 600;
  padding: 5px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  color: var(--accent);
  transition: var(--transition);
}
.btn-pick-map:hover { background: rgba(56,189,248,0.15); }
.btn-pick-map.active { background: rgba(56,189,248,0.2); color: var(--accent-bright); }

.map-pick-info {
  font-size: 11px; color: var(--text-muted);
  padding: 6px 10px;
  background: rgba(56,189,248,0.05);
  border: 1px dashed var(--border-dim);
  border-radius: 6px;
}

.image-preview-box {
  margin-top: 8px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border-dim); background: #000;
}
.image-preview-box img { width: 100%; max-height: 160px; object-fit: cover; }

/* YouTube preview strip inside form */
.youtube-preview-box {
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 68, 68, 0.25);
  background: rgba(255, 68, 68, 0.06);
  padding: 8px 12px;
}
.youtube-preview-inner {
  display: flex; align-items: center; gap: 10px;
}
.youtube-preview-inner span { flex: 1; font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* Address suggestions dropdown */
.address-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 600;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
  max-height: 220px; overflow-y: auto;
  backdrop-filter: blur(16px);
}
.address-sugg-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-dim);
  transition: var(--transition);
  line-height: 1.4;
}
.address-sugg-item:last-child { border-bottom: none; }
.address-sugg-item:hover { background: var(--bg-glass); color: var(--text-primary); }

/* Detail panel YouTube embed */
.detail-youtube {
  background: #000;
  border-bottom: 1px solid var(--border-dim);
}
.detail-youtube-inner iframe {
  display: block; width: 100%;
}

.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border-dim);
}

/* ====================================================
   BUTTONS
   ==================================================== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: var(--accent);
  color: var(--bg-primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--accent-bright);
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-primary.btn-sm { padding: 6px 14px; font-size: 11px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  transition: var(--transition);
}
.btn-secondary:hover { border-color: var(--border-glow); color: var(--text-primary); background: rgba(255,255,255,0.06); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: rgba(248,113,113,0.15);
  color: var(--red);
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 8px;
  transition: var(--transition);
}
.btn-danger:hover { background: rgba(248,113,113,0.25); }

/* ====================================================
   TYPE BADGES
   ==================================================== */
.type-badge-train  { background: rgba(0,207,255,0.14); color: #00CFFF; border: 1px solid rgba(0,207,255,0.32); }
.type-badge-bus    { background: rgba(30,230,180,0.14); color: #1EE6B4; border: 1px solid rgba(30,230,180,0.32); }
.type-badge-ship   { background: rgba(56,208,255,0.14); color: #38D0FF; border: 1px solid rgba(56,208,255,0.32); }
.type-badge-air    { background: rgba(255,144,64,0.14);  color: #FF9040; border: 1px solid rgba(255,144,64,0.32); }
.type-badge-other  { background: rgba(176,136,255,0.14); color: #B088FF; border: 1px solid rgba(176,136,255,0.32); }

/* ====================================================
   ROUTES VIEW
   ==================================================== */
#viewRoutes {
  overflow-y: auto;
  background: var(--bg-primary);
}
.routes-view-container {
  padding: 20px 16px 100px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.routes-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.routes-header h2 {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.routes-header h2 i { color: var(--accent); }
.routes-controls { display: flex; gap: 8px; align-items: center; }
.routes-search-input {
  background: var(--bg-input);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 12px;
  width: 200px;
  transition: var(--transition);
}
.routes-search-input:focus { border-color: var(--accent); }
.routes-search-input::placeholder { color: var(--text-dim); }

.routes-filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.filter-chip {
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  color: var(--text-muted);
  transition: var(--transition);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--border-glow); color: var(--text-primary); }
.filter-chip.active { background: rgba(56,189,248,0.15); border-color: var(--accent); color: var(--accent); }

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.route-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}
.route-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(56,189,248,0.04) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.route-card:hover {
  border-color: var(--border-glow);
  box-shadow: 0 0 24px rgba(56,189,248,0.10), 0 6px 24px rgba(0,0,0,0.45);
  transform: translateY(-3px);
}
.route-card:hover::before { opacity: 1; }
.route-card-image { height: 130px; overflow: hidden; background: #0d1b35; position: relative; }
.route-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.route-card:hover .route-card-image img { transform: scale(1.07); }
.route-card-image .no-image {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: radial-gradient(circle at center, rgba(56,189,248,0.12) 0%, transparent 70%);
}
.route-card-body { padding: 12px 14px 10px; }
.route-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.route-card-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.route-card-location { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.route-card-location i { color: var(--accent); font-size: 10px; }

/* Departure → Arrival row in card */
.route-card-route {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary);
  margin-bottom: 8px; flex-wrap: nowrap;
  overflow: hidden;
  min-height: 20px;
}
.route-card-dep, .route-card-arr {
  display: flex; align-items: center; gap: 3px;
  overflow: hidden;
  min-width: 0;
}
.route-card-dep span:last-child,
.route-card-arr span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.route-card-dep i { color: #1EE6B4; font-size: 10px; flex-shrink: 0; }
.route-card-arr i { color: #FF9040; font-size: 10px; flex-shrink: 0; }
.route-card-route-arrow { color: var(--text-dim); font-size: 10px; flex-shrink: 0; }

.route-card-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.route-card-footer { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.route-card-price {
  font-size: 12px; font-weight: 700; color: var(--green);
  background: rgba(30,230,180,0.08);
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(30,230,180,0.2);
}
.route-card-actions { display: flex; gap: 6px; }
.card-action-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-muted); font-size: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  transition: var(--transition);
}
.card-action-btn:hover { color: var(--accent); border-color: var(--border-glow); background: rgba(56,189,248,0.08); }
.card-action-btn.bookmarked { color: var(--accent); }

/* ====================================================
   ABOUT VIEW
   ==================================================== */
#viewAbout {
  overflow-y: auto;
  background: var(--bg-primary);
}
.about-container {
  padding: 40px 20px 100px;
  max-width: 800px; margin: 0 auto;
}
.about-hero { text-align: center; margin-bottom: 40px; }
.about-globe-icon {
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  text-shadow: 0 0 30px var(--accent-glow);
  animation: orbitSpin 20s linear infinite;
  display: inline-block;
}
.about-hero h1 {
  font-size: 28px; font-weight: 900;
  color: var(--text-primary); letter-spacing: -0.5px;
  line-height: 1.15; margin-bottom: 10px;
}
.about-hero h1 span { color: var(--accent); }
.about-tagline { font-size: 14px; color: var(--text-muted); }

.about-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 32px;
}
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: var(--transition);
}
.about-card:hover { border-color: var(--border-glow); box-shadow: 0 0 20px rgba(56,189,248,0.08); }
.about-card i { font-size: 28px; color: var(--accent); margin-bottom: 12px; display: block; text-shadow: 0 0 16px var(--accent-glow); }
.about-card h3 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.about-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.about-stats-row {
  display: flex; justify-content: center; gap: 30px; margin-bottom: 32px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
}
.about-stat { text-align: center; }
.about-stat span { display: block; font-size: 32px; font-weight: 900; color: var(--accent); line-height: 1; }
.about-stat label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; display: block; }

.about-tech {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 20px;
}
.about-tech h3 { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.about-tech p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.about-tech strong { color: var(--accent-bright); }

/* ====================================================
   BOOKMARKS PANEL
   ==================================================== */
.bookmarks-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.4);
  display: none;
}
.bookmarks-overlay.open { display: block; }

.bookmarks-panel {
  position: fixed; top: var(--header-h); right: -340px; bottom: 0;
  z-index: 850;
  width: 320px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-glow);
  backdrop-filter: blur(20px);
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.bookmarks-panel.open { right: 0; }

.bookmarks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-dim);
  position: sticky; top: 0;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
}
.bookmarks-header h3 {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.bookmarks-header h3 i { color: var(--accent); }
.bookmarks-header button { color: var(--text-muted); font-size: 16px; transition: var(--transition); }
.bookmarks-header button:hover { color: var(--text-primary); }

.bookmarks-list { flex: 1; padding: 10px; }
.bookmark-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.bookmark-item:hover { border-color: var(--border-glow); background: rgba(56,189,248,0.06); }
.bookmark-type { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; flex-shrink: 0; }
.bookmark-info { flex: 1; min-width: 0; }
.bookmark-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bookmark-loc { font-size: 11px; color: var(--text-muted); }
.bookmark-remove { color: var(--text-dim); font-size: 12px; padding: 4px; transition: var(--transition); flex-shrink: 0; }
.bookmark-remove:hover { color: var(--red); }

/* ====================================================
   TOAST
   ==================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-glow);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
  opacity: 0; white-space: nowrap; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toast.success i { color: #22C55E; }
.toast.error i { color: var(--red); }
.toast.info i { color: var(--accent); }

/* ====================================================
   CONFIRM DIALOG
   ==================================================== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.7); display: none;
}
.confirm-overlay.open { display: block; }
.confirm-dialog {
  position: fixed; z-index: 1400;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(320px, 88vw);
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(20px);
}
.confirm-icon { font-size: 32px; color: var(--orange); margin-bottom: 12px; }
.confirm-dialog h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.confirm-dialog p { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }

/* ====================================================
   EMPTY STATE
   ==================================================== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  color: var(--text-dim);
  text-align: center;
  gap: 12px;
}
.empty-state i { font-size: 32px; opacity: 0.4; }
.empty-state p { font-size: 13px; line-height: 1.6; }

/* ====================================================
   MOBILE MENU (hamburger overlay)
   ==================================================== */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  /* header(1000), flow-modal(1200), confirm(1300), gm-overlay(1500) より下 */
  /* ただし通常時のモーダルより上に表示できるよう 1600 に設定 */
  z-index: 1600;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mobile-nav-overlay.open { display: block; }
.mobile-nav-panel {
  position: absolute; top: var(--header-h); right: 0;
  width: 240px; padding: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 0 0 0 16px;
  border-top: none;
  display: flex; flex-direction: column; gap: 4px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* タップ操作を確実に受け取る */
  pointer-events: auto;
}
.mobile-nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  color: var(--text-secondary); font-size: 14px; font-weight: 600;
  transition: var(--transition);
  /* タップ領域を確保 */
  min-height: 48px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,207,255,0.1);
  user-select: none;
}
.mobile-nav-btn:hover, .mobile-nav-btn:active, .mobile-nav-btn.active {
  background: var(--bg-glass); color: var(--accent);
}
.mobile-nav-btn i { color: var(--accent); width: 18px; text-align: center; font-size: 15px; }

/* ====================================================
   MAP PICKING MODE CURSOR
   ==================================================== */
body.picking-mode #map { cursor: crosshair !important; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 768px) {
  :root { --header-h: 52px; }

  .header-nav { display: none !important; }
  /* mobile-menu-btn は使用しない（menu-dropdown-btn に統一） */
  .mobile-menu-btn { display: none !important; }
  .title-main { font-size: 11px; }
  .title-sub { font-size: 7px; }

  /* ヘッダー幅の節約：モバイルでは lang-code を非表示にして国旗のみ表示 */
  .lang-native { display: none; }
  .lang-sep { display: none; }
  .lang-code { display: none; }
  .lang-btn { min-width: 36px; padding: 0 6px; gap: 0; }

  /* ヘッダーの検索・ブックマークボタンはハンバーガーメニューに統合されるため非表示 */
  #searchToggleBtn { display: none; }
  #bookmarkBtn { display: none; }

  /* header-left を少し縮められるようにする */
  .header-left { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .app-title { overflow: hidden; }
  .title-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .control-bar { flex-wrap: nowrap; gap: 6px; padding: 7px 10px; }
  .filter-group { gap: 6px; }
  .filter-select { min-width: 100px; font-size: 11px; padding: 7px 26px 7px 8px; }

  .map-stats { top: 8px; right: 8px; padding: 5px 10px; }
  .stat-num { font-size: 13px; }
  .stat-label { font-size: 8px; }
  .live-indicator { top: 8px; left: 8px; padding: 5px 10px; }
  .live-time { font-size: 11px; }

  .fab-btn .fab-label { display: none; }
  .fab-btn { padding: 0; width: 44px; height: 44px; border-radius: 12px; justify-content: center; }
  .fab-btn i { font-size: 16px; }

  .map-controls { right: 8px; bottom: 66px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-group.full-width { grid-column: 1; }

  .detail-panel { max-height: 85vh; }

  .routes-header { flex-direction: column; align-items: flex-start; }
  .routes-controls { width: 100%; }
  .routes-search-input { flex: 1; width: auto; }
  .routes-grid { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-stats-row { gap: 16px; }
  .about-stat span { font-size: 24px; }

  .bookmarks-panel { width: 100%; right: -100%; }

  .modal { width: 96vw; }
}

@media (max-width: 400px) {
  .about-grid { grid-template-columns: 1fr; }
  .filter-group { display: none; }
}

/* ====================================================
   LOADING / TRANSITION OVERLAYS
   ==================================================== */
.map-loading-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
  flex-direction: column; gap: 16px;
}
.map-loading-spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-loading-text { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }

/* Animate panel items */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.route-card { animation: fadeInUp 0.3s ease both; }

/* ====================================================
   i18n LANGUAGE PANEL
   ==================================================== */
.lang-panel {
  position: fixed;
  z-index: 2000;
  background: rgba(6,13,31,0.97);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 14px;
  padding: 14px;
  min-width: 240px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(56,189,248,0.08);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.lang-panel-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(56,189,248,0.1);
  margin-bottom: 8px;
}
.lang-panel-divider {
  height: 1px;
  background: rgba(56,189,248,0.1);
  margin: 10px 0;
}
.lang-panel-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
}
.lang-option:hover {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.2);
}
.lang-option.active {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.35);
}
.lang-option-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.lang-option-code {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  min-width: 28px;
  letter-spacing: 0.5px;
  font-family: 'Courier New', monospace;
}
.lang-option-name {
  font-size: 12px;
  color: var(--text-primary);
}
/* Currency selector inside lang panel */
.lang-panel-currencies {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.currency-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(15,28,60,0.7);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 58px;
  justify-content: center;
}
.currency-option:hover {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.3);
  color: var(--text-primary);
}
.currency-option.active {
  background: rgba(56,189,248,0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.currency-sym {
  font-weight: 700;
  font-size: 13px;
}
.currency-code {
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* ====================================================
   PRICE INPUT ROW (currency + value)
   ==================================================== */
.price-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.price-currency-select {
  width: 90px !important;
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 9px 8px !important;
}
.price-value-input {
  flex: 1;
}

/* ====================================================
   ADD ROUTE FLOW MODAL
   ==================================================== */
.flow-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: none; opacity: 0;
  transition: opacity 0.3s;
}
.flow-overlay.open { display: block; opacity: 1; }

.flow-modal {
  position: fixed; z-index: 1200;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(92vw, 560px);
  max-height: 90vh;
  display: none;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 20px;
  box-shadow: var(--shadow-glow), var(--shadow-deep);
  backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.flow-modal.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.flow-step {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
}

.flow-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-dim);
  position: sticky; top: 0;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  z-index: 1;
  flex-shrink: 0;
}
.flow-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.flow-title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-title i { color: var(--accent); }
.flow-subtitle {
  font-size: 11px; color: var(--text-muted);
  text-align: center; width: 100%;
  margin-top: 4px;
}
.flow-close-btn, .flow-back-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-muted); font-size: 14px;
  transition: var(--transition);
  flex-shrink: 0;
}
.flow-close-btn:hover { color: var(--red); background: rgba(248,113,113,0.1); }
.flow-back-btn:hover { color: var(--accent); background: var(--bg-glass); }

.flow-body {
  overflow-y: auto;
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}
.flow-form-body {
  padding: 14px 20px;
}

.flow-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}

/* Flow option cards */
.flow-option-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}
.flow-option-card:hover {
  border-color: var(--border-glow);
  background: rgba(0,207,255,0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,207,255,0.12);
}
.flow-option-search-card { cursor: default; }
.flow-option-search-card:hover { transform: none; }

.flow-option-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  flex-shrink: 0;
}
.flow-icon-locate { background: rgba(0,207,255,0.12); color: var(--accent); border: 1px solid rgba(0,207,255,0.25); }
.flow-icon-search { background: rgba(30,230,180,0.12); color: var(--green); border: 1px solid rgba(30,230,180,0.25); }
.flow-icon-globe  { background: rgba(176,136,255,0.12); color: var(--purple); border: 1px solid rgba(176,136,255,0.25); }

.flow-option-text { flex: 1; min-width: 0; }
.flow-option-text h3 {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 2px;
}
.flow-option-text p {
  font-size: 11px; color: var(--text-muted);
}
.flow-option-arrow { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }

/* Flow search input */
.flow-search-input-wrap { position: relative; margin-top: 8px; }
.flow-search-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 12px;
  transition: var(--transition);
}
.flow-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
}
.flow-address-suggestions {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  z-index: 500;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  max-height: 160px;
  overflow-y: auto;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Selected location card */
.flow-selected-location {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(0,207,255,0.08);
  border: 1px solid rgba(0,207,255,0.3);
  border-radius: 10px;
  margin-top: 4px;
}
.flow-selected-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,207,255,0.15);
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.flow-selected-info { flex: 1; min-width: 0; }
.flow-selected-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-selected-coords {
  font-size: 11px; color: var(--text-muted);
  font-family: 'Courier New', monospace;
}
.flow-selected-clear {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px;
  transition: var(--transition);
  flex-shrink: 0;
}
.flow-selected-clear:hover { color: var(--red); background: rgba(248,113,113,0.1); }

/* ====================================================
   CATEGORY TOGGLE BUTTONS
   ==================================================== */
.category-toggles {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.cat-toggle:hover {
  border-color: var(--border-glow);
  color: var(--accent);
  background: var(--bg-glass);
}
.cat-toggle.active {
  background: rgba(0,207,255,0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0,207,255,0.2);
}
.cat-toggle .cat-icon { font-size: 14px; }

/* ====================================================
   DEPARTURE / ARRIVAL DISPLAY in Detail Panel
   ==================================================== */
.detail-route-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-dim);
  flex-wrap: wrap;
}
.detail-route-point {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 100px;
}
.detail-route-point i {
  font-size: 14px;
  flex-shrink: 0;
}
.detail-route-point.departure i { color: var(--green); }
.detail-route-point.arrival   i { color: var(--orange); }
.detail-route-label {
  display: block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
}
.detail-route-name {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.detail-route-arrow {
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ====================================================
   COORDS GROUP (bottom of form)
   #3 FIX: Hide manual lat/lng inputs — auto-filled by address/map pick
   ==================================================== */
.coords-group {
  /* Hidden from user — coordinates are auto-set via address geocoding or map pick */
  display: none !important;
}
.coords-hint {
  display: none !important;
}
.coords-auto-label {
  font-size: 10px; color: var(--text-dim);
  font-style: italic;
}

/* ====================================================
   FORM GRID for flow form (single column on small, 2 on large)
   ==================================================== */
.flow-form-body .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.flow-form-body .form-group.full-width { grid-column: 1 / -1; }
.flow-form-body .coords-group { grid-column: span 1; }

/* Direct form-group in flow form body (no grid wrapper) */
.flow-form-body form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.flow-form-body form .form-group { /* default span 1 */ }
.flow-form-body form .form-group.full-width { grid-column: 1 / -1; }
.flow-form-body form .coords-group { grid-column: span 1; }
.flow-form-body form .coords-hint { grid-column: 1 / -1; }

/* ====================================================
   GOOGLE MAPS BTN active state
   ==================================================== */
#googleMapsBtn.active { color: #4285F4; border-color: rgba(66,133,244,0.5); }

/* ====================================================
   PICKING MODE HINT OVERLAY
   ==================================================== */
.picking-hint {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  background: rgba(0,207,255,0.18);
  border: 1px solid var(--accent);
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0,207,255,0.25);
  display: none;
  white-space: nowrap;
  pointer-events: none;
}
body.picking-mode .picking-hint { display: block; }

/* ====================================================
   MOBILE adjustments for flow
   ==================================================== */
@media (max-width: 600px) {
  /* ボトムシート形式: 画面下部からスライドアップ */
  .flow-modal {
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateY(105%) !important;
    opacity: 1 !important; /* モバイルではopacityではなくtransformでアニメーション */
    border-radius: 18px 18px 0 0 !important;
    max-height: 94vh !important;
    min-height: 0 !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* padding-bottom: env() でホームバーを避ける */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6), 0 -2px 0 rgba(56,189,248,0.3) !important;
  }
  /* ドラッグハンドル */
  .flow-modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .flow-modal.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* flow-step: スクロール可能な縦レイアウト */
  .flow-step {
    display: flex;
    flex-direction: column;
    max-height: 94vh;
    overflow: hidden;
  }

  /* ヘッダー: コンパクト */
  .flow-header {
    padding: 10px 14px 8px;
    flex-shrink: 0;
  }
  .flow-title { font-size: 14px; gap: 6px; white-space: nowrap; overflow: hidden; }
  .flow-subtitle { font-size: 10px; }

  /* スクロール可能なbody */
  .flow-body {
    padding: 10px 12px;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Step2のフォームbody */
  .flow-form-body {
    padding: 8px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* フッター: ホームバー対応 */
  .flow-footer {
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
  }

  /* ボタン幅 100% */
  .flow-footer .btn-primary,
  .flow-footer .btn-secondary {
    flex: 1;
    justify-content: center;
    min-height: 42px;
    font-size: 13px;
  }

  /* オプションカード */
  .flow-option-card {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 10px;
  }
  .flow-option-icon {
    width: 38px; height: 38px;
    font-size: 16px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .flow-option-text h3 { font-size: 13px; }
  .flow-option-text p  { font-size: 11px; }

  /* Step2 フォーム: 1カラム強制 */
  .flow-form-body form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .flow-form-body form .form-group { width: 100% !important; }
  .flow-form-body form .form-group.full-width { width: 100% !important; }
  .flow-form-body form .coords-group { width: 100% !important; }
  .flow-form-body form .coords-hint { width: 100% !important; }
  .flow-form-body .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* price-input-row モバイル対応 */
  .price-input-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .price-currency-select { min-width: 90px; flex-shrink: 0; }
  .price-value-input { flex: 1; min-width: 120px; }

  /* フロー選択済みロケーション */
  .flow-selected-location { padding: 10px 12px; }
  .flow-selected-name { font-size: 12px; }

  /* アドレスサジェスト */
  .flow-address-suggestions { max-height: 130px; }

  /* カテゴリトグル */
  .category-toggles { gap: 6px; }
  .cat-toggle { padding: 6px 12px; font-size: 11px; }

  /* フォームinput高さ最小化 */
  .flow-form-body .form-input { font-size: 16px; } /* iOS zoom防止: 16px未満だとzoomする */
  .flow-form-body select.form-input { font-size: 16px; }
  .flow-form-body .form-textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   FORM MEDIA HERO — prominent image / video preview at top of form
   ══════════════════════════════════════════════════════════════ */

.form-media-hero {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

/* Image hero */
.form-media-hero-image {
  position: relative;
  width: 100%;
  max-height: 220px;
  overflow: hidden;
}
.form-media-hero-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Video hero */
.form-media-hero-video {
  position: relative;
  width: 100%;
}
.form-media-hero-youtube {
  width: 100%;
  background: #000;
}
.form-media-hero-youtube iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

/* Shared label overlay */
.form-media-hero-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.6);
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.form-media-hero-label-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  justify-content: space-between;
}

/* Close button inside video hero */
.form-media-hero-close {
  background: none;
  border: none;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.form-media-hero-close:hover { opacity: 1; }

/* Mobile: constrain hero height */
@media (max-width: 600px) {
  .form-media-hero-image img { height: 160px; }
  .form-media-hero-image { max-height: 160px; }
}

/* ══════════════════════════════════════════════════════════════
   GPS PERMISSION DIALOG
   ══════════════════════════════════════════════════════════════ */

/* Overlay */
.geo-perm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Card container */
#geoPermDialog {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#geoPermDialog.geo-perm-open  { pointer-events: auto; }
#geoPermDialog.geo-perm-open  .geo-perm-overlay { opacity: 1; }
#geoPermDialog.geo-perm-closing .geo-perm-overlay { opacity: 0; }

.geo-perm-card {
  position: relative;
  z-index: 2002;
  background: linear-gradient(145deg, #0f1729 0%, #0a1020 100%);
  border: 1px solid rgba(30, 230, 180, 0.25);
  border-radius: 20px;
  padding: 32px 28px 24px;
  width: min(380px, calc(100vw - 32px));
  box-shadow:
    0 0 0 1px rgba(30, 230, 180, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(30, 230, 180, 0.06);
  text-align: center;
  transform: scale(0.88) translateY(16px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity   0.22s ease;
}
#geoPermDialog.geo-perm-open .geo-perm-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
#geoPermDialog.geo-perm-closing .geo-perm-card {
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition-timing-function: ease-in;
  transition-duration: 0.22s;
}

/* Icon ring */
.geo-perm-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.geo-perm-icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(30, 230, 180, 0.1);
  border: 2px solid rgba(30, 230, 180, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(30, 230, 180, 0.2);
  animation: geo-perm-pulse 2.4s ease-in-out infinite;
}
@keyframes geo-perm-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(30, 230, 180, 0.18); }
  50%       { box-shadow: 0 0 32px rgba(30, 230, 180, 0.38); }
}
.geo-perm-icon {
  font-size: 28px;
  color: var(--accent, #1EE6B4);
}

/* Denied state */
.geo-perm-icon-ring-denied {
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.35);
  box-shadow: 0 0 24px rgba(255, 107, 107, 0.2);
  animation: none;
}
.geo-perm-icon-denied { color: #FF6B6B; }

/* Text */
.geo-perm-title {
  font-size: 18px;
  font-weight: 700;
  color: #EEF4FF;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.geo-perm-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 6px;
}
.geo-perm-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  font-size: 11.5px;
  color: #7dd3fc;
  text-align: left;
  line-height: 1.5;
}

/* Buttons */
.geo-perm-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.geo-perm-actions-single {
  justify-content: center;
}
.geo-perm-btn-deny {
  flex: 1;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
}
.geo-perm-btn-allow {
  flex: 2;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  gap: 6px;
}

/* Flow option card — loading state */
.flow-option-card.flow-option-loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
}
.flow-option-card.flow-option-loading .flow-option-icon {
  animation: geo-perm-pulse 1.2s ease-in-out infinite;
}

/* Mobile */
@media (max-width: 480px) {
  .geo-perm-card {
    padding: 24px 20px 20px;
    border-radius: 16px;
  }
  .geo-perm-title { font-size: 16px; }
  .geo-perm-body  { font-size: 13px; }
  .geo-perm-icon-ring { width: 60px; height: 60px; }
  .geo-perm-icon { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   GOOGLE MAPS OVERLAY  —  Full-screen embed with sticky Back bar
   ══════════════════════════════════════════════════════════════ */

/* ── Full-screen container ── */
.gm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;   /* header(1000) / modal(1100) / confirm(1300) より上 */
  display: flex;
  flex-direction: column;
  background: #030712;
  /* ノッチ・ホームバー対応 */
  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* Slide-in animation */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity  0.25s ease,
    transform 0.25s ease;
}
.gm-overlay.gm-overlay-open {
  opacity: 1;
  transform: translateY(0);
}
.gm-overlay.gm-overlay-closing {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: 0.22s;
  transition-timing-function: ease-in;
}

/* ── Sticky Back bar ── */
.gm-back-bar {
  position: relative;
  z-index: 10;  /* gm-overlay 内の相対値、変更不要 */
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  /* セーフエリア(ノッチ/ステータスバー)対応 */
  padding: env(safe-area-inset-top, 0px) 12px 0;
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
  padding-bottom: 12px;
  background: rgba(2, 6, 18, 0.97);
  border-bottom: 1px solid rgba(66, 133, 244, 0.3);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  /* slide-down from bar itself */
  animation: gm-bar-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gm-bar-in {
  from { transform: translateY(-100%); opacity: 0.4; }
  to   { transform: translateY(0);     opacity: 1;   }
}

/* ── Back button ── */
.gm-back-btn {
  /* Reset */
  appearance: none;
  border: none;
  cursor: pointer;
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Size — large tap target */
  min-height: 44px;
  padding: 8px 18px 8px 12px;
  /* Colours — Google Blue accent */
  background: rgba(66, 133, 244, 0.14);
  border: 1.5px solid rgba(66, 133, 244, 0.45);
  border-radius: 10px;
  color: #5ba3ff;
  /* Text */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Animation */
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.gm-back-btn:hover,
.gm-back-btn:focus-visible {
  background: rgba(66, 133, 244, 0.28);
  border-color: rgba(66, 133, 244, 0.8);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
  outline: none;
}
.gm-back-btn:active {
  transform: scale(0.96);
}

/* Arrow icon */
.gm-back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(66, 133, 244, 0.2);
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.gm-back-btn:hover .gm-back-arrow,
.gm-back-btn:focus-visible .gm-back-arrow {
  background: rgba(66, 133, 244, 0.4);
}
.gm-back-label {
  font-size: 14px;
}

/* ── Centre label ── */
.gm-bar-title {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
.gm-google-icon {
  font-size: 17px;
  color: #4285F4;
}
.gm-bar-name {
  font-size: 14px;
  font-weight: 700;
  color: #EEF4FF;
  letter-spacing: 0.02em;
}

/* ── Right subtitle hint ── */
.gm-bar-hint {
  font-size: 11px;
  color: rgba(66, 133, 244, 0.6);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── iframe ── */
.gm-iframe {
  flex: 1;
  border: none;
  width: 100%;
  display: block;
}

/* ── Mobile: wider back button, hide hint ── */
@media (max-width: 600px) {
  .gm-back-bar {
    grid-template-columns: auto 1fr;
    padding: 0 10px;
    gap: 8px;
  }
  .gm-bar-hint { display: none; }
  .gm-bar-title { justify-content: flex-end; }
  .gm-back-btn {
    padding: 8px 14px 8px 10px;
    font-size: 13px;
  }
  .gm-back-label { font-size: 13px; }
}

/* ── Very small screens ── */
@media (max-width: 360px) {
  .gm-bar-title { display: none; }
  .gm-back-bar  { grid-template-columns: 1fr; }
  .gm-back-btn  { width: 100%; justify-content: center; }
}

/* ====================================================
   PICK PIN MARKER — 地図上の一時ピン (#21)
   ==================================================== */
.pick-pin-marker {
  position: relative;
  width: 36px;
  height: 44px;
  pointer-events: none;
}
.pick-pin-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00cfff 0%, #0080ff 100%);
  border: 2.5px solid rgba(255,255,255,0.9);
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 4px 16px rgba(0,207,255,0.6);
}
.pick-pin-icon i {
  transform: rotate(45deg);
  color: #fff;
  font-size: 14px;
}
.pick-pin-pulse {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0,207,255,0.5);
  animation: pick-pin-pulse 1.4s ease-out infinite;
}
@keyframes pick-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,207,255,0.5);  opacity: 0.8; }
  100% { box-shadow: 0 0 0 16px rgba(0,207,255,0); opacity: 0; }
}

/* ====================================================
   SEARCH RESULT PIN — 検索結果の一時ピン
   ==================================================== */
.search-pin-marker {
  position: relative;
  width: 40px;
  height: 52px;
  pointer-events: none;
  /* 入場アニメーション */
  animation: search-pin-drop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes search-pin-drop {
  from { transform: translateY(-18px) scale(0.7); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}
.search-pin-icon {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 34px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  border: 2.5px solid rgba(255,255,255,0.95);
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 4px 18px rgba(239,68,68,0.55), 0 2px 6px rgba(0,0,0,0.25);
}
.search-pin-icon i {
  transform: rotate(45deg);
  color: #fff;
  font-size: 14px;
}
.search-pin-pulse {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.55);
  animation: search-pin-pulse-anim 1.5s ease-out infinite;
}
@keyframes search-pin-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); opacity: 1; }
  100% { box-shadow: 0 0 0 20px rgba(239,68,68,0); opacity: 0; }
}
.search-pin-label {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(15,15,20,0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.search-pin-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15,15,20,0.88);
}

/* ====================================================
   DISCARD POST BUTTON — 投稿破棄 (#22)
   ==================================================== */
.btn-danger-outline {
  appearance: none;
  border: 1.5px solid rgba(255, 100, 100, 0.45);
  background: rgba(255, 80, 80, 0.08);
  color: #ff7a7a;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.btn-danger-outline:hover,
.btn-danger-outline:focus-visible {
  background: rgba(255, 80, 80, 0.18);
  border-color: rgba(255, 100, 100, 0.75);
  color: #ffaaaa;
  outline: none;
}
.btn-danger-outline:active {
  transform: scale(0.97);
}

/* ====================================================
   LOCATION BLOCK — Departure/Arrival 直下の区切り (#23)
   ==================================================== */
.location-block {
  border-left: 2px solid rgba(0, 207, 255, 0.2);
  padding-left: 10px;
  margin-left: 2px;
}

/* ====================================================
   MEDIA INPUT — Upload / URL / YouTube  (#13)
   ==================================================== */

/* タブバー */
.media-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 4px;
}
.media-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.media-tab i { font-size: 11px; }
.media-tab:hover { color: var(--text-primary); background: rgba(0, 207, 255, 0.06); }
.media-tab.active {
  background: rgba(0, 207, 255, 0.12);
  color: var(--accent);
  border: 1px solid rgba(0, 207, 255, 0.25);
}

/* タブパネル共通 */
.media-tab-panel { width: 100%; }

/* Upload ゾーン */
.media-upload-zone {
  background: var(--bg-input);
  border: 1.5px dashed var(--border-dim);
  border-radius: 8px;
  padding: 24px 16px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.media-upload-zone:hover,
.media-upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(0, 207, 255, 0.04);
}
.media-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  pointer-events: none;
}
.media-upload-placeholder i {
  font-size: 24px;
  color: var(--accent);
  opacity: 0.6;
}
.media-upload-placeholder span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.media-upload-placeholder small {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.media-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 120px;
}
.media-upload-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
.media-upload-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.media-upload-clear:hover { background: rgba(220,50,50,0.8); }

/* URL タブのプレビュー */
.media-url-preview { margin-top: 8px; display: none; }
.media-url-preview img {
  max-width: 100%;
  max-height: 160px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

/* YouTube タブ */
.media-yt-preview { margin-top: 8px; }
.media-yt-thumb { width: 100%; border-radius: 8px; overflow: hidden; }
.media-yt-thumb-inner {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.media-yt-thumb-inner img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.media-yt-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}
.media-yt-play-btn i {
  font-size: 36px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: transform 0.15s;
}
.media-yt-thumb-inner:hover .media-yt-play-btn i { transform: scale(1.15); }
.media-yt-tap-hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.media-yt-iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border-radius: 8px;
  border: none;
}

/* モバイル調整 */
@media (max-width: 480px) {
  .media-tab { font-size: 10px; padding: 6px 4px; gap: 3px; }
  .media-tab i { font-size: 10px; }
  .media-upload-zone { padding: 20px 12px; }
}

/* =====================================================
   GLOBE PICK OVERLAY — Phase C
   Gemini-style centered target location picker
   ===================================================== */

/* フルスクリーンオーバーレイ本体
   地図の上に重なるが、中央エリアは pointer-events:none で地図操作を通過させる */
#globePickOverlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* 全体はデフォルト通過。子要素のみ pointer-events:auto */
}

/* ── 上部バー ── */
.gpo-header {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  background: rgba(3, 7, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 207, 255, 0.18);
  flex-shrink: 0;
}
.gpo-cancel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(0, 207, 255, 0.3);
  color: var(--accent, #00cfff);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.gpo-cancel-btn:hover {
  background: rgba(0, 207, 255, 0.12);
  border-color: rgba(0, 207, 255, 0.6);
}
.gpo-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #EEF4FF;
  letter-spacing: 0.5px;
}
.gpo-header-spacer {
  /* キャンセルボタンと対称にするためのスペーサー */
  width: 90px;
  flex-shrink: 0;
}

/* ── 中央エリア（ターゲット）── */
.gpo-target-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 地図の操作を通過させる */
  position: relative;
}
.gpo-target {
  position: relative;
  width: 56px;
  height: 56px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 207, 255, 0.7));
}
/* 水平ライン */
.gpo-target-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 207, 255, 0.9);
  border-radius: 2px;
}
/* 垂直ライン */
.gpo-target-v {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(0, 207, 255, 0.9);
  border-radius: 2px;
}
/* 中央ドット */
.gpo-target-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #00cfff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(3, 7, 18, 0.9), 0 0 10px rgba(0, 207, 255, 0.8);
}
/* 外周リング */
.gpo-target-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 207, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: gpoRingPulse 2s ease-in-out infinite;
}
@keyframes gpoRingPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.1); }
}

/* ── 下部フッター ── */
.gpo-footer {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: rgba(3, 7, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0, 207, 255, 0.18);
  flex-shrink: 0;
}
.gpo-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(238, 244, 255, 0.65);
  text-align: center;
}
.gpo-coords {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 207, 255, 0.9);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  min-height: 18px;
}
.gpo-confirm-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #00cfff 0%, #0080ff 100%);
  border: none;
  border-radius: 26px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 36px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 207, 255, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.3px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.gpo-confirm-btn:hover  { box-shadow: 0 6px 28px rgba(0, 207, 255, 0.6); transform: translateY(-1px); }
.gpo-confirm-btn:active { transform: scale(0.97); }

/* =====================================================
   SNS SHARE BAR — Phase D
   詳細パネルのフッター直上に配置
   ===================================================== */
.detail-sns-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}
.detail-sns-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(238, 244, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  margin-right: 2px;
}
.sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  text-decoration: none;
  flex-shrink: 0;
  color: #fff;
}
.sns-btn:hover  { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.sns-btn:active { transform: scale(0.93); opacity: 0.85; }

/* 各SNSカラー */
.sns-x       { background: #000000; }
.sns-line     { background: #06C755; }
.sns-instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%,
    #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.sns-whatsapp { background: #25D366; }
.sns-gmail    { background: #EA4335; }
.sns-copy     {
  background: rgba(0, 207, 255, 0.15);
  border: 1px solid rgba(0, 207, 255, 0.4);
  color: var(--accent, #00cfff);
  font-size: 14px;
}
.sns-copy:hover { background: rgba(0, 207, 255, 0.28); }

/* =====================================================
   DETAIL PANEL — EDIT/CREATE MODE (dp- prefix)
   ===================================================== */

/* ── Edit mode header ── */
.dp-edit-header {
  justify-content: space-between;
}
.dp-edit-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  flex: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 8px;
}
.dp-save-btn {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.dp-save-btn:hover { background: rgba(0,207,255,0.12) !important; }

/* ── Shared inline editable field (title-sized) ── */
.dp-edit-field {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border-glow);
  border-radius: 0;
  padding: 4px 2px;
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.dp-edit-field:focus { border-bottom-color: var(--accent); }

/* Title as editable input */
input.detail-title.dp-edit-field {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.3px; line-height: 1.2;
  margin-bottom: 12px;
  height: auto;
}

/* ── Media edit overlay ── */
.dp-media-edit-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #fff;
  font-size: 13px; font-weight: 600;
  opacity: 0;
  transition: opacity 0.22s;
}
.detail-media:hover .dp-media-edit-overlay { opacity: 1; }
.dp-media-edit-overlay i { font-size: 22px; color: var(--accent); }

/* Media placeholder (when no media in edit mode) */
.dp-media-placeholder {
  height: 140px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  cursor: pointer;
  background: var(--bg-glass);
  border: 2px dashed var(--border-glow);
  border-top: none; border-bottom: 1px solid var(--border-dim);
  color: var(--text-muted);
  font-size: 13px;
  transition: var(--transition);
}
.dp-media-placeholder:hover { background: rgba(0,207,255,0.07); border-color: var(--accent); color: var(--accent); }
.dp-media-placeholder i { font-size: 28px; }

/* Media picker panel */
.dp-media-picker {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-dim);
  padding: 0 0 12px;
}
.dp-media-picker .media-tab-bar {
  display: flex; align-items: center;
  padding: 8px 16px 6px;
  border-bottom: 1px solid var(--border-dim);
  gap: 4px;
}
.dp-media-picker-close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--text-muted); font-size: 13px;
  transition: var(--transition);
}
.dp-media-picker-close:hover { color: var(--red); background: rgba(248,113,113,0.1); }
.dp-media-picker-body {
  padding: 10px 16px 0;
}
.dp-media-picker .media-upload-zone { min-height: 90px; }

/* ── Category grid (edit mode) ── */
.dp-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.dp-cat-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  padding: 10px 4px;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-dim);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.dp-cat-btn:hover { border-color: var(--border-glow); color: var(--text-primary); }
.dp-cat-btn.active {
  border-color: var(--accent);
  background: rgba(0,207,255,0.10);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0,207,255,0.15);
}
.dp-cat-icon { font-size: 22px; line-height: 1; }

/* ── Transport type pills ── */
.dp-transport-row {
  margin-bottom: 14px;
}
.dp-section-label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 7px;
}
.dp-transport-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dp-transport-pill {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-dim);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; gap: 4px;
}
.dp-transport-pill:hover { border-color: var(--border-glow); color: var(--text-primary); }
.dp-transport-pill.active {
  border-color: var(--accent);
  background: rgba(0,207,255,0.10);
  color: var(--accent);
}

/* ── Route edit row ── */
.dp-route-edit-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.dp-route-edit-field {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  padding: 6px 12px;
  transition: var(--transition);
}
.dp-route-edit-field:focus-within { border-color: var(--border-glow); }
.dp-route-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  font-family: inherit;
}
.dp-route-input::placeholder { color: var(--text-dim); }
.dp-route-arrow {
  color: var(--text-dim); font-size: 14px; flex-shrink: 0;
}

/* ── Address row ── */
.dp-address-row {
  margin-bottom: 10px;
}
.dp-address-wrap {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 8px 12px;
  transition: var(--transition);
  position: relative;
}
.dp-address-wrap:focus-within { border-color: var(--border-glow); }
.dp-address-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
}
.dp-address-input::placeholder { color: var(--text-dim); }
.dp-pin-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--border-dim);
  color: var(--text-muted); font-size: 12px;
  background: var(--bg-glass);
  transition: var(--transition); cursor: pointer;
}
.dp-pin-btn:hover { color: var(--accent); border-color: var(--border-glow); }

/* Coords edit row */
.dp-coords-edit-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 14px;
  font-family: 'Courier New', monospace;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 6px 10px;
}
.dp-coords-edit-row i { color: var(--text-muted); font-size: 10px; }
.dp-coord-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 11px;
  font-family: 'Courier New', monospace;
  min-width: 0;
  -moz-appearance: textfield;
}
.dp-coord-input::-webkit-outer-spin-button,
.dp-coord-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Edit info grid inputs ── */
.dp-edit-info-grid .detail-info-item { align-items: flex-start; }
.dp-info-select {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border-dim);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  font-family: inherit; outline: none; cursor: pointer;
  padding: 2px 0;
  -webkit-appearance: none; appearance: none;
}
.dp-info-select option { background: var(--bg-secondary); }
.dp-info-input {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border-dim);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  font-family: inherit; outline: none;
  padding: 2px 0;
}
.dp-price-row { display: flex; gap: 4px; }
.dp-currency-select { flex: 0 0 auto; width: auto; }

/* Description textarea (edit) */
.dp-desc-textarea {
  width: 100%; resize: none; overflow: hidden;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.65;
  font-family: inherit;
  border-color: rgba(0,207,255,0.15);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 14px;
}
.dp-desc-textarea:focus { border-color: var(--border-glow); outline: none; }

/* ── Tags edit ── */
.dp-tags-edit {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.dp-tags-pills { display: contents; }
.dp-editable-tag {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px 3px 10px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 12px;
  color: var(--accent);
}
.dp-tag-remove {
  cursor: pointer; font-size: 10px;
  color: var(--text-muted); padding: 0 1px;
  transition: var(--transition);
}
.dp-tag-remove:hover { color: var(--red); }
.dp-tag-input {
  background: transparent;
  border: none; border-bottom: 1px dashed var(--border-glow);
  color: var(--text-primary); font-size: 11px;
  padding: 2px 4px; outline: none; width: 100px;
  font-family: inherit;
}

/* ── Caution edit ── */
.dp-caution-edit {
  display: flex !important;
  align-items: center;
}
.dp-caution-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #FCA97C; font-size: 12px; font-family: inherit; line-height: 1.5;
}
.dp-caution-input::placeholder { color: rgba(252,169,124,0.45); }

/* ── Edit / Create footer ── */
.dp-edit-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
  gap: 10px;
}
.dp-discard-btn {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border-dim);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  background: transparent; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; gap: 6px;
}
.dp-discard-btn:hover { color: var(--red); border-color: var(--red); background: rgba(255,107,107,0.07); }
.dp-submit-btn {
  flex: 1; padding: 10px 20px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, #0090cc 100%);
  color: #001a2e; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 0 18px rgba(0,207,255,0.35);
  transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 7px;
}
.dp-submit-btn:hover { box-shadow: 0 0 28px rgba(0,207,255,0.55); transform: translateY(-1px); }
.dp-submit-btn:active { transform: scale(0.97); }

/* ── Responsive ── */
@media (max-width: 767px) {
  .dp-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .dp-cat-btn { padding: 8px 2px; font-size: 10px; }
  .dp-cat-icon { font-size: 20px; }
}

/* ================================================================
   AUTH MODAL
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 9000; backdrop-filter: blur(4px);
}
.auth-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9001; width: 90%; max-width: 420px;
  background: var(--panel-bg, #0F172A); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 32px 28px; box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.auth-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-dim, #94A3B8);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  transition: color .2s;
}
.auth-modal-close:hover { color: #fff; }
.auth-modal-logo {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent, #38BDF8); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; margin-bottom: 16px;
}
.auth-modal-logo i { font-size: 20px; }
.auth-modal-title {
  font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px;
}
.auth-modal-sub {
  font-size: 13px; color: var(--text-dim, #94A3B8); margin: 0 0 24px;
}
.auth-social-btns { display: flex; flex-direction: column; gap: 10px; }
.auth-social-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .2s, border-color .2s; width: 100%;
  text-align: left; position: relative;
}
.auth-social-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.auth-google:hover { border-color: #4285F440; background: #4285F410; }
.auth-twitter:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.auth-line:hover { border-color: #06C75540; background: #06C75510; }
.auth-social-btn span:first-of-type { flex: 1; }
.auth-social-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: rgba(250,204,21,.15); color: #FBBF24;
  border: 1px solid rgba(250,204,21,.3); white-space: nowrap;
}
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--text-dim, #94A3B8); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1);
}
.auth-email-form { display: flex; flex-direction: column; gap: 10px; }
.auth-input {
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #fff; font-size: 14px; outline: none;
  transition: border-color .2s;
}
.auth-input:focus { border-color: var(--accent, #38BDF8); }
.auth-input::placeholder { color: var(--text-dim, #94A3B8); }
.auth-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 10px; background: var(--accent, #38BDF8);
  color: #030712; font-size: 14px; font-weight: 700; border: none;
  cursor: pointer; transition: opacity .2s;
}
.auth-submit-btn:hover { opacity: .85; }
.auth-terms {
  font-size: 11px; color: var(--text-dim, #94A3B8); text-align: center;
  margin: 12px 0 0;
}
.auth-submit-btn:disabled {
  opacity: .6; cursor: not-allowed;
}

/* Auth notice (when OAuth not configured) */
.auth-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2);
  color: #FACC15; font-size: 12px; margin: 4px 0 8px;
}
/* OAuth notice is permanently hidden */
#authOAuthNotice {
  display: none !important;
}

/* Google GSI button wrapper */
#googleSignInArea {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
#googleSignInBtn { min-height: 44px; }
#googleSignInBtn iframe { border-radius: 10px !important; }

/* Auth nav button with avatar */
.auth-nav-btn { position: relative; }
.auth-nav-btn img.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--accent, #38BDF8);
}
.auth-nav-btn .nav-badge {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E; border: 1px solid var(--panel-bg, #0F172A);
}

/* User menu popup */
.user-menu-popup {
  position: fixed; top: 60px; right: 12px; z-index: 8500;
  background: var(--panel-bg, #0F172A); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 4px; min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.user-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.user-menu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--accent, #38BDF8);
  background: rgba(255,255,255,.1);
}
.user-menu-name { font-size: 14px; font-weight: 600; color: #fff; }
.user-menu-plan {
  font-size: 11px; color: var(--accent, #38BDF8);
  display: flex; align-items: center; gap: 4px;
}
.user-menu-items { padding: 6px 4px; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: none; border: none; color: #fff; font-size: 13px;
  cursor: pointer; transition: background .15s;
}
.user-menu-item:hover { background: rgba(255,255,255,.08); }
.user-menu-item i { width: 16px; color: var(--text-dim, #94A3B8); }
.user-menu-danger { color: #FF6B6B !important; }
.user-menu-danger i { color: #FF6B6B !important; }

/* ================================================================
   PREMIUM MODAL  — fully self-contained (no .modal-overlay conflict)
   ================================================================ */
/* Overlay: uses dedicated class .premium-overlay */
.premium-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 9000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.premium-overlay.is-open { display: block; }

/* Modal container */
.premium-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9001;
  width: min(92vw, 420px);
  max-height: min(88vh, 660px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, #0F172A 0%, #1a1040 100%);
  border: 1px solid rgba(250,204,21,.3);
  border-radius: 20px;
  padding: 40px 24px 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 60px rgba(250,204,21,.08);
  text-align: center;
  box-sizing: border-box;
}
.premium-modal.is-open { display: block; }

/* Close button — positioned relative to modal */
.premium-close-btn {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 18px; cursor: pointer; padding: 6px 8px;
  transition: color .2s; line-height: 1;
  z-index: 1;
}
.premium-close-btn:hover { color: #fff; }

/* small phones: push to top so CTA is visible */
@media (max-height: 700px) {
  .premium-modal {
    top: 2%;
    transform: translateX(-50%);
    max-height: 96vh;
  }
}
@media (max-width: 380px) {
  .premium-modal {
    width: 96vw;
    padding: 38px 16px 24px;
  }
}
.premium-header { margin-bottom: 20px; }
.premium-crown { font-size: 40px; color: #FACC15; margin-bottom: 10px; display: block; }
.premium-header h2 {
  font-size: 18px; font-weight: 800; color: #fff;
  margin: 0 0 8px; word-break: break-word; line-height: 1.3;
}
.premium-header p {
  font-size: 13px; color: var(--text-dim, #94A3B8);
  margin: 0; line-height: 1.5;
}
.premium-features {
  text-align: left; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.premium-feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.5;
}
.premium-feature i { color: #22C55E; font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.premium-price {
  margin-bottom: 16px;
  display: flex; align-items: baseline; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.premium-amount { font-size: 36px; font-weight: 800; color: #FACC15; line-height: 1; }
.premium-period { font-size: 14px; color: var(--text-dim, #94A3B8); }
.premium-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #FACC15, #F59E0B);
  color: #030712; font-size: 14px; font-weight: 800;
  border: none; cursor: pointer; transition: opacity .2s;
  margin-bottom: 12px;
  word-break: break-word; white-space: normal;
  box-sizing: border-box; line-height: 1.4;
}
.premium-cta-btn:hover { opacity: .88; }
.premium-note {
  font-size: 11px; color: var(--text-dim, #94A3B8);
  margin: 0; line-height: 1.5;
}
/* Premium pin lock overlay */
.pin-premium-locked {
  position: relative; cursor: pointer;
}
.pin-premium-badge {
  background: linear-gradient(135deg, #FACC15, #F59E0B);
  color: #030712; font-size: 9px; font-weight: 800;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap;
}

/* ================================================================
   ADMIN PANEL  — Sidebar Layout
   ================================================================ */

/* Admin nav button in header */
.signup-nav-btn {
  color: var(--accent, #38BDF8) !important;
  position: relative;
}
.signup-nav-btn::after {
  content: 'JOIN';
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-size: 6px; font-weight: 800; letter-spacing: .05em;
  color: var(--accent, #38BDF8); white-space: nowrap;
}
@media (max-width: 640px) {
  .signup-nav-btn { display: none !important; }
}

.admin-nav-btn {
  color: var(--accent, #38BDF8) !important;
  position: relative;
}
.admin-nav-btn::after {
  content: 'ADMIN';
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-size: 6px; font-weight: 800; letter-spacing: .05em;
  color: var(--accent, #38BDF8); white-space: nowrap;
}

/* Overlay */
.admin-overlay {
  position: fixed; inset: 0; z-index: 9099;
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
}

/* Panel: full-screen flex row */
.admin-panel {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; flex-direction: row;
  background: transparent;
  pointer-events: none;
}
.admin-panel > * { pointer-events: all; }

/* ── Sidebar ── */
.admin-sidebar {
  width: 220px; flex-shrink: 0;
  background: #080E1D;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  padding: 0;
}
@media (max-width: 600px) { .admin-sidebar { width: 64px; } }

.admin-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.admin-logo i { color: var(--accent, #38BDF8); font-size: 18px; }
@media (max-width: 600px) { .admin-logo span { display: none; } }

.admin-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }

.admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: none; border: none; color: var(--text-dim, #94A3B8);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .2s; width: 100%; text-align: left;
  position: relative;
}
.admin-nav-item i { font-size: 15px; min-width: 18px; text-align: center; }
.admin-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav-item.active { background: rgba(56,189,248,.12); color: var(--accent, #38BDF8); }
@media (max-width: 600px) { .admin-nav-item span:not(.admin-nav-badge) { display: none; } }

.admin-nav-badge {
  margin-left: auto; background: rgba(56,189,248,.2); color: var(--accent, #38BDF8);
  padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
@media (max-width: 600px) { .admin-nav-badge { display: none; } }

.admin-sidebar-home {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 8px 4px; padding: 11px 12px; border-radius: 10px;
  background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.25);
  color: var(--accent, #38BDF8); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s; width: calc(100% - 16px);
}
.admin-sidebar-home i { font-size: 15px; min-width: 18px; text-align: center; }
.admin-sidebar-home:hover { background: rgba(56,189,248,.2); color: #fff; }
@media (max-width: 600px) { .admin-sidebar-home span { display: none; } }

.admin-sidebar-close {
  display: flex; align-items: center; gap: 10px;
  margin: 0 8px 8px; padding: 10px 12px; border-radius: 10px;
  background: none; border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim, #94A3B8); font-size: 13px; cursor: pointer;
  transition: all .2s; width: calc(100% - 16px);
}
.admin-sidebar-close:hover { background: rgba(255,255,255,.06); color: #fff; }
@media (max-width: 600px) { .admin-sidebar-close span { display: none; } }

/* ── Main content area ── */
.admin-main {
  flex: 1; background: #0B1220;
  display: flex; flex-direction: column; overflow: hidden;
}
.admin-tab-content {
  flex: 1; overflow-y: auto; padding: 24px;
}
@media (max-width: 600px) { .admin-tab-content { padding: 12px; } }

/* Page header */
.admin-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.admin-page-header h2 {
  font-size: 18px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.admin-page-header h2 i { color: var(--accent, #38BDF8); }
.admin-refresh-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim, #94A3B8); font-size: 12px; cursor: pointer;
  transition: all .2s;
}
.admin-refresh-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Stats grid */
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (min-width: 900px) { .admin-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.admin-stat-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 20px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  transition: border-color .2s;
}
.admin-stat-card:hover { border-color: rgba(56,189,248,.3); }
.admin-stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.admin-stat-val { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
.admin-stat-lbl { font-size: 11px; color: var(--text-dim, #94A3B8); font-weight: 500; }

/* Section title */
.admin-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-dim, #94A3B8);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}

/* Activity list */
.admin-activity-list { display: flex; flex-direction: column; gap: 6px; }
.admin-activity-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  cursor: pointer; transition: all .2s;
}
.admin-activity-item:hover { background: rgba(255,255,255,.07); border-color: rgba(56,189,248,.2); }
.admin-activity-icon { font-size: 20px; }
.admin-activity-info { flex: 1; min-width: 0; }
.admin-activity-title { font-size: 13px; font-weight: 600; color: #E2E8F0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-activity-meta { font-size: 11px; color: var(--text-dim, #94A3B8); }

/* Toolbar */
.admin-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.admin-search-wrap {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: var(--text-dim, #94A3B8);
}
.admin-search-wrap i { font-size: 12px; flex-shrink: 0; }
.admin-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 13px;
}
.admin-search-input::placeholder { color: var(--text-dim, #94A3B8); }
.admin-filter-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-filter-btn {
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim, #94A3B8); font-size: 12px; cursor: pointer; transition: all .2s;
}
.admin-filter-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-filter-btn.active { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.3); color: var(--accent, #38BDF8); }

/* Table */
.admin-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 10px 14px;
  color: var(--text-dim, #94A3B8); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02); white-space: nowrap;
}
.admin-table td {
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  color: rgba(255,255,255,.85); vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,.03); }
.admin-row-deleted td { opacity: .5; }
.admin-empty-cell { text-align: center; color: var(--text-dim, #94A3B8); padding: 24px !important; }

/* User cell */
.admin-user-cell { display: flex; align-items: center; gap: 10px; }
.admin-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.admin-user-avatar-placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  color: var(--text-dim, #94A3B8); font-size: 14px; flex-shrink: 0;
}
.admin-provider-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); color: var(--text-dim, #94A3B8);
  border: 1px solid rgba(255,255,255,.1); font-size: 11px;
}

/* Action group */
.admin-action-group { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Badges */
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
}
.badge-premium { background: #FACC1520; color: #FACC15; border: 1px solid #FACC1540; }
.badge-free { background: rgba(255,255,255,.06); color: var(--text-dim, #94A3B8); border: 1px solid rgba(255,255,255,.1); }
.badge-admin { background: #38BDF820; color: #38BDF8; border: 1px solid #38BDF840; }
.badge-active { background: #22C55E20; color: #22C55E; border: 1px solid #22C55E40; }
.badge-deleted { background: #FF6B6B20; color: #FF6B6B; border: 1px solid #FF6B6B40; }

/* Action buttons */
.admin-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.85);
  font-size: 11px; font-weight: 500; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.admin-action-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.admin-action-btn.danger { border-color: rgba(248,113,113,.3); color: #F87171; }
.admin-action-btn.danger:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.5); }
.admin-action-btn.success { border-color: rgba(52,211,153,.3); color: #34D399; }
.admin-action-btn.success:hover { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.5); }
.admin-action-btn.warn { border-color: rgba(250,204,21,.3); color: #FACC15; }
.admin-action-btn.warn:hover { background: rgba(250,204,21,.1); border-color: rgba(250,204,21,.5); }

/* ── Post Detail Modal ── */
.admin-detail-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.7);
}
.admin-detail-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9201; width: min(680px, 95vw); max-height: 85vh;
  background: #0F172A; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.8);
  display: flex; flex-direction: column;
}
.admin-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-detail-header h3 { font-size: 15px; font-weight: 700; color: #fff; }
.admin-detail-header button {
  background: none; border: none; color: var(--text-dim, #94A3B8);
  font-size: 16px; cursor: pointer; padding: 4px;
}
.admin-detail-header button:hover { color: #fff; }
.admin-detail-body {
  flex: 1; overflow-y: auto; padding: 20px;
}
.admin-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 500px) { .admin-detail-grid { grid-template-columns: 1fr; } }
.admin-detail-field {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 10px 14px;
}
.admin-detail-label {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim, #94A3B8); margin-bottom: 4px;
}
.admin-detail-desc {
  font-size: 13px; color: rgba(255,255,255,.8);
  line-height: 1.6; white-space: pre-wrap; max-height: 120px; overflow-y: auto;
}
.admin-detail-img {
  width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-top: 6px;
}
.admin-detail-footer {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.admin-detail-footer .admin-action-btn { padding: 8px 14px; font-size: 12px; }

/* ── Confirm Dialog ── */
.admin-confirm-overlay {
  position: fixed; inset: 0; z-index: 9300;
  background: rgba(0,0,0,.6);
}
.admin-confirm-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9301; width: min(420px, 94vw);
  background: #0F172A; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 24px;
}
.admin-confirm-icon { font-size: 36px; color: #FACC15; }
.admin-confirm-title { font-size: 16px; font-weight: 700; color: #fff; text-align: center; }
.admin-confirm-msg { font-size: 13px; color: var(--text-dim, #94A3B8); text-align: center; line-height: 1.6; }
.admin-confirm-btns { display: flex; gap: 10px; }
.admin-confirm-btns .admin-action-btn { padding: 9px 20px; font-size: 13px; }
.admin-empty { color: var(--text-dim, #94A3B8); text-align: center; padding: 24px; font-size: 13px; }
/* Premium pin lock on map */
.marker-premium-wrapper { position: relative; }
.marker-premium-lock {
  position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FACC15; display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: #030712;
}

/* ── Globe View スポットポップアップ ── */
.tfe-globe-popup {
  position: fixed;
  z-index: 9500;
  width: 260px;
  max-width: calc(100vw - 20px);  /* 画面幅からマージン分を引いた最大幅 */
  box-sizing: border-box;
  background: rgba(2, 10, 28, 0.94);
  border: 1px solid rgba(0, 200, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(0,200,255,0.12);
  backdrop-filter: blur(16px);
  font-family: 'Courier New', monospace;
  color: #e0f4ff;
  overflow: hidden;
  display: none;
  animation: tfePopupIn 0.18s ease-out;
}
@keyframes tfePopupIn {
  from { opacity:0; transform:scale(0.92) translateY(4px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
.tfe-popup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 8px;
  background: rgba(0, 180, 255, 0.10);
  border-bottom: 1px solid rgba(0, 200, 255, 0.25);
}
.tfe-popup-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #00e5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tfe-popup-close {
  background: none;
  border: none;
  color: rgba(0,200,255,0.6);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.tfe-popup-close:hover { color: #00e5ff; }
.tfe-popup-img {
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(0,200,255,0.20);
}
.tfe-popup-body {
  padding: 9px 12px 6px;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(200, 230, 255, 0.85);
}
.tfe-popup-loc {
  color: rgba(0, 220, 255, 0.8);
  margin-bottom: 5px;
  font-size: 10px;
}
.tfe-popup-desc {
  color: rgba(190, 220, 255, 0.80);
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.tfe-popup-price {
  color: rgba(0, 229, 255, 0.75);
  font-size: 10px;
}
.tfe-popup-footer {
  padding: 7px 12px;
  border-top: 1px solid rgba(0, 200, 255, 0.20);
}
.tfe-popup-detail-btn {
  width: 100%;
  background: rgba(0, 200, 255, 0.12);
  border: 1px solid rgba(0, 200, 255, 0.40);
  border-radius: 5px;
  color: #00e5ff;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tfe-popup-detail-btn:hover {
  background: rgba(0, 200, 255, 0.22);
  border-color: rgba(0, 200, 255, 0.70);
}

/* ── Globe Speed Slider ──────────────────────────────────── */
#tfeSpeedSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,229,255,1.0);
  box-shadow: 0 0 6px rgba(0,229,255,0.8), 0 0 12px rgba(0,229,255,0.4);
  cursor: pointer;
  border: none;
}
#tfeSpeedSlider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,229,255,1.0);
  box-shadow: 0 0 6px rgba(0,229,255,0.8);
  cursor: pointer;
  border: none;
}
#tfeSpeedControl button:hover {
  background: rgba(0,200,255,0.25) !important;
  border-color: rgba(0,229,255,0.85) !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.4);
}
#tfeSpeedControl button:active {
  transform: scale(0.92);
}

/* ═══════════════════════════════════════════════════════════════
   FORM SECTION HEADERS (Spot Info / Access Info)
   ═══════════════════════════════════════════════════════════════ */
.form-section-header {
  margin: 20px -16px 12px;
  padding: 12px 16px 10px;
  border-top: 1px solid rgba(0,229,255,0.15);
  border-bottom: 1px solid rgba(0,229,255,0.10);
}
.form-section-spot {
  background: linear-gradient(90deg, rgba(0,229,255,0.06) 0%, transparent 100%);
  border-top-color: rgba(0,229,255,0.25);
}
.form-section-access {
  background: linear-gradient(90deg, rgba(255,215,0,0.07) 0%, transparent 100%);
  border-top-color: rgba(255,215,0,0.3);
  margin-top: 24px;
}
.form-section-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.form-section-spot .form-section-header-inner {
  color: rgba(0,229,255,0.9);
}
.form-section-access .form-section-header-inner {
  color: rgba(255,215,0,0.9);
}
.form-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}
.form-section-badge-free {
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.3);
  color: rgba(0,229,255,0.8);
}
.form-section-badge-premium {
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.35);
  color: rgba(255,215,0,0.9);
}
.form-section-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin: 0;
  line-height: 1.4;
}
.form-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PANEL — ACCESS INFO SECTION
   ═══════════════════════════════════════════════════════════════ */
.detail-access-section {
  margin: 16px 0 0;
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,215,0,0.02);
}
.detail-access-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,215,0,0.07);
  border-bottom: 1px solid rgba(255,215,0,0.15);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,215,0,0.9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,215,0,0.14);
  border: 1px solid rgba(255,215,0,0.35);
  color: rgba(255,215,0,0.9);
  margin-left: auto;
  text-transform: none;
}
/* Unlocked state */
.detail-access-unlocked {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-access-unlocked .detail-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  background: transparent;
  border: none;
  padding: 0;
}
.detail-access-unlocked .detail-info-item label {
  font-size: 10px;
  color: rgba(255,215,0,0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.detail-access-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.detail-access-block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255,215,0,0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.detail-access-block-text {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 2px solid rgba(255,215,0,0.3);
  white-space: pre-line;
}
/* Locked state */
.detail-access-locked {
  position: relative;
  overflow: hidden;
}
.detail-access-blur-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  filter: blur(5px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.detail-access-blur-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.detail-access-blur-text {
  letter-spacing: 0.12em;
  color: rgba(255,215,0,0.5);
}
.detail-access-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 8, 24, 0.75);
  backdrop-filter: blur(4px);
  text-align: center;
}
.detail-access-lock-icon {
  font-size: 22px;
  color: rgba(255,215,0,0.85);
  margin-bottom: 4px;
}
.detail-access-lock-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,215,0,0.9);
  margin: 0;
  line-height: 1.3;
}
.detail-access-lock-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.4;
}
.detail-access-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,160,0,0.25));
  border: 1px solid rgba(255,215,0,0.5);
  color: rgba(255,215,0,0.95);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}
.detail-access-upgrade-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,160,0,0.35));
  box-shadow: 0 0 12px rgba(255,215,0,0.25);
}
/* Edit mode fields inside access section */
.dp-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 6px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  padding: 8px 10px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  box-sizing: border-box;
}
.dp-textarea:focus {
  outline: none;
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 6px rgba(255,215,0,0.15);
}
#dpAccessEditFields {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,215,0,0.15);
  background: rgba(255,215,0,0.03);
}


/* ===== DEMO DESIGN OVERRIDES (from /static/demo/) ===== */
/* These styles override the base styles to match the demo design */

/* ── CSS Variables（実アプリと同一） ── */
:root {
  --bg-primary:   #020712;
  --bg-secondary: #040b1a;
  --bg-panel:     rgba(3,8,22,0.96);
  --bg-card:      rgba(5,12,30,0.92);
  --bg-input:     rgba(8,18,42,0.80);
  --border-glow:  rgba(0,212,255,0.32);
  --border-dim:   rgba(0,212,255,0.10);
  --text-primary: #EEF4FF;
  --text-secondary:#AAC0D8;
  --text-muted:   #6A88A4;
  --text-dim:     #3C5470;
  --accent:       #00CFFF;
  --accent-bright:#50E8FF;
  --accent-glow:  rgba(0,207,255,0.45);
  --green:        #1EE6B4;
  --header-h:     62px;
  --ctrlbar-h:    52px;
  --radius:       10px;
  --radius-sm:    6px;
  --transition:   all 0.22s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body {
  width:100%; height:100%;
  background:#030912;
  color:var(--text-primary);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.5;
  overflow:hidden;
}
button { cursor:pointer; border:none; outline:none; background:none; font-family:inherit; }
input,select { font-family:inherit; outline:none; border:none; }

/* ══ Star canvas ══ */
#starCanvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:0.75;
}

/* ══ ヘッダー ══ */
.app-header {
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  background:rgba(2,8,22,0.97);
  border-bottom:1px solid var(--border-glow);
  display:flex; align-items:center;
  padding:0 14px; gap:10px;
  z-index:200; backdrop-filter:blur(16px);
}
/* ロゴアイコン（logo-icon = 軌道アニメーション付き球体） */
.header-left { display:flex; align-items:center; flex-shrink:0; }
.app-logo    { display:flex; align-items:center; gap:10px; }
.logo-icon {
  position:relative; width:32px; height:32px; flex-shrink:0;
}
.logo-orbit {
  position:absolute; inset:0;
  border:2px solid var(--accent);
  border-radius:50%;
  opacity:0.75;
  animation: orbitSpin 6s linear infinite;
}
.logo-orbit::after {
  content:'';
  position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:6px; height:6px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 8px var(--accent);
}
.logo-core {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 12px var(--accent), 0 0 4px #fff;
}
.logo-mark {
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(0,207,255,0.50);
  background:radial-gradient(circle at 40% 35%,rgba(0,120,200,0.4),transparent 60%);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--accent); font-size:14px;
}
.app-title { display:flex; flex-direction:column; line-height:1.1; }
.title-main {
  font-size:12px; font-weight:700; letter-spacing:1.5px;
  color:var(--text-primary); font-family:'Courier New',monospace;
  text-shadow:0 0 16px rgba(0,207,255,0.35);
}
.title-main .w { color:var(--text-primary); }
.title-sub { font-size:8px; letter-spacing:3px; color:var(--accent); font-family:'Courier New',monospace; opacity:0.85; }
.header-nav { display:none !important; /* MENUボタンに統合 */ }
.nav-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:6px;
  font-size:11px; font-weight:600; letter-spacing:0.8px;
  color:var(--text-muted); border:1px solid transparent; transition:var(--transition);
}
.nav-btn i { font-size:10px; opacity:0.6; }
.nav-btn.active {
  color:var(--accent); font-weight:700;
  background:rgba(0,207,255,0.10); border-color:rgba(0,207,255,0.30);
}
.nav-btn.active i { opacity:1; }
.nav-btn:hover { color:var(--accent); background:rgba(0,207,255,0.08); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.icon-btn {
  width:34px; height:34px; border-radius:8px; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; transition:var(--transition); border:1px solid transparent;
}
.icon-btn:hover { color:var(--accent); background:rgba(0,207,255,0.08); border-color:rgba(0,207,255,0.20); }
.icon-btn.auth { background:rgba(0,207,255,0.10); border-color:rgba(0,207,255,0.30); color:var(--accent); }

/* ══ メインエリア ══ */
.app-main {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
  display:flex; flex-direction:column; z-index:10;
}

/* ══ コントロールバー ══ */
.control-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; background:rgba(2,7,18,0.95);
  border-bottom:1px solid var(--border-dim);
  flex-shrink:0; height:var(--ctrlbar-h);
  backdrop-filter:blur(12px); z-index:50;
}
.search-bar-wrapper { position:relative; flex:1; max-width:420px; }
.search-bar {
  display:flex; align-items:center;
  background:var(--bg-input); border:1px solid var(--border-glow);
  border-radius:var(--radius-sm); padding:0 10px; height:34px; transition:var(--transition);
}
.search-bar:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,207,255,0.15); }
.search-bar i { color:var(--text-dim); font-size:12px; margin-right:7px; }
.search-bar input {
  flex:1; background:none; color:var(--text-primary); font-size:13px;
}
.search-bar input::placeholder { color:var(--text-dim); }
.filter-group { display:flex; gap:6px; flex-shrink:0; }
.filter-select-wrapper { position:relative; }
.filter-select {
  appearance:none; -webkit-appearance:none;
  background:var(--bg-input); border:1px solid var(--border-glow);
  border-radius:var(--radius-sm); color:var(--text-secondary);
  font-size:12px; padding:0 26px 0 10px; height:34px; cursor:pointer; min-width:100px;
}
.filter-arrow {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-size:10px; pointer-events:none;
}

/* ══ Globe/Map ビューエリア ══ */
.globe-view {
  flex:1; position:relative; overflow:hidden;
  background:#000308; min-height:0;
}

/* ══ フィルタードロップダウン ══ */
.filter-dropdown-wrapper {
  position: relative;
  flex-shrink: 0;
}
.filter-dropdown-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 34px;
  background: var(--bg-input);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap; min-width: 120px;
  font-family: inherit;
}
.filter-dropdown-btn:hover,
.filter-dropdown-btn.open {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,207,255,0.06);
}
.filter-dropdown-btn .fdb-icon { font-size: 13px; }
.filter-dropdown-btn .fdb-label { flex: 1; text-align: left; }
.filter-dropdown-btn .fdb-arrow {
  font-size: 9px; opacity: 0.6;
  transition: transform 0.22s;
}
.filter-dropdown-btn.open .fdb-arrow { transform: rotate(180deg); }

.filter-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 160px;
  background: rgba(2,8,28,0.99);
  border: 1px solid rgba(0,200,255,0.30);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.70);
  backdrop-filter: blur(14px);
  z-index: 200;
}
.filter-dropdown-menu.show { display: block; }

.fdm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(0,200,255,0.05);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.fdm-item:last-child { border-bottom: none; }
.fdm-item:hover { background: rgba(0,200,255,0.08); color: var(--accent); }
.fdm-item.active {
  color: var(--accent);
  background: rgba(0,207,255,0.10);
}
.fdm-item.active::after {
  content: '✓';
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
}
.fdm-item-icon { font-size: 14px; }

/* ── Mapbox地図（Globe View の背景として使用） ── */
#mapboxGlobe {
  position:absolute; inset:0;
  width:100%; height:100%;
}
/* Mapboxの標準UIを非表示 */
.mapboxgl-control-container { display:none !important; }
.mapboxgl-ctrl-attrib-inner a { font-size:9px; color:rgba(100,150,200,0.5); }

/* ── Globe View HUD オーバーレイ ── */
.globe-overlay {
  position:absolute; inset:0;
  pointer-events:none; z-index:5;
}
.globe-overlay > * { pointer-events:auto; }
/* HUD最下段のベースライン（プレビューカードが被らないように） */
.hud-bottom-row {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 10px 8px; pointer-events:none;
}
.hud-bottom-row > * { pointer-events:auto; }

/* TRACKING ACTIVE 上部中央 */
.tracking-indicator {
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  font-family:'Courier New',monospace; font-size:10px; font-weight:700;
  color:rgba(0,229,255,0.90); letter-spacing:1.5px;
  text-shadow:0 0 8px rgba(0,229,255,0.6);
  pointer-events:none; white-space:nowrap;
}
.tracking-dot {
  width:7px; height:7px; border-radius:50%;
  background:#00E5FF;
  box-shadow:0 0 6px #00E5FF,0 0 12px rgba(0,229,255,0.5);
  animation:hudPulse 1.8s ease-in-out infinite;
}
@keyframes hudPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

/* LIVE UTC */
.live-indicator {
  position:absolute; top:10px; left:12px;
  display:flex; align-items:center; gap:5px;
  background:rgba(0,10,30,0.70);
  border:1px solid rgba(0,200,255,0.25);
  border-radius:5px; padding:4px 10px;
  font-family:'Courier New',monospace; font-size:9px; letter-spacing:1px;
}
.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:hudPulse 1.2s infinite;
}
.live-label { color:var(--green); font-weight:700; letter-spacing:1.5px; }
.live-time { color:rgba(0,200,255,0.70); }

/* スピードコントロール（右上） */
.speed-control {
  position:absolute; top:10px; right:10px;
  background:rgba(0,10,30,0.80);
  border:1px solid rgba(0,200,255,0.40);
  border-radius:10px; padding:8px 10px;
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Courier New',monospace; min-width:70px;
}
.sc-label { color:rgba(0,200,255,0.60); font-size:8px; letter-spacing:1.5px; white-space:nowrap; }
.sc-btn {
  width:36px; height:22px; border-radius:5px;
  border:1px solid rgba(0,200,255,0.5);
  background:rgba(0,200,255,0.10); color:rgba(0,229,255,0.9);
  font-size:12px; font-family:'Courier New',monospace;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sc-btn:hover { background:rgba(0,200,255,0.22); }
.sc-val { color:rgba(0,229,255,0.90); font-size:10px; letter-spacing:1px; font-weight:700; }
.sc-sep { width:100%; height:1px; background:rgba(0,200,255,0.20); }
.sc-stop {
  width:60px; height:28px; border-radius:6px;
  border:1px solid rgba(0,229,255,0.70);
  background:rgba(0,200,255,0.15); color:rgba(0,240,255,1.0);
  font-size:11px; font-family:'Courier New',monospace; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px;
}
.sc-stop:hover { background:rgba(0,200,255,0.28); }
.sc-stop.stopped { border-color:rgba(30,230,180,0.7); color:var(--green); background:rgba(30,230,180,0.12); }

/* マップコントロール（右サイド中段） */
.map-controls {
  position:absolute; right:14px;
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:5px;
}
.map-ctrl-btn {
  width:38px; height:38px; border-radius:9px;
  background:rgba(1,5,16,0.94);
  border:1px solid rgba(0,200,255,0.22);
  color:rgba(0,200,255,0.75); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); backdrop-filter:blur(8px);
}
.map-ctrl-btn:hover {
  color:var(--accent); border-color:var(--accent);
  background:rgba(0,200,255,0.10);
  box-shadow:0 0 8px rgba(0,200,255,0.30);
}
.map-ctrl-btn.active {
  color:var(--accent); border-color:var(--accent);
  background:rgba(0,200,255,0.12);
  box-shadow:0 0 8px rgba(0,200,255,0.25);
}

/* HUD: TRACKING DATA（右下）→ hud-bottom-row 内に移動 */
.hud-tracking {
  background:rgba(0,10,30,0.72); border:1px solid rgba(0,200,255,0.45);
  border-radius:6px; padding:7px 11px; backdrop-filter:blur(8px);
  font-family:'Courier New',monospace;
}
.hud-title {
  color:#00e5ff; font-size:10px; font-weight:700; letter-spacing:2px;
  margin-bottom:5px; border-bottom:1px solid rgba(0,200,255,0.25); padding-bottom:3px;
}
.hud-row { font-size:9px; line-height:1.7; color:rgba(220,240,255,0.85); }
.hud-val { color:#00e5ff; }

/* HUD: MISSION STATUS（左下）→ hud-bottom-row 内に移動 */
.hud-mission {
  background:rgba(0,10,30,0.72); border:1px solid rgba(0,200,255,0.45);
  border-radius:6px; padding:7px 11px; backdrop-filter:blur(8px);
  font-family:'Courier New',monospace;
}

/* COORD HUD（hud-bottom-rowの中央に配置） */
.hud-coord {
  background:rgba(0,5,20,0.75); border:1px solid rgba(0,200,255,0.20);
  border-radius:20px; padding:4px 14px;
  font-family:'Courier New',monospace; font-size:9px; letter-spacing:1.5px;
  color:rgba(0,200,255,0.60); white-space:nowrap; pointer-events:none;
  align-self:center;
}



/* detail-panel styles handled by base CSS */

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--border-glow); border-radius:2px; }
.dp-header {
  padding:14px 16px 12px; border-bottom:1px solid var(--border-dim);
  display:flex; align-items:center; gap:10px;
}
.dp-type-badge {
  font-size:9px; font-family:'Courier New',monospace; color:var(--accent);
  letter-spacing:1.5px; font-weight:700;
  background:rgba(0,200,255,0.10); border:1px solid rgba(0,200,255,0.30);
  border-radius:4px; padding:2px 8px;
}
.dp-actions { display:flex; gap:5px; margin-left:auto; }
.dp-action-small {
  width:28px; height:28px; border-radius:7px;
  border:1px solid rgba(0,200,255,0.20);
  background:rgba(0,200,255,0.06); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  cursor:pointer; transition:var(--transition);
}
.dp-action-small:hover { color:var(--accent); border-color:rgba(0,200,255,0.40); }
.dp-action-small.close-btn:hover { color:var(--text-primary); }
.dp-body { padding:14px 16px; }
.dp-media {
  width:100%; height:160px; border-radius:8px; margin-bottom:14px;
  overflow:hidden; position:relative;
  background:rgba(0,20,50,0.8); border:1px solid rgba(0,200,255,0.15);
  display:flex; align-items:center; justify-content:center;
}
.dp-media img { width:100%; height:100%; object-fit:cover; }
.dp-media-placeholder { font-size:42px; opacity:0.6; }
.dp-title { font-size:16px; font-weight:700; color:#EEF4FF; margin-bottom:4px; }
.dp-category { font-size:10px; color:var(--text-muted); letter-spacing:0.5px; margin-bottom:8px; }
.dp-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.dp-tag {
  padding:2px 9px; border-radius:12px; font-size:10px; font-weight:700; letter-spacing:0.5px;
}
.tag-train { background:rgba(59,130,246,0.18); color:#60a5fa; border:1px solid rgba(59,130,246,0.28); }
.tag-ship  { background:rgba(16,185,129,0.18); color:#34d399; border:1px solid rgba(16,185,129,0.28); }
.tag-air   { background:rgba(139,92,246,0.18); color:#a78bfa; border:1px solid rgba(139,92,246,0.28); }
.tag-bus   { background:rgba(251,191,36,0.15); color:#fbbf24; border:1px solid rgba(251,191,36,0.22); }
.tag-other { background:rgba(100,200,255,0.12); color:#7dd3fc; border:1px solid rgba(100,200,255,0.22); }
.dp-sec-label {
  font-size:9px; color:var(--text-dim); letter-spacing:2px;
  font-family:'Courier New',monospace; margin-top:14px; margin-bottom:5px;
}
.dp-desc { font-size:12px; color:var(--text-secondary); line-height:1.7; margin-bottom:4px; }
.dp-info-row {
  display:flex; justify-content:space-between; padding:7px 0;
  border-bottom:1px solid rgba(0,200,255,0.06); font-size:11px;
}
.dp-info-label { color:var(--text-muted); }
.dp-info-val { color:var(--text-primary); }
.dp-action-btn {
  width:100%; padding:10px; margin-top:10px;
  background:rgba(0,200,255,0.10); border:1px solid rgba(0,200,255,0.38);
  border-radius:7px; color:var(--accent); font-size:12px; font-weight:700;
  cursor:pointer; font-family:'Courier New',monospace;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:var(--transition);
}
.dp-action-btn:hover { background:rgba(0,200,255,0.20); }
.dp-action-btn.map-btn {
  color:var(--green); border-color:rgba(30,230,180,0.35);
  background:rgba(30,230,180,0.07);
}
.dp-action-btn.map-btn:hover { background:rgba(30,230,180,0.16); }

/* ══ 認証モーダル ══ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,5,20,0.85);
  z-index:500; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.modal-overlay.show { display:flex; }
.auth-modal {
  background:rgba(2,8,22,0.99); border:1px solid rgba(0,200,255,0.35);
  border-radius:14px; padding:28px 28px 24px; width:340px; position:relative;
  box-shadow:0 0 60px rgba(0,0,0,0.90);
}
.am-close {
  position:absolute; top:12px; right:14px;
  color:rgba(0,200,255,0.40); cursor:pointer; font-size:16px; transition:var(--transition);
}
.am-close:hover { color:var(--accent); }
.am-title {
  font-size:15px; font-weight:700; color:var(--accent); letter-spacing:1px;
  margin-bottom:3px; display:flex; align-items:center; gap:8px;
  font-family:'Courier New',monospace;
}
.am-sub { font-size:11px; color:var(--text-muted); margin-bottom:20px; }
.fix-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(30,230,180,0.12); border:1px solid rgba(30,230,180,0.30);
  border-radius:4px; padding:2px 7px; font-size:9px; color:var(--green);
  font-family:'Courier New',monospace; letter-spacing:0.5px;
}
.oauth-google-btn {
  width:100%; padding:11px; border-radius:8px;
  background:#fff; color:#3c4043;
  border:1px solid #dadce0; font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:10px; font-family:'Google Sans',sans-serif;
}
.oauth-google-btn:hover { background:#f8f9fa; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.g-logo { display:flex; }
.g-logo span { font-weight:700; font-size:15px; }
.am-divider {
  display:flex; align-items:center; gap:10px; margin:12px 0;
  font-size:10px; color:rgba(100,150,200,0.40);
}
.am-divider::before,.am-divider::after { content:''; flex:1; height:1px; background:rgba(0,200,255,0.10); }
.am-input {
  width:100%; padding:9px 12px; margin-bottom:10px;
  background:var(--bg-input); border:1px solid rgba(0,200,255,0.25);
  border-radius:7px; color:var(--text-primary); font-size:12px;
  transition:var(--transition);
}
.am-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,207,255,0.15); }
.am-submit {
  width:100%; padding:10px;
  background:rgba(0,200,255,0.15); border:1px solid rgba(0,200,255,0.45);
  border-radius:7px; color:var(--accent); font-size:12px; font-weight:700;
  cursor:pointer; font-family:'Courier New',monospace; transition:var(--transition);
}
.am-submit:hover { background:rgba(0,200,255,0.28); }

/* ══ ピンプレビューカード（画面下部中央：自動回転時に表示） ══ */
.pin-preview {
  position:fixed;
  /* left:0; top:0 に固定 → JS が transform:translate(x,y) で位置を制御 */
  /* (left/top を毎フレーム変えるとレイアウト再計算が発生してちらつく) */
  left:0; top:0;
  width:260px;
  background:rgba(2,8,28,0.92);
  border:1px solid rgba(0,229,255,0.55);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(16px);
  z-index:900;
  pointer-events:none;  /* 非表示中はクリック無効 */
  cursor:pointer;
  opacity:0;
  /* transform は JS が translate(x,y) で上書き。translateY フェードは廃止 */
  transform:translate(-9999px,-9999px);
  /* opacity のみトランジション（transform はスムーズ追従で遅延不要） */
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 24px rgba(0,180,255,0.18), 0 4px 32px rgba(0,0,0,0.60);
  /* GPU レイヤーに昇格させてちらつきを防止 */
  will-change: transform, opacity;
}
.pin-preview.visible {
  opacity:1;
  pointer-events:auto;  /* 表示中のみクリック有効 */
}
/* ピンプレビュー内：スキャンライン演出 */
.pin-preview::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.70), transparent);
  border-radius:12px 12px 0 0;
  animation: scanSlide 2.2s linear infinite;
  z-index:1;
}
@keyframes scanSlide {
  0%   { transform:scaleX(0); transform-origin:left; }
  50%  { transform:scaleX(1); transform-origin:left; }
  50.1%{ transform:scaleX(1); transform-origin:right; }
  100% { transform:scaleX(0); transform-origin:right; }
}
/* ── サムネイル画像エリア ── */
.pp-thumb {
  width:100%; height:80px; overflow:hidden; position:relative;
  background:rgba(0,20,50,0.80);
}
.pp-thumb img {
  width:100%; height:100%; object-fit:cover;
  display:block; transition:transform 0.5s ease;
}
.pp-thumb-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:34px; opacity:0.5;
}
/* サムネイル上のタイトルオーバーレイ */
.pp-thumb-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(0,5,20,0.90));
  padding:20px 12px 7px;
}
.pp-thumb-title {
  font-size:13px; font-weight:800; color:#EEF4FF;
  letter-spacing:0.3px; line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ── カード本体 ── */
.pp-body { padding:7px 10px 8px; }

.pp-header {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.pp-ping {
  width:8px; height:8px; border-radius:50%;
  background:#00E5FF;
  box-shadow:0 0 8px #00E5FF, 0 0 16px rgba(0,229,255,0.5);
  flex-shrink:0;
  animation:hudPulse 1.4s ease-in-out infinite;
}
.pp-type-badge {
  font-size:9px; font-family:'Courier New',monospace;
  color:var(--accent); letter-spacing:1.2px; font-weight:700;
  background:rgba(0,200,255,0.10);
  border:1px solid rgba(0,200,255,0.28);
  border-radius:4px; padding:1px 7px;
}
.pp-label {
  font-size:9px; font-family:'Courier New',monospace;
  color:rgba(0,200,255,0.45); letter-spacing:1px;
  margin-left:auto; white-space:nowrap;
}
/* .pp-title は pp-thumb-title に統合のため削除 */
.pp-location {
  font-size:10px; color:var(--text-muted);
  display:flex; align-items:center; gap:5px;
  margin-bottom:8px;
}
.pp-location i { color:rgba(0,200,255,0.50); font-size:9px; }
.pp-footer {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(0,200,255,0.10);
  padding-top:7px;
}
.pp-price {
  font-size:10px; font-family:'Courier New',monospace;
  color:var(--green); letter-spacing:0.5px;
}
.pp-cta {
  font-size:9px; font-family:'Courier New',monospace;
  color:rgba(0,200,255,0.60); letter-spacing:1px;
  display:flex; align-items:center; gap:4px;
}
.pp-cta i { font-size:8px; }
/* プログレスバー（次のピンまでのカウント） */
.pp-progress {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:rgba(0,200,255,0.08); border-radius:0 0 12px 12px; overflow:hidden;
}
.pp-progress-bar {
  height:100%;
  background:linear-gradient(90deg, rgba(0,200,255,0.30), rgba(0,229,255,0.70));
  width:0%; transition:width linear;
}

/* ══ 検索ドロップダウン ══ */
.search-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; width:100%;
  background:rgba(2,8,28,0.99); border:1px solid rgba(0,200,255,0.28);
  border-radius:8px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.70); backdrop-filter:blur(14px); z-index:100;
}
.sdrop-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(0,200,255,0.05);
  transition:background 0.15s;
}
.sdrop-item:hover { background:rgba(0,200,255,0.07); }
.sdrop-icon {
  width:30px; height:30px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.sdrop-label { font-size:12px; font-weight:600; color:var(--text-primary); }
.sdrop-sub { font-size:10px; color:var(--text-muted); }
.sdrop-badge {
  margin-left:auto; font-size:9px; font-family:'Courier New',monospace;
  color:var(--accent); background:rgba(0,200,255,0.08);
  border:1px solid rgba(0,200,255,0.20); border-radius:4px; padding:1px 6px;
}
.sdrop-footer {
  padding:6px 12px; font-size:9px; color:var(--text-dim);
  display:flex; align-items:center; gap:5px;
  border-top:1px solid rgba(0,200,255,0.07);
}
.g1{color:#4285F4}.g2{color:#EA4335}.g3{color:#FBBC05}
.g4{color:#4285F4}.g5{color:#34A853}.g6{color:#EA4335}

/* ══ Map View切替バー ══ */
.view-toggle-bar {
  display:flex; align-items:center; gap:8px;
  padding:4px 12px;
  background:rgba(0,5,20,0.85);
  border-bottom:1px solid rgba(0,200,255,0.12);
  font-family:'Courier New',monospace;
  flex-shrink:0;
}
.vt-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 14px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:1px;
  cursor:pointer; font-family:'Courier New',monospace; transition:var(--transition);
}
.vt-btn.globe-active {
  background:rgba(0,200,255,0.25); border:1px solid rgba(0,200,255,0.80);
  color:rgba(0,240,255,1.0);
}
.vt-btn.map-inactive {
  background:transparent; border:1px solid rgba(100,150,200,0.30);
  color:rgba(150,200,230,0.70);
}
.vt-label { margin-left:auto; font-size:10px; color:rgba(0,200,255,0.50); letter-spacing:1px; }

/* ══ ピン横ラベル（HTMLオーバーレイ・添付画像スタイル） ══ */
#pinLabelLayer {
  position:absolute; inset:0;
  pointer-events:none; z-index:6;
  overflow:hidden;
}
.pin-label-tag {
  position:absolute;
  /* ピンの右横に配置（ピン中心から右に14px、縦は中央揃え） */
  transform:translate(14px, -50%);
  white-space:nowrap;
  padding:5px 12px;
  background:rgba(1,7,24,0.88);
  border:1px solid rgba(0,229,255,0.80);
  border-radius:3px;
  color:rgba(0,235,255,0.97);
  font-size:12px; font-weight:700;
  letter-spacing:0.5px;
  /* 左端に縦ライン（UIアクセント） */
  border-left:3px solid rgba(0,229,255,0.90);
  /* ネオングロー */
  box-shadow:0 0 12px rgba(0,229,255,0.25),
             0 0 4px rgba(0,229,255,0.15),
             inset 0 0 8px rgba(0,229,255,0.04);
  backdrop-filter:blur(6px);
  pointer-events:auto; cursor:pointer;
  opacity:0;
  transition:opacity 0.35s ease;
  max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
.pin-label-tag.show { opacity:1; }
/* ホバー時に少し明るく */
.pin-label-tag:hover {
  background:rgba(0,20,50,0.92);
  border-color:rgba(0,240,255,1.0);
  box-shadow:0 0 18px rgba(0,229,255,0.45), inset 0 0 10px rgba(0,229,255,0.08);
}

/* ══ 新規投稿FABボタン（ピル型: アイコン＋ラベル） ══ */
.fab-add {
  position:absolute;
  bottom:160px;
  left:50%; transform:translateX(-50%);
  /* 円形 → ピル型（アイコン＋テキスト） */
  height:36px;
  padding:0 16px 0 12px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(0,207,255,0.20), rgba(0,90,170,0.16));
  border:1.5px solid rgba(0,229,255,0.75);
  color:rgba(0,240,255,1.0);
  display:flex; align-items:center; gap:7px;
  white-space:nowrap;
  cursor:pointer; z-index:25;
  box-shadow:0 0 16px rgba(0,200,255,0.28), 0 3px 14px rgba(0,0,0,0.55);
  transition:var(--transition);
}
.fab-icon {
  font-size:16px; font-weight:300; line-height:1; flex-shrink:0;
  color:rgba(0,240,255,1.0);
}
.fab-label {
  font-size:10px; font-weight:700;
  font-family:'Courier New',monospace;
  letter-spacing:1.2px;
  color:rgba(0,235,255,0.90);
}
.fab-add:hover {
  background:linear-gradient(135deg, rgba(0,207,255,0.36), rgba(0,140,220,0.26));
  box-shadow:0 0 24px rgba(0,200,255,0.48), 0 4px 18px rgba(0,0,0,0.55);
  transform:translateX(-50%) scale(1.05);
}
.fab-add:active { transform:translateX(-50%) scale(0.95); }





/* ── DEMO LAYOUT: Complete layout matching demo design ── */

/* app-main: fixed, fills screen below header */
.app-main {
  position: fixed !important;
  top: var(--header-h, 62px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

/* ── Filter Dropdown (Demo Style) ── */
.filter-dropdown-wrapper {
  position: relative;
  flex-shrink: 0;
}
.filter-dropdown-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 34px;
  background: var(--bg-input, rgba(8,18,42,0.80));
  border: 1px solid var(--border-glow, rgba(0,212,255,0.32));
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary, #AAC0D8);
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer;
  transition: var(--transition, all 0.22s);
  white-space: nowrap; min-width: 120px;
  font-family: inherit;
}
.filter-dropdown-btn:hover,
.filter-dropdown-btn.open {
  border-color: var(--accent, #00CFFF);
  color: var(--accent, #00CFFF);
  background: rgba(0,207,255,0.06);
}
.filter-dropdown-btn .fdb-icon { font-size: 13px; }
.filter-dropdown-btn .fdb-label { flex: 1; text-align: left; }
.filter-dropdown-btn .fdb-arrow {
  font-size: 9px; opacity: 0.6;
  transition: transform 0.22s;
}
.filter-dropdown-btn.open .fdb-arrow { transform: rotate(180deg); }
.filter-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 160px;
  background: rgba(2,8,28,0.99);
  border: 1px solid rgba(0,200,255,0.30);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.70);
  backdrop-filter: blur(14px);
  z-index: 200;
}
.filter-dropdown-menu.show { display: block; }
.fdm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted, #6A88A4);
  border-bottom: 1px solid rgba(0,200,255,0.05);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.fdm-item:hover { background: rgba(0,200,255,0.07); color: var(--accent, #00CFFF); }
.fdm-item.active { background: rgba(0,200,255,0.10); color: var(--accent, #00CFFF); }
.fdm-item-icon { font-size: 14px; }

/* ── Map Controls (Demo Style) ── */
.map-controls {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.map-ctrl-btn {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(1,5,16,0.94);
  border: 1px solid rgba(0,200,255,0.22);
  color: rgba(0,200,255,0.75); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition, all 0.22s); backdrop-filter: blur(8px);
  pointer-events: auto;
}
.map-ctrl-btn:hover {
  background: rgba(0,200,255,0.12);
  border-color: rgba(0,200,255,0.50);
  color: rgba(0,229,255,1.0);
}

/* ── Speed Control (Demo Style) ── */
.speed-control {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(0,10,30,0.80) !important;
  border: 1px solid rgba(0,200,255,0.40) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Courier New', monospace !important;
  min-width: 70px !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}
.sc-label { color: rgba(0,200,255,0.60); font-size: 8px; letter-spacing: 1.5px; white-space: nowrap; }
.sc-val { color: rgba(0,229,255,0.90); font-size: 10px; letter-spacing: 1px; font-weight: 700; }
.sc-sep { width: 100%; height: 1px; background: rgba(0,200,255,0.20); }
.sc-btn {
  width: 36px; height: 22px; border-radius: 5px;
  border: 1px solid rgba(0,200,255,0.5);
  background: rgba(0,200,255,0.10); color: rgba(0,229,255,0.9);
  font-size: 12px; font-family: 'Courier New', monospace;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sc-stop {
  width: 60px; height: 28px; border-radius: 6px;
  border: 1px solid rgba(0,229,255,0.70);
  background: rgba(0,200,255,0.15); color: rgba(0,240,255,1.0);
  font-size: 11px; font-family: 'Courier New', monospace; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* ── HUD Bottom Row (Demo Style) ── */
.hud-bottom-row {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 10px 8px !important;
  pointer-events: none !important;
  z-index: 15 !important;
}
.hud-bottom-row > * { pointer-events: auto; }
.hud-mission {
  background: rgba(0,10,30,0.72); border: 1px solid rgba(0,200,255,0.45);
  border-radius: 6px; padding: 7px 11px; backdrop-filter: blur(8px);
  font-family: 'Courier New', monospace;
}
.hud-coord {
  background: rgba(0,5,20,0.75); border: 1px solid rgba(0,200,255,0.20);
  border-radius: 20px; padding: 4px 14px;
  font-family: 'Courier New', monospace; font-size: 9px; letter-spacing: 1.5px;
  color: rgba(0,200,255,0.60); white-space: nowrap; pointer-events: none;
  align-self: center;
}
.hud-tracking {
  background: rgba(0,10,30,0.72); border: 1px solid rgba(0,200,255,0.45);
  border-radius: 6px; padding: 7px 11px; backdrop-filter: blur(8px);
  font-family: 'Courier New', monospace;
}
.hud-title {
  color: #00e5ff; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  margin-bottom: 5px; border-bottom: 1px solid rgba(0,200,255,0.25); padding-bottom: 3px;
}
.hud-row { font-size: 9px; line-height: 1.7; color: rgba(220,240,255,0.85); }
.hud-row span { color: rgba(0,229,255,0.90); }

/* viewHome: flex column, fills app-main */
#viewHome.view.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* control-bar: fixed height, no shrink */
.control-bar {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 50 !important;
}

/* Hide Globe/Map toggle bar and Three.js wrapper */
#globeViewToggleBar { display: none !important; }
#threeGlobeWrapper  { display: none !important; }

/* mapWrapper = globe-view style: flex:1, fills remaining space */
.map-wrapper,
#mapWrapper {
  position: relative !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000308 !important;
}

/* The actual map div fills the entire mapWrapper */
#map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* globe-overlay: sits on top of map, pointer-events none except children */
.globe-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.globe-overlay > * {
  pointer-events: auto !important;
}

/* fab-add: bottom center — HUDパネル(~88px)+余裕を確保 */
.fab-add {
  position: absolute !important;
  bottom: 160px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* pin-preview: fixed positioned by JS via transform:translate(x,y) */
.pin-preview {
  position: fixed !important;
  z-index: 900 !important;
  left: 0 !important;
  top: 0 !important;
  will-change: transform, opacity !important;
}

/* hud-top-row: live-indicator の下に map-stats を縦並び */
.hud-top-row {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
.hud-top-row > * {
  pointer-events: auto !important;
}

/* map-stats: hud-top-row 内では relative に */
.map-stats {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* live-indicator: hud-top-row 内では relative に */
.live-indicator {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex-shrink: 0 !important;
}

/* pinLabelLayer: full overlay, no pointer events */
#pinLabelLayer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 12 !important;
  overflow: hidden !important;
}

/* ── DEMO: Fix detail panel for mobile (reset demo override damage) ── */
@media (max-width: 767px) {
  .detail-panel {
    position: fixed !important;
    bottom: -100% !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--border-glow) !important;
    transition: bottom 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 950 !important;
  }
  .detail-panel.open {
    bottom: 0 !important;
    right: 0 !important;
  }
}

/* ===== END DEMO DESIGN OVERRIDES ===== */

/* ===== TRANSLATION UI STYLES ===== */
#detailTranslateBar {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(0, 180, 180, 0.08);
  border: 1px solid rgba(0, 180, 180, 0.25);
  border-radius: 8px;
}

.detail-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0, 180, 180, 0.15);
  border: 1px solid rgba(0, 180, 180, 0.4);
  border-radius: 6px;
  color: #00d4d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.detail-translate-btn:hover {
  background: rgba(0, 180, 180, 0.28);
  border-color: rgba(0, 180, 180, 0.7);
}
.detail-translate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.detail-translate-btn.is-original {
  background: rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.35);
  color: #ffd700;
}

#detailTranslateStatus {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex: 1;
}

/* ===== END TRANSLATION UI STYLES ===== */

/* ====================================================
   MENU DROPDOWN BUTTON (header)
   ==================================================== */
.menu-dropdown-btn {
  display: flex; /* 全サイズで表示（header-nav の代替として常時表示） */
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,207,255,0.08);
  border: 1px solid rgba(0,207,255,0.30);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: rgba(0,207,255,0.1);
  user-select: none;
  white-space: nowrap;
}
.menu-dropdown-btn:hover,
.menu-dropdown-btn.active {
  background: rgba(0,207,255,0.18);
  border-color: rgba(0,207,255,0.60);
  color: var(--accent);
}
.menu-dropdown-btn .fas.fa-bars { font-size: 13px; color: var(--accent); }
.menu-chevron {
  font-size: 10px;
  transition: transform 0.25s ease;
  color: var(--accent);
}

/* ====================================================
   MNAV — New dropdown menu panel
   ==================================================== */
/* フルスクリーン透明オーバーレイ（背景タップで閉じる） */
.mnav-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 1600;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mnav-overlay.open { display: block; }

/* メニューパネル本体 */
.mnav-panel {
  position: absolute;
  top: var(--header-h);
  right: 0;
  width: 220px;
  padding: 6px 0;
  background: rgba(5,12,35,0.97);
  border: 1px solid rgba(0,207,255,0.35);
  border-top: none;
  border-radius: 0 0 0 14px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: -4px 8px 32px rgba(0,0,0,0.60), inset -3px 0 0 rgba(0,207,255,0.20);
  pointer-events: auto;
  overflow: hidden;
  /* 左端のネオンライン */
  border-left: 3px solid rgba(0,207,255,0.50);
}

/* グループコンテナ */
.mnav-group {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

/* セパレーター */
.mnav-divider {
  height: 1px;
  background: rgba(0,207,255,0.12);
  margin: 2px 12px;
}

/* 各メニュー項目 */
.mnav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  color: rgba(200,220,255,0.85);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: rgba(0,207,255,0.1);
  user-select: none;
  border-radius: 0;
  text-align: left;
  width: 100%;
}
.mnav-item:hover,
.mnav-item:active {
  background: rgba(0,207,255,0.10);
  color: #fff;
}
.mnav-item.active {
  background: rgba(0,207,255,0.14);
  color: var(--accent);
  font-weight: 700;
}

/* アイコン */
.mnav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.mnav-item.active .mnav-icon { color: var(--accent); }

/* アクセントカラー項目（アカウント作成） */
.mnav-item.mnav-accent { color: var(--accent); font-weight: 700; }
.mnav-item.mnav-accent .mnav-icon { color: var(--accent); }

/* 危険色項目（サインアウト） */
.mnav-item.mnav-danger { color: #FF6B6B; }
.mnav-item.mnav-danger .mnav-icon { color: #FF6B6B; }

/* インストールボタン */
.mnav-item.mnav-install { color: #38BDF8; }
.mnav-item.mnav-install .mnav-icon { color: #38BDF8; }

/* ====================================================
   RESPONSIVE: MENU button already always visible
   ==================================================== */
@media (max-width: 768px) {
  /* menu-dropdown-btn は常時表示なので追加設定不要 */
  .mobile-menu-btn { display: none !important; }
}

/* ====================================================
   PIN PREVIEW: homeビュー以外では非表示
   ==================================================== */
/* #viewRoutes または #viewAbout がアクティブのとき、pin-previewを強制非表示 */
/* JSでも制御しているが、CSS側でも二重ガードとして設定 */
#viewRoutes.active ~ * .pin-preview,
#viewAbout.active ~ * .pin-preview {
  display: none !important;
}

/* よりシンプルな方法: homeビューが非アクティブのときにpin-previewを隠す */
/* body に data-view 属性を付与する方式 */
body[data-active-view="routes"] .pin-preview,
body[data-active-view="about"] .pin-preview {
  display: none !important;
  pointer-events: none !important;
}