﻿:root{--bg:#0b0f14;--panel:#0f1620;--text:#e8eef6;--muted:#a7b4c4;--border:#1e2a3a;--link:#7cc4ff;--shadow:0 10px 30px rgba(0,0,0,.35);--r:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:10;background:rgba(11,15,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand h1{margin:0;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:14px;align-items:center}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:6px 10px;border-radius:999px}
.hero{padding:18px 0 6px 0}
.hero h2{margin:0 0 6px 0;font-size:32px}
.hero p{margin:0;color:var(--muted);max-width:70ch}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 12px 0;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr;gap:10px}
.kv .k{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.kv .v{font-size:14px}
.hr{height:1px;background:var(--border);margin:14px 0}
.heroimg{width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gimg{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);display:block}
.listgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:900px){.listgrid{grid-template-columns:1fr}}
.lcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.ltitle{margin:0 0 6px 0;font-size:18px}
.lsub{margin:0 0 10px 0;color:var(--muted)}
.lmeta{display:flex;gap:10px;flex-wrap:wrap}
.footer{border-top:1px solid var(--border);color:var(--muted);margin-top:26px}
.small{font-size:12px;color:var(--muted)}
/* Lightbox */
#lb{position:fixed;inset:0;display:none;z-index:1000}
#lb.on{display:block}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.lb-shell{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;align-items:center;gap:12px;padding:24px}
.lb-img{grid-column:2;grid-row:2;max-width:100%;max-height:100%;margin:0 auto;border-radius:16px;border:1px solid var(--border)}
.lb-cap{grid-column:2;grid-row:3;color:var(--muted);text-align:center;font-size:13px}
.lb-btn{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:10px 14px;cursor:pointer}
.lb-close{grid-column:3;grid-row:1;justify-self:end}
.lb-prev{grid-column:1;grid-row:2}
.lb-next{grid-column:3;grid-row:2}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.gallery img:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* TDE_BAT_GRID_V1 (baseline) */
.listgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
@media (min-width:860px){.listgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1180px){.listgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:1500px){.listgrid{grid-template-columns:repeat(5,minmax(0,1fr));}}

/* TDE_BAT_SKIN_V1 (light theme + square edges) */
:root{
  --bg:#f3f3f3;
  --panel:#ffffff;
  --text:#111111;
  --muted:#444444;
  --border:#d9d9d9;
  --r:0px;
  --shadow:0 1px 2px rgba(0,0,0,.08);
}
body{background:var(--bg);color:var(--text);}
a{color:#111;}
.lcard{border-radius:0;}
.lthumb{border-radius:0;}
.badge{border-radius:0;}
.hr{opacity:.25}

/* dark header helpers (safe even if class differs) */
header, .topbar, .site-header{background:#111;color:#fff;}
header a, .topbar a, .site-header a{color:#fff;}

/* TDE_BAT_LISTING_HERO_V1 */
.listing-hero, .hero, .hero-wrap img, .hero img{
  width:100%;
  max-width:100%;
  border-radius:0;
  display:block;
}
.wrap, .content, .listing-wrap{max-width:1200px;margin:0 auto;}

/* TDE_BAT_SEARCH_V1 */
.lsearch{background:#fff;border:1px solid var(--border);padding:20px;margin:24px auto 28px auto;max-width:1100px}
.lsearch input#q{font-size:18px;padding:14px 16px;width:100%;max-width:none}
.lsearch select{font-size:15px;padding:10px 12px}
.lsearch p.small{font-size:13px}

/* TDE_BAT_CARD_DENSITY_V1 */
.lcard{padding:12px}
.ltitle{font-size:18px;font-weight:700;line-height:1.25}
.lsub{font-size:13px}
.lmeta{gap:6px}
.badge{font-size:12px;padding:5px 9px}
.listgrid{gap:14px}

/* TDE_BAT_FEATURED_V1 */
.lcard .badge.featured{background:#111;color:#fff;border-color:#111}
.lcard.featured{outline:2px solid #111; outline-offset:-2px}

/* TDE_BAT_GALLERY_V1 */
.gallery, .gallery-wrap{max-width:100vw;margin:0}
.gallery img, .gallery .gimg{
  width:100%;
  max-height:92vh;
  object-fit:contain;
  border-radius:0;
  display:block;
}
.gallery-nav, .lightbox-nav{font-size:18px}
