/* tablet */
@media (max-width:1024px){
    #hq > .nutrient_week{min-width: unset; padding: 0 }
    .nutrient_week .controls{flex-wrap:wrap;gap:8px}
    .nutrient_week .controls>.btn{flex:0 0 auto}
    .nutrient_week .calendar-container{padding:8px}
    .nutrient_week .day{flex:0 0 44px;height:70px;font-size:13px}
    .nutrient_week .month-divider{flex:0 0 70px}
    .nutrient_week .accordion-header{font-size:15px;gap:8px}
    .nutrient_week .accordion-content{padding:0 8px}
    .nutrient_week .accordion.active .accordion-content{padding:8px}
    .nutrient_week .panel{flex-wrap:wrap}
    .nutrient_week .panel .btn{flex:1 1 auto}
    .nutrient_week .table{overflow-x:auto}
    .nutrient_week .table table{min-width:unset}
    .nutrient_week .table table,
    .nutrient_week .table thead,
    .nutrient_week .table tbody,
    .nutrient_week .table tr,
    .nutrient_week .table th,
    .nutrient_week .table td{display:block;width:100%}
    .nutrient_week .table thead,
    .nutrient_week .table colgroup{display:none}
    .nutrient_week .table tr{border:1px solid #eee;border-radius:8px;margin-bottom:12px;padding:10px;background:#fff}
    .nutrient_week .table td{display:flex;gap:8px;padding:6px 0;border:0}
    .nutrient_week .table td:before{content:attr(data-label);flex:0 0 90px;font-weight:600;color:#666}
    .nutrient_week .table td>*{flex:1}
}

/* mobile */
@media (max-width:640px){
    .nutrient_week .controls{flex-wrap: nowrap;gap:6px}
    .nutrient_week .month-picker{width:100%;text-align:center}
    .nutrient_week .calendar-container{padding:6px}
    .nutrient_week .calendar{gap:6px}
    .nutrient_week .day{flex:0 0 42px;height:60px;font-size:12px}
    .nutrient_week .month-divider{flex:0 0 60px;font-size:14px}
    .nutrient_week .accordion-header{font-size:14px;flex-wrap:wrap}
    .nutrient_week .accordion-header .btn{margin-left:0}
    .nutrient_week .accordion.active .accordion-content{max-height:600px}
    .nutrient_week .accordion li{gap: 2px}
    .nutrient_week .accordion textarea{height:60px;font-size:14px}
    .nutrient_week .box_white > .panel:first-child{display: grid!important; grid-template-columns: repeat(3, 1fr)}
    .nutrient_week .panel .btn{width:100%}
    .nutrient_week .panel button.btn.btn_line.btn_h40.all-toggle {grid-column-end: 4;}
    .nutrient_week .panel button.btn.btn_color.btn_h40 {grid-column: 3 / 4;}
    .nutrient_week .table{overflow-x:auto}
}