:root {
      --clr-card: rgba(255,255,255,0.67);
      --clr-luxshadow: 0 12px 42px 4px #8fe7fe1e;
      --clr-arrow: #5acef9;
      --clr-arrow-inactive: #dbe7f5;
    }
    html, body {
      min-height: 100vh; margin: 0; padding: 0;
      background: linear-gradient(120deg, #eefaff 0%, #dde1f7 62%, #ecfbfa 100%);
      color: #233e4e; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; width:100vw;
    }
    header {text-align:center;padding:34px 0 5px;}
    h1 {
      font-family:'Montserrat',sans-serif;font-size:2.13rem;font-weight:900;margin-bottom:7px;letter-spacing:.07em;
      background: linear-gradient(91deg, #289ecf 7%, #2bd2be 55%, #e5c384 95%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      filter: drop-shadow(0 1px 0 #fff6);
    }
    .dashboard {
      display:flex; flex-direction:column; align-items: center; width: 100%; max-width: 980px;
      background: var(--clr-card); border-radius: 36px; box-shadow: var(--clr-luxshadow);
      padding: 2em 2em 2.5em 2em; margin-bottom: 36px; margin-top: 1.3em;
    }
    .select-row {
      display: flex; align-items:center; justify-content:center; gap:21px; margin:auto; width:100%;
      background:rgba(255,255,255,0.46); border-radius:24px; padding:12px 14px 14px 14px; margin-bottom:22px;
      box-shadow:0 2px 14px #beecfb46;max-width:600px;
    }
    .timeline-arrow {
      width:38px;height:54px;display:flex;align-items:center;justify-content:center;
      font-size:2.7em; cursor:pointer; user-select: none;
      color: var(--clr-arrow); transition: color .15s;
    }
    .timeline-arrow.inactive { color: var(--clr-arrow-inactive); cursor:not-allowed; opacity:0.5;}
    .tag-select {
      min-width:170px;font-size:1.14em;padding:10px 22px;border-radius:13px;background:#e5f7f7;box-shadow:0 1px 11px #eaf8fd23;
      font-weight:600;color:#279fa1;border:1.9px solid #aaf2ed; appearance:none;text-align:center;
    }
.flex-row {
      display: flex; gap: 60px; margin-bottom: 26px; justify-content:center;
      width:100%;
    }
    .stat-card {
      background: linear-gradient(120deg,#ecf5f6 70%, #f2e0fb90 100%);
      box-shadow: 0 2px 19px #b8eef7b0;
      border-radius: 25px; min-width: 230px; max-width: 340px; text-align:center;
      padding:35px 0 24px 0;flex:1;
      display:flex; flex-direction:column; align-items:center;justify-content:center; border:2px solid #e6ecf6;
      margin:0 12px; animation: cardsIn .55s cubic-bezier(.34,1.56,.64,1) 1;
    }
    @keyframes cardsIn {from{transform:scale(0.88) translateY(22px); opacity:0.33;}to{transform:scale(1) translateY(0); opacity:1;}
    }
    .stat-card .icon { font-size:2.58em; margin-bottom:7px;}
    .stat-card .desc {font-size:1.23em; color:#1eceb6; margin-bottom:6px;font-weight:600;}
    .stat-card .bigval {
      font-family:'Montserrat',sans-serif;font-size:1.52em;font-weight:900;margin-bottom:0;margin-top:7px;color:#224775; letter-spacing:.09em;
      background: linear-gradient(81deg, #46e4b6 16%, #E3B66B 86%);
      -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;
    }
    .stat-card .tiny {font-size: 1.03em; color:#7890a1;margin-top:11px;font-weight: 400;}
    .timeline-box {
      background:rgba(249,253,252,0.78); border-radius:20px; box-shadow:0 2px 12px #b6f4f688;
      margin: 1em 0 .9em 0; padding:.9em 2em;
      display:flex;align-items:center;justify-content:center; max-width:900px; min-height:90px;
      overflow-x: auto; scrollbar-width:thin;
      overflow-y: hidden; height: 124px; position: relative;
    }
    .timeline-content { display: flex;align-items: center; gap: 1.5em; justify-content:center; flex:1; }
    .time-bullet {
      min-width:52px;width:60px;text-align:center;position:relative;cursor:pointer;
      display: flex; flex-direction:column; align-items:center;
    }
    .time-bullet-circle {
      width:19px;height:19px;border-radius:50%;background:linear-gradient(130deg,#70e5ce 60%,#edda97 170%);
      border:2.5px solid #def1ff; display:inline-block;box-shadow:0 1px 5px #cdf7cc77;
      margin-bottom:6px; transition:.16s;}
    .time-bullet.active .time-bullet-circle {
      border:2.5px solid #e3b66a;background:linear-gradient(130deg,#f7d27b 60%,#43e3e2 170%);
      box-shadow:0 4px 12px #ffe69166;
    }
 .time-bullet-value { font-size:1.19em; font-weight:700; color:#1e7696; margin-bottom: -1px; }
    .time-bullet-time {font-size:1.07em;color:#8391a3;}
    .time-bullet.selected .time-bullet-circle { border:2.5px solid #79f5ab; background:linear-gradient(130deg,#a5ffef 60%,#fffaa9 170%);}
    .chart-block {
      background:rgba(243,255,250,0.87);border-radius:18px; margin:18px 0 0 0; padding:1.25em .25em .89em .25em;
      box-shadow:0 2px 13px #c7fadd29;
      width:100%;max-width:820px;box-sizing: border-box;display: flex; flex-direction: column; align-items: center;
    }
    canvas {width:100% !important;max-width:700px!important;max-height:205px!important;}
    .chart-legend .legend-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: middle;}
    .dot-temp { background: #ff0000; }
    .dot-hum { background: #4E7BE7; }
    .subtitle { color:#549199;font-size:1.17em;font-weight:500;letter-spacing:.01em;margin-bottom: 1.09em;}