/* MATCH.LIFE · экран 07 «Личное пространство» · MLSpace07 1.0.0
 * Правила: каждый селектор начинается с .mls07; классы mls07-*; @keyframes mls07-*; переменные --mls07-*.
 * Без @import, @font-face, url(), position:sticky, 100vh, :has(), backdrop-filter. !important только в reduced-motion.
 * Блоки BASE, H1 и TOAST относятся к фиксированной разметке — оставь их как есть. */

/* ---------- BASE ---------- */
.mls07{
  --mls07-bg:#0B0B12;--mls07-surface:#181828;--mls07-card:rgba(24,24,40,.7);--mls07-line:#2A2A3A;
  --mls07-text:#FFFFFF;--mls07-muted:#A7A7B8;--mls07-ok:#22C55E;--mls07-err:#FF6666;
  --mls07-grad:linear-gradient(90deg,#FF4EC9,#8A5CFF 55%,#00D1FF);
  position:relative;display:block;margin:0;padding:0 8px;color:#FFFFFF;text-align:left;
  font-family:"Inter Display",Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.35;letter-spacing:0;
}
.mls07 *,.mls07 *::before,.mls07 *::after{box-sizing:border-box}
.mls07 button{font-family:inherit;letter-spacing:0;text-transform:none}
.mls07 svg{display:block;flex:0 0 auto}

/* ---------- H1 (разметку создаёт фиксированная часть; :not(#mls07-none) перебивает host-правило #profile h1{padding-right:62px}) ---------- */
.mls07 .mls07-h1:not(#mls07-none){
  margin:4px 0 20px;padding:0;border:0;background:none;text-align:left;
  font-family:inherit;font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#FFFFFF;
}
.mls07 .mls07-body{display:block;margin:0;padding:0}

/* ---------- TOAST (разметку создаёт фиксированная часть) ---------- */
.mls07 .mls07-toast{
  position:fixed;left:16px;right:16px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:990;
  max-width:420px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1.35;color:#FFFFFF;text-align:left;
  background:#181828;border:1px solid rgba(34,197,94,.4);box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.mls07 .mls07-toast svg{width:16px;height:16px}
.mls07 .mls07-toast.is-show{opacity:1;transform:none}

/* ---------- Карточка «Я» ---------- */
.mls07 .mls07-me{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;
  padding:20px 16px;border-radius:16px;border:1px solid #2A2A3A;background:rgba(24,24,40,.7);transition:border-color .2s ease;
}
.mls07 .mls07-me.is-error{border-color:rgba(255,102,102,.4)}
.mls07 .mls07-avwrap{position:relative;width:96px;height:96px;flex:0 0 auto}
.mls07 .mls07-av{
  display:block;width:96px;height:96px;margin:0;padding:3px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#FF4EC9,#8A5CFF 50%,#00D1FF);box-shadow:0 0 22px rgba(138,92,255,.25);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease;
}
.mls07 .mls07-av:disabled{cursor:default;opacity:1;color:inherit}
.mls07 .mls07-av-in{
  position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #13131F;
  background:linear-gradient(135deg,rgba(255,78,201,.55),rgba(138,92,255,.55) 50%,rgba(0,209,255,.5));
}
.mls07 .mls07-photo{display:block;width:100%;height:100%;object-fit:cover;margin:0;border:0}
.mls07 .mls07-ini{display:grid;place-items:center;width:100%;height:100%;font-size:36px;font-weight:700;line-height:1;color:#FFFFFF;text-shadow:0 2px 10px rgba(11,11,18,.25)}
.mls07 .mls07-av.is-uploading .mls07-photo{filter:brightness(.5)}
.mls07 .mls07-spin{
  position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;
  border:3px solid rgba(255,255,255,.28);border-top-color:#FFFFFF;animation:mls07-spin .8s linear infinite;
}
.mls07 .mls07-cam{
  position:absolute;right:-8px;bottom:-8px;width:44px;height:44px;margin:0;padding:6px;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease;
}
.mls07 .mls07-cam-in{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#FFFFFF;border:2px solid #13131F;
  background:linear-gradient(135deg,#FF4EC9,#8A5CFF 55%,#00D1FF);
}
.mls07 .mls07-cam-in svg{width:16px;height:16px}
.mls07 .mls07-name{
  display:block;max-width:300px;width:100%;margin:12px 0 0;padding:0;font-size:24px;line-height:30px;font-weight:700;color:#FFFFFF;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mls07 .mls07-bio{
  max-width:300px;margin:6px 0 0;padding:0;font-size:14px;line-height:20px;font-weight:400;color:#A7A7B8;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;
}
.mls07 .mls07-link{
  display:inline-block;margin:-4px 0 -10px;padding:12px 4px;border:0;background:none;cursor:pointer;
  font-size:14px;line-height:20px;font-weight:500;color:#C9A4FF;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mls07 .mls07-link,.mls07 .mls07-link-name{
  background-image:linear-gradient(90deg,#FF4EC9,#8A5CFF 55%,#00D1FF);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mls07 .mls07-link:active{opacity:.75}
.mls07 .mls07-link.mls07-link-name{margin:5px 0 -7px;padding:7px 0;font-size:24px;line-height:30px;font-weight:700}
.mls07 .mls07-note{max-width:300px;margin:6px 0 0;padding:0;font-size:13px;line-height:18px;font-weight:500;color:#A7A7B8}
.mls07 .mls07-guest{max-width:300px;margin:6px 0 0;padding:0;font-size:14px;line-height:20px;color:#A7A7B8}
.mls07 .mls07-perr{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;max-width:310px;margin:6px 0 0;
  font-size:13px;line-height:18px;font-weight:500;color:rgba(255,255,255,.85);
}
.mls07 .mls07-perr-t{display:inline-flex;align-items:center;gap:6px;text-align:left}
.mls07 .mls07-perr-t svg{width:14px;height:14px}
.mls07 .mls07-perr-act{
  position:relative;z-index:1;margin:-7px -6px;padding:7px 8px;border:0;background:none;cursor:pointer;
  font-size:13px;line-height:18px;font-weight:700;color:#FF6666;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mls07 .mls07-perr-act:active{opacity:.75}
.mls07 .mls07-add{
  display:block;height:44px;margin:8px 0 -4px;padding:4px 0;border:0;background:none;cursor:pointer;color:#FFFFFF;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease;
}
.mls07 .mls07-add-in{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;
  font-size:14px;line-height:20px;font-weight:500;color:#FFFFFF;border:1px solid transparent;
  background:linear-gradient(#181828,#181828) padding-box,linear-gradient(90deg,rgba(255,78,201,.55),rgba(138,92,255,.45) 55%,rgba(0,209,255,.5)) border-box;
}
.mls07 .mls07-add-in svg{width:16px;height:16px}

/* ---------- Карточка анкеты ---------- */
.mls07 .mls07-quest{
  margin:16px 0 0;padding:16px;border-radius:16px;border:1px solid transparent;
  background:linear-gradient(rgba(21,20,34,.96),rgba(21,20,34,.96)) padding-box,
    linear-gradient(120deg,rgba(255,78,201,.38),rgba(138,92,255,.32) 55%,rgba(0,209,255,.3)) border-box;
}
.mls07 .mls07-quest-head{display:flex;align-items:center;gap:10px}
.mls07 .mls07-quest-head svg{width:24px;height:24px}
.mls07 .mls07-quest-title{margin:0;padding:0;font-size:18px;line-height:24px;font-weight:700;color:#FFFFFF;letter-spacing:0}
.mls07 .mls07-quest-text{margin:8px 0 16px;padding:0;font-size:14px;line-height:20px;color:#A7A7B8}
.mls07 .mls07-quest-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px;font-size:14px;line-height:20px}
.mls07 .mls07-quest-meta span{font-weight:500;color:#A7A7B8}
.mls07 .mls07-quest-meta b{font-weight:700;color:#FFFFFF;white-space:nowrap}
.mls07 .mls07-bar{height:6px;border-radius:999px;background:#2A2A3A;overflow:hidden}
.mls07 .mls07-bar > i{display:block;height:100%;width:var(--mls07-p,0%);border-radius:inherit;background:linear-gradient(90deg,#FF4EC9,#8A5CFF 55%,#00D1FF)}
.mls07 .mls07-quest-hint{margin:10px 0 16px;padding:0;font-size:13px;line-height:18px;color:#A7A7B8}
.mls07 .mls07-cta{
  display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin:0;padding:0 16px;border:0;border-radius:20px;cursor:pointer;
  font-size:16px;line-height:20px;font-weight:600;color:#FFFFFF;white-space:nowrap;
  background:linear-gradient(90deg,#FF4EC9,#8A5CFF,#00D1FF);box-shadow:0 10px 28px rgba(138,92,255,.28);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease,opacity .18s ease;
}
.mls07 .mls07-cta:active{transform:scale(.98)}

/* ---------- Плитки ---------- */
.mls07 .mls07-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0}
.mls07 .mls07-me + .mls07-grid{margin-top:16px}
.mls07 .mls07-tile{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:112px;margin:0;padding:14px 14px 10px;
  border-radius:16px;border:1px solid #2A2A3A;background:rgba(24,24,40,.7);color:#FFFFFF;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease,border-color .1s ease;
}
.mls07 .mls07-ico{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:rgba(11,11,18,.6);border:1px solid #2A2A3A}
.mls07 .mls07-ico svg{width:24px;height:24px}
.mls07 .mls07-tile.is-later .mls07-ico svg{opacity:.5}
.mls07 .mls07-tile-t{display:block;max-width:100%;margin:10px 0 0;font-size:16px;line-height:18px;font-weight:700;color:#FFFFFF;white-space:nowrap}
.mls07 .mls07-tile-s{display:block;max-width:100%;margin:2px 0 0;padding-right:14px;font-size:13px;line-height:16px;font-weight:400;color:#A7A7B8}
.mls07 .mls07-tile-s svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-left:4px}
.mls07 .mls07-chev{position:absolute;right:12px;bottom:12px;color:#A7A7B8;line-height:0}
.mls07 .mls07-chev svg{width:14px;height:14px}

/* ---------- Premium (не кнопка) и строки ---------- */
.mls07 .mls07-prem{
  display:flex;align-items:center;gap:12px;height:56px;margin:16px 0 0;padding:0 16px;border-radius:16px;border:1px solid #2A2A3A;background:transparent;
  cursor:default;user-select:none;-webkit-user-select:none;
}
.mls07 .mls07-prem > svg{width:20px;height:20px;color:#A7A7B8}
.mls07 .mls07-prem-t{flex:1;min-width:0;font-size:16px;line-height:20px;font-weight:500;color:rgba(255,255,255,.7)}
.mls07 .mls07-soon{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid #2A2A3A;font-size:12px;line-height:16px;font-weight:500;color:#A7A7B8}
.mls07 .mls07-rows{display:flex;flex-direction:column;gap:8px;margin:16px 0 0}
.mls07 .mls07-row{
  display:flex;align-items:center;gap:12px;width:100%;height:56px;margin:0;padding:0 16px;border-radius:16px;border:1px solid #2A2A3A;
  background:rgba(24,24,40,.7);color:#FFFFFF;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease,border-color .1s ease;
}
.mls07 .mls07-row > svg:first-child{width:20px;height:20px;color:rgba(255,255,255,.8)}
.mls07 .mls07-row-t{flex:1;min-width:0;font-size:16px;line-height:20px;font-weight:500}
.mls07 .mls07-row .mls07-chev{position:static}

/* ---------- Нажатие и фокус ---------- */
.mls07 .mls07-tile:active,.mls07 .mls07-tile.is-pressed,.mls07 .mls07-row:active,.mls07 .mls07-row.is-pressed{transform:scale(.98);border-color:rgba(138,92,255,.75)}
.mls07 .mls07-av:not(:disabled):active,.mls07 .mls07-cam:active,.mls07 .mls07-add:active{transform:scale(.98)}
.mls07 button:focus-visible{outline:2px solid #8A5CFF;outline-offset:2px}

/* ---------- Скелетон и ошибка профиля ---------- */
.mls07 .mls07-sk{
  display:block;border-radius:8px;
  background:linear-gradient(100deg,rgba(255,255,255,.05) 20%,rgba(255,255,255,.11) 40%,rgba(255,255,255,.05) 60%) 0 0/300% 100%;
  animation:mls07-shimmer 1.2s ease-in-out 1 both;
}
.mls07 .mls07-sk-me{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;border-radius:16px;border:1px solid #2A2A3A;background:rgba(24,24,40,.55)}
.mls07 .mls07-sk-av{width:96px;height:96px;border-radius:50%}
.mls07 .mls07-sk-name{width:160px;height:20px;margin-top:4px}
.mls07 .mls07-sk-t1{width:240px;height:12px}
.mls07 .mls07-sk-t2{width:200px;height:12px}
.mls07 .mls07-sk-card{height:150px;margin:16px 0 0;padding:16px;border-radius:16px;border:1px solid #2A2A3A;background:rgba(24,24,40,.55)}
.mls07 .mls07-sk-qi{width:24px;height:24px;border-radius:6px}
.mls07 .mls07-sk-qt{width:60%;height:14px;margin-top:14px}
.mls07 .mls07-sk-qb{width:100%;height:44px;margin-top:22px;border-radius:14px}
.mls07 .mls07-sk-tile{height:112px;padding:14px;border-radius:16px;border:1px solid #2A2A3A;background:rgba(24,24,40,.55)}
.mls07 .mls07-sk-ico{width:40px;height:40px;border-radius:12px}
.mls07 .mls07-sk-l1{width:78%;height:14px;margin-top:14px}
.mls07 .mls07-sk-l2{width:56%;height:12px;margin-top:8px}
.mls07 .mls07-status{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:13px;line-height:18px;font-weight:500;color:#A7A7B8}
.mls07 .mls07-spinner{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(138,92,255,.35);border-top-color:#FF4EC9;animation:mls07-spin .8s linear infinite;
}
.mls07 .mls07-err{
  margin:0;padding:24px 20px 20px;border-radius:16px;text-align:center;
  border:1px solid rgba(255,102,102,.4);background:linear-gradient(160deg,rgba(255,102,102,.06),rgba(24,24,40,.8) 55%);
}
.mls07 .mls07-err-ico{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  color:#FF6666;border:1.5px solid rgba(255,102,102,.75);background:rgba(255,102,102,.08);
}
.mls07 .mls07-err-ico svg{width:28px;height:28px}
.mls07 .mls07-err-title{margin:0 0 8px;padding:0;font-size:18px;line-height:1.3;font-weight:700;color:#FFFFFF;letter-spacing:0}
.mls07 .mls07-err-text{margin:0 auto 20px;padding:0;max-width:36ch;font-size:14px;line-height:1.45;color:#A7A7B8}

/* ---------- Появление (только при data.animate=true: фикс. часть ставит на root класс mls07-animate) ---------- */
.mls07.mls07-animate .mls07-me,.mls07.mls07-animate .mls07-quest,.mls07.mls07-animate .mls07-tile,
.mls07.mls07-animate .mls07-prem,.mls07.mls07-animate .mls07-rows{
  animation:mls07-in .2s ease-out both;animation-delay:calc(var(--mls07-i,0) * 30ms);
}
.mls07.mls07-animate .mls07-bar > i{animation:mls07-bar .4s ease-out both}
@keyframes mls07-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mls07-fade{from{opacity:0}to{opacity:1}}
@keyframes mls07-bar{from{width:0}to{width:var(--mls07-p,0%)}}
@keyframes mls07-spin{to{transform:rotate(360deg)}}
@keyframes mls07-shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- Узкий экран ---------- */
@media (max-width:360px){
  .mls07 .mls07-h1:not(#mls07-none){font-size:28px}
  .mls07 .mls07-grid{gap:10px}
  .mls07 .mls07-tile{padding:12px 12px 10px}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .mls07 .mls07-toast{transition:opacity .15s ease!important;transform:none!important}
  .mls07 .mls07-sk,.mls07 .mls07-spin,.mls07 .mls07-spinner,.mls07.mls07-animate .mls07-bar > i{animation:none!important}
  .mls07.mls07-animate .mls07-me,.mls07.mls07-animate .mls07-quest,.mls07.mls07-animate .mls07-tile,
  .mls07.mls07-animate .mls07-prem,.mls07.mls07-animate .mls07-rows{animation:mls07-fade .15s ease both!important;animation-delay:0s!important}
  .mls07 .mls07-tile,.mls07 .mls07-row,.mls07 .mls07-av,.mls07 .mls07-cam,.mls07 .mls07-add,.mls07 .mls07-cta{transition:none!important}
  .mls07 .mls07-tile:active,.mls07 .mls07-row:active,.mls07 .mls07-tile.is-pressed,.mls07 .mls07-row.is-pressed{transform:none!important}
}