/* Studio — Cel visual language, mixed page layouts. 1920×1080 reference; 1rem = 16px at 1920. */
:root {
  --desk: #0c1018;
  --sheet: #161c28;
  --ink: #e8eef8;
  --graphite: #8b95a8;
  --blue: #6ea8ff;
  --red: #ff6a4a;
  --tint: #070a10;
  --grid: #1c2433;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Kalam', 'Comic Sans MS', cursive;
  --rail: 15rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe: 3.5rem;
}
html { font-size: calc(100vw / 120); background: var(--desk); color: var(--ink); color-scheme: dark; }
@media (max-width: 900px) { html { font-size: 14px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 400 1.35rem/1.35 var(--font); min-height: 100vh; -webkit-font-smoothing: antialiased;
  background-color: var(--desk); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 4rem 4rem; overflow: hidden; }
img { display: block; object-fit: cover; background: var(--tint); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.note { font: 400 1.15rem/1.3 var(--hand); color: var(--graphite); }
.note-red { color: var(--red); }
.red { color: var(--red); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.grow { flex: 1; }
:focus { outline: none; }
.tv-focus, :focus-visible { outline: 3px solid var(--blue) !important; outline-offset: 4px; box-shadow: 0 0 0 8px var(--desk), 0 0 0 10px var(--blue); position: relative; z-index: 2; }
a.cel.tv-focus, a.cel:focus-visible { transform: translate(-.2rem, -.35rem) rotate(-.6deg) scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .cel, .btn, .chip, .folder-tab, .xs-row, .spine, .chap, .cal-cell, .ctl { transition: transform .18s cubic-bezier(.22,1,.36,1), outline .16s linear, box-shadow .18s ease; }
  [data-tv-scroll], [data-tv-rail] { scroll-behavior: smooth; }
  .page-in, .sheet > *, .landing-cel, .camera-sheet, .overlay, .osd-top, .osd-bottom {
    -webkit-animation: pageIn 560ms var(--ease) both;
    animation: pageIn 560ms var(--ease) both;
  }
}
@media (prefers-reduced-motion: reduce) { a.cel.tv-focus { transform: none; } }

@-webkit-keyframes pageIn {
  from { opacity: 0; -webkit-transform: translateY(24px); }
  to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* peg holes */
.pegs { display: flex; justify-content: center; gap: 1.2rem; height: 1.2rem; align-items: center; }
.pegs i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--desk); box-shadow: inset 0 1px 2px #0003; }
.pegs i.slot { width: 1.8rem; border-radius: .4rem; }

/* ---------- desk layout ---------- */
.desk { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; height: 100dvh; }
.pegbar { position: sticky; top: 0; height: 100dvh; background: var(--sheet); border-right: 1px solid var(--grid); padding: 2rem 0 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.brand { font-weight: 700; font-size: 2rem; letter-spacing: -.03em; display: inline-flex; padding: .2rem .4rem; border-radius: .3rem; }
.brand span:last-child { color: var(--blue); }
.pegbar .brand { margin: 0 1.5rem 2rem; }
.brand-xl { font-size: 6.5rem; line-height: .9; }
.peg { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem; font-weight: 500; font-size: 1.35rem; color: var(--graphite); border-radius: .3rem; margin: 0 .6rem; }
.peg-hole { width: .9rem; height: .9rem; border-radius: 50%; background: var(--desk); box-shadow: inset 0 1px 2px #0003; flex: none; }
.peg.is-current { color: var(--ink); }
.peg.is-current .peg-hole { background: var(--blue); box-shadow: none; }
.pegbar-foot { margin-top: auto; padding: 0 1.5rem; display: grid; gap: .2rem; }
.sheet { padding: 0; min-width: 0; height: 100dvh; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y mandatory; }
.sheet::-webkit-scrollbar { display: none; }
.page-releases .sheet, .page-anime .sheet, .page-saved .sheet, .page-settings .sheet, .page-filters .sheet { padding: 2.5rem 3.5rem 4rem 3rem; scroll-snap-type: none; }
.page-search .sheet { padding: 1.6rem 2.4rem 3rem 2rem; scroll-snap-type: none; }

/* ---------- buttons, chips, switch ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: 1.3rem; padding: .85rem 1.4rem; border: 2px solid var(--ink); border-radius: .3rem; background: var(--sheet); }
.btn-ink { background: var(--ink); color: var(--sheet); }
.btn-quiet { border-color: var(--grid); color: var(--graphite); background: transparent; }
.chip { font-size: 1.15rem; font-weight: 500; padding: .5rem .9rem; border: 1.5px solid var(--grid); border-radius: 2rem; background: var(--sheet); display: inline-flex; align-items: center; gap: .4rem; }
.chip b { color: var(--graphite); font-weight: 500; }
.chip.is-active { border-color: var(--blue); color: var(--blue); }
.chip-dash { border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.switch { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.2rem; font-weight: 500; padding: .45rem .9rem .45rem .5rem; border: 1.5px solid var(--grid); border-radius: 2rem; background: var(--sheet); }
.switch small { color: var(--graphite); font-weight: 400; }
.switch i { width: 2.8rem; height: 1.5rem; border-radius: 1rem; background: var(--grid); position: relative; flex: none; }
.switch i::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sheet); box-shadow: 0 1px 2px #0004; }
.switch.is-on i { background: var(--blue); } .switch.is-on i::after { left: auto; right: .15rem; }
.page-index, .page-login, .page-register, .page-player { overflow: auto; }
.stamp { position: absolute; right: -.4rem; top: 1.4rem; transform: rotate(8deg); font: 700 .95rem/1 var(--font); letter-spacing: .02em; color: var(--red); border: 2px solid var(--red); padding: .25rem .45rem; background: #161c28cc; border-radius: .2rem; }
.stamp-completed { color: var(--blue); border-color: var(--blue); }
.stamp-planning { color: var(--graphite); border-color: var(--graphite); }
.bar { display: block; height: .4rem; background: var(--tint); border-radius: .2rem; margin-top: .5rem; }
.bar i { display: block; height: 100%; background: var(--red); border-radius: .2rem; }
.empty { color: var(--graphite); padding: 2rem 0; }

/* ---------- cels (one size everywhere) ---------- */
.cel { position: relative; flex: none; width: 16.6rem; background: var(--sheet); border-radius: .3rem; padding: .5rem .6rem .8rem; display: flex; flex-direction: column; gap: .35rem; box-shadow: .35rem .45rem 0 var(--tint); }
.cel-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem 1.1rem; align-items: stretch; }
.cel-grid > .cel, .cel-grid > .cel-wrap { min-width: 0; }
.cel-grid .cel { width: auto; height: 100%; }
.cel-frame { position: relative; display: block; margin-top: .3rem; }
.cel-frame img { width: 100%; aspect-ratio: 5 / 7; border-radius: .15rem; }
.cel-badge { position: absolute; left: -.5rem; top: .6rem; font: 700 .95rem/1 var(--font); color: var(--sheet); background: var(--blue); padding: .3rem .55rem; border-radius: .15rem; }
.cel-title { font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9rem; }
.cel-meta { color: var(--graphite); font-size: 1.05rem; min-height: 1.4rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cel-note { font: 400 1.05rem/1.2 var(--hand); color: var(--red); }
.cel-static { box-shadow: .5rem .6rem 0 var(--tint); }
.cel.is-static { pointer-events: none; }

/* ---------- shelves (Cel home) ---------- */
.shelf { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; padding: 2.5rem 3.5rem 3rem 3rem; }
.shelf-tab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); border-left: 3px solid var(--blue); padding: .4rem .5rem; align-self: start; display: flex; gap: .5rem; align-items: flex-start; }
.shelf-tab small { writing-mode: initial; display: none; }
.shelf-row { display: flex; gap: 1.3rem; overflow-x: auto; scrollbar-width: none; padding: 1.2rem .8rem 1.8rem; margin: 0 -3.5rem 0 -.8rem; padding-right: 3.5rem; scroll-padding-inline: .8rem; }
.shelf-row::-webkit-scrollbar { display: none; }

/* ---------- cut (hero) ---------- */
.cut { display: grid; grid-template-columns: 32rem 1fr; gap: 3rem; align-items: center; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; padding: 2.5rem 3.5rem 3rem 3rem; }
.cut-cel { position: relative; display: block; background: var(--sheet); border-radius: .3rem; padding: .6rem .8rem .9rem; box-shadow: .6rem .7rem 0 var(--tint), 1.2rem 1.4rem 0 #0a0e16; }
.cut-cel img { width: 100%; aspect-ratio: 16 / 10; object-position: center 20%; border-radius: .15rem; margin-top: .4rem; }
.cut-label { display: grid; gap: .3rem; padding-top: .8rem; }
.cut-label b { font-size: 1.9rem; line-height: 1.1; letter-spacing: -.01em; }
.cut-label > span:not(.note) { color: var(--graphite); }
.cut .xsheet { margin-top: 1rem; }

/* ---------- exposure sheet tables ---------- */
.xsheet { background: var(--sheet); border: 1px solid var(--grid); border-radius: .3rem; overflow: hidden; }
.xs-head, .xs-row { display: grid; grid-template-columns: 4rem 1fr 11rem 9rem; gap: 1rem; align-items: center; padding: .7rem 1rem; }
.xs-head { font: 400 1.05rem/1 var(--hand); color: var(--graphite); border-bottom: 2px solid var(--blue); }
.xs-row { border-bottom: 1px solid var(--grid); font-size: 1.25rem; position: relative; }
.xs-row:last-child { border-bottom: 0; }
.xs-no { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); }
.xs-row.is-current { background: #1a2744; }
.xs-row.is-current::before { content: '▶'; position: absolute; left: -.1rem; color: var(--red); font-size: .8rem; top: 50%; transform: translateY(-50%); }
.xs-row.is-future { color: var(--graphite); }
.xs-row.is-watched span:nth-child(2) { color: var(--graphite); }
.xs-row .bar { max-width: 20rem; margin-top: .3rem; }
.ok { font: 700 1rem/1 var(--font); color: var(--red); border: 2px solid var(--red); padding: .15rem .4rem; border-radius: .2rem; transform: rotate(-4deg); display: inline-block; }

/* ---------- landing / auth ---------- */
.landing { min-height: 100vh; display: grid; place-items: center; padding: 3rem; overflow: auto; }
.landing-cel { position: relative; width: min(100%, 110rem); background: var(--sheet); border-radius: .4rem; padding: 1rem 3rem 3rem; box-shadow: .8rem 1rem 0 var(--tint), 1.6rem 2rem 0 #080b12; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.landing-cel > .pegs { grid-column: 1 / -1; }
.landing-stack { position: relative; height: 34rem; }
.landing-stack img { position: absolute; width: 17rem; aspect-ratio: 5 / 7; border-radius: .2rem; box-shadow: .4rem .5rem 0 var(--tint); border: .4rem solid var(--sheet); }
@media (prefers-reduced-motion: no-preference) {
  .landing-stack img { animation: cel-settle .8s cubic-bezier(.22,1,.36,1) both; }
  .stack-0 { animation-delay: .04s; } .stack-1 { animation-delay: .1s; } .stack-2 { animation-delay: .16s; } .stack-3 { animation-delay: .22s; } .stack-4 { animation-delay: .28s; }
  @keyframes cel-settle { from { opacity: 0; } to { opacity: 1; } }
}
.stack-0 { left: 18rem; top: 2rem; transform: rotate(4deg); z-index: 5; }
.stack-1 { left: 9rem; top: 5rem; transform: rotate(-6deg); z-index: 4; }
.stack-2 { left: 27rem; top: 8rem; transform: rotate(9deg); z-index: 3; }
.stack-3 { left: 2rem; top: 10rem; transform: rotate(-12deg); z-index: 2; }
.stack-4 { left: 33rem; top: 1rem; transform: rotate(14deg); z-index: 1; }
.lede { font-size: 1.7rem; line-height: 1.35; max-width: 34ch; color: var(--graphite); margin: 1.5rem 0 2rem; }
.landing-copy .note-red { margin-top: 1.5rem; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 3rem; overflow: auto; }
.camera-sheet { position: relative; width: min(100%, 92rem); background: var(--sheet); border-radius: .4rem; padding: 1rem 2.5rem 2.5rem; box-shadow: .6rem .7rem 0 var(--tint); }
.cs-head { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 1.5rem; }
.camera-sheet h1 { font-size: 3rem; margin-bottom: 1.2rem; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.cs-fields { display: grid; gap: 1rem; }
.field span { display: block; font: 400 1.1rem/1 var(--hand); color: var(--graphite); margin-bottom: .35rem; }
.field input, .query input { width: 100%; font: 500 1.6rem/1 var(--font); padding: .9rem 1rem; border: 0; border-bottom: 2px solid var(--ink); background: var(--desk); border-radius: .3rem .3rem 0 0; color: var(--ink); }
.field input.tv-focus, .query input.tv-focus, .field input:focus-visible { border-bottom-color: var(--blue); }
.cs-static { width: auto; margin-top: 1.5rem; display: grid; gap: .6rem; }
.cs-static h2 { font-size: 1.7rem; margin-top: .5rem; }
.cs-static label { font: 400 1.1rem/1 var(--hand); color: var(--graphite); margin-top: .4rem; }
.cs-static p { margin: 0; }

/* QR pairing */
.qr-panel { display: grid; justify-items: start; gap: .8rem; }
.qr-box { width: 18rem; height: 18rem; background: #fff; padding: .55rem; border-radius: .3rem; box-shadow: .4rem .5rem 0 var(--tint); }
.qr-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.qr-placeholder { width: 18rem; height: 18rem; background: var(--desk); border-radius: .3rem; display: grid; place-items: center; color: var(--graphite); }
.pair-code { font-size: 3.2rem; font-weight: 700; letter-spacing: .28em; font-variant-numeric: tabular-nums; margin: .2rem 0; }
.pair-url { color: var(--graphite); font-size: 1.1rem; word-break: break-all; }

/* ---------- search (Tankōbon two-column, no OSK) ---------- */
.search { display: grid; grid-template-columns: 24rem 1fr; gap: 1.6rem; align-items: start; }
.search-side { display: grid; gap: .9rem; position: sticky; top: 0; }
.query { position: relative; display: grid; gap: .3rem; background: var(--sheet); padding: .5rem .9rem .8rem; border-radius: .3rem; box-shadow: .35rem .4rem 0 var(--tint); }
.filter-summary { display: grid; gap: .45rem; }
.filter-summary p { margin: 0; color: var(--graphite); font-size: 1.1rem; }
.page-search .cel-grid { grid-template-columns: repeat(5, 1fr); gap: 1.1rem .9rem; }
.results-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; }
.results-head h2 { font-size: 1.7rem; }

/* ---------- filters ---------- */
.filters-page { display: grid; gap: 1.2rem; max-width: 88rem; }
.filter-cats { display: grid; gap: .4rem; }
.filter-cat { display: grid; grid-template-columns: 14rem 1fr auto; gap: 1rem; align-items: center; width: 100%; padding: .85rem 1.1rem; background: var(--sheet); border: 1.5px solid var(--grid); border-radius: .3rem; }
.filter-cat b { font-size: 1.25rem; }
.filter-cat span { color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-cat.is-open { border-color: var(--blue); }
.filter-menu { margin-top: .4rem; }
.filter-menu .chips { flex-wrap: wrap; max-height: 28rem; overflow-y: auto; scrollbar-width: none; padding: .4rem 0; }

/* ---------- releases (Bangumi calendar, Cel tokens) ---------- */
.releases { display: grid; grid-template-columns: 1fr 30rem; gap: 2rem; align-items: start; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.cal-nav { display: flex; align-items: center; gap: 1rem; }
.cal-nav h1 { font-size: 2.4rem; min-width: 16rem; text-align: center; }
.cal-nav .btn { padding: .45rem .9rem; font-size: 1.6rem; }
.cal-tools { display: flex; align-items: center; gap: 1.2rem; }
.cal-count { color: var(--graphite); font-size: 1.15rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 2px solid var(--blue); border-left: 1px solid var(--grid); background: var(--sheet); border-radius: 0 0 .3rem .3rem; overflow: hidden; }
.cal-dow { font: 400 1.05rem/1 var(--hand); color: var(--graphite); padding: .5rem .6rem; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.cal-cell { min-height: 10.4rem; padding: .5rem .55rem; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); display: flex; flex-direction: column; width: 100%; background: var(--sheet); }
.cal-cell.is-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--grid) 6px 7px); opacity: .45; }
.cal-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--graphite); }
.cal-cell.is-today .cal-num { color: var(--red); }
.cal-cell.is-today .cal-num::after { content: ' today'; font-weight: 500; font: 400 .95rem/1 var(--hand); }
.cal-cell.is-selected { background: #1a2744; }
.cal-cell ul { list-style: none; margin: .35rem 0 0; padding: 0; font-size: 1.02rem; display: grid; gap: .2rem; }
.cal-cell li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cell li time { font-variant-numeric: tabular-nums; color: var(--graphite); }
.cal-cell li.is-mine { color: var(--red); }
.cal-more { margin-top: auto; padding-top: .3rem; font-size: 1rem; color: var(--graphite); }
.day-sheet { position: sticky; top: 2.5rem; background: var(--sheet); border-radius: .3rem; padding: .6rem 1.2rem 1.2rem; box-shadow: .5rem .6rem 0 var(--tint); }
.day-sheet h2 { font-size: 1.7rem; margin-top: .6rem; }
.day-rows { list-style: none; margin: .8rem 0 0; padding: 0; max-height: calc(100vh - 14rem); overflow-y: auto; scrollbar-width: none; }
.day-row { display: grid; grid-template-columns: 6.2rem 3rem 1fr; gap: .8rem; align-items: center; padding: .5rem .4rem; border-top: 1px solid var(--grid); border-radius: .2rem; }
.day-row time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.15rem; white-space: nowrap; }
.day-row img { width: 3rem; aspect-ratio: 5 / 7; border-radius: .15rem; }
.day-row b { display: block; font-size: 1.2rem; line-height: 1.2; } .day-row small { color: var(--graphite); }
.day-row.is-mine time { color: var(--red); }

/* ---------- detail (Tankōbon structure, Cel chrome) ---------- */
.chapter-cover { display: grid; grid-template-columns: 22rem 1fr; gap: 2.5rem; align-items: start; }
.cc-art { width: 22rem; }
.cc-art .cel-frame img { aspect-ratio: 5 / 7; }
.cc-body { width: auto; padding: .6rem 2rem 2rem; display: grid; gap: .55rem; align-content: start; }
.cc-body h1 { font-size: 3rem; line-height: 1.05; margin-top: .5rem; }
.cc-native { margin: 0; color: var(--graphite); }
.facts { display: grid; grid-template-columns: repeat(4, auto); gap: .6rem 2rem; margin: .4rem 0; padding: .8rem 0; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.facts dt { font: 400 1rem/1 var(--hand); color: var(--graphite); } .facts dd { margin: .2rem 0 0; font-weight: 500; font-size: 1.2rem; }
.desc { color: var(--graphite); max-width: 78ch; margin: .2rem 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.2rem; }
.detail-actions { gap: 1.5rem; margin-top: .5rem; }
.status { display: inline-flex; border: 1.5px solid var(--grid); border-radius: 2rem; overflow: hidden; }
.status-opt { padding: .8rem 1.1rem; font-size: 1.15rem; font-weight: 500; color: var(--graphite); border-right: 1.5px solid var(--grid); }
.status-opt:last-child { border-right: 0; }
.status-opt.is-active { background: var(--red); color: var(--sheet); }
.status-opt.tv-focus { outline-offset: -3px; box-shadow: none; }

.volumes { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; margin-top: 2.5rem; align-items: start; }
.spine-row { display: flex; gap: .4rem; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding: 0 .4rem .6rem; }
.spine-row::-webkit-scrollbar { display: none; }
.spine { width: 4.2rem; height: 22rem; background: var(--sheet); border: 2px solid var(--ink); border-radius: .2rem; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: .55rem 0; box-shadow: .3rem .35rem 0 var(--tint); }
.spine-no { font-size: 1.05rem; font-weight: 700; color: var(--blue); }
.spine-title { writing-mode: vertical-rl; font-weight: 700; font-size: 1.1rem; padding: .5rem 0; white-space: nowrap; }
.spine-year { font-size: .95rem; color: var(--graphite); }
.spine.is-active { height: 24rem; background: var(--blue); color: var(--sheet); border-color: var(--blue); }
.spine.is-active .spine-no, .spine.is-active .spine-year { color: var(--sheet); }
.spine.tv-focus { transform: translateY(-.5rem); }
.chapters-list h2 { font-size: 1.8rem; display: flex; gap: 1rem; align-items: baseline; margin-bottom: .6rem; }
.chapters-list h2 small { font: 400 1.1rem/1 var(--hand); color: var(--graphite); }
.chapters-list ol { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--grid); border-radius: .3rem; max-height: 26rem; overflow-y: auto; scrollbar-width: none; }
.chap { display: grid; grid-template-columns: 4rem 1fr 10rem 7rem; gap: 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--grid); }
.chap-no { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); }
.chap-title { font-weight: 700; font-size: 1.2rem; } .chap-title .bar { max-width: 18rem; }
.chap time, .chap-state { color: var(--graphite); font-size: 1.05rem; }
.chap.is-watched .chap-title { color: var(--graphite); }
.chap.is-future { opacity: .5; }

.widget { margin-top: 2.5rem; }
.widget-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.widget-tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--blue); }
.widget-tab { font-size: 1.2rem; font-weight: 500; padding: .6rem 1rem; color: var(--graphite); border-radius: .3rem .3rem 0 0; }
.widget-tab.is-open { background: var(--sheet); color: var(--ink); }
.widget-grid { margin-top: 1.2rem; }
.widget-grid .cel-grid { grid-template-columns: repeat(6, 1fr); }

/* franchise overlay */
.overlay { position: fixed; inset: 0; z-index: 30; background: var(--desk); padding: 2rem 3rem 3rem; overflow: auto; scrollbar-width: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 4rem 4rem; }
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.overlay-head h2 { font-size: 2.2rem; }
.franchise-node { margin-bottom: 2rem; }
.franchise-node h3 { font-size: 1.5rem; margin-bottom: .8rem; display: flex; gap: .8rem; align-items: baseline; }
.cel-wrap { display: grid; grid-template-rows: 1fr auto; gap: .4rem; min-width: 0; }
.cel-wrap .cel { width: auto; height: 100%; }
.expand-row { display: flex; gap: .4rem; }

/* ---------- player (Bangumi chrome, Cel type) ---------- */
.page-player, .page-player body { background: #000; }
.player { position: fixed; inset: 0; background: #000; color: var(--ink); }
.stage { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.stage-note { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #3a3f4a; font-size: 1.8rem; font-weight: 700; pointer-events: none; z-index: 1; }
.stage-note small { display: block; font: 400 1.2rem/1.3 var(--hand); margin-top: .3rem; }
.stage.is-ready .stage-note { display: none; }
.stage.is-error .stage-note { color: var(--red); }
.osd { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .25s; z-index: 2; }
.osd.is-hidden { opacity: 0; pointer-events: none; }
.osd-top { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: 2rem var(--safe); background: linear-gradient(#000c, #0000); }
.osd-top .btn { background: transparent; color: var(--ink); border-color: var(--ink); }
.osd-title b, .osd-title h1 { display: block; font-size: 2rem; } .osd-title span, .osd-title p { color: #b7bcc7; font-size: 1.2rem; margin: .2rem 0 0; }
.osd-top .note { color: var(--ink); font-size: 1.6rem; }
.osd-clock { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.osd-bottom { padding: 3rem var(--safe) 2.5rem; background: linear-gradient(#0000, #000d); }
.timeline { position: relative; height: 2.2rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--graphite); }
.timeline.tv-focus, .timeline:focus-visible { background: none !important; color: var(--ink) !important; border-bottom-color: var(--blue); box-shadow: none; }
.tl-ticks i { position: absolute; bottom: 0; width: 1px; height: .5rem; background: var(--graphite); }
.tl-ticks i:nth-child(6n+1) { height: 1rem; }
.tl-buffered, .tl-played { position: absolute; bottom: -2px; left: 0; height: .5rem; }
.tl-buffered { background: #4b5160; } .tl-played { background: var(--blue); }
.tl-knob { position: absolute; bottom: -.55rem; width: .4rem; height: 1.6rem; background: var(--red); transform: translateX(-50%); }
.timeline.tv-focus .tl-knob { height: 2.4rem; bottom: -.7rem; }
.tl-time { position: absolute; left: 0; top: -1.8rem; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-time span { color: var(--graphite); font-weight: 500; } .tl-time span::before { content: ' / '; }
.tl-remaining { position: absolute; right: 0; top: -1.8rem; font-size: 1.4rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.tl-skip { position: absolute; bottom: -2px; height: .5rem; opacity: .85; pointer-events: none; }
.tl-skip-intro { background: var(--blue); }
.tl-skip-outro { background: var(--red); }
.controls { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.ctl { font-weight: 500; font-size: 1.2rem; padding: .75rem 1.05rem; border: 1.5px solid var(--grid); border-radius: .3rem; background: var(--sheet); display: inline-flex; align-items: center; gap: .45rem; }
.ctl small { font: 400 .95rem/1 var(--hand); color: var(--graphite); }
.ctl b { font-weight: 700; color: var(--graphite); }
.ctl-main { background: var(--ink); color: var(--sheet); min-width: 7.5rem; justify-content: center; }
.ctl:disabled { opacity: .35; }
.ctl-gap { flex: 1; }
.ctl-vol { padding: 0; gap: 0; }
.ctl-inner { font: inherit; padding: .75rem 1.05rem; }
.ctl-vol input { width: 9rem; accent-color: var(--blue); margin: 0 .8rem; }
.ctl-skip { border-color: var(--red); color: var(--red); }
.menu { position: absolute; right: var(--safe); bottom: 10rem; width: 22rem; background: var(--sheet); border-radius: .3rem; padding: .5rem; display: grid; gap: .15rem; box-shadow: .4rem .5rem 0 #2a2f3a; }
.menu-title { font: 400 1.05rem/1 var(--hand); color: var(--graphite); padding: .5rem .7rem .6rem; border-bottom: 2px solid var(--blue); margin-bottom: .3rem; }
.menu-item { font-size: 1.3rem; font-weight: 500; padding: .75rem .7rem; border-radius: .2rem; }
.menu-item.is-active { color: var(--blue); } .menu-item.is-active::after { content: ' ✓'; }
.ep-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 38rem; background: var(--sheet); padding: .8rem 1.5rem 2rem; overflow-y: auto; scrollbar-width: none; box-shadow: -.4rem 0 0 var(--tint); }
.ep-drawer h2 { font-size: 1.8rem; margin: .4rem 0 .8rem; }
.ep-drawer ol { list-style: none; margin: 0; padding: 0; }
.ep-drawer .chap { grid-template-columns: 4rem 1fr 9rem; }
.ep-drawer .chap.is-current { background: #1a2744; }

/* ---------- saved ---------- */
.saved-head { display: grid; gap: 1rem; margin-bottom: 1.8rem; }
.saved-head h1 { font-size: 2.8rem; display: flex; align-items: baseline; gap: 1rem; }

/* ---------- settings ---------- */
.settings { max-width: 80rem; }
.settings h1 { font-size: 2.8rem; }
.settings .camera-sheet { width: auto; }

@media (max-width: 1100px) {
  .desk { grid-template-columns: 1fr; } .pegbar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 1rem; } .pegbar .brand { margin: 0 1rem 0 0; } .pegbar-foot { display: none; }
  .cut, .search, .releases, .chapter-cover, .volumes, .landing-cel, .cs-grid { grid-template-columns: 1fr; }
  .landing-stack { display: none; } .facts { grid-template-columns: 1fr 1fr; }
  .page-search .cel-grid, .widget-grid .cel-grid { grid-template-columns: repeat(3, 1fr); }
}