/* ====== 基础变量 ====== */
:root {
  --p: #4f46e5;
  --pd: #4338ca;
  --s: #059669;
  --w: #d97706;
  --d: #dc2626;
  --b: #1e293b;
  --tx: #334155;
  --mu: #64748b;
  --bg: #f1f5f9;
  --card: #fff;
  --bdr: #e2e8f0;
  --r: 10px;
  --rs: 8px;
  --sh: 0 1px 3px rgba(0,0,0,.08);
}

*,::before,::after{box-sizing:border-box;margin:0;padding:0}

body {
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container{max-width:100%;margin:0 auto;padding:0 14px}

a{color:var(--p);text-decoration:none}
a:hover{text-decoration:underline}

h1{font-size:22px}h2{font-size:17px}h3{font-size:15px}
h1,h2,h3{font-weight:600;color:var(--b)}

/* ====== 卡片 ====== */
.card {
  background: var(--card);
  border-radius: var(--r);
  padding: clamp(14px,3vw,24px);
  margin-bottom: 12px;
  box-shadow: var(--sh);
  border: 1px solid var(--bdr);
}

/* ====== 表单控件 ====== */
.fg{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.fg label{font-size:12px;font-weight:600;color:var(--mu)}
.fg input,.fg select,.fg textarea {
  width:100%;padding:8px 10px;
  border:1.5px solid var(--bdr);
  border-radius:var(--rs);
  font-size:13px;font-family:inherit;
  transition:border-color .15s;
  background:#fff;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  outline:none;
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.fg textarea{resize:vertical;min-height:56px}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.frow{grid-template-columns:1fr}}

.req{color:var(--d);font-weight:700}
.muted{color:var(--mu);font-size:12px}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.gap-8{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mb-8{margin-bottom:8px}

/* ====== 按钮 ====== */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:9px 20px;border:none;border-radius:var(--rs);
  font-size:13px;font-weight:500;cursor:pointer;
  transition:all .15s;
  font-family:inherit;text-decoration:none;
  min-height:38px;white-space:nowrap;
}
.btn:hover{text-decoration:none;opacity:.9}
.btn-p{background:var(--p);color:#fff}
.btn-p:hover{background:var(--pd)}
.btn-s{background:var(--s);color:#fff}
.btn-w{background:var(--w);color:#fff}
.btn-d{background:var(--d);color:#fff}
.btn-o{background:#fff;color:var(--tx);border:1.5px solid var(--bdr)}
.btn-o:hover{background:#f8fafc}
.btn-sm{padding:5px 14px;font-size:12px;min-height:30px}
.btn-block{width:100%}

/* ====== 头部导航 ====== */
.header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background: var(--card);
  border-bottom:1px solid var(--bdr);
  margin:0 -14px 12px;
  box-shadow:var(--sh);
}
.header h1{font-size:20px}
.header .nav{display:flex;gap:4px}
.header .nav a {
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:var(--rs);
  font-size:13px;font-weight:500;
  color:var(--mu);text-decoration:none;
  transition:all .15s;
}
.header .nav a.active,.header .nav a:hover {
  background:var(--p);color:#fff;text-decoration:none;
}
.header .nav a.active.ship{background:var(--s)}
.header .nav a.active.return{background:var(--w)}
.header .user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mu)}
.header .user a {
  background:#f1f5f9;padding:4px 12px;border-radius:var(--rs);
  font-size:12px;color:var(--mu);text-decoration:none;
}
.header .user a:hover{background:var(--d);color:#fff}

/* ====== TAB ====== */
.tabs {
  display:flex;margin-bottom:14px;
  background:var(--card);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh);
}
.tabs a {
  flex:1;text-align:center;padding:10px;
  font-size:13px;font-weight:500;text-decoration:none;
  color:var(--mu);border-bottom:2px solid transparent;
  transition:all .15s;
}
.tabs a.active,.tabs a:hover {
  color:var(--p);border-bottom-color:var(--p);text-decoration:none;
}
.tabs a.active.ship{color:var(--s);border-bottom-color:var(--s)}
.tabs a.active.return{color:var(--w);border-bottom-color:var(--w)}

/* ====== 徽标 ====== */
.badge {
  display:inline-block;padding:2px 8px;border-radius:99px;
  font-size:11px;font-weight:500;margin-left:4px;
  background: red;color: #fff;
}
.badge-pending{background: #ff2a2a;color: #ffffff;}
.badge-done{background: #069f3a;color: #ffffff;}
.badge-done1{background: #783fb5;color: #ffffff;}
.badge-returned{background: #ff18a1;color: #ffffff;}
.badge-paid{background: #007d2b;color: #ffffff;}
.badge-unpaid{background:#fee2e2;color:#991b1b}
.badge-carrier{background:#ede9fe;color:#6d28d9;display:inline-block;margin-left:6px}

/* ====== 表格 ====== */
.tbl-wrap {
  overflow-x:auto;overflow-y:auto;
  border-radius:var(--rs);
  border:1px solid var(--bdr);
  -webkit-overflow-scrolling:touch;
}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-track{background:transparent}
.tbl-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

table{width:100%;border-collapse:collapse}
table th {
  background:#f1f5f9;
  color:#374151;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.3px;
  padding:5px 3px;
  white-space:nowrap;
  border-bottom:1.5px solid var(--bdr);
  text-align:left;
}
table td {
  padding:2px 3px;
  border-bottom:1px solid #f1f5f9;
  background:#fff;
  vertical-align:middle;
  font-size:13px;
  color:#393ddd;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
table td:last-child{overflow:visible}
table td:hover{overflow:visible;white-space:normal;position:relative;z-index:2;background:#fffbeb;box-shadow:0 2px 8px rgba(0,0,0,.15);max-width:none}
table th:last-child,table td:last-child {
  position:sticky;right:0;z-index:3;
  background:#fff;min-width:160px;
  box-shadow:-2px 0 4px rgba(0,0,0,.06);
}
table th:last-child{background:#f1f5f9;z-index:4}
table th:first-child,table td:first-child{position:sticky;left:0;z-index:3;background:#fff;min-width:55px;box-shadow:2px 0 4px rgba(0,0,0,.06)}
table th:first-child{background:#f1f5f9;z-index:5}
table tbody tr:hover td:first-child{background:#eaf5e9}

/* ====== 搜索栏 ====== */
.search-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.search-bar input {
  flex:1;min-width:180px;padding:8px 12px;
  border:1.5px solid var(--bdr);border-radius:var(--rs);font-size:13px;
}
.search-bar select {
  padding:8px 12px;border:1.5px solid var(--bdr);
  border-radius:var(--rs);font-size:13px;background:#fff;min-width:120px;
}

/* ====== 弹窗 ====== */
.modal {
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.35);
  z-index:100;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal.show{display:flex}
.modal-box {
  background:var(--card);
  border-radius:var(--r);
  padding:clamp(20px,4vw,32px);
  max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top: 20px}

.alert {
  padding:10px 14px;border-radius:var(--rs);
  font-size:13px;margin-bottom:10px;font-weight:500;
}
.alert-ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.alert-err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* ====== 单选切换 ====== */
.pay-toggle {
  display:flex;gap:0;border-radius:var(--rs);
  overflow:hidden;border:1.5px solid var(--bdr);
}
.pay-toggle input[type=radio]{display:none}
.pay-toggle label {
  flex:1;text-align:center;padding:6px 10px;
  cursor:pointer;font-size:12px;color:var(--mu);
  background:#fff;transition:all .12s;
  border-right:1px solid var(--bdr);white-space:nowrap;
}
.pay-toggle label:last-child{border-right:none}
.pay-toggle label.active,.pay-toggle label:hover {
  background:var(--p);color:#fff;
}

/* ====== 辅助 ====== */
.extract-area{display:none;margin-top:6px}
.extract-area.show{display:block}
.extract-area textarea {
  width:100%;min-height:50px;padding:8px;
  font-size:12px;border:1px solid var(--bdr);
  border-radius:var(--rs);resize:vertical;
}
.extract-pill {
  display:inline-block;padding:3px 10px;margin:3px;
  background:#dcfce7;color:var(--s);
  border-radius:99px;font-size:12px;cursor:pointer;
}
.extract-pill:hover{background:var(--s);color:#fff}
.carrier-tag{font-size:10px;color:var(--mu);margin-left:4px}
.empty-msg{text-align:center;padding:40px 20px;color:var(--mu);font-size:13px}

/* ====== 登录页 ====== */
.login-page {
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f0f4ff 0%,#e8f0fe 100%);
}
.login-box {
  background:#fff;border-radius:var(--r);
  padding:40px 36px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  text-align:center;
}
.login-box .icon {
  width:48px;height:48px;border-radius:12px;
  background:var(--p);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin-bottom:12px;
}
.login-box h1{font-size:20px;margin-bottom:4px}
.login-box .sub{font-size:12px;color:var(--mu);margin-bottom:20px}

/* ====== 统计卡片 ====== */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-card {
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--card);border-radius:var(--rs);
  border:1px solid var(--bdr);
}
.stat-icon {
  width:70px;height:40px;border-radius:var(--rs);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.stat-icon.pending{background: #e11bd9;color: #fdfdfd;}
.stat-icon.done{background: #0ea341;color: #ffffff;}
.stat-icon.returned{background: #fd0000;color: #ffffff;}
.stat-num{font-size:24px;font-weight:700}
.stat-label{font-size:11px;color:var(--mu)}

/* ====== 分页 ====== */
.pg{display:flex;align-items:center;gap:4px;margin-top:14px;flex-wrap:wrap}
.pg a,.pg span {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 6px;
  border-radius:var(--rs);font-size:13px;text-decoration:none;
  transition:all .12s;
}
.pg a{color:var(--tx);border:1px solid var(--bdr);background:#fff}
.pg a:hover{background:var(--p);color:#fff;border-color:var(--p);text-decoration:none}
.pg span.active{background:var(--p);color:#fff;font-weight:600}
.pg span.dots{color:var(--mu)}
.pg .total-hint{margin-left:8px;font-size:12px}

/* ====== Desktop 1600+ ====== */
@media(min-width:1600px){
  .container{max-width:1920px}
  table{font-size:13px}
  table td{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table td:hover{overflow:visible;white-space:normal;position:relative;z-index:2;background:#eaf5e9;box-shadow:0 2px 8px rgba(0,0,0,.15)}
  table td:last-child{white-space:nowrap!important;min-width:245px}
}

/* ====== Tablet/Mobile ====== */
@media(max-width:1599px){
  .task-table-wrap .tbl-wrap,.records-table-wrap .tbl-wrap{border:none;overflow-x:visible}
  .task-table-wrap table,.task-table-wrap thead,.task-table-wrap tbody,.task-table-wrap th,.task-table-wrap td,.task-table-wrap tr,
  .records-table-wrap table,.records-table-wrap thead,.records-table-wrap tbody,.records-table-wrap th,.records-table-wrap td,.records-table-wrap tr{display:block}
  .task-table-wrap thead tr,.records-table-wrap thead tr{display:none}
  .task-table-wrap tbody tr,.records-table-wrap tbody tr{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rs);margin-bottom:10px;padding:10px 12px;box-shadow:var(--sh)}
  .task-table-wrap td,.records-table-wrap td{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border:none;background:transparent;white-space:normal!important;font-size:13px;overflow:visible!important;text-overflow:clip!important;max-width:none!important}
  .task-table-wrap td:before,.records-table-wrap td:before{content:attr(data-label);font-weight:600;color:var(--mu);font-size:11px;margin-right:8px;flex-shrink:0;min-width:50px}
  .task-table-wrap td:last-child,.records-table-wrap td:last-child{justify-content:flex-end;padding-top:8px;border-top:1px solid var(--bdr);margin-top:4px;min-width:150px}
  .task-table-wrap td:last-child:before,.records-table-wrap td:last-child:before{display:none}
}

@media(max-width:768px){
  .container{padding:8px 10px}
  .header{padding:10px 14px;gap:6px}
  .header h1{font-size:16px}
  .header .nav a{padding:5px 10px;font-size:12px}
  .header .user{font-size:11px}
  .header .user a{padding:3px 10px;font-size:10px}
  .frow{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .card{padding:14px}
  .btn{padding:8px 16px;font-size:12px;min-height:34px}
  .btn-sm{padding:3px 10px;font-size:11px;min-height:26px}
  .modal-box{padding:20px;max-width:95vw}
}

@media(max-width:480px){
  .header{flex-direction:column;align-items:flex-start;gap:6px}
  .header .nav{width:100%}
  .header .user{align-self:flex-end;margin-top:-28px}
  .stats-row{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .stat-card{padding:10px}
  .stat-card .stat-num{font-size:18px}
}