@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --navy-1:#0b1330;
  --navy-2:#16224a;
  --navy-3:#1c2c5c;
  --gold:#e8c477;
  --gold-soft:#d9b877;
  --cream:#f6f1e6;
  --teal:#1f5c56;
  --teal-2:#2a7168;
  --green:#3fbf7f;
  --muted:#93a0c4;
  --ink:#161616;
  --tile-sm-w:24px;
  --tile-sm-h:32px;
  --tile-sm-fs:.85rem;
  --tile-sm-icon-fs:1rem;
  --tile-sm-gap:4px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:radial-gradient(circle at 50% 0%, var(--navy-3), var(--navy-1) 70%);
  color:var(--cream);
  min-height:100vh;
  padding-bottom:40px;
}

.wrap{max-width:520px;margin:0 auto;padding:32px 20px 60px;}

/* ---------- Header / hero ---------- */
.eyebrow{
  text-align:center;
  letter-spacing:.35em;
  font-size:.7rem;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:18px;
}
.tag-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(232,196,119,.5);
  color:var(--gold);
  padding:6px 16px;border-radius:999px;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 auto 18px;display:table;
}
.hero-title{
  text-align:center;font-weight:800;font-size:2.1rem;
  margin:6px 0 4px;
}
.hero-title .accent{color:var(--gold-soft);}
.hero-sub{
  text-align:center;color:var(--muted);letter-spacing:.25em;
  font-size:.8rem;text-transform:uppercase;margin-bottom:22px;
}
.rsvp-deadline{
  display:table;margin:0 auto 22px;
  background:rgba(232,196,119,.12);
  border:1px solid rgba(232,196,119,.4);
  color:var(--gold);
  padding:8px 18px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  text-align:center;
}
.chips{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.chip{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-size:.72rem;letter-spacing:.1em;
  padding:6px 12px;border-radius:8px;
}

/* ---------- Status stepper ---------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 26px;flex-wrap:wrap;}
.step{display:flex;align-items:center;gap:8px;}
.step-dot{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--navy-1);
  background:#3a4676;
}
.step-dot.done{background:var(--green);color:#08321c;}
.step-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.step-line{width:22px;height:2px;background:rgba(255,255,255,.15);}

/* ---------- Flip board ---------- */
.flipboard{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px;margin-bottom:26px;
}
.flip-top{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.2em;color:var(--gold-soft);text-transform:uppercase;margin-bottom:12px;}
.flip-row{display:flex;gap:0px;justify-content:center;margin-bottom:8px;flex-wrap:wrap;}
/* The combined board shows both names plus a plane icon. A single name is
   short enough to always fit one line on any phone, so rather than forcing
   both names onto one wide horizontal row (which doesn't fit small screens
   and either gets clipped or needs scrolling to read), it's stacked:
   name / plane / name. */
.flip-row-combined{flex-direction:column;align-items:center;gap:6px;}
.flip-name-row{display:flex;gap:var(--tile-sm-gap);justify-content:center;flex-wrap:wrap;}
.flip-icon-row{margin:0;}
.flip-tile-sm{width:var(--tile-sm-w);height:var(--tile-sm-h);font-size:var(--tile-sm-fs);flex:0 0 auto;}
.flip-tile{
  background:#0e1738;border:1px solid rgba(255,255,255,.08);
  border-radius:6px;width:34px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-weight:700;font-size:1.1rem;
  color:var(--cream);
}
.flip-tile-icon{background:transparent;border-color:transparent;font-size:1.3rem;color:var(--gold-soft);}
.flip-tile-sm.flip-tile-icon{font-size:var(--tile-sm-icon-fs);}
.flip-meta{display:flex;justify-content:space-between;margin-top:14px;gap:10px;flex-wrap:wrap;}
.flip-meta div{flex:1;min-width:90px;text-align:center;background:rgba(255,255,255,.04);border-radius:8px;padding:8px 4px;}
.flip-meta span{display:block;font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px;}
.flip-meta strong{font-size:.85rem;}
.status-boarding{color:var(--green);}

/* ---------- Boarding pass card ---------- */
.pass{
  background:var(--cream);color:var(--ink);
  border-radius:20px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  margin-bottom:24px;
}
.pass-head{
  background:linear-gradient(120deg,var(--teal),var(--teal-2));
  color:#eafff8;
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  letter-spacing:.15em;font-size:.78rem;text-transform:uppercase;font-weight:700;
}
.badge-confirmed{
  background:rgba(255,255,255,.18);
  border-radius:999px;padding:5px 12px;
  display:inline-flex;align-items:center;gap:6px;font-size:.7rem;
}
.pass-body{padding:22px 22px 6px;}
.route{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.route .code{font-size:2rem;font-weight:800;line-height:1;}
.route .city{font-size:.7rem;letter-spacing:.15em;color:#6b6b6b;text-transform:uppercase;}
.route .plane{flex:1;text-align:center;color:#a3a3a3;position:relative;top:-6px;}
.route .line{height:1px;background:#d8d0bd;margin:0 8px;flex:1;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.field-label{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#8a8370;margin-bottom:3px;}
.field-value{font-weight:700;font-size:.95rem;}

.info-box{
  background:#efe9db;border-radius:10px;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;flex-wrap:wrap;gap:6px;
}
.info-box .name{font-weight:700;}
.flip-mini-row{display:flex;gap:2px;}
.flip-tile-mini{
  width:16px;height:20px;font-size:.65rem;border-radius:3px;
  background:#1a2450;color:#f6f1e6;font-family:'Space Mono',monospace;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.flip-tile{perspective:200px;}
.flip-tile.settled,.flip-tile-mini.settled{animation:tileSettle .25s ease;}
@keyframes tileSettle{
  0%{transform:rotateX(90deg);opacity:.3;}
  100%{transform:rotateX(0deg);opacity:1;}
}
.venue-link{color:inherit;text-decoration:none;display:block;}
.venue-link .field-value{transition:color .15s;}
.venue-link:hover .field-value{color:#1f5c56;text-decoration:underline;}
.map-arrow{color:#1f5c56;font-size:.8em;}
.info-box .sub{color:#6b6b6b;font-size:.75rem;}
.info-box .time{font-weight:700;font-size:.85rem;}

.venue{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;}
.venue .pin{font-size:1.1rem;}
.venue .field-label{margin-bottom:2px;}

.perforation{
  border-top:2px dashed #d8d0bd;position:relative;margin:10px -22px 0;
}
.perforation::before,.perforation::after{
  content:'';position:absolute;top:-11px;width:22px;height:22px;
  background:var(--navy-1);border-radius:50%;
}
.perforation::before{left:-11px;}
.perforation::after{right:-11px;}

.stub{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.stub .celebrating span{display:block;}
.barcode-wrap{flex:0 0 auto;width:150px;max-width:46%;}
.barcode-wrap svg{width:100%;height:auto;display:block;}
.confirm-note{
  padding:14px 22px 22px;font-size:.85rem;color:#4b4b4b;
  border-top:1px solid #e6ded0;
}

/* ---------- Form ---------- */
.form-section{padding:0 22px 22px;}
.form-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:18px 0 6px;color:#3d3d3d;}
.form-hint{font-size:.75rem;color:#8a8370;margin-top:-2px;margin-bottom:8px;}
input[type=text],input[type=tel],input[type=time],input[type=datetime-local]{
  width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid #d8d0bd;background:#fff;font-size:.95rem;font-family:inherit;
}
input:focus{outline:2px solid var(--teal);outline-offset:1px;}

.option-row{
  border:1px solid #d8d0bd;border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;margin-bottom:10px;cursor:pointer;
  background:#fff;
}
.option-row.selected{border-color:var(--teal);background:#eef8f5;}
.option-row .icon-box{
  width:34px;height:34px;border-radius:8px;background:#efe9db;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.option-row .opt-title{font-weight:700;font-size:.92rem;}
.option-row .opt-sub{font-size:.75rem;color:#8a8370;}
.option-row .radio{
  margin-left:auto;width:20px;height:20px;border-radius:50%;
  border:2px solid #c9c0a8;flex-shrink:0;
}
.option-row.selected .radio{border-color:var(--teal);background:radial-gradient(circle,var(--teal) 0 40%,#fff 42%);}

.counter{
  border:1px solid #d8d0bd;border-radius:12px;padding:16px;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;background:#fff;
}
.counter button{
  width:44px;height:44px;border-radius:10px;border:1px solid #d8d0bd;background:#fff;
  font-size:1.3rem;cursor:pointer;
}
.counter .count-mid{text-align:center;}
.counter .count-num{font-size:1.4rem;font-weight:800;}
.counter .count-lbl{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8370;}

.submit-btn{
  width:100%;padding:18px;border:none;border-radius:14px;margin-top:16px;
  background:var(--ink);color:#fff;font-size:.95rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;cursor:pointer;
}
.submit-btn:hover{background:#000;}
.form-footnote{text-align:center;font-size:.78rem;color:#8a8370;margin-top:10px;}

.error-msg{
  background:#fde8e6;color:#9a2f28;border-radius:10px;padding:10px 14px;
  font-size:.85rem;margin-bottom:16px;
}

.back-link{
  display:inline-block;color:var(--muted);text-decoration:none;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
}

.action-row{display:flex;gap:12px;margin:20px 0;}
.action-btn{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:16px 8px;text-align:center;color:var(--cream);
  text-decoration:none;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:inherit;cursor:pointer;
}
.action-btn:disabled{opacity:.6;cursor:default;}
.footer-note{text-align:center;color:var(--muted);font-size:.75rem;letter-spacing:.1em;margin-top:10px;}

/* METAR ticker footer, purely decorative like the original screenshots */
.metar-ticker{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.55);color:#8a97c4;
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:1px;
  padding:6px 0;white-space:nowrap;overflow:hidden;
}
.metar-ticker span{display:inline-block;padding-left:100%;animation:ticker 25s linear infinite;}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* ---------- Admin dashboard ---------- */
.dash-wrap{max-width:960px;}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:10px;}
.dash-title{font-weight:800;font-size:1.5rem;}
.logout-link{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.15);padding:8px 14px;border-radius:8px;}

.stat-row{display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap;}
.stat-card{flex:1;min-width:130px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px;}
.stat-card .num{font-size:1.6rem;font-weight:800;color:var(--gold-soft);}
.stat-card .lbl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

.tabs{display:flex;gap:10px;margin-bottom:20px;}
.tab-link{
  flex:1;text-align:center;padding:12px;border-radius:10px;text-decoration:none;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(255,255,255,.05);color:var(--muted);border:1px solid rgba(255,255,255,.1);
}
.tab-link.active{background:var(--teal);color:#eafff8;border-color:var(--teal);}

.table-card{background:var(--cream);border-radius:16px;overflow:hidden;color:var(--ink);}
.table-scroll{overflow-x:auto;}
table.rsvp-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px;}
table.rsvp-table th{
  text-align:left;background:#efe9db;padding:12px 14px;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;
}
table.rsvp-table td{padding:12px 14px;border-top:1px solid #ece6d8;}
table.rsvp-table tr:hover td{background:#f8f4ea;}
.pill-yes{background:#e4f6ea;color:#1f7a44;padding:3px 10px;border-radius:999px;font-size:.75rem;}
.pill-no{background:#f3f0e6;color:#8a8370;padding:3px 10px;border-radius:999px;font-size:.75rem;}
.export-btn{
  display:inline-block;margin-bottom:16px;background:var(--gold);color:#1a1a1a;
  padding:10px 18px;border-radius:10px;text-decoration:none;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.empty-state{padding:40px;text-align:center;color:#8a8370;}

.row-actions{display:flex;gap:8px;white-space:nowrap;}
.row-actions form{display:inline;margin:0;}
.row-btn{
  display:inline-block;border:none;border-radius:8px;padding:6px 12px;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  cursor:pointer;text-decoration:none;font-family:inherit;
}
.row-btn.edit{background:#eaf1fb;color:#1f4e8a;}
.row-btn.delete{background:#fde8e6;color:#9a2f28;}
.row-btn.edit:hover{background:#dbe8fa;}
.row-btn.delete:hover{background:#fad6d2;}

.success-msg{
  background:#e4f6ea;color:#1f7a44;border-radius:10px;padding:10px 14px;
  font-size:.85rem;margin-bottom:16px;
}

select.form-select{
  width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid #d8d0bd;background:#fff;font-size:.95rem;font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%238a8370' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select.form-select:focus{outline:2px solid var(--teal);outline-offset:1px;}

/* ---------- Persistent sound toggle ---------- */
.sound-toggle{
  position:fixed;top:18px;right:18px;z-index:1000;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--cream);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sound-toggle .sound-dot{
  position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);
}
.sound-toggle.muted .sound-dot{background:#555;box-shadow:none;}

/* ---------- Splash / intro overlay ---------- */
.splash-overlay{
  position:fixed;inset:0;z-index:999;
  background:radial-gradient(circle at 75% 12%, rgba(232,196,119,.12), transparent 40%),
             radial-gradient(circle at 50% 100%, var(--navy-3), var(--navy-1) 75%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;padding:20px;text-align:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.splash-overlay.hide{opacity:0;visibility:hidden;pointer-events:none;}

.stars{position:absolute;inset:0;pointer-events:none;}
.star{
  position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}

.compass-ticker{
  position:absolute;top:16px;left:0;right:0;
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:3px;
  color:rgba(255,255,255,.28);white-space:nowrap;overflow:hidden;
}
.compass-ticker span{display:inline-block;padding-left:100%;animation:ticker 20s linear infinite;}

.compass-ring{
  position:absolute;top:60px;left:24px;width:110px;height:110px;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.compass-ring::before{
  content:'';position:absolute;width:70%;height:70%;border:1px solid rgba(255,255,255,.1);border-radius:50%;
}
.compass-ring .dial{position:absolute;inset:0;animation:spin 50s linear infinite;}
.compass-ring .dial span{position:absolute;font-size:.6rem;color:rgba(255,255,255,.32);letter-spacing:1px;}
.compass-ring .dial .n{top:2px;left:50%;transform:translateX(-50%);}
.compass-ring .dial .e{right:2px;top:50%;transform:translateY(-50%);}
.compass-ring .dial .s{bottom:2px;left:50%;transform:translateX(-50%);}
.compass-ring .dial .w{left:2px;top:50%;transform:translateY(-50%);}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.moon{
  position:absolute;top:50px;right:36px;width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6d8, var(--gold) 60%, transparent 72%);
  box-shadow:0 0 40px 10px rgba(232,196,119,.25);
  animation:moonpulse 6s ease-in-out infinite;
}
@keyframes moonpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

.cloud{position:absolute;background:rgba(255,255,255,.05);border-radius:50%;filter:blur(6px);}
.cloud.c1{width:140px;height:36px;top:130px;left:-40px;animation:drift 18s linear infinite;}
.cloud.c2{width:100px;height:28px;top:210px;right:-30px;animation:driftRev 22s linear infinite;}
@keyframes drift{0%{transform:translateX(0);}100%{transform:translateX(120vw);}}
@keyframes driftRev{0%{transform:translateX(0);}100%{transform:translateX(-120vw);}}

.splash-plane{font-size:2.3rem;animation:floatA 4s ease-in-out infinite;margin-bottom:-4px;}
.splash-ticket{font-size:1.3rem;opacity:.8;animation:floatB 4s ease-in-out infinite;margin-bottom:8px;}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(3deg);}}
@keyframes floatB{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

.splash-badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(232,196,119,.5);
  color:var(--gold);padding:6px 16px;border-radius:999px;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;
}
.splash-sub{color:var(--muted);letter-spacing:.2em;font-size:.72rem;text-transform:uppercase;margin:8px 0;}
.splash-title{font-weight:800;font-size:2rem;margin-bottom:14px;}
.splash-title .accent{color:var(--gold-soft);}
.splash-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.splash-desc{max-width:340px;color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:26px;}

.splash-cta{
  background:var(--gold);color:#1a1a1a;border:none;border-radius:999px;
  padding:18px 34px;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  animation:ctaGlow 2.4s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,196,119,.5);}
  50%{box-shadow:0 0 0 14px rgba(232,196,119,0);}
}
.splash-note{margin-top:12px;color:var(--muted);font-size:.72rem;letter-spacing:.05em;}

.runway{position:absolute;bottom:70px;left:0;right:0;display:flex;justify-content:center;gap:22px;}
.runway span{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:.2;}50%{opacity:1;}}

.skyline{position:absolute;bottom:0;left:0;right:0;height:50px;display:flex;align-items:flex-end;justify-content:center;gap:6px;opacity:.5;}
.skyline div{background:var(--navy-3);width:32px;border-radius:3px 3px 0 0;}

@media (max-width:400px){
  .hero-title{font-size:1.7rem;}
  .flip-tile{width:26px;height:34px;font-size:.9rem;}
  :root{
    --tile-sm-w:19px;
    --tile-sm-h:26px;
    --tile-sm-fs:.7rem;
    --tile-sm-icon-fs:.85rem;
    --tile-sm-gap:3px;
  }
}