*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f4f5f7;
  color: #1a1a2e;
  font-size: 14px;
  line-height: 1.5;
}

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ── Top bar ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e2e4e9;
  flex-wrap: wrap;
  gap: 12px;
}

.top-bar h1 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a2e;
}

.subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

.top-bar-right { display: flex; align-items: center; gap: 10px; }

#search-box {
  padding: 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  width: 220px;
  outline: none;
  background: #f9fafb;
}
#search-box:focus { border-color: #2563eb; background: #fff; }

/* ── Filter row ── */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e2e4e9;
  flex-wrap: wrap;
}

.filter-label { font-size: 12px; color: #9ca3af; }

.filter-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: #9ca3af; color: #374151; }
.filter-btn.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.urgent-btn { border-color: #fca5a5; color: #b91c1c; }
.urgent-btn.active { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* ── Grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  padding: 1.5rem;
}

/* ── Brand card ── */
.brand-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e4e9;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  border-left: 4px solid #e2e4e9;
}
.brand-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.brand-card.alert-ok  { border-left-color: #16a34a; }
.brand-card.alert-med { border-left-color: #d97706; }
.brand-card.alert-high { border-left-color: #dc2626; }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.brand-name { font-size: 14px; font-weight: 600; color: #1a1a2e; }
.brand-type { font-size: 11px; color: #9ca3af; margin-top: 2px; }

.score-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.score-ok   { background: #dcfce7; color: #15803d; }
.score-med  { background: #fef3c7; color: #b45309; }
.score-high { background: #fee2e2; color: #b91c1c; }

/* ── Mini channel list on card ── */
.mini-channels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.mini-channel {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-label {
  font-size: 11px;
  color: #6b7280;
  width: 80px;
  flex-shrink: 0;
}
.mini-age {
  font-size: 11px;
  color: #9ca3af;
  margin-left: auto;
}

.card-divider {
  border: none;
  border-top: 1px solid #f0f1f4;
  margin: 8px 0;
}

/* ── GMB row on card ── */
.gmb-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }
.gmb-rating { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.gmb-sep { color: #d1d5db; font-size: 11px; }
.gmb-reviews { font-size: 11px; color: #6b7280; }
.gmb-last { font-size: 11px; color: #9ca3af; }

/* ── Channel dots ── */
.ch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.dot-ok    { background: #16a34a; }
.dot-warn  { background: #d97706; }
.dot-stale { background: #dc2626; }
.dot-na    { background: #d1d5db; }

/* ── Detail view ── */
.detail-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-header h2 { font-size: 22px; font-weight: 700; color: #1a1a2e; }
.detail-type { font-size: 13px; color: #9ca3af; margin-top: 3px; }

.detail-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-link {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}
.site-link:hover { background: #f9fafb; text-decoration: none; }

.detail-sections { display: flex; flex-direction: column; gap: 14px; }

.detail-card {
  background: #fff;
  border: 1px solid #e2e4e9;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.detail-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title-link {
  font-size: 12px;
  font-weight: 400;
  color: #2563eb;
}

/* ── Channel rows in detail ── */
.ch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f1f4;
  flex-wrap: wrap;
}
.ch-row:last-of-type { border-bottom: none; }

.ch-name {
  font-size: 13px;
  color: #6b7280;
  width: 130px;
  flex-shrink: 0;
}
.ch-age {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.age-ok    { color: #15803d; }
.age-warn  { color: #b45309; }
.age-stale { color: #b91c1c; }
.age-na    { color: #9ca3af; }

.ch-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.pill-ok    { background: #dcfce7; color: #15803d; }
.pill-warn  { background: #fef3c7; color: #b45309; }
.pill-stale { background: #fee2e2; color: #b91c1c; }
.pill-na    { background: #f3f4f6; color: #9ca3af; }

.row-link {
  font-size: 12px;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ── Detail rows (label/value) ── */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #f0f1f4;
  gap: 12px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: 13px; color: #6b7280; flex-shrink: 0; }
.detail-val { font-size: 13px; font-weight: 500; color: #1a1a2e; text-align: right; }

.gmb-post-preview {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  padding: 4px 0 8px 22px;
  border-bottom: 1px solid #f0f1f4;
  margin-bottom: 2px;
}
.review-snippet { font-weight: 400; color: #6b7280; }

/* ── Back button ── */
.back-btn {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.back-btn:hover { background: #f9fafb; }

.refresh-btn {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.refresh-btn:hover { background: #f9fafb; }
.refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.last-synced {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

.fetch-error {
  font-size: 12px;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; padding: 1rem; }
  .detail-wrap { padding: 1rem; }
  .ch-name { width: 100px; }
  .row-link { max-width: 140px; }
}