/* ============================================================
   钢刚好招投标 · 统一角色工作台样式 wb.css
   红橙主题后台框架：顶栏 / 图标侧栏 / 内容卡片 / 表格 / 时间线
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --red:#E6212A;--red-dark:#c4121a;--orange:#FF7800;
  --light-red:#fde8e9;--light-orange:#fff1e0;--light-blue:#e8f1fe;--light-green:#e8f7ee;--light-purple:#f3eefe;--light-gray:#f4f5f7;
  --blue:#2b6fe0;--green:#1f9d55;--purple:#7b4fe0;--gray:#6b7280;
  --text:#1f2329;--text-2:#4b5563;--text-3:#9aa0a6;
  --border:#e5e7eb;--bg:#f2f4f7;
}
body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;background:var(--bg);color:var(--text);min-width:1200px;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* ===== 顶栏 ===== */
.topbar{background:#fff;border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-logo{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,var(--red),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px rgba(230,33,42,.25);}
.tb-logo svg{width:24px;height:24px;}
.tb-title{line-height:1.2;}
.tb-title b{font-size:19px;color:var(--red);letter-spacing:.5px;}
.tb-title span{display:block;font-size:12px;color:var(--text-3);}
.tb-role{display:inline-block;font-size:12px;padding:3px 10px;border-radius:20px;background:var(--light-red);color:var(--red);font-weight:600;margin-left:6px;vertical-align:1px;}
.tb-right{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--text-2);}
.tb-user{display:flex;align-items:center;gap:8px;}
.tb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;}
.tb-avatar svg{width:16px;height:16px;}
.btn-exit{color:var(--red);border:1px solid var(--red);padding:5px 14px;border-radius:4px;font-size:13px;transition:.15s;}
.btn-exit:hover{background:var(--light-red);}

/* ===== 布局 ===== */
.wrap{display:flex;min-height:calc(100vh - 64px);align-items:flex-start;}
.menu{width:230px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);padding:14px 12px 24px;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;}
.menu .m-group{font-size:12px;color:var(--text-3);padding:16px 12px 6px;letter-spacing:1px;}
.menu .m-group:first-child{padding-top:6px;}
.menu li a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;color:var(--text-2);border-radius:6px;transition:.15s;border-left:3px solid transparent;}
.menu li a svg{width:17px;height:17px;flex-shrink:0;}
.menu li a:hover{color:var(--red);background:var(--light-red);}
.menu li a.active{color:var(--red);background:var(--light-red);font-weight:600;border-left-color:var(--red);}
.menu li a .badge{font-size:11px;background:var(--red);color:#fff;border-radius:10px;padding:0 7px;line-height:16px;margin-left:auto;}
.main{flex:1;min-width:0;padding:18px 24px 30px;}

/* ===== 面包屑 ===== */
.crumb{font-size:13px;color:var(--text-3);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.crumb a{color:var(--text-2);}
.crumb a:hover{color:var(--red);}
.crumb .sep{color:#c9ccd2;}

/* ===== 页头 ===== */
.phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.phead .ph-left{display:flex;align-items:center;gap:10px;}
.phead .ph-bar{width:5px;height:22px;background:linear-gradient(180deg,var(--red),var(--orange));border-radius:2px;}
.phead b{font-size:20px;letter-spacing:1px;}
.phead small{margin-left:6px;font-size:13px;color:var(--text-3);}

/* ===== 统计卡 ===== */
.statrow{display:flex;gap:14px;margin-bottom:16px;}
.statitem{flex:1;background:#fff;padding:16px;border-radius:8px;text-align:center;border:1px solid var(--border);transition:.15s;}
.statitem:hover{box-shadow:0 4px 14px rgba(230,33,42,.08);transform:translateY(-1px);}
.statnum{font-size:26px;font-weight:bold;color:var(--red);letter-spacing:1px;}
.statnum b{font-size:13px;font-weight:normal;color:var(--text-3);}
.statlabel{font-size:12.5px;color:var(--text-2);margin-top:4px;}
.statitem.light-orange .statnum{color:var(--orange);}
.statitem.light-green .statnum{color:var(--green);}
.statitem.light-blue .statnum{color:var(--blue);}

/* ===== 卡片 ===== */
.card{background:#fff;border-radius:8px;padding:20px 22px;margin-bottom:16px;border:1px solid var(--border);}
.card h3{font-size:15px;border-left:4px solid var(--red);padding-left:10px;margin-bottom:14px;color:var(--text);}
.card h4{font-size:14px;color:var(--red);margin:12px 0 10px;}

/* ===== 按钮 ===== */
.btn{background:var(--red);color:#fff;border:none;padding:8px 22px;border-radius:4px;cursor:pointer;font-size:13.5px;font-family:inherit;transition:.15s;}
.btn:hover{background:var(--red-dark);}
.btn-orange{background:var(--orange);}
.btn-orange:hover{background:#e56a00;}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text-2);padding:8px 18px;border-radius:4px;cursor:pointer;font-size:13.5px;font-family:inherit;transition:.15s;}
.btn-ghost:hover{border-color:var(--red);color:var(--red);background:var(--light-red);}
.btn-mini{display:inline-block;font-size:12.5px;color:var(--red);border:1px solid var(--red);padding:3px 10px;border-radius:3px;transition:.15s;}
.btn-mini:hover{background:var(--light-red);}
.btn-mini.orange{color:var(--orange);border-color:var(--orange);}
.btn-mini.orange:hover{background:var(--light-orange);}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{background:#f5f7fa;text-align:left;padding:10px 10px;border-bottom:1px solid var(--border);color:var(--text-2);font-weight:600;}
td{padding:10px 10px;border-bottom:1px dashed #f0f1f3;color:var(--text-2);}
tr:hover td{background:#fafbfd;}
a.link{color:var(--red);}
a.link:hover{text-decoration:underline;}

/* ===== 标签 ===== */
.tag{font-size:12px;padding:2px 8px;border-radius:3px;white-space:nowrap;}
.tag-red{background:var(--light-red);color:var(--red);}
.tag-orange{background:var(--light-orange);color:var(--orange);}
.tag-green{background:var(--light-green);color:var(--green);}
.tag-blue{background:var(--light-blue);color:var(--blue);}
.tag-purple{background:var(--light-purple);color:var(--purple);}
.tag-gray{background:#f0f0f0;color:var(--text-3);}

/* ===== 表单 ===== */
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:13px;margin-bottom:5px;color:var(--text-2);}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;color:var(--text);outline:none;background:#fff;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--red);}
.form-row textarea{resize:vertical;}
.form-inline{display:flex;gap:10px;align-items:center;}
.form-inline .form-row{flex:1;margin-bottom:0;}

/* ===== 步骤条 ===== */
.steps{display:flex;margin:16px 0 20px;font-size:13px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.step{flex:1;text-align:center;padding:10px 6px;background:#fff;color:var(--text-3);position:relative;border-right:1px solid var(--border);}
.step:last-child{border-right:none;}
.step.cur{background:var(--light-red);color:var(--red);font-weight:bold;}
.step.done{background:var(--light-green);color:var(--green);}
.step i{font-style:normal;display:inline-block;width:20px;height:20px;border-radius:50%;background:#e5e7eb;color:#fff;line-height:20px;margin-right:6px;font-size:12px;}
.step.cur i{background:var(--red);}
.step.done i{background:var(--green);}

/* ===== 时间线（项目详情用） ===== */
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border);}
.tl-item{position:relative;padding:0 0 18px 8px;font-size:13px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--border);border:2px solid #fff;box-shadow:0 0 0 2px var(--border);}
.tl-item.done::before{background:var(--green);box-shadow:0 0 0 2px var(--green);}
.tl-item.cur::before{background:var(--red);box-shadow:0 0 0 2px var(--red);}
.tl-item .tl-time{color:var(--text-3);font-size:12px;margin-left:10px;}
.tl-item .tl-title{font-weight:600;color:var(--text);}
.tl-item .tl-desc{color:var(--text-2);margin-top:3px;line-height:1.7;}

/* ===== Tab 切换（页面内二级） ===== */
.tabswitch{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.tabswitch button{padding:9px 18px;border:none;background:transparent;cursor:pointer;font-size:13.5px;color:var(--text-2);border-bottom:2px solid transparent;font-family:inherit;transition:.15s;}
.tabswitch button:hover{color:var(--red);}
.tabswitch button.active{color:var(--red);border-bottom-color:var(--red);font-weight:600;}

/* ===== 页面切换 ===== */
.page{display:none;}
.page.show{display:block;animation:fadeIn .25s ease;}
.subpage{display:none;}
.subpage.show{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ===== 详情头（二级详情） ===== */
.detail-head{background:linear-gradient(90deg,var(--light-red),#fff);border:1px solid #f3c9cc;border-radius:8px;padding:16px 20px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.detail-head .dh-title{font-size:16px;font-weight:bold;}
.detail-head .dh-meta{font-size:12.5px;color:var(--text-3);margin-top:5px;line-height:1.8;}
.detail-head .dh-ops{display:flex;gap:8px;flex-shrink:0;}

/* ===== 信息双列 ===== */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;font-size:13px;}
.info-grid .ig-item{padding:9px 0;border-bottom:1px dashed #f0f1f3;display:flex;}
.info-grid .ig-label{width:110px;color:var(--text-3);flex-shrink:0;}
.info-grid .ig-value{color:var(--text);}

/* ===== 聊天区（开标大厅） ===== */
.chatbox{border:1px solid var(--border);border-radius:6px;height:240px;overflow-y:auto;padding:12px;margin-bottom:10px;font-size:13px;background:#fafbfc;}
.msg{margin-bottom:8px;line-height:1.6;}
.msg .who{color:var(--red);font-weight:bold;}
.msg .sys{color:var(--orange);font-weight:bold;}
.inputrow{display:flex;gap:8px;}
.inputrow input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:4px;font-size:13px;outline:none;font-family:inherit;}
.inputrow input:focus{border-color:var(--red);}
.inputrow button{background:var(--red);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit;}

/* ===== 两栏 ===== */
.two{display:flex;gap:16px;align-items:flex-start;}
.col-left{flex:1;min-width:0;}
.col-right{width:300px;flex-shrink:0;}

/* ===== 底部提示 ===== */
.tip{background:var(--light-orange);border:1px solid #f5d6b8;border-radius:6px;padding:11px 16px;font-size:12.5px;color:#a35a00;line-height:1.9;margin-bottom:16px;}