* { box-sizing: border-box; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; margin: 0; background: #f5f5f2; color: #262d29; }
header { background: #fff; color: #262d29; border-bottom: 1px solid #dce0da; padding: 1rem 2rem; min-height: 72px; display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 1.15rem; letter-spacing: -0.04em; margin: 0; }
header nav a, header nav button { color: #606b63; margin-left: 1rem; text-decoration: none; background: none; border: none; cursor: pointer; font-size: 0.9rem; }
main { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.card { background: #fff; border: 0; border-bottom: 1px solid #dce0da; padding: 1.8rem 0; margin: 0; }
.card h2 { margin-top: 0; font-size: 1.05rem; }
label { display: block; margin: 0.8rem 0 0.25rem; font-size: 0.9rem; }
input, select { width: 100%; padding: 0.5rem; border: 1px solid #dce0da; border-radius: 4px; font-size: 1rem; }
button.primary { margin-top: 1.2rem; padding: 0.55rem 1.4rem; background: #285d46; color: #fff; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
button.primary:hover { background: #1d4835; }
.msg { display: none; margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: 4px; font-size: 0.9rem; }
.msg.error { background: #ffebe9; border: 1px solid #ff8182; }
.msg.ok { background: #dafbe1; border: 1px solid #4ac26b; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { border-bottom: 1px solid #dce0da; padding: 0.5rem 0.4rem; text-align: left; }
.op { margin-right: 0.4rem; padding: 0.25rem 0.6rem; font-size: 0.8rem; border: 1px solid #dce0da; border-radius: 4px; background: #f3f5f1; cursor: pointer; }
.op.danger { color: #cf222e; border-color: #cf222e; }
.op:disabled { opacity: 0.55; cursor: default; }
.badge { padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.78rem; }
.badge.active { background: #dafbe1; }
.badge.suspended { background: #ffebe9; }
.badge.admin { background: #e8efe9; }
.badge.job-pending { background: #e5e8e2; color: #606b63; }
.badge.job-running { background: #fff8c5; color: #7d4e00; }
.badge.job-completed { background: #dafbe1; color: #1a7f37; }
.badge.job-failed { background: #ffebe9; color: #cf222e; }
.badge.job-canceled { background: #f3f5f1; color: #6c756e; }
a { color: #285d46; }

/* サイドバー付きレイアウト（mypage / service） */
.layout { display: flex; gap: 1.5rem; max-width: 1600px; margin: 0 auto; padding: 0 1rem; align-items: flex-start; }

.layout main { flex: 1; margin: 0; padding: 0; max-width: none; min-width: 0; }
.sidebar { width: 196px; flex-shrink: 0; padding: 2rem 0.5rem; }
.side-title { font-size: 0.72rem; color: #606b63; letter-spacing: 0.05em; margin: 0.9rem 0 0.3rem; }
.side-title:first-child { margin-top: 0; }
.side-item { display: block; padding: 0.45rem 0.6rem; border-radius: 4px; color: #262d29; text-decoration: none; font-size: 0.95rem; }
.side-item:hover { background: #f3f5f1; }
.side-item.active { background: #e8efe9; color: #285d46; font-weight: 600; }
.side-empty { font-size: 0.85rem; color: #6c756e; padding: 0.3rem 0.6rem; }

/* ジャンル→カテゴリのツリー表示（FR-112） */
ul.tree { list-style: none; margin: 0.8rem 0 0; padding: 0; }
ul.tree ul { list-style: none; margin: 0.1rem 0 0.3rem 0.65rem; padding-left: 1.2rem; border-left: 1px solid #dce0da; }
.tree-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 4px; }
.tree-row.clickable { cursor: pointer; }
.tree-row.clickable:hover { background: #f3f5f1; }
.tree-caret { width: 1em; color: #606b63; font-size: 0.8rem; }
.tree-code { font-family: SFMono-Regular, Consolas, monospace; font-size: 0.76rem; background: #f3f5f1; border: 1px solid #dce0da; border-radius: 4px; padding: 0 0.3rem; color: #606b63; }
.tree-meta { font-size: 0.74rem; color: #6c756e; margin-left: auto; white-space: nowrap; }
.tree-empty { color: #6c756e; font-size: 0.9rem; padding: 0.3rem 0.5rem; }
.lineup-list { max-height: 340px; overflow-y: auto; border: 1px solid #e5e8e2; border-radius: 4px; margin: 0.2rem 0; padding: 0.2rem 0.4rem; }
ul.tree .lineup-list { border-left: 1px solid #e5e8e2; margin-left: 0; padding-left: 0.4rem; }
.mini-badge { font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: #f3f5f1; border: 1px solid #dce0da; color: #606b63; white-space: nowrap; }
.mini-badge.new { background: #dafbe1; border-color: #4ac26b; }
.mini-badge.dl { background: #e8efe9; border-color: #54aeff; color: #285d46; }
.mini-badge.info { background: #fff8c5; border-color: #d4a72c; color: #7d4e00; }
.mini-badge.done { background: #dafbe1; border-color: #4ac26b; color: #1a7f37; font-weight: 600; }

/* 動画管理 3ペイン（サイドバー ｜ ツリー ｜ 作品詳細）・DEC-016 */
.view-tree { flex: 1; min-width: 0; display: flex; gap: 1.5rem; align-items: flex-start; }
.view-jobs { flex: 1; min-width: 0; }
.tree-panel { width: 340px; flex-shrink: 0; background: #fff; border: 1px solid #dce0da; border-radius: 4px; padding: 1rem; }
.tree-panel .panel-title { margin: 0 0 0.6rem; font-size: 1.05rem; }
.tree-panel .tree { max-height: 70vh; overflow-y: auto; }
.detail-panel { flex: 1; min-width: 0; background: #fff; border: 1px solid #dce0da; border-radius: 4px; padding: 1.5rem; align-self: stretch; }
.placeholder { color: #6c756e; text-align: center; padding: 3.5rem 1rem; font-size: 1.05rem; }
.hint { font-size: 0.82rem; color: #606b63; margin: 0.2rem 0 0.6rem; }

/* タイトル選択（ツリー内） */
.tree-row.title-row { cursor: pointer; border-radius: 4px; }
.tree-row.title-row:hover { background: #f3f5f1; }
.tree-row.title-row.selected { background: #e8efe9; color: #285d46; font-weight: 600; }
.tree-row.title-row .tree-caret { color: #6c756e; font-size: 0.7rem; }

/* 作品詳細（FOD 動画ページ風） */
.detail-hero { border-bottom: 1px solid #e5e8e2; padding-bottom: 1rem; margin-bottom: 1rem; }
.detail-hero h2 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.detail-code { margin-bottom: 0.5rem; }
.detail-code a { font-size: 0.85rem; margin-left: 0.5rem; }
.detail-meta { color: #606b63; font-size: 0.85rem; margin-bottom: 0.5rem; }
.detail-desc { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; color: #262d29; margin: 0.3rem 0; }
.detail-facts { font-size: 0.8rem; color: #6c756e; margin-top: 0.5rem; }
.detail-notice { background: #f3f5f1; border: 1px dashed #dce0da; border-radius: 4px; padding: 1.2rem; color: #606b63; text-align: center; }
.ep-heading { font-size: 1.05rem; margin: 0 0 0.3rem; }
.ep-list { list-style: none; padding: 0; margin: 0; }
.ep-item { border-top: 1px solid #e5e8e2; padding: 0.7rem 0.2rem; }
.ep-item:first-child { border-top: none; }
.ep-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; font-size: 0.95rem; }
.ep-no { color: #285d46; }
.ep-desc { margin: 0.35rem 0 0; font-size: 0.85rem; color: #606b63; line-height: 1.55; white-space: pre-wrap; }
.ep-play { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.op.play { background: #285d46; color: #fff; border-color: #285d46; text-decoration: none; font-weight: 600; }
.op.play:hover { background: #1d4835; }
.ep-path { font-family: SFMono-Regular, Consolas, monospace; font-size: 0.74rem; background: #f3f5f1; border: 1px solid #dce0da; border-radius: 4px; padding: 0.1rem 0.4rem; color: #606b63; overflow-wrap: anywhere; }
textarea { width: 100%; padding: 0.5rem; border: 1px solid #dce0da; border-radius: 4px; font-size: 1rem; }

/* ダウンロード進捗バー（FR-125） */
.dlbar { display: inline-block; width: 120px; height: 8px; background: #e5e8e2; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.dlbar-fill { display: block; height: 100%; background: #285d46; transition: width 0.3s; }
.dlbar-fill.done { background: #1a7f37; }
.dlbar-fill.failed { background: #cf222e; }
.dlbar-txt { font-size: 0.78rem; color: #606b63; margin-left: 0.4rem; white-space: nowrap; }
.dl-note { font-size: 0.8rem; color: #cf222e; }

/* トグル行（マイページ通知設定） */
.switch-row { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; }
.switch-row input { width: auto; }

/* トースト通知（右下・FR-118） */
.toast-container { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1000; }
.toast { background: #253c32; color: #fff; padding: 0.7rem 1rem; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); font-size: 0.9rem; max-width: 340px; opacity: 1; transition: opacity 0.4s; }
.toast.ok { border-left: 4px solid #4ac26b; }
.toast.error { border-left: 4px solid #ff8182; }
.toast.hide { opacity: 0; }

@media (max-width: 1100px) {
  .view-tree { flex-direction: column; }
  .tree-panel { width: 100%; }
}
.tree-meta-inline { font-size: 0.74rem; color: #6c756e; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; }

/* 共通の階層と余白 */
:root { color-scheme: light; accent-color: #285d46; }
body { font-size: 14px; line-height: 1.65; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { min-height: 34px; }
button:disabled { opacity: .55; cursor: not-allowed; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #285d46; outline-offset: 3px; }
input, select, textarea { background: #fff; color: #262d29; padding: .65rem .75rem; }
textarea { resize: vertical; }
.common-form { width: 100%; max-width: 580px; }
label { font-weight: 500; margin-top: 1rem; }
header nav { display: flex; align-items: center; gap: 1rem; }
header nav a, header nav button { margin-left: 0; padding: .3rem 0; }
.brand { color: inherit; text-decoration: none; }
.brand-caption { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #dce0da; color: #606b63; font-size: .75rem; font-weight: 400; letter-spacing: 0; }
.page-heading { padding: 0 0 1.5rem; border-bottom: 1px solid #dce0da; }
.page-heading h2 { margin: 0 0 .35rem; font-size: 1.65rem; font-weight: 600; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: #606b63; }
.layout > main { background: #fff; padding: 2rem 2.5rem; min-height: calc(100vh - 72px); }
.side-title { margin-top: 1.75rem; padding-left: .65rem; }
.side-item { margin: .25rem 0; padding: .65rem; font-size: .85rem; }
.side-item.active { box-shadow: inset 3px 0 #285d46; }
.view-tree { gap: 0; margin: 1.5rem 0; background: #fff; border: 1px solid #dce0da; min-height: calc(100vh - 122px); }
.tree-panel { border: 0; border-right: 1px solid #dce0da; border-radius: 0; align-self: stretch; padding: 1.25rem; }
.layout .detail-panel { padding: 1.75rem; border: 0; border-radius: 0; }
.tree-panel .panel-title { font-size: 1.3rem; }
.tree-row { flex-wrap: wrap; overflow-wrap: anywhere; gap: .35rem; min-height: 36px; font-size: .82rem; }
.tree-caret { flex-shrink: 0; }
.tree-code { font-size: .66rem; border: 0; background: none; }
.tree-meta { color: #606b63; }
.placeholder { padding: 5rem 1rem; }
.placeholder strong { display: block; font-size: 1.1rem; color: #262d29; font-weight: 500; margin-bottom: .6rem; }
.placeholder p { font-size: .85rem; margin: 0; }
.hint { line-height: 1.8; }
.toolbar { flex-wrap: wrap; margin-top: 1rem; }
th { font-size: .75rem; font-weight: 500; color: #606b63; background: #f5f6f3; white-space: nowrap; }
th, td { padding: .85rem .65rem; }
td { overflow-wrap: anywhere; }
.badge { display: inline-block; white-space: nowrap; }
.ep-item { padding: 1.2rem 0; }
.detail-hero h2 { font-size: 1.55rem; }
.detail-desc { line-height: 1.9; }
.auth-page main { width: 100%; max-width: 440px; margin: clamp(2rem, 9vh, 6rem) auto; }
.auth-page .card { padding: 2rem; border: 1px solid #dce0da; }
.auth-page .card h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.auth-page .primary { width: 100%; margin-top: 1.5rem; }
.auth-foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #dce0da; font-size: .8rem; color: #606b63; }

.toast-container { max-width: calc(100vw - 2rem); }
@media (max-width: 1100px) {
  .tree-panel { border-right: 0; border-bottom: 1px solid #dce0da; }
  .tree-panel .tree { max-height: 45vh; }
  .view-tree { min-height: auto; }
}
@media (max-width: 700px) {
  header { padding: .8rem 1rem; min-height: 64px; gap: .75rem; flex-wrap: wrap; }
  header nav { gap: .8rem; }
  header nav a, header nav button { font-size: .8rem; }
  .brand-caption { display: none; }
  .layout { display: block; padding: 0; }
  .sidebar { width: 100%; padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .25rem .5rem; border-bottom: 1px solid #dce0da; }
  .side-title { width: 100%; margin: .4rem 0 0; padding: 0; }
  .side-item { margin: 0; padding: .45rem .65rem; }
  .layout > main, .layout .detail-panel { padding: 1.5rem 1rem; }
  .view-tree { margin: 0; border: 0; }
  .tree-panel { padding: 1.25rem 1rem; }
  .card { padding: 1.5rem 0; }
  .page-heading h2 { font-size: 1.4rem; }
  .auth-page .card { padding: 1.5rem; }

  input, select, textarea { font-size: 16px; }
  .op { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ページ切り替え時も共通枠の位置・寸法を維持する。 */
html { overflow-y: scroll; }
.app-header { height: 72px; flex-wrap: nowrap; }
.layout { align-items: stretch; }
.sidebar { position: sticky; top: 0; height: calc(100vh - 72px); overflow-y: auto; }
.side-item { font-weight: 500; }
.side-item.active { font-weight: 500; }
#serviceMenu { min-height: 48px; }
.page-content > .page-heading { min-height: 112px; }
.page-content .view-tree { margin: 1.5rem 0 0; min-height: 560px; }
.page-content .detail-panel { margin: 0; min-width: 0; }
.common-form input:not([type="checkbox"]), .common-form select { min-height: 44px; }
.common-form .primary { min-height: 44px; }
@media (max-width: 1100px) {
  .page-content .view-tree { min-height: 0; }
}
@media (max-width: 700px) {
  .app-header { height: 64px; }
  .sidebar { position: static; height: 220px; display: block; }
  .side-title { margin: .4rem 0; }
  .side-item { display: inline-block; margin-right: .35rem; }
  #serviceMenu { min-height: 40px; }
  .page-content > .page-heading { min-height: 116px; }
}

/* 選択階層の一覧。中央もツリーと同じ選択状態を使う。 */
.tree-row.clickable.selected { background: #e8efe9; color: #285d46; }
.browse-path { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.1rem; color: #606b63; font-size: .8rem; overflow-wrap: anywhere; }
.browse-path button { background: none; border: 0; padding: .25rem 0; color: #285d46; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-align: left; cursor: pointer; }
.browse-heading { padding-bottom: 1.25rem; border-bottom: 1px solid #dce0da; }
.browse-heading h2, .loading-heading { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 600; overflow-wrap: anywhere; }
.browse-list { list-style: none; margin: 0; padding: 0; }
.browse-list li { border-bottom: 1px solid #e5e8e2; }
.browse-row { display: flex; align-items: center; gap: 1rem; width: 100%; border: 0; padding: 1rem .5rem; text-align: left; color: #262d29; background: #fff; font: inherit; cursor: pointer; }
.browse-row:hover { background: #f3f5f1; }
.browse-row:focus-visible { outline-offset: -2px; }
.browse-row-main { flex: 1; min-width: 0; }
.browse-row-title { display: block; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.browse-row-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .35rem; font-size: .82rem; color: #606b63; overflow-wrap: anywhere; }
.browse-row-meta { display: block; margin-top: .35rem; font-size: .75rem; color: #606b63; }
.browse-arrow { flex-shrink: 0; color: #606b63; font-size: 1.4rem; }
.browse-empty { padding: 1.5rem 0; font-size: .9rem; color: #606b63; overflow-wrap: anywhere; }

/* 原本画像の表示枠だけを縮小する。画像データの圧縮や切り抜きは行わない。 */
.lineup-image { display: flex; flex: 0 0 136px; width: 136px; aspect-ratio: 16 / 9; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #f3f5f1; border: 1px solid #e5e8e2; border-radius: 3px; }
.lineup-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.image-placeholder { padding: .5rem; font-size: .7rem; color: #606b63; text-align: center; }
.lineup-image-large { width: 100%; max-width: 640px; margin: 0 0 1rem; }
.detail-hero > .op { margin-bottom: 1rem; }
@media (max-width: 700px) {
  .lineup-image:not(.lineup-image-large) { flex-basis: 88px; width: 88px; }
  .browse-row:has(.lineup-image) { gap: .65rem; }
}

/* 各話は固定サイズの画像と説明を並べ、再生領域は全幅を使う。 */
.ep-summary { display: flex; align-items: flex-start; gap: 1rem; }
.ep-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ep-summary { gap: .65rem; }
}

/* 検索窓（ヘッダー右上・FR-129）と検索結果ビュー */
.global-search { display: flex; align-items: center; gap: .4rem; flex: 1; justify-content: flex-end; margin: 0 1.25rem; min-width: 0; }
.global-search input[type="search"] { width: min(320px, 100%); padding: .45rem .65rem; font-size: .9rem; border: 1px solid #dce0da; border-radius: 4px; }
.global-search button { padding: .45rem .8rem; background: #285d46; color: #fff; border: 0; border-radius: 4px; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.global-search button:hover { background: #1d4835; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-hit { padding: 1.1rem 0; border-bottom: 1px solid #e5e8e2; }
.search-hit h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.search-hit h3 a { color: #285d46; text-decoration: none; }
.search-hit h3 a:hover { text-decoration: underline; }
.search-snippet { margin: .25rem 0; font-size: .85rem; color: #4b554f; line-height: 1.7; overflow-wrap: anywhere; }
.search-field { display: inline-block; margin-right: .5rem; padding: 0 .4rem; border: 1px solid #dce0da; border-radius: 3px; font-size: .72rem; color: #606b63; }
.search-episodes { list-style: none; margin: .5rem 0 0; padding: .4rem 0 0 .9rem; border-left: 2px solid #e5e8e2; }
.search-episodes li { margin: .25rem 0; font-size: .9rem; }
.search-episodes a { color: #285d46; text-decoration: none; }
.search-episodes a:hover { text-decoration: underline; }
.search-more { color: #606b63; font-size: .8rem; }
mark { background: #fff2a8; color: inherit; padding: 0 .1em; }
@media (max-width: 700px) {
  .global-search { margin: 0 .5rem; }
  .global-search input[type="search"] { width: 140px; }
}

/* スマートフォン: 本文を優先し、補助ナビゲーションを開閉する。 */
.mobile-menu-toggle, .mobile-logout, .mobile-cell-label { display: none; }
.tree-disclosure { display: none; }
.mobile-details > summary { cursor: pointer; color: #285d46; padding: .6rem 0; }
@media (min-width: 701px) {
  .tree-panel > .tree-panel-content { display: block; }
}
@media (max-width: 700px) {
  .app-header { height: auto; min-height: 64px; padding: .6rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .app-header h1 { flex: 1; min-width: 0; }
  .brand-caption { display: none; }
  .has-mobile-menu .mobile-menu-toggle { display: block; background: #f3f5f1; border: 1px solid #dce0da; border-radius: 4px; padding: .5rem .65rem; }
  .has-mobile-menu .app-header > nav { display: none; }
  .global-search { order: 3; flex: 0 0 100%; margin: 0; width: 100%; }
  .global-search input[type="search"] { flex: 1; width: 0; min-width: 0; font-size: 16px; }
  .layout { display: block; padding: 0; }
  .has-mobile-menu .sidebar { display: none; }
  .has-mobile-menu.menu-open .sidebar { display: block; }
  .layout .sidebar { position: static; width: 100%; height: auto; padding: .75rem 1rem; border-bottom: 1px solid #dce0da; }
  .sidebar .side-item { display: block; width: 100%; text-align: left; min-height: 44px; padding: .7rem; }
  .sidebar .mobile-logout { background: none; border: 0; font: inherit; cursor: pointer; }
  .layout > main { padding: 1rem; }
  .page-content > .page-heading { min-height: 0; padding-bottom: 1rem; }
  .view-tree { flex-direction: column; margin: 0; }
  .tree-panel { width: 100%; padding: .5rem .75rem; }
  .tree-disclosure { display: list-item; list-style-position: inside; min-height: 44px; font-weight: 600; }
  .tree-panel .tree, .tree-panel .lineup-list { max-height: none; overflow: visible; }
  .tree-row, .tree-meta, .tree-code { white-space: normal; overflow-wrap: anywhere; }
  ul.tree ul { padding-left: .6rem; margin-left: .25rem; }
  .detail-panel { width: 100%; padding: 1rem .75rem; }
  .card { padding: 1rem 0; min-width: 0; }
  button, .op, button.primary, summary, input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  button { max-width: 100%; white-space: normal; }
  input, textarea, select { max-width: 100%; font-size: 16px; }
  .ep-item { padding: 1rem 0; }
  .ep-play { display: flex; gap: .5rem; }
  .ep-play .op { flex: 1 1 100px; margin: 0; }
  .ep-play .ep-dlstatus { flex-basis: 100%; }
  .ep-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
  .ep-heading #bulkDlBtn { float: none !important; order: 1; width: 100%; }
  .detail-hero h2, .detail-facts, .msg, .hint, .ep-head, .ep-dlstatus, .page-heading, .card { overflow-wrap: anywhere; }
  .tree-meta { margin-left: 0; }
  .mobile-card-table, .mobile-card-table tbody { display: block; width: 100%; }
  .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-card-table tbody tr { display: block; margin: .75rem 0; padding: .5rem .75rem; border: 1px solid #dce0da; border-radius: 6px; }
  .mobile-card-table td { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: .6rem; padding: .5rem 0; }
  .mobile-card-table td:last-child { border-bottom: 0; }
  .mobile-cell-label { display: block; color: #606b63; font-size: .8rem; }
  .mobile-cell-content { min-width: 0; overflow-wrap: anywhere; }
  .mobile-cell-content .ep-path { word-break: break-word; }
}