:root {
  --bg: #070914;
  --panel: rgba(19, 24, 43, 0.84);
  --panel-strong: #11162a;
  --text: #f5f0e8;
  --muted: #a8adbf;
  --accent: #ffd27a;
  --accent-strong: #ffb84d;
  --danger: #ff6b6b;
  --line: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(101, 79, 181, 0.35), transparent 34rem),
    radial-gradient(circle at 80% 20%, rgba(255, 184, 77, 0.12), transparent 28rem),
    var(--bg);
  min-height: 100vh;
}

button, input, select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  color: #201608;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(255, 184, 77, 0.18);
}

button:hover { filter: brightness(1.05); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: rgba(255,255,255,.09); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
button.danger { background: rgba(255, 107, 107, .13); color: #ffd4d4; box-shadow: none; border: 1px solid rgba(255,107,107,.35); width: 100%; }

input, select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(5, 8, 18, .65);
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  outline: none;
}

label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; }
form { display: grid; gap: 12px; }
hr { border: none; border-top: 1px solid var(--line); width: 100%; margin: 22px 0; }

.shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 42px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.hero { padding: 28px; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: center; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(36px, 8vw, 76px); line-height: .92; margin: 10px 0 18px; letter-spacing: -0.06em; }
.lead { color: var(--muted); font-size: 20px; max-width: 620px; }
.auth-card { background: rgba(7,9,20,.58); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tab { background: rgba(255,255,255,.06); color: var(--muted); box-shadow: none; }
.tab.active { background: rgba(255, 210, 122, .18); color: var(--accent); border: 1px solid rgba(255, 210, 122, .35); }
.hint, .muted { color: var(--muted); }
.hint { font-size: 13px; line-height: 1.4; }
.hidden { display: none !important; }
.recovery { padding: 12px; border: 1px solid rgba(255,210,122,.35); background: rgba(255,210,122,.1); border-radius: 14px; margin: 12px 0; }

.workspace { display: grid; grid-template-columns: 340px 1fr; gap: 18px; margin-top: 18px; }
.controls { padding: 20px; }
.controls h2, .controls h3 { margin-top: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.status-line { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.04); }

.map-wrap { position: relative; min-height: 620px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-strong); }
#map { height: 620px; width: 100%; filter: saturate(.75) brightness(.78) contrast(1.05); }
.mobile-map-title { display: none; }
.map-topbar {
  position: absolute;
  z-index: 500;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: rgba(7,9,20,.75);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
}

.light-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8db 0%, #ffd27a 38%, rgba(255,184,77,.25) 60%, transparent 72%);
  box-shadow: 0 0 18px rgba(255,210,122,.95), 0 0 42px rgba(255,184,77,.5);
  animation: pulse 2.2s ease-in-out infinite;
}

.my-pick-icon {
  width: 18px;
  height: 18px;
  background: #8be9fd;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(139,233,253,.8);
}

@keyframes pulse {
  0%, 100% { transform: scale(.9); opacity: .72; }
  50% { transform: scale(1.14); opacity: 1; }
}

.popup { min-width: 220px; color: #151826; }
.popup h3 { margin: 0 0 6px; }
.popup p { margin: 5px 0; }
.popup-actions { display: grid; gap: 8px; margin-top: 10px; }
.popup-actions button { color: #201608; padding: 9px 10px; border-radius: 10px; }
.popup-actions .secondary { color: #151826; background: #ece7da; }

.waves { display: grid; gap: 8px; }
.wave-item { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); }
.empty { color: var(--muted); }

.city-whisper { margin-top: 18px; padding: 24px; }
.whispers { display: flex; gap: 10px; flex-wrap: wrap; }
.whispers span { border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; color: var(--muted); background: rgba(255,255,255,.04); }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 360px;
  background: #fff6df;
  color: #211805;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 52px rgba(0,0,0,.32);
  z-index: 2000;
  font-weight: 700;
}

@media (max-width: 860px) {
  .hero, .workspace { grid-template-columns: 1fr; }
  .map-wrap, #map { min-height: 560px; height: 560px; }
  .map-topbar { flex-direction: column; }
}


.small {
  padding: 7px 10px;
  font-size: 12px;
}

.mini-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.message-item {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 8px;
}

.message-item p {
  margin: 6px 0 8px;
  line-height: 1.35;
}

/* v0.2.3: карта чуть светлее и мобильный акцент на карту */
#map {
  filter: saturate(.92) brightness(1.16) contrast(.96);
}

@media (max-width: 860px) {
  .shell {
    width: min(100% - 16px, 720px);
    padding: 8px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .workspace {
    display: contents;
  }

  .map-wrap {
    order: 1;
    min-height: 72vh;
    height: 72vh;
    border-radius: 22px;
  }

  #map {
    min-height: 72vh;
    height: 72vh;
  }

  .hero {
    order: 2;
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 22px;
  }

  .controls {
    order: 3;
    border-radius: 22px;
  }

  .city-whisper {
    order: 4;
    margin-top: 0;
    border-radius: 22px;
  }

  h1 {
    font-size: clamp(34px, 12vw, 52px);
  }

  .lead {
    font-size: 17px;
  }

  .map-topbar {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
  }

  .map-topbar .muted {
    font-size: 12px;
    text-align: right;
  }
}


/* v0.2.4: мобильная шапка над картой, всплывающие уведомления и созвездия */
.leaflet-overlay-pane svg path {
  filter: drop-shadow(0 0 7px rgba(255, 210, 122, 0.45));
}

@media (max-width: 860px) {
  .mobile-map-title {
    display: block;
    position: absolute;
    z-index: 560;
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(7, 9, 20, 0.82);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--text);
  }

  .map-topbar {
    top: 58px;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* v0.2.5: чат вкладками, мобильная шапка без дубля и живой шёпот */
.chat-box {
  display: grid;
  gap: 10px;
}

.chat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.chat-tab {
  flex: 0 0 auto;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  box-shadow: none;
}

.chat-tab.active {
  color: var(--accent);
  background: rgba(255, 210, 122, .16);
  border-color: rgba(255, 210, 122, .34);
}

.chat-thread {
  min-height: 150px;
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  background: rgba(5, 8, 18, .36);
}

.chat-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.chat-empty {
  line-height: 1.45;
}

.chat-message {
  width: fit-content;
  max-width: 88%;
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255,255,255,.06);
  line-height: 1.35;
}

.chat-message.own {
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 210, 122, .14);
  border-color: rgba(255, 210, 122, .25);
}

.chat-meta {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.whispers span strong {
  color: var(--accent);
}

@media (max-width: 860px) {
  .hero-copy {
    display: none;
  }

  .hero {
    padding: 14px;
  }

  .auth-card {
    border-radius: 18px;
  }

  .mobile-map-title {
    font-size: 20px;
    padding: 9px 11px;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }
}


/* v0.2.6: логотип вместо текстового заголовка */
.brand-title {
  margin: 8px 0 16px;
}

.brand-logo {
  display: block;
  height: auto;
  object-fit: contain;
  user-select: none;
}

.hero-logo {
  width: min(620px, 100%);
  max-height: 180px;
  object-position: left center;
  filter: drop-shadow(0 0 18px rgba(255, 210, 122, .15));
}

.map-logo {
  width: min(300px, 74vw);
  max-height: 46px;
  object-position: left center;
}

@media (max-width: 860px) {
  .mobile-map-title {
    padding: 7px 10px;
    display: flex;
    align-items: center;
    min-height: 52px;
  }

  .map-logo {
    max-height: 40px;
    width: min(260px, 72vw);
  }

  .map-topbar {
    top: 66px;
  }
}

/* v0.2.7: меньше шрифты на мобильном */
@media (max-width: 860px) {
  body { font-size: 14px; }
  label { font-size: 12.5px; }
  button { padding: 9px 11px; border-radius: 12px; font-size: 13px; }
  input, select { padding: 10px; border-radius: 11px; font-size: 13px; }
  .auth-card, .controls, .city-whisper { font-size: 13px; }
  .controls h2, .city-whisper h2 { font-size: 20px; }
  .controls h3 { font-size: 16px; }
  .map-topbar { font-size: 12.5px; padding: 8px 10px; }
  .map-topbar .muted { font-size: 11px; }
  .mobile-map-title { min-height: 44px; padding: 6px 8px; }
  .map-logo { max-height: 32px; width: min(220px, 66vw); }
  .map-topbar { top: 56px; }
  .wave-item, .status-line, .chat-thread, .whispers span { font-size: 12.5px; }
  .chat-tab { font-size: 12px; padding: 7px 9px; }
  .chat-message { font-size: 12.5px; padding: 8px 10px; }
}

/* v0.2.8: ещё компактнее мобильная версия */
@media (max-width: 860px) {
  body { font-size: 13px; }
  label { font-size: 12px; }
  button { padding: 8px 10px; border-radius: 11px; font-size: 12.5px; }
  input, select { padding: 9px; border-radius: 10px; font-size: 12.5px; }
  .auth-card, .controls, .city-whisper { font-size: 12.5px; }
  .controls h2, .city-whisper h2 { font-size: 18px; }
  .controls h3 { font-size: 15px; }
  .map-topbar { font-size: 12px; padding: 7px 9px; }
  .map-topbar .muted { font-size: 10.5px; }
  .mobile-map-title { min-height: 40px; padding: 5px 7px; }
  .map-logo { max-height: 28px; width: min(200px, 64vw); }
  .map-topbar { top: 50px; }
  .wave-item, .status-line, .chat-thread, .whispers span { font-size: 12px; }
  .chat-tab { font-size: 11.5px; padding: 6px 8px; }
  .chat-message { font-size: 12px; padding: 7px 9px; }
}

/* v0.2.9: приватность, карта, чат */
.privacy-actions {
  display: grid;
  gap: 8px;
}
.privacy-explain {
  font-size: 13px;
  line-height: 1.35;
}
.map-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.map-filter select {
  width: auto;
  min-width: 150px;
  padding: 7px 10px;
  border-radius: 10px;
}
.light-icon {
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}
.light-insomnia { background: radial-gradient(circle, #fff8db 0%, #ffd27a 38%, rgba(255,184,77,.25) 60%, transparent 72%); box-shadow: 0 0 18px rgba(255,210,122,.95), 0 0 42px rgba(255,184,77,.5); }
.light-work { background: radial-gradient(circle, #f6fbff 0%, #8be9fd 42%, rgba(139,233,253,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(139,233,253,.9), 0 0 42px rgba(80,180,220,.45); }
.light-study { background: radial-gradient(circle, #fff 0%, #c6a7ff 42%, rgba(198,167,255,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(198,167,255,.9), 0 0 42px rgba(140,95,220,.45); }
.light-walk { background: radial-gradient(circle, #fff 0%, #92f2b7 42%, rgba(146,242,183,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(146,242,183,.9), 0 0 42px rgba(74,190,120,.45); }
.light-anxious { background: radial-gradient(circle, #fff 0%, #ff9aa8 42%, rgba(255,154,168,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(255,154,168,.9), 0 0 42px rgba(255,107,107,.42); }
.light-talk { background: radial-gradient(circle, #fff 0%, #ffcf7d 28%, #ff8bd1 52%, rgba(255,139,209,.22) 68%, transparent 76%); box-shadow: 0 0 20px rgba(255,139,209,.9), 0 0 46px rgba(255,184,77,.42); }
.light-music { background: radial-gradient(circle, #fff 0%, #7db7ff 42%, rgba(125,183,255,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(125,183,255,.9), 0 0 42px rgba(70,120,240,.42); }
.light-other { background: radial-gradient(circle, #fff8db 0%, #e9e2cf 42%, rgba(233,226,207,.22) 66%, transparent 74%); box-shadow: 0 0 18px rgba(233,226,207,.85), 0 0 42px rgba(255,255,255,.25); }
.chat-tab {
  display: grid;
  gap: 3px;
  align-content: center;
}
.unread {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #201608;
  font-size: 11px;
}
.chat-online, .chat-offline {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}
.chat-online { color: #92f2b7; }
.chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.chat-title-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 860px) {
  body { font-size: 14px; }
  button { padding: 10px 12px; border-radius: 12px; }
  input, select { padding: 10px; }
  label { font-size: 12px; }
  .map-topbar { font-size: 12px; padding: 9px 10px; }
  .map-filter { width: 100%; justify-content: space-between; }
  .map-filter select { min-width: 130px; max-width: 170px; }
  .controls h2 { font-size: 20px; }
  .controls h3 { font-size: 16px; }
  .chat-thread { max-height: 48vh; }
}

.bot-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: 999px;
  color: #ffd27a;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255, 210, 122, 0.08);
}

/* v0.2.11-front: ночная визуальная система, звёзды, мягкие огоньки */
:root {
  --font-display: "Museo Cyrl", "Rodondo RUS", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui: "Aktifo-A", "Jacobs Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #050713;
  --panel: rgba(15, 20, 38, 0.68);
  --panel-strong: rgba(9, 13, 28, 0.86);
  --text: #f7f0e6;
  --muted: #a7b0c7;
  --accent: #ffd48a;
  --accent-strong: #ffb95e;
  --accent-cold: #8dd8ff;
  --accent-violet: #bda3ff;
  --accent-pink: #ff9ec7;
  --accent-mint: #9af0c4;
  --surface-glow: rgba(141, 216, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --shadow-cold: 0 22px 78px rgba(0, 0, 0, .42), 0 0 62px rgba(55, 88, 150, .09);
}

html { background: #050713; }
body {
  position: relative;
  isolation: isolate;
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 14% -8%, rgba(128, 103, 218, .30), transparent 33rem),
    radial-gradient(circle at 86% 8%, rgba(255, 184, 92, .15), transparent 30rem),
    radial-gradient(circle at 72% 86%, rgba(67, 143, 188, .13), transparent 34rem),
    linear-gradient(180deg, #060817 0%, #050713 44%, #03050d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, .34) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .055;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.9) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
}

.night-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
}

.sky-star {
  position: absolute;
  width: var(--star-size, 2px);
  height: var(--star-size, 2px);
  border-radius: 999px;
  opacity: var(--star-opacity, .45);
  box-shadow: 0 0 calc(var(--star-size, 2px) * 4) currentColor;
  animation: starTwinkle var(--star-duration, 8s) ease-in-out var(--star-delay, 0s) infinite;
  transform: translate3d(0,0,0);
}

.sky-star.almost-static { animation-duration: 18s; opacity: calc(var(--star-opacity, .45) * .72); }

@keyframes starTwinkle {
  0%, 100% { opacity: calc(var(--star-opacity, .45) * .38); transform: translateY(0) scale(.84); }
  38% { opacity: var(--star-opacity, .45); transform: translateY(calc(var(--star-drift, 0px) * .16)) scale(1.12); }
  62% { opacity: calc(var(--star-opacity, .45) * .66); transform: translateY(calc(var(--star-drift, 0px) * -.12)) scale(.98); }
}

.shell { position: relative; z-index: 1; }

h1, h2, h3, .eyebrow, .brand-title, .tab, .chat-tab, button { font-family: var(--font-display); }

.panel, .auth-card, .controls, .city-whisper, .map-topbar, .status-line, .chat-thread, .wave-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-cold), inset 0 1px 0 rgba(255,255,255,.065);
  backdrop-filter: blur(20px) saturate(1.14);
}

.panel:hover, .auth-card:hover, .map-wrap:hover {
  border-color: rgba(255, 255, 255, .18);
}

.hero {
  background:
    linear-gradient(135deg, rgba(255, 212, 138, .055), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(13, 18, 36, .66);
}

.eyebrow { color: var(--accent); text-shadow: 0 0 18px rgba(255, 212, 138, .22); }
.lead, .hint, .muted { color: color-mix(in srgb, var(--muted) 92%, white 8%); }
.brand-logo { filter: drop-shadow(0 0 18px rgba(255, 212, 138, .19)) drop-shadow(0 0 38px rgba(139, 190, 255, .08)); }

button {
  background: linear-gradient(135deg, #ffe0a3 0%, #ffbd67 50%, #ffcaa2 100%);
  box-shadow: 0 10px 24px rgba(255, 184, 92, .18), inset 0 1px 0 rgba(255,255,255,.32);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}
button:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 30px rgba(255, 184, 92, .22), inset 0 1px 0 rgba(255,255,255,.38); }
button:active { transform: translateY(1px) scale(.99); }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-cold) 78%, white 22%);
  outline-offset: 3px;
}
button.secondary, .tab, .chat-tab {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
button.secondary:hover, .tab:hover, .chat-tab:hover { border-color: rgba(255, 212, 138, .28); }
button.danger {
  color: #ffd9df;
  background: linear-gradient(180deg, rgba(255, 126, 154, .16), rgba(255, 126, 154, .07));
  border-color: rgba(255, 126, 154, .32);
}

input, select {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.08)), rgba(5, 8, 18, .72);
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus {
  border-color: rgba(141, 216, 255, .58);
  box-shadow: 0 0 0 4px rgba(141, 216, 255, .08), inset 0 1px 0 rgba(255,255,255,.05);
}

.controls h2::before, .city-whisper h2::before, .map-filter::before, .chat-tab::before {
  content: "";
  display: inline-block;
  width: .52em;
  height: .52em;
  margin-right: .48em;
  border-radius: 999px;
  vertical-align: .08em;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 212, 138, .55);
}
.city-whisper h2::before { background: var(--accent-violet); box-shadow: 0 0 12px rgba(189, 163, 255, .48); }
.map-filter::before { background: var(--accent-mint); box-shadow: 0 0 12px rgba(154, 240, 196, .42); }
.chat-tab::before { width: 6px; height: 6px; margin-right: 3px; background: var(--accent-cold); box-shadow: 0 0 10px rgba(141, 216, 255, .45); }
.chat-tab.active::before { background: var(--accent); }

.map-wrap {
  box-shadow: 0 22px 85px rgba(0,0,0,.46), 0 0 70px rgba(74, 105, 175, .10), inset 0 1px 0 rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06)), var(--panel-strong);
}
#map { filter: saturate(.96) brightness(1.12) contrast(.97); }
.map-topbar { color: var(--text); }
.map-topbar strong { color: var(--accent); text-shadow: 0 0 12px rgba(255, 212, 138, .34); }

.light-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: scale(var(--light-scale, 1));
  animation: lightBreathe var(--twinkle-duration, 3.8s) ease-in-out var(--twinkle-delay, 0s) infinite;
  will-change: transform, opacity, filter;
}
.light-icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: calc(.22 * var(--glow-strength, 1));
  filter: blur(.2px);
  animation: haloBreath calc(var(--twinkle-duration, 3.8s) * 1.38) ease-in-out var(--twinkle-delay, 0s) infinite;
}
.light-icon span {
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 10px rgba(255,255,255,.55);
}
@keyframes lightBreathe {
  0%, 100% { opacity: .70; transform: scale(calc(var(--light-scale, 1) * .90)); filter: saturate(.94); }
  42% { opacity: 1; transform: scale(calc(var(--light-scale, 1) * 1.12)); filter: saturate(1.12); }
  63% { opacity: .83; transform: scale(calc(var(--light-scale, 1) * .98)); }
}
@keyframes haloBreath {
  0%, 100% { transform: scale(.78); opacity: calc(.12 * var(--glow-strength, 1)); }
  48% { transform: scale(1.16); opacity: calc(.30 * var(--glow-strength, 1)); }
}
.light-insomnia { color: #ffd48a; background: radial-gradient(circle, #fff9df 0%, #ffd48a 36%, rgba(255, 188, 96, .32) 60%, transparent 74%); box-shadow: 0 0 calc(18px * var(--glow-strength, 1)) rgba(255,212,138,.86), 0 0 calc(42px * var(--glow-strength, 1)) rgba(255,184,92,.38); }
.light-work { color: #8dd8ff; background: radial-gradient(circle, #f4fbff 0%, #8dd8ff 40%, rgba(110,196,235,.24) 64%, transparent 75%); box-shadow: 0 0 calc(17px * var(--glow-strength, 1)) rgba(141,216,255,.78), 0 0 calc(40px * var(--glow-strength, 1)) rgba(74,154,214,.34); }
.light-study { color: #bda3ff; background: radial-gradient(circle, #fff 0%, #bda3ff 40%, rgba(189,163,255,.24) 64%, transparent 75%); box-shadow: 0 0 calc(17px * var(--glow-strength, 1)) rgba(189,163,255,.78), 0 0 calc(40px * var(--glow-strength, 1)) rgba(132,93,220,.34); }
.light-walk { color: #9af0c4; background: radial-gradient(circle, #fbfff8 0%, #9af0c4 40%, rgba(154,240,196,.23) 64%, transparent 75%); box-shadow: 0 0 calc(17px * var(--glow-strength, 1)) rgba(154,240,196,.78), 0 0 calc(40px * var(--glow-strength, 1)) rgba(83,201,139,.32); }
.light-anxious { color: #ff9eb0; background: radial-gradient(circle, #fffafa 0%, #ff9eb0 40%, rgba(255,158,176,.24) 64%, transparent 75%); box-shadow: 0 0 calc(17px * var(--glow-strength, 1)) rgba(255,158,176,.74), 0 0 calc(40px * var(--glow-strength, 1)) rgba(224,91,116,.28); }
.light-talk { color: #ffb8d4; background: radial-gradient(circle, #fff 0%, #ffd48a 28%, #ff9ec7 52%, rgba(255,158,199,.24) 68%, transparent 77%); box-shadow: 0 0 calc(19px * var(--glow-strength, 1)) rgba(255,158,199,.75), 0 0 calc(44px * var(--glow-strength, 1)) rgba(255,190,100,.34); }
.light-music { color: #8caeff; background: radial-gradient(circle, #fff 0%, #8caeff 38%, #a994ff 54%, rgba(127,153,255,.22) 68%, transparent 77%); box-shadow: 0 0 calc(18px * var(--glow-strength, 1)) rgba(140,174,255,.75), 0 0 calc(42px * var(--glow-strength, 1)) rgba(103,86,230,.34); }
.light-other { color: #eee8d8; background: radial-gradient(circle, #fffaf0 0%, #eee8d8 42%, rgba(238,232,216,.22) 66%, transparent 76%); box-shadow: 0 0 calc(17px * var(--glow-strength, 1)) rgba(238,232,216,.70), 0 0 calc(38px * var(--glow-strength, 1)) rgba(255,255,255,.20); }
.my-pick-icon { background: #8dd8ff; box-shadow: 0 0 18px rgba(141,216,255,.78), 0 0 0 7px rgba(141,216,255,.10); }
.leaflet-overlay-pane svg path { filter: drop-shadow(0 0 4px rgba(255, 224, 165, .25)); stroke-linecap: round; }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: rgba(9, 13, 28, .94);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.48), 0 0 28px rgba(255,212,138,.08);
  backdrop-filter: blur(16px);
}
.leaflet-popup-content { margin: 14px 16px; color: var(--text); }
.popup { color: var(--text); }
.popup h3 { color: var(--accent); font-family: var(--font-display); }
.popup p { color: var(--muted); }
.popup strong { color: var(--text); }
.popup-actions button { color: #201608; }
.popup-actions .secondary { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); }

.whispers span {
  position: relative;
  padding: 9px 14px 9px 30px;
  background: linear-gradient(135deg, rgba(255,212,138,.085), rgba(141,216,255,.045));
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.whispers span::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent-violet);
  box-shadow: 0 0 12px rgba(189, 163, 255, .48);
}
.whispers span:hover { transform: translateY(-1px); border-color: rgba(255,212,138,.24); background: linear-gradient(135deg, rgba(255,212,138,.12), rgba(141,216,255,.065)); }

.chat-thread::-webkit-scrollbar, .chat-tabs::-webkit-scrollbar, .list::-webkit-scrollbar { height: 8px; width: 8px; }
.chat-thread::-webkit-scrollbar-thumb, .chat-tabs::-webkit-scrollbar-thumb, .list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.toast { background: linear-gradient(135deg, #fff4d5, #ffe1a8); box-shadow: 0 18px 58px rgba(0,0,0,.42), 0 0 38px rgba(255,212,138,.16); }

@media (max-width: 860px) {
  .night-sky { opacity: .42; }
  body::after { opacity: .035; }
  .panel, .auth-card, .controls, .city-whisper, .map-topbar { backdrop-filter: blur(12px) saturate(1.05); }
  .map-wrap { box-shadow: 0 18px 48px rgba(0,0,0,.44); }
  #map { filter: saturate(.9) brightness(1.10) contrast(.97); }
  .light-icon { width: 21px; height: 21px; }
  .light-icon::before { inset: -7px; }
  .whispers span { padding: 8px 12px 8px 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .sky-star { animation: none !important; opacity: calc(var(--star-opacity, .45) * .72); }
  .light-icon, .light-icon::before { animation: none !important; }
}


/* v0.2.12-front-safe: откат спорного шрифта/логотипа + спокойный стиль чатов */
:root {
  --font-display: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
.eyebrow,
.brand-title,
.tab,
.chat-tab,
.popup h3 {
  font-family: var(--font-ui) !important;
}

.brand-logo {
  filter: drop-shadow(0 0 14px rgba(255, 210, 122, .14));
}

.hero-logo {
  max-height: 160px;
}

.map-logo {
  border-color: rgba(255, 210, 122, .28);
  background: rgba(7, 9, 20, .66);
  box-shadow: 0 12px 38px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Чат: тот же ночной glass-стиль, но без декоративной типографики */
.chat-box {
  position: relative;
  gap: 12px;
}

.chat-box::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 212, 138, .09), transparent 14rem),
    radial-gradient(circle at 100% 80%, rgba(141, 216, 255, .07), transparent 13rem);
  opacity: .78;
  z-index: -1;
}

.chat-tabs {
  gap: 9px;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
}

.chat-tab {
  position: relative;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(224, 231, 245, .76);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.chat-tab:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(255, 212, 138, .24);
}

.chat-tab.active {
  color: #fff0cf;
  background:
    linear-gradient(135deg, rgba(255, 212, 138, .18), rgba(141, 216, 255, .07)),
    rgba(255,255,255,.035);
  border-color: rgba(255, 212, 138, .36);
  box-shadow: 0 0 22px rgba(255, 212, 138, .09), inset 0 1px 0 rgba(255,255,255,.07);
}

.chat-tab .unread,
.chat-unread,
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe0a3, #ffb95e);
  color: #221607;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(255, 184, 92, .25);
}

.chat-thread {
  min-height: 210px;
  max-height: 380px;
  padding: 13px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.012)),
    rgba(4, 7, 17, .48);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -30px 60px rgba(0,0,0,.10);
}

.chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(221, 229, 246, .88);
  font-size: 13px;
  font-weight: 700;
}

.chat-title::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-cold);
  box-shadow: 0 0 13px rgba(141, 216, 255, .45);
}

.chat-title .chat-online,
.chat-online {
  color: #9af0c4;
  text-shadow: 0 0 10px rgba(154, 240, 196, .18);
}

.chat-title .chat-offline,
.chat-offline {
  color: rgba(180, 188, 208, .72);
}

.chat-message {
  position: relative;
  max-width: min(88%, 520px);
  margin: 9px 0;
  padding: 10px 12px;
  border-radius: 16px 16px 16px 5px;
  color: rgba(239, 244, 255, .94);
  background:
    linear-gradient(135deg, rgba(141, 216, 255, .095), rgba(189, 163, 255, .055)),
    rgba(255,255,255,.042);
  border: 1px solid rgba(141, 216, 255, .14);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}

.chat-message.own {
  margin-left: auto;
  border-radius: 16px 16px 5px 16px;
  color: #fff2d6;
  background:
    linear-gradient(135deg, rgba(255, 212, 138, .16), rgba(255, 158, 199, .06)),
    rgba(255,255,255,.04);
  border-color: rgba(255, 212, 138, .22);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 24px rgba(255, 184, 92, .055), inset 0 1px 0 rgba(255,255,255,.04);
}

.chat-meta {
  margin-bottom: 5px;
  color: rgba(174, 188, 218, .74);
  font-size: 11px;
  letter-spacing: .01em;
}

.chat-form {
  align-items: stretch;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(4, 7, 17, .36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.chat-form input {
  min-height: 42px;
  border-radius: 14px;
  background: rgba(5, 8, 18, .68);
}

.chat-form button {
  min-height: 42px;
  border-radius: 14px;
  white-space: nowrap;
}

.chat-title-actions,
.mini-actions {
  gap: 7px;
}

.chat-title-actions button,
.mini-actions button,
.small {
  border-radius: 999px;
}

@media (max-width: 860px) {
  .hero-logo { max-height: 130px; }
  .map-logo { max-height: 44px; }
  .chat-thread { min-height: 180px; max-height: 46vh; padding: 11px; border-radius: 17px; }
  .chat-message { max-width: 94%; font-size: 12.5px; }
  .chat-form { grid-template-columns: 1fr; padding: 8px; }
  .chat-tab { font-size: 12px; }
}

/* mobile map header fix: keep logo/title from overlapping the lights counter */
@media (max-width: 860px) {
  .mobile-map-title {
    min-height: 58px;
    padding: 7px 10px 8px;
    justify-content: center;
  }

  .map-logo {
    max-height: 38px;
    width: min(230px, 62vw);
  }

  .map-topbar {
    top: 74px;
    left: 10px;
    right: 10px;
    gap: 8px;
    align-items: stretch;
  }
}

@media (max-width: 430px) {
  .mobile-map-title {
    min-height: 54px;
    padding: 6px 8px 7px;
  }

  .map-logo {
    max-height: 34px;
    width: min(205px, 58vw);
  }

  .map-topbar {
    top: 68px;
  }
}

/* 2026-07-29: ночной глобус вместо плоской карты */
.globe-stage {
  position: relative;
  height: 620px;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  filter: none !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(81, 109, 190, .22), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 210, 122, .08), transparent 34%),
    linear-gradient(180deg, rgba(5, 8, 20, .56), rgba(3, 5, 14, .96));
}
.globe-stage:active { cursor: grabbing; }
#globeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.leaflet-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 100%;
  height: 100%;
  width: 100%;
  filter: saturate(.96) brightness(1.08) contrast(.98);
}
#globeCanvas.hidden,
.leaflet-map.hidden { display: none; }
.globe-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, transparent 0 36%, rgba(10, 14, 32, .08) 46%, rgba(0, 0, 0, .44) 100%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 18% 82%, rgba(0,0,0,.18));
  z-index: 1;
}
.view-toggle {
  position: absolute;
  right: 18px;
  top: 86px;
  z-index: 6;
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(255, 210, 122, .22);
  border-radius: 999px;
  background: rgba(9, 13, 28, .70);
  box-shadow: 0 14px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.view-toggle button {
  min-width: 44px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}
.view-toggle button.active {
  background: rgba(255, 210, 122, .92);
  color: #201608;
}
.globe-zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  display: grid;
  gap: 8px;
}
.globe-zoom button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 210, 122, .28);
  border-radius: 15px;
  background: rgba(9, 13, 28, .74);
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.globe-zoom button:active { transform: scale(.96); }
.globe-hint {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 3;
  max-width: min(520px, calc(100% - 92px));
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(9, 13, 28, .62);
  color: var(--muted);
  font-size: 12.5px;
  backdrop-filter: blur(12px);
}
.globe-popup {
  position: absolute;
  z-index: 10;
  width: min(292px, calc(100% - 24px));
  padding: 14px 16px;
  border: 1px solid rgba(255, 210, 122, .22);
  border-radius: 20px;
  background: rgba(9, 13, 28, .94);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px) saturate(1.08);
}
.globe-popup .popup { min-width: 0; color: var(--text); }
.globe-popup .popup h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--font-ui) !important;
}
.globe-popup .popup p { color: var(--muted); }
.globe-popup .popup strong { color: var(--text); }
.globe-popup .popup-actions button { color: #201608; }
.globe-popup .popup-actions .secondary {
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
}

@media (max-width: 860px) {
  .globe-stage {
    min-height: 72vh;
    height: 72vh;
  }
  .globe-hint {
    left: 10px;
    right: 70px;
    bottom: 10px;
    max-width: none;
    border-radius: 16px;
    text-align: center;
  }
  .globe-zoom {
    right: 10px;
    bottom: 10px;
    gap: 6px;
  }
  .view-toggle {
    top: auto;
    right: 10px;
    bottom: 104px;
  }
  .globe-zoom button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .globe-popup {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 56px;
    width: auto;
  }
}