:root {
  --blue: #176fc7;
  --blue-dark: #0b57a2;
  --ink: #172238;
  --muted: #718097;
  --line: #dce8f5;
  --bg: #f4f8fd;
  --card: #ffffff;
  --green: #38a675;
  --red: #ee5e68;
  --selected: #e1effd;
  --accent-soft: #ffebee;
  --violet: #4e7fb5;
  --accent: #cfe6ff;
  --accent-ink: #075eb9;
  --brand-gradient: linear-gradient(110deg, #1b4774 0%, #5d86af 54%, #a5c3df 100%);
  --cover-shade: linear-gradient(90deg, color-mix(in srgb, var(--blue-dark) 68%, transparent) 0%, color-mix(in srgb, var(--blue) 50%, transparent) 58%, color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  --shadow: 0 12px 34px rgba(54, 103, 151, .10);
  --focus-surface: #ffffff;
  --focus-border: #87b8e8;
  --focus-ring: rgba(23, 111, 199, .11);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --blue: #79baff;
  --blue-dark: #4d9be9;
  --ink: #eef6ff;
  --muted: #95a7bb;
  --line: #28394d;
  --bg: #0b121c;
  --card: #121d2a;
  --green: #5bc490;
  --red: #ff7079;
  --selected: #19314a;
  --accent-soft: #382126;
  --violet: #90c6ff;
  --accent: #285887;
  --accent-ink: #e1f0ff;
  --brand-gradient: linear-gradient(110deg, #071426 0%, #123b62 56%, #306d9e 100%);
  --shadow: 0 14px 40px rgba(0, 0, 0, .38);
  --focus-surface: #142131;
  --focus-border: #579ad9;
  --focus-ring: rgba(121, 186, 255, .12);
}

html[data-theme="mint"] {
  color-scheme: light;
  --blue: #6f850f;
  --blue-dark: #46550c;
  --ink: #181b16;
  --muted: #70746c;
  --line: #e1e5dc;
  --bg: #f8f9f6;
  --card: #ffffff;
  --green: #99c744;
  --red: #ff5148;
  --selected: #eef6d8;
  --accent-soft: #fff0ed;
  --violet: #7f962d;
  --accent: #b0d94f;
  --accent-ink: #182000;
  --brand-gradient: linear-gradient(110deg, #080b08 0%, #18230c 54%, #4b6815 100%);
  --shadow: 0 12px 34px rgba(32, 39, 21, .10);
  --focus-surface: #ffffff;
  --focus-border: #9ac5b3;
  --focus-ring: rgba(52, 116, 93, .11);
}

html[data-theme="liquidglass"] {
  color-scheme: light;
  --blue: #0874df;
  --blue-dark: #075cb7;
  --ink: #142239;
  --muted: #6b7c94;
  --line: rgba(124, 170, 221, .26);
  --bg: #f3f8ff;
  --card: rgba(255, 255, 255, .68);
  --green: #42a77b;
  --red: #ef6471;
  --selected: rgba(207, 230, 255, .72);
  --accent-soft: rgba(255, 232, 236, .78);
  --violet: #4d83bf;
  --accent: rgba(198, 225, 255, .86);
  --accent-ink: #075fbd;
  --brand-gradient: linear-gradient(110deg, rgba(65, 120, 177, .82), rgba(130, 177, 220, .75), rgba(210, 231, 250, .66));
  --shadow: 0 18px 44px rgba(58, 111, 164, .11), inset 0 1px 0 rgba(255, 255, 255, .82);
  --focus-surface: rgba(255, 255, 255, .82);
  --focus-border: rgba(89, 155, 223, .58);
  --focus-ring: rgba(49, 128, 210, .12);
}

html[data-theme="vk"] {
  color-scheme: light;
  --blue: #2688eb; --blue-dark: #1d6fc3; --ink: #222222; --muted: #626d7a;
  --line: #dce1e6; --bg: #edeef0; --card: #ffffff; --green: #4bb34b; --red: #e64646;
  --selected: #e5ebf1; --accent-soft: #fae4e4; --violet: #447bba; --accent: #447bba;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #174b7a 0%, #2688eb 58%, #6ca9e6 100%);
  --shadow: 0 12px 34px rgba(42, 88, 128, .12);
}

html[data-theme="facebook"] {
  color-scheme: light;
  --blue: #0866ff; --blue-dark: #0756d6; --ink: #1c1e21; --muted: #65676b;
  --line: #d8dadf; --bg: #f0f2f5; --card: #ffffff; --green: #42b72a; --red: #e41e3f;
  --selected: #e7f3ff; --accent-soft: #ffe6eb; --violet: #1877f2; --accent: #0866ff;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #052b68 0%, #0866ff 58%, #63a0ff 100%);
  --shadow: 0 12px 34px rgba(24, 119, 242, .12);
}

html[data-theme="linkedin"] {
  color-scheme: light;
  --blue: #0a66c2; --blue-dark: #004182; --ink: #191919; --muted: #666666;
  --line: #d7d5d2; --bg: #f3f2ef; --card: #ffffff; --green: #057642; --red: #cc1016;
  --selected: #e2f0fe; --accent-soft: #fbe6e7; --violet: #0a66c2; --accent: #0a66c2;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #003b70 0%, #0a66c2 58%, #70a9d8 100%);
  --shadow: 0 12px 34px rgba(10, 102, 194, .11);
}

html[data-theme="instagram"] {
  color-scheme: light;
  --blue: #c13584; --blue-dark: #833ab4; --ink: #262626; --muted: #737373;
  --line: #dbdbdb; --bg: #faf7fb; --card: #ffffff; --green: #25d366; --red: #ed4956;
  --selected: #f8e7f1; --accent-soft: #fde8eb; --violet: #833ab4; --accent: #d62976;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(115deg, #4f5bd5 0%, #962fbf 34%, #d62976 65%, #feda75 100%);
  --shadow: 0 12px 36px rgba(193, 53, 132, .14);
}

html[data-theme="whatsapp"] {
  color-scheme: light;
  --blue: #128c7e; --blue-dark: #075e54; --ink: #111b21; --muted: #667781;
  --line: #d5dbd8; --bg: #efeae2; --card: #ffffff; --green: #25d366; --red: #ea5a65;
  --selected: #d9fdd3; --accent-soft: #ffe7e8; --violet: #128c7e; --accent: #25d366;
  --accent-ink: #073f32; --brand-gradient: linear-gradient(110deg, #064e46 0%, #128c7e 56%, #25d366 100%);
  --shadow: 0 12px 34px rgba(7, 94, 84, .13);
}

html[data-theme="telegram"] {
  color-scheme: light;
  --blue: #229ed9; --blue-dark: #168ac1; --ink: #1f2933; --muted: #6b7b88;
  --line: #d5e2e9; --bg: #eaf3f8; --card: #ffffff; --green: #31b545; --red: #df4b56;
  --selected: #dff1fa; --accent-soft: #fde7e9; --violet: #229ed9; --accent: #2aabee;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #116b94 0%, #229ed9 56%, #74c7ec 100%);
  --shadow: 0 12px 34px rgba(34, 158, 217, .13);
}

html[data-theme="max"] {
  color-scheme: light;
  --blue: #6e1aff; --blue-dark: #471aff; --ink: #0d001a; --muted: #6e6477;
  --line: #ded7eb; --bg: #f4f1ff; --card: #ffffff; --green: #00bfff; --red: #e64b65;
  --selected: #ede6ff; --accent-soft: #ffe7ed; --violet: #9500ff; --accent: #6e1aff;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #471aff 0%, #6e1aff 48%, #9500ff 72%, #00bfff 100%);
  --shadow: 0 12px 36px rgba(110, 26, 255, .14);
}

html[data-theme="blackwhite"] {
  color-scheme: light;
  --blue: #383b40; --blue-dark: #292c30; --ink: #202226; --muted: #707277;
  --line: #d9dadd; --bg: #f3f3f4; --card: #ffffff; --green: #3d4045; --red: #4b4e54;
  --selected: #e7e8ea; --accent-soft: #ebebed; --violet: #55585e; --accent: #3b3e43;
  --accent-ink: #ffffff; --brand-gradient: linear-gradient(110deg, #2b2d31 0%, #44474d 58%, #777a80 100%);
  --shadow: 0 12px 34px rgba(35, 37, 41, .13);
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; scroll-behavior: smooth; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; flex-direction: column; color: var(--ink); background: var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.app-shell, .public-shell { width: min(1180px, calc(100vw - 32px)); margin: 0 auto 38px; flex: 1 0 auto; }
.topbar, .public-topbar { min-height: 68px; margin: 16px 0 24px; padding: 10px 14px; display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; align-items: center; gap: 10px; isolation: isolate; position: sticky; top: 12px; z-index: 70; background: color-mix(in srgb, var(--card) 95%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.public-topbar { position: static; grid-template-columns: 1fr auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
.brand-mark, .greeting-mark { display: grid; place-items: center; color: var(--blue); background: linear-gradient(145deg, #f2f8ff, #dcecff); box-shadow: 0 7px 16px rgba(55, 111, 167, .15), inset 0 1px 0 rgba(255,255,255,.9); }
.brand-mark { width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--blue) 10%, transparent); border-radius: 13px; font-size: 20px; font-weight: 850; line-height: 1; }
.global-search { width: 38px; min-width: 38px; height: 38px; padding: 0; justify-self: end; display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; align-items: center; position: relative; color: var(--blue); background: var(--selected); border: 1px solid transparent; border-radius: 10px; transition: width .26s cubic-bezier(.2,.75,.25,1), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.global-search.is-open { color: var(--blue); background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.global-search-toggle, .global-search-close { width: 100%; height: 100%; padding: 0; display: grid; place-items: center; color: inherit; background: transparent; border: 0; cursor: pointer; }
.global-search-toggle { border-radius: 9px; }
.global-search-toggle:hover { color: var(--accent-ink); background: var(--accent); }
.global-search-toggle i { font-size: 17px; line-height: 1; }
.global-search input { width: 0; min-width: 0; padding: 0; opacity: 0; pointer-events: none; color: var(--ink); background: transparent; border: 0; outline: 0; transition: opacity .16s ease; }
.global-search.is-open input { width: 100%; padding: 0 5px 0 1px; opacity: 1; pointer-events: auto; }
.global-search input::placeholder { color: var(--muted); }
.global-search-close { width: 30px; height: 30px; margin-right: 4px; justify-self: end; opacity: 0; pointer-events: none; border-radius: 8px; transform: scale(.82); transition: opacity .16s ease, transform .16s ease, color .16s ease, background .16s ease; }
.global-search-close:hover { color: var(--ink); background: var(--selected); }
.global-search-close i { font-size: 13px; }
.global-search.is-open .global-search-close { opacity: 1; pointer-events: auto; transform: scale(1); }
.topbar.global-search-open { grid-template-columns: max-content minmax(220px, 1fr) max-content; }
.topbar.global-search-open .global-search { width: 100%; min-width: 0; height: 48px; justify-self: stretch; position: relative; z-index: 130; border-radius: 13px; transform-origin: right center; animation: global-search-expand .24s cubic-bezier(.2,.75,.25,1) both; }
.global-search-panel { width: 100%; max-height: min(540px, calc(100dvh - 112px)); padding: 12px; display: grid; gap: 10px; position: absolute; top: calc(100% + 9px); right: 0; z-index: 131; overflow: auto; overscroll-behavior: contain; color: var(--ink); background: color-mix(in srgb, var(--card) 97%, transparent); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 17%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: global-search-panel-in .18s ease both; }
.global-search-panel[hidden] { display: none; }
.global-search-status { min-height: 24px; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.global-search-status > i { color: var(--blue); font-size: 15px; }
.global-search-status .global-search-spinner { animation: global-search-spin .8s linear infinite; }
.global-search-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
.global-search-tabs[hidden] { display: none; }
.global-search-tab { min-width: 0; min-height: 35px; padding: 5px 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 10px; font-weight: 800; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.global-search-tab > i { font-size: 12px; }
.global-search-tab > b { min-width: 16px; padding: 1px 4px; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 99px; font-size: 9px; line-height: 1.35; }
.global-search-tab:hover { color: var(--blue); background: var(--selected); }
.global-search-tab[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 18%, transparent); }
.global-search-result-list { display: grid; gap: 5px; }
.global-search-result { min-width: 0; padding: 8px; display: grid; grid-template-columns: 39px minmax(0, 1fr) 20px; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 11px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.global-search-result:hover { background: var(--selected); border-color: color-mix(in srgb, var(--blue) 20%, var(--line)); transform: translateX(2px); }
.global-search-result-visual { width: 39px; height: 39px; display: grid; place-items: center; overflow: hidden; color: var(--blue); background: var(--selected); border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line)); border-radius: 12px; font-size: 16px; }
.global-search-result-visual img { width: 100%; height: 100%; object-fit: cover; }
.global-search-result-copy { min-width: 0; }
.global-search-result-copy strong, .global-search-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy strong { font-size: 12px; }
.global-search-result-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.global-search-result > .bi-arrow-up-right { justify-self: end; color: var(--blue); font-size: 13px; }
.global-search-empty { min-height: 112px; padding: 18px; display: grid; place-items: center; gap: 5px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 12px; font-size: 12px; }
.global-search-empty > i { color: var(--blue); font-size: 22px; }
.global-search-empty strong, .global-search-empty small { display: block; }
.global-search-empty small { margin-top: 2px; font-size: 10px; }
@keyframes global-search-panel-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes global-search-expand { from { opacity: .65; transform: scaleX(.13); } to { opacity: 1; transform: scaleX(1); } }
@keyframes global-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .topbar.global-search-open .global-search, .global-search-panel { animation: none; } }
@media (min-width: 801px) {
  /* Keep the trigger where it was before opening; the input grows to its left. */
  .topbar.global-search-open .global-search { grid-template-columns: minmax(0, 1fr) 34px 38px; grid-template-areas: "input close toggle"; }
  .topbar.global-search-open .global-search input { grid-area: input; padding: 0 8px 0 12px; }
  .topbar.global-search-open .global-search-close { grid-area: close; margin-right: 0; justify-self: center; }
  .topbar.global-search-open .global-search-toggle { grid-area: toggle; }
}
.user-chip { justify-self: end; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 750; }
.topbar-actions { min-width: 0; justify-self: end; display: flex; align-items: center; gap: 10px; }
.mood-picker { position: relative; }
.mood-picker summary { min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.mood-picker summary::-webkit-details-marker { display: none; }
.mood-picker[open] summary { color: var(--accent-ink); background: var(--accent); }
.mood-picker form { width: 210px; padding: 8px; display: grid; gap: 3px; position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.mood-picker button { padding: 7px 8px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font-size: 11px; text-align: left; cursor: pointer; }
.mood-picker button:hover, .mood-picker button.active { color: var(--blue); background: var(--selected); }
.mood-picker button.clear { color: var(--red); }
.password-login-panel { margin-top: 8px; }
.password-login-panel summary { color: var(--blue); font-size: 10px; font-weight: 750; cursor: pointer; }
.password-login-panel .stack-form { margin-top: 8px; }
.settings-popover { position: relative; }
.settings-button, .notification-button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; position: relative; color: var(--blue); background: var(--selected); border: 1px solid transparent; border-radius: 10px; font-size: 17px; transition: .18s ease; cursor: pointer; }
.settings-button:hover, .settings-button[aria-expanded="true"], .notification-button:hover, .notification-button.active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--blue) 20%, transparent); }
.notification-button.received { animation: notification-ring .7s ease; }
.live-notification-region { width: min(360px, calc(100vw - 24px)); position: fixed; right: max(12px, calc((100vw - 1180px) / 2)); bottom: 16px; z-index: 130; display: grid; gap: 8px; pointer-events: none; transition: bottom .25s ease; }
body.music-player-visible .live-notification-region { bottom: 132px; }
.live-notification-toast { padding: 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink); background: color-mix(in srgb, var(--card) 96%, transparent); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 18px 42px rgba(31,39,19,.18); backdrop-filter: blur(16px); animation: notification-in .28s ease both; pointer-events: auto; }
.live-notification-toast[hidden] { display: none; }
.live-notification-toast.leaving { animation: notification-out .24s ease both; }
.live-notification-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 12px; font-size: 13px; font-weight: 850; }
.live-notification-copy { min-width: 0; }
.live-notification-copy strong, .live-notification-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-notification-copy strong { font-size: 12px; }
.live-notification-copy small { color: var(--muted); font-size: 10px; }
.settings-menu { width: min(340px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 100px)); padding: 14px; overflow-y: auto; position: absolute; top: calc(100% + 11px); right: 0; z-index: 100; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.settings-menu[hidden] { display: none; }
.settings-menu > strong, .settings-menu > span, .settings-menu > small { display: block; }
.settings-menu > strong { font-size: 13px; }
.settings-menu > span { margin: 2px 0 11px; color: var(--muted); font-size: 9px; }
.settings-menu > small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.settings-menu > .settings-section-label { margin: 10px 0 5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.settings-menu > .settings-theme-hint { margin-top: 10px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.theme-options button { min-width: 0; padding: 9px 4px; display: grid; justify-items: center; gap: 4px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: 9px; cursor: pointer; }
.theme-options button i { font-size: 16px; }
.theme-options button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; font-weight: 800; }
.theme-options-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-options-brands button { padding: 7px 8px; display: flex; justify-content: flex-start; gap: 8px; text-align: left; }
.theme-brand-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; color: #fff; border-radius: 9px; font-size: 10px; font-weight: 900; letter-spacing: -.04em; }
.theme-brand-icon i { font-size: 14px !important; }
.theme-brand-vk { background: #0077ff; }
.theme-brand-facebook { background: #0866ff; font-family: Arial, sans-serif; font-size: 20px; }
.theme-brand-linkedin { background: #0a66c2; font-size: 12px; }
.theme-brand-instagram { background: linear-gradient(135deg, #4f5bd5, #c13584 55%, #f77737); }
.theme-brand-whatsapp { background: #25d366; }
.theme-brand-telegram { background: #229ed9; }
.theme-brand-max { background: linear-gradient(135deg, #471aff, #9500ff 62%, #00bfff); font-size: 8px; }
.theme-brand-blackwhite { color: #fff; background: #303238; border: 1px solid #303238; font-size: 17px; font-weight: 900; letter-spacing: -.08em; }
.theme-brand-mint { color: #acd44c; background: #10130c; border: 1px solid #242b18; font-size: 17px; }
.theme-brand-liquidglass { color: #0874df; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(207,229,255,.74)); border: 1px solid rgba(67,137,211,.18); box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(53,111,169,.14); font-size: 17px; }
.notification-count { min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; position: absolute; top: -4px; right: -5px; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: 10px; font-size: 8px; line-height: 1; }
.mobile-menu-button { display: none; width: 38px; height: 38px; padding: 0; place-items: center; gap: 4px; background: var(--selected); border: 0; border-radius: 11px; }
.mobile-menu-button span { width: 16px; height: 2px; background: var(--blue); border-radius: 2px; }

.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.left-sidebar, .right-sidebar { position: sticky; top: 108px; }
.side-nav { display: grid; gap: 5px; }
.side-nav a { min-width: 0; padding: 11px 12px; display: flex; align-items: center; gap: 11px; position: relative; color: var(--muted); border-radius: 11px; font-size: 14px; font-weight: 700; transition: .18s ease; }
.side-nav a:hover { color: var(--blue); background: var(--selected); }
.side-nav a.active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--blue) 18%, transparent); }
.nav-icon { width: 20px; text-align: center; color: currentColor; font-size: 18px; font-weight: 500; line-height: 1; }
.nav-icon i { display: block; line-height: 1; }
.nav-notification-count { min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--red); border-radius: 10px; box-shadow: 0 3px 8px color-mix(in srgb, var(--red) 28%, transparent); font-size: 8px; font-weight: 850; line-height: 1; }
.privacy-note { margin-top: 18px; padding: 14px; display: flex; gap: 10px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.privacy-note > span { color: var(--blue); font-size: 19px; }
.privacy-note p { margin: 0; }
.privacy-note strong, .privacy-note small { display: block; }
.privacy-note strong { margin-bottom: 2px; font-size: 12px; }
.privacy-note small { color: var(--muted); font-size: 10px; }
.logout-form { margin-top: 12px; }
.logout-form button { width: 100%; padding: 9px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; }
.logout-form button:hover { color: var(--red); background: var(--accent-soft); }
.main-column { min-width: 0; }
.right-sidebar { display: grid; gap: 14px; }

.card, .content-card, .post-card, .page-header, .profile-hero, .community-hero, .topic-list, .conversation-list, .notification-list, .chat-card, .create-community-card, .sidebar-action-card, .composer-link { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.card { padding: 18px; }
.card h2, .card-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.card-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading a { color: var(--blue); font-size: 12px; font-weight: 750; }
.stats-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stats-live-indicator { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.stats-live-indicator i { width: 6px; height: 6px; display: block; background: var(--accent); border-radius: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.stats-live-indicator.updated i { animation: live-pulse .7s ease; }
.stats-grid { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stats-grid div { min-height: 58px; padding: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--selected); border-radius: 11px; text-align: center; }
.search-community-results { margin-top: 18px; }
.stats-grid strong, .stats-grid div > span { display: block; }
.stats-grid strong { height: 1.35em; display: inline-flex; align-items: flex-start; position: relative; overflow: hidden; color: var(--blue); font-size: 21px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.stats-grid div > span { color: var(--muted); font-size: 10px; }
.stats-digit-slot { width: .64em; height: 1.35em; display: inline-block; position: relative; overflow: hidden; }
.stats-digit { width: 100%; position: absolute; inset: 0; display: grid; place-items: start center; color: inherit; line-height: 1.35; will-change: transform, opacity; }
.stats-digit.current { animation: stats-digit-out .78s cubic-bezier(.2,.72,.24,1) both; animation-delay: var(--digit-delay, 0ms); }
.stats-digit.next { animation: stats-digit-in .78s cubic-bezier(.2,.72,.24,1) both; animation-delay: var(--digit-delay, 0ms); }
.stats-digit.stable { transform: translateY(0); }
.people-list { margin-top: 13px; display: grid; gap: 11px; }
.person-row { display: flex; align-items: center; gap: 10px; }
.person-row span:last-child { min-width: 0; }
.person-row strong, .person-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row strong { max-width: 170px; font-size: 12px; }
.person-row small { color: var(--muted); font-size: 9px; }
.sidebar-switcher-card { padding: 12px; }
.sidebar-tabs { padding: 3px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: var(--bg); border-radius: 10px; }
.sidebar-tabs button { min-width: 0; padding: 7px 5px; overflow: hidden; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sidebar-tabs button:hover { color: var(--ink); }
.sidebar-tabs button.active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 18%, transparent); }
.sidebar-panel[hidden] { display: none; }
.sidebar-panel .people-list, .community-mini-list { margin-top: 12px; }
.sidebar-empty { margin: 0; padding: 13px 8px; color: var(--muted); background: var(--bg); border-radius: 9px; font-size: 9px; line-height: 1.45; text-align: center; }
.sidebar-view-all { margin-top: 10px; padding: 6px 4px 1px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--blue); font-size: 9px; font-weight: 800; }
.sidebar-view-all:hover { color: var(--blue-dark); }
.community-mini-list { display: grid; gap: 10px; }
.community-mini-row { min-width: 0; display: flex; align-items: center; gap: 9px; }
.community-mini-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; overflow: hidden; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 12px; font-weight: 850; }
.community-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-channel-avatar { color: #fff; background: linear-gradient(145deg, #8b62d4, #c148a1); border-radius: 50%; }
.sidebar-channel-avatar i { font-size: 15px; }
.community-mini-row > span:last-child { min-width: 0; }
.community-mini-row strong, .community-mini-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-mini-row strong { color: var(--ink); font-size: 11px; }
.community-mini-row small { color: var(--muted); font-size: 8px; }
.sidebar-action-card, .create-community-card { padding: 13px; display: flex; align-items: center; gap: 11px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sidebar-action-card:hover { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); }
.sidebar-action-card > span, .create-community-card > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent-ink); background: var(--accent); border-radius: 11px; font-size: 19px; }
.sidebar-action-card p, .create-community-card p { margin: 0; }
.sidebar-action-card strong, .sidebar-action-card small, .create-community-card strong, .create-community-card small { display: block; }
.sidebar-action-card strong, .create-community-card strong { font-size: 12px; }
.sidebar-action-card small, .create-community-card small { color: var(--muted); font-size: 9px; }

.avatar { display: inline-grid; place-items: center; flex: 0 0 auto !important; align-self: center; aspect-ratio: 1; min-width: var(--avatar-size, 28px); max-width: var(--avatar-size, 28px); overflow: hidden; object-fit: cover; border-radius: 10px; }
.avatar-fallback { color: var(--blue); background: linear-gradient(145deg, #f2f7f4, var(--selected)); font-weight: 800; }
.avatar-shell { width: var(--avatar-shell-size, 36px); height: var(--avatar-shell-size, 36px); display: inline-grid; place-items: center; flex: 0 0 var(--avatar-shell-size, 36px); position: relative; }
.avatar-shell-tiny { --avatar-shell-size: 28px; }
.avatar-shell-small { --avatar-shell-size: 36px; }
.avatar-shell-medium { --avatar-shell-size: 44px; }
.avatar-shell-large { --avatar-shell-size: 74px; }
.avatar-shell-xlarge { --avatar-shell-size: 104px; }
.avatar-online-dot { width: 10px; height: 10px; position: absolute; right: -1px; bottom: -1px; z-index: 2; background: #27b866; border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 1px 4px rgba(18,102,57,.28); }
.avatar-shell[data-story-avatar] { isolation: isolate; }
.avatar-shell-has-stories { overflow: visible; --avatar-story-ring-read: color-mix(in srgb, var(--muted) 62%, var(--card)); }
.avatar-shell-has-stories .avatar { position: relative; z-index: 1; }
.avatar-story-host { position: relative; isolation: isolate; }
.avatar-story-host.avatar-story-host-has-stories { overflow: visible; --avatar-story-ring-read: color-mix(in srgb, var(--muted) 62%, var(--card)); }
.avatar-story-host.avatar-story-host-has-stories > :is(img, span:not(.avatar-story-ring)) { position: relative; z-index: 1; }
.avatar-story-ring { position: absolute; z-index: 0; inset: -3px; display: block; pointer-events: none; background: var(--avatar-story-ring); border-radius: 50%; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 26%, transparent)); animation: mirt-avatar-story-ring-in .32s cubic-bezier(.18,.78,.3,1) both; }
.avatar-shell-has-stories.has-seen-stories .avatar-story-ring { filter: none; }
@keyframes mirt-avatar-story-ring-in { from { opacity: 0; transform: scale(.74) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .avatar-story-ring { animation: none; } }
.photo-viewer-comment-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.photo-viewer-comment-controls > button, .photo-viewer-comment-reactions button, .photo-viewer-comment-reaction-picker button { padding: 2px 4px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 10px; cursor: pointer; }
.photo-viewer-comment-reactions { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.photo-viewer-comment-reactions button:hover, .photo-viewer-comment-reactions button.active { color: var(--blue); background: var(--selected); }
.photo-viewer-comment-reaction-picker { position: relative; display: inline-flex; }
.photo-viewer-comment-reaction-picker[hidden] { display: none; }
.photo-viewer-comment-reaction-picker > button { min-width: 24px; min-height: 24px; padding: 2px; display: inline-grid; place-items: center; color: var(--muted); font-size: 14px; font-weight: 700; }
.photo-viewer-comment-reaction-picker > button:hover { color: var(--blue); background: var(--selected); }
.mirt-reaction-placeholder { color: var(--muted); }
.photo-viewer-comment-reaction-options { max-width: calc(100vw - 16px); padding: 5px; position: absolute; left: 0; bottom: calc(100% + 5px); z-index: 20; display: grid; grid-template-columns: repeat(7, 24px); grid-auto-rows: 24px; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.photo-viewer-comment-reaction-options[hidden] { display: none; }
.photo-viewer-comment-reaction-options button { width: 24px; height: 24px; min-width: 0; padding: 0; font-size: 16px; }
.photo-viewer-comment.is-reply { margin-left: 28px; }
.avatar-tiny { --avatar-size: 28px; width: 28px; height: 28px; font-size: 10px; }
.avatar-small { --avatar-size: 36px; width: 36px; height: 36px; font-size: 12px; }
.avatar-medium { --avatar-size: 44px; width: 44px; height: 44px; font-size: 14px; }
.avatar-large { --avatar-size: 74px; width: 74px; height: 74px; font-size: 24px; }
.avatar-xlarge { --avatar-size: 104px; width: 104px; height: 104px; font-size: 34px; }

.greeting-card { min-height: 176px; padding: 30px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; color: #fff; background: radial-gradient(circle at 82% 28%, rgba(255,255,255,.18), transparent 25%), var(--brand-gradient); border-radius: 20px; box-shadow: 0 15px 30px rgba(52,116,93,.2); }
.profile-cover-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.profile-cover-shade { position: absolute; inset: 0; background: var(--cover-shade); }
.profile-cover-shell { position: relative; }
.greeting-copy, .greeting-avatar-stack, .greeting-avatar-link { position: relative; z-index: 2; }
.greeting-copy { max-width: calc(100% - 125px); }
.greeting-card .greeting-copy > span { opacity: .84; font-size: 13px; }
.greeting-card h1 { margin: 2px 0 4px; color: #fff; font-size: clamp(25px, 4vw, 35px); letter-spacing: -.035em; }
.greeting-card p { max-width: 520px; margin: 0; opacity: .86; font-size: 12px; overflow-wrap: anywhere; }
.greeting-avatar-link { width: 96px; min-width: 96px; max-width: 96px; height: 96px; min-height: 96px; max-height: 96px; aspect-ratio: 1 / 1; display: grid; place-items: center; flex: 0 0 96px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 28px; background: rgba(255,255,255,.13); box-shadow: 0 12px 28px rgba(24,59,46,.18); transition: transform .18s ease, background .18s ease; }
.greeting-avatar-link:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.greeting-avatar-stack { display: grid; justify-items: center; flex: 0 0 auto; }
.profile-summary-toggle { width: 30px; height: 30px; display: grid; place-items: center; position: absolute; right: 14px; bottom: 12px; z-index: 3; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 10px; box-shadow: 0 7px 18px rgba(16,43,33,.16); cursor: pointer; transition: background .2s ease, transform .35s ease; }
.profile-summary-toggle:hover { background: rgba(255,255,255,.27); }
.profile-summary-toggle i { transition: transform .35s cubic-bezier(.2,.72,.24,1); }
.profile-cover-shell.is-expanded .profile-summary-toggle i { transform: rotate(180deg); }
.profile-cover-shell.is-expanded .greeting-card { border-radius: 20px 20px 0 0; box-shadow: 0 8px 20px rgba(52,116,93,.14); }
.profile-detail-cover-shell { margin-bottom: 16px; }
.profile-detail-cover-shell > .profile-cover-card { margin-bottom: 0; }
.profile-cover-shell.is-expanded .profile-cover-card { border-radius: 16px 16px 0 0; box-shadow: 0 8px 20px rgba(52,116,93,.14); }
.profile-cover-controls { display: flex; align-items: center; gap: 8px; position: absolute !important; right: 14px; bottom: 12px; z-index: 3 !important; white-space: nowrap; }
.profile-cover-card .profile-cover-controls .profile-actions { width: auto; margin: 0; align-self: center; grid-area: auto; flex-wrap: nowrap; }
.profile-cover-controls .profile-summary-toggle { position: static; flex: 0 0 30px; }
.profile-summary-panel { display: grid; grid-template-rows: 0fr; position: relative; z-index: 1; overflow: hidden; opacity: 0; color: var(--ink); background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid transparent; border-top: 0; border-radius: 0 0 20px 20px; backdrop-filter: blur(18px); transform: translateY(-10px); pointer-events: none; transition: grid-template-rows .42s cubic-bezier(.2,.72,.24,1), opacity .3s ease, transform .42s cubic-bezier(.2,.72,.24,1), border-color .3s ease; }
.profile-cover-shell.is-expanded .profile-summary-panel { grid-template-rows: 1fr; opacity: 1; border-color: var(--line); transform: translateY(0); pointer-events: auto; }
.profile-summary-inner { min-height: 0; overflow: hidden; }
.profile-summary-panel .profile-summary-inner { padding: 0 22px; transition: padding .35s ease; }
.profile-cover-shell.is-expanded .profile-summary-panel .profile-summary-inner { padding-top: 20px; padding-bottom: 22px; }
.profile-summary-heading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-summary-heading h2 { margin: 2px 0 0; font-size: 17px; }
.profile-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-fact { min-width: 0; padding: 12px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 9px; background: color-mix(in srgb, var(--bg) 84%, transparent); border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 12px; }
.profile-fact-wide { grid-column: 1 / -1; }
.profile-fact > i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 9px; }
.profile-fact span, .profile-fact small, .profile-fact strong { min-width: 0; display: block; }
.profile-fact small { margin-bottom: 2px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.profile-fact strong { color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.greeting-avatar { width: 96px; min-width: 96px; max-width: 96px; height: 96px; min-height: 96px; max-height: 96px; aspect-ratio: 1 / 1; display: grid; place-items: center; object-fit: cover; object-position: center; border-radius: 27px; }
.greeting-avatar-fallback { color: #fff; font-size: 30px; font-weight: 800; }
.greeting-mark { width: 84px; height: 84px; border: 1px solid rgba(255,255,255,.2); border-radius: 27px; background: rgba(255,255,255,.14); box-shadow: none; font-size: 40px; }
.profile-media-card { margin-top: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: box-shadow .22s ease, border-color .22s ease; }
.profile-media-card.is-expanded { box-shadow: var(--shadow); }
.profile-media-tabs { padding: 10px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.profile-media-card.is-collapsed .profile-media-tabs { border-bottom-color: transparent; }
.profile-media-tabs-public { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.profile-media-tabs button { min-width: 0; padding: 9px 6px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font-size: 10px; font-weight: 750; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease; }
.profile-media-tabs button:hover { color: var(--ink); background: var(--bg); }
.profile-media-tabs button:active { transform: scale(.97); }
.profile-media-tabs button.active { color: var(--accent-ink); background: var(--accent); }
.profile-media-tabs i { font-size: 20px; }
.profile-media-panel { padding: 14px; animation: profile-media-panel-in .22s ease both; }
.profile-media-panel[hidden] { display: none; }
@keyframes profile-media-panel-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: hidden; border-radius: 13px; }
.profile-photo-grid a { aspect-ratio: 1.25; overflow: hidden; background: var(--bg); }
.profile-photo-grid img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }
.profile-photo-grid a:hover img { transform: scale(1.035); }
.media-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.media-video-grid article { min-width: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.media-video-grid video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #050606; object-fit: cover; }
.media-video-grid strong { padding: 8px 10px; display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.media-content-list { display: grid; gap: 6px; }
.media-content-row { min-width: 0; padding: 8px; display: grid; grid-template-columns: 46px minmax(0, 1fr) 16px; align-items: center; gap: 10px; background: var(--bg); border: 1px solid transparent; border-radius: 11px; }
.media-content-row:hover { color: var(--blue); border-color: var(--line); }
.media-content-icon { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 20px; }
.media-content-icon img { width: 100%; height: 100%; object-fit: cover; }
.media-content-row > span:nth-child(2) { min-width: 0; }
.media-content-row strong, .media-content-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-content-row strong { color: var(--ink); font-size: 10px; }
.media-content-row small { color: var(--muted); font-size: 8px; }
.media-content-row > i { color: var(--muted); font-size: 11px; }
.profile-media-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-media-actions > :only-child { grid-column: 1 / -1; }
.media-empty { min-height: 130px; padding: 24px; display: grid; justify-items: center; align-content: center; text-align: center; color: var(--muted); background: var(--bg); border-radius: 13px; }
.media-empty i { margin-bottom: 8px; color: var(--blue); font-size: 28px; }
.media-empty strong, .media-empty span { display: block; }
.media-empty strong { color: var(--ink); font-size: 13px; }
.media-empty span { margin-top: 3px; font-size: 9px; }
.profile-community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-community-tile { min-width: 0; padding: 9px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 14px; align-items: center; gap: 10px; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 12px; }
.profile-community-tile:hover { color: var(--blue); border-color: var(--line); }
.profile-community-cover { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; color: var(--blue); background: var(--selected); border-radius: 11px; font-size: 18px; font-weight: 850; }
.profile-community-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-community-tile > span:nth-child(2), .profile-community-tile strong, .profile-community-tile small, .profile-community-tile em { min-width: 0; display: block; }
.profile-community-tile strong, .profile-community-tile small, .profile-community-tile em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-community-tile strong { color: var(--ink); font-size: 11px; }
.profile-community-tile small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.profile-community-tile em { margin-top: 3px; color: var(--blue); font-size: 8px; font-style: normal; font-weight: 750; }
.profile-community-tile > i { color: var(--muted); font-size: 10px; }
.profile-music-list { display: grid; gap: 6px; }
.profile-privacy-notice { margin-top: 18px; padding: 15px 17px; display: flex; align-items: center; gap: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.profile-privacy-notice > i { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 17px; }
.profile-privacy-notice strong, .profile-privacy-notice span { display: block; }
.profile-privacy-notice strong { color: var(--ink); font-size: 12px; }
.profile-privacy-notice span { margin-top: 2px; font-size: 9px; }
.music-track-row { min-width: 0; padding: 8px 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 12px; transition: border-color .18s ease, background .18s ease; }
.music-track-row.is-playing { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); background: var(--selected); }
.music-track-play { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; font-size: 18px; cursor: pointer; }
.music-track-copy { min-width: 0; }
.music-track-copy strong, .music-track-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-copy strong { color: var(--ink); font-size: 11px; }
.music-track-copy small, .music-track-row time { color: var(--muted); font-size: 8px; }
.music-track-row time { white-space: nowrap; }
.music-track-actions, .video-card-actions { display: inline-flex; align-items: center; gap: 6px; }
.music-track-actions form, .video-card-actions form { margin: 0; }
.music-track-actions a, .music-track-actions button, .video-card-actions a, .video-card-actions button { padding: 3px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.video-card-actions { margin-top: 6px; }
.music-upload-card[hidden] { display: none; }
.music-form-actions { display: flex; gap: 8px; }
.music-library { padding: 16px; }
.music-library-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.music-library-heading h2 { margin: 0; font-size: 17px; }
.music-library-heading span { min-width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 10px; font-weight: 800; }
.music-player { width: min(290px, calc(100vw - 24px)); min-height: 72px; padding: 10px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 9px; position: fixed !important; right: max(12px, calc((100vw - 1180px) / 2)); bottom: calc(38px + env(safe-area-inset-bottom, 0px)); z-index: 129; color: var(--ink); background: color-mix(in srgb, var(--card) 96%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 52px rgba(24,37,29,.24); backdrop-filter: blur(18px); animation: player-in .28s ease both; }
.music-player[hidden] { display: none; }
.music-player-art { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 12px; font-size: 19px; }
.music-player-body { min-width: 0; }
.music-player-heading { display: flex; align-items: flex-start; gap: 6px; }
.music-player-heading > span { min-width: 0; flex: 1; }
.music-player-heading strong, .music-player-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-heading strong { font-size: 11px; }
.music-player-heading small { color: var(--muted); font-size: 8px; }
.music-player-heading button { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.music-player-transport { margin-top: 5px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; }
.music-player-controls { display: flex; align-items: center; gap: 2px; }
.music-player-controls button { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font-size: 12px; cursor: pointer; }
.music-player-controls button:hover { color: var(--ink); background: var(--selected); }
.music-player-controls button:disabled { opacity: .32; cursor: default; }
.music-player-controls .music-player-toggle { width: 28px; height: 28px; color: var(--accent-ink); background: var(--accent); font-size: 16px; }
.music-player-progress { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 3px; }
.music-player-progress time { color: var(--muted); font-size: 7px; font-variant-numeric: tabular-nums; }
.music-player-progress time:last-child { text-align: right; }
.music-player-progress input { width: 100%; height: 4px; accent-color: var(--accent); cursor: pointer; }
body.music-player-visible { padding-bottom: 0; }
.media-stat { min-height: 130px; display: grid; place-items: center; align-content: center; text-align: center; }
.media-stat strong { color: var(--blue); font-size: 34px; line-height: 1; }
.media-stat span { margin: 5px 0 13px; color: var(--muted); font-size: 10px; }
.media-stat a { color: var(--blue); font-size: 10px; font-weight: 800; }
.composer-link { margin-top: 18px; padding: 15px; display: flex; align-items: center; gap: 12px; }
.composer-link > span:not(.avatar) { min-width: 0; flex: 1; padding: 11px 14px; color: var(--muted); background: var(--bg); border-radius: 10px; font-size: 13px; }
.composer-send { min-height: 38px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--accent-ink); background: var(--accent); border-radius: 10px; font-size: 10px; font-weight: 850; }
.section-heading { margin: 22px 2px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h1, .section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.section-heading a { color: var(--blue); font-size: 12px; font-weight: 750; }

.post-card { margin-bottom: 14px; padding: 20px; position: relative; box-shadow: 0 5px 16px rgba(38,79,62,.04); }
.post-card-optimistic { opacity: .86; }
.post-optimistic-media {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
  border-radius: 12px;
}
.post-optimistic-media img {
  width: 100%;
  height: 220px;
  display: block;
  object-fit: cover;
}
.post-optimistic-actions { justify-content: flex-end; }
.post-card-pinned { border-color: color-mix(in srgb, var(--accent-ink) 28%, var(--line)); }
.post-card-archived { border-style: dashed; }
.post-author { display: flex; align-items: center; gap: 11px; }
.post-author-copy { min-width: 0; flex: 1; }
.post-author strong, .post-author span, .post-author time { display: block; }
.post-author strong { font-size: 13px; }
.post-author span { color: var(--muted); font-size: 10px; }
.post-author span a { color: var(--blue); }
.post-author time { color: var(--muted); font-size: 10px; }
.post-author time .post-edited-note { display: inline; color: var(--muted); font-size: inherit; }
.post-author time b { margin-left: 7px; display: inline-flex; align-items: center; gap: 3px; color: var(--blue); font-size: 9px; font-weight: 750; }
.post-menu-wrap { margin-left: auto; position: relative; flex: 0 0 auto; }
.post-menu-button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); background: var(--bg); border: 0; border-radius: 10px; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease; }
.post-menu-button:hover, .post-menu-button[aria-expanded="true"] { color: var(--ink); background: var(--selected); transform: translateY(-1px); }
.post-menu-button i { font-size: 20px; line-height: 1; }
.post-menu { width: min(280px, calc(100vw - 40px)); padding: 7px; position: absolute; top: 44px; right: 0; z-index: 45; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 20px 45px rgba(17,27,21,.2); }
.post-menu.open-up { top: auto; bottom: 44px; }
.post-menu[hidden] { display: none; }
.post-menu form { margin: 0; }
.post-menu button:not(.post-menu-button), .post-menu a { width: 100%; min-height: 40px; padding: 8px 10px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.post-menu button:hover, .post-menu a:hover { color: var(--blue); background: var(--bg); }
.post-menu button > i, .post-menu a > i { color: var(--blue); font-size: 17px; }
.post-menu button > span, .post-menu a > span { min-width: 0; display: block; overflow-wrap: anywhere; }
.post-comment-off-icon { width: 20px; min-width: 20px !important; height: 20px; display: grid !important; place-items: center; position: relative; color: var(--blue); overflow: visible !important; }
.post-comment-off-icon i { position: absolute; font-size: 17px; line-height: 1; }
.post-comment-off-icon i:last-child { font-size: 21px; text-shadow: -1px 0 var(--card), 1px 0 var(--card); transform: rotate(-5deg); }
.post-menu button > .post-comment-off-icon,
.post-menu button > .post-comment-off-icon > i { color: var(--blue) !important; }
.post-menu .danger, .post-menu .danger > i { color: var(--red); }
.post-menu-separator { height: 1px; margin: 5px 8px; display: block; background: var(--line); }
.post-statistics { margin-top: 13px; padding: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.post-statistics[hidden] { display: none; }
.post-statistics > strong { display: block; font-size: 11px; }
.post-statistics > div { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.post-statistics span { padding: 8px; color: var(--muted); background: var(--card); border-radius: 9px; font-size: 9px; }
.post-statistics b { margin-bottom: 2px; display: block; color: var(--ink); font-size: 15px; }
.post-text { margin: 16px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.post-quote-card { margin-top: 14px; padding: 13px; display: grid; gap: 11px; overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--bg) 78%, var(--card)); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 14px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.post-quote-card:hover { color: var(--ink); background: var(--selected); border-color: color-mix(in srgb, var(--blue) 36%, var(--line)); transform: translateY(-1px); }
.post-quote-source { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 9px; }
.post-quote-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--blue), var(--accent-ink)); border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line)); border-radius: 50%; font-size: 14px; font-weight: 800; }
.post-quote-avatar > img, img.post-quote-avatar { width: 38px; height: 38px; display: block; object-fit: cover; }
.post-quote-channel-avatar { background: linear-gradient(135deg, #8e64d8, #c04a97); }
.post-quote-source-copy { min-width: 0; }
.post-quote-source-copy strong, .post-quote-source-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-quote-source-copy strong { color: var(--ink); font-size: 13px; }
.post-quote-source-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.post-quote-mark { color: var(--blue); font-size: 23px; text-align: right; }
.post-quote-text { display: block; max-height: 8.2em; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.48; overflow-wrap: anywhere; }
.post-quote-media { width: 100%; max-height: 280px; display: block; object-fit: cover; background: var(--card); border: 1px solid var(--line); border-radius: 11px; }
.post-video-quote { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 76%, var(--card)), color-mix(in srgb, var(--card) 94%, var(--bg))); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); border-left-color: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent); }
.post-video-quote:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 98%, var(--card)), var(--selected)); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); }
.post-video-quote .post-quote-mark, .post-video-quote .post-quote-open { color: var(--accent-ink); }
.post-video-quote > .mirt-player { aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 11px; }
.post-quote-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--blue); font-size: 10px; font-weight: 800; }
.post-quote-unavailable { grid-template-columns: 34px minmax(0, 1fr); align-items: center; border-left-color: var(--muted); }
.post-quote-unavailable:hover { transform: none; }
.post-quote-unavailable > i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); background: var(--card); border-radius: 10px; }
.post-quote-unavailable strong, .post-quote-unavailable small { display: block; }
.post-quote-unavailable small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.post-location { margin-top: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.post-location > i { flex: 0 0 auto; color: var(--blue); font-size: 23px; }
.post-location strong, .post-location small { display: block; }
.post-location small { color: var(--muted); font-size: 9px; }
.post-actions { margin-top: 17px; padding-top: 12px; display: flex; gap: 20px; border-top: 1px solid var(--line); }
.post-actions { align-items: center; flex-wrap: wrap; position: relative; }
.post-views { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.post-share-menu { position: relative; }
.post-share-menu > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; list-style: none; }
.post-share-menu > summary::-webkit-details-marker { display: none; }
.post-share-menu[open] > summary { color: var(--blue); }
.post-share-menu > div { width: 250px; padding: 8px; display: grid; gap: 3px; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.post-share-menu form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.post-share-menu form > input[type=hidden] { display: none; }
.post-share-menu button, .post-share-menu select { min-width: 0; padding: 7px 8px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font-size: 10px; text-align: left; cursor: pointer; }
.post-share-menu select { background: var(--bg); border: 1px solid var(--line); }
.post-share-menu button:hover { background: var(--selected); }
.post-share-menu button.danger { color: var(--red); }
.photo-viewer-views { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #fff; background: rgba(8,16,28,.68); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; font-size: 12px; font-weight: 750; backdrop-filter: blur(8px); }
.photos-gallery-cell { min-width: 0; position: relative; }
.photos-gallery-cell .photos-gallery-item { height: 100%; display: block; }
.photo-item-menu { position: absolute; top: 9px; right: 9px; z-index: 5; opacity: 0; transition: opacity .15s ease; }
.photos-gallery-cell:hover .photo-item-menu, .photo-item-menu[open] { opacity: 1; }
.photos-gallery-cell.selected { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 13px; }
.photo-album-badge { max-width: calc(100% - 18px); padding: 5px 7px; position: absolute; left: 9px; bottom: 9px; overflow: hidden; color: #fff; background: rgba(8,16,28,.7); border-radius: 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(8px); }
.photo-item-menu > summary { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: rgba(8,16,28,.7); border-radius: 9px; cursor: pointer; list-style: none; backdrop-filter: blur(8px); }
.photo-item-menu > summary::-webkit-details-marker { display: none; }
.photo-item-menu > div { width: 205px; padding: 6px; position: absolute; top: 37px; right: 0; display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.photo-item-menu a, .photo-item-menu button { width: 100%; padding: 7px 9px; display: flex; align-items: center; gap: 8px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: 10px; text-align: left; cursor: pointer; text-decoration: none; }
.photo-item-menu a:hover, .photo-item-menu button:hover { background: var(--selected); }
.photo-item-menu .danger { color: var(--red); }
.photo-album-quick { padding: 5px; display: grid !important; grid-template-columns: 1fr auto; gap: 4px; background: var(--bg); border-radius: 8px; }
.photo-album-quick input { min-width: 0; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 7px; }
.photo-upload-card { margin-bottom: 12px; }
.photo-upload-publish-option { margin-top: 2px; }
.photo-upload-publish-option .security-checkbox { color: var(--ink); }
.photo-file-input { width: 100%; color: var(--muted); font: inherit; font-size: 10px; }
.photo-file-input::file-selector-button { margin-right: 10px; padding: 9px 13px; color: var(--blue); background: var(--selected); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 750; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.photo-file-input::file-selector-button:hover { background: var(--blue-soft); border-color: var(--blue-line); }
.media-form-actions { display: flex; gap: 8px; }
.media-item-menu { position: relative; }
.media-item-menu > summary { padding: 6px 8px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); background: var(--selected); border-radius: 8px; cursor: pointer; list-style: none; font-size: 10px; }
.media-item-menu > summary::-webkit-details-marker { display: none; }
.media-item-menu > div { width: 210px; padding: 6px; position: absolute; top: calc(100% + 5px); right: 0; z-index: 20; display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.media-item-menu a, .media-item-menu button { width: 100%; padding: 7px 8px; display: flex; gap: 7px; align-items: center; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: 10px; text-decoration: none; cursor: pointer; text-align: left; }
.media-item-menu a:hover, .media-item-menu button:hover { background: var(--selected); }
.media-item-menu .danger { color: var(--red); }
.playlist-quick { padding: 5px; display: grid !important; gap: 4px; background: var(--bg); border-radius: 8px; }
.playlist-quick input { min-width: 0; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 7px; }
.playlist-list, .video-album-list { margin-bottom: 12px; }
.playlist-row { padding: 9px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.playlist-row > i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 9px; }
.playlist-row span, .playlist-row small { display: block; }
.playlist-row small { color: var(--muted); }
.video-card.is-pinned { outline: 2px solid var(--blue); }
.video-card.selected { outline: 3px solid var(--blue); }
.comment-copy { min-width: 0; flex: 1; padding: 8px 10px; background: var(--selected); border-radius: 12px; }
.comment-copy > strong, .comment-copy > span, .comment-copy > small { display: block; }
.comment-copy > small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.comment-inline-actions { margin-top: 5px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 8px; }
.comment-inline-actions button, .comment-inline-actions summary { padding: 0; color: var(--blue); background: transparent; border: 0; font: inherit; font-weight: 700; cursor: pointer; list-style: none; }
.comment-inline-actions details { position: relative; }
.comment-inline-actions details > div { padding: 5px; position: absolute; bottom: calc(100% + 5px); left: 0; z-index: 8; display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.comment-inline-actions details form button { padding: 3px; font-size: 16px; }
.comment-reaction-picker[hidden] { display: none; }
.comment-reaction-picker > summary { min-width: 18px; font-size: 11px; }
.comment-reaction-summary { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.comment-reaction-summary form { margin: 0; }
.comment-reaction-summary button { padding: 2px 5px; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; cursor: pointer; }
.comment-reaction-summary button.is-mine { color: var(--blue); background: var(--accent-soft); border-color: var(--accent); }
[data-limited-media-list]:not(.expanded) > :nth-child(n+7) { display: none; }
.post-actions form { margin: 0; }
.comments-disabled, .post-pinned-note { padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.post-pinned-note { margin-left: auto; color: var(--blue); }
.text-button { padding: 3px 8px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.text-button:hover, .text-button.liked { color: var(--red); background: var(--accent-soft); }
/* =========================================================
   Реакции на посты
   ========================================================= */

.post-reactions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-wrap: wrap;
}

.post-reaction-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.post-reaction-chip {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.post-reaction-chip:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.post-reaction-chip.is-mine {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.post-reaction-emoji {
  font-size: 17px;
  line-height: 1;
}

.post-reaction-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.post-reaction-chip.is-mine .post-reaction-count {
  color: var(--ink);
}

.post-reaction-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.post-reaction-picker-wrap[hidden] {
  display: none;
}

.post-reaction-add {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.post-reaction-add .mirt-reaction-placeholder {
  font-size: 17px;
}

.post-reaction-add:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.post-reaction-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 60;

  /* Keep a predictable compact shape: the eighth (and every following)
     reaction starts a new row instead of widening the post actions. */
  display: grid;
  grid-template-columns: repeat(7, 34px);
  grid-auto-rows: 34px;
  align-items: center;
  gap: 4px;

  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;

  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.post-reaction-picker[hidden] {
  display: none;
}

.post-reaction-picker button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

.post-reaction-picker button:hover {
  background: var(--accent-soft);
  transform: scale(1.12);
}
.comments { margin-top: 12px; display: grid; gap: 8px; }
.comment { display: flex; align-items: flex-start; gap: 8px; }
.comment p { margin: 0; padding: 8px 11px; color: var(--ink); background: var(--bg); border-radius: 12px; font-size: 12px; }
.comment strong { margin-right: 7px; color: var(--ink); }
.comment-form { margin-top: 12px; display: flex; gap: 8px; }
.comment-form input { min-width: 0; flex: 1; padding: 9px 12px; background: var(--bg); border: 1px solid transparent; border-radius: 10px; outline: 0; }
.comment-form input:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.comment-form button { padding: 8px 11px; color: var(--blue); background: var(--selected); border: 0; border-radius: 9px; font-size: 11px; font-weight: 750; cursor: pointer; }

.content-card { margin-bottom: 16px; padding: 22px; }
.content-card h1 { margin-bottom: 16px; font-size: 25px; }
.content-card h2 { font-size: 17px; }
.composer-card { padding: 16px; }
.post-form { display: flex; align-items: flex-start; gap: 12px; }
.post-form-main { min-width: 0; flex: 1; }
.post-form textarea { width: 100%; min-height: 76px; padding: 12px 14px; resize: vertical; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 13px; outline: 0; }
.post-form textarea:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.post-form-actions { margin-top: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.post-form input[type=file] { width: 1px; height: 1px; position: absolute; opacity: 0; }
.dashboard-composer { margin-top: 18px; transition: padding .2s ease, box-shadow .2s ease; }
.dashboard-composer .post-form textarea { transition: min-height .2s ease, height .2s ease, border-radius .2s ease, background .2s ease; }
.dashboard-composer.is-collapsed { padding: 15px; cursor: text; }
.dashboard-composer.is-collapsed .post-form { align-items: center; }
.dashboard-composer.is-collapsed .post-form textarea { height: 44px; min-height: 44px; padding: 11px 14px; overflow: hidden; resize: none; border-radius: 10px; }
.dashboard-composer.is-collapsed .post-form-actions,
.dashboard-composer.is-collapsed .attachment-preview-list,
.dashboard-composer.is-collapsed .poll-composer-panel,
.dashboard-composer.is-collapsed .field-error { display: none; }
.file-button { margin-right: auto; padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); background: var(--selected); border: 0; border-radius: 9px; font-size: 12px; font-weight: 750; cursor: pointer; }
.post-tool-status { max-width: 210px; padding: 5px 8px; overflow: hidden; color: var(--muted); background: var(--bg); border-radius: 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-list { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.attachment-preview-item { position: relative; min-width: 0; height: 94px; padding: 7px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
.attachment-preview-item img,
.attachment-preview-item video { width: 100%; min-height: 0; flex: 1; display: block; object-fit: cover; border-radius: 7px; }
.attachment-preview-item > i { font-size: 25px; }
.attachment-preview-item > span { width: 100%; overflow: hidden; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-item > button { position: absolute; top: 4px; right: 4px; width: 23px; height: 23px; display: grid; place-items: center; color: #fff; background: rgba(20,24,22,.72); border: 0; border-radius: 10px; cursor: pointer; }
.voice-recorder-panel { margin-top: 9px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; background: color-mix(in srgb, var(--red) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--red) 25%, var(--line)); border-radius: 12px; }
.voice-recorder-panel[hidden] { display: none; }
.voice-recorder-panel > span:nth-child(2) { min-width: 120px; flex: 1; }
.voice-recorder-panel strong, .voice-recorder-panel small { display: block; }
.voice-recorder-panel small { margin-top: 2px; color: var(--red); font-variant-numeric: tabular-nums; }
.voice-recorder-pulse { width: 10px; height: 10px; flex: 0 0 10px; background: var(--red); border-radius: 50%; animation: voice-recording-pulse 1.2s ease-in-out infinite; }
@keyframes voice-recording-pulse { 50% { opacity: .35; transform: scale(.72); } }

.poll-composer-panel { margin-top: 10px; padding: 12px; display: grid; gap: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; }
.poll-composer-panel[hidden] { display: none; }
.poll-composer-heading { display: flex; align-items: center; justify-content: space-between; }
.poll-composer-heading strong { font-size: 12px; }
.poll-composer-heading button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.poll-composer-heading button:hover { color: var(--ink); background: var(--selected); }
.poll-composer-panel label { display: grid; gap: 5px; color: var(--ink); font-size: 10px; font-weight: 750; }
.poll-composer-panel input, .poll-composer-panel textarea { width: 100%; min-width: 0; padding: 9px 10px; resize: vertical; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; outline: 0; }
.poll-composer-panel textarea { min-height: 82px; }
.poll-composer-panel label small { color: var(--muted); font-size: 8px; font-weight: 500; }
.poll-option-editor { display: grid; gap: 6px; }
.poll-option-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poll-option-editor-heading strong { font-size: 10px; }
.poll-option-editor-heading small { color: var(--muted); font-size: 8px; }
.poll-option-editor-list { display: grid; gap: 6px; }
.poll-option-editor-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) 30px; align-items: center; gap: 6px; }
.poll-option-editor-row > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 8px; font-size: 9px; font-weight: 850; }
.poll-option-editor-row input { min-height: 38px; }
.poll-option-editor-row button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.poll-option-editor-row button:hover:not(:disabled) { color: var(--red); background: var(--accent-soft); }
.poll-option-editor-row button:disabled { opacity: .28; cursor: default; }
.poll-option-add { width: fit-content; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; color: var(--blue); background: var(--selected); border: 0; border-radius: 9px; font-size: 9px; font-weight: 800; cursor: pointer; }
.poll-option-add:disabled { opacity: .45; cursor: default; }
.poll-setting { padding: 9px 10px; display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 9px !important; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.poll-setting input { width: 17px !important; min-width: 17px !important; height: 17px; margin: 1px 0 0; padding: 0; accent-color: var(--blue); }
.poll-setting span, .poll-setting strong, .poll-setting small { display: block; }
.poll-setting strong { font-size: 10px; }
.poll-setting small { margin-top: 2px; line-height: 1.35; }
.poll-card { margin-top: 14px; padding: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 13px; }
.message-bubble .poll-card { min-width: min(330px, 65vw); margin-top: 6px; background: rgba(255,255,255,.92); }
.poll-heading { display: flex; align-items: center; gap: 9px; }
.poll-heading > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: var(--blue); background: var(--selected); border-radius: 10px; }
.poll-heading strong, .poll-heading small { display: block; }
.poll-heading strong { font-size: 12px; }
.poll-heading small { color: var(--muted); font-size: 8px; }
.poll-options { margin-top: 10px; display: grid; gap: 6px; }
.poll-option { min-height: 38px; padding: 8px 10px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; overflow: hidden; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.poll-option.selected { border-color: var(--blue); }
.poll-option-fill { width: var(--poll-percent); position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .35s ease; }
.poll-option input, .poll-option-text, .poll-option b { position: relative; z-index: 1; }
.poll-option input { accent-color: var(--blue); }
.poll-option-text { min-width: 0; overflow-wrap: anywhere; font-size: 10px; }
.poll-option b { color: var(--blue); font-size: 10px; }
.poll-submit { margin-top: 9px; padding: 7px 10px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 9px; font-size: 9px; font-weight: 800; cursor: pointer; }
.poll-locked { margin: 9px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }

html[data-theme="instagram"] .side-nav a.active,
html[data-theme="instagram"] .button-primary,
html[data-theme="instagram"] .feed-tabs a.active,
html[data-theme="max"] .side-nav a.active,
html[data-theme="max"] .button-primary,
html[data-theme="max"] .feed-tabs a.active { color: #fff; background: var(--brand-gradient); }

html[data-theme="blackwhite"] .profile-cover-shade { background: linear-gradient(90deg, rgba(39,41,45,.82) 0%, rgba(57,60,65,.60) 58%, rgba(80,83,89,.34) 100%); }
html[data-theme="blackwhite"] .avatar-fallback { color: #303238; background: linear-gradient(145deg, #fafafa, #d9dadd); }
html[data-theme="blackwhite"] .brand-mark,
html[data-theme="blackwhite"] .greeting-mark { color: #fff; background: #303238; box-shadow: 0 7px 16px rgba(35,37,41,.22); }
html[data-theme="blackwhite"] .feed-tabs a.active { box-shadow: 0 5px 12px rgba(35,37,41,.18); }
html[data-theme="blackwhite"] .notification-count { color: #fff; background: #45484e; border-color: #fff; }
html[data-theme="blackwhite"] .global-search:is(:focus-within, .is-open),
html[data-theme="blackwhite"] .comment-form input:focus,
html[data-theme="blackwhite"] .post-form textarea:focus,
html[data-theme="blackwhite"] .chat-form textarea:focus,
html[data-theme="blackwhite"] .stack-form input:focus,
html[data-theme="blackwhite"] .stack-form textarea:focus,
html[data-theme="blackwhite"] .field-wrap input:focus,
html[data-theme="blackwhite"] .field-wrap textarea:focus { background: #fff; border-color: #55585e; box-shadow: 0 0 0 4px rgba(45,48,53,.07); }

html[data-theme="mint"] .brand-mark,
html[data-theme="mint"] .auth-icon { color: #acd44c; background: #10130c; border-color: #242b18; box-shadow: 0 7px 16px rgba(34,46,15,.24); }
html[data-theme="mint"] .greeting-mark { color: var(--accent); background: rgba(255,255,255,.14); box-shadow: none; }

html[data-theme="liquidglass"] body {
  background:
    radial-gradient(circle at 12% 5%, rgba(196, 223, 255, .72), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(227, 239, 255, .86), transparent 30%),
    linear-gradient(145deg, #f7fbff 0%, #eef6ff 48%, #f9fbff 100%);
  background-attachment: fixed;
}
html[data-theme="liquidglass"] :is(
  .topbar, .public-topbar, .card, .content-card, .post-card, .page-header,
  .profile-hero:not(.profile-cover-card), .topic-list, .conversation-list,
  .notification-list, .chat-card, .create-community-card, .sidebar-action-card,
  .composer-link, .member-card, .community-card, .empty-state, .auth-card,
  .public-proof, .avatar-modal-card, .sidebar-switcher-card, .settings-menu,
  .music-player, .video-card
) {
  background: rgba(255, 255, 255, .66);
  border-color: rgba(113, 163, 216, .28);
  box-shadow: 0 18px 48px rgba(69, 118, 166, .11), inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
html[data-theme="liquidglass"] :is(
  .side-nav a.active, .button-primary, .feed-tabs a.active,
  .settings-button:hover, .settings-button[aria-expanded="true"],
  .notification-button:hover, .notification-button.active,
  .profile-media-tabs button.active, .sidebar-tabs button.active
) {
  background: linear-gradient(145deg, rgba(229,241,255,.94), rgba(187,220,255,.84));
  border-color: rgba(78,145,216,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -8px 18px rgba(100,165,230,.10), 0 8px 18px rgba(53,114,177,.13);
}
html[data-theme="liquidglass"] .brand-mark,
html[data-theme="liquidglass"] .auth-icon {
  color: #0874df;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(204,228,255,.75));
  border-color: rgba(69,139,213,.18);
  box-shadow: inset 0 1px 0 #fff, inset 0 -7px 13px rgba(85,153,224,.10), 0 7px 16px rgba(53,111,169,.15);
}
html[data-theme="liquidglass"] .global-search,
html[data-theme="liquidglass"] :is(input, textarea, select) {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.feed-tabs { margin: 0 0 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.feed-tabs a { padding: 7px 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; transition: .18s ease; }
.feed-tabs a:hover { color: var(--blue); background: var(--selected); border-color: color-mix(in srgb, var(--blue) 22%, var(--line)); }
.feed-tabs a.active { color: var(--accent-ink); background: var(--accent); border-color: transparent; box-shadow: 0 5px 12px color-mix(in srgb, var(--blue) 18%, transparent); }

.page-header { margin-bottom: 16px; padding: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.page-header h1 { margin: 3px 0 4px; font-size: 28px; letter-spacing: -.03em; }
.page-header p { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { display: inline-block; margin-bottom: 16px; padding: 7px 12px; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.eyebrow.small { margin-bottom: 2px; padding: 5px 9px; font-size: 9px; }
.inline-search { display: flex; gap: 7px; }
.inline-search input { min-width: 180px; padding: 9px 12px; background: var(--bg); border: 1px solid transparent; border-radius: 10px; outline: 0; }
.inline-search button { padding: 9px 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.friends-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.friends-empty { grid-column: 1 / -1; }

.member-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.community-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.member-card {
  min-width: 0;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(26, 52, 83, .035);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Только список всех участников */
.member-card .avatar-online-dot {
  right: 3px;
  bottom: 3px;
}

.member-card:hover {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  box-shadow: 0 9px 24px rgba(26, 52, 83, .07);
  transform: translateY(-1px);
}

.member-card > .avatar,
.member-card > .avatar-shell,
.member-card > a:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: start;
}

.member-card > a:first-child:has(.avatar) {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
}

.member-card > .avatar,
.member-card > .avatar-shell,
.member-card > .avatar-shell .avatar,
.member-card > a:first-child .avatar {
  --avatar-size: 62px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
}
.member-card > .avatar-shell { --avatar-shell-size: 62px; }
.member-card > .avatar-shell .avatar { border-radius: 50%; }

.member-card h2 {
  min-width: 0;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card p {
  min-width: 0;
  margin: 3px 0 0;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card > div {
  min-width: max-content;
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.member-card > div .button {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 9px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .member-card {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding: 12px;
    column-gap: 12px;
  }

  .member-card > a:first-child:has(.avatar),
  .member-card > .avatar,
  .member-card > .avatar-shell {
    --avatar-shell-size: 54px;
    width: 54px;
    height: 54px;
  }

  .member-card > .avatar,
  .member-card > .avatar-shell .avatar,
  .member-card > a:first-child .avatar {
    --avatar-size: 54px;
    width: 54px;
    height: 54px;
  }

  .member-card > div {
    min-width: 0;
    margin-top: 9px;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .member-card > div .button {
    flex: 0 0 auto;
  }
}
.friend-state-button { width: 34px; padding-inline: 0 !important; display: inline-grid; place-items: center; cursor: default; }
.friend-state-button.is-friend { color: #168a4b; background: color-mix(in srgb, #27b866 12%, var(--card)); border-color: color-mix(in srgb, #27b866 30%, var(--line)); }
.friend-state-button.is-pending { color: var(--muted); }
.friend-requests-card { margin-bottom: 16px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.friend-requests-card .section-heading { margin-bottom: 12px; }
.friend-requests-card .section-heading h2 { margin: 2px 0 0; }
.request-count { min-width: 27px; height: 27px; padding: 0 8px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 10px; font-size: 11px; font-weight: 850; }
.friend-request-list { display: grid; gap: 8px; }
.friend-request-row { padding: 11px; display: flex; align-items: center; gap: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; }
.friend-request-row > div:nth-child(2) { min-width: 0; flex: 1; }
.friend-request-row strong, .friend-request-row small { display: block; }
.friend-request-row small { color: var(--muted); font-size: 10px; }
.friend-request-actions { display: flex; align-items: center; gap: 7px; }
.friend-request-actions form { margin: 0; }
.profile-cover-button:disabled { opacity: .82; cursor: default; }
.profile-hero { margin-bottom: 16px; padding: 25px; display: flex; align-items: center; gap: 18px; }
.profile-hero h1 { margin: 2px 0 3px; font-size: 28px; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-cover-card { --profile-hero-avatar-size: 104px; min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy avatar" "actions avatar"; align-items: center; overflow: hidden; position: relative; color: #fff; background: var(--brand-gradient); border: 0; box-shadow: 0 15px 30px rgba(52,116,93,.18); }
.profile-cover-card > *:not(.profile-cover-image):not(.profile-cover-shade) { position: relative; z-index: 2; }
.profile-hero-avatar { inline-size: var(--profile-hero-avatar-size); block-size: var(--profile-hero-avatar-size); min-inline-size: var(--profile-hero-avatar-size); max-inline-size: var(--profile-hero-avatar-size); min-block-size: var(--profile-hero-avatar-size); max-block-size: var(--profile-hero-avatar-size); box-sizing: border-box; display: grid; place-items: center; flex: 0 0 var(--profile-hero-avatar-size); grid-area: avatar; position: relative; align-self: center; justify-self: end; aspect-ratio: 1; color: #fff; background: transparent; border: 0; border-radius: 50%; font-size: 32px; font-weight: 800; }
.profile-hero-avatar-surface { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; aspect-ratio: 1; color: #fff; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.48); border-radius: 50%; box-shadow: 0 12px 28px rgba(24,59,46,.2); }
.profile-hero-avatar-surface > :is(img, span) { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; box-sizing: border-box; object-fit: cover; border-radius: inherit; }
.profile-online-dot { width: 17px; height: 17px; position: absolute; right: 3px; bottom: 3px; z-index: 2; background: #27b866; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(18,102,57,.3); }
.profile-hero-copy { min-width: 0; grid-area: copy; align-self: end; }
.profile-cover-card .profile-label { opacity: .78; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.profile-cover-card h1 { margin: 2px 0 4px; color: #fff; }
.profile-cover-card .profile-status { max-width: 460px; margin-bottom: 5px; color: rgba(255,255,255,.92); font-size: 13px; overflow-wrap: anywhere; }
.profile-cover-card .profile-hero-copy > small { display: block; color: rgba(255,255,255,.72); font-size: 10px; }
.profile-cover-button { color: var(--blue-dark); background: rgba(255,255,255,.94); }
.profile-cover-button:hover { background: #fff; }
.profile-cover-button.secondary { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.profile-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.profile-cover-card .profile-actions { margin: 10px 0 0; grid-area: actions; align-self: start; }
/* The profile avatar and its story ring share the hero's right edge.  Keep
   the actions clear of that area instead of letting the edit button overlap
   the avatar on a user's own profile. */
.profile-cover-card .profile-cover-controls { right: calc(var(--profile-hero-avatar-size) + 48px); max-width: calc(100% - var(--profile-hero-avatar-size) - 68px); }
.profile-actions form { margin: 0; }

.community-card { min-height: 114px; padding: 13px; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: start; overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.community-cover { width: 86px; height: 86px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--brand-gradient); border-radius: 13px; font-size: 31px; font-weight: 850; }
.community-cover img { width: 100%; height: 100%; object-fit: cover; }
.community-info { min-width: 0; min-height: 86px; padding: 0 3px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "title title" "description description" "meta action"; column-gap: 12px; align-items: center; }
.community-info h2 { margin: 0 0 3px; grid-area: title; align-self: start; font-size: 17px; line-height: 1.2; }
.community-info p { min-height: 0; margin: 0; grid-area: description; align-self: start; color: var(--muted); font-size: 11px; line-height: 1.35; }
.community-info small { margin: 0; grid-area: meta; display: block; color: var(--muted); }
.community-info > .button { grid-area: action; align-self: end; }
.community-hero { min-height: 190px; margin-bottom: 16px; padding: 28px; display: flex; align-items: flex-end; gap: 18px; position: relative; z-index: 1; overflow: visible; isolation: isolate; color: #fff; background: var(--brand-gradient); }
.community-hero > img, .community-hero__media > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; opacity: .28; }
.community-hero > :not(.community-hero__media) { position: relative; z-index: 2; }
.community-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.community-hero h1 { margin: 2px 0 6px; color: #fff; font-size: 30px; }
.community-hero p { max-width: 470px; margin-bottom: 8px; opacity: .85; }
.community-hero > form { margin-left: auto; }
.community-hero__copy { min-width: 0; }
.community-hero__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.community-hero__actions form { margin: 0; }
.community-hero__menu { margin-left: 0; }
.community-hero__menu .chat-menu-button { color: #fff; background: rgba(8, 25, 45, .3); border: 1px solid rgba(255, 255, 255, .22); }
.community-hero__menu .chat-menu-button:hover, .community-hero__menu .chat-menu-button[aria-expanded="true"] { color: #fff; background: rgba(8, 25, 45, .52); }
.community-hero__menu .chat-action-menu { top: calc(100% + 8px); z-index: 100; }

.topic-list, .conversation-list, .notification-list { overflow: hidden; }
.conversation-list { overflow: visible; }
.inbox-filters { margin: 0 0 10px; padding: 5px; display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.inbox-filters a { padding: 8px 13px; color: var(--muted); border-radius: 10px; font-size: 10px; font-weight: 750; }
.inbox-filters a:hover { color: var(--ink); background: var(--bg); }
.inbox-filters a.active { color: var(--accent-ink); background: var(--accent); }
.conversation-row-shell { display: flex; align-items: center; position: relative; background: var(--card); border-bottom: 1px solid var(--line); }
.conversation-row-shell:last-child { border-bottom: 0; }
.conversation-row-shell:first-child { border-radius: 15px 15px 0 0; }
.conversation-row-shell:last-child { border-radius: 0 0 15px 15px; }
.conversation-row-shell:only-child { border-radius: 15px; }
.conversation-row-shell:hover { background: var(--selected); }
.conversation-row-shell.unread { background: var(--accent-soft); }
.conversation-row-shell.unread .conversation-copy small { color: var(--ink); font-weight: 700; }
.conversation-row-shell .inbox-typing-status { color: var(--blue); font-weight: 750; }
.conversation-row-shell.is-typing .conversation-copy small { color: var(--blue); }
.unread-preview-label { color: var(--blue); font-size: 9px; text-transform: uppercase; }
.conversation-row time.unread-time { padding: 5px 7px; color: var(--blue-dark); background: var(--accent); border-radius: 8px; font-weight: 800; }
.conversation-row-shell .conversation-row { min-width: 0; flex: 1; border-bottom: 0; }
.conversation-row-shell .conversation-row:hover { background: transparent; }
.conversation-row-shell .conversation-copy strong i { margin-right: 5px; color: var(--blue); font-size: 10px; }
.conversation-unread-count { min-width: 21px; height: 21px; padding: 0 6px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 10px; font-size: 9px; }
/* Вход по паролю: поле пароля продолжает основную форму,
   без отдельной вложенной карточки. */
/* Когда для найденного аккаунта требуется пароль, скрываем промежуточную
   кнопку «Войти» основной формы с номером телефона. Поле телефона остаётся
   видимым, а единственной кнопкой входа становится кнопка под паролем. */
.auth-card:has(.password-login-required)
  .stack-form:has(input[type="tel"]) > .button-primary,
.auth-card:has(.password-login-required)
  .stack-form:has(input[name="phone"]:not([type="hidden"])) > .button-primary {
  display: none;
}

.password-login-required {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.password-login-required h2,
.password-login-required > p {
  display: none;
}

.password-login-required .stack-form {
  margin: 0;
  gap: 9px;
}

.password-login-required .stack-form label {
  margin-top: 0;
}

.password-login-required .stack-form input[type="password"] {
  min-height: 48px;
}

.auth-recovery-link {
  display: inline-block;
  margin-top: 10px;
}

.password-login-required .stack-form .button-primary {
  margin-top: 2px;
}

.password-login-required .back-link {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  color: var(--blue);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 560px) {
  .password-login-required {
    margin-top: 7px;
  }
}
.topic-row, .conversation-row, .notification-row { padding: 16px 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }
.topic-row:last-child, .conversation-row:last-child, .notification-row:last-child { border-bottom: 0; }
.topic-row:hover, .conversation-row:hover, .notification-row:hover { background: var(--selected); }
.topic-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 12px; font-size: 20px; }
.topic-copy, .conversation-copy, .notification-copy { min-width: 0; flex: 1; }
.topic-copy strong, .topic-copy small, .conversation-row strong, .conversation-row small, .notification-row small { display: block; }
.topic-copy strong, .conversation-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.topic-copy small, .conversation-row small, .notification-row small { color: var(--muted); font-size: 10px; }
.topic-count { min-width: 52px; color: var(--blue); text-align: center; font-size: 17px; font-weight: 800; }
.topic-count small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; }
.topic-main h1 { margin: 22px 0 10px; }
.topic-main > p, .reply-card > p { margin: 14px 0 0; color: var(--ink); }
.reply-card { padding: 18px; }
.conversation-row time { color: var(--muted); font-size: 9px; }
.chat-menu-wrap { margin-left: auto; position: relative; flex: 0 0 auto; }
.conversation-row-shell > .chat-menu-wrap { margin: 0 12px 0 0; }
.chat-menu-button, .message-menu-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.chat-menu-button:hover, .chat-menu-button[aria-expanded="true"], .message-menu-button:hover, .message-menu-button[aria-expanded="true"] { color: var(--ink); background: var(--selected); }
.chat-menu-button i, .message-menu-button i { font-size: 18px; }
.chat-action-menu { width: min(280px, calc(100vw - 36px)); padding: 7px; position: absolute; top: 40px; right: 0; z-index: 60; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 20px 48px rgba(15,27,20,.24); }
.chat-action-menu.open-up { top: auto; bottom: 40px; }
.chat-action-menu[hidden] { display: none; }
.chat-action-menu form { margin: 0; }
.chat-action-menu button { width: 100%; min-height: 40px; padding: 8px 10px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; text-align: left; font: inherit; font-size: 11px; cursor: pointer; }
.chat-action-menu button:hover { color: var(--blue); background: var(--bg); }
.chat-action-menu .chat-menu-link { width: 100%; min-height: 40px; padding: 8px 10px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--ink); border-radius: 10px; font-size: 11px; }
.chat-action-menu .chat-menu-link:hover { color: var(--blue); background: var(--bg); }
.chat-action-menu .chat-menu-link > i { color: var(--blue); font-size: 16px; text-align: center; }
.chat-action-menu button > i { color: var(--blue); font-size: 16px; text-align: center; }
.chat-action-menu .danger, .chat-action-menu .danger > i { color: var(--red); }
.chat-menu-separator { height: 1px; margin: 5px 8px; display: block; background: var(--line); }
.notification-row.unread { background: var(--accent-soft); }
.notification-row.unread::after { width: 8px; height: 8px; content: ""; background: var(--red); border-radius: 10px; }
.notification-channel-avatar { color: #fff; background: linear-gradient(135deg, #8e64d8, #c04a97); border-radius: 50%; }
.notification-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notification-friend-request.unread::after { display: none; }
.notification-request-actions { display: flex; align-items: center; gap: 6px; }
.notification-request-actions form { margin: 0; }

.chat-card { overflow: hidden; }
.chat-header { padding: 13px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.chat-avatar-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; flex: 0 0 36px; background: transparent; border: 0; border-radius: 10px; cursor: zoom-in; }
.chat-avatar-button:hover { box-shadow: 0 0 0 4px var(--selected); }
.chat-person-link { min-width: 0; padding: 3px 5px; border-radius: 9px; }
.chat-person-link:hover { color: var(--blue); background: var(--selected); }
.chat-header strong, .chat-header small { display: block; }
.chat-header small { color: var(--muted); font-size: 10px; }
.chat-header small.is-active { color: var(--blue); font-weight: 750; }
.avatar-modal { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; padding: 20px; }
.avatar-modal[hidden] { display: none; }
.avatar-modal-backdrop { position: absolute; inset: 0; background: rgba(15,32,25,.72); border: 0; cursor: zoom-out; backdrop-filter: blur(7px); }
.avatar-modal-card { width: min(520px, calc(100vw - 40px)); padding: 16px; display: grid; justify-items: center; gap: 12px; position: relative; color: var(--ink); background: #fff; border-radius: 24px; box-shadow: 0 28px 80px rgba(11,31,23,.35); }
.avatar-modal-close { width: 38px; height: 38px; display: grid; place-items: center; position: absolute; top: 10px; right: 10px; z-index: 2; color: var(--ink); background: rgba(255,255,255,.92); border: 0; border-radius: 10px; box-shadow: 0 6px 18px rgba(11,31,23,.18); cursor: pointer; }
.avatar-modal-image, .avatar-modal-fallback { width: min(440px, calc(100vw - 72px)); aspect-ratio: 1; display: grid; place-items: center; object-fit: cover; border-radius: 20px; }
.avatar-modal-fallback { color: var(--blue); background: var(--selected); font-size: clamp(70px, 22vw, 150px); font-weight: 800; }
.avatar-modal-card > strong { font-size: 15px; }
body.modal-open { overflow: hidden; }
.avatar-context-menu { width: min(218px, calc(100vw - 20px)); padding: 6px; position: fixed; z-index: 220; display: grid; gap: 2px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 38px color-mix(in srgb, var(--ink) 18%, transparent); animation: avatar-context-menu-in .16s ease-out both; }
.avatar-context-menu-item { min-height: 39px; padding: 8px 10px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: left; text-decoration: none; cursor: pointer; }
.avatar-context-menu-item > i { color: var(--blue); font-size: 15px; text-align: center; }
.avatar-context-menu-item:not(.is-unavailable):hover, .avatar-context-menu-item:not(.is-unavailable):focus-visible { color: var(--blue); background: var(--selected); outline: 0; }
.avatar-context-menu-item.is-unavailable { color: var(--muted); cursor: default; }
.avatar-context-menu-item.is-unavailable > i { color: var(--muted); }
@keyframes avatar-context-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .avatar-context-menu { animation: none; } }
.message-thread { min-height: 430px; max-height: 58vh; padding: 20px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; background: var(--bg); }
.message-bubble { max-width: 78%; padding: 10px 36px 6px 12px; align-self: flex-start; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; }
.message-bubble.mine { align-self: flex-end; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); border-radius: 14px 14px 4px 14px; }
.message-bubble.important { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 40%, transparent); }
.message-bubble p { margin: 0; overflow-wrap: anywhere; }
.message-meta { margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; opacity: .7; }
.message-meta i { font-size: 9px; }
.message-bubble time { display: block; font-size: 8px; text-align: right; }
.message-menu-wrap { position: absolute; top: 4px; right: 4px; z-index: 3; opacity: 0; transition: opacity .16s ease; }
.message-bubble:hover .message-menu-wrap, .message-menu-wrap:focus-within { opacity: 1; }
.message-menu-button { width: 28px; height: 28px; }
.message-menu-button i { font-size: 15px; }
.message-action-menu { top: 32px; }
.message-action-menu.open-up { bottom: 32px; }
.message-bubble:not(.mine) .message-action-menu { right: auto; left: 0; }
.message-reply-quote { margin: 0 0 7px; padding: 6px 8px; display: block; color: inherit; background: color-mix(in srgb, var(--card) 62%, transparent); border-left: 3px solid var(--blue); border-radius: 7px; }
.message-reply-quote strong, .message-reply-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-quote strong { color: var(--blue); font-size: 9px; }
.message-reply-quote span { font-size: 9px; opacity: .8; }
.message-image-link { margin: 4px -5px 2px; display: block; }
.message-image { width: min(340px, 100%); max-height: 320px; display: block; object-fit: cover; border-radius: 10px; }
.message-attachment-grid { margin-top: 5px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; overflow: hidden; border-radius: 10px; }
.message-attachment-grid > :only-child { grid-column: 1 / -1; }
.message-attachment-grid .message-image-link { margin: 0; }
.message-attachment-grid .message-image,
.message-attachment-grid .message-video { width: 100%; height: 190px; display: block; object-fit: cover; border-radius: 0; }
.message-attachment-grid .message-file,
.message-attachment-grid .message-audio { min-width: 0; grid-column: 1 / -1; }
.message-audio { width: min(320px, 64vw); margin-top: 4px; display: block; }
.message-file, .message-location { min-width: 210px; margin-top: 4px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 10px; }
.message-file > i, .message-location > i { flex: 0 0 auto; color: var(--blue); font-size: 21px; }
.message-file strong, .message-file small, .message-location strong, .message-location small { display: block; }
.message-file strong { max-width: 245px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-file small, .message-location small { color: var(--muted); font-size: 9px; }
.chat-empty { margin: auto; color: var(--muted); }
.chat-form { padding: 13px; display: flex; align-items: flex-end; gap: 9px; border-top: 1px solid var(--line); }
.chat-compose { min-width: 0; flex: 1; }
.message-reply-compose { margin-bottom: 7px; padding: 7px 9px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; align-items: center; gap: 8px; color: var(--ink); background: var(--selected); border-radius: 10px; }
.message-reply-compose[hidden] { display: none; }
.message-reply-compose > i { color: var(--blue); font-size: 17px; }
.message-reply-compose span, .message-reply-compose strong, .message-reply-compose small { min-width: 0; display: block; }
.message-reply-compose strong, .message-reply-compose small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-compose strong { font-size: 9px; }
.message-reply-compose small { color: var(--muted); font-size: 8px; }
.message-reply-compose button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.message-reply-compose button:hover { color: var(--ink); background: var(--bg); }
.chat-form textarea { width: 100%; min-width: 0; min-height: 46px; max-height: 130px; padding: 11px 13px; resize: vertical; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 12px; outline: 0; }
.chat-form textarea:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.chat-tools { margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-tools input[type=file] { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.chat-tool { padding: 5px 8px; display: inline-flex; align-items: center; gap: 5px; color: var(--blue); background: var(--selected); border: 0; border-radius: 8px; font-size: 10px; font-weight: 750; cursor: pointer; }
.chat-tool:hover { color: var(--accent-ink); background: var(--accent); }
.chat-tool:disabled { opacity: .65; cursor: wait; }
.attachment-menu-wrap { position: relative; }
.attachment-trigger[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); }
.attachment-menu { width: 260px; padding: 7px; display: grid; gap: 3px; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(20,45,35,.18); }
.post-form .attachment-menu { top: calc(100% + 8px); bottom: auto; }
.attachment-menu[hidden] { display: none; }
.attachment-menu button { width: 100%; padding: 9px 10px; display: flex; align-items: center; gap: 11px; color: inherit; background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; }
.attachment-menu button:hover { color: var(--blue); background: var(--selected); }
.attachment-menu button > i { width: 28px; flex: 0 0 28px; font-size: 20px; text-align: center; }
.attachment-menu button strong, .attachment-menu button small { display: block; }
.attachment-menu button strong { font-size: 11px; }
.attachment-menu button small { color: var(--muted); font-size: 8px; }
.chat-tool-status { max-width: 100%; padding: 5px 8px; overflow: hidden; color: var(--muted); background: var(--bg); border-radius: 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-send-status.is-error { color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--bg)); }
.chat-submit { flex: 0 0 auto; }

.video-upload-card[hidden] { display: none; }
.video-form-actions { display: flex; gap: 8px; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.video-card { min-width: 0; position: relative; overflow: visible; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.video-card:focus-within { z-index: 20; }
.video-card video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #050606; object-fit: contain; }
.video-card > div { padding: 13px 15px; }
.video-card strong, .video-card time { display: block; }
.video-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.video-card time { margin-top: 2px; color: var(--muted); font-size: 9px; }
.video-processing-note { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font-size: 9px; font-weight: 750; }
.video-processing-note > i { font-size: 11px; }
.video-processing-note.is-failed { color: var(--red); }
.video-processing-note.is-review { color: var(--warning, #b77812); }
.video-processing-note.is-rejected { color: var(--red); }
.media-item-menu-hint { max-width: 210px; padding: 8px 10px; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.media-item-menu-hint > i { color: var(--accent-ink); }

.profile-media-publication-status { margin: 0 0 18px; padding: 13px 15px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.profile-media-publication-status > strong { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.profile-media-publication-status > strong i { color: var(--accent-ink); }
.profile-media-publication-status__item { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.profile-media-publication-status__item small { display: inline-flex; align-items: center; gap: 5px; font-size: inherit; }
.profile-media-publication-status__item.is-published small { color: var(--accent-ink); }
.profile-media-publication-status__item.is-review small { color: var(--warning, #b77812); }
.profile-media-publication-status__item.is-rejected small { color: var(--red); }

.form-card { max-width: 620px; margin: 0 auto; }
.stack-form { display: grid; gap: 12px; }
.field-wrap { display: grid; gap: 6px; }
.stack-form label, .field-wrap label { color: var(--ink); font-size: 12px; font-weight: 750; }
.stack-form input:not([type=file]):not([type=checkbox]):not([type=radio]), .stack-form textarea, .stack-form select, .field-wrap input:not([type=file]):not([type=checkbox]):not([type=radio]), .field-wrap textarea, .field-wrap select { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; outline: 0; }
.stack-form textarea, .field-wrap textarea { min-height: 110px; resize: vertical; }
.stack-form input:not([type=file]):not([type=checkbox]):not([type=radio]):focus, .stack-form textarea:focus, .stack-form select:focus, .field-wrap input:not([type=file]):not([type=checkbox]):not([type=radio]):focus, .field-wrap textarea:focus, .field-wrap select:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.birth-date-widget { display: grid; grid-template-columns: minmax(78px, .68fr) minmax(0, 1.4fr) minmax(94px, .82fr); gap: 8px; }
.birth-date-widget input { min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.birth-date-widget select { min-width: 0; }
.field-error, .errorlist { margin: 0; color: var(--red); font-size: 11px; list-style: none; }
.field-wrap small { color: var(--muted); }
.button { min-height: 42px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
.button-primary { gap: 6px; color: var(--accent-ink); background: var(--accent); }
.button-primary:hover { filter: brightness(.94); }
.button-ghost { color: var(--blue); background: var(--selected); }
.button-ghost:hover { background: color-mix(in srgb, var(--selected) 82%, var(--blue)); }
.button.compact { min-height: 36px; padding: 8px 13px; font-size: 12px; }
.back-link { color: var(--blue); font-size: 12px; font-weight: 700; }
.back-link.block { margin: 0 0 12px 2px; display: inline-block; }
.muted { color: var(--muted); }
.empty-state { padding: 42px 30px; text-align: center; background: var(--card); border: 1px dashed color-mix(in srgb, var(--blue) 24%, var(--line)); border-radius: 16px; }
.empty-state > span { width: 50px; height: 50px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 10px; font-size: 24px; }
.empty-state h2 { margin-bottom: 4px; font-size: 17px; }
.empty-state p { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.pagination { padding: 12px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.pagination a { color: var(--blue); font-weight: 750; }
.flash-stack { margin-bottom: 12px; display: grid; gap: 8px; }
.flash { padding: 11px 13px; color: var(--blue); background: var(--selected); border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line)); border-radius: 11px; font-size: 12px; }
.flash.error { color: #9d433b; background: var(--accent-soft); border-color: #efc9c5; }

.welcome-grid { min-height: 590px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); gap: 34px; align-items: center; padding: 48px clamp(20px,5vw,68px); overflow: hidden; background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 32%), radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 28%), linear-gradient(135deg,var(--bg) 0%,var(--card) 52%,var(--selected) 100%); border: 1px solid var(--line); border-radius: 28px; }
.hero-copy { max-width: 650px; }
.hero-copy h1 { max-width: 610px; margin-bottom: 18px; color: var(--ink); font-size: clamp(42px,5vw,68px); line-height: 1.02; letter-spacing: -.055em; }
.hero-copy > p { max-width: 560px; margin-bottom: 34px; color: var(--muted); font-size: clamp(18px,2vw,22px); }
.hero-points { display: grid; gap: 16px; }
.hero-points > div { display: flex; align-items: center; gap: 14px; }
.hero-points > div > span { width: 46px; height: 46px; display: grid; place-items: center; color: var(--blue); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 18px rgba(38,79,62,.08); font-size: 20px; }
.hero-points p { margin: 0; }
.hero-points strong, .hero-points small { display: block; }
.hero-points strong { font-size: 15px; }
.hero-points small { color: var(--muted); font-size: 12px; }
.auth-card { padding: 30px; background: color-mix(in srgb, var(--card) 97%, transparent); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.auth-card h1, .auth-card h2 { margin-bottom: 7px; font-size: 25px; letter-spacing: -.025em; }
.auth-card > p { margin-bottom: 22px; color: var(--muted); }
.auth-tabs { margin-top: 16px; }
.auth-tab-buttons { margin-bottom: 15px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; }
.auth-tab-buttons button { min-height: 39px; padding: 8px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; }
.auth-tab-buttons button.active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 5px 14px rgba(29,70,53,.12); }
.auth-tabs [data-auth-panel] > p { margin: 0 0 13px; color: var(--muted); font-size: 12px; }
.auth-tabs .stack-form { gap: 9px; }
.auth-suggestion { padding: 10px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; color: var(--ink); background: var(--selected); border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line)); border-radius: 12px; }
.auth-suggestion > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: var(--card); border-radius: 9px; }
.auth-suggestion p { margin: 0; }
.auth-suggestion strong, .auth-suggestion small { display: block; }
.auth-suggestion strong { font-size: 10px; }
.auth-suggestion small { margin-top: 1px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.auth-suggestion button { grid-column: 1 / -1; min-height: 36px; padding: 7px 10px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 9px; font-size: 10px; font-weight: 800; cursor: pointer; }
.form-intro { margin: -7px 0 22px; color: var(--muted); }
.support-action-card > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; color: var(--accent-ink); background: var(--accent); border-radius: 11px; font-size: 19px; }
.auth-icon { width: 44px; height: 44px; margin-bottom: 16px; display: grid; place-items: center; color: var(--blue); background: linear-gradient(145deg, #f2f8ff, #dcecff); border: 1px solid color-mix(in srgb, var(--blue) 10%, transparent); border-radius: 14px; box-shadow: 0 7px 16px rgba(55,111,167,.15), inset 0 1px 0 rgba(255,255,255,.9); font-size: 20px; font-weight: 850; }
.legal-note { margin-top: 16px; display: block; color: var(--muted); font-size: 9px; text-align: center; }
.public-proof { max-width: 700px; margin: -22px auto 0; padding: 18px 28px; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.public-proof div { text-align: center; }
.public-proof div + div { border-left: 1px solid var(--line); }
.public-proof strong, .public-proof span { display: block; }
.public-proof strong { font-size: 21px; }
.public-proof span { color: var(--muted); font-size: 11px; }
.auth-page { width: min(440px, calc(100% - 24px)); min-height: calc(100vh - 35px); margin: 0 auto; padding: 38px 0; display: grid; align-content: center; flex: 1 0 auto; gap: 20px; }
.auth-brand { justify-self: center; }
.standalone-auth h1 { margin-top: 5px; }
.auth-step { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.dev-code { padding: 10px 12px; color: #6b5610; background: #fff7d7; border: 1px solid #f1df8b; border-radius: 10px; font-size: 12px; }
.standalone-auth .back-link { margin-top: 16px; display: block; text-align: center; }
.security-checkbox { padding: 10px; display: grid !important; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; background: var(--selected); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.stack-form .security-checkbox input[type=checkbox] { width: 18px !important; min-height: 18px !important; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--blue); }
.security-checkbox strong, .security-checkbox small { display: block; }
.security-checkbox small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.site-footer { min-height: 22px; margin-top: auto; padding: 3px 10px; flex: 0 0 auto; color: var(--muted); background: rgba(255,255,255,.9); border-top: 1px solid var(--line); font-size: 9px; line-height: 16px; text-align: center; }

@keyframes live-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.8); }
}

@keyframes stats-digit-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: .42; transform: translateY(-108%); }
}

@keyframes stats-digit-in {
  0% { opacity: .42; transform: translateY(108%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes notification-ring {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-13deg) scale(1.08); }
  55% { transform: rotate(11deg) scale(1.08); }
  78% { transform: rotate(-6deg) scale(1.04); }
}

@keyframes notification-in {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes notification-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-9px); }
}

@keyframes player-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .public-topbar { background: rgba(12,20,31,.94); border-color: var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.32); }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .auth-icon { color: #79baff; background: linear-gradient(145deg, #172b42, #102033); border-color: #294766; box-shadow: 0 7px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .global-search:is(:focus-within, .is-open),
html[data-theme="dark"] .comment-form input:focus,
html[data-theme="dark"] .post-form textarea:focus,
html[data-theme="dark"] .chat-form textarea:focus,
html[data-theme="dark"] .stack-form input:focus,
html[data-theme="dark"] .stack-form textarea:focus,
html[data-theme="dark"] .field-wrap input:focus,
html[data-theme="dark"] .field-wrap textarea:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .profile-hero:not(.profile-cover-card),
html[data-theme="dark"] .topic-list,
html[data-theme="dark"] .conversation-list,
html[data-theme="dark"] .notification-list,
html[data-theme="dark"] .chat-card,
html[data-theme="dark"] .create-community-card,
html[data-theme="dark"] .composer-link,
html[data-theme="dark"] .member-card,
html[data-theme="dark"] .community-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .public-proof,
html[data-theme="dark"] .avatar-modal-card,
html[data-theme="dark"] .message-bubble:not(.mine),
html[data-theme="dark"] .feed-tabs a { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .notification-count { border-color: var(--bg); }
html[data-theme="dark"] .site-footer { background: rgba(11,18,28,.94); }
html[data-theme="dark"] .welcome-grid { background: radial-gradient(circle at 14% 18%, rgba(121,186,255,.10), transparent 32%), linear-gradient(135deg,#09111b 0%,#0e1926 58%,#132235 100%); }
html[data-theme="dark"] .hero-points > div > span { background: var(--card); }
html[data-theme="dark"] .profile-cover-button { color: var(--accent-ink); background: var(--accent); }
html[data-theme="dark"] .profile-cover-button.secondary { color: #fff; background: rgba(255,255,255,.1); }
html[data-theme="dark"] .message-file,
html[data-theme="dark"] .message-location { color: var(--ink); background: var(--selected); }
html[data-theme="dark"] .dev-code { color: #d7c56b; background: #27230f; border-color: #574d1c; }

@media (max-width: 1020px) {
  .topbar { grid-template-columns: 82px minmax(180px,1fr) auto; gap: 16px; }
  .topbar.global-search-open { grid-template-columns: 82px minmax(0, 1fr) auto; }
  .brand-name, .user-chip > span:not(.avatar) { display: none; }
  .layout { grid-template-columns: 82px minmax(0,1fr) 260px; gap: 16px; }
  .side-nav a { justify-content: center; font-size: 0; }
  .nav-icon { font-size: 20px; }
  .privacy-note, .logout-form { display: none; }
}

@media (max-width: 800px) {
  .topbar { grid-template-columns: auto auto minmax(0,1fr) auto; gap: 9px; }
  .topbar.global-search-open { grid-template-columns: auto auto minmax(0,1fr) auto; }
  .topbar.global-search-open .global-search { width: auto; position: absolute; inset: 8px; z-index: 130; }
  .topbar.global-search-open .topbar-actions { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease; }
  .topbar:not(.global-search-open) .topbar-actions { transition: opacity .14s ease; }
  .mobile-menu-button { display: grid; }
  .layout { grid-template-columns: minmax(0,1fr); }
  .left-sidebar { width: min(280px, calc(100vw - 28px)); max-height: calc(100vh - 100px); padding: 12px; display: none; position: fixed; top: 88px; left: 14px; z-index: 90; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(20,28,15,.24); }
  .app-shell.menu-open .left-sidebar { display: block; }
  .left-sidebar .side-nav a { justify-content: flex-start; font-size: 14px; }
  .left-sidebar .privacy-note, .left-sidebar .logout-form { display: flex; }
  .left-sidebar .logout-form { display: block; }
  .right-sidebar { display: none; }
  .welcome-grid { grid-template-columns: 1fr; padding: 38px 24px; }
  .welcome-grid .auth-card { order: -1; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-left: auto; margin-right: auto; }
  .hero-points { max-width: 430px; margin: 0 auto; text-align: left; }
  .auth-card { width: 100%; max-width: 430px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .app-shell, .public-shell { width: min(100%, calc(100vw - 16px)); }
  .topbar, .public-topbar { top: 6px; gap: 7px; margin-top: 8px; padding: 8px; border-radius: 15px; }
  .topbar { grid-template-columns: auto auto minmax(0,1fr) auto; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .global-search { height: 40px; }
  .global-search:not(.is-open) input::placeholder { color: transparent; }
  .user-chip .avatar { --avatar-size: 34px; width: 34px; height: 34px; }
  .live-notification-region, body.music-player-visible .live-notification-region { width: calc(100vw - 16px); top: 76px; right: 8px; bottom: auto; }
  .welcome-grid { padding: 34px 16px; border-radius: 20px; }
  .hero-copy h1 { font-size: 39px; }
  .hero-copy > p { font-size: 17px; }
  .public-proof { padding: 15px 8px; }
  .public-proof strong { font-size: 18px; }
  .greeting-card { min-height: 164px; padding: 22px 18px; }
  .greeting-copy { max-width: calc(100% - 82px); }
  .greeting-avatar-link { width: 70px; min-width: 70px; max-width: 70px; height: 70px; min-height: 70px; max-height: 70px; flex-basis: 70px; border-radius: 21px; }
  .greeting-avatar { width: 70px; min-width: 70px; max-width: 70px; height: 70px; min-height: 70px; max-height: 70px; border-radius: 20px; }
  .profile-summary-toggle { width: 27px; height: 27px; right: 10px; bottom: 10px; font-size: 11px; }
  .profile-cover-controls { right: 10px; bottom: 10px; gap: 6px; }
  .profile-cover-card .profile-cover-controls { right: 10px; max-width: calc(100% - 20px); }
  .profile-cover-card .profile-cover-controls .profile-actions { width: auto; margin: 0; flex-wrap: nowrap; gap: 6px; }
  .profile-cover-controls .profile-summary-toggle { flex-basis: 27px; }
  .profile-cover-controls .button.compact { padding: 7px 9px; font-size: 9px; }
  .profile-summary-panel .profile-summary-inner { padding-right: 14px; padding-left: 14px; }
  .profile-cover-shell.is-expanded .profile-summary-panel .profile-summary-inner { padding-top: 17px; padding-bottom: 17px; }
  .profile-summary-heading { align-items: flex-start; flex-direction: column; }
  .profile-summary-heading .button { width: 100%; }
  .profile-facts-grid, .profile-community-grid { grid-template-columns: 1fr; }
  .profile-fact-wide { grid-column: auto; }
  .greeting-mark { width: 62px; height: 62px; border-radius: 20px; font-size: 30px; }
  .profile-media-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .music-player { width: calc(100vw - 16px); right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 38px minmax(0, 1fr); }
  .music-player-art { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
  .music-player-controls .music-player-toggle { width: 30px; height: 30px; font-size: 17px; }
  .music-track-row { grid-template-columns: 36px minmax(0, 1fr); }
  .music-track-row time { display: none; }
  .post-card, .content-card { padding: 16px; }
  .post-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(70vh, 520px); overflow-y: auto; border-radius: 18px; box-shadow: 0 24px 70px rgba(12,19,15,.28); }
  .post-menu.open-up { top: auto; bottom: 12px; }
  .post-statistics > div { grid-template-columns: 1fr; }
  .post-form > .avatar { display: none; }
  .page-header { padding: 19px; align-items: flex-start; flex-direction: column; }
  .friends-header-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .friends-header-actions .button { width: 100%; }
  .inline-search { width: 100%; }
  .inline-search input { min-width: 0; flex: 1; }
  .member-grid { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .profile-hero { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
  .profile-hero .avatar-xlarge { --avatar-size: 76px; width: 76px; height: 76px; }
  .profile-cover-card { --profile-hero-avatar-size: 78px; min-height: 250px; grid-template-columns: minmax(0, 1fr) 78px; grid-template-areas: "copy avatar" "actions actions"; align-items: center; }
  .profile-hero-avatar { inline-size: var(--profile-hero-avatar-size); block-size: var(--profile-hero-avatar-size); min-inline-size: var(--profile-hero-avatar-size); max-inline-size: var(--profile-hero-avatar-size); min-block-size: var(--profile-hero-avatar-size); max-block-size: var(--profile-hero-avatar-size); flex-basis: var(--profile-hero-avatar-size); border-radius: 50%; font-size: 25px; }
  .profile-hero-copy { max-width: 100%; align-self: center; }
  .profile-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .friend-request-row { align-items: flex-start; flex-wrap: wrap; }
  .friend-request-actions { width: 100%; padding-left: 55px; }
  .notification-friend-request { flex-wrap: wrap; }
  .notification-request-actions { width: 100%; padding-left: 49px; }
  .profile-cover-card .profile-actions { margin-top: 12px; }
  .video-grid { grid-template-columns: 1fr; }
  .media-video-grid { grid-template-columns: 1fr; }
  .community-hero { padding: 22px 18px; align-items: flex-start; flex-direction: column; }
  .community-hero > form { margin-left: 0; }
  .conversation-row time, .topic-count { display: none; }
  .conversation-row-shell > .chat-menu-wrap { margin-right: 7px; }
  .chat-action-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(72vh, 540px); overflow-y: auto; border-radius: 18px; }
  .chat-action-menu.open-up { top: auto; bottom: 12px; }
  .message-action-menu,
  .message-action-menu.open-up {
    top: 12px;
    right: auto;
    bottom: auto;
    left: 12px;
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    border-radius: 15px;
  }
  .message-action-menu.is-viewport-positioned { z-index: 180; overscroll-behavior: contain; }
  .message-thread { min-height: 55vh; padding: 13px; }
  .message-bubble { max-width: 88%; }
  .message-menu-wrap { opacity: 1; }
  .chat-form { align-items: stretch; flex-direction: column; }
  .chat-submit { width: 100%; }
  .feed-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-tabs a { text-align: center; }
  .comment-form button { font-size: 0; }
  .comment-form button::after { content: "→"; font-size: 16px; }
}
/* =========================================================
   PHOTOS PAGE
   ========================================================= */

.photos-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* Верхняя карточка */

.photos-hero {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.photos-hero > div {
  min-width: 0;
}

.photos-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 9px;

  color: var(--blue);
  background: var(--selected);
  border-radius: 10px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.photos-hero h1 {
  margin: 0;

  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.03em;
}

.photos-hero p {
  margin: 6px 0 0;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.photos-hero .button {
  flex: 0 0 auto;
}


/* Горизонтальное меню */

.photos-tabs {
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;

  overflow-x: auto;

  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;

  scrollbar-width: none;
}

.photos-tabs::-webkit-scrollbar {
  display: none;
}

.photos-tabs a {
  min-height: 36px;
  padding: 8px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  flex: 0 0 auto;

  color: var(--muted);
  background: transparent;
  border-radius: 10px;

  font-size: 10px;
  font-weight: 750;

  white-space: nowrap;

  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.photos-tabs a i {
  font-size: 14px;
  line-height: 1;
}

.photos-tabs a:hover {
  color: var(--ink);
  background: var(--bg);
}

.photos-tabs a.active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 12%, transparent);
}


/* Карточка с фотографиями */

.photos-content-card {
  padding: 18px;

  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.photos-section-heading {
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.photos-section-heading > div {
  min-width: 0;
}

.photos-section-heading h2 {
  margin: 0;

  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.photos-section-heading span {
  margin-top: 2px;
  display: block;

  color: var(--muted);
  font-size: 9px;
}


/* Сетка фотографий */

.photos-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.photos-gallery-item {
  min-width: 0;
  display: block;
  position: relative;

  overflow: hidden;

  aspect-ratio: 1 / 1;

  background: var(--bg);
  border-radius: 11px;
}

.photos-gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .22s ease,
    filter .22s ease;
}

.photos-gallery-item:hover img {
  transform: scale(1.04);
}


/* Затемнение при наведении — если позже добавим кнопки */

.photos-gallery-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: rgba(10, 20, 34, 0);

  opacity: 0;

  transition:
    opacity .18s ease,
    background .18s ease;
}

.photos-gallery-item:hover .photos-gallery-overlay {
  opacity: 1;
  background: rgba(10, 20, 34, .18);
}

.photos-gallery-overlay > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: var(--blue);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-radius: 10px;

  box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
}


/* Пустая вкладка */

.photos-empty {
  min-height: 280px;
  padding: 40px 20px;

  display: grid;
  justify-items: center;
  align-content: center;

  text-align: center;

  color: var(--muted);
  background: var(--card);

  border: 1px dashed color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 16px;
}

.photos-empty > i {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;

  display: grid;
  place-items: center;

  color: var(--blue);
  background: var(--selected);

  border-radius: 10px;

  font-size: 24px;
}

.photos-empty strong {
  display: block;

  color: var(--ink);

  font-size: 15px;
  font-weight: 800;
}

.photos-empty span {
  max-width: 390px;
  margin-top: 4px;

  display: block;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}


/* Пагинация */

.photos-pagination {
  margin-top: 18px;
  padding-top: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  border-top: 1px solid var(--line);
}

.photos-pagination > span {
  color: var(--muted);

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   PHOTOS PAGE — THEMES
   ========================================================= */

/* Dark */

html[data-theme="dark"] .photos-hero,
html[data-theme="dark"] .photos-tabs,
html[data-theme="dark"] .photos-content-card,
html[data-theme="dark"] .photos-empty {
  background: var(--card);
  border-color: var(--line);
}

html[data-theme="dark"] .photos-gallery-item {
  background: var(--bg);
}


/* Liquid Glass */

html[data-theme="liquidglass"] .photos-hero,
html[data-theme="liquidglass"] .photos-tabs,
html[data-theme="liquidglass"] .photos-content-card,
html[data-theme="liquidglass"] .photos-empty {
  background: rgba(255, 255, 255, .66);
  border-color: rgba(113, 163, 216, .28);

  box-shadow:
    0 18px 48px rgba(69, 118, 166, .11),
    inset 0 1px 0 rgba(255, 255, 255, .92);

  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

html[data-theme="liquidglass"] .photos-tabs a.active {
  background:
    linear-gradient(
      145deg,
      rgba(229, 241, 255, .94),
      rgba(187, 220, 255, .84)
    );

  border-color: rgba(78, 145, 216, .22);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -8px 18px rgba(100, 165, 230, .10),
    0 8px 18px rgba(53, 114, 177, .13);
}


/* Instagram / MAX */

html[data-theme="instagram"] .photos-tabs a.active,
html[data-theme="max"] .photos-tabs a.active {
  color: #fff;
  background: var(--brand-gradient);
}


/* =========================================================
   PHOTOS PAGE — RESPONSIVE
   ========================================================= */

@media (max-width: 1020px) {

  .photos-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 800px) {

  .photos-hero {
    padding: 21px;
  }

  .photos-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 600px) {

  .photos-page {
    gap: 12px;
  }

  .photos-hero {
    padding: 18px;

    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .photos-hero h1 {
    font-size: 23px;
  }

  .photos-hero p {
    font-size: 11px;
  }

  .photos-hero .button {
    width: 100%;
  }

  .photos-tabs {
    width: 100%;
    padding: 4px;

    justify-content: flex-start;

    overflow-x: auto;
  }

  .photos-tabs a {
    min-height: 34px;
    padding: 7px 11px;

    flex: 0 0 auto;

    font-size: 9px;
  }

  .photos-tabs a i {
    font-size: 13px;
  }

  .photos-content-card {
    padding: 9px;
    border-radius: 14px;
  }

  .photos-section-heading {
    margin: 5px 4px 11px;
  }

  .photos-section-heading h2 {
    font-size: 15px;
  }

  .photos-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }

  .photos-gallery-item {
    border-radius: 7px;
  }

  .photos-empty {
    min-height: 230px;
    padding: 30px 15px;
  }

  .photos-pagination {
    margin-top: 12px;
    padding-top: 12px;
    gap: 9px;
  }

  .photos-pagination .button {
    min-height: 33px;
    padding: 7px 10px;
    font-size: 9px;
  }

}


@media (max-width: 420px) {

  .photos-tabs a {
    padding-right: 10px;
    padding-left: 10px;
  }

  .photos-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .photos-content-card {
    padding: 6px;
  }

  .photos-gallery-item {
    border-radius: 5px;
  }

}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: 22px;
}

.photo-viewer[hidden] {
  display: none;
}

.photo-viewer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 10, 18, .86);
  border: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.photo-viewer-dialog {
  width: min(1280px, calc(100vw - 44px));
  height: min(860px, calc(100vh - 44px));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .46);
}

.photo-viewer-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #05080d;
}

.photo-viewer-image {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  margin: auto;
}

.photo-viewer-author {
  min-height: 76px;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-bottom: 1px solid var(--line);
}


.photo-viewer-author-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  overflow: hidden;

  color: var(--blue);
  background: var(--selected);

  border-radius: 10px;

  font-size: 12px;
  font-weight: 850;
}


.photo-viewer-author-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.photo-viewer-author-copy {
  min-width: 0;
  flex: 1;
}


.photo-viewer-sidebar-close {
  width: 36px;
  height: 36px;

  padding: 0;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  color: var(--muted);
  background: var(--bg);

  border: 0;
  border-radius: 10px;

  cursor: pointer;
}


.photo-viewer-sidebar-close:hover {
  color: var(--ink);
  background: var(--selected);
}

.photo-viewer-nav {
  width: 44px;
  height: 54px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  z-index: 4;
  color: #fff;
  background: rgba(10, 15, 22, .48);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  font-size: 24px;
  cursor: pointer;
  transform: translateY(-50%);
}

.photo-viewer-prev {
  left: 14px;
}

.photo-viewer-next {
  right: 14px;
}

.photo-viewer-counter {
  min-width: 58px;
  padding: 7px 10px;
  position: absolute;
  bottom: 14px;
  left: 50%;
  color: #fff;
  background: rgba(10, 15, 22, .55);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  transform: translateX(-50%);
}

.photo-viewer-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--card);
  border-left: 1px solid var(--line);
}

.photo-viewer-author {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.photo-viewer-author strong,
.photo-viewer-author small {
  display: block;
}

.photo-viewer-author small {
  color: var(--muted);
  font-size: 9px;
}

.photo-viewer-actions {
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.photo-viewer-reactions { min-width: 0; align-self: center; }
.photo-viewer-share-button { width: 40px; min-width: 40px; }
.post-share-icon-only > summary { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 9px; list-style: none; cursor: pointer; }
.post-share-icon-only > summary::-webkit-details-marker { display: none; }
.post-share-icon-only > summary:hover { color: var(--blue); background: var(--selected); }
.post-share-arrow { display: inline-block; transform: scaleX(-1); font-size: 20px; }

.photo-viewer-actions button {
  min-height: 38px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  background: var(--bg);
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.photo-viewer-actions button:hover {
  color: var(--blue);
  background: var(--selected);
}

.photo-viewer-description {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.photo-viewer-description p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   PHOTO VIEWER — COMMENT ROW
   ========================================================= */

.photo-viewer-comments {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  padding: 20px 22px;
}


.photo-viewer-comment {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    30px;

  column-gap: 12px;

  align-items: start;

  width: 100%;

  padding: 12px 0;

  border-bottom:
    1px solid
    var(--border, rgba(120, 140, 160, 0.14));
}


.photo-viewer-comment:last-child {
  border-bottom: 0;
}


/* АВАТАР */

.photo-viewer-comment-avatar-link {
  display: block;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  overflow: hidden;

  flex: 0 0 38px;
}


.photo-viewer-comment-avatar-link .avatar {
  display: block;

  width: 38px !important;
  height: 38px !important;

  min-width: 38px;

  margin: 0 !important;

  border-radius: 10px;

  object-fit: cover;
}


/* fallback-буква */

.photo-viewer-comment-avatar-link .avatar-fallback {
  display: grid;

  place-items: center;

  width: 38px !important;
  height: 38px !important;

  background: var(--bg);

  color: var(--accent);

  font-size: 14px;
  font-weight: 700;
}


/* ТЕКСТ */

.photo-viewer-comment-body {
  min-width: 0;

  padding-top: 1px;
}


.photo-viewer-comment-author {
  display: inline-block;

  margin: 0 0 3px;

  color: var(--ink);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.25;

  text-decoration: none;
}


.photo-viewer-comment-author:hover {
  text-decoration: underline;
}


.photo-viewer-comment-text {
  margin: 0;

  color: var(--ink);

  font-size: 14px;

  line-height: 1.42;

  overflow-wrap: anywhere;
}


/* КНОПКА ... */

.photo-viewer-comment-menu-wrap {
  position: relative;

  width: 30px;
}


.photo-viewer-comment-menu-button {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;

  border-radius: 10px;

  background: transparent;

  color: var(--muted);

  cursor: pointer;
}


.photo-viewer-comment-menu-button:hover {
  background: var(--bg);

  color: var(--ink);
}


/* МЕНЮ */

.photo-viewer-comment-menu {
  position: absolute;

  z-index: 100;

  top: 34px;
  right: 0;

  width: 190px;

  padding: 6px;

  border:
    1px solid
    var(--line);

  border-radius: 12px;

  background: var(--card);

  box-shadow:
    0 14px 36px
    rgba(0, 0, 0, 0.18);
}


.photo-viewer-comment-menu button {
  display: flex;

  align-items: center;

  gap: 9px;

  width: 100%;

  min-height: 38px;

  padding: 0 10px;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color: var(--ink);

  font: inherit;

  text-align: left;

  cursor: pointer;
}


.photo-viewer-comment-menu button:hover {
  background: var(--bg);
}


.photo-viewer-comment-menu button i {
  width: 18px;

  text-align: center;
}


.photo-viewer-comment-menu button.danger {
  color: #dc3545;
}

body.photo-viewer-open {
  overflow: hidden;
}

@media (max-width: 800px) {
  .photo-viewer {
    padding: 8px;
  }

  .photo-viewer-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    border-radius: 16px;
  }

.photo-viewer-stage {
  min-width: 0;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  overflow: hidden;

  background: #05080d;
}

  .photo-viewer-sidebar {
    max-height: 34vh;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .photo-viewer-description,
  .photo-viewer-comments {
    display: none;
  }
}
.photo-viewer-comment-form {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.photo-viewer-comment-form[hidden] {
  display: none;
}

.photo-viewer-comment-form input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 11px;
  outline: none;
}

.photo-viewer-comment-form input[type="text"]:focus {
  background: var(--focus-surface);
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.photo-viewer-comment-form button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 11px;
  font-size: 15px;
  cursor: pointer;
}

.photo-viewer-comment-form button:hover {
  filter: brightness(.95);
}
/* =========================================================
   PHOTO VIEWER — правильное масштабирование изображения
   ========================================================= */

.photo-viewer-dialog {
  width: min(94vw, 1500px);
  height: min(92vh, 950px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;

  overflow: hidden;

  background: var(--card);
  border-radius: 22px;
}


.photo-viewer-stage {
  min-width: 0;
  min-height: 0;

  width: 100%;
  height: 100%;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #111820;
}


.photo-viewer-image {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  margin: auto;

  border-radius: 0;
}


.photo-viewer-sidebar {
  min-width: 0;
  min-height: 0;
  height: 100%;

  display: flex;
  flex-direction: column;

  background: var(--card);
}


/* Крестик только справа сверху */
.photo-viewer-stage > .photo-viewer-close {
  display: none;
}


.photo-viewer-sidebar-close {
  width: 38px;
  height: 38px;

  margin-left: auto;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  color: var(--muted);
  background: var(--bg);

  border: 0;
  border-radius: 10px;

  cursor: pointer;
}


.photo-viewer-sidebar-close:hover {
  color: var(--ink);
  background: var(--selected);
}


/* Кнопки перелистывания */
.photo-viewer-nav {
  position: absolute;
  top: 50%;

  z-index: 5;

  transform: translateY(-50%);
}


.photo-viewer-prev {
  left: 18px;
}


.photo-viewer-next {
  right: 18px;
}


/* Счётчик */
.photo-viewer-counter {
  position: absolute;

  left: 50%;
  bottom: 16px;

  z-index: 5;

  transform: translateX(-50%);
}


/* Мобильная версия */
@media (max-width: 800px) {

  .photo-viewer-dialog {
    width: 100vw;
    height: 100dvh;

    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;

    border-radius: 0;
  }

  .photo-viewer-stage {
    min-height: 0;
  }

  .photo-viewer-image {
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
  }

  .photo-viewer-sidebar {
    max-height: 38vh;
  }
}

/* =========================================================
   PHOTO VIEWER — COMMENTS
   ========================================================= */

.photo-viewer-comments {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
}

.photo-viewer-comments-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 18px;
}

.photo-viewer-comment {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;

  width: 100%;
  max-width: 100%;

  padding: 10px 4px 14px;
  border-bottom: 1px solid var(--border, rgba(128, 145, 165, 0.16));
}

.photo-viewer-comment:last-child {
  border-bottom: 0;
}

.photo-viewer-comment > .avatar,
.photo-viewer-comment > a .avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  object-fit: cover;
}

.photo-viewer-comment-body {
  min-width: 0;
}

.photo-viewer-comment-body strong {
  display: block;
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink);
}

.photo-viewer-comment-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.photo-viewer-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}

.photo-viewer-comment-menu-wrap {
  position: relative;
}

.photo-viewer-comment-menu-button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.photo-viewer-comment-menu-button:hover {
  background: var(--bg);
  color: var(--ink);
}

.photo-viewer-comment-menu {
  position: absolute;
  z-index: 50;
  top: 34px;
  right: 0;

  width: 175px;
  padding: 6px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: var(--card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.photo-viewer-comment-menu button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.photo-viewer-comment-menu button:hover {
  background: var(--bg);
}

.photo-viewer-comment-menu button.danger {
  color: #dc3545;
}
/* =========================================================
   PROFILE PHOTOS PAGE FIX
   ========================================================= */

.photos-page {
  width: 100%;
  min-width: 0;
}

.photos-content-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}


/* Галерея */

.photos-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}


/* Отдельная фотография */

.photos-gallery-item {
  position: relative;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: 1 / 1;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border-radius: 12px;

  background: rgba(120, 140, 170, 0.08);

  text-decoration: none;
  cursor: pointer;
}


/* Само изображение */

.photos-gallery-item > img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit;
}


/* Hover */

.photos-gallery-item::after {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0);

  pointer-events: none;

  transition: background 0.15s ease;
}

.photos-gallery-item:hover::after {
  background: rgba(0, 0, 0, 0.05);
}


/* Заголовок блока */

.photos-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 14px;
}

.photos-section-heading h2 {
  margin: 0;
}

.photos-section-heading span {
  display: block;
  margin-top: 4px;
  opacity: 0.65;
}


/* Пагинация */

.photos-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;

  margin-top: 18px;
}

.photos-pagination > :last-child {
  justify-self: end;
}

.photos-pagination-status {
  text-align: center;
}


/* Планшет */

@media (max-width: 900px) {
  .photos-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Телефон */

@media (max-width: 600px) {
  .photos-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .photos-gallery-item {
    border-radius: 8px;
  }
}
.photo-viewer-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.photo-viewer-comment-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
}

.photo-viewer-comment-avatar img,
.photo-viewer-comment-avatar span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border-radius: inherit;
}

.photo-viewer-comment-body {
  flex: 1 1 auto;
  min-width: 0;
}

.photo-viewer-comment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.photo-viewer-comment-heading-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.photo-viewer-comment-heading-copy strong {
  color: var(--text, #172033);
  font-size: 14px;
}

.photo-viewer-comment-heading-copy small {
  color: var(--muted, #7b8494);
  font-size: 11px;
}

.photo-viewer-comment-text {
  margin: 4px 0 0;
  color: var(--text, #172033);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.photo-viewer-comment-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.photo-viewer-comment-menu-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #7b8494);
  cursor: pointer;
}

.photo-viewer-comment-menu-button:hover {
  background: var(--surface-soft, #f3f6fa);
  color: var(--text, #172033);
}

.photo-viewer-comment-menu {
  position: absolute;
  top: 31px;
  right: 0;
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line, #dfe5ec);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.photo-viewer-comment-menu[hidden] {
  display: none;
}

.photo-viewer-comment-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #172033);
  padding: 0 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.photo-viewer-comment-menu button:hover {
  background: var(--surface-soft, #f3f6fa);
}

.photo-viewer-comment-menu button.danger {
  color: #c62828;
}
.photo-viewer-comment-editor {
  margin-top: 6px;
}

.photo-viewer-comment-editor textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line, #dfe5ec);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #172033);
  padding: 9px 10px;
  font: inherit;
  line-height: 1.4;
  outline: none;
}

.photo-viewer-comment-editor textarea:focus {
  border-color: var(--accent, #2f80ed);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(47, 128, 237, 0.12));
}

.photo-viewer-comment-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 7px;
}

.photo-viewer-comment-editor-actions button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-soft, #f3f6fa);
  color: var(--text, #172033);
  cursor: pointer;
}

.photo-viewer-comment-editor-actions button.primary {
  background: var(--accent, #2f80ed);
  color: #fff;
}

/* =========================================================
   MIRT SHAPE SYSTEM — КРУГЛЫЕ ТОЛЬКО АВАТАРЫ И СТАТУСНЫЕ ТОЧКИ
   ========================================================= */

/* Пользовательские аватарки */
.avatar,
.avatar-fallback,
.greeting-avatar-link,
.greeting-avatar,
.greeting-avatar-fallback,
.profile-hero-avatar,
.profile-hero-avatar img,
.photo-viewer-author-avatar,
.photo-viewer-author-avatar img,
.photo-viewer-comment-avatar-link,
.photo-viewer-comment-avatar-link img,
.photo-viewer-comment-avatar-link .avatar,
.photo-viewer-comment > a .avatar,
.photo-viewer-comment-avatar,
.photo-viewer-comment-avatar img {
  border-radius: 50% !important;
}

.avatar,
.greeting-avatar-link,
.greeting-avatar,
.profile-hero-avatar,
.photo-viewer-author-avatar,
.photo-viewer-comment-avatar-link,
.photo-viewer-comment-avatar {
  overflow: hidden;
}

/* Миниатюра пользователя в live-toast тоже является аватаркой */
.live-notification-avatar {
  border-radius: 50% !important;
  overflow: hidden;
}

/* Маленькие статусные точки сохраняют форму точки */
.stats-live-indicator i,
.notification-row.unread::after,
[data-stats-live]::before {
  border-radius: 50% !important;
}

/* Все основные круглые action-кнопки — компактные прямоугольники */
.settings-button,
.notification-button,
.profile-summary-toggle,
.music-track-play,
.music-player-heading button,
.music-player-controls button,
.post-menu-button,
.attachment-preview-item > button,
.poll-composer-heading button,
.chat-menu-button,
.message-menu-button,
.avatar-modal-close,
.message-reply-compose button,
.photo-viewer-comment-menu-button {
  border-radius: 9px;
}

/* Кнопка поверх аватара не формирует вторую круглую рамку */
.chat-avatar-button {
  border-radius: 10px;
}

/* Капсулы и счётчики — компактные прямоугольники */
.notification-count,
.nav-notification-count,
.request-count,
.conversation-unread-count,
.feed-tabs a,
.eyebrow,
.photos-eyebrow,
.post-reaction-chip,
.post-reaction-add,
.photo-viewer-counter {
  border-radius: 8px;
}

/* Поля-композеры больше не имеют форму пилюли */
.composer-link > span:not(.avatar),
.dashboard-composer.is-collapsed .post-form textarea {
  border-radius: 11px;
}

/* =========================================================
   LIVE — красная пульсирующая точка
   ========================================================= */

[data-stats-live] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Убираем старую серую/чёрную точку */
[data-stats-live] > i,
[data-stats-live] .stats-live-dot,
[data-stats-live] .live-dot {
  display: none !important;
}

/* Новая красная точка */
[data-stats-live]::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50% !important;
  background: #ff5a5f;
  box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.35);
  animation: mirt-live-pulse 1.8s ease-out infinite;
}

@keyframes mirt-live-pulse {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.35);
  }

  55% {
    opacity: 0.72;
    box-shadow: 0 0 0 5px rgba(255, 90, 95, 0);
  }

  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 90, 95, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-stats-live]::before {
    animation: none;
  }
}

/* =========================================================
   PROFILE FORM — НАТИВНЫЕ CHECKBOX И FILE INPUT
   ========================================================= */

.stack-form input[type="checkbox"],
.field-wrap input[type="checkbox"],
.stack-form input[type="radio"],
.field-wrap input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 2px 6px 2px 0 !important;
  box-shadow: none !important;
  vertical-align: middle;
  accent-color: var(--blue);
  cursor: pointer;
}

.stack-form input[type="checkbox"],
.field-wrap input[type="checkbox"] {
  border-radius: 4px;
}

.stack-form input[type="file"],
.field-wrap input[type="file"] {
  width: auto;
  max-width: 100%;
  min-height: 34px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px;
}

.stack-form input[type="file"]::file-selector-button,
.field-wrap input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 8px;
  padding: 6px 10px;
  color: var(--blue);
  background: var(--selected);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.stack-form input[type="file"]::file-selector-button:hover,
.field-wrap input[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--selected) 86%, var(--blue));
}

.field-wrap input[type="checkbox"] + label,
.stack-form input[type="checkbox"] + label {
  display: inline;
  margin-left: 1px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.security-checkbox {
  padding: 10px 12px;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  background: var(--selected);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}

.stack-form .security-checkbox input[type="checkbox"],
.field-wrap .security-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 2px 0 0 !important;
}

.security-checkbox strong,
.security-checkbox small {
  display: block;
}

.security-checkbox small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

@media (max-width: 760px) {
  .stack-form input[type="checkbox"],
  .field-wrap input[type="checkbox"],
  .stack-form input[type="radio"],
  .field-wrap input[type="radio"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
.post-visibility {
    margin-left: auto;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;

    color: color-mix(
        in srgb,
        var(--selected) 55%,
        var(--blue) 45%
    );
}

.post-visibility i {
    font-size: 11px;
    color: inherit;
}

.post-visibility-public,
.post-visibility-friends,
.post-visibility-private {
    color: color-mix(
        in srgb,
        var(--selected) 55%,
        var(--blue) 45%
    );
}

.post-visibility + .post-views {
    margin-left: 10px;
}

/* =========================================================
   ВИДИМОСТЬ И НЕЙТРАЛЬНОЕ СОСТОЯНИЕ ПУБЛИКАЦИИ
   ========================================================= */

.post-visibility-select {
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.post-visibility-select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
  outline: 0;
}

.post-publish-state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
}

.post-publish-state-publishing {
  color: color-mix(in srgb, var(--selected) 45%, var(--blue) 55%);
}

.post-publish-state-publishing i {
  animation: post-publishing-spin 1s linear infinite;
}

.post-publish-state-review {
  color: color-mix(in srgb, var(--selected) 45%, #b56b00 55%);
}

/* =========================================================
   MODERATION DASHBOARD
   ========================================================= */
.moderation-role-badge,
.moderation-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: var(--blue);
  background: var(--selected);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.moderation-role-badge.sovereign { color: #8e5a00; background: #fff3d7; }
.moderation-tabs { margin: 0 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.moderation-tabs a { padding: 9px 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 800; }
.moderation-tabs a.active { color: var(--blue); background: var(--selected); border-color: color-mix(in srgb, var(--blue) 25%, var(--line)); }
.moderation-tabs b { margin-left: 4px; }
.moderation-section-heading { margin: 18px 0 10px; }
.moderation-section-heading h2 { margin: 0 0 4px; font-size: 18px; }
.moderation-section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.moderation-card { margin-bottom: 12px; padding: 17px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.moderation-card > header, .moderation-team-member { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.moderation-card header strong, .moderation-team-member strong { display: block; font-size: 14px; }
.moderation-card header span, .moderation-team-member span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.moderation-status.review { color: #986000; background: #fff3dc; }
.moderation-status.report { color: #a04418; background: #fff0e9; }
.moderation-post-content, .moderation-report-reason { margin: 15px 0; line-height: 1.5; }
.moderation-media { width: min(100%, 460px); max-height: 480px; margin: 0 8px 10px 0; display: inline-block; object-fit: contain; background: #111; border-radius: 12px; }
.moderation-meta { margin: 10px 0 0; display: flex; gap: 22px; flex-wrap: wrap; }
.moderation-meta div { display: flex; gap: 5px; font-size: 11px; }
.moderation-meta dt { color: var(--muted); }
.moderation-meta dd { margin: 0; font-weight: 700; }
.moderation-actions { margin-top: 15px; display: flex; gap: 9px; flex-wrap: wrap; }
.moderation-actions form, .moderation-team-member form { display: flex; gap: 7px; flex-wrap: wrap; }
.moderation-actions input { width: min(260px, 100%); }
.moderation-reject-button { color: #a53c29; background: #fff0ec; border: 1px solid #f1c9c0; }
.moderation-reported-post { padding: 12px; background: var(--bg); border-radius: 11px; }
.moderation-reported-post p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.moderation-post-link { margin-top: 11px; }
.moderation-team { display: grid; gap: 9px; }
.moderation-team-member { padding: 13px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
@media (max-width: 700px) { .moderation-card > header, .moderation-team-member { flex-direction: column; } .moderation-actions form { width: 100%; } .moderation-actions input { flex: 1; } }

.post-publish-state-failed {
  color: var(--muted);
}

.post-publish-state + .post-views {
  margin-left: 10px;
}

@keyframes post-publishing-spin {
  to { transform: rotate(360deg); }
}

.post-visibility-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 10px;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--card);
    color: var(--muted);

    cursor: pointer;

    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.post-visibility-control:hover {
    background: var(--selected);
    border-color: color-mix(
        in srgb,
        var(--blue) 24%,
        var(--line)
    );
}

.post-visibility-control:focus-within {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.post-visibility-control > i {
    flex: 0 0 auto;

    font-size: 13px;

    color: color-mix(
        in srgb,
        var(--selected) 45%,
        var(--blue) 55%
    );

    pointer-events: none;
}

.post-visibility-control:hover > i {
    color: var(--blue);
}

.post-visibility-control select,
.post-visibility-control .post-visibility-select {
    min-width: 110px;
    height: 34px;
    padding: 0 32px 0 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
    color: var(--ink);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.post-visibility-control select:hover,
.post-visibility-control .post-visibility-select:hover,
.post-visibility-control select:focus,
.post-visibility-control .post-visibility-select:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================================================
   MIRT — 404 PAGE
   ========================================================= */

.mirt-error-page {
    min-height: calc(100vh - 110px);

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 6px 20px 48px;
}


/* =========================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ========================================================= */

.mirt-error-card {
    width: min(720px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;

    text-align: center;
}


/* =========================================================
   ИЛЛЮСТРАЦИЯ
   ========================================================= */

.mirt-error-illustration {
    position: relative;

    width: min(620px, 100%);

    overflow: hidden;

    border-radius: 28px;

    background: var(--card);

    box-shadow:
        0 16px 48px rgba(15, 31, 55, .08),
        0 0 0 1px
        color-mix(
            in srgb,
            var(--blue) 12%,
            transparent
        );
}


.mirt-error-illustration img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   КНОПКИ
   ========================================================= */

.mirt-error-actions {
    width: min(520px, 100%);

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 18px;
}


.mirt-error-button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 22px;

    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease,
        filter .16s ease;
}


/* =========================================================
   "НА ГЛАВНУЮ"
   ТОЧНО ПО ЛОГИКЕ АКТИВНЫХ КНОПОК
   "ДРУЗЬЯ" / "МОИ СООБЩЕСТВА"
   ========================================================= */

.mirt-error-button-primary {
    color: var(--accent-ink) !important;

    background: var(--accent) !important;

    border: 1px solid transparent !important;

    opacity: 1 !important;
    filter: none !important;

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--accent) 18%,
            transparent
        ) !important;
}


.mirt-error-button-primary i,
.mirt-error-button-primary span {
    color: inherit !important;

    opacity: 1 !important;
}


.mirt-error-button-primary:hover {
    color: var(--accent-ink) !important;

    background: var(--accent) !important;

    filter: brightness(.96) !important;

    transform: translateY(-1px);

    box-shadow:
        0 6px 14px
        color-mix(
            in srgb,
            var(--accent) 24%,
            transparent
        ) !important;
}


/* =========================================================
   "НАЗАД"
   ========================================================= */

.mirt-error-button-secondary {
    color: var(--ink) !important;

    background:
        color-mix(
            in srgb,
            var(--card) 94%,
            var(--blue) 6%
        ) !important;

    border: 1px solid var(--line) !important;

    opacity: 1 !important;
}


.mirt-error-button-secondary i,
.mirt-error-button-secondary span {
    color: inherit !important;
}


.mirt-error-button-secondary:hover {
    background: var(--selected) !important;

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .mirt-error-page {
        min-height: calc(100vh - 80px);

        padding:
            4px
            14px
            34px;
    }


    .mirt-error-illustration {
        width: 100%;

        border-radius: 20px;
    }


    .mirt-error-actions {
        grid-template-columns: 1fr;

        margin-top: 16px;
    }


    .mirt-error-button {
        width: 100%;

        min-height: 46px;
    }
}
/* =========================================================
   ВЛОЖЕНИЯ В ПОСТАХ — АУДИО И ДОКУМЕНТЫ
   ========================================================= */

/* ---------- Аудиофайл ---------- */
.post-audio-attachment {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin-top: 14px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(110px, 190px) 34px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--selected) 62%, var(--card));
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 5%, transparent);
}

.post-audio-play {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 24%, transparent);
  font-size: 22px;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.post-audio-play:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}

.post-audio-attachment.is-playing .post-audio-play {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent),
              0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

.post-audio-copy {
  min-width: 0;
}

.post-audio-title,
.post-audio-meta {
  display: block;
}

.post-audio-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-audio-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
}

.post-audio-wave {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  color: var(--blue);
}

.post-audio-wave i {
  width: 3px;
  height: 8px;
  flex: 0 0 3px;
  display: block;
  background: currentColor;
  border-radius: 999px;
  opacity: .55;
  transform-origin: center;
}

.post-audio-wave i:nth-child(3n + 1) { height: 12px; }
.post-audio-wave i:nth-child(4n + 2) { height: 20px; }
.post-audio-wave i:nth-child(5n + 3) { height: 26px; }
.post-audio-wave i:nth-child(6n + 4) { height: 16px; }

.post-audio-attachment.is-playing .post-audio-wave i {
  opacity: .95;
  animation: mirt-post-audio-wave .72s ease-in-out infinite alternate;
}

.post-audio-attachment.is-playing .post-audio-wave i:nth-child(2n) { animation-delay: -.18s; }
.post-audio-attachment.is-playing .post-audio-wave i:nth-child(3n) { animation-delay: -.34s; }
.post-audio-attachment.is-playing .post-audio-wave i:nth-child(5n) { animation-delay: -.52s; }

@keyframes mirt-post-audio-wave {
  from { transform: scaleY(.42); }
  to   { transform: scaleY(1.08); }
}

.post-audio-open-player {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: color-mix(in srgb, var(--selected) 72%, var(--card));
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 10px;
  font-size: 15px;
}

/* ---------- Документ ---------- */
.post-document-card {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin-top: 14px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--selected) 38%, var(--card));
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 14px;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 4%, transparent);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.post-document-card:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--selected) 58%, var(--card));
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
}

.post-document-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 12px;
  font-size: 23px;
}

.post-document-copy {
  min-width: 0;
}

.post-document-copy strong,
.post-document-copy small {
  display: block;
}

.post-document-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-document-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
}

.post-document-download {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: color-mix(in srgb, var(--selected) 76%, var(--card));
  border: 1px solid color-mix(in srgb, var(--blue) 11%, var(--line));
  border-radius: 11px;
  font-size: 17px;
}

@media (max-width: 700px) {
  .post-audio-attachment {
    min-height: 64px;
    padding: 9px 10px;
    grid-template-columns: 40px minmax(0, 1fr) 72px;
    gap: 9px;
  }

  .post-audio-play {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .post-audio-open-player {
    display: none;
  }

  .post-audio-wave {
    height: 26px;
    gap: 2px;
  }

  .post-audio-wave i {
    width: 2px;
    flex-basis: 2px;
  }

  .post-document-card {
    min-height: 64px;
    padding: 9px 10px;
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    gap: 9px;
  }

  .post-document-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 20px;
  }

  .post-document-download {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-audio-attachment.is-playing .post-audio-wave i {
    animation: none;
  }
}


/* =========================================================
   ПУБЛИКАЦИИ — СТРОГИЙ ПОРЯДОК МАТЕРИАЛОВ И МЕДИАГАЛЕРЕЯ
   ========================================================= */

.post-media-gallery {
  position: relative;
  width: 100%;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 96%, var(--selected));
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--blue) 16%);
}

.post-media-stage {
  width: 100%;
}

.post-media-slide {
  min-width: 0;
  background: transparent;
}

.post-media-slide > a {
  display: block;
  width: 100%;
}

/* Одна фотография/видео никогда не кадрируется. */
.post-media-gallery.is-single .post-media-image,
.post-media-gallery.is-single .post-media-video {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
}

/* Сетка: все изображения видны целиком, без object-fit: cover. */
.post-media-layout-grid .post-media-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  align-items: start;
}

.post-media-layout-grid.is-single .post-media-stage {
  grid-template-columns: 1fr;
}

.post-media-layout-grid .post-media-slide {
  display: block !important;
}

.post-media-layout-grid .post-media-image,
.post-media-layout-grid .post-media-video {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
  background: #0000;
}

.post-media-layout-grid .post-media-video {
  background: #000;
}

/* Если медиа три — последнее занимает всю ширину, но не обрезается. */
.post-media-layout-grid .post-media-slide:nth-child(3):last-child {
  grid-column: 1 / -1;
}

/* Слайдер. */
.post-media-layout-slider .post-media-stage {
  position: relative;
  display: block;
}

.post-media-layout-slider .post-media-slide {
  display: none;
}

.post-media-layout-slider .post-media-slide.is-active {
  display: block;
}

.post-media-layout-slider .post-media-image,
.post-media-layout-slider .post-media-video {
  width: 100%;
  height: auto !important;
  max-height: min(72vh, 760px);
  display: block;
  object-fit: contain !important;
}

.post-media-layout-slider .post-media-video {
  background: #000;
}

.post-media-nav {
  width: 42px;
  height: 42px;
  padding: 0;
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(10, 18, 28, .56);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.post-media-nav:hover {
  background: rgba(10, 18, 28, .72);
}

.post-media-nav-prev { left: 12px; }
.post-media-nav-next { right: 12px; }

.post-media-counter {
  min-width: 54px;
  min-height: 28px;
  padding: 4px 10px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(10, 18, 28, .58);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

/* Последующие блоки идут строго вертикально и не попадают в media-grid. */
.post-media-gallery + .post-location,
.post-location + .post-audio-attachment,
.post-audio-attachment + .post-audio-attachment,
.post-audio-attachment + .post-document-card,
.post-document-card + .post-document-card {
  margin-top: 14px;
}

/* Выбор «Сетка / Слайд» в композере показывается только при 2+ медиа. */
.post-media-layout-control {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--muted);
  background: color-mix(in srgb, var(--selected) 42%, var(--card));
  border: 1px solid var(--line);
  border-radius: 12px;
}

.post-media-layout-control[hidden] { display: none !important; }

.post-media-layout-label {
  margin-right: 2px;
  font-size: 11px;
  font-weight: 800;
}

.post-media-layout-option {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.post-media-layout-option.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 640px) {
  .post-media-layout-grid .post-media-stage {
    gap: 3px;
  }

  .post-media-nav {
    width: 36px;
    height: 36px;
  }

  .post-media-nav-prev { left: 8px; }
  .post-media-nav-next { right: 8px; }
  .post-media-counter { right: 8px; bottom: 8px; }
}

/* =========================================================
   MIRT MUSIC TRACKS — круглый Play + эквалайзер как в постах
   ========================================================= */

.music-track-row {
  position: relative;
}

.music-track-play {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 18px;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .2s ease;
}

.music-track-play:hover {
  transform: translateY(-1px);
  filter: brightness(.98);
}

.music-track-row.is-playing .music-track-play {
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent);
  animation: mirt-music-play-pulse 1.55s ease-in-out infinite;
}

@keyframes mirt-music-play-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 17%, transparent),
      0 0 0 10px color-mix(in srgb, var(--accent) 7%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent),
      0 0 0 17px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

/* Место под waveform справа от названия трека. */
.music-track-copy {
  position: relative;
  padding-right: 116px;
}

/* Статичная форма волны, когда трек не играет. */
.music-track-copy::after {
  content: "";
  width: 90px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  opacity: .68;
  background:
    linear-gradient(var(--blue), var(--blue)) 0 50% / 3px 10px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 7px 50% / 3px 18px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 14px 50% / 3px 26px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 21px 50% / 3px 14px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 28px 50% / 3px 22px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 35px 50% / 3px 12px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 42px 50% / 3px 28px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 49px 50% / 3px 17px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 56px 50% / 3px 24px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 63px 50% / 3px 11px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 70px 50% / 3px 20px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 77px 50% / 3px 27px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 84px 50% / 3px 15px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 91px 50% / 3px 9px no-repeat;
  border-radius: 999px;
  transition: opacity .18s ease;
}

/* Во время проигрывания — живой эквалайзер. */
.music-track-row.is-playing .music-track-copy::after {
  opacity: 1;
  animation: mirt-music-equalizer .72s steps(4, end) infinite alternate;
}

@keyframes mirt-music-equalizer {
  0% {
    background-size:
      2px 5px, 2px 14px, 2px 8px, 2px 16px, 2px 9px, 2px 15px, 2px 6px,
      2px 12px, 2px 17px, 2px 8px, 2px 14px, 2px 6px, 2px 11px, 2px 16px;
  }

  33% {
    background-size:
      2px 14px, 2px 6px, 2px 16px, 2px 8px, 2px 15px, 2px 5px, 2px 13px,
      2px 7px, 2px 14px, 2px 17px, 2px 7px, 2px 12px, 2px 16px, 2px 8px;
  }

  66% {
    background-size:
      2px 8px, 2px 16px, 2px 5px, 2px 13px, 2px 17px, 2px 9px, 2px 14px,
      2px 6px, 2px 12px, 2px 15px, 2px 8px, 2px 16px, 2px 7px, 2px 12px;
  }

  100% {
    background-size:
      2px 15px, 2px 8px, 2px 12px, 2px 5px, 2px 14px, 2px 16px, 2px 7px,
      2px 15px, 2px 6px, 2px 13px, 2px 17px, 2px 9px, 2px 14px, 2px 6px;
  }
}

@media (max-width: 700px) {
  .music-track-copy {
    padding-right: 72px;
  }

  .music-track-copy::after {
    width: 60px;
    transform: translateY(-50%) scaleX(.62);
    transform-origin: right center;
  }
}

@media (max-width: 520px) {
  .music-track-copy {
    padding-right: 0;
  }

  .music-track-copy::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-track-row.is-playing .music-track-play,
  .music-track-row.is-playing .music-track-copy::after {
    animation: none;
  }
}

/* =========================================================
   MIRT — СТАТУСЫ ДОСТАВКИ ЛИЧНЫХ СООБЩЕНИЙ
   ========================================================= */

.message-delivery-status {
  --message-status-idle: #8b949e;

  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  color: var(--message-status-idle);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.16em;
  opacity: 1;
  cursor: default;
  outline: none;
}

/* Отправлено и доставлено всегда нейтрально-серые. */
.message-delivery-status.is-sent,
.message-delivery-status.is-delivered {
  color: var(--message-status-idle);
}

/* Только прочитанное сообщение получает цвет текущей темы. */
.message-delivery-status.is-read {
  color: var(--blue);
}

.message-delivery-checks {
  display: inline-block;
  white-space: nowrap;
}

/* Всплывающая карточка со временем отправки / доставки / прочтения. */
.message-delivery-tooltip {
  width: max-content;
  min-width: 138px;
  padding: 8px 10px;
  display: grid;
  gap: 5px;
  position: absolute;
  right: -6px;
  bottom: calc(100% + 8px);
  z-index: 40;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 97%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(22, 36, 54, .16);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition:
    opacity .14s ease,
    visibility .14s ease,
    transform .14s ease;
}

.message-delivery-tooltip::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  bottom: -4px;
  background: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.message-delivery-tooltip > span {
  display: grid;
  grid-template-columns: auto minmax(30px, auto);
  align-items: center;
  gap: 10px;
}

.message-delivery-tooltip strong {
  font-weight: 700;
}

.message-delivery-tooltip time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.message-delivery-status:hover .message-delivery-tooltip,
.message-delivery-status:focus .message-delivery-tooltip,
.message-delivery-status:focus-visible .message-delivery-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mirt messenger: groups, channels, reactions and short video notes. */
.message-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.section-overview { margin-bottom: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
/* The attachment picker opens below the composer.  Let it leave the expanded
   feed card and keep that card above the tabs and Stories rail that follow. */
.feed-overview[open] { position: relative; z-index: 2; overflow: visible; }
.section-overview > summary { min-height: 62px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); list-style: none; cursor: pointer; }
.section-overview > summary::-webkit-details-marker { display: none; }
.section-overview > summary > h1 { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.section-overview > summary > h1 > span { min-width: 0; display: inline-flex; align-items: center; gap: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-overview > summary > h1 > span > i { color: var(--blue); font-size: 19px; }
.section-overview-chevron { flex: 0 0 auto; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.section-overview[open] > summary { border-bottom: 1px solid var(--line); }
.section-overview[open] .section-overview-chevron { color: var(--blue); transform: rotate(180deg); }
.section-overview-content.page-header { margin: 0; padding: 20px 22px 22px; border: 0; border-radius: 0; box-shadow: none; }
.section-overview-content .eyebrow { margin-bottom: 7px; }
.section-overview-content p { max-width: 470px; }
.section-overview-body { padding: 18px 22px 22px; color: var(--muted); border-top: 0; }
.section-overview-body p { margin: 0; }
.section-overview-composer { padding: 0 22px 22px; }
.section-overview-composer .composer-card { margin: 0; background: var(--bg); border-color: var(--line); box-shadow: none; }
.photos-page > .section-overview { margin-bottom: 0; }
.photos-overview > .photos-hero { margin: 0; padding: 20px 22px 22px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.section-overview-actions { width: min(100%, 370px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.section-overview-actions.is-single { width: min(100%, 181px); grid-template-columns: minmax(0, 1fr); }
.section-overview-actions .button { width: 100%; min-height: 40px; padding-inline: 12px; white-space: nowrap; }
.inbox-notification-panel { margin: 0 0 10px; min-height: 46px; padding: 5px 6px 5px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.inbox-notification-panel-label { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.inbox-notification-panel .inbox-notification-action { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; display: grid; place-items: center; color: var(--blue); background: var(--selected); border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line)); border-radius: 10px; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.inbox-notification-panel .inbox-notification-action:hover { color: var(--button-text); background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.inbox-notification-panel .inbox-notification-action:disabled { cursor: wait; opacity: .72; transform: none; }
.inbox-notification-panel.is-enabled { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.inbox-notification-panel.is-enabled .inbox-notification-action { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--card)); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.section-overview-search { margin-bottom: 14px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.section-overview > .section-overview-search { margin: 0 22px 22px; background: var(--bg); }
.section-overview-search > form { min-height: 46px; padding: 5px 6px 5px 14px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.section-overview-search > form:focus-within { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.section-overview-search > form > i { color: var(--blue); font-size: 16px; }
.section-overview-search input { width: 100%; min-width: 0; padding: 7px 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.section-overview-search form > span { display: inline-flex; align-items: center; gap: 5px; }
.section-overview-search-clear, .inbox-channel-search-clear { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: 9px; }
.section-overview-search-clear:hover, .inbox-channel-search-clear:hover { color: var(--blue); background: var(--selected); }
.inbox-channel-results { margin-top: 10px; display: grid; gap: 7px; }
.inbox-channel-result { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.inbox-overview .inbox-channel-result { background: var(--card); }
.inbox-channel-result:hover { background: var(--selected); border-color: color-mix(in srgb, var(--blue) 32%, var(--line)); transform: translateY(-1px); }
.inbox-channel-result > span:nth-child(2) { min-width: 0; }
.inbox-channel-result strong, .inbox-channel-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-channel-result strong { font-size: 12px; }
.inbox-channel-result small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.inbox-channel-result > b { color: var(--blue); font-size: 10px; white-space: nowrap; }
.inbox-channel-search-empty { margin: 0; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: left; }
.inbox-channel-search-empty > i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: var(--blue); background: var(--selected); border-radius: 10px; }
.inbox-channel-search-empty strong, .inbox-channel-search-empty small { display: block; }
.inbox-channel-search-empty strong { color: var(--ink); font-size: 11px; }
.inbox-channel-search-empty small { margin-top: 2px; font-size: 9px; }
.conversation-kind-icon, .chat-conversation-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--blue), var(--accent-ink)); border-radius: 50%; font-size: 18px; }
.conversation-kind-icon.channel, .channel-chat-card .chat-conversation-icon { background: linear-gradient(135deg, #8e64d8, #c04a97); }
.chat-conversation-icon { width: 34px; height: 34px; font-size: 14px; }
.conversation-kind-icon img, .chat-conversation-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.message-video { width: min(340px, 100%); max-height: 340px; margin-top: 4px; display: block; object-fit: cover; border-radius: 10px; background: #101116; }
.message-video.message-video-note { width: min(240px, 62vw); height: auto; max-height: none; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 18px rgba(25, 63, 101, .22); }
.message-footer { min-width: 0; max-width: 100%; margin-top: 7px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.message-footer > * { min-width: 0; }
.message-footer .message-reactions { min-width: 0; min-height: 28px; margin-top: 0; flex: 1 1 0; }
.message-footer .message-meta { margin-top: 0; margin-bottom: 2px; flex: 0 0 auto; white-space: nowrap; }
.message-reactions { min-height: 30px; margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.message-reaction-summary { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.message-reaction-chip { min-height: 28px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; font: inherit; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.message-reaction-chip:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }
.message-reaction-chip.is-mine { color: var(--blue-dark); background: var(--accent-soft); border-color: var(--accent); }
.message-reaction-emoji { font-size: 15px; line-height: 1; }
.message-reaction-count { color: var(--muted); font-size: 11px; font-weight: 700; }
.message-reaction-chip.is-mine .message-reaction-count { color: inherit; }
.message-reaction-picker-wrap { position: relative; display: inline-flex; }
.message-reaction-picker-wrap[hidden] { display: none; }
.message-reaction-add { width: 28px; height: 28px; min-width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; }
.message-reaction-add:hover { color: var(--accent); background: var(--accent-soft); }
.message-reaction-picker { --message-picker-cell: 32px; --message-picker-gap: 4px; --message-picker-columns: 7; max-width: calc(100vw - 16px); box-sizing: border-box; width: max-content; padding: 7px; position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(var(--message-picker-columns), var(--message-picker-cell)); grid-auto-rows: var(--message-picker-cell); align-items: center; gap: var(--message-picker-gap); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .15); }
.message-bubble.mine .message-reaction-picker { right: 0; left: auto; }
.message-reaction-picker[data-message-picker-vertical="down"] { top: calc(100% + 8px); bottom: auto; }
/* `align=right` means the popover is anchored on its right edge, so it opens left. */
.message-reaction-picker[data-message-picker-align="left"] { right: auto; left: 0; }
.message-reaction-picker[data-message-picker-align="right"] { right: 0; left: auto; }
.message-reaction-picker[hidden] { display: none; }
.message-reaction-picker button { width: var(--message-picker-cell); height: var(--message-picker-cell); min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 9px; font-size: var(--message-picker-font-size, 19px); line-height: 1; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.message-reaction-picker button:hover { background: var(--accent-soft); transform: scale(1.12); }

.message-channel-quote { width: min(430px, 68vw); margin-top: 7px; padding: 11px; display: grid; gap: 9px; overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--card) 92%, var(--bg)); border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line)); border-left: 4px solid var(--blue); border-radius: 12px; }
.message-channel-quote:hover { color: var(--ink); background: var(--selected); border-color: color-mix(in srgb, var(--blue) 46%, var(--line)); }
.message-channel-quote-source { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 8px; }
.message-channel-quote-source > span:nth-child(2) { min-width: 0; }
.message-channel-quote-source strong, .message-channel-quote-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-channel-quote-source strong { color: var(--ink); font-size: 11px; }
.message-channel-quote-source small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.message-channel-quote-source > i { color: var(--blue); font-size: 19px; }
.message-channel-quote-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, #8e64d8, #c04a97); border-radius: 50%; }
.message-channel-quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-channel-quote-text { max-height: 7em; display: block; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.message-channel-quote-media { width: 100%; max-height: 260px; display: block; object-fit: cover; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.message-video-quote { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 74%, var(--card)), color-mix(in srgb, var(--card) 94%, var(--bg))); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); border-left-color: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 10%, transparent); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.message-video-quote:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 98%, var(--card)), var(--selected)); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.message-video-quote .message-channel-quote-avatar { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 52%, var(--card)); }
.message-video-quote > .mirt-player { aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 9px; }
.message-video-quote .message-channel-quote-open, .message-video-quote .message-channel-quote-source > i { color: var(--accent-ink); }
.message-channel-quote-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--blue); font-size: 9px; font-weight: 800; }
.message-channel-quote-unavailable { grid-template-columns: 30px minmax(0, 1fr); align-items: center; border-left-color: var(--muted); }
.message-channel-quote-unavailable > i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: var(--bg); border-radius: 9px; }
.message-channel-quote-unavailable strong, .message-channel-quote-unavailable small { display: block; }
.message-channel-quote-unavailable small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.message-story-quote { width: min(430px, 68vw); margin-top: 7px; padding: 11px; display: grid; gap: 9px; overflow: hidden; color: var(--ink); text-decoration: none; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 78%, var(--card)), color-mix(in srgb, var(--card) 94%, var(--bg))); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-left: 4px solid var(--accent); border-radius: 13px; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent); transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.message-story-quote:hover { color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 98%, var(--card)), var(--selected)); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.message-story-quote:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.message-story-quote-kicker { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.message-story-quote-kicker > i { font-size: 13px; }
.message-story-quote-source { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 8px; }
.message-story-quote-source > span:nth-child(2) { min-width: 0; }
.message-story-quote-source strong, .message-story-quote-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-story-quote-source strong { color: var(--ink); font-size: 11px; }
.message-story-quote-source small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.message-story-quote-source > i { color: var(--accent-ink); font-size: 15px; }
.message-story-quote-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 46%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 50%; }
.message-story-quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-story-quote-text { max-height: 5.8em; display: block; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.message-story-quote-media { width: 100%; max-height: 250px; display: block; object-fit: cover; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 9px; }
.message-story-quote-video { min-height: 76px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 58%, var(--blue)), color-mix(in srgb, var(--accent-soft) 72%, var(--card))); border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 9px; font-size: 10px; font-weight: 800; }
.message-story-quote-video > i { width: 28px; height: 28px; display: grid; place-items: center; padding-left: 2px; color: var(--accent-ink); background: color-mix(in srgb, var(--card) 40%, transparent); border: 1px solid color-mix(in srgb, var(--card) 70%, transparent); border-radius: 50%; font-size: 15px; }
.message-story-quote-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--accent-ink); font-size: 9px; font-weight: 850; }
.message-story-quote-unavailable { grid-template-columns: 30px minmax(0, 1fr); align-items: center; color: var(--muted); background: color-mix(in srgb, var(--card) 94%, var(--bg)); border-left-color: var(--muted); box-shadow: none; }
.message-story-quote-unavailable > i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: var(--bg); border-radius: 9px; }
.message-story-quote-unavailable strong, .message-story-quote-unavailable small { display: block; }
.message-story-quote-unavailable strong { color: var(--ink); font-size: 10px; }
.message-story-quote-unavailable small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.channel-comments { margin-top: 5px; color: inherit; }
.channel-comments summary { color: var(--muted); cursor: pointer; font-size: 10px; }
.channel-comment-list { max-height: 240px; margin-top: 6px; overflow-y: auto; }
.channel-comment-list article { margin: 4px 0; padding: 6px 8px; color: var(--ink); background: color-mix(in srgb, var(--card) 80%, transparent); border-radius: 8px; font-size: 10px; }
.channel-comment-list article strong, .channel-comment-list article time { font-size: 9px; }
.channel-comment-list article p { margin: 2px 0; }
.channel-comment-list article time { color: var(--muted); }
.channel-comment-form { margin-top: 7px; display: flex; gap: 4px; }
.channel-comment-form input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 10px; }
.channel-comment-form button { width: 30px; border: 0; color: var(--accent-ink); background: var(--accent); border-radius: 8px; cursor: pointer; }
.channel-read-only { margin: 10px 14px 14px; padding: 11px 13px; color: var(--muted); background: var(--selected); border-radius: 11px; font-size: 11px; }
.conversation-create-card { max-width: 820px; padding: clamp(22px, 4vw, 38px); position: relative; overflow: hidden; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 31%), var(--card); }
.conversation-create-card::after { width: 240px; height: 240px; content: ""; position: absolute; right: -130px; bottom: -145px; border: 34px solid color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 50%; pointer-events: none; }
.conversation-create-heading { max-width: 650px; margin-bottom: 28px; position: relative; z-index: 1; }
.conversation-create-heading::before { width: 46px; height: 5px; margin-bottom: 16px; content: ""; display: block; background: var(--accent); border-radius: 999px; box-shadow: 18px 0 0 color-mix(in srgb, var(--accent) 24%, transparent); }
.conversation-create-heading .back-link { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; }
.conversation-create-heading .eyebrow { margin-bottom: 8px; }
.conversation-create-heading h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.045em; }
.conversation-create-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.conversation-create-form { display: grid; gap: 20px; position: relative; z-index: 1; }
.conversation-kind-field, .conversation-members-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.conversation-kind-field legend, .conversation-members-field legend { margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 850; }
.conversation-kind-field legend > span, .conversation-members-field legend > span { width: 20px; height: 20px; margin-right: 6px; display: inline-grid; place-items: center; color: var(--accent-ink); background: var(--blue); border-radius: 50%; font-size: 10px; }
.conversation-section-hint { margin: 0 0 11px; color: var(--muted); font-size: 10px; }
.conversation-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conversation-type-option { min-width: 0; min-height: 94px; padding: 14px; display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) 18px; align-items: center; gap: 10px; color: var(--ink); background: color-mix(in srgb, var(--bg) 66%, transparent); border: 1px solid var(--line); border-radius: 15px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.conversation-type-option:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); transform: translateY(-1px); }
.conversation-type-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 23%, var(--card)); border-color: color-mix(in srgb, var(--blue) 65%, var(--line)); box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 14%, transparent); }
.conversation-type-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.conversation-type-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 12px; font-size: 17px; }
.conversation-type-option:has(input:checked) .conversation-type-icon { color: var(--accent-ink); background: var(--blue); }
.conversation-type-option strong, .conversation-type-option small { display: block; }
.conversation-type-option strong { margin-bottom: 2px; font-size: 12px; }
.conversation-type-option small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.conversation-type-check { color: var(--blue); font-size: 17px; opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.conversation-type-option:has(input:checked) .conversation-type-check { opacity: 1; transform: scale(1); }
.conversation-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.conversation-form-field { min-width: 0; display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.conversation-form-field > input, .conversation-form-field > textarea { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; outline: 0; }
.conversation-form-field > input { min-height: 44px; }
.conversation-title-field > input { min-height: 46px; padding-inline: 13px; background: color-mix(in srgb, var(--card) 82%, var(--bg)); border-radius: 12px; }
.conversation-form-field > textarea { min-height: 106px; resize: vertical; }
.conversation-form-field > input:focus, .conversation-form-field > textarea:focus { background: var(--focus-surface); border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.conversation-form-field > small { color: var(--muted); font-size: 9px; font-weight: 500; }
.conversation-description-field { grid-row: span 1; }
.conversation-members-field { padding: 16px; background: color-mix(in srgb, var(--bg) 52%, transparent); border: 1px solid var(--line); border-radius: 15px; }
.conversation-members-heading { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conversation-members-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.conversation-members-heading b { padding: 5px 7px; display: inline-flex; align-items: center; gap: 4px; color: var(--blue); background: var(--selected); border-radius: 8px; font-size: 10px; white-space: nowrap; }
.conversation-member-search { min-height: 42px; margin: 0 0 10px; padding: 0 10px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 26px; align-items: center; gap: 7px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 11px; transition: border-color .16s ease, box-shadow .16s ease; }
.conversation-member-search:focus-within { border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.conversation-member-search > i { color: var(--blue); font-size: 14px; }
.conversation-member-search input { width: 100%; min-width: 0; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 11px; }
.conversation-member-search button { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.conversation-member-search button:hover { color: var(--ink); background: var(--selected); }
.conversation-member-search-result { margin: -2px 0 9px; color: var(--muted); font-size: 10px; }
.conversation-members-grid { max-height: 245px; padding: 3px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow-y: auto; }
.conversation-member-option { min-width: 0; padding: 8px; display: grid; grid-template-columns: 17px 26px minmax(0, 1fr) 16px; align-items: center; gap: 7px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.conversation-member-option:hover { background: var(--selected); }
.conversation-member-option:has(input:checked) { color: var(--blue-dark); background: var(--accent-soft); border-color: var(--accent); }
.conversation-member-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.conversation-member-avatar { width: 26px; height: 26px; display: grid; place-items: center; color: var(--accent-ink); background: var(--blue); border-radius: 50%; font-size: 10px; font-weight: 850; }
.conversation-member-option > span:nth-of-type(2) { overflow: hidden; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.conversation-member-option > i { color: var(--blue); opacity: 0; }
.conversation-member-option:has(input:checked) > i { opacity: 1; }
.conversation-comments-option { padding: 12px 13px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink); background: color-mix(in srgb, var(--selected) 70%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); border-radius: 13px; }
.conversation-comments-option[hidden] { display: none; }
.conversation-comments-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue); background: var(--card); border-radius: 10px; font-size: 17px; }
.conversation-comments-option label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; cursor: pointer; }
.conversation-comments-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.conversation-comments-option strong, .conversation-comments-option small { display: block; }
.conversation-comments-option strong { font-size: 11px; }
.conversation-comments-option small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.conversation-create-actions { display: flex; justify-content: flex-end; gap: 8px; }
.conversation-create-actions .button { min-width: 126px; }

/* Base light theme: keep symbols legible instead of placing blue glyphs on
   nearly identical blue surfaces. Other color themes retain their palette. */
html[data-theme="light"] .conversation-type-option {
  background: #f8fbff;
  border-color: #d5e3f2;
}
html[data-theme="light"] .conversation-type-option:has(input:checked) {
  background: #eaf4ff;
  border-color: #5b9dde;
  box-shadow: 0 8px 20px rgba(23, 111, 199, .10);
}
html[data-theme="light"] .conversation-kind-field legend > span,
html[data-theme="light"] .conversation-members-field legend > span,
html[data-theme="light"] .conversation-type-option:has(input:checked) .conversation-type-icon,
html[data-theme="light"] .conversation-member-avatar {
  color: #fff;
  background: #176fc7;
}
html[data-theme="light"] .conversation-type-icon {
  color: #0b57a2;
  background: #dcecff;
  border: 1px solid #c4ddf7;
}
html[data-theme="light"] .conversation-type-option:has(input:checked) .conversation-type-icon {
  border-color: #176fc7;
  box-shadow: 0 5px 12px rgba(23, 111, 199, .18);
}
html[data-theme="light"] .conversation-members-field {
  background: #f7faff;
  border-color: #d5e3f2;
}
html[data-theme="light"] .conversation-member-option {
  background: #fff;
  border-color: #d8e5f2;
}
html[data-theme="light"] .conversation-member-avatar {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #bcd8f2;
}
.inbox-filters { align-items: center; flex-wrap: wrap; }
.inbox-filters a { display: inline-flex; align-items: center; gap: 6px; }
.inbox-filters a i { font-size: 12px; }
.inbox-filter-separator { width: 1px; height: 20px; margin: 0 3px; background: var(--line); }
.support-request-card .moderation-status.support { color: var(--blue); background: var(--selected); }
.support-request-card .moderation-status.support.resolved { color: #19734d; background: #e8f8ef; }
.support-request-card .moderation-status.support.dismissed { color: var(--muted); background: var(--bg); }
.support-request-solution { margin: 12px 0; padding: 11px 12px; background: var(--selected); border-radius: 11px; }
.support-request-solution strong { color: var(--blue); font-size: 11px; }
.support-request-solution p { margin: 5px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.support-request-screenshot { width: min(100%, 390px); display: block; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.support-request-screenshot img { width: 100%; max-height: 290px; display: block; object-fit: cover; }
.support-request-screenshot span { padding: 6px 8px; display: block; color: var(--blue); background: var(--selected); font-size: 10px; font-weight: 800; }
.support-request-review { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.support-request-actions { align-items: center; }
.support-request-actions select { min-height: 34px; padding: 6px 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 11px; }

/* Управление группой и каналом. */
.conversation-manage-card { max-width: 860px; margin-inline: auto; }
.conversation-manage-header { margin-bottom: 24px; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; }
.conversation-manage-header .back-link { grid-column: 1 / -1; }
.conversation-manage-header h1 { margin: 2px 0 4px; font-size: 26px; letter-spacing: -.03em; }
.conversation-manage-header p { margin: 0; color: var(--muted); font-size: 12px; }
.conversation-manage-icon { width: 50px; height: 50px; display: grid; place-items: center; overflow: hidden; color: var(--accent-ink); background: linear-gradient(135deg, var(--blue), var(--accent)); border-radius: 16px; font-size: 22px; }
.conversation-manage-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.conversation-manage-section { margin-top: 18px; padding: 18px; background: color-mix(in srgb, var(--bg) 55%, var(--card)); border: 1px solid var(--line); border-radius: 16px; }
.conversation-manage-section-heading { margin-bottom: 15px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.conversation-manage-section-heading > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--blue); background: var(--selected); border-radius: 10px; }
.conversation-manage-section-heading h2 { margin: 0 0 2px; font-size: 15px; }
.conversation-manage-section-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.conversation-settings-form { max-width: 620px; }
.conversation-member-add { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.conversation-member-add select { min-width: 0; flex: 1; }
.conversation-manage-member-search { min-width: 190px; min-height: 38px; padding: 0 10px; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.conversation-manage-member-search:focus-within { border-color: var(--focus-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.conversation-manage-member-search i { color: var(--blue); font-size: 13px; }
.conversation-manage-member-search input { width: 100%; min-width: 0; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 11px; }
.conversation-manage-member-search-empty { width: 100%; margin: 0; color: var(--muted); font-size: 10px; }
.conversation-manage-member-search-empty[hidden] { display: none; }
.conversation-manage-members { display: grid; gap: 8px; }
.conversation-manage-member { min-width: 0; padding: 10px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.conversation-manage-member strong, .conversation-manage-member small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-manage-member strong { font-size: 12px; }
.conversation-manage-member small { color: var(--muted); font-size: 9px; }
.conversation-manage-member-actions { display: flex; align-items: center; gap: 6px; }
.conversation-delete-zone { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-color: color-mix(in srgb, var(--red) 26%, var(--line)); }
.conversation-delete-zone h2 { margin: 0 0 3px; color: var(--ink); font-size: 13px; }
.conversation-delete-zone p { margin: 0; color: var(--muted); font-size: 10px; }
.conversation-delete-icon { color: #fff; background: var(--red); }
.conversation-delete-link { min-height: 34px; padding: 7px 10px; flex: 0 0 auto; color: var(--red); background: transparent; border-color: color-mix(in srgb, var(--red) 70%, var(--line)); font-size: 10px; }
.conversation-delete-link:hover { color: #fff; background: var(--red); border-color: var(--red); }
.conversation-delete-card { max-width: 620px; padding: clamp(24px, 5vw, 44px); }
.conversation-delete-card .back-link { margin-bottom: 24px; display: inline-flex; }
.conversation-delete-card h1 { margin: 10px 0; }
.conversation-delete-card > p { max-width: 540px; margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.conversation-delete-icon { width: 52px; height: 52px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 16px; font-size: 24px; }
.conversation-delete-title-form { max-width: 430px; }
.conversation-delete-title-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; }
.conversation-delete-title-form input { min-height: 44px; padding: 10px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.conversation-manage-member-actions form { display: flex; align-items: center; gap: 6px; }
.conversation-manage-member-actions select { min-height: 34px; max-width: 145px; font-size: 10px; }
.conversation-member-remove { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--red) 24%, var(--line)); border-radius: 9px; cursor: pointer; }
.conversation-member-remove:hover { color: #fff; background: var(--red); }
.channel-preview-card { max-width: 560px; margin-inline: auto; padding: 34px; text-align: center; }
.channel-preview-icon { width: 68px; height: 68px; margin: 0 auto 14px; display: grid; place-items: center; overflow: hidden; color: var(--accent-ink); background: linear-gradient(135deg, #8e64d8, #c04a97); border-radius: 22px; font-size: 29px; }
.channel-preview-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.channel-preview-card h1 { margin: 7px 0 8px; font-size: 30px; }
.channel-preview-card > p { margin: 0 auto 16px; color: var(--muted); }
.channel-preview-meta { margin: 0 0 20px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); background: var(--selected); border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 750; }

/* Единый вид выпадающих списков: настройки профиля, приватность, меню беседы
   и служебные формы используют одну спокойную «карточную» поверхность. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  color: var(--ink);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236f88a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border-color: var(--line);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

select:not([multiple]):not([size]):hover:not(:disabled) {
  background-color: var(--focus-surface);
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
}

select:not([multiple]):not([size]):focus-visible {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
  outline: 0;
}

select:not([multiple]):not([size]):disabled {
  cursor: not-allowed;
  opacity: .62;
}

select:not([multiple]):not([size]) option {
  color: var(--ink);
  background: var(--card);
}
@media (max-width: 640px) { .message-header-actions { justify-content: flex-start; } .message-header-actions .button { font-size: 10px; } .conversation-create-card { padding: 20px 16px; } .conversation-type-grid, .conversation-fields-grid, .conversation-members-grid { grid-template-columns: 1fr; } .conversation-create-heading { margin-bottom: 22px; } .conversation-create-actions { justify-content: stretch; } .conversation-create-actions .button { flex: 1; min-width: 0; } .inbox-filter-separator { display: none; } }

html[data-theme="dark"] .message-delivery-status {
  --message-status-idle: #929cab;
}

@media (max-width: 600px) {
  .message-delivery-tooltip {
    right: -4px;
    min-width: 132px;
  }
}

/* =========================================================
   MIRT AJAX DELETE — SOFT BUBBLE v4
   ========================================================= */

.mirt-delete-awaiting {
  opacity: .78;
  filter: saturate(.88);
  pointer-events: none;
  transition: opacity .18s ease, filter .18s ease;
}

.mirt-delete-ghost {
  overflow: hidden;
  pointer-events: none !important;
  user-select: none !important;
  will-change: opacity, transform, filter;
  box-shadow: none !important;
}

.mirt-delete-ghost button,
.mirt-delete-ghost input,
.mirt-delete-ghost textarea,
.mirt-delete-ghost select,
.mirt-delete-ghost a {
  pointer-events: none !important;
}

.mirt-bubble-pop-layer {
  position: fixed;
  z-index: 9998;
  overflow: visible;
  pointer-events: none;
}

.mirt-bubble-pop-ring {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--selected) 34%, transparent);
  will-change: opacity, transform;
}

.mirt-bubble-pop-ring.ring-b {
  inset: -8px;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  filter: blur(.5px);
}

.mirt-bubble-pop-drop {
  position: absolute;
  display: block;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255,255,255,.9) 0 12%,
      color-mix(in srgb, var(--drop-color) 52%, rgba(255,255,255,.58)) 24%,
      color-mix(in srgb, var(--drop-color) 34%, transparent) 58%,
      transparent 72%
    );
  box-shadow:
    0 0 4px color-mix(in srgb, var(--drop-color) 22%, transparent);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .mirt-delete-awaiting {
    transition: none;
  }

  .mirt-delete-ghost,
  .mirt-bubble-pop-layer {
    display: none !important;
  }
}

/* Мягкий блик во время удаления сообщения — эффект тонкой плёнки пузыря. */
.mirt-bubble-pop-layer::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  opacity: .16;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.78), transparent 30%),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 34%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%);
  filter: blur(.7px);
}


.post-publish-state-rejected {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.post-publish-state-rejected i {
  font-size: 12px;
}


/* =========================================================
   VIDEO LIBRARY — POSTER + POLISHED CARD
   ========================================================= */

.video-card-media {
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background:
    radial-gradient(circle at 50% 42%,
      color-mix(in srgb, var(--selected) 26%, transparent),
      transparent 62%),
    #050606;
}

.video-card-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #050606;
  object-fit: cover;
}

.video-card-media video[poster] {
  object-fit: cover;
}

.video-card-body {
  padding: 13px 15px;
}

.video-card {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.video-card:hover {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 9%, transparent);
}

.video-card .media-item-menu summary {
  width: fit-content;
}

/* Для аудио/видео bubble-delete чуть мягче: карточка держит форму,
   потом растворяется и только в конце освобождает место в сетке. */
[data-music-track].mirt-delete-awaiting,
[data-video-card].mirt-delete-awaiting,
.video-card.mirt-delete-awaiting {
  opacity: .9;
  filter: saturate(.94);
}

.mirt-bubble-pop-layer {
  border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .video-card {
    transition: none;
  }
}


/* =========================================================
   CHANNEL PUBLICATIONS
   Channel entries use the same visual language as feed posts.
   ========================================================= */

.channel-chat-card .message-thread {
  gap: 16px;
  align-items: stretch;
}

.channel-chat-card .message-bubble.channel-publication {
  width: min(760px, 100%);
  max-width: 100%;
  padding: 14px;
  align-self: center;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(54, 103, 151, .06);
}

/* Channel photo attachments are compact thumbnails. The complete image is
   never cropped: object-fit: contain keeps the original composition visible. */
.channel-chat-card .channel-publication .channel-photo-grid {
  margin-top: 8px;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb) {
  display: grid;
}

.channel-chat-card .channel-publication .channel-photo-thumb {
  min-width: 0;
  height: 176px;
  padding: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--bg) 88%, var(--card));
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 11px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.channel-chat-card .channel-publication .channel-photo-thumb:hover {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  background: color-mix(in srgb, var(--selected) 58%, var(--card));
  transform: translateY(-1px);
}

.channel-chat-card .channel-publication .channel-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* A single channel photo follows its natural orientation.
   Landscape/square images can use the full post width. Portrait images are
   shown completely inside the same wide media area; only the unused side
   space is filled with a blurred copy of the image. The original is never cropped. */
.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) {
  display: block;
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb {
  width: 100%;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111824;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(10, 22, 38, .10);
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -2;
  background-image: var(--channel-photo-bg, none);
  background-position: center;
  background-size: cover;
  filter: blur(22px) saturate(.92);
  transform: scale(1.10);
  opacity: .76;
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 14, 24, .10);
  pointer-events: none;
}

/* Landscape and near-square photos: fill the available post width naturally. */
.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-landscape,
.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-square {
  height: auto;
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-landscape img,
.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-square img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* Portrait photo: keep the complete image and blur only the empty side areas. */
.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-portrait {
  height: clamp(380px, 58vw, 560px);
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb.is-portrait img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  filter: none;
}

.channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.channel-chat-card .channel-publication .channel-nonphoto-grid {
  margin-top: 8px;
}

.channel-chat-card .channel-publication .channel-nonphoto-grid:not(:has(> *)) {
  display: none;
}

/* Videos keep a compact canvas; image files are handled by channel-photo-grid. */
.channel-chat-card .channel-publication > .message-video,
.channel-chat-card .channel-publication .channel-nonphoto-grid .message-video {
  width: 100%;
  max-height: 360px;
  display: block;
  object-fit: contain;
  background: color-mix(in srgb, var(--bg) 88%, var(--card));
  border-radius: 12px;
}

/* Minimal channel image viewer: photo only, without post comments or sidebar. */
html.channel-photo-viewer-open,
html.channel-photo-viewer-open body {
  overflow: hidden;
}

.channel-photo-viewer[hidden] {
  display: none;
}

.channel-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 20px;
}

.channel-photo-viewer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(8, 13, 22, .91);
  border: 0;
  cursor: zoom-out;
}

.channel-photo-viewer-dialog {
  width: min(1180px, calc(100vw - 40px));
  height: min(860px, calc(100dvh - 40px));
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0d1420;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
}

.channel-photo-viewer-image {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0;
  display: block;
  flex: 0 0 auto;
  object-fit: contain !important;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.channel-photo-viewer-close,
.channel-photo-viewer-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(13, 20, 32, .68);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.channel-photo-viewer-close {
  width: 42px;
  height: 42px;
  top: 14px;
  right: 14px;
  border-radius: 13px;
  font-size: 18px;
}

.channel-photo-viewer-nav {
  width: 46px;
  height: 58px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 14px;
  font-size: 22px;
}

.channel-photo-viewer-prev { left: 14px; }
.channel-photo-viewer-next { right: 14px; }

.channel-photo-viewer-nav[hidden] { display: none; }

.channel-photo-viewer-counter {
  min-width: 54px;
  min-height: 30px;
  padding: 5px 10px;
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .9);
  background: rgba(13, 20, 32, .68);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 750;
}

/* Feed-like action footer: reactions stay directly above this row; comments,
   share, visibility and views use the same compact icon language as posts. */
.channel-post-stats,
.channel-post-toolbar {
  min-height: 38px;
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  font-size: 11px;
}

.channel-comments-toggle,
.channel-action-button,
.channel-toolbar-item {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.channel-comments-toggle:hover,
.channel-action-button:hover,
.channel-toolbar-item:hover {
  color: var(--blue);
  background: var(--selected);
}

.channel-comments-toggle i,
.channel-action-button i,
.channel-toolbar-item i,
.channel-view-count i,
.channel-post-visibility i {
  font-size: 16px;
}

.channel-share-button i { font-size: 19px; }

.channel-post-visibility,
.channel-view-count {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.channel-post-visibility {
  margin-left: auto;
}

.channel-view-count b,
.channel-comments-toggle b { font-weight: 700; }

.channel-comments[hidden] { display: none; }
.channel-comments {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.channel-comment-list { max-height: 300px; margin-bottom: 9px; overflow-y: auto; }
.channel-comment-list article { margin: 5px 0; padding: 8px 10px; color: var(--ink); background: var(--bg); border-radius: 10px; font-size: 10px; }
.channel-comment-list article strong { display: block; font-size: 10px; }
.channel-comment-list article p { margin: 3px 0; }
.channel-comment-list article time { color: var(--muted); font-size: 9px; }
.channel-comment-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.channel-comment-reactions { min-height: 24px; margin-top: 2px; justify-content: flex-end; gap: 4px; }
.channel-comment-reactions .message-reaction-summary { gap: 3px; }
.channel-comment-reactions .message-reaction-chip { min-height: 24px; padding: 3px 6px; border-radius: 8px; }
.channel-comment-reactions .message-reaction-emoji { font-size: 13px; }
.channel-comment-reactions .message-reaction-count { font-size: 9px; }
.channel-comment-reactions .message-reaction-add { width: 24px; height: 24px; min-width: 24px; border-radius: 8px; font-size: 14px; }
.channel-comment-form { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.channel-comment-form input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 13px; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 11px; font: inherit; font-size: 11px; }
.channel-comment-form input:focus { outline: none; border-color: var(--blue); }
.channel-comment-form button { min-width: 42px; min-height: 42px; padding: 0 12px; color: var(--blue-dark); background: var(--accent); border: 0; border-radius: 11px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.channel-comment-subscribe-hint { margin: 7px 0 0 !important; color: var(--muted); font-size: 10px; }
.channel-chat-card .channel-publication .message-meta { margin-top: 5px; }
.channel-chat-card .channel-publication .message-menu-wrap { opacity: 1; }
.channel-inline-subscribe { margin-top: 9px; }
.channel-inline-subscribe .button { width: fit-content; }
.chat-menu-label { padding: 7px 10px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 750; }
.channel-join-request-menu { padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.channel-join-request-menu > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.channel-join-request-menu > span { display: flex; gap: 3px; }
.channel-join-request-menu form { margin: 0; }
.channel-join-request-menu button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }

@media (max-width: 720px) {
  .message-channel-quote, .message-story-quote, .message-video-quote { width: min(76vw, 390px); }
  .channel-chat-card .message-bubble.channel-publication { padding: 11px; border-radius: 14px; }
  .channel-chat-card .channel-publication .channel-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .channel-chat-card .channel-publication .channel-photo-thumb { height: 150px; padding: 5px; }
  .channel-chat-card .channel-publication .channel-photo-grid:has(.channel-photo-thumb:only-child) .channel-photo-thumb { width: 100%; height: min(70dvh, 460px); min-height: 300px; }
  .channel-photo-viewer { padding: 8px; }
  .channel-photo-viewer-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 14px; }
  .channel-photo-viewer-image { max-width: none !important; max-height: none !important; }
  .channel-photo-viewer-close { top: 10px; right: 10px; }
  .channel-photo-viewer-prev { left: 8px; }
  .channel-photo-viewer-next { right: 8px; }
  .channel-post-stats, .channel-post-toolbar { gap: 5px; }
  .channel-post-visibility { margin-left: auto; }
}


/* Channel publication content order and action menu fallback. */
.channel-chat-card .channel-publication .channel-publication-text {
  margin: 10px 0 0;
  line-height: 1.5;
}

/* If viewport positioning JS is unavailable for any reason, the channel menu
   must still open inward (to the left) instead of being clipped by chat-card. */
.channel-chat-card .channel-publication .message-action-menu:not(.is-viewport-positioned) {
  right: 0;
  left: auto;
  width: min(260px, calc(100vw - 24px));
  z-index: 180;
}

/* The management page stays neutral in light themes: controls should read as
   paper cards, not as a large blue selected state. */
html:not([data-theme="dark"]) .conversation-manage-card,
html:not([data-theme="dark"]) .conversation-manage-section,
html:not([data-theme="dark"]) .conversation-manage-member {
  background: #fff;
  border-color: #dce6f1;
  box-shadow: none;
}

html:not([data-theme="dark"]) .conversation-manage-section-heading > span {
  color: var(--blue);
  background: #f2f7fd;
}

html:not([data-theme="dark"]) .conversation-settings-form :is(input:not([type="file"]), textarea, select),
html:not([data-theme="dark"]) .conversation-member-add select,
html:not([data-theme="dark"]) .conversation-manage-member-actions select,
html:not([data-theme="dark"]) .conversation-manage-member-search {
  background-color: #fff;
  border-color: #d8e4f0;
}

html:not([data-theme="dark"]) .conversation-settings-form :is(input, textarea, select):focus,
html:not([data-theme="dark"]) .conversation-member-add select:focus,
html:not([data-theme="dark"]) .conversation-manage-member-actions select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.conversation-settings-form input[type="file"],
.conversation-avatar-field input[type="file"] {
  min-height: 42px;
  padding: 7px 9px;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.conversation-settings-form input[type="file"]::file-selector-button,
.conversation-avatar-field input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 6px 9px;
  color: var(--blue-dark);
  background: var(--selected);
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

/* The composer uses two compact action icons.  The native visibility select
   remains the interactive surface, while its text is intentionally hidden. */
.post-form-actions > .attachment-menu-wrap {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin-right: auto;
}

.post-form-actions .file-button,
.post-form-actions > .post-visibility-control {
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 38px;
  justify-content: center;
}

.post-form-actions .file-button {
  margin-right: 0;
  font-size: 0;
}

.post-form-actions .file-button > i,
.post-form-actions > .post-visibility-control > i {
  margin: 0;
  font-size: 17px;
}

.post-form-actions > .post-visibility-control {
  position: relative;
  gap: 0;
}

.post-form-actions .post-visibility-control select,
.post-form-actions .post-visibility-control .post-visibility-select {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

/* Short channel addresses and the in-app share dialog. */
.conversation-short-code-field > small strong {
  color: var(--blue);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.channel-short-link-card {
  margin: 0 0 15px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.channel-short-link-card > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.channel-short-link-card > span > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--selected);
  border-radius: 9px;
  font-size: 15px;
}

.channel-short-link-card small,
.channel-short-link-card a {
  display: block;
}

.channel-short-link-card small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9px;
}

.channel-short-link-card a {
  overflow: hidden;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-short-link-card button {
  min-height: 32px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--blue);
  background: var(--selected);
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

body.channel-share-open {
  overflow: hidden;
}

.channel-share-modal[hidden],
.channel-share-panel[hidden],
.channel-share-target[hidden] {
  display: none;
}

.channel-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 20px;
  display: grid;
  place-items: center;
}

.channel-share-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: color-mix(in srgb, #020812 72%, transparent);
  border: 0;
  cursor: default;
  backdrop-filter: blur(5px);
}

.channel-share-dialog {
  width: min(100%, 520px);
  max-height: min(760px, calc(100dvh - 40px));
  position: relative;
  overflow: auto;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgb(0 0 0 / .34);
}

.channel-share-header {
  padding: 17px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.channel-share-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.channel-share-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #8e64d8, #c04a97);
  border-radius: 12px;
  font-size: 17px;
}

.channel-share-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.channel-share-header h2 {
  margin: 0 0 3px;
  font-size: 16px;
}

.channel-share-header small {
  max-width: 340px;
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-share-header > button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.channel-share-tabs {
  padding: 0 18px;
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}

.channel-share-tabs button {
  min-height: 44px;
  padding: 0;
  position: relative;
  color: var(--muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.channel-share-tabs button.is-active {
  color: var(--blue);
}

.channel-share-tabs button.is-active::after {
  height: 3px;
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  background: var(--blue);
  border-radius: 999px 999px 0 0;
}

.channel-share-panel {
  padding: 16px 18px 18px;
}

.channel-share-panel form {
  display: grid;
  gap: 8px;
}

.channel-share-choice {
  cursor: pointer;
}

.channel-share-choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.channel-share-choice > span {
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--bg) 54%, var(--card));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.channel-share-choice > input:checked + span {
  background: color-mix(in srgb, var(--selected) 74%, var(--card));
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 72%, transparent);
}

.channel-share-choice > span > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--card);
  border-radius: 10px;
  font-size: 15px;
}

.channel-share-choice strong,
.channel-share-choice small {
  display: block;
}

.channel-share-choice strong {
  margin-bottom: 2px;
  font-size: 11px;
}

.channel-share-choice small {
  color: var(--muted);
  font-size: 9px;
}

.channel-share-target {
  padding: 2px 0 3px 43px;
}

.channel-share-target select {
  width: 100%;
  min-height: 40px;
  font-size: 11px;
}

.channel-share-submit {
  min-width: 132px;
  margin-top: 8px;
  justify-self: end;
}

.channel-share-copy-panel > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.channel-share-copy-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.channel-share-copy-panel input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
}

.channel-share-copy-panel > small {
  min-height: 16px;
  margin-top: 8px;
  display: block;
  color: var(--blue);
  font-size: 10px;
  font-weight: 750;
}


/* Sharing a library video uses the same quiet destination picker as channels,
   but keeps the selected video visible and avoids a separate link-copy step. */
body.video-share-open {
  overflow: hidden;
}

.video-share-modal[hidden],
.video-share-target[hidden] {
  display: none;
}

.video-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 20px;
  display: grid;
  place-items: center;
}

.video-share-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: color-mix(in srgb, #020812 72%, transparent);
  border: 0;
  cursor: default;
  backdrop-filter: blur(5px);
}

.video-share-dialog {
  width: min(100%, 520px);
  max-height: min(760px, calc(100dvh - 40px));
  position: relative;
  overflow: auto;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgb(0 0 0 / .34);
}

.video-share-header {
  padding: 17px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.video-share-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-share-preview {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 80%, #6d4de4), var(--blue));
  border-radius: 12px;
  font-size: 18px;
}

.video-share-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-share-preview img[hidden],
.video-share-preview [hidden] {
  display: none;
}

.video-share-header h2 {
  margin: 0 0 3px;
  font-size: 16px;
}

.video-share-header small {
  max-width: 340px;
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-share-header > button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.video-share-panel {
  padding: 16px 18px 18px;
}

.video-share-intro {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
}

.video-share-panel form {
  display: grid;
  gap: 8px;
}

.video-share-choice {
  cursor: pointer;
}

.video-share-choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-share-choice > span {
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--bg) 54%, var(--card));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.video-share-choice > input:checked + span {
  background: color-mix(in srgb, var(--selected) 74%, var(--card));
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 72%, transparent);
}

.video-share-choice > span > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--card);
  border-radius: 10px;
  font-size: 15px;
}

.video-share-choice strong,
.video-share-choice small {
  display: block;
}

.video-share-choice strong {
  margin-bottom: 2px;
  font-size: 11px;
}

.video-share-choice small {
  color: var(--muted);
  font-size: 9px;
}

.video-share-target {
  padding: 2px 0 3px 43px;
}

.video-share-target > label {
  margin: 0 0 4px;
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.video-share-target select {
  width: 100%;
  min-height: 40px;
  font-size: 11px;
}

.video-share-submit {
  min-width: 132px;
  margin-top: 8px;
  justify-self: end;
}


/* =========================================================
   MIRT VIDEO PLAYER v1
   The browser still decodes media.  This layer owns the experience around it.
   ========================================================= */

.mirt-player {
  --mirt-player-accent: var(--blue);
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #050606;
  border-radius: inherit;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.mirt-player:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 78%, #fff);
  outline-offset: -3px;
}

.mirt-player__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #050606;
}

/* Native controls remain available until JavaScript has fully mounted the
   branded player.  This keeps each uploaded video usable when scripts are
   blocked, delayed, or fail to load. */
.mirt-player:not(.mirt-player--enhanced) > :not(.mirt-player__video) {
  display: none !important;
}

/* Processing cards intentionally have no native <video> yet.  They remain
   visible before JavaScript loads and use the same bounded player frame. */
.mirt-player--processing:not(.mirt-player--enhanced) > .mirt-player__processing {
  display: grid !important;
}

.mirt-player--processing {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--mirt-player-accent) 30%, transparent), transparent 56%),
    linear-gradient(135deg, #07101d, #111a27);
}

.mirt-player__processing {
  width: 100%;
  height: 100%;
  padding: 18px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #fff;
  text-align: center;
}

.mirt-player__processing > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--mirt-player-accent);
  background: color-mix(in srgb, var(--mirt-player-accent) 18%, #07101d);
  border: 1px solid color-mix(in srgb, var(--mirt-player-accent) 56%, #fff);
  border-radius: 50%;
  font-size: 20px;
}

.mirt-player__processing strong { font-size: 13px; }
.mirt-player__processing span { max-width: 310px; color: rgba(255, 255, 255, .72); font-size: 10px; line-height: 1.35; }

.mirt-player .mirt-player__video,
.video-card-media .mirt-player__video,
.mirt-player .mirt-player__video[poster] {
  object-fit: contain;
}

.mirt-player__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(1, 5, 12, .18), transparent 32%),
    linear-gradient(0deg, rgba(1, 5, 12, .8), transparent 38%);
  transition: opacity .22s ease;
}

.mirt-player--controls-hidden .mirt-player__shade {
  opacity: 0;
}

.mirt-player__big-play {
  width: clamp(48px, 12%, 68px);
  height: clamp(48px, 12%, 68px);
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  background: color-mix(in srgb, #0a111d 72%, transparent);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: clamp(23px, 5vw, 31px);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.mirt-player__big-play:hover {
  background: color-mix(in srgb, var(--mirt-player-accent) 72%, #0a111d);
  transform: translate(-50%, -50%) scale(1.06);
}

.mirt-player.is-playing .mirt-player__big-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.88);
}

.mirt-player__resume {
  max-width: calc(100% - 32px);
  min-height: 34px;
  padding: 7px 10px;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #fff;
  background: rgba(7, 17, 30, .76);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.mirt-player__resume[hidden] {
  display: none;
}

.mirt-player__resume:hover {
  background: color-mix(in srgb, var(--mirt-player-accent) 73%, #091220);
}

.mirt-player__loader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  background: rgba(6, 13, 24, .66);
  border: 1px solid rgba(255, 255, 255, .19);
  border-radius: 50%;
  backdrop-filter: blur(9px);
}

.mirt-player__loader[hidden] {
  display: none;
}

.mirt-player__loader span {
  width: 5px;
  height: 5px;
  display: block;
  background: #fff;
  border-radius: 50%;
  animation: mirt-player-loader 1s ease-in-out infinite;
}

.mirt-player__loader span:nth-child(2) { animation-delay: .12s; }
.mirt-player__loader span:nth-child(3) { animation-delay: .24s; }

@keyframes mirt-player-loader {
  50% { opacity: .35; transform: translateY(-4px); }
}

.mirt-player__skip-feedback {
  min-width: 78px;
  min-height: 54px;
  padding: 12px;
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(5, 12, 22, .64);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.8);
}

.mirt-player__skip-feedback.is-forward { right: 13%; }
.mirt-player__skip-feedback.is-backward { left: 13%; }
.mirt-player__skip-feedback.is-visible { animation: mirt-player-skip .7s ease both; }

@keyframes mirt-player-skip {
  14%, 78% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.08); }
}

.mirt-player__status {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.mirt-player__controls {
  padding: 26px 10px 9px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background: linear-gradient(0deg, rgba(1, 5, 12, .9), rgba(1, 5, 12, .68) 48%, transparent);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

.mirt-player--controls-hidden .mirt-player__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.mirt-player__timeline-wrap {
  position: relative;
}

.mirt-player__timeline {
  height: 4px;
  position: relative;
  overflow: visible;
  background: rgba(255, 255, 255, .29);
  border-radius: 999px;
  transition: height .16s ease, transform .16s ease;
}

.mirt-player__timeline:hover,
.mirt-player__timeline:focus-within {
  height: 7px;
  transform: translateY(-1px);
}

.mirt-player__timeline > span {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.mirt-player__buffered {
  width: 0;
  background: rgba(255, 255, 255, .42);
}

.mirt-player__watched {
  width: 100%;
  background: transparent;
}

.mirt-player__watched-segment {
  height: 100%;
  position: absolute;
  top: 0;
  display: block;
  background: color-mix(in srgb, var(--mirt-player-accent) 44%, rgba(255, 255, 255, .35));
  border-radius: inherit;
}

.mirt-player__elapsed {
  width: 0;
  background: var(--mirt-player-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mirt-player-accent) 72%, transparent);
}

.mirt-player__timeline input {
  width: 100%;
  height: 26px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  transform: translateY(-50%);
  background: transparent;
  cursor: pointer;
}

.mirt-player__timeline input::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.mirt-player__timeline input::-moz-range-track {
  height: 100%;
  background: transparent;
}

.mirt-player__timeline input::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: 7px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.mirt-player__timeline input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.mirt-player__preview {
  width: 118px;
  padding: 3px;
  position: absolute;
  bottom: 14px;
  z-index: 8;
  overflow: hidden;
  background: rgba(5, 12, 22, .91);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  pointer-events: none;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
}

.mirt-player__preview[hidden] {
  display: none;
}

.mirt-player__preview canvas {
  width: 112px;
  height: auto;
  display: block;
  background: #10131a;
  border-radius: 5px;
}

.mirt-player__preview span {
  min-height: 17px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mirt-player__toolbar {
  min-width: 0;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.mirt-player__toolbar-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.mirt-player__toolbar-group:first-child {
  flex: 1 1 auto;
}

.mirt-player__toolbar-group--right {
  margin-left: auto;
  flex: 0 0 auto;
}

.mirt-player__button,
.mirt-player__menu > summary {
  width: 29px;
  height: 29px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.mirt-player__button:hover,
.mirt-player__menu > summary:hover,
.mirt-player__button:focus-visible,
.mirt-player__menu > summary:focus-visible {
  background: rgba(255, 255, 255, .16);
  outline: 0;
}

.mirt-player__menu {
  position: relative;
}

.mirt-player__menu > summary {
  list-style: none;
}

.mirt-player__menu > summary::-webkit-details-marker {
  display: none;
}

.mirt-player__menu-mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mirt-player-accent) 88%, #fff), var(--mirt-player-accent));
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 6px;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--mirt-player-accent) 42%, transparent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition: transform .14s ease;
}

.mirt-player__brand-menu:hover .mirt-player__menu-mark,
.mirt-player__brand-menu:focus-visible .mirt-player__menu-mark {
  transform: scale(1.06);
}

.mirt-player__menu-panel {
  width: 180px;
  padding: 8px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  display: grid;
  gap: 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 94%, #0e1724);
  border: 1px solid color-mix(in srgb, var(--line) 76%, rgba(255,255,255,.32));
  border-radius: 11px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px);
}

.mirt-player__menu:not([open]) .mirt-player__menu-panel {
  display: none;
}

.mirt-player__menu-label {
  padding: 1px 4px 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.mirt-player__speed-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.mirt-player__speed-list button {
  min-height: 24px;
  padding: 2px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.mirt-player__speed-list button:hover,
.mirt-player__speed-list button[aria-pressed="true"] {
  color: var(--blue);
  background: var(--selected);
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
}

.mirt-player__menu-action {
  min-height: 26px;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 9px;
  text-align: left;
}

button.mirt-player__menu-action { cursor: pointer; }
button.mirt-player__menu-action:hover { background: var(--selected); }
.mirt-player__menu-action b { color: var(--muted); font-size: 8px; font-weight: 750; }
.mirt-player__menu-action.is-unavailable { opacity: .62; }

.mirt-player__volume {
  width: 66px;
  min-width: 36px;
  flex: 0 1 66px;
  height: 3px;
  margin: 0 3px;
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--mirt-player-accent);
  background: rgba(255, 255, 255, .42);
  border-radius: 999px;
  cursor: pointer;
}

.mirt-player__volume::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
}

.mirt-player__volume::-moz-range-thumb {
  width: 9px;
  height: 9px;
  background: #fff;
  border: 0;
  border-radius: 50%;
}

.mirt-player__time {
  min-width: 13ch;
  flex: 0 0 13ch;
  margin-left: 3px;
  overflow: hidden;
  color: rgba(255, 255, 255, .94);
  font-size: 9px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirt-player--compact .mirt-player__volume,
.mirt-player--compact [data-mirt-pip],
.mirt-player--compact .mirt-player__menu {
  display: none;
}

.mirt-player--compact .mirt-player__controls {
  padding: 21px 6px 5px;
}

.mirt-player--compact .mirt-player__toolbar {
  margin-top: 3px;
}

.mirt-player--compact .mirt-player__time {
  min-width: 13ch;
  flex-basis: 13ch;
  font-size: 8px;
}

.mirt-player--compact .mirt-player__button {
  width: 25px;
  height: 25px;
  font-size: 14px;
}

.mirt-player:fullscreen,
.mirt-player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.mirt-player:fullscreen .mirt-player__video,
.mirt-player:-webkit-full-screen .mirt-player__video {
  object-fit: contain;
}

@container (max-width: 430px) {
  .mirt-player:not(.mirt-player--compact) .mirt-player__volume {
    display: none;
  }
}

@container (max-width: 340px) {
  .mirt-player:not(.mirt-player--compact) [data-mirt-pip] {
    display: none;
  }

  .mirt-player__time {
    min-width: 12ch;
    flex-basis: 12ch;
    font-size: 8px;
  }
}

@media (max-width: 520px) {
  .mirt-player:not(.mirt-player--compact) .mirt-player__volume {
    width: 44px;
  }

  .mirt-player__menu-panel {
    width: 166px;
  }
}

@media (max-width: 380px) {
  .mirt-player:not(.mirt-player--compact) [data-mirt-pip] {
    display: none;
  }

  .mirt-player__time {
    min-width: 57px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirt-player *,
  .mirt-player *::before,
  .mirt-player *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   MIRT MUSIC — управление плейлистами
   ========================================================= */

.music-playlist-library__heading {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.music-playlist-library__title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.music-playlist-library__title h2 {
  margin: 0;
  font-size: 17px;
}

.music-playlist-library__title > span {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--selected);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
}

.music-playlist-create {
  min-width: 0;
  display: grid;
  justify-items: end;
}

.music-playlist-create[open] {
  width: min(100%, 330px);
}

.music-playlist-create > summary {
  list-style: none;
}

.music-playlist-create > summary::-webkit-details-marker {
  display: none;
}

.music-playlist-create__form {
  width: min(100%, 330px);
  margin-top: 8px;
  padding: 10px;
  display: grid;
  gap: 6px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.music-playlist-create:not([open]) > .music-playlist-create__form,
.music-playlist:not([open]) > .music-playlist__body,
.music-playlist__rename:not([open]) > .music-playlist__rename-form,
.music-track-playlist-picker:not([open]) > .music-track-playlist-picker__body {
  display: none;
}

.music-playlist-create__form label,
.music-playlist__rename-form label {
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
}

.music-playlist-create__fields,
.music-playlist__rename-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.music-playlist-create__fields input,
.music-playlist__rename-form input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  font: inherit;
  font-size: 10px;
}

.music-playlist-create__fields input:focus,
.music-playlist__rename-form input:focus,
.music-track-playlist-picker select:focus {
  background: var(--focus-surface);
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.music-playlist-library {
  padding: 16px;
}

.music-playlist-list,
.music-playlist__tracks {
  display: grid;
  gap: 8px;
}

.music-playlist {
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.music-playlist__summary {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.music-playlist__summary::-webkit-details-marker,
.music-playlist__rename > summary::-webkit-details-marker,
.music-track-playlist-picker > summary::-webkit-details-marker {
  display: none;
}

.music-playlist__summary > i:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--selected);
  border-radius: 10px;
  font-size: 17px;
}

.music-playlist__meta {
  min-width: 0;
}

.music-playlist__meta strong,
.music-playlist__meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-playlist__meta strong {
  color: var(--ink);
  font-size: 12px;
}

.music-playlist__meta small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.music-playlist__chevron {
  color: var(--muted);
  font-size: 13px;
  transition: transform .18s ease, color .18s ease;
}

.music-playlist[open] > .music-playlist__summary {
  border-bottom: 1px solid var(--line);
}

.music-playlist[open] .music-playlist__chevron {
  color: var(--blue);
  transform: rotate(180deg);
}

.music-playlist__body {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.music-playlist__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.music-playlist__actions form {
  margin: 0;
}

.music-playlist__rename {
  min-width: 0;
}

.music-playlist__action,
.music-playlist__rename > summary {
  min-height: 32px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--blue);
  background: var(--selected);
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.music-playlist__action:hover,
.music-playlist__rename > summary:hover {
  background: color-mix(in srgb, var(--selected) 82%, var(--blue));
}

.music-playlist__delete {
  color: var(--red);
}

.music-playlist__rename-form {
  width: min(100%, 350px);
  margin-top: 7px;
  padding: 9px;
  display: grid;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.music-playlist__empty,
.music-playlist-library__empty {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.music-playlist__empty {
  padding: 10px;
  background: var(--card);
  border-radius: 10px;
}

.music-playlist__empty i,
.music-playlist-library__empty i {
  margin-right: 4px;
  color: var(--blue);
}

.music-playlist-library__empty {
  min-height: 76px;
  padding: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg);
  border: 1px dashed color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 12px;
}

.video-album-form-fields,
.music-playlist__rename-form > .video-album-form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, .52fr) auto;
  gap: 6px;
}

.video-album-form-fields input:not([type="hidden"]),
.video-album-form-fields select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  font: inherit;
  font-size: 10px;
}

.video-album-form-fields input:not([type="hidden"]):focus,
.video-album-form-fields select:focus {
  background: var(--focus-surface);
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.video-album-visibility {
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--card);
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.4;
}

.video-album-visibility i {
  margin-right: 4px;
  color: var(--blue);
}

.music-playlist-track {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 11px;
  transition: border-color .18s ease, background .18s ease;
}

.music-playlist-track.is-playing {
  background: var(--selected);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
}

.music-playlist-track__copy {
  min-width: 0;
}

.music-playlist-track__copy strong,
.music-playlist-track__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-playlist-track__copy strong {
  color: var(--ink);
  font-size: 11px;
}

.music-playlist-track__copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.music-playlist-track__remove {
  margin: 0;
}

.music-playlist-track__remove button {
  min-height: 30px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.music-playlist-track__remove button:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.music-track-playlist-picker {
  padding: 3px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.music-track-playlist-picker > summary {
  width: 100%;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

.music-track-playlist-picker > summary:hover,
.music-track-playlist-picker[open] > summary {
  background: var(--selected);
}

.music-track-playlist-picker__body {
  padding: 5px;
  background: var(--bg);
  border-radius: 8px;
}

.music-track-playlist-picker__body form {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.music-track-playlist-picker select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  font: inherit;
  font-size: 9px;
}

.music-track-playlist-picker__body p {
  margin: 0;
  padding: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .music-playlist-library__heading,
  .music-playlist-create {
    width: 100%;
  }

  .music-playlist-library__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .music-playlist-create > summary {
    width: 100%;
  }

  .music-playlist-create__form {
    width: 100%;
  }

  .music-playlist-create[open] {
    width: 100%;
  }

  .music-playlist__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .music-playlist__rename,
  .music-playlist__actions > form,
  .music-playlist__action,
  .music-playlist__rename > summary,
  .music-playlist__rename-form {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .music-playlist-create__fields,
  .music-playlist__rename-form > div {
    grid-template-columns: 1fr;
  }

  .music-playlist-create__fields .button,
  .music-playlist__rename-form .button {
    width: 100%;
  }

  .video-album-form-fields,
  .music-playlist__rename-form > .video-album-form-fields {
    grid-template-columns: 1fr;
  }

  .video-album-form-fields .button {
    width: 100%;
  }

  .music-playlist-track__remove button span {
    display: none;
  }
}

/* Управление сообществом использует ту же спокойную поверхность, что и
   управление беседой, но адрес остаётся полным адресом страницы. */
.community-address-card a {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.community-manage-icon {
  color: var(--blue);
  background: var(--selected);
}

@media (max-width: 560px) {
  .community-hero {
    min-height: 0;
    padding: 20px;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .community-hero__copy,
  .community-hero__actions {
    width: 100%;
  }

  .community-hero__actions {
    margin-left: 0;
    justify-content: space-between;
  }
}

.call-verification .button {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.standalone-auth {
    text-align: center;
}
.call-verification .button {
    display: block;
    width: fit-content;
    margin: 10px auto;
}

.chat-voice-button { min-width: 44px; min-height: 44px; justify-content: center; }
.attachment-preview-audio { grid-column: 1 / -1; height: auto; min-height: 94px; padding: 28px 8px 8px; }
.attachment-preview-audio audio { width: 100%; max-width: 100%; }

/* Voice messages share one persistent transport across conversations. */
.voice-message { width: min(250px, 60vw); max-width: 100%; margin: 5px 0; color: inherit; grid-column: 1 / -1; }
.voice-message audio[hidden] { display: none; }
.voice-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voice-play { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); cursor: pointer; font-size: 24px; transition: transform .18s, box-shadow .18s; }
.voice-play:hover { transform: scale(1.06); }
.message-bubble.mine .voice-play { background: #fff; color: var(--accent-ink); }
.voice-controls .voice-play { width: 48px; height: 48px; flex-basis: 48px; font-size: 28px; }
.voice-track { flex: 1; min-width: 0; }
.voice-wave { height: 30px; position: relative; }
.voice-wave-bars { display: flex; align-items: center; justify-content: space-between; gap: 1px; height: 100%; color: inherit; }
.voice-wave-bars span { flex: 1; min-width: 1px; border-radius: 3px; background: color-mix(in srgb, currentColor 30%, transparent); }
.voice-wave-bars span.is-heard { background: currentColor; }
.voice-wave { border-radius: 4px; }
.voice-wave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.voice-wave:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.voice-caption { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
.voice-caption-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.voice-speed { min-width: 38px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.voice-speed:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.is-playing .voice-play { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 9%, transparent); }
.voice-dock { position: fixed; right: max(12px, calc((100vw - 1180px) / 2)); bottom: calc(38px + env(safe-area-inset-bottom, 0px)); z-index: 129; width: min(290px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 72px; border: 1px solid var(--line); border-radius: 16px; background: var(--card, #fff); color: var(--text, #172d27); box-shadow: 0 12px 45px #102b2426; }
.voice-dock[hidden] { display: none; }
.voice-dock-info { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.voice-dock-info strong, .voice-dock-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-dock-info strong { font-size: 13px; }
.voice-dock-info small { color: var(--muted); font-size: 10px; margin-top: 4px; }
.voice-close { flex: 0 0 32px; min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.voice-dock-progress { position: absolute; bottom: 0; left: 20px; right: 20px; height: 3px; overflow: hidden; background: var(--line); }
.voice-dock-progress span { display: block; height: 100%; background: var(--accent); }
.voice-playback-error { position: absolute; bottom: 100%; left: 0; right: 0; padding: 10px; background: var(--card, #fff); color: var(--red); border-radius: 12px; font-size: 12px; }
.voice-recorder-panel { border-radius: 18px; padding: 12px; }
.chat-voice-button { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
@media (max-width: 520px) {
  .voice-message { width: min(250px, 60vw); }
  .voice-controls { gap: 7px; }
  .voice-caption { font-size: 11px; }
  .voice-dock { gap: 8px; padding: 10px 10px 13px; }
}
@media (prefers-reduced-motion: reduce) { .voice-play { transition: none; } }

body.voice-player-visible .music-player { display: none; }
body.voice-player-visible .live-notification-region { bottom: 132px; }
@media (max-width: 600px) {
  .voice-dock { width: calc(100vw - 16px); right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.voice-player-visible .live-notification-region { bottom: auto; }
}

/* One bottom action row shared by desktop and mobile message composers. */
.chat-form[data-message-form] { display: flex; flex-direction: column; align-items: stretch; }
.chat-form[data-message-form] .chat-compose { width: 100%; }
.chat-form[data-message-form] .chat-tools { margin-top: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px 36px 96px; align-items: center; gap: 6px; }
.chat-form[data-message-form] .chat-tools > .attachment-menu-wrap { flex: 0 1 96px; min-width: 0; }
.chat-form[data-message-form] .chat-send-actions { display: contents; }
.chat-form[data-message-form] .chat-send-actions .chat-voice-button { grid-column: 3; }
.chat-form[data-message-form] .chat-send-actions .chat-video-button { grid-column: 4; }
.chat-form[data-message-form] .chat-send-actions .chat-submit { grid-column: 5; }
.chat-form[data-message-form] .chat-tools .attachment-trigger,
.chat-form[data-message-form] .chat-tools .chat-voice-button,
.chat-form[data-message-form] .chat-tools .chat-video-button,
.chat-form[data-message-form] .chat-tools .chat-submit { width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 96px; }
.chat-form[data-message-form] .chat-tools .attachment-trigger { width: 100%; }
.chat-form[data-message-form] .chat-tools .attachment-trigger i,
.chat-form[data-message-form] .chat-tools .chat-voice-button i,
.chat-form[data-message-form] .chat-tools .chat-video-button i { font-size: 18px; }
.chat-composer-status { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-composer-status input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.video-recorder-preview { flex: 0 0 240px; max-width: 100%; display: block; width: 240px; height: 240px; aspect-ratio: 1; border-radius: 50%; background: #15201c; object-fit: cover; }
.attachment-preview-video-note { grid-column: 1 / -1; height: auto; padding-top: 30px; }
.attachment-preview-video-note video { width: min(240px, 100%); aspect-ratio: 1; flex: none; border-radius: 50%; object-fit: cover; }

/* Community membership and publishing identity. */
.community-hero__actions > form .button { height:36px; min-height:36px; white-space:nowrap; padding:0 14px; }
.community-hero__actions .chat-menu-button { width:36px; height:36px; min-height:36px; }
.community-publish-picker { position:relative; }
.community-publish-picker > summary { list-style:none; cursor:pointer; }
.community-publish-picker > summary::-webkit-details-marker { display:none; }
.community-publish-options { position:absolute; bottom:calc(100% + 8px); right:0; z-index:30; width:min(280px,calc(100vw - 64px)); padding:14px; display:grid; gap:12px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.community-publish-options label { display:flex; gap:9px; align-items:center; overflow-wrap:anywhere; }
.community-publish-options input { accent-color:var(--blue); }

/* Mobile photo viewer: full-height image and an optional comments sheet. */
.photo-viewer-mobile-close,
.photo-viewer-comments-toggle,
.photo-viewer-sheet-close { display: none; }

@media (max-width: 800px) {
  .photo-viewer { padding: 0; }
  .photo-viewer .photo-viewer-dialog {
    width: 100%; height: 100dvh; margin: 0;
    display: block; border: 0; border-radius: 0;
  }
  .photo-viewer .photo-viewer-stage { width: 100%; height: 100%; }
  .photo-viewer-mobile-close, .photo-viewer-comments-toggle {
    position: absolute; z-index: 7; display: flex; align-items: center;
    justify-content: center; gap: 8px; min-height: 44px;
    color: #fff; background: rgba(8,16,28,.8);
    border: 1px solid rgba(255,255,255,.25); border-radius: 24px;
    font: inherit; cursor: pointer;
  }
  .photo-viewer-mobile-close {
    top: calc(12px + env(safe-area-inset-top)); right: 12px;
    width: 44px; font-size: 22px;
  }
  .photo-viewer-comments-toggle {
    bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); padding: 10px 16px;
  }
  .photo-viewer .photo-viewer-counter { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .photo-viewer .photo-viewer-views { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .photo-viewer .photo-viewer-sidebar {
    display: none; position: absolute; inset: auto 0 0; z-index: 8;
    height: 52dvh; max-height: 52dvh; border: 0; border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    box-shadow: 0 -12px 40px rgba(0,0,0,.3); overflow: hidden;
  }
  .photo-viewer.comments-open .photo-viewer-sidebar { display: flex; }
  .photo-viewer-sheet-close {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 44px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line);
    background: var(--card); color: var(--ink); font: inherit; font-weight: 700;
  }
  .photo-viewer .photo-viewer-author { padding: 8px 12px; flex-shrink: 0; }
  .photo-viewer .photo-viewer-author-avatar { width: 30px; height: 30px; }
  .photo-viewer .photo-viewer-sidebar-close { display: none; }
  .photo-viewer .photo-viewer-actions { padding: 4px 10px; flex-shrink: 0; }
  .photo-viewer .photo-viewer-description { max-height: 48px; overflow-y: auto; flex-shrink: 0; }
  .photo-viewer .photo-viewer-comments { padding: 12px; overscroll-behavior: contain; }
  .photo-viewer .photo-viewer-comment-form { padding: 8px; flex-shrink: 0; }
  .photo-viewer [data-photo-viewer-comment-input] { font-size: 16px; }
}

/* Other members: keep actions in their own row beneath the avatar. */
.profile-cover-card.profile-cover-card--visitor { grid-template-areas: "copy avatar" "controls controls"; }
.profile-cover-card--visitor .profile-hero-copy { align-self: center; }
.profile-cover-card.profile-cover-card--visitor .profile-cover-controls {
  position: relative !important;
  grid-area: controls;
  justify-self: end;
  align-self: end;
  right: auto;
  bottom: auto;
  max-width: 100%;
}
.profile-cover-card.profile-cover-card--visitor .profile-cover-controls .profile-actions {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Small counts accompany friends headings and navigation. */
.friends-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 2px 6px; border-radius: 7px; background: var(--bg); color: var(--muted); font-size: .78em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.friends-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.friends-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 600; }
.friends-tabs a.is-active { background: var(--card); color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.friends-tabs a:hover { color: var(--blue); }

[data-sidebar-tab="friends"] .friends-count,
[data-sidebar-tab="my-groups"] .friends-count,
[data-sidebar-tab="my-channels"] .friends-count {
  display: inline;
  margin-left: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: 500;
}