/* Tik Receipts: branding, top bar + drawer, sign-in pages, Lives / Accounts pages, packs, mood chips.
   Loaded after app.css (which keeps the live page, player, popup and Fun search styles). */
:root { --topbar-h: 58px; --panel-3: #222639; --ring: rgba(37,244,238,.45); --shadow: 0 10px 30px rgba(0,0,0,.35); }
html { overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main.wrap { flex: 1; width: 100%; }
::selection { background: rgba(254,44,85,.35); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
h1 { font-size: 24px; letter-spacing: -.01em; }
.page-head h1 + .sub, .page-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ------------------------------------------------ brand */
.wordmark { font-weight: 850; font-size: 18px; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.wm-a { color: #fff; }
.wm-b { margin-left: .18em; background: linear-gradient(90deg, var(--accent-2), #a78bfa 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark.big { font-size: 30px; }
.logo-mark { display: block; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.brand { gap: 10px; text-decoration: none !important; }
.brand:hover .logo-mark { transform: rotate(-4deg) scale(1.05); }
.logo-mark { transition: transform .2s; }

/* ------------------------------------------------ top bar */
.topbar { height: var(--topbar-h); padding: 0 20px; flex-wrap: nowrap; gap: 18px; justify-content: flex-start;
    background: rgba(14,15,19,.86); backdrop-filter: saturate(1.4) blur(10px); }
.topbar .mainnav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: visible; }
.mainnav a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.mainnav a svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; flex: none; }
.mainnav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.mainnav a.active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.mainnav a.active svg { color: var(--accent-2); opacity: 1; }
.nav-foot { display: none; }
.top-right { display: flex; align-items: center; gap: 10px; flex: none; }
.who-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.btn.ghost { background: none; }
.btn.big { padding: 11px 16px; font-size: 15px; width: 100%; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9; }
@media (max-width: 1080px) { .top-right .who-chip { display: none; } .mainnav a { padding: 8px 9px; } }
@media (max-width: 860px) {
    .topbar { padding: 0 12px; backdrop-filter: none; background: #0e0f13; }  /* a backdrop-filter would trap the fixed drawer inside the bar */
    .top-right { display: none; }
    .nav-toggle { display: flex; }
    .topbar .mainnav { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(320px, 86vw); flex-direction: column; align-items: stretch;
        gap: 4px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--panel); border-left: 1px solid var(--border);
        display: none; z-index: 11; overflow-y: auto; box-shadow: var(--shadow); }
    .nav-open .topbar .mainnav { display: flex; animation: drawer-in .2s ease-out; }
    @keyframes drawer-in { from { transform: translateX(100%); } }
    .topbar .mainnav a { padding: 13px 14px; justify-content: flex-start; font-size: 16px; border-radius: 12px; }
    .mainnav a svg { width: 20px; height: 20px; }
    .mainnav a.active { box-shadow: inset 3px 0 0 var(--accent); }
    .nav-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
    .nav-foot .btn { width: 100%; padding: 10px; }
    body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .mainnav, .nav-toggle span, .logo-mark { transition: none; animation: none !important; } }

/* ------------------------------------------------ footer */
.site-foot { display: flex; justify-content: center; align-items: center; gap: 14px; color: #5d6478; padding: 18px 16px 28px; }
.foot-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.foot-brand .logo-mark { filter: none; opacity: .8; }

/* ------------------------------------------------ sign-in pages */
.auth-body { background: radial-gradient(1100px 600px at 15% -10%, rgba(37,244,238,.10), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(254,44,85,.12), transparent 60%), var(--bg); }
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px 26px; box-shadow: var(--shadow); }
.auth-brand { display: grid; justify-items: center; gap: 10px; margin-bottom: 22px; text-align: center; }
.auth-tag { color: var(--muted); font-size: 13px; }
.auth-note { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.auth-card .flash { margin-bottom: 14px; }
.auth-card label { font-size: 13px; }

/* ------------------------------------------------ shared bits */
.flash { border-radius: 12px; }
.panel { border-radius: 14px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; }
.empty-state b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.empty-state .big-emoji { font-size: 34px; display: block; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--panel-2);
    border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.chip.audio::before { content: "🎧"; } .chip.video::before { content: "🎬"; }
.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; overflow: hidden; font-size: 17px; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.lg { width: 72px; height: 72px; font-size: 28px; }
.loading-dots::after { content: "…"; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent-2); animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------ filters bar (Lives, account page) */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.filters .f-search { grid-column: span 2; }
.filters label { font-size: 12px; }
.filters select, .filters input { width: 100%; }
.filters .f-actions { display: flex; gap: 8px; }
.filters-toggle { display: none; }
.result-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; margin: 4px 2px 12px; flex-wrap: wrap; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.active-filters a { color: var(--text); }
.active-filters .chip:hover { border-color: var(--accent); text-decoration: none; }
@media (max-width: 640px) {
    .filters-toggle { display: flex; width: 100%; justify-content: space-between; margin-bottom: 10px; }
    .filters { grid-template-columns: 1fr 1fr; display: none; }
    .filters.open { display: grid; }
    .filters .f-search, .filters .f-actions { grid-column: 1 / -1; }
    .filters .f-actions .btn { flex: 1; }
    .search-quick { display: flex; gap: 8px; margin-bottom: 10px; }
}
@media (min-width: 641px) { .search-quick { display: none; } }

/* ------------------------------------------------ live cards */
.live-list { display: grid; gap: 10px; }
.lv { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; color: var(--text); transition: border-color .15s, transform .15s; }
.lv:hover { border-color: #3a4058; text-decoration: none; }
.lv.is-rec { border-color: rgba(254,44,85,.55); box-shadow: 0 0 0 1px rgba(254,44,85,.2), 0 6px 24px rgba(254,44,85,.08); }
.lv-main { min-width: 0; display: grid; gap: 3px; }
.lv-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lv-acc { font-weight: 750; color: var(--text); }
.lv-title { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-when { color: var(--muted); font-size: 12px; }
.lv-stats { display: flex; gap: 16px; align-items: center; font-variant-numeric: tabular-nums; }
.lv-stat { display: grid; text-align: right; line-height: 1.15; min-width: 54px; }
.lv-stat b { font-size: 15px; } .lv-stat span { font-size: 11px; color: var(--muted); }
.lv-quick { display: flex; gap: 6px; }
.lv-link { position: absolute; inset: 0; border-radius: 14px; z-index: 0; }
.lv > *:not(.lv-link) { position: relative; z-index: 1; pointer-events: none; }
.lv .lv-quick, .lv .lv-quick * , .lv .lv-acc-link { pointer-events: auto; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
.icon-btn:hover { color: var(--text); border-color: var(--accent-2); text-decoration: none; }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 760px) {
    .lv { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
    .lv .av { width: 40px; height: 40px; font-size: 15px; }
    .lv-stats { grid-column: 1 / -1; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
    .lv-stat { text-align: left; min-width: 0; }
    .lv-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ------------------------------------------------ pager */
.pager2 { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.pager2 a, .pager2 span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; font-size: 14px; }
.pager2 a:hover { border-color: var(--accent-2); text-decoration: none; }
.pager2 .on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager2 .gap { border: 0; background: none; color: var(--muted); min-width: 20px; }
.pager2 .off { opacity: .4; }

/* ------------------------------------------------ accounts */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.acc { display: grid; gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; color: var(--text); transition: border-color .15s, transform .15s; }
.acc:hover { border-color: var(--accent-2); text-decoration: none; transform: translateY(-1px); }
.acc.archived { opacity: .75; }
.acc-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.acc-names { min-width: 0; display: grid; }
.acc-names b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-names span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-head .badge { margin-left: auto; }
.acc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.acc-nums div { background: var(--bg); border-radius: 10px; padding: 7px 8px; display: grid; }
.acc-nums b { font-size: 15px; font-variant-numeric: tabular-nums; } .acc-nums span { font-size: 11px; color: var(--muted); }
.acc-foot { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg a { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg a + a { border-left: 1px solid var(--border); }
.seg a.on { background: var(--panel-2); color: var(--text); }
.seg a:hover { text-decoration: none; color: var(--text); }

.profile { display: flex; gap: 18px; align-items: center; padding: 20px; margin-bottom: 16px;
    background: radial-gradient(700px 200px at 0 0, rgba(37,244,238,.08), transparent 70%), radial-gradient(600px 220px at 100% 100%, rgba(254,44,85,.09), transparent 70%), var(--panel); }
.profile-names { min-width: 0; flex: 1; display: grid; gap: 4px; }
.profile-names h1 { overflow-wrap: anywhere; }
.profile-names .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.acc-side { position: sticky; top: calc(var(--topbar-h) + 14px); }
@media (max-width: 1000px) { .acc-layout { grid-template-columns: 1fr; } .acc-side { position: static; order: -1; } }
@media (max-width: 640px) { .profile { flex-wrap: wrap; padding: 14px; gap: 12px; } .profile .av.lg { width: 56px; height: 56px; font-size: 22px; } .acc-nums b { font-size: 14px; } }

/* ------------------------------------------------ download pack */
.pack h2 { display: flex; align-items: center; gap: 8px; }
.pack .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pack .presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.pack .presets button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.pack .presets button:hover { color: var(--text); border-color: var(--accent-2); }
.pick { display: grid; gap: 2px; border: 1px solid var(--border); border-radius: 12px; padding: 6px; background: var(--bg); }
.pick label { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; }
.pick label:hover { background: var(--panel-2); }
.pick label input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.pick label small { display: block; color: var(--muted); font-size: 12px; }
.pick-all { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.pick-all button { font: inherit; font-size: 12px; background: none; border: 0; color: var(--accent-2); cursor: pointer; padding: 0; }
.pack-est { font-size: 13px; color: var(--muted); }
.pack-est b { color: var(--text); }
.pack-jobs { display: grid; gap: 8px; }
.pack-job { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; background: var(--bg); font-size: 13px; }
.pack-job .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bar { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s; }

/* ------------------------------------------------ mood (a guess from the voice) */
.mood { display: inline-flex; align-items: center; gap: 3px; margin: 0 6px 2px 0; padding: 0 7px 0 4px; border-radius: 999px; font-size: 11.5px; line-height: 18px;
    background: rgba(167,139,250,.10); border: 1px solid rgba(167,139,250,.30); color: #cfc3ff; vertical-align: 1px; cursor: help; white-space: nowrap; }
.mood .me { font-size: 13px; }

/* ------------------------------------------------ dashboard polish */
.cards .card { border-radius: 14px; }
.stat { border-radius: 12px; }
.table th:first-child, .table td:first-child { padding-left: 16px; }

@media (max-width: 640px) { .page-head > .btn { display: none; } .page-sub { font-size: 12px; } }

/* ------------------------------------------------ live page: highlights panel */
.hl-dialog { padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); color: var(--text);
    width: min(860px, 96vw); max-height: min(88vh, 900px); margin: auto 16px auto auto; overflow: hidden; }
.hl-dialog[open] { display: flex; flex-direction: column; }
.hl-dialog::backdrop { background: rgba(0,0,0,.45); }
.hl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--panel); }
.hl-head b { font-size: 17px; } .hl-head .sub { display: block; margin-top: 2px; }
.hl-head-right { display: flex; gap: 8px; flex: none; }
.hl-list { overflow-y: auto; padding: 12px; display: grid; gap: 8px; }
.hl-loading { color: var(--muted); padding: 30px; text-align: center; }
.hl-item { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.hl-item[open] { border-color: #3a4058; }
.hl-item summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.hl-item summary::-webkit-details-marker { display: none; }
.hl-play { width: 42px; height: 42px; } .hl-play svg { width: 20px; height: 20px; }
.hl-main { min-width: 0; display: grid; gap: 4px; }
.hl-reasons { display: flex; gap: 4px; flex-wrap: wrap; }
.hl-score { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.hl-body { border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; max-height: 340px; overflow-y: auto; }
.hl-col { padding: 6px 0; min-width: 0; } .hl-col + .hl-col { border-left: 1px solid var(--border); }
.hl-h { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 14px 6px; text-transform: uppercase; letter-spacing: .04em; }
.hl-body .ts { padding-top: 2px; }
@media (max-width: 760px) {
    .hl-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
    .hl-head { flex-direction: column; position: relative; padding-right: 60px; } .hl-head-right { width: 100%; } .hl-head-right .btn.primary { flex: 1; }
    #hl-close { position: absolute; right: 12px; top: 12px; }
    .hl-item summary { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .hl-score { grid-column: 2 / 3; grid-row: 2; }
    .hl-body { grid-template-columns: 1fr; } .hl-col + .hl-col { border-left: 0; border-top: 1px solid var(--border); }
}


/* phones: header actions and long status pills wrap instead of pushing the page sideways */
.actions { flex-wrap: wrap; }
@media (max-width: 640px) {
    .page-head > div { min-width: 0; max-width: 100%; }
    .pill { white-space: normal; max-width: 100%; }
    .actions { width: 100%; }
}
.acc-layout > * { min-width: 0; } .pack .dates input { min-width: 0; }

/* ================================================ single live page (v2, 7 Oct): a compact header, then ONE box the height of the
   screen: player on the left (on top on phones), the tabs on the right (below). Only the list inside the box scrolls, so the player
   never sits on top of the transcript. Highlights and Fun search are tabs; downloads + transcript fixes live in one menu. */
.lp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; margin-bottom: 14px; }
.lp-title { min-width: 0; display: grid; gap: 5px; }
.lp-title .crumbs { margin: 0; }
.lp-title h1 { font-size: 22px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-badges .badge:empty { display: none; }
.lp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding-top: 18px; }
.lp-actions form { margin: 0; }
.lp-meta { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.lp-meta:empty { display: none; }
.lp-m { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
    font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-m b { color: var(--text); font-weight: 700; }
.lp-m i { font-style: normal; font-size: 12px; }
.lp-m.hot { border-color: rgba(254,44,85,.55); } .lp-m.warn { border-color: rgba(245,185,66,.45); }
.lp-m.bad { color: #ff8095; border-color: rgba(255,128,149,.4); white-space: normal; }

/* downloads & tools menu */
.lp-tools { position: relative; }
.lp-tools > summary { list-style: none; user-select: none; }
.lp-tools > summary::-webkit-details-marker { display: none; }
.lp-tools > summary svg { width: 16px; height: 16px; fill: currentColor; }
.lp-tools > summary .caret { font-size: 11px; color: var(--muted); transition: transform .15s; }
.lp-tools[open] > summary { border-color: var(--accent-2); }
.lp-tools[open] > summary .caret { transform: rotate(180deg); }
.lp-tools-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(390px, calc(100vw - 24px)); padding: 4px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); display: grid; }
.lp-tools-sec { padding: 10px; display: grid; gap: 8px; }
.lp-tools-sec + .lp-tools-sec { border-top: 1px solid var(--border); }
.lp-tools-sec > b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lp-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-tools-grid .btn { justify-content: flex-start; }
.lp-tools-grid #dl-video { grid-column: 1 / -1; }
.lp-tools-more { font-size: 12.5px; }
.live-page .lp-tools-sec.tx-tools { display: grid; width: auto; border-top: 1px solid var(--border); margin: 0; padding: 10px; }
.live-page .lp-tools-sec.tx-tools[hidden] { display: none; }
.live-page .tx-tools .sub { width: auto; }

/* the screen-high box */
.live-page .live-layout { display: grid; grid-template-columns: var(--player-w, 480px) 14px minmax(0, 1fr); gap: 0; align-items: stretch;
    height: var(--shell-h, calc(100dvh - var(--topbar-h) - 28px)); min-height: 520px; }
.live-page .video-col { position: static; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.live-page .video-box { flex: 1 1 auto; min-height: 180px; max-height: none; aspect-ratio: auto; border-radius: 14px; }
.live-page .video-box.audio-only { flex: none; min-height: 0; }
.live-page .player { flex: none; }
.live-page .data-col { height: auto; min-height: 0; margin-left: 2px; }
.live-page .col-split { min-height: 0; }

/* player rows: speed · buttons · volume, then parts / watch live, then the keys */
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pc-row .pc-controls { gap: 6px; }
.pc-row .pc-speed select { padding: 5px 6px; }
.pc-row .pc-vol input { width: 66px; }
.pc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-foot:not(:has(.part-btn)):not(:has(#go-live:not([hidden]))) { display: none; }
.live-page .pc-extra #go-live, .pc-foot #go-live { margin-left: auto; }
.pc-keys { font-size: 11.5px; line-height: 1.6; text-align: center; border-top: 1px solid var(--border); padding-top: 7px; }
.pc-keys kbd { font: inherit; font-size: 10.5px; font-weight: 700; color: var(--text); background: var(--panel-2); border: 1px solid var(--border);
    border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; margin: 0 1px; }
@media (hover: none) { .pc-keys { display: none; } }

/* tabs + side panes */
.live-page .data-col .tabs { scrollbar-width: none; flex: none; }
.live-page .data-col .tabs::-webkit-scrollbar { display: none; }
.live-page .data-col .tabs { flex-wrap: wrap; overflow: visible; }   /* computers: a second row rather than tabs hidden off the edge */
.live-page .data-col .tabs button { padding: 10px 11px; font-size: 13.5px; }
.live-page .data-col .tabs button .count:empty { display: none; }
.live-page .toolbar { flex: none; }
.hl-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.hl-bar .sub { flex: 1 1 260px; }
.live-page .hl-list { padding: 10px; display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; }   /* rows keep their full height in the fixed-height box */
.live-page .fun-pane { padding: 14px 12px; }
.live-page .hl-item summary { grid-template-columns: 44px minmax(0, 1fr) minmax(70px, 120px) auto; }

@media (max-width: 1100px) and (min-width: 901px) { .live-page .live-layout { grid-template-columns: var(--player-w, 380px) 14px minmax(0, 1fr); } }

/* phones + small tablets: header scrolls away, then the box fills the screen: player on top (normal flow, not floating), list below */
@media (max-width: 900px) {
    .lp-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; gap: 8px; }
    .lp-title h1 { font-size: 18px; }
    .lp-actions { justify-content: flex-start; padding-top: 0; }
    .lp-tools[open] { flex-basis: 100%; }
    .lp-tools-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
    .lp-meta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
    .lp-meta::-webkit-scrollbar { display: none; }
    .live-page .live-layout { display: flex; flex-direction: column; gap: 8px; height: calc(100dvh - var(--topbar-h) - 8px); min-height: 440px; }
    /* the page can scroll no further than "box right under the top bar", so the bar never covers the player */
    body.live-body main.wrap { padding-bottom: 8px; }
    body.live-body .site-foot { display: none; }
    .live-page .video-col { display: flex; flex: none; overflow: visible; gap: 8px; order: 0; }
    .live-page .video-box { flex: none; height: 28dvh; min-height: 150px; }
    .live-page .video-box.audio-only { display: none; }      /* the header already says whose live it is */
    .live-page .data-col { order: 0; flex: 1 1 auto; height: auto; min-height: 0; margin: 0; }
    .live-page .data-col .tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; }
    .live-page .data-col .tabs button { padding: 10px 11px; font-size: 13px; scroll-snap-align: start; }
    .live-page .hl-item summary { grid-template-columns: 42px minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
    .live-page .player { padding: 8px 10px; gap: 5px; }
    .live-page .pc-row { flex-wrap: nowrap; gap: 4px; }
    .live-page .pc-row .pc-controls { gap: 6px; }
    .live-page .pc-btn { width: 36px; height: 36px; }
    .live-page .pc-play { width: 46px; height: 46px; }
    .live-page .pc-speed select { padding: 4px 6px; }
    .live-page #pc-vol { display: none; }                 /* phones: use the phone's own volume; mute stays */
    .live-page .toolbar { gap: 6px; }
    .live-page .toolbar { flex-wrap: nowrap; }
    .live-page .toolbar input[type=search] { min-width: 0; width: 0; flex: 1 1 auto; }
    .live-page .toolbar select { max-width: 40%; flex: none; }
    .live-page .toolbar .fa { display: none; }            /* "Follow along" -> "Follow" */
    .live-page #follow-wrap { flex: none; }
    .live-page .np-text { -webkit-line-clamp: 2; }
    .live-page .np .speaker .avatar, .live-page .np .speaker .pav, .live-page .np .speaker img, .live-page .np .speaker .seat-no { display: none; }
    .live-page .np .speaker { padding-left: 7px; }
    .lp-tools-grid { grid-template-columns: 1fr; }
}