/* OceanofTools — watermark_on_image.php
   Page-specific tool/workspace CSS only. Universal header/footer stays in /style/header_footer.css. */
/* ===== Migrated from image_tools/watermark_on_image.php inline <style> ===== */
.container1 {
  max-width:none;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 30px;
  margin-left: 20px;
  margin-right: 20px;
}

/* === Hero Section === */
.hero {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
}

.hero-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 10px;
  color: #1a75ff;
}

h1 {
  font-size: 2.2rem;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1a75ff, #0d47aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  color: #555;
  font-size: 1.1rem;
  max-width: 750px;
  margin: 0 auto;
  opacity: 0.9;
}

        

        .settings-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            margin-bottom: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 30px;
            margin-left: 20px;
            margin-right: 20px;
            text-align: center;
            align-items: center;
        }

        .settings-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .setting-group {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 12px;
            border: 2px solid #e9ecef;
        }

        .setting-label {
            font-weight: 600;
            margin-bottom: 1rem;
            display: block;
            color: #495057;
        }

        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .radio-option input[type="radio"],
        .radio-option input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #14b89a;
        }

        .radio-option label {
            cursor: pointer;
            font-weight: 500;
        }

        .text-input, .select-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            font-family: inherit;
        }

        .text-input:focus, .select-input:focus {
            outline: none;
            border-color: #14b89a;
        }

        .color-input {
            width: 60px;
            height: 40px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .color-input:focus {
            border-color: #14b89a;
        }

        .slider-container {
            margin-bottom: 1rem;
        }

        .slider-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #e9ecef;
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #14b89a;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #14b89a;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .tool-interface {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .input-section, .output-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .file-input-area {
            border: 3px dashed #14b89a;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            background: #f8f9ff;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 1rem;
        }

        .file-input-area:hover {
            background: #f0f4ff;
            border-color: #5a67d8;
        }

        .file-input-area.dragover {
            background: #e6f3ff;
            border-color: #4299e1;
        }

        .file-input {
            display: none;
        }

        .upload-icon {
            font-size: 3rem;
            color: #14b89a;
            margin-bottom: 1rem;
        }

        .upload-text {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .upload-subtext {
            font-size: 0.9rem;
            color: #999;
        }

        .image-preview {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            margin: 1rem 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .watermark-preview {
            max-width: 80px;
            max-height: 80px;
            border-radius: 4px;
            margin: 0.5rem 0;
            border: 2px solid #e9ecef;
        }

        .canvas-container {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
        }

        #watermarkCanvas {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .action-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            background: linear-gradient(135deg, #14b89a, #0d8d76);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }

        .action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .action-btn.secondary {
            background: linear-gradient(135deg, #6c757d, #495057);
            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
        }

        .action-btn.secondary:hover {
            box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-top: 1rem;
            display: none;
            border: 1px solid #c3e6cb;
        }

        .watermark-type-toggle {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .toggle-btn {
            padding: 0.5rem 1rem;
            border: 2px solid #e9ecef;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .toggle-btn.active {
            background: #14b89a;
            color: white;
            border-color: #14b89a;
        }

        .watermark-section {
            display: none;
        }

        .watermark-section.active {
            display: block;
        }

        .color-preset {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid transparent;
            transition: border-color 0.3s;
            margin: 2px;
        }

        .color-preset.selected {
            border-color: #14b89a;
        }

        .color-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .hero {
                margin: 1rem;
                padding: 2rem 1rem;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .tool-interface {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            
                grid-template-columns: 1fr;
            }

            .action-buttons {
                flex-direction: column;
                align-items: center;
            }

            .action-btn {
                width: 100%;
                max-width: 300px;
            }
        }
        
        @media (max-width: 768px) {
    .settings-container,
    .input-section,
    .output-section,
    .setting-group {
        width: 95%;
        margin: 0 auto; /* centers them */
        padding: 0rem;
        margin:0 0 0 0;
    }
    
    .settings-grid {width:120%;
                    display:none;}
}

/* ===== Migrated from image_tools/watermark_on_image.php inline <style> ===== */
.how-to-container {
            max-width:none;
            margin-left: 50px;
            margin-right:50px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .hero-header {
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            color: white;
            text-align: center;
            padding: 3rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .hero-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: shimmer 3s ease-in-out infinite;
        }

        @keyframes shimmer {
            0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
            50% { transform: translateX(0%) translateY(0%) rotate(180deg); }
        }

        .hero-header h1 {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .hero-header p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .content-section {
            padding: 3rem 2rem;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-header h2 {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .section-header p {
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .step-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
        }

        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
        }

        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            color: white;
            border-radius: 50%;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
        }

        .step-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
        }

        .step-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .step-features {
            list-style: none;
            padding: 0;
        }

        .step-features li {
            padding: 0.5rem 0;
            padding-left: 2rem;
            position: relative;
            color: #555;
        }

        .step-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #14b89a;
            font-weight: bold;
        }

        .example-section {
            background: linear-gradient(135deg, #f8f9ff 0%, #e6f2ff 100%);
            padding: 3rem 2rem;
            margin: 3rem 0;
        }

        .example-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .example-header h3 {
            font-size: 2rem;
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns for images */
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    position: relative; /* needed for VS overlay */
}

.vs-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

        .image-showcase {
            text-align: center;
            position: relative;
        }

        .image-showcase img {
            width: 100%;
            max-width: 400px;
            border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .image-showcase:hover img {
            transform: scale(1.02);
        }

        .image-label {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.9rem;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        

        .vs-indicator::before,
        .vs-indicator::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 2px;
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            top: 50%;
        }

        .vs-indicator::before {
            left: -70px;
        }

        .vs-indicator::after {
            right: -70px;
        }

        .tips-section {
            background: white;
            padding: 3rem 2rem;
        }

        .tips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .tip-card {
            background: linear-gradient(135deg, #f8f9ff 0%, #e6f2ff 100%);
            border-radius: 15px;
            padding: 2rem;
            border-left: 5px solid #14b89a;
            transition: all 0.3s ease;
        }

        .tip-card:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);
        }

        .tip-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .tip-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
        }

        .tip-description {
            color: #666;
            line-height: 1.6;
        }

        .cta-section {
            background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%);
            color: white;
            text-align: center;
            padding: 3rem 2rem;
        }

        .cta-button {
            display: inline-block;
            background: white;
            color: #14b89a;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            margin-top: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .comparison-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .conatainer1 {max-width:100%
            };
            
            .vs-indicator {
                transform: rotate(90deg);
            }
            
            .vs-indicator::before,
            .vs-indicator::after {
                width: 30px;
            }
            
            .vs-indicator::before {
                left: -45px;
            }
            
            .vs-indicator::after {
                right: -45px;
            }
            
            .hero-header h1 {
                font-size: 2rem;
            }
            
            .steps-grid {
                grid-template-columns: 1fr;
            }
        }

/* ===== Migrated from style/tool-suite.css ===== */
/* OceanofTools shared premium tool interface */
:root{--oot-primary:#0e9379;--oot-primary-dark:#087461;--oot-secondary:#14b8a6;--oot-accent:#06b6d4;--oot-bg:#f3f7fc;--oot-card:#ffffff;--oot-text:#132238;--oot-muted:#61758f;--oot-border:#dbe3f0;--oot-success:#15803d;--oot-danger:#b91c1c;--oot-warning:#a16207;--oot-radius:24px;--oot-shadow:0 22px 56px rgba(17,31,61,.1);--oot-shadow-strong:0 28px 70px rgba(9,19,37,.16)}
html{scroll-behavior:smooth}body.oot-modern{margin:0;background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 18%),radial-gradient(circle at top right,rgba(6,182,212,.08),transparent 18%),linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);color:var(--oot-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.oot-modern *{box-sizing:border-box}body.oot-modern [hidden]{display:none!important}body.oot-modern img,body.oot-modern canvas,body.oot-modern svg,body.oot-modern video{max-width:100%}body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font:inherit}body.oot-modern button{touch-action:manipulation}body.oot-modern a,body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{outline-offset:3px}body.oot-modern :focus-visible{outline:3px solid rgba(37,99,235,.30)}
body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{position:relative;width:min(1240px,calc(100% - 28px));margin:28px auto 24px!important;padding:36px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:30px!important;background:radial-gradient(circle at top right,rgba(6,182,212,.18),transparent 22%),linear-gradient(135deg,#0f1c34,#142749 58%, #1b2f57 100%)!important;color:#fff!important;box-shadow:var(--oot-shadow-strong)!important;text-align:left!important;overflow:hidden}body.oot-modern .container1>.hero{width:100%;margin:0 0 24px!important}body.oot-modern .hero h1,body.oot-modern .hero h1 *{margin-top:0!important;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#fff!important;line-height:1.04!important;font-size:clamp(2rem,5vw,3.55rem)!important;letter-spacing:-.04em}body.oot-modern .hero p{max-width:860px!important;margin:14px 0 0!important;color:rgba(255,255,255,.82)!important;font-size:1.05rem!important;line-height:1.72!important}body.oot-modern .hero-icon{display:inline-grid!important;place-items:center;width:66px;height:66px;margin:0 0 15px!important;border-radius:20px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:1.7rem!important;border:1px solid rgba(255,255,255,.08)}
body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(1240px,calc(100% - 28px))!important;max-width:1240px!important;margin:24px auto!important;border:1px solid var(--oot-border)!important;border-radius:var(--oot-radius)!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:var(--oot-shadow)!important;padding:28px!important;overflow:visible!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2,body.oot-modern .container2 .container1,body.oot-modern .tool-container .container1{width:100%!important;margin:18px 0!important;box-shadow:none!important}
body.oot-modern .content-section,body.oot-modern .faq-section,body.oot-modern .how-to-use,body.oot-modern .features-section,body.oot-modern .about-section,body.oot-modern .stats-card,body.oot-modern .feature-card,body.oot-modern .result-card,body.oot-modern .doc-step,body.oot-modern .doc-section{border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:0 14px 28px rgba(17,31,61,.06)!important}body.oot-modern h1,body.oot-modern h2,body.oot-modern h3{color:var(--oot-text);overflow-wrap:anywhere}body.oot-modern h2{line-height:1.18;letter-spacing:-.03em}body.oot-modern p,body.oot-modern li{line-height:1.7}body.oot-modern .section-description,body.oot-modern .description,body.oot-modern .subtitle,body.oot-modern .help-text{color:var(--oot-muted)!important}
body.oot-modern input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.oot-modern select,body.oot-modern textarea{max-width:100%;min-height:48px;padding:12px 14px;border:1px solid #d2dcec!important;border-radius:16px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:none!important}body.oot-modern textarea{resize:vertical;line-height:1.6}body.oot-modern input:focus,body.oot-modern select:focus,body.oot-modern textarea:focus{border-color:var(--oot-primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}body.oot-modern input[type=file]{max-width:100%}body.oot-modern input[type=checkbox],body.oot-modern input[type=radio]{accent-color:var(--oot-primary)}
body.oot-modern .btn,body.oot-modern .primary-btn,body.oot-modern .action-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern .download-btn,body.oot-modern .upload-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:16px!important;font-weight:800!important;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,border-color .18s ease;background:#fff;color:var(--oot-text);border:1px solid #d7e0ef!important;box-shadow:0 10px 24px rgba(17,31,61,.06)!important}body.oot-modern .primary-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{border:1px solid transparent!important;background:linear-gradient(135deg,var(--oot-primary),var(--oot-secondary))!important;color:#fff!important;box-shadow:0 16px 34px rgba(37,99,235,.26)!important}body.oot-modern button:hover:not(:disabled),body.oot-modern .btn:hover{transform:translateY(-1px)}body.oot-modern button:disabled{cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important}
body.oot-modern .drop-zone,body.oot-modern .upload-area,body.oot-modern .file-upload,body.oot-modern [class*=dropzone]{border:2px dashed #b8c8e4!important;border-radius:20px!important;background:linear-gradient(180deg,#fbfcff,#f4f8ff)!important;transition:.2s ease;padding:18px!important}body.oot-modern .is-dragging{border-color:var(--oot-primary)!important;background:#eef1ff!important}
body.oot-modern .result,body.oot-modern .result-section,body.oot-modern .output-section,body.oot-modern .output-container,body.oot-modern .preview-section,body.oot-modern .preview-area{min-width:0;border:1px solid var(--oot-border)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 28px rgba(17,31,61,.05)!important}body.oot-modern .success,body.oot-modern .success-message{border:1px solid #bde5c7!important;background:#f0fff4!important;color:var(--oot-success)!important}body.oot-modern .error,body.oot-modern .error-message{border:1px solid #f2c6c6!important;background:#fff4f4!important;color:var(--oot-danger)!important}
body.oot-modern table{width:100%;border-collapse:collapse}body.oot-modern th,body.oot-modern td{padding:12px 13px;border:1px solid var(--oot-border);text-align:left}body.oot-modern th{background:#f4f7fd}.oot-table-wrap{max-width:100%;overflow:auto;border-radius:16px;border:1px solid var(--oot-border)}.oot-table-wrap table{min-width:520px}
body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{min-width:0}body.oot-modern canvas{height:auto!important}body.oot-modern iframe{max-width:100%;border-radius:16px}
body.oot-modern .faq-item,body.oot-modern details{border-radius:18px;border:1px solid var(--oot-border)!important;background:#fff!important}body.oot-modern details summary{cursor:pointer;padding:14px 16px;font-weight:800}.oot-toast{position:fixed;right:18px;bottom:18px;z-index:99999;width:min(390px,calc(100% - 36px));padding:14px 16px;border:1px solid #f2c6c6;border-radius:18px;background:#fff4f4;color:var(--oot-danger);box-shadow:0 16px 50px rgba(15,23,42,.18);font-weight:650}.oot-toast.is-success{border-color:#bde5c7;background:#f0fff4;color:var(--oot-success)}.oot-toast button{float:right;border:0;background:transparent;color:inherit;font-size:1.1rem}.oot-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.oot-modern .stat-card,body.oot-modern .metric-card,body.oot-modern .feature-card,body.oot-modern .color-card,body.oot-modern .palette-card,body.oot-modern .faq-card{padding:18px!important}
body.oot-modern .progress-bar{background:#e7eef9!important;border-radius:999px!important;overflow:hidden}body.oot-modern .progress-fill{background:linear-gradient(90deg,var(--oot-primary),var(--oot-secondary))!important;border-radius:999px!important}
@media(max-width:900px){body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{grid-template-columns:1fr!important;flex-direction:column!important}body.oot-modern [style*="grid-template-columns"]{max-width:100%}body.oot-modern .sidebar,body.oot-modern [class*=sidebar]{position:static!important;width:100%!important;max-width:none!important}}
@media(max-width:720px){body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{width:min(100% - 18px,1240px);padding:24px 19px!important;border-radius:24px!important;margin-top:14px!important}body.oot-modern .container1>.hero{width:100%}body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(100% - 18px,1240px)!important;margin:14px auto!important;padding:18px!important;border-radius:20px!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2{width:100%!important}body.oot-modern .tool-interface>*,body.oot-modern .input-section,body.oot-modern .output-section{min-width:0!important;width:100%!important}body.oot-modern .button-group,body.oot-modern .actions,body.oot-modern .action-buttons,body.oot-modern .controls{flex-wrap:wrap!important}body.oot-modern .button-group>button,body.oot-modern .actions>button,body.oot-modern .action-buttons>button{flex:1 1 145px;min-height:46px}body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font-size:16px!important}body.oot-modern .search-container{width:min(100% - 18px,1240px)!important;margin-left:auto!important;margin-right:auto!important}body.oot-modern pre,body.oot-modern code{white-space:pre-wrap;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.oot-modern *,body.oot-modern *:before,body.oot-modern *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.oot-modern .doc-container,body.oot-modern .docs-container,body.oot-modern .documentation,body.oot-modern .doc-section,body.oot-modern .doc-steps,body.oot-modern .doc-step,body.oot-modern .doc-step-content,body.oot-modern .feature-card,body.oot-modern .section-content {min-width: 0;max-width: 100%;overflow-wrap: anywhere}
body.oot-modern .doc-code-block,body.oot-modern .code-block,body.oot-modern pre {max-width: 100%;overflow-x: auto;border-radius:16px;border:1px solid var(--oot-border);background:#0f1c34;color:#e7efff;padding:16px}
@media(max-width:720px){body.oot-modern .doc-step{gap:12px!important;padding-left:14px!important;padding-right:14px!important}body.oot-modern .doc-step-content{width:auto!important;flex:1 1 auto!important}body.oot-modern .doc-step-number{flex:0 0 auto!important}}
@media(max-width:720px){body.oot-modern table:not(.oot-no-scroll){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}body.oot-modern table:not(.oot-no-scroll) caption{display:block;width:100%}}

/* ===== Migrated from image_tools/assets/legacy-image-fixes.css ===== */
/* Conservative compatibility fixes for the original image tool pages. */
html, body { max-width: 100%; overflow-x: hidden; }
img, canvas, video, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.nits-wrap { max-width: 1280px; margin: 28px auto; padding: 0 18px; }
.nits-box { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; padding: 24px; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.nits-box h2 { margin: 0 0 8px; color: #172033; font-size: 1.45rem; }
.nits-box > p { margin: 0 0 18px; color: #667085; line-height: 1.65; }
.nits-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.nits-grid a { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: start; padding: 14px; border: 1px solid #e4e7ec; border-radius: 12px; color: inherit; text-decoration: none; background: #fcfcfd; }
.nits-grid a:hover { border-color: #a78bfa; box-shadow: 0 7px 18px rgba(124,58,237,.1); transform: translateY(-1px); }
.nits-grid span { grid-row: span 2; font-size: 1.45rem; }.nits-grid strong { color: #101828; }.nits-grid small { color: #667085; line-height: 1.4; }
@media (max-width: 900px) {
  .nits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .container1,.container2,.editor-container,.tool-container,.main-container { max-width: calc(100% - 20px) !important; margin-left: 10px !important; margin-right: 10px !important; }
}
@media (max-width: 560px) {
  .nits-grid { grid-template-columns: 1fr; }
  .nits-wrap { padding: 0 10px; }
  .nits-box { padding: 18px; }
}

/* ============================================================
   Compact image-tool workspaces — 2026-08-09
   Desktop: preview on the left, controls/actions on the right.
   Mobile/tablet: retain a natural stacked flow.
   ============================================================ */

@media (min-width: 901px) {
  /* Give editing tools room without making content full-bleed. */
  .container1,
  .app-wrapper,
  .settings-container,
  .signature-workspace,
  .editor-container {
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Common legacy family: blur / hue / saturation / sharpen / rainbow / upscaler.
     Their controls and buttons live inside .preview-section. */
  .preview-section.active:has(> .canvas-container):has(> .controls-section) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 380px);
    grid-template-areas:
      "canvas controls"
      "stats controls"
      "stats actions";
    gap: 14px 16px;
    align-items: start;
    padding: 0 18px 22px !important;
  }
  .preview-section.active:has(> .canvas-container):has(> .controls-section) > .canvas-container {
    grid-area: canvas;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    align-items: center;
    min-width: 0;
  }
  .preview-section.active:has(> .canvas-container):has(> .controls-section) > .stats {
    grid-area: stats;
    margin: 0 !important;
  }
  .preview-section.active:has(> .canvas-container):has(> .controls-section) > .controls-section {
    grid-area: controls;
    margin: 0 !important;
    padding: 18px !important;
    max-height: calc(100vh - 150px);
    overflow: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: 84px;
    scrollbar-width: thin;
  }
  .preview-section.active:has(> .canvas-container):has(> .controls-section) > .action-buttons {
    grid-area: actions;
    margin: 0 !important;
    align-self: start;
  }
  .preview-section.active .canvas-wrapper {
    min-width: 0;
    width: 100%;
  }
  .preview-section.active canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(48vh, 520px) !important;
    object-fit: contain;
  }

  /* Image format converter: upload first, then previews left + format controls right. */
  .oot-compact-format-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 380px);
    gap: 16px;
    align-items: start;
    margin: 0 0 18px;
  }
  .oot-compact-format-workspace > .preview-section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
  }
  .oot-compact-format-workspace > .format-selector-container {
    margin: 0 !important;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
  .oot-compact-format-workspace .image-container {
    min-height: 260px !important;
    height: min(46vh, 500px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .oot-compact-format-workspace .image-container img,
  .oot-compact-format-workspace .image-container canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
  }

  /* Metadata tool: uploaded image on left, metadata/edit panels on right. */
  .oot-compact-metadata-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    gap: 16px;
    align-items: start;
  }
  .oot-compact-metadata-workspace > .upload-section,
  .oot-compact-metadata-workspace > .tool-interface {
    margin: 0 !important;
    min-width: 0;
  }
  .oot-compact-metadata-workspace > .tool-interface {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-height: calc(100vh - 120px);
    overflow: auto;
    position: sticky;
    top: 84px;
    scrollbar-width: thin;
  }
  .oot-compact-metadata-workspace .preview-container {
    max-height: min(52vh, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .oot-compact-metadata-workspace .preview-img {
    width: auto !important;
    height: auto !important;
    max-height: min(52vh, 560px) !important;
    object-fit: contain;
  }

  /* Enhanced resizer workspace created by compact-image-workspace.js. */
  .oot-compact-resizer-workspace,
  .oot-compact-special-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 400px);
    gap: 16px;
    align-items: start;
    width: min(1420px, calc(100% - 32px));
    margin: 0 auto 22px;
  }
  .container1 > .oot-compact-resizer-workspace { width: 100%; margin-left: 0; margin-right: 0; }
  .oot-compact-resizer-workspace > .tool-interface,
  .oot-compact-special-workspace > .oot-compact-preview-side {
    min-width: 0;
    margin: 0 !important;
  }
  .oot-compact-resizer-workspace > .tool-interface {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .oot-compact-resizer-workspace > .oot-compact-controls-side,
  .oot-compact-special-workspace > .oot-compact-controls-side {
    min-width: 0;
    max-height: calc(100vh - 110px);
    overflow: auto;
    position: sticky;
    top: 84px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .oot-compact-resizer-workspace .input-section,
  .oot-compact-resizer-workspace .output-section {
    margin: 0 !important;
  }
  .oot-compact-resizer-workspace #imagePreview img,
  .oot-compact-resizer-workspace canvas,
  .oot-compact-special-workspace img,
  .oot-compact-special-workspace canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(54vh, 580px) !important;
    object-fit: contain;
  }

  /* Pixelation / passport / watermark wrappers. */
  .oot-compact-special-workspace > .canvas-container,
  .oot-compact-special-workspace > .editor-section,
  .oot-compact-special-workspace > .tool-interface {
    min-width: 0;
    margin: 0 !important;
  }
  .oot-compact-special-workspace > .tool-interface {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .oot-compact-special-workspace .canvas-container {
    min-height: 360px;
    max-height: calc(100vh - 135px);
    overflow: auto;
  }
  .oot-compact-special-workspace .settings-section,
  .oot-compact-special-workspace .settings-container,
  .oot-compact-special-workspace .controls-section {
    margin: 0 !important;
  }
  .oot-compact-special-workspace .action-buttons {
    margin: 12px 0 0 !important;
  }

  /* Already-split editors: keep the actual canvas and tools inside one viewport. */
  .editor-container,
  .editor-layout,
  .signature-workspace {
    align-items: start;
  }
  .editor-container .canvas-area,
  .editor-layout .canvas-area,
  .signature-workspace .canvas-container {
    max-height: calc(100vh - 140px);
    overflow: auto;
  }
  .editor-container .controls-sidebar,
  .editor-container > .toolbar,
  .editor-layout .tools-column,
  .signature-workspace > .controls-section {
    max-height: calc(100vh - 120px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .editor-container canvas,
  .editor-layout canvas,
  .signature-workspace canvas {
    max-height: min(58vh, 620px) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  /* Upload boxes should not consume half a screen once the editing workspace follows. */
  .container1 > .upload-section,
  .editor-container + .upload-section,
  .upload-section[id="uploadSection"] {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  .oot-compact-format-workspace,
  .oot-compact-metadata-workspace,
  .oot-compact-resizer-workspace,
  .oot-compact-special-workspace {
    display: block;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  .oot-compact-format-workspace > *,
  .oot-compact-metadata-workspace > *,
  .oot-compact-resizer-workspace > *,
  .oot-compact-special-workspace > * {
    margin-bottom: 14px !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (min-width: 901px) {
  .oot-compact-format-workspace > .oot-compact-controls-side,
  .oot-compact-metadata-workspace > .oot-compact-controls-side {
    min-width: 0;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .oot-compact-format-workspace > .oot-compact-controls-side > .format-selector-container,
  .oot-compact-metadata-workspace > .oot-compact-controls-side > .tool-interface {
    margin: 0 !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .oot-compact-metadata-workspace > .oot-compact-controls-side > .tool-interface {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .oot-compact-format-workspace > .oot-compact-controls-side > .action-buttons,
  .oot-compact-metadata-workspace > .oot-compact-controls-side > .action-buttons {
    margin: 12px 0 0 !important;
  }
}

/* ===== Migrated from image_tools/css/watermark_on_image.css ===== */
.container1{width:min(95vw,1520px)!important;max-width:1520px!important;margin-left:auto!important;margin-right:auto!important}.settings-container{margin:0 0 18px!important;padding:18px!important;text-align:left!important}.settings-title{margin-bottom:14px!important}.settings-grid{grid-template-columns:minmax(300px,.92fr) minmax(300px,1.08fr)!important;gap:16px!important;width:100%!important;display:grid!important}.setting-group{padding:14px!important}.tool-interface{grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr)!important;gap:16px!important}.input-section,.output-section{padding:18px!important}#canvasContainer{min-height:420px!important;display:grid!important;place-items:center!important}#watermarkCanvas{max-width:100%!important;max-height:520px!important;height:auto!important}.action-buttons{justify-content:flex-start!important;margin-bottom:18px!important}@media(max-width:980px){.settings-grid,.tool-interface{grid-template-columns:1fr!important}}@media(max-width:768px){.settings-container,.input-section,.output-section,.setting-group{width:100%!important;padding:14px!important;margin:0!important}}

/* ===== Watermark Tool workspace refresh ===== */
body.watermark-tool-page .search-container{display:none!important;}
body.watermark-tool-page .hero{
  width:min(1380px, calc(100% - 22px))!important;
  margin:10px auto 12px!important;
  padding:18px 22px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#10254a 0%, #1c4c7d 100%)!important;
  color:#fff!important;
  text-align:left!important;
}
body.watermark-tool-page .hero h1,
body.watermark-tool-page h1{
  margin:0 0 8px!important;
  font-size:clamp(1.85rem,3vw,2.55rem)!important;
  line-height:1.08!important;
  color:#fff!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
}
body.watermark-tool-page .hero p{margin:0!important;max-width:none!important;color:rgba(255,255,255,.88)!important;font-size:1.04rem!important;line-height:1.55!important;}
body.watermark-tool-page .wm-tool-shell{
  width:min(1480px, calc(100% - 26px))!important;
  margin:0 auto 26px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important;
  border:1px solid #dbe7e2!important;
  border-radius:28px!important;
  box-shadow:0 18px 42px rgba(15,35,30,.08)!important;
  overflow:hidden!important;
}
body.watermark-tool-page .wm-tool-header{
  padding:18px 22px!important;
  border-bottom:1px solid #e4ece8!important;
  background:linear-gradient(180deg,#f4faf8 0%, #edf6f3 100%)!important;
}
body.watermark-tool-page .wm-tool-header h2{margin:0 0 6px!important;font-size:1.85rem!important;line-height:1.12!important;color:#082338!important;}
body.watermark-tool-page .wm-tool-header p{margin:0!important;color:#5d7281!important;font-size:1rem!important;line-height:1.55!important;}
body.watermark-tool-page .wm-tool-grid{
  display:grid!important;
  grid-template-columns:400px minmax(0,1fr) 390px!important;
  gap:18px!important;
  padding:18px!important;
  align-items:start!important;
}
body.watermark-tool-page .wm-card,
body.watermark-tool-page .wm-settings-panel{
  background:#fff!important;
  border:1px solid #dbe7e2!important;
  border-radius:24px!important;
  box-shadow:0 12px 28px rgba(15,35,30,.05)!important;
  padding:18px!important;
  min-width:0!important;
}
body.watermark-tool-page .wm-settings-panel{background:linear-gradient(180deg,#f6fbf9 0%,#f1f7f4 100%)!important;margin:0!important;overflow:hidden!important;}
body.watermark-tool-page .section-title,
body.watermark-tool-page .settings-title{
  margin:0 0 14px!important;
  font-size:1.15rem!important;
  color:#082338!important;
  display:flex!important;
  align-items:center!important;
  gap:.55rem!important;
}
body.watermark-tool-page .settings-title{font-size:1.2rem!important;}
body.watermark-tool-page .wm-main-drop,
body.watermark-tool-page .wm-watermark-drop{
  min-height:220px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:22px 16px!important;
  border:2px dashed #14b89a!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#f9fcfb 0%,#f4f8f7 100%)!important;
}
body.watermark-tool-page .wm-watermark-drop{min-height:150px!important;padding:18px 12px!important;}
body.watermark-tool-page .upload-icon{font-size:2.5rem!important;color:#14b89a!important;margin-bottom:10px!important;}
body.watermark-tool-page .upload-text{font-size:1.05rem!important;color:#5f6b7a!important;font-weight:700!important;margin-bottom:8px!important;}
body.watermark-tool-page .upload-subtext{font-size:.92rem!important;color:#8a96a3!important;margin-bottom:14px!important;}
body.watermark-tool-page .upload-cta{
  min-width:180px!important;
  min-height:48px!important;
  border:none!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#21c8ad 0%, #119b87 100%)!important;
  color:#fff!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:0 10px 20px rgba(17,155,135,.22)!important;
}
body.watermark-tool-page .wm-preview-thumb,
body.watermark-tool-page .wm-watermark-thumb{
  margin-top:16px!important;
  display:flex!important;
  justify-content:center!important;
}
body.watermark-tool-page .wm-preview-thumb img{
  width:100%!important;
  max-height:320px!important;
  object-fit:contain!important;
  border-radius:18px!important;
  border:1px solid #dbe7e2!important;
  background:#fff!important;
  box-shadow:0 10px 22px rgba(15,35,30,.08)!important;
}
body.watermark-tool-page .wm-watermark-thumb img,
body.watermark-tool-page .watermark-preview{
  max-width:120px!important;
  max-height:120px!important;
  width:auto!important;
  height:auto!important;
  border-radius:14px!important;
  border:1px solid #dbe7e2!important;
  background:#fff!important;
  padding:8px!important;
}
body.watermark-tool-page .wm-result-stage{
  min-height:480px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  border:2px solid #dbe7e2!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f6f9f8 100%)!important;
  text-align:center!important;
}
body.watermark-tool-page #watermarkCanvas{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:620px!important;
  border-radius:16px!important;
  box-shadow:0 12px 28px rgba(15,35,30,.08)!important;
}
body.watermark-tool-page .wm-empty-state{color:#97a3ad!important;font-style:italic!important;padding:2rem!important;}
body.watermark-tool-page .wm-actions{display:flex!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;margin:16px 0 0!important;}
body.watermark-tool-page .action-btn{
  min-height:48px!important;
  border-radius:14px!important;
  padding:0 18px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
body.watermark-tool-page .success-message{margin-top:14px!important;}
body.watermark-tool-page .watermark-type-toggle{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:14px!important;}
body.watermark-tool-page .toggle-btn{min-height:52px!important;border-radius:16px!important;border:1px solid #ccdad5!important;font-weight:800!important;}
body.watermark-tool-page .toggle-btn.active{background:linear-gradient(135deg,#21c8ad 0%, #119b87 100%)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 20px rgba(17,155,135,.18)!important;}
body.watermark-tool-page .wm-settings-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;align-items:start!important;}
body.watermark-tool-page .watermark-section{display:none!important;grid-column:1 / -1!important;}
body.watermark-tool-page .watermark-section.active{display:block!important;}
body.watermark-tool-page .setting-group{background:#fff!important;border:1px solid #dbe7e2!important;border-radius:18px!important;padding:14px!important;min-width:0!important;box-shadow:none!important;}
body.watermark-tool-page .settings-span-full{grid-column:1 / -1!important;}
body.watermark-tool-page .text-input,
body.watermark-tool-page .select-input{width:100%!important;min-height:48px!important;border-radius:14px!important;border:1px solid #cad7d3!important;background:#fff!important;}
body.watermark-tool-page .radio-group{gap:10px!important;}
body.watermark-tool-page .radio-option{align-items:flex-start!important;}
body.watermark-tool-page .radio-option label{line-height:1.35!important;}
body.watermark-tool-page .wm-color-row{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:14px!important;}
body.watermark-tool-page .color-presets{display:flex!important;flex-wrap:wrap!important;gap:10px!important;}
body.watermark-tool-page .color-preset{width:30px!important;height:30px!important;border-radius:50%!important;border:2px solid #fff!important;box-shadow:0 0 0 1px #cddad5!important;cursor:pointer!important;}
body.watermark-tool-page .color-preset.selected{box-shadow:0 0 0 3px rgba(20,184,154,.22)!important;border-color:#14b89a!important;}
body.watermark-tool-page .slider-container{margin-bottom:14px!important;}
body.watermark-tool-page .slider-label{font-size:.95rem!important;color:#425466!important;font-weight:700!important;}
body.watermark-tool-page .slider{margin-top:2px!important;}
body.watermark-tool-page .slider::-webkit-slider-thumb{background:#14b89a!important;}
body.watermark-tool-page .slider::-moz-range-thumb{background:#14b89a!important;}
body.watermark-tool-page .how-to-container{width:min(1480px, calc(100% - 26px))!important;margin:0 auto 26px!important;}

@media (max-width: 1260px){
  body.watermark-tool-page .wm-tool-grid{grid-template-columns:330px minmax(0,1fr)!important;}
  body.watermark-tool-page .wm-settings-panel{grid-column:1 / -1!important;}
  body.watermark-tool-page .wm-settings-grid{grid-template-columns:1fr 1fr!important;}
}
@media (max-width: 920px){
  body.watermark-tool-page .hero{width:calc(100% - 14px)!important;margin:8px auto 10px!important;padding:16px!important;border-radius:18px!important;}
  body.watermark-tool-page .hero h1,body.watermark-tool-page h1{font-size:1.8rem!important;}
  body.watermark-tool-page .hero p{font-size:.95rem!important;}
  body.watermark-tool-page .wm-tool-shell{width:calc(100% - 14px)!important;border-radius:22px!important;}
  body.watermark-tool-page .wm-tool-header{padding:16px!important;}
  body.watermark-tool-page .wm-tool-header h2{font-size:1.45rem!important;}
  body.watermark-tool-page .wm-tool-grid{grid-template-columns:1fr!important;gap:14px!important;padding:14px!important;}
  body.watermark-tool-page .wm-card,body.watermark-tool-page .wm-settings-panel{padding:16px!important;border-radius:20px!important;}
  body.watermark-tool-page .wm-main-drop{min-height:190px!important;}
  body.watermark-tool-page .wm-result-stage{min-height:340px!important;}
  body.watermark-tool-page .wm-settings-grid{grid-template-columns:1fr!important;}
}
@media (max-width: 560px){
  body.watermark-tool-page .section-title,body.watermark-tool-page .settings-title{font-size:1.08rem!important;}
  body.watermark-tool-page .wm-main-drop{min-height:170px!important;padding:18px 12px!important;}
  body.watermark-tool-page .wm-watermark-drop{min-height:132px!important;}
  body.watermark-tool-page .upload-cta{width:100%!important;min-width:0!important;}
  body.watermark-tool-page .watermark-type-toggle{grid-template-columns:1fr!important;}
  body.watermark-tool-page .wm-actions{display:grid!important;grid-template-columns:1fr!important;}
  body.watermark-tool-page .action-btn{width:100%!important;}
  body.watermark-tool-page .wm-result-stage{min-height:260px!important;padding:12px!important;}
  body.watermark-tool-page .wm-preview-thumb img{max-height:220px!important;}
}

/* ===== Watermark Tool definitive flow / rating-safe layout ===== */
body.watermark-tool-page .wm-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px!important;
  padding:18px!important;
  align-items:start!important;
}
body.watermark-tool-page .wm-panel,
body.watermark-tool-page .wm-settings-panel{
  min-width:0!important;
}

/* Upload first: keep only one clear upload target before a file is selected. */
body.watermark-tool-page .wm-tool-shell.wm-upload-only .wm-upload-panel{
  display:block!important;
  width:min(900px,100%)!important;
  justify-self:center!important;
  margin:0 auto!important;
}
body.watermark-tool-page .wm-tool-shell.wm-upload-only .wm-result-panel,
body.watermark-tool-page .wm-tool-shell.wm-upload-only .wm-settings-panel{
  display:none!important;
}
body.watermark-tool-page .wm-tool-shell.wm-upload-only .wm-main-drop{
  min-height:300px!important;
}

/* After upload: result is the primary workspace, settings are the side panel. */
body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-layout{
  grid-template-columns:minmax(0,1.65fr) minmax(350px,420px)!important;
}
body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-upload-panel{
  display:none!important;
}
body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-result-panel{
  display:block!important;
  grid-column:1!important;
}
body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-settings-panel{
  display:block!important;
  grid-column:2!important;
  position:sticky!important;
  top:78px!important;
  max-height:calc(100vh - 94px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}
body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-result-stage{
  min-height:min(68vh,720px)!important;
}
body.watermark-tool-page .wm-tool-shell.wm-has-image #watermarkCanvas{
  width:auto!important;
  max-width:100%!important;
  max-height:min(64vh,680px)!important;
  object-fit:contain!important;
}
body.watermark-tool-page .wm-tool-shell .wm-preview-thumb[hidden]{display:none!important;}
body.watermark-tool-page .wm-actions{
  display:grid!important;
  grid-template-columns:minmax(210px,1.25fr) minmax(145px,.75fr) minmax(120px,.65fr)!important;
  gap:10px!important;
}
body.watermark-tool-page .wm-actions .action-btn{width:100%!important;}

/* Community rating is intentionally outside the editor shell. Global account JS
   now detects .wm-tool-shell as the workspace instead of an individual grid panel. */
body.watermark-tool-page .wm-tool-shell + .oot-rating-mount{
  width:min(1120px,calc(100% - 26px))!important;
  margin:18px auto 24px!important;
}

@media(max-width:1040px){
  body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-layout{
    grid-template-columns:1fr!important;
  }
  body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-result-panel{
    grid-column:1!important;
    order:1!important;
  }
  body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-settings-panel{
    grid-column:1!important;
    order:2!important;
    position:static!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-result-stage{
    min-height:380px!important;
  }
}
@media(max-width:620px){
  body.watermark-tool-page .wm-layout{padding:12px!important;gap:12px!important;}
  body.watermark-tool-page .wm-tool-shell.wm-upload-only .wm-main-drop{min-height:230px!important;}
  body.watermark-tool-page .wm-tool-shell.wm-has-image .wm-result-stage{min-height:260px!important;}
  body.watermark-tool-page .wm-actions{grid-template-columns:1fr!important;}
  body.watermark-tool-page .wm-settings-grid{grid-template-columns:1fr!important;}
}