/* ============================================================
   大鱼云印 · 门店工作台样式
   分层：1 设计变量  2 基础与布局  3 通用组件  4 各视图
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --orange:#ff5108;          /* 品牌橙（主操作） */
  --orange-deep:#e0460a;     /* 深橙（hover/强调） */
  --orange-tint:#fff0e8;     /* 橙浅底 */
  --ink:#18202a;
  --muted:#6f7782;
  --line:#e9edf2;
  --line-strong:#dbe3ee;
  --bg:#f5f7fa;
  --green:#168a55;
  --green-bg:#eaf7f0;
  --red:#d94343;
  --red-bg:#fdecec;
  --amber:#c6440c;
  --amber-bg:#fff0e8;
  --info:#2563d9;            /* 信息/链接蓝（仅此用途） */
  --info-bg:#eaf1fd;
  --night:#17202b;           /* 侧栏/深色块 */
  --card:#fff;               /* 面板底色 */
  --card-2:#fafbfc;          /* 表头等次级底 */
  --hover-tint:#fff8f4;      /* 行悬停橙浅底 */
  --roast:#22100a;           /* 登录页暖深底 */
  --radius:8px;
  --radius-lg:12px;
  --shadow-lg:0 13px 28px #fd500122;
  --speed:.18s}

/* ---------- 2. 基础与布局 ---------- */
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-size:13px}
button,input,select{font:inherit}
.hidden{display:none!important}

/* 顶部加载进度条：任一请求进行中显示 */
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;background:transparent;pointer-events:none;overflow:hidden}
#topbar:before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:0}
#topbar.on:before{opacity:1;animation:topbar-run 1s linear infinite}
@keyframes topbar-run{to{left:100%}}

/* 登录页 */
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr);background:#fff}
.login-vision{position:relative;min-height:100vh;overflow:hidden;padding:48px clamp(48px,5vw,74px) 34px;color:#fff;background:radial-gradient(circle at 78% 16%,#ff51083a 0,transparent 32%),linear-gradient(145deg,#22100a 0%,#2e1609 60%,#3a1d0b 100%);display:flex;flex-direction:column}
.login-vision:before{content:"";position:absolute;width:430px;height:430px;right:-190px;bottom:-190px;border:1px solid #ff9a6640;border-radius:50%;box-shadow:0 0 0 72px #ff8a5510,0 0 0 144px #ff8a550c}
.login-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(#ffb89122 1px,transparent 1px),linear-gradient(90deg,#ffb89122 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}
.vision-head,.vision-copy,.login-vision footer{position:relative;z-index:1}
.vision-head{display:flex;align-items:center;gap:14px}
.brand-logo{display:block;width:74px;height:54px;object-fit:contain;filter:drop-shadow(0 8px 18px #0000002b)}
.vision-head div{display:grid;gap:2px}
.vision-head b{font-size:19px;letter-spacing:.08em}
.vision-head span{color:#c9a68c;font-size:9px;letter-spacing:.18em}
.vision-copy{margin:auto 0;max-width:650px;padding:46px 0}
.vision-eyebrow{display:flex;align-items:center;gap:9px;color:#ffab7d;font-size:12px;font-weight:600;letter-spacing:.14em}
.vision-eyebrow i{width:24px;height:2px;background:#ff7c33}
.vision-copy h1{margin:22px 0 20px;font-size:clamp(38px,3.4vw,50px);line-height:1.25;letter-spacing:-.035em;font-weight:650}
.vision-copy p{max-width:560px;margin:0;color:#d8bfa9;font-size:15px;line-height:1.85}
.vision-features{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}
.vision-features span{display:flex;align-items:center;gap:8px;color:#eccdb4;font-size:12px}
.vision-features span i{width:5px;height:5px;border-radius:50%;background:#ff8a4d;box-shadow:0 0 0 4px #ff8a4d1f}
.login-vision footer{color:#a3806a;font-size:10px;letter-spacing:.08em}

.login-panel{position:relative;display:grid;place-items:center;min-height:100vh;padding:48px clamp(38px,6vw,84px);background:radial-gradient(circle at 100% 0,#fff4ec,transparent 32%),#fff}
.mobile-brand{display:none}
.login-card{width:min(420px,100%)}
.login-kicker{margin-bottom:18px;color:var(--orange-deep);font-size:10px;font-weight:700;letter-spacing:.2em}
.login-card h2{margin:0;color:#2a1c12;font-size:34px;letter-spacing:-.03em}
.login-intro{margin:12px 0 38px;color:#7b8798;font-size:14px;line-height:1.7}
.login-card label{display:block;margin:0 0 9px;color:#354258;font-size:13px;font-weight:600}
.field{position:relative;margin-bottom:21px}
.field>svg{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:#8b98aa;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.field input{width:100%;height:52px;padding:0 58px 0 46px;border:1px solid #e6e0da;border-radius:9px;background:#fdfbfa;color:#241a12;font-size:14px;outline:none;transition:var(--speed)}
.field input::placeholder{color:#a7b0bd}
.field input:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px #ff510816}
.field:focus-within>svg{stroke:var(--orange)}
.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#66758a;font-size:12px;cursor:pointer;padding:8px}
.password-toggle:hover{color:var(--orange-deep)}
.login-meta{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 22px;color:#929dac;font-size:11px}
.login-meta span:first-child{display:flex;align-items:center;gap:7px}
.login-meta i{width:6px;height:6px;border-radius:50%;background:#32b67a}
.login-submit{width:100%;height:52px;border:0;border-radius:9px;padding:0 18px;background:linear-gradient(90deg,#ff6a1a,var(--orange-deep));box-shadow:var(--shadow-lg);color:#fff;font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:var(--speed)}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 16px 32px #fd500133}
.login-submit:active{transform:translateY(0)}
.login-submit:disabled{opacity:.65;cursor:wait;transform:none}
.login-submit i{font-style:normal;font-size:19px;font-weight:400}
.form-error{min-height:20px;margin-top:14px;color:var(--red);font-size:12px;text-align:center}
.login-help{margin:17px 0 0;color:#9aa4b1;font-size:11px;text-align:center}
.login-card.shake{animation:login-shake .32s ease}
@keyframes login-shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* 主框架 */
.app{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:224px;padding:26px 18px;background:var(--night);color:#fff;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 28px}
.sidebar-logo{display:block;width:54px;height:42px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 7px 14px #00000038)}
.brand>div{display:grid;gap:2px}
.brand b{font-size:16px;white-space:nowrap}
.brand span{color:#95a0ad;font-size:11px}
.sidebar nav{display:grid;gap:6px;overflow-y:auto;min-height:0;padding-right:2px}
.nav{border:0;text-align:left;padding:10px 12px;font-size:13px;border-radius:var(--radius);color:#aeb7c2;background:transparent;cursor:pointer;display:flex;align-items:center;gap:11px;transition:var(--speed)}
.nav svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav.active,.nav:hover{color:#fff;background:#ffffff12}
.nav.active{background:linear-gradient(90deg,#ff510826,#ffffff0a);box-shadow:inset 3px 0 0 var(--orange)}
.account{margin-top:auto;border-top:1px solid #ffffff16;padding:18px 8px 0;display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}
.account button{border:0;background:transparent;color:#99a4b0;cursor:pointer}
.account button:hover{color:#fff}

main{margin-left:224px;padding:26px 32px 48px;max-width:1680px}
header{position:sticky;top:0;z-index:12;display:flex;justify-content:space-between;align-items:center;margin:-10px -12px 20px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px)}
header h2{margin:0;font-size:21px;letter-spacing:-.02em}
header p{margin:5px 0 0;color:var(--muted)}

/* ---------- 3. 通用组件 ---------- */
button.ghost{border:1px solid var(--line-strong);background:var(--card);padding:8px 14px;font-size:13px;border-radius:9px;cursor:pointer;transition:var(--speed)}
button.ghost:hover{border-color:var(--orange);color:var(--orange-deep)}
.primary-action{border:0;border-radius:8px;padding:8px 14px;font-size:13px;background:var(--orange);color:#fff;cursor:pointer;transition:var(--speed)}
.primary-action:hover{background:var(--orange-deep)}
.primary-action:disabled{opacity:.6;cursor:wait}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:16px}
.metric{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:0 8px 24px #17202b08}
.metric:after{content:"";position:absolute;right:-24px;bottom:-28px;width:70px;height:70px;border-radius:50%;background:var(--orange-tint);opacity:.65}
.metric span{display:block;color:var(--muted);font-size:12px}
.metric b{display:block;margin-top:8px;font-size:24px;letter-spacing:-.02em}
.metric.warn b{color:var(--amber)}
.metric.bad b{color:var(--red)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 24px #17202b08}
.notice{padding:20px;margin-top:18px}
.notice h3{margin:0 0 8px}
.notice p{margin:0;color:var(--muted);line-height:1.8}
input,select{border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;font-size:13px;background:var(--card);color:var(--ink);outline:none;transition:var(--speed)}
input:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff510818}
.toolbar{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-bottom:14px}
.toolbar select{min-width:170px;font-size:13px}
.toolbar input{height:34px;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:0 11px}
.table-wrap{overflow:auto;max-height:calc(100vh - 230px)}
table{width:100%;min-width:820px;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
/* 吸顶表头：长列表纵向滚动时表头常驻;用内阴影代替 border(边框折叠模式下 sticky 边框不跟随) */
th{color:var(--muted);font-size:11px;background:var(--card-2);position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
tbody tr{transition:background var(--speed)}
tbody tr:hover{background:var(--hover-tint)}
#orderRows{cursor:pointer}
.empty{text-align:center;color:var(--muted);padding:48px 56px}
.empty:before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3ccd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E") no-repeat center/contain}

/* 状态徽章：语义配色（完成绿/进行橙/待定红/发货蓝/取消灰/异常红） */
.status{display:inline-flex;padding:3px 8px;border-radius:20px;background:#eef2f6;font-size:12px;white-space:nowrap}
.status.doing{background:var(--amber-bg);color:var(--amber)}
.status.done{background:var(--green-bg);color:var(--green)}
.status.bad{background:var(--red-bg);color:var(--red)}
.status.wait{background:var(--red-bg);color:var(--red)}
.status.info{background:var(--info-bg);color:var(--info)}
.status.cancel{background:#eef2f6;color:#8a94a0}
.stars-gold{color:#f5a623;letter-spacing:2px}

.row-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:170px}
.row-actions button{border:1px solid var(--line-strong);border-radius:7px;padding:6px 9px;background:var(--card);color:var(--ink);font-size:12px;cursor:pointer;transition:var(--speed)}
.row-actions button:hover{border-color:var(--orange);color:var(--orange-deep)}
.row-actions button.primary{border-color:var(--orange-deep);background:var(--orange-deep);color:#fff}
.row-actions button.danger{border-color:#efcaca;color:#bd3434}
.row-actions button.danger:hover{border-color:var(--red);color:var(--red)}
.table-action{border:1px solid var(--line-strong);background:var(--card);border-radius:7px;padding:6px 10px;cursor:pointer;transition:var(--speed)}
.table-action:hover{border-color:var(--orange);color:var(--orange-deep)}
.cell-stack{display:grid;gap:4px}
.cell-stack small{color:var(--muted)}

/* 分页条 */
.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px}
.pager-btns{display:flex;align-items:center;gap:10px}
.pager-btns button{border:1px solid var(--line-strong);background:var(--card);border-radius:7px;padding:6px 13px;cursor:pointer;font-size:12px}
.pager-btns button:hover:not(:disabled){border-color:var(--orange);color:var(--orange-deep)}
.pager-btns button:disabled{opacity:.45;cursor:default}
.pager-btns b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* 行内骨架 */
.skrow{height:14px;border-radius:7px;background:#eef1f5;position:relative;overflow:hidden;margin:6px 0}
.skrow:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffb0,transparent);transform:translateX(-100%);animation:skrun 1.3s infinite}
@keyframes skrun{to{transform:translateX(100%)}}

/* 抽屉 */
.drawer-mask{position:fixed;inset:0;background:#10182066;z-index:20;animation:fadein .2s ease}
.drawer{position:fixed;z-index:21;right:0;top:0;bottom:0;width:min(620px,94vw);background:var(--card);box-shadow:-20px 0 60px #17202b26;display:flex;flex-direction:column;animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(60px);opacity:.4}}
@keyframes fadein{from{opacity:0}}
.drawer-head{display:flex;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head small{color:var(--muted)}
.drawer-head h2{margin:4px 0 0;font-size:18px}
.drawer-head button{border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;color:var(--muted)}
.drawer-head button:hover{color:var(--ink)}
.drawer-body{padding:20px 22px;overflow:auto}
.section{margin-bottom:24px}
.section h3{font-size:14px;margin:0 0 12px}
.section p{color:var(--muted);line-height:1.65}
.kv{display:grid;grid-template-columns:110px 1fr;gap:9px;font-size:14px;margin:8px 0}
.kv span:first-child{color:var(--muted)}
.file{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:8px 0}
.file strong{display:block;margin-bottom:5px}
.file small{color:var(--muted)}
.file button{margin-top:9px;border:0;background:var(--orange-tint);color:#bd410d;padding:7px 10px;border-radius:7px;cursor:pointer}
.file .error-line{display:block;margin-top:6px;color:var(--red);line-height:1.5}
.drawer-actions{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.drawer-actions button{border:1px solid var(--line-strong);background:var(--card);border-radius:9px;padding:10px 14px;cursor:pointer;transition:var(--speed)}
.drawer-actions button:hover{border-color:var(--orange);color:var(--orange-deep)}
.drawer-actions button.primary{border-color:var(--orange);background:var(--orange);color:#fff}
.drawer-actions button.primary:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.drawer-actions button.danger{border-color:#efcaca;color:#bd3434}

/* 模态对话框（替代浏览器原生 prompt/confirm） */
.modal-mask{position:fixed;inset:0;background:#10182073;z-index:30;animation:fadein .18s ease}
.modal{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,94vw);display:flex;animation:modalin .2s ease}
@keyframes modalin{from{transform:translate(-50%,-46%);opacity:0}}
.modal-card{background:var(--card);border-radius:12px;box-shadow:0 24px 70px #17202b40;width:100%;display:flex;flex-direction:column;max-height:88vh;overflow:auto;padding:20px 22px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.modal-head h3{margin:0;font-size:15px}
.modal-close{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px}
.modal-close:hover{color:var(--ink)}
.modal-message{margin:6px 0 14px;color:#42536a;font-size:14px;line-height:1.7;white-space:pre-line}
.modal-fields{display:grid;gap:13px;margin-bottom:18px}
.mfield{display:grid;gap:6px;font-size:13px;font-weight:600;color:#354258}
.mfield small{font-weight:400;color:var(--muted)}
.mfield input,.mfield select,.mfield textarea{width:100%;border:1px solid #dce2e9;border-radius:8px;padding:10px 12px;font-size:14px;outline:none;font-weight:400;transition:var(--speed);background:var(--card)}
.mfield textarea{resize:vertical;min-height:76px}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff510818}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:auto}
.modal-actions button{border:1px solid var(--line-strong);background:var(--card);border-radius:9px;padding:10px 18px;cursor:pointer;transition:var(--speed)}
.modal-actions button:hover{border-color:var(--orange);color:var(--orange-deep)}
.modal-actions button.primary-action{border-color:var(--orange);background:var(--orange);color:#fff}
.modal-actions button.primary-action:hover{background:var(--orange-deep);color:#fff}
.modal-actions button.danger-action{border-color:var(--red);background:var(--red);color:#fff}
.modal-actions button.danger-action:hover{background:#b93232;border-color:#b93232;color:#fff}

/* 轻提示 */
.toast{position:fixed;z-index:40;left:50%;bottom:36px;transform:translateX(-50%);background:var(--night);color:#fff;padding:11px 18px;border-radius:9px;box-shadow:0 8px 30px #0003;max-width:80vw;animation:fadein .18s ease}
.toast.ok{background:#0f5c3d}
.toast.err{background:#8f2b2b}

/* ---------- 4. 各视图 ---------- */
.section-panel{margin-top:18px;padding:20px}
.section-panel h3{margin:0 0 15px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.role-card{border:1px solid var(--line);border-radius:10px;padding:14px}
.role-card h4{margin:0 0 6px}
.role-card p{color:var(--muted);font-size:12px;line-height:1.6}
.role-card button,.subtabs button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 10px;cursor:pointer;transition:var(--speed)}
.role-card button:hover,.subtabs button:hover{border-color:var(--orange);color:var(--orange-deep)}
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.subtabs button.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.config-intro{padding:18px 20px;margin-bottom:14px}
.config-intro h3{margin:0 0 7px}
.config-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.config-value{font-weight:650}
.config-value.on{color:var(--green)}
.config-value.off{color:var(--muted)}
.report-filter label{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px}

/* 分销、公众号与订单推广 */
.compact-metrics{margin-bottom:16px}
.view-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:0 0 16px;padding:21px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(115deg,var(--card),var(--orange-tint));box-shadow:0 8px 24px #17202b08}
.view-intro h3{margin:5px 0 6px;font-size:18px}
.view-intro p{margin:0;color:var(--muted);line-height:1.65}
.eyebrow{display:block;color:var(--orange-deep);font-size:9px;font-weight:800;letter-spacing:.18em}
.integration-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:16px;padding:24px;border-radius:16px;color:#fff;background:radial-gradient(circle at 85% 10%,#34d39944,transparent 32%),linear-gradient(135deg,#122b24,#173e32);box-shadow:0 16px 38px #122b2424}
.integration-hero>div:first-child{display:flex;align-items:center;gap:16px}
.integration-hero h3{margin:4px 0 6px;font-size:20px}.integration-hero p{margin:0;color:#b8d6ca;line-height:1.6}
.integration-hero .eyebrow{color:#6ee7b7}
.integration-icon{display:grid;place-items:center;width:54px;height:54px;flex:0 0 auto;border:1px solid #ffffff24;border-radius:15px;background:#ffffff12;font-size:22px;font-weight:800}
.integration-checks{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.integration-checks span{padding:7px 10px;border:1px solid #ffffff20;border-radius:999px;color:#94aa9f;background:#ffffff09;font-size:11px}
.integration-checks span:before{content:"○";margin-right:5px}.integration-checks span.ok{color:#d7ffec;background:#25a2692a}.integration-checks span.ok:before{content:"✓"}
.notification-guide{margin-top:16px}.notification-guide code{display:inline-block;margin-top:12px;padding:7px 10px;border-radius:7px;background:var(--card-2);color:var(--orange-deep)}
.marketing-section{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px;border:1px solid #ffd8c5;border-radius:12px;background:linear-gradient(120deg,var(--orange-tint),var(--card))}
.marketing-section h3{margin:4px 0 5px}.marketing-section p{margin:0;font-size:12px}.marketing-section button{white-space:nowrap}

/* 图表（报表内联 SVG 柱状图） */
.chart{padding:20px}
.chart h3{margin:0 0 14px;font-size:14px}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:150px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.chart-bar{width:100%;max-width:34px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#ff7a35,var(--orange));min-height:2px}
.chart-bar.dim{background:#e3e9f0}
.chart-col small{font-size:10px;color:var(--muted);white-space:nowrap}
.chart-col em{font-style:normal;font-size:11px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* 订单状态分布环形图（conic-gradient，中心洞用面板色遮罩） */
.donut-wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.donut{width:180px;height:180px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center}
.donut-hole{width:118px;height:118px;border-radius:50%;background:var(--card);display:grid;place-content:center;text-align:center;gap:2px;box-shadow:0 4px 14px #17202b10}
.donut-hole b{font-size:26px;letter-spacing:-.02em}
.donut-hole span{font-size:11px;color:var(--muted)}
.donut-legs{display:grid;gap:8px;min-width:220px;flex:1}
.donut-leg{display:flex;align-items:center;gap:9px;font-size:13px}
.donut-leg i{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.donut-leg span{color:var(--muted)}
.donut-leg b{margin-left:auto;font-variant-numeric:tabular-nums}
.donut-leg small{color:var(--muted);width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* 响应式 */
@media(max-width:1100px){
.login-shell{display:block;background:#f7f9fc}
.login-vision{display:none}
.login-panel{min-height:100vh;padding:34px 24px}
.mobile-brand{position:absolute;left:24px;top:20px;display:flex;align-items:center;gap:9px;color:#3a2416}
.mobile-brand .brand-logo{width:58px;height:43px;filter:drop-shadow(0 6px 12px #5030181c)}
.mobile-brand b{font-size:17px}
.login-card{padding-top:66px}
.login-card h2{font-size:30px}
.login-intro{margin-bottom:30px}
.sidebar{width:76px}
.brand{justify-content:center;padding:0 0 28px}
.brand>div,.account span,.account button{display:none}
.sidebar-logo{width:52px;height:40px}
.nav{justify-content:center;padding:12px 0}
main{margin-left:76px;padding:22px 18px}
.metrics{grid-template-columns:repeat(2,1fr)}
.view-intro,.integration-hero{align-items:flex-start;flex-direction:column}.integration-checks{justify-content:flex-start}
}
@media(max-width:520px){
.login-panel{place-items:start center;padding-top:76px}
.login-meta{align-items:flex-start;gap:12px;flex-direction:column}
.metrics{grid-template-columns:1fr}
.marketing-section{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---------- 暗色模式：跟随系统，翻转面板与文字，品牌橙保持 ---------- */
@media(prefers-color-scheme:dark){
:root{
--bg:#0f1114;
--card:#1a1c21;
--card-2:#20232a;
--hover-tint:#ff510814;
--ink:#e6e6ea;
--muted:#9aa1ab;
--line:#2a2d34;
--line-strong:#3a3e47;
--green:#4ade80;
--green-bg:#17301f;
--red:#f27777;
--red-bg:#3a2124;
--amber:#ff9a5c;
--amber-bg:#3a2a1c;
--info:#7aa7f5;
--info-bg:#1c2739;
--orange-tint:#332117;
--shadow-lg:0 13px 28px #00000066;
}
.login-panel{background:radial-gradient(circle at 100% 0,#2a1c12,transparent 32%),var(--card)}
.login-card h2{color:#f0e8e0}
.login-card label{color:#c9c2ba}
.login-intro,.login-meta,.login-help{color:#8d949e}
.field input{background:#232329;border-color:var(--line-strong);color:#ececee}
.mobile-brand{color:#f0e8e0}
.status{background:#262a31}
.status.cancel{background:#262a31;color:#8a94a0}
.skrow{background:#262a31}
.skrow:after{background:linear-gradient(90deg,transparent,#ffffff14,transparent)}
.chart-bar.dim{background:#2a2d34}
.mfield small{color:var(--muted)}
.modal-message{color:#c3c9d1}
.marketing-section{border-color:#5a3525}
select option{background:var(--card);color:var(--ink)}
}

/* 渠道二维码弹窗 */
.qr-card{max-width:420px}
.qr-body{text-align:center;padding:6px 0 2px}
.qr-body img{width:280px;height:280px;background:var(--card-2);border-radius:8px}
.qr-body img:not([src]){visibility:hidden}
.qr-hint{margin:10px 0 4px;color:var(--muted);font-size:12px;line-height:1.6}

/* 订单抽屉文件行的前 N 页缩略图条：横向排列，点击看大图 */
.thumb-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb-strip:empty{display:none}
.thumb-page{width:120px;border:1px solid var(--line);border-radius:6px;cursor:zoom-in;background:var(--card-2)}

/* 封面模板色板 */
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);vertical-align:-2px;margin-right:6px}