/* ===========================================================
   МУР-МУР — Дизайн-система
   Концепция: тёплый, премиальный, дискретный бутик-каталог.
   Название «Мур-Мур» (кошачье мурчание) → ощущение комфорта,
   мягкости и приватности вместо «красно-чёрного» жанра.
   =========================================================== */

:root{
  /* --- Палитра: тёмная тёплая основа --- */
  --bg:            #15100F;   /* глубокий эспрессо-плам */
  --bg-2:          #1B1413;   /* секции-чередование */
  --surface:       #211918;   /* карточки, панели */
  --surface-2:     #2B2120;   /* приподнятые поверхности, hover */
  --surface-3:     #362A28;   /* инпуты, чипы */
  --line:          rgba(255,238,230,.09);
  --line-strong:   rgba(255,238,230,.16);

  /* --- Текст --- */
  --text:          #F6ECE7;   /* основной */
  --text-soft:     #CDBDB6;   /* вторичный */
  --text-muted:    #9A8881;   /* подписи, мета */
  --text-faint:    #6F5F59;   /* приглушённый */

  /* --- Акценты --- */
  --rose:          #F2566E;   /* основной бренд-акцент (тёплая роза) */
  --rose-soft:     #FF8296;
  --rose-deep:     #C8334C;
  --gold:          #E2B36B;   /* цена / премиум */
  --gold-soft:     #F2CE97;
  --hot:           #FF5640;   /* «горячие» */
  --verified:      #5FC68C;   /* проверено */
  --online:        #57D0A0;

  /* --- Градиенты --- */
  --grad-rose:     linear-gradient(135deg, #FF7286 0%, #F2566E 45%, #C8334C 100%);
  --grad-warm:     linear-gradient(160deg, #2B2120 0%, #1B1413 100%);
  --grad-hero:     radial-gradient(120% 90% at 80% -10%, rgba(242,86,110,.22) 0%, rgba(21,16,15,0) 55%),
                   radial-gradient(90% 70% at 0% 0%, rgba(226,179,107,.12) 0%, rgba(21,16,15,0) 50%);

  /* --- Радиусы --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Тени --- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 10px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.50);
  --shadow-rose: 0 12px 34px rgba(200,51,76,.35);

  /* --- Типографика --- */
  --font-display: "Prata", Georgia, serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Спейсинг (4pt) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;

  --maxw: 1240px;
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  max-width:100%;
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  max-width:100%;
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--rose);color:#fff}

/* --- Типографические утилиты --- */
.display{ font-family:var(--font-display); font-weight:400; line-height:1.04; letter-spacing:-.01em; }
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose-soft);
}
.muted{color:var(--text-muted)}
.soft{color:var(--text-soft)}

/* ===========================================================
   КНОПКИ
   =========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:var(--r-pill);
  font-size:15px; font-weight:700; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{ background:var(--grad-rose); color:#fff; box-shadow:var(--shadow-rose); }
.btn-primary:hover{ box-shadow:0 16px 40px rgba(200,51,76,.45); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--text-faint); }
.btn-gold{ background:transparent; color:var(--gold); border-color:rgba(226,179,107,.4); }
.btn-gold:hover{ background:rgba(226,179,107,.10); }
.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btn-lg{height:56px;padding:0 30px;font-size:16px}
.btn-block{display:flex;width:100%}

/* ===========================================================
   БЕЙДЖИ / ТЕГИ
   =========================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--surface-3);color:var(--text-soft);
  border:1px solid var(--line);
}
.badge svg{width:13px;height:13px}
.badge-hot{ background:rgba(255,86,64,.16); color:#FF8C7A; border-color:rgba(255,86,64,.3); }
.badge-verified{ background:rgba(95,198,140,.14); color:var(--verified); border-color:rgba(95,198,140,.28); }
.badge-new{ background:rgba(226,179,107,.14); color:var(--gold-soft); border-color:rgba(226,179,107,.28); }
.badge-gold{ background:var(--grad-rose); color:#fff; border-color:transparent; }

.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--text-soft);
  background:var(--surface-3);border:1px solid var(--line);
  transition:.15s;
}
.tag:hover{background:var(--surface-2);color:var(--text);border-color:var(--line-strong)}
.tag.is-active{background:var(--grad-rose);color:#fff;border-color:transparent}

/* ===========================================================
   КАРТОЧКА АНКЕТЫ — ключевой компонент
   =========================================================== */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }

.card-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--surface-2);
}
/* Тактичный плейсхолдер фото: тёплое дуотон-свечение + мягкий силуэт.
   Реальные фото подставит бэкенд; здесь — нейтральная заглушка. */
.ph{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 28%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    radial-gradient(120% 90% at 50% 120%, var(--ph-b, #3a2330), var(--ph-a, #241a22) 70%);
}
.ph::after{ /* мягкий силуэт-намёк */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:62%; height:78%;
  background:radial-gradient(50% 60% at 50% 30%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%);
  border-radius:50% 50% 0 0;
}
.card-media .scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,7,7,.92) 0%, rgba(10,7,7,.45) 32%, rgba(10,7,7,0) 60%);
}
/* кадры фото: листаются при движении мыши по карточке */
.card-media .frames{position:absolute;inset:0}
.card-media .ph.frame{opacity:0;transition:opacity .12s ease}
.card-media .ph.frame.on{opacity:1}
.card-photodots i{transition:background .12s}
.card-top{
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.card-badges{display:flex;flex-wrap:wrap;gap:6px}
.fav{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(20,14,13,.55);backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);color:#fff;transition:.18s;
}
.fav:hover{background:rgba(242,86,110,.9);transform:scale(1.06)}
.fav svg{width:18px;height:18px}
.fav.is-on{background:var(--rose);border-color:transparent}

/* пунктиры количества фото — теперь в теле карточки, не перекрывают бейджи */
.card-photodots{display:flex;gap:4px;margin-bottom:10px}
.card-photodots i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
.card-photodots i.on{background:#fff}

.card-body{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px 16px;
}
.card-name{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-display);font-size:22px;line-height:1;color:#fff;
}
.card-name .age{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--text-soft)}
.card-meta{
  margin-top:9px;display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;
  font-size:12.5px;color:rgba(246,236,231,.85);font-weight:700;
}
.card-meta .mtype{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);font-size:11px;font-weight:700;letter-spacing:.01em;color:#fff;
}
.card-meta .mi{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.card-meta .mi svg{width:16px;height:16px;color:var(--rose-soft);opacity:.95;flex:none}
.card-name .age{white-space:nowrap}
.card-foot{
  margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.price{font-size:15px;font-weight:800;color:var(--gold-soft);letter-spacing:.01em;white-space:nowrap}
.price small{font-weight:600;color:var(--text-muted);font-size:11.5px}
.card-loc{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--text-soft);
  min-width:0;
}
.card-loc svg{width:13px;height:13px;color:var(--rose-soft)}
@media(max-width:480px){
  .card-media{aspect-ratio:2/3}
  .card-body{padding:12px 12px 14px}
  .card-name{font-size:20px;line-height:1.05;display:block}
  .card-name .age{display:block;margin-top:3px}
  .card-meta{gap:6px 10px}
  .card-foot{flex-direction:column;align-items:flex-start;gap:4px;margin-top:9px}
  .card-loc{max-width:100%;white-space:normal;line-height:1.25}
}

.online-dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 3px rgba(87,208,160,.22)}

/* ===========================================================
   ПАНЕЛИ / СЕКЦИИ
   =========================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:56px 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:24px;
}
.section-head h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:30px;line-height:1.1;letter-spacing:-.01em;
}
.link-all{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--rose-soft);white-space:nowrap;
}
.link-all svg{width:15px;height:15px;transition:transform .18s}
.link-all:hover svg{transform:translateX(3px)}
@media(max-width:520px){
  .section-head{align-items:flex-start;gap:8px 12px;flex-wrap:wrap;margin-bottom:18px}
  .section-head h2{font-size:26px;max-width:100%}
  .link-all{font-size:13.5px;max-width:100%;white-space:normal;line-height:1.25}
  .link-all svg{flex:none}
}

/* инпут / поиск */
.field{
  display:flex;align-items:center;gap:10px;
  height:50px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--text-soft);transition:.18s;
}
.field:focus-within{border-color:var(--rose);background:var(--surface-2)}
.field svg{width:18px;height:18px;color:var(--text-muted);flex:none}
.field input{
  border:0;background:transparent;color:var(--text);font-family:inherit;
  font-size:15px;width:100%;outline:none;
}
.field input::placeholder{color:var(--text-muted)}

/* --- Формы: канонические контролы --- */
.input,.textarea,.select{
  width:100%;height:48px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:15px;outline:none;transition:.16s;
}
.textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:var(--rose)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239A8881' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.form-label{display:block;font-size:13px;font-weight:700;color:var(--text-soft);margin:0 0 7px}
.form-label .req{color:var(--rose-soft)}
.check{display:inline-flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-soft);cursor:pointer}
.check input{margin-top:2px;accent-color:var(--rose);width:17px;height:17px}

/* свотчи в дизайн-системе */
.swatch{border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden}
.swatch .chip{height:84px}
.swatch .lab{padding:10px 12px;font-size:12.5px;background:var(--surface)}
.swatch .lab b{display:block;font-size:13px;color:var(--text)}
.swatch .lab span{color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ===========================================================
   18+ ГЕЙТ
   =========================================================== */
.gate{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(90% 70% at 70% -10%, rgba(242,86,110,.20), transparent 55%),
    rgba(12,8,7,.86);
  backdrop-filter:blur(10px);
}
.age-confirmed .gate{display:none}
.gate.hidden{display:none}
.gate-card{
  max-width:min(440px, calc(100vw - 48px));width:100%;text-align:center;
  background:linear-gradient(165deg,#241A1E,#16100F);
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  padding:38px 32px 28px;box-shadow:var(--shadow-lg);
}
.gate-mark{display:inline-grid;place-items:center;width:74px;height:74px;border-radius:20px;background:rgba(242,86,110,.10);margin-bottom:16px}
.gate-age{display:inline-block;font-family:var(--font-display);font-size:15px;color:var(--rose-soft);letter-spacing:.14em;font-weight:400;margin-bottom:8px}
.gate-card h2{font-size:30px;margin:0 0 12px}
.gate-card > p{color:var(--text-soft);font-size:15px;line-height:1.6;margin:0 0 24px;text-wrap:pretty}
.gate-actions{display:flex;flex-direction:column;gap:10px}
.gate-fine{color:var(--text-faint);font-size:12px;margin:18px 0 0;line-height:1.5}
@media(max-width:360px){
  .gate{padding:16px}
  .gate-card{max-width:min(440px, calc(100vw - 32px));padding:28px 20px 22px;border-radius:var(--r-lg)}
  .gate-mark{width:60px;height:60px;border-radius:16px;margin-bottom:12px}
  .gate-card h2{font-size:26px}
  .gate-card > p{font-size:14px;line-height:1.55;margin-bottom:18px}
  .gate-actions .btn{height:auto;min-height:52px;padding:12px 16px;white-space:normal;line-height:1.25;text-align:center}
  .gate-fine{font-size:11.5px}
}

/* ===========================================================
   НОВЫЕ АНКЕТЫ (СВЕЖАЧОК) — лента по датам
   =========================================================== */
.fresh-day{margin-bottom:26px}
.fresh-daylabel{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text-soft);text-transform:uppercase;
}
.fresh-daylabel .ln{flex:1;height:1px;background:var(--line)}
.fresh-daylabel .cnt{color:var(--text-muted);font-weight:700;letter-spacing:0}
.fresh-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1100px){.fresh-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.fresh-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.fresh-row::-webkit-scrollbar{display:none}}
.fresh{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:transform .18s,box-shadow .2s}
.fresh:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
@media(max-width:720px){.fresh{width:140px;flex:none;scroll-snap-align:start}}
.fresh .media{position:relative;aspect-ratio:3/4}
.fresh .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,7,.9),transparent 55%)}
.fresh .newtag{position:absolute;top:8px;left:8px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--grad-rose);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;letter-spacing:.02em}
.fresh .status{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;background:rgba(12,8,7,.6);backdrop-filter:blur(6px);border:1px solid var(--line)}
.fresh .status.on{color:var(--online)}.fresh .status.on .pip{background:var(--online)}
.fresh .status.off{color:var(--text-muted)}.fresh .status.off .pip{background:var(--text-faint)}
.fresh .status .pip{width:6px;height:6px;border-radius:50%}
.fresh .info{position:absolute;left:0;right:0;bottom:0;padding:9px 10px}
.fresh .nm{display:flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-size:16px;color:#fff;line-height:1}
.fresh .nm .a{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--text-soft)}
.fresh .pr{margin-top:5px;font-size:12px;font-weight:800;color:var(--gold-soft)}

/* скрытие скроллбара у каруселей */
.scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{scroll-snap-align:start}
.scroller .fresh{width:172px;flex:none}

/* ===========================================================
   СЛАЙДЕР с кнопками управления
   =========================================================== */
.slider-wrap{position:relative}
.slider-arrow{
  position:absolute;top:calc(50% - 28px);transform:translateY(-50%);z-index:6;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(33,25,24,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);color:var(--text);
  box-shadow:var(--shadow-md);transition:opacity .18s, background .18s, transform .1s;
}
.slider-arrow:hover{background:var(--grad-rose);color:#fff;border-color:transparent}
.slider-arrow:active{transform:translateY(-50%) scale(.94)}
.slider-arrow svg{width:22px;height:22px}
.slider-arrow.prev{left:-18px}
.slider-arrow.next{right:-18px}
.slider-arrow.is-hidden{opacity:0;pointer-events:none}
@media(max-width:720px){.slider-arrow{display:none}}