.main {
      max-width: 1000px;
      /* keep top/side spacing and add extra bottom gap so footer doesn't overlap */
      margin: 20px auto 80px;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .header {
      background: #667eea;
      color: white;
      padding: 25px;
      border-radius: 8px;
      margin-bottom: 30px;
      text-align: center;
    }

    .header h2 {
      margin: 0;
      font-size: 28px;
      font-weight: bold;
    }

    .header p {
      margin: 10px 0 0 0;
      font-size: 14px;
      opacity: 0.9;
    }

    .form-section {
      background: #f9f9f9;
      padding: 25px;
      border-radius: 8px;
      margin-bottom: 25px;
      border-right: 4px solid #667eea;
    }

    .form-group {
      margin-bottom: 20px;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      align-items: flex-end;
    }

    .form-group label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-weight: bold;
      color: #333;
      flex: 1;
      min-width: 150px;
    }

    .form-group input,
    .form-group select {
      padding: 10px;
      border: 2px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      font-family: 'Amiri', serif;
      transition: border-color 0.3s;
    }

    /* Ensure date picker is visible and styled */
    input[type="date"] {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
      background: white;
      color: #333;
      padding: 8px;
      border: 2px solid #ddd;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 8px rgba(102, 126, 234, 0.2);
    }

    .button-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    button {
      padding: 12px 25px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: 'Amiri', serif;
      font-size: 16px;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .btn-calculate {
      background: #667eea;
      color: white;
      flex: 1;
      min-width: 150px;
    }

    .btn-calculate:hover {
      background: #5568d3;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .btn-month {
      background: #764ba2;
      color: white;
      flex: 1;
      min-width: 150px;
    }

    .btn-month:hover {
      background: #654089;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
    }

    .btn-year {
      background: #f093fb;
      color: white;
      flex: 1;
      min-width: 150px;
    }

    .btn-year:hover {
      background: #dd7fe6;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4);
    }

    .results-section {
      display: none;
      margin-top: 30px;
      /* ensure content has space above fixed footer */
      margin-bottom: 120px;
    }

    .results-section.active {
      display: block;
    }

    .result-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 25px;
      border-radius: 8px;
      margin-bottom: 20px;
      /* reveal animation */
      animation: mm-reveal 420ms cubic-bezier(.2,.9,.2,1) both;
    }

    @keyframes mm-reveal {
      0% { opacity: 0; transform: translateY(8px) scale(0.995); box-shadow: none; }
      60% { opacity: 1; transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 30px rgba(102,126,234,0.14); }
      100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    }

    .result-card h3 {
      margin-top: 0;
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }

    .result-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }

    .result-item {
      background: rgba(255, 255, 255, 0.15);
      padding: 15px;
      border-radius: 5px;
      border-right: 3px solid rgba(255, 255, 255, 0.5);
    }

    .result-item label {
      font-weight: bold;
      font-size: 12px;
      opacity: 0.8;
      display: block;
      margin-bottom: 5px;
    }

    .result-item .value {
      font-size: 20px;
      font-weight: bold;
    }

    .scorpio-indicator {
      padding: 20px;
      border-radius: 5px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
    }

    .scorpio-indicator.yes {
      background: #e74c3c;
      color: white;
    }

    .scorpio-indicator.no {
      background: #27ae60;
      color: white;
    }

    .mansion-details {
      background: rgba(255, 255, 255, 0.15);
      padding: 15px;
      border-radius: 5px;
      margin-top: 15px;
      border-right: 3px solid rgba(255, 255, 255, 0.5);
    }

    .mansion-details h4 {
      margin: 0 0 10px 0;
      font-size: 14px;
      opacity: 0.9;
    }

    .mansion-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      font-size: 14px;
    }

    .month-results {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
    }

    .month-results h4 {
      color: #333;
      margin-top: 0;
      border-bottom: 2px solid #667eea;
      padding-bottom: 10px;
    }

    .dates-list {
      display: grid;
      gap: 10px;
    }

    .date-item {
      background: #f9f9f9;
      padding: 12px;
      border-radius: 5px;
      border-right: 3px solid #667eea;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .date-item .date-value {
      font-weight: bold;
      font-size: 16px;
    }

    .no-results {
      text-align: center;
      color: #666;
      padding: 20px;
      background: #f0f0f0;
      border-radius: 5px;
      font-style: italic;
    }

    .info-box {
      background: #e8f4f8;
      border-right: 4px solid #3498db;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      color: #2c3e50;
      font-size: 14px;
      line-height: 1.6;
    }

    .info-box strong {
      display: block;
      margin-bottom: 8px;
      color: #2980b9;
    }

    .language-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: center;
    }

    .lang-btn {
      padding: 8px 16px;
      border: 2px solid #667eea;
      background: white;
      color: #667eea;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s;
    }

    .lang-btn.active {
      background: #667eea;
      color: white;
    }

    .lang-btn:hover {
      background: #667eea;
      color: white;
    }

    @media (max-width: 768px) {
      .form-group {
        flex-direction: column;
        gap: 10px;
      }

      .form-group label {
        min-width: 100%;
      }

      .result-grid {
        grid-template-columns: 1fr;
      }

      .header h2 {
        font-size: 20px;
      }

      .main {
        padding: 15px;
        /* smaller bottom gap on narrow screens */
        margin-bottom: 40px;
      }

      /* reduce results bottom spacing on small screens */
      .results-section { margin-bottom: 80px; }
    }

    .loading {
      text-align: center;
      padding: 20px;
      color: #667eea;
      font-weight: bold;
    }