* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { color: #383b33; background: #f7f0e6; font: 17px Arial, Helvetica, sans-serif; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
.screen { height: 100vh; min-height: 650px; padding: 26px 36px 22px; display: flex; flex-direction: column; }
.masthead { flex: 0 0 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; }
.brand-mark { width: 51px; height: 51px; padding: 10px; background: #e8886c; color: #fffaf2; border-radius: 15px; margin-right: 15px; transform: rotate(-4deg); }
.brand-mark svg { width: 31px; height: 31px; }
h1 { font-size: 27px; letter-spacing: 1px; }
.brand p { margin-top: 5px; font-size: 16px; color: #7a6f60; }
.date-time { display: flex; align-items: center; }
.date-time > p { font-size: 19px; margin-right: 24px; }
.date-time > div { padding-left: 24px; border-left: 1px solid #d8cdbc; }
#clock { font-size: 40px; font-weight: bold; letter-spacing: -1px; }
.date-time span { margin-left: 8px; color: #7a6f60; font-size: 14px; }
.overview { flex: 1 1 auto; min-height: 0; display: flex; margin-top: 18px; }
.finance { flex: 7 1 0; min-width: 0; display: flex; flex-direction: column; padding-right: 28px; }
.totals { display: flex; align-items: center; flex: 0 0 112px; background: #2e6358; color: #fffaf2; padding: 22px 24px; border-radius: 17px; }
.totals h2 { font-size: 17px; font-weight: normal; color: #deeadf; }
.balance { width: 40%; }
.balance p { font-size: 42px; margin-top: 7px; font-weight: bold; letter-spacing: -1.5px; white-space: nowrap; }
.total { width: 30%; border-left: 1px solid #678a7d; padding-left: 20px; }
.total p { font-size: 27px; margin-top: 7px; font-weight: bold; white-space: nowrap; }
.total span { display: block; font-size: 12px; margin-top: 6px; color: #deeadf; }
.trend { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 21px; }
.trend-head { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { font-size: 12px; font-weight: bold; letter-spacing: 1.5px; color: #a15e41; margin-bottom: 6px; }
h2 { font-size: 22px; letter-spacing: -.3px; }
.electric-latest { text-align: right; }
.electric-latest strong { font-size: 26px; color: #b96842; }
.electric-latest span { display: block; margin-top: 4px; color: #7a6f60; font-size: 14px; }
.chart-legend { display: flex; align-items: center; margin-top: 12px; color: #746b5e; font-size: 15px; }
.chart-legend > span { margin-right: 20px; }
.chart-legend i, .track-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 7px; }
.electric-key { background: #ce7b50; }
.other-key { background: #dfd7c8; }
.chart-legend .chart-unit { margin-left: auto; margin-right: 0; font-size: 13px; }
.chart-wrap { flex: 1 1 auto; min-height: 0; margin-top: 5px; }
#expense-chart { display: block; width: 100%; height: 100%; }
.chart-note { font-size: 12px; color: #786f62; padding-top: 2px; padding-bottom: 12px; }
.finance-bottom { display: flex; flex: 0 0 139px; border-top: 1px solid #ded3c3; padding-top: 14px; }
.month-summary { flex: 1 1 0; min-width: 0; padding-right: 25px; }
.finance-bottom h2 { font-size: 18px; }
.month-spend { font-size: 28px; margin: 7px 0; font-weight: bold; letter-spacing: -.6px; }
.category-bar { height: 6px; width: 100%; display: flex; overflow: hidden; border-radius: 3px; background: #e4d9c9; }
.category-bar span { display: block; height: 6px; }
.categories { display: flex; flex-wrap: wrap; margin-top: 7px; font-size: 14px; line-height: 1.5; }
.categories span { margin-right: 13px; white-space: nowrap; }
.categories i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; }
.recent { flex: 1 1 0; min-width: 0; border-left: 1px solid #ded3c3; padding-left: 24px; }
.recent ol { list-style: none; margin-top: 8px; }
.recent li { display: flex; align-items: baseline; justify-content: space-between; font-size: 16px; padding: 4px 0; }
.recent-name { min-width: 0; margin-right: 8px; }
.recent-date { font-size: 12px; color: #786f62; margin-right: 7px; }
.recent-amount { font-weight: bold; font-size: 15px; white-space: nowrap; }
.residents { flex: 0 0 58px; display: flex; align-items: center; border-top: 1px solid #ded3c3; }
.residents > span { flex: 0 0 88px; color: #7a6f60; font-size: 14px; }
.residents ul { display: flex; flex-wrap: wrap; flex: 1; list-style: none; }
.residents li { width: 16.666%; font-size: 16px; line-height: 1.65; }
.jemuran { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; background: #fffaf2; border: 1px solid #e6dccc; border-radius: 19px; padding: 20px 19px 12px; }
.ai-heading { flex: 0 0 51px; display: flex; align-items: center; justify-content: space-between; }
.ai-heading .eyebrow { font-size: 13px; color: #2e6358; }
.ai-heading h2 { font-size: 27px; font-weight: normal; }
.mascot { width: 67px; height: 58px; margin-top: -7px; }
.mode { flex: 0 0 25px; padding-top: 9px; font-size: 12px; letter-spacing: .7px; font-weight: bold; color: #746b5e; }
.dial-wrap { flex: 1 1 auto; min-height: 190px; position: relative; }
#drying-clock { width: 100%; height: 100%; display: block; }
.track-legend { display: flex; justify-content: space-between; align-items: center; flex: 0 0 23px; font-size: 14px; }
.track-legend small { font-size: 12px; color: #7a6f60; }
.lt1-key { background: #c98b65; }
.lt2-key { background: #3c8170; }
.rain-key { background: #96b5cb; }
.progress-key { font-size: 12px; color: #7a6f60; text-align: center; padding: 4px 0 11px; }
.wash-plan { flex: 0 0 47px; display: flex; align-items: center; border-top: 1px solid #e7dece; padding-top: 9px; margin-bottom: 10px; }
.wash-icon { display: block; margin-right: 12px; font-size: 30px; color: #8d867a; }
.wash-plan p { font-size: 14px; }
.wash-plan span:not(.wash-icon) { display: block; font-size: 12px; color: #7a6f60; margin-top: 4px; }
.recommendation { flex: 0 0 93px; border-radius: 11px; padding: 12px 14px; background: #edf0e5; }
.recommendation.caution { background: #f4e7d5; }
.recommendation.waiting { background: #efece5; }
#recommend-label { font-size: 11px; color: #64705d; letter-spacing: .8px; }
#recommend-floor { font-size: 26px; margin: 4px 0; color: #315f50; font-weight: normal; }
#recommend-note { font-size: 14px; line-height: 1.3; }
.weather-status { font-size: 11px; line-height: 1.3; color: #7a6f60; padding-top: 9px; min-height: 23px; }
footer { flex: 0 0 29px; display: flex; align-items: flex-end; justify-content: space-between; font-size: 12px; color: #7a6f60; }
.load-error { position: absolute; top: 110px; left: 36px; right: 36px; padding: 20px; background: #fffaf2; }
@media (max-width: 1300px) {
  .screen { padding-left: 30px; padding-right: 30px; }
  .finance { padding-right: 23px; }
  .totals { padding-left: 20px; padding-right: 18px; }
  .balance p { font-size: 39px; }
  .total { padding-left: 15px; }
  .total p { font-size: 25px; }
  .total span { font-size: 11px; }
  .jemuran { padding-left: 15px; padding-right: 15px; }
  .track-legend small { display: none; }
  .recent { padding-left: 18px; }
  .month-summary { padding-right: 18px; }
  .recent li { font-size: 15px; }
}
@media (max-height: 710px) {
  .screen { padding-top: 22px; padding-bottom: 20px; }
  .masthead { flex-basis: 57px; }
  .overview { margin-top: 12px; }
  .totals { flex-basis: 98px; padding-top: 16px; padding-bottom: 16px; }
  .trend { padding-top: 13px; }
  .finance-bottom { flex-basis: 128px; padding-top: 10px; }
  .residents { flex-basis: 54px; }
  .jemuran { padding-top: 14px; padding-bottom: 10px; }
  .ai-heading { flex-basis: 44px; }
  .ai-heading h2 { font-size: 24px; }
  .recommendation { flex-basis: 83px; padding: 9px 12px; }
  #recommend-floor { font-size: 23px; }
  .progress-key { padding-bottom: 5px; }
  .wash-plan { margin-bottom: 7px; flex-basis: 43px; }
}
@media (min-width: 1600px) and (min-height: 900px) {
  .screen { padding: 38px 50px 30px; }
  .masthead { flex-basis: 85px; }
  h1 { font-size: 36px; }
  .brand p { font-size: 21px; }
  #clock { font-size: 55px; }
  .date-time > p { font-size: 25px; }
  .overview { margin-top: 25px; }
  .finance { padding-right: 40px; }
  .totals { flex-basis: 155px; padding: 30px; }
  .totals h2 { font-size: 23px; }
  .balance p { font-size: 58px; }
  .total p { font-size: 37px; }
  .total span { font-size: 16px; }
  .trend { padding-top: 28px; }
  h2 { font-size: 30px; }
  .eyebrow { font-size: 16px; }
  .electric-latest strong { font-size: 35px; }
  .electric-latest span, .chart-legend { font-size: 20px; }
  .chart-legend .chart-unit, .chart-note { font-size: 17px; }
  .finance-bottom { flex-basis: 180px; padding-top: 20px; }
  .finance-bottom h2 { font-size: 25px; }
  .month-spend { font-size: 38px; }
  .categories { font-size: 19px; }
  .recent li { font-size: 22px; padding: 6px 0; }
  .recent-date { font-size: 16px; }
  .recent-amount { font-size: 21px; }
  .residents { flex-basis: 80px; }
  .residents > span { font-size: 19px; flex-basis: 120px; }
  .residents li { font-size: 22px; }
  .jemuran { padding: 27px 25px 17px; }
  .ai-heading { flex-basis: 69px; }
  .ai-heading .eyebrow { font-size: 18px; }
  .ai-heading h2 { font-size: 37px; }
  .mascot { width: 90px; height: 78px; }
  .mode { font-size: 16px; flex-basis: 34px; }
  .track-legend { font-size: 19px; flex-basis: 30px; }
  .track-legend small, .progress-key { font-size: 16px; }
  .wash-plan { flex-basis: 65px; }
  .wash-plan p { font-size: 19px; }
  .wash-plan span:not(.wash-icon) { font-size: 16px; }
  .recommendation { flex-basis: 121px; padding: 17px 19px; }
  #recommend-label { font-size: 14px; }
  #recommend-floor { font-size: 35px; }
  #recommend-note { font-size: 19px; }
  .weather-status { font-size: 15px; }
  footer { flex-basis: 37px; font-size: 16px; }
}