* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; max-width: 960px; margin: 0 auto; padding: 24px; color: #222; background: #fafafa; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.brand { font-weight: 700; font-size: 20px; color: #d33; text-decoration: none; }
.tag { font-size: 12px; color: #666; background: #eee; padding: 2px 8px; border-radius: 4px; }
h1 { font-size: 28px; margin-bottom: 16px; }
form { display: flex; flex-direction: column; gap: 12px; }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #444; }
form label.checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
form input, form textarea { padding: 8px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
form button { padding: 10px 20px; background: #d33; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; width: fit-content; }
form button:hover { background: #b22; }
.status { font-size: 13px; color: #555; margin-top: 8px; }
.description { color: #555; margin-top: 12px; line-height: 1.6; white-space: pre-wrap; }
#processing-banner { padding: 16px; background: #fff8e1; border: 1px solid #f5c518; border-radius: 4px; color: #664; }
#summary-section { margin-top: 24px; padding: 16px; background: white; border-radius: 4px; }
#summary-section h2 { font-size: 18px; margin-bottom: 8px; }
#summary-body { line-height: 1.6; white-space: pre-wrap; color: #333; }
.video-js { width: 100%; }

/* Phase 3a auth header + user chip */
header { justify-content: flex-start; }
.header-nav { display: flex; gap: 16px; margin-left: 12px; font-size: 14px; }
.header-nav a { color: #444; text-decoration: none; }
.header-nav a:hover { color: #d33; }
.header-user { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.points-chip { font-size: 12px; color: #333; background: #ffedd5; padding: 3px 8px; border-radius: 999px; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 14px; color: #333; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu ul { position: absolute; right: 0; top: 100%; margin: 4px 0 0; padding: 6px 0; background: white; border: 1px solid #ddd; border-radius: 6px; list-style: none; min-width: 180px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 10; }
.user-menu li { padding: 0; }
.user-menu li a, .user-menu li .linklike { display: block; padding: 8px 14px; color: #333; text-decoration: none; font-size: 14px; background: none; border: none; text-align: left; width: 100%; cursor: pointer; font-family: inherit; }
.user-menu li a:hover, .user-menu li .linklike:hover { background: #f5f5f5; color: #d33; }
.avatar { width: 24px; height: 24px; border-radius: 50%; }
.user-name { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin-btn { display: inline-block; background: white; color: #333; border: 1px solid #d0d0d0; padding: 8px 14px; border-radius: 6px; font-size: 14px; text-decoration: none; cursor: pointer; }
.signin-btn:hover { border-color: #999; background: #f8f8f8; }
.signin-btn-large { padding: 12px 24px; font-size: 16px; }
.inline-form { display: inline; margin: 0; padding: 0; }
.inline-form button { padding: 8px 14px; }
.danger-btn { background: white; color: #b22; border: 1px solid #d99; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; }
.danger-btn:hover { background: #fee; }
.auth-card { padding: 24px; background: white; border: 1px solid #eee; border-radius: 8px; margin: 24px 0; max-width: 480px; }
.auth-card .signin-btn-large { display: inline-block; margin-bottom: 12px; }
.auth-error { padding: 12px 16px; background: #fee; border: 1px solid #d99; border-radius: 4px; margin-bottom: 16px; color: #722; }
.auth-info { padding: 12px 16px; background: #eaf6ff; border: 1px solid #99c7e6; border-radius: 4px; margin-bottom: 16px; color: #245; }
.lead { line-height: 1.6; color: #444; margin-bottom: 20px; }
.fine-print { font-size: 13px; color: #666; margin-top: 12px; line-height: 1.5; }
.coming-soon { color: #888; }
.coming-soon li { list-style: disc; margin-left: 22px; }
.account-section { padding: 20px; background: white; border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; }
.account-section h2 { font-size: 18px; margin: 0 0 12px; }
.account-grid { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
.account-grid dt { font-weight: 600; color: #555; }
.account-grid dd { margin: 0; }

/* Phase 3b: toasts */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 500; z-index: 1000; animation: toast-in 0.3s ease-out, toast-out 0.4s ease-in 4s forwards; }
.toast-success { background: #ffedd5; color: #7c2d12; border: 1px solid #fdba74; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; } }

/* Phase 3b B2: dashboard */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-card { padding: 20px; background: white; border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; }
.dash-card h2 { font-size: 18px; margin: 0 0 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.balance { font-size: 14px; color: #666; margin-bottom: 14px; }
.balance-num { font-size: 32px; font-weight: 700; color: #d33; margin-right: 4px; }
.earn-feed { list-style: none; padding: 0; margin: 0; }
.earn-feed li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; align-items: center; }
.earn-feed li:last-child { border-bottom: none; }
.feed-delta { font-weight: 700; min-width: 28px; text-align: right; }
.feed-delta.pos { color: #059669; }
.feed-delta.neg { color: #b91c1c; }
.feed-reason { flex: 1; color: #333; }
.feed-time { color: #999; font-size: 12px; }
.cap-tag { background: #fef3c7; color: #78350f; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.ok { color: #059669; font-weight: 500; }
.empty { color: #888; font-style: italic; }
.channel-block { margin-bottom: 24px; padding: 12px; background: #fafafa; border-radius: 6px; }
.channel-block h3 { margin: 0 0 8px; font-size: 16px; }
.sub-count { font-size: 13px; color: #666; font-weight: 400; margin-left: 8px; }
.video-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.video-table th, .video-table td { padding: 8px; text-align: left; border-bottom: 1px solid #eee; }
.video-table th { background: #f5f5f5; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #666; }
.pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.pill.status-published { background: #d1fae5; color: #065f46; }
.pill.status-submitted, .pill.status-fetching, .pill.status-transcoding, .pill.status-transcribing, .pill.status-summarising { background: #dbeafe; color: #1e40af; }
.pill.status-cold_evicted, .pill.status-rehydrating { background: #e0e7ff; color: #3730a3; }
.pill.status-missing_source { background: #fee2e2; color: #991b1b; }
.tag.warn { background: #fef3c7; color: #92400e; }
.button { display: inline-block; padding: 6px 12px; background: #d33; color: white; text-decoration: none; border-radius: 4px; font-size: 13px; }
.button:hover { background: #b22; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }

/* Phase 3b B3: 4-quadrant watch page */
.watch-grid { display: grid; grid-template-columns: 65fr 35fr; grid-template-rows: auto auto; gap: 16px; }
.q-player   { grid-column: 1; grid-row: 1; }
.q-related  { grid-column: 2; grid-row: 1; padding: 12px; background: white; border: 1px solid #eee; border-radius: 8px; min-height: 300px; }
.q-meta     { grid-column: 1; grid-row: 2; }
.q-banner   { grid-column: 2; grid-row: 2; position: relative; min-height: 200px; }
.q-related h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #666; margin: 0 0 12px; }
.related-list { display: flex; flex-direction: column; gap: 10px; }
.small { font-size: 13px; }
.video-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.rating-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.stars-static { color: #333; font-weight: 500; }
.ratings-count { color: #999; font-size: 12px; margin-left: 4px; }
.my-stars-widget { display: inline-flex; align-items: center; gap: 4px; color: #666; font-size: 13px; }
.star-btn { border: none; background: none; font-size: 20px; cursor: pointer; padding: 0 2px; line-height: 1; color: #ccc; }
.star-btn.active, .star-btn:hover { color: #f59e0b; }
.star-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.vote-row { display: flex; gap: 6px; }
.vote-btn { padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 6px; cursor: pointer; font-size: 14px; color: #333; }
.vote-btn:hover { background: #f5f5f5; }
.vote-btn.danger { color: #b91c1c; border-color: #fca5a5; }
.vote-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.comments-section { margin-top: 24px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.comment-form textarea { resize: vertical; }
.comment-form button { align-self: flex-start; }
.comments-list { display: flex; flex-direction: column; gap: 10px; }

/* Banner state machine */
.banner-slot { border: 1px solid #eee; border-radius: 8px; padding: 16px; background: white; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.banner-slot.state-ad { border-color: #d1d5db; background: #fafafa; }
.banner-slot.state-branding { border-color: #fdba74; background: #fff7ed; }
.banner-ad-inner { position: relative; }
.ad-tag { position: absolute; top: -8px; right: -8px; background: #6b7280; color: white; font-size: 10px; padding: 1px 5px; border-radius: 2px; }
.banner-close { position: absolute; top: -8px; left: -8px; background: white; border: 1px solid #ccc; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.branding-logo { font-weight: 700; color: #d33; font-size: 18px; margin-bottom: 6px; }
.branding-hint { color: #7c2d12; font-size: 13px; margin: 0; line-height: 1.4; }
.banner-slot.fullscreen-overlay { position: fixed; bottom: 24px; right: 24px; z-index: 2147483647; width: 280px; min-height: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }

/* Double-tap-to-seek visual flashes (~0.5s fade) */
.player-wrap { position: relative; }
.seek-flash { position: absolute; top: 50%; transform: translateY(-50%); padding: 12px 20px; background: rgba(0,0,0,0.55); color: white; font-weight: 700; font-size: 18px; border-radius: 999px; pointer-events: none; opacity: 0; z-index: 5; }
.seek-flash-left  { left:  8%; }
.seek-flash-right { right: 8%; }
.seek-flash.flashing { animation: seek-flash-fade 0.5s ease-out; }
@keyframes seek-flash-fade { 0% { opacity: 0; transform: translateY(-50%) scale(0.8); } 40% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }

/* video.js chapters menu overlay.
   Default is ~10em wide anchored to its button (left: -3em), so every chapter
   title wraps onto 3-4 centred lines — and simply widening it pushes the menu
   off the right edge of the player, because the button sits near the right of
   the control bar.
   Fix: drop the button out of the positioning flow (position: static) so the
   menu's containing block becomes the control bar, which spans the full player
   width. Then it can be centred over the player and sized as a percentage of
   the player rather than of the button.
   SPECIFICITY: video-js.min.css loads from the page's head block, i.e. AFTER
   this file, so equal-specificity rules lose to video.js. Every selector below
   stacks .vjs-menu-button-popup onto the button class to outrank video.js's
   own .video-js .vjs-menu-button-popup rule. */
.video-js .vjs-menu-button-popup.vjs-chapters-button { position: static; }
.video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(34em, 92%);
}
.video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu .vjs-menu-content {
  width: 100%;
  max-height: 17em;
  overflow-y: auto;
}
/* video.js 8 renders .vjs-menu-item as display:flex, so text-align alone does
   nothing — the centring comes from justify-content. Set both. */
.video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu li {
  text-align: left;
  justify-content: flex-start;
  padding: 0.5em 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.1em;
  line-height: 1.45;
}
.video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu li.vjs-menu-title {
  text-align: left;
  justify-content: flex-start;
  font-size: 1em;
  letter-spacing: 0.08em;
}
/* The scroll container itself is centred by video.js; stop it re-centring
   the ellipsis-truncated rows. */
.video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu .vjs-menu-content {
  text-align: left;
}
/* Narrow players: allow wrapping rather than truncating to an ellipsis. */
@media (max-width: 720px) {
  .video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu { width: 94%; }
  .video-js .vjs-menu-button-popup.vjs-chapters-button .vjs-menu li { white-space: normal; font-size: 1em; }
}

/* Chapters list */
.chapters-list { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; }
.chapter-item { border-bottom: 1px solid #f2f2f2; }
.chapter-item:last-child { border-bottom: none; }
.chapter-btn { display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: #333; }
.chapter-btn:hover { background: #f7f7f7; }
.chapter-item.active .chapter-btn { background: #fff7ed; font-weight: 600; }
.chapter-time { color: #d33; font-variant-numeric: tabular-nums; min-width: 52px; font-size: 13px; }
.chapter-title { flex: 1; }

/* Details + transcript accordions */
.meta-accordion { margin-top: 16px; border: 1px solid #eee; border-radius: 8px; background: white; }
.meta-accordion > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; list-style: none; }
.meta-accordion > summary::-webkit-details-marker { display: none; }
.meta-accordion > summary::before { content: '▸ '; color: #999; }
.meta-accordion[open] > summary::before { content: '▾ '; }
.meta-accordion > summary:hover { background: #fafafa; }
.accordion-body { padding: 4px 16px 16px; }
.detail-grid { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0 0 8px; font-size: 14px; }
.detail-grid dt { color: #666; font-weight: 500; }
.detail-grid dd { margin: 0; color: #222; }
.detail-sub { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #666; margin: 16px 0 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.chip-label { font-size: 12px; color: #888; min-width: 96px; }
.chip { background: #eef2ff; color: #3730a3; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.dl-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 13px; }
.dl-links a { color: #d33; }

/* Transcript cues */
.transcript-body { max-height: 420px; overflow-y: auto; }
.cue { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.cue-time { background: none; border: none; color: #d33; cursor: pointer; font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; padding: 0; min-width: 52px; text-align: left; }
.cue-time:hover { text-decoration: underline; }
.cue-text { flex: 1; color: #333; }

/* Points ledger card — bounded height + View all */
.earn-feed-wrap { max-height: 320px; overflow-y: auto; border: 1px solid #f0f0f0; border-radius: 6px; }
.view-all-link { display: inline-block; margin-top: 10px; font-size: 13px; color: #d33; }
.running-bal { color: #999; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

/* Points history page */
.points-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.points-table th, .points-table td { padding: 8px; text-align: left; border-bottom: 1px solid #eee; }
.points-table th { background: #f5f5f5; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #666; }
.points-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 14px; }
.pager a { color: #d33; }
.pager .muted { color: #bbb; }

/* Channel Drive-folder connect */
.chan-folder-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.chan-folder-note { font-size: 13px; color: #92400e; background: #fef3c7; padding: 6px 10px; border-radius: 4px; }
.connect-folder-btn { padding: 6px 12px; border: 1px solid #d0d0d0; background: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; }
.connect-folder-btn:hover { border-color: #999; background: #f8f8f8; }
.connect-folder-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 720px) {
  .watch-grid { grid-template-columns: 1fr; }
  .q-player, .q-related, .q-meta, .q-banner { grid-column: 1; }
  .q-related { grid-row: 2; min-height: 0; }
  .q-meta { grid-row: 3; }
  .q-banner { grid-row: 4; min-height: 120px; }
}