/* LAZAL — две темы: тёмная (по умолчанию) и светлая. Все цвета — через переменные. */
:root{
  /* тёмная тема */
  --bg:#0a0c11; --bg-2:#0e1117; --panel:#12161e; --card:#171c26; --card-2:#1d2330;
  --line:#232a38; --line-2:#2c3446; --text:#f4f6fb; --muted:#8a93a8; --muted-2:#5f6879;
  --blue:#2aabee; --blue-d:#1b8ecb; --violet:#7c5cff; --green:#31c48d; --danger:#f2555a;
  --r:16px; --r-sm:10px; --shadow:0 18px 50px rgba(0,0,0,.45);
  --ff:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* элементы интерфейса */
  --topbar:#000; --topbar-line:#14181f; --brand:#fff;
  --surface:#14181f; --surface-2:#1e2430;
  --seg-bg:#0f131a; --seg-on-bg:#fff; --seg-on-text:#0b0e13;
  --field:#0d1119; --feed-bg:#101420; --media-bg:#0d1017;
  --divider:#1a1f2a; --divider-2:#171c26;
  --hover-line:#39435a; --hover-line-2:#3a4457; --focus-line:#33405a;
  --strong:#e6eaf2; --strong-2:#dfe4ee; --strong-3:#cbd3e2;
  --chip:#20263455; --chip-gray:#2a3140;
  --tip-bg:#101828; --tip-line:#1f2b3f; --tip-text:#9fb3cd;
  --toast-bg:#1b2230; --toast-text:#fff;
  --modal-back:rgba(3,5,9,.72);
  --scroll:#222a38; --thread-on:#1b2233;
  --danger-text:#ff9b9e; --like:#ff7c86; --ok-text:#8be0bf;
  --thumb-1:#22304a; --thumb-2:#3c5b86; --thumb-3:#8fa9c9; --cloud:#e7eefa;
  /* «море и пальмы» — заставка профиля без фотографии */
  --sun:#f2c76a; --sand:#dcc08a; --sand-2:#b9945c; --palm:#3f9d6b; --palm-2:#2d7a52;
  --cover-1:#1b2a44; --cover-2:#2b4a78; --cover-3:#5f86bd; --cover-4:#c9b6a0;
  --skyline:rgba(9,13,20,.62);
}
html[data-theme="light"]{
  /* светлая тема */
  --bg:#eef1f6; --bg-2:#e7ebf2; --panel:#ffffff; --card:#ffffff; --card-2:#f2f5fa;
  --line:#dee4ee; --line-2:#cfd7e4; --text:#0e1117; --muted:#5b6575; --muted-2:#8791a3;
  --blue:#1e93d6; --blue-d:#1579b4; --violet:#6a4ae6; --green:#1fa87a; --danger:#d94449;
  --shadow:0 18px 44px rgba(23,38,64,.16);

  --topbar:#ffffff; --topbar-line:#e3e8f0; --brand:#0e1117;
  --surface:#f4f6fa; --surface-2:#e2e8f1;
  --seg-bg:#e9edf4; --seg-on-bg:#0e1117; --seg-on-text:#ffffff;
  --field:#f8fafc; --feed-bg:#f5f7fb; --media-bg:#e9edf4;
  --divider:#e8ecf3; --divider-2:#eef1f6;
  --hover-line:#b9c3d3; --hover-line-2:#c2cbdb; --focus-line:#8fb4e0;
  --strong:#1a1f28; --strong-2:#2b3240; --strong-3:#39414f;
  --chip:#eaeff7; --chip-gray:#5a6474;
  --tip-bg:#eef4ff; --tip-line:#d3e2f7; --tip-text:#2f4a6b;
  --toast-bg:#0e1117; --toast-text:#fff;
  --modal-back:rgba(20,28,42,.45);
  --scroll:#c9d1de; --thread-on:#e9f1fc;
  --danger-text:#c33a3f; --like:#e0535d; --ok-text:#1a8f68;
  --thumb-1:#c9d8ee; --thumb-2:#9dbde0; --thumb-3:#e2ecf7; --cloud:#ffffff;
  /* «море и пальмы» — заставка профиля без фотографии */
  --sun:#f7d27a; --sand:#e6d3a4; --sand-2:#bd9a63; --palm:#2f8f5e; --palm-2:#1f6b45;
  --cover-1:#c8d8ef; --cover-2:#9dbfe4; --cover-3:#dbe6f3; --cover-4:#f2e3d2;
  --skyline:rgba(120,140,170,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ff);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:background-color .18s ease,color .18s ease}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}

/* ───── топбар ───── */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:54px;padding:0 20px;background:var(--topbar);border-bottom:1px solid var(--topbar-line)}
.brand{display:flex;align-items:center;gap:8px;color:var(--brand)}
.brand-mark{width:20px;height:20px;color:var(--blue)}
.brand-name{font-weight:800;letter-spacing:.20em;font-size:15px}
.topbar-right{display:flex;align-items:center;gap:12px}
.search-mini{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;padding:0 10px;height:34px;width:280px}
.search-mini svg{width:16px;height:16px;color:var(--muted);flex:none}
.search-mini input{background:none;border:0;outline:0;color:var(--text);font-size:13px;width:100%}
.search-mini:focus-within{border-color:var(--hover-line-2)}
.btn-tg{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:8px;
  padding:0 14px;height:34px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-tg:hover{background:var(--blue-d)}
.btn-tg svg{width:16px;height:16px}
.avatar-btn{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--surface-2);border-radius:20px;padding:4px 12px 3px 3px;cursor:pointer;color:var(--text)}
.avatar-btn img,.avatar-btn .ph{width:26px;height:26px;border-radius:50%;object-fit:cover}
.menu{position:absolute;top:50px;right:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;min-width:210px;z-index:80}
.menu a,.menu button{display:flex;width:100%;align-items:center;gap:8px;background:none;border:0;color:var(--text);
  padding:8px 12px;border-radius:8px;font-size:14px;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--card-2)}
.menu .sep{height:1px;background:var(--line);margin:6px 4px}

/* кнопка смены темы: ночь / день */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;color:var(--muted);cursor:pointer;flex:none}
.theme-btn:hover{color:var(--text);border-color:var(--hover-line-2)}
.theme-btn svg{width:16px;height:16px}

/* ───── каркас ───── */
.view{max-width:1180px;margin:0 auto;padding:0 20px 60px}
.foot{max-width:1180px;margin:0 auto;padding:20px 20px 34px;color:var(--muted-2);font-size:13px;display:flex;justify-content:space-between;gap:12px}

/* ───── баннер профиля ───── */
.cover{position:relative;height:230px;border-radius:0 0 20px 20px;overflow:hidden;margin:0 -20px;
  background:linear-gradient(180deg,var(--cover-1) 0%,var(--cover-2) 40%,var(--cover-3) 70%,var(--cover-4) 100%)}
.cover::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 22% 88%,rgba(255,255,255,.30),transparent 60%),
  radial-gradient(45% 55% at 48% 70%,rgba(160,190,230,.30),transparent 65%),
  radial-gradient(80% 60% at 78% 92%,rgba(255,255,255,.22),transparent 60%),
  linear-gradient(180deg,transparent 45%,rgba(190,205,225,.35))}
.cover.has-img{background-size:cover;background-position:center}
.cover.has-img::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(10,12,17,.55))}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:132px;color:var(--skyline)}
.head-wrap{--cover-h:230px;--ava:104px;--push:46px;padding:0 6px;margin-top:calc(-1*var(--push));position:relative;z-index:5}

.avatar{position:absolute;left:6px;top:calc(var(--push,46px) - var(--cover-h,230px)/2 - var(--ava,104px)/2);width:var(--ava,104px);height:var(--ava,104px);border-radius:24px;border:4px solid var(--bg);
  background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:700;color:#fff}
.avatar.old{border-radius:50%}
.head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-top:58px}
.head h1{margin:0 0 2px;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.01em}
.uname{color:var(--muted);font-size:17px;margin:0 0 12px}
.stats{display:flex;gap:26px;align-items:baseline;flex-wrap:wrap}
.stats .s{display:flex;flex-direction:column;min-width:74px}
.stats .v{font-size:18px;font-weight:700;display:flex;align-items:center;gap:6px}
.stats .k{color:var(--muted);font-size:13px}
.head-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:190px}
.chip-id{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border-radius:10px;
  padding:8px 14px;font-size:13px;font-weight:600}
.chip-id.violet{background:var(--violet)}
.chip-id.gray{background:var(--chip-gray)}
.chip-id svg{width:14px;height:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:8px 14px;font-size:13px;
  font-weight:600;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text);transition:.15s}
.btn.outline{border:1px solid rgba(42,171,238,.75);color:var(--text)}
.btn.outline:hover{background:rgba(42,171,238,.12)}
.btn.solid{background:var(--blue);border:0;color:#fff}
.btn.solid:hover{background:var(--blue-d)}
.btn.ghost{border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--hover-line-2)}
.btn.danger{color:var(--danger-text);border:1px solid rgba(242,85,90,.4)}
.btn.danger:hover{background:rgba(242,85,90,.12)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ───── секции профиля ───── */
.pane{margin-top:26px}
.lbl{color:var(--muted);font-size:13px;margin-bottom:8px}
.bio{white-space:pre-wrap;max-width:760px;font-size:15px;color:var(--strong)}
.loc{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--strong-2);flex-wrap:wrap}
.loc svg{width:16px;height:16px;color:var(--muted);flex:none}
.links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.links a,.links span{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:var(--muted);background:var(--card);transition:.15s}
.links a:hover{color:var(--text);border-color:var(--hover-line);background:var(--card-2)}
.links svg{width:16px;height:16px}
.info-toggle{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:0;display:flex;gap:8px;align-items:center}
.info-toggle:hover{color:var(--text)}
.info-list{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.info-row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;gap:12px;align-items:center}
.info-row svg{width:16px;height:16px;color:var(--muted);flex:none}
.info-row .k{color:var(--muted);font-size:13px;min-width:58px}
.info-row a{font-size:14px;word-break:break-all}
.empty{color:var(--muted-2);font-size:13px}

/* ───── сегментные вкладки ───── */
.segment{display:flex;background:var(--seg-bg);border:1px solid var(--line);border-radius:999px;padding:6px;margin:26px 0 0;position:relative}
.segment button{flex:1;background:none;border:0;color:var(--muted);font-size:15px;font-weight:600;padding:8px 10px;border-radius:999px;cursor:pointer;transition:.18s}
.segment button.active{background:var(--seg-on-bg);color:var(--seg-on-text)}
.subtabs{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:24px 0 18px;border-bottom:1px solid var(--divider);padding-bottom:0}
.subtab{background:none;border:0;color:var(--muted);font-size:15px;font-weight:600;padding:0 0 11px;cursor:pointer;position:relative;display:flex;align-items:center;gap:8px}
.subtab.active{color:var(--text)}
.subtab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text);border-radius:8px}
.count{background:var(--chip);border:1px solid var(--line);color:var(--muted);border-radius:8px;font-size:12px;padding:1px 7px;font-weight:600}
.tab-tools{display:flex;gap:8px;align-items:center;margin-left:auto}

/* ───── карточки ───── */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card .thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--thumb-1),var(--thumb-2) 55%,var(--thumb-3));overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:16px 15px 16px;flex:1;display:flex;flex-direction:column}
.price-block{margin-top:auto;padding-top:12px}
.card h3{margin:0 0 9px;font-size:16px;font-weight:700}
.seller{display:flex;align-items:center;gap:8px;color:var(--strong-3);font-size:13px;margin-bottom:12px}
.seller img,.seller .ph{width:20px;height:20px;border-radius:50%;object-fit:cover}
.price-lbl{color:var(--muted-2);font-size:12px;margin-bottom:2px}
.price{font-size:15px;font-weight:600}
.card .desc{color:var(--muted);font-size:13px;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .loc-mini{display:flex;gap:6px;align-items:center;color:var(--muted-2);font-size:13px;margin-top:8px}
.card .loc-mini svg{width:14px;height:14px}
.card-admin{display:flex;gap:8px;padding:0 15px 14px;margin-top:auto}

/* ───── канал ───── */
.feed{display:flex;flex-direction:column;gap:16px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.post .media{aspect-ratio:16/9;background:var(--media-bg);position:relative}
.post .media iframe,.post .media img{width:100%;height:100%;border:0;display:block}
.post .txt{padding:8px 12px 7px;font-size:15px;line-height:1.45;white-space:pre-wrap}
.post .meta{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--divider);color:var(--muted);font-size:12px;flex-wrap:wrap}
.post .meta img,.post .meta .ph{width:26px;height:26px;border-radius:50%;object-fit:cover}
.post .meta .who b{color:var(--strong);font-weight:600}
.post .meta .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.badge{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:12px;color:var(--muted)}
.badge.ev{border-color:rgba(49,196,141,.45);color:var(--ok-text)}
.tag-video{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:4px 9px;font-size:12px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:13px}
.icon-btn:hover{color:var(--text);border-color:var(--hover-line)}
.icon-btn.on{color:var(--like);border-color:rgba(255,124,134,.45)}
.comments{border-top:1px solid var(--divider);padding:8px 12px 8px;background:var(--feed-bg)}
.comment{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--divider-2)}
.comment:last-child{border-bottom:0}
.comment img,.comment .ph{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.comment .c-meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.comment .c-meta b{color:var(--strong);font-weight:600}
.comment .c-text{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.comment-form{display:flex;gap:8px;margin-top:8px;align-items:flex-start}
.comment-form textarea{flex:1;min-height:38px;max-height:120px;resize:vertical;background:var(--field);border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:12px 12px;font-size:14px;font-family:inherit;outline:0}
.comment-form textarea:focus{border-color:var(--focus-line)}

/* ───── формы и модальные окна ───── */
.modal-back{position:fixed;inset:0;background:var(--modal-back);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:640px}
.modal.wide{max-width:820px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px;font-weight:700}
.modal-body{padding:20px 20px;display:flex;flex-direction:column;gap:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid var(--line)}
.x{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.x:hover{color:var(--text)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:var(--muted)}
.field input[type=text],.field input[type=url],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=date],.field textarea,.field select{
  background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:0;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--focus-line)}
.field textarea{resize:vertical;min-height:92px}
.counter{font-size:12px;color:var(--muted-2);text-align:right}
.counter.over{color:var(--danger)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{font-size:13px;color:var(--muted-2)}
.pick{display:flex;gap:16px;align-items:center}
.pick .prev{width:88px;height:88px;border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:24px}
.pick .prev.wide{width:150px;height:88px;border-radius:12px}
.tip{background:var(--tip-bg);border:1px solid var(--tip-line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--tip-text)}

/* карта */
.map-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--field)}
.map-box iframe{width:100%;height:230px;border:0;display:block}
.map-search{position:relative}
.map-results{position:absolute;left:0;right:0;top:44px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);z-index:20;max-height:230px;overflow:auto;display:none}
.map-results.open{display:block}
.map-results button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--divider);color:var(--text);
  padding:12px 12px;font-size:13px;cursor:pointer}
.map-results button:hover{background:var(--card-2)}

/* вход */
.login-wrap{max-width:460px;margin:64px auto 0;text-align:center}
.login-wrap h1{font-size:30px;margin:0 0 8px}
.login-wrap p{color:var(--muted);margin:0 0 26px}
.login-list{display:flex;flex-direction:column;gap:12px}
.provider{display:flex;align-items:center;gap:12px;justify-content:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 16px;cursor:pointer;color:var(--text);font-size:15px;font-weight:600;text-align:left}
.provider:hover{border-color:var(--hover-line-2);background:var(--card-2)}
.provider svg{width:20px;height:20px;flex:none}
.provider .st{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted-2)}
.provider.tg{border-color:rgba(42,171,238,.5)}
.provider[disabled]{opacity:.55;cursor:not-allowed}
.provider[disabled]:hover{background:var(--card);border-color:var(--line)}
.tg-widget{display:flex;justify-content:center;min-height:44px;align-items:center}

/* список профилей / поиск */
.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pcard{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;align-items:center}
.pcard img,.pcard .ph{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.pcard .nm{font-weight:700;font-size:15px}
.pcard .un{color:var(--muted);font-size:13px}
.hit{background:var(--feed-bg);border-left:2px solid var(--blue);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:13px;color:var(--text)}
.hit .w{color:var(--muted-2);font-size:12px;display:block}
.page-title{font-size:24px;font-weight:700;margin:34px 0 18px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--toast-bg);border:1px solid var(--line);
  color:var(--toast-text);padding:12px 18px;border-radius:12px;font-size:14px;z-index:300;box-shadow:var(--shadow)}
.toast.err{border-color:rgba(242,85,90,.5)}

/* ───── переписка ───── */
.msg-box{display:flex;align-items:center}
.msg-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;color:var(--muted);cursor:pointer}
.msg-btn:hover{color:var(--text);border-color:var(--hover-line-2)}
.msg-btn svg{width:16px;height:16px}
.msg-btn.has{border-color:rgba(42,171,238,.55);color:var(--text)}
.badge-n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--danger);
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.msg-wrap{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;margin-top:26px;align-items:start}
.threads{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.threads-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px;border-bottom:1px solid var(--divider)}
.threads-head h3{margin:0;font-size:16px;font-weight:700}
.thread{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid var(--divider-2);align-items:center;cursor:pointer}
.thread:last-child{border-bottom:0}
.thread:hover{background:var(--card-2)}
.thread.active{background:var(--thread-on);box-shadow:inset 2px 0 0 var(--blue)}
.thread img,.thread .ph{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.thread .t-main{min-width:0;flex:1}
.thread .t-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .t-last{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .t-side{text-align:right;color:var(--muted-2);font-size:12px;flex:none}
.thread .t-side .unread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--blue);color:#fff;font-weight:700;font-size:11px;margin-top:6px}
.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:540px}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--divider);flex-wrap:wrap}
.chat-head img,.chat-head .ph{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.chat-head .who{font-weight:600}
.chat-head .who span{display:block;color:var(--muted);font-weight:400;font-size:13px}
.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:340px;max-height:58vh}
.bubble{max-width:76%;padding:12px 14px;border-radius:16px;font-size:15px;white-space:pre-wrap;word-break:break-word;line-height:1.45}
.bubble .b-time{display:block;font-size:11px;color:var(--muted-2);margin-top:6px}
.bubble.them{background:var(--card-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.bubble.me{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.bubble.me .b-time{color:rgba(255,255,255,.8)}
.chat-form{display:flex;gap:12px;padding:16px 18px;border-top:1px solid var(--divider);align-items:flex-end}
.chat-form textarea{flex:1;min-height:44px;max-height:130px;resize:vertical;background:var(--field);border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:12px 13px;font-size:15px;font-family:inherit;outline:0}
.chat-form textarea:focus{border-color:var(--focus-line)}
.chat-sub{color:var(--muted-2);font-size:13px;text-align:center;padding:2px 0 12px}
.sound-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:6px 11px;font-size:13px;cursor:pointer;white-space:nowrap}
.sound-toggle:hover{color:var(--text);border-color:var(--hover-line-2)}
.sound-toggle.off{opacity:.6}
.msg-empty{padding:20px 18px;color:var(--muted-2);font-size:13px}

/* ───── ФОТО В РАМКАХ: всегда вписано по размеру рамки ───── */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;border-radius:inherit}
.avatar .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:inherit}
.avatar-btn img,.avatar-btn .ph{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center;display:block;flex:none}
.pcard img,.pcard .ph{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.seller img,.seller .ph{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.comment img,.comment .ph,.post .meta img,.post .meta .ph{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.pick .prev img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:820px){
  .msg-wrap{grid-template-columns:minmax(0,1fr)}
  .chat-body{max-height:none}
}
@media(max-width:720px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .head{flex-direction:column}.head-actions{width:100%;flex-direction:row;flex-wrap:wrap}
  .search-mini{width:190px}.brand-name{display:none}
  .cover{height:170px}.head-wrap{--cover-h:170px;--ava:84px}.avatar{border-radius:20px}
  .head h1{font-size:24px}
  .row2{grid-template-columns:1fr}
}
@media(max-width:600px){
  .grid{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   ПРАВКИ ВЁРСТКИ: границы по краям экрана, режимы карточек,
   окно переписки, свайп-удаление диалогов, облака вместо фото
   ═══════════════════════════════════════════════════════════════ */

/* ───── каркас: контент по центру, баннер — от края до края ───── */
html,body{overflow-x:hidden}
.view{width:100%;max-width:none;margin:0;padding:0 0 60px}
.page{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(12px,2.4vw,30px)}
.foot{width:100%;max-width:1280px;margin:0 auto;padding:24px clamp(12px,2.4vw,30px) 36px;
  display:flex;justify-content:space-between;gap:12px;color:var(--muted-2);font-size:13px}

/* баннер профиля во всю ширину экрана */
.cover{width:100%;margin:0;border-radius:0;height:clamp(180px,26vw,300px)}.head-wrap{--cover-h:clamp(180px,26vw,300px)}
.head-wrap{margin-top:-46px}
.head-wrap .avatar{left:0}

/* ───── окно переписки: тянется по высоте окна ───── */
.msg-wrap{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);margin-top:26px;align-items:stretch}
.threads{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;max-height:clamp(360px,calc(100vh - 260px),760px)}
.threads-scroll{overflow-y:auto;flex:1}
.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;height:clamp(420px,calc(100vh - 260px),760px);min-height:0}
.chat-body{flex:1;min-height:0;max-height:none;overflow-y:auto}
.chat-form{flex:none}
.chat-sub{flex:none}
.bubble{overflow-wrap:anywhere;word-break:break-word}

/* ───── диалоги: свайп влево для удаления ───── */
.thread-row{position:relative;overflow:hidden;border-bottom:1px solid var(--divider-2)}
.thread-row:last-child{border-bottom:0}
.thread-row .thread{border-bottom:0;background:var(--card);position:relative;z-index:1;
  transform:translateX(var(--swipe,0px));transition:transform .18s ease;touch-action:pan-y;will-change:transform}
.thread-row .thread.dragging{transition:none}
.thread-actions{position:absolute;top:0;right:0;bottom:0;width:72px;display:flex;align-items:center;justify-content:center;
  background:var(--danger);color:#fff}
.thread-actions button{background:none;border:0;color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px}
.thread-actions svg{width:16px;height:16px}
.thread-row .t-del{position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:0;transition:.15s;z-index:2;
  background:var(--surface);border:1px solid var(--surface-2);color:var(--muted);border-radius:8px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.thread-row:hover .t-del{opacity:1}
.thread-row .t-del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.45)}
.thread-row .t-del svg{width:14px;height:14px}
@media(hover:none){ .thread-row .t-del{opacity:1;position:static;transform:none;margin-left:auto;flex:none} }

/* ───── удаление своего сообщения в чате ───── */
.bubble{position:relative}
.bubble .del{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:.15s}
.bubble:hover .del,.bubble .del:focus{opacity:1}
.bubble .del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.5)}
@media(hover:none){ .bubble .del{opacity:1} }

/* ───── переключатель вида карточек ───── */
.view-switch{display:flex;gap:4px;align-items:center;background:var(--seg-bg);border:1px solid var(--line);
  border-radius:10px;padding:4px;margin-left:auto}
.view-switch button{background:none;border:0;color:var(--muted);border-radius:8px;padding:6px 8px;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.view-switch button:hover{color:var(--text)}
.view-switch button.active{background:var(--seg-on-bg);color:var(--seg-on-text)}
.view-switch svg{width:16px;height:16px}
.view-switch .vw-lbl{font-size:12px}

/* ───── режимы отображения карточек: список | 2 | 3 | 4 ───── */
.grid{gap:clamp(12px,1.6vw,20px)}
.grid.v2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.v3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.v4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.mode-list{grid-template-columns:minmax(0,1fr)}

/* карточка-строка */
.grid.mode-list .card{flex-direction:row}
.grid.mode-list .thumb{width:clamp(120px,24%,300px);flex:none;aspect-ratio:auto;min-height:170px}
.grid.mode-list .card .body{flex:1;min-width:0}
.grid.mode-list .card h3{font-size:18px}
.grid.mode-list .card .desc{-webkit-line-clamp:4}

@media(max-width:1200px){
  .grid.v4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .grid,.grid.v3,.grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .grid,.grid.v2,.grid.v3,.grid.v4{grid-template-columns:minmax(0,1fr)}
  .grid.mode-list .card{flex-direction:column}
  .grid.mode-list .thumb{width:100%;aspect-ratio:16/10;min-height:0}
}

/* ───── облака вместо фото карточки ───── */
.thumb .clouds{width:100%;height:100%;display:block}
.grid.mode-list .thumb .clouds{height:100%}
/* схематичная заставка «море и пальмы»: заполняет рамку аватара и обрезается по её форме */
.sea-ph svg.sea{width:100%;height:100%;display:block}

/* ───── подписки и уведомления ───── */
.stats .s.link{text-decoration:none;color:inherit;cursor:pointer;border-bottom:1px dashed var(--line-2)}
.stats .s.link:hover .k{color:var(--blue)}
.msg-btn.off{opacity:.55}
.badge-n.static{position:static;margin-left:6px}
.note-panel{position:fixed;right:14px;top:58px;z-index:70;width:min(440px,calc(100vw - 28px));
  max-height:min(72vh,620px);display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.note-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:15px}
.note-head .icon-btn{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px}
.note-sets{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.note-set{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line);color:var(--text);font-size:13px;font-family:inherit}
.note-set svg{width:14px;height:14px;flex:none}
.note-set.off{color:var(--muted);border-style:dashed}
.note-list{overflow:auto;padding:6px 0}
.note{display:grid;grid-template-columns:38px minmax(0,1fr) 30px;gap:12px;align-items:start;padding:12px 14px;border-bottom:1px solid var(--line)}
.note:last-child{border-bottom:0}
.note.unread{background:linear-gradient(90deg,rgba(30,147,214,.10),transparent)}
.note-ava img,.note-ava .ph{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block}
.note-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.note-top{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.note-top a{color:var(--blue);text-decoration:none;font-weight:600}
.note-kind{color:var(--muted);font-size:12px}
.note-text{font-size:13px;color:var(--text);word-break:break-word}
.note-time{font-size:11px;color:var(--muted-2)}
.note-mute{align-self:center;background:none;border:0;color:var(--muted-2);cursor:pointer;padding:4px}
.note-mute:hover{color:var(--danger-text)}
.note-mute svg{width:16px;height:16px}
.note-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.note .empty{padding:6px 0;font-size:13px}

.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.fcard{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px}
.fava img,.fava .ph{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block}
.fbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.fname{color:var(--text);text-decoration:none;font-weight:600}
.fname:hover{color:var(--blue)}
.fmeta{font-size:12px;color:var(--muted)}
.fbio{font-size:13px;color:var(--text);opacity:.9}
.fcounts{font-size:12px;color:var(--muted-2)}
.facts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media(max-width:640px){
  .facts{grid-column:1 / -1}
  .note-panel{left:10px;right:10px;top:54px}
}

/* ───── переписка на узких экранах ───── */
@media(max-width:900px){
  .msg-wrap{grid-template-columns:minmax(0,1fr)}
  .threads{max-height:68vh}
  .chat{height:clamp(360px,62vh,620px)}
}

/* выравнивание ссылок Info/контактов на узких экранах */
@media(max-width:600px){
  .info-list{grid-template-columns:minmax(0,1fr)}
  .stats{gap:16px}
  .head-actions{min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   ПРАВКИ И ДОБАВЛЕНИЯ: карточки, мобильный вид, окна, подсказки
   поиска, кнопка выхода, бледные пиктограммы
   ═══════════════════════════════════════════════════════════════ */

/* ───── бледные пиктограммы вместо фотографий ───── */
:root{ --ph-bg:#151b26; --ph-ink:#7f8ca3; --ph-fill:#232c3c; }
html[data-theme="light"]{ --ph-bg:#eef2f8; --ph-ink:#9aa6b8; --ph-fill:#e3e9f2; }
.ph{border-radius:inherit}
.sea-ph svg.sea,.thumb svg.clouds{display:block;width:100%;height:100%}

/* ───── кнопка выхода в правом верхнем углу ───── */
.exit-box{display:flex;align-items:center}
.exit-btn{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--surface-2);
  color:var(--strong-3);border-radius:10px;padding:6px 11px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s}
.exit-btn svg{width:16px;height:16px}
.exit-btn:hover{color:var(--danger-text);border-color:rgba(242,85,90,.45)}
@media(max-width:720px){ .exit-btn{padding:6px 9px} .exit-btn .exit-lbl{display:none} }

/* ───── подсказки при наборе в поиске ───── */
.search-mini{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  max-height:min(72vh,520px);overflow-y:auto;text-align:left}
.sg-head{padding:8px 13px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.sg-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;background:none;border:0;
  color:var(--text);cursor:pointer;font:inherit;text-align:left}
.sg-item:hover{background:var(--surface)}
.sg-thumb{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;background:var(--ph-bg);
  display:flex;align-items:center;justify-content:center}
.sg-thumb.round{border-radius:50%}
.sg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sg-thumb svg{width:100%;height:100%}
.sg-txt{min-width:0;display:flex;flex-direction:column}
.sg-txt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-txt em{font-style:normal;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-empty{padding:16px;color:var(--muted)}
.sg-foot{border-top:1px solid var(--line);padding:12px 13px;font-size:13px;color:var(--blue)}
.sg-foot a{color:var(--blue)}
@media(max-width:720px){ .suggest{position:fixed;left:8px;right:8px;top:56px;max-height:70vh} }

/* ───── заголовки секций поиска и подробная карточка ───── */
.sec-title{font-size:15px;font-weight:700;margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.sec-title .cnt{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);
  border-radius:20px;padding:2px 9px}
.prd-view{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.prd-view .thumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--ph-bg)}
.prd-view .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prd-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.prd-price{font-size:22px;font-weight:800;color:var(--ok-text)}
.prd-owner,.prd-tab{font-size:13px;color:var(--muted)}
.prd-owner a{color:var(--blue)}
.prd-desc{margin:6px 0 0;color:var(--strong-3);font-size:15px}
@media(max-width:600px){ .prd-view{grid-template-columns:minmax(0,1fr)} }

/* ───── карточки товаров: ровные пропорции во всех режимах ───── */
.grid{align-items:stretch}
.card .thumb{aspect-ratio:16/10;width:100%;flex:none}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .price-block{margin-top:auto;padding-top:12px}
.card .body{display:flex;flex-direction:column}
/* список: картинка фиксированной пропорции по центру, текст рядом */
.grid.mode-list .card{flex-direction:row;align-items:stretch}
.grid.mode-list .card .thumb{width:clamp(150px,30%,330px);aspect-ratio:16/10;align-self:center;margin:16px 0 14px 14px;border-radius:12px}
.grid.mode-list .card .body{flex:1;min-width:0;padding:16px 18px}
.grid.mode-list .card h3{font-size:18px}
.grid.mode-list .card .desc{-webkit-line-clamp:4}
@media(max-width:900px){
  .grid.mode-list .card .thumb{width:clamp(130px,36%,260px)}
}
@media(max-width:600px){
  .grid.mode-list .card{flex-direction:column}
  .grid.mode-list .card .thumb{width:100%;aspect-ratio:16/10;margin:0;border-radius:0}
  /* на телефоне сетки остаются сетками, но шире: 2 колонки − на узких экранах 1 */
  .grid.v2,.grid.v3,.grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.mode-list{grid-template-columns:minmax(0,1fr)}
  .card h3{font-size:16px}
  .card .body{padding:12px}
  .card .desc{-webkit-line-clamp:2}
}
@media(max-width:430px){
  .grid.v2,.grid.v3,.grid.v4{grid-template-columns:minmax(0,1fr)}
}

/* ───── видео в канале — компактнее ───── */
.post .media{aspect-ratio:16/9;max-width:min(100%,400px);margin:12px 14px 0;border-radius:12px;overflow:hidden;
  background:var(--media-bg);position:relative}
.post .media iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:600px){ .post .media{margin:12px 12px 0;max-width:100%} }
.post .media .tag-video{top:8px;left:8px;font-size:11px;padding:2px 8px}

/* ───── окна: удобно на телефоне, отмена всегда работает ───── */
.modal-back{position:fixed;inset:0;background:var(--modal-back);backdrop-filter:blur(3px);z-index:200;display:flex;
  align-items:flex-start;justify-content:center;padding:44px 14px 28px;overflow:auto}
.modal{display:flex;flex-direction:column;max-height:calc(100vh - 72px)}
@supports (max-height:100dvh){ .modal{max-height:calc(100dvh - 72px)} }
.modal-body{overflow-y:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-head,.modal-foot{flex:none;background:var(--panel)}
.modal-head{border-radius:16px 18px 0 0}
.modal-foot{border-radius:0 0 18px 18px;flex-wrap:wrap}
.modal-foot .btn{flex:1 1 auto;justify-content:center;min-height:40px}
.modal-head .x{width:34px;height:34px;font-size:22px;line-height:1}
body.modal-open{overflow:hidden}
@media(max-width:640px){
  .modal-back{padding:0;align-items:flex-end;overflow:hidden}
  .modal{max-width:none;max-height:92vh}
  @supports (max-height:100dvh){ .modal{max-height:92dvh} }
  .modal,.modal.wide{border-radius:16px 18px 0 0}
  .modal-head{border-radius:16px 18px 0 0;padding:16px 16px}
  .modal-head h2{font-size:16px}
  .modal-body{padding:16px 16px;gap:12px}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:0}
  .modal-foot .btn{flex:1 1 46%}
}

/* ───── переключатель уведомлений в подписках ───── */
.toggle{gap:8px}
.toggle .tgl{width:34px;height:19px;border-radius:20px;background:var(--surface-2);position:relative;flex:none;
  transition:.18s;display:inline-block}
.toggle .tgl i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);
  transition:.18s;display:block}
.toggle.on .tgl{background:rgba(49,196,141,.35)}
.toggle.on .tgl i{left:17px;background:var(--green)}
.facts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ───── мобильный топбар: логотип LAZAL остаётся видимым ───── */
@media(max-width:720px){
  .topbar{padding:0 12px;gap:12px;height:52px}
  .brand-name{display:inline;font-size:13px;letter-spacing:.12em}
  .brand-mark{width:20px;height:20px}
  .search-mini{flex:1 1 auto;min-width:0;width:auto}
  .topbar-right{gap:8px;flex:1 1 auto;justify-content:flex-end;min-width:0}
  .avatar-btn span{display:none}
  .msg-btn{width:34px;height:34px}
  .page{padding:0 12px}
}
@media(max-width:430px){
  /* надпись LAZAL остаётся в левом верхнем углу, просто компактнее */
  .brand-name{display:inline;font-size:12px;letter-spacing:.06em}
  .brand{gap:6px}
  .brand-mark{width:16px;height:16px}
  .topbar{padding:0 10px;gap:8px}
  .search-mini{padding-left:8px;padding-right:8px}
  .search-mini input{font-size:13px}
  .msg-btn{width:30px;height:30px}
  .exit-btn{padding:6px 7px}
  .avatar-btn img,.avatar-btn .ph{width:22px;height:22px}
}

/* ───── сортировка найденных карточек в поиске ───── */
.sort-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.sort-lbl{font-size:13px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--surface-2);
  color:var(--strong-3);border-radius:20px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.chip:hover{color:var(--text);border-color:var(--hover-line)}
.chip.active{background:var(--seg-on-bg);color:var(--seg-on-text);border-color:transparent}
.chip .dir{font-size:12px;opacity:.85}
.card .loc-mini .km{margin-left:auto;color:var(--blue);font-weight:600}
.card .loc-mini .rev{display:inline-flex;align-items:center;gap:6px}
.card .loc-mini .rev svg{width:14px;height:14px}
@media(max-width:600px){ .sort-bar{gap:6px;margin-bottom:12px} .chip{padding:6px 10px;font-size:13px} }

/* ───── «поделиться» профилем и карточкой товара ───── */
.price-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price-row .price{min-width:0}
.icon-btn.share{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;flex:none;
  background:var(--surface);border:1px solid var(--surface-2);color:var(--muted);border-radius:10px;padding:6px 9px;cursor:pointer;transition:.15s}
.icon-btn.share:hover{color:var(--blue);border-color:var(--blue)}
.card .icon-btn.share{width:30px;height:28px;justify-content:center;padding:0}
.card .icon-btn.share span{display:none}
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.share-row .hint{font-size:13px;color:var(--muted);flex:1 1 150px;min-width:0;overflow-wrap:anywhere}
.share-row code{background:var(--surface);padding:2px 6px;border-radius:8px;font-size:12px}
@media(max-width:600px){ .share-row{gap:6px} .share-row .btn{flex:1 1 46%;justify-content:center} }

/* ───── мобильный полноэкранный режим: пропорции, обрезки, доступность кнопок ───── */
/* «поделиться» на карточке — только значок, иначе надпись обрезалась */
.card .icon-btn.share{flex:none}
.card .icon-btn.share span{display:none}
.price-row{flex-wrap:wrap;row-gap:6px}
.price-row .price{flex:1 1 auto;min-width:0}
/* переписка: открытый диалог занимает экран целиком, поле ввода всегда видно */
.chat-back{display:none}
@media(max-width:760px){
  .msg-wrap.has-thread .threads{display:none}
  .msg-wrap.has-thread .chat{height:calc(100vh - 128px);height:calc(100dvh - 128px);min-height:340px;max-height:none}
  .chat-back{display:inline-flex;flex:none}
  .chat-head{flex-wrap:wrap;gap:8px;padding:12px 12px}
  .chat-head .who{flex:1 1 110px;min-width:0}
  .chat-head .btn{padding:6px 10px;font-size:13px}
  .chat-form{padding:12px 12px;gap:8px}
  .chat-form textarea{min-height:42px}
}
/* очень узкие экраны: сетки остаются сетками (2 колонки), карточки компактнее */
@media(max-width:430px){
  .grid.v2,.grid.v3,.grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:12px}
  .card .body{padding:12px;gap:6px}
  .card h3{font-size:15px}
  .card .desc{-webkit-line-clamp:2;font-size:13px}
  .card .seller{font-size:12px}
  .card .price{font-size:16px}
  .card .price-lbl{font-size:11px}
  .cover{height:170px}
  /* формы в записях канала: поле и кнопка — во всю ширину */
  .comment-form{flex-wrap:wrap;gap:8px}
  .comment-form textarea{flex:1 1 100%;min-height:44px}
  .comment-form .btn{flex:1 1 100%;justify-content:center}
  .post .media{margin:12px 10px 0}
  .post{padding:12px 12px 14px}
}

/* ── компактнее шапка профиля на телефоне: вкладки и информация видны сразу ── */
@media(max-width:430px){
  .cover{height:150px}
  .head-wrap{--push:38px;--cover-h:150px;--ava:70px;margin-top:calc(-1*var(--push))}
  .head{padding-top:44px;gap:12px}
  .head h1{font-size:24px}
  .head-wrap .avatar,.avatar{border-radius:16px;border-width:3px}
  /* положение аватарки считается от высоты фона */
  .stats{gap:12px 14px}
  .stats .s{min-width:56px}
  .stats .v{font-size:16px}
  .stats .k{font-size:12px}
  .segment{margin-top:16px;padding:4px}
  .head-actions{gap:8px}
  .head-actions .btn{padding:8px 12px;font-size:13px}
  .pane{margin-top:16px}
  .lbl{font-size:13px;margin-bottom:6px}
  .bio{font-size:14px;line-height:1.45}
  .loc{font-size:14px}
  .links{gap:8px}
  .links a,.links span{width:30px;height:30px;border-radius:10px}
  .links svg{width:16px;height:16px}
  .info-toggle{font-size:14px}
  .subtabs{gap:6px}
}

/* ═══ рациональная компоновка: переписка, панели профиля, главная ═══ */

/* шапка чата — всегда одна строка, ничего не переносится и не режется */
.chat-head{flex-wrap:nowrap;gap:12px;padding:12px 14px}
.chat-head .who{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .who span{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .icon-btn{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;color:var(--muted);cursor:pointer;transition:.15s}
.chat-head .icon-btn:hover{color:var(--text);border-color:var(--hover-line)}
/* пустое состояние — по центру, а не растянуто на весь блок */
.chat-body .msg-empty{margin:auto;text-align:center;max-width:300px;line-height:1.5}
.menu button.danger{color:var(--danger-text)}
.menu button.danger:hover{background:rgba(242,85,90,.12)}

/* панели профиля: на широком экране в две колонки, а не в одну узкую */
.panes{display:block}
@media(min-width:900px){
  .panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;align-items:start}
  .panes .pane{margin-top:26px}
  .panes .pane:nth-child(1),.panes .pane:nth-child(2){margin-top:0}
}

/* главная: витрина слева, вход справа */
.home-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:40px;align-items:center;margin:44px 0 16px}
.home-hero .home-brand{font-size:13px;letter-spacing:.22em;color:var(--muted);font-weight:700;margin-bottom:16px}
.home-hero h1{font-size:clamp(26px,3.4vw,42px);line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-.02em}
.home-hero p{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 22px;max-width:520px}
.home-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.home-feats li{display:flex;gap:12px;align-items:flex-start;color:var(--strong-2);font-size:15px;line-height:1.4}
.home-feats svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--blue)}
.home-login .login-wrap{max-width:none;margin:0;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:26px 24px;box-shadow:var(--shadow)}
.home-login .login-wrap h2{font-size:18px;margin:0 0 6px}
.home-login .login-wrap p.sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.home-legal{margin-top:16px;color:var(--muted-2);font-size:12px;line-height:1.45}
.home-legal a{color:var(--muted)}
@media(max-width:900px){
  .home-grid{grid-template-columns:minmax(0,1fr);gap:20px;margin:20px 0 8px}
  .home-hero h1{font-size:24px}
  .home-hero p{font-size:15px;margin-bottom:16px}
  .home-login .login-wrap{padding:20px 18px;border-radius:16px}
}
@media(max-width:760px){
  .page-title{font-size:18px;margin:20px 0 12px;gap:12px}
  .sound-toggle span{display:none}
  .sound-toggle{padding:8px 9px}
  .chat-head .chat-profile{display:none}
  .chat-head .icon-btn{width:32px;height:32px}
  .chat-sub .swipe-hint{display:none}
}

/* результаты поиска: профили — в две колонки на широком экране, воздух между секциями */
@media(min-width:860px){
  .profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #searchOut .sec-title{margin:0 0 14px}
  #searchOut .sec-title:not(:first-child){margin-top:30px}
}
.profiles .pcard{width:100%}
/* подписки: карточка ровнее — аватар, текст и действия по своим колонкам */
.fcard{grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:900px){
  .fcard{grid-template-columns:52px minmax(0,1fr) minmax(200px,auto)}
  .fcard .facts{display:flex;flex-direction:column;gap:8px;align-items:stretch}
  .fcard .facts .btn{justify-content:center}
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
}
@media(max-width:760px){
  .fcard .facts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:8px}
  .fcard .facts .btn{flex:1 1 40%;justify-content:center}
}
@media(max-width:600px){
  .fgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .fcard{padding:12px;grid-template-columns:44px minmax(0,1fr);gap:12px}
  .fava img,.fava .ph{width:44px;height:44px}
}

/* ── логотип: знак в шапке, на главной и в подвале ── */
.brand-logo{width:26px;height:26px;display:inline-block;vertical-align:-4px;margin-right:8px}
.home-hero .home-brand{display:flex;align-items:center;gap:12px}
.home-hero .brand-logo{width:30px;height:30px;margin:0;vertical-align:0}
.foot-brand{display:inline-flex;align-items:center;gap:8px}
.foot-logo{width:16px;height:16px;display:block;opacity:.85;flex:none}
.brand:hover .brand-logo{opacity:1}

/* ── компактная шапка профиля: кнопки в один ряд, «Адрес» открывает карту ── */
.head-actions{flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.head-actions .btn.icon-only{padding:8px 11px}
.head-actions .btn.icon-only svg{width:16px;height:16px}
.lbl-link{background:none;border:0;padding:0;margin-bottom:8px;color:var(--blue);font:inherit;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.lbl-link:hover{text-decoration:underline}
.lbl-link .lnk-hint{color:var(--muted);font-size:12px}
.lbl-link:hover .lnk-hint{color:var(--blue)}
.stats .s.link .k{border-bottom:1px dashed var(--line-2)}

/* ───── магазин: компактные карточки и карточки с маркетплейсов (CPA) ───── */
.card .price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.card .card-loc{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.card .card-loc svg{width:14px;height:14px;flex:none;color:var(--muted-2)}
.thumb{position:relative}
.mk-chip{position:absolute;left:8px;top:8px;z-index:2;background:rgba(9,11,15,.8);color:#fff;
  border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600;
  backdrop-filter:blur(4px);letter-spacing:.01em}
.mk-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.mk-line .mk-chip{position:static;background:var(--surface);color:var(--text);border-color:var(--surface-2);backdrop-filter:none}
.prd-buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
.prd-buy .hint{font-size:12px;color:var(--muted-2)}
/* ввод карточки по ссылке с маркетплейса */
.mk-box{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.mk-box .hint{margin-top:8px}
.mk-row{display:flex;gap:8px;margin-top:8px}
.mk-row input{flex:1;min-width:0}
@media(max-width:600px){ .mk-row{flex-direction:column} .mk-row .btn{width:100%;justify-content:center} }

/* ── поле фото в редакторе карточки: принимает перетаскивание ── */
.mk-box .hint{line-height:1.45}
.prev.drop-on{outline:2px dashed var(--blue);outline-offset:-4px}
#prevPr{cursor:pointer}

/* ───── окно просмотра карточки: логичная и компактная раскладка ───── */
.prd-info{gap:8px}
.prd-price{line-height:1.1}
.prd-buy{margin:0;align-items:center;gap:12px}
.prd-buy .btn{padding:12px 18px}
.prd-buy-meta{font-size:13px;color:var(--muted-2)}
.prd-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prd-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.prd-meta a{color:var(--blue);text-decoration:none}
.prd-meta a:hover{text-decoration:underline}
.prd-meta svg{width:14px;height:14px;flex:none;color:var(--muted-2)}
.prd-map summary{cursor:pointer;font-size:13px;color:var(--muted);list-style:none;display:inline-flex;align-items:center;gap:6px}
.prd-map summary::-webkit-details-marker{display:none}
.prd-map summary::before{content:'▸';color:var(--muted-2)}
.prd-map[open] summary::before{content:'▾'}
.prd-map .map-box{margin-top:8px}
.prd-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.prd-link{font-size:12px;color:var(--muted-2);flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){
  .prd-view{grid-template-columns:minmax(0,1fr);gap:12px}
  .prd-view .thumb{max-height:230px}
  .prd-share .btn{flex:1 1 44%;justify-content:center}
}

/* ───── окно редактирования карточки: компактная сетка ───── */
.mk-lbl{font-size:13px;color:var(--muted);display:block}
.mk-box{padding:12px 13px}
.mk-box .hint{font-size:13px;color:var(--muted);line-height:1.45}
.ed-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:start}
.ed-photo{display:flex;flex-direction:column;gap:8px}
.ed-photo .prev.wide{width:100%;height:112px;border-radius:12px}
.ed-photo-btns{display:flex;gap:8px;flex-wrap:wrap}
.ed-photo-btns .btn{justify-content:center}
.ed-fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.ed-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ed-fields textarea{min-height:70px}
@media(max-width:640px){
  .ed-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .ed-photo .prev.wide{height:150px}
  .ed-2{grid-template-columns:minmax(0,1fr)}
  .ed-photo-btns .btn{flex:1 1 44%}
}

/* ── плашка фото: базовые стили (раньше шли только через .pick) ── */
.prev{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:24px}
.prev.empty{border-style:dashed;border-color:var(--line-2)}
.prev-hint{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--muted);
  text-align:center;line-height:1.35;padding:0 10px}
.prev-hint em{font-style:normal;font-size:11px;color:var(--muted-2)}

/* ───── магазин: ещё компактнее. Адрес показываем только внутри карточки при открытии ───── */
.card-compact .thumb{aspect-ratio:16/9}
.card-compact .body{padding:8px 10px 10px;gap:4px}
.card-compact h3{margin:0;font-size:15px;line-height:1.25;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-compact .price-row{margin-top:auto;padding-top:4px}
.card-compact .price{font-size:16px}
.card-compact .icon-btn.share{width:28px;height:26px}
.card-compact .mk-chip{left:6px;top:6px;padding:2px 7px;font-size:11px;border-radius:8px}
.card-compact .card-admin{padding:0 10px 10px;gap:6px}
.card-compact .card-admin .icon-btn{flex:1;height:30px;justify-content:center;
  background:var(--surface);border:1px solid var(--surface-2);color:var(--muted);border-radius:10px;cursor:pointer;transition:.15s}
.card-compact .card-admin .icon-btn:hover{color:var(--text);border-color:var(--hover-line)}
.card-compact .card-admin .icon-btn.del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.45)}
.card-compact .card-admin .icon-btn svg{width:14px;height:14px}
@media(max-width:600px){
  .card-compact .body{padding:8px 9px 9px}
  .card-compact h3{font-size:13px}
  .card-compact .price{font-size:15px}
}

/* ───── вкладка «Мои рефералки»: карточки программ, редактор с предпросмотром ───── */
.shop-add{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.shop-add .hint{margin:0}
.sys-tab-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-2);
  border:1px dashed var(--line-2);border-radius:10px;padding:4px 9px;white-space:nowrap}
.ref-card .ref-payout{font-size:16px;font-weight:800;color:var(--accent);letter-spacing:-.2px}
.ref-card .ref-go{font-size:12px;color:var(--muted-2)}
.ref-card .body{gap:4px}
.ref-nolink{font-size:13px;color:var(--muted-2)}
.ref-dim{color:var(--muted-2)}
/* редактор: форма слева, предпросмотр справа */
.ref-ed{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
.ref-form{display:flex;flex-direction:column;gap:12px;min-width:0}
.ref-form .ed-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ref-preview{position:sticky;top:0}
.ref-preview-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:8px}
.ref-preview .grid{display:grid;grid-template-columns:1fr;gap:0}
.ref-preview .card{pointer-events:none}
@media(max-width:760px){
  .ref-ed{grid-template-columns:1fr;gap:16px}
  .ref-preview{position:static;order:-1;padding:12px;border:1px solid var(--line-2);border-radius:16px}
  .ref-preview .grid{max-width:240px;margin:0 auto}
}

/* ───── переписка: компактнее, разделители дат, изображения ───── */
.chat-head{gap:12px;padding:12px 16px}
.chat-head img,.chat-head .ph{width:34px;height:34px}
.chat-head .who{font-size:15px;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .who span{font-size:12px}
.chat-body{padding:16px 16px 10px;gap:4px;min-height:300px;max-height:60vh}
.b-day{display:flex;justify-content:center;margin:12px 0 6px}
.b-day span{background:var(--card-2);border:1px solid var(--line);color:var(--muted-2);
  font-size:12px;padding:4px 11px;border-radius:999px}
.bubble{max-width:74%;padding:8px 12px;border-radius:16px;font-size:14px;line-height:1.4;position:relative;
  display:flex;flex-direction:column;gap:6px}
.bubble.them{border-bottom-left-radius:14px}
.bubble.me{border-bottom-right-radius:14px}
.bubble.glued{margin-top:-1px}
.bubble.glued.them{border-top-left-radius:5px}
.bubble.glued.me{border-top-right-radius:5px}
.bubble.tail.them{border-bottom-left-radius:5px}
.bubble.tail.me{border-bottom-right-radius:5px}
.b-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:0}
.b-meta:empty{display:none}
.b-time,.b-meta{font-size:11px;color:var(--muted-2)}
.bubble.me .b-meta{color:rgba(255,255,255,.85)}
.b-read{font-weight:700;font-style:normal}
.bubble .del{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:.15s;padding:0}
.bubble:hover .del,.bubble:focus-within .del{opacity:1}
.bubble .del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.5)}
@media (hover:none){.bubble .del{opacity:.75}}
.bubble .b-text{white-space:pre-wrap;word-break:break-word}
.bubble .b-img{max-width:100%;width:260px;border-radius:10px;display:block;cursor:zoom-in;background:var(--surface)}
.bubble.me .b-img{width:260px}
.chat-form{flex-direction:column;gap:8px;padding:12px 14px 4px;align-items:stretch}
.chat-row{display:flex;align-items:flex-end;gap:8px}
.chat-row textarea{flex:1;min-height:40px;max-height:120px;resize:none;overflow-y:auto;background:var(--field);
  border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;font-size:15px;
  padding:12px 12px;line-height:1.4}
.chat-row textarea:focus{outline:none;border-color:var(--focus-line)}
.chat-attach,.chat-send{width:38px;height:38px;flex:none;border-radius:12px}
.chat-send{background:var(--surface);border:1px solid var(--surface-2);color:var(--muted);cursor:not-allowed}
.chat-send.ready{background:var(--blue);border-color:var(--blue);color:#fff;cursor:pointer}
.chat-send.ready:hover{filter:brightness(1.08)}
.chat-prev{position:relative;align-self:flex-start}
.chat-prev img{max-height:74px;max-width:150px;border-radius:10px;border:1px solid var(--line);display:block}
.chat-prev button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:11px;cursor:pointer;padding:0;line-height:1}
.chat-sub{padding:6px 14px 12px;font-size:12px;line-height:1.35}
.chat.drop-on{outline:2px dashed var(--blue);outline-offset:-4px}
.img-view{display:flex;justify-content:center}
.img-view img{max-width:100%;max-height:68vh;border-radius:12px}
@media(max-width:600px){
  .chat-body{padding:12px 12px 8px}
  .bubble{max-width:86%;font-size:14px}
  .bubble .b-img{width:min(230px,72vw)}
  .chat-head .chat-profile{display:none}
  .chat-send,.chat-attach{width:36px;height:36px}
  .chat-sub{font-size:11px}
}

/* подвал окна просмотра изображения: компактные кнопки-пиктограммы */
.modal-foot .icon-btn{width:38px;height:34px;border-radius:10px}
.img-view{padding:2px 0 4px}

/* ══════════ Магазин: панель вкладок и действий ══════════ */
.shop-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--divider);margin:20px 0 0;flex-wrap:nowrap}
.shop-bar .subtabs{margin:0;border-bottom:0;gap:20px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.shop-bar .subtabs::-webkit-scrollbar{display:none}
.shop-bar .subtab{white-space:nowrap}
.shop-tools{display:flex;align-items:center;gap:12px;flex:none;padding-bottom:8px}
.shop-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 18px}
.shop-actions .hint{margin:0;flex:1 1 220px}
.shop-actions .tab-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.shop-actions .tab-tools .btn{padding:8px 10px}

/* ══════════ Резюме ══════════ */
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pane-resume{flex:none}
.rz{display:flex;flex-direction:column;gap:16px}
.rz-head{display:flex;align-items:center;gap:12px}
.rz-head img,.rz-head .ph{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center;flex:none}
.rz-who{min-width:0;flex:1}
.rz-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-name span{color:var(--muted);font-weight:400;font-size:13px}
.rz-pos{color:var(--blue);font-size:13px;margin-top:2px}
.rz-upd{color:var(--muted-2);font-size:12px;flex:none}
.rz-chips{display:flex;flex-wrap:wrap;gap:8px}
.rz-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 11px;font-size:13px}
.rz-chip svg{width:14px;height:14px;color:var(--muted);flex:none}
.rz-block h4,.rz-sec h4{margin:0 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);display:flex;align-items:center;gap:6px;font-weight:700}
.rz-block p{margin:0;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.rz-tags{display:flex;flex-wrap:wrap;gap:6px}
.rz-tag{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:13px}
.rz-form{display:flex;flex-direction:column;gap:16px}
.rz-hint{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 12px;
  color:var(--muted);font-size:13px;line-height:1.45}
.rz-sec{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--divider-2)}
.rz-sec:last-child{border-bottom:0;padding-bottom:0}
.rz-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rz-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcard-prof{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--blue);
  background:rgba(42,171,238,.10);border:1px solid rgba(42,171,238,.28);border-radius:8px;padding:4px 8px;font-size:12px}
.pcard-prof svg{width:14px;height:14px;flex:none}

/* ══════════ Размеры окон под любой экран ══════════ */
.modal-back{padding:clamp(6px,2.2vh,36px) clamp(8px,2vw,18px)}
.modal{max-width:min(640px,100%);max-height:calc(100dvh - 2 * clamp(6px,2.2vh,36px))}
.modal.wide{max-width:min(880px,100%)}
.modal-body{padding:clamp(12px,1.5vw,20px);gap:clamp(10px,1.1vw,16px)}
.modal-head{padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,20px)}
.modal-foot{padding:clamp(11px,1.3vw,16px) clamp(14px,1.6vw,20px)}
@media(max-width:760px){
  .modal-back{padding:0;align-items:flex-end}
  .modal,.modal.wide{max-width:100%;border-radius:16px 18px 0 0;max-height:94dvh}
  .modal.wide{height:94dvh}                       /* длинные окна — почти во весь экран */
  .modal-body{padding:12px 15px}
  .rz-2,.rz-3{grid-template-columns:1fr}
  .rz-head{flex-wrap:wrap}
  .rz-upd{width:100%}
  .shop-actions .hint{display:none}
  .shop-actions .tab-tools{margin-left:0}
}
@media(max-width:420px){
  .modal,.modal.wide{max-height:100dvh;height:100dvh;border-radius:0}
  .modal-head{border-radius:0}
}
/* сетки карточек: число колонок подстраивается под ширину, выбор вида не теряется */
@media(max-width:1200px){ .grid.v4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:980px){ .grid.v3,.grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .grid.v2,.grid.v3,.grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* иконки в заголовках резюме — маленькие, как в подписях */
.rz-block h4 svg,.rz-sec h4 svg{width:14px;height:14px;flex:none}
.rz-block h4,.rz-sec h4{line-height:1.2}
/* резюме читается лучше в узкой колонке */
.modal.rz-win{max-width:min(760px,100%)}
@media(max-width:760px){ .modal.rz-win{max-width:100%} }

/* резюме: контакты автора и подсказка о переписке */
.rz-contacts{display:flex;flex-wrap:wrap;gap:8px}
.rz-contact{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:6px 10px;font-size:13px;color:var(--text);text-decoration:none;transition:.15s}
.rz-contact:hover{border-color:var(--hover-line-2);background:var(--card-2)}
.rz-contact svg{width:16px;height:16px;color:var(--muted);flex:none}
.rz-note{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:13px;
  background:var(--surface);border:1px dashed var(--line-2);border-radius:12px;padding:8px 11px;line-height:1.4}
.rz-note svg{width:16px;height:16px;flex:none}
/* подвал окна резюме: пиктограммы слева, основное действие справа */
.modal-foot #rzShare,.modal-foot #rzClose,.modal-foot #rzWrite{flex:none}
@media(max-width:760px){
  .modal-foot #rzWrite{flex:1 1 100%;order:3}
  .rz-contact span{display:inline}
}

/* размер иконок в кнопках: без этого отдельные пиктограммы растягиваются */
.btn svg{width:16px;height:16px;flex:none}
.btn.sm svg{width:14px;height:14px}
.icon-btn svg{flex:none}
@media(max-width:760px){
  .modal-foot .btn svg{width:16px;height:16px}
}

/* ══════════ Магазин и канал: одна строка вкладок и кнопок ══════════ */
.shop-bar,.ch-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--divider);margin:20px 0 16px;flex-wrap:nowrap}
.shop-bar .subtabs,.ch-bar .subtabs{margin:0;border-bottom:0;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shop-bar .subtabs::-webkit-scrollbar,.ch-bar .subtabs::-webkit-scrollbar{display:none}
.shop-bar .subtab,.ch-bar .subtab{white-space:nowrap;flex:none;padding-bottom:12px}
.shop-tools,.ch-tools{display:flex;align-items:center;gap:8px;flex:none;padding-bottom:8px}
.shop-tools .btn,.ch-tools .btn{white-space:nowrap}
.view-switch{flex:none}
/* на телефоне кнопки подписи уходят, остаются пиктограммы — всё в одну строку */
@media(max-width:600px){
  .shop-bar,.ch-bar{gap:8px;margin:16px 0 12px}
  .shop-bar .subtab,.ch-bar .subtab{font-size:13px;gap:6px}
  .shop-tools .btn{padding:8px 9px;font-size:13px}
  .shop-tools .btn .btn-txt,.ch-tools .btn .btn-txt{display:none}
  .ch-tools .empty{font-size:12px;text-align:right;line-height:1.3}
}

/* ══════════ Профиль: блок резюме вместо качеств ══════════ */
.pane-rz .rz-open{width:100%;justify-content:center}
.rz-open-hint{color:var(--muted);font-size:13px;margin-top:8px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-flash{animation:postFlash 2.2s ease-out}
@keyframes postFlash{0%{box-shadow:0 0 0 3px rgba(42,171,238,.55)}100%{box-shadow:0 0 0 0 rgba(42,171,238,0)}}

/* ══════════ Переслать: выбор получателя ══════════ */
.fwd{display:flex;flex-direction:column;gap:12px}
.fwd input{width:100%}
.fwd-list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.fwd-item{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);text-align:left;color:var(--text);font:inherit;transition:.15s}
.fwd-item:hover{background:var(--card-2);border-color:var(--hover-line-2)}
.fwd-item img,.fwd-item .ph{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.fwd-item span{display:flex;flex-direction:column;min-width:0}
.fwd-item em{color:var(--muted);font-style:normal;font-size:13px}
/* выбор одного из фото товара */
.ed-photos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ph-pick{padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;overflow:hidden;width:52px;height:52px}
.ph-pick:hover{border-color:var(--blue)}
.ph-pick img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════ Диалоги: современный список ══════════ */
.threads{border-radius:16px}
.threads-head{padding:12px 16px;background:var(--panel)}
.threads-head h3{font-size:15px;letter-spacing:-.01em}
.thread{gap:12px;padding:12px 14px;transition:background .15s}
.thread:hover{background:var(--card-2)}
.thread.active{background:var(--thread-on);box-shadow:inset 3px 0 0 var(--blue)}
.thread img,.thread .ph{width:46px;height:46px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.thread .t-name{font-size:14px;font-weight:600}
.thread .t-last{font-size:13px;margin-top:1px}
.thread .t-side{gap:6px;display:flex;flex-direction:column;align-items:flex-end}
.thread .t-side .unread{background:var(--blue);color:#fff;font-weight:700;font-size:11px;min-width:19px;height:19px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 8px rgba(42,171,238,.4)}
.msg-wrap{gap:16px}
@media(max-width:700px){
  .thread{gap:12px;padding:12px 12px}
  .thread img,.thread .ph{width:42px;height:42px}
}

/* ══════════ Профиль: информация и вкладки выше ══════════ */
.cover{height:clamp(128px,16vw,196px)}
.panes{margin-top:6px;gap:6px 22px}
.pane{margin-top:16px}
.lbl{margin-bottom:6px}
.pane .bio{font-size:14px;line-height:1.45}
.pane .loc{font-size:14px}
@media(max-width:600px){
  .cover{height:118px}
  .panes{grid-template-columns:1fr}
  .pane{margin-top:16px}
}

/* на телефоне подписи кнопок магазина и канала скрываются — все вкладки остаются в одной строке */
@media(max-width:700px){
  .shop-tools .btxt,.ch-tools .btxt{display:none}
  .shop-tools .btn,.ch-tools .btn{padding:8px 9px}
  .shop-bar .subtab,.ch-bar .subtab{font-size:13px;gap:6px}
  .shop-bar .subtab .count,.ch-bar .subtab .count{font-size:11px}
}

/* ══════════ Диалоги: удаление по пиктограмме, без свайпа ══════════ */
.thread-row{position:relative}
.thread .t-side{padding-right:30px}
.thread-del{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--muted-2);transition:.15s;padding:0}
.thread-del svg{width:16px;height:16px}
.thread-del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.45);background:var(--card)}
.thread-actions{display:none}

/* ══════════ Магазин: переключатель вида в одной строке с кнопкой ══════════ */
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.shop-row .view-switch{padding:2px}
.shop-row .view-switch button{padding:6px 9px}
.shop-tools .btn{padding:8px 10px}
/* резюме — кнопка в строке с надписью «Информация» */
.pane .lbl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pane .lbl-row .lbl{margin-bottom:0}
.rz-open{flex:none;padding:6px 10px;font-size:13px}
@media(max-width:600px){
  .pane .lbl-row{flex-wrap:wrap}
  .rz-open{width:100%;justify-content:center}
}

/* кнопка резюме — строго в строке с надписью «Информация» */
.pane .lbl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin-bottom:8px}
.pane .lbl-row .lbl{margin:0}
.rz-inline{flex:none;padding:6px 10px;font-size:13px;white-space:nowrap;max-width:none}
@media(max-width:600px){
  .pane .lbl-row{flex-wrap:wrap}
  .rz-inline{width:100%;justify-content:center}
}
/* пиктограмма удаления диалога — заметная, в своей колонке */
.thread .t-side{padding-right:34px}
.thread-del{width:32px;height:32px;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.thread-del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.5);background:var(--card-2)}

/* ─── строки диалогов: время и пиктограмма удаления не перекрываются ─── */
.thread-row{display:flex;align-items:center;position:relative}
.thread-row .thread{flex:1;min-width:0;border-bottom:0}
.threads .thread-row{border-bottom:1px solid var(--divider-2)}
.threads .thread-row:last-child{border-bottom:0}
.thread-row .t-side{padding-right:0;margin-left:8px}
.thread-del{position:static;transform:none;flex:none;align-self:center;order:9;
  width:32px;height:32px;margin:0 8px 0 2px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;color:var(--muted-2);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.thread-del svg{width:16px;height:16px}
.thread-del:hover{color:var(--danger-text);border-color:rgba(242,85,90,.5);background:var(--card-2)}

/* ─── кнопки шапки: один размер, один стиль, равные интервалы ─── */
.topbar-right{gap:12px}
.msg-box{gap:12px}
.theme-btn,.msg-btn{width:34px;height:34px;border-radius:10px}
.theme-btn svg,.msg-btn svg{width:16px;height:16px}

/* ─── аватар профиля на компьютере: больше и выше ─── */
@media(min-width:701px){
  .head-wrap{--ava:132px}.avatar{border-radius:24px;font-size:44px;border-width:5px}
  /* отступ зависит от ширины: на широких экранах поднимаем сильнее,
     на узких — не даём аватарке зайти под верхнюю панель (её высота 54px) */
  .head-wrap{--push:clamp(28px,calc(16vw - 100px),96px);margin-top:calc(-1*var(--push))}
  .head{padding-top:clamp(40px,calc(16vw - 90px),106px)}
}

/* ─── вид карточек: 6 и 8 в ряд ─── */
.grid.v6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid.v8{grid-template-columns:repeat(8,minmax(0,1fr))}
.grid.v6 .thumb,.grid.v8 .thumb{aspect-ratio:1/1}
.grid.v6 .card .body,.grid.v8 .card .body{padding:8px 8px 8px;gap:4px}
.grid.v6 .card h3,.grid.v8 .card h3{font-size:13px;-webkit-line-clamp:2}
.grid.v6 .card .desc,.grid.v8 .card .desc{display:none}
.grid.v6 .price,.grid.v8 .price{font-size:13px}
.grid.v6 .mk-chip,.grid.v8 .mk-chip{display:none}
.grid.v6 .card-admin .icon-btn,.grid.v8 .card-admin .icon-btn{width:26px;height:26px}
@media(max-width:1500px){.grid.v8{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1240px){.grid.v8{grid-template-columns:repeat(5,minmax(0,1fr))}.grid.v6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.grid.v6,.grid.v8{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.grid.v6,.grid.v8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.v6 .card .desc,.grid.v8 .card .desc{display:-webkit-box;-webkit-line-clamp:2;font-size:12px}}

/* ─── список карточек: строки уже и ниже ─── */
.grid.mode-list{gap:8px}
.grid.mode-list .thumb{width:clamp(84px,11%,150px);min-height:92px}
.grid.mode-list .card .body{padding:8px 12px;gap:4px}
.grid.mode-list .card h3{font-size:16px;-webkit-line-clamp:2}
.grid.mode-list .card .desc{-webkit-line-clamp:2;font-size:13px}
.grid.mode-list .card-admin .icon-btn{width:28px;height:28px}

@media(max-width:700px){
  .thread-del{width:30px;height:30px;margin:0 4px 0 0}
  .thread-row .t-side{margin-left:6px}
  .topbar-right{gap:8px}
  .msg-box{gap:8px}
  .theme-btn,.msg-btn{width:32px;height:32px;border-radius:10px}
  .theme-btn svg,.msg-btn svg{width:16px;height:16px}
}

/* список карточек: строки заметно ниже (перебиваем прежнее правило большей специфичностью) */
.grid.mode-list .card .thumb{width:clamp(88px,9%,132px);aspect-ratio:1/1;align-self:center;margin:8px 0 8px 8px;border-radius:10px}
.grid.mode-list .card .body{padding:8px 10px;gap:2px}
.grid.mode-list .card h3{font-size:15px;margin:0;-webkit-line-clamp:1}
.grid.mode-list .card .desc{-webkit-line-clamp:1;font-size:13px;margin:0}
.grid.mode-list .price{font-size:15px}
.grid.mode-list .card-admin{gap:6px}
.grid.mode-list .card-admin .icon-btn{width:28px;height:28px}
@media(max-width:900px){
  .grid.mode-list .card .thumb{width:clamp(84px,20%,150px)}
  .grid.mode-list .card h3{-webkit-line-clamp:2}
}

/* ─── все виды карточек — сетка (список убран); плитка квадратная ─── */
.grid.v2 .thumb,.grid.v6 .thumb,.grid.v8 .thumb{aspect-ratio:1/1}
.grid.v2{gap:16px}
.grid.v6,.grid.v8{gap:12px}
.grid.v2 .card .desc{-webkit-line-clamp:2}
@media(max-width:700px){
  .grid.v2,.grid.v6,.grid.v8{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.v2 .card h3{font-size:13px}
  .grid.v2 .price{font-size:15px}
}

/* на телефоне виды тоже различаются: 2 / 3 / 4 плитки в ряд */
@media(max-width:700px){
  .grid.v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.v6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.v8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid.v6 .card h3,.grid.v8 .card h3{font-size:12px;-webkit-line-clamp:2}
  .grid.v6 .price,.grid.v8 .price{font-size:13px}
  .grid.v6 .card .body,.grid.v8 .card .body{padding:6px 6px 7px}
  .grid.v8 .card-admin .icon-btn{width:24px;height:24px}
}

/* кнопка «Резюме» — сразу после слова «Информация», жирная, в одну строку (в т.ч. на телефоне) */
.pane .lbl-row{justify-content:flex-start;gap:12px;flex-wrap:nowrap;align-items:center}
.rz-inline{flex:none;width:auto;white-space:nowrap;font-weight:700;padding:6px 12px;font-size:13px}
.rz-inline svg{width:14px;height:14px}
@media(max-width:600px){
  .pane .lbl-row{flex-wrap:nowrap;gap:8px}
  .rz-inline{width:auto;justify-content:flex-start;padding:4px 10px;font-size:13px}
}
/* поиск: слово «Поиск» не обрезается — значок и отступы компактнее */
.search-mini{gap:8px;padding:0 8px}
.search-mini svg{width:14px;height:14px}
@media(max-width:700px){
  .search-mini{gap:6px;padding:0 6px}
  .search-mini svg{width:14px;height:14px}
  .search-mini input{font-size:13px}
}

/* мобильный поиск: ещё компактнее — слово «Поиск» целиком */
@media(max-width:700px){
  .search-mini{gap:4px;padding:0 5px}
  .search-mini svg{width:14px;height:14px}
  .search-mini input{font-size:12px}
}

/* ─── три вида карточек на всех устройствах: список | сетка средняя | сетка мелкая ─── */
.grid.v4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid.v4 .thumb{aspect-ratio:1/1}
.grid.v4 .card .body{padding:8px 10px 10px;gap:6px}
.grid.v4 .card h3{font-size:14px;-webkit-line-clamp:2}
.grid.v4 .card .desc{-webkit-line-clamp:2;font-size:13px}
.grid.v4 .price{font-size:15px}

/* мелкая сетка (8 в ряд) — компактнее */
.grid.v8{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.grid.v8 .card h3{font-size:12px}
.grid.v8 .price{font-size:13px}

/* планшет */
@media(max-width:1240px){
  .grid.v4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .grid.v4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.v8{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* телефон */
@media(max-width:700px){
  .grid.v4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.v8{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .grid.v4 .card h3{font-size:13px}
  .grid.v8 .card h3{font-size:12px;-webkit-line-clamp:2}
  .grid.v8 .card .body{padding:6px 6px 7px}
  .grid.v8 .price{font-size:13px}
  .grid.v8 .card-admin .icon-btn{width:24px;height:24px}
}
/* список на телефоне — остаётся строкой, миниатюра квадратная и небольшая */
@media(max-width:700px){
  .grid.mode-list{gap:8px}
  .grid.mode-list .card{flex-direction:row}
  .grid.mode-list .card .thumb{width:clamp(76px,22%,118px);aspect-ratio:1/1;margin:8px 0 7px 7px;border-radius:10px}
  .grid.mode-list .card .body{padding:8px 10px}
  .grid.mode-list .card h3{font-size:14px;-webkit-line-clamp:2;margin:0}
  .grid.mode-list .card .desc{-webkit-line-clamp:2;font-size:12px;margin:0}
  .grid.mode-list .price{font-size:15px}
}

/* ─── итоговая лестница видов (последний блок — приоритет у него) ─── */
.grid.v4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.v8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1500px){ .grid.v8{grid-template-columns:repeat(7,minmax(0,1fr))} }
@media(max-width:1240px){ .grid.v4{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.v8{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media(max-width:980px){ .grid.v8{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(max-width:820px){ .grid.v8{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(max-width:700px){ .grid.v4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.v8{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:900px){ .grid.mode-list .card .thumb{width:clamp(80px,15%,120px)} }

/* кнопка «Резюме»: края жирнее (все устройства) */
.btn.rz-inline{border:2px solid var(--muted-2);font-weight:700}
.btn.rz-inline:hover{border-color:var(--text);color:var(--text)}
.btn.rz-inline svg{width:14px;height:14px}

/* предупреждение о ссылке на сторонний сайт в переписке */
.b-warn{display:block;margin-top:6px;padding:6px 9px;border-radius:10px;background:rgba(245,184,61,.12);
  border:1px solid rgba(245,184,61,.42);color:#ffe0a8;font-size:12px;line-height:1.35;max-width:340px}

/* ─── окно «Заработок»: доля пользователя с переходов ─── */
.earn{display:flex;flex-direction:column;gap:16px}
.earn-split{display:flex;gap:12px;align-items:flex-start;padding:12px 12px;border-radius:12px;
  background:rgba(42,171,238,.1);border:1px solid rgba(42,171,238,.35);font-size:13px;line-height:1.45}
.earn-split svg{width:20px;height:20px;flex:none;color:var(--blue)}
.earn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px}
.earn-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 11px}
.earn-card .k{color:var(--muted);font-size:12px}
.earn-card .v{font-size:18px;font-weight:800;margin-top:4px}
.earn-card.ok{border-color:rgba(62,207,142,.45);background:rgba(62,207,142,.08)}
.earn h4{margin:6px 0 0;font-size:14px}
.earn-note{padding:12px 11px;border-radius:12px;background:rgba(245,184,61,.1);
  border:1px solid rgba(245,184,61,.38);font-size:13px;line-height:1.45;color:#ffe0a8}
.earn-list{display:flex;flex-direction:column;gap:6px}
.earn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);font-size:13px}
.earn-when{color:var(--muted-2);font-size:12px;min-width:104px}
.earn-when2{font-weight:700}
.earn-what{flex:1 1 150px;min-width:0}
.earn-sum{font-weight:700;white-space:nowrap;text-align:right}
.earn-sum em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
.earn .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid var(--line-2);color:var(--muted)}
.earn .pill.ok{border-color:rgba(62,207,142,.5);color:#8ef0c4;background:rgba(62,207,142,.1)}
.earn .help{margin:0;color:var(--muted);font-size:13px}
@media(max-width:600px){
  .earn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .earn-when{min-width:0}
  .earn-what{flex:2 1 100%}
}

/* ─── вход через Telegram: официальный виджет ─── */
.tg-widget-box{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface)}
.tg-widget{display:flex;justify-content:center;min-height:44px;align-items:center}
.tg-widget-box .help{color:var(--muted);font-size:12px;text-align:center}

/* имя собеседника в переписке — ссылка на его профиль */
.chat-head .chat-partner{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;text-decoration:none;
  color:inherit;border-radius:12px;padding:4px 7px;margin:-3px -7px;transition:background .15s}
.chat-head .chat-partner:hover{background:var(--card-2)}
.chat-head .chat-partner:hover .who{color:var(--blue)}
.chat-head .chat-partner .who{min-width:0}

/* Резюме как документ PDF: лист A4, водяные знаки бренда, печать */
.rzpdf-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.rzpdf-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card);flex:none}
.rzpdf-bar-title{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rzpdf-stage{flex:1;overflow:auto;padding:20px;display:flex;justify-content:center;background:#0e1116}
.rzpdf-hint{padding:8px 16px 12px;color:var(--muted);font-size:13px;text-align:center;flex:none}
.rzpdf-sheet{position:relative;width:210mm;min-height:297mm;background:#fff;color:#12161c;box-shadow:0 12px 44px rgba(0,0,0,.5);overflow:hidden}
.rzpdf-inner{position:relative;z-index:1;padding:16mm 14mm;display:flex;flex-direction:column;gap:16px;min-height:297mm;box-sizing:border-box}
.rzpdf-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid #12161c;padding-bottom:8px}
.rzpdf-logo{width:26px;height:26px}
.rzpdf-brand{flex:1;display:flex;flex-direction:column;line-height:1.15}
.rzpdf-brand b{font-size:17px;letter-spacing:.16em}
.rzpdf-brand span{font-size:12px;color:#5a6472}
.rzpdf-date{font-size:12px;color:#5a6472}
.rzpdf-who{display:flex;gap:12px;align-items:center}
.rzpdf-who img,.rzpdf-who .ph{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.rzpdf-who h1{margin:0;font-size:20px}
.rzpdf-pos{color:#1b64c8;font-size:13px;margin-top:2px}
.rzpdf-uname{color:#5a6472;font-size:12px;margin-top:2px}
.rzpdf-block h4{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5a6472}
.rzpdf-block p{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap}
.rzpdf-block p.empty{color:#98a2b0}
.rzpdf-tags{display:flex;flex-wrap:wrap;gap:6px}
.rzpdf-tags span{border:1px solid #cfd6df;border-radius:8px;padding:4px 8px;font-size:12px}
.rzpdf-contacts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.rzpdf-foot{margin-top:auto;border-top:1px solid #cfd6df;padding-top:8px;font-size:11px;color:#5a6472}
.rzpdf-wm{position:absolute;inset:-12% -12%;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 18px;
  transform:rotate(-24deg);pointer-events:none;opacity:.075}
.rzpdf-wm-cell{display:flex;align-items:center;gap:8px;justify-content:center;font-size:33px;font-weight:800;letter-spacing:.14em;color:#0b0d10}
.rzpdf-wm-cell img{width:30px;height:30px}
@media(max-width:900px){ .rzpdf-sheet{width:100%;min-height:0} .rzpdf-inner{min-height:0;padding:20px 18px} }
@media print{
  @page{size:A4;margin:10mm}
  body>*{display:none!important}
  body>#rzPdf{display:block!important;position:static;background:#fff;inset:auto;height:auto}
  #rzPdf .rzpdf-bar,#rzPdf .rzpdf-hint{display:none!important}
  #rzPdf .rzpdf-stage{display:block;overflow:visible;padding:0;background:#fff}
  #rzPdf .rzpdf-sheet{width:auto;min-height:0;box-shadow:none}
  #rzPdf .rzpdf-inner{min-height:0}
}

/* кликабельные изображения: записи, комментарии, предпросмотр */
.avatar[data-open-img]{cursor:zoom-in}
.avatar[data-open-img] img{cursor:zoom-in}
.post-photo{margin:12px 14px 8px;aspect-ratio:16/9;max-width:min(100%,400px);max-height:225px;overflow:hidden;border-radius:12px;background:var(--card-2);cursor:zoom-in}
.post-photo img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.c-photo{display:block;align-self:flex-start;flex:none;width:186px;height:116px;object-fit:cover;border-radius:10px;margin:6px 0 3px;cursor:zoom-in;border:1px solid var(--line)}
.c-photo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.c-photo-prev{max-width:96px;max-height:72px;border-radius:8px;cursor:zoom-in;border:1px solid var(--line)}
.photo-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.photo-prev{position:relative;display:inline-block;margin-top:6px}
.photo-prev img{max-width:220px;max-height:180px;border-radius:10px;display:block;cursor:zoom-in;border:1px solid var(--line)}
.photo-prev .icon-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.62);color:#fff}


/* картинка в комментарии: правило .comment img задаёт размер аватара, поэтому уточняем */
.comment .c-photo, .comment img.c-photo{width:auto;height:auto;min-width:140px;max-width:240px;max-height:220px;
  align-self:flex-start;border-radius:10px;cursor:zoom-in;margin:6px 0 4px;object-fit:contain}

/* правка комментария */
.c-edited{color:var(--muted-2);font-size:12px;margin-left:6px}
.c-photo-btn{width:34px;height:34px;flex:none}

/* окно изображения: компактно, без пустого заголовка */
.modal.imgwin .modal-body{padding:12px 12px 0;gap:8px}
.modal.imgwin .img-view{padding:0}
.modal.imgwin .img-view img{max-height:62vh;border-radius:10px}
.modal.imgwin .modal-foot{padding:8px 12px 10px;border-top:0}
/* подборка товаров под изображением */
.recs{display:flex;flex-direction:column;gap:8px;padding:2px 0 6px}
.recs[hidden]{display:none}
.recs-head{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 2px}
.recs-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity}
.recs-row::-webkit-scrollbar{height:6px}
.recs-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.rec{position:relative;flex:0 0 150px;display:flex;flex-direction:column;background:var(--card-2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;scroll-snap-align:start;transition:border-color .15s,transform .15s}
.rec:hover{border-color:var(--hover-line-2);transform:translateY(-1px)}
.rec img{width:100%;height:104px;object-fit:cover;display:block;background:var(--field)}
.rec-tag{position:absolute;top:6px;left:6px;background:rgba(10,12,16,.78);border:1px solid var(--line);
  border-radius:8px;padding:2px 6px;font-size:11px;color:var(--strong);backdrop-filter:blur(3px)}
.rec-body{display:flex;flex-direction:column;gap:4px;padding:8px 9px 9px}
.rec-title{font-size:13px;line-height:1.35;max-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rec-price{font-size:13px;font-weight:600;color:var(--strong);margin-top:auto}
@media(max-width:760px){ .rec{flex:0 0 132px} .rec img{height:92px} .recs-row{gap:8px} }

/* действия под комментарием: картинка и Отправить в один ряд с промежутком */
.comment-form .c-actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.comment-form .c-actions .c-photo-row{margin-right:auto}
.comment-form .c-actions > .btn.solid{margin-left:auto;flex:none;order:2}
.comment-form .c-actions > .c-photo-row{order:1}
.c-photo-row{display:flex;align-items:center;gap:8px}
.comment-form textarea{margin-top:4px}
@media(max-width:760px){
  /* компактнее диалоговые окна на телефоне, особенно снизу */
  .modal-body{padding:16px 15px;gap:12px}
  .modal-foot{padding:12px 15px calc(9px + env(safe-area-inset-bottom));gap:8px}
  .modal-foot .btn{min-height:38px}
  .modal-head{padding:12px 12px}
  .modal-head h2{font-size:15px}
  .comment{padding:2px 0}
  .comments{padding:6px 10px 7px}
  .post .txt{padding:8px 11px 6px}
  .post .meta{padding:6px 11px}
}

.chat-note{flex:none}
.chat-note.off{opacity:.5}

/* мобильная версия: кнопка «Поделиться» на карточке товара — в правом верхнем углу, поверх фото */
@media(max-width:760px){
  .card{position:relative}
  .card .price-row .icon-btn.share{
    position:absolute;top:6px;right:6px;z-index:3;width:32px;height:32px;
    background:rgba(10,12,16,.72);border-color:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }
  .card .price-row{gap:0}
}

.c-author{color:inherit;text-decoration:none}
.c-author:hover b{color:var(--blue)}

.rzpdf-send{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;font-size:15px;min-height:44px}
.rzpdf-send svg{width:20px;height:20px}
.rzpdf-send:disabled{opacity:.6}

/* Малые экраны (iPhone 8/SE/10–17, компактные Android): убираем обрезку и налезания */
@media (max-width:400px){
  .head h1{font-size:20px;overflow-wrap:anywhere}
  .head-actions{gap:6px}
  .head-actions .btn{padding:8px 10px;font-size:13px}
  .segment button{padding:8px 8px;font-size:13px}
  .subtabs .subtab{padding:6px 8px;font-size:13px}
  .shop-bar,.shop-row{gap:6px;flex-wrap:wrap}
  .card-compact .body{padding:8px 8px 8px}
  .card-compact h3{font-size:13px}
  .card-compact .price{font-size:15px}
  .post .txt{font-size:14px}
  .comment .c-text{font-size:13px}
  .modal-head{padding:8px 11px}
  .modal-head h2{font-size:15px}
  .modal-body{padding:12px 12px;gap:12px}
  .rzpdf-bar{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .rzpdf-bar-title{width:100%;font-size:13px}
  .rzpdf-send{flex:1;justify-content:center}
  .chat-head{gap:8px}
  .chat-head .who{min-width:0}
  .chat-head .who div,.chat-head .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bio,.loc,.note-text,.rec-title{overflow-wrap:anywhere}
  .comments,.comment-form{padding-left:12px;padding-right:12px}
  img,canvas,video{max-width:100%;height:auto}
}
@media (max-width:340px){
  .grid.v8{grid-template-columns:repeat(2,1fr)}
  .head h1{font-size:18px}
  .segment button{font-size:12px;padding:8px 6px}
}

/* Подгонка под реальные разрешения телефонов.
   Ширины экранов iPhone в CSS-точках: 320, 375, 390, 393, 402, 414, 428, 430, 440;
   популярные Android: 360, 384, 393, 412; планшеты 768 и 834.
   Поэтому вместо одного порога до 400 используем плавные размеры и пороги до 560. */
@media (max-width:560px){
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;width:100%}
  .stats .s{min-width:0}
  .stats .v{font-size:clamp(14px,4.4vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stats .k{font-size:clamp(10.5px,2.9vw,12.5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page{padding-left:clamp(10px,3vw,20px);padding-right:clamp(10px,3vw,20px)}
  .head h1{font-size:clamp(19px,5.6vw,26px);overflow-wrap:anywhere}
  .uname{font-size:clamp(12px,3.4vw,14px)}
  .head-actions{gap:6px}
  .head-actions .btn{padding:8px 10px;font-size:clamp(12px,3.3vw,13px)}
  .segment button{font-size:clamp(12px,3.5vw,14px);padding:8px 6px}
  .subtabs .subtab{font-size:clamp(11.5px,3.2vw,13px);padding:6px 8px}
  .card-compact h3{font-size:clamp(12px,3.6vw,14px)}
  .card-compact .price{font-size:clamp(13px,3.9vw,15px)}
  .post .txt{font-size:clamp(13.4px,3.8vw,14.5px)}
  .comment .c-text{font-size:clamp(12.5px,3.5vw,13.7px)}
  .modal-head h2{font-size:clamp(14px,4vw,16px)}
  .rzpdf-bar{flex-wrap:wrap;gap:6px}
  .rzpdf-bar-title{width:100%}
  .rzpdf-send{flex:1;justify-content:center}
  .chat-head{gap:8px}
  .chat-head .who{min-width:0}
  .chat-head .who div,.chat-head .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bio,.loc,.c-text,.rec-title{overflow-wrap:anywhere}
  img,canvas,video{max-width:100%;height:auto}
  .grid.v8,.grid.v4{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
@media (max-width:340px){
  .stats{gap:8px 6px}
  .grid.v8,.grid.v4{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
}
/* Планшеты (iPad 768 и 834): средняя сетка вместо мелкой */
@media (min-width:768px) and (max-width:1024px){
  .grid.v8{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .stats{gap:clamp(14px,2.4vw,26px)}
}

/* Телефоны: аватарка чуть больше (было 70 точек при фоне 150) */
@media (max-width:760px){
  .head-wrap{--ava:clamp(84px,24vw,104px)}
  .head-wrap .avatar{left:8px;border-radius:20px}
}

/* ═══ Оптимизация под iPhone всех моделей, iPad и популярные Android ═══
   Ширины: iPhone 320/375/390/393/402/414/428/430/440, Android 360/384/393/412,
   iPad 768/810/820/834/1024. */

/* iPad: удобная ширина колонок, крупнее карточки и обложка */
@media (min-width:768px) and (max-width:1024px){
  .view,.page{max-width:900px;margin-left:auto;margin-right:auto}
  .modal{max-width:720px}
  .chat,.chat-wrap,.messages{max-width:760px;margin-left:auto;margin-right:auto}
  .grid.v8{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .head-wrap{--cover-h:190px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:clamp(14px,2.4vw,26px)}
  .card-compact{min-height:190px}
}

/* Телефоны: поля ввода, размеры нажатий, окна, диалоги, переписка */
@media (max-width:560px){
  /* iOS не приближает страницу при фокусе, если шрифт в поле 16 точек */
  input,select,textarea{font-size:16px}
  /* удобные для пальца нажатия (рекомендация Apple — от 40 точек) */
  .btn,.segment button,.subtabs .subtab,.tab{min-height:40px}
  /* окна и диалоги: снизу, с прокруткой и учётом «бровки» экрана */
  .modal{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;margin:auto 0 0}
  .modal-head{padding-top:calc(10px + env(safe-area-inset-top))}
  .modal-body{max-height:calc(92vh - 130px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* переписка: высота по реальному экрану (учёт клавиатуры), доступная прокрутка */
  .chat,.chat-wrap,.messages{height:calc(100dvh - 104px);max-height:none}
  .chat-body,.messages-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .composer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  /* вырезы и скругления экрана */
  .topbar{padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
  .page{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .menu{max-height:70vh;overflow-y:auto}
  .lightbox img{max-height:86dvh}
}

/* Мобильные устройства: экран больше не «прыгает» и не зумится при вводе текста.
   Причина — iOS и часть Android приближают страницу при фокусе на поле, если шрифт
   в поле меньше 16 точек. Ставим 16 для всех полей ввода на телефонах, включая поиск. */
@media (max-width:760px){
  input,textarea,select,
  .search-mini input,
  .composer input,.composer textarea,
  [contenteditable="true"]{font-size:16px !important}
  /* поля ввода не должны тянуть страницу вверх при фокусе */
  .search-mini,.composer{position:relative}
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
}

/* Шапка профиля: «Редактировать» в одну строку с именем, справа; фон и «Поделиться» — под ней */
.head-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-line h1{margin:0 0 2px}
.head-line .btn{margin-left:auto;flex:none;white-space:nowrap}
.head-sub{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.head-actions:empty{display:none}
@media (max-width:560px){
  .head-line{gap:8px}
  .head-line .btn{padding:8px 10px;font-size:13px}
  .head-sub{margin-top:6px}
}

/* Уточнение шапки профиля: кнопка «Редактировать» строго справа, фон и «Поделиться» — над статистикой */
.head-line{width:100%}
.head-line .btn{margin-left:auto;flex:none;white-space:nowrap}
.head-sub{display:flex;justify-content:flex-end;gap:8px;margin:6px 0 8px}
.head-actions:empty{display:none}
/* освободившееся место: убираем лишние отступы, блок кнопок владельца больше не тянет высоту */
.head .stats{margin-top:6px}
.head .uname{margin:0 0 2px}
@media (max-width:560px){
  .head-sub{margin:4px 0 6px}
  .head-sub .btn{padding:8px 10px}
  .head-line .btn{padding:8px 10px;font-size:13px}
}

/* Шапка профиля: блок с именем занимает всю доступную ширину,
   поэтому «Редактировать» прижимается к самому правому краю шапки */
.head > div:first-child{flex:1 1 auto;min-width:0}

/* Шапка профиля: кнопки ещё правее и выше */
.head-wrap{padding:0 2px}
.head-line{width:100%}
.head-line .btn{margin-left:auto;margin-right:0}
.head-sub{display:flex;justify-content:flex-end;gap:6px;margin:2px 0 2px;width:100%}
.head .stats{margin-top:4px}
@media (max-width:560px){
  .head-sub{margin:2px 0 2px;gap:6px}
  .head-wrap{padding:0}
}

/* Шапка профиля: кнопки у самого правого края, «фон/поделиться» чуть ниже, @username под именем */
.head-wrap{padding:0}
.head-line{width:100%}
.head-line .btn{margin-left:auto;margin-right:-4px;flex:none;white-space:nowrap}
.head .uname{margin:0 0 2px}
.head-sub{display:flex;justify-content:flex-end;gap:6px;margin:8px -4px 4px 0;width:100%}
.head .stats{margin-top:4px}
@media (max-width:560px){
  .head-wrap{padding:0}
  .head-line .btn{margin-right:-2px;padding:8px 10px;font-size:13px}
  .head-sub{margin:6px -2px 4px 0;gap:6px}
}

/* Кнопки шапки профиля — вплотную к правому краю */
.head-line .btn{margin-right:-10px}
.head-sub{margin:12px -10px 4px 0}
@media (max-width:560px){
  .head-line .btn{margin-right:-6px}
  .head-sub{margin:8px -6px 4px 0}
}

/* Телефоны: кнопки шапки ещё правее; «Вкладка» в один ряд после «Реферал» */
@media (max-width:560px){
  .head-line .btn{margin-right:-10px}
  .head-sub{margin:8px -10px 4px 0}
  /* ряд вкладок магазина: вкладки и кнопка «Вкладка» в одну строку */
  .shop-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow:hidden}
  .shop-bar .subtabs{flex:1 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap;gap:12px}
  .shop-actions{flex:none;margin-left:0}
  .shop-actions .tab-tools{margin-left:0;flex:none}
  .shop-actions .tab-tools .btn{padding:6px 9px}
  .shop-actions .tab-tools .btn .btxt{font-size:13px}
}

/* Телефоны: кнопки шапки почти вплотную к правому краю */
@media (max-width:560px){
  .head-line .btn{margin-right:-14px}
  .head-sub{margin:8px -14px 4px 0}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-12px}
  .head-sub{margin:8px -12px 4px 0}
}

/* Телефоны: кнопки шапки вплотную к правому краю экрана */
@media (max-width:560px){
  .head-line .btn{margin-right:-20px}
  .head-sub{margin:8px -20px 4px 0}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-16px}
  .head-sub{margin:8px -16px 4px 0}
}

/* Кнопки «Фон» и «Поделиться»: подняты выше и прижаты вправо */
.head-sub{margin:2px -10px 6px 0}
@media (max-width:560px){
  .head-sub{margin:2px -20px 6px 0}
}
@media (max-width:400px){
  .head-sub{margin:2px -16px 6px 0}
}

/* Кнопка «Редактировать»: меньше размером и правее */
#editProfile{padding:6px 9px;font-size:12px;line-height:1.1;border-radius:10px}
#editProfile svg{width:14px;height:14px}
.head-line .btn{margin-right:-14px}
@media (max-width:560px){
  #editProfile{padding:4px 7px;font-size:12px}
  #editProfile svg{width:14px;height:14px}
  .head-line .btn{margin-right:-24px}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-20px}
}

/* Раздельно: компьютеры — кнопка «Редактировать» крупнее и чуть левее; телефоны — меньше и правее */
@media (min-width:561px){
  #editProfile{padding:8px 14px;font-size:13px;border-radius:12px}
  #editProfile svg{width:16px;height:16px}
  .head-line .btn{margin-right:-4px}
}
@media (max-width:560px){
  #editProfile{padding:4px 6px;font-size:11px;line-height:1.05}
  #editProfile svg{width:14px;height:14px}
  .head-line .btn{margin-right:-28px}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-24px}
}

/* Телефоны: убираем заглушку «Выберите диалог слева» (когда диалог не открыт) */
@media (max-width:560px){
  .threads .msg-empty{display:none}
  .threads:has(> .msg-empty){display:none}
}

/* Телефоны: кнопки «Редактировать», «Фон», «Поделиться» — максимально вправо;
   «Резюме» — того же вида и размера, по той же вертикали справа */
@media (max-width:560px){
  .head-line .btn{margin-right:-34px}
  .head-sub{margin:0 -34px 4px 0}
  #openResume,.rz-inline{
    padding:4px 6px;font-size:11px;line-height:1.05;border-radius:10px;
    display:inline-flex;align-items:center;gap:6px;margin-left:auto;
    font-family:inherit;font-weight:600;
  }
  #openResume svg,.rz-inline svg{width:14px;height:14px}
  .lbl-row{display:flex;align-items:center;gap:8px}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-30px}
  .head-sub{margin:0 -30px 4px 0}
}

/* Телефоны: «Резюме» — тот же вид, что у «Редактировать» (с рамкой), по той же вертикали */
@media (max-width:560px){
  #openResume,.rz-inline{
    border:1px solid var(--hover-line-2, #39404f);
    background:transparent;
    color:var(--text, #e8ecf3);
  }
  #openResume:hover,.rz-inline:hover{border-color:var(--text, #e8ecf3)}
}

/* Телефоны: «Резюме» — тот же цвет, стиль и размер, что у «Редактировать» (синяя рамка);
   кнопки выровнены по правому краю */
@media (max-width:560px){
  #openResume,.rz-inline{
    border:1px solid rgba(42,171,238,.75);
    color:var(--text);
    background:transparent;
    padding:4px 6px;font-size:11px;line-height:1.05;border-radius:10px;
    display:inline-flex;align-items:center;gap:6px;
    margin-left:auto;margin-right:-34px;
    font-weight:600;
  }
  #openResume svg,.rz-inline svg{width:14px;height:14px}
  #openResume:hover,.rz-inline:hover{background:rgba(42,171,238,.12)}
  .lbl-row{display:flex;align-items:center;gap:8px}
}
@media (max-width:400px){
  #openResume,.rz-inline{margin-right:-30px}
}

/* ── Телефоны: блок «Рекомендуем» в окне изображения, надписи вкладок и единая шкала шрифтов ── */
@media (max-width:560px){
  /* 1. Рекомендуем: карточки больше не обрезаются */
  .recs{max-height:none;overflow:visible;gap:6px}
  .recs-row{overflow-x:auto;overflow-y:visible;padding:2px 2px 10px;gap:8px}
  .rec{flex:0 0 min(134px,44vw);min-height:0}
  .rec img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  .rec-body{padding:8px 8px 8px;gap:4px}
  .rec-title{font-size:13px;line-height:1.35;max-height:2.7em;-webkit-line-clamp:2}
  .rec-price{font-size:13px}
  .rec-tag{font-size:11px;padding:2px 6px}
  .recs-head{font-size:12px}

  /* 2. Надписи вкладок «Магазин» и «Канал» — крупнее */
  .segment button{font-size:15px;padding:8px 8px}
  .subtab,.shop-bar .subtab,.ch-bar .subtab{font-size:15px}

  /* 3. Единая шкала шрифтов: основной текст 14.5, заголовки 13.5, цены 15, подписи 11.5.
        Кнопки шапки профиля намеренно оставлены уменьшенными — так просил владелец. */
  .post .txt,.comment .c-text,.bio,.prd-desc,.note-list,.page-title p{font-size:15px;line-height:1.5}
  .card-compact h3,.card-compact .title{font-size:13px;line-height:1.3}
  .card-compact .price{font-size:15px}
  .uname,.t-last,.t-name,.rec-title,.hint{font-size:13px}
  .stats .k,.lbl,.recs-head,.rzpdf-bar-title{font-size:12px;letter-spacing:.05em}
  .modal-head h2{font-size:16px}
  .field label{font-size:13px}
  .btn:not(#editProfile):not(#openResume){font-size:13px}
  .empty{font-size:13px;line-height:1.5}
}

/* Телефоны: «Редактировать» и «Резюме» — ОДНО правило, поэтому размеры идентичны;
   обе сдвинуты максимально вправо */
@media (max-width:560px){
  #editProfile,#openResume,.rz-inline{
    padding:4px 6px;font-size:11px;line-height:1.05;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-weight:600;
    border:1px solid rgba(42,171,238,.75);
    background:transparent;color:var(--text);
    margin-right:-40px;
  }
  #editProfile svg,#openResume svg,.rz-inline svg{width:14px;height:14px}
  /* обе строки прижимают свою кнопку к правому краю */
  .head-line{justify-content:flex-end}
  .head-line .btn{margin-left:0;margin-right:-40px}
  .lbl-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-right:0}
  #openResume,.rz-inline{margin-left:auto}
}
@media (max-width:400px){
  #editProfile,#openResume,.rz-inline{margin-right:-36px}
  .head-line .btn{margin-right:-36px}
}

/* Исправление: имя профиля и подпись «Информация» остаются слева, вправо уходят ТОЛЬКО кнопки */
@media (max-width:560px){
  .head-line{justify-content:flex-start}
  .head-line .btn{margin-left:auto;margin-right:-40px}
  .lbl-row{justify-content:flex-start}
  #openResume,.rz-inline{margin-left:auto;margin-right:-40px}
}
@media (max-width:400px){
  .head-line .btn{margin-right:-36px}
  #openResume,.rz-inline{margin-right:-36px}
}

/* Виджет подбора фото в редакторе карточки */
.psug{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px}
.psug[hidden]{display:none}
.psug-head{font-size:12px;color:var(--muted,#93a4b8);line-height:1.35}
.psug-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px}
.psug-i{position:relative;flex:0 0 96px;height:96px;padding:0;border:2px solid var(--line,#2a3140);border-radius:10px;background:var(--field,#0d1117);cursor:pointer;overflow:hidden}
.psug-i.on{border-color:rgba(42,171,238,.95);box-shadow:0 0 0 2px rgba(42,171,238,.25)}
.psug-i img{width:100%;height:100%;object-fit:cover;display:block}
.psug-pick{position:absolute;top:4px;left:4px;background:rgba(10,12,16,.8);color:#fff;border-radius:8px;font-size:11px;padding:1px 5px}
.psug-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.psug-hint{font-size:12px;color:var(--muted,#93a4b8)}

/* Телефоны: в окне изображения «Рекомендуем» виден полностью, кнопки под ним убраны */
@media (max-width:560px){
  .modal:has(.img-view) .modal-body{max-height:none;overflow:visible;padding-bottom:6px}
  .modal:has(.img-view) .img-view img{max-height:50vh;width:auto;max-width:100%;object-fit:contain;margin:0 auto;display:block}
  .modal:has(.img-view) .recs{max-height:none;overflow:visible}
  .modal:has(.img-view) .recs-row{overflow-x:auto;overflow-y:visible;padding-bottom:12px}
  .modal:has(.img-view) .rec{flex:0 0 min(134px,44vw)}
  .modal:has(.img-view) .rec img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .modal:has(.img-view) .modal-foot{display:none}
}

/* Редактор карточки: блок фото шире и заметно выше, картинка видна целиком */
.ed-photo .prev.wide{width:100%;min-width:0;height:auto;min-height:170px;border-radius:12px}
.ed-photo .prev.wide{background-position:center;background-size:cover}
.ed-photo{display:flex;flex-direction:column;gap:12px}
.ed-photo-btns{display:flex;gap:8px;flex-wrap:wrap}
.ed-photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.ed-photos .ph-pick{flex:0 0 76px;height:76px;padding:0;border:2px solid var(--line,#2a3140);border-radius:10px;overflow:hidden;background:var(--field,#0d1117)}
.ed-photos .ph-pick img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
  .ed-photo .prev.wide{min-height:190px}
  .psug-i{flex:0 0 104px;height:104px}
}

/* Фото в карточках товаров кликабельны на всех устройствах */
.card img,.card-compact img,[data-product-card] img,.rec img,.media img,.c-photo img,.post-photo img{cursor:zoom-in}
@media (hover:none){
  .card img,.card-compact img,[data-product-card] img,.rec img{cursor:pointer}
}

/* СРОЧНО: кнопки скрываются ТОЛЬКО в окне просмотра изображения (там есть и картинка,
   и блок «Рекомендуем»). В окне товара и любых других кнопки остаются на месте. */
.modal:has(.img-view):has(.recs) .modal-foot{display:none}
.modal:has(.img-view):not(:has(.recs)) .modal-foot{display:flex}
/* Окно товара на телефонах: прокрутка содержимого и кнопки внизу */
@media (max-width:560px){
  .modal:has(.img-view):not(:has(.recs)) .modal-body{max-height:calc(92vh - 140px);overflow-y:auto}
  .modal:has(.img-view):not(:has(.recs)) .img-view img{max-height:46vh}
}

/* Кнопки «Поделиться» и «Закрыть» возвращены во все окна, включая просмотр изображения */
.modal .modal-foot{display:flex !important}
/* «Рекомендуем»: карточки не обрезаются, шрифты в норме */
.recs .rec{flex:0 0 auto;width:min(150px,46vw)}
.recs .rec img{height:auto;aspect-ratio:4/3;object-fit:cover}
.recs .rec-title{font-size:13px !important;line-height:1.35}
.recs .rec-price{font-size:13px !important}
.recs .recs-head{font-size:12px !important}
.recs-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px}
.modal:has(.img-view) .img-view img{max-height:52vh;width:auto;max-width:100%;object-fit:contain;margin:0 auto;display:block}
@media (max-width:560px){
  .modal:has(.img-view) .modal-body{max-height:calc(92vh - 150px);overflow-y:auto}
  .recs .rec{width:min(140px,44vw)}
}

/* Карусель фотографий в карточке товара */
.prd-car{position:relative}
/* Показываем только активный снимок. Важно: правило .prd-view .thumb img
   (вес 0,2,1) сильнее .prd-car .prd-shot (0,2,0) — без :not и !important все
   фото выводились одно под другим, и переключение было незаметно. */
.prd-car .prd-shot:not(.on){display:none !important}
.prd-car .prd-shot.on{display:block !important}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(10,12,16,.62);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2}
.car-nav:hover{background:rgba(10,12,16,.85)}
.car-nav.prev{left:8px}
.car-nav.next{right:8px}
.car-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center;z-index:2}
.car-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.car-dot.on{background:#fff}
@media (max-width:560px){
  .car-nav{width:32px;height:32px;font-size:18px}
  .car-nav.prev{left:6px}
  .car-nav.next{right:6px}
}

/* Карусель фотографий в записях канала: тот же вид, что в карточках товаров */
.post-photo.prd-car{position:relative;max-width:100%}
.post-photo.prd-car .prd-shot{display:none;width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:10px}
.post-photo.prd-car .prd-shot.on{display:block}
@media (max-width:560px){
  .post-photo.prd-car .prd-shot{max-height:300px}
}

/* «Рекомендуем»: на телефонах — сетка, все карточки видны целиком, ничего не обрезается.
   На планшетах и компьютерах — горизонтальная лента с прокруткой. */
.recs .rec{height:auto;min-height:0}
.recs .rec-body{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1}
.recs .rec img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.recs .rec-title{font-size:13px;line-height:1.35;max-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.recs .rec-price{font-size:13px;margin-top:auto;padding-top:4px}
@media (max-width:560px){
  .recs-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:2px 0 10px}
  .recs .rec{width:auto;flex:none}
  .modal:has(.img-view) .recs-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  .recs-row,.modal:has(.img-view) .recs-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px}
  .recs .rec{flex:0 0 138px}
}
@media (min-width:561px){
  .recs-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px}
  .recs .rec{flex:0 0 150px;scroll-snap-align:start}
}

/* ═══ ФИНАЛЬНЫЕ правила блока «Рекомендуем» в окне изображения ═══
   Перекрывают все прежние правила (в том числе из ранних выпусков), поэтому конфликты
   между лентой и сеткой исключены. Телефоны — сетка, широкие экраны — лента. */
html body .modal .recs-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;overflow:visible !important;padding:2px 0 10px !important}
html body .modal .recs .rec{width:auto !important;flex:none !important;height:auto !important;
  min-height:0 !important;overflow:visible !important;display:flex !important;flex-direction:column !important}
html body .modal .recs .rec img{width:100% !important;height:auto !important;aspect-ratio:4/3 !important;
  object-fit:cover !important;display:block !important}
html body .modal .recs .rec-body{padding:8px 9px 10px !important;overflow:visible !important;flex:1 !important}
html body .modal .recs .rec-title{font-size:13px !important;line-height:1.35 !important;max-height:none !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important}
html body .modal .recs .rec-price{font-size:13px !important;display:block !important;margin-top:6px !important;padding-top:0 !important}
html body .modal .rec-tag{font-size:11px !important;padding:2px 6px !important}
html body .modal .recs-head{font-size:12px !important;padding:0 !important}
/* окно изображения: содержимое не обрезается по высоте */
html body .modal:has(.img-view) .modal-body{max-height:none !important;overflow:visible !important}
html body .modal:has(.img-view) .img-view img{max-height:52vh !important;width:auto !important;
  max-width:100% !important;object-fit:contain !important;margin:0 auto !important;display:block !important}
@media (min-width:561px){
  html body .modal .recs-row{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;
    scroll-snap-type:x proximity !important}
  html body .modal .recs .rec{flex:0 0 150px !important;scroll-snap-align:start !important}
  html body .modal:has(.img-view) .img-view img{max-height:60vh !important}
}

/* Превью прикреплённых к записи фотографий: до 10 плиток, у каждой — убрать */
.photo-prev-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-prev-list[hidden]{display:none}
.pp-item{position:relative;width:68px;height:68px;border-radius:10px;overflow:hidden;border:1px solid var(--line,#2a3140);background:var(--field,#0d1117)}
.pp-item img{width:100%;height:100%;object-fit:cover;display:block}
.pp-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(10,12,16,.78);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pp-del:hover{background:rgba(220,60,60,.9)}
@media (max-width:560px){
  .pp-item{width:72px;height:72px}
  .pp-del{width:22px;height:22px;font-size:13px}
}

/* ═══ ОКНО ИЗОБРАЖЕНИЯ: лента карточек с горизонтальной прокруткой + ВСЕГДА видимые кнопки ═══
   Перекрывает все прежние правила, включая ранние, где кнопки скрывались. */
html body .modal .modal-foot{display:flex !important;visibility:visible !important;opacity:1 !important;
  height:auto !important;max-height:none !important;overflow:visible !important}
html body .modal .modal-foot button{display:inline-flex !important;visibility:visible !important}
html body .modal:has(.img-view) .modal-body{max-height:none !important;overflow:visible !important}
html body .modal:has(.img-view) .img-view img{max-height:46vh !important;width:auto !important;max-width:100% !important;
  object-fit:contain !important;margin:0 auto !important;display:block !important}
/* карточки «Рекомендуем» — одна строка, прокрутка вбок, ничего не обрезано */
html body .modal:has(.img-view) .recs-row{display:flex !important;flex-wrap:nowrap !important;
  overflow-x:auto !important;overflow-y:visible !important;gap:12px !important;padding:2px 2px 12px !important;
  scroll-snap-type:x proximity !important;-webkit-overflow-scrolling:touch !important}
html body .modal:has(.img-view) .recs .rec{flex:0 0 min(152px,62vw) !important;width:auto !important;
  min-height:0 !important;height:auto !important;scroll-snap-align:start !important;overflow:visible !important}
html body .modal:has(.img-view) .recs .rec img{width:100% !important;height:auto !important;
  aspect-ratio:4/3 !important;object-fit:cover !important;display:block !important}
html body .modal:has(.img-view) .recs .rec-title{font-size:13px !important;line-height:1.35 !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important;
  max-height:none !important;overflow:hidden !important}
html body .modal:has(.img-view) .recs .rec-price{font-size:13px !important;display:block !important;margin-top:6px !important}

/* записи канала в выдаче поиска */
.posts-found{display:grid;gap:12px}
.post-hit{display:block;padding:12px 14px;border:1px solid rgba(70,80,105,.45);border-radius:16px;
  background:rgba(255,255,255,.03);text-decoration:none;color:inherit}
.post-hit .ph-head{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-weight:600;font-size:14px}
.post-hit .ph-at{font-weight:400;font-size:13px;color:var(--muted)}
.post-hit .ph-img{width:100%;max-height:280px;object-fit:cover;border-radius:10px;margin:8px 0 6px}
.post-hit .ph-text{font-size:14px;line-height:1.45;margin-top:6px;white-space:pre-wrap;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

/* сохранённые поиски: чип с крестиком */
.chips .chip.held{display:inline-flex;align-items:center;gap:6px;padding-right:6px}
.chips .chip.held a{color:inherit;text-decoration:none}
.chips .chip-x{background:none;border:0;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:0 2px}
.chips .chip-x:hover{color:var(--text)}

/* ═══ ряд вкладок магазина на узких экранах: всё видно, лишнее — подсказкой ═══ */
@media (max-width:560px){
  .shop-tabs{scrollbar-width:none;-ms-overflow-style:none}
  .shop-tabs::-webkit-scrollbar{display:none}
  .shop-tabs .subtab{font-size:12px;padding:6px 7px;gap:4px;flex:0 0 auto}
  .shop-tabs .subtab .count{font-size:11px;min-width:14px;height:14px;line-height:14px;padding:0 3px}
  /* мягкая тень у правого края — намёк, что ряд можно сдвинуть */
  .shop-tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
}

/* поиск по сообщениям в окне переписки */
.chat-find{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.chat-find input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font-size:14px;outline:none}
.chat-find .cf-cnt{font-size:12px;color:var(--muted);white-space:nowrap}

/* надпись «печатает…» в шапке диалога */
.typing-note{font-size:13px;color:var(--muted);margin-left:8px}

/* закрепление диалогов: звёздочка в строке */
.thread-row{display:flex;align-items:center;gap:2px}
.thread-pin{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px}
.thread-pin.on{color:#f0b429}

/* несколько изображений в одном сообщении */
.b-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;max-width:300px}
.b-imgs .b-img{width:100%;height:110px;object-fit:cover;border-radius:8px;margin:0}

/* пометка «Переслано от» */
.b-fwd{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-style:italic}

/* действия у сообщения: кнопки удаления и пересылки в ряд, а не друг на друге.
   Раньше обе были «кружком в углу» и вставали в одну точку: на телефоне верхняя (пересылка)
   закрывала нижнюю (удаление). Теперь обе видны всегда — без опоры на наведение,
   потому что на телефоне наведения нет и кнопки пропадали. */
.bubble .b-meta{position:relative}
.bubble .b-meta .del{position:static;opacity:1!important;margin-left:6px;background:var(--card)}

/* ───── переписка на телефоне: панель диалогов выше и строки крупнее ─────
   Блок обязан быть в конце файла: ниже него нет правил для этих элементов,
   иначе более поздние правила перекрывают эти, как это уже случилось. */
@media(max-width:900px){
  .threads{max-height:68vh}
  .thread{padding:16px;gap:12px}
  .thread img,.thread .ph{width:47px;height:47px}
  .thread .t-name{font-size:16px}
  .thread .t-last{font-size:14px}
  .thread .t-side{font-size:13px}
  .threads-head h3{font-size:17px}
  .chat{height:clamp(360px,62vh,620px)}
}

/* ───── внутри переписки на телефоне: крупнее текст и кнопки ─────
   Блок обязан быть последним в файле: для этих элементов есть более ранние
   правила, и при равной точности побеждает то, что ниже. */
@media(max-width:900px){
  .bubble{font-size:16px;line-height:1.5;padding:12px 15px}
  .bubble .b-text{font-size:16px}
  .bubble .b-time{font-size:12px}
  .bubble .b-fwd{font-size:13px}
  .bubble .del{width:24px;height:24px;font-size:14px}
  .chat-head .who{font-size:16px}
  .chat-head .who span{font-size:13px}
  .chat-head .btn,.chat-head .msg-btn{font-size:13px;min-height:34px}
  .chat-head img,.chat-head .ph{width:42px;height:42px}
  .chat-form textarea{font-size:16px;min-height:44px}
  .chat-find input{font-size:15px;padding:12px 12px}
  .chat-find .btn{font-size:14px}
  .b-day span{font-size:13px}
  .chat-back{font-size:14px}
}

/* время сообщения — это .b-meta, а не .b-time: поправка после проверки */
@media(max-width:900px){
  .bubble .b-meta,.bubble .b-time{font-size:12px}
  .bubble .b-meta .b-read{font-size:13px}
}

/* ───── футер сайта на телефоне скрыт ─────
   Единственная правка из всей истории с окном чата, которая решала настоящую проблему:
   подпись сайта наползала на поле ввода при поднятой клавиатуре. Всё остальное (расчёты
   высоты, закрепление поля, окно на весь экран) отменено — оно ломало больше, чем чинило. */
@media(max-width:900px){
  .foot{display:none}
}

/* ───── сообщения прижаты ближе к краям ─────
   Свои сообщения и так справа, входящие слева (align-self), но отступ ленты 18 точек
   делал разницу малозаметной. Уменьшаем боковые отступы: свои — у правого края,
   входящие — у левого. Правило только для ленты переписки. */
.chat-body{padding-left:12px;padding-right:12px}
.bubble.me{align-self:flex-end}
.bubble.them{align-self:flex-start}

/* ───── окно диалога ровно в видимой области экрана ─────
   Замер с iPhone: видимая часть начинается с 129 точек сверху и её высота 369 (а не 844).
   Прежние расчёты брали полную высоту и ноль — поэтому поле ввода уезжало под клавиатуру.
   Скрипт кладёт настоящие значения в --chat-top и --chat-h при каждом изменении клавиатуры. */
@media(max-width:760px){
  .msg-wrap.has-thread{
    position:fixed;
    top:var(--chat-top,0px);
    left:0;right:0;
    height:var(--chat-h,100dvh);
    z-index:55;
    display:flex;
    flex-direction:column;
    margin:0;
    background:var(--bg);
    overflow:hidden;
  }
  .msg-wrap.has-thread .threads{display:none}
  .msg-wrap.has-thread .chat{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    max-height:none;
    display:flex;
    flex-direction:column;
    border:0;border-radius:0;background:transparent;
    overflow:hidden;
  }
  .msg-wrap.has-thread .chat-head{flex:none;background:var(--card);border-bottom:1px solid var(--divider)}
  .msg-wrap.has-thread .chat-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .msg-wrap.has-thread .chat-form{flex:none;margin:0;border-top:1px solid var(--divider);background:var(--card)}
}

/* ───── лента сообщений получает всю высоту за вычетом шапки и поля ввода ─────
   Замер: окно 0..873, а поле ввода стояло на 698 — 171 точка пустовала внизу, потому что
   лента не растягивалась обычным flex. Задаём высоту прямо: всё, кроме шапки (65) и поля (66).
   Так пустой полосы не будет ни с клавиатурой, ни без неё. */
@media(max-width:760px){
  .msg-wrap.has-thread .chat{display:block !important;overflow:hidden !important}
  .msg-wrap.has-thread .chat-head{height:auto !important}
  .msg-wrap.has-thread .chat-body{
    /* высота НЕ задаётся: её определяют края привязки ниже (top и bottom).
       Прежнее height:calc(100% - 131px) перебивало привязку и оставляло полосу внизу. */
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }
  .msg-wrap.has-thread .chat-form{
    position:absolute !important;
    left:0 !important;right:0 !important;bottom:0 !important;
    margin:0 !important;
    border-top:1px solid var(--divider);
    background:var(--card);
  }
  .msg-wrap.has-thread .chat{position:relative !important}
}

/* окну чата — вся высота обёртки: без этого лента недобирает высоту и снизу остаётся полоса */
@media(max-width:760px){
  .msg-wrap.has-thread .chat{display:block !important;height:100% !important}
}

/* ───── части окна диалога разложены жёстко от краёв окна ─────
   Замер: поле ввода у самого низа (полоса 0), но лента заканчивалась на 643 при окне до 873 —
   между ними пустовало 171 точка. Лента не растягивалась никаким flex. Раскладываем части
   привязкой к краям: шапка сверху, поле внизу, лента занимает всё между ними. */
@media(max-width:760px){
  .msg-wrap.has-thread .chat{
    position:absolute !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    display:block !important;
    overflow:hidden !important;
  }
  .msg-wrap.has-thread .chat-head{
    position:absolute !important;
    top:0 !important;left:0 !important;right:0 !important;
    z-index:2;
    background:var(--card);
    border-bottom:1px solid var(--divider);
  }
  .msg-wrap.has-thread .chat-body{
    position:absolute !important;
    top:65px !important;left:0 !important;right:0 !important;bottom:68px !important;
    height:auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:20px;
    box-sizing:border-box;
  }
  .msg-wrap.has-thread .chat-form{
    position:absolute !important;
    left:0 !important;right:0 !important;bottom:0 !important;
    z-index:2;
    margin:0 !important;
    border-top:1px solid var(--divider);
    background:var(--card);
    box-sizing:border-box;
  }
}

/* ───── снимаем ограничение высоты ленты ─────
   Лента получала высоту 524 при высоте окна 873 — это ровно 60% (max-height:60vh из старой
   части файла). Ограничение и было причиной пустой полосы: высоту должны задавать края
   привязки (top и bottom), а не проценты от высоты экрана. */
@media(max-width:760px){
  .msg-wrap.has-thread .chat-body{
    max-height:none !important;
    min-height:0 !important;
  }
}

/* ───── порядок в шапке профиля: единый ритм отступов ─────
   Замер показал скачущие промежутки: имя → @имя 9, @имя → цифры 46, цифры → био 73,
   далее 38 и 37. Отсюда ощущение беспорядка. Сводим всё к одному шагу: 14 точек между
   смысловыми блоками, 6 — внутри одного блока (имя и @имя). */
.head-line{margin-bottom:6px}
.head-sub{margin-top:0}
.stats{margin-top:16px;margin-bottom:0;gap:20px}
.stats .k{font-size:13px;color:var(--muted)}
.stats .v{font-size:18px}
.bio{margin-top:16px;margin-bottom:0;line-height:1.45}
.loc{margin-top:12px;margin-bottom:0}
.links{margin-top:12px;margin-bottom:0}
.info-note,.info-toggle{margin-top:12px}
/* пунктир под «Мои подписки» убираем — из-за него блок казался поломанным */
.stats .s.link{border-bottom:0}
.stats .s.link:hover .k{color:var(--blue);text-decoration:underline}
/* заголовки разделов (Информация, Связь) — одним шагом */
.sect,.sub-title,.head-sub{margin-top:16px}

/* ───── мобильный вид профиля: четыре правки по результатам замера ─────
   1) вкладки магазина вылезали за экран на 74 точки (правый край 464 при ширине 390);
   2) имя набрано случайным размером 21.84;
   3) кнопка «Редактировать» — 11 точек, слишком мелко;
   4) промежутки между блоками неровные (80, 43, 43). */
@media(max-width:760px){
  /* 1. вкладки: переносим и сжимаем, чтобы влезали целиком */
  .subtabs,.shop-tabs{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    overflow-x:visible !important;
    max-width:100% !important;
  }
  .subtabs .subtab,.shop-tabs .subtab{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    padding:8px 11px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }
  .subtabs .subtab .count,.shop-tabs .subtab .count{font-size:12px !important}
  /* 2. имя — ровный размер */
  .head h1,.head-line h1{font-size:22px !important;line-height:1.2 !important}
  /* 3. кнопка «Редактировать» — читаемая */
  .head-line .btn,#editProfile{font-size:13px !important;padding:8px 12px !important}
  /* 4. единый шаг между блоками */
  .head-line{margin-bottom:6px !important}
  .uname{margin:0 0 12px !important}
  .head-sub{margin:0 0 12px !important}
  .stats{margin:0 0 16px !important}
  .panes .pane{margin-bottom:16px !important}
  .lbl-row{margin-bottom:8px !important}
}

/* ───── шапка профиля на телефоне: кнопка «Редактировать» больше не обрезается ─────
   Имя и кнопка стояли в одной строке без переноса: при длинном имени кнопка уходила за
   правый край экрана и обрезалась. Теперь строка переносится, кнопка прижата вправо,
   имя при нехватке места сжимается с многоточием. */
@media(max-width:760px){
  .head-line{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px 10px !important;
  }
  .head-line h1{
    flex:1 1 auto !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:22px !important;
    line-height:1.2 !important;
  }
  .head-line .btn,#editProfile{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    max-width:100% !important;
  }
  /* пунктир под «Мои подписки» окончательно убираем (перебиваем старое правило) */
  .stats .s.link,.stats .s{border-bottom:0 !important;text-decoration:none !important}
  /* «Резюме» — вправо, а не по центру */
  .lbl-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important}
  .lbl-row .rz-inline{margin-left:auto !important;flex:0 0 auto !important}
  /* кнопки владельца (фон, поделиться) — под кнопкой «Редактировать», к правому краю */
  .head-sub{justify-content:flex-end !important;gap:8px !important}
}

/* ───── кнопка «Редактировать» переносится под имя ─────
   Замер: имя 216 точек + кнопка 136 = 352 при ширине строки 327 — не помещаются, но перенос
   не срабатывал, и кнопка уходила за правый край. Теперь имя занимает всю строку, а кнопка
   встаёт отдельной строкой справа — видна целиком при любой длине имени и любом экране. */
@media(max-width:760px){
  .head-line h1{flex:1 1 100% !important;max-width:100% !important}
  .head-line .btn,#editProfile{
    flex:0 0 auto !important;
    margin-left:auto !important;
    align-self:flex-end !important;
  }
  .head-line{justify-content:flex-start !important}
}

/* ───── убраны отрицательные отступы, выталкивавшие кнопки за край ─────
   В стилях стояли margin-right:-40px и -36px у кнопок «Редактировать» и «Резюме» — следы
   прежних правок «прижать кнопку правее». На узких экранах они выталкивали кнопку за
   правый край, и она обрезалась. Замер браузера подтвердил: именно отрицательный отступ
   сдвигал кнопку (при ширине 360 кнопка уходила до 373). Отрицательные отступы убраны. */
@media(max-width:760px){
  .head-line .btn,
  #editProfile,
  #openResume,
  .rz-inline,
  .head-actions .btn,
  .head-sub .btn{margin-right:0 !important;margin-left:auto !important}
  .head-line{justify-content:space-between !important}
}

/* ───── вариант 8: чистая шапка, крупный аватар, действия панелью снизу ─────
   Аватар увеличен с 70 до 100 точек (в полтора раза) и поднят над баннером.
   Имя с ником стоят рядом с аватаром, цифры — под ними, а все кнопки собраны
   в отдельную панель внизу: ничего не отвлекает от имени. */
@media(max-width:760px){
  .head-wrap{--ava:100px;--push:50px}
  .avatar{border-radius:26px;border-width:4px}
  .head{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding-top:66px !important;
  }
  .head > div:nth-child(1){
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  /* порядок: имя и ник (сразу), цифры, затем панель действий */
  .head-line{order:1 !important;margin:0 0 2px !important}
  .uname{order:2 !important;margin:0 0 14px !important}
  .stats{order:3 !important;margin:0 0 14px !important}
  .head-sub{
    order:4 !important;
    margin:0 !important;
    padding-top:12px !important;
    border-top:1px solid var(--line) !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }
  .head-actions{
    order:5 !important;
    margin:12px 0 0 !important;
    padding-top:12px !important;
    border-top:1px solid var(--line) !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }
  /* на случай, если панель одна — общая линия сверху */
  .head-sub + .head-actions{border-top:0 !important;padding-top:0 !important;margin-top:10px !important}
}

/* ───── доводка варианта 8: кнопки рядом, без разъезда ─────
   «Редактировать» лежит в разметке внутри строки с именем, поэтому стилями её не перенести
   в панель — зато можно выровнять влево и убрать отрыв. Кнопки владельца прижимаем к левому
   краю и ставим вплотную, чтобы не разъезжались по краям. */
@media(max-width:760px){
  .head-line{justify-content:flex-start !important;flex-wrap:wrap !important}
  .head-line h1{flex:1 1 auto !important}
  .head-line .btn,#editProfile{
    margin-left:0 !important;
    margin-right:0 !important;
    align-self:flex-start !important;
  }
  .head-sub{
    justify-content:flex-start !important;
    gap:8px !important;
  }
  .head-sub .btn,.head-sub a{
    margin-left:0 !important;
    margin-right:0 !important;
    flex:0 0 auto !important;
  }
  .head-actions{
    justify-content:flex-start !important;
    gap:8px !important;
  }
  .head-actions .btn{margin-left:0 !important;margin-right:0 !important;flex:0 0 auto !important}
}

/* ───── разделительные линии одной длины ─────
   Замер: панель кнопок 327, блок действий 367 — панель не растягивалась на всю ширину
   и линия выходила короче на 40 точек. Задаём обеим полную ширину. */
@media(max-width:760px){
  .head-sub,
  .head-actions,
  .lbl-row{
    width:100% !important;
    box-sizing:border-box !important;
  }
  /* на всякий случай: линия у обеих одинаковая */
  .head-sub,.head-actions{border-top:1px solid var(--line) !important}
  .head-sub + .head-actions{border-top:1px solid var(--line) !important}
}

/* ───── линии одной длины: причина была в родителе ─────
   Блок .head выстроен в строку (display:flex), поэтому левая колонка получала 327 точек,
   а правая — оставшиеся 40. Панель кнопок занимала 100% от своей УЗКОЙ колонки, отсюда
   короткая линия. Ставим родителю блочную раскладку — колонки нет, обе панели во всю ширину. */
@media(max-width:760px){
  .head{display:block !important;padding-top:66px !important}
  .head > div:first-child{display:block !important;width:100% !important}
  .head-actions{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;width:100% !important;min-width:0 !important;margin-top:10px !important}
  .head-sub,.head-actions{width:100% !important;box-sizing:border-box !important}
  /* пустая панель действий не должна отнимать ширину */
  .head-actions:empty{display:none !important}
}

/* ───── окно просмотра: листание нескольких фотографий ─────
   Стрелки и счётчик ложатся поверх снимка, точки — под ним.
   Цвет точек берём из темы, иначе на светлой они были бы не видны. */
.iv-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.iv-img{max-width:100%;max-height:68vh;border-radius:12px;display:block;margin:0 auto}
.iv-count{position:absolute;top:10px;right:12px;background:rgba(10,12,16,.72);color:#fff;
  font-size:12.5px;line-height:1;padding:5px 10px;border-radius:20px;pointer-events:none}
/* Точки листания — в обычном потоке под снимком. Класс .car-dots не берём:
   он для точек ПОВЕРХ фото (position:absolute;bottom:8px) и уводил ряд к низу экрана. */
.img-view.iv-many{display:flex;flex-direction:column;align-items:center;width:100%}
.iv-dots{display:flex;justify-content:center;gap:16px;margin-top:12px;width:auto}
/* Неактивная точка — приглушённый текст темы: на светлом фоне --line почти сливался.
   Плюс площадка нажатия 24px вокруг точки 10px — иначе пальцем не попасть. */
.iv-dots .car-dot{background:var(--muted-2);width:10px;height:10px;position:relative}
.iv-dots .car-dot.on{background:var(--text)}
.iv-dots .car-dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px}
@media(max-width:760px){
  .iv-img{max-height:56vh}
  .iv-count{top:8px;right:8px;font-size:12px}
}

/* ───── кнопка «Резюме» в панели действий чужого профиля ─────
   Правила кнопки владельца (#openResume внутри .head-sub) содержат margin-left:auto
   и отрицательные отступы — следы прежних правок «прижать правее». В панели действий
   посетителя это отрывало кнопку от «Написать»: замер показал 47px вместо 8px.
   Здесь кнопка стоит в общем ряду, как остальные. */
/* Победитель — правило владельца с margin-left:auto !important (список селекторов
   с #openResume), поэтому здесь нужен !important и большая точность селектора:
   без него кнопку отрывало от «Написать» на 47px вместо 8px. */
.head-actions #openResume{margin-left:0 !important;margin-right:0 !important}