/* Extracted from style block 2 */
/* ปุ่ม +/- ปรับขนาดตัวอักษรเฉพาะในช่องพิมพ์ข้อความหลัก */
#headlineEditor{
    font-size:var(--headline-editor-font-size,16px) !important;
}

#extraTextEditor{
    font-size:var(--extra-text-editor-font-size,16px) !important;
}
.headline-editor-heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}
.headline-editor-heading-row > label{
    min-width:0;
    margin:0 !important;
}
.editor-font-size-controls{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px;
    border:1px solid #bfdbfe;
    border-radius:999px;
    background:#eff6ff;
}
.editor-font-size-btn{
    width:32px;
    height:32px;
    min-width:32px;
    padding:0;
    border:1px solid #bfdbfe;
    border-radius:50%;
    background:#ffffff;
    color:#1d4ed8;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
    touch-action:manipulation;
}
.editor-font-size-btn:hover{
    background:#dbeafe;
}
.editor-font-size-btn:active{
    transform:scale(.94);
}
.editor-font-size-value{
    min-width:27px;
    color:#1e40af;
    font-size:12px;
    font-weight:900;
    line-height:1;
    text-align:center;
}
.extra-text-size-quick-group{
    margin-top:10px;
}
.extra-text-size-quick-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}
.extra-text-size-quick-header > label{
    min-width:0;
    margin:0 !important;
}
.extra-text-size-quick-group input[type="range"]{
    width:100%;
}
.overlay-color-row{
    justify-content:center !important;
}
.overlay-color-row > .group{
    text-align:center;
}
.overlay-color-row label{
    text-align:center;
}
.overlay-color-row input[type="color"]{
    display:block;
    margin:0 auto;
}
.overlay-mode-group + .group{
    margin-top:8px;
}
.overlay-mode-menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.overlay-mode-menu button{
    min-height:44px;
    border:1px solid #bfdbfe;
    border-radius:10px;
    background:#eff6ff;
    color:#1e40af;
    font-family:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}
.overlay-mode-menu button:hover{
    background:#dbeafe;
}
.overlay-mode-menu button.is-active{
    border-color:#2563eb;
    background:#2563eb;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(37,99,235,.18);
}
.overlay-control-hidden{
    display:none !important;
}
.project-actions-bottom{
    margin-top:14px;
}
.project-actions-bottom .row-3{
    margin-bottom:8px;
}
.image-border-controls{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:12px;
    align-items:center;
}
.image-border-controls input[type="color"]{
    width:54px !important;
    height:46px !important;
    min-width:54px !important;
    border-radius:999px;
}
.image-border-controls input[type="range"]{
    width:100%;
}
.text-align-menu{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.text-align-menu button{
    min-height:42px;
    border:1px solid #bfdbfe;
    border-radius:10px;
    background:#eff6ff;
    color:#1e40af;
    font-family:inherit;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
}
.text-align-menu button:hover{
    background:#dbeafe;
}
.text-align-menu button.is-active{
    border-color:#2563eb;
    background:#2563eb;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(37,99,235,.18);
}
.btn.is-locked{
    border-color:#facc15 !important;
    background:#fef3c7 !important;
    color:#92400e !important;
}
@media(max-width:1000px){
    .headline-editor-heading-row{
        margin-bottom:5px;
    }
    .editor-font-size-controls{
        gap:3px;
        padding:2px;
    }
    .editor-font-size-btn{
        width:34px;
        height:34px;
        min-width:34px;
    }
    .extra-text-size-quick-header{
        margin-bottom:7px;
    }
}

/* Extracted from style block 3 id="headline-color-row-style" */
/* จัดสีข้อความหลักและสีขอบข้อความให้อยู่บรรทัดเดียวกัน */
.headline-color-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:start;
}
.headline-color-row .headline-color-card{
    width:100% !important;
    min-width:0 !important;
    margin-bottom:14px !important;
    text-align:center;
}
.headline-color-row .headline-color-card input[type="color"]{
    display:block;
    margin:0 auto;
}
.headline-color-row #headlineColorHelp{
    margin-top:8px;
    font-size:11px;
    line-height:1.4;
    text-align:center;
}
@media(max-width:1000px){
    .headline-color-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }
    .headline-color-row .headline-color-card{
        margin-bottom:8px !important;
        padding:8px 6px !important;
    }
}

/* Extracted from style block 4 id="stable-workspace-desktop-style" */
/* =========================================================
   STABLE DESKTOP WORKSPACE
   ไม่บังคับ Canvas และ Sidebar ให้ติดกันตามขนาด Canvas
   จึงไม่เพี้ยนเมื่อซูมเบราว์เซอร์ และยังคงอัตราส่วน Canvas เดิม
   ========================================================= */
@media (min-width:1001px){
    .app{
        width:100% !important;
        max-width:1253px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding:16px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(368px,403px) !important;
        gap:16px !important;
        align-items:start !important;
        justify-content:stretch !important;
    }

    .preview-side{
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
    }

    .canvas-box{
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
    }

    .preview-side canvas{
        width:auto !important;
        height:auto !important;
        max-width:100% !important;
        max-height:calc(100vh - var(--quick-menu-height) - 32px) !important;
        object-fit:contain !important;
        flex:none !important;
    }

    .menu-side{
        width:100% !important;
        min-width:0 !important;
        max-width:403px !important;
    }
}

/* Extracted from style block 5 id="quick-menu-center-desktop" */
@media (min-width:1001px){
    body > .quick-menu{
        justify-content:center !important;
    }
    .quick-menu-grid{
        flex:0 1 auto !important;
        width:auto !important;
        justify-content:center !important;
    }
}

/* Extracted from style block 6 id="mobile-edge-to-edge-ui-v1" */
/* =========================================================
   MOBILE EDGE-TO-EDGE UI
   เต็มความกว้างหน้าจอ ไม่มีขอบด้านข้าง และปุ่มแตะง่าย
   ========================================================= */
@media (max-width:1000px){
    :root{
        --mobile-preview-height:clamp(240px,38svh,420px);
        --mobile-bottom-menu-height:158px;
    }

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        overflow-x:hidden !important;
        overscroll-behavior-x:none;
    }

    body{
        padding-top:var(--mobile-preview-height) !important;
        padding-bottom:calc(var(--mobile-bottom-menu-height) + env(safe-area-inset-bottom) + 8px) !important;
        background:#f3f6fa !important;
    }

    .app,
    .menu-side,
    .panel{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        border-left:0 !important;
        border-right:0 !important;
    }

    .app{
        padding:0 !important;
    }

    .preview-side{
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100vw !important;
        height:var(--mobile-preview-height) !important;
        min-height:0 !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:#dbe5f1 !important;
        box-shadow:0 6px 18px rgba(15,23,42,.16) !important;
    }

    .canvas-box{
        width:100vw !important;
        height:100% !important;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    .preview-side canvas{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:100vw !important;
        max-height:var(--mobile-preview-height) !important;
        margin:auto !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        object-fit:contain !important;
    }

    .menu-side{
        padding:0 !important;
    }

    .panel{
        padding:6px 0 0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:#f5f7fb !important;
        box-shadow:none !important;
    }

    .panel h2,
    .section-title,
    .menu-side .section-title,
    .menu-side .section-title-inline{
        width:100% !important;
        margin:7px 0 !important;
        padding:10px 12px !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        font-size:14px !important;
    }

    .group{
        width:100% !important;
        margin:0 0 7px !important;
        padding:10px 12px !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    .row,
    .row-3{
        width:100% !important;
        gap:6px !important;
        padding:0 8px !important;
        margin-bottom:7px !important;
    }

    label{
        font-size:13px !important;
        line-height:1.35 !important;
    }

    input[type="text"],
    input[type="number"],
    textarea,
    select,
    .rich-text-editor{
        width:100% !important;
        min-height:44px !important;
        border-radius:10px !important;
        font-size:16px !important;
        padding:10px 11px !important;
    }

    .rich-text-editor{
        min-height:112px !important;
        padding-bottom:10px !important;
    }

    textarea{
        min-height:96px !important;
    }

    .btn,
    .btn.small{
        min-height:44px !important;
        padding:9px 10px !important;
        border-radius:11px !important;
        font-size:13px !important;
        line-height:1.2 !important;
    }

    .editor-font-size-btn{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
    }


    input[type="color"]{
        width:48px !important;
        height:48px !important;
    }

    input[type="range"]{
        min-height:30px !important;
    }

    .switch-row{
        min-height:46px !important;
    }

    .switch-row input{
        width:24px !important;
        height:24px !important;
    }

    .layer-list,
    .txt-list{
        width:100% !important;
        max-height:220px !important;
        padding:7px !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:10px !important;
    }

    .layer-item,
    .txt-item{
        min-height:62px !important;
        padding:8px !important;
        border-radius:10px !important;
    }

    .template-manager{
        width:100% !important;
        margin:0 0 8px !important;
        padding:10px 12px !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:0 !important;
    }

    .headline-color-row{
        padding:0 8px !important;
    }

    body > .quick-menu{
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100vw !important;
        height:calc(var(--mobile-bottom-menu-height) + env(safe-area-inset-bottom)) !important;
        padding:5px 5px calc(5px + env(safe-area-inset-bottom)) !important;
        border-radius:0 !important;
        gap:4px !important;
    }

    .quick-menu-grid{
        width:100% !important;
        height:148px !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        grid-template-rows:repeat(3,46px) !important;
        gap:4px !important;
        padding:0 !important;
    }

    .quick-menu button{
        width:100% !important;
        min-width:0 !important;
        height:46px !important;
        min-height:46px !important;
        padding:4px 5px !important;
        border-radius:10px !important;
        font-size:10.5px !important;
        line-height:1.05 !important;
        gap:3px !important;
    }

    .quick-menu button i{
        font-size:15px !important;
    }

    #removeBgBtn,
    button[onclick="downloadImage()"]{
        min-height:48px !important;
        font-size:14px !important;
    }
}

@media (max-width:430px){
    :root{
        --mobile-preview-height:clamp(220px,35svh,360px);
        --mobile-bottom-menu-height:158px;
    }

    .panel h2,
    .section-title,
    .menu-side .section-title,
    .menu-side .section-title-inline{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .group{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .quick-menu button{
        font-size:9.8px !important;
    }
}

@media (max-width:360px){
    :root{
        --mobile-preview-height:220px;
    }

    .row{
        grid-template-columns:1fr 1fr !important;
    }

    .quick-menu button{
        font-size:9.2px !important;
        padding-left:3px !important;
        padding-right:3px !important;
    }
}

/* Extracted from style block 7 id="disable-sidebar-smooth-style" */
html,body,.menu-side{scroll-behavior:auto !important}.sidebar-panel-section,.sidebar-panel-section.is-active{animation:none !important;transition:none !important}

/* Extracted from style block 8 id="comfortable-dark-main-bg" */
html,
body{
    background:#111827 !important;
}
.preview-side{
    background:#111827 !important;
}
.canvas-box{
    background:transparent !important;
}
@media(max-width:1000px){
    html,
    body{
        background:#111827 !important;
    }
    .preview-side{
        background:
            radial-gradient(circle at 18% 0%,rgba(51,65,85,.62),transparent 42%),
            linear-gradient(180deg,#111827 0%,#0f172a 100%) !important;
        border-bottom-color:rgba(148,163,184,.24) !important;
        box-shadow:0 10px 26px rgba(2,6,23,.32) !important;
    }
    .canvas-box{
        background:rgba(15,23,42,.34) !important;
        border-color:rgba(148,163,184,.22) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(2,6,23,.28) !important;
    }
}

/* Extracted from style block 9 id="canvas-drag-performance-v1" */
canvas{
    contain:layout paint;
    -webkit-user-select:none;
    user-select:none;
}
.crop-drag-overlay{
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
    margin:0 !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:fill !important;
}

/* Extracted from style block 10 id="headline-color-shortcuts-style" */
.headline-color-shortcuts{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    min-height:42px;
    margin-top:8px;
    padding-right:4px;
}
.headline-line-color-button{
    position:relative;
    display:block;
    flex:0 0 40px;
    width:40px;
    height:40px;
    cursor:pointer;
}
.headline-color-shortcuts input[type="color"]{
    position:absolute;
    inset:0;
    flex:0 0 40px;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:3px !important;
    border:2px solid #ffffff !important;
    border-radius:50% !important;
    box-shadow:0 0 0 1px #bfdbfe,0 3px 8px rgba(15,23,42,.12) !important;
    background:#ffffff !important;
}
.headline-line-color-button span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#0f172a;
    font-size:16px;
    font-weight:900;
    line-height:1;
    text-shadow:-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,1px 1px 1px #fff;
    pointer-events:none;
}
.headline-color-shortcuts input[type="color"]:focus-visible{
    box-shadow:0 0 0 4px rgba(59,130,246,.24) !important;
}
.extra-text-line-color-shortcuts{
    justify-content:flex-end;
}
.extra-text-auto-color-controls{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
}
.extra-text-auto-color-btn{
    min-height:40px;
    border:1px solid #bfdbfe;
    border-radius:10px;
    background:#eff6ff;
    color:#1e40af;
    font-family:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}
.extra-text-auto-color-btn:hover{
    background:#dbeafe;
}
.extra-text-auto-color-btn.is-active{
    border-color:#2563eb;
    background:#2563eb;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(37,99,235,.18);
}
.extra-text-auto-color-btn:disabled{
    cursor:not-allowed;
    opacity:.48;
}
.extra-text-random-color-btn{
    grid-column:1 / -1;
}
@media(max-width:480px){
    .headline-color-shortcuts{gap:6px;padding-right:2px}
    .headline-line-color-button{
        flex-basis:36px;
        width:36px;
        height:36px;
    }
    .headline-color-shortcuts input[type="color"]{
        flex-basis:36px;
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
    }
}

/* Keep image-tool cards rounded after the mobile .group reset. */
.menu-side .group.eraser-tool-card,
.menu-side .group.image-tool-card{
    border:1px solid #dbeafe !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,#eff6ff 0%,#f8fbff 100%) !important;
    overflow:hidden;
}

@media(max-width:1000px){
    .menu-side .group.eraser-tool-card,
    .menu-side .group.image-tool-card{
        width:calc(100% - 16px) !important;
        max-width:calc(100vw - 16px) !important;
        margin:0 8px 10px !important;
        padding:12px !important;
        border-left:1px solid #dbeafe !important;
        border-right:1px solid #dbeafe !important;
        border-radius:16px !important;
        box-shadow:0 4px 12px rgba(15,23,42,.06) !important;
    }

    .eraser-tool-card .eraser-actions{
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .eraser-tool-card .btn,
    .image-tool-card .btn{
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        border-radius:13px !important;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    .eraser-tool-card input[type="range"],
    .image-tool-card input[type="range"]{
        display:block;
        width:100% !important;
        max-width:100% !important;
    }

    .eraser-tool-card .help,
    .image-tool-card .help{
        max-width:100%;
        overflow-wrap:anywhere;
    }
}

@media(max-width:380px){
    .eraser-tool-card .eraser-actions{
        grid-template-columns:1fr;
    }
}

/* Extracted from style block 11 */
/* =========================================================
   FULLSCREEN CANVAS MODE V29
   กดดูภาพเต็มจอ / ใช้ canvas ตัวจริงเพื่อให้ลาก-ซูม-ครอปได้เหมือนเดิม
   ========================================================= */
.preview-fullscreen-btn{
    position:absolute;
    right:14px;
    top:14px;
    z-index:9055;
    border:1px solid rgba(191,219,254,.95);
    border-radius:999px;
    padding:10px 13px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:rgba(239,246,255,.94);
    color:#1e40af;
    font-family:inherit;
    font-size:13px;
    font-weight:900;
    line-height:1;
    box-shadow:0 8px 20px rgba(15,23,42,.14);
    backdrop-filter:blur(12px) saturate(140%);
    cursor:pointer;
}
.preview-fullscreen-btn:active{transform:scale(.97)}

.canvas-fullscreen-modal{
    position:fixed;
    inset:0;
    z-index:2147483600;
    display:none;
    flex-direction:column;
    background:radial-gradient(circle at top,#1e293b 0%,#0f172a 52%,#020617 100%);
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    overflow:hidden;
}
.canvas-fullscreen-modal.active{display:flex}
.canvas-fullscreen-header{
    flex:0 0 auto;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 2px 8px;
}
.canvas-fullscreen-title{
    min-width:0;
    color:#e0f2fe;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.canvas-fullscreen-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
}
.canvas-fullscreen-actions button{
    border:1px solid rgba(219,234,254,.22);
    border-radius:999px;
    min-height:38px;
    padding:9px 12px;
    background:rgba(239,246,255,.94);
    color:#1e40af;
    font-family:inherit;
    font-size:12px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}
.canvas-fullscreen-actions button.fullscreen-close-btn{
    background:rgba(248,250,252,.12);
    color:#f8fafc;
}
.canvas-fullscreen-stage{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    touch-action:none;
}
.canvas-fullscreen-hint{
    flex:0 0 auto;
    padding:8px 4px 2px;
    text-align:center;
    color:#bfdbfe;
    font-size:11px;
    font-weight:700;
    line-height:1.35;
    opacity:.9;
}
body.canvas-fullscreen-open{
    overflow:hidden !important;
}
body.canvas-fullscreen-open > .quick-menu{
    display:none !important;
}
body.canvas-fullscreen-open canvas{
    width:auto !important;
    height:auto !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100svh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:18px !important;
    box-shadow:0 16px 38px rgba(0,0,0,.42) !important;
    touch-action:none !important;
}

@media(max-width:1000px){
    .preview-fullscreen-btn{
        position:fixed;
        top:calc(7px + env(safe-area-inset-top));
        right:7px;
        min-height:32px;
        padding:6px 9px;
        font-size:11px;
    }
    body.canvas-fullscreen-open{
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    body.canvas-fullscreen-open .preview-side{
        position:static !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        padding:0 !important;
        box-shadow:none !important;
    }
    body.canvas-fullscreen-open .app{
        display:none !important;
    }
    body.canvas-fullscreen-open .canvas-fullscreen-modal{
        display:flex !important;
    }
    body.canvas-fullscreen-open canvas{
        max-width:calc(100vw - 16px) !important;
        max-height:calc(100svh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        border-radius:16px !important;
    }
}

/* Extracted from style block 12 id="news-date-feature-style" */
.news-date-panel .news-date-check{
    display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #dbeafe;
    border-radius:12px;background:#eff6ff;cursor:pointer
}
.news-date-panel .news-date-check input{width:18px;height:18px;margin:0;accent-color:#2563eb}
.news-date-panel .news-date-check span{font-size:14px;font-weight:800;color:#1e3a8a}
.news-date-panel input[type="date"]{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;font:inherit;background:#fff}
.news-date-panel input[type="date"]:disabled{background:#f1f5f9;color:#64748b}
.news-date-preview{margin-top:8px;padding:10px 12px;border-radius:10px;background:#0f172a;color:#fff;font-size:16px;font-weight:800;text-align:center}
.news-date-hint{margin:8px 0 0;color:#64748b;font-size:12px;line-height:1.55}

/* Compact controls for the date-on-image panel. */
.news-date-panel{
    --date-control-h:42px;
}
.news-date-panel .group{
    margin-bottom:8px;
}
.news-date-panel .news-date-toggle-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:8px;
}
.news-date-panel .news-date-check{
    min-height:40px;
    padding:8px 10px;
    gap:7px;
    border-radius:10px;
}
.news-date-panel .news-date-check input{
    width:16px;
    height:16px;
}
.news-date-panel .news-date-check span{
    font-size:13px;
    line-height:1.15;
}
.news-date-panel .news-date-picker label,
.news-date-panel .row label{
    margin-bottom:5px;
}
.news-date-panel .news-date-picker-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(130px,0.78fr);
    gap:8px;
    align-items:stretch;
}
.news-date-panel input[type="date"]{
    min-height:var(--date-control-h);
    padding:7px 10px;
    border-radius:10px;
    font-size:16px;
}
.news-date-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:var(--date-control-h);
    margin-top:0;
    padding:7px 10px;
    border-radius:10px;
    font-size:14px;
    line-height:1.2;
}
.news-date-panel .news-date-style-row{
    grid-template-columns:minmax(0,1fr) 76px;
    gap:10px;
    align-items:end;
}
.news-date-panel .news-date-position-row{
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.news-date-panel input[type="range"]{
    height:22px;
}
.news-date-panel input[type="color"]{
    width:56px;
    height:42px;
    min-height:42px;
    padding:2px;
    border-radius:999px;
}
.news-date-hint{
    margin:4px 0 0;
    font-size:11.5px;
    line-height:1.35;
}
.mobile-preview-actions,
.mobile-border-popup,
.mobile-image-delete-bar,
.mobile-main-lock-bar,
.mobile-logo-toolbar,
.mobile-overlay-toolbar,
.mobile-text-size-tab,
.mobile-text-toolbar,
.mobile-text-delete-bar,
.mobile-bg-toolbar,
.mobile-blur-toolbar,
.mobile-divider-toolbar,
.mobile-font-tune-popup{
    display:none !important;
}
@media (max-width:520px){
    .news-date-panel .news-date-picker-grid{
        grid-template-columns:1fr;
    }
}

/* Mobile canvas-only view: show the artwork full screen and hide every editor menu. */
@media (max-width:1000px){
    :root{
        --mobile-canvas-vertical-gap:10svh;
        --mobile-canvas-horizontal-gap:5px;
    }

    html,
    body{
        width:100vw !important;
        height:100svh !important;
        min-height:100svh !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        background:#0f172a !important;
    }

    body > .quick-menu,
    .menu-side,
    .panel,
    .preview-fullscreen-btn,
    .canvas-fullscreen-modal{
        display:none !important;
    }

    .mobile-preview-actions{
        position:fixed !important;
        left:14px !important;
        right:14px !important;
        top:calc(env(safe-area-inset-top) + 6px) !important;
        z-index:2147483000 !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px !important;
        pointer-events:auto !important;
    }

    .mobile-preview-actions button{
        min-height:28px !important;
        border:1px solid rgba(148,163,184,.38) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.72) !important;
        color:#e0f2fe !important;
        box-shadow:0 3px 10px rgba(0,0,0,.2) !important;
        font-family:inherit !important;
        font-size:10px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:3px !important;
        padding:3px 6px !important;
        cursor:pointer !important;
        touch-action:manipulation !important;
    }

    .mobile-preview-actions button:active{
        transform:scale(.97) !important;
        background:rgba(30,41,59,.88) !important;
    }

    .mobile-preview-actions .mobile-layer-action{
        display:none !important;
        border-color:rgba(56,189,248,.5) !important;
        background:rgba(8,47,73,.78) !important;
        color:#bae6fd !important;
    }

    .mobile-preview-actions .mobile-text-action{
        display:none !important;
        border-color:rgba(167,139,250,.52) !important;
        background:rgba(59,7,100,.76) !important;
        color:#ede9fe !important;
    }

    .mobile-preview-actions .mobile-overlay-action{
        border-color:rgba(45,212,191,.52) !important;
        background:rgba(20,83,45,.74) !important;
        color:#bbf7d0 !important;
    }

    .mobile-preview-actions .mobile-bg-action{
        border-color:rgba(96,165,250,.54) !important;
        background:rgba(30,58,138,.74) !important;
        color:#dbeafe !important;
    }

    .mobile-preview-actions .mobile-divider-action{
        border-color:rgba(45,212,191,.56) !important;
        background:rgba(19,78,74,.76) !important;
        color:#ccfbf1 !important;
    }

    .mobile-preview-actions .mobile-download-action{
        border-color:rgba(74,222,128,.62) !important;
        background:rgba(21,128,61,.82) !important;
        color:#dcfce7 !important;
    }

    .mobile-preview-actions .mobile-download-action:active{
        background:rgba(22,101,52,.94) !important;
    }

    .mobile-preview-actions .mobile-blur-action{
        border-color:rgba(244,114,182,.54) !important;
        background:rgba(131,24,67,.74) !important;
        color:#fce7f3 !important;
    }

    body.mobile-overlay-toolbar-open .mobile-preview-actions .mobile-overlay-action{
        border-color:rgba(94,234,212,.88) !important;
        background:rgba(13,148,136,.82) !important;
        color:#ecfeff !important;
    }

    body.mobile-bg-toolbar-open .mobile-preview-actions .mobile-bg-action{
        border-color:rgba(147,197,253,.88) !important;
        background:rgba(29,78,216,.84) !important;
        color:#eff6ff !important;
    }

    body.mobile-divider-toolbar-open .mobile-preview-actions .mobile-divider-action{
        border-color:rgba(153,246,228,.92) !important;
        background:rgba(15,118,110,.86) !important;
        color:#f0fdfa !important;
    }

    body.mobile-blur-toolbar-open .mobile-preview-actions .mobile-blur-action{
        border-color:rgba(251,207,232,.9) !important;
        background:rgba(190,24,93,.84) !important;
        color:#fff1f2 !important;
    }

    body.mobile-layer-selected .mobile-preview-actions .mobile-layer-action{
        display:inline-flex !important;
    }

    body.mobile-layer-selected .mobile-preview-actions .mobile-image-top-tool{
        display:none !important;
    }

    body.mobile-text-selected .mobile-preview-actions .mobile-text-action{
        display:inline-flex !important;
    }

    .mobile-preview-actions .mobile-layer-action:active{
        background:rgba(12,74,110,.9) !important;
    }

    .mobile-preview-actions .mobile-flip-action{
        border-color:rgba(251,146,60,.58) !important;
        background:rgba(124,45,18,.78) !important;
        color:#fed7aa !important;
    }

    .mobile-preview-actions .mobile-flip-action:active{
        background:rgba(154,52,18,.92) !important;
    }

    .mobile-preview-actions .mobile-text-action:active{
        background:rgba(88,28,135,.9) !important;
    }

    .mobile-preview-actions .mobile-border-action{
        border-color:rgba(251,191,36,.55) !important;
        background:rgba(69,26,3,.78) !important;
        color:#fde68a !important;
    }

    .mobile-preview-actions .mobile-border-action.is-active{
        border-color:rgba(253,224,71,.9) !important;
        background:rgba(113,63,18,.92) !important;
        color:#fef9c3 !important;
    }

    .mobile-preview-actions .mobile-delete-action{
        border-color:rgba(248,113,113,.62) !important;
        background:rgba(127,29,29,.78) !important;
        color:#fecaca !important;
    }

    .mobile-preview-actions .mobile-delete-action:active{
        background:rgba(153,27,27,.92) !important;
    }

    .mobile-preview-actions .mobile-lock-action{
        border-color:rgba(96,165,250,.62) !important;
        background:rgba(30,58,138,.76) !important;
        color:#dbeafe !important;
    }

    .mobile-preview-actions .mobile-lock-action.is-locked{
        border-color:rgba(251,191,36,.76) !important;
        background:rgba(120,53,15,.84) !important;
        color:#fde68a !important;
    }

    .mobile-preview-actions .mobile-lock-action:active{
        background:rgba(30,64,175,.9) !important;
    }

    .mobile-preview-actions .mobile-lock-action.is-locked:active{
        background:rgba(146,64,14,.92) !important;
    }

    .mobile-border-popup{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        top:auto !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(251,191,36,.34) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        color:#f8fafc !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-border-popup::-webkit-scrollbar{
        display:none !important;
    }

    .mobile-border-popup.is-open{
        display:flex !important;
    }

    .mobile-image-delete-bar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        top:calc(env(safe-area-inset-top) + 106px) !important;
        bottom:auto !important;
        z-index:2147482998 !important;
        display:none !important;
        justify-content:center !important;
        pointer-events:auto !important;
    }

    body.mobile-layer-selected:not(.mobile-overlay-toolbar-open) .mobile-image-delete-bar{
        display:flex !important;
    }

    .mobile-image-delete-bar button{
        width:min(260px,calc(100vw - 10px)) !important;
        height:38px !important;
        min-height:38px !important;
        border:1px solid rgba(248,113,113,.62) !important;
        border-radius:999px !important;
        background:rgba(127,29,29,.82) !important;
        color:#fecaca !important;
        box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
        font-family:inherit !important;
        font-size:12px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;
        padding:0 14px !important;
        touch-action:manipulation !important;
    }

    .mobile-image-delete-bar button:active{
        transform:scale(.97) !important;
        background:rgba(153,27,27,.94) !important;
    }

    .mobile-main-lock-bar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        top:calc(env(safe-area-inset-top) + 150px) !important;
        bottom:auto !important;
        z-index:2147482998 !important;
        display:none !important;
        justify-content:center !important;
        pointer-events:auto !important;
    }

    body.mobile-main-image-ready:not(.mobile-overlay-toolbar-open):not(.mobile-bg-toolbar-open):not(.mobile-blur-toolbar-open):not(.mobile-divider-toolbar-open):not(.mobile-text-selected) .mobile-main-lock-bar{
        display:flex !important;
    }

    body.mobile-main-image-ready:not(.mobile-layer-selected):not(.mobile-overlay-toolbar-open):not(.mobile-bg-toolbar-open):not(.mobile-blur-toolbar-open):not(.mobile-divider-toolbar-open):not(.mobile-text-selected) .mobile-main-lock-bar{
        top:calc(env(safe-area-inset-top) + 106px) !important;
        bottom:auto !important;
    }

    .mobile-main-lock-bar button{
        width:min(280px,calc(100vw - 10px)) !important;
        height:38px !important;
        min-height:38px !important;
        border:1px solid rgba(96,165,250,.68) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.84) !important;
        color:#bfdbfe !important;
        box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
        font-family:inherit !important;
        font-size:12px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;
        padding:0 14px !important;
        touch-action:manipulation !important;
    }

    .mobile-main-lock-bar button.is-locked{
        border-color:rgba(251,191,36,.76) !important;
        background:rgba(120,53,15,.86) !important;
        color:#fde68a !important;
    }

    .mobile-main-lock-bar button:active{
        transform:scale(.97) !important;
    }

    .mobile-logo-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(251,191,36,.36) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-logo-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-logo-selected:not(.mobile-overlay-toolbar-open):not(.mobile-bg-toolbar-open):not(.mobile-blur-toolbar-open):not(.mobile-text-selected):not(.mobile-layer-selected) .mobile-logo-toolbar{
        display:flex !important;
    }

    .mobile-logo-toolbar button,
    .mobile-logo-range{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(251,191,36,.42) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#fde68a !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-logo-toolbar button:active{
        transform:scale(.97) !important;
    }

    .mobile-logo-range{
        width:214px !important;
        justify-content:flex-start !important;
    }

    .mobile-logo-range span{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .mobile-logo-range input[type="range"]{
        flex:1 1 auto !important;
        min-width:78px !important;
        min-height:24px !important;
        accent-color:#fbbf24 !important;
    }

    .mobile-logo-range b{
        flex:0 0 50px !important;
        color:#fef3c7 !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .mobile-text-delete-bar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 128px) !important;
        z-index:2147482998 !important;
        display:none !important;
        justify-content:center !important;
        pointer-events:auto !important;
    }

    body.mobile-text-selected:not(.mobile-overlay-toolbar-open) .mobile-text-delete-bar{
        display:flex !important;
    }

    .mobile-text-delete-bar button{
        width:min(280px,calc(100vw - 10px)) !important;
        height:38px !important;
        min-height:38px !important;
        border:1px solid rgba(248,113,113,.62) !important;
        border-radius:999px !important;
        background:rgba(127,29,29,.82) !important;
        color:#fecaca !important;
        box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
        font-family:inherit !important;
        font-size:12px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;
        padding:0 14px !important;
        touch-action:manipulation !important;
    }

    .mobile-text-delete-bar button:active{
        transform:scale(.97) !important;
        background:rgba(153,27,27,.94) !important;
    }

    .mobile-bg-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(96,165,250,.36) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-bg-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-bg-toolbar-open .mobile-bg-toolbar{
        display:flex !important;
    }

    body.mobile-bg-toolbar-open .mobile-overlay-toolbar,
    body.mobile-bg-toolbar-open .mobile-text-toolbar,
    body.mobile-bg-toolbar-open .mobile-text-size-tab,
    body.mobile-bg-toolbar-open .mobile-image-delete-bar,
    body.mobile-bg-toolbar-open .mobile-main-lock-bar,
    body.mobile-bg-toolbar-open .mobile-text-delete-bar{
        display:none !important;
    }

    .mobile-bg-toolbar button,
    .mobile-bg-color-btn,
    .mobile-bg-range{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(147,197,253,.38) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#dbeafe !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-bg-toolbar button.is-active{
        border-color:rgba(147,197,253,.92) !important;
        background:rgba(29,78,216,.82) !important;
        color:#eff6ff !important;
    }

    .mobile-bg-toolbar .mobile-bg-blur-btn{
        border-color:rgba(125,211,252,.58) !important;
        background:rgba(8,47,73,.82) !important;
        color:#bae6fd !important;
    }

    .mobile-bg-toolbar .mobile-bg-blur-btn.is-active{
        border-color:rgba(103,232,249,.92) !important;
        background:rgba(14,116,144,.88) !important;
        color:#ecfeff !important;
    }

    .mobile-bg-toolbar button:active,
    .mobile-bg-color-btn:active{
        transform:scale(.97) !important;
    }

    .mobile-bg-toolbar button:disabled{
        opacity:.45 !important;
    }

    .mobile-bg-color-btn{
        position:relative !important;
        width:82px !important;
        min-width:82px !important;
        overflow:hidden !important;
        color:#fef3c7 !important;
        background:rgba(69,26,3,.72) !important;
    }

    .mobile-bg-color-btn input[type="color"]{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-bg-color-btn span{
        position:relative !important;
        z-index:1 !important;
        pointer-events:none !important;
    }

    .mobile-bg-range{
        width:204px !important;
        justify-content:flex-start !important;
    }

    .mobile-bg-range span{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .mobile-bg-range input[type="range"]{
        flex:1 1 auto !important;
        min-width:74px !important;
        min-height:24px !important;
        accent-color:#60a5fa !important;
    }

    .mobile-bg-range b{
        flex:0 0 42px !important;
        color:#dbeafe !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

.mobile-bg-toolbar:not(.is-photo-mode) .mobile-bg-photo-only,
.mobile-bg-toolbar:not(.is-gradient-mode) .mobile-bg-gradient-only{
    display:none !important;
}

.image-tool-card.is-disabled{
    opacity:.55;
}

.image-tool-card.is-disabled input,
.image-tool-card.is-disabled button{
    cursor:not-allowed;
}

    .mobile-blur-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(244,114,182,.36) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-blur-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-blur-toolbar-open .mobile-blur-toolbar{
        display:flex !important;
    }

    body.mobile-blur-toolbar-open .mobile-overlay-toolbar,
    body.mobile-blur-toolbar-open .mobile-bg-toolbar,
    body.mobile-blur-toolbar-open .mobile-text-toolbar,
    body.mobile-blur-toolbar-open .mobile-text-size-tab,
    body.mobile-blur-toolbar-open .mobile-image-delete-bar,
    body.mobile-blur-toolbar-open .mobile-main-lock-bar,
    body.mobile-blur-toolbar-open .mobile-text-delete-bar{
        display:none !important;
    }

    .mobile-divider-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(45,212,191,.38) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-divider-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-divider-toolbar-open .mobile-divider-toolbar{
        display:flex !important;
    }

    body.mobile-divider-toolbar-open .mobile-overlay-toolbar,
    body.mobile-divider-toolbar-open .mobile-bg-toolbar,
    body.mobile-divider-toolbar-open .mobile-blur-toolbar,
    body.mobile-divider-toolbar-open .mobile-text-toolbar,
    body.mobile-divider-toolbar-open .mobile-text-size-tab,
    body.mobile-divider-toolbar-open .mobile-image-delete-bar,
    body.mobile-divider-toolbar-open .mobile-main-lock-bar,
    body.mobile-divider-toolbar-open .mobile-logo-toolbar,
    body.mobile-divider-toolbar-open .mobile-text-delete-bar{
        display:none !important;
    }

    .mobile-divider-toolbar button,
    .mobile-divider-color-btn,
    .mobile-divider-range{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(94,234,212,.42) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#ccfbf1 !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-divider-toolbar button.is-active{
        border-color:rgba(153,246,228,.92) !important;
        background:rgba(15,118,110,.84) !important;
        color:#f0fdfa !important;
    }

    .mobile-divider-toolbar button:active,
    .mobile-divider-color-btn:active{
        transform:scale(.97) !important;
    }

    .mobile-divider-color-btn{
        position:relative !important;
        width:72px !important;
        min-width:72px !important;
        overflow:hidden !important;
    }

    .mobile-divider-color-btn input[type="color"]{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-divider-color-btn span{
        position:relative !important;
        z-index:1 !important;
        pointer-events:none !important;
    }

    .mobile-divider-range{
        width:190px !important;
        justify-content:flex-start !important;
    }

    .mobile-divider-range span{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .mobile-divider-range input[type="range"]{
        flex:1 1 auto !important;
        min-width:70px !important;
        min-height:24px !important;
        accent-color:#2dd4bf !important;
    }

    .mobile-divider-range b{
        flex:0 0 42px !important;
        color:#ccfbf1 !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .mobile-blur-toolbar button,
    .mobile-blur-range{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(244,114,182,.42) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#fce7f3 !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-blur-toolbar button.is-active{
        border-color:rgba(251,207,232,.9) !important;
        background:rgba(190,24,93,.84) !important;
        color:#fff1f2 !important;
    }

    .mobile-blur-toolbar button:disabled{
        opacity:.45 !important;
    }

    .mobile-blur-toolbar button:active{
        transform:scale(.97) !important;
    }

    .mobile-blur-range{
        width:220px !important;
        justify-content:flex-start !important;
    }

    .mobile-blur-range span{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .mobile-blur-range input[type="range"]{
        flex:1 1 auto !important;
        min-width:80px !important;
        min-height:24px !important;
        accent-color:#f472b6 !important;
    }

    .mobile-blur-range b{
        flex:0 0 46px !important;
        color:#fce7f3 !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .mobile-overlay-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(125,211,252,.34) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.58) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-overlay-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-overlay-toolbar-open .mobile-overlay-toolbar{
        display:flex !important;
    }

    body.mobile-overlay-toolbar-open .mobile-text-toolbar,
    body.mobile-overlay-toolbar-open .mobile-text-size-tab{
        display:none !important;
    }

    .mobile-overlay-toolbar button,
    .mobile-overlay-toolbar select,
    .mobile-overlay-color-btn,
    .mobile-overlay-range{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(147,197,253,.38) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#e0f2fe !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-overlay-toolbar button.is-active{
        border-color:rgba(94,234,212,.86) !important;
        background:rgba(13,148,136,.82) !important;
        color:#ecfeff !important;
    }

    .mobile-overlay-toolbar button:active,
    .mobile-overlay-color-btn:active{
        transform:scale(.97) !important;
    }

    .mobile-overlay-toolbar select{
        width:82px !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        text-align:center !important;
        text-align-last:center !important;
        background:rgba(8,47,73,.82) !important;
        color:#bae6fd !important;
    }

    .mobile-overlay-color-btn{
        position:relative !important;
        width:88px !important;
        min-width:88px !important;
        overflow:hidden !important;
        color:#fef3c7 !important;
        background:rgba(69,26,3,.72) !important;
    }

    .mobile-overlay-color-btn input[type="color"]{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-overlay-color-btn span{
        position:relative !important;
        z-index:1 !important;
        pointer-events:none !important;
    }

    .mobile-overlay-range{
        width:204px !important;
        justify-content:flex-start !important;
    }

    .mobile-overlay-range span{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .mobile-overlay-range input[type="range"]{
        flex:1 1 auto !important;
        min-width:74px !important;
        min-height:24px !important;
        accent-color:#2dd4bf !important;
    }

    .mobile-overlay-range b{
        flex:0 0 44px !important;
        color:#dbeafe !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .mobile-overlay-toolbar.is-text-mode .mobile-overlay-band-only,
    .mobile-overlay-toolbar:not(.is-text-mode) .mobile-overlay-text-only{
        display:none !important;
    }

    .mobile-overlay-toolbar.is-solid-color .mobile-overlay-gradient-only{
        display:none !important;
    }

    .mobile-font-tune-controls{
        flex:0 0 auto !important;
        display:flex !important;
        width:auto !important;
        gap:3px !important;
        align-items:center !important;
    }

    .mobile-font-tune-controls label{
        display:flex !important;
        flex:0 0 auto !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        min-height:38px !important;
        margin:0 !important;
        color:#cbd5e1 !important;
        font-size:10.5px !important;
        font-weight:800 !important;
    }

    .mobile-font-tune-controls label:nth-child(1),
    .mobile-font-tune-controls label:nth-child(3),
    .mobile-font-tune-controls label:nth-child(4){
        width:212px !important;
        gap:7px !important;
    }

    .mobile-font-tune-controls label:nth-child(2){
        width:82px !important;
        gap:7px !important;
        align-items:center !important;
    }

    .mobile-font-tune-controls label span{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex:0 0 auto !important;
        gap:0 !important;
        margin-bottom:0 !important;
        white-space:nowrap !important;
    }

    .mobile-font-tune-controls b{
        flex:0 0 42px !important;
        color:#dbeafe !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .mobile-font-tune-controls input[type="range"]{
        flex:1 1 auto !important;
        width:auto !important;
        min-width:74px !important;
        min-height:24px !important;
        accent-color:#2dd4bf !important;
    }

    .mobile-font-tune-controls input[type="color"]{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        min-height:28px !important;
        box-sizing:border-box !important;
        padding:0 !important;
        border-radius:999px !important;
        border:1px solid rgba(45,212,191,.42) !important;
        background:rgba(15,23,42,.62) !important;
        overflow:hidden !important;
        appearance:none !important;
        -webkit-appearance:none !important;
    }

    .mobile-font-tune-controls input[type="color"]::-webkit-color-swatch-wrapper{
        padding:0 !important;
        border:0 !important;
        border-radius:999px !important;
    }

    .mobile-font-tune-controls input[type="color"]::-webkit-color-swatch{
        border:0 !important;
        border-radius:999px !important;
    }

    .mobile-font-tune-controls input[type="color"]::-moz-color-swatch{
        border:0 !important;
        border-radius:999px !important;
    }

    .mobile-text-size-tab{
        position:fixed !important;
        right:6px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        z-index:2147482998 !important;
        width:40px !important;
        height:174px !important;
        border:1px solid rgba(191,219,254,.38) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.48) !important;
        color:#e0f2fe !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        display:none !important;
        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        gap:10px !important;
        touch-action:none !important;
        user-select:none !important;
        cursor:ns-resize !important;
    }

    body.mobile-text-selected .mobile-text-size-tab{
        display:none !important;
    }

    .mobile-text-size-tab{
        display:none !important;
        pointer-events:none !important;
    }

    .mobile-text-toolbar{
        position:fixed !important;
        left:5px !important;
        right:5px !important;
        bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
        z-index:2147482998 !important;
        display:none !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:5px !important;
        padding:5px 6px !important;
        border:1px solid rgba(191,219,254,.32) !important;
        border-radius:10px !important;
        background:rgba(15,23,42,.54) !important;
        box-shadow:0 10px 26px rgba(0,0,0,.26) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        pointer-events:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        white-space:nowrap !important;
        touch-action:pan-x !important;
    }

    .mobile-text-toolbar::-webkit-scrollbar{
        display:none !important;
    }

    body.mobile-text-selected .mobile-text-toolbar{
        display:flex !important;
    }

    body.mobile-overlay-toolbar-open .mobile-text-toolbar,
    body.mobile-overlay-toolbar-open .mobile-text-size-tab,
    body.mobile-overlay-toolbar-open.mobile-text-selected .mobile-text-toolbar,
    body.mobile-overlay-toolbar-open.mobile-text-selected .mobile-text-size-tab{
        display:none !important;
    }

    .mobile-text-toolbar button,
    .mobile-text-toolbar select,
    .mobile-text-color-btn{
        min-width:0 !important;
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(147,197,253,.38) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        color:#e0f2fe !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        padding:5px 11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-text-toolbar select{
        width:126px !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        text-align:center !important;
        text-align-last:center !important;
        background:rgba(8,47,73,.82) !important;
        color:#bae6fd !important;
    }

    .mobile-text-toolbar button:active,
    .mobile-text-color-btn:active{
        transform:scale(.97) !important;
        background:rgba(30,41,59,.9) !important;
    }

    .mobile-text-toolbar button.is-active{
        border-color:rgba(253,224,71,.86) !important;
        background:rgba(113,63,18,.86) !important;
        color:#fef9c3 !important;
    }

    .mobile-text-line-colors{
        display:none !important;
        flex:0 0 auto !important;
        align-items:center !important;
        gap:3px !important;
    }

    .mobile-text-toolbar.is-line-color-active .mobile-text-line-colors{
        display:flex !important;
    }

    .mobile-text-line-colors label{
        position:relative !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(253,224,71,.38) !important;
        border-radius:999px !important;
        background:rgba(30,41,59,.78) !important;
        color:#fef9c3 !important;
        flex:0 0 auto !important;
        min-width:92px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        padding:4px 8px !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        overflow:hidden !important;
    }

    .mobile-line-color-swatch{
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        border-radius:999px !important;
        background:var(--swatch-color,#ffffff) !important;
        box-shadow:0 0 0 1px rgba(255,255,255,.45) inset !important;
        pointer-events:none !important;
    }

    .mobile-text-line-colors input.mobile-text-line-color-input{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        box-sizing:border-box !important;
        border:0 !important;
        padding:0 !important;
        background:transparent !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        overflow:hidden !important;
        display:block !important;
        flex:0 0 auto !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-text-line-colors input.mobile-text-line-color-input::-webkit-color-swatch-wrapper{
        padding:0 !important;
        border:0 !important;
    }

    .mobile-text-line-colors input.mobile-text-line-color-input::-webkit-color-swatch{
        border:0 !important;
    }

    .mobile-text-line-colors input.mobile-text-line-color-input::-moz-color-swatch{
        border:0 !important;
    }

    .mobile-text-color-btn{
        position:relative !important;
        width:60px !important;
        min-width:60px !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        align-self:center !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:0 12px !important;
        overflow:hidden !important;
        background:rgba(64,18,74,.72) !important;
        color:#f5d0fe !important;
    }

    .mobile-text-color-btn i,
    .mobile-text-color-btn span{
        position:relative !important;
        z-index:1 !important;
        line-height:1 !important;
        pointer-events:none !important;
    }

    .mobile-text-color-btn input[type="color"]{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-text-color-btn input[type="color"]::-webkit-color-swatch-wrapper{
        padding:0 !important;
        border:0 !important;
    }

    .mobile-text-color-btn input[type="color"]::-webkit-color-swatch,
    .mobile-text-color-btn input[type="color"]::-moz-color-swatch{
        border:0 !important;
    }

    .mobile-text-size-tab-label{
        writing-mode:vertical-rl !important;
        transform:rotate(180deg) !important;
        font-size:10px !important;
        font-weight:900 !important;
        letter-spacing:0 !important;
        opacity:.82 !important;
    }

    .mobile-text-size-tab-value{
        min-width:28px !important;
        min-height:28px !important;
        border-radius:999px !important;
        background:rgba(59,130,246,.72) !important;
        color:#fff !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
    }

    .mobile-text-size-tab-grip{
        width:18px !important;
        height:4px !important;
        border-radius:999px !important;
        background:rgba(224,242,254,.72) !important;
        box-shadow:0 7px 0 rgba(224,242,254,.48),0 -7px 0 rgba(224,242,254,.48) !important;
    }

    .mobile-border-popup-head{
        display:none !important;
    }

    .mobile-border-popup-head button{
        width:28px !important;
        height:28px !important;
        min-height:28px !important;
        border:1px solid rgba(148,163,184,.3) !important;
        border-radius:999px !important;
        background:rgba(30,41,59,.82) !important;
        color:#e2e8f0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .mobile-border-popup-controls{
        display:contents !important;
    }

    .mobile-border-popup .mobile-bg-toolbar{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        display:none !important;
        flex-wrap:nowrap !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        overflow:visible !important;
        white-space:normal !important;
        touch-action:auto !important;
    }

    body.mobile-layer-selected .mobile-border-popup .mobile-bg-toolbar{
        display:contents !important;
    }

    .mobile-border-popup .mobile-border-zoom{
        width:min(320px,calc(100vw - 18px)) !important;
    }

    .mobile-border-popup label{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        border:1px solid rgba(251,191,36,.42) !important;
        border-radius:999px !important;
        background:rgba(15,23,42,.78) !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:7px !important;
        padding:5px 11px !important;
        margin:0 !important;
        color:#fde68a !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-border-popup label span{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex:0 0 auto !important;
        gap:6px !important;
        margin-bottom:0 !important;
        white-space:nowrap !important;
    }

    .mobile-border-popup label b{
        color:#fef3c7 !important;
        font-size:10.5px !important;
        font-weight:900 !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }

    .mobile-border-popup .mobile-border-color{
        position:relative !important;
        width:72px !important;
        min-width:72px !important;
        overflow:hidden !important;
        justify-content:center !important;
        background:rgba(69,26,3,.72) !important;
    }

    .mobile-border-popup input[type="color"]{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        opacity:0 !important;
        cursor:pointer !important;
    }

    .mobile-border-popup input[type="range"]{
        flex:1 1 auto !important;
        min-width:160px !important;
        min-height:24px !important;
        accent-color:#fbbf24 !important;
    }

    .mobile-border-size{
        width:min(320px,calc(100vw - 18px)) !important;
    }

    .mobile-border-popup .mobile-bg-toolbar button,
    .mobile-border-popup .mobile-bg-color-btn,
    .mobile-border-popup .mobile-bg-range{
        border-color:rgba(147,197,253,.38) !important;
        background:rgba(15,23,42,.78) !important;
        color:#dbeafe !important;
    }

    .mobile-border-popup .mobile-bg-toolbar button.is-active{
        border-color:rgba(147,197,253,.92) !important;
        background:rgba(29,78,216,.82) !important;
        color:#eff6ff !important;
    }

    .mobile-border-popup .mobile-bg-toolbar .mobile-bg-blur-btn{
        border-color:rgba(125,211,252,.58) !important;
        background:rgba(8,47,73,.82) !important;
        color:#bae6fd !important;
    }

    .mobile-border-popup .mobile-bg-toolbar .mobile-bg-blur-btn.is-active{
        border-color:rgba(103,232,249,.92) !important;
        background:rgba(14,116,144,.88) !important;
        color:#ecfeff !important;
    }

    .mobile-border-popup .mobile-bg-color-btn{
        width:82px !important;
        min-width:82px !important;
        justify-content:center !important;
        background:rgba(30,58,138,.72) !important;
    }

    .mobile-border-popup .mobile-bg-range{
        width:min(320px,calc(100vw - 18px)) !important;
    }

    .mobile-border-popup .mobile-bg-range input[type="range"]{
        accent-color:#60a5fa !important;
    }

    .mobile-border-popup .mobile-bg-range b{
        color:#dbeafe !important;
    }

    .mobile-border-off{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        margin-top:0 !important;
        padding:5px 12px !important;
        border:1px solid rgba(248,113,113,.34) !important;
        border-radius:999px !important;
        background:rgba(127,29,29,.58) !important;
        color:#fecaca !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        touch-action:manipulation !important;
    }

    .mobile-image-tool-btn{
        flex:0 0 auto !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        box-sizing:border-box !important;
        padding:5px 12px !important;
        border:1px solid rgba(56,189,248,.42) !important;
        border-radius:999px !important;
        background:rgba(8,47,73,.68) !important;
        color:#bae6fd !important;
        font-family:inherit !important;
        font-size:11px !important;
        font-weight:900 !important;
        line-height:1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        white-space:nowrap !important;
        box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
        touch-action:manipulation !important;
    }

    .mobile-image-tool-btn:active,
    .mobile-border-off:active{
        transform:scale(.97) !important;
    }

    .mobile-image-flip-tool{
        border-color:rgba(251,146,60,.56) !important;
        background:rgba(124,45,18,.7) !important;
        color:#fed7aa !important;
    }

    .mobile-image-bg-tool{
        border-color:rgba(45,212,191,.5) !important;
        background:rgba(19,78,74,.68) !important;
        color:#ccfbf1 !important;
    }

    .mobile-logo-range,
    .mobile-bg-range,
    .mobile-divider-range,
    .mobile-blur-range,
    .mobile-overlay-range,
    .mobile-font-tune-controls label:nth-child(1),
    .mobile-font-tune-controls label:nth-child(3),
    .mobile-font-tune-controls label:nth-child(4){
        width:min(320px,calc(100vw - 18px)) !important;
    }

    .mobile-logo-range input[type="range"],
    .mobile-bg-range input[type="range"],
    .mobile-divider-range input[type="range"],
    .mobile-blur-range input[type="range"],
    .mobile-overlay-range input[type="range"],
    .mobile-font-tune-controls input[type="range"]{
        min-width:160px !important;
    }

    .mobile-chat-composer{
        display:none !important;
    }

    body.mobile-chat-composer-open .mobile-chat-composer{
        display:block !important;
    }

    .app{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100svh !important;
        min-height:100svh !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        overflow:hidden !important;
        background:#0f172a !important;
    }

    .preview-side{
        position:fixed !important;
        left:var(--mobile-canvas-horizontal-gap) !important;
        right:var(--mobile-canvas-horizontal-gap) !important;
        top:var(--mobile-canvas-vertical-gap) !important;
        bottom:var(--mobile-canvas-vertical-gap) !important;
        width:calc(100vw - (var(--mobile-canvas-horizontal-gap) * 2)) !important;
        height:calc(100svh - (var(--mobile-canvas-vertical-gap) * 2)) !important;
        min-height:0 !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        background:#0f172a !important;
        touch-action:none !important;
        user-select:none !important;
        -webkit-user-select:none !important;
        -webkit-touch-callout:none !important;
        contain:layout paint size !important;
    }

    .canvas-box{
        width:100% !important;
        height:100% !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        background:#0f172a !important;
        touch-action:none !important;
        user-select:none !important;
        -webkit-user-select:none !important;
        -webkit-touch-callout:none !important;
        contain:layout paint size !important;
    }

    .preview-side canvas,
    body.canvas-fullscreen-open canvas{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:calc(100vw - (var(--mobile-canvas-horizontal-gap) * 2)) !important;
        max-height:calc(100svh - (var(--mobile-canvas-vertical-gap) * 2)) !important;
        margin:auto !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        object-fit:contain !important;
        touch-action:none !important;
        user-select:none !important;
        -webkit-user-select:none !important;
        -webkit-touch-callout:none !important;
        -webkit-tap-highlight-color:transparent !important;
        transform:translateZ(0) !important;
        backface-visibility:hidden !important;
        will-change:transform !important;
    }
}

/* Single long sidebar menu */
.menu-side .panel{
    padding:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
}

.menu-side .panel > *{
    margin-left:0 !important;
    margin-right:0 !important;
}

.menu-side .section-title,
.menu-side .section-title-inline{
    margin:0 !important;
    padding:12px 14px !important;
    border:0 !important;
    border-top:1px solid #e5e7eb !important;
    border-bottom:1px solid #eef2f7 !important;
    border-left:0 !important;
    border-radius:0 !important;
    background:#f8fafc !important;
    box-shadow:none !important;
}

.menu-side .section-title:first-of-type{
    border-top:0 !important;
}

.menu-side .group,
.menu-side .template-manager,
.menu-side .project-actions-bottom{
    margin:0 !important;
    padding:12px 14px !important;
    border:0 !important;
    border-bottom:1px solid #eef2f7 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
}

.menu-side .row,
.menu-side .row-3,
.menu-side .headline-color-row{
    margin:0 !important;
    padding:12px 14px !important;
    border-bottom:1px solid #eef2f7 !important;
    background:#ffffff !important;
}

.menu-side .row > .group,
.menu-side .row-3 > .group,
.menu-side .headline-color-row > .group{
    padding:0 !important;
    border-bottom:0 !important;
}

.menu-side .group.eraser-tool-card,
.menu-side .group.image-tool-card{
    border:0 !important;
    border-bottom:1px solid #eef2f7 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
}

.menu-side .layer-list,
.menu-side .txt-list,
.menu-side .template-list{
    max-height:none !important;
}

@media(max-width:1000px){
    .menu-side{
        padding:0 !important;
    }

    .menu-side .panel{
        border-radius:0 !important;
    }

    .menu-side .section-title,
    .menu-side .section-title-inline,
    .menu-side .group,
    .menu-side .template-manager,
    .menu-side .project-actions-bottom,
    .menu-side .row,
    .menu-side .row-3,
    .menu-side .headline-color-row{
        margin:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    .menu-side .group.eraser-tool-card,
    .menu-side .group.image-tool-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:12px 14px !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }
}

/* Sidebar category colors */
.menu-side [data-sidebar-category="quick-size"]{
    --cat-main:#2563eb;
    --cat-title:#dbeafe;
    --cat-bg:#eff6ff;
    --cat-line:#bfdbfe;
}
.menu-side [data-sidebar-category="quick-templates"]{
    --cat-main:#7c3aed;
    --cat-title:#ede9fe;
    --cat-bg:#f5f3ff;
    --cat-line:#ddd6fe;
}
.menu-side [data-sidebar-category="quick-images"]{
    --cat-main:#059669;
    --cat-title:#d1fae5;
    --cat-bg:#ecfdf5;
    --cat-line:#a7f3d0;
}
.menu-side [data-sidebar-category="quick-bg"]{
    --cat-main:#d97706;
    --cat-title:#fef3c7;
    --cat-bg:#fffbeb;
    --cat-line:#fde68a;
}
.menu-side [data-sidebar-category="quick-blur"]{
    --cat-main:#e11d48;
    --cat-title:#ffe4e6;
    --cat-bg:#fff1f2;
    --cat-line:#fecdd3;
}
.menu-side [data-sidebar-category="quick-crop"]{
    --cat-main:#0891b2;
    --cat-title:#cffafe;
    --cat-bg:#ecfeff;
    --cat-line:#a5f3fc;
}
.menu-side [data-sidebar-category="quick-extra-text"]{
    --cat-main:#4f46e5;
    --cat-title:#e0e7ff;
    --cat-bg:#eef2ff;
    --cat-line:#c7d2fe;
}
.menu-side [data-sidebar-category="quick-divider"]{
    --cat-main:#0d9488;
    --cat-title:#ccfbf1;
    --cat-bg:#f0fdfa;
    --cat-line:#99f6e4;
}
.menu-side [data-sidebar-category="quick-overlay"]{
    --cat-main:#ea580c;
    --cat-title:#ffedd5;
    --cat-bg:#fff7ed;
    --cat-line:#fed7aa;
}
.menu-side [data-sidebar-category="quick-logo"]{
    --cat-main:#475569;
    --cat-title:#e2e8f0;
    --cat-bg:#f8fafc;
    --cat-line:#cbd5e1;
}
.menu-side [data-sidebar-category="quick-date"]{
    --cat-main:#16a34a;
    --cat-title:#dcfce7;
    --cat-bg:#f0fdf4;
    --cat-line:#bbf7d0;
}

.menu-side .sidebar-category-title{
    border-left:6px solid var(--cat-main,#2563eb) !important;
    border-top:1px solid var(--cat-line,#dbeafe) !important;
    border-bottom:1px solid var(--cat-line,#dbeafe) !important;
    background:linear-gradient(90deg,var(--cat-title,#dbeafe) 0%,#ffffff 100%) !important;
    color:#0f172a !important;
}

.menu-side .sidebar-category-title .menu-icon{
    border-color:var(--cat-line,#dbeafe) !important;
    background:#ffffff !important;
    color:var(--cat-main,#2563eb) !important;
}

.menu-side .sidebar-category-body{
    border-bottom:1px solid var(--cat-line,#eef2f7) !important;
    background:var(--cat-bg,#ffffff) !important;
}

.menu-side .sidebar-category-body .group,
.menu-side .sidebar-category-body .row,
.menu-side .sidebar-category-body .row-3{
    background:transparent !important;
}

.menu-side .sidebar-category-body input[type="text"],
.menu-side .sidebar-category-body input[type="number"],
.menu-side .sidebar-category-body textarea,
.menu-side .sidebar-category-body select,
.menu-side .sidebar-category-body .rich-text-editor,
.menu-side .sidebar-category-body .layer-list,
.menu-side .sidebar-category-body .txt-list,
.menu-side .sidebar-category-body .template-list,
.menu-side .sidebar-category-body .template-empty{
    background:rgba(255,255,255,.86) !important;
    border-color:var(--cat-line,#dbeafe) !important;
}

.menu-side .sidebar-category-body .value-pill{
    background:#ffffff !important;
    color:var(--cat-main,#334155) !important;
}

/* Sidebar spacing and vertical control polish */
.menu-side{
    line-height:1.42 !important;
}

.menu-side .panel{
    background:#ffffff !important;
}

.menu-side .section-title,
.menu-side .section-title-inline{
    min-height:46px !important;
    padding:10px 14px !important;
    gap:9px !important;
    font-size:14px !important;
    line-height:1.28 !important;
}

.menu-side .menu-icon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
}

.menu-side .group,
.menu-side .template-manager,
.menu-side .project-actions-bottom,
.menu-side .row,
.menu-side .row-3,
.menu-side .headline-color-row{
    padding:10px 14px !important;
}

.menu-side .group{
    display:block !important;
}

.menu-side .row,
.menu-side .row-3,
.menu-side .headline-color-row,
.menu-side .template-toolbar,
.menu-side .template-actions,
.menu-side .project-actions-bottom .row-3,
.menu-side .bg-mode-menu,
.menu-side .overlay-mode-menu,
.menu-side .text-align-menu,
.menu-side .extra-text-auto-color-controls,
.menu-side .headline-color-shortcuts,
.menu-side .extra-text-line-color-shortcuts,
.menu-side .line-color-grid,
.menu-side .image-border-controls,
.menu-side .eraser-actions,
.menu-side .template-item-actions,
.menu-side .news-date-toggle-row,
.menu-side .news-date-picker-grid,
.menu-side .news-date-style-row,
.menu-side .news-date-position-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
}

.menu-side .row > .group,
.menu-side .row-3 > .group,
.menu-side .headline-color-row > .group,
.menu-side .headline-color-row .headline-color-card{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.menu-side label,
.menu-side .headline-editor-heading-row > label,
.menu-side .extra-text-size-quick-header > label{
    margin-bottom:5px !important;
    font-size:13px !important;
    line-height:1.35 !important;
}

.menu-side input[type="text"],
.menu-side input[type="number"],
.menu-side textarea,
.menu-side select,
.menu-side .rich-text-editor{
    min-height:42px !important;
    padding:9px 11px !important;
    border-radius:10px !important;
}

.menu-side input[type="range"]{
    display:block !important;
    min-height:28px !important;
    margin:2px 0 0 !important;
}

.menu-side .btn,
.menu-side .btn.small,
.menu-side .bg-mode-btn,
.menu-side .overlay-mode-menu button,
.menu-side .text-align-menu button,
.menu-side .extra-text-auto-color-btn{
    width:100% !important;
    min-height:42px !important;
    padding:9px 11px !important;
    border-radius:10px !important;
    white-space:normal !important;
    line-height:1.22 !important;
}

.menu-side .headline-color-shortcuts,
.menu-side .extra-text-line-color-shortcuts{
    align-items:stretch !important;
    padding:0 !important;
}

.menu-side .headline-line-color-button{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    justify-content:flex-start !important;
    padding:4px 8px !important;
    border:1px solid var(--cat-line,#dbeafe) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.72) !important;
}

.menu-side .headline-color-shortcuts input[type="color"],
.menu-side .extra-text-line-color-shortcuts input[type="color"]{
    position:relative !important;
    inset:auto !important;
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin:0 !important;
}

.menu-side .headline-line-color-button span{
    position:relative !important;
    inset:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:24px !important;
    height:auto !important;
    color:#0f172a !important;
    font-size:13px !important;
    text-shadow:none !important;
}

.menu-side .switch-row,
.menu-side .news-date-check{
    min-height:40px !important;
    padding:8px 10px !important;
    border:1px solid var(--cat-line,#dbeafe) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.72) !important;
}

.menu-side .help,
.menu-side .news-date-hint{
    margin-top:6px !important;
    font-size:12px !important;
    line-height:1.45 !important;
}

.menu-side .layer-list,
.menu-side .txt-list,
.menu-side .template-list{
    gap:7px !important;
    padding:8px !important;
}

/* Keep line color shortcuts compact: 4 columns per row. */
.menu-side .extra-text-line-color-shortcuts{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
}

.menu-side .extra-text-line-color-shortcuts .headline-line-color-button{
    height:44px !important;
    min-height:44px !important;
    justify-content:center !important;
    padding:5px !important;
    gap:6px !important;
}

.menu-side .extra-text-line-color-shortcuts .headline-line-color-button span{
    min-width:16px !important;
}

/* Top quick menu removed */
:root{
    --quick-menu-height:0px !important;
}

body{
    padding-top:0 !important;
}

body > .quick-menu,
#quickMenuTop{
    display:none !important;
}

@media(min-width:1001px){
    .preview-side,
    .menu-side{
        top:16px !important;
        max-height:calc(100vh - 32px) !important;
    }

    .preview-side{
        height:calc(100vh - 32px) !important;
    }

    canvas{
        max-height:calc(100vh - 32px) !important;
    }
}

@media(max-width:1000px){
    body{
        padding-top:var(--mobile-preview-height) !important;
    }

    .preview-side{
        top:0 !important;
    }

    .quick-anchor{
        scroll-margin-top:calc(var(--mobile-preview-height) + 16px) !important;
    }
}

/* Sidebar visual order */
.menu-side .panel{
    display:flex !important;
    flex-direction:column !important;
}

.menu-side [data-sidebar-category="quick-images"]{
    order:10 !important;
}

.menu-side [data-sidebar-category="quick-extra-text"]{
    order:20 !important;
}

.menu-side [data-sidebar-category="quick-size"]{
    order:30 !important;
}

.menu-side [data-sidebar-category="quick-templates"]{
    order:40 !important;
}

.menu-side [data-sidebar-category="quick-bg"]{
    order:50 !important;
}

.menu-side [data-sidebar-category="quick-blur"]{
    order:60 !important;
}

.menu-side [data-sidebar-category="quick-crop"]{
    order:70 !important;
}

.menu-side [data-sidebar-category="quick-divider"]{
    order:80 !important;
}

.menu-side [data-sidebar-category="quick-overlay"]{
    order:90 !important;
}

.menu-side [data-sidebar-category="quick-logo"]{
    order:100 !important;
}

.menu-side [data-sidebar-category="quick-date"]{
    order:110 !important;
}

/* Primary sidebar actions */
.menu-side .sidebar-primary-actions{
    order:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    padding:12px 14px !important;
    border:1px solid rgba(191,219,254,.9) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%) !important;
    overflow:hidden !important;
}

.sidebar-primary-action{
    min-height:54px !important;
    border:1px solid #bfdbfe !important;
    border-radius:14px !important;
    padding:10px 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    cursor:pointer !important;
    box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
}

.sidebar-primary-action i{
    font-size:17px !important;
}

.sidebar-primary-action.upload{
    background:#16a34a !important;
    border-color:#22c55e !important;
    color:#ffffff !important;
}

.sidebar-primary-action.text{
    background:#2563eb !important;
    border-color:#60a5fa !important;
    color:#ffffff !important;
}

.sidebar-primary-action:hover{
    filter:brightness(.96);
}

.sidebar-primary-action:active{
    transform:translateY(1px);
}

/* Keep primary upload/text actions visible while scrolling the sidebar. */
.menu-side .sidebar-primary-actions{
    position:sticky !important;
    top:0 !important;
    z-index:200 !important;
    flex:0 0 auto !important;
    margin:0 0 8px !important;
    box-shadow:0 10px 22px rgba(15,23,42,.14) !important;
}

.menu-side > .panel{
    margin-top:0 !important;
}

@media(min-width:1001px){
    .menu-side .sidebar-primary-actions{
        top:0 !important;
    }
}

@media(max-width:1000px){
    .menu-side .sidebar-primary-actions{
        top:var(--mobile-preview-height) !important;
    }
}