* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #303133; }

/* 登录页 */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 60%, #3f7cc9 100%); }
.login-card { width: 400px; background: #fff; border-radius: 14px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-title { text-align: center; margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1e3c72; }
.login-sub { text-align: center; color: #909399; font-size: 13px; margin-bottom: 28px; }
.login-tip { margin-top: 16px; font-size: 12px; color: #909399; line-height: 1.9; background: #f7f8fa; border-radius: 8px; padding: 10px 12px; }
.login-tip b { color: #606266; }

/* 布局 */
.layout { height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 58px; background: #001529; color: #fff; display: flex; align-items: center; padding: 0 18px; flex-shrink: 0; }
.topbar .logo { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.topbar .logo .dot { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#409eff,#66b1ff); display:flex;align-items:center;justify-content:center;font-size:15px; }
.topbar .spacer { flex: 1; }
.topbar .right { display: flex; align-items: center; gap: 18px; }
.topbar .user { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.body-row { flex: 1; display: flex; overflow: hidden; }
.sidebar { width: 210px; background: #001529; overflow-y: auto; flex-shrink: 0; }
.sidebar .el-menu { border-right: none; }
.content { flex: 1; overflow-y: auto; padding: 18px; }

/* 卡片 */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(0,0,0,.04); position: relative; overflow: hidden; }
.stat-card .num { font-size: 28px; font-weight: 700; margin-top: 6px; }
.stat-card .label { color: #909399; font-size: 13px; }
.stat-card .ic { position: absolute; right: 14px; top: 14px; font-size: 30px; opacity: .18; }
.stat-card.blue .num { color: #409eff; } .stat-card.green .num { color: #67c23a; }
.stat-card.orange .num { color: #e6a23c; } .stat-card.red .num { color: #f56c6c; }
.stat-card.purple .num { color: #8e5cd9; } .stat-card.cyan .num { color: #17a2b8; }

.panel { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,.04); margin-bottom: 16px; }
.panel-title { font-size: 15px; font-weight: 600; margin: 0 0 14px; display:flex;align-items:center;gap:8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.page-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.charts-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.chart-box { height: 300px; }
@media (max-width: 900px){ .charts-row{ grid-template-columns:1fr; } }

.days-badge { font-weight: 700; }
.days-danger { color: #f56c6c; } .days-warn { color: #e6a23c; } .days-ok { color: #67c23a; }
.upload-note { font-size: 12px; color: #e6a23c; margin-top: 6px; }
.kanban { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }
.kanban-card { background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.05); border-left: 4px solid #409eff; }
.kanban-card.danger { border-left-color:#f56c6c; } .kanban-card.warn { border-left-color:#e6a23c; }
.kanban-card h4 { margin:0 0 8px; font-size:14px; }
.kanban-card .meta { font-size:12px; color:#909399; line-height:1.9; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; }
.detail-grid .item { font-size:13px; } .detail-grid .item label{ color:#909399; margin-right:6px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12px; }
.bell-badge .el-badge__content { top: 6px; }

/* ============ 多终端适配（响应式） ============ */
/* 弹窗在窄屏不溢出 */
.el-dialog { max-width: 94vw; }
/* 汉堡按钮默认隐藏（仅移动端显示） */
.hamburger { display: none; cursor: pointer; margin-right: 10px; font-size: 22px; align-items: center; }
/* 移动端遮罩（由 v-show 控制显隐） */
.sidebar-mask { position: fixed; top: 58px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 1000; }

/* 平板：缩小侧边栏与间距 */
@media (max-width: 1024px) {
  .sidebar { width: 180px; }
  .content { padding: 14px; }
}

/* 手机：侧边栏变抽屉、顶部精简、栅格单列 */
@media (max-width: 768px) {
  .topbar { padding: 0 12px; }
  .topbar .logo { font-size: 15px; gap: 6px; }
  .topbar .logo .txt-long { display: none; }
  .topbar .right { gap: 10px; }
  .topbar .user .uname { display: none; }
  .topbar .user .utag { display: none; }
  .hamburger { display: inline-flex; }

  .body-row { position: relative; }
  .sidebar {
    position: fixed; top: 58px; bottom: 0; left: 0; z-index: 1001;
    width: 220px; transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.25);
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 12px; }

  .login-card { width: 92%; padding: 28px 22px; }
  .detail-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .charts-row { gap: 12px; }
  .stat-card .num { font-size: 24px; }
  .page-title { font-size: 18px; }
  .el-dialog__body { max-height: 82vh; overflow-y: auto; }
}

/* 超小屏进一步精简 */
@media (max-width: 420px) {
  .topbar .logo { font-size: 14px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .num { font-size: 20px; }
}