/* 登录页 —— 放映间 / 调色台。两路布光：暖钨丝主光 + 冷青补光。
   这一页刻意只有一套深色配色：放映间本来就是暗的，不做明暗切换。 */
:root{
  --void:#06080B; --panel:#0D1116; --panel-2:#11161C;
  --key:#E3A85C;  --fill:#4C9DB0;  --alert:#D96A5A;
  --ink:#E9ECEF;  --muted:#77828E; --line:#1C232B; --line-2:#28313B;
  --f-title:"Archivo","Noto Sans SC","PingFang SC",sans-serif;
  --f-body:"Noto Sans SC","PingFang SC","Archivo",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--f-body); line-height:1.65;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
/* 主光从左上斜切进来，补光在右下 —— 模拟一盏钨丝灯加一块冷反光板 */
body::before{
  content:""; position:fixed; inset:-20%;
  background:
    radial-gradient(58% 44% at 22% 14%, rgba(227,168,92,.16), transparent 62%),
    radial-gradient(52% 46% at 84% 88%, rgba(76,157,176,.13), transparent 66%);
  pointer-events:none;
}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay}
.bar{position:fixed;left:0;right:0;height:clamp(28px,7vh,64px);background:#000;z-index:5;
  transition:transform .55s cubic-bezier(.22,.9,.26,1)}
/* 渐进增强：只有 JS 正常时才从隐藏开始动画。JS 挂了也必须能看见登录框。 */
.js .bar{transform:scaleY(0)}
.bar.t{top:0;transform-origin:top}
.bar.b{bottom:0;transform-origin:bottom}
body.rolling .bar{transform:scaleY(1)}

.stage{position:relative;z-index:2;width:min(430px,90vw);padding:8px 0}
.rise{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.js .rise{opacity:0;transform:translateY(14px)}
body.rolling .rise{opacity:1;transform:none}
body.rolling .rise.d1{transition-delay:.34s}
body.rolling .rise.d2{transition-delay:.62s}
body.rolling .rise.d3{transition-delay:.86s}

/* ---- 片名卡 ---- */
.card-title{margin:0 0 30px}
.mark{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--key);
  box-shadow:0 0 0 4px rgba(227,168,92,.13),0 0 18px rgba(227,168,92,.5);flex:none}
.mark span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
h1{
  font-family:var(--f-title);font-weight:700;font-size:clamp(21px,4.4vw,27px);
  line-height:1.16;letter-spacing:.12em;text-transform:uppercase;margin:0;
  color:var(--ink);text-wrap:balance;
}
h1 em{font-style:normal;color:var(--key)}
.tag{margin:11px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* ---- 规格条 ---- */
.specs{display:flex;flex-wrap:wrap;gap:6px;margin:17px 0 0;padding:0;list-style:none}
.specs li{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:2px;padding:3.5px 7px;
}
.specs li b{color:var(--fill);font-weight:400}

/* ---- 控制台面板 ---- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2);border-radius:5px;padding:24px 22px 20px;
  box-shadow:0 30px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045);
}
.slate{display:flex;gap:4px;margin:-24px -22px 20px;padding:0;height:4px;border-radius:5px 5px 0 0;overflow:hidden}
.slate i{flex:1;background:var(--line-2)}
.slate i:nth-child(2){background:var(--key)}
.slate i:nth-child(5){background:var(--fill)}
.panel h2{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 18px;
}
.field{display:block;margin:0 0 14px}
.field span{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.field input{
  width:100%;background:#080B0F;border:1px solid var(--line-2);border-radius:3px;
  color:var(--ink);font-family:var(--f-body);font-size:14.5px;padding:11px 12px;
  transition:border-color .18s,box-shadow .18s;
}
.field input::placeholder{color:#4A545E}
.field input:focus{outline:none;border-color:var(--fill);box-shadow:0 0 0 3px rgba(76,157,176,.15)}
.field input:focus-visible{outline:none}

button{
  width:100%;margin-top:8px;padding:12px;border:0;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#F0B76A,var(--key));color:#1A1206;
  font-family:var(--f-title);font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  transition:filter .18s,transform .1s;
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--fill);outline-offset:2px}
button[disabled]{filter:grayscale(.55) brightness(.8);cursor:default}

/* 空提示不占位，避免按钮和页脚之间出现一段空洞；有内容时才撑开 */
.err{margin:0;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.04em;color:var(--alert)}
.err:not(:empty){margin-top:11px}
.err.busy{color:var(--muted)}

.foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.75;color:var(--muted)}
.foot b{color:var(--fill);font-weight:400}

/* ---- 角落 HUD ---- */
.hud{position:fixed;z-index:6;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.16em;color:#5C6771;display:flex;align-items:center;gap:7px;
  transition:opacity .9s ease .95s}
.js .hud{opacity:0}
body.rolling .hud{opacity:1}
.hud.l{left:clamp(14px,3.4vw,30px);bottom:clamp(38px,8.4vh,78px)}
.hud.r{right:clamp(14px,3.4vw,30px);bottom:clamp(38px,8.4vh,78px)}
#tc{font-variant-numeric:tabular-nums;color:var(--muted)}
.tally{width:6px;height:6px;border-radius:50%;background:var(--fill);
  box-shadow:0 0 9px rgba(76,157,176,.75);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

@media (max-width:420px){
  .hud.r{display:none}
  .panel{padding:20px 17px 17px}
  .slate{margin:-20px -17px 17px}
}
@media (prefers-reduced-motion:reduce){
  .bar,.rise,.hud{transition:none}
  .tally{animation:none;opacity:.8}
  #grain{display:none}
}