/* ===== JoJo's Server — warm, minimal theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #262624;
  --surface: #2f2f2c;
  --surface-2: #363632;
  --border: #42413c;
  --text: #f0eee6;
  --muted: #a39f95;
  --accent: #d97757;
  --accent-soft: rgba(217, 119, 87, 0.14);
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Page */
html, body, #page_wrapper, #inner_wrapper {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body {
  background-image: radial-gradient(1200px 500px at 50% -200px, rgba(217,119,87,0.08), transparent 70%) !important;
  background-attachment: fixed !important;
}
#inner_wrapper { max-width: 1280px; margin: 0 auto; }
::selection { background: rgba(217,119,87,.35); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* Section headings */
.service-group-name, #bookmarks h2 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.35rem !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  flex-direction: column;
}
.service-group-name::after, #bookmarks h2::after {
  content: ""; display: block; height: 2px; width: 24px; margin-top: 6px;
  background: var(--accent); border-radius: 2px;
  transition: width 240ms var(--ease);
}
.services-group:hover .service-group-name::after,
#bookmarks > div:hover h2::after { width: 44px; }
.services-group button svg, #bookmarks button svg { color: var(--muted) !important; }

/* Service cards */
.service-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15) !important;
  backdrop-filter: none !important;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease) !important;
}
.service-card:hover {
  transform: translateY(-2px);
  background: var(--surface-2) !important;
  border-color: rgba(217,119,87,.45) !important;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6), 0 0 0 1px var(--accent-soft) !important;
}
.service-card:active { transform: translateY(0) scale(.995); }
.service-card img { transition: transform 220ms var(--ease); }
.service-card:hover img { transform: scale(1.07); }

.service-name, .service-card .font-medium { color: var(--text) !important; font-weight: 600 !important; }
.service-description, .service-card [class*="text-theme"], .text-xs { color: var(--muted) !important; }

/* Stat blocks inside cards */
.service-block {
  background: rgba(255,255,255,.035) !important;
  border-radius: 10px !important;
  transition: background 160ms var(--ease);
}
.service-card:hover .service-block { background: rgba(255,255,255,.055) !important; }
.service-block > div:first-child { color: var(--text) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.service-block > div:last-child { color: var(--muted) !important; letter-spacing: .04em; }

/* Status dot: soft glow, no looping animation */
.service-card [title="Running"] div[class*="rounded-full"],
.service-card [title="Healthy"] div[class*="rounded-full"] {
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.service-card [title] { background: transparent !important; }

/* Bookmarks: one clean row each */
li.bookmark { background: none !important; border: 0 !important; }
li.bookmark > a {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease) !important;
}
li.bookmark > a:hover {
  transform: translateX(3px);
  background: var(--surface-2) !important;
  border-color: rgba(217,119,87,.45) !important;
}
li.bookmark > a > div > div:first-child { background: rgba(255,255,255,.03) !important; }
.bookmark-text, .bookmark-text * { color: var(--text) !important; }
.bookmark-text > div:last-child, .bookmark-description { color: var(--muted) !important; }

/* Top info widgets: one calm panel */
#information-widgets {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  margin-bottom: .75rem;
}
#information-widgets .widget-container,
#information-widgets .widget-container > div,
#information-widgets [class*="rounded"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#information-widgets [class*="bg-theme"][class*="h-"] { border-radius: 999px !important; }
#information-widgets .rounded-full > div, #information-widgets [style*="width"] { background-color: var(--accent) !important; }
#information-widgets * { color: var(--text); }
#information-widgets .text-xs, #information-widgets [class*="pr-1"] { color: var(--muted) !important; }

/* Load-in: quick fade/rise, staggered by group (runs once) */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#information-widgets, .services-group, #bookmarks > div { animation: rise 360ms var(--ease) both; }
.services-group:nth-child(2) { animation-delay: 50ms; }
.services-group:nth-child(3) { animation-delay: 100ms; }
#bookmarks > div:nth-child(1) { animation-delay: 140ms; }
#bookmarks > div:nth-child(2) { animation-delay: 180ms; }
#bookmarks > div:nth-child(3) { animation-delay: 220ms; }

/* Keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 12px;
}

/* Hide divider line & footer clutter */
#page_wrapper hr, #layout-groups + div hr { border-color: transparent !important; }
#footer { opacity: .5; }

/* Mobile */
@media (max-width: 640px) {
  #inner_wrapper { padding-left: 12px !important; padding-right: 12px !important; }
  .service-card:hover, li.bookmark > a:hover { transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Family page: big friendly buttons ===== */
#inner_wrapper { max-width: 960px; }
.service-card { min-height: 120px; display: flex; flex-direction: column; justify-content: center; }
.service-card .service-title { padding: 1rem .75rem !important; }
.service-name { font-size: 1.2rem !important; }
.service-card img { width: 52px !important; height: 52px !important; }
.service-card:hover { transform: translateY(-4px); }
.service-group-name { display: none !important; }
#information-widgets { text-align: center; }
#information-widgets .widget-container:first-child * {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 1.6rem !important; font-weight: 500 !important;
}