/* Mr.AdVest Social — modern CSS: cascade layers, nesting, light-dark(), oklch(), container queries, :has(), view transitions. */
@layer reset, tokens, base, layout, components, editions, utilities, vk;

@view-transition { navigation: auto; }
/* Navigation chrome stays put and only the content cross-fades quickly: no page-wide flash, no jumping sidebar. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
.topbar { view-transition-name: topbar; }
.side-wrap { view-transition-name: sidebar; }
::view-transition-group(topbar), ::view-transition-group(sidebar) { animation-duration: 0s; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scrollbar-gutter: stable; background: var(--bg); }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul { padding: 0; list-style: none; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --accent: light-dark(oklch(55% 0.19 255), oklch(72% 0.15 250));
    --on-accent: light-dark(#fff, oklch(20% 0.04 255));
    --bg: light-dark(oklch(97.5% 0.005 255), oklch(19% 0.015 260));
    --surface: light-dark(#fff, oklch(24% 0.02 260));
    --surface-2: light-dark(oklch(95% 0.008 255), oklch(28% 0.022 260));
    --text: light-dark(oklch(24% 0.02 260), oklch(93% 0.01 255));
    --muted: light-dark(oklch(50% 0.02 260), oklch(70% 0.02 260));
    --line: light-dark(oklch(90% 0.01 255), oklch(33% 0.025 260));
    --danger: light-dark(oklch(55% 0.21 25), oklch(70% 0.17 25));
    --ok: light-dark(oklch(52% 0.14 150), oklch(74% 0.15 150));
    --warn: oklch(80% 0.15 85);
    --radius: 14px;
    --shadow: 0 1px 2px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .4)), 0 6px 20px -10px light-dark(rgb(30 40 80 / .18), rgb(0 0 0 / .6));
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --gap: clamp(.75rem, 1.5vw, 1.25rem);
  }
}

@layer editions {
  /* The SWGOH edition gets a space-opera palette on top of the same engine. */
  :root[data-edition="swgoh"] {
    --accent: light-dark(oklch(52% 0.17 265), oklch(84% 0.16 95));
    --on-accent: light-dark(#fff, oklch(22% 0.05 90));
    --bg: light-dark(oklch(96% 0.01 265), oklch(16% 0.03 270));
    --surface: light-dark(#fff, oklch(21% 0.035 270));
    --surface-2: light-dark(oklch(94% 0.015 265), oklch(26% 0.04 270));
    --line: light-dark(oklch(88% 0.02 265), oklch(32% 0.045 270));
    body { background-image: radial-gradient(1200px 500px at 85% -10%, light-dark(oklch(92% 0.05 265 / .6), oklch(30% 0.09 275 / .55)), transparent); background-attachment: fixed; }
  }
  .tag-gl { background: color-mix(in oklch, var(--warn) 30%, transparent); color: light-dark(oklch(40% 0.1 80), var(--warn)); }
  td.relic { color: var(--accent); font-weight: 700; }
}

@layer base {
  body { font: 1rem/1.55 var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
  h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; text-wrap: balance; }
  h2 { font-size: 1.15rem; margin-block-end: .6rem; }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-underline-offset: 3px; &:hover { text-decoration-thickness: 2px; } }
  :focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
  ::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); }
  time { white-space: nowrap; }
  small { color: var(--muted); }
  :root { accent-color: var(--accent); }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } @view-transition { navigation: none; } }
}

@layer layout {
  .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--gap); padding: .6rem var(--gap);
    background: color-mix(in oklch, var(--surface) 85%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
  .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; font-size: 1.15rem; text-decoration: none; color: var(--text); }
  .search { flex: 1; max-inline-size: 28rem; margin-inline: auto; }
  .search input { inline-size: 100%; padding: .5rem .9rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); }
  .top-actions { display: flex; gap: .4rem; align-items: center; }
  .shell { inline-size: min(100% - 2 * var(--gap), 78rem); margin: var(--gap) auto; display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--gap); align-items: start;
    &:not(:has(.side)) { grid-template-columns: minmax(0, 1fr); }
  }
  .side { position: sticky; top: 4.2rem; display: grid; gap: .15rem; }
  .side-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .8rem; border-radius: 10px; text-decoration: none; color: var(--text);
    &:hover { background: var(--surface-2); }
    &[aria-current="page"] { background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); font-weight: 650; }
    .badge { margin-inline-start: auto; }
  }
  .main { display: grid; gap: var(--gap); min-inline-size: 0; align-content: start; }
  .footer { text-align: center; padding: 1.5rem; }
  .grid2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

  @media (max-width: 760px) {
    .shell { grid-template-columns: 1fr; }
    .side { position: static; display: flex; overflow-x: auto; gap: .25rem; padding-block-end: .25rem; scrollbar-width: thin; }
    .side-link { flex: none; padding: .5rem .7rem; span:not(.badge) { font-size: .9rem; } }
    .search { display: none; }
    .topbar { justify-content: space-between; }
  }
}

@layer components {
  .skip { position: absolute; inset-inline-start: -999px; &:focus { inset-inline-start: .5rem; top: .5rem; z-index: 20; background: var(--surface); padding: .5rem 1rem; border-radius: 8px; } }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icon { flex: none; }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(.9rem, 2vw, 1.25rem); box-shadow: var(--shadow); container-type: inline-size; }
  .card.center, .center { text-align: center; }
  .card > * + * { margin-block-start: .75rem; }
  .hero { text-align: center; padding-block: clamp(2rem, 8vw, 5rem); .lead { font-size: 1.15rem; color: var(--muted); } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .95rem; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--text); text-decoration: none; font-weight: 550; line-height: 1.2; transition: background .15s, transform .08s;
    &:hover { background: var(--surface-2); }
    &:active { transform: translateY(1px); }
    &.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); &:hover { background: color-mix(in oklch, var(--accent) 88%, black); } }
    &.ghost { border-color: transparent; background: transparent; &:hover { background: var(--surface-2); } }
    &.danger { color: var(--danger); }
    &.danger:not(.ghost):hover { background: color-mix(in oklch, var(--danger) 12%, transparent); }
    &.is-liked { color: var(--accent); svg { fill: currentColor; } }
  }

  .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; &.end { justify-content: flex-end; } &.between { justify-content: space-between; } }
  .stack { display: grid; gap: .8rem; }
  .grow { flex: 1; min-inline-size: 0; }
  .muted { color: var(--muted); }
  .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .field { display: grid; gap: .3rem; font-weight: 550; small { font-weight: 400; } }
  input:not([type=checkbox], [type=hidden], [type=file]), textarea, select { inline-size: 100%; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
    &:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }
    &:user-invalid { border-color: var(--danger); } }
  textarea { resize: vertical; min-block-size: 3.5rem; field-sizing: content; max-block-size: 30rem; }
  .check { display: inline-flex; align-items: center; gap: .4rem; }
  .row > input:not([type=checkbox]) { inline-size: auto; flex: 1 1 10rem; }
  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .75rem; input, select { inline-size: auto; flex: 1 1 8rem; } }

  .auth { inline-size: min(100%, 26rem); margin-inline: auto; }
  .flash { padding: .7rem 1rem; border-radius: 10px; border: 1px solid; }
  .flash-ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 12%, transparent); border-color: color-mix(in oklch, var(--ok) 40%, transparent); }
  .flash-err { color: var(--danger); background: color-mix(in oklch, var(--danger) 10%, transparent); border-color: color-mix(in oklch, var(--danger) 40%, transparent); }

  .avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
  .avatar-ph { display: inline-grid; place-items: center; font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 50%, oklch(60% 0.2 320))); }
  .avatar-32 { inline-size: 32px; block-size: 32px; font-size: .85rem; } .avatar-40 { inline-size: 40px; block-size: 40px; }
  .avatar-44 { inline-size: 44px; block-size: 44px; } .avatar-72 { inline-size: 72px; block-size: 72px; font-size: 1.8rem; } .avatar-96 { inline-size: 96px; block-size: 96px; font-size: 2.4rem; }

  .profile { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; > * + * { margin-block-start: 0; } .bio { white-space: pre-wrap; } }
  .tag { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; vertical-align: middle; background: var(--surface-2); color: var(--muted); }
  .tag-danger { background: color-mix(in oklch, var(--danger) 18%, transparent); color: var(--danger); }
  .badge { display: inline-grid; place-items: center; min-inline-size: 1.35rem; padding: 0 .35rem; block-size: 1.35rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-style: normal; }
  .user-link { font-weight: 650; color: var(--text); text-decoration: none; &:hover { color: var(--accent); } }

  .post-head { display: flex; gap: .75rem; align-items: center; }
  .post-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .post-foot { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-inline-start: -.4rem; }
  .post .muted { text-decoration: none; font-size: .88rem; }
  .composer textarea { background: var(--surface-2); }
  .pager { text-align: center; }

  .list { display: grid; > li + li { border-block-start: 1px solid var(--line); } }
  .user-row { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; flex-wrap: wrap; &.unread { font-weight: 600; } }
  .comments { display: grid; gap: .75rem; }
  .comment { display: flex; gap: .6rem; align-items: flex-start; }

  .bubbles { display: grid; gap: .4rem; max-block-size: 60dvh; overflow-y: auto; padding: .25rem; }
  .bubble { max-inline-size: min(34rem, 85%); padding: .5rem .8rem; border-radius: 16px 16px 16px 4px; background: var(--surface-2); justify-self: start;
    p { white-space: pre-wrap; overflow-wrap: anywhere; }
    &.mine { justify-self: end; border-radius: 16px 16px 4px 16px; background: color-mix(in oklch, var(--accent) 18%, var(--surface)); } }

  .stats { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .stat { display: grid; gap: .1rem; padding: .8rem 1rem; b { font-size: 1.4rem; font-variant-numeric: tabular-nums; } }
  .gp { text-align: end; b { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; } .spark { color: var(--accent); margin-inline-start: auto; } }
  details.import { summary { cursor: pointer; font-weight: 600; } }

  .table-wrap { overflow-x: auto; }
  table.units { inline-size: 100%; border-collapse: collapse; font-size: .93rem;
    th, td { padding: .45rem .6rem; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
    thead th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; background: var(--surface); }
    tbody th { font-weight: 600; }
    tbody tr:hover { background: var(--surface-2); }
    td.num { text-align: end; font-variant-numeric: tabular-nums; }
    td.win { color: var(--ok); font-weight: 700; } }

  .danger-zone { border-color: color-mix(in oklch, var(--danger) 45%, var(--line)); }
  @container (max-width: 28rem) { .profile { flex-direction: column; } }
}

@layer components {
  .tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-block-end: 1px solid var(--line); margin-block: .25rem;
    a { padding: .55rem .9rem; text-decoration: none; color: var(--muted); border-block-end: 2px solid transparent; margin-block-end: -1px;
      &:hover { color: var(--text); }
      &[aria-current="page"] { color: var(--accent); border-color: var(--accent); font-weight: 650; } } }

  .gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .tile { display: grid; gap: .25rem; text-decoration: none; color: var(--text); border-radius: var(--radius); overflow: hidden;
    img, .tile-empty { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }
    .tile-empty { display: grid; place-items: center; font-size: 2.5rem; color: var(--muted); }
    .tile-title { font-weight: 600; padding-inline: .25rem; } small { padding-inline: .25rem; } &:hover img { filter: brightness(1.08); } }
  .photo-view { padding: .5rem; img { inline-size: 100%; max-block-size: 80dvh; object-fit: contain; border-radius: 10px; margin-inline: auto; } figcaption { text-align: center; margin-block-start: .5rem; } }
  .player { inline-size: 100%; max-block-size: 75dvh; border-radius: 10px; background: #000; }
  .tracks { display: grid; gap: .75rem; } .track { display: flex; gap: .75rem; align-items: center; audio { display: block; inline-size: 100%; margin-block-start: .35rem; } }

  .gift-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); border: 0; padding: 0; margin: 0; }
  .gift { position: relative; display: grid; justify-items: center; gap: .1rem; padding: .6rem .4rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center;
    input { position: absolute; opacity: 0; } &:has(input:checked) { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); }
    &:has(input:focus-visible) { outline: 3px solid color-mix(in oklch, var(--accent) 70%, transparent); } }
  .gift-emoji { font-size: 2rem; line-height: 1.2; &.big { font-size: 2.6rem; } }
  .gifts-received { display: grid; gap: .6rem; } .gift-card { display: flex; gap: 1rem; align-items: center; }
  .coins { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; } .pos { color: var(--ok); } .neg { color: var(--danger); }

  .qr { border-radius: 10px; border: 1px solid var(--line); flex: none; max-inline-size: 100%; block-size: auto; }
  .secret { font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; }
  code { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; background: var(--surface-2); padding: .1rem .4rem; border-radius: 6px; }
  .codes { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); li { text-align: center; code { font-size: 1.05rem; } } }
  .steps { padding-inline-start: 1.25rem; display: grid; gap: .25rem; list-style: decimal; }

  #toasts { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; display: grid; gap: .5rem; z-index: 30; max-inline-size: min(22rem, 90vw); }
  .toast { padding: .7rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; animation: toast-in .25s ease-out; }
  @keyframes toast-in { from { opacity: 0; translate: 0 .5rem; } }
}

@layer components {
  .banner { padding: .7rem 1rem; border-radius: 10px; border: 1px solid; margin: 0;
    &.banner-info { background: color-mix(in oklch, var(--accent) 12%, transparent); border-color: color-mix(in oklch, var(--accent) 40%, transparent); }
    &.banner-warn { background: color-mix(in oklch, var(--warn) 22%, transparent); border-color: color-mix(in oklch, var(--warn) 60%, transparent); }
    &.banner-danger { background: color-mix(in oklch, var(--danger) 14%, transparent); border-color: color-mix(in oklch, var(--danger) 50%, transparent); color: var(--danger); } }
  .repost { margin: .25rem 0; padding: .6rem .9rem; border-inline-start: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; }
  .btn.is-marked { color: var(--accent); svg { fill: currentColor; } }
  .tag-open { background: color-mix(in oklch, var(--warn) 30%, transparent); color: var(--text); }
  .tag-answered, .tag-resolved { background: color-mix(in oklch, var(--ok) 20%, transparent); color: var(--ok); }
  .tag-closed, .tag-dismissed { background: var(--surface-2); color: var(--muted); }

  .notes { display: grid; gap: .75rem; h2 { font-size: 1.1rem; margin: 0; } }
  .note-body { margin-block: .75rem; line-height: 1.65; }
  .ticket { display: grid; gap: .6rem; } .staff-msg { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }

  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; a { white-space: nowrap; } }
  .stat-link { text-decoration: none; color: var(--text); &:hover { border-color: var(--accent); } }
  .chart { display: grid; gap: .4rem; color: var(--accent); figcaption { color: var(--text); font-weight: 650; } .bars { inline-size: 100%; block-size: auto; } }
  .setting { display: grid; gap: .25rem; padding-block: .5rem; border-block-end: 1px solid var(--line); &:last-of-type { border: 0; } .overridden { color: var(--accent); } .btn { justify-self: start; } }
  td.wrap { white-space: normal; max-inline-size: 28rem; overflow-wrap: anywhere; }
  .filters .btn { flex: none; }
}

@layer components {
  .side-wrap { position: sticky; top: 4.2rem; display: grid; gap: 1rem; align-self: start; }
  .side { position: static; }
  @media (max-width: 760px) { .side-wrap { position: static; } }

  .ad { display: grid; gap: .4rem; padding: .75rem; background: color-mix(in oklch, var(--warn) 6%, var(--surface)); border-color: color-mix(in oklch, var(--warn) 35%, var(--line));
    .ad-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
    .ad-label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
    .ad-why { font-size: .8rem; color: var(--muted); summary { cursor: pointer; } p { margin-block: .3rem; } }
    .ad-body { display: grid; gap: .5rem; text-decoration: none; color: var(--text); img { inline-size: 100%; max-block-size: 11rem; object-fit: cover; border-radius: 10px; } p { color: var(--muted); font-size: .92rem; } }
    .ad-report { font-size: .78rem; text-decoration: none; display: inline-flex; gap: .25rem; align-items: center; } }
  .side-wrap .ad .ad-body img { max-block-size: 8rem; }

  .app-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .app-tile { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: var(--text); &:hover { border-color: var(--accent); } > div { min-inline-size: 0; } }
  .app-icon { inline-size: 64px; block-size: 64px; border-radius: 16px; object-fit: cover; flex: none; background: var(--surface-2); }
  .app-icon-ph { display: inline-grid; place-items: center; font-size: 1.6rem; font-weight: 750; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 50%, oklch(60% 0.2 320))); }
  .game-frame { padding: 0; overflow: hidden; iframe { display: block; inline-size: 100%; block-size: min(75dvh, 720px); border: 0; background: #000; } }
  dialog.confirm { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; max-inline-size: min(28rem, 92vw); &::backdrop { background: rgb(0 0 0 / .55); } }
  code.secret { user-select: all; }
}

@layer components {
  .status { color: var(--muted); font-style: italic; } .status-form input { flex: 1 1 14rem; }
  .facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; } }
  .rating-line { margin: 0; }
  .captcha { .captcha-img { border-radius: 8px; border: 1px solid var(--line); max-inline-size: 100%; block-size: auto; } input { max-inline-size: 8rem; } }
  .attach summary { cursor: pointer; color: var(--muted); } .attachments { display: grid; gap: .5rem; margin-block: .5rem; }
  .attach-photos { display: grid; gap: .35rem; grid-template-columns: repeat(2, 1fr); img { inline-size: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; } &.n1 { grid-template-columns: 1fr; img { aspect-ratio: auto; max-block-size: 28rem; } } &.n3, &.n4 { grid-template-columns: repeat(3, 1fr); } }
  .attach-doc { display: flex; gap: .5rem; align-items: center; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
  .attach-audio audio { display: block; inline-size: 100%; margin-block-start: .25rem; }
  .footer-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-block-start: .4rem; }
  .page-body { inline-size: min(100%, 48rem); margin-inline: auto; overflow-wrap: anywhere; }
}

@layer utilities { [hidden] { display: none !important; } }

/* stories & calls */
.story { padding: 1rem; border-radius: 16px; &.story-b1 { background: linear-gradient(135deg, #5b6cff, #8a4dff); } &.story-b2 { background: linear-gradient(135deg, #ff6a5b, #ff9e4d); } &.story-b3 { background: linear-gradient(135deg, #1fb67a, #2f8fd1); } &.story-b4 { background: linear-gradient(135deg, #2b2f3a, #4a5062); } &.story-b5 { background: linear-gradient(135deg, #d94fa6, #7a4dff); } &.story-b6 { background: linear-gradient(135deg, #e8b92f, #e86f2f); } color: #fff; .muted { color: rgb(255 255 255 / .8); } }
.story-media { inline-size: 100%; max-block-size: 70vh; object-fit: contain; border-radius: 12px; background: #000; }
.story-text.big { font-size: 1.6rem; font-weight: 700; text-align: center; padding: 2rem 1rem; overflow-wrap: anywhere; }
.call-stage { position: relative; aspect-ratio: 16/9; background: #111; border-radius: 14px; overflow: hidden; }
.call-remote { inline-size: 100%; block-size: 100%; object-fit: cover; }
.call-local { position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem; inline-size: 26%; border-radius: 10px; border: 2px solid #fff; background: #000; }
.call-audio-only { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; }
[aria-pressed="true"] { opacity: .6; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.win { font-weight: 700; color: light-dark(oklch(45% 0.14 150), oklch(78% 0.15 150)); }
.badge-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); .card { text-align: center; } .ico { font-size: 2rem; } }
.dim { opacity: .45; }

/* ================= VK-style skin: between the classic and the current VKontakte look ================= */
@layer vk {
  :root:not([data-edition="swgoh"]) {
    --accent: light-dark(#3f78b5, #6aa3e0);
    --on-accent: #fff;
    --bg: light-dark(#edeef0, #151516);
    --surface: light-dark(#fff, #212122);
    --surface-2: light-dark(#f2f3f5, #2a2a2c);
    --line: light-dark(#e3e4e8, #333335);
    --text: light-dark(#222, #e1e3e6);
    --muted: light-dark(#818c99, #8d9096);
    --top: light-dark(#4a76a8, #232324);
  }
  :root[data-edition="swgoh"] { --top: light-dark(#35407a, #14182e); }
  :root { --radius: 10px; --shadow: none; --gap: clamp(.6rem, 1.2vw, 1rem); }
  body, :root[data-edition="swgoh"] body { font-size: .95rem; line-height: 1.45; }
  :root:not([data-edition="swgoh"]) body { background-image: none; }

  /* top bar: solid blue, compact, like VK */
  .topbar { background: var(--top); backdrop-filter: none; border: 0; padding: .35rem var(--gap); min-block-size: 3rem; color: #fff;
    .brand, .btn.ghost { color: #fff; } .btn.ghost:hover { background: rgb(255 255 255 / .14); }
    .btn.primary { background: rgb(255 255 255 / .18); color: #fff; &:hover { background: rgb(255 255 255 / .28); } }
    .search input { background: rgb(255 255 255 / .16); border-color: transparent; color: #fff; border-radius: 8px; padding: .4rem .9rem;
      &::placeholder { color: rgb(255 255 255 / .7); } &:focus { background: #fff; color: #222; outline: none; } }
    svg { color: #fff; } }

  /* left menu: plain list, no panel, icon + label, grey hover, bold blue current item */
  .shell { inline-size: min(100% - 2 * var(--gap), 62rem); grid-template-columns: 11.5rem minmax(0, 1fr); }
  .side-link { padding: .4rem .6rem; border-radius: 8px; font-size: .95rem; color: var(--text);
    svg { color: var(--accent); inline-size: 1.15rem; block-size: 1.15rem; }
    &:hover { background: color-mix(in oklch, var(--text) 7%, transparent); }
    &[aria-current="page"] { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; } }

  /* blocks: white cards with a hairline, VK-sized radius */
  .card { border-radius: var(--radius); border-color: var(--line); padding: .9rem 1rem; box-shadow: none; }
  .card > h1:first-child, .card > h2:first-child, section.card > h2:first-child { font-size: .95rem; font-weight: 700; margin-block-end: .5rem; }
  h1 { font-size: 1.35rem; }
  .main > h1 { font-size: 1.1rem; font-weight: 700; padding-inline: .25rem; }

  /* buttons: light blue secondary, solid blue primary, 8px radius */
  .btn { border-radius: 8px; border-color: transparent; background: color-mix(in oklch, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 600; padding: .45rem .9rem;
    &:hover { background: color-mix(in oklch, var(--accent) 20%, var(--surface)); }
    &.primary { background: var(--accent); color: #fff; &:hover { background: color-mix(in oklch, var(--accent) 86%, black); } }
    &.ghost { background: transparent; color: var(--muted); &:hover { background: color-mix(in oklch, var(--text) 7%, transparent); color: var(--text); } }
    &.danger { color: var(--danger); background: color-mix(in oklch, var(--danger) 10%, var(--surface)); &.ghost { background: transparent; } } }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { border-radius: 8px; border-color: var(--line); background: var(--surface-2); }
  input:focus, textarea:focus, select:focus { background: var(--surface); }

  /* profile header: big avatar left, name + status, light separators */
  .profile { gap: 1rem; padding: 1rem 1.1rem; h1 { font-size: 1.25rem; } .status { color: var(--text); } }
  .facts { font-size: .92rem; dt { color: var(--muted); } }
  .stats .stat { text-align: center; b { color: var(--accent); } }

  /* tabs: VK section tabs, underline on the active one */
  .tabs { gap: 0; border-color: var(--line); a { padding: .55rem .9rem; border-radius: 0; color: var(--muted); font-weight: 600; border-block-end: 2px solid transparent; text-decoration: none;
    &[aria-current="page"], &.is-active { color: var(--text); border-block-end-color: var(--accent); background: none; } &:hover { color: var(--text); } } }

  /* posts/lists */
  .post-head a.user-link, .user-link { color: var(--accent); font-weight: 600; text-decoration: none; &:hover { text-decoration: underline; } }
  .post .muted, .post time { color: var(--muted); font-size: .82rem; }
  .post-foot .btn { background: transparent; color: var(--muted); padding: .3rem .55rem; &:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); color: var(--accent); } &.is-liked { color: #e64646; } }
  .user-row { padding-block: .5rem; border-block-end: 1px solid color-mix(in oklch, var(--line) 60%, transparent); &:last-child { border: 0; } }
  .tile img, .tile-empty { border-radius: 8px; }
  .tag { border-radius: 6px; font-size: .7rem; }
  .badge { background: var(--accent); color: #fff; }
  table.units th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
  .flash { border-radius: 8px; }
  .footer { color: var(--muted); font-size: .85rem; }

  @media (max-width: 760px) {
    .shell { inline-size: calc(100% - 1rem); grid-template-columns: minmax(0, 1fr); } /* the two-column rule above sits in a later layer than the earlier one-column rule, so it is repeated here */
    .side-link { background: var(--surface); border: 1px solid var(--line); }
  }
}

/* ===== VK-like profile, composer and attachments (with our own touch: aurora covers, soft glow) ===== */
@layer vk {
  .avatar-112 { inline-size: 112px; block-size: 112px; font-size: 2.6rem; } .avatar-56 { inline-size: 56px; block-size: 56px; font-size: 1.3rem; }
  .shell { inline-size: min(100% - 2 * var(--gap), 68rem); }
  .vh { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

  /* profile hero: cover banner, avatar overlapping it */
  .profile-hero { padding: 0; overflow: hidden; display: block;
    .cover { block-size: 9.5rem; background-color: var(--cv1, #3f78b5); background-image:
        radial-gradient(1.5px 1.5px at 12% 28%, #fff9, transparent 60%), radial-gradient(1px 1px at 38% 62%, #fff8, transparent 60%), radial-gradient(1.5px 1.5px at 71% 22%, #fff9, transparent 60%), radial-gradient(1px 1px at 88% 70%, #fff8, transparent 60%),
        radial-gradient(60% 120% at 15% 110%, var(--cv2, #6aa3e0), transparent 70%), radial-gradient(55% 110% at 90% -20%, var(--cv3, #8a5be0), transparent 70%); }
    .hero-body { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; padding: 0 1.1rem 1rem; margin-block-start: -3.2rem; > * + * { margin-block-start: 0; } }
    .hero-avatar { padding: 4px; background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); line-height: 0; }
    .hero-info { padding-block-start: 3.4rem; min-inline-size: 14rem; h1 { font-size: 1.3rem; } }
    .hero-info .muted:first-of-type { margin-block-start: .1rem; }
    .hero-info > .row { margin-block-start: .5rem; } }
  .cover-0 { --cv1: #3f78b5; --cv2: #6aa3e0; --cv3: #7c5be0; } .cover-1 { --cv1: #2f6f6a; --cv2: #4fc1a6; --cv3: #3f78b5; } .cover-2 { --cv1: #7a3f8f; --cv2: #d86aa8; --cv3: #4a5ab5; }
  .cover-3 { --cv1: #b5573f; --cv2: #f09a5a; --cv3: #b53f78; } .cover-4 { --cv1: #3f4fb5; --cv2: #5ab0f0; --cv3: #3fb59a; } .cover-5 { --cv1: #5b3fb5; --cv2: #a78bfa; --cv3: #3f78b5; }
  .cover-6 { --cv1: #2f5f8f; --cv2: #6ad0d8; --cv3: #8f5fd0; } .cover-7 { --cv1: #8f3f4a; --cv2: #f07a8a; --cv3: #8f6a3f; } .cover-8 { --cv1: #3f7a4a; --cv2: #9ae06a; --cv3: #3f8fb5; }
  .cover-9 { --cv1: #4a3f8f; --cv2: #7a8af0; --cv3: #d06ab5; } .cover-10 { --cv1: #8f6a2f; --cv2: #f0c85a; --cv3: #b5573f; } .cover-11 { --cv1: #2f4f6f; --cv2: #5aa0c8; --cv3: #3fb5a0; }
  :root[data-edition="swgoh"] .cover { background-color: #0b1030; }

  .profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--gap); align-items: start; }
  .profile-main, .profile-aside { display: grid; gap: var(--gap); min-inline-size: 0; align-content: start; }
  .profile-aside .card > h2 a { color: var(--text); text-decoration: none; }
  .friend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem .3rem; text-align: center;
    a { display: grid; justify-items: center; gap: .2rem; text-decoration: none; color: var(--text); font-size: .78rem; &:hover span { color: var(--accent); } }
    span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
  @media (max-width: 900px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-aside { order: -1; } .friend-grid { grid-template-columns: repeat(6, 1fr); } }

  /* post composer: avatar + growing textarea, toolbar with icon buttons (VK "attach" row) */
  .composer { padding: .75rem .9rem; gap: .5rem; > * + * { margin-block-start: 0; } }
  .composer-top { display: flex; gap: .7rem; align-items: flex-start; > * + * { margin-block-start: 0; }
    textarea { flex: 1; min-block-size: 2.5rem; max-block-size: 14rem; resize: none; border: 0; background: transparent; padding: .55rem .2rem; font-size: 1rem; field-sizing: content; &:focus { outline: none; background: transparent; } } }
  .composer-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-block-start: 1px solid var(--line); padding-block-start: .55rem; justify-content: space-between; > * + * { margin-block-start: 0; } }
  .attach-bar { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; position: relative; flex: 1; min-inline-size: 0; }
  .attach-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border-radius: 8px; color: var(--accent); cursor: pointer; font-weight: 600; font-size: .86rem; list-style: none; user-select: none; position: relative;
    svg { flex: none; } &:hover, &:focus-within { background: color-mix(in oklch, var(--accent) 12%, transparent); }
    &::-webkit-details-marker { display: none; } }
  .attach-btn span { color: var(--muted); font-weight: 500; }
  .attach-btn:hover span { color: var(--text); }
  @media (max-width: 600px) { .attach-btn span { display: none; } }
  .attach-pick { position: relative; }
  .attach-pop { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; z-index: 5; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .35); min-inline-size: 14rem; select { inline-size: 100%; } }
  .attach-chips { display: flex; flex-wrap: wrap; gap: .4rem; inline-size: 100%; padding: 0; margin: 0; list-style: none;
    &:empty { display: none; }
    li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .3rem; border-radius: 8px; background: var(--surface-2); font-size: .82rem; max-inline-size: 14rem; }
    li img { inline-size: 2rem; block-size: 2rem; object-fit: cover; border-radius: 5px; }
    li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    li button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 .25rem; font-size: 1rem; line-height: 1; &:hover { color: var(--danger); } } }
}

@layer vk {
  img.avatar[data-u] { cursor: zoom-in; }
  a img.avatar[data-u] { cursor: inherit; }
  .lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: .75rem; background: rgb(0 0 0 / .86); padding: 1rem;
    img { max-inline-size: min(92vw, 56rem); max-block-size: 78dvh; border-radius: 10px; object-fit: contain; background: #000; }
    .lightbox-cap { display: flex; gap: 1rem; align-items: center; color: #fff; }
    .lightbox-x { position: absolute; inset-block-start: .6rem; inset-inline-end: 1rem; font-size: 2rem; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer; } }
  .avatar-view img { max-block-size: 75dvh; }
  .avatar-strip { display: flex; gap: .4rem; overflow-x: auto; padding-block: .25rem;
    img { inline-size: 3.5rem; block-size: 3.5rem; object-fit: cover; border-radius: 8px; opacity: .7; }
    a[aria-current] img { opacity: 1; outline: 2px solid var(--accent); } a:hover img { opacity: 1; } }
  .hero-stats { display: flex; gap: 0; border-block-start: 1px solid var(--line); margin: 0; padding: 0;
    li { flex: 1; text-align: center; padding: .6rem .3rem; border-inline-start: 1px solid var(--line); &:first-child { border: 0; } }
    a, li { color: var(--text); text-decoration: none; }
    b { display: block; font-size: 1.05rem; } span { color: var(--muted); font-size: .78rem; } a:hover b { color: var(--accent); } }
  .photo-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } }
}

@layer vk {
  .react { display: inline-flex; gap: .1rem; align-items: center; > * + * { margin-block-start: 0; } form { display: inline; } .btn { gap: .3rem; } }
  .btn.is-disliked { color: var(--danger); background: color-mix(in oklch, var(--danger) 12%, transparent); svg { fill: currentColor; } }
  .btn.is-liked svg { fill: currentColor; }
}

/* ===== VK-like polish for pages that looked raw: stories, file inputs, forms, empty states ===== */
@layer vk {
  input[type=file] { font-size: .9rem; color: var(--muted); max-inline-size: 100%;
    &::file-selector-button { margin-inline-end: .7rem; padding: .4rem .8rem; border: 0; border-radius: 8px; background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 600; cursor: pointer; }
    &::file-selector-button:hover { background: color-mix(in oklch, var(--accent) 24%, var(--surface)); } }
  .field > span:first-child { font-size: .82rem; color: var(--muted); font-weight: 600; }
  .field small { color: var(--muted); font-size: .78rem; }

  .stories-card { padding: .9rem 1rem; }
  .story-row { display: flex; gap: .9rem; overflow-x: auto; padding-block: .2rem .5rem; scrollbar-width: thin; li { flex: none; } }
  .story-tile { display: grid; justify-items: center; gap: .35rem; inline-size: 4.8rem; text-decoration: none; color: var(--text); cursor: pointer; }
  .story-name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; text-align: center; }
  .story-ring { display: grid; place-items: center; inline-size: 4.3rem; block-size: 4.3rem; border-radius: 50%; padding: 3px; background: var(--line);
    &.unseen { background: conic-gradient(from 200deg, #4f9cff, #8a5be0, #e05bb0, #ff9a4f, #4f9cff); }
    &.plus { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); font-size: 2rem; font-weight: 300; line-height: 1; border: 2px dashed color-mix(in oklch, var(--accent) 50%, transparent); padding: 0; }
    .avatar { border: 3px solid var(--surface); inline-size: 100%; block-size: 100%; } }
  .story-tile:hover .story-ring.plus { background: color-mix(in oklch, var(--accent) 24%, var(--surface)); }
  .story-form { display: none; border-block-start: 1px solid var(--line); margin-block-start: .6rem; padding-block-start: .8rem; }
  #story-toggle:checked ~ .story-form { display: grid; }
  #story-toggle:focus-visible ~ .story-row .story-add .story-ring { outline: 3px solid color-mix(in oklch, var(--accent) 70%, transparent); outline-offset: 2px; }
  .story-bg-pick select, .attach-btn select { padding: .2rem .4rem; border-radius: 6px; font-size: .82rem; }
  .story { border-radius: var(--radius); }
  .card > p.muted.center, p.card.muted.center { padding-block: 1.2rem; }
}

/* ===== messenger: two panes, bubbles, composer (VK / Telegram feel) ===== */
@layer vk {
  .messenger { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--gap); align-items: stretch; block-size: calc(100dvh - 7rem); min-block-size: 28rem; }
  .m-list, .m-chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-block-size: 0; > * + * { margin-block-start: 0; } }
  .m-head { padding: .8rem 1rem .5rem; h1 { font-size: 1.05rem; } }
  .m-dialogs { overflow-y: auto; flex: 1; padding: 0 .35rem .5rem; > li + li { margin-block-start: 0; } }
  .m-dialog { display: flex; gap: .7rem; align-items: center; padding: .55rem .6rem; border-radius: 10px; text-decoration: none; color: var(--text);
    &:hover { background: color-mix(in oklch, var(--text) 6%, transparent); } &.active { background: color-mix(in oklch, var(--accent) 14%, transparent); }
    &.unread .m-prev { color: var(--text); font-weight: 600; } }
  .m-av { position: relative; flex: none; line-height: 0; .dot { position: absolute; inset-inline-end: 0; inset-block-end: 1px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: #4bb34b; border: 2px solid var(--surface); } }
  .m-meta { flex: 1; min-inline-size: 0; display: grid; gap: .1rem; }
  .m-top, .m-bottom { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-inline-size: 0; }
  .m-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; } .m-top time { color: var(--muted); font-size: .74rem; flex: none; }
  .m-prev { color: var(--muted); font-size: .86rem; min-inline-size: 0; em { font-style: normal; color: var(--accent); } }
  .m-chat-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-block-end: 1px solid var(--line); > * + * { margin-block-start: 0; } }
  .m-who { display: flex; gap: .65rem; align-items: center; text-decoration: none; color: var(--text); span { display: grid; line-height: 1.25; } small { font-size: .76rem; } }
  .m-back { display: none; }
  .m-chat .bubbles { flex: 1; max-block-size: none; padding: .8rem 1rem; align-content: end; gap: .25rem; overflow-y: auto; list-style: none; }
  .m-chat .bubbles > li { margin: 0; }
  .bubble { position: relative; padding: .4rem .75rem .3rem; border-radius: 16px 16px 16px 4px; max-inline-size: min(30rem, 82%);
    p { white-space: pre-wrap; overflow-wrap: anywhere; } small { display: block; text-align: end; font-size: .68rem; opacity: .65; margin-block-start: .05rem; }
    &.mine { justify-self: end; background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px; } }
  .bubbles .sep { justify-self: center; margin-block: .5rem .25rem; max-inline-size: none; background: none; padding: 0; span { font-size: .75rem; color: var(--muted); background: color-mix(in oklch, var(--text) 7%, transparent); padding: .15rem .65rem; border-radius: 99px; } }
  .m-compose { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem .8rem; border-block-start: 1px solid var(--line); > * + * { margin-block-start: 0; }
    textarea { flex: 1; resize: none; min-block-size: 2.4rem; max-block-size: 9rem; field-sizing: content; border-radius: 18px; padding: .5rem .9rem; }
    .m-send { inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border-radius: 50%; flex: none; } }
  .m-empty { display: grid; place-items: center; }
  @media (max-width: 760px) {
    .messenger { grid-template-columns: minmax(0, 1fr); block-size: calc(100dvh - 6rem); }
    .messenger.has-chat .m-list { display: none; } .messenger:not(.has-chat) .m-empty { display: none; }
    .m-back { display: inline-flex; }
  }
}

@layer vk {
  .share-dest { border: 0; padding: 0; display: grid; gap: .4rem; legend { font-size: .82rem; color: var(--muted); font-weight: 600; margin-block-end: .3rem; } }
  .share-opt { display: flex; gap: .7rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; span { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; flex: 1; }
    &:has(input:checked) { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, transparent); } select { max-inline-size: 16rem; } }
  .share-preview { background: var(--surface-2); }
}

@layer vk {
  .avatar-48 { inline-size: 48px; block-size: 48px; font-size: 1.1rem; } .avatar-60 { inline-size: 60px; block-size: 60px; font-size: 1.4rem; }
}

@layer vk { .online-now { color: #4bb34b; font-weight: 600; } }

@layer vk {
  .bubble.sticker { background: transparent !important; padding: 0; box-shadow: none; p { padding: .4rem; } small { opacity: .6; color: var(--text); } img { inline-size: 10rem; block-size: 10rem; object-fit: contain; } }
  .m-chat { position: relative; }
  .sticker-picker { position: absolute; inset-inline-start: .8rem; inset-block-end: .7rem; z-index: 6;
    > summary { list-style: none; cursor: pointer; font-size: 1.3rem; inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; padding: 0; border-radius: 50%; &::-webkit-details-marker { display: none; } }
    .sticker-pop { position: absolute; inset-block-end: 3rem; inset-inline-start: 0; inline-size: min(22rem, 85vw); max-block-size: 22rem; overflow-y: auto; padding: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); h3 { font-size: .8rem; color: var(--muted); margin: .3rem 0; } } }
  .m-chat:has(.sticker-picker) .m-compose { padding-inline-start: 3.6rem; }
  .sticker-row { display: flex; flex-wrap: wrap; gap: .3rem; form { display: inline; } button { border: 0; background: transparent; padding: .15rem; border-radius: 8px; cursor: pointer; &:hover { background: color-mix(in oklch, var(--accent) 12%, transparent); } } img { inline-size: 3.5rem; block-size: 3.5rem; object-fit: contain; } }
  .packs { display: grid; gap: var(--gap); } .pack .sticker-row img { opacity: .95; }

  /* clips: vertical snap feed */
  .clip-feed { display: grid; gap: .8rem; justify-items: center; max-block-size: calc(100dvh - 9rem); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; &.single { max-block-size: none; overflow: visible; } }
  .clip { position: relative; inline-size: min(100%, 24rem); aspect-ratio: 9 / 16; max-block-size: calc(100dvh - 10rem); border-radius: 14px; overflow: hidden; background: #000; scroll-snap-align: center; flex: none; }
  .clip-video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; cursor: pointer; }
  .clip-shade { position: absolute; inset: auto 0 0 0; block-size: 45%; background: linear-gradient(transparent, rgb(0 0 0 / .75)); pointer-events: none; }
  .clip-meta { position: absolute; inset-inline: .9rem 4.6rem; inset-block-end: .9rem; color: #fff; display: grid; gap: .3rem; a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; } .clip-caption { font-size: .92rem; overflow-wrap: anywhere; } small { opacity: .8; } }
  .clip-actions { position: absolute; inset-inline-end: .5rem; inset-block-end: 1rem; display: grid; gap: .3rem; justify-items: center; .btn { color: #fff; background: rgb(0 0 0 / .35); backdrop-filter: blur(6px); } .react { display: grid; gap: .3rem; } form { display: block; } }
  .clip-sound { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; border: 0; border-radius: 99px; background: rgb(0 0 0 / .45); color: #fff; padding: .3rem .6rem; cursor: pointer; }
  .clip-more { margin-block: 1rem; }
  .clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; li a { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; } video { inline-size: 100%; block-size: 100%; object-fit: cover; } span { position: absolute; inset-inline-start: .4rem; inset-block-end: .3rem; color: #fff; font-size: .8rem; text-shadow: 0 1px 3px #000; } }

  /* market */
  .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem;
    .m-item a { display: grid; gap: .25rem; text-decoration: none; color: var(--text); position: relative; } .m-item img, .m-noimg { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
    .m-item.is-off img { opacity: .5; } .m-item .tag { position: absolute; inset-block-start: .4rem; inset-inline-start: .4rem; background: rgb(0 0 0 / .65); color: #fff; } .m-title { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
  .m-noimg { display: grid; place-items: center; font-size: 2.5rem; &.big { aspect-ratio: 4/3; font-size: 5rem; } }
  .m-price { font-size: 1.05rem; &.big { font-size: 1.7rem; } }
  .market-view { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: start; @media (max-width: 760px) { grid-template-columns: minmax(0, 1fr); } }
  .market-main { inline-size: 100%; max-block-size: 34rem; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
  .market-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-block-start: .5rem; img { inline-size: 5rem; block-size: 5rem; object-fit: cover; border-radius: 8px; } }
  .seller { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); span { display: grid; } }

  /* music */
  .m-tracks { padding: .3rem; > li + li { margin-block-start: 0; } }
  .m-track { display: flex; gap: .7rem; align-items: center; padding: .5rem .6rem; border-radius: 10px; flex-wrap: wrap; &.playing { background: color-mix(in oklch, var(--accent) 12%, transparent); } &:hover { background: color-mix(in oklch, var(--text) 5%, transparent); } .small { font-size: .78rem; } > * + * { margin-block-start: 0; } }
  .m-play { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; font-size: .85rem; }
  .music-player { position: sticky; inset-block-end: .6rem; display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: center; z-index: 8; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6);
    .mp-info { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-ctl { display: flex; gap: .15rem; } #mp-seek { grid-column: 1 / -1; inline-size: 100%; accent-color: var(--accent); }
    [aria-pressed="true"] { background: color-mix(in oklch, var(--accent) 20%, transparent); } }
}

@layer vk {
  .gif-tag { font-size: .72rem; border: 1.5px solid currentColor; border-radius: 5px; padding: 0 .3rem; letter-spacing: .03em; }
  .gif-pop { min-inline-size: min(22rem, 85vw); max-block-size: 22rem; overflow-y: auto; h3 { font-size: .78rem; color: var(--muted); margin: .5rem 0 .3rem; } }
  .gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; button, li { padding: 0; border: 0; background: var(--surface-2); border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; line-height: 0; } img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; } &.big { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); form { position: absolute; inset-block-start: .2rem; inset-inline-end: .2rem; } } }
  .gif-upload { display: flex; justify-content: center; border: 1px dashed var(--line); margin-block-end: .4rem; }
  .attach-gif { position: relative; display: inline-block; max-inline-size: min(100%, 20rem); line-height: 0; img { inline-size: 100%; border-radius: 10px; } form { position: absolute; inset-block-start: .3rem; inset-inline-end: .3rem; .btn { background: rgb(0 0 0 / .5); color: #fff; padding: .15rem .45rem; } } }
  .m-compose { flex-wrap: wrap; .m-compose-main { display: flex; gap: .5rem; align-items: flex-end; inline-size: 100%; > * + * { margin-block-start: 0; } textarea { flex: 1; } } .attach-bar { inline-size: 100%; flex: none; } .attach-btn span { display: none; } }
  .m-chat:has(.sticker-picker) .m-compose { padding-inline-start: .8rem; }
  .sticker-pop { max-block-size: 22rem; overflow-y: auto; min-inline-size: min(22rem, 85vw); }
  .bubble .attachments { margin-block: .25rem; } .bubble.mine .attach-doc, .bubble.mine .attach-doc small { color: #fff; }
}

@layer vk {
  .feed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--gap); align-items: start; @media (max-width: 960px) { grid-template-columns: minmax(0, 1fr); .feed-aside { display: none; } } }
  .feed-main, .feed-aside { display: grid; gap: var(--gap); min-inline-size: 0; align-content: start; }
  .feed-aside { position: sticky; inset-block-start: 4rem; .card h2 a { color: var(--text); text-decoration: none; } .small { font-size: .78rem; } }
  .stories-card.strip { padding: .7rem .9rem; }
  .feed-tabs { margin-block: 0; }
  .post-comments { display: grid; gap: .5rem; border-block-start: 1px solid var(--line); padding-block-start: .6rem; > * + * { margin-block-start: 0; } }
  .all-comments { font-size: .85rem; text-decoration: none; &:hover { color: var(--accent); } }
  .mini-comment { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; overflow-wrap: anywhere; .muted { font-size: .75rem; } > * + * { margin-block-start: 0; } }
  .quick-comment { display: flex; gap: .55rem; align-items: center; > * + * { margin-block-start: 0; } input { flex: 1; border-radius: 99px; padding: .4rem .9rem; font-size: .9rem; } }
  .post .post-head { align-items: flex-start; }
}

@layer vk {
  .gift-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; }
  .gift { padding: .9rem .6rem .7rem; gap: .25rem; border-radius: 14px; background: var(--surface); transition: transform .12s, box-shadow .12s; &:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgb(0 0 0 / .45); } .gift-name { font-weight: 600; } small { color: var(--muted); } &.static { cursor: default; &:hover { transform: none; box-shadow: none; } } }
  .gift-emoji { font-size: 3.6rem; line-height: 1.15; &.big { font-size: 4.4rem; } }
  .gift-img { inline-size: 5rem; block-size: 5rem; object-fit: contain; &.big { inline-size: 6rem; block-size: 6rem; } &.sm { inline-size: 3rem; block-size: 3rem; } }
  .gift-card { padding: 1.1rem 1.2rem; gap: 1.2rem; }
}

@layer vk {
  .music-player.gp { position: fixed; inset-block-end: .6rem; inset-inline: 0; margin-inline: auto; inline-size: min(46rem, calc(100% - 1rem)); z-index: 40; }
  body.has-gp { padding-block-end: 6.5rem; }
  html.pjax-loading { cursor: progress; } html.pjax-loading .main { opacity: .6; transition: opacity .15s .1s; }
}

@layer vk {
  .mc-dock { position: fixed; inset-block-end: 0; inset-inline-end: 1rem; z-index: 45; display: flex; align-items: flex-end; gap: .6rem; pointer-events: none; > * { pointer-events: auto; } }
  .mc-windows { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: .6rem; }
  .mc-win { inline-size: 20rem; max-inline-size: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--line); border-block-end: 0; border-radius: 12px 12px 0 0; box-shadow: 0 10px 30px -8px rgb(0 0 0 / .5); display: flex; flex-direction: column; overflow: hidden; > * + * { margin-block-start: 0; } &.min .mc-body { display: none; } }
  .mc-head { display: flex; align-items: center; gap: .3rem; padding: .35rem .5rem; background: var(--top, var(--accent)); color: #fff; > * + * { margin-block-start: 0; }
    .mc-who { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; span { display: grid; line-height: 1.15; min-inline-size: 0; } b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; } small { opacity: .8; font-size: .7rem; } }
    button, .mc-full { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px; text-decoration: none; &:hover { background: rgb(255 255 255 / .18); } } }
  .mc-body { display: flex; flex-direction: column; block-size: 22rem; min-block-size: 0; > * + * { margin-block-start: 0; } }
  .mc-bubbles { flex: 1; overflow-y: auto; padding: .6rem; align-content: end; gap: .2rem; list-style: none; max-block-size: none; .bubble { max-inline-size: 85%; font-size: .9rem; } }
  .mc-compose { padding: .45rem .55rem; border-block-start: 1px solid var(--line); .attach-btn { padding: .25rem .35rem; } .attach-btn span { display: none; } .attach-pop { inset-block-start: auto; inset-block-end: calc(100% + 4px); } .sticker-pop, .gif-pop { min-inline-size: min(18rem, 80vw); max-block-size: 16rem; } }
  .mc-launcher { position: relative; margin-block-end: .8rem; }
  .mc-launch { inline-size: 3rem; block-size: 3rem; border-radius: 50%; font-size: 1.3rem; padding: 0; position: relative; box-shadow: 0 8px 22px -8px rgb(0 0 0 / .6); .badge { position: absolute; inset-block-start: -.2rem; inset-inline-end: -.2rem; } }
  .mc-list { position: absolute; inset-block-end: 3.6rem; inset-inline-end: 0; inline-size: 19rem; max-block-size: 26rem; overflow-y: auto; padding: .4rem; box-shadow: 0 10px 30px -8px rgb(0 0 0 / .5); > * + * { margin-block-start: 0; }
    .mc-item { display: flex; align-items: center; gap: .6rem; inline-size: 100%; text-align: start; border: 0; background: transparent; padding: .45rem .5rem; border-radius: 10px; cursor: pointer; color: var(--text); &:hover { background: color-mix(in oklch, var(--text) 7%, transparent); } span { display: grid; min-inline-size: 0; flex: 1; } b, small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } small { color: var(--muted); } .badge { flex: none; } img, .avatar-ph { inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; flex: none; } }
    .mc-all { display: block; text-align: center; padding: .5rem; text-decoration: none; } }
  @media (max-width: 760px) { .mc-win { inline-size: calc(100vw - 1rem); } .mc-windows { position: fixed; inset-inline: .5rem; inset-block-end: 0; justify-content: flex-end; } }
}

/* ===== header music player (VK style) ===== */
@layer vk {
  .music-player.gp, body.has-gp { all: unset; }
  body.has-gp { display: grid; grid-template-rows: auto 1fr auto; }
  .tb-music { display: flex; align-items: center; gap: .2rem; min-inline-size: 0; border-radius: 10px; &.active, &.open { background: rgb(255 255 255 / .12); } }
  .tb-note { border: 0; background: transparent; color: #fff; cursor: pointer; padding: .45rem .7rem; border-radius: 10px; display: grid; place-items: center; &:hover { background: rgb(255 255 255 / .14); } svg { color: #fff; } }
  .tb-mini { display: flex; align-items: center; gap: .1rem; min-inline-size: 0; padding-inline-end: .5rem; }
  .tb-title { border: 0; background: transparent; color: #fff; cursor: pointer; text-align: start; display: flex; gap: .2rem; min-inline-size: 0; max-inline-size: 16rem; font-size: .88rem; b, span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span { opacity: .75; } @media (max-width: 900px) { display: none; } }
  .mp-b { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: .4rem .5rem; border-radius: 8px; min-inline-size: 2rem;
    .tb-mini & { color: #fff; &:hover { background: rgb(255 255 255 / .16); } }
    &:hover { background: color-mix(in oklch, var(--text) 8%, transparent); } &.big { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: color-mix(in oklch, var(--text) 12%, transparent); }
    &[aria-pressed="true"], &.on { color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); } }

  .mp-panel { position: fixed; inset-block-start: 3rem; inset-inline: 0; margin-inline: auto; inline-size: min(44rem, 100%); max-block-size: calc(100dvh - 3.2rem); overflow-y: auto; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); padding: 0 1rem 1rem; display: block; > * + * { margin-block-start: 0; } }
  .mp-panel[hidden] { display: none; }
  .mp-now { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 0; border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; background: var(--surface); z-index: 2; > * + * { margin-block-start: 0; } @media (max-width: 700px) { grid-template-columns: 1fr; } }
  .mp-ctl { display: flex; align-items: center; gap: .1rem; } .mp-cur { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; }
  .mp-extra { display: flex; align-items: center; gap: .5rem; time { font-size: .78rem; color: var(--muted); min-inline-size: 2.2rem; } #mp-seek { inline-size: 8rem; } #mp-vol { inline-size: 4.5rem; } input[type=range] { accent-color: var(--accent); padding: 0; } }
  .mp-names { display: grid; min-inline-size: 0; line-height: 1.3; b, span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span { color: var(--muted); font-size: .84rem; } }
  .mp-cover { inline-size: 2.8rem; block-size: 2.8rem; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; flex: none; background: linear-gradient(135deg, #5b8def, #8a5be0);
    &.c1 { background: linear-gradient(135deg, #e05bb0, #ff9a4f); } &.c2 { background: linear-gradient(135deg, #2fb67a, #3f9be0); } &.c3 { background: linear-gradient(135deg, #ff7a5b, #e0b53f); } &.c4 { background: linear-gradient(135deg, #7a5be0, #e05bb0); }
    &.c5 { background: linear-gradient(135deg, #3fb5c8, #5b8def); } &.c6 { background: linear-gradient(135deg, #b5573f, #e08a4f); } &.c7 { background: linear-gradient(135deg, #4b6bd1, #2fb67a); } }
  .mp-search { padding-block: .8rem .4rem; input { inline-size: 100%; border-radius: 10px; padding: .55rem .9rem; } }
  .mp-tabs { display: flex; gap: .4rem; padding-block: .3rem .6rem; button { border: 0; border-radius: 99px; padding: .35rem .9rem; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; &[aria-pressed="true"] { background: color-mix(in oklch, var(--text) 10%, transparent); color: var(--text); } } }
  .mp-h { font-size: 1rem; margin: .9rem 0 .5rem; display: flex; justify-content: space-between; align-items: center; }
  .mp-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .85rem; }
  .mp-tracks { display: grid; gap: .1rem; padding: 0; list-style: none; > li + li { margin-block-start: 0; } &.mp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .8rem; @media (max-width: 700px) { grid-template-columns: 1fr; } } }
  .mp-tracks .m-track { display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem; border-radius: 10px; cursor: pointer; flex-wrap: nowrap; &:hover { background: color-mix(in oklch, var(--text) 6%, transparent); } &.current { background: color-mix(in oklch, var(--accent) 12%, transparent); } time { margin-inline-start: auto; color: var(--muted); font-size: .82rem; flex: none; } }
  .mp-shuffle-all { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; padding: .5rem; margin-block-end: .2rem; }
  .mp-friends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: 0; list-style: none; @media (max-width: 700px) { grid-template-columns: 1fr; } }
  .mp-friend { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; cursor: pointer; text-align: start; padding: .3rem; border-radius: 10px; color: var(--text); min-inline-size: 0; &:hover { background: color-mix(in oklch, var(--text) 6%, transparent); } img, .mp-ph { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; object-fit: cover; flex: none; } .mp-names b { color: var(--accent); } }
  .mp-foot { display: flex; justify-content: space-between; align-items: center; padding-block-start: .8rem; margin-block-start: .6rem; border-block-start: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
  @media (max-width: 760px) { .tb-music .tb-mini .mp-b[data-mp="prev"] { display: none; } }
}

@layer vk {
  .attach-tracks { display: block; padding: 0; margin-block: .25rem; list-style: none; max-inline-size: 26rem; .m-track { display: flex; align-items: center; gap: .65rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); &.current { border-color: var(--accent); } } .m-play { inline-size: 2.2rem; block-size: 2.2rem; } time { margin-inline-start: auto; color: var(--muted); font-size: .8rem; } }
  .bubble.mine .attach-tracks .m-track { color: var(--text); }
  ul.tracks.m-tracks .m-track { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; &:hover { background: color-mix(in oklch, var(--text) 5%, transparent); } &.current { background: color-mix(in oklch, var(--accent) 12%, transparent); } }
}

@layer vk {
  .attach-bar .sticker-picker { position: relative; inset: auto; z-index: auto; > summary { inline-size: auto; block-size: auto; display: inline-flex; padding: .4rem .6rem; border-radius: 8px; font-size: 1.05rem; line-height: 1; place-items: unset; &:hover { background: color-mix(in oklch, var(--accent) 12%, transparent); } } .sticker-pop { inset-inline-start: 0; inset-block-end: calc(100% + 6px); } }
  .bubble.sticker img, .bubble .sticker-img { inline-size: 8rem; block-size: 8rem; }
  .mc-bubbles .bubble.sticker img, .mc-bubbles .sticker-img { inline-size: 6rem; block-size: 6rem; }
  .bubble.sticker { padding: 0; small { display: block; text-align: end; padding: 0 .3rem; } }
  .mc-bubbles .bubble.sticker { max-inline-size: 70%; }
}

@layer vk {
  .clip-pop { display: grid; gap: .15rem; min-inline-size: 15rem; padding: .35rem; > * + * { margin-block-start: 0; } }
  .clip-row { display: grid; > * + * { margin-block-start: 0; } }
  .clip-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; color: var(--text); font-weight: 500; svg { color: var(--accent); } &:hover, &:focus-within { background: color-mix(in oklch, var(--accent) 12%, transparent); } }
  .clip-from { display: flex; align-items: center; gap: .5rem; padding: 0 .65rem .4rem 2.6rem; font-size: .78rem; color: var(--muted); select { flex: 1; min-inline-size: 0; padding: .2rem .35rem; font-size: .8rem; } }
  .attach-video { display: grid; gap: .2rem; max-inline-size: 26rem; video { inline-size: 100%; max-block-size: 18rem; border-radius: 10px; background: #000; } a { font-size: .82rem; text-decoration: none; } }
  .mc-compose .clip-pop { min-inline-size: 13rem; }
}

@layer vk {
  /* mini chat: pop-ups open across the whole window width, never beyond its edges */
  .mc-compose { position: relative; .attach-pick, .attach-bar .sticker-picker { position: static; } .attach-pop, .sticker-pop, .gif-pop, .clip-pop { position: absolute; inset-inline: .5rem; inset-block-start: auto; inset-block-end: calc(100% + 4px); inline-size: auto; min-inline-size: 0; max-inline-size: none; max-block-size: 15rem; overflow-y: auto; } .sticker-row img { inline-size: 3.2rem; block-size: 3.2rem; } }
}

@layer vk {
  /* messenger: pop-ups (stickers, GIF, attachments) open upwards — below the toolbar they were clipped by the chat */
  .m-compose .attach-pop { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
  .m-chat .sticker-pop, .m-chat .gif-pop { max-block-size: min(22rem, 60dvh); }
}

@layer vk {
  .bubble { position: relative; }
  .bubble .fwd { position: absolute; inset-block-start: 50%; translate: 0 -50%; inset-inline-end: -1.9rem; opacity: 0; text-decoration: none; font-size: 1rem; color: var(--muted); inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); transition: opacity .12s; }
  .bubble.mine .fwd { inset-inline-end: auto; inset-inline-start: -1.9rem; }
  .bubble:hover .fwd, .bubble .fwd:focus-visible { opacity: 1; }
  .feed-grid.no-aside { grid-template-columns: minmax(0, 1fr); }
}

@layer vk { .mini-comment { position: relative; .mini-del { margin-inline-start: auto; opacity: 0; .btn { padding: 0 .4rem; } } &:hover .mini-del, .mini-del:focus-within { opacity: 1; } > div:first-of-type { flex: 1; min-inline-size: 0; } } @media (hover: none) { .mini-comment .mini-del { opacity: 1; } } }

/* ===== admin: sidebar navigation, module cards, settings grid, switches, sticky save bar ===== */
@layer vk {
  .admin-shell { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--gap); align-items: start; @media (max-width: 860px) { grid-template-columns: minmax(0, 1fr); } }
  .admin-nav { position: sticky; inset-block-start: 4rem; display: grid; gap: .9rem; max-block-size: calc(100dvh - 5rem); overflow-y: auto; padding-inline-end: .2rem;
    @media (max-width: 860px) { position: static; display: flex; overflow-x: auto; max-block-size: none; gap: .5rem; } }
  .admin-group { display: grid; gap: .1rem; h2 { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .25rem .6rem; }
    a { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .42rem .65rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .92rem; white-space: nowrap;
      &:hover { background: color-mix(in oklch, var(--text) 7%, transparent); } &[aria-current="page"] { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent); font-weight: 650; } }
    @media (max-width: 860px) { display: flex; align-items: center; gap: .15rem; h2 { display: none; } } }
  .admin-main { display: grid; gap: var(--gap); min-inline-size: 0; align-content: start; > * + * { margin-block-start: 0; } }
  .admin-toolbar { display: flex; gap: .8rem; align-items: center; input[type=search] { flex: 1; max-inline-size: 26rem; border-radius: 99px; } }

  .mod-group { margin-block-end: 1.1rem; h2 { font-size: .95rem; margin-block-end: .55rem; } }
  .mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .6rem; }
  .mod-card { display: grid; gap: .5rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .12s; &.is-on { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); } &[hidden] { display: none; }
    .mod-head { display: flex; align-items: center; gap: .65rem; b { font-weight: 600; font-size: .92rem; line-height: 1.25; } }
    .mod-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; .btn { padding: .2rem .55rem; font-size: .78rem; } } }
  .switch { position: relative; display: inline-block; inline-size: 2.5rem; block-size: 1.4rem; flex: none; input[type=checkbox] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
    .slider { position: absolute; inset: 0; border-radius: 99px; background: color-mix(in oklch, var(--text) 22%, transparent); transition: background .15s; &::after { content: ""; position: absolute; inset-block-start: .15rem; inset-inline-start: .15rem; inline-size: 1.1rem; block-size: 1.1rem; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); } }
    input:checked + .slider { background: var(--accent); &::after { transform: translateX(1.1rem); } } input:focus-visible + .slider { outline: 3px solid color-mix(in oklch, var(--accent) 60%, transparent); outline-offset: 2px; } }
  [dir=rtl] .switch input:checked + .slider::after { transform: translateX(-1.1rem); }

  .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem 1.2rem; align-items: start; padding: 1rem;
    .setting { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); &.wide { grid-column: 1 / -1; } &[hidden] { display: none; } .field, .check { margin: 0; } textarea { inline-size: 100%; } } }
  .setting.is-bool .check { display: flex; align-items: center; gap: .6rem; }
  .save-bar { position: sticky; inset-block-end: 0; display: flex; justify-content: flex-end; padding: .7rem 0; background: linear-gradient(transparent, var(--bg) 40%); z-index: 5; }
  .admin-main .tabs { flex-wrap: wrap; }
  .admin-main .card + .card { margin-block-start: 0; }
}

@layer vk { .agent-ph { background: linear-gradient(135deg, #2fb67a, #3f78b5); font-size: .95rem; } .staff-msg { border-inline-start: 3px solid var(--accent); } }

@layer vk { .item-bar { gap: .2rem; } .story-like .btn { color: #fff; } .post-body a, .bubble p a { color: var(--accent); overflow-wrap: anywhere; } .bubble.mine p a { color: #fff; text-decoration: underline; } }