:root {
      --primary-color: #5e72e4; /* Indigo */
      --secondary-color: #f5365c; /* Pink/Red */
      --gradient-start: #5e72e4;
      --gradient-end: #825ee4;
      --background-color: #f4f5f7; /* Slightly different gray */
      --card-background: #ffffff;
      --text-color: #32325d; /* Darker text */
      --label-color: #525f7f; /* Muted label */
      --border-color: #e9ecef;
      --shadow-color: rgba(0, 0, 0, 0.06);
      --shadow-hover-color: rgba(0, 0, 0, 0.1);
      --font-family: 'Poppins', sans-serif;
      --border-radius: 10px; /* Slightly more rounded */
      --icon-color: #adb5bd;
    }

    body {
      font-family: var(--font-family);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      background: linear-gradient(135deg, var(--background-color) 0%, #e9ecef 100%); /* Subtle gradient background */
      margin: 0;
      padding: 30px 20px; /* More padding */
      box-sizing: border-box;
    }

    .calculator-container {
      background-color: var(--card-background);
      padding: 35px 45px;
      border-radius: var(--border-radius);
      box-shadow: 0 7px 30px -10px var(--shadow-color);
      width: 100%;
      max-width: 700px; /* Wider */
      margin-top: 30px;
      transition: all 0.3s ease-in-out;
      border-top: 4px solid var(--primary-color); /* Accent border */
    }

    header {
      text-align: center;
      margin-bottom: 35px;
      position: relative; /* For icon positioning */
    }

    .header-icon {
      display: inline-block;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 50px; /* Center icon vertically */
      font-size: 1.5rem;
      margin-bottom: 15px;
      box-shadow: 0 4px 10px rgba(94, 114, 228, 0.4);
    }

    header h1 {
      color: var(--text-color);
      margin: 0 0 8px 0;
      font-weight: 700; /* Bolder */
      font-size: 1.8rem;
    }

    header p {
      color: var(--label-color);
      font-size: 1rem;
      margin: 0;
    }

    /* Section Titles */
    .input-section h2,
    .results-section h2 {
      text-align: center;
      color: var(--text-color);
      margin-bottom: 30px;
      font-weight: 600;
      font-size: 1.5rem;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 15px;
    }

    /* Icons */
    .icon-left {
      margin-right: 10px;
      color: var(--primary-color);
      opacity: 0.8;
    }
    .icon-label {
      margin-right: 6px;
      color: var(--icon-color);
      width: 1em; /* Ensure consistent spacing */
      text-align: center;
    }

    .input-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 25px; /* Increased gap */
      margin-bottom: 30px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
    }

    .input-group label {
      margin-bottom: 10px; /* More space */
      color: var(--label-color);
      font-weight: 600; /* Slightly bolder labels */
      font-size: 0.9rem;
      display: flex; /* Align icon and text */
      align-items: center;
    }

    .input-group input[type="number"] {
      padding: 12px 15px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 1rem;
      font-family: var(--font-family);
      box-sizing: border-box;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      color: var(--text-color);
    }
     /* Remove spinners from number inputs */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type=number] {
      -moz-appearance: textfield; /* Firefox */
    }


    .input-group input[type="number"]:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15);
    }

    .input-group input::placeholder {
      color: #adb5bd;
      font-style: normal;
      font-size: 0.95rem;
    }

    /* Slider Styles */
    .slider-group label {
      display: flex;
      justify-content: space-between; /* Push value span to the right */
      align-items: center;
      width: 100%;
    }

    .slider-value {
      font-weight: 600;
      color: var(--primary-color);
      background-color: #f4f5f7;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.85rem;
    }

    .slider-input-combo {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between slider and number input */
    }

    .slider-input-combo input[type="range"] {
        flex-grow: 1; /* Slider takes available space */
        margin-top: 5px; /* Align better with label */
    }
     .slider-input-combo input[type="number"] {
        width: 70px; /* Fixed width for the number input */
        text-align: right;
        padding-right: 5px;
     }


    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      background: var(--border-color);
      border-radius: 5px;
      cursor: pointer;
      outline: none;
      transition: background 0.3s ease;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      background: var(--primary-color);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
      transition: background 0.3s ease;
    }

    input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      background: var(--primary-color);
      border-radius: 50%;
      cursor: pointer;
      border: none; /* Reset default border */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
      transition: background 0.3s ease;
    }

    input[type="range"]:hover::-webkit-slider-thumb {
      background: var(--gradient-end);
    }
    input[type="range"]:hover::-moz-range-thumb {
      background: var(--gradient-end);
    }


    /* Button */
    button {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: white;
      border: none;
      padding: 15px 30px; /* Larger padding */
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 600;
      font-family: var(--font-family);
      transition: all 0.3s ease;
      display: flex; /* Align icon */
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 15px;
      box-shadow: 0 4px 15px -5px rgba(94, 114, 228, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    button:hover {
      opacity: 0.95;
      box-shadow: 0 6px 20px -8px rgba(94, 114, 228, 0.7);
      transform: translateY(-2px);
    }
    button:active {
        transform: translateY(0);
        box-shadow: 0 4px 15px -5px rgba(94, 114, 228, 0.5);
    }

    button .icon-left {
        color: white; /* Icon color matches text */
        opacity: 1;
        margin-right: 8px;
    }

    /* Results Section */
    .results-section {
      margin-top: 40px;
      padding-top: 30px;
      border-top: 1px solid var(--border-color);
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .results-section.visible {
       opacity: 1;
       transform: translateY(0);
    }

    .results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    .result-item {
      background-color: #f8f9fe; /* Slightly blueish background */
      padding: 20px;
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .result-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px var(--shadow-hover-color);
    }

    .result-item-large {
       grid-column: span 2; /* Make yearly span two columns on wider screens */
       background: linear-gradient(135deg, #e6f0ff, #dbe9ff); /* Subtle gradient */
       border-color: #baccf1;
    }

     .result-item-large .result-label {
        color: var(--primary-color);
        font-weight: 600;
     }

     .result-item-large .result-value {
        color: var(--primary-color);
        font-size: 2.2rem; /* Even larger */
        font-weight: 700;
     }


    .result-label {
      display: flex; /* Align icon */
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      color: var(--label-color);
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
     .result-label .icon-label {
         font-size: 0.9em; /* Slightly smaller icon in results */
         margin-right: 5px;
     }

    .result-value {
      display: block;
      color: var(--text-color);
      font-size: 1.7rem;
      font-weight: 600;
      line-height: 1.2;
    }

    /* Currency/Unit Styling */
    #dailyEarnings::before,
    #monthlyEarnings::before,
    #yearlyEarnings::before,
    #estimatedRpm::before {
      content: '$';
      font-size: 0.8em;
      margin-right: 3px;
      color: var(--label-color);
      font-weight: 400;
    }
     #estimatedClicks::before {
       content: '';
     }


    /* Responsive adjustments */
    @media (max-width: 768px) {
        .calculator-container {
            padding: 25px 30px;
            max-width: 550px;
        }
        .result-item-large {
            grid-column: span 1; /* Stack yearly on smaller screens */
        }
        header h1 { font-size: 1.6rem; }
        .input-section h2, .results-section h2 { font-size: 1.3rem; }
        .result-value { font-size: 1.5rem; }
        .result-item-large .result-value { font-size: 1.9rem; }
    }

     @media (max-width: 500px) {
        body { padding: 20px 15px; }
        .calculator-container { padding: 20px; }
        .input-grid { grid-template-columns: 1fr; gap: 20px; }
        .results-grid { grid-template-columns: 1fr; gap: 15px; }
        header h1 { font-size: 1.4rem; }
        header p { font-size: 0.9rem; }
        button { padding: 12px 20px; font-size: 1rem; }
        .result-value { font-size: 1.4rem; }
        .result-item-large .result-value { font-size: 1.7rem; }
        .slider-input-combo { flex-direction: column; align-items: stretch; }
        .slider-input-combo input[type="number"] { width: 100%; text-align: left; margin-top: 5px; }
        .slider-input-combo input[type="range"] { margin-top: 0; }
     }