/* ===== Дизайн-система ===== */
:root {
  --brand: #18181b; --on-brand: #ffffff; --brand-2: #52525b; --link: #2563eb;
  --grad: var(--brand);
  --bg: #f4f4f5; --card: #ffffff; --card-2: #fafafa; --border: #e4e4e7; --border-2: #d4d4d8;
  --text: #18181b; --text-2: #71717a; --text-3: #a1a1aa;
  --input: #f4f4f5; --hover: rgba(24, 24, 27, .05); --shadow: 0 8px 30px rgba(0, 0, 0, .08);
  --like: #e11d48; --whale: #0ea5e9; --bookmark: #f59e0b; --online: #22c55e; --danger: #ef4444; --success: #16a34a; --warn: #f59e0b;
  --plus: #a855f7; --radius: 18px; --radius-sm: 12px; --font: 15px;
  color-scheme: light;
}
[data-theme="dark"] {
  --brand: #f4f4f5; --on-brand: #18181b; --brand-2: #a1a1aa; --link: #60a5fa;
  --bg: #09090b; --card: #141416; --card-2: #18181b; --border: #27272a; --border-2: #3f3f46;
  --text: #f4f4f5; --text-2: #a1a1aa; --text-3: #52525b;
  --input: #1c1c1f; --hover: rgba(255, 255, 255, .05); --shadow: 0 8px 30px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
[data-font="small"] { --font: 13.5px; }
[data-font="large"] { --font: 17px; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text);
  font-size: var(--font); line-height: 1.5; transition: background .25s, color .25s; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--link) 25%, transparent); }

/* ===== Каркас ===== */
.layout { display: flex; min-height: 100vh; max-width: 1240px; margin: 0 auto; gap: 24px; padding: 0 16px; }
.layout.wide .main { max-width: 900px; }
.sidebar { width: 248px; padding: 18px 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.logo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 14px; border-radius: 16px; }
.logo img { width: 38px; height: 38px; border-radius: 11px; }
.logo-text { font-size: 23px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.nav-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; color: var(--text-2); font-weight: 500; transition: background .15s, color .15s; position: relative; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { color: var(--text); background: var(--hover); font-weight: 700; }
.nav-item.active .ico { color: var(--text); }
.ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg, svg.i { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge-count { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; margin-left: auto; min-width: 20px; text-align: center; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 14px; }
.nav-cta { margin: 12px 4px 0; }
.main { flex: 1; max-width: 620px; padding: 20px 0 40px; min-width: 0; }
.right { width: 320px; padding: 20px 0; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; }
.right::-webkit-scrollbar { display: none; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.page-sub { color: var(--text-2); margin-bottom: 16px; font-size: 14px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-2); }
.back-link:hover { background: var(--hover); color: var(--text); }

/* ===== Карточки и элементы ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.card.flat { padding: 0; overflow: hidden; }
.card-title { font-weight: 700; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title a { font-size: 13px; color: var(--link); font-weight: 600; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); } .small { font-size: 13px; } .tiny { font-size: 11.5px; }
.row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; } .mt { margin-top: 12px; } .mb { margin-bottom: 12px; } .hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.empty { text-align: center; color: var(--text-2); padding: 48px 16px; }
.empty .big { font-size: 42px; margin-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--brand); color: var(--on-brand); border: none; padding: 10px 20px;
  border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 700; transition: transform .12s, opacity .15s, box-shadow .15s;
  white-space: nowrap; }
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border-2); box-shadow: none; font-weight: 600; }
.btn.ghost:hover { background: var(--hover); border-color: var(--text-3); }
.btn.soft { background: var(--input); color: var(--text); box-shadow: none; font-weight: 600; }
.btn.danger { background: var(--danger); box-shadow: none; }
.btn.danger.ghost { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.pill { border-radius: 999px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--text-2); transition: background .15s, color .15s; flex-shrink: 0; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

input, textarea, select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 14px; outline: none;
  font-family: inherit; background: var(--input); color: var(--text); transition: border .15s, background .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--text-3); background: var(--card); }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--brand); }
input[type=color] { padding: 2px; height: 40px; width: 60px; }
input[type=file] { padding: 8px; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
.check input { margin-top: 3px; }
.check b { display: block; font-size: 14px; } .check small { color: var(--text-2); font-size: 12.5px; }
.form-row { display: flex; gap: 10px; } .form-row > * { flex: 1; }

.alert { border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.alert.error { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.alert.success { background: color-mix(in srgb, var(--success) 8%, transparent); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success); }
.alert.info { background: var(--input); border-color: var(--border); color: var(--text); }
.alert.warning { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: #b45309; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--input); font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.chip:hover { color: var(--text); }
.chip.active { background: var(--text); color: var(--card); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 12px; }
.chips::-webkit-scrollbar { display: none; }
.tag-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--input); color: var(--text-2); }

.tabs { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 1; text-align: center; padding: 13px 12px; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); border-bottom-color: var(--text); }

/* ===== Аватары и бейджи ===== */
.av { border-radius: 50%; overflow: hidden; background: #71717a; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; color: #fff; font-weight: 800; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.av-wrap .dot { position: absolute; bottom: 1px; right: 1px; width: 28%; height: 28%; min-width: 9px; min-height: 9px; background: var(--online); border-radius: 50%; border: 2px solid var(--card); }
.ring { padding: 2.5px; border-radius: 50%; background: var(--text); display: inline-flex; }
.ring.seen { background: var(--border-2); }
.ring > .av { border: 2.5px solid var(--card); }
.badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-left: 3px; }
.badge svg { width: 16px; height: 16px; }
.name-line { display: inline-flex; align-items: center; gap: 2px; min-width: 0; font-weight: 700; }
.plus-tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--brand); color: var(--on-brand); margin-left: 4px; vertical-align: 2px; }
.emoji-status { margin-left: 3px; }

/* ===== Пост ===== */
.post { padding: 16px 18px; }
.post-head { display: flex; gap: 12px; }
.post-body { flex: 1; min-width: 0; }
.post-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.post-meta .handle, .post-meta .time { color: var(--text-2); font-size: 13px; }
.post-meta .time:hover { text-decoration: underline; }
.post-text { margin: 6px 0 10px; line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; }
.post-text.clamp { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.rt-tag, .rt-mention, .rt-link { color: var(--link); font-weight: 500; }
.rt-tag:hover, .rt-mention:hover, .rt-link:hover { text-decoration: underline; }
.read-more { background: none; border: none; color: var(--link); font-weight: 700; cursor: pointer; font-size: 13px; padding: 0 0 8px; }
.repost-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 6px; margin: 0 0 8px 54px; }
.quote { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--card-2); }
.media { border-radius: 16px; overflow: hidden; margin-bottom: 10px; background: #000; border: 1px solid var(--border); }
.media img, .media video { display: block; width: 100%; max-height: 560px; object-fit: contain; cursor: zoom-in; }
.media video { cursor: auto; }
.media-grid { display: grid; gap: 3px; border-radius: 16px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); }
.media-grid.n2 { grid-template-columns: 1fr 1fr; } .media-grid.n3, .media-grid.n4, .media-grid.nmany { grid-template-columns: 1fr 1fr; }
.media-grid > * { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; background: #000; }
.media-grid.n3 > :first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.post-actions { display: flex; align-items: center; gap: 2px; margin-left: -8px; flex-wrap: wrap; }
.act { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-2); padding: 7px 10px; border-radius: 20px; font-weight: 600; transition: color .15s, background .15s; }
.act svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act:hover { background: var(--hover); color: var(--text); }
.act.like.on, .act.like:hover { color: var(--like); } .act.like.on svg { fill: var(--like); }
.act.whale.on { color: var(--whale); }
.act.repost.on, .act.repost:hover { color: var(--success); }
.act.bm.on { color: var(--bookmark); } .act.bm.on svg { fill: var(--bookmark); }
.act .pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.35); } }
.reaction-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--input); font-size: 13px; border: 1.5px solid transparent; cursor: pointer; }
.reaction-pill.mine { border-color: var(--text-3); background: var(--card); }
.react-picker { position: absolute; bottom: 110%; left: 0; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow); display: flex; gap: 2px; z-index: 30; }
.react-picker button { font-size: 22px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 50%; transition: transform .1s; }
.react-picker button:hover { transform: scale(1.25); }
.post-tags { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.pill-info { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--input); color: var(--text-2); }

.poll { border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.poll-q { font-weight: 700; margin-bottom: 10px; }
.poll-opt { position: relative; display: block; width: 100%; margin-bottom: 8px; border-radius: 10px; padding: 10px 14px; background: var(--input); border: 1.5px solid var(--border); overflow: hidden; text-align: left; font-size: 14px; color: var(--text); cursor: pointer; }
.poll-opt:hover { border-color: var(--text-3); }
.poll-opt .bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--text) 8%, transparent); transition: width .5s; }
.poll-opt.mine .bar { background: color-mix(in srgb, var(--text) 16%, transparent); }
.poll-opt .lbl { position: relative; display: flex; justify-content: space-between; gap: 10px; }
.poll-opt.done { cursor: default; } .poll-opt.done:hover { border-color: var(--border); }

/* ===== Меню / модалки / тосты ===== */
.menu-wrap { position: relative; margin-left: auto; }
.menu { position: absolute; right: 0; top: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 6px; min-width: 210px; z-index: 40; box-shadow: var(--shadow); display: none; }
.menu.open { display: block; animation: fadein .12s; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text); }
.menu button:hover, .menu a:hover { background: var(--hover); }
.menu .danger { color: var(--danger); }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } }
.modal-bg { position: fixed; inset: 0; background: rgba(8, 6, 16, .55); z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); }
.modal-bg.open { display: flex; animation: fadein .15s; }
.modal { background: var(--card); border-radius: 20px; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 800; font-size: 17px; }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 300; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 94vh; object-fit: contain; }
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text); color: var(--card); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); animation: toastin .25s; max-width: 90vw; }
.toast.error { background: var(--danger); color: #fff; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }
.announce { border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; color: var(--text); background: var(--card); border: 1px solid var(--border); }
.announce.warning { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.announce.success { border-color: color-mix(in srgb, var(--success) 50%, transparent); }

/* ===== Композер ===== */
.composer textarea { border: none; background: transparent; padding: 6px 0; font-size: 17px; min-height: 60px; resize: none; }
.composer textarea:focus { background: transparent; }
.composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; flex-wrap: wrap; }
.composer-tools .tools { display: flex; gap: 2px; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--brand); }
.tool:hover { background: var(--hover); }
.tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool.on { background: var(--input); color: var(--text); }
.counter { font-size: 12px; color: var(--text-3); font-weight: 600; }
.counter.warn { color: var(--warn); } .counter.over { color: var(--danger); }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 8px 0; }
.previews .pv { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; }
.previews .pv img, .previews .pv video { width: 100%; height: 100%; object-fit: cover; }
.previews .pv button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }
.composer-extra { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 10px; }
.composer-extra input, .composer-extra select { margin-bottom: 8px; }
.suggest { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 220px; overflow: hidden; display: none; }
.suggest.open { display: block; }
.suggest div { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.suggest div.sel, .suggest div:hover { background: var(--hover); }

/* ===== Истории ===== */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 70px; }
.story-item span { font-size: 11.5px; font-weight: 600; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-add { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--brand); }

/* ===== Профиль ===== */
.cover { height: 190px; background: var(--input); background-size: cover; background-position: center; position: relative; }
.profile-top { padding: 0 20px 18px; position: relative; }
.profile-av { margin-top: -56px; border: 4px solid var(--card); border-radius: 50%; display: inline-flex; background: var(--card); }
.profile-name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.profile-stats { display: flex; gap: 18px; margin-top: 12px; font-size: 14px; flex-wrap: wrap; }
.profile-stats b { font-weight: 800; }
.profile-actions { position: absolute; right: 20px; top: 12px; display: flex; gap: 8px; }
.profile-links { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.profile-links > span, .profile-links > a { display: inline-flex; align-items: center; gap: 4px; }
.profile-links svg.i, .profile-top .row.small svg.i { width: 14px; height: 14px; flex-shrink: 0; }
.profile-links a { color: var(--link); font-weight: 600; }
.lvl-bar { height: 6px; background: var(--input); border-radius: 6px; overflow: hidden; }
.lvl-bar > div { height: 100%; background: var(--text); border-radius: 6px; }
.follows-you { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--input); color: var(--text-2); }
.highlights { display: flex; gap: 16px; overflow-x: auto; padding: 4px 20px 16px; scrollbar-width: none; }
.highlight { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.highlight .hl { width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--border-2); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--input); }
.highlight .hl img, .highlight .hl video { width: 100%; height: 100%; object-fit: cover; }
.media-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #000; display: block; }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; }
.media-tile .over { position: absolute; inset: auto 6px 6px auto; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #000; }

/* ===== Люди ===== */
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.user-row + .user-row { border-top: 1px solid var(--border); }
.user-row .info { flex: 1; min-width: 0; }
.user-row .info .bio { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-follow { padding: 7px 16px; border-radius: 999px; font-size: 13px; }

/* ===== Сообщения ===== */
.chat-list a.chat { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.chat-list a.chat:hover { background: var(--hover); }
.chat-list a.chat:last-child { border-bottom: none; }
.chat .preview { font-size: 13.5px; color: var(--text-2); }
.chat .preview.unread { color: var(--text); font-weight: 600; }
.unread-dot { background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 7px; }
.convo { display: flex; flex-direction: column; height: calc(100vh - 40px); height: calc(100dvh - 40px); }
.convo-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 8px; }
.convo-box { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.msg { display: flex; flex-direction: column; max-width: 78%; align-self: flex-start; position: relative; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--input); word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45; position: relative; }
.msg.mine .bubble { background: var(--brand); color: var(--on-brand); border-radius: 18px 18px 6px 18px; }
.msg.mine .bubble a { color: inherit; text-decoration: underline; }
.bubble.deleted { background: transparent !important; color: var(--text-3) !important; font-style: italic; border: 1px dashed var(--border-2); }
.bubble img.att { display: block; max-width: 280px; max-height: 340px; border-radius: 12px; cursor: zoom-in; margin: -3px -7px 4px; }
.bubble video.circle { width: 210px; height: 210px; border-radius: 50%; object-fit: cover; display: block; }
.bubble audio { height: 34px; max-width: 240px; display: block; }
.msg.mine .bubble audio { filter: invert(1) hue-rotate(180deg); }
.bubble .file { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.msg-meta { font-size: 10.5px; color: var(--text-3); padding: 2px 6px; display: flex; gap: 6px; align-items: center; }
.msg-reply { font-size: 12px; padding: 5px 10px; border-left: 3px solid var(--text-3); background: var(--card-2); border-radius: 8px; margin-bottom: 3px; color: var(--text-2); max-width: 260px; cursor: pointer; }
.msg-fwd { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-bottom: 2px; }
.msg-reacts { display: flex; gap: 3px; margin-top: -6px; z-index: 1; }
.msg-reacts span { background: var(--card); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; padding: 0 6px; }
.msg-tools { position: absolute; top: -14px; display: none; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px; box-shadow: var(--shadow); z-index: 5; }
.msg:not(.mine) .msg-tools { left: 10px; } .msg.mine .msg-tools { right: 10px; }
.msg:hover .msg-tools, .msg.tools-open .msg-tools { display: flex; }
.msg-tools button { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 50%; font-size: 14px; color: var(--text-2); }
.msg-tools button:hover { background: var(--hover); }
.msg.highlight .bubble { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 60%, transparent); }
.day-sep { align-self: center; font-size: 11.5px; color: var(--text-2); background: var(--input); padding: 3px 10px; border-radius: 999px; margin: 8px 0; font-weight: 600; }
.convo-input { margin-top: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px; }
.convo-input textarea { min-height: 42px; max-height: 140px; resize: none; border-radius: 20px; padding: 10px 14px; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-left: 3px solid var(--text-3); background: var(--card-2); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.typing { font-size: 12px; color: var(--text-2); font-weight: 600; }
.emoji-panel { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 4px 2px; }
.emoji-panel button { font-size: 24px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; }
.emoji-panel button:hover { background: var(--hover); }
.pinned-msg { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ===== Истории (просмотр) ===== */
.story-stage { position: fixed; inset: 0; background: #000; z-index: 150; display: flex; align-items: center; justify-content: center; }
.story-frame { position: relative; width: 100%; max-width: 440px; height: 100%; max-height: 860px; background: #111; overflow: hidden; border-radius: 0; }
@media (min-width: 700px) { .story-frame { height: 92vh; border-radius: 18px; } }
.story-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.story-media img, .story-media video { width: 100%; height: 100%; object-fit: contain; }
.story-text { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; font-size: 24px; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); word-wrap: break-word; }
.story-text.over { top: auto; bottom: 110px; transform: none; font-size: 18px; background: rgba(0, 0, 0, .4); border-radius: 12px; padding: 8px 12px; }
.story-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 5; }
.story-bars div { flex: 1; height: 3px; background: rgba(255, 255, 255, .3); border-radius: 3px; overflow: hidden; }
.story-bars div i { display: block; height: 100%; width: 0; background: #fff; }
.story-top { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; color: #fff; z-index: 5; }
.story-top .icon-btn { color: #fff; }
.story-nav { position: absolute; top: 80px; bottom: 90px; width: 35%; z-index: 4; cursor: pointer; }
.story-nav.prev { left: 0; } .story-nav.next { right: 0; }
.story-bottom { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 6; display: flex; gap: 8px; align-items: center; }
.story-bottom input { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 999px; }
.story-bottom input::placeholder { color: rgba(255, 255, 255, .7); }
.story-bottom button.r { background: none; border: none; font-size: 24px; cursor: pointer; transition: transform .1s; }
.story-bottom button.r:hover { transform: scale(1.2); } .story-bottom button.r.on { transform: scale(1.25); filter: drop-shadow(0 0 6px #fff); }

/* ===== Рилсы ===== */
.reels { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; position: relative; }
.reel-frame { position: relative; height: 94vh; aspect-ratio: 9/16; max-width: 100vw; background: #000; border-radius: 18px; overflow: hidden; }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-info { position: absolute; left: 14px; right: 70px; bottom: 18px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.reel-side { position: absolute; right: 10px; bottom: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; color: #fff; }
.reel-side button, .reel-side a { background: rgba(0, 0, 0, .35); border: none; color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.reel-side small { font-size: 12px; font-weight: 700; margin-top: -10px; }
.reel-side button.on { color: var(--like); }
.reel-side svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.reel-side button.on svg { fill: var(--like); }

/* ===== Мобильная навигация ===== */
.mobile-top { display: none; position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); padding: 10px 12px; align-items: center; justify-content: space-between; }
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav-inner { display: flex; justify-content: space-around; align-items: center; height: 58px; }
.mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-3); flex: 1; height: 58px; position: relative; gap: 2px; font-size: 10px; font-weight: 700; }
.mobile-nav a.active { color: var(--text); }
.mobile-nav a.active svg { color: var(--text); }
.mobile-nav svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav .fab { width: 46px; height: 46px; border-radius: 15px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: var(--on-brand);  }
.mobile-nav .fab svg { color: var(--on-brand) !important; }
.mobile-nav .mbadge { position: absolute; top: 6px; left: calc(50% + 4px); background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }

/* ===== Прочее ===== */
.stat-tile { background: var(--card-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.stat-tile b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.stat-tile span { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; align-items: center; }
.bars .b i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brand); min-height: 2px; }
.bars .b i.p { background: var(--brand-2); }
.bars .b small { font-size: 9.5px; color: var(--text-3); }
.task { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.task + .task { border-top: 1px solid var(--border); }
.task .emo { width: 44px; height: 44px; border-radius: 13px; background: var(--input); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.task.done .emo { background: color-mix(in srgb, var(--success) 14%, transparent); }
.task.done .t { color: var(--text-3); text-decoration: line-through; }
.hero { background: var(--card); }

.hero .lvl-bar { background: var(--input); }
.hero .lvl-bar > div { background: var(--text); }
.rank { width: 28px; font-weight: 800; color: var(--text-3); text-align: center; flex-shrink: 0; }
.rank.top { color: var(--warn); }
.ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); }
.ach .e { font-size: 30px; } .ach.locked { opacity: .45; filter: grayscale(1); }
.settings-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.settings-nav::-webkit-scrollbar { display: none; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { color: var(--text-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.table-wrap { overflow-x: auto; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center; }
.auth-logo img { width: 58px; height: 58px; border-radius: 16px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--input); font-size: 12px; font-family: ui-monospace, monospace; }
.skeleton { background: linear-gradient(90deg, var(--input), var(--card-2), var(--input)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.load-more { display: block; width: 100%; padding: 14px; text-align: center; color: var(--text-2); font-weight: 600; }
.qr-box { background: #fff; padding: 16px; border-radius: 18px; display: inline-block; }

/* ===== Адаптивность ===== */
@media (max-width: 1100px) { .right { display: none; } }
@media (max-width: 900px) { .sidebar { width: 76px; } .logo-text, .nav-label, .nav-cta .lbl, .nav-sep { display: none; } .nav-item { justify-content: center; } .nav-item .badge-count { position: absolute; top: 4px; right: 6px; } .nav-cta .btn { padding: 12px; } }
@media (max-width: 640px) {
  .sidebar { display: none; } .mobile-nav { display: block; } .mobile-top { display: flex; }
  .layout { padding: 0 8px; gap: 0; } .main { padding: 6px 0 80px; }
  .card { border-radius: 16px; padding: 14px; } .post { padding: 14px; }
  .hide-mobile { display: none !important; }
  .act { padding: 7px 7px; gap: 4px; }
  .mobile-top .logo-text { display: inline; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .cover { height: 130px; } .profile-top { padding: 0 14px 14px; } .profile-actions { right: 14px; }
  .msg { max-width: 88%; }
  .chat-page .mobile-nav, .chat-page .mobile-top { display: none !important; }
  .chat-page .main { padding: 0; }
  .chat-page .convo { height: 100vh; height: 100dvh; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
  .chat-page .convo-head { margin-bottom: 6px; }
  .chat-page .convo-input { margin-top: 6px; }
  .chat-page .convo-input textarea { font-size: 16px; }
  .reel-frame { height: 100vh; border-radius: 0; width: 100vw; aspect-ratio: auto; }
}

.rec-reason { font-size: 12px; color: var(--text-3, var(--text-2)); padding: 0 8px 4px; font-weight: 600; }

/* ===== Настройки пользователя (services/prefs.py) ===== */
.pref-group { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 16px 0 6px; }
.p-hide-counters .post-actions .act .n, .p-hide-counters .post-actions .act span { display: none; }
.p-hide-reactions .reaction-bar { display: none; }
.p-expand-long .post-text.clamp { max-height: none; -webkit-mask-image: none; mask-image: none; }
.p-expand-long .read-more { display: none !important; }
.p-hide-stories-bar .stories-card { display: none; }
.p-hide-sidebar-tasks .side-tasks, .p-hide-sidebar-suggest .side-suggest, .p-hide-sidebar-birthdays .side-birthdays { display: none; }
.p-focus-mode aside.right { display: none; } .p-focus-mode .main { max-width: 680px; }
.p-blur-media .post .media img, .p-blur-media .post .media video, .p-blur-media .post .media-grid img, .p-blur-media .post .media-grid video { filter: blur(26px); transition: filter .2s; cursor: pointer; }
.p-blur-media .revealed, .p-blur-media .revealed img, .p-blur-media .revealed video { filter: none !important; }
.p-compact .card { padding: 12px 14px; margin-bottom: 8px; }
.p-compact .post-text { margin-top: 2px; }
.p-corners-soft .card, .p-corners-soft .btn, .p-corners-soft input, .p-corners-soft textarea, .p-corners-soft select { border-radius: 8px; }
.p-corners-sharp .card, .p-corners-sharp .btn, .p-corners-sharp input, .p-corners-sharp textarea, .p-corners-sharp select, .p-corners-sharp .chip { border-radius: 2px; }
.p-avatar-shape-squircle .av, .p-avatar-shape-squircle .av img, .p-avatar-shape-squircle .ring { border-radius: 28% !important; }
.p-font-family-serif body { font-family: Georgia, "Times New Roman", serif; }
.p-font-family-mono body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
html:not(.p-nav-labels) .mobile-nav a span:not(.fab):not(.mbadge) { display: none; }
.p-chat-compact .msg { margin: 1px 0; } .p-chat-compact .bubble { padding: 6px 10px; }
html:not(.p-chat-timestamps) .msg-meta { font-size: 0; } html:not(.p-chat-timestamps) .msg-meta .ticks { font-size: 11px; }
.bubble.big-emoji { background: none !important; font-size: 40px; line-height: 1.15; padding: 0 !important; box-shadow: none !important; }
.p-reduce-motion *, .p-reduce-motion *::before, .p-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.p-high-contrast { --text-2: #3f3f46; --text-3: #52525b; --border: #a1a1aa; }
.p-high-contrast[data-theme="dark"] { --text-2: #e4e4e7; --text-3: #d4d4d8; --border: #71717a; }
.p-underline-links a { text-decoration: underline; text-underline-offset: 2px; }
.p-line-spacing body { line-height: 1.75; }
.p-big-buttons .btn { padding: 12px 20px; font-size: 16px; } .p-big-buttons .icon-btn { width: 44px; height: 44px; } .p-big-buttons .post-actions .act { padding: 10px 12px; }
.manual-more { display: block; width: 100%; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gift { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: var(--input); cursor: pointer; border: 2px solid transparent; text-align: center; }
.gift input { display: none; } .gift .ge { font-size: 34px; line-height: 1.1; }
.gift:has(input:checked) { border-color: var(--text); background: var(--card); }
.gift.poor { opacity: .4; cursor: not-allowed; }
/* ===== Разметка текста ===== */
.rt-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--input); padding: 1px 6px; border-radius: 6px; }
.rt-quote { display: inline-block; border-left: 3px solid var(--border-2, var(--text-3)); padding-left: 10px; color: var(--text-2); font-style: italic; }
.spoiler { background: var(--text); color: transparent; border-radius: 4px; cursor: pointer; transition: color .2s, background .2s; user-select: none; }
.spoiler.open { background: var(--input); color: inherit; user-select: auto; }
/* ===== Пакет функций №3 ===== */
.post-sub { margin: 2px 0 4px; }
.cw-wrap .cw-body { display: none; } .cw-wrap.open .cw-body { display: block; } .cw-wrap.open .cw-btn { display: none; }
.cw-btn { width: 100%; text-align: left; border: 1.5px dashed var(--border-2, var(--text-3)); background: var(--input); color: var(--text); border-radius: 14px; padding: 14px 16px; font-weight: 700; cursor: pointer; margin: 6px 0 10px; font-size: 14px; }
.cw-btn span { color: var(--text-2); font-weight: 600; }
.bg-text { min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 800; line-height: 1.35; padding: 28px 20px; border-radius: 18px; color: #fff; }
.bg-text a { color: inherit !important; text-decoration: underline; }
.bg-graphite { background: linear-gradient(135deg, #18181b, #52525b); } .bg-sand { background: linear-gradient(135deg, #a8a29e, #78716c); }
.bg-mint { background: linear-gradient(135deg, #0f766e, #14b8a6); } .bg-sky { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.bg-sunset { background: linear-gradient(135deg, #c2410c, #f59e0b); } .bg-night { background: linear-gradient(135deg, #020617, #1e293b); }
.frame-silver .av { box-shadow: 0 0 0 3px #e4e4e7, 0 0 0 5px #a1a1aa; }
.frame-gold .av { box-shadow: 0 0 0 3px #fde68a, 0 0 0 5px #d97706; }
.frame-neon .av { box-shadow: 0 0 0 3px #22d3ee, 0 0 14px 3px rgba(34, 211, 238, .55); }
.frame-fire .av { box-shadow: 0 0 0 3px #f97316, 0 0 14px 3px rgba(239, 68, 68, .5); }
.frame-galaxy .av { box-shadow: 0 0 0 3px #818cf8, 0 0 0 6px #312e81, 0 0 18px 4px rgba(129, 140, 248, .45); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--input); margin-top: 8px; }
body.reader aside.right, body.reader .sidebar, body.reader .mobile-nav, body.reader #comments { display: none !important; }
body.reader .post-text { font-size: 20px; line-height: 1.8; max-width: 680px; }
.cmt-hidden { opacity: .55; font-style: italic; }
.thread-toggle { background: none; border: none; color: var(--link); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 8px; }
.pw-meter { height: 6px; border-radius: 3px; background: var(--input); overflow: hidden; margin: -4px 0 8px; } .pw-meter b { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; } .quick-replies button { flex: none; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--text); }
.heatmap { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; overflow-x: auto; }
.heatmap i { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--input); }
.heatmap i.l1 { background: #a1a1aa; } .heatmap i.l2 { background: #71717a; } .heatmap i.l3 { background: #3f3f46; } .heatmap i.l4 { background: var(--text); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; } .bars div { flex: 1; background: var(--text); border-radius: 3px 3px 0 0; min-height: 2px; }
.wheel { width: 260px; height: 260px; border-radius: 50%; margin: 10px auto; background: conic-gradient(#18181b 0 12.5%, #52525b 0 25%, #18181b 0 37.5%, #52525b 0 50%, #18181b 0 62.5%, #52525b 0 75%, #18181b 0 87.5%, #52525b 0); position: relative; transition: transform 3s cubic-bezier(.17,.67,.2,1); }
.wheel span { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; color: #fff; font-weight: 800; font-size: 15px; }
.wheel-pin { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 24px solid var(--text); margin: 0 auto -16px; position: relative; z-index: 2; }

/* Секретные чаты */
.secret-box{display:flex;flex-direction:column;gap:6px;min-height:280px;max-height:60vh;overflow-y:auto}
.secret-msg{max-width:78%;padding:8px 12px;border-radius:16px;background:var(--surface-2,rgba(127,127,127,.12))}
.secret-msg.mine{align-self:flex-end;background:#1f6f43;color:#fff}
.secret-msg.mine .faint{color:rgba(255,255,255,.75)}
.secret-msg.theirs{align-self:flex-start}
.secret-text{white-space:pre-wrap;word-break:break-word}
.error-text{color:#d33}

/* Юридические документы */
.legal-doc{max-width:760px;margin:0 auto;line-height:1.65;font-size:14px}
.legal-doc h1{font-size:22px;margin-bottom:6px}
.legal-doc h3{font-size:16px;margin:18px 0 6px}
.legal-doc ul,.legal-doc ol{padding-left:20px;margin:6px 0}
.legal-doc a{color:var(--link);text-decoration:underline}
.cookie-bar{position:fixed;left:12px;right:12px;bottom:76px;z-index:90;max-width:560px;margin:0 auto;display:flex;gap:10px;align-items:center;
  background:var(--card,#fff);border:1px solid var(--border,rgba(127,127,127,.25));border-radius:14px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.15)}
@media (min-width:900px){.cookie-bar{bottom:16px}}
.cookie-bar[hidden]{display:none}
.ya-btn{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px}
[data-theme="dark"] .ya-btn{background:#fff;color:#000}

/* SVG-эмодзи */
img.emj{width:1.2em;height:1.2em;vertical-align:-.22em;display:inline-block;margin:0 .03em;user-select:none;-webkit-user-drag:none}
.big-emoji img.emj{width:2.4em;height:2.4em}

/* Иконки внутри текста — вместо эмодзи */
svg.i.in{width:1.15em;height:1.15em;vertical-align:-.2em;stroke-width:2;flex-shrink:0}
.empty .big svg.i, .empty .big svg.i.in{width:44px;height:44px;stroke-width:1.6;opacity:.75}
.medal-1{color:#d4a017}.medal-2{color:#9ca3af}.medal-3{color:#c2702e}
.poll-opt.quiz-right{box-shadow:inset 0 0 0 2px var(--success,#16a34a)}
.poll-opt.quiz-wrong{box-shadow:inset 0 0 0 2px var(--danger,#dc2626)}
.dbl-heart svg.i{width:84px;height:84px;color:#ef4444;stroke:#ef4444;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
.legal-st{flex:0 0 auto}.legal-st.ok{color:var(--success,#16a34a)}.legal-st.warn{color:#d97706}.legal-st.todo{color:var(--text-2,#888)}.legal-st.info{color:#2563eb}
.feat-ico svg.i{width:28px;height:28px;stroke-width:1.8;margin-bottom:6px}
.task .emo svg.i{width:24px;height:24px}
.notif-ico{display:flex;align-items:center;justify-content:center;background:var(--input)}
.notif-ico svg.i{width:20px;height:20px}
.notif-badge{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card,#fff);box-shadow:0 0 0 2px var(--card,#fff);color:var(--text)}
.notif-badge svg.i{width:13px;height:13px;stroke-width:2.4}
.t-like,.t-comment_like,.t-reaction{color:#ef4444}.t-whale{color:#2563eb}.t-achievement,.t-level{color:#d4a017}.t-follow,.t-follow_accept,.t-follow_request{color:#7c3aed}.t-streak{color:#f97316}
.ach .e{width:54px;height:54px;margin:0 auto 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#7c2d12}
.ach .e svg.i{width:28px;height:28px;stroke-width:1.9}
.ach.locked .e{background:var(--input);color:var(--text-2)}
svg.i.big-ico{width:64px;height:64px;stroke-width:1.5}
img.ge{width:48px;height:48px;display:block;margin:0 auto 4px}
.gift-row{gap:6px;flex-wrap:wrap}.gift-row img{width:30px;height:30px;display:block}
.mood-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mood-chip input{display:none}
.mood-chip span{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--input);font-size:13px;cursor:pointer}
.mood-chip input:checked+span{background:var(--text);color:var(--bg)}

/* Значки рядом с именем */
.badge.owner-b{width:17px;height:17px;border-radius:6px;background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#ea580c);box-shadow:0 1px 3px rgba(234,88,12,.35);color:#fff}
.badge.owner-b svg.i{width:11px;height:11px;stroke:#fff;stroke-width:2.6;fill:rgba(255,255,255,.35)}
.plus-tag{display:inline-flex;align-items:center;gap:2px;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:2px 6px 2px 4px;border-radius:999px;color:#fff;margin-left:4px;vertical-align:2px;position:relative;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.plus-tag svg{width:10px;height:10px;fill:#fff}
.plus-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%);pointer-events:none}
.plus-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:10px}
.plus-palette input{display:none}
.plus-palette span{display:block;aspect-ratio:1;border-radius:12px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .15s}
.plus-palette input:checked+span{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--text);transform:scale(.92)}
.owner-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-size:12px;font-weight:700}
.owner-pill .badge.owner-b{margin:0}
[data-theme="dark"] .owner-pill{background:linear-gradient(135deg,#451a03,#78350f);color:#fde68a}
.mt-s{margin-top:6px}
.profile-game{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;font-size:13px;color:var(--text-2)}
.profile-game a,.profile-game span{display:inline-flex;align-items:center;gap:4px}
.profile-game .streak{color:#f97316}
.menu .badge-count{margin-left:auto}
.online-txt{color:var(--online);font-weight:700;display:inline-flex;align-items:center;gap:5px}.online-txt i{width:8px;height:8px;border-radius:50%;background:var(--online);display:inline-block}
/* Лайк и кит: контур → заливка при нажатии */
.act .on-ico{display:none}.act.on .on-ico{display:inline-block}.act.on .off-ico{display:none}
.act.like .on-ico{color:var(--like);stroke:var(--like)}
.act.whale .on-ico{color:var(--whale);stroke:var(--whale);--icon-cut:var(--card)}
.act.whale svg{width:20px;height:20px}
.act.on .on-ico{animation:pop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.rx{display:inline-flex;align-items:center}.rx svg.i{width:15px;height:15px}
.rx-heart{color:#ef4444}.rx-heart svg.i{stroke:#ef4444}
.rx-whale{color:#2563eb;--icon-cut:#fff}.rx-whale svg.i{stroke:#2563eb;width:17px;height:17px}
.msg-reacts span{display:inline-flex;align-items:center;gap:3px;padding:1px 6px}
.story-bottom button.r{display:inline-flex;padding:6px}
.story-bottom button.r .rx svg.i{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.story-bottom button.r .rx-whale{--icon-cut:#fff}

/* Мобильное меню со всеми функциями */
.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);flex:1;height:58px;position:relative;gap:2px;font-size:10px;font-weight:700;background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
.mobile-nav button.active{color:var(--text)}
html:not(.p-nav-labels) .mobile-nav button span:not(.mbadge){display:none}
.mmenu{position:fixed;inset:0;z-index:120;background:var(--bg);overflow-y:auto;padding:12px 16px calc(80px + env(safe-area-inset-bottom));animation:mm-in .18s ease-out}
.mmenu[hidden]{display:none}
@keyframes mm-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mmenu-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mmenu-search{display:flex;align-items:center;gap:8px;background:var(--input);border-radius:14px;padding:0 12px;margin-bottom:6px}
.mmenu-search svg.i{width:18px;height:18px;color:var(--text-3);flex-shrink:0}
.mmenu-search input{background:none;border:none;margin:0;padding:12px 0;flex:1;box-shadow:none}
.mmenu-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:16px 4px 8px}
.mmenu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mmenu-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:var(--card);border:1px solid var(--border);font-size:11.5px;font-weight:600;text-align:center;line-height:1.2;color:var(--text)}
.mmenu-grid a svg.i{width:22px;height:22px}
.mmenu-list{margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.mmenu-list>a,.mmenu-list>button,.mmenu-list form button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;border-top:1px solid var(--border);font:inherit;font-weight:600;color:var(--text);cursor:pointer;text-align:left}
.mmenu-list>:first-child{border-top:none}
.mmenu-list form{margin:0}
.mmenu-list .danger{color:var(--danger)}
.mmenu-list svg.i{width:20px;height:20px}
html.in-app .hide-in-app{display:none!important}
@media (max-width:360px){.mmenu-grid{grid-template-columns:repeat(3,1fr)}}

/* Настройки: поиск и навигация по разделам */
.set-search{position:relative;display:flex;align-items:center;gap:8px;background:var(--input);border-radius:14px;padding:0 12px;margin-bottom:10px}
.set-search>span svg.i{width:18px;height:18px;color:var(--text-3)}
.set-search input{background:none;border:none;box-shadow:none;margin:0;padding:11px 0;flex:1}
.set-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:60;overflow:hidden;max-height:60vh;overflow-y:auto}
.set-results a{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-top:1px solid var(--border)}
.set-results a:first-child{border-top:none}.set-results a span{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.set-results .empty{padding:14px}
.settings-nav{position:sticky;top:0;z-index:40;background:var(--bg);padding:6px 0;margin:0 0 12px;flex-wrap:nowrap}
.settings-nav .chip{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){.settings-nav{top:56px;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}}
.set-pager{display:flex;justify-content:space-between;gap:10px;margin:16px 0 8px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--link)}100%{box-shadow:0 0 0 0 transparent}}

/* ===== Чаты: поле ввода, запись, плееры ===== */
.cmp{position:relative}
.cmp-row{display:flex;align-items:flex-end;gap:2px}
.cmp-row textarea{flex:1;margin:0;min-height:42px}
.cmp .icon-btn{flex-shrink:0;color:var(--text-2)}
.cmp-rec{width:42px;height:42px;touch-action:none;user-select:none;-webkit-user-select:none}
.cmp-rec svg.i{width:23px;height:23px}
.cmp-send{flex-shrink:0;width:42px;height:42px;border:none;border-radius:50%;background:none;color:var(--link);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s}
.cmp-send:hover{background:color-mix(in srgb,var(--link) 10%,transparent)}
.cmp-send:active{transform:scale(.92)}
.cmp-send svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp.recording .cmp-send{background:var(--link);color:#fff}
.cmp.recording .cmp-row>.cmp-tool,.cmp.recording .cmp-row>textarea{display:none}
.rec-panel{flex:1;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 4px}
.rec-panel .rec-cancel{color:var(--danger)}
.rec-time{font-variant-numeric:tabular-nums;font-weight:700;min-width:36px}
.rec-meter{flex:1;display:flex;align-items:center;gap:2px;height:24px;overflow:hidden}
.rec-meter i{display:block;width:3px;border-radius:2px;background:var(--danger);opacity:.75;height:8%;transition:height .08s}
.rec-hint{position:absolute;right:8px;bottom:calc(100% + 6px);background:var(--text);color:var(--bg);font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:10px;opacity:0;transform:translateY(4px);transition:.18s;pointer-events:none;white-space:nowrap}
.rec-hint.show{opacity:1;transform:none}
.rec-circle{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);width:230px;height:230px;z-index:30;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.rec-circle video{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scaleX(-1);background:#000}
.rec-circle svg{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.rec-circle circle{fill:none;stroke:var(--danger);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:calc(301.6 * (1 - var(--p,0)))}

/* голосовое */
.bubble.has-voice{padding:7px 10px 7px 7px}
.vmsg{display:flex;align-items:center;gap:9px;min-width:200px;max-width:280px}
.vmsg audio{display:none}
.vplay{width:40px;height:40px;border-radius:50%;border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--link);color:#fff}
.vplay svg.i{width:18px;height:18px;fill:currentColor;stroke:currentColor}
.msg.mine .vplay{background:var(--on-brand);color:var(--brand)}
.vwave{flex:1;display:flex;align-items:center;gap:2px;height:30px;cursor:pointer}
.vwave i{flex:1;min-width:2px;max-width:4px;border-radius:2px;background:currentColor;opacity:.3}
.vwave i.on{opacity:1}
.vmsg{color:var(--link)}.msg.mine .vmsg{color:var(--on-brand)}
.vdur{font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:600;min-width:30px;color:var(--text-2)}
.msg.mine .vdur{color:color-mix(in srgb,var(--on-brand) 80%,transparent)}
.vspeed{border:none;background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;font-size:11px;font-weight:800;border-radius:8px;padding:2px 6px;cursor:pointer}
/* кружок */
.bubble.has-circle{background:none!important;padding:0}
.vcircle{position:relative;width:220px;height:220px;cursor:pointer}
.vcircle video{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#000}
.vring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.vring circle{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:0;transition:stroke-dashoffset .25s linear}
.vcircle.sound .vring circle{opacity:.95}
.vcircle .vdur{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(0,0,0,.45);color:#fff;padding:2px 8px;border-radius:999px}
.vcircle .vsnd{position:absolute;right:20px;bottom:12px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;color:#fff}
.vcircle .vsnd svg.i{width:14px;height:14px}
.vcircle.sound .vsnd{display:none}
.vcircle.paused::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.25)}
@media (max-width:640px){.vcircle{width:200px;height:200px}.rec-circle{width:200px;height:200px}}
.msg.gone{display:none}
/* огоньки в чатах */
.fire{display:inline-flex;align-items:center;gap:1px;color:#f97316;font-size:12.5px;font-weight:800;flex-shrink:0;margin-left:2px}
.fire svg.i{width:15px;height:15px;fill:#fb923c;stroke:#ea580c;stroke-width:1.6}
.fire.warm svg.i{fill:#f97316;stroke:#dc2626}.fire.warm{color:#ea580c}
.fire.hot svg.i{fill:#ef4444;stroke:#b91c1c}.fire.hot{color:#dc2626}
.fire.legend svg.i{fill:#a855f7;stroke:#7e22ce}.fire.legend{color:#9333ea}
.fire.risk{color:var(--text-3)}.fire.risk svg.i{fill:var(--input);stroke:var(--text-3)}

/* Nuvora+ */
.plus-name{background:var(--pg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-size:200% 100%}
@keyframes pn-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.av-wrap.plus-glow{position:relative;border-radius:50%;padding:2px;background:var(--pg);background-size:220% 220%}
.av-wrap.plus-glow>.av{box-shadow:0 0 0 2px var(--card)}
.gift{position:relative}.gift-plus{position:absolute;top:6px;right:6px;font-size:8.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#a78bfa,#6d28d9);padding:1px 5px;border-radius:999px}
.gift.excl{background:linear-gradient(180deg,color-mix(in srgb,#a855f7 10%,var(--card)),var(--card))}
.bg-aurora{background:linear-gradient(120deg,#22d3ee,#a855f7 55%,#ec4899)!important;color:#fff!important}
.bg-cosmos{background:radial-gradient(circle at 30% 20%,#7c3aed,#1e1b4b 70%)!important;color:#fff!important}
.bg-goldbg{background:linear-gradient(135deg,#fde68a,#f59e0b 50%,#b45309)!important;color:#422006!important}
.bg-ocean{background:linear-gradient(160deg,#22d3ee,#1d4ed8 70%)!important;color:#fff!important}
.plus-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.plus-feat{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.plus-feat .pi{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.plus-feat .pi svg.i{width:20px;height:20px}
.plus-hero{background:linear-gradient(120deg,#22d3ee,#a855f7 55%,#ec4899);color:#fff;border:none;text-align:center;padding:34px 20px}
.plus-hero .plus-tag{font-size:13px;padding:4px 12px 4px 9px;vertical-align:middle}

/* Без синей подсветки при нажатии; обводка фокуса — только при работе с клавиатуры */
*{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:2px solid color-mix(in srgb,var(--link) 70%,transparent);outline-offset:2px;border-radius:10px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
button,a,label{-webkit-touch-callout:none}
.icon-btn:active,.act:active,.btn:active,.chip:active,.mobile-nav a:active,.mobile-nav button:active,.mmenu-grid a:active{transform:scale(.96)}
svg.i,.icon-btn svg,.act svg,.mobile-nav svg,.ico svg,.tool svg{stroke-width:1.9}

/* Загрузка файлов: прогресс */
#uploads{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:150;display:flex;flex-direction:column;gap:8px;max-width:420px;margin:0 auto;pointer-events:none}
@media (min-width:900px){#uploads{left:auto;right:20px;bottom:20px;width:360px}}
.upl{pointer-events:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.upl.show{opacity:1;transform:none}
.upl-top{display:flex;align-items:center;gap:8px;font-size:14px}
.upl-t{flex:1}.upl-pct{font-variant-numeric:tabular-nums;font-weight:800}
.upl-x{border:none;background:none;color:var(--text-3);cursor:pointer;display:flex;padding:2px}.upl-x svg.i{width:16px;height:16px}
.upl-bar{height:6px;border-radius:3px;background:var(--input);overflow:hidden;margin:8px 0 6px}
.upl-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--link);transition:width .2s linear}
.upl.proc .upl-bar i{background:linear-gradient(90deg,var(--link),color-mix(in srgb,var(--link) 40%,#fff),var(--link));background-size:200% 100%;animation:upl-shine 1s linear infinite}
@keyframes upl-shine{to{background-position:-200% 0}}
.upl.ok .upl-bar i{background:var(--success,#16a34a)}.upl.fail .upl-bar i{background:var(--danger)}
.upl-sub{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}

/* ===== Плавность ===== */
/* Переходы между страницами без белой вспышки (View Transitions, Chrome/Android WebView 126+) */
@view-transition{navigation:auto}
.mobile-nav{view-transition-name:mnav}
.mobile-top{view-transition-name:mtop}
.sidebar{view-transition-name:sidebar}
::view-transition-group(mnav),::view-transition-group(mtop),::view-transition-group(sidebar){animation:none}
::view-transition-old(root){animation:vt-out .14s ease-in both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
html.p-reduce-motion::view-transition-old(root),html.p-reduce-motion::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* полоса загрузки сверху при переходе */
#nav-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:500;background:var(--link);box-shadow:0 0 8px var(--link);opacity:0;transition:width .4s ease,opacity .3s;pointer-events:none}
#nav-progress.run{opacity:1;width:70%;transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .2s}
/* меню, окна, уведомления */
.menu.open{animation:pop-in .16s cubic-bezier(.2,.8,.2,1);transform-origin:top right}
@keyframes pop-in{from{opacity:0;transform:scale(.94) translateY(-4px)}}
.modal-bg.open{animation:fadein .18s ease-out}
.modal-bg.open .modal{animation:modal-in .26s cubic-bezier(.2,.9,.25,1)}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.97)}}
@media (max-width:640px){.modal-bg{align-items:flex-end;padding:0}.modal-bg .modal{border-radius:22px 22px 0 0;max-height:90vh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}@keyframes modal-in{from{transform:translateY(100%)}}}
.lightbox.open{animation:fadein .18s}.lightbox.open img{animation:modal-in .25s cubic-bezier(.2,.9,.25,1)}
.mmenu{animation:mm-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes mm-in{from{opacity:0;transform:translateY(24px)}}
.msg.appear{animation:msg-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes msg-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
/* вкладки и кнопки */
.tabs a,.chip,.btn,.icon-btn,.act,.mobile-nav a,.mobile-nav button{transition:background .18s,color .18s,transform .12s,box-shadow .18s}
/* картинки появляются мягко, без «выпрыгивания» */
.post-media img,.att,.media-tile img{animation:img-in .35s ease-out}
@keyframes img-in{from{opacity:0}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Профиль: аватарка и кнопки — две колонки, кнопки никогда не налезают на фото */
.profile-top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
.profile-top>*{grid-column:1/-1}
.profile-top>.profile-av{grid-column:1;grid-row:1}
.profile-top>.profile-actions{grid-column:2;grid-row:1;position:static;align-self:end;justify-self:end;flex-wrap:wrap;justify-content:flex-end;padding-bottom:6px;min-width:0}
@media (max-width:640px){.profile-top>.profile-actions{gap:4px}.profile-actions .btn.sm{padding-left:12px;padding-right:12px}}
.av-wrap.plus-glow{display:inline-flex;line-height:0;vertical-align:middle}.profile-av .av-wrap.plus-glow{padding:3px}
.profile-top>.profile-av{align-self:start;align-items:flex-start}.profile-av>.av-wrap,.profile-av>a{align-self:flex-start}
.mmenu-rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:6px}
.mmenu-rows a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;font-size:14px;font-weight:600;color:var(--text);min-width:0}
.mmenu-rows a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmenu-rows a:active{background:var(--hover)}
.mmenu-rows svg.i{width:19px;height:19px;color:var(--text-2);flex-shrink:0}
.mmenu-more{margin-top:10px}
.mmenu-more summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);border:1px solid var(--border);border-radius:16px;font-weight:700;cursor:pointer}
.mmenu-more summary::-webkit-details-marker{display:none}
.mmenu-more summary span{flex:1}.mmenu-more summary svg.i{width:20px;height:20px}
.mmenu-more .chev{transform:rotate(-90deg);transition:transform .2s;color:var(--text-3)}
.mmenu-more[open] .chev{transform:rotate(90deg)}
.mmenu-more[open] summary{border-radius:16px 16px 0 0;border-bottom:none}
.mmenu-more[open] .mmenu-rows{border-radius:0 0 16px 16px;border-top:none}
.mmenu .mmenu-grid{margin-top:10px}
.rec-circle.back video{transform:none}
.rec-flip{position:absolute;right:6px;bottom:6px;width:46px;height:46px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
.rec-flip svg.i{width:22px;height:22px}

/* ===== Оформление чатов ===== */
.convo.has-wp .convo-box{background:var(--wp);background-attachment:local}
.convo.has-wp.wp-dark .day-sep,.convo.has-wp.wp-dark .msg-meta,.convo.has-wp.wp-dark .typing{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.convo.has-wp.wp-dark .day-sep{background:rgba(0,0,0,.28)}
.convo.has-wp .msg:not(.mine) .bubble{background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(6px)}
.convo[style*="--mine"] .msg.mine .bubble{background:var(--mine);color:#fff}
.convo[style*="--mine"] .msg.mine .vplay{background:#fff;color:var(--mine)}
.convo[style*="--mine"] .msg.mine .vmsg,.convo[style*="--mine"] .msg.mine .vdur{color:#fff}
.convo.cf-s .bubble{font-size:13px}.convo.cf-l .bubble{font-size:17px}.convo.cf-xl .bubble{font-size:19.5px}
.wp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wp-grid label{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:0}
.wp-grid input{display:none}
.wp-grid span{width:100%;aspect-ratio:3/4;border-radius:14px;background:var(--input);display:flex;align-items:center;justify-content:center;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--border)}
.wp-grid input:checked+span{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--link)}
.wp-grid small{font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bubble-row{display:flex;flex-wrap:wrap;gap:10px}.bubble-row input{display:none}
.bubble-row span{display:block;width:36px;height:36px;border-radius:50%;cursor:pointer}
.bubble-row input:checked+span{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--text)}
.jump-down{position:absolute;right:18px;bottom:92px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;color:var(--text)}
.jump-down svg.i{transform:rotate(-90deg);width:20px;height:20px}
.jump-down b{position:absolute;top:-6px;right:-4px;background:var(--link);color:#fff;font-size:11px;border-radius:999px;padding:1px 6px}
.convo{position:relative}
.typing-dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;animation:tdot 1.2s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}.typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes tdot{30%{opacity:1;transform:translateY(-2px)}}
.send-menu{position:fixed;right:16px;bottom:calc(140px + env(safe-area-inset-bottom));z-index:60;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:6px;animation:pop-in .16s}
.send-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:none;background:none;border-radius:10px;font:inherit;color:var(--text);cursor:pointer;white-space:nowrap}
.send-menu button:hover{background:var(--hover)}.send-menu svg.i{width:18px;height:18px}
.msg.scheduled .bubble{opacity:.75;border:1.5px dashed color-mix(in srgb,var(--text) 30%,transparent)}
.sched-tag{display:inline-flex;align-items:center;gap:3px;color:var(--link);font-weight:600}
.msg{transition:transform .2s}
.chat.marked .grow::after{content:"";display:block}
.chat.marked{position:relative}.chat.marked::after{content:"";position:absolute;right:16px;top:50%;width:11px;height:11px;border-radius:50%;background:var(--link);transform:translateY(-50%)}
.archive-row{color:var(--text)}.archive-row svg.i{width:22px;height:22px;color:var(--text-2)}

/* избранные сообщения, дни рождения, похожие посты, вкладки чатов */
.starred-row,.bday-row{gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:flex-start}
.bday-row{align-items:center}
.bday-row.today{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.starred-row:last-child,.bday-row:last-child{border-bottom:0}
.msg-tools button.on{color:#f59e0b}
.chat-tabs{margin-bottom:10px}
.chat-tabs .chip{white-space:nowrap;flex-shrink:0;cursor:pointer;border:0;font:inherit}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.similar-item{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-radius:14px;min-height:110px;color:inherit;transition:transform .15s}
.similar-item:hover{transform:translateY(-2px)}
.similar-item img,.similar-item video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--border)}
.si-text{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* ===================================================================== Nuvora 2.0 */
.to-top{position:fixed;right:18px;bottom:96px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer}
.to-top .i{transform:rotate(90deg)}
@media (min-width:900px){.to-top{bottom:28px}}
.ptr{position:fixed;left:50%;top:0;z-index:250;width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50px);opacity:0;transition:opacity .15s;pointer-events:none;color:var(--text)}
.ptr.spin .i{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.net-bar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:400;background:#dc2626;color:#fff;font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow)}
.net-bar.ok{background:#16a34a}
.nv-blurred body>*:not(#nv-lock){filter:blur(18px)}
.char-cnt{font-size:12px;color:var(--text-3);text-align:right;margin:2px 4px 6px}
.char-cnt.warn{color:var(--danger,#dc2626);font-weight:700}
.layout-chip{position:fixed;z-index:320;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:0;background:var(--brand);color:var(--on-brand);font:600 13px inherit;box-shadow:var(--shadow);cursor:pointer;max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-bg{align-items:flex-start;padding-top:12vh}
.pal{max-width:560px;width:calc(100% - 32px);padding:12px}
.pal-in{font-size:17px;margin:0 0 8px}
.pal-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text)}
.pal-item.sel,.pal-item:hover{background:var(--hover)}
.night-on body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:rgba(255,140,0,.12);mix-blend-mode:multiply}
[data-theme="dark"].night-on body::after{background:rgba(255,120,0,.08);mix-blend-mode:normal}
.p-amoled[data-theme="dark"]{--bg:#000;--card:#000;--card-2:#0a0a0a;--border:#1f1f22;--input:#0d0d0f}
.p-grayscale body{filter:grayscale(1)}
.p-focus-ring :focus-visible{outline:3px solid #f59e0b!important;outline-offset:2px}
.p-letter-spacing body{letter-spacing:.04em;word-spacing:.12em}
.p-wide-layout .main{max-width:760px}
.p-privacy-previews .chat .preview{filter:blur(5px);transition:filter .2s}
.p-privacy-previews .chat:hover .preview,.p-privacy-previews .chat:active .preview{filter:none}
.p-bubble-tails .msg .bubble{position:relative}
.p-bubble-tails .msg:not(.mine) .bubble{border-bottom-left-radius:6px}
.p-bubble-tails .msg.mine .bubble{border-bottom-right-radius:6px}
#nv-lock{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center}
.nv-locked body{overflow:hidden}
.lock-box{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lock-box img{width:64px;height:64px;border-radius:18px}
.pin-dots{display:flex;gap:14px}.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--text-2)}.pin-dots i.on{background:var(--text);border-color:var(--text)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.pin-pad button{height:72px;border-radius:50%;border:0;background:var(--card-2);color:var(--text);font:600 26px inherit;cursor:pointer}
.pin-pad button:disabled{visibility:hidden}
#nv-lock.shake .pin-dots{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.new-pill{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:0;background:var(--link);color:#fff;font:700 14px inherit;box-shadow:var(--shadow);cursor:pointer}
.new-pill .i{transform:rotate(90deg)}
.read-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#7c3aed,#2563eb);z-index:300;width:0;transition:width .1s}
.post-text{font-size:calc(1em * var(--read-scale,1))}
.pip-btn{position:absolute;right:8px;top:8px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85}
.me-mention{background:color-mix(in srgb,var(--link) 16%,transparent);border-radius:6px;padding:0 3px}
.flash{animation:flash 2s ease}
@keyframes flash{0%,40%{background:color-mix(in srgb,#f59e0b 30%,transparent)}100%{background:transparent}}
.composer.drag{outline:2px dashed var(--link);outline-offset:-6px}
.search-hist .card-title{display:flex;justify-content:space-between;align-items:center}
mark{background:color-mix(in srgb,#f59e0b 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.greet{position:relative;display:flex;flex-direction:column;gap:4px;padding-right:44px}
.greet .greet-x{position:absolute;right:8px;top:8px}
.greet.bday{background:linear-gradient(135deg,#fdf2f8,#ede9fe)}
[data-theme="dark"] .greet.bday{background:linear-gradient(135deg,#3b0764,#1e1b4b)}
.confetti{position:fixed;inset:0;z-index:500;pointer-events:none}
.draft-tag{color:var(--danger,#dc2626);font-weight:700}
.chat.swipe-arch{background:color-mix(in srgb,var(--link) 14%,transparent)}
.whatsnew-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,color-mix(in srgb,#7c3aed 14%,var(--card)),color-mix(in srgb,#2563eb 12%,var(--card)));color:var(--text)}
.whatsnew-card>.i:last-child{transform:rotate(180deg);opacity:.5}
.lightbox .lb-bar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;left:10px;display:flex;align-items:center;gap:8px;color:#fff}
.lightbox .lb-n{margin-right:auto;font-weight:700;padding-left:8px}
.lightbox .lb-btn{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer}
.lightbox.multi .lb-nav{display:flex}
.lightbox .lb-nav.prev{left:12px}.lightbox .lb-nav.next{right:12px}.lightbox .lb-nav.next .i{transform:rotate(180deg)}
.post-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.post-tools .btn .i{width:16px;height:16px}
.tts-on,[data-tts].on{background:color-mix(in srgb,var(--link) 18%,transparent)!important;color:var(--link)!important}
.unread-sep{text-align:center;margin:10px 0;font-size:12px;font-weight:700;color:var(--link);display:flex;align-items:center;gap:10px}
.unread-sep::before,.unread-sep::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--link) 40%,transparent)}
.select-mode .msg{cursor:pointer}
.select-mode .msg .msg-tools{display:none!important}
.msg.picked .bubble{outline:3px solid var(--link);outline-offset:2px}
.select-bar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:var(--card);border-top:1px solid var(--border)}
.select-bar #sel-n{flex-basis:100%;font-size:14px}
.wn-group{margin-bottom:6px}
.wn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.wn-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:14px;font-size:14px}
.wn-item .i{flex-shrink:0;color:var(--link);margin-top:2px}
.wn-num{font-size:44px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}
@media print{.mobile-nav,.topbar,header,aside,.sidebar,.post-actions,.post-tools,#comments,.to-top,.new-pill,.cookie-bar,#toasts{display:none!important}.main{max-width:none!important}body{background:#fff!important}}
.speed-btn{position:absolute;right:48px;top:8px;z-index:3;height:34px;min-width:40px;padding:0 8px;border-radius:17px;border:0;background:rgba(0,0,0,.55);color:#fff;font:700 13px inherit;cursor:pointer;opacity:.85}
.lightbox.zoom img{transform:scale(2);cursor:zoom-out;transition:transform .2s}
.lightbox.zoom{overflow:auto}
.tw-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:90px;align-items:end;margin-bottom:8px}
.tw-bars>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.tw-bars i{display:block;width:100%;max-width:26px;min-height:3px;border-radius:6px;background:linear-gradient(180deg,#7c3aed,#2563eb)}
.tw-bars span{font-size:11px;color:var(--text-3)}
.box.drag,#box.drag{outline:2px dashed var(--link);outline-offset:-8px}