:root{
  --accent:#4caf50;
  --accent2:#66bb6a;
  --text:#000;
  --card-bg:rgba(255,255,255,0.85);
  --glass-bg:rgba(255,255,255,0.75);
  --radius:16px;
  font-family: "Inter", system-ui, sans-serif;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* PREMIUM LIFESTYLE BACKGROUND */
body{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.7)),
    url("https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=2000&q=80")
      center/cover no-repeat fixed;
  backdrop-filter: blur(6px);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* TOPBAR */
.topbar{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(8px);
  padding:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
  border-bottom:1px solid rgba(255,255,255,0.6);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.topbar h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.5px;
}

/* PRAWY GÓRNY RÓG */
.top-right{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}

.user-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  cursor:pointer;
  transition:0.2s ease;
}

.user-avatar:hover{
  transform:scale(1.05);
}

.user-name{
  font-weight:600;
  font-size:15px;
  color:#000;
}

.logout-btn{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:0.2s ease;
}

.logout-btn:hover{
  background:var(--accent);
  color:#fff;
}

/* LAYOUT */
.layout{
  display:flex;
  gap:20px;
  max-width:1200px;
  margin:24px auto;
  padding:0 20px;
  width:100%;
}

/* MENU */
.menu{
  width:240px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  padding:20px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.menu-btn{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:rgba(255,255,255,0.6);
  font-weight:600;
  cursor:pointer;
  transition:0.25s ease;
  color:#000 !important;
}

.menu-btn:hover{
  background:rgba(255,255,255,0.95);
  transform:translateX(4px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

.menu-btn.active{
  background:rgba(255,255,255,0.9) !important;
  color:#000 !important;
  border-left:4px solid var(--accent);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  transform:translateX(6px);
}

/* KARTY */
.card{
  background:var(--card-bg);
  backdrop-filter:blur(10px);
  padding:22px;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
  animation:fadeSlide 0.4s ease;
  margin-bottom:20px;
  transition:0.25s ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,0.22);
}

/* ANIMACJA */
.tab{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.35s ease, transform 0.35s ease;
}

.tab.active{
  display:block;
  opacity:1;
  transform:translateY(0);
}

@keyframes fadeSlide{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

/* INPUTY */
input, textarea, select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #ccc;
  background:rgba(255,255,255,0.9);
  margin-top:6px;
  transition:0.2s;
  color:#000;
}

input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(76,175,80,0.25);
  outline:none;
}

/* PRZYCISKI */
button{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(76,175,80,0.35);
  transition:0.25s ease;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(76,175,80,0.45);
}

button.muted{
  background:rgba(255,255,255,0.7);
  color:#333;
  border:1px solid #ccc;
  box-shadow:none;
}

button.muted:hover{
  background:#f7f7f7;
}

/* LISTY */
.list li{
  background:rgba(255,255,255,0.85);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:0.2s;
}

.list li:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* TABELA WAGI */
.weight-table{
  width:100%;
  border-collapse:collapse;
  background:rgba(255,255,255,0.9);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.weight-table th{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  padding:12px;
  font-size:15px;
}

.weight-table td{
  padding:10px;
  border-bottom:1px solid #ddd;
  color:#000;
}

.weight-table tr:hover{
  background:rgba(76,175,80,0.08);
}

/* WYKRES */
#weightChart{
  width:100%;
  height:320px;
  background:rgba(255,255,255,0.7);
  border-radius:16px;
  padding:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* ZAKŁADKI DNI TYGODNIA */
.week-tabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.day-btn{
  padding:8px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.7);
  border:1px solid #ccc;
  cursor:pointer;
  font-weight:600;
  transition:0.25s;
  color:#000 !important;
}

.day-btn:hover{
  background:rgba(255,255,255,0.95);
  color:#000 !important;
}

.day-btn.active{
  background:var(--accent);
  color:#fff !important;
  border-color:var(--accent);
}

/* PROFIL */
.profile-avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--accent);
  margin-bottom:12px;
}

/* MODALE */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}

.hidden{
  display:none !important;
}

.modal-card{
  background:rgba(255,255,255,0.95);
  padding:24px;
  border-radius:20px;
  width:100%;
  max-width:420px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  animation:fadeSlide 0.4s ease;
}

.modal-card h3{
  margin-bottom:12px;
  text-align:center;
}

/* RESPONSYWNOŚĆ */
@media(max-width:900px){
  .layout{flex-direction:column}
  .menu{width:100%;flex-direction:row;overflow:auto}
  .menu nav{flex-direction:row}
}