:root {
  --bg: #0a0b0f;
  --bg-soft: #12141b;
  --panel: #171a23;
  --panel-2: #1d212c;
  --text: #f3f5fa;
  --muted: #9ea6b7;
  --line: #313747;
  --line-soft: #3f4659;
  --accent: #c70f2d;
  --accent-soft: rgba(199, 15, 45, 0.22);
  --ok: #2fb673;
  --warn: #f0b429;
  --bad: #df4f65;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", "Noto Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(70% 80% at 90% 0%, rgba(199, 15, 45, 0.18), transparent 55%),
    radial-gradient(60% 75% at 0% 100%, rgba(115, 33, 47, 0.25), transparent 60%),
    linear-gradient(165deg, #08090d, #10131a 55%, #0d1016);
  min-height: 100vh;
}

a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

.pg-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  width: min(460px, 100%);
  background: linear-gradient(180deg, rgba(28, 31, 41, 0.97), rgba(18, 20, 27, 0.98));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
}
.brand { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 6px; }
.subtitle { margin: 0 0 20px; color: var(--muted); font-size: 13px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { color: var(--muted); font-size: 13px; }
input, select, button {
  font: inherit;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(199, 15, 45, 0.25);
}
button { cursor: pointer; transition: .16s ease; }
button:hover { border-color: var(--line-soft); }
.btn-primary {
  width: 100%;
  background: linear-gradient(180deg, rgba(199, 15, 45, 0.85), rgba(147, 11, 34, 0.95));
  border-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.btn-primary:disabled { opacity: .7; cursor: wait; }
.auth-foot { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(199, 15, 45, 0.38);
  background: rgba(12, 14, 20, 0.9);
  backdrop-filter: blur(10px);
}
.topbar-wrap { max-width: 1300px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.topbar-brand { font-weight: 700; letter-spacing: .03em; margin-right: 8px; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav a, .nav button {
  background: linear-gradient(180deg, rgba(34, 38, 49, 0.95), rgba(20, 23, 31, 0.95));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.nav a.active { border-color: var(--accent); background: linear-gradient(180deg, rgba(199, 15, 45, 0.42), rgba(99, 9, 25, 0.45)); }
.nav-spacer { flex: 1; }

.main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.card {
  background: linear-gradient(180deg, rgba(25, 29, 38, 0.95), rgba(18, 21, 29, 0.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.card h2, .card h3 { margin: 0 0 10px; }
.muted { color: var(--muted); font-size: 13px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); padding: 10px; }
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v { font-size: 22px; font-weight: 700; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; min-width: 140px; }
.row .fixed { flex: 0 0 auto; min-width: 0; }

.filebox {
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.02);
}
.filebox.drag { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 9px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; font-size: 13px; vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: rgba(255,255,255,.03); position: sticky; top: 0; }
img.thumb { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); }

.badge { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 12px; border: 1px solid transparent; }
.badge.done, .badge.active, .badge.auto_geocoded { color: #9ef0c3; border-color: rgba(47,182,115,.5); background: rgba(47,182,115,.15); }
.badge.error, .badge.disabled, .badge.not_found { color: #ffc0ca; border-color: rgba(223,79,101,.5); background: rgba(223,79,101,.16); }
.badge.no_gps, .badge.needs_geocode, .badge.gps_found_no_poi { color: #ffe3a2; border-color: rgba(240,180,41,.48); background: rgba(240,180,41,.16); }
.badge.default { color: #d4daea; border-color: rgba(138,151,177,.45); background: rgba(80,91,113,.22); }

.toast-wrap { position: fixed; right: 14px; bottom: 14px; z-index: 80; display: grid; gap: 8px; max-width: 360px; }
.toast { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(20,24,33,.95); box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.toast.ok { border-color: rgba(47,182,115,.5); }
.toast.err { border-color: rgba(223,79,101,.55); }

.status-panel { min-height: 20px; font-size: 13px; color: var(--muted); }
.status-panel.ok { color: #9ef0c3; }
.status-panel.err { color: #ffc0ca; }

@media (max-width: 980px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .main { padding: 12px; }
  .auth-card { padding: 18px; }
}