/* =====================================================================
   Live Vision — mobile-first design system
   ---------------------------------------------------------------------
   Pure presentation. Every selector the application code relies on
   (.hidden, .on, .live, .rec, .survey-view, .tgt, .histrow, …) is kept.
   ===================================================================== */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #060a0c;
  --bg2: #0a1013;
  --panel: #0f1619;
  --panel2: #172125;
  --panel3: #1e2b30;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);

  /* text */
  --text: #eef5f2;
  --text2: #c9d6d1;
  --muted: #8397a0;

  /* brand */
  --accent: #34e0a1;
  --accent2: #38bdf8;
  --accent-dim: #12372c;
  --danger: #fb7185;
  --warn: #fbbf24;
  --violet: #9b8cff;
  --pink: #f472b6;
  --orange: #fb923c;

  --grad: linear-gradient(135deg, #34e0a1 0%, #38bdf8 100%);
  --grad-soft: linear-gradient(135deg, rgba(52,224,161,.18), rgba(56,189,248,.14));
  --grad-danger: linear-gradient(135deg, #fb7185, #f43f5e);

  --ar: 2.34375;
  --head-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --r-lg: 20px;
  --r-md: 15px;
  --r-sm: 11px;
  --ease: cubic-bezier(.22,.8,.24,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* The root must keep overflow-x visible (see README, bug list). */
  max-width: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(900px 420px at 85% -80px, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(760px 380px at -10% 12%, rgba(52,224,161,.09), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

svg { flex: none; }

/* ---------------- splash ---------------- */

#splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #10272b 0%, #060a0c 62%);
  transition: opacity .55s ease, visibility .55s;
}

#splash.out { opacity: 0; visibility: hidden; }

.splash-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: splashIn .8s var(--ease) both;
}

.splash-logo {
  position: relative;
  width: 92px;
  height: 92px;
}

.splash-logo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(52,224,161,.28), 0 0 0 1px rgba(255,255,255,.12);
}

.splash-logo i {
  position: absolute;
  inset: -10px;
  border-radius: 34px;
  border: 1.5px solid rgba(52,224,161,.5);
  animation: ringOut 2s ease-out infinite;
}

.splash-logo i:nth-child(2) { animation-delay: .65s; }
.splash-logo i:nth-child(3) { animation-delay: 1.3s; }

.splash-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 6px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.splash-bar {
  width: 120px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.splash-bar b {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
  animation: barRun 1.1s ease-in-out infinite;
}

@keyframes splashIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes ringOut { from { opacity: .9; transform: scale(.86); } to { opacity: 0; transform: scale(1.7); } }
@keyframes barRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------------- header ---------------- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(var(--safe-t) + 10px) 14px 10px;
  background: rgba(6,10,12,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s ease, background .3s ease;
}

header.scrolled {
  background: rgba(6,10,12,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,224,161,.55), rgba(56,189,248,.55), transparent);
  opacity: .55;
}

.brand {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.4px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(52,224,161,.28), 0 0 0 1px rgba(255,255,255,.1);
}

.brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(96deg, #ffffff 8%, #7ff0c7 60%, #5ecbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56666d;
  flex: none;
}

.dot.live { background: var(--accent); box-shadow: 0 0 10px rgba(52,224,161,.7); }
.dot.live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: ringOut 1.8s ease-out infinite;
}
.dot.rec { background: var(--danger); box-shadow: 0 0 10px rgba(251,113,133,.8); animation: pulse 1.1s infinite; }

.langswitch {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-inline-start: auto;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.langswitch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  min-width: 32px;
  padding: 5px 9px;
  border-radius: 999px;
  touch-action: manipulation;
  transition: background .25s ease, color .25s ease;
}

.langswitch button.on {
  background: var(--grad);
  color: #04130d;
}

/* ---------------- RTL ---------------- */

[dir="rtl"] .badge.tl { left: auto; right: 12px; }
[dir="rtl"] .badge.bl { left: auto; right: 12px; }
[dir="rtl"] .rt th, [dir="rtl"] .rt td { text-align: right; }
[dir="rtl"] .rt th { width: auto; }
[dir="rtl"] .targetrow b, [dir="rtl"] .kv b { text-align: left; }
[dir="rtl"] .tgt .tval { text-align: left; }
[dir="rtl"] .mname, [dir="rtl"] .rpt, [dir="rtl"] .help, [dir="rtl"] .note { text-align: right; }
[dir="rtl"] .modecard { text-align: right; }
[dir="rtl"] .placeholder { text-align: center; }
[dir="rtl"] .rpt-banner, [dir="rtl"] .adv { text-align: right; }
[dir="rtl"] .field-head output { direction: ltr; }
[dir="rtl"] .sw { margin-left: 6px; margin-right: 0; }
[dir="rtl"] .geoicon { margin-left: 4px; margin-right: 0; }
[dir="rtl"] .filecard .meta { text-align: right; }
[dir="rtl"] input[type="range"] { direction: ltr; }
[dir="rtl"] .clip-meta small, [dir="rtl"] .histrow .hmain small { text-align: right; }
[dir="rtl"] .tgt { text-align: right; }
[dir="rtl"] .placeres { text-align: right; }
[dir="rtl"] .panel h3 { text-align: right; }

/* The map and the 3D scene keep their own orientation. */
#map, #view3d, .mapcanvas, .leaflet-container { direction: ltr; }

@keyframes pulse { 50% { opacity: .25; } }

/* ---------------- layout ---------------- */

main {
  flex: 1;
  padding: 14px 14px calc(var(--safe-b) + 104px);
}

/* Every tab and survey section slides in when it becomes visible. */
#tab-scan, #tab-survey, #tab-file, #tab-library, #tab-map, #tab-modes, #tab-tune,
.surv {
  animation: tabIn .45s var(--ease) both;
}

@keyframes tabIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 90px), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  animation: panelIn .55s var(--ease) both;
}

.panel:nth-child(2) { animation-delay: .06s; }
.panel:nth-child(3) { animation-delay: .12s; }
.panel:nth-child(4) { animation-delay: .18s; }
.panel:nth-child(n+5) { animation-delay: .22s; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
}

.panel h3 .hico {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 6px;
  border-radius: 10px;
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 32%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
}

.hidden { display: none !important; }

/* ---------------- viewer ---------------- */

.viewer {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  max-height: 54dvh;
  min-height: 200px;
  background: #000;
  border: 1px solid var(--border2);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(52,224,161,.06);
  transition: max-height .3s ease, min-height .3s ease, margin-bottom .3s ease,
              opacity .25s ease, border-color .3s ease;
}

.app.survey-view .viewer,
.app.compass-view .viewer {
  max-height: 0;
  min-height: 0;
  margin-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  opacity: 0;
  pointer-events: none;
}

#out {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#video, #fileVideo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

.viewer.raw #out { background: #000; }

/* viewfinder corner brackets */
.vf {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border: 0 solid rgba(52,224,161,.85);
  filter: drop-shadow(0 0 6px rgba(52,224,161,.55));
}
.vf.a { top: 10px; left: 10px; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 8px; }
.vf.b { top: 10px; right: 10px; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 8px; }
.vf.c { bottom: 10px; left: 10px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 8px; }
.vf.d { bottom: 10px; right: 10px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 8px; }

.badge {
  position: absolute;
  z-index: 4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #eafff6;
  background: rgba(4,10,12,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(52,224,161,.22);
  padding: 6px 10px;
  border-radius: 9px;
  pointer-events: none;
}

.badge.tl { top: 14px; left: 38px; }
.badge.bl { bottom: 14px; left: 38px; }

.rec-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 1.1s infinite;
}

.placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 14px 22px;
  text-align: center;
  gap: 6px;
  color: var(--muted);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(52,224,161,.16), transparent 60%),
    radial-gradient(ellipse at 50% 40%, #14262a, #070c0e 75%);
  overflow: hidden;
}

/* radar rings + sweep behind the empty state */
.placeholder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 30px, rgba(52,224,161,.13) 31px 32px),
    conic-gradient(from 0deg, rgba(52,224,161,.34), rgba(52,224,161,0) 28%);
  animation: sweep 4.2s linear infinite;
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
  pointer-events: none;
}

.placeholder > * { position: relative; }

/* the empty state brings its own framing, so the live badges step aside */
.viewer:has(.placeholder:not([style*="none"])) .badge { display: none; }
.placeholder .btn { min-height: 44px; margin-top: 2px; }

@keyframes sweep { to { transform: rotate(360deg); } }

.placeholder svg {
  width: 34px;
  height: 34px;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(52,224,161,.6));
  animation: floaty 3.2s ease-in-out infinite;
}

@keyframes floaty { 50% { transform: translateY(-5px); } }

.placeholder h2 { font-size: 16px; color: #fff; margin: 0; font-weight: 800; letter-spacing: .2px; }
.placeholder p { font-size: 12px; line-height: 1.5; max-width: 300px; margin: 0; color: var(--text2); opacity: .8; }

/* ---------------- controls ---------------- */

.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px;
  margin-bottom: 14px;
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
  padding: 10px 6px;
  border-radius: 12px;
  min-height: 44px;
  touch-action: manipulation;
  transition: background .3s var(--ease), color .2s ease, box-shadow .3s ease;
}

.seg button.on {
  background: var(--grad);
  color: #04130d;
  box-shadow: 0 6px 18px rgba(52,224,161,.28);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn {
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  touch-action: manipulation;
  transition: transform .12s var(--ease), background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .36; filter: saturate(.4); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn.primary {
  color: #03140d;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(52,224,161,.28), inset 0 1px 0 rgba(255,255,255,.35);
}

.btn.danger {
  color: #fff;
  background: var(--grad-danger);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(244,63,94,.26), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn.accent {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn.primary:disabled, .btn.danger:disabled, .btn.accent:disabled { box-shadow: none; }

.btn.wide { grid-column: 1 / -1; }

/* ripple (added by ui-fx.js) */
.rip {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple .6s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 650;
  margin-bottom: 6px;
  color: var(--text2);
}

.field-head output {
  color: #04130d;
  background: var(--grad);
  padding: 2px 9px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 800;
}

input[type="range"] {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  background: transparent;
  touch-action: pan-y;
  margin: 0;
}

input[type="range"]:disabled { opacity: .4; filter: grayscale(1); }

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34e0a1, #38bdf8) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.1);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 5px rgba(52,224,161,.22), 0 3px 10px rgba(0,0,0,.55);
  transition: box-shadow .2s ease, transform .2s var(--spring);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 9px rgba(52,224,161,.2), 0 3px 10px rgba(0,0,0,.55);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34e0a1, #38bdf8);
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 5px rgba(52,224,161,.22);
}

select, input[type="text"], input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

select {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334e0a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

[dir="rtl"] select { background-position: left 12px center; }

select option { background: #10191c; color: var(--text); }

input[type="text"]::placeholder { color: #5d717a; }

input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(52,224,161,.06);
  box-shadow: 0 0 0 4px rgba(52,224,161,.14);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  font-size: 13.5px;
  border-top: 1px solid var(--border);
}

.row:first-of-type { border-top: 0; }
.row span { color: var(--text); font-weight: 600; }
.row small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; margin-top: 2px; }

.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 0;
  transition: background .3s ease, box-shadow .3s ease;
  touch-action: manipulation;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: transform .32s var(--spring);
}

.switch.on { background: var(--grad); box-shadow: 0 0 16px rgba(52,224,161,.35); }
.switch.on::after { transform: translateX(20px); }
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .switch.on::after { transform: translateX(-20px); }

.note {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 11px 0 0;
}

.minibtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  min-height: 32px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--accent);
  background: rgba(52,224,161,.1);
  border: 1px solid rgba(52,224,161,.3);
  border-radius: 10px;
  touch-action: manipulation;
  transition: transform .12s ease, background .2s ease;
}

.minibtn svg { width: 14px; height: 14px; }
.minibtn:active { transform: scale(.94); background: rgba(52,224,161,.2); }

.filecard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--border2);
  border-radius: 16px;
  margin-bottom: 12px;
}

.filecard .ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(155,140,255,.25), rgba(244,114,182,.18));
  border: 1px solid rgba(155,140,255,.35);
  color: #c4b9ff;
}

.filecard .ico svg { width: 21px; height: 21px; }
.filecard .meta { min-width: 0; flex: 1; }
.filecard .meta b { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filecard .meta small { color: var(--muted); font-size: 11.5px; }

.codecbox {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.codecbox.hidden { display: none !important; }

.codecrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 5px 0;
}

.codecrow span { color: var(--muted); }
.codecrow b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.codecrow b.bad { color: #fda4af; }
.codecrow b.good { color: #6ee7b7; }
.codecrow b.maybe { color: #fcd34d; }

.progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  margin: 0 0 12px;
}

.progress i {
  display: block;
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(52,224,161,.55);
  transition: width .2s linear;
  overflow: hidden;
}

.progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: shine 1.4s linear infinite;
}

@keyframes shine { to { transform: translateX(100%); } }

/* ---------------- satellite link loader ---------------- */

.satlink {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin: 14px 0 0;
  border: 1px solid rgba(52,224,161,.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 30%, rgba(52,224,161,.14), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 0 30px rgba(52,224,161,.1);
}

.satart {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
  color: var(--accent);
}

.satglow {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,224,161,.3), transparent 68%);
  animation: pulse 2.1s ease-in-out infinite;
}

.satsvg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(52,224,161,.4)); }

.satorbit {
  transform-origin: 60px 60px;
  animation: satspin 9s linear infinite;
}

.satwave { animation: satwave 1.9s ease-in-out infinite; }
.satwave path:nth-child(2) { animation-delay: .25s; }
.satwave path:nth-child(3) { animation-delay: .5s; }

.satbody {
  transform-origin: 60px 38px;
  animation: satbob 2.6s ease-in-out infinite;
}

.satinfo { flex: 1; min-width: 0; }
.satinfo b { display: block; font-size: 13.5px; color: #eafff6; }
.satinfo small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; min-height: 17px; }
.satinfo .progress { margin: 9px 0 0; height: 6px; }

.satmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
}

.satmeta b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.satmeta .minibtn { margin-left: auto; color: #fda4af; background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.3); }

@keyframes satspin { to { transform: rotate(360deg); } }
@keyframes satwave { 0%, 100% { opacity: .18; } 45% { opacity: .95; } }
@keyframes satbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

[dir="rtl"] .satmeta .minibtn { margin-left: 0; margin-right: auto; }
[dir="rtl"] .satinfo b, [dir="rtl"] .satinfo small { text-align: right; }

.msg {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent2);
}

/* ---------------- bottom tab bar ---------------- */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 12px);
  z-index: 30;
  display: flex;
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 2px;
  width: min(520px, calc(100% - 20px));
  padding: 6px;
  background: rgba(12,19,22,.78);
  backdrop-filter: saturate(200%) blur(24px);
  -webkit-backdrop-filter: saturate(200%) blur(24px);
  border: 1px solid var(--border2);
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation: dockIn .8s var(--spring) .3s both;
}

@keyframes dockIn { from { opacity: 0; transform: translateX(-50%) translateY(80px); } }

.tabbar::-webkit-scrollbar { display: none; }

.tabbar button {
  --c: var(--accent);
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  /* Eight tabs have to share the dock, so the buttons may shrink. */
  flex: 1 1 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  min-width: 0;
  padding: 7px 1px 6px;
  border-radius: 20px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .25s ease, background .3s ease, transform .15s ease;
}

.tabbar button svg {
  width: 22px;
  height: 22px;
  transition: transform .35s var(--spring), filter .3s ease, color .25s ease;
}

.tabbar button:active { transform: scale(.9); }

.tabbar button.on {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 6px 20px color-mix(in srgb, var(--c) 24%, transparent);
}

.tabbar button.on svg {
  color: var(--c);
  transform: translateY(-2px) scale(1.14);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent));
}

.tabbar button.on::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  animation: dotIn .4s var(--spring) both;
}

@keyframes dotIn { from { transform: scaleX(0); } }

/* colour per tab */
.tabbar button:not(.on) svg { color: color-mix(in srgb, var(--c) 70%, #8397a0); }

/* ---------------- survey module ---------------- */

.surv { display: block; }

.snav {
  position: sticky;
  top: calc(var(--head-h, 58px) + 6px);
  z-index: 16;
  display: flex;
  gap: 2px;
  padding: 5px;
  margin-bottom: 14px;
  background: rgba(12,19,22,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border2);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

.snav-pill {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(52,224,161,.28), rgba(56,189,248,.16));
  border: 1px solid rgba(52,224,161,.45);
  box-shadow: 0 6px 18px rgba(52,224,161,.22), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .4s var(--ease), width .4s var(--ease);
  pointer-events: none;
  will-change: transform, width;
}

.snav button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 2px;
  border-radius: 15px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .22s ease, transform .18s ease;
}

.snav button svg {
  width: 21px;
  height: 21px;
  flex: none;
  transition: transform .3s var(--spring), filter .26s ease;
}

.snav button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav button.on { color: #fff; }
.snav button.on svg {
  color: var(--accent);
  transform: translateY(-1px) scale(1.12);
  filter: drop-shadow(0 0 7px rgba(52,224,161,.6));
}
.snav button:active { transform: scale(.93); }

/* ---------------- 3D view ---------------- */

.view3d {
  position: relative;
  width: 100%;
  height: min(62dvh, 520px);
  min-height: 330px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border2);
  background: radial-gradient(circle at 50% 30%, #11262b, #060a0c);
  margin-bottom: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(56,189,248,.08);
  touch-action: none;
}

/* full screen mode of the 3D view (works on iOS, which has no element fullscreen) */
.view3d.v3-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.view3d.v3-full .v3-hud.tr { top: calc(10px + var(--safe-t)); }
.view3d.v3-full .v3-hud.tl { top: calc(10px + var(--safe-t)); }
.view3d.v3-full .v3-hud.bl { bottom: calc(10px + var(--safe-b)); }
.view3d.v3-full .v3-card { bottom: calc(10px + var(--safe-b)); left: 70px; }

.view3d::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(0,0,0,.5);
}

/* HUD overlays built by the 3D viewer */
.v3-hud {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.v3-hud.tr { top: 10px; right: 10px; flex-direction: column; }
.v3-hud.tl { top: 10px; left: 10px; }
.v3-hud.bl { bottom: 10px; left: 10px; }
.v3-hud.br { bottom: 10px; right: 10px; }

.v3-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  background: rgba(8,14,16,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border2);
  border-radius: 13px;
  touch-action: manipulation;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.v3-btn svg { width: 19px; height: 19px; }
.v3-btn:active { transform: scale(.9); }
.v3-btn.on { color: #03140d; background: var(--grad); border-color: transparent; }

.v3-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #dffcf0;
  background: rgba(8,14,16,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(52,224,161,.3);
  border-radius: 10px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}

.v3-chip b { color: var(--accent); font-weight: 800; }

.v3-compass {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(8,14,16,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border2);
  display: grid;
  place-items: center;
}

.v3-compass svg { width: 34px; height: 34px; transition: transform .08s linear; }

.v3-card {
  position: absolute;
  z-index: 6;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(8,14,16,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(130%);
  opacity: 0;
  transition: transform .45s var(--spring), opacity .3s ease;
  pointer-events: none;
}

.v3-card.show { transform: none; opacity: 1; }
.v3-card i { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 14px currentColor; background: currentColor; }
.v3-card .t { flex: 1; min-width: 0; }
.v3-card .t b { display: block; font-size: 13px; font-weight: 800; }
.v3-card .t small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.v3-card .d { text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v3-card .d b { display: block; font-size: 15px; color: var(--text); }

.modegrid .modecard canvas { aspect-ratio: 150 / 64; }

#scanModeGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.modegrid .modecard .mname { padding: 8px 10px 4px; }

.tgt {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 9px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  touch-action: manipulation;
  transition: transform .15s var(--ease), border-color .2s ease, background .2s ease;
  animation: rowIn .45s var(--ease) both;
}

.tgt:nth-child(2) { animation-delay: .04s; }
.tgt:nth-child(3) { animation-delay: .08s; }
.tgt:nth-child(4) { animation-delay: .12s; }
.tgt:nth-child(5) { animation-delay: .16s; }
.tgt:nth-child(n+6) { animation-delay: .2s; }

@keyframes rowIn { from { opacity: 0; transform: translateX(-14px); } }

.tgt:active { transform: scale(.98); }
.tgt:last-child { margin-bottom: 0; }
.tgt.on { border-color: var(--accent); background: linear-gradient(90deg, rgba(52,224,161,.14), rgba(52,224,161,.03)); box-shadow: 0 0 0 1px rgba(52,224,161,.25), 0 8px 22px rgba(52,224,161,.12); }
.tgt .dotc { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px rgba(255,255,255,.07), inset 0 0 0 2px rgba(255,255,255,.35); }
.tgt .tmain { flex: 1; min-width: 0; }
.tgt .tmain b { display: block; font-size: 13px; font-weight: 750; }
.tgt .tmain small { color: var(--muted); font-size: 11px; }
.tgt .tval { text-align: right; flex: none; font-size: 11.5px; color: var(--muted); }
.tgt .tval b { display: block; color: var(--accent2); font-size: 13px; font-weight: 800; }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); flex: none; }
.kv b { font-weight: 650; text-align: right; overflow-wrap: anywhere; }

.adv {
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,146,60,.06));
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 14px;
  padding: 11px 13px;
  margin-top: 11px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #f3dfa8;
}
.adv b { color: #fde68a; }

.mapcanvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: #070b0d;
}

.rpt { font-size: 12.5px; line-height: 1.65; }
.rpt h4 { margin: 18px 0 9px; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent2); }
.rpt-banner {
  background: linear-gradient(135deg, rgba(251,146,60,.16), rgba(251,113,133,.1));
  border: 1px solid rgba(251,146,60,.35);
  color: #fdd2b0;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

.rt-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.rt { width: 100%; border-collapse: collapse; }
.rt th, .rt td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 12px; overflow-wrap: anywhere; }
.rt tr:last-child th, .rt tr:last-child td { border-bottom: 0; }
.rt th { color: var(--muted); font-weight: 650; font-size: 11px; width: 42%; background: rgba(255,255,255,.025); }
.rt-targets th { width: auto; font-size: 10.5px; white-space: nowrap; color: var(--accent2); }
.rt-targets td { font-size: 11.5px; white-space: nowrap; }
.rl { margin: 0 0 10px; padding-left: 18px; }
.rl li { margin-bottom: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: 0; }

.rpt-fig { margin: 0 0 14px; }
.rpt-plan {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: #070b0d;
}
.rpt-fig figcaption {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.histrow {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px;
  margin-bottom: 9px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  animation: rowIn .45s var(--ease) both;
}

.histrow .hmain { flex: 1; min-width: 0; }
.histrow .hmain b { display: block; font-size: 13px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.histrow .hmain small { color: var(--muted); font-size: 11px; }
.histrow .hact { display: flex; gap: 6px; flex: none; }
.histrow .hact button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.05);
  color: var(--text2);
  touch-action: manipulation;
  transition: transform .12s ease, background .2s ease;
}
.histrow .hact button:active { transform: scale(.9); }
.histrow .hact button svg { width: 16px; height: 16px; }
.histrow .hact button.del { color: #fda4af; background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.28); }

/* ---------------- map ---------------- */

#map {
  width: 100%;
  height: 40vh;
  min-height: 250px;
  max-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border2);
  background: #11191c;
  z-index: 1;
}

#siteMap {
  width: 100%;
  height: 260px;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border2);
  background: #11191c;
  z-index: 1;
}

.leaflet-container { font: inherit; background: #11191c; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(6,10,12,.8) !important; color: #7f949c !important; }
.leaflet-control-attribution a { color: #9fc5d6 !important; }
.leaflet-bar { border: 0 !important; box-shadow: 0 6px 18px rgba(0,0,0,.4) !important; border-radius: 13px !important; overflow: hidden; }
.leaflet-bar a { background: rgba(12,19,22,.9) !important; color: #dbe9e3 !important; border-color: rgba(255,255,255,.1) !important; width: 34px !important; height: 34px !important; line-height: 34px !important; }
.leaflet-bar a:hover { background: #1e2b30 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #141e22 !important; color: #eef5f2 !important; border-radius: 14px !important; }
.leaflet-popup-content { margin: 11px 13px; font-size: 12.5px; }

.mapoff {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  background: radial-gradient(circle at 50% 40%, #14262a, #080d0f);
  border-radius: inherit;
}

.mapoff svg { color: var(--accent) !important; animation: floaty 3s ease-in-out infinite; }

.mapwrap { position: relative; }

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: clip;
  padding: 12px 0 4px;
  margin-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar { display: none; }

.chips button {
  flex: none;
  padding: 8px 15px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.05);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform .12s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.chips button.on {
  background: var(--grad);
  border-color: transparent;
  color: #03140d;
  box-shadow: 0 6px 18px rgba(52,224,161,.25);
}

.chips button:active { transform: scale(.94); }

.targetrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}

.targetrow:last-child { border-bottom: 0; }
.targetrow span { color: var(--muted); flex: none; }
.targetrow b { font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.targetrow b.good { color: #6ee7b7; }

.placelist { margin-top: 11px; }

.placeres {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  touch-action: manipulation;
  transition: transform .12s ease, border-color .2s ease;
}

.placeres:active { transform: scale(.98); border-color: var(--accent); }
.placeres b { display: block; font-weight: 700; }
.placeres small { color: var(--muted); font-size: 11px; }

.geoicon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--accent);
}

/* ---------------- compass ---------------- */

.cmpstatus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 16px;
}

.compass-wrap {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #16211d 0%, #0d1211 66%, #26332e 67%, #0b100e 71%);
  border: 1px solid var(--border2);
  box-shadow: 0 0 0 6px rgba(10,16,19,.9), 0 18px 44px rgba(0,0,0,.55),
              inset 0 0 30px rgba(0,0,0,.55), 0 0 40px rgba(45,212,191,.07);
}

.compass-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.compass-svg .cmplabel { font: 700 13px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #b8cad9; }
.compass-svg .cmplabel.n { fill: #fb7185; font-size: 17px; }
.compass-svg .cmplabel.s { fill: #34e0a1; }
.compass-svg .cmplabel.e, .compass-svg .cmplabel.w { fill: #e5eff9; }

.cmpdegree {
  text-align: center;
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.cmpdegree small { font-size: 21px; color: #2dd4bf; letter-spacing: 0; }

.cmpdir {
  text-align: center;
  color: #2dd4bf;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.cmpmetrics { gap: 10px; }

.cmpmetric {
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 13px;
  min-width: 0;
}

.cmpmetric .lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.cmpmetric .val {
  font-size: 16px;
  font-weight: 800;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cmpmetric .val small { font-size: 11px; color: var(--muted); font-weight: 600; }
.cmpmetric.wide { grid-column: 1 / -1; }

.cmpsteps {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--muted);
}

.cmpsteps b { color: var(--text); }

[dir="rtl"] .cmpsteps { padding-left: 0; padding-right: 20px; }

/* ---------------- mode gallery ---------------- */

.modegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.modecard {
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  overflow: hidden;
  text-align: left;
  touch-action: manipulation;
  transition: transform .15s var(--ease), border-color .2s ease, box-shadow .25s ease;
}

.modecard:active { transform: scale(.96); }
.modecard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px rgba(52,224,161,.2); }

.modecard.on::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grad) ;
  box-shadow: 0 0 12px rgba(52,224,161,.6);
  -webkit-mask: none;
}

.modecard.on::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 2;
  width: 5px;
  height: 9px;
  border: solid #03140d;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}

.modecard canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 150 / 64;
  background: #000;
  image-rendering: auto;
}

.modecard .mname {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.modecard .mnum {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: var(--text2);
  font-size: 9.5px;
  font-weight: 800;
}

.modecard .mcat {
  display: block;
  padding: 0 10px 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.cat-SCAN { color: #5ec8f0; }
.cat-CLINICAL { color: #5ee08a; }
.cat-FLOW { color: #ff7b6b; }
.cat-RADIO { color: #b7a4ff; }
.cat-GEOMETRY { color: #ffd166; }
.cat-FILM { color: #d9b48a; }
.cat-ART { color: #ff8ad8; }
.cat-TECH { color: #6ee7a0; }

.modetip {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 13px;
}

.modetip b { color: var(--text); font-weight: 700; }

/* ---------------- toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 98px);
  transform: translateX(-50%) translateY(18px) scale(.96);
  z-index: 60;
  width: max-content;
  max-width: min(540px, calc(100% - 24px));
  padding: 13px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #eef5f2;
  background: rgba(20,30,34,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  border-inline-start: 4px solid var(--accent2);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--spring);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.err { border-color: rgba(251,113,133,.4); border-inline-start-color: var(--danger); color: #ffd7dd; }
.toast.ok { border-color: rgba(52,224,161,.4); border-inline-start-color: var(--accent); color: #d9fff0; }

/* ---------------- library ---------------- */

.clip {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  animation: rowIn .45s var(--ease) both;
}

.clip:last-child { margin-bottom: 0; }

.clip-thumb {
  width: 64px;
  height: 44px;
  flex: none;
  object-fit: contain;
  background: #000;
  border-radius: 10px;
  border: 1px solid var(--border2);
}

.clip-meta { flex: 1; min-width: 0; }

.clip-meta b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.clip-meta small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.clip-actions { display: flex; gap: 6px; flex: none; }

.clip-actions button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.05);
  color: var(--text2);
  touch-action: manipulation;
  transition: transform .12s ease;
}

.clip-actions button svg { width: 18px; height: 18px; }
.clip-actions button:active { transform: scale(.9); }
.clip-actions button.del { color: #fda4af; background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.28); }

.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
  border: 1.5px dashed var(--border2);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0%, rgba(52,224,161,.06), transparent 70%);
}

.empty svg { width: 34px; height: 34px; color: var(--accent); opacity: .8; margin-bottom: 9px; animation: floaty 3.2s ease-in-out infinite; }

@media (min-width: 700px) {
  main { padding-left: 18px; padding-right: 18px; }
  .viewer { max-height: 50dvh; }
}

@media (max-width: 360px) {
  .tabbar button { flex-basis: 50px; font-size: 8.5px; }
  .panel { padding: 14px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}