/* ========== 代理分销平台 UI 设计系统 base.css ========== */
:root{
  --primary:#165DFF; --primary-dark:#0E42D2; --primary-light:#E8F0FF; --primary-grad:linear-gradient(135deg,#165DFF 0%,#3D7BFF 100%);
  --accent:#FF7D00; --accent-light:#FFF3E8; --accent-grad:linear-gradient(135deg,#FF7D00 0%,#FF9A3D 100%);
  --bg:#F4F6FA; --card:#FFFFFF; --line:#EEF0F4;
  --text:#1D2129; --text2:#4E5969; --text3:#86909C; --text4:#C9CDD4;
  --green:#00B42A; --green-light:#E8F8EC; --red:#F53F3F; --red-light:#FDEDED;
  --r:12px; --r-lg:16px; --r-sm:8px;
  --shadow:0 4px 16px rgba(29,33,41,.06); --shadow-lg:0 8px 28px rgba(22,93,255,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{width:100%;height:100%}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;overflow:hidden}
img{display:block;max-width:100%}
::-webkit-scrollbar{display:none}

/* ---------- 移动端通用 ---------- */
.phone{width:100%;height:100vh;height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column;overflow:hidden}
.statusbar{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 21px;font-size:15px;font-weight:600;color:var(--text)}
.statusbar .sicons{display:flex;align-items:center;gap:5px}
.navbar{height:44px;flex:none;display:flex;align-items:center;justify-content:center;position:relative;font-size:17px;font-weight:600;background:transparent}
.navbar .back{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.navbar .nav-act{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:400;color:var(--text2)}
.page{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 16px 20px}
.page.no-pad{padding:0}
.tabbar{height:78px;flex:none;background:#fff;border-top:1px solid var(--line);display:flex;padding:8px 0 20px;box-shadow:0 -2px 12px rgba(29,33,41,.04)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--text3);cursor:pointer}
.tabbar .tab.on{color:var(--primary);font-weight:600}
.tabbar svg{width:24px;height:24px}

/* 按钮 */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;font-family:inherit;font-weight:600;border-radius:24px;transition:.2s}
.btn-primary{background:var(--primary-grad);color:#fff;box-shadow:0 6px 16px rgba(22,93,255,.28)}
.btn-accent{background:var(--accent-grad);color:#fff;box-shadow:0 6px 16px rgba(255,125,0,.28)}
.btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn-lg{height:48px;font-size:16px;width:100%}
.btn-md{height:38px;font-size:14px;padding:0 20px}
.btn-sm{height:28px;font-size:12px;padding:0 14px;border-radius:14px}
.btn[disabled]{opacity:.5;box-shadow:none}

/* 卡片 */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card+.card{margin-top:12px}
.sec-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin:18px 0 10px}
.sec-title::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--primary-grad)}
.sec-title.plain::before{display:none}
.sec-title .more{margin-left:auto;font-size:12px;color:var(--text3);font-weight:400}

/* 表单 */
.field{margin-bottom:14px}
.field .flabel{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px;display:block}
.field .flabel .req{color:var(--red);margin-right:2px}
.input,.textarea,.select{width:100%;border:1.5px solid #E5E8EF;background:#fff;border-radius:var(--r-sm);padding:0 14px;font-size:14px;font-family:inherit;color:var(--text);outline:none;transition:.2s}
.input{height:46px}
.textarea{padding:12px 14px;min-height:96px;resize:none;line-height:1.6}
.input:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,255,.08)}
.input::placeholder,.textarea::placeholder{color:var(--text4)}
.input-wrap{position:relative}
.input-wrap .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text3)}

/* 标签 */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600}
.tag-blue{background:var(--primary-light);color:var(--primary)}
.tag-orange{background:var(--accent-light);color:var(--accent)}
.tag-green{background:var(--green-light);color:var(--green)}
.tag-red{background:var(--red-light);color:var(--red)}
.tag-gray{background:#F2F3F5;color:var(--text3)}
.tag-gold{background:linear-gradient(135deg,#FFE8C2,#FFD89A);color:#8A5200}

/* 价格 */
.price{font-family:"DIN Alternate","Arial";font-weight:700;color:#F53F3F}
.price small{font-size:12px;font-weight:600}
.price-old{color:var(--text4);text-decoration:line-through;font-size:12px;font-weight:400}

/* 列表行 */
.cell{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:var(--r)}
.cell+.cell{margin-top:10px}
.cell .cicon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.cell .ct{flex:1;font-size:14px;font-weight:500}
.cell .cs{font-size:12px;color:var(--text3)}
.cell .arrow{color:var(--text4)}

/* 空状态 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 30px;text-align:center}
.empty img{width:150px;height:150px;object-fit:contain;margin-bottom:16px}
.empty .et{font-size:15px;font-weight:600;color:var(--text2)}
.empty .es{font-size:12px;color:var(--text3);margin-top:6px}
.empty .btn{margin-top:20px}

/* 商品卡 */
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.gcard .gimg{width:100%;aspect-ratio:1;object-fit:cover;background:#F7F8FA}
.gcard .ginfo{padding:10px 12px 12px}
.gcard .gname{font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.prow{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.stock{font-size:11px;color:var(--text3)}

/* 弹层 */
.mask{position:absolute;inset:0;background:rgba(15,20,35,.55);backdrop-filter:blur(2px);z-index:50;display:flex;align-items:flex-end}
.sheet{width:100%;background:#fff;border-radius:20px 20px 0 0;padding:20px 20px 30px;animation:up .3s ease}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet .shead{display:flex;align-items:center;justify-content:center;position:relative;font-size:16px;font-weight:700;padding-bottom:14px}
.sheet .sclose{position:absolute;right:0;top:0;color:var(--text3)}

/* 勾选 */
.checkline{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text3);line-height:1.6}
.checkline .box{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--primary);flex:none;display:flex;align-items:center;justify-content:center;margin-top:2px;background:var(--primary)}
.checkline a{color:var(--primary);text-decoration:none}

/* 步骤/提示条 */
.notice{display:flex;gap:8px;align-items:flex-start;background:var(--primary-light);border-radius:var(--r-sm);padding:10px 12px;font-size:12px;color:var(--primary);line-height:1.6}
.notice.orange{background:var(--accent-light);color:var(--accent)}

/* SKU 芯片 */
.sku-chip{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:8px;background:#F5F6F8;font-size:13px;margin:0 8px 8px 0;border:1.5px solid transparent}
.sku-chip.on{background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:600}

/* 分段 tab */
.seg{display:flex;background:#EDF0F5;border-radius:10px;padding:3px}
.seg .s{flex:1;text-align:center;height:30px;line-height:30px;border-radius:8px;font-size:13px;color:var(--text2)}
.seg .s.on{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.06)}

/* ---------- PC 后台通用 ---------- */
.admin{width:100%;height:100vh;display:flex;background:#F0F3F8;overflow:hidden}
.sidebar{width:240px;flex:none;background:linear-gradient(180deg,#0B1B3F 0%,#0E2A6B 100%);color:#fff;display:flex;flex-direction:column;padding:24px 0}
.sidebar .logo{display:flex;align-items:center;gap:10px;padding:0 24px 28px;font-size:17px;font-weight:700;letter-spacing:.5px}
.sidebar .logo .lg{width:36px;height:36px;border-radius:10px;background:var(--primary-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(22,93,255,.4)}
.menu{flex:1;overflow-y:auto;overflow-x:hidden}
.menu .mi{display:flex;align-items:center;gap:12px;height:48px;margin:2px 12px;padding:0 16px;border-radius:10px;font-size:14px;color:rgba(255,255,255,.72);cursor:pointer}
.menu .mi svg{width:18px;height:18px;opacity:.85}
.menu .mi.on{background:rgba(22,93,255,.9);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.menu .grp{padding:18px 28px 6px;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:1px}
.sidebar .sfoot{padding:16px 24px;font-size:11px;color:rgba(255,255,255,.35);border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;flex:none;background:#fff;display:flex;align-items:center;padding:0 28px;gap:16px;box-shadow:0 1px 4px rgba(15,23,42,.05);z-index:5}
.topbar .tbt{font-size:17px;font-weight:700}
.topbar .crumb{font-size:12px;color:var(--text3)}
.topbar .sp{flex:1}
.topbar .tuser{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2)}
.topbar .tuser .avt{width:34px;height:34px;border-radius:50%;background:var(--primary-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.content{flex:1;overflow:hidden;padding:24px 28px;min-height:0}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px}
.panel .pt{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.panel .pt::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--primary-grad)}
.panel .pt .extra{margin-left:auto;display:flex;gap:10px}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stat{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:84px;height:84px;border-radius:50%;background:var(--primary-light);opacity:.55}
.stat .sl{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px}
.stat .sv{font-size:30px;font-weight:800;margin-top:8px;font-family:"DIN Alternate",Arial;letter-spacing:.5px}
.stat .st{font-size:12px;margin-top:6px;color:var(--text3)}
.stat .st b{color:var(--green)}
.stat .st b.down{color:var(--red)}
.stat.o::after{background:var(--accent-light)} .stat.o .sv{color:var(--accent)}
.stat.b .sv{color:var(--primary)}
.stat.g::after{background:var(--green-light)} .stat.g .sv{color:var(--green)}
.stat.r::after{background:var(--red-light)} .stat.r .sv{color:var(--red)}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:#F7F9FC;color:var(--text2);font-weight:600;text-align:left;padding:12px 14px;white-space:nowrap}
.tbl th:first-child{border-radius:8px 0 0 8px}.tbl th:last-child{border-radius:0 8px 8px 0}
.tbl td{padding:13px 14px;border-bottom:1px solid #F2F4F8;color:var(--text);white-space:nowrap}
.tbl tr:hover td{background:#FAFBFE}
.tbl .sub{font-size:12px;color:var(--text3)}
.op-btn{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;font-size:12px;font-weight:600;border:1px solid transparent;cursor:pointer;margin-right:6px}
.op-blue{color:var(--primary);background:var(--primary-light)}
.op-orange{color:var(--accent);background:var(--accent-light)}
.op-red{color:var(--red);background:var(--red-light)}
.op-green{color:var(--green);background:var(--green-light)}
.op-gray{color:var(--text3);background:#F2F3F5}

/* PC 表单/筛选 */
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pinput{height:36px;border:1.5px solid #E5E8EF;border-radius:8px;padding:0 12px;font-size:13px;background:#fff;min-width:180px;color:var(--text);font-family:inherit}
.pbtn{height:36px;padding:0 18px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.pbtn.primary{background:var(--primary-grad);color:#fff;box-shadow:0 4px 10px rgba(22,93,255,.25)}
.pbtn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.pbtn.plain{background:#F2F3F5;color:var(--text2)}
.pager{display:flex;justify-content:flex-end;gap:6px;padding-top:14px;font-size:12px;color:var(--text2)}
.pager .pg{min-width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#F2F3F5;padding:0 6px}
.pager .pg.on{background:var(--primary);color:#fff}

/* 徽标点 */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.g{background:var(--green)}.dot.r{background:var(--red)}.dot.o{background:var(--accent)}.dot.b{background:var(--primary)}.dot.gr{background:var(--text4)}

/* 商品艺术插画底（CSS渐变+内联SVG商品造型） */
.art{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#EAF1FF 0%,#F7FAFF 60%,#FFF4E8 100%)}
.art svg{width:72%;height:72%;filter:drop-shadow(0 8px 14px rgba(20,50,120,.12))}
.art::before{content:"";position:absolute;width:130%;height:52%;left:-40%;top:-32%;background:radial-gradient(ellipse,rgba(255,255,255,.9),transparent 70%)}
.art.v2{background:linear-gradient(150deg,#FFF1E4 0%,#FFF9F2 55%,#EAF1FF 100%)}
.art.v3{background:linear-gradient(150deg,#E9FBF0 0%,#F5FFFA 55%,#EAF1FF 100%)}
.art.v4{background:linear-gradient(150deg,#F3ECFF 0%,#FAF7FF 55%,#EAF1FF 100%)}
.avatar{border-radius:50%;background:var(--primary-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}

/* 简易柱状/折线图容器辅助 */
.chart-tip{position:absolute;background:rgba(15,23,42,.85);color:#fff;font-size:11px;padding:5px 9px;border-radius:6px;pointer-events:none}
.legend{display:flex;gap:16px;font-size:12px;color:var(--text2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}