*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:      #4285F4;
  --blue-l:    #74A7FF;
  --blue-glow: rgba(66,133,244,.35);
  --green:     #34A853;
  --red:       #EA4335;
  --yellow:    #FBBC04;
  --bg:        #0d0e1a;
  --s1:        rgba(15,17,30,0.95);
  --s2:        rgba(20,22,38,0.97);
  --s3:        rgba(28,30,50,0.99);
  --glass:     rgba(255,255,255,0.06);
  --border:    rgba(255,255,255,0.10);
  --text:      #FFFFFF;
  --t2:        rgba(255,255,255,0.70);
  --t3:        rgba(255,255,255,0.38);
  --font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:      'Roboto Mono', 'Courier New', monospace;
  --radius:    14px;
  --shadow:    0 4px 24px rgba(0,0,0,.55);
  --shadow-lg: 0 10px 48px rgba(0,0,0,.70);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hidden { display: none !important; }

/* scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at 50% 35%, #0e1428 0%, #060709 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s;
}
#splash.out { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px; text-align: center;
}

        /* radar */
.splash-radar {
  position: relative; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(66,133,244,.22);
}
.r1 { width: 100px; height: 100px; }
.r2 { width: 64px;  height: 64px;  }
.radar-sweep {
  position: absolute; width: 50px; height: 50px;
  border-radius: 50% 0 0 0;
  background: conic-gradient(from 0deg, transparent 0%, rgba(66,133,244,.5) 100%);
  transform-origin: bottom right;
  animation: sweep 2s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px 5px var(--blue-glow);
  z-index: 2;
  animation: dpulse 2s ease infinite;
}
@keyframes dpulse {
  0%,100% { box-shadow: 0 0 14px 5px var(--blue-glow); }
  50%      { box-shadow: 0 0 22px 9px var(--blue-glow); }
}

.splash-inner h1 {
  font-size: 32px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(120deg, #fff 30%, var(--blue-l) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.splash-inner h1 em {
  font-style: normal; -webkit-text-fill-color: var(--blue-l);
}
.splash-inner p { font-size: 13px; color: var(--t3); letter-spacing: .5px; }

.splash-bar-wrap {
  width: 160px; height: 2px;
  background: var(--glass); border-radius: 2px; overflow: hidden;
}
.splash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-l));
  animation: bfill 2.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes bfill { 0%{width:0} 60%{width:65%} 100%{width:100%} }


#app { position: fixed; inset: 0; }

#map {
  position: absolute; inset: 0; z-index: 0;
  background: #12131f;
}

    /* Leaflet overrides */
.leaflet-tile-pane { filter: brightness(.88) saturate(1.05); }
.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  background: var(--s1) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  width: 38px !important; height: 38px !important;
  line-height: 38px !important; font-size: 18px !important;
}
.leaflet-control-zoom a:hover { background: var(--s2) !important; }
.leaflet-control-attribution {
  background: var(--s1) !important; color: var(--t3) !important;
  font-size: 9px !important; padding: 2px 6px !important;
  border-radius: 6px 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--blue-l) !important; }

         /* Popup */
.leaflet-popup-content-wrapper {
  background: var(--s2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
.leaflet-popup-tip { background: var(--s2) !important; }
.leaflet-popup-content {
  margin: 12px 16px !important;
  font-family: var(--font) !important;
  font-size: 13px !important; color: var(--text) !important;
  line-height: 1.6 !important;
}
.leaflet-popup-close-button { color: var(--t3) !important; top: 6px !important; right: 8px !important; }
.pp-t { font-weight: 700; font-size: 14px; color: var(--blue-l); margin-bottom: 5px; }
.pp-r { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.pp-l { color: var(--t3); font-size: 11px; }
.pp-v { font-family: var(--mono); font-size: 11px; color: var(--t2); }

#top-hud {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 500;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
#top-hud > * { pointer-events: all; }

.hud-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--s1);
  border: 1px solid var(--border);
  color: var(--text); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .15s, transform .1s;
}
.hud-btn:active { transform: scale(.91); background: var(--s2); }

.hud-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  height: 44px; line-height: 44px;
  padding: 0 16px;
  background: var(--s1); border: 1px solid var(--border);
  border-radius: 22px;
  font-size: 14px; font-weight: 600;
  white-space: nowrap; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.hud-right { display: flex; gap: 6px; margin-left: auto; }

#live-strip {
  position: absolute;
  top: 66px; left: 12px; right: 12px;
  z-index: 500;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display: flex; align-items: center;
  padding: 9px 6px;
  animation: fadeDown .3s ease;
}
@keyframes fadeDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ls-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ls-val  { font-family: var(--mono); font-size: 18px; font-weight: 700; line-height: 1; }
.ls-unit { font-size: 9px; color: var(--t3); letter-spacing: .4px; }
.ls-sep  { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

#instruments {
  position: absolute;
  right: 12px;
  top: 120px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.instr-card {
  width: 84px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 6px 6px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  text-align: center;
}
#speedo { width: 100%; height: auto; display: block; }
.instr-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: var(--t3);
  margin-top: 2px;
}

            /* compass */
.compass {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--border);
  position: relative; margin: 0 auto 4px;
  background: radial-gradient(circle, rgba(66,133,244,.07), transparent 70%);
  transition: transform .3s ease;
}
.compass-n, .compass-s {
  position: absolute; left: 50%;
  width: 4px; border-radius: 3px;
}
.compass-n {
  height: 22px; top: 6px;
  background: linear-gradient(to bottom, var(--red), #c0392b);
  transform: translateX(-50%);
}
.compass-s {
  height: 18px; bottom: 6px;
  background: linear-gradient(to top, var(--t2), var(--t3));
  transform: translateX(-50%);
}
.compass-lbl {
  position: absolute; font-size: 8px; font-weight: 700;
  font-family: var(--mono); color: var(--t2);
}
.cn { top:  1px; left: 50%; transform: translateX(-50%); color: var(--red); }
.cs { bottom: 1px; left: 50%; transform: translateX(-50%); }
.ce { right: 2px; top: 50%; transform: translateY(-50%); }
.cw { left:  2px; top: 50%; transform: translateY(-50%); }
.compass-ctr {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--s2); border: 1.5px solid var(--border);
  z-index: 2;
}
#compass-deg { font-family: var(--mono); font-size: 10px; color: var(--blue-l); font-weight: 600; }


#speed-legend {
  position: absolute;
  left: 12px; bottom: 280px;
  z-index: 500;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 11px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.sl-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--t2);
}
.sl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.me-wrap { position: relative; width: 34px; height: 34px; }
.me-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  background: var(--blue-glow);
  animation: mering 2.2s ease-out infinite;
}
@keyframes mering {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2.3); opacity: 0; }
}
.me-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--blue-glow), 0 2px 10px rgba(0,0,0,.55);
  z-index: 2;
}
.me-arrow {
  position: absolute; top: 50%; left: 50%;
     /* triangle pointing up (north) */
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 13px solid rgba(255,255,255,.9);
  margin-top: -19px;
  margin-left: -5px;
  transform-origin: 5px 19px;
  z-index: 3;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
  transition: transform .4s ease;
}

#bottom-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: var(--s2);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 40px rgba(0,0,0,.65);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    /* no animation here — JS manages states */
  overflow: hidden;
  max-height: 85vh;
  overflow-y: auto;
}

.panel-drag-handle {
  width: 36px; height: 4px;
  background: var(--border); border-radius: 4px;
  margin: 12px auto 14px;
}

      /* ── IDLE STATE ── */
#state-idle { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.idle-hero { display: flex; align-items: center; gap: 12px; }
.idle-icon {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: rgba(66,133,244,.12);
  border: 1px solid rgba(66,133,244,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--blue);
}
.idle-text strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.idle-text span   { font-size: 12px; color: var(--t3); }

.idle-name-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); height: 46px; padding: 0 14px;
}
.idle-tag-icon { color: var(--t3); font-size: 14px; flex-shrink: 0; }
.idle-name-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font); font-size: 14px;
}
.idle-name-row input::placeholder { color: var(--t3); }

        /* BIG START BUTTON */
.btn-start {
  width: 100%; height: 56px; border-radius: var(--radius);
  background: linear-gradient(135deg, #2563eb, var(--blue), #5b9bf8);
  border: none; color: #fff;
  font-family: var(--font); font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  box-shadow: 0 5px 22px rgba(66,133,244,.5);
  transition: transform .1s, box-shadow .15s;
  letter-spacing: .2px;
}
.btn-start:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(66,133,244,.3); }
.btn-start i { font-size: 16px; }

     /* ── TRACKING STATE ── */
#state-tracking { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.tracking-header {
  display: flex; align-items: center; gap: 8px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  animation: liveblink 1s ease infinite;
}
@keyframes liveblink {
  0%,100% { opacity: 1; box-shadow: 0 0 0 3px rgba(234,67,53,.35); }
  50%      { opacity: .5; box-shadow: none; }
}
.live-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; color: var(--red);
}
.trip-name-badge {
  margin-left: auto; font-size: 12px; color: var(--t3);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.coord-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.cs-item {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cs-lbl { font-size: 9px; font-weight: 700; letter-spacing: .7px; color: var(--t3); text-transform: uppercase; }
.cs-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--blue-l); white-space: nowrap; }

.tracking-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.tracking-actions button:last-child { grid-column: 1 / -1; }

      /* ── SAVED STATE ── */
#state-saved { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.saved-header { display: flex; align-items: center; gap: 14px; }
.saved-check {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: rgba(52,168,83,.12); border: 1px solid rgba(52,168,83,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--green);
  animation: checkpop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes checkpop { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }
.saved-info strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.saved-info span   { font-size: 12px; color: var(--t3); }

.saved-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

         /* stats grid */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.sg-val  { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.sg-unit { font-size: 10px; color: var(--blue-l); font-weight: 600; margin-left: 2px; }
.sg-lbl  { font-size: 10px; color: var(--t3); margin-top: 3px; }

      /* ── EXPAND TOGGLE ── */
.expand-toggle {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px; cursor: pointer;
  font-size: 13px; color: var(--t2); font-weight: 500;
  border-top: 1px solid var(--border); margin: 0 -16px;
  transition: color .15s;
}
.expand-toggle:hover { color: var(--text); }
.expand-toggle i { font-size: 11px; transition: transform .25s; }
.expand-toggle.open i { transform: rotate(180deg); }

.extra-section { padding-bottom: 4px; }
.extra-note {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 13px; color: var(--t2); line-height: 1.55;
}
.extra-note i { color: var(--blue); margin-right: 4px; }
.extra-note b { color: var(--text); }

        /* chart blocks */
.chart-block { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.chart-title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--t2); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.chart-title i { font-size: 12px; }
.chart-wrap {
  height: 90px; background: var(--glass);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; position: relative;
}
.chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-stats { display: flex; gap: 8px; }
.cstat {
  flex: 1; background: var(--glass); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; color: var(--t2);
}
.cstat i { font-size: 10px; color: var(--t3); }

.btn-secondary {
  height: 46px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn-secondary:active { transform: scale(.97); background: var(--s3); }
.btn-secondary i { color: var(--blue-l); font-size: 14px; }

.btn-danger {
  height: 46px; border-radius: var(--radius);
  background: linear-gradient(135deg, #c0392b, var(--red));
  border: none; color: #fff; font-family: var(--font);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(234,67,53,.38);
  transition: transform .1s;
}
.btn-danger:active { transform: scale(.97); }

.btn-ghost {
  height: 46px; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--border);
  color: var(--t2); font-family: var(--font);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn-ghost:active { transform: scale(.97); background: var(--glass); }

#menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 800;
  display: none;
}
#menu-overlay.visible { display: block; animation: ovin .25s ease; }
@keyframes ovin { from{opacity:0} to{opacity:1} }

#side-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 288px;
  background: var(--s3); border-right: 1px solid var(--border);
  z-index: 900;
  display: flex; flex-direction: column;
  box-shadow: 12px 0 40px rgba(0,0,0,.55);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#side-menu.open { transform: translateX(0); }

.sm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.sm-brand { display: flex; align-items: center; gap: 12px; }
.sm-brand-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(66,133,244,.12); border: 1px solid rgba(66,133,244,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--blue); flex-shrink: 0;
}
.sm-brand-name { font-size: 15px; font-weight: 700; }
.sm-brand-sub  { font-size: 10px; color: var(--t3); margin-top: 1px; }

#btn-close-menu {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--t2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.sm-items { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--radius);
  background: transparent; border: none;
  color: var(--t2); font-family: var(--font);
  font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.sm-item i { width: 18px; text-align: center; color: var(--t3); font-size: 15px; }
.sm-item:hover { background: var(--glass); color: var(--text); }
.sm-item:hover i { color: var(--blue); }
.sm-danger { color: var(--red) !important; }
.sm-danger i { color: var(--red) !important; }
.sm-sep { height: 1px; background: var(--border); margin: 6px 4px; }

.sm-footer {
  padding: 14px 18px 20px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--t3); line-height: 1.5;
}

#history-panel {
  position: fixed; inset: 0;
  background: var(--s2); z-index: 700;
  display: flex; flex-direction: column;
  animation: slideup .35s cubic-bezier(.4,0,.2,1);
}
@keyframes slideup { from{transform:translateY(100%)} to{transform:none} }

.hist-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.hist-hdr h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.hist-hdr h2 i { color: var(--blue); }
#btn-close-hist {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--t2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

#hist-list {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
}

.hcard {
  background: var(--s3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  animation: cardin .3s ease;
}
@keyframes cardin { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.hcard-top { display: flex; flex-direction: column; gap: 2px; }
.hcard-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.hcard-name i { color: var(--blue); font-size: 13px; }
.hcard-date { font-size: 11px; color: var(--t3); }
.hcard-stats { display: flex; gap: 8px; }
.hcs { flex: 1; background: var(--glass); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; align-items: center; }
.hcs-v { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.hcs-l { font-size: 9px; color: var(--t3); margin-top: 2px; }
.hcard-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.hbtn {
  height: 36px; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--t2); font-family: var(--font);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; transition: background .15s;
}
.hbtn:active { background: var(--s2); }
.hbtn.dl  i { color: var(--blue); }
.hbtn.gpx i { color: var(--green); }
.hbtn.del i { color: var(--red); }

#hist-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; color: var(--t3);
}
#hist-empty i { font-size: 52px; opacity: .2; }
#hist-empty p { font-size: 14px; text-align: center; line-height: 1.7; }
#hist-empty b { color: var(--text); }

#share-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
#share-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  animation: ovin .25s ease;
}
.share-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 20px 20px 28px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px;
  animation: panelup .35s cubic-bezier(.34,1.2,.64,1);
}
@keyframes panelup { from{transform:translateY(100%)} to{transform:none} }

.share-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
}
.share-card-hdr h3 {
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.share-card-hdr h3 i { color: var(--blue); }
#btn-share-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--t2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.share-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.share-tab {
  height: 40px; background: transparent; border: none;
  color: var(--t2); font-family: var(--font);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.share-tab.active { background: var(--blue); color: #fff; font-weight: 700; }

.share-view { display: flex; flex-direction: column; gap: 12px; }

.code-display {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.code-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--t3); text-transform: uppercase; margin-bottom: 8px; }
.code-num {
  font-family: var(--mono); font-size: 40px; font-weight: 800;
  letter-spacing: 10px; color: var(--blue-l);
  text-shadow: 0 0 22px var(--blue-glow);
}
.code-hint { font-size: 12px; color: var(--t3); line-height: 1.5; margin-top: 8px; }

.share-peer-status {
  font-size: 13px; color: var(--t2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.share-peer-status.ok { color: var(--green); }

.btn-primary-modal {
  width: 100%; height: 50px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue), #5b9bf8);
  border: none; color: #fff; font-family: var(--font);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(66,133,244,.4);
  transition: transform .1s;
}
.btn-primary-modal:active { transform: scale(.97); }
.btn-primary-modal:disabled { opacity: .6; cursor: not-allowed; }

.viewer-label { font-size: 13px; font-weight: 600; color: var(--t2); }
#viewer-code-input {
  width: 100%; height: 56px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text); font-family: var(--mono);
  font-size: 26px; font-weight: 700; letter-spacing: 8px;
  text-align: center; outline: none;
  transition: border-color .15s;
}
#viewer-code-input:focus { border-color: var(--blue); }

#toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(12,14,22,.97);
  border: 1px solid var(--border); border-radius: 40px;
  padding: 12px 22px; font-size: 14px; font-weight: 700;
  color: var(--yellow); z-index: 9000;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg);
  animation: tpop .35s cubic-bezier(.34,1.3,.64,1);
  pointer-events: none;
}
@keyframes tpop {
  from { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);  opacity: 1; }
}