/* App and portal mockups shared by index.html, venues.html and organizers.html.
   Built in HTML so they stay sharp at any size. Sample places, people and numbers only. */
.shots { --m-bg: #0E0B16; --m-surface: #1A1626; --m-text: #F3F0FA; --m-muted: #A7A1B8; --m-border: #2F2A40;
  --m-primary: #8B5CF6; --m-accent: #F472B6; --m-success: #4ADE80; --m-cyan: #22D3EE;
  display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.shot { display: grid; gap: 14px; justify-items: center; margin: 0; min-width: 0; }
.shot figcaption { text-align: center; max-width: 250px; font-size: 14px; line-height: 1.45; color: var(--m-muted); }
.shot figcaption b { display: block; color: var(--m-text); font-size: 15px; margin-bottom: 2px; }
.shot.wide figcaption { max-width: 520px; }
.shots.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
.shots-note { text-align: center; font-size: 12.5px; color: var(--m-muted, #A7A1B8); margin: 0; }

/* Icons: masks so they take the text color */
.ic { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.12em; }

/* Phone frame */
.device { position: relative; width: 262px; height: 548px; border-radius: 44px; padding: 10px; background: #05040A;
  box-shadow: 0 0 0 1.5px #3A3450, 0 40px 70px -30px rgba(244,114,182,.38), 0 20px 50px -20px rgba(34,211,238,.18); flex: none; }
.device::after { content: ""; position: absolute; top: 19px; left: 50%; width: 76px; height: 21px; margin-left: -38px; border-radius: 12px; background: #05040A; z-index: 3; }
.screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--m-bg); color: var(--m-text);
  font: 11.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; text-align: left; letter-spacing: 0; }
.sbar { display: flex; justify-content: space-between; align-items: center; padding: 13px 22px 0 26px; height: 40px; font-weight: 700; font-size: 12px; flex: none; }
.sbar .sig { display: flex; gap: 2px; align-items: flex-end; }
.sbar .sig i { width: 3px; background: var(--m-text); border-radius: 1px; }
.sbar .sig i:nth-child(1) { height: 4px; } .sbar .sig i:nth-child(2) { height: 6px; } .sbar .sig i:nth-child(3) { height: 8px; }
.sbar .bat { width: 20px; height: 10px; border: 1.5px solid var(--m-text); border-radius: 3px; margin-left: 5px; position: relative; }
.sbar .bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--m-text); border-radius: 1px; }
.sbar .r { display: flex; align-items: center; }
.body > * { flex-shrink: 0; }
.body { flex: 1; overflow: hidden; padding: 4px 14px 0; display: flex; flex-direction: column; gap: 9px;
  -webkit-mask: linear-gradient(#000 88%, transparent); mask: linear-gradient(#000 88%, transparent); }
.tabs { flex: none; display: flex; justify-content: space-around; padding: 7px 6px 20px; border-top: 1px solid var(--m-border); background: var(--m-bg); }
.tabs span { display: grid; justify-items: center; gap: 2px; font-size: 9px; color: var(--m-muted); }
.tabs .ic { font-size: 17px; }
.tabs .on { color: var(--m-primary); }

/* App pieces */
.m-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; }
.m-sub { color: var(--m-muted); margin-top: -7px; }
.m-search { display: flex; gap: 7px; align-items: center; background: var(--m-surface); border-radius: 12px; padding: 8px 10px; color: var(--m-muted); }
.m-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.m-chip { flex: none; border: 1px solid var(--m-border); border-radius: 99px; padding: 4px 10px; font-weight: 600; font-size: 11px; display: inline-flex; gap: 4px; align-items: center; }
.m-chip.on { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.m-card { border: 1px solid var(--m-border); border-radius: 14px; padding: 11px 12px; display: grid; gap: 4px; }
.m-top { display: flex; gap: 6px; align-items: flex-start; }
.m-name { flex: 1; font-size: 14.5px; font-weight: 700; }
.m-dist { color: var(--m-primary); font-weight: 600; font-size: 11.5px; margin-top: 1px; }
.m-age { font-size: 9.5px; font-weight: 700; border: 1px solid var(--m-primary); color: #A78BFA; border-radius: 99px; padding: 0 6px; margin-top: 2px; }
.m-meta { color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hl { display: flex; gap: 4px; color: var(--m-accent); font-weight: 700; }
.m-hl .ic { margin-top: 2px; font-size: 10.5px; }
.m-host { color: var(--m-muted); font-size: 10.5px; margin-left: 14px; margin-top: -2px; }
.m-counts { display: flex; gap: 12px; margin-top: 2px; color: var(--m-muted); font-variant-numeric: tabular-nums; }
.m-counts span { display: inline-flex; gap: 3px; align-items: center; }
.m-counts b { font-weight: 800; }
.m-counts .f { color: var(--m-primary); } .m-counts .h { color: var(--m-success); }
.m-nobody { color: var(--m-muted); font-size: 10.5px; }
.m-plan { border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(244,114,182,.18)); border: 1px solid rgba(139,92,246,.5); display: grid; gap: 2px; }
.m-plan small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #C4B5FD; font-weight: 700; }
.m-plan b { font-size: 13px; }
.m-plan span { color: #DCD7E8; font-size: 10.5px; }

.m-back { display: flex; align-items: center; gap: 3px; color: var(--m-primary); font-weight: 600; }
.m-title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; }
.m-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--m-muted); }
.m-open { color: var(--m-success); font-weight: 600; }
.m-btns { display: flex; gap: 7px; }
.m-btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 5px; border-radius: 12px; padding: 9px 8px; font-weight: 700; font-size: 12px; background: var(--m-surface); border: 1px solid var(--m-border); }
.m-btn.p { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.m-btn.s { flex: 0 0 auto; padding-inline: 11px; }
.m-note { background: var(--m-surface); border-radius: 12px; padding: 8px 10px; color: var(--m-muted); font-size: 10.5px; }
.m-note b { color: var(--m-text); }
.m-sec { display: grid; gap: 6px; }
.m-sec h4 { margin: 0; font-size: 13.5px; font-weight: 800; }
.m-sec h5 { margin: 2px 0 0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--m-muted); font-weight: 700; }
.m-ev { background: var(--m-surface); border-radius: 12px; padding: 8px 10px; display: grid; gap: 1px; }
.m-ev b { font-size: 12.5px; }
.m-ev span { color: var(--m-muted); font-size: 10.5px; }
.m-ev .k { color: var(--m-accent); font-weight: 700; font-size: 10px; display: flex; gap: 4px; align-items: center; }
.m-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.m-tag { display: inline-flex; gap: 4px; align-items: center; background: var(--m-surface); border-radius: 99px; padding: 4px 9px; font-size: 10.5px; font-weight: 600; }
.m-tag .ic { color: #A78BFA; }
.m-person { display: flex; gap: 8px; align-items: center; }
.m-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 10.5px; color: #0E0B16; flex: none; position: relative; }
.m-av.here::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-success); border: 2px solid var(--m-bg); }
.m-person div { display: grid; line-height: 1.25; min-width: 0; }
.m-person b { font-size: 12px; }
.m-person span { color: var(--m-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-more { color: var(--m-muted); font-size: 10.5px; }
.a1 { background: #F472B6; } .a2 { background: #22D3EE; } .a3 { background: #A78BFA; } .a4 { background: #4ADE80; } .a5 { background: #FBBF24; }

/* Bottom sheet (check-in) over a dimmed screen */
.m-dim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 1; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--m-surface); border-radius: 22px 22px 0 0; padding: 8px 16px 24px; display: grid; gap: 10px; }
.m-handle { justify-self: center; width: 36px; height: 4px; border-radius: 3px; background: var(--m-border); }
.m-sheet h4 { margin: 0; font-size: 17px; font-weight: 800; }
.m-sheet .m-chip { background: var(--m-bg); }
.m-sheet .m-chip.on { background: var(--m-primary); }
.m-grp { display: grid; gap: 6px; }
.m-grp > span { display: flex; gap: 5px; align-items: center; font-weight: 700; font-size: 12px; }
.m-grp > span small { color: var(--m-muted); font-weight: 500; font-size: 10.5px; }
.m-grp .m-chips { flex-wrap: wrap; }
.m-push { position: absolute; z-index: 2; left: 8px; right: 8px; top: 46px; background: rgba(40,34,58,.94); border-radius: 16px; padding: 9px 11px; display: flex; gap: 9px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.m-push .app { width: 26px; height: 26px; border-radius: 7px; background: #0E0B16; display: grid; place-items: center; flex: none; }
.m-push .app svg { width: 20px; height: 20px; }
.m-push div { display: grid; gap: 1px; min-width: 0; }
.m-push b { font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; }
.m-push b small { color: var(--m-muted); font-weight: 500; }
.m-push span { font-size: 11px; color: #DCD7E8; }

/* Org page in the app */
.m-org { display: flex; gap: 10px; align-items: center; }
.m-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #8B5CF6, #F472B6); flex: none; }
.m-date { width: 38px; border-radius: 10px; background: var(--m-bg); display: grid; justify-items: center; padding: 3px 0; flex: none; line-height: 1.1; }
.m-date small { font-size: 8.5px; font-weight: 700; color: var(--m-accent); letter-spacing: .06em; }
.m-date b { font-size: 15px; }
.m-up { display: flex; gap: 9px; align-items: center; background: var(--m-surface); border-radius: 12px; padding: 8px 10px; }
.m-up > div:not(.m-date) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.m-up b { font-size: 12px; }
.m-up span { color: var(--m-muted); font-size: 10.5px; }
.m-up .lk { color: var(--m-cyan); font-weight: 600; }
.m-up .ic-chev { color: var(--m-muted); }
.m-week { background: var(--m-surface); border-radius: 12px; }
.m-week > div { display: flex; gap: 10px; padding: 8px 10px; }
.m-week > div + div { border-top: 1px solid var(--m-border); }
.m-week .d { color: var(--m-primary); font-weight: 800; width: 34px; flex: none; }
.m-week p { margin: 0; display: grid; }
.m-week p span { color: var(--m-muted); font-size: 10.5px; }

/* Browser frame (web portal) */
.browser { width: min(560px, 100%); border-radius: 14px; overflow: hidden; background: #0B0912; box-shadow: 0 0 0 1.5px #3A3450, 0 40px 70px -30px rgba(139,92,246,.4); text-align: left; }
.chrome { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #1C1829; }
.chrome .dots { display: flex; gap: 5px; } .chrome .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3A3450; }
.chrome .addr { flex: 1; text-align: center; background: #0E0B16; border-radius: 7px; padding: 3px 10px; font-size: 11px; color: var(--m-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal { background: #0E0B16; color: var(--m-text); font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.p-nav { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--m-border); white-space: nowrap; overflow: hidden; }
.p-nav .brand { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12.5px; }
.p-nav .brand svg { width: 16px; height: 16px; }
.p-nav .brand small { color: var(--m-muted); font-weight: 500; font-size: 10px; }
.p-nav a { color: var(--m-muted); font-weight: 600; text-decoration: none; padding: 3px 8px; border-radius: 99px; }
.p-nav a.on { color: var(--m-text); background: var(--m-surface); }
.p-nav .sp { flex: 1; }
.p-main { padding: 14px 18px 18px; display: grid; gap: 10px; }
.p-crumb { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); font-weight: 700; }
.p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.p-head h4 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
.p-head span { color: var(--m-muted); }
.p-pill { font-size: 9.5px; font-weight: 700; border-radius: 99px; padding: 1px 8px; border: 1px solid var(--m-accent); color: var(--m-accent); white-space: nowrap; }
.p-pill.ok { border-color: var(--m-success); color: var(--m-success); }
.p-age { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--m-border); background: var(--m-surface); border-radius: 12px; padding: 9px 12px; }
.p-age p { margin: 0; color: var(--m-muted); font-size: 10px; } .p-age p b { display: block; color: var(--m-text); font-size: 11.5px; }
.p-seg { display: flex; gap: 4px; flex: none; }
.p-seg span { border: 1px solid var(--m-border); border-radius: 8px; padding: 3px 8px; font-weight: 700; }
.p-seg span.on { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.p-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--m-border); font-weight: 600; color: var(--m-muted); }
.p-tabs span { padding: 0 2px 6px; }
.p-tabs span.on { color: var(--m-text); box-shadow: inset 0 -2px var(--m-accent); }
.p-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: start; }
.p-cal { border: 1px solid var(--m-border); border-radius: 12px; padding: 8px; background: var(--m-surface); }
.p-cal .mo { display: flex; justify-content: center; gap: 10px; font-weight: 800; font-size: 12px; margin-bottom: 6px; }
.p-cal .mo i { font-style: normal; color: var(--m-muted); }
.p-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.p-grid .dw { font-size: 7.5px; color: var(--m-muted); text-align: center; font-weight: 700; }
.p-grid .d { min-height: 32px; border-radius: 5px; background: #221D33; padding: 2px 3px; font-size: 8.5px; font-weight: 700; display: grid; align-content: start; gap: 1px; overflow: hidden; }
.p-grid .d.x { background: none; color: #4A4460; }
.p-grid .d.sel { box-shadow: inset 0 0 0 1.5px var(--m-primary); }
.p-grid .e { font-style: normal; font-size: 6.5px; font-weight: 700; border-radius: 3px; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-grid .e.pk { background: rgba(244,114,182,.2); color: var(--m-accent); }
.p-grid .e.cy { background: rgba(34,211,238,.16); color: var(--m-cyan); }
.p-side { display: grid; gap: 8px; }
.p-side .hd { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 11.5px; }
.p-btn { display: inline-block; border-radius: 8px; padding: 4px 10px; font-weight: 700; background: var(--m-primary); color: #fff; white-space: nowrap; }
.p-btn.g { background: var(--m-surface); border: 1px solid var(--m-border); color: var(--m-text); }
.p-list { border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-surface); }
.p-list > div { padding: 8px 10px; display: grid; gap: 2px; }
.p-list > div + div { border-top: 1px solid var(--m-border); }
.p-list b { font-size: 11.5px; }
.p-list span { color: var(--m-muted); font-size: 10px; }
.p-list .acts { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.p-list .p-btn { color: #fff; font-size: 10px; } .p-list .p-btn.g { color: var(--m-text); }
.p-list .acts em { font-style: normal; color: var(--m-muted); font-weight: 600; }
.p-intro { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--m-muted); }
.p-form { border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-surface); padding: 10px; display: grid; gap: 7px; }
.p-form .t { font-weight: 800; font-size: 11.5px; }
.p-f { display: grid; gap: 2px; }
.p-f label { font-size: 9px; color: var(--m-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.p-f div { background: #0E0B16; border: 1px solid var(--m-border); border-radius: 7px; padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-days { display: flex; gap: 3px; }
.p-days span { border: 1px solid var(--m-border); border-radius: 6px; padding: 1px 5px; font-weight: 700; font-size: 9.5px; }
.p-days span.on { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }

/* Small screens: swipe through the phones instead of stacking them */
@media (max-width: 760px) {
  .shots.swipe { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 6px 20px 18px; scrollbar-width: none; }
  .shots.swipe::-webkit-scrollbar { display: none; }
  .shots.swipe .shot { scroll-snap-align: center; flex: none; }
  .shots.duo { grid-template-columns: 1fr; }
  .p-split { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .p-nav a:not(.on) { display: none; }
}
@media print { .shots-wrap { display: none !important; } }

/* Icon shapes */
.ic-flame { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M12 2c.6 3.4 2.6 5 4.2 6.9A7 7 0 1 1 5 13.2c0-2 .8-3.6 2-4.8.2 1.6 1 2.8 2.2 3.4C9 8.2 10 4.6 12 2z%22/%3E%3C/svg%3E"); }
.ic-bookmark { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M6 2.5h12a1 1 0 0 1 1 1V22l-7-4.6L5 22V3.5a1 1 0 0 1 1-1z%22/%3E%3C/svg%3E"); }
.ic-map { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M3 6.5l6-3 6 3 6-3v14l-6 3-6-3-6 3zM9 3.5v14M15 6.5v14%22/%3E%3C/svg%3E"); }
.ic-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 x=%223.5%22 y=%225%22 width=%2217%22 height=%2215.5%22 rx=%222.5%22/%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M3.5 10h17M8 3v4M16 3v4%22/%3E%3C/svg%3E"); }
.ic-people { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle fill=%22%23fff%22 cx=%229%22 cy=%228%22 r=%223.6%22/%3E%3Cpath fill=%22%23fff%22 d=%22M2 20c0-4 3.2-6.5 7-6.5s7 2.5 7 6.5z%22/%3E%3Ccircle fill=%22%23fff%22 cx=%2217%22 cy=%229%22 r=%222.8%22/%3E%3Cpath fill=%22%23fff%22 d=%22M17.5 13.2c2.8.3 4.5 2.4 4.5 5.3h-4.4c0-2-.6-3.8-2-5.1z%22/%3E%3C/svg%3E"); }
.ic-heart { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M12 21s-8.5-5.2-8.5-11.2A4.8 4.8 0 0 1 12 6.6a4.8 4.8 0 0 1 8.5 3.2C20.5 15.8 12 21 12 21z%22/%3E%3C/svg%3E"); }
.ic-location { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7zm0 4.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z%22/%3E%3C/svg%3E"); }
.ic-sparkles { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M10 2l1.9 5.6L17.5 9.5l-5.6 1.9L10 17l-1.9-5.6L2.5 9.5l5.6-1.9zM18 13l1 2.9 2.9 1-2.9 1L18 21l-1-3.1-2.9-1 2.9-1z%22/%3E%3C/svg%3E"); }
.ic-repeat { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M17 2.5l3 3-3 3M4 11V9.5a4 4 0 0 1 4-4h12M7 21.5l-3-3 3-3M20 13v1.5a4 4 0 0 1-4 4H4%22/%3E%3C/svg%3E"); }
.ic-search { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 cx=%2210.5%22 cy=%2210.5%22 r=%226.5%22/%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M15.5 15.5L21 21%22/%3E%3C/svg%3E"); }
.ic-back { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M15 4l-8 8 8 8%22/%3E%3C/svg%3E"); }
.ic-chev { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M9 5l7 7-7 7%22/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M4.5 12.5l5 5 10-11%22/%3E%3C/svg%3E"); }
.ic-mic { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect fill=%22%23fff%22 x=%228.5%22 y=%222%22 width=%227%22 height=%2212%22 rx=%223.5%22/%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M5 11a7 7 0 0 0 14 0M12 18v4%22/%3E%3C/svg%3E"); }
.ic-music { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M9 17.5V5l11-2.5v12.5h-.1A3 3 0 1 1 18 12.3V7L11 8.6v9h-.1A3 3 0 1 1 9 14.8z%22/%3E%3C/svg%3E"); }
.ic-bell { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M12 2.5a6 6 0 0 1 6 6v4.2l2 3.3H4l2-3.3V8.5a6 6 0 0 1 6-6zM9.5 18h5a2.5 2.5 0 0 1-5 0z%22/%3E%3C/svg%3E"); }
.ic-navigate { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M21 3L3 10.5l7.5 3 3 7.5z%22/%3E%3C/svg%3E"); }
.ic-chev-down { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22 d=%22M5 9l7 7 7-7%22/%3E%3C/svg%3E"); }

/* Dancers tonight: lead / follow balance */
.m-dance { background: var(--m-surface); border-radius: 12px; padding: 8px 10px; display: grid; gap: 4px; }
.m-dance .hd { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--m-muted); }
.m-dance .hd b { color: var(--m-text); font-size: 12px; }
.m-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; }
.m-bar i { display: block; }
.m-dance .ft { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; }
.m-dance .ft .l { color: var(--m-primary); } .m-dance .ft .f { color: var(--m-accent); } .m-dance .ft span { color: var(--m-muted); font-weight: 500; }
.m-link { color: var(--m-cyan); font-weight: 600; font-size: 10.5px; }