/* ============================================
   OWLFREDO.COM - "THE SWORD IN THE STONE" THEME
   Hand-drawn medieval aesthetic inspired by
   Disney's 1963 animated classic
   v2.0 — Font readability fix, overflow fix, magical effects
   ============================================ */

/* ---- SVG FILTER for hand-drawn rough edges ---- */
/* Applied via CSS filter: url(#roughen) */

/* ---- MEDIEVAL COLOR PALETTE ---- */
/*
   Parchment cream:   #f5e6c8 / #e8d5b0
   Dark cottage:      #1a1814 / #221f1a
   Warm wood:         #3d3427 / #2e2820
   Merlin blue:       #4a6fa5 / #3b5882
   Gold/magic:        #F5A623 / #daa520
   Fireplace amber:   #d4763a / #c06830
   Stone gray:        #8b8680 / #6b6660
   Forest green:      #3e7b34
   Arthur red:        #b84040
*/

/* ============================================
   1. BASE: Warm dark background (Merlin's cottage)
   ============================================ */
html, body {
  color: #f5e6c8 !important;
}

body {
  font-family: 'EB Garamond', 'Crimson Pro', 'Georgia', serif !important;
  background: #1a1814 !important;
  background-image:
    /* Subtle parchment-grain noise texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") !important;
  animation: none !important;
  background-size: auto !important;
}

/* Replace star-field with warm floating particles */
body::before {
  background-image:
    /* Warm golden dust motes — like firelight particles */
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(245,166,35,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 42%, rgba(218,165,32,0.08) 0%, transparent 100%),
    radial-gradient(2px 2px at 37% 8%, rgba(245,166,35,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 63%, rgba(212,118,58,0.07) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 28%, rgba(245,166,35,0.09) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 74%, rgba(218,165,32,0.06) 0%, transparent 100%),
    radial-gradient(2px 2px at 91% 19%, rgba(245,166,35,0.11) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 88%, rgba(212,118,58,0.05) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 95%, rgba(245,166,35,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 50%, rgba(218,165,32,0.07) 0%, transparent 100%) !important;
  background-size: 500px 500px !important;
  animation: dustDrift 120s linear infinite !important;
  opacity: 0.6 !important;
}

body::after {
  background-image:
    radial-gradient(1px 1px at 8% 33%, rgba(245,166,35,0.07) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 19% 61%, rgba(212,118,58,0.09) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 22%, rgba(218,165,32,0.06) 0%, transparent 100%),
    radial-gradient(2px 2px at 56% 78%, rgba(245,166,35,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 11%, rgba(212,118,58,0.10) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 44%, rgba(218,165,32,0.05) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 67%, rgba(245,166,35,0.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 89%, rgba(212,118,58,0.06) 0%, transparent 100%) !important;
  background-size: 700px 700px !important;
  animation: dustDrift 160s linear infinite reverse !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

@keyframes dustDrift {
  from { background-position: 0 0; }
  to   { background-position: 500px 500px; }
}

/* ============================================
   2. CONTAINER — Parchment scroll feel
   ============================================ */
.container {
  position: relative;
  z-index: 1;
  overflow-x: hidden !important;
}

/* ============================================
   3. HEADER — Medieval styling
   ============================================ */
.header h1 {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Georgia', serif !important;
  font-weight: 700 !important;
  font-size: 2.8rem !important;
  background: linear-gradient(135deg, #f5e6c8 0%, #F5A623 40%, #daa520 70%, #f5e6c8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  letter-spacing: 0.06em !important;
  filter: drop-shadow(0 2px 8px rgba(245,166,35,0.25));
}

.header .subtitle {
  font-family: 'EB Garamond', 'Crimson Pro', serif !important;
  font-size: 1.15rem !important;
  color: rgba(245, 230, 200, 0.55) !important;
  font-style: italic !important;
  letter-spacing: 0.04em !important;
}

.header .owl-hint {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 166, 35, 0.6) !important;
  font-style: italic !important;
  font-size: 0.85rem !important;
}

/* Header decorative divider — medieval line with diamond */
.header::after {
  content: '' !important;
  display: block !important;
  position: relative !important;
  width: 60% !important;
  max-width: 400px !important;
  height: 6px !important;
  margin: 1.2rem auto 0 !important;
  background:
    radial-gradient(circle at 50%, rgba(245,166,35,0.9) 0%, rgba(245,166,35,0.9) 3px, transparent 3px),
    linear-gradient(to right, transparent 0%, rgba(245,166,35,0.10) 15%, rgba(245,166,35,0.35) 50%, rgba(245,166,35,0.10) 85%, transparent 100%) !important;
  background-size: 100% 100%, 100% 1px !important;
  background-repeat: no-repeat !important;
  background-position: center center, center center !important;
}

/* ============================================
   4. NAVIGATION — Medieval scroll tabs
   ============================================ */
.nav-link {
  font-family: 'Cinzel', 'Georgia', serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
  border: 1px solid rgba(245, 166, 35, 0.2) !important;
  border-radius: 6px !important;
  background: rgba(42, 36, 28, 0.6) !important;
  color: rgba(245, 230, 200, 0.75) !important;
  padding: 0.6rem 1.3rem !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.nav-link:hover {
  background: rgba(245, 166, 35, 0.12) !important;
  border-color: rgba(245, 166, 35, 0.45) !important;
  color: #F5A623 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.12) !important;
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(245,166,35,0.85) 0%, rgba(218,165,32,0.9) 100%) !important;
  border-color: rgba(245,166,35,0.6) !important;
  color: #1a1814 !important;
  box-shadow: 0 4px 20px rgba(245, 166, 35, 0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
}

/* Nav underline micro-interaction override */
.nav-link:not(.active)::after {
  background: rgba(245, 166, 35, 0.5) !important;
  height: 1px !important;
  bottom: -3px !important;
}

/* Nav links overflow fix */
.nav-links {
  flex-wrap: wrap !important;
  overflow: hidden !important;
  justify-content: center !important;
}

/* ============================================
   5. CONTROLS CARD — Parchment-like panel
   ============================================ */
.controls-card {
  background: rgba(42, 36, 28, 0.65) !important;
  border: 1px solid rgba(245, 166, 35, 0.12) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(245, 230, 200, 0.04) !important;
  overflow: hidden !important;
}

.controls-card:hover {
  border-color: rgba(245, 166, 35, 0.2) !important;
}

.control-group {
  background: rgba(26, 24, 20, 0.5) !important;
  border: 1px solid rgba(245, 166, 35, 0.08) !important;
  border-radius: 6px !important;
}

.control-group label,
.last-sync-label {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 230, 200, 0.5) !important;
}

.controls-bar {
  flex-wrap: wrap !important;
}

/* Last sync text */
.last-sync,
.last-sync span,
#lastSyncTime {
  color: rgba(245, 230, 200, 0.5) !important;
  font-family: 'EB Garamond', serif !important;
}

/* ============================================
   6. DASHBOARD CARDS — Medieval parchment cards
   ============================================ */
.dashboard-card {
  background: rgba(42, 36, 28, 0.7) !important;
  border: 1px solid rgba(245, 166, 35, 0.10) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(245, 230, 200, 0.04) !important;
  /* Subtle parchment corner decoration */
  background-image:
    radial-gradient(ellipse at top left, rgba(245,166,35,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(212,118,58,0.03) 0%, transparent 50%) !important;
  /* Overflow containment */
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.dashboard-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(245, 166, 35, 0.25) !important;
  box-shadow:
    0 0 0 1px rgba(245, 166, 35, 0.15),
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(245, 166, 35, 0.06) !important;
}

/* Card glow overlay on hover */
.dashboard-card::after {
  background: linear-gradient(135deg, rgba(245,166,35,0.05) 0%, transparent 40%, rgba(212,118,58,0.03) 100%) !important;
}

.card-title h3 {
  font-family: 'Cinzel', 'Georgia', serif !important;
  font-weight: 600 !important;
  color: #f5e6c8 !important;
  letter-spacing: 0.02em !important;
}

.card-title .domain {
  font-family: 'JetBrains Mono', monospace !important;
  color: rgba(245, 230, 200, 0.35) !important;
}

.card-description {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 230, 200, 0.55) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

.card-icon {
  background: rgba(245, 166, 35, 0.10) !important;
  border: 1px solid rgba(245, 166, 35, 0.15) !important;
  border-radius: 8px !important;
}

.card-stats {
  border-top: 1px solid rgba(245, 166, 35, 0.08) !important;
  overflow: hidden !important;
}

/* Card actions */
.card-actions {
  border-top: 1px solid rgba(245, 166, 35, 0.08) !important;
}

.card-action.secondary {
  background: transparent !important;
  color: rgba(245, 230, 200, 0.6) !important;
  border: 1px solid rgba(245, 166, 35, 0.15) !important;
}

.card-action.secondary:hover {
  color: #F5A623 !important;
  border-color: rgba(245, 166, 35, 0.4) !important;
  background: rgba(245, 166, 35, 0.08) !important;
}

/* Dev stats & badges */
.dev-stats-placeholder {
  color: rgba(245, 230, 200, 0.5) !important;
}

.dev-stats-badge {
  color: rgba(245, 166, 35, 0.7) !important;
  font-family: 'Cinzel', serif !important;
}

.coming-soon-badge {
  color: rgba(245, 166, 35, 0.6) !important;
  font-family: 'Cinzel', serif !important;
}

/* Sync badge */
.sync-badge {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 230, 200, 0.5) !important;
  background: rgba(42, 36, 28, 0.8) !important;
  border: 1px solid rgba(245, 166, 35, 0.1) !important;
}

/* Card link (invisible click-through) */
.card-link {
  color: transparent !important;
}

/* ============================================
   7. STAT VALUES — Magical golden glow
   ============================================ */
.stat-value {
  font-family: 'Cinzel', serif !important;
  color: #F5A623 !important;
  text-shadow:
    0 0 15px rgba(245, 166, 35, 0.35),
    0 0 30px rgba(245, 166, 35, 0.12) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-card:hover .stat-value {
  text-shadow:
    0 0 20px rgba(245, 166, 35, 0.5),
    0 0 40px rgba(245, 166, 35, 0.2),
    0 0 60px rgba(245, 166, 35, 0.08) !important;
}

.stat-label {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 230, 200, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.7rem !important;
}

/* ============================================
   8. BUTTONS — Hand-crafted medieval buttons
   ============================================ */
.control-group button,
button,
.action-btn,
.card-action {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.03em !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #F5A623 0%, #daa520 100%) !important;
  color: #1a1814 !important;
  border: 1px solid rgba(218, 165, 32, 0.3) !important;
  box-shadow: 0 2px 8px rgba(245, 166, 35, 0.15), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  text-transform: uppercase !important;
}

.control-group button:hover,
button:hover,
.action-btn:hover,
.card-action:hover {
  background: linear-gradient(135deg, #ffb833 0%, #F5A623 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Refresh All button */
button[onclick*="refreshAllNow"],
.control-group button:first-of-type {
  background: transparent !important;
  border: 1px solid rgba(245, 166, 35, 0.35) !important;
  color: #F5A623 !important;
}

button[onclick*="refreshAllNow"]::before,
.control-group button:first-of-type::before {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(218, 165, 32, 0.04) 100%) !important;
}

/* ============================================
   9. STATUS BADGES — Medieval crests
   ============================================ */
.status-badge {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
}

.status-badge.live {
  color: #3e7b34 !important;
  background: rgba(62, 123, 52, 0.15) !important;
  border: 1px solid rgba(62, 123, 52, 0.3) !important;
}

.status-badge.dev {
  color: #F5A623 !important;
  background: rgba(245, 166, 35, 0.1) !important;
  border: 1px solid rgba(245, 166, 35, 0.25) !important;
}

.status-badge.offline {
  color: #b84040 !important;
  background: rgba(184, 64, 64, 0.1) !important;
  border: 1px solid rgba(184, 64, 64, 0.25) !important;
}

/* ============================================
   10. SELECT DROPDOWNS — Scroll-like
   ============================================ */
select {
  font-family: 'EB Garamond', serif !important;
  background-color: rgba(26, 24, 20, 0.85) !important;
  border: 1px solid rgba(245, 166, 35, 0.2) !important;
  color: #f5e6c8 !important;
  border-radius: 6px !important;
}

select:hover { border-color: rgba(245, 166, 35, 0.4) !important; }
select:focus { border-color: rgba(245, 166, 35, 0.6) !important; box-shadow: 0 0 0 3px rgba(245,166,35,0.08) !important; }
select option { background-color: #1a1814 !important; color: #f5e6c8 !important; }

/* ============================================
   11. FOCUS STATES — Golden glow
   ============================================ */
:focus-visible {
  outline: 2px solid rgba(245, 166, 35, 0.6) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.08) !important;
}

/* ============================================
   12. GUARDIAN VIEWPORT — Merlin's scrying glass
   ============================================ */
.guardian-viewport,
.guardian-report,
[class*="guardian"] {
  background: rgba(42, 36, 28, 0.6) !important;
  border: 1px solid rgba(245, 166, 35, 0.10) !important;
  border-radius: 8px !important;
}

.guardian-viewport {
  overflow: hidden !important;
  max-width: 100% !important;
}

.guardian-viewport h2 {
  font-family: 'Cinzel', serif !important;
  color: #F5A623 !important;
}

.guardian-last-check {
  color: rgba(245, 230, 200, 0.45) !important;
  font-family: 'EB Garamond', serif !important;
}

.guardian-grid {
  overflow: hidden !important;
}

.guardian-check-item {
  background: rgba(26, 24, 20, 0.5) !important;
  border: 1px solid rgba(245, 166, 35, 0.06) !important;
  border-radius: 6px !important;
  color: rgba(245, 230, 200, 0.7) !important;
  overflow: hidden !important;
}

.guardian-check-item .check-name {
  color: rgba(245, 230, 200, 0.8) !important;
  font-family: 'EB Garamond', serif !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 160px !important;
}

.guardian-check-item .check-detail {
  color: rgba(245, 230, 200, 0.4) !important;
  font-family: 'EB Garamond', serif !important;
}

.guardian-summary span {
  color: rgba(245, 230, 200, 0.45) !important;
  font-family: 'EB Garamond', serif !important;
}

.guardian-loading {
  color: rgba(245, 230, 200, 0.3) !important;
  font-family: 'EB Garamond', serif !important;
}

.guardian-refresh-btn {
  font-family: 'Cinzel', serif !important;
  color: #F5A623 !important;
  border-color: rgba(245, 166, 35, 0.3) !important;
  background: transparent !important;
}

.guardian-refresh-btn:hover {
  background: rgba(245, 166, 35, 0.1) !important;
  border-color: rgba(245, 166, 35, 0.5) !important;
}

.guardian-status-badge {
  font-family: 'Cinzel', serif !important;
}

/* ============================================
   13. SYSTEM STATUS — Stone tablet styling
   ============================================ */
.system-status {
  background: rgba(42, 36, 28, 0.5) !important;
  border: 1px solid rgba(245, 166, 35, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.status-grid {
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
}

.system-status h2 {
  font-family: 'Cinzel', serif !important;
  color: #F5A623 !important;
}

.status-item {
  background: rgba(42, 36, 28, 0.5) !important;
  border: 1px solid rgba(245, 166, 35, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(245, 230, 200, 0.8) !important;
  overflow: hidden !important;
}

.status-item:hover {
  border-color: rgba(245, 166, 35, 0.2) !important;
}

.status-item span {
  color: rgba(245, 230, 200, 0.8) !important;
}

.status-icon {
  background: rgba(245, 166, 35, 0.10) !important;
  border-radius: 8px !important;
}

.status-text .label {
  color: rgba(245, 230, 200, 0.45) !important;
  font-family: 'EB Garamond', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.status-text .value {
  color: rgba(245, 230, 200, 0.9) !important;
  font-family: 'EB Garamond', serif !important;
}

.status-text .value.loading {
  color: rgba(245, 230, 200, 0.35) !important;
}

/* ============================================
   14. FOOTER — Faded medieval feel
   ============================================ */
.footer,
footer {
  font-family: 'EB Garamond', serif !important;
  color: rgba(245, 230, 200, 0.3) !important;
  border-top: 1px solid rgba(245, 166, 35, 0.06) !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
}

footer p {
  color: rgba(245, 230, 200, 0.3) !important;
}

.guardian-status {
  color: rgba(245, 230, 200, 0.3) !important;
}

/* ============================================
   15. SHIMMER — Golden magic sparkle
   ============================================ */
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,0.06) 50%, transparent 100%) !important;
}

/* ============================================
   16. SCROLLBAR — Medieval parchment style
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1814;
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 166, 35, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.35);
}

/* ============================================
   17. TEXT SELECTION — Golden highlight
   ============================================ */
::selection {
  background: rgba(245, 166, 35, 0.3);
  color: #f5e6c8;
}

/* ============================================
   18. TOAST NOTIFICATIONS
   ============================================ */
.toast {
  background: rgba(42, 36, 28, 0.95) !important;
  border: 1px solid rgba(245, 166, 35, 0.2) !important;
  color: #f5e6c8 !important;
  font-family: 'EB Garamond', serif !important;
}

/* ============================================
   19. ERROR STATES
   ============================================ */
.module-error {
  color: #fca5a5 !important;
}

.module-error .error-detail {
  color: rgba(245, 230, 200, 0.5) !important;
}

/* Refresh indicator */
.refresh-indicator {
  background: rgba(245, 166, 35, 0.3) !important;
}

/* ============================================
   20. HAND-DRAWN BORDER EFFECT VIA SVG FILTER
   ============================================ */
/* Cards get a subtle rough-edge look */
.dashboard-card,
.controls-card {
  filter: url(#medieval-roughen);
}

/* ============================================
   21. MAGICAL EFFECTS — Subtle enchantments
   ============================================ */

/* -- Enchanted glow pulse on active nav -- */
@keyframes magicGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(245,166,35,0.1); }
  50% { box-shadow: 0 0 20px rgba(245,166,35,0.2), 0 0 40px rgba(245,166,35,0.08); }
}

.nav-link.active {
  animation: magicGlow 3s ease-in-out infinite !important;
}

/* -- Lantern glow on owl -- */
@keyframes lanternGlow {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(245,166,35,0.15)) drop-shadow(0 0 30px rgba(245,166,35,0.06));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(245,166,35,0.25)) drop-shadow(0 0 45px rgba(245,166,35,0.1));
  }
}

.header .owl-logo img,
.archimedes-body img {
  animation: lanternGlow 4s ease-in-out infinite !important;
  transition: filter 0.4s ease;
}

.header .owl-logo:hover img,
.archimedes-body:hover img {
  filter: drop-shadow(0 0 22px rgba(245, 166, 35, 0.4)) drop-shadow(0 0 50px rgba(245, 166, 35, 0.18)) !important;
  animation: none !important;
}

/* -- Enchanted pulse on section headers -- */
@keyframes enchantedPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(245,166,35,0.15); }
  50% { text-shadow: 0 0 16px rgba(245,166,35,0.3), 0 0 32px rgba(245,166,35,0.1); }
}

.guardian-viewport h2,
.system-status h2 {
  animation: enchantedPulse 4s ease-in-out infinite !important;
}

/* -- Stat values sparkle on card hover -- */
@keyframes statMagic {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 4px rgba(245,166,35,0.4)); }
  100% { filter: brightness(1); }
}

.dashboard-card:hover .stat-value {
  animation: statMagic 2s ease-in-out infinite !important;
}

/* -- Subtle breathing glow on controls border -- */
@keyframes borderGlow {
  0%, 100% { border-color: rgba(245,166,35,0.08); }
  50% { border-color: rgba(245,166,35,0.18); }
}

.controls-card {
  animation: borderGlow 6s ease-in-out infinite !important;
}

/* -- Card entrance animation -- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.dashboard-card {
  animation: fadeInUp 0.5s ease-out both !important;
}

.dashboard-card:nth-child(1) { animation-delay: 0.05s !important; }
.dashboard-card:nth-child(2) { animation-delay: 0.1s !important; }
.dashboard-card:nth-child(3) { animation-delay: 0.15s !important; }
.dashboard-card:nth-child(4) { animation-delay: 0.2s !important; }
.dashboard-card:nth-child(5) { animation-delay: 0.25s !important; }
.dashboard-card:nth-child(6) { animation-delay: 0.3s !important; }

.guardian-viewport {
  animation: fadeInUp 0.5s ease-out 0.35s both !important;
}

.system-status {
  animation: fadeInUp 0.5s ease-out 0.4s both !important;
}

/* -- Magic wand glow on card hover (subtle inner radiance) -- */
.dashboard-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(245,166,35,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(74,111,165,0.04) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.dashboard-card:hover::before {
  opacity: 1 !important;
}

/* -- Warm lantern vignette around entire page -- */
.container::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  box-shadow:
    inset 0 0 150px rgba(26, 24, 20, 0.5),
    inset 0 0 80px rgba(0, 0, 0, 0.3) !important;
}

/* -- Enchanted focus ring -- */
.nav-link:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(245, 166, 35, 0.5) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.08), 0 0 20px rgba(245, 166, 35, 0.1) !important;
}

/* ============================================
   22. GUARDIAN SECTION LABELS
   ============================================ */
.guardian-section-label {
  grid-column: 1 / -1 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(245, 166, 35, 0.5) !important;
  padding: 0.3rem 0 !important;
  margin-top: 0.3rem !important;
  border-bottom: 1px solid rgba(245, 166, 35, 0.08) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

/* ============================================
   23. SERVER METRIC CARDS (System Status)
   ============================================ */
.metric-card {
  background: rgba(42, 36, 28, 0.5) !important;
  border: 1px solid rgba(245, 166, 35, 0.08) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  transition: all 0.3s ease !important;
}

.metric-card:hover {
  border-color: rgba(245, 166, 35, 0.2) !important;
  transform: translateY(-2px) !important;
}

.metric-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.metric-icon {
  font-size: 1.2rem !important;
}

.metric-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(245, 230, 200, 0.5) !important;
}

.metric-value-large {
  font-family: 'Cinzel', serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.metric-value-large.healthy {
  color: #3e7b34 !important;
  text-shadow: 0 0 12px rgba(62, 123, 52, 0.3) !important;
}

.metric-value-large.warning {
  color: #F5A623 !important;
  text-shadow: 0 0 12px rgba(245, 166, 35, 0.3) !important;
}

.metric-value-large.critical {
  color: #b84040 !important;
  text-shadow: 0 0 12px rgba(184, 64, 64, 0.3) !important;
}

.metric-bar {
  width: 100% !important;
  height: 4px !important;
  background: rgba(245, 230, 200, 0.08) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.metric-bar-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width 0.6s ease !important;
}

.metric-bar-fill.healthy {
  background: linear-gradient(90deg, #3e7b34, #4a9b40) !important;
}

.metric-bar-fill.warning {
  background: linear-gradient(90deg, #F5A623, #daa520) !important;
}

.metric-bar-fill.critical {
  background: linear-gradient(90deg, #b84040, #d45050) !important;
}

.metric-sub {
  font-family: 'EB Garamond', serif !important;
  font-size: 0.75rem !important;
  color: rgba(245, 230, 200, 0.4) !important;
  line-height: 1.3 !important;
}

/* Status grid for metric cards */
.system-status .status-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
}

/* ============================================
   24. RESPONSIVE OVERFLOW FIXES
   ============================================ */
@media (max-width: 768px) {
  .header h1 {
    font-size: 1.8rem !important;
  }

  .nav-link {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.8rem !important;
  }

  .guardian-check-item .check-name {
    max-width: 100px !important;
  }

  .system-status .status-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .metric-value-large {
    font-size: 1.3rem !important;
  }
}