:root{
      --bg-grad-1:#0ea5ea;
      --bg-grad-2:#4f46e5;
      --card-radius:1.25rem;
    }
    body{
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(14,165,234,.25), transparent 40%),
        radial-gradient(1000px 500px at 110% -10%, rgba(79,70,229,.25), transparent 40%),
         #668DBC ;
      color: #0f172a;
      min-height: 100dvh;
    }
    @media (prefers-color-scheme: dark){
      body{ color:#e5e7eb; }
    }
      .page-wrap{ max-width: 1100px; }
      .glass { background: rgba(255,255,255,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.35); border-radius: var(--card-radius); box-shadow: 0 10px 30px rgba(2,6,23,.15); } @media (prefers-color-scheme: dark){ .glass{ background: rgba(17,24,39,.6); border-color: rgba(255,255,255,.08); } }
      .glass2 {
          background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.45)); 
          background-size: cover;
          background-position: center;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,.35);
          border-radius: var(--card-radius);
          box-shadow: 0 10px 30px rgba(2,6,23,.15);
      }
      .app-header {
          background: linear-gradient(135deg, #007A3D 0%, #000000 33%,#FFFFFF 66%, #CE1126 100%);
          color: white;
          border-radius: 1.5rem;
          box-shadow: 0 10px 25px rgba(0,0,0,0.35);
          position: relative;
          overflow: hidden;
	  }
      .app-header::after {
          content: '';
          position: absolute;
          top: 0; left: -75%;
          width: 50%; height: 100%;
          background: rgba(255,255,255,0.2);
          transform: skewX(-25deg);
          animation: shine 4s infinite;
      }
      @keyframes shine {
          0% { left: -75%; }
          50% { left: 125%; }
          100% { left: 125%; }
      }
      .app-header h1 {
          font-weight: 700;
          letter-spacing: 1px;
          text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
      }
      .app-header p {
          text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      }
      .info-header {
          background: linear-gradient(135deg, #007A3D 0%, #000000 33%,#FFFFFF 66%, #CE1126 100%);
          color: white;
          
          box-shadow: 0 10px 25px rgba(0,0,0,0.35);
          position: relative;
          overflow: hidden;
	  }
      .info-header::after {
          content: '';
          position: absolute;
          top: 0; left: -75%;
          width: 50%; height: 100%;
          background: rgba(255,255,255,0.2);
          transform: skewX(-25deg);
          animation: shine 4s infinite;
      }
      @keyframes shine {
          0% { left: -75%; }
          50% { left: 125%; }
          100% { left: 125%; }
      }
      .info-header h1 {
          font-weight: 700;
          letter-spacing: 1px;
          text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
      }
      .info-header p {
          text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      }
      #last-updated {
          backdrop-filter: blur(6px);
          background: rgba(255,255,255,0.85) !important;
          border-radius: 1rem;
      }
	  .stat-card{
      border-radius: var(--card-radius);
      padding: 1rem;
      transition: transform .15s ease, box-shadow .15s ease;
      }
      .stat-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(2,6,23,.15); }
      .stat-title{ font-size:.9rem; opacity:.8; margin:0; }
      .stat-value{ font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 800; letter-spacing:.3px; }
      .control-label{ font-weight:600; }
      .range-value-badge {
          min-width: 62px; text-align:center; font-variant-numeric: tabular-nums;
    }
      .dinamic {
          font-weight: bold;
          background: linear-gradient(135deg, #007A3D 0%, #000000 33%, #FFFFFF 66%, #CE1126 100%);
          background-size: 200% 100%;
          background-clip: text;
          -webkit-background-clip: text; 
          color: transparent;
          animation: shimmer 5.2s infinite;
      }
      @keyframes shimmer{ 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }
      hr{ opacity:.12; }
      .bg_blue {
          background-color: #78A5DC;
	  }
      .footer-info {
          background-color: aliceblue;
          border-radius: 5px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
      }
      .info-link {
          text-decoration: none;
          font-weight: bold;
          color: #007A3D;
      }
      .info-link:hover {
          text-decoration: underline;
          color: #CE1126;
      }
     .btn-camera {
            background: linear-gradient(135deg, #0dcaf0, #0aa2c0);  
            border: none;
            color: white;
            font-size: 1.7rem;
            padding-right: 10px;
            padding-left: 10px;
            border-radius: 30%; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            ransition: all 0.3s ease;
        }
        .btn-camera:hover {
            background: linear-gradient(135deg, #0aa2c0, #0dcaf0);
            transform: scale(1.1);
            box-shadow: 0 3px 7px rgba(0,0,0,0.3);
        }  
        .btn-graph {
            background: linear-gradient(135deg, #0dcaf0, #0aa2c0);  
            border: none;
            color: white;
            font-size: 1.7rem;
            padding-right: 10px;
            padding-left: 10px;
            border-radius: 30%; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            ransition: all 0.3s ease;
        }
        .btn-graph:hover {
            background: linear-gradient(135deg, #0aa2c0, #0dcaf0);
            transform: scale(1.1);
            box-shadow: 0 3px 7px rgba(0,0,0,0.3);
        }   
        .mobile-plusminus{ position:relative; width:100%; }
        .mobile-plusminus input{ width:100%; }
        .mobile-only{ display:none; }
        @media (max-width: 767.98px){
            .mobile-plusminus .mobile-only{ display:block; }
            .mobile-plusminus button{
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                z-index:2;
                width:2.5rem;
                height:2.5rem;
                padding:0;
                line-height:1;
            }
            .mobile-plusminus #minus-day{ left:.375rem; }
            .mobile-plusminus #plus-day { right:.375rem; }
            .mobile-plusminus input{
                padding-left:3rem;  
                padding-right:3rem;  
                text-align:center;
            }
            .mobile-plusminus input::-webkit-outer-spin-button,
            .mobile-plusminus input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
            .mobile-plusminus input[type=number]{ -moz-appearance: textfield; }
        }
        .day{
            height:25px;
            padding-top: 3px;
            font-size: 15px;
        }
        .icon-btn {
            background: none;
            border: none;
            padding: 0;
            line-height: 1;
            color: #6c757d;   
        }
        .icon-btn i {
            font-size: 1.8rem;    
        }
        .icon-btn:hover i {
            color: #000;               
        }
        .chart-viewport{
            height: 60vh;
            width: 100%;
        }
        #trendChart {
            width: 100% !important;
            height: 100% !important;
        }
        #trendChartWB {
            width: 100% !important;
            height: 100% !important;
        }
       #day-range{
        -webkit-appearance:none; appearance:none;
        width:420px; height:16px; border-radius:999px; outline:none;
        background:#e5e7eb;
        border:1px solid rgba(255,255,255,.18);
        box-shadow: inset 0 0 0 6px rgba(255,255,255,.06),
                    0 10px 30px rgba(2,6,23,.12);
        backdrop-filter: blur(6px);
      }

       #day-range::-webkit-slider-thumb{
        -webkit-appearance:none; appearance:none;
        width:22px; height:22px; border-radius:50%;
        background: radial-gradient(circle at 35% 35%, #fff, #ddd 40%, #bbb 70%);
        border:2px solid #fff;
        box-shadow:0 0 18px rgba(255,80,80,.45), 0 0 36px rgba(255,120,60,.25);
        cursor:pointer;
        position:relative; z-index:2;
      }
       #day-range::-moz-range-thumb{
        width:22px; height:22px; border-radius:50%;
        background: radial-gradient(circle at 35% 35%, #fff, #ddd 40%, #bbb 70%);
        border:2px solid #fff;
        box-shadow:0 0 18px rgba(255,80,80,.45), 0 0 36px rgba(255,120,60,.25);
        cursor:pointer;
        position:relative; z-index:2;
      }
      #day-range::-moz-range-track{ background: transparent; }
      #day-range::-moz-range-progress{ background: transparent; }
input[type=range] {
  -webkit-appearance: none; 
  width: 100%;
  background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}
input[type=range]::-moz-range-track {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0d6efd;
  border: 2px solid white;
  margin-top: -6px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0d6efd;
  border: 2px solid white;
  cursor: pointer;
}


input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.2);
}
input[type=range]::-moz-range-thumb:active {
  transform: scale(1.2);
}