/* RC Flyer — new app design system (v1: auth screens) */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Dark is the default/bare :root (this app's brand-first theme). Light is
   an explicit override — either the user chose it, or chose "auto" and
   their OS prefers light. No dark-specific media block is needed since
   dark already IS the unguarded default. */
:root{
  --bg: #0a0f1c;
  --bg-panel: #0f1626;
  --card: #141d33;
  --card-border: #232f4d;
  --text: #eef2fb;
  --text-dim: #9aa7c7;
  --text-faint: #5f6c8f;
  --accent: #4facfe;
  --accent-2: #00d4ff;
  --accent-strong: #2f7ff0;
  --danger: #ff6b6b;
  --danger-bg: rgba(255,107,107,.12);
  --success: #33d69f;
  --alert-error-text: #ffb4b4;
  --alert-success-text: #7fe9c7;
  --status-gold-bg: rgba(255,205,92,.15);
  --status-gold-text: #ffcd5c;
  --status-red-bg: rgba(255,107,107,.15);
  --status-red-text: #ff8f8f;
  --status-green-bg: rgba(51,214,159,.15);
  --status-green-text: #5be0af;
  --photo-placeholder: linear-gradient(160deg, #17203a, #0d1526);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg: #f4f6fb;
    --bg-panel: #ffffff;
    --card: #ffffff;
    --card-border: #e1e6f0;
    --text: #16213a;
    --text-dim: #5a6b8c;
    --text-faint: #94a1ba;
    --accent: #2f7ff0;
    --accent-2: #0091d5;
    --accent-strong: #2f7ff0;
    --danger: #d63c50;
    --danger-bg: rgba(214,60,80,.08);
    --success: #1f9d73;
    --alert-error-text: #b4283d;
    --alert-success-text: #147a56;
    --status-gold-bg: rgba(230,158,0,.14);
    --status-gold-text: #8a5d00;
    --status-red-bg: rgba(214,60,80,.12);
    --status-red-text: #b4283d;
    --status-green-bg: rgba(31,157,115,.12);
    --status-green-text: #16694a;
    --photo-placeholder: linear-gradient(160deg, #eef1f8, #e2e7f2);
    --shadow: 0 16px 40px rgba(30,41,71,.1);
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-panel: #ffffff;
  --card: #ffffff;
  --card-border: #e1e6f0;
  --text: #16213a;
  --text-dim: #5a6b8c;
  --text-faint: #94a1ba;
  --accent: #2f7ff0;
  --accent-2: #0091d5;
  --accent-strong: #2f7ff0;
  --danger: #d63c50;
  --danger-bg: rgba(214,60,80,.08);
  --success: #1f9d73;
  --alert-error-text: #b4283d;
  --alert-success-text: #147a56;
  --status-gold-bg: rgba(230,158,0,.14);
  --status-gold-text: #8a5d00;
  --status-red-bg: rgba(214,60,80,.12);
  --status-red-text: #b4283d;
  --status-green-bg: rgba(31,157,115,.12);
  --status-green-text: #16694a;
  --photo-placeholder: linear-gradient(160deg, #eef1f8, #e2e7f2);
  --shadow: 0 16px 40px rgba(30,41,71,.1);
}

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

/* ── Icon system ──────────────────────────────────────────────────── */
.icon{ width:18px; height:18px; flex-shrink:0; display:inline-block; vertical-align:middle; }
.icon-sm{ width:14px; height:14px; }
.icon-lg{ width:24px; height:24px; }
.icon-xl{ width:34px; height:34px; }
.icon.filled{ fill: currentColor; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* The standalone-PWA bottom-tab-bar detach bug reported repeatedly on iOS
     turns out to specifically correlate with scrolling a long page — the
     elastic rubber-band bounce at the top/bottom edge is a known trigger for
     WKWebView repainting position:fixed elements at a stale location before
     the bounce settles. Disabling the bounce removes that trigger outright,
     rather than trying to compensate for it after the fact. */
  overscroll-behavior-y: none;
}

body.auth-body{
  min-height:100vh;
  display:flex;
}

/* ── Left hero panel ─────────────────────────────────────────────── */
.auth-hero{
  flex: 1 1 46%;
  /* Sticky + align-self so a long right-hand column (release_notes.php's
     list of releases, now several screens tall) doesn't stretch this
     panel to match — that used to spread its space-between children
     (brand/copy/foot) across the full stretched height, leaving the
     title+tagline stranded partway down a very tall page instead of
     staying near the top where the hero visually belongs. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 3rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,172,254,.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0,212,255,.18), transparent 50%),
    linear-gradient(160deg, #0c1428 0%, #070b16 100%);
  overflow:hidden;
}
.auth-hero::before{
  /* subtle flight-path motif */
  content:'';
  position:absolute;
  inset:-20%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.2), transparent),
    radial-gradient(2px 2px at 85% 65%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 45%, rgba(255,255,255,.22), transparent);
  opacity:.8;
  pointer-events:none;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hero-switchers{
  position:absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index:2;
  display:flex;
  gap:.5rem;
}
.lang-switch{ display:inline-block; }
.lang-select{
  appearance:none;
  -webkit-appearance:none;
  font-family: var(--font-body);
  font-size:.78rem;
  font-weight:600;
  color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: .4rem 1.8rem .4rem .7rem;
  cursor:pointer;
  transition: border-color .12s, color .12s, background .12s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa7c7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right .65rem center;
}
.lang-select:hover{ color: var(--text); border-color: var(--accent); }
.lang-select:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,172,254,.18); }
.lang-select option{ background: var(--card); color: var(--text); }

.brand-pro{ color: var(--status-gold-text); }

.auth-hero-brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.02em;
  color:#fff;
  text-decoration:none;
  width:fit-content;
}
.auth-hero-brand .mark{
  width:34px; height:34px;
  border-radius:9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(79,172,254,.4);
  color:#04101f;
}
.auth-hero-brand .mark .icon{ width:19px; height:19px; }
.auth-hero-brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:9px; }
.auth-hero-copy{ position:relative; max-width: 460px; }
.auth-hero-copy h1{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.15;
  font-weight:800;
  margin: 0 0 .9rem;
  background: linear-gradient(135deg, #ffffff 20%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-hero-copy p{
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height:1.6;
  margin:0;
}
.auth-hero-pillars{ position:relative; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.auth-hero-pillars div{
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem;
  border-radius:20px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  font-size:.76rem; font-weight:600;
}
.auth-hero-pillars .icon{ width:14px; height:14px; color: var(--accent-2); }

.auth-hero-stats{
  position:relative;
  display:flex;
  gap:2rem;
  padding-top:1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top:1.5rem;
}
.auth-hero-stats div strong{
  display:block;
  font-family: var(--font-display);
  font-size:1.3rem;
  color: var(--text);
}
.auth-hero-stats div span{
  font-size:.78rem;
  color: var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.auth-hero-foot{
  position:relative;
  font-size:.8rem;
  color: var(--text-faint);
}
.auth-hero-pricing-link{
  position:relative; display:inline-flex; align-items:center; gap:.45rem; margin-top:1.4rem;
  font-size:.8rem; font-weight:700; color: var(--accent-2); text-decoration:none;
  padding:.5rem 1rem; border-radius:20px;
  background: rgba(79,172,254,.1); border:1px solid rgba(79,172,254,.35);
  transition: background .15s, border-color .15s, transform .15s;
}
.auth-hero-pricing-link .icon{ width:14px; height:14px; }
.auth-hero-pricing-link:hover{ background: rgba(79,172,254,.18); border-color: var(--accent); transform: translateY(-1px); }

/* ── Right form panel ────────────────────────────────────────────── */
.auth-form-side{
  flex: 1 1 54%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2.5rem;
  background: var(--bg-panel);
}
.auth-card{
  width:100%;
  max-width: 400px;
}
.auth-card h2{
  font-family: var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  margin: 0 0 .35rem;
}
.auth-card .sub{
  color: var(--text-dim);
  font-size:.92rem;
  margin: 0 0 1.75rem;
}
.auth-card .sub a{ color: var(--accent); text-decoration:none; font-weight:600; }
.auth-card .sub a:hover{ text-decoration:underline; }

.field{ margin-bottom: 1.1rem; }
.field-with-thumb{ display:flex; align-items:center; gap:.6rem; }
.pref-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:.5rem .8rem; }
.field-with-thumb select{ flex:1; min-width:0; }
.field-thumb, .field-thumb-ph{ width:38px; height:38px; border-radius: var(--radius-sm); flex-shrink:0; }
.field-thumb{ overflow:hidden; }
.field-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.field-thumb-ph{ display:flex; align-items:center; justify-content:center; background: var(--card); border:1px solid var(--card-border); color: var(--text-faint); }
.field label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color: var(--text-dim);
  margin-bottom: .4rem;
}
.field-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem;
}
.field-label-row label{ margin-bottom:.4rem; }
.field-inline-link{
  font-size:.78rem;
  font-weight:600;
  color: var(--accent);
  text-decoration:none;
}
.field-inline-link:hover{ text-decoration:underline; }
.field input:not([type="checkbox"]):not([type="radio"]){
  width:100%;
  padding: .78rem .9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: .95rem;
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color: var(--text-faint); }
.field input:focus{
  outline:none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,172,254,.18);
}
.field input[type="checkbox"], .field input[type="radio"]{
  width:auto;
  flex-shrink:0;
  accent-color: var(--accent);
}
.field-hint{ font-size:.75rem; color: var(--text-faint); margin-top:.35rem; }
/* Marks a field as freshly AI-suggested (see model_edit.php's AI lookup) — cleared on the user's next edit. */
.field input.ai-suggested, .field select.ai-suggested, .field textarea.ai-suggested{
  border-color: var(--accent);
  background: rgba(79,172,254,.1);
}

.btn-primary{
  width:100%;
  padding: .85rem 1rem;
  border:none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-2));
  color:#04101f;
  font-family: var(--font-body);
  font-weight:700;
  font-size:.98rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 10px 30px rgba(47,127,240,.35);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(47,127,240,.45); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:disabled{ opacity:.6; cursor:default; transform:none; }

.auth-divider{ display:flex; align-items:center; gap:.8rem; margin:1.2rem 0; color: var(--text-faint); font-size:.8rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--card-border); }

/* Google's own brand guideline calls for a white button regardless of app theme. */
.btn-google{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background:#fff;
  color:#1f1f1f;
  border:1.5px solid #dadce0;
  font-family: var(--font-body);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition: box-shadow .12s ease, transform .12s ease;
}
.btn-google:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-1px); }
.btn-google svg{ flex-shrink:0; }

.alert{
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  font-size:.88rem;
  margin-bottom: 1.1rem;
  line-height:1.45;
}
.alert-error{ background: var(--danger-bg); color: var(--alert-error-text); border: 1px solid rgba(214,60,80,.3); }
.alert-success{ background: rgba(51,214,159,.12); color: var(--alert-success-text); border: 1px solid rgba(51,214,159,.3); }

@keyframes spin{ to{ transform: rotate(360deg); } }
.spinner-sm{
  width:22px; height:22px; border-radius:50%;
  border: 3px solid var(--card-border);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

.import-progress-steps{ list-style:none; padding:0; margin: 1.4rem 0 0; text-align:left; }
.import-progress-steps li{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem 0; color: var(--text-faint); font-size:.9rem;
  transition: color .2s;
}
.import-progress-steps li .icon{ width:16px; height:16px; flex-shrink:0; opacity:.4; transition: opacity .2s; }
.import-progress-steps li.active{ color: var(--text); }
.import-progress-steps li.active .icon{ opacity:1; color: var(--accent); }

.auth-card .fine-print{
  margin-top: 1.5rem;
  font-size:.72rem;
  color: var(--text-faint);
  text-align:center;
  line-height:1.5;
}
.auth-card .fine-print a{ color: var(--text-dim); }

@media (max-width: 860px){
  body.auth-body{ flex-direction:column; }
  /* Stacked layout here, not side-by-side, so the sticky/full-height
     trick above would just pin the whole hero over the content as you
     scroll — back to its natural (short) height instead. */
  .auth-hero{ position:static; height:auto; flex: 0 0 auto; padding: 2rem 1.5rem; }
  .auth-hero-stats{ display:none; }
  .auth-form-side{ padding: 2rem 1.5rem; }
}

/* ── Responsive: app shell / forms / detail pages ────────────────── */
@media (max-width: 720px){
  .shell-main{ padding: 1.5rem 1.1rem 6rem; }
  .shell-main h1{ font-size:1.4rem; }

  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head .btn{ width:100%; justify-content:center; }

  .field-row{ grid-template-columns: 1fr; gap:0; }

  .detail-stats{ gap:1rem; flex-wrap:wrap; }
  .detail-stats div, .detail-stats a{ min-width:80px; }

  .flog-breakdown-grid{ grid-template-columns:1fr; }

  .flight-row{ flex-wrap:wrap; }
  .flight-row .dur{ margin-left:auto; }

  .form-card{ padding:1.2rem; max-width:100%; }

  .model-card-photo{ height:110px; font-size:1.8rem; }

  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabs a{ white-space:nowrap; }

  .form-actions{ flex-direction:column; }
  .form-actions .btn{ width:100%; justify-content:center; }
  .danger-zone .form-actions{ flex-direction:row; flex-wrap:wrap; }
  .danger-zone .form-actions .btn{ width:auto; }
}

@media (max-width: 420px){
  .model-grid{ grid-template-columns: 1fr; }
}

/* ── App shell ────────────────────────────────────────────────────── */
.shell{
  min-height:100vh; color: var(--text);
  background:
    radial-gradient(ellipse 900px 500px at 100% -10%, rgba(79,172,254,.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 100%, rgba(0,212,255,.05), transparent 60%),
    var(--bg);
}
.shell-main{ max-width: 1040px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.shell-main h1{ font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 .3rem; }
.shell-main p{ color: var(--text-dim); line-height:1.6; }
.shell-main-wide{ max-width: 1400px; }

/* ── Responsive chrome: desktop sidebar vs mobile top+bottom bars ───
   Desktop (≥961px) gets a persistent left sidebar with every destination
   listed directly — a vertical list scales to far more items than a
   horizontal bar ever could. Below that, the sidebar disappears entirely
   in favour of a slim top bar, a 5-slot bottom tab bar for the everyday
   actions, and a full-screen "Menu" overlay (mirrors the legacy app's own
   dedicated Menu screen) for everything else. One shared item list in
   nav.php feeds all three — see render_topbar(). */
:root{ --sidebar-width: 232px; }

.app-sidebar{
  position:fixed; top:0; left:0; bottom:0; width: var(--sidebar-width); z-index:30;
  display:flex; flex-direction:column;
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border-right:1px solid var(--card-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow-y:auto;
}
.app-sidebar-brand{
  display:flex; align-items:center; gap:.55rem; padding:1.3rem 1.2rem 1rem;
  font-family: var(--font-display); font-weight:800; font-size:1.02rem;
  color: var(--text); text-decoration:none; flex-shrink:0;
}
.app-sidebar-brand .mark{
  width:30px; height:30px; border-radius:8px; flex-shrink:0; overflow:hidden;
  box-shadow: 0 4px 14px rgba(79,172,254,.35);
}
.app-sidebar-brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-sidebar-nav{ display:flex; flex-direction:column; gap:.3rem; padding:.5rem .8rem; flex:1; }
.app-sidebar-nav a{
  display:flex; align-items:center; gap:.7rem;
  color: var(--text-dim); text-decoration:none; font-size:.86rem; font-weight:600;
  padding:.6rem .7rem; border-radius: var(--radius-sm); transition: color .12s, background .12s;
}
.app-sidebar-nav a .nav-icon{ width:17px; height:17px; flex-shrink:0; }
.app-sidebar-nav a:hover{ color: var(--text); background: rgba(255,255,255,.04); }
.app-sidebar-nav a.active{ color: var(--accent-2); background: rgba(79,172,254,.14); }
.app-sidebar-group{ display:flex; flex-direction:column; gap:.15rem; }
.app-sidebar-group-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer; padding:.4rem .7rem .3rem;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-faint);
}
.app-sidebar-group-head:hover{ color: var(--text-dim); }
.app-sidebar-group-chevron{ width:13px; height:13px; flex-shrink:0; transition: transform .15s; }
.app-sidebar-group.collapsed .app-sidebar-group-chevron{ transform: rotate(-90deg); }
.app-sidebar-group.collapsed .app-sidebar-group-items{ display:none; }
.app-sidebar-footer{ padding:.9rem .8rem 1.1rem; border-top:1px solid var(--card-border); flex-shrink:0; }

.notif-bell-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color: var(--text-dim); cursor:pointer; padding:.4rem;
  border-radius: var(--radius-sm); margin-bottom:.6rem;
}
.notif-bell-btn:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.notif-badge{
  position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 3px;
  border-radius:9px; background: var(--danger, #e53e3e); color:#fff;
  font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
}
.notif-unread{ background: rgba(79,172,254,.09); }

.rcf-toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,10px);
  z-index:900; max-width:90vw; padding:.7rem 1.1rem; border-radius:999px;
  background: var(--card); border:1px solid var(--card-border); color: var(--text);
  font-size:.85rem; font-weight:600; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity:0; transition: opacity .25s, transform .25s; pointer-events:none;
}
.rcf-toast.show{ opacity:1; transform:translate(-50%,0); }
.rcf-toast-success{ border-color: rgba(51,214,159,.4); }
@media (min-width:900px){ .rcf-toast{ bottom:1.6rem; } }

.online-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#33d69f; box-shadow:0 0 0 2px rgba(51,214,159,.25); }

.offline-banner{
  display:none; position:fixed; top:0; left:0; right:0; z-index:950;
  text-align:center; padding:.5rem 1rem; font-size:.78rem; font-weight:700;
  background: var(--danger, #e53e3e); color:#fff;
}
.offline-banner.show{ display:block; }

.pwa-install-banner{
  display:none; align-items:center; gap:.7rem;
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:850;
  padding:.8rem 1rem; max-width:420px; margin:0 auto;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
.pwa-install-banner.show{ display:flex; }
.pwa-install-icon{ width:38px; height:38px; border-radius:9px; flex-shrink:0; object-fit:cover; }
.pwa-install-text{ flex:1; font-size:.8rem; color: var(--text-dim); min-width:0; line-height:1.4; }
.pwa-install-close{ background:none; border:none; color: var(--text-faint); cursor:pointer; padding:.2rem; display:flex; flex-shrink:0; }
.pwa-install-close:hover{ color: var(--text); }
@media (min-width:900px){
  .pwa-install-banner{ left:auto; right:1.6rem; bottom:1.6rem; margin:0; }
}
.app-sidebar-user{
  display:flex; align-items:center; gap:.6rem; padding:.4rem .3rem; margin-bottom:.7rem;
  text-decoration:none; color: var(--text); border-radius: var(--radius-sm);
}
.app-sidebar-user:hover, .app-sidebar-user.active{ background: rgba(255,255,255,.04); }
.app-sidebar-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:.8rem;
}
.app-sidebar-avatar img{ width:100%; height:100%; object-fit:cover; }
.app-sidebar-username{ font-size:.84rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-sidebar-controls{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.7rem; }
.app-sidebar-controls .lang-select{ width:100%; }
.app-sidebar-logout{
  display:flex; align-items:center; gap:.4rem; color: var(--text-faint); text-decoration:none;
  font-size:.8rem; font-weight:600; padding:.4rem .3rem;
}
.app-sidebar-logout:hover{ color: var(--text); }
.app-sidebar-version{
  display:flex; align-items:center; gap:.4rem; color: var(--text-faint); text-decoration:none;
  font-size:.72rem; padding:.4rem .3rem;
}
.app-sidebar-version .icon{ width:12px; height:12px; }
.app-sidebar-version:hover{ color: var(--text); }

.app-mobile-topbar{ display:none; }
.app-bottom-tabs{ display:none; }
.app-menu-overlay{ display:none; }

@media (min-width: 961px){
  .shell-main{ margin-left: calc(var(--sidebar-width) + 2rem); margin-right:auto; }
}

@media (max-width: 960px){
  .app-sidebar{ display:none; }
  .shell-main{ padding-top:1.5rem; padding-bottom:7.5rem; }

  .app-mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.1rem;
    border-bottom:1px solid var(--card-border);
    background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position:sticky; top:0; z-index:25;
  }
  .app-mobile-topbar .brand{ display:flex; align-items:center; gap:.5rem; font-family: var(--font-display); font-weight:800; color: var(--text); text-decoration:none; }
  .app-mobile-topbar .brand .mark{ width:26px; height:26px; border-radius:7px; overflow:hidden; flex-shrink:0; }
  .app-mobile-topbar .brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .app-menu-btn{ background:none; border:none; color: var(--text-dim); padding:.4rem; display:flex; }
  .app-menu-btn .icon{ width:22px; height:22px; }

  .app-bottom-tabs{
    display:flex; align-items:stretch; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:25;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
    border-top:1px solid var(--card-border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* iOS Safari can visually detach a plain `position:fixed` element from
       the viewport edge mid-scroll (it briefly renders at its pre-scroll
       position until the address-bar animation settles) — promoting this
       to its own GPU compositor layer keeps it glued to the bottom instead
       of being repainted through the same software path as the page. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }
  .app-bottom-tabs a, .app-bottom-tabs button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
    padding:1.1rem .2rem 1rem; text-decoration:none; color: var(--text-faint);
    background:none; border:none; font-family: var(--font-body); font-size:.68rem; font-weight:700;
  }
  .app-bottom-tabs .nav-icon{ width:24px; height:24px; }
  .app-bottom-tabs a.active, .app-bottom-tabs button.active{ color: var(--accent-2); }
  .app-bottom-tab-primary{ color: var(--accent) !important; }

  .app-menu-overlay{
    display:flex; position:fixed; inset:0; z-index:800;
    align-items:flex-end; justify-content:center;
    background:rgba(0,0,0,.55); backdrop-filter: blur(4px);
    opacity:0; pointer-events:none; transition: opacity .15s;
  }
  .app-menu-overlay.open{ opacity:1; pointer-events:auto; }
  .app-menu-panel{
    width:100%; max-height:85vh; overflow-y:auto;
    background: var(--card); border-radius: 20px 20px 0 0;
    padding:1.3rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom, 0));
    transform: translateY(12px); transition: transform .15s;
  }
  .app-menu-overlay.open .app-menu-panel{ transform: translateY(0); }
  .app-menu-header{ display:flex; align-items:center; justify-content:space-between; font-family: var(--font-display); font-weight:800; font-size:1.1rem; margin-bottom:1rem; }
  .app-menu-user{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color: var(--text); padding:.6rem; margin-bottom:.8rem; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); }
  .app-menu-user .app-sidebar-avatar{ width:38px; height:38px; }
  .app-menu-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.5rem; margin-bottom:1rem; }
  .app-menu-item{
    display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
    color: var(--text-dim); text-decoration:none; font-size:.72rem; font-weight:600;
    padding:.9rem .4rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.03);
  }
  .app-menu-item .nav-icon{ width:20px; height:20px; }
  .app-menu-item.active{ color: var(--accent-2); background: rgba(79,172,254,.14); }
}

@media (min-width: 481px) and (max-width: 960px){
  .app-menu-panel{ max-width:420px; border-radius:20px; margin-bottom:2rem; }
}

.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.page-head .sub{ color: var(--text-dim); font-size:.92rem; margin:.2rem 0 0; }

.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight:700; font-size:.88rem;
  text-decoration:none; cursor:pointer; border:none;
  transition: transform .1s ease, opacity .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn .icon{ width:15px; height:15px; }
.btn-accent{ background: linear-gradient(135deg, var(--accent-strong), var(--accent-2)); color:#04101f; box-shadow: 0 8px 22px rgba(47,127,240,.3); }
.btn-accent:hover{ box-shadow: 0 10px 28px rgba(47,127,240,.42); }
.btn-ghost{ background: transparent; color: var(--text-dim); border:1.5px solid var(--card-border); }
.btn-ghost:hover{ color: var(--text); border-color: var(--accent); }
.btn-danger{ background: var(--danger-bg); color: var(--alert-error-text); border:1.5px solid rgba(214,60,80,.3); }
.btn-danger:hover{ background: rgba(255,107,107,.2); }
.btn-sm{ padding:.45rem .75rem; font-size:.78rem; }
.btn-sm .icon{ width:13px; height:13px; }
.btn-block{ width:100%; justify-content:center; }

/* status tabs */
.tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--card-border); margin-bottom:1.4rem; }
.tabs a{
  padding:.7rem 1rem; color: var(--text-dim); text-decoration:none; font-size:.88rem; font-weight:700;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition: color .12s, border-color .12s;
}
.tabs a .count{ color: var(--text-faint); font-weight:600; margin-left:.3rem; }
.tabs a:hover{ color: var(--text); }
.tabs a.active{ color: var(--accent-2); border-bottom-color: var(--accent-2); }
.tab-manage-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto;
  width:36px; height:36px; background:none; border:none; color: var(--text-faint); cursor:pointer; border-radius: var(--radius-sm);
}
.tab-manage-btn:hover{ color: var(--accent-2); background: rgba(255,255,255,.04); }
.dash-manage-row{ display:flex; align-items:center; gap:.5rem; padding:.4rem 0; }
.dash-manage-row input[type="text"]{
  flex:1; padding:.5rem .7rem; border-radius: var(--radius-sm); border:1.5px solid var(--card-border);
  background: var(--card); color: var(--text); font-size:.85rem;
}
.dash-manage-row .btn-ghost{ flex-shrink:0; padding:.4rem; }

/* model grid/cards */
.model-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:1rem; }
.model-card{
  position:relative;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius);
  overflow:hidden; text-decoration:none; color:var(--text); display:flex; flex-direction:column;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.model-card:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.22); }
.model-card-link{ display:contents; text-decoration:none; color:inherit; }
.model-card-quick-actions{ position:absolute; top:.6rem; right:.6rem; z-index:2; display:flex; gap:.4rem; }
.model-card-quick-action{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: rgba(10,15,28,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: background .15s, transform .15s;
}
.model-card-quick-action:hover{ background: var(--accent-strong); transform: scale(1.08); }
.model-card-quick-action .icon{ width:16px; height:16px; }
.model-card-photo{
  height:140px; display:flex; align-items:center; justify-content:center;
  background: var(--photo-placeholder);
  color: var(--text-faint);
  overflow:hidden;
}
.model-card-photo .icon{ color: var(--text-faint); opacity:.6; }
.model-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.model-hero-photo{
  width:100%; max-height:320px; overflow:hidden; border-radius: var(--radius);
  margin-bottom:1.4rem; background: linear-gradient(160deg, #17203a, #0d1526);
}
.model-hero-photo img{ width:100%; height:100%; max-height:320px; object-fit:cover; display:block; }
.model-hero-photo-empty{ height:180px; display:flex; align-items:center; justify-content:center; }
.model-hero-photo-empty .icon{ color: var(--text-faint); opacity:.5; }
.model-card-body{ padding:1rem 1.1rem 1.1rem; flex:1; display:flex; flex-direction:column; gap:.4rem; }
.model-card-name{ font-family: var(--font-display); font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:.35rem; }
.model-card-meta{ color: var(--text-faint); font-size:.78rem; }
.model-card-stats{ margin-top:auto; padding-top:.6rem; border-top:1px solid var(--card-border); color: var(--text-dim); font-size:.8rem; display:flex; justify-content:space-between; }
.fav-star{ width:15px; height:15px; color: var(--status-gold-text); flex-shrink:0; }

/* ── Marketplace ──────────────────────────────────────────────────────── */
.marketplace-price{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; color: var(--accent-2); }
.marketplace-notes{ font-size:.8rem; margin:0; }
.marketplace-seller{
  display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.6rem;
  border-top:1px solid var(--card-border); font-size:.82rem; font-weight:600; cursor:pointer;
}
.marketplace-seller-avatar, .marketplace-seller-avatar-ph{ width:22px; height:22px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.marketplace-seller-avatar-ph{
  display:flex; align-items:center; justify-content:center; background: var(--accent); color:#04101f;
  font-size:.68rem; font-weight:800;
}

.view-toggle{ display:flex; gap:.3rem; background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.25rem; }
.view-toggle button{
  display:flex; align-items:center; justify-content:center; width:34px; height:30px;
  background:none; border:none; border-radius: calc(var(--radius-sm) - 2px); color: var(--text-faint);
  transition: background .12s, color .12s;
}
.view-toggle button:hover{ color: var(--text); }
.view-toggle button.active{ background: var(--accent); color:#04101f; }

.doc-card-actions{ display:flex; gap:.4rem; margin-top:.5rem; }
.doc-card .model-card-body{ padding-top:.8rem; }
.doc-assoc-list{ max-height:220px; overflow-y:auto; border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.6rem .8rem; }
.doc-assoc-group + .doc-assoc-group{ margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--card-border); }
.doc-assoc-group-title{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); margin-bottom:.4rem; }
.doc-assoc-row{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; padding:.3rem 0; cursor:pointer; }

.doc-thumb{ flex-direction:column; gap:.35rem; }
.doc-thumb .icon{ width:34px; height:34px; }
.doc-ext{ font-size:.66rem; font-weight:700; letter-spacing:.05em; color: var(--text-faint); }

.flog-breakdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.doc-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.doc-table th{
  text-align:left; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-faint); padding:.5rem .7rem; border-bottom:2px solid var(--card-border);
  white-space:nowrap;
}
.doc-table td{ padding:.6rem .7rem; border-bottom:1px solid var(--card-border); vertical-align:middle; white-space:nowrap; }
.doc-table tbody tr:hover{ background: rgba(255,255,255,.03); }
.doc-table a{ color: var(--text); text-decoration:none; display:flex; align-items:center; gap:.4rem; }
.doc-table a:hover{ color: var(--accent); }
.doc-table td:nth-child(2) a{ display:inline; color: var(--accent-2); }

.empty-state{ text-align:center; padding: 4rem 1rem; color: var(--text-faint); }
.empty-icon{ width:64px; height:64px; margin:0 auto .9rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(79,172,254,.14), rgba(0,212,255,.08)); color: var(--accent); }
.empty-icon .icon{ width:28px; height:28px; }
.empty-state h3{ font-family: var(--font-display); color: var(--text); margin: 0 0 .3rem; }
.empty-state p{ color: var(--text-faint); }

/* forms on non-auth pages */
.form-card{ background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); padding:1.6rem; max-width:560px; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.field select, .field textarea{
  width:100%;
  padding: .78rem .9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: .95rem;
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
.field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,172,254,.18); }
.field textarea{ resize:vertical; min-height:80px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-inline-toggle{ font-size:.78rem; color: var(--accent); cursor:pointer; background:none; border:none; padding:0; margin-top:.35rem; font-weight:600; }
.form-actions{ display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap; }
.danger-zone{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--card-border); }
.danger-zone h3{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin:0 0 .8rem; }
.danger-zone h3 .icon{ color: var(--danger); }
/* "Mark as sold" expands inline into its price/date fields rather than
   jumping to a separate page — it sits in the same flex row as the other
   one-click danger-zone buttons, but claims the full row width once open
   (the row already wraps) so the fields get proper room. */
.mark-sold-details summary{ list-style:none; }
.mark-sold-details summary::-webkit-details-marker{ display:none; }
.mark-sold-details[open]{ flex-basis:100%; }
.mark-sold-form{ display:flex; flex-direction:column; gap:.7rem; margin-top:.7rem; padding:.9rem; background: var(--bg-panel); border:1px solid var(--card-border); border-radius: var(--radius-sm); }
.status-badge{ display:inline-block; padding:.2rem .6rem; border-radius:20px; font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.status-badge.sold{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.status-badge.grave{ background: var(--status-red-bg); color: var(--status-red-text); }

.detail-stats{ display:flex; gap:1.8rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.detail-stats div strong, .detail-stats a strong{ display:block; font-family: var(--font-display); font-size:1.3rem; color: var(--text); }
.detail-stats div span, .detail-stats a span{ font-size:.72rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.detail-stats a{ text-decoration:none; transition: opacity .12s; }
.detail-stats a:hover{ opacity:.75; }
.stat-icon{ display:block; width:18px; height:18px; color: var(--accent); margin:0 auto .3rem; }

/* ── Profile ──────────────────────────────────────────────────────── */
.profile-header{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.4rem; }
.profile-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; background: var(--photo-placeholder); display:flex; align-items:center; justify-content:center; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-avatar span{ font-family: var(--font-display); font-size:1.6rem; color: var(--text-dim); }
.profile-header h2{ margin:0 0 .15rem; font-family: var(--font-display); font-size:1.2rem; }
.profile-header .sub{ margin:0; }
.form-card{ margin-bottom:1.4rem; }
.form-card-title{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin:0 0 1.1rem; }
.form-card-title .icon{ width:16px; height:16px; color: var(--accent); }

.flight-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:.5rem; }
.flight-row{ background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.85rem 1rem; display:flex; align-items:center; gap:.8rem; text-decoration:none; transition: border-color .12s, transform .12s; }
a.flight-row:hover{ border-color: var(--accent); transform: translateY(-1px); }
.flight-row-site-thumb{ width:38px; height:38px; border-radius: var(--radius-sm); flex-shrink:0; object-fit:cover; }
.flight-row-site-thumb-ph{ display:flex; align-items:center; justify-content:center; background: var(--bg-panel); border:1px solid var(--card-border); color: var(--text-faint); }
.flight-row-info{ flex:1; min-width:0; }
.flight-row .when{ font-size:.85rem; color: var(--text); }
.flight-row .where{ font-size:.76rem; color: var(--text-faint); display:flex; align-items:center; gap:.25rem; }
.flight-row .where .icon{ width:12px; height:12px; flex-shrink:0; }
.flight-row .dur{ font-weight:700; font-size:.9rem; white-space:nowrap; margin-left:auto; }

/* ── Flying Sites ─────────────────────────────────────────────────── */
.loc-picker{ display:flex; gap:.5rem; flex-wrap:wrap; margin:-.6rem 0 1.1rem; }
.loc-picker-map{ height:280px; border-radius: var(--radius-sm); overflow:hidden; margin:-.6rem 0 1.1rem; border:1.5px solid var(--card-border); }

/* Street/satellite toggle shared by every Leaflet map (see rcMapAddBaseLayers()
   in includes/location_picker.php) — an opaque background regardless of
   .btn-ghost's usual transparency, since this floats directly over map
   tiles that can be any colour. */
.map-layer-toggle .btn{
  background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:.3rem; white-space:nowrap;
}

.sites-search{ position:relative; margin-bottom:1rem; }
.sites-search svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); opacity:.45; pointer-events:none; }
.sites-search input{
  width:100%; padding:.75rem .9rem .75rem 2.5rem; border-radius: var(--radius-sm);
  border:1.5px solid var(--card-border); background: var(--card); color: var(--text);
  font-size:.92rem; font-family: var(--font-body);
}
.sites-search input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,172,254,.18); }

/* Type-to-filter model picker (Log Flight, Maintenance, Graveyard) — a
   plain <select> stopped scaling once pilots had 40-50+ models to scroll
   through, so this swaps in a text search backed by a hidden model_id
   input, with the same filtered-list-overlay feel as the battery picker's
   search box above. */
.model-search-wrap{ position:relative; flex:1; min-width:0; }
.model-search-wrap input[type="text"]{ width:100%; }
.model-search-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  max-height:260px; overflow-y:auto; background: var(--card); border:1.5px solid var(--card-border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.model-search-option{ display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; cursor:pointer; }
.model-search-option:hover, .model-search-option.active{ background: rgba(79,172,254,.12); }
.model-search-option-thumb{ width:26px; height:26px; border-radius:6px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background: var(--bg); color: var(--text-faint); }
.model-search-option-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.model-search-option-thumb svg{ width:15px; height:15px; }
.model-search-empty{ padding:.7rem .75rem; color: var(--text-faint); font-size:.85rem; }

.mf-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.gps-device-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:.7rem; margin-bottom:1.1rem; }
.gps-device-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:.8rem .6rem; border-radius:var(--radius-sm); border:1.5px solid var(--card-border);
  background: var(--card); cursor:pointer; transition: border-color .15s, background .15s;
}
.gps-device-card:hover{ border-color: var(--accent); }
.gps-device-card.active{ border-color: var(--accent); background: rgba(79,172,254,.1); }
.gps-device-card input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.gps-device-card img{ height:56px; max-width:100%; object-fit:contain; margin-bottom:.5rem; }
.gps-device-name{ font-size:.82rem; font-weight:700; color:var(--text); }
.gps-device-sub{ font-size:.7rem; color:var(--text-faint); margin-top:.15rem; }
.gps-device-beta{ position:absolute; top:.4rem; right:.4rem; background:#fd7e14; color:#fff; font-size:.6rem; font-weight:800; padding:1px 5px; border-radius:4px; letter-spacing:.03em; }

.mf-pill{ display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .75rem; border-radius:20px; font-size:.76rem; font-weight:700; border:1.5px solid var(--card-border); background: var(--card); color: var(--text-dim); cursor:pointer; white-space:nowrap; transition:all .15s; }
.mf-pill.active{ border-color:transparent; color:#04101f; }
.mf-pill.mf-all.active{ background: var(--accent-2); color:#04101f; }
.mf-pill.mf-accepting.active{ background: var(--status-green-text); }
.mf-pill.mf-not.active{ background: var(--status-red-text); }
.mf-pill.mf-check.active{ background: var(--status-gold-text); }

.sort-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.sort-label{ font-size:.7rem; color: var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.sort-select{
  appearance:none; -webkit-appearance:none; border:1.5px solid var(--card-border); border-radius: var(--radius-sm);
  padding:.35rem .55rem; font-size:.8rem; font-weight:600; color: var(--text); background: var(--card);
  cursor:pointer; outline:none;
}
.sort-select:focus{ border-color: var(--accent); }
.group-hdr{ font-size:.76rem; font-weight:700; color: var(--text-faint); padding:.7rem .1rem .3rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--card-border); margin-bottom:.5rem; }
.group-hdr span{ font-weight:400; }
.result-count{ font-size:.78rem; color: var(--text-faint); padding:.2rem 0 .6rem; text-align:center; }

.site-card{ background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); overflow:hidden; margin-bottom:.85rem; transition:border-color .15s, box-shadow .15s; }
.site-card:hover{ border-color: var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.site-card-header{
  display:grid; grid-template-columns:52px 1fr; column-gap:.75rem; row-gap:.3rem;
  padding:.9rem 1rem; cursor:pointer; position:relative;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.site-logo{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:2.5px solid rgba(255,255,255,.7); grid-row:1/3; align-self:center; }
.site-logo-ph{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; color:#fff; grid-row:1/3; align-self:center; border:2.5px solid rgba(255,255,255,.7); }
.site-name{ font-size:1rem; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.15); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-desc{ font-size:.8rem; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-meta{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.site-pill{ display:inline-flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.22); border-radius:20px; padding:.18rem .55rem; font-size:.72rem; font-weight:700; color:#fff; }
.site-pill-leader{ background:rgba(255,193,7,.28); }
.site-membership{ font-size:.72rem; padding:.18rem .5rem; border-radius:20px; font-weight:700; }
.site-membership.accepting{ background: var(--status-green-bg); color: var(--status-green-text); }
.site-membership.not{ background: var(--status-red-bg); color: var(--status-red-text); }
.site-membership.check{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.site-actions{ grid-column:2; grid-row:2; display:flex; align-items:center; gap:.3rem; justify-content:flex-end; }
.site-actions button{ background:none; border:none; cursor:pointer; padding:.25rem; color:rgba(255,255,255,.8); }
.site-actions button:hover{ color:#fff; }
.site-actions button.fav.active{ color:#ff8f8f; }
.site-actions svg{ width:19px; height:19px; }
.btn-view-site{ background:rgba(255,255,255,.92); color:#0c1428; border:none; border-radius:8px; padding:.35rem .65rem; font-size:.74rem; font-weight:700; cursor:pointer; white-space:nowrap; }

.site-stats{ display:flex; gap:1.2rem; padding:.6rem 1rem .55rem 4.4rem; }
.site-stat{ text-align:center; }
.site-stat-val{ font-size:.88rem; font-weight:800; color: var(--text); font-variant-numeric:tabular-nums; }
.site-stat-lbl{ font-size:.64rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }

.site-icons{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.3rem 1rem .85rem; }
.icon-group-lbl{ font-size:.64rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.25rem; }
.icon-row{ display:flex; gap:.3rem; flex-wrap:wrap; }
.icon-pill{ display:flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:600; padding:.2rem .4rem; border-radius:6px; }
.icon-pill.allowed{ background: rgba(79,172,254,.14); color: var(--accent-2); }
.icon-pill.disallowed{ background: rgba(148,161,186,.1); color: var(--text-faint); text-decoration:line-through; opacity:.7; }
.icon-pill svg{ width:12px; height:12px; flex-shrink:0; }

.sites-layout{ display:block; }
.sites-list-panel{ }
.sites-map-panel{ display:none; height:60vh; border-radius: var(--radius); overflow:hidden; margin-top:1rem; }
.sites-map-panel.show{ display:block; }
#sitesLeafletMap{ width:100%; height:100%; }
@media(min-width:1024px){
  .sites-layout{ display:flex; gap:1.4rem; align-items:flex-start; }
  .sites-list-panel{ flex:0 0 480px; max-height:calc(100vh - 220px); overflow-y:auto; }
  .sites-map-panel{ display:block !important; flex:1; height:calc(100vh - 220px); margin-top:0; position:sticky; top:100px; }
}

.flying-now{ margin-bottom:.9rem; }
.flying-now-hdr{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; padding:.3rem 0; }
.flying-now-hdr .fn-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.flying-now-hdr .fn-arrow{ margin-left:auto; font-size:.65rem; opacity:.6; transition:transform .2s; }
.flying-now-hdr.open .fn-arrow{ transform:rotate(180deg); }
.fn-active .fn-dot{ background: var(--status-green-text); }
.fn-active{ color: var(--status-green-text); }
.fn-empty .fn-dot{ background: var(--status-red-text); }
.fn-empty{ color: var(--text-faint); }
.flying-now-body{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.flying-now-body.open{ max-height:200px; }
.fn-empty-msg{ font-size:.78rem; color: var(--text-faint); padding:.5rem 0 .2rem; font-style:italic; }
.fn-scroll{ display:flex; gap:.6rem; overflow-x:auto; padding:.5rem 0 .25rem; -webkit-overflow-scrolling:touch; }
.fn-pilot{ flex:0 0 76px; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color: var(--text); }
.fn-avatar, .fn-avatar-ph{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--status-green-text); }
.fn-avatar-ph{ display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:.85rem; }
.fn-pilot-name{ font-size:.72rem; font-weight:700; margin-top:.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.fn-pilot-site{ font-size:.64rem; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.dirs-overlay{ position:fixed; inset:0; z-index:500; display:flex; align-items:flex-start; justify-content:center; padding-top:15vh; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.dirs-sheet{ background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); width:calc(100% - 2rem); max-width:380px; padding:1.3rem 1rem 1.5rem; }
.dirs-title{ font-size:1rem; font-weight:800; color: var(--text); text-align:center; margin-bottom:1rem; }
.dirs-btn{ display:flex; align-items:center; gap:.85rem; width:100%; padding:.75rem 1rem; border:1.5px solid var(--card-border); background:transparent; border-radius: var(--radius-sm); font-size:.92rem; font-weight:600; color: var(--text); cursor:pointer; margin-bottom:.5rem; text-decoration:none; }
.dirs-btn:hover{ border-color: var(--accent); }
.dirs-btn-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background: var(--bg); }
.dirs-btn-icon .icon{ color: var(--accent); }

.site-hero-photo{ width:100%; max-height:280px; overflow:hidden; border-radius: var(--radius); margin-bottom:1.4rem; background: var(--photo-placeholder); }
.site-hero-photo img{ width:100%; height:100%; max-height:280px; object-fit:cover; display:block; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--card); color: var(--text); }

/* The Flying Sites map popup reuses renderCard()'s full site-card markup
   (logo, membership badge, disciplines/engines, stats, actions) instead
   of a plain name/flight-count string — these three rules strip
   Leaflet's own default popup padding/radius so that card sits flush,
   with its own border-radius doing the work instead of stacking two. */
.site-popup-wrap .leaflet-popup-content-wrapper{ padding:0; border-radius: var(--radius); overflow:hidden; }
.site-popup-wrap .leaflet-popup-content{ margin:0; width:280px !important; }
.site-popup-wrap .site-card{ margin-bottom:0; border:none; }

@media (max-width: 720px){
  .site-stats{ padding-left:1rem; }
  .sites-map-panel{ height:70vh; }
}

/* ── Leaderboard ──────────────────────────────────────────────────── */
.lb-controls{ display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; }
.lb-podium{ display:flex; align-items:flex-end; justify-content:center; gap:.6rem; margin: 1.6rem 0 2rem; }
.lb-podium-slot{ display:flex; flex-direction:column; align-items:center; flex:1; max-width:150px; cursor:default; }
.lb-medal{ font-size:1.7rem; margin-bottom:.15rem; }
.lb-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:3px solid var(--card-border); display:block; }
.lb-avatar-ph{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:1.05rem; }
.lb-name{ font-size:.82rem; font-weight:700; color:var(--text); margin-top:.5rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lb-name.me{ color: var(--accent-2); }
.lb-stat{ font-size:.85rem; font-weight:800; color:var(--text-dim); margin-top:.15rem; margin-bottom:.5rem; }
.lb-step{ width:100%; border-radius:10px 10px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:.5rem; }
.lb-step span{ font-size:1.5rem; font-weight:900; color:rgba(255,255,255,.92); text-shadow:0 2px 6px rgba(0,0,0,.3); }
.lb-step-1{ height:88px; background:linear-gradient(170deg,#ffd76a,#e2963a); }
.lb-step-2{ height:62px; background:linear-gradient(170deg,#dfe3ea,#a7adba); }
.lb-step-3{ height:44px; background:linear-gradient(170deg,#e3ad82,#a4643a); }

.lb-list{ display:flex; flex-direction:column; gap:.5rem; }
.lb-row{ display:flex; align-items:center; gap:.85rem; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:.7rem 1rem; }
.lb-row.me{ border-color: var(--accent); background: rgba(79,172,254,.08); }
.lb-rank{ font-weight:800; color:var(--text-faint); min-width:22px; text-align:center; }
.lb-rank.top10{ color:var(--text); }
.lb-row-av{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }
.lb-row-av-ph{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:.82rem; flex-shrink:0; }
.lb-row-info{ flex:1; min-width:0; }
.lb-row-name{ font-weight:700; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row-name.me{ color: var(--accent-2); }
.lb-row-sub{ font-size:.76rem; color: var(--text-faint); margin-top:.1rem; }
.lb-row-primary{ font-weight:800; color: var(--text); text-align:right; white-space:nowrap; }
.lb-tab-gps{ display:inline-flex; align-items:center; gap:.3rem; }
.lb-tab-gps .icon{ width:14px; height:14px; }
.lb-gps-badge{
  display:flex; align-items:center; gap:.25rem; font-size:.62rem; font-weight:700; color: var(--accent);
  background: rgba(79,172,254,.12); border:1px solid var(--accent); border-radius:20px; padding:.1rem .5rem; margin-bottom:.4rem;
}
.lb-gps-badge .icon{ width:10px; height:10px; }

/* ── Model Database (GMDB) ────────────────────────────────────────── */
.gmdb-stats-strip{ display:flex; gap:.8rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.gmdb-stat-chip{ flex:1; min-width:110px; background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.7rem 1rem; text-align:center; }
.gmdb-stat-chip .num{ display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color: var(--text); }
.gmdb-stat-chip .lbl{ font-size:.68rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.gmdb-filters{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem; margin-bottom:1.2rem; }
.gmdb-card-meta{ display:flex; gap:.9rem; padding-top:.5rem; margin-top:.5rem; border-top:1px solid var(--card-border); font-size:.78rem; color: var(--text-faint); }
.gmdb-card-meta span{ display:inline-flex; align-items:center; gap:.25rem; }
.gmdb-card-owner{ font-size:.74rem; color: var(--text-faint); }

.comment-thread{ display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; }
.comment-item{ display:flex; gap:.7rem; }
.comment-av{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }
.comment-av-ph{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; color:#04101f; flex-shrink:0; }
.comment-body{ flex:1; min-width:0; }
.comment-author{ font-weight:700; font-size:.85rem; color: var(--text); }
.comment-text{ font-size:.86rem; color: var(--text-dim); margin-top:.15rem; }
.comment-meta{ font-size:.72rem; color: var(--text-faint); margin-top:.3rem; }
.comment-meta button{ background:none; border:none; color: var(--text-faint); font-size:.72rem; font-weight:700; cursor:pointer; padding:0; }
.comment-meta button:hover{ color: var(--accent-2); }
.comment-replies{ margin-top:.7rem; padding-left:1rem; border-left:2px solid var(--card-border); display:flex; flex-direction:column; gap:.7rem; }
.comment-form{ display:flex; gap:.6rem; margin-top:.4rem; }
.comment-form input{ flex:1; padding:.6rem .8rem; border-radius: var(--radius-sm); border:1.5px solid var(--card-border); background: var(--card); color: var(--text); font-size:.86rem; font-family: var(--font-body); }
.comment-form input:focus{ outline:none; border-color: var(--accent); }

@media (max-width: 720px){
  .gmdb-filters{ grid-template-columns:1fr 1fr; }
}

/* ── Social Wall ──────────────────────────────────────────────────── */
.mention-tag{ color: var(--accent-2); font-weight:700; }
.mention-box{
  position:absolute; z-index:950; max-height:220px; overflow-y:auto;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
.mention-box-row{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; cursor:pointer; font-size:.85rem; font-weight:600;
}
.mention-box-row:hover{ background: rgba(255,255,255,.06); }
.mention-box-row img{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mention-box-ph{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:.68rem;
}
.sw-compose{ max-width:100%; }
.sw-compose-text{
  width:100%; min-height:70px; padding:.78rem .9rem; border-radius: var(--radius-sm);
  border:1.5px solid var(--card-border); background: var(--card); color: var(--text);
  font-size:.95rem; font-family: var(--font-body); resize:vertical;
}
.sw-compose-text:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,172,254,.18); }
.sw-compose-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-top:.7rem; gap:.7rem; }
.sw-photo-btn{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color: var(--text-dim); cursor:pointer; }
.sw-photo-btn:hover{ color: var(--accent-2); }
.sw-photo-btn .icon{ width:16px; height:16px; }

.sw-post{ background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); padding:1.1rem; margin-bottom:1rem; }
.sw-post-head{ display:flex; align-items:center; gap:.7rem; }
.sw-avatar, .sw-avatar-ph{ width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.sw-avatar-ph{ display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:.9rem; }
.sw-post-headinfo{ flex:1; min-width:0; }
.sw-post-author{ font-weight:700; font-size:.92rem; color: var(--text); }
.sw-post-time{ font-size:.74rem; color: var(--text-faint); }
.sw-post-owner-actions{ display:flex; gap:.3rem; flex-shrink:0; }
.sw-icon-btn{ background:none; border:none; cursor:pointer; padding:.35rem; color: var(--text-faint); border-radius:6px; display:flex; }
.sw-icon-btn:hover{ color: var(--text); background: rgba(255,255,255,.05); }

.sw-flight-card{ display:flex; align-items:center; gap:.7rem; background: rgba(79,172,254,.08); border:1px solid rgba(79,172,254,.22); border-radius: var(--radius-sm); padding:.6rem .8rem; margin-top:.7rem; }
.sw-flight-photo{ width:44px; height:44px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.sw-flight-photo-ph{ display:flex; align-items:center; justify-content:center; background: var(--photo-placeholder); color: var(--text-faint); }
.sw-flight-photo-ph .icon{ width:20px; height:20px; }
.sw-flight-info{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.sw-flight-model, .sw-flight-site{ display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700; color: var(--accent-2); text-decoration:none; width:fit-content; }
.sw-flight-model:hover, .sw-flight-site:hover{ text-decoration:underline; }
.sw-flight-model .icon, .sw-flight-site .icon{ width:13px; height:13px; }
.sw-flight-duration{ font-size:.76rem; color: var(--text-faint); }
.sw-welcome-card{ display:flex; align-items:center; gap:.7rem; background: var(--status-gold-bg); border:1px solid rgba(246,196,69,.35); border-radius: var(--radius-sm); padding:.6rem .8rem; margin-top:.7rem; }
.sw-welcome-card .icon{ width:22px; height:22px; color: var(--status-gold-text); flex-shrink:0; }
.sw-welcome-card-text{ font-size:.86rem; font-weight:600; color: var(--status-gold-text); }

.sw-post-body{ margin-top:.7rem; font-size:.92rem; line-height:1.55; color: var(--text); }
.sw-post-body p{ margin:0; color: var(--text); }

.sw-edit-box textarea{
  width:100%; min-height:70px; padding:.7rem .85rem; border-radius: var(--radius-sm);
  border:1.5px solid var(--accent); background: var(--card); color: var(--text);
  font-size:.9rem; font-family: var(--font-body); resize:vertical; margin-top:.7rem;
}
.sw-edit-actions{ display:flex; gap:.5rem; margin-top:.5rem; }

.sw-yt{ position:relative; width:100%; padding-top:56.25%; margin-top:.7rem; border-radius: var(--radius-sm); overflow:hidden; background:#000; }
.sw-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.sw-images{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; margin-top:.7rem; border-radius: var(--radius-sm); overflow:hidden; }
.sw-images img{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; aspect-ratio:1; }
.sw-images.count-1{ grid-template-columns:1fr; }
.sw-images.count-1 img{ aspect-ratio:16/9; }
.sw-images.count-3 img:first-child{ grid-column:1/3; aspect-ratio:21/9; }

.sw-actions{ display:flex; gap:.4rem; margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--card-border); }
.sw-action-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem; border-radius: var(--radius-sm); border:none; background:transparent;
  color: var(--text-dim); font-weight:700; font-size:.82rem; cursor:pointer; transition: color .12s, background .12s;
}
.sw-action-btn:hover{ background: rgba(255,255,255,.04); color: var(--text); }
.sw-action-btn.active{ color: var(--accent-2); }
.sw-action-btn .icon{ width:17px; height:17px; }
.sw-action-btn.active .icon{ fill: currentColor; }

.sw-comments{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--card-border); }

.sw-lightbox{ position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.sw-lightbox img{ max-width:100%; max-height:100%; border-radius: var(--radius-sm); }

/* ── Photo carousel (model/site cover + gallery combined) ───────────── */
.photo-carousel{ position:relative; width:100%; max-height:300px; border-radius: var(--radius); overflow:hidden; margin-bottom:1.4rem; background: var(--photo-placeholder); }
.photo-carousel-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  height:300px; scrollbar-width:none;
}
.photo-carousel-track::-webkit-scrollbar{ display:none; }
.photo-carousel-track img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:start; cursor:zoom-in; display:block; }
.photo-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  background: rgba(10,15,28,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition: background .15s;
}
.photo-carousel-arrow:hover{ background: var(--accent-strong); }
.photo-carousel-arrow.prev{ left:.6rem; }
.photo-carousel-arrow.prev .icon{ transform:rotate(180deg); }
.photo-carousel-arrow.next{ right:.6rem; }
.photo-carousel-dots{ position:absolute; bottom:.7rem; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; z-index:2; }
.photo-carousel-dot{ width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.5); border:none; padding:0; cursor:pointer; transition: background .15s, transform .15s; }
.photo-carousel-dot.active{ background:#fff; transform:scale(1.3); }

.fs-success{ text-align:center; padding:1.5rem 0 1.8rem; }
.fs-success h1{ font-family: var(--font-display); font-size:1.5rem; margin:.9rem 0 .3rem; }
.fs-success .sub{ max-width:380px; margin:0 auto; }

/* ── Maintenance ──────────────────────────────────────────────────── */
.status-badge.maint-sev-critical{ background: var(--status-red-bg); color: var(--status-red-text); }
.status-badge.maint-sev-wear{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.status-badge.maint-sev-cosmetic{ background: var(--status-green-bg); color: var(--status-green-text); }

.maint-attention-row{ display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:1.2rem; -webkit-overflow-scrolling:touch; }
.maint-attention-card{
  flex:0 0 150px; background: var(--card); border:1px solid var(--card-border); border-left:3px solid var(--text-faint);
  border-radius: var(--radius-sm); padding:.7rem .8rem; text-decoration:none; color: var(--text);
}
.maint-attention-card .icon{ color: var(--text-faint); margin-bottom:.4rem; }
.maint-attention-card.maint-urgency-overdue{ border-left-color: var(--status-red-text); }
.maint-attention-card.maint-urgency-overdue .icon{ color: var(--status-red-text); }
.maint-attention-card.maint-urgency-due_soon{ border-left-color: var(--status-gold-text); }
.maint-attention-card.maint-urgency-due_soon .icon{ color: var(--status-gold-text); }
.maint-attention-title{ font-weight:700; font-size:.84rem; margin-bottom:.15rem; }
.maint-attention-model{ font-size:.72rem; color: var(--text-faint); }

.maint-model-group{ margin-bottom:1.4rem; }
.maint-model-header{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.maint-model-avatar, .maint-model-avatar-ph{ width:28px; height:28px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.maint-model-avatar-ph{ display:flex; align-items:center; justify-content:center; background: var(--photo-placeholder); color: var(--text-faint); }
.maint-model-name{ font-weight:700; font-size:.92rem; color: var(--text); }

.maint-card{
  display:block; background: var(--card); border:1px solid var(--card-border); border-left:3px solid var(--text-faint);
  border-radius: var(--radius-sm); padding:.75rem .9rem; margin-bottom:.5rem; text-decoration:none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.maint-card:hover{ border-color: var(--accent); transform: translateX(2px); }
.maint-card.maint-urgency-overdue{ border-left-color: var(--status-red-text); }
.maint-card.maint-urgency-due_soon{ border-left-color: var(--status-gold-text); }
.maint-card.maint-urgency-ok{ border-left-color: var(--status-green-text); }
.maint-card-title{ font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.maint-card-meta{ display:flex; gap:.8rem; margin-top:.35rem; font-size:.76rem; color: var(--text-faint); flex-wrap:wrap; }

.maint-progress{ margin-bottom:.9rem; }
.maint-progress:last-child{ margin-bottom:0; }
.maint-progress-label{ font-size:.8rem; color: var(--text-dim); margin-bottom:.3rem; }
.maint-progress-track{ height:8px; border-radius:4px; background: var(--card-border); overflow:hidden; }
.maint-progress-fill{ height:100%; border-radius:4px; }
.maint-progress-fill.maint-urgency-overdue{ background: var(--status-red-text); }
.maint-progress-fill.maint-urgency-due_soon{ background: var(--status-gold-text); }
.maint-progress-fill.maint-urgency-ok{ background: var(--status-green-text); }

.maint-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem; margin-top:.4rem; }
.maint-photo-remove{ display:flex; flex-direction:column; gap:.3rem; cursor:pointer; }
.maint-photo-remove img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius: var(--radius-sm); }
.maint-photo-remove span{ font-size:.68rem; color: var(--text-faint); display:flex; align-items:center; gap:.25rem; }

.batt-retired{ opacity:.55; }
.status-badge.batt-retired-badge{ background: var(--card-border); color: var(--text-faint); }
#battList{ max-height:320px; overflow-y:auto; border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:0 .4rem; }
.batt-pick-row{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .5rem;
  border-bottom:1px solid var(--card-border); font-size:.85rem; border-radius: var(--radius-sm);
}
.batt-pick-row:last-child{ border-bottom-color: transparent; }
.batt-pick-row.batt-added{ background: rgba(79,172,254,.08); border-bottom-color: transparent; }
.batt-pick-info{ flex:1; min-width:0; }
.batt-pick-name{ font-weight:700; display:block; }
.batt-pick-sub{ color: var(--text-faint); font-size:.76rem; }
.batt-pick-row input[type="number"]{ padding:.4rem .5rem; font-size:.82rem; display:none; }
.batt-pick-row.batt-added input[type="number"]{ display:inline-block; }
.batt-toggle .icon{ width:14px; height:14px; }

.site-record-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); }
.site-record-val{ font-family: var(--font-display); font-size:1.6rem; font-weight:800; color: var(--text); margin:.15rem 0 .3rem; }
.bar-chart{ display:flex; align-items:flex-end; gap:.35rem; height:90px; }
.bar-chart-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.bar-chart-bar{ width:100%; background: var(--card-border); border-radius:3px 3px 0 0; min-height:3px; }
.bar-chart-bar-peak{ background: var(--status-gold-text); }
.bar-chart-lbl{ font-size:.62rem; color: var(--text-faint); margin-top:.3rem; white-space:nowrap; }

.pilot-modal{ display:none; position:fixed; inset:0; z-index:700; align-items:flex-start; justify-content:center; padding-top:12vh; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.pilot-modal.open{ display:flex; }
.pilot-modal-card{ position:relative; background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); padding:1.6rem; width:92%; max-width:380px; max-height:80vh; overflow-y:auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.pilot-modal-close{ position:absolute; top:.8rem; right:.8rem; background:none; border:none; color: var(--text-faint); cursor:pointer; padding:.3rem; display:flex; }
.pilot-modal-close .icon{ width:18px; height:18px; }
.pilot-card-loading{ text-align:center; padding:2rem 0; color: var(--text-faint); }

/* Document viewer — a real in-app modal for opening a document's file,
   with its own always-visible header/close bar. Documents used to open
   via a plain target="_blank" link, which is fine in a normal browser tab
   but in an installed PWA (standalone display mode) a PDF/image link
   takes over the ENTIRE screen with zero browser chrome — no tabs, no
   back button, nothing — since standalone mode strips all of that by
   design. This keeps the file inside the app's own UI instead. */
.doc-viewer-modal{ display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.8); }
.doc-viewer-modal.open{ display:flex; flex-direction:column; }
.doc-viewer-header{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.8rem 1rem; padding-top:calc(.8rem + env(safe-area-inset-top, 0));
  background: var(--card); border-bottom:1px solid var(--card-border); flex-shrink:0;
}
.doc-viewer-title{ font-weight:700; font-size:.88rem; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-viewer-actions{ display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.doc-viewer-actions a{ color: var(--text-dim); display:flex; padding:.4rem; }
.doc-viewer-close{ background:none; border:none; color: var(--text); cursor:pointer; padding:.4rem; display:flex; flex-shrink:0; }
.doc-viewer-body{ flex:1; overflow:auto; background:#1c1c1c; display:flex; align-items:center; justify-content:center; }
.doc-viewer-body iframe{ width:100%; height:100%; border:none; }
.doc-viewer-body img{ max-width:100%; max-height:100%; object-fit:contain; }
.doc-viewer-fallback{ text-align:center; color:#fff; padding:2rem; }
.doc-viewer-fallback p{ color:#c8ccd4; margin-bottom:1.2rem; }

.embed-modal{ display:none; position:fixed; inset:0; z-index:700; align-items:flex-start; justify-content:center; padding-top:8vh; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); overflow-y:auto; }
.embed-modal.open{ display:flex; }
.embed-modal-card{ position:relative; background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius); padding:1.6rem; width:92%; max-width:460px; max-height:82vh; overflow-y:auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); margin-bottom:2rem; }
.embed-modal-controls{ display:flex; gap:.6rem; margin:1rem 0; }
.embed-modal-snippet{ width:100%; font-family:monospace; font-size:.78rem; padding:.6rem; border-radius: var(--radius-sm); border:1.5px solid var(--card-border); background: var(--bg-panel); color: var(--text); resize:vertical; }
.embed-modal-preview{ margin-top:1.1rem; border:1px solid var(--card-border); border-radius: var(--radius-sm); overflow:hidden; background: var(--bg-panel); }
.embed-modal-stats{ margin-top:.9rem; font-size:.78rem; color: var(--text-faint); line-height:1.5; }
.avatar-badge-wrap{ position:relative; display:inline-block; line-height:0; flex-shrink:0; }
.supporter-star{
  position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
  background:#f5c518; border:2px solid var(--bg); box-shadow:0 1px 2px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.supporter-star-icon{ width:60%; height:60%; color:#3a2a00; }
.pilot-card-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; margin-bottom:1rem; }
.pilot-card-avatar{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid var(--card-border); }
.pilot-card-avatar-ph{ width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101f; font-weight:800; font-size:1.4rem; }
.pilot-card-name{ font-family: var(--font-display); font-size:1.15rem; font-weight:800; color: var(--text); }
.pilot-follow-btn{ background: var(--accent); color:#04101f; border:none; padding:.5rem 1.1rem; }
.pilot-follow-btn.following{ background: var(--status-green-bg); color: var(--status-green-text); }
.pilot-card-longest{ position:relative; border-radius: var(--radius-sm); overflow:hidden; height:110px; margin:.8rem 0; }
.pilot-card-longest-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.pilot-card-longest-photo-ph{ display:flex; align-items:center; justify-content:center; background: var(--photo-placeholder); color: var(--text-faint); }
.pilot-card-longest-overlay{ position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent); color:#fff; }
.pilot-card-longest-lbl{ font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }
.pilot-card-longest-name{ font-weight:700; font-size:.88rem; }
[data-pilot]{ cursor:pointer; }

.duration-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.duration-chip{
  background: rgba(255,255,255,.04); border:1.5px solid var(--card-border); color: var(--text-dim);
  border-radius:20px; padding:.4rem .8rem; font-size:.8rem; font-weight:600; cursor:pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.duration-chip:hover{ color: var(--text); border-color: var(--accent); }
.duration-chip.active{ color: var(--accent-2); border-color: var(--accent); background: rgba(79,172,254,.14); }
.duration-mode-toggle{ display:inline-flex; gap:.2rem; background: rgba(255,255,255,.04); border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.2rem; margin-bottom:.6rem; }
.duration-mode-btn{ background:none; border:none; color: var(--text-faint); font-size:.76rem; font-weight:700; padding:.35rem .7rem; border-radius:6px; cursor:pointer; }
.duration-mode-btn.active{ background: var(--accent); color:#04101f; }

/* ── Graveyard ────────────────────────────────────────────────────── */
.grave-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:1.1rem; }
.grave-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: var(--card); border:1px solid var(--card-border);
  border-radius: 50% 50% var(--radius) var(--radius) / 14% 14% var(--radius) var(--radius);
  overflow:hidden; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.grave-card:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.22); }
.grave-card-photo{ height:150px; background: var(--photo-placeholder); }
.grave-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(65%) brightness(.82) contrast(1.05); }
.grave-card-photo-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--text-faint); opacity:.5; }
.grave-card-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; text-align:center; }
.grave-rip{ font-size:.62rem; letter-spacing:.2em; color: var(--text-faint); text-transform:uppercase; }
.grave-card-name{ font-family: var(--font-display); font-weight:700; font-size:1rem; }
.grave-card-meta{ font-size:.76rem; color: var(--text-faint); }
.grave-cause-badge{ display:inline-flex; align-self:center; gap:.3rem; font-size:.7rem; font-weight:600; padding:.2rem .55rem; border-radius:20px; background: rgba(255,255,255,.05); color: var(--text-dim); }
.grave-card-epitaph{ font-style:italic; font-size:.8rem; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.grave-card-stats{ display:flex; justify-content:center; gap:.9rem; margin-top:.3rem; padding-top:.6rem; border-top:1px solid var(--card-border); font-size:.78rem; color: var(--text-faint); }
.grave-flower-btn{ display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.grave-flower-btn.active{ color: var(--accent-2); }
.grave-flower-btn .icon{ width:14px; height:14px; }
.grave-epitaph{ font-style:italic; color: var(--text-dim); max-width:560px; padding:.9rem 0; }

.most-mourned-strip{ display:flex; gap:.9rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:1.4rem; }
.most-mourned-item{ flex:0 0 120px; text-decoration:none; color:inherit; text-align:center; position:relative; }
.most-mourned-item img, .most-mourned-ph{ width:100%; height:100px; object-fit:cover; border-radius: var(--radius-sm); filter: grayscale(55%) brightness(.85); }
.most-mourned-ph{ display:flex; align-items:center; justify-content:center; background: var(--photo-placeholder); color: var(--text-faint); }
.most-mourned-medal{ position:absolute; top:-.4rem; left:-.2rem; font-size:1.3rem; filter:none; }
.most-mourned-name{ font-size:.76rem; font-weight:700; margin-top:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.most-mourned-flowers{ font-size:.7rem; color: var(--text-faint); display:flex; align-items:center; justify-content:center; gap:.25rem; margin-top:.15rem; }
.most-mourned-flowers .icon{ width:12px; height:12px; }

@media (max-width:720px){
  .sw-compose-toolbar{ flex-wrap:wrap; }
}

/* ── Hangar dashboard (widgets) ──────────────────────────────────────── */
.dash-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap:1.1rem; align-items:stretch; }
@media (max-width:960px){
  .dash-grid{ grid-template-columns: 1fr; }
  .dash-grid .dash-widget{ grid-column: span 1 !important; grid-row: span 1 !important; }
  .dash-resize-handle{ display:none; }
}

.dash-widget{
  position:relative;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius);
  padding:1.1rem 1.2rem 1.3rem; box-shadow: 0 10px 26px rgba(0,0,0,.14);
  transition: opacity .15s, transform .15s;
  display:flex; flex-direction:column; overflow:hidden;
}
.dash-widget-floating{
  position:fixed; z-index:1000; pointer-events:none; transition:none !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.4); cursor:grabbing;
}
.dash-widget-placeholder{
  background: rgba(255,255,255,.02); border:2px dashed var(--card-border); box-shadow:none;
}
.dash-widget-resizing{ box-shadow: 0 0 0 2px var(--accent), 0 22px 44px rgba(0,0,0,.4); }
.dash-widget-fullscreen{
  position:fixed !important; inset:2.4rem; z-index:1200;
  grid-column:auto !important; grid-row:auto !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.dash-fullscreen-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:1190; }
body.dash-fullscreen-open{ overflow:hidden; }
/* Reordering/resizing a widget that's currently a fixed full-viewport overlay doesn't mean anything, so those controls step aside while it's up. */
.dash-widget-fullscreen .dash-resize-handle, .dash-widget-fullscreen .dash-drag-handle{ display:none; }
@media (max-width: 640px){
  .dash-widget-fullscreen{ inset:.6rem; }
}
.dash-widget-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; flex-shrink:0; }
.dash-widget-head-left{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.dash-widget-head-actions{ display:flex; align-items:center; gap:.55rem; flex-shrink:0; }
.dash-widget-body{ flex:1; overflow:auto; min-height:0; }
.dash-drag-handle{
  cursor:grab; color: var(--text-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px;
  background: rgba(255,255,255,.05); border:1px solid var(--card-border);
  transition: color .12s, background .12s, border-color .12s, transform .12s;
}
.dash-drag-handle .icon{ width:15px; height:15px; }
.dash-drag-handle:hover{ color: var(--accent-2); background: rgba(79,172,254,.14); border-color: rgba(79,172,254,.4); transform: scale(1.06); }
.dash-drag-handle:active{ cursor:grabbing; transform: scale(.97); }
body.dash-dragging-active{ user-select:none; -webkit-user-select:none; cursor:grabbing; }
.dash-widget-head h3{ display:flex; align-items:center; gap:.4rem; font-family: var(--font-display); font-size:.95rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-widget-remove, .dash-widget-settings, .dash-widget-fullscreen-btn{ background:none; border:none; color: var(--text-faint); cursor:pointer; padding:.2rem; display:flex; border-radius:6px; transition: color .12s, background .12s; }
.dash-widget-remove:hover, .dash-widget-settings:hover, .dash-widget-fullscreen-btn:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.dash-widget-settings.spinning .icon{ animation: dashSpin .5s ease; }
.dash-fs-icon-shrink{ display:none; }
.dash-widget-fullscreen .dash-fs-icon-expand{ display:none; }
.dash-widget-fullscreen .dash-fs-icon-shrink{ display:inline-flex; }
@keyframes dashSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(180deg); } }
.dash-widget-link{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.8rem; font-size:.8rem; font-weight:600; color: var(--accent-2); text-decoration:none; flex-shrink:0; }
.dash-widget-link:hover{ text-decoration:underline; }

.weather-current{ display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; }
.weather-icon{ width:2.4rem; height:2.4rem; color: var(--accent); flex-shrink:0; }
.weather-temp{ font-family: var(--font-display); font-size:1.6rem; font-weight:800; line-height:1; }
.weather-desc{ font-size:.82rem; color: var(--text-dim); margin-top:.15rem; }
.weather-meta{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color: var(--text-faint); }
.weather-meta span{ display:inline-flex; align-items:center; gap:.3rem; }
.weather-forecast{ display:flex; gap:.4rem; overflow-x:auto; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--card-border); }
.weather-day{ flex:1; min-width:2.6rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
.weather-day-label{ font-size:.72rem; font-weight:700; color: var(--text-faint); text-transform:uppercase; }
.weather-day .icon{ width:1.3rem; height:1.3rem; color: var(--accent); }
.weather-day-temps{ font-size:.78rem; font-weight:700; }
.weather-day-low{ color: var(--text-faint); font-weight:500; }
.weather-day-precip{ font-size:.68rem; color: var(--accent-2); font-weight:600; }
.weather-day-wind{ font-size:.68rem; color: var(--text-faint); display:flex; align-items:center; gap:.15rem; white-space:nowrap; }
.weather-day-wind .icon{ width:11px; height:11px; }
.weather-flyability{ margin-left:auto; align-self:flex-start; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.25rem .55rem; border-radius:20px; white-space:nowrap; cursor:default; }
.weather-flyability-good{ background: var(--status-green-bg); color: var(--status-green-text); }
.weather-flyability-marginal{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.weather-flyability-poor{ background: var(--status-red-bg); color: var(--status-red-text); }
.weather-day-dot{ width:7px; height:7px; border-radius:50%; display:block; }
.weather-day-dot.weather-flyability-good{ background: var(--status-green-text); }
.weather-day-dot.weather-flyability-marginal{ background: var(--status-gold-text); }
.weather-day-dot.weather-flyability-poor{ background: var(--status-red-text); }

.dash-resize-handle{
  position:absolute; right:2px; bottom:2px; width:18px; height:18px; cursor:nwse-resize;
  background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--card-border) 45%, var(--card-border) 55%, transparent 55%, transparent 65%, var(--card-border) 65%, var(--card-border) 75%, transparent 75%);
  border-radius:0 0 var(--radius) 0; opacity:.6; transition: opacity .12s;
}
.dash-widget:hover .dash-resize-handle{ opacity:1; }

.dash-model-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap:.7rem; }
.dash-model-card{ text-decoration:none; color:inherit; text-align:center; }
.dash-model-photo{
  aspect-ratio:1; border-radius: var(--radius-sm); overflow:hidden; background: var(--photo-placeholder);
  display:flex; align-items:center; justify-content:center; margin-bottom:.35rem;
}
.dash-model-photo img{ width:100%; height:100%; object-fit:cover; }
.dash-model-photo .icon{ width:26px; height:26px; color: var(--text-faint); }
.dash-model-name{ font-size:.76rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dash-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.dash-stats-grid div{ text-align:center; }
.dash-stats-grid strong{ display:block; font-family: var(--font-display); font-size:1.4rem; }
.dash-stats-grid span{ font-size:.72rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

.dash-list{ display:flex; flex-direction:column; gap:.5rem; }
.dash-list-row{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit; padding:.4rem; margin:-.4rem; border-radius: var(--radius-sm); transition: background .12s; }
.dash-list-row:hover{ background: rgba(255,255,255,.04); }
.dash-list-row-info{ min-width:0; flex:1; text-decoration:none; color:inherit; display:block; }
.dash-list-row-title{ font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; color:inherit; }
.dash-list-row-sub{ font-size:.74rem; color: var(--text-faint); display:flex; align-items:center; gap:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-list-row-sub .icon{ width:12px; height:12px; flex-shrink:0; }
.dash-list-row-thumb{ width:44px; height:44px; border-radius: var(--radius-sm); object-fit:cover; flex-shrink:0; }

.getting-started-check{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border: 1.5px solid var(--card-border); color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.getting-started-row.done .getting-started-check{ background: var(--accent-2); border-color: var(--accent-2); color:#fff; }
.getting-started-row.done .dash-list-row-title{ color: var(--text-faint); text-decoration: line-through; }
.getting-started-complete{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1rem 0; color: var(--text-dim); }
.getting-started-complete .icon{ color: var(--accent-2); }
.getting-started-complete p{ margin:0; font-size:.88rem; max-width:320px; }

.notif-row-link{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit; flex:1; min-width:0; }
.notif-row-delete{ flex-shrink:0; background:none; border:none; padding:.3rem; margin:0; cursor:pointer; color: var(--text-faint); border-radius: var(--radius-sm); display:flex; opacity:.55; transition: opacity .12s, color .12s, background .12s; }
.notif-row-delete .icon{ width:15px; height:15px; }
.notif-row:hover .notif-row-delete, .notif-row-delete:focus-visible{ opacity:1; }
.notif-row-delete:hover{ color: var(--status-red-text); background: rgba(255,255,255,.06); }

.admin-tool-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:1rem; margin-top:1.4rem; }
.admin-tool-card{
  position:relative; display:flex; flex-direction:column; gap:.4rem; padding:1.2rem;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius);
  text-decoration:none; color: var(--text); transition: border-color .15s, transform .15s;
}
.admin-tool-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.admin-tool-card .icon{ width:22px; height:22px; color: var(--accent); }
.admin-tool-card-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; }
.admin-tool-card-desc{ font-size:.8rem; color: var(--text-faint); line-height:1.4; }
.admin-tool-card-badge{ position:absolute; top:.9rem; right:.9rem; }
.dash-library-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:.7rem; margin-top:1rem; }
.dash-library-item{
  border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.9rem .8rem; cursor:pointer;
  transition: border-color .12s, background .12s; text-align:center;
}
.dash-library-item:hover{ border-color: var(--accent); background: rgba(79,172,254,.08); }
.dash-library-item .icon{ width:20px; height:20px; color: var(--accent); margin-bottom:.4rem; }
.dash-library-item-title{ font-size:.82rem; font-weight:700; margin-bottom:.2rem; }
.dash-library-item-desc{ font-size:.7rem; color: var(--text-faint); line-height:1.4; }

/* ── Model components ────────────────────────────────────────────────── */
.status-badge.component-type-badge{ background: var(--card-border); color: var(--text-dim); }
.component-row{ flex-wrap:wrap; }
.component-row-info{ min-width:0; }
.component-row-actions{ display:flex; gap:.4rem; flex-shrink:0; }
.component-row-actions form{ display:inline-flex; }
.component-row-retired{ opacity:.72; }

/* ── Flight Stats ─────────────────────────────────────────────────────── */
.heatmap-wrap{ overflow-x:auto; padding-bottom:.3rem; }
.heatmap-months{ display:grid; grid-template-rows:14px; font-size:.62rem; color: var(--text-faint); margin-bottom:2px; }
.heatmap-grid{ display:grid; grid-template-rows:repeat(7,11px); gap:3px; }
.heatmap-cell{ width:11px; height:11px; border-radius:2px; background: var(--card-border); cursor:pointer; }
.heatmap-cell.heatmap-empty{ background:transparent; cursor:default; }
.heatmap-cell.heatmap-level-1{ background: rgba(79,172,254,.32); }
.heatmap-cell.heatmap-level-2{ background: rgba(79,172,254,.56); }
.heatmap-cell.heatmap-level-3{ background: rgba(79,172,254,.8); }
.heatmap-cell.heatmap-level-4{ background: var(--accent); }
.heatmap-peek{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--card-border); }
.heatmap-peek-date{ font-weight:700; font-size:.82rem; margin-bottom:.4rem; }
.heatmap-peek-row{ font-size:.8rem; color: var(--text-dim); padding:.2rem 0; }

.model-share-row{ display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.model-share-row:last-child{ margin-bottom:0; }
.model-share-dot{ width:10px; height:10px; border-radius:50%; }
.model-share-name{ font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-share-count{ font-size:.76rem; color: var(--text-faint); white-space:nowrap; }
.model-share-bar{ grid-column:2 / span 2; height:5px; border-radius:3px; background: rgba(255,255,255,.06); overflow:hidden; }
.model-share-bar-fill{ height:100%; border-radius:3px; }

/* ── Plans page ───────────────────────────────────────────────────────── */
.plans-card-panel{ max-width:680px; }
.plans-card-current-btn{ cursor:default; opacity:.6; }
.plans-card-panel h2{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; margin:0 0 .35rem; display:flex; align-items:center; gap:.5rem; }
.plans-back-link{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; color: var(--text-faint); text-decoration:none; margin-bottom:1.2rem; }
.plans-back-link .icon{ transform:rotate(180deg); width:13px; height:13px; }
.plans-back-link:hover{ color: var(--text); }
.plans-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1.1rem; }

/* ── Release notes page ──────────────────────────────────────────────── */
.release-notes-panel{ max-width:600px; }
.release-note-card:last-child{ margin-bottom:0; }
.release-note-date{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:400; }
.release-note-headline{ font-weight:700; font-size:1rem; margin-bottom:.5rem; }
.release-note-items{ margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.4rem; color: var(--text-dim); font-size:.9rem; line-height:1.45; }

/* ── Wind Map widget ──────────────────────────────────────────────────── */
.wind-map-content{ display:flex; flex-direction:column; height:100%; }
.wind-map-canvas{ flex:1; min-height:210px; border-radius: var(--radius-sm); overflow:hidden; border:1.5px solid var(--card-border); background: var(--bg-panel); }
.wind-map-content .weather-meta, .wind-map-content .field-hint, .wind-map-content .weather-forecast{ flex-shrink:0; }
.wind-arrow-divicon{ background:none; border:none; }
.wind-arrow-wrap{ position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.wind-arrow-marker{
  position:relative; z-index:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:#fff; background: var(--accent); border-radius:50%; border:2.5px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.wind-arrow-marker svg{ width:22px; height:22px; }
.wind-arrow-pulse{
  position:absolute; z-index:1; width:40px; height:40px; border-radius:50%;
  background: var(--accent); opacity:.55;
  animation: wind-arrow-pulse 2.4s cubic-bezier(.2,.6,.4,1) infinite;
}
.wind-arrow-pulse-delay{ animation-delay:1.2s; }
@keyframes wind-arrow-pulse{
  0%   { transform: scale(1);   opacity:.55; }
  100% { transform: scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .wind-arrow-pulse{ animation:none; opacity:.25; }
}
.wind-arrow-mini{ display:flex; color: var(--accent); }
.wind-arrow-mini svg{ width:15px; height:15px; }

/* Live-traffic aircraft markers (OpenSky overlay, opt-in) — deliberately
   smaller and unanimated next to the wind arrow, so the map's one moving,
   pulsing focal point stays the wind, not a cluster of aircraft. */
.aircraft-divicon{ background:none; border:none; }
.aircraft-marker{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:#fff; background: var(--text-faint); border-radius:50%; border:1.5px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.aircraft-marker svg{ width:13px; height:13px; }

/* ── Announcing / legacy-migration page ──────────────────────────────── */
.announcing-panel{ max-width:640px; }
.announcing-panel .form-card p{ margin:0 0 .5rem; font-size:.9rem; color: var(--text-dim); line-height:1.5; }
.announcing-panel .form-card p:last-child{ margin-bottom:0; }
.announcing-legacy-card{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.announcing-warning-card{ border-color: var(--status-gold-text); background: var(--status-gold-bg); }
.migrate-steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.migrate-steps li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.9rem; color: var(--text-dim); line-height:1.4; }
.migrate-step-num{ flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:50%; background: var(--accent); color:#fff; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.plans-card{
  position:relative; background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius);
  padding:1.6rem 1.3rem; text-align:center; display:flex; flex-direction:column; gap:.5rem; align-items:center;
}
.plans-card-recommended{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.plans-card-legacy{ border-color: var(--status-gold-text); }
.plans-card-locked{ opacity:.55; border-color: var(--card-border); filter:grayscale(.4); }
.plans-card-locked .plans-card-badge-legacy{ background: var(--card-border); color: var(--text-faint); }
.plans-card-locked-btn{ cursor:default; opacity:.8; }
.plans-card-badge{
  position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background: var(--accent); color:#04101f;
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.25rem .7rem; border-radius:20px;
  white-space:nowrap; display:flex; align-items:center; gap:.25rem;
}
.plans-card-badge .icon{ width:11px; height:11px; }
.plans-card-badge-legacy{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.plans-card-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; margin-top:.4rem; }
.plans-card-price{ font-family: var(--font-display); font-size:1.9rem; font-weight:800; }
.plans-card-price span{ font-size:.7rem; font-weight:600; color: var(--text-faint); margin-left:.15rem; }
.plans-card-sub{ font-size:.72rem; color: var(--text-faint); line-height:1.4; margin-bottom:.3rem; }
.plans-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }

/* Messaging */
.msg-thread{
  display:flex; flex-direction:column; gap:.15rem; max-height:60vh; overflow-y:auto;
  padding:1rem; margin:1rem 0; border:1px solid var(--card-border); border-radius: var(--radius);
}
.msg-bubble-row{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:.6rem; max-width:75%; }
.msg-bubble-row.mine{ align-items:flex-end; align-self:flex-end; }
.msg-bubble{
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm);
  padding:.55rem .75rem; font-size:.88rem; line-height:1.4; white-space:pre-wrap; word-break:break-word;
}
.msg-bubble-row.mine .msg-bubble{ background: var(--accent); color:#04101f; border-color: var(--accent); }
.msg-bubble-time{ font-size:.68rem; color: var(--text-faint); margin-top:.2rem; padding:0 .2rem; }
.msg-compose{ display:flex; gap:.5rem; align-items:flex-end; }
.msg-compose textarea{ flex:1; min-height:2.6rem; max-height:8rem; resize:vertical; }

/* Flight Replay — full-bleed Cesium viewer (Phase 2a) */
body.replay-body{ margin:0; overflow:hidden; background:#000; color: var(--text); font-family: var(--font-body); }
#cesiumContainer{ position:fixed; inset:0; width:100%; height:100%; }
.replay-topbar{
  position:fixed; top:0; left:0; right:0; z-index:55; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1rem; background: var(--card); border-bottom:1px solid var(--card-border); box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.replay-topbar-title{ display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.replay-topbar-title strong{ font-family: var(--font-display); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.replay-topbar-title .sub{ font-size:.78rem; color: var(--text-faint); white-space:nowrap; }
.replay-topbar-actions{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.replay-topbar-left{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.replay-sidebar-backdrop{ position:fixed; inset:0; z-index:58; background:rgba(0,0,0,.5); }
.replay-sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:59; width:300px; max-width:85vw; background: var(--card);
  border-right:1px solid var(--card-border); box-shadow:2px 0 16px rgba(0,0,0,.4); transform:translateX(-100%);
  transition: transform .2s ease; display:flex; flex-direction:column;
}
.replay-sidebar.open{ transform:translateX(0); }
.replay-sidebar-header{
  display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-bottom:1px solid var(--card-border);
  font-family: var(--font-display); font-size:.95rem;
}
.replay-sidebar-header button{ background:none; border:none; color: var(--text-faint); cursor:pointer; display:flex; }
.replay-sidebar-body{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:1.1rem; }
.replay-sidebar-section-title{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); margin-bottom:.4rem; }
.replay-sidebar-stat-row{
  display:flex; justify-content:space-between; align-items:center; padding:.4rem .5rem; border-radius:6px; font-size:.82rem;
  color: var(--text); text-decoration:none; background: var(--card-border);
}
.replay-sidebar-stat-row + .replay-sidebar-stat-row{ margin-top:.3rem; }
.replay-sidebar-flight-row{
  display:flex; flex-direction:column; padding:.4rem .5rem; border-radius:6px; font-size:.8rem; color: var(--text);
  text-decoration:none; margin-top:.25rem;
}
.replay-sidebar-flight-row:hover{ background: var(--card-border); }
.replay-sidebar-flight-row.current{ background: rgba(79,172,254,.14); border:1px solid var(--accent); }
.replay-sidebar-flight-row .sub{ font-size:.7rem; color: var(--text-faint); }
.replay-sidebar-model-name{ font-size:.78rem; font-weight:700; margin-top:.6rem; }
.replay-sidebar-model-name .sub{ font-weight:400; color: var(--text-faint); }
.replay-topbar-btn{
  display:flex; align-items:center; gap:.3rem; height:36px; padding:0 .7rem; border-radius:8px;
  background:none; border:1px solid var(--card-border); color: var(--text); cursor:pointer; font-size:.8rem; font-weight:600;
}
.replay-topbar-btn .icon{ width:16px; height:16px; }
.replay-topbar-btn:hover{ border-color: var(--accent); color: var(--accent); }
#compareToggleBtn.replay-topbar-btn{ width:36px; padding:0; justify-content:center; }
.replay-compare-panel, .replay-info-menu{
  position:fixed; top:4.2rem; right:1rem; z-index:50; width:270px; max-height:70vh; overflow-y:auto;
  background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-sm);
  padding:.9rem 1rem; box-shadow:0 2px 16px rgba(0,0,0,.35); font-size:.85rem;
}
.replay-info-menu{ right:1rem; }
.replay-toggle-row{ display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font-size:.8rem; cursor:pointer; }
.replay-toggle-row .icon{ width:14px; height:14px; color: var(--text-faint); flex-shrink:0; }
.replay-menu-section{ padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid var(--card-border); }
.replay-menu-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.replay-menu-section-title{
  display:flex; align-items:center; gap:.4rem; font-family: var(--font-display); font-weight:700; font-size:.8rem;
  color: var(--accent); margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.03em;
}
.replay-menu-section-title .icon{ width:14px; height:14px; }
.replay-menu-select{
  width:100%; padding:.45rem .6rem; border-radius:6px; background: var(--card-border); border:1px solid var(--card-border);
  color: var(--text); font-size:.82rem;
}
.replay-cam-buttons{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; }
.replay-cam-btn{
  padding:.4rem .3rem; border-radius:6px; background: var(--card-border); border:1px solid var(--card-border);
  color: var(--text); cursor:pointer; font-size:.72rem; font-weight:600; text-align:center;
}
.replay-cam-btn:hover{ border-color: var(--accent); color: var(--accent); }
.replay-cam-btn.active{ background: var(--accent); border-color: var(--accent); color:#fff; }
.replay-rotate-row{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:.6rem; }
.replay-rotate-readout{ font-family: var(--font-display); font-size:1.1rem; font-weight:700; min-width:3.5rem; text-align:center; }
.replay-rotate-actions{ display:flex; gap:.5rem; }
.replay-compare-slot{ display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--card-border); }
.replay-compare-swatch{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.replay-compare-slot-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.replay-compare-slot-info strong{ font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.replay-compare-slot-info .sub{ font-size:.68rem; }
.replay-compare-slot-btn{
  background:none; border:1px solid var(--card-border); border-radius:6px; color: var(--text-faint);
  width:24px; height:24px; font-size:.78rem; cursor:pointer; flex-shrink:0; line-height:1;
}
.replay-compare-slot-btn.active{ border-color: var(--accent); color: var(--accent); background: rgba(79,172,254,.12); }
.replay-compare-picker{ margin-top:.6rem; display:flex; flex-direction:column; gap:.3rem; }
.replay-compare-pick{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; text-align:left;
  background: var(--card-border); border:none; border-radius:6px; padding:.4rem .6rem; color: var(--text);
  font-size:.78rem; cursor:pointer;
}
.replay-compare-pick:hover{ background: var(--accent); color:#04101f; }
.replay-compare-pick .sub{ font-size:.68rem; color: var(--text-faint); }
.replay-compare-pick:hover .sub{ color:#04101f; opacity:.8; }
.replay-panel{
  position:fixed; z-index:50; width:240px; background: var(--card); border:1px solid var(--card-border);
  border-radius: var(--radius-sm); box-shadow:0 2px 16px rgba(0,0,0,.35); font-size:.85rem;
}
.replay-panel-header{
  display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; border-bottom:1px solid var(--card-border);
  font-family: var(--font-display); font-weight:700; font-size:.82rem; cursor:grab; user-select:none; -webkit-user-select:none;
}
.replay-panel-header:active{ cursor:grabbing; }
.replay-panel-header .icon{ width:14px; height:14px; color: var(--text-faint); flex-shrink:0; }
.replay-panel-body{ padding:.7rem .9rem; }
.replay-hud-title{ font-family: var(--font-display); font-weight:700; margin-bottom:.5rem; font-size:.92rem; }
.replay-hud-row{ display:flex; justify-content:space-between; align-items:baseline; padding:.2rem 0; color: var(--text-faint); }
.replay-hud-row strong{ color: var(--text); font-weight:700; }
.replay-gforce-bar{ height:6px; border-radius:4px; background: var(--card-border); overflow:hidden; margin:.3rem 0 .5rem; }
.replay-gforce-fill{ height:100%; width:0%; background: var(--accent); transition: width .15s linear, background .15s linear; }
.replay-gforce canvas{ width:100%; height:40px; display:block; }
.replay-mobile-notice{
  display:none; position:fixed; top:0; left:0; right:0; z-index:60; background: var(--accent); color:#04101f;
  padding:.6rem 1rem; font-size:.82rem; font-weight:600; align-items:center; justify-content:space-between; gap:.6rem;
}
.replay-mobile-notice button{ background:none; border:none; color:#04101f; cursor:pointer; display:flex; }
@media (max-width: 768px){ .replay-mobile-notice{ display:flex; } }
.replay-status{
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:50; background: var(--card);
  border:1px solid var(--card-border); border-radius: var(--radius-sm); padding:.5rem 1rem; font-size:.82rem;
}
.replay-status-error{ border-color:#ef4444; color:#ef4444; }
.replay-tx-sticks{ display:flex; gap:.6rem; justify-content:center; margin:.4rem 0 .6rem; }
.replay-tx-pad{ position:relative; width:50px; height:50px; border-radius: var(--radius-sm); background: var(--bg-2, rgba(255,255,255,.04)); border:1px solid var(--card-border); }
.replay-tx-dot{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background: var(--accent); transition: left .1s linear, top .1s linear; }
.replay-tx-switches{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
.replay-tx-switch{
  width:26px; height:20px; border-radius:5px; background: var(--card-border); border:1px solid var(--card-border);
  color: var(--text-faint); font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition: background .1s, color .1s, border-color .1s;
}
.replay-tx-switch.down{ background: rgba(79,172,254,.18); border-color: var(--accent); color: var(--accent); }
.replay-tx-pots{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.3rem; }
.replay-tx-pot-row{ display:flex; align-items:center; gap:.4rem; font-size:.66rem; color: var(--text-faint); }
.replay-tx-pot-row span{ width:16px; flex-shrink:0; }
.replay-tx-pot-track{ flex:1; height:5px; border-radius:3px; background: var(--card-border); overflow:hidden; }
.replay-tx-pot-fill{ height:100%; width:0%; background: var(--accent); transition: width .1s linear; }
.replay-failsafe{
  display:none; position:fixed; top:4.2rem; left:50%; transform:translateX(-50%); z-index:55; background:#ef4444; color:#fff;
  font-weight:800; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:.4rem 1rem; border-radius: var(--radius-sm);
  box-shadow:0 2px 16px rgba(239,68,68,.5); animation: replay-failsafe-pulse 1s ease-in-out infinite;
}
@keyframes replay-failsafe-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ── No-fly zones (Sites) ─────────────────────────────────────────── */
.nfz-toolbar, .nfz-save-form{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background: var(--card); border:1px solid var(--card-border);
  border-radius: var(--radius-sm); padding:.6rem .8rem; margin-bottom:.6rem;
}
/* Drawing mode blows the site map up to a near-fullscreen overlay (see
   nfzEnlargeMap() in site_edit.php) — reuses the dashboard widget
   fullscreen's backdrop/scroll-lock classes rather than a parallel set.
   The toolbar/save-form are separate elements in the normal page flow, so
   while enlarged they float above the map+backdrop as their own fixed
   control bar instead of being left behind (and hidden under the
   backdrop) at their original scroll position. */
.site-map-enlarged{
  position:fixed !important; inset:2.4rem; z-index:1200;
  height:auto !important; width:auto !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
@media (max-width: 640px){
  .site-map-enlarged{ inset:.6rem; }
}
body.dash-fullscreen-open .nfz-toolbar,
body.dash-fullscreen-open .nfz-save-form{
  position:fixed; top:2.6rem; left:50%; transform:translateX(-50%);
  z-index:1210; max-width:calc(100vw - 2rem); margin-bottom:0;
}
@media (max-width: 640px){
  body.dash-fullscreen-open .nfz-toolbar,
  body.dash-fullscreen-open .nfz-save-form{ top:.8rem; }
}
.nfz-name-input{
  flex:1; min-width:140px; padding:.5rem .7rem; border-radius:6px; background: var(--card-border); border:1px solid var(--card-border);
  color: var(--text); font-size:.85rem;
}
.nfz-save-form input[type="color"]{ width:36px; height:36px; padding:2px; border-radius:6px; border:1px solid var(--card-border); background:none; cursor:pointer; }
.nfz-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.nfz-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem .2rem; border-bottom:1px solid var(--card-border); font-size:.85rem; }
.nfz-row:last-child{ border-bottom:none; }
.nfz-swatch{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.nfz-row-name{ font-weight:700; color: var(--text); }
.nfz-row .sub{ flex:1; font-size:.76rem; color: var(--text-faint); }
.nfz-btn{ background:none; border:1px solid var(--card-border); border-radius:6px; color: var(--text-faint); width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.nfz-btn:hover{ border-color: var(--accent); color: var(--accent); }
.nfz-btn .icon{ width:14px; height:14px; }

/* ── Feature requests ─────────────────────────────────────────────── */
.fr-badge{ display:inline-block; padding:.2rem .6rem; border-radius:20px; font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.fr-badge.fr-open{ background: var(--card-border); color: var(--text-dim); }
.fr-badge.fr-planned{ background: var(--status-gold-bg); color: var(--status-gold-text); }
.fr-badge.fr-in_progress{ background: rgba(79,172,254,.16); color: var(--accent); }
.fr-badge.fr-shipped{ background: var(--status-green-bg); color: var(--status-green-text); }
.fr-badge.fr-declined{ background: var(--status-red-bg); color: var(--status-red-text); }

.fr-card-wrap{ display:flex; gap:.6rem; margin-bottom:.7rem; align-items:stretch; }
.fr-card-wrap > .fr-card{ flex:1; }
.fr-card{
  display:flex; gap:1rem; background: var(--card); border:1px solid var(--card-border);
  border-radius: var(--radius-sm); padding:1rem 1.1rem; text-decoration:none; color:inherit;
  transition: border-color .12s, transform .12s;
}
.fr-card:hover{ border-color: var(--accent); transform: translateY(-1px); }
.fr-vote-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; flex-shrink:0; }
.fr-vote-btn{
  display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.5rem .6rem;
  border-radius: var(--radius-sm); border:1.5px solid var(--card-border); background:transparent;
  color: var(--text-dim); font-weight:700; font-size:.82rem; cursor:pointer; transition: color .12s, border-color .12s, background .12s;
}
.fr-vote-btn:hover{ border-color: var(--accent); color: var(--text); }
.fr-vote-btn.active{ border-color: var(--accent-2); color: var(--accent-2); background: rgba(0,212,255,.08); }
.fr-vote-btn .icon{ width:16px; height:16px; }
.fr-card-main{ min-width:0; flex:1; }
.fr-card-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; flex-wrap:wrap; }
.fr-card-title{ font-size:1rem; font-weight:700; margin:0; }
.fr-card-desc{ color: var(--text-dim); font-size:.86rem; margin:.3rem 0 0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fr-card-meta{ display:flex; align-items:center; gap:.9rem; margin-top:.6rem; font-size:.78rem; color: var(--text-faint); }
.fr-card-meta .icon{ width:14px; height:14px; vertical-align:-2px; margin-right:.25rem; }
.fr-thumbs{ display:flex; gap:.35rem; margin-top:.6rem; }
.fr-thumbs img{ width:52px; height:52px; border-radius:8px; object-fit:cover; }

.fr-detail-images{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; margin:1rem 0; }
.fr-detail-images img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius: var(--radius-sm); cursor:pointer; }
.fr-admin-note{
  background: rgba(51,214,159,.08); border:1px solid var(--status-green-bg); border-radius: var(--radius-sm);
  padding:.8rem 1rem; margin:1rem 0; font-size:.88rem;
}
.fr-admin-note-label{ font-weight:700; color: var(--status-green-text); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.fr-admin-panel{ background: var(--card); border:1px dashed var(--card-border); border-radius: var(--radius-sm); padding:1rem 1.1rem; margin:1.2rem 0; }
.fr-admin-panel h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin:0 0 .7rem; }

/* ── About / public landing page ─────────────────────────────────── */
body.about-body{ background: var(--bg); color: var(--text); }

.about-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.about-topbar-brand{
  display:flex; align-items:center; gap:.6rem; flex-shrink:0;
  font-family: var(--font-display); font-weight:800; font-size:1.05rem;
  color: var(--text); text-decoration:none;
}
.about-topbar-brand .mark{ width:32px; height:32px; border-radius:9px; overflow:hidden; flex-shrink:0; }
.about-topbar-brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-topbar-nav{ display:flex; align-items:center; gap:1.2rem; }
.about-topbar-nav a:not(.btn){ color: var(--text-dim); text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap; }
.about-topbar-nav a:not(.btn):hover{ color: var(--text); }

.about-hero{
  position:relative; max-width: 980px; margin: 0 auto;
  padding: clamp(3rem,8vw,6rem) 1.5rem 0; text-align:center;
}
.about-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--accent-2);
  background: rgba(79,172,254,.12); border:1px solid rgba(79,172,254,.3);
  padding:.4rem .9rem; border-radius:999px;
}
.about-hero h1{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height:1.1;
  margin: 1.1rem 0 .9rem; color: var(--text); text-wrap: balance;
}
.about-hero p{
  font-size: clamp(1rem,2vw,1.2rem); color: var(--text-dim);
  max-width: 620px; margin: 0 auto 1.8rem;
}
.about-hero-ctas{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-bottom: 3rem; }

.about-hero-shot{
  border-radius: 18px; overflow:hidden; border: 1px solid var(--card-border);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  max-width: 1100px; margin: 0 auto;
}
.about-hero-shot img{ display:block; width:100%; height:auto; }

.about-sections{ max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.about-feature{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items:center; padding: clamp(3.5rem,8vw,6rem) 0;
  border-bottom: 1px solid var(--card-border);
}
.about-feature:last-of-type{ border-bottom:none; }
.about-feature-reverse .about-feature-copy{ order:2; }
.about-feature-reverse .about-feature-shot{ order:1; }

.about-feature-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color: var(--accent-2); margin-bottom:.7rem;
}
.about-feature-copy h2{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text);
  margin:0 0 .8rem; text-wrap:balance;
}
.about-feature-copy p{ color: var(--text-dim); font-size:1.02rem; line-height:1.6; }

.about-feature-shot{
  border-radius:16px; overflow:hidden; border:1px solid var(--card-border);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.about-feature-shot img{ display:block; width:100%; height:auto; }
.about-feature-shot-mobile{ max-width: 300px; margin: 0 auto; }
.about-feature-shot-crop{ max-height: 340px; }
.about-feature-shot-crop img{ object-fit:cover; object-position: top; height:340px; width:100%; }

.about-mobile{ text-align:center; padding: clamp(3rem,6vw,4.5rem) 0; border-bottom: 1px solid var(--card-border); }
.about-mobile h2{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.4rem,2.4vw,1.8rem); color: var(--text); margin:0 0 .5rem;
}
.about-mobile p{ color: var(--text-dim); max-width:520px; margin:0 auto 2rem; }
.about-mobile-shots{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.about-mobile-shots img{
  width: 220px; height:auto; border-radius:20px; border:1px solid var(--card-border);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.about-more{ text-align:center; padding: clamp(3rem,6vw,4.5rem) 0; }
.about-more h2{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.4rem,2.4vw,1.8rem); color: var(--text); margin:0 0 1.8rem;
}
.about-more-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:.9rem; max-width: 900px; margin:0 auto;
}
.about-more-grid div{
  display:flex; align-items:center; gap:.6rem; justify-content:center;
  padding:.9rem 1rem; border-radius:12px;
  background: var(--card); border:1px solid var(--card-border);
  color: var(--text-dim); font-weight:600; font-size:.92rem;
}
.about-more-grid .icon{ color: var(--accent-2); flex-shrink:0; }

.about-cta{
  text-align:center; padding: clamp(3.5rem,7vw,5.5rem) 1.5rem;
  margin: 0 auto clamp(3rem,6vw,5rem); max-width: 1100px; border-radius:24px;
  background: linear-gradient(135deg, rgba(79,172,254,.14), rgba(0,212,255,.06));
  border: 1px solid rgba(79,172,254,.25);
}
.about-cta h2{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.6rem,3vw,2.2rem); color: var(--text); margin:0 0 .6rem;
}
.about-cta p{ color: var(--text-dim); margin:0 0 1.6rem; }

.about-footer{
  display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap;
  padding: 2rem 1.5rem 3rem; color: var(--text-faint); font-size:.85rem;
}
.about-footer a{ color: var(--text-faint); text-decoration:none; font-weight:600; }
.about-footer a:hover{ color: var(--text-dim); }
.about-footer .icon{ width:14px; height:14px; vertical-align:-2px; }

@media (max-width: 760px){
  .about-topbar-nav{ gap:.6rem; }
  .about-topbar-nav > a:not(.btn){ display:none; }
  .about-feature{ grid-template-columns: 1fr; }
  .about-feature-reverse .about-feature-copy{ order:1; }
  .about-feature-reverse .about-feature-shot{ order:2; }
  .about-mobile-shots img{ width: 42vw; max-width:200px; }
}