/* ==========================================================================
   Valtrack — "Trail Dusk" theme
   Red → black fades, italic condensed display type, dark sheets over a
   normal (or dark) OpenStreetMap. Phone first.
   ========================================================================== */

:root{
  --red:#d1170f;
  --red-bright:#ff3b30;
  --red-soft:#ff6b61;
  --red-deep:#8c0a0a;
  --ink:#140c0e;          /* sheets, bars */
  --ink-2:#1d1416;
  --ink-3:#0e0809;        /* bottom bar */
  --line:rgba(255,255,255,.10);
  --fill:rgba(255,255,255,.06);
  --text:#f4f4f5;
  --muted:#a1a1aa;
  --ok:#4ade80;
  --font-display:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-h:calc(60px + env(safe-area-inset-bottom));
  --top-h:calc(54px + env(safe-area-inset-top));
  --ev-top:calc(92px + env(safe-area-inset-top));
}

html, body{ height:100%; margin:0; padding:0; }
body{ background:var(--ink); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow:hidden; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* ---------- Map ---------- */
#map{ position:fixed; inset:0; z-index:0; background:#ddd; }
.vt-dark-map #map{ background:#1b1b1b; }
.leaflet-top{ top:var(--top-h); }
.leaflet-bottom{ bottom:var(--nav-h); }
.leaflet-bar{ border:none !important; box-shadow:0 4px 14px rgba(0,0,0,.35) !important; }
.leaflet-bar a{ background:var(--ink) !important; color:#fff !important; border-bottom-color:var(--line) !important; width:36px !important; height:36px !important; line-height:36px !important; }
.leaflet-bar a:hover{ background:var(--ink-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--ink); color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.leaflet-popup-content-wrapper{ border-radius:14px; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--muted); }
.leaflet-popup-content{ font-family:var(--font-body); font-size:13px; line-height:1.45; }
.leaflet-control-attribution{ font-size:10px; }

/* Live tracker markers: coloured dot + name label */
.vt-live-icon{ background:none; border:none; }
.vt-live-dot{ width:14px; height:14px; border-radius:50%; background:var(--c); border:3px solid #fff;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), 0 2px 6px rgba(0,0,0,.4); }
.vt-live-dot.stale{ filter:grayscale(1); opacity:.6; }
.vt-live-label{ position:absolute; left:22px; top:-3px; white-space:nowrap; font-family:var(--font-display); font-weight:700;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(20,12,14,.85);
  padding:2px 8px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.3); }

/* ---------- Header over the map (red → transparent fade) ---------- */
.vt-top, .ev-header{
  position:fixed; left:0; right:0; top:0; z-index:1000; pointer-events:none;
  padding:calc(8px + env(safe-area-inset-top)) 14px 26px;
  background:linear-gradient(180deg, var(--red) 0%, rgba(140,10,10,.86) 42%, rgba(20,12,14,0) 100%);
}
.vt-top > *, .ev-header > *{ pointer-events:auto; }
.vt-ridge{ position:absolute; left:0; right:0; bottom:8px; width:100%; height:26px; pointer-events:none !important; }
.vt-ridge path{ fill:rgba(0,0,0,.22); }
.vt-top-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vt-brand, .ev-home{ font-family:var(--font-display); font-style:italic; font-weight:800; color:#fff; text-decoration:none;
  letter-spacing:.03em; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.vt-brand{ font-size:28px; line-height:1; }
.vt-env-banner{ position:absolute; left:50%; top:calc(4px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:1; white-space:nowrap; background:#ffb300; color:#000; font-weight:700; font-size:11px;
  letter-spacing:.06em; padding:2px 8px; border-radius:4px; }

/* Chips: small text buttons on dark glass */
.vt-chip, .vt-account-btn{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:6px 11px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.vt-chip:hover, .vt-account-btn:hover{ background:rgba(0,0,0,.55); }
.vt-map-toggle{ position:fixed; right:10px; top:calc(var(--top-h) + 86px); z-index:900; width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.vt-map-toggle:hover{ background:var(--ink-2); }
/* Dark map: OpenStreetMap tiles inverted, roads and water stay readable */
.vt-dark-tiles{ filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }

/* ---------- Bottom menu ---------- */
.vt-bottom{ position:fixed; left:0; right:0; bottom:0; z-index:1100; background:var(--ink-3);
  border-top:1px solid var(--line); padding:0 0 env(safe-area-inset-bottom); height:var(--nav-h); box-sizing:border-box; }
/* all menu items in one row; swipe sideways for more (fade on the right hints there is more) */
.vt-bottom-scroll{ display:flex; height:57px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:0 8px;
  -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); }
.vt-bottom-scroll::-webkit-scrollbar{ display:none; }
.vt-bottom-scroll::after{ content:''; flex:0 0 40px; }
.vt-bottom button{ flex:0 0 auto; background:none; border:none; border-top:3px solid transparent; color:var(--muted); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.12em; padding:0 14px; height:57px; white-space:nowrap; }
.vt-bottom button.active{ color:#fff; border-top-color:var(--red); }
.vt-bottom button:hover{ color:#fff; }

/* ---------- "Live event" teaser ---------- */
.vt-teaser{ position:fixed; z-index:1050; left:12px; right:12px; bottom:calc(var(--nav-h) + 12px); display:flex; gap:10px; text-decoration:none; color:var(--text); }
.vt-teaser-text{ flex:1; min-width:0; display:flex; flex-direction:column; background:rgba(20,12,14,.9); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.vt-teaser-kicker{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--red-soft); }
.vt-teaser-kicker::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red-bright); margin-right:6px; vertical-align:1px; animation:vt-pulse 1.6s infinite; }
.vt-teaser-name{ font-family:var(--font-display); font-style:italic; font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-teaser-sub{ font-size:12px; color:#d4d4d8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-teaser-go{ flex:none; display:flex; align-items:center; padding:0 18px; border-radius:14px; background:var(--red);
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.12em; color:#fff; }
body.vt-sheet-open .vt-teaser, body:has(#chart-container[style*="flex"]) .vt-teaser{ display:none; }
@keyframes vt-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ---------- Sliding sheet (all panels open in here) ---------- */
.vt-sheet{ position:fixed; z-index:1080; left:0; right:0; bottom:var(--nav-h); display:flex; flex-direction:column;
  max-height:calc(100dvh - var(--nav-h) - 70px); background:var(--ink); border-radius:22px 22px 0 0;
  box-shadow:0 -14px 40px rgba(0,0,0,.5); animation:vt-up .18s ease-out; }
@keyframes vt-up{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.vt-sheet-handle, .ev-handle{ align-self:stretch; height:22px; flex:0 0 auto; cursor:grab; position:relative; }
.vt-sheet-handle::after, .ev-handle::after{ content:''; position:absolute; left:50%; top:9px; width:44px; height:5px; margin-left:-22px;
  border-radius:3px; background:rgba(255,255,255,.25); }
.vt-sheet-handle:active, .ev-handle:active{ cursor:grabbing; }
#vt-sheet-title{ cursor:grab; }
.vt-sheet-head{ display:flex; align-items:center; gap:10px; padding:0 16px 10px; }
.vt-sheet-head h2{ flex:1; margin:0; font-family:var(--font-display); font-style:italic; font-weight:800; font-size:28px;
  letter-spacing:.03em; text-transform:uppercase; }
.vt-sheet-head .vt-chip{ background:var(--fill); border-color:var(--line); }
#vt-sheet-body{ overflow-y:auto; padding:0 16px calc(20px); -webkit-overflow-scrolling:touch; }

/* ---------- Content inside sheets ---------- */
#vt-sheet-body h4{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 8px; }
#vt-sheet-body h4:first-child{ margin-top:4px; }
#vt-sheet-body label{ color:#d4d4d8; font-size:14px; }
#vt-sheet-body input[type="text"], #vt-sheet-body input[type="password"], #vt-sheet-body input[type="number"],
#vt-sheet-body input[type="datetime-local"], #vt-sheet-body select, #vt-sheet-body textarea{
  display:block; width:100%; box-sizing:border-box; margin:4px 0 10px; padding:11px 12px; font:inherit; font-size:16px;
  color:var(--text); background:var(--fill); border:1px solid var(--line); border-radius:10px; color-scheme:dark; }
#vt-sheet-body input:focus, #vt-sheet-body select:focus, #vt-sheet-body textarea:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:transparent; }
#vt-sheet-body input[type="checkbox"], #vt-sheet-body input[type="radio"]{ accent-color:var(--red); width:18px; height:18px; vertical-align:-3px; margin-right:6px; }
#vt-sheet-body .checkbox label, #valmap-controls label{ display:inline-flex; align-items:center; padding:8px 0; font-size:16px; }
#vt-sheet-body button{ min-height:42px; padding:9px 16px; border-radius:10px; cursor:pointer; background:var(--fill); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
#vt-sheet-body button:hover:not(:disabled){ background:rgba(255,255,255,.12); }
#vt-sheet-body button:disabled{ opacity:.4; cursor:default; }
#vt-sheet-body button.vt-small{ min-height:34px; padding:5px 12px; font-size:13px; }
#vt-sheet-body button.vt-danger{ color:var(--red-soft); border-color:rgba(255,107,97,.35); }
/* primary actions */
#login-btn, #add-tracker-btn, #start-session-btn, #new-event-btn, #event-form button[type="submit"], #create-share-link, #start-listener-btn{
  background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
#vt-sheet-body .vt-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#vt-sheet-body .vt-row > input[type="text"], #vt-sheet-body .vt-row > select{ flex:1 1 150px; width:auto; margin:0; }
.vt-stack > * + *{ margin-top:8px; }
.vt-divider{ border:none; border-top:1px solid var(--line); margin:16px 0; }
.vt-item{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:12px; margin:8px 0; }
.vt-item small{ color:var(--muted); }
.vt-grow{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.vt-dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.vt-item input[type="color"]{ width:36px; height:36px; padding:0; border:none; background:none; }
.vt-switch{ white-space:nowrap; }
.vt-hint{ font-size:13px; color:var(--muted); min-height:1em; margin:-4px 0 8px; }
.vt-ok{ color:var(--ok); }
.vt-warn{ color:var(--red-soft); }
.vt-status{ font-weight:600; }
#current-user{ font-weight:700; }
#user-info{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Events list */
.vt-event-link{ display:block; text-decoration:none; color:var(--text); }
.vt-event-link b{ font-family:var(--font-display); font-style:italic; font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; }
.vt-badge{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-radius:6px; padding:1px 7px; background:rgba(255,255,255,.1); color:#d4d4d8; vertical-align:2px; }
.vt-badge.live{ background:rgba(209,23,15,.25); color:var(--red-soft); }
.vt-badge.finished{ background:rgba(74,222,128,.15); color:var(--ok); }
#event-form label{ display:block; margin-top:6px; }

/* GPX / session lists (checkbox rows) */
#gpx-list label, #session-list label{ display:block; padding:6px 0; }
.vt-upload-btn{ display:inline-flex; align-items:center; margin-top:12px; min-height:42px; padding:9px 18px; border-radius:10px; cursor:pointer;
  background:var(--red); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.08em; }
#gpx-list .vt-item{ margin:6px 0; }

/* ---------- Chart sheet (track / session / live) ---------- */
#chart-container{ display:none; position:fixed; z-index:1060; left:0; right:0; bottom:var(--nav-h); height:290px; max-height:45dvh;
  background:var(--ink); border-radius:20px 20px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.5); padding:0; }
#chart-panel{ display:flex; flex-direction:column; height:100%; width:100%; }
#chart-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
#chart-controls, #chart-info{ font-size:12px; color:#d4d4d8; }
#chart-controls select{ background:var(--fill); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:4px 6px; color-scheme:dark; }
#chart-info span{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.04em; }
#chart-close{ width:32px; height:32px; border-radius:50%; background:var(--fill); border:1px solid var(--line); color:#fff; cursor:pointer; font-size:18px; line-height:1; }
#chart-body{ position:relative; flex:1 1 auto; min-height:150px; }
#chart-body canvas, #chart-container canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }

/* Panels live hidden until opened in the sheet */
body > #login-panel, body > #events-panel, body > #gpx-panel, body > #session-panel, body > #trackers-panel,
body > #listener-controls, body > #controls, body > #valmap-controls, body > #privacy-panel{ display:none !important; }

/* ---------- Computer: sheet becomes a floating panel on the left ---------- */
@media (min-width: 900px){
  .vt-sheet{ left:16px; right:auto; width:430px; bottom:calc(var(--nav-h) + 16px); border-radius:20px; max-height:calc(100dvh - var(--nav-h) - 110px); }
  .vt-sheet-handle{ display:none; }
  .vt-teaser{ left:auto; right:16px; width:380px; }
  .vt-bottom-scroll{ justify-content:center; -webkit-mask-image:none; mask-image:none; }
  .vt-bottom-scroll::after{ display:none; }
  .vt-bottom button{ padding:0 20px; }
  #chart-container{ left:16px; right:16px; bottom:calc(var(--nav-h) + 16px); border-radius:20px; }
}

/* ==========================================================================
   Event page
   ========================================================================== */
.ev-page{ position:fixed; inset:0; }
#ev-map{ position:absolute; inset:0; z-index:0; }
.ev-header{ padding-bottom:28px; }
.ev-header .ev-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ev-home{ font-size:15px; opacity:.9; }
.ev-title h1{ margin:2px 0 0; font-family:var(--font-display); font-style:italic; font-weight:800; font-size:26px; line-height:1;
  letter-spacing:.02em; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.35); overflow-wrap:anywhere; }
.ev-sub{ margin-top:3px; font-size:12px; color:rgba(255,255,255,.88); }
.ev-badge{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  background:rgba(0,0,0,.4); color:#fff; border-radius:999px; padding:3px 10px; }
.ev-badge.live::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red-bright); margin-right:6px; vertical-align:1px; animation:vt-pulse 1.6s infinite; }
.ev-badge.finished{ color:var(--ok); }
.ev-page .vt-map-toggle{ top:calc(var(--ev-top) + 86px); }
.ev-page .leaflet-top{ top:var(--ev-top); }
.ev-page .leaflet-bottom{ bottom:var(--ev-sheet-h); }

.ev-page{ --ev-sheet-h:50dvh; }
.ev-side{ position:absolute; z-index:1050; left:0; right:0; bottom:0; height:var(--ev-sheet-h); display:flex; flex-direction:column;
  background:var(--ink); border-radius:22px 22px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.5); padding-bottom:env(safe-area-inset-bottom); }
.ev-tabs{ display:flex; gap:4px; margin:0 14px 2px; padding:4px; background:var(--fill); border-radius:12px; flex:0 0 auto; }
.ev-tabs button{ flex:1; padding:9px 4px; border:none; border-radius:9px; background:none; color:var(--muted); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.1em; text-transform:uppercase; }
.ev-tabs button.active{ background:var(--red); color:#fff; }
.ev-unread{ display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#fff; color:var(--red); font-size:11px; line-height:18px; letter-spacing:0; }
.ev-unread[hidden]{ display:none; }
.ev-tab{ display:none; flex:1 1 auto; min-height:0; overflow:auto; padding:12px 14px; }
.ev-tab.active{ display:flex; flex-direction:column; }
.ev-muted{ color:var(--muted); font-size:13px; }
.ev-h3{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }

.ev-card{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:10px; cursor:pointer; }
.ev-card-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ev-card-head b{ font-family:var(--font-display); font-style:italic; font-weight:800; font-size:22px; letter-spacing:.03em; text-transform:uppercase; }
.ev-card-head .ev-muted{ margin-left:auto; }
.ev-bar{ height:8px; background:rgba(255,255,255,.1); border-radius:4px; margin:12px 0 4px; overflow:hidden; }
.ev-bar > div{ height:100%; border-radius:4px; }
.ev-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 8px; margin:10px 0 0; }
.ev-stats > div{ min-width:0; }
.ev-stats dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.05; letter-spacing:.02em; }
.ev-stats dt{ order:2; margin-top:2px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ev-stats > div{ display:flex; flex-direction:column; }
.leaflet-popup-content .ev-stats{ grid-template-columns:1fr 1fr; }
.leaflet-popup-content .ev-stats dd{ font-size:18px; }
.ev-btn{ margin-top:10px; width:100%; padding:11px; border:none; border-radius:10px; background:var(--red); color:#fff; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; }
.ev-supporter-dot{ width:11px; height:11px; border-radius:3px; }
.ev-profile{ position:relative; height:200px; flex:0 0 auto; }

.ev-channels{ display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; flex:0 0 auto; }
.ev-channels button{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; color:#d4d4d8;
  background:var(--fill); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.ev-channels button.active{ background:var(--red); border-color:var(--red); color:#fff; }
.ev-chat{ flex:1 1 auto; overflow-y:auto; min-height:100px; padding:2px 0; }
.ev-msg{ background:var(--fill); border-radius:12px; padding:8px 11px; margin:6px 0; overflow-wrap:anywhere; font-size:15px; }
.ev-msg.owner{ background:rgba(209,23,15,.2); }
.ev-msg-head{ display:flex; gap:6px; align-items:baseline; font-size:13px; margin-bottom:2px; }
.ev-msg-head .ev-muted{ margin-left:auto; font-size:11px; }
.ev-org{ font-size:10px; font-weight:700; letter-spacing:.06em; background:var(--red); color:#fff; border-radius:4px; padding:0 5px; }
.ev-to{ color:var(--muted); font-size:12px; }
.ev-del{ border:none; background:none; color:var(--red-soft); font-size:18px; cursor:pointer; padding:0 2px; }
.ev-chat-form{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px solid var(--line); }
.ev-chat-form input{ font:inherit; font-size:16px; padding:10px 12px; color:var(--text); background:var(--fill); border:1px solid var(--line); border-radius:10px; min-width:0; }
.ev-chat-form input:focus{ outline:2px solid var(--red); border-color:transparent; }
.ev-chat-row{ display:flex; gap:6px; }
.ev-chat-row input{ flex:1 1 auto; }
.ev-chat-form button{ padding:10px 16px; border:none; border-radius:10px; background:var(--red); color:#fff; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.1em; text-transform:uppercase; }
.ev-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Computer: runners/chat sidebar on the left, map and header on the right */
@media (min-width: 900px){
  .ev-page{ --ev-side-w:400px; --ev-sheet-h:0px; }
  .ev-side{ top:0; right:auto; width:var(--ev-side-w); height:auto; border-radius:0; }
  .ev-handle{ display:none; }
  .ev-tabs{ margin-top:14px; }
  #ev-map{ left:var(--ev-side-w); }
  .ev-header{ left:var(--ev-side-w); }
}
#vt-sheet-body .vt-upload-btn{ color:#fff; font-size:15px; text-transform:uppercase; padding:9px 18px; }