/* ==========================================================
   聚工云 · 岗位分销与佣金结算平台
   Light UI system
   ========================================================== */
:root{
  --bg:#F4F6FA; --bg-2:#EDF1F7; --panel:#FFFFFF; --panel-2:#F7F9FC; --panel-3:#EEF2F8;
  --line:#E4E9F1; --line-2:#D5DDE9;
  --txt:#16202E; --txt-2:#56637A; --txt-3:#8A97A9;
  --gold:#C9761A; --gold-2:#A85F0F; --gold-bg:#FFF4E3; --gold-line:#F5D9B4;
  --blue:#2563EB; --blue-bg:#EBF1FE;
  --green:#0E9F6E; --green-bg:#E5F7F1;
  --red:#D93F45; --red-bg:#FDECEC;
  --purple:#6D4FD0; --purple-bg:#F0ECFC;
  --gray-bg:#F1F4F9;
  --r:14px; --r-sm:10px;
  --shadow:0 10px 30px -18px rgba(22,32,46,.28);
  --shadow-lg:0 24px 60px -30px rgba(22,32,46,.35);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt); font-family:var(--font);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 400px at 82% -6%, rgba(249,178,74,.18), transparent 62%),
    radial-gradient(640px 420px at 2% 2%, rgba(37,99,235,.10), transparent 62%);
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(22,32,46,.18); border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(22,32,46,.3)}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- layout ---------------- */
.app{display:flex; min-height:100vh; position:relative; z-index:1}
.sidebar{
  width:238px; flex:0 0 238px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:6px; padding:18px 14px 16px;
  background:#FFFFFF; border-right:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px}
.brand-mark{
  width:36px; height:36px; border-radius:11px; flex:0 0 36px;
  background:linear-gradient(145deg,#FFC466,#F29A22 55%,#DE7A16);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px;
  box-shadow:0 6px 14px -6px rgba(226,138,32,.7), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow:0 1px 1px rgba(120,60,0,.25);
}
.brand-name{font-size:15.5px; font-weight:700; letter-spacing:.4px; color:#14202F}
.brand-sub{font-size:11px; color:var(--txt-3); letter-spacing:.3px; margin-top:-1px}

.nav-group{margin-top:8px}
.nav-label{font-size:11px; color:var(--txt-3); letter-spacing:1.2px; padding:8px 10px 6px; font-weight:600}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
  color:var(--txt-2); cursor:pointer; font-size:13.5px; transition:.16s; border:1px solid transparent;
  user-select:none;
}
.nav-item svg{width:17px;height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 17px}
.nav-item:hover{background:#F4F7FC; color:var(--txt)}
.nav-item.on{
  background:linear-gradient(90deg,#FFF4E3,#FFFAF1);
  color:var(--gold-2); border-color:var(--gold-line); font-weight:600;
}
.nav-item.on svg{stroke:var(--gold)}
.nav-badge{
  margin-left:auto; font-size:11px; min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:var(--red); color:#fff; display:grid; place-items:center; font-weight:700; font-style:normal;
}
.nav-item.on .nav-badge{background:var(--gold); color:#fff}
.sidebar-foot{margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); font-size:11.5px; color:var(--txt-3); line-height:1.6}
.dot-live{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--green);margin-right:6px;box-shadow:0 0 0 3px rgba(14,159,110,.15)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:62px; position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:0 26px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.2);
}
.crumb{font-size:13px; color:var(--txt-3); display:flex; align-items:center; gap:7px}
.crumb b{color:var(--txt); font-weight:600}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:12px}

.seg{display:flex; padding:3px; gap:2px; background:#F1F4F9; border:1px solid var(--line); border-radius:10px}
.seg button{
  border:0; background:transparent; color:var(--txt-2); padding:6px 13px; border-radius:8px;
  font-size:12.5px; cursor:pointer; transition:.16s; white-space:nowrap;
}
.seg button.on{background:#fff; color:var(--txt); font-weight:600; box-shadow:0 2px 6px rgba(22,32,46,.12)}
.avatar{
  width:33px;height:33px;border-radius:50%; background:linear-gradient(145deg,#EEF2F8,#DDE5F0);
  border:1px solid var(--line-2); display:grid;place-items:center; font-size:12.5px; font-weight:700; color:#4B5A6E;
}

.sync-badge{
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px;
  font-size:11.5px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.sync-badge::before{content:""; width:6px;height:6px;border-radius:99px;background:currentColor}
.sync-badge.ok{background:var(--green-bg); color:var(--green); border-color:#C6EDDF}
.sync-badge.saving,.sync-badge.pending{background:var(--gold-bg); color:var(--gold-2); border-color:var(--gold-line)}
.sync-badge.error{background:var(--red-bg); color:var(--red); border-color:#F8D2D3}
.sync-badge.idle{background:var(--gray-bg); color:var(--txt-3); border-color:var(--line)}

.view{padding:24px 26px 70px; width:100%; max-width:1500px; margin:0 auto}

/* ---------------- boot ---------------- */
.boot{padding:120px 20px; text-align:center}
.boot-mark{
  width:60px;height:60px;margin:0 auto 18px; border-radius:17px;
  background:linear-gradient(145deg,#FFC466,#F29A22 55%,#DE7A16);
  display:grid;place-items:center;color:#fff;font-size:27px;font-weight:800;
  box-shadow:0 14px 30px -12px rgba(226,138,32,.75); text-shadow:0 1px 1px rgba(120,60,0,.25);
}
.boot-title{font-size:16px;font-weight:650}
.boot-sub{font-size:12.5px;color:var(--txt-3);margin-top:5px}
.boot-bar{width:180px;height:4px;border-radius:99px;background:#E7ECF4;margin:20px auto 0;overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFC466,#E8912D);animation:bootslide 1.1s ease-in-out infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------------- generic ---------------- */
.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-title{font-size:22px; font-weight:700; letter-spacing:.3px; margin:0}
.page-desc{font-size:12.5px; color:var(--txt-3); margin-top:4px}
.page-actions{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:0 1px 2px rgba(22,32,46,.04)}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.card-title{font-size:14px; font-weight:650; letter-spacing:.2px}
.card-sub{font-size:11.5px; color:var(--txt-3)}
.card-head .right{margin-left:auto; display:flex; align-items:center; gap:8px}

.grid{display:grid; gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span-2{grid-column:span 2}
@media(max-width:1240px){.g-6{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.g-2,.g-3{grid-template-columns:1fr}.span-2{grid-column:span 1}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--line-2);
  background:#fff; color:var(--txt); font-size:13px; cursor:pointer;
  transition:.16s; white-space:nowrap; font-weight:500;
}
.btn:hover{background:#F6F8FC; border-color:#BFCAE0}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{
  background:linear-gradient(180deg,#F9B44E,#E8912D); border-color:#E08A21; color:#fff; font-weight:600;
  box-shadow:0 6px 14px -8px rgba(226,138,32,.9);
}
.btn-primary:hover{background:linear-gradient(180deg,#FFC163,#F09A32); border-color:#D9821A}
.btn-ghost{background:transparent; border-color:transparent; color:var(--txt-2)}
.btn-ghost:hover{background:#F1F4F9; color:var(--txt)}
.btn-sm{height:28px; padding:0 10px; font-size:12px; border-radius:7px}
.btn-blue{background:var(--blue-bg); border-color:#CFE0FD; color:#1D4ED8}
.btn-blue:hover{background:#DFEAFE}
.btn-danger{background:var(--red-bg); border-color:#F8D2D3; color:var(--red)}
.btn-danger:hover{background:#FBE0E1}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.badge{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.2px; white-space:nowrap;
  background:var(--gray-bg); color:var(--txt-2);
}
.badge::before{content:""; width:5px;height:5px;border-radius:99px;background:currentColor; opacity:.9}
.badge.gold{background:var(--gold-bg); color:var(--gold-2)}
.badge.green{background:var(--green-bg); color:var(--green)}
.badge.blue{background:var(--blue-bg); color:var(--blue)}
.badge.purple{background:var(--purple-bg); color:var(--purple)}
.badge.red{background:var(--red-bg); color:var(--red)}
.badge.warn{background:var(--gold-bg); color:var(--gold-2)}
.badge.muted{background:var(--gray-bg); color:var(--txt-3)}
.badge.plain{background:transparent; padding-left:0}
.badge.plain::before{display:none}

.chip{
  display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:8px;
  font-size:12.5px; color:var(--txt-2); background:#fff;
  border:1px solid var(--line-2); cursor:pointer; transition:.15s; white-space:nowrap;
}
.chip:hover{color:var(--txt); border-color:#BFC9DC}
.chip.on{background:var(--gold-bg); border-color:var(--gold-line); color:var(--gold-2); font-weight:600}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* toolbar */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.search{
  display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:9px;
  background:#fff; border:1px solid var(--line-2); min-width:200px;
}
.search svg{width:14px;height:14px;stroke:var(--txt-3);fill:none;stroke-width:2}
.search input{border:0; background:transparent; outline:none; width:100%; font-size:13px}
.search input::placeholder{color:var(--txt-3)}
.toolbar .right{margin-left:auto; display:flex; gap:8px; align-items:center}

/* table */
.table-wrap{border:1px solid var(--line); border-radius:var(--r); overflow-x:auto; overflow-y:hidden; background:var(--panel)}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--txt-3); letter-spacing:.6px;
  padding:11px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:12px; border-bottom:1px solid #EFF2F7; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFE}
.t-main{font-weight:600; color:var(--txt)}
.t-sub{font-size:11.5px; color:var(--txt-3); margin-top:2px}
.t-money{font-weight:700; color:var(--gold-2); letter-spacing:.2px}
.t-actions{display:flex; gap:6px; justify-content:flex-end; white-space:nowrap}
.ta-r{text-align:right}
.ta-c{text-align:center}

/* progress */
.prog{display:flex; align-items:center; gap:8px; min-width:110px}
.prog-bar{flex:1; height:5px; border-radius:99px; background:#E9EEF6; overflow:hidden; min-width:52px}
.prog-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#F9B44E,#E8912D)}
.prog-bar i.done{background:linear-gradient(90deg,#34C79A,#0E9F6E)}
.prog-txt{font-size:11.5px; color:var(--txt-2); min-width:52px; text-align:right}

/* KPI */
.kpi{
  position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px 14px; box-shadow:0 1px 2px rgba(22,32,46,.04);
}
.kpi::after{content:""; position:absolute; right:-30px; top:-30px; width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(249,180,78,.18),transparent 70%)}
.kpi-label{font-size:12px; color:var(--txt-3); display:flex; align-items:center; gap:6px}
.kpi-val{font-size:26px; font-weight:750; letter-spacing:-.4px; margin-top:6px; line-height:1.15; color:var(--txt)}
.kpi-val small{font-size:14px; font-weight:600; color:var(--txt-2); margin-left:2px}
.kpi-foot{font-size:11.5px; color:var(--txt-3); margin-top:6px; display:flex; align-items:center; gap:5px}
.up{color:var(--green)} .down{color:var(--red)}
.kpi.gold{background:linear-gradient(180deg,#FFFDF8,#FFF8EE); border-color:var(--gold-line)}
.kpi.gold .kpi-val{color:var(--gold-2)}

/* chart */
.chart-box{position:relative}
.chart-legend{display:flex; gap:14px; font-size:11.5px; color:var(--txt-3)}
.chart-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px}

/* rank list */
.rank{display:flex; flex-direction:column; gap:13px}
.rank-row{display:grid; grid-template-columns:1fr 88px 46px; gap:10px; align-items:center}
.rank-name{font-size:12.5px; color:var(--txt-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank-bar{height:6px; border-radius:99px; background:#EDF1F7; overflow:hidden}
.rank-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FBBE63,#E8912D)}
.rank-val{font-size:12.5px; text-align:right; font-weight:600; color:var(--txt)}

/* feed */
.feed{display:flex; flex-direction:column}
.feed-item{display:flex; gap:11px; padding:11px 0; border-bottom:1px dashed #E9EEF6}
.feed-item:last-child{border-bottom:0; padding-bottom:0}
.feed-dot{width:7px;height:7px;border-radius:99px;margin-top:7px;flex:0 0 7px;background:var(--gold);box-shadow:0 0 0 3px rgba(201,118,26,.14)}
.feed-dot.g{background:var(--green);box-shadow:0 0 0 3px rgba(14,159,110,.14)}
.feed-dot.b{background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.feed-txt{font-size:12.5px; color:var(--txt-2); line-height:1.5}
.feed-txt b{color:var(--txt); font-weight:600}
.feed-time{font-size:11px; color:var(--txt-3); margin-top:2px}

/* empty */
.empty{padding:46px 20px; text-align:center; color:var(--txt-3); font-size:13px}
.empty-ico{font-size:26px; opacity:.4; margin-bottom:8px}

/* ---- job cards ---- */
.job-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(316px,1fr)); gap:14px}
.job-card{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:12px; transition:.18s; overflow:hidden;
  box-shadow:0 1px 2px rgba(22,32,46,.04);
}
.job-card:hover{border-color:var(--gold-line); transform:translateY(-2px); box-shadow:var(--shadow)}
.job-top{display:flex; gap:10px; align-items:flex-start}
.job-title{font-size:14.5px; font-weight:650; line-height:1.35}
.job-co{font-size:11.5px; color:var(--txt-3); margin-top:3px}
.job-cmsn{
  margin-left:auto; text-align:right; flex:0 0 auto;
  background:linear-gradient(180deg,#FFF6E8,#FFEFD9);
  border:1px solid var(--gold-line); border-radius:10px; padding:5px 9px;
}
.job-cmsn b{display:block; font-size:16px; color:var(--gold-2); letter-spacing:-.2px; line-height:1.2}
.job-cmsn span{font-size:10px; color:#B07C33; letter-spacing:.4px}
.job-meta{display:flex; gap:14px; font-size:12px; color:var(--txt-2); flex-wrap:wrap}
.job-meta b{color:var(--txt); font-weight:650}
.job-tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; padding:2px 7px; border-radius:5px; background:#F2F5FA; color:var(--txt-2); border:1px solid #E9EEF6}
.job-foot{display:flex; gap:7px; margin-top:2px; padding-top:11px; border-top:1px dashed #E9EEF6}
.job-foot .btn{flex:1}

/* ---- hero / promo ---- */
.hero{
  position:relative; overflow:hidden; border-radius:16px; padding:22px 24px;
  background:linear-gradient(120deg,#FFFFFF 0%,#FFFCF6 46%,#FFF3E1 100%);
  border:1px solid var(--gold-line); box-shadow:0 1px 2px rgba(22,32,46,.04);
}
.hero::before{
  content:""; position:absolute; right:-60px; top:-90px; width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,180,78,.28),transparent 62%);
}
.hero h2{margin:0 0 6px; font-size:19px; letter-spacing:.2px; color:#14202F}
.hero p{margin:0; font-size:12.5px; color:var(--txt-2); max-width:640px}
.hero-inner{position:relative; z-index:1; display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.link-box{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  background:#fff; border:1px dashed var(--gold-line); border-radius:10px; padding:7px 8px 7px 12px;
}
.link-box code{font-size:12px; color:var(--gold-2); letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- promo poster ---- */
.poster{
  width:100%; max-width:300px; border-radius:14px; overflow:hidden; border:1px solid var(--gold-line);
  background:linear-gradient(165deg,#FFFBF3,#FFFFFF 45%,#FFF6E8); padding:18px; position:relative;
  box-shadow:0 8px 20px -16px rgba(22,32,46,.5);
}
.poster-brand{font-size:11px; color:#B07C33; letter-spacing:1.5px; font-weight:600}
.poster-title{font-size:17px; font-weight:750; margin:8px 0 2px; line-height:1.35; color:#14202F}
.poster-co{font-size:11.5px; color:var(--txt-3)}
.poster-pay{font-size:22px; font-weight:800; color:var(--gold-2); margin-top:12px; letter-spacing:-.5px}
.poster-pay span{font-size:12px; font-weight:500; color:var(--txt-2); margin-left:3px}
.poster-line{height:1px; background:#F0E3CE; margin:13px 0}
.poster-row{display:flex; justify-content:space-between; font-size:11.5px; color:var(--txt-2); padding:2px 0}
.poster-row b{color:var(--txt)}
.poster-qr{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #F3E6D2; border-radius:9px; padding:9px;
}
.poster-qr .qr{width:52px;height:52px;border-radius:5px;background:#fff;display:grid;place-items:center;flex:0 0 52px;border:1px solid #EFE5D3}
.poster-qr .t{font-size:11px; color:var(--txt-2); line-height:1.5}

/* ---- modal ---- */
.modal-mask{
  position:fixed; inset:0; z-index:100; background:rgba(22,32,46,.42); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:22px; animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(10px) scale(.99)}to{opacity:1; transform:none}}
.modal{
  width:100%; max-width:560px; max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line-2);
  border-radius:16px; box-shadow:var(--shadow-lg); animation:rise .2s ease;
}
.modal>form{display:flex; flex-direction:column; min-height:0; overflow:hidden}
.modal.wide{max-width:760px}
.modal-head{display:flex; align-items:center; gap:10px; padding:17px 20px; border-bottom:1px solid var(--line); flex:0 0 auto}
.modal-title{font-size:15px; font-weight:650}
.modal-close{margin-left:auto; width:28px;height:28px; border-radius:7px; border:0; background:transparent; color:var(--txt-3); cursor:pointer; font-size:18px; line-height:1}
.modal-close:hover{background:#F1F4F9; color:var(--txt)}
.modal-body{padding:18px 20px; overflow:auto; flex:1; min-height:0}
.modal-foot{display:flex; gap:9px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--line); flex:0 0 auto; background:var(--panel-2)}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; color:var(--txt-2); font-weight:500}
.field label i{color:var(--red); font-style:normal; margin-left:2px}
.field input,.field select,.field textarea{
  height:36px; padding:0 11px; border-radius:9px; background:#fff;
  border:1px solid var(--line-2); outline:none; transition:.15s; font-size:13px;
}
.field textarea{height:auto; padding:9px 11px; resize:vertical; min-height:72px; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#E8B978; background:#FFFDF9; box-shadow:0 0 0 3px rgba(233,145,45,.14);
}
.field .hint{font-size:11px; color:var(--txt-3)}
.field select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A97A9' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 11px center; padding-right:30px}
.radio-row{display:flex; gap:8px; flex-wrap:wrap}
.radio-row label{
  display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-2); font-size:12.5px; color:var(--txt-2); background:#fff;
}
.radio-row input{display:none}
.radio-row label:has(input:checked){border-color:#E8B978; background:var(--gold-bg); color:var(--gold-2)}

/* toast */
#toast-root{position:fixed; z-index:200; right:22px; bottom:22px; display:flex; flex-direction:column; gap:9px; align-items:flex-end}
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:10px; font-size:13px;
  background:#fff; border:1px solid var(--line-2); color:var(--txt);
  box-shadow:0 18px 40px -18px rgba(22,32,46,.45); animation:rise .2s ease; max-width:340px;
}
.toast.ok{border-color:#C6EDDF; background:#F6FDFA; color:#0B7B55}
.toast.err{border-color:#F8D2D3; background:#FFF7F7; color:#B32B31}
.toast.gold{border-color:var(--gold-line); background:#FFFCF6; color:#9A570D}

/* misc */
.divider{height:1px; background:var(--line); margin:16px 0}
.stat-line{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px dashed #E9EEF6; font-size:13px}
.stat-line:last-child{border-bottom:0}
.stat-line span{color:var(--txt-2)}
.stat-line b{font-weight:650}
.big-money{font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--gold-2); line-height:1.2}
.big-money small{font-size:14px; font-weight:600; color:var(--txt-2); margin-left:3px; letter-spacing:0}
.note{
  display:flex; gap:9px; padding:11px 13px; border-radius:10px; font-size:12.5px; line-height:1.6;
  background:var(--blue-bg); border:1px solid #D6E4FD; color:#2C4FA8;
}
.note.gold{background:var(--gold-bg); border-color:var(--gold-line); color:#8A5210}
.note b{color:inherit}
.note>svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px}
.split{display:grid; grid-template-columns:1.5fr 1fr; gap:14px}
@media(max-width:1080px){.split{grid-template-columns:1fr}}
.kv{display:grid; grid-template-columns:88px 1fr; gap:8px 12px; font-size:13px}
.kv dt{color:var(--txt-3); font-size:12.5px}
.kv dd{margin:0; color:var(--txt)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.3px}

@media(max-width:920px){
  .app{flex-direction:column}
  .sidebar{
    width:100%; flex:none; height:auto; position:sticky; top:0; z-index:40;
    flex-direction:row; align-items:center; padding:8px 10px; gap:2px;
    overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  }
  .brand{padding:0 10px 0 2px; flex:0 0 auto}
  .brand-sub,.brand-name{display:none}
  .brand-mark{width:30px;height:30px;flex:0 0 30px;font-size:15px;border-radius:9px}
  .nav-group{display:contents}
  .nav-label{display:none}
  .nav-item{padding:7px 10px; font-size:12.5px; flex:0 0 auto; border-radius:9px}
  .nav-item span{display:inline}
  .nav-badge{margin-left:2px}
  .sidebar-foot{display:none}
  .topbar{padding:0 12px; height:54px; gap:8px}
  .crumb{display:none}
  .sync-badge{padding:0 7px; font-size:10.5px}
  .seg button{padding:5px 9px; font-size:12px}
  .topbar-right{gap:8px; margin-left:auto}
  .topbar select{max-width:110px}
  .avatar{width:29px;height:29px;font-size:11.5px}
  .view{padding:14px 12px 56px}
  .page-title{font-size:19px}
  .page-head{gap:10px}
  .page-actions{width:100%; margin-left:0}
  .toolbar{gap:8px}
  .toolbar .right{width:100%; margin-left:0}
  .search{width:100%; min-width:0}
  .g-4,.g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:12px 13px}
  .kpi-val{font-size:21px}
  .kpi-label{font-size:11.5px}
  .kpi-foot{font-size:11px}
  .job-grid{grid-template-columns:1fr}
  .hero{padding:16px 16px}
  .hero h2{font-size:16.5px}
  .link-box{flex-wrap:wrap; gap:6px}
  .link-box code{width:100%; font-size:11px}
  .link-box .btn{width:auto; margin-left:auto!important; margin-top:2px}
  .form-grid{grid-template-columns:1fr}
  .modal{max-height:92vh}
  .modal-foot{flex-wrap:wrap}
  .modal-foot .btn{flex:1; min-width:120px}
  #toast-root{left:12px; right:12px; bottom:12px; align-items:stretch}
  .toast{max-width:none}
}

/* ---- 登记打款 ---- */
.pay-amount{
  background:linear-gradient(180deg,#FFFDF8,#FFF6E8);
  border:1px solid var(--gold-line); border-radius:12px; padding:14px 16px;
}

/* ---- 结算凭据 ---- */
.voucher-sheet{
  background:#fff; border:1px solid #E3E8F0; border-radius:12px; padding:26px 26px 20px;
  box-shadow:0 10px 30px -24px rgba(22,32,46,.55); color:#16202E;
}
.voucher-head{display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid #16202E; padding-bottom:14px}
.voucher-brand{font-size:11.5px; letter-spacing:3px; color:#8A97A9; font-weight:600}
.voucher-title{font-size:19px; font-weight:800; letter-spacing:1.5px; margin-top:4px}
.voucher-status{
  font-size:12px; font-weight:700; color:var(--green); border:1.5px solid currentColor;
  padding:4px 10px; border-radius:6px; letter-spacing:1.5px; transform:rotate(-4deg); white-space:nowrap;
}
.voucher-meta{display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; margin-top:14px; font-size:12.5px}
.voucher-meta>div,.voucher-party>div{display:flex; gap:8px}
.voucher-meta span,.voucher-party span{color:#8A97A9; min-width:64px; flex:0 0 64px}
.voucher-meta b,.voucher-party b{font-weight:600; word-break:break-all}
.voucher-party{display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; margin-top:7px; font-size:12.5px; padding-bottom:4px}
.voucher-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:12px}
.voucher-table th{
  background:#F7F9FC; border-top:1px solid #D5DDE9; border-bottom:1px solid #D5DDE9;
  padding:7px 8px; text-align:left; color:#56637A; font-weight:600;
}
.voucher-table td{padding:7px 8px; border-bottom:1px dashed #E9EEF6}
.voucher-table tfoot td{border-top:1px solid #D5DDE9; border-bottom:0; font-size:13px; padding-top:9px}
.voucher-foot{margin-top:16px; padding-top:12px; border-top:1px dashed #E9EEF6; font-size:11px; color:#8A97A9; line-height:1.7}
.voucher-sign{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:11.5px; color:#56637A}
.voucher-sign i{flex:1; height:1px; border-bottom:1px dashed #C9D3E2; min-width:50px}

/* ---- 打印：只输出凭据 ---- */
@media print{
  body{background:#fff}
  body::before{display:none}
  .sidebar,.topbar,.no-print,#toast-root{display:none !important}
  .modal-mask{position:static; background:none; backdrop-filter:none; padding:0; display:block; animation:none}
  .modal{max-width:none; max-height:none; box-shadow:none; border:0; background:#fff; animation:none}
  .modal-head{display:none}
  .modal-body{background:#fff !important; padding:0; overflow:visible}
  .voucher-sheet{border:0; box-shadow:none; padding:0}
  @page{size:A4; margin:16mm}
}

/* ---- 登录页 ---- */
.login-wrap{min-height:calc(100vh - 140px); display:grid; place-items:center; padding:20px}
.login-card{
  width:100%; max-width:360px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:34px 30px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.login-mark{
  width:54px;height:54px;margin:0 auto 2px;border-radius:15px;
  background:linear-gradient(145deg,#FFC466,#F29A22 55%,#DE7A16);
  display:grid;place-items:center;color:#fff;font-size:24px;font-weight:800;
  box-shadow:0 10px 22px -10px rgba(226,138,32,.85); text-shadow:0 1px 1px rgba(120,60,0,.25);
}
.login-title{text-align:center;font-size:20px;font-weight:800;letter-spacing:2px}
.login-sub{text-align:center;font-size:12px;color:var(--txt-3);margin-top:-8px;margin-bottom:4px}
.login-err{min-height:18px;font-size:12.5px;color:var(--red);text-align:center}
.login-btn{width:100%;height:38px;margin-top:8px;font-size:14px}
.login-hint{text-align:center;font-size:11.5px;color:var(--txt-3);margin-top:6px}
.user-chip{font-size:12.5px;color:var(--txt-2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:920px){.user-chip{display:none}}

/* 登录页：隐藏后台框架 */
body.login-mode .sidebar,
body.login-mode .topbar{display:none}
body.login-mode .view{padding:0;max-width:none}
body.login-mode .login-wrap{min-height:100vh}

/* 海报二维码 */
.poster-qr .qr{overflow:hidden}
.poster-qr .qr svg{width:100%;height:100%;display:block}