:root{
  --card:#fff;
  --text:#10131e;
  --muted:#737B8B;
  --border:#DEE1ED;
  --bg:#F9F9FB;

  --pin:#ff6a00;
  --pin-soft: rgba(255,106,0,0.16);
  --blue:#2f6bff;
  --blue-soft: rgba(47,107,255,0.10);

  --shadow: 0 10px 30px rgba(16,19,30,.08);
  --ring: 0 0 0 4px rgba(255,106,0,0.14);
}

html.dark{
  --card:#0f1626;
  --text:#f5f7ff;
  --muted:#a9b2c6;
  --border:#24304a;
  --bg:#0b1020;

  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --ring: 0 0 0 4px rgba(255,106,0,0.18);
}

body{ background: var(--bg); color: var(--text); }

.sb-card{ background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sb-muted{ color: var(--muted); }

.sb-ring:focus, .sb-ring:focus-visible{ outline:none; box-shadow: var(--ring); }

.sb-btn-primary{ background: var(--pin); color:#fff; border: 1px solid rgba(255,106,0,.55); }
.sb-btn-primary:hover{ opacity:.92; }

.sb-btn-ghost{ background: transparent; border: 1px solid var(--border); }

.pill{ border: 1px solid rgba(255,106,0,.35); background: var(--pin-soft); }

.mini-map{
  background:
    linear-gradient(135deg, var(--blue-soft), rgba(255,106,0,0.08)),
    radial-gradient(circle at 20% 30%, rgba(47,107,255,0.10), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,106,0,0.10), transparent 45%);
}