/* ════════════════════════════════════════════════════
   SHIPCHIP.LINK — style.css  (MVP v2)
   Cross-browser: Chrome, Firefox, Safari, Edge, iOS, Android
════════════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─── */
:root {
  --navy:   #0A1628;
  --navy2:  #1a2e44;
  --green:  #00D26A;
  --green2: #33FF8C;
  --green-a:rgba(0,210,106,0.14);
  --green-b:rgba(0,210,106,0.35);
  --blue:   #1976D2;
  --amber:  #F59E0B;
  --warm:   #FFE0B2;

  --glass-w: rgba(255,255,255,0.72);
  --glass-b: rgba(255,255,255,0.90);
  --glass-d: rgba(10,22,40,0.62);
  --nav-bg:  rgba(8,18,38,0.60);
  --border:  rgba(255,255,255,0.85);

  --text:  #0A1628;
  --text2: #1a3a5c;
  --text3: #3d6280;
  --text4: #7A9AB5;

  --r:  20px;
  --r2: 14px;
  --r3: 10px;
  --sh:  0 8px 40px rgba(10,22,40,0.22);
  --sh2: 0 4px 20px rgba(10,22,40,0.14);
  --sh3: 0 2px 10px rgba(10,22,40,0.10);

  color-scheme: light;
}

/* ─── RESET ─── */
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  height: 100%;
  /* prevent iOS bounce scroll from showing white */
  background: #1a3a5c;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }
a { text-decoration: none; }
svg { display: block; }

/* ═══════════════════════════════════════════════════
   REAL PHOTO BACKGROUND + ANIMATED CLOUDS
═══════════════════════════════════════════════════ */
#sky-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.sky-photo {
  position: absolute;
  inset: 0;
  background-image: url('bg-hero.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* Slow breathing animation */
  animation: sky-drift 25s ease-in-out infinite alternate;
  will-change: transform;
}
/* Fallback when image fails */
.sky-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg,#1565C0 0%,#1976D2 40%,#42A5F5 80%,#90CAF9 100%);
  z-index: -1;
}

@keyframes sky-drift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.08) translateY(-10px); }
}

.sky-overlay {
  position: absolute;
  inset: 0;
  /* Gradient: dark top for nav legibility → lighter bottom for content */
  background:
    linear-gradient(180deg,
      rgba(5,15,40,0.42) 0%,
      rgba(8,22,55,0.28) 15%,
      rgba(255,255,255,0.04) 45%,
      rgba(230,242,255,0.52) 75%,
      rgba(220,238,255,0.78) 100%
    );
}

/* Floating cloud divs — JS spawns these */
#cloud-layer { position: absolute; inset: 0; pointer-events: none; }
.fc {
  position: absolute;
  background-image: url('cloud.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
  opacity: 0;
  animation: cloud-drift linear infinite;
}
@keyframes cloud-drift {
  0%   { opacity: 0;   transform: translateX(-200px); }
  8%   { opacity: var(--op, .5); }
  90%  { opacity: var(--op, .5); }
  100% { opacity: 0;   transform: translateX(calc(100vw + 300px)); }
}

/* Inner screens use the blue sky photo */
body.s-scan   .sky-photo,
body.s-ship   .sky-photo,
body.s-print  .sky-photo,
body.s-manual .sky-photo,
body.s-mode   .sky-photo { background-image: url('bg-sky.jpg'); }

/* ═══════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════ */
#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */
#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  /* Safari -webkit- prefix required for backdrop-filter */
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 2px 24px rgba(5,15,40,0.3);
}

/* Firefox backdrop-filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  #nav { background: rgba(10,24,50,0.92) !important; }
}

.btn-back {
  color: rgba(255,255,255,0.8);
  padding: 12px;
  min-width: 44px; min-height: 44px;
  border-radius: 8px;
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-back:hover { color: white; background: rgba(255,255,255,0.1); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: .2s;
}
.nav-logo:hover { background: rgba(255,255,255,0.08); }
.nav-logo span {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: white;
}

.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-acct {
  color: rgba(255,255,255,0.75);
  padding: 14px;
  min-width: 44px; min-height: 44px;
  border-radius: 8px;
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-acct:hover { color: white; background: rgba(255,255,255,0.10); }

/* ═══════════════════════════════════════════════════
   SCREENS
═══════════════════════════════════════════════════ */
.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.screen.active {
  display: flex;
  animation: screen-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen-pad {
  padding: 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   HOME — HERO
═══════════════════════════════════════════════════ */
#s-home { padding: 0; align-items: center; }

.hero {
  width: 100%;
  text-align: center;
  padding: 44px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── HERO CASCADE — Level 5 Self-Actualization ── */
.hero > * {
  animation: hero-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero > *:nth-child(1) { animation-delay: 0.08s; }
.hero > *:nth-child(2) { animation-delay: 0.16s; }
.hero > *:nth-child(3) { animation-delay: 0.24s; }
.hero > *:nth-child(4) { animation-delay: 0.32s; }
.hero > *:nth-child(5) { animation-delay: 0.40s; }
.hero > *:nth-child(6) { animation-delay: 0.48s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-logo {
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,201,106,0.20);
  border: 1px solid rgba(0,201,106,0.40);
  color: #b9ffe0;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 24px;
  letter-spacing: .06em;
  margin-bottom: 18px;
}

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse-anim 2s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.55; transform:scale(1.4); }
}

.hero h1 {
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: white;
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 4px 44px rgba(0,0,0,0.3);
}
.hero h1 em {
  font-style: normal;
  color: var(--green2);
  text-shadow: 0 0 32px rgba(51,255,140,0.5);
}

.hero-sub {
  font-size: clamp(14px, 3.6vw, 17px);
  color: rgba(255,255,255,0.90);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 320px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── THE BIG SCAN BUTTON ── */
.btn-scan-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  padding: 20px 32px;
  background: white;
  color: var(--navy);
  border-radius: 24px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 8px 32px rgba(13,27,42,0.45), 0 2px 8px rgba(0,0,0,0.3);
  transition: .25s;
  margin-bottom: 10px;
}
.btn-scan-main:hover  { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(13,27,42,0.5); }
.btn-scan-main:active { transform: scale(.96); box-shadow: 0 4px 16px rgba(13,27,42,0.3); }

.scan-sub-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: .04em;
  margin-bottom: 0;
}

/* ── HOW ROW ── */
.how-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;
}
.how-step {
  flex: 1;
  text-align: center;
  background: var(--glass-w);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 6px;
  /* Glass with Safari prefix */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh3);
}
@supports not (backdrop-filter: blur(1px)) {
  .how-step { background: rgba(255,255,255,0.88); }
}
.step-n { font-family:'DM Mono',monospace; font-size:9px; color:var(--green); letter-spacing:.14em; margin-bottom:6px; }
.step-icon { font-size:20px; margin-bottom:4px; display:block; }
.how-step strong { display:block; font-size:12px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.how-step p { font-size:11px; color:var(--text3); line-height:1.3; }
.how-arrow { color:rgba(255,255,255,0.5); font-size:16px; padding:0 6px; flex-shrink:0; }

/* ── CARRIERS ── */
.carriers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: var(--glass-w);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not (backdrop-filter: blur(1px)) { .carriers { background: rgba(255,255,255,0.88); } }
.carriers span {
  font-family:'DM Mono',monospace;
  font-size:11px; font-weight:500;
  color:var(--text2);
  background:rgba(13,27,42,0.08);
  padding:3px 10px; border-radius:20px;
}
.carriers-note { font-size:11px; color:var(--text3); margin-left:auto; }

/* ── FEATURES ── */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.feat-card {
  background: var(--glass-w);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 16px 12px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh3);
  transition: transform 0.2s, box-shadow 0.2s;
}
@supports not (backdrop-filter: blur(1px)) { .feat-card { background: rgba(255,255,255,0.88); } }
.feat-card:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.feat-i { font-size:22px; margin-bottom:8px; }
.feat-card strong { display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.feat-card p { font-size:12px; color:var(--text2); line-height:1.5; }

/* ── SEO + FAQ ── */
.seo-block {
  margin: 0 16px 20px;
  padding: 20px 18px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: var(--r2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) { .seo-block { background: rgba(255,255,255,0.88); } }
.seo-block h2 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.seo-block p { font-size:13px; color:var(--text2); line-height:1.7; margin-bottom:12px; }
.seo-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; }
.seo-list li { font-size:11px; color:var(--text3); padding:3px 0; }
.seo-list li::before { content:'→ '; color:var(--green); font-weight:700; }

.faq-wrap { padding:0 16px; margin-bottom:20px; }
.sec-lbl {
  font-size:11px; font-weight:700; color:var(--text3);
  letter-spacing:.12em; margin:0 16px 10px; padding-top:4px;
}
/* Inline sec-lbl inside screen-pad */
.screen-pad .sec-lbl { margin:0 0 10px; }

.faq { border-bottom:1px solid rgba(13,27,42,0.08); padding:13px 0; cursor:pointer; user-select:none; }
.faq-q { font-size:14px; font-weight:600; color:var(--navy); display:flex; justify-content:space-between; align-items:center; }
.faq-arr { transition:.2s; color:var(--text3); flex-shrink:0; margin-left:8px; }
.faq.open .faq-arr { transform:rotate(180deg); }
.faq-a { font-size:13px; color:var(--text2); line-height:1.65; margin-top:10px; display:none; }
.faq.open .faq-a { display:block; }

/* ═══════════════════════════════════════════════════
   SCAN MODE SELECTOR
═══════════════════════════════════════════════════ */
#s-mode {
  background: rgba(230,240,255,0.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  justify-content: flex-start;
  padding: 0;
}
.mode-wrap {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.mode-intro {
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  margin-bottom: 6px;
}
.mode-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.78);
  border: 1.5px solid rgba(255,255,255,0.96);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--sh2);
  cursor: pointer;
  transition: .2s;
  text-align: left;
  width: 100%;
}
@supports not (backdrop-filter: blur(1px)) { .mode-card { background: rgba(255,255,255,0.92); } }
.mode-card:hover { background: rgba(255,255,255,0.95); transform: translateY(-1px); box-shadow: var(--sh); }
.mode-card:active { transform: scale(.98); }

.mode-icon-ring {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mode-icon-ring.green { background: rgba(0,201,106,0.14); color: #008c4a; }
.mode-icon-ring.blue  { background: rgba(25,118,210,0.14); color: #1565C0; }
.mode-icon-ring.amber { background: rgba(245,158,11,0.14); color: #B45309; }

.mode-text { flex: 1; }
.mode-text strong { display:block; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.mode-text span   { font-size:13px; color:var(--text3); }
.mode-arrow { color:var(--text4); flex-shrink:0; }

.mode-note {
  font-size:12px; color:rgba(255,255,255,0.7);
  text-align:center; padding:4px 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════
   CAMERA SCAN
═══════════════════════════════════════════════════ */
#s-scan { padding: 0; }
#scan-wrap {
  position: relative;
  flex: 1;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 60px);
  overflow: hidden;
}
#qr-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* iOS Safari requires these */
  -webkit-playsinline: true;
}
#scan-canvas { display: none; }

.scan-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scan-frame { width: 250px; height: 250px; position: relative; }
.sc-tl,.sc-tr,.sc-bl,.sc-br {
  position: absolute; width: 36px; height: 36px; display: block;
}
.sc-tl { top:0; left:0;  border-top:3px solid #fff; border-left:3px solid #fff;  border-radius:5px 0 0 0; }
.sc-tr { top:0; right:0; border-top:3px solid #fff; border-right:3px solid #fff; border-radius:0 5px 0 0; }
.sc-bl { bottom:0; left:0;  border-bottom:3px solid #fff; border-left:3px solid #fff;  border-radius:0 0 0 5px; }
.sc-br { bottom:0; right:0; border-bottom:3px solid #fff; border-right:3px solid #fff; border-radius:0 0 5px 0; }
.scan-laser {
  position:absolute; width:212px; height:3px;
  left:19px; top:12px;
  background:linear-gradient(90deg,transparent,var(--green),rgba(0,255,140,0.9),var(--green),transparent);
  border-radius:2px;
  box-shadow:0 0 12px rgba(0,201,106,0.9);
  animation: laser 2.4s ease-in-out infinite;
}
@keyframes laser { 0%,100%{top:12px} 50%{top:226px} }
.scan-hint { margin-top:28px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.88); letter-spacing:.03em; }
.scan-foot {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,0.9),transparent);
}
#scan-st {
  text-align:center; font-size:12px; color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace; letter-spacing:.07em;
  margin-bottom:12px; min-height:20px;
}
.btn-manual-scan {
  width:100%; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25); color:white;
  padding:15px; border-radius:var(--r);
  font-size:14px; font-weight:600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:.2s;
}
.btn-manual-scan:hover { background:rgba(255,255,255,0.22); }

/* ═══════════════════════════════════════════════════
   MANUAL ENTRY
═══════════════════════════════════════════════════ */
.manual-input-wrap { margin-bottom: 20px; }
.manual-hint { font-size:12px; color:var(--text3); margin-top:8px; }

/* ═══════════════════════════════════════════════════
   PRINT CHIPS
═══════════════════════════════════════════════════ */
.sheet-preview {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) { .sheet-preview { background: rgba(255,255,255,0.90); } }
.sp-cell {
  border: 1.5px dashed rgba(13,27,42,0.14);
  border-radius:7px; padding:9px 5px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,0.55);
}
.sp-qr { width:36px; height:36px; background:var(--navy); border-radius:3px; opacity:.85; }
.sp-cell span { font-family:'DM Mono',monospace; font-size:7px; color:var(--text4); }

.info-list { margin-bottom:20px; background:rgba(255,255,255,0.70); border:1px solid var(--border); border-radius:var(--r2); padding:12px 16px; }
.iitem { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid rgba(13,27,42,0.06); }
.iitem:last-child { border-bottom:none; }
.idot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:5px; }
.iitem span:last-child { font-size:13px; color:var(--text2); line-height:1.5; }

/* ═══════════════════════════════════════════════════
   SHIP SCREEN
═══════════════════════════════════════════════════ */
.chip-tag {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:22px;
  background:rgba(255,255,255,0.68);
  border:1px solid var(--border);
  border-radius:var(--r3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) { .chip-tag { background:rgba(255,255,255,0.90); } }
.chip-badge {
  font-family:'DM Mono',monospace; font-size:13px; font-weight:500;
  color:var(--navy); background:rgba(13,27,42,0.08);
  padding:4px 12px; border-radius:20px; border:1px solid rgba(13,27,42,0.12);
}
.chip-status { font-size:12px; color:var(--text3); }

/* FIELD SYSTEM */
.field-group { margin-bottom:18px; }
.field-label { font-size:11px; font-weight:700; color:var(--text3); letter-spacing:.1em; margin-bottom:8px; display:block; }
.field-input {
  width:100%;
  background:rgba(255,255,255,0.90);
  border:1.5px solid rgba(255,255,255,0.96);
  border-radius:var(--r3);
  padding:15px 16px;
  font-size:15px; color:var(--navy);
  outline:none; transition:.2s;
  box-shadow:0 2px 10px rgba(13,27,42,0.08);
  /* Remove iOS input shadows */
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus { border-color:#64B5F6; box-shadow:0 0 0 3px rgba(100,181,246,0.22); }
.field-input::placeholder { color:var(--text4); }
.field-input.large { font-size:18px; padding:18px 16px; font-family:'DM Mono',monospace; }

.ep-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; min-height:0; }
.ep-pill {
  background:rgba(13,27,42,0.08); border:1px solid rgba(13,27,42,0.12);
  border-radius:20px; padding:5px 13px;
  font-size:12px; font-weight:600; color:var(--navy);
  cursor:pointer; transition:.2s; white-space:nowrap;
}
.ep-pill:hover { background:rgba(13,27,42,0.16); }

/* SIZE GRID */
.size-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sz {
  background:rgba(255,255,255,0.82); border:1.5px solid rgba(255,255,255,0.96);
  border-radius:var(--r3); padding:14px 6px; text-align:center;
  cursor:pointer; transition:.2s; box-shadow:var(--sh3);
  -webkit-appearance:none; appearance:none;
}
.sz:hover { background:rgba(255,255,255,0.96); }
.sz strong { display:block; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.sz small  { font-size:9px; font-family:'DM Mono',monospace; color:var(--text4); }
.sz.active { border-color:var(--navy); background:var(--navy); }
.sz.active strong, .sz.active small { color:white; }

.dims-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.weight-row { display:flex; align-items:center; gap:10px; }
.weight-unit { font-size:13px; color:var(--text3); white-space:nowrap; }

/* RATES */
.rates-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.rates-title { font-size:clamp(20px, 5.5vw, 24px); font-weight:800; color:var(--navy); }
.rates-dest  { font-size:12px; color:var(--text3); margin-top:3px; font-family:'DM Mono',monospace; }
.btn-back-rates { font-size:13px; font-weight:600; color:var(--text2); padding:4px 0; }

.rates-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.rate-card {
  background:rgba(255,255,255,0.84); border:1.5px solid rgba(255,255,255,0.96);
  border-radius:var(--r); padding:18px; cursor:pointer; transition:.22s;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative; box-shadow:var(--sh3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.rate-card > div:first-child { min-width:0; flex:1; }
@supports not (backdrop-filter: blur(1px)) { .rate-card { background:rgba(255,255,255,0.95); } }
.rate-card:hover { box-shadow:var(--sh2); }
.rate-card.sel { border-color:var(--navy); background:rgba(13,27,42,0.07); }
.rate-card.best { margin-top:12px; }
.best-badge {
  position:absolute; top:-11px; left:14px;
  background:var(--green); color:white;
  font-size:9px; font-weight:700; padding:3px 10px;
  border-radius:10px; letter-spacing:.1em;
  font-family:'DM Mono',monospace;
}
.rate-carrier { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.rate-svc     { font-size:12px; color:var(--text2); }
.rate-days    { font-size:11px; color:var(--text3); margin-top:3px; font-family:'DM Mono',monospace; }
.rate-price   { font-family:'DM Mono',monospace; font-size:clamp(20px, 6vw, 26px); font-weight:500; color:var(--navy); white-space:nowrap; }
.rate-card.best .rate-price { color:var(--green); }
.rate-radio {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(13,27,42,0.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:10px; transition:.2s;
}
.rate-card.sel .rate-radio { border-color:var(--navy); }
.rate-card.sel .rate-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--navy); display:block; }
.btn-arrow { font-size:18px; }

/* ═══════════════════════════════════════════════════
   PAYMENT SCREEN
═══════════════════════════════════════════════════ */
.pay-summary {
  background:rgba(255,255,255,0.72); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px 16px; margin-bottom:20px;
}
.pay-summary-carrier { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.pay-summary-price { font-family:'DM Mono',monospace; font-size:28px; font-weight:500; color:var(--navy); }
.pay-summary-track { font-size:11px; color:var(--text3); margin-top:3px; margin-bottom:10px; }
.pay-line { display:flex; justify-content:space-between; font-size:13px; color:var(--text2); padding:4px 0; font-family:'DM Mono',monospace; }
.pay-line.pay-total { font-weight:700; font-size:16px; color:var(--navy); border-top:1px solid rgba(13,27,42,0.12); padding-top:8px; margin-top:4px; }

.pay-tabs { display:flex; gap:0; margin-bottom:20px; border-radius:var(--r3); overflow:hidden; border:1.5px solid rgba(13,27,42,0.12); }
.pay-tab {
  flex:1; padding:11px 8px; font-size:13px; font-weight:600;
  color:var(--text2); background:rgba(255,255,255,0.7);
  border-right:1px solid rgba(13,27,42,0.10);
  transition:.2s; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.pay-tab:last-child { border-right:none; }
.pay-tab.active { background:var(--navy); color:white; }

.pay-panel { margin-bottom:8px; }

.card-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.alt-pay-msg {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:28px 0; text-align:center;
}
.alt-pay-msg p { font-size:14px; color:var(--text2); }

.pay-error {
  background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.2);
  border-radius:var(--r3); padding:12px 14px;
  font-size:13px; color:#b91c1c; margin-bottom:12px;
}

.pay-submit { margin-top:16px; position:relative; }
.pay-secure {
  display:flex; align-items:center; justify-content:center;
  gap:5px; font-size:11px; color:var(--text4);
  margin-top:12px; text-align:center;
}

/* ═══════════════════════════════════════════════════
   CONFIRM SCREEN
═══════════════════════════════════════════════════ */
.confirm-pad { align-items:center; text-align:center; }
.confirm-check {
  width:68px; height:68px; border-radius:50%;
  background:var(--green-a); border:2px solid var(--green-b);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 0 30px rgba(0,201,106,0.3);
}
.confirm-h1 { font-size:28px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.confirm-carrier { font-size:14px; color:var(--text2); margin-bottom:4px; }
.confirm-track { font-size:12px; color:var(--text3); font-family:'DM Mono',monospace; margin-bottom:22px; }
.confirm-instruct { font-size:13px; font-weight:700; color:var(--text2); margin-bottom:12px; }
.qr-wrap {
  background:white; border-radius:var(--r); padding:18px;
  display:inline-block; box-shadow:var(--sh); margin-bottom:20px;
  border:1px solid rgba(0,0,0,0.06);
}
.confirm-steps {
  width:100%; text-align:left; list-style:none;
  counter-reset:steps; margin-bottom:4px;
}
.confirm-steps li {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(13,27,42,0.07);
  font-size:13px; color:var(--text2); line-height:1.5;
  counter-increment:steps;
}
.confirm-steps li:last-child { border-bottom:none; }
.confirm-steps li::before {
  content:counter(steps);
  width:24px; height:24px; border-radius:50%;
  background:var(--navy); color:white;
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}

/* ═══════════════════════════════════════════════════
   TRACKING SCREEN
═══════════════════════════════════════════════════ */
.track-head { margin-bottom:22px; }
.t-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:4px 11px;
  border-radius:20px; font-family:'DM Mono',monospace; letter-spacing:.05em;
}
.t-badge.transit { background:rgba(245,158,11,0.15); color:#92400E; border:1px solid rgba(245,158,11,0.3); }
.t-badge.done    { background:var(--green-a); color:#065F46; border:1px solid var(--green-b); }
.t-badge.idle    { background:rgba(13,27,42,0.08); color:var(--navy2); border:1px solid rgba(13,27,42,0.12); }
.track-h1 { font-size:22px; font-weight:800; color:var(--navy); margin-top:10px; margin-bottom:4px; }
.track-id, .track-car { font-size:12px; color:var(--text3); font-family:'DM Mono',monospace; }

.track-tl { position:relative; list-style:none; padding-left:0; }
.track-tl::before { content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:rgba(13,27,42,0.10); }
.t-ev { display:flex; gap:18px; margin-bottom:18px; }
.t-dot {
  width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(13,27,42,0.12);
  background:white; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; box-shadow:var(--sh3);
}
.t-dot.done { border-color:var(--green); background:var(--green-a); }
.t-dot.done::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--green); display:block; }
.t-dot.cur  { border-color:var(--navy); background:rgba(13,27,42,0.08); }
.t-dot.cur::after  { content:''; width:8px; height:8px; border-radius:50%; background:var(--navy); display:block; }
.t-ev-title { font-size:13px; font-weight:600; color:var(--navy); margin-bottom:2px; }
.t-ev-sub   { font-size:12px; color:var(--text3); font-family:'DM Mono',monospace; }
.t-empty { text-align:center; padding:44px 0; }
.t-empty-icon { font-size:52px; margin-bottom:16px; }
.t-empty h2 { font-size:18px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.t-empty p  { font-size:13px; color:var(--text2); }

/* ═══════════════════════════════════════════════════
   ACCOUNT SCREEN
═══════════════════════════════════════════════════ */
.auth-prompt {
  background:rgba(255,255,255,0.70); border:1px solid var(--border);
  border-radius:var(--r); padding:20px; margin-bottom:22px; text-align:center;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.auth-prompt p { font-size:13px; color:var(--text2); line-height:1.6; }
.ep-card {
  background:rgba(255,255,255,0.72); border:1px solid var(--border);
  border-radius:var(--r2); padding:15px; margin-bottom:10px;
  cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--sh3);
}
.ep-card:hover { background:rgba(255,255,255,0.90); }
.ep-name { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.ep-addr { font-size:12px; color:var(--text2); }
.ep-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.hist-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid rgba(13,27,42,0.07); cursor:pointer;
}
.hist-row:last-child { border-bottom:none; }
.hist-id { font-family:'DM Mono',monospace; font-size:11px; color:var(--green); margin-bottom:2px; }
.hist-d  { font-size:13px; font-weight:600; color:var(--navy); }
.hist-m  { font-size:11px; color:var(--text3); margin-top:2px; }
.hist-s  { font-size:10px; font-weight:600; padding:3px 9px; border-radius:10px; white-space:nowrap; }
.btn-add { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1.5px dashed rgba(13,27,42,0.14); color:var(--text2); padding:14px; border-radius:var(--r2); font-size:14px; margin-top:4px; transition:.2s; }
.btn-add:hover { border-color:rgba(13,27,42,0.28); color:var(--navy); }
.empty-txt { font-size:13px; color:var(--text4); padding:10px 0; }

/* ═══════════════════════════════════════════════════
   SHARED BUTTON SYSTEM
═══════════════════════════════════════════════════ */
.btn-full {
  width:100%; padding:16px 24px;
  border-radius:var(--r); font-size:15px; font-weight:700;
  transition:.2s; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
}
.btn-full:active { transform:scale(.97); box-shadow:0 2px 8px rgba(13,27,42,0.18); }

.btn-full.navy { background:var(--navy); color:white; box-shadow:0 4px 18px rgba(13,27,42,0.28); border:none; }
.btn-full.navy:hover { background:var(--navy2); transform:translateY(-1px); }
.btn-full.navy:disabled { opacity:.4; cursor:default; transform:none; }

.btn-full.green { background:var(--green); color:white; box-shadow:0 4px 18px rgba(0,201,106,0.35); border:none; }
.btn-full.green:hover { background:#00b05c; transform:translateY(-1px); }
.btn-full.green:disabled { opacity:.4; cursor:default; transform:none; }

.btn-full.outline {
  background:rgba(255,255,255,0.70); color:var(--navy);
  border:1.5px solid rgba(255,255,255,0.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn-full.outline:hover { background:rgba(255,255,255,0.90); }

.mt10 { margin-top:10px; }
.mt12 { margin-top:12px; }
.mt20 { margin-top:20px; }

.screen-title { font-size:clamp(22px, 6vw, 28px); font-weight:800; letter-spacing:-.02em; color:var(--navy); margin-bottom:6px; }
.screen-sub   { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:22px; }

.div-line { height:1px; background:rgba(13,27,42,0.08); margin:22px 0; }

.loading-row {
  display:flex; align-items:center; gap:12px;
  padding:28px 0; font-size:13px; color:var(--text2);
  justify-content:center;
}
.spinner {
  width:24px; height:24px;
  border:3px solid rgba(13,27,42,0.12);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
.btn-spinner {
  width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,0.3);
  border-top-color:white;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════ */
#modal {
  position:fixed; inset:0; z-index:200;
  background:rgba(8,20,45,0.65);
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
@supports not (backdrop-filter: blur(1px)) { #modal { background:rgba(8,20,45,0.85); } }
.modal-box {
  background:white; border-top-left-radius:24px; border-top-right-radius:24px;
  padding:28px 24px calc(52px + env(safe-area-inset-bottom,0px));
  width:100%; max-width:480px;
  max-height:90vh; max-height:90dvh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 -8px 48px rgba(13,27,42,0.25);
  position:relative;
}
.modal-x {
  position:absolute; top:16px; right:20px;
  font-size:24px; color:var(--text3);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:.2s;
}
.modal-x:hover { background:rgba(13,27,42,0.06); }
.modal-title { font-size:20px; font-weight:800; color:var(--navy); margin-bottom:18px; padding-right:32px; }

/* ─── SOCIAL AUTH BUTTONS ─── */
.social-btns { display:flex; flex-direction:column; gap:10px; }
.social-btn {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:13px 18px;
  background:white; border:1.5px solid rgba(13,27,42,0.12);
  border-radius:var(--r3); font-size:14px; font-weight:600;
  color:var(--navy); transition:.15s;
  cursor:pointer;
}
.social-btn:hover { background:rgba(13,27,42,0.04); border-color:rgba(13,27,42,0.25); }
.social-btn:active { transform:scale(0.98); }
.social-btn svg { flex-shrink:0; }

/* ─── AUTH SIGNED-IN STATE ─── */
.auth-email {
  font-size:14px; font-weight:600; color:var(--navy);
  padding:12px 0 4px;
}

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:calc(90px + env(safe-area-inset-bottom,0px));
  left:50%; transform:translateX(-50%);
  background:var(--navy); color:white;
  padding:12px 22px; border-radius:var(--r);
  font-size:13px; font-weight:500;
  opacity:0; transition:.3s;
  z-index:300;
  pointer-events:none; box-shadow:var(--sh);
  max-width:calc(100vw - 40px);
  width:max-content;
  text-align:center;
  word-break:break-word;
}
#toast.show { opacity:1; }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
footer {
  background:rgba(8,20,50,0.75);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,0.10);
  padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px));
  margin-top:auto;
}
@supports not (backdrop-filter: blur(1px)) { footer { background:rgba(8,20,50,0.95); } }
.footer-inner { max-width:480px; margin:0 auto; }
.f-logo-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.f-logo-row span { font-family:'DM Mono',monospace; font-size:13px; font-weight:500; color:white; letter-spacing:.12em; }
.f-desc { font-size:12px; color:rgba(255,255,255,0.50); line-height:1.65; margin-bottom:14px; }
.f-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.f-tags span { font-size:10px; color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.06); padding:2px 7px; border-radius:10px; }
.f-copy { font-size:11px; color:rgba(255,255,255,0.25); margin-bottom:6px; }
.f-credit { font-size:11px; color:rgba(255,255,255,0.35); margin-bottom:8px; }
.f-reg { font-size:10px; color:rgba(255,255,255,0.20); line-height:1.6; }

/* ─── CHIP PRICE NOTE ─── */
.chip-price-note { font-size:12px; color:var(--text3); text-align:center; margin:10px 0 4px; }

/* ─── STRIPE ELEMENT ─── */
#stripe-element {
  background: rgba(255,255,255,0.96);
  border: 1.5px solid rgba(13,27,42,0.18);
  border-radius: var(--r3);
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color 0.2s;
}
#stripe-element:focus-within {
  border-color: #64B5F6;
  box-shadow: 0 0 0 3px rgba(100,181,246,0.22);
}

/* ═══════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════ */
.hidden { display:none !important; }

/* ─── FOCUS STYLES — keyboard accessibility ─── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* Dark-background elements need a lighter outline */
#nav :focus-visible,
.btn-scan-main:focus-visible,
.btn-manual-scan:focus-visible,
footer :focus-visible {
  outline-color: #b9ffe0;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible) { outline: none; }
/* Rate cards, mode cards, faq get visible ring */
.rate-card:focus-visible,
.mode-card:focus-visible,
.faq:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(0,210,106,0.18);
}

/* Prevent text selection on UI elements */
button, .mode-card, .sz, .faq, .how-step { -webkit-user-select:none; user-select:none; }

/* iOS momentum scrolling */
.screen { -webkit-overflow-scrolling:touch; overflow-y:auto; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — narrow screens (<360px)
═══════════════════════════════════════════════════ */
@media (max-width: 359px) {
  .how-row { flex-wrap:wrap; gap:6px; }
  .how-arrow { display:none; }
  .how-step { flex:1 1 calc(33% - 4px); min-width:0; }
  .how-step p { font-size:10px; }
  .feat-grid { grid-template-columns:1fr; }
  .seo-list { grid-template-columns:1fr; }
  .carriers { justify-content:center; }
  .carriers-note { width:100%; text-align:center; margin-left:0; }
  .hero h1 { font-size:28px; }
  .hero-sub { font-size:13px; }
  .hero-badge { font-size:10px; padding:4px 10px; }
  .btn-scan-main { font-size:16px; padding:16px 24px; }
  .size-grid { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — tablets & wider
═══════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .hero h1 { font-size:44px; }
  .btn-scan-main { max-width:340px; padding:22px 40px; }
}
@media (min-width: 768px) {
  #s-home { padding: 0 0 60px; }
  .hero { padding:56px 48px 40px; }
  .social-btn { padding:15px 20px; font-size:15px; }
}

/* Desktop & ultrawide — center the app card with visual polish */
@media (min-width: 600px) {
  #app {
    margin-top:20px;
    margin-bottom:20px;
    min-height:calc(100vh - 40px);
    min-height:calc(100dvh - 40px);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 60px rgba(10,22,40,0.35);
  }
  #nav { border-radius:24px 24px 0 0; }
  footer { border-radius:0 0 24px 24px; }
}
@media (min-width: 1024px) {
  #app { margin-top:32px; margin-bottom:32px; }
}
@media (min-width: 1440px) {
  #app { margin-top:48px; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .sky-photo, .fc { animation:none !important; }
  .scan-laser { animation:none !important; top:50% !important; }
  .pulse { animation:none !important; }
  .spinner, .btn-spinner { animation:none !important; border-top-color:currentColor; }
  .screen.active { animation:none !important; }
  .hero > * { animation:none !important; }
  .btn-scan-main:hover, .btn-scan-main:active,
  .btn-full:hover, .btn-full:active,
  .feat-card:hover, .mode-card:hover,
  .rate-card:hover { transform:none !important; }
}

/* ─── HIGH CONTRAST ─── */
@media (prefers-contrast: high) {
  .field-input { border:2px solid var(--navy); }
  .mode-card { border:2px solid var(--navy); }
}