/* =====================================================
   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-globe-icon {
  font-size: 13px;
  color: var(--accent);
}
.lang-flag {
  display: none;
}
.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; }
/* 追加: Mapboxのデフォルトコントロール完全非表示 */
.mapboxgl-ctrl-top-left,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group,
.mapboxgl-ctrl.mapboxgl-ctrl-group,
.mapboxgl-control-container .mapboxgl-ctrl-group {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: 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; top: 230px; 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; }

/* ── 独立YouTubeリンク表示 (viewモード) ── */
.dp-youtube-link-view {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin: 4px 0 8px;
  background: rgba(255,68,68,0.06);
  border: 1px solid rgba(255,68,68,0.2);
  border-radius: 8px;
  font-size: 13px;
}
.dp-youtube-link-view i { color: #FF4444; flex-shrink: 0; }
.dp-youtube-link-text {
  color: #FF4444;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-youtube-link-text:hover { text-decoration: underline; }

/* ── 独立YouTubeリンク編集フィールド (editモード) ── */
.dp-youtube-link-edit {
  margin: 4px 0 10px;
}
.dp-youtube-link-edit .dp-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 4px;
}
.dp-youtube-link-preview {
  display: none; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 12px; color: #aaa;
}

/* ── flow モーダルの独立YouTubeリンクプレビュー ── */
.flow-youtube-link-preview {
  display: none; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 12px; color: #aaa;
}


  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  margin-top: 4px;     /* 上の要素との間隔を確保 */
  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 8px; gap: 0; }
  .lang-globe-icon { font-size: 15px; }

  /* ヘッダーの検索・ブックマークボタンはハンバーガーメニューに統合されるため非表示 */
  #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; top: 230px; bottom: auto; }

  .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 {
  display: none;
}
.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; }
}

/* ── Back bar: actions right side ── */
.gm-back-bar {
  grid-template-columns: 1fr auto 1fr !important;
}
.gm-bar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.gm-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(66,133,244,0.12);
  border: 1.5px solid rgba(66,133,244,0.35);
  border-radius: 8px;
  color: #5ba3ff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.gm-action-btn:hover { background: rgba(66,133,244,0.28); border-color: rgba(66,133,244,0.8); color: #fff; }
.gm-action-btn.active { background: rgba(66,133,244,0.45); border-color: #4285F4; color: #fff; }

/* ── Map container fills remaining space ── */
.gm-map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.gm-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5ba3ff;
  font-size: 15px;
  gap: 10px;
  background: #030712;
  z-index: 5;
}

/* ── Search bar ── */
.gm-search-bar {
  flex-shrink: 0;
  position: relative;
  padding: 8px 12px;
  background: rgba(2,6,18,0.96);
  border-bottom: 1px solid rgba(66,133,244,0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gm-search-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(66,133,244,0.30);
  border-radius: 10px;
  padding: 0 10px;
  gap: 8px;
  transition: border-color 0.18s;
}
.gm-search-input-wrap:focus-within {
  border-color: rgba(66,133,244,0.75);
  background: rgba(255,255,255,0.09);
}
.gm-search-icon { color: #5ba3ff; font-size: 13px; flex-shrink: 0; }
.gm-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e8f0fe;
  font-size: 14px;
  padding: 9px 0;
}
.gm-search-input::placeholder { color: rgba(200,210,240,0.4); }
.gm-search-clear {
  background: none;
  border: none;
  color: rgba(200,210,240,0.5);
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.gm-search-clear:hover { color: #e8f0fe; }

/* ── Directions panel ── */
.gm-directions-panel {
  flex-shrink: 0;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(2,6,18,0.96);
  border-bottom: 1px solid rgba(66,133,244,0.2);
}
.gm-dir-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gm-dir-icon { font-size: 13px; flex-shrink: 0; width: 16px; text-align: center; }
.gm-dir-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(66,133,244,0.25);
  border-radius: 8px;
  color: #e8f0fe;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}
.gm-dir-input:focus { border-color: rgba(66,133,244,0.7); }
.gm-dir-mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gm-dir-mode-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(66,133,244,0.25);
  border-radius: 8px;
  color: #7ba3d0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gm-dir-mode-btn.active  { background: rgba(66,133,244,0.35); border-color: #4285F4; color: #fff; }
.gm-dir-mode-btn:hover   { background: rgba(66,133,244,0.25); border-color: rgba(66,133,244,0.6); color: #fff; }
.gm-dir-go-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #4285F4, #1a73e8);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.gm-dir-go-btn:hover  { opacity: 0.9; }
.gm-dir-go-btn:active { transform: scale(0.96); }
.gm-dir-result {
  font-size: 12px;
  color: #94a3b8;
  min-height: 18px;
}
.gm-dir-summary {
  display: flex;
  gap: 16px;
  color: #60a5fa;
  font-weight: 600;
}
.gm-dir-summary i { margin-right: 4px; color: #4285F4; }

/* ── Google Maps InfoWindow custom style ── */
.gm-info-win {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a2e;
  max-width: 220px;
  padding: 2px 0;
}
.gm-info-win strong { display: block; margin-bottom: 2px; }
.gm-info-win small { color: #555; }

/* ====================================================
   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);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.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 — preview + mask for free users */
.detail-access-locked {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid rgba(255,215,0,0.1);
  overflow: hidden;
}
/* Preview area: blurred item list */
.detail-access-preview {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,0,0,0.15);
}
.detail-access-preview-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  opacity: 0.6;
}
.detail-access-preview-item i {
  color: rgba(255,215,0,0.6);
  width: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.detail-access-preview-item label {
  display: block;
  font-size: 10px;
  color: rgba(255,215,0,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
/* Masked value: dots */
.detail-access-masked-val {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 8px;
  width: 80px;
  letter-spacing: 0.15em;
}
/* Preview block: stripe bar */
.detail-access-preview-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0.6;
}
.detail-access-preview-block .detail-access-block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,215,0,0.6);
}
.detail-access-preview-block .detail-access-block-label i {
  color: rgba(255,215,0,0.6);
  font-size: 11px;
}
/* Stripe masked block */
.detail-access-masked-block {
  height: 32px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 4px,
    rgba(255,255,255,0.01) 4px,
    rgba(255,255,255,0.01) 8px
  );
  border-left: 2px solid rgba(255,215,0,0.15);
}
/* Lock CTA overlay */
.detail-access-lock-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 16px;
  background: rgba(0,8,24,0.6);
  border-top: 1px solid rgba(255,215,0,0.12);
  text-align: center;
}
.detail-access-lock-icon {
  font-size: 20px;
  color: rgba(255,215,0,0.85);
  margin-bottom: 2px;
}
.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.5);
  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;
  flex-shrink: 0;
}
.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:70px; right:14px;
  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;
  pointer-events:auto; z-index:20;
}
.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:230px;
  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); }

/* ══ ピンプレビューカード（左寄せ・右ボタン列を回避） ══ */
/* 右ボタン列: right:14px + width:38px = 52px 占有
   プレビュー: left:12px 〜 right:66px (=52+14) まで。最大幅240px */
.pin-preview {
  position:fixed;
  left:12px;
  right:66px;
  bottom:204px;
  max-width:260px;
  width:auto;
  transform:translateY(12px);
  background:rgba(2,8,28,0.92);
  border:1px solid rgba(0,229,255,0.55);
  border-top:2px solid rgba(0,229,255,0.90);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(16px);
  z-index:200;
  pointer-events:none;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
              visibility 0.35s,
              transform 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);
}
.pin-preview.visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  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 {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block; transition:transform 0.5s ease;
  z-index:1;
}
.pp-thumb-placeholder {
  position:absolute; inset:0;
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:34px; opacity:0.5;
  z-index:1;
}
/* サムネイル上のタイトルオーバーレイ */
.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;
  z-index:3;  /* scanline(z:1) および img より前面 */
}
.pp-thumb-title {
  font-size:12px; font-weight:800; color:#EEF4FF;
  letter-spacing:0.3px; line-height:1.3;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
  /* 2行まで表示・3行目以降は...省略 */
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
/* ── カード本体 ── */
.pp-body { padding:7px 10px 8px; }

.pp-header {
  display:flex; align-items:center; gap:6px; margin-bottom:6px;
  flex-wrap:wrap;
}
.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:8px; font-family:'Courier New',monospace;
  color:rgba(0,200,255,0.45); letter-spacing:0.8px;
  margin-left:auto; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:80px;
}
/* .pp-title は pp-thumb-title に統合のため削除 */
.pp-location {
  font-size:10px; color:var(--text-muted);
  display:flex; align-items:center; gap:5px;
  margin-bottom:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.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}

/* view-toggle-bar は削除済み（Globe Viewと統合） */
.view-toggle-bar { display:none; }
/* vt-btn / vt-label JS互換スタブ */
.vt-btn { display:none; }
.vt-label { display:none; }

/* ══ ピン横ラベル（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: map-controls列の最下部に配置（ピル型） */
.fab-add {
  position:relative;
  width:38px;
  height:38px;
  padding:0;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(0,207,255,0.22), rgba(0,90,170,0.18));
  border:1.5px solid rgba(0,229,255,0.80);
  color:rgba(0,240,255,1.0);
  display:flex; align-items:center; justify-content:center;
  white-space:nowrap;
  cursor:pointer; z-index:25;
  box-shadow:0 0 16px rgba(0,200,255,0.35), 0 3px 14px rgba(0,0,0,0.55);
  transition:var(--transition);
  overflow:visible;
}
.fab-icon {
  font-size:14px; font-weight:600; line-height:1; flex-shrink:0;
  color:rgba(0,240,255,1.0);
}
.fab-label {
  display:none; /* アイコンのみ表示 */
}
.fab-add:hover {
  background:linear-gradient(135deg, rgba(0,207,255,0.38), rgba(0,140,220,0.28));
  border-color:rgba(0,229,255,1.0);
  box-shadow:0 0 24px rgba(0,200,255,0.55), 0 4px 18px rgba(0,0,0,0.55);
  transform:scale(1.05);
  color:rgba(0,255,255,1.0);
}
.fab-add:active { transform: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: 230px !important;
  bottom: auto !important;
  transform: none !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 (右上固定) ── */
/* 上の .speed-control 定義で管理（重複を避けるため空ルール） */
.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;
}

/* Globe/Map toggle bar: show (デモデザイン通り表示) */
/* .view-toggle-bar はすでにCSSで display:flex が定義済み */
/* Three.js wrapper: hidden by default, shown via showGlobeView() */
/* #threeGlobeWrapper は JS (showGlobeView/showMapView) で制御 */

/* 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: map-controls列内に配置（position:relative、override） */
.fab-add {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

/* pin-preview: 重複定義削除済み。メイン定義は上部の .pin-preview { ... } を参照 */

/* 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;
}

/* =====================================================
   COMMUNITY PAGE
   ===================================================== */

/* Layout */
.community-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  gap: 0;
  background: var(--bg-primary);
}

/* Sidebars */
.community-sidebar {
  width: 230px;
  min-width: 200px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(0,207,255,0.10);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,207,255,0.2) transparent;
}
.community-sidebar-right {
  border-right: none;
  border-left: 1px solid rgba(0,207,255,0.10);
}

/* Center */
.community-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Cards */
.comm-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,207,255,0.15);
  border-radius: 10px;
  padding: 14px;
}

.comm-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

/* Profile card */
.comm-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  gap: 10px;
}

.comm-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,207,255,0.15);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}

.comm-profile-info {
  width: 100%;
}

.comm-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-profile-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.comm-pstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.comm-pstat small {
  font-size: 9px;
  font-weight: 400;
  color: rgba(238,244,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Trending list */
.comm-trending-list, .comm-explorer-list, .comm-groups-list, .comm-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comm-trending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(238,244,255,0.75);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.comm-trending-item:hover {
  background: rgba(0,207,255,0.10);
  color: var(--accent);
}
.comm-trending-item span {
  font-size: 10px;
  color: rgba(238,244,255,0.4);
  background: rgba(0,207,255,0.08);
  padding: 1px 5px;
  border-radius: 8px;
}

/* Explorer list */
.comm-explorer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.comm-ex-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,207,255,0.15);
  border: 1px solid rgba(0,207,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.comm-ex-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comm-ex-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.comm-ex-info span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-ex-info small {
  font-size: 10px;
  color: rgba(238,244,255,0.45);
}

/* Tabs */
.comm-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid rgba(0,207,255,0.12);
  flex-shrink: 0;
}

.comm-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: rgba(238,244,255,0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.comm-tab:hover {
  color: var(--accent);
}
.comm-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.comm-tab i {
  font-size: 11px;
}

/* Panels */
.comm-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,207,255,0.2) transparent;
  flex-direction: column;
  gap: 12px;
}
.comm-panel.active {
  display: flex;
}

/* Composer */
.comm-composer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,207,255,0.10);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.comm-composer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,207,255,0.15);
  border: 1px solid rgba(0,207,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}

.comm-composer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.comm-composer-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid rgba(0,207,255,0.20);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  min-height: 44px;
  max-height: 160px;
}
.comm-composer-input::placeholder { color: rgba(238,244,255,0.35); }
.comm-composer-input:focus { border-color: var(--accent); }

.comm-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comm-composer-tools {
  display: flex;
  gap: 4px;
}

.comm-tool-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(0,207,255,0.08);
  border-radius: 6px;
  color: rgba(238,244,255,0.5);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.comm-tool-btn:hover { background: rgba(0,207,255,0.18); color: var(--accent); }

.comm-post-btn {
  padding: 7px 18px;
  background: linear-gradient(135deg, rgba(0,207,255,0.85), rgba(0,150,255,0.85));
  border: none;
  border-radius: 8px;
  color: #020712;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.comm-post-btn:hover { opacity: 0.85; }
.comm-post-btn:active { transform: scale(0.95); }
.comm-post-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Login prompt */
.comm-login-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,207,255,0.10);
  background: var(--bg-secondary);
  font-size: 12px;
  color: rgba(238,244,255,0.5);
  flex-shrink: 0;
}
.comm-signin-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: rgba(0,207,255,0.15);
  border: 1px solid rgba(0,207,255,0.35);
  border-radius: 7px;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.comm-signin-btn:hover { background: rgba(0,207,255,0.25); }

/* Post Cards */
.comm-post-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,207,255,0.12);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}
.comm-post-card:hover {
  border-color: rgba(0,207,255,0.28);
}

.comm-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comm-post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,207,255,0.15);
  border: 1px solid rgba(0,207,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.comm-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comm-avatar-initials {
  font-weight: 700;
  color: var(--accent);
}

.comm-post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.comm-post-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-post-time {
  font-size: 11px;
  color: rgba(238,244,255,0.40);
}

.comm-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-post-text {
  font-size: 13px;
  color: rgba(238,244,255,0.85);
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}

.comm-post-image {
  border-radius: 8px;
  overflow: hidden;
  max-height: 220px;
}
.comm-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comm-post-route {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.18);
  border-radius: 7px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-post-route:hover { background: rgba(0,207,255,0.14); }

.comm-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.comm-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(0,207,255,0.08);
  border-radius: 20px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.comm-tag:hover { background: rgba(0,207,255,0.20); }

/* Actions */
.comm-post-actions {
  display: flex;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(0,207,255,0.08);
}
.comm-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.12);
  border-radius: 20px;
  color: rgba(238,244,255,0.55);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.comm-action-btn:hover { background: rgba(0,207,255,0.15); color: var(--accent); }
.comm-like-btn.active { color: #ff4d6d; border-color: rgba(255,77,109,0.35); background: rgba(255,77,109,0.08); }

/* Comments section */
.comm-comments-section {
  border-top: 1px solid rgba(0,207,255,0.08);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.comm-comment {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  font-size: 12px;
}
.comm-comment-author { font-weight: 700; color: var(--accent); }
.comm-comment-text { color: rgba(238,244,255,0.80); }
.comm-comment-time { font-size: 10px; color: rgba(238,244,255,0.35); margin-left: auto; }
.comm-comment-form {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.comm-comment-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid rgba(0,207,255,0.20);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}
.comm-comment-input::placeholder { color: rgba(238,244,255,0.3); }
.comm-comment-input:focus { border-color: var(--accent); }
.comm-comment-send {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(0,207,255,0.15);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.comm-comment-send:hover { background: rgba(0,207,255,0.30); }

/* Groups sidebar */
.comm-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.comm-group-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(0,207,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.comm-group-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.comm-group-info span { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-group-info small { font-size: 10px; color: rgba(238,244,255,0.40); }
.comm-join-btn {
  padding: 3px 10px;
  background: rgba(0,207,255,0.12);
  border: 1px solid rgba(0,207,255,0.28);
  border-radius: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.comm-join-btn:hover { background: rgba(0,207,255,0.25); }

/* Groups Panel grid */
.comm-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px 0;
}
.comm-group-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,207,255,0.15);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: border-color 0.2s;
}
.comm-group-card:hover { border-color: rgba(0,207,255,0.35); }
.comm-group-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.comm-group-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.comm-group-card-meta {
  font-size: 11px;
  color: rgba(238,244,255,0.45);
}

/* Notifications */
.comm-notif-empty {
  font-size: 18px;
  color: rgba(238,244,255,0.25);
  text-align: center;
  padding: 12px;
}

/* Discussion disc */
.comm-disc-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.comm-disc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.comm-disc-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0,207,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
.comm-transport-badge {
  padding: 2px 8px;
  background: rgba(0,207,255,0.12);
  border: 1px solid rgba(0,207,255,0.22);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Loaders / Empty states */
.comm-loading {
  text-align: center;
  padding: 24px;
  color: var(--accent);
  font-size: 20px;
  opacity: 0.6;
}
.comm-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(238,244,255,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.comm-empty i { font-size: 30px; color: rgba(0,207,255,0.3); }
.comm-empty p { font-size: 13px; }

/* Load more */
.comm-load-more {
  display: none;
  margin: 4px auto 8px;
  padding: 8px 24px;
  background: rgba(0,207,255,0.10);
  border: 1px solid rgba(0,207,255,0.25);
  border-radius: 20px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  align-self: center;
}
.comm-load-more:hover { background: rgba(0,207,255,0.22); }

/* Mobile responsive */
@media (max-width: 900px) {
  .community-sidebar-left {
    display: none;
  }
  .community-sidebar-right {
    display: none;
  }
}

@media (max-width: 768px) {
  .comm-tabs {
    overflow-x: auto;
    gap: 2px;
    padding: 10px 12px 0;
  }
  .comm-tab {
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .comm-panel {
    padding: 12px;
  }
}

/* ================================================================
   PREMIUM PAGE
   ================================================================ */
#viewPremium {
  overflow-y: auto;
  background: var(--bg-primary);
}
.premium-page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: var(--text-primary);
}
.pp-hero {
  text-align: center;
  padding: 48px 20px 40px;
  border-bottom: 1px solid rgba(56,189,248,0.15);
  margin-bottom: 40px;
}
.pp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(250,204,21,0.2), rgba(251,146,60,0.15));
  border: 1px solid rgba(250,204,21,0.4);
  color: #FACC15;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.pp-hero-title {
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 12px;
  line-height: 1.25;
}
.pp-hero-title span {
  color: #FACC15;
}
.pp-hero-sub {
  font-size: 15px;
  color: var(--text-dim);
  margin: 0 0 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.pp-coming-soon-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.3);
  color: #38BDF8;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.pp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.pp-feature-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s;
}
.pp-feature-card:hover {
  border-color: rgba(250,204,21,0.3);
}
.pp-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(250,204,21,0.15), rgba(251,146,60,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FACC15;
  font-size: 18px;
  margin-bottom: 14px;
}
.pp-feature-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}
.pp-feature-card p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.6;
}
.pp-pricing-section {
  margin-bottom: 48px;
}
.pp-pricing-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
}
.pp-pricing-subtitle {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 28px;
}
.pp-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}
.pp-plan-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
}
.pp-plan-premium {
  border-color: rgba(250,204,21,0.4);
  background: linear-gradient(135deg, rgba(250,204,21,0.05), rgba(251,146,60,0.03));
}
.pp-plan-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: var(--text-dim);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.pp-plan-badge-premium {
  background: linear-gradient(135deg, rgba(250,204,21,0.25), rgba(251,146,60,0.2));
  color: #FACC15;
  border: 1px solid rgba(250,204,21,0.3);
}
.pp-plan-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.pp-plan-price {
  margin-bottom: 20px;
}
.pp-plan-amount {
  font-size: 36px;
  font-weight: 700;
  color: #FACC15;
}
.pp-plan-period {
  font-size: 14px;
  color: var(--text-dim);
  margin-left: 4px;
}
.pp-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.pp-plan-features li {
  font-size: 13px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pp-plan-features li .fas.fa-check {
  color: #22C55E;
  font-size: 11px;
}
.pp-plan-locked {
  color: var(--text-dim);
  opacity: 0.5;
}
.pp-plan-locked .fas {
  color: rgba(255,255,255,0.3) !important;
}
.pp-plan-coming-soon {
  text-align: center;
  font-size: 12px;
  color: #38BDF8;
  font-weight: 600;
  padding: 8px;
  border: 1px dashed rgba(56,189,248,0.3);
  border-radius: 8px;
}
.pp-notify-section {
  text-align: center;
  padding: 40px 20px;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 16px;
}
.pp-notify-icon {
  font-size: 36px;
  color: #38BDF8;
  margin-bottom: 16px;
  display: block;
}
.pp-notify-section h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.pp-notify-section p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 20px;
}
.pp-notify-btn {
  background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(56,189,248,0.1));
  border: 1px solid rgba(56,189,248,0.4);
  color: #38BDF8;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.pp-notify-btn:hover {
  background: rgba(56,189,248,0.25);
  transform: translateY(-1px);
}

/* ================================================================
   COMPANY PAGE
   ================================================================ */
#viewCompany {
  overflow-y: auto;
  background: var(--bg-primary);
}
.company-page-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: var(--text-primary);
}
.company-hero {
  text-align: center;
  padding: 40px 20px 36px;
  border-bottom: 1px solid rgba(56,189,248,0.15);
  margin-bottom: 40px;
}
.company-logo-icon {
  width: 64px;
  height: 64px;
  position: relative;
  margin: 0 auto 16px;
}
.company-logo-icon .logo-orbit {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(56,189,248,0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.company-logo-icon .logo-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #38BDF8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.company-hero h1 {
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 8px;
}
.company-tagline {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}
.company-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.company-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
}
.company-section-title {
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  background: rgba(56,189,248,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #38BDF8;
}
.company-table {
  width: 100%;
  border-collapse: collapse;
}
.company-table th,
.company-table td {
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: left;
  vertical-align: top;
}
.company-table th {
  width: 180px;
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}
.company-table td {
  color: var(--text-primary);
}
.company-blank {
  color: rgba(255,255,255,0.2) !important;
  font-style: italic;
}
.company-vision-block {
  padding: 16px 20px;
}
.company-vision-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}
.company-blank-block {
  background: rgba(255,255,255,0.02);
}
.company-history {
  padding: 12px 20px;
}
.company-history-item {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  align-items: flex-start;
}
.company-history-year {
  min-width: 80px;
  font-weight: 600;
  color: #38BDF8;
}
@media (max-width: 600px) {
  .company-table th {
    width: 120px;
    font-size: 12px;
  }
  .company-table td {
    font-size: 12px;
  }
  .company-table th,
  .company-table td {
    padding: 10px 14px;
  }
  .pp-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PREMIUM PAGE (redesigned - content info page) ===== */
.pp-section {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
.pp-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-section-title i {
  color: #FACC15;
}
.pp-info-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 24px;
  color: #94A3B8;
  font-size: 14px;
  line-height: 1.7;
}
.pp-access-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pp-access-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 20px;
}
.pp-access-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FACC15, #F59E0B);
  color: #0F172A;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-access-step-text strong {
  display: block;
  color: #F1F5F9;
  font-size: 14px;
  margin-bottom: 4px;
}
.pp-access-step-text p {
  color: #94A3B8;
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}
.pp-notice-section {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 24px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 16px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.pp-notice-icon {
  font-size: 28px;
  color: #38BDF8;
  margin-top: 4px;
  flex-shrink: 0;
}
.pp-notice-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: #F1F5F9;
  margin: 0 0 8px;
}
.pp-notice-section p {
  font-size: 13px;
  color: #94A3B8;
  margin: 0 0 14px;
  line-height: 1.6;
}
.pp-contact-btn {
  background: linear-gradient(135deg, #38BDF8, #0EA5E9);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.pp-contact-btn:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .pp-notice-section { flex-direction: column; gap: 12px; }
}

/* ===== ROUTE CARD PREMIUM LOCK BADGE ===== */
.route-card-image {
  position: relative;
}
.route-card-premium-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(250,204,21,0.92);
  color: #0F172A;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}
.route-card-premium-locked {
  opacity: 0.85;
}
.route-card-premium-locked .route-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.3);
  border-radius: inherit;
}

/* ===== LEGAL PAGES (Privacy / Contact / Operator) ===== */
#viewPrivacy,
#viewContact,
#viewOperator {
  overflow-y: auto;
  background: var(--bg-primary);
}

.legal-page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 100px;
  color: var(--text-primary);
}

.legal-hero {
  text-align: center;
  padding: 40px 20px 36px;
  border-bottom: 1px solid rgba(56,189,248,0.15);
  margin-bottom: 40px;
}

.legal-hero-icon {
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}

.legal-hero h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.legal-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}

.legal-updated {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.legal-section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(56,189,248,0.08);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}

.legal-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 10px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-list li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  padding-left: 18px;
  position: relative;
}

.legal-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.legal-list li strong {
  color: var(--text-primary);
}

.legal-list li a {
  color: var(--accent);
  text-decoration: underline;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border: 1px solid rgba(56,189,248,0.15);
  text-align: left;
  color: var(--text-secondary);
  line-height: 1.5;
}

.legal-table th {
  background: rgba(56,189,248,0.06);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  width: 30%;
}

.legal-table td a {
  color: var(--accent);
  text-decoration: underline;
}

.company-blank {
  color: var(--muted) !important;
  font-style: italic;
}

/* ── Contact Form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.contact-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-required {
  color: #f87171;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
  border-color: var(--accent);
  background: rgba(56,189,248,0.04);
}

.contact-form-group select option {
  background: #1a2235;
  color: var(--text-primary);
}

.contact-form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-char-count {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.contact-privacy-check {
  flex-direction: row;
  align-items: flex-start;
}

.contact-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}

.contact-checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.contact-submit-btn {
  background: linear-gradient(135deg, var(--accent), #0284c7);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.1s;
}

.contact-submit-btn:hover {
  opacity: 0.9;
}

.contact-submit-btn:active {
  transform: scale(0.98);
}

.contact-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-success-msg {
  text-align: center;
  padding: 40px 20px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 12px;
  margin-top: 16px;
}

.contact-success-msg i {
  font-size: 40px;
  color: #22c55e;
  margin-bottom: 12px;
  display: block;
}

.contact-success-msg h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.contact-success-msg p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.contact-error-msg {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: #f87171;
}

/* ── Legal link button ── */
.legal-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

/* ── Operator features ── */
.operator-table th {
  width: 35%;
}

.operator-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.operator-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(56,189,248,0.1);
  border-radius: 10px;
}

.operator-feature-item > i {
  font-size: 22px;
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.operator-feature-item h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.operator-feature-item p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ── Legal pages footer link bar ── */
.legal-footer-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(56,189,248,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.legal-footer-nav button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s;
}

.legal-footer-nav button:hover {
  color: var(--accent);
}

/* ============================================================
   利用規約・特商法ページ 追加スタイル
   ============================================================ */

/* 利用規約・特商法ビュー スクロール対応 */
#viewTerms,
#viewCommercial {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary, #030712);
  z-index: 10;
}

/* 箇条書きリスト */
.legal-list {
  margin: 10px 0 0 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.8;
}
.legal-list li {
  margin-bottom: 6px;
  font-size: 14px;
}

/* 特商法 準備中バッジ */
.commercial-pending {
  display: inline-block;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* 特商法 お知らせブロック */
.commercial-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  line-height: 1.7;
}
.commercial-notice i {
  color: #38bdf8;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.commercial-notice p {
  margin: 0;
}

/* 制定日テキスト */
.legal-revised {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  text-align: right;
}

/* セクション最後の余白調整 */
.legal-section-last {
  padding-bottom: 40px;
}

/* ============================================================
   モデレーション・通報システム スタイル
   ============================================================ */

/* 通報ボタン */
.comm-report-btn { opacity: 0.4; transition: opacity 0.2s, color 0.2s; }
.comm-report-btn:hover { opacity: 1; color: #ef4444 !important; }

/* モーダルオーバーレイ共通 */
.mod-modal-overlay,
.mod-dashboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}

/* 通報モーダル */
.mod-modal {
  background: #0f172a;
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}
.mod-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mod-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mod-modal-header h3 i { color: #ef4444; }
.mod-modal-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s;
}
.mod-modal-close:hover { color: #f1f5f9; }
.mod-modal-body { padding: 20px; }
.mod-modal-desc {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 16px;
}
.mod-reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.mod-reason-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mod-reason-item:hover { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.3); }
.mod-reason-item input[type="radio"] { accent-color: #38bdf8; }
.mod-reason-item span { font-size: 13px; color: #cbd5e1; }
.mod-detail-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #f1f5f9;
  padding: 10px 12px;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}
.mod-detail-input:focus { outline: none; border-color: rgba(56,189,248,0.4); }
.mod-msg { margin-top: 12px; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
.mod-msg-ok { background: rgba(34,197,94,0.15); color: #86efac; }
.mod-msg-error { background: rgba(239,68,68,0.15); color: #fca5a5; }
.mod-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mod-btn-cancel {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.mod-btn-submit {
  background: #ef4444;
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.mod-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* モデレーションダッシュボード */
.mod-dashboard {
  background: #0f172a;
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mod-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mod-dashboard-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mod-dashboard-header h2 i { color: #38bdf8; }
.mod-dashboard-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mod-tab {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.mod-tab.active, .mod-tab:hover { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.4); color: #38bdf8; }
.mod-dashboard-content { flex: 1; overflow-y: auto; padding: 20px; }

/* 統計グリッド */
.mod-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.mod-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.mod-stat-card i { font-size: 22px; color: #38bdf8; margin-bottom: 8px; display: block; }
.mod-stat-num { font-size: 28px; font-weight: 700; color: #f1f5f9; }
.mod-stat-label { font-size: 11px; color: #64748b; margin-top: 4px; }
.mod-stat-warn { border-color: rgba(251,191,36,0.3); }
.mod-stat-warn i { color: #fbbf24; }
.mod-stat-danger { border-color: rgba(239,68,68,0.3); }
.mod-stat-danger i { color: #ef4444; }

/* 通報一覧 */
.mod-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.mod-filter-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
}
.mod-filter-btn.active { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.4); color: #38bdf8; }
.mod-report-list { display: flex; flex-direction: column; gap: 10px; }
.mod-report-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
}
.mod-report-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mod-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
}
.mod-report-type { font-size: 12px; color: #94a3b8; }
.mod-report-time { font-size: 11px; color: #475569; margin-left: auto; }
.mod-report-detail { font-size: 12px; color: #94a3b8; font-style: italic; margin: 4px 0 8px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,0.1); }
.mod-report-reporter { font-size: 11px; color: #475569; margin-bottom: 10px; }
.mod-report-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-btn-sm {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  transition: all 0.15s;
}
.mod-btn-sm:hover { background: rgba(255,255,255,0.12); }
.mod-btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
.mod-btn-warn { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.mod-btn-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.mod-btn-ok { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.3); }

/* セキュリティログ */
.mod-log-list { display: flex; flex-direction: column; gap: 6px; }
.mod-log-item {
  display: grid;
  grid-template-columns: 40px 1fr 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 12px;
  border-left: 3px solid transparent;
}
.mod-log-critical { border-left-color: #ef4444; }
.mod-log-high { border-left-color: #f97316; }
.mod-log-medium { border-left-color: #fbbf24; }
.mod-log-low { border-left-color: #22c55e; }
.mod-log-sev { font-size: 10px; font-weight: 700; }
.mod-sev-critical { color: #fca5a5; }
.mod-sev-high { color: #fdba74; }
.mod-sev-medium { color: #fde68a; }
.mod-sev-low { color: #86efac; }
.mod-log-action { color: #cbd5e1; font-weight: 500; }
.mod-log-detail { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-log-user { color: #94a3b8; }
.mod-log-time { color: #475569; white-space: nowrap; }

/* 共通 */
.mod-loading { text-align: center; color: #64748b; padding: 40px; font-size: 14px; }
.mod-empty { text-align: center; color: #475569; padding: 40px; font-size: 14px; }
.mod-error { text-align: center; color: #fca5a5; padding: 20px; }
.mod-link-btn { background: none; border: none; color: #38bdf8; cursor: pointer; font-size: 12px; padding: 0; }

/* トースト通知 */
.mod-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: modToastIn 0.3s ease;
}
.mod-toast-success { background: rgba(34,197,94,0.9); color: #fff; }
.mod-toast-error { background: rgba(239,68,68,0.9); color: #fff; }
.mod-toast-info { background: rgba(56,189,248,0.9); color: #fff; }
@keyframes modToastIn { from { opacity:0; transform: translateX(-50%) translateY(10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

/* ================================================================
   RESPONSIVE ENHANCEMENT — Multi-Device Adaptive Layout
   追加日: 2026-04-05
   方針:
     - 既存CSS/HTML/UIは一切変更しない
     - このブロックのみで全デバイス対応を追加する
     - ブレークポイント体系:
         xs:  〜 374px  (iPhone SE 第1世代 / 極小スマホ)
         sm:  375px〜 479px  (iPhone SE 第2/3世代 / 標準スマホ)
         md:  480px〜 767px  (大型スマホ / 小型タブレット縦向き)
         lg:  768px〜 1023px (タブレット)
         xl: 1024px〜       (デスクトップ)
     - 縦高さ対応:
         short: max-height 667px (iPhone SE 縦向き)
         xshort: max-height 600px (横向き時など)
   ================================================================ */

/* ================================================================
   §1. CSS カスタムプロパティ — デバイス別スケール調整
   ================================================================ */

/* 標準スマホ (375px-479px) */
@media (max-width: 479px) {
  :root {
    --header-h: 50px;
    --radius: 10px;
    font-size: 13px;
  }
}

/* 極小スマホ (〜374px: iPhone SE 初代 / 旧Androidなど) */
@media (max-width: 374px) {
  :root {
    --header-h: 48px;
    font-size: 12px;
  }
}

/* ================================================================
   §2. ヘッダー — 小型端末での圧縮
   ================================================================ */

/* 375px〜479px: タイトル・ロゴを少しコンパクトに */
@media (max-width: 479px) {
  .app-header { padding: 0 10px; gap: 8px; }
  .title-main { font-size: 10px; letter-spacing: 1.5px; }
  .title-sub  { font-size: 7px;  letter-spacing: 2.5px; }
  .icon-btn   { width: 34px; height: 34px; font-size: 12px; }
  .header-right { gap: 4px; }
}

/* 374px以下: ロゴテキスト最小化 */
@media (max-width: 374px) {
  .app-header { padding: 0 8px; gap: 6px; }
  .title-main { font-size: 9px; letter-spacing: 1px; }
  .title-sub  { display: none; }
  .icon-btn   { width: 32px; height: 32px; font-size: 11px; }
  /* ロゴ軌道アニメーションを縮小 */
  .app-logo-orbit { width: 26px; height: 26px; }
}

/* ================================================================
   §3. コントロールバー — フィルター・検索の圧縮
   ================================================================ */

/* 479px以下: 検索バーとフィルターの間隔を詰める */
@media (max-width: 479px) {
  .control-bar { padding: 6px 8px; gap: 5px; }
  .search-bar-wrapper { min-width: 0; }
  .search-bar input { font-size: 12px; padding: 8px 0; }
  .filter-select { font-size: 11px; padding: 6px 22px 6px 7px; min-width: 88px; }
}

/* 374px以下: フィルターをアイコンのみに圧縮 */
@media (max-width: 374px) {
  .control-bar { padding: 5px 6px; gap: 4px; }
  .filter-select { min-width: 76px; font-size: 10px; padding: 5px 18px 5px 6px; }
  .search-bar input { font-size: 11px; }
}

/* ================================================================
   §4. マップ内オーバーレイUI — 小型端末での位置・サイズ調整
   ================================================================ */

/* 479px以下: ライブインジケーター・マップ統計パネルの縮小 */
@media (max-width: 479px) {
  .live-indicator {
    top: 8px; left: 8px;
    padding: 5px 9px;
    gap: 6px;
  }
  .live-label { font-size: 8px; letter-spacing: 1.5px; }
  .live-time  { font-size: 10px; letter-spacing: 1px; }
  .live-dot   { width: 6px; height: 6px; }

  .map-stats {
    top: 8px; right: 8px;
    padding: 5px 10px;
  }
  .stat-num   { font-size: 14px; }
  .stat-label { font-size: 8px; letter-spacing: 0.5px; }
  .stat-item  { padding: 0 7px; }
  .stat-divider { height: 22px; }
}

/* 374px以下: 統計パネルをさらに圧縮、ライブ時刻のみ */
@media (max-width: 374px) {
  .live-indicator { padding: 4px 8px; gap: 5px; }
  .live-label     { display: none; }
  .live-time      { font-size: 9px; }

  .map-stats      { padding: 4px 8px; }
  .stat-num       { font-size: 12px; }
  .stat-label     { font-size: 7px; }
  .stat-item      { padding: 0 5px; }
  .stat-divider   { height: 18px; }
}

/* ================================================================
   §5. マップコントロールボタン列 — 縦位置調整
   ================================================================ */

/* 479px以下: ボタンを少し小さく、位置を右上に寄せる */
@media (max-width: 479px) {
  .map-controls { right: 8px; top: 170px; gap: 3px; }
  .map-ctrl-btn { width: 34px; height: 34px; font-size: 12px; border-radius: 8px; }
}

/* 縦画面が短い端末 (max-height: 667px): コントロールをより上に */
@media (max-height: 667px) and (max-width: 479px) {
  .map-controls { top: 140px; }
}

/* ================================================================
   §6. FAB ボタン (+ ADD ROUTE) — 小型端末
   ================================================================ */

/* 479px以下: ラベルを非表示にしてアイコンのみ (既存 768px 設定を補完) */
@media (max-width: 479px) {
  .fab-btn { bottom: 16px; right: 10px; padding: 0; width: 42px; height: 42px; border-radius: 12px; justify-content: center; }
  .fab-btn .fab-label { display: none; }
  .fab-btn i { font-size: 15px; }
}

/* ================================================================
   §7. HUD 下部パネル (座標・ミッション・トラッキング) — 小型端末
   ================================================================ */

/* 479px以下: HUD下部パネルの文字サイズ縮小・パディング削減 */
@media (max-width: 479px) {
  .hud-bottom-row { padding: 0 6px 6px !important; }
  .hud-mission    { padding: 5px 8px; }
  .hud-tracking   { padding: 5px 8px; }
  .hud-title      { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 4px; }
  .hud-row        { font-size: 8px; line-height: 1.6; }
  .hud-coord      { font-size: 8px; letter-spacing: 1px; padding: 3px 10px; }
}

/* 374px以下: HUD下部を最小化 */
@media (max-width: 374px) {
  .hud-mission  { display: none; }
  .hud-tracking { display: none; }
  .hud-coord    { font-size: 7px; padding: 3px 8px; }
}

/* 縦が短い端末 (横向きなど): HUD下部を非表示 */
@media (max-height: 500px) {
  .hud-bottom-row { display: none !important; }
}

/* ================================================================
   §8. 詳細パネル (Detail Panel) — 小型端末
   ================================================================ */

/* 374px以下: 詳細パネルの余白を詰める */
@media (max-width: 374px) {
  .detail-panel { border-radius: 16px 16px 0 0 !important; }
  .detail-header { padding: 14px 14px 10px; }
  .detail-title  { font-size: 15px; }
  .detail-body   { padding: 0 12px 16px; }
  .detail-desc   { font-size: 12px; }
  .dp-action-btn { padding: 8px 12px; font-size: 11px; }
}

/* 縦が短い端末: 詳細パネルの最大高さを制限 */
@media (max-height: 667px) and (max-width: 767px) {
  .detail-panel { max-height: 78vh !important; }
}
@media (max-height: 600px) and (max-width: 767px) {
  .detail-panel { max-height: 72vh !important; }
}

/* ================================================================
   §9. フォーム（ルート作成・編集） — 小型端末
   ================================================================ */

/* 479px以下: フォームのパディングを詰める */
@media (max-width: 479px) {
  .modal            { border-radius: 16px 16px 0 0; }
  .form-header      { padding: 14px 14px 10px; }
  .form-title       { font-size: 14px; }
  .form-body        { padding: 0 12px 16px; }
  .form-group label { font-size: 11px; }
  .form-input       { font-size: 13px; padding: 9px 12px; }
  .form-actions     { gap: 8px; padding: 12px 14px; }
  .form-submit-btn  { padding: 10px 20px; font-size: 12px; }
}

/* 縦が短い端末: フォームモーダルの高さ制限 */
@media (max-height: 667px) {
  .modal-overlay .modal { max-height: 90vh; overflow-y: auto; }
}

/* ================================================================
   §10. ルートグリッドページ — 端末別最適化
   ================================================================ */

/* タブレット縦向き (768px-1023px): 2列グリッド */
@media (min-width: 768px) and (max-width: 1023px) {
  .routes-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 大型スマホ (480px-767px): 2列グリッドにする */
@media (min-width: 480px) and (max-width: 767px) {
  .routes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .route-card-image { height: 110px; }
}

/* 374px以下: ルートカードをコンパクト化 */
@media (max-width: 374px) {
  .route-card-image  { height: 100px; }
  .route-card-body   { padding: 10px 10px 8px; }
  .route-card-title  { font-size: 12px; }
  .route-card-meta   { font-size: 10px; }
  .routes-header h2  { font-size: 14px; }
  .routes-search-input { font-size: 12px; }
}

/* ================================================================
   §11. コミュニティページ — スマホ最適化
   ================================================================ */

/* 479px以下: 投稿エリアをコンパクトに */
@media (max-width: 479px) {
  .comm-panel    { padding: 10px 8px; }
  .comm-post-composer { padding: 10px 10px; }
  .comm-post-input    { font-size: 13px; min-height: 60px; }
  .comm-post-actions  { gap: 4px; }
  .comm-action-bar    { padding: 8px 10px; gap: 4px; }
  .comm-card          { padding: 12px 10px; }
  .comm-card-text     { font-size: 13px; }
}

/* 374px以下: コミュニティの投稿カードをさらに圧縮 */
@media (max-width: 374px) {
  .comm-card      { padding: 10px 8px; }
  .comm-card-text { font-size: 12px; }
  .comm-action-btn { font-size: 11px; padding: 5px 8px; }
  .comm-tab       { padding: 6px 8px; font-size: 10px; }
}

/* ================================================================
   §12. Aboutページ / 法的ページ / 運営者情報 — スマホ最適化
   ================================================================ */

/* 479px以下: About・法的ページのパディングを削減 */
@media (max-width: 479px) {
  .about-container      { padding: 16px 14px 60px; }
  .about-hero           { padding: 24px 14px 20px; }
  .about-hero h1        { font-size: 18px; letter-spacing: 1px; }
  .about-hero p         { font-size: 12px; }
  .privacy-container    { padding: 16px 14px 60px; }
  .operator-container   { padding: 16px 14px 60px; }
  .terms-container      { padding: 16px 14px 60px; }
  .commercial-container { padding: 16px 14px 60px; }
  .legal-section h2     { font-size: 14px; }
  .legal-section p,
  .legal-section li     { font-size: 12px; line-height: 1.7; }
  .operator-table th,
  .operator-table td    { font-size: 12px; padding: 8px 10px; }
}

/* 374px以下: 法的ページのテーブルを縦積みに */
@media (max-width: 374px) {
  .operator-table,
  .operator-table tbody,
  .operator-table tr    { display: block; }
  .operator-table th    { display: block; padding: 8px 8px 2px; font-size: 10px; border-bottom: none; }
  .operator-table td    { display: block; padding: 2px 8px 10px; font-size: 11px; border-bottom: 1px solid rgba(0,207,255,0.1); }
}

/* ================================================================
   §13. 問い合わせフォーム — スマホ最適化
   ================================================================ */

@media (max-width: 479px) {
  .contact-container { padding: 16px 14px 60px; }
  .contact-form      { gap: 12px; }
  .contact-input,
  .contact-textarea  { font-size: 13px; padding: 10px 12px; }
  .contact-submit    { padding: 11px 20px; font-size: 13px; }
}

/* ================================================================
   §14. モーダル・オーバーレイ全般 — 小型端末
   ================================================================ */

/* 479px以下: モーダルを全画面に近い表示に */
@media (max-width: 479px) {
  .modal-overlay .modal { width: 100vw; border-radius: 14px 14px 0 0; position: fixed; bottom: 0; left: 0; margin: 0; }
  .auth-modal   { width: 100vw; border-radius: 14px 14px 0 0; }
}

/* ================================================================
   §15. モデレーションダッシュボード — スマホ対応
   ================================================================ */

@media (max-width: 600px) {
  .mod-dashboard        { width: 96vw; max-height: 88vh; border-radius: 14px; }
  .mod-dashboard-header { padding: 14px 14px 10px; }
  .mod-stats-grid       { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mod-stat-card        { padding: 12px 10px; }
  .mod-stat-num         { font-size: 22px; }
  .mod-report-item      { padding: 10px; }
  .mod-log-item         { grid-template-columns: 36px 1fr auto; }
  .mod-log-detail,
  .mod-log-user         { display: none; }
}

@media (max-width: 374px) {
  .mod-dashboard        { width: 100vw; border-radius: 12px 12px 0 0; }
  .mod-stats-grid       { grid-template-columns: 1fr 1fr; }
  .mod-dashboard-tabs   { gap: 2px; }
  .mod-tab              { padding: 7px 8px; font-size: 11px; }
}

/* ================================================================
   §16. 管理者パネル — スマホ対応補完
   ================================================================ */

/* 480px以下: サイドバーをアイコンのみに */
@media (max-width: 480px) {
  .admin-panel   { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; min-width: unset; flex-direction: row; padding: 8px 10px; border-right: none; border-bottom: 1px solid rgba(0,207,255,0.1); }
  .admin-nav     { flex-direction: row; gap: 2px; }
  .admin-nav-item span:not(.admin-nav-badge) { display: none; }
  .admin-nav-badge { display: none; }
  .admin-logo    { display: none; }
  .admin-sidebar-home span, .admin-sidebar-close span { display: none; }
  .admin-main    { overflow-y: auto; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   §17. ピンプレビューカード — スマホ最適化
   ================================================================ */

@media (max-width: 479px) {
  .pin-preview       { max-width: min(280px, 88vw); }
  .pin-preview-image { height: 100px; }
  .pin-preview-title { font-size: 12px; }
  .pin-preview-sub   { font-size: 10px; }
}

@media (max-width: 374px) {
  .pin-preview       { max-width: 92vw; }
  .pin-preview-image { height: 80px; }
}

/* ================================================================
   §18. 縦向き・横向き共通の高さ対応
   ================================================================ */

/* 横向き (landscapeかつ高さが少ない) */
@media (max-height: 450px) and (orientation: landscape) {
  /* ヘッダーを最小化 */
  :root { --header-h: 44px; }
  .title-sub { display: none; }
  /* HUD上部パネルを圧縮 */
  .live-indicator { padding: 3px 8px; gap: 4px; }
  .live-label     { display: none; }
  .live-time      { font-size: 9px; }
  .map-stats      { padding: 3px 8px; }
  .stat-num       { font-size: 12px; }
  /* マップコントロール位置を上に */
  .map-controls   { top: 90px; }
  /* FABを小さく */
  .fab-btn { bottom: 8px; width: 38px; height: 38px; }
}

/* ================================================================
   §19. タブレット (768px〜1023px) の最適化
   ================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  .app-header { padding: 0 16px; }
  /* コントロールバーの余裕を持たせる */
  .control-bar { padding: 8px 14px; }
  /* 詳細パネルをサイドパネルに (タブレット縦向きでは右サイド固定) */
  .detail-panel { max-height: 88vh; }
  /* About グリッドを3列に */
  .about-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   §20. セーフエリア対応 (iPhone のノッチ・ホームインジケーター)
   ================================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  /* ヘッダー: ノッチ対応 */
  .app-header {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  /* モバイルメニュー: ホームインジケーター対応 */
  .mobile-menu-drawer,
  .mobile-menu-panel {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* FABボタン: ホームインジケーターに被らないよう底上げ */
  @media (max-width: 767px) {
    .fab-btn {
      bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
    }
    .hud-bottom-row {
      padding-bottom: max(8px, calc(env(safe-area-inset-bottom) + 4px)) !important;
    }
  }

  /* 詳細パネル: スライドアップ時のホームインジケーター対応 */
  @media (max-width: 767px) {
    .detail-panel.open {
      padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
  }

  /* 縦向きメニュードロワーの下部余白 */
  @media (max-width: 767px) {
    .mnav-section:last-child {
      padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
    }
  }
}

/* ================================================================
   §21. フォントスケーリング防止 (iOS Safari 自動拡大防止)
   ================================================================ */

/* iOS Safari は横向き時にフォントを自動拡大することがある → 防止 */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ================================================================
   END — RESPONSIVE ENHANCEMENT
   ================================================================ */

/* ================================================================
   §22. Transport Tag Buttons (交通機関タグボタン)
   ================================================================ */

.transport-tag-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.06);
  color: rgba(255, 215, 0, 0.7);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
  white-space: nowrap;
}

.transport-tag-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.6);
}

.transport-tag-btn.active {
  background: rgba(255, 215, 0, 0.22);
  color: #ffd700;
  border-color: #ffd700;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.25);
}

.transport-tag-btn:active {
  transform: scale(0.96);
}

/* Small screens */
@media (max-width: 479px) {
  .transport-tag-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
}