/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f4f5f7; color: #1a1a2e; }
a { color: #1e6fc8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ────────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1a1a2e; color: #fff;
  padding: 0 24px; height: 56px;
}
.site-logo { color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: .05em; }
.site-nav { display: flex; align-items: center; gap: 16px; }
.site-nav a, .site-nav button { color: #fff; background: none; border: none; cursor: pointer; font-size: .9rem; }
.site-nav .btn-primary {
  background: #e05c2f; padding: 6px 14px; border-radius: 4px; font-weight: 600;
}
.nav-user { font-size: .8rem; color: #aab; }

/* ── App shell ─────────────────────────────────────── */
.dfuc-app { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 20px; }

.app-status {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e6b800;
  background: #fff8dc;
  color: #6d5200;
  font-size: .92rem;
}

.app-status-hidden {
  display: none;
}

.app-status-error {
  border-color: #c0392b;
  background: #fff0ee;
  color: #8b1e14;
}

/* ── Filter bar ────────────────────────────────────── */
.app-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
  background: #fff; border: 1px solid #dde; border-radius: 8px; padding: 16px;
}
.filter-group { display: grid; gap: 4px; }
.filter-group label { font-size: .75rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.filter-group select { width: 100%; padding: 6px 8px; border: 1px solid #ccd; border-radius: 4px; }
.filter-actions {
  display: flex;
  align-items: end;
}
.apply-button {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 4px;
  background: #1e6fc8;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.apply-button:hover {
  background: #185ca6;
}

/* ── KPI cards ─────────────────────────────────────── */
.app-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-card {
  background: #fff; border: 1px solid #dde; border-radius: 8px;
  padding: 16px; text-align: center;
}
.kpi-highlight { border-color: #e05c2f; }
.kpi-card h3 { font-size: .85rem; color: #555; margin-bottom: 8px; }
.kpi-value { font-size: 2rem; font-weight: 700; color: #1a1a2e; }
.kpi-highlight .kpi-value { color: #e05c2f; }
.kpi-label { font-size: .75rem; color: #888; margin-top: 4px; }

/* ── Chart ─────────────────────────────────────────── */
.app-chart { background: #fff; border: 1px solid #dde; border-radius: 8px; padding: 16px; }

/* ── Table ─────────────────────────────────────────── */
.app-table { background: #fff; border: 1px solid #dde; border-radius: 8px; padding: 16px; }
.app-table h2 { margin-bottom: 12px; font-size: 1rem; }
.table-wrap { overflow-x: auto; }
table.data-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.data-table th, table.data-table td {
  border: 1px solid #eef; padding: 6px 10px; text-align: right;
}
table.data-table th { background: #f4f5f7; font-weight: 600; }
table.data-table td:first-child, table.data-table th:first-child { text-align: left; }
table.data-table tr:hover td { background: #f9f9ff; }
.loading-msg { color: #888; font-size: .9rem; }

/* ── Paywall banner ────────────────────────────────── */
.paywall-banner {
  margin-top: 12px; background: #fff8f0; border: 1px solid #e05c2f;
  border-radius: 6px; padding: 12px; font-size: .88rem; color: #555;
}
.paywall-banner a { color: #e05c2f; font-weight: 600; }

/* ── Footer ────────────────────────────────────────── */
.site-footer { text-align: center; padding: 24px; font-size: .8rem; color: #888; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 720px) {
  .app-kpi { grid-template-columns: 1fr; }
}