:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1a2332; --sub:#6b7688;
  --brand:#2f6bff; --brand-soft:#e8efff;
  --ok:#10b981; --ok-soft:#e2f8ef;
  --warn:#f59e0b; --warn-soft:#fef3e2;
  --err:#ef4444; --err-soft:#fdeaea;
  --line:#e6eaf2; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(600px 300px at 85% -10%,rgba(47,107,255,.10),transparent),
  radial-gradient(500px 280px at -5% 105%,rgba(16,185,129,.08),transparent);pointer-events:none}
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px;position:relative}

/* 顶栏 */
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;animation:up .5s ease both;flex-wrap:wrap;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
.logo .dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2f6bff,#7c3aed);display:grid;place-items:center;color:#fff;font-size:16px}
.nav-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mainnav{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.mainnav a{padding:7px 14px;border-radius:9px;text-decoration:none;color:var(--sub);font-size:14px;transition:.15s}
.mainnav a:hover{color:var(--brand);background:var(--brand-soft)}
.hello{color:var(--sub);font-size:14px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:13px}

/* flash 提示 */
.flash{background:var(--brand-soft);border:1px solid #c9dbff;color:var(--brand);padding:12px 18px;border-radius:12px;font-size:14px;margin-bottom:18px;animation:up .4s ease both}

/* 统计 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;animation:up .5s .08s ease both}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:transform .2s,box-shadow .2s}
.stat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(26,35,50,.08)}
.stat .num{font-size:30px;font-weight:700;letter-spacing:-.5px}
.stat .lbl{font-size:13px;color:var(--sub);margin-top:4px}

/* 工具条 */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;animation:up .5s .16s ease both}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;outline:none;transition:border .2s,box-shadow .2s}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--sub)}
select,input,textarea{font-family:inherit}
select{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;color:var(--ink);outline:none;cursor:pointer}
.btn{padding:11px 20px;border:none;border-radius:12px;background:var(--brand);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:filter .2s,transform .15s;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:var(--card);color:var(--sub);border:1px solid var(--line)}
.btn.ghost:hover{color:var(--brand);border-color:var(--brand)}
.btn.danger{background:var(--err)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%}
.linkbtn{background:none;border:none;color:var(--brand);cursor:pointer;font-size:13px;padding:4px 6px;border-radius:6px;font-family:inherit}
.linkbtn:hover{background:var(--brand-soft)}
.linkbtn.danger{color:var(--err)} .linkbtn.danger:hover{background:var(--err-soft)}
.linkbtn.ok{color:var(--ok)} .linkbtn.ok:hover{background:var(--ok-soft)}
.inlineform{display:inline-block}

/* 表格卡片 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;animation:up .5s .24s ease both}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:14px 16px;font-size:12px;color:var(--sub);font-weight:500;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:#f8faff}
.order-no{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:500;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:50%;font-style:normal}
.b-run{background:var(--brand-soft);color:var(--brand)} .b-run i{background:var(--brand)}
.b-ok{background:var(--ok-soft);color:var(--ok)} .b-ok i{background:var(--ok)}
.b-err{background:var(--err-soft);color:var(--err)} .b-err i{background:var(--err)}
.copyable{cursor:pointer;border-bottom:1px dashed #c3ccdd;transition:color .15s,border-color .15s}
.copyable:hover{color:var(--brand);border-color:var(--brand)}
.cell-acc{font-variant-numeric:tabular-nums;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.keycell code,.hintbar code{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:#f1f4fa;padding:2px 6px;border-radius:6px}
.cell-prog{max-width:220px}
.cell-note{max-width:180px;color:var(--sub)}
.time{white-space:nowrap;color:var(--sub);font-size:13px}
.empty{text-align:center;color:var(--sub);padding:40px 0 !important}
.dim{color:#c3ccdd}
.ops{display:flex;gap:4px;flex-wrap:wrap}

/* 编辑行 */
.editrow td{background:#f8fafd}
.editrow:hover td{background:#f8fafd}
.editrow[hidden]{display:none}

/* 表单网格 */
.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:20px}
.formgrid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--sub)}
.formgrid input,.formgrid select,.formgrid textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink);outline:none;background:var(--card);width:100%}
.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.formgrid input:disabled{background:#f1f4fa;color:var(--sub)}
.formgrid .full{grid-column:1/-1}
.formgrid .right{justify-content:flex-end;align-items:center;display:flex}
.formgrid .group{gap:10px}
.formgrid.inline{padding:14px;background:transparent;border:none}

/* 新增折叠框 */
.newbox{margin-bottom:18px;animation:up .5s .1s ease both}
.newbox>summary{list-style:none;cursor:pointer}
.newbox>summary::-webkit-details-marker{display:none}
.newbox>details,.newbox form{margin-top:14px}
.newbox .panel{animation:up .3s ease both}

/* 提示条 */
.hintbar{background:var(--warn-soft);border:1px solid #fbe3bc;color:#8a5b00;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:18px;line-height:1.8}

/* 登录注册 */
.authcard{max-width:400px;margin:60px auto 0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px 36px;box-shadow:0 20px 50px rgba(26,35,50,.08);animation:up .5s ease both}
.authcard h1{font-size:22px;margin-bottom:6px}
.authsub{color:var(--sub);font-size:13px;margin-bottom:26px}
.authcard form{display:flex;flex-direction:column;gap:16px}
.authcard label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--sub)}
.authcard input{padding:11px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;outline:none}
.authcard input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.authfoot{margin-top:22px;font-size:13px;color:var(--sub);text-align:center}
.authfoot a{color:var(--brand);text-decoration:none}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(26,35,50,.4);display:none;place-items:center;z-index:50;padding:20px}
.mask.show{display:grid}
.modal{background:var(--card);border-radius:var(--radius);max-width:520px;width:100%;padding:26px 28px;box-shadow:0 24px 60px rgba(26,35,50,.25);animation:pop .25s ease both}
.modal h3{font-size:16px;margin-bottom:6px}
.modal .m-sub{font-size:12px;color:var(--sub);margin-bottom:16px}
.modal .m-body{background:#f6f8fc;border:1px solid var(--line);border-radius:12px;padding:16px;font-size:14px;line-height:1.9;white-space:pre-wrap;max-height:50vh;overflow:auto}
.modal .m-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.m-btn{padding:9px 18px;border-radius:10px;font-size:14px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.m-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}

/* toast */
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 22px;border-radius:99px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%)}

/* 分配用户弹窗 */
.userpick{display:flex;flex-wrap:wrap;gap:10px;max-height:40vh;overflow:auto;padding:4px 2px}
.pickbtn{padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);transition:.15s}
.pickbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.pickbtn.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:500}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ================= 手机端适配 ================= */
@media(max-width:900px){
  .formgrid{grid-template-columns:repeat(2,1fr)}
  th:nth-child(7),td:nth-child(7){display:none}
}
@media(max-width:760px){
  .wrap{padding:16px 12px}
  header{margin-bottom:18px;gap:10px}
  .logo{font-size:17px}
  .mainnav{order:3;width:100%;justify-content:space-between}
  .mainnav a{flex:1;text-align:center;padding:8px 6px}
  .hello{display:none}
  .avatar{width:32px;height:32px;font-size:12px}

  /* 输入控件 16px 防 iOS 聚焦缩放 */
  input,select,textarea,.btn{font-size:16px !important}
  .btn{padding:12px 18px}

  .stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
  .stat{padding:14px 12px;text-align:center}
  .stat .num{font-size:24px}
  .stat .lbl{font-size:12px}

  .toolbar{flex-direction:column;align-items:stretch;gap:8px}
  .search{min-width:0}
  .toolbar select{width:100%}
  .toolbar .btn{width:100%}

  .formgrid{grid-template-columns:1fr;gap:12px;padding:14px}

  /* 管理端表格：横向滚动 */
  .panel{overflow-x:auto}
  .panel table{min-width:720px}

  /* 用户端表格：卡片化 */
  .cardlist{overflow:visible}
  .cardlist table{min-width:0}
  .cardlist thead{display:none}
  .cardlist table,.cardlist tbody,.cardlist tr,.cardlist td{display:block;width:100%}
  .cardlist tbody tr{border-bottom:1px solid var(--line);padding:10px 0;margin:0}
  .cardlist td{border:none;padding:7px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .cardlist td::before{content:attr(data-label);color:var(--sub);font-size:12px;flex:none}
  .cardlist td.empty{justify-content:center;padding:32px 16px}
  .cardlist td.empty::before{display:none}
  .cardlist td:first-child .order-no{font-size:15px}
  .cell-acc,.cell-prog,.cell-note{max-width:none;white-space:normal;word-break:break-all;text-align:right}
  .cell-prog,.cell-note{max-width:60%}

  .authcard{margin:28px auto 0;padding:28px 22px}
  .modal{padding:20px;max-width:100%}
  .userpick{gap:8px}
  .pickbtn{padding:10px 16px}
}