/* ============================================================
   订货宝渠道 CRM · 样式
   品牌色 #FF6B40 / 辅助色 #233B57 / 中性色阶
   ============================================================ */
:root{
  --brand:#FF6B40; --brand-end:#FFA474; --brand-light:#FFECE0; --brand-hover:#FF8A5C; --brand-active:#E85D35;
  --gradient-brand:linear-gradient(135deg,#FF6B40,#FFA474);
  --aux:#233B57;
  --n900:#1F2329; --n700:#4E5969; --n500:#86909C; --n400:#C9CDD4; --n300:#E5E6EB; --n200:#F2F3F5; --n100:#F7F8FA; --n50:#FAFBFC;
  --success:#00B42A; --success-bg:#E8FFEA; --success-bd:#9FDB1D;
  --warning:#FF7D00; --warning-bg:#FFF7E8; --warning-bd:#FFD699;
  --danger:#F53F3F; --danger-bg:#FFECE8; --danger-bd:#FDCCCC;
  --info:#3491FA; --info-bg:#E8F3FF; --info-bd:#94BFFF;
  --bg:#F7F8FA; --white:#fff; --inverse:#1F2329; --sidebar:#1D2129; --sidebar-hover:#2A2F3A;
  --font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:SFMono-Regular,Consolas,Menlo,Courier,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-xs:0 1px 2px 0 rgba(0,0,0,.04);
  --sh-sm:0 4px 10px 0 rgba(0,0,0,.06);
  --sh-md:0 8px 24px rgba(0,0,0,.08);
  --sh-lg:0 12px 36px rgba(0,0,0,.12);
  --sh-brand:0 8px 24px rgba(255,107,64,.25);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--n700);
  font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit;}
a{color:var(--brand);text-decoration:none;}
.hide{display:none !important;}
.mono{font-family:var(--mono);font-size:13px;}
.muted{color:var(--n500);}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ---------------- 登录 ---------------- */
#login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--inverse);padding:24px;position:relative;overflow:hidden;
}
#login::before{
  content:"";position:absolute;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,64,.28),transparent 62%);
  top:-280px;right:-200px;
}
#login::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(35,59,87,.5),transparent 65%);
  bottom:-260px;left:-160px;
}
.login-box{
  position:relative;z-index:2;width:100%;max-width:400px;background:var(--white);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:40px 36px 32px;
}
.login-box .logo{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.login-box .logo img{height:26px;}
.login-box h1{font-size:24px;font-weight:600;color:var(--n900);margin:0 0 6px;}
.login-box .sub{color:var(--n500);font-size:14px;margin:0 0 26px;}
.login-box .field{margin-bottom:16px;}
.login-box label{display:block;font-size:13px;color:var(--n700);margin-bottom:6px;font-weight:500;}
.login-err{
  background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-bd);
  border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin-bottom:14px;
}

/* ---------------- 布局 ---------------- */
#app{display:flex;min-height:100vh;}
.sidebar{
  width:210px;flex:0 0 210px;background:var(--sidebar);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:9px;padding:18px 16px 16px;}
.sidebar .brand img{height:22px;filter:brightness(0) invert(1);opacity:.96;}
.sidebar .brand .name{font-size:15px;font-weight:600;letter-spacing:.5px;}
.sidebar nav{flex:1;overflow-y:auto;padding-bottom:12px;}
.sidebar nav::-webkit-scrollbar{width:5px;}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px;}
.nav-group{padding:14px 16px 6px;font-size:11px;color:rgba(255,255,255,.38);letter-spacing:1px;}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:14px;color:rgba(255,255,255,.76);
  cursor:pointer;border-left:2px solid transparent;transition:.16s;user-select:none;
}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{background:rgba(255,107,64,.14);color:#fff;border-left-color:var(--brand);font-weight:500;}
.nav-item .ic{width:16px;text-align:center;opacity:.9;font-size:14px;}
.nav-item .badge{
  margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:600;
  border-radius:var(--r-sm);padding:1px 6px;line-height:1.5;min-width:18px;text-align:center;
}
.sidebar .me{
  border-top:1px solid rgba(255,255,255,.09);padding:12px 16px;display:flex;align-items:center;gap:9px;
}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--gradient-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:0 0 30px;
}
.sidebar .me .info{flex:1;min-width:0;}
.sidebar .me .nm{font-size:13px;color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar .me .rl{font-size:11px;color:rgba(255,255,255,.45);}
.sidebar .me .out{cursor:pointer;color:rgba(255,255,255,.5);font-size:15px;padding:2px 4px;}
.sidebar .me .out:hover{color:var(--brand);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  height:56px;background:var(--white);border-bottom:1px solid var(--n300);
  display:flex;align-items:center;padding:0 24px;gap:14px;position:sticky;top:0;z-index:30;
}
.topbar h2{font-size:17px;font-weight:600;color:var(--n900);margin:0;}
.topbar .spacer{flex:1;}
.content{padding:20px 24px 40px;flex:1;}

/* ---------------- 组件 ---------------- */
.btn{
  height:34px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--n300);
  background:var(--white);color:var(--n900);font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:.16s;white-space:nowrap;
}
.btn:hover{border-color:var(--n400);box-shadow:var(--sh-xs);}
.btn:active{background:var(--n100);}
.btn-primary{background:var(--gradient-brand);border:none;color:#fff;}
.btn-primary:hover{box-shadow:var(--sh-brand);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--brand);}
.btn-ghost:hover{background:var(--brand-light);box-shadow:none;}
.btn-danger-ghost{background:transparent;border-color:transparent;color:var(--danger);}
.btn-danger-ghost:hover{background:var(--danger-bg);box-shadow:none;}
.btn-sm{height:28px;padding:0 10px;font-size:13px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}

.input,.select,.textarea{
  height:34px;padding:0 10px;border:1px solid var(--n300);border-radius:var(--r-sm);
  background:var(--white);color:var(--n900);outline:none;transition:.16s;width:100%;
}
.textarea{height:auto;padding:8px 10px;line-height:1.6;resize:vertical;font-family:inherit;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,107,64,.1);}
.input::placeholder,.textarea::placeholder{color:var(--n500);}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386909C' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;}

.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;line-height:1;white-space:nowrap;}
.t-brand{background:#FFECE0;color:#FF6B40;border:1px solid #FFBC99;}
.t-blue{background:#E8F3FF;color:#3491FA;border:1px solid #94BFFF;}
.t-green{background:#E8FFEA;color:#00B42A;border:1px solid #9FDB1D;}
.t-orange{background:#FFF7E8;color:#FF7D00;border:1px solid #FFD699;}
.t-red{background:#FFECE8;color:#F53F3F;border:1px solid #FDCCCC;}
.t-neutral{background:#F2F3F5;color:#4E5969;border:1px solid #E5E6EB;}

.card{background:var(--white);border:1px solid var(--n300);border-radius:var(--r-md);padding:16px;}
.card.flat{border:none;box-shadow:var(--sh-xs);}

/* 指标卡 */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.stat{
  background:var(--white);border:1px solid var(--n300);border-radius:var(--r-md);padding:16px 18px;
  position:relative;overflow:hidden;transition:.2s;
}
.stat:hover{box-shadow:var(--sh-sm);transform:translateY(-2px);}
.stat .label{font-size:13px;color:var(--n500);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.stat .value{font-size:28px;font-weight:600;color:var(--n900);line-height:1.2;font-variant-numeric:tabular-nums;}
.stat .foot{font-size:12px;color:var(--n500);margin-top:6px;}
.stat.accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-brand);}

/* 工具条 */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.toolbar .grow{flex:1;}
.toolbar .input,.toolbar .select{width:auto;min-width:120px;}

/* 表格 */
.table-wrap{background:var(--white);border:1px solid var(--n300);border-radius:var(--r-md);overflow:auto;}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;}
table.grid th{
  background:var(--n100);color:var(--n900);font-weight:500;text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--n300);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.grid td{padding:10px 12px;border-bottom:1px solid var(--n200);color:var(--n700);vertical-align:middle;}
table.grid tbody tr:hover{background:var(--n50);}
table.grid tbody tr:last-child td{border-bottom:none;}
table.grid td.strong{color:var(--n900);font-weight:500;}
table.grid .ops{white-space:nowrap;text-align:right;}
table.grid .ops a{margin-left:10px;cursor:pointer;font-size:13px;}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 4px 0;font-size:13px;color:var(--n500);}

/* 标签页 */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--n300);margin-bottom:16px;flex-wrap:wrap;}
.tabitem{padding:9px 14px;cursor:pointer;font-size:14px;color:var(--n700);border-bottom:2px solid transparent;font-weight:500;}
.tabitem:hover{color:var(--brand);}
.tabitem.active{color:var(--brand);border-bottom-color:var(--brand);}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;background:rgba(31,35,41,.45);z-index:200;display:flex;
  align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--sh-lg);width:100%;max-width:640px;
  animation:pop .2s cubic-bezier(.22,1,.36,1);
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal.wide{max-width:880px;}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--n200);}
.modal-head h3{margin:0;font-size:16px;font-weight:600;color:var(--n900);flex:1;}
.modal-head .x{cursor:pointer;color:var(--n500);font-size:18px;line-height:1;padding:2px 6px;border-radius:var(--r-sm);}
.modal-head .x:hover{background:var(--n200);color:var(--n900);}
.modal-body{padding:20px;max-height:64vh;overflow:auto;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--n200);display:flex;justify-content:flex-end;gap:10px;}

/* 表单网格 */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.form-grid .full{grid-column:1 / -1;}
.fld label{display:block;font-size:13px;color:var(--n700);margin-bottom:5px;font-weight:500;}
.fld label .req{color:var(--danger);margin-left:2px;}

/* 跟进时间轴 */
.timeline{position:relative;padding-left:20px;}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--n300);}
.tl-item{position:relative;padding-bottom:16px;}
.tl-item::before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--white);border:2px solid var(--brand);}
.tl-item .h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.tl-item .who{font-weight:500;color:var(--n900);font-size:13.5px;}
.tl-item .when{font-size:12px;color:var(--n500);}
.tl-item .txt{font-size:13.5px;color:var(--n700);white-space:pre-wrap;word-break:break-word;}

/* 列表块 */
.rowlist{display:flex;flex-direction:column;}
.rowlist .it{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--n200);font-size:13.5px;}
.rowlist .it:last-child{border-bottom:none;}
.rowlist .it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--n900);}

/* 空态 */
.empty{padding:52px 16px;text-align:center;color:var(--n500);}
.empty .big{font-size:38px;opacity:.35;margin-bottom:10px;}
.empty p{margin:0;font-size:14px;}

/* 提示 */
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  background:var(--n900);color:#fff;padding:9px 16px;border-radius:var(--r-sm);font-size:13.5px;
  box-shadow:var(--sh-md);animation:pop .2s ease;max-width:80vw;
}
.toast.err{background:var(--danger);}
.toast.ok{background:var(--success);}

/* 图表 */
.bars{display:flex;flex-direction:column;gap:9px;}
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.bar-row .bl{width:74px;flex:0 0 74px;color:var(--n700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-row .bt{flex:1;height:16px;background:var(--n200);border-radius:var(--r-sm);overflow:hidden;}
.bar-row .bf{height:100%;background:var(--gradient-brand);border-radius:var(--r-sm);transition:width .5s ease;}
.bar-row .bv{width:40px;text-align:right;color:var(--n900);font-weight:500;font-variant-numeric:tabular-nums;}

.donut-wrap{display:flex;flex-wrap:wrap;gap:14px;}
.donut-item{display:flex;align-items:center;gap:7px;font-size:13px;}
.donut-dot{width:10px;height:10px;border-radius:50%;}

/* 看板双栏 */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ph h4{margin:0;font-size:15px;font-weight:600;color:var(--n900);}
.ph .more{margin-left:auto;font-size:13px;cursor:pointer;}

/* 移动端 */
.mobile-only{display:none;}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:120;transform:translateX(-100%);transition:.25s;}
  .sidebar.open{transform:none;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:14px 14px 40px;}
  .topbar{padding:0 14px;}
  .mobile-only{display:inline-flex;}
  .mask-nav{position:fixed;inset:0;background:rgba(31,35,41,.4);z-index:110;}
}

/* AI 相关 */
.spin{
  display:inline-block;width:11px;height:11px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-1px;margin-right:5px;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-draft-hint{font-size:12px;color:var(--n500);font-weight:400;margin-right:8px;}
/* AI 按钮统一给一点点品牌感 */
#btnAiReport,#btnAiScript,#btnAiRenew,#btnAiDraft{transition:.16s;}
#btnAiReport:hover,#btnAiScript:hover,#btnAiRenew:hover{background:var(--brand-light);box-shadow:none;}