body { display: flex; }
.last-update { font-size: 12px; color: var(--ink-3); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--ink-0); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-red .kpi-value { color: var(--red); }
.kpi-amber .kpi-value { color: var(--amber); }
.kpi-green .kpi-value { color: var(--green); }

.section-title { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; margin-top: 24px; }
.section-title:first-of-type { margin-top: 0; }

/* Jobs card */
.jobs-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jobs-card.jobs-ok   { border-left: 3px solid var(--green); }
.jobs-card.jobs-warn { border-left: 3px solid var(--amber); }
.jobs-card.jobs-crit { border-left: 3px solid var(--red); }
.jobs-info  { display: flex; align-items: center; gap: 12px; }
.jobs-count { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.jobs-ok   .jobs-count { color: var(--green); }
.jobs-warn .jobs-count { color: var(--amber); }
.jobs-crit .jobs-count { color: var(--red); }
.jobs-desc { font-size: 12px; color: var(--ink-2); }
.jobs-desc strong { display: block; font-size: 13px; color: var(--ink-1); margin-bottom: 2px; }
.jobs-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-action { background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-1); border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: inherit; transition: background 0.1s; }
.btn-action:hover    { background: var(--bg-3); }
.btn-action:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-action.danger   { border-color: rgba(248,81,73,.3); color: var(--red); }
.btn-action.danger:hover { background: var(--red-bg); }

/* Panel */
.panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

/* CRON table */
.cron-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cron-table th { text-align: left; padding: 8px 12px; color: var(--ink-2); border-bottom: 1px solid var(--border); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.cron-table td { padding: 8px 12px; color: var(--ink-1); border-bottom: 1px solid var(--border); }
.cron-table tr:last-child td { border-bottom: none; }
.cron-table .expr { font-family: 'SF Mono', 'Consolas', monospace; color: var(--blue); font-size: 11px; }

/* DB info grid */
.db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); }
.db-item { background: var(--bg-1); padding: 14px 16px; }
.db-label { display: block; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.db-value { font-size: 18px; font-weight: 600; color: var(--ink-0); font-variant-numeric: tabular-nums; }