/* ============================================================================
   TAPN Entry — Attendee OS demos
   ----------------------------------------------------------------------------
   Three reproductions of shipped surfaces:

     .bs-*   Badge Studio      ← public/badgeStudio_EDITOR.php
     .hb-*   Event Hub         ← hub/index.php + hub/index_CSS.css
     .pf-*   Smart Profile     ← public/profile.php

   Every one of them runs entirely in the browser and writes nothing anywhere.
   Layout, chrome, control set and interaction model follow the real files.

   Unlike the rest of the site, everything inside a .demo-frame carries the
   product's own light palette rather than the page's semantic tokens. These
   are pictures of an application, so they stay lit in dark mode for the same
   reason .kiosk does — see the note above the .kiosk block in tokens.css.
   ========================================================================== */

/* ---- Demo chrome -------------------------------------------------------- */
.demo-frame {
  /* Light pin. Re-points the semantic tokens the demos read, so everything
     inside the frame renders as the product does regardless of page theme. */
  --ink:         #0f172a;
  --ink-80:      rgba(15,23,42,.80);
  --ink-65:      rgba(15,23,42,.65);
  --muted:       #64748b;
  --bg:          #f6f9fb;
  --card:        #ffffff;
  --card-glass:  rgba(255,255,255,.92);
  --card-veil:   rgba(255,255,255,.65);
  --line:        rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.12);
  --line-teal:   rgba(15,187,179,.22);
  --tint-teal:   rgba(15,187,179,.12);
  --sh-sm:       0 8px 20px rgba(15,23,42,.05);
  --sh:          0 10px 28px rgba(15,23,42,.08);
  --sh-lg:       0 22px 50px rgba(15,23,42,.12);
  --sh-hover:    0 10px 22px rgba(15,23,42,.08);

  /* One viewport height for all three demos. The Hub and the Profile are long
     pages and the Studio is a fixed-height app; capping them all at the same
     number keeps the section scannable and scrolls the overflow inside the
     frame rather than down the page. */
  --demo-h: min(680px, 78vh);

  border: 1px solid rgba(15,23,42,.14);
  border-radius: var(--r-xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 22px 50px rgba(2,6,23,.24);
  overflow: hidden;
}

/* Browser chrome — used on the two demos that are public web pages. The
   Badge Studio has its own product title bar instead (.bs-topbar). */
.demo-frame__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--bg));
}
.demo-frame__dots { display: flex; gap: 6px; flex: none; }
.demo-frame__dots i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--line-strong); }
.demo-frame__url {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; margin-right: auto;
  padding: 6px 14px; min-height: 32px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 12px; font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-frame__url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--teal-deep); stroke-width: 2; stroke-linecap: round; }
.demo-frame__url b { color: var(--ink); font-weight: 800; }
.demo-frame__live {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  color: var(--teal-deep);
}
.demo-frame__live i {
  width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--teal);
  box-shadow: 0 0 0 0 rgba(15,187,179,.5); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(15,187,179,0); } 100% { box-shadow: 0 0 0 0 rgba(15,187,179,0); } }
.demo-frame__reset {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  padding: 6px 13px; min-height: 32px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.demo-frame__reset:hover { color: var(--ink); border-color: var(--line-strong); }

/* Transient feedback inside a frame — used where the real app would have
   confirmed a write, so the demo can say plainly that it didn't. */
.demo-toast {
  margin: 0; padding: 10px 16px;
  border-bottom: 1px solid rgba(245,158,11,.25);
  background: rgba(245,158,11,.14); color: #9a5b00;
  font-size: .84rem; font-weight: 700;
}

/* The standing promise, repeated under every demo. It sits outside the frame,
   so it stays in the page's theme. */
.demo-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--card-veil); border: 1px solid var(--line);
  font-size: .86rem; line-height: 1.55; color: var(--muted);
}
.demo-note svg { flex: none; margin-top: 3px; color: var(--teal-deep); }
.demo-note b { color: var(--ink); font-weight: 800; }

/* ---- Demo switcher ------------------------------------------------------ */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.demo-tabs .tab { display: inline-flex; align-items: center; gap: 9px; }
.demo-tabs .tab svg { flex: none; }

/* ══ BADGE STUDIO ═════════════════════════════════════════════════════════
   badgeStudio_EDITOR.php is a full-bleed app: a teal→blue title bar carrying
   document meta, history and zoom; a 96px icon rail; a 300px sliding tool
   panel; and a stage holding a contextual toolbar, the 2:3 canvas and the
   tier rail. Same chrome, same order, same control set here.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Title bar (#bs-topbar) --- */
.bs-topbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-height: 62px; padding: 6px 14px;
  background: linear-gradient(90deg, #12BDB0 0%, #0B7C93 100%);
  color: #fff;
}
.bs-topbar__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 0; border-radius: 10px;
  background: none; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
}
.bs-topbar__meta {
  display: flex; align-items: center; gap: 10px; margin-left: 6px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92); white-space: nowrap;
}
.bs-topbar__meta i { width: 1px; height: 18px; background: rgba(255,255,255,.35); }
.bs-topbar__group { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.bs-topbar__group--zoom { gap: 2px; margin-left: 10px; }
.bs-hist {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 44px; padding: 4px 0 3px;
  border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer;
  font-family: inherit;
  transition: background var(--t) var(--ease), opacity var(--t) var(--ease);
}
.bs-hist:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.bs-hist:disabled { opacity: .4; cursor: default; }
.bs-hist svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-hist span { font-size: 8.5px; letter-spacing: .02em; opacity: .85; }
.bs-hist--sm { width: 30px; }
.bs-zoom-level {
  min-width: 52px; padding: 7px 6px;
  border: 0; border-radius: 9px;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.bs-zoom-level:hover { background: rgba(255,255,255,.26); }
.bs-topbar__right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.bs-topbar__event {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-topbar__ghost {
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px;
  background: none; color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bs-topbar__ghost:hover { background: rgba(255,255,255,.14); }
.bs-save {
  min-width: 100px; padding: 11px 22px;
  border: 0; border-radius: 12px;
  background: #fff; color: #0f172a;
  font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.bs-save:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.16); }

/* --- App body (#app-container) --- */
/* #app-container is `height: calc(100% - topbar)` in the original: a fixed
   viewport whose three columns scroll independently. Same here. */
.bs { display: grid; grid-template-columns: 92px 280px minmax(0, 1fr); height: var(--demo-h); background: #eef2f6; }

.bs-rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 0; background: #fff;
  min-height: 0; overflow-y: auto;
}
.bs-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 74px; padding: 10px 4px 8px;
  border: 0; border-radius: 14px;
  background: none; color: #101828;
  font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bs-rail-btn:hover { background: rgba(15,187,179,.08); }
.bs-rail-btn[aria-selected='true'] { color: var(--teal); }
.bs-rail-ico { width: 30px; height: 30px; display: grid; place-items: center; }
.bs-rail-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The Color rail button is the colour wheel itself — verbatim from the
   original's inline conic-gradient. */
.bs-rail-ico--wheel {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: conic-gradient(#f43f5e,#f59e0b,#facc15,#22c55e,#06b6d4,#6366f1,#a855f7,#f43f5e);
}

.bs-panel {
  padding: 22px 20px 32px; min-height: 0; overflow-y: auto;
  background: #fff;
  border-right: 1px solid rgba(16,24,40,.06);
  box-shadow: 6px 0 24px rgba(16,24,40,.05);
}
.bs-panel-title { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; }
.bs-panel-sub { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 12px; }
.bs-panel-sub:first-of-type { margin-top: 0; }
.bs-panel-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

/* Fields panel — one row per field, matching the six FIELD_DEFS. */
.bs-field-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 15px; margin-bottom: 10px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.bs-field-row:hover { border-color: var(--teal); box-shadow: 0 4px 12px rgba(15,187,179,.14); }
.bs-field-row__name { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.bs-field-row__act { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.bs-field-row[aria-pressed='true'] { border-color: rgba(15,187,179,.5); background: rgba(15,187,179,.05); }
.bs-field-row[aria-pressed='true'] .bs-field-row__act { color: var(--teal-deep); }

/* Templates panel */
.bs-tmpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bs-tmpl {
  aspect-ratio: 2 / 3; padding: 0; cursor: pointer;
  border: 0; border-radius: 8px;
  background: #fff; overflow: hidden; position: relative;
  box-shadow: 0 1px 4px rgba(16,24,40,.14);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bs-tmpl:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,.20); }
.bs-tmpl[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--teal), 0 8px 20px rgba(15,187,179,.24); }
.bs-tmpl > span {
  position: absolute; inset: auto 0 0 0; padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: #fff; font-size: 10.5px; font-weight: 700; text-align: left;
}
.bs-tmpl-mini { position: absolute; inset: 0; color: #98a2b3; }
.bs-tmpl-mini b { position: absolute; background: currentColor; border-radius: 1px; display: block; }
.bs-tmpl--blank {
  border: 1.5px dashed var(--line-strong); box-shadow: none;
  display: grid; place-items: center;
}
.bs-tmpl--blank > span { position: static; background: none; color: var(--muted); text-align: center; font-size: 12px; }

/* Items panel */
.bs-search {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; margin-bottom: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: #fff;
}
.bs-search svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.bs-search input { flex: 1; min-width: 0; border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--ink); }
.bs-search input:focus { outline: none; }
.bs-el-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bs-el-tile {
  aspect-ratio: 1; display: grid; place-items: center; padding: 9px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: #475467; cursor: pointer;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.bs-el-tile:hover { border-color: var(--teal); transform: translateY(-2px); }
.bs-el-tile[hidden] { display: none; }
.bs-el-tile svg { width: 100%; height: 100%; }

/* Colour panel */
.bs-swatches { display: flex; flex-wrap: wrap; gap: 11px; }
.bs-swatch {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(16,24,40,.10); flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.bs-swatch:hover { transform: scale(1.06); }
.bs-swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }

/* Uploads panel */
.bs-drop {
  display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 26px 14px; border-radius: var(--r-sm);
  border: 1.5px dashed var(--line-strong); background: var(--bg);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.bs-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bs-logo-btn {
  padding: 12px 8px; cursor: pointer; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--card);
  font-family: inherit; font-size: 11.5px; font-weight: 800; color: var(--muted);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.bs-logo-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.bs-logo-btn[aria-pressed='true'] { border-color: var(--teal); color: var(--teal-deep); background: var(--tint-teal); }

.bs-panel-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; min-height: 44px; margin-bottom: 8px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bs-panel-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-hover); }
.bs-panel-btn--primary { background: var(--brand-grad); color: #fff; border-color: rgba(15,187,179,.35); box-shadow: var(--sh-teal); }

/* --- Stage (#stage) --- */
.bs-stage {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 22px 0; min-width: 0; min-height: 0; overflow: hidden;
  background: #eef2f6;
}

/* Contextual toolbars — the field toolbar and the item toolbar swap in the
   same slot, exactly as #ctx-toolbar / #el-toolbar do in the original. */
.bs-ctx {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  max-width: 100%; padding: 7px 11px; margin-bottom: 20px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 2px 10px rgba(16,24,40,.08);
  transition: opacity var(--t) var(--ease);
}
.bs-ctx[data-disabled='true'] { opacity: .45; pointer-events: none; }
.bs-ctx[hidden] { display: none; }
.bs-ctx select {
  min-width: 116px; max-width: 130px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.bs-step-box {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 2px 5px;
}
.bs-step-box input {
  width: 40px; border: 0; text-align: center; background: none;
  font-family: inherit; font-size: 13px; color: var(--ink); padding: 5px 0;
}
.bs-step-box input:focus { outline: none; }
.bs-step {
  width: 24px; height: 24px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 16px; line-height: 1; color: var(--ink); border-radius: 6px;
}
.bs-step:hover { background: rgba(16,24,40,.06); }
.bs-color-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  flex: none; margin: 0 5px;
  background: conic-gradient(#f43f5e,#f59e0b,#facc15,#22c55e,#06b6d4,#6366f1,#a855f7,#f43f5e);
  display: grid; place-items: center;
}
.bs-ctx-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.18);
}
.bs-tgl {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 9px;
  background: none; color: var(--ink);
  font-family: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bs-tgl:hover:not(:disabled) { background: rgba(16,24,40,.06); }
.bs-tgl[aria-pressed='true'] { background: rgba(15,187,179,.14); color: var(--teal-deep); }
.bs-tgl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-tgl--b { font-weight: 900; }
.bs-tgl--i { font-style: italic; font-family: Georgia, serif; font-weight: 600; }
.bs-tgl--u { text-decoration: underline; font-weight: 600; }
.bs-tgl--danger:hover { background: rgba(244,63,94,.10); color: #b42318; }
.bs-ctx-sep { width: 1px; height: 24px; background: var(--line-strong); margin: 0 7px; flex: none; }
.bs-ctx-range { display: flex; align-items: center; gap: 7px; padding: 0 5px; flex: none; }
.bs-ctx-range span { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bs-ctx-range input[type='range'] { width: 64px; accent-color: var(--teal); cursor: pointer; }

/* Zoom drives the canvas past the stage; the area scrolls rather than
   shrinking it. `margin:auto` on the badge rather than centring the flex
   child — centring a child that overflows makes its top edge unreachable. */
.bs-canvas-area { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; overflow: auto; padding: 4px; }

/* The badge. The real canvas is 1200 × 1800 device px; every measurement here
   is the same number expressed in cqw against that 2:3 stage, so the layout is
   proportionally identical to what the printer receives. */
.bs-badge {
  position: relative;
  /* Zoom drives the height and aspect-ratio derives the width, so the canvas
     simply outgrows .bs-canvas-area and it scrolls — #canvasWrapper's own
     sizing model. */
  height: calc(100% * var(--bs-zoom, 1)); aspect-ratio: 2 / 3;
  flex: 0 0 auto; margin: auto;
  container-type: size;
  background: var(--bs-bg, #fff);
  box-shadow: 0 10px 34px rgba(16,24,40,.14);
  overflow: hidden;
  transition: background var(--t) var(--ease), width var(--t) var(--ease);
}
.bs-badge__accent { position: absolute; z-index: 0; inset: 0 0 auto 0; height: 3.5cqw; background: var(--bs-accent, var(--teal)); }
.bs-badge__logo {
  /* Clear of the Event Name field, which occupies y 60–190 of the 1800px
     canvas. 1 canvas-height % is 1.5cqw on a 2:3 badge. */
  position: absolute; z-index: 1; left: 6.6cqw; top: 19cqw;
  font-family: var(--font); font-weight: 900; font-size: 5cqw;
  letter-spacing: -.02em; color: var(--bs-accent, var(--teal));
}

.bs-field, .bs-el {
  position: absolute;
  padding: 0; margin: 0;
  border: 1.5px solid transparent; border-radius: 3px;
  background: none;
  cursor: grab; overflow: visible;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bs-field {
  display: flex; align-items: center;
  color: var(--bs-ink, #0f172a);
  font-family: inherit; line-height: 1.1;
  /* The canvas draws each field with one fillText call: no wrapping, and no
     clipping at the field box — only the badge edge cuts it off. Buttons
     default to text-align:center, so left has to be stated. */
  text-align: left; overflow: visible;
  z-index: 2;
}
/* Items sit behind the fields, as they do in the real editor. */
.bs-el { z-index: 1; }
.bs-field:hover, .bs-el:hover { border-color: rgba(15,187,179,.45); }
.bs-field[aria-pressed='true'], .bs-el[aria-pressed='true'] {
  border-color: var(--teal); box-shadow: 0 0 0 2px rgba(15,187,179,.18);
}
.bs-field[data-dragging='true'], .bs-el[data-dragging='true'] { cursor: grabbing; }
.bs-field > span { display: block; width: 100%; white-space: nowrap; }
.bs-field[data-align='center'] > span { text-align: center; }
.bs-field[data-align='right']  > span { text-align: right; }
.bs-field[data-bold='true']    { font-weight: 800; }
.bs-field[data-italic='true']  { font-style: italic; }
.bs-field[data-underline='true'] > span { text-decoration: underline; }
/* The QR field renders the same 11×11 grid the kiosk badge preview draws. */
.bs-field--qr { padding: 1.6cqw; background: #fff; overflow: hidden; }
.bs-field--qr svg { width: 100%; height: 100%; }
.bs-el svg { width: 100%; height: 100%; display: block; }

/* Tier rail — one card per tier, each holding its own saved design. */
.bs-tier-rail {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: 100%; padding: 20px 0 16px;
}
.bs-tier {
  width: 88px; padding: 9px 9px 7px;
  border: 0; border-radius: 8px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 1px 4px rgba(16,24,40,.16);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bs-tier:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16,24,40,.20); }
.bs-tier[aria-selected='true'] { box-shadow: 0 0 0 2px var(--teal), 0 8px 20px rgba(15,187,179,.24); }
.bs-tier-mini {
  position: relative; width: 100%; aspect-ratio: 2/3;
  border: 1px solid rgba(16,24,40,.06); overflow: hidden;
}
.bs-tier-mini i { position: absolute; inset: 0 0 auto 0; height: 5%; background: currentColor; }
.bs-tier-mini b { position: absolute; background: #cbd5e1; border-radius: 1px; display: block; }
.bs-tier-name {
  font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--ink);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-apply-all {
  align-self: center; max-width: 116px; padding: 11px 14px;
  border: 1px dashed rgba(15,187,179,.5); border-radius: 12px;
  background: rgba(15,187,179,.06); color: var(--teal-deep);
  font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.35;
  text-align: center; cursor: pointer;
}
.bs-apply-all:hover { background: rgba(15,187,179,.13); }

.bs-hint {
  width: 100%; padding: 0 0 16px; text-align: center;
  font-size: 11.5px; color: var(--muted); font-weight: 600;
}

@media (max-width: 940px) {
  /* Stacked, so the whole app scrolls in the frame rather than each column. */
  .bs { grid-template-columns: 1fr; height: auto; max-height: var(--demo-h); overflow-y: auto; }
  .bs-rail { flex-direction: row; overflow-x: auto; justify-content: flex-start; padding: 8px 6px; border-bottom: 1px solid var(--line); }
  .bs-rail-btn { flex: none; }
  /* .bs is the only scroller once stacked — a panel that scrolled inside it
     would nest two scroll areas under one thumb. */
  .bs-panel { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; box-shadow: none; }
  .bs-stage { order: -1; padding: 16px 12px 0; overflow: visible; }
  /* No definite stage height once stacked, so height the canvas directly. */
  .bs-canvas-area { height: 300px; }
  .bs-topbar__meta, .bs-topbar__event { display: none; }
}

/* ══ EVENT HUB ════════════════════════════════════════════════════════════
   hub/index.php: hero → three-up stat strip → schedule, guestlist, speakers
   and info widgets. --hb-primary is set from the demo's colour control, the
   same way the real page sets --ev-primary from the event's primary_color.
   ═══════════════════════════════════════════════════════════════════════ */
.hb {
  --hb-primary: #0fbbb3;
  --hb-tint: rgba(15,187,179,.14);
  --hb-glow: rgba(15,187,179,.30);
  padding: 22px; background: var(--bg);
  /* A long public page in a short window — it scrolls in the frame. */
  max-height: var(--demo-h); overflow-y: auto;
}

/* Demo-only control strip. The real page reads both values off the event
   record; here you set them yourself so you can watch the page repaint. */
.hb-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--card);
}
.hb-bar__label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hb-bar input[type='text'] {
  flex: 1; min-width: 150px; padding: 8px 14px; min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
}
.hb-bar input[type='text']:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,187,179,.14); }
.hb-colors { display: flex; gap: 6px; }
.hb-color {
  width: 28px; height: 28px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: transform var(--t) var(--ease);
}
.hb-color:hover { transform: translateY(-2px); }
.hb-color[aria-pressed='true'] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hb-primary); }

/* --- Hero (.ev-hero) --- */
.hb-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px; align-items: start;
  min-height: 296px; padding: 28px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--sh-sm);
  background:
    radial-gradient(700px 300px at 80% 10%, var(--hb-tint), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f8fbfb 100%);
}
.hb-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.42));
}
.hb-hero__left { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.hb-hero__right { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 168px; }
.hb-hero__logo {
  width: 58px; height: 58px; margin-bottom: 14px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--hb-primary); color: #fff;
  font-size: 19px; font-weight: 900; letter-spacing: -.02em;
  box-shadow: 0 12px 24px var(--hb-glow);
}
.hb-hero__badge {
  display: inline-flex; width: fit-content; padding: 6px 12px; margin-bottom: 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  color: var(--hb-primary);
  font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
}
.hb-hero__title {
  font-family: var(--font); font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.02; letter-spacing: -.045em; font-weight: 900;
  max-width: 14ch; margin: 0; color: var(--ink);
}
.hb-hero__desc { color: var(--muted); font-size: .92rem; font-weight: 600; line-height: 1.55; max-width: 52ch; margin: 12px 0 0; }
.hb-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hb-btn {
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 900; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.hb-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.hb-btn--primary {
  background: var(--hb-primary); color: #fff; border-color: var(--hb-primary);
  box-shadow: 0 14px 28px var(--hb-glow);
}
.hb-copy { display: flex; align-items: center; margin-top: 12px; max-width: 380px; }
.hb-copy input {
  flex: 1; min-width: 0; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--hb-primary); border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: rgba(255,255,255,.92);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-overflow: ellipsis;
}
.hb-copy input:focus { outline: none; }
.hb-copy button {
  min-height: 40px; padding: 0 18px; flex: none;
  border: 1px solid var(--hb-primary); border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--hb-primary); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.hb-meta-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; max-width: 220px; min-height: 46px; padding: 10px 16px;
  border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255,255,255,.88); color: var(--ink);
  font-size: .88rem; font-weight: 900; text-align: center;
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.hb-meta-pill--primary { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }

/* --- Stat strip (.ev-stats) --- */
.hb-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.hb-stat {
  min-height: 104px; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.hb-stat__label { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.hb-stat__value { font-family: var(--font); font-size: 1.6rem; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: var(--ink); }
.hb-stat__value--sm { font-size: 1.2rem; }
.hb-stat__sub { margin-top: 7px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.hb-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-pill);
  background: rgba(72,187,120,.12); color: #276749;
  font-size: .78rem; font-weight: 800;
}

/* --- Widgets (.ev-widget) --- */
.hb-widget {
  position: relative; overflow: hidden;
  padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 24px; background: var(--card);
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.hb-widget:last-child { margin-bottom: 0; }
.hb-widget__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.hb-widget__title {
  font-family: var(--font); font-size: 1.4rem; line-height: 1.1;
  font-weight: 900; letter-spacing: -.04em; color: var(--ink);
}
.hb-count {
  /* A flex container drops the whitespace between "6" and "speakers". */
  display: inline-flex; align-items: center; gap: .35ch;
  min-height: 30px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--hb-tint); color: var(--hb-primary);
  font-size: .86rem; font-weight: 900;
}

/* Schedule */
.hb-sched-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: 20px; background: #f8f8f9; border: 1px solid rgba(15,23,42,.04);
}
.hb-sched-date { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hb-sched-btns { display: flex; gap: 9px; }
.hb-sched-btn {
  width: 42px; height: 42px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hb-sched-btn:hover { border-color: var(--hb-primary); box-shadow: var(--sh-sm); }

.hb-timeline { position: relative; display: grid; gap: 12px; padding-left: 34px; }
.hb-timeline::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px;
  background: linear-gradient(180deg, var(--hb-primary), rgba(15,187,179,.10));
}
.hb-item {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 20px;
  background: #f9fafb; border: 1px solid transparent;
  font-family: inherit; cursor: pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hb-item::before {
  content: ''; position: absolute; left: -34px; top: 19px;
  width: 13px; height: 13px; border-radius: var(--r-pill);
  background: var(--hb-primary); box-shadow: 0 0 0 5px var(--hb-tint);
}
.hb-item:hover, .hb-item[aria-expanded='true'] {
  background: #fff; border-color: rgba(15,187,179,.28);
  box-shadow: 0 18px 36px rgba(15,23,42,.07); transform: translateY(-1px);
}
.hb-item__time { display: block; margin-bottom: 5px; color: var(--hb-primary); font-size: .92rem; font-weight: 800; }
.hb-item__title { display: block; color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.25; }
.hb-item__loc { display: block; margin-top: 5px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.hb-item__more {
  display: block; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid rgba(15,23,42,.06);
  color: var(--muted); font-size: .86rem; font-weight: 600; line-height: 1.55;
}
.hb-item[aria-expanded='false'] .hb-item__more { display: none; }

/* Guestlist */
.hb-guest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hb-avatars { display: flex; }
.hb-avatar {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  margin-left: -12px; border: 3px solid #fff;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--hb-primary), #0b7c93);
  color: #fff; font-size: .8rem; font-weight: 900;
  transition: transform var(--t) var(--ease);
}
.hb-avatar:first-child { margin-left: 0; }
.hb-guest:hover .hb-avatar { transform: translateY(-3px); }
.hb-avatar--more { background: #eef2f6; color: var(--muted); }
.hb-guest__text { flex: 1; min-width: 160px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.hb-guest__cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--hb-primary); background: var(--hb-tint); color: var(--hb-primary);
  font-family: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.hb-guest__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hb-guest__cta:hover { background: var(--hb-primary); color: #fff; }

/* Speakers */
.hb-speakers { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.hb-speaker {
  width: 168px; flex: 0 0 168px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hb-speaker:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.hb-speaker__img {
  position: relative; width: 100%; aspect-ratio: 1 / 1.08;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--hb-tint), #eef2f6);
  color: var(--hb-primary); font-size: 2rem; font-weight: 900; letter-spacing: -.03em;
}
.hb-speaker__tag {
  position: absolute; top: 9px; right: 9px;
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--hb-primary); color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.hb-speaker__info { padding: 11px 12px 14px; }
.hb-speaker__name { font-size: .88rem; font-weight: 900; line-height: 1.15; color: var(--ink); }
.hb-speaker__role { margin-top: 4px; color: var(--hb-primary); font-size: .74rem; font-weight: 900; line-height: 1.25; }
.hb-speaker__bio { margin-top: 7px; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* Info */
.hb-info { display: grid; gap: 12px; }
.hb-info-card { padding: 15px 18px; border-radius: 16px; background: #f9fafb; border: 1px solid rgba(15,23,42,.04); }
.hb-info-card h4 { font-family: var(--font); font-size: .95rem; font-weight: 900; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.hb-info-card p { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.hb-info-card b { color: var(--ink); font-weight: 800; }

@media (max-width: 760px) {
  .hb { padding: 14px; }
  .hb-hero { grid-template-columns: 1fr; padding: 22px; min-height: 0; }
  .hb-hero__right { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; }
  .hb-stats { grid-template-columns: 1fr; }
  .hb-widget { padding: 18px 16px; }
  .hb-speaker { width: auto; flex: 1 1 140px; }
}

/* ══ SMART PROFILE ════════════════════════════════════════════════════════
   profile.php — the page a badge resolves to. Stacked cards on the dashboard
   wash: identity, about, links, then the attendee's own events.
   ═══════════════════════════════════════════════════════════════════════ */
.pf {
  padding: 22px; background: var(--bg);
  max-height: var(--demo-h); overflow-y: auto;
}
.pf-card {
  padding: 22px 24px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card);
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.pf-card:last-child { margin-bottom: 0; }
.pf-card__title { font-family: var(--font); font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }

/* The strip that says where this page came from — a badge tap. */
.pf-origin {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 16px;
  border: 1px solid var(--line-teal); border-radius: var(--r-pill);
  background: var(--tint-teal); color: var(--teal-deep);
  font-size: .84rem; font-weight: 700;
}
.pf-origin svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Identity */
.pf-id { max-width: 460px; margin: 0 auto; text-align: center; padding: 8px 0 4px; }
.pf-avatar {
  width: 104px; height: 104px; margin: 0 auto 16px;
  border-radius: var(--r-pill); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal), #0b7c93);
  color: #fff; font-size: 34px; font-weight: 900; letter-spacing: -.02em;
  box-shadow: 0 14px 28px rgba(15,187,179,.28);
}
.pf-name { font-family: var(--font); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.pf-sub { margin-top: 6px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.pf-stats { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
.pf-stat b { display: block; font-family: var(--font); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-stat span { display: block; margin-top: 2px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.pf-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.pf-btn {
  min-width: 168px; min-height: 44px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--brand-grad); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
  box-shadow: var(--sh-teal);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.pf-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-hover); }
.pf-btn[data-on='true'] {
  background: var(--tint-teal); color: var(--teal-deep);
  border-color: var(--line-teal); box-shadow: none;
}
.pf-btn--ghost { min-width: 0; background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }

.pf-bio { margin-top: 10px; color: var(--ink-80); font-size: .92rem; line-height: 1.65; }

/* Links */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, 96px); justify-content: center; gap: 16px; margin-top: 16px; }
.pf-tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; cursor: pointer; background: none; border: 0; font-family: inherit; }
.pf-tile__icon {
  width: 72px; height: 72px; border-radius: 18px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(2,6,23,.06);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pf-tile__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-tile:hover .pf-tile__icon { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2,6,23,.12); }
.pf-tile__label { margin-top: 8px; font-size: .82rem; font-weight: 600; color: #334155; text-align: center; }

/* Events */
.pf-events-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: #eef2f6; }
.pf-seg button {
  min-height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.pf-seg button[aria-selected='true'] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }

.pf-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 18px; }
.pf-event {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pf-event:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.pf-event__hero { position: relative; height: 92px; background: linear-gradient(135deg, var(--pf-hue, #0fbbb3), #0b7c93); }
.pf-event__hero span {
  position: absolute; left: 13px; bottom: 9px;
  font-family: var(--font); font-size: 1.1rem; font-weight: 900; letter-spacing: -.03em; color: rgba(255,255,255,.92);
}
.pf-event__body { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pf-event__title { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.pf-event__meta { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: .76rem; }
.pf-event__meta b { color: var(--ink-80); font-weight: 700; }
.pf-event__cta {
  margin-top: auto; min-height: 38px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand-grad); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pf-empty { margin-top: 16px; color: var(--muted); font-size: .9rem; }

@media (max-width: 620px) {
  .pf { padding: 14px; }
  .pf-card { padding: 18px 16px; }
  .pf-stats { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-frame__live i { animation: none; }
  .bs-badge, .hb-item, .pf-event, .hb-speaker { transition: none; }
}