:root {
  --primary: #1a73e8;
  --primary-dark: #0d5bba;
  --text: #202124;
  --muted: #5f6368;
  --border: #e0e0e0;
  --bg: #f7f8fa;
  --success: #188038;
  --error: #c5221f;
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header { background:#fff; border-bottom:1px solid var(--border); position: sticky; top:0; z-index: 10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; flex-wrap: wrap; gap:8px; }
.logo { font-weight:700; font-size:1.2rem; color: var(--text); }
.main-nav { display:flex; gap:14px; align-items:center; flex-wrap: wrap; }
.btn-cta { background: var(--primary); color:#fff; padding:8px 14px; border-radius: var(--radius); }

.hero { text-align:center; padding: 48px 0 24px; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 8px; }
.search-form { display:flex; gap:8px; flex-wrap: wrap; justify-content:center; margin-top:20px; }
.search-form input { padding:12px; border:1px solid var(--border); border-radius: var(--radius); flex:1; min-width:160px; }
.search-form button { padding:12px 18px; border:none; border-radius: var(--radius); background: var(--primary); color:#fff; cursor:pointer; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top:16px; }
.category-card, .business-card, .dashboard-card, .stat-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:16px; }
.category-card { text-align:center; }
.business-card img { border-radius: var(--radius) var(--radius) 0 0; margin: -16px -16px 12px; width: calc(100% + 32px); height:140px; object-fit:cover; }
.rating { color: var(--muted); font-size:.9rem; }
.badge { background:#e6f4ea; color: var(--success); padding:2px 8px; border-radius: 20px; font-size:.75rem; margin-left:6px; }
.distance { display:block; font-size:.8rem; color: var(--muted); }

.search-layout { display:grid; grid-template-columns: 240px 1fr; gap:24px; margin-top:20px; }
.filters { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:16px; align-self:start; }
.filters label { display:block; margin-bottom:12px; font-size:.9rem; }
.filters select, .filters input[type=text] { width:100%; padding:6px; border:1px solid var(--border); border-radius:6px; }
@media (max-width: 760px) { .search-layout { grid-template-columns: 1fr; } }

.business-header .cover { width:100%; height:220px; object-fit:cover; border-radius: var(--radius); }
.business-header .logo { width:72px; height:72px; border-radius:50%; object-fit:cover; margin-top:-40px; border:3px solid #fff; }
.status.open { color: var(--success); font-weight:600; }
.status.closed { color: var(--error); font-weight:600; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.btn { background: var(--primary); color:#fff; border:none; padding:8px 14px; border-radius: var(--radius); cursor:pointer; text-decoration:none; display:inline-block; }
.btn-link { background:none; border:none; color: var(--primary); cursor:pointer; padding:0; }

.review { border-bottom:1px solid var(--border); padding:14px 0; }
.business-reply { background:#f1f3f4; padding:10px; border-radius:8px; margin-top:8px; }

form label { display:block; margin: 12px 0 4px; font-weight:600; font-size:.9rem; }
form input, form select, form textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:1rem; }
form button[type=submit] { margin-top:16px; background: var(--primary); color:#fff; border:none; padding:12px 20px; border-radius: var(--radius); cursor:pointer; font-size:1rem; }
.auth-form, .review-form, .cms-page { max-width:520px; margin: 20px auto; background:#fff; padding:24px; border-radius: var(--radius); border:1px solid var(--border); }
.error { color: var(--error); background:#fce8e6; padding:10px; border-radius:8px; }
.success { color: var(--success); background:#e6f4ea; padding:10px; border-radius:8px; }

.admin-layout { display:grid; grid-template-columns: 200px 1fr; gap:24px; margin-top:20px; }
.admin-sidebar { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:16px; align-self:start; }
.admin-sidebar a { padding:6px 0; }
@media (max-width: 760px) { .admin-layout { grid-template-columns: 1fr; } }

.stats-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.stat-card { text-align:center; }
.stat-card .value { display:block; font-size:1.8rem; font-weight:700; color: var(--primary); }
.stat-card .label { color: var(--muted); font-size:.85rem; }

table { width:100%; border-collapse: collapse; background:#fff; margin-top:12px; }
table th, table td { border:1px solid var(--border); padding:8px; text-align:left; font-size:.9rem; }
.inline-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.inline-form input { padding:8px; border:1px solid var(--border); border-radius:6px; }
.filter-tabs { margin: 10px 0; }

.site-footer { background:#fff; border-top:1px solid var(--border); margin-top:40px; padding:24px 0; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-links { display:flex; flex-direction:column; gap:4px; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background:#121212; color:#e8eaed; }
  .site-header, .site-footer, .business-card, .category-card, .dashboard-card, .stat-card, .filters, .auth-form, .cms-page, table, .admin-sidebar { background:#1e1e1e; border-color:#333; }
  table th, table td { border-color:#333; }
  form input, form select, form textarea { background:#2a2a2a; color:#e8eaed; border-color:#333; }
}