/* 汉服门店 · 后台管理系统样式（古风简约，与小程序端同源设计系统） */
:root{
  --bg:#faf6ef; --paper:#fffdf8; --ink:#3d332b; --ink2:#7a6f63;
  --cinnabar:#a5563e; --cinnabar-soft:#f3e4dc; --deep:#9a3b28; --gold:#b08d46;
  --line:#e6ddcf; --green:#5e7a5a; --red:#b23b2e; --side:#2f2823; --side2:#3d332b;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.65;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
.serif{font-family:"Songti SC","STSong","SimSun",serif;}
.hidden{display:none !important;}
a{color:var(--cinnabar);text-decoration:none;}

/* ── 登录 ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f3e4dc 0%,#faf6ef 45%,#efe7d8 100%);padding:24px;}
.login-card{width:400px;max-width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:40px 38px;box-shadow:0 18px 50px rgba(61,51,43,.12);text-align:center;}
.brand-mark{width:64px;height:64px;border-radius:16px;background:var(--cinnabar);color:#fff;
  font-family:"Songti SC",serif;font-size:34px;line-height:64px;margin:0 auto 16px;
  box-shadow:0 8px 20px rgba(165,86,62,.35);}
.brand-mark.sm{width:38px;height:38px;border-radius:10px;font-size:20px;line-height:38px;margin:0;}
.login-card h1{font-family:"Songti SC",serif;font-size:22px;letter-spacing:3px;margin-bottom:6px;}
.login-sub{color:var(--ink2);font-size:12.5px;margin-bottom:26px;}
.field{text-align:left;margin-bottom:16px;}
.field label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-size:14px;color:var(--ink);font-family:inherit;outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cinnabar);}
.lg-btn{width:100%;margin-top:6px;}
.lg-err{color:var(--red);font-size:12.5px;min-height:18px;margin-top:10px;}
.login-hint{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--ink2);line-height:1.9;text-align:left;}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border:none;border-radius:22px;background:var(--cinnabar);color:#fff;
  font-size:13.5px;font-family:inherit;cursor:pointer;transition:.15s;letter-spacing:.5px;}
.btn:hover{background:var(--deep);}
.btn.ghost{background:#fff;color:var(--cinnabar);border:1px solid var(--cinnabar);}
.btn.ghost:hover{background:var(--cinnabar-soft);}
.btn.danger{background:#fff;color:var(--red);border:1px solid #e0b3ac;}
.btn.danger:hover{background:#fbeceb;}
.btn.sm{padding:5px 12px;font-size:12.5px;border-radius:16px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── 布局 ── */
.layout{display:flex;min-height:100vh;}
.sidebar{width:216px;flex:none;background:var(--side);color:#e9e0d4;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid #ffffff14;}
.brand-tx b{display:block;font-family:"Songti SC",serif;font-size:16px;letter-spacing:2px;color:#fdf8f0;}
.brand-tx small{display:block;font-size:11px;color:#b6a894;letter-spacing:1px;}
.nav{flex:1;padding:12px 10px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
  color:#d8cdbd;font-size:13.5px;cursor:pointer;margin-bottom:3px;transition:.15s;}
.nav-item .ic{width:18px;text-align:center;font-size:15px;}
.nav-item:hover{background:#ffffff12;color:#fff;}
.nav-item.active{background:var(--cinnabar);color:#fff;}
.nav-group{font-size:11px;color:#8a7d6b;letter-spacing:2px;padding:12px 14px 4px;}
.side-foot{padding:12px 16px;border-top:1px solid #ffffff14;font-size:11px;color:#a99b86;}
.mode-badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:10px;margin-bottom:6px;}
.mode-badge.live{background:#2e4a2b;color:#bfe0b6;}
.mode-badge.mock{background:#5a4326;color:#f0d9a8;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:60px;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:5;}
.topbar h2{font-family:"Songti SC",serif;font-size:19px;letter-spacing:2px;}
.tb-right{display:flex;align-items:center;gap:14px;}
.staff-info{font-size:12.5px;color:var(--ink2);}
.staff-info b{color:var(--ink);}
.content{padding:24px 26px 50px;}

/* ── 卡片 ── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:20px;overflow:hidden;}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line);}
.card-hd h3{font-size:15px;font-weight:600;letter-spacing:1px;}
.card-hd .sub{font-size:12px;color:var(--ink2);font-weight:400;margin-left:8px;}
.card-bd{padding:18px 20px;}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;}
.toolbar .sp{flex:1;}
.toolbar input,.toolbar select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);outline:none;}
.toolbar input:focus,.toolbar select:focus{border-color:var(--cinnabar);}

/* ── 表格 ── */
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data th{background:#f6eee2;text-align:left;font-weight:600;color:var(--ink);
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.data td{padding:10px 12px;border-bottom:1px solid #f0e9dc;vertical-align:middle;}
table.data tr:hover td{background:#fcf8f1;}
table.data .num{font-family:Georgia,serif;}
.mono{font-family:"SF Mono",Consolas,Menlo,monospace;font-size:12px;color:var(--ink2);}
.actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ── 标签 ── */
.tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink2);background:#fff;white-space:nowrap;}
.tag.gold{border-color:#e0cf9f;background:#faf3e0;color:#8a6a2d;}
.tag.green{border-color:#bcd0b8;background:#eef4ec;color:var(--green);}
.tag.red{border-color:#e0b3ac;background:#fbeceb;color:var(--red);}
.tag.blue{border-color:#b9c6dc;background:#eef2f9;color:#40608f;}
.tag.gray{background:#f2ede4;}
.pill-role{font-size:11.5px;padding:2px 9px;border-radius:10px;background:var(--cinnabar-soft);color:var(--deep);}

/* ── KPI ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.kpi .k{font-size:12.5px;color:var(--ink2);margin-bottom:8px;}
.kpi .v{font-size:26px;font-family:Georgia,serif;letter-spacing:.5px;}
.kpi .v small{font-size:13px;color:var(--ink2);margin-left:3px;font-family:inherit;}
.kpi.accent .v{color:var(--cinnabar);}
.kpi.gold .v{color:var(--gold);}

/* ── 表单行 ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .full{grid-column:1 / -1;}
.field textarea{resize:vertical;min-height:70px;}

/* ── 弹窗 ── */
.modal-mask{position:fixed;inset:0;background:rgba(47,40,35,.42);display:flex;
  align-items:flex-start;justify-content:center;padding:60px 16px;z-index:60;overflow-y:auto;}
.modal{width:520px;max-width:100%;background:var(--paper);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);animation:pop .16s ease;}
@keyframes pop{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.modal-hd{padding:16px 22px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:1px;}
.modal-bd{padding:20px 22px;}
.modal-ft{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}
.detail-list{font-size:13px;}
.detail-list .r{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--line);}
.detail-list .r:last-child{border-bottom:none;}
.detail-list .r .l{color:var(--ink2);}
.timeline{list-style:none;margin-top:6px;}
.timeline li{position:relative;padding:0 0 14px 18px;border-left:1px solid var(--line);font-size:12.5px;}
.timeline li:last-child{border-left-color:transparent;}
.timeline li::before{content:"";position:absolute;left:-4.5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--cinnabar);}
.timeline .tt{color:var(--ink2);font-size:11.5px;}

/* ── Toast ── */
#toast-root{position:fixed;top:20px;right:20px;z-index:99;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--side);color:#fdf8f0;padding:11px 18px;border-radius:8px;font-size:13px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);animation:slidein .2s ease;max-width:340px;}
.toast.ok{background:#2e4a2b;}
.toast.err{background:#7a2b22;}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

.empty-line{text-align:center;color:var(--ink2);font-size:13px;padding:34px;}
.hint{font-size:12px;color:var(--ink2);}
.right{text-align:right;}
.nowrap{white-space:nowrap;}

/* ── 图片上传组件 ── */
.img-up{border:1px dashed var(--line);border-radius:8px;padding:12px;background:rgba(0,0,0,.015);}
.img-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.img-thumbs:empty{margin-bottom:0;}
.thumb{position:relative;width:86px;height:86px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#f5f0e6;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb .thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:17px;text-align:center;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;user-select:none;}
.thumb .thumb-del:hover{background:var(--cinnabar,#a3402e);}
.thumb .thumb-main{position:absolute;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);color:#fff;font-size:10px;
  font-style:normal;text-align:center;padding:1px 0;letter-spacing:1px;}
.img-up-ops{display:flex;align-items:center;gap:10px;}
.row-thumb{width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--line);vertical-align:middle;}