/* Lumarquee：影院门口。灯牌式大标题，表单像一份放映单（五卷竖排，每卷配示意图），最后撕一张入场券 */
:root{
  --bg:#0d0b0a; --panel:#15110e; --panel-2:#1d1814; --line:#f3e9d71c;
  --primary:#ffb547; --primary-bright:#ffc670; --primary-deep:#8a5f1c; --primary-soft:#2a1f12;
  --ink:#f3e9d7; --ink-dim:#b8ab95; --ink-faint:#857965; --warn:#ff6b5a;
  --radius-card:6px; --radius-ctl:4px;
  --grad-warm:linear-gradient(140deg,#ffb547,#e2563c);
  --grad-cool:linear-gradient(160deg,#ffd28a,#ffb547);
  --grad-btn:linear-gradient(#ffb547,#ffb547);
  --font-sans:Inter,system-ui,"Noto Sans Thai","Noto Sans Arabic","Leelawadee UI",Tahoma,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-head:"Bebas Neue",Inter,"PingFang SC","Microsoft YaHei",sans-serif;
  --perf:#3a2f24;
  color-scheme:dark;
}
body{background:radial-gradient(ellipse 60% 40% at 50% 0,#2a1c0d 0,transparent 70%) no-repeat,var(--bg)}

/* 顶栏：剧院门头 */
header{background:#0b0908;border-bottom:1px solid #2a231d}
header::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:6px;pointer-events:none;
  background:radial-gradient(circle,#ffd28a 1.8px,transparent 2.4px) 0 0/14px 6px;opacity:.55}
.logo{background:var(--primary);color:#0d0b0a;border-radius:3px;font-family:var(--font-head);font-weight:400;font-size:21px;padding-top:2px}
.brand .nm{font-family:var(--font-head);font-weight:400;font-size:26px;letter-spacing:.08em;color:var(--primary)}
.brand .sub{font-size:10px;letter-spacing:.26em}
.pill-btn{border-color:transparent;font-family:var(--font-head);font-size:18px;letter-spacing:.1em;color:var(--ink-dim);padding-top:7px}
.pill-btn:hover{color:var(--primary);border-color:transparent}
html[lang^=zh] .pill-btn{font-family:var(--font-sans);font-size:13px}
.lang-select{border-radius:3px}
.glow{display:none}

/* 版面：标题横跨，下面放映单 */
#view-new{max-width:1200px;padding-top:28px}
.lq-head{position:relative;text-align:center;margin-bottom:30px}
.lq-kicker{display:block;font-size:11px;letter-spacing:.5em;color:var(--primary)}
.lq-head h1{font-family:var(--font-head);font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:.04em;margin:10px 0;text-shadow:0 0 22px #ffb54733}
.lq-head p{margin:0 auto;max-width:620px;font-size:14.5px;color:var(--ink-dim)}
@media (min-width:900px){.lq-head h1{white-space:nowrap}}
html[lang^=zh] .lq-head h1{letter-spacing:.12em;line-height:1.2}

/* 放映单：一卷一卷竖着往下填；每卷左边一张示意图，跟着这卷当前的选择变（画幅、做哪段、正片、名单、配乐） */
.form-grid{display:flex;flex-direction:column;gap:0}
.form-grid>:nth-child(3){order:1}.form-grid>:nth-child(1){order:2}.form-grid>:nth-child(4){order:3}
.form-grid>:nth-child(2){order:4}.form-grid>:nth-child(5){order:5}.form-grid>:nth-child(6){order:6}
.fcard{background:none;border:none;border-radius:0;padding:34px 0 38px;padding-inline-start:340px;position:relative;min-height:276px}
.fcard::before{content:"";position:absolute;inset-inline:0;top:0;height:8px;
  background:radial-gradient(circle,var(--perf) 2.5px,transparent 3px) 0 0/16px 8px}
.form-grid>:nth-child(3)::before{display:none}
.lq-fig{position:absolute;inset-inline-start:0;top:34px;width:290px;height:212px;border:1px solid #2a231d;border-radius:4px;
  background:radial-gradient(ellipse at 50% 30%,#1d150d,#0f0c09 75%);direction:ltr}
.lq-fig svg{display:block;width:100%;height:100%}
.fcard h3{font-family:var(--font-head);font-weight:400;font-size:30px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.fcard h3::before{font-family:var(--font-head);font-size:15px;letter-spacing:.2em;color:var(--primary);border:1px solid var(--primary-deep);padding:3px 8px 1px;border-radius:2px;margin-inline-end:4px}
.form-grid>:nth-child(3) h3::before{content:"REEL 1"}.form-grid>:nth-child(1) h3::before{content:"REEL 2"}
.form-grid>:nth-child(4) h3::before{content:"REEL 3"}.form-grid>:nth-child(2) h3::before{content:"REEL 4"}
.form-grid>:nth-child(5) h3::before{content:"REEL 5"}
html[lang^=zh] .fcard h3{letter-spacing:.12em}

.field label,.target-block .tb-label{text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;white-space:nowrap}
.row2,.row3{align-items:end}
.field textarea,.field input,.field select{background:transparent;border:none;border-bottom:1px solid #3a2f24;border-radius:0;padding-inline:2px;font-size:15px}
.field select{background:#0d0b0a}
.field textarea:focus,.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--primary)}
.field input::placeholder{color:#6d6252}
#f_title{font-family:var(--font-head);font-size:30px;letter-spacing:.06em;padding-block:4px 6px}
html[lang^=zh] #f_title{font-family:var(--font-sans);font-size:22px}
.uploader{background:transparent;border:1px dashed #3a2f24;border-radius:3px}
.field label.uploader,.field label.crew-add-btn,.uploader{text-transform:none;letter-spacing:normal;font-size:12.5px;white-space:normal}
.crew-add-btn{border-radius:3px}

/* 选项：像影院场次牌，选中的亮灯 */
.mode-card,.style-card{background:transparent;border:1px solid #3a2f24;border-radius:3px;font-family:var(--font-head);font-size:19px;letter-spacing:.08em;color:var(--ink-dim)}
.mode-card.on,.style-card.on{background:var(--primary);border-color:var(--primary);color:#0d0b0a;box-shadow:0 0 22px #ffb5474d}
.style-card.on .dot{background:#0d0b0a}
html[lang^=zh] .mode-card,html[lang^=zh] .style-card{font-family:var(--font-sans);font-size:13.5px;letter-spacing:.06em}
.seg{background:transparent;border:1px solid #3a2f24;border-radius:3px}
.seg button{border-radius:2px}
.seg button.on,.btn{color:#0d0b0a}

/* 入场券 */
.start-row{flex-direction:column;align-items:center;gap:10px;margin-top:10px;padding-top:34px;position:relative}
.start-row::before{content:"";position:absolute;inset-inline:0;top:0;height:8px;background:radial-gradient(circle,var(--perf) 2.5px,transparent 3px) 0 0/16px 8px}
.start-row .btn{font-family:var(--font-head);font-weight:400;font-size:26px;letter-spacing:.14em;padding:16px 64px 14px 46px;border-radius:4px;text-transform:uppercase;
  background:linear-gradient(90deg,#ffb547 0 calc(100% - 64px),#e9a23b calc(100% - 64px));
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) 100% 0/51% 100% no-repeat;
  filter:drop-shadow(0 0 18px #ffb54740)}
html[lang^=zh] .start-row .btn{font-family:var(--font-sans);font-weight:800;font-size:19px;letter-spacing:.16em}
.start-row .btn[disabled]{opacity:.42;filter:none}
.btn.ghost,.btn.line{color:var(--ink-dim)}
.skin-footer{color:var(--ink-dim);letter-spacing:.12em;font-size:11.5px}

@media (max-width:900px){
  #view-new{padding-inline:20px}
  .fcard{padding-inline-start:0;min-height:0}
  .lq-fig{position:relative;top:0;width:100%;max-width:340px;height:auto;aspect-ratio:260/190;margin:0 auto 6px}
  .lq-head h1{font-size:clamp(28px,8vw,40px)}
}
.lq-head p{max-width:720px}
.fcard h3::before{white-space:nowrap}
.start-row .btn{white-space:nowrap}
@media (max-width:700px){
  .tb{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px 12px}
  .tb-right{flex-wrap:wrap;gap:4px;margin-inline-start:auto}
  .brand .sub{display:none}
  .pill-btn{font-size:15px;padding:6px 8px 4px}
  .fcard h3{font-size:24px}
  .start-row .btn{font-size:20px;padding:14px 48px 12px 34px;letter-spacing:.1em}
}
html,body{overflow-x:clip}.qtip .tip-bubble{max-width:min(300px,78vw)}
.field>label{display:flex;align-items:center;gap:6px;min-height:20px}
.row2>.field>label,.row3>.field>label{height:20px;min-height:0;line-height:20px}
.row2 .field input,.row2 .field select,.row3 .field input{height:44px;box-sizing:border-box}

/* 制作页：左边一条竖胶片（一步一格，做完的亮灯），中间一卷一卷，右边票根 */
.run-top{max-width:1440px;margin:0 auto;padding-top:26px}
.run-top .rt-title{font-family:var(--font-head);font-weight:400;font-size:36px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html[lang^=zh] .run-top .rt-title{font-family:var(--font-sans);font-size:24px;font-weight:700;letter-spacing:.08em}
.run-top .rt-sub{letter-spacing:.2em;text-transform:uppercase;font-size:10.5px}
.run-layout{max-width:1440px;margin:0 auto;grid-template-columns:230px minmax(0,1fr) 320px;gap:36px}
.step-nav{padding:10px 22px;background:#1b1510;border-radius:4px;gap:6px;
  background-image:radial-gradient(circle,#0d0b0a 3px,transparent 3.6px),radial-gradient(circle,#0d0b0a 3px,transparent 3.6px);
  background-size:12px 16px,12px 16px;background-position:0 0,100% 0;background-repeat:repeat-y,repeat-y}
.sn-group{font-family:var(--font-head);font-size:15px;font-weight:400;letter-spacing:.18em;color:var(--primary);margin:12px 2px 2px}
html[lang^=zh] .sn-group{font-family:var(--font-sans);font-size:11px}
.sn-item{background:#0d0b0a;border:1px solid #3a2f24;border-radius:2px;padding:12px 10px;min-height:52px}
.sn-item:hover{background:#15110e}
.sn-item.on{background:#2a1f12;border-color:var(--primary);box-shadow:0 0 16px #ffb54733}
.sn-item .st{border-color:#5a4a38}
.sn-item .st.done{background:var(--primary);border-color:var(--primary);color:#0d0b0a}
.steps{gap:0}
.step{background:none;border:none;border-radius:0;padding:28px 0 30px;position:relative}
.step::before{content:"";position:absolute;inset-inline:0;top:0;height:8px;background:radial-gradient(circle,var(--perf) 2.5px,transparent 3px) 0 0/16px 8px}
.step:first-child{padding-top:4px}.step:first-child::before{display:none}
.step-head h3{font-family:var(--font-head);font-weight:400;font-size:28px;letter-spacing:.06em;text-transform:uppercase}
html[lang^=zh] .step-head h3{font-family:var(--font-sans);font-size:19px;font-weight:700;letter-spacing:.1em}
.step.await{outline:1px solid var(--primary);outline-offset:10px;border-radius:2px}
.step-head .state{font-family:var(--font-head);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
html[lang^=zh] .step-head .state{font-family:var(--font-sans);font-size:12px}
.ip-card{background:#15110e;border:1px dashed #4a3820;border-radius:6px;position:relative;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) 100% 0/51% 100% no-repeat}
.ip-card h4{font-family:var(--font-head);font-size:16px;font-weight:400;letter-spacing:.16em;color:var(--primary)}
html[lang^=zh] .ip-card h4{font-family:var(--font-sans);font-size:12px}
@media (max-width:1100px){.run-layout{grid-template-columns:1fr}.step-nav{position:static}}