:root {
  --bg: oklch(15% 0.01 260);
  --fg: oklch(95% 0.01 260);
  --accent: oklch(70% 0.2 30);
  --accent-2: oklch(75% 0.15 200);
  --card: oklch(20% 0.01 260);
  --muted: oklch(40% 0.01 260);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="light"] {
  --bg: oklch(98% 0.01 260);
  --fg: oklch(15% 0.01 260);
  --card: oklch(95% 0.01 260);
  --muted: oklch(60% 0.01 260);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 16px; min-height: 100vh;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; max-width: 900px; margin-inline: auto;
}
h1 { font-size: 1.4rem; font-weight: 600; }
main {
  display: grid; gap: 10px; max-width: 900px; margin: 0 auto;
}
.card {
  background: var(--card); padding: 14px 16px; border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--fg) 8%, transparent);
}
.card h2 { font-size: 0.95rem; margin-bottom: 6px; font-weight: 600; }
.card p { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; line-height: 1.4; }
.hero {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent) 12%, var(--card)),
    var(--card));
}
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge {
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  color: var(--accent); padding: 3px 8px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 500;
}
button {
  background: var(--accent); color: oklch(15% 0.01 260); border: none;
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  transition: transform 0.1s var(--ease), background 0.2s var(--ease);
}
button:hover { background: color-mix(in oklch, var(--accent) 90%, white); }
button:active { transform: scale(0.95); }
#like-btn .heart { font-size: 1.1rem; transition: transform 0.2s var(--ease); }
#like-btn[data-liked="true"] .heart { color: #ff4757; transform: scale(1.3); }
#sse-feed, #api-result {
  background: var(--bg); padding: 8px 10px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 0.8rem;
  max-height: 120px; overflow-y: auto; margin-top: 8px;
  white-space: pre-wrap; word-break: break-all;
  border: 1px solid color-mix(in oklch, var(--fg) 6%, transparent);
}
[popover] {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 10px 14px; max-width: 300px; font-size: 0.85rem;
}
@starting-style {
  [popover]:popover-open { opacity: 0; transform: translateY(-10px); }
  dialog[open] { opacity: 0; transform: scale(0.9); }
}
[popover]:popover-open, dialog[open] {
  opacity: 1; transform: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
dialog {
  background: var(--card); color: var(--fg);
  border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
  border-radius: 8px; padding: 20px; max-width: 400px;
}
dialog::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
dialog h3 { margin-bottom: 10px; }
dialog p { margin-bottom: 14px; }
.system-status #status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-top: 8px;
}
.system-status .stat {
  background: var(--bg); padding: 8px 10px; border-radius: 4px;
  border-left: 2px solid var(--accent-2);
}
.system-status .stat-label { font-size: 0.7rem; color: var(--muted); }
.system-status .stat-value { font-size: 0.95rem; font-weight: 600; margin-top: 2px; }
@view-transition { navigation: auto; }
::view-transition-old(vt-box), ::view-transition-new(vt-box) {
  animation-duration: 0.4s; animation-timing-function: var(--ease);
}