:root {
    /* Dark Theme (Default) */
    --bg-color: #0d1117;
    --card-bg: #161b22;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent-color: #58a6ff;
    --accent-hover: #1f6feb;
    --border-color: #30363d;
    --error-color: #f85149;
    --code-bg: #0d1117;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

[data-theme="light"] {
    --bg-color: #f6f8fa;
    --card-bg: #ffffff;
    --text-primary: #24292f;
    --text-secondary: #57606a;
    --accent-color: #0969da;
    --accent-hover: #0550ae;
    --border-color: #d0d7de;
    --error-color: #cf222e;
    --code-bg: #f6f8fa;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 2rem 2rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
}

header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background-color: rgba(110, 118, 129, 0.1);
    color: var(--text-primary);
}

.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

[data-theme="light"] .sun-icon {
    display: block;
}

[data-theme="light"] .moon-icon {
    display: none;
}

main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Side by side */
    gap: 2rem;
    min-height: 0;
    /* Important for nested scrolling */
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    height: 100%;
    overflow-y: auto;
    /* Allow input side to scroll if needed, though unlikely */
}

label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.input-wrapper {
    display: flex;
    gap: 10px;
}

input[type="text"] {
    flex: 1;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

button {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.primary-btn {
    background-color: var(--accent-color);
    color: #ffffff;
    padding: 0 24px;
}

.primary-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.primary-btn:active {
    transform: translateY(0);
}

.secondary-btn {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    font-size: 0.85rem;
}

.secondary-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background-color: rgba(110, 118, 129, 0.1);
}

.secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.options-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.checkbox-wrapper input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.checkbox-wrapper:hover .checkbox-label {
    color: var(--text-primary);
}

.error-message {
    color: var(--error-color);
    font-size: 0.9rem;
    min-height: 1.5em;
    opacity: 0;
    transition: opacity 0.2s;
}

.error-message.visible {
    opacity: 1;
}

.output-group {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill height */
    max-height: 100%;
    transition: background-color 0.3s, border-color 0.3s;
    overflow: hidden;
    /* Ensure no scroll on container */
}



.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.output-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-wrapper.small {
    gap: 6px;
}

.checkbox-wrapper.small input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.checkbox-wrapper.small .checkbox-label {
    font-size: 0.85rem;
}

.code-wrapper {
    background-color: var(--code-bg);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
    flex: 1;
    overflow-y: auto;
    /* Scroll inside the code block */
    position: relative;
    min-height: 0;
    /* Crucial for flex child scrolling */
    transition: background-color 0.3s, border-color 0.3s;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    white-space: pre-wrap;
    /* Wrap long lines */
    word-break: break-all;
    color: var(--text-primary);
}

code.placeholder {
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.7;
}

.hidden {
    display: none;
    /* Still needed for initial state logic in JS, but we might want to revisit if we want to reserve space */
}

/* Override hidden for grid layout stability if we want it to just be invisible but take space? 
   No, let's keep it hidden until needed, but on desktop it will just pop into the right column.
*/

footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-bottom: 0;
}

footer p {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

footer a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

footer a:hover {
    border-bottom-color: var(--text-primary);
}

.github-link {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    margin-left: 8px;
    border-bottom: none !important;
}

.github-link:hover {
    color: var(--accent-color);
}

/* Loading state */
.primary-btn.loading span {
    display: none;
}

.primary-btn.loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    body {
        height: 100vh;
        /* Fixed height on mobile too */
        overflow: hidden;
    }

    .container {
        padding: 1rem;
        height: 100%;
    }

    main {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .input-group {
        justify-content: flex-start;
        height: auto;
        flex-shrink: 0;
        /* Don't shrink input area */
    }

    .output-group {
        height: auto;
        flex: 1;
        /* Take remaining space */
        min-height: 0;
        /* Allow shrinking to fit */
    }

    .input-wrapper {
        flex-direction: column;
    }

    .primary-btn {
        width: 100%;
        padding: 12px;
    }

    .output-actions {
        gap: 10px;
        justify-content: flex-end;
    }
}