@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap');

:root {
  --sw-bg: #061313;
  --sw-panel: rgba(11, 28, 29, 0.94);
  --sw-panel-2: rgba(15, 35, 36, 0.9);
  --sw-line: rgba(118, 255, 234, 0.18);
  --sw-text: #edf8f6;
  --sw-muted: #9bb8b5;
  --sw-teal: #77f7e4;
  --sw-police: #ff746e;
  --sw-witness: #58d99a;
  --sw-dashcam: #ffd166;
  --sw-attorney: #77f7e4;
  --sw-bail: #f0c65f;
  --task-accent: var(--sw-teal);
  --task-accent-rgb: 119, 247, 228;
}

body.sw-task-police { --task-accent: var(--sw-police); --task-accent-rgb: 255, 116, 110; }
body.sw-task-witness { --task-accent: var(--sw-witness); --task-accent-rgb: 88, 217, 154; }
body.sw-task-dashcam { --task-accent: var(--sw-dashcam); --task-accent-rgb: 255, 209, 102; }
body.sw-task-attorney { --task-accent: var(--sw-attorney); --task-accent-rgb: 119, 247, 228; }
body.sw-task-bail { --task-accent: var(--sw-bail); --task-accent-rgb: 240, 198, 95; }

html, body.sw-task-page { width: 100%; min-height: 100%; overflow-x: hidden; }

body.sw-task-page {
  margin: 0 !important;
  color: var(--sw-text) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: radial-gradient(circle at 18% 10%, rgba(var(--task-accent-rgb), 0.13), transparent 29rem), linear-gradient(180deg, #071615 0%, var(--sw-bg) 46%, #041010 100%) !important;
  letter-spacing: 0 !important;
}

body.sw-task-page::before { background: none !important; opacity: 0 !important; }
body.sw-task-page *, body.sw-task-page *::before, body.sw-task-page *::after { box-sizing: border-box; letter-spacing: 0 !important; }

body.sw-task-page header.banner, body.sw-task-page .sw-header {
  width: 100% !important;
  min-height: 82px;
  padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  z-index: 1000 !important;
  background: rgba(5, 18, 18, 0.96) !important;
  border-bottom: 1px solid rgba(var(--task-accent-rgb), 0.18) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  color: var(--sw-text) !important;
  text-align: center !important;
}

body.sw-task-page header.banner > div, body.sw-task-page .sw-header h1 { max-width: calc(100% - 98px); }

body.sw-task-page header.banner h1, body.sw-task-page .sw-header h1 {
  margin: 0 !important;
  color: var(--sw-text) !important;
  font-family: Sora, Inter, sans-serif !important;
  font-size: clamp(1.05rem, 2.4vw, 1.32rem) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

body.sw-task-page .slogan, body.sw-task-page .sw-header::after {
  display: inline-flex !important;
  margin-top: 5px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(var(--task-accent-rgb), 0.34) !important;
  border-radius: 8px !important;
  background: rgba(var(--task-accent-rgb), 0.1) !important;
  color: var(--task-accent) !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

body.sw-task-page header .menu-icon {
  width: 42px !important;
  height: 42px !important;
  top: 20px !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(var(--task-accent-rgb), 0.42) !important;
  border-radius: 8px !important;
  background: rgba(var(--task-accent-rgb), 0.1) !important;
  color: var(--task-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 24px rgba(0,0,0,0.22) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

body.sw-task-page header .dropdown {
  top: 70px !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  width: min(280px, calc(100vw - 24px)) !important;
  background: transparent !important;
  z-index: 1001 !important;
}

body.sw-task-page header .dropdown-content {
  width: 100% !important;
  max-height: calc(100vh - 92px);
  overflow-y: auto !important;
  padding: 7px !important;
  gap: 7px !important;
  border: 1px solid rgba(var(--task-accent-rgb), 0.26) !important;
  border-radius: 10px !important;
  background: rgba(5, 18, 18, 0.98) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.34) !important;
  backdrop-filter: blur(16px) !important;
}

body.sw-task-page header .dropdown-content a {
  min-height: 44px;
  padding: 11px 13px 11px 16px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--sw-text) !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.035) !important;
}

body.sw-task-page header .dropdown-content a::before, body.sw-task-page .sw-back-pill::before {
  content: '';
  width: 4px;
  height: 22px;
  margin-right: 10px;
  border-radius: 99px;
  background: var(--task-accent);
  box-shadow: 0 0 18px rgba(var(--task-accent-rgb), 0.38);
  flex: 0 0 auto;
}

body.sw-task-page header .dropdown-content a#panic::before { background: var(--sw-police); }
body.sw-task-page header .dropdown-content a#streamAsWitness::before { background: var(--sw-witness); }
body.sw-task-page header .dropdown-content a#dashCam::before { background: var(--sw-dashcam); }
body.sw-task-page header .dropdown-content a#hireAttorney::before { background: var(--sw-attorney); }
body.sw-task-page header .dropdown-content a#logout::before { background: #9fb1ae; }

body.sw-task-page header .dropdown-content a:hover, body.sw-task-page header .dropdown-content a:focus-visible {
  border-color: rgba(var(--task-accent-rgb), 0.35) !important;
  background: rgba(var(--task-accent-rgb), 0.12) !important;
  color: var(--sw-text) !important;
}

body.sw-task-page main, body.sw-task-page .sw-main {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 28px) clamp(12px, 3vw, 24px) calc(28px + env(safe-area-inset-bottom)) !important;
  gap: clamp(14px, 2.6vw, 22px) !important;
  font-family: Inter, sans-serif !important;
}

body.sw-task-page .user-name, body.sw-task-page .location-camera-container, body.sw-task-page .grid-container .card, body.sw-task-page .attorney-placard, body.sw-task-page .placard-content, body.sw-task-page .controls, body.sw-task-page .cards-grid > *, body.sw-task-page #results > *, body.sw-task-page .pager, body.sw-task-page .camera-wrapper, body.sw-task-page .location-bar {
  border: 1px solid rgba(var(--task-accent-rgb), 0.2) !important;
  border-radius: 10px !important;
  background: var(--sw-panel) !important;
  color: var(--sw-text) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.21) !important;
  backdrop-filter: blur(16px) !important;
}

body.sw-task-page .user-name { width: 100% !important; max-width: 800px !important; margin: 0 auto !important; padding: 13px 14px !important; text-align: left !important; font-weight: 800 !important; }
body.sw-task-page .location-camera-container { width: 100% !important; max-width: 860px !important; margin: 0 auto !important; padding: clamp(12px, 3vw, 18px) !important; }
body.sw-task-page .location-bar { padding: 12px !important; background: rgba(255,255,255,0.035) !important; }
body.sw-task-page #map { width: 100% !important; min-height: 190px !important; border: 1px solid rgba(var(--task-accent-rgb), 0.16) !important; border-radius: 8px !important; overflow: hidden !important; background: #071515 !important; }
body.sw-task-page .grid-container { width: 100% !important; max-width: 980px !important; gap: 14px !important; }
body.sw-task-page .grid-container .card { padding: clamp(13px, 2.4vw, 18px) !important; }

body.sw-task-page h2, body.sw-task-page h3, body.sw-task-page h4, body.sw-task-page label, body.sw-task-page .field label, body.sw-task-page .attorney-form label, body.sw-task-page .coords p, body.sw-task-page .title-text { color: var(--sw-text) !important; font-family: Inter, sans-serif !important; font-weight: 800 !important; }
body.sw-task-page p, body.sw-task-page .muted, body.sw-task-page .or-divider { color: var(--sw-muted) !important; font-family: Inter, sans-serif !important; }

body.sw-task-page input, body.sw-task-page select, body.sw-task-page textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(var(--task-accent-rgb), 0.22) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--sw-text) !important;
  font-family: Inter, sans-serif !important;
  font-size: 1rem !important;
  outline: none !important;
}

body.sw-task-page input:focus, body.sw-task-page select:focus, body.sw-task-page textarea:focus { border-color: rgba(var(--task-accent-rgb), 0.58) !important; box-shadow: 0 0 0 3px rgba(var(--task-accent-rgb), 0.13) !important; }

body.sw-task-page button, body.sw-task-page .sw-btn, body.sw-task-page .pill-btn, body.sw-task-page .attorney-form button, body.sw-task-page .grid-container .card button, body.sw-task-page .camera-buttons button, body.sw-task-page #startButton, body.sw-task-page #stopButton, body.sw-task-page .collapsible, body.sw-task-page .sw-back-pill {
  min-height: 44px;
  border: 1px solid rgba(var(--task-accent-rgb), 0.34) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(var(--task-accent-rgb), 0.2), rgba(var(--task-accent-rgb), 0.07)) !important;
  color: var(--sw-text) !important;
  font-family: Inter, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important;
  text-decoration: none !important;
}

body.sw-task-page #stopButton, body.sw-task-page button.danger { border-color: rgba(255, 116, 110, 0.48) !important; background: linear-gradient(135deg, rgba(255, 116, 110, 0.24), rgba(255, 116, 110, 0.08)) !important; }
body.sw-task-page button:hover, body.sw-task-page .sw-btn:hover, body.sw-task-page .pill-btn:hover, body.sw-task-page .sw-back-pill:hover { transform: translateY(-1px) !important; border-color: rgba(var(--task-accent-rgb), 0.55) !important; }
body.sw-task-page video, body.sw-task-page canvas { max-width: 100% !important; border-radius: 10px !important; background: #020707 !important; }
body.sw-task-page .camera-wrapper video { height: min(62vh, 560px) !important; min-height: 280px !important; object-fit: cover !important; }

body.sw-task-page .controls {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  padding: clamp(14px, 3vw, 20px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

body.sw-task-page .controls .field, body.sw-task-page .controls .or-divider, body.sw-task-page .controls .sw-btn { grid-column: span 1; }
body.sw-task-page .controls .or-divider, body.sw-task-page .controls .sw-btn { grid-column: 1 / -1; }
body.sw-task-page .field label { display: block; margin-bottom: 6px; font-size: 0.82rem; }
body.sw-task-page .cards-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px !important; }
body.sw-task-page .pager { width: min(100%, 760px) !important; margin: 14px auto 0 !important; padding: 10px !important; display: flex !important; justify-content: center !important; gap: 10px !important; }

body.sw-task-page .sw-header::after { content: 'Safe-Watcher'; position: absolute; bottom: 9px; }
body.sw-task-page .sw-header h1 { padding-bottom: 24px; }
body.sw-task-page .sw-back-pill { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 18px; width: auto; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; }
body.sw-task-page .sw-back-pill .chev { margin-right: 8px; }

@media (max-width: 640px) {
  body.sw-task-page header.banner, body.sw-task-page .sw-header { min-height: 82px; padding-right: 66px !important; padding-left: 12px !important; }
  body.sw-task-page header.banner > div, body.sw-task-page .sw-header h1 { max-width: 100%; }
  body.sw-task-page .controls { grid-template-columns: 1fr; }
  body.sw-task-page .camera-buttons { width: 100%; flex-direction: column !important; gap: 9px !important; }
  body.sw-task-page .camera-buttons button, body.sw-task-page .sw-btn, body.sw-task-page .pill-btn { width: 100% !important; justify-content: center !important; }
  body.sw-task-page .camera-wrapper video { height: min(54vh, 460px) !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.sw-task-page header.banner, body.sw-task-page .sw-header { min-height: 64px; padding-top: 8px !important; padding-bottom: 8px !important; }
  body.sw-task-page .slogan, body.sw-task-page .sw-header::after { display: none !important; }
  body.sw-task-page header .menu-icon { top: 11px !important; }
  body.sw-task-page header .dropdown { top: 56px !important; }
  body.sw-task-page main, body.sw-task-page .sw-main { padding-top: 12px !important; }
}