:root {
  --tg-bg: var(--tg-theme-bg-color, #f4f8f6);
  --tg-text: var(--tg-theme-text-color, #17231f);
  --tg-hint: var(--tg-theme-hint-color, #6d7d76);
  --tg-card: var(--tg-theme-secondary-bg-color, #ffffff);
  --green: #147a62;
  --green-dark: #0c5948;
  --red: #be3d46;
  --line: #1e9f7d;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--tg-bg); color: var(--tg-text); font: 15px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
.app-shell { max-width: 680px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 4px 12px; }
.eyebrow { margin: 0 0 2px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.connection { font-size: 25px; color: #93a29b; line-height: 1; }
.connection.online { color: #1aaf77; }
.map-wrap { position: relative; height: min(43vh, 360px); min-height: 260px; overflow: hidden; border-radius: 22px; background: #dce9e2; box-shadow: 0 8px 26px #0a2d2017; }
#map { height: 100%; width: 100%; z-index: 0; }
.gps-status { position: absolute; left: 12px; top: 12px; z-index: 500; max-width: 80%; padding: 7px 10px; border-radius: 99px; background: #15231ddd; color: #fff; font-size: 12px; font-weight: 650; backdrop-filter: blur(8px); }
.map-button { position: absolute; right: 12px; bottom: 12px; z-index: 500; width: 42px; height: 42px; border: 0; border-radius: 14px; background: #fff; color: var(--green-dark); font-size: 25px; box-shadow: 0 3px 12px #0003; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0 10px; }
.metric { min-width: 0; padding: 11px 10px; border-radius: 15px; background: var(--tg-card); }
.metric span { display: block; overflow: hidden; color: var(--tg-hint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric strong { display: block; margin-top: 3px; overflow: hidden; font-size: 15px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.state-copy { min-height: 21px; margin: 3px 4px 12px; color: var(--tg-hint); font-size: 13px; }
.actions { display: grid; gap: 8px; }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button { min-height: 50px; border: 0; border-radius: 16px; padding: 10px 14px; color: #fff; font-weight: 800; letter-spacing: .01em; transition: transform .16s ease, opacity .16s ease; }
.button:active { transform: scale(.98); }
.button:disabled { cursor: default; opacity: .46; }
.button-primary { background: var(--green); }
.button-secondary { background: #657b73; }
.button-danger { background: var(--red); }
.offline-banner { margin-top: 11px; padding: 11px 13px; border-radius: 14px; background: #fff1d9; color: #825000; font-size: 13px; }
.report-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; padding: 13px 14px; border-radius: 17px; background: var(--tg-card); }
.report-card strong { font-size: 14px; }
.report-card p { margin: 2px 0 0; color: var(--tg-hint); font-size: 12px; }
.camera-button { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #e4f3ed; color: var(--green-dark); cursor: pointer; font-size: 22px; }
.camera-button input { display: none; }
.toast { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); left: 16px; z-index: 1000; padding: 11px 14px; border-radius: 14px; background: #17231fed; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.leaflet-control-attribution { font-size: 9px !important; }
@media (min-width: 680px) { .app-shell { padding-top: 24px; } .map-wrap { height: 390px; } }