/* ============================================================
   directory.css — Global shared styles for Directory
   Premium redesign: refined dark-teal aesthetic
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

   /* ===== RESET & TOKENS ===== */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
     /* Brand */
     --brand:        #1a6b4a;
     --brand-mid:    #2a8f64;
     --brand-light:  #e4f4ed;
     --brand-xlight: #f0faf6;
     --brand-glow:   rgba(42,143,100,.15);
   
     /* Accent */
     --accent:       #f5a623;
     --accent-light: #fff8ec;
   
     /* State */
     --danger:       #e53e3e;
     --danger-light: #fff5f5;
   
     /* Ink */
     --ink:          #111827;
     --ink-mid:      #374151;
     --ink-light:    #6b7280;
   
     /* Surfaces */
     --border:       #e5e9f0;
     --border-mid:   #d1d9e0;
     --surface:      #ffffff;
     --surface-2:    #f8fafc;
     --surface-3:    #f1f5f9;
   
     /* Radii */
     --radius-sm:    6px;
     --radius:       12px;
     --radius-lg:    18px;
     --radius-xl:    24px;
   
     /* Shadows */
     --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
     --shadow-sm:    0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
     --shadow:       0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
     --shadow-lg:    0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
     --shadow-xl:    0 32px 80px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
   
     /* Motion */
     --ease:         cubic-bezier(.4,0,.2,1);
     --transition:   .18s cubic-bezier(.4,0,.2,1);
   
     /* Typography */
     --font:         'DM Sans', sans-serif;
     --font-display: 'DM Serif Display', serif;
   
     /* Layout */
     --sidebar-w:    248px;
   }
   
   html { scroll-behavior: smooth; }
   body {
     font-family: var(--font);
     color: var(--ink);
     background: var(--surface-2);
     min-height: 100vh;
     line-height: 1.6;
     font-size: 14px;
     -webkit-font-smoothing: antialiased;
   }
   
   /* ===== LAYOUT ===== */
   .app { display: flex; min-height: 100vh; }
   .main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; }
   .app--public { flex-direction: column; }
   .app--public .main { margin-left: 0; min-height: auto; flex: 1; }
   
   .app--admin { flex-direction: column; min-height: 100vh; }
   .app--admin > .topbar { width: 100%; flex-shrink: 0; position: sticky; top: 0; z-index: 100; }
   .admin-body { display: flex; flex: 1; align-items: stretch; min-height: 0; }
   .app--admin .admin-body .sidebar { position: relative; top: auto; left: auto; bottom: auto; flex-shrink: 0; min-height: calc(100vh - 60px); }
   .app--admin .admin-body .main { margin-left: 0; flex: 1; min-width: 0; min-height: calc(100vh - 60px); display: flex; flex-direction: column; }
   .page-content { padding: 28px; flex: 1; }
   
   /* ===== SIDEBAR ===== */
   .sidebar {
     width: var(--sidebar-w);
     background: var(--surface);
     border-right: 1px solid var(--border);
     display: flex; flex-direction: column;
     position: fixed; top: 0; left: 0; bottom: 0;
     z-index: 100;
   }
   .app--public .sidebar { display: none; }
   .sidebar-logo { padding: 22px 20px 16px; border-bottom: 1px solid var(--border); }
   .logo-mark { display: flex; align-items: center; gap: 10px; }
   .logo-icon {
     width: 34px; height: 34px;
     background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
     border-radius: 9px; display: flex; align-items: center; justify-content: center;
     font-size: 16px; color: #fff; box-shadow: 0 3px 10px rgba(26,107,74,.25);
     text-decoration: none;
   }
   .logo-text { font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -.3px; text-decoration: none; }
   .logo-text span { color: var(--brand); }
   
   .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
   .df-nav-section-label {
     font-size: 10px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 1px; color: var(--ink-light);
     padding: 10px 10px 6px;
   }
   .df-nav-item {
     display: flex; align-items: center; gap: 10px;
     padding: 9px 12px; border-radius: var(--radius-sm);
     cursor: pointer; font-size: 13.5px; font-weight: 500;
     color: var(--ink-mid); transition: all var(--transition);
     margin-bottom: 2px; text-decoration: none;
   }
   .df-nav-item:hover { background: var(--brand-xlight); color: var(--brand); }
   .df-nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
   .df-nav-item .df-nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
   .df-nav-item .df-nav-badge { margin-left: auto; background: var(--brand); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 20px; font-weight: 700; }
   .sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-light); }
   .sidebar--nav-only .sidebar-nav { padding-top: 12px; }
   
   /* ===== TOPBAR ===== */
   .topbar {
     background: var(--surface); border-bottom: 1px solid var(--border);
     padding: 0 28px; height: 60px;
     display: flex; align-items: center; justify-content: space-between;
     position: sticky; top: 0; z-index: 90;
   }
   .topbar-left { display: flex; align-items: center; gap: 14px; }
   
   /* ===== BUTTONS ===== */
   .df-btn {
     display: inline-flex; align-items: center; gap: 7px;
     padding: 9px 18px; border-radius: var(--radius-sm);
     font-family: var(--font); font-size: 13.5px; font-weight: 600;
     cursor: pointer; border: 1.5px solid transparent;
     transition: all var(--transition); text-decoration: none; white-space: nowrap;
     letter-spacing: -.1px;
   }
   .df-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 2px 8px rgba(26,107,74,.22); }
   .df-btn-primary:hover { background: #145c3e; border-color: #145c3e; box-shadow: 0 4px 14px rgba(26,107,74,.32); transform: translateY(-1px); }
   .df-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-mid); }
   .df-btn-secondary:hover { border-color: var(--brand-mid); color: var(--brand); background: var(--brand-xlight); }
   .df-btn-ghost { background: transparent; color: var(--ink-mid); border-color: transparent; }
   .df-btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
   .df-btn-danger { background: var(--danger-light); color: var(--danger); border-color: rgba(229,62,62,.2); }
   .df-btn-danger:hover { background: var(--danger); color: #fff; }
   .df-btn-sm { padding: 6px 13px; font-size: 12.5px; }
   .df-btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--radius); }
   .df-btn-icon { padding: 8px; aspect-ratio: 1; justify-content: center; }
   
   /* ===== CARD ===== */
   .df-card {
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
     overflow: hidden;
   }
   .df-card-header {
     padding: 18px 22px; border-bottom: 1px solid var(--border);
     display: flex; align-items: center; justify-content: space-between; gap: 12px;
     background: var(--surface-2);
   }
   .df-card-title { font-weight: 700; font-size: 14px; color: var(--ink); }
   .df-card-body { padding: 22px; }
   
   /* ===== FORMS ===== */
   .df-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
   .df-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
   .df-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
   .df-label { font-size: 12.5px; font-weight: 700; color: var(--ink-mid); letter-spacing: .1px; }
   .df-input, .df-select, .df-textarea {
     padding: 9px 13px; border: 1.5px solid var(--border-mid);
     border-radius: var(--radius-sm); font-family: var(--font); font-size: 13.5px;
     background: var(--surface); color: var(--ink); outline: none;
     transition: border-color var(--transition), box-shadow var(--transition);
     width: 100%;
   }
   .df-input:focus, .df-select:focus, .df-textarea:focus {
     border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(42,143,100,.1);
   }
   .df-textarea { resize: vertical; min-height: 100px; }
   .df-input-hint { font-size: 11.5px; color: var(--ink-light); margin-top: 3px; }
   .df-input-error { font-size: 11.5px; color: var(--danger); margin-top: 3px; }
   
   /* ===== TOGGLE ===== */
   .toggle { position: relative; width: 40px; height: 22px; }
   .toggle input { opacity: 0; width: 0; height: 0; }
   .toggle-slider { position: absolute; inset: 0; background: var(--border-mid); border-radius: 22px; cursor: pointer; transition: background var(--transition); }
   .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
   .toggle input:checked + .toggle-slider { background: var(--brand); }
   .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
   
   /* ===== CHIPS / BADGES ===== */
   .df-chip {
     display: inline-flex; align-items: center; gap: 4px;
     padding: 3px 9px; border-radius: 20px;
     font-size: 11.5px; font-weight: 600;
     background: var(--brand-light); color: var(--brand);
   }
   .df-chip-accent  { background: var(--accent-light); color: #a0660a; }
   .df-chip-neutral { background: var(--surface-3); color: var(--ink-mid); }
   .df-chip-map     { background: #eff6ff; color: #1e5fa3; }
   
   .badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
   .badge-green { background: #d4f4e4; color: #1a6b4a; }
   .badge-blue  { background: #dbeafe; color: #1e40af; }
   .badge-amber { background: #fef3c7; color: #92400e; }
   .badge-red   { background: #fee2e2; color: #991b1b; }
   
   /* ===== TABLE ===== */
   .data-table { width: 100%; border-collapse: collapse; }
   .data-table th { padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-light); border-bottom: 2px solid var(--border); background: var(--surface-2); }
   .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--ink); vertical-align: middle; }
   .data-table tr:last-child td { border-bottom: none; }
   .data-table tr:hover td { background: var(--brand-xlight); }
   .data-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
   .table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
   
   /* ===== DASHBOARD STATS ===== */
   .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
   .stat-card {
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 18px 20px;
     box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
   }
   .stat-card::before {
     content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, var(--brand), var(--brand-mid));
   }
   .stat-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-light); }
   .stat-value { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-top: 6px; }
   .stat-sub   { font-size: 12px; color: var(--ink-light); margin-top: 3px; }
   .stat-icon  { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 32px; opacity: .08; }
   @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
   
   .dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
   .dash-panels .df-card { min-width: 0; }
   @media (max-width: 1100px) { .dash-panels { grid-template-columns: 1fr; } }
   
   /* ===== PAGE HEADER ===== */
   .page-header { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
   .page-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.15; }
   .page-desc  { font-size: 14px; color: var(--ink-mid); margin-top: 5px; }
   .page-actions { display: flex; gap: 10px; flex-shrink: 0; }
   
   /* ===== DIRECTORY CARD (admin) ===== */
   .dir-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition); cursor: pointer; }
   .dir-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--brand-mid); }
   .dir-card-cover { height: 100px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%); display: flex; align-items: center; justify-content: center; font-size: 36px; }
   .dir-card-cover.green { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%); }
   .dir-card-cover.blue  { background: linear-gradient(135deg, #1a56db 0%, #3b82f6 100%); }
   .dir-card-cover.amber { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
   .dir-card-cover.rose  { background: linear-gradient(135deg, #be185d 0%, #ec4899 100%); }
   .dir-card-cover.slate { background: linear-gradient(135deg, #475569 0%, #94a3b8 100%); }
   .dir-card-cover.teal  { background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%); }
   .dir-card-body   { padding: 16px; }
   .dir-card-name   { font-weight: 700; font-size: 15px; color: var(--ink); }
   .dir-card-slug   { font-size: 11.5px; color: var(--ink-light); margin-top: 2px; }
   .dir-card-meta   { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
   .dir-card-actions{ padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); }
   
   /* ===== STARS ===== */
   .stars { color: var(--accent); font-size: 12px; letter-spacing: 1px; }
   
   /* ===== SEARCH BAR ===== */
   .df-search-bar { position: relative; }
   .df-search-bar input {
     width: 100%; padding: 9px 14px 9px 38px;
     border: 1.5px solid var(--border-mid); border-radius: var(--radius-sm);
     font-family: var(--font); font-size: 13.5px; background: var(--surface); outline: none;
     transition: border-color var(--transition), box-shadow var(--transition);
     color: var(--ink);
   }
   .df-search-bar input:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(42,143,100,.1); }
   .df-search-bar .df-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-light); font-size: 14px; }
   
   /* ===== MODAL ===== */
   .df-modal-overlay { position: fixed; inset: 0; background: rgba(15,20,35,.5); backdrop-filter: blur(4px); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
   .df-modal-overlay.open { opacity: 1; pointer-events: all; }
   .df-modal { background: var(--surface); border-radius: var(--radius-xl); width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); transform: scale(.96) translateY(10px); transition: transform var(--transition); }
   .df-modal-overlay.open .df-modal { transform: scale(1) translateY(0); }
   .df-modal-header { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 5; }
   .df-modal-title { font-weight: 800; font-size: 17px; color: var(--ink); }
   .df-modal-close { background: var(--surface-3); border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--ink-mid); transition: background var(--transition); }
   .df-modal-close:hover { background: #fee2e2; color: var(--danger); }
   .df-modal-body { padding: 22px 24px; }
   .df-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }
   
   /* ===== TABS ===== */
   .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 22px; }
   .tab-btn { padding: 10px 18px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--ink-light); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); }
   .tab-btn:hover { color: var(--brand); }
   .tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
   .tab-panel { display: none; }
   .tab-panel.active { display: block; }
   
   /* ===== ALERT ===== */
   .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
   .alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
   .alert-success { background: var(--brand-light); border: 1px solid #a7f3d0; color: var(--brand); }
   
   /* ===== EMPTY STATE ===== */
   .empty-state { text-align: center; padding: 60px 20px; }
   .empty-state-icon  { font-size: 48px; margin-bottom: 14px; }
   .empty-state-title { font-weight: 700; font-size: 18px; color: var(--ink); }
   .empty-state-text  { font-size: 14px; color: var(--ink-mid); margin-top: 6px; }
   
   /* ===== TOAST ===== */
   .df-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 3100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
   .df-toast-container .df-toast { pointer-events: auto; }
   .df-toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); animation: dfToastIn .25s var(--ease); min-width: 220px; }
   .df-toast.df-toast-success { background: var(--brand); }
   .df-toast.df-toast-error   { background: var(--danger); }
   @keyframes dfToastIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
   
   /* ===== MISC ===== */
   .sep { height: 1px; background: var(--border); margin: 20px 0; }
   .text-sm   { font-size: 12.5px; }
   .text-muted { color: var(--ink-light); }
   .mt-auto { margin-top: auto; }
   
   /* ===== COVER COLOR VARIANTS (shared) ===== */
   .cover-green  { background: linear-gradient(135deg, #0d7a52 0%, #25c491 100%); }
   .cover-blue   { background: linear-gradient(135deg, #1a3a8f 0%, #3d7bf5 100%); }
   .cover-amber  { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
   .cover-rose   { background: linear-gradient(135deg, #9d174d 0%, #f472b6 100%); }
   .cover-teal   { background: linear-gradient(135deg, #0f766e 0%, #34d3be 100%); }
   .cover-slate  { background: linear-gradient(135deg, #334155 0%, #94a3b8 100%); }
   .cover-violet { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%); }
   .cover-orange { background: linear-gradient(135deg, #9a3412 0%, #f97316 100%); }
   
   /* hero color classes (used on .pub-hero and .detail-hero-banner) */
   .color-green  { background: linear-gradient(135deg, #0d7a52 0%, #25c491 100%) !important; }
   .color-blue   { background: linear-gradient(135deg, #1a3a8f 0%, #3d7bf5 100%) !important; }
   .color-amber  { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important; }
   .color-rose   { background: linear-gradient(135deg, #9d174d 0%, #f472b6 100%) !important; }
   .color-teal   { background: linear-gradient(135deg, #0f766e 0%, #34d3be 100%) !important; }
   .color-slate  { background: linear-gradient(135deg, #334155 0%, #94a3b8 100%) !important; }
   .color-violet { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%) !important; }
   .color-orange { background: linear-gradient(135deg, #9a3412 0%, #f97316 100%) !important; }
   
   /* ===== RESPONSIVE ===== */
   @media (max-width: 900px) {
     .sidebar { display: none; }
     .main { margin-left: 0; }
     .app--admin .admin-body .sidebar { display: none; }
     .df-form-row { grid-template-columns: 1fr; }
     .df-form-row-3 { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 600px) {
     .page-content { padding: 16px; }
     .page-title { font-size: 22px; }
   }

   /* ===== GALLERY VIEWER (public directory / item pages) ===== */
   .gv-wrap {
     width: 100%;
     --gv-radius: var(--radius-xl, 18px);
   }

   .gv-stage {
     position: relative;
     border-radius: var(--gv-radius) var(--gv-radius) 0 0;
     overflow: hidden;
     background: var(--surface-2, #eef2f6);
   }

   .gv-hero {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
     min-height: 240px;
     max-height: 560px;
     overflow: hidden;
     background: #0f172a;
     cursor: zoom-in;
     outline: none;
   }
   .gv-hero--placeholder {
     border-radius: var(--gv-radius);
     cursor: default;
   }
   .gv-hero-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
   }
   .gv-hero-img.is-changing { opacity: 0.35; }
   .gv-hero:hover .gv-hero-img:not(.is-changing) { transform: scale(1.03); }

   .gv-hero-shade {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
       linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, transparent 28%),
       linear-gradient(0deg, rgba(15, 23, 42, 0.55) 0%, transparent 42%);
   }

   .gv-hero-top {
     position: absolute;
     top: 14px;
     left: 14px;
     right: 14px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 8px;
     z-index: 3;
     pointer-events: none;
   }
   .gv-counter {
     padding: 6px 12px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
     color: #fff;
     background: rgba(15, 23, 42, 0.55);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.12);
   }

   .gv-hero-controls {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 10px;
     z-index: 2;
     pointer-events: none;
   }
   .gv-hero-nav {
     pointer-events: all;
     width: 44px;
     height: 44px;
     border: none;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     line-height: 1;
     color: #fff;
     background: rgba(15, 23, 42, 0.45);
     backdrop-filter: blur(6px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     cursor: pointer;
     opacity: 0;
     transform: translateY(4px);
     transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
   }
   .gv-hero:hover .gv-hero-nav,
   .gv-hero:focus-within .gv-hero-nav {
     opacity: 1;
     transform: translateY(0);
   }
   .gv-hero-nav:hover {
     background: rgba(13, 122, 82, 0.85);
     border-color: rgba(255, 255, 255, 0.25);
   }

   .gv-hero-expand {
     position: absolute;
     right: 14px;
     bottom: 14px;
     z-index: 3;
     width: 42px;
     height: 42px;
     border: none;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     background: rgba(15, 23, 42, 0.55);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.14);
     cursor: pointer;
     transition: background 0.15s, transform 0.15s;
   }
   .gv-hero-expand:hover {
     background: var(--brand, #0d7a52);
     transform: scale(1.05);
   }

   .gv-dots {
     display: none;
     justify-content: center;
     gap: 7px;
     padding: 12px 14px 14px;
     background: var(--surface, #fff);
     border-top: 1px solid var(--border, #e5e9f0);
   }
   .gv-dot {
     width: 8px;
     height: 8px;
     padding: 0;
     border: none;
     border-radius: 999px;
     background: var(--border-mid, #cbd5e1);
     cursor: pointer;
     transition: width 0.2s ease, background 0.2s ease;
   }
   .gv-dot.active {
     width: 22px;
     background: var(--brand, #0d7a52);
   }

   .gv-thumbs-rail {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 12px 14px 14px;
     background: var(--surface, #fff);
     border-top: 1px solid var(--border, #e5e9f0);
     border-radius: 0 0 var(--gv-radius) var(--gv-radius);
   }
   .gv-thumb-scroll {
     flex-shrink: 0;
     width: 32px;
     height: 32px;
     border: 1px solid var(--border, #e5e9f0);
     border-radius: 50%;
     background: var(--surface-2, #f8fafc);
     color: var(--ink-mid, #475569);
     font-size: 18px;
     line-height: 1;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s;
   }
   .gv-thumb-scroll:hover {
     background: var(--brand-light, #e8f5ef);
     border-color: var(--brand-mid, #2a8f64);
     color: var(--brand, #0d7a52);
   }
   .gv-thumb-scroll[hidden] { display: none; }

   .gv-thumbs {
     display: flex;
     gap: 10px;
     flex: 1;
     min-width: 0;
     overflow-x: auto;
     scroll-snap-type: x proximity;
     scrollbar-width: none;
     padding: 2px 0;
   }
   .gv-thumbs::-webkit-scrollbar { display: none; }

   .gv-thumb {
     position: relative;
     flex: 0 0 88px;
     width: 88px;
     aspect-ratio: 4 / 3;
     padding: 0;
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
     border: 2px solid transparent;
     background: var(--surface-3, #f1f5f9);
     opacity: 0.72;
     scroll-snap-align: center;
     transition: border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
   }
   .gv-thumb:hover {
     opacity: 1;
     transform: translateY(-2px);
   }
   .gv-thumb.active {
     border-color: var(--brand, #0d7a52);
     opacity: 1;
     box-shadow: 0 4px 14px rgba(13, 122, 82, 0.22);
     transform: translateY(-2px);
   }
   .gv-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .gv-credit {
     padding: 10px 16px 12px;
     font-size: 11px;
     line-height: 1.55;
     color: var(--ink-mid, #64748b);
     background: var(--surface-2, #f8fafc);
     border-top: 1px solid var(--border, #e5e9f0);
   }
   .gv-credit a {
     color: var(--brand, #0d7a52);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   .gv-credit a:hover { color: var(--brand-dark, #0a5c3d); }

   .gv-thumb-cover {
     position: absolute;
     left: 4px;
     bottom: 4px;
     padding: 2px 6px;
     font-size: 9px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #fff;
     background: rgba(13, 122, 82, 0.9);
     border-radius: 4px;
     line-height: 1.2;
   }

   .gv-hero-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 64px;
     background: linear-gradient(135deg, #0d7a52 0%, #25c491 100%);
   }

   @media (max-width: 768px) {
     .gv-hero {
       aspect-ratio: 4 / 3;
       min-height: 220px;
       max-height: none;
     }
     .gv-hero-nav {
       opacity: 1;
       transform: none;
       width: 40px;
       height: 40px;
       font-size: 22px;
     }
     .gv-dots { display: flex; }
     .gv-thumbs-rail { padding: 10px 10px 12px; }
     .gv-thumb {
       flex: 0 0 72px;
       width: 72px;
     }
     .gv-thumb-scroll { display: none; }
   }

   .gv-lightbox {
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: rgba(0, 0, 0, 0.88);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
   }
   .gv-lightbox.open {
     opacity: 1;
     pointer-events: all;
   }
   .gv-lb-inner {
     position: relative;
     max-width: min(92vw, 1100px);
     max-height: 90vh;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .gv-lb-img {
     max-width: 100%;
     max-height: 88vh;
     border-radius: 10px;
     object-fit: contain;
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
     display: block;
   }
   .gv-lb-close {
     position: fixed;
     top: 20px;
     right: 24px;
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.15);
     border: none;
     border-radius: 50%;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s;
   }
   .gv-lb-close:hover { background: rgba(255, 255, 255, 0.3); }
   .gv-lb-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.15);
     border: none;
     border-radius: 50%;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s;
   }
   .gv-lb-nav:hover { background: rgba(255, 255, 255, 0.3); }
   .gv-lb-prev { left: -56px; }
   .gv-lb-next { right: -56px; }
   .gv-lb-counter {
     position: fixed;
     bottom: 24px;
     left: 50%;
     transform: translateX(-50%);
     color: rgba(255, 255, 255, 0.7);
     font-size: 13px;
     font-weight: 600;
   }
   .gv-lb-credit {
     position: fixed;
     bottom: 52px;
     left: 50%;
     transform: translateX(-50%);
     max-width: min(92vw, 720px);
     padding: 8px 14px;
     font-size: 11px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.85);
     text-align: center;
   }
   .gv-lb-credit a {
     color: #a7f3d0;
     text-decoration: underline;
   }

   .dir-hub-section-title {
     font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .06em;
     color: var(--ink-light);
     margin-bottom: 16px;
   }
   .dir-hub-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 24px;
     margin-bottom: 28px;
   }
   .dir-hub-card {
     display: flex;
     flex-direction: column;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
   }
   .dir-hub-card:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
     border-color: var(--brand-mid);
   }
   .dir-hub-card-cover {
     aspect-ratio: 16 / 10;
     min-height: 180px;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 64px;
     background: linear-gradient(135deg, #0d7a52 0%, #25c491 100%);
     background-size: cover;
     background-position: center;
   }
   .dir-hub-card-cover.has-cover-photo .dir-hub-card-emoji { display: none; }
   .dir-hub-card-body { padding: 16px 18px; flex: 1; }
   .dir-hub-card-name { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
   .dir-hub-card-count { font-size: 13px; color: var(--ink-mid); }
   .dir-hub-card-footer {
     padding: 12px 18px;
     border-top: 1px solid var(--border);
     font-size: 13px;
     font-weight: 700;
     color: var(--brand);
   }

   .listing-hero-caption {
     margin-top: 14px;
   }
   .listing-hero-caption .listing-hero-title {
     color: var(--ink);
     text-shadow: none;
   }

   .item-hero-card .gv-hero,
   .item-hero-card .gv-wrap .gv-hero:first-child {
     border-radius: 0;
   }

   @media (max-width: 600px) {
     .gv-lb-prev { left: 6px; }
     .gv-lb-next { right: 6px; }
     .gv-hero { aspect-ratio: 4/3; }
   }