/* Страничные стили нового дизайна. Источник: docs/redesign/ds/components.css. Подключается только на своих страницах */
/* ---------- Профиль ---------- */
.prof-head { position: relative; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
/* Обложка: пузырьки-облачка вместо ромбов (ромбы похожи на пламбоб) */
.prof-cover { height: 132px; background:
  radial-gradient(circle at 8% 70%, rgba(255,255,255,.55) 0 22px, transparent 23px),
  radial-gradient(circle at 14% 40%, rgba(255,255,255,.4) 0 12px, transparent 13px),
  radial-gradient(circle at 62% 30%, rgba(255,255,255,.45) 0 30px, transparent 31px),
  radial-gradient(circle at 67% 62%, rgba(255,255,255,.3) 0 16px, transparent 17px),
  radial-gradient(circle at 90% 50%, rgba(255,255,255,.5) 0 26px, transparent 27px),
  linear-gradient(115deg, #9FE3D8, #C8EDE5 45%, #FFD9C2); }
:root[data-theme="dark"] .prof-cover { filter: brightness(.55) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prof-cover { filter: brightness(.55) saturate(.9); } }
.prof-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; padding: 0 28px 24px; }
.prof-ava { position: relative; margin-top: -64px; }
.prof-ava .ava { box-shadow: 0 0 0 6px var(--surface); background: var(--surface); }
/* «Облачко» с настроением (mood, до 25 символов) — у аватара, как сейчас */
.prof-mood { position: absolute; left: calc(100% - 18px); top: -14px; max-width: 220px; padding: 8px 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); font-size: 14px; font-weight: var(--fw-heavy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.prof-mood::before, .prof-mood::after { content: ""; position: absolute; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); }
.prof-mood::before { width: 12px; height: 12px; left: 6px; bottom: -10px; }
.prof-mood::after { width: 7px; height: 7px; left: -2px; bottom: -18px; }
.prof-info { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; min-width: 0; }
.prof-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prof-name h1 { font-size: 28px; line-height: 1.15; font-weight: var(--fw-black); overflow-wrap: anywhere; }
.prof-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-semibold); }
.prof-meta .online { color: var(--success); font-weight: var(--fw-heavy); display: inline-flex; align-items: center; gap: 6px; }
.prof-meta .online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2FBF71; }
.prof-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.soc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 14px; font-weight: var(--fw-bold); color: var(--text); transition: background var(--dur-1); }
.soc-chip:hover { background: var(--surface-3); }
.soc-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; flex: none; }
.soc-ico .i { width: 15px; height: 15px; }
.soc-tg { background: #27A7E7; } .soc-vk { background: #0077FF; } .soc-yt { background: #E62117; } .soc-boosty { background: #F15F2C; }
.prof-actions { padding-top: 16px; display: flex; gap: 8px; align-items: flex-start; }
/* Плитка показателя (та же, что на странице мода) */
.stat { padding: 12px 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); text-align: center; }
.stat b { display: block; font-size: 19px; font-weight: var(--fw-black); line-height: 1.2; }
.stat span { font-size: 12px; color: var(--text-2); font-weight: var(--fw-semibold); }
.prof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
.prof-stats .stat { padding: 16px 10px; }
.prof-stats .stat b { font-size: 22px; }
.prof-stats .stat-ic { display: block; width: 34px; height: 34px; padding: 8px; margin: 0 auto 6px; border-radius: 50%; box-sizing: border-box; }
.tab-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 20px 0; }
.tab-tools .segmented { flex: none; }
.tab-tools .u-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.tab-tools-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-2); }
@media (max-width: 1023px) { .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .prof-cover { height: 96px; }
  .prof-body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0 16px 20px; gap: 4px; }
  .prof-ava { margin-top: -56px; } .prof-ava .ava { --s: 104px; }
  .prof-mood { left: calc(100% - 18px); top: -6px; width: max-content; max-width: calc(50vw - 66px); white-space: normal; text-align: left; line-height: 1.25; font-size: 13px; padding: 7px 12px; border-radius: 16px; }
  .prof-info { align-items: center; padding-top: 6px; }
  .prof-name { justify-content: center; } .prof-name h1 { font-size: 24px; }
  .prof-meta, .prof-social { justify-content: center; }
  .prof-actions { padding-top: 8px; }
  /* Телефон: плитки 2×2, вместо подписей — иконки (подпись остаётся для читалок и в title) */
  .prof-stats { gap: 8px; margin: 12px 0 16px; }
  .prof-stats .stat { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; }
  .prof-stats .stat-ic { width: 34px; height: 34px; margin: 0; flex: none; }
  .prof-stats .stat b { font-size: 19px; white-space: nowrap; }
  .prof-stats .stat span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tab-tools { margin: 16px 0; }
}

/* Комментарии пользователя (вкладка профиля, /last_comments/) */
.ucmt-list { display: grid; gap: 12px; }
.ucmt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.ucmt img { width: 64px; height: 80px; border-radius: 14px; object-fit: cover; object-position: 50% 30%; }
.ucmt-mod { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ucmt-mod a { font-weight: var(--fw-heavy); color: var(--text); }
.ucmt-mod a:hover { color: var(--primary-ink); }
.ucmt-mod time { font-size: 12px; color: var(--text-3); font-weight: var(--fw-semibold); }
.ucmt-text { margin-top: 4px; overflow-wrap: anywhere; }
.ucmt-text .mention { color: var(--primary-ink); font-weight: var(--fw-bold); }

/* История скачиваний — строки (вкладка профиля) */
.hist-list { display: grid; gap: 10px; }
.hist { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.hist img { width: 56px; height: 70px; border-radius: 12px; object-fit: cover; object-position: 50% 30%; }
.hist b { display: block; font-weight: var(--fw-heavy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist small { font-size: 13px; color: var(--text-2); font-weight: var(--fw-semibold); }
@media (max-width: 599px) { .hist .btn span { display: none; } .hist .btn { width: var(--tap); padding: 0; } }

/* ---------- Настройки профиля ---------- */
.settings { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; max-width: 1120px; }
.settings-main { display: grid; gap: 16px; min-width: 0; }
.settings-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 10px; }
.settings-aside .label { font-size: 13px; font-weight: var(--fw-heavy); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.set-card h2 { font-size: 19px; font-weight: var(--fw-heavy); }
.set-card > p { color: var(--text-2); font-size: var(--fs-sm); margin: 4px 0 16px; }
.ava-edit { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.ava-edit .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-rows { display: grid; gap: 10px; }
.soc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.soc-row .soc-ico { width: 44px; height: 44px; } .soc-row .soc-ico .i { width: 20px; height: 20px; }
.add-soc { position: relative; justify-self: start; }
.add-soc .pop { left: 0; right: auto; top: calc(100% + 6px); width: 240px; }
.save-bar { position: sticky; bottom: 16px; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 10px 10px 20px; border-radius: var(--r-xl); background: var(--text); color: var(--bg); box-shadow: var(--shadow-3); font-weight: var(--fw-bold); }
.save-bar .msg { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; }
.save-bar .btn-plain { color: var(--bg); }
.save-bar.is-saved { background: var(--success); color: #fff; }
.save-bar.is-saved .btn-plain { color: #fff; }
.mini-prof { overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); text-align: center; padding-bottom: 18px; }
.mini-prof .prof-cover { height: 72px; }
.mini-prof .ava { margin-top: -44px; box-shadow: 0 0 0 5px var(--surface); background: var(--surface); --s: 84px; }
.mini-prof .bubble { display: inline-block; margin: 8px 0 4px; padding: 5px 12px; border-radius: 16px; background: var(--surface-2); font-size: 13px; font-weight: var(--fw-heavy); }
.mini-prof b.nick { display: block; font-size: 19px; }
.mini-prof .prof-social { justify-content: center; padding: 0 12px; }
/* На планшете и телефоне предпросмотра нет: профиль открывается одной кнопкой «Вернуться в профиль» */
@media (max-width: 1023px) { .settings { grid-template-columns: minmax(0, 1fr); } .settings-aside { display: none; } }
@media (max-width: 767px) { .save-bar { bottom: calc(var(--tabbar-h) + 8px); border-radius: var(--r-lg); padding: 10px 10px 10px 16px; } .save-bar .btn { flex: 1; } .save-bar .msg { width: 100%; flex: none; } }
/* Кроппер аватара */
.crop { position: relative; aspect-ratio: 1; max-height: 50vh; margin: 0 auto 8px; border-radius: var(--r-md); overflow: hidden; background: #222 center / cover; }
.crop-box { position: absolute; inset: 14% 18% 22% 14%; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); cursor: move; }
.crop-box::after { content: ""; position: absolute; right: -8px; bottom: 12%; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: nwse-resize; }


/* Внедрение (этап 5) */
.soc-telegram { background: #27A7E7; } .soc-youtube { background: #E62117; }
.ucmt-body, .hist-body { min-width: 0; }
.tab-gap { height: 20px; }
.tab-empty { margin-top: 20px; }
.likes-note { margin-bottom: 20px; }
.tab-tools-privacy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prof-notfound { margin-top: 24px; }
[data-profile-content].is-loading { opacity: .5; pointer-events: none; transition: opacity var(--dur-2); }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.settings-head { margin-top: 4px; }
.ava-edit-actions { display: grid; gap: 10px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { box-shadow: var(--focus-ring); }
.input-counted { padding-right: 64px; }
.soc-field { display: grid; gap: 6px; min-width: 0; }
.add-soc { margin-top: 12px; }
.add-soc .menu-item[disabled] { opacity: .5; cursor: default; }
.check-switch { align-items: center; margin-top: 8px; }
.mini-role { margin: 6px 0 10px; }
.preview-privacy { display: block; margin-top: 10px; }
.set-card.has-error { box-shadow: 0 0 0 2px var(--danger-soft), var(--shadow-1); }
.crop-modal { width: min(560px, 100%); }
.crop-area { max-height: 60vh; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.crop-area img { display: block; max-width: 100%; }