/* AKARI Video Lab — 素材ビューア（lab-viewer.html）
 *
 * アプリ（AKARI Video）のライブラリに近い 3 ペインのプロ向けレイアウト:
 *   上部バー / 左 = 分類レール + 素材一覧 / 中央 = プレビュー（1920×1080 の舞台 + タイムライン）/ 右 = インスペクター
 * ページはスクロールさせず ペインごとにスクロールする。860px 以下は 3 ペインを下のタブ（一覧 / プレビュー / ツマミ）で切り替える
 * base.css のトークンを土台にし ここでは lv- 接頭辞のクラスだけを足す（他ページのクラスは触らない）
 */

.lv {
  --bg0: #070605;
  --bg1: #0f0d0c;
  --bg2: #151210;
  --bg3: #1c1916;
  --bg4: #25201c;
  --ln: rgba(255, 236, 214, 0.07);
  --ln2: rgba(255, 236, 214, 0.12);
  --ln3: rgba(255, 236, 214, 0.2);
  --tx: #f4ede4;
  --tx2: #c9bfb3;
  --tx3: #8f857b;
  --tx4: #625950;
  --acc: #ff8a00;
  --acc2: #ffa53d;
  --acc-soft: rgba(255, 138, 0, 0.12);
  --acc-line: rgba(255, 138, 0, 0.42);
  --free: #8fdca0;
  --paid: #ffc46b;
  --plat: linear-gradient(135deg, #f4f6f8 0%, #b8bfc7 28%, #eef1f4 52%, #9aa3ad 76%, #e3e7eb 100%);
  --r: 10px;
  --r-sm: 7px;
  --top-h: 54px;
  --status-h: 28px;
  --rail-w: 196px;
  --list-w: 272px;
  --insp-w: 340px;
  --gap: 6px;
  --stage-pad: 18px;

  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--status-h);
  background: var(--bg0);
  color: var(--tx);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
/* 素材の色を正しく見せるため グレインは切る（base.css の body::after） */
body.lv::after { display: none; }
/* 大きさを指定し忘れたアイコンが巨大にならないように（どのクラス指定よりも弱い） */
:where(.lv) svg { width: 1em; height: 1em; }
.lv .lv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lv svg { flex: none; }
.lv [hidden] { display: none !important; }
.lv-item__th video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-special-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.lv-telop-stage-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; outline: 3px solid rgba(255, 236, 214, .28); touch-action: none; cursor: move; }
.lv-telop-stage-frame:active { cursor: grabbing; }
.lv-telop-chrome { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 7px 10px; border-top: 1px solid var(--ln); background: var(--bg1); }
.lv-telop-chrome .ctl-row { display: flex; align-items: center; gap: 6px; }
.lv-telop-chrome .ctl-label { font-size: 11px; color: var(--tx3); white-space: nowrap; }
.lv-telop-chrome .ctl-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px; padding: 4px 9px; border: 1px solid var(--ln2); border-radius: 7px; color: var(--tx2); font-size: 11px; font-weight: 700; }
.lv-telop-chrome .ctl-chip:hover { color: var(--tx); border-color: var(--ln3); }
.lv-telop-chrome .ctl-chip.active { color: var(--acc2); border-color: var(--acc-line); background: var(--acc-soft); }
.lv-telop-chrome .aspect-shape { display: inline-block; border: 2px solid currentColor; border-radius: 3px; }
@media (max-width: 860px) {
  .lv-view__wrap.is-telop { aspect-ratio: var(--telop-ratio); max-height: 50vh; }
  .lv-telop-chrome .ctl-chip { min-height: 44px; }
}
.lv .aspect-guide-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lv .aspect-guide-band { position: absolute; box-sizing: border-box; background: rgba(244, 63, 94, .16); border: 3px dashed rgba(244, 63, 94, .7); }
.lv .aspect-guide-label { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 5px 10px; border-radius: 6px; background: rgba(17, 24, 39, .8); color: #fff; font-size: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-special-background { position: absolute; inset: 0; }
.lv-special-samples { display: flex; flex: none; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; padding: 7px 10px; border-top: 1px solid var(--ln); background: var(--bg1); overflow-x: auto; }
.lv-special-samples button { flex: none; width: clamp(72px, 6vw, 96px); min-height: 44px; aspect-ratio: 16 / 9; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
.lv-special-samples button[aria-pressed="true"] { border-color: var(--acc); }
.lv-special-samples img { width: 100%; height: 100%; object-fit: cover; }
.lv-special-samples__note { flex-basis: 100%; text-align: center; color: var(--tx3); font-size: 11px; }

.lv-skip {
  position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 8px;
  background: var(--acc); color: #140a00; font-weight: 700; transition: top 0.2s;
}
.lv-skip:focus { top: 10px; }
.lv-noscript { position: fixed; inset: auto 0 40% 0; text-align: center; color: var(--tx2); z-index: 400; }
.lv-noscript a { color: var(--acc2); }

.lv-kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px; border: 1px solid var(--ln2); border-bottom-width: 2px; background: var(--bg3);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1; color: var(--tx2); letter-spacing: 0;
}

/* ───────────── 上部バー ───────────── */
.lv-top {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--ln);
  background: linear-gradient(180deg, #0d0b0a, #090807);
}
.lv-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.lv-brand__orb { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(255, 138, 0, 0.55)); transition: filter 0.4s; }
.lv-brand:hover .lv-brand__orb { filter: drop-shadow(0 0 14px rgba(255, 138, 0, 0.9)); }
.lv-brand__name { font-family: var(--font-en); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--tx2); white-space: nowrap; }
.lv-brand__name b { font-weight: 800; color: var(--tx); letter-spacing: 0.08em; }
.lv-top__sep { width: 1px; height: 20px; background: var(--ln2); flex: none; }
.lv-top__title { font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; color: var(--tx); }

.lv-search {
  position: relative; display: flex; align-items: center; flex: 1 1 320px; max-width: 420px; min-width: 180px; height: 34px;
  margin-left: 10px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--bg2);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.lv-search:focus-within { border-color: var(--acc-line); box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12); background: var(--bg3); }
.lv-search__ic { width: 15px; height: 15px; margin-left: 11px; color: var(--tx3); }
.lv-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0 8px; background: none; border: 0; outline: none;
  color: var(--tx); font: inherit; font-size: 13px;
}
.lv-search input::placeholder { color: var(--tx4); }
.lv-search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }
.lv-search__kbd { margin-right: 8px; }
.lv-search:focus-within .lv-search__kbd { opacity: 0; }
.lv-search__close { display: none; }

.lv-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--ln); flex: none;
}
.lv-seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--tx3); white-space: nowrap;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.lv-seg button:hover { color: var(--tx); }
.lv-seg button[aria-checked="true"], .lv-seg button[aria-pressed="true"] {
  color: var(--tx); background: var(--bg4); box-shadow: 0 0 0 1px var(--ln2) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.lv-seg__n { font-family: var(--font-en); font-size: 11px; font-weight: 600; color: var(--tx4); }
.lv-seg button[aria-checked="true"] .lv-seg__n { color: var(--acc2); }

.lv-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.lv-toplink {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 6px; border-radius: 8px;
  color: var(--tx3); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color 0.2s, background 0.2s;
}
.lv-toplink svg { width: 15px; height: 15px; }
.lv-toplink:hover { color: var(--tx); background: var(--bg3); }
.lv-iconbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--tx2);
  border: 1px solid var(--ln); transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lv-iconbtn svg { width: 17px; height: 17px; }
.lv-iconbtn:hover { color: var(--tx); border-color: var(--ln3); }
.lv-top__searchbtn { display: none; }

/* アカウント */
.lv-acct { position: relative; }
.lv-acct__btn {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  border: 1px solid var(--ln2); background: var(--bg2); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.3s;
}
.lv-acct__btn:hover, .lv-acct__btn[aria-expanded="true"] { border-color: var(--ln3); background: var(--bg3); }
.lv-acct__btn.is-guest { padding: 0 16px; background: var(--tx); color: #120c08; border-color: transparent; }
.lv-acct__btn.is-guest:hover { background: #fff; }
.lv-avatar {
  position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg4); color: var(--tx2); box-shadow: 0 0 0 1px var(--ln2) inset;
}
.lv-avatar svg { width: 16px; height: 16px; }
.lv-avatar.is-lifetime { background: var(--plat); color: #2a2f35; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 14px -2px rgba(210, 222, 235, 0.55); }
.lv-avatar.is-lifetime::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 2px var(--bg2), 0 0 8px var(--acc);
}
.lv-acct__meta { display: grid; line-height: 1.15; text-align: left; }
.lv-acct__meta small { font-size: 10.5px; font-weight: 500; color: var(--tx3); }
.lv-acct__serial { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--tx); letter-spacing: 0.04em; }

.lv-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 312px;
  padding: 16px; border-radius: 14px; border: 1px solid var(--ln2);
  background: rgba(20, 17, 15, 0.97); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform-origin: top right; animation: lvPop 0.28s var(--ease-out);
}
@keyframes lvPop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.lv-pop__who { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lv-pop__who .lv-avatar { width: 36px; height: 36px; }
.lv-pop__name { font-weight: 700; font-size: 13.5px; }
.lv-pop__mail { font-family: var(--font-en); font-size: 11.5px; color: var(--tx3); }
.lv-pop__status { margin-left: auto; }
.lv-pop__card { position: relative; margin: 2px 0 12px; }
.lv-pop__lead { font-size: 12.5px; color: var(--tx2); line-height: 1.6; }
.lv-pop__lead b { color: var(--tx); }
.lv-pop__actions { display: grid; gap: 6px; margin-top: 14px; }
.lv-pop__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ln); font-size: 11.5px; color: var(--tx3); }
.lv-pop__foot button { color: var(--tx3); font-size: 11.5px; }
.lv-pop__foot button:hover { color: var(--tx); }

/* パスのカード（pass-card.js が無いときの代わりの表示。pass-card.js があればそちらが描く） */
.lv-passfb { position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 12px; overflow: hidden; font-family: var(--font-en); }
.lv-passfb--lifetime {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    var(--plat);
  color: #252a30; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 16px 34px -14px rgba(0, 0, 0, 0.8);
}
.lv-passfb--lifetime::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 45%, transparent 58%);
  mix-blend-mode: soft-light;
}
.lv-passfb__brand { position: absolute; left: 14px; top: 12px; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
.lv-passfb__tier { position: absolute; right: 14px; top: 12px; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; opacity: 0.7; }
.lv-passfb__chip {
  position: absolute; left: 14px; top: 38%; width: 34px; height: 26px; border-radius: 5px;
  background: linear-gradient(135deg, #e9d6a2, #b99552 55%, #f3e3b6); box-shadow: 0 0 0 1px rgba(90, 70, 30, 0.35) inset;
}
.lv-passfb__no { position: absolute; left: 14px; bottom: 30px; font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: 0.08em; }
.lv-passfb__holder { position: absolute; left: 14px; bottom: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; opacity: 0.75; }
.lv-passfb--member {
  border: 1.5px dashed rgba(255, 236, 214, 0.26); background: rgba(255, 236, 214, 0.015);
  display: grid; place-items: center; text-align: center; color: var(--tx3); font-family: var(--font-jp);
}
.lv-passfb--member b { display: block; font-size: 12.5px; color: var(--tx2); }
.lv-passfb--member small { font-size: 11px; }

/* ───────────── ボタン・チップ ───────────── */
.lv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--ln2); background: var(--bg3); color: var(--tx);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s, transform 0.2s;
}
.lv-btn svg { width: 15px; height: 15px; }
.lv-btn:hover { border-color: var(--ln3); background: var(--bg4); }
.lv-btn:active { transform: translateY(1px); }
.lv-btn[disabled], .lv-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.lv-btn--block { display: flex; width: 100%; }
.lv-btn--primary {
  background: var(--acc); border-color: transparent; color: #160b00;
  box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.45) inset, 0 10px 30px -12px var(--orange-glow);
}
.lv-btn--primary:hover { background: var(--acc2); border-color: transparent; }
.lv-btn--primary .lv-kbd { background: rgba(0, 0, 0, 0.14); border-color: rgba(0, 0, 0, 0.2); color: #2a1500; }
.lv-btn--light { background: var(--tx); color: #140c06; border-color: transparent; }
.lv-btn--light:hover { background: #fff; border-color: transparent; }
.lv-btn--ghost { background: transparent; }
.lv-btn--sm { min-height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 7px; }
.lv-btn--sm svg { width: 13px; height: 13px; }
.lv-btn .lv-kbd { margin-left: 2px; }
.lv-btn.is-done { color: var(--free); border-color: rgba(143, 220, 160, 0.4); }
.lv-btn--primary.is-done { background: #1f2a1f; color: var(--free); box-shadow: 0 0 0 1px rgba(143, 220, 160, 0.45) inset; }

.lv-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; border: 1px solid transparent;
}
.lv-tag svg { width: 11px; height: 11px; }
.lv-tag--free { color: var(--free); background: rgba(143, 220, 160, 0.08); border-color: rgba(143, 220, 160, 0.22); }
.lv-tag--paid { color: var(--paid); background: rgba(255, 196, 107, 0.08); border-color: rgba(255, 196, 107, 0.26); }
.lv-tag--own { color: #dfe6ee; background: rgba(223, 230, 238, 0.08); border-color: rgba(223, 230, 238, 0.28); }
.lv-tag--mute { color: var(--tx3); background: rgba(255, 236, 214, 0.04); border-color: var(--ln2); }
.lv-tag--soon { color: var(--tx4); border-color: var(--ln2); }
.lv-tag--live { color: var(--acc2); background: var(--acc-soft); border-color: var(--acc-line); }

/* ───────────── メイン 3 ペイン ───────────── */
.lv-main {
  display: grid; grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr) var(--insp-w);
  gap: var(--gap); padding: var(--gap); min-height: 0;
}
.lv-pane {
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--ln); background: var(--bg1);
}
.lv-pane__head {
  display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 12px;
  border-bottom: 1px solid var(--ln);
}
.lv-pane__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--tx2); }
.lv-src {
  margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--acc2); background: var(--acc-soft); box-shadow: 0 0 0 1px var(--acc-line) inset;
}

/* スクロールバー（ペイン内） */
.lv-rail__scroll, .lv-list__scroll, .lv-insp__scroll, .lv-mcats { scrollbar-width: thin; scrollbar-color: #342c26 transparent; }
.lv-rail__scroll::-webkit-scrollbar, .lv-list__scroll::-webkit-scrollbar, .lv-insp__scroll::-webkit-scrollbar { width: 8px; }
.lv-rail__scroll::-webkit-scrollbar-track, .lv-list__scroll::-webkit-scrollbar-track, .lv-insp__scroll::-webkit-scrollbar-track { background: transparent; }
.lv-rail__scroll::-webkit-scrollbar-thumb, .lv-list__scroll::-webkit-scrollbar-thumb, .lv-insp__scroll::-webkit-scrollbar-thumb { background: #2e2722; border: 2px solid var(--bg1); border-radius: 8px; }

/* 分類レール */
.lv-rail__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 14px; }
.lv-rail__group + .lv-rail__group { margin-top: 10px; }
.lv-rail__glabel {
  padding: 8px 8px 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--tx4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-cat {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px 0 6px;
  border-radius: 7px; text-align: left; color: var(--tx2); font-size: 12.5px; font-weight: 500;
  transition: background 0.18s, color 0.18s;
}
.lv-cat:hover { background: var(--bg3); color: var(--tx); }
.lv-cat__ic {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--bg3); color: var(--tx2); font-size: 11.5px; line-height: 1; font-family: var(--font-jp);
  box-shadow: 0 0 0 1px var(--ln) inset; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.lv-cat__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-cat__n { font-family: var(--font-en); font-size: 11px; font-weight: 600; color: var(--tx4); }
.lv-cat[aria-current="true"] { background: linear-gradient(90deg, rgba(255, 138, 0, 0.14), rgba(255, 138, 0, 0.04)); color: var(--tx); }
.lv-cat[aria-current="true"]::before {
  content: ""; position: absolute; left: -6px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--acc); box-shadow: 0 0 10px var(--acc);
}
.lv-cat[aria-current="true"] .lv-cat__ic { background: var(--acc); color: #1a0d00; box-shadow: 0 0 14px -2px var(--orange-glow); }
.lv-cat[aria-current="true"] .lv-cat__n { color: var(--acc2); }
.lv-cat.is-soon { color: var(--tx4); cursor: default; }
.lv-cat.is-soon:hover { background: transparent; color: var(--tx4); }
.lv-cat.is-soon .lv-cat__ic { opacity: 0.45; filter: grayscale(1); }
.lv-cat.is-app .lv-cat__n { font-family: var(--font-jp); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--tx4); }
.lv-cat .lv-tag { height: 16px; padding: 0 4px; font-size: 9px; }

/* 素材一覧 */
.lv-list__head { gap: 8px; }
.lv-list__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 700; }
.lv-list__title .lv-cat__ic { width: 20px; height: 20px; font-size: 10.5px; }
.lv-list__title > svg { width: 15px; height: 15px; color: var(--tx3); }
.lv-list__title span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-list__count { margin-left: auto; font-family: var(--font-en); font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
.lv-list__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.lv-list__page { content-visibility: auto; contain-intrinsic-size: auto 9000px; }
.lv-list__sentinel { height: 1px; }
.lv-list__sec { padding: 10px 8px 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--tx4); }
.lv-list__hint { margin: 2px 4px 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg2); color: var(--tx3); font-size: 11.5px; line-height: 1.55; }
.lv-list__hint b { color: var(--tx2); font-weight: 700; }

.lv-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px 6px 6px;
  border-radius: 8px; text-align: left; transition: background 0.16s;
}
.lv-item + .lv-item { margin-top: 1px; }
.lv-item:hover { background: var(--bg3); }
.lv-item[aria-current="true"] { background: var(--bg4); box-shadow: 0 0 0 1px var(--acc-line) inset; }
.lv-item__th {
  position: relative; flex: none; width: 72px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden;
  background: #0c0b0a; box-shadow: 0 0 0 1px var(--ln2) inset;
}
.lv-item__th img { width: 100%; height: 100%; object-fit: cover; }
.lv-item__placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: 2px; overflow: hidden; color: var(--tx2); font-size: 11px; text-align: center; }
.lv-preview-label { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tx2); font-size: clamp(24px, 4vw, 64px); font-weight: 700; }
.lv-item__th--sq { width: 40px; aspect-ratio: 1; margin: 0 16px; }
.lv-item__th--telop {
  background:
    radial-gradient(120% 90% at 50% 40%, #2a2522, #0d0b0a);
}
.lv-item__th--telop img { object-fit: contain; padding: 4px; }
.lv-item__lock {
  position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
  background: rgba(10, 8, 7, 0.82); color: var(--paid); box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.35);
}
.lv-item__lock svg { width: 11px; height: 11px; }
.lv-item__tx { display: grid; min-width: 0; flex: 1; gap: 1px; }
.lv-item__thumbbtn { display: block; flex: none; }
.lv-item__thumbbtn .lv-item__th { display: block; }
.lv-item__select { text-align: left; }
.lv-item__select:focus-visible, .lv-item__thumbbtn:focus-visible, .lv-item__play:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
.lv-item__play { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--acc2); background: var(--acc-soft); }
.lv-item__play svg { width: 14px; height: 14px; }
.lv-item__nm { font-size: 12.5px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-item__id { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.lv-item[aria-current="true"] .lv-item__id { color: var(--acc2); }
.lv-item__side { display: grid; justify-items: end; gap: 4px; flex: none; }
.lv-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.lv-eq i { width: 2.5px; height: 100%; border-radius: 2px; background: var(--acc); animation: lvEq 0.9s ease-in-out infinite; transform-origin: bottom; }
.lv-eq i:nth-child(2) { animation-delay: -0.3s; }
.lv-eq i:nth-child(3) { animation-delay: -0.55s; }
@keyframes lvEq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.lv-item.is-playing .lv-eq { display: inline-flex; }

.lv-empty { text-wrap: pretty; display: grid; justify-items: start; gap: 10px; margin: 8px 6px; padding: 16px; border-radius: 10px; border: 1px dashed var(--ln2); color: var(--tx3); font-size: 12.5px; line-height: 1.7; }
.lv-empty__title { font-size: 14px; font-weight: 700; color: var(--tx); }
.lv-empty__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--bg3); font-size: 17px; color: var(--tx2); box-shadow: 0 0 0 1px var(--ln2) inset; }
.lv-empty .lv-btn { margin-top: 4px; }

.lv-mfilter, .lv-mcats { display: none; }

/* ───────────── プレビュー ───────────── */
.lv-view { position: relative; background: #0b0a09; }
.lv-view.is-locked .lv-view__wrap { padding-bottom: 76px; }
.lv-view__bar {
  display: flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--ln); min-width: 0;
}
.lv-view__kind { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--tx2); }
.lv-view__kind svg { width: 15px; height: 15px; color: var(--tx3); }
.lv-view__kind span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-view__spec { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx4); white-space: nowrap; letter-spacing: 0; }
.lv-view__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lv-view__tools .lv-seg button { height: 24px; padding: 0 9px; font-size: 11.5px; }
.lv-bgsw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px var(--ln3) inset; }
.lv-bgsw--dark { background: #1b1b1d; }
.lv-bgsw--person { background: url("../img/person-talk-9s.webp") center / cover, #333; }
.lv-bgsw--checker { background: repeating-conic-gradient(#8a8a8a 0 25%, #d8d8d8 0 50%) 0 0 / 6px 6px; }

.lv-view__wrap {
  position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 138, 0, 0.035), transparent 70%),
    radial-gradient(rgba(255, 236, 214, 0.05) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #0b0a09;
}
.lv-frame {
  position: relative; width: 640px; height: 360px; flex: none;
  border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 236, 214, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.lv-frame.is-hidden { visibility: hidden; }
.lv-view.is-audio .lv-frame { display: none; }
.lv-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--s, 0.3333)); overflow: hidden; }
.lv-stage__bg, .lv-stage__content { position: absolute; inset: 0; }
.lv-stage__bg { background: #161618; }
.lv-stage__bg[data-bg="dark"] { background: radial-gradient(90% 90% at 50% 40%, #26262a, #121214 70%); }
.lv-stage__bg[data-bg="person"] { background: #111; }
.lv-stage__bg[data-bg="person"] img { width: 100%; height: 100%; object-fit: cover; }
.lv-stage__bg[data-bg="checker"] { background: repeating-conic-gradient(#3a3a3c 0 25%, #545457 0 50%) 0 0 / 64px 64px; }
.lv-stage__bg[data-bg="black"] { background: #000; }
/* 断片のホスト（Shadow DOM）。ページの文字設定が中へ継承しないよう initial に戻す */
.lv-frag { all: initial; position: absolute; inset: 0; display: block; overflow: hidden; contain: layout paint; }
.lv-still { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); }
.lv-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lv-fill--cover { object-fit: cover; }
.lv-stage video.lv-fill { background: #000; }
.lv-direct { position: absolute; z-index: 8; min-width: 36px; min-height: 36px; border: 1px dashed var(--acc2); border-radius: 6px; cursor: grab; touch-action: none; background: rgba(255, 138, 0, 0.025); }
.lv-direct:active { cursor: grabbing; }
.lv-direct__handle { position: absolute; right: -8px; bottom: -8px; width: 20px; height: 20px; border: 2px solid #21130a; border-radius: 5px; background: var(--acc2); cursor: nwse-resize; }
.lv-mini, .lv-player { display: none; }

.lv-frame__badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; pointer-events: none; }
.lv-fbadge {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px;
  background: rgba(8, 7, 6, 0.78); color: var(--tx2); font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 0 0 1px var(--ln2) inset; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lv-fbadge svg { width: 12px; height: 12px; }
.lv-fbadge--lock { color: var(--paid); box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.4) inset; }
.lv-fbadge--live { color: var(--acc2); }
.lv-fbadge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: lvBlink 1.6s ease-in-out infinite; }
@keyframes lvBlink { 50% { opacity: 0.35; } }

.lv-lockbar {
  position: absolute; left: 50%; bottom: 14px; z-index: 5; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 12px; border-radius: 12px;
  background: rgba(16, 13, 11, 0.9); box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.28) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: lvRise 0.45s var(--ease-out);
}
@keyframes lvRise { from { opacity: 0; transform: translate(-50%, 8px); } }
.lv-lockbar__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; color: var(--paid); background: rgba(255, 196, 107, 0.1); }
.lv-lockbar__ic svg { width: 17px; height: 17px; }
.lv-lockbar__tx { display: grid; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.lv-lockbar__tx small { font-size: 11px; font-weight: 500; color: var(--tx3); }
.lv-lockbar__tx a { color: var(--acc2); text-decoration: underline; text-underline-offset: 2px; }
.lv-lockbar .lv-btn { flex: none; }

/* 音 */
.lv-audio {
  position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 440px); align-items: center; justify-content: center;
  gap: 36px; padding: 28px; overflow: hidden;
}
.lv-audio__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(60px) saturate(1.3); opacity: 0.32; transform: scale(1.1); }
.lv-audio__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, transparent, #0b0a09); }
.lv-audio__jacket {
  position: relative; width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}
.lv-audio__jacket img { width: 100%; height: 100%; object-fit: cover; }
.lv-audio__jacket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 40%); }
.lv-audio__main { position: relative; display: grid; gap: 10px; min-width: 0; }
.lv-audio__kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--acc2); }
.lv-audio__title { font-family: var(--font-en); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; }
.lv-audio__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-audio__ctrl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lv-playbig {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--acc); color: #160b00; box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.5) inset, 0 12px 34px -8px var(--orange-glow);
  transition: transform 0.25s var(--ease-spring), background 0.2s;
}
.lv-playbig svg { width: 22px; height: 22px; }
.lv-playbig:hover { transform: scale(1.06); background: var(--acc2); }
.lv-audio__time { font-family: var(--font-mono); font-size: 12px; color: var(--tx2); letter-spacing: 0; }
.lv-audio__note { font-size: 11px; color: var(--tx3); }
.lv-wave { position: relative; height: 58px; cursor: pointer; touch-action: none; border-radius: 6px; }
.lv-wave__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.lv-wave__bars i { flex: 1; min-width: 1px; border-radius: 2px; background: rgba(255, 236, 214, 0.2); height: var(--h); }
.lv-wave__bars--fg { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.lv-wave__bars--fg i { background: linear-gradient(180deg, var(--acc2), var(--acc)); }
.lv-wave__head { position: absolute; top: -4px; bottom: -4px; left: var(--p, 0%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tx); opacity: 0; transition: opacity 0.2s; }
.lv-wave.is-on .lv-wave__head { opacity: 1; }
.lv-wave:focus-visible { outline-offset: 4px; }

/* タイムライン */
.lv-tl { flex: none; border-top: 1px solid var(--ln); background: var(--bg1); padding: 6px 12px 10px; }
.lv-tl__ctrl { display: flex; align-items: center; gap: 4px; height: 32px; }
.lv-tbtn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--tx2);
  transition: background 0.18s, color 0.18s;
}
.lv-tbtn svg { width: 16px; height: 16px; }
.lv-tbtn:hover { background: var(--bg3); color: var(--tx); }
.lv-tbtn--play { width: 34px; height: 30px; background: var(--bg3); color: var(--tx); box-shadow: 0 0 0 1px var(--ln2) inset; }
.lv-tbtn--play:hover { background: var(--bg4); }
.lv-tbtn[aria-pressed="true"] { color: var(--acc2); background: var(--acc-soft); }
.lv-tl__time { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--tx); letter-spacing: 0; white-space: nowrap; }
.lv-tl__time span { color: var(--tx4); }
.lv-tl__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lv-tl__label { font-size: 11px; color: var(--tx3); margin-right: 4px; white-space: nowrap; }
.lv-track { position: relative; margin-top: 4px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.lv-ruler { position: relative; height: 18px; border-bottom: 1px solid var(--ln); }
.lv-ruler i { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--ln3); }
.lv-ruler i.is-major { height: 8px; background: rgba(255, 236, 214, 0.35); }
.lv-ruler b {
  position: absolute; top: 0; transform: translateX(3px); font-family: var(--font-mono); font-size: 9.5px; font-weight: 400;
  color: var(--tx4); letter-spacing: 0; line-height: 1; white-space: nowrap;
}
.lv-lane { position: relative; height: 34px; margin-top: 5px; border-radius: 6px; background: rgba(255, 236, 214, 0.025); }
.lv-clip {
  position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px 0;
  border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #7b4cc2, #5b359a); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.lv-clip--video { background: #25201c; box-shadow: 0 0 0 1px rgba(110, 170, 255, 0.55) inset; }
.lv-clip--video .lv-clip__strip { position: absolute; inset: 0; background-repeat: repeat-x; background-size: auto 100%; opacity: 0.55; }
.lv-clip--frag { background: linear-gradient(180deg, #b25a12, #8c420a); box-shadow: 0 0 0 1px rgba(255, 190, 120, 0.45) inset; }
.lv-clip span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.lv-clip__kf { position: absolute; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: #ffe2b8; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.lv-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; z-index: 2; }
.lv-playhead::before { content: ""; position: absolute; top: 14px; bottom: -2px; left: -1px; width: 2px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.lv-playhead::after {
  content: ""; position: absolute; top: 2px; left: -6px; width: 12px; height: 14px; background: var(--acc);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); border-radius: 2px;
}
.lv-track:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }

.lv-mid { display: none; }

/* ───────────── インスペクター ───────────── */
.lv-insp__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.lv-ins-sec { padding: 14px 14px 16px; border-bottom: 1px solid var(--ln); }
.lv-ins-sec:last-child { border-bottom: 0; }
.lv-ins-label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--tx3);
}
.lv-ins-label svg { width: 13px; height: 13px; }
.lv-ins-label .lv-ins-label__side { margin-left: auto; display: flex; gap: 6px; text-transform: none; letter-spacing: 0; font-family: var(--font-jp); }
.lv-ins-head { display: grid; gap: 8px; }
.lv-ins-cat { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tx3); }
.lv-ins-cat .lv-cat__ic { width: 20px; height: 20px; font-size: 10.5px; }
.lv-ins-title { font-size: 17px; font-weight: 900; line-height: 1.35; letter-spacing: 0.01em; }
.lv-ins-full { font-size: 11.5px; color: var(--tx3); line-height: 1.55; }
.lv-ins-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* 素材 ID（いちばん目立たせる） */
.lv-idbox {
  position: relative; display: grid; gap: 10px; padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 138, 0, 0.09), rgba(255, 138, 0, 0.02));
  box-shadow: 0 0 0 1px var(--acc-line) inset, 0 16px 40px -24px rgba(255, 138, 0, 0.5);
}
.lv-idbox__top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--acc2); letter-spacing: 0.06em; white-space: nowrap; }
.lv-idbox__top svg { width: 14px; height: 14px; }
.lv-idbox__top small { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--tx3); letter-spacing: 0.02em; }
.lv-idbox__id {
  display: block; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 1px var(--ln2) inset;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--tx); letter-spacing: 0.01em;
  word-break: break-all; user-select: all; -webkit-user-select: all; cursor: text;
}
.lv-idbox .lv-btn--primary { min-height: 40px; font-size: 13.5px; }

.lv-ai { display: grid; gap: 9px; margin-top: 12px; }
.lv-ai__intents { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ln2);
  font-size: 11.5px; font-weight: 500; color: var(--tx2); transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.lv-chip:hover { color: var(--tx); border-color: var(--ln3); }
.lv-chip[aria-checked="true"] { color: var(--tx); border-color: var(--acc-line); background: var(--acc-soft); }
.lv-ai__text {
  position: relative; padding: 11px 12px 11px 34px; border-radius: 9px; background: var(--bg2); box-shadow: 0 0 0 1px var(--ln) inset;
  font-size: 12.5px; line-height: 1.7; color: var(--tx); white-space: pre-wrap; word-break: break-word;
}
.lv-ai__text > svg { position: absolute; left: 11px; top: 13px; width: 15px; height: 15px; color: var(--acc2); }
.lv-ai__text code { font-family: var(--font-mono); font-size: 11.5px; color: var(--acc2); letter-spacing: 0; }
.lv-ai__text .lv-ai__knobs { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--tx3); letter-spacing: 0; }

/* ツマミ */
.lv-knobs { position: relative; }
.lv-knobs__note { display: flex; gap: 8px; margin: -2px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg2); font-size: 11.5px; color: var(--tx3); line-height: 1.55; }
.lv-knobs__note svg { width: 14px; height: 14px; margin-top: 2px; color: var(--tx2); }
.lv-kg { border-radius: 9px; background: var(--bg2); box-shadow: 0 0 0 1px var(--ln) inset; }
.lv-kg + .lv-kg { margin-top: 6px; }
.lv-kg > summary {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; color: var(--tx2); user-select: none; -webkit-user-select: none;
}
.lv-kg > summary::-webkit-details-marker { display: none; }
.lv-kg > summary svg { width: 13px; height: 13px; color: var(--tx4); transform: rotate(-90deg); transition: transform 0.2s; }
.lv-kg[open] > summary svg { transform: none; }
.lv-kg > summary:hover { color: var(--tx); }
.lv-kg__n { margin-left: auto; font-family: var(--font-en); font-size: 10.5px; font-weight: 600; color: var(--tx4); }
.lv-kg__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.lv-kg__body { display: grid; gap: 12px; padding: 4px 10px 12px; }

.lv-k { display: grid; gap: 6px; min-width: 0; }
.lv-k__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-k__name { display: grid; min-width: 0; flex: 1; }
.lv-k__label { font-size: 12px; font-weight: 500; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-k__hint { font-size: 10.5px; color: var(--tx4); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-k.is-changed .lv-k__label { color: var(--tx); }
.lv-k.is-changed .lv-k__label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.lv-k__undo { display: none; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--tx3); flex: none; }
.lv-k__undo svg { width: 13px; height: 13px; }
.lv-k__undo:hover { background: var(--bg4); color: var(--tx); }
.lv-k.is-changed .lv-k__undo { display: inline-grid; }
.lv-k__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-k__side { display: flex; align-items: center; gap: 5px; flex: none; }
.lv-k__unit { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx4); min-width: 14px; letter-spacing: 0; }

.lv-in {
  height: 28px; min-width: 0; padding: 0 8px; border-radius: 7px; border: 1px solid var(--ln2); background: var(--bg1);
  color: var(--tx); font: inherit; font-size: 12px; outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.lv-in:focus { border-color: var(--acc-line); box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.1); }
.lv-in::placeholder { color: var(--tx4); }
.lv-in--num { width: 68px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; }
.lv-in--num::-webkit-inner-spin-button { opacity: 0.4; }
.lv-in--mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; }
.lv-in--full { width: 100%; }
select.lv-in {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; max-width: 100%;
  background: var(--bg1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238f857b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 12px no-repeat;
}
select.lv-in option { background: #1c1916; color: var(--tx); }

.lv-range {
  --p: 50%;
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 20px; background: transparent; cursor: pointer; margin: 0;
}
.lv-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--acc) 0 var(--p), rgba(255, 236, 214, 0.14) var(--p) 100%);
}
.lv-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 236, 214, 0.14); }
.lv-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--acc); }
.lv-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff4e6;
  box-shadow: 0 0 0 3px var(--acc), 0 2px 6px rgba(0, 0, 0, 0.6); transition: transform 0.15s;
}
.lv-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff4e6; box-shadow: 0 0 0 3px var(--acc); }
.lv-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.lv-range:focus-visible { outline: none; }
.lv-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--acc), 0 0 0 7px rgba(255, 138, 0, 0.25); }
.lv-k.is-unset .lv-range::-webkit-slider-thumb { background: #6d655e; box-shadow: 0 0 0 3px #4a433d; }
.lv-k.is-unset .lv-range::-webkit-slider-runnable-track { background: rgba(255, 236, 214, 0.1); }

.lv-color { position: relative; width: 28px; height: 28px; flex: none; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px var(--ln3) inset; }
.lv-color::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(#777 0 25%, #bbb 0 50%) 0 0 / 8px 8px; }
.lv-color i { position: absolute; inset: 0; background: var(--c, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; border-radius: 7px; }
.lv-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lv-k__row .lv-in--mono { flex: 1; }

.lv-switch { position: relative; width: 36px; height: 20px; flex: none; }
.lv-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.lv-switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 236, 214, 0.14); transition: background 0.2s; }
.lv-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff4e6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform 0.22s var(--ease-out); }
.lv-switch input:checked + i { background: var(--acc); }
.lv-switch input:checked + i::after { transform: translateX(16px); }
.lv-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.35); }

.lv-knobs__actions { display: flex; gap: 6px; margin-top: 10px; }
.lv-knobs__actions .lv-btn { flex: 1; }
.lv-knobs.is-locked .lv-knobs__body { opacity: 0.32; filter: saturate(0.4); pointer-events: none; user-select: none; -webkit-user-select: none; max-height: 380px; overflow: hidden; mask-image: linear-gradient(180deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); }
.lv-knobs--empty { min-height: 230px; }
.lv-knobs__veil {
  position: absolute; left: 14px; right: 14px; top: 54px; z-index: 3;
  display: grid; justify-items: center; gap: 10px; padding: 18px 16px; border-radius: 12px; text-align: center;
  background: rgba(20, 17, 15, 0.92); box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.3) inset, 0 20px 40px -18px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lv-knobs__veil .lv-lockbar__ic { width: 38px; height: 38px; }
.lv-knobs__veil p { font-size: 12.5px; font-weight: 700; line-height: 1.6; text-wrap: balance; }
.lv-knobs__veil small { display: block; font-size: 11px; font-weight: 500; color: var(--tx3); }
.lv-knobs__veil small a { color: var(--acc2); text-decoration: underline; text-underline-offset: 2px; }

.lv-desc { display: grid; gap: 10px; }
.lv-desc dt { font-size: 11px; font-weight: 700; color: var(--tx3); letter-spacing: 0.04em; }
.lv-desc dd { margin: 3px 0 0; font-size: 12.5px; color: var(--tx2); line-height: 1.75; white-space: pre-line; }
.lv-lic { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx2); }
.lv-lic code { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx4); letter-spacing: 0; }

.lv-adv > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--tx3);
}
.lv-adv > summary::-webkit-details-marker { display: none; }
.lv-adv > summary svg { width: 13px; height: 13px; }
.lv-adv > summary .lv-adv__chev { margin-left: auto; transform: rotate(-90deg); transition: transform 0.2s; }
.lv-adv[open] > summary .lv-adv__chev { transform: none; }
.lv-adv > summary:hover { color: var(--tx2); }
.lv-adv__body { display: grid; gap: 8px; margin-top: 12px; }
.lv-adv__lead { font-size: 11.5px; color: var(--tx3); line-height: 1.6; }
.lv-cmd {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; height: 36px; border-radius: 8px;
  background: #0a0908; box-shadow: 0 0 0 1px var(--ln2) inset;
}
.lv-cmd code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--tx); white-space: nowrap; overflow-x: auto; letter-spacing: 0; scrollbar-width: none; }
.lv-cmd code::before { content: "$ "; color: var(--tx4); }
.lv-cmd .lv-tbtn { width: 28px; height: 28px; }

/* ───────────── 下部ステータスバー・デモ切り替え・トースト ───────────── */
.lv-status {
  display: flex; align-items: center; gap: 18px; padding: 0 14px; min-width: 0; overflow: hidden;
  border-top: 1px solid var(--ln); background: #090807; font-size: 11px; color: var(--tx3); white-space: nowrap;
}
.lv-status__count { font-family: var(--font-en); flex: none; }
.lv-status__keys { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
.lv-status__keys > span { display: inline-flex; align-items: center; gap: 3px; }
.lv-status__keys .lv-kbd { height: 16px; min-width: 16px; font-size: 9.5px; margin-right: 2px; }

.lv-mtabs { display: none; }

.lv-toast {
  position: fixed; left: 50%; bottom: calc(var(--status-h) + 18px); z-index: 120;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px 10px 12px; border-radius: 12px;
  background: rgba(24, 20, 17, 0.97); box-shadow: 0 0 0 1px var(--ln2) inset, 0 18px 50px -12px rgba(0, 0, 0, 0.85);
  font-size: 12.5px; font-weight: 700; color: var(--tx); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px) scale(0.98); transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.lv-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.lv-toast__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(143, 220, 160, 0.14); color: var(--free); flex: none; }
.lv-toast__ic svg { width: 13px; height: 13px; }
.lv-toast code { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--acc2); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

/* ───────────── 幅に合わせた調整 ───────────── */
@media (max-width: 1500px) {
  .lv { --insp-w: 320px; --list-w: 248px; }
}
/* 分類レールをアイコンだけに（名前はツールチップ） */
@media (max-width: 1360px) {
  .lv { --rail-w: 52px; }
  .lv-rail .lv-pane__head { justify-content: center; padding: 0; }
  .lv-rail .lv-pane__title { display: none; }
  .lv-rail .lv-src { margin: 0; }
  .lv-rail__scroll { padding: 6px 5px 14px; }
  .lv-rail__glabel { height: 1px; margin: 8px 6px 6px; padding: 0; background: var(--ln); color: transparent; font-size: 0; }
  .lv-rail__group + .lv-rail__group { margin-top: 0; }
  .lv-cat { justify-content: center; height: 36px; padding: 0; }
  .lv-cat__label, .lv-cat__n, .lv-cat .lv-tag { display: none; }
  .lv-cat__ic { width: 28px; height: 28px; font-size: 12.5px; }
  .lv-cat[aria-current="true"]::before { left: -5px; }
  .lv-status__keys > span:nth-child(5) { display: none; }
}
@media (max-width: 1120px) {
  .lv { --insp-w: 296px; --list-w: 236px; }
  .lv-toplink span { display: none; }
  .lv-toplink { padding: 0 8px; }
  .lv-top__sep, .lv-brand__name { display: none; }
  .lv-status__keys > span:nth-child(n + 4) { display: none; }
}

/* ───────────── モバイル（3 ペインをタブで切り替え） ───────────── */
@media (max-width: 860px) {
  .lv { --top-h: 52px; --status-h: 0px; --tabs-h: 58px; grid-template-rows: var(--top-h) minmax(0, 1fr); }
  .lv-status { display: none; }
  .lv-top { gap: 10px; padding: 0 10px 0 12px; }
  .lv-brand__name { display: none; }
  .lv-top__sep { display: block; }
  .lv-top__title { font-size: 13px; }
  .lv-filter { display: none; }
  .lv-toplink { display: none; }
  .lv-top__searchbtn { display: inline-grid; }
  .lv-search {
    position: absolute; left: 8px; right: 8px; top: 8px; z-index: 5; height: 36px; max-width: none; margin: 0;
    display: none; background: var(--bg3);
  }
  .lv.is-searching .lv-search { display: flex; }
  .lv-search__kbd { display: none; }
  .lv-search input::-webkit-search-cancel-button { display: none; }
  .lv-search__close { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 2px; color: var(--tx2); }
  .lv-search__close svg { width: 16px; height: 16px; }
  .lv-acct__meta { display: none; }
  .lv-acct__btn { padding: 0 4px; }
  .lv-acct__btn.is-guest { padding: 0 14px; }
  .lv-pop { position: fixed; left: 10px; right: 10px; top: calc(var(--top-h) + 6px); width: auto; }

  .lv-main {
    display: block; position: relative; padding: 0; gap: 0;
    padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
  }
  .lv-pane { position: absolute; inset: 0 0 calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; display: none; }
  .lv-rail { display: none !important; }
  .lv[data-mview="list"] .lv-list,
  .lv[data-mview="preview"] .lv-view,
  .lv[data-mview="insp"] .lv-insp { display: flex; }
  .lv[data-mview="insp"] .lv-insp__scroll > :not(.lv-knobs) { display: none; }
  .lv[data-mview="insp"] .lv-insp__scroll { padding-top: 0; }
  .lv-mini:not([hidden]) { display: grid; position: fixed; z-index: 55; left: 50%; width: min(calc(100vw - 20px), 260px); top: calc(var(--top-h) + 6px); transform: translateX(-50%); gap: 0; padding: 5px; border: 1px solid var(--ln2); border-radius: 10px; background: #0b0a09; box-shadow: 0 12px 28px #0009; }
  .lv-mini__open { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px 7px; font-size: 11px; font-weight: 700; color: var(--tx2); text-align: left; }
  .lv-mini__open span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lv-mini__open span:last-child { flex: none; color: var(--acc2); }
  .lv-mini__surface { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: #000; }
  .lv-mini__jacket { width: 100%; height: 100%; object-fit: contain; }
  .lv[data-mview="list"] .lv-mini { top: calc(var(--top-h) + 132px); }
  .lv[data-mview="insp"] .lv-insp__scroll, .lv[data-mview="list"] .lv-list__scroll { scroll-padding-top: 190px; }
  .lv[data-mview="insp"] .lv-insp__scroll { padding-top: 180px; }
  .lv[data-mview="list"]:has(.lv-mini:not([hidden])) .lv-list__scroll { padding-top: 180px; }
  .lv-player:not([hidden]) { display: flex; position: fixed; z-index: 65; left: 8px; right: 8px; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 8px); align-items: center; gap: 7px; min-height: 62px; padding: 8px; border: 1px solid var(--ln2); border-radius: 12px; background: #211b17; box-shadow: 0 12px 28px #000b; }
  .lv-player__open { display: grid; flex: 1; min-width: 0; gap: 2px; text-align: left; }
  .lv-player__open strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
  .lv-player__open > span:not(.lv-player__progress) { font-size: 10px; color: var(--tx3); }
  .lv-player__progress { height: 3px; border-radius: 3px; background: var(--bg4); }
  .lv-player__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--acc2); }
  .lv-player__control { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--acc2); background: var(--acc-soft); }
  .lv-player__control svg { width: 16px; height: 16px; }

  .lv-mfilter { display: flex; padding: 10px 10px 0; }
  .lv-mfilter .lv-seg { width: 100%; }
  .lv-mfilter .lv-seg button { flex: 1; justify-content: center; }
  .lv-mcats {
    display: flex; gap: 6px; padding: 10px 10px 8px; overflow-x: auto; overscroll-behavior-x: contain; flex: none;
    scrollbar-width: none; border-bottom: 1px solid var(--ln);
  }
  .lv-mcats::-webkit-scrollbar { display: none; }
  .lv-mcat {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px 0 5px; border-radius: 999px;
    border: 1px solid var(--ln2); background: var(--bg2); font-size: 12.5px; font-weight: 700; color: var(--tx2); white-space: nowrap;
  }
  .lv-mcat .lv-cat__ic { width: 22px; height: 22px; border-radius: 50%; }
  .lv-mcat small { font-family: var(--font-en); font-size: 11px; font-weight: 600; color: var(--tx4); }
  .lv-mcat[aria-current="true"] { border-color: var(--acc-line); background: var(--acc-soft); color: var(--tx); }
  .lv-mcat[aria-current="true"] .lv-cat__ic { background: var(--acc); color: #1a0d00; }
  .lv-mcat.is-soon { color: var(--tx4); }
  .lv-mcat.is-soon .lv-cat__ic { opacity: 0.45; }
  .lv-list__head { height: 38px; }
  .lv-item { padding: 8px 8px 8px 6px; }
  .lv-item__th { width: 84px; }
  .lv-item__th--sq { width: 44px; margin: 0 20px; }

  .lv-view__bar { height: 42px; }
  .lv-view__spec { display: none; }
  .lv-view__wrap { flex: none; height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .lv-view.is-audio .lv-view__wrap { aspect-ratio: auto; height: auto; display: block; overflow: visible; }
  .lv-view.is-audio .lv-audio { position: relative; inset: auto; }
  .lv-audio__bg { inset: 0; }
  .lv-frame { border-radius: 0; box-shadow: none; }
  .lv-view.is-locked .lv-view__wrap { padding-bottom: 0; }
  .lv-lockbar {
    position: relative; left: auto; bottom: auto; transform: none; flex: none; flex-wrap: wrap; margin: 0; width: 100%; max-width: none;
    border-radius: 0; animation: none; padding: 10px 12px; box-shadow: 0 1px 0 rgba(255, 196, 107, 0.2) inset, 0 -1px 0 rgba(255, 196, 107, 0.2) inset;
  }
  .lv-lockbar__tx { flex: 1; min-width: 180px; }
  .lv-audio { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 18px 18px 16px; text-align: center; }
  .lv-audio__jacket { width: 140px; }
  .lv-audio__main { width: 100%; justify-items: center; }
  .lv-audio__tags, .lv-audio__ctrl { justify-content: center; }
  .lv-wave { width: 100%; height: 46px; }
  .lv-tl { padding: 6px 10px 10px; }

  .lv-mid { display: grid; align-content: start; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 64px; border-top: 1px solid var(--ln); }
  .lv-mid__title { font-size: 15px; font-weight: 900; line-height: 1.35; }
  .lv-mid__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .lv-mid .lv-idbox { gap: 8px; }
  .lv-mid__more { justify-self: start; }

  .lv-insp__scroll { padding-bottom: 64px; }
  .lv-list__scroll { padding-bottom: 64px; }
  .lv-knobs__veil { top: 50px; }

  .lv-mtabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(3, 1fr);
    height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--ln2); background: rgba(12, 10, 9, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .lv-mtabs button { display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--tx3); }
  .lv-mtabs svg { width: 20px; height: 20px; }
  .lv-mtabs button[aria-selected="true"] { color: var(--acc2); }
  .lv-mtabs button[aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(255, 138, 0, 0.6)); }

  .lv-toast { bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .lv-pop, .lv-lockbar { animation: none; }
  .lv-eq i, .lv-fbadge--live::before { animation: none; }
}

/* ステータスバーの規約リンク（メイン追記 2026-09-27）。デモの切り替え（本番では消す）と重ならないよう右に余白 */
.lv-status__legal { margin-left: auto; display: flex; gap: 14px; flex: none; }
.lv-status__legal a { color: var(--muted); transition: color 0.3s; white-space: nowrap; }
.lv-status__legal a:hover { color: var(--orange-2); }
@media (max-width: 1100px) { .lv-status__legal a:nth-child(n+2) { display: none; } }