:root{
  --bg:#050505;
  --bg-elev:#0b0b0b;
  --panel:#0e0e0e;
  --line:#1a1a1a;
  --line-2:#242424;
  --fg:#e9e9e9;
  --fg-dim:#8a8a8a;
  --fg-mute:#5a5a5a;
  --accent:#35c5cf;
  --accent-soft:rgba(53,197,207,.10);
  --accent-line:rgba(53,197,207,.38);
  --danger:#c9564f;
  --danger-soft:rgba(201,86,79,.10);
  --ok:#35c5cf;
  --r:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;border-radius:var(--r)}
input,select,textarea{font:inherit;color:var(--fg)}
::selection{background:var(--accent);color:#000}

/* 细滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#222;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#333}

/* ---------------- 登录页 ---------------- */
.login-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#000;
}
.login-bg{
  position:absolute;inset:0;
  background:url('/static/Odonata.jpg') center/cover no-repeat;
  /* 原图本身极暗（94% 像素亮度 <51），提亮 + 拉对比才能看出来 */
  filter:brightness(1.55) contrast(1.18) saturate(1.05);
  transform:scale(1.03);
}
.login-bg::after{
  /* 中心留亮让画面透出来，只压边角与底部，保证登录框可读 */
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.75) 100%);
}
.login-card{
  position:relative;z-index:2;width:min(380px,90vw);
  padding:38px 34px 30px;
  background:rgba(8,8,8,.82);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 70px rgba(0,0,0,.85);
}
.login-card{
  box-shadow:0 0 90px -30px rgba(53,197,207,.28), 0 24px 70px rgba(0,0,0,.85);
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.75;
}
.login-brand{
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:22px;
}
.login-brand .dot{width:5px;height:5px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.login-title{font-size:25px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.login-title em{font-style:normal;color:var(--accent)}
.login-sub{font-size:12px;color:var(--fg-mute);margin-bottom:26px;letter-spacing:.04em}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.16em;color:var(--fg-mute);
  text-transform:uppercase;margin-bottom:8px}
.input{
  width:100%;background:#000;border:1px solid var(--line-2);
  padding:13px 14px;font-size:16px;letter-spacing:.16em;
  transition:border-color .18s, box-shadow .18s;
}
.input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-2);background:transparent;color:var(--fg);
  padding:10px 18px;font-size:13px;letter-spacing:.05em;
  transition:all .18s;
}
.btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{
  width:100%;border-color:var(--accent-line);color:var(--accent);
  background:var(--accent-soft);padding:12px;letter-spacing:.2em;font-size:12px;
  text-transform:uppercase;
}
.btn-primary:hover{background:rgba(53,197,207,.18);box-shadow:0 0 22px -6px var(--accent)}
.btn-danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.btn-sm{padding:6px 12px;font-size:12px}
.msg{margin-top:14px;font-size:12px;min-height:18px;letter-spacing:.02em}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--accent)}
.login-foot{
  margin-top:24px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;color:var(--fg-mute);letter-spacing:.1em;
  display:flex;justify-content:space-between;
}

/* ---------------- 主界面 ---------------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;
  padding:0 22px;height:56px;
  background:rgba(5,5,5,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .logo{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.2em;font-weight:600}
.topbar .logo .dot{width:6px;height:6px;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.topbar .logo span{color:var(--fg-mute);font-weight:400;letter-spacing:.1em;font-size:11px}
.topbar .spacer{flex:1}
.stat-inline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);letter-spacing:.04em}
.led{width:7px;height:7px;border-radius:50%;background:#333;transition:all .3s}
.led.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.led.off{background:var(--danger);box-shadow:0 0 8px rgba(201,86,79,.5)}
.led.busy{background:#d8a657;box-shadow:0 0 10px rgba(216,166,87,.6);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 90px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);margin-bottom:18px}
.panel-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.panel-head h2{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);
}
.panel-head h2::before{content:'// ';color:var(--accent);opacity:.65}
.panel-head .spacer{flex:1}
.panel-body{padding:18px}

/* 拖拽区 */
.drop{
  border:1px dashed var(--line-2);padding:34px 20px;text-align:center;
  transition:all .2s;cursor:pointer;background:#080808;
}
.drop:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 40px -20px var(--accent)}
.drop .big{font-size:14px;letter-spacing:.08em;color:var(--fg-dim)}
.drop .big em{font-style:normal;color:var(--accent)}
.drop .small{font-size:11px;color:var(--fg-mute);margin-top:8px;letter-spacing:.05em}

/* 文件列表 */
.filelist{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fileitem{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:#0a0a0a;border:1px solid var(--line);
  transition:border-color .16s,background .16s;cursor:grab;
}
.fileitem:hover{border-color:var(--line-2);background:#0d0d0d}
.fileitem.sel{border-color:var(--accent-line);background:var(--accent-soft)}
.fileitem.dragging{opacity:.35;border-style:dashed}
.fileitem.drop-target{border-color:var(--accent);box-shadow:inset 0 2px 0 -1px var(--accent)}
.fileitem .handle{color:var(--fg-mute);font-size:13px;letter-spacing:-2px;cursor:grab;user-select:none}
.fileitem .thumb{
  width:38px;height:38px;flex:0 0 38px;object-fit:cover;
  background:#000;border:1px solid var(--line-2);display:block;
}
.fileitem .thumb.ic{display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--fg-mute);letter-spacing:.05em}
.fileitem .meta{flex:1;min-width:0}
.fileitem .name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fileitem .size{font-size:11px;color:var(--fg-mute);letter-spacing:.04em}
.fileitem .rm{
  background:transparent;border:none;color:var(--fg-mute);font-size:16px;
  padding:4px 8px;line-height:1;
}
.fileitem .rm:hover{color:var(--danger)}
input[type=checkbox]{
  appearance:none;width:15px;height:15px;border:1px solid var(--line-2);
  background:#000;flex:0 0 15px;position:relative;transition:all .16s;
}
input[type=checkbox]:checked{border-color:var(--accent);background:var(--accent-soft)}
input[type=checkbox]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(42deg);
}
.bulkbar{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:12px;color:var(--fg-dim);letter-spacing:.04em;
}

/* 表单 */
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.frow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.frow.one{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column;gap:6px;min-width:0}
.fg label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.sel,.inp{
  width:100%;background:#000;border:1px solid var(--line-2);
  padding:8px 10px;font-size:13px;transition:border-color .16s;
}
.sel:focus,.inp:focus{outline:none;border-color:var(--accent-line)}
.sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#555 50%),
  linear-gradient(135deg,#555 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px;cursor:pointer}
.seg{display:flex;border:1px solid var(--line-2)}
.seg button{
  flex:1;background:transparent;border:none;color:var(--fg-dim);
  padding:8px 6px;font-size:12px;letter-spacing:.03em;
  border-right:1px solid var(--line-2);transition:all .16s;
}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--fg);background:#111}
.seg button.active{color:var(--accent);background:var(--accent-soft);
  box-shadow:inset 0 -1px 0 0 var(--accent)}
.switch{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--fg-dim);cursor:pointer;
  letter-spacing:.04em;user-select:none}
.hint{font-size:11px;color:var(--fg-mute);line-height:1.7;letter-spacing:.03em}
.hint code{color:var(--fg-dim);font-family:ui-monospace,Consolas,monospace;font-size:11px}

/* 作业表 */
.jobs{display:flex;flex-direction:column;gap:6px}
.jobrow{
  display:flex;align-items:center;gap:10px;font-size:12px;
  padding:8px 10px;background:#0a0a0a;border:1px solid var(--line);
  font-family:ui-monospace,Consolas,monospace;color:var(--fg-dim);
}
.jobrow .jid{color:var(--accent);letter-spacing:.02em}
.jobrow .jname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{font-size:12px;color:var(--fg-mute);letter-spacing:.06em;padding:6px 0}

/* 日志 */
.log{
  background:#000;border:1px solid var(--line);padding:12px;
  font:11px/1.75 ui-monospace,Consolas,monospace;color:var(--fg-dim);
  max-height:230px;overflow:auto;white-space:pre-wrap;word-break:break-all;
}
.log .ok{color:var(--accent)}
.log .err{color:var(--danger)}

.scan-preview{margin-top:14px;max-width:100%;border:1px solid var(--line-2);display:block}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:#0d0d0d;border:1px solid var(--accent-line);color:var(--fg);
  padding:11px 20px;font-size:13px;letter-spacing:.04em;
  opacity:0;pointer-events:none;transition:all .25s;z-index:90;
  box-shadow:0 0 30px -10px var(--accent);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--danger);box-shadow:0 0 30px -10px var(--danger)}
.spin{display:inline-block;width:11px;height:11px;border:1.5px solid var(--accent-line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}


/* ---------------- 自定义下拉 ---------------- */
.dd{position:relative;width:100%}
.dd-btn{
  width:100%;display:flex;align-items:center;gap:8px;
  background:#000;border:1px solid var(--line-2);color:var(--fg);
  padding:8px 10px;font-size:13px;text-align:left;transition:border-color .16s;
}
.dd-btn:hover{border-color:#333}
.dd.open .dd-btn{border-color:var(--accent-line)}
.dd-btn .lab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn .car{
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid var(--fg-mute);transition:transform .18s;
}
.dd.open .dd-btn .car{transform:rotate(180deg);border-top-color:var(--accent)}
.dd-menu{
  position:absolute;z-index:60;top:calc(100% + 2px);left:0;right:0;
  background:#0a0a0a;border:1px solid var(--line-2);
  max-height:260px;overflow:auto;display:none;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9);
}
.dd.open .dd-menu{display:block}
.dd-item{
  padding:8px 11px;font-size:13px;color:var(--fg-dim);cursor:pointer;
  border-bottom:1px solid #111;transition:all .12s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.dd-item:last-child{border-bottom:none}
.dd-item:hover{background:#141414;color:var(--fg)}
.dd-item.sel{color:var(--accent);background:var(--accent-soft)}
.dd-item.sel::after{content:'✓';float:right;font-size:11px}
.dd.up .dd-menu{top:auto;bottom:calc(100% + 2px)}

/* ---------------- 预览面板 ---------------- */
.preview-stage{
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;border:1px solid var(--line);padding:14px;min-height:260px;
  position:relative;overflow:hidden;
}
.preview-stage img{max-width:100%;max-height:520px;display:block;
  box-shadow:0 10px 40px -14px rgba(0,0,0,.9);transition:opacity .2s}
.preview-stage img.loading{opacity:.35}
.preview-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:11px;font-size:11px;color:var(--fg-mute);letter-spacing:.05em;
}
.preview-meta .tag{border:1px solid var(--line-2);padding:2px 7px;color:var(--fg-dim)}
.pager{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager button{
  background:#000;border:1px solid var(--line-2);color:var(--fg-dim);
  width:24px;height:24px;line-height:1;font-size:13px;transition:all .15s;
}
.pager button:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}
.pager button:disabled{opacity:.3;cursor:not-allowed}
.pager .pg{font-family:ui-monospace,Consolas,monospace;color:var(--fg-dim);min-width:52px;text-align:center}

/* ---------------- 扫描结果 ---------------- */
.scan-result{margin-top:14px;border:1px solid var(--line);background:#0a0a0a}
.scan-result .head{
  display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--fg-dim);
}
.scan-result .head .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scan-result .body{padding:12px;display:flex;justify-content:center}
.scan-result img{max-width:100%;max-height:400px;border:1px solid var(--line-2)}
.scan-result .acts{display:flex;gap:8px;padding:0 12px 12px}
.scan-list{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.scan-list .row{
  display:flex;align-items:center;gap:8px;font-size:11px;color:var(--fg-mute);
  font-family:ui-monospace,Consolas,monospace;padding:5px 8px;border:1px solid var(--line);
}
.scan-list .row:hover{border-color:var(--line-2);color:var(--fg-dim)}

/* 打印摘要 */
.summary{margin-top:12px;border:1px solid var(--line);background:#0a0a0a;padding:11px 13px}
.summary .line{display:flex;justify-content:space-between;font-size:12px;
  color:var(--fg-dim);padding:2px 0}
.summary .line b{color:var(--fg);font-weight:400}

/* 移动端：卡片留白收窄，按钮与输入达到可用触摸高度（44px 下沿） */
@media(max-width:640px){
  .login-card{padding:30px 22px 26px;width:calc(100% - 32px)}
  .login-title{font-size:22px}
  .login-sub{font-size:11.5px;margin-bottom:20px}
  .input{padding:14px;font-size:16px;min-height:50px}
  .btn{padding:14px 18px;font-size:14.5px;min-height:50px;width:100%}
  .login-foot{font-size:11.5px;gap:6px}
}