#app { min-height: 100dvh; }
.ag-shell { display:flex; flex-direction:column; min-height:100dvh; }
.ag-top { align-items:center; background:var(--card); border-bottom:1px solid var(--line); display:flex; gap:12px; justify-content:space-between; padding:10px clamp(14px,3vw,26px); }
.ag-top .brand-mark img { display:block; height:28px; width:28px; }
.ag-top .brand-mark { height:38px; width:38px; }
.ag-context { color:var(--ink-soft); font-size:11px; margin-top:2px; }
.ag-actions { align-items:center; display:flex; gap:7px; }
.sync { background:#cfe6d7; border-radius:999px; color:#2f5b41; font-size:11px; font-weight:800; padding:5px 9px; white-space:nowrap; }
.sync.pending { background:#fbedc8; color:#76561b; }.sync.offline { background:#fae0d8; color:#873f36; }
.icon { background:var(--paper); border:1px solid var(--line); border-radius:9px; height:36px; width:36px; }
.ag-nav { background:var(--card); border-bottom:1px solid var(--line); display:flex; gap:4px; overflow-x:auto; padding:7px clamp(12px,3vw,24px); }
.ag-nav button { background:transparent; border:0; border-radius:9px; color:var(--ink-soft); font-size:12px; font-weight:800; padding:8px 11px; white-space:nowrap; }.ag-nav button.active { background:var(--ink); color:#fff; }
.ag-main { flex:1; margin:0 auto; max-width:1120px; padding:22px clamp(14px,4vw,34px) 92px; width:100%; }
.eyebrow { color:var(--sage); font-size:10px; font-weight:900; letter-spacing:.15em; margin:0 0 5px; text-transform:uppercase; }.ag-main h1 { font-family:var(--display); font-size:34px; font-weight:400; letter-spacing:-.04em; margin:0 0 8px; }.lead { color:var(--ink-soft); line-height:1.5; margin:0 0 18px; }
.metrics { display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin:18px 0; }.metric { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }.metric b { display:block; font-family:var(--display); font-size:30px; font-weight:400; }.metric span { color:var(--ink-soft); font-size:11px; font-weight:800; }
.section { margin-top:24px; }.section h2 { font-size:15px; margin:0 0 10px; }.cards { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); }
.work-card { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:13px; padding:13px; text-align:left; width:100%; }.work-card.high { border-left-color:var(--coral); }.work-card.medium { border-left-color:var(--gold); }.work-card p { color:var(--ink-soft); font-size:12px; line-height:1.45; margin:7px 0; }.work-card b { font-size:13px; }.tag { background:var(--paper); border-radius:999px; color:var(--ink-soft); display:inline-block; font-size:10px; font-weight:900; padding:4px 7px; }.tag.high { background:#fae0d8; color:#913d34; }.tag.medium { background:#fbedc8; color:#76561b; }
.row { align-items:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }.row-actions { display:flex; gap:8px; margin-top:10px; }.row-actions .button { font-size:12px; padding:8px 11px; }
.filters { align-items:center; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }.filters select,.filters input,.form select,.form textarea,.form input { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:9px; }.filters select { min-width:160px; }
.map-stage { background:#c7d3c9; border:1px solid var(--line); border-radius:16px; height:min(68dvh,700px); overflow:hidden; position:relative; }.map-stage #map { height:100%; width:100%; }.map-help { background:rgba(255,253,248,.95); border:1px solid var(--line); border-radius:10px; font-size:11px; left:10px; padding:8px 10px; position:absolute; top:10px; z-index:2; }
.map-offline { background:rgba(255,253,248,.96); border:1px solid var(--line); border-radius:11px; bottom:10px; left:10px; padding:8px; position:absolute; z-index:2; }.map-offline .button { font-size:11px; padding:7px 9px; }
.history-row { align-items:flex-start; border-bottom:1px solid var(--line); display:flex; gap:12px; padding:12px 0; }.history-row time { color:var(--ink-soft); font-size:11px; min-width:82px; }.history-row p { color:var(--ink-soft); font-size:12px; margin:4px 0 0; }
.form { display:grid; gap:11px; }.form label { color:var(--ink-soft); display:grid; font-size:11px; font-weight:800; gap:5px; }.form-grid { display:grid; gap:10px; grid-template-columns:1fr 1fr; }.form textarea { min-height:88px; resize:vertical; width:100%; }.form .button { margin-top:4px; }.field-help { color:var(--ink-soft); font-size:11px; line-height:1.45; margin:0; }.photo-preview { border-radius:10px; max-height:220px; object-fit:cover; width:100%; }.empty { color:var(--ink-soft); font-size:13px; padding:20px 0; }
@media (max-width:640px) { .ag-top { padding:9px 12px; }.ag-top .brand-context,.sync { display:none; }.metrics { grid-template-columns:1fr 1fr; }.ag-main { padding-top:18px; }.form-grid { grid-template-columns:1fr; }.ag-nav { bottom:0; box-shadow:0 -4px 18px rgba(16,42,45,.09); position:fixed; z-index:30; }.ag-nav button { flex:1; font-size:10px; padding:10px 6px; }.map-stage { border-radius:0; height:calc(100dvh - 145px); margin:0 -14px; }.map-help { max-width:72%; }.ag-main:has(.map-stage) { padding-top:0; } }