/* styles.css */
:root {
  --blue:    #4285F4; --red:    #DB4437;
  --yellow:  #F4B400; --green:  #0F9D58;
  --light:   #F5F5F5; --dark:   #202124;
  --overlay: rgba(32,33,36,0.8);
  --card-bg: #ffffff; --radius:8px;
  --font:    'Inter',sans-serif; --fs-base:18px;
}
[data-theme="dark"]{
  --light:#202124; --dark:#F5F5F5;
  --overlay:rgba(245,246,250,0.8);
  --card-bg:#2a2a2a;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--light);color:var(--dark);
  font-family:var(--font);font-size:var(--fs-base);
  line-height:1.4;padding:2rem;
  display:flex;flex-direction:column;align-items:center;
}
header{
  width:100%;max-width:800px;
  position:relative;margin-bottom:2rem;
  display:flex;justify-content:center;align-items:center;
}
header h1{font-size:1.8rem;font-weight:600;}
.nav-btn{
  position:absolute;width:40px;height:40px;
  border:none;border-radius:50%;background:var(--card-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  cursor:pointer;transition:transform .2s;
  font-size:1.2rem;color:var(--dark);
}
.nav-btn:hover{transform:scale(1.1);}
#themeToggle{top:.5rem;left:.5rem;}
#menuBtn   {top:.5rem;left:4.5rem;}
#adminBtn  {top:.5rem;right:.5rem;}

.product-grid{
  width:100%;max-width:800px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.product{display:flex;flex-direction:column;align-items:center;}
.product-card{
  position:relative;width:100%;padding-bottom:75%;
  background:var(--card-bg);border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);overflow:hidden;
  cursor:pointer;transition:transform .2s,box-shadow .2s;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.product-image{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:contain;
}
.product-info{margin-top:.75rem;text-align:center;}
.product-title{
  font-size:1.2rem;margin-bottom:.5rem;font-weight:500;
}
.order-btn{
  background:var(--blue);color:white;
  border:none;border-radius:var(--radius);
  padding:.5rem 1rem;cursor:pointer;
  transition:background .2s;font-size:1rem;
}
.order-btn:hover{background:var(--green);}

.admin-panel{
  width:100%;max-width:800px;
  background:var(--card-bg);
  border:1px solid var(--blue);
  border-radius:var(--radius);padding:1rem;
}
.admin-panel form{
  display:flex;flex-direction:column;gap:1rem;
  margin-bottom:1.5rem;
}
.form-group label{
  font-weight:600;margin-bottom:.25rem;
}
.form-group input{
  width:100%;padding:.5rem;
  border:1px solid #ccc;border-radius:var(--radius);
  font-size:1rem;
}
.add-btn{
  background:var(--yellow);color:var(--dark);
  border:none;border-radius:var(--radius);
  padding:.75rem;cursor:pointer;
  transition:background .2s;font-size:1rem;
}
.add-btn:hover{background:var(--red);}

.product-list{
  display:flex;flex-direction:column;gap:.5rem;
}
.admin-item{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--light);
  padding:.5rem .75rem;border-radius:var(--radius);
}
[data-theme="dark"] .admin-item{background:var(--card-bg);}
.admin-item span{font-size:1rem;}
.admin-item button{
  border:none;border-radius:var(--radius);
  padding:.25rem .5rem;cursor:pointer;
  font-size:.9rem;margin-left:.5rem;
}
.edit-btn{
  background:var(--blue);color:white;transition:background .2s;
}
.edit-btn:hover{background:var(--green);}
.delete-btn{
  background:var(--red);color:white;transition:background .2s;
}
.delete-btn:hover{background:#a8322a;}

.modal{
  display:none;position:fixed;inset:0;
  background:var(--overlay);
  align-items:center;justify-content:center;
  z-index:100;animation:fadeIn .3s ease-out;
}
.modal.show{display:flex;}
.modal-content{
  background:var(--card-bg);
  border-radius:var(--radius);padding:1rem;
  width:90%;max-width:420px;
  box-shadow:0 12px 24px rgba(0,0,0,0.2);
  transform:scale(0.8);
  animation:popIn .3s forwards ease-out;
  position:relative;
}
.close{
  position:absolute;top:.5rem;right:.75rem;
  background:none;border:none;font-size:1.75rem;
  color:var(--dark);cursor:pointer;
  transition:color .2s;
}
.close:hover{color:var(--red);}
model-viewer#viewer{
  width:100%;height:300px;
  border-radius:4px;background:var(--light);
}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{from{transform:scale(0.8);}to{transform:scale(1);}}