/* Variables */
    :root {
      --clr-bg: #f5f7fa;
      --clr-card: #ffffff;
      --clr-primary: #4f86f7;
      --clr-primary-hover: #3e6fd1;
      --clr-text: #333333;
      --clr-muted: #777777;
      --radius: 10px;
      --transition: 0.3s ease;
    }

    /* Reset & Base */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: var(--clr-bg);
      color: var(--clr-text);
      line-height: 1.5;
      padding: 2rem;
      direction: rtl;
    }

    /* Container card */
    .container {
      max-width: 480px;
      margin: 0 auto;
      background: var(--clr-card);
      border-radius: var(--radius);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    /* Header */
    .header {
      background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-hover));
      color: #fff;
      text-align: center;
      padding: 1.5rem 1rem;
    }
    .header h1 {
      font-size: 1.6rem;
      letter-spacing: 1px;
    }

    /* Form */
    .form {
      padding: 1.5rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .form label {
      font-weight: bold;
      font-size: 0.95rem;
      color: var(--clr-muted);
    }
    .form select,
    .form input[type="number"] {
      width: 100%;
      padding: 0.6rem;
      border: 1px solid #ccc;
      border-radius: var(--radius);
      font-size: 1rem;
      transition: border-color var(--transition);
    }
    .form select:focus,
    .form input[type="number"]:focus {
      outline: none;
      border-color: var(--clr-primary);
    }

    /* Button */
    .btn {
      display: block;
      width: 100%;
      padding: 0.75rem;
      font-size: 1rem;
      text-align: center;
      background: var(--clr-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background var(--transition), transform var(--transition);
    }
    .btn:hover {
      background: var(--clr-primary-hover);
      transform: translateY(-2px);
    }
    .btn:active {
      transform: translateY(0);
    }

    /* Result */
    .result {
      margin: 1.5rem;
      padding: 1rem;
      text-align: center;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: var(--radius);
      transition: background var(--transition), color var(--transition);
    }
    .rainy {
      background: rgba(79, 134, 247, 0.15);
      color: var(--clr-primary-hover);
    }
    .dry {
      background: rgba(255, 212, 38, 0.15);
      color: #b38f00;
    }
    .unc {
      background: rgba(128, 128, 128, 0.15);
      color: var(--clr-muted);
    }

    /* Responsive */
    @media (max-width: 500px) {
      .header h1 {
        font-size: 1.4rem;
      }
      .form {
        gap: 0.8rem;
      }
    }