/* Frosty Coatings territory map v2.
   Phone first: every rep does this on an iPhone. Desktop is the wide variant
   at the bottom, not the other way round.
   Brand comes from Frosty's own funnels: blue #188bf6 on white, Montserrat
   headlines, Lato body, the yeti logo. */

:root {
  --blue: #188bf6; --blue-deep: #1069c9; --blue-tint: #eaf4fe; --blue-line: rgba(24,139,246,0.34);
  --red: #d92d20; --red-tint: #fef3f2;
  /* Red as TEXT needs to be darker than red as a background. The brand red
     measures 4.83 on white, which passes, but 4.44 on its own hover tint, which
     does not, so Remove all my zips and Sign out failed the moment a mouse
     touched them. --red stays exactly as it was wherever it is a ground
     carrying white; this is only for red ink on a light surface. */
  --red-ink: #b42318;
  --amber: #b54708; --amber-bg: #fff6e6;
  --ink: #101828; --ink-2: #344054; --mute: #667085; --dim: #98a2b3; --line: #e4e7ec;
  --bg: #ffffff; --bg-soft: #f6f9fc; --ok: #12b76a;
  --head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 116px; --top-h: 56px; --stack-h: 38px;
  --shadow: 0 10px 30px rgba(16,24,40,0.14), 0 1px 3px rgba(16,24,40,0.08);
  --shadow-up: 0 -10px 34px rgba(16,24,40,0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-soft); color: var(--ink); font-family: var(--body); font-size: 15px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow: hidden; overscroll-behavior: none;
}
h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
input, select { font: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- shell */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#map {
  position: absolute; inset: 0; background: #dfe8f1; z-index: 1;
  /* Leaflet's panes are z-index 400 and its controls 1000. Isolating the map
     keeps those inside it, so our chrome sits above with plain values. */
  isolation: isolate;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* In a painting mode the browser must not claim a one finger drag as a scroll.
   The id beats Leaflet's own .leaflet-touch-zoom { touch-action: pan-x pan-y }. */
#map.mode-add, #map.mode-remove { touch-action: none; }
#map.mode-add .leaflet-interactive, #map.mode-remove .leaflet-interactive { cursor: crosshair; }
#map.space-pan { cursor: grab !important; }
.leaflet-container { font-family: var(--body); }
.leaflet-container:focus { outline: none; }
.leaflet-control-attribution { font-size: 10px; max-width: 68vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaflet-control-attribution, .leaflet-control-attribution a { color: #344054; }
.leaflet-control-attribution a { text-decoration: underline; }
.leaflet-bottom { bottom: var(--dock-h); }

/* ------------------------------------------------------------- top card */
.top {
  position: absolute; top: calc(var(--safe-t) + 8px); left: 10px; right: 10px; z-index: 20;
  display: flex; align-items: center; gap: 8px;
}
.top-in {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.96); backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px;
}
.logo-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; padding: 0; flex: none; cursor: pointer; display: grid; place-items: center; }
.logo-btn:hover { background: var(--blue-tint); }
.logo-btn img { width: 36px; height: auto; display: block; }
.search-btn {
  flex: 1; min-width: 0; height: 44px; border: 0; background: var(--bg-soft); border-radius: 10px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; color: var(--mute);
  font-size: 14.5px; text-align: left;
}
.search-btn:hover { background: var(--blue-tint); color: var(--blue-deep); }
.search-btn svg { width: 17px; height: 17px; flex: none; }
.search-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; flex: none; cursor: pointer;
  font-family: var(--head); font-weight: 800; font-size: 14px; color: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(16,24,40,0.2); padding: 0;
}

/* ---------------------------------------------------------- saved chip */
.topstack {
  position: absolute; top: calc(var(--safe-t) + 8px + var(--top-h) + 8px); left: 10px; right: 10px; z-index: 24;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none;
}
.chip-row { display: flex; align-items: flex-start; gap: 8px; }
.chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px;
  border-radius: 999px; background: rgba(255,255,255,0.96); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); box-shadow: 0 1px 4px rgba(16,24,40,0.1); border: 0; cursor: default;
  font-family: var(--body);
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.chip.saved::before { background: var(--ok); }
.chip.saving::before { background: var(--blue); animation: pulse 1s infinite; }
.chip.offline::before { background: var(--amber); }
.chip.error, .chip.offline, .chip.auth { min-height: 44px; padding: 0 14px; }
.chip.error { color: var(--red-ink); cursor: pointer; }
.chip.error::before { background: var(--red); }
.chip.auth { color: var(--red-ink); cursor: pointer; }
.chip.auth::before { background: var(--red); }
@keyframes pulse { 50% { opacity: 0.25; } }
.coach {
  pointer-events: none; margin-left: auto; max-width: 62%; background: rgba(16,24,40,0.86); color: #fff;
  border-radius: 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.35; box-shadow: var(--shadow);
}
.coach b { font-family: var(--head); }
.nudge {
  pointer-events: auto; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--blue-line); border-radius: 999px; padding: 5px 6px 5px 12px;
  font-size: 12.5px; box-shadow: var(--shadow); color: var(--ink-2);
}
.nudge button { border: 0; background: var(--blue-deep); color: #fff; border-radius: 999px; padding: 5px 11px; font-family: var(--head); font-weight: 700; font-size: 12px; cursor: pointer; }

/* ----------------------------------------------------------------- dock */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 8px 10px calc(10px + var(--safe-b));
  background: linear-gradient(to top, rgba(255,255,255,0.98) 62%, rgba(255,255,255,0));
}
.dock-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.count {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow); font-family: var(--head); font-weight: 700;
  font-size: 14px; cursor: pointer; min-width: 0;
}
.count i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.count span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count.bump { animation: bump 160ms ease-out; }
@keyframes bump { 40% { transform: scale(1.06); } }
.dock-row .spacer { flex: 1; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: #fff; box-shadow: var(--shadow);
  cursor: pointer; display: grid; place-items: center; color: var(--ink-2); flex: none;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:disabled { opacity: 0.4; }
.icon-btn.wide { width: auto; padding: 0 14px; gap: 8px; display: inline-flex; align-items: center; font-family: var(--head); font-weight: 700; font-size: 13.5px; }
.modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #fff; border-radius: 16px;
  padding: 4px; box-shadow: var(--shadow);
}
.mode {
  height: 56px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--head); font-weight: 700; font-size: 12.5px;
}
.mode svg { width: 21px; height: 21px; }
.mode[aria-checked="true"] { color: #fff; }
.mode[data-mode="look"][aria-checked="true"] { background: var(--ink); }
.mode[data-mode="add"][aria-checked="true"] { background: var(--blue-deep); }
.mode[data-mode="remove"][aria-checked="true"] { background: var(--red); }

/* An admin editing somebody else's area must never lose sight of that. It has
   its own element, so no other render can wipe it (an earlier version lived in
   the card slot and switching mode cleared it), and it sits in the top stack,
   so it cannot land on the chip or the toast. */
.focus-banner {
  background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); font-size: 13px;
  pointer-events: auto;
}
.focus-banner .dot { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.focus-banner b { font-family: var(--head); display: block; }
.focus-banner small { opacity: 0.8; }
.focus-banner .grow { flex: 1; min-width: 0; }
.focus-banner button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: #fff; color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 13px; cursor: pointer; flex: none; }


/* ---------------------------------------------------------------- cards */
/* Bounded, so a tall card scrolls inside itself instead of growing up past
   the top chrome. In landscape there is very little room and it used to run
   clean off the top of the screen. */
.card-slot {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--dock-h) + 8px); z-index: 22;
  /* Exact, not a guess: the space left between the bottom of the top stack
     and the top of the dock. All three heights are measured in JS, so a tall
     card scrolls instead of climbing into the chrome. */
  max-height: calc(100% - var(--safe-t) - var(--top-h) - var(--stack-h) - var(--dock-h) - 32px);
  display: flex; flex-direction: column; overflow: hidden;
}
.card-slot > .card { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 14px;
  border: 1px solid var(--line); contain: layout paint;
}
.card h3 { font-size: 17px; }
.card .sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
.card .row { display: flex; align-items: center; gap: 8px; }
.card .close { margin-left: auto; width: 32px; height: 32px; border: 0; background: var(--bg-soft); border-radius: 9px; cursor: pointer; color: var(--mute); font-size: 17px; line-height: 1; flex: none; }
.card .close:hover { background: var(--line); color: var(--ink); }
.card .actions { display: flex; gap: 8px; margin-top: 12px; }
.card .actions .btn { flex: 1; }
.zipbig { font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.covers { list-style: none; margin: 10px 0 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.covers li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.covers .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.covers .who { flex: 1; min-width: 0; }
.covers .who b { font-family: var(--head); font-size: 14.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.covers .who small { color: var(--mute); font-size: 12px; }
.covers .you { background: var(--blue-tint); color: var(--blue-deep); font-family: var(--head); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; margin-left: 6px; }
.covers .call { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--blue-line); background: #fff; color: var(--blue-deep); display: grid; place-items: center; flex: none; text-decoration: none; }
.covers .call svg { width: 18px; height: 18px; }
.nobody { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 13px; line-height: 1.4; }

/* --------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  /* Every stop is at least 4.7:1 against white. The brand blue #188bf6 is
     only 3.46:1, so a white label on it fails AA at button text sizes; these
     are the same hue, darkened. */
  background: linear-gradient(135deg, #0b4f96, var(--blue-deep) 55%, #1673d1); color: #fff; border: 0;
  border-radius: 12px; cursor: pointer; font-family: var(--head); font-weight: 700; font-size: 15px;
  padding: 11px 18px; box-shadow: 0 6px 16px rgba(24,139,246,0.28); text-decoration: none;
  transition: transform 120ms, filter 120ms;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn.ghost { background: #fff; color: var(--blue-deep); border: 1.5px solid var(--blue-line); box-shadow: none; }
.btn.ghost:hover { background: var(--blue-tint); }
.btn.danger { background: #fff; color: var(--red-ink); border: 1.5px solid rgba(217,45,32,0.35); box-shadow: none; }
.btn.danger:hover { background: var(--red-tint); }
.btn.solid-danger { background: var(--red); color: #fff; box-shadow: none; }
.btn.big { min-height: 56px; font-size: 16.5px; width: 100%; }
.btn.small { min-height: 38px; padding: 8px 12px; font-size: 13.5px; box-shadow: none; }

/* --------------------------------------------------------------- sheets */
.scrim { position: fixed; inset: 0; background: rgba(16,24,40,0.42); backdrop-filter: blur(3px); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: #fff;
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow-up); max-height: 88vh;
  display: flex; flex-direction: column; contain: layout paint;
  padding-bottom: var(--safe-b);
}
.sheet.top { top: 0; bottom: auto; border-radius: 0 0 20px 20px; box-shadow: var(--shadow); max-height: 100%; padding-top: var(--safe-t); padding-bottom: 0; }
.sheet-grab { padding: 9px 0 3px; flex: none; }
.sheet-grab i { display: block; width: 42px; height: 5px; border-radius: 999px; background: #cfd5df; margin: 0 auto; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; flex: none; }
.sheet-head h3 { font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
.sheet-body > * + * { margin-top: 12px; }
.rowline { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.rowline:first-child { border-top: 0; }
.rowline .dot { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.rowline .grow { flex: 1; min-width: 0; }
.rowline b { font-family: var(--head); font-size: 14.5px; }
.rowline small { color: var(--mute); font-size: 12.5px; display: block; }
.stat { font-family: var(--head); font-weight: 800; font-size: 15px; }
.muted { color: var(--mute); font-size: 13px; line-height: 1.45; }
.switch { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.switch .grow { flex: 1; }
.switch input { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background 140ms; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,0.3); transition: transform 140ms; }
.switch input:checked { background: var(--blue); }
.switch input:checked::after { transform: translateX(20px); }

/* --------------------------------------------------------------- fields */
.field { display: block; }
.field + .field { margin-top: 10px; }
.lab { display: block; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.in {
  width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 13px;
  background: #fff; outline: none; transition: border-color 120ms;
  font-size: 16px;   /* under 16px iOS zooms the page on focus */
}
.in:focus { border-color: var(--blue); }
.in.bad { border-color: var(--red); background: var(--red-tint); }
.err { color: var(--red); font-size: 13px; margin-top: 6px; }
.pw { position: relative; display: block; }
.pw .in { padding-right: 72px; }
.pw-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--blue-tint); color: var(--blue-deep); font-family: var(--head); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }

/* ---------------------------------------------------------------- gate */
.gate { position: fixed; inset: 0; z-index: 60; background: var(--bg-soft); overflow-y: auto; display: flex; }
.gate-in { margin: auto; width: 100%; max-width: 440px; padding: calc(var(--safe-t) + 20px) 18px calc(var(--safe-b) + 24px); }
.gate-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gate-logo img { height: 44px; }
.gate h1 { font-size: 22px; }
.gate .lead { color: var(--mute); font-size: 14.5px; line-height: 1.5; margin: 6px 0 18px; }
.gate form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.gate .btn { margin-top: 16px; }
.ask { background: var(--amber-bg); border: 1px solid rgba(181,71,8,0.28); border-radius: 12px; padding: 12px; margin-top: 12px; }
.ask p { font-size: 13.5px; line-height: 1.45; color: var(--amber); }
.ask .actions { display: flex; gap: 8px; margin-top: 10px; }
.ask .actions .btn { flex: 1; }

/* ---------------------------------------------------------------- toast */
.toast {
  align-self: center; max-width: 100%; pointer-events: auto;
  background: var(--ink); color: #fff; border-radius: 11px; padding: 10px 15px; font-size: 13.5px;
  box-shadow: var(--shadow); text-align: center; line-height: 1.4;
}
.toast.bad { background: var(--red); }
.toast.good { background: #05603a; }

/* ------------------------------------------------------------ map bits */
.ztip { background: var(--ink); color: #fff; border: 0; border-radius: 9px; padding: 7px 10px; font-size: 12.5px; box-shadow: var(--shadow); }
.ztip::before { border-top-color: var(--ink); }
.ztip b { font-family: var(--head); }
.ztip .tg { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #d0d5dd; }
.ztip .tg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend {
  position: absolute; left: 10px; bottom: calc(var(--dock-h) + 8px); z-index: 18;
  background: rgba(255,255,255,0.95); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px;
  font-size: 12.5px; box-shadow: var(--shadow); max-width: 190px;
}
.legend .lrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend .shared { background: repeating-linear-gradient(135deg, #188bf6 0 3px, #12b76a 3px 6px); }
.legend .none { background: #c7d0dc; border: 1px solid #9aa6b8; }

/* --------------------------------------------------------- search sheet */
.search-in { padding: 0 16px 10px; flex: none; }
.result { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.result .kind { font-family: var(--head); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); width: 46px; flex: none; }
.result .grow { flex: 1; min-width: 0; }
.result b { font-family: var(--head); font-size: 14.5px; }
.result small { display: block; color: var(--mute); font-size: 12.5px; }
.result .btn { flex: none; }

/* ------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  :root { --dock-h: 0px; }
  #app { flex-direction: row; }
  /* The phone chrome is a separate set of elements from the side panel's. At
     desktop width it must be GONE, not merely restyled: left in the flow it
     sat over the map and swallowed every click on a zip. */
  #top-m, #dock-m { display: none; }
  .panel {
    width: 380px; flex: none; background: #fff; border-right: 1px solid var(--line); z-index: 30;
    display: flex; flex-direction: column; min-height: 0; position: relative;
  }
  #map { left: 380px; }
  .top { position: static; padding: 14px 16px 10px; }
  .top-in { box-shadow: none; border: 0; padding: 0; background: transparent; backdrop-filter: none; }
  .topstack { position: static; padding: 0 16px 10px; pointer-events: auto; }
  .toast { align-self: stretch; }
  .coach, .nudge { margin-left: 0; max-width: none; }
  .dock { position: static; padding: 0 16px 14px; background: none; }
  .modes { box-shadow: none; border: 1px solid var(--line); }
  .mode { height: 62px; }
  .panel-scroll { flex: 1; overflow-y: auto; padding: 0 16px 20px; min-height: 0; }
  .panel-scroll > * + * { margin-top: 12px; }
  .card-slot { position: absolute; left: auto; right: 16px; bottom: 16px; width: 340px; }
  .legend { left: auto; right: 16px; top: 16px; bottom: auto; }
  .sheet { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: 18px; max-height: 82vh; }
  .sheet.top { top: 24px; bottom: auto; border-radius: 18px; }
  .scrim { background: rgba(16,24,40,0.3); }

  /* 16px, not 15. This block starts at 900px, and an iPad in landscape is
     above that and still iOS, so 15px is exactly where Safari zooms the page
     on focus. The rule that prevents it has to hold at every width, not only
     on a phone. */
  .in { font-size: 16px; min-height: 44px; }
  .leaflet-bottom { bottom: 0; }
  .kbd-hints { color: var(--mute); font-size: 12.5px; line-height: 1.6; }
  .kbd-hints kbd { font-family: var(--head); font-weight: 700; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 11px; }
}
@media (max-width: 899px) {
  .panel, .panel-scroll, .kbd-hints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}