/* Veloterra — светлый официальный скин в стиле портала mos.ru + сдержанный триколор РФ. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&display=swap');

:root {
  --blue:   #0b4ea2;   /* основной синий (официальный) */
  --blue-d: #083b7a;   /* тёмно-синий для наведения */
  --green:  #1f9d57;   /* успех / свои зоны */
  --red:    #d8232a;   /* акцент флага РФ */
  --ink:    #1b2733;   /* основной текст */
  --ink2:   #3a4a5b;
  --gray:   #6b7785;
  --gray2:  #9aa6b2;
  --fill:   #eef2f7;   /* мягкая заливка полей/чипов */
  --fill2:  #e2e8f1;
  --card:   rgba(255, 255, 255, 0.94);   /* светлые панели */
  --line:   rgba(20, 39, 51, 0.10);      /* тонкие разделители/рамки */
  --radius: 18px;
  --shadow: 0 8px 24px rgba(20, 39, 51, 0.10);
  --neon:   rgba(11, 78, 162, 0.16);     /* оставлено имя ради совместимости — теперь синяя рамка */
  --font-hud: 'Golos Text', system-ui, sans-serif;
  /* триколор РФ для сдержанных акцентов */
  --tricolor: linear-gradient(90deg, #ffffff 0 33.33%, #0b4ea2 33.33% 66.66%, #d8232a 66.66% 100%);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: 'Golos Text', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background: #eaeef3;
}
#map { position: absolute; inset: 0; z-index: 0; background: #e8edf3; }
.leaflet-overlay-pane svg { filter: none; }

.panel {
  position: absolute; z-index: 500;
  background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hidden { display: none !important; }

label { display: block; text-align: left; font-size: 13px; color: var(--gray); margin: 12px 0 6px; font-weight: 500; }

input, select {
  width: 100%; padding: 12px 14px; font-size: 16px; color: var(--ink);
  border: none; border-radius: 12px; outline: none;
  background: var(--fill);
  transition: box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
input::placeholder { color: var(--gray2); }
input:focus, select:focus { background: #fff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238e8e93' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}

button {
  border: none; cursor: pointer; font-size: 16px; font-weight: 600;
  font-family: inherit; letter-spacing: -0.01em;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
}
button:active { transform: scale(0.97); }

/* Кнопка-«таблетка» */
.btn-primary { background: var(--blue); color: #fff; border-radius: 14px; padding: 14px; width: 100%; }
.btn-primary:hover { filter: brightness(1.05); }

/* ===== Экран входа ===== */
.auth { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw); padding: 28px 24px; }
.auth h1 { margin: 0 0 6px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; text-align: center; }
.auth .tagline { margin: 0 0 20px; color: var(--ink2); font-size: 14px; line-height: 1.45; text-align: center; }

/* Segmented control */
.tabs { display: flex; gap: 2px; margin-bottom: 6px; padding: 2px; background: var(--fill2); border-radius: 11px; }
.tab {
  flex: 1; padding: 8px; border-radius: 9px; background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 500;
}
.tab.active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }

.auth #authBtn { background: var(--blue); color: #fff; border-radius: 14px; padding: 14px; width: 100%; margin-top: 18px; }
.auth #authBtn:hover { filter: brightness(1.05); }
.err { color: var(--red); font-size: 13px; min-height: 16px; margin: 10px 0 0; text-align: center; }
.hint { font-size: 12px; color: var(--gray); margin: 14px 0 0; text-align: center; line-height: 1.4; }

/* ===== HUD: энергошкала уровня ===== */
.hud-energy {
  position: absolute; top: 14px; left: 14px; z-index: 600; width: 190px; padding: 10px 13px;
  background: var(--card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  border-top: 3px solid var(--blue);
}
.he-top { display: flex; align-items: center; gap: 7px; font-family: var(--font-hud); }
.he-spark { color: var(--blue); }
#heRank { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--ink); }
#heKm { margin-left: auto; font-size: 10px; color: var(--gray); }
.he-bar { height: 9px; margin-top: 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--fill); overflow: hidden; }
.he-bar > i { display: block; height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--red)); transition: width .4s ease; }
.he-next { margin-top: 6px; font-size: 9.5px; letter-spacing: .3px; color: var(--gray); }

/* ===== HUD: панель телеметрии ===== */
.hud-tele {
  position: absolute; top: 96px; left: 14px; z-index: 600; width: 190px; padding: 10px 13px;
  background: var(--card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  border-top: 3px solid var(--red);
}
.ht-h { display: flex; align-items: center; gap: 7px; font-family: var(--font-hud); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.ht-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ht-body { font-size: 11px; line-height: 1.6; color: var(--ink2); }
.ht-body .tv { color: var(--green); font-weight: 700; }
.ht-body .ta { color: var(--blue); font-weight: 700; }

/* ===== Бургер + шторка ===== */
.burger {
  position: absolute; top: 14px; right: 14px; z-index: 600;
  width: 46px; height: 46px; border-radius: 14px; font-size: 20px;
  background: var(--card); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.6); box-shadow: var(--shadow); color: var(--ink);
}
.drawer-overlay { position: absolute; inset: 0; z-index: 700; background: rgba(0,0,0,0.28); }
.drawer {
  position: absolute; top: 0; right: 0; z-index: 720; height: 100%;
  width: min(320px, 86vw); padding: 16px;
  background: var(--card); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-left: 0.5px solid rgba(255,255,255,0.5); box-shadow: -12px 0 40px rgba(0,0,0,0.18);
  overflow-y: auto; transition: transform .25s ease;
}
.drawer.hidden { display: block !important; transform: translateX(105%); pointer-events: none; }
.drawer-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.drawer-head .hbadge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.drawer-head .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--gray); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); }
.drawer-head .bic { font-size: 18px; line-height: 1; }
.drawer-head .av-badge { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
#board li .av-badge { width: 16px; height: 16px; border-radius: 50%; background-size: cover; background-position: center; flex: 0 0 auto; }
.drawer-head #meName { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.drawer-head .x { margin-left: auto; background: var(--fill2); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--gray); display: flex; align-items: center; justify-content: center; }
.drawer-brand { margin-top: 18px; padding-top: 14px; border-top: 0.5px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink2); }
.brand-logo { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; }

/* ===== Нижний статус-бар ===== */
.statusbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 600;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--card); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.6); border-radius: 18px; box-shadow: var(--shadow);
}
.sb-item { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.sb-item .sb-ic { font-size: 15px; }
.sb-item .sb-u { font-size: 12px; font-weight: 500; color: var(--gray); }
.sb-item .sb-sub { font-size: 12px; font-weight: 600; color: var(--green); }
.statusbar .bell { margin-left: auto; position: relative; background: transparent; padding: 4px 6px; border-radius: 12px; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ===== Уведомления ===== */
.notifs {
  position: absolute; right: 12px; bottom: 74px; z-index: 620; width: min(300px, 88vw); max-height: 50vh; overflow-y: auto;
  padding: 12px; background: var(--card); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.6); border-radius: 18px; box-shadow: var(--shadow);
}
.notifs-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); font-weight: 600; margin-bottom: 8px; }
.notifs ul { list-style: none; margin: 0; padding: 0; }
.notifs li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); font-size: 14px; color: var(--ink2); }
.notifs li:last-child { border-bottom: none; }
.notifs li .n-ic { flex: 0 0 auto; }
.notifs li .n-t { flex: 1; }
.notifs li .n-time { font-size: 11px; color: var(--gray); }
.notifs .empty { font-size: 13px; color: var(--gray); padding: 6px 2px; }

/* ===== Заезд ===== */
.ride-fab {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 640;
  width: 68px; height: 68px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: 0 6px 20px rgba(52,199,89,0.4), 0 0 0 6px rgba(52,199,89,0.12);
}
.ride-fab .ri-ico { font-size: 26px; line-height: 1; margin-left: 3px; }
.ride-fab.active { background: var(--red); box-shadow: 0 6px 20px rgba(255,59,48,0.45), 0 0 0 6px rgba(255,59,48,0.14); }
.ride-fab.active .ri-ico { font-size: 22px; margin-left: 0; }
.ride-card { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(400px, 92vw); padding: 22px; text-align: center; }
.ride-card-head { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.ride-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ride-stats .cell { background: var(--fill); border-radius: 14px; padding: 12px 6px; }
.ride-stats .cell .v { font-size: 19px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; }
.ride-stats .cell .k { font-size: 10px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; font-weight: 600; }

.ride-flag { background: rgba(255,59,48,0.1); color: var(--red); border: 0.5px solid rgba(255,59,48,0.3); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.ride-flag.hidden { display: none; }
.ride-item.flagged { border-color: rgba(255,59,48,0.35); }
.ride-item .ri-flag { color: var(--red); font-size: 11px; margin-top: 2px; }

.rides-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); font-weight: 600; margin: 8px 0 8px; }
.rides { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; max-height: 200px; overflow-y: auto; }
.ride-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.55); border: 0.5px solid rgba(0,0,0,0.05); border-radius: 12px; padding: 9px 12px; }
.ride-item .ri-main { flex: 1; font-size: 14px; }
.ride-item .ri-sub { font-size: 11px; color: var(--gray); margin-top: 2px; }
.ride-item button { flex: 0 0 auto; }

/* ===== Баннер ивента «Часовой спурт» ===== */
.event-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 650;
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 14px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  box-shadow: var(--shadow); max-width: 78vw;
}
.event-banner.upcoming { background: linear-gradient(135deg, #4363d8, #6a5acd); }
.event-banner.live { background: linear-gradient(135deg, #FF3B30, #ff7a00); animation: stormPulse 1.4s ease-in-out infinite; }
.event-banner .ev-count { font-variant-numeric: tabular-nums; }
@keyframes stormPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.5); } 50% { box-shadow: 0 0 0 8px rgba(255,59,48,0); } }
/* подсветка карты во время спурта */
body.storm #map { box-shadow: inset 0 0 0 4px rgba(255,59,48,0.55); }

/* ===== Индикатор офлайна ===== */
.offline-badge {
  position: absolute; top: 16px; right: 68px; z-index: 660;
  padding: 7px 12px; border-radius: 12px; font-size: 12px; font-weight: 700;
  background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(216,35,42,0.35);
}

/* ===== Тосты ===== */
.toasts { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); max-width: 88vw; opacity: 0; transform: translateY(-8px);
  animation: toastIn .2s ease forwards;
}
.toast.attack { background: var(--red); }
.toast.win { background: var(--green); }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }

/* ===== Гильдии ===== */
.guild-box { margin-top: 12px; }
.guild-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.guild-flags .gf { width: 38px; height: 38px; border-radius: 10px; background: var(--fill); font-size: 19px; display: flex; align-items: center; justify-content: center; }
.guild-flags .gf.sel { background: #fff; box-shadow: 0 0 0 2.5px var(--blue); }
.guild-flags .gf.custom { background-size: cover; background-position: center; }
.gf-upload { display: inline-block; margin: 0 0 8px; padding: 8px 12px; border-radius: 11px; background: var(--fill); color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.g-flag { flex: 0 0 auto; }
.g-flag-img { flex: 0 0 auto; display: inline-block; width: 16px; height: 16px; border-radius: 4px; background-size: cover; background-position: center; vertical-align: -3px; }
.guild-mine { display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 12px; padding: 9px 12px; }
.guild-mine .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.guild-mine #guildMineName { flex: 1; font-weight: 700; font-size: 15px; }
.guild-create { display: flex; gap: 6px; margin-bottom: 8px; }
.guild-create input { flex: 1; padding: 9px 12px; font-size: 14px; }
.guild-create button { padding: 9px 12px; border-radius: 11px; background: var(--blue); color: #fff; font-size: 14px; white-space: nowrap; }
.guild-list { list-style: none; margin: 0; padding: 0; max-height: 130px; overflow-y: auto; }
.guild-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
.guild-list li .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.guild-list li .gnm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-list li .gmembers { font-size: 11px; color: var(--gray); }
.guild-list li button { background: var(--fill); color: var(--blue); border-radius: 9px; padding: 5px 10px; font-size: 13px; }
.guild-list .empty { font-size: 12px; color: var(--gray); padding: 4px 0; }
#guildBoard { list-style: none; margin: 0; padding: 0; }
#guildBoard li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
#guildBoard li:last-child { border-bottom: none; }
#guildBoard li .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
#guildBoard li .gnm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#guildBoard li .gsub { font-size: 11px; color: var(--gray); }
#guildBoard li .gsc { font-weight: 700; }
#guildBoard li.me-row .gnm { font-weight: 800; }

.controls { display: flex; gap: 8px; margin-bottom: 8px; }
.controls button {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px; border-radius: 13px; background: var(--fill); color: var(--ink);
  font-size: 15px; white-space: nowrap;
}
.controls button.wide { flex-basis: 100%; }
.controls button.active { background: var(--green); color: #fff; }
.controls button.ghost { background: transparent; color: var(--gray); font-weight: 500; min-height: 40px; }
.controls button:hover { filter: brightness(0.96); }

.board { margin-top: 10px; }
.board-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 8px; font-weight: 600; }
#board { list-style: none; margin: 0; padding: 0; }
#board li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 15px; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
#board li:last-child { border-bottom: none; }
#board li .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
#board li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board li .sc { font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
#board li .cf { font-size: 12px; color: var(--green); font-weight: 600; }
#board li.me-row .nm { font-weight: 700; }
.status { margin-top: 12px; font-size: 12px; color: var(--gray); min-height: 15px; }

/* ===== Личный кабинет ===== */
.overlay { position: absolute; inset: 0; z-index: 800; background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.profile { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, 94vw); max-height: 90vh; overflow: auto; padding: 24px; }
.profile-head { display: flex; align-items: center; }
.profile-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.x { margin-left: auto; background: var(--fill2); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--gray); line-height: 1; display: flex; align-items: center; justify-content: center; }

/* ===== Уровень / прогресс ===== */
.level-box { margin-top: 16px; background: rgba(255,255,255,0.55); border: 0.5px solid rgba(0,0,0,0.05); border-radius: 16px; padding: 14px; }
.level-top { display: flex; align-items: baseline; gap: 8px; }
.level-top .rank { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.level-top .lvl { font-size: 12px; color: var(--gray); font-weight: 600; }
.level-top .km { margin-left: auto; font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; }
.level-bar { height: 8px; border-radius: 4px; background: var(--fill2); margin: 10px 0 8px; overflow: hidden; }
.level-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #34C759, #007AFF); border-radius: 4px; }
.level-next { font-size: 12px; color: var(--gray); }
.unlocks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.unlocks .u { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.unlocks .u .um { flex: 1; color: var(--ink2); }
.unlocks .u.on .um { color: var(--ink); }
.unlocks .u .ust { font-size: 12px; font-weight: 600; }
.unlocks .u.on .ust { color: var(--green); }
.unlocks .u.off .ust { color: var(--gray); }
.unlocks .u.off .um { color: var(--gray); }

.lock-hint { font-size: 12px; color: var(--gray); margin-top: 6px; }
.lock-hint.hidden { display: none; }
.upload-btn.locked { opacity: 0.45; pointer-events: none; }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-input { width: 46px; height: 34px; padding: 2px; border-radius: 9px; border: 1px solid var(--fill2); background: #fff; }
.color-input:disabled { opacity: 0.45; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.stats .cell { background: rgba(255,255,255,0.55); border: 0.5px solid rgba(0,0,0,0.05); border-radius: 16px; padding: 12px 8px; text-align: center; }
.stats .cell .v { font-size: 20px; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; }
.stats .cell .k { font-size: 10px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; font-weight: 600; }

.form .row { display: flex; gap: 12px; }
.form .row > div { flex: 1; }
.home-row { display: flex; gap: 10px; align-items: center; }
.home-row button { padding: 10px 12px; border-radius: 12px; background: var(--fill); color: var(--blue); white-space: nowrap; font-size: 14px; }
.muted { font-size: 13px; color: var(--gray); }

input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; margin: 8px 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--fill2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); margin-top: -11px; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill2); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

.profile-actions { display: flex; gap: 10px; margin-top: 20px; }
.profile-actions #pSave { flex: 1; padding: 14px; border-radius: 14px; background: var(--blue); color: #fff; }
.profile-actions .ghost { background: transparent; color: var(--red); padding: 14px; font-weight: 600; }

/* Панель целей */
.targets { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.targets .t { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--fill); border-radius: 12px; padding: 8px 10px; }
.targets .t .ic { font-size: 15px; }
.targets .t .lbl { flex: 1; color: var(--ink2); }
.targets .t .d { font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.targets .empty { font-size: 12px; color: var(--gray); padding: 4px 2px; }

/* Маркеры */
.rider-marker { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(0,122,255,0.18), 0 1px 3px rgba(0,0,0,0.3); }
.emoji-marker { font-size: 26px; line-height: 30px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.avatar-marker { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.home-marker { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* Пресеты и аватар в ЛК */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preset { width: 44px; height: 44px; border-radius: 12px; background: var(--fill); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.preset.sel { background: #fff; box-shadow: 0 0 0 2.5px var(--blue); }
.avatar-row { display: flex; align-items: center; gap: 10px; }
.avatar-preview { width: 48px; height: 48px; border-radius: 50%; background: var(--fill2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gray); flex: 0 0 auto; }
.upload-btn { display: inline-block; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--fill); color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.ghost-sm { background: transparent; color: var(--gray); font-size: 13px; font-weight: 500; padding: 8px; }
#board li .bic { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
.poi-marker, .meet-marker { font-size: 19px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }

/* Флаг гильдии на карте (агрегированно, без отдельных игроков) */
.gfm { width: 90px; display: flex; flex-direction: column; align-items: center; }
.gfm-flag { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gc);
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 1px 4px rgba(20,39,51,0.35); }
.gfm-img { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; }
.gfm-name { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 0.3px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 1px 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(20,39,51,0.2); }

/* Всплывающие карточки Leaflet под Apple */
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: var(--shadow); background: var(--card); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.leaflet-popup-content { font-size: 14px; color: var(--ink); line-height: 1.4; margin: 12px 14px; }
.leaflet-popup-content b { font-weight: 700; }
.leaflet-popup-tip { background: var(--card); }
.popup-del { margin-top: 8px; background: var(--red); color: #fff; border-radius: 9px; padding: 6px 10px; font-size: 13px; }
.popup-link { color: var(--blue); text-decoration: none; }

/* ===== Нижняя навигация ===== */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 800; height: 56px;
  display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--card); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--neon);
}
.tabbtn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; color: var(--gray); font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.tabbtn .tbi { font-size: 20px; }
.tabbtn.active { color: var(--blue); }

/* сдвигаем нижние игровые элементы над таб-баром */
.statusbar { bottom: 64px !important; }
.ride-fab { bottom: 118px !important; }
.notifs { bottom: 122px !important; }

/* ===== Раздел «События» (светлая тема mos.ru, красные акценты) ===== */
.events-view {
  position: absolute; inset: 0 0 56px 0; z-index: 730; overflow-y: auto;
  background: #f2f4f8; color: var(--ink);
  font-family: 'Golos Text', system-ui, sans-serif;
}
.events-view .ev-top { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.events-view .ev-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--red); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(216,35,42,.3); }
.events-view h1 { font-size: 19px; font-weight: 700; margin: 0; color: var(--ink); font-family: 'Golos Text', system-ui, sans-serif; }
.events-view .ev-city { margin-left: auto; font-size: 13px; color: var(--gray); }
.ev-list { padding: 12px 16px 20px; }

.ev-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); }
.ev-card.hero { border: none; color: #fff; background: linear-gradient(135deg,#d8232a,#ff6a3c); padding: 18px; position: relative; box-shadow: 0 8px 22px rgba(216,35,42,0.32); }
.ev-card.hero .kick { color: rgba(255,255,255,.85); }
.ev-card.hero h4 { color: #fff; font-size: 21px; }
.ev-card.hero .meta { color: rgba(255,255,255,.95); }
.ev-card.hero .btn { background: #fff; color: var(--red); box-shadow: none; }
.ev-card.hero .cnt { color: rgba(255,255,255,.95); font-size: 13px; }
.ev-card .band { height: 74px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.b-red { background: rgba(216,35,42,.10); } .b-teal { background: rgba(31,157,87,.10); }
.b-blue { background: rgba(11,78,162,.10); } .b-amber { background: rgba(230,150,20,.12); }
.ev-card .body { padding: 12px 14px 14px; }
.ev-card .kick { font-size: 12px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: .4px; }
.ev-card h4 { font-size: 16px; font-weight: 700; margin: 4px 0 6px; line-height: 1.25; color: var(--ink); }
.ev-card .meta { font-size: 13px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ev-card .foot { display: flex; align-items: center; margin-top: 12px; gap: 10px; }
.ev-card .free { font-size: 12px; font-weight: 700; color: var(--green); background: rgba(31,157,87,.12); border-radius: 8px; padding: 4px 8px; }
.ev-card .btn { margin-left: auto; background: var(--red); color: #fff; border: none; border-radius: 11px; padding: 10px 16px; font-weight: 700; font-size: 13px; font-family: inherit; box-shadow: 0 2px 8px rgba(216,35,42,0.3); }
.ev-hero-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ev-admin { margin-left: 8px; background: transparent; color: var(--gray); font-size: 18px; }
.ev-admin.on { color: var(--blue); }
.ev-add { width: 100%; margin-bottom: 12px; padding: 12px; border-radius: 12px; background: rgba(11,78,162,.08); color: var(--blue); border: 1px dashed var(--neon); font-weight: 700; }
.ev-card .adm { display: flex; gap: 6px; margin-left: auto; }
.ev-card .adm button { background: var(--fill); color: var(--ink); border: none; border-radius: 9px; padding: 6px 10px; font-size: 13px; }
.ev-form { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 94vw); max-height: 92vh; overflow: auto; padding: 20px; }
.ef-head { display: flex; align-items: center; margin-bottom: 6px; }
.ef-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ef-storm { margin-top: 10px; padding: 10px 12px; background: var(--fill); border-radius: 12px; }
.ef-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.ef-check input { width: auto; }

/* ===== Светлая тема mos.ru: контраст, официальный вид, триколор ===== */
input:focus, select:focus { background: #fff; box-shadow: 0 0 0 3px rgba(11,78,162,0.22); }

.tabs { background: var(--fill2); }
.tab { color: var(--ink2); }
.tab.active { background: var(--blue); color: #fff; box-shadow: 0 2px 6px rgba(11,78,162,0.25); }

.auth #authBtn { color: #fff; box-shadow: 0 4px 14px rgba(11,78,162,0.28); }
.btn-primary, .guild-create button, .profile-actions #pSave { color: #fff; }
.btn-primary:hover, .auth #authBtn:hover { filter: none; background: var(--blue-d); }

.stats .cell, .level-box, .ride-item, .ride-stats .cell {
  background: #fff !important; border: 1px solid var(--line) !important;
}
.stats .cell .v, .ride-stats .cell .v, .level-top .km { color: var(--blue); }
.preset.sel, .guild-flags .gf.sel { background: #fff; box-shadow: 0 0 0 2.5px var(--blue); }
.avatar-preview { color: var(--gray2); }

#board li, #guildBoard li, .notifs li { border-bottom-color: var(--line) !important; }
.drawer, .statusbar, .burger, .notifs { border-color: var(--line) !important; }
.drawer { border-left: 1px solid var(--line) !important; box-shadow: -12px 0 40px rgba(20,39,51,0.15) !important; }

.rider-marker, .avatar-marker { border-color: #fff; box-shadow: 0 0 0 2px rgba(11,78,162,0.35), 0 1px 4px rgba(20,39,51,0.35); }

.toast { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.toast.attack { background: #fff; border-color: rgba(216,35,42,0.4); color: var(--red); }
.toast.win { background: #fff; border-color: rgba(31,157,87,0.4); color: var(--green); }

/* заголовки: тот же Golos Text, чуть плотнее трекинг */
.auth h1, .drawer-brand, .drawer-head #meName, .board-title, .rides-title,
.ride-card-head, .level-top .rank, .sb-item, .event-banner, .profile-head h2, .me #meScore {
  font-family: var(--font-hud); letter-spacing: -0.01em;
}
.auth h1 { letter-spacing: -0.02em; font-weight: 800; }
.status, .ri-sub, .hint, .lock-hint, .notifs li .n-time, .muted { font-family: 'Golos Text', system-ui, sans-serif; }

/* ===== Сдержанный триколор РФ (белый-синий-красный) ===== */
/* тонкая триколорная полоса сверху экрана входа */
.auth::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tricolor); border-radius: var(--radius) var(--radius) 0 0;
}
.auth { overflow: hidden; }
/* подчёркивание активной вкладки нижней навигации триколором */
.tabbtn.active { color: var(--blue); text-shadow: none; position: relative; }
.tabbtn.active::after {
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px; background: var(--tricolor);
}
/* флаг-эмблема в брендинге шторки */
.drawer-brand::before {
  content: ''; width: 18px; height: 12px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(180deg, #fff 0 33.33%, #0b4ea2 33.33% 66.66%, #d8232a 66.66% 100%);
  box-shadow: 0 0 0 1px var(--line);
}

.controls button.active { box-shadow: 0 2px 8px rgba(31,157,87,0.3); }
.event-banner.live { box-shadow: 0 6px 18px rgba(216,35,42,0.4) !important; }
.event-banner.upcoming { background: linear-gradient(135deg, var(--blue), #2f6fc4); }

/* Leaflet-контролы */
.leaflet-bar { border: none !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { background: #fff !important; color: var(--ink) !important; border-bottom: 0.5px solid var(--line) !important; }
.leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
.leaflet-popup-content-wrapper { background: #fff; }
.leaflet-popup-tip { background: #fff; }
.popup-link { color: var(--blue); }

/* ===== Достижения и титул ===== */
.ptitle { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue);
  background: rgba(11,78,162,0.10); border: 1px solid rgba(11,78,162,0.25);
  border-radius: 8px; padding: 1px 8px; vertical-align: middle; margin-left: 6px; letter-spacing: 0; }
.ach-count { color: var(--gray); font-weight: 600; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.ach { display: flex; gap: 9px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; }
.ach.off { opacity: 0.62; }
.ach.on { border-color: rgba(31,157,87,0.45); box-shadow: 0 2px 8px rgba(31,157,87,0.12); }
.ach-ic { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
.ach.off .ach-ic { filter: grayscale(1); }
.ach-b { min-width: 0; flex: 1; }
.ach-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.ach-d { font-size: 11px; color: var(--gray); line-height: 1.3; margin-top: 1px; }
.ach-title { font-size: 10.5px; font-weight: 700; color: var(--blue); margin-top: 3px; }
.ach-got { font-size: 11px; font-weight: 700; color: var(--green); margin-top: 4px; }
.ach-prog { height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; margin-top: 5px; }
.ach-prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.ach-pc { font-size: 10px; color: var(--gray); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ===== Панель сезона ===== */
.season-box { margin: 6px 0 4px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; border-top: 3px solid var(--red); }
.season-box:empty { display: none; }
.season-head { display: flex; align-items: baseline; gap: 8px; }
.season-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.season-left { margin-left: auto; font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; }
.season-me { font-size: 13px; color: var(--ink2); margin: 6px 0; }
.season-me b { color: var(--blue); }
.season-board { display: flex; flex-direction: column; gap: 2px; }
.sb-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 14px; }
.sb-row.me { background: rgba(11,78,162,0.08); font-weight: 700; }
.sb-pos { width: 18px; text-align: center; color: var(--gray); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pts { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===== Магазин наград ===== */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.shop-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px; display: flex; flex-direction: column; gap: 3px; }
.shop-ic { font-size: 26px; }
.shop-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.shop-tag { font-size: 10px; font-weight: 700; color: var(--red); background: rgba(216,35,42,0.10); border-radius: 6px; padding: 1px 5px; vertical-align: middle; }
.shop-tag.dig { color: var(--blue); background: rgba(11,78,162,0.10); }
.shop-d { font-size: 11px; color: var(--gray); line-height: 1.3; flex: 1; }
.shop-buy { margin-top: 4px; background: var(--blue); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.shop-buy:disabled { background: var(--fill2); color: var(--gray); cursor: default; }
.order-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; margin-bottom: 6px; font-size: 14px; }
.order-row .o-ic { font-size: 18px; flex: 0 0 auto; }
.order-row .o-n { flex: 1; font-weight: 600; }
.order-row .o-sub { font-size: 11px; color: var(--gray); font-weight: 400; margin-top: 1px; }
.order-row .o-st { font-size: 12px; font-weight: 700; }
.o-st.st-new { color: var(--gray); }
.o-st.st-shipped { color: var(--blue); }
.o-st.st-done { color: var(--green); }
.o-st.st-cancelled { color: var(--red); }
.o-sel { width: auto; padding: 6px 8px; font-size: 12px; border-radius: 9px; background: var(--fill); flex: 0 0 auto; }