/* ──────────────────────────────────────────────────────────────────────────
   MSD Test Zone — athlete-facing test catalog + logging
   Uses platform tokens (--msd-*). Mobile full-bleed; desktop fits 100% zoom.
   ────────────────────────────────────────────────────────────────────────── */

.tz-wrap {
    color: var(--msd-text, #efefef);
    font-family: var(--msd-font-sans, 'DM Sans', system-ui, sans-serif);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.tz-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--msd-space-md, 16px);
    flex-wrap: wrap;
    margin-bottom: var(--msd-space-md, 16px);
}
.tz-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: var(--msd-text-2xl, 28px);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 4px;
    color: var(--msd-text, #efefef);
}
.tz-sub { color: var(--msd-text-2, #7a7a7a); font-size: var(--msd-text-sm, 13px); margin: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tz-btn {
    border: 1px solid var(--msd-border-2, #242424);
    background: transparent;
    color: var(--msd-text, #efefef);
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: var(--msd-text-sm, 13px);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--msd-transition-fast, 0.15s ease);
}
.tz-btn:hover { border-color: var(--msd-gold, #C9A84C); color: var(--msd-gold, #C9A84C); }
.tz-btn-primary { background: var(--msd-gold, #C9A84C); color: #000; border-color: var(--msd-gold, #C9A84C); }
.tz-btn-primary:hover { background: #eac14d; color: #000; }
.tz-btn-ghost { background: var(--msd-bg-3, #141414); }
.tz-btn-danger { color: var(--msd-red, #ff5252); border-color: rgba(255,82,82,0.4); }
.tz-btn-danger:hover { background: var(--msd-red, #ff5252); color: #fff; border-color: var(--msd-red, #ff5252); }
.tz-btn-sm { padding: 6px 12px; font-size: var(--msd-text-xs, 11px); }
.tz-btn-ic { font-size: 16px; line-height: 1; }

/* ── Category chips ──────────────────────────────────────────────────────── */
.tz-categories {
    display: flex;
    gap: var(--msd-space-sm, 8px);
    flex-wrap: wrap;
    margin-bottom: var(--msd-space-lg, 24px);
}
.tz-cat-chip {
    --tz-cat-color: var(--msd-gold, #C9A84C);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border-2, #242424);
    color: var(--msd-text-2, #7a7a7a);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--msd-text-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--msd-transition-fast, 0.15s ease);
}
.tz-cat-chip:hover { color: var(--msd-text, #efefef); border-color: var(--tz-cat-color); }
.tz-cat-chip.active {
    color: #fff;
    border-color: var(--tz-cat-color);
    background: color-mix(in srgb, var(--tz-cat-color) 18%, transparent);
}
.tz-cat-ic { font-size: 14px; }

/* ── Catalog grid ────────────────────────────────────────────────────────── */
.tz-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--msd-space-md, 16px);
}
.tz-loading { color: var(--msd-text-2, #7a7a7a); font-size: var(--msd-text-sm, 13px); padding: var(--msd-space-lg, 24px); grid-column: 1 / -1; }
.tz-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--msd-text-2, #7a7a7a);
    padding: 64px var(--msd-space-md, 16px);
}
.tz-empty-ic { font-size: 44px; }
.tz-empty-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--msd-text, #efefef); font-size: var(--msd-text-lg, 18px);
}
.tz-empty-sub { font-size: var(--msd-text-sm, 13px); max-width: 360px; }

/* ── Test card ───────────────────────────────────────────────────────────── */
.tz-card {
    position: relative;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border-2, #242424);
    border-radius: var(--msd-r-md, 14px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--msd-transition-fast, 0.15s ease), transform var(--msd-transition-fast, 0.15s ease);
    display: flex;
    flex-direction: column;
}
.tz-card:hover { border-color: var(--msd-gold-glow, rgba(201,168,76,0.28)); transform: translateY(-2px); }
.tz-card-archived { opacity: 0.55; }
.tz-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--msd-bg-3, #141414);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tz-card-thumb-empty {
    --tz-cat-color: var(--msd-gold, #C9A84C);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tz-cat-color) 22%, var(--msd-bg-3, #141414)), var(--msd-bg-2, #0d0d0d));
}
.tz-card-thumb-ic { font-size: 40px; opacity: 0.85; }
.tz-card-play {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(2px);
}
.tz-card-proc {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: var(--msd-text-xs, 11px); padding: 4px 8px; border-radius: 999px;
}
.tz-card-body { padding: var(--msd-space-md, 16px); display: flex; flex-direction: column; gap: 6px; }
.tz-card-pill {
    --tz-cat-color: var(--msd-gold, #C9A84C);
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--msd-text-xs, 11px); font-weight: 700;
    color: var(--tz-cat-color);
    background: color-mix(in srgb, var(--tz-cat-color) 14%, transparent);
    padding: 3px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tz-card-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700; font-size: var(--msd-text-lg, 18px);
    line-height: 1.15; color: var(--msd-text, #efefef);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.tz-card-arch-tag { font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); -webkit-text-fill-color: var(--msd-text-2, #7a7a7a); }
.tz-card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.tz-card-best {
    font-size: var(--msd-text-xs, 11px); font-weight: 700;
    color: var(--msd-gold, #C9A84C);
    background: var(--msd-gold-dim, rgba(201,168,76,0.13));
    padding: 3px 8px; border-radius: 999px;
}
.tz-card-new { font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); }
.tz-card-att { font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); }
.tz-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.tz-card-actions button {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.tz-card-actions button:hover { background: var(--msd-gold, #C9A84C); color: #000; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.tz-mini-spin {
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: tz-spin 0.7s linear infinite;
}
@keyframes tz-spin { to { transform: rotate(360deg); } }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.tz-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: var(--msd-z-modal, 1000);
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--msd-space-lg, 24px) var(--msd-space-md, 16px);
    overflow-y: auto;
    backdrop-filter: blur(3px);
}
.tz-modal-shell {
    background: var(--msd-bg-1, #070707);
    border: 1px solid var(--msd-border-2, #242424);
    border-radius: var(--msd-r-lg, 18px);
    width: 100%;
    max-width: 560px;
    padding: var(--msd-space-lg, 24px);
    position: relative;
    margin: auto 0;
}
.tz-detail-shell { max-width: 640px; }
.tz-modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--msd-border-2, #242424);
    background: var(--msd-bg-3, #141414);
    color: var(--msd-text, #efefef);
    cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.tz-modal-close:hover { border-color: var(--msd-gold, #C9A84C); color: var(--msd-gold, #C9A84C); }
.tz-modal-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    font-size: var(--msd-text-xl, 22px); margin: 0 0 var(--msd-space-md, 16px);
    padding-right: 40px;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */
.tz-detail-head { margin-bottom: var(--msd-space-md, 16px); padding-right: 40px; }
.tz-detail-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    font-size: var(--msd-text-xl, 22px); margin: 6px 0 0; line-height: 1.1;
}
.tz-detail-video { border-radius: var(--msd-r-md, 14px); overflow: hidden; margin-bottom: var(--msd-space-md, 16px); background: #000; }
.tz-detail-video .msd-bunny-video { width: 100%; }
.tz-detail-video-proc {
    display: flex; align-items: center; gap: 8px;
    background: var(--msd-bg-3, #141414);
    padding: 14px; border-radius: var(--msd-r-md, 14px);
    color: var(--msd-text-2, #7a7a7a); font-size: var(--msd-text-sm, 13px);
}
.tz-detail-instr {
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border, #181818);
    border-radius: var(--msd-r-md, 14px);
    padding: var(--msd-space-md, 16px);
    font-size: var(--msd-text-base, 15px);
    line-height: 1.5;
    margin-bottom: var(--msd-space-md, 16px);
}
.tz-muted { color: var(--msd-text-2, #7a7a7a); }
.tz-detail-ownerbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--msd-space-md, 16px); }

/* ── Generic fields ──────────────────────────────────────────────────────── */
.tz-field { display: block; margin-bottom: var(--msd-space-md, 16px); }
.tz-field-lbl {
    display: block; font-size: var(--msd-text-sm, 13px); font-weight: 600;
    color: var(--msd-text, #efefef); margin-bottom: 6px;
}
.tz-field-opt { color: var(--msd-text-2, #7a7a7a); font-weight: 400; }
.tz-field-row { display: flex; gap: var(--msd-space-md, 16px); }
.tz-field-row .tz-field { flex: 1; }
.tz-field input[type="text"],
.tz-field input[type="date"],
.tz-field input[type="number"],
.tz-field input[type="file"],
.tz-field select,
.tz-field textarea {
    width: 100%;
    background: var(--msd-bg-4, #1c1c1c);
    border: 1px solid var(--msd-border-2, #242424);
    color: var(--msd-text, #efefef);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--msd-text-base, 15px);
    font-family: inherit;
    box-sizing: border-box;
}
.tz-field textarea { resize: vertical; }
.tz-field input:focus, .tz-field select:focus, .tz-field textarea:focus { outline: none; border-color: var(--msd-gold, #C9A84C); }

/* ── Log form ────────────────────────────────────────────────────────────── */
.tz-log {
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-gold-dim, rgba(201,168,76,0.13));
    border-radius: var(--msd-r-md, 14px);
    padding: var(--msd-space-md, 16px);
    margin-bottom: var(--msd-space-lg, 24px);
}
.tz-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: var(--msd-space-md, 16px); flex-wrap: wrap; }
.tz-log-head-t {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    font-size: var(--msd-text-lg, 18px); color: var(--msd-gold, #C9A84C);
}
.tz-log-best { font-size: var(--msd-text-sm, 13px); color: var(--msd-text-2, #7a7a7a); }
.tz-log-best strong { color: var(--msd-text, #efefef); }
.tz-log-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--msd-space-sm, 8px); margin-bottom: var(--msd-space-md, 16px); }
.tz-log-field-lbl { display: block; font-size: var(--msd-text-sm, 13px); color: var(--msd-text, #efefef); margin-bottom: 6px; }
.tz-unit { color: var(--msd-text-2, #7a7a7a); }
.tz-log-input {
    width: 100%;
    background: var(--msd-bg-4, #1c1c1c);
    border: 1px solid var(--msd-border-2, #242424);
    color: var(--msd-text, #efefef);
    padding: 10px 12px; border-radius: 8px;
    font-size: var(--msd-text-lg, 18px); font-weight: 700;
    box-sizing: border-box; font-family: inherit;
}
.tz-log-input:focus { outline: none; border-color: var(--msd-gold, #C9A84C); }
.tz-log-actions { display: flex; justify-content: flex-end; }

/* ── Upload progress ─────────────────────────────────────────────────────── */
.tz-upload-progress { display: flex; align-items: center; gap: 10px; margin-bottom: var(--msd-space-md, 16px); }
.tz-upload-progress-bar { flex: 1; height: 8px; background: var(--msd-bg-4, #1c1c1c); border-radius: 999px; overflow: hidden; }
.tz-upload-progress-bar span { display: block; height: 100%; width: 0; background: var(--msd-gold, #C9A84C); transition: width 0.2s ease; }
.tz-upload-progress-pct { font-size: var(--msd-text-sm, 13px); color: var(--msd-text-2, #7a7a7a); min-width: 38px; text-align: right; }

/* ── History ─────────────────────────────────────────────────────────────── */
.tz-history { }
.tz-history-head {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    font-size: var(--msd-text-base, 15px); color: var(--msd-text, #efefef);
    margin-bottom: var(--msd-space-sm, 8px);
    display: flex; align-items: center; gap: 8px;
}
.tz-history-count {
    background: var(--msd-bg-4, #1c1c1c); color: var(--msd-text-2, #7a7a7a);
    font-size: var(--msd-text-xs, 11px); padding: 1px 8px; border-radius: 999px;
    font-family: var(--msd-font-sans, sans-serif);
}
.tz-history-empty { color: var(--msd-text-2, #7a7a7a); font-size: var(--msd-text-sm, 13px); padding: 12px 0; }
.tz-hr {
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border, #181818);
    border-radius: var(--msd-r-sm, 10px);
    margin-bottom: var(--msd-space-sm, 8px);
}
.tz-hr-main { display: flex; align-items: center; gap: 12px; padding: 12px; }
.tz-hr-score {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; font-size: var(--msd-text-2xl, 28px);
    color: var(--msd-gold, #C9A84C); line-height: 1;
    min-width: 48px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.tz-hr-info { flex: 1; min-width: 0; }
.tz-hr-date { font-size: var(--msd-text-sm, 13px); font-weight: 600; color: var(--msd-text, #efefef); }
.tz-hr-breakdown { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.tz-hr-v { font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); }
.tz-hr-v strong { color: var(--msd-text, #efefef); }
.tz-hr-note { font-size: var(--msd-text-sm, 13px); color: var(--msd-text-2, #7a7a7a); margin-top: 4px; font-style: italic; }
.tz-hr-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tz-hr-proof {
    border: 1px solid var(--msd-border-2, #242424);
    background: var(--msd-bg-3, #141414);
    color: var(--msd-text, #efefef);
    font-size: var(--msd-text-xs, 11px);
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.tz-hr-proof:hover { border-color: var(--msd-gold, #C9A84C); color: var(--msd-gold, #C9A84C); }
.tz-hr-proof-proc { cursor: default; color: var(--msd-text-2, #7a7a7a); }
.tz-hr-del {
    border: none; background: transparent; color: var(--msd-text-2, #7a7a7a);
    cursor: pointer; font-size: 14px; padding: 4px;
}
.tz-hr-del:hover { color: var(--msd-red, #ff5252); }
.tz-hr-media { padding: 0 12px 12px; }
.tz-hr-media .msd-bunny-video { width: 100%; border-radius: var(--msd-r-sm, 10px); overflow: hidden; }
.tz-proof-img { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--msd-r-sm, 10px); background: #000; }

/* ── Fields builder (owner) ──────────────────────────────────────────────── */
.tz-fields-builder { display: flex; flex-direction: column; gap: var(--msd-space-sm, 8px); margin-bottom: var(--msd-space-sm, 8px); }
.tz-field-builder-row { display: flex; gap: var(--msd-space-sm, 8px); align-items: center; }
.tz-fb-label { flex: 2; }
.tz-fb-unit { flex: 1; }
.tz-field-builder-row input {
    background: var(--msd-bg-4, #1c1c1c);
    border: 1px solid var(--msd-border-2, #242424);
    color: var(--msd-text, #efefef);
    padding: 9px 11px; border-radius: 8px;
    font-size: var(--msd-text-sm, 13px); font-family: inherit;
    box-sizing: border-box; min-width: 0;
}
.tz-field-builder-row input:focus { outline: none; border-color: var(--msd-gold, #C9A84C); }
.tz-fb-del {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--msd-border-2, #242424);
    background: var(--msd-bg-3, #141414);
    color: var(--msd-text-2, #7a7a7a);
    cursor: pointer; font-size: 12px;
}
.tz-fb-del:hover { color: var(--msd-red, #ff5252); border-color: var(--msd-red, #ff5252); }
.tz-fb-rank {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--msd-border-2, #242424);
    background: var(--msd-bg-3, #141414);
    color: var(--msd-text-3, #3a3a3a);
    cursor: pointer; font-size: 14px; line-height: 1;
}
.tz-fb-rank:hover { color: var(--msd-gold, #C9A84C); border-color: var(--msd-gold, #C9A84C); }
.tz-fb-rank.is-primary { color: #000; background: var(--msd-gold, #C9A84C); border-color: var(--msd-gold, #C9A84C); }
.tz-fields-hint { margin: 6px 0 0; font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); line-height: 1.5; }
.tz-fields-hint em { color: var(--msd-text, #efefef); font-style: normal; font-weight: 600; }
.tz-rank-star { color: var(--msd-gold, #C9A84C); font-size: 0.9em; }
.tz-hr-v-primary { color: var(--msd-text, #efefef); }
.tz-hr-v-primary strong { color: var(--msd-gold, #C9A84C); }

/* ── Video slot (owner editor) ───────────────────────────────────────────── */
.tz-video-current { display: flex; align-items: center; gap: 10px; margin-bottom: var(--msd-space-sm, 8px); }
.tz-e-video-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; }
.tz-e-video-name { flex: 1; font-size: var(--msd-text-sm, 13px); color: var(--msd-text-2, #7a7a7a); }

/* ── Modal actions ───────────────────────────────────────────────────────── */
.tz-modal-actions { display: flex; justify-content: flex-end; gap: var(--msd-space-sm, 8px); margin-top: var(--msd-space-md, 16px); }

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.tz-board-list { display: flex; flex-direction: column; gap: var(--msd-space-sm, 8px); }
.tz-board-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border, #181818);
    border-radius: var(--msd-r-sm, 10px);
    padding: 10px 12px;
}
.tz-board-rank { font-weight: 800; font-size: var(--msd-text-lg, 18px); min-width: 30px; text-align: center; }
.tz-board-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--msd-border-2, #242424); }
.tz-board-name { flex: 1; font-weight: 600; font-size: var(--msd-text-sm, 13px); }
.tz-board-score {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; font-size: var(--msd-text-xl, 22px);
    color: var(--msd-gold, #C9A84C); font-variant-numeric: tabular-nums;
}
.tz-board-ctl { display: flex; justify-content: space-between; gap: var(--msd-space-sm, 8px); margin-top: var(--msd-space-md, 16px); padding-top: var(--msd-space-md, 16px); border-top: 1px solid var(--msd-border-2, #242424); }

/* ── v2: Beat the Coach ──────────────────────────────────────────────────── */
.tz-card-coach {
    font-size: var(--msd-text-xs, 11px); font-weight: 700;
    color: var(--msd-text-2, #7a7a7a);
    background: var(--msd-bg-4, #1c1c1c);
    padding: 3px 8px; border-radius: 999px;
    white-space: nowrap;
}
.tz-card-coach-beaten {
    color: #000;
    background: var(--msd-gold, #C9A84C);
}
.tz-coach {
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-gold-dim, rgba(201,168,76,0.13));
    border-radius: var(--msd-r-md, 14px);
    padding: var(--msd-space-md, 16px);
    margin-bottom: var(--msd-space-md, 16px);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--msd-space-md, 16px);
}
.tz-coach-beaten { border-color: var(--msd-gold, #C9A84C); box-shadow: 0 0 0 1px var(--msd-gold-glow, rgba(201,168,76,0.28)); }
.tz-coach-empty { display: block; color: var(--msd-text-2, #7a7a7a); font-size: var(--msd-text-sm, 13px); }
.tz-coach-main { flex: 1; min-width: 180px; }
.tz-coach-label {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    font-size: var(--msd-text-sm, 13px); color: var(--msd-gold, #C9A84C);
}
.tz-coach-score {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; font-size: var(--msd-text-3xl, 36px);
    color: var(--msd-text, #efefef); line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.tz-coach-status { display: block; font-size: var(--msd-text-sm, 13px); color: var(--msd-text-2, #7a7a7a); margin-top: 2px; }
.tz-coach-status-beaten { color: var(--msd-gold, #C9A84C); font-weight: 700; }
.tz-coach-actions { flex-shrink: 0; }
.tz-coach-media { flex-basis: 100%; }
.tz-coach-media .msd-bunny-video { width: 100%; border-radius: var(--msd-r-sm, 10px); overflow: hidden; }

/* ── v2: two-tier proof ──────────────────────────────────────────────────── */
.tz-field-hint { display: block; margin-top: 6px; font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); line-height: 1.5; font-weight: 400; }
.tz-hr-verified {
    font-size: var(--msd-text-xs, 11px); font-weight: 700;
    color: var(--msd-green, #3ecf8e);
    background: var(--msd-green-dim, rgba(62,207,142,0.13));
    padding: 1px 7px; border-radius: 999px;
    vertical-align: 1px;
}
.tz-hr-unverified {
    font-size: var(--msd-text-xs, 11px); font-weight: 600;
    color: var(--msd-text-2, #7a7a7a);
    background: var(--msd-bg-4, #1c1c1c);
    padding: 1px 7px; border-radius: 999px;
    vertical-align: 1px;
}

/* ── v2: leaderboard for everyone ────────────────────────────────────────── */
.tz-board-note { margin: -8px 0 var(--msd-space-md, 16px); font-size: var(--msd-text-xs, 11px); color: var(--msd-text-2, #7a7a7a); }
.tz-board-row-coach { border-color: var(--msd-gold, #C9A84C); background: color-mix(in srgb, var(--msd-gold, #C9A84C) 7%, var(--msd-bg-2, #0d0d0d)); }
.tz-board-row-you { border-color: var(--msd-border-2, #242424); background: var(--msd-bg-3, #141414); }
.tz-board-tag-coach, .tz-board-tag-you {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: var(--msd-text-xs, 11px); font-weight: 800; letter-spacing: 1px;
    padding: 1px 7px; border-radius: 999px; margin-left: 4px;
    vertical-align: 1px;
}
.tz-board-tag-coach { background: var(--msd-gold, #C9A84C); color: #000; }
.tz-board-tag-you   { background: var(--msd-bg-5, #242424); color: var(--msd-text-2, #7a7a7a); }
.tz-board-beat { margin-left: 4px; font-size: 12px; }

/* ── v2: celebration overlay ─────────────────────────────────────────────── */
.tz-celebrate {
    position: fixed; inset: 0;
    z-index: calc(var(--msd-z-modal, 1000) + 10);
    background: rgba(0,0,0,0.88);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.tz-celebrate-inner { text-align: center; padding: var(--msd-space-lg, 24px); }
.tz-celebrate-ic { font-size: 72px; line-height: 1; }
.tz-celebrate-title {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    font-size: var(--msd-text-3xl, 36px); color: var(--msd-gold, #C9A84C);
    margin-top: var(--msd-space-md, 16px);
    text-shadow: 0 0 40px var(--msd-gold-glow, rgba(201,168,76,0.28));
}
.tz-celebrate-sub { color: var(--msd-text, #efefef); font-size: var(--msd-text-base, 15px); margin-top: 6px; }
.tz-celebrate-in .tz-celebrate-inner { animation: tz-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes tz-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tz-catalog { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--msd-space-sm, 8px); }
    .tz-card-title { font-size: var(--msd-text-base, 15px); }
    .tz-modal { padding: 0; align-items: stretch; }
    .tz-modal-shell {
        max-width: 100%;
        border-radius: 0;
        border-left: none; border-right: none;
        min-height: 100vh;
        padding: max(var(--msd-space-lg, 24px), var(--cj-safe-top, 0px)) var(--msd-space-md, 16px) var(--page-bot, 64px);
    }
    .tz-field-row { flex-direction: column; gap: 0; }
}