body {
            margin: 0;
            font-family: sans-serif;
            background: var(--bg);
            color: var(--text);
            opacity: 0;
        }

        .container {
            padding: 15px;
            max-width: 800px;
            margin: auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            height: 115px;
            flex-direction: column;
            align-items: center;
        }

        .header h1 {
            margin: 0;

        }
        
        .logo{
            width: 30px;
            height: 30px;
        }

        .controls {
            display: flex;
            gap: 5px;
        }

        button {
            border: none;
            padding: 8px 12px;
            border-radius: 8px;
            background: var(--card);
            color: var(--text);
            cursor: pointer;
            width: 55px;
            height: 55px;
            margin-top: 10px;
        }

        button.active {
            background: #3b82f6;
            color: #fff;
        }
    .main-card {
           border-radius: 15px;
  padding: 10px;
  text-align: center;
  background: #121a2b;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
        }

        .main-temp {
            font-size: 40px;
            font-weight: bold;
        }

        .icon-state{
            max-width:150px;
        }

        .row {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 10px;
        }

        .warnings-box{
            background-color: #ff4d4d;
           
            border-radius: 15px;
        }

        .warning-title{
             padding: 10px;
            font-size: 16px;
            text-align: center;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .warning-text{
            text-align: center;
            margin-bottom: 10px;
        }
        .card {
            flex: 1;
            background: var(--card);
            border-radius: 15px;
            padding: 12px;
            text-align: center;
        }
        .card img{
            width: 45px;
  height: 45px;
  padding: 0;

        }

        .forecast-box{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            overflow-y: auto;
            height: 130px;
        }

.forecast-box p{
    margin: 3px;
}

            .forecast-element{
                display: flex;
                flex-direction: column;
            }
            .forecast-time{
                font-size: 12px;
                height: 30px;
            }

            .forecast-desc{
                display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
            .forecast-box .forecast-temp{
                margin-top: 10px;
                width: 50px;
            }


        .chart-box {
            background: var(--card);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            padding-bottom: 50px;
            height: 220px;
        }

        canvas {
            width: 100% !important;
            height: 100% !important;
        }

        small {
            opacity: 0.7;
        }

        .overheat {
            background: radial-gradient(circle,#ff4d4d , #ff7b7b);
        }

        .overcold {
            background: radial-gradient(circle,#0866ff,#3b82f6);
        }

        .normal {
            background: radial-gradient(circle,#50950b , #5ba81c);
        }
   
   .placeholder{
       text-align:center;
       align-content: center;
       width:100%;
       height: 100px;
       color: gray;
   }