:root{
  --bg:#0f1822;
  --card:#162433;
  --text:#e8eef5;
  --muted:#9eb0c5;
  --acc:#2fd386;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 12px}

.topbar{position:sticky;top:0;background:rgba(15,24,34,.85);backdrop-filter:blur(8px);border-bottom:1px solid #1e2a39;z-index:5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:48px}
.brand{font-weight:700;font-size:15px}
.topbar a{color:var(--muted);text-decoration:none;margin-left:12px;font-size:14px}
.topbar a:hover{color:var(--text)}

.hero.compact{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 0}
.hero-img img{border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.28);max-width:280px}
.muted.small{font-size:13px}
h1{font-size:22px;margin:6px 0}

.gallery.compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px 0}
.card.small{background:var(--card);border-radius:10px;padding:6px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.card.small img{width:100%;height:160px;object-fit:cover;border-radius:8px;cursor:pointer}

.details.compact{display:grid;grid-template-columns:1fr;gap:12px;padding:6px 0 16px}
.details article{background:var(--card);border-radius:10px;padding:12px}
.details ul.tight{margin:.2em 0 .6em 1em;line-height:1.4}
.price{font-size:18px;margin:.2em 0 .2em}

.footer{border-top:1px solid #1e2a39;padding:16px 0;color:var(--muted);font-size:13px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.84);display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;z-index:20}
.lightbox[hidden]{display:none}
.lightbox img{max-width:88vw;max-height:80vh;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.lb-close,.lb-prev,.lb-next{position:absolute;top:10px;background:#0008;border:1px solid #ffffff40;color:#fff;font-size:24px;line-height:24px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-close{right:10px;top:10px}