/* Shared by the card app (index.html) and the booth phone screen (vendor.html). */
:root {
  --ink: #0d1526; --muted: #5b6578; --line: #e2e6ee; --bg: #f3f5f9; --card: #fff; --field: #fff;
  --accent: #0a63e8; --accent-2: #19b2ff; --bad: #b42318; --ok: #1f7a3d; --head: rgba(255, 255, 255, .94);
  --shadow: 0 1px 2px rgba(13, 21, 38, .06), 0 6px 20px rgba(13, 21, 38, .06);
  --brand: linear-gradient(135deg, #0a3fa8 0%, #0a63e8 55%, #19b2ff 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef8; --muted: #93a1b8; --line: #1c2a42; --bg: #00010a; --card: #0b1424; --field: #0f1b30;
    --accent: #3d8bff; --accent-2: #23c0ff; --bad: #ff7a6b; --ok: #5fd07a; --head: rgba(0, 1, 8, .94);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --brand: linear-gradient(135deg, #062a73 0%, #0a4fc4 55%, #0f8fd6 100%);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); }

/* Header: the N2X logo, the event's logo beside it, and whether the phone is online. */
header { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem 1rem; background: var(--head); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
header .brands { display: flex; align-items: center; gap: .6rem; min-width: 0; }
header img { display: block; height: 3rem; width: auto; max-width: 62vw; object-fit: contain; }
header #event-logo { max-width: 30vw; border-radius: 6px; }
header .brands:has(#event-logo:not([hidden])) picture img { max-width: 36vw; }
#status { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; }
#status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); }
#status.offline { color: var(--bad); }
#status.offline::before { background: var(--bad); }

main { max-width: 30rem; margin: 0 auto; padding: 1rem 1rem 6.5rem; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--bad); font-weight: 600; }
.id { font: .75rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); letter-spacing: .02em; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
.big-name { font-size: 1.3rem; font-weight: 750; }

/* Buttons */
.btn, button.main, a.main { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .75rem 1.15rem; font: inherit; font-weight: 650; border: 0; border-radius: 999px; background: var(--brand); color: #fff; text-decoration: none; cursor: pointer; }
.btn.wide { width: 100%; }
button.plain, a.plain { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem .95rem; font: inherit; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); text-decoration: none; cursor: pointer; }
.btn svg, button.plain svg, a.plain svg { width: 1.1rem; height: 1.1rem; }
.row-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* My card: a business card */
.biz { position: relative; overflow: hidden; border-radius: 20px; padding: 1.3rem 1.2rem 1.1rem; margin: 0 0 1rem; background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.biz::after { content: ""; position: absolute; right: -3.5rem; top: -3.5rem; width: 11rem; height: 11rem; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.biz .who { font-size: 1.55rem; font-weight: 750; line-height: 1.2; }
.biz .role { margin-top: .2rem; opacity: .9; }
.biz .lines { margin-top: .9rem; display: grid; gap: .35rem; font-size: .95rem; }
.biz .lines div { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.biz .lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz .lines svg { width: 1rem; height: 1rem; flex: none; opacity: .85; }
.biz .id { color: rgba(255, 255, 255, .7); margin-top: .9rem; }

.qr-panel { text-align: center; }
.qr { background: #fff; padding: .6rem; border-radius: 14px; }
.qr-panel .qr { width: min(100%, 17rem); margin: 0 auto .6rem; }
.qr svg { display: block; width: 100%; height: auto; }

/* The rotating area: ads and specials later; N2X's own messages for now. */
.promo { position: relative; overflow: hidden; padding: 0; }
.promo .slide { display: none; padding: 1rem 1rem 1.6rem 1.15rem; border-left: 4px solid var(--accent-2); }
.promo .slide.on { display: block; animation: fade .5s ease; }
.promo .slide strong { display: block; }
.promo .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.promo .dots { position: absolute; bottom: .55rem; left: 0; right: 0; display: flex; justify-content: center; gap: .3rem; }
.promo .dots i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--line); }
.promo .dots i.on { background: var(--accent); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Bottom navigation */
nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; background: var(--head); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(8px); }
nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .5rem .6rem; border: 0; background: none; font: inherit; font-size: .75rem; font-weight: 650; color: var(--muted); cursor: pointer; }
nav button svg { width: 1.45rem; height: 1.45rem; }
nav button.on { color: var(--accent); }

/* Scanning */
.viewfinder { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewfinder::after { content: ""; position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
textarea { width: 100%; min-height: 5rem; padding: .7rem; font: inherit; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); }

/* Contacts */
.contact { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .8rem; align-items: center; cursor: pointer; }
.avatar { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
.contact .name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact .sub { grid-column: 2; font-size: .88rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact .when { grid-column: 3; grid-row: 1; font-size: .75rem; color: var(--muted); }
.contact .state { grid-column: 3; grid-row: 2; justify-self: end; }
.contact .more { grid-column: 1 / -1; margin-top: .6rem; }
.contact .note-preview { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); margin-top: .35rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 650; }
.chip.pending { background: rgba(180, 35, 24, .1); color: var(--bad); }
.chip.synced { background: rgba(31, 122, 61, .12); color: var(--ok); }
.empty { text-align: center; padding: 2rem 1rem; }

/* A short message that appears and fades */
.toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 4; max-width: calc(100% - 2rem); padding: .7rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: var(--shadow); animation: fade .3s ease; }

.links a { margin: .25rem .4rem .25rem 0; }
[hidden] { display: none !important; }