/* OceanofTools — add_text_on_image.php
   Page-specific tool/workspace CSS only. Universal header/footer stays in /style/header_footer.css. */
/* ===== Migrated from image_tools/add_text_on_image.php inline <style> ===== */
:root {
        --primary: #0f8f77;
        --secondary: #10b981;
        --danger: #ef4444;
        --dark: #1f2937;
        --light: #f3f4f6;
    }

    .app-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .toolbar {
        padding: 15px;
        background: #E9E8EB;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        gap: 10px;
        white-space: nowrap;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 14px;
        border: none;
        cursor: pointer;
        transition: transform 0.1s;
        color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .btn:active { transform: scale(0.96); }

    .btn-upload { background: linear-gradient(135deg, #0f9f84, #0f8f77); }
    .btn-add { background: linear-gradient(135deg, #34d399, #059669); }
    .btn-download { background: linear-gradient(135deg, #f87171, #dc2626); }
    .btn-toggle { background: #374151; display: none; }

    .editor-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        min-height: 600px;
    }

    .canvas-area {
        background: #f3f4f6;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        position: relative;
    }

    canvas {
        max-width: 100%;
        max-height: 80vh;
        height: auto;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        background: white;
    }

    .controls-sidebar {
        background: white;
        border-left: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .panel-header {
        padding: 15px 20px;
        font-weight: 700;
        color: var(--dark);
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .settings-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    .control-group { margin-bottom: 20px; }
    .label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    
    input[type="range"] { width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px; appearance: none; }
    input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: var(--primary); border-radius: 50%; cursor: pointer; }
    
    .color-picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    input[type="color"] { width: 100%; height: 40px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 2px; cursor: pointer; }
    
    select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; font-size: 14px; }

    .btn-delete { background: #fee2e2; color: #ef4444; padding: 8px; border-radius: 8px; border: none; cursor: pointer; }
    
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 100;
        display: none; align-items: center; justify-content: center;
        backdrop-filter: blur(4px);
    }
    .modal-overlay.active { display: flex; }
    
    .modal-box {
        background: white; width: 90%; max-width: 400px;
        padding: 25px; border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes popUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .placement-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 15px; }
    .place-btn {
        background: #f9fafb; border: 2px solid #e5e7eb;
        padding: 15px 5px; border-radius: 12px;
        text-align: center; font-size: 13px; font-weight: 600; color: var(--dark);
        cursor: pointer; transition: all 0.2s;
        display: flex; flex-direction: column; align-items: center; gap: 5px;
    }
    .place-btn:hover { border-color: var(--primary); background: #eef2ff; color: var(--primary); }
    .place-btn.full-width { grid-column: span 3; background: var(--primary); color: white; border-color: var(--primary); }
    
    .text-edit-area { width: 100%; padding: 15px; border: 2px solid #e5e7eb; border-radius: 12px; min-height: 100px; font-family: inherit; margin: 15px 0; resize: vertical; }
    .text-edit-area:focus { outline: none; border-color: var(--primary); }

    @media (max-width: 900px) {
        .editor-container { grid-template-columns: 1fr; display: flex; flex-direction: column; }
        .canvas-area { min-height: 300px; flex-grow: 1; }
        .controls-sidebar { height: auto; border-left: none; border-top: 1px solid #e5e7eb; display: none; }
        .controls-sidebar.show { display: block; animation: slideUp 0.3s ease; }
        .btn-toggle { display: inline-flex; }
        @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .app-wrapper { border-radius: 18px; height: auto; }
        body { padding: 0; }
    }

    .image-upload-dropzone {
        margin: 16px 18px 0;
        padding: 18px 20px;
        border: 2px dashed #14b89a;
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(20,184,154,.08), rgba(13,141,118,.05));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
    .image-upload-dropzone.is-dragover { border-color: #0d8d76; background: linear-gradient(135deg, rgba(20,184,154,.16), rgba(13,141,118,.09)); }
    .image-upload-copy { display: flex; flex-direction: column; gap: 4px; }
    .image-upload-copy strong { color: #10201b; font-size: 1rem; }
    .image-upload-copy small { color: #61716b; font-size: 0.82rem; }
    .image-upload-status { color: #0d8d76; font-size: 0.82rem; font-weight: 600; }
    @media (max-width: 900px) {
        .image-upload-dropzone { margin: 12px 12px 0; padding: 14px; }
    }
    
    #fileInput { display: none; }

/* ===== Migrated from image_tools/add_text_on_image.php inline <style> ===== */
:root {
        --blue-primary: #0f8f77;
        --blue-secondary: #14b89a;
        --blue-light: #eef2ff;
        --text-dark: #1f2937;
        --text-gray: #6b7280;
        --bg-light: #f9fafb;
        --white: #ffffff;
    }

    .features-wrapper {
        max-width:none;
        margin: 80px auto;
        padding: 0 20px;
    }

    .features-main-title {
        text-align: center;
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 20px;
        background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 50%, #e8bb73 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -1px;
        animation: gradientShift 3s ease infinite;
        background-size: 200% 200%;
    }

    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .features-subtitle {
        text-align: center;
        color: var(--text-gray);
        margin-bottom: 70px;
        font-size: 1.25rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.8;
        font-weight: 400;
    }

    .features-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 35px;
        margin-bottom: 120px;
        perspective: 1000px;
    }

    .feature-box {
        background: var(--white);
        padding: 40px;
        border-radius: 24px;
        box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .feature-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 24px;
        padding: 2px;
        background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary), #e8bb73);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .feature-box::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .feature-box:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 60px rgba(79, 70, 229, 0.25);
    }

    .feature-box:hover::before { opacity: 1; }
    .feature-box:hover::after { opacity: 1; }

    .feature-icon-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(59, 130, 246, 0.15));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        font-size: 36px;
        position: relative;
        transition: transform 0.4s ease;
    }

    .feature-box:hover .feature-icon-wrapper {
        transform: scale(1.1) rotate(5deg);
    }

    .feature-icon-wrapper::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .feature-box:hover .feature-icon-wrapper::before { opacity: 0.1; }

    .feature-box h3 {
        font-size: 1.5rem;
        margin-bottom: 14px;
        font-weight: 700;
        color: var(--text-dark);
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }

    .feature-box:hover h3 { color: var(--blue-primary); }

    .feature-box p {
        color: var(--text-gray);
        font-size: 1.05rem;
        line-height: 1.8;
        position: relative;
        z-index: 1;
    }

    .feature-box:nth-child(1) { background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 100%); }
    .feature-box:nth-child(1) h3, .feature-box:nth-child(1) p { color: white; }
    .feature-box:nth-child(1) .feature-icon-wrapper { background: rgba(255, 255, 255, 0.2); }
    .feature-box:nth-child(1):hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 25px 70px rgba(79, 70, 229, 0.4);
    }

    /* How to Use Section */
    .howto-section {
        background: linear-gradient(135deg, var(--white) 0%, var(--blue-light) 100%);
        border-radius: 32px;
        padding: 60px;
        box-shadow: 0 12px 40px rgba(79, 70, 229, 0.15);
        position: relative;
        overflow: hidden;
        margin-bottom: 120px;
    }

    .howto-section::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
    }

    .howto-section::after {
        content: '';
        position: absolute;
        bottom: -150px;
        left: -150px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    }

    .howto-title {
        text-align: center;
        font-size: 2.75rem;
        font-weight: 800;
        margin-bottom: 60px;
        color: var(--text-dark);
        position: relative;
        z-index: 1;
    }

    .howto-title::after {
        content: '';
        display: block;
        width: 100px;
        height: 5px;
        background: linear-gradient(90deg, var(--blue-primary), var(--blue-secondary));
        margin: 20px auto 0;
        border-radius: 3px;
    }

    .step-row {
        display: flex;
        gap: 30px;
        margin-bottom: 45px;
        align-items: flex-start;
        position: relative;
        z-index: 1;
    }

    .step-row:last-child { margin-bottom: 0; }

    .step-badge {
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.5rem;
        box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
        position: relative;
        transition: transform 0.3s ease;
    }

    .step-badge::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
        animation: pulse 2s ease infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.2); opacity: 0; }
    }

    .step-row:hover .step-badge { transform: scale(1.1) rotate(10deg); }

    .step-text {
        background: white;
        padding: 25px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        flex: 1;
        transition: all 0.3s ease;
    }

    .step-row:hover .step-text {
        box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
        transform: translateX(5px);
    }

    .step-text h4 {
        font-size: 1.35rem;
        margin-bottom: 10px;
        color: var(--text-dark);
        font-weight: 700;
    }

    .step-text p {
        color: var(--text-gray);
        font-size: 1.05rem;
        line-height: 1.8;
    }

    /* FAQ Section */
    .faq-section {
        background: var(--white);
        border-radius: 32px;
        padding: 60px;
        box-shadow: 0 12px 40px rgba(79, 70, 229, 0.12);
        position: relative;
        overflow: hidden;
    }

    .faq-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: linear-gradient(90deg, var(--blue-primary), var(--blue-secondary), #e8bb73);
        background-size: 200% 100%;
        animation: gradientMove 3s linear infinite;
    }

    @keyframes gradientMove {
        0% { background-position: 0% 0%; }
        100% { background-position: 200% 0%; }
    }

    .faq-title {
        text-align: center;
        font-size: 2.75rem;
        font-weight: 800;
        margin-bottom: 60px;
        color: var(--text-dark);
    }

    .faq-title::after {
        content: '';
        display: block;
        width: 100px;
        height: 5px;
        background: linear-gradient(90deg, var(--blue-primary), var(--blue-secondary));
        margin: 20px auto 0;
        border-radius: 3px;
    }

    .faq-item {
        margin-bottom: 20px;
        border: 2px solid rgba(79, 70, 229, 0.1);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: white;
    }

    .faq-item:hover {
        border-color: rgba(79, 70, 229, 0.3);
        box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
    }

    .faq-item.active {
        border-color: var(--blue-primary);
        box-shadow: 0 8px 30px rgba(79, 70, 229, 0.2);
    }

    .faq-question {
        width: 100%;
        padding: 28px 32px;
        background: transparent;
        border: none;
        text-align: left;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-dark);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }

    .faq-question:hover { color: var(--blue-primary); }

    .faq-icon {
        font-size: 1.8rem;
        color: var(--blue-primary);
        font-weight: 300;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        line-height: 1;
    }

    .faq-item.active .faq-icon { transform: rotate(135deg); }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.4s ease;
        padding: 0 32px;
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.02), rgba(59, 130, 246, 0.02));
    }

    .faq-item.active .faq-answer {
        max-height: 600px;
        padding: 28px 32px;
    }

    .faq-answer p {
        color: var(--text-gray);
        line-height: 1.9;
        font-size: 1.05rem;
    }

    @media (max-width: 968px) {
        .features-main-title { font-size: 2.5rem; }
        .features-grid-container { grid-template-columns: 1fr; gap: 25px; }
        .howto-section, .faq-section { padding: 40px 25px; }
        .howto-title, .faq-title { font-size: 2rem; }
        .step-row { gap: 20px; }
        .step-badge { width: 50px; height: 50px; font-size: 1.3rem; }
        .step-text { padding: 20px; }
        .feature-box { padding: 30px; }
    }

/* ===== 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.add-text-tool-page .app-wrapper input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.add-text-tool-page .app-wrapper select,body.add-text-tool-page .app-wrapper 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.add-text-tool-page .app-wrapper textarea{resize:vertical;line-height:1.6}body.add-text-tool-page .app-wrapper input:focus,body.add-text-tool-page .app-wrapper select:focus,body.add-text-tool-page .app-wrapper textarea:focus{border-color:var(--oot-primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}body.add-text-tool-page .app-wrapper input[type=file]{max-width:100%}body.add-text-tool-page .app-wrapper input[type=checkbox],body.add-text-tool-page .app-wrapper 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.add-text-tool-page .app-wrapper input,body.add-text-tool-page .app-wrapper select,body.add-text-tool-page .app-wrapper 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/add_text_on_image.css ===== */
.app-wrapper{max-width:min(95vw,1480px)!important;border-radius:22px!important}.toolbar{justify-content:flex-start!important;padding:14px 18px!important;gap:10px!important}.image-upload-dropzone{margin:16px 18px 0!important;padding:18px 20px!important;border:2px dashed #14b89a!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(20,184,154,.08),rgba(13,141,118,.05))!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap!important}.image-upload-dropzone.is-dragover{border-color:#0d8d76!important;background:linear-gradient(135deg,rgba(20,184,154,.16),rgba(13,141,118,.09))!important}.image-upload-dropzone strong{display:block!important;font-size:1rem!important;color:#10201b!important}.image-upload-dropzone small{display:block!important;font-size:.82rem!important;color:#61716b!important;margin-top:4px!important}.image-upload-dropzone .btn{margin-left:auto!important}.editor-container{grid-template-columns:minmax(0,1fr) 320px!important;min-height:540px!important}.canvas-area{padding:16px!important}.controls-sidebar{min-width:0!important}@media(max-width:900px){.image-upload-dropzone{margin:12px 12px 0!important;padding:14px!important}.editor-container{grid-template-columns:1fr!important;min-height:auto!important}.app-wrapper{border-radius:18px!important}}


/* ===== 2026-08-15 Add Text tool layout refinement ===== */
body.add-text-tool-page .app-wrapper{
    width:min(1380px, calc(100% - 28px));
    margin:0 auto 40px;
    border-radius:28px;
    border:1px solid #dfeae5;
    background:linear-gradient(180deg,#ffffff 0%, #fbfdfc 100%);
    box-shadow:0 28px 70px rgba(15, 35, 30, 0.10);
    overflow:hidden;
}
body.add-text-tool-page .toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    padding:22px 22px 16px;
    background:linear-gradient(180deg,#f6faf8 0%, #eef5f2 100%);
    border-bottom:1px solid #e5eeea;
}
body.add-text-tool-page .toolbar-intro{display:grid;gap:4px;min-width:260px;}
body.add-text-tool-page .toolbar-intro strong{font-size:1.04rem;font-weight:800;color:#10231d;}
body.add-text-tool-page .toolbar-intro span{font-size:.87rem;line-height:1.5;color:#62726c;}
body.add-text-tool-page .toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
body.add-text-tool-page .btn{border-radius:14px;padding:11px 18px;font-size:.92rem;font-weight:700;box-shadow:0 8px 22px rgba(15, 143, 119, 0.10);transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;}
body.add-text-tool-page .btn:hover{transform:translateY(-1px);box-shadow:0 14px 24px rgba(15, 143, 119, 0.16);filter:saturate(1.02);}
body.add-text-tool-page .btn-toggle{display:inline-flex;background:linear-gradient(135deg,#1f2937,#111827);}
body.add-text-tool-page .btn-download{background:linear-gradient(135deg,#0f172a,#1f2937);}
body.add-text-tool-page .btn-upload{background:linear-gradient(135deg,#0f9f84,#0f8f77);}
body.add-text-tool-page .image-upload-dropzone{margin:18px 22px 0;padding:18px 20px;border:1.5px dashed #7ecdbd;border-radius:20px;background:linear-gradient(135deg, rgba(20,184,154,.07), rgba(13,141,118,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
body.add-text-tool-page .image-upload-copy strong{font-size:1rem;color:#12251f;}
body.add-text-tool-page .image-upload-copy small{color:#667772;line-height:1.45;}
body.add-text-tool-page .image-upload-status{margin-top:2px;}
body.add-text-tool-page .image-upload-dropzone .btn-upload{min-width:148px;justify-content:center;}
body.add-text-tool-page .editor-container{grid-template-columns:minmax(0,1fr) 330px;gap:22px;padding:22px;min-height:640px;align-items:stretch;}
body.add-text-tool-page .canvas-area{min-height:560px;padding:28px;border:1px solid #e4eeea;border-radius:24px;background:linear-gradient(135deg, rgba(20,184,154,.045), rgba(255,255,255,.96)),repeating-conic-gradient(from 45deg, #f8fbfa 0% 25%, #f1f5f4 0% 50%) 50% / 22px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}
body.add-text-tool-page canvas{border-radius:18px;max-width:100%;max-height:min(72vh, 780px);box-shadow:0 18px 42px rgba(15,23,42,.13);}
body.add-text-tool-page .controls-sidebar{border:1px solid #e5eeea;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%, #f8fbfa 100%);box-shadow:0 14px 34px rgba(15, 35, 30, 0.07);overflow:hidden;}
body.add-text-tool-page .panel-header{padding:18px 20px;background:rgba(255,255,255,.92);border-bottom:1px solid #e7efec;}
body.add-text-tool-page .panel-header span{font-size:1rem;font-weight:800;}
body.add-text-tool-page .settings-content{padding:18px 18px 22px;}
body.add-text-tool-page .settings-content > p{background:#f6faf8;border:1px dashed #cfe3dd;border-radius:18px;padding:18px 12px;margin-top:16px !important;}
body.add-text-tool-page .btn-delete{padding:10px;border-radius:12px;}
body.add-text-tool-page .features-wrapper{margin-top:56px;}
body.add-text-tool-page .related-tools{margin-top:28px;}
body.add-text-tool-page .oot-rating-mount{margin-top:30px !important;margin-bottom:12px !important;}
@media (max-width: 1100px){body.add-text-tool-page .editor-container{grid-template-columns:minmax(0,1fr) 300px;}}
@media (max-width: 900px){body.add-text-tool-page .app-wrapper{width:calc(100% - 16px);border-radius:22px;margin-bottom:30px;}body.add-text-tool-page .toolbar{padding:18px 16px 14px;}body.add-text-tool-page .toolbar-actions{width:100%;justify-content:flex-start;}body.add-text-tool-page .btn-toggle{display:inline-flex;}body.add-text-tool-page .image-upload-dropzone{margin:14px 16px 0;padding:16px;}body.add-text-tool-page .editor-container{display:flex;flex-direction:column;gap:16px;padding:16px;min-height:auto;}body.add-text-tool-page .canvas-area{min-height:340px;padding:18px;border-radius:20px;}body.add-text-tool-page .controls-sidebar{border-radius:20px;}}
@media (max-width: 600px){body.add-text-tool-page .toolbar-intro{min-width:0;}body.add-text-tool-page .toolbar-actions{gap:8px;}body.add-text-tool-page .btn{width:100%;justify-content:center;}body.add-text-tool-page .image-upload-dropzone{align-items:flex-start;}body.add-text-tool-page .image-upload-dropzone .btn-upload{width:100%;}}

/* final important overrides */
body.add-text-tool-page .app-wrapper{width:min(1380px, calc(100% - 28px))!important;margin:0 auto 40px!important;border-radius:28px!important;border:1px solid #dfeae5!important;background:linear-gradient(180deg,#ffffff 0%, #fbfdfc 100%)!important;box-shadow:0 28px 70px rgba(15, 35, 30, 0.10)!important;overflow:hidden!important}
body.add-text-tool-page .toolbar{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;flex-wrap:wrap!important;padding:22px 22px 16px!important;background:linear-gradient(180deg,#f6faf8 0%, #eef5f2 100%)!important;border-bottom:1px solid #e5eeea!important}
body.add-text-tool-page .image-upload-dropzone{margin:18px 22px 0!important;padding:18px 20px!important;border:1.5px dashed #7ecdbd!important;border-radius:20px!important;background:linear-gradient(135deg, rgba(20,184,154,.07), rgba(13,141,118,.03))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
body.add-text-tool-page .editor-container{grid-template-columns:minmax(0,1fr) 330px!important;gap:22px!important;padding:22px!important;min-height:640px!important;align-items:stretch!important}
body.add-text-tool-page .canvas-area{min-height:560px!important;padding:28px!important;border:1px solid #e4eeea!important;border-radius:24px!important;background:linear-gradient(135deg, rgba(20,184,154,.045), rgba(255,255,255,.96)),repeating-conic-gradient(from 45deg, #f8fbfa 0% 25%, #f1f5f4 0% 50%) 50% / 22px 22px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}
body.add-text-tool-page .controls-sidebar{border:1px solid #e5eeea!important;border-radius:24px!important;background:linear-gradient(180deg,#ffffff 0%, #f8fbfa 100%)!important;box-shadow:0 14px 34px rgba(15, 35, 30, 0.07)!important;overflow:hidden!important}
body.add-text-tool-page .panel-header{padding:18px 20px!important;background:rgba(255,255,255,.92)!important;border-bottom:1px solid #e7efec!important}
body.add-text-tool-page .settings-content{padding:18px 18px 22px!important}
@media (max-width: 900px){body.add-text-tool-page .app-wrapper{width:calc(100% - 16px)!important;border-radius:22px!important;margin-bottom:30px!important}body.add-text-tool-page .toolbar{padding:18px 16px 14px!important}body.add-text-tool-page .image-upload-dropzone{margin:14px 16px 0!important;padding:16px!important}body.add-text-tool-page .editor-container{display:flex!important;flex-direction:column!important;gap:16px!important;padding:16px!important;min-height:auto!important}body.add-text-tool-page .canvas-area{min-height:340px!important;padding:18px!important;border-radius:20px!important}body.add-text-tool-page .controls-sidebar{border-radius:20px!important}}


/* ===== 2026-08-15 button + rating placement correction ===== */
body.add-text-tool-page .toolbar-actions .btn-add{
    background:#ffffff!important;
    color:#123128!important;
    border:1px solid #cfe2db!important;
    box-shadow:0 8px 20px rgba(15,35,30,.06)!important;
}
body.add-text-tool-page .toolbar-actions .btn-add:hover{
    background:#f3faf7!important;
    border-color:#9fd2c4!important;
}
body.add-text-tool-page .toolbar-actions .btn-download{
    background:linear-gradient(135deg,#14b89a,#0d8d76)!important;
    color:#ffffff!important;
    border:1px solid transparent!important;
    box-shadow:0 10px 22px rgba(13,141,118,.20)!important;
}
body.add-text-tool-page .toolbar-actions .btn-download:hover{
    background:linear-gradient(135deg,#19c4a4,#0f967e)!important;
}
body.add-text-tool-page .toolbar-actions .btn-toggle{
    display:inline-flex!important;
    background:#ffffff!important;
    color:#263a34!important;
    border:1px solid #cfe2db!important;
    box-shadow:0 8px 20px rgba(15,35,30,.06)!important;
}
body.add-text-tool-page .toolbar-actions .btn-toggle:hover{
    background:#f3faf7!important;
    border-color:#9fd2c4!important;
}
body.add-text-tool-page .oot-rating-mount{
    width:min(1120px,calc(100% - 32px))!important;
    margin:28px auto 14px!important;
    position:relative!important;
    z-index:1!important;
}
body.add-text-tool-page .app-wrapper + .oot-rating-mount{
    display:block!important;
}

/* ===== 2026-08-15 left action rail + external rating ===== */
body.add-text-tool-page .toolbar{
    justify-content:flex-start!important;
}
body.add-text-tool-page .toolbar-actions,
body.add-text-tool-page .btn-toggle{
    display:none!important;
}
body.add-text-tool-page .editor-container{
    grid-template-columns:minmax(0,1fr) 330px!important;
}
body.add-text-tool-page .editor-main{
    min-width:0;
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    gap:14px;
    align-items:stretch;
}
body.add-text-tool-page .editor-action-rail{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-self:start;
    position:sticky;
    top:78px;
    padding:10px;
    border:1px solid #e1ebe7;
    border-radius:20px;
    background:linear-gradient(180deg,#ffffff,#f4f9f7);
    box-shadow:0 12px 28px rgba(15,35,30,.07);
}
body.add-text-tool-page .rail-action{
    width:100%;
    min-height:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 8px;
    border-radius:15px;
    border:1px solid #cfe2db;
    background:#ffffff;
    color:#18332b;
    font:800 .78rem/1.15 Inter,system-ui,sans-serif;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(15,35,30,.055);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
body.add-text-tool-page .rail-action:hover{
    transform:translateY(-1px);
    border-color:#9fd2c4;
    box-shadow:0 12px 22px rgba(15,35,30,.09);
}
body.add-text-tool-page .rail-add{
    background:#ffffff;
}
body.add-text-tool-page .rail-save{
    border-color:#0f9f84;
    background:linear-gradient(135deg,#14b89a,#0d8d76);
    color:#ffffff;
}
body.add-text-tool-page .rail-save:hover{
    background:linear-gradient(135deg,#19c4a4,#0f967e);
}
body.add-text-tool-page .canvas-area{
    min-width:0;
}
body.add-text-tool-page .controls-sidebar{
    display:flex!important;
}
body.add-text-tool-page .add-text-rating-anchor{
    width:100%;
    height:0;
    clear:both;
}
body.add-text-tool-page #ootRatingMount{
    width:min(1120px,calc(100% - 32px))!important;
    margin:30px auto 18px!important;
    position:relative!important;
    clear:both!important;
    z-index:0!important;
}
@media(max-width:900px){
    body.add-text-tool-page .editor-main{
        grid-template-columns:1fr;
        gap:12px;
    }
    body.add-text-tool-page .editor-action-rail{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:10px;
    }
    body.add-text-tool-page .rail-action{
        min-height:48px;
        flex-direction:row;
        font-size:.84rem;
    }
    body.add-text-tool-page .controls-sidebar{
        display:flex!important;
    }
}


/* Rating belongs outside the Add Text editor card. */
body.add-text-tool-page #ootRatingMount{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:min(1380px,calc(100% - 28px))!important;
    margin:24px auto 34px!important;
    position:relative!important;
    z-index:1!important;
}
body.add-text-tool-page .add-text-rating-anchor{height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
@media(max-width:900px){body.add-text-tool-page #ootRatingMount{width:calc(100% - 16px)!important;margin:18px auto 28px!important;}}