/* 星芒审片 · 新风格公共样式（高保真样稿用） */
:root{
  --bg:#080907; --ink:#ECEDE4; --ink-2:#BBBEB0; --ink-3:#83887C; --ink-4:#5A5F54;
  --hair:rgba(236,237,228,.10); --hair-2:rgba(236,237,228,.18); --hair-3:rgba(236,237,228,.32);
  --accent:#D9E66E; --accent-dim:rgba(217,230,110,.14); --on-accent:#0E100A;
  --urgent:#E5675A; --important:#E8913A; --normal:#72A9C0; --low:#8C9486;
  --passed:#C9D86A; --rejected:#E8913A; --review:#ECEDE4; --machine:#72A9C0; --none:#2A2E26;
  --glass:linear-gradient(140deg,rgba(236,237,228,.085),rgba(236,237,228,.025) 55%,rgba(236,237,228,.04));
  --glass-strong:linear-gradient(140deg,rgba(30,33,25,.78),rgba(16,18,13,.72));
  --blur:blur(26px) saturate(150%);
  --display:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI",system-ui,sans-serif;
  --zh:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:13px/1.55 var(--zh);font-weight:350;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:10px}
*{scrollbar-width:thin;scrollbar-color:rgba(236,237,228,.16) transparent}
.static *{transition:none!important;animation:none!important}

/* ---------- 背景场景 ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .lyr{position:absolute}
.scene .beam{left:-10%;top:-30%;width:70%;height:120%;transform:rotate(-18deg);
  background:radial-gradient(60% 50% at 30% 30%,rgba(190,200,110,.18),transparent 70%),linear-gradient(100deg,transparent 30%,rgba(217,230,110,.05) 45%,transparent 60%);filter:blur(20px)}
.scene .far{filter:blur(14px) brightness(.8)}
.scene .mid{filter:blur(1.6px) brightness(.9);opacity:.9;
  -webkit-mask-image:radial-gradient(70% 80% at 60% 45%,#000 40%,transparent 85%);mask-image:radial-gradient(70% 80% at 60% 45%,#000 40%,transparent 85%)}
.scene .near{filter:blur(22px) brightness(.55);opacity:.85}
.scene .wave{opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 85%,transparent)}
.scene .ruler{opacity:.7;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent)}
.scene .viewfinder{right:380px;top:84px;width:300px;height:186px}
.scene .viewfinder i{position:absolute;width:22px;height:22px;border-color:rgba(236,237,228,.55);border-style:solid;border-width:0}
.scene .viewfinder i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.scene .viewfinder i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.scene .viewfinder i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.scene .viewfinder i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.scene .viewfinder span{position:absolute;left:28px;top:-3px;font:400 10px var(--display);letter-spacing:.18em;color:rgba(236,237,228,.6)}
.scene .viewfinder span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--urgent);margin-right:8px;vertical-align:1px;box-shadow:0 0 8px var(--urgent)}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 20%,transparent 55%,rgba(0,0,0,.55))}

/* ---------- 外壳：页眉、导航 ---------- */
.wrap{position:relative;z-index:2;max-width:1560px;margin:0 auto;padding:0 44px 80px}
.masthead{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font:300 19px/1 var(--display);letter-spacing:.08em;white-space:nowrap;text-decoration:none}
.brand svg{width:16px;height:16px}
.masthead .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--hair-2),var(--hair) 60%,transparent)}
.masthead .meta{display:flex;align-items:center;gap:18px;color:var(--ink-3);font-size:12px;white-space:nowrap}
.masthead .meta b{color:var(--ink);font-weight:400}
.credit{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--hair-2);background:var(--glass);backdrop-filter:var(--blur);color:var(--ink-2)}
.credit b{font:300 14px var(--display);color:var(--ink)}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair-2);display:grid;place-items:center;font-size:12px;color:var(--ink-2);background:var(--glass);backdrop-filter:var(--blur)}
.nav{display:flex;gap:44px;font-size:12.5px;color:var(--ink-3)}
.nav a{text-decoration:none;position:relative;padding-bottom:7px;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;bottom:0;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.nav .sp{flex:1}

/* ---------- 页头 ---------- */
.eyebrow{font:400 11px/1 var(--display);letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
.h1{margin:0;font:200 72px/1 var(--zh);letter-spacing:.02em}
.h2{margin:0;font:200 40px/1.1 var(--zh);letter-spacing:.02em}
.lead{color:var(--ink-2);font-size:12.5px;line-height:1.75}
.lead b{color:var(--ink);font-weight:400}
.cta{display:inline-flex;align-items:center;color:var(--ink-2);font-size:12.5px;letter-spacing:.04em}
.cta .o{width:24px;height:24px;border-radius:50%;border:1px solid var(--hair-3);display:grid;place-items:center;transition:border-color .3s,box-shadow .3s}
.cta .o::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.cta .ln{width:40px;height:1px;background:var(--hair-3);margin:0 8px 0 4px;position:relative;transition:width .35s var(--ease)}
.cta .ln::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid var(--hair-3);border-right:1px solid var(--hair-3);transform:rotate(45deg)}
.cta:hover{color:var(--ink)} .cta:hover .o{border-color:var(--accent);box-shadow:0 0 18px rgba(217,230,110,.35)} .cta:hover .o::after{background:var(--accent)} .cta:hover .ln{width:60px}

/* ---------- 毛玻璃卡片 ---------- */
.glass{position:relative;border:1px solid var(--hair-2);border-radius:24px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.25),0 24px 60px -34px rgba(0,0,0,.85);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.06),transparent 45%)}
.glass.lit::after{content:"";position:absolute;width:62%;height:120%;left:var(--lx,8%);top:var(--ly,-40%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--lc,190,205,90),.30),transparent 75%);filter:blur(30px)}
.glass.solid{background:var(--glass-strong)}
.pin{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1px solid var(--hair-3);display:grid;place-items:center}
.pin::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 8px var(--c,transparent)}
.arrow{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:10px;border:1px solid var(--hair-2);display:grid;place-items:center;color:var(--ink-2);background:rgba(236,237,228,.04)}

/* ---------- 控件 ---------- */
.field{height:38px;border:1px solid var(--hair-2);border-radius:999px;background:rgba(236,237,228,.03);backdrop-filter:var(--blur);padding:0 16px;color:var(--ink);transition:border-color .2s}
.field:hover,.field:focus{border-color:var(--hair-3);outline:none}
textarea.field{border-radius:16px;height:auto;padding:10px 14px;resize:vertical}
.search{width:260px;padding-left:38px;background:rgba(236,237,228,.03) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2383887C' stroke-width='1.2'><circle cx='6' cy='6' r='4.5'/><path d='M9.5 9.5L13 13'/></svg>") 16px 50% no-repeat}
.field::placeholder{color:var(--ink-4)}
select.field{appearance:none;padding-right:34px;background:rgba(236,237,228,.03) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2383887C' stroke-width='1.2'><path d='M1 1l4 4 4-4'/></svg>") right 14px center no-repeat;color-scheme:dark}
select.field option{background:#14160F}
input[type=date].field,input[type=datetime-local].field{color-scheme:dark}
.tabs{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--hair);border-radius:999px;background:rgba(236,237,228,.03);backdrop-filter:var(--blur)}
.tabs button{height:32px;padding:0 15px;border-radius:999px;color:var(--ink-3);font-size:12.5px;transition:color .2s,background .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--on-accent);background:var(--accent);box-shadow:0 0 22px -6px rgba(217,230,110,.6)}
.tabs button b{font:400 11px var(--display);margin-left:6px;opacity:.7}
.btn{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--hair-3);font-size:12.5px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:10px;background:rgba(236,237,228,.03);backdrop-filter:var(--blur);transition:border-color .2s,background .2s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--accent);background:var(--accent-dim)}
.btn .dt{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.btn.pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 0 0 1px rgba(217,230,110,.25),0 10px 30px -10px rgba(217,230,110,.55)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:none;backdrop-filter:none;color:var(--ink-3)}
.btn.ghost:hover{color:var(--ink);background:rgba(236,237,228,.05)}
.btn.sm{height:30px;padding:0 13px;font-size:12px}
.btn.danger{border-color:rgba(229,103,90,.5);color:#F2A79F}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);border:1px solid var(--hair-2);border-radius:999px;padding:0 9px;line-height:19px;white-space:nowrap}
.chip.acc{color:var(--accent);border-color:rgba(217,230,110,.35)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--c)}
.toggle{width:34px;height:20px;border-radius:999px;border:1px solid var(--hair-3);position:relative;transition:background .2s,border-color .2s;flex-shrink:0}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--ink-3);transition:transform .25s var(--ease),background .2s}
.toggle[aria-checked="true"]{background:var(--accent-dim);border-color:rgba(217,230,110,.6)}
.toggle[aria-checked="true"]::after{transform:translateX(14px);background:var(--accent);box-shadow:0 0 8px var(--accent)}
.ok{color:var(--passed)} .warn{color:var(--important)} .bad{color:var(--urgent)} .mut{color:var(--ink-3)}
.num{font-family:var(--display);font-weight:200;letter-spacing:-.01em}

/* 表格（毛玻璃容器里的细线表） */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--ink-4);text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair)}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(217,230,110,.035)}
.tbl .r{text-align:right}

/* 分页 */
.pager{display:flex;align-items:center;gap:6px;margin-top:18px;color:var(--ink-3);font-size:12px}
.pager .sp{flex:1}
.pager button{min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1px solid transparent;color:var(--ink-2);font:400 12.5px var(--display)}
.pager button:hover:not(:disabled){border-color:var(--hair-2)}
.pager button[aria-current="page"]{border-color:rgba(217,230,110,.6);color:var(--accent);background:var(--accent-dim)}
.pager button:disabled{opacity:.35;cursor:default}
.pager select{height:34px;padding:0 30px 0 12px}

/* 弹层 */
.scrim{position:fixed;inset:0;z-index:30;background:rgba(4,5,3,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:14px;right:14px;bottom:14px;width:min(660px,calc(100vw - 28px));z-index:31;border-radius:30px;display:flex;flex-direction:column;
  transform:translateX(calc(100% + 30px));transition:transform .55s var(--ease)}
.drawer.on{transform:none}
.modal{position:fixed;left:50%;top:50%;z-index:31;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);border-radius:30px;display:flex;flex-direction:column;
  transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
.modal.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.ph{position:relative;padding:28px 30px 18px;display:flex;gap:16px;align-items:flex-start}
.ph .sp{flex:1}
.pb{position:relative;overflow:auto;padding:4px 30px 30px;flex:1}
.pf{position:relative;display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:16px 30px 24px;border-top:1px solid var(--hair)}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-2);color:var(--ink-2);font-size:15px;transition:border-color .2s,color .2s;flex-shrink:0}
.x:hover{border-color:var(--hair-3);color:var(--ink)}
.form{display:grid;grid-template-columns:120px 1fr;gap:14px 18px;align-items:center}
.form > label{font-size:12px;color:var(--ink-3)}
.form .row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form .hint{grid-column:2;font-size:11.5px;color:var(--ink-4);margin-top:-8px}
.seg-pick{display:inline-flex;gap:8px;flex-wrap:wrap}
.seg-pick button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-2);transition:all .2s}
.seg-pick button[aria-pressed="true"]{border-color:rgba(217,230,110,.65);color:var(--accent);background:var(--accent-dim)}
.toast{position:fixed;left:50%;bottom:28px;z-index:40;transform:translate(-50%,10px);opacity:0;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:500;transition:all .3s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sec{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.sec h3{margin:0;font:300 16px var(--zh);letter-spacing:.06em}
.sec span{font-size:11.5px;color:var(--ink-3)}
.sec .sp{flex:1}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.static .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* 刻度圆环 */
.gauge{text-align:center}
.gauge svg{display:block;overflow:visible}
.gauge .tk{stroke:rgba(236,237,228,.22);stroke-width:1;transition:stroke .5s}
.gauge .tk.on{stroke:var(--ink)}
.gauge .pt{fill:var(--accent);opacity:0;transition:opacity .4s}
.gauge .pt.on{opacity:1;filter:drop-shadow(0 0 3px rgba(217,230,110,.9))}
.gauge .gn{font:200 46px/1 var(--display);fill:var(--ink)}
.gauge .gp{font:300 17px/1 var(--display);fill:var(--ink-2)}
.gauge .cap{margin-top:14px;font-size:12px;line-height:1.6;color:var(--ink-2)}
.gauge .cap small{display:block;color:var(--ink-4);font-size:11px}
.btn:disabled{opacity:.38;cursor:not-allowed;border-color:var(--hair-2)}

/* ---------- 正式版补充 ---------- */
.wrap > #shell{position:relative}
.usermenu{position:absolute;right:0;top:64px;z-index:20;width:220px;padding:8px;border-radius:20px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .25s var(--ease)}
.usermenu.on{opacity:1;pointer-events:auto;transform:none}
.usermenu .um-h{position:relative;padding:10px 12px 12px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.usermenu .um-h b{display:block;font-weight:400}
.usermenu .um-h span{font-size:11.5px;color:var(--ink-3)}
.usermenu button{position:relative;width:100%;text-align:left;height:38px;padding:0 12px;border-radius:12px;color:var(--ink-2)}
.usermenu button:hover{background:rgba(236,237,228,.06);color:var(--ink)}
button.avatar{cursor:pointer}
.toast.bad{background:var(--urgent);color:#fff}
.btn.busy{opacity:.6;cursor:progress}
.skeleton{color:var(--ink-4);padding:60px 0;text-align:center}
.err-line{color:var(--urgent);font-size:12px;min-height:18px}
[hidden]{display:none!important}