/**
 * Public artists pages — enterprise design system
 * File: /assets/css/artists-enterprise.css
 *
 * Used by /views/artists/directory.php (route /artists) and
 * /views/artists/profile.php (route /artist/{slug}). Same visual language as
 * the admin `.zt` sheet and the public "Enterprise" templates: ink text,
 * hairline borders, soft surfaces, one tenant accent, no gradients.
 *
 * Each page emits its tenant colors in a small :root block
 * (--primary-color / --secondary-color / --accent-color); this sheet reads
 * them through the --zar-* tokens. Everything is prefixed `zar-` so it cannot
 * collide with header.php, footer.php or the Tailwind utilities the pages
 * still load.
 */

:root {
    --zar-primary: var(--primary-color, #2563EB);
    --zar-ink:   #0F172A;
    --zar-body:  #475569;
    --zar-muted: #94A3B8;
    --zar-line:  #E2E8F0;
    --zar-soft:  #F8FAFC;
    --zar-ground: #F1F5F9;
    --zar-radius: 14px;
    --zar-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .04);
}

/* ------------------------------------------------------------------ shell */
.zar {
    background: var(--zar-ground);
    color: var(--zar-body);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}
.zar button, .zar input, .zar select, .zar textarea, .zar a { font-family: inherit; }
.zar-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.zar-section { padding: 28px 0; }
.zar-section--last { padding-bottom: 64px; }
@media (max-width: 640px) {
    .zar-wrap { padding: 0 16px; }
    .zar-section { padding: 20px 0; }
    .zar-section--last { padding-bottom: 44px; }
}

/* ------------------------------------------------------------- page head */
.zar-head {
    background: #fff;
    border-bottom: 1px solid var(--zar-line);
    padding: 40px 0 34px;
}
.zar-head-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.zar-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--zar-primary);
}
.zar-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--zar-line); }
.zar-title {
    font-size: 34px; font-weight: 800; letter-spacing: -.025em;
    color: var(--zar-ink); margin: 8px 0 0; line-height: 1.12;
}
.zar-sub { font-size: 14.5px; color: var(--zar-body); margin: 8px 0 0; max-width: 62ch; line-height: 1.6; }
.zar-count {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--zar-line); background: var(--zar-soft);
    font-size: 12.5px; font-weight: 700; color: var(--zar-body); white-space: nowrap;
}
.zar-count i { color: var(--zar-primary); font-size: 11px; }
@media (max-width: 640px) {
    .zar-head { padding: 26px 0 22px; }
    .zar-title { font-size: 26px; }
}

/* ------------------------------------------------------------- back link */
.zar-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--zar-muted);
    text-decoration: none; transition: color .15s ease;
}
.zar-back:hover { color: var(--zar-primary); }

/* --------------------------------------------------------------- buttons */
.zar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--zar-primary); color: #fff;
    font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zar-btn:hover {
    color: #fff; filter: brightness(1.06); transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--zar-primary) 60%, transparent);
}
.zar-btn--block { width: 100%; }
.zar-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--zar-line); background: #fff; color: var(--zar-ink);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.zar-btn-ghost:hover { background: var(--zar-soft); border-color: #CBD5E1; color: var(--zar-ink); }

/* ---------------------------------------------------------------- toolbar */
.zar-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--zar-line); border-radius: var(--zar-radius);
    box-shadow: var(--zar-shadow); padding: 14px 16px;
}
.zar-search { position: relative; flex: 1 1 280px; min-width: 0; }
.zar-search > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--zar-muted); font-size: 13px; pointer-events: none;
}
.zar-input {
    width: 100%; padding: 11px 14px 11px 38px;
    border: 1px solid var(--zar-line); border-radius: 10px;
    background: #fff; color: var(--zar-ink); font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.zar-input::placeholder { color: var(--zar-muted); }
.zar-input:focus {
    outline: none; border-color: var(--zar-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zar-primary) 14%, transparent);
}
.zar-search-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: var(--zar-soft); color: var(--zar-muted); font-size: 11px;
}
.zar-search-clear:hover { background: var(--zar-line); color: var(--zar-ink); }

/* ------------------------------------------------------------ genre chips */
.zar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zar-chip {
    display: inline-flex; align-items: center;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--zar-line); background: #fff; color: var(--zar-body);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.zar-chip:hover {
    border-color: color-mix(in srgb, var(--zar-primary) 35%, var(--zar-line));
    color: var(--zar-primary);
}
.zar-chip.active {
    background: var(--zar-primary); border-color: var(--zar-primary); color: #fff;
}

/* ------------------------------------------------------------ artist grid */
.zar-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
}
.zar-card {
    display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--zar-line);
    border-radius: var(--zar-radius); box-shadow: var(--zar-shadow); overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.zar-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--zar-primary) 32%, var(--zar-line));
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .28);
}
.zar-card-banner {
    height: 84px; position: relative; overflow: hidden;
    background: var(--zar-soft); border-bottom: 1px solid var(--zar-line);
}
.zar-card-banner-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.zar-card-banner-img::after { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, .28); }
.zar-card-banner--flat { background: color-mix(in srgb, var(--zar-primary) 8%, #fff); }
.zar-card-figure { position: relative; z-index: 1; margin: -34px 0 0; padding: 0 18px; }
.zar-avatar {
    width: 62px; height: 62px; border-radius: 14px; object-fit: cover; display: block;
    border: 3px solid #fff; background: var(--zar-soft);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .4);
}
.zar-avatar--initials {
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--zar-primary) 10%, #fff);
    color: var(--zar-primary); font-size: 19px; font-weight: 800; letter-spacing: .02em;
}
.zar-card-body { padding: 14px 18px 18px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* The text block absorbs the slack so the social row and the button land on the
   same line in every card of a row, however long the bio is. */
.zar-card-text { flex: 1 1 auto; min-width: 0; }
.zar-card-name {
    font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--zar-ink);
    margin: 0; line-height: 1.25;
}
.zar-card-genre {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--zar-primary);
}
.zar-card-desc {
    font-size: 13px; line-height: 1.6; color: var(--zar-body); margin: 10px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zar-card-events { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--zar-line); }
.zar-card-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--zar-line); }
/* Reserve the icon row's height even when an artist has no links, so the rule
   above the buttons sits at the same height across the row. */
.zar-card-socials { display: flex; align-items: center; }
/* Zero-width spacer the same height as an icon: an artist with no links keeps a
   band the exact height of one that has them, so the rule and the button below
   line up across the row. */
.zar-card-socials::before { content: ''; display: block; width: 0; height: 32px; flex: 0 0 auto; }
/* One line only — a wrapped icon row would knock this card's button out of line. */
.zar-card-socials .zar-socials { flex-wrap: nowrap; gap: 6px; }
.zar-card-socials .zar-social { width: 32px; height: 32px; font-size: 12.5px; }
.zar-social--more {
    background: var(--zar-soft); color: var(--zar-body);
    font-size: 11.5px; font-weight: 700; letter-spacing: -.01em;
}
.zar-social--more:hover { color: var(--zar-primary); border-color: color-mix(in srgb, var(--zar-primary) 35%, var(--zar-line)); }
.zar-card-cta { margin-top: 14px; }

/* ---------------------------------------------------------- social icons */
.zar-socials { display: flex; flex-wrap: wrap; gap: 7px; }
.zar-social {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--zar-line); background: #fff; color: var(--zar-muted);
    font-size: 13px; text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zar-social:hover { background: var(--zar-soft); border-color: #CBD5E1; }
.zar-social--web:hover      { color: var(--zar-ink); }
.zar-social--facebook:hover { color: #1877F2; border-color: #BFD7FB; }
.zar-social--instagram:hover{ color: #C13584; border-color: #F0C4DE; }
.zar-social--twitter:hover  { color: #0F172A; border-color: #CBD5E1; }
.zar-social--youtube:hover  { color: #FF0000; border-color: #FCC; }
.zar-social--spotify:hover  { color: #1DB954; border-color: #B7E9C8; }
.zar-social--tiktok:hover   { color: #0F172A; border-color: #CBD5E1; }
.zar-socials--lg .zar-social { width: 42px; height: 42px; border-radius: 11px; font-size: 15px; }

/* --------------------------------------------------------- event circles */
.zar-eventstack { display: flex; align-items: center; }
.zar-eventdot {
    width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
    background-size: cover; background-position: center; background-color: var(--zar-line);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    margin-left: -9px;
}
.zar-eventdot:first-child { margin-left: 0; }
.zar-eventdot--more {
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--zar-primary) 12%, #fff);
    color: var(--zar-primary); font-size: 10.5px; font-weight: 800;
}
.zar-microlabel {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--zar-muted); margin: 0 0 8px;
}

/* ----------------------------------------------------------- empty state */
.zar-empty {
    background: #fff; border: 1px solid var(--zar-line); border-radius: var(--zar-radius);
    box-shadow: var(--zar-shadow); text-align: center; padding: 54px 24px;
}
.zar-empty-ico {
    width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--zar-primary) 8%, #fff);
    color: var(--zar-primary); font-size: 20px;
}
.zar-empty-title { font-size: 17px; font-weight: 800; color: var(--zar-ink); }
.zar-empty-sub { font-size: 13.5px; color: var(--zar-muted); margin: 6px auto 18px; max-width: 46ch; line-height: 1.6; }

/* ═══════════════════════════════════════════════════ profile page ═══════ */

/* Banner: image (or video) under a flat scrim — no gradient wash */
.zar-hero { position: relative; height: 340px; overflow: hidden; background: var(--zar-ink); }
.zar-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.zar-hero-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zar-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .82) 0%, rgba(15, 23, 42, .34) 55%, rgba(15, 23, 42, .16) 100%);
}
.zar-hero-back { position: absolute; top: 18px; left: 0; right: 0; z-index: 3; }
.zar-hero-back .zar-back {
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .5);
    padding: 8px 13px; border-radius: 10px; color: var(--zar-ink);
}
.zar-hero-back .zar-back:hover { background: #fff; color: var(--zar-primary); }
@media (max-width: 768px) { .zar-hero { height: 240px; } }

/* Identity bar sits on the card that overlaps the banner */
.zar-idbar {
    position: relative; z-index: 2; margin-top: -74px;
    background: #fff; border: 1px solid var(--zar-line); border-radius: var(--zar-radius);
    box-shadow: var(--zar-shadow); padding: 20px 22px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.zar-idbar-avatar {
    width: 96px; height: 96px; border-radius: 16px; object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--zar-line); background: var(--zar-soft);
}
.zar-idbar-avatar--initials {
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--zar-primary) 10%, #fff);
    color: var(--zar-primary); font-size: 30px; font-weight: 800;
}
.zar-idbar-main { flex: 1 1 240px; min-width: 0; }
.zar-idbar-name {
    font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: var(--zar-ink);
    margin: 0; line-height: 1.15;
}
.zar-idbar-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
    font-size: 12.5px; color: var(--zar-muted);
}
.zar-genre {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--zar-primary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--zar-primary) 26%, var(--zar-line));
    color: var(--zar-primary); font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 640px) {
    .zar-idbar { margin-top: -52px; padding: 16px; gap: 14px; }
    .zar-idbar-avatar { width: 68px; height: 68px; border-radius: 13px; }
    .zar-idbar-avatar--initials { font-size: 22px; }
    .zar-idbar-name { font-size: 21px; }
}

/* Two-column body */
.zar-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .zar-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Content panels */
.zar-panel {
    background: #fff; border: 1px solid var(--zar-line); border-radius: var(--zar-radius);
    box-shadow: var(--zar-shadow); overflow: hidden;
}
.zar-panel + .zar-panel { margin-top: 22px; }
.zar-panel-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 22px; border-bottom: 1px solid var(--zar-line);
}
.zar-panel-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--zar-ink); }
.zar-panel-title i { color: var(--zar-primary); margin-right: 8px; }
.zar-panel-note {
    margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--zar-body);
    padding: 4px 10px; border-radius: 999px; background: var(--zar-soft); border: 1px solid var(--zar-line);
}
.zar-panel-body { padding: 20px 22px; }

/* Bio prose (author-supplied HTML from the admin Quill editor) */
.zar-prose { font-size: 14.5px; line-height: 1.75; color: var(--zar-body); }
.zar-prose > *:first-child { margin-top: 0; }
.zar-prose > *:last-child { margin-bottom: 0; }
.zar-prose p { margin: 0 0 13px; }
.zar-prose h1, .zar-prose h2, .zar-prose h3, .zar-prose h4 { color: var(--zar-ink); font-weight: 800; margin: 22px 0 10px; letter-spacing: -.01em; }
.zar-prose h1 { font-size: 21px; } .zar-prose h2 { font-size: 18px; } .zar-prose h3 { font-size: 16px; }
.zar-prose ul { list-style: disc; padding-left: 22px; margin: 0 0 13px; }
.zar-prose ol { list-style: decimal; padding-left: 22px; margin: 0 0 13px; }
.zar-prose li { margin-bottom: 5px; }
.zar-prose a { color: var(--zar-primary); font-weight: 600; }
.zar-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.zar-prose blockquote {
    margin: 0 0 13px; padding: 4px 0 4px 16px;
    border-left: 3px solid var(--zar-primary); color: var(--zar-ink);
}
.zar-prose strong { color: var(--zar-ink); }

/* Video gallery */
.zar-videos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.zar-video-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
    border-radius: 11px; border: 1px solid var(--zar-line); background: var(--zar-ink);
}
.zar-video-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.zar-video-frame:hover img { transform: scale(1.04); }
.zar-video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .28); transition: background .2s ease;
}
.zar-video-frame:hover .zar-video-play { background: rgba(15, 23, 42, .38); }
.zar-video-play span {
    width: 50px; height: 50px; border-radius: 999px; background: #fff; color: var(--zar-ink);
    display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px;
    box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .6); transition: transform .2s ease;
}
.zar-video-frame:hover .zar-video-play span { transform: scale(1.08); }
.zar-video-title { font-size: 12.5px; font-weight: 600; color: var(--zar-body); margin: 8px 0 0; }

/* Event rows */
.zar-event {
    display: flex; align-items: center; gap: 14px; padding: 14px 22px;
    border-bottom: 1px solid var(--zar-line); text-decoration: none;
    transition: background .14s ease;
}
.zar-event:last-child { border-bottom: 0; }
.zar-event:hover { background: var(--zar-soft); }
.zar-event-img {
    width: 62px; height: 62px; border-radius: 11px; flex: 0 0 auto;
    background-size: cover; background-position: center; background-color: var(--zar-line);
    border: 1px solid var(--zar-line);
}
.zar-event-main { flex: 1 1 auto; min-width: 0; }
.zar-event-name {
    font-size: 14.5px; font-weight: 700; color: var(--zar-ink); margin: 0 0 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zar-event-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--zar-muted); }
.zar-event-meta i { color: var(--zar-primary); margin-right: 5px; font-size: 11px; }
.zar-event-go {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--zar-line); color: var(--zar-muted); font-size: 11px;
    transition: background .14s ease, color .14s ease;
}
.zar-event:hover .zar-event-go { background: var(--zar-primary); border-color: var(--zar-primary); color: #fff; }
.zar-event--past .zar-event-img { filter: grayscale(1); opacity: .85; }
.zar-event--past .zar-event-meta i { color: var(--zar-muted); }

/* Form fields */
.zar-field + .zar-field { margin-top: 14px; }
.zar-label {
    display: block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--zar-ink); margin-bottom: 6px;
}
.zar-control {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--zar-line); border-radius: 10px;
    background: #fff; color: var(--zar-ink); font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.zar-control::placeholder { color: var(--zar-muted); }
.zar-control:focus {
    outline: none; border-color: var(--zar-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zar-primary) 14%, transparent);
}
textarea.zar-control { resize: vertical; line-height: 1.55; }

/* Messages */
.zar-msg {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; border-radius: 10px; margin-bottom: 16px;
    font-size: 13.5px; line-height: 1.55;
}
.zar-msg i { margin-top: 2px; }
.zar-msg-ok  { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.zar-msg-err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.zar-msg strong { display: block; margin-bottom: 2px; }
.zar-msg ul { list-style: disc; padding-left: 18px; margin: 4px 0 0; }

/* Share row */
.zar-share { display: flex; gap: 8px; }
.zar-share button {
    flex: 1 1 0; height: 40px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--zar-line); background: #fff; color: var(--zar-muted); font-size: 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zar-share button:hover { background: var(--zar-soft); border-color: #CBD5E1; }
.zar-share .zar-share--facebook:hover { color: #1877F2; }
.zar-share .zar-share--twitter:hover  { color: #0F172A; }
.zar-share .zar-share--linkedin:hover { color: #0A66C2; }
.zar-share .zar-share--email:hover    { color: var(--zar-primary); }
.zar-copy {
    width: 100%; margin-top: 10px; height: 40px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--zar-line); background: var(--zar-soft); color: var(--zar-ink);
    font-size: 13px; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.zar-copy:hover { background: #fff; border-color: #CBD5E1; }

/* Stats strip */
.zar-stats { display: flex; }
.zar-stat { flex: 1 1 0; padding: 18px 20px; text-align: center; border-right: 1px solid var(--zar-line); }
.zar-stat:last-child { border-right: 0; }
.zar-stat-value {
    font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--zar-ink);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.zar-stat-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--zar-muted); margin-top: 5px;
}

/* Embedded player panel */
.zar-embed { display: block; width: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .zar-card, .zar-btn, .zar-social, .zar-video-frame img, .zar-video-play span { transition: none; }
    .zar-card:hover, .zar-btn:hover { transform: none; }
}