:root {
  --sidebar-w: 232px;
  --brand-bg: #111827;
  --brand-bg2: #1f2937;
  --accent: #3b82f6;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f6fb; font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif; color: #1f2937; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-bg2));
  color: #e5e7eb; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.25rem; font-size: 1.15rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand i { color: var(--accent); font-size: 1.4rem; }
.sidebar .nav { padding: .5rem 0; flex: 1; overflow-y: auto; }
.sidebar .nav-section { padding: .9rem 1.25rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; }
.sidebar .nav-link { color: #cbd5e1; padding: .55rem 1.25rem; display: flex; align-items: center; gap: .6rem; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: rgba(59,130,246,.18); color: #fff; border-left-color: var(--accent); }
.sidebar .nav-link i { font-size: 1.05rem; }
.sidebar-foot { padding: .85rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; padding: .85rem 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-weight: 600; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; }
.flash-area { padding: 1rem 1.5rem 0; }
.page-body { padding: 1.25rem 1.5rem 2rem; }

.card { border: 1px solid #e9ecf3; border-radius: .6rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fbfcfe; font-weight: 600; border-bottom: 1px solid #eef1f6; }

.stat-card { background: #fff; border: 1px solid #e9ecf3; border-radius: .6rem; padding: 1rem 1.1rem; height: 100%; }
.stat-label { color: #6b7280; font-size: .85rem; margin-bottom: .25rem; }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }

.log-box { background: #0b1220; color: #d1fae5; font-family: "Cascadia Mono", Consolas, monospace; font-size: .82rem; padding: .9rem 1rem; height: 360px; overflow-y: auto; white-space: pre-wrap; line-height: 1.5; }
.log-box .log-line { display: block; }
.log-box .log-time { color: #64748b; margin-right: .5rem; }
.log-box .log-warning { color: #fbbf24; }
.log-box .log-error { color: #f87171; }

.badge.status-pending { background: #6b7280; }
.badge.status-running { background: #2563eb; }
.badge.status-paused { background: #d97706; }
.badge.status-success { background: #16a34a; }
.badge.status-failed { background: #dc2626; }
.badge.status-stopped { background: #475569; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.login-card { background: #fff; padding: 2rem 2rem 2.25rem; border-radius: .75rem; width: min(380px, 92vw); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.login-brand { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.login-brand i { color: var(--accent); }

.update-notes { white-space: pre-wrap; }
@media (max-width: 767px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: column; }
  .sidebar .nav { display: flex; flex-wrap: wrap; }
  .sidebar .nav-section { display: none; }
  .sidebar .nav-link { border-left: none; border-bottom: 3px solid transparent; }
}