/* =========================================================
   TOKENS (fallbacks)
   ========================================================= */
:root{
  --text:#e6edf3;
  --muted:#9fb0c0;
  --link:#7aa2ff;
  --accent:#3da9fc;
  --accent-2:#a9c1ff;
  --border:#1f2937;
  --panel:#161b22;
  --card:#101828;
  --thead:#0f172a;
}

/* =========================================================
   DIRECTORY (existing) — UPDATED
   ========================================================= */
.dir-section{ margin:2rem auto; padding:0 20px; max-width:1400px; }
.dir-title{ font-size:1.5rem; margin:0 0 1rem; }

/* Grid */
.dir-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1024px){ .dir-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .dir-grid{ grid-template-columns:1fr; } }

/* Card */
.dir-card{
  background:#101828;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  padding:10px 15px 15px;
  transition:box-shadow .18s ease;
}
.dir-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.25); }

/* Card head */
.dir-card-head{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--accent); color:#fff; padding:10px 14px;
}
.dir-card-name{ font-weight:600; font-size:1rem; color:#fff; text-decoration:none; }
.dir-card-name:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.dir-card-count{
  background:rgba(0,0,0,.25); padding:2px 8px; border-radius:9999px;
  font-size:.85rem; font-weight:600; color:#fff;
}

/* Subcategories */
.dir-sublist{
  list-style:none; padding:0; margin:10px 0;
  overflow:hidden; transition:max-height 260ms ease; will-change:max-height;
}
.dir-sublist li{
  display:flex; justify-content:space-between; gap:10px;
  padding:6px 2px; border-bottom:1px solid #2a2f3a;
}
.dir-sublist li:last-child{ border-bottom:none; }
.dir-sub{ color:#cbd5e1; text-decoration:none; font-size:.95rem; line-height:1.4; flex:1; }
.dir-sub:hover{ color:#fff; }
.dir-sub:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.count{ color:#94a3b8; font-size:.9rem; white-space:nowrap; }

/* Collapse behavior */
.dir-sublist.is-collapsed li:nth-child(n+6){ display:none; }

/* Footer */
.dir-card-foot{ margin-top:12px; padding-top:6px; }
.view-all,.view-all-btn{
  color:var(--accent); font-size:.9rem; background:transparent; border:0; padding:0; cursor:pointer;
}
.view-all:hover,.view-all-btn:hover{ text-decoration:underline; }
.view-all:focus-visible,.view-all-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* =========================================================
   HOME: HERO (Parallax & YouTube)
   ========================================================= */
.hero-parallax{
  position:relative; min-height:70vh;
  background-size:cover; background-position:center; background-attachment:fixed;
}
@media (max-width:767px){ .hero-parallax{ background-attachment:scroll; } }

.hero{
  position:relative; min-height:60vh; display:grid; place-items:center;
  background-image:var(--hero, none); background-position:center; background-size:cover; background-repeat:no-repeat;
  background-color:var(--hero-color, transparent);
}
.hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) brightness(.9); }
.hero__inner{ position:relative; text-align:center; padding:2rem; max-width:1100px; width:100%; color:#fff; }
.hero__title{ margin:0 0 .5rem; font-size:clamp(2rem,4vw + 1rem,3rem); line-height:1.1; }
.hero__sub{ margin:0 auto 1.5rem; max-width:800px; opacity:.9; font-size:clamp(1rem,1.2vw + .8rem,1.25rem); }

/* Search form */
.hero__search{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.6rem;
  background:rgba(16,24,40,.85); padding:.75rem; border-radius:.75rem; backdrop-filter:blur(4px);
}
.hero__search>*{ min-width:0; }
.hero__search input,.hero__search select{
  padding:.6rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:#0f172a; color:#e6e8ee;
}
.hero__search input:focus,.hero__search select:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.hero__search button{
  padding:.6rem 1rem; border-radius:.5rem; border:0; background:#1ea7fd; color:#081018; font-weight:600; cursor:pointer;
}
@media (max-width:800px){ .hero__search{ grid-template-columns:1fr; } }

.section-pad{ padding:2rem 1rem; }

/* YouTube bg */
.hero--video #hero-video-bg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero--video #hero-video-bg iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:177.78vh; height:100vh; min-width:100%; min-height:100%;
}
@media (prefers-reduced-motion: reduce){
  .hero--video #hero-video-bg{ display:none; }
  .hero--video{ background:#000; }
}
.hero--lower{ min-height:40vh; margin-top:2rem; }

/* =========================================================
   HOME: Sections
   ========================================================= */
.home-section{ margin:2.5rem auto; padding:0 20px; max-width:1400px; }
.home-title{ font-size:clamp(1.25rem,2vw,1.75rem); margin:0 0 1rem; }

/* Back to top */
#backToTop{
  position:fixed; right:1rem; bottom:1.2rem; width:44px; height:44px; border-radius:50%;
  border:0; background:#1ea7fd; color:#081018; font-size:1.25rem; font-weight:700; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.25s ease;
}
#backToTop.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* =========================================================
   ADMIN: Hide public header/hamburger
   ========================================================= */
.admin-layout .site-header,
.admin-layout .mobile-nav,
.admin-layout .header-spacer{ display:none !important; }
.admin-layout .admin-wrap{ padding-top:16px; }

/* =========================================================
   HEADER: Force white link color
   ========================================================= */
.site-header a, .site-header a:visited{ color:#fff; }
.site-header a:hover{ opacity:.9; }

/* =========================================================
   HOME: Hero Tabs (Explore pills)
   ========================================================= */
.hero-tabs{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 1rem;
}
.hero-tabs .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9999px;
  background:rgba(0,0,0,.4); color:#fff; text-decoration:none; font-weight:600; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .12s, background .12s, opacity .12s;
}
.hero-tabs .pill:hover{ transform:translateY(-1px); opacity:1; }
.hero-tabs .pill.is-active{ background:var(--accent); color:#081018; border-color:transparent; }

/* Explore grid cards */
.picker-wrap{ max-width:1100px; margin:2rem auto; padding:0 20px; text-align:center; }
.picker-title{ font-size:2rem; margin:.25rem 0; }
.picker-sub{ color:var(--muted); margin:0 0 1.25rem; }
.type-grid{ display:grid; gap:1rem; margin-top:1.25rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.type-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.5rem 1rem; border:1px solid var(--border); border-radius:14px;
  text-decoration:none; background:rgba(255,255,255,.02);
  transition:.18s transform,.18s box-shadow,.18s border-color,.18s background;
  color:var(--text);
}
.type-card .type-icon svg{ display:block; }
.type-label{ margin-top:.6rem; font-weight:600; }
.type-card:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.type-card.is-purple .type-icon svg{ fill:#7c5cff; }
.type-card.is-pink   .type-icon svg{ fill:#ff6fb1; }
.type-card.is-green  .type-icon svg{ fill:#34d399; }
.type-card.is-orange .type-icon svg{ fill:#f59e0b; }
.type-card.is-red    .type-icon svg{ fill:#ef4444; }
.type-card.is-blue   .type-icon svg{ fill:#3b82f6; }
.type-card:is(:hover,:focus){ border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.04); }
@media (max-width:480px){ .picker-title{ font-size:1.6rem; } }

/* =========================================================
   AUTH (Register / Login)
   ========================================================= */
.register-page .auth-card,
.login-page .auth-card{
  width:100%; max-width:560px; margin:3rem auto; padding:28px; border-radius:14px;
  background:rgba(22,27,34,.78);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}
.register-page .auth-title,.login-page .auth-title{
  margin:0 0 1rem; font-size:1.6rem; line-height:1.2; color:var(--text); font-weight:700; letter-spacing:.2px;
}

/* Forms */
.register-form,.login-form{ display:flex; flex-direction:column; gap:14px; }
.register-form .input-group,.login-form .input-group{ width:100%; }
.register-form .input-group label,.login-form .input-group label{
  display:block; margin-bottom:6px; font-size:.88rem; color:var(--muted); font-weight:600; width:100%;
}

/* Inputs */
.register-form .input-group input,
.login-form .input-group input{
  display:block; width:100%; max-width:100%; box-sizing:border-box;
  padding:12px 14px; border-radius:10px; background:#0e1117;
  border:1px solid #273043; color:var(--text);
  outline:none; transition:border-color .15s, box-shadow .15s, transform .02s;
}
.register-form .input-group input::placeholder,
.login-form .input-group input::placeholder{ color:#7a8a9a; }
.register-form .input-group input:hover,
.login-form .input-group input:hover{ border-color:#33425a; }
.register-form .input-group input:focus,
.login-form .input-group input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,169,252,.22); }

/* Buttons */
.auth-actions .btn-primary,
.register-form button[type="submit"],
.login-form button[type="submit"]{
  display:block; width:100%; max-width:100%;
  padding:12px 16px; border-radius:10px; border:0;
  background:var(--accent); color:#051018; font-weight:700; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 6px 16px rgba(61,169,252,.25);
  transition:transform .06s, box-shadow .15s, filter .15s;
}
.auth-actions .btn-primary:hover,
.register-form button[type="submit"]:hover,
.login-form button[type="submit"]:hover{
  transform:translateY(-1px); box-shadow:0 10px 22px rgba(61,169,252,.28); filter:brightness(1.04);
}
.auth-actions .btn-primary:active,
.register-form button[type="submit"]:active,
.login-form button[type="submit"]:active{ transform:translateY(0); }

.auth-meta{ margin-top:.75rem; text-align:center; font-size:.9rem; color:var(--muted); }
.auth-meta a{ color:var(--link); text-decoration:none; }
.auth-meta a:hover{ text-decoration:underline; }

@media (max-width:991px){
  .register-page .auth-card,.login-page .auth-card{
    background:var(--panel); backdrop-filter:none; margin:1.25rem auto; padding:20px;
  }
}

/* Force full-width fields on register page (fallback-safe) */
.register-page input[type="text"],
.register-page input[type="email"],
.register-page input[type="password"],
.register-page input[type="tel"],
.register-page input[type="url"],
.register-page input[type="number"],
.register-page select,
.register-page textarea,
.register-page .auth-card input,
.register-page .auth-card select,
.register-page .auth-card textarea,
.register-page .auth-card button[type="submit"]{
  display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important;
}
/* Kill accidental grids */
.register-page .row,.register-page .form-row,.register-page .grid,.register-page [class*="col-"]{
  display:block !important; width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important;
}
.register-page form>*+*{ margin-top:12px; }

/* =========================================================
   FLASH / ALERT MESSAGES
   ========================================================= */
.flash-messages{ margin:1rem auto; padding:0 16px; max-width:1200px; }

.alert{
  padding:12px 16px; margin:6px 0; border-radius:8px; font-size:.95rem; font-weight:500; border:1px solid transparent;
  animation:fadeIn .4s ease;
}
.alert.success{ background:rgba(46,204,113,.12); border-color:rgba(46,204,113,.35); color:#2ecc71; }
.alert.error  { background:rgba(231,76,60,.12);  border-color:rgba(231,76,60,.35);  color:#e74c3c; }
.alert.info   { background:rgba(52,152,219,.12); border-color:rgba(52,152,219,.35); color:#3498db; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

/* =========================================================
   CREATE LISTING (public)
   ========================================================= */
.listing-create{
  --bg:#0f1320;
  --panel:#171c2b;
  --muted:#9fb0c0;
  --text:#e6edf3;
  --border:#22304a;
  --accent:#7aa2ff;
  --accent-2:#a9c1ff;
  --danger:#ff5577;
  color:var(--text);
}

/* Layout under hero */
.listing-create .container,
.listing-create .content{ margin:1.25rem auto 2.5rem; padding:0 20px; max-width:1200px; }

.listing-create h1{ font-size:clamp(22px,2.4vw,30px); margin:0 0 12px; letter-spacing:.2px; }

/* Pills */
.listing-create .pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px; }
.listing-create .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:18px; background:#111626; color:var(--text);
  border:1px solid #2a3550; cursor:pointer; font-size:14px; line-height:1;
  transition:background .15s, border-color .15s, transform .05s;
}
.listing-create .pill:is(:hover,:focus){ background:#141b2d; border-color:#3a4c73; }
.listing-create .pill.active{ background:var(--accent); border-color:var(--accent); color:#0b1020; }

/* Card */
.listing-create .panel{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}

/* Form grid */
.listing-create form.listing-form{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px 14px;
}
@media (max-width:980px){ .listing-create form.listing-form{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .listing-create form.listing-form{ grid-template-columns:1fr; } }

.listing-create .field{ display:flex; flex-direction:column; gap:6px; }
.listing-create label{ font-size:13px; color:var(--muted); }

.listing-create input[type="text"],
.listing-create input[type="number"],
.listing-create input[type="url"],
.listing-create select,
.listing-create textarea{
  width:100%; background:#0f1526; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.listing-create textarea{ min-height:120px; resize:vertical; }
.listing-create input:is(:focus),
.listing-create select:is(:focus),
.listing-create textarea:is(:focus){ border-color:var(--accent); box-shadow:0 0 0 3px rgba(122,162,255,.15); }

/* Inline row (Type + Title) */
.listing-create .row-2{ display:grid; grid-template-columns:180px 1fr; gap:14px; }
@media (max-width:620px){ .listing-create .row-2{ grid-template-columns:1fr; } }

/* File input */
.listing-create .file{ position:relative; overflow:hidden; }
.listing-create input[type="file"]{ padding:9px 12px; background:#0f1526; border:1px dashed #2e3a58; border-radius:10px; }
.listing-create .hint{ font-size:12px; color:#7e93b3; }

/* Photo previews */
.listing-create .previews{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; margin-top:6px; }
.listing-create .thumb{
  position:relative; background:#0c1120; border:1px solid #21304a; border-radius:8px; overflow:hidden;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.listing-create .thumb img{ width:100%; height:100%; object-fit:cover; }

/* Actions */
.listing-create .actions{ display:flex; gap:12px; justify-content:flex-end; align-items:center; margin-top:10px; }
.listing-create .btn{
  appearance:none; border:none; cursor:pointer; font-weight:600; border-radius:10px; padding:12px 16px;
  background:var(--accent); color:#0b1020; transition:transform .03s, box-shadow .15s, background .15s;
}
.listing-create .btn:hover{ box-shadow:0 6px 18px rgba(122,162,255,.25); }
.listing-create .btn:active{ transform:translateY(1px); }
.listing-create .btn.secondary{ background:#121a2e; color:var(--text); border:1px solid var(--border); }
.listing-create .required::after{ content:" *"; color:#ff5577; }

/* Notices (local) */
.notice{ border-radius:10px; padding:10px 12px; font-size:14px; }
.notice.success{ background:#14311e; border:1px solid #265c37; color:#c7f2d4; }
.notice.error{ background:#3a1620; border:1px solid #7a2e42; color:#ffd7df; }

/* Controls sizing/width helpers */
.listing-create select{ height:42px; }
.listing-create .wide-row{ grid-column:1 / -1; }

/* ====== Layout constraints ====== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  max-width: 1200px;
  margin: 0 auto;
}

/* ====== Table ====== */
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .92rem;
  color: var(--text);
  table-layout: fixed;
}

table.table thead th {
  position: sticky;
  top: 0;
  background: var(--thead);
  color: var(--text);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ====== Column widths ====== */
table.table th:first-child,
table.table td:first-child { width: 50px; text-align: center; } /* ID */
.photo { width: 70px; text-align: center; }
.actions-col, .actions { width: 150px; text-align: right; white-space: nowrap; }
table.table td:nth-child(3) { max-width: 220px; } /* Title */
table.table td:nth-child(6) { max-width: 220px; } /* Meta */
table.table td:nth-child(7) { max-width: 200px; } /* Owner */

/* ====== Mobile cards ====== */
@media (max-width: 820px){
  .table-wrap { border:none; background:transparent; max-width:100%; }
  table.table thead { display:none; }
  table.table, table.table tbody, table.table tr, table.table td {
    display:block; width:100%;
  }
  table.table tr {
    margin:0 0 12px; padding:12px;
    border:1px solid var(--border);
    border-radius:10px; background:var(--panel);
  }
  table.table td { border:none; padding:6px 0; background:transparent; white-space:normal; }
  .actions { margin-top:8px; }
}

/* =========================================================
   PROFILE (read-only + edit)
   ========================================================= */

/* Pills row that can sit under the main header (optional) */
.subnav{
  position: sticky;
  top: 56px;
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 12px;
  background: #0f172a;
  border-bottom: 1px solid #1f2937;
}
.subnav .pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#111827; color:#e5e7eb; text-decoration:none; font-weight:600;
  border:1px solid #374151;
}
.subnav .pill.is-active{ background:#2563eb; border-color:#2563eb; color:white; }
@media (max-width:480px){ .subnav{ top: 48px; } }

/* Cards / base elements */
.profile .profile-card{
  background:#fff; color:#111; border-radius:12px; padding:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.profile .muted{ color:#6b7280; }
.profile .btn{ display:inline-block; padding:.5rem .75rem; border-radius:8px; background:#111; color:#fff; text-decoration:none; border:0; cursor:pointer; }
.profile .btn.light{ background:#f5f5f5; color:#111; }

/* Read-only banner */
.profile-banner{ margin-bottom:12px; }
.profile-cover{ width:100%; height:220px; object-fit:cover; border-radius:12px; display:block; }
.profile-banner-bar{
  display:flex; gap:14px; align-items:center;
  margin-top:-54px; padding:12px;
  background:rgba(255,255,255,.9);
  border-radius:12px; backdrop-filter:saturate(120%) blur(4px);
}
.profile-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid #fff; background:#f3f3f3; }
.profile-avatar.lg{ width:120px; height:120px; }
.profile-name{ margin:0; font-weight:800;  color: #000 !important;}
.profile-username,.profile-location{ margin:2px 0 0; color: #a49f9f !important; }

/* Read-only sections grid */
.profile-sections{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media (max-width:900px){ .profile-sections{ grid-template-columns:1fr; } }

/* About fields */
.field-label{ font-weight:600; color:#374151; margin-bottom:4px; }
.field-value{ color:#111; }

/* Links list */
.links-list a{ display:block; margin-bottom:8px; word-break:break-all; }

/* Edit header (no cover) */
.profile-edit-header{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.profile-edit-title h1{ margin:0; }

/* Edit form basics */
.profile .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.profile label{ display:block; color:#111; }
.profile input[type="text"],
.profile input[type="url"],
.profile textarea,
.profile select{ width:100%; background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; }
.profile textarea{ min-height:120px; }
.profile .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* Errors */
.errors{ background:#fff3f3; border:1px solid #ffd7d7; padding:10px; border-radius:8px; margin:8px 0; }

/* Helpers */
.mt-12{ margin-top:12px; }

/* Chips (utility) */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f3f4f6; color:#111827; font-size:.9rem; }
.chip.link { text-decoration:none; border:1px solid #e5e7eb; background:#fff; }
/* Members grid */
.people {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  text-decoration: none;
  color: inherit;
}

.user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
}

.user-name {
  display: block;
  font-weight: 700;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-handle {
  color: #6b7280; /* slate-500 */
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badges {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.badge-business {
  background: #0ea5e9;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .8rem;
}

.btn.tiny.view-business {
  padding: 4px 8px;
  font-size: .8rem;
  border-radius: 8px;
  background: #111;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 640px) {
  .people { grid-template-columns: 1fr; }
  .user-avatar { width: 48px; height: 48px; }
}

/* Directory */
.searchbar { display:flex; gap:8px; margin:8px 0 12px; }
.searchbar input[type="text"] { flex:1 1 auto; }

.biz-grid { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.biz-card { display:block; border-radius:12px; overflow:hidden; background:#fff; border:1px solid #eee; text-decoration:none; color:inherit; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.biz-card-cover { width:100%; height:120px; object-fit:cover; display:block; }
.biz-card-body { display:flex; gap:12px; align-items:center; padding:10px; }
.biz-card-logo { width:48px; height:48px; border-radius:12px; object-fit:cover; background:#f3f3f3; }
.biz-card-name { font-weight:700; color:#111; }
.biz-card-location { color:#6b7280; font-size:12px; }

.pager { display:flex; gap:8px; align-items:center; justify-content:center; margin:14px 0; }
.mt-8 { margin-top:8px; }

.callout.info { background:#eef6ff; border:1px solid #cde4ff; border-radius:10px; padding:12px; margin-bottom:12px; }
.callout .inline { display:inline; }

.filters { display:flex; gap:8px; margin:0 0 12px; }
.filters select { min-width:220px; }

.biz-card { background:#101826; border:1px solid #1f2937; border-radius:12px; padding:12px; margin-bottom:12px; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.biz-edit-logo { width:84px; height:84px; border-radius:16px; object-fit:cover; background:#0e1522; }
.biz-edit-cover { width:100%; height:140px; object-fit:cover; border-radius:12px; border:1px solid #1f2937; background:#0e1522; }
.mt-8{ margin-top:8px; }