.pg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  .pg-head h1{ font-size:21px; font-weight:800; }
  .pg-head .desc{ font-size:13px; color:var(--muted); margin-top:7px; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 20px; border:none; border-radius:11px;
    background:linear-gradient(135deg,#d98a9b,#c25e77); color:#fff; font-size:13.5px; font-weight:700; cursor:pointer;
    box-shadow:0 10px 22px -10px rgba(194,94,119,.7); transition:filter .2s, transform .12s;
  }
  .btn-primary:hover{ filter:brightness(1.06); } .btn-primary:active{ transform:translateY(1px); }
  .btn-primary svg{ width:17px; height:17px; }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px; border:1.5px solid var(--line);
    border-radius:10px; background:#fff; color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; transition:.2s;
  }
  .btn-ghost:hover{ border-color:var(--rose); color:var(--rose-deep); background:#fbf3f6; }
  .btn-ghost svg{ width:15px; height:15px; }
  a.btn-primary, a.btn-ghost{ text-decoration:none; }

  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
  .stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 8px 22px -20px rgba(120,70,95,.5); display:flex; align-items:center; gap:14px; }
  .stat .si{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 44px; }
  .stat .si svg{ width:22px; height:22px; }
  .stat .sv{ font-size:22px; font-weight:800; line-height:1.1; }
  .stat .sl{ font-size:12.5px; color:var(--muted); margin-top:3px; }
  .stat .delta{ font-size:11.5px; font-weight:700; margin-left:6px; }
  .stat .delta.up{ color:#3a9d78; } .stat .delta.down{ color:#d1483c; }

  .toolbar{ background:#fff; border:1px solid var(--line); border-radius:14px 14px 0 0; border-bottom:none; padding:14px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .toolbar .tsearch{ position:relative; width:250px; }
  .toolbar .tsearch input{ width:100%; height:38px; border:1.5px solid var(--line); border-radius:10px; padding:0 12px 0 36px; font-size:13px; background:var(--soft); transition:.2s; }
  .toolbar .tsearch input:focus{ outline:none; border-color:var(--rose); background:#fff; box-shadow:0 0 0 4px rgba(217,138,155,.12); }
  .toolbar .tsearch svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--muted); }
  .seg{ display:flex; gap:5px; background:var(--soft); padding:4px; border-radius:10px; }
  .seg button{ border:none; background:transparent; padding:6px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; transition:.2s; }
  .seg button.active{ background:#fff; color:var(--rose-deep); box-shadow:0 3px 9px -4px rgba(0,0,0,.2); }
  .toolbar .spacer{ margin-left:auto; }
  .toolbar .cnt{ font-size:12.5px; color:var(--muted); }

  .tbl-wrap{ background:#fff; border:1px solid var(--line); border-radius:0 0 14px 14px; overflow:hidden; }
  table.tbl{ width:100%; border-collapse:collapse; }
  table.tbl th{ text-align:left; font-size:12.5px; color:var(--muted); font-weight:600; padding:13px 16px; background:#faf7f9; border-bottom:1px solid var(--line); white-space:nowrap; }
  table.tbl td{ padding:13px 16px; font-size:13.5px; border-bottom:1px solid #f4eff2; vertical-align:middle; }
  table.tbl tr:last-child td{ border-bottom:none; }
  table.tbl tbody tr{ cursor:pointer; transition:background .16s; }
  table.tbl tbody tr:hover{ background:#fbf6f8; }
  .cust{ display:flex; align-items:center; gap:11px; }
  .cust .cav{ width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; background:var(--brand-grad); }
  .cust .cn{ display:block; font-weight:600; } .cust .cp{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
  .pill{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; }
  .pill.ok{ background:#e6f5ee; color:#3a9d78; } .pill.warn{ background:#fbf1e0; color:#c07a3a; }
  .pill.bad{ background:#fdeaea; color:#d1483c; } .pill.info{ background:#eef0fb; color:#6a63c9; }
  .pill.gray{ background:#f3eef1; color:#9a8b93; }
  .money{ font-weight:700; } .money.neg{ color:var(--red); } .money.pos{ color:#3a9d78; }
  .row-acts{ display:flex; gap:8px; flex-wrap:nowrap; }
  .row-acts button{ flex:0 0 auto; white-space:nowrap; border:none; background:var(--soft); color:var(--rose-deep); font-size:12px; font-weight:600; padding:5px 12px; border-radius:8px; cursor:pointer; transition:.2s; }
  .row-acts button:hover{ background:#f6e3ea; }
  .row-acts button.warn{ color:#c07a3a; } .row-acts button.warn:hover{ background:#fbeee0; }
  .empty{ padding:48px; text-align:center; color:var(--muted); font-size:13.5px; }
  .pager{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px; }
  .pager button{ min-width:30px; height:30px; padding:0 8px; border:1px solid var(--line); background:#fff; border-radius:8px; font-size:12.5px; color:var(--muted); cursor:pointer; transition:.18s; font-family:inherit; }
  .pager button:hover{ border-color:var(--rose); color:var(--rose-deep); }
  .pager button.on{ background:var(--brand-grad); border-color:transparent; color:#fff; font-weight:700; }
  .pager button:disabled{ opacity:.45; cursor:not-allowed; }

  /* 抽屉 */
  .mask{ position:fixed; inset:0; background:rgba(38,26,38,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.28s; z-index:800; }
  .mask.show{ opacity:1; visibility:visible; }
  .drawer{ position:fixed; top:0; right:0; height:100%; width:440px; max-width:92vw; background:#fff; z-index:850;
    border-left:1px solid rgba(255,255,255,.7); box-shadow:-30px 0 80px -20px rgba(50,25,40,.55), -8px 0 26px -14px rgba(50,25,40,.45); transform:translateX(100%); transition:transform .32s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; }
  .drawer.show{ transform:translateX(0); }
  .dr-head{ padding:20px 22px; background:var(--brand-grad); color:#fff; position:relative; }
  .dr-head .x{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px; border:none; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; font-size:18px; line-height:1; }
  .dr-head .x:hover{ background:rgba(255,255,255,.3); }
  .dr-head .top{ display:flex; align-items:center; gap:13px; }
  .dr-head .cav{ width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; }
  .dr-head .cav svg{ width:26px; height:26px; stroke:#fff; }
  .dr-head .nm{ font-size:18px; font-weight:700; } .dr-head .ph{ font-size:12.5px; opacity:.85; margin-top:4px; }
  .dr-body{ flex:1; overflow-y:auto; padding:6px 22px 22px; }
  .dr-sec{ padding:16px 0; border-bottom:1px dashed var(--line); }
  .dr-sec:last-child{ border-bottom:none; }
  .dr-sec h4{ font-size:13px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  .dr-sec h4::before{ content:""; width:3px; height:13px; border-radius:2px; background:var(--rose); }
  .kv{ display:grid; grid-template-columns:88px 1fr; gap:9px 12px; font-size:13px; }
  .kv .k{ color:var(--muted); } .kv .v{ font-weight:600; }
  .drawer.form{ width:480px; z-index:880; }
  .dr-foot{ padding:15px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:#fff; flex:0 0 auto; }
  .dr-body .frm{ padding-top:6px; }

  /* 表单 */
  .frm{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
  .frm .full{ grid-column:1 / -1; }
  .frm label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; }
  .frm label .req{ color:var(--red); }
  .frm input,.frm select,.frm textarea{ width:100%; height:42px; border:1.5px solid var(--line); border-radius:10px; padding:0 12px; font-size:13.5px; background-color:#fcfafb; color:var(--ink); font-family:inherit; transition:.2s; }
  .frm textarea{ height:auto; padding:10px 12px; resize:vertical; }
  .frm select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:34px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:15px 15px; }
  .frm input:focus,.frm select:focus,.frm textarea:focus{ outline:none; border-color:var(--rose); background-color:#fff; box-shadow:0 0 0 4px rgba(217,138,155,.12); }
  .frm .fhint{ grid-column:1 / -1; font-size:11.5px; color:var(--muted); margin-top:-6px; }
  .frm .ferr{ grid-column:1 / -1; display:none; align-items:center; gap:7px; font-size:12.5px; color:var(--red); background:#fdecec; border:1px solid #f7d4d0; border-radius:9px; padding:8px 11px; }
  .frm .ferr.show{ display:flex; animation:alertIn .26s ease; }
  .frm .ferr svg{ width:15px; height:15px; flex:0 0 15px; stroke:var(--red); }
  .frm input.invalid,.frm select.invalid,.frm textarea.invalid{ border-color:var(--red); background-color:#fff6f5; animation:fieldShake .34s ease; }
  .frm label.switch{ display:inline-flex; align-items:center; gap:11px; height:42px; margin-bottom:0; font-weight:400; cursor:pointer; }
  .frm label.switch input{ position:absolute; opacity:0; width:0; height:0; }
  .frm label.switch .track{ width:46px; height:26px; border-radius:99px; background:#d9d2d7; position:relative; transition:.22s; cursor:pointer; flex:0 0 46px; }
  .frm label.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.22s; box-shadow:0 2px 5px rgba(0,0,0,.22); }
  .frm label.switch input:checked + .track{ background:var(--brand-grad); }
  .frm label.switch input:checked + .track::after{ transform:translateX(20px); }
  .frm label.switch .stxt{ font-size:12.5px; color:var(--muted); }

  @keyframes fieldShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-5px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} }
  @keyframes alertIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
  @keyframes popIn{ from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:translateY(0);} }