/* Page layouts: headers, player, chapters, remote, editor, listings, calendar, options. */
.app-header { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 11px; }
.listing-header { display: grid; gap: 11px; }
.movie-header, .channel-header { display: grid; gap: 10px; }
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.title-code, .code-button.title-code { font-size: 1.35rem; padding: 4px 14px; border-radius: 11px; }
.movie-title { margin: 0; font-size: 1.4rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.people-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.release { color: var(--muted); font-size: .82rem; margin-left: 4px; }
.ch-row { display: grid; align-items: center; gap: 8px; }
.ch-row-1 { grid-template-columns: 20% minmax(0, 1fr) 20%; }
.ch-row-2 { grid-template-columns: 30% minmax(0, 1fr) 30%; align-items: start; }
.ch-row select { width: 100%; min-height: 38px; font-weight: 650; }
.ch-current { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.ch-row-2 .nav-btn { min-height: 41px; }
.ch-title { color: var(--text); font-size: 1.05rem; font-weight: 650; overflow-wrap: anywhere; }

/* Player */
.player-shell { width: 100%; aspect-ratio: 16/9; max-height: calc(100vh - 190px); min-height: 240px; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.player-shell iframe, .player-shell video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.provider-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.provider-btn { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); font-weight: 600; }
.provider-btn small { color: var(--muted); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.provider-btn.is-current { color: var(--on-accent); background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep)); border-color: var(--accent-glow); }
.provider-btn.is-current small { color: #ffffffcc; }
.resume-toast { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 9px 12px; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; }
.status-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.status-panel > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0; }
.label { display: block; color: var(--muted); font-size: .72rem; margin-bottom: 3px; }
.label-inline { color: var(--muted); font-size: .88rem; }

/* Chapters: horizontally scrolling strip of fixed-size cards */
.scene-section { margin-top: 18px; }
.stats { color: var(--muted); font-size: .82rem; }
.scenes { display: flex; gap: 11px; overflow-x: auto; padding: 5px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-color: var(--accent-deep) var(--bg-2); }
.scene { position: relative; flex: 0 0 220px; height: 172px; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.scene.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.scene:focus-within, .scene:hover { border-color: var(--accent); }
.scene-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding: 8px 12px; text-align: left; color: var(--text); background: transparent; border: 0; border-radius: 0; box-shadow: none; font-weight: 400; overflow: hidden; }
button.scene-main:hover:not(:disabled) { background: var(--surface-2); filter: none; }
.scene-title { font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.scene-time { color: var(--accent-glow); font-weight: 750; font-size: .92rem; font-variant-numeric: tabular-nums; }
.scene-key { color: var(--muted); font-size: .7rem; }
/* No image: larger title/time fill the same card size. */
.scene.no-image .scene-main { padding: 14px; gap: 8px; }
.scene.no-image .scene-title { font-size: 1.2rem; -webkit-line-clamp: 3; }
.scene.no-image .scene-time { font-size: 1.7rem; }
/* With image: the picture fills the card (click/touch opens it); time + title are a bottom overlay (30%) that seeks. */
.scene.has-image .scene-image { position: absolute; inset: 0; display: block; background: #000; cursor: zoom-in; }
.scene.has-image .scene-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene.has-image .scene-main { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; flex: none; justify-content: center; gap: 1px; padding: 3px 10px; color: #fff; background: linear-gradient(180deg, #000a, #000d); backdrop-filter: blur(2px); }
.scene.has-image .scene-time { color: #fff; font-size: .78rem; line-height: 1.15; }
.scene.has-image .scene-title { font-size: .78rem; line-height: 1.15; -webkit-line-clamp: 1; color: #fff; }
.scene.readonly .scene-main { cursor: default; }

/* Remote: chapters row (75 | 25 | 75) then seek row */
.remote-layout { margin: 14px 0 10px; display: grid; gap: 8px; }
.remote-row { display: grid; gap: 8px; }
.remote-chapters { grid-template-columns: 3fr 1fr 3fr; }
.remote-seek { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.remote-row button { min-height: 52px; min-width: 0; padding: 8px 10px; font-size: .9rem; touch-action: manipulation; }
.remote-seek button { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.remote-seek .play-toggle { background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep)); border-color: var(--accent-glow); color: var(--on-accent); font-size: 1rem; }
.mark-btn { flex-direction: column; line-height: 1.15; font-size: .72rem !important; text-align: center; background: var(--surface-3) !important; color: var(--text); border-color: var(--gold) !important; }
.chap-btn { display: flex; align-items: center; gap: 10px; }
.chap-prev { justify-content: flex-start; text-align: left; }
.chap-next { justify-content: flex-end; text-align: right; }
.chap-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chap-arrow { font-size: 1.25rem; font-weight: 800; }
.chap-btn.is-empty, .chap-btn:disabled { background: var(--bg-2); border-color: var(--line); color: var(--muted); opacity: .65; }

.utility-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chapter-manager, .diagnostics, .subtitle-row, .video-list, .movie-info { margin: 14px 0; padding: 15px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.chapter-manager p, .diagnostics > p { color: var(--muted); font-size: .88rem; margin: 0; }

/* Chapter editor */
.chapter-create { display: grid; gap: 10px; margin: 12px 0 4px; }
.create-line-1 { display: grid; grid-template-columns: auto minmax(110px, .6fr) auto minmax(160px, 1.6fr) auto; gap: 8px; align-items: center; }
.create-line-2 { display: grid; grid-template-columns: auto auto minmax(160px, 1fr); gap: 12px; align-items: center; }
.create-line-2 label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; }
.custom-chapter-list { display: grid; gap: 6px; margin-top: 10px; }
.chapter-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.chapter-row.editing { grid-template-columns: minmax(110px, .6fr) minmax(140px, 1.3fr) auto auto minmax(140px, 1fr) auto auto; border-color: var(--accent); }
.chapter-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 8px; text-align: left; color: var(--text); background: transparent; border: 0; box-shadow: none; font-weight: 500; justify-content: flex-start; }
.chapter-row-main:hover:not(:disabled) { background: var(--surface-2); filter: none; }
.row-time { font-variant-numeric: tabular-nums; color: var(--accent-glow); font-weight: 700; flex: none; }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { color: var(--muted); font-size: .76rem; margin-left: auto; flex: none; }
.chapter-row.editing label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; }
.json-editor { margin-top: 14px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.json-editor textarea { display: block; width: 100%; resize: vertical; margin-top: 10px; font: .8rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }

.subtitle-row { display: flex; align-items: center; gap: 10px; }
.video-list { padding: 0; overflow: hidden; }
.video-picker > summary { list-style: none; padding: 13px 15px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; font-weight: 600; }
.video-picker > summary::-webkit-details-marker { display: none; }
.video-picker > summary::after { content: "▾"; float: right; margin-left: 10px; color: var(--accent-glow); }
.video-picker[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.video-picker-list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; display: grid; gap: 4px; }
.video-pick { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); font-weight: 500; box-shadow: none; }
.video-pick.is-current { border-color: var(--gold); background: var(--surface-2); }
.movie-info p { margin: 0 0 8px; } .link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.diagnostics .capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.capability { border-radius: 6px; padding: 4px 7px; background: var(--bg-2); font-size: .74rem; }
.capability.yes b { color: var(--good); } .capability.no b { color: var(--bad); }
.log { margin: 0; padding-left: 22px; max-height: 180px; overflow: auto; color: var(--muted); font: .75rem/1.5 ui-monospace, monospace; }

/* Lists / forms */
.route-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.route-list.tight > li { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 9px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.route-list.tight > li > .icon-button { margin-left: auto; }
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; }
.search-form input[type=search] { flex: 1; min-width: 220px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.multi { position: relative; }
.multi > summary { list-style: none; padding: 8px 13px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 9px; font-size: .86rem; font-weight: 600; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: " ▾"; color: var(--accent-glow); }
.multi[open] > summary { border-color: var(--accent); }
.multi b { color: var(--on-accent); background: var(--accent-strong); border-radius: 999px; padding: 0 7px; font-size: .74rem; }
.multi b:empty { display: none; }
.multi-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, 86vw); max-height: 340px; overflow: auto; padding: 10px; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); }
.multi-panel input[type=search] { width: 100%; margin-bottom: 8px; }
.multi-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.multi-panel label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: .86rem; }
.multi-panel label:hover { background: var(--surface-2); }
.multi-panel small { margin-left: auto; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

/* Calendar */
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.cal-nav strong { min-width: 150px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 10px 0; }
.cal-head { text-align: center; color: var(--muted); font-size: .75rem; padding: 4px 0; }
.cal-day { min-height: 88px; padding: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day.today { border-color: var(--gold); }
.cal-day.has-items { background: var(--surface-2); }
.cal-num { color: var(--muted); font-size: .72rem; }

/* Options */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.theme-swatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.theme-swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-swatch input { accent-color: var(--accent-strong); }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ffffff55; }
.swatch[data-preview="royal"] { background: linear-gradient(135deg, #8b5cf6, #130e24); } .swatch[data-preview="midnight"] { background: linear-gradient(135deg, #3b82f6, #0a1224); }
.swatch[data-preview="ember"] { background: linear-gradient(135deg, #ee5a2a, #1a0e0e); } .swatch[data-preview="forest"] { background: linear-gradient(135deg, #22b86a, #0a1812); }
.swatch[data-preview="light"] { background: linear-gradient(135deg, #6d3fe0, #f4f1fb); }
.toggle { margin: 10px 0; }
.bind-table { display: grid; gap: 6px; }
.bind-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1.4fr) auto; gap: 8px 14px; align-items: center; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.bind-row .export-status { grid-column: 1 / -1; margin: 0; }
.bind-row .export-status:empty { display: none; }
.bind-label em { color: var(--gold); font-size: .76rem; font-style: normal; }
.bind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.key-chip { display: inline-flex; align-items: center; gap: 4px; }
.chip-x { width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--surface-3); border-color: var(--line-strong); box-shadow: none; }
.bind-add { display: flex; flex-wrap: wrap; gap: 6px; }
.bind-add input { width: 190px; padding: 6px 9px; }
.bind-add button { padding: 6px 10px; }

@media (max-width: 1000px) { .create-line-1 { grid-template-columns: auto 1fr auto; } .create-line-1 input[data-chapter-name] { grid-column: 1 / -1; } }
@media (max-width: 650px) {
  .page { width: calc(100% - 18px); margin-top: 10px; }
  .title-code, .code-button.title-code { font-size: 1.15rem; } .movie-title { font-size: 1.2rem; }
  .player-shell { min-height: 0; max-height: none; }
  .ch-row-1 { grid-template-columns: 24% minmax(0, 1fr) 24%; } .ch-row-2 { grid-template-columns: 32% minmax(0, 1fr) 32%; }
  .remote-row button { font-size: .78rem; padding: 6px 4px; } .chap-btn { font-size: .8rem; gap: 4px; } .mark-btn { font-size: .62rem !important; padding: 4px !important; }
  .scene { flex-basis: 190px; height: 160px; }
  .status-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-line-2 { grid-template-columns: 1fr 1fr; } .create-line-2 input { grid-column: 1 / -1; }
  .chapter-row.editing { grid-template-columns: 1fr 1fr; }
  .bind-row { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: 1fr; }
  .cal-head, .cal-day.empty, .cal-day:not(.has-items) { display: none; }
  .cal-day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; } .cal-num::before { content: "Day "; }
}