:root{
  --bg: #0B1220;
  --surface: #131B2E;
  --surface-2: #1A2338;
  --border: #263252;
  --text: #F2F0EA;
  --text-muted: #8A93A6;

  --on: #3DDC97;
  --on-weak: rgba(61,220,151,0.35);
  --out: #E63946;
  --out-weak: rgba(230,57,70,0.35);
  --water-out: #2E9BE6;
  --water-out-weak: rgba(46,155,230,0.35);
  --sos: #FFB800;
  --sos-urgent: #FF4B4B;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overscroll-behavior: none;
}

#app{
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
#topbar{
  position: absolute;
  top:0; left:0; right:0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(11,18,32,0.95) 0%, rgba(11,18,32,0.75) 70%, transparent 100%);
  pointer-events:none;
}
#topbar > *{ pointer-events:auto; }
/* The brand label and stat counters are purely decorative — they must never
   intercept taps meant for the map controls that can sit visually near them. */
.brand, .stats{ pointer-events: none; }

.brand{ display:flex; align-items:center; gap:10px; }
.bulb{
  color: var(--sos);
  font-size: 14px;
  text-shadow: 0 0 8px var(--sos);
  animation: flicker 3.2s infinite ease-in-out;
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  4%{ opacity:0.4; }
  8%{ opacity:1; }
  60%{ opacity:1; }
  63%{ opacity:0.5; }
  66%{ opacity:1; }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:20px; letter-spacing: 0.2px; }
.brand-sub{ font-family: var(--font-mono); font-size:11px; color: var(--text-muted); }

.stats{ display:flex; gap:18px; }
.stat{ display:flex; flex-direction:column; align-items:center; min-width: 64px; }
.stat-value{ font-family: var(--font-display); font-weight:700; font-size:20px; }
.stat-label{ font-family: var(--font-mono); font-size:10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-sos .stat-value{ color: var(--sos); }

.icon-btn{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width:40px; height:40px;
  border-radius: 10px;
  font-size: 16px;
  cursor:pointer;
}
.icon-btn:hover{ background: var(--surface-2); }

/* ---------- Language switcher ---------- */
.lang-switch{
  display:flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.lang-btn{
  background:none;
  border:none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 7px;
  cursor:pointer;
}
.lang-btn.active{ background: var(--sos); color: #0B1220; }

.lang-install-group{ display:flex; align-items:center; gap:8px; }
.install-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background: var(--sos);
  color: #0B1220;
  border: none;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor:pointer;
  box-shadow: 0 4px 14px rgba(255,184,0,0.25);
}
.install-btn:hover{ filter: brightness(1.06); }
.install-btn.hidden{ display:none; }

/* ---------- Service switcher (power / water) ---------- */
.service-switch{
  display:flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.service-btn{
  background:none;
  border:none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor:pointer;
  white-space:nowrap;
}
.service-btn.active{ background: var(--out); color: #fff; }
.service-btn[data-service="water"].active{ background: #2E9BE6; color:#fff; }

/* ---------- RTL layout ---------- */
body.rtl{ direction: rtl; }
body.rtl .brand{ flex-direction: row-reverse; }
body.rtl #topbar{ flex-direction: row-reverse; }
body.rtl .stats{ flex-direction: row-reverse; }
body.rtl #panel{
  right: auto; left: 0;
  border-left: none; border-right: 1px solid var(--border);
  transform: translateX(0);
}
body.rtl #panel.panel-hidden{ transform: translateX(-105%); }
body.rtl .legend-row{ flex-direction: row-reverse; justify-content: flex-end; }
body.rtl .status-cell{ flex-direction: row-reverse; }
body.rtl .sos-item-top{ flex-direction: row-reverse; }
body.rtl .outage-card-top, body.rtl .outage-card-bottom{ flex-direction: row-reverse; }
body.rtl .comment-input-row{ flex-direction: row-reverse; }
body.rtl .search-box{ flex-direction: row-reverse; }
body.rtl .sheet-header-row{ flex-direction: row-reverse; }
body.rtl .panel-header{ flex-direction: row-reverse; }
body.rtl,
body.rtl input,
body.rtl textarea,
body.rtl .brand-name,
body.rtl .stat-value{ font-family: 'Noto Sans Arabic', var(--font-body); }
body.rtl .brand-sub,
body.rtl .stat-label,
body.rtl .feed-time,
body.rtl .comment-time,
body.rtl .sos-item-dist{ font-family: 'Noto Sans Arabic', var(--font-mono); }

/* ---------- Search bar ---------- */
#searchWrap{
  position:absolute;
  top: 66px;
  left: 0; right:0;
  z-index: 999;
  display:flex;
  flex-direction: column;
  align-items:center;
  padding: 0 14px;
  pointer-events:none;
}
.search-box{
  pointer-events:auto;
  width: 100%;
  max-width: 420px;
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.search-icon{ font-size: 14px; opacity:0.7; }
#searchInput{
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
#searchInput::placeholder{ color: var(--text-muted); }
.search-clear{
  background:none; border:none; color: var(--text-muted);
  cursor:pointer; font-size: 13px; padding: 2px 4px;
}
.search-clear.hidden{ display:none; }

.search-results{
  pointer-events:auto;
  list-style:none;
  margin: 6px 0 0;
  padding: 6px;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 260px;
  overflow-y:auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.search-results.hidden{ display:none; }
.search-result-item{
  padding: 9px 10px;
  border-radius: 8px;
  cursor:pointer;
  font-size: 13.5px;
}
.search-result-item:hover{ background: var(--surface-2); }
.search-result-sub{ display:block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.search-loading, .search-empty{
  padding: 10px; font-size: 13px; color: var(--text-muted); font-style: italic;
}

/* Search toggle/collapse icons: irrelevant on desktop, where the search
   box is always shown inline as before. pointer-events:auto is required
   here because the parent #searchWrap sets pointer-events:none (so empty
   space around the search bar doesn't block map taps) — without this
   override these buttons would be visible but silently unclickable. */
.search-toggle-btn{ display:none; pointer-events:auto; }
.search-collapse-btn{ display:none; pointer-events:auto; }

/* ---------- Map ---------- */
#map{
  position:absolute;
  inset:0;
  z-index: 1;
  background: #0B1220;
}
.leaflet-container{ background: #0B1220; }
.dark-tiles{
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6);
}
.leaflet-control-zoom a{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.locate-control a{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 15px !important;
  display: block;
  text-align: center;
}
.locate-control a:hover{ background: var(--surface-2) !important; }
.leaflet-control-attribution{
  background: rgba(19,27,46,0.8) !important;
  color: var(--text-muted) !important;
}
.leaflet-control-attribution a{ color: var(--text-muted) !important; }

/* Custom markers */
.nour-dot{
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-weight:600;
  color:#0B1220;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.nour-dot.out{ background: var(--out); box-shadow: 0 0 14px var(--out); }
.nour-dot.out-weak{ background: var(--out-weak); color: var(--out); border: 1.5px solid var(--out); }
.nour-dot.on{ background: var(--on); box-shadow: 0 0 10px var(--on); }
.nour-dot.water-out{ background: var(--water-out); box-shadow: 0 0 14px var(--water-out); }
.nour-dot.water-out-weak{ background: var(--water-out-weak); color: var(--water-out); border: 1.5px solid var(--water-out); }
.nour-dot.sos{
  background: var(--sos);
  box-shadow: 0 0 0 6px rgba(255,184,0,0.25);
  animation: pulse 1.6s infinite;
}
.nour-dot.sos.urgent{
  background: var(--sos-urgent);
  box-shadow: 0 0 0 6px rgba(255,75,75,0.28);
  animation: pulse-urgent 1.1s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,184,0,0.55); }
  70%{ box-shadow: 0 0 0 16px rgba(255,184,0,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,184,0,0); }
}
@keyframes pulse-urgent{
  0%{ box-shadow: 0 0 0 0 rgba(255,75,75,0.65); }
  70%{ box-shadow: 0 0 0 18px rgba(255,75,75,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,75,75,0); }
}
.nour-dot.me{
  background: #3B82F6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 6px rgba(59,130,246,0.28);
  animation: pulse-me 1.8s infinite;
}
@keyframes pulse-me{
  0%{ box-shadow: 0 0 0 0 rgba(59,130,246,0.55); }
  70%{ box-shadow: 0 0 0 14px rgba(59,130,246,0); }
  100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

.leaflet-popup-content-wrapper{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.leaflet-popup-tip{ background: var(--surface); }
.popup-title{ font-family: var(--font-display); font-weight:700; margin: 0 0 4px; }
.popup-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin: 0 0 8px; }
.popup-note{ font-size: 13px; margin: 0 0 8px; }
.popup-btn{
  background: var(--out);
  color: #fff;
  border:none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight:600;
  cursor:pointer;
  margin-right:6px;
}
.popup-btn.help{ background: var(--sos); color:#0B1220; }
.popup-btn.safe{ background: var(--on); color:#0B1220; }

/* ---------- Outage history sheet ---------- */
.history-summary{
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  margin: 4px 0 14px;
}
.history-detail{
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.history-ongoing{
  color: var(--sos);
  font-weight: 600;
}
.history-disclaimer{
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.popup-btn.remove{
  display: block;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin: 8px 0 0;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.popup-btn.remove:hover{
  color: var(--out);
  border-color: var(--out);
  background: rgba(230,57,70,0.08);
}

/* ---------- FABs ---------- */
#fabRow{
  position:absolute;
  bottom: 18px;
  left: 0; right:0;
  z-index: 1000;
  display:flex;
  gap:10px;
  justify-content:center;
  padding: 0 14px;
  flex-wrap: wrap;
}
.fab{
  font-family: var(--font-body);
  font-weight:600;
  font-size: 14px;
  border-radius: 999px;
  padding: 12px 18px;
  border: none;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  white-space:nowrap;
}
.fab-out{ background: var(--out); color:#fff; }
.fab-out.fab-water{ background: var(--water-out); }
.fab-on{ background: var(--on); color:#06251A; }
.fab-sos{ background: var(--sos); color:#0B1220; }
.fab:active{ transform: scale(0.97); }

/* ---------- Panel ---------- */
#panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width: min(360px, 88vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 1500;
  padding: 18px;
  overflow-y:auto;
  transition: transform 0.25s ease;
  transform: translateX(0);
}
#panel.panel-hidden{ transform: translateX(105%); }

.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.panel-header h2{ font-family: var(--font-display); font-size:16px; margin:0; }

.legend{ display:flex; flex-direction:column; gap:10px; margin-bottom: 20px; }
.legend-row{ display:flex; align-items:center; gap:10px; font-size:13px; color: var(--text-muted); }
.dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dot-out{ background: var(--out); box-shadow: 0 0 6px var(--out); }
.dot-out-weak{ background: transparent; border:1.5px solid var(--out); }
.dot-on{ background: var(--on); }
.dot-sos{ background: var(--sos); box-shadow: 0 0 6px var(--sos); }
.dot-water-out{ background: var(--water-out); box-shadow: 0 0 6px var(--water-out); }
.dot-water-out-weak{ background: transparent; border:1.5px solid var(--water-out); }

.panel-section{ margin-bottom: 22px; }
.panel-section h3{ font-family: var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.5px; color: var(--text-muted); margin: 0 0 10px; }

.feed-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feed-list li{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.feed-empty{ color: var(--text-muted); font-style: italic; }
.feed-time{ font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display:block; margin-top:3px; }

.panel-about p{ font-size: 12.5px; color: var(--text-muted); line-height:1.5; }

/* ---------- Panel tabs ---------- */
.tab-row{
  display:flex;
  gap:6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tab-btn{
  background:none;
  border:none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight:600;
  font-size: 12.5px;
  padding: 8px 4px 10px;
  cursor:pointer;
  border-bottom: 2px solid transparent;
  flex:1;
}
.tab-btn.active{ color: var(--text); border-bottom-color: var(--sos); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.panel-hint{ font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }

/* ---------- Outages table ---------- */
.filter-row{ display:flex; gap:8px; margin-bottom: 14px; }
.filter-chip{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
}
.filter-chip.active{ background: var(--out); color:#fff; border-color: var(--out); font-weight:600; }

/* Outages list — one card per report. Replaces the old data-table: a
   5-column table never fit the panel's width, so the action buttons
   ("View" / "History") ended up scrolled off-screen and undiscoverable.
   Cards stack everything vertically instead, so both buttons are always
   fully visible without any horizontal scrolling, on every screen size. */
.outage-cards{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.outage-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.outage-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.outage-card-area{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.outage-card-svc{ font-size:13px; flex-shrink:0; }
.outage-card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.outage-card-time{ color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); flex-shrink:0; }
.outage-cards .status-cell{ display:flex; align-items:center; gap:6px; font-size: 12.5px; }
.row-actions{ display:flex; flex-direction:row; gap:8px; }
.row-btn{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 500;
  cursor:pointer;
  flex: 1;
  text-align: center;
}
.row-btn:hover{ background: var(--surface-2); border-color: var(--sos); }
.table-empty{ list-style:none; color: var(--text-muted); font-style: italic; text-align:center; padding: 18px 0; }

/* ---------- SOS list ---------- */
.sos-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sos-item{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  cursor:pointer;
}
.sos-item:hover{ border-color: var(--sos); }
.sos-item.urgent{ border-color: var(--sos-urgent); }
.sos-item-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; gap:8px; }
.sos-item-reason{ font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; }
.sos-item-dist{ font-family: var(--font-mono); font-size: 11px; color: var(--sos); white-space:nowrap; }
.sos-item-meta{ font-size: 11.5px; color: var(--text-muted); }
.urgent-badge{
  background: var(--sos-urgent);
  color:#fff;
  font-size: 9.5px;
  font-weight:700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

/* ---------- Thread list (owner's view of helpers) ---------- */
.thread-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.thread-item{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.thread-item:hover{ border-color: var(--sos); }
.thread-item-preview{ font-size: 12.5px; color: var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.thread-item-time{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space:nowrap; }

/* ---------- Check-in banner ---------- */
.checkin-banner{
  background: rgba(255,184,0,0.1);
  border: 1px solid var(--sos);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0;
}
.checkin-banner p{ margin: 0 0 8px; font-size: 13px; }
.checkin-actions{ display:flex; gap:8px; }
.checkin-actions .btn{ padding: 8px 10px; font-size: 12.5px; }

/* ---------- Sheet header actions / comments own-message delete ---------- */
.sheet-header-actions{ display:flex; align-items:center; gap:6px; }
.comment-list li{ position:relative; }
.comment-list li.own{ background: rgba(255,184,0,0.08); border-color: var(--sos); }
.comment-delete-btn{
  background:none;
  border:none;
  color: var(--text-muted);
  cursor:pointer;
  font-size: 12px;
  position:absolute;
  top: 6px;
  right: 8px;
  padding: 0;
}
body.rtl .comment-delete-btn{ right:auto; left:8px; }
.comment-list li{ padding-right: 26px; }
body.rtl .comment-list li{ padding-right: 10px; padding-left: 26px; }

/* ---------- Comment thread ---------- */
.sheet-header-row{ display:flex; align-items:center; justify-content:space-between; }
.comment-thread{ margin-top: 16px; }
.comment-thread h3{ font-family: var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.5px; color: var(--text-muted); margin: 0 0 10px; }
.comment-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height: 180px; overflow-y:auto; }
.comment-list li{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.comment-time{ display:block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.comment-input-row{ display:flex; gap:8px; margin-top: 12px; }
.comment-input-row input{ flex:1; }
.comment-input-row .btn{ flex: 0 0 auto; padding: 10px 16px; }
.btn-on{ background: var(--on); color: #06251A; flex:1; }
.hidden{ display:none !important; }

/* ---------- Sheet (SOS form) ---------- */
.sheet-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sheet-overlay.hidden{ display:none; }

.sheet{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 22px 20px 26px;
  max-height: 85vh;
  overflow-y:auto;
}
.sheet h2{ font-family: var(--font-display); margin: 0 0 6px; font-size: 19px; }
.sheet-sub{ font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height:1.5; }

.field-label{ display:block; font-size:12px; font-weight:600; color: var(--text-muted); margin: 14px 0 8px; text-transform: uppercase; letter-spacing:0.4px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor:pointer;
}
.chip.selected{ background: var(--sos); color:#0B1220; border-color: var(--sos); font-weight:600; }

textarea, input[type="text"]{
  width:100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: none;
}
textarea{ height: 64px; }

.sheet-actions{ display:flex; gap:10px; margin-top: 20px; }
.btn{
  flex:1;
  padding: 12px;
  border-radius: 10px;
  border:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn-ghost{ background: var(--surface-2); color: var(--text); border:1px solid var(--border); }
.btn-danger{ background: var(--sos); color:#0B1220; }
.btn-danger:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---------- Toast ---------- */
.toast{
  position:absolute;
  bottom: 90px;
  left:50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 3000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.toast.hidden{ display:none; }

/* ---------- Responsive ---------- */

@media (max-width: 720px){
  /* The default topbar is a single non-wrapping flex row (brand + stats +
     service switch + lang switch + menu button). On narrow screens those
     five items together are wider than the viewport, so the ☰ button gets
     pushed past the right edge and becomes invisible/unreachable. A grid
     with explicit areas guarantees every control stays on-screen. */
  #topbar{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    grid-template-areas:
      "brand   menu"
      "stats   stats"
      "service lang";
    row-gap: 12px;
    align-items: center;
    padding: 12px 14px 10px;
  }
  .brand{ grid-area: brand; min-width: 0; }
  #menuToggle{ grid-area: menu; justify-self: end; align-self: start; }
  .stats{ grid-area: stats; justify-content: center; gap: 28px; }
  #serviceSwitch{ grid-area: service; justify-self: end; }
  .lang-install-group{ grid-area: lang; justify-self: start; }

  /* Icon-only install button on narrow screens to avoid crowding the row. */
  .install-label{ display:none; }
  .install-btn{ padding: 8px 10px; }

  /* #searchWrap's top offset is set from JS (positionSearchBar()), which
     measures the topbar's real rendered height — it varies with font
     load timing and how long the active language's labels are, so a
     fixed pixel guess here would drift out of sync and either overlap
     the switches or leave a gap. This is just the pre-JS fallback. */
  #searchWrap{ top: 158px; }

  body.rtl #topbar{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "menu    brand"
      "stats   stats"
      "lang    service";
  }
  body.rtl #menuToggle{ justify-self: start; }
  body.rtl #serviceSwitch{ justify-self: start; }
  body.rtl .lang-install-group{ justify-self: end; }

  /* Collapse the search bar to a small round icon so it doesn't sit on
     top of the map. Tapping it expands the full input + results. */
  #searchWrap{
    left: auto; right: 14px;
    padding: 0;
    align-items: flex-end;
  }
  .search-toggle-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
  .search-box, .search-results{ display:none; }
  .search-collapse-btn{
    display:none;
    background:none; border:none; color: var(--text-muted);
    cursor:pointer; font-size: 13px; padding: 2px 4px;
  }

  #searchWrap.expanded{
    left: 0; right: 0;
    padding: 0 14px;
    align-items: center;
  }
  #searchWrap.expanded .search-toggle-btn{ display:none; }
  #searchWrap.expanded .search-box{ display:flex; }
  #searchWrap.expanded .search-collapse-btn{ display:block; }
  #searchWrap.expanded .search-results:not(.hidden){ display:block; }

  body.rtl #searchWrap{ left: 14px; right: auto; }
  body.rtl #searchWrap.expanded{ left: 0; right: 0; }
}

@media (max-width: 480px){
  .brand-sub{ display:none; }
  .brand-name{ font-size: 17px; }
  .fab{ font-size:13px; padding: 10px 14px; }
  .stats{ gap:20px; }
  .stat{ min-width: 52px; }
  .search-box{ padding: 9px 10px; }
  #panel{ width: min(360px, 92vw); padding: 16px 14px; }
  .sheet{ padding: 18px 16px 22px; }
}

@media (max-width: 360px){
  .stats{ gap:14px; }
  .service-btn{ padding: 6px 8px; font-size: 11px; }
  .lang-btn{ padding: 6px 7px; font-size: 11px; }
}

/* Respect iPhone-style safe areas so the FAB row and menu button never
   sit under a home-indicator or notch. */
@supports (padding: max(0px)){
  #fabRow{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  #topbar{ padding-top: max(14px, env(safe-area-inset-top)); }
}