body {
      font-family: 'Roboto', Arial, sans-serif;
      background: linear-gradient(180deg,#081226 0%,#071221 55%,#031421 100%);
      color: #e6eef6;
      text-align: center;
      padding: 20px;
    }
    .container {
      max-width: 850px;
      margin: auto;
      background: rgba(255,255,255,0.05);
      padding: 20px;
      border-radius: 12px;
    }
    input, button, select {
      padding: 10px;
      margin: 5px;
      border-radius: 6px;
      border: none;
    }
    input {
      width: 200px;
    }
    button {
      background: #60a5fa;
      color: #021022;
      font-weight: bold;
      cursor: pointer;
    }
    #forecast {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .day {
      background: rgba(255,255,255,0.08);
      padding: 10px;
      border-radius: 10px;
      width: 130px;
      transition: 0.3s ease;
    }
    .day:hover {
      background: rgba(255,255,255,0.15);
      transform: scale(1.05);
    }
    canvas {
      margin-top: 20px;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
    }
    #loading {
      margin-top: 10px;
      font-style: italic;
      color: #60a5fa;
    }