[hidden] { display: none !important; }
html, body { margin:0; height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#111827; overflow:hidden; overscroll-behavior:none; }
* { box-sizing:border-box; }
#app { display:grid; grid-template-columns: 380px 1fr; height:100dvh; background:#f8fafc; overflow:hidden; }
#sidebar { background:#ffffff; border-right:1px solid #dbe3ef; overflow:auto; padding:14px; -webkit-overflow-scrolling:touch; }
#map { height:100dvh; width:100%; touch-action:none; position:relative; }
.mobile-tabs { display:none; }
.map-filter-bar { display:none; }
.brand-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.brand-icon { width:42px; height:42px; border-radius:12px; box-shadow:0 2px 8px rgba(15,23,42,.15); }
h1 { margin:0; font-size:21px; letter-spacing:-.02em; color:#0f172a; }
.sub { color:#64748b; font-size:13px; margin-top:2px; }
.toolbar { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0; }
.filter { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:8px 11px; font-weight:700; cursor:pointer; }
.filter.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.warnings { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:12px; padding:9px 10px; font-size:13px; margin:10px 0; }
.job { border:1px solid #dbe3ef; background:#fff; border-radius:15px; padding:12px; margin:10px 0; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.job:hover { border-color:#94a3b8; background:#f8fafc; }
.job-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.crew { font-weight:900; font-size:14px; color:#0f172a; }
.badge { font-size:11px; border-radius:999px; padding:4px 8px; color:white; font-weight:900; letter-spacing:.02em; }
.addr { margin-top:8px; font-size:15px; font-weight:700; color:#1f2937; }
.meta { margin-top:6px; color:#64748b; font-size:12px; line-height:1.38; }
.job-actions { display:none; }
.marker { width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35); display:grid; place-items:center; }
.marker span { transform:rotate(45deg); font-weight:900; font-size:11px; color:white; text-shadow:0 1px 2px #000; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#fff; color:#111827; border:1px solid #cbd5e1; }
.leaflet-popup-content { margin:12px 14px; min-width:230px; }
.popup-title { font-weight:900; font-size:16px; margin-bottom:6px; color:#0f172a; }
.popup-line { margin:4px 0; color:#334155; }
.map-buttons { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.map-button { color:#fff !important; border-radius:10px; padding:9px 11px; text-decoration:none; font-weight:900; display:inline-block; }
.apple { background:#111827; }
.google { background:#2563eb; }
.leaflet-tooltip { background: rgba(255,255,255,0.96); border: 1px solid #94a3b8; color: #0f172a; border-radius: 8px; padding: 7px 10px; box-shadow:0 4px 16px rgba(15,23,42,.18); }
.pin-gate { min-height:100dvh; display:grid; place-items:center; background:linear-gradient(135deg,#e0f2fe,#f8fafc 45%,#dbeafe); padding:20px; }
.pin-card { width:min(420px,100%); background:white; border:1px solid #dbe3ef; border-radius:24px; padding:24px; box-shadow:0 20px 60px rgba(15,23,42,.18); text-align:center; }
.pin-icon { width:78px; height:78px; border-radius:20px; margin-bottom:12px; }
.pin-card p { color:#64748b; margin:8px 0 18px; }
#pinForm { display:flex; gap:8px; }
#pinInput { flex:1; font-size:20px; padding:12px; border:1px solid #cbd5e1; border-radius:12px; text-align:center; min-width:0; }
#pinForm button { background:#2563eb; color:#fff; border:0; border-radius:12px; padding:0 16px; font-weight:900; }
.pin-error { color:#dc2626; margin-top:10px; font-weight:800; }

@media (max-width: 800px) {
  #app { display:flex; flex-direction:column; height:100dvh; width:100vw; }
  .mobile-tabs { display:flex; gap:8px; padding:calc(24px + env(safe-area-inset-top)) 12px 10px; background:#0f172a; border-bottom:1px solid rgba(255,255,255,.12); flex:0 0 auto; }
  .mobile-tab { flex:1; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#e5e7eb; border-radius:999px; padding:11px 12px; font-weight:900; font-size:15px; }
  .mobile-tab.active { background:#2563eb; color:#fff; border-color:#60a5fa; box-shadow:0 6px 18px rgba(37,99,235,.28); }
  #sidebar { height:auto; flex:1 1 auto; min-height:0; border-right:0; border-top:0; padding:12px 12px calc(18px + env(safe-area-inset-bottom)); overflow:auto; }
  #map { height:auto; flex:1 1 auto; min-height:0; width:100%; display:none; }
  #app[data-mobile-tab="map"] #sidebar { display:none; }
  #app[data-mobile-tab="map"] #map { display:block; }
  #app[data-mobile-tab="jobs"] #sidebar { display:block; }
  #app[data-mobile-tab="jobs"] #map { display:none; }

  .map-filter-bar { display:flex; position:absolute; top:10px; left:58px; right:10px; z-index:1000; gap:5px; padding:5px; background:rgba(15,23,42,.82); border:1px solid rgba(255,255,255,.16); border-radius:14px; backdrop-filter:blur(12px); box-shadow:0 6px 18px rgba(15,23,42,.22); }
  .map-filter { flex:1; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#e5e7eb; border-radius:999px; padding:7px 5px; font-weight:900; font-size:12px; line-height:1; }
  .map-filter.active { background:#2563eb; color:#fff; border-color:#60a5fa; }
  .brand-row { position:sticky; top:0; z-index:4; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); margin:-12px -12px 8px; padding:12px; border-bottom:1px solid #e2e8f0; }
  .brand-icon { width:38px; height:38px; }
  h1 { font-size:18px; }
  .sub { font-size:12px; }
  .toolbar { position:sticky; top:63px; z-index:4; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); margin:0 -12px 10px; padding:8px 12px 10px; border-bottom:1px solid #e2e8f0; }
  .filter { padding:9px 12px; }
  .warnings { margin:10px 0; }
  .job { margin:10px 0; padding:13px; border-radius:18px; cursor:default; }
  .crew { font-size:15px; }
  .addr { font-size:17px; line-height:1.2; }
  .meta { font-size:13px; }
  .job-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:12px; }
  .job-action { border:0; border-radius:13px; padding:12px 10px; color:#fff !important; text-align:center; text-decoration:none; font-weight:900; font-size:13px; line-height:1; }
  .job-action.ghost { background:#e2e8f0; color:#0f172a !important; }
  .leaflet-control-zoom { margin-top:14px !important; }
  .leaflet-popup-content { min-width:245px; }
  .pin-card { padding:22px; }
}