body { padding: var(--space-sm); }
header { background: var(--color-layer); padding: var(--space-lg); border: var(--border-width) solid var(--color-border); margin-bottom: var(--space-sm); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-sm); align-items: end; }
.input-wrapper { position: relative; display: flex; flex-direction: column; }

:is(input:not([type="checkbox"], [type="radio"]), select, button) { width: 100%; }
button { justify-content: center; }

.clear-btn-inline {
    position: absolute; right: 5px; bottom: var(--spacing-responsive); cursor: pointer; color: var(--color-disabled); font-weight: bold; width: 15px; text-align: center; background: var(--color-element); z-index: 5;
    &:hover { color: var(--color-status-red); }
}

.custom-select-wrapper { position: relative; }
.custom-select {
    height: calc(16px + (var(--spacing-responsive) * 2) + (var(--border-width) * 2)); padding: var(--spacing-responsive); padding-right: 25px;
    border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius); background: var(--color-element); cursor: pointer; overflow: hidden; position: relative;
}
.custom-options {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--color-background); border: var(--border-width) solid var(--color-border);
    max-height: 250px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 4px 10px var(--color-shadow);
}
.custom-option {
    padding: var(--space-sm); border-bottom: var(--border-width) solid var(--color-border); cursor: pointer; font-size: 18px; line-height: 1.2;
    &:hover { background: var(--color-elementHover); }
}

.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin: var(--space-sm) 0; }
.upload-row-full { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin: var(--space-sm) 0; }
.zone {
    border: 2px dashed var(--color-border); padding: var(--space-lg); text-align: center; background: var(--color-layer); min-height: 80px; position: relative;
    &.has-file { background: color-mix(in srgb, var(--color-status-green) 10%, transparent); border-color: var(--color-status-green); }
}
.zone-compact { padding: var(--space-element); min-height: 28px; cursor: pointer; }

#file-font, #file-logo, #file-main { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; top: 0; left: 0; }

#preview-grid {
    display: grid; grid-template-columns: repeat(auto-fill, 50px); gap: 3px; margin-top: var(--space-element);
    .preview-item-wrapper { width: 50px; height: 50px; }
}
.preview-item-wrapper { position: relative; width: 80px; height: 80px; }
.preview-item { width: 100%; height: 100%; border: var(--border-width) solid var(--color-border); object-fit: cover; }
.preview-remove { position: absolute; top: -8px; right: -8px; background: transparent; color: var(--color-status-red); width: 24px; height: 24px; padding: 0; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 0; }

#job-list { margin-top: var(--space-lg); border-top: 2px solid var(--color-border); padding-top: var(--space-sm); }
.job-item { background: var(--color-background); padding: var(--space-sm); border: var(--border-width) solid var(--color-border); margin-bottom: var(--space-element); display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-sm); align-items: start; }
.job-previews { display: flex; gap: var(--space-element); overflow-x: auto; max-width: 400px; }
.job-preview-wrapper { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.job-preview-thumb { width: 100%; height: 100%; border: var(--border-width) solid var(--color-border); object-fit: cover; }
.job-preview-remove { position: absolute; top: -6px; right: -6px; background: transparent; color: var(--color-status-red); border: 0; width: 18px; height: 18px; padding: 0; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; }

#snackbar {
    visibility: hidden; min-width: 200px; background: var(--color-blackish); color: var(--color-white); text-align: center; padding: var(--space-md); position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
    &.show { visibility: visible; }
}