:root {
  font-family: 'Roboto', Arial, system-ui, sans-serif;
  color: #1F2937;
  background: #F5F7FA;
  font-synthesis: none;
  --primary: #264264;
  --primary-dark: #1c3453;
  --ink: #1F2937;
  --muted: #64748B;
  --line: #E5EAF0;
  --paper: #fff;
  --soft: #F5F7FA;
  --shadow: 0 4px 12px rgba(0,0,0,.05);
  --radius: 16px;
  --nav-height: 72px;
}
* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; width: 100%; min-width: 320px; max-width: 100%; }
body { overflow-x: hidden; background: var(--soft); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .58; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #6ca3d5; outline-offset: 2px; }
a { color: var(--primary); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { font-size: 26px; line-height: 1.16; margin-bottom: 6px; font-weight: 800; }
h2 { font-size: 17px; margin-bottom: 0; font-weight: 800; }
h3 { font-size: 15px; }
.app-shell { width: 100%; min-height: 100vh; min-height: 100dvh; }
.main-area { width: 100%; min-width: 0; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 17px 14px; width: 100%; max-width: 700px; margin: 0 auto; }
.app-greeting { min-width: 0; }
.app-date { font-size: 12px; color: var(--muted); font-weight: 500; margin: 0 0 7px; text-transform: capitalize; }
.greeting-line { display:flex; gap: 11px; flex-wrap: wrap; align-items: baseline; }
.greeting-line h1 { margin: 0; }
.app-context { font-size: 10px; color: #94A3B8; font-weight: 700; letter-spacing: .07em; }
.profile-button { flex: 0 0 43px; height: 43px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--primary); box-shadow: var(--shadow); }
.content { max-width: 700px; width: 100%; padding: 8px 16px calc(var(--nav-height) + 45px + env(safe-area-inset-bottom,0px)); margin: 0 auto; overflow-wrap: anywhere; }
.card { background: #fff; border: 1px solid #edf0f5; border-radius: 16px; box-shadow: var(--shadow); }
.weather-card { width: 100%; border: 1px solid #e4edf7; border-radius: 16px; background: linear-gradient(125deg,#DCECFB 0%,#EDF6FF 59%,#FFF 100%); padding: 21px 20px 17px; color: var(--primary); box-shadow: var(--shadow); }
.weather-upper { display:flex; align-items:center; justify-content:space-between; gap: 14px; }
.weather-kicker { display:flex; gap:7px; align-items:center; font-size: 13px; font-weight: 700; }
.weather-sky { display:grid; place-items:center; width: 45px; height: 45px; background:#ffffffbb; border-radius: 13px; }
.weather-reading { margin: 3px 0 20px; display:flex; flex-wrap:wrap; gap: 5px 14px; align-items:baseline; }
.weather-temp { font-size:48px; font-weight: 800; line-height:1.05; letter-spacing:-.065em; }
.weather-condition { color:#4c6884; font-size:13px; font-weight:500; }
.weather-metrics { border-top:1px solid #d7e4f0; padding-top:17px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: 8px; }
.wmetric { min-width:0; }
.wmetric-label { display:flex; align-items:center; gap:5px; margin-bottom:7px; color:#5D7792; font-size:11px; font-weight:500; }
.wmetric-value { font-size:19px; line-height:1.2; font-weight:800; color:var(--primary); white-space: nowrap; }
.wmetric-unit { font-size:10px; font-weight:600; }
.weather-meta { margin:17px 0 0; color:#657c95; font-size:10px; line-height:1.5; }
.home-primary { width:100%; margin-top:17px; min-height:60px; display:flex; align-items:center; gap:12px; justify-content:center; border:0; background:var(--primary); color:#fff; border-radius:16px; box-shadow:0 8px 18px rgba(38,66,100,.16); font-size:16px; font-weight:800; padding:14px 19px; }
.home-primary svg:last-child { margin-left:auto; }
.home-primary svg:first-child { margin-left:auto; }
.home-primary:hover, .button:hover { background:var(--primary-dark); }
.home-section { margin-top:27px; }
.section-heading { margin-bottom:13px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.text-action { display:flex; align-items:center; gap:4px; border:0; background:transparent; color:var(--primary); font-size:12px; font-weight:700; padding:7px 0 7px 8px; }
.resume-card { padding:14px; }
.resume-action { width:100%; display:flex; align-items:center; gap:12px; border:0; background:transparent; text-align:left; padding:0; color:var(--ink); }
.resume-empty { display:flex; align-items:center; gap:12px; }
.resume-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:13px; color:var(--primary); background:#eef3f9; }
.resume-detail { display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; }
.resume-action strong, .resume-empty strong { font-weight:700; font-size:13px; }
.resume-action small, .resume-empty small { display:block; margin-top:4px; font-size:11px; line-height:1.5; color:var(--muted); }
.resume-action > svg { color:var(--primary); flex:none; }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.overview-card { padding:14px 10px; min-height:125px; display:flex; flex-direction:column; align-items:flex-start; }
.overview-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:var(--primary); background:#eef3f9; margin-bottom:9px; }
.overview-card strong { font-size:23px; line-height:1; font-weight:800; }
.overview-card small { margin-top:6px; color:var(--muted); font-size:10px; }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px)); background:#fff; border-top:1px solid #E5EAF0; box-shadow:0 -3px 14px rgba(25,48,74,.035); z-index:100; display:flex; align-items:stretch; justify-content:space-around; padding:6px max(6px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-right,0px)); }
.bottom-btn { border:0; background:transparent; color:#8794A7; padding:7px 2px 5px; min-width:0; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:12px; font-size:10px; font-weight:500; }
.bottom-btn span { max-width:100%; white-space:nowrap; }
.bottom-btn svg { flex:none; width:21px; height:21px; }
.bottom-btn.active { color:var(--primary); font-weight:800; }
.bottom-btn.active svg { stroke-width:2.3; }
/* Every secondary screen uses the same mobile card language. */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin:6px 0 19px; }
.page-head h1 { font-size:24px; }
.eyebrow { color:#577495; font-size:10px; letter-spacing:.10em; text-transform:uppercase; font-weight:800; margin:0 0 7px; }
.subheading { color:var(--muted); font-size:13px; line-height:1.5; margin:0; }
.date-label { color:var(--muted); font-size:12px; }
.section-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:24px 0 14px; }
.button { min-height:47px; border:0; border-radius:13px; color:#fff; background:var(--primary); padding:12px 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:13px; font-weight:700; line-height:1.25; text-align:center; }
.button svg,.text-action svg { width:18px; height:18px; flex:none; }
.button.secondary { color:var(--primary); background:#e9f1f8; }
.button.secondary:hover { background:#dce9f5; }
.button.ghost { border:1px solid #dfe7ef; color:var(--primary); background:#fff; }
.button.danger { color:#9d463b; background:#ffefec; }
.button.wide { width:100%; }
.button.small { min-height:39px; padding:9px 11px; font-size:12px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.searchbox { display:flex; gap:9px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 14px; min-height:49px; box-shadow:var(--shadow); }
.searchbox input { flex:1; width:100%; background:transparent; min-width:0; border:0; outline:none; font-size:13px; }
.list-stack { display:grid; gap:11px; margin-top:16px; }
.situation-card { width:100%; border:1px solid #e7edf5; border-radius:16px; background:#fff; box-shadow:var(--shadow); padding:14px; min-height:84px; display:flex; align-items:center; gap:11px; text-align:left; color:var(--ink); }
.situation-card:hover { border-color:#adc2db; }
.situation-icon { width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; background:#eef3f9; color:var(--primary); }
.situation-main { flex:1; min-width:0; }
.situation-title { color:var(--ink); font-size:13px; font-weight:800; overflow-wrap:anywhere; }
.situation-desc { color:var(--muted); font-size:11px; margin-top:5px; line-height:1.4; }
.situation-card > svg { flex:none; color:#8296a9; }
.tag { border-radius:100px; background:#edf4fb; color:var(--primary); padding:6px 9px; font-size:10px; font-weight:700; line-height:1.3; }
.tag.pending { color:#a46a26; background:#fff2e3; }
.empty { min-height:120px; padding:23px; text-align:center; color:var(--muted); font-size:12px; line-height:1.55; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; }
.empty-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--primary); background:#e9f1f8; }
.form-panel { padding:19px 17px; margin-bottom:14px; }
.form-title { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.form-title h2 { font-size:16px; }
.field { display:grid; gap:8px; margin-bottom:19px; min-width:0; }
.field:last-child { margin-bottom:0; }
.field-label { color:#334961; font-size:12px; font-weight:700; }
.field input, .field textarea, .field select { border:1px solid #dfe6ef; border-radius:12px; width:100%; min-width:0; min-height:48px; background:#fbfcfe; color:var(--ink); padding:12px 13px; outline:none; font-size:14px; }
.field textarea { resize:vertical; line-height:1.5; min-height:120px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:#6686a9; box-shadow:0 0 0 3px #6686a920; }
.field-help { display:block; font-size:11px; line-height:1.5; color:var(--muted); }
.object-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.obj-chip { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-height:94px; padding:13px; border-radius:14px; border:1px solid #e3eaf1; background:#f9fbfd; color:#344b64; font-weight:700; font-size:12px; text-align:left; }
.obj-chip svg { width:21px; height:21px; flex:none; }
.obj-chip.selected { border:2px solid var(--primary); background:#e8f1fb; color:var(--primary); }
.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin:14px 0 23px; }
.form-actions .button { flex:1; }
.location-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:17px; }
.loc-btn { display:flex; gap:8px; align-items:center; justify-content:flex-start; min-width:0; padding:10px 11px; min-height:49px; border:1px solid #e1e9f1; border-radius:12px; background:#f8fafc; color:var(--primary); font-size:12px; font-weight:700; }
.loc-btn svg { width:18px; height:18px; flex:none; }
.two-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.alert, .info-alert { border-radius:13px; background:#fff7e8; border:1px solid #f7e1be; padding:14px; font-size:12px; line-height:1.6; }
.flow-header { padding:17px; margin-bottom:13px; }
.flow-label { display:block; color:#647f9b; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.flow-name { font-size:16px; font-weight:800; margin:6px 0 8px; color:var(--ink); }
.flow-sub { font-size:11px; color:var(--muted); line-height:1.4; }
.stat-strip { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.evidence-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.evidence-tile { background:#f7fafd; border-radius:14px; border:1px solid var(--line); overflow:hidden; min-width:0; }
.evidence-tile img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.evidence-tile .tile-label { padding:10px; font-size:10px; color:var(--muted); }
.evidence-tile.audio { display:flex; flex-direction:column; gap:7px; padding:12px; }
.evidence-tile audio { width:100%; min-width:0; }
.capture-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:15px; }
.capture-actions .button { min-width:0; padding:11px 7px; }
.capture-actions .button:first-child { grid-column:1/-1; }
.note-card { margin-top:14px; border-radius:14px; background:#f0f4f9; padding:13px; font-size:11px; line-height:1.55; color:#61758d; }
.summary-card { padding:18px 16px; }
.summary-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.recent-item { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #f0f3f6; }
.recent-symbol { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#eef3f9; color:var(--primary); flex:none; }
.recent-text { flex:1; min-width:0; }
.recent-title { font-size:12px; font-weight:800; overflow-wrap:anywhere; }
.recent-sub { font-size:11px; color:var(--muted); margin-top:4px; }
.circle-btn { border-radius:50%; width:39px; height:39px; flex:none; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--primary); }
.quickstats { display:flex; align-items:stretch; gap:9px; }
.stat { flex:1; border-radius:12px; background:#f2f6fa; padding:12px; }
.stat-number { font-size:23px; font-weight:800; color:var(--primary); }
.stat-label { font-size:11px; color:var(--muted); }
.offline-banner { width:100%; background:#fff4e5; color:#8c5b2d; text-align:center; font-size:12px; padding:9px 15px; }
.map-wrap { position:relative; width:100%; height:340px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#e5ebef; }
.map-tiles { position:absolute; inset:0; overflow:hidden; }
.map-tiles img { width:256px; height:256px; position:absolute; max-width:none; }
.map-crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--primary); pointer-events:none; z-index:2; }
.map-attrib { position:absolute; bottom:5px; left:5px; background:#ffffffdb; color:#4e6070; font-size:9px; padding:3px 5px; z-index:2; }
.map-controls { position:absolute; top:12px; right:12px; z-index:3; display:grid; gap:6px; }
.map-controls button { border:0; border-radius:10px; background:#fff; box-shadow:var(--shadow); width:39px; height:39px; font-size:21px; color:var(--primary); }
.toast { position:fixed; left:50%; bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 15px); transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); z-index:200; color:#fff; background:#1f344d; box-shadow:0 7px 25px #0002; border-radius:13px; padding:13px 17px; font-size:12px; line-height:1.4; }
.hidden { display:none !important; }
.camera-overlay { position:fixed; inset:0; background:#081b1f; color:#fff; z-index:500; display:flex; flex-direction:column; }
.camera-overlay video { flex:1; object-fit:contain; width:100%; min-height:0; background:#050b0c; }
.camera-header,.camera-footer { padding:20px max(19px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:15px; }
.camera-header { font-size:12px; font-weight:800; letter-spacing:.09em; }
.camera-header button { border:0; background:#ffffff1b; color:#fff; padding:10px; border-radius:12px; }
.camera-footer { flex-direction:column; padding-bottom:calc(28px + env(safe-area-inset-bottom)); font-size:12px; text-align:center; }
.camera-shutter { width:75px; height:75px; border-radius:50%; border:4px solid #fff; background:transparent; display:grid; place-items:center; }
.camera-shutter span { width:55px; height:55px; border-radius:50%; background:#fff; }
.camera-shutter:disabled { opacity:.5; }
@media (min-width: 760px) {
  .app-header { padding-top:33px; }
  .content { padding-top:13px; }
}
@media (max-width: 355px) {
  .app-context { display:none; }
  .content { padding-left:11px; padding-right:11px; }
  .weather-card { padding:18px 15px; }
  .bottom-btn { font-size:9px; }
  .bottom-btn svg { width:20px; height:20px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }