/* Model picker — plain <div>s, so none of style.min.css's ".menu li .submenu
   ul li > span" rules (built for a single overlaid caption line) ever match
   them. No !important needed anywhere below. */

/* 75px-tall tiles + 10px top/bottom margin = 95px — exactly the height of
   #submenu-models' white box in the original CSS, so the row no longer
   spills out of it. Overrides style.min.css's own ".menu li .submenu ul
   li{margin:11px 6px 9px 7px}" (built for the old 75px-tall thumbnail tiles
   too, but asymmetric) with a clean symmetric margin instead of stacking
   padding on top of it. */
#submenu-models .scroll ul {
    display: inline-flex;
    padding: 0;
}
#submenu-models .scroll ul li {
    margin: 10px 4px;
}
#submenu-models.f2 .mCSB_buttonRight,
#submenu-models .f2 .mCSB_buttonRight { opacity: 0; pointer-events: none; }

/* Плитка — один нейтральный фон для всех, категория модели видна только по
   цвету иконки (не по заливке карточки — пять разных пастельных цветов на
   ряд смотрелись как рандом, а не как система). Активная модель — один синий
   акцент, как везде на сайте.
   Ширина — компактные 165px, без запаса под самую длинную строку: описание
   переносится на 2 строки (высоты 75px хватает с запасом), а не тянет за
   собой ширину всей плитки, оставляя пустое место у всех остальных. */
.us-model {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 165px;
    height: 75px;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #e4e8ee;
    background: #f8f9fb;
    text-align: left;
    text-transform: none;
    font-weight: normal;
    letter-spacing: normal;
}
.us-model:hover { border-color: #427dd6; background: #fff; }
.us-model.is-active { border-color: #427dd6; background: #f3f7fd; }

/* CrispScale сейчас недоступен (лимит исчерпан или живой fallback только что
   случился) — модель физически недоступна, но плитка остаётся на месте, а
   не пропадает: понятно, что она есть, просто временно не работает. */
.us-model.is-disabled {
    opacity: .4;
    filter: grayscale(60%);
    cursor: default;
    pointer-events: none;
}
.us-model.is-disabled:hover { border-color: #e4e8ee; background: #f8f9fb; }

.us-model__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.us-model--camera .us-model__icon { color: #427dd6; }
.us-model--star .us-model__icon { color: #d6598f; }
.us-model--diamond .us-model__icon { color: #8452d6; }
.us-model--wrench .us-model__icon { color: #2ea56a; }
.us-model--zap .us-model__icon { color: #c98a1f; }
.us-model__icon svg { width: 18px; height: 18px; }

.us-model__text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.us-model__label {
    font-size: 14px;
    font-weight: 700;
    color: #21232f;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Реальный запас под бейдж скорости в углу плитки, а не под соседний
       флекс-элемент в этой же строке — иначе "AnimeSharp" + "Medium" в одной
       строке не помещались уже вдвоём, ещё на 190px плитке. */
    padding-right: 16px;
    max-width: 100%;
    line-height: 1.15;
}
/* Было #8890a0 (серый на светло-сером фоне) — контраст ниже WCAG AA даже для
   крупного текста. Затемнил, подпись должна читаться, а не угадываться.
   Две строки вместо одной с троеточием — вся подпись целиком видна. */
.us-model__hint {
    font-size: 12px;
    color: #5b6270;
    text-align: left;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fast/Medium/Slow как маленький цветной значок в углу карточки — отдельная
   от названия модели ось информации (сколько ждать), поэтому не в одной
   строке с названием, а просто рядом, буквой. */
.us-model__speed {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.us-model__speed--fast { background: #2ea56a; }
.us-model__speed--medium { background: #c98a1f; }
.us-model__speed--slow { background: #d1583f; }

/* Примерное время обработки — флажком поверх верхнего края плитки, чтобы было
   видно сразу, не наводя курсор. Особенно важно для медленных моделей: без
   этого человек жмёт на модель и не подозревает, что ждать почти 2 минуты
   с неизвестным результатом. Буква F/M/S внутри плитки — это категория,
   а флажок — уже конкретная оценка в секундах. */
.us-model__avg {
    position: absolute;
    top: -8px;
    left: 8px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e4e8ee;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.us-model__avg--fast { color: #2ea56a; border-color: #b7e0c8; }
.us-model__avg--medium { color: #c98a1f; border-color: #edd3a3; }
.us-model__avg--slow { color: #d1583f; border-color: #f0c1b6; }

/* General — модель по умолчанию, с ней стоит начинать: толстая золотая рамка,
   чтобы взгляд падал сюда в первую очередь. Селектор по data-id, а не по
   .us-model--camera — эта же иконка ещё у remacri/nomos8k. */
.us-model[data-id="general"] {
    border: 3px solid #d4af37;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .25);
}

/* Compare view.
   min-height was a flat 55vh, which had nothing to do with where the model
   bar actually sits — that bar is pinned to the viewport bottom by
   style.min.css's own fixed-position footer (see the #footer note below),
   not to the end of #content's flow. On a tall viewport 55vh fell way short
   of that bar, leaving a dead gap between the two. The bar's fixed geometry
   (.foot-in height 134/bottom -15, ul.menu top 15, #submenu-models
   bottom 44/height 95, .panes height 34) puts its top edge at a constant
   100vh - 143px, and #content's own top padding is 55px, so filling the
   wrapper to exactly 100vh - 198px makes it reach the bar with no gap at
   any viewport height, and justify-content:center (not flex-end, that was
   only there to hug a Scale control that no longer lives in this block)
   keeps the image centered instead of glued to one edge regardless of its
   aspect ratio. */
#canvas-container-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 198px);
    padding: 16px 20px;
}

.us-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.us-compare__frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f4f7;
    user-select: none;
    line-height: 0;
}
.us-compare__after {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
}
.us-compare__beforeWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-right: 2px solid #fff;
}
.us-compare__before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--frame-width, auto);
    max-width: none;
}
.us-compare__handle {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 0;
    cursor: ew-resize;
    touch-action: none;
}
.us-compare__handleLine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.us-compare__handleBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.us-compare__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255,255,255,.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: us-spin .8s linear infinite;
    background: rgba(0,0,0,.15);
}
@keyframes us-spin { to { transform: rotate(360deg); } }

/* Scale control — lives in the same ".panes > .pane" slot artstyle uses for
   its "intensity" slider: a thin bar sitting directly above the white model
   strip (#submenu-models has position:relative below it, ".panes" is
   position:absolute;bottom:100% in style.min.css, so it stacks right above
   the tiles, not in the middle of the canvas where users would tap it
   before actually picking a model). */
#submenu-models .panes,
#submenu-models .pane {
    height: 34px;
}
#scalePane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    text-transform: none;
}
.us-scale {
    display: flex;
    align-items: center;
    gap: 8px;
}
.us-scale__label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.us-scale__opt {
    border: 1px solid #e4e8ee;
    background: #fff;
    color: #21232f;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.us-scale__opt.is-active { border-color: #427dd6; background: #f3f7fd; color: #427dd6; }

/* Стрелки пролистывания были высотой 94px (под старые тайлы artstyle),
   у нас тайлы компактнее (75px) — подгоняем высоту и вертикальный отступ
   под реальную полоску с карточками, а не по центру всего блока футера. */
#submenu-models .mCSB_buttonLeft,
#submenu-models .mCSB_buttonRight {
    height: 75px;
    bottom: 12px;
}

/* style.min.css hardcodes #footer{height:134px}, but the actual visible bar
   (.foot-in) is position:fixed — pinned to the viewport bottom, pulled out of
   flow. #footer itself stays in normal flow with nothing in it, so that
   134px was just reserving dead blank space right after the canvas on the
   page. It's not needed for anything here — kill it. */
#footer { height: 0; }

/* Пока идёт пересборка файла под новый формат/качество (canvas.toBlob на
   апскейленной картинке — не мгновенно), кнопка недоступна для клика, чтобы
   не улетело старое содержимое под новым именем/расширением. */
#saveDownloadLink.is-updating {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 767px) {
    .us-compare__frame,
    .us-compare__after { max-height: 50vh; }
    /* style.min.css swaps in a taller mobile footer bar (.foot-in 152px,
       #submenu-models 133px vs the desktop 134/95) and a different #content
       top padding, so the desktop 198px offset overlaps the bar here instead
       of reaching it — measured on-device instead of assuming it scales. */
    #canvas-container-wrapper { min-height: calc(100vh - 252px); }
}