/* ==========================================================================
   mk-card.css — карточка нейросети (017, 08.11.2026), стиль «Закат».
   Одна карточка для страницы /models (кнопка «Попробовать») и окна выбора модели на главной
   (.mk-card--pick: вся карточка — кнопка). Разметка — js/models-hub-card.js (modelCardHtml).
   Самостоятельный файл: свои переменные на .mk-grid / .mk-card, не зависит от tool-page.css.
   Метки Pro/Premium убраны — на карточке цена; «Без регистрации» — модели, доступные гостю.
   Собирается из tmp/fi-mod/css/k-*.css.
   ========================================================================== */
.mk-grid,.mk-card{
  --mk-bg:#0d1322;--mk-line:rgba(148,163,184,.13);--mk-line-2:rgba(148,163,184,.24);
  --mk-text:#f1f5f9;--mk-text-2:#cbd5e1;--mk-text-3:#94a3b8;--mk-text-4:#7c8aa0;
  --mk-pink:#f472b6;--mk-amber:#fbbf24;--mk-green:#34d399;
  --mk-cta:linear-gradient(120deg,#db2777 0%,#ea580c 70%,#d97706 100%);
}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.mk-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:20px;overflow:hidden;text-align:left;
  font:inherit;color:var(--mk-text-2);background:linear-gradient(180deg,rgba(20,27,46,.78),rgba(12,17,30,.9));
  border:1px solid var(--mk-line);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s;isolation:isolate}
.mk-card:hover{transform:translateY(-3px);border-color:rgba(251,113,133,.45);box-shadow:0 22px 44px -24px rgba(236,72,153,.55)}
.mk-card:focus-within{border-color:rgba(251,113,133,.5)}
.mk-card[hidden]{display:none!important}

/* картинка 16:10 + метки поверх */
.mk-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#111a2e}
.mk-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mk-card:hover .mk-card__media img{transform:scale(1.04)}
.mk-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,16,.5) 0%,rgba(5,8,16,0) 30%,rgba(5,8,16,0) 62%,rgba(5,8,16,.55) 100%)}
.mk-card__type,.mk-card__free{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mk-card__type{left:10px;bottom:10px;color:#f1f5f9;background:rgba(8,11,21,.62);border:1px solid rgba(255,255,255,.14)}
.mk-card__free{left:10px;top:10px;color:#d1fae5;background:rgba(6,78,59,.72);border:1px solid rgba(52,211,153,.5)}
.mk-card__free svg{width:12px;height:12px;flex:none}
.mk-card__tick{position:absolute;z-index:1;top:10px;right:10px;display:none;place-items:center;width:28px;height:28px;border-radius:50%;
  color:#fff;background:var(--mk-cta);box-shadow:0 6px 16px -4px rgba(236,72,153,.8)}
.mk-card__tick svg{width:15px;height:15px}
.mk-card.is-active{border-color:rgba(251,113,133,.7);box-shadow:0 0 0 1px rgba(251,113,133,.45),0 20px 44px -24px rgba(236,72,153,.7)}
.mk-card.is-active .mk-card__tick{display:grid}

/* текст */
.mk-card__body{display:flex;flex-direction:column;flex:1;gap:6px;padding:14px 16px 16px}
.mk-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mk-card__name{display:block;margin:0;font-size:16.5px;line-height:1.25;font-weight:750;letter-spacing:-.01em;color:var(--mk-text);overflow-wrap:anywhere}
.mk-card__link{color:inherit;text-decoration:none;background-image:linear-gradient(var(--mk-pink),var(--mk-pink));background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s,color .2s}
.mk-card__link:hover{color:#fecdd3;background-size:100% 1px}
.mk-card__price{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:750;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#fde68a;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.32)}
.mk-card__by{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:-2px 0 0;font-size:12.5px;color:var(--mk-text-4)}
.mk-card__speed{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mk-card__speed svg{width:12px;height:12px;color:var(--mk-text-4)}
.mk-card__speed[data-speed="5"],.mk-card__speed[data-speed="4"]{color:#fcd34d}
.mk-card__speed[data-speed="5"] svg,.mk-card__speed[data-speed="4"] svg{color:var(--mk-amber)}
.mk-card__desc{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--mk-text-2);min-height:2.9em}
.mk-card__facts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.mk-card__facts li{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:600;
  color:var(--mk-text-2);background:rgba(255,255,255,.04);border:1px solid var(--mk-line)}

/* подвал страницы /models: «Попробовать» + «Обзор» */
.mk-card__foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.mk-card__cta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 14px;border:0;border-radius:12px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--mk-cta);white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(236,72,153,.8),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .2s,filter .2s}
.mk-card__cta svg{width:16px;height:16px;flex:none;transition:transform .2s}
.mk-card__cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mk-card__cta:hover svg{transform:translateX(3px)}
.mk-card__cta--lock{color:var(--mk-text);background:rgba(255,255,255,.05);border:1px solid var(--mk-line-2);box-shadow:none}
.mk-card__cta--lock svg{color:var(--mk-pink)}
.mk-card__cta--lock:hover{background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.5);filter:none}
.mk-card__cta--lock:hover svg{transform:none}
.mk-card__cta.is-on{cursor:default;color:#a7f3d0;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.35);box-shadow:none}
.mk-card__cta.is-on:hover{transform:none;filter:none}
.mk-card__review{flex:none;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:12px;font-size:13.5px;font-weight:650;
  color:var(--mk-text-2);text-decoration:none;background:rgba(255,255,255,.04);border:1px solid var(--mk-line-2);transition:color .2s,border-color .2s,background .2s}
.mk-card__review svg{width:15px;height:15px;color:var(--mk-pink)}
.mk-card__review:hover{color:#fff;border-color:rgba(251,113,133,.5);background:rgba(251,113,133,.08)}
.mk-card__note:empty{display:none}
.mk-card__hint{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12.5px;line-height:1.35;color:#fde68a}
.mk-card__hint svg{width:14px;height:14px;flex:none;color:var(--mk-amber)}
.mk-card :focus-visible{outline:2px solid #fecdd3;outline-offset:2px}
/* одна колонка (телефон): ровные ряды не нужны — без запаса высоты под описание */
@media (max-width:559px){
  .mk-grid .mk-card__desc{min-height:0}
  .mk-card__body{padding:13px 14px 14px}
  .mk-card__foot{padding-top:10px}
}
.mk-card__cta,.mk-card__review,.mk-card__link{-webkit-tap-highlight-color:transparent}

/* --- выпадающий список «Закат» (js/mk-select.js): /models — разработчик и сортировка, окно выбора — сортировка.
   Образец — меню «Вид» в «Моих работах». Без JS виден обычный <select> (его стили — в models-page.css / model-picker.css). --- */
.mk-select{position:relative;display:inline-flex;align-items:center;min-width:0}
.mk-select.is-enhanced > select,.mk-select.is-enhanced > svg{display:none}
.mk-select__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:42px;padding:0 12px 0 14px;border-radius:12px;
  cursor:pointer;white-space:nowrap;font:inherit;font-size:14px;font-weight:600;color:#cbd5e1;background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.13);
  transition:border-color .2s,background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.mk-select__btn:hover{color:#fff;border-color:rgba(251,113,133,.5)}
.mk-select__btn.is-set{color:#fff;border-color:rgba(251,113,133,.38)}
.mk-select.is-open .mk-select__btn{color:#fff;border-color:rgba(251,113,133,.6);background:rgba(251,113,133,.08)}
.mk-select__btn:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}
.mk-select__v{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-select__chev{width:15px;height:15px;flex:none;color:#7c8aa0;transition:transform .2s,color .2s}
.mk-select.is-open .mk-select__chev{transform:rotate(180deg);color:#f472b6}
.mk-select__menu{position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 24px));
  overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:14px;text-align:left;
  background:linear-gradient(160deg,rgba(17,22,38,.98),rgba(9,12,22,.98));border:1px solid rgba(148,163,184,.24);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.85);scrollbar-width:thin;scrollbar-color:rgba(244,114,182,.4) transparent;
  transform-origin:top;animation:mkSelIn .14s ease-out}
.mk-select__menu[hidden]{display:none}
.mk-select__menu.is-up{top:auto;bottom:calc(100% + 8px);transform-origin:bottom;animation-name:mkSelUp}
.mk-select__menu.is-right{left:auto;right:0}
.mk-select__menu::-webkit-scrollbar{width:6px}
.mk-select__menu::-webkit-scrollbar-thumb{background:rgba(244,114,182,.35);border-radius:6px}
@keyframes mkSelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes mkSelUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mk-select__item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:10px;cursor:pointer;text-align:left;
  font:inherit;font-size:14px;font-weight:600;line-height:1.3;color:#cbd5e1;background:none;-webkit-tap-highlight-color:transparent}
.mk-select__item:hover{color:#fff;background:rgba(255,255,255,.05)}
.mk-select__item:focus{outline:0}
.mk-select__item:focus-visible{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(254,205,211,.55)}
.mk-select__item[aria-checked="true"]{color:#fff;background:rgba(251,113,133,.1)}
.mk-select__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mk-select__t small{font-size:12px;font-weight:500;color:#7c8aa0}
.mk-select__n{flex:none;font-size:12.5px;font-weight:700;color:#7c8aa0;font-variant-numeric:tabular-nums}
.mk-select__check{width:16px;height:16px;flex:none;color:#fb7185;opacity:0}
.mk-select__item[aria-checked="true"] .mk-select__check{opacity:1}
@media (hover:none){
  .mk-select__item{min-height:44px}
  .mk-select__item:hover{background:none}
  .mk-select__item[aria-checked="true"]:hover{background:rgba(251,113,133,.1)}
}
@media (prefers-reduced-motion:reduce){
  .mk-select__menu{animation:none}
  .mk-select__chev{transition:none}
}