/* ===== 研发工作台 · 后台布局框架 =====
 * 左边栏 + 顶栏 + 内容区（经典 SaaS 控制台）
 * 依赖 tokens.css（颜色/字体/间距 token） */

/* 布局容器 */
.wb-app{display:flex;min-height:100vh;background:var(--paper)}
.wb-app *{margin:0;padding:0;box-sizing:border-box}

/* ===== 左边栏 ===== */
.wb-sidebar{width:240px;flex-shrink:0;background:var(--dark);color:var(--paper);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.wb-side-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;border-bottom:1px solid var(--dark-line)}
.wb-side-logo img{height:32px;width:auto}
.wb-side-logo span{font-size:14px;font-weight:700;color:var(--paper)}
.wb-side-nav{flex:1;padding:12px 0}
.wb-side-nav .group{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-text-3);padding:16px 20px 6px}
.wb-side-nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:14px;color:var(--dark-text-2);text-decoration:none;transition:all var(--dur-fast);border-left:3px solid transparent}
.wb-side-nav a:hover{color:var(--paper);background:oklch(1 0 0 / 0.05)}
.wb-side-nav a.on{color:var(--paper);background:oklch(1 0 0 / 0.08);border-left-color:var(--orchid)}
.wb-side-nav a svg{width:18px;height:18px;flex-shrink:0}
.wb-side-nav a .badge{margin-left:auto;font-size:10px;font-weight:600;background:var(--orchid);color:var(--paper);border-radius:10px;padding:2px 8px}
.wb-side-foot{padding:16px 20px;border-top:1px solid var(--dark-line)}
.wb-side-user{display:flex;align-items:center;gap:10px}
.wb-side-user .av{width:32px;height:32px;border-radius:50%;background:var(--orchid);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--paper)}
.wb-side-user .u-name{font-size:13px;font-weight:600;color:var(--paper)}
.wb-side-user .u-role{font-size:11px;color:var(--dark-text-3)}

/* ===== 主区 ===== */
.wb-main{flex:1;min-width:0;display:flex;flex-direction:column;background:oklch(0.975 0.004 275)}
.wb-topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.wb-crumb{font-size:14px;color:var(--muted)}
.wb-crumb a{color:var(--iris);text-decoration:none;font-weight:600}
.wb-crumb .sep{margin:0 6px;color:var(--muted-2)}
.wb-top-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;width:280px}
.wb-top-search input{border:none;background:none;outline:none;font-size:13px;color:var(--ink);width:100%;font-family:inherit}
.wb-top-search input::placeholder{color:var(--muted-2)}
.wb-top-search svg{width:15px;height:15px;color:var(--muted-2);flex-shrink:0}
.wb-top-status{display:flex;gap:6px}
.wb-top-status button{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);cursor:pointer;font-family:inherit}
.wb-top-status button.on{background:var(--dark);color:var(--paper);border-color:var(--dark)}
.wb-top-ic{width:36px;height:36px;border-radius:8px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.wb-top-ic svg{width:18px;height:18px}

/* ===== 内容区 ===== */
.wb-content{padding:24px;flex:1}
.wb-page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.wb-page-head h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
.wb-page-head .sub{font-size:13px;color:var(--muted);margin-top:2px}

/* 统计卡 */
.wb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.wb-stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}
.wb-stat .n{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--ink)}
.wb-stat .n span{color:var(--iris)}
.wb-stat .t{font-size:13px;color:var(--muted);margin-top:4px}
.wb-stat .ic{width:36px;height:36px;border-radius:9px;background:var(--iris-soft);color:var(--iris);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.wb-stat .ic svg{width:18px;height:18px}

/* 面板 */
.wb-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}
.wb-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.wb-panel-head h3{font-size:15px;font-weight:700}
.wb-panel-head .more{font-size:12px;color:var(--iris);font-weight:600;text-decoration:none;cursor:pointer}

/* 表格 */
.wb-table{width:100%;border-collapse:collapse;font-size:13px}
.wb-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
.wb-table td{padding:12px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.wb-table tr:hover td{background:var(--paper-2)}
.wb-table td .star{color:var(--gold)}
.wb-table .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--iris);background:var(--iris-soft);border-radius:20px;padding:3px 10px}
.wb-table .tag.gold{color:var(--gold);background:oklch(0.8 0.14 85 / 0.1)}
.wb-table .op{color:var(--iris);font-weight:600;cursor:pointer;background:none;border:none;font-family:inherit;font-size:13px}
.wb-table .op:hover{text-decoration:underline}

/* 筛选行 */
.wb-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.wb-filters select,.wb-filters input{padding:9px 14px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:var(--paper);color:var(--ink)}
.wb-filters input{flex:1;min-width:180px}
.wb-filters select:focus,.wb-filters input:focus{outline:none;border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-soft)}

/* 空态 */
.wb-empty{text-align:center;color:var(--muted-2);padding:48px 0;font-size:14px}

/* 响应式 */
@media(max-width:1024px){
  .wb-sidebar{width:72px}
  .wb-side-nav a span,.wb-side-logo span,.wb-side-nav .group,.wb-side-user .u-name,.wb-side-user .u-role{display:none}
  .wb-side-nav a{justify-content:center;padding:12px}
  .wb-top-search{width:180px}
}
@media(max-width:768px){
  .wb-sidebar{display:none}
  .wb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-top-search{display:none}
}

/* ===== v2 后台增强 ===== */
/* 顶栏通知/头像 */
.wb-top-right{display:flex;align-items:center;gap:10px}
.wb-bell{position:relative;width:36px;height:36px;border-radius:8px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.wb-bell svg{width:17px;height:17px}
.wb-bell .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--gold);border:1.5px solid var(--paper)}
.wb-avatar{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:8px}
.wb-avatar:hover{background:var(--paper-2)}
.wb-avatar .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--iris),var(--orchid));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.wb-avatar .nm{font-size:13px;font-weight:600}
.wb-avatar .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--muted-2)}

/* 统计卡趋势 */
.wb-stat .trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--success);background:oklch(0.55 0.14 152 / 0.1);border-radius:10px;padding:2px 8px;margin-top:6px}
.wb-stat .trend.down{color:var(--muted);background:var(--paper-2)}

/* 彩色状态徽标 */
.badge-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:20px;padding:3px 10px}
.badge-status.ok{color:var(--success);background:oklch(0.55 0.14 152 / 0.12)}
.badge-status.warn{color:oklch(0.6 0.15 70);background:oklch(0.75 0.12 75 / 0.15)}
.badge-status.no{color:oklch(0.55 0.2 25);background:oklch(0.6 0.2 25 / 0.12)}
.badge-status.gold{color:var(--gold);background:oklch(0.8 0.14 85 / 0.1)}

/* 边栏底部统计 */
.wb-side-stat{margin:12px 16px;background:oklch(1 0 0 / 0.06);border:1px solid var(--dark-line);border-radius:10px;padding:14px}
.wb-side-stat .row{display:flex;justify-content:space-between;font-size:12px;color:var(--dark-text-2);padding:3px 0}
.wb-side-stat .row b{color:var(--paper);font-family:var(--font-mono)}

/* 分页 */
.wb-pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.wb-pager .pg-btns{display:flex;gap:4px}
.wb-pager button{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit}
.wb-pager button.on{background:var(--iris);color:#fff;border-color:var(--iris)}
.wb-pager button:hover{border-color:var(--iris);color:var(--iris)}

/* 动态时间线 */
.wb-timeline{border-left:2px solid var(--line);padding-left:20px;margin-left:8px}
.tl-item{position:relative;padding-bottom:16px}
.tl-item::before{content:"";position:absolute;left:-26px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--iris);box-shadow:0 0 0 3px var(--iris-soft)}
.tl-item .tl-t{font-size:13px;font-weight:600}
.tl-item .tl-d{font-size:12px;color:var(--muted-2);margin-top:2px}