/*
Theme Name: Coloring Vemsy
Theme URI: https://coloringvemsy.com/
Author: Coloring Vemsy
Author URI: https://coloringvemsy.com/
Description: A fast, responsive, original WordPress coloring platform theme with printable libraries, browser coloring, private photo-to-sketch conversion, and invite-only 1v1 Color Battles.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: coloring-vemsy
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

:root {
  --cv-ink: #24203a;
  --cv-muted: #655f78;
  --cv-paper: #fffdfb;
  --cv-surface: #ffffff;
  --cv-soft: #f8f4ff;
  --cv-pink: #ef5f9a;
  --cv-pink-dark: #d83e7f;
  --cv-purple: #7c5ce7;
  --cv-mint: #59c7a6;
  --cv-yellow: #ffd76a;
  --cv-blue: #64b5f6;
  --cv-border: #e9e3f0;
  --cv-shadow: 0 14px 40px rgba(67, 43, 99, .10);
  --cv-shadow-sm: 0 7px 22px rgba(67, 43, 99, .08);
  --cv-radius: 22px;
  --cv-radius-sm: 14px;
  --cv-content: 1180px;
  --cv-reading: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--cv-ink);
  background: var(--cv-paper);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.cv-menu-open { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cv-purple); text-decoration-thickness: .09em; text-underline-offset: .15em; }
a:hover { color: var(--cv-pink-dark); }
button, input, select, textarea { font: inherit; }
button, [type="button"], [type="submit"] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cv-yellow); outline-offset: 3px; }
::selection { color: var(--cv-ink); background: #ffe3ef; }

.cv-container { width: min(calc(100% - 32px), var(--cv-content)); margin-inline: auto; }
.cv-reading { width: min(calc(100% - 32px), var(--cv-reading)); margin-inline: auto; }
.cv-section { padding: clamp(54px, 7vw, 92px) 0; }
.cv-section--soft { background: var(--cv-soft); }
.cv-section--tight { padding: 42px 0; }
.cv-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.cv-section-head__copy { max-width: 720px; }
.cv-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--cv-pink-dark); font-size: .81rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.cv-title, h1, h2, h3 { color: var(--cv-ink); line-height: 1.15; letter-spacing: -.025em; }
h1 { margin: 0 0 18px; font-size: clamp(2.35rem, 5vw, 4.7rem); }
h2 { margin: 0 0 14px; font-size: clamp(1.85rem, 3.5vw, 3rem); }
h3 { margin: 0 0 10px; font-size: clamp(1.12rem, 2vw, 1.35rem); }
p { margin: 0 0 1.2em; }
.cv-lead { color: var(--cv-muted); font-size: clamp(1.08rem, 1.8vw, 1.25rem); line-height: 1.75; }
.cv-muted { color: var(--cv-muted); }
.cv-center { text-align: center; }
.cv-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Header */
.cv-skip-link { position: fixed; z-index: 99999; top: 8px; left: 8px; transform: translateY(-140%); padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--cv-ink); }
.cv-skip-link:focus { transform: translateY(0); }
.cv-site-header { position: sticky; z-index: 1000; top: 0; border-bottom: 1px solid rgba(233,227,240,.82); background: rgba(255,253,251,.92); backdrop-filter: blur(16px); }
.admin-bar .cv-site-header { top: 32px; }
.cv-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cv-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--cv-ink); font-size: 1.2rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.cv-brand:hover { color: var(--cv-ink); }
.cv-brand__mark { width: 43px; height: 43px; flex: 0 0 43px; }
.cv-brand .custom-logo { width: auto; max-height: 48px; }
.cv-nav { display: flex; align-items: center; gap: 6px; }
.cv-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cv-nav a { display: inline-flex; padding: 10px 12px; border-radius: 12px; color: var(--cv-ink); font-size: .94rem; font-weight: 750; text-decoration: none; }
.cv-nav a:hover, .cv-nav .current-menu-item > a { color: var(--cv-pink-dark); background: #fff0f6; }
.cv-nav li { position: relative; }
.cv-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; display: none; align-items: stretch; padding: 8px; border: 1px solid var(--cv-border); border-radius: 14px; background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-nav .sub-menu li { width: 100%; }
.cv-nav .sub-menu a { width: 100%; }
.cv-nav li:hover > .sub-menu, .cv-nav li:focus-within > .sub-menu { display: block; }
.cv-menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--cv-border); border-radius: 14px; color: var(--cv-ink); background: var(--cv-surface); }
.cv-menu-toggle svg { width: 23px; margin: auto; }

/* Buttons */
.cv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cv-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border: 0; border-radius: 14px; color: #fff; background: var(--cv-purple); box-shadow: 0 8px 20px rgba(124,92,231,.22); font-weight: 850; line-height: 1.2; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.cv-btn:hover { color: #fff; background: #6747d5; box-shadow: 0 12px 25px rgba(124,92,231,.28); transform: translateY(-2px); }
.cv-btn--pink { background: var(--cv-pink); box-shadow: 0 8px 20px rgba(239,95,154,.23); }
.cv-btn--pink:hover { background: var(--cv-pink-dark); }
.cv-btn--mint { color: #163d32; background: #9de8d0; box-shadow: none; }
.cv-btn--mint:hover { color: #163d32; background: #81d9bd; }
.cv-btn--ghost { color: var(--cv-ink); background: var(--cv-surface); border: 1px solid var(--cv-border); box-shadow: none; }
.cv-btn--ghost:hover { color: var(--cv-pink-dark); background: #fff7fa; box-shadow: none; }
.cv-btn--small { min-height: 42px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; }
.cv-btn[disabled] { cursor: not-allowed; opacity: .55; transform: none; }

/* Hero */
.cv-hero { position: relative; overflow: hidden; padding: clamp(58px, 8vw, 104px) 0 72px; background: linear-gradient(145deg, #fff8fb 0%, #f7f3ff 48%, #effcf8 100%); }
.cv-hero::before, .cv-hero::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(1px); opacity: .5; pointer-events: none; }
.cv-hero::before { top: -100px; left: -90px; background: #ffd7e7; }
.cv-hero::after { right: -110px; bottom: -130px; background: #c9f5e6; }
.cv-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.03fr) minmax(360px,.97fr); align-items: center; gap: clamp(32px, 6vw, 76px); }
.cv-hero h1 span { color: var(--cv-pink-dark); }
.cv-hero__copy { max-width: 660px; }
.cv-hero__trust { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; color: var(--cv-muted); font-size: .9rem; font-weight: 700; }
.cv-hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.cv-hero-art { position: relative; min-height: 485px; }
.cv-art-card { position: absolute; overflow: hidden; border: 8px solid #fff; border-radius: 28px; background: #fff; box-shadow: var(--cv-shadow); }
.cv-art-card img { width: 100%; height: 100%; object-fit: cover; }
.cv-art-card--main { inset: 18px 40px 24px 54px; transform: rotate(1.5deg); }
.cv-art-card--small { right: 0; bottom: 0; width: 43%; height: 42%; transform: rotate(6deg); }
.cv-art-card--tiny { top: 0; left: 0; width: 39%; height: 36%; transform: rotate(-7deg); }
.cv-hero-badge { position: absolute; z-index: 3; top: 42%; right: 2%; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid #eedfed; border-radius: 999px; color: var(--cv-ink); background: rgba(255,255,255,.96); box-shadow: var(--cv-shadow-sm); font-size: .9rem; font-weight: 850; }

/* Grids/cards */
.cv-grid { display: grid; gap: 22px; }
.cv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-category-card { position: relative; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 24px; border: 1px solid var(--cv-border); border-radius: var(--cv-radius); color: var(--cv-ink); background: var(--cv-surface); box-shadow: var(--cv-shadow-sm); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.cv-category-card:hover { color: var(--cv-ink); transform: translateY(-4px); box-shadow: var(--cv-shadow); }
.cv-category-card__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--card-color, #fff0f6); font-size: 1.55rem; }
.cv-category-card__count { color: var(--cv-muted); font-size: .84rem; font-weight: 700; }
.cv-coloring-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.cv-coloring-card { overflow: hidden; border: 1px solid var(--cv-border); border-radius: var(--cv-radius); background: var(--cv-surface); box-shadow: var(--cv-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.cv-coloring-card:hover { transform: translateY(-4px); box-shadow: var(--cv-shadow); }
.cv-coloring-card__image { position: relative; aspect-ratio: 1 / 1; display: block; overflow: hidden; background: #fff; }
.cv-coloring-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.cv-coloring-card:hover .cv-coloring-card__image img { transform: scale(1.025); }
.cv-coloring-card__badges { position: absolute; top: 12px; right: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.cv-pill { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; padding: 6px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: var(--cv-ink); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); font-size: .73rem; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.cv-coloring-card__body { padding: 18px; }
.cv-coloring-card__body h3 { font-size: 1.04rem; }
.cv-coloring-card__body h3 a { color: var(--cv-ink); text-decoration: none; }
.cv-coloring-card__body p { min-height: 3.2em; margin-bottom: 14px; color: var(--cv-muted); font-size: .88rem; }
.cv-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Feature cards */
.cv-feature { position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--cv-border); border-radius: 26px; background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-feature__icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 18px; background: var(--feature-bg, #fff0f6); font-size: 1.65rem; }
.cv-feature h3 { font-size: 1.35rem; }
.cv-feature p { color: var(--cv-muted); }
.cv-feature--wide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; padding: clamp(28px, 5vw, 54px); background: linear-gradient(145deg, #fff, #faf7ff); }
.cv-feature-demo { min-height: 340px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--cv-border); border-radius: 22px; background: repeating-linear-gradient(45deg,#fbfbfb 0,#fbfbfb 14px,#f5f5f5 14px,#f5f5f5 28px); }
.cv-feature-demo img { width: 82%; max-height: 330px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(50,35,70,.12)); }

/* Breadcrumbs and archives */
.cv-page-hero { padding: 58px 0 42px; background: linear-gradient(180deg, #faf7ff, transparent); }
.cv-page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); }
.cv-breadcrumbs { margin-bottom: 14px; color: var(--cv-muted); font-size: .86rem; }
.cv-breadcrumbs a { color: var(--cv-muted); }
.cv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; padding: 14px; border: 1px solid var(--cv-border); border-radius: 16px; background: #fff; }
.cv-filter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-field, .cv-select { min-height: 46px; padding: 10px 13px; border: 1px solid var(--cv-border); border-radius: 12px; color: var(--cv-ink); background: #fff; }
.cv-field:focus, .cv-select:focus { border-color: var(--cv-purple); outline: 3px solid rgba(124,92,231,.14); }
.cv-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.cv-pagination .page-numbers { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 7px; border: 1px solid var(--cv-border); border-radius: 12px; color: var(--cv-ink); background: #fff; text-decoration: none; }
.cv-pagination .current { color: #fff; border-color: var(--cv-purple); background: var(--cv-purple); }
.cv-seo-copy { margin-top: 56px; padding: clamp(25px,5vw,48px); border: 1px solid var(--cv-border); border-radius: var(--cv-radius); background: #fff; }
.cv-seo-copy > * { max-width: 820px; }

/* Content */
.cv-entry { padding: 56px 0 80px; }
.cv-entry-header { margin-bottom: 28px; }
.cv-entry-header h1 { font-size: clamp(2.1rem,4vw,3.8rem); }
.cv-entry-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--cv-muted); font-size: .9rem; }
.cv-entry-content > * { max-width: var(--cv-reading); margin-left: auto; margin-right: auto; }
.cv-entry-content > .alignwide { max-width: var(--cv-content); }
.cv-entry-content > .alignfull { max-width: none; }
.cv-entry-content img { border-radius: 16px; }
.cv-entry-content blockquote { padding: 18px 24px; border-left: 5px solid var(--cv-pink); border-radius: 0 14px 14px 0; background: #fff5f9; }

/* Single design */
.cv-design-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 42px; align-items: start; }
.cv-design-preview { position: sticky; top: 100px; overflow: hidden; padding: 20px; border: 1px solid var(--cv-border); border-radius: var(--cv-radius); background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-design-preview img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.cv-design-info { padding-top: 8px; }
.cv-design-info h1 { font-size: clamp(2.2rem,4vw,3.9rem); }
.cv-download-box { display: grid; gap: 10px; margin: 24px 0; padding: 20px; border: 1px solid var(--cv-border); border-radius: 18px; background: var(--cv-soft); }
.cv-notice { padding: 14px 16px; border: 1px solid #f0d8a0; border-radius: 14px; color: #634d1e; background: #fff8df; font-size: .9rem; }

/* Tool shells */
.cv-app-shell { margin: 30px auto 70px; border: 1px solid var(--cv-border); border-radius: 28px; background: #fff; box-shadow: var(--cv-shadow); overflow: hidden; }
.cv-app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--cv-border); background: #fff; }
.cv-app-header h2 { margin: 0; font-size: 1.15rem; }
.cv-app-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 650px; }
.cv-tool-panel { padding: 18px; border-right: 1px solid var(--cv-border); background: #fcfbfe; }
.cv-tool-group { margin-bottom: 22px; }
.cv-tool-group__title { display: block; margin-bottom: 9px; font-size: .79rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.cv-palette { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.cv-swatch { width: 100%; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--cv-border); }
.cv-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cv-ink); }
.cv-icon-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cv-tool-button { min-height: 43px; padding: 9px 10px; border: 1px solid var(--cv-border); border-radius: 11px; color: var(--cv-ink); background: #fff; font-size: .83rem; font-weight: 800; }
.cv-tool-button:hover, .cv-tool-button[aria-pressed="true"] { border-color: var(--cv-purple); background: #f4f0ff; }
.cv-canvas-stage { position: relative; display: grid; place-items: center; overflow: auto; padding: 32px; background: repeating-linear-gradient(45deg,#f7f5fa 0,#f7f5fa 16px,#f1eef5 16px,#f1eef5 32px); }
.cv-canvas-wrap { width: min(100%, 720px); transform-origin: center; transition: transform .15s ease; }
.cv-canvas-paper { overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(35,30,55,.16); touch-action: manipulation; }
.cv-canvas-paper svg { width: 100%; height: auto; }
.cv-canvas-paper [data-region] { cursor: crosshair; transition: fill .1s ease; }
.cv-raster-canvas { width: 100%; height: auto; background: #fff; touch-action: none; }
.cv-status { min-height: 26px; color: var(--cv-muted); font-size: .85rem; }
.cv-range { width: 100%; accent-color: var(--cv-purple); }
.cv-mobile-tools { display: none; }

/* Upload / sketch */
.cv-upload-zone { min-height: 260px; display: grid; place-items: center; padding: 30px; border: 2px dashed #cfc4dc; border-radius: 22px; text-align: center; background: #fcfbfe; }
.cv-upload-zone.is-dragging { border-color: var(--cv-pink); background: #fff4f8; }
.cv-upload-zone input { max-width: 100%; }
.cv-sketch-grid { display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: 610px; }
.cv-sketch-controls { padding: 22px; border-right: 1px solid var(--cv-border); background: #fcfbfe; }
.cv-sketch-preview { display: grid; place-items: center; padding: 24px; overflow: auto; background: #f3f0f6; }
.cv-sketch-preview canvas { max-width: 100%; max-height: 680px; background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-control-row { margin-bottom: 18px; }
.cv-control-row label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-weight: 800; font-size: .88rem; }
.cv-privacy-box { display: flex; gap: 12px; margin-top: 22px; padding: 16px; border-radius: 15px; color: #245244; background: #eafaf5; font-size: .87rem; }

/* Battle */
.cv-battle-lobby { width: min(100%,760px); margin: 30px auto 70px; padding: clamp(24px,5vw,44px); border: 1px solid var(--cv-border); border-radius: 26px; background: #fff; box-shadow: var(--cv-shadow); }
.cv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; padding: 5px; border-radius: 14px; background: var(--cv-soft); }
.cv-tab { padding: 11px; border: 0; border-radius: 10px; color: var(--cv-muted); background: transparent; font-weight: 850; }
.cv-tab[aria-selected="true"] { color: var(--cv-ink); background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-tab-panel[hidden] { display: none; }
.cv-form-stack { display: grid; gap: 14px; }
.cv-form-stack label { font-weight: 800; }
.cv-form-stack .cv-field, .cv-form-stack .cv-select { width: 100%; }
.cv-room-code { display: inline-flex; padding: 9px 15px; border: 2px dashed var(--cv-purple); border-radius: 12px; color: var(--cv-purple); background: #f7f3ff; font-size: 1.25rem; font-weight: 950; letter-spacing: .14em; }
.cv-battle-stage { display: none; margin: 26px auto 70px; }
.cv-battle-stage.is-active { display: block; }
.cv-battle-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--cv-border); border-radius: 16px; background: #fff; }
.cv-player-label:last-child { text-align: right; }
.cv-battle-timer { min-width: 100px; text-align: center; font-size: 1.35rem; font-weight: 950; }
.cv-battle-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 20px; }
.cv-battle-main { overflow: hidden; border: 1px solid var(--cv-border); border-radius: 22px; background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-battle-main__canvas { padding: 20px; }
.cv-battle-side { display: grid; align-content: start; gap: 16px; }
.cv-opponent-card, .cv-battle-palette, .cv-battle-result { padding: 16px; border: 1px solid var(--cv-border); border-radius: 18px; background: #fff; box-shadow: var(--cv-shadow-sm); }
.cv-opponent-preview { overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: #fff; }
.cv-opponent-preview svg { width: 100%; height: 100%; }
.cv-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.cv-score { padding: 15px; border-radius: 14px; background: var(--cv-soft); }
.cv-score strong { display: block; font-size: 1.5rem; }

/* CTA/footer */
.cv-cta { position: relative; overflow: hidden; padding: clamp(34px,6vw,65px); border-radius: 30px; color: #fff; background: linear-gradient(135deg, #6b4bd8, #a354d7 50%, #ef5f9a); box-shadow: var(--cv-shadow); }
.cv-cta h2, .cv-cta h3 { color: #fff; }
.cv-cta p { max-width: 700px; color: rgba(255,255,255,.88); }
.cv-site-footer { padding: 62px 0 26px; color: #dcd6e6; background: #262139; }
.cv-footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3,1fr); gap: 40px; }
.cv-site-footer h2, .cv-site-footer h3 { color: #fff; font-size: 1rem; }
.cv-site-footer p { color: #bcb5ca; font-size: .9rem; }
.cv-site-footer ul { margin: 0; padding: 0; list-style: none; }
.cv-site-footer li { margin: 7px 0; }
.cv-site-footer a { color: #dcd6e6; text-decoration: none; }
.cv-site-footer a:hover { color: #fff; }
.cv-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #aaa2b8; font-size: .82rem; }

/* FAQ */
.cv-faq { display: grid; gap: 10px; }
.cv-faq details { border: 1px solid var(--cv-border); border-radius: 15px; background: #fff; }
.cv-faq summary { padding: 17px 19px; cursor: pointer; font-weight: 850; }
.cv-faq details > div { padding: 0 19px 17px; color: var(--cv-muted); }

/* Empty/error */
.cv-empty { padding: 44px; border: 1px dashed #cfc4dc; border-radius: 20px; text-align: center; background: #fcfbfe; }
.cv-error, .cv-success { padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
.cv-error { color: #7a2437; background: #ffedf1; }
.cv-success { color: #20553f; background: #eafaf2; }

@media (max-width: 1024px) {
  .cv-nav a { padding-inline: 8px; font-size: .86rem; }
  .cv-hero-grid { grid-template-columns: 1fr 430px; }
  .cv-coloring-grid, .cv-grid--4 { grid-template-columns: repeat(3,1fr); }
  .cv-grid--3 { gap: 18px; }
}

@media (max-width: 860px) {
  .admin-bar .cv-site-header { top: 46px; }
  .cv-menu-toggle { display: inline-grid; place-items: center; }
  .cv-nav { position: fixed; inset: 77px 0 auto; display: none; padding: 14px 16px 22px; border-bottom: 1px solid var(--cv-border); background: #fff; box-shadow: var(--cv-shadow); }
  .admin-bar .cv-nav { top: 123px; }
  .cv-nav.is-open { display: block; }
  .cv-nav ul { align-items: stretch; flex-direction: column; }
  .cv-nav .sub-menu { position: static; min-width: 0; display: block; padding: 0 0 0 18px; border: 0; box-shadow: none; }
  .cv-nav a { padding: 13px 14px; font-size: 1rem; }
  .cv-hero-grid { grid-template-columns: 1fr; }
  .cv-hero__copy { text-align: center; margin-inline: auto; }
  .cv-hero .cv-actions, .cv-hero__trust { justify-content: center; }
  .cv-hero-art { min-height: 430px; max-width: 560px; width: 100%; margin-inline: auto; }
  .cv-grid--3 { grid-template-columns: 1fr; }
  .cv-feature--wide, .cv-design-layout { grid-template-columns: 1fr; }
  .cv-design-preview { position: static; }
  .cv-app-layout, .cv-sketch-grid { grid-template-columns: 1fr; }
  .cv-tool-panel { display: none; border-right: 0; border-bottom: 1px solid var(--cv-border); }
  .cv-tool-panel.is-open { display: block; }
  .cv-mobile-tools { display: inline-flex; }
  .cv-sketch-controls { border-right: 0; border-bottom: 1px solid var(--cv-border); }
  .cv-battle-grid { grid-template-columns: 1fr; }
  .cv-battle-side { grid-template-columns: 1fr 1fr; }
  .cv-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .cv-container, .cv-reading { width: min(calc(100% - 22px), var(--cv-content)); }
  .cv-header-inner { min-height: 68px; }
  .cv-nav { top: 69px; }
  .admin-bar .cv-nav { top: 115px; }
  .cv-brand__mark { width: 39px; height: 39px; flex-basis: 39px; }
  .cv-hero { padding-top: 46px; }
  .cv-hero-art { min-height: 335px; }
  .cv-art-card--main { inset: 22px 28px 18px 34px; }
  .cv-hero-badge { right: 0; font-size: .78rem; }
  .cv-section-head { align-items: start; flex-direction: column; }
  .cv-coloring-grid, .cv-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .cv-coloring-card { border-radius: 16px; }
  .cv-coloring-card__body { padding: 13px; }
  .cv-coloring-card__body p { display: none; }
  .cv-card-actions { grid-template-columns: 1fr; }
  .cv-card-actions .cv-btn { min-height: 40px; padding: 9px; font-size: .78rem; }
  .cv-toolbar { align-items: stretch; flex-direction: column; }
  .cv-filter-form { display: grid; grid-template-columns: 1fr 1fr; }
  .cv-canvas-stage { padding: 12px; min-height: 470px; }
  .cv-app-header { align-items: flex-start; flex-direction: column; }
  .cv-app-header .cv-actions { width: 100%; }
  .cv-app-header .cv-btn { flex: 1; }
  .cv-battle-topbar { grid-template-columns: 1fr 1fr; }
  .cv-battle-timer { grid-column: 1 / -1; grid-row: 1; }
  .cv-battle-side { grid-template-columns: 1fr; }
  .cv-footer-grid { grid-template-columns: 1fr; }
  .cv-footer-bottom { flex-direction: column; }
}

@media (max-width: 400px) {
  .cv-coloring-grid, .cv-grid--4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .cv-site-header, .cv-site-footer, .cv-actions, .cv-tool-panel, .cv-app-header, .cv-breadcrumbs { display: none !important; }
  body { background: #fff; }
  .cv-app-shell, .cv-design-preview { border: 0; box-shadow: none; }
}