:root {
  --hambeat-ink: #111225;
  --hambeat-muted: #74738f;
  --hambeat-line: #e9e8f2;
  --hambeat-surface: #ffffff;
  --hambeat-canvas: #f8f8ff;
  --hambeat-purple: #6c3cff;
  --hambeat-pink: #ff2da1;
  --hambeat-blue: #00baf2;
  --hambeat-lime: #c6ff00;
  --hambeat-orange: #ff8a00;
  --hambeat-green: #20b15a;
  --hambeat-red: #ee4660;
  --hambeat-shadow: 0 18px 55px rgba(59, 39, 123, .10);
  --hambeat-radius: 24px;
}

* { box-sizing: border-box; }
[hidden] { display:none!important; }
html { scroll-behavior: smooth; }
body.hambeat-ui { margin: 0; color: var(--hambeat-ink); background: var(--hambeat-canvas); font-family: Vazirmatn, Tahoma, sans-serif; }
.hambeat-ui button, .hambeat-ui input, .hambeat-ui textarea, .hambeat-ui select { font: inherit; }
.hambeat-ui a { color: inherit; text-decoration: none; }
.hambeat-ui img { display: block; max-width: 100%; }
.hambeat-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.hambeat-card { background: var(--hambeat-surface); border: 1px solid var(--hambeat-line); border-radius: var(--hambeat-radius); box-shadow: var(--hambeat-shadow); }
.hambeat-kicker { margin: 0 0 8px; color: var(--hambeat-pink); font-size: 13px; font-weight: 800; }
.hambeat-subtle { color: var(--hambeat-muted); }
.hambeat-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; direction: rtl; }
.hambeat-brand img { width: 42px; height: 42px; border-radius: 13px; }
.hambeat-brand small { color: var(--hambeat-muted); font-size: 13px; font-weight: 700; }
.hambeat-brand b::after { content: " | HamBeat"; color: var(--hambeat-purple); font-size: .65em; }
.hambeat-topbar { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 4vw; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--hambeat-line); backdrop-filter: blur(18px); }
.hambeat-topbar nav, .hambeat-actions { display: flex; align-items: center; gap: 22px; }
.hambeat-auth-actions { min-width: 220px; min-height: 48px; display: flex; align-items: center; justify-content: flex-end; }
.hambeat-topbar nav a { color: #4e4d67; font-weight: 700; font-size: 14px; }
.hambeat-button, .hambeat-button-secondary, .hambeat-icon-button { min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.hambeat-button { padding: 0 23px; background: var(--hambeat-pink); color: white; box-shadow: 0 10px 24px rgba(255,45,161,.22); }
.hambeat-button.lime { color: #151515; background: var(--hambeat-lime); box-shadow: 0 10px 24px rgba(137,177,0,.2); }
.hambeat-button.purple { background: var(--hambeat-purple); }
.hambeat-button-secondary { padding: 0 20px; color: var(--hambeat-purple); background: white; border: 1px solid #dcd7ff; }
.hambeat-button:hover, .hambeat-button-secondary:hover { transform: translateY(-2px); }
.hambeat-icon-button { width: 48px; padding: 0; color: var(--hambeat-purple); background: #f1efff; }
.hambeat-hero { position: relative; min-height: 590px; overflow: hidden; display: grid; align-items: center; color: white; background: #181126; }
.hambeat-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hambeat-hero::after { content: ""; position: absolute; inset: 0; background: rgba(14, 8, 29, .34); }
.hambeat-hero-content { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: auto; padding: 80px 0 118px; }
.hambeat-hero h1 { max-width: 700px; margin: 0 0 18px; font-size: clamp(42px, 6vw, 75px); line-height: 1.18; letter-spacing: -2px; }
.hambeat-hero h1 span { color: var(--hambeat-lime); }
.hambeat-hero p { max-width: 650px; margin: 0 0 30px; font-size: clamp(17px, 2vw, 21px); line-height: 2; }
.hambeat-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hambeat-floating-note { position: absolute; z-index: 3; left: 5%; bottom: 55px; transform: rotate(-5deg); padding: 13px 18px; color: #101010; background: var(--hambeat-lime); border: 2px solid #101010; border-radius: 12px; font-weight: 900; box-shadow: 6px 6px 0 #101010; }
.hambeat-search-shell { position: relative; z-index: 5; margin-top: -42px; padding: 18px; display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px; }
.hambeat-category-strip { margin-top:18px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.hambeat-category-strip button { min-height:42px; padding:0 15px; border:1px solid var(--hambeat-line); border-radius:99px; color:var(--hambeat-muted); background:white; cursor:pointer; }
.hambeat-category-strip button i { margin-left:5px; }
.hambeat-category-strip button.active { color:white; border-color:var(--hambeat-purple); background:var(--hambeat-purple); box-shadow:0 9px 22px rgba(108,60,255,.2); }
.hambeat-field { min-height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--hambeat-line); border-radius: 14px; background: white; }
.hambeat-field input, .hambeat-field select, .hambeat-field textarea { width: 100%; border: 0; outline: 0; color: var(--hambeat-ink); background: transparent; }
.hambeat-section { padding: 80px 0; }
.hambeat-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.hambeat-section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); }
.hambeat-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hambeat-filter-row button { min-height: 42px; padding: 0 17px; border: 1px solid var(--hambeat-line); border-radius: 22px; color: #66627a; background: white; cursor: pointer; font-weight: 700; }
.hambeat-filter-row button.active { color: white; background: var(--hambeat-purple); border-color: var(--hambeat-purple); }
.hambeat-ui .event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hambeat-ui .event-card { overflow: hidden; background: white; border: 1px solid var(--hambeat-line); border-radius: 22px; box-shadow: 0 12px 35px rgba(54,35,117,.08); }
.hambeat-ui .event-cover { position: relative; height: 210px; background: #101b2b url('./assets/covers/hambeat-event-general.webp') center/cover no-repeat; }
.hambeat-ui .status-badge, .hambeat-ui .people-badge { position: absolute; top: 13px; padding: 7px 10px; border-radius: 12px; color: white; background: rgba(12,10,28,.72); font-size: 12px; font-weight: 800; backdrop-filter: blur(8px); }
.hambeat-ui .status-badge { right: 13px; background: var(--hambeat-pink); }
.hambeat-ui .people-badge { left: 13px; }
.hambeat-ui .event-card-body { padding: 18px; }
.hambeat-ui .event-card-body > div:first-child { color: var(--hambeat-muted); font-size: 12px; }
.hambeat-ui .event-card h3 { margin: 9px 0 5px; font-size: 20px; }
.hambeat-ui .event-card p { min-height: 50px; margin: 0; color: var(--hambeat-muted); font-size: 13px; line-height: 1.9; }
.hambeat-ui .event-card-meta { margin: 15px 0; padding-top: 13px; border-top: 1px solid var(--hambeat-line); display: flex; justify-content: space-between; color: #545168; font-size: 11px; }
.hambeat-ui .event-card a { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #111; background: var(--hambeat-lime); border-radius: 13px; font-weight: 900; }
.hambeat-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hambeat-feature { padding: 24px; border-radius: 22px; background: white; border: 1px solid var(--hambeat-line); }
.hambeat-feature i { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--hambeat-purple); background: #eeeaff; font-size: 25px; }
.hambeat-feature:nth-child(2) i { color: #c50070; background: #ffe8f5; }
.hambeat-feature:nth-child(3) i { color: #006995; background: #e5f8ff; }
.hambeat-feature:nth-child(4) i { color: #587500; background: #f2ffc9; }
.hambeat-feature h3 { margin: 18px 0 8px; }
.hambeat-feature p { margin: 0; color: var(--hambeat-muted); line-height: 1.9; font-size: 14px; }
.hambeat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hambeat-stat { padding: 22px; background: white; border: 1px solid var(--hambeat-line); border-radius: 20px; }
.hambeat-stat span { color: var(--hambeat-muted); font-size: 13px; }
.hambeat-stat strong { display: block; margin: 9px 0; font-size: 31px; }
.hambeat-stat small { color: var(--hambeat-green); font-weight: 800; }
.hambeat-mobile-nav { display: none; }

/* Authentication */
.hambeat-auth { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: white; }
.hambeat-auth-visual { position: relative; overflow: hidden; padding: 42px; display: flex; flex-direction: column; justify-content: space-between; color: white; background: #181126; }
.hambeat-auth-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; }
.hambeat-auth-visual::after { content:""; position:absolute; inset:0; background:rgba(20,10,38,.4); }
.hambeat-auth-visual > * { position: relative; z-index: 2; }
.hambeat-auth-copy { max-width: 620px; padding: 50px 4vw; }
.hambeat-auth-copy h1 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 66px); line-height: 1.25; }
.hambeat-auth-copy p { line-height: 2; font-size: 18px; }
.hambeat-auth-form-side { display: grid; place-items: center; padding: 50px 7vw; }
.hambeat-auth-form { width: min(440px, 100%); }
.hambeat-auth-form h2 { margin: 26px 0 7px; font-size: 32px; }
.hambeat-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 15px; background: #f1f0f7; }
.hambeat-tabs button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-weight: 800; }
.hambeat-tabs button.active { color: white; background: var(--hambeat-purple); }
.hambeat-form { display: grid; gap: 14px; margin-top: 23px; }
.hambeat-form label > span { display: block; margin-bottom: 7px; color: #45425a; font-size: 13px; font-weight: 800; }
.hambeat-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .hambeat-form textarea, .hambeat-form select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--hambeat-line); border-radius: 13px; outline: 0; background: white; }
.hambeat-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, .hambeat-form textarea:focus, .hambeat-form select:focus { border-color: var(--hambeat-purple); box-shadow: 0 0 0 3px rgba(108,60,255,.1); }
.hambeat-form textarea { min-height: 110px; resize: vertical; }
.hambeat-divider { margin: 19px 0; display: flex; align-items: center; gap: 12px; color: var(--hambeat-muted); font-size: 12px; }
.hambeat-divider::before,.hambeat-divider::after { content:""; height:1px; flex:1; background:var(--hambeat-line); }
.hambeat-google { width: 100%; min-height: 52px; border: 1px solid var(--hambeat-line); border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; background: white; font-weight: 800; }
.google-mark { color:#4285f4; direction:ltr; }
.auth-kicker { margin-top:26px; }
.auth-helper-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.auth-helper-row label { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.auth-helper-row input[type="checkbox"] { inline-size:20px; block-size:20px; flex:0 0 20px; margin:0; accent-color:var(--hambeat-purple); }
.auth-helper-row button { border:0; color:var(--hambeat-purple); background:none; cursor:pointer; font:inherit; }
.dialog-form { margin:0; }
.hambeat-dialog { inline-size:min(520px,calc(100% - 32px)); max-inline-size:none; max-block-size:min(88dvh,760px); margin:auto; padding:0; overflow:hidden; border:1px solid var(--hambeat-line); border-radius:26px; color:var(--hambeat-ink); background:var(--hambeat-surface); box-shadow:0 28px 90px rgba(30,20,66,.24); }
.hambeat-dialog::backdrop { background:rgba(17,18,37,.58); backdrop-filter:blur(6px); }
.hambeat-dialog__surface { position:relative; max-block-size:min(88dvh,760px); margin:0; padding:32px; overflow:auto; display:grid; gap:18px; }
.hambeat-dialog__close { position:absolute; z-index:2; inset-block-start:18px; inset-inline-end:18px; inline-size:44px; block-size:44px; min-block-size:44px; padding:0; display:grid; place-items:center; border:1px solid var(--hambeat-line); border-radius:14px; color:var(--hambeat-neutral-700,#45425a); background:#f7f6fb; cursor:pointer; }
.hambeat-dialog__close:hover { color:var(--hambeat-purple); border-color:#d8d0ff; background:#f1edff; }
.hambeat-dialog__close:focus-visible { outline:3px solid rgba(108,60,255,.22); outline-offset:2px; }
.hambeat-dialog__header { padding-inline-end:58px; }
.hambeat-dialog__header :is(h2,p) { margin:0; }
.hambeat-dialog__header h2 { font-size:clamp(24px,4vw,32px); line-height:1.45; }
.hambeat-dialog__header .hambeat-subtle { margin-block-start:8px; line-height:1.85; }
.hambeat-dialog__identity { padding:14px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--hambeat-line); border-radius:16px; background:#faf9ff; }
.hambeat-dialog__identity i { inline-size:42px; block-size:42px; display:grid; place-items:center; flex:0 0 42px; border-radius:13px; color:var(--hambeat-purple); background:#eeeaff; }
.hambeat-dialog__identity span,.hambeat-dialog__identity strong { display:block; min-inline-size:0; overflow-wrap:anywhere; }
.hambeat-dialog__identity span { color:var(--hambeat-muted); font-size:12px; }
.hambeat-dialog__identity strong { margin-block-start:3px; font-size:14px; }
.hambeat-dialog__status { margin:0; padding:11px 13px; border-radius:12px; font-size:13px; line-height:1.8; background:#f6f5fb; }
.hambeat-dialog__status:empty,.hambeat-dialog__status[hidden] { display:none; }
.hambeat-dialog__actions { display:grid; gap:10px; }
.hambeat-dialog__actions :is(.hambeat-button,.hambeat-button-secondary) { inline-size:100%; }
.hambeat-dialog .hambeat-form { margin:0; }
.account-form { padding:32px; }
.hambeat-public-footer { padding:30px 20px 110px; text-align:center; }
.hambeat-public-footer a { color:var(--hambeat-muted); font-size:12px; }
.player-debug-link { display:block; margin-top:15px; color:var(--hambeat-purple); text-align:center; }

/* App shell, host and operations */
.hambeat-app { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; background: #f7f7fc; }
.hambeat-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; display: flex; flex-direction: column; color: white; background: #0e1020; }
.hambeat-sidebar .hambeat-brand { padding: 0 8px 24px; }
.hambeat-sidebar nav { display: grid; gap: 7px; }
.hambeat-sidebar nav a, .hambeat-sidebar nav button { min-height: 49px; padding: 0 14px; border: 0; border-radius: 13px; display: flex; align-items: center; gap: 12px; color: #bbbcd0; background: transparent; cursor: pointer; font-weight: 700; }
.hambeat-sidebar nav a.active, .hambeat-sidebar nav button.active { color: white; background: var(--hambeat-purple); }
.hambeat-sidebar-foot { margin-top: auto; padding: 16px; border-radius: 17px; background: #1a1b30; }
.hambeat-sidebar-foot strong { display:block; }
.hambeat-sidebar-foot small { color:#aeb0c8; }
.hambeat-main { min-width: 0; padding: 24px 30px 70px; }
.hambeat-appbar { min-height: 60px; margin-bottom: 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.hambeat-appbar-search { width:min(430px,50vw); }
.hambeat-dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.hambeat-dashboard-head h1 { margin:0; font-size:34px; }
.hambeat-panel { padding: 22px; background:white; border:1px solid var(--hambeat-line); border-radius:20px; box-shadow:0 10px 35px rgba(64,45,125,.06); }
.hambeat-panel-head { margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hambeat-panel h2,.hambeat-panel h3 { margin:0; }
.hambeat-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hambeat-grid-main { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; margin-top:16px; }
.hambeat-table-wrap { overflow:auto; }
.hambeat-ui table { width:100%; border-collapse:collapse; font-size:13px; }
.hambeat-ui th,.hambeat-ui td { padding:13px 10px; text-align:right; border-bottom:1px solid var(--hambeat-line); white-space:nowrap; }
.hambeat-ui th { color:var(--hambeat-muted); font-size:11px; }
.hambeat-health-list { display:grid; gap:10px; }
.hambeat-health { padding:13px; display:flex; align-items:center; justify-content:space-between; border:1px solid #dff0e5; border-radius:14px; background:#f6fff9; }
.hambeat-health strong { color:var(--hambeat-green); }
.hambeat-alerts { display:grid; gap:10px; }
.hambeat-alert { padding:14px; border-right:4px solid var(--hambeat-orange); border-radius:12px; background:#fff8ed; }
.hambeat-alert strong { display:block; }
.hambeat-alert small { color:var(--hambeat-muted); }
.hambeat-ui .user-event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hambeat-ui .user-event-card { overflow:hidden; border:1px solid var(--hambeat-line); border-radius:20px; background:white; box-shadow:0 10px 30px rgba(50,35,105,.06); }
.hambeat-ui .user-event-cover { height:180px; padding:14px; background:#101b2b url('./assets/covers/hambeat-event-general.webp') center/cover; }
.hambeat-ui .user-event-cover span { padding:7px 10px; color:white; background:var(--hambeat-pink); border-radius:10px; font-size:12px; font-weight:800; }
.hambeat-ui .user-event-body { padding:17px; }
.hambeat-ui .user-event-body h3 { margin:6px 0; }
.hambeat-ui .user-event-body > p { color:var(--hambeat-muted); font-size:13px; min-height:46px; }
.hambeat-ui .user-event-numbers { display:flex; gap:18px; padding:12px 0; border-top:1px solid var(--hambeat-line); border-bottom:1px solid var(--hambeat-line); }
.hambeat-ui .host-runtime { margin-top:12px; }
.host-audience-control { margin:10px 0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; color:var(--hambeat-muted); font-size:12px; font-weight:800; }
.host-audience-control select { min-height:42px; padding:0 10px; border:1px solid var(--hambeat-line); border-radius:11px; background:white; font:inherit; }
.hambeat-ui .host-track-form { display:grid; gap:8px; }
.hambeat-ui .host-track-form input { display:none; }
.hambeat-ui .host-track-form label,.hambeat-ui .host-track-form button { min-height:43px; border:1px solid var(--hambeat-line); border-radius:11px; display:grid; place-items:center; background:white; cursor:pointer; }
.hambeat-ui .host-track-form button { color:white; background:var(--hambeat-purple); }
.hambeat-ui .user-event-actions { display:flex; gap:8px; margin-top:12px; }
.hambeat-ui .user-event-actions > * { flex:1; min-height:42px; border:0; border-radius:11px; display:grid; place-items:center; background:#f1efff; color:var(--hambeat-purple); cursor:pointer; font-weight:800; }
.hambeat-ui .creator-card { padding:25px; margin:20px 0 30px; background:white; border:1px solid var(--hambeat-line); border-radius:22px; scroll-margin-top:20px; }
.hambeat-ui .creator-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.hambeat-ui .creator-heading h2 { margin:4px 0; }
.hambeat-ui .creator-form { display:block; }
.hambeat-ui .wizard-pane { min-width:0; min-height:360px; margin:0; padding:24px; border:1px solid #ece9fa; border-radius:18px; background:linear-gradient(180deg,#fff 0%,#fcfbff 100%); }
.hambeat-ui .wizard-pane legend { padding:0 12px; font-size:20px; font-weight:900; }
.hambeat-ui .wizard-pane legend span { margin-left:8px; color:var(--hambeat-pink); font-size:12px; }
.hambeat-ui .creator-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hambeat-ui .creator-form-grid .wide { grid-column:1/-1; }
.hambeat-ui .creator-form label > span,.cover-choice > span { display:block; margin-bottom:7px; color:#45425a; font-size:13px; font-weight:800; }
.hambeat-ui .creator-form label > span b { color:var(--hambeat-pink); }
.hambeat-ui .creator-form label > small { display:block; margin-top:5px; color:var(--hambeat-muted); }
.hambeat-ui .creator-form input,.hambeat-ui .creator-form textarea,.hambeat-ui .creator-form select { width:100%; min-height:50px; padding:11px 13px; border:1px solid var(--hambeat-line); border-radius:12px; outline:0; background:white; font:inherit; }
.hambeat-ui .creator-form input:focus,.hambeat-ui .creator-form textarea:focus,.hambeat-ui .creator-form select:focus { border-color:var(--hambeat-purple); box-shadow:0 0 0 3px rgba(108,60,255,.1); }
.hambeat-ui .creator-form textarea { min-height:90px; resize:vertical; }
.hambeat-ui .location-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hambeat-ui .event-location-map { grid-column:1/-1; height:330px; overflow:hidden; border:1px solid var(--hambeat-line); border-radius:16px; background:#f1eef9; }
.hambeat-ui .location-privacy-note { grid-column:1/-1; margin:0; padding:12px 14px; border-radius:12px; color:#66713b; background:#f6fae9; font-size:12px; }
.hambeat-ui .location-privacy-note i { margin-left:6px; color:#7aa600; }
.hambeat-wizard-steps { margin:22px 0 25px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hambeat-wizard-steps button { min-height:58px; padding:8px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--hambeat-muted); border:1px solid var(--hambeat-line); border-radius:13px; background:#faf9fd; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.hambeat-wizard-steps button b { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#eceaf3; }
.hambeat-wizard-steps button.active { color:var(--hambeat-purple); border-color:#cfc3ff; background:#f5f1ff; }
.hambeat-wizard-steps button.active b { color:white; background:var(--hambeat-purple); }
.hambeat-wizard-steps button.done { color:var(--hambeat-green); border-color:#caefd7; }
.hambeat-wizard-steps button.done b { color:white; background:var(--hambeat-green); }
.cover-choice > div { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cover-choice label { position:relative; overflow:hidden; display:grid; min-height:125px; border:2px solid transparent; border-radius:14px; cursor:pointer; }
.cover-choice label:has(input:checked) { border-color:var(--hambeat-purple); box-shadow:0 0 0 3px rgba(108,60,255,.09); }
.cover-choice input { position:absolute; inset:8px 8px auto auto; z-index:2; width:20px!important; min-height:20px!important; accent-color:var(--hambeat-purple); }
.cover-choice img { width:100%; height:95px; object-fit:cover; }
.cover-choice label b { padding:8px; font-size:12px; }
.switch-label { padding:13px; display:flex; align-items:center; gap:12px; border:1px solid var(--hambeat-line); border-radius:14px; background:#fafaff; cursor:pointer; }
.switch-label > input { width:22px!important; min-height:22px!important; accent-color:var(--hambeat-purple); }
.switch-label > span { margin:0!important; }
.switch-label small { display:block; margin-top:3px; color:var(--hambeat-muted); font-weight:400; }
.quick-date-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.quick-date-actions > span { color:var(--hambeat-muted); font-size:12px; }
.quick-date-actions button { min-height:36px; padding:0 13px; border:1px solid #ddd6fe; border-radius:10px; color:var(--hambeat-purple); background:#f7f4ff; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.music-step { min-height:290px; display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:stretch; }
.music-step-copy { padding:28px; border-radius:18px; background:linear-gradient(135deg,#6c3cff,#b834ed); color:white; }
.music-step-copy > i { font-size:34px; }
.music-step-copy h3 { margin:18px 0 8px; font-size:24px; }
.music-step-copy p { margin:0; color:#eee9ff; line-height:2; }
.wizard-file-picker { padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed #c9bcff; border-radius:18px; background:#fbf9ff; text-align:center; cursor:pointer; }
.wizard-file-picker input { position:absolute; width:1px!important; height:1px; min-height:0!important; opacity:0; }
.wizard-file-picker > i { margin-bottom:12px; color:var(--hambeat-purple); font-size:42px; }
.wizard-file-picker strong { color:var(--hambeat-purple); font-size:17px; overflow-wrap:anywhere; }
.wizard-file-picker small { margin-top:8px; color:var(--hambeat-muted); }
.wizard-review { padding:20px; border:1px solid #dcd3ff; border-radius:16px; background:#f9f7ff; }
.wizard-review h3 { margin:3px 0 14px; font-size:22px; }
.wizard-review > div { display:flex; flex-wrap:wrap; gap:16px; }
.wizard-review > div span { display:flex; align-items:center; gap:7px; color:#525067; font-size:13px; }
.wizard-review > small { display:block; margin-top:14px; color:var(--hambeat-purple); }
.wizard-footer { min-height:70px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wizard-footer > div { margin-right:auto; display:flex; gap:10px; }
.wizard-footer button { min-width:130px; }
.wizard-footer p[data-type="error"] { color:#b91c1c; }
.wizard-footer p[data-type="success"] { color:#15803d; }
.joined-section { padding-top:20px!important; }
.account-form { padding:32px; }
.host-operations { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.host-operations button { min-height:38px; padding:0 12px; border:1px solid var(--hambeat-line); border-radius:10px; background:white; color:var(--hambeat-purple); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.host-operations .end-event { color:#b91c1c; }
.host-operation-panel { margin-top:12px; padding:14px; border:1px solid var(--hambeat-line); border-radius:14px; background:#faf9ff; }
.invite-panel { display:grid; grid-template-columns:132px 1fr; gap:14px; align-items:center; }
.invite-panel input { width:100%; margin:8px 0; direction:ltr; }
.invite-panel button { min-height:38px; border:0; border-radius:9px; color:white; background:var(--hambeat-purple); font:inherit; font-weight:800; }
.invite-panel small { display:block; color:var(--hambeat-muted); }
.event-qr { width:132px; height:132px; padding:6px; border-radius:12px; background:white; }
.event-qr img,.event-qr canvas { width:120px!important; height:120px!important; }
.host-participant-list { margin-top:10px; display:grid; gap:7px; }
.host-participant-list > div { padding:9px 11px; display:grid; grid-template-columns:1fr auto auto; gap:10px; border-radius:9px; background:white; font-size:12px; }
.host-playlist-head strong,.host-playlist-head small{display:block}.host-playlist-head small{margin-top:3px;color:var(--hambeat-muted)}.host-playlist-list{margin-top:10px;display:grid;gap:8px}.host-playlist-list article{padding:10px;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border:1px solid var(--hambeat-line);border-radius:11px;background:white}.host-playlist-list article>i{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--hambeat-pink);background:#fff0f8}.host-playlist-list b,.host-playlist-list small{display:block}.host-playlist-list small{color:var(--hambeat-muted)}.host-playlist-list article>div{display:flex;gap:5px}.host-playlist-list button{min-height:34px;padding:0 9px;border:1px solid var(--hambeat-line);border-radius:8px;color:var(--hambeat-purple);background:white;cursor:pointer}.host-playlist-list button:disabled{opacity:.35}.host-playlist-list .activate-track{color:white;border-color:var(--hambeat-purple);background:var(--hambeat-purple)}
.hambeat-health strong.unhealthy { color:#dc2626; }
.hambeat-alert.resolved { border-color:#bbf7d0; background:#f0fdf4; }
.admin-role-select { min-height:34px; border:1px solid var(--hambeat-line); border-radius:8px; background:white; font:inherit; }
.admin-login-card { width:min(900px,100%); margin:40px auto; padding:34px; }
.admin-login-copy h1 { margin:4px 0 8px; font-size:34px; }
.admin-access-steps { margin:28px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.admin-access-steps article { min-height:110px; padding:16px; display:flex; gap:12px; border:1px solid var(--hambeat-line); border-radius:15px; background:#faf9ff; }
.admin-access-steps article > b { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:white; background:var(--hambeat-purple); }
.admin-access-steps article strong,.admin-access-steps article small { display:block; }
.admin-access-steps article small { margin-top:5px; color:var(--hambeat-muted); line-height:1.7; }
.admin-access-steps code { direction:ltr; display:inline-block; color:var(--hambeat-purple); }
.admin-login-form { max-width:690px; }
.admin-login-form > label { display:block; margin-bottom:7px; font-weight:800; }
.admin-login-form > div { display:flex; gap:10px; }
.admin-login-form input { flex:1; min-width:0; }
.admin-login-form > p { color:var(--hambeat-muted); font-size:12px; }
.admin-access-guide { margin-top:18px; padding:14px 16px; border:1px solid var(--hambeat-line); border-radius:13px; background:#fff; }
.admin-access-guide summary { color:var(--hambeat-purple); cursor:pointer; font-weight:800; }
.admin-access-guide p { margin-bottom:0; color:var(--hambeat-muted); line-height:2; font-size:13px; }
.admin-section { margin-top:18px; scroll-margin-top:16px; }
.admin-metrics { margin-top:18px; }

/* Player and event detail */
.hambeat-player-page { min-height:100vh; padding:20px; display:grid; place-items:center; color:white; background:#0d1020; }
.hambeat-player { width:min(460px,100%); overflow:hidden; border-radius:32px; background:white; color:var(--hambeat-ink); box-shadow:0 28px 80px rgba(0,0,0,.35); }
.hambeat-player-cover { position:relative; height:330px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; color:white; background:#101b2b url('./assets/covers/hambeat-event-general.webp') center/cover; }
.hambeat-player-cover::after { content:""; position:absolute; inset:0; background:rgba(12,8,24,.28); }
.hambeat-player-cover > * { position:relative; z-index:2; }
.hambeat-player-cover-top { display:flex; align-items:center; justify-content:space-between; }
.player-cover-actions { display:flex; align-items:center; gap:8px; }
.player-cover-actions .hambeat-icon-button { color:#fff; border-color:rgba(255,255,255,.32); background:rgba(18,13,38,.46); backdrop-filter:blur(10px); }
.hambeat-live { padding:7px 11px; border-radius:12px; background:var(--hambeat-pink); font-size:12px; font-weight:900; }
.hambeat-player-event h1 { margin:0; font-size:29px; }
.hambeat-player-event p { margin:5px 0 0; }
.hambeat-player-body { padding:22px; }
.hambeat-track { display:grid; grid-template-columns:60px 1fr; gap:13px; align-items:center; }
.hambeat-track img { width:60px; height:60px; border-radius:12px; object-fit:cover; }
.hambeat-track h2 { margin:0; font-size:17px; }
.hambeat-progress { height:6px; margin:22px 0 8px; overflow:hidden; border-radius:6px; background:#ecebf3; }
.hambeat-progress span { height:100%; display:block; width:38%; background:var(--hambeat-pink); }
.hambeat-time { display:flex; justify-content:space-between; color:var(--hambeat-muted); font-size:11px; direction:ltr; }
.hambeat-quality { margin:20px 0; padding:16px; border-radius:15px; background:#f6fff8; text-align:center; }
.hambeat-quality strong { display:block; color:var(--hambeat-green); font-size:18px; }
.hambeat-volume { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.hambeat-volume input { accent-color:var(--hambeat-pink); }
.hambeat-player .primary-button { width:100%; min-height:54px; margin-top:18px; border:0; border-radius:14px; color:#111; background:var(--hambeat-lime); font-weight:900; }
.hambeat-player .quality-card,.hambeat-player .event-timeline { margin-top:16px; }
.hambeat-detail { padding:35px 0 80px; }
.hambeat-detail-hero { overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; }
.hambeat-detail-media { min-height:520px; background:#251845 center/cover; }
.hambeat-detail-copy { padding:45px; display:flex; flex-direction:column; justify-content:center; }
.hambeat-detail-copy h1 { margin:8px 0 16px; font-size:48px; }
.hambeat-detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0; }
.hambeat-detail-meta div { padding:15px; display:grid; align-content:center; gap:5px; border-radius:14px; background:#f6f5fb; }
.hambeat-detail-meta small,.hambeat-detail-meta strong { display:block; }
.hambeat-detail-meta small { color:var(--hambeat-muted); font-size:10px; }
.detail-live-badge { position:absolute; inset:auto auto 24px 24px; width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:white;background:var(--hambeat-pink);font-size:20px }.hambeat-detail-media{position:relative}.detail-host-row{margin:18px 0;display:flex;align-items:center;gap:10px}.detail-host-row small,.detail-host-row strong{display:block}.detail-host-row small{color:var(--hambeat-muted);font-size:10px}.event-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.event-detail-actions>*{min-height:54px}.event-detail-actions #event-join{grid-column:1/-1}.event-detail-actions #event-favorite.active{color:var(--hambeat-pink);border-color:#ffc4e4;background:#fff3f9}
.notification-trigger{position:relative}.notification-trigger>b{position:absolute;inset:-4px -4px auto auto;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border:2px solid white;border-radius:99px;color:white;background:var(--hambeat-pink);font-size:10px}.notification-dialog{inline-size:min(560px,calc(100% - 32px))}.notification-list{display:grid;gap:9px}.notification-list>button{width:100%;padding:13px;display:grid;grid-template-columns:38px 1fr;gap:10px;border:1px solid var(--hambeat-line);border-radius:13px;background:white;text-align:right;cursor:pointer}.notification-list>button>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--hambeat-purple);background:#f1edff}.notification-list b,.notification-list small,.notification-list time{display:block}.notification-list small{margin:4px 0;color:var(--hambeat-muted)}.notification-list time{color:var(--hambeat-muted);font-size:10px}.notification-list .unread{border-color:#d5caff;background:#faf8ff}

.hambeat-live-shell { width:min(1400px,100%); min-height:calc(100vh - 40px); display:grid; grid-template-columns:minmax(270px,.8fr) minmax(390px,520px) minmax(240px,.65fr); gap:24px; align-items:center; }
.hambeat-live-side,.hambeat-live-event-list { min-height:620px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:linear-gradient(160deg,rgba(43,31,77,.92),rgba(13,16,32,.96)); box-shadow:0 25px 80px rgba(0,0,0,.28); }
.hambeat-live-side .hambeat-brand { align-self:flex-start; color:white; }.hambeat-live-side h1{margin:8px 0 12px;font-size:38px;line-height:1.35}.hambeat-live-side p:not(.hambeat-kicker){color:#c9c4db;line-height:2}
.live-process-list { display:grid; gap:10px; }.live-process-list article{padding:13px;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04)}.live-process-list article>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#aaa6bd;background:rgba(255,255,255,.06)}.live-process-list b,.live-process-list small{display:block}.live-process-list small{margin-top:3px;color:#9f9ab4;font-size:10px}.live-process-list article.active{border-color:rgba(255,45,161,.55);background:rgba(255,45,161,.08)}.live-process-list article.active>i{color:#ff2da1;background:rgba(255,45,161,.14)}.live-process-list article.done{border-color:rgba(198,255,0,.24)}.live-process-list article.done>i{color:#c6ff00;background:rgba(198,255,0,.1)}
.hambeat-live-stage { display:grid; place-items:center; }.live-mobile-label{display:none}.hambeat-live-stage .hambeat-player{box-shadow:0 28px 90px rgba(0,0,0,.48)}
.hambeat-live-event-list { min-height:470px; justify-content:center; gap:18px; text-align:center; }.hambeat-live-event-list h2{margin:0;font-size:28px}.hambeat-live-event-list .hambeat-button-secondary{color:white;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.player-route-nav { display:grid; gap:8px; }
.player-route-nav a { min-block-size:44px; padding-inline:12px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#fff; background:rgba(255,255,255,.05); font-size:12px; font-weight:900; }
.player-route-nav a:hover,.player-route-nav a:focus-visible { border-color:rgba(108,60,255,.8); background:rgba(108,60,255,.22); }
.player-route-nav i { inline-size:20px; color:var(--hambeat-lime); text-align:center; }
.player-route-nav.mobile { display:none; }
.live-mobile-label a { min-block-size:44px; display:inline-flex; align-items:center; gap:7px; color:var(--hambeat-ink); font-weight:900; }
.live-share-button { inline-size:100%; min-block-size:64px; padding:12px 14px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; border:1px solid rgba(255,45,161,.36); border-radius:16px; color:#fff; background:rgba(255,45,161,.12); text-align:start; cursor:pointer; }
.live-share-button>i { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:13px; color:#161225; background:var(--hambeat-pink); }
.live-share-button b,.live-share-button small { display:block; }
.live-share-button small { margin-block-start:3px; color:#bcb7d1; }
.live-avatar-stack { display:flex;align-items:center;justify-content:center;direction:ltr}.live-avatar-stack span{width:42px;height:42px;margin-left:-10px;display:grid;place-items:center;border:3px solid #151528;border-radius:50%;color:#6c3cff;background:#eee9ff}.live-avatar-stack b{margin-left:16px;color:#bcb7ce;font-size:11px;direction:rtl}

@media (max-width: 980px) {
  .hambeat-topbar nav { display:none; }
  .hambeat-ui .event-grid,.hambeat-feature-grid { grid-template-columns:repeat(2,1fr); }
  .hambeat-search-shell { grid-template-columns:1fr 1fr; }
  .hambeat-app { grid-template-columns:1fr; }
  .hambeat-sidebar { display:none; }
  .hambeat-main { padding:18px 18px 90px; }
  .hambeat-ui .user-event-grid { grid-template-columns:repeat(2,1fr); }
  .hambeat-grid-main { grid-template-columns:1fr; }
  .hambeat-auth { grid-template-columns:1fr; }
  .hambeat-auth-visual { min-height:380px; }
  .hambeat-mobile-nav { position:fixed; z-index:40; right:12px; bottom:12px; left:12px; min-height:66px; padding:7px 14px; display:flex; align-items:center; justify-content:space-around; background:white; border:1px solid var(--hambeat-line); border-radius:20px; box-shadow:0 16px 45px rgba(35,23,87,.2); }
  .hambeat-mobile-nav a,.hambeat-mobile-nav button:not(.create) { min-width:54px; display:grid; place-items:center; gap:2px; color:#706d87; font-size:10px; }
  .hambeat-mobile-nav i { font-size:22px; }
  .hambeat-mobile-nav .create { width:50px; height:50px; margin-top:-24px; border:0; border-radius:50%; color:#101010; background:var(--hambeat-lime); font-size:26px; cursor:pointer; }
}

@media (max-width: 640px) {
  .hambeat-container { width:min(100% - 24px,1180px); }
  .hambeat-topbar { min-height:64px; padding:0 14px; }
  .hambeat-auth-actions { min-width:96px; min-height:42px; }
  .hambeat-brand { font-size:18px; }
  .hambeat-brand img { width:36px; height:36px; }
  .hambeat-topbar .hambeat-actions .hambeat-button-secondary { display:none; }
  .hambeat-topbar .hambeat-button { min-height:42px; padding:0 14px; font-size:12px; }
  .hambeat-hero { min-height:570px; }
  .hambeat-hero-content { padding-top:72px; }
  .hambeat-hero h1 { font-size:43px; letter-spacing:-1px; }
  .hambeat-floating-note { left:20px; bottom:24px; font-size:12px; }
  .hambeat-search-shell { margin-top:-25px; grid-template-columns:1fr; }
  .hambeat-section { padding:52px 0; }
  .hambeat-section-head { align-items:start; flex-direction:column; }
  .hambeat-ui .event-grid,.hambeat-feature-grid,.hambeat-ui .user-event-grid,.hambeat-grid-2 { grid-template-columns:1fr; }
  .hambeat-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .hambeat-stat { min-height:126px; padding:16px; }
  .hambeat-stat strong { margin:6px 0; font-size:25px; }
  .hambeat-appbar { align-items:stretch; gap:8px; }
  .hambeat-appbar .hambeat-actions { flex:0 0 auto; }
  .hambeat-appbar .hambeat-button { width:96px; min-height:52px; padding:0 10px; white-space:nowrap; font-size:11px; }
  .hambeat-ui .event-grid { grid-auto-flow:column; grid-auto-columns:82vw; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .hambeat-ui .event-card { scroll-snap-align:start; }
  .hambeat-auth-visual { display:none; }
  .hambeat-auth-form-side { padding:28px 20px 90px; align-items:start; }
  .hambeat-dashboard-head { align-items:start; flex-direction:column; }
  .hambeat-dashboard-head h1 { font-size:28px; }
  .hambeat-appbar-search { width:100%; }
  .hambeat-ui .creator-card { padding:16px; border-radius:18px; }
  .hambeat-ui .creator-heading h2 { font-size:21px; }
  .hambeat-ui .creator-heading .hambeat-subtle { font-size:12px; }
  .hambeat-ui .wizard-pane { min-height:0; padding:18px 14px; }
  .hambeat-ui .wizard-pane legend { font-size:16px; }
  .hambeat-ui .creator-form-grid { grid-template-columns:1fr; }
  .hambeat-ui .creator-form-grid > * { grid-column:1!important; }
  .hambeat-ui .location-fields { grid-template-columns:1fr; }
  .hambeat-wizard-steps { overflow:auto; grid-template-columns:repeat(4,116px); padding-bottom:5px; scrollbar-width:none; }
  .hambeat-wizard-steps::-webkit-scrollbar { display:none; }
  .hambeat-wizard-steps button { min-height:52px; }
  .cover-choice > div { grid-template-columns:repeat(3,minmax(100px,1fr)); overflow:auto; padding-bottom:7px; }
  .music-step { grid-template-columns:1fr; }
  .music-step-copy { padding:20px; }
  .wizard-file-picker { min-height:185px; padding:20px; }
  .wizard-footer { align-items:stretch; flex-direction:column; }
  .wizard-footer > div { width:100%; margin:0; }
  .wizard-footer button { min-width:0; flex:1; }
  .invite-panel { grid-template-columns:1fr; }
  .hambeat-detail { padding-top:15px; }
  .hambeat-detail-hero { grid-template-columns:1fr; }
  .hambeat-detail-media { min-height:330px; }
  .hambeat-detail-copy { padding:25px; }
  .hambeat-detail-copy h1 { font-size:34px; }
  .event-detail-actions{grid-template-columns:1fr}.event-detail-page{padding-bottom:80px}
  .hambeat-player-page { padding:0; place-items:start center; background:white; }
  .hambeat-live-shell { width:100%;min-height:100vh;display:block }.hambeat-live-side,.hambeat-live-event-list{display:none}.hambeat-live-stage{display:block}.live-mobile-label{height:54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;color:var(--hambeat-ink);background:white;border-bottom:1px solid var(--hambeat-line)}
  .hambeat-player { width:100%; min-height:100vh; border-radius:0; box-shadow:none; }
  .admin-login-card { margin:10px auto; padding:20px; }
  .admin-access-steps { grid-template-columns:1fr; }
  .admin-login-form > div { flex-direction:column; }
  .admin-page .hambeat-appbar-search { display:none; }
  .admin-page .hambeat-appbar .hambeat-actions { width:100%; justify-content:space-between; flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* Reference boards 07-09: shared operational shell */
.hambeat-ui { --hambeat-cyan:#00c2ff; --hambeat-ink:#121224; --hambeat-muted:#77748e; --hambeat-line:#ececf3; }
.hambeat-ui :focus-visible { outline:3px solid rgba(108,60,255,.24); outline-offset:3px; }
.hambeat-ui .hambeat-app { grid-template-columns:228px minmax(0,1fr); background:#f8f8ff; }
.hambeat-ui .hambeat-sidebar { inset-inline-start:0; background:#080d1c; }
.hambeat-ui .hambeat-main { width:100%; max-width:1500px; margin-inline:auto; padding:18px 24px 72px; }
.hambeat-ui .hambeat-appbar { min-height:66px; padding:0 4px 14px; border-bottom:1px solid var(--hambeat-line); }
.hambeat-ui .hambeat-dashboard-head { margin:20px 0 14px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.hambeat-ui .hambeat-dashboard-head h1 { margin:2px 0 4px; font-size:clamp(28px,3vw,40px); letter-spacing:-1.5px; }
.hambeat-ui .hambeat-panel { box-shadow:0 12px 36px rgba(64,45,125,.05); }
.hambeat-ui .hambeat-stat { position:relative; min-height:138px; overflow:hidden; padding:20px; display:flex; flex-direction:column; justify-content:center; border-color:#e5e1f4; background:white; }
.hambeat-ui .hambeat-stat > i { position:absolute; inset-inline-end:16px; top:16px; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:var(--stat-color,var(--hambeat-purple)); background:var(--stat-soft,#f1ecff); font-size:20px; }
.hambeat-ui .hambeat-stat span { max-width:calc(100% - 52px); font-weight:700; }
.hambeat-ui .hambeat-stat strong { margin:12px 0 7px; color:#19172a; font-size:30px; }
.hambeat-ui .hambeat-stat small { color:var(--stat-color,var(--hambeat-green)); }
.stat-purple { --stat-color:#6c3cff; --stat-soft:#f1ecff; background:linear-gradient(145deg,#fff,#f6f2ff)!important; }
.stat-pink { --stat-color:#ff2da1; --stat-soft:#fff0f8; background:linear-gradient(145deg,#fff,#fff3f9)!important; }
.stat-blue { --stat-color:#039ee8; --stat-soft:#eaf8ff; background:linear-gradient(145deg,#fff,#effaff)!important; }
.stat-green { --stat-color:#55b91a; --stat-soft:#effbe8; background:linear-gradient(145deg,#fff,#f4fce9)!important; }
.stat-violet { --stat-color:#c135ce; --stat-soft:#f9ebfc; background:linear-gradient(145deg,#fff,#fcf2ff)!important; }
.stat-orange { --stat-color:#ff8a00; --stat-soft:#fff2e5; background:linear-gradient(145deg,#fff,#fff7ed)!important; }
.host-stat-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.admin-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }

/* Host dashboard */
.host-appbar-brand,.host-user-cluster,.host-user-button { display:flex; align-items:center; gap:10px; }
.host-appbar-brand .hambeat-brand { display:none; }
.host-user-button { padding:5px 10px; border:0; border-radius:14px; background:white; color:var(--hambeat-ink); cursor:pointer; text-align:right; }
.host-user-button span:last-child { display:grid; }
.host-user-button small { color:var(--hambeat-muted); font-size:11px; }
.host-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--hambeat-purple); background:#eee9ff; }
.host-analytics-grid { margin-top:16px; display:grid; grid-template-columns:.85fr 1.35fr .72fr; gap:16px; }
.host-quality-panel,.host-trend-panel,.host-invite-panel { min-height:306px; }
.host-donut-row { min-height:210px; display:grid; grid-template-columns:155px 1fr; align-items:center; gap:22px; }
.host-quality-donut { --excellent:0deg; width:150px; aspect-ratio:1; display:grid; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(circle at center,#fff 0 52%,transparent 53%),conic-gradient(#48c840 0 var(--excellent),#35a7ff var(--excellent) calc(var(--excellent) + 25deg),#ff9b26 0 calc(var(--excellent) + 50deg),#ff2da1 0); box-shadow:inset 0 0 0 1px #eef0f4; }
.host-quality-donut strong,.host-quality-donut small { display:block; text-align:center; }
.host-quality-donut strong { font-size:28px; }
.host-quality-donut small { color:var(--hambeat-muted); font-size:11px; }
.host-quality-legend { padding:0; display:grid; gap:12px; list-style:none; color:var(--hambeat-muted); font-size:12px; }
.host-quality-legend li { display:grid; grid-template-columns:10px 1fr auto; gap:7px; align-items:center; }
.host-quality-legend i { width:8px; height:8px; border-radius:50%; background:#bbb; }.host-quality-legend i.excellent{background:#48c840}.host-quality-legend i.good{background:#35a7ff}.host-quality-legend i.warning{background:#ff9b26}.host-quality-legend i.bad{background:#ff2da1}
.host-quality-legend b { color:var(--hambeat-ink); }
.host-event-overview { display:grid; gap:17px; }
.host-event-overview article { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,2fr) auto; gap:14px; align-items:center; }
.host-event-overview strong,.host-event-overview small { display:block; }.host-event-overview small { color:var(--hambeat-muted); font-size:11px; }
.host-event-overview article > span { height:9px; overflow:hidden; border-radius:9px; background:#edf0f3; }.host-event-overview article > span i { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#68d13e,#28b440); }
.host-event-overview article > b { font-size:12px; }
.host-analytics-empty { min-height:210px; display:grid; place-items:center; align-content:center; gap:6px; color:var(--hambeat-muted); text-align:center; }.host-analytics-empty i { color:var(--hambeat-purple); font-size:34px; }.host-analytics-empty strong { color:var(--hambeat-ink); }
.host-primary-qr { width:168px; height:168px; margin:4px auto 14px; padding:6px; display:grid; place-items:center; border:1px solid var(--hambeat-line); border-radius:16px; background:white; }.host-primary-qr canvas,.host-primary-qr img{width:156px!important;height:156px!important}.host-primary-qr>i{color:#c8c5d1;font-size:80px}
.host-invite-panel p { min-height:40px; margin:0; text-align:center; font-size:11px; }
.host-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.host-share-actions button { min-height:42px; border:1px solid #ded7ff; border-radius:11px; color:var(--hambeat-purple); background:#faf8ff; cursor:pointer; font-weight:800; }.host-share-actions button:disabled{color:#aaa;background:#f5f5f7;border-color:#eee}
.host-live-table-panel { margin-top:16px; }
.host-quick-actions { margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.host-quick-actions button { min-height:82px; padding:14px; display:flex; align-items:center; gap:12px; border:1px solid var(--hambeat-line); border-radius:16px; color:var(--hambeat-ink); background:white; cursor:pointer; text-align:right; }
.host-quick-actions button > i { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--hambeat-purple);background:#f1edff;font-size:18px}.host-quick-actions button:nth-child(2)>i{color:#ff2da1;background:#fff0f8}.host-quick-actions button:nth-child(3)>i{color:#078dc7;background:#ebf9ff}.host-quick-actions button:nth-child(4)>i{color:#eb7900;background:#fff4e9}
.host-quick-actions b,.host-quick-actions small { display:block; }.host-quick-actions small { margin-top:3px;color:var(--hambeat-muted);font-size:10px; }

/* Super admin board */
.admin-page { background:#f8f8ff!important; color:var(--hambeat-ink)!important; }
.admin-page .hambeat-sidebar { color:white; }
.admin-page .hambeat-main { color:var(--hambeat-ink); }
.admin-page .hambeat-button-secondary { border-color:#dedbe9; color:#38344d; background:white; }
.admin-page .hambeat-subtle { color:var(--hambeat-muted); }
.admin-monitor-grid { display:grid; grid-template-columns:.9fr 1.15fr .9fr; gap:16px; }
.admin-monitor-grid > * { min-height:280px; }
.admin-page .hambeat-health-list { gap:8px; }
.admin-page .hambeat-health { min-height:51px; grid-template-columns:30px 1fr auto 64px; display:grid; gap:8px; border-color:#d9f0e1; color:var(--hambeat-ink); background:#f7fff9; }
.admin-page .hambeat-health > i { color:var(--hambeat-green); }.admin-page .hambeat-health strong { font-size:11px; }.service-spark { color:#2bbf65; direction:ltr; letter-spacing:-2px; }
.admin-activity-map { position:relative; min-height:160px; overflow:hidden; border-radius:15px; background:linear-gradient(150deg,#f5f3ff,#fcfbff); }
.admin-activity-map::before { content:""; position:absolute; inset:26px; opacity:.45; background:radial-gradient(ellipse at 25% 42%,#d8d4e9 0 18%,transparent 19%),radial-gradient(ellipse at 48% 50%,#d8d4e9 0 13%,transparent 14%),radial-gradient(ellipse at 68% 37%,#d8d4e9 0 21%,transparent 22%),radial-gradient(ellipse at 77% 67%,#d8d4e9 0 10%,transparent 11%); }
.admin-activity-map .point { position:absolute; z-index:2; width:10px;height:10px;border-radius:50%;background:#ff2da1;box-shadow:0 0 0 8px rgba(255,45,161,.12)}.admin-activity-map .p1{inset:35% 20% auto auto}.admin-activity-map .p2{inset:62% 32% auto auto}.admin-activity-map .p3{inset:42% 48% auto auto}.admin-activity-map .p4{inset:68% 66% auto auto}.admin-activity-map .p5{inset:30% 78% auto auto}
.activity-scale { margin-top:10px; display:grid; grid-template-columns:auto 1fr auto;align-items:center;gap:9px;color:var(--hambeat-muted);font-size:10px}.activity-scale i{height:6px;border-radius:9px;background:linear-gradient(90deg,#eee9ff,#ff2da1)}
.admin-alert-panel .hambeat-alerts { max-height:215px; overflow:auto; }.admin-page .hambeat-alert { border-right-width:4px; color:var(--hambeat-ink); }
.admin-page .hambeat-grid-main { grid-template-columns:1.3fr .7fr; }
.admin-page .metric-pairs { margin:14px 0; }.admin-page .metric-pairs div { color:var(--hambeat-ink); background:#f7f6fb; }.admin-page .metric-pairs span { color:var(--hambeat-muted); }.admin-page .metric-pairs strong { color:var(--hambeat-ink); }
.admin-page .quality-bars > div { grid-template-columns:150px 1fr 25px;color:var(--hambeat-muted);font-size:11px}.admin-page .quality-bars i{background:#eeeef5}.admin-page .quality-bars em{color:var(--hambeat-ink)}
.admin-summary-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.admin-summary-cards div{min-height:92px;padding:14px;border:1px solid var(--hambeat-line);border-radius:14px;background:#fafaff}.admin-summary-cards span,.admin-summary-cards strong{display:block}.admin-summary-cards span{color:var(--hambeat-muted);font-size:11px}.admin-summary-cards strong{margin-top:10px;color:var(--hambeat-purple);font-size:17px}
.admin-page .event-form { border-color:var(--hambeat-line); background:#fafaff; }.admin-page .event-form label { color:var(--hambeat-muted); }.admin-page .event-form input:not([type=checkbox]),.admin-page .event-form select,.admin-page .event-form textarea,.admin-page .clients-panel input[type=search],.admin-page .track-activation select,.admin-page .event-status-select,.admin-page .event-audience-select,.admin-page .admin-role-select{border:1px solid var(--hambeat-line);color:var(--hambeat-ink);background:white}
.admin-page .admin-event-row { border-top-color:var(--hambeat-line); }.admin-page .event-row-main small,.admin-page .event-live-numbers{color:var(--hambeat-muted)}.admin-page .event-live-numbers b{color:var(--hambeat-ink)}
.admin-page .clients-panel td { border-bottom-color:var(--hambeat-line); }.admin-page .clients-panel th,.admin-page .clients-panel td small{color:var(--hambeat-muted)}
.admin-page .client-state,.admin-page .sync-chip { color:var(--hambeat-green);background:#eefbf2}.admin-page .sync-chip.warning{color:#c76a00;background:#fff6e8}.admin-page .sync-chip.bad{color:#d83252;background:#fff0f3}.admin-page .sync-chip.unknown{color:var(--hambeat-muted);background:#f2f2f6}
.admin-page .health-pill.healthy { color:var(--hambeat-green); }.admin-page .health-pill.unhealthy { color:var(--hambeat-red); }

@media (max-width:1200px) {
  .host-stat-grid { grid-template-columns:repeat(3,1fr); }
  .host-analytics-grid,.admin-monitor-grid { grid-template-columns:1fr 1fr; }
  .host-invite-panel,.admin-alert-panel { grid-column:1/-1; }
}
@media (max-width:980px) {
  .hambeat-ui .hambeat-app { grid-template-columns:1fr; }
  .host-appbar-brand .hambeat-brand { display:flex; }
  .host-user-button span:last-child { display:none; }
  .host-analytics-grid { grid-template-columns:1fr 1fr; }.host-invite-panel{grid-column:1/-1}.host-quick-actions{grid-template-columns:1fr 1fr}
}
@media (max-width:640px) {
  .hambeat-ui .hambeat-main { padding:12px 12px 96px; }
  .host-appbar .hambeat-appbar-search { display:none; }
  .host-dashboard-title { align-items:start!important; }.host-dashboard-title .hambeat-button{width:auto;min-width:132px}
  .host-stat-grid,.admin-stat-grid { grid-template-columns:1fr; }
  .hambeat-ui .hambeat-stat { min-height:104px; padding:16px; }.hambeat-ui .hambeat-stat strong{font-size:27px}.hambeat-ui .hambeat-stat>i{width:38px;height:38px}
  .host-analytics-grid,.admin-monitor-grid,.admin-page .hambeat-grid-main { grid-template-columns:1fr; }.host-invite-panel,.admin-alert-panel{grid-column:auto}
  .host-donut-row { grid-template-columns:120px 1fr; }.host-quality-donut{width:120px}.host-quality-legend{font-size:10px}.host-event-overview article{grid-template-columns:1fr}.host-quick-actions{grid-template-columns:1fr 1fr}.host-quick-actions button{min-height:92px;align-items:flex-start}.host-quick-actions button>i{flex:0 0 auto}
  .admin-page .hambeat-appbar .hambeat-actions a,.admin-page #last-update { display:none; }.admin-page .quality-bars>div{grid-template-columns:115px 1fr 20px}.admin-summary-cards{grid-template-columns:1fr 1fr}
}

/* Executable design-system reference */
.design-system-page{min-height:100vh;background:#f8f8ff}.design-system-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:52px 0 90px}.design-system-title{margin-bottom:28px}.design-system-title h1{margin:4px 0 8px;font-size:clamp(34px,5vw,58px);letter-spacing:-2px}.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.design-grid>.wide{grid-column:1/-1}.token-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.token-grid>div{display:grid;gap:6px}.token-grid i{height:72px;border-radius:14px;background:var(--token)}.token-grid b{font-size:12px}.token-grid code{color:var(--hambeat-muted);font-size:10px}.type-samples h2{margin:4px 0;font-size:28px}.type-samples h3{font-size:20px}.type-samples p,.type-samples small{color:var(--hambeat-muted)}.component-stack{display:grid;gap:12px}.component-stack>*{min-height:48px}.badge-row{display:flex;flex-wrap:wrap;gap:8px}.demo-badge{padding:6px 11px;border-radius:9px;font-size:11px;font-weight:800}.demo-badge.pink{color:#fff;background:#ff2da1}.demo-badge.blue{color:#fff;background:#00a8e8}.demo-badge.green{color:#198754;background:#daf7e6}.demo-badge.orange{color:#a54f00;background:#fff0da}.design-label{display:grid;gap:6px;color:var(--hambeat-muted);font-size:12px}.design-label input,.design-label select{min-height:48px;padding:0 12px;border:1px solid var(--hambeat-line);border-radius:12px;background:white}.design-range{accent-color:var(--hambeat-purple)}.demo-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.demo-stat-row>div{min-height:150px;padding:18px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--hambeat-line);border-radius:18px}.demo-stat-row span,.demo-stat-row strong,.demo-stat-row small{display:block}.demo-stat-row strong{margin:12px 0;font-size:24px}.demo-stat-row small{color:var(--hambeat-muted)}.design-grid .user-empty>i{color:var(--hambeat-purple);font-size:36px}.design-grid .user-empty .hambeat-button-secondary{margin-top:8px}
@media(max-width:760px){.design-system-page .hambeat-topbar nav{display:none}.design-grid{grid-template-columns:1fr}.design-grid>.wide{grid-column:auto}.token-grid{grid-template-columns:repeat(2,1fr)}.demo-stat-row{grid-template-columns:1fr 1fr}}

/* Full account profile */
.profile-page{min-height:100vh;background:#f8f8ff}.profile-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:42px 0 100px}.profile-hero{min-height:190px;padding:28px;display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:center;background:linear-gradient(135deg,#fff 55%,#f2edff)}.profile-avatar{width:104px;height:104px;display:grid;place-items:center;border:8px solid white;border-radius:50%;color:var(--hambeat-purple);background:#eae3ff;font-size:38px;box-shadow:0 12px 34px rgba(108,60,255,.15)}.profile-hero h1{margin:3px 0;font-size:36px}.profile-stat-grid{margin:16px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.profile-stat-grid article{min-height:130px;padding:18px;position:relative;border:1px solid var(--hambeat-line);border-radius:18px;background:white}.profile-stat-grid i{position:absolute;inset:16px auto auto 16px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--hambeat-purple);background:#f0ebff}.profile-stat-grid span,.profile-stat-grid strong{display:block}.profile-stat-grid span{color:var(--hambeat-muted);font-size:12px}.profile-stat-grid strong{margin-top:20px;font-size:25px}.profile-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.profile-link-list{display:grid}.profile-link-list a{min-height:70px;padding:10px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;border-bottom:1px solid var(--hambeat-line)}.profile-link-list a>i:first-child{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--hambeat-purple);background:#f2edff}.profile-link-list b,.profile-link-list small{display:block}.profile-link-list small{margin-top:3px;color:var(--hambeat-muted)}.profile-security{display:flex;flex-direction:column}.account-facts{display:grid;gap:8px}.account-facts div{padding:12px;display:flex;justify-content:space-between;gap:10px;border-radius:11px;background:#f8f7fb}.account-facts span{color:var(--hambeat-muted);font-size:11px}.profile-security>.hambeat-button-secondary{margin-top:10px}.profile-favorites{margin-top:16px}.profile-favorite-card{overflow:hidden;border:1px solid var(--hambeat-line);border-radius:18px;background:white}.profile-favorite-card>div{height:150px;padding:12px;background:center/cover}.profile-favorite-card>div span{padding:6px 9px;border-radius:9px;color:white;background:var(--hambeat-pink);font-size:10px}.profile-favorite-card section{padding:14px}.profile-favorite-card small{color:var(--hambeat-muted)}.profile-favorite-card h3{margin:7px 0}.profile-favorite-card a{color:var(--hambeat-purple);font-weight:800}
@media(max-width:760px){.profile-page .hambeat-topbar nav{display:none}.profile-page .hambeat-topbar>#profile-logout{display:none}.profile-shell{width:min(100% - 24px,1120px);padding-top:18px}.profile-hero{grid-template-columns:74px 1fr;padding:18px}.profile-avatar{width:70px;height:70px;border-width:5px;font-size:25px}.profile-hero h1{font-size:24px}.profile-hero>.hambeat-button{grid-column:1/-1}.profile-stat-grid{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}.profile-favorites{margin-bottom:20px}}

/* Communication, history and support */
.event-chat{display:grid;gap:10px;min-height:0}.event-chat-head{display:flex;align-items:center;justify-content:space-between}.event-chat-head h3{margin:0;font-size:16px}.event-chat-head button{width:34px;height:34px;border:1px solid var(--hambeat-line);border-radius:12px;background:#fff;color:var(--hambeat-purple)}.event-chat-list{display:grid;align-content:start;gap:8px;max-height:280px;overflow:auto;padding:4px}.event-chat-message{padding:10px 12px;border-radius:14px 14px 4px 14px;background:#f4f1ff}.event-chat-message.mine{border-radius:14px 14px 14px 4px;background:#fff0f8}.event-chat-message div{display:flex;justify-content:space-between;gap:10px;font-size:11px}.event-chat-message time{color:var(--hambeat-muted)}.event-chat-message p{margin:5px 0 0;font-size:13px;line-height:1.7}.event-chat form{display:grid;grid-template-columns:1fr 42px;gap:7px}.event-chat input{min-width:0;padding:10px 12px;border:1px solid var(--hambeat-line);border-radius:13px;font:inherit}.event-chat form button{border:0;border-radius:13px;color:#fff;background:var(--hambeat-pink)}.event-chat-note{margin:0;font-size:11px}
.event-share-dialog { inline-size:min(480px,calc(100% - 32px)); text-align:center; }
.event-share-dialog .hambeat-dialog__header { padding-inline:58px; }
.event-share-dialog h2 { font-size:26px; }
.event-share-qr { inline-size:244px; min-block-size:244px; margin:20px auto 16px; padding:11px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--hambeat-line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(48,34,99,.10); }
.event-share-qr :is(canvas,img) { max-inline-size:100%; block-size:auto!important; border-radius:8px; }
.event-share-link { display:grid; gap:7px; text-align:start; }
.event-share-link span { color:var(--hambeat-neutral-700); font-size:12px; font-weight:900; }
.event-share-link output { min-block-size:48px; padding:13px; overflow:auto; border:1px solid var(--hambeat-line); border-radius:13px; color:var(--hambeat-purple); background:#f7f5ff; font-size:11px; white-space:nowrap; }
.event-share-actions { margin-block-start:14px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; }
.event-share-actions button { min-inline-size:0; padding-inline:10px; }
#event-share-message { min-block-size:22px; margin:10px 0 0; color:var(--hambeat-success); font-size:12px; font-weight:800; }
.public-event-share { margin-block-start:22px; padding:24px 28px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; align-items:center; }
.public-event-share h2 { margin:5px 0 8px; font-size:25px; }
.public-event-share p { max-inline-size:680px; margin:0 0 14px; color:var(--hambeat-muted); line-height:1.9; }
.public-event-share output { min-block-size:48px; padding:13px; display:block; overflow:auto; border:1px solid var(--hambeat-line); border-radius:13px; color:var(--hambeat-purple); background:#f7f5ff; font-size:12px; white-space:nowrap; }
.public-event-share>div:first-child>div { margin-block-start:12px; display:flex; flex-wrap:wrap; gap:8px; }
.public-event-share #event-detail-share-message { min-block-size:22px; margin:10px 0 0; color:var(--hambeat-success); font-weight:800; }
.public-event-share .event-share-qr { margin:0; }
.profile-support{margin-top:18px}.support-ticket-list,.admin-support-list{display:grid;gap:10px}.support-ticket{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--hambeat-line);border-radius:16px}.support-ticket strong,.support-ticket small{display:block}.support-ticket small{margin-top:5px;color:var(--hambeat-muted)}.support-ticket>span{padding:6px 10px;border-radius:999px;white-space:nowrap;color:#9c6200;background:#fff5dd}.support-ticket[data-status=resolved]>span,.support-ticket[data-status=closed]>span{color:#167548;background:#e8faef}.profile-page textarea{min-height:130px;resize:vertical}
.admin-history{margin-block:18px}.admin-history-chart{height:190px;position:relative;overflow:hidden;border:1px solid var(--hambeat-line);border-radius:18px;background:linear-gradient(#fbfbff,#fff)}.admin-history-chart .history-grid{position:absolute;inset:0;opacity:.7;background-image:linear-gradient(#ececf3 1px,transparent 1px),linear-gradient(90deg,#ececf3 1px,transparent 1px);background-size:100% 25%,10% 100%}.admin-history-chart svg{position:relative;width:100%;height:100%;padding:14px;overflow:visible}.admin-history-chart polyline{fill:none;stroke:var(--hambeat-pink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 7px rgba(255,45,161,.24))}.history-legend{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:10px;color:var(--hambeat-muted);font-size:12px}.history-legend span{display:flex;align-items:center;gap:6px}.history-legend i{width:24px;height:4px;border-radius:99px;background:var(--hambeat-pink)}
.admin-support-ticket{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:16px;border:1px solid var(--hambeat-line);border-radius:18px}.admin-support-ticket strong,.admin-support-ticket small{display:block}.admin-support-ticket small{margin-top:5px;color:var(--hambeat-muted)}.admin-support-ticket p{margin:8px 0 0;color:#555366}.support-priority{display:inline-block;margin-bottom:7px;padding:4px 8px;border-radius:999px;color:#c51d70;background:#fff2f7;font-size:11px}.support-actions{display:flex;gap:7px;align-items:center}.support-actions select{padding:9px;border:1px solid var(--hambeat-line);border-radius:10px;background:#fff;font:inherit}
@media(max-width:740px){.admin-support-ticket{grid-template-columns:1fr}.support-actions{flex-wrap:wrap}.history-legend{align-items:flex-start;flex-direction:column}.support-ticket{align-items:flex-start}}

/* --------------------------------------------------------------------------
   HamBeat Design System v11 — mandatory shared control and responsive contract
   Source: docs/design-references/09-design-system.png
   -------------------------------------------------------------------------- */
.hambeat-ui {
  --hambeat-purple:#6c3cff;
  --hambeat-pink:#ff2da1;
  --hambeat-cyan:#00c2ff;
  --hambeat-lime:#c6ff00;
  --hambeat-orange:#ff8a00;
  --hambeat-ink:#121224;
  --hambeat-muted:#77748e;
  --hambeat-line:#ececf3;
  --hambeat-canvas:#f8f8ff;
  --hambeat-surface:#fff;
  --hambeat-control-sm:44px;
  --hambeat-control-md:48px;
  --hambeat-control-lg:54px;
  --hambeat-radius-control:13px;
  --hambeat-radius-card:20px;
  --hambeat-focus:0 0 0 4px rgba(108,60,255,.14);
  --hambeat-shadow-card:0 12px 36px rgba(64,45,125,.07);
  font-size:16px;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.hambeat-ui :where(button,a,input,select,textarea) { -webkit-tap-highlight-color:transparent; }
.hambeat-ui :where(button,a[class*="button"]) { max-inline-size:100%; }
.hambeat-ui :where(button,.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button) {
  min-inline-size:0;
  min-block-size:var(--hambeat-control-sm);
  line-height:1.45;
}
.hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button) {
  padding-inline:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--hambeat-radius-control);
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.hambeat-ui :where(.hambeat-button,.primary-button) {
  border:1px solid transparent;
  color:#fff;
  background:var(--hambeat-pink);
  box-shadow:0 10px 24px rgba(255,45,161,.2);
}
.hambeat-ui :where(.hambeat-button-secondary,.secondary-button,.compact-button) {
  border:1px solid #dcd7ff;
  color:var(--hambeat-purple);
  background:#fff;
  box-shadow:none;
}
.hambeat-ui :where(.hambeat-button,.primary-button,.hambeat-button-secondary,.secondary-button,.compact-button):hover:not(:disabled) { transform:translateY(-1px); }
.hambeat-ui :where(button,a,input,select,textarea):focus-visible { outline:0; box-shadow:var(--hambeat-focus); }
.hambeat-ui :where(button,.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button):disabled,
.hambeat-ui :where(button,.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button)[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.hambeat-ui :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea) {
  min-inline-size:0;
  min-block-size:var(--hambeat-control-md);
  padding:10px 13px;
  border:1px solid var(--hambeat-line);
  border-radius:12px;
  color:var(--hambeat-ink);
  background:#fff;
  outline:0;
}
.hambeat-ui :where(input,select,textarea)::placeholder { color:#a3a0b3; opacity:1; }
.hambeat-ui :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea):focus { border-color:var(--hambeat-purple); box-shadow:var(--hambeat-focus); }
.hambeat-ui :where(input[type="checkbox"],input[type="radio"]) { inline-size:20px; block-size:20px; accent-color:var(--hambeat-purple); }
.hambeat-ui :where(label) { min-inline-size:0; }
.hambeat-ui :where(.hambeat-card,.hambeat-panel) { border-radius:var(--hambeat-radius-card); box-shadow:var(--hambeat-shadow-card); }
.hambeat-ui :where(.hambeat-panel-head,.hambeat-section-head,.hambeat-dashboard-head) > * { min-inline-size:0; }
.hambeat-ui :where(.hambeat-panel-head,.hambeat-section-head) h2 { line-height:1.35; }
.hambeat-ui :where(.hambeat-table-wrap,.table-wrap) { inline-size:100%; max-inline-size:100%; overflow:auto; overscroll-behavior-inline:contain; scrollbar-gutter:stable; }
.hambeat-ui :where(table) { min-inline-size:680px; }
.hambeat-ui :where(th,td) { vertical-align:middle; }

/* Legacy operational controls are aliases of the shared component family. */
.admin-page :where(.event-status-select,.event-audience-select,.admin-role-select),
.admin-page :where(.clients-panel input[type="search"],.track-activation select) { min-block-size:var(--hambeat-control-sm); border-radius:11px; }
.admin-page :where(.event-row-actions,.track-activation,.support-actions) { min-inline-size:0; flex-wrap:wrap; }
.access-builder{margin:4px 0;padding:18px;border:1px solid var(--hambeat-line);border-radius:18px;background:#fff}.access-builder legend{padding-inline:8px;font-weight:900;color:var(--hambeat-ink)}.access-builder>p{margin:0 0 14px;color:var(--hambeat-muted);line-height:1.8}.access-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.access-methods label{min-height:52px;padding:10px 12px;display:flex!important;flex-direction:row!important;align-items:center;gap:9px;border:1px solid var(--hambeat-line);border-radius:14px;background:#fafaff;color:var(--hambeat-ink)!important;font-weight:800}.access-methods input{accent-color:var(--hambeat-purple)}
.oauth-settings-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:24px;align-items:start}.oauth-callback{display:grid!important;grid-template-columns:1fr auto;gap:8px}.oauth-callback span{grid-column:1/-1}.oauth-callback code{min-height:48px;padding:13px;border:1px solid var(--hambeat-line);border-radius:12px;overflow:auto;background:#f7f6ff;color:var(--hambeat-purple);font-size:12px}.google-setup-guide{margin:0;padding:0;display:grid;gap:10px;list-style:none}.google-setup-guide li{padding:14px;display:flex;gap:12px;border:1px solid var(--hambeat-line);border-radius:16px;background:linear-gradient(135deg,#fff,#faf9ff)}.google-setup-guide li>b{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--hambeat-purple);color:#fff}.google-setup-guide strong,.google-setup-guide small{display:block}.google-setup-guide small{margin-top:5px;color:var(--hambeat-muted);line-height:1.75}.event-access-code{margin:16px 0;padding:14px;border:1px solid #d9ceff;border-radius:16px;background:#faf8ff}.event-access-code label,.event-access-code small{display:block}.event-access-code label{margin-bottom:8px;font-weight:900}.event-access-code input{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--hambeat-line);border-radius:13px;background:#fff;font:inherit}.event-access-code small{margin-top:7px;color:var(--hambeat-muted)}.admin-qr-dialog{inline-size:min(430px,calc(100% - 32px));text-align:center}.admin-qr-dialog #admin-qr-code{width:240px;min-height:240px;margin:0 auto;padding:10px;display:grid;place-items:center;border:1px solid var(--hambeat-line);border-radius:18px;background:#fff}.admin-qr-dialog code{display:block;padding:10px;overflow:auto;border-radius:10px;background:#f5f3ff;color:var(--hambeat-purple)}
.admin-page :where(.event-row-actions .secondary-button,.track-activation .secondary-button,.account-action,.open-player) { min-block-size:var(--hambeat-control-sm); padding-inline:12px; font-size:12px; }
.admin-page .track-activation { display:grid; grid-template-columns:minmax(140px,1fr) auto; gap:8px; }
.admin-page .track-activation select { min-inline-size:0; inline-size:100%; }
.admin-page .admin-upload { margin-block-end:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:stretch; }
.admin-page .admin-upload>p { grid-column:1/-1; margin:0; }
.admin-page .admin-upload .file-picker { min-block-size:var(--hambeat-control-md); display:flex; align-items:center; }
.admin-page .admin-upload .file-picker { min-block-size:92px; padding:16px; display:grid; grid-template-columns:44px 1fr; gap:4px 12px; align-content:center; border:1px dashed #cfc6f1; border-radius:16px; background:#faf8ff; cursor:pointer; }
.admin-page .admin-upload .file-picker input { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; opacity:0; }
.admin-page .admin-upload .file-picker i { grid-row:1/3; inline-size:44px; block-size:44px; display:grid; place-items:center; border-radius:13px; color:var(--hambeat-purple); background:#eee9ff; font-size:20px; }
.admin-page .admin-upload .file-picker span { color:var(--hambeat-ink); font-weight:900; }
.admin-page .admin-upload .file-picker small { color:var(--hambeat-muted); }
.admin-user-identity { min-inline-size:220px; }
.admin-user-identity strong,.admin-user-identity small { display:block; }
.admin-user-identity strong { color:var(--hambeat-ink); }
.admin-user-identity small { margin-block-start:5px; max-inline-size:260px; overflow:hidden; color:var(--hambeat-muted); font-size:11px; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.host-operations button,.invite-panel button,.host-playlist-list button,.quick-date-actions button,.host-share-actions button { min-block-size:var(--hambeat-control-sm); }
.event-chat-head button,.event-chat form button { min-inline-size:44px; min-block-size:44px; }
.host-quick-actions button { white-space:normal; }

/* Small screen layouts use stacked data cards instead of desktop tables. */
@media (max-width:760px) {
  .oauth-settings-grid,.access-methods{grid-template-columns:1fr}.oauth-callback{grid-template-columns:1fr}.oauth-callback code{grid-column:1}.oauth-callback button{width:100%}
  .hambeat-ui { font-size:15px; }
  .hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button) { min-block-size:48px; padding-inline:14px; }
  .hambeat-ui :where(.hambeat-panel-head,.hambeat-section-head) { align-items:flex-start; }
  .hambeat-ui :where(.hambeat-panel-head) { flex-wrap:wrap; }
  .hambeat-ui :where(.hambeat-panel-head) > :where(input,select,.hambeat-button,.hambeat-button-secondary) { inline-size:100%; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) { overflow:visible; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) table { min-inline-size:0; display:block; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) thead { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) tbody { display:grid; gap:10px; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) tr { min-inline-size:0; padding:10px 12px; display:grid; gap:0; border:1px solid var(--hambeat-line); border-radius:15px; background:#fff; box-shadow:0 7px 22px rgba(64,45,125,.04); }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) td { min-inline-size:0; padding:9px 0; display:grid; grid-template-columns:minmax(92px,.42fr) minmax(0,1fr); gap:10px; align-items:center; border-block-end:1px solid #f1f0f6; white-space:normal; overflow-wrap:anywhere; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) td:last-child { border-block-end:0; }
  .hambeat-ui :where(.hambeat-table-wrap,.table-wrap) td[colspan] { display:block; text-align:center; }
  .host-live-table-panel td:nth-child(1)::before { content:"شرکت‌کننده"; }
  .host-live-table-panel td:nth-child(2)::before { content:"وضعیت"; }
  .host-live-table-panel td:nth-child(3)::before { content:"دستگاه"; }
  .host-live-table-panel td:nth-child(4)::before { content:"رفت‌وبرگشت"; }
  .host-live-table-panel td:nth-child(5)::before { content:"هم‌زمانی"; }
  .host-live-table-panel td:nth-child(6)::before { content:"آخرین حضور"; }
  #reports td:nth-child(1)::before { content:"کاربر یا دستگاه"; }
  #reports td:nth-child(2)::before { content:"رویداد موسیقی"; }
  #reports td:nth-child(3)::before { content:"وضعیت"; }
  #reports td:nth-child(4)::before { content:"رفت‌وبرگشت"; }
  #reports td:nth-child(5)::before { content:"نوسان شبکه"; }
  #reports td:nth-child(6)::before { content:"تأخیر صدا"; }
  #reports td:nth-child(7)::before { content:"خطای هم‌زمانی"; }
  #reports td:nth-child(8)::before { content:"آخرین حضور"; }
  #users td:nth-child(1)::before { content:"کاربر"; }
  #users td:nth-child(2)::before { content:"نقش"; }
  #users td:nth-child(3)::before { content:"روش ورود"; }
  #users td:nth-child(4)::before { content:"تأیید رایانامه"; }
  #users td:nth-child(5)::before { content:"وضعیت"; }
  #users td:nth-child(6)::before { content:"عضویت"; }
  #users td:nth-child(7)::before { content:"عملیات"; }
  .host-live-table-panel td::before,#reports td::before,#users td::before { color:var(--hambeat-muted); font-size:11px; font-weight:700; }
  .admin-page .admin-event-row { grid-template-columns:1fr; align-items:stretch; }
  .admin-page .event-row-actions { padding:0; display:grid; grid-template-columns:1fr 1fr; }
  .admin-page .event-row-actions > * { inline-size:100%; }
  .admin-page .track-activation { grid-template-columns:1fr; }
  .admin-page .track-activation .secondary-button { inline-size:100%; }
  .admin-page .admin-upload { grid-template-columns:1fr; }
  .admin-page .admin-upload .hambeat-button { inline-size:100%; }
  .support-actions { align-items:stretch; flex-direction:column; }
  .support-actions > * { inline-size:100%; }
}

@media (min-width:641px) and (max-width:1180px) {
  .hambeat-player-page { padding:16px; }
  .hambeat-live-shell { grid-template-columns:minmax(240px,.8fr) minmax(390px,480px); gap:16px; }
  .hambeat-live-event-list { display:none; }
}

@media (min-width:761px) and (max-width:1200px) {
  .admin-page :where(#reports,#users) .hambeat-table-wrap { overflow-x:auto; }
  .admin-page :where(#reports,#users) table { min-inline-size:900px; }
  .admin-page :where(#reports,#users) .account-action { position:static; }
  .admin-page #users th:last-child,.admin-page #users td:last-child { position:sticky; left:0; z-index:2; min-inline-size:120px; background:#fff; box-shadow:8px 0 18px rgba(18,18,36,.07); }
}

@media (max-width:420px) {
  .hambeat-ui .hambeat-topbar { gap:10px; }
  .hambeat-ui .hambeat-brand b::after { display:none; }
  .hambeat-ui .hambeat-panel { padding:17px; }
  .hambeat-ui .hambeat-actions { gap:8px; }
  .hambeat-ui .hambeat-mobile-nav { right:8px; bottom:8px; left:8px; padding-inline:8px; }
  .hambeat-ui .hambeat-mobile-nav a,.hambeat-ui .hambeat-mobile-nav button:not(.create) { min-inline-size:48px; }
}

/* --------------------------------------------------------------------------
   HamBeat Design System v12 — unified product layout and component contract
   This layer replaces page-local visual decisions with one shared system.
   -------------------------------------------------------------------------- */
.hambeat-ui {
  --hambeat-neutral-50:#fafaff;
  --hambeat-neutral-100:#f5f5fb;
  --hambeat-neutral-200:#ececf3;
  --hambeat-neutral-300:#d9d8e5;
  --hambeat-neutral-500:#77748e;
  --hambeat-neutral-700:#444258;
  --hambeat-neutral-900:#121224;
  --hambeat-danger:#e53e5d;
  --hambeat-success:#178a4b;
  --hambeat-warning:#b96b00;
  --hambeat-info:#007fac;
  --hambeat-space-1:8px;
  --hambeat-space-2:16px;
  --hambeat-space-3:24px;
  --hambeat-space-4:32px;
  --hambeat-space-5:40px;
  --hambeat-space-6:48px;
  --hambeat-space-8:64px;
  --hambeat-content:1240px;
  --hambeat-sidebar-width:224px;
  color:var(--hambeat-neutral-900);
  background:var(--hambeat-neutral-50);
}
.hambeat-ui :where(h1,h2,h3,h4,p) { overflow-wrap:anywhere; }
.hambeat-ui :where(h1,h2,h3,h4) { color:var(--hambeat-ink); line-height:1.35; }
.hambeat-ui :where(.hambeat-hero,.hambeat-auth-visual,.hambeat-live-side,.hambeat-live-event-list) :where(h1,h2,h3,h4) { color:#fff; }
.hambeat-ui .hambeat-player-cover :where(h1,h2,h3,h4) { color:#fff; }
.hambeat-ui :where(p) { line-height:1.9; }
.hambeat-container { width:min(var(--hambeat-content),calc(100% - 48px)); }
.hambeat-section { padding-block:var(--hambeat-space-8); }
.hambeat-section-head { margin-block-end:var(--hambeat-space-4); align-items:center; }
.hambeat-section-head h2 { font-size:clamp(28px,3vw,38px); letter-spacing:-.02em; }
.hambeat-kicker { margin-block-end:6px; font-size:12px; letter-spacing:0; }
.hambeat-subtle { color:var(--hambeat-neutral-500); }

/* One control family: every public, host and admin action uses these states. */
.hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button) {
  min-block-size:48px;
  border-radius:13px;
}
.hambeat-ui :where(.hambeat-button,.primary-button) { min-block-size:54px; }
.hambeat-ui :where(.hambeat-button).lime { color:#17181b; }
.hambeat-ui :where(.hambeat-button).danger { background:var(--hambeat-danger); box-shadow:0 10px 24px rgba(229,62,93,.18); }
.hambeat-ui :where(.hambeat-button).ghost { color:var(--hambeat-purple); border:1px solid transparent; background:transparent; box-shadow:none; }
.hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button):active:not(:disabled) { transform:translateY(0) scale(.985); }
.hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button)[aria-busy="true"] { cursor:progress; }
.hambeat-ui :where(.hambeat-button,.hambeat-button-secondary,.primary-button,.secondary-button,.compact-button)[aria-busy="true"]::before { content:""; inline-size:16px; block-size:16px; border:2px solid currentColor; border-inline-start-color:transparent; border-radius:50%; animation:hambeat-spin .8s linear infinite; }
@keyframes hambeat-spin { to { transform:rotate(1turn); } }
.hambeat-ui :where(label)>span:first-child { color:var(--hambeat-neutral-700); font-size:13px; font-weight:800; }
.hambeat-ui :where(input,select,textarea):user-invalid { border-color:var(--hambeat-danger); box-shadow:0 0 0 3px rgba(229,62,93,.10); }
.hambeat-ui :where(.hambeat-form,.creator-form,.event-form) small { color:var(--hambeat-muted); line-height:1.7; }
.hambeat-ui :where(.hambeat-card,.hambeat-panel,.creator-card) { border:1px solid var(--hambeat-line); background:#fff; box-shadow:0 12px 36px rgba(48,34,99,.06); }
.hambeat-panel { padding:24px; }
.hambeat-panel-head { margin-block-end:20px; }
.hambeat-panel-head h2 { font-size:22px; }

/* Designed empty, loading and feedback states shared by every data surface. */
.empty-state,.hambeat-empty-state { min-block-size:180px; padding:32px; display:grid; place-items:center; align-content:center; gap:8px; border:1px dashed #d9d4f2; border-radius:18px; color:var(--hambeat-muted); background:var(--hambeat-neutral-50); text-align:center; }
.empty-state::before,.hambeat-empty-state::before { content:"\f1b2"; font:900 24px/1 "Font Awesome 6 Free"; inline-size:48px; block-size:48px; display:grid; place-items:center; border-radius:15px; color:var(--hambeat-purple); background:#eee9ff; }
.user-empty { min-block-size:230px; padding:32px; grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:10px; border:1px dashed #d9d4f2; border-radius:20px; color:var(--hambeat-muted); background:#fff; text-align:center; }
.user-empty>i { inline-size:54px; block-size:54px; display:grid; place-items:center; border-radius:17px; color:var(--hambeat-purple); background:#eee9ff; font-size:24px; }
.user-empty strong { color:var(--hambeat-ink); font-size:20px; }
.user-empty p { max-inline-size:480px; margin:0; }
.user-empty .hambeat-button { margin-block-start:4px; }
.hambeat-feedback { min-block-size:46px; padding:11px 14px; display:flex; align-items:center; gap:9px; border-radius:12px; color:var(--hambeat-info); background:#eaf8fe; }
.hambeat-feedback[data-type="success"] { color:var(--hambeat-success); background:#eaf8ef; }
.hambeat-feedback[data-type="warning"] { color:var(--hambeat-warning); background:#fff5e5; }
.hambeat-feedback[data-type="error"] { color:var(--hambeat-danger); background:#fff0f3; }
.skeleton { min-block-size:16px; border-radius:8px; background:#eceaf3; animation:hambeat-pulse 1.4s ease-in-out infinite; }
@keyframes hambeat-pulse { 50% { opacity:.45; } }

/* Public shell and landing composition. */
.hambeat-topbar { min-block-size:72px; padding-inline:max(24px,calc((100vw - var(--hambeat-content))/2)); border-block-end-color:#f0eff5; }
.hambeat-topbar nav { gap:28px; }
.hambeat-topbar nav a { position:relative; color:var(--hambeat-neutral-700); }
.hambeat-topbar nav a:hover { color:var(--hambeat-purple); }
.hambeat-auth-actions { min-inline-size:206px; }
.hambeat-hero { min-block-size:520px; }
.hambeat-hero::after { background:rgba(16,10,34,.43); }
.hambeat-hero-content { width:min(var(--hambeat-content),calc(100% - 48px)); padding-block:72px 110px; }
.hambeat-hero h1 { max-inline-size:660px; margin-block-end:16px; font-size:clamp(44px,5vw,68px); line-height:1.22; }
.hambeat-hero p:not(.hambeat-kicker) { max-inline-size:630px; margin-block-end:26px; font-size:18px; }
.hambeat-hero .hambeat-kicker { color:#ff6fbd; font-size:14px; }
.hambeat-floating-note { inset-inline-start:max(32px,calc((100vw - var(--hambeat-content))/2)); inset-inline-end:auto; inset-block-end:42px; box-shadow:4px 4px 0 #101010; }
.hambeat-search-shell { margin-block-start:-38px; padding:14px; grid-template-columns:minmax(280px,1.7fr) minmax(190px,.8fr) minmax(190px,.8fr) auto; border-radius:20px; }
.hambeat-search-shell .hambeat-field { min-block-size:54px; }
.hambeat-category-strip { margin-block-start:16px; }
.hambeat-category-strip button,.hambeat-filter-row button { min-block-size:44px; padding-inline:16px; font-weight:800; }
.hambeat-ui .event-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; align-items:stretch; }
.hambeat-ui .event-card { max-inline-size:360px; border-radius:20px; box-shadow:0 10px 28px rgba(48,34,99,.06); }
.hambeat-ui .event-grid>.user-empty { max-inline-size:none; }
.hambeat-ui .event-cover { block-size:190px; }
.hambeat-ui .event-card-body { padding:18px; }
.hambeat-ui .event-card h3 { font-size:19px; }
.hambeat-ui .event-card p { min-block-size:0; }
.hambeat-feature-grid { gap:18px; }
.hambeat-feature { min-block-size:250px; padding:26px; border:1px solid var(--hambeat-line); }
.hambeat-feature h3 { font-size:19px; }
.hambeat-stats { gap:16px; }
.hambeat-stat { min-block-size:150px; padding:22px; position:relative; overflow:hidden; }
.hambeat-stat strong { font-size:28px; }
.hambeat-trust-strip { margin-block:28px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hambeat-trust-item { min-block-size:76px; padding:14px 16px; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; border:1px solid rgba(255,255,255,.2); border-radius:16px; color:#fff; background:rgba(20,14,42,.58); backdrop-filter:blur(12px); }
.hambeat-trust-item i { inline-size:42px; block-size:42px; display:grid; place-items:center; border-radius:12px; color:#17181b; background:var(--hambeat-lime); }
.hambeat-trust-item b,.hambeat-trust-item small { display:block; }
.hambeat-trust-item small { margin-block-start:2px; color:#e5e1ed; }
.hambeat-host-cta { margin-block:0 64px; padding:34px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; color:#fff; border:0; background:#17152a; }
.hambeat-host-cta h2 { margin:4px 0 8px; color:#fff; font-size:30px; }
.hambeat-host-cta p { margin:0; color:#cbc8d8; }
.hambeat-faq { display:grid; gap:10px; }
.hambeat-faq details { padding:18px 20px; border:1px solid var(--hambeat-line); border-radius:16px; background:#fff; }
.hambeat-faq summary { cursor:pointer; font-weight:900; }
.hambeat-faq p { margin:10px 0 0; color:var(--hambeat-muted); }
.hambeat-public-footer { padding:38px 24px 96px; border-block-start:1px solid var(--hambeat-line); background:#fff; }
.hambeat-footer-inner { width:min(var(--hambeat-content),calc(100% - 48px)); margin-inline:auto; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.hambeat-footer-links { display:flex; gap:20px; flex-wrap:wrap; }

/* Auth is balanced and form-first while preserving the approved visual panel. */
.hambeat-auth { grid-template-columns:minmax(460px,.95fr) minmax(520px,1.05fr); }
.hambeat-auth-visual { padding:40px; }
.hambeat-auth-visual::after { background:rgba(18,10,38,.50); }
.hambeat-auth-copy { padding:40px 3vw; }
.hambeat-auth-copy h1 { font-size:clamp(40px,4.8vw,62px); }
.hambeat-auth-form-side { padding:48px 7vw; background:var(--hambeat-neutral-50); }
.hambeat-auth-form { padding:30px; border:1px solid var(--hambeat-line); border-radius:22px; background:#fff; box-shadow:0 18px 50px rgba(48,34,99,.08); }
.hambeat-auth-form>.hambeat-brand { margin-block-end:22px; }
.hambeat-tabs { margin-block-end:28px; }
.hambeat-form { gap:16px; }
.auth-helper-row { min-block-size:44px; }
.auth-helper-row label { min-block-size:44px; }
#auth-message:not([hidden]),#forgot-message:not([hidden]),#reset-message:not(:empty) { padding:12px 14px; border-radius:12px; color:var(--hambeat-danger); background:#fff0f3; }

/* Shared app shell: content leads, navigation supports. */
.hambeat-app { grid-template-columns:var(--hambeat-sidebar-width) minmax(0,1fr); }
.hambeat-sidebar { inline-size:var(--hambeat-sidebar-width); padding:22px 14px; background:#0a0d1d; }
.hambeat-sidebar .hambeat-brand { padding:0 8px 20px; }
.hambeat-sidebar nav { gap:5px; }
.hambeat-sidebar nav a,.hambeat-sidebar nav button { min-block-size:46px; padding-inline:13px; font-size:13px; }
.hambeat-sidebar nav a.active,.hambeat-sidebar nav button.active { background:var(--hambeat-purple); box-shadow:0 8px 22px rgba(108,60,255,.24); }
.hambeat-sidebar-foot { padding:14px; }
.hambeat-main { inline-size:100%; max-inline-size:1540px; margin-inline:auto; padding:24px 32px 72px; }
.hambeat-appbar { min-block-size:56px; margin-block-end:28px; padding-block-end:18px; border-block-end:1px solid var(--hambeat-line); }
.hambeat-appbar-search { inline-size:min(420px,42vw); }
.hambeat-appbar .hambeat-actions { gap:8px; }
.hambeat-dashboard-head { margin-block-end:24px; align-items:center; }
.hambeat-dashboard-head h1 { font-size:clamp(30px,3vw,38px); }
.hambeat-dashboard-head .hambeat-subtle { margin:6px 0 0; }
.overview-grid { gap:14px; }
.overview-grid .hambeat-stat { min-block-size:142px; }
.admin-monitor-grid,.host-dashboard-grid { gap:16px; }

/* Host dashboard and event creation use insight-first composition. */
.host-dashboard-page .hambeat-main { background:var(--hambeat-neutral-50); }
.host-dashboard-page .hambeat-stats { grid-template-columns:repeat(5,minmax(0,1fr)); }
.host-dashboard-page .hambeat-stat { min-block-size:132px; }
.host-dashboard-page .hambeat-stat strong { font-size:26px; }
.host-dashboard-page .hambeat-section { padding-block:48px 0; }
.hambeat-ui .creator-card { margin-block:20px 36px; padding:28px; }
.hambeat-ui .creator-heading { align-items:center; }
.hambeat-wizard-steps { margin-block:24px; gap:10px; }
.hambeat-wizard-steps button { min-block-size:62px; border-radius:15px; }
.hambeat-ui .wizard-pane { min-block-size:0; padding:28px; }
.cover-choice label { min-block-size:150px; }
.wizard-footer { padding-block-start:20px; }
.hambeat-ui .user-event-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.hambeat-ui .user-event-card { max-inline-size:420px; }
.hambeat-ui .user-event-cover { block-size:170px; }
.host-secondary-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.host-secondary-grid>.hambeat-section { min-inline-size:0; }
.host-secondary-grid .user-event-grid { grid-template-columns:1fr; }
.host-secondary-grid .user-empty { min-block-size:210px; padding:24px; }

/* Profile groups account, experiences and support without oversized dead zones. */
.profile-shell { width:min(1180px,calc(100% - 48px)); padding-block:36px 100px; }
.profile-hero { min-block-size:168px; padding:24px; }
.profile-avatar { inline-size:88px; block-size:88px; border-width:6px; }
.profile-hero h1 { font-size:32px; }
.profile-stat-grid article { min-block-size:118px; }
.profile-grid { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); }

/* Event detail and live experience follow the same information hierarchy. */
.hambeat-detail { padding-block:32px 72px; }
.hambeat-detail-hero { grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); border-radius:24px; }
.hambeat-detail-media { min-block-size:500px; }
.hambeat-detail-copy { padding:42px; }
.hambeat-detail-copy h1 { font-size:clamp(36px,4vw,48px); }
.hambeat-detail-meta div { min-block-size:72px; }
.hambeat-player-page { padding:24px; place-items:start center; background:#0b0e1c; }
.hambeat-live-shell { gap:20px; align-items:start; }
.hambeat-live-side,.hambeat-live-event-list { min-block-size:590px; border-radius:24px; background:#17152a; }
.hambeat-live-stage .hambeat-player { border:1px solid rgba(255,255,255,.12); }
.hambeat-player-cover { block-size:300px; }

/* Admin pages are independent routes with shared dense, readable patterns. */
.admin-page .hambeat-main { background:var(--hambeat-neutral-50); }
.admin-page .hambeat-dashboard-head { padding:4px 0; }
.admin-page .admin-section { margin-block-start:0; }
.admin-page #admin-content { display:block; }
.admin-page #admin-content[hidden] { display:none; }
.admin-page #admin-content>.hambeat-dashboard-head { display:flex; }
.admin-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-stat-grid .hambeat-stat { min-block-size:140px; }
.admin-monitor-grid { grid-template-columns:1fr 1.2fr .9fr; }
.admin-page table { font-size:13px; }
.admin-page thead th { position:sticky; top:0; z-index:1; padding-block:12px; color:var(--hambeat-neutral-700); background:#f7f6fb; }
.admin-page tbody tr { transition:background-color .16s ease; }
.admin-page tbody tr:hover { background:#faf9ff; }
.admin-page th,.admin-page td { block-size:56px; }
.admin-page .event-form { padding:20px; border:1px solid var(--hambeat-line); border-radius:18px; background:var(--hambeat-neutral-50); }
.admin-page .admin-event-list { gap:10px; }
.admin-page .admin-event-row { border-radius:16px; }
.admin-access-steps article { min-block-size:120px; }
.admin-login-card { width:min(980px,100%); }
.admin-login-form .hambeat-button { min-inline-size:220px; }
.admin-page-title-meta { display:flex; align-items:center; gap:10px; color:var(--hambeat-muted); font-size:12px; }
.admin-filter-strip { margin-block-end:16px; display:flex; flex-wrap:wrap; gap:8px; }
.admin-filter-strip button { min-block-size:44px; padding-inline:14px; border:1px solid var(--hambeat-line); border-radius:12px; color:var(--hambeat-neutral-700); background:#fff; }
.admin-filter-strip button.active { color:#fff; border-color:var(--hambeat-purple); background:var(--hambeat-purple); }

/* Event management: dense searchable rows and a compact staged editor. */
.event-management-panel { padding:28px; }
.event-management-panel>.hambeat-panel-head { align-items:flex-start; }
.event-management-panel>.hambeat-panel-head .hambeat-subtle { max-inline-size:720px; margin:8px 0 0; line-height:1.9; }
.admin-section-count { min-block-size:36px; padding:7px 12px; display:inline-flex; align-items:center; border-radius:999px; color:var(--hambeat-purple); background:#eee9ff; font-size:12px; font-weight:900; white-space:nowrap; }
.admin-form-message { min-block-size:24px; margin:14px 0 0; color:var(--hambeat-success); font-weight:800; }
.event-list-toolbar { margin-block:18px 8px; padding:10px; display:grid; grid-template-columns:minmax(220px,1fr) 190px 135px; gap:10px; border:1px solid var(--hambeat-line); border-radius:16px; background:#faf9ff; }
.event-list-toolbar>label { min-inline-size:0; display:grid; gap:5px; color:var(--hambeat-muted); font-size:10px; font-weight:800; }
.event-list-toolbar :is(input,select) { inline-size:100%; min-block-size:42px; padding-inline:12px; border:1px solid var(--hambeat-line); border-radius:11px; color:var(--hambeat-ink); background:#fff; }
.event-list-toolbar .event-search { position:relative; align-self:end; }
.event-search i { position:absolute; inset-inline-start:13px; inset-block-start:14px; color:var(--hambeat-muted); }
.event-search input { padding-inline-start:38px; }
.admin-event-list { margin-block-start:12px; display:grid; gap:9px; }
.admin-event-card { min-inline-size:0; min-block-size:142px; display:grid; grid-template-columns:104px minmax(0,1fr); overflow:hidden; border:1px solid var(--hambeat-line); border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(48,34,99,.04); }
.admin-event-cover { min-block-size:100%; position:relative; overflow:hidden; background:#e9e6f6; }
.admin-event-cover img { inline-size:100%; block-size:100%; min-block-size:142px; display:block; object-fit:cover; }
.event-status-badge { position:absolute; inset:8px 8px auto auto; min-block-size:25px; padding:3px 7px; display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.6); border-radius:999px; color:#fff; background:rgba(16,13,34,.72); backdrop-filter:blur(8px); font-size:9px; font-weight:900; }
.status-live .event-status-badge { color:#0b522d; background:rgba(213,255,228,.92); }
.status-cancelled .event-status-badge,.status-suspended .event-status-badge { color:#8c1631; background:rgba(255,226,233,.94); }
.admin-event-content { min-inline-size:0; padding:13px 15px; display:grid; gap:9px; }
.admin-event-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.admin-event-heading>div { min-inline-size:0; }
.admin-event-heading h3 { margin:5px 0 2px; color:var(--hambeat-ink); font-size:16px; }
.admin-event-heading .event-summary { max-inline-size:720px; margin:0; overflow:hidden; color:var(--hambeat-muted); font-size:11px; line-height:1.7; text-overflow:ellipsis; white-space:nowrap; }
.admin-event-badges { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.event-audience-badge { min-block-size:24px; padding:3px 7px; display:inline-flex; align-items:center; border-radius:999px; color:var(--hambeat-purple); background:#f1edff; font-size:9px; font-weight:900; }
.event-id { max-inline-size:180px; overflow:hidden; color:var(--hambeat-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.admin-event-heading .event-edit { flex:0 0 auto; min-inline-size:92px; min-block-size:36px; padding-inline:10px; font-size:11px; }
.admin-event-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.admin-event-facts>div { min-inline-size:0; min-block-size:46px; padding:7px 9px; display:grid; grid-template-columns:20px 1fr; grid-template-rows:auto auto; align-content:center; column-gap:6px; border:1px solid #efedf6; border-radius:10px; background:#faf9ff; }
.admin-event-facts i { grid-row:1/3; align-self:center; color:var(--hambeat-purple); text-align:center; }
.admin-event-facts span { color:var(--hambeat-muted); font-size:10px; }
.admin-event-facts strong { min-inline-size:0; overflow:hidden; color:var(--hambeat-ink); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.admin-event-footer { padding-block-start:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-block-start:1px solid var(--hambeat-line); }
.admin-event-card .event-live-numbers { display:flex; flex-wrap:wrap; gap:7px; }
.admin-event-card .event-live-numbers span { min-block-size:28px; padding:4px 7px; border-radius:9px; color:var(--hambeat-muted); background:#f6f5fa; font-size:9px; }
.admin-event-card .event-live-numbers b { margin-inline-end:3px; color:var(--hambeat-ink); }
.event-card-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.event-card-actions button { min-block-size:32px; padding-inline:8px; border-radius:10px; font-size:9px; }
.event-pagination { margin-block-start:14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.event-pagination button { min-block-size:38px; padding-inline:15px; border:1px solid var(--hambeat-line); border-radius:11px; background:#fff; cursor:pointer; }
.event-pagination button:disabled { opacity:.45; cursor:not-allowed; }
.event-pagination span { color:var(--hambeat-muted); font-size:12px; font-weight:800; }
.hambeat-button-secondary.danger { color:var(--hambeat-danger); border-color:#ffd5df; background:#fff6f8; }
.hambeat-button-secondary.danger:hover { color:#fff; border-color:var(--hambeat-danger); background:var(--hambeat-danger); }

.admin-event-editor { position:fixed; z-index:80; inset:18px 18px 18px auto; inline-size:min(760px,calc(100% - 36px)); margin:0; padding:0!important; overflow:auto; border:1px solid #ded8ff!important; border-radius:22px!important; background:#fff!important; box-shadow:0 0 0 100vmax rgba(17,18,37,.52),0 24px 90px rgba(21,13,52,.28); }
.admin-event-editor::before { content:none; }
.event-form-heading { position:sticky; z-index:3; inset-block-start:0; padding:18px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:#fff; background:#5f35ea; }
.event-form-heading .hambeat-kicker,.event-form-heading h3,.event-form-heading p { color:#fff; }
.event-form-heading h3 { margin:3px 0 4px; font-size:22px; }
.event-form-heading p { margin:0; opacity:.82; }
.event-form-heading .hambeat-icon-button { color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.12); }
.event-editor-tabs { position:sticky; z-index:2; inset-block-start:103px; padding:9px 12px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; border-block-end:1px solid var(--hambeat-line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.event-editor-tabs button { min-block-size:52px; padding:7px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--hambeat-line); border-radius:12px; color:var(--hambeat-muted); background:#fff; cursor:pointer; font-weight:800; }
.event-editor-tabs button.active { color:#fff; border-color:var(--hambeat-purple); background:var(--hambeat-purple); }
.event-editor-group { margin:0; padding:22px; border:0; border-block-end:1px solid var(--hambeat-line); }
.event-editor-group[hidden] { display:none!important; }
.event-editor-group legend { padding:0 0 12px; color:var(--hambeat-ink); font-size:16px; font-weight:900; }
.event-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.event-editor-grid>label { min-inline-size:0; display:grid; align-content:start; gap:7px; color:var(--hambeat-neutral-700)!important; font-size:12px; font-weight:900; }
.event-editor-grid .wide-field { grid-column:1/-1; }
.admin-event-editor textarea { min-block-size:104px; resize:vertical; }
.admin-event-editor .check-field { min-block-size:52px; padding:12px 14px; display:flex; align-items:center; gap:9px; border:1px solid var(--hambeat-line); border-radius:13px; background:#faf9ff; }
.admin-event-editor .check-field input { inline-size:20px; block-size:20px; accent-color:var(--hambeat-purple); }
.access-builder>p { margin:-4px 0 16px; color:var(--hambeat-muted); line-height:1.8; }
.access-methods { margin-block-end:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.access-methods>label { min-block-size:88px; padding:14px; display:grid; grid-template-columns:22px 1fr; align-items:start; gap:10px; border:1px solid var(--hambeat-line); border-radius:14px; background:#faf9ff; cursor:pointer; }
.access-methods>label:has(input:checked) { border-color:var(--hambeat-purple); background:#f2eeff; box-shadow:0 0 0 2px rgba(108,60,255,.08); }
.access-methods input { inline-size:19px; block-size:19px; accent-color:var(--hambeat-purple); }
.access-methods b,.access-methods small { display:block; }
.access-methods b { color:var(--hambeat-ink); font-size:13px; }
.access-methods small { margin-block-start:3px; color:var(--hambeat-muted); line-height:1.7; }
.admin-event-editor .form-actions { padding:18px 22px; display:flex; gap:10px; background:#faf9ff; }
.admin-event-editor .form-actions button { min-inline-size:112px; }
.form-actions-spacer { flex:1; }
.playback-mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.playback-mode-picker label { position:relative; cursor:pointer; }
.playback-mode-picker input { position:absolute; opacity:0; pointer-events:none; }
.playback-mode-picker span { min-block-size:104px; padding:14px; display:grid; grid-template-columns:32px 1fr; column-gap:10px; align-items:center; border:1px solid var(--hambeat-line); border-radius:15px; background:#faf9ff; }
.playback-mode-picker input:checked+span { border-color:var(--hambeat-purple); box-shadow:0 0 0 3px rgba(108,60,255,.1); background:#f5f1ff; }
.playback-mode-picker i { grid-row:1/3; color:var(--hambeat-purple); font-size:20px; }
.playback-mode-picker b,.playback-mode-picker small { display:block; }
.playback-mode-picker small { color:var(--hambeat-muted); line-height:1.7; }
.playlist-builder { margin-block-start:18px; display:grid; gap:12px; }
.playlist-builder>div:first-child strong,.playlist-builder>div:first-child small { display:block; }
.playlist-builder>div:first-child small { margin-block-start:4px; color:var(--hambeat-muted); }
.playlist-search { position:relative; }
.playlist-search i { position:absolute; inset:16px 14px auto auto; color:var(--hambeat-muted); }
.playlist-search input { inline-size:100%; min-block-size:48px; padding:0 42px 0 14px; border:1px solid var(--hambeat-line); border-radius:12px; }
.event-track-options { max-block-size:230px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.event-track-options label { min-inline-size:0; padding:10px; display:flex; align-items:center; gap:9px; border:1px solid var(--hambeat-line); border-radius:12px; cursor:pointer; }
.event-track-options input { inline-size:19px; block-size:19px; flex:0 0 auto; accent-color:var(--hambeat-purple); }
.event-track-options span,.event-track-options b,.event-track-options small { min-inline-size:0; display:block; }
.event-track-options b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-track-options small { color:var(--hambeat-muted); }
.event-playlist-preview { margin:0; padding:0; display:grid; gap:7px; list-style:none; }
.event-playlist-preview li { min-inline-size:0; padding:9px 10px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid var(--hambeat-line); border-radius:12px; }
.event-playlist-preview .playlist-index { inline-size:28px; block-size:28px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--hambeat-purple); }
.event-playlist-preview b,.event-playlist-preview small { display:block; }
.event-playlist-preview small { color:var(--hambeat-muted); }
.event-playlist-preview div { display:flex; gap:4px; }
.event-playlist-preview button { inline-size:32px; block-size:32px; border:1px solid var(--hambeat-line); border-radius:9px; background:#fff; cursor:pointer; }
.event-playlist-preview button:disabled { opacity:.35; }

/* Design-system documentation surfaces the same production primitives. */
.design-token-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.design-token-grid article { padding:18px; border:1px solid var(--hambeat-line); border-radius:16px; background:#fff; }
.design-token-grid code { display:block; margin-block-start:8px; direction:ltr; color:var(--hambeat-purple); font-size:12px; }
.design-state-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.design-state-grid article { min-block-size:150px; padding:18px; border:1px solid var(--hambeat-line); border-radius:16px; background:#fff; }

@media (max-width:1100px) {
  .host-dashboard-page .hambeat-stats { grid-template-columns:repeat(3,1fr); }
  .admin-monitor-grid { grid-template-columns:1fr 1fr; }
  .admin-alert-panel { grid-column:1/-1; }
  .hambeat-trust-strip { grid-template-columns:1fr; max-inline-size:480px; }
  .design-token-grid,.design-state-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px) {
  .hambeat-main { padding:20px 20px 96px; }
  .admin-page .hambeat-main { padding-block-end:calc(140px + env(safe-area-inset-bottom)); }
  .admin-page #admin-content { scroll-padding-block-end:calc(116px + env(safe-area-inset-bottom)); }
  .hambeat-topbar { padding-inline:20px; }
  .hambeat-search-shell { grid-template-columns:1fr 1fr; }
  .hambeat-host-cta { margin-block-end:80px; }
  .hambeat-detail-hero { grid-template-columns:1fr; }
  .hambeat-detail-media { min-block-size:360px; }
  .hambeat-auth { grid-template-columns:1fr; }
  .hambeat-auth-visual { min-block-size:340px; }
  .admin-event-card { grid-template-columns:94px minmax(0,1fr); }
  .admin-event-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-event-footer { align-items:stretch; flex-direction:column; }
  .event-card-actions { justify-content:flex-start; }
}

@media (max-width:760px) {
  .hambeat-container { width:min(100% - 24px,var(--hambeat-content)); }
  .hambeat-section { padding-block:48px; }
  .hambeat-section-head { gap:14px; margin-block-end:22px; }
  .hambeat-hero { min-block-size:520px; }
  .hambeat-hero-content { width:calc(100% - 32px); padding-block:54px 114px; }
  .hambeat-hero h1 { font-size:39px; }
  .hambeat-hero p:not(.hambeat-kicker) { font-size:15px; }
  .hambeat-search-shell { margin-block-start:-28px; grid-template-columns:1fr; }
  .hambeat-category-strip { justify-content:flex-start; flex-wrap:nowrap; overflow:auto; padding-block-end:6px; }
  .hambeat-category-strip button { flex:0 0 auto; }
  .hambeat-ui .event-grid { grid-auto-flow:row; grid-template-columns:1fr; overflow:visible; }
  .hambeat-ui .event-card { max-inline-size:none; }
  .hambeat-feature { min-block-size:0; }
  .hambeat-host-cta { padding:24px; grid-template-columns:1fr; }
  .hambeat-host-cta .hambeat-button { inline-size:100%; }
  .hambeat-footer-inner { width:100%; align-items:flex-start; flex-direction:column; }
  .hambeat-auth-visual { display:none; }
  .hambeat-auth-form-side { min-block-size:100vh; padding:24px 16px 88px; align-items:start; }
  .hambeat-auth-form { width:100%; padding:22px 18px; }
  .hambeat-appbar { align-items:stretch; flex-direction:column; }
  .hambeat-appbar-search { inline-size:100%; }
  .hambeat-appbar .hambeat-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hambeat-appbar .hambeat-actions>a,.hambeat-appbar .hambeat-actions>button { inline-size:100%; }
  .host-dashboard-page .hambeat-stats,.admin-stat-grid { grid-template-columns:1fr 1fr; }
  .admin-monitor-grid { grid-template-columns:1fr; }
  .admin-alert-panel { grid-column:auto; }
  .hambeat-ui .creator-card { padding:16px; }
  .hambeat-ui .wizard-pane { padding:18px 14px; }
  .profile-shell { width:min(100% - 24px,1180px); }
  .profile-grid { grid-template-columns:1fr; }
  .host-secondary-grid { grid-template-columns:1fr; }
  .hambeat-detail-copy { padding:24px; }
  .hambeat-detail-media { min-block-size:300px; }
  .event-detail-actions { grid-template-columns:1fr; }
  .hambeat-live-shell { display:block; min-block-size:auto; }
  .hambeat-live-side,.hambeat-live-event-list { display:none; }
  .hambeat-player-page { padding:0 0 84px; place-items:start center; }
  .hambeat-player { inline-size:100%; min-block-size:100vh; border-radius:0; }
  .hambeat-player-cover { block-size:310px; }
  .player-route-nav.mobile { margin-block:20px 4px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .player-route-nav.mobile a { min-block-size:60px; padding:8px 5px; justify-content:center; flex-direction:column; gap:5px; border-color:var(--hambeat-line); color:var(--hambeat-neutral-700); background:#fff; text-align:center; font-size:10px; }
  .player-route-nav.mobile i { color:var(--hambeat-purple); font-size:16px; }
  .hambeat-dialog { inline-size:calc(100% - 16px); max-block-size:calc(100dvh - 16px); border-radius:22px; }
  .hambeat-dialog__surface,.account-form { max-block-size:calc(100dvh - 16px); padding:24px 18px 20px; gap:15px; }
  .hambeat-dialog__close { inset-block-start:14px; inset-inline-end:14px; }
  .hambeat-dialog__header { padding-inline-end:52px; }
  .hambeat-dialog__header h2 { font-size:24px; }
  .event-share-dialog .hambeat-dialog__header { padding-inline:52px; }
  .event-share-actions { grid-template-columns:1fr; }
  .event-share-actions button { inline-size:100%; }
  .public-event-share { padding:20px 16px; grid-template-columns:1fr; }
  .public-event-share .event-share-qr { margin-inline:auto; order:-1; }
  .admin-login-card { margin-block:18px; padding:22px; }
  .admin-access-steps { grid-template-columns:1fr; }
  .admin-login-form .hambeat-button { inline-size:100%; }
  .event-management-panel { padding:16px; }
  .event-management-panel>.hambeat-panel-head { gap:12px; flex-direction:column; }
  .event-list-toolbar { grid-template-columns:1fr 1fr; }
  .event-list-toolbar .event-search { grid-column:1/-1; }
  .admin-event-card { grid-template-columns:72px minmax(0,1fr); min-block-size:0; }
  .admin-event-cover { block-size:auto; min-block-size:100%; }
  .admin-event-cover img { min-block-size:100%; }
  .admin-event-content { padding:12px; }
  .admin-event-heading { gap:8px; align-items:flex-start; }
  .admin-event-heading h3 { font-size:17px; }
  .admin-event-heading .event-summary { max-block-size:40px; overflow:hidden; }
  .admin-event-facts { grid-template-columns:1fr 1fr; gap:6px; }
  .admin-event-facts > div { min-block-size:56px; padding:7px; }
  .admin-event-footer { align-items:stretch; }
  .event-card-actions { display:grid; grid-template-columns:1fr 1fr; }
  .event-card-actions button { inline-size:100%; }
  .admin-event-editor { inset:8px; inline-size:auto; }
  .event-editor-tabs { inset-block-start:100px; overflow:auto; grid-template-columns:repeat(4,minmax(100px,1fr)); }
  .event-editor-grid,.access-methods,.playback-mode-picker,.event-track-options { grid-template-columns:1fr; }
  .event-editor-group { padding:18px 14px; }
  .event-form-heading { padding:18px 14px; }
  .admin-event-editor .form-actions { position:sticky; inset-block-end:0; padding:12px; display:grid; grid-template-columns:1fr 1fr; }
  .admin-event-editor .form-actions button { min-inline-size:0; inline-size:100%; }
  .form-actions-spacer { display:none; }
  .design-token-grid,.design-state-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .hambeat-topbar { min-block-size:64px; }
  .hambeat-auth-actions { min-inline-size:96px; }
  .hambeat-stats,.profile-stat-grid,.host-dashboard-page .hambeat-stats,.admin-stat-grid { grid-template-columns:1fr; }
  .hambeat-stat,.profile-stat-grid article { min-block-size:104px; }
  .hambeat-hero-actions { display:grid; }
  .hambeat-hero-actions .hambeat-button { inline-size:100%; }
  .hambeat-floating-note { inset-inline-start:18px; }
  .hambeat-dashboard-head>.hambeat-button { inline-size:100%; }
  .hambeat-appbar .hambeat-actions { grid-template-columns:1fr; }
  .admin-event-facts { grid-template-columns:1fr; }
  .event-card-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .hambeat-ui *, .hambeat-ui *::before, .hambeat-ui *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}