/* MEDIACE elegant style - Spinner 360 */
:root{--bg:#07070b;--text:#fffaf0;--muted:#d7d4c8;--gold:#f5c75c;--gold2:#a87422;--blue:#00b7ff}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(rgba(5,6,12,.74),rgba(5,6,12,.9)),url("assets/spinner/S360-011.jpg") center/cover fixed,#07070b;color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 10%,rgba(0,183,255,.2),transparent 28%),radial-gradient(circle at 85% 12%,rgba(245,199,92,.22),transparent 26%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 35%,rgba(0,0,0,.55));z-index:-1}
.hero{padding:30px 16px 24px;background:linear-gradient(135deg,rgba(3,7,18,.94),rgba(17,24,39,.78));border-bottom:1px solid rgba(245,199,92,.35);box-shadow:0 18px 60px rgba(0,0,0,.45)}
.hero-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:220px 1fr auto;gap:26px;align-items:center}
.brand-logo{width:100%;max-width:220px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.65))}
.eyebrow{color:var(--gold);letter-spacing:.16em;font-weight:900;font-size:13px;text-transform:uppercase}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,6vw,66px);line-height:.98;margin:10px 0;text-shadow:0 10px 35px rgba(0,0,0,.75)}
h2{margin-top:0;font-family:Georgia,"Times New Roman",serif;color:#fff8df}
p{color:var(--muted);line-height:1.58}
.admin-link{color:#111827;background:linear-gradient(135deg,var(--gold),#fff1b8,var(--gold2));padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:900;white-space:nowrap;box-shadow:0 10px 25px rgba(0,0,0,.35)}
main{max-width:1180px;margin:0 auto;padding:22px 14px 52px}
.instructions,.custom-card{background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.045));border:1px solid rgba(245,199,92,.28);border-radius:28px;padding:24px;margin:20px 0;box-shadow:0 24px 80px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.instructions strong,.custom-card strong{color:var(--gold)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.filter,button{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.13);color:white;border:1px solid rgba(245,199,92,.25);box-shadow:0 10px 25px rgba(0,0,0,.22)}
.filter.active,button:hover{background:linear-gradient(135deg,var(--gold),#fff0ad,var(--gold2));color:#111827}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.template{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));border:1px solid rgba(245,199,92,.28);border-radius:24px;overflow:hidden;cursor:pointer;transition:.22s;box-shadow:0 18px 55px rgba(0,0,0,.36);backdrop-filter:blur(9px)}
.template:hover{transform:translateY(-5px) scale(1.01);border-color:rgba(245,199,92,.85);box-shadow:0 22px 70px rgba(245,199,92,.14),0 18px 55px rgba(0,0,0,.42)}
.template img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#111}
.thumb-wrap{position:relative}
.index-label{position:absolute;left:12px;top:12px;background:linear-gradient(135deg,rgba(0,0,0,.82),rgba(20,20,20,.72));color:#fff;border:2px solid rgba(245,199,92,.95);padding:8px 13px;border-radius:999px;font-size:18px;font-weight:950;letter-spacing:.04em;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.template .meta{padding:15px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.badge{background:rgba(245,199,92,.15);color:var(--gold);border:1px solid rgba(245,199,92,.46);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}
.modal[hidden],[hidden]{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:10;display:flex;align-items:center;justify-content:center;padding:14px}
.modal-card{background:linear-gradient(135deg,#0b1020,#111827);border:1px solid rgba(245,199,92,.34);border-radius:26px;max-width:980px;width:100%;max-height:94vh;overflow:auto;display:grid;grid-template-columns:.8fr 1fr;gap:18px;padding:16px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.modal-card img{width:100%;max-height:76vh;object-fit:contain;border-radius:18px;background:#222}
.close{position:absolute;right:12px;top:12px;border-radius:50%;width:42px;height:42px;font-size:26px;background:#ef4444;color:white;z-index:2;border:0}
.form{display:grid;gap:12px}
label{display:grid;gap:6px;color:#f5f5f4;font-weight:800}
input,textarea,select{width:100%;border:1px solid rgba(245,199,92,.26);border-radius:16px;background:rgba(0,0,0,.32);color:white;padding:13px;font:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,199,92,.15)}
small{color:#cbd5e1;font-weight:400}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.whatsapp{background:linear-gradient(135deg,#22c55e,#86efac)!important;color:#06220f!important}
.custom-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
footer{text-align:center;color:#e9dec2;padding:28px;background:rgba(0,0,0,.45);border-top:1px solid rgba(245,199,92,.24)}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr;text-align:center}.brand-logo{margin:auto;max-width:210px}.custom-card,.modal-card{grid-template-columns:1fr;display:grid}.gallery{grid-template-columns:1fr 1fr;gap:12px}.template .meta{display:block}.modal-card{padding:10px}}
@media(max-width:460px){.gallery{grid-template-columns:1fr}main{padding-left:10px;padding-right:10px}}