@font-face {
           font-family: 'GothamLight';
           src: url('/fonts/Gotham-Light.ttf');
       }

       @font-face {
           font-family: 'GothamMedium';
           src: url('/fonts/Gotham-Medium.ttf');
       }

       @font-face {
           font-family: 'GothamBold';
           src: url('/fonts/Gotham-Bold.ttf');
       }

       body {
           font-family: 'GothamLight', sans-serif;
           background-color: #f0f4f8;
           display: flex;
           justify-content: center;
           align-items: center;
           /* Align to the top to prevent content overflow */
           min-height: 100vh;
           padding-top: 0.625rem;
           /* ~10px */
           padding-left: 0.625rem;
           /* ~10px */
           padding-right: 0.625rem;
           /* Explicitly set to 10px */
           box-sizing: border-box;
       }

       .container {
           font-family: 'GothamLight', sans-serif;
           background-color: #ffffff;
           padding: 0.625rem;
           /* Retained internal padding at ~10px */
           border-radius: 1.5rem;
           /* More rounded corners */
           box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
           width: 100%;
           /* Re-added max-width to container as per user's last provided code */
           display: flex;
           flex-direction: column;
           gap: 0.375rem;
           /* Consistent gap for main sections */
       }
       pre{
           font-family: 'GothamLight', sans-serif;
        }
       h1 {
           margin: 0px;
           font-family: 'GothamBold', sans-serif;
           color: #984982;
           font-size: 14px !important;
       }

       h2 {
           margin: 0px;
           font-family: 'GothamBold', sans-serif;
           color: #499882;
           font-size: 20px !important;
       }

       /* Styles for tab navigation */
       .tab-navigation {
           display: flex;
           margin-bottom: 0.5rem;
           /* Space between tabs and content, adjusted for new gap */
           border-bottom: 2px solid #c5ddd7;
           /* Light gray border for tab bar */
       }

       .tab-button {
           font-family: 'GothamLight', sans-serif;
           background-color: transparent;
           border: none;
           padding: 0.75rem 1.25rem;
           cursor: pointer;
           font-size: 1rem;
           font-weight: 600;
           color: #5f7c75;
           /* Tailwind slate-500 */
           border-bottom: 2px solid transparent;
           transition: all 0.2s ease-in-out;
           border-top-left-radius: 0.5rem;
           border-top-right-radius: 0.5rem;
           margin-bottom: -2px;
           /* Pulls button border into line with bottom border */
       }

       .tab-button:hover {
           color: #499882;
       }

       .tab-button.active {
           color: #499882;
           border-bottom: 2px solid #499882;
           background-color: #f0f4f8;
           /* A very subtle background for the active tab */
       }

       .tab-content {
           display: none;
           /* Hidden by default */
           padding: 0.25rem;
           /* Space below content within tab, slightly less */
           flex-direction: column;
           /* Ensure it's a column layout when active */
           gap: 0.375rem;
           /* Apply consistent gap within active tab content */
           overflow-y: auto;
           /* Enable vertical scrolling */
           overflow-x: hidden;
           /* Hide horizontal overflow */
           /* Adjusted from 15rem to 10rem to give more vertical space before overflow */
           max-height: calc(100vh - 10rem);
       }

       .tab-content.active {
           display: flex;
           /* Show active tab content, maintaining flex column */
       }

       /* Existing form group styles, applied within tab-content */
       .form-group {
           display: flex;
           margin-bottom: 2px;
           margin-top: 2px;
           flex-direction: column;
           gap: 0.75rem;
       }

       /* These styles are now largely unused due to dropdown conversions, but kept for minimal impact */
       .checkbox-and-radios {
           display: flex;
           align-items: center;
           flex-wrap: wrap;
           gap: 0.75rem;
       }

       .checkbox-group {
           display: flex;
           align-items: center;
           gap: 0.25rem;
           margin-left: 10px;
       }

       .radio-options {
           display: flex;
           gap: 1rem;
           flex-wrap: wrap;
           margin-left: 10px;
       }

       .reminder-radio-options {
           display: flex;
           flex-wrap: wrap;
           gap: 1rem;
           align-items: center;
           margin-left: 10px;
       }

       .radio-option {
           display: flex;
           align-items: center;
           gap: 0.125rem;
       }

       label {
           font-family: 'GothamLight', sans-serif;
           font-weight: 300;
           margin: 0px 5px 0px 5px !important;
           color: #1e3b33;
           text-wrap-mode: nowrap;
       }

       v select:focus {
           outline: 2px solid #499882;
       }

       select {
           font-family: 'GothamLight', sans-serif;
           background-color: transparent !important;
           border: none;
           outline: none;
           text-indent: 5px;
           /* Maintains left indent for text */
           padding: 0px !important;
           /* Uniform padding */
           border-radius: 0.75rem;
           font-size: 1rem;
           color: #499882;
           width: 100%;
           box-sizing: border-box;
           height: 24px;
       }

       .template-output-wrapper {
           display: flex;
           align-items: center;
           gap: 0.5rem;
           padding: 0.375rem;
           /* Reduced padding */
           border: 1px solid #499882;
           border-radius: 0.75rem;
           width: 100%;
           box-sizing: border-box;
           background-color: #f9fafb;
       }

       input[type="text"]:focus {
           outline: none;
           box-shadow: none;
       }

       input[type="text"] {
           font-family: 'GothamLight', sans-serif;
           border: none;
           padding: 0;
           flex-grow: 1;
           font-size: 1rem;
           color: #112721;
           background-color: transparent;
           outline: none;
       }

       input[type="checkbox"]:checked,
       input[type="radio"]:checked {
           background-color: #499882;
           accent-color: #499882;
           outline: none;
       }

       input[type="checkbox"],
       input[type="radio"] {
           /* Removed radio from this selector as radio buttons are converted */
           transform: scale(1.2);
           padding: 5px !important;
           color: #499882;
           outline: none;
       }
       .launch-button {
            background-color: DodgerBlue;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
            width: 300px;
            cursor: pointer;
            border: none;
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin: 0.15rem;
            align-self: center;
            text-align: center;
        }

        .launch-button:hover {
            background-color: #1e90ff;
            transform: translateY(-1px);
        }

        .launch-button:active {
            transform: translateY(0);
            box-shadow: none;
        }

       .copy-button {
           background-color: #499882;
           color: white;
           padding: 0.375rem;
           /* Adjusted padding */
           border-radius: 0.75rem;
           font-size: 1rem;
           font-weight: 600;
           cursor: pointer;
           border: none;
           transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
       }

       .copy-button:hover {
           background-color: #69dbbb;
           transform: translateY(-1px);
       }

       .copy-button:active {
           transform: translateY(0);
           box-shadow: none;
       }

       .copy-button svg {
           color: white;
       }

       .message-box {
           background-color: #d1fae5;
           color: #065f46;
           padding: 0.75rem;
           border-radius: 0.5rem;
           margin-top: 1rem;
           text-align: center;
           font-weight: 500;
           display: none;
       }

       .noborder {
           border: none;
       }