/* assets/app.css — updated to fix overlap + progress animation + spacing */
:root{
  --bg: #071128;
  --card: rgba(255,255,255,0.04);
  --muted: #9fb0c8;
  --text: #eaf6ff;
  --purple: #7c3aed;
  --success: #22c55e;
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --gap: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
}

*{box-sizing:border-box}
html,body,#app{height:100%; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
body{padding:14px; -webkit-tap-highlight-color: transparent;}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:40px; height:40px; border-radius:10px; background:linear-gradient(180deg,#1f1b36,#2b1f52); display:block}
.title{font-weight:700; font-size:18px; letter-spacing:0.2px}
#auth-area button{padding:8px 12px; border-radius:10px; border:none; background:transparent; color:var(--text); font-weight:600; border:1px solid rgba(255,255,255,0.06)}

/* layout */
.main{display:grid; grid-template-columns: 1fr 360px; gap:14px; align-items:start}
@media(max-width:900px){ .main{grid-template-columns: 1fr; } body { padding-bottom: 220px; } /* big enough mobile bottom area so bottom sheet doesn't overlay content */ }

/* cards */
.card{background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:0 8px 24px rgba(2,6,23,0.6)}
.row{display:flex; gap:12px; align-items:center}

/* 30 grid */
.grid-30{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
@media(min-width:480px){ .grid-30{grid-template-columns:repeat(10,1fr);} }
.day-cell{padding:8px; border-radius:10px; min-height:78px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .12s ease, box-shadow .12s ease; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); overflow:hidden}
.day-cell:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(2,6,23,0.45)}
.day-num{font-weight:700}
.day-small{font-size:12px; color:var(--muted)}
.day-thumb{width:100%; height:52px; border-radius:8px; object-fit:cover; margin-top:8px; background:linear-gradient(90deg,#071a2b,#0b2638)}

/* heat colors */
.heat-0{background:transparent}
.heat-1{background:linear-gradient(180deg, rgba(124,58,237,0.06), rgba(124,58,237,0.03))}
.heat-2{background:linear-gradient(180deg, rgba(96,165,250,0.06), rgba(96,165,250,0.03))}
.heat-3{background:linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.04))}

/* inputs & buttons */
.input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text)}
.row-controls{display:flex; gap:8px; margin-top:10px; align-items:center}
.btn{padding:10px 12px; background:var(--purple); border-radius:10px; color:white; font-weight:700; border:none; cursor:pointer; box-shadow: 0 6px 16px rgba(28,27,36,0.6)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text)}

/* tasks list */
.task-row{display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); margin-bottom:8px}
.task-thumb{width:84px; height:56px; border-radius:8px; object-fit:cover; background:#072033}
.task-title{font-weight:700}
.task-meta{font-size:12px; color:var(--muted)}
.task-actions{display:flex; flex-direction:column; gap:6px}

/* checkbox style */
.checkbox {
  -webkit-appearance: none;
  appearance: none;
  width:20px; height:20px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); background:transparent; display:inline-block; position:relative;
}
.checkbox:checked { background: linear-gradient(90deg,#34d399,#10b981); border: none; }
.checkbox:checked::after { content: "✓"; color:#003020; font-weight:800; position:absolute; left:3px; top:0px; font-size:14px; }

/* progress */
.progress-wrap{height:12px; width:100%; background:rgba(255,255,255,0.03); border-radius:999px; overflow:hidden}
.progress-bar{height:100%; width:0%; background:linear-gradient(90deg,#7c3aed,#60a5fa); transition: width 700ms cubic-bezier(.2,.9,.2,1) }

/* aside/bottom sheet */
.aside{display:flex; flex-direction:column; gap:12px}
@media(max-width:900px){ .aside { position:fixed; left:12px; right:12px; bottom:12px; z-index:30; } }

/* pomodoro */
.pomo{display:flex; flex-direction:column; align-items:center; gap:8px}
.pomo-time{font-weight:800; font-size:28px}
.pomo-controls{display:flex; gap:6px}

/* diet card */
.water-ring{width:88px; height:88px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: inset 0 -8px 18px rgba(2,6,23,0.6)}
.water-amount{font-weight:800}

/* modal & toast top layers */
.modal-root{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60}
.modal-root.open{display:flex}
.modal-panel{width:95%; max-width:520px; background:linear-gradient(180deg, rgba(8,10,20,0.95), rgba(6,8,18,0.98)); border-radius:14px; padding:18px; box-shadow:0 24px 60px rgba(2,6,23,0.7)}
.toast-root{position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:80}
.toast{background:linear-gradient(90deg,#111827,#0b1220); padding:10px 14px; border-radius:10px; box-shadow:0 8px 30px rgba(2,6,23,0.6); color:var(--text)}

/* responsiveness */
@media(max-width:480px){
  .day-cell { min-height:72px; padding:8px }
  .task-thumb{width:68px; height:48px}
  .title{font-size:16px}
}