:root {
  color-scheme: dark;
  font-family: "SamsungOne", Roboto, "Segoe UI", system-ui, sans-serif;
  color: #f5f4ef;
  background: #121212;
  --surface: #1b1b1d;
  --card: #252527;
  --border: #3a3e41;
  --muted: #bdc2c4;
  --gold: #ffce52;
  --blue: #8ad4ff;
  --bar: 72px;
  --action: #a4c9ff;
  --action-ink: #101e36;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
h1, h2, h3, p { margin: 0; }
svg { width: 22px; height: 22px; display: block; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.app-bar {
  height: var(--bar); display: flex; gap: 12px; align-items: center;
  padding: 0 clamp(14px, 2.4vw, 30px); border-bottom: 1px solid #292d30;
}
.app-name { display: grid; gap: 2px; }
.app-name strong { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.app-name small, .sheet-heading p, .meta, .helper, .row small { color: var(--muted); font-size: 13px; }
.local-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); padding: 7px 11px; border-radius: 100px; font-size: 12px;
}
.local-tag i { width: 7px; height: 7px; background: #9bdab2; border-radius: 50%; }
.bubble {
  width: 46px; height: 46px; padding: 0; border: 1px solid var(--border);
  border-radius: 50%; background: #25282a; flex: none;
}
.bubble:hover, .menu-row:hover, .row:is(button):hover { background: #323638; }
.menu-toggle { width: 50px; height: 50px; background: #2b2d32; border-color: transparent; }
.menu-toggle svg { width: 25px; height: 25px; }
.menu-toggle[aria-expanded="true"] { color: var(--gold); background: #3a3221; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  min-height: 44px; padding: 0 13px; border: 1px solid #63413e; border-radius: 100px;
  color: #ffc2b9; background: #382625; font-size: 12px; font-weight: 750; letter-spacing: .06em;
}
.rec-chip i { width: 8px; height: 8px; border-radius: 50%; background: #ff9188; }
.rec-chip:not([hidden]) + .local-tag { display: none; }
.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 14px; padding: 14px; min-height: calc(100dvh - var(--bar));
  height: calc(100dvh - var(--bar));
}
.map-frame { position: relative; isolation: isolate; min-height: 280px; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); }
#map { position: absolute; inset: 0; background: #222a29; }
.map-top { position: absolute; z-index: 501; top: 14px; left: 14px; }
.segments, .zoom {
  display: inline-flex; background: #1b1e20; border: 1px solid #484d50;
  border-radius: 28px; padding: 4px; box-shadow: 0 4px 18px #0006;
}
.segments button {
  display: flex; align-items: center; gap: 7px; border: 0; border-radius: 24px;
  background: transparent; padding: 0 12px; min-height: 44px; font-size: 13px; font-weight: 650;
}
.segments svg { width: 17px; height: 17px; }
.segments button[aria-pressed="true"] { background: var(--gold); color: #1b1710; }
.map-tools { position: absolute; z-index: 501; right: 14px; bottom: 35px; display: grid; justify-items: end; gap: 9px; }
.map-tools > .bubble { background: #1b1e20; box-shadow: 0 4px 18px #0006; }
.map-tools > #locate-map { color: #172437; background: var(--action); border-color: transparent; }
.map-tools > #locate-map.following { outline: 2px solid #eff6ff; outline-offset: 2px; }
.gps-message {
  position: absolute; z-index: 501; bottom: 62px; left: 14px; max-width: calc(100% - 85px);
  padding: 9px 12px; background: #20242a; border: 1px solid var(--border);
  border-radius: 12px; font-size: 13px; overflow-wrap: anywhere;
}
.zoom { flex-direction: column; padding: 0; overflow: hidden; }
.zoom .bubble { border: 0; border-radius: 0; background: none; }
.zoom .bubble + .bubble { border-top: 1px solid var(--border); }
.map-legend { position: absolute; z-index: 501; bottom: 36px; left: 14px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; background: #1c1f21; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; }
.map-legend i { width: 9px; height: 9px; background: var(--gold); border-radius: 50%; }
#target-legend i { background: var(--blue); }
.map-message { position: absolute; z-index: 501; top: 77px; left: 14px; max-width: calc(100% - 28px); padding: 9px 12px; background: #222527; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.leaflet-tile-pane.road-tiles { filter: invert(.88) hue-rotate(179deg) saturate(.6) brightness(.87); }
.leaflet-container .leaflet-control-attribution { background: #1b1e20; color: #f2f2ed; font-size: 10px; white-space: normal; text-align: right; }
.leaflet-control-attribution a { color: #b9e3ff; }
.pin { background: transparent; border: 0; }
.pin > span {
  display: grid; place-items: center; width: 33px; height: 33px; color: #151717;
  border-radius: 50% 50% 50% 8px; border: 2px solid #fff; background: var(--gold);
  transform: rotate(-45deg); box-shadow: 0 4px 13px #000b;
}
.pin > span svg { transform: rotate(45deg); width: 18px; height: 18px; }
.pin.target-pin > span { background: var(--blue); }
.leaflet-tooltip.pin-label { background: #1c1f21; color: #fff; border-color: #565b5f; border-radius: 8px; padding: 4px 8px; }
.sheet {
  min-width: 0; overflow-y: auto; border: 1px solid #303437;
  background: var(--surface); border-radius: 24px; padding: 20px;
}
.sheet-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; }
.sheet-heading p { margin-top: 3px; overflow-wrap: anywhere; }
h1 { font-size: 26px; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { font-size: 20px; }
.round-icon { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.round-icon.gold { background: #3b3320; color: var(--gold); }
.round-icon.blue { background: #253641; color: var(--blue); }
.primary, .secondary {
  min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  border: 0; border-radius: 100px; padding: 9px 16px; font-weight: 720;
}
.primary { background: var(--action); color: var(--action-ink); }
.primary:hover { background: #c0daff; }
.primary.recording { background: #ff9e94; }
.secondary { background: #2f3a40; color: #c6eaff; }
.wide { width: 100%; }
.project-switch {
  display: flex; align-items: center; text-align: left; gap: 12px; margin: 0 0 12px;
  padding: 9px 13px; min-height: 66px; border: 0; border-radius: 22px; background: var(--card);
}
.project-switch:hover { background: #333337; }
.project-switch > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.project-switch small { color: var(--muted); font-size: 12px; }
.project-switch strong { font-size: 16px; overflow-wrap: anywhere; }
.project-switch > span:last-child { color: var(--muted); }
.project-switch .round-icon { width: 40px; height: 40px; }
.project-content { display: grid; gap: 10px; }
.project-content .fields { margin: 0; }
.project-section-title { margin: 7px 3px 0; color: var(--muted); font-size: 14px; }
.project-content .row { min-height: 55px; }
.project-content .row[aria-current] { background: #29384d; }
.project-content .row strong { font-size: 16px; }
.project-content .helper { margin: 1px 0; }
.search {
  display: flex; gap: 9px; align-items: center; background: #141617; color: var(--muted);
  border: 1px solid #34383b; border-radius: 100px; margin: 14px 0; padding: 0 13px;
}
.search svg { width: 18px; height: 18px; }
.search input { width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; color: inherit; }
.list { display: grid; gap: 8px; margin-top: 12px; }
.row {
  display: flex; text-align: left; align-items: center; gap: 10px; width: 100%;
  border: 1px solid #373b3e; border-radius: 17px; padding: 10px; background: var(--card);
  min-width: 0; overflow-wrap: anywhere;
}
.row .round-icon { width: 38px; height: 38px; }
.row .round-icon svg { width: 19px; height: 19px; }
.row .row-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.row strong { font-size: 14px; }
.row .arrow { color: var(--muted); }
.row .arrow svg { width: 17px; height: 17px; }
.row small { font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.meta { border-radius: 14px; background: #25282a; padding: 10px 12px; line-height: 1.55; }
.outing-meta { border-radius: 19px; background: var(--card); padding: 0 13px; }
.meta-line { display: flex; align-items: center; gap: 10px; min-height: 53px; padding: 8px 0; }
.meta-line + .meta-line { border-top: 1px solid var(--border); }
.meta-line > span { color: var(--blue); }
.meta-line > div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.meta-line small, .track-metric small { color: var(--muted); font-size: 12px; }
.meta-line strong { font-size: 13px; font-weight: 650; }
.track-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.track-metric { display: grid; gap: 5px; align-content: start; padding: 10px 8px; border-radius: 16px; background: var(--card); }
.track-metric > span { justify-content: flex-start; color: var(--blue); }
.track-metric svg { width: 17px; height: 17px; }
.track-metric strong { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.place-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0; }
.place-tabs button {
  display: grid; justify-items: center; gap: 5px; min-height: 62px;
  background: #26292c; border: 1px solid var(--border); border-radius: 17px; padding: 8px 4px; font-size: 13px;
}
.place-tabs button[aria-pressed="true"] { background: #3b3320; border-color: #816929; color: var(--gold); }
.helper, .empty { line-height: 1.5; margin: 10px 0; color: var(--muted); font-size: 13px; }
.track-status, .form-message { color: var(--gold); font-size: 14px; margin: 12px 0; line-height: 1.45; }
dialog { border: 1px solid var(--border); color: inherit; background: #202325; }
dialog::backdrop { background: #0009; }
.drawer {
  inset: 0 auto 0 0; margin: 0; width: min(354px, 89vw); height: 100dvh; max-height: none;
  padding: max(18px, env(safe-area-inset-top)) 17px max(22px, env(safe-area-inset-bottom));
  border-radius: 0 28px 28px 0; background: #1c1e22; border: 0;
  box-shadow: 18px 0 56px #0006;
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .19s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }
.drawer-head, .modal-head { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.drawer-head button, .modal-head button { margin-left: auto; }
.drawer-head { align-items: flex-start; min-height: min(17dvh, 132px); padding: 4px 3px 0 8px; }
.drawer-head p { color: var(--muted); font-size: 14px; margin: 5px 0; }
.drawer-head h2 { font-size: 37px; letter-spacing: -.055em; line-height: 1.1; }
.drawer nav { display: grid; gap: 9px; }
.menu-label { padding-left: 10px; color: var(--muted); font-size: 13px; font-weight: 650; }
.menu-label:not(:first-child) { margin-top: 12px; }
.menu-group { border-radius: 22px; overflow: hidden; background: var(--card); }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; border: 0; background: transparent; padding: 7px 12px; text-align: left; font-size: 16px; font-weight: 600; }
.menu-row + .menu-row { border-top: 1px solid #373a3e; }
.menu-row .round-icon { width: 36px; height: 36px; }
.menu-row .round-icon svg { width: 19px; height: 19px; }
.menu-arrow { margin-left: auto; color: var(--muted); }
.menu-arrow svg { width: 16px; height: 16px; }
.menu-row[aria-current="page"] { background: #29384d; color: #c2d9ff; }
.drawer-foot { margin-top: auto; padding: 20px 8px 0; color: var(--muted); font-size: 13px; }
.modal { width: min(470px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 18px; border-radius: 24px; }
.fields, #info-body { display: grid; gap: 12px; margin-bottom: 12px; }
.fields label { display: grid; gap: 6px; font-size: 14px; }
.fields input:not([type=checkbox]), .fields textarea {
  width: 100%; min-height: 46px; border: 1px solid #555a5d;
  border-radius: 12px; background: #151719; padding: 10px; color: inherit; font-size: 16px;
}
.fields textarea { resize: vertical; }
.fields .check { grid-template-columns: auto 1fr; align-items: start; color: var(--muted); }
.toast { position: fixed; z-index: 600; bottom: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); border: 1px solid var(--border); border-radius: 14px; background: #282c2e; padding: 12px 18px; box-shadow: 0 5px 25px #0008; }
.target-photo { display: block; max-width: 100%; max-height: 270px; border-radius: 12px; object-fit: contain; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-grid div { display: grid; gap: 5px; padding: 10px; background: var(--card); border-radius: 13px; }
.stat-grid strong { color: var(--gold); font-size: 22px; }
.stat-grid span { font-size: 12px; color: var(--muted); }
@media (max-width: 790px) {
  :root { --bar: 64px; }
  .app-bar { position: sticky; top: 0; z-index: 800; background: #151618; }
  .app-bar { gap: 8px; }
  .app-name strong { font-size: 18px; }
  .menu-toggle { width: 46px; height: 46px; }
  .local-tag { font-size: 11px; padding: 6px 8px; }
  body:has(#place-view:not([hidden])) .local-tag { display: none; }
  .workspace { display: block; height: auto; padding: 0; }
  .map-frame { height: clamp(270px, 43dvh, 540px); border-radius: 0; border: 0; }
  .sheet { border-radius: 24px 24px 0 0; padding: 17px 14px max(24px, env(safe-area-inset-bottom)); border-bottom: 0; overflow: visible; }
  .sheet-heading { margin-bottom: 12px; }
  h1 { font-size: 22px; }
  .map-top { top: 10px; left: 10px; }
  .map-tools { right: 10px; }
  .map-legend { left: 10px; }
  .map-message { top: 68px; left: 10px; }
  .modal { margin: auto auto 0; border-radius: 24px 24px 0 0; width: 100%; max-width: 100%; }
}
@media (max-height: 730px) {
  .drawer-head { min-height: 66px; margin-bottom: 12px; }
  .drawer-foot { padding-top: 13px; }
}