/* ================= 设计 Token（Ant Design 5.x） ================= */
:root{
  --brand-primary:#1677FF; --brand-hover:#4096FF; --brand-active:#0958D9;
  --brand-success:#52C41A; --brand-warning:#FAAD14; --brand-error:#FF4D4F;
  --bg-page:#F5F7FA; --bg-container:#FFFFFF; --bg-subtle:#FAFAFA;
  --sidebar-bg:#001529; --sidebar-hover:rgba(255,255,255,.08);
  --border:#E5E6EB; --border-light:#F0F0F0;
  --text-1:#1D2129; --text-2:#4E5969; --text-3:#86909C;
  --radius:6px; --radius-card:8px;
  --sidebar-w:208px; --sidebar-w-collapsed:64px; --header-h:56px;
  --shadow-card:0 1px 2px rgba(0,0,0,.03);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.5715; color:var(--text-1); background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:14px;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text-1);}
a{color:var(--brand-primary);text-decoration:none;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);}

/* ================= 布局 ================= */
#app{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);background:var(--sidebar-bg);flex-shrink:0;
  display:flex;flex-direction:column;transition:width .2s;position:fixed;top:0;bottom:0;left:0;z-index:100;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.logo{height:var(--header-h);display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;}
.logo-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#1677FF,#722ED1);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;}
.logo-text{color:#fff;font-size:15px;font-weight:600;white-space:nowrap;}
.logo-text small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.45);line-height:1.2;}
.menu{flex:1;padding:8px;overflow-y:auto;}
.menu-item{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;margin-bottom:4px;
  color:rgba(255,255,255,.65);border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:background .15s,color .15s;position:relative;
}
.menu-item:hover{background:var(--sidebar-hover);color:#fff;}
.menu-item.active{background:var(--brand-primary);color:#fff;}
.menu-item svg{width:16px;height:16px;flex-shrink:0;fill:currentColor;}
.menu-item .mi-text{font-size:14px;}
.menu-badge{margin-left:auto;background:var(--brand-error);color:#fff;font-size:11px;line-height:16px;height:16px;padding:0 5px;border-radius:8px;}
.sidebar.collapsed .mi-text,.sidebar.collapsed .logo-text,.sidebar.collapsed .menu-badge{display:none;}
.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);}
.collapse-btn{width:100%;height:32px;color:rgba(255,255,255,.65);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.collapse-btn:hover{background:var(--sidebar-hover);color:#fff;}

.main{flex:1;margin-left:var(--sidebar-w);transition:margin-left .2s;min-width:0;}
.main.expanded{margin-left:var(--sidebar-w-collapsed);}

.topbar{
  height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;position:sticky;top:0;z-index:90;
}
.crumb{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:14px;}
.crumb b{color:var(--text-1);font-weight:500;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.env-tag{font-size:12px;color:#0958D9;background:#E6F4FF;border:1px solid #BAE0FF;padding:1px 8px;border-radius:4px;}
.avatar-btn{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;}
.avatar-btn:hover{background:var(--bg-page);}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1677FF,#722ED1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.content{padding:24px;max-width:1600px;}

/* ================= 通用组件 ================= */
.card{background:var(--bg-container);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.card+.card{margin-top:16px;}
.card-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-light);gap:12px;}
.card-title{font-size:16px;font-weight:600;}
.card-sub{font-size:13px;color:var(--text-3);}
.card-body{padding:20px;}
.card-body.tight{padding:0;}
.head-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

.btn{
  height:32px;padding:0 15px;border-radius:var(--radius);border:1px solid var(--border);
  background:#fff;color:var(--text-1);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;transition:all .15s;white-space:nowrap;
}
.btn:hover{border-color:var(--brand-primary);color:var(--brand-primary);}
.btn.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;}
.btn.danger{color:var(--brand-error);border-color:#FFCCC7;}
.btn.danger:hover{background:#FFF2F0;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn:disabled:hover{border-color:var(--border);color:var(--text-1);}
.btn.lg{height:40px;padding:0 20px;font-size:15px;border-radius:8px;}
.btn.sm{height:26px;padding:0 8px;font-size:13px;border-radius:4px;}
.btn-link{color:var(--brand-primary);cursor:pointer;font-size:13px;padding:0 4px;background:none;border:none;display:inline-block;white-space:nowrap;}
.btn-link+.btn-link{margin-left:6px;}
.btn-link:hover{color:var(--brand-hover);text-decoration:underline;}
.btn-link.danger{color:var(--brand-error);}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}

.tag{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;
  font-size:12px;line-height:1;border:1px solid transparent;white-space:nowrap;
}
.tag.gray{color:#4E5969;background:#F2F3F5;border-color:#E5E6EB;}
.tag.blue{color:#0958D9;background:#E6F4FF;border-color:#BAE0FF;}
.tag.green{color:#389E0D;background:#F6FFED;border-color:#B7EB8F;}
.tag.orange{color:#D46B08;background:#FFF7E6;border-color:#FFD591;}
.tag.red{color:#CF1322;background:#FFF1F0;border-color:#FFA39E;}
.tag.purple{color:#531DAB;background:#F9F0FF;border-color:#D3ADF7;}
.tag.cyan{color:#08979C;background:#E6FFFB;border-color:#87E8DE;}
.tag-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;}

.input,.select,.textarea{
  width:100%;border:1px solid var(--border);border-radius:var(--radius);background:#fff;
  padding:5px 11px;height:32px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.textarea{height:auto;min-height:80px;padding:8px 11px;resize:vertical;line-height:1.6;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 2px rgba(22,119,255,.1);}
.input::placeholder,.textarea::placeholder{color:#BFBFBF;}
.input.sm,.select.sm{height:28px;font-size:13px;padding:3px 8px;}
.input[readonly]{background:var(--bg-subtle);color:var(--text-2);}

.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;}
.form-row.two{grid-template-columns:repeat(2,1fr);}
.form-row.four{grid-template-columns:repeat(4,1fr);}
.form-item{display:flex;flex-direction:column;gap:6px;min-width:0;}
.form-item>label{font-size:14px;color:var(--text-2);display:flex;align-items:center;gap:4px;}
.form-item .req{color:var(--brand-error);}
.form-hint{font-size:12px;color:var(--text-3);}
.form-err{font-size:12px;color:var(--brand-error);}
.radio-group{display:flex;gap:16px;align-items:center;height:32px;}
.radio{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;}
.radio input{accent-color:var(--brand-primary);width:15px;height:15px;}
.checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--text-2);}
.checkbox input{accent-color:var(--brand-primary);width:15px;height:15px;}

/* 表格 */
.table-wrap{overflow-x:auto;}
table.tb{width:100%;border-collapse:collapse;font-size:13px;}
table.tb thead th{
  background:var(--bg-subtle);color:var(--text-2);font-weight:500;text-align:left;
  padding:11px 12px;border-bottom:1px solid var(--border-light);white-space:nowrap;font-size:13px;
}
table.tb thead th.sortable{cursor:pointer;user-select:none;}
table.tb thead th.sortable:hover{color:var(--brand-primary);}
table.tb tbody td{padding:12px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
table.tb tbody tr:hover{background:#F7F9FC;}
table.tb tbody tr.selected{background:#E6F4FF;}
table.tb tbody tr.anomaly{background:#FFF7F5;}
table.tb tbody tr.anomaly:hover{background:#FFF1F0;}
table.tb tbody tr.disabled-row{opacity:.55;}
.cell-main{font-weight:500;color:var(--text-1);}
.cell-sub{font-size:12px;color:var(--text-3);margin-top:2px;}
.num{font-variant-numeric:tabular-nums;}
.price{color:#CF1322;font-weight:600;font-variant-numeric:tabular-nums;}
.price.na{color:var(--text-3);font-weight:400;}

/* 空态 */
.empty{padding:56px 20px;text-align:center;color:var(--text-3);}
.empty .icon{font-size:40px;opacity:.35;margin-bottom:12px;}
.empty p{margin-bottom:16px;font-size:14px;}

/* 统计卡 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 20px;}
.stat .label{font-size:13px;color:var(--text-3);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.stat .value{font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;}
.stat .foot{font-size:12px;color:var(--text-3);margin-top:6px;}
.stat .value.blue{color:var(--brand-primary);}
.stat .value.green{color:#389E0D;}
.stat .value.orange{color:#D46B08;}

/* Tabs */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--border-light);padding:0 20px;}
.tab{padding:12px 0;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;font-size:14px;margin-bottom:-1px;}
.tab:hover{color:var(--brand-primary);}
.tab.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary);font-weight:500;}
.tab .cnt{font-size:12px;color:var(--text-3);margin-left:4px;}

/* 方案卡 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.plan{cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 18px;background:#fff;transition:all .15s;position:relative;}
.plan:hover{border-color:#91CAFF;box-shadow:0 2px 8px rgba(22,119,255,.08);}
.plan.active{border-color:var(--brand-primary);background:#F0F7FF;box-shadow:0 0 0 1px var(--brand-primary) inset;}
.plan-badge{position:absolute;top:-1px;right:-1px;background:var(--brand-primary);color:#fff;font-size:11px;padding:2px 8px;border-radius:0 8px 0 8px;}
.plan-name{font-size:13px;color:var(--text-3);margin-bottom:6px;display:flex;align-items:center;gap:6px;font-weight:500;}
.plan-price{font-size:26px;font-weight:700;color:#CF1322;line-height:1.2;font-variant-numeric:tabular-nums;}
.plan-price small{font-size:13px;font-weight:400;color:var(--text-3);margin-left:4px;}
.plan-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--text-2);}
.plan-meta span{display:flex;align-items:center;gap:4px;}
.plan-actions{margin-top:12px;display:flex;gap:8px;}

/* 时间线 */
.timeline{padding:4px 0;}
.tl-item{display:flex;gap:12px;padding-bottom:20px;position:relative;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:1px;background:var(--border);}
.tl-item:last-child::before{display:none;}
.tl-icon{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;z-index:1;background:#F2F3F5;color:var(--text-3);}
.tl-icon.ok{background:#F6FFED;color:#52C41A;border:1px solid #B7EB8F;}
.tl-icon.run{background:#E6F4FF;color:#1677FF;border:1px solid #91CAFF;animation:pulse 1.2s infinite;}
.tl-icon.fail{background:#FFF1F0;color:#FF4D4F;border:1px solid #FFA39E;}
.tl-icon.skip{background:#F2F3F5;color:#86909C;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tl-body{flex:1;min-width:0;padding-top:1px;}
.tl-title{font-size:14px;display:flex;align-items:center;gap:8px;}
.tl-desc{font-size:12px;color:var(--text-3);margin-top:3px;}

/* 进度条 */
.progress{height:6px;background:#F2F3F5;border-radius:3px;overflow:hidden;}
.progress>i{display:block;height:100%;background:var(--brand-primary);border-radius:3px;transition:width .3s;}

/* 置信度 */
.conf{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3);}
.conf i{width:7px;height:7px;border-radius:50%;display:block;}
.conf i.g{background:#52C41A;} .conf i.y{background:#FAAD14;} .conf i.r{background:#FF4D4F;}

/* 提示条 */
.alert{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:6px;font-size:13px;line-height:1.6;}
.alert.warn{background:#FFFBE6;border:1px solid #FFE58F;color:#874D00;}
.alert.info{background:#E6F4FF;border:1px solid #BAE0FF;color:#0958D9;}
.alert.err{background:#FFF1F0;border:1px solid #FFA39E;color:#CF1322;}
.alert.ok{background:#F6FFED;border:1px solid #B7EB8F;color:#389E0D;}
.alert .a-icon{font-weight:700;flex-shrink:0;}

/* 上传区 */
.uploader{
  border:1px dashed #D9D9D9;border-radius:8px;background:#FAFAFA;
  padding:32px;text-align:center;cursor:pointer;transition:all .15s;
}
.uploader:hover{border-color:var(--brand-primary);background:#F0F7FF;}
.uploader .up-icon{font-size:32px;color:#BFBFBF;margin-bottom:8px;}
.uploader p{font-size:14px;color:var(--text-2);margin-bottom:4px;}
.uploader small{font-size:12px;color:var(--text-3);}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;padding:80px 20px 40px;overflow-y:auto;
  animation:fadeIn .15s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:8px;width:520px;max-width:100%;
  box-shadow:0 6px 24px rgba(0,0,0,.16);animation:slideUp .18s;margin-bottom:40px;
}
.modal.wide{width:760px;}
.modal.xwide{width:960px;}
@keyframes slideUp{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
.modal-head{padding:16px 24px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;}
.modal-title{font-size:16px;font-weight:600;}
.modal-close{margin-left:auto;color:var(--text-3);font-size:20px;line-height:1;padding:2px 6px;border-radius:4px;}
.modal-close:hover{background:var(--bg-page);color:var(--text-1);}
.modal-body{padding:20px 24px;max-height:62vh;overflow-y:auto;}
.modal-foot{padding:12px 24px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:8px;}

/* Toast */
#toast-root{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  background:#fff;border-radius:6px;padding:9px 16px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.12);
  display:flex;align-items:center;gap:8px;animation:toastIn .2s;max-width:560px;border:1px solid var(--border-light);
}
@keyframes toastIn{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
.toast.ok{color:#389E0D;} .toast.err{color:#CF1322;} .toast.info{color:var(--text-1);}

/* 底部操作条 */
.action-bar{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);
  padding:12px 20px;display:flex;align-items:center;gap:12px;margin:0 -20px -20px;border-radius:0 0 8px 8px;
  box-shadow:0 -2px 8px rgba(0,0,0,.04);z-index:20;
}
.action-bar .sel-info{margin-right:auto;font-size:13px;color:var(--text-2);}

/* 分页 */
.pagination{display:flex;align-items:center;gap:8px;padding:12px 20px;justify-content:flex-end;font-size:13px;color:var(--text-2);border-top:1px solid var(--border-light);}
.page-btn{min-width:28px;height:28px;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;background:#fff;padding:0 6px;}
.page-btn:hover{border-color:var(--brand-primary);color:var(--brand-primary);}
.page-btn.cur{border-color:var(--brand-primary);color:var(--brand-primary);font-weight:600;}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* 描述列表 */
.desc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;}
.desc-item .k{font-size:12px;color:var(--text-3);margin-bottom:3px;}
.desc-item .v{font-size:14px;color:var(--text-1);word-break:break-all;}

/* 邮件预览 */
.mail-box{border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.mail-head{background:var(--bg-subtle);padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border-light);display:grid;gap:4px;}
.mail-head b{color:var(--text-2);font-weight:500;display:inline-block;width:56px;}
.mail-body{padding:16px;font-size:14px;line-height:1.8;white-space:pre-wrap;color:var(--text-1);max-height:320px;overflow-y:auto;}

/* 登录页 */
.login-page{position:fixed;inset:0;background:linear-gradient(135deg,#001529 0%,#0A2A5E 55%,#123E86 100%);display:flex;align-items:center;justify-content:center;z-index:500;}
.login-card{width:400px;background:#fff;border-radius:12px;padding:40px 36px;box-shadow:0 12px 48px rgba(0,0,0,.3);}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.login-logo .logo-mark{width:36px;height:36px;font-size:16px;}
.login-title{font-size:22px;font-weight:600;margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--text-3);margin-bottom:28px;}
.login-form .form-item{margin-bottom:18px;}
.login-form .input{height:40px;}
.login-btn{width:100%;height:40px;margin-top:8px;font-size:15px;}
.login-tip{margin-top:20px;padding:10px 12px;background:#F0F7FF;border-radius:6px;font-size:12px;color:#0958D9;line-height:1.7;}

/* 杂项 */
.row{display:flex;align-items:center;gap:8px;}
.row.wrap{flex-wrap:wrap;}
.spacer{flex:1;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;}
.mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;} .mb16{margin-bottom:16px;}
.muted{color:var(--text-3);} .small{font-size:12px;} .fs13{font-size:13px;} .fs12{font-size:12px;line-height:1.45;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;}
.nowrap{white-space:nowrap;}
.link{color:var(--brand-primary);cursor:pointer;}
.link:hover{text-decoration:underline;}
.divider{height:1px;background:var(--border-light);margin:16px 0;}
.kv{display:flex;gap:8px;font-size:13px;margin-bottom:6px;}
.kv .k{color:var(--text-3);min-width:72px;flex-shrink:0;}
.kv .v{color:var(--text-1);}
.copy-box{background:var(--bg-subtle);border:1px solid var(--border);border-radius:6px;padding:12px;font-size:13px;line-height:1.8;white-space:pre-wrap;max-height:220px;overflow-y:auto;}

@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .plans{grid-template-columns:1fr;}
  .form-row{grid-template-columns:repeat(2,1fr);}
  .form-row.four{grid-template-columns:repeat(2,1fr);}
  .desc-grid{grid-template-columns:repeat(2,1fr);}
}
