body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Bento cards ─────────────────────────────────────────────────────────── */
.bento-card { transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.bento-card:hover { transform: translateY(-2px); }
.bento-card:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.bento-card.running { opacity: 0.7; cursor: wait; }

/* Semantic border styles */
.style-danger  { border-color: rgba(239, 68, 68, 0.35) !important; }
.style-warning { border-color: rgba(245, 158, 11, 0.35) !important; }
.style-danger:not(:disabled):hover  { border-color: rgba(239, 68, 68, 0.75) !important; }
.style-warning:not(:disabled):hover { border-color: rgba(245, 158, 11, 0.75) !important; }
.dark .style-danger  { border-color: rgba(239, 68, 68, 0.3) !important; }
.dark .style-warning { border-color: rgba(245, 158, 11, 0.3) !important; }
.dark .style-danger:not(:disabled):hover  { border-color: rgba(239, 68, 68, 0.65) !important; }
.dark .style-warning:not(:disabled):hover { border-color: rgba(245, 158, 11, 0.65) !important; }

/* Accent colors */
.color-blue   { --accent: #3b82f6; }
.color-purple { --accent: #a855f7; }
.color-green  { --accent: #22c55e; }
.color-orange { --accent: #f97316; }
.color-cyan   { --accent: #06b6d4; }
.color-indigo { --accent: #6366f1; }
.color-pink   { --accent: #ec4899; }
.color-red    { --accent: #ef4444; }
.color-amber  { --accent: #f59e0b; }

.card-icon { color: var(--accent); }
.card-ring:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Console panel ───────────────────────────────────────────────────────── */
#console-panel { display: none; }
#console-panel.visible { display: flex; }

/* ── Log viewer (history page) ───────────────────────────────────────────── */
#log-viewer { display: none; }
#log-viewer.visible { display: flex; }

/* ── History table ───────────────────────────────────────────────────────── */
#history-body tr { cursor: pointer; transition: background 0.1s; }
#history-body tr.selected td { background: rgb(239 246 255 / 1); }
.dark #history-body tr.selected td { background: rgb(23 37 84 / 0.4); }
#history-body tr:hover td { background: rgb(244 244 245 / 1); }
.dark #history-body tr:hover td { background: rgb(39 39 42 / 1); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-backdrop { animation: fadeIn 0.1s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { animation: slideUp 0.15s ease; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Nav active indicator ────────────────────────────────────────────────── */
.nav-link { position: relative; }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
}