/* 风格影片（films 开发者，SPEC §19、§20.17）：画廊、详情抽屉、创建表单、影片作品详情。
   只用 app.css 的设计变量，类名一律 f-（画廊、表单）和 fd-（作品详情）开头。手机优先，360px 宽可用，不出现横向滚动。 */

/* ================================================================ 画廊 */

.f-page { min-width: 0; }

/* ---------------------------------------------------------------- 头图：两行缓缓滑动的海报 + 暗色幕布 */

.f-hero {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; margin: 4px 0 0;
  min-height: 300px; display: flex; align-items: flex-end; background: #0B0B11; color: #fff;
  box-shadow: var(--shadow); outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px;
}
.f-reel {
  position: absolute; inset: -40px -60px; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  transform: rotate(-7deg); opacity: .92;
}
.f-reel-row { display: flex; gap: 12px; width: max-content; animation: f-marquee 90s linear infinite; will-change: transform; }
.f-reel-row.b { animation-direction: reverse; animation-duration: 110s; margin-left: -140px; }
.f-reel-tile { width: 232px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; flex: none; background: #1A1A22; position: relative; }
.f-reel-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-reel-tile .f-ph span { font-size: 15px; }
@keyframes f-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.f-hero-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 260px at 0% 100%, rgba(254, 44, 85, .32), transparent 70%),
    radial-gradient(420px 240px at 38% 0%, rgba(37, 244, 238, .14), transparent 70%),
    linear-gradient(90deg, rgba(9, 9, 14, .95) 0%, rgba(9, 9, 14, .86) 36%, rgba(9, 9, 14, .42) 68%, rgba(9, 9, 14, .18) 100%);
}
.f-hero-text { position: relative; padding: 34px 40px 32px; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.f-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 750; letter-spacing: .18em; color: var(--cyan); text-transform: uppercase; }
.f-eyebrow i { width: 22px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.f-hero h1 { font-size: 42px; line-height: 1.08; font-weight: 850; letter-spacing: -.01em; outline: none; }
.f-hero-sub { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.65; max-width: 520px; }
.f-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 2px; }
.f-hero-meta b { color: #fff; font-size: 19px; font-weight: 800; margin-right: 2px; }
.f-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.f-hero-btn { background: #fff; color: #111; border-color: #fff; }
.f-hero-btn:hover { background: #F1F1F4; border-color: #F1F1F4; color: #111; }
.f-hero-btn .ic { color: var(--accent-solid); }
.f-hero-btn.ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.f-hero-btn.ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.f-hero-btn.ghost .ic { color: #fff; }
@media (max-width: 719px) {
  .f-hero { min-height: 0; border-radius: 20px; flex-direction: column; align-items: stretch; }
  .f-reel { position: relative; inset: auto; height: 172px; margin: -18px -40px 0; transform: rotate(-6deg); flex: none; }
  .f-reel-tile { width: 168px; border-radius: 10px; }
  .f-reel-row { gap: 10px; }
  .f-hero-veil { background: linear-gradient(180deg, rgba(9, 9, 14, .04) 0, rgba(9, 9, 14, .3) 64px, rgba(9, 9, 14, .9) 128px, #09090E 168px), radial-gradient(360px 220px at 0% 100%, rgba(254, 44, 85, .3), transparent 70%); }
  .f-hero-text { padding: 0 20px 22px; margin-top: -40px; gap: 10px; }
  .f-hero h1 { font-size: 32px; }
  .f-hero-sub { font-size: 14px; }
  .f-hero-actions .btn { flex: 1 1 0; }
}

/* ---------------------------------------------------------------- 搜索 + 分类（吸顶） */

.f-bar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 20; margin: 14px -16px 4px; padding: 10px 16px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
@media (min-width: 900px) {
  .f-bar { top: 0; margin: 18px -12px 6px; padding: 12px; flex-direction: row; align-items: center; border-radius: 0 0 16px 16px; }
  .f-search { flex: 0 0 300px; }
}
.f-search {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 13px; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface); color: var(--text-3);
  transition: border-color .15s, box-shadow .15s;
}
.f-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.f-search-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; height: 100%; padding: 0; }
.f-search-in::placeholder { color: var(--text-3); }
.f-search-in::-webkit-search-cancel-button { display: none; }
.f-search-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--sunken); color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.f-search-x:hover { color: var(--text); }
.f-chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; padding: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.f-chips::-webkit-scrollbar { display: none; }
.f-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.f-chip:hover { border-color: var(--border-strong); color: var(--text); }
.f-chip .n { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.f-chip[aria-checked="true"] { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-text); }
.f-chip[aria-checked="true"] .n { color: inherit; opacity: .65; }
.f-chips > .f-chip:last-child { margin-right: 24px; }
@media (max-width: 899px) {
  .f-search-in { font-size: 16px; }
  .f-bar { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .f-search { height: 42px; }
  .f-chip { height: 33px; padding: 0 12px; font-size: 13px; }
}

.f-notes:empty { display: none; }
.f-notes { margin: 4px 0 6px; }
.f-notes > .callout { margin-top: 10px; }
.f-result { font-size: 13px; color: var(--text-3); margin: 8px 2px 0; }

/* ---------------------------------------------------------------- 分类 + 卡片 */

.f-sections { display: flex; flex-direction: column; gap: 34px; margin-top: 14px; min-width: 0; }
.f-cat { min-width: 0; scroll-margin-top: 140px; }
.f-cat-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 14px; min-width: 0; }
.f-cat-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.005em; flex: none; }
.f-cat-en { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-cat-n { flex: none; }
@media (max-width: 599px) { .f-cat-head h2 { font-size: 19px; } .f-cat-en { letter-spacing: .08em; font-size: 10.5px; } }
.f-cat-n { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--sunken); border-radius: 999px; padding: 1px 8px; align-self: center; }
.f-cat-all { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; align-self: center; white-space: nowrap; flex: none; }
@media (min-width: 600px) { .f-cat-all { display: none; } }

.f-grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); min-width: 0; }
@media (max-width: 599px) {
  .f-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* 不筛选时：每个分类一行，横向滑动，露出下一张提示还能滑 */
  .f-sections.rows { gap: 28px; }
  .f-sections.rows .f-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px;
    margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; overscroll-behavior-x: contain;
  }
  .f-sections.rows .f-grid::-webkit-scrollbar { display: none; }
  .f-sections.rows .f-card { flex: 0 0 80%; scroll-snap-align: start; }
  .f-sections.rows .f-card:only-child { flex-basis: 100%; }
}

.f-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .f-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 2px 4px rgba(16, 18, 30, .05), 0 18px 40px rgba(16, 18, 30, .14); }
  :root[data-theme="dark"] .f-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); border-color: var(--border-strong); }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .f-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); border-color: var(--border-strong); }
}
.f-card:has(.f-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-media { position: relative; aspect-ratio: 16 / 9; background: #111116; overflow: hidden; isolation: isolate; }
.f-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease), filter .3s; }
@media (hover: hover) and (pointer: fine) { .f-card:hover .f-media > img { transform: scale(1.045); } }
.f-pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s var(--ease); z-index: 0; background: transparent; }
.f-media.playing .f-pv, .f-side-media.playing .f-pv { opacity: 1; }
.f-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .3s;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, transparent 28%, transparent 60%, rgba(0, 0, 0, .5) 100%);
}
.f-media.playing .f-shade { opacity: .55; }
.f-num {
  position: absolute; z-index: 2; top: 9px; left: 12px; font: 700 12px/1 var(--mono); letter-spacing: .1em; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55); opacity: .92;
}
.f-len, .f-lock {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: rgba(10, 10, 14, .58); color: #fff; font-size: 11.5px; font-weight: 650; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.f-len { top: 8px; right: 9px; }
.f-lock { left: 9px; bottom: 9px; max-width: calc(100% - 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-lock .ic { width: 13px; height: 13px; }
.f-play {
  position: absolute; z-index: 3; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 750;
  background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: opacity .2s, transform .2s var(--ease), background .15s, color .15s;
}
.f-play .ic { width: 14px; height: 14px; }
.f-play:hover { background: #fff; }
.f-play.on, .f-play[aria-pressed="true"] { background: var(--accent-solid); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .f-card .f-play { opacity: 0; transform: translateY(4px); }
  .f-card:hover .f-play, .f-card .f-play:focus-visible, .f-card .f-play.on { opacity: 1; transform: none; }
}
.f-card.locked .f-media > img { filter: saturate(.55) brightness(.82); }
.f-body { padding: 12px 15px 15px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.f-name { font-size: 16.5px; font-weight: 780; line-height: 1.3; min-width: 0; }
.f-link { color: var(--text); outline: none; }
.f-link:hover { text-decoration: none; color: var(--text); }
.f-en { font-size: 12px; color: var(--text-3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-line {
  font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 6px 0 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.f-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 10px; min-width: 0; }
.f-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
  background: var(--sunken); color: var(--text-2); font-size: 11.5px; font-weight: 620; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.f-tag .ic { width: 12px; height: 12px; }
.f-tag.slow { background: var(--warn-soft); color: var(--warn); }
.f-tag.mat { background: var(--info-soft); color: var(--info); }
.f-tags.lg { padding-top: 4px; gap: 6px; }
.f-tags.lg .f-tag { height: 26px; padding: 0 10px; font-size: 12.5px; }

/* 海报加载失败时的替身 */
.f-ph {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center;
  background: radial-gradient(120% 90% at 20% 10%, hsl(var(--h, 330) 85% 62%), transparent 60%), linear-gradient(135deg, hsl(var(--h, 330) 60% 32%), hsl(calc(var(--h, 330) + 60) 55% 18%));
}
.f-ph span { color: #fff; font-size: 20px; font-weight: 850; letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }

/* 骨架 */
.f-skel { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); }
.f-skel-card { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; padding-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.f-skel-card .sk { margin: 0 15px; }
.f-skel-card .sk.f-skel-media { margin: 0 0 4px; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.sk.w30 { width: 30%; }
.sk.w80 { width: 80%; }

/* 署名 */
.f-credit { margin-top: 44px; padding: 18px 2px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); line-height: 1.7; display: flex; flex-direction: column; gap: 2px; }
.f-credit a { color: var(--text-2); font-weight: 600; }

/* ================================================================ 详情抽屉（桌面右侧滑出，手机底部弹出） */

dialog.f-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; padding: 0; border: 0;
  width: min(600px, 100vw); height: 100dvh; max-width: none; max-height: none;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
}
dialog.f-drawer:not([open]) { display: none; }
dialog.f-drawer[open] { animation: f-dr-in .34s var(--ease); }
dialog.f-drawer.closing { animation: f-dr-out .22s var(--ease) forwards; }
dialog.f-drawer::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s; }
@keyframes f-dr-in { from { transform: translateX(48px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes f-dr-out { to { transform: translateX(40px); opacity: 0; } }
.f-dr-top { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex: none; }
.f-dr-pos { font-size: 12.5px; margin-left: 4px; }
.f-dr-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.f-dr-media { background: #000; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.f-dr-media .f-dv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.f-dr-media div.f-dv { object-fit: initial; }
.f-dr-body { padding: 20px 24px 30px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.f-dr-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 750; letter-spacing: .08em; color: var(--accent-ink); }
.f-dr-num { font-family: var(--mono); padding: 2px 7px; border-radius: 6px; background: var(--accent-soft); letter-spacing: .06em; }
.f-dr-title { font-size: 30px; line-height: 1.15; font-weight: 850; letter-spacing: -.01em; margin-top: 2px; }
.f-dr-en { font-size: 14px; color: var(--text-3); margin-top: -6px; letter-spacing: .02em; }
.f-dr-film { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.f-dr-film em { font-style: italic; font-family: Georgia, "Times New Roman", "Songti SC", serif; font-size: 14px; color: var(--text); }
.f-dr-line { font-size: 16px; line-height: 1.65; color: var(--text); margin-top: 4px; overflow-wrap: anywhere; }
.f-dr-line-en { font-size: 13.5px; line-height: 1.55; color: var(--text-3); font-style: italic; margin-top: -4px; overflow-wrap: anywhere; }
.f-dr-body > .callout { margin-top: 4px; }
.f-sec-t { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 14px; }
.f-essence { display: flex; flex-direction: column; gap: 8px; }
.f-essence p {
  font-size: 14.5px; line-height: 1.7; color: var(--text); padding: 12px 15px; background: var(--surface-2);
  border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; overflow-wrap: anywhere;
}
.f-essence p.row-error, .f-essence p.muted { border-left-color: var(--border-strong); color: var(--text-3); }
details.f-doc { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); min-width: 0; }
details.f-doc + details.f-doc { margin-top: 0; }
details.f-doc > summary {
  display: flex; align-items: center; gap: 8px; padding: 13px 14px; cursor: pointer; list-style: none; font-weight: 680; font-size: 14.5px;
  border-radius: 13px; user-select: none; -webkit-user-select: none;
}
details.f-doc > summary::-webkit-details-marker { display: none; }
details.f-doc > summary:hover { background: var(--surface-2); }
details.f-doc > summary .muted { margin-left: auto; font-size: 12px; font-weight: 600; }
.f-doc-chev { color: var(--text-3); transition: transform .2s var(--ease); }
details.f-doc[open] > summary .f-doc-chev { transform: rotate(90deg); }
details.f-doc[open] > summary { border-bottom: 1px solid var(--border); border-radius: 13px 13px 0 0; }
details.f-doc > .f-md { padding: 14px 16px 16px; }
.f-md { font-size: 14px; line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
.f-md h1 { font-size: 19px; }
.f-md h2 { font-size: 16.5px; margin-top: 18px; }
.f-md h3 { font-size: 15px; margin-top: 14px; }
.f-md code { font-size: 12.5px; }
.f-md pre { max-width: 100%; overflow-x: auto; }
.f-md-table { max-width: 100%; overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; }
.f-md-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; line-height: 1.5; }
.f-md-table th { text-align: left; font-weight: 700; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.f-md-table th, .f-md-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.f-md-table tr:last-child td { border-bottom: 0; }
.f-dr-foot { flex: none; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.f-use { width: 100%; }
@media (max-width: 599px) {
  dialog.f-drawer {
    inset: auto 0 0 0; margin: auto 0 0; width: 100%; height: auto; max-height: calc(100dvh - 28px);
    border-radius: 22px 22px 0 0;
  }
  dialog.f-drawer[open] { animation: sheet-in .32s var(--ease); }
  dialog.f-drawer.closing { animation: f-sheet-out .22s var(--ease) forwards; }
  .f-dr-top { padding: 8px 10px; }
  .f-dr-body { padding: 16px 18px 24px; }
  .f-dr-title { font-size: 25px; }
  .f-dr-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
}
@keyframes f-sheet-out { to { transform: translateY(50px); opacity: 0; } }

/* ================================================================ 换风格对话框 */

.f-pick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); margin-top: 12px; max-height: min(60vh, 560px); overflow-y: auto; padding: 2px; }
.f-pick > .v-empty-mini { grid-column: 1 / -1; }
.f-pick-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 0 0 9px; min-width: 0; cursor: pointer;
  border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); overflow: hidden; font: inherit; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.f-pick-item:hover { border-color: var(--border-strong); }
.f-pick-item.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.f-pick-item.locked { opacity: .62; }
.f-pick-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #111116; margin-bottom: 6px; }
.f-pick-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.f-pick-lock { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; }
.f-pick-name { font-size: 13.5px; font-weight: 720; padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-pick-cat { font-size: 11.5px; color: var(--text-3); padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ 新建风格影片 */

.f-new-head { margin-bottom: 14px; }
.f-new { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.f-new-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; order: 2; }
.f-new-main > .callout { margin-top: 0; }
/* 手机：风格卡片在最上面，「预计」放在表单后面、「开拍」按钮前面（开拍前能看到耗时和费用） */
.f-new-side { display: contents; }
.f-new-side > :first-child { order: 1; }
.f-new-side > .f-est-card { order: 3; }
@media (max-width: 999.98px) {
  .f-new-main { display: contents; }
  .f-new-main > * { order: 2; }
  .f-new-main > .f-submit { order: 4; }
}
@media (min-width: 1000px) {
  .f-new { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
  .f-new-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; grid-column: 2; grid-row: 1; }
  .f-new-main { grid-column: 1; grid-row: 1; }
}
.f-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); min-width: 0; }
.f-side-media { position: relative; aspect-ratio: 16 / 9; background: #111116; overflow: hidden; }
.f-side-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.f-side-media .f-pv { z-index: 1; }
.f-play.on-media { z-index: 2; }
.f-side-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f-side-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--accent-ink); text-transform: uppercase; }
.f-side-name { font-size: 21px; font-weight: 850; line-height: 1.25; }
.f-side-en { font-size: 12.5px; color: var(--text-3); }
.f-side-line { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 6px; overflow-wrap: anywhere; }
.f-side-body .f-tags { padding-top: 8px; }
.f-side-body .btn-row { margin-top: 12px; }
@media (max-width: 599px) {
  .f-side-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: stretch; }
  .f-side-media { aspect-ratio: auto; min-height: 100%; }
  .f-side-body { padding: 11px 12px 12px; }
  .f-side-name { font-size: 17px; }
  .f-side-line, .f-side-body .f-tags { display: none; }
  .f-side-body .btn-row { margin-top: 8px; gap: 6px; }
  .f-side-body .btn-row .btn { height: 30px; padding: 0 9px; font-size: 12.5px; }
  .f-play.on-media { right: 6px; bottom: 6px; height: 26px; padding: 0 9px 0 7px; font-size: 11.5px; }
}

.f-est-card { padding-top: 14px; padding-bottom: 6px; }
.f-est-t { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.f-est { min-width: 0; }
.f-est-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 11px 0; align-items: start; }
.f-est-row + .f-est-row { border-top: 1px solid var(--border); }
.f-est-row > .ic { color: var(--accent-ink); margin-top: 1px; }
.f-est-v { font-size: 14.5px; font-weight: 720; color: var(--text); }
.f-est-k { font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.f-est-row.bad > .ic, .f-est-row.bad .f-est-v { color: var(--bad); }

.f-sec { min-width: 0; }
.f-sec-h { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 780; margin-bottom: 14px; }
.f-prompt { min-height: 168px; font-size: 15.5px; line-height: 1.65; resize: vertical; }
.f-examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f-ex-k { font-size: 12.5px; color: var(--text-3); font-weight: 600; }

.f-dur { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; min-width: 0; }
.f-dur-val { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.f-dur-val b { font-size: 20px; font-weight: 850; color: var(--accent-ink); margin-right: 1px; }
input.f-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0;
  --fill: 50%;
}
input.f-range:focus-visible { outline: none; }
input.f-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--fill), var(--sunken) var(--fill)); }
input.f-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--fill), var(--sunken) var(--fill)); }
input.f-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .22); transition: transform .15s;
}
input.f-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
input.f-range:active::-webkit-slider-thumb { transform: scale(1.12); }
input.f-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-ring); }
.f-marks { display: flex; justify-content: space-between; gap: 2px; }
.f-mark {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 680; color: var(--text-3); padding: 4px 7px; border-radius: 7px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.f-mark:hover { color: var(--text); background: var(--sunken); }
.f-mark[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }

.f-aspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.f-aspect {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "shape t" "shape s"; gap: 1px 12px; align-items: center;
  padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text);
  text-align: left; cursor: pointer; font: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.f-aspect:hover { border-color: var(--border-strong); }
.f-aspect[aria-checked="true"] { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.f-aspect-shape { grid-area: shape; border: 2px solid var(--text-3); border-radius: 5px; justify-self: center; }
.f-aspect-shape.tall { width: 20px; height: 34px; }
.f-aspect-shape.wide { width: 34px; height: 20px; }
.f-aspect[aria-checked="true"] .f-aspect-shape { border-color: var(--accent); background: var(--accent-soft); }
.f-aspect-t { grid-area: t; font-size: 14.5px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-aspect-s { grid-area: s; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.f-submit { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 4px 0 28px; }
@media (min-width: 640px) { .f-submit { flex-direction: row; align-items: center; justify-content: flex-end; } .f-submit .v-hint { flex: 1; } .f-go { min-width: 200px; } }
.f-new-skel .sk-card { min-height: 220px; }

/* ================================================================ 影片作品详情 */

.fd-style-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2) !important; font-size: 12.5px; font-weight: 680;
}
.fd-style-chip:hover { border-color: var(--border-strong); text-decoration: none; color: var(--text) !important; }
.fd-style-chip img { width: 34px; height: 19px; border-radius: 999px; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- 制作中：暗色进度卡 */

.fd-live { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; margin-bottom: 14px; background: #0D0D14; color: #fff; box-shadow: var(--shadow); outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px; }
.fd-live-bg { position: absolute; inset: -30px; z-index: -2; background-size: cover; background-position: center; filter: blur(26px) saturate(1.35); transform: scale(1.08); opacity: .85; }
.fd-live::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 16, .55), rgba(10, 10, 16, .86)), radial-gradient(400px 200px at 0% 0%, rgba(254, 44, 85, .22), transparent 70%); }
.fd-live-in { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fd-live-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fd-live-top > .crab { flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.fd-live-t { flex: 1; min-width: 0; }
.fd-live-k { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; }
.fd-live-h { font-size: 20px; font-weight: 820; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.fd-cancel { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); color: #fff; flex: none; }
.fd-cancel:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .42); color: #fff; }
.fd-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.fd-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-2), #8C7BFF 55%, var(--brand)); transition: width .8s var(--ease); box-shadow: 0 0 12px rgba(37, 244, 238, .45); }
.fd-live.queued .fd-bar > i { width: 100% !important; opacity: .45; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 8px, rgba(255, 255, 255, .15) 8px 16px); background-size: 22.6px 100%; animation: stripes .9s linear infinite; box-shadow: none; }
.fd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fd-st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); font-size: 12px; font-weight: 650; }
.fd-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.fd-st.done { color: rgba(255, 255, 255, .86); background: rgba(111, 212, 154, .14); }
.fd-st.done i { background: #6FD49A; opacity: 1; }
.fd-st.on { background: #fff; color: #111; }
.fd-st.on i { background: var(--brand); opacity: 1; animation: pulse 1.4s infinite; }
.fd-live-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .74); min-width: 0; }
.fd-live-foot > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.fd-live-last { flex: 1 1 220px; max-width: 100%; color: rgba(255, 255, 255, .9); }
.fd-live-last > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fd-live-last .ic { color: var(--cyan); }
.fd-live-note { font-size: 12px; color: rgba(255, 255, 255, .5); }
@media (max-width: 599px) {
  .fd-live-in { padding: 16px 16px 14px; gap: 12px; }
  .fd-live-h { font-size: 17px; }
  .fd-live-top { flex-wrap: wrap; }
  .fd-st { height: 24px; padding: 0 8px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------- 布局 */

.fd-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fd-col-main, .fd-col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) { .fd-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 16px 22px; } }
/* 单栏时：成片 → 让 AI 修改 → 发布 → 工作记录 → 文档 → 需求 → 任务（操作靠前） */
@media (max-width: 1099px) {
  .fd-grid { display: flex; flex-direction: column; align-items: stretch; }
  .fd-col-main, .fd-col-side { display: contents; }
  .fd-col-main > *, .fd-col-side > * { min-width: 0; max-width: 100%; }
  .fd-player { order: 1; }
  .fd-rev-host { order: 2; }
  .fd-pub-host { order: 3; }
  .fd-activity { order: 4; }
  .fd-docs { order: 5; }
  .fd-brief { order: 6; }
  .fd-grid .v-area-jobs { order: 7; }
}

/* ---------------------------------------------------------------- 成片 + 版本 */

.fd-vers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 12px; padding: 2px; }
.fd-vers::-webkit-scrollbar { display: none; }
.fd-ver {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; flex: none; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 680;
}
.fd-ver:hover { color: var(--text); border-color: var(--text-3); }
.fd-ver.on { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-text); }
.fd-ver-cur { font-size: 10.5px; font-weight: 750; padding: 1px 6px; border-radius: 999px; background: var(--accent-solid); color: #fff; }
.fd-video { background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 16; width: min(100%, calc(68vh * 9 / 16)); margin: 0 auto; display: grid; }
.fd-video.wide { aspect-ratio: 16 / 9; width: 100%; }
.fd-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.fd-ver-info { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fd-ver-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.fd-ver-line > span:not(.badge) { overflow-wrap: anywhere; min-width: 0; }
.fd-ver-sum { font-size: 13.5px; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }
.fd-ver-warn { margin-top: 2px; padding: 8px 12px; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.5; align-items: flex-start; }
.fd-ver-warn .ic { margin-top: 2px; flex: none; }
.fd-ver-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.fd-ver-meta:empty { display: none; }
.fd-dl { margin-top: 12px; }
.fd-empty { width: 100%; }
.fd-empty.tall { aspect-ratio: auto; min-height: 220px; }
.fd-empty.wide { aspect-ratio: auto; min-height: 220px; }
@media (min-width: 1100px) { .fd-empty.tall { aspect-ratio: 9 / 16; width: min(100%, calc(52vh * 9 / 16)); min-height: 0; } }
.fd-empty-in { display: grid; justify-items: center; gap: 10px; }

/* ---------------------------------------------------------------- 工作记录 */

.fd-live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; color: var(--cyan-ink); }
.fd-live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: pulse-cyan 1.6s infinite; }
.fd-acts { list-style: none; margin: 0; padding: 0 2px 0 0; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.fd-act-step {
  position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 10px 0 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.fd-act-step:first-child { padding-top: 0; }
.fd-act-step > span { display: inline-flex; align-items: center; gap: 6px; }
.fd-act-step > span::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }
.fd-act { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 0; font-size: 13.5px; position: relative; }
.fd-act + .fd-act::before { content: ""; position: absolute; left: 12.5px; top: -7px; height: 14px; width: 1px; background: var(--border-strong); }
.fd-act-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--sunken); color: var(--text-2); display: grid; place-items: center; position: relative; z-index: 1; }
.fd-act-ic .ic { width: 13px; height: 13px; }
.fd-act-tx { padding-top: 3px; overflow-wrap: anywhere; color: var(--text); line-height: 1.5; }
.fd-act-at { font-size: 11.5px; color: var(--text-3); padding-top: 5px; font-family: var(--mono); }
.fd-acts.live .fd-act-step:first-child + .fd-act .fd-act-ic { background: var(--cyan-soft); color: var(--cyan-ink); animation: pulse-cyan 1.6s infinite; }
.fd-act-more { margin-top: 10px; font-size: 13px; }

/* ---------------------------------------------------------------- 文档 */

.fd-doc-tabs { margin-bottom: 12px; }
.fd-doc-v { font-size: 12.5px; }
.fd-doc-body { max-height: 380px; overflow: hidden; position: relative; min-width: 0; }
.fd-doc-body.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.fd-doc-body.open { max-height: none; }
.fd-doc-more { margin-top: 6px; font-size: 13.5px; }
.fd-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.6 var(--mono); color: var(--text-2); }

/* ---------------------------------------------------------------- 修改、需求 */

.fd-rev-row { align-items: center; }
.fd-rev-ex { margin-top: 2px; }
.fd-rev-ex .chip:disabled { opacity: .5; cursor: not-allowed; }
.fd-revise .textarea:disabled { opacity: .6; }
.fd-prompt {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 4px 12px 12px 4px; background: var(--surface-2); border-left: 3px solid var(--accent);
  font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; color: var(--text);
}
.fd-kv { font-size: 13.5px; gap: 7px 14px; }
.fd-notes { margin-top: 12px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.fd-notes p { overflow-wrap: anywhere; white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  .f-reel-row { animation: none; }
  .f-card, .f-media > img { transition: none; }
}