/* style.css — global (tema escuro, responsivo, com modais e wide container) */
:root{ --bg:#0f1420; --card:#141a29; --muted:#a8b3cf; --line:#27324a; --primary:#4da3ff; --accent:#7be8a9 }
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:#e6ebff}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:28px auto;padding:0 16px}
.container.wide{max-width:1280px}
header.nav{background:#0c111b;border-bottom:1px solid var(--line)}
nav.wrap{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.3px}
nav .right{display:flex;align-items:center;gap:8px}
.btn{background:var(--primary);border:0;color:#001028;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#e6ebff}
input,select,textarea{background:#0d1320;border:1px solid var(--line);color:#fff;padding:10px 12px;border-radius:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
h1{margin:8px 0 14px}
.muted,.light{color:var(--muted)}
.row{display:grid;grid-template-columns:72px 1.2fr .5fr .6fr;gap:12px;align-items:center;border-bottom:1px dashed var(--line);padding:12px 8px}
.row:last-child{border-bottom:0}
.thumb{width:64px;height:64px;border-radius:10px;background:#0d1320;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;cursor:zoom-in}
.thumb img{width:100%;height:100%;object-fit:contain}
.empty{text-align:center;padding:40px 10px;color:var(--muted)}
.diag{color:#b7c6e8;display:none}
.badge{display:inline-block;background:#2d3954;border:1px solid #324167;color:#dbe6ff;padding:4px 8px;border-radius:999px;font-size:.82rem}
.price .old{text-decoration:line-through;color:#99a7c2;margin-right:8px}
footer{border-top:1px solid var(--line);padding:20px 0;margin-top:24px;color:#a8b3cf}
.pager{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:12px 0}
.pagination{display:flex;gap:6px;align-items:center}
.page-btn{background:transparent;border:1px solid var(--line);color:#e6ebff;border-radius:10px;padding:8px 10px;cursor:pointer}
.page-btn[disabled]{opacity:.5;cursor:not-allowed}
/* Lightbox (genérica) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;top:18px;right:22px;background:#111a;border:1px solid #27324a;color:#e6ebff;border-radius:10px;padding:8px 10px;cursor:pointer}
/* Modal genérico (para edições e detalhes) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9998}
.modal .dialog{width:min(920px,92vw)}
.closeX{position:absolute;top:16px;right:18px;background:#111a;border:1px solid #27324a;color:#e6ebff;border-radius:10px;padding:8px 10px;cursor:pointer}
/* Responsivo */
@media (max-width:840px){
  .row{grid-template-columns:1fr}
  .grid.cols2,.grid.cols3,.grid.cols4{grid-template-columns:1fr}
}