/* ============ SPRAWNY — design system v2 ============ */
:root{
  /* surfaces */
  --bg:#08080c;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, rgba(124,108,255,.10), transparent 60%),
            radial-gradient(900px 500px at -10% 10%, rgba(78,155,255,.07), transparent 55%);
  --surface:#111119;
  --surface-2:#181822;
  --surface-3:#20202c;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  /* text */
  --txt:#f5f5f8;
  --mut:#8c8c9c;
  --mut-2:#5f5f70;
  /* accents */
  --acc:#7c6cff;
  --acc-2:#4e9bff;
  --grad:linear-gradient(135deg,#7c6cff,#4e9bff);
  --cal:#ff7a59;      /* kalorie */
  --move:#34e29b;     /* ruch */
  --gym:#4e9bff;      /* siłownia */
  --warn:#ffcf5c;
  --bad:#ff5d6c;
  /* shape */
  --r:18px; --r-sm:12px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.6);
  --shadow-sm:0 4px 16px -6px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
  background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--txt); -webkit-font-smoothing:antialiased; letter-spacing:-0.01em;
  font-size:16.5px; line-height:1.5;
}
::selection{background:rgba(124,108,255,.35)}
#app{display:flex; min-height:100vh; max-width:1360px; margin:0 auto; position:relative}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------- NAV ---------------- */
#nav{
  width:230px; flex:0 0 230px; padding:22px 14px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); border-right:1px solid var(--line);
}
.brand{
  font-size:19px; font-weight:800; padding:8px 12px 22px; display:flex; align-items:center; gap:10px;
  letter-spacing:-0.02em;
}
.brand span{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nav-btn{
  display:flex; align-items:center; gap:13px; background:none; border:none; color:var(--mut);
  font-size:15.5px; font-weight:500; padding:12px 13px; border-radius:12px; cursor:pointer;
  text-align:left; width:100%; transition:.18s ease; position:relative;
}
.nav-btn .ico{font-size:19px; width:22px; text-align:center; transition:.18s}
.nav-btn:hover{background:var(--surface-2); color:var(--txt)}
.nav-btn:hover .ico{transform:scale(1.1)}
.nav-btn.active{background:var(--surface-3); color:var(--txt); font-weight:600}
.nav-btn.active::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--grad)}

/* ---------------- MAIN ---------------- */
#main{flex:1; padding:34px 40px 70px; max-width:1040px; width:100%; margin:0 auto; animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.view-title{font-size:32px; font-weight:800; margin:0 0 4px; letter-spacing:-0.03em}
.sub{color:var(--mut); margin:0 0 26px; font-size:15.5px}

/* ---------------- GRID / CARDS ---------------- */
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px;
  box-shadow:var(--shadow-sm); transition:.2s ease;
}
.card.hover:hover{transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--shadow)}
.card h3{margin:0 0 14px; font-size:13.5px; color:var(--mut); font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.stat-big{font-size:40px; font-weight:800; line-height:1; letter-spacing:-0.03em}
.stat-sub{color:var(--mut); font-size:14.5px; margin-top:7px}

/* hero (dashboard) */
.hero{
  background:linear-gradient(135deg,rgba(124,108,255,.14),rgba(78,155,255,.06));
  border:1px solid var(--line-2); border-radius:22px; padding:26px 28px; margin-bottom:20px;
  display:flex; align-items:center; gap:30px; flex-wrap:wrap; box-shadow:var(--shadow);
}
.hero-txt{flex:1; min-width:200px}
.hero h1{font-size:29px; font-weight:800; margin:0 0 6px; letter-spacing:-0.03em}
.hero p{color:var(--mut); margin:0; font-size:15px}

/* activity rings */
.rings{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.ring-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:98px}
.ring{position:relative; width:96px; height:96px}
.ring svg{transform:rotate(-90deg)}
.ring .rv{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .rv b{font-size:19px; font-weight:800; line-height:1}
.ring .rv small{font-size:10px; color:var(--mut)}
.ring-lbl{font-size:13px; color:var(--mut); font-weight:500}
.ring-lbl b{color:var(--txt); font-weight:600}

/* progress bar */
.bar{height:9px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin-top:14px}
.bar>span{display:block; height:100%; border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1); background:var(--grad)}
.bar.move>span{background:linear-gradient(90deg,#2bd48b,#34e29b)}
.bar.cal>span{background:linear-gradient(90deg,#ff7a59,#ffb054)}
.bar.warn>span{background:linear-gradient(90deg,#ffcf5c,#ff9d4d)}
.bar.water>span{background:linear-gradient(90deg,#4e9bff,#5ec8ff)}

/* ---------------- BUTTONS ---------------- */
.btn{
  background:var(--grad); color:#fff; border:none; padding:12px 19px; border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer; transition:.18s ease; box-shadow:0 4px 14px -4px rgba(124,108,255,.6);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface-2); color:var(--txt); border:1px solid var(--line-2); box-shadow:none}
.btn.ghost:hover{background:var(--surface-3)}
.btn.green{background:linear-gradient(135deg,#2bd48b,#34e29b); color:#04231a; box-shadow:0 4px 14px -4px rgba(52,226,155,.5)}
.btn.danger{background:var(--surface-2); color:var(--bad); border:1px solid rgba(255,93,108,.25); box-shadow:none}
.btn.danger:hover{background:rgba(255,93,108,.12)}
.btn.sm{padding:8px 13px; font-size:14px; border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}

/* ---------------- INPUTS ---------------- */
input,select{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--txt);
  padding:12px 14px; border-radius:11px; font-size:15px; width:100%; transition:.15s; font-family:inherit;
}
input:focus,select:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(124,108,255,.15)}
input::placeholder{color:var(--mut-2)}
label.fld{display:block; margin-bottom:13px}
label.fld span{display:block; color:var(--mut); font-size:13px; margin-bottom:6px; font-weight:500}

/* ---------------- LIST ---------------- */
.list-item{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.tag{font-size:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--mut); padding:4px 10px; border-radius:99px; font-weight:500; white-space:nowrap}
.muted{color:var(--mut)}
.empty{color:var(--mut); text-align:center; padding:40px 10px; font-size:15px}
.empty .big{font-size:34px; display:block; margin-bottom:10px; opacity:.7}

/* streak calendar (github-style) */
.cal{display:grid; grid-template-columns:repeat(auto-fill,minmax(15px,1fr)); gap:5px; margin-top:12px}
.cal i{aspect-ratio:1; border-radius:4px; background:var(--surface-3); transition:.15s}
.cal i.l1{background:rgba(52,226,155,.28)}
.cal i.l2{background:rgba(52,226,155,.6)}
.cal i.l3{background:#34e29b}
.cal i:hover{outline:2px solid var(--line-2)}

/* pills / hints */
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line-2); padding:8px 14px; border-radius:99px; font-size:14px; font-weight:500; cursor:pointer; transition:.15s}
.pill:hover{background:var(--surface-3); transform:translateY(-1px)}
.hint{background:rgba(78,155,255,.08); border:1px solid rgba(78,155,255,.25); color:#bcd8ff; padding:14px 16px; border-radius:12px; font-size:14.5px; line-height:1.55}
.hint.green{background:rgba(52,226,155,.09); border-color:rgba(52,226,155,.28); color:#a8f0cf}
.hint.amber{background:rgba(255,207,92,.10); border-color:rgba(255,207,92,.30); color:#ffe6ad}
.chip-goal{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--mut); font-weight:500}
.dot{width:9px; height:9px; border-radius:99px; display:inline-block}

/* ---------------- MODAL ---------------- */
#modal-root:empty{display:none}
.modal-bg{position:fixed; inset:0; background:rgba(4,4,8,.66); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; animation:fade .2s ease}
.modal{background:var(--surface); border:1px solid var(--line-2); border-radius:20px; padding:24px; width:100%; max-width:460px; box-shadow:var(--shadow); max-height:88vh; overflow:auto; animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(8px)}to{opacity:1; transform:none}}
.modal h2{margin:0 0 18px; font-size:20px; font-weight:800; letter-spacing:-0.02em}

/* grupa posiłku w „Dziś zjedzone" */
.meal-group{border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:var(--surface-2)}
.meal-group .list-item{padding:8px 0}
.meal-group .list-item:last-child{border-bottom:none}

/* responsywna siatka pól (modal ręczny) */
.grid-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px}
.grid-fields .fld{margin-bottom:0}

/* pasek makro */
.macrobar{display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--surface-2)}
.macrobar>span{display:block; height:100%; transition:width .4s}
.macrolegend{display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; font-size:14.5px}
.macrolegend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:middle}
.macrolegend b{font-weight:700}

/* słupki bilansu tygodnia */
.wkbars{display:flex; gap:10px; align-items:flex-end; height:140px; margin-top:16px}
.wkbar{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.wkval{font-size:11px; color:var(--mut); height:14px; font-variant-numeric:tabular-nums}
.wktrack{width:100%; max-width:46px; flex:1; background:var(--surface-2); border-radius:8px; display:flex; align-items:flex-end; overflow:hidden}
.wkfill{width:100%; background:var(--grad); border-radius:8px 8px 0 0; transition:height .45s cubic-bezier(.2,.8,.2,1)}
.wkfill.over{background:linear-gradient(180deg,#ff9d4d,#ffcf5c)}
.wkday{font-size:12px; color:var(--mut); font-weight:600}
.wkday.now{color:var(--acc-2)}

/* karta kreatyny — podświetlenie gdy niewzięta */
.cre-remind{border-color:rgba(124,108,255,.45); background:linear-gradient(135deg,rgba(124,108,255,.10),transparent)}

/* tabela porównawcza pomiarów */
.mtable{width:100%; border-collapse:collapse; font-size:15px; min-width:480px}
.mtable th{text-align:right; color:var(--mut); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:10px 14px; border-bottom:1px solid var(--line-2)}
.mtable th:first-child{text-align:left}
.mtable td{padding:13px 14px; border-bottom:1px solid var(--line); text-align:right}
.mtable td:first-child{text-align:left; font-weight:600}
.mtable tr:last-child td{border-bottom:none}
.mtable .u{color:var(--mut); font-size:12px; margin-left:2px}
.mtable tbody tr{transition:.12s}
.mtable tbody tr:hover{background:var(--surface-2)}

/* świecące przypomnienie (dashboard) */
.reminder-glow{
  background:linear-gradient(135deg,rgba(255,207,92,.16),rgba(255,157,77,.08));
  border:1px solid rgba(255,207,92,.45); color:#ffe6ad; padding:16px 18px; border-radius:14px;
  animation:glow 2.4s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,207,92,.0), 0 6px 20px -8px rgba(255,207,92,.25)}
  50%{box-shadow:0 0 0 4px rgba(255,207,92,.10), 0 8px 28px -6px rgba(255,207,92,.45)}
}

/* fab / segmented (mobile) */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:2px}
.seg button{background:none; border:none; color:var(--mut); padding:7px 14px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer}
.seg button.on{background:var(--surface-3); color:var(--txt)}

/* ---------------- MOBILE ---------------- */
@media(max-width:760px){
  #app{flex-direction:column}
  #nav{
    width:100%; flex-direction:row; height:auto; position:fixed; bottom:0; top:auto; z-index:40;
    border-right:none; border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around; background:rgba(12,12,18,.85); backdrop-filter:blur(16px);
  }
  .brand{display:none}
  .nav-btn{flex-direction:column; gap:4px; padding:6px 4px; flex:1}
  .nav-btn .lbl{font-size:10px; font-weight:600}
  .nav-btn .ico{font-size:21px}
  .nav-btn.active{background:none}
  .nav-btn.active::before{display:none}
  .nav-btn.active .ico{transform:scale(1.12)}
  .nav-btn.active .lbl{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  #main{padding:calc(22px + env(safe-area-inset-top)) 16px 100px}
  .view-title,.hero h1{font-size:23px}
  .hero{padding:22px; gap:20px}
  .rings{gap:14px; justify-content:space-between; width:100%}
  .ring-wrap{min-width:0; flex:1}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}