/* =========================
СПИСОК
========================= */

.habits{
display:flex;
flex-direction:column;
gap:18px;
}

/* =========================
КАРТОЧКА
========================= */

.habit-card{

background:#1a1a1d;
border-radius:18px;
padding:16px;

box-shadow:0 10px 30px rgba(0,0,0,0.4);

}

/* =========================
ВЕРХ
========================= */

.habit-main{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.habit-info{
display:flex;
flex-direction:column;
gap:6px;
}

.habit-name{
font-size:17px;
font-weight:600;
}

.habit-streak{
font-size:13px;
opacity:0.7;
}

/* =========================
ГРАФИК
========================= */

.habit-chart{
width:140px;
height:70px;
}

canvas{
width:100%!important;
height:100%!important;
}

/* =========================
OVERLAY БЛОК
========================= */

.habit-overlay{

max-height:0;
overflow:hidden;

opacity:0;
transform:translateY(-10px);

transition:

max-height .45s ease,
opacity .25s ease,
transform .35s ease;

}

/* активное состояние */

.habit-wrap.active .habit-overlay{

max-height:500px;

opacity:1;
transform:translateY(0);

margin-top:10px;

}

.habit-wrap{
position:relative;
margin-bottom:12px;
}


/* =========================
CALENDAR GRID
========================= */

.calendar{

display:grid;

grid-template-columns:auto 1fr;

gap:6px;

align-items:start;

padding:12px;

background:rgba(255,255,255,0.02);
border-radius:14px;

}

/* дни недели */

.calendar-weekdays{
display:grid;
grid-template-rows:repeat(7,9px);
row-gap:2px;
font-size:9px;
color:#888;
}

.calendar-weekdays div{

display:flex;
align-items:center;
justify-content:flex-end;

}

/* сетка */

.grid{

display:grid;

grid-template-rows:repeat(7,9px);

grid-auto-flow:column;
grid-auto-columns:9px;

gap:2px;

}

/* год */

.grid.year{

grid-template-rows:repeat(7,9px);
grid-auto-columns:9px;

overflow-x:auto;
overflow-y:hidden;

padding-bottom:14px;

}

/* клетки */

.cell{

background:#2b1d16;
border-radius:3px;

width:9px;
height:9px;

transition:background .2s;

}

.cell.active{
background:#22c55e;
}



/* ===== ТОНКИЙ ПРЕМИУМ СКРОЛЛ ===== */

.grid.year::-webkit-scrollbar{
height:3px;
}

.grid.year::-webkit-scrollbar-track{
background:transparent;
}

.grid.year::-webkit-scrollbar-thumb{
background:#ffffff;
border-radius:10px;
}


/* =========================
НИЗ
========================= */

.habit-footer{

display:flex;
justify-content:space-between;
align-items:center;

margin-top:12px;

}

/* переключатель */

.switch{

display:flex;

background:#1a1a1d;
border-radius:12px;
overflow:hidden;

}

.switch-btn{

border:none;
background:none;

padding:8px 14px;
color:#aaa;

}

.switch-btn.active{

background:#e8c66a;
color:#000;

}

.progress{
opacity:0.8;
}

canvas{

filter: drop-shadow(0 0 6px rgba(255,215,120,0.6))
drop-shadow(0 0 12px rgba(255,200,80,0.4));

}