/*============================================================================
   99-responsive.css — POUZE layout breakpointy (font-size řeší clamp v komponentách)
============================================================================*/

/*============================================================================
   20 — RESPONSIVE BREAKPOINTS
============================================================================*/

@media (max-width: 1100px) {
    .filter-bar { position: relative !important; top: auto !important; }
    .filter-bar__inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .compare-row { grid-template-columns: 1.4fr 1fr 1fr; padding: 16px 20px; }
    .pricing-block { padding: 36px 28px; }
}

@media (max-width: 780px) {
    .et_pb_button.btn--huge,
    .btn--huge .et_pb_button { padding: 14px 24px !important; font-size: 1rem !important; }

    .compare-row {
        grid-template-columns: 1.2fr .6fr .8fr;
        padding: 14px 16px;
        font-size: .85rem;
    }
    .col-feature { font-size: .85rem; }
    .col-feature .hint { display: none; }

    .price-display strong { font-size: 3.2rem; }
    .pricing-block { padding: 32px 24px; }

    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .hero-stats div:nth-child(3) { border-left: none; padding-left: 0; }
    .hero-stats div { padding: 0 16px; }
    .hero-stats strong { font-size: 1.5rem; }

    .et_pb_newsletter,
    .et_pb_signup { padding: 48px 20px !important; }

    .color-block { padding: 32px 24px; }
}


/*============================================================================
   HOMEPAGE — layout breakpointy (mockup v5)
============================================================================*/
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { max-width: 560px; margin-inline: auto; --card-w: 140px; }
    .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
    .hero-meta div:nth-child(3) { border-left: none; padding-left: 0; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .ed-grid { grid-template-columns: repeat(2, 1fr); }
    .ed-feature { grid-row: auto; grid-column: span 2; }
    .rank-list { grid-template-columns: 1fr; gap: 0; }
    .bundle-grid { grid-template-columns: repeat(2, 1fr); }
    .premium-wrap { grid-template-columns: 1fr; }
    .mag-grid { grid-template-columns: 1fr 1fr; }
    .mag-feature { grid-row: auto; grid-column: span 2; }
    .feature-online { grid-template-columns: 1fr; }
    .fo-copy { padding: 48px 32px 0; }
    .fo-visual { padding: 40px; }
    .ugc-mosaic { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
    /* vějíř v hero — na telefonu se šest karet nevejde čitelně, zůstanou čtyři */
    .hero-visual {
        --card-w: min(132px, 33vw);
        --step: calc(var(--card-w) * .6);
        --angle: 15deg;
        --arc: 14px;
        --lift: 18px;
        --push: 16px;
        --nudge: var(--step); /* dorovná zbylé čtyři karty zpět na střed */
    }
    .hero-visual .stack-5,
    .hero-visual .stack-6 { display: none; }
    .hero-visual::before { width: calc(var(--step) * 3 + var(--card-w) + 72px); }

    /* přepočítaný oblouk a náklon pro čtyři karty, ať je vějíř souměrný */
    .hero-visual .stack-1 { --y: var(--arc);             --rot: calc(var(--angle) * -1); }
    .hero-visual .stack-2 { --y: calc(var(--arc) * .11); --rot: calc(var(--angle) * -.33); }
    .hero-visual .stack-3 { --y: calc(var(--arc) * .11); --rot: calc(var(--angle) *  .33); }
    .hero-visual .stack-4 { --y: var(--arc);             --rot: var(--angle); }
}
@media (max-width: 780px) {
    .hero.ok-section { padding: 32px 0 72px !important; }
    .premium-bg.ok-section { padding: 64px 0 !important; }
    .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .ed-grid { grid-template-columns: 1fr; }
    .ed-feature { grid-column: auto; }
    .bundle-grid { grid-template-columns: 1fr; gap: 24px; }
    .mag-grid { grid-template-columns: 1fr; }
    .mag-feature { grid-column: auto; }
    .seasonal { grid-template-columns: 1fr; text-align: center; padding: 28px 20px; }
    .seasonal-stamp { margin: 0 auto; }
    .newsletter { padding: 48px 20px; }
    .nl-form { flex-direction: column; }
    .nl-form button { padding: 14px; }
    .premium-benefits { grid-template-columns: 1fr; }
}

/* Mobil — Divi rows na 90 % (stejně jako .container, ať vše lícuje) */
@media (max-width: 780px) {
    .et_pb_row { width: 90%; }
}

/* Homepage — mobil korekce (hero search stack, sec-head pod sebou) */
@media (max-width: 780px) {
    /* Hero search: tlačítko pod input (inline se placeholder nevešel) */
    .hero-search { padding: 18px 24px; }
    .hero-search-btn {
        position: static;
        width: 100%;
        margin-top: 8px;
        padding: 14px 28px;
        justify-content: center;
    }
    /* Sekční úvody: text a tlačítko pod sebou, zarovnané vlevo */
    .sec-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 18px;
        margin-bottom: 36px;
    }
    .sec-head .link { justify-self: start; }
}

/* Výpis kategorií — layout breakpointy */
@media (max-width: 1100px) {
    .filter-inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .filter-chips { flex-wrap: wrap; row-gap: 8px; }
    .premium-cta { grid-template-columns: 1fr; text-align: center; }
    .premium-cta .cta-actions { justify-content: center; }
    .cat-hero-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
}
@media (max-width: 780px) {
    .cat-hero, .cat-hero.et_pb_section { padding: 48px 0 40px !important; }
    .cat-group { margin-bottom: 56px; }
    .cat-group-head { grid-template-columns: 1fr; gap: 14px; }
    .premium-cta { padding: 32px 24px; }
    .request-cta { padding: 32px 20px; }
    .cat-hero-stats div { padding: 0 16px; }
}

/* Archiv příspěvků — layout breakpointy */
@media (max-width: 1100px) {
    .coloring-grid { grid-template-columns: repeat(3, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .mag-tips-grid { grid-template-columns: 1fr; gap: 16px; }
    .filter-groups { flex-wrap: wrap; row-gap: 10px; }
    .seo-block .seo-body { grid-template-columns: 1fr; gap: 32px; }
    .detail-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
    .detail-hero-stats div:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 780px) {
    .detail-hero { padding: 32px 0 48px; }
    .detail-hero-stats div { padding: 0 14px; }
    .detail-hero-stats strong { font-size: 1.5rem; }
    .coloring-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .coloring-thumb .badge { font-size: .55rem; padding: 4px 8px; }
    .related-grid { grid-template-columns: 1fr 1fr; }
    .pagination { flex-wrap: wrap; }
}

/* Single omalovánka — layout breakpointy */
@media (max-width: 1100px) {
    .detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .detail-actions { position: relative; top: auto; }
    .reviews-head { grid-template-columns: 1fr; gap: 24px; }
    .reviews-grid { grid-template-columns: 1fr; }
    .related-coloring .related-grid { grid-template-columns: repeat(2, 1fr); }
    .back-cta { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 780px) {
    .prev-next { display: none; } /* na mobilu skryto — navigace přes breadcrumbs/related */
    .action-panel { padding: 24px; }
    .image-frame { padding: 18px; }
    .related-coloring .related-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .back-cta { padding: 32px 24px; }
    .rating-display { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rating-display .big-num { font-size: 2.6rem; }
    .ok-archive .sec-grid { padding: 40px 0 0; }
    .ok-archive .sec-seo { padding: 56px 0 40px; }
    .ok-archive .sec-related, .reviews-section, .related-coloring { padding: 64px 0; }
    .ok-archive .sec-newsletter { padding: 48px 0 64px; }
}

/* Kategorie hero search — mobil: tlačítko pod input (jako na homepage) */
@media (max-width: 780px) {
    .cat-hero .cat-hero-search,
    input.cat-hero-search { padding: 18px 24px !important; }
    .cat-hero-search-btn {
        position: static;
        width: 100%;
        margin-top: 8px;
        padding: 14px 24px;
        justify-content: center;
    }
}

/* Malé telefony — omalovánky 1 na řádek */
@media (max-width: 450px) {
    .coloring-grid { grid-template-columns: 1fr; }
}

/* Filter bar — pravá část (toggle + řazení) se na úzkých displejích zalamuje,
   jinak roztahuje stránku doprava */
@media (max-width: 1100px) {
    .filter-right { flex-wrap: wrap; row-gap: 10px; }
    .filter-sort { flex-wrap: wrap; }
    .filter-sort .select select { max-width: 100%; }
}

/* Filter bar ≤500px — úhledné zalamování:
   label skupiny na vlastním řádku, menší chips, Premium full-width,
   Seřadit s roztaženým selectem */
@media (max-width: 500px) {
    .filter-groups { gap: 14px; }
    .filter-group { row-gap: 8px; }
    .filter-group-label {
        display: block;
        width: 100%;
        margin: 0 0 2px;
    }
    .filter-bar .filter-chip { height: 34px; padding: 0 12px; font-size: .8rem; }

    /* Premium + select pod sebou, plná šířka a výška jako input */
    .filter-right {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }
    .filter-toggle {
        width: 100%;
        justify-content: space-between;
        height: 34px;
        padding: 0 14px;
        font-size: .85rem;
    }
    .filter-sort { width: 100%; }
    .filter-sort .select { width: 100%; }
    .filter-sort .select select {
        width: 100%;
        height: 34px !important;
        line-height: 32px !important;
        padding: 0 40px 0 14px !important;
        font-size: .85rem !important;
    }
}

/* Single — action-stats se na malých displejích zalamují (neroztahují stránku) */
@media (max-width: 500px) {
    .action-stats { flex-wrap: wrap; row-gap: 12px; }
    .action-stats div { padding: 0 12px; }
    .action-stats div:first-child { padding-left: 0; }
}

/* Single — související omalovánky pod 400px 1 na řádek */
@media (max-width: 400px) {
    .related-coloring .related-grid { grid-template-columns: 1fr; }
}

/* Hledání + 404 — layout breakpointy */
@media (max-width: 1100px) {
    .ok-search-page .cat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .err-grid { grid-template-columns: 1fr; gap: 32px; }
    .err-visual .big-404 { font-size: 9rem; text-shadow: 4px 4px 0 var(--yellow); }
    .err-visual .err-emoji { font-size: 3rem; }
    .ok-404 .cat-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
    /* search bar: tlačítko pod input (stejný pattern jako ostatní searche) */
    .search-hero .search-bar-wrap input.search-bar { padding: 18px 24px 18px 52px !important; font-size: .98rem !important; }
    .search-bar-btn { position: static; width: 100%; margin-top: 8px; padding: 14px 24px; justify-content: center; }
    .search-clear { right: 10px; top: 31px; }
    .type-tabs-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .type-chips { flex-wrap: wrap; row-gap: 8px; }
    .sort-block select { flex: 1; }
}
@media (max-width: 560px) {
    .ok-404 .cat-strip { grid-template-columns: repeat(2, 1fr); }
    .err-visual .big-404 { font-size: 7rem; }
}

/* 404 ≤600px — CTA tlačítka na střed */
@media (max-width: 600px) {
    .err-actions { justify-content: center; }
}

/* Magazín — layout breakpointy */
@media (max-width: 1100px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-img { aspect-ratio: 16/9; }
    .featured-body { padding: 36px; }
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
    .cross-link .cat-strip { grid-template-columns: repeat(2, 1fr); }
    .filter-search input.mag-search-input { width: 100%; }
    .article-layout { grid-template-columns: 1fr; gap: 24px; max-width: 680px; }
    .share-rail { position: relative; top: auto; flex-direction: row; justify-content: center; padding-top: 0; order: 3; }
    .share-rail .share-label { display: none; }
    .author-bio { grid-template-columns: 1fr; text-align: center; padding: 28px; }
    .author-bio .big-avatar { margin: 0 auto; }
}
@media (max-width: 780px) {
    .mag-hero { padding: 40px 0 32px; }
    .featured-body { padding: 28px 24px; }
    .featured-img { font-size: 5rem; }
    .articles-grid { grid-template-columns: 1fr; }
    .article-head { padding: 32px 0 24px; }
    .article-byline { gap: 14px; }
    .article-byline .vdiv { display: none; }
    .featured-image-frame { aspect-ratio: 4/3; font-size: 5rem; border-radius: 20px; }
    .article-content p, .article-content ul, .article-content ol { font-size: 1.05rem; }
}

/* === MAGAZÍN — elementy v článku === */
@media (max-width: 1100px) {
    .article-content .wp-block-image,
    .article-content .inline-image { margin: 32px 0; }
    .inline-cta {
        margin: 36px 0;
        padding: 28px;
        grid-template-columns: 1fr;
        text-align: center;
    }
    .inline-cta .ico-block { margin: 0 auto 14px; }
    .inline-cta .pill-btn { justify-self: center; }
    .article-content blockquote { margin-right: 0; }
}
@media (max-width: 780px) {
    .article-content blockquote { padding: 24px; margin: 32px 0; }
    .article-content blockquote p { font-size: 1.15rem; }
    .inline-cta { padding: 24px; }
}

/* === PREMIUM LANDING === */
@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    .stats-grid > div { padding: 0 16px; }
    .stats-grid > div:nth-child(3) { border-left: none; }
    .testimonials-grid { grid-template-columns: 1fr; gap: 32px; }
    .compare-row { grid-template-columns: 1.4fr 1fr 1fr; padding: 16px 20px; }
    .compare-row.header { padding: 24px 20px; }
    .pricing-block { padding: 36px 28px; }
    .final-cta { padding: 56px 32px; }
}
@media (max-width: 780px) {
    .premium-hero { padding: 64px 0 80px; }
    .stats-band { padding: 48px 0; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .compare-section, .faq-section, .testimonials-section, .benefits-section,
    .contact-section, .ok-premium .pricing-section, .ok-b2b .pricing-section { padding: 64px 0; }
    .compare-table { border-radius: 20px; }
    .compare-row { grid-template-columns: 1.2fr .6fr .8fr; padding: 14px 16px; font-size: .85rem; }
    .compare-row.header { padding: 20px 16px; grid-template-columns: 1.2fr .6fr .8fr; }
    .compare-row.header .col-plan strong { font-size: 1.05rem; }
    .col-feature { font-size: .85rem; }
    .col-feature .hint { display: none; }
    .price-display strong { font-size: 3.2rem; }
    .pricing-block { padding: 32px 24px; }
    .testimonial-card { padding: 24px; }
    .final-cta { padding: 48px 24px; border-radius: 20px; }
}

/* === PRO ŠKOLY (B2B) === */
@media (max-width: 1100px) {
    .b2b-hero-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-tiers { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 780px) {
    .b2b-hero { padding: 48px 0; }
    .b2b-visual { padding: 32px; aspect-ratio: auto; }
    .b2b-visual .stat-big { font-size: 3.5rem; }
    .benefits-grid { grid-template-columns: 1fr; }
    .contact-form .form-row,
    .upload-form .form-row { grid-template-columns: 1fr; }
    .form-field.full { grid-column: auto; }
}

/* Premium compare-table — menší rádius headeru na mobilu */
@media (max-width: 780px) {
    .compare-row.header { border-radius: 20px 20px 0 0; }
}

/* === Landing stránky — akční tlačítka na mobilu pod sebe, stejně velká === */
@media (max-width: 600px) {
    .hero-actions,
    .b2b-hero-actions,
    .final-cta .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-actions .pill-btn,
    .b2b-hero-actions .pill-btn,
    .final-cta .cta-buttons .pill-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 28px;
        font-size: 1rem;
    }
}

/* === Pro školy — cena tieru na mobilu pod sebe === */
@media (max-width: 780px) {
    .tier-card .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .tier-card .price-row strong { font-size: 2.1rem; }
}

/* === MŮJ ÚČET === */
@media (max-width: 900px) {
    .account-grid { grid-template-columns: 1fr; gap: 24px; }
    .account-sidebar { position: relative; top: auto; }
    .sidebar-nav { display: flex; flex-wrap: wrap; gap: 6px; }
    .sidebar-nav a { flex: 1; min-width: 140px; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .acc-fav-grid { grid-template-columns: repeat(2, 1fr); }
    .welcome-card { grid-template-columns: 1fr; text-align: center; }
    .welcome-card .pill-btn { justify-self: center; }
    .sub-row { grid-template-columns: 1fr; }
    .dl-row { grid-template-columns: 48px 1fr; gap: 10px; }
    .dl-row .dl-format, .dl-row .dl-redo { grid-column: span 2; justify-self: start; }
}
@media (max-width: 560px) {
    .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-tile { padding: 18px; }
    .stat-tile strong { font-size: 1.4rem; }
}

/* Můj účet — menu v sidebaru pod 500px vždy 1 položka na řádek */
@media (max-width: 500px) {
    .sidebar-nav { display: grid; gap: 2px; }
    .sidebar-nav a { flex: none; min-width: 0; width: 100%; }
}

/* Můj účet — formuláře pod 500px: vždy 1 pole na řádek (žádné půlení) */
@media (max-width: 500px) {
    .account-content-card .woocommerce-EditAccountForm,
    .account-content-card .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .account-content-card .woocommerce-EditAccountForm > *,
    .account-content-card .woocommerce-address-fields__field-wrapper > * {
        grid-column: span 1;
    }
}

/* === DETAIL PRODUKTU === */
@media (max-width: 980px) {
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .related-products-grid { grid-template-columns: 1fr; gap: 28px; }
    .bundle-cover-large { aspect-ratio: 4/3; }
    .bundle-cover-large .ico { font-size: 6rem; }
}

/* === KLASICKÁ POKLADNA (shortcode fallback kvůli WC Subscriptions) === */
@media (max-width: 1100px) {
    /* souhrn objednávky pod formulář — na užším okně by vedle 420px panelu
       zbylo na formulář málo místa a pole by se mačkala */
    .woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 0; }
    .woocommerce-checkout form.checkout > #customer_details,
    .woocommerce-checkout form.checkout > #order_review_heading,
    .woocommerce-checkout form.checkout > #order_review {
        grid-column: 1;
        grid-row: auto;
    }
    .woocommerce-checkout #order_review_heading { margin-top: 36px !important; }
}
@media (max-width: 600px) {
    /* pole pod sebe, včetně jména a příjmení */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
        grid-column: span 1;
    }
    .woocommerce-checkout #order_review { padding: 20px !important; border-radius: 18px; }
}

/* === DETAIL PRODUKTU + WC hlášky — mobil === */
@media (max-width: 600px) {
    /* hláška: užší odsazení a tlačítko se zalomí pod text (zarovnané k textu) */
    body .woocommerce-message,
    body .woocommerce-info,
    body .woocommerce-error {
        align-items: flex-start !important;
        padding: 14px 18px 14px 50px !important;
        row-gap: 12px;
    }
    /* text se na mobilu láme na víc řádků, ikona patří k prvnímu */
    body .woocommerce-message::before,
    body .woocommerce-info::before,
    body .woocommerce-error::before { left: 16px; top: 15px; transform: none; }
    body .woocommerce-message a.button,
    body .woocommerce-info a.button,
    body .woocommerce-error a.button,
    body .woocommerce-message .button,
    body .woocommerce-info .button,
    body .woocommerce-error .button {
        margin: 0 auto 0 0 !important;
        padding: 9px 18px !important;
        font-size: .88rem !important;
    }

    /* badge na coveru — menší, nezalamovat */
    .bundle-cover-large .top-row { gap: 8px; }
    .bundle-cover-large .lbl { font-size: .6rem; padding: 5px 10px; white-space: nowrap; }
    .bundle-cover-large .pages { font-size: .7rem; padding: 5px 10px; white-space: nowrap; }

    /* statistiky 2 sloupce místo rozsypaného flexu */
    .action-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
    }
    .action-stats div { border-left: none; padding: 0; }

    /* cena: poznámka pod cenou, neroztahovat doprava */
    .buy-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .buy-row .price { font-size: 2rem; }

    /* Co dostaneš — menší vnitřní odsazení */
    .about-side { padding: 20px; }
}

/* === OBCHOD (výpis balíčků) === */
@media (max-width: 1100px) {
    .bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .premium-cta { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
}
@media (max-width: 780px) {
    .bundle-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .bundles-hero { padding: 48px 0 40px; }
    .hero-stats div { padding: 0 16px; }
    .hero-stats strong { font-size: 1.5rem; }
}
@media (max-width: 480px) {
    .bundle-grid { grid-template-columns: 1fr; }
    .premium-cta { padding: 32px 24px; border-radius: 24px; }
}

/* === AUTH / UGC GALERIE / VYBARVOVÁNÍ === */
@media (max-width: 1100px) {
    .ugc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
    .upload-grid { grid-template-columns: 1fr; gap: 32px; }
    .ok-coloring-app .workspace { grid-template-columns: 80px 1fr; }
    .ok-coloring-app .right-panel { display: none; }
}
@media (max-width: 780px) {
    .auth-card { padding: 28px 24px; }
    .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 8px; }
    .ok-coloring-app .top-bar { flex-direction: column; gap: 10px; padding: 10px; }
    .ok-coloring-app .workspace { grid-template-columns: 1fr; }
    .ok-coloring-app .tools-panel { position: fixed; bottom: 0; left: 0; right: 0; flex-direction: row; border-right: none; border-top: 1px solid var(--line); padding: 10px; justify-content: space-around; overflow-x: auto; z-index: 5; }
    .ok-coloring-app .tools-section { flex-direction: row; gap: 6px; }
    .ok-coloring-app .canvas-area { padding: 14px; padding-bottom: 120px; }
    .ok-coloring-app .tool-btn { width: 44px; height: 44px; }
    .ok-coloring-app .color-grid { display: flex; gap: 4px; }
    .ok-coloring-app .color-swatch { width: 26px; height: 26px; }
    .ok-coloring-app .more-colors-btn { display: none; }
    /* canvas-controls (zoom) je jinak schovaný pod fixní .tools-panel dole
       (obojí position:absolute/fixed bottom:0-24px, tools-panel má vyšší
       z-index) — posunout nad rezervovaný gutter z canvas-area padding-bottom. */
    .ok-coloring-app .canvas-controls { bottom: 132px; }
}