:root {
  --bg: #0e1116; --panel: #171b22; --panel2: #1e232c; --line: #2a303b;
  --text: #e7ecf3; --muted: #8b95a4; --accent: #ff6b2c; --accent2: #2f81f7;
  --ok: #3fb950; --bad: #f85149;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", "Assistant", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
}
.hidden { display: none !important; }

/* login */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-card h1 { margin: 0; color: var(--accent); }
.login-card p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.login-card input, .panel input, .panel select {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; width: 100%;
}
.login-card button, .panel button {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.err { color: var(--bad); font-size: 13px; min-height: 16px; }

/* app layout */
.app { display: grid; grid-template-columns: 340px 1fr; height: 100vh; }
.side {
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto;
}
.brand { display: flex; align-items: center; justify-content: space-between; }
.brand h1 { margin: 0; font-size: 20px; color: var(--accent); }
.engine { font-size: 12px; color: var(--muted); }
.engine.up { color: var(--ok); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px;
}
.stats .box { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stats .box b { display: block; font-size: 18px; color: var(--text); }
.stats .box span { color: var(--muted); }

.panel { display: flex; flex-direction: column; gap: 8px; }
.panel > label { font-size: 12px; color: var(--muted); }
.panel .row { display: flex; gap: 8px; }

.results { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 120px; }
.card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: border-color .15s;
}
.card:hover { border-color: var(--accent2); }
.card .price { color: var(--accent); font-weight: 700; }
.card .addr { font-size: 14px; margin: 2px 0; }
.card .meta { font-size: 12px; color: var(--muted); }

.logout { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 9px; cursor: pointer; }

/* map */
.main { position: relative; }
#map { position: absolute; inset: 0; }
.loading {
  position: absolute; top: 14px; right: 14px; z-index: 500;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.leaflet-popup-content { direction: rtl; font-family: inherit; }
.leaflet-popup-content .p { color: #ff6b2c; font-weight: 700; font-size: 15px; }
.leaflet-popup-content a { color: #2f81f7; }