:root{ --bg-speed: 90s; }
html,body{ height:100%; margin:0; }
body{
  font-family: Arial, sans-serif;
  background-image: url("pattern.png");
  background-size: auto;
  background-repeat: repeat;
  animation: moveBg var(--bg-speed) linear infinite;
}
@keyframes moveBg { from { background-position: 0 0; } to { background-position: 1000px 1000px; } }

.page{ min-height:100vh; display:flex; flex-direction:column; }
.site-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:rgba(255,255,255,0.6); }
.nav a{ margin-left:12px; text-decoration:none; color:#222; }
.container{ padding:20px; flex:1; /*backdrop-filter: blur(2px); */}
.site-footer{ padding:10px 20px; background:rgba(255,255,255,0.6); text-align:center; }

.groups{ display:flex; gap:12px; }
.group-card{ border:1px solid #ddd; padding:12px; border-radius:6px; background:#fff; }

.product-list{ display:flex; flex-wrap:wrap; gap:12px; }
.product{ width:220px; padding:10px; border-radius:6px; background:#fff; border:1px solid #eee; }
.product img{ max-width:100%; height:120px; object-fit:cover; display:block; }
.flash{ padding:8px; margin-bottom:10px; border-radius:4px; }
.flash.error{ background:#ffdede; color:#700; }
.flash.success{ background:#eaffea; color:#070; }
.logo{ height:60px; width: 60px; object-fit: cover; border-radius: 50%; overflow: hidden;   vertical-align:middle; margin-right:8px; }

.auth-container { display: flex; justify-content: center; align-items: center; min-height: 80vh; background: #f0f0f0;}
.auth-box { background: white; padding: 2rem 3rem; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 400px;}
.auth-box h2 { text-align: center; margin-bottom: 1.5rem;}
.form-group { margin-bottom: 1rem;}
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: 600;}
.form-group input { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 8px;}
.btn { width: 100%; padding: 0.7rem; background: #3498db; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;}
.btn:hover { background: #2980b9;}
.small-text { text-align: center; margin-top: 1rem; font-size: 0.9rem;}