html {
    height: 100%;
}

body {
    font-family: 'VT323', monospace;
    background-color: #000000;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent body scrollbars */
    -ms-overflow-style: none;  /* IE and Edge hide scrollbar */
    scrollbar-width: none;  /* Firefox hide scrollbar */
}

/* Chrome, Safari, Opera: Hide body scrollbar */
body::-webkit-scrollbar {
    display: none;
}

#page-container {
    display: flex;
    gap: 30px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    align-items: flex-start;
    padding: 2em;
    box-sizing: border-box;
}

#left-column {
    width: 300px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto; /* Allow vertical scroll if content overflows */
    padding-right: 1em; /* space for scrollbar */
    scrollbar-width: none; /* For Firefox */
}

#left-column::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

#left-column-content {
    /* This new wrapper holds the content, preventing padding from being cut by scrollbar */
}

header {
    width: 100%;
    margin-bottom: 0.2em; /* Reduced from 0.5em to bring app-info closer to h1 */
    padding: 0 1.5em;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-btn {
    background: none;
    border: 2px solid #555;
    color: #e0e0e0;
    font-size: 1.5em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all 0.2s ease;
}

.theme-btn:hover {
    border-color: #999;
    background-color: #333;
}

h1 {
    color: #f4f4f9;
    text-align: left;
    margin: 0;
    font-size: 1.8em;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#app-info {
    display: flex;
    justify-content: flex-start; /* Changed from space-between */
    align-items: center;
    padding: 0 1.5em 0.2em 1.5em; /* Reduced bottom padding from 0.5em to 0.2em */
    margin-bottom: 25px; /* Increased gap between IG/version and drop zone per request */
    font-size: 0.9em;
    gap: 0.25em; /* Minimal separation between elements */
}

.app-creator-prefix {
    color: #888;
    margin-right: 0; /* Removed margin, using gap instead */
}

.app-creator-link {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.app-creator-link:hover {
    color: #ccc;
}

.app-version {
    color: #888;
    margin-left: 1em; /* Increased margin for "several spaces" separation */
}

.light-mode .app-creator-link {
    color: #666;
}

.light-mode .app-creator-link:hover {
    color: #111;
}

.light-mode .app-version {
    color: #666;
}

.light-mode .app-creator-prefix {
    color: #666;
}

#drop-zone {
    border: 3px dashed #888;
    border-radius: 20px;
    width: 100%;
    margin: 10px auto 1em; /* Added 10px top margin */
    padding: 1.5em;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    align-items: center;
}

#drop-zone p {
    margin: 0;
    font-size: 1.2em;
    color: #888;
    pointer-events: none; /* Allows click to pass through to the div */
}

#webcam-container {
    width: 100%;
    margin: 0 auto 1em;
    box-sizing: border-box;
}

#webcam-select {
    width: 100%;
    margin-top: 0.75em;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-right: 2em; /* space for arrow */
}

#webcam-select:hover {
    border-color: #999;
}

#webcam-select:focus {
    outline: none;
    border-color: #2ecc71;
}

#webcam-select option {
    background-color: #000000;
    color: #e0e0e0;
}

#view-controls-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
    margin-bottom: 0.75em;
}

#view-controls-container .action-btn {
    font-size: 0.9em; /* Slightly smaller font to fit better */
    padding: 0.4em;
}

#drop-zone.dragover {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
}

.disabled-source-control {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

#video-controls-container {
    width: 100%;
    margin: 0 auto 2em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1em;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1.2em 1.5em;
    background-color: #000000;
}

.video-controls-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1em;
}

.video-controls-header .previews-header {
    margin: 0; /* remove default p margin */
}

.tooltip-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 1px solid #888;
    font-size: 0.9em;
    cursor: help;
    position: relative;
    user-select: none;
}

.tooltip-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 1em;
    border-radius: 8px;
    font-family: 'VT323', monospace;
    white-space: normal;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
    line-height: 1.4;
    font-size: 1em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    box-sizing: border-box;
    width: 220px;
}

.has-tooltip {
    position: relative;
}

.has-tooltip[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%; /* position it above the element */
    left: 50%;
    transform: translateX(-50%);
    background-color: #000000;
    color: #fff;
    padding: 0.6em;
    border-radius: 6px;
    font-family: 'VT323', monospace;
    white-space: normal;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 3s, visibility 0s linear 3s;
    z-index: 100;
    pointer-events: none;
    line-height: 1.3;
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.9);
    box-sizing: border-box;
    width: 180px;
    max-width: 280px; /* Constrain to left column width */
}

.has-tooltip::after {
    /* Base styles for the pseudo-element, initially hidden */
    content: '';
    opacity: 0;
}

.light-mode .has-tooltip[data-tooltip]:hover::after {
    background-color: #f5f5f5;
    color: #121212;
    border: 1px solid #ccc;
}

.light-mode .has-tooltip::after {
    background-color: #f5f5f5;
    color: #121212;
    border: 1px solid #ccc;
}

.tooltip-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

#video-playback-controls {
    display: flex;
    justify-content: space-around;
    gap: 0.5em;
}

.video-btn {
    flex-grow: 1;
    padding: 0.5em;
    font-family: 'VT323', monospace;
    font-size: 1.2em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-btn:hover {
    border-color: #999;
    background-color: #333;
}

#video-play-button:not(:disabled) {
    border-color: #2ecc71;
    color: #2ecc71;
}
#video-play-button:not(:disabled):hover {
    background-color: #2ecc71;
    color: #fff;
}

.video-stop-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.video-stop-btn:hover {
    background-color: #e74c3c;
    color: #fff;
}

.video-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent;
    border-color: #555;
}

#video-timeline-controls {
    display: flex;
    align-items: center;
    gap: 1em;
}

#video-seek-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s ease-in-out;
}

#video-seek-slider:disabled {
    cursor: not-allowed;
}

/* Track */
#video-seek-slider::-webkit-slider-runnable-track {
    background: #555;
    height: 6px;
    border-radius: 3px;
}
#video-seek-slider::-moz-range-track {
    background: #555;
    height: 6px;
    border-radius: 3px;
}

/* Thumb */
#video-seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px; /* (thumb_height - track_height) / -2 */
    background-color: #e0e0e0;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid #000000;
}
#video-seek-slider::-moz-range-thumb {
    background-color: #e0e0e0;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #000000;
}

#video-time-display {
    font-size: 1em;
    white-space: nowrap;
}

/* Style for the video speed control group */
.video-speed-control {
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Space between label and select */
    width: 100%;
}

.video-speed-control label {
    font-size: 1.1em;
}

/* Reusing styling properties from other selects */
#playback-speed-select {
    width: 100%;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-right: 2em; /* space for arrow */
}

#playback-speed-select:hover {
    border-color: #999;
}

#playback-speed-select:focus {
    outline: none;
    border-color: #2ecc71;
}

#playback-speed-select option {
    background-color: #000000;
    color: #e0e0e0;
}


#main-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-grow: 1;
    min-width: 0; /* Prevents flex items from overflowing */
    height: 100%;
    justify-content: center; /* Changed from flex-start to center */
    align-items: center;
    overflow: hidden; /* Hide scrollbars */
    padding-right: 1em;
}

#main-content::-webkit-scrollbar {
    display: none; /* Re-enable scrollbars */
}

#original-container {
    margin-bottom: 2em;
}

#video-player {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 4px;
}

#webcam-video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 4px;
}

.no-aspect-ratio #webcam-video,
.no-aspect-ratio #video-player,
.no-aspect-ratio #bitmap-canvas {
    width: 100%;
    height: 100%;
    object-fit: fill; /* For video elements */
}

#bitmap-canvas {
}

#controls-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#collapsible-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Space between collapsible sections */
}

.collapsible-section {
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #000000;
}

.collapsible-section[open] {
    background-color: #000000;
    border-color: #555;
}

.collapsible-section[open] .collapsible-header {
    border-bottom: 1px solid #444;
}

.collapsible-header {
    display: flex; /* Changed from block */
    align-items: center; /* Vertically center icon and text */
    gap: 0.75em; /* Space between icon and text */
    padding: 0.8em 1em;
    cursor: pointer;
    font-size: 1.2em;
    color: #ccc;
    font-weight: 500;
    transition: background-color 0.2s;
    user-select: none; /* Prevent text selection on click */
    position: relative;
    padding-right: 3em; /* Make space for anchor button */
}

.collapsible-header::before {
    content: '▶';
    display: inline-block;
    font-size: 0.7em;
    margin-right: 0; /* Replaced by gap */
    transition: transform 0.2s ease-in-out;
    position: relative;
    top: -0.1em;
    color: #ccc;
}

.collapsible-section[open] > .collapsible-header::before {
    transform: rotate(90deg);
}

.collapsible-header::-webkit-details-marker {
    display: none; /* Hide default arrow */
}

.collapsible-header {
    list-style: none; /* For Firefox */
}

.collapsible-header:hover {
    background-color: #111;
}

.anchor-btn {
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ccc;
    font-size: 1em; /* Adjusted for easier sizing */
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 5px;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.anchor-btn:hover {
    opacity: 1;
    background-color: #333;
}

/* Pin Head */
.anchor-btn::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Pin Needle */
.anchor-btn::after {
    content: '';
    position: absolute;
    top: 12px; /* Position below the head */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background-color: #ccc;
    transition: all 0.2s ease;
}

.anchor-btn.locked {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg);
}

.anchor-btn.locked::before {
    border-color: #2ecc71;
    background-color: #2ecc71;
}

.anchor-btn.locked::after {
    background-color: #2ecc71;
}

.collapsible-content {
    padding: 1.2em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.checkbox-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.checkbox-container input[type="checkbox"] {
    /* Simple styling for consistency */
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2ecc71; /* Modern property for checkbox color */
}

.checkbox-container label {
    font-size: 1.1em;
    user-select: none;
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.radio-group input[type="radio"] {
    margin: 0;
    accent-color: #2ecc71;
}

.radio-group label {
    font-size: 1.1em;
    user-select: none;
}

.control-group-column {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.control-group-column label {
    font-size: 1.1em;
}

.control-group-column textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    resize: vertical;
    min-height: 80px;
}

.control-group-column textarea:focus {
    outline: none;
    border-color: #999;
}

#image-previews-container {
    width: 100%;
    margin: 0 auto 2em;
    box-sizing: border-box;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1.2em 1.2em;
}

.previews-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

#download-all-button {
    width: auto;
    padding: 0.4em 0.8em;
    font-size: 0.9em;
    flex-shrink: 0;
}

.previews-header {
    margin: 0 0 0.8em 0;
    font-size: 1.1em;
    color: #ccc;
    font-weight: 500;
}

#previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 14px;
}

.preview-item {
    aspect-ratio: 1 / 1;
    border: 3px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
    background-color: #222;
}

.preview-item:hover {
    border-color: #999;
}

.preview-item.active {
    border-color: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.delete-preview-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: rgba(231, 76, 60, 0.8);
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: scale(0.8);
    font-family: Arial, sans-serif;
    padding: 0;
}

.preview-item:hover .delete-preview-btn {
    opacity: 1;
    transform: scale(1);
}

.delete-preview-btn:hover {
    background-color: #e74c3c;
    border-color: #e74c3c;
    transform: scale(1.1);
}

#preview-canvas-container {
    width: 100%;
    margin-bottom: 0; /* Remove bottom margin */
    /* All other styles are not needed as it will be hidden */
}

#canvas-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 2em;
}

.image-box {
    background-color: #1a1a1a;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.image-box h2 {
    margin-top: 0;
    font-size: 1.2em;
    color: #ccc;
}

canvas {
    max-width: none; /* Allow canvas to exceed container width */
    max-height: none; /* Allow canvas to exceed container height */
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}

#original-canvas-preview {
    width: 100%;
    height: auto;
    border: none;
    margin-bottom: 2em;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#original-canvas {
    width: 100%;
    height: auto;
    border: none;
    margin-bottom: 2em;
}

.hidden {
    display: none !important; /* Use important to override grid display property */
}

#url-container {
    display: flex;
    width: 100%;
    margin: 0 auto 1em;
    box-sizing: border-box;
}

#url-input {
    flex-grow: 1;
    padding: 0.8em;
    border: 2px solid #555;
    background-color: transparent;
    color: #e0e0e0;
    font-family: 'VT323', monospace;
    font-size: 1em;
    border-radius: 5px 0 0 5px;
    border-right: none;
    min-width: 0; /* Prevents input from overflowing flex container */
}

#url-input:focus {
    outline: none;
    border-color: #999;
}

#load-url-button {
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1em;
    background-color: #555;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

#load-url-button:hover {
    background-color: #666;
    border-color: #666;
}

#color-controls {
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em;
    align-items: center;
    width: 100%;
}

#color-controls label {
    justify-self: start;
}

#color-controls input[type="color"] {
    width: 100%;
    height: 30px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

#standard-color-controls-wrapper {
    transition: opacity 0.3s ease;
}

.color-picker-row {
    display: grid;
    grid-template-columns: 120px 1fr; /* fixed label column, flexible color picker column */
    gap: 0.5em 1em;
    align-items: center;
    width: 100%;
    margin: 0.4em 0; /* uniform vertical spacing between rows */
}
/* Ensure all color pickers in the 4-tone section share a uniform size */
#pixel-color-controls .color-picker-row input[type="color"],
#pixel-color-controls .color-picker-row label {
    height: 30px;
    box-sizing: border-box;
}
/* Slight visual tweak so color swatches appear consistent */
#pixel-color-controls .color-picker-row input[type="color"] {
    width: 100%;
    border-radius: 6px;
    padding: 0;
    border: 1px solid #444;
    background-clip: padding-box;
    margin: 0; /* reduce extra vertical spacing */
}


#filter-selection {
    border-radius: 8px;
    padding: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

#color-mode-selection {
    border-radius: 8px;
    padding: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.button-group-container {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    width: 100%;
}

.button-group-with-anchor {
    display: flex;
    align-items: center;
    gap: 0.75em;
    width: 100%;
}

.button-group-with-anchor .action-btn {
    flex-grow: 1;
}

.button-group-with-anchor .anchor-btn {
    position: relative;
    transform: none;
    flex-shrink: 0;
    top: auto;
    right: auto;
}

.button-group {
    margin-top: 0.5em;
    width: 100%;
}

.button-group .action-btn {
    width: 100%;
}

#action-buttons {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75em;
}

#download-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

#download-section .control-group {
    margin-bottom: 0;
}

#download-section select {
    grid-column: 1 / 3;
    width: 100%;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-right: 2em; /* space for arrow */
}

#download-section select:hover {
    border-color: #999;
}

#download-section select:focus {
    outline: none;
    border-color: #2ecc71;
}

#download-section option {
    background-color: #000;
    color: #e0e0e0;
}

#download-section #download-button {
    width: 100%;
}

.action-btn {
    flex-grow: 1;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    width: 100%; /* Ensure buttons fill grid cell */
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.75em;
}

.btn-icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

#randomize-button, #play-button, #soft-randomize-button, #medium-randomize-button, #reset-button {
    grid-column: span 1;
}

.action-btn:hover, .action-btn.active-random {
    background-color: #e0e0e0;
    color: #000;
    box-shadow: 0 0 8px rgba(224, 224, 224, 0.7);
}

.action-btn.active-random {
    background-color: #2ecc71;
    border-color: #2ecc71;
    color: #fff;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

.action-btn.active-webcam {
    border-color: #e74c3c;
    color: #e74c3c;
}

.action-btn.active-webcam:hover {
    background-color: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

#reset-button {
    border-color: #e74c3c;
}

#reset-button:hover {
    background-color: #e74c3c;
    color: #fff;
}

.action-btn:active {
    background-color: #ccc;
    border-color: #ccc;
    color: #000;
}

#download-button {
    margin-top: 0;
    width: 100%;
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

#download-button:hover {
    background-color: #e0e0e0;
    color: #000;
}

#download-button:disabled {
    color: #555;
    border-color: #555;
    cursor: not-allowed;
    background-color: transparent;
}

#download-format {
    padding: 0.8em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-right: 2em; /* space for arrow */
    width: 0; /* Let flex-grow handle the width */
}

#download-format:hover {
    background-color: #e0e0e0;
    color: #000;
}

#download-format option {
    background-color: #000;
    color: #e0e0e0;
}

#dithering-intensity-group {
    transition: opacity 0.3s ease;
}

#dithering-algorithm-select,
#font-family-select,
#font-style-select,
#text-align-select {
    grid-column: 1 / 3;
    width: 100%;
    padding: 0.5em;
    font-family: 'VT323', monospace;
    font-size: 1.1em;
    background-color: transparent;
    color: #e0e0e0;
    border: 2px solid #555;
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-right: 2em; /* space for arrow */
}

#dithering-algorithm-select:focus,
#font-family-select:focus,
#font-style-select:focus,
#text-align-select:focus {
    outline: none;
    border-color: #2ecc71;
}

#dithering-algorithm-select option,
#font-family-select option,
#font-style-select option,
#text-align-select option {
    background-color: #000;
    color: #e0e0e0;
}

.disabled-for-webcam {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

#color-controls.disabled-controls,
.disabled-for-webcam {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

#play-button:not(.active-play) {
    border-color: #2ecc71;
    color: #2ecc71;
}

#play-button:not(.active-play):hover {
    background-color: #2ecc71;
    color: #fff;
}

#play-button.active-play {
    background-color: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}
#play-button.active-play:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

/* --- Generic Styles for All Range Sliders --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    padding: 0;
}

input[type="range"]:disabled {
    cursor: not-allowed;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
    background: #555;
    height: 6px;
    border-radius: 3px;
}
input[type="range"]::-moz-range-track {
    background: #555;
    height: 6px;
    border-radius: 3px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px; /* (thumb_height - track_height) / -2 */
    background-color: #e0e0e0;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid #000000;
}
input[type="range"]::-moz-range-thumb {
    background-color: #e0e0e0;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #000000;
}

input[type="range"]:focus {
    outline: none; /* Removes blue outline on focus */
}

#user-manual-content {
    gap: 0.5em;
}

.language-content > .manual-section {
    margin-bottom: 0.5em;
}

.language-content > .manual-section:last-child {
    margin-bottom: 0;
}

.manual-section {
    border: 1px solid #333;
    border-radius: 6px;
    background-color: #000000;
}

.manual-section > summary {
    list-style: none; /* For Firefox */
    padding: 0;
    cursor: pointer;
}

.manual-section > summary::-webkit-details-marker {
    display: none; /* Hide default arrow */
}

.manual-section h4 {
    margin: 0;
    padding: 0.6em 0.8em;
    color: #2ecc71;
    font-size: 1.2em;
    border: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.manual-section h4::before {
    content: '▶';
    display: inline-block;
    font-size: 0.6em;
    margin-right: 0.7em;
    transition: transform 0.2s ease-in-out;
    position: relative;
    top: -0.1em;
    color: #ccc;
}

.manual-section[open] > summary h4::before {
    transform: rotate(90deg);
}

.manual-section .manual-section-content {
    padding: 0.2em 1.2em 1em 1.2em;
    border-top: 1px solid #333;
}

.manual-section p {
    margin-bottom: 0.5em;
}

.manual-section p:last-child {
    margin-bottom: 0;
}

.manual-intro {
    font-size: 1.1em;
    line-height: 1.3;
    margin-bottom: 1.5em;
}

#user-manual-content h4 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #2ecc71;
    font-size: 1.2em;
    border-bottom: 1px solid #444;
    padding-bottom: 0.3em;
}

#user-manual-content h4:first-child {
    margin-top: 0;
}

#user-manual-content p {
    margin: 0 0 1em 0;
    line-height: 1.5;
    font-size: 1.1em;
}

#user-manual-content code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    font-weight: bold;
    color: inherit;
}

.manual-download-section {
    color: #2ecc71;
}

/* --- Light Mode --- */
body.light-mode {
    background-color: #f0f0f0;
    color: #121212;
}

.light-mode .manual-section {
    background-color: #fdfdfd;
    border-color: #ddd;
}

.light-mode .manual-section h4::before {
    color: #333;
}

.light-mode .manual-section .manual-section-content {
    border-top-color: #ddd;
}

.light-mode h1 {
    color: #000;
    text-shadow: none;
}

.light-mode .theme-btn {
    border-color: #aaa;
    color: #121212;
}

.light-mode .theme-btn:hover {
    border-color: #555;
    background-color: #ddd;
}

.light-mode #drop-zone {
    border-color: #888;
}

.light-mode #drop-zone p {
    color: #888;
}

.light-mode #drop-zone.dragover {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
}

.light-mode #webcam-select,
.light-mode #download-section select,
.light-mode #dithering-algorithm-select,
.light-mode #font-family-select,
.light-mode #font-style-select,
.light-mode #text-align-select,
.light-mode #playback-speed-select {
    background-color: #fff;
    color: #121212;
    border-color: #aaa;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

.light-mode #webcam-select:hover,
.light-mode #download-section select:hover,
.light-mode #dithering-algorithm-select:hover,
.light-mode #font-family-select:hover,
.light-mode #font-style-select:hover,
.light-mode #text-align-select:hover,
.light-mode #playback-speed-select:hover {
    border-color: #555;
}

.light-mode #webcam-select option,
.light-mode #download-section option,
.light-mode #dithering-algorithm-select option,
.light-mode #font-family-select option,
.light-mode #font-style-select option,
.light-mode #text-align-select option,
.light-mode #playback-speed-select option {
    background-color: #fff;
    color: #121212;
}

.light-mode .control-group-column textarea {
    background-color: #fff;
    color: #121212;
    border-color: #aaa;
}

.light-mode .control-group-column textarea:focus {
    border-color: #555;
}

.light-mode #video-controls-container {
    background-color: #fff;
    border-color: #ccc;
}

.light-mode .video-btn {
    color: #121212;
    border-color: #aaa;
}

.light-mode .video-btn:hover {
    background-color: #ddd;
}

.light-mode .video-btn:disabled {
    border-color: #aaa;
    background: transparent;
}

.light-mode #video-seek-slider::-webkit-slider-runnable-track {
    background: #ccc;
}
.light-mode #video-seek-slider::-moz-range-track {
    background: #ccc;
}
.light-mode #video-seek-slider::-webkit-slider-thumb {
    background-color: #333;
    border-color: #f0f0f0;
}
.light-mode #video-seek-slider::-moz-range-thumb {
    background-color: #333;
    border-color: #f0f0f0;
}

.light-mode .collapsible-section {
    background-color: #fff;
    border-color: #ccc;
}

.light-mode .collapsible-section[open] {
    background-color: #fff;
    border-color: #bbb;
}

.light-mode .collapsible-section[open] .collapsible-header {
    border-bottom-color: #ccc;
}

.light-mode .collapsible-header {
    color: #333;
}

.light-mode .collapsible-header:hover {
    background-color: #f5f5f5;
}

.light-mode .anchor-btn {
    color: #333;
}

.light-mode .anchor-btn::before {
    border-color: #333;
}

.light-mode .anchor-btn::after {
    background-color: #333;
}

.light-mode .anchor-btn.locked::before,
.light-mode .anchor-btn.locked::after {
    border-color: #2ecc71;
    background-color: #2ecc71;
}

.light-mode .action-btn {
    color: #333;
    border-color: #aaa;
}

.light-mode .action-btn:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.light-mode .action-btn.active-random {
    background-color: #27ae60;
    border-color: #27ae60;
    color: #fff;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.7);
}

.light-mode .action-btn.active-webcam {
    color: #c0392b;
    border-color: #c0392b;
}

.light-mode .action-btn.active-webcam:hover {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.light-mode #reset-button {
    color: #c0392b;
    border-color: #c0392b;
}

.light-mode #reset-button:hover {
    background-color: #c0392b;
    color: #fff;
}

.light-mode #play-button:not(.active-play) {
    border-color: #27ae60;
    color: #27ae60;
}

.light-mode #play-button:not(.active-play):hover {
    background-color: #27ae60;
    color: #fff;
}

.light-mode #play-button.active-play {
    background-color: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.light-mode #play-button.active-play:hover {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.support-button-container {
    padding-top: 2em;
    padding-bottom: 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1.2em;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.2s ease;
    background-color: transparent;
    color: #2ecc71;
    border: 2px solid #2ecc71;
    width: 100%;
    cursor: pointer;
}

.support-btn:hover {
    background-color: #2ecc71;
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

.light-mode .support-btn {
    color: #27ae60;
    border-color: #27ae60;
}

.light-mode .support-btn:hover {
    background-color: #27ae60;
    color: #fff;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.7);
}

.paypal-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

#page-footer {
    display: none;
}

#page-footer a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

#page-footer a:hover {
    color: #ccc;
}

.light-mode #page-footer a {
    color: #666;
}

.light-mode #page-footer a:hover {
    color: #111;
}

/* New style for version number */
#page-footer span {
    color: #888;
    font-size: 1em; /* Ensure it matches the font size of the link */
}

/* Add mobile responsiveness */
@media screen and (max-width: 800px) {
    body {
        overflow-y: auto; /* Allow scrolling on mobile */
    }

    /* Disable tooltips on mobile (prevent activation on touch/hover) */
    .has-tooltip[data-tooltip]:hover::after,
    .tooltip-icon:hover::after {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: none !important;
    }

    #page-container {
        flex-direction: column;
        gap: 1em;
        padding: 1em;
        height: auto;
        min-height: 100vh;
    }

    #left-column {
        width: 100%;
        height: auto;
        order: 2; /* Controls go below output */
        padding-right: 0;
        overflow-y: visible;
        min-width: 0;
    }
    
    header {
        padding: 0 1em; /* Use consistent mobile padding */
        margin-bottom: 0.5em; /* Adjusted margin */
    }

    #app-info {
        padding: 0 1em 0.5em 1em; /* Use consistent mobile padding */
        margin-bottom: 0.2em; 
    }

    #main-content {
        width: calc(100% + 2em); /* Expand to compensate for page-container's horizontal padding (1em left + 1em right) */
        margin: 0 -1em; /* Shift left and right by page-container's padding to span full width */
        height: 60vh; /* Set a specific height for the anchored visualization */
        order: 1; /* Output goes above controls */
        min-height: 300px; /* Minimum size for visibility */
        max-height: 60vh; /* Limit consumption */
        padding: 0; /* Remove internal padding/frame */
        box-sizing: border-box; /* Include padding in height/width calculation (though padding is now 0) */
        overflow: hidden;
        /* Anchoring the visualization at the top */
        position: sticky;
        top: 0;
        z-index: 100; /* Increased z-index to ensure it overlaps scrolling content */
        background-color: #000000; /* Dark mode background for sticky container */
        
        /* NEW: Add bottom padding for separation from scrolling menu */
        padding-bottom: 30px; 
    }
    
    .light-mode #main-content {
        background-color: #f0f0f0; /* Light mode background for sticky container */
    }

    /* Force inner content to fit inside the padded area */
    #webcam-video,
    #video-player,
    #bitmap-canvas {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain; /* Respect aspect ratio within the padded space */
    }
    
    /* Override for Fill Screen mode */
    .no-aspect-ratio #webcam-video,
    .no-aspect-ratio #video-player,
    .no-aspect-ratio #bitmap-canvas {
        object-fit: fill; 
    }
    
    /* All collapsible content and containers should span full width without internal padding conflicts */
    .collapsible-header {
        padding: 0.8em 1em;
    }
    
    .collapsible-content {
        padding: 1em;
    }

    #page-footer {
        padding: 1em 0 0 0; /* Remove horizontal padding, rely on #page-container padding */
    }
    
    /* Ensure elements that had grid layouts adapt well */
    #view-controls-container {
        grid-template-columns: 1fr; /* Stack buttons vertically */
    }
    
    #action-buttons {
        grid-template-columns: 1fr; /* Stack automation buttons vertically */
    }
    
    /* Ensure large elements shrink properly */
    #drop-zone {
        padding: 1.5em; /* Maintain original dropzone vertical padding */
    }
    
    /* Textarea width fix */
    .control-group-column textarea {
        min-height: 60px;
    }
    
    /* Adjust input/select padding to look better on mobile */
    #webcam-select,
    #download-section select,
    #dithering-algorithm-select,
    #font-family-select,
    #font-style-select,
    #text-align-select,
    #url-input,
    #load-url-button,
    .action-btn {
        font-size: 1.05em;
        padding: 0.7em;
    }
    
    #url-input, #load-url-button {
        padding: 0.7em;
    }
}

#donation-modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 1000; }
#donation-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
#donation-box { position: relative; background: #000; color: #e0e0e0; width: min(520px, 92%); border-radius: 12px; padding: 1.2em 1.4em; box-shadow: 0 10px 40px rgba(0,0,0,0.8); z-index: 1001; font-family: 'VT323', monospace; text-align: center; }
#donation-box h2 { margin: 0 0 0.4em 0; color: #2ecc71; font-size: 1.4em; }
#donation-box p { margin: 0 0 1em 0; line-height: 1.4; font-size: 1em; color: #dcdcdc; }
#donation-close { position: absolute; top: 8px; right: 8px; background: transparent; border: 2px solid #444; color: #e0e0e0; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: 1.1em; }
#donation-icon { font-size: 2.2em; color: #2ecc71; margin-bottom: 0.4em; font-family: monospace; letter-spacing: 0.05em; }
/* Buttons container uses the same layout as support section but centered */
#donation-buttons-container .support-btn { width: 100%; margin-top: 0.5em; }
/* Ensure modal is hidden via .hidden class already defined */
@media (max-width: 520px) {
    #donation-box { padding: 1em; }
    #donation-box h2 { font-size: 1.2em; }
}

.pixel-size-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.pixel-size-row .small-step-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border-radius: 6px;
    border: 2px solid #555;
    background: transparent;
    color: #e0e0e0;
    font-size: 1.2em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pixel-size-row .small-step-btn:hover {
    border-color: #999;
    background-color: #333;
}
.pixel-size-row input[type="range"] {
    flex: 1 1 auto;
    margin: 0;
}
#save-recording-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#record-button {
    margin-bottom: 0.75em;
}
#save-recording-button {
    margin-bottom: 0.2em;
}

.recording-hint {
    font-size: 0.85em;
    color: #888;
    margin-top: 0;
}
.recording-hint a {
    color: #2ecc71;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}
.recording-hint a:hover {
    color: #38e883;
    text-decoration: underline;
}
.light-mode .recording-hint { color: #666; }
.light-mode .recording-hint a {
    color: #27ae60;
}
.light-mode .recording-hint a:hover {
    color: #2ecc71;
}

/* Force record button icon (circle) to be green when idle */
#record-button .btn-icon circle {
    fill: #2ecc71; 
}