:root{--bg:#fff;--muted:#6b7280;--text:#0f172a;--brand:#22c55e;--brand2:#06b6d4;--danger:#dc2626;--dangerbg:#fee2e2;--ring:0 0 0 2px rgba(6,182,212,.25)}
#milk-subscription-ui{color:var(--text);background:#fff;border-radius:16px;padding:16px;border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(0,0,0,.06);max-width:1000px;margin:0 auto}
#milk-subscription-ui h2{margin:8px 0 12px;font-size:20px}
.duration-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.duration-buttons button{border:1px solid #e5e7eb;background:#f9fafb;color:#0f172a;padding:10px 12px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
.duration-buttons button.active{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
.delivery-time{margin:6px 0 8px}
.delivery-time .dt-seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.delivery-time .dt-option{border:1px solid #e5e7eb;padding:6px 10px;border-radius:10px;background:#fff;cursor:pointer}
.delivery-time input{margin-right:6px}
.apply-litres{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.apply-litres .seg{display:flex;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.apply-litres .seg-scroll{overflow-x:auto;gap:4px;padding:2px}
.apply-litres .seg button{padding:8px 12px;border:0;background:#fff;cursor:pointer;font-weight:700;white-space:nowrap}
.apply-litres .seg button:hover{background:#f3f4f6}
.calendar-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.month-block{min-width:720px;margin-bottom:14px}
.month-title{font-weight:800;margin:6px 2px;color:#111827}
.calendar-shell{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px}
.calendar-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;transition:transform .1s,box-shadow .12s,border-color .12s,background .2s}
.cal-cell.past{background:var(--dangerbg);border-color:#fecaca;color:var(--danger)}
.cal-cell.selected{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--brand),var(--brand2)) border-box;border:2px solid transparent;box-shadow:var(--ring)}
.cal-date{font-weight:800;font-size:13px;margin-bottom:6px}
.cal-date small{display:block;margin-top:2px;font-weight:600;color:#0f172a}
.litre-input{width:64px;background:#fff;border:1px solid #d1d5db;color:#0f172a;padding:6px 8px;border-radius:10px;font-weight:700;text-align:center;font-size:14px}
.litre-input:disabled{opacity:.6;cursor:not-allowed}
.total-price{margin-top:12px;font-weight:900;font-size:16px;color:#0f172a}
.wallet-hint{margin-top:6px;color:#475569}
@media (max-width:640px){
  .calendar-head{grid-template-columns:repeat(5,1fr)}
  .calendar-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:480px){
  #milk-subscription-ui{padding:12px}
  .apply-litres{flex-wrap:wrap;gap:8px}
  .month-block{min-width:0}
  .calendar-head{grid-template-columns:repeat(4,1fr)}
  .calendar-grid{grid-template-columns:repeat(4,1fr)}
  .cal-cell{min-height:70px;padding:6px}
  .litre-input{width:58px;font-size:13px}
}