.coloring-online-app {
    --bg: var(--bg, #f8fafc);
    --panel: var(--card-bg, #ffffff);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--bg);
    background-image: var(--bg-mesh, radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.05) 0px, transparent 50%));
    min-height: calc(100vh - 200px);
}

/* Poprawka dla motywu Astra - centrowanie flexboksa */
@media (min-width: 922px) {
    .ast-full-width-layout .site-content .ast-container,
    .coloring-online-active-page .site-content .ast-container {
        display: flex !important;
        justify-content: center !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Zapewnienie, że główny obszar zajmuje całą szerokość pod flexem */
    .coloring-online-active-page #primary {
        width: 100% !important;
    }
}

.coloring-online-app .app-container {
    display: flex;
    gap: 20px;
    background: var(--panel);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 1400px; /* Limit for very large screens to maintain usability */
    margin: 0 auto;
    box-sizing: border-box;
}

/* Rest of the styles... */
.coloring-online-app .palette { display: flex; flex-wrap: wrap; gap: 8px; width: 75px; justify-content: center; align-content: flex-start; }
.coloring-online-app .color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border, #e2e8f0); cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.coloring-online-app .color-swatch.active { transform: scale(1.15); border-color: var(--text, #0f172a); box-shadow: var(--shadow-sm, 0 4px 10px rgba(0,0,0,0.2)); }
.coloring-online-app .color-picker-wrapper { position: relative; width: 32px; height: 32px; }
.coloring-online-app .color-picker-wrapper input[type="color"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.coloring-online-app .color-picker-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border: 3px solid #eee; z-index: 1; pointer-events: none; }
.coloring-online-app .main-area { display: flex; flex-direction: column; gap: 15px; align-items: center; flex: 1; min-width: 0; }
.coloring-online-app .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; }
.coloring-online-app button { background: var(--card-bg, #ffffff) !important; border: 1px solid var(--border, #e2e8f0) !important; width: 45px; height: 45px; border-radius: 12px; cursor: pointer; transition: 0.2s; padding: 0; display: flex; justify-content: center; align-items: center; color: var(--text, #333) !important; }
.coloring-online-app button svg { stroke: currentColor !important; fill: none !important; }
.coloring-online-app button:hover { background: var(--nav-hover-bg, rgba(124, 58, 237, 0.08)) !important; border-color: var(--primary, #7c3aed) !important; color: var(--primary, #7c3aed) !important; transform: scale(1.05); }
.coloring-online-app button:active { transform: scale(0.95); }
.coloring-online-app button.active { background: var(--primary, #7c3aed) !important; border-color: var(--primary, #7c3aed) !important; color: #ffffff !important; }
.coloring-online-app button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--card-bg, #ffffff) !important; color: var(--text-light, #94a3b8) !important; border-color: var(--border, #e2e8f0) !important; }
.coloring-online-app .separator { width: 2px; height: 30px; background: var(--border, #e2e8f0); }
.coloring-online-app .dot { background: currentColor; border-radius: 50%; display: inline-block; pointer-events: none; }
.coloring-online-app .canvas-wrapper { position: relative; margin: 0 auto; background: white; border-radius: 15px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border, #e2e8f0); display: inline-block; max-width: 100%; }
.coloring-online-app canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: crosshair; touch-action: pinch-zoom; }
.coloring-online-app .canvas-wrapper img { position: relative; display: block; max-width: 100%; max-height: 75vh; width: auto; height: auto; z-index: 2; pointer-events: none; mix-blend-mode: multiply; }

@media (max-width: 768px) {
    div#primary.ast-full-width-layout { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    div#primary .site-content { padding: 0 !important; }
    .coloring-online-app { padding: 0; }
    .coloring-online-app .app-container { flex-direction: column; gap: 15px; padding: 15px 0; border-radius: 0; box-shadow: none; }
    .coloring-online-app .palette { width: 100%; flex-direction: row; padding: 0 15px; box-sizing: border-box; }
    .coloring-online-app .toolbar { padding: 0 15px; box-sizing: border-box; }
    .coloring-online-app .canvas-wrapper { border-radius: 0; border-left: none; border-right: none; box-shadow: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
}

#save-modal-co { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
#save-modal-co #save-img { max-width: 90%; max-height: 70%; border-radius: 10px; box-shadow: var(--shadow-lg, 0 5px 25px rgba(0,0,0,0.5)); pointer-events: auto; -webkit-touch-callout: default; }
#save-modal-co .modal-text { color: white; font-size: 18px; margin-bottom: 20px; text-align: center; font-weight: bold; padding: 0 20px; }
#save-modal-co .close-modal { margin-top: 20px; background: var(--primary, #7c3aed); color: white; padding: 10px 30px; font-size: 16px; border-radius: 8px; width: auto; transition: background 0.2s; border: none; cursor: pointer; }
#save-modal-co .close-modal:hover { background: var(--primary-hover, #6d28d9); }

/* Ograniczenie szerokości obszaru aplikacji tylko na komputerach (70%) */
@media (min-width: 769px) {
    #primary {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        margin: auto;
    }
}