/* ==========================================================================
   BMS Live — Design System
   Hand-built (no framework, no node). Mobile-first, native-app feel.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: var(--brand-300); color: var(--brand-900); }

/* ---- Typography -------------------------------------------------------- */
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--color-ink); font-weight: var(--fw-bold); letter-spacing: -.01em; }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extra); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
p  { color: var(--text-soft); }
small { font-size: var(--fs-sm); }
.display { font-family: var(--font-display); font-weight: var(--fw-extra); line-height: var(--lh-tight); letter-spacing: -.02em; }
.text-muted { color: var(--text-muted); }
.text-soft  { color: var(--text-soft); }
.text-brand { color: var(--color-primary); }
.text-danger{ color: var(--danger); }
.text-center{ text-align: center; }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }

/* ---- Layout helpers ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px){ .container { padding-inline: var(--sp-6); } }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-8); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.hide { display: none !important; }
.grid { display: grid; gap: var(--sp-4); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}
.w-full{width:100%} .full-h{min-height:100dvh}

/* ---- Icons ------------------------------------------------------------- */
.icon, [class^="ri-"], [class*=" ri-"] { line-height: 1; vertical-align: middle; }
.icon-lg { font-size: 1.4em; } .icon-xl { font-size: 1.8em; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  line-height: 1; padding: .72rem 1.15rem; border-radius: var(--r-md);
  border: 1px solid transparent; transition: all var(--t) var(--ease); white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn [class^="ri-"]{ font-size: 1.15em; }
.btn-primary { background: var(--color-primary); color: var(--text-on-brand); box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--sh-lg); }
.btn-dark { background: var(--brand-900); color: var(--text-invert); }
.btn-dark:hover { background: var(--brand-800); }
.btn-accent { background: var(--brand-300); color: var(--brand-900); }
.btn-accent:hover { background: var(--brand-400); }
.btn-ghost { background: transparent; color: var(--text-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-soft { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.btn-soft:hover { background: var(--brand-200); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn-sm { padding: .5rem .8rem; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg { padding: .95rem 1.6rem; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: .6rem; width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); }
.btn-icon.btn-sm { width: 2.1rem; height: 2.1rem; padding: .4rem; }
.btn:disabled, .btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after { content:""; position:absolute; width:1.1em; height:1.1em; border:2px solid currentColor; border-top-color: transparent; border-radius:50%; animation: spin .6s linear infinite; color: var(--text-on-brand); }

/* ---- Chips / badges ---------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: .28em .7em; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-soft); }
.badge-brand { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-dot::before { content:""; width:.5em; height:.5em; border-radius:50%; background: currentColor; }
.chip { display:inline-flex; align-items:center; gap:.4em; padding:.5em .9em; border-radius: var(--r-pill); background: var(--surface); border:1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: all var(--t) var(--ease); cursor:pointer; }
.chip:hover { border-color: var(--border-strong); }
.chip.is-active { background: var(--brand-900); color: var(--text-invert); border-color: var(--brand-900); }

/* ---- Cards ------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
.card-pad { padding: var(--sp-5); }
.card-hover { transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.card-head h3, .card-head h4 { font-size: var(--fs-md); }
.card-body { padding: var(--sp-5); }
.card-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---- Surface utilities ------------------------------------------------- */
.surface { background: var(--surface); border-radius: var(--r-lg); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-4) 0; }
.muted-box { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4); }

/* ========================================================================
   FORMS  (partials/forms/*)
   ======================================================================== */
.field { display: block; }
.field + .field { margin-top: var(--sp-4); }
.label { display: flex; align-items: center; gap: .35em; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: var(--sp-2); }
.label .req { color: var(--danger); }
.label .opt { color: var(--text-muted); font-weight: var(--fw-normal); font-size: var(--fs-xs); }
.control {
  width: 100%; background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); padding: .7rem .9rem; font-size: var(--fs-base);
  color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); appearance: none;
}
.control::placeholder { color: var(--text-muted); }
.control:hover { border-color: var(--border-strong); }
.control:focus { border-color: var(--color-primary); box-shadow: var(--ring); }
.control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
textarea.control { min-height: 7rem; resize: vertical; line-height: var(--lh-base); }
select.control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2342847 5'%3E%3C/svg%3E"); /* arrow drawn via .select-wrap */ }
.input-group { position: relative; display:flex; align-items:center; }
.input-group .control { padding-left: 2.6rem; }
.input-group .input-icon { position:absolute; left: .9rem; color: var(--text-muted); pointer-events:none; font-size: 1.15em; }
.input-group.has-suffix .control { padding-right: 2.8rem; }
.input-group .input-suffix { position:absolute; right:.6rem; color: var(--text-muted); }
.select-wrap { position: relative; }
.select-wrap::after { content:"\ea4e"; font-family:"remixicon"; position:absolute; right:.9rem; top:50%; transform:translateY(-50%); pointer-events:none; color: var(--text-muted); }
.field-error { display:block; color: var(--danger); font-size: var(--fs-xs); margin-top: var(--sp-2); font-weight: var(--fw-medium); }
.field-hint { display:block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* toggle / switch */
.switch { position: relative; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; }
.switch input { position:absolute; opacity:0; }
.switch .track { width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--border-strong); transition: background var(--t) var(--ease); flex: none; }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease-spring); }
.switch input:checked + .track { background: var(--color-primary); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* checkbox & radio */
.check { display:inline-flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size: var(--fs-sm); }
.check input { appearance:none; width:1.25rem; height:1.25rem; border:1.5px solid var(--border-strong); border-radius:6px; flex:none; display:grid; place-content:center; transition: all var(--t-fast) var(--ease); margin-top:1px; }
.check input[type=radio]{ border-radius:50%; }
.check input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked::after { content:"\eb7b"; font-family:"remixicon"; color:#fff; font-size:.85rem; }
.check input[type=radio]:checked::after { content:""; width:.6rem; height:.6rem; border-radius:50%; background:#fff; }

/* file upload (single + multi) */
.uploader { border: 2px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-6); text-align:center; transition: all var(--t) var(--ease); cursor:pointer; }
.uploader:hover, .uploader.is-drag { border-color: var(--color-primary); background: var(--color-primary-soft); }
.uploader .up-icon { font-size: 2rem; color: var(--color-primary); }
.upload-previews { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.upload-thumb { position:relative; aspect-ratio:1; border-radius: var(--r-sm); overflow:hidden; background: var(--surface-sunk); }
.upload-thumb img { width:100%; height:100%; object-fit:cover; }
.upload-thumb .rm { position:absolute; top:4px; right:4px; width:1.5rem; height:1.5rem; border-radius:50%; background: rgba(0,0,0,.55); color:#fff; display:grid; place-content:center; font-size:.8rem; }

/* segmented control */
.segment { display:inline-flex; background: var(--surface-sunk); border-radius: var(--r-md); padding: 4px; gap: 2px; }
.segment button { padding: .45rem .9rem; border-radius: calc(var(--r-md) - 4px); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-soft); transition: all var(--t) var(--ease); }
.segment button.is-active { background: var(--surface); color: var(--color-ink); box-shadow: var(--sh-xs); }

/* ========================================================================
   DATA TABLE & GRID (partials/ui/datatable, grid)
   ======================================================================== */
.dt-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.dt-toolbar { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dt { width:100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.dt thead th { text-align:left; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); white-space:nowrap; background: var(--surface-2); }
table.dt thead th.sortable { cursor:pointer; user-select:none; }
table.dt thead th.sortable:hover { color: var(--text); }
table.dt tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
table.dt tbody tr { transition: background var(--t-fast) var(--ease); }
table.dt tbody tr:hover { background: var(--brand-50); }
table.dt tbody tr:last-child td { border-bottom: 0; }
.dt-actions { display:flex; gap: var(--sp-2); justify-content:flex-end; }
.dt-foot { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top:1px solid var(--border); flex-wrap:wrap; }

/* pagination */
.pager { display:flex; gap: var(--sp-1); align-items:center; }
.pager button, .pager a { min-width: 2.2rem; height: 2.2rem; display:grid; place-content:center; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-soft); transition: all var(--t-fast) var(--ease); }
.pager button:hover, .pager a:hover { background: var(--surface-2); }
.pager .is-active { background: var(--brand-900); color: var(--text-invert); }
.pager .is-disabled { opacity:.4; pointer-events:none; }

/* card grid item (mobile-friendly alternative to tables) */
.list-card { display:flex; gap: var(--sp-3); align-items:center; padding: var(--sp-4); border-bottom:1px solid var(--border); }
.list-card:last-child { border-bottom:0; }

/* ========================================================================
   BREADCRUMBS
   ======================================================================== */
.breadcrumbs { display:flex; align-items:center; gap:.4rem; font-size: var(--fs-sm); color: var(--text-muted); flex-wrap:wrap; }
.breadcrumbs a { color: var(--text-soft); transition: color var(--t-fast) var(--ease); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep { color: var(--border-strong); }
.breadcrumbs .current { color: var(--text); font-weight: var(--fw-semibold); }

/* ========================================================================
   AVATARS
   ======================================================================== */
.avatar { width:2.5rem; height:2.5rem; border-radius:50%; object-fit:cover; background: var(--brand-100); display:grid; place-content:center; color: var(--color-primary-hover); font-weight: var(--fw-bold); font-family: var(--font-display); flex:none; overflow:hidden; }
.avatar-sm { width:2rem; height:2rem; font-size: var(--fs-xs); }
.avatar-lg { width:4rem; height:4rem; font-size: var(--fs-lg); }

/* ========================================================================
   SKELETON LOADERS
   ======================================================================== */
.skel { position: relative; overflow: hidden; background: var(--surface-sunk); border-radius: var(--r-sm); }
.skel::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.4s infinite; }
.skel-line { height: .85rem; border-radius: var(--r-pill); }
.skel-line.sm { width: 55%; } .skel-line.lg { height:1.2rem; }
.skel-block { height: 9rem; border-radius: var(--r-md); }
.skel-circle { border-radius:50%; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ========================================================================
   ACTIVITY INDICATOR (blur overlay + center loader)
   ======================================================================== */
.app-loader { position: fixed; inset: 0; z-index: var(--z-loader); display:none; align-items:center; justify-content:center; }
.app-loader.is-active { display:flex; }
.app-loader .veil { position:absolute; inset:0; background: rgba(246,248,247,.5); backdrop-filter: blur(5px) saturate(.9); -webkit-backdrop-filter: blur(5px) saturate(.9); }
.app-loader .spinner { position:relative; width:54px; height:54px; }
.app-loader .spinner::before, .app-loader .spinner::after { content:""; position:absolute; inset:0; border-radius:50%; border:4px solid transparent; }
.app-loader .spinner::before { border-color: var(--brand-200); }
.app-loader .spinner::after { border-top-color: var(--color-primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* inline spinner */
.spin { display:inline-block; width:1.1em; height:1.1em; border:2px solid var(--brand-200); border-top-color: var(--color-primary); border-radius:50%; animation: spin .7s linear infinite; }

/* ========================================================================
   MODALS  (partials/ui/modal, confirm)
   ======================================================================== */
.modal-root { position: fixed; inset: 0; z-index: var(--z-modal); display:flex; align-items:center; justify-content:center; padding: var(--sp-4); }
.modal-backdrop { position:absolute; inset:0; background: rgba(17,32,25,.5); backdrop-filter: blur(3px); opacity:0; transition: opacity var(--t) var(--ease); }
.modal-root.is-open .modal-backdrop { opacity:1; }
.modal {
  position: relative; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  width: 100%; max-width: 480px; max-height: 90dvh; display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(16px) scale(.97); opacity:0; transition: all var(--t-slow) var(--ease-out);
}
.modal-root.is-open .modal { transform: none; opacity:1; }
.modal-lg { max-width: 760px; } .modal-xl { max-width: 1000px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-5); border-bottom:1px solid var(--border); }
.modal-head h3 { font-size: var(--fs-lg); }
.modal-close { width:2.2rem; height:2.2rem; border-radius: var(--r-md); color: var(--text-muted); display:grid; place-content:center; transition: all var(--t-fast) var(--ease); }
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: var(--sp-5); overflow-y:auto; }
.modal-foot { display:flex; gap: var(--sp-3); justify-content:flex-end; padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--border); background: var(--surface-2); }
/* confirm modal icon */
.confirm-icon { width:3.4rem; height:3.4rem; border-radius:50%; display:grid; place-content:center; font-size:1.6rem; margin-inline:auto; margin-bottom: var(--sp-3); }
.confirm-icon.danger { background: var(--danger-soft); color: var(--danger); }
.confirm-icon.warning { background: var(--warning-soft); color: var(--warning); }
.dep-report { background: var(--warning-soft); border:1px solid #f0dcae; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.dep-report li { display:flex; justify-content:space-between; padding:.25rem 0; }

/* ========================================================================
   BOTTOM SHEET (mobile: dates, multiselect, addons, tos)
   ======================================================================== */
.sheet-root { position: fixed; inset:0; z-index: var(--z-sheet); display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop { position:absolute; inset:0; background: rgba(17,32,25,.5); opacity:0; transition: opacity var(--t) var(--ease); }
.sheet-root.is-open .sheet-backdrop { opacity:1; }
.sheet {
  position:relative; width:100%; max-width: 560px; background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-xl); max-height: 88dvh;
  display:flex; flex-direction:column; transform: translateY(100%); transition: transform var(--t-slow) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-root.is-open .sheet { transform: none; }
.sheet-handle { width:42px; height:5px; border-radius: var(--r-pill); background: var(--border-strong); margin: var(--sp-3) auto var(--sp-2); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-3); border-bottom:1px solid var(--border); }
.sheet-head h3 { font-size: var(--fs-md); }
.sheet-body { padding: var(--sp-5); overflow-y:auto; }
.sheet-foot { padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--border); }
@media (min-width: 768px){
  /* On desktop, a sheet behaves like a centered modal */
  .sheet-root.as-modal { align-items:center; }
  .sheet-root.as-modal .sheet { border-radius: var(--r-xl); max-width: 480px; transform: translateY(16px) scale(.97); opacity:0; transition: all var(--t-slow) var(--ease-out); }
  .sheet-root.as-modal.is-open .sheet { transform:none; opacity:1; }
  .sheet-root.as-modal .sheet-handle { display:none; }
}

/* ========================================================================
   ADMIN SHELL: sidebar + topbar
   ======================================================================== */
.admin { min-height: 100dvh; background: var(--bg); }
.admin-side {
  position: fixed; inset-block: 0; left: 0; width: var(--sidebar-w); background: var(--side-bg);
  color: var(--side-text); display:flex; flex-direction:column; z-index: var(--z-drawer);
  transition: transform var(--t-slow) var(--ease-out);
}
.admin-side .brand { display:flex; align-items:center; gap:.7rem; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.admin-side .brand .logo { width:2.2rem; height:2.2rem; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand-300), var(--brand-500)); display:grid; place-content:center; color: var(--brand-900); font-weight: var(--fw-extra); font-family: var(--font-display); }
.admin-side .brand b { font-family: var(--font-display); font-size: var(--fs-md); color:#fff; letter-spacing:-.01em; }
.admin-nav { flex:1; overflow-y:auto; padding: var(--sp-2) var(--sp-3) var(--sp-6); }
.admin-nav .nav-group { font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--side-muted); padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.nav-link { display:flex; align-items:center; gap:.8rem; padding: .65rem .8rem; border-radius: var(--r-md); color: var(--side-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: all var(--t-fast) var(--ease); margin-bottom: 2px; }
.nav-link [class^="ri-"]{ font-size: 1.25em; color: var(--side-muted); transition: color var(--t-fast) var(--ease); }
.nav-link:hover { background: var(--side-bg-2); color:#fff; }
.nav-link:hover [class^="ri-"]{ color: var(--side-active); }
.nav-link.is-active { background: linear-gradient(90deg, rgba(137,215,183,.16), transparent); color:#fff; }
.nav-link.is-active [class^="ri-"]{ color: var(--side-active); }
.nav-link.is-active { box-shadow: inset 3px 0 0 var(--side-active); }
.admin-side .side-foot { padding: var(--sp-4); border-top:1px solid rgba(255,255,255,.08); }

.admin-main { margin-left: var(--sidebar-w); min-height: 100dvh; display:flex; flex-direction:column; }
.admin-top {
  position: sticky; top:0; z-index: var(--z-sticky); height: var(--topbar-h);
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); display:flex; align-items:center; gap: var(--sp-3);
  padding-inline: var(--sp-5);
}
.admin-content { padding: var(--sp-6) var(--sp-5); flex:1; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: var(--fs-2xl); }

.topbar-search { flex:1; max-width: 420px; }
.icon-btn { width:2.6rem; height:2.6rem; border-radius: var(--r-md); display:grid; place-content:center; color: var(--text-soft); transition: all var(--t-fast) var(--ease); position:relative; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot { position:absolute; top:.55rem; right:.6rem; width:.5rem; height:.5rem; border-radius:50%; background: var(--danger); border:2px solid var(--surface); }

/* dropdown menu item (on light surfaces) */
.menu-item { display:flex; align-items:center; gap:.7rem; width:100%; padding:.6rem .7rem; border-radius: var(--r-md); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--t-fast) var(--ease); text-align:left; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
[x-cloak] { display:none !important; }

/* drawer overlay (mobile) */
.drawer-overlay { position: fixed; inset:0; background: rgba(17,32,25,.5); z-index: calc(var(--z-drawer) - 1); opacity:0; visibility:hidden; transition: opacity var(--t) var(--ease); }
.drawer-overlay.is-open { opacity:1; visibility:visible; }

/* ========================================================================
   FRONTEND HEADER + BOTTOM NAV
   ======================================================================== */
.app-header { position: sticky; top:0; z-index: var(--z-sticky); height: var(--header-h); background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--border); }
.app-header .container { height:100%; display:flex; align-items:center; gap: var(--sp-4); }
.app-brand { display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-md); color: var(--color-ink); }
.app-brand .logo { width:2.1rem; height:2.1rem; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand-500), var(--brand-900)); display:grid; place-content:center; color: var(--brand-300); }
.app-mainnav { display:flex; gap:.3rem; margin-left: var(--sp-4); }
.app-mainnav a { padding:.5rem .9rem; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-soft); transition: all var(--t-fast) var(--ease); }
.app-mainnav a:hover { background: var(--surface-2); color: var(--text); }
.app-mainnav a.is-active { color: var(--color-primary); }

.bottom-nav { position: fixed; bottom:0; left:0; right:0; z-index: var(--z-sticky); height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top:1px solid var(--border); display:none; }
.bottom-nav .bn-inner { display:flex; height: var(--bottomnav-h); }
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color: var(--text-muted); font-size: .68rem; font-weight: var(--fw-medium); transition: color var(--t-fast) var(--ease); }
.bottom-nav a [class^="ri-"]{ font-size:1.4rem; }
.bottom-nav a.is-active { color: var(--color-primary); }
.bottom-nav a.fab { color:#fff; }
.bottom-nav a.fab .fab-ic { width:3rem; height:3rem; margin-top:-1.4rem; border-radius:50%; background: var(--color-primary); display:grid; place-content:center; box-shadow: var(--sh-brand); font-size:1.5rem; }

/* ========================================================================
   HORIZONTAL SWIPER (mobile: no vertical stacks)
   ======================================================================== */
.swiper-x { display:flex; gap: var(--sp-4); overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-2); scrollbar-width:none; }
.swiper-x::-webkit-scrollbar { display:none; }
.swiper-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ========================================================================
   AUTH PAGES
   ======================================================================== */
.auth-wrap { min-height:100dvh; display:grid; grid-template-columns: 1fr; }
.auth-aside { display:none; position:relative; background: linear-gradient(150deg, var(--brand-900), var(--brand-700) 60%, var(--brand-500)); color:#fff; padding: var(--sp-12); overflow:hidden; }
.auth-aside .glow { position:absolute; width:380px; height:380px; border-radius:50%; background: radial-gradient(circle, rgba(137,215,183,.45), transparent 70%); filter: blur(10px); }
.auth-aside .g1 { top:-80px; right:-60px; } .auth-aside .g2 { bottom:-120px; left:-80px; }
.auth-card-wrap { display:flex; align-items:center; justify-content:center; padding: var(--sp-6); }
.auth-card { width:100%; max-width: 420px; }
@media (min-width: 980px){ .auth-wrap { grid-template-columns: 1.05fr .95fr; } .auth-aside { display:flex; flex-direction:column; justify-content:space-between; } }

/* ========================================================================
   EMPTY STATE
   ======================================================================== */
.empty { text-align:center; padding: var(--sp-12) var(--sp-4); }
.empty .em-icon { width:4.5rem; height:4.5rem; border-radius:50%; background: var(--brand-50); color: var(--color-primary); display:grid; place-content:center; font-size:2rem; margin: 0 auto var(--sp-4); }
.empty h4 { margin-bottom: var(--sp-2); }

/* ========================================================================
   STAT CARDS (dashboard)
   ======================================================================== */
.stat { display:flex; align-items:center; gap: var(--sp-4); }
.stat .st-icon { width:3rem; height:3rem; border-radius: var(--r-md); display:grid; place-content:center; font-size:1.4rem; flex:none; }
.stat .st-icon.brand { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.stat .st-icon.mint { background: var(--brand-100); color: var(--brand-600); }
.stat .st-icon.cream { background: var(--cream); color: var(--warning); }
.stat .st-icon.danger { background: var(--danger-soft); color: var(--danger); }
.stat .st-val { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extra); color: var(--color-ink); line-height:1; }
.stat .st-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }

/* trend pill */
.trend { font-size: var(--fs-xs); font-weight: var(--fw-semibold); display:inline-flex; align-items:center; gap:.2em; }
.trend.up { color: var(--success); } .trend.down { color: var(--danger); }

/* ========================================================================
   TABS
   ======================================================================== */
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{display:none}
.tabs button { padding:.7rem 1rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); border-bottom:2px solid transparent; white-space:nowrap; transition: all var(--t-fast) var(--ease); }
.tabs button.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ========================================================================
   TOASTR overrides → match design system
   ======================================================================== */
#toast-container > div { border-radius: var(--r-md) !important; box-shadow: var(--sh-lg) !important; opacity:1 !important; font-family: var(--font-sans); padding: 1rem 1rem 1rem 3rem; background-size: 1.4rem; }
#toast-container > .toast-success { background-color: var(--success) !important; }
#toast-container > .toast-error   { background-color: var(--danger) !important; }
#toast-container > .toast-warning { background-color: var(--warning) !important; }
#toast-container > .toast-info    { background-color: var(--brand-600) !important; }
.toast-title { font-family: var(--font-display); font-weight: var(--fw-bold); }

/* ========================================================================
   RESPONSIVE — native-app behavior on mobile
   ======================================================================== */
@media (max-width: 1023px){
  .admin-side { transform: translateX(-100%); box-shadow: var(--sh-xl); }
  .admin-side.is-open { transform: none; }
  .admin-main { margin-left: 0; }
  .admin-content { padding: var(--sp-5) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-6)); }
  .bottom-nav { display:block; }
  .desktop-only { display:none !important; }
}
@media (min-width: 1024px){
  .mobile-only { display:none !important; }
  .menu-toggle { display:none; }
}
@media (max-width: 767px){
  h1 { font-size: var(--fs-2xl); }
  .page-head { margin-bottom: var(--sp-5); }
  .modal { max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; align-self:flex-end; }
  .modal-root { align-items: flex-end; padding: 0; }
  .app-mainnav { display:none; }
  body.has-bottom-nav { padding-bottom: var(--bottomnav-h); }
}

/* ========================================================================
   RBAC (Epic 2) — permission matrix, datatable identity cells, role/staff chrome
   ======================================================================== */
.text-xs { font-size: var(--fs-xs); }
.small   { font-size: var(--fs-xs); color: var(--text-muted); }

/* identity cell shared by roles/staff tables */
.id-cell { display:flex; align-items:center; gap:.65rem; min-width:0; }
.id-cell .id-main { min-width:0; }
.id-cell b { display:block; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.id-cell .small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.id-icon { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:var(--r-md);
           background:var(--brand-50); color:var(--brand-600); font-size:1.1rem; }
.avatar-img { width:38px; height:38px; flex:none; border-radius:var(--r-circle); object-fit:cover; background:var(--surface-2); }

/* row action buttons */
.row-actions { display:flex; gap:.25rem; justify-content:flex-end; }
.row-actions .icon-btn { width:34px; height:34px; }
.row-actions .icon-btn.danger:hover { background:var(--danger-soft); color:var(--danger); }
.row-actions .icon-btn.warn:hover { background:var(--warning-soft); color:var(--warning); }

/* permission matrix */
.perm-toolbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:var(--sp-3) 0; }
.perm-master { display:inline-flex; align-items:center; gap:.5rem; font-weight:var(--fw-semibold); cursor:pointer; }
.perm-group { border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:var(--sp-3); overflow:hidden; background:var(--surface); }
.perm-group-head { display:flex; align-items:center; gap:.6rem; padding:var(--sp-3) var(--sp-4);
                   cursor:pointer; font-weight:var(--fw-semibold); background:var(--surface-2); user-select:none; }
.perm-group-head input { width:18px; height:18px; accent-color:var(--brand-600); flex:none; }
.perm-group-head .perm-count { margin-left:auto; font-size:var(--fs-xs); color:var(--text-muted); font-weight:var(--fw-normal); }
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.15rem .5rem; padding:var(--sp-3) var(--sp-4); }
.perm-item { display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); padding:.5rem .55rem; border-radius:var(--r-sm); cursor:pointer; }
.perm-item:hover { background:var(--surface-2); }
.perm-item input { width:17px; height:17px; accent-color:var(--brand-600); flex:none; }

/* read-only catalog */
.cat-group { border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:var(--sp-3); overflow:hidden; }
.cat-head { display:flex; align-items:center; gap:.5rem; padding:var(--sp-3) var(--sp-4); background:var(--surface-2); font-weight:var(--fw-semibold); }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.5rem; padding:var(--sp-4); }
.cat-perm { display:flex; flex-direction:column; gap:.1rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--r-md); }
.cat-perm code { font-size:var(--fs-xs); color:var(--brand-600); }

/* two-column form scaffold for create/edit pages */
.form-split { display:grid; grid-template-columns:340px 1fr; gap:var(--sp-6); align-items:start; }
.form-aside { position:sticky; top:calc(var(--topbar-h) + var(--sp-4)); }
@media (max-width: 900px){ .form-split { grid-template-columns:1fr; } .form-aside { position:static; } }

/* generated-password readout */
.pass-readout { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-top:var(--sp-3);
                font-family:var(--font-display); font-size:var(--fs-lg); font-weight:var(--fw-bold);
                background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:.7rem 1rem; letter-spacing:.04em; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* print (tickets) */
@media print { .no-print { display:none !important; } body { background:#fff; } }

/* ========================================================================
   EPIC 3 — Platform Settings & Master Data
   (Show-type chips, icon/colour pickers, venue thumbs, artist gallery)
   ======================================================================== */

/* ---- Settings tabs ----------------------------------------------------- */
.settings-pane { animation: fadeUp var(--t) var(--ease-out); }
@keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* ---- Show-type chip (icon tinted by its colour) ------------------------ */
.type-chip { display:inline-grid; place-content:center; width:2rem; height:2rem; flex:0 0 auto;
  border-radius: var(--r-sm); font-size:1.05rem;
  color: var(--chip, var(--brand-500));
  background: color-mix(in srgb, var(--chip, var(--brand-500)) 14%, transparent); }
.type-chip.lg { width:3rem; height:3rem; font-size:1.5rem; border-radius: var(--r-md); }
.st-preview { display:flex; align-items:center; gap:.75rem; font-weight: var(--fw-semibold); }
.st-preview b { font-size: var(--fs-md); }

/* ---- Slug / code pill -------------------------------------------------- */
.code-pill { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-xs);
  background: var(--surface-2); color: var(--text-soft); padding:.2em .55em; border-radius: var(--r-xs); }

/* ---- Icon picker ------------------------------------------------------- */
.icon-picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.icon-swatch { width:2.4rem; height:2.4rem; display:grid; place-content:center; font-size:1.15rem;
  border:1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  color: var(--text-soft); cursor:pointer; transition: all var(--t-fast) var(--ease); }
.icon-swatch:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.icon-swatch.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }

/* ---- Colour input ------------------------------------------------------ */
.color-input { width:2.6rem; height:2.6rem; padding:0; border:1px solid var(--border);
  border-radius: var(--r-sm); background:none; cursor:pointer; flex:0 0 auto; }
.color-input::-webkit-color-swatch-wrapper { padding:3px; }
.color-input::-webkit-color-swatch { border:none; border-radius:5px; }
.swatch-dot { width:.95rem; height:.95rem; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* ---- Datatable thumbnails (venues) ------------------------------------- */
.thumb-img { width:2.6rem; height:2.6rem; border-radius: var(--r-sm); object-fit:cover; flex:0 0 auto;
  box-shadow: inset 0 0 0 1px var(--border); }
.thumb-fallback { width:2.6rem; height:2.6rem; border-radius: var(--r-sm); display:grid; place-content:center;
  flex:0 0 auto; background: var(--surface-2); color: var(--text-muted); font-size:1.1rem; }

/* ---- Artist gallery editor -------------------------------------------- */
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:.6rem; }
.gallery-item { position:relative; aspect-ratio:1; border-radius: var(--r-md); overflow:hidden;
  box-shadow: inset 0 0 0 1px var(--border); transition: opacity var(--t) var(--ease); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .rm { position:absolute; top:.3rem; right:.3rem; width:1.7rem; height:1.7rem; border:0;
  border-radius:50%; display:grid; place-content:center; cursor:pointer; color:#fff;
  background: rgba(26,49,44,.62); backdrop-filter: blur(2px); transition: background var(--t-fast) var(--ease); }
.gallery-item .rm:hover { background: var(--danger); }
.gallery-item.is-removed { opacity:.42; }
.gallery-item.is-removed img { filter: grayscale(1); }
.gallery-item.is-removed .rm { background: var(--success); }

/* ==========================================================================
   Epic 4 — Venues & Seat Maps (builder)
   ========================================================================== */

/* ---- Compact button ---------------------------------------------------- */
.btn-xs { padding:.28rem .55rem; font-size: var(--fs-xs); border-radius: var(--r-sm); gap:.25rem; }

/* ---- Live summary strip ------------------------------------------------ */
.smap-stats { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.7rem; }
.smap-stat { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md);
  padding:.7rem .85rem; display:flex; align-items:center; gap:.6rem; }
.smap-stat .ic { width:2.1rem; height:2.1rem; border-radius: var(--r-sm); display:grid; place-content:center;
  flex:0 0 auto; background: var(--brand-50); color: var(--brand-600); font-size:1.05rem; }
.smap-stat .v { font-weight:700; font-size: var(--fs-lg); line-height:1; }
.smap-stat .l { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Two-pane layout --------------------------------------------------- */
.smap-layout { display:grid; grid-template-columns: 310px 1fr; gap:1rem; align-items:start; margin-top:1rem; }
.smap-rail { display:flex; flex-direction:column; gap:1rem; position:sticky; top:1rem; }
.smap-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; }
.smap-card > .hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--border); }
.smap-card > .hd h4 { margin:0; font-size: var(--fs-sm); font-weight:700; }
.smap-card > .bd { padding:.7rem .9rem; }

/* ---- Category list ----------------------------------------------------- */
.cat-list, .sec-list { display:flex; flex-direction:column; gap:.4rem; }
.cat-item, .sec-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem;
  border:1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cat-item .sw { width:1.1rem; height:1.1rem; border-radius:5px; flex:0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.cat-item .meta, .sec-item .meta { min-width:0; flex:1 1 auto; }
.cat-item .meta b, .sec-item .meta b { display:block; font-size: var(--fs-sm); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cat-item .meta span, .sec-item .meta span { font-size: var(--fs-xs); color: var(--text-muted); }
.cat-item .acts, .sec-item .acts { display:flex; gap:.15rem; flex:0 0 auto; }
.sec-item { cursor:pointer; }
.sec-item.is-active { border-color: var(--brand-400); background: var(--brand-50); }
.sec-item .ki { font-size: var(--fs-xs); padding:.05rem .4rem; border-radius:999px; background: var(--surface-2);
  color: var(--text-muted); flex:0 0 auto; }

/* ---- Canvas ------------------------------------------------------------ */
.smap-canvas { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  padding:1rem; min-height:380px; }
.smap-canvas-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  flex-wrap:wrap; margin-bottom:.8rem; }
.smap-canvas-head h3 { margin:0; font-size: var(--fs-md); }
.smap-toolbar { display:flex; gap:.4rem; flex-wrap:wrap; }

.smap-stage { text-align:center; font-size: var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  color: var(--text-muted); background: linear-gradient(var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:999px; padding:.35rem; margin:.4rem auto 1rem;
  max-width:min(100%, 560px); box-shadow: 0 8px 14px -12px rgba(26,49,44,.5); }

.smap-grid-wrap { overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
.smap-grid { display:inline-flex; flex-direction:column; gap:.3rem; min-width:100%; }
.smap-row { display:flex; align-items:center; gap:.3rem; }
.smap-rowlabel { width:1.6rem; flex:0 0 auto; text-align:center; font-size: var(--fs-xs); font-weight:700;
  color: var(--text-muted); cursor:pointer; user-select:none; }
.smap-rowlabel:hover { color: var(--brand-600); }

.seat { width:1.85rem; height:1.85rem; flex:0 0 auto; border:1px solid var(--border); border-radius:6px;
  background: var(--surface-2); display:grid; place-content:center; font-size:.62rem; font-weight:600;
  color: var(--text-muted); cursor:pointer; position:relative; padding:0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.seat:hover { transform: translateY(-1px); }
.seat.is-seat { color:#10231d; border-color: rgba(0,0,0,.12); }
.seat.is-aisle { background: transparent; border-style:dashed; color: var(--text-muted); cursor:pointer; }
.seat.is-space { background: transparent; border-color: transparent; box-shadow:none; cursor:pointer; opacity:.5; }
.seat.is-space:hover { opacity:1; border-color: var(--border); }
.seat.is-blocked { background: repeating-linear-gradient(45deg, var(--surface-sunk), var(--surface-sunk) 3px, #e3c9c7 3px, #e3c9c7 6px) !important;
  color: var(--danger); border-color: var(--danger-soft); }
.seat.is-selected { box-shadow: 0 0 0 2px var(--brand-500), 0 4px 8px -3px rgba(26,49,44,.5); border-color: var(--brand-500); }
.seat .lock { position:absolute; inset:0; display:grid; place-content:center; font-size:.7rem; }

/* ---- Legend ------------------------------------------------------------ */
.smap-legend { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1rem; padding-top:.8rem;
  border-top:1px solid var(--border); font-size: var(--fs-xs); color: var(--text-soft); }
.legend-item { display:inline-flex; align-items:center; gap:.4rem; }
.legend-item .sw { width:.9rem; height:.9rem; border-radius:4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }

/* ---- Selection action bar --------------------------------------------- */
.smap-actionbar { position:sticky; bottom:0; margin-top:1rem; display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; background: var(--brand-900); color:#fff; border-radius: var(--r-lg);
  padding:.6rem .8rem; box-shadow: 0 14px 30px -12px rgba(26,49,44,.6); }
.smap-actionbar .cnt { font-weight:700; margin-right:.2rem; white-space:nowrap; }
.smap-actionbar .sep { width:1px; align-self:stretch; background: rgba(255,255,255,.18); }
.smap-actionbar .btn { --abc:rgba(255,255,255,.14); }

/* ---- GA editor --------------------------------------------------------- */
.ga-editor { max-width:340px; }
.ga-big { font-size: clamp(2rem, 5vw, 3rem); font-weight:800; color: var(--brand-700); line-height:1; }

/* ---- Category swatch picker (modal) ----------------------------------- */
.cat-color-row { display:flex; gap:.5rem; align-items:center; }

/* ---- Responsive (native-app at 390px) --------------------------------- */
@media (max-width: 900px) {
  .smap-layout { grid-template-columns: 1fr; }
  .smap-rail { position:static; flex-direction:column; }
}
@media (max-width: 560px) {
  .seat { width:1.65rem; height:1.65rem; }
  .smap-actionbar { position:fixed; left:.6rem; right:.6rem; bottom:.7rem; z-index:60; }
  .smap-canvas { padding:.7rem; }
}

/* ==========================================================================
   Epic 5 — Shows Management
   Shows datatable, artist picker, sessions scheduler, add-ons, publish bar.
   Built on design tokens; no hard-coded colours except user-chosen swatches.
   ========================================================================== */

/* --- Datatable: show thumbnail + inline type pill --- */
.show-thumb { width:3rem; height:2.1rem; border-radius: var(--r-sm); object-fit:cover; flex:0 0 auto;
  background: var(--surface-2); display:inline-grid; place-content:center; color: var(--text-muted); overflow:hidden; }
.show-thumb--empty { font-size:1.1rem; }
.type-pill { display:inline-flex; align-items:center; gap:.4em; padding:.3em .7em; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height:1;
  color: var(--chip, var(--brand-700));
  background: color-mix(in srgb, var(--chip, var(--brand-500)) 13%, transparent); }
.type-pill i { font-size:1.05em; }

/* --- Artist multi-select picker (chips + sheet) --- */
.chip-picker { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.picked-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .35rem .3rem .55rem;
  border-radius: var(--r-pill); background: var(--surface-2); border:1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.picked-chip.is-head { background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.picked-chip .star { display:grid; place-content:center; color: var(--warning); font-size:.95rem; }
.picked-chip .star i { line-height:1; }
.picked-chip .x { display:grid; place-content:center; width:1.2rem; height:1.2rem; border-radius:50%;
  color: var(--text-muted); }
.picked-chip .x:hover { background: var(--danger-soft, color-mix(in srgb, var(--danger) 14%, transparent)); color: var(--danger); }

.picker-list { display:flex; flex-direction:column; gap:.35rem; max-height:48vh; overflow-y:auto; }
.picker-item { display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.5rem .6rem; border-radius: var(--r-md); border:1px solid var(--border); background: var(--surface);
  transition: all var(--t-fast) var(--ease); }
.picker-item:hover { border-color: var(--border-strong); }
.picker-item.is-on { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.picker-item .meta { display:flex; flex-direction:column; line-height:1.2; }
.picker-item .meta b { font-size: var(--fs-sm); }
.picker-item .meta span { font-size: var(--fs-xs); color: var(--text-muted); }
.picker-item .check { margin-left:auto; font-size:1.25rem; color: var(--text-muted); }
.picker-item.is-on .check { color: var(--brand-600); }

/* --- Publish readiness checklist --- */
.readiness { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.readiness li { display:flex; align-items:flex-start; gap:.5rem; font-size: var(--fs-sm); color: var(--text); }
.readiness li i { color: var(--warning); margin-top:.1rem; }

/* --- Sessions scheduler --- */
.sess-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.sess-list { display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.sess-card { display:flex; gap:1rem; align-items:flex-start; padding:1rem; border:1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.sess-card.is-cancelled { opacity:.6; }
.sess-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.sess-when { display:flex; align-items:center; gap:.45rem; font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.sess-when i { color: var(--brand-600); }
.sess-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.sess-pricing { display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; }
.sess-stat { display:inline-flex; align-items:center; gap:.35rem; font-size: var(--fs-sm); color: var(--text-muted); }
.sess-stat b { color: var(--text); }
.price-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.price-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .55rem; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: var(--fs-xs); }
.price-chip .dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.sess-actions { display:flex; gap:.3rem; flex:0 0 auto; }

/* session editor — pricing rows */
.price-rows { display:flex; flex-direction:column; gap:.5rem; }
.price-row { display:flex; align-items:center; gap:.6rem; }
.price-row .dot { width:.85rem; height:.85rem; border-radius:50%; flex:0 0 auto; }
.price-row .pr-meta { display:flex; flex-direction:column; line-height:1.2; flex:1 1 auto; min-width:0; }
.price-row .pr-meta b { font-size: var(--fs-sm); }
.price-row .pr-meta span { font-size: var(--fs-xs); color: var(--text-muted); }
.price-row .pr-input { max-width:150px; flex:0 0 auto; }

.tier-rows { display:flex; flex-direction:column; gap:.5rem; }
.tier-row { display:flex; align-items:center; gap:.45rem; }

/* --- Add-ons --- */
.addon-list { display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.addon-card { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border:1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.addon-card.is-off { opacity:.6; }
.addon-ic { display:grid; place-content:center; width:2.6rem; height:2.6rem; flex:0 0 auto; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-700); font-size:1.3rem; }
.addon-meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.addon-meta b { font-size: var(--fs-md); }
.addon-price { font-weight: var(--fw-bold); font-size: var(--fs-md); white-space:nowrap; }

@media (max-width: 560px) {
  .sess-card { flex-direction:column; }
  .sess-actions { align-self:flex-end; }
  .price-row { flex-wrap:wrap; }
  .price-row .pr-input { max-width:none; width:100%; }
  .tier-row { flex-wrap:wrap; }
  .tier-row .input-group { max-width:none !important; }
  .addon-card { flex-wrap:wrap; }
}

/* ========================================================================
   EPIC 6 — Public Frontend (discovery & engagement, native-app feel)
   Signature: the "ticket-stub" show card — a perforated seam between poster
   and stub, the one motif unique to a live-events product. Everything else
   stays quiet: brand gradients, horizontal swipers, calm rails.
   ======================================================================== */

/* ---- page rhythm ------------------------------------------------------- */
.fe-section { padding-block: var(--sp-10); }
.fe-section.tight { padding-block: var(--sp-6); }
.fe-eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  display: inline-flex; align-items: center; gap: .4rem;
}
.fe-railhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.fe-railhead h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin-top: .15rem; }
.fe-seeall { white-space: nowrap; font-weight: var(--fw-semibold); color: var(--teal); display: inline-flex; align-items: center; gap: .25rem; }
.fe-seeall:hover { color: var(--brand-700); }

/* swiper padding so card shadows + focus rings aren't clipped; edge bleed on mobile */
.fe-rail { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 14px; margin: -6px -2px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fe-rail::-webkit-scrollbar { display: none; }
.fe-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---- the ticket-stub card --------------------------------------------- */
.ticket {
  display: flex; flex-direction: column; width: 268px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); border: 1px solid var(--border);
  overflow: hidden; transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
  position: relative;
}
.ticket:hover, .ticket:focus-visible { transform: translateY(-5px); box-shadow: var(--sh-lg); outline: none; }
.ticket:focus-visible { box-shadow: var(--sh-lg), var(--ring); }
.ticket.is-wide { width: 100%; }

.ticket-poster { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--brand-800); }
.ticket-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,32,25,0) 30%, rgba(17,32,25,.72) 100%); }
.ticket-flags { position: absolute; top: .6rem; left: .6rem; right: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; z-index: 2; }
.ticket-rating { position: absolute; bottom: .55rem; left: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ticket-rating i { color: var(--mint); }
.t-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: rgba(255,255,255,.92); color: var(--brand-900); backdrop-filter: blur(4px); }
.t-pill.hot { background: var(--warning); color: #3a2900; }
.t-pill.pre { background: var(--mint); color: var(--brand-900); }

/* the perforation seam */
.ticket-perf { position: relative; height: 0; }
.ticket-perf::before, .ticket-perf::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px;
  background: var(--bg); border-radius: 50%; transform: translateY(-50%);
}
.ticket-perf::before { left: -8px; }
.ticket-perf::after { right: -8px; }
.ticket-perf .perf-line { position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px dashed var(--border-strong); transform: translateY(-50%); }

.ticket-stub { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ticket-stub .t-type { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--chip, var(--teal)); display: inline-flex; align-items: center; gap: .3rem; }
.ticket-stub .t-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-meta { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--text-soft); }
.ticket-meta i { color: var(--text-muted); font-size: 1.05em; }
.ticket-foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.t-from { font-size: var(--fs-xs); color: var(--text-muted); }
.t-from b { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); font-weight: var(--fw-extra); }

/* ---- featured hero carousel ------------------------------------------- */
.hero { position: relative; margin-top: var(--sp-5); }
.hero-track { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--r-xl); scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  min-height: 440px; border-radius: var(--r-xl); overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--brand-900);
  display: flex; align-items: flex-end;
}
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,32,25,.15) 0%, rgba(17,32,25,.35) 45%, rgba(17,32,25,.92) 100%); }
.hero-inner { position: relative; z-index: 2; padding: clamp(1.5rem, 4vw, 3rem); max-width: 720px; color: #fff; }
.hero-inner .fe-eyebrow { color: var(--mint); }
.hero-inner h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); color: #fff; margin: .5rem 0; }
.hero-inner p { color: rgba(255,255,255,.85); font-size: var(--fs-md); max-width: 50ch; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: var(--sp-4) 0 var(--sp-5); color: rgba(255,255,255,.9); font-size: var(--fs-sm); }
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.5); }
.hero-dots { display: flex; gap: .4rem; justify-content: center; margin-top: var(--sp-4); }
.hero-dots button { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--border-strong); border: 0; cursor: pointer; transition: width var(--t), background var(--t); padding: 0; }
.hero-dots button.is-active { width: 26px; background: var(--teal); }

/* rail arrow buttons (desktop) */
.rail-wrap { position: relative; }
.rail-nav { display: none; }
@media (min-width: 1024px) {
  .rail-nav { display: grid; place-content: center; position: absolute; top: 38%; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-md); color: var(--text); cursor: pointer; z-index: 5; transition: background var(--t), transform var(--t); }
  .rail-nav:hover { background: var(--brand-50); transform: scale(1.06); }
  .rail-nav.prev { left: -14px; } .rail-nav.next { right: -14px; }
}

/* ---- category chips strip --------------------------------------------- */
.cat-strip { display: flex; gap: var(--sp-3); overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-tile { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 96px; padding: var(--sp-4) var(--sp-2); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-align: center; transition: transform var(--t), border-color var(--t); }
.cat-tile:hover { transform: translateY(-3px); border-color: var(--brand-300); }
.cat-tile .ic { width: 3rem; height: 3rem; border-radius: var(--r-md); display: grid; place-content: center; font-size: 1.5rem; color: var(--chip, var(--teal)); background: color-mix(in srgb, var(--chip, var(--teal)) 14%, transparent); }
.cat-tile b { font-size: var(--fs-sm); }

/* ---- artist card ------------------------------------------------------- */
.artist-card { width: 180px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: transform var(--t) var(--ease-out), box-shadow var(--t); }
.artist-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.artist-photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); display: grid; place-content: center; color: #fff; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extra); border: 3px solid var(--surface); box-shadow: var(--sh-sm); }
.artist-card .a-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.artist-card .a-genre { font-size: var(--fs-xs); color: var(--text-muted); }
.artist-card .a-stats { font-size: var(--fs-xs); color: var(--text-soft); display: inline-flex; gap: .7rem; }

/* ---- rating stars ------------------------------------------------------ */
.stars { display: inline-flex; align-items: center; gap: .08rem; color: var(--warning); line-height: 1; }
.stars i { font-size: 1em; }
.stars.lg { font-size: 1.25rem; }
.rating-wrap { display: inline-flex; align-items: center; gap: .5rem; }
.rating-wrap .rv { font-weight: var(--fw-bold); font-family: var(--font-display); }
.rating-wrap .rc { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- show detail ------------------------------------------------------- */
.show-hero { position: relative; min-height: 360px; border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; display: flex; align-items: flex-end; background: var(--brand-900); }
.show-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); filter: saturate(1.05); }
.show-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,32,25,.1), rgba(17,32,25,.55) 50%, rgba(17,32,25,.95)); }
.show-hero-inner { position: relative; z-index: 2; color: #fff; padding: clamp(1.5rem, 4vw, 2.5rem); width: 100%; }
.show-hero-inner h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); color: #fff; }
.show-hero-inner .lead { color: rgba(255,255,255,.85); font-size: var(--fs-md); margin-top: .4rem; max-width: 60ch; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-8); align-items: start; }
.detail-grid > * { min-width: 0; }   /* let the 1fr column shrink so the aside never overflows */
.detail-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); }
.book-card { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-md); }
.book-card .price-head { display: flex; align-items: baseline; gap: .4rem; }
.book-card .price-head .amt { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extra); }
/* Desktop: stitch the booking card + engagement into one cohesive card (Epic 14
   session). Mobile keeps two pieces — a fixed book-bar + the engagement inline. */
@media (min-width: 1024px) {
  .detail-aside.is-stitched { gap: 0; }
  .detail-aside.is-stitched .book-card { display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
  .detail-aside.is-stitched .book-card .btn { width: 100%; }
  .detail-aside.is-stitched .detail-engage { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: var(--sh-md); }
}

/* lineup */
.lineup-row { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.lineup-row::-webkit-scrollbar { display: none; }
.lineup-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 110px; text-align: center; }
.lineup-item .ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); display: grid; place-content: center; color: #fff; font-family: var(--font-display); font-weight: var(--fw-extra); }
.lineup-item .nm { font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.lineup-item .rl { font-size: var(--fs-xs); color: var(--text-muted); }
.head-badge { font-size: var(--fs-xs); color: var(--warning); font-weight: var(--fw-semibold); }

/* sessions */
.session-item { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.session-item + .session-item { margin-top: var(--sp-3); }
.date-chip { flex: 0 0 auto; width: 62px; text-align: center; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.date-chip .m { background: var(--brand-900); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; padding: .2rem 0; letter-spacing: .05em; }
.date-chip .d { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-extra); padding: .25rem 0; }
.session-item .price-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.price-tag { font-size: var(--fs-xs); padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; gap: .3rem; align-items: center; }
.price-tag .sw { width: .65rem; height: .65rem; border-radius: 50%; }
.session-item.is-cancelled { opacity: .55; }

/* engagement bar */
.engage-bar { display: flex; gap: .5rem; flex-wrap: wrap; }
.engage-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-soft); font-weight: var(--fw-semibold); font-size: var(--fs-sm); cursor: pointer; transition: all var(--t); }
.engage-btn:hover { border-color: var(--brand-400); color: var(--brand-700); }
.engage-btn .c { font-variant-numeric: tabular-nums; }
.engage-btn.is-on { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
.engage-btn.like.is-on { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.engage-btn.dislike.is-on { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.engage-btn.bookmark.is-on { background: var(--cream); border-color: var(--warning); color: var(--warning); }
.engage-btn.rsvp.is-on { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.engage-btn.is-on i { animation: pop var(--t) var(--ease-spring); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* reviews */
.review-item { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); display: flex; gap: var(--sp-3); }
.review-item:last-child { border-bottom: 0; }
.review-item .ra { flex: 0 0 auto; }
.review-item .rmeta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.review-item .rname { font-weight: var(--fw-semibold); }
.review-item .rwhen { font-size: var(--fs-xs); color: var(--text-muted); }
.review-item .rtitle { font-weight: var(--fw-semibold); margin-top: .35rem; }
.review-item .rbody { color: var(--text-soft); margin-top: .2rem; }
.review-item .mine-tag { font-size: var(--fs-xs); color: var(--teal); font-weight: var(--fw-semibold); }
.review-item .rowneractions { display: flex; gap: .25rem; }

/* star rating input */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label { font-size: 1.7rem; color: var(--border-strong); cursor: pointer; line-height: 1; transition: color var(--t-fast); }
.star-input label::before { content: "\f186"; font-family: "remixicon"; } /* ri-star-fill */
.star-input input:checked ~ label,
.star-input label:hover, .star-input label:hover ~ label { color: var(--warning); }

/* gallery */
.gallery-rail { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-rail img { flex: 0 0 auto; width: 280px; height: 180px; object-fit: cover; border-radius: var(--r-md); scroll-snap-align: start; cursor: pointer; }

/* artist detail hero */
.artist-hero { display: flex; gap: var(--sp-6); align-items: flex-end; padding: var(--sp-8) 0 var(--sp-6); }
.artist-hero .ph { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); box-shadow: var(--sh-md); background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); display: grid; place-content: center; color: #fff; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extra); flex: 0 0 auto; }
.social-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.social-row a { width: 2.4rem; height: 2.4rem; border-radius: var(--r-md); display: grid; place-content: center; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); transition: all var(--t); }
.social-row a:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-300); }

/* browse */
.browse-toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.browse-search { flex: 1; min-width: 220px; }
.filter-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); }
.results-grid .ticket { width: 100%; }
.range-out { font-weight: var(--fw-semibold); color: var(--brand-700); }
.seg-scroll { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.seg-scroll::-webkit-scrollbar { display: none; }

/* footer socials */
.fe-foot-social { display: flex; gap: .5rem; }
.fe-foot-social a { width: 2.3rem; height: 2.3rem; border-radius: var(--r-md); display: grid; place-content: center; background: rgba(255,255,255,.08); color: #fff; transition: background var(--t); }
.fe-foot-social a:hover { background: rgba(255,255,255,.18); }

/* ---- responsive (mobile-first polish, test @390px) -------------------- */
@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .book-card.is-sticky-mobile {
    position: fixed; left: 0; right: 0; bottom: var(--bottomnav-h);
    z-index: var(--z-sticky); border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--sh-xl); display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: 0;
  }
  .book-card.is-sticky-mobile .price-head .amt { font-size: var(--fs-xl); }
}
@media (max-width: 600px) {
  .hero-slide { min-height: 360px; }
  .artist-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .artist-hero .ph { width: 110px; height: 110px; }
  .ticket { width: 230px; }
  .results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .ticket, .artist-card, .cat-tile, .rail-nav { transition: none; }
  .hero-track { scroll-behavior: auto; }
  .engage-btn.is-on i { animation: none; }
}

/* ========================================================================
   EPIC 7 — Frontend Auth & Account (the signed-in customer's home)
   Reuses the Epic 6 ticket-stub card + rails inside a calm, native-feeling
   account shell: a sticky left rail on desktop, a bottom-sheet nav on mobile.
   Tokens only. Signature stays the ticket; this layer is quiet around it.
   ======================================================================== */

/* avatar that wraps an <img> (header + account rail) */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- account shell ----------------------------------------------------- */
.account-wrap { display: grid; grid-template-columns: 264px 1fr; gap: var(--sp-8); align-items: start; padding-block: var(--sp-8); }
.account-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }

/* ---- left rail --------------------------------------------------------- */
.account-rail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--sp-4); }
.acc-id { display: flex; gap: var(--sp-3); align-items: center; }
.acc-id .avatar-lg { flex: none; }
.acc-id-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.acc-id-meta b { font-size: var(--fs-sm); line-height: var(--lh-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-id-mail { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-verified { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--success); display: inline-flex; align-items: center; gap: .25rem; margin-top: .1rem; }
.acc-verified.is-off { color: var(--text-muted); }

.acc-nav { display: flex; flex-direction: column; gap: 2px; }
.acc-nav-signout { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.acc-nav-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem .7rem; border-radius: var(--r-md); color: var(--text-soft); font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); text-align: left; cursor: pointer; }
.acc-nav-item > i:first-child { font-size: 1.2em; width: 1.2em; text-align: center; }
.acc-nav-item .chev { margin-left: auto; color: var(--text-muted); opacity: 0; transition: opacity var(--t-fast); }
.acc-nav-item:hover { background: var(--surface-2); color: var(--text); }
.acc-nav-item.is-active { background: var(--brand-50); color: var(--brand-700); }
.acc-nav-item.is-active .chev { opacity: 1; color: var(--brand-400); }
.acc-nav-item.danger { color: var(--danger); }
.acc-nav-item.danger:hover { background: var(--danger-soft); }
.acc-nav-item.is-soon { color: var(--text-muted); }
.soon-pill { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; padding: .1rem .45rem; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--text-muted); }

/* ---- mobile section bar (rail collapses to a bottom-sheet) ------------- */
.acc-mobile-bar { display: none; }
.acc-mobile-trigger { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); font-weight: var(--fw-bold); color: var(--text); }
.acc-mobile-trigger > i:first-child { color: var(--brand-500); }
.acc-mobile-trigger > i:last-child { margin-left: auto; color: var(--text-muted); }

/* ---- dashboard --------------------------------------------------------- */
.acc-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #fff; border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6); position: relative; overflow: hidden; }
.acc-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(137,215,183,.35), transparent 70%); }
.acc-hero .fe-eyebrow { color: var(--mint); }
.acc-hero h1 { color: #fff; font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-top: .25rem; }
.acc-hero-sub { color: rgba(255,255,255,.82); font-size: var(--fs-md); margin-top: .35rem; max-width: 46ch; }
.acc-hero .btn { position: relative; z-index: 1; }

.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.acc-stat-card { display: flex; flex-direction: column; gap: .4rem; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-xs); transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.acc-stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.acc-stat-card .st-icon { width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); display: grid; place-content: center; font-size: 1.25rem; }
.acc-stat-card .st-val { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extra); color: var(--color-ink); line-height: 1; }
.acc-stat-card .st-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.acc-block { display: flex; flex-direction: column; }
.acc-bookings-teaser { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--cream); border: 1px solid #f0e6cf; }
.acc-bookings-teaser b { display: block; }

/* ---- list / form pages ------------------------------------------------- */
.acc-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.acc-page-head h1 { font-size: var(--fs-xl); }
.acc-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); align-items: start; }
.acc-card-title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); }
.acc-card-title i { color: var(--brand-500); }
.acc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.acc-pref-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: calc(-1 * var(--sp-2)); }
.acc-danger { border-color: var(--danger-soft); }
.acc-danger .acc-card-title i { color: var(--danger); }

/* ---- removable card grids --------------------------------------------- */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.acc-grid.artists { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.acc-grid .ticket, .acc-grid.artists .artist-card { width: 100%; }
.acc-cell { position: relative; display: flex; }
.acc-cell .ticket, .acc-cell .artist-card { flex: 1; }
.acc-remove { position: absolute; top: .6rem; right: .6rem; z-index: 4; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-content: center; background: rgba(255,255,255,.92); color: var(--danger); border: 1px solid var(--border); box-shadow: var(--sh-sm); cursor: pointer; backdrop-filter: blur(4px); transition: transform var(--t-fast), background var(--t-fast); }
.acc-remove:hover { transform: scale(1.08); background: #fff; }
.acc-cell.is-removing { opacity: 0; transform: scale(.94); transition: opacity .26s var(--ease), transform .26s var(--ease); pointer-events: none; }

/* ---- my reviews -------------------------------------------------------- */
.acc-reviews { display: flex; flex-direction: column; gap: var(--sp-4); }
.acc-review { padding: var(--sp-4) var(--sp-5); }
.acc-review .review-item { padding-top: var(--sp-3); padding-bottom: 0; border-bottom: 0; }
.acc-review-show { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.acc-review-show:hover b { color: var(--brand-700); }
.acc-review-thumb { flex: none; width: 52px; height: 52px; border-radius: var(--r-md); background-size: cover; background-position: center; background-color: var(--brand-800); }
.acc-review-show > i { color: var(--text-muted); }

/* ---- likes segment ----------------------------------------------------- */
.acc-segment { width: fit-content; }
.acc-segment .seg-count { display: inline-block; margin-left: .4rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); }
.acc-segment button.is-active .seg-count { color: var(--brand-600); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1023px) {
  .account-wrap { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-4); }
  .account-rail { display: none; }
  .acc-mobile-bar { display: block; position: sticky; top: calc(var(--header-h) + 6px); z-index: var(--z-sticky); }
  .acc-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .acc-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .acc-hero { padding: var(--sp-5); }
  .acc-hero .btn { width: 100%; justify-content: center; }
  .acc-form-row { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
  .acc-grid.artists { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-stat-card, .acc-remove, .acc-cell.is-removing { transition: none; }
}

/* ==========================================================================
   EPIC 8 — Booking Engine
   Stepper (seat picker / GA / review / checkout), order-summary stub, mock pay
   sheet, confirmation ticket + QR. Tokens only; reuses .seat, ticket-stub motif.
   ========================================================================== */

/* ---- Flow shell ------------------------------------------------------- */
.bk { padding: var(--sp-5) 0 calc(var(--sp-20) + env(safe-area-inset-bottom)); }
.bk-crumbs { margin-bottom: var(--sp-4); }
.bk-crumbs a { color: var(--text-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: .4rem; }
.bk-crumbs a:hover { color: var(--color-primary); }

.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.bk-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.bk-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extra); line-height: var(--lh-tight); margin: .2rem 0 .5rem; }
.bk-when { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--text-soft); font-size: var(--fs-sm); }
.bk-when i { color: var(--color-primary); margin-right: .25rem; }

.bk-hold { display: inline-flex; align-items: center; gap: .45rem; background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); padding: .5rem .85rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.bk-hold b { font-variant-numeric: tabular-nums; }

/* ---- Step pips -------------------------------------------------------- */
.bk-steps { display: flex; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-6); flex-wrap: wrap; }
.bk-step { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); padding: .35rem .5rem; }
.bk-step .n { display: grid; place-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-circle); background: var(--surface-sunk); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.bk-step.is-active { color: var(--color-ink); }
.bk-step.is-active .n { background: var(--color-primary); color: #fff; box-shadow: var(--ring); }
.bk-step.is-done .n { background: var(--brand-300); color: var(--brand-900); }
.bk-step.is-done .n::before { content: "\EB7B"; font-family: "remixicon"; }
.bk-step.is-done .n { font-size: 0; }
.bk-step + .bk-step::before { content: ""; width: 1.5rem; height: 2px; background: var(--border); border-radius: 2px; }
/* Wizard-steps row with a top CTA (Epic 14 session): advance without scrolling. */
.bk-steps-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.bk-steps-row .bk-steps { margin-bottom: 0; }
.bk-steps-cta { flex: none; }
@media (max-width: 1023px) { .bk-steps-cta { display: none; } }

/* ---- Two-column grid -------------------------------------------------- */
.bk-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); align-items: start; }
.bk-aside { position: sticky; top: var(--sp-5); }
.bk-panel { animation: bkFade .25s ease; }
.bk-h { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.bk-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.bk-pick-hint { color: var(--text-muted); font-size: var(--fs-sm); }
@keyframes bkFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Seat map --------------------------------------------------------- */
.bk-seatmap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.bk-stage { text-align: center; margin: 0 auto var(--sp-6); max-width: 70%; padding: .5rem; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .35em; background: linear-gradient(180deg, var(--surface-sunk), transparent); border-top: 3px solid var(--brand-300); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bk-canvas-wrap { overflow-x: auto; padding-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; }
.bk-canvas { display: inline-flex; flex-direction: column; gap: var(--sp-5); min-width: 100%; }
.bk-sec-name { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--sp-2); text-align: center; }
.bk-srow { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; margin-bottom: .3rem; }
.bk-rl { width: 1.4rem; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); flex: 0 0 auto; }
.bk-rseats { display: flex; gap: .3rem; }

/* Booking seat states (extend Epic 4 .seat) */
.bk-seat { cursor: pointer; font-size: .62rem; font-weight: var(--fw-bold); position: relative; background: var(--surface); }
.bk-seat .seat-n { opacity: .55; }
.bk-seat.is-available { border-color: color-mix(in srgb, var(--seat-c) 55%, var(--border)); background: color-mix(in srgb, var(--seat-c) 14%, var(--surface)); color: color-mix(in srgb, var(--seat-c) 75%, #102019); }
.bk-seat.is-available:hover { background: color-mix(in srgb, var(--seat-c) 26%, var(--surface)); transform: translateY(-1px); }
.bk-seat.is-selected { background: var(--brand-500); border-color: var(--brand-600); color: #fff; box-shadow: 0 0 0 2px var(--brand-500), 0 4px 8px -3px rgba(26,49,44,.5); }
.bk-seat.is-selected .seat-n { opacity: .85; }
.bk-seat.is-held { background: var(--surface-sunk); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: .6; }
.bk-seat.is-booked { background: repeating-linear-gradient(45deg, var(--surface-sunk), var(--surface-sunk) 3px, #d9e0dc 3px, #d9e0dc 6px); border-color: var(--border); color: transparent; cursor: not-allowed; }
.bk-seat.is-pending { opacity: .6; }
.bk-seat.is-loading { pointer-events: none; }

.bk-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.bk-leg { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-soft); }
.bk-leg .sw { width: .9rem; height: .9rem; border-radius: 4px; background: var(--teal); flex: 0 0 auto; }
.bk-leg .sw.is-sel { background: var(--brand-500); }
.bk-leg .sw.is-taken { background: repeating-linear-gradient(45deg, var(--surface-sunk), var(--surface-sunk) 2px, #d9e0dc 2px, #d9e0dc 4px); }

/* ---- GA tiers --------------------------------------------------------- */
.bk-tiers { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-tier { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-xs); }
.bk-tier.is-soldout { opacity: .55; }
.bk-tier-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.bk-tier-name { font-size: var(--fs-md); }
.bk-tier-price { color: var(--color-primary); font-weight: var(--fw-bold); }
.bk-tier-left { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Quantity stepper (GA + addons) ----------------------------------- */
.qty-step { display: inline-flex; align-items: center; gap: .2rem; background: var(--surface-sunk); border-radius: var(--r-pill); padding: .2rem; flex: 0 0 auto; }
.qty-btn { width: 2rem; height: 2rem; border-radius: var(--r-circle); border: none; background: var(--surface); color: var(--color-ink); display: grid; place-content: center; cursor: pointer; box-shadow: var(--sh-xs); font-size: 1rem; }
.qty-btn:hover:not(:disabled) { background: var(--brand-100); color: var(--color-primary); }
.qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.qty-val { min-width: 1.6rem; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ---- Order summary stub ---------------------------------------------- */
.bk-stub { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-md); position: relative; }
.bk-stub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.bk-stub-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: inline-flex; gap: .4rem; align-items: center; }
.bk-hold-inline { font-size: var(--fs-xs); color: var(--warning); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bk-stub-lines { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-stub-empty { color: var(--text-muted); font-size: var(--fs-sm); padding: var(--sp-3) 0; }
.bk-sl { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.bk-sl-main b { font-weight: var(--fw-semibold); }
.bk-sl-q { color: var(--text-muted); font-size: var(--fs-sm); }
.bk-sl-tag { display: inline-block; font-size: .62rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); background: var(--brand-100); padding: .05rem .4rem; border-radius: var(--r-pill); margin-left: .35rem; vertical-align: middle; }
.bk-sl-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .15rem; }
.bk-sl-amt { font-weight: var(--fw-semibold); white-space: nowrap; }
.bk-perf { position: relative; height: 1px; margin: var(--sp-4) calc(var(--sp-5) * -1); border-top: 2px dashed var(--border); }
.bk-perf::before, .bk-perf::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--bg); }
.bk-perf::before { left: -9px; } .bk-perf::after { right: -9px; }
.bk-stub-totals { display: flex; flex-direction: column; gap: var(--sp-2); }
.bk-stub-grand { font-size: var(--fs-md); font-weight: var(--fw-extra); padding-top: var(--sp-2); }
.bk-stub-grand span:last-child { color: var(--color-primary); }

/* ---- Review extras + checkout ---------------------------------------- */
.bk-review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.bk-extras { margin-top: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.bk-extras-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bk-extras-head b { display: block; }
.bk-extras-head .text-muted { font-size: var(--fs-xs); }
.bk-checkout { max-width: 460px; }
.bk-tos { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer; }
.bk-tos input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); flex: 0 0 auto; }
.bk-tos a { color: var(--color-primary); font-weight: var(--fw-semibold); }

/* ---- Add-on list (sheet) --------------------------------------------- */
.bk-addon-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-addon { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.bk-addon .grow { flex: 1 1 auto; }

/* ---- Mock pay sheet --------------------------------------------------- */
.bk-pay { text-align: center; padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
.bk-pay-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0 var(--sp-4); }
.bk-pay-brand { font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: .4rem; color: var(--color-ink); }
.bk-pay-mock { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warning); background: var(--warning-soft); padding: .2rem .6rem; border-radius: var(--r-pill); }
.bk-pay-amount { padding: var(--sp-4) 0; }
.bk-pay-amount .text-muted { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.bk-pay-total { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extra); color: var(--color-primary); }
.bk-pay-note { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.bk-pay-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-pay-cancel { background: none; border: none; color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); cursor: pointer; }

/* ---- Sticky mobile total bar ----------------------------------------- */
.bk-bar { display: none; }
.bk-bar-total { background: none; border: none; text-align: left; cursor: pointer; flex: 1 1 auto; }
.bk-bar-total .lbl { display: block; font-weight: var(--fw-bold); }
.bk-bar-total .see { font-size: var(--fs-xs); color: var(--color-primary); }

/* ---- Session picker -------------------------------------------------- */
.bk-pick-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.bk-pick { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); cursor: pointer; }
.bk-pick:hover { border-color: var(--brand-300); background: var(--brand-50); }
.bk-pick .grow { flex: 1 1 auto; }
.bk-pick > i { color: var(--text-muted); }

/* ---- Confirmation ----------------------------------------------------- */
.bk-conf { padding: var(--sp-8) 0 var(--sp-16); }
.bk-conf-hero { text-align: center; max-width: 540px; margin: 0 auto var(--sp-8); }
.bk-conf-check { font-size: 3.4rem; color: var(--success); line-height: 1; animation: bkPop .4s ease; }
@keyframes bkPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.bk-conf-hero h1 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extra); margin: var(--sp-3) 0 var(--sp-2); }
.bk-conf-hero .lead { color: var(--text-soft); }

.bk-ticket { display: grid; grid-template-columns: 1fr 260px; max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.bk-ticket-body { padding: var(--sp-6); }
.bk-ticket-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extra); margin: var(--sp-3) 0 var(--sp-4); line-height: var(--lh-tight); }
.bk-ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bk-ticket-meta > div { display: flex; flex-direction: column; gap: .15rem; }
.bk-ticket-meta .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.bk-ticket-meta .v { font-weight: var(--fw-semibold); }
.bk-ticket-meta .bk-addr { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-normal); }
.bk-ticket-seats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-3); }
.bk-seat-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: .25rem .6rem; border-radius: var(--r-sm); }
.bk-seat-chip small { color: var(--text-muted); font-weight: var(--fw-normal); }
.bk-ticket-addons { font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bk-ticket-addons .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-right: .3rem; }
.bk-addon-chip { background: var(--surface-sunk); border-radius: var(--r-sm); padding: .2rem .55rem; font-weight: var(--fw-medium); }

.bk-ticket-stub { position: relative; background: var(--forest); color: var(--text-invert); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; }
.bk-ticket-perf { position: absolute; left: -8px; top: 0; bottom: 0; width: 16px; background:
   radial-gradient(circle at left, var(--bg) 0 8px, transparent 8px) left center / 16px 22px repeat-y; }
.bk-qr { background: #fff; border-radius: var(--r-md); padding: 8px; display: block; }
.bk-ref { display: flex; flex-direction: column; gap: .15rem; }
.bk-ref .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); }
.bk-ref b { font-size: var(--fs-lg); font-weight: var(--fw-extra); letter-spacing: .04em; color: var(--mint); }
.bk-ticket-total { font-size: var(--fs-md); font-weight: var(--fw-bold); }

.bk-conf-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: var(--sp-6) 0 var(--sp-3); }
.bk-conf-note { text-align: center; font-size: var(--fs-sm); }

/* ---- Printable ticket ------------------------------------------------- */
.bk-print { padding: var(--sp-6) 0 var(--sp-16); }
.bk-print-bar { display: flex; justify-content: space-between; max-width: 720px; margin: 0 auto var(--sp-4); }
.bk-print-brand { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); }
.bk-print-total { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border); font-size: var(--fs-md); }
.bk-print-total b { font-weight: var(--fw-extra); color: var(--color-primary); }
.bk-print-scan { font-size: var(--fs-xs); color: var(--side-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1023px) {
  .bk-grid { grid-template-columns: 1fr; }
  .bk-aside { display: none; }                 /* summary lives in the bottom sheet */
  .bk { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .bk-bar { display: flex; align-items: center; gap: var(--sp-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(26,49,44,.08); }
  .bk-bar .btn { flex: 0 0 auto; }
  /* The booking stepper is a focused flow — swap the global bottom nav for the
     order/total bar so they never collide. */
  body:has(.bk) .bottom-nav { display: none !important; }
  .bk-panel-foot .btn-lg { display: none; }    /* the sticky bar drives forward nav */
  .bk-ticket { grid-template-columns: 1fr; }
  .bk-ticket-stub { order: -1; }
  .bk-ticket-perf { left: 0; right: 0; top: auto; bottom: -8px; width: auto; height: 16px; background:
     radial-gradient(circle at top, var(--bg) 0 8px, transparent 8px) center top / 22px 16px repeat-x; }
}
@media (max-width: 600px) {
  .bk-ticket-meta { grid-template-columns: 1fr; }
  .bk-seat { width: 1.55rem; height: 1.55rem; }
  .bk-conf-actions .btn { flex: 1 1 auto; }
}

@media print {
  .app-header, .bottom-nav, .footer, .no-print, .bk-bar, .app-loader { display: none !important; }
  body { background: #fff; }
  .bk-ticket { box-shadow: none; border: 1px solid #999; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-panel, .bk-conf-check, .bk-seat { animation: none; transition: none; }
}

/* ===================================================================== *
   EPIC 9 — Payments (admin payment status indicator)
   Tokens only. The checkout itself reuses the Epic-8 pay-sheet; the real
   Razorpay widget is the gateway's hosted overlay (no local styling).
 * ===================================================================== */
.pay-status .row-between { gap: 1rem; }
.pay-status .small { margin-top: .25rem; max-width: 60ch; }
.pay-status .badge { flex: none; align-self: center; }

/* ===================================================================== *
   EPIC 10 — Bookings Management
   Tokens only. Customer "My Bookings" (list rows + detail/manage panel) and
   the admin Bookings console (scan box, detail grid, payment history). Reuses
   the Epic-8 .bk-ticket; adds the new management surfaces around it.
 * ===================================================================== */

/* ---- Booking list rows (customer list + dashboard teaser) ------------ */
.bk-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-card { display: flex; align-items: stretch; gap: var(--sp-4); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: var(--text); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.bk-card:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(26,49,44,.08); transform: translateY(-1px); }
.bk-card-poster { flex: 0 0 84px; width: 84px; align-self: stretch; min-height: 84px; border-radius: var(--r-md); background: var(--surface-sunk) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.4rem; }
.bk-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.bk-card-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.t-pill.sm { padding: .15rem .45rem; font-size: var(--fs-xs); }
.bk-card-title { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-card-meta { display: flex; flex-wrap: wrap; gap: .15rem var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.bk-card-meta i { margin-right: .25rem; opacity: .8; }
.bk-card-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .15rem; text-align: right; }
.bk-card-total { font-weight: var(--fw-extra); color: var(--brand-900); }
.bk-card-ref { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .03em; }
.bk-card-side .chev { color: var(--text-muted); font-size: 1.2rem; }

/* Status chips */
.bk-status { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: .12rem .5rem; border-radius: var(--r-pill); }
.bk-status-confirmed { background: var(--success-soft); color: var(--success); }
.bk-status-cancelled { background: var(--danger-soft); color: var(--danger); }

/* ---- Booking detail (customer) --------------------------------------- */
.bk-detail { padding-block: var(--sp-5) var(--sp-10); }
.bk-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bk-detail-ref { font-size: var(--fs-sm); color: var(--text-muted); }
.bk-detail-ref b { color: var(--brand-900); letter-spacing: .03em; }
.bk-detail-status { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); margin-bottom: var(--sp-5); }
.bk-detail-status i { font-size: 1.6rem; flex: none; }
.bk-detail-status b { display: block; font-weight: var(--fw-bold); }
.bk-detail-status span { font-size: var(--fs-sm); }
.bk-detail-status-confirmed { background: var(--success-soft); color: var(--success); }
.bk-detail-status-checkedin { background: var(--brand-50); color: var(--brand-700); }
.bk-detail-status-cancelled { background: var(--danger-soft); color: var(--danger); }
.bk-detail-status-confirmed span, .bk-detail-status-checkedin span, .bk-detail-status-cancelled span { color: var(--text); opacity: .85; }

.bk-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: start; }
.bk-detail-main { min-width: 0; }
.bk-detail-side { position: sticky; top: var(--sp-5); }

.bk-ticket-cancelled { opacity: .72; }
.bk-ticket-cancelled .bk-ticket-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-stub-cancelled { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 160px; height: 160px; color: var(--danger); }
.bk-stub-cancelled i { font-size: 3rem; }
.bk-stub-cancelled span { font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-sm); }

/* Manage panel */
.bk-actions-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-actions-card h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.bk-share-row { display: flex; gap: var(--sp-2); }
.bk-share-row .btn { flex: 1 1 0; }
.bk-actions-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.bk-policy-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin: 0; }
.bk-policy-note i { color: var(--brand-500); }
.bk-cant-cancel { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface-sunk); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-muted); }
.bk-cant-cancel i { color: var(--text-muted); flex: none; margin-top: .1rem; }
.bk-refund-summary { display: flex; flex-direction: column; gap: .2rem; }
.bk-refund-summary .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.bk-refund-amt { font-size: var(--fs-xl); font-weight: var(--fw-extra); color: var(--success); }
.bk-refund-summary span.text-muted { font-size: var(--fs-sm); }
.bk-confirm-policy { display: block; margin-top: .4rem; font-size: var(--fs-sm); color: var(--text-muted); }
.bk-refund-preview { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); margin: var(--sp-3) 0; background: var(--cream); border-radius: var(--r-md); font-weight: var(--fw-semibold); }

/* ---- Admin: scan box ------------------------------------------------- */
.bk-scan { padding: var(--sp-4); margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-scan-head { display: flex; align-items: center; gap: var(--sp-3); }
.bk-scan-icon { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.bk-scan-form { display: flex; gap: var(--sp-2); }
.bk-scan-form .input-group { flex: 1 1 auto; }
.bk-scan-result[hidden] { display: none; }
.bk-scan-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.bk-scan-card-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bk-scan-show { font-weight: var(--fw-semibold); }
.bk-scan-card-side { display: flex; gap: var(--sp-2); align-items: center; }
.bk-scan-empty { padding: var(--sp-3); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-sm); }
.dt-ref { font-weight: var(--fw-semibold); color: var(--brand-700); text-decoration: none; letter-spacing: .02em; }
.dt-ref:hover { text-decoration: underline; }

/* ---- Admin: booking detail ------------------------------------------- */
.bk-admin-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
.bk-admin-grid > * { min-width: 0; }   /* let columns shrink; avoid horizontal overflow */
.kv-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.kv-list > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.kv-list dt { color: var(--text-muted); font-size: var(--fs-sm); }
.kv-list dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; }
.bk-lines { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.bk-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.bk-line small { font-weight: var(--fw-normal); }
.bk-totals { display: flex; flex-direction: column; gap: .35rem; padding-top: var(--sp-3); }
.bk-totals > div { display: flex; justify-content: space-between; color: var(--text-muted); font-size: var(--fs-sm); }
.bk-totals-grand { color: var(--text) !important; font-size: var(--fs-md) !important; font-weight: var(--fw-bold); }
.bk-pay-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-pay-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bk-pay-row > div { display: flex; flex-direction: column; gap: .1rem; }
.bk-pay-row b { font-weight: var(--fw-bold); }
.bk-pay-meta { align-items: flex-end !important; text-align: right; }

@media (max-width: 1023px) {
  .bk-detail-grid, .bk-admin-grid { grid-template-columns: 1fr; }
  .bk-detail-side { position: static; }
}
@media (max-width: 600px) {
  .bk-card { gap: var(--sp-3); }
  .bk-card-poster { flex-basis: 64px; width: 64px; min-height: 64px; }
  .bk-card-side .bk-card-ref { display: none; }
  .bk-scan-form { flex-direction: column; }
}

/* =======================================================================
   EPIC 11 — Engagement Moderation (admin)
   Tokens-only additions; no existing utility classes redefined.
   ======================================================================= */

/* Stats strip + overview cards */
.eng-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.eng-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.eng-overview .card-title { margin-bottom: var(--sp-3); }

.eng-review-health { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); }
.eng-review-health > div { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.eng-review-health b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extra); color: var(--color-ink); line-height: 1; }

.eng-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.eng-top li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.eng-top li a { color: var(--color-ink); font-weight: var(--fw-medium); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-top li a:hover { color: var(--color-primary); text-decoration: underline; }
.eng-top-meta { display: inline-flex; gap: .7rem; flex: none; color: var(--text-muted); font-weight: var(--fw-semibold); }
.eng-top-meta i { color: var(--brand-500); }
.eng-top-meta i.ri-star-fill { color: var(--warning); }

/* Tabs spacing on the engagement console */
.eng-tabs { margin-bottom: var(--sp-4); }
.eng-tabs i { margin-right: .35rem; }

/* Review row presentation */
.rev-stars { white-space: nowrap; color: var(--warning); font-size: 1rem; letter-spacing: .04em; }
.rev-stars .ri-star-line { color: var(--border-strong); }
.rev-excerpt { display: flex; flex-direction: column; gap: .15rem; max-width: 320px; }
.rev-excerpt b { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-excerpt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row-action icon-button tones (new modifiers; the existing set uses .danger/.warn) */
.row-actions .icon-btn.is-success:hover { background: var(--success-soft); color: var(--success); }
.row-actions .icon-btn.is-warning:hover { background: var(--warning-soft); color: var(--warning); }
.row-actions .icon-btn.is-danger:hover  { background: var(--danger-soft);  color: var(--danger); }

@media (max-width: 600px) {
    .eng-stats { grid-template-columns: repeat(2, 1fr); }
    .rev-excerpt { max-width: 200px; }
}

/* =======================================================================
   EPIC 12 — Reports & Analytics (admin)
   Tokens-only additions; no existing utility classes redefined (grepped).
   Charts are CANVAS (vendored Chart.js); the bars below are pure CSS.
   ======================================================================= */

/* KPI grid */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); }

/* Trend chart card */
.an-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.an-chart-wrap { position: relative; height: 320px; }
.an-chart-wrap canvas { max-width: 100%; }

/* Segmented range selector (7/30/90) */
.an-range { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.an-range button { border: 0; background: transparent; color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: .4rem .85rem; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.an-range button:hover { color: var(--color-ink); }
.an-range button.is-active { background: var(--surface); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Generic CSS bar (occupancy + top lists) */
.an-bar { flex: 1; height: 8px; background: var(--surface-sunk); border-radius: var(--r-pill); overflow: hidden; }
.an-bar-fill { display: block; height: 100%; background: var(--brand-400); border-radius: var(--r-pill); transition: width .4s ease; }
.an-bar-fill.is-mid { background: var(--brand-500); }
.an-bar-fill.is-high { background: var(--success); }

/* Occupancy view (dashboard) */
.an-occ { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.an-occ-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr); gap: var(--sp-4); align-items: center; }
.an-occ-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.an-occ-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-occ-bar-wrap { display: flex; align-items: center; gap: var(--sp-3); }
.an-occ-num { flex: none; min-width: 92px; text-align: right; }

/* Top lists (CSS bars) */
.an-tops { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.an-tops .card-title i { color: var(--brand-500); margin-right: .35rem; }
.an-top { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.an-top li { display: flex; flex-direction: column; gap: .3rem; }
.an-top-line { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.an-top-name { font-weight: var(--fw-medium); color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top-rev { flex: none; font-weight: var(--fw-semibold); color: var(--color-primary); font-size: var(--fs-sm); }
.an-top-meta { font-size: var(--fs-xs); }

/* Reports tabs + occupancy cell */
.rep-tabs { margin-bottom: var(--sp-4); }
.rep-tabs i { margin-right: .35rem; }
.rep-occ { display: flex; align-items: center; gap: var(--sp-3); min-width: 140px; }
.rep-occ-num { flex: none; }

@media (max-width: 600px) {
    .an-kpis { grid-template-columns: repeat(2, 1fr); }
    .an-occ-row { grid-template-columns: 1fr; gap: var(--sp-2); }
    .an-occ-num { min-width: 0; }
    .an-chart-head { flex-direction: column; }
}

/* ==========================================================================
   EPIC 13 — Polish, Hardening & Accessibility
   Tokens-only; no existing utility class redefined (grepped: .skip-link,
   .sr-only were free; global :focus-visible at line ~25 already rings every
   focusable, so it is NOT redefined here).
   ========================================================================== */

/* Skip-to-content link — visually hidden until keyboard-focused, then pinned
   top-left on-brand. Present on the app, admin and auth layouts. */
.skip-link {
    position: fixed;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: var(--z-toast, 9999);
    transform: translateY(-150%);
    background: var(--brand, #1A312C);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--sh-lg);
    transition: transform .18s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--mint, #89D7B7); outline-offset: 2px; }

/* The main landmark is focusable (tabindex=-1) for the skip link target but must
   not show a focus ring when reached programmatically. */
main#content:focus,
main#content:focus-visible { outline: none; }

/* Screen-reader-only utility (kept for icon-only controls that need a text label
   without a visible aria-label change). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   EPIC 14 — Content, Trust & SEO
   Content pages (/p/{slug}), the contact form + success state, and the admin
   Pages/Messages surfaces. Tokens only; no existing utility redefined.
   ========================================================================== */

/* ---- Public content pages (doc layout) -------------------------------- */
.page-doc-head { margin-block: var(--sp-5) var(--sp-6); }
.page-doc-head .lead { color: var(--text-soft); max-width: 60ch; }
.page-doc-meta { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.page-doc .card-body { padding: clamp(var(--sp-5), 4vw, var(--sp-10)); }
.page-doc-body { color: var(--text); line-height: var(--lh-base); font-size: var(--fs-md); }
.page-doc-body > :first-child { margin-top: 0; }
.page-doc-body h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); color: var(--brand-800); }
.page-doc-body h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2); }
.page-doc-body p { margin: 0 0 var(--sp-4); }
.page-doc-body ul, .page-doc-body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.page-doc-body li { margin-bottom: var(--sp-2); }
.page-doc-body a { color: var(--teal); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.page-doc-body blockquote { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); border-left: 3px solid var(--mint); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-soft); font-style: italic; }
.page-doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); }
.page-doc-body th, .page-doc-body td { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; }
.page-doc-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.page-doc-body code { background: var(--surface-sunk); padding: .1em .4em; border-radius: var(--r-xs); font-size: .9em; }
.page-doc-foot { margin-top: var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- Contact page ----------------------------------------------------- */
.contact-split { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: start; }
.contact-channel { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); text-decoration: none; }
.contact-channel + .contact-channel { margin-top: var(--sp-1); }
.cc-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-lg); }
.contact-channel b { display: block; font-size: var(--fs-sm); }
.cc-sub { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-done { text-align: center; padding: var(--sp-8) var(--sp-4); }
.cd-ic { font-size: 3rem; color: var(--success); line-height: 1; }
.contact-done h2 { font-family: var(--font-display); margin: var(--sp-3) 0 var(--sp-2); }
.contact-done p { color: var(--text-muted); max-width: 42ch; margin: 0 auto var(--sp-5); }

/* ---- Admin: pages form url preview + code editor ---------------------- */
.page-url-preview { display: flex; align-items: center; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); color: var(--text-muted); background: var(--surface-sunk); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); word-break: break-all; }
.page-url-preview b { color: var(--brand-700); }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); line-height: 1.6; white-space: pre; tab-size: 2; }

/* ---- Admin: messages inbox ------------------------------------------- */
.dt tr.is-unread td { background: var(--brand-50); }
.dt tr.is-unread .id-main b { font-weight: var(--fw-bold); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.msg-detail-head h3 { font-family: var(--font-display); margin: 0 0 var(--sp-2); }
.msg-detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); align-items: center; }
.msg-detail-meta a { color: var(--teal); text-decoration: none; }
.msg-detail-meta i { margin-right: 2px; }
.msg-detail-body { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--surface-2); border-radius: var(--r-md); white-space: pre-wrap; line-height: var(--lh-base); color: var(--text); }

/* ---- Responsive (≤ 720px) -------------------------------------------- */
@media (max-width: 720px) {
  .contact-split { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
}