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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        /* ── Watermark font picker ── */
        .wm-select { position: relative; max-width: 360px; }
        .wm-select-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
        }
        .wm-select-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            max-height: 260px;
            overflow: auto;
            border: 1px solid #ddd;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0,0,0,.10);
            z-index: 99999;
        }
        .wm-select-item {
            padding: 10px 12px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
        .wm-select-item:hover { background: #f5f5f5; }
        .wm-select-item small { opacity: .55; }

        #wmTextOverlay {
            position: absolute;
            z-index: 9997;
            left: 0; top: 0;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
            line-height: 1.1;
            text-shadow: 0 2px 6px rgba(0,0,0,.35);
        }

        /* ── Layout ── */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 40px 30px;
            text-align: center;
            position: relative;
        }

        /* ── Auth bar ── */
        #authBar {
            position: absolute;
            top: 15px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .hero-actions {
            display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
            position: relative; z-index: 1;
            animation: fadeUp 0.6s 0.3s ease both;
			margin-top: 15px;
        }
        .btn-hero-primary {
            bbackground: white; color: var(--blue);
            padding: 10px 32px; border-radius: 10px;
			border: 2px solid rgba(255,255,255,0.3);
            font-weight: 700; font-size: 1em; text-decoration: none;
            box-shadow: 0 8px 30px rgba(0,0,0,0.25);
            transition: all 0.25s; display: flex; align-items: center; gap: 8px;
        }
        .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.35); }
        .btn-hero-secondary {
            background: rgba(255,255,255,0.12);
            border: 2px solid rgba(255,255,255,0.3);
            color: white; padding: 10px 32px; border-radius: 10px;
            font-weight: 600; font-size: 1em; text-decoration: none;
            transition: all 0.25s;
        }
        .btn-hero-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); }
		
        #loggedOutButtons,
        #loggedInButtons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.95;
        }

        .content {
            padding: 40px;
        }

        /* ── Upload area ── */
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 12px;
            padding: 60px 40px;
            text-align: center;
            background: #f8f9ff;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        .upload-area:hover { background: #f0f2ff; border-color: #764ba2; }
        .upload-area.dragover { background: #e8ebff; border-color: #764ba2; transform: scale(1.02); }
        .upload-icon { font-size: 4em; margin-bottom: 20px; }
        .upload-area h2 { font-size: 1.5em; margin-bottom: 10px; color: #667eea; }
        .upload-area p { color: #666; font-size: 1.1em; }
        #fileInput { display: none; }

        /* ── Size presets ── */
        .size-presets { margin-bottom: 30px; }
        .size-presets h3 { margin-bottom: 15px; color: #333; font-size: 1.3em; }

        .preset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .preset-btn {
            padding: 7px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
        }
        .preset-btn:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.2); }
        .preset-btn.active { border-color: #667eea; background: #f8f9ff; }
        .preset-btn input[type="checkbox"] { margin-right: 10px; }
        .preset-name { font-weight: 600; color: #333; display: block; margin-bottom: 5px; }
        .preset-size { font-size: 0.9em; color: #666; }

        /* ── Custom size / options ── */
        .custom-size {
            background: #f8f9ff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .custom-size h3 { margin-bottom: 15px; color: #333; }

        .size-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .input-group { display: flex; flex-direction: column; }
        .input-group label { margin-bottom: 8px; font-weight: 500; color: #555; }
        .input-group input {
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }
        .input-group input:focus { outline: none; border-color: #667eea; }

        .options {
            background: #f8f9ff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .options h3 { margin-bottom: 15px; color: #333; }

        .option-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 6px;
        }
        .option-row label { margin-left: 10px; cursor: pointer; font-weight: 500; }

        .format-select {
            margin-left: 10px;
            padding: 8px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
        }

        /* ── Process button ── */
        .process-btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.2em;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
        }
        .process-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102,126,234,0.4); }
        .process-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ── Results ── */
        .results { display: none; }
        .results.active { display: block; }
        .results h3 { margin-bottom: 20px; font-size: 1.5em; color: #333; }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .result-item {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            background: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .result-item:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

        .result-image {
            width: 100%;
            height: 200px;
            object-fit: contain;
            background: #f5f5f5;
            padding: 10px;
        }

        .result-info { padding: 15px; background: #f8f9ff; }
        .result-info h4 { margin-bottom: 8px; color: #667eea; font-size: 1.1em; }
        .result-info p { color: #666; font-size: 0.9em; margin-bottom: 5px; }

        .download-btn {
            width: 100%;
            padding: 10px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
            transition: background 0.3s ease;
        }
        .download-btn:hover { background: #764ba2; }

        .download-all-btn {
            width: 100%;
            padding: 15px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: background 0.3s ease;
        }
        .download-all-btn:hover { background: #218838; }

        /* ── Preview section ── */
        .preview-section {
            margin-bottom: 30px;
            display: none;
        }
        .preview-section.active { display: block; }

        .preview-image {
            max-width: 100%;
            display: block;
            margin: 10px auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .original-info {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            margin-top: -20px;
        }

        /* ── Crop section ── */
        .crop-section {
            background: #f8f9ff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            display: none;
        }
        .crop-section.active { display: block; }
        .crop-section h3 { margin-bottom: 15px; color: #333; }

        .crop-container {
            position: relative;
            max-width: 100%;
            margin: 20px auto;
            display: inline-block;
            cursor: crosshair;
            background: #000;
        }

        .crop-canvas-wrapper {
            position: relative;
            display: inline-block;
            max-width: 100%;
        }

        #cropCanvas {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .crop-overlay {
            position: absolute;
            border: 2px dashed #667eea;
            background: rgba(102,126,234,0.2);
            cursor: move;
            display: none;
        }
        .crop-overlay.active { display: block; }

        .crop-handle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #667eea;
            border: 2px solid white;
            border-radius: 50%;
        }
        .crop-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
        .crop-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
        .crop-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
        .crop-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
        .crop-handle.n  { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
        .crop-handle.s  { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
        .crop-handle.w  { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
        .crop-handle.e  { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }

        .crop-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .crop-btn {
            flex: 1;
            min-width: 100px;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .crop-btn.primary { background: #667eea; color: white; }
        .crop-btn.primary:hover { background: #764ba2; }
        .crop-btn.secondary { background: #e0e0e0; color: #333; }
        .crop-btn.secondary:hover { background: #d0d0d0; }

        .crop-presets {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .crop-preset-btn {
            padding: 8px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9em;
            white-space: nowrap;
        }
        .crop-preset-btn:hover { border-color: #667eea; background: #f8f9ff; }

        /* ── Advanced editing ── */
        .advanced-editing {
            background: #f8f9ff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            display: none;
        }
        .advanced-editing.active { display: block; }
        .advanced-editing h3 {
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .toggle-advanced {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9em;
            font-weight: 600;
            transition: background 0.3s ease;
            white-space: nowrap;
        }
        .toggle-advanced:hover { background: #764ba2; }

        .editing-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 15px;
        }

        .editing-group {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
        }
        .editing-group h4 { margin-bottom: 12px; color: #667eea; font-size: 1em; }

        .editing-control { margin-bottom: 12px; }
        .editing-control:last-child { margin-bottom: 0; }
        .editing-control label {
            display: block;
            margin-bottom: 6px;
            font-size: 0.9em;
            color: #555;
            font-weight: 500;
        }

        .editing-control input[type="range"] {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #e0e0e0;
            outline: none;
        }
        .editing-control input[type="range"]::-webkit-slider-thumb {
            width: 16px; height: 16px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
        }
        .editing-control input[type="range"]::-moz-range-thumb {
            width: 16px; height: 16px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
            border: none;
        }
        .editing-control input[type="number"],
        .editing-control input[type="text"],
        .editing-control input[type="color"] {
            width: 100%;
            padding: 8px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 0.9em;
        }
        .editing-control input[type="color"] { height: 40px; cursor: pointer; }

        .value-display {
            display: inline-block;
            margin-left: 8px;
            color: #667eea;
            font-weight: 600;
        }

        .watermark-position {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 8px;
        }
        .watermark-position button {
            padding: 8px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            font-size: 0.8em;
            transition: all 0.3s ease;
        }
        .watermark-position button:hover { border-color: #667eea; background: #f8f9ff; }
        .watermark-position button.active { border-color: #667eea; background: #667eea; color: white; }

        /* ── Pricing modal ── */
        .pricing-modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        .pricing-modal.active { display: flex; }

        .pricing-content {
            background: white;
            border-radius: 16px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 40px;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }

        .pricing-close {
            position: absolute;
            top: 20px; right: 20px;
            background: none;
            border: none;
            font-size: 2em;
            cursor: pointer;
            color: #999;
            line-height: 1;
            padding: 0;
            width: 40px; height: 40px;
        }
        .pricing-close:hover { color: #333; }

        .pricing-header { text-align: center; margin-bottom: 40px; }
        .pricing-header h2 {
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .pricing-header p { font-size: 1.2em; color: #666; }

        .pricing-plans {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .pricing-plan {
            background: white;
            border: 3px solid #e0e0e0;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }
        .pricing-plan:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .pricing-plan.featured {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
            transform: scale(1.05);
        }
        .pricing-plan.featured::before {
            content: '⭐ BEST VALUE';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
            white-space: nowrap;
        }

        .plan-name { font-size: 1.5em; font-weight: 600; margin-bottom: 15px; color: #333; }
        .plan-price { font-size: 3em; font-weight: 700; color: #667eea; margin-bottom: 10px; }
        .plan-price small { font-size: 0.4em; color: #999; }
        .plan-billing { color: #999; margin-bottom: 20px; font-size: 0.9em; }

        .plan-features { text-align: left; margin-bottom: 25px; }
        .plan-features li { padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #666; }
        .plan-features li:last-child { border-bottom: none; }
        .plan-features li::before { content: '✓ '; color: #667eea; font-weight: 600; margin-right: 8px; }
        .plan-features li.disabled { color: #ccc; text-decoration: line-through; }
        .plan-features li.disabled::before { content: '✗ '; color: #ccc; }

        .plan-button {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .plan-button.free { background: #e0e0e0; color: #666; }
        .plan-button.premium { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .plan-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        .comparison-table { margin-top: 40px; overflow-x: auto; }
        .comparison-table h3 { text-align: center; margin-bottom: 20px; color: #333; }
        .comparison-table table { width: 100%; border-collapse: collapse; }
        .comparison-table th,
        .comparison-table td { padding: 15px; text-align: center; border-bottom: 1px solid #e0e0e0; }
        .comparison-table th { background: #f8f9ff; font-weight: 600; color: #667eea; }
        .comparison-table td:first-child { text-align: left; font-weight: 500; }

        /* ── Badges & warnings ── */
        .upgrade-badge {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75em;
            font-weight: 600;
            margin-left: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
            border: none;
        }
        .upgrade-badge:hover { transform: scale(1.05); }

        .limitation-warning {
            background: #fff3cd;
            border: 2px solid #ffc107;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        .limitation-warning.active { display: block; }
        .limitation-warning strong { color: #856404; }

        /* ── Auth modal ── */
        .auth-tab-btn {
            flex: 1;
            padding: 12px;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            font-weight: 600;
            color: #666;
            font-size: 1em;
            transition: all 0.3s ease;
        }
        .auth-tab-btn.active { color: #667eea; border-bottom-color: #667eea; }
        .auth-tab-btn:hover { color: #667eea; }

        .auth-input {
            width: 100%;
            padding: 14px;
            margin: 10px 0;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }
        .auth-input:focus { outline: none; border-color: #667eea; }

        .auth-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1em;
            cursor: pointer;
            margin: 15px 0 10px 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .auth-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,0.4); }
        .auth-button:active { transform: translateY(0); }

        /* ── Profile modal ── */
        .profile-section {
            background: #f8f9ff;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid #e8e8f0;
        }
        .profile-section h3 {
            font-size: 1.1em;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8e8f0;
        }
        .profile-input {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }
        .profile-input:focus { outline: none; border-color: #667eea; }

        .profile-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95em;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.3s ease;
        }
        .profile-btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .profile-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,0.4); }
        .profile-btn-danger { background: white; color: #dc3545; border: 2px solid #dc3545; }
        .profile-btn-danger:hover { background: #dc3545; color: white; }

        .profile-status-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            margin-left: 10px;
        }
        .status-free { background: #e8f5e9; color: #2e7d32; }
        .status-premium { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }

        .profile-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8f0;
            font-size: 0.95em;
            color: #555;
            flex-wrap: wrap;
            gap: 6px;
        }
        .profile-info-row:last-child { border-bottom: none; }
        .profile-info-row strong { color: #333; }

        .profile-notice {
            padding: 10px 12px;
            border-radius: 10px;
            margin: 10px 0 14px;
            font-size: 14px;
            line-height: 1.3;
            background: #fff3cd;
            border: 1px solid #ffe69c;
            color: #664d03;
        }
        .hidden { display: none !important; }

        /* ================================================================
           MOBILE — 768px and below
           ================================================================ */
        @media (max-width: 768px) {

            body { padding: 10px; }

            /* Header */
            .header {
                padding: 70px 16px 24px; /* top padding to clear auth bar */
                text-align: center;
            }
            .header h1 { font-size: 1.5em; }
            .header p { font-size: 0.95em; }

            /* Auth bar — stack under header on very small screens */
            #authBar {
                position: absolute;
                top: 10px;
                right: 10px;
                left: 10px;
                justify-content: flex-end;
                flex-wrap: wrap;
                gap: 6px;
            }
            #loggedOutButtons,
            #loggedInButtons {
                gap: 6px;
            }
            #authBar button {
                padding: 6px 12px !important;
                font-size: 0.8em !important;
            }
            #userEmailDisplay {
                font-size: 0.75em !important;
                max-width: 140px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* Content */
            .content { padding: 16px; }

            /* Upload area */
            .upload-area { padding: 36px 20px; }
            .upload-icon { font-size: 2.8em; }
            .upload-area h2 { font-size: 1.2em; }
            .upload-area p { font-size: 0.9em; }

            /* Preview header controls — stack vertically */
            #previewSection > div:first-child {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 12px !important;
            }
            #previewSection > div:first-child > div:last-child {
                width: 100%;
                justify-content: flex-start !important;
                gap: 8px !important;
            }

            /* Preview size slider */
            #previewWrap > div:first-child {
                flex-wrap: wrap;
                gap: 8px;
            }
            #previewWrap > div:first-child input[type="range"] {
                max-width: 100% !important;
                width: 100% !important;
                flex: 1 1 100%;
            }

            /* Watermark scale row — stack on mobile */
            #authBar ~ * .editing-control,
            div[style*="Watermark Size"] {
                flex-wrap: wrap !important;
            }

            /* Quick-select buttons — allow scrolling row */
            .size-presets > div[style*="flex"] {
                flex-wrap: wrap !important;
                gap: 8px !important;
            }
            .crop-preset-btn {
                font-size: 0.82em;
                padding: 7px 10px;
            }

            /* Saved combos block */
            div[style*="comboName"] {
                flex-direction: column;
            }
            #comboName {
                min-width: unset !important;
                width: 100% !important;
            }
            #comboSelect {
                min-width: unset !important;
                width: 100% !important;
            }

            /* Size inputs: single column */
            .size-inputs { grid-template-columns: 1fr; }

            /* Preset grid: 2 columns on mobile */
            .preset-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

            /* Editing grid: single column */
            .editing-grid { grid-template-columns: 1fr; }

            /* Crop buttons: wrap */
            .crop-buttons { flex-wrap: wrap; }
            .crop-btn { flex: 1 1 calc(50% - 5px); min-width: unset; }

            /* Enhancement panel sliders */
            .enh-sliders { grid-template-columns: 1fr !important; }
            .enh-quick { gap: 6px; }
            .enh-btn { font-size: 0.8em; padding: 6px 10px; }

            /* Background remover color swatches */
            .bg-color-swatches { gap: 8px; }

            /* Process button */
            .process-btn { font-size: 1em; padding: 15px; }

            /* Result grid: single column */
            .result-grid { grid-template-columns: 1fr; }

            /* Pricing modal */
            .pricing-content { padding: 20px 16px; width: 95%; }
            .pricing-header h2 { font-size: 1.6em; }
            .pricing-plans { grid-template-columns: 1fr; gap: 20px; }
            .pricing-plan.featured { transform: scale(1); }
            .plan-price { font-size: 2.2em; }

            /* Comparison table: scroll horizontally */
            .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .comparison-table table { min-width: 420px; }
            .comparison-table th,
            .comparison-table td { padding: 10px 8px; font-size: 0.85em; }

            /* Watermark position grid: full width buttons */
            .watermark-position button { font-size: 0.72em; padding: 6px 4px; }

            /* wm-select font picker: full width */
            .wm-select { max-width: 100%; }

            /* Options row: wrap label underneath */
            .option-row { flex-wrap: wrap; }
            .option-row label { margin-left: 0; }
            .format-select { margin-left: 0; width: 100%; }

            /* Profile info row: stack */
            .profile-info-row { flex-direction: column; align-items: flex-start; }
            .profile-status-badge { margin-left: 0; margin-top: 4px; }
        }

        /* ================================================================
           EXTRA SMALL — 480px and below
           ================================================================ */
        @media (max-width: 480px) {

            .header h1 { font-size: 1.25em;
mmargin-top: 10px;			}

            /* Preset grid: single column below 480 */
            .preset-grid { grid-template-columns: 1fr; }

            /* Crop buttons: single column */
            .crop-btn { flex: 1 1 100%; }

            /* Enhancement quick-action buttons: 2 per row */
            .enh-quick { display: grid; grid-template-columns: 1fr 1fr; }

            /* Quick-select colored buttons: full width */
            .size-presets > div[style*="flex"] .crop-preset-btn {
                width: 100%;
                text-align: center;
            }

            /* Saved combo controls: full width */
            .size-presets div[style*="comboSelect"] {
                flex-direction: column;
                width: 100%;
            }

            /* Auth buttons very small */
            #authBar button { padding: 5px 9px !important; font-size: 0.75em !important; }

            /* Header more compact */
            .header { padding: 60px 12px 18px; }

            /* Pricing */
            .pricing-content { padding: 16px 12px; }
            .plan-price { font-size: 1.9em; }
        }
		
        /* ================================================================
           EXTRA SMALL — 350px and below
           ================================================================ */
        @media (max-width: 480px) {

    #userEmailDisplay {
		max-width:100px;
	}

            /* Auth buttons very small */
    #authBar button { padding: 2px 2px !important; font-size: 0.75em !important; }

}