:root{
  /* App */
  --bg:#0b1020; --paper:#f7f3e7; --ink:#111827; --muted:#475569; --line:#e5e7eb;
  --indigo:#6366f1; --sky:#0ea5e9; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  --sans: "Airbnb Cereal App", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* Airbnb-ish */
  --ab-brand:#FF385C; --ab-ink:#222222; --ab-muted:#717171;
  --ab-border:#DDDDDD; --ab-border-strong:#B0B0B0; --ab-bg:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1020,#111936);color:#fff;font-family:var(--sans);}
h1,h2{margin:.2rem 0}
p{margin:.4rem 0}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;background:rgba(11,16,32,.8);backdrop-filter: blur(8px);z-index:20;
}
.brand{display:flex;gap:10px;align-items:center}
.logo{display:grid;place-items:center;width:44px;height:44px;background:rgba(255,255,255,.08);border-radius:12px;font-size:24px}
.title h1{font-size:18px;font-weight:800}
.title p{opacity:.8;font-size:12px;margin-top:2px}
.nav{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  padding:8px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:800;
  color:#fff;background:#1f2937;
}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25)}
.btn.indigo{background:var(--indigo);border-color:var(--indigo)}
.btn.sky{background:var(--sky);border-color:var(--sky)}
.btn.gradient{background:linear-gradient(135deg,#f83600,#f9d423);border-color:transparent;color:#111}

.container{max-width:1000px;margin:18px auto;padding:0 14px}

.panel{
  margin-top:14px;background:#0f172a;border:1px solid rgba(255,255,255,.08);
  border-radius:14px;overflow:hidden;padding:14px;display:none;
}
.panel.show{display:block}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel .code{font-family:var(--mono);font-weight:800;background:rgba(255,255,255,.08);padding:6px 10px;border-radius:8px}

/* Make the FORM panel look Airbnb-like (white card, dark text) */
#viewForm.panel{
  background:#fff;color:var(--ab-ink);border:1px solid #eee;
}
#viewForm .panel-head h2{color:var(--ab-ink)}
#viewForm .code.red{
  background: rgba(255,56,92,.12);
  color: var(--ab-brand);
  border:1px solid rgba(255,56,92,.3);
}

/* Grid */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:800px){ .grid2{grid-template-columns:1fr;} }

.card-card,.card-form{
  background:#0b1228;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px
}
.card-card header,.card-form header{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#1e293b;font-size:26px}

.note{color:#cbd5e1;font-size:12px;margin-top:8px}
#viewForm .note{color:var(--ab-muted)}

/* ----------------- Airbnb-like form controls ----------------- */
.form .field{display:flex;flex-direction:column;gap:6px}
.form .field.wide{grid-column:1/-1}
.form.airbnb label{font-size:12px;font-weight:600;color:var(--ab-ink)}
.form.airbnb input,.form.airbnb select,.form.airbnb .date-out{
  background:#fff;color:var(--ab-ink);border:1px solid var(--ab-border);
  border-radius:12px;padding:14px 14px;height:56px;
}
.form.airbnb input::placeholder{color:var(--ab-muted)}
.form.airbnb input:focus,.form.airbnb select:focus,.form.airbnb .date-out:focus{
  outline:none;border-color:var(--ab-ink);box-shadow:0 0 0 2px var(--ab-ink) inset;
}

/* Date composite */
.date-wrap{position:relative; display:flex; align-items:center;}
.native-date{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:auto; z-index:2; /* invisible, clickable (works in iframes) */
}
.date-out{
  width:100%; padding-right:44px; position:relative; z-index:1;
}
.cal-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:12px;
  background:#fff; color:var(--ab-ink);
  border:1px solid var(--ab-border); display:grid; place-items:center; cursor:pointer; z-index:3;
}
.cal-btn:hover{ border-color: var(--ab-border-strong); }

/* PASSPORT LOOK (unchanged) */
.passport{
  background: radial-gradient(circle at 20% 30%, #faf6ea 0%, #efe8d7 60%, #e7dfcc 100%);
  border: 1px solid #e4dcc7; border-radius: 16px; color:var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.passport-page{ padding:16px; background:
  repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 8px, rgba(0,0,0,.04) 8px 16px),
  radial-gradient(1200px 180px at 0 0, rgba(255,255,255,.35), transparent);
  border-radius: 16px;
}
.passport-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.crest{font-size:28px;filter: drop-shadow(0 1px 0 rgba(0,0,0,.06))}
.country{line-height:1}
.country-small{letter-spacing:.2em;font-size:12px;color:#6b7280;text-transform:uppercase}
.country-big{font-weight:800;letter-spacing:.3em}
.chip{
  width:44px;height:32px;border-radius:6px;background:linear-gradient(135deg,#d8b98b,#b78f5a);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); position:relative;
}
.chip::after{content:""; position:absolute; inset:6px; border:2px solid rgba(0,0,0,.2); border-radius:4px;}

.passport-body{display:grid;grid-template-columns:140px 1fr;gap:14px}
@media (max-width:640px){ .passport-body{grid-template-columns:1fr} }

.photo{
  width:140px;height:180px;border-radius:8px;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.5), transparent 40%),
              linear-gradient(135deg,#b3d4fc,#d0b9ff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fields dt{font-size:11px;letter-spacing:.08em;color:#6b7280;text-transform:uppercase}
.fields dd{margin:2px 0 0 0;font-weight:700;color:#111}

/* Toolbar */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.lbl{color:#cbd5e1}
.select{min-width:160px}

/* Keep dark panel code pill */
.panel .code{background:rgba(255,255,255,.08)}