/* ═══════════════════════════════════════════════════════════
   TrailTag CSS v4.0  —  Modern Full-Width
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --tt-ink:      #0F172A;
  --tt-blue:     #1E3A5F;
  --tt-blue-m:   #2C5282;
  --tt-blue-l:   #3B6FA8;
  --tt-green:    #10B981;
  --tt-green-d:  #059669;
  --tt-red:      #EF4444;
  --tt-red-d:    #DC2626;
  --tt-amber:    #F59E0B;
  --tt-amber-d:  #D97706;
  --tt-purple:   #8B5CF6;
  --tt-surface:  #F0F4F8;
  --tt-card:     #FFFFFF;
  --tt-border:   #E2E8F0;
  --tt-border-m: #CBD5E1;
  --tt-muted:    #94A3B8;
  --tt-text:     #334155;
  --tt-font:     'Outfit', -apple-system, sans-serif;
  --tt-mono:     'JetBrains Mono', monospace;
  --tt-r:        12px;
  --tt-r-lg:     18px;
  --tt-sh:       0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --tt-sh-md:    0 4px 16px rgba(15,23,42,.08);
  --tt-sh-lg:    0 12px 40px rgba(15,23,42,.12);
  --tt-t:        .18s cubic-bezier(.4,0,.2,1);
  --sb-w:        256px;
}

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

/* ══════════════════════════════════════════════
   EMOJI / ICON SIZE GLOBAL FIX
   ══════════════════════════════════════════════ */
/* WordPress Twemoji override - prevent giant SVG/img emojis */
.tt-dashboard.v4 img.emoji,
.tt-dashboard.v4 .emoji,
.tt-partner-wrap img.emoji,
.tt-partner-wrap .emoji {
  width: 1em !important;
  height: 1em !important;
  display: inline !important;
  vertical-align: -0.15em !important;
  max-width: none !important;
}

/* Constrain emoji inside icon containers */
.tt-ac-sport img.emoji       { width: 20px !important; height: 20px !important; }
.tt-log-sport img.emoji      { width: 22px !important; height: 22px !important; }
.tt-kpi-icon img.emoji       { width: 22px !important; height: 22px !important; }
.tt-sport-card-ico img.emoji { width: 26px !important; height: 26px !important; }
.tt-atm-sport-ico img.emoji  { width: 26px !important; height: 26px !important; }
.tt-sp-ico img.emoji         { width: 18px !important; height: 18px !important; }
.tt-ach-ico img.emoji        { width: 28px !important; height: 28px !important; }
.tt-perk-icon img.emoji      { width: 22px !important; height: 22px !important; }
.tt-empty-ico img.emoji      { width: 44px !important; height: 44px !important; }
.tt-cta-icon img.emoji       { width: 36px !important; height: 36px !important; }
.tt-family-icon img.emoji    { width: 48px !important; height: 48px !important; }
.tt-enum-item img.emoji      { width: 18px !important; height: 18px !important; }
.tt-gpx-icon img.emoji       { width: 32px !important; height: 32px !important; }
.tt-member-av img.emoji      { width: 20px !important; height: 20px !important; }

/* Prevent any img inside icon boxes from stretching */
.tt-ac-sport img,
.tt-log-sport img,
.tt-kpi-icon img,
.tt-atm-sport-ico img {
  width: auto !important;
  height: 1em !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: inline-block !important;
}


button { font-family: var(--tt-font); cursor: pointer; }
a { text-decoration: none; }

/* ══════════════════════════════════════════════
   FULL-WIDTH BREAKOUT — escape WP containers
   ══════════════════════════════════════════════ */
.tt-dashboard.v4 {
  display: flex;
  min-height: 100vh;
  background: var(--tt-surface);
  font-family: var(--tt-font);
  color: var(--tt-ink);
  font-size: 15px;
  line-height: 1.5;
  /* Fullpage mode (body.trailtag-fullpage): no breakout needed */
  /* Embedded in theme (fallback): break out of container */
}

/* Embedded in a theme container — escape the max-width */
body:not(.trailtag-fullpage) .tt-dashboard.v4 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Full-page mode: take entire viewport */
body.trailtag-fullpage .tt-dashboard.v4 {
  width: 100%;
  min-height: 100vh;
}

body.trailtag-fullpage,
body.trailtag-fullpage html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════ */
.tt-sidebar {
  width: var(--sb-w);
  background: var(--tt-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 100;
  scrollbar-width: none;
}
.tt-sidebar::-webkit-scrollbar { display: none; }

.tt-sb-brand {
  padding: 24px 22px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-sb-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--tt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.tt-sb-logo-text { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.tt-sb-logo-text span { color: var(--tt-green); }

.tt-sb-user {
  margin: 18px 14px 0;
  padding: 14px;
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
}
.tt-sb-user-row  { display: flex; align-items: center; gap: 10px; }
.tt-sb-avatar    { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-sb-name      { font-size: 13px; font-weight: 600; color: #fff; }
.tt-sb-plan      { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; margin-top: 4px; }
.tt-sb-plan.pro  { background: linear-gradient(135deg, var(--tt-amber), var(--tt-amber-d)); color: #fff; }
.tt-sb-plan.free { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

.tt-sb-nav { padding: 16px 0; flex: 1; }
.tt-sb-section-label { padding: 10px 22px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.3); }
.tt-sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  color: rgba(255,255,255,.6);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all var(--tt-t);
  user-select: none;
  position: relative;
}
.tt-sb-item svg     { width: 17px; height: 17px; flex-shrink: 0; }
.tt-sb-item:hover   { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
.tt-sb-item.active  { color: #fff; background: rgba(255,255,255,.1); border-left-color: var(--tt-green); font-weight: 600; }
.tt-sb-item .tt-dot { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--tt-green); animation: tt-blink 1.5s infinite; }

.tt-sb-upgrade {
  margin: 8px 14px 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(217,119,6,.1));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 14px;
}
.tt-sb-upgrade-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.tt-sb-upgrade-sub   { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 12px; }

/* ══════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════ */
.tt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tt-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 56px;
  background: var(--tt-blue);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 99;
  flex-shrink: 0;
}
.tt-topbar-menu { background: none; border: none; color: #fff; font-size: 20px; padding: 4px 6px; }
.tt-topbar-brand { font-size: 17px; font-weight: 800; flex: 1; }
.tt-topbar-live  { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-green); animation: tt-blink 1.5s infinite; }

/* ══════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════ */
.tt-panel        { display: none; padding: 32px; flex-direction: column; gap: 24px; }
.tt-panel.active { display: flex; }
.tt-ph           { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.tt-ph-left h2   { font-size: 26px; font-weight: 800; color: var(--tt-ink); letter-spacing: -.4px; }
.tt-ph-left p    { font-size: 14px; color: var(--tt-muted); margin-top: 3px; }

/* ══════════════════════════════════════════════
   OVERVIEW TAB
   ══════════════════════════════════════════════ */
.tt-hero-banner {
  background: linear-gradient(135deg, var(--tt-blue) 0%, var(--tt-blue-m) 60%, var(--tt-blue-l) 100%);
  border-radius: var(--tt-r-lg);
  padding: 24px 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--tt-sh-md);
  position: relative;
  overflow: hidden;
}
.tt-hero-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.tt-hero-banner.overdue {
  background: linear-gradient(135deg, #7F1D1D 0%, var(--tt-red-d) 100%);
  animation: tt-urgent 2s ease-in-out infinite;
}
@keyframes tt-urgent { 0%,100%{box-shadow:var(--tt-sh-md)} 50%{box-shadow:0 0 0 4px rgba(239,68,68,.4),var(--tt-sh-md)} }
.tt-hero-left  { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tt-hero-right { display: flex; gap: 8px; flex-shrink: 0; }
.tt-live-badge { display: flex; align-items: center; gap: 8px; }
.tt-live-ring-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.tt-live-dot   { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--tt-green); }
.tt-live-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(16,185,129,.4); animation: tt-pulse-ring 1.5s infinite; }
@keyframes tt-pulse-ring { 0%{transform:translate(-50%,-50%) scale(.7);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
.tt-hero-sport { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.18); border-radius: 20px; padding: 3px 11px; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.tt-hero-route { font-size: 20px; font-weight: 700; }
.tt-hero-meta  { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 5px; }
.tt-hero-meta span { display: flex; align-items: center; gap: 4px; }
.tt-cta-banner {
  background: var(--tt-card);
  border: 1.5px dashed var(--tt-border-m);
  border-radius: var(--tt-r-lg);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all var(--tt-t);
}
.tt-cta-banner:hover { border-color: var(--tt-blue); border-style: solid; box-shadow: var(--tt-sh-md); transform: translateY(-2px); }
.tt-cta-icon  { font-size: 36px; }
.tt-cta-title { font-size: 16px; font-weight: 700; color: var(--tt-ink); }
.tt-cta-sub   { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-cta-arr   { margin-left: auto; font-size: 20px; color: var(--tt-muted); }

/* Safety checklist */
.tt-safety-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tt-sc-title { font-size: 15px; font-weight: 700; color: var(--tt-ink); }
.tt-sc-score { font-size: 14px; font-weight: 800; padding: 5px 14px; border-radius: 20px; }
.tt-sc-score.hi  { background: #D1FAE5; color: #065F46; }
.tt-sc-score.mid { background: #FEF3C7; color: #92400E; }
.tt-sc-score.lo  { background: #FEE2E2; color: #991B1B; }
.tt-sc-bar  { height: 5px; background: var(--tt-border); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.tt-sc-fill { height: 100%; background: linear-gradient(90deg, var(--tt-green), #34D399); transition: width .9s ease; }
.tt-sc-items { display: flex; flex-direction: column; gap: 7px; }
.tt-sc-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tt-sc-dot  { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.tt-sc-item.ok  .tt-sc-dot { background: var(--tt-green); color: #fff; }
.tt-sc-item.nok .tt-sc-dot { background: var(--tt-border); color: var(--tt-muted); }
.tt-sc-item.ok  .tt-sc-lbl { color: var(--tt-muted); }
.tt-sc-fix  { background: none; border: none; font-size: 12px; color: var(--tt-blue-l); font-weight: 600; margin-left: auto; transition: color var(--tt-t); }
.tt-sc-fix:hover { color: var(--tt-blue); }

/* KPI grid */
.tt-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tt-kpi-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; box-shadow: var(--tt-sh); }
.tt-kpi-icon { font-size: 22px; margin-bottom: 8px; }
.tt-kpi-val  { font-size: 30px; font-weight: 800; color: var(--tt-ink); line-height: 1; }
.tt-kpi-lbl  { font-size: 12px; color: var(--tt-muted); margin-top: 4px; font-weight: 500; }

/* Recent activity */
.tt-activity-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh); }
.tt-ac-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tt-border); }
.tt-ac-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt-ac-item  { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--tt-border); transition: background var(--tt-t); }
.tt-ac-item:last-child { border-bottom: none; }
.tt-ac-item:hover { background: var(--tt-surface); }
.tt-ac-sport { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.tt-ac-name  { font-size: 14px; font-weight: 600; color: var(--tt-ink); }
.tt-ac-meta  { font-size: 12px; color: var(--tt-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════
   TOUR PLANNING
   ══════════════════════════════════════════════ */
.tt-gpx-drop {
  background: var(--tt-surface);
  border: 2px dashed var(--tt-border-m);
  border-radius: var(--tt-r-lg);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all var(--tt-t);
  position: relative;
}
.tt-gpx-drop:hover, .tt-gpx-drop.drag-over { border-color: var(--tt-blue-l); background: #EBF2FF; }
.tt-gpx-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tt-gpx-icon { font-size: 32px; margin-bottom: 8px; }
.tt-gpx-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 4px; }
.tt-gpx-sub   { font-size: 13px; color: var(--tt-muted); }
.tt-gpx-result {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--tt-r);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.tt-gpx-result-icon { font-size: 20px; }
.tt-gpx-result-name { font-weight: 700; color: var(--tt-ink); }
.tt-gpx-result-stats { font-size: 12px; color: var(--tt-muted); margin-top: 2px; }
.tt-gpx-clear { margin-left: auto; background: none; border: none; color: var(--tt-muted); font-size: 18px; transition: color var(--tt-t); }
.tt-gpx-clear:hover { color: var(--tt-red); }

.tt-sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.tt-sport-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px; border-radius: 12px;
  background: var(--tt-card); border: 1.5px solid var(--tt-border);
  cursor: pointer; transition: all var(--tt-t);
}
.tt-sport-card:hover    { border-color: var(--tt-blue-l); box-shadow: var(--tt-sh-md); transform: translateY(-2px); }
.tt-sport-card.selected { border-color: var(--sport-clr, var(--tt-blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sport-clr, var(--tt-blue)) 15%, transparent); }
.tt-sport-card-ico { font-size: 26px; }
.tt-sport-card-lbl { font-size: 11px; font-weight: 600; color: var(--tt-text); text-align: center; line-height: 1.2; }
.tt-sport-card.selected .tt-sport-card-lbl { color: var(--sport-clr, var(--tt-blue)); }

.tt-form-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-fct { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 18px; }
.tt-fct-num { width: 22px; height: 22px; border-radius: 50%; background: var(--tt-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.tt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tt-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tt-fld   { display: flex; flex-direction: column; gap: 5px; }
.tt-fld label { font-size: 12.5px; font-weight: 600; color: var(--tt-text); }
.tt-req   { color: var(--tt-red); }
.tt-hint  { font-size: 11.5px; color: var(--tt-muted); margin-top: 3px; }
.tt-input {
  padding: 10px 14px; border: 1.5px solid var(--tt-border);
  border-radius: 10px; font-size: 14.5px; font-family: var(--tt-font);
  color: var(--tt-ink); background: var(--tt-card);
  transition: border-color var(--tt-t), box-shadow var(--tt-t); width: 100%;
}
.tt-input:focus { outline: none; border-color: var(--tt-blue-l); box-shadow: 0 0 0 3px rgba(59,111,168,.12); }
.tt-input:read-only { background: var(--tt-surface); color: var(--tt-muted); }
.tt-input-sm { padding: 7px 10px; font-size: 13px; border-radius: 8px; width: auto; }
.tt-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.tt-presets { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.tt-presets-lbl { font-size: 12px; color: var(--tt-muted); font-weight: 600; }
.tt-preset-btn { padding: 5px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--tt-surface); border: 1.5px solid var(--tt-border); color: var(--tt-text); transition: all var(--tt-t); }
.tt-preset-btn:hover, .tt-preset-btn.active { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; }
.tt-num-input { display: flex; align-items: center; border: 1.5px solid var(--tt-border); border-radius: 10px; overflow: hidden; height: 42px; }
.tt-num-btn  { width: 40px; background: var(--tt-surface); border: none; font-size: 18px; color: var(--tt-blue); transition: background var(--tt-t); flex-shrink: 0; }
.tt-num-btn:hover { background: var(--tt-border); }
.tt-num-fld  { border: none; border-left: 1.5px solid var(--tt-border); border-right: 1.5px solid var(--tt-border); text-align: center; width: 56px; flex: 1; height: 100%; font-size: 15px; font-weight: 700; }
.tt-num-fld:focus { outline: none; }
.tt-diff-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-diff-btn { padding: 5px 12px; border-radius: 20px; background: var(--tt-surface); border: 1.5px solid var(--tt-border); font-size: 13px; font-weight: 700; color: var(--tt-text); transition: all var(--tt-t); }
.tt-diff-btn:hover    { border-color: var(--tt-blue-l); }
.tt-diff-btn.selected { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; }
.tt-avl-row { display: flex; gap: 7px; flex-wrap: wrap; }
.tt-avl-btn { display: flex; flex-direction: column; align-items: center; padding: 7px 12px; border-radius: 10px; border: 2px solid var(--avl-c, #ccc); opacity: .55; transition: all var(--tt-t); background: transparent; }
.tt-avl-btn:hover    { opacity: .85; transform: translateY(-1px); }
.tt-avl-btn.selected { opacity: 1; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.tt-avl-num   { font-size: 17px; font-weight: 800; color: var(--avl-c); }
.tt-avl-lbl   { font-size: 11px; font-weight: 600; color: var(--tt-text); }
.tt-compass { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-compass-btn { padding: 6px 12px; border-radius: 8px; background: var(--tt-surface); border: 1.5px solid var(--tt-border); font-size: 12px; font-weight: 700; transition: all var(--tt-t); }
.tt-compass-btn:hover, .tt-compass-btn.selected { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; }
.tt-piste-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-piste-btn { padding: 8px 16px; border-radius: 10px; border: 2px solid; font-size: 13px; font-weight: 700; opacity: .6; transition: all var(--tt-t); }
.tt-piste-btn:hover, .tt-piste-btn.selected { opacity: 1; transform: translateY(-1px); box-shadow: var(--tt-sh-md); }
.tt-piste-btn.blue    { background: #EFF6FF; border-color: #3B82F6; color: #1D4ED8; }
.tt-piste-btn.red     { background: #FEF2F2; border-color: var(--tt-red); color: var(--tt-red-d); }
.tt-piste-btn.black   { background: #1E293B; border-color: #0F172A; color: #fff; }
.tt-piste-btn.freeride{ background: #FDF4FF; border-color: #A855F7; color: #7C3AED; }
.tt-wp-list { display: flex; flex-direction: column; gap: 7px; }
.tt-wp-item { display: flex; align-items: center; gap: 8px; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: 10px; padding: 8px 10px; animation: tt-slide-in .15s ease; }
@keyframes tt-slide-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
.tt-wp-time { width: 86px !important; flex-shrink: 0; }
.tt-wp-name { flex: 1; }
.tt-pill-row   { display: flex; flex-wrap: wrap; gap: 7px; }
.tt-contact-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--tt-card); border: 1.5px solid var(--tt-border); padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.tt-contact-pill.primary { border-color: var(--tt-blue-l); background: #EFF6FF; color: var(--tt-blue); }
.tt-pill-av  { width: 20px; height: 20px; border-radius: 50%; background: var(--tt-blue); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tt-warn-pill { background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: #92400E; display: flex; align-items: center; gap: 10px; }
.tt-go-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 17px; border-radius: 14px;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m));
  color: #fff; border: none;
  font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 24px rgba(30,58,95,.35);
  transition: all var(--tt-t);
}
.tt-go-btn:hover   { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,58,95,.45); }
.tt-go-btn:active  { transform: translateY(0); }
.tt-go-btn:disabled{ opacity: .55; cursor: not-allowed; transform: none; }
.tt-go-icon { font-size: 22px; }

/* Active tour manager */
.tt-atm { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh); }
.tt-atm-hdr { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; }
.tt-atm-hdr-l { display: flex; align-items: center; gap: 14px; }
.tt-atm-sport-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.tt-atm-route { font-size: 19px; font-weight: 700; color: #fff; }
.tt-atm-sport { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; }
.tt-atm-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--tt-border); }
.tt-atm-cell { padding: 16px 22px; border-right: 1px solid var(--tt-border); }
.tt-atm-cell:last-child { border-right: none; }
.tt-atm-cell-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); }
.tt-atm-cell-val { font-size: 16px; font-weight: 700; color: var(--tt-ink); margin-top: 2px; }
.tt-atm-actions { display: flex; gap: 10px; padding: 18px 22px; }

/* ══════════════════════════════════════════════
   TAGS & QR PERSONALIZATION
   ══════════════════════════════════════════════ */
.tt-tags-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; }
.tt-tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tt-tag-card {
  background: var(--tt-card); border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-r-lg); overflow: hidden;
  box-shadow: var(--tt-sh); transition: all var(--tt-t); position: relative;
}
.tt-tag-card:hover { transform: translateY(-3px); box-shadow: var(--tt-sh-lg); }
.tt-tag-card.is-active { border-color: var(--tt-green); box-shadow: 0 0 0 2px rgba(16,185,129,.2), var(--tt-sh); }
.tt-tag-card.active { border-color: var(--tt-green); }
.tt-tag-ribbon { position: absolute; top: 10px; right: -6px; background: var(--tt-green); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 3px 14px 3px 8px; border-radius: 0 0 0 6px; animation: tt-blink 2s infinite; }
.tt-tag-qr-wrap { background: var(--tt-surface); padding: 22px; display: flex; justify-content: center; border-bottom: 1px solid var(--tt-border); }
.tt-tag-qr-wrap img { border-radius: 8px; display: block; }
.tt-tag-body { padding: 14px 16px; }
.tt-tag-name { font-size: 14.5px; font-weight: 700; color: var(--tt-ink); }
.tt-tag-plate { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tt-muted); margin-top: 3px; margin-bottom: 10px; }
.tt-tag-row  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tt-tag-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.tt-tag-uid  { font-family: var(--tt-mono); font-size: 10px; color: var(--tt-muted); }

/* QR Customizer */
.tt-qr-customizer { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); position: sticky; top: 24px; }
.tt-qrc-title { font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.tt-qrc-preview { background: var(--tt-surface); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 18px; }
.tt-qrc-preview img { border-radius: 8px; }
.tt-color-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tt-color-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--tt-t); position: relative;
}
.tt-color-swatch:hover { transform: scale(1.15); }
.tt-color-swatch.selected { border-color: var(--tt-ink); transform: scale(1.15); }
.tt-color-swatch.selected::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.tt-qrc-custom-color { display: flex; align-items: center; gap: 10px; }
.tt-qrc-custom-color label { font-size: 13px; color: var(--tt-text); }

/* ══════════════════════════════════════════════
   EMERGENCY / SAFETY TAB
   ══════════════════════════════════════════════ */
.tt-emergency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tt-ec { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-ec-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-ec-title img.emoji { width: 18px !important; height: 18px !important; }
.tt-contacts-list { display: flex; flex-direction: column; gap: 10px; }
.tt-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--tt-surface); border: 1px solid var(--tt-border);
  transition: border-color var(--tt-t);
}
.tt-contact-row.prime { background: #EFF6FF; border-color: #BFDBFE; }
.tt-contact-row:hover { border-color: var(--tt-blue-l); }
.tt-contact-av { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-contact-av.prime-av { background: linear-gradient(135deg, var(--tt-green-d), var(--tt-green)); }
.tt-contact-info { flex: 1; min-width: 0; }
.tt-contact-name { font-size: 14px; font-weight: 700; color: var(--tt-ink); display: flex; align-items: center; gap: 6px; }
.tt-contact-links { font-size: 12.5px; color: var(--tt-muted); margin-top: 2px; }
.tt-contact-links a { color: var(--tt-text); }
.tt-contact-del { background: none; border: none; color: var(--tt-muted); font-size: 16px; padding: 4px; border-radius: 6px; transition: all var(--tt-t); }
.tt-contact-del:hover { color: var(--tt-red); background: #FEE2E2; }
.tt-chip  { display: inline-flex; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.tt-chip.prime { background: #DBEAFE; color: #1D4ED8; }
.tt-chip.rel   { background: var(--tt-border); color: var(--tt-text); }
.tt-secure-note { display: flex; align-items: center; gap: 8px; background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.tt-blood-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tt-blood-btn { width: 50px; height: 36px; border-radius: 8px; background: var(--tt-surface); border: 1.5px solid var(--tt-border); font-size: 13px; font-weight: 700; color: var(--tt-text); transition: all var(--tt-t); }
.tt-blood-btn:hover    { border-color: var(--tt-red); color: var(--tt-red); }
.tt-blood-btn.selected { background: var(--tt-red); border-color: var(--tt-red-d); color: #fff; }
.tt-emergency-nums { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-enum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.tt-enum-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--tt-surface); border: 1.5px solid var(--tt-border); border-left: 4px solid var(--ec, var(--tt-blue)); text-decoration: none; transition: all var(--tt-t); }
.tt-enum-item:hover { transform: translateY(-2px); box-shadow: var(--tt-sh-md); }
.tt-enum-num   { font-size: 17px; font-weight: 800; color: var(--ec, var(--tt-blue)); font-family: var(--tt-mono); }
.tt-enum-label { font-size: 11.5px; color: var(--tt-muted); line-height: 1.3; }

/* ══════════════════════════════════════════════
   FAMILY TAB
   ══════════════════════════════════════════════ */
.tt-family-header-card {
  background: linear-gradient(135deg, var(--tt-purple) 0%, #7C3AED 100%);
  border-radius: var(--tt-r-lg); padding: 24px 28px; color: #fff;
  display: flex; align-items: center; gap: 20px;
  box-shadow: var(--tt-sh-md);
}
.tt-family-icon { font-size: 48px; }
.tt-family-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.tt-family-sub   { font-size: 14px; color: rgba(255,255,255,.7); }
.tt-family-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.tt-family-members { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-member-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--tt-border);
}
.tt-member-row:last-child { border-bottom: none; }
.tt-member-av { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--tt-purple), #7C3AED); color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-member-name  { font-size: 14.5px; font-weight: 700; color: var(--tt-ink); }
.tt-member-email { font-size: 12.5px; color: var(--tt-muted); margin-top: 1px; }
.tt-member-status { margin-left: auto; }
.tt-member-active-tour { background: var(--tt-card); border: 1px solid var(--tt-green); border-radius: var(--tt-r-lg); padding: 14px 16px; margin-left: 58px; margin-top: -6px; margin-bottom: 12px; font-size: 13px; color: var(--tt-text); }
.tt-member-active-tour strong { color: var(--tt-green-d); }
.tt-family-invite { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-invite-code-box {
  background: var(--tt-surface); border-radius: 12px; padding: 20px;
  text-align: center; margin-bottom: 18px;
}
.tt-invite-code { font-size: 28px; font-weight: 800; font-family: var(--tt-mono); color: var(--tt-blue); letter-spacing: 4px; }
.tt-invite-hint { font-size: 13px; color: var(--tt-muted); margin-top: 6px; }
.tt-family-perks { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-perk-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tt-border); }
.tt-perk-item:last-child { border-bottom: none; }
.tt-perk-icon { font-size: 22px; flex-shrink: 0; }
.tt-perk-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt-perk-desc  { font-size: 12.5px; color: var(--tt-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════
   STATISTICS TAB
   ══════════════════════════════════════════════ */
.tt-stats-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tt-sh-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 24px; box-shadow: var(--tt-sh); text-align: center; }
.tt-sh-val { font-size: 44px; font-weight: 900; color: var(--tt-ink); line-height: 1; letter-spacing: -1px; }
.tt-sh-lbl { font-size: 13px; color: var(--tt-muted); margin-top: 6px; font-weight: 500; }
.tt-chart-block { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 24px; box-shadow: var(--tt-sh); }
.tt-chart-title { font-size: 14.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 20px; }
.tt-bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 100px; }
.tt-bar-col   { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; height: 100%; justify-content: flex-end; }
.tt-bar-val   { font-size: 11px; font-weight: 700; color: var(--tt-ink); min-height: 14px; }
.tt-bar       { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--tt-blue-l), var(--tt-blue)); min-height: 4px; transition: height .7s ease; }
.tt-bar-lbl   { font-size: 10px; color: var(--tt-muted); }
.tt-sport-rows { display: flex; flex-direction: column; gap: 10px; }
.tt-sp-row { display: flex; align-items: center; gap: 10px; }
.tt-sp-ico { font-size: 17px; width: 26px; text-align: center; }
.tt-sp-lbl { font-size: 13px; font-weight: 600; color: var(--tt-text); width: 110px; flex-shrink: 0; }
.tt-sp-bar { flex: 1; height: 7px; background: var(--tt-border); border-radius: 3px; overflow: hidden; }
.tt-sp-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.tt-sp-cnt { font-size: 12px; font-weight: 700; color: var(--tt-ink); width: 20px; text-align: right; }
.tt-achievements { display: flex; flex-wrap: wrap; gap: 14px; }
.tt-ach { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; text-align: center; }
.tt-ach-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.tt-ach.unlocked .tt-ach-ico { background: linear-gradient(135deg, #FEF3C7, #FDE68A); box-shadow: 0 2px 10px rgba(245,158,11,.3); }
.tt-ach.locked   .tt-ach-ico { background: var(--tt-border); filter: grayscale(1); opacity: .4; }
.tt-ach-lbl { font-size: 10.5px; font-weight: 600; color: var(--tt-muted); line-height: 1.3; }
.tt-ach.unlocked .tt-ach-lbl { color: var(--tt-text); }

/* ══════════════════════════════════════════════
   TOUR LOG
   ══════════════════════════════════════════════ */
.tt-log-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-log-list { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh); }
.tt-log-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--tt-border);
  transition: background var(--tt-t);
}
.tt-log-row:last-child { border-bottom: none; }
.tt-log-row:hover { background: var(--tt-surface); }
.tt-log-sport { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tt-log-info  { flex: 1; min-width: 0; }
.tt-log-name  { font-size: 14px; font-weight: 600; color: var(--tt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-log-meta  { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--tt-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════ */
.tt-settings-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.tt-settings-col { display: flex; flex-direction: column; gap: 16px; }
.tt-settings-group { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-sg-title { font-size: 13.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--tt-border); display: flex; align-items: center; gap: 8px; }
.tt-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--tt-border); }
.tt-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.tt-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.tt-toggle-title { font-size: 14px; font-weight: 600; color: var(--tt-ink); display: flex; align-items: center; gap: 7px; }
.tt-toggle-desc  { font-size: 12.5px; color: var(--tt-muted); }
.tt-toggle { position: relative; }
.tt-toggle input { display: none; }
.tt-toggle-track { display: block; width: 44px; height: 24px; border-radius: 12px; background: var(--tt-border); cursor: pointer; transition: background var(--tt-t); position: relative; }
.tt-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform var(--tt-t); }
.tt-toggle input:checked ~ .tt-toggle-track { background: var(--tt-blue-l); }
.tt-toggle input:checked ~ .tt-toggle-track::after { transform: translateX(20px); }
.tt-toggle-locked { opacity: .4; cursor: not-allowed; }
.tt-upgrade-card { background: linear-gradient(135deg, #FFFBEB, #FFF7ED); border: 1px solid #FDE68A; border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-uc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tt-uc-icon { font-size: 28px; }
.tt-uc-title { font-size: 15px; font-weight: 700; color: var(--tt-ink); }
.tt-uc-sub   { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-account-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-danger-link { color: var(--tt-red) !important; }

/* ══════════════════════════════════════════════
   PARTNER PORTAL — NEW FULL DASHBOARD
   ══════════════════════════════════════════════ */
.tt-partner-wrap {
  font-family: var(--tt-font);
  min-height: 100vh;
  background: var(--tt-surface);
  color: var(--tt-ink);
}

body:not(.trailtag-fullpage) .tt-partner-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

body.trailtag-fullpage .tt-partner-wrap {
  width: 100%;
}
.tt-partner-topbar {
  background: var(--tt-blue);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--tt-sh-md);
}
.tt-partner-topbar-logo { font-size: 20px; font-weight: 800; color: #fff; }
.tt-partner-topbar-logo span { color: var(--tt-green); }
.tt-partner-topbar-org { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.2); font-size: 14px; color: rgba(255,255,255,.75); }
.tt-partner-topbar-type { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700; color: #fff; }
.tt-partner-content { padding: 32px; max-width: 1200px; margin: 0 auto; }
.tt-partner-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.tt-partner-kpi { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; box-shadow: var(--tt-sh); }
.tt-partner-kpi-val { font-size: 32px; font-weight: 800; color: var(--tt-ink); line-height: 1; }
.tt-partner-kpi-lbl { font-size: 12px; color: var(--tt-muted); margin-top: 5px; }
.tt-partner-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
.tt-partner-search-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh); }
.tt-ps-tabs { display: flex; border-bottom: 1px solid var(--tt-border); }
.tt-ps-tab { padding: 13px 20px; font-size: 13.5px; font-weight: 600; color: var(--tt-muted); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--tt-t); }
.tt-ps-tab.active { color: var(--tt-blue); border-bottom-color: var(--tt-blue); }
.tt-ps-panel { padding: 22px; }
.tt-ps-row { display: flex; gap: 10px; }
.tt-ps-row .tt-input { flex: 1; }
.tt-result-card { background: var(--tt-card); border: 1.5px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh-lg); margin-top: 16px; }
.tt-result-hdr { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); padding: 22px 26px; }
.tt-result-hdr.overdue { background: linear-gradient(135deg, var(--tt-red-d), var(--tt-red)); }
.tt-result-av-row { display: flex; align-items: center; gap: 14px; }
.tt-result-av { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tt-result-name  { font-size: 19px; font-weight: 700; color: #fff; }
.tt-result-body  { padding: 18px 26px; display: flex; flex-direction: column; gap: 10px; }
.tt-result-row   { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--tt-border); }
.tt-result-row:last-child { border-bottom: none; }
.tt-result-key   { font-weight: 600; color: var(--tt-muted); }
.tt-result-val   { font-weight: 600; color: var(--tt-ink); }
.tt-medical-block { background: #F0FDF4; border-top: 1px solid var(--tt-border); padding: 18px 26px; }
.tt-medical-block h3 { font-size: 13.5px; font-weight: 700; color: #166534; margin-bottom: 12px; }
.tt-med-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tt-med-row  { display: flex; flex-direction: column; gap: 2px; }
.tt-med-key  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #166534; }
.tt-med-val  { font-size: 13.5px; font-weight: 600; color: var(--tt-ink); }
.tt-blood-tag { font-size: 18px; font-weight: 800; color: var(--tt-red); }
.tt-partner-actions { display: flex; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--tt-border); background: var(--tt-surface); }
/* Partner branding panel */
.tt-brand-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-brand-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 18px; }
.tt-brand-logo-area { background: var(--tt-surface); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 16px; border: 2px dashed var(--tt-border); cursor: pointer; transition: all var(--tt-t); }
.tt-brand-logo-area:hover { border-color: var(--tt-blue-l); background: #EBF2FF; }
.tt-brand-logo-area img { max-height: 60px; max-width: 160px; object-fit: contain; margin-bottom: 8px; }
.tt-brand-logo-hint { font-size: 12px; color: var(--tt-muted); }
.tt-brand-colors { display: flex; gap: 10px; margin-bottom: 16px; }
.tt-brand-color-item { flex: 1; }
.tt-brand-color-item label { font-size: 12px; font-weight: 600; color: var(--tt-text); display: block; margin-bottom: 5px; }
.tt-brand-color-item input[type="color"] { width: 100%; height: 40px; border: 1.5px solid var(--tt-border); border-radius: 8px; padding: 3px; cursor: pointer; }
.tt-brand-qr-preview { background: var(--tt-surface); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 16px; }
.tt-brand-qr-preview img { border-radius: 8px; }
.tt-partner-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.tt-partner-type-badge.hotel     { background: #EFF6FF; color: #1D4ED8; }
.tt-partner-type-badge.rescue    { background: #FEF2F2; color: #991B1B; }
.tt-partner-type-badge.guide     { background: #F0FDF4; color: #166534; }
.tt-partner-type-badge.insurance { background: #FFF7ED; color: #9A3412; }

/* ══════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════ */
/* Buttons */
.tt-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all var(--tt-t); font-family: var(--tt-font); text-decoration: none; white-space: nowrap; }
.tt-btn:focus { outline: 2px solid var(--tt-blue-l); outline-offset: 2px; }
.tt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.tt-btn-primary { background: var(--tt-blue); color: #fff; }
.tt-btn-primary:hover { background: var(--tt-blue-m); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,58,95,.3); }
.tt-btn-danger  { background: var(--tt-red); color: #fff; }
.tt-btn-danger:hover  { background: var(--tt-red-d); }
.tt-btn-outline { background: transparent; color: var(--tt-text); border: 1.5px solid var(--tt-border); }
.tt-btn-outline:hover { border-color: var(--tt-blue-l); color: var(--tt-blue); }
.tt-btn-ghost   { background: transparent; border: none; color: var(--tt-muted); }
.tt-btn-ghost:hover   { background: var(--tt-border); color: var(--tt-text); }
.tt-btn-success { background: var(--tt-green); color: #fff; }
.tt-btn-success:hover { background: var(--tt-green-d); }
.tt-btn-pro  { background: linear-gradient(135deg, var(--tt-amber), var(--tt-amber-d)); color: #fff; }
.tt-btn-pro:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tt-btn-purple { background: var(--tt-purple); color: #fff; }
.tt-btn-purple:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tt-btn-sm  { padding: 6px 13px; font-size: 12.5px; border-radius: 8px; }
.tt-btn-xs  { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; }
.tt-btn-lg  { padding: 12px 24px; font-size: 15px; border-radius: 12px; }
.tt-btn-full { width: 100%; justify-content: center; }
.tt-btn-icon { background: none; border: none; color: var(--tt-muted); padding: 5px; border-radius: 6px; font-size: 15px; transition: all var(--tt-t); }
.tt-btn-icon:hover { background: var(--tt-border); color: var(--tt-text); }
.tt-btn-icon.danger:hover { background: #FEE2E2; color: var(--tt-red); }
.tt-pro-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--tt-amber), var(--tt-amber-d)); color: #fff; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 800; }

/* Status badges */
.tt-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.tt-status-active    { background: #D1FAE5; color: #065F46; }
.tt-status-completed { background: var(--tt-border); color: var(--tt-text); }
.tt-status-overdue   { background: #FEE2E2; color: #991B1B; }
.tt-status-emergency { background: #FEE2E2; color: #7F1D1D; animation: tt-blink 1s infinite; }
.tt-status-invited   { background: #FFF7ED; color: #9A3412; }
.tt-status-pending   { background: #FEF3C7; color: #92400E; }

/* Empty state */
.tt-empty { text-align: center; padding: 48px 24px; background: var(--tt-surface); border-radius: var(--tt-r-lg); border: 2px dashed var(--tt-border); }
.tt-empty-ico { font-size: 44px; margin-bottom: 12px; }
.tt-empty h3  { font-size: 17px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px; }
.tt-empty p   { font-size: 13.5px; color: var(--tt-muted); margin-bottom: 18px; }
.tt-empty.sm  { padding: 24px; }

/* Inline form */
.tt-inline-form { background: var(--tt-surface); border: 1.5px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; }
.tt-inline-form h3 { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 14px; }
.tt-ifa { display: flex; gap: 10px; margin-top: 14px; }

/* Toggle switch */
.tt-ts { position: relative; display: inline-flex; }
.tt-ts input { display: none; }
.tt-ts-track { display: block; width: 42px; height: 23px; border-radius: 12px; background: var(--tt-border); cursor: pointer; transition: background var(--tt-t); position: relative; }
.tt-ts-track::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--tt-t); }
.tt-ts input:checked ~ .tt-ts-track { background: var(--tt-blue-l); }
.tt-ts input:checked ~ .tt-ts-track::after { transform: translateX(19px); }

/* Toast */
.tt-toast { position: fixed; bottom: 28px; right: 28px; z-index: 99999; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; font-family: var(--tt-font); box-shadow: var(--tt-sh-lg); animation: tt-toast-in .25s ease; pointer-events: none; max-width: 340px; }
.tt-toast.success { background: var(--tt-blue); color: #fff; }
.tt-toast.error   { background: var(--tt-red); color: #fff; }
@keyframes tt-toast-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* Modal */
.tt-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tt-modal.hidden  { display: none !important; }
.tt-modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(6px); }
.tt-modal-box { position: relative; z-index: 1; background: var(--tt-card); border-radius: 20px; padding: 30px; max-width: 720px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(15,23,42,.3); }
.tt-modal-close { position: absolute; top: 18px; right: 18px; background: var(--tt-surface); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; color: var(--tt-muted); display: flex; align-items: center; justify-content: center; transition: all var(--tt-t); }
.tt-modal-close:hover { background: var(--tt-border); color: var(--tt-ink); }
.tt-modal-actions { display: flex; gap: 12px; margin-top: 20px; }

/* Misc */
.tt-hidden { display: none !important; }
@keyframes tt-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* GPS / Leaflet */
.tt-gpx-map    { border-radius: 12px; border: 1px solid var(--tt-border); overflow: hidden; margin-top: 14px; min-height: 40px; }
.tt-tracker-widget { background: var(--tt-surface); border: 1.5px solid var(--tt-border); border-radius: 12px; padding: 16px; }
.tt-leaflet-map    { height: 280px; border-radius: 12px; border: 1px solid var(--tt-border); overflow: hidden; }

/* Pricing */
.tt-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tt-pricing-card { border: 1.5px solid var(--tt-border); border-radius: 16px; padding: 24px; position: relative; background: #fff; box-shadow: var(--tt-sh); }
.tt-pricing-pro  { border-color: var(--tt-amber); }
.tt-pricing-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--tt-amber), var(--tt-amber-d)); color: #fff; padding: 3px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tt-pricing-plan  { font-size: 15px; font-weight: 700; color: var(--tt-ink); text-align: center; margin-bottom: 10px; }
.tt-pricing-price { text-align: center; }
.tt-price-amount  { font-size: 34px; font-weight: 800; color: var(--tt-ink); }
.tt-pricing-period{ text-align: center; font-size: 12px; color: var(--tt-muted); margin-bottom: 18px; }
.tt-pricing-features { list-style: none; margin-bottom: 20px; }
.tt-pricing-features li { padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--tt-border); }
.tt-pricing-features li:last-child { border-bottom: none; }
.tt-feat-ok::before { content: '✓'; color: var(--tt-green-d); font-weight: 800; }
.tt-feat-no { color: var(--tt-muted); }
.tt-feat-no::before { content: '✗'; color: var(--tt-border); }
.tt-pricing-action { text-align: center; }

/* Emergency card */
.tt-card-face { width: 340px; border-radius: 14px; overflow: hidden; box-shadow: var(--tt-sh-lg); font-family: var(--tt-font); }
.tt-card-front { background: var(--tt-red); }
.tt-card-back  { background: var(--tt-blue); }
.tt-card-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,.25); }
.tt-card-brand, .tt-card-label { color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; }
.tt-card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.tt-card-qr-area { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tt-card-qr-area img { border-radius: 8px; background: #fff; padding: 8px; }
.tt-card-scan-hint { color: rgba(255,255,255,.75); font-size: 12px; text-align: center; }
.tt-card-user-name { text-align: center; color: #fff; font-size: 17px; font-weight: 700; padding: 0 16px; }
.tt-card-emergency-number { text-align: center; color: rgba(255,255,255,.75); font-size: 12px; padding: 8px 16px 14px; }
.tt-card-back-body { padding: 12px 14px 14px; }
.tt-card-info-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 8px; }
.tt-card-info-row:last-child { border-bottom: none; margin-bottom: 0; }
.tt-card-info-key { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.45); }
.tt-card-info-val { font-size: 13px; font-weight: 600; color: #fff; }
.tt-blood { font-size: 19px; font-weight: 800; color: var(--tt-red); }

/* Scan page */
.tt-scan-page { font-family: var(--tt-font); max-width: 520px; margin: 0 auto; padding: 20px 16px 60px; color: var(--tt-ink); }
.tt-scan-container { border-radius: 20px; overflow: hidden; box-shadow: var(--tt-sh-lg); background: var(--tt-card); margin-bottom: 20px; }
.tt-pub-inactive .tt-scan-header  { background: var(--tt-ink); }
.tt-pub-active   .tt-scan-header  { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); }
.tt-pub-overdue  .tt-scan-header  { background: linear-gradient(135deg, var(--tt-red), var(--tt-red-d)); }
.tt-pub-emergency .tt-scan-header { background: linear-gradient(135deg, #7F1D1D, var(--tt-red-d)); animation: tt-urgent 2s infinite; }
.tt-scan-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.tt-scan-status-badge { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.95); font-size: 15px; font-weight: 700; }
.tt-scan-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: tt-blink 1.5s infinite; }
.tt-scan-logo { color: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tt-scan-alert-banner { background: #FEF2F2; color: var(--tt-red-d); padding: 13px 24px; font-size: 14px; font-weight: 500; border-bottom: 1px solid #FECACA; text-align: center; }
.tt-scan-hiker { display: flex; align-items: center; gap: 16px; padding: 22px 24px 14px; border-bottom: 1px solid var(--tt-border); }
.tt-hiker-avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-pub-overdue .tt-hiker-avatar,.tt-pub-emergency .tt-hiker-avatar { background: linear-gradient(135deg, var(--tt-red), var(--tt-red-d)); }
.tt-hiker-name { font-size: 17px; font-weight: 700; color: var(--tt-ink); }
.tt-hiker-sub  { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-scan-details { padding: 14px 24px; display: flex; flex-direction: column; gap: 9px; }
.tt-detail-row { display: flex; gap: 10px; font-size: 14px; }
.tt-detail-key { font-weight: 600; color: var(--tt-muted); min-width: 110px; flex-shrink: 0; }
.tt-detail-val { color: var(--tt-ink); }
.tt-scan-footer { padding: 14px 24px; border-top: 1px solid var(--tt-border); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--tt-muted); }
.tt-scan-footer strong { color: var(--tt-blue); }
.tt-scan-emergency-nums a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: var(--tt-red); color: #fff; border-radius: 20px; text-decoration: none; font-size: 12px; font-weight: 700; margin-left: 6px; }
.tt-scan-inactive { text-align: center; padding: 48px 24px; }
.tt-scan-inactive-icon { font-size: 56px; margin-bottom: 10px; }
.tt-scan-inactive h2 { font-size: 18px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px; }
.tt-scan-inactive p  { font-size: 13.5px; color: var(--tt-muted); }
.tt-overdue-badge { background: #FEE2E2; color: var(--tt-red-d); padding: 2px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.tt-login-prompt { text-align: center; padding: 40px 20px; background: var(--tt-surface); border-radius: var(--tt-r-lg); border: 2px dashed var(--tt-border); color: var(--tt-muted); font-family: var(--tt-font); }
.tt-login-prompt a { color: var(--tt-blue); font-weight: 600; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tt-tags-layout      { grid-template-columns: 1fr; }
  .tt-settings-layout  { grid-template-columns: 1fr; }
  .tt-partner-layout   { grid-template-columns: 1fr; }
  .tt-kpi-grid         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tt-emergency-grid { grid-template-columns: 1fr; }
  .tt-family-grid    { grid-template-columns: 1fr; }
  .tt-stats-hero     { grid-template-columns: 1fr 1fr; }
  .tt-partner-kpis   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tt-dashboard.v4 { flex-direction: column; }
  .tt-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 200; transform: translateX(-100%); transition: transform .25s ease; width: 280px; }
  .tt-sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  .tt-topbar { display: flex !important; }
  .tt-panel  { padding: 18px; gap: 16px; }
  .tt-grid2  { grid-template-columns: 1fr; }
  .tt-sport-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-hero-banner { flex-direction: column; align-items: flex-start; }
  .tt-atm-grid { grid-template-columns: 1fr; }
  .tt-partner-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .tt-kpi-grid    { grid-template-columns: 1fr 1fr; }
  .tt-stats-hero  { grid-template-columns: 1fr; }
  .tt-sport-grid  { grid-template-columns: repeat(2, 1fr); }
  .tt-pricing-grid{ grid-template-columns: 1fr; }
}
@media print {
  .tt-sidebar, .tt-topbar, .tt-modal-actions, .tt-modal-close { display: none !important; }
  .tt-card-face { break-inside: avoid; }
  @page { margin: 10mm; }
}

/* ══════════════════════════════════════════════
   MISSING CLASS PATCH — v4.2 comprehensive fix
   ══════════════════════════════════════════════ */

/* ── Overview: Active Tour Banner ── */
.tt-active-banner {
  background: linear-gradient(135deg, var(--tt-blue) 0%, var(--tt-blue-m) 60%, var(--tt-blue-l) 100%);
  border-radius: var(--tt-r-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--tt-sh-md);
  color: #fff;
  flex-wrap: wrap;
}
.tt-active-banner.overdue { background: linear-gradient(135deg, #7F1D1D, var(--tt-red)); animation: tt-urgent 2s ease-in-out infinite; }
.tt-active-banner-left  { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tt-active-banner-right { display: flex; gap: 8px; flex-shrink: 0; }
.tt-active-indicator { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.tt-live-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(16,185,129,.5); animation: tt-pulse-ring 1.5s infinite; }
.tt-active-info { min-width: 0; }
.tt-active-sport-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.18); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.tt-active-route { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-active-meta  { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.75); margin-top: 4px; }
.tt-danger  { color: #FECACA; font-weight: 700; }
.tt-danger-text { color: var(--tt-red); font-weight: 600; }
.tt-btn-outline-white { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.tt-btn-outline-white:hover { background: rgba(255,255,255,.25); }
.tt-btn-danger-outline { background: rgba(239,68,68,.2); border: 1.5px solid rgba(239,68,68,.5); color: #fff; }
.tt-btn-danger-outline:hover { background: rgba(239,68,68,.4); }

/* CTA Banner inner elements */
.tt-start-cta-icon  { font-size: 36px; flex-shrink: 0; }
.tt-start-cta-title { font-size: 16px; font-weight: 700; color: var(--tt-ink); }
.tt-start-cta-sub   { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-start-cta-arrow { width: 22px; height: 22px; color: var(--tt-muted); margin-left: auto; }

/* Readiness / Safety card internals */
.tt-readiness-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.tt-readiness-sub    { font-size: 12.5px; color: var(--tt-muted); margin-top: 2px; }
.tt-readiness-checks { display: flex; flex-direction: column; gap: 7px; }
.tt-check-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.tt-check-item.done .tt-check-icon { color: var(--tt-green); font-weight: 800; }
.tt-check-item.todo .tt-check-icon { color: var(--tt-border); }
.tt-check-icon  { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px; }
.tt-check-label { flex: 1; }
.tt-check-item.done .tt-check-label { color: var(--tt-muted); }
.tt-check-fix   { background: none; border: none; font-size: 12px; color: var(--tt-blue-l); font-weight: 600; white-space: nowrap; transition: color var(--tt-t); }
.tt-check-fix:hover { color: var(--tt-blue); }

/* KPI card (old class used in overview) */
.tt-kpi { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; box-shadow: var(--tt-sh); }
.tt-kpi-val { font-size: 30px; font-weight: 800; color: var(--tt-ink); line-height: 1; }
.tt-kpi-lbl { font-size: 12px; color: var(--tt-muted); margin-top: 4px; font-weight: 500; }

/* Recent tour items in overview */
.tt-recent-tour-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--tt-border); transition: background var(--tt-t); }
.tt-recent-tour-item:last-child { border-bottom: none; }
.tt-recent-tour-item:hover { background: var(--tt-surface); }
.tt-recent-sport-dot { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.tt-recent-info { flex: 1; min-width: 0; }
.tt-recent-name { font-size: 14px; font-weight: 600; color: var(--tt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-recent-meta { font-size: 12px; color: var(--tt-muted); margin-top: 2px; }
.tt-link-btn    { background: none; border: none; color: var(--tt-blue-l); font-size: 13px; font-weight: 600; transition: color var(--tt-t); }
.tt-link-btn:hover { color: var(--tt-blue); }

/* ATM (Active Tour Manager) internals */
.tt-active-tour-manager { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh); }
.tt-atm-title-area { display: flex; align-items: center; gap: 14px; }
.tt-atm-sport-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.tt-atm-hdr        { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tt-atm-detail-icon { font-size: 16px; margin-bottom: 2px; }
.tt-atm-detail-val  { font-size: 16px; font-weight: 700; color: var(--tt-ink); margin-top: 2px; }
.tt-atm-waypoints   { padding: 14px 22px; border-top: 1px solid var(--tt-border); }
.tt-atm-wp-label    { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); margin-bottom: 6px; }
.tt-atm-wp-text     { font-size: 13.5px; color: var(--tt-text); white-space: pre-wrap; font-family: var(--tt-font); }
.tt-atm-gps         { padding: 14px 22px; border-top: 1px solid var(--tt-border); }
.tt-status-lg       { font-size: 13px; padding: 5px 14px; }

/* Form helpers */
.tt-form-section    { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-tour-form       { display: flex; flex-direction: column; gap: 16px; }
.tt-sport-selector-label { font-size: 12.5px; font-weight: 600; color: var(--tt-text); margin-bottom: 10px; }
.tt-sport-field     { display: contents; }
.tt-sport-field.tt-hidden { display: none !important; }
.tt-field-label     { font-size: 12.5px; font-weight: 600; color: var(--tt-text); }
.tt-field-hint      { font-size: 11.5px; color: var(--tt-muted); margin-top: 3px; }
.tt-field-link      { color: var(--tt-blue-l); font-size: 12px; font-weight: 600; }
.tt-help-text       { font-size: 12.5px; color: var(--tt-muted); }
.tt-input-readonly  { background: var(--tt-surface); color: var(--tt-muted); }
.tt-num-field       { border: none; text-align: center; width: 56px; flex: 1; height: 100%; font-size: 15px; font-weight: 700; font-family: var(--tt-font); }
.tt-num-field:focus { outline: none; }
.tt-avl-label       { font-size: 10px; font-weight: 600; color: var(--tt-text); }
.tt-waypoint-list   { display: flex; flex-direction: column; gap: 7px; }
.tt-contact-preview { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 16px 20px; box-shadow: var(--tt-sh); }
.tt-contact-pill-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--tt-blue); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tt-start-btn-icon  { font-size: 20px; }
.tt-warn-box        { background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: #92400E; display: flex; align-items: center; gap: 10px; }

/* Tags: download-qr, print-card are button classes — style via .tt-btn-ghost */
.tt-download-qr,
.tt-print-card  { cursor: pointer; }
.tt-tag-chip    { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--tt-border); color: var(--tt-text); }

/* Emergency / contacts */
.tt-contact-v3-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-contact-v3-body   { flex: 1; min-width: 0; }
.tt-contact-v3-links  { font-size: 12.5px; color: var(--tt-muted); margin-top: 2px; }
.tt-contact-v3-delete { background: none; border: none; color: var(--tt-muted); font-size: 16px; padding: 4px; border-radius: 6px; transition: all var(--tt-t); }
.tt-contact-v3-delete:hover { color: var(--tt-red); background: #FEE2E2; }

/* Settings */
.tt-settings-group-title { font-size: 13.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--tt-border); display: flex; align-items: center; gap: 8px; }
.tt-toggle-group  { display: flex; flex-direction: column; gap: 0; }
.tt-toggle-label  { display: flex; flex-direction: column; gap: 2px; }
.tt-account-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-upgrade-box   { background: linear-gradient(135deg, #FFFBEB, #FFF7ED); border: 1px solid #FDE68A; border-radius: var(--tt-r-lg); padding: 22px; box-shadow: var(--tt-sh); }
.tt-upgrade-box-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tt-upgrade-box-icon   { font-size: 26px; }
.tt-upgrade-box-title  { font-size: 15px; font-weight: 700; color: var(--tt-ink); }
.tt-upgrade-box-sub    { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-upgrade-icon  { font-size: 22px; }
.tt-upgrade-text  { font-size: 13px; font-weight: 700; color: #fff; }
.tt-upgrade-sub   { font-size: 11.5px; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.tt-pro-active-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--tt-green), var(--tt-green-d)); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.tt-sc-score.good { background: #D1FAE5; color: #065F46; }
.tt-sc-score.mid  { background: #FEF3C7; color: #92400E; }
.tt-sc-score.low  { background: #FEE2E2; color: #991B1B; }

/* Panel header fixes */
.tt-ph-title { font-size: 24px; font-weight: 800; color: var(--tt-ink); letter-spacing: -.4px; }
.tt-ph-sub   { font-size: 14px; color: var(--tt-muted); margin-top: 3px; }

/* Misc */
.tt-bar-label     { font-size: 10px; color: var(--tt-muted); }
.tt-empty-panel   { text-align: center; padding: 48px 24px; background: var(--tt-surface); border-radius: var(--tt-r-lg); border: 2px dashed var(--tt-border); }
.tt-empty-panel-icon { font-size: 44px; margin-bottom: 12px; }
.tt-emergency-card-wrap { max-width: 360px; margin: 0 auto; }
.tt-modal-backdrop  { position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(6px); }
.tt-modal-close-btn { position: absolute; top: 18px; right: 18px; background: var(--tt-surface); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; color: var(--tt-muted); display: flex; align-items: center; justify-content: center; transition: all var(--tt-t); }
.tt-modal-content  { position: relative; z-index: 1; }
.tt-live-ring      { display: block; }

/* ══════════════════════════════════════════════
   SCAN PAGE — COMPLETE REDESIGN
   ══════════════════════════════════════════════ */
body.trailtag-scan-page {
  background: #EFF4F9;
  min-height: 100vh;
}

.tt-scan-page {
  font-family: var(--tt-font);
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  color: var(--tt-ink);
}

/* ── Inactive state ── */
.tt-scan-inactive-wrap {
  background: var(--tt-card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(15,23,42,.12);
  text-align: center;
}
.tt-scan-inactive-top {
  background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
  padding: 36px 24px 28px;
}
.tt-scan-inactive-icon { font-size: 56px; line-height: 1; }
.tt-scan-icon          { font-size: 56px; line-height: 1; display: block; }
.tt-scan-inactive h1, .tt-scan-title {
  font-size: 22px; font-weight: 800; color: #fff; margin: 12px 0 6px;
}
.tt-scan-inactive p, .tt-scan-desc {
  font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0;
}
.tt-scan-inactive-bottom { padding: 20px 24px 24px; }
.tt-scan-tag-uid {
  font-family: var(--tt-mono);
  font-size: 11.5px;
  color: var(--tt-muted);
  background: var(--tt-surface);
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-block;
  margin-top: 12px;
}
.tt-scan-powered {
  font-size: 11px;
  color: var(--tt-muted);
  margin-top: 10px;
}

/* ── Active scan card ── */
.tt-scan-card {
  background: var(--tt-card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(15,23,42,.14);
  margin-bottom: 16px;
}

.tt-scan-top { position: relative; overflow: hidden; }
.tt-scan-top.inactive { background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%); }
.tt-scan-top.active   { background: linear-gradient(145deg, #1E3A5F 0%, #2C5282 70%, #3B6FA8 100%); }
.tt-scan-top.overdue  { background: linear-gradient(145deg, #7F1D1D 0%, #DC2626 100%); animation: tt-urgent 2s ease-in-out infinite; }
.tt-scan-top.emergency{ background: linear-gradient(145deg, #450A0A 0%, #991B1B 100%); animation: tt-urgent 1s ease-in-out infinite; }
.tt-scan-top::after {
  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

.tt-scan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 0;
}
.tt-scan-logo-text {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  letter-spacing: .5px;
}
.tt-scan-logo-text span { color: var(--tt-green); }
.tt-scan-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.tt-scan-live-badge.inactive { background: rgba(255,255,255,.08); opacity: .7; }
.tt-scan-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tt-green);
  animation: tt-blink 1.2s infinite;
}

.tt-scan-hero {
  padding: 20px 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tt-scan-avatar {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tt-scan-avatar.inactive { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.tt-scan-hero-info {}
.tt-scan-person-name { font-size: 20px; font-weight: 800; color: #fff; }
.tt-scan-person-sub  { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }
.tt-scan-status-row  { padding: 0 22px 20px; display: flex; align-items: center; gap: 10px; }
.tt-scan-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.tt-scan-status-dot2 {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tt-green);
  animation: tt-blink 1.5s infinite;
}
.tt-scan-overdue-pill {
  background: rgba(254,226,226,.2);
  border-color: rgba(252,165,165,.5);
}
.tt-scan-overdue-pill .tt-scan-status-dot2 { background: #FECACA; }

/* Alert banner */
.tt-scan-alert {
  background: #FEF2F2;
  color: var(--tt-red-d);
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid #FECACA;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-scan-alert-icon { font-size: 16px; flex-shrink: 0; }

/* Detail rows */
.tt-scan-details {
  padding: 6px 0;
}
.tt-detail-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--tt-border);
  transition: background var(--tt-t);
}
.tt-detail-card:last-child { border-bottom: none; }
.tt-detail-card:hover { background: var(--tt-surface); }
.tt-detail-card.tt-detail-danger .tt-detail-label { color: var(--tt-red-d); }
.tt-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tt-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tt-detail-icon img.emoji { width: 18px !important; height: 18px !important; }
.tt-detail-body   {}
.tt-detail-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tt-muted); margin-bottom: 3px; }
.tt-detail-value  { font-size: 15px; font-weight: 600; color: var(--tt-ink); }
.tt-detail-sub    { font-size: 13px; color: var(--tt-muted); margin-top: 4px; line-height: 1.5; }
.tt-detail-overdue { font-size: 12.5px; color: var(--tt-red); font-weight: 700; margin-top: 4px; }

/* Scan action buttons */
.tt-scan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  border-top: 1px solid var(--tt-border);
  background: var(--tt-surface);
}
.tt-scan-actions-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tt-muted);
  margin-bottom: 4px;
}
.tt-scan-btns { display: flex; gap: 10px; }
.tt-scan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--tt-font);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--tt-t);
  flex: 1;
  line-height: 1;
}
.tt-scan-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tt-scan-btn-emergency {
  background: var(--tt-red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(239,68,68,.35);
}
.tt-scan-btn-emergency:hover { background: var(--tt-red-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239,68,68,.45); }
.tt-scan-btn-primary {
  background: var(--tt-blue);
  color: #fff;
}
.tt-scan-btn-primary:hover { background: var(--tt-blue-m); transform: translateY(-1px); }

/* Scan footer */
.tt-scan-footer {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tt-border);
  font-size: 12px;
  color: var(--tt-muted);
}
.tt-scan-footer strong { color: var(--tt-blue); }

/* GPS map */
.tt-scan-map-wrap {
  background: var(--tt-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--tt-sh-md);
  margin-top: 16px;
}
.tt-scan-map-title {
  padding: 16px 22px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tt-ink);
  border-bottom: 1px solid var(--tt-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-scan-map-title img.emoji { width: 18px !important; height: 18px !important; }
.tt-scan-map {
  width: 100%;
  height: 260px;
  border: none;
  display: block;
}
.tt-map-time {
  padding: 10px 22px;
  font-size: 12px;
  color: var(--tt-muted);
  border-top: 1px solid var(--tt-border);
  text-align: center;
}

/* Scan page — Powered by TrailTag footer */
.tt-scan-page-footer {
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
  color: var(--tt-muted);
}
.tt-scan-page-footer a { color: var(--tt-blue-l); font-weight: 600; text-decoration: none; }

/* ── Hiker sub-info ── */
.tt-hiker-sub  { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-hiker-info { flex: 1; min-width: 0; }
.tt-hiker-meta { font-size: 13px; color: var(--tt-muted); margin-top: 2px; }

.tt-wp-remove { background: none; border: none; color: var(--tt-muted); font-size: 16px; padding: 4px 6px; border-radius: 6px; transition: all var(--tt-t); cursor: pointer; }
.tt-wp-remove:hover { color: var(--tt-red); background: #FEE2E2; }

/* ══════════════════════════════════════════════
   PARTNER PORTAL COMPLETE CSS v4.3
   ══════════════════════════════════════════════ */

/* Login */
.tt-partner-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 32px 16px;
}
.tt-partner-login-card {
  background: var(--tt-card);
  border-radius: 24px;
  box-shadow: var(--tt-sh-lg);
  padding: 40px;
  width: 100%;
  max-width: 500px;
}
.tt-pl-brand { font-size: 52px; text-align: center; margin-bottom: 16px; }
.tt-pl-title  { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 6px; }
.tt-pl-sub    { font-size: 14px; color: var(--tt-muted); text-align: center; margin-bottom: 28px; }
.tt-pl-form   { display: flex; flex-direction: column; gap: 12px; }
.tt-pl-divider { text-align: center; font-size: 13px; color: var(--tt-muted); position: relative; margin: 8px 0; }
.tt-pl-divider::before, .tt-pl-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--tt-border); }
.tt-pl-divider::before { left: 0; } .tt-pl-divider::after { right: 0; }
.tt-pl-register-info, .tt-pl-guest-reg { background: var(--tt-surface); border-radius: 14px; padding: 18px; margin-top: 4px; }
.tt-pl-reg-title  { font-size: 13.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px; }
.tt-pl-reg-text   { font-size: 13px; color: var(--tt-muted); margin-bottom: 10px; }
.tt-pl-link-box   { background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-pl-link-text  { font-size: 12px; color: var(--tt-muted); font-family: var(--tt-mono); word-break: break-all; }

/* Topbar */
.tt-partner-topbar { 
  height: 54px; background: #1E3A5F; display: flex; align-items: center; padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 100;
}
.tt-partner-topbar-logo { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.tt-partner-topbar-logo span { color: var(--tt-green); }
.tt-partner-topbar-org  { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.tt-partner-topbar-type { font-size: 12.5px; color: rgba(255,255,255,.5); }
.tt-partner-topbar-logout { margin-left: auto; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--tt-t); }
.tt-partner-topbar-logout:hover { background: rgba(255,255,255,.25); color: #fff; }

/* Content */
.tt-partner-content { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.tt-partner-kpis    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tt-partner-kpi     { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--tt-sh); text-align: center; }
.tt-partner-kpi-val { font-size: 28px; font-weight: 800; color: var(--tt-ink); line-height: 1; }
.tt-partner-kpi-lbl { font-size: 11.5px; color: var(--tt-muted); margin-top: 4px; font-weight: 500; }

/* Tab Navigation */
.tt-partner-tabs { display: flex; gap: 4px; background: var(--tt-surface); border-radius: 14px; padding: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.tt-ptab { background: none; border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--tt-muted); cursor: pointer; transition: all var(--tt-t); font-family: var(--tt-font); white-space: nowrap; }
.tt-ptab:hover { background: var(--tt-card); color: var(--tt-ink); }
.tt-ptab.active { background: var(--tt-card); color: var(--tt-ink); box-shadow: var(--tt-sh); }
.tt-ptab-panel { }

/* Layout */
.tt-partner-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .tt-partner-layout { grid-template-columns: 1fr; } }

/* Search card */
.tt-partner-search-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 16px; padding: 20px; box-shadow: var(--tt-sh); }
.tt-ps-tabs { display: flex; gap: 4px; background: var(--tt-surface); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.tt-ps-tab  { background: none; border: none; border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--tt-muted); cursor: pointer; transition: all var(--tt-t); font-family: var(--tt-font); }
.tt-ps-tab:hover  { color: var(--tt-ink); }
.tt-ps-tab.active { background: var(--tt-card); color: var(--tt-ink); box-shadow: var(--tt-sh); }
.tt-ps-row { display: flex; gap: 8px; }

/* Active tour rows */
.tt-active-tour-row { background: var(--tt-surface); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--tt-border); transition: all var(--tt-t); }
.tt-active-tour-row:hover { border-color: var(--tt-blue-l); box-shadow: var(--tt-sh); }
.tt-active-tour-row.overdue { border-color: var(--tt-red); background: #FEF2F2; }
.tt-atr-name  { font-size: 13.5px; font-weight: 700; color: var(--tt-ink); }
.tt-atr-route { font-size: 12px; color: var(--tt-muted); margin-top: 1px; flex: 1; }
.tt-atr-time  { font-size: 12px; font-weight: 700; color: var(--tt-muted); white-space: nowrap; }

/* Brand card */
.tt-brand-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 16px; padding: 22px; box-shadow: var(--tt-sh); }
.tt-brand-title { font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.tt-brand-logo-area { border: 2px dashed var(--tt-border); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer; transition: all var(--tt-t); background: var(--tt-surface); min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tt-brand-logo-area:hover { border-color: var(--tt-blue-l); background: #EFF6FF; }
.tt-brand-logo-hint { font-size: 12px; color: var(--tt-muted); }
.tt-brand-colors { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tt-brand-color-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tt-muted); font-weight: 600; }
.tt-brand-color-item input[type=color] { width: 44px; height: 32px; border-radius: 8px; border: 1px solid var(--tt-border); cursor: pointer; padding: 2px; }
.tt-brand-qr-preview { display: flex; flex-direction: column; align-items: center; margin: 16px 0; }
.tt-qr-sticker-preview { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 24px rgba(0,0,0,.1); border: 1px solid var(--tt-border); display: inline-flex; flex-direction: column; align-items: center; }

/* Result card */
.tt-result-card { background: var(--tt-card); border-radius: 16px; overflow: hidden; box-shadow: var(--tt-sh-md); }
.tt-result-hdr  { background: linear-gradient(135deg, #1E3A5F, #2C5282); padding: 20px; }
.tt-result-hdr.overdue { background: linear-gradient(135deg, #7F1D1D, #DC2626); animation: tt-urgent 2s infinite; }
.tt-result-av-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tt-result-av   { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.3); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-result-name { font-size: 18px; font-weight: 800; color: #fff; }
.tt-result-time-pill { display: inline-flex; align-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 700; color: #fff; }
.tt-result-time-pill.danger { background: rgba(254,202,202,.2); border-color: rgba(252,165,165,.5); }
.tt-result-body { padding: 4px 0; }
.tt-result-row  { display: flex; padding: 12px 20px; border-bottom: 1px solid var(--tt-border); }
.tt-result-row:last-child { border-bottom: none; }
.tt-result-key  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); width: 110px; flex-shrink: 0; padding-top: 2px; }
.tt-result-val  { font-size: 14.5px; font-weight: 600; color: var(--tt-ink); }
.tt-partner-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--tt-border); background: var(--tt-surface); }

/* Medical block */
.tt-medical-block { padding: 16px 20px; background: #FEF2F2; border-top: 2px solid #FECACA; }
.tt-medical-block h3 { font-size: 13px; font-weight: 700; color: var(--tt-red-d); margin-bottom: 10px; }
.tt-med-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-med-row  { background: #fff; border-radius: 8px; padding: 8px 12px; }
.tt-med-key  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); }
.tt-med-val  { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-top: 2px; }
.tt-med-val.tt-blood { font-size: 18px; color: var(--tt-red); }

/* Partner table */
.tt-partner-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tt-partner-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); border-bottom: 1px solid var(--tt-border); }
.tt-partner-table td { padding: 12px 14px; border-bottom: 1px solid var(--tt-border); vertical-align: middle; }
.tt-partner-table tr:last-child td { border-bottom: none; }
.tt-partner-table tr.active-row td { background: #F0FDF4; }
.tt-partner-table tr:hover td { background: var(--tt-surface); }
.tt-ptable-name { font-weight: 600; color: var(--tt-ink); }
.tt-ptable-sub  { font-size: 11.5px; color: var(--tt-muted); margin-top: 1px; }
.tt-uid-code    { font-family: var(--tt-mono); font-size: 12px; background: var(--tt-surface); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--tt-border); }

/* Toggle row */
.tt-toggle-row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tt-border); gap: 14px; }
.tt-toggle-row:last-child { border-bottom: none; }
.tt-toggle-info { flex: 1; }
.tt-toggle-label { font-size: 14px; font-weight: 600; color: var(--tt-ink); cursor: default; }
.tt-toggle-desc  { font-size: 12px; color: var(--tt-muted); margin-top: 2px; }

/* Partner wrap full width */
.tt-partner-wrap { min-height: 100vh; background: var(--tt-surface); color: var(--tt-ink); font-family: var(--tt-font); }

@media (max-width: 768px) {
  .tt-partner-kpis { grid-template-columns: 1fr 1fr; }
  .tt-partner-tabs { gap: 2px; }
  .tt-ptab { padding: 7px 10px; font-size: 12px; }
  .tt-partner-content { padding: 16px 12px 48px; }
}

/* ══════════════════════════════════════════════
   v4.5 — New UI components
   ══════════════════════════════════════════════ */

/* ── Tag card visual fix ── */
.tt-tag-card { position: relative; }
.tt-tag-card .tt-tag-name { font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 4px; }
.tt-tag-plate svg { width: 14px; height: 14px; }
.tt-tag-uid { font-family: var(--tt-mono); font-size: 11px; color: var(--tt-muted); background: var(--tt-surface); border-radius: 5px; padding: 2px 6px; }

/* ── Emergency panel: emoji size fixes ── */
.tt-ec-title img.emoji,
.tt-secure-note img.emoji,
.tt-blood-btn img.emoji { width: 18px !important; height: 18px !important; }
.tt-blood-btn { width: 52px; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 800; }
.tt-fld > label img.emoji { width: 16px !important; height: 16px !important; }
.tt-medical-section img.emoji { width: 18px !important; height: 18px !important; }

/* ── Tour mode buttons ── */
.tt-tour-mode-btns { display: flex; flex-direction: column; gap: 10px; }
.tt-plan-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: var(--tt-surface); border: 2px dashed var(--tt-border);
  font-size: 14.5px; font-weight: 600; font-family: var(--tt-font);
  color: var(--tt-text); cursor: pointer; transition: all var(--tt-t);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tt-plan-btn:hover { border-color: var(--tt-blue-l); color: var(--tt-blue); background: #EFF6FF; }

/* ── Tour type toggle ── */
.tt-tour-type-toggle { display: flex; gap: 8px; background: var(--tt-surface); border-radius: 12px; padding: 4px; }
.tt-type-btn { flex: 1; padding: 9px; border-radius: 8px; border: none; font-size: 13px; font-weight: 700; font-family: var(--tt-font); color: var(--tt-muted); background: none; cursor: pointer; transition: all var(--tt-t); }
.tt-type-btn.active { background: var(--tt-card); color: var(--tt-ink); box-shadow: var(--tt-sh); }
.tt-type-btn:hover:not(.active) { color: var(--tt-ink); }

/* ── Overnight accommodation cards ── */
.tt-overnight-card {
  background: var(--tt-surface); border: 1px solid var(--tt-border);
  border-radius: 14px; padding: 16px; margin-bottom: 10px; position: relative;
}
.tt-overnight-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tt-overnight-night-badge { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-overnight-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt-overnight-remove { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--tt-muted); font-size: 16px; cursor: pointer; padding: 4px; border-radius: 6px; transition: all var(--tt-t); }
.tt-overnight-remove:hover { color: var(--tt-red); background: #FEE2E2; }
.tt-oa-type-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tt-oa-type-btn { padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--tt-border); background: none; font-size: 12px; font-weight: 600; font-family: var(--tt-font); color: var(--tt-text); cursor: pointer; transition: all var(--tt-t); }
.tt-oa-type-btn.sel { border-color: var(--tt-blue-l); background: #EFF6FF; color: var(--tt-blue); }

/* ── Planned tours card (overview) ── */
.tt-planned-tours-card {
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg); overflow: hidden; box-shadow: var(--tt-sh);
  margin-bottom: 14px;
}
.tt-planned-header { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--tt-border); gap: 10px; }
.tt-planned-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); flex: 1; }
.tt-planned-count { background: var(--tt-blue); color: #fff; border-radius: 20px; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.tt-planned-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--tt-border); transition: background var(--tt-t); }
.tt-planned-row:last-child { border-bottom: none; }
.tt-planned-row:hover { background: var(--tt-surface); }
.tt-planned-sport { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.tt-planned-sport img.emoji { width: 22px !important; height: 22px !important; }
.tt-planned-info { flex: 1; min-width: 0; }
.tt-planned-name { font-size: 14px; font-weight: 600; color: var(--tt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-planned-meta { font-size: 12px; color: var(--tt-muted); margin-top: 2px; }

/* ── Statistics panel header fix ── */
#tt-panel-stats .tt-ph { margin-bottom: 0; }
.tt-sh-lbl { font-size: 13px; color: var(--tt-muted); margin-top: 5px; font-weight: 500; }
.tt-chart-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); margin-bottom: 16px; }
.tt-bar-val { font-size: 11px; font-weight: 700; color: var(--tt-blue); min-height: 16px; }

/* ── Family panel fixes ── */
.tt-family-header-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); border-radius: var(--tt-r-lg); padding: 22px 24px; margin-bottom: 16px; color: #fff; flex-wrap: wrap; }
.tt-family-icon { font-size: 36px; line-height: 1; }
.tt-family-icon img.emoji { width: 36px !important; height: 36px !important; }
.tt-family-title { font-size: 20px; font-weight: 800; }
.tt-family-sub   { font-size: 13px; opacity: .75; margin-top: 2px; }

.tt-family-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .tt-family-grid { grid-template-columns: 1fr; } }
.tt-family-members, .tt-family-invite { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; box-shadow: var(--tt-sh); }
.tt-family-members .tt-ec-title { font-size: 14px; }

.tt-invite-code-box { background: var(--tt-surface); border: 2px dashed var(--tt-border); border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 12px; }
.tt-invite-code { font-family: var(--tt-mono); font-size: 28px; font-weight: 800; color: var(--tt-ink); letter-spacing: 4px; }
.tt-invite-hint { font-size: 12px; color: var(--tt-muted); margin-top: 4px; }

.tt-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tt-border); }
.tt-member-row:last-child { border-bottom: none; }
.tt-member-av   { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-m)); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-member-name { font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt-member-email { font-size: 12px; color: var(--tt-muted); margin-top: 1px; }
.tt-member-status { margin-left: auto; }
.tt-member-active-tour { background: var(--tt-surface); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--tt-text); margin-bottom: 6px; border-left: 3px solid var(--tt-green); }
.tt-member-active-tour img.emoji { width: 14px !important; height: 14px !important; }
.tt-family-perks { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); padding: 20px; box-shadow: var(--tt-sh); }
.tt-perk-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--tt-border); }
.tt-perk-item:last-child { border-bottom: none; }
.tt-perk-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.tt-perk-icon img.emoji { width: 22px !important; height: 22px !important; }
.tt-perk-title { font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt-perk-desc  { font-size: 12.5px; color: var(--tt-muted); margin-top: 2px; }


/* ══════════════════════════════════════════════
   v4.6 — Visual bug fixes
   ══════════════════════════════════════════════ */

/* ── Secure note: no more giant lock emoji ── */
.tt-secure-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tt-green);
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.tt-secure-note img.emoji,
.tt-secure-note svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }

/* ── Medical section: kill giant emoji lock background ── */
#tt-panel-emergency .tt-ec img.emoji { width: 16px !important; height: 16px !important; }

/* ── Tags grid: proper layout ── */
.tt-tag-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}
.tt-tag-card {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* ── Leaflet map: fix tiling/rendering ── */
.tt-gpx-map {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.tt-gpx-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: #e8ecf0;
  border-radius: 12px;
}
/* WP theme img override — max-width/height only, never set px size here.
   The <style> block next to #tt-gpx-map handles tile sizing with ID specificity. */
.leaflet-container img {
  max-width: none !important;
  max-height: none !important;
}


/* ── Tour type toggle: fix visual ── */
.tt-tour-type-toggle { 
  border: 1px solid var(--tt-border);
}
.tt-type-btn img.emoji { width: 18px !important; height: 18px !important; }

/* ── Overnight section ── */
#tt-multi-day-section { margin-top: 14px; }
.tt-oa-section { margin-top: 10px; }

/* ── Panel grid fixes ── */
/* tt-panel-tags: uses standard .tt-panel rules, no override needed */
#tt-panel-tags.active { flex-direction: column; gap: 16px; }
#tt-panel-tags .tt-ph { margin-bottom: 4px; }

/* ══════════════════════════════════════════════
   v4.7 — Family panel + Tourlog details
   ══════════════════════════════════════════════ */

/* ── Family header ── */
.tt-family-header-card { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#1E3A5F,#2C5282); border-radius:var(--tt-r-lg); padding:20px 24px; margin-bottom:16px; color:#fff; flex-wrap:wrap; }
.tt-family-icon-wrap { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tt-family-hdr-text { flex:1; }
.tt-family-title { font-size:18px; font-weight:800; }
.tt-family-sub   { font-size:13px; opacity:.8; margin-top:3px; }

/* ── Family membership card (you're member of someone's family) ── */
.tt-family-membership-card { display:flex; align-items:center; gap:14px; background:var(--tt-card); border:2px solid var(--tt-blue-l); border-radius:var(--tt-r-lg); padding:16px 20px; margin-bottom:16px; }
.tt-fmc-av { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--tt-blue),var(--tt-blue-m)); color:#fff; font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tt-fmc-info { flex:1; }
.tt-fmc-name { font-size:15px; font-weight:700; color:var(--tt-ink); }
.tt-fmc-sub  { font-size:12px; color:var(--tt-muted); margin-top:2px; }

/* ── Family grid ── */
.tt-family-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
@media (max-width:960px) { .tt-family-grid { grid-template-columns:1fr; } }
.tt-family-col-main { display:flex; flex-direction:column; gap:0; background:var(--tt-card); border:1px solid var(--tt-border); border-radius:var(--tt-r-lg); overflow:hidden; box-shadow:var(--tt-sh); }
.tt-family-col-side { display:flex; flex-direction:column; gap:14px; }

/* ── Section title inside family ── */
.tt-family-section-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--tt-ink); padding:14px 20px; border-bottom:1px solid var(--tt-border); background:var(--tt-surface); }
.tt-family-section-divider { height:1px; background:var(--tt-border); margin:8px 0; }

/* ── Member rows inside family card ── */
.tt-member-row { display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--tt-border); transition:background var(--tt-t); }
.tt-member-row:last-child { border-bottom:none; }
.tt-member-row:hover { background:var(--tt-surface); }
.tt-member-me { background:linear-gradient(to right,#EFF6FF,transparent); }
.tt-member-av { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--tt-blue),var(--tt-blue-m)); color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tt-me-av { background:linear-gradient(135deg,#10B981,#059669); }
.tt-member-info { flex:1; min-width:0; }
.tt-member-name { font-size:14px; font-weight:700; color:var(--tt-ink); display:flex; align-items:center; gap:6px; }
.tt-me-tag { font-size:10px; font-weight:700; background:var(--tt-green); color:#fff; border-radius:20px; padding:1px 7px; }
.tt-member-email { font-size:12px; color:var(--tt-muted); margin-top:2px; }
.tt-member-tour-info { font-size:12.5px; color:var(--tt-text); margin-top:2px; display:flex; align-items:center; gap:5px; }
.tt-member-tour-info img.emoji { width:14px !important; height:14px !important; }

/* ── Overdue alert ── */
.tt-member-overdue-alert { display:flex; align-items:center; gap:8px; background:#FEF2F2; border-left:4px solid var(--tt-red); color:#991B1B; font-size:12.5px; font-weight:600; padding:10px 20px; }

/* ── Family empty ── */
.tt-family-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 20px; color:var(--tt-muted); text-align:center; }
.tt-family-empty-title { font-size:15px; font-weight:700; color:var(--tt-text); }
.tt-family-empty-sub   { font-size:13px; }

/* ── Invite card ── */
.tt-family-invite-card, .tt-family-join-card { background:var(--tt-card); border:1px solid var(--tt-border); border-radius:var(--tt-r-lg); padding:18px; box-shadow:var(--tt-sh); display:flex; flex-direction:column; gap:12px; }
.tt-fic-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--tt-ink); }
.tt-fic-code-box { background:var(--tt-surface); border:2px dashed var(--tt-border); border-radius:12px; padding:16px; text-align:center; }
.tt-invite-code { font-family:var(--tt-mono); font-size:28px; font-weight:800; color:var(--tt-ink); letter-spacing:4px; }
.tt-invite-hint { font-size:11.5px; color:var(--tt-muted); margin-top:4px; }
.tt-fic-link-row { display:flex; align-items:center; gap:6px; background:var(--tt-surface); border-radius:8px; padding:8px 10px; flex-wrap:wrap; }
.tt-fic-link-label { font-size:11px; font-weight:700; color:var(--tt-muted); white-space:nowrap; }
.tt-fic-link { font-family:var(--tt-mono); font-size:11px; color:var(--tt-blue); word-break:break-all; }
.tt-fic-already { font-size:13px; color:var(--tt-muted); background:var(--tt-surface); border-radius:10px; padding:12px; }
#tt-join-family-code { text-transform:uppercase; letter-spacing:3px; font-family:var(--tt-mono); }

/* ── Perks (upsell) ── */
.tt-family-perks { background:var(--tt-card); border:1px solid var(--tt-border); border-radius:var(--tt-r-lg); padding:20px; box-shadow:var(--tt-sh); }
.tt-perk-item { display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--tt-border); }
.tt-perk-item:last-child { border-bottom:none; }
.tt-perk-icon img.emoji { width:22px !important; height:22px !important; }
.tt-perk-title { font-size:14px; font-weight:700; color:var(--tt-ink); }
.tt-perk-desc  { font-size:12.5px; color:var(--tt-muted); margin-top:2px; }

/* ── Tour log detail drawer ── */
.tt-log-row { cursor:default; }
.tt-log-row:hover { background:var(--tt-surface); }
.tt-log-detail { background:var(--tt-surface); border-top:1px solid var(--tt-border); border-bottom:2px solid var(--tt-blue-l); }
.tt-log-detail-inner { padding:16px 20px; }
.tt-log-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:12px; }
.tt-ld-item { background:var(--tt-card); border:1px solid var(--tt-border); border-radius:10px; padding:10px 12px; }
.tt-ld-full { grid-column:1/-1; }
.tt-ld-key { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tt-muted); margin-bottom:4px; }
.tt-ld-val { font-size:13.5px; font-weight:600; color:var(--tt-ink); }
.tt-ld-section { margin-top:12px; background:var(--tt-card); border:1px solid var(--tt-border); border-radius:10px; overflow:hidden; }
.tt-ld-section-title { padding:9px 14px; background:var(--tt-surface); border-bottom:1px solid var(--tt-border); font-size:12px; font-weight:700; color:var(--tt-text); }
.tt-ld-companion { padding:8px 14px; border-bottom:1px solid var(--tt-border); font-size:13px; color:var(--tt-text); }
.tt-ld-companion:last-child { border-bottom:none; }
.tt-ld-overnight { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--tt-border); font-size:13px; flex-wrap:wrap; }
.tt-ld-overnight:last-child { border-bottom:none; }
.tt-ld-night-num { font-size:10px; font-weight:800; background:var(--tt-blue); color:#fff; border-radius:20px; padding:2px 8px; }
.tt-ld-meta { color:var(--tt-muted); font-size:12px; }
.tt-log-detail-btn { color:var(--tt-blue); border-color:var(--tt-blue-l); }
.tt-log-detail-btn:hover { background:var(--tt-blue-l); }


/* ══════════════════════════════════════════════
   v4.8 — TrailTag cards, scan overdue, family stats
   ══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TRAILTAG CARD REDESIGN
   ───────────────────────────────────────────── */
.tt-tag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.tt-tag-card { background:var(--tt-card); border:1.5px solid var(--tt-border); border-radius:18px; overflow:hidden; box-shadow:var(--tt-sh); transition:all var(--tt-t); display:flex; flex-direction:column; }
.tt-tag-card:hover { transform:translateY(-3px); box-shadow:var(--tt-sh-lg); }
.tt-tag-card.is-active { border-color:var(--tt-green); box-shadow:0 0 0 3px rgba(16,185,129,.12), var(--tt-sh-lg); }

/* Top section: Name + status */
.tt-tag-top { display:flex; align-items:flex-start; justify-content:space-between; padding:16px 18px 12px; gap:12px; }
.tt-tag-top-left { flex:1; min-width:0; }
.tt-tag-name { font-size:16px; font-weight:800; color:var(--tt-ink); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-tag-vehicle-row { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--tt-muted); }
.tt-tag-vehicle-row svg { flex-shrink:0; color:var(--tt-muted); }

/* Status badge */
.tt-tag-status-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--tt-surface); border:1px solid var(--tt-border); color:var(--tt-muted); white-space:nowrap; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.tt-tag-status-badge.active { background:#ECFDF5; border-color:#6EE7B7; color:#065F46; }
.tt-tag-pulse { width:7px; height:7px; border-radius:50%; background:#10B981; animation:tt-blink 2s infinite; flex-shrink:0; }

/* QR area - centered, prominent */
.tt-tag-qr-area { padding:0 24px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; justify-content:center; }
.tt-tag-qr-frame { background:var(--tt-surface); border-radius:16px; padding:14px; border:2px solid var(--tt-border); display:inline-flex; transition:border-color var(--tt-t); }
.tt-tag-qr-frame.active { border-color:var(--tt-green); background:#F0FDF4; }
.tt-tag-qr-frame img { display:block; border-radius:8px; }
.tt-tag-scan-hint { font-size:11px; color:var(--tt-muted); text-align:center; max-width:200px; line-height:1.4; }

/* Footer: stats + actions */
.tt-tag-footer { border-top:1px solid var(--tt-border); padding:12px 18px; background:var(--tt-surface); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tt-tag-stats { display:flex; align-items:center; gap:10px; }
.tt-tag-stat { text-align:center; }
.tt-tag-stat-val { font-size:15px; font-weight:800; color:var(--tt-ink); display:block; }
.tt-tag-stat-lbl { font-size:10px; font-weight:600; color:var(--tt-muted); text-transform:uppercase; letter-spacing:.05em; display:block; margin-top:1px; }
.tt-tag-uid-code { font-family:var(--tt-mono); font-size:12px; letter-spacing:1px; }
.tt-tag-stat-sep { width:1px; height:28px; background:var(--tt-border); }
.tt-tag-actions { display:flex; gap:4px; }
.tt-tag-action-btn { display:flex; align-items:center; gap:4px; padding:6px 8px; border:1.5px solid var(--tt-border); border-radius:8px; background:none; font-size:12px; font-weight:600; font-family:var(--tt-font); color:var(--tt-text); cursor:pointer; transition:all var(--tt-t); text-decoration:none; }
.tt-tag-action-btn:hover { border-color:var(--tt-blue-l); color:var(--tt-blue); background:#EFF6FF; }

/* ─────────────────────────────────────────────
   SCAN PAGE — OVERDUE / CONTACT-FIRST UX
   ───────────────────────────────────────────── */

/* Big overdue banner */
.tt-scan-overdue-banner { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#DC2626,#991B1B); color:#fff; border-radius:16px; padding:18px 20px; margin-bottom:16px; position:relative; overflow:hidden; animation:tt-pulse-border 2s infinite; }
.tt-scan-overdue-banner.emergency { background:linear-gradient(135deg,#7C3AED,#6D28D9); }
.tt-sob-pulse-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; border:2px solid rgba(255,255,255,.15); border-radius:50%; animation:tt-expand 3s ease-out infinite; pointer-events:none; }
.tt-sob-icon { flex-shrink:0; background:rgba(255,255,255,.15); border-radius:12px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.tt-sob-text { flex:1; }
.tt-sob-title { font-size:19px; font-weight:900; letter-spacing:-.3px; }
.tt-sob-sub   { font-size:13.5px; opacity:.85; margin-top:4px; }

@keyframes tt-expand { 0% { transform:translate(-50%,-50%) scale(0); opacity:.6; } 100% { transform:translate(-50%,-50%) scale(1); opacity:0; } }
@keyframes tt-pulse-border { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow:0 0 0 8px rgba(220,38,38,0); } }

/* Contact-first section */
.tt-scan-contact-first { background:var(--tt-card); border:1.5px solid #FCA5A5; border-radius:16px; padding:20px; margin-bottom:14px; }
.tt-scan-contact-first .tt-scf-step { background:#DC2626; color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em; padding:3px 10px; border-radius:20px; display:inline-flex; margin-bottom:8px; }
.tt-scf-title { font-size:16px; font-weight:800; color:var(--tt-ink); margin-bottom:4px; }
.tt-scf-sub   { font-size:13px; color:var(--tt-muted); margin-bottom:16px; }
.tt-scf-contacts { display:flex; flex-direction:column; gap:8px; }
.tt-scf-contact-btn { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; text-decoration:none; transition:all var(--tt-t); border:2px solid transparent; }
.tt-scf-contact-btn.primary { background:linear-gradient(135deg,#DC2626,#EF4444); color:#fff; box-shadow:0 2px 10px rgba(220,38,38,.3); }
.tt-scf-contact-btn.primary:hover { transform:translateY(-1px); box-shadow:0 4px 18px rgba(220,38,38,.4); }
.tt-scf-contact-btn.secondary { background:var(--tt-surface); border-color:var(--tt-border); color:var(--tt-text); }
.tt-scf-contact-btn.secondary:hover { border-color:var(--tt-blue-l); background:#EFF6FF; }
.tt-scf-btn-name { font-size:15px; font-weight:700; }
.tt-scf-btn-detail { font-size:12.5px; opacity:.8; margin-top:2px; }
.tt-scf-no-contact { background:var(--tt-surface); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--tt-muted); display:flex; align-items:center; gap:8px; }
.tt-scf-contact-info { background:var(--tt-surface); border-radius:10px; padding:12px 14px; }
.tt-scf-step2-hint { margin-top:12px; font-size:12.5px; color:var(--tt-muted); display:flex; align-items:center; gap:6px; border-top:1px solid var(--tt-border); padding-top:10px; }

/* Rescue section */
.tt-scan-rescue-section { background:var(--tt-card); border:1.5px solid var(--tt-border); border-radius:16px; padding:20px; margin-bottom:16px; }
.tt-scan-rescue-section .tt-scf-step { background:var(--tt-ink); color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em; padding:3px 10px; border-radius:20px; display:inline-flex; margin-bottom:8px; }
.tt-scan-rescue-section .step2 { background:var(--tt-ink); }
.tt-rescue-btns { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tt-rescue-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 10px; border-radius:12px; text-decoration:none; color:#fff; font-weight:800; transition:all var(--tt-t); }
.tt-rescue-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.tt-rescue-btn.rega     { background:linear-gradient(135deg,#DC2626,#991B1B); }
.tt-rescue-btn.emergency{ background:linear-gradient(135deg,#1E3A5F,#2C5282); }
.tt-rescue-btn.police   { background:linear-gradient(135deg,#1D4ED8,#1E40AF); }
.tt-rescue-btn.sanit    { background:linear-gradient(135deg,#059669,#065F46); }
.tt-rescue-num { font-size:26px; font-weight:900; letter-spacing:-1px; }
.tt-rescue-lbl { font-size:11px; opacity:.85; margin-top:2px; }

/* Countdown row */
.tt-scan-countdown-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.2); border-radius:10px; padding:10px 16px; margin:8px 0; font-size:14px; font-weight:700; color:#fff; }
.tt-scan-countdown-row.overdue { background:rgba(220,38,38,.3); animation:tt-pulse-border 2s infinite; }
.tt-scan-countdown-row svg { opacity:.8; flex-shrink:0; }

/* Overdue avatar */
.tt-scan-avatar.overdue-av { background:linear-gradient(135deg,#DC2626,#991B1B); animation:tt-blink 1.5s infinite; }

/* Card is-overdue state */
.tt-scan-card.is-overdue .tt-scan-top.overdue { background:linear-gradient(160deg,#DC2626,#7F1D1D); }

/* Inactive scan page */
.tt-scan-inactive-info { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; background:#F0FDF4; border-top:1px solid #BBF7D0; font-size:14px; color:var(--tt-text); }

/* ─────────────────────────────────────────────
   FAMILY STATISTICS BLOCK
   ───────────────────────────────────────────── */
.tt-family-stats-block { background:var(--tt-card); border:1px solid var(--tt-border); border-radius:var(--tt-r-lg); padding:20px; box-shadow:var(--tt-sh); }
.tt-family-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:600px) { .tt-family-stats-grid { grid-template-columns:repeat(2,1fr); } }
.tt-fam-stat { background:var(--tt-surface); border-radius:12px; padding:16px; text-align:center; }
.tt-fam-stat-val { font-size:28px; font-weight:900; color:var(--tt-ink); letter-spacing:-1px; }
.tt-fam-stat-lbl { font-size:11px; font-weight:600; color:var(--tt-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.tt-fam-gps-title { font-size:13px; font-weight:700; color:var(--tt-ink); margin-bottom:10px; }
.tt-fam-gps-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--tt-border); }
.tt-fam-gps-row:last-child { border-bottom:none; }
.tt-fam-gps-av { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--tt-blue),var(--tt-blue-m)); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tt-fam-gps-name { font-size:13px; font-weight:600; color:var(--tt-ink); }
.tt-fam-gps-coord { font-size:11px; font-family:var(--tt-mono); color:var(--tt-muted); margin-top:2px; }


/* ══════════════════════════════════════════════
   STICKER DESIGNER MODAL v2
   ══════════════════════════════════════════════ */

/* Modal wrapper */
.tt-smd-inner {
  background: var(--tt-card);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  width: min(820px, 95vw);
  max-height: 92vh;
  overflow-y: auto;
  animation: tt-modal-in .2s ease-out;
  display: flex;
  flex-direction: column;
}
.tt-smd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--tt-border);
  flex-shrink: 0;
}
.tt-smd-title { font-size: 18px; font-weight: 800; color: var(--tt-ink); margin: 0 0 4px; }
.tt-smd-sub   { font-size: 13px; color: var(--tt-muted); margin: 0; }
.tt-smd-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--tt-border);
  background: var(--tt-surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tt-muted);
  transition: all var(--tt-t);
  flex-shrink: 0;
}
.tt-smd-close:hover { background: var(--tt-border); color: var(--tt-ink); }

.tt-smd-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  flex: 1;
}
@media (max-width:700px) {
  .tt-smd-body { grid-template-columns: 1fr; }
}

/* Preview column */
.tt-smd-preview-col {
  padding: 32px;
  background: #CBD5E1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 0 0 0 20px;
}
.tt-smd-preview-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tt-smd-size-hint {
  font-size: 11.5px;
  color: #64748B;
  text-align: center;
}

/* ── THE STICKER ──────────────────────────────── */
.tt-sticker {
  width: 340px;
  height: 226px;
  display: flex;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.3);
  background: #1E3A5F;
  flex-shrink: 0;
}
.tt-stk-left-panel {
  width: 196px;
  flex-shrink: 0;
  background: #1E3A5F;
  padding: 18px 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.tt-stk-right-panel {
  flex: 1;
  background: rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 10px;
}
.tt-stk-header-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tt-stk-t-icon {
  width: 26px;
  height: 26px;
  background: #10B981;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.tt-stk-brand-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
}
.tt-stk-brand-name span { color: #10B981; }
.tt-stk-divbar {
  width: 32px;
  height: 2.5px;
  background: #10B981;
  border-radius: 2px;
  margin-bottom: 10px;
}
.tt-stk-content-area { flex: 1; }
.tt-stk-tagname {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tt-stk-vehicle {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}
.tt-stk-bottom-area { margin-top: auto; }
.tt-stk-subtitle {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  margin-bottom: 3px;
}
.tt-stk-web {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.3);
  font-weight: 600;
}
/* Right panel elements */
.tt-stk-qr-box {
  background: #fff;
  border-radius: 8px;
  padding: 7px;
  display: inline-flex;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.tt-stk-qr-box img { display: block; border-radius: 3px; }
.tt-stk-sos-badge {
  font-size: 13px;
  font-weight: 900;
  color: #10B981;
  letter-spacing: .05em;
}
.tt-stk-tag-id {
  font-family: monospace;
  font-size: 8.5px;
  color: rgba(255,255,255,.3);
  letter-spacing: .14em;
}

/* Controls column */
.tt-smd-controls-col {
  padding: 22px;
  border-left: 1px solid var(--tt-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 0 0 20px 0;
}
.tt-smd-section {}
.tt-smd-section-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tt-muted);
  margin-bottom: 8px;
}
.tt-smd-themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.tt-smd-theme-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--tt-border);
  border-radius: 9px;
  background: var(--tt-surface);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--tt-font);
  color: var(--tt-text);
  transition: all var(--tt-t);
}
.tt-smd-theme-btn:hover { border-color: var(--tt-blue-l); }
.tt-smd-theme-btn.active { border-color: var(--tt-blue); background: #EFF6FF; color: var(--tt-blue); }
.tt-smd-theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
}
.tt-smd-hints { display: flex; flex-direction: column; gap: 5px; }
.tt-smd-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--tt-border);
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tt-text);
  transition: all var(--tt-t);
}
.tt-smd-radio input[type="radio"] { accent-color: var(--tt-blue); }
.tt-smd-radio:hover { border-color: var(--tt-blue-l); }
.tt-smd-radio.active { border-color: var(--tt-blue); background: #EFF6FF; color: var(--tt-blue); font-weight: 600; }
.tt-smd-info {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--tt-surface);
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 12px;
  color: var(--tt-text);
  line-height: 1.5;
}
.tt-smd-actions { margin-top: auto; }

/* Sidebar tour count badge */
.tt-sb-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--tt-primary, #1E3A5F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}
.tt-sb-item.active .tt-sb-count {
  background: rgba(255,255,255,0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOUR DETAIL PAGE  ·  tt-panel-tourdetail
   ═══════════════════════════════════════════════════════════════════════════ */

.tt-tdp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.tt-tdp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 20px;
  gap: 10px;
}
.tt-tdp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1E3A5F;
  cursor: pointer;
  transition: background .15s, border-color .2s, box-shadow .15s;
}
.tt-tdp-back:hover {
  background: #EFF6FF;
  border-color: #1E3A5F;
  box-shadow: 0 2px 8px rgba(30,58,95,.08);
}
.tt-tdp-topbar-right { display: flex; gap: 8px; align-items: center; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.tt-tdp-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  min-height: 130px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.tt-tdp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tt-tdp-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 28px 22px;
}
.tt-tdp-hero-sport {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.1));
  flex-shrink: 0;
}
.tt-tdp-hero-text { flex: 1; min-width: 0; }
.tt-tdp-hero-status { margin-bottom: 7px; }
.tt-td-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.tt-tdp-hero-title {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px;
  line-height: 1.2;
  word-break: break-word;
}
.tt-tdp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tt-td-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 3px 10px;
}
.tt-td-meta-ico { font-size: 13px; }

/* ── KPI strip ─────────────────────────────────────────────────────────────── */
.tt-tdp-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.tt-tdp-kpi {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 12px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.tt-tdp-kpi:hover {
  border-color: #1E3A5F;
  box-shadow: 0 4px 16px rgba(30,58,95,.1);
  transform: translateY(-1px);
}
.tt-tdp-kpi-ico  { font-size: 22px; margin-bottom: 6px; }
.tt-tdp-kpi-num  { font-size: 20px; font-weight: 800; color: #0F172A; line-height: 1; }
.tt-tdp-kpi-unit { font-size: 13px; font-weight: 600; color: #64748B; margin-left: 2px; }
.tt-tdp-kpi-lbl  { font-size: 11px; color: #94A3B8; margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.tt-tdp-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 780px) {
  .tt-tdp-grid { grid-template-columns: 1fr; }
  .tt-tdp-hero-body { flex-direction: column; align-items: flex-start; padding: 20px; }
  .tt-tdp-hero-sport { font-size: 40px; }
}
.tt-tdp-left, .tt-tdp-right { display: flex; flex-direction: column; gap: 14px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.tt-tdp-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow .2s;
}
.tt-tdp-card:hover { box-shadow: 0 2px 16px rgba(15,23,42,.06); }
.tt-tdp-card-hd {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1E3A5F;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid #f1f5f9;
}

/* Map card */
.tt-tdp-map-wrap { padding: 0 !important; overflow: hidden; }
.tt-tdp-map-wrap .tt-tdp-card-hd { padding: 16px 20px 12px; margin: 0; }
.tt-tdp-map { height: 310px; display: block; background: #f8fafc; }
.tt-tdp-elevation { background: #f8fafc; border-top: 1px solid #f1f5f9; }

/* No GPS placeholder */
.tt-tdp-no-gps {
  text-align: center;
  padding: 36px 20px !important;
  border-style: dashed !important;
  background: #f8fafc !important;
}
.tt-tdp-no-gps-ico   { font-size: 40px; margin-bottom: 10px; opacity: .4; }
.tt-tdp-no-gps-title { font-size: 15px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.tt-tdp-no-gps-hint  { font-size: 13px; color: #94A3B8; }

/* ── Rows (key-value) ─────────────────────────────────────────────────────── */
.tt-tdp-rows { display: flex; flex-direction: column; }
.tt-tdp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 13.5px;
}
.tt-tdp-row:last-child { border-bottom: none; }
.tt-tdp-row-k {
  color: #64748B;
  font-weight: 500;
  flex-shrink: 0;
  max-width: 48%;
}
.tt-tdp-row-v {
  color: #0F172A;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.tt-tdp-row-hl .tt-tdp-row-k { color: #1E3A5F; font-weight: 700; }
.tt-tdp-row-hl .tt-tdp-row-v { color: #1E3A5F; font-weight: 800; font-size: 14.5px; }

/* ── Persons ──────────────────────────────────────────────────────────────── */
.tt-tdp-person {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
}
.tt-tdp-person:last-child { border-bottom: none; }
.tt-tdp-person-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A5F, #2D5086);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tt-tdp-person-info { flex: 1; }
.tt-tdp-person-info strong { font-size: 14px; color: #0F172A; display: block; margin-bottom: 2px; }
.tt-tdp-person-phone {
  font-size: 12px; color: #1E3A5F; text-decoration: none;
  display: block; margin-bottom: 2px;
}
.tt-tdp-person-phone:hover { text-decoration: underline; }
.tt-tdp-person-note { font-size: 11px; color: #94A3B8; }

/* ── Overnights ───────────────────────────────────────────────────────────── */
.tt-tdp-overnight {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.tt-tdp-overnight:last-child { border-bottom: none; }
.tt-tdp-night-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1E3A5F; color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tt-tdp-overnight-info { flex: 1; font-size: 13px; }
.tt-tdp-overnight-info strong { color: #0F172A; display: block; margin-bottom: 2px; }
.tt-tdp-overnight-loc { color: #64748B; font-size: 12px; margin-top: 2px; }
.tt-tdp-overnight-phone { font-size: 12px; color: #1E3A5F; text-decoration: none; }

/* ── Checklist ────────────────────────────────────────────────────────────── */
.tt-ck-bar {
  height: 7px; background: #e2e8f0; border-radius: 4px;
  overflow: hidden; margin-bottom: 8px;
}
.tt-ck-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.34,1.56,.64,1); }
.tt-ck-summary { font-size: 13px; color: #64748B; margin-bottom: 14px; }
.tt-ck-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
@media (max-width: 500px) { .tt-ck-list { grid-template-columns: 1fr; } }
.tt-ck-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #94A3B8; padding: 4px 0;
}
.tt-ck-item.ok  { color: #059669; }
.tt-ck-ico  { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.tt-ck-txt  { flex: 1; }
.tt-ck-state {
  font-size: 11px; font-weight: 700;
  color: inherit; flex-shrink: 0;
}
.tt-ck-item.ok .tt-ck-state { color: #10B981; }

/* ── Family card ──────────────────────────────────────────────────────────── */
.tt-fam-info {
  display: flex; gap: 12px; align-items: flex-start;
  background: #EFF6FF; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.tt-fam-ico { font-size: 24px; flex-shrink: 0; margin-top: 2px; }

/* ── Weather widget ───────────────────────────────────────────────────────── */
.tt-wd-loading {
  color: #94A3B8; font-size: 13px; padding: 12px 0;
  display: flex; align-items: center; gap: 8px;
}
.tt-wd-header {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.tt-wd-now {
  flex: 1; min-width: 140px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
  border-radius: 12px; padding: 12px 16px;
}
.tt-wd-now-ico   { font-size: 36px; }
.tt-wd-now-data  {}
.tt-wd-now-temp  { font-size: 26px; font-weight: 800; color: #0F172A; line-height: 1; }
.tt-wd-now-lbl   { font-size: 12px; color: #475569; margin-top: 2px; }
.tt-wd-now-wind  { font-size: 11px; color: #94A3B8; margin-top: 3px; }
.tt-wd-tour {
  flex: 1; min-width: 160px;
  border: 1.5px solid #1E3A5F22;
  background: linear-gradient(135deg, #1E3A5F0a, #1E3A5F18);
  border-radius: 12px; padding: 12px 16px;
}
.tt-wd-tour-na {
  display: flex; align-items: center;
  color: #94A3B8; font-size: 12px;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.tt-wd-tour-day   { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #1E3A5F; margin-bottom: 6px; }
.tt-wd-tour-ico   { font-size: 28px; margin-bottom: 4px; }
.tt-wd-tour-temps { font-size: 20px; font-weight: 800; color: #0F172A; margin-bottom: 4px; }
.tt-wd-tour-cond  { font-size: 12px; color: #475569; margin-bottom: 6px; }
.tt-wd-tour-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #64748B; }
.tt-wd-strip {
  display: flex; gap: 5px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 6px;
  scrollbar-width: thin;
}
.tt-wd-day {
  display: flex; flex-direction: column; align-items: center;
  min-width: 46px; padding: 7px 6px;
  border-radius: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  font-size: 11px; gap: 2px; cursor: default;
  transition: background .15s;
}
.tt-wd-day-hl {
  background: linear-gradient(160deg, #1E3A5F, #2D5086);
  border-color: #1E3A5F; color: #fff;
}
.tt-wd-day-hl .tt-wd-day-lo { color: rgba(255,255,255,.6); }
.tt-wd-day-name { font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.tt-wd-day-ico  { font-size: 20px; margin: 2px 0; }
.tt-wd-day-hi   { font-weight: 700; }
.tt-wd-day-lo   { color: #94A3B8; font-size: 10px; }
.tt-wd-day-prec { font-size: 10px; color: #60A5FA; }
.tt-wd-src      { font-size: 10px; color: #CBD5E1; text-align: right; }

/* IN-TOUR CHECK-IN WIDGET v5.12 */
.tt-ci-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;margin:18px 0 0;box-shadow:0 4px 24px rgba(15,23,42,.07);}
.tt-ci-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1.5px solid #f1f5f9;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,#f8fafc,#fff);}
.tt-ci-header-left{display:flex;align-items:center;gap:10px;}
.tt-ci-live-dot{width:10px;height:10px;border-radius:50%;background:#10B981;flex-shrink:0;animation:ci-pulse 1.6s infinite;}
@keyframes ci-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);}70%{box-shadow:0 0 0 8px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
.tt-ci-title{font-weight:800;font-size:15px;color:#0F172A;}
.tt-ci-route{font-size:12px;color:#64748B;padding:2px 8px;background:#f1f5f9;border-radius:20px;}
.tt-ci-signal{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;font-weight:600;color:#475569;}
.tt-ci-grid{display:grid;grid-template-columns:280px 1fr;min-height:420px;}
@media(max-width:700px){.tt-ci-grid{grid-template-columns:1fr;}}
.tt-ci-left{padding:18px 16px;border-right:1.5px solid #f1f5f9;display:flex;flex-direction:column;gap:12px;}
.tt-ci-countdown-card{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1.5px solid #bbf7d0;border-radius:14px;padding:16px 14px 12px;text-align:center;}
.tt-ci-countdown-card.tt-ci-countdown-overdue{background:linear-gradient(135deg,#fef2f2,#fff1f0);border-color:#fecaca;}
.tt-ci-countdown-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#64748B;font-weight:700;margin-bottom:8px;}
.tt-ci-countdown{display:flex;justify-content:center;align-items:center;gap:4px;margin-bottom:8px;}
.tt-ci-cd-block{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:10px;padding:8px 12px;box-shadow:0 1px 4px rgba(0,0,0,.06);min-width:54px;}
.tt-ci-cd-block span{font-size:28px;font-weight:900;color:#0F172A;line-height:1;font-variant-numeric:tabular-nums;}
.tt-ci-cd-block small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;margin-top:2px;font-weight:700;}
.tt-ci-countdown-overdue .tt-ci-cd-block span{color:#EF4444;}
.tt-ci-cd-sep{font-size:24px;font-weight:900;color:#94A3B8;margin:0 2px;align-self:flex-start;margin-top:8px;}
.tt-ci-countdown-sub{font-size:11px;color:#64748B;}
.tt-ci-safe-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#059669,#10B981);color:#fff;border:none;border-radius:14px;padding:16px;font-size:15px;font-weight:900;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 16px rgba(16,185,129,.35);transition:transform .1s,box-shadow .15s,background .2s;}
.tt-ci-safe-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,185,129,.4);}
.tt-ci-safe-btn:active{transform:scale(.97);}
.tt-ci-safe-btn.tt-ci-safe-sent{background:linear-gradient(135deg,#0284c7,#0ea5e9);}
.tt-ci-status-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#94A3B8;font-weight:700;}
.tt-ci-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.tt-ci-status-btn{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 8px;font-size:12px;font-weight:700;color:#334155;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:center;}
.tt-ci-status-btn:hover{background:#EFF6FF;border-color:#1E3A5F;transform:translateY(-1px);}
.tt-ci-sos-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#EF4444;border:2px solid #FCA5A5;border-radius:14px;padding:12px 16px;font-size:13px;font-weight:900;letter-spacing:.05em;cursor:pointer;transition:all .15s;}
.tt-ci-sos-btn:hover{background:#fef2f2;border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.1);}
.tt-ci-sos-btn.tt-ci-sos-armed{background:#EF4444;color:#fff;border-color:#EF4444;animation:ci-sos-flash .4s infinite;}
@keyframes ci-sos-flash{0%,100%{opacity:1;}50%{opacity:.7;}}
.tt-ci-right{display:flex;flex-direction:column;overflow:hidden;}
.tt-ci-gps-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:#64748B;background:#f8fafc;border-bottom:1px solid #f1f5f9;}
.tt-ci-gps-dot{width:8px;height:8px;border-radius:50%;background:#94A3B8;flex-shrink:0;transition:background .5s;}
.tt-ci-map{flex:1;min-height:200px;background:#f1f5f9;position:relative;overflow:hidden;}
.tt-ci-map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#94A3B8;font-size:13px;text-align:center;pointer-events:none;}
.tt-ci-map-ico{font-size:32px;opacity:.4;}
.tt-ci-kpis{display:flex;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;}
.tt-ci-kpi{flex:1;text-align:center;padding:10px 8px;}
.tt-ci-kpi-mid{border-left:1px solid #f1f5f9;border-right:1px solid #f1f5f9;}
.tt-ci-kpi-val{display:block;font-size:18px;font-weight:800;color:#0F172A;}
.tt-ci-kpi-lbl{display:block;font-size:10px;color:#94A3B8;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:2px;}
.tt-ci-log-hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#475569;}
.tt-ci-log-age{color:#94A3B8;font-weight:500;}
.tt-ci-log{overflow-y:auto;max-height:200px;padding:0 14px 14px;}
.tt-ci-log-empty{font-size:13px;color:#94A3B8;padding:14px 0;text-align:center;}
.tt-ci-log-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f8fafc;animation:ci-fade-in .3s ease-out;}
@keyframes ci-fade-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.tt-ci-log-item.sos{background:#fff5f5;margin:0 -14px;padding:9px 14px;border-left:3px solid #EF4444;}
.tt-ci-log-item.pending{opacity:.6;}
.tt-ci-log-item:last-child{border-bottom:none;}
.tt-ci-log-ico{font-size:18px;flex-shrink:0;width:24px;text-align:center;}
.tt-ci-log-body{flex:1;min-width:0;}
.tt-ci-log-type{font-size:13px;font-weight:600;color:#0F172A;}
.tt-ci-log-type em{font-weight:400;color:#64748B;}
.tt-ci-log-meta{font-size:11px;color:#94A3B8;margin-top:2px;}
.tt-ci-log-badge{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:20px;}
.badge-ok{background:#d1fae5;color:#059669;}
.badge-sos{background:#fee2e2;color:#dc2626;}