/* ============ 基础 ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1218;
  --bg2:#161b25;
  --card:#1b2230;
  --card2:#212a3a;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --text:#e8edf7;
  --sub:#98a3b8;
  --dim:#616c80;
  --brand:#4f8cff;
  --brand2:#3b6fd4;
  --green:#34d399;
  --gold:#fbbf24;
  --red:#f87171;
  --purple:#a78bfa;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ============ 登录页 ============ */
.login-body{
  min-height:100vh;
  background:
    radial-gradient(700px 500px at 15% -5%, rgba(79,140,255,.18), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(167,139,250,.12), transparent 60%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem 1.2rem;
}
.login-wrap{ width:100%; max-width:400px; }
.login-brand{ text-align:center; margin-bottom:2rem; }
.login-logo{
  width:56px;height:56px;margin:0 auto 1rem;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--purple));
  border-radius:16px; color:#fff;
  box-shadow:0 12px 32px -10px rgba(79,140,255,.6);
}
.login-logo svg{width:28px;height:28px}
.login-title{ font-size:1.55rem; font-weight:700; letter-spacing:.02em; }
.login-sub{ color:var(--sub); font-size:.85rem; margin-top:.35rem; }

.login-form{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:1.4rem;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);
}
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.78rem; color:var(--sub); margin-bottom:.4rem; }
.field input{
  width:100%; padding:.78rem .9rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-family:var(--sans); font-size:.95rem;
  transition:.18s;
}
.field input:focus{ outline:none; border-color:var(--brand); background:rgba(79,140,255,.06); }
.field input::placeholder{ color:var(--dim); }

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.8rem 1.2rem; border-radius:10px;
  font-family:var(--sans); font-size:.95rem; font-weight:700;
  border:1px solid transparent; cursor:pointer; transition:.18s;
}
.btn:active{ transform:scale(.97); }
.btn-block{ width:100%; }
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:0 8px 24px -10px rgba(79,140,255,.7);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-sm{ padding:.42rem .8rem; font-size:.8rem; border-radius:8px; }
.btn-ghost{ background:var(--card2); border-color:var(--border2); color:var(--sub); }
.btn-ghost:hover{ color:var(--text); }
.btn-green{ background:rgba(52,211,153,.15); border-color:rgba(52,211,153,.4); color:var(--green); }
.btn-gold{ background:rgba(251,191,36,.15); border-color:rgba(251,191,36,.4); color:var(--gold); }
.btn-red{ background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.4); color:var(--red); }

.login-err{ color:var(--red); font-size:.82rem; margin-top:.7rem; min-height:1.1em; }

.demo-box{ margin-top:1.4rem; }
.demo-title{ font-size:.78rem; color:var(--dim); margin-bottom:.6rem; text-align:center; }
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.demo-btn{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:.6rem .5rem; cursor:pointer;
  text-align:center; transition:.18s;
}
.demo-btn:hover{ border-color:var(--brand); background:rgba(79,140,255,.08); }
.demo-btn .dn{ font-size:.85rem; font-weight:700; display:block; }
.demo-btn .dr{ font-size:.68rem; color:var(--sub); }
/* 角色配色: 左侧色条 */
.demo-btn{ position:relative; padding-left:.7rem; }
.demo-btn::before{ content:''; position:absolute; left:0; top:8%; bottom:8%; width:3px; border-radius:3px; background:var(--dim); }
.demo-company::before{ background:var(--purple); }
.demo-shop::before{ background:var(--brand); }
.demo-sup::before{ background:var(--gold); }
.demo-sale::before{ background:var(--green); }
.demo-company{ border-color:rgba(167,139,250,.28); }
.demo-shop{ border-color:rgba(79,140,255,.28); }
.demo-sup{ border-color:rgba(251,191,36,.28); }
.demo-sale{ border-color:rgba(52,211,153,.28); }
.demo-pw{ text-align:center; font-size:.75rem; color:var(--dim); margin-top:.7rem; }
.demo-pw b{ color:var(--gold); font-family:var(--mono); }

/* ============ 主应用 ============ */
.app-body{ min-height:100vh; background:var(--bg); padding-bottom:70px; }

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background:rgba(15,18,24,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.tb-left{ display:flex; align-items:center; gap:.6rem; }
.tb-avatar{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--purple));
  display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;
}
.tb-name{ font-size:.92rem; font-weight:700; line-height:1.2; }
.tb-role{ font-size:.68rem; color:var(--sub); }
.tb-right{ display:flex; gap:.4rem; align-items:center; }
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:9px; color:var(--sub); cursor:pointer; transition:.18s;
}
.icon-btn:hover{ color:var(--text); border-color:var(--border2); }
.icon-btn svg{ width:16px;height:16px; }

.page{ padding:1rem; max-width:680px; margin:0 auto; }

/* 数据卡 */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
.stat-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:.85rem .9rem;
}
.stat-card.wide{ grid-column:1/-1; }
.sc-label{ font-size:.72rem; color:var(--sub); margin-bottom:.3rem; }
.sc-val{ font-family:var(--mono); font-size:1.35rem; font-weight:700; line-height:1.2; }
.sc-val.green{ color:var(--green); }
.sc-val.gold{ color:var(--gold); }
.sc-val.brand{ color:var(--brand); }

/* 快捷入口 */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:1rem; }
.quick-item{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.7rem .3rem; text-align:center;
  cursor:pointer; transition:.18s;
}
.quick-item:hover{ border-color:var(--brand); background:rgba(79,140,255,.07); }
.quick-item svg{ width:20px;height:20px;color:var(--brand); display:block; margin:0 auto .35rem; }
.quick-item span{ font-size:.72rem; color:var(--sub); }

/* 通用卡片列表 */
.sec-title{
  font-size:.82rem; color:var(--sub); font-weight:700;
  margin:1.2rem 0 .6rem; display:flex; align-items:center; justify-content:space-between;
}
.list-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:13px; padding:.85rem .9rem; margin-bottom:.6rem;
}
.lc-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.lc-name{ font-size:.9rem; font-weight:700; }
.lc-sub{ font-size:.73rem; color:var(--sub); margin-top:.2rem; }
.lc-amt{ font-family:var(--mono); font-weight:700; font-size:.95rem; }
.lc-amt.green{ color:var(--green); }
.lc-amt.gold{ color:var(--gold); }
.lc-amt.red{ color:var(--red); }

.tag{
  display:inline-block; padding:1px 7px; border-radius:5px;
  font-size:.66rem; font-weight:700;
}
.tag.pending{ background:rgba(251,191,36,.15); color:var(--gold); }
.tag.paid{ background:rgba(79,140,255,.15); color:var(--brand); }
.tag.shipped{ background:rgba(167,139,250,.15); color:var(--purple); }
.tag.done{ background:rgba(52,211,153,.15); color:var(--green); }
.tag.cancelled{ background:rgba(120,130,150,.15); color:var(--dim); }
.tag.on{ background:rgba(52,211,153,.15); color:var(--green); }
.tag.off{ background:rgba(248,113,113,.15); color:var(--red); }

/* 产品卡 */
.prod-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:13px; padding:.85rem .9rem; margin-bottom:.6rem;
  display:flex; gap:.8rem; align-items:center; cursor:pointer; transition:.18s;
}
.prod-card:hover{ border-color:var(--brand); }
.prod-img{
  width:56px;height:56px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(79,140,255,.25),rgba(167,139,250,.2));
  display:grid;place-items:center; font-size:1.4rem;
}
.prod-info{ flex:1; min-width:0; }
.prod-name{ font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prod-spec{ font-size:.72rem; color:var(--sub); margin-top:.15rem; }
.prod-price{ font-family:var(--mono); font-weight:700; color:var(--gold); font-size:1rem; }
.prod-stock{ font-size:.68rem; color:var(--dim); }

/* 底部导航 */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(22,27,37,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:.4rem 0 calc(.4rem + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.35rem 0; cursor:pointer; color:var(--dim); transition:.18s;
}
.tab svg{ width:20px;height:20px; }
.tab span{ font-size:.66rem; }
.tab.active{ color:var(--brand); }

/* 弹层 */
.modal-mask{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center;
}
.modal-mask.show{ display:flex; }
.modal{
  width:100%; max-width:520px; background:var(--bg2);
  border-radius:18px 18px 0 0; padding:1.2rem;
  max-height:88vh; overflow-y:auto;
  animation:slideUp .26s cubic-bezier(.3,1,.4,1);
}
@keyframes slideUp{ from{transform:translateY(30px);opacity:.5} to{transform:translateY(0);opacity:1} }
.modal-title{ font-size:1rem; font-weight:700; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; }
.modal-close{ background:none;border:none;color:var(--dim);cursor:pointer;font-size:1.3rem;line-height:1;padding:0; }

/* 表单 */
.form-row{ margin-bottom:.85rem; }
.form-row label{ display:block; font-size:.76rem; color:var(--sub); margin-bottom:.35rem; }
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:.7rem .8rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-family:var(--sans); font-size:.9rem;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none; border-color:var(--brand);
}
.form-row select option{ background:var(--card); }

/* 趋势条 */
.bars{ display:flex; align-items:flex-end; gap:3px; height:90px; padding:.5rem 0; }
.bar{ flex:1; background:linear-gradient(180deg,var(--brand),rgba(79,140,255,.3)); border-radius:3px 3px 0 0; min-height:2px; transition:.3s; }
.bar-labels{ display:flex; gap:3px; font-size:.55rem; color:var(--dim); }
.bar-labels span{ flex:1; text-align:center; }

/* 排行 */
.rank-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--border); }
.rank-item:last-child{ border-bottom:none; }
.rank-no{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
  background:var(--card2); color:var(--sub);
}
.rank-no.top1{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#000; }
.rank-no.top2{ background:linear-gradient(135deg,#cbd5e1,#94a3b8); color:#000; }
.rank-no.top3{ background:linear-gradient(135deg,#d97706,#b45309); color:#fff; }
.rank-info{ flex:1; min-width:0; }
.rank-name{ font-size:.85rem; font-weight:700; }
.rank-sub{ font-size:.68rem; color:var(--sub); }

/* 空状态 */
.empty{ text-align:center; padding:2.5rem 1rem; color:var(--dim); font-size:.85rem; }
.empty svg{ width:40px;height:40px;opacity:.3; display:block; margin:0 auto .8rem; }

/* toast */
.toast{
  position:fixed; left:50%; top:12%; transform:translateX(-50%);
  background:rgba(30,37,50,.97); border:1px solid var(--border2);
  color:var(--text); padding:.7rem 1.1rem; border-radius:11px;
  font-size:.85rem; z-index:300; opacity:0; pointer-events:none;
  transition:.25s; max-width:86vw; text-align:center;
}
.toast.show{ opacity:1; }
.toast.ok{ border-color:rgba(52,211,153,.5); }
.toast.err{ border-color:rgba(248,113,113,.5); }

.loading{ text-align:center; padding:2rem; color:var(--dim); font-size:.85rem; }

@media (max-width:560px){
  .page{ padding:.85rem; }
  .stat-grid{ gap:.5rem; }
  .sc-val{ font-size:1.2rem; }
}

/* ===== 下单表单紧凑排版 ===== */
.cf { font-size: .86rem; }
.cf-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem 0;
  min-height: 1.9rem;
}
.cf-k {
  width: 4.2rem;
  flex-shrink: 0;
  color: var(--dim);
  font-size: .78rem;
}
.cf-v {
  color: var(--text);
  display: flex;
  align-items: center;
  word-break: break-all;
  min-width: 0;
}
.cf-v.brand { color: var(--brand); }
.cf-v.gold { color: var(--gold); }
.cf-sep {
  height: 1px;
  background: var(--border);
  margin: .35rem 0;
}
.cf-input {
  width: 100%;
  padding: .32rem .5rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: .86rem;
  outline: none;
}
.cf-input:focus { border-bottom-color: var(--brand); }
.cf-qr {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: none;
}
.cf-btn { margin-top: .7rem; }
.dim { color: var(--dim); }