/* Cartoon photo (cartoon_photo) — оформление рабочей области.
   Акцентная (фиолетовая) палитра — ЛОКАЛЬНЫЕ токены на .cph, сайтовые токены/шапку не трогаем
   (см. .tool_conventions/image_tools.md + _common.md «Подложка инструмента»). Каркас — Bootstrap.
   Палитра и породa кнопок — общие с соседом по категории (gif_animator): одна семья инструментов. */

.cph {
    --cp-accent:      #6d4ce6;
    --cp-accent-2:    #8b5cf6;
    --cp-accent-dark: #5a3ad1;
    --cp-soft:        #efeafe;  /* светлая фиолетовая заливка иконок/чипов */
    --cp-bg:          #f6f4fb;  /* подложка рабочих блоков */
    --cp-card:        #ffffff;
    --cp-text:        #2c2c3a;
    --cp-muted:       #8b8b9c;
    --cp-line:        #e7e4f1;
    --cp-ok:          #2f9e5e;  /* «лицензия разрешает коммерцию» на вкладке сети */
    --cp-seam:        #cfc6e6;  /* черта между группами в ленте: заметнее рамки чипа */
    --cp-radius:      16px;
    --cp-radius-sm:   10px;
    --cp-thumb:       84px;

    max-width: 720px;
    margin-inline: auto;
    color: var(--cp-text);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* hidden-атрибут должен скрывать даже элементы с заданным display (кнопки .btn и т.п.) */
.cph [hidden] { display: none !important; }

/* Снимаем браузерное/bootstrap обрамление фокуса у кастомных полей (правило CLAUDE.md) */
.cph input:focus,
.cph button:focus,
.cph canvas:focus,
.cph [tabindex]:focus { outline: none; box-shadow: none; }

/* ---------- Шапка карточки ---------- */
.cph__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .25rem 1rem;
}
.cph__logo {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .4px;
}
.cph__title { font-weight: 700; font-size: 1.15rem; }

.cph__reset {
    margin-left: auto;
    background: 0; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-sm);
    color: var(--cp-muted); font-size: .82rem; padding: .4rem .7rem;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
}
.cph__reset:hover { color: var(--cp-accent); border-color: #cbbff2; background: var(--cp-soft); }
.cph[data-state="idle"] .cph__reset { display: none; }

/* ---------- Переключение состояний ---------- */
.cph[data-state="ready"] .cph__idle  { display: none; }
.cph[data-state="idle"]  .cph__ready { display: none; }

/* ====================================================================
   IDLE
   ==================================================================== */
.cph__drop {
    border: 2px dashed #cbbff2;
    border-radius: var(--cp-radius);
    background: var(--cp-card);
    padding: 2.6rem 1.5rem;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.cph__drop.is-over { border-color: var(--cp-accent); background: #faf9ff; }

.cph__drop-icon { position: relative; display: inline-block; font-size: 3.4rem; color: var(--cp-accent-2); line-height: 1; margin-bottom: 1rem; }
.cph__drop-icon .cph__drop-spark { position: absolute; right: -.6rem; bottom: -.1rem; font-size: 1.5rem; color: var(--cp-accent); background: #fff; border-radius: 50%; padding: .1rem; }
.cph__drop-title { font-weight: 800; font-size: 1.6rem; margin: 0 0 1.1rem; color: #1f1f2b; }
.cph__drop-note { color: var(--cp-muted); font-size: .86rem; margin: 1rem 0 0; }

/* Фиолетовая первичная кнопка (общая).
   Селекторы нарочно с `.cph` впереди: у Bootstrap правило `.btn:disabled` весит два класса и
   перебивало одноклассовое наше — подпись «Download image» на выключенной кнопке уезжала в
   тёмный цвет темы вместо белого. Выключенное состояние показываем прозрачностью, не цветом. */
.cph .cph__btn-primary,
.cph .cph__download {
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2));
    border: 0; color: #fff; font-weight: 600;
    border-radius: var(--cp-radius-sm);
    padding: .7rem 1.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.cph .cph__btn-primary:hover,
.cph .cph__download:hover:not(:disabled) { background: linear-gradient(135deg, var(--cp-accent-dark), var(--cp-accent)); color: #fff; }
.cph__upload { padding-inline: 2rem; }

/* фичи */
.cph__features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--cp-line);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    overflow: hidden;
    margin-top: 1.1rem;
}
.cph__feature { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; background: var(--cp-bg); }
.cph__feature-ic { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cp-soft); color: var(--cp-accent); font-size: 1.05rem; }
.cph__feature-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cph__feature-txt strong { font-size: .92rem; }
.cph__feature-txt span { font-size: .8rem; color: var(--cp-muted); }

/* ====================================================================
   READY: снимок
   ==================================================================== */
.cph__stage {
    position: relative;
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: .6rem;
    display: grid;
    place-items: center;
    min-height: 220px;
    /* «нажать и держать» на тач не должно выделять картинку и тянуть страницу */
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: zoom-in;
}
.cph__canvas {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    border-radius: var(--cp-radius-sm);
    background: #fff;
}

/* Ярлык текущего стиля и ярлык «оригинал» — на одном месте, видим то, что показано сейчас */
.cph__badge {
    position: absolute; left: 1.05rem; top: 1.05rem;
    background: rgba(28, 24, 46, .72);
    color: #fff; font-size: .76rem; font-weight: 600;
    letter-spacing: .02em;
    padding: .22rem .6rem; border-radius: 999px;
    backdrop-filter: blur(3px);
    pointer-events: none;
}
.cph__badge--orig { background: rgba(109, 76, 230, .85); }
.cph:not(.is-compare) .cph__badge--orig { display: none; }
.cph.is-compare #cph-badge { display: none; }

.cph__hold {
    position: absolute; right: 1.05rem; bottom: 1.05rem;
    color: var(--cp-muted); font-size: .74rem;
    background: rgba(255, 255, 255, .82);
    padding: .18rem .55rem; border-radius: 999px;
    pointer-events: none;
}
.cph.is-busy .cph__hold, .cph.is-compare .cph__hold { opacity: 0; }

/* Прелоадер поверх снимка */
.cph__busy {
    position: absolute; inset: .6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    background: rgba(246, 244, 251, .82);
    backdrop-filter: blur(2px);
    border-radius: var(--cp-radius-sm);
    color: var(--cp-accent-dark); font-weight: 600; font-size: .92rem;
    text-align: center; padding: 1rem;
}
.cph__spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--cp-soft);
    border-top-color: var(--cp-accent);
    animation: cph-spin .8s linear infinite;
}
@keyframes cph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cph__spinner { animation-duration: 2.4s; } }

/* Полоса хода работы. Ширина приезжает от воркера (он отмечает стадии), поэтому переход
   плавный, но НЕ бесконечный: полоса стоит, пока сервер не сообщил следующую стадию, — так
   видно, что работа идёт, и не создаётся ложное впечатление равномерного отсчёта. */
.cph__bar {
    display: block; width: min(260px, 70%); height: 6px;
    background: var(--cp-soft); border-radius: 999px; overflow: hidden;
}
.cph__bar-fill {
    display: block; height: 100%; width: 0;
    background: var(--cp-accent); border-radius: 999px;
    transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) { .cph__bar-fill { transition: none; } }

/* ====================================================================
   READY: стили
   ==================================================================== */
/* ====================================================================
   READY: переключатель раскладки → лента групп → пресеты выбранной группы
   ==================================================================== */
/* Раскладка ленты: по виду результата ↔ по сети. Пилюли, а не вкладки, — чтобы переключатель
   не спорил с самой лентой, которая вкладками и нарисована. */
.cph__modes {
    display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
    margin-top: 1rem;
}
.cph__modes-label {
    color: var(--cp-muted); font-size: .78rem; font-weight: 600;
    margin-right: .15rem;
}
.cph .cph__mode {
    background: var(--cp-card);
    border: 2px solid var(--cp-line);
    border-radius: 999px;
    padding: .2rem .75rem;
    color: var(--cp-muted); font-size: .78rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.cph .cph__mode:hover { border-color: #cbbff2; color: var(--cp-accent); }
.cph .cph__mode.is-active { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }

/* ---------- Полосы, которые едут вбок: вкладки групп и сама лента ----------
   ПОЛОСЫ ПРОКРУТКИ У НИХ НЕТ. Системная полоса тут уродлива, на телефоне её не видно вовсе,
   а понять, что список продолжается вбок, человек должен. Вместо неё — подтяжка по краю
   (содержимое уходит в белое) и круглая стрелка, и только с той стороны, куда ЕСТЬ куда
   ехать: класс `has-prev`/`has-next` ставит JS по настоящему положению прокрутки. */
.cph__rail { position: relative; }
.cph__rail::before,
.cph__rail::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 46px;
    pointer-events: none; z-index: 2;
    opacity: 0; transition: opacity .18s;
}
.cph__rail::before { left: 0;  background: linear-gradient(to right, var(--cp-card) 22%, rgba(255, 255, 255, 0)); }
.cph__rail::after  { right: 0; background: linear-gradient(to left,  var(--cp-card) 22%, rgba(255, 255, 255, 0)); }
.cph__rail.has-prev::before,
.cph__rail.has-next::after { opacity: 1; }

.cph .cph__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 30px; height: 30px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--cp-card); color: var(--cp-accent);
    box-shadow: 0 2px 10px rgba(45, 30, 95, .18);
    font-size: .95rem; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s, transform .12s;
}
.cph .cph__arrow:hover { background: var(--cp-accent); color: #fff; }
.cph .cph__arrow--prev { left: -4px; }
.cph .cph__arrow--next { right: -4px; }

.cph__nets, .cph__styles {
    /* Полосу прокрутки убираем во всех движках; сам сдвиг пальцем и таской мышью остаётся. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    cursor: grab;               /* полосу можно тащить рукой, и это должно быть видно курсором */
}
/* Пока тащат — курсор «зажатая рука» ВЕЗДЕ, включая чипы и вкладки, и ничего не выделяется. */
.cph .cph__nets.is-dragging,
.cph .cph__styles.is-dragging,
.cph .cph__nets.is-dragging *,
.cph .cph__styles.is-dragging * { cursor: grabbing; user-select: none; }
.cph__nets::-webkit-scrollbar,
.cph__styles::-webkit-scrollbar { width: 0; height: 0; }

.cph__nets {
    display: flex; gap: .35rem;
    margin-top: .5rem;
    overflow-x: auto;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--cp-line);
}
.cph__net {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .35rem;
    background: 0; border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: .45rem .8rem;
    color: var(--cp-muted); font-size: .88rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: color .12s, border-color .12s;
}
.cph__net:hover { color: var(--cp-accent); }
.cph__net.is-active { color: var(--cp-accent-dark); border-bottom-color: var(--cp-accent); }
.cph__net-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 18px; padding: 0 .3rem;
    border-radius: 999px; background: var(--cp-soft);
    color: var(--cp-accent); font-size: .68rem; font-weight: 700;
}
.cph__net.is-active .cph__net-count { background: var(--cp-accent); color: #fff; }
/* Зелёная «C» на вкладке сети: её лицензия разрешает коммерческое использование.
   Значка нет — лицензия коммерцию не разрешает (разбор в vendor/styles/README.md). */
.cph__net-c {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--cp-ok); color: #fff;
    font-size: .62rem; font-weight: 800; line-height: 1;
}

.cph__panels { margin-top: .7rem; }
.cph__panel-note { color: var(--cp-muted); font-size: .8rem; margin: 0 0 .5rem; padding-left: .15rem; }

/* Лента одна и сплошная: весь набор идёт вправо группа за группой. */
.cph__styles {
    display: flex; gap: .6rem;
    overflow-x: auto;
    padding: .15rem .15rem .5rem;
}
/* Начало новой группы: волосяная черта между чипами. Её ставит JS первому ВИДИМОМУ чипу
   группы — так граница не повисает там, где для этого снимка пресетов не осталось. */
.cph__style.is-seam { margin-left: .85rem; }
.cph__style.is-seam::before {
    content: ''; position: absolute; left: -.75rem; top: 14%; bottom: 14%;
    width: 2px; border-radius: 2px; background: var(--cp-seam);
}
.cph__style {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--cp-thumb) + 12px);
    background: var(--cp-card);
    border: 2px solid var(--cp-line);
    border-radius: var(--cp-radius-sm);
    padding: .3rem .3rem .35rem;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
}
.cph__style:hover:not(:disabled) { border-color: #cbbff2; transform: translateY(-2px); }
.cph__style.is-active { border-color: var(--cp-accent); background: var(--cp-soft); }
.cph__style:disabled { opacity: .55; cursor: default; }
/* Стиль, который этому устройству не по памяти: видно, что он есть, но нажать нельзя. */
.cph__style.is-heavy { filter: grayscale(1); }

.cph__style-thumb {
    display: block; width: var(--cp-thumb); height: var(--cp-thumb);
    border-radius: 7px; overflow: hidden;
    background: var(--cp-soft);
}
.cph__style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Картинку чипа браузер иначе тянет как файл и срывает тяжку ленты мышью. */
.cph__style-thumb img { -webkit-user-drag: none; user-select: none; }
.cph__style-name { font-size: .76rem; font-weight: 600; color: var(--cp-text); line-height: 1.1; }
.cph__style.is-active .cph__style-name { color: var(--cp-accent-dark); }

/* ---------- Ошибка и скачивание ---------- */
.cph__error { margin: .85rem 0 0; min-height: 0; color: #c0392b; font-size: .88rem; }
.cph__error:empty { margin: 0; }

.cph .cph__download { width: 100%; margin-top: 1rem; padding-block: .85rem; font-size: 1.02rem; }
.cph .cph__download:disabled { color: #fff; opacity: .5; }

/* ====================================================================
   Мобайл
   ==================================================================== */
@media (max-width: 640px) {
    .cph { --cp-thumb: 68px; }
    .cph__net { padding: .4rem .6rem; font-size: .82rem; }
    .cph .cph__arrow { width: 26px; height: 26px; font-size: .8rem; }
    .cph .cph__arrow--prev { left: -8px; }
    .cph .cph__arrow--next { right: -8px; }
    .cph__rail::before, .cph__rail::after { width: 34px; }
    .cph__drop { padding: 2rem 1rem; }
    .cph__drop-title { font-size: 1.3rem; }
    .cph__features { grid-template-columns: 1fr; }
    .cph__canvas { max-height: 46vh; }
    .cph__badge, .cph__hold { font-size: .7rem; }
    .cph__stage { padding: .45rem; }
}

/* Самопроверка устройства (?diag=1): технический вывод, обычному посетителю не показывается. */
.cph__diag {
    margin: .5rem 0 0;
    padding: .6rem .7rem;
    font-size: .72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f4f2fb;
    border: 1px solid #d9d2f2;
    border-radius: 8px;
    color: #2b2440;
}