/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: system-ui, sans-serif; }

body {
  background: #fff;
  color: #111;
  margin: 0;
  padding: 0;
}

/* Dark mode */
html.dark body {
  background: #000;
  color: #fff;
}

/* Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Layout */
.layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}
@media (min-width: 1024px) {
  .layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .layout-main { flex: 3; padding-right: 16px; }
  .layout-sidebar { flex: 1; }
}
.layout-main { min-width: 0; }

/* Heading */
h1.site-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.site-description {
  font-size: 0.85rem;
  margin-bottom: 16px;
  opacity: 0.75;
}
hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }
html.dark hr { border-top-color: #374151; }

/* Category nav */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cat-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid #fdba74;
  background: #fff7ed;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.cat-btn:hover { background: #fed7aa; }
.cat-btn.active {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}
html.dark .cat-btn { background: #1f2937; border-color: #92400e; color: #fff; }
html.dark .cat-btn:hover { background: #374151; }
html.dark .cat-btn.active { background: #b45309; border-color: #b45309; }

/* News card */
.news-card {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 6px;
}
html.dark .news-card { background: #374151; border-color: #92400e; }

.news-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 6px;
  gap: 8px;
}
.news-source {
  opacity: 0.8;
}

.news-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.news-title a {
  color: inherit;
  text-decoration: none;
}
.news-title a:hover { text-decoration: underline; }

.news-preview {
  font-size: 0.82rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 500;
}
.badge-orange { background: #fdba74; color: #111; }
.badge-today  { background: #ea580c; color: #fff; }
.badge-cat    { background: #fed7aa; color: #111; }
html.dark .badge-orange { background: #92400e; color: #fff; }
html.dark .badge-today  { background: #b45309; color: #fff; }
html.dark .badge-cat    { background: #78350f; color: #fff; }

/* Load more */
.btn-load-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.btn-load-more:hover { background: #fed7aa; }
html.dark .btn-load-more { background: #374151; border-color: #92400e; color: #fff; }
html.dark .btn-load-more:hover { background: #4b5563; }

/* Spinner (htmx indicator) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: flex; justify-content: center; padding: 20px; }
.spinner {
  width: 40px; height: 40px;
  border: 3px solid #ccc;
  border-top-color: #ea580c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sidebar */
.sidebar {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 14px;
  font-size: 0.85rem;
}
html.dark .sidebar { background: #374151; border-color: #92400e; }

.sidebar h2 { font-size: 1.1rem; margin: 0 0 6px 0; }
.sidebar p  { margin: 0 0 10px 0; opacity: 0.85; line-height: 1.5; }
.sidebar section { margin-bottom: 16px; }
.sidebar a { color: inherit; }

/* Controls row (lang buttons + dark mode) */
.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.lang-nav { display: flex; gap: 4px; }
.lang-btn {
  font-size: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #fdba74;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.lang-btn:hover { background: #fed7aa; }
.lang-btn.active { background: #ea580c; color: #fff; border-color: #ea580c; }
html.dark .lang-btn { border-color: #92400e; }
html.dark .lang-btn:hover { background: #374151; }
html.dark .lang-btn.active { background: #b45309; border-color: #b45309; }

/* Dark mode toggle */
.dark-toggle {
  background: none;
  border: 1px solid #fdba74;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  color: inherit;
}
html.dark .dark-toggle { border-color: #92400e; }

/* Footer links */
.footer-links { font-size: 0.75rem; text-align: center; opacity: 0.8; }
.footer-links b { display: block; margin-top: 8px; }
.footer-links ul { list-style: none; margin: 4px 0; padding: 0; }
.footer-links li::before { content: "- "; }
.gh-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.gh-link img { width: 18px; }
html.dark .gh-link img { filter: invert(1); }

/* API link */
.api-link { font-size: 0.75rem; opacity: 0.7; margin-top: 6px; }
.api-link a { color: inherit; }

/* btree.at banner */
.btree-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fdba74;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  text-decoration: none;
  color: inherit;
  margin-top: 8px;
  transition: box-shadow 0.15s;
}
.btree-banner:hover { box-shadow: 0 2px 8px rgba(234,88,12,0.2); border-color: #ea580c; }
.btree-banner img { flex-shrink: 0; border-radius: 4px; }
.btree-banner div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.btree-banner strong { font-size: 0.9rem; color: #c2410c; }
.btree-banner span { font-size: 0.75rem; opacity: 0.8; }
.btree-arrow { font-size: 1rem; color: #ea580c; flex-shrink: 0; }
html.dark .btree-banner { background: linear-gradient(135deg, #1c1410 0%, #2d1a0a 100%); border-color: #92400e; }
html.dark .btree-banner:hover { border-color: #ea580c; }
html.dark .btree-banner strong { color: #fb923c; }