:root {
  --ink: #292923; --ink-soft: #625f56; --sidebar: #1d2522; --sidebar-deep: #121a18; --sidebar-line: #64563d;
  --paper: #f6f0e4; --paper-bright: #fffaf0; --paper-deep: #ebe0cc; --red: #a43226; --red-soft: #f2e2d9;
  --jade: #657a6a; --jade-soft: #e4ebe0; --gold: #b78740; --gold-soft: #f1e7d0; --slate: #697680;
  --line: #d7c6aa; --line-strong: #c6ae89; --shadow-sm: 0 3px 12px rgb(71 52 29 / 7%); --shadow-md: 0 14px 35px rgb(71 52 29 / 10%);
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px;
  --serif: Georgia, 'Times New Roman', serif; --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
html { background: var(--paper); scrollbar-gutter: stable; }
body { min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(183 135 64 / 48%); outline-offset: 3px; }

/* Persistent shell surfaces */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); background-color: var(--paper); background-image: radial-gradient(circle at 75% 0%, rgb(255 251 240 / 85%), transparent 34%), linear-gradient(115deg, rgb(255 255 255 / 12%), transparent 42%); }
.sidebar { position: relative; z-index: 6; min-height: 100vh; overflow: hidden; padding: 24px 21px; color: #f7edda; background-color: var(--sidebar); background-image: linear-gradient(145deg, rgb(16 24 22 / 82%), rgb(35 43 38 / 88%)), repeating-linear-gradient(45deg, transparent 0 5px, rgb(255 255 255 / 2%) 6px 7px), radial-gradient(ellipse at 50% 100%, rgb(133 99 55 / 24%), transparent 47%); border-right: 1px solid #3d3c31; }
.sidebar::before, .sidebar::after { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgb(190 143 63 / 70%); }
.sidebar::after { inset: 13px; border-color: rgb(190 143 63 / 30%); }
.sidebar__corner { position: absolute; z-index: 0; width: 47px; height: 47px; opacity: .65; border-color: var(--gold); border-style: solid; }
.sidebar__corner--top { top: 0; left: 0; border-width: 0 1px 1px 0; }
.sidebar__corner--bottom { right: 0; bottom: 0; border-width: 1px 0 0 1px; }
.brand { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: 12px 0 18px; }
.brand__seal { display: grid; place-items: center; width: 75px; height: 81px; padding: 5px; border: 2px solid #c84732; border-radius: 9px; color: #d6573b; font: 21px/1.1 var(--serif); text-align: center; box-shadow: inset 0 0 0 3px #29312c, 0 0 0 1px rgb(180 131 50 / 25%); }
.brand__subline { max-width: 150px; color: #bcae94; font: 10px/1.35 var(--sans); letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 700; }
.button--add { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; gap: 9px; margin: 12px 0 24px; color: var(--red); background: var(--paper-bright); box-shadow: 0 4px 0 #8d6a38, var(--shadow-sm); font: 17px var(--serif); }
.button--add:hover { background: #fffdf6; transform: translateY(-1px); }
.icon { display: inline-grid; place-items: center; min-width: 22px; font-family: var(--sans); }
.icon--add { color: var(--red); font-size: 19px; }
.primary-nav { position: relative; z-index: 1; display: grid; gap: 3px; }
.nav-link { display: flex; align-items: center; width: 100%; min-height: 48px; gap: 13px; padding: 0 11px; border: 0; border-left: 3px solid transparent; color: #f5ecd9; background: transparent; text-align: left; font: 16px var(--serif); }
.nav-link .icon { color: #d3a450; font-size: 21px; }
.nav-link:hover, .nav-link.is-active { background: rgb(255 255 255 / 8%); border-left-color: var(--red); color: #fffaf0; }
.nav-link.is-active { font-weight: 700; }
.sidebar__landscape { position: absolute; z-index: 0; right: 10px; bottom: 13px; left: 15px; height: 160px; overflow: hidden; color: rgb(197 152 83 / 25%); font: 116px/1 var(--serif); letter-spacing: -45px; transform: rotate(-7deg); }
.sidebar__landscape span:last-child { color: rgb(227 208 166 / 20%); font-size: 90px; }

/* Header and content outlet */
.app-frame { min-width: 0; padding: 20px clamp(18px, 3vw, 40px) 40px; }
.header { max-width: 1260px; margin: 0 auto; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.header__ornament { margin-left: auto; color: rgb(183 135 64 / 35%); font: 37px/1 var(--serif); transform: rotate(-5deg); }
.header__date { color: var(--ink-soft); font: 14px var(--serif); letter-spacing: .04em; }
.header__actions { display: flex; gap: 2px; }
.header__row { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.header__context { display: grid; gap: 3px; margin-top: 12px; }
.header__context[hidden] { display: none; }
.header__title { font: 24px var(--serif); }
.search-shell { display: flex; align-items: center; flex: 1; max-width: 670px; min-height: 47px; gap: 12px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgb(255 251 242 / 62%); }
.search-shell .icon { color: var(--ink); font-size: 29px; line-height: 1; }
.search-shell input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink-soft); background: transparent; font: 16px var(--serif); }
.search-shell input::placeholder { color: #817a6f; opacity: 1; }
.search-shell { position: relative; }
.search-results { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; left: 0; max-height: min(65vh, 540px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper-bright); box-shadow: var(--shadow-md); }
.search-results__group { padding: 8px 0; border-bottom: 1px solid var(--line); }
.search-results__group:last-child { border-bottom: 0; }
.search-results__group h2 { margin: 5px 13px; color: var(--red); font: 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.search-result { display: grid; width: 100%; gap: 3px; padding: 10px 14px; border: 0; color: var(--ink); background: transparent; text-align: left; font: 16px var(--serif); }
.search-result span { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.search-result:hover, .search-result:focus { background: var(--gold-soft); }
.search-results__empty { margin: 0; padding: 16px; color: var(--ink-soft); }
.icon-button { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--ink); background: transparent; font-size: 22px; }
.icon-button:hover { background: var(--paper-deep); }
.main-outlet { min-height: calc(100vh - 155px); max-width: 1260px; margin: 0 auto; }
.placeholder-page { padding: clamp(42px, 8vh, 88px) 0; }
.placeholder-page__heading { display: flex; align-items: center; gap: 14px; }
.section-mark { color: var(--red); font-size: 39px; line-height: 1; }
.eyebrow { margin: 0; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(38px, 4vw, 54px); line-height: 1.05; }
h2 { font-size: 27px; }
.card { border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 65%); box-shadow: var(--shadow-sm); }
.placeholder-card { position: relative; max-width: 650px; min-height: 220px; margin: 28px 0 0 52px; padding: 32px; overflow: hidden; }
.placeholder-card h2 { margin-top: 8px; }
.placeholder-card p:not(.eyebrow) { max-width: 520px; margin: 13px 0 0; color: var(--ink-soft); line-height: 1.7; }
.placeholder-card__seal { position: absolute; top: 20px; right: 27px; color: rgb(183 135 64 / 35%); font: 75px var(--serif); transform: rotate(-12deg); }
.placeholder-card__rule { width: 130px; height: 2px; margin-top: 28px; background: var(--gold); opacity: .6; }

/* Shared visual primitives for later feature batches */
.button--primary { color: #fffaf0; background: var(--red); border-color: var(--red); }
.button--secondary { color: var(--ink); background: var(--paper-bright); }
.button--ghost { color: var(--red); background: transparent; border-color: transparent; }
.button--danger { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.button:disabled, .button[aria-disabled='true'] { cursor: not-allowed; color: #9e978b; background: #e9e2d6; border-color: #d2c6b4; box-shadow: none; }
.field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 13px; }
.field input, .field select, .field textarea, .control { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper-bright); }
.field textarea { min-height: 110px; resize: vertical; }
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--red); box-shadow: 0 0 0 3px rgb(164 50 38 / 12%); }
.field input:disabled, .field select:disabled, .field textarea:disabled { color: #989083; background: #eae3d7; }
.chip, .status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 5px; font: 12px var(--serif); white-space: nowrap; }
.chip--active { color: var(--red); border-color: #cc806f; background: var(--red-soft); }
.chip--genre { color: var(--jade); border-color: #aebdaf; background: var(--jade-soft); }
.chip--trope { color: #8d6148; border-color: #d6b49d; background: #f7e9df; }
.status--watching { color: #4d6355; background: var(--jade-soft); border-color: #b6c6b7; }
.status--completed { color: #fffaf0; background: var(--red); border-color: var(--red); }
.status--planned { color: #526672; background: #e4e8e9; border-color: #bdc8cb; }
.status--hold { color: #fffaf0; background: #b98231; border-color: #b98231; }
.status--dropped { color: #5d5b57; background: #e4e0d8; border-color: #c7c0b5; }
.gender { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font: 14px var(--serif); }
.gender--female { color: var(--red); }
.gender--male { color: var(--jade); }
.gender--unspecified { color: var(--slate); }

/* Batch 13 — locally bundled semantic line icons. */
.ui-icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; overflow: visible; }
.search-shell__icon { width: 19px; height: 19px; color: var(--ink); }
.icon-button .ui-icon { width: 19px; height: 19px; }
.icon-action .ui-icon { width: 15px; height: 15px; }
.icon--add { width: 18px; height: 18px; color: var(--red); }
.nav-icon {
  width: 25px;
  min-width: 25px;
  height: 25px;
  color: #ddb96d !important;
}
.nav-icon .ui-icon { width: 20px; height: 20px; }
.nav-link:hover .nav-icon, .nav-link.is-active .nav-icon { color: #ffe0a0 !important; }
.header-utility {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink-soft);
}
.header-utility:hover, .header-utility:focus-visible { border-color: var(--line-strong); color: var(--red); background: var(--gold-soft); }
.header-utility:active { background: var(--paper-deep); transform: translateY(1px); }
.header-utility--bookmarks { color: var(--red); }
.header-utility--tags { color: var(--jade); }
.header-utility--settings { color: #8d672f; }

.section-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  color: var(--red);
}
.section-mark .ui-icon { width: 27px; height: 27px; }
#recent-activity { scroll-margin-top: 24px; }

/* Modal and toast foundations */
.dialog { max-width: min(92vw, 480px); padding: 0; border: 0; border-radius: var(--radius-lg); color: var(--ink); background: transparent; box-shadow: 0 25px 80px rgb(0 0 0 / 30%); }
.dialog::backdrop { background: rgb(25 30 27 / 56%); }
.dialog__surface { position: relative; padding: 35px; border: 1px solid var(--gold); background: var(--paper); }
.dialog__surface p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.65; }
.dialog__close { position: absolute; top: 10px; right: 10px; }
.toast-region { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 10; display: grid; gap: 8px; width: min(360px, calc(100vw - 40px)); }
.toast { padding: 13px 16px; border-left: 4px solid var(--jade); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper-bright); box-shadow: var(--shadow-md); }
.toast--error { border-left-color: var(--red); }
.pwa-update { position:fixed; right:20px; bottom:max(92px, calc(env(safe-area-inset-bottom) + 76px)); z-index:11; display:grid; gap:10px; width:min(390px, calc(100vw - 40px)); padding:15px; border:1px solid var(--gold); border-radius:var(--radius-md); color:var(--ink); background:var(--paper-bright); box-shadow:var(--shadow-md); }
.pwa-update p { margin:0; font:16px var(--serif); }
.pwa-update div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.pwa-update .button { min-height:38px; }
.mobile-bar, .mobile-drawer, .drawer-overlay { display: none; }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 92px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .brand__subline { display: none; }
  .brand__seal { transform: scale(.82); }
  .button--add { padding-inline: 0; font-size: 0; }
  .button--add .ui-icon { width: 22px; height: 22px; }
  .nav-link { justify-content: center; padding-inline: 0; }
  .nav-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-link .icon { font-size: 23px; }
  .nav-icon { width: 34px; min-width: 34px; height: 34px; }
  .nav-icon .ui-icon { width: 23px; height: 23px; }
  .sidebar__landscape { opacity: .65; }
  .header__context { margin-top: 10px; }
}
@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); color: var(--red); background: rgb(246 240 228 / 96%); backdrop-filter: blur(12px); font: 19px var(--serif); }
  .mobile-bar__brand { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; letter-spacing: .05em; white-space: nowrap; }
  .app-frame { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
  .header { padding: 12px 0 16px; }
  .header__ornament, .header__actions { display: none; }
  .header__date { display: none; }
  .header__row { display: block; min-height: auto; }
  .header__context { min-width: 0; margin: 12px 0 14px; }
  .header__title { font-size: 21px; }
  .section-mark { width: 31px; height: 31px; }
  .section-mark .ui-icon { width: 22px; height: 22px; }
  .page-heading { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
  .page-heading > div { grid-column: 2; min-width: 0; }
  .page-heading > .button { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-left: 0; }
  .search-shell { max-width: none; min-height: 45px; }
  .mobile-drawer { position: fixed; inset: 0 auto 0 0; z-index: 8; display: grid; align-content: start; gap: 4px; width: min(84vw, 320px); padding: calc(22px + env(safe-area-inset-top)) 16px 24px; overflow-y: auto; transform: translateX(-105%); transition: transform 180ms ease; color: #f7edda; background-color: var(--sidebar); background-image: linear-gradient(145deg, rgb(16 24 22 / 82%), rgb(35 43 38 / 92%)), repeating-linear-gradient(45deg, transparent 0 5px, rgb(255 255 255 / 2%) 6px 7px); box-shadow: 12px 0 30px rgb(0 0 0 / 25%); }
  .mobile-drawer__brand { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; color: #d6c7ad; font: 15px var(--serif); }
  .mobile-drawer__brand .brand__seal { width: 46px; height: 50px; font-size: 14px; }
  .mobile-drawer .nav-link { justify-content: flex-start; min-height: 48px; padding-inline: 12px; font-size: 17px; }
  .mobile-drawer .nav-icon { width: 27px; min-width: 27px; height: 27px; }
  .mobile-drawer .nav-icon .ui-icon { width: 20px; height: 20px; }
  .mobile-drawer .nav-link__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .drawer-overlay { position: fixed; inset: 0; z-index: 7; display: block; pointer-events: none; opacity: 0; background: rgb(20 27 24 / 52%); transition: opacity 180ms ease; }
  .drawer-open .mobile-drawer { transform: translateX(0); }
  .drawer-open .drawer-overlay { pointer-events: auto; opacity: 1; }
  .placeholder-page { padding: 42px 0; }
  .placeholder-card { margin-left: 0; padding: 26px 22px; }
  .placeholder-card__seal { right: 16px; font-size: 58px; }
  .main-outlet { min-height: calc(100vh - 144px); }
  .pwa-update { right:12px; bottom:max(76px, calc(env(safe-area-inset-bottom) + 62px)); width:calc(100vw - 24px); }
}

/* Batch 9 — Stats: editorial analytics built from the shared library language. */
.stats-page { display:grid; gap:18px; padding:32px 0 46px; min-width:0; }
.stats-heading { display:flex; align-items:center; gap:14px; }
.stats-heading > div { display:grid; gap:4px; }
.stats-heading h1 { font-size:42px; }
.stats-heading p:not(.eyebrow) { margin:0; color:var(--ink-soft); font:15px var(--serif); }
.stats-overview, .stats-year { position:relative; padding:16px 18px 18px; overflow:hidden; }
.stats-overview::before, .stats-year::before { content:''; position:absolute; inset:7px; pointer-events:none; border:1px solid rgb(183 135 64 / 18%); }
.stats-section-title { position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.stats-section-title i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fffaf0; background:var(--red); font:15px var(--serif); font-style:normal; }
.stats-section-title h2 { font-size:22px; }
.stats-kpis { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin:10px 0; border:1px solid var(--line); background:rgb(255 251 242 / 46%); }
.stats-kpis article { position:relative; display:grid; align-content:center; min-height:78px; gap:5px; padding:10px 12px; border-right:1px solid var(--line); overflow:hidden; text-align:center; }
.stats-kpis article:last-child { border-right:0; }
.stats-kpis span, .stats-insights span, .stats-year-summary span { color:var(--ink-soft); font:11px var(--sans); letter-spacing:.03em; }
.stats-kpis span, .stats-kpis strong { position:relative; z-index:1; }
.stats-kpis strong { color:var(--ink); font:28px var(--serif); white-space:nowrap; }
.stats-kpi__mark { position:absolute; right:9px; bottom:5px; color:var(--gold); opacity:.18; font:27px/1 var(--serif); font-style:normal; }
.stats-kpi--favorites .stats-kpi__mark { color:var(--red); opacity:.2; }
.stats-kpi--completion .stats-kpi__mark { color:var(--gold); opacity:.23; }
.stats-kpi--rating .stats-kpi__mark { color:var(--gold); opacity:.27; }
.stats-kpis article:nth-child(2) strong,.stats-kpis article:nth-child(5) strong { color:var(--red); }
.stats-kpis article:nth-child(3) strong { color:var(--jade); }
.stats-kpis article:nth-child(4) strong { color:#746f66; }
.stats-kpis article:nth-child(6) strong { color:var(--gold); }
.stats-distributions { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stats-distributions > section, .stats-detail-grid > section, .stats-year-grid > section { min-width:0; padding:14px; border:1px solid var(--line); background:rgb(255 251 242 / 46%); }
.stats-page h3 { margin:0 0 12px; color:var(--ink); font:18px var(--serif); }
.stats-donut-layout { display:grid; grid-template-columns:138px minmax(0,1fr); align-items:center; gap:14px; min-height:178px; }
.stats-donut { display:grid; place-items:center; width:138px; height:138px; border-radius:50%; background:var(--stats-segments); box-shadow:inset 0 0 0 1px rgb(255 251 242 / 76%); }
.stats-donut > span { display:grid; place-items:center; align-content:center; gap:1px; width:82px; height:82px; border-radius:50%; border:1px solid var(--line); background:var(--paper-bright); color:var(--ink-soft); font:11px/1 var(--serif); }
.stats-donut b { color:var(--ink); font:27px/.92 var(--serif); }
.stats-donut small { color:var(--ink-soft); font:10px/1 var(--sans); }
.stats-legend { display:grid; gap:8px; }
.stats-legend span { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; color:var(--ink-soft); font-size:11px; }
.stats-legend i { width:8px; height:8px; border-radius:50%; }
.stats-legend em { min-width:0; overflow-wrap:anywhere; font-style:normal; }
.stats-legend b { color:var(--ink-soft); font-weight:500; white-space:nowrap; }
.stats-detail-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:10px; }
.stats-bars { display:grid; gap:9px; }
.stats-bars > div { display:grid; grid-template-columns:minmax(88px,1fr) minmax(54px,1.5fr) auto; align-items:center; gap:8px; min-width:0; font-size:11px; }
.stats-bars span { min-width:0; overflow-wrap:anywhere; color:var(--ink-soft); }
.stats-bars i { height:4px; overflow:hidden; border-radius:99px; background:var(--paper-deep); }
.stats-bars em { display:block; height:100%; border-radius:inherit; background:var(--jade); }
.stats-detail-grid > section:nth-child(2) .stats-bars em { background:var(--red); }
.stats-bars b { color:var(--ink-soft); font-weight:500; white-space:nowrap; }
.stats-cast { display:grid; gap:0; }
.stats-cast > div { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:29px; border-top:1px solid var(--line); }
.stats-cast > div:first-child { border-top:0; }
.stats-cast i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:var(--paper-deep); font-style:normal; }
.stats-cast span { display:grid; min-width:0; }
.stats-cast b { overflow-wrap:anywhere; font:13px var(--serif); }
.stats-cast small { color:var(--ink-soft); font-size:10px; overflow-wrap:anywhere; }
.stats-cast em { color:var(--ink-soft); font:10px var(--sans); font-style:normal; white-space:nowrap; }
.stats-insights { position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:10px; }
.stats-insights article { display:grid; align-content:center; min-height:82px; gap:5px; padding:10px 12px; border:1px solid var(--line); background:rgb(255 251 242 / 46%); text-align:center; }
.stats-insights strong { color:var(--ink); font:17px/1.18 var(--serif); overflow-wrap:anywhere; }
.stats-insights small { color:var(--ink-soft); font-size:10px; overflow-wrap:anywhere; }
.stats-year__heading { justify-content:flex-start; }
.stats-year__controls { display:flex; align-items:center; gap:7px; margin-left:auto; }
.stats-year__controls strong { min-width:74px; padding:4px 10px; border:1px solid var(--line); border-radius:4px; text-align:center; font:16px var(--serif); }
.stats-year__controls .icon-action { width:28px; height:28px; min-height:28px; font-size:22px; }
.stats-year-summary { position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:10px 0; border:1px solid var(--line); background:rgb(255 251 242 / 46%); }
.stats-year-summary article { display:grid; align-content:center; justify-items:center; gap:5px; min-height:62px; padding:8px 10px; border-right:1px solid var(--line); text-align:center; }
.stats-year-summary article:last-child { border-right:0; }
.stats-year-summary span { overflow-wrap:anywhere; }
.stats-year-summary b { max-width:100%; color:var(--ink); font:18px/1.12 var(--serif); overflow-wrap:anywhere; }
.stats-year-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(218px,.8fr) minmax(218px,.8fr); gap:10px; }
.stats-heatmap-wrap { overflow-x:auto; padding:2px 0 4px; }
.stats-heatmap-frame { display:grid; grid-template-columns:25px max-content; grid-template-rows:16px max-content; gap:4px 7px; width:max-content; }
.stats-heatmap-months, .stats-heatmap { display:grid; grid-template-columns:repeat(53,7px); gap:1px; width:max-content; }
.stats-heatmap-months { grid-template-rows:16px; align-items:end; }
.stats-heatmap-months span { min-width:max-content; color:var(--ink-soft); font:9px var(--sans); line-height:1; transform:translateX(-1px); }
.stats-heatmap-weekdays { display:grid; grid-template-rows:repeat(7,7px); gap:1px; align-items:center; color:var(--ink-soft); font:8px/1 var(--sans); text-align:right; }
.stats-heatmap { grid-template-rows:repeat(7,7px); grid-auto-flow:column; }
.stats-heatmap__day { width:7px; height:7px; padding:0; border:0; border-radius:1px; background:#ebe3d5; }
.stats-heatmap__day.level-1,.stats-key .level-1 { background:#dfe5d9; }.stats-heatmap__day.level-2,.stats-key .level-2 { background:#c6d0bb; }.stats-heatmap__day.level-3,.stats-key .level-3 { background:#ca8a4b; }.stats-heatmap__day.level-4,.stats-key .level-4 { background:var(--red); }
.stats-key { display:flex; align-items:center; justify-content:center; gap:5px; margin:12px 0 0; color:var(--ink-soft); font:10px var(--serif); }
.stats-key i { width:9px; height:9px; border-radius:1px; background:#ebe3d5; }
.stats-horizontal-bars { display:grid; gap:8px; padding:1px 0; }
.stats-horizontal-bars > div { display:grid; grid-template-columns:31px minmax(0,1fr) 18px; align-items:center; gap:7px; min-width:0; min-height:13px; }
.stats-horizontal-bars span { color:var(--ink-soft); font:10px var(--sans); white-space:nowrap; }
.stats-horizontal-bars i { display:block; height:5px; overflow:hidden; border-radius:99px; background:var(--paper-deep); }
.stats-horizontal-bars em { display:block; height:100%; min-width:0; border-radius:inherit; background:var(--jade); }
.stats-horizontal-bars b { color:var(--ink-soft); font:10px var(--sans); text-align:right; }
.stats-horizontal-bars--rating em { background:var(--gold); }
.stats-horizontal-bars--rating > div { grid-template-columns:31px minmax(0,1fr) 18px; }
.stats-empty { display:grid; place-items:center; min-height:130px; gap:7px; padding:18px; border:1px dashed var(--line-strong); color:var(--ink-soft); text-align:center; font-size:12px; }
.stats-empty strong { color:var(--ink); font:16px var(--serif); }
@media (max-width:1300px) and (min-width:1101px) { .stats-distributions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1100px) { .stats-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }.stats-kpis article:nth-child(4) { border-right:0; }.stats-kpis article:nth-child(-n+4) { border-bottom:1px solid var(--line); }.stats-distributions { grid-template-columns:minmax(0,1fr); }.stats-detail-grid { grid-template-columns:1fr 1fr; }.stats-detail-grid > section:last-child { grid-column:1/-1; }.stats-insights { grid-template-columns:repeat(3,minmax(0,1fr)); }.stats-year-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }.stats-year-summary article:nth-child(3) { border-right:0; }.stats-year-summary article:nth-child(-n+3) { border-bottom:1px solid var(--line); }.stats-year-grid { grid-template-columns:1.2fr 1fr; }.stats-year-grid > section:first-child { grid-column:1/-1; } }
@media (max-width:720px) { .stats-page { gap:14px; padding:24px 0 34px; }.stats-heading h1 { font-size:34px; }.stats-overview,.stats-year { padding:14px; }.stats-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-kpis article { min-height:68px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.stats-kpis article:nth-child(even) { border-right:0; }.stats-kpis article:last-child { grid-column:1/-1; border-bottom:0; }.stats-distributions,.stats-detail-grid,.stats-year-grid { grid-template-columns:minmax(0,1fr); }.stats-detail-grid > section:last-child,.stats-year-grid > section:first-child { grid-column:auto; }.stats-donut-layout { grid-template-columns:118px minmax(0,1fr); min-height:148px; }.stats-donut { width:118px; height:118px; }.stats-donut > span { width:70px; height:70px; }.stats-donut b { font-size:23px; }.stats-insights { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-insights article:first-child { grid-column:1/-1; }.stats-year-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-year-summary article { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.stats-year-summary article:nth-child(even) { border-right:0; }.stats-year-summary article:nth-last-child(-n+2) { border-bottom:0; }.stats-year-grid > section:first-child { padding:12px 9px 10px; }.stats-year-grid > section:first-child h3 { margin-bottom:8px; }.stats-heatmap-wrap { padding:4px 0 5px; }.stats-heatmap-frame { grid-template-columns:28px max-content; grid-template-rows:16px max-content; gap:5px 8px; }.stats-heatmap-months,.stats-heatmap { grid-template-columns:repeat(53,6px); gap:1px; }.stats-heatmap-months { grid-template-rows:16px; }.stats-heatmap-months span { font-size:8px; }.stats-heatmap-weekdays { grid-template-rows:repeat(7,6px); gap:1px; font-size:8px; }.stats-heatmap { grid-template-rows:repeat(7,6px); }.stats-heatmap__day { width:6px; height:6px; }.stats-key { margin-top:9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Batch 2 — text-first drama library */
.dramas-page { padding: 34px 0; }
.page-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-heading h1 small { margin-left: 10px; color: var(--red); font: 15px var(--serif); }
.page-heading > .button { margin-left: auto; }
.drama-tabs { display: flex; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 55%); }
.library-tools { display: flex; align-items: end; gap: 12px; margin: 0 0 14px; }
.library-sort { width: min(270px, 100%); margin-left: auto; }
.filter-panel { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 62%); }
.filter-panel[hidden] { display: none; }
.filter-toggle > span { display: inline-block; margin-left: 5px; transition: transform 160ms ease; }
.filter-toggle.is-expanded > span { transform: rotate(180deg); }
.filter-group { min-width: min(190px, 100%); max-height: 175px; overflow: auto; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.filter-group legend { padding: 0 4px; color: var(--red); font: 13px var(--serif); }
.filter-group label { display: flex; gap: 6px; padding: 4px 0; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.active-filters .chip { cursor: pointer; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.drama-tab { flex: 1 0 max-content; min-height: 52px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); background: transparent; font: 16px var(--serif); }
.drama-tab span { margin-left: 6px; color: var(--red); font-size: 12px; }
.drama-tab.is-active { border-bottom-color: var(--red); color: var(--red); font-weight: 700; }
.drama-list { --drama-row-columns: minmax(0, 1.37fr) minmax(0, 1.05fr) minmax(58px, .45fr) minmax(0, .72fr) minmax(0, 1.1fr) minmax(0, .88fr) minmax(44px, .38fr) minmax(96px, .72fr) minmax(100px, .78fr); margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 48%); }
.drama-row-header, .drama-row { display: grid; grid-template-columns: var(--drama-row-columns); column-gap: 10px; }
.drama-row-header { align-items: end; min-height: 33px; padding: 7px 16px 6px; border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); font: 10px/1.2 var(--serif); letter-spacing: .035em; text-transform: uppercase; }
.drama-row-header > span { min-width: 0; overflow-wrap: anywhere; white-space: nowrap; }
.drama-row { row-gap: 8px; align-items: center; min-height: 74px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.drama-row:last-child { border-bottom: 0; }
.drama-row > * { min-width: 0; }
.drama-row__title { display: grid; gap: 2px; min-width: 0; }
.drama-row__title > span { color: var(--ink-soft); font: 12px/1.25 var(--serif); overflow-wrap: anywhere; }
.text-button { padding: 0; border: 0; color: var(--ink); background: none; text-align: left; font: 17px/1.2 var(--serif); overflow-wrap: anywhere; }
.text-button:hover { color: var(--red); text-decoration: underline; }
.drama-row__cast { display: grid; gap: 3px; min-width: 0; }
.drama-row__cast .gender { font-size: 12px; overflow-wrap: anywhere; }
.drama-row__year { color: var(--ink-soft); font: 12px var(--serif); }
.row-chips { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.row-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.drama-row__genres .chip { min-height: 25px; padding: 3px 8px; font-size: 11px; }
.drama-row__tropes .chip { min-height: 23px; padding: 2px 6px; font-size: 10px; }
.drama-row__platform { color: var(--ink-soft); font: 12px/1.3 var(--serif); overflow-wrap: break-word; word-break: normal; }
.trope-more { color: var(--red); font: 11px var(--serif); }
.drama-row__rating { color: var(--gold); font: 13px var(--serif); }
.drama-row__status { min-height: 28px; width: 100%; padding: 3px 5px; border-radius: 5px; font: 10px var(--serif); }
.drama-row .row-actions { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: 28px 27px; gap: 4px; align-items: center; min-width: 0; }
.drama-row .row-actions .icon-action { width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 14px; }
.drama-row .row-actions .button { grid-column: 1 / -1; grid-row: 2; min-height: 27px; width: 100%; padding: 0 5px; font: 11px var(--serif); }
.icon-action { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--paper-bright); font-size: 17px; }
.icon-action--edit .edit-pencil { display: block; transform: scaleX(-1); }
[data-details-edit] { transform: scaleX(-1); }
.icon-action:hover, .icon-action.is-favorite { color: var(--red); border-color: #cc806f; background: var(--red-soft); }
.icon-action--danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.drama-empty { display: grid; justify-items: center; gap: 12px; margin: 26px; padding: 42px 20px; text-align: center; }
.drama-empty > span { color: rgb(183 135 64 / 42%); font: 52px var(--serif); }
.drama-empty > span .ui-icon { width: 42px; height: 42px; }
.drama-empty p { max-width: 430px; margin: 0; color: var(--ink-soft); }
.dialog--form { width: min(1080px, 96vw); max-width: 1080px; max-height: 92vh; }
.dialog--form .dialog__surface, .dialog--details .dialog__surface { max-height: 90vh; overflow: auto; }
.drama-form h2 { margin-top: 5px; }
.form-note { color: var(--ink-soft); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 18px 0; }
.form-grid--quick { grid-template-columns: 2fr repeat(4, 1fr); }
.form-grid--quick > .field { grid-template-rows: 34px minmax(44px, auto); align-content: start; }
.more-details { padding: 7px 0; border: 0; color: var(--red); background: none; font: 15px var(--serif); }
.more-panel { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.multi-choice { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 17px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.multi-choice legend { padding: 0 5px; color: var(--ink-soft); font: 13px var(--serif); }
.multi-choice label, .flags label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 13px; }
.flags { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0; }
.form-errors { min-height: 20px; color: var(--red); font-size: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.discard-prompt { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--gold); background: var(--paper-bright); box-shadow: var(--shadow-md); }
.discard-prompt p { margin: 0 auto 0 0; color: var(--ink); }
.dialog--details { width: min(720px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: min(90vh, 820px); margin: auto; overflow: hidden; }
.dialog--details .details { width: 100%; max-width: 100%; min-width: 0; max-height: min(90vh, 820px); overflow-x: hidden; overflow-y: auto; }
.dialog--details .details > * { min-width: 0; }
.details h2 { margin-top: 5px; }
.details h2, .details section p { overflow-wrap: anywhere; }
.details-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 15px 0; }
.details section { padding: 14px 0; border-top: 1px solid var(--line); }
.details h3 { margin: 0; font: 18px var(--serif); }
.details section p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; white-space: pre-line; }
.details .text-button { max-width: 100%; white-space: normal; }
.details a { color: var(--red); }
@media (max-width: 1050px) { .form-grid--quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1050px) and (min-width: 721px) { .drama-list { overflow: visible; } .drama-row-header { display: none; } .drama-row { min-width: 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(78px, .65fr) minmax(100px, .8fr); grid-template-areas: "title cast status actions" "title cast rating actions" "year genres tropes platform"; column-gap: 10px; row-gap: 8px; padding: 12px 14px; } .drama-row__title { grid-area: title; } .drama-row__cast { grid-area: cast; } .drama-row__year { grid-area: year; } .drama-row__genres { grid-area: genres; } .drama-row__tropes { grid-area: tropes; } .drama-row__platform { grid-area: platform; } .drama-row__rating { grid-area: rating; } .drama-row__status { grid-area: status; } .drama-row .row-actions { grid-area: actions; align-self: center; } }
@media (max-width: 720px) { .app-shell { display: block !important; grid-template-columns: minmax(0, 1fr) !important; } .sidebar { display: none !important; } .dramas-page { padding: 25px 0; min-width: 0; } .page-heading { align-items: flex-end; flex-wrap: wrap; } .page-heading > .button { margin-left: auto; } .library-tools { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } .library-tools > .button, .library-sort { width: 100%; min-width: 0; margin-left: 0; } .filter-panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .filter-panel[hidden] { display: none; } .filter-group { min-width: 0; max-width: 100%; max-height: 155px; } .active-filters { min-width: 0; } .drama-tabs { width: 100%; max-width: 100%; margin-inline: 0; border-radius: var(--radius-md); } .drama-list { overflow: visible; border: 0; background: none; } .drama-row-header { display: none; } .drama-row { display: grid; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 11px; margin: 14px 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 70%); box-shadow: var(--shadow-sm); } .drama-row > * { min-width: 0; overflow-wrap: anywhere; } .drama-row__title { grid-column: 1 / -1; } .drama-row__cast { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .drama-row > div:nth-of-type(3), .drama-row > div:nth-of-type(4), .drama-row > div:nth-of-type(5), .drama-row > div:nth-of-type(6), .drama-row > div:nth-of-type(7) { min-width: 0; } .row-chips .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .drama-row__status { width: auto; min-width: 112px; max-width: 100%; min-height: 34px; padding-inline: 8px; justify-self: start; } .drama-row .row-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 30px); grid-template-rows: 30px 30px; gap: 5px; min-width: 0; } .drama-row .row-actions .icon-action { width: 30px; min-width: 30px; height: 30px; min-height: 30px; } .drama-row .row-actions .button { grid-column: 1 / -1; grid-row: 2; width: auto; min-width: 102px; margin-right: 0; padding-inline: 8px; justify-self: start; } .dialog--form { width: 100vw; max-width: none; max-height: 100dvh; margin: 0; border-radius: 0; } .dialog--form .dialog__surface { min-height: 100dvh; max-height: 100dvh; padding: 55px 18px calc(24px + env(safe-area-inset-bottom)); } .form-grid, .form-grid--quick { grid-template-columns: 1fr; } .form-grid--quick > .field { grid-template-rows: auto; } .multi-choice { max-height: 190px; overflow: auto; } .form-actions { position: sticky; bottom: -24px; padding: 12px 0; background: var(--paper); } .drama-empty { margin: 15px 0; } }

/* Batch 3 — canonical cast library */
.cast-page { padding: 34px 0; }
.cast-search { max-width: 460px; margin-bottom: 16px; }
.cast-list { display: grid; gap: 12px; margin-top: 16px; }
.cast-card { display: grid; grid-template-columns: 54px minmax(180px, 1fr) minmax(150px, .7fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 62%); box-shadow: var(--shadow-sm); }
.cast-avatar { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--gold-soft); font: 17px var(--serif); }
.cast-card__main { display: grid; gap: 4px; min-width: 0; }
.cast-card__main > span:not(.gender) { color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.cast-card__metrics { display: grid; gap: 5px; color: var(--ink-soft); font: 13px var(--serif); }
.cast-autocomplete { position: relative; }
.cast-autocomplete .field { display: block; }
.cast-autocomplete__menu { position: absolute; z-index: 4; top: calc(100% + 4px); right: 0; left: 0; max-height: 190px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper-bright); box-shadow: var(--shadow-md); }
.cast-autocomplete__option { display: flex; width: 100%; gap: 8px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.cast-autocomplete__option:hover, .cast-autocomplete__option:focus { background: var(--gold-soft); }
@media (max-width: 720px) { .cast-page { padding: 25px 0; } .cast-card { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; } .cast-card__metrics, .cast-card .row-actions { grid-column: 1 / -1; } .cast-card .row-actions { margin-left: 0; } }

/* Batch 5 — Watchlist and Custom Lists */
.options-page { padding: 34px 0; } .options-page [data-options] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .option-card { padding:18px; min-width:0; } .option-card h2 { margin:0; font:22px var(--serif); } .option-card ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .option-card li { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px; align-items:center; padding:9px 0; border-top:1px solid var(--line); } .option-card li span { overflow-wrap:anywhere; } .option-card li small,.option-card li em { color:var(--ink-soft); font:12px var(--serif); } .option-card li em { color:var(--jade); } @media (max-width:720px) { .options-page { padding:25px 0; } .options-page [data-options] { grid-template-columns:minmax(0,1fr); } .option-card li { grid-template-columns:minmax(0,1fr) auto auto; } .option-card li small { grid-column:1/-1; } }
.lists-page { padding: 34px 0; }
.list-section { margin-top: 34px; }
.list-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.list-section__heading h2 small, .custom-list-card > span { color: var(--red); font: 14px var(--serif); }
.list-section__heading p { margin: 7px 0 0; color: var(--ink-soft); line-height: 1.55; }
.list-drama-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 48%); }
.list-drama-row { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(120px, .8fr) minmax(150px, .7fr) minmax(260px, 1fr); align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.list-drama-row:last-child { border-bottom: 0; }
.list-drama-row > div:first-child { display: grid; gap: 4px; min-width: 0; }
.list-drama-row > div:first-child > span { color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.list-drama-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.list-drama-row__actions .button { min-height: 34px; padding-inline: 9px; font-size: 12px; }
.list-drama-row__actions .row-status { width: auto; max-width: 145px; }
.custom-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.custom-list-card { display: grid; align-content: start; gap: 9px; min-width: 0; min-height: 175px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 62%); box-shadow: var(--shadow-sm); }
.custom-list-card.is-selected { border-color: #cc806f; box-shadow: 0 0 0 2px rgb(164 50 38 / 12%), var(--shadow-sm); }
.custom-list-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; overflow-wrap: anywhere; }
.custom-list-card .row-actions { margin-top: auto; }
.custom-list-details { margin-top: 24px; padding: 22px; }
.list-selector { display: grid; max-height: min(46vh, 380px); gap: 0; margin-top: 14px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.list-selector label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 11px; border-bottom: 1px solid var(--line); color: var(--ink-soft); overflow-wrap: anywhere; }
.list-selector label:last-child { border-bottom: 0; }
@media (max-width: 720px) { .lists-page { padding: 25px 0; } .list-section__heading { flex-wrap: wrap; } .list-drama-list { overflow: visible; border: 0; background: none; } .list-drama-row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 70%); box-shadow: var(--shadow-sm); } .list-drama-row > * { min-width: 0; overflow-wrap: anywhere; } .list-drama-row__actions .row-status { max-width: 100%; } .custom-list-details { margin-inline: 0; padding: 17px; } .custom-list-grid { grid-template-columns: minmax(0, 1fr); } }

/* Batch 7 — Reviews and Notes */
.reviews-page { padding: 34px 0; min-width: 0; }
.review-tabs { display: flex; overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 55%); }
.review-tab { flex: 1 0 max-content; min-height: 52px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); background: transparent; font: 16px var(--serif); }
.review-tab span { margin-left: 6px; color: var(--red); font-size: 12px; }
.review-tab.is-active { border-bottom-color: var(--red); color: var(--red); font-weight: 700; }
.review-list, .top-rated-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.review-card { display: grid; grid-template-columns: minmax(180px, 1.2fr) auto; gap: 12px 22px; min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 62%); box-shadow: var(--shadow-sm); }
.review-card__title { display: grid; gap: 4px; min-width: 0; }
.review-card__title > span { color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.review-card__summary { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 8px; min-width: 0; }
.review-card__summary .status { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.review-scores { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; min-width: 0; }
.review-scores span { min-width: 92px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font: 13px var(--serif); }
.review-scores b { color: var(--ink); font-weight: 600; }
.review-flags { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; min-width: 0; }
.review-flag { color: var(--jade); border-color: #aebdaf; background: var(--jade-soft); white-space: normal; }
.review-preview { grid-column: 1 / -1; min-width: 0; margin: 0; color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-preview--empty, .note-updated, .top-rated-meta { color: var(--ink-soft); font: 13px var(--serif); }
.review-card .row-actions { grid-column: 1 / -1; }
.review-empty { display: grid; justify-items: center; gap: 12px; padding: 42px 20px; text-align: center; }
.review-empty > span { color: rgb(183 135 64 / 42%); font: 52px var(--serif); }
.review-empty p { max-width: 460px; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.top-rated-card { position: relative; padding-left: 68px; }
.top-rated-rank { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%; color: var(--red); background: var(--gold-soft); font: 17px var(--serif); }
.top-rated-meta { grid-column: 1 / -1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.review-rating-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.review-flags-input { margin-top: 0; }
.review-dialog { width: min(850px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.review-confirm { width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
@media (max-width: 900px) { .review-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .reviews-page { padding: 25px 0; } .review-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 17px; } .review-card__summary { justify-content: flex-start; } .review-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-scores span { min-width: 0; overflow-wrap: anywhere; } .top-rated-card { padding-left: 64px; } .review-dialog, .review-confirm { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); } .review-dialog .dialog__surface, .review-confirm .dialog__surface { max-height: calc(100dvh - 24px); padding: 45px 18px 20px; overflow-y: auto; overflow-x: hidden; } .review-rating-grid { grid-template-columns: minmax(0, 1fr); } }

/* Batch 8 — Dashboard */
.dashboard-page { min-width: 0; padding: 34px 0; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin: 24px 0; }
.kpi-card { display: grid; min-width: 0; gap: 8px; padding: 18px; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius-md); background: rgb(255 251 242 / 68%); box-shadow: var(--shadow-sm); }
.kpi-card span { color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.kpi-card strong { color: var(--ink); font: 30px var(--serif); line-height: 1; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
.dashboard-module { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 62%); box-shadow: var(--shadow-sm); }
.dashboard-module h2 { margin: 0 0 14px; color: var(--ink); font: 21px var(--serif); }
.dashboard-module .module-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dashboard-module .module-heading h2 { margin-bottom: 14px; }
.dashboard-module .module-heading .button { margin-top: -5px; white-space: nowrap; }
.dashboard-list, .favorite-cast-list, .activity-list { display: grid; gap: 8px; }
.dashboard-drama, .favorite-cast-list button { display: grid; width: 100%; min-width: 0; gap: 4px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.dashboard-list .dashboard-drama:first-child, .favorite-cast-list button:first-child { border-top: 0; padding-top: 0; }
.dashboard-drama:hover b, .dashboard-drama:focus-visible b, .favorite-cast-list button:hover b, .favorite-cast-list button:focus-visible b { color: var(--red); text-decoration: underline; }
.dashboard-drama b, .favorite-cast-list b { overflow-wrap: anywhere; }
.dashboard-drama span, .dashboard-drama small, .favorite-cast-list span { color: var(--ink-soft); font: 13px var(--serif); line-height: 1.4; overflow-wrap: anywhere; }
.dashboard-empty { display: grid; gap: 7px; min-height: 86px; align-content: center; color: var(--ink-soft); text-align: center; }
.dashboard-empty strong { color: var(--ink); font: 16px var(--serif); }
.dashboard-empty span { font-size: 13px; line-height: 1.45; }
.status-module { display: grid; grid-template-columns: minmax(132px, .8fr) minmax(0, 1fr); gap: 15px; }
.status-module h2 { grid-column: 1 / -1; }
.status-donut { display: grid; place-items: center; width: min(100%, 174px); aspect-ratio: 1; margin: auto; border-radius: 50%; background: var(--segments); }
.status-donut::before { content: ''; grid-area: 1 / 1; width: 66%; aspect-ratio: 1; border-radius: 50%; background: var(--paper-bright); }
.status-donut span { z-index: 1; grid-area: 1 / 1; display: grid; justify-items: center; color: var(--ink); font: 25px var(--serif); }
.status-donut small { color: var(--ink-soft); font: 12px var(--serif); }
.status-legend { display: grid; align-content: center; gap: 8px; min-width: 0; }
.status-legend span { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.status-legend b { color: var(--ink); }
.genre-progress { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 10px; align-items: center; margin: 10px 0; color: var(--ink-soft); font: 13px var(--serif); }
.genre-progress span { min-width: 0; overflow-wrap: anywhere; }
.genre-progress b { color: var(--ink); }
.genre-progress i { grid-column: 1 / -1; display: block; height: 7px; overflow: hidden; border-radius: 20px; background: var(--gold-soft); }
.genre-progress em { display: block; height: 100%; border-radius: inherit; background: var(--jade); }
.genre-progress small { text-align: right; }
.activity-list > div { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.activity-list > div:first-child { padding-top: 0; border-top: 0; }
.activity-list b { color: var(--ink); font: 14px var(--serif); overflow-wrap: anywhere; }
.activity-list span { color: var(--ink-soft); font-size: 12px; }
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dashboard-page { padding: 25px 0; } .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; } .kpi-card { padding: 15px; } .dashboard-kpis .kpi-card:last-child { grid-column: 1 / -1; } .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; } .dashboard-module { padding: 17px; } .dashboard-module--preview { display: none; } .status-module { grid-template-columns: minmax(0, 1fr); } .status-module h2 { grid-column: auto; } .status-donut { width: 160px; } .status-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .status-legend span { display: grid; grid-template-columns: minmax(0, 1fr) auto; } }

/* Batch 8 correction — reference-led editorial Dashboard */
.dashboard-page { min-width: 0; padding: 33px 0 48px; }
.dashboard-heading { display:flex; align-items:end; justify-content:space-between; min-height:54px; margin-bottom:17px; border-bottom:1px solid var(--line); }
.dashboard-heading h1 { margin:0 0 11px; font:31px var(--serif); } .dashboard-heading .eyebrow { margin-bottom:3px; } .dashboard-heading__cloud { margin:0 28px 3px 0; color:rgb(183 135 64 / 36%); font:38px var(--serif); }
.dashboard-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-bottom:16px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:rgb(255 251 242 / 58%); box-shadow:var(--shadow-sm); }
.kpi-card { position:relative; display:grid; min-width:0; grid-template-columns:1fr auto; grid-template-areas:'label label' 'value icon'; gap:5px 10px; padding:15px 18px 13px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.kpi-card + .kpi-card::before { position:absolute; top:18px; bottom:18px; left:0; width:1px; background:var(--line-strong); content:''; } .kpi-card span { grid-area:label; color:var(--ink-soft); font:13px var(--serif); overflow-wrap:anywhere; } .kpi-card strong { grid-area:value; color:var(--ink); font:31px var(--serif); line-height:1; } .kpi-card i { grid-area:icon; align-self:end; color:var(--red); font:25px var(--serif); font-style:normal; opacity:.85; }
.dashboard-layout { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:'watching watching watching status' 'recent genres activity favorite' 'preview preview preview upnext'; align-items:start; gap:14px; }
.dashboard-module { position:relative; align-self:start; min-width:0; padding:18px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:rgb(255 251 242 / 52%); box-shadow:var(--shadow-sm); } .dashboard-module::before,.dashboard-module::after { position:absolute; width:11px; height:11px; border-color:var(--gold); content:''; opacity:.55; } .dashboard-module::before { top:5px; right:5px; border-top:1px solid; border-right:1px solid; } .dashboard-module::after { bottom:5px; left:5px; border-bottom:1px solid; border-left:1px solid; }
.dashboard-module--watching{grid-area:watching}.dashboard-module--status{grid-area:status}.dashboard-module--favorite-cast{grid-area:favorite}.dashboard-module--genres{grid-area:genres}.dashboard-module--recent{grid-area:recent}.dashboard-module--activity{grid-area:activity}.dashboard-module--preview{grid-area:preview}
.dashboard-module h2 { margin:0; color:var(--ink); font:21px var(--serif); line-height:1.2; } .dashboard-module h2>i { margin-right:7px; color:var(--red); font-style:normal; } .dashboard-module h2 small { margin-left:6px; color:var(--red); font:13px var(--serif); } .dashboard-module__heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; margin-bottom:10px; } .dashboard-module__heading .text-button { flex:0 0 auto; color:var(--ink-soft); font-size:12px; } .dashboard-module__heading .text-button span { color:var(--red); font-size:16px; }
.dashboard-watching-list { border-top:1px solid var(--line); } .dashboard-drama { display:grid; width:100%; min-width:0; grid-template-columns:minmax(0,1fr) minmax(120px,.85fr); gap:6px 16px; padding:10px 0; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; } .dashboard-drama:last-child { border-bottom:0; } .dashboard-drama:hover b,.dashboard-drama:focus-visible b { color:var(--red); text-decoration:underline; } .dashboard-drama__title { display:grid; min-width:0; gap:2px; } .dashboard-drama__title b { color:var(--ink); font:15px var(--serif); overflow-wrap:anywhere; } .dashboard-drama__title small,.dashboard-drama__meta { color:var(--ink-soft); font:12px var(--serif); line-height:1.35; overflow-wrap:anywhere; } .dashboard-drama__meta { align-self:center; text-align:right; } .dashboard-drama--compact { grid-template-columns:minmax(0,1fr); gap:3px; padding:8px 0; } .dashboard-drama--compact .dashboard-drama__meta { text-align:left; }
.dashboard-empty { display:grid; min-height:78px; align-content:center; gap:6px; color:var(--ink-soft); text-align:center; } .dashboard-empty strong { color:var(--ink); font:16px var(--serif); } .dashboard-empty span { font-size:12px; line-height:1.45; }
.status-composition { display:grid; grid-template-columns:minmax(122px,.82fr) minmax(0,1fr); align-items:center; gap:13px; margin-top:10px; } .status-donut { display:grid; place-items:center; width:min(100%,156px); aspect-ratio:1; margin:auto; border-radius:50%; background:var(--segments); } .status-donut::before { grid-area:1/1; width:63%; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; background:var(--paper-bright); content:''; } .status-donut span { z-index:1; grid-area:1/1; display:grid; justify-items:center; color:var(--ink-soft); font:12px var(--serif); } .status-donut b { color:var(--ink); font:31px var(--serif); font-weight:400; line-height:1; } .status-donut small { font:12px var(--serif); }
.status-legend { display:grid; gap:7px; min-width:0; } .status-legend span { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:6px; align-items:center; color:var(--ink-soft); font:12px var(--serif); overflow-wrap:anywhere; } .status-legend i { width:8px; height:8px; border-radius:50%; background:#a9a39a; } .status-legend__completed i { background:var(--red); } .status-legend__watching i { background:var(--jade); } .status-legend__plan-to-watch i { background:var(--slate); } .status-legend__on-hold i { background:var(--gold); } .status-legend b { color:var(--ink); font-weight:600; }
.favorite-cast-list { display:grid; gap:9px; margin-top:12px; } .favorite-cast-list button { display:grid; width:100%; min-width:0; grid-template-columns:37px minmax(0,1fr); gap:9px; align-items:center; padding:8px 0; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; } .favorite-cast-list button:last-child { border-bottom:0; } .favorite-cast-list button:hover b,.favorite-cast-list button:focus-visible b { color:var(--red); text-decoration:underline; } .favorite-cast-avatar { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--gold); border-radius:50%; background:var(--gold-soft); color:var(--red); font:13px var(--serif); } .favorite-cast-list button>span:last-child { display:grid; min-width:0; gap:1px; } .favorite-cast-list b { overflow-wrap:anywhere; font:14px var(--serif); } .favorite-cast-list small,.favorite-cast-list em { color:var(--ink-soft); font:11px var(--serif); font-style:normal; overflow-wrap:anywhere; }
.genre-progress-list { display:grid; gap:10px; margin-top:12px; } .genre-progress { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 9px; align-items:center; color:var(--ink-soft); font:12px var(--serif); } .genre-progress span { min-width:0; overflow-wrap:anywhere; } .genre-progress b { color:var(--ink-soft); font-weight:400; } .genre-progress i { grid-column:1/-1; display:block; height:5px; overflow:hidden; border-radius:0; background:var(--gold-soft); } .genre-progress em { display:block; height:100%; background:var(--red); } .genre-progress:nth-child(2) em { background:var(--jade); } .genre-progress:nth-child(3) em { background:var(--gold); } .genre-progress:nth-child(4) em { background:var(--slate); }
.dashboard-compact-list { display:grid; margin-top:5px; } .activity-list { display:grid; gap:0; margin-top:10px; } .activity-list>div { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--line); } .activity-list>div:first-child { border-top:0; padding-top:0; } .activity-list>div>i { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--jade); border-radius:50%; color:var(--jade); background:var(--jade-soft); font:12px var(--serif); font-style:normal; } .activity-list span { display:grid; min-width:0; gap:2px; } .activity-list b { color:var(--ink); font:12px var(--serif); font-weight:400; line-height:1.3; overflow-wrap:anywhere; } .activity-list small { color:var(--ink-soft); font-size:11px; }
.dashboard-preview-list { display:grid; margin-top:8px; } .dashboard-preview-list>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; border-bottom:1px solid var(--line); } .dashboard-preview-list>div:last-child { border-bottom:0; } .dashboard-preview-list .dashboard-drama { border-bottom:0; } .dashboard-preview-list .status { max-width:86px; padding:4px 6px; font-size:10px; text-align:center; white-space:normal; }
@media (max-width:1100px) { .dashboard-layout { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'watching watching' 'status favorite' 'upnext preview' 'recent genres' 'activity activity'; } .dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .kpi-card { padding-inline:13px; } }
@media (max-width:720px) { .dashboard-page { padding:24px 0 34px; } .dashboard-heading { min-height:45px; margin-bottom:13px; } .dashboard-heading h1 { font-size:27px; } .dashboard-heading__cloud { margin-right:10px; font-size:30px; } .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:13px; } .kpi-card { padding:13px 15px; } .kpi-card:nth-child(3)::before,.kpi-card:nth-child(5)::before { display:none; } .kpi-card:nth-child(3),.kpi-card:nth-child(5) { border-top:1px solid var(--line-strong); } .dashboard-kpis .kpi-card:last-child { grid-column:1/-1; } .dashboard-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:'watching' 'status' 'upnext' 'favorite' 'genres' 'recent' 'activity' 'preview'; gap:12px; } .dashboard-module { padding:16px; } .dashboard-module h2 { font-size:20px; } .dashboard-drama { grid-template-columns:minmax(0,1fr); gap:3px; } .dashboard-drama__meta { text-align:left; } .status-composition { grid-template-columns:minmax(0,1fr); } .status-donut { width:148px; } .status-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } .status-legend span { grid-template-columns:8px minmax(0,1fr) auto; } }
.dashboard-drama--compact .dashboard-drama__title b,.dashboard-drama--compact .dashboard-drama__title small,.dashboard-drama--compact .dashboard-drama__meta,.activity-list b { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; }
.dashboard-drama--compact .dashboard-drama__title b { -webkit-line-clamp:2; } .dashboard-drama--compact .dashboard-drama__title small,.dashboard-drama--compact .dashboard-drama__meta { -webkit-line-clamp:1; } .activity-list b { -webkit-line-clamp:2; } .dashboard-module--recent .dashboard-module__heading h2 { white-space:nowrap; font-size:19px; }

/* Batch 8 final composition — an asymmetric editorial dashboard, not a card grid. */
.dashboard-page { padding: 25px 0 46px; }
.dashboard-composition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(295px, .43fr); gap: 14px; align-items: start; }
.dashboard-main, .dashboard-rail { display: grid; min-width: 0; gap: 14px; align-content: start; }
.dashboard-kpis { margin: 0; }
.dashboard-lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.dashboard-main > .dashboard-module, .dashboard-rail > .dashboard-module, .dashboard-lower > .dashboard-module { margin: 0; }
.dashboard-composition .dashboard-module { grid-area: auto; }
.dashboard-rail .dashboard-module--status { order: 0; }
.dashboard-rail .dashboard-module--favorite-cast { order: 1; }
.dashboard-rail .dashboard-module--preview { order: 2; }
.dashboard-module__heading { position: relative; z-index: 1; }
.dashboard-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 28px; margin-bottom: 9px; }
.dashboard-heading-row h2 { min-width: 0; }
.dashboard-heading-row .text-button, .dashboard-footer-link { flex: 0 0 auto; border: 0; color: var(--ink-soft); background: transparent; font: 12px var(--serif); white-space: nowrap; }
.dashboard-heading-row .text-button:hover, .dashboard-footer-link:hover, .dashboard-heading-row .text-button:focus-visible, .dashboard-footer-link:focus-visible { color: var(--red); text-decoration: underline; }
.dashboard-heading-row .text-button span, .dashboard-footer-link span { color: var(--red); font-size: 15px; }
.dashboard-footer-link { display: block; margin-top: 10px; padding: 0; }
.dashboard-title-link { display: grid; min-width: 0; gap: 2px; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; text-align: left; }
.dashboard-title-link:hover b, .dashboard-title-link:focus-visible b { color: var(--red); text-decoration: underline; }
.dashboard-title-link b { min-width: 0; font: inherit; font-weight: 600; overflow-wrap: anywhere; }
.dashboard-title-link small { min-width: 0; color: var(--ink-soft); font: 12px var(--serif); line-height: 1.35; overflow-wrap: anywhere; }
.dashboard-kpi { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label label' 'value mark'; gap: 5px 9px; padding: 15px 17px 13px; }
.dashboard-kpi + .dashboard-kpi::before { position: absolute; top: 17px; bottom: 17px; left: 0; width: 1px; background: var(--line-strong); content: ''; }
.dashboard-kpi span { grid-area: label; color: var(--ink-soft); font: 13px var(--serif); overflow-wrap: anywhere; }
.dashboard-kpi strong { grid-area: value; color: var(--ink); font: 31px var(--serif); font-weight: 400; line-height: 1; }
.dashboard-kpi i { grid-area: mark; align-self: end; color: var(--red); font: 22px var(--serif); font-style: normal; }
.watching-columns, .watching-row { display: grid; grid-template-columns: minmax(145px, 1.6fr) minmax(110px, 1.1fr) minmax(82px, .85fr) minmax(74px, .65fr) minmax(58px, .45fr) minmax(78px, .6fr); gap: 10px; min-width: 0; }
.watching-columns { padding: 0 0 7px; border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); font: 11px var(--serif); text-transform: uppercase; letter-spacing: .04em; }
.watching-row { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.watching-row:last-child { border-bottom: 0; padding-bottom: 1px; }
.watching-title { display: grid; min-width: 0; gap: 2px; text-align: left; }
.watching-title b { color: var(--ink); font: 15px var(--serif); overflow-wrap: anywhere; }
.watching-title small, .watching-cast, .watching-platform, .watching-tropes { min-width: 0; color: var(--ink-soft); font: 12px var(--serif); line-height: 1.35; overflow-wrap: anywhere; }
.watching-cast { display: grid; gap: 2px; }
.watching-cast span { min-width: 0; overflow-wrap: anywhere; }
.watching-tropes { display: flex; flex-wrap: wrap; gap: 4px; }
.watching-tropes .chip { max-width: 100%; padding: 3px 6px; font-size: 10px; overflow-wrap: anywhere; }
.watching-rating { color: var(--gold); font-size: 12px; letter-spacing: .03em; white-space: nowrap; }
.watching-row .status { min-width: 0; padding: 4px 6px; font-size: 10px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.favorite-roster { display: grid; gap: 11px; margin-top: 10px; }
.favorite-roster__group { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.favorite-roster__group > i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--gold); border-radius: 50%; color: var(--red); background: var(--gold-soft); font: 11px var(--serif); font-style: normal; }
.favorite-roster__group > div { display: flex; flex-wrap: wrap; gap: 9px; }
.favorite-roster button { display: grid; justify-items: center; width: 49px; min-width: 0; gap: 3px; padding: 0; border: 0; color: var(--ink); background: transparent; }
.favorite-roster button > span:first-child { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--gold); border-radius: 50%; color: var(--red); background: var(--gold-soft); font: 12px var(--serif); }
.favorite-roster button:hover > span:first-child, .favorite-roster button:focus-visible > span:first-child { border-color: var(--red); color: var(--red); }
.favorite-roster button small { width: 100%; color: inherit; font: 10px var(--serif); font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.dashboard-rail .dashboard-module--preview .dashboard-module__heading { margin-bottom: 5px; }
.preview-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0 0 5px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font: 10px var(--serif); line-height: 1.2; text-align: center; }
.preview-tabs span { display: grid; min-width: 0; grid-template-rows: auto auto; overflow-wrap: normal; word-break: normal; }
.preview-tabs b { color: var(--ink-soft); font: 9px var(--serif); font-weight: 600; }
.preview-tabs .is-active, .preview-tabs .is-active b { color: var(--red); }
.dashboard-preview-list .dashboard-drama__title b { font-size: 13px; }
.dashboard-preview-list .dashboard-drama { padding: 7px 0; }
.dashboard-lower .dashboard-module { padding: 16px; }
.dashboard-lower .dashboard-module h2 { font-size: 19px; }
.dashboard-lower .dashboard-module__heading { min-height: 24px; margin-bottom: 7px; }

@media (max-width: 1280px) {
  .dashboard-composition { grid-template-columns: minmax(0, 1fr) minmax(295px, .5fr); }
  .dashboard-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-lower .dashboard-module--activity { grid-column: 1 / -1; }
  .watching-columns, .watching-row { grid-template-columns: minmax(130px, 1.5fr) minmax(98px, 1fr) minmax(70px, .7fr) minmax(62px, .5fr) minmax(48px, .35fr) minmax(70px, .5fr); gap: 7px; }
  .dashboard-rail .status-composition { grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
  .dashboard-rail .status-donut { width: 108px; }
  .dashboard-rail .status-legend { gap: 5px; }
  .dashboard-rail .status-legend span { gap: 4px; font-size: 11px; }
}
@media (max-width: 1100px) {
  .dashboard-composition { grid-template-columns: minmax(0, 1fr); }
  .dashboard-composition { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'kpis kpis' 'watching watching' 'status favorite' 'preview preview' 'recent genres' 'activity activity'; }
  .dashboard-main, .dashboard-rail, .dashboard-lower { display: contents; }
  .dashboard-kpis { grid-area: kpis; }
  .dashboard-composition .dashboard-module--watching { grid-area: watching; }
  .dashboard-composition .dashboard-module--status { grid-area: status; }
  .dashboard-composition .dashboard-module--favorite-cast { grid-area: favorite; }
  .dashboard-composition .dashboard-module--preview { grid-area: preview; }
  .dashboard-composition .dashboard-module--recent { grid-area: recent; }
  .dashboard-composition .dashboard-module--genres { grid-area: genres; }
  .dashboard-composition .dashboard-module--activity { grid-area: activity; }
}
@media (max-width: 720px) {
  .dashboard-composition { display: flex; flex-direction: column; gap: 12px; }
  .dashboard-main, .dashboard-rail, .dashboard-lower { display: contents; }
  .dashboard-kpis { order: 0; width: 100%; }
  .dashboard-main > .dashboard-module--watching { order: 1; }
  .dashboard-rail .dashboard-module--status { order: 2; }
  .dashboard-rail .dashboard-module--favorite-cast { order: 3; }
  .dashboard-lower .dashboard-module--genres { order: 4; }
  .dashboard-lower .dashboard-module--recent { order: 5; }
  .dashboard-lower .dashboard-module--activity { order: 6; }
  .dashboard-rail .dashboard-module--preview { order: 7; }
  .dashboard-module { width: 100%; }
  .dashboard-composition .dashboard-module--preview { display: block; }
  .dashboard-kpi { padding: 13px 15px; }
  .dashboard-kpi:nth-child(3)::before, .dashboard-kpi:nth-child(5)::before { display: none; }
  .dashboard-kpi:nth-child(3), .dashboard-kpi:nth-child(5) { border-top: 1px solid var(--line-strong); }
  .watching-columns { display: none; }
  .watching-row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 13px 0; }
  .watching-row .is-empty { display: none; }
  .watching-row .status { justify-self: start; }
  .watching-tropes { margin-top: 1px; }
  .dashboard-lower .dashboard-module { padding: 16px; }
  .favorite-roster { gap: 9px; }
}

/* Batch 8 final fidelity pass — compact reference-style preview and supporting modules. */
.dashboard-section-mark,
.dashboard-kpi__mark,
.dashboard-motif,
.activity-marker {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}
.dashboard-section-mark {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -1px;
  background: radial-gradient(circle at 50% 50%, var(--paper-bright) 0 18%, transparent 20%), radial-gradient(circle at 50% 12%, var(--red) 0 24%, transparent 27%), radial-gradient(circle at 88% 50%, var(--red) 0 24%, transparent 27%), radial-gradient(circle at 50% 88%, var(--red) 0 24%, transparent 27%), radial-gradient(circle at 12% 50%, var(--red) 0 24%, transparent 27%);
}
.dashboard-kpi__mark { width: 22px; height: 22px; background: radial-gradient(circle at 50% 50%, currentColor 0 18%, transparent 21%), radial-gradient(circle at 50% 12%, currentColor 0 23%, transparent 27%), radial-gradient(circle at 88% 50%, currentColor 0 23%, transparent 27%), radial-gradient(circle at 50% 88%, currentColor 0 23%, transparent 27%), radial-gradient(circle at 12% 50%, currentColor 0 23%, transparent 27%); }
.dashboard-kpi__mark--2, .dashboard-kpi__mark--4 { color: var(--jade); }
.dashboard-kpi__mark--3 { color: var(--gold); }
.dashboard-kpi__mark--5 { color: var(--red); }
.dashboard-motif { width: 22px; height: 22px; background: radial-gradient(circle at 50% 50%, currentColor 0 15%, transparent 18%), radial-gradient(circle at 50% 8%, currentColor 0 25%, transparent 29%), radial-gradient(circle at 91% 50%, currentColor 0 25%, transparent 29%), radial-gradient(circle at 50% 92%, currentColor 0 25%, transparent 29%), radial-gradient(circle at 9% 50%, currentColor 0 25%, transparent 29%); }
.dashboard-motif--1 { color: var(--red); }
.dashboard-motif--2 { color: var(--jade); }
.dashboard-motif--3 { color: var(--gold); }

.dashboard-lower { align-items: stretch; }
.dashboard-lower .dashboard-module { display: flex; flex-direction: column; min-height: 0; }
.dashboard-lower .dashboard-footer-link { margin-top: auto; padding-top: 10px; }
.recent-list, .genre-progress-list, .activity-list { min-width: 0; }
.recent-list { display: grid; gap: 0; }
.recent-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.recent-row:first-child { padding-top: 0; border-top: 0; }
.recent-row > div { display: grid; min-width: 0; gap: 2px; }
.recent-row .dashboard-title-link { gap: 1px; }
.recent-row .dashboard-title-link b { display: -webkit-box; font: 12px var(--serif); font-weight: 600; line-height: 1.22; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recent-row .dashboard-title-link small { display: -webkit-box; font-size: 10px; line-height: 1.15; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.recent-row > div > small { color: var(--ink-soft); font-size: 10px; }

.activity-list { margin-top: 8px; }
.activity-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 38px; padding: 7px 0; border-top: 1px solid var(--line); }
.activity-row:first-child { padding-top: 0; border-top: 0; }
.activity-row > span { display: grid; min-width: 0; gap: 2px; }
.activity-row b { display: -webkit-box; color: var(--ink); font: 11px var(--serif); font-weight: 400; line-height: 1.22; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.activity-row small { color: var(--ink-soft); font-size: 10px; }
.activity-marker { width: 23px; height: 23px; border: 1px solid var(--jade); color: var(--jade); background: var(--jade-soft); }
.activity-marker::before { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; content: ''; }
.activity-marker::after { position: absolute; width: 7px; height: 1px; background: currentColor; content: ''; transform: rotate(-45deg); }
.activity-marker--favorite { color: var(--red); border-color: #cc806f; background: var(--red-soft); }
.activity-marker--rating { color: var(--gold); border-color: #cda55e; background: var(--gold-soft); }
.activity-marker--note { color: var(--slate); border-color: #aeb8ba; background: #edf0ef; }
.activity-marker--status { color: #7e8759; border-color: #bbc09e; background: #f1f3e7; }

.dashboard-preview-list { display: grid; margin-top: 5px; }
.dashboard-preview-row { display: grid; grid-template-columns: minmax(48px, 1fr) minmax(30px, .32fr) auto; gap: 5px; align-items: center; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dashboard-preview-row:last-child { border-bottom: 0; }
.dashboard-preview-row__title { min-width: 0; }
.dashboard-preview-row__title .dashboard-title-link { gap: 1px; }
.dashboard-preview-row__title .dashboard-title-link b { display: -webkit-box; color: var(--ink); font: 11px var(--serif); font-weight: 600; line-height: 1.18; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-preview-row__title .dashboard-title-link small { display: -webkit-box; color: var(--ink-soft); font-size: 9px; line-height: 1.1; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.dashboard-preview-row__platform { min-width: 0; color: var(--ink-soft); font: 9px var(--serif); line-height: 1.15; overflow-wrap: anywhere; }
.dashboard-preview-row__actions { display: grid; grid-template-columns: 55px 58px 21px 21px; gap: 2px; align-items: center; }
.dashboard-preview-row__actions .status { min-width: 55px; padding: 3px 2px; border-radius: 4px; font: 8px/1.15 var(--serif); text-align: center; white-space: nowrap; }
.dashboard-preview-details { min-width: 58px; min-height: 21px; padding: 2px 3px; border: 1px solid #d5aa9a; border-radius: 4px; color: var(--red); background: transparent; font: 8.5px var(--serif); white-space: nowrap; }
.dashboard-preview-icon.icon-action { width: 21px; height: 21px; min-height: 21px; padding: 0; border-radius: 4px; font-size: 11px; }
.dashboard-preview-icon .ui-icon { width: 11px; height: 11px; }
.dashboard-preview-icon .edit-pencil { transform: scaleX(-1); }
.dashboard-preview-details:hover, .dashboard-preview-details:focus-visible { color: #fffaf0; border-color: var(--red); background: var(--red); }
.dashboard-rail .dashboard-module--preview { display: flex; flex-direction: column; }
.dashboard-rail .dashboard-module--preview .dashboard-footer-link { margin-top: 15px; }
.preview-tabs { gap: 2px; margin-bottom: 4px; padding-bottom: 5px; font-size: 9px; }
.preview-tabs b { font-size: 8px; }

@media (min-width: 1101px) {
  .dashboard-composition { align-items: stretch; }
  .dashboard-main, .dashboard-rail { height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
  .dashboard-lower { height: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(414px, auto); }
  .dashboard-lower .dashboard-module--activity { grid-column: auto; }
  .dashboard-lower .dashboard-module { height: 100%; }
  .dashboard-rail .dashboard-module--preview { min-height: 0; height: 100%; }
  .dashboard-rail .dashboard-module--preview .dashboard-footer-link { margin-top: auto; }
}
@media (min-width: 1281px) {
  .dashboard-lower { grid-auto-rows: minmax(421px, auto); }
}
@media (max-width: 1280px) and (min-width: 1101px) {
  .dashboard-lower .dashboard-module { padding: 14px; }
  .dashboard-lower .dashboard-module h2 { font-size: 18px; }
  .dashboard-lower .dashboard-module--recent h2 { font-size: 17px; white-space: nowrap; }
  .dashboard-heading-row { gap: 6px; }
  .dashboard-heading-row .text-button { font-size: 10px; }
  .recent-row { grid-template-columns: 19px minmax(0, 1fr); gap: 5px; }
  .dashboard-motif { width: 18px; height: 18px; }
  .genre-progress { gap: 4px; font-size: 11px; }
}
@media (max-width: 720px) {
  .dashboard-rail .status-composition { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dashboard-rail .status-donut { width: 148px; }
  .dashboard-rail .status-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
  .dashboard-rail .status-legend span { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 5px; font-size: 11px; }
  .dashboard-preview-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 9px; padding: 9px 0; }
  .dashboard-preview-row__platform { grid-column: 1; }
  .dashboard-preview-row__actions { grid-column: 1 / -1; grid-template-columns: 64px minmax(78px, auto) 26px 26px; justify-content: start; }
  .dashboard-preview-row__actions .status { min-width: 64px; font-size: 9px; }
  .dashboard-preview-details { min-height: 26px; font-size: 10px; }
  .dashboard-preview-icon.icon-action { width: 26px; height: 26px; min-height: 26px; font-size: 13px; }
}

/* Cross-page list presentation — mirrors the My Dramas data-row language. */
.data-list-header { display: grid; align-items: end; min-height: 33px; padding: 7px 16px 6px; border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); font: 10px/1.2 var(--serif); letter-spacing: .035em; text-transform: uppercase; }
.data-list-header > span { min-width: 0; overflow-wrap: anywhere; white-space: nowrap; }
.dense-row-actions { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: 28px 27px; gap: 4px; align-items: center; min-width: 0; }
.dense-row-actions > .icon-action { width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 14px; }
.dense-row-actions > .button { grid-column: 1 / -1; grid-row: 2; min-height: 27px; width: 100%; padding: 0 5px; font: 11px var(--serif); }
.dense-row-actions__membership { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.dense-row-actions__membership .button { min-height: 27px; padding-inline: 7px; font: 11px var(--serif); }
.dense-row-actions__membership .icon-action { width: 27px; height: 27px; min-height: 27px; padding: 0; font-size: 13px; }

/* Watchlist and Custom List drama rows */
.list-drama-list { --list-row-columns: minmax(0, 1.28fr) minmax(0, .94fr) minmax(0, .72fr) minmax(0, .9fr) minmax(0, .82fr) minmax(48px, .4fr) minmax(96px, .68fr) 92px; }
.list-drama-header, .list-drama-row { grid-template-columns: var(--list-row-columns); column-gap: 10px; }
.list-drama-row { display: grid; align-items: center; row-gap: 8px; min-height: 74px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.list-drama-row:last-child { border-bottom: 0; }
.list-drama-row > * { min-width: 0; }
.list-drama-row__title { display: grid; gap: 2px; }
.list-drama-row__title > span { color: var(--ink-soft); font: 12px/1.25 var(--serif); overflow-wrap: anywhere; }
.list-drama-row__cast { display: grid; gap: 3px; }
.list-drama-row__cast .gender { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.list-drama-row__genres .chip { min-height: 25px; padding: 3px 8px; font-size: 11px; }
.list-drama-row__tropes .chip { min-height: 23px; padding: 2px 6px; font-size: 10px; }
.list-drama-row__platform { color: var(--ink-soft); font: 12px/1.3 var(--serif); overflow-wrap: break-word; word-break: normal; }
.list-drama-row__rating { color: var(--gold); font: 13px var(--serif); }
.list-drama-row__status { min-width: 0; min-height: 28px; width: 100%; padding: 3px 5px; border-radius: 5px; font: 10px var(--serif); }
.list-drama-row__actions { align-self: center; }
.custom-list-card { min-height: 0; gap: 7px; padding: 15px 16px; }
.custom-list-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.custom-list-card__content { display: grid; min-width: 0; gap: 7px; }
.custom-list-card__content > .text-button { font-size: 16px; }
.custom-list-card__content p { margin: 0; font-size: 13px; line-height: 1.4; }
.custom-list-card__content > span { color: var(--red); font: 12px var(--serif); }
.custom-list-card__actions { display: grid; grid-template-columns: repeat(2, 28px); grid-template-rows: 28px 28px; gap: 4px; align-items: center; }
.custom-list-card__actions .icon-action { width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 14px; }
.custom-list-card__actions .button { grid-column: 1 / -1; grid-row: 2; min-height: 28px; width: 100%; padding: 0 6px; font: 11px var(--serif); white-space: nowrap; }
.custom-list-details { padding: 17px; }
.custom-list-details__actions { display: flex; align-items: center; gap: 10px; }

/* Cast list */
.cast-list { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 48%); box-shadow: var(--shadow-sm); }
.cast-list__header, .cast-card { grid-template-columns: 46px minmax(0, 1.35fr) minmax(64px, .45fr) minmax(70px, .5fr) 92px; column-gap: 10px; }
.cast-list__header > span:first-child { grid-column: 1 / 3; }
.cast-card { display: grid; align-items: center; min-height: 68px; gap: 8px 10px; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.cast-card:last-child { border-bottom: 0; }
.cast-avatar { width: 42px; height: 42px; font-size: 14px; }
.cast-card__main { gap: 2px; }
.cast-card__main .text-button { font-size: 16px; }
.cast-card__main > span:not(.gender), .cast-card__main .gender, .cast-card__library, .cast-card__rating { color: var(--ink-soft); font: 12px/1.25 var(--serif); overflow-wrap: anywhere; }
.cast-card__rating { color: var(--gold); }
.cast-card__actions { align-self: center; }

/* Reviews, notes, and top-rated lists */
.review-list, .top-rated-list { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 48%); box-shadow: var(--shadow-sm); }
.review-list__header, .review-card { grid-template-columns: minmax(0, 1.35fr) minmax(60px, .38fr) minmax(90px, .55fr) minmax(250px, 1.05fr) minmax(176px, .78fr); column-gap: 12px; }
.review-card { display: grid; align-items: start; gap: 8px 12px; min-width: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.review-card:last-child { border-bottom: 0; }
.review-card__title { gap: 2px; }
.review-card__title .text-button { font-size: 16px; }
.review-card__title > span { font-size: 12px; }
.review-card__rating { align-self: center; color: var(--gold); font: 13px var(--serif); white-space: nowrap; }
.review-card__status { align-self: center; justify-self: start; min-height: 25px; padding: 3px 7px; font-size: 10px; white-space: normal; }
.review-scores { display: flex; grid-column: auto; flex-wrap: wrap; align-self: center; gap: 4px; }
.review-scores span { min-width: 0; padding: 3px 6px; font: 10px var(--serif); white-space: nowrap; }
.review-card__actions { display: flex; flex-wrap: wrap; align-items: center; align-self: center; gap: 4px; }
.review-card__actions .button { min-height: 30px; padding-inline: 8px; font: 11px var(--serif); }
.review-ending, .review-flags, .review-preview { grid-column: 1 / -1; }
.review-ending { margin: 0; color: var(--ink-soft); font: 12px var(--serif); }
.review-flags { gap: 4px; }
.review-flag { min-height: 23px; padding: 2px 6px; font-size: 10px; }
.review-preview { margin: 0; font-size: 13px; line-height: 1.45; }
.review-preview--empty { display: none; }
.note-list__header, .note-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(90px, .6fr) minmax(150px, .8fr); column-gap: 12px; }
.note-card .review-preview, .note-card .note-updated, .note-card .review-card__actions { grid-column: auto; align-self: center; }
.note-card .review-preview { font-size: 12px; }
.note-card .note-updated { margin: 0; font-size: 11px; }
.top-rated-list { list-style: none; }
.top-rated-list__header, .top-rated-card { grid-template-columns: 34px minmax(0, 1.4fr) minmax(62px, .42fr) minmax(90px, .58fr) minmax(150px, .75fr); column-gap: 12px; }
.top-rated-card { position: static; padding-left: 16px; }
.top-rated-rank { position: static; align-self: center; width: 27px; height: 27px; font-size: 13px; }
.top-rated-meta { grid-column: 2 / -1; margin: 0; font-size: 11px; }

@media (max-width: 1050px) and (min-width: 721px) {
  .list-drama-header, .cast-list__header, .review-list__header, .note-list__header, .top-rated-list__header { display: none; }
  .list-drama-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(78px, .65fr) 92px; grid-template-areas: "title cast status actions" "title cast rating actions" "genres tropes platform actions"; }
  .list-drama-row__title { grid-area: title; } .list-drama-row__cast { grid-area: cast; } .list-drama-row__genres { grid-area: genres; } .list-drama-row__tropes { grid-area: tropes; } .list-drama-row__platform { grid-area: platform; } .list-drama-row__rating { grid-area: rating; } .list-drama-row__status { grid-area: status; } .list-drama-row__actions { grid-area: actions; }
  .cast-list, .review-list, .top-rated-list { overflow: visible; border: 0; background: none; box-shadow: none; }
  .cast-card { grid-template-columns: 46px minmax(0, 1fr) minmax(80px, .6fr) 92px; grid-template-areas: "avatar main library actions" "avatar main rating actions"; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 70%); box-shadow: var(--shadow-sm); }
  .cast-avatar { grid-area: avatar; } .cast-card__main { grid-area: main; } .cast-card__library { grid-area: library; } .cast-card__rating { grid-area: rating; } .cast-card__actions { grid-area: actions; }
  .review-card { grid-template-columns: minmax(0, 1fr) minmax(90px, .6fr) minmax(150px, .8fr); grid-template-areas: "title status actions" "rating scores actions" "ending ending actions" "flags flags actions" "preview preview actions"; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 70%); box-shadow: var(--shadow-sm); }
  .review-card__title { grid-area: title; } .review-card__rating { grid-area: rating; } .review-card__status { grid-area: status; } .review-scores { grid-area: scores; } .review-card__actions { grid-area: actions; } .review-ending { grid-area: ending; } .review-flags { grid-area: flags; } .review-preview { grid-area: preview; }
  .note-card { grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr) minmax(150px, .8fr); grid-template-areas: "title updated actions" "preview preview actions"; }
  .note-card .review-card__title { grid-area: title; } .note-card .review-preview { grid-area: preview; } .note-card .note-updated { grid-area: updated; } .note-card .review-card__actions { grid-area: actions; }
  .top-rated-card { grid-template-columns: 34px minmax(0, 1fr) minmax(100px, .7fr) minmax(150px, .8fr); grid-template-areas: "rank title status actions" "rank rating meta actions"; }
  .top-rated-rank { grid-area: rank; } .top-rated-card .review-card__title { grid-area: title; } .top-rated-card .review-card__rating { grid-area: rating; } .top-rated-card .review-card__status { grid-area: status; } .top-rated-card .review-card__actions { grid-area: actions; } .top-rated-meta { grid-area: meta; }
}
@media (max-width: 720px) {
  .data-list-header { display: none; }
  .list-drama-row, .cast-card, .review-card, .note-card, .top-rated-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; gap: 9px; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(255 251 242 / 70%); box-shadow: var(--shadow-sm); }
  .list-drama-row > *, .cast-card > *, .review-card > * { grid-area: auto; min-width: 0; }
  .list-drama-row__title, .list-drama-row__cast, .cast-card__main, .review-card__title, .review-preview, .review-ending, .review-flags, .top-rated-meta { grid-column: 1 / -1; }
  .list-drama-row__genres, .list-drama-row__tropes { min-width: 0; }
  .drama-row__status, .list-drama-row__status { width: auto; min-width: 112px; max-width: 100%; min-height: 34px; padding-inline: 8px; justify-self: start; }
  .list-drama-row__actions, .cast-card__actions { grid-column: 1 / -1; }
  .dense-row-actions { grid-template-columns: repeat(3, 30px); grid-template-rows: 30px 30px; gap: 5px; }
  .dense-row-actions > .icon-action { width: 30px; height: 30px; min-height: 30px; }
  .dense-row-actions > .button { width: auto; min-width: 102px; padding-inline: 8px; justify-self: start; }
  .review-card__actions { grid-column: 1 / -1; }
  .review-card__actions .button { min-height: 34px; padding-inline: 10px; }
  .top-rated-rank { grid-row: auto; }
  .custom-list-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .custom-list-details__actions { gap: 10px; }
}

/* Batch 10 — Settings: local library care. */
.settings-page { display:grid; gap:22px; padding:32px 0 46px; min-width:0; }
.settings-heading { display:flex; align-items:center; gap:14px; }
.settings-heading > div { display:grid; gap:4px; }
.settings-heading h1 { font-size:42px; }
.settings-heading p:not(.eyebrow) { margin:0; color:var(--ink-soft); font:15px var(--serif); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"library backup" "options about" "danger danger"; gap:14px; align-items:stretch; }
.settings-section { position:relative; display:flex; flex-direction:column; min-width:0; min-height:100%; gap:13px; padding:19px; overflow:hidden; }
.settings-section--library { grid-area:library; }
.settings-section--backup { grid-area:backup; }
.settings-section--options { grid-area:options; }
.settings-section--about { grid-area:about; }
.settings-section--danger { grid-area:danger; }
.settings-section::before { position:absolute; inset:6px; border:1px solid rgb(183 135 64 / 16%); content:''; pointer-events:none; }
.settings-section > * { position:relative; z-index:1; }
.settings-section__heading { display:flex; align-items:center; gap:10px; min-width:0; }
.settings-section__heading > div { display:grid; min-width:0; gap:2px; }
.settings-section__heading h2 { font-size:22px; overflow-wrap:anywhere; }
.settings-section__mark { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border:1px solid #d5aa9a; border-radius:50%; color:var(--red); background:var(--red-soft); font:16px var(--serif); }
.settings-section__mark--jade { border-color:#aec0b0; color:var(--jade); background:var(--jade-soft); }
.settings-section__mark--gold { border-color:#d6b97f; color:#8d672f; background:var(--gold-soft); }
.settings-section__mark--danger { border-color:#cc806f; color:var(--red); background:var(--red-soft); }
.settings-section__copy { max-width:66ch; margin:0; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.settings-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); background:rgb(255 251 242 / 50%); }
.settings-summary__item { position:relative; display:grid; align-content:center; justify-items:center; min-width:0; min-height:78px; gap:4px; padding:8px 5px; border-right:1px solid var(--line); text-align:center; }
.settings-summary__item:last-child { border-right:0; }
.settings-summary__item > span:not(.settings-summary__mark) { color:var(--ink-soft); font-size:10px; line-height:1.2; overflow-wrap:anywhere; }
.settings-summary__item b { color:var(--ink); font:22px var(--serif); }
.settings-summary__mark { position:absolute; right:6px; bottom:5px; color:var(--gold); opacity:.19; font-size:19px; }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; }
.settings-actions .button { min-width:132px; }
.backup-file-input { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.restore-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.restore-summary div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 10px; border-top:1px solid var(--line); }
.restore-summary dt { color:var(--ink-soft); font-size:12px; }
.restore-summary dd { margin:0; font:18px var(--serif); }
.restore-summary__meta { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.45; }
.settings-unavailable { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.35; }
.settings-option-list { display:flex; flex-wrap:wrap; gap:6px; }
.settings-option-list span { min-height:26px; padding:4px 8px; border:1px solid #b6c6b7; border-radius:5px; color:var(--jade); background:var(--jade-soft); font:11px var(--serif); }
.settings-section--options .button { justify-self:start; }
.settings-about { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.settings-about div { display:grid; gap:2px; padding:8px 10px; border-top:1px solid var(--line); }
.settings-about dt { color:var(--ink-soft); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.settings-about dd { margin:0; font:15px var(--serif); overflow-wrap:anywhere; }
.settings-local-warning { margin:0; padding-top:3px; color:var(--ink-soft); font-size:11px; line-height:1.45; }
.settings-section--danger { border-color:#ce9589; background:linear-gradient(135deg,rgb(255 251 242 / 74%),rgb(242 226 217 / 72%)); }
.settings-section--danger .button { justify-self:start; }
.settings-reset-dialog .dialog__surface { border-color:#cc806f; }

@media (max-width:720px) {
  .settings-page { gap:16px; padding:24px 0 34px; }
  .settings-heading h1 { font-size:34px; }
  .settings-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"library" "backup" "options" "about" "danger"; gap:12px; }
  .settings-section { min-height:auto; gap:12px; padding:16px; }
  .settings-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-summary__item { min-height:65px; }
  .settings-summary__item:nth-child(2) { border-right:0; }
  .settings-summary__item:nth-child(-n+4) { border-bottom:1px solid var(--line); }
  .settings-summary__item:last-child { grid-column:1/-1; }
  .settings-actions .button { flex:1 1 140px; }
  .restore-summary { grid-template-columns:minmax(0,1fr); }
}

/* Batch 13 icon correction: semantic marks use the same local line-icon family. */
.dashboard-kpi__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: .68;
}
.dashboard-kpi__mark .ui-icon { width: 22px; height: 22px; }
.dashboard-kpi__mark--library { color: var(--red); }
.dashboard-kpi__mark--watching { color: var(--jade); }
.dashboard-kpi__mark--completed { color: var(--gold); }
.dashboard-kpi__mark--on-hold { color: var(--jade); }
.dashboard-kpi__mark--favorites { color: var(--red); }

.stats-kpi__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: none;
}
.stats-kpi__mark .ui-icon { width: 25px; height: 25px; }
.stats-kpis article:nth-child(1) .stats-kpi__mark { color: var(--jade); opacity: .25; }
.stats-kpis article:nth-child(2) .stats-kpi__mark { color: var(--red); opacity: .24; }
.stats-kpis article:nth-child(3) .stats-kpi__mark { color: var(--jade); opacity: .25; }
.stats-kpis article:nth-child(4) .stats-kpi__mark { color: #746f66; opacity: .22; }

.settings-section__mark { border: 0; border-radius: 0; background: none; box-shadow: none; }
.settings-section__mark .ui-icon { width: 23px; height: 23px; }
.settings-summary__mark { width: 18px; height: 18px; opacity: .24; }
.settings-summary__mark .ui-icon { width: 18px; height: 18px; }

/* Batch 14 — integrated, offline User Guide accordion. */
.guide-page { display:grid; gap:18px; min-width:0; padding:32px 0 52px; }
.guide-heading { display:flex; align-items:center; gap:14px; min-width:0; }
.guide-heading > div { display:grid; min-width:0; gap:4px; }
.guide-heading h1 { font-size:42px; }
.guide-heading p:not(.eyebrow) { margin:0; color:var(--ink-soft); font:15px var(--serif); overflow-wrap:anywhere; }
.guide-heading__icon { display:grid; place-items:center; flex:0 0 auto; width:39px; height:39px; border:1px solid #d5aa9a; border-radius:6px 6px 4px 4px; background:linear-gradient(135deg,var(--red-soft),rgb(255 250 240 / 75%)); box-shadow:inset 0 0 0 3px rgb(164 50 38 / 7%); }
.guide-heading__icon::after { width:21px; height:21px; content:''; background:var(--red); -webkit-mask:url('/icons/book-open.svg') center/contain no-repeat; mask:url('/icons/book-open.svg') center/contain no-repeat; }
.nav-icon--user-guide::after { width:16px; height:16px; content:''; background:currentColor; -webkit-mask:url('/icons/book-open.svg') center/contain no-repeat; mask:url('/icons/book-open.svg') center/contain no-repeat; }
.guide-intro { position:relative; min-width:0; padding:22px 24px; overflow:hidden; }
.guide-intro::before, .guide-menu::before { position:absolute; inset:6px; border:1px solid rgb(183 135 64 / 16%); content:''; pointer-events:none; }
.guide-intro > *, .guide-menu > * { position:relative; z-index:1; }
.guide-intro h2 { margin-top:4px; font-size:25px; }
.guide-intro p:not(.eyebrow) { max-width:72ch; margin:8px 0 0; color:var(--ink-soft); line-height:1.65; }
.guide-menu { position:relative; min-width:0; padding:18px 20px 20px; overflow:hidden; }
.guide-menu > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.guide-menu a { display:inline-flex; align-items:center; min-width:0; min-height:38px; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); background:rgb(255 250 240 / 58%); font:13px var(--serif); text-decoration:none; }
.guide-menu a span { color:var(--red); font:10px var(--sans); font-weight:800; letter-spacing:.06em; }
.guide-menu a:hover, .guide-menu a:focus-visible { border-color:var(--gold); color:var(--red); background:var(--gold-soft); }
.guide-accordion { display:grid; gap:8px; min-width:0; }
.guide-accordion__item { min-width:0; overflow:hidden; border-color:var(--line-strong); box-shadow:none; scroll-margin-top:22px; }
.guide-accordion__item.is-open { border-color:var(--gold); box-shadow:var(--shadow-sm); }
.guide-accordion__heading { margin:0; }
.guide-accordion__button { display:grid; grid-template-columns:34px minmax(0,1fr) 22px; align-items:center; width:100%; min-height:60px; gap:12px; padding:10px 18px; border:0; color:var(--ink); background:rgb(255 251 242 / 66%); text-align:left; }
.guide-accordion__button:hover { background:var(--gold-soft); }
.guide-accordion__button:focus-visible { position:relative; z-index:2; outline-offset:-4px; }
.guide-accordion__number { color:var(--red); font:11px var(--sans); font-weight:800; letter-spacing:.08em; }
.guide-accordion__title { min-width:0; font:21px/1.2 var(--serif); overflow-wrap:anywhere; }
.guide-accordion__chevron { justify-self:end; width:18px; height:18px; background:var(--ink-soft); -webkit-mask:url('/icons/chevron-down.svg') center/contain no-repeat; mask:url('/icons/chevron-down.svg') center/contain no-repeat; transition:transform 160ms ease; }
.guide-accordion__item.is-open .guide-accordion__chevron { transform:rotate(180deg); }
.guide-accordion__panel { border-top:1px solid var(--line); background:rgb(255 251 242 / 42%); }
.guide-accordion__content { display:grid; gap:13px; padding:18px 20px 20px 64px; }
.guide-section__intro { margin:0; color:var(--ink-soft); font:15px/1.6 var(--serif); }
.guide-accordion__content ul { display:grid; gap:8px; margin:0; padding-left:19px; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.guide-accordion__content li { padding-left:3px; overflow-wrap:anywhere; }
.guide-accordion__content li::marker { color:var(--red); }
.guide-callout { display:grid; gap:3px; margin-top:2px; padding:11px 12px; border-left:3px solid var(--jade); background:var(--jade-soft); }
.guide-callout strong { color:var(--jade); font:11px var(--sans); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.guide-callout p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.5; }
.guide-callout--important { border-left-color:var(--gold); background:var(--gold-soft); }
.guide-callout--important strong { color:#8d672f; }
.guide-callout--warning { border-left-color:var(--red); background:var(--red-soft); }
.guide-callout--warning strong { color:var(--red); }
.guide-back-to-top { justify-self:end; padding:7px 2px; color:var(--red); font:13px var(--serif); text-decoration:none; }
.guide-back-to-top:hover, .guide-back-to-top:focus-visible { text-decoration:underline; }

@media (max-width:720px) {
  .guide-page { gap:14px; padding:24px 0 36px; }
  .guide-heading { align-items:center; gap:10px; }
  .guide-heading h1 { font-size:34px; }
  .guide-heading__icon { width:31px; height:31px; border-radius:5px 5px 3px 3px; }
  .guide-heading__icon::after { width:17px; height:17px; }
  .guide-intro { padding:19px 17px; }
  .guide-menu { padding:17px; }
  .guide-menu > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .guide-menu a { min-height:42px; overflow-wrap:anywhere; }
  .guide-accordion__item { scroll-margin-top:74px; }
  .guide-accordion__button { grid-template-columns:28px minmax(0,1fr) 20px; min-height:56px; gap:9px; padding:9px 13px; }
  .guide-accordion__title { font-size:18px; }
  .guide-accordion__content { gap:12px; padding:15px 14px 17px; }
  .guide-section__intro { font-size:14px; }
  .guide-accordion__content ul { font-size:13px; }
}

@media (max-width:420px) {
  .guide-menu > div { grid-template-columns:minmax(0,1fr); }
}