:root { --primary-color: #6b46c1; --primary-glow: rgba(107, 70, 193, 0.25); --background-color: #f7f9fc; --panel-bg: #ffffff; --text-primary: #1a202c; --text-secondary: #5a677d; --border-color: #e2e8f0; --error: #e53e3e; --success: #38a169; --bg-primary: #F4F7FC; --accent-secondary: #805AD5; --accent-glow: rgba(128, 90, 213, 0.2); --gradient-main: linear-gradient(45deg, var(--accent-secondary), var(--primary-color)); --font-family: 'Poppins', 'Segoe UI', sans-serif; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 16px; --bg-secondary: #FFFFFF; --accent-primary: #6B46C1; --shadow-color: rgba(107, 70, 193, 0.1); } body.dark-mode { --background-color: #1a202c; --panel-bg: #2d3748; --text-primary: #edf2f7; --text-secondary: #a0aec0; --border-color: #4a5568; --error: #f56565; --success: #68d391; --bg-primary: #4a5568; --accent-secondary: #9f7aea; --accent-glow: rgba(128, 90, 213, 0.4); --gradient-main: linear-gradient(45deg, var(--accent-secondary), #805AD5); --bg-secondary: #2d3748; --accent-primary: #9f7aea; --shadow-color: rgba(0, 0, 0, 0.2); } body.dark-mode .panel-section { background: var(--panel-bg); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } body.dark-mode .upload-area { background-color: rgba(159, 122, 234, 0.1); border-color: var(--accent-primary); } body.dark-mode .upload-area:hover, body.dark-mode .upload-area.dragging-over { background-color: rgba(159, 122, 234, 0.15); } body.dark-mode .thumb-button { background-color: rgba(45, 55, 72, 0.95); color: #edf2f7; } body.dark-mode .thumb-button:hover { background-color: #1a202c; } body.dark-mode .add-more-thumb { background-color: transparent; border-color: var(--border-color); color: var(--text-secondary); } body.dark-mode .add-more-thumb:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--accent-primary); border-color: var(--accent-primary); } body.dark-mode .social-presets-container, body.dark-mode #backgroundOptionsContainer { background-color: #384253; } body.dark-mode .social-presets-container li a:hover { background-color: var(--bg-primary); } body.dark-mode #color-generator-modal-content { background-color: var(--panel-bg); } body.dark-mode #color-generator-modal-content h3, body.dark-mode #color-generator-modal-content h5, body.dark-mode #color-generator-modal-content .section h5 { color: var(--text-primary); border-left-color: var(--accent-primary); } body.dark-mode #color-generator-modal-content .color-swatch[data-color="#ffffff"] { border-color: #5a677d; } body.dark-mode #color-generator-modal-content .color-swatch[data-color="#ffffff"].selected { border-color: var(--accent-primary); } body.dark-mode #color-generator-modal-content #hex-color-input { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode .control-group select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a0aec0" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E'); } body.dark-mode .preset-button, body.dark-mode .control-section-button { background-color: #384253; } body.dark-mode #cameraFeed { background-color: #111; } body.dark-mode #pastResizesList li:hover { background-color: #384253; } body.dark-mode .action-button:disabled { background: #384253; color: var(--text-secondary); } body.dark-mode #openCropModalButton { background: var(--bg-primary); color: var(--text-primary); } body.dark-mode #closeOverlayCropModalButton, body.dark-mode #closeCameraModalButton, body.dark-mode #closeColorModalButton { color: var(--text-secondary); } body.dark-mode .color-swatch { border-color: transparent; } body.dark-mode hr { border-top-color: var(--border-color); } body.dark-mode .checkbox-control input { background-color: var(--background-color); } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--background-color); color: var(--text-primary); line-height: 1.5; overscroll-behavior-y: contain; } .app-container { max-width: 1200px; margin: 0 auto; padding: 20px 10px; box-sizing: border-box; } .main-content { display: grid; grid-template-columns: 1fr; gap: 25px; } .main-content > div { min-width: 0; } @media (min-width: 992px) { .main-content { grid-template-columns: 1fr 1fr; } } .panel { background-color: var(--panel-bg); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid var(--border-color); padding: 25px; } .panel-section { background: linear-gradient(145deg, #fdfdff, #f6f7fb); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); } .upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 250px; margin: 0 auto; padding: 20px; box-sizing: border-box; cursor: pointer; position: relative; background-color: rgba(107, 70, 193, 0.05); border: 2px dashed var(--primary-color); border-radius: 16px; transition: all 0.3s ease; } .upload-area:hover, .upload-area.dragging-over { transform: translateY(-5px); border-color: var(--primary-color); box-shadow: 0 8px 25px var(--primary-glow); background-color: rgba(107, 70, 193, 0.08); } .upload-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; } .upload-icon { font-size: 3rem; color: var(--primary-color); } .upload-text { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); } #fileNameDisplay { margin-top: 10px; color: var(--text-secondary); font-size: 0.85rem; } .multi-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 15px; } .preview-thumb { position: relative; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); aspect-ratio: 1 / 1; background-color: #f0f0f0; cursor: pointer; } .preview-thumb img, .preview-thumb canvas { width: 100%; height: 100%; object-fit: cover; } .preview-thumb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .preview-thumb.overlay-visible .preview-thumb-overlay { opacity: 1; pointer-events: all; } @media (hover: hover) { .preview-thumb:hover .preview-thumb-overlay { opacity: 1; pointer-events: all; } } .thumb-button { background-color: rgba(255, 255, 255, 0.95); border: none; color: #333; padding: 6px 10px; font-size: 13px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: 500; transition: background-color 0.2s; } .thumb-button:hover { background-color: #fff; } .thumb-button.download-btn { background-color: var(--primary-color); color: white; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: calc(100% - 16px); justify-content: center; opacity: 0.9; } .thumb-button.download-btn:hover { opacity: 1; } .preview-thumb-info { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); color: white; padding: 5px; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .add-more-thumb { display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; border: 2px dashed var(--border-color); color: var(--text-secondary); background-color: #f9fafb; transition: all 0.2s ease; } .add-more-thumb:hover { background-color: #f4f6f8; color: var(--primary-color); border-color: var(--primary-color); } .add-more-thumb i { font-size: 2rem; } .panel-header-container .checkbox-control.small-checkbox { display: flex; align-items: center; margin-left: auto; gap: 6px; } .panel-header-container .checkbox-control.small-checkbox label { font-size: 0.9em; font-weight: 500; color: var(--text-secondary); cursor: pointer; user-select: none; } .panel-header-container .checkbox-control.small-checkbox input[type="checkbox"]:disabled + label { color: #ccc; cursor: not-allowed; } .social-presets-container { border: 1px solid var(--border-color); padding: 15px; margin-top: 10px; border-radius: 8px; background-color: #fdfdff; max-height: 250px; overflow-y: auto; } .social-presets-container h4 { margin-top: 0; margin-bottom: 8px; border-bottom: 1px solid #ddd; padding-bottom: 5px; font-size: 0.9em; color: var(--text-primary); font-weight: 700; } .social-presets-container ul { list-style: none; padding: 0; margin: 0 0 15px 0; } .social-presets-container li a { display: block; padding: 8px 12px; text-decoration: none; color: var(--primary-color); border-radius: 4px; transition: background-color 0.2s; font-size: 0.9em; } .social-presets-container li a:hover { background-color: #e9ecef; } #toggleSocialPresetsButton, #toggleBackgroundOptionsButton { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 15px; font-size: 0.9em; font-weight: 500; color: var(--text-primary); border: 1px solid var(--border-color); background-color: var(--bg-primary); border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; margin-top: 10px; } #toggleSocialPresetsButton:hover, #toggleBackgroundOptionsButton:hover { border-color: var(--primary-color); color: var(--primary-color); } #toggleSocialPresetsButton.open, #toggleBackgroundOptionsButton.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #toggleSocialPresetsButton.open .arrow-icon, #toggleBackgroundOptionsButton.open .arrow-icon { transform: rotate(180deg); } #backgroundOptionsContainer { padding: 15px; border: 1px solid var(--border-color); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #fdfdff; } #backgroundOptionsContainer h4 { margin-top: 0; margin-bottom: 10px; font-size: 0.9em; color: var(--text-primary); } .background-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 10px; margin-bottom: 15px; } .background-option { width: 30px; height: 30px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .background-option:hover { transform: scale(1.1); } .background-option.active { border-color: var(--primary-color); transform: scale(1.1); } .background-option[data-type="transparent"] { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px; } .template-preview { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; text-shadow: 1px 1px 2px black; } .quick-actions-container { margin-top: 15px; } #quickActionsContainer .action-button { background-image: none; background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); font-weight: 500; } #quickActionsContainer .action-button:hover:not(:disabled) { background-position: initial; box-shadow: none; transform: none; background-color: var(--bg-primary); border-color: var(--accent-primary); color: var(--accent-primary); } .action-button.full-width { width: 100%; margin-bottom: 10px; font-weight: 600; padding: 12px; } .small-button-container { display: flex; gap: 10px; } .action-button.half-width { flex: 1; } .template-wrapper { display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-start; } .template-wrapper .background-option { width: 40px; height: 40px; } .template-name { font-size: 10px; color: var(--text-secondary); text-align: center; line-height: 1.2; } .custom-color-picker { background: conic-gradient(from 90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 1050; } #color-generator-modal-content { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #ffffff; padding: 25px 30px; border-radius: 16px; width: 100%; max-width: 400px; margin: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); box-sizing: border-box; position: relative; } #closeColorModalButton { position: absolute; top: 10px; right: 15px; font-size: 24px; border: none; background: none; cursor: pointer; color: #888; } #color-generator-modal-content * { box-sizing: border-box; } #color-generator-modal-content h3 { text-align: center; margin-top: 0; margin-bottom: 25px; color: #333; font-size: 1.5rem; } #color-generator-modal-content .section { margin-bottom: 25px; } #color-generator-modal-content .section h5 { margin: 0 0 15px 0; font-weight: 600; color: #333; font-size: 1rem; border-left: 3px solid var(--primary-color); padding-left: 10px; } #color-generator-modal-content .color-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; } #color-generator-modal-content .color-swatch { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease-in-out; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } #color-generator-modal-content .color-swatch:hover { transform: scale(1.1); } #color-generator-modal-content .color-swatch.selected { border-color: var(--primary-color); transform: scale(1.15); box-shadow: 0 0 12px var(--primary-glow); } #color-generator-modal-content .color-swatch[data-color="#ffffff"] { border: 2px solid #e0e0e0; } #color-generator-modal-content .color-swatch[data-color="#ffffff"].selected { border-color: var(--primary-color); } .hidden-color-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } #color-generator-modal-content .color-picker-wrapper { display: flex; align-items: center; gap: 10px; } #color-generator-modal-content #hex-color-input { padding: 8px; width: 110px; border-radius: 6px; border: 1px solid #e0e0e0; text-align: center; font-family: monospace; font-size: 1rem; } #color-generator-modal-content #create-image-btn { width: 100%; padding: 14px; background: var(--primary-color); color: #ffffff; border: none; border-radius: 8px; cursor: pointer; font-size: 1.1rem; font-weight: bold; margin-top: 15px; transition: background-color 0.2s; } #color-generator-modal-content #create-image-btn:hover { background: #522aa4; } .ai-enhance-container { margin-top: 15px; display: flex; justify-content: center; } .ai-enhance-container #aiEnhanceCheckbox { display: none; } .ai-enhance-container #aiEnhanceCheckbox + label { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-weight: 600; font-size: 0.95em; cursor: pointer; user-select: none; transition: all 0.25s ease-in-out; background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.04); } .ai-enhance-container #aiEnhanceCheckbox + label span { font-weight: 400; font-size: 0.85em; opacity: 0.9; } .ai-enhance-container #aiEnhanceCheckbox:not(:checked) + label:hover { border-color: var(--accent-secondary); color: var(--text-primary); } .ai-enhance-container #aiEnhanceCheckbox + label:active { transform: scale(0.98); box-shadow: none; } .ai-enhance-container #aiEnhanceCheckbox:checked + label { background: var(--gradient-main); color: white; border-color: transparent; box-shadow: 0 4px 12px var(--accent-glow); } .ai-enhance-container #aiEnhanceCheckbox:checked + label span { color: white; opacity: 0.9; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .apply-all-container { display: flex; justify-content: center; margin-bottom: 20px; } .apply-all-btn { padding: 8px 18px; background-image: linear-gradient(45deg, #8e44ad, #9b59b6); color: white; border: none; border-radius: 50px; box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4); cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; } .apply-all-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5); } .apply-all-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(155, 89, 182, 0.4); } @media (max-width: 767px) { .app-container { padding: 5px 1px; } .panel { padding: 15px; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app-header { padding: 10px 0; margin-bottom: 20px; min-height: 40px; } .image-panel .panel-section:not(:last-child) { margin-bottom: 25px; } .upload-area input[type="file"] { display: none; } .image-preview-wrapper { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; background: repeating-conic-gradient(var(--bg-primary) 0% 25%, var(--border-color) 0% 50%) 50% / 20px 20px; border-radius: var(--border-radius-md); overflow: hidden; } #cropPreviewImage { max-width: 100%; max-height: 100%; object-fit: contain; width: auto; height: auto; border-radius: var(--border-radius-sm); } .image-details { font-size: 0.8em; color: var(--text-secondary); margin-top: 15px; text-align: center; background: var(--bg-primary); padding: 10px; border-radius: var(--border-radius-sm); } .controls-form { display: flex; flex-direction: column; gap: 20px; } .control-group { text-align: left; position: relative; } .control-group label { font-size: 0.9em; font-weight: 500; margin-bottom: 8px; display: block; color: var(--text-secondary); } .control-group input, .control-group select { padding: 12px 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.95em; width: 100%; background-color: var(--bg-primary); color: var(--text-primary); transition: all 0.2s ease-in-out; font-family: var(--font-family); } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .control-group select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23718096" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 15px center; background-size: 1em; padding-right: 40px; } .control-group input:focus, .control-group select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); } .dimension-controls, .target-size-controls { display: flex; gap: 15px; align-items: flex-end; } .dimension-controls .control-group, .target-size-controls .control-group { flex: 1 1 auto; } .dimension-controls .unit-selector { flex: 0 0 80px; } .target-size-controls .unit-selector { flex: 0 0 80px; } .checkbox-control { display: flex; align-items: center; text-align: left; gap: 10px; cursor: pointer; user-select: none; } .checkbox-control label { margin: 0; font-weight: 400; font-size: 0.95em; color: var(--text-primary); } .checkbox-control input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border-color); background-color: var(--bg-primary); cursor: pointer; position: relative; transition: all 0.2s; } .checkbox-control input:checked { background: var(--gradient-main); border-color: var(--accent-primary); } .checkbox-control input:checked::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; } #togglePresetsButton { width: 100%; text-align: left; padding: 12px 15px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-family); color: var(--text-primary); font-weight: 500; transition: all 0.2s; } #togglePresetsButton:hover { border-color: var(--accent-primary); } #togglePresetsButton.open .arrow-icon { transform: rotate(180deg); } #presetsGridContainer { display: none; padding-top: 15px; } .preset-buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .preset-button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; font-size: 0.75em; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s; min-height: 55px; color: var(--text-secondary); text-align: center; } .preset-button:hover { transform: translateY(-3px); border-color: var(--accent-primary); color: var(--accent-primary); } .preset-button.active { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); color: var(--accent-primary); font-weight: 600; } .action-button { width: 100%; padding: 14px; font-size: 1.05em; font-weight: 600; color: white; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--gradient-main); background-size: 200% auto; } .action-button:hover:not(:disabled) { background-position: right center; box-shadow: 0 5px 15px var(--accent-glow); transform: translateY(-2px); } .action-button:disabled { background: var(--border-color); cursor: not-allowed; color: var(--text-secondary); } #openCropModalButton { background: var(--text-primary); flex-grow: 1; } #openCropModalButton:hover:not(:disabled) { background: var(--text-primary); } #downloadButtonElement { margin-top: 15px; } .preview-actions-wrapper { display: flex; gap: 10px; margin-top: 20px; } #openCameraModalButton { flex-shrink: 0; width: 50px; background: var(--text-secondary); font-size: 1.2em; padding: 14px; } #openCameraModalButton:hover:not(:disabled) { background: var(--text-secondary); } .preview-box { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 15px; text-align: center; } .preview-box canvas { max-width: 100%; border-radius: var(--border-radius-sm); } hr { border: none; border-top: 1px solid var(--border-color); margin: 20px 0; } .app-message { text-align: center; margin-top: 15px; padding: 12px; font-size: 0.9em; border-radius: var(--border-radius-sm); display: none; border: 1px solid transparent; } .app-message.success { background-color: rgba(56, 161, 105, 0.1); color: var(--success); border-color: var(--success); } .app-message.error { background-color: rgba(229, 62, 62, 0.1); color: var(--error); border-color: var(--error); } .app-message.info { background-color: rgba(128, 90, 213, 0.1); color: var(--accent-primary); border-color: var(--accent-primary); } #smartCropButton { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); padding: 10px; border-radius: var(--border-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--font-family); font-size: 0.9em; font-weight: 500; transition: all 0.2s; } #smartCropButton:hover { border-color: var(--accent-primary); color: var(--accent-primary); } .adjustment-slider input[type="range"], #qualityRangeSliderElement, #fontSizeInput { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--bg-primary); border-radius: 5px; outline: none; padding: 0; margin: 0; border: none; cursor: pointer; } .adjustment-slider input[type="range"]::-webkit-slider-thumb, #qualityRangeSliderElement::-webkit-slider-thumb, #fontSizeInput::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--accent-primary); cursor: pointer; border-radius: 50%; border: 3px solid var(--bg-secondary); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .adjustment-slider input[type="range"]::-moz-range-thumb, #qualityRangeSliderElement::-moz-range-thumb, #fontSizeInput::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent-primary); cursor: pointer; border-radius: 50%; border: 3px solid var(--bg-secondary); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } body.modal-open { overflow: hidden; } .crop-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 10px; } .crop-modal-overlay.visible { display: flex; } .crop-modal-content { position: relative; background-color: var(--bg-secondary); color: var(--text-primary); padding: 20px; padding-top: 45px; border-radius: var(--border-radius-md); width: 100%; height: 95%; text-align: center; display: flex; flex-direction: column; } #cropModal .crop-modal-content { max-width: 1100px; } #cameraModal .crop-modal-content { max-width: 800px; height: auto; } #cropOverlayModal .crop-modal-content { max-width: 800px; height: auto; } #closeCropModalButton, #closeOverlayCropModalButton, #closeCameraModalButton { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2.2em; color: var(--text-secondary); cursor: pointer; line-height: 1; padding: 5px; z-index: 1010; } .crop-modal-body { display: flex; gap: 20px; flex: 1; min-height: 0; } #cropImageContainer, #cropOverlayContainer { position: relative; flex-basis: 70%; display: flex; justify-content: center; align-items: center; overflow: hidden; min-height: 300px; touch-action: none; background: repeating-conic-gradient(var(--bg-primary) 0% 25%, var(--border-color) 0% 50%) 50% / 20px 20px; } .snap-line { position: absolute; background-color: var(--accent-primary); display: none; z-index: 9999; pointer-events: none; } .snap-line-h { width: 100%; height: 2px; left: 0; } .snap-line-v { width: 1px; height: 100%; top: 0; } .cropper-point { width: 15px !important; height: 15px !important; opacity: 0.9 !important; background-color: var(--accent-primary) !important; } .cropper-point.point-e, .cropper-point.point-w { margin-top: -7.5px !important; } .cropper-point.point-n, .cropper-point.point-s { margin-left: -7.5px !important; } #textOverlayContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .draggable-overlay { position: absolute; left: 0; top: 0; cursor: move; pointer-events: auto; border: 1px dashed rgba(127, 140, 141, 0.9); border-radius: 5px; user-select: none; -webkit-user-select: none; touch-action: none; line-height: 1.2; } .draggable-overlay.active-overlay { border-style: solid; border-color: var(--accent-primary); box-shadow: 0 0 5px var(--accent-glow); } .overlay-content { outline: none; display: inline-block; padding: 2px 5px; } .draggable-image .overlay-content { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; padding: 0; } .overlay-close, .overlay-rotator { position: absolute; width: 20px; height: 20px; border-radius: 50%; opacity: 0.8; transition: opacity: 0.2s; z-index: 10; display: flex; align-items: center; justify-content: center; color: white; } .overlay-close { top: -10px; right: -10px; font-family: sans-serif; font-size: 16px; font-weight: bold; cursor: pointer; background-color: var(--error); } .overlay-rotator { bottom: -10px; left: -10px; cursor: alias; background-color: var(--accent-secondary); font-size: 10px; } .overlay-resizer-scale, .overlay-resizer-width { position: absolute; width: 16px; height: 16px; background-color: var(--bg-secondary); border: 2px solid var(--accent-primary); border-radius: 50%; opacity: 0.8; transition: opacity 0.2s; z-index: 10; } .overlay-resizer-scale { bottom: -8px; right: -8px; cursor: nwse-resize; } .overlay-resizer-width { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; } .draggable-overlay:hover .overlay-close, .draggable-overlay:hover .overlay-rotator, .draggable-overlay:hover .overlay-resizer-scale, .draggable-overlay:hover .overlay-resizer-width { opacity: 1; } #cropImageContainer img, #cropOverlayContainer img { max-width: 100%; max-height: 100%; } .crop-controls-panel { flex-basis: 30%; display: flex; flex-direction: column; text-align: left; min-height: 0; } .controls-scroller { flex: 1; min-height: 0; position: relative; } .editor-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; } .tab-button { flex: 1; padding: 10px 15px; cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent; font-size: 1em; font-weight: 600; color: var(--text-secondary); transition: all 0.2s ease-in-out; } .tab-button:hover { background-color: var(--bg-primary); } .tab-button.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .tab-pane { display: none; height: 100%; overflow-y: auto; padding: 5px 10px 5px 5px; } .tab-pane.active { display: block; } .control-section { margin-bottom: 20px; } .control-section h4 { margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; color: var(--text-primary); } .transform-buttons, .filter-buttons, .aspect-ratio-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .filter-buttons { grid-template-columns: repeat(3, 1fr); } .aspect-ratio-buttons { grid-template-columns: repeat(3, 1fr); } .custom-ratio-container { display: flex; gap: 10px; align-items: flex-end; } .custom-ratio-container .control-group { flex: 1; } .custom-ratio-container .action-button { flex: 0 0 70px; padding: 12px; font-size: 0.9em; background-color: var(--success); } .control-section-button { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); padding: 8px; border-radius: var(--border-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font-family: var(--font-family); } .control-section-button.active { border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-glow); } .adjustment-slider .slider-label { display: flex; justify-content: space-between; font-size: 0.9em; } .text-controls .control-group { margin-bottom: 15px; } .add-object-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .add-object-buttons .control-section-button { flex: 1; } .text-controls .color-input-wrapper { display: flex; align-items: center; gap: 10px; } .text-controls input[type="color"] { padding: 0; height: 35px; width: 45px; border-radius: var(--border-radius-sm); } .color-palette { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-color); background-clip: content-box; padding: 2px; } .color-swatch.transparent { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px; } .modal-action-buttons { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); display: flex; flex-direction: row; gap: 15px; justify-content: flex-end; } .modal-action-buttons .action-button { width: auto; padding: 10px 20px; font-size: 1em; background-image: none; background-size: auto; background-position: initial; } .modal-action-buttons .action-button:hover:not(:disabled) { transform: none; box-shadow: none; } #resetAdjustmentsButton { background-color: var(--text-secondary); } #applyCropButton, #applyOverlayCropButton { background-color: var(--success); } #applyCropButton:hover, #applyOverlayCropButton:hover { background-color: #2F855A; } #captureImageButton { background-color: var(--success); } #switchCameraButton { background-color: var(--accent-secondary); } .upload-loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-glow); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border-radius: var(--border-radius-md); color: var(--text-primary); backdrop-filter: blur(2px); } .loader-spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; } #cameraFeed { width: 100%; max-height: 60vh; border-radius: var(--border-radius-md); background-color: var(--bg-primary); transform: scaleX(-1); } .panel-header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } #pastResizesToggle { background: none; border: none; color: var(--text-secondary); font-size: 1.2em; cursor: pointer; transition: color 0.2s; padding: 5px; } #pastResizesToggle:hover { color: var(--accent-primary); } .past-resizes-panel { background-color: var(--bg-primary); border-radius: var(--border-radius-sm); padding: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); } .past-resizes-panel h4 { margin-top: 0; margin-bottom: 10px; font-size: 0.9em; color: var(--text-secondary); } #pastResizesList { list-style: none; padding: 0; margin: 0; max-height: 150px; overflow-y: auto; } #pastResizesList li { padding: 10px; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); margin-bottom: 8px; cursor: pointer; font-size: 0.85em; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; } #pastResizesList li:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateX(3px); } #pastResizesList li .format-tag { background-color: var(--accent-secondary); color: white; padding: 3px 6px; border-radius: var(--border-radius-sm); font-size: 0.9em; font-weight: 500; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 992px) { .main-content { grid-template-columns: 1fr; } .app-header { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 768px) { body { padding: 10px; } .crop-modal-body { flex-direction: column; } 
#cropImageContainer{min-height:250px;flex-basis:50%;width:100%}.crop-controls-panel{flex-basis:50%}.modal-action-buttons{justify-content:space-between}.modal-action-buttons .action-button{flex-grow:1}.image-preview-wrapper{height:240px}.preview-thumb.locked-pro{position:relative;overflow:hidden}.preview-thumb.locked-pro::after{content:'\f023';font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.6);color:#f39c12;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:5;backdrop-filter:blur(2px)}.thumb-button.locked{background:#f59e0b!important;color:#fff}.thumb-button.locked:hover{background:#d97706!important}#downloadAllButton,#downloadButtonElement,#processImageButtonElement,#shareButtonElement{border:none;border-radius:12px;padding:14px 24px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;transition:all .3s ease;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:10px}#downloadAllButton:hover,#downloadButtonElement:hover,#processImageButtonElement:hover,#shareButtonElement:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.2);filter:brightness(1.1)}#processImageButtonElement{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);box-shadow:0 4px 15px rgba(124,58,237,.4)}#downloadAllButton,#downloadButtonElement{background:linear-gradient(135deg,#059669 0%,#10b981 100%);box-shadow:0 4px 15px rgba(16,185,129,.4)}#shareButtonElement{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);box-shadow:0 4px 15px rgba(239,68,68,.4)}#downloadButtonElement:disabled,#processImageButtonElement:disabled,#shareButtonElement:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.rec-badge{background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:800;padding:3px 10px;border-radius:50px;border:1px solid #bbf7d0;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;margin-top:4px}.rec-badge i{font-size:10px}.past-resizes-list li.pro-locked{display:flex;justify-content:space-between;align-items:center;background:#fff1f2!important;border:1px solid #fecaca!important;padding:10px 15px;border-radius:10px;cursor:pointer;margin-bottom:8px;transition:.3s}.pro-tag-badge{background:linear-gradient(135deg,#f39c12,#d35400);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;margin-left:8px;text-transform:uppercase;animation:shine 2s infinite}.locked-icon-gold{color:#f39c12;margin-right:5px}@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseSuccess{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shine{0%,100%{opacity:.8}50%{opacity:1}}.custom-scroll::-webkit-scrollbar{width:0;background:transparent}