/* ============================================================
   拾搭 · 后台管理端  设计系统
   视觉语言沿用移动端《我的衣橱》：
   奶油白底 #FAF7F3 / 白卡细边 #EDE4DA / 墨黑 #201C19
   次要文字 #A2958A / 焦糖橙 #B5773F / 玫瑰金 #C4714B
   ============================================================ */
:root {
  --bg:        #FAF7F3;
  --side:      #201C19;
  --side-2:    #2C2622;
  --card:      #FFFFFF;
  --line:      #EDE4DA;
  --line-2:    #F4ECE1;
  --ink:       #201C19;
  --ink-2:     #6E6560;
  --muted:     #A2958A;
  --muted-2:   #8C8378;
  --accent:    #B5773F;
  --accent-2:  #C4714B;
  --gold:      #C9A05A;
  --ok:        #4E8A6B;
  --warn:      #C98A2E;
  --danger:    #B5473C;
  --info:      #4E7A8A;
  --r-lg:      18px;
  --r-md:      12px;
  --r-sm:      9px;
  --shadow:    0 6px 18px rgba(90, 70, 50, .06);
  --shadow-2:  0 10px 30px rgba(90, 70, 50, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: none; }
table { border-collapse: collapse; width: 100%; }
.hidden { display: none !important; }
.mono { font-family: "SFMono-Regular", Consolas, "Courier New", monospace; }

/* ---------------- 登录页 ---------------- */
.login {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 620px at 12% -10%, #FFF6EA 0%, rgba(255,246,234,0) 60%),
    radial-gradient(900px 520px at 110% 110%, #F6E8DA 0%, rgba(246,232,218,0) 58%),
    var(--bg);
  padding: 24px;
}
.login-box {
  width: 400px; max-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-2); padding: 32px 30px 26px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-logo {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  background: linear-gradient(145deg, #2C2622, #201C19);
  color: #E7C79B; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(32,28,25,.28);
}
.login-name { font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.login-sub { font-size: 10px; color: var(--muted); letter-spacing: 1.4px; margin-top: 3px; }
.login-title { font-size: 22px; font-weight: 800; letter-spacing: 1px; margin-bottom: 20px; }

.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 7px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #FDFBF8; transition: .16s;
}
.field textarea { height: auto; padding: 10px 13px; line-height: 1.7; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(181,119,63,.12);
}
.checkline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 18px; }
.checkline input { width: 15px; height: 15px; accent-color: var(--accent); }
.login-tip { margin-top: 16px; font-size: 12px; color: var(--muted-2); text-align: center; }
.login-tip b { color: var(--accent); }
.login-warn {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: #FDF6EC; border: 1px dashed #E3CFB4; color: var(--muted-2);
  font-size: 11.5px; line-height: 1.7; text-align: center;
}

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600; transition: .16s; white-space: nowrap;
}
.btn:hover { border-color: #DCCDBA; background: #FDFBF8; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #342C26; border-color: #342C26; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: #A56C36; border-color: #A56C36; }
.btn-danger { color: var(--danger); border-color: #E8CFC9; }
.btn-danger:hover { background: #FDF4F2; border-color: #DDB6AE; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.btn-lg { width: 100%; height: 46px; font-size: 15px; border-radius: var(--r-md); letter-spacing: 4px; }
.btn-ghost { background: transparent; border-style: dashed; color: var(--muted-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- 主体框架 ---------------- */
.shell { display: flex; min-height: 100%; }
.side {
  width: 232px; flex: none; background: var(--side); color: #D9CFC4;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side-brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 20px; }
.side-logo {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: linear-gradient(145deg, #3A322C, #201C19); border: 1px solid #4A4038;
  color: #E7C79B; font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.side-brand .n { font-size: 16px; font-weight: 800; color: #F3E9DC; letter-spacing: 1.2px; }
.side-brand .s { font-size: 9.5px; color: #7E7268; letter-spacing: 1.2px; margin-top: 3px; }
.side-nav { flex: 1; padding: 10px 12px; overflow-y: auto; }
.side-cap { font-size: 10.5px; color: #6E6258; letter-spacing: 1.4px; padding: 14px 10px 7px; }
.nav-i {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; font-size: 13.5px; color: #B8ADA2;
  transition: .16s; margin-bottom: 3px; user-select: none;
}
.nav-i svg { width: 17px; height: 17px; flex: none; }
.nav-i:hover { background: rgba(255,255,255,.05); color: #EFE5D9; }
.nav-i.on { background: linear-gradient(90deg, rgba(181,119,63,.28), rgba(181,119,63,.10)); color: #F6E7D2; font-weight: 700; }
.nav-i.on svg { color: var(--gold); }
.nav-i .dot { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-2); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.side-foot { padding: 14px 16px 18px; border-top: 1px solid #322B25; font-size: 11px; color: #7E7268; line-height: 1.8; }
.side-foot b { color: #C7B7A5; font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; flex: none; background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px;
  padding: 0 26px; position: sticky; top: 0; z-index: 20;
}
.topbar .title { font-size: 17px; font-weight: 800; letter-spacing: .8px; }
.topbar .crumb { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.topbar .grow { flex: 1; }
.admin-chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.admin-chip .av { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #E7C79B;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.admin-chip .nm { font-size: 12.5px; font-weight: 700; }
.admin-chip .rl { font-size: 10px; color: var(--accent); font-weight: 700; }
.content { flex: 1; padding: 22px 26px 40px; min-width: 0; }
.view { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- 卡片 / 栅格 ---------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.card + .card { margin-top: 16px; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-h .t { font-size: 15px; font-weight: 800; letter-spacing: .6px; }
.card-h .d { font-size: 11.5px; color: var(--muted); }
.card-h .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g21 { grid-template-columns: 1fr; } }
@media (max-width: 820px)  { .g3, .g2 { grid-template-columns: 1fr; } }

/* ---------------- 指标卡 ---------------- */
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 16px 18px 15px; position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; right: -26px; top: -26px; width: 84px; height: 84px;
  border-radius: 50%; background: radial-gradient(circle, rgba(181,119,63,.10), rgba(181,119,63,0)); }
.stat .lb { font-size: 12px; color: var(--muted-2); display: flex; align-items: center; gap: 6px; }
.stat .lb svg { width: 14px; height: 14px; color: var(--accent); }
.stat .v { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 8px 0 4px; line-height: 1.1; }
.stat .v small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.stat .sub { font-size: 11.5px; color: var(--muted); }
.stat .sub .up { color: var(--ok); font-weight: 700; }
.stat .sub .down { color: var(--danger); font-weight: 700; }
.stat.gold .v { color: var(--gold); }
.stat.gold .lb svg { color: var(--gold); }

/* ---------------- 工具条 ---------------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.search { position: relative; width: 268px; }
.search input {
  width: 100%; height: 38px; padding: 0 13px 0 36px;
  border: 1px solid var(--line); border-radius: 10px; background: #FDFBF8; transition: .16s;
}
.search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(181,119,63,.12); }
.search svg { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; color: var(--muted); }
.sel { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #FDFBF8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2958A' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 9px center / 15px;
  -webkit-appearance: none; appearance: none; cursor: pointer; font-size: 13px; }
.seg { display: inline-flex; background: #F5EFE8; border-radius: 10px; padding: 3px; gap: 2px; }
.seg .s { padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); cursor: pointer; transition: .16s; white-space: nowrap; }
.seg .s:hover { color: var(--ink); }
.seg .s.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(90,70,50,.10); font-weight: 700; }
.seg .s .c { font-size: 11px; color: var(--muted); margin-left: 4px; }
.seg .s.on .c { color: var(--accent); }

/* ---------------- 表格 ---------------- */
.tbl-wrap { overflow-x: auto; margin: 0 -20px -18px; padding: 0 20px 18px; }
.tbl { min-width: 900px; }
.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted-2);
  letter-spacing: .6px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: #FDFBF8; white-space: nowrap; position: sticky; top: 0;
}
.tbl th:first-child { border-top-left-radius: 8px; }
.tbl th:last-child { border-top-right-radius: 8px; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
.tbl tbody tr { transition: .14s; }
.tbl tbody tr:hover { background: #FDFAF6; }
.tbl .right { text-align: right; }
.tbl .center { text-align: center; }

.u-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.u-av { width: 34px; height: 34px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center; background: #B9A895; }
.u-av.vip { background: linear-gradient(145deg, #D8B36A, #B5773F); box-shadow: 0 2px 8px rgba(181,119,63,.35); }
.u-cell .nm { font-weight: 700; font-size: 13px; }
.u-cell .ph { font-size: 11px; color: var(--muted); margin-top: 2px; }

.id-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px;
  background: #F5EFE8; border: 1px solid var(--line); font-family: Consolas, monospace;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .4px; }
.id-tag.vip { background: linear-gradient(145deg, #FDF3E2, #F7E7CD); border-color: #E5C894; color: #8A6224; }
.id-tag.none { background: #FAFAF8; border-style: dashed; color: #C4BAAF; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.vip   { background: #FDF3E2; color: #8A6224; border: 1px solid #EDD5A6; }
.badge.user  { background: #F2F4F6; color: #5E6873; border: 1px solid #E1E6EA; }
.badge.ok    { background: #EDF5F0; color: var(--ok); border: 1px solid #D3E7DC; }
.badge.warn  { background: #FDF5E7; color: var(--warn); border: 1px solid #EFDCB4; }
.badge.danger{ background: #FBEFED; color: var(--danger); border: 1px solid #F0D5CF; }
.badge.info  { background: #EDF3F5; color: var(--info); border: 1px solid #D3E3E9; }
.badge.plain { background: #F5F3F0; color: var(--muted-2); border: 1px solid var(--line); }

.num { font-weight: 800; font-size: 14px; }
.num.acc { color: var(--accent); }
.num.gold { color: var(--gold); }
.bar-mini { width: 78px; height: 5px; border-radius: 999px; background: #F0E8DE; overflow: hidden; margin-top: 5px; }
.bar-mini i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #D8B36A, var(--accent)); }

.stars { color: #E2B33F; letter-spacing: 1px; font-size: 12px; white-space: nowrap; }
.stars .off { color: #DED5C9; }
.fb-text { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

.tbl-empty { text-align: center; padding: 54px 0; color: var(--muted); font-size: 13px; }
.tbl-empty svg { width: 44px; height: 44px; color: #E0D6C9; margin-bottom: 10px; }

/* ---------------- 分页 ---------------- */
.pager { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--muted-2); }
.pager .grow { flex: 1; }
.pg-btn { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.pg-btn:hover { border-color: #DCCDBA; }
.pg-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- 图表 ---------------- */
.chart-box { width: 100%; }
.chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px; }
.rank-row:last-child { border-bottom: 0; }
.rank-row .i { width: 20px; height: 20px; border-radius: 6px; background: #F5EFE8; color: var(--muted-2);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.rank-row .i.top { background: linear-gradient(145deg, #D8B36A, #B5773F); color: #fff; }
.rank-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-row .v { font-weight: 800; color: var(--accent); }

/* ---------------- 抽屉 / 弹窗 ---------------- */
.mask { position: fixed; inset: 0; background: rgba(32,28,25,.42); z-index: 60; display: flex; justify-content: flex-end; animation: fade .18s ease; }
.drawer { width: 520px; max-width: 96vw; height: 100%; background: var(--bg); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; animation: slideIn .24s cubic-bezier(.22,.8,.3,1); }
@keyframes slideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-h { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; gap: 12px; }
.drawer-h .t { font-size: 17px; font-weight: 800; letter-spacing: .6px; }
.drawer-h .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.drawer-h .x { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.drawer-h .x:hover { background: #FDFBF8; color: var(--ink); }
.drawer-b { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
.drawer-f { padding: 14px 22px; border-top: 1px solid var(--line); background: #fff; display: flex; gap: 10px; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 11px 14px; font-size: 13px; }
.kv .k { color: var(--muted-2); font-size: 12px; }
.kv .v { font-weight: 600; word-break: break-all; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); }
.info-card + .info-card { margin-top: 14px; }
.info-card .h { font-size: 13px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.info-card .h .r { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 400; }

.modal { width: 560px; max-width: 94vw; background: #fff; border-radius: 20px; box-shadow: var(--shadow-2);
  margin: auto; animation: pop .22s cubic-bezier(.22,.8,.3,1); overflow: hidden; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-h { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal-h .t { font-size: 16px; font-weight: 800; }
.modal-h .x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; color: var(--muted-2); display: flex; align-items: center; justify-content: center; }
.modal-b { padding: 18px 20px; max-height: 60vh; overflow-y: auto; }
.modal-f { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #FDFBF8; }

/* ---------------- Toast ---------------- */
.toast-wrap { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.toast { padding: 10px 18px; border-radius: 11px; background: rgba(32,28,25,.92); color: #fff;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-2); animation: pop .2s ease; }
.toast.ok { background: rgba(78,138,107,.95); }
.toast.err { background: rgba(181,71,60,.95); }

/* ---------------- 杂项 ---------------- */
.tip-line { font-size: 11.5px; color: var(--muted-2); line-height: 1.8; }
.divider { height: 1px; background: var(--line-2); margin: 14px 0; }
.nowrap { white-space: nowrap; }
.scroll-y { overflow-y: auto; }