/* ============================================
   智联广告通 · HTML原型共享样式（PC端 1280px）
   ============================================ */
:root{
  --primary:#2B5CFF; --primary-weak:#EAF0FF;
  --success:#0FBF7F; --success-weak:#E5F8F0;
  --warn:#F59E0B;    --warn-weak:#FEF3E2;
  --danger:#F04438;  --danger-weak:#FEECEB;
  --text:#1D2129; --text2:#667085; --text3:#98A2B3;
  --bg:#F5F6FA; --line:#EAECF2;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* ---------- 布局 ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:208px;background:#1B2337;color:#AEB7CC;flex:none;display:flex;flex-direction:column}
.sidebar .brand{height:58px;display:flex;align-items:center;gap:10px;padding:0 18px;color:#fff;
  font-size:15px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar .brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#2B5CFF,#6C4BFF);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.sidebar .role{padding:12px 18px;font-size:11px;color:#5C6A8A;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.6}
.sidebar .menu{padding:10px 0;flex:1}
.sidebar .menu a{display:flex;align-items:center;gap:10px;padding:11px 18px;font-size:13px}
.sidebar .menu a:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar .menu a.on{background:var(--primary);color:#fff;font-weight:600;border-radius:0 20px 20px 0;margin-right:12px}
.sidebar .back-home{padding:14px 18px;font-size:12px;color:#5C6A8A;border-top:1px solid rgba(255,255,255,.06)}
.sidebar .back-home a{color:#8E9AB8}
.sidebar .back-home a:hover{color:#fff}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;
  align-items:center;padding:0 24px;gap:14px;flex:none}
.topbar .crumb{font-size:13px;color:var(--text2)}
.topbar .crumb b{color:var(--text)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px}
.topbar .who .avatar{width:30px;height:30px;border-radius:50%;background:var(--primary-weak);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.content{padding:20px 24px;flex:1}

/* ---------- 组件 ---------- */
.panel{background:#fff;border-radius:12px;padding:18px;margin-bottom:16px}
.panel-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel-title .sub{font-size:12px;color:var(--text3);font-weight:400}
.panel-title .ops{margin-left:auto;display:flex;gap:8px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border-radius:12px;padding:16px}
.stat .k{font-size:12px;color:var(--text2)}
.stat .v{font-size:24px;font-weight:800;margin-top:6px}
.stat .v small{font-size:12px;font-weight:400;color:var(--text2)}
.stat .d{font-size:11px;margin-top:6px}
.stat .d.up{color:var(--success)} .stat .d.down{color:var(--danger)} .stat .d.warn{color:#D97706}
.stat.blue .v{color:var(--primary)} .stat.green .v{color:var(--success)} .stat.orange .v{color:var(--warn)}

.chip{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600;line-height:18px}
.chip.blue{background:var(--primary-weak);color:var(--primary)}
.chip.green{background:var(--success-weak);color:var(--success)}
.chip.orange{background:var(--warn-weak);color:#D97706}
.chip.red{background:var(--danger-weak);color:var(--danger)}
.chip.gray{background:#F2F3F7;color:var(--text2)}

.btnp{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;border:none;
  background:var(--primary);color:#fff}
.btnp.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btnp.soft{background:var(--primary-weak);color:var(--primary);border:none}
.btnp.danger{background:var(--danger-weak);color:var(--danger);border:none}
.btnp.sm{padding:4px 10px;font-size:12px}
.btnp[disabled]{background:#C9CEDB;color:#fff;cursor:not-allowed}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{background:#F7F8FB;color:var(--text2);font-weight:600;text-align:left;
  padding:10px 12px;white-space:nowrap}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:#FAFBFE}
.table .id{font-weight:600;color:var(--primary)}
.table .mini{font-size:11px;color:var(--text3)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:10px 16px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;display:block}
.tabs a.on{color:var(--primary);font-weight:700;border-bottom-color:var(--primary)}
.tabs .count{display:inline-block;background:#F2F3F7;border-radius:8px;font-size:11px;
  padding:0 6px;margin-left:4px;color:var(--text2)}

/* 四泳道 */
.lane-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lane{background:#F8F9FC;border-radius:12px;padding:14px;border-top:3px solid #CBD2E1}
.lane.done{border-top-color:var(--success)}
.lane.cur{border-top-color:var(--primary)}
.lane .lh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lane .lh .t{font-size:13px;font-weight:700}
.lane .li{background:#fff;border-radius:8px;padding:9px 10px;font-size:12px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--text2)}
.lane .li b{color:var(--text);font-weight:500}
.lane .li .ok{color:var(--success)}
.lane .li.money{color:var(--text)}
.lane .li.money b{color:var(--success);font-weight:700}

/* 版本对比 */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp .cbox{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cmp .cbox .ch{padding:8px 12px;font-size:12px;color:var(--text2);background:#F7F8FB;
  display:flex;justify-content:space-between}
.cmp .ph{height:190px;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:13px;text-align:center;line-height:1.6}

.ph{background:linear-gradient(135deg,#C6D2F5,#9FB3EE)}
.ph.dark{background:linear-gradient(135deg,#22304F,#3A4E7E)}

.note{background:var(--primary-weak);color:var(--primary);border-radius:8px;padding:10px 14px;
  font-size:12px;line-height:1.7;margin-bottom:14px}
.note.warn{background:var(--warn-weak);color:#B45309}
.note.green{background:var(--success-weak);color:#0B8A60}

.ver-list .ver{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:10px}
.ver-list .ver .ph{width:72px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;text-align:center}
.ver-list .ver .vi{flex:1;min-width:0}
.ver-list .ver .vt{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.ver-list .ver .vd{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.6}