@layer reset, tokens, base, layout, components, pages, responsive, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure { margin: 0; }
  button, input, textarea, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button { border: 0; }
  img, video, canvas, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
}

/* Attributed external shares ------------------------------------------------
   The receiver is intentionally isolated from ordinary feed-card sizing so
   its referral card stays legible on phones, tablets and desktop. */
@layer pages {
  .post-share-link-loading,
  .post-share-link-error {
    display: inline-flex; min-height: 58px; flex: 1 0 100%; align-items: center; justify-content: center; gap: 9px;
    padding: 10px 12px; color: var(--muted); font-size: .64rem; text-align: center;
  }
  .post-share-link-loading .spinner { width: 18px; height: 18px; }
  .post-share-link-retry { min-height: 42px; flex: 0 0 auto; align-self: center; }

  .shared-content-page .shared-content-viewer { overflow: hidden; scroll-snap-type: none; }
  .shared-content-page .video-viewer__slide { height: 100%; min-height: 100%; }
  .shared-referral-modal { width: min(430px, calc(100vw - 28px)); overflow: hidden; }
  .shared-referral-dialog { display: grid; min-width: 0; gap: 17px; padding: 26px 24px 23px; }
  .shared-referral-dialog__identity {
    display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px;
    color: var(--text); text-decoration: none;
  }
  .shared-referral-dialog__avatar .avatar { width: 62px; height: 62px; }
  .shared-referral-dialog__identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .shared-referral-dialog__identity small { color: #c4b5fd; font-size: .58rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
  .shared-referral-dialog__identity strong { overflow: hidden; font-size: 1.06rem; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
  .shared-referral-dialog__identity span span { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
  .shared-referral-dialog__message { color: var(--text-soft); font-size: .75rem; line-height: 1.52; }
  .shared-referral-dialog__actions,
  .shared-referral-auth-gate__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .shared-referral-dialog__actions .button,
  .shared-referral-auth-gate__actions .button { min-width: 0; min-height: 45px; padding-inline: 12px; }
  .shared-referral-auth-gate { display: grid; justify-items: center; gap: 13px; padding: 30px 24px 24px; text-align: center; }
  .shared-referral-auth-gate__icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; color: white; background: var(--gradient); box-shadow: 0 12px 30px rgb(139 92 246 / .26); }
  .shared-referral-auth-gate h2 { font-size: 1.08rem; letter-spacing: -.025em; }
  .shared-referral-auth-gate p { max-width: 330px; color: var(--muted); font-size: .72rem; line-height: 1.48; }
  .shared-referral-auth-gate__actions { width: 100%; margin-top: 5px; }

  @media (max-width: 390px) {
    .shared-referral-dialog { gap: 14px; padding: 22px 17px 18px; }
    .shared-referral-dialog__actions,
    .shared-referral-auth-gate__actions { grid-template-columns: 1fr; }
  }
}

@layer pages {
  .superadmin-entry {
    display: grid; align-content: start; gap: 24px; max-width: 1040px;
    background:
      radial-gradient(circle at 16% 0%, rgb(124 58 237 / .16), transparent 36%),
      radial-gradient(circle at 92% 24%, rgb(236 72 153 / .1), transparent 32%);
  }
  .superadmin-entry__hero {
    position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgb(255 255 255 / .1); border-radius: 30px;
    background: linear-gradient(145deg, rgb(24 20 38 / .94), rgb(13 13 19 / .96));
    box-shadow: 0 28px 80px rgb(0 0 0 / .28);
  }
  .superadmin-entry__hero::after {
    content: ''; position: absolute; right: -72px; bottom: -92px; width: 260px; aspect-ratio: 1;
    border-radius: 50%; background: linear-gradient(135deg, rgb(124 58 237 / .3), rgb(236 72 153 / .18)); filter: blur(8px);
  }
  .superadmin-entry__eyebrow {
    position: relative; z-index: 1; display: inline-flex; width: max-content; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px solid rgb(167 139 250 / .22); border-radius: 999px;
    color: #ddd6fe; background: rgb(124 58 237 / .12); font-size: .74rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .superadmin-entry__hero h1 { position: relative; z-index: 1; font-size: clamp(2rem, 5vw, 4.2rem); letter-spacing: -.05em; }
  .superadmin-entry__hero p { position: relative; z-index: 1; max-width: 650px; color: var(--muted); line-height: 1.55; }
  .superadmin-entry__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .superadmin-entry__card {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 82px; padding: 16px 18px; border: 1px solid rgb(255 255 255 / .085); border-radius: 20px;
    background: rgb(20 20 28 / .78); box-shadow: 0 14px 36px rgb(0 0 0 / .15);
  }
  .superadmin-entry__card--featured { border-color: rgb(167 139 250 / .28); background: linear-gradient(135deg, rgb(124 58 237 / .2), rgb(236 72 153 / .1)); }
  .superadmin-entry__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #ddd6fe; background: rgb(139 92 246 / .13); }
  .superadmin-entry__label { min-width: 0; overflow: hidden; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
  .superadmin-entry__security { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .78rem; }
}

@layer responsive {
  @media (max-width: 760px) {
    .superadmin-entry { gap: 16px; padding-top: 18px; }
    .superadmin-entry__hero { padding: 24px 20px; border-radius: 24px; }
    .superadmin-entry__grid { grid-template-columns: 1fr; gap: 10px; }
    .superadmin-entry__card { min-height: 70px; padding: 12px 14px; border-radius: 18px; }
  }
  @media (min-width: 1100px) {
    .superadmin-entry__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .superadmin-entry__card { grid-template-columns: 46px minmax(0, 1fr); }
    .superadmin-entry__card > .icon:last-child { display: none; }
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .algorithm-overview { margin-top: 20px; padding: 18px 15px; border-radius: 20px; }
    .algorithm-overview__heading { display: grid; gap: 13px; }
    .algorithm-overview__heading p { font-size: .72rem; }
    .algorithm-overview__status { width: max-content; max-width: 100%; }
    .algorithm-overview__tabs { margin-top: 17px; }
    .algorithm-overview__tab { min-height: 42px; padding-inline: 13px; }
    .algorithm-overview__panels { min-height: 0; }
    .algorithm-overview__panel { padding-top: 19px; }
    .algorithm-flow,
    .algorithm-flow--signals,
    .algorithm-compact-flow,
    .algorithm-compact-flow--stories { grid-template-columns: minmax(0, 1fr); gap: 15px; overflow: visible; padding-bottom: 0; }
    .algorithm-flow__step { min-height: 104px; padding-left: 61px; }
    .algorithm-flow__icon { position: absolute; top: 16px; left: 14px; }
    .algorithm-flow__step strong { margin-top: 3px; }
    .algorithm-flow__step:not(:last-child)::after {
      top: auto; right: 50%; bottom: -18px; width: 22px; content: "↓"; transform: translateX(50%);
    }
    .algorithm-surfaces { grid-template-columns: minmax(0, 1fr); }
    .algorithm-surfaces li { min-height: 56px; }
    .algorithm-compact-flow li { min-height: 76px; }
    .algorithm-compact-flow li:not(:last-child)::after { top: auto; right: 50%; bottom: -13px; content: "⌄"; transform: translateX(50%); }
    .algorithm-content-grid { grid-template-columns: minmax(0, 1fr); }
    .algorithm-route-notes { grid-template-columns: minmax(0, 1fr); }
    [dir="rtl"] .algorithm-flow__step { padding-right: 61px; padding-left: 14px; }
    [dir="rtl"] .algorithm-flow__icon { right: 14px; left: auto; }
    [dir="rtl"] .algorithm-flow__step:not(:last-child)::after,
    [dir="rtl"] .algorithm-compact-flow li:not(:last-child)::after { right: 50%; left: auto; content: "↓"; transform: translateX(50%); }
  }
}

@layer components {
  @media (prefers-reduced-motion: reduce) {
    .algorithm-overview *, .algorithm-overview *::before, .algorithm-overview *::after {
      scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
  }
}

/* Native push preferences ------------------------------------------------- */
@layer components {
  .overlay__panel--sheet.push-settings-modal { width: min(720px, 100%); max-height: min(91dvh, 920px); overflow: auto; overscroll-behavior: contain; }
  .push-settings { display: grid; gap: 18px; padding: 24px 24px max(27px, env(safe-area-inset-bottom)); }
  .push-settings__heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 13px; padding-right: 42px; }
  .push-settings__heading-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgb(66 133 244 / .2); border-radius: 15px; color: #dbeafe; background: linear-gradient(145deg, rgb(66 133 244 / .2), rgb(52 168 83 / .07)); }
  .push-settings__heading h2 { margin-top: 3px; font-size: clamp(1.25rem, 4vw, 1.7rem); letter-spacing: -.035em; }
  .push-settings__heading p { max-width: 590px; margin-top: 7px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
  .push-settings__form { display: grid; gap: 13px; }
  .push-settings__section { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: rgb(255 255 255 / .018); }
  .push-settings__section-heading { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 9px; padding: 2px 3px 4px; }
  .push-settings__section-heading > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #bfdbfe; background: rgb(66 133 244 / .1); }
  .push-settings__section-heading h3 { margin-top: 1px; font-size: .79rem; }
  .push-settings__section-heading p { margin-top: 3px; color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .push-settings__categories { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; transition: opacity .2s; }
  .push-settings__categories.is-disabled { opacity: .52; }
  .push-settings__toggle { display: grid; min-height: 67px; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; color: var(--text); background: rgb(255 255 255 / .014); cursor: pointer; }
  .push-settings__form > .push-settings__toggle { border: 1px solid var(--line); border-radius: 15px; background: rgb(255 255 255 / .018); }
  .push-settings__toggle + .push-settings__toggle { border-top: 1px solid var(--line); }
  .push-settings__toggle:hover { background: rgb(255 255 255 / .035); }
  .push-settings__toggle-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #dbeafe; background: rgb(66 133 244 / .09); }
  .push-settings__toggle-copy { display: grid; min-width: 0; gap: 3px; }
  .push-settings__toggle-copy strong { font-size: .74rem; }
  .push-settings__toggle-copy small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
  .push-settings__toggle-control { position: relative; width: 46px; height: 27px; flex: 0 0 auto; }
  .push-settings__toggle-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .push-settings__toggle-control > span { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / .07); transition: border-color .2s, background .2s; }
  .push-settings__toggle-control > span::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 2px 7px rgb(0 0 0 / .35); content: ''; transition: transform .22s var(--ease), background .2s; }
  .push-settings__toggle-control input:checked + span { border-color: rgb(66 133 244 / .48); background: linear-gradient(120deg, #2563eb, #16834a); }
  .push-settings__toggle-control input:checked + span::after { background: white; transform: translateX(19px); }
  .push-settings__toggle-control input:focus-visible + span { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  .push-settings__toggle-control input:disabled + span { cursor: not-allowed; }
  [dir='rtl'] .push-settings__toggle-control > span::after { right: 3px; left: auto; }
  [dir='rtl'] .push-settings__toggle-control input:checked + span::after { transform: translateX(-19px); }
  .push-settings__device-status { display: grid; min-height: 53px; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgb(0 0 0 / .11); }
  .push-settings__device-status > span:last-child { display: grid; gap: 2px; }
  .push-settings__device-status strong { font-size: .7rem; }
  .push-settings__device-status small { color: var(--muted); font-size: .59rem; line-height: 1.35; }
  .push-settings__device-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px rgb(148 163 184 / .08); }
  .push-settings__device-status.is-success .push-settings__device-dot { background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / .09); }
  .push-settings__device-status.is-pending .push-settings__device-dot { background: #60a5fa; box-shadow: 0 0 0 4px rgb(96 165 250 / .1); }
  .push-settings__device-status.is-error .push-settings__device-dot { background: #fb7185; box-shadow: 0 0 0 4px rgb(251 113 133 / .1); }
  .push-settings__activate { width: 100%; min-height: 45px; }
  .push-settings__privacy { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: start; gap: 9px; padding: 12px 13px; border: 1px solid rgb(52 168 83 / .14); border-radius: 14px; color: #bbf7d0; background: rgb(52 168 83 / .045); }
  .push-settings__privacy p { color: var(--muted); font-size: .62rem; line-height: 1.5; }
  .push-settings__privacy strong { color: #bbf7d0; }
  .push-settings__feedback { min-height: 18px; color: var(--muted); font-size: .63rem; line-height: 1.4; }
  .push-settings__feedback:empty { display: none; }
  .push-settings__feedback.is-success { color: #86efac; }
  .push-settings__feedback.is-error { color: #fda4af; }
  .push-settings__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .push-settings__actions .button { min-width: 180px; }
}

@layer responsive {
  @media (max-width: 760px) {
    .overlay__panel--sheet.push-settings-modal { width: 100%; max-height: 94dvh; }
    .push-settings { gap: 15px; padding: 18px 13px max(20px, env(safe-area-inset-bottom)); }
    .push-settings__heading { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding-right: 37px; }
    .push-settings__heading-icon { width: 42px; height: 42px; border-radius: 13px; }
    .push-settings__heading h2 { font-size: 1.3rem; }
    .push-settings__heading p { font-size: .68rem; }
    .push-settings__section { padding: 10px; border-radius: 15px; }
    .push-settings__toggle { min-height: 63px; grid-template-columns: 35px minmax(0, 1fr) auto; gap: 8px; padding: 9px 8px; }
    .push-settings__toggle-icon { width: 35px; height: 35px; }
    .push-settings__toggle-copy strong { font-size: .69rem; }
    .push-settings__toggle-copy small { font-size: .57rem; }
    .push-settings__actions { align-items: stretch; flex-direction: column-reverse; }
    .push-settings__actions .button { width: 100%; min-width: 0; }
    .push-settings__actions .text-button { min-height: 38px; }
  }
}

/* Video replies to comments ---------------------------------------------
   The comment stays semantic metadata instead of being burnt into the
   uploaded pixels. Percent-based placement keeps it stable in every viewer. */
@layer components {
  .video-comment-sticker-layer {
    position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
  }
  .video-comment-sticker {
    position: absolute; top: var(--video-comment-y, 30%); left: var(--video-comment-x, 50%);
    display: grid; width: min(56%, 280px); min-width: 150px; max-width: calc(100% - 24px);
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 12px 9px 9px;
    border: 1px solid rgb(255 255 255 / .2); border-radius: 17px; color: #fff;
    background: rgb(10 12 17 / .78); box-shadow: 0 10px 30px rgb(0 0 0 / .32);
    backdrop-filter: blur(15px) saturate(125%); -webkit-backdrop-filter: blur(15px) saturate(125%);
    transform: translate(-50%, -50%) scale(var(--video-comment-scale, 1)); transform-origin: center;
  }
  .video-comment-sticker.is-editable {
    border-color: rgb(138 180 248 / .66); outline: 2px solid rgb(66 133 244 / .2); outline-offset: 2px;
    text-align: start; cursor: grab; touch-action: none; pointer-events: auto; user-select: none;
  }
  .video-comment-sticker.is-editable:active { cursor: grabbing; }
  .video-comment-sticker.is-editable:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 3px; }
  .video-comment-sticker__avatar.avatar { width: 34px; height: 34px; box-shadow: 0 3px 12px rgb(0 0 0 / .3); }
  .video-comment-sticker__copy { display: grid; min-width: 0; gap: 1px; line-height: 1.22; }
  .video-comment-sticker__copy strong {
    overflow: hidden; font-size: .62rem; font-weight: 820; text-overflow: ellipsis; white-space: nowrap;
  }
  .video-comment-sticker__copy > span {
    display: -webkit-box; overflow: hidden; color: rgb(255 255 255 / .91); font-size: .67rem;
    line-height: 1.28; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  }
  .video-comment-sticker.is-unavailable { width: auto; min-width: 190px; grid-template-columns: auto 1fr; opacity: .88; }
  .video-comment-sticker__placeholder {
    display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%;
    color: #dbeafe; background: rgb(66 133 244 / .2); font-weight: 900;
  }
  .video-comment-sticker-layer--readonly { z-index: 3; }
  .video-comment-sticker-layer--readonly .video-comment-sticker { pointer-events: none; }
  .video-comment-sticker-layer--readonly.is-compact .video-comment-sticker {
    width: min(62%, 210px); min-width: 120px; gap: 6px; padding: 6px 8px 6px 6px; border-radius: 13px;
  }
  .video-comment-sticker-layer--readonly.is-compact .video-comment-sticker__avatar.avatar { width: 27px; height: 27px; }
  .video-comment-sticker-layer--readonly.is-compact .video-comment-sticker__copy strong { font-size: .5rem; }
  .video-comment-sticker-layer--readonly.is-compact .video-comment-sticker__copy > span { font-size: .54rem; -webkit-line-clamp: 2; }

  .video-comment-sticker-editor__toolbar {
    position: absolute; right: 12px; bottom: 50px; left: 12px; z-index: 2; display: flex;
    align-items: center; justify-content: center; gap: 9px; color: white; pointer-events: auto;
  }
  .video-comment-sticker-editor__toolbar > span {
    max-width: min(62%, 280px); padding: 7px 10px; border-radius: 999px; color: rgb(255 255 255 / .84);
    background: rgb(5 7 11 / .72); font-size: .57rem; font-weight: 690; text-align: center;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .video-comment-sticker-editor__tool {
    display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 255 255 / .23);
    border-radius: 50%; color: white; background: rgb(5 7 11 / .8); box-shadow: 0 5px 16px rgb(0 0 0 / .25);
    font-size: 1rem; font-weight: 780; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .video-comment-sticker-editor__tool:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; }

  .video-comment-context {
    display: grid; min-width: 0; grid-template-columns: 36px auto minmax(0, 1fr); align-items: center; gap: 9px;
    padding: 10px; border: 1px solid rgb(138 180 248 / .22); border-radius: 17px;
    background: linear-gradient(135deg, rgb(66 133 244 / .11), rgb(52 168 83 / .045)), rgb(255 255 255 / .025);
  }
  .video-comment-context__mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #dbeafe; background: rgb(66 133 244 / .14); }
  .video-comment-context > .avatar { width: 36px; height: 36px; }
  .video-comment-context__copy { display: grid; min-width: 0; gap: 1px; }
  .video-comment-context__copy small { color: #8ab4f8; font-size: .52rem; font-weight: 790; letter-spacing: .06em; text-transform: uppercase; }
  .video-comment-context__copy strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  .video-comment-context__copy > span {
    display: -webkit-box; overflow: hidden; color: var(--text-soft); font-size: .63rem; line-height: 1.3;
    overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .video-comment-unavailable { display: grid; min-height: 100dvh; place-items: center; padding: 24px; }
  .video-comment-unavailable .empty-state { width: min(100%, 520px); }
  .video-comment-unavailable__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
}

@layer responsive {
  @media (max-width: 480px) {
    .video-comment-sticker { width: min(58%, 220px); min-width: 138px; gap: 7px; padding: 7px 9px 7px 7px; border-radius: 14px; }
    .video-comment-sticker__avatar.avatar { width: 30px; height: 30px; }
    .video-comment-sticker__copy strong { font-size: .57rem; }
    .video-comment-sticker__copy > span { font-size: .61rem; -webkit-line-clamp: 2; }
    .video-comment-sticker-editor__toolbar { bottom: 47px; }
    .video-comment-sticker-editor__toolbar > span { max-width: 58%; font-size: .52rem; }
    .video-comment-context { grid-template-columns: 32px auto minmax(0, 1fr); padding: 8px; border-radius: 14px; }
    .video-comment-context__mark, .video-comment-context > .avatar { width: 32px; height: 32px; }
  }

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

/* TV interaction chrome ---------------------------------------------------
   Keep the immersive rail icon-first and move playback controls onto the
   media itself. These rules are deliberately scoped to the five-tab TV
   section: shared links and the standalone content viewer retain their
   existing controls. */
@layer responsive {
  .video-viewer-page--section .post-action__label { display: none; }
  .video-viewer-page--section .post-action__count.post-action__label {
    display: block; max-width: 46px; color: white; font-size: .6rem; font-weight: 760;
    line-height: 1.05; text-align: center; text-shadow: 0 2px 9px rgb(0 0 0 / .86);
  }
  .video-viewer-page--section .feed-card--tv .post-actions { gap: 3px; }
  .video-viewer-page--section .feed-card--tv .post-actions__profile {
    display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; margin-top: 3px; padding: 2px;
    overflow: hidden; border-radius: 13px; background: var(--brand-spectrum);
    box-shadow: 0 5px 18px rgb(0 0 0 / .38); transition: transform .18s var(--ease);
  }
  .video-viewer-page--section .feed-card--tv .post-actions__profile > .avatar {
    width: 40px; height: 40px; border: 2px solid rgb(5 7 11 / .88); border-radius: 10px; object-fit: cover;
  }
  .video-viewer-page--section .feed-card--tv .post-actions__profile:hover { transform: scale(1.045); }
  .video-viewer-page--section .feed-card--tv .post-actions__profile:focus-visible {
    outline: 2px solid white; outline-offset: 3px;
  }
  .video-viewer-page--section .feed-card--tv .post-menu { bottom: 50px; }
  .video-viewer-page--section .feed-card--tv .follow-pill {
    min-height: 32px; margin-left: 2px; padding: 4px 10px; border-color: rgb(255 255 255 / .34);
    border-radius: 999px; background: rgb(5 8 13 / .24); font-size: .64rem; font-weight: 730;
    letter-spacing: .01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .video-viewer-page--section .feed-card--tv .follow-pill.is-following {
    border-color: rgb(255 255 255 / .16); background: rgb(5 8 13 / .12);
  }
  .video-viewer-page--section .feed-card--tv.feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand-mark {
    display: none;
  }
  .video-viewer-page--section .feed-card--tv.feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand {
    gap: 0;
  }

  .video-viewer-page--section .video-viewer__media-controls {
    position: absolute; top: 50%; left: 50%; z-index: 9; display: grid; justify-items: center; gap: 10px;
    opacity: 1; pointer-events: auto; transform: translate(-50%, -50%);
    transition: opacity .18s, transform .2s var(--ease);
  }
  .video-viewer-page--section .video-viewer__media-controls[hidden] { display: none; }
  .video-viewer-page--section .video-viewer__media-controls .video-viewer__play {
    position: static; top: auto; left: auto; width: 78px; height: 78px; opacity: 1;
    pointer-events: auto; transform: none;
  }
  .video-viewer-page--section .video-viewer__mute {
    display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(255 255 255 / .18);
    border-radius: 50%; color: white; background: rgb(0 0 0 / .36); box-shadow: 0 10px 32px rgb(0 0 0 / .25);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer;
  }
  .video-viewer-page--section .video-viewer__mute[hidden] { display: none; }
  .video-viewer-page--section .video-viewer__mute:hover { background: rgb(0 0 0 / .5); }
  .video-viewer-page--section .video-viewer__mute:focus-visible,
  .video-viewer-page--section .video-viewer__play:focus-visible { outline: 2px solid white; outline-offset: 3px; }
  .video-viewer-page--section .video-viewer__slide.is-playing .video-viewer__media-controls {
    opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.84);
  }
  .video-viewer-page--section .video-viewer__slide.is-play-blocked .video-viewer__media-controls {
    opacity: 1; pointer-events: auto; transform: translate(-50%, -50%);
  }

  @media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
    .video-viewer-page--section .post-action__count.post-action__label { display: block; font-size: .54rem; }
    .video-viewer-page--section .feed-card--tv .post-actions__profile { width: 36px; height: 36px; border-radius: 11px; }
    .video-viewer-page--section .feed-card--tv .post-actions__profile > .avatar { width: 32px; height: 32px; border-radius: 8px; }
    .video-viewer-page--section .video-viewer__media-controls { gap: 7px; }
    .video-viewer-page--section .video-viewer__media-controls .video-viewer__play { width: 62px; height: 62px; }
    .video-viewer-page--section .video-viewer__mute { width: 38px; height: 38px; }
  }
}

@layer motion {
  @media (hover: hover) and (pointer: fine) {
    .superadmin-entry__card { transition: transform .2s var(--ease), border-color .2s, background .2s; }
    .superadmin-entry__card:hover { transform: translateY(-3px); border-color: rgb(167 139 250 / .34); background: rgb(30 27 43 / .92); }
  }
}

/* Media-first creation studio -------------------------------------------
   The native inputs remain hidden: every permission and system picker is
   reached from an explicit, labelled control inside the studio. */
@layer pages {
  .page.create-studio {
    display: grid; width: 100%; max-width: 100%; min-width: 0; height: 100dvh; min-height: 100dvh; padding: 0; overflow: hidden;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; color: var(--text);
    overscroll-behavior-x: none;
    background:
      radial-gradient(circle at 12% 10%, rgb(66 133 244 / .13), transparent 32%),
      radial-gradient(circle at 88% 84%, rgb(52 168 83 / .065), transparent 30%),
      #080b10;
  }
  .create-studio__header {
    position: relative; z-index: 15; display: grid; width: 100%; max-width: 100%; min-width: 0; min-height: calc(68px + env(safe-area-inset-top));
    grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: end; gap: 12px;
    padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid rgb(255 255 255 / .075); background: rgb(8 11 16 / .9);
    backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%);
  }
  .create-studio__back { width: 44px; height: 44px; align-self: center; border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .065); }
  .create-studio__title { overflow: hidden; padding-bottom: 10px; font-size: clamp(.98rem, 2.2vw, 1.2rem); letter-spacing: -.02em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .create-studio__next { min-width: 96px; min-height: 44px; align-self: center; padding: 9px 18px; border-radius: 999px; color: #dbeafe; background: rgb(66 133 244 / .14); font-size: .73rem; font-weight: 820; pointer-events: auto; }
  .create-studio__next:not(:disabled) { color: white; background: var(--gradient); box-shadow: 0 9px 28px rgb(66 133 244 / .22); }
  .create-studio__next:disabled { opacity: .42; }
  .create-studio__next.is-hidden { display: none; }
  .create-studio__header-spacer { width: 44px; }

  .create-studio .create-composer { position: relative; width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
  .create-studio .create-composer > .inline-error {
    position: absolute; top: 12px; left: 50%; z-index: 30; width: min(520px, calc(100% - 28px));
    box-shadow: 0 16px 44px rgb(0 0 0 / .48); transform: translateX(-50%);
  }
  .create-studio__step { width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .create-studio__step[hidden] { display: none; }
  .create-studio__step:focus { outline: none; }
  .create-studio__step--media { padding: clamp(14px, 2.5vw, 28px); scroll-padding-bottom: 90px; }
  .create-studio__workspace { width: min(100%, 920px); max-width: 100%; min-width: 0; min-height: 100%; margin-inline: auto; }
  .create-studio__next-dock {
    position: sticky; right: 0; bottom: 0; z-index: 14; display: flex; width: min(100%, 920px); justify-content: flex-end;
    margin: -72px auto 0; padding: 14px max(2px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgb(8 11 16 / .88) 38%, rgb(8 11 16 / .98)); pointer-events: none;
  }
  .create-studio .composer-media {
    position: relative; display: grid; width: min(100%, 680px); max-width: 100%; min-width: 0; min-height: 0; align-content: start; gap: 12px;
    margin-inline: auto; padding-bottom: 18px;
  }
  .create-studio__library-heading { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; }
  .create-studio__library-heading > div { display: grid; min-width: 0; gap: 2px; }
  .create-studio__library-heading strong { font-size: .9rem; }
  .create-studio__library-heading small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .create-studio__select { min-height: 42px; flex: 0 0 auto; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: .68rem; }
  .create-studio__select.is-active { border-color: rgb(138 180 248 / .55); color: white; background: var(--gradient-soft); }

  .create-studio .upload-dropzone {
    width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: min(58dvh, 620px); gap: 5px; padding: clamp(24px, 5vw, 46px);
    border-style: solid; border-color: rgb(255 255 255 / .1); border-radius: 28px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / .025), transparent),
      radial-gradient(circle at 50% 44%, rgb(66 133 244 / .14), transparent 48%),
      #10151d;
    box-shadow: inset 0 1px rgb(255 255 255 / .055), 0 28px 75px rgb(0 0 0 / .26);
  }
  .create-studio__source-prompt {
    display: flex; width: 100%; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 0; border: 0; border-radius: 20px; color: inherit; background: transparent; font: inherit; cursor: pointer;
  }
  .create-studio__source-prompt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 8px; }
  .create-studio__source-prompt > span:not(.upload-dropzone__icon) { max-width: 390px; text-align: center; }
  .create-studio[data-create-mode="post"] .upload-dropzone,
  .create-studio[data-create-mode="post"] .upload-preview { aspect-ratio: 4 / 5; }
  .create-studio[data-create-mode="video"] .composer-media,
  .create-studio[data-create-mode="story"] .composer-media { width: min(100%, 470px); }
  .create-studio[data-create-mode="video"] .upload-dropzone,
  .create-studio[data-create-mode="video"] .upload-preview,
  .create-studio[data-create-mode="story"] .upload-dropzone { aspect-ratio: 9 / 16; min-height: 560px; }
  .create-studio[data-create-mode="audio"] .upload-dropzone { min-height: 260px; aspect-ratio: auto; }
  .create-studio__source-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
  .create-source-action { min-height: 46px; border-radius: 999px; }
  .create-source-action--capture { box-shadow: 0 12px 32px rgb(66 133 244 / .22); }
  .create-studio .upload-preview { width: 100%; max-width: 100%; min-width: 0; min-height: min(58dvh, 620px); grid-auto-rows: minmax(180px, 1fr); }
  .create-studio[data-create-mode="audio"] .upload-preview { min-height: 0; aspect-ratio: auto; }
  .create-studio .upload-item--single,
  .create-studio .upload-item--featured { min-height: min(58dvh, 620px); }
  .create-studio[data-create-mode="audio"] .upload-item--audio { min-height: 0; }
  .create-studio[data-create-mode="post"] .upload-preview { display: block; }
  .create-studio[data-create-mode="post"] .upload-item--featured { width: 100%; height: 100%; min-height: 100%; border-radius: 24px; }

  .create-studio__media-tray {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
    padding-bottom: 4px; touch-action: pan-y; isolation: isolate;
  }
  .create-studio__media-tray[hidden] { display: none; }
  .create-media-tile {
    position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; overflow: hidden;
    border: 1px solid rgb(255 255 255 / .1); border-radius: 5px; color: var(--text-soft);
    background: #14141b; cursor: pointer;
  }
  .create-media-tile--camera, .create-media-tile--library { align-content: center; gap: 7px; padding: 8px; }
  .create-media-tile--camera { background: radial-gradient(circle at 50% 42%, rgb(66 133 244 / .18), transparent 62%), #141922; }
  .create-media-tile--camera svg { width: clamp(25px, 7vw, 34px); height: clamp(25px, 7vw, 34px); }
  .create-media-tile--camera span, .create-media-tile--library span {
    overflow: hidden; max-width: 100%; color: var(--muted); font-size: clamp(.48rem, 1.8vw, .61rem);
    font-weight: 720; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  }
  .create-media-tile--selection { display: block; }
  .create-media-tile--selection.is-previewing { border-color: white; box-shadow: inset 0 0 0 2px white; }
  .create-media-tile__preview { width: 100%; height: 100%; padding: 0; background: transparent; cursor: pointer; }
  .create-media-tile__preview img { width: 100%; height: 100%; object-fit: cover; }
  .create-media-tile--device { display: block; padding: 0; }
  .create-media-tile--device img { width: 100%; height: 100%; object-fit: cover; }
  .create-media-tile--device.is-previewing {
    border-color: white; box-shadow: inset 0 0 0 2px white;
  }
  .create-media-tile__selected {
    position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; width: 24px; height: 24px;
    place-items: center; border: 1px solid rgb(255 255 255 / .7); border-radius: 50%; color: #071018;
    background: white; box-shadow: 0 3px 12px rgb(0 0 0 / .38); pointer-events: none;
  }
  .create-media-tile--status { align-content: center; gap: 7px; padding: 7px; color: var(--muted); font-size: .55rem; text-align: center; }
  .upload-item--device-suggestion {
    display: block; padding: 0; color: white; font: inherit; text-align: left; cursor: pointer;
  }
  .upload-item--device-suggestion::after {
    position: absolute; inset: auto 0 0; height: 24%; content: '';
    background: linear-gradient(transparent, rgb(0 0 0 / .48)); pointer-events: none;
  }
  .upload-item--device-suggestion .upload-item__device-type,
  .upload-item--device-suggestion .upload-item__device-expand {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgb(255 255 255 / .16); color: white; background: rgb(4 6 10 / .58);
    box-shadow: 0 5px 18px rgb(0 0 0 / .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .upload-item--device-suggestion .upload-item__device-type {
    top: 12px; left: 12px; gap: 5px; max-width: calc(100% - 72px); padding: 6px 9px; border-radius: 999px;
    font-size: .61rem; font-weight: 760;
  }
  .upload-item--device-suggestion .upload-item__device-type span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upload-item--device-suggestion .upload-item__device-expand {
    right: 12px; bottom: 12px; width: 39px; height: 39px; border-radius: 50%;
  }
  .upload-item--device-suggestion:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
  .create-media-tile__order {
    position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; width: 27px; height: 27px;
    place-items: center; border: 1px solid rgb(0 0 0 / .12); border-radius: 50%; color: #08080c;
    background: white; box-shadow: 0 3px 10px rgb(0 0 0 / .3); font-size: .68rem; font-weight: 850;
    pointer-events: none;
  }
  .create-media-tile__remove {
    position: absolute; right: 6px; bottom: 6px; z-index: 3; display: grid; width: 25px; height: 25px;
    place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: white;
    background: rgb(4 4 8 / .7); box-shadow: 0 3px 10px rgb(0 0 0 / .28); cursor: pointer; backdrop-filter: blur(8px);
  }
  .create-media-tile:focus-within, .create-media-tile:focus-visible { outline: 3px solid rgb(138 180 248 / .55); outline-offset: -3px; }

  .create-studio__step--details {
    padding: clamp(16px, 2.8vw, 34px) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    scroll-padding-bottom: 118px;
  }
  .create-studio__details-shell { display: grid; width: min(100%, 940px); gap: clamp(20px, 3.5vw, 40px); margin-inline: auto; }
  .create-studio__selection-summary {
    min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px;
    background: rgb(255 255 255 / .025); box-shadow: 0 22px 60px rgb(0 0 0 / .2);
  }
  .create-studio__details-media {
    position: relative; display: grid; width: 100%; aspect-ratio: 4 / 5; place-items: center; overflow: hidden;
    color: #dbeafe; background: radial-gradient(circle at 50% 42%, rgb(66 133 244 / .16), transparent 45%), #111720;
  }
  .create-studio__details-media > img, .create-studio__details-media > video { width: 100%; height: 100%; object-fit: cover; }
  .create-studio[data-create-mode="video"] .create-studio__details-media,
  .create-studio[data-create-mode="story"] .create-studio__details-media { aspect-ratio: 9 / 16; }
  .create-studio[data-create-mode="audio"] .create-studio__details-media { aspect-ratio: 4 / 5; }
  .create-studio__details-media-empty { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 19px; background: var(--gradient-soft); }
  .create-studio__details-audio { display: grid; max-width: 84%; justify-items: center; gap: 12px; color: white; text-align: center; }
  .create-studio__details-audio::before {
    width: clamp(112px, 42%, 170px); aspect-ratio: 1; border: 10px solid rgb(255 255 255 / .075); border-radius: 50%;
    background: repeating-radial-gradient(circle, #14131d 0 6px, #2a243b 7px 9px); box-shadow: 0 26px 55px rgb(0 0 0 / .34); content: "";
  }
  .create-studio__details-audio > svg { position: absolute; top: 41%; color: #8ab4f8; transform: translateY(-50%); }
  .create-studio__details-audio strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .create-studio__details-type {
    position: absolute; top: 12px; display: grid; min-height: 30px; place-items: center; border: 1px solid rgb(255 255 255 / .16);
    border-radius: 999px; color: white; background: rgb(4 4 8 / .62); box-shadow: 0 7px 18px rgb(0 0 0 / .2); backdrop-filter: blur(9px);
  }
  .create-studio__details-type { right: 12px; width: 30px; }
  .create-studio__selection-meta { display: grid; min-width: 0; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; }
  .create-studio__selection-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #dbeafe; background: var(--gradient-soft); }
  .create-studio__selection-meta > div { display: grid; min-width: 0; gap: 2px; }
  .create-studio__selection-meta strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .create-studio__selection-copy { color: var(--muted); font-size: .61rem; }
  .create-studio__selection-meta .button { min-height: 38px; padding: 7px 10px; font-size: .61rem; }
  .create-studio__selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .create-studio__edit-cover[data-cover-source="library"] { color: #dbeafe; border-color: rgb(138 180 248 / .35); }
  .create-studio__details-shell .composer-fields { width: 100%; max-width: 620px; margin-inline: auto; padding: 0 0 2px; }

  .create-studio__caption { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 11px; padding: 4px 1px 15px; border-bottom: 1px solid var(--line); }
  .create-studio__caption-field { position: relative; display: block; min-width: 0; }
  .create-studio__caption textarea {
    width: 100%; min-height: 94px; padding: 4px 5px 25px; resize: vertical; border: 0; outline: 0;
    color: var(--text); background: transparent; font-size: .82rem; line-height: 1.48; box-shadow: none;
  }
  .create-studio__caption textarea:focus { box-shadow: none; }
  .create-studio__caption textarea::placeholder { color: var(--faint); }
  .create-studio__caption .character-count { right: 5px; bottom: 2px; font-size: .58rem; }
  .hashtag-count { position: absolute; bottom: 2px; left: 5px; color: var(--muted); font-size: .58rem; font-weight: 760; letter-spacing: .02em; }
  .hashtag-count.is-limit { color: var(--violet-light); }

  .create-studio__primary-actions { display: grid; gap: 0; border-block: 1px solid var(--line); }
  .create-studio__primary-actions > * + * { border-top: 1px solid rgb(255 255 255 / .055); }
  .create-studio__primary-actions .people-picker { gap: 0; }
  .create-studio__primary-actions .people-picker__trigger {
    min-height: 62px; padding: 8px 1px; border: 0; border-radius: 0; background: transparent;
  }
  .create-studio__primary-actions .people-picker__trigger:hover,
  .create-studio__primary-actions .people-picker__trigger:focus-visible { background: rgb(255 255 255 / .035); transform: none; }
  .create-studio__primary-actions .people-picker__at { width: 39px; height: 39px; border-radius: 12px; font-size: 1rem; }
  .create-studio__primary-actions .people-picker__chips { padding: 0 1px 9px 51px; }
  .create-studio__option-row {
    display: grid; width: 100%; min-height: 62px; grid-template-columns: 40px minmax(0, 1fr) 20px;
    align-items: center; gap: 11px; padding: 8px 1px; color: var(--text); background: transparent;
    text-align: left; cursor: pointer;
  }
  .create-studio__option-row:hover, .create-studio__option-row:focus-visible { background: rgb(255 255 255 / .035); }
  .create-studio__option-row:focus-visible { outline: 2px solid rgb(138 180 248 / .4); outline-offset: -2px; }
  .create-studio__option-row > svg { color: var(--muted); }
  .place-picker__value { overflow: hidden; color: var(--muted); font-size: .61rem; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
  .place-picker__value.is-selected { color: #8ab4f8; }

  .create-studio__option { overflow: hidden; border-bottom: 1px solid var(--line); }
  .create-studio__option > summary {
    display: grid; min-height: 64px; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 11px;
    padding: 8px 1px; color: var(--text); cursor: pointer; list-style: none;
  }
  .create-studio__option > summary::-webkit-details-marker { display: none; }
  .create-studio__option > summary:hover, .create-studio__option > summary:focus-visible { background: rgb(255 255 255 / .035); }
  .create-studio__option > summary:focus-visible { outline: 2px solid rgb(138 180 248 / .4); outline-offset: -2px; }
  .create-studio__option > summary > svg { color: var(--muted); transition: transform .2s var(--ease); }
  .create-studio__option[open] > summary > svg { transform: rotate(180deg); }
  .create-studio__option-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #dbeafe; background: var(--gradient-soft); }
  .create-studio__option-copy { display: grid; min-width: 0; gap: 2px; }
  .create-studio__option-copy strong, .create-studio__option-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .create-studio__option-copy strong { font-size: .78rem; }
  .create-studio__option-state { color: var(--muted); font-size: .61rem; font-weight: 540; }
  .create-studio__option-state.is-selected { color: #8ab4f8; }
  .create-studio__option-content { padding: 2px 1px 15px 50px; }
  .create-studio__option--music .music-picker { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .018); }
  .create-studio__option--music .music-picker > .music-picker__heading { display: none; }
  .create-studio__advanced-content { display: grid; gap: 17px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .018); }
  .create-studio__advanced-content > :last-child { padding-bottom: 0; border-bottom: 0; }
  .create-studio__advanced-content .composer-settings { grid-template-columns: 1fr; }

  .create-studio__publish-bar {
    position: sticky; bottom: 0; z-index: 12; margin-top: 0; padding: 12px;
    border: 1px solid rgb(255 255 255 / .09); border-radius: 18px;
    background: rgb(12 17 24 / .9); box-shadow: 0 -12px 38px rgb(0 0 0 / .28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .create-studio__publish-bar .composer-hint { display: flex; align-items: center; gap: 6px; }
  .create-studio__publish-bar .composer-hint svg { flex: 0 0 auto; color: #8ab4f8; }
  .create-studio__publish-bar .button { min-width: min(250px, 45%); }

  .create-studio__modes {
    position: relative; z-index: 16; width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
    padding: 9px max(12px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid rgb(255 255 255 / .08); background: linear-gradient(180deg, rgb(15 20 28 / .94), rgb(7 10 15 / .99));
    box-shadow: 0 -18px 50px rgb(0 0 0 / .3); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  }
  .create-studio__modes-track {
    display: flex; width: 100%; max-width: 100%; min-width: 0; align-items: center; gap: 6px; margin-inline: auto;
    overflow-x: auto; overflow-y: hidden; padding: 2px; scrollbar-width: none; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch;
  }
  .create-studio__modes-track::-webkit-scrollbar { display: none; }
  .create-studio__mode { display: inline-flex; min-width: max-content; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 820; letter-spacing: .035em; scroll-snap-align: center; transition: border-color .2s, color .2s, background .2s, transform .2s; }
  .create-studio__mode:hover, .create-studio__mode:focus-visible { color: white; background: rgb(255 255 255 / .055); }
  .create-studio__mode:focus-visible { outline: 3px solid rgb(66 133 244 / .38); outline-offset: 1px; }
  .create-studio__mode.is-active { border-color: rgb(138 180 248 / .34); color: white; background: linear-gradient(130deg, rgb(66 133 244 / .25), rgb(52 168 83 / .09)); box-shadow: inset 0 1px rgb(255 255 255 / .08); }

  .create-studio--mix .create-studio__step--mix {
    min-height: 0; padding: clamp(14px, 2.5vw, 28px); overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  }
  .create-studio__embedded { width: min(100%, 1180px); max-width: none; min-height: max-content; margin-inline: auto; padding: 0 0 28px; }

  .video-cover-editor {
    position: fixed; inset: 0; z-index: 120; display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
    color: var(--text); background: #080b10;
  }
  .video-cover-editor[hidden] { display: none; }
  .video-cover-editor__header {
    display: grid; min-height: calc(70px + env(safe-area-inset-top)); grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: end; gap: 10px;
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line); background: rgb(8 11 16 / .94); backdrop-filter: blur(20px);
  }
  .video-cover-editor__header h2 { align-self: center; overflow: hidden; font-size: 1rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .video-cover-editor__close, .video-cover-editor__confirm { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .video-cover-editor__body {
    display: grid; width: min(100%, 760px); min-height: 0; align-content: start; justify-items: center; gap: 17px; margin-inline: auto;
    overflow-x: hidden; overflow-y: auto; padding: 24px max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .video-cover-editor__instructions { max-width: 620px; color: var(--muted); font-size: .76rem; line-height: 1.5; text-align: center; }
  .video-cover-editor__stage {
    position: relative; width: min(64vw, 360px); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgb(255 255 255 / .12);
    border-radius: 25px; background: radial-gradient(circle at 50% 42%, rgb(66 133 244 / .15), transparent 48%), #10151d;
    box-shadow: 0 26px 70px rgb(0 0 0 / .36);
  }
  .video-cover-editor__preview-image { width: 100%; height: 100%; object-fit: cover; }
  .video-cover-editor__preview-image:not([src]) { visibility: hidden; }
  .video-cover-editor__status { min-height: 20px; color: var(--muted); font-size: .67rem; text-align: center; }
  .video-cover-editor__status.is-error { color: #fca5a5; }
  .video-cover-editor__frames {
    display: flex; width: 100%; max-width: 700px; gap: 5px; overflow-x: auto; padding: 3px; border-radius: 13px;
    background: rgb(255 255 255 / .035); scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .video-cover-editor__frames::-webkit-scrollbar { display: none; }
  .video-cover-editor__frame {
    position: relative; min-width: 82px; aspect-ratio: 9 / 16; flex: 1 0 82px; overflow: hidden; padding: 0; border: 2px solid transparent;
    border-radius: 10px; background: #151922; scroll-snap-align: center; cursor: pointer;
  }
  .video-cover-editor__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }
  .video-cover-editor__frame.is-selected { border-color: #4f6bff; box-shadow: 0 0 0 2px rgb(79 107 255 / .22); }
  .video-cover-editor__frame.is-selected img { opacity: 1; }
  .video-cover-editor__library { width: min(100%, 700px); min-height: 50px; border-radius: 15px; }
}

@layer responsive {
  .page.create-studio { width: 100%; max-width: 100%; min-width: 0; padding: 0; }

  @media (max-width: 760px) {
    .page.create-studio { width: 100%; max-width: 100%; min-width: 0; min-height: 100dvh; padding: 0; }
    .create-studio__header {
      grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 7px;
      padding-inline-start: max(12px, env(safe-area-inset-left));
      padding-inline-end: max(12px, env(safe-area-inset-right));
    }
    .create-studio__title { font-size: .98rem; }
    .create-studio__next { min-width: 90px; min-height: 42px; padding-inline: 14px; }
    .create-studio__step--media { padding: 10px 10px 16px; }
    .create-studio .composer-media { gap: 9px; padding-bottom: 8px; }
    .create-studio__library-heading { padding-inline: 3px; }
    .create-studio__library-heading small { max-width: 58vw; }
    .create-studio .upload-dropzone { min-height: min(58dvh, 520px); border-radius: 22px; }
    .create-studio[data-create-mode="video"] .upload-dropzone,
    .create-studio[data-create-mode="video"] .upload-preview,
    .create-studio[data-create-mode="story"] .upload-dropzone { min-height: min(62dvh, 590px); }
    .create-studio .upload-preview { min-height: min(58dvh, 520px); grid-auto-rows: minmax(148px, 1fr); }
    .create-studio .upload-item--single,
    .create-studio .upload-item--featured { min-height: min(58dvh, 520px); }
    /* A tall compact viewport used to let min-height transfer through the
       4:5 aspect ratio as an implicit min-width. WebKit then widened the
       complete studio and the header/picker appeared clipped on both sides.
       Keep the Post stage width-driven: its 4:5 ratio determines the height. */
    .create-studio[data-create-mode="post"] .upload-dropzone,
    .create-studio[data-create-mode="post"] .upload-preview,
    .create-studio[data-create-mode="post"] .upload-item--featured { min-height: 0; }
    .create-studio__source-actions { width: 100%; flex-direction: column; }
    .create-source-action { width: 100%; }
    .create-studio__step--details { padding-top: 12px; }
    .create-studio__details-shell { gap: 14px; }
    .create-studio__selection-summary { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .create-studio__details-media { width: min(58vw, 238px); margin-inline: auto; border: 1px solid var(--line); border-radius: 18px; }
    .create-studio__selection-meta { padding: 9px 0 2px; }
    .create-studio__selection-icon { width: 38px; height: 38px; }
    .create-studio__selection-meta .button { width: auto; }
    .create-studio__selection-actions { align-items: stretch; flex-direction: column; }
    .create-studio__selection-actions .button { min-width: 112px; }
    .create-studio__details-shell .composer-fields { gap: 15px; }
    .create-studio__option-content { padding-left: 0; }
    .create-studio__option--music .music-picker { padding: 10px; }
    .create-studio__advanced-content { padding: 11px; }
    .create-studio__publish-bar { padding: 10px; border-radius: 16px; }
    .create-studio__publish-bar .composer-hint { display: none; }
    .create-studio__publish-bar .button { width: 100%; min-width: 0; }
    .create-studio__modes { padding-inline: 8px; }
    .create-studio__modes-track { justify-content: flex-start; margin-inline: 0; }
    .create-studio__mode { min-height: 44px; padding-inline: 14px; }
    .create-studio--mix .create-studio__step--mix { padding: 10px; }
    .video-cover-editor__body { padding-top: 18px; }
    .video-cover-editor__stage { width: min(68vw, 330px); }
    .video-cover-editor__frame { min-width: 70px; flex-basis: 70px; }
  }

  @media (min-width: 761px) {
    .create-studio__header { padding-inline: clamp(24px, 4vw, 64px); }
    .create-studio__details-shell { grid-template-columns: minmax(250px, .72fr) minmax(420px, 1.28fr); align-items: start; }
    .create-studio__selection-summary { position: sticky; top: 0; }
    .create-studio .composer-media { position: relative; top: auto; align-self: auto; }
  }
}

@layer components {
  .place-picker-modal { overflow-x: hidden; }
  .place-picker-sheet { display: grid; min-height: 0; gap: 14px; }
  .place-picker-sheet__heading { display: flex; align-items: flex-start; gap: 12px; padding-right: 42px; }
  .place-picker-sheet__heading-icon, .place-picker-result__icon {
    display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px;
    color: #dbeafe; background: var(--gradient-soft);
  }
  .place-picker-sheet__heading > div { display: grid; gap: 3px; }
  .place-picker-sheet__heading h2 { font-size: 1rem; }
  .place-picker-sheet__heading p, .place-picker-sheet__status, .place-picker-sheet__manual p { color: var(--muted); font-size: .67rem; line-height: 1.45; }
  .place-picker-sheet__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .place-picker-sheet__search .search-box { min-width: 0; }
  .place-picker-sheet__search-button { min-width: 88px; padding-inline: 14px; }
  .place-picker-sheet__status { min-height: 1.2em; }
  .place-picker-sheet__results {
    display: grid; min-height: 120px; max-height: min(42dvh, 370px); gap: 2px; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-y: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;
  }
  .place-picker-result, .place-picker-sheet__current {
    display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px;
    padding: 8px; border-radius: 14px; color: var(--text); background: transparent; text-align: left;
  }
  .place-picker-result { width: 100%; cursor: pointer; }
  .place-picker-result:hover, .place-picker-result:focus-visible { background: rgb(255 255 255 / .045); }
  .place-picker-result:focus-visible { outline: 2px solid rgb(138 180 248 / .42); outline-offset: -2px; }
  .place-picker-result__icon { width: 39px; height: 39px; }
  .place-picker-result__copy { display: grid; min-width: 0; gap: 2px; }
  .place-picker-result__copy strong, .place-picker-result__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .place-picker-result__copy strong { font-size: .74rem; }
  .place-picker-result__copy small { color: var(--muted); font-size: .6rem; }
  .place-picker-result > svg { color: var(--faint); }
  .place-picker-result--skeleton { pointer-events: none; }
  .place-picker-result--skeleton .place-picker-result__icon { background: var(--surface-3); }
  .place-picker-sheet__empty { display: grid; min-height: 132px; place-content: center; justify-items: center; gap: 6px; padding: 18px; color: var(--muted); text-align: center; }
  .place-picker-sheet__empty strong { color: var(--text-soft); font-size: .76rem; }
  .place-picker-sheet__empty p { max-width: 330px; font-size: .65rem; line-height: 1.45; }
  .place-picker-sheet__current { border: 1px solid rgb(138 180 248 / .2); background: rgb(66 133 244 / .075); }
  .place-picker-sheet__current .button { min-height: 38px; padding: 7px 9px; font-size: .61rem; }
  .place-picker-sheet__manual { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
  .place-picker-sheet__manual > div:first-child { display: grid; gap: 2px; }
  .place-picker-sheet__manual > div:first-child strong { font-size: .74rem; }
  .place-picker-sheet__manual-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .place-picker-sheet__manual-controls input {
    width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 12px; outline: 0;
    color: var(--text); background: var(--surface-2);
  }
  .place-picker-sheet__manual-controls input:focus {
    border-color: rgb(138 180 248 / .5); box-shadow: 0 0 0 3px rgb(66 133 244 / .13);
  }
  .place-picker-sheet__manual-controls [aria-invalid="true"] { border-color: #fb7185; box-shadow: 0 0 0 3px rgb(251 113 133 / .12); }
  .place-picker-sheet__manual-controls .button { min-width: max-content; }
  .place-picker-sheet__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--faint); font-size: .56rem; }
  .place-picker-sheet__footer a { color: #8ab4f8; }

  @media (max-width: 560px) {
    .place-picker-sheet { padding: 22px 16px max(18px, env(safe-area-inset-bottom)); }
    .place-picker-sheet__search, .place-picker-sheet__manual-controls { grid-template-columns: 1fr; }
    .place-picker-sheet__search-button, .place-picker-sheet__manual-controls .button { width: 100%; }
    .place-picker-sheet__results { max-height: min(34dvh, 290px); }
  }

  @media (min-width: 561px) {
    .place-picker-sheet { padding: 30px 24px max(24px, env(safe-area-inset-bottom)); }
  }

  .mixvoice-admin__body { display: grid; gap: 17px; }
  .mixvoice-admin__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .mixvoice-admin__stats article { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 15px; background: rgb(255 255 255 / .025); }
  .mixvoice-admin__stats article > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #ddd6fe; background: rgb(139 92 246 / .12); }
  .mixvoice-admin__stats article > div { display: grid; min-width: 0; gap: 2px; }
  .mixvoice-admin__stats strong { font-size: .84rem; }
  .mixvoice-admin__stats small { overflow: hidden; color: var(--muted); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
  .mixvoice-admin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 11px; }
  .mixvoice-admin__group { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 17px; background: rgb(255 255 255 / .018); }
  .mixvoice-admin__group h3 { font-size: .7rem; }
  .mixvoice-admin__checks { display: flex; flex-wrap: wrap; gap: 6px; }
  .mixvoice-admin__checks label { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .56rem; }
  .mixvoice-admin__checks input { accent-color: #8b5cf6; }
  .mixvoice-admin__capability { display: flex; align-items: center; gap: 7px; padding: 10px; border-radius: 12px; font-size: .58rem; }
  .mixvoice-admin__capability.is-ready { color: #86efac; background: rgb(34 197 94 / .08); }
  .mixvoice-admin__capability.is-offline { color: #fde68a; background: rgb(251 191 36 / .07); }
  .mixvoice-admin__actions { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
  .mixvoice-admin__actions small { margin-right: auto; color: var(--muted); font-size: .55rem; }
  @media (max-width: 800px) {
    .mixvoice-admin__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mixvoice-admin__grid { grid-template-columns: 1fr; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .create-studio__mode, .create-studio__next { transition: none; }
  }
}

/* Post-registration connection setup */
.connection-onboarding {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: var(--text);
  background:
    radial-gradient(circle at 15% 5%, rgb(66 133 244 / .16), transparent 34rem),
    radial-gradient(circle at 90% 42%, rgb(52 168 83 / .07), transparent 32rem),
    #080b10;
  isolation: isolate;
}
.connection-onboarding__glow { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgb(255 255 255 / .025), transparent 40%); }
.connection-onboarding__header,
.connection-onboarding__progress,
.connection-onboarding__main { width: min(100%, 920px); margin-inline: auto; }
.connection-onboarding__header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 18px; }
.connection-onboarding__logo { display: block; width: 104px; height: 28px; object-fit: contain; object-position: left center; }
.connection-onboarding__skip { min-height: 40px; padding: 0 4px; border: 0; color: var(--text-soft); background: transparent; font: inherit; font-size: .76rem; font-weight: 760; cursor: pointer; }
.connection-onboarding__skip:hover { color: white; }
.connection-onboarding__progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding-block: 22px 10px; }
.connection-onboarding__progress i { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .1); transition: background .22s ease, box-shadow .22s ease; }
.connection-onboarding__progress i.is-active { background: var(--gradient); box-shadow: 0 0 14px rgb(66 133 244 / .3); }
.connection-onboarding__main { padding-block: clamp(16px, 4vh, 42px); }
.connection-onboarding__step { display: grid; gap: 24px; width: min(100%, 780px); margin-inline: auto; }
.connection-onboarding__intro { display: grid; justify-items: center; gap: 10px; text-align: center; }
.connection-onboarding__intro .eyebrow { color: #8ab4f8; }
.connection-onboarding__intro h1 { max-width: 690px; font-size: clamp(2rem, 6vw, 3.5rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.connection-onboarding__intro p { max-width: 610px; color: var(--text-soft); font-size: clamp(.83rem, 2vw, .98rem); line-height: 1.6; text-wrap: balance; }
.connection-onboarding__icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(255 255 255 / .13); border-radius: 19px; color: #dbeafe; background: linear-gradient(145deg, rgb(66 133 244 / .25), rgb(52 168 83 / .1)); box-shadow: 0 15px 45px rgb(0 0 0 / .28); }
.connection-onboarding__selection-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .7rem; }
.connection-onboarding__counter { color: #dbeafe; font-weight: 790; }
.connection-interest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.connection-interest { position: relative; display: grid; min-height: 104px; place-items: center; align-content: center; gap: 9px; padding: 14px 8px; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 20px; color: var(--text-soft); background: rgb(255 255 255 / .045); font: inherit; font-size: .76rem; font-weight: 760; cursor: pointer; transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease; }
.connection-interest:hover { transform: translateY(-2px); border-color: rgb(138 180 248 / .36); color: white; }
.connection-interest.is-selected { border-color: rgb(138 180 248 / .68); color: white; background: linear-gradient(145deg, rgb(66 133 244 / .28), rgb(52 168 83 / .11)); box-shadow: 0 12px 28px rgb(10 55 125 / .2); }
.connection-interest__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: #8ab4f8; background: rgb(255 255 255 / .07); }
.connection-interest__check { position: absolute; top: 9px; right: 9px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #080b10; background: #8ab4f8; opacity: 0; transform: scale(.72); transition: opacity .18s ease, transform .18s ease; }
.connection-interest.is-selected .connection-interest__check { opacity: 1; transform: scale(1); }
.connection-onboarding__actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 3px; }
.connection-onboarding__actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 178px; }
.connection-onboarding__actions--split { justify-content: space-between; }
.connection-onboarding__actions--stack { display: grid; justify-content: center; width: min(100%, 430px); margin-inline: auto; }
.connection-onboarding__actions--stack .button { width: 100%; }
.connection-onboarding__actions--stack .text-button { justify-self: center; }
.connection-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.connection-person { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border: 1px solid rgb(255 255 255 / .09); border-radius: 19px; background: rgb(255 255 255 / .04); }
.connection-person__identity { display: flex; min-width: 0; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.connection-person__identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.connection-person__identity strong { display: flex; min-width: 0; align-items: center; gap: 5px; font-size: .78rem; }
.connection-person__identity strong > span:first-child,
.connection-person__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-person__identity small { color: var(--muted); font-size: .63rem; }
.connection-person__identity .connection-person__meta { color: #8ab4f8; font-size: .58rem; }
.connection-person__follow { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; font-size: .66rem; }
.connection-person .verified-badge { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: white; background: var(--brand-blue); }
.connection-onboarding__people-tools { display: flex; justify-content: center; }
.connection-onboarding__people-tools .text-button { display: inline-flex; align-items: center; gap: 7px; }
.connection-onboarding__empty,
.connection-onboarding__load-error { display: grid; justify-items: center; gap: 9px; padding: 32px; color: var(--text-soft); text-align: center; }
.connection-onboarding__empty strong,
.connection-onboarding__load-error h1 { color: var(--text); }
.connection-onboarding__step--invite { width: min(100%, 650px); }
.connection-invite-card { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid rgb(138 180 248 / .22); border-radius: 23px; background: linear-gradient(135deg, rgb(66 133 244 / .13), rgb(255 255 255 / .035)); }
.connection-invite-card__mark { display: grid; flex: 0 0 auto; width: 64px; height: 64px; place-items: center; border-radius: 20px; color: #8ab4f8; background: rgb(255 255 255 / .07); }
.connection-invite-card strong { display: block; margin-bottom: 5px; font-size: .88rem; }
.connection-invite-card p { color: var(--text-soft); font-size: .72rem; line-height: 1.5; }
.connection-onboarding--loading { display: grid; place-items: center; }
.connection-onboarding__load-error { min-height: 100dvh; align-content: center; }
.activation-flow__status { min-height: 1.2em; color: var(--text-soft); font-size: .68rem; text-align: center; }
.activation-flow__async { display: grid; gap: 14px; }
.activation-flow__loading { display: flex; min-height: 140px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .72rem; }
.activation-search { position: relative; display: flex; align-items: center; }
.activation-search > svg { position: absolute; left: 16px; z-index: 1; color: var(--muted); pointer-events: none; }
.activation-search input { width: 100%; min-height: 52px; padding: 0 50px 0 48px; border: 1px solid rgb(255 255 255 / .11); border-radius: 17px; color: var(--text); background: rgb(255 255 255 / .055); font: inherit; font-size: .8rem; outline: 0; }
.activation-search input:focus { border-color: rgb(138 180 248 / .6); box-shadow: 0 0 0 3px rgb(66 133 244 / .15); }
.activation-search.is-disabled { opacity: .62; }
.activation-search input:disabled { cursor: not-allowed; }
.activation-search__clear { position: absolute; right: 7px; width: 38px; height: 38px; }
.activation-search__results:empty { display: none; }
.activation-contact-picker__wrap { display: grid; justify-items: center; gap: 8px; }
.activation-contact-picker__wrap small { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: .6rem; text-align: center; }
.activation-contact-picker { display: inline-flex; align-items: center; gap: 8px; }
.activation-contact-preferences { min-height: 48px; }
.activation-contact-preferences > .activation-flow__loading { min-height: 72px; }
.activation-contact-preferences__error { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .63rem; text-align: center; }
.activation-contact-privacy { overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: 18px; background: rgb(255 255 255 / .03); }
.activation-contact-privacy summary { display: grid; min-height: 56px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.activation-contact-privacy summary::-webkit-details-marker { display: none; }
.activation-contact-privacy summary > svg:first-child { color: #8ab4f8; }
.activation-contact-privacy summary > svg:last-child { color: var(--muted); transition: transform .18s ease; }
.activation-contact-privacy[open] summary > svg:last-child { transform: rotate(180deg); }
.activation-contact-privacy summary > span { display: grid; gap: 2px; }
.activation-contact-privacy summary strong { font-size: .7rem; }
.activation-contact-privacy summary small { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.activation-contact-privacy__body { display: grid; gap: 1px; padding: 0 8px 8px; }
.activation-contact-preference { display: grid; width: 100%; min-height: 66px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 10px 11px; border: 0; border-radius: 12px; color: var(--text); background: rgb(255 255 255 / .025); font: inherit; text-align: left; cursor: pointer; }
.activation-contact-preference + .activation-contact-preference { margin-top: 5px; }
.activation-contact-preference:hover:not(:disabled) { background: rgb(255 255 255 / .05); }
.activation-contact-preference:focus-visible { outline: 3px solid rgb(66 133 244 / .3); outline-offset: -2px; }
.activation-contact-preference:disabled { opacity: .52; cursor: not-allowed; }
.activation-contact-preference__copy { display: grid; gap: 3px; }
.activation-contact-preference__copy strong { font-size: .66rem; }
.activation-contact-preference__copy small { color: var(--muted); font-size: .58rem; line-height: 1.45; }
.activation-contact-preference__switch { position: relative; width: 42px; height: 24px; padding: 3px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: rgb(255 255 255 / .075); transition: background .18s ease, border-color .18s ease; }
.activation-contact-preference__switch i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--text-soft); transition: transform .18s ease, background .18s ease; }
.activation-contact-preference[aria-checked="true"] .activation-contact-preference__switch { border-color: transparent; background: var(--gradient); }
.activation-contact-preference[aria-checked="true"] .activation-contact-preference__switch i { background: white; transform: translateX(18px); }
.activation-arrival { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px 16px; padding: 15px 16px; border: 1px solid rgb(138 180 248 / .22); border-radius: 18px; background: linear-gradient(135deg, rgb(66 133 244 / .14), rgb(52 168 83 / .055)); }
.activation-arrival__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #8ab4f8; background: rgb(255 255 255 / .07); }
.activation-arrival__copy { display: grid; min-width: 0; gap: 3px; }
.activation-arrival__copy strong { font-size: .72rem; }
.activation-arrival__copy p { color: var(--text-soft); font-size: .61rem; line-height: 1.45; }
.activation-arrival__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.activation-arrival__actions .button { min-height: 38px; padding: 7px 11px; font-size: .61rem; }
.activation-arrival__feedback { grid-column: 2 / -1; min-height: 1em; color: #dbeafe; font-size: .61rem; line-height: 1.4; }
.activation-arrival.is-complete { border-color: rgb(134 239 172 / .2); background: linear-gradient(135deg, rgb(34 197 94 / .08), rgb(255 255 255 / .025)); }
.activation-interests { overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: 18px; background: rgb(255 255 255 / .035); }
.activation-interests summary { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 12px 15px; cursor: pointer; font-size: .72rem; font-weight: 760; list-style: none; }
.activation-interests summary::-webkit-details-marker { display: none; }
.activation-interests__counter { margin-left: auto; color: #8ab4f8; font-size: .62rem; font-weight: 700; }
.activation-interests__body { display: grid; gap: 12px; padding: 0 15px 15px; }
.activation-interests__body > p { color: var(--muted); font-size: .65rem; }
.activation-interest-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.activation-interest { min-height: 34px; padding: 6px 11px; border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; color: var(--text-soft); background: rgb(255 255 255 / .045); font: inherit; font-size: .62rem; cursor: pointer; }
.activation-interest.is-selected { border-color: rgb(138 180 248 / .62); color: white; background: rgb(66 133 244 / .24); }
.activation-invite-card { align-items: center; }
.activation-invite-card > div { min-width: 0; }
.activation-invite-card span { display: block; color: var(--muted); font-size: .66rem; }
.activation-invite-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.activation-invite-actions .button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; }
.activation-invite-link { overflow: hidden; padding: 10px 13px; border-radius: 12px; color: #dbeafe; background: rgb(255 255 255 / .045); font-size: .66rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.connection-onboarding__step--profile { width: min(100%, 650px); }
.activation-profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid rgb(138 180 248 / .2); border-radius: 24px; background: linear-gradient(145deg, rgb(66 133 244 / .12), rgb(255 255 255 / .035)); }
.activation-profile-card > div { display: grid; min-width: 0; align-content: center; gap: 3px; }
.activation-profile-card strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.activation-profile-card > div > span { color: var(--muted); font-size: .68rem; }
.activation-profile-card p { margin-top: 7px; color: var(--text-soft); font-size: .69rem; line-height: 1.45; }
.activation-profile-checklist { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.activation-profile-checklist li { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 12px; color: var(--text-soft); background: rgb(255 255 255 / .045); font-size: .65rem; }
.activation-profile-checklist svg { color: #86efac; }

@media (max-width: 720px) {
  .connection-onboarding { padding-inline: max(14px, env(safe-area-inset-left)); }
  .connection-interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connection-people { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .connection-onboarding__main { padding-top: 12px; }
  .connection-onboarding__step { gap: 19px; }
  .connection-onboarding__intro h1 { font-size: clamp(1.85rem, 10vw, 2.55rem); }
  .connection-onboarding__intro p { font-size: .79rem; }
  .connection-interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .connection-interest { min-height: 89px; border-radius: 17px; }
  .connection-onboarding__actions--split { display: grid; grid-template-columns: .72fr 1.28fr; }
  .connection-onboarding__actions .button { min-width: 0; }
  .connection-invite-card { align-items: flex-start; padding: 17px; }
  .connection-invite-card__mark { width: 50px; height: 50px; border-radius: 16px; }
  .connection-onboarding__progress { gap: 5px; }
  .activation-invite-actions { display: grid; grid-template-columns: 1fr; }
  .activation-invite-actions .button { justify-content: center; width: 100%; }
  .activation-arrival { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 14px; }
  .activation-arrival__actions, .activation-arrival__feedback { grid-column: 1 / -1; }
  .activation-arrival__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .activation-arrival__actions .button { min-width: 0; }
  .activation-profile-card { padding: 17px; }
  .activation-profile-checklist { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .connection-interest, .connection-interest__check, .connection-onboarding__progress i,
  .activation-contact-privacy summary > svg:last-child, .activation-contact-preference__switch, .activation-contact-preference__switch i { transition: none; }
}

/* Superadmin registration/onboarding configuration */
.registration-admin { display: grid; gap: 18px; }
.registration-admin__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.registration-admin__heading p { max-width: 720px; color: var(--text-soft); }
.registration-admin__badge { display: inline-flex; flex: 0 0 auto; min-height: 40px; align-items: center; gap: 7px; padding-inline: 13px; border: 1px solid rgb(196 181 253 / .24); border-radius: 999px; color: #ddd6fe; background: rgb(124 58 237 / .12); font-size: .68rem; font-weight: 800; }
.registration-admin__guardrail { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid rgb(134 239 172 / .13); border-radius: 15px; color: var(--text-soft); background: rgb(34 197 94 / .045); font-size: .66rem; line-height: 1.5; }
.registration-admin__guardrail svg { flex: 0 0 auto; color: #86efac; }
.registration-admin__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; }
.registration-admin__loading, .registration-admin__error { grid-column: 1 / -1; display: flex; min-height: 140px; align-items: center; justify-content: center; gap: 10px; }
.registration-admin__form, .registration-admin__funnel { display: grid; align-content: start; gap: 14px; padding: clamp(15px, 2vw, 22px); border: 1px solid var(--line); border-radius: 20px; background: rgb(255 255 255 / .025); }
.registration-admin__form h3, .registration-admin__funnel h3 { font-size: .86rem; }
.registration-admin__toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.registration-admin__toggle { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .07); border-radius: 13px; background: rgb(255 255 255 / .025); }
.registration-admin__toggle strong { display: block; font-size: .64rem; line-height: 1.35; }
.registration-admin__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.registration-admin__numbers .field input { min-height: 42px; }
.registration-admin__invite textarea { width: 100%; min-height: 88px; resize: vertical; }
.registration-admin__feedback { min-height: 1em; }
.registration-admin__actions { display: flex; justify-content: flex-end; }
.registration-admin__funnel-list { display: grid; gap: 12px; }
.registration-admin__funnel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; }
.registration-admin__funnel-row > span:first-child { color: var(--text-soft); font-size: .65rem; }
.registration-admin__funnel-row strong { font-size: .72rem; }
.registration-admin__funnel-track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .07); }
.registration-admin__funnel-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.registration-admin__completion, .registration-admin__empty { color: var(--muted); font-size: .64rem; }

@media (max-width: 900px) {
  .registration-admin__body { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .registration-admin__heading { display: grid; }
  .registration-admin__badge { justify-self: start; }
  .registration-admin__toggles, .registration-admin__numbers { grid-template-columns: 1fr; }
  .registration-admin__toggle { min-height: 52px; }
}

/* MixVoice conversations and owner Studio ------------------------------ */
@layer pages {
  .mixvoice-page, .mixvoice-studio { width: min(100%, 1180px); padding: clamp(14px, 3vw, 34px); }
  .mixvoice-page__header, .mixvoice-studio__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 22px; }
  .mixvoice-page__header > div:nth-child(2), .mixvoice-studio__header > div { min-width: 0; }
  .mixvoice-page__header h1, .mixvoice-studio__header h1 { overflow: hidden; margin-top: 2px; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
  .mixvoice-page__header p, .mixvoice-studio__header p { margin-top: 4px; color: var(--muted); font-size: .66rem; line-height: 1.5; }
  .mixvoice-page__header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
  .mixvoice-page__header-actions .button { min-height: 42px; padding-inline: 13px; font-size: .62rem; }
  .mixvoice-conversation { display: grid; gap: 12px; }
  .mixvoice-track { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 16px; margin-left: calc(var(--reply-depth, 0) * min(4vw, 42px)); padding: 13px; border: 1px solid rgb(255 255 255 / .085); border-radius: 21px; background: linear-gradient(145deg, rgb(255 255 255 / .045), rgb(255 255 255 / .018)); box-shadow: 0 14px 45px rgb(0 0 0 / .12); }
  .mixvoice-track--original { margin-left: 0; border-color: rgb(167 139 250 / .3); background: linear-gradient(145deg, rgb(124 58 237 / .12), rgb(236 72 153 / .045)); }
  .mixvoice-track__player { position: relative; width: 126px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
  .mixvoice-track__body { display: grid; min-width: 0; align-content: center; gap: 9px; }
  .mixvoice-track__body > p { color: rgb(255 255 255 / .82); font-size: .7rem; line-height: 1.5; }
  .mixvoice-track__author { display: flex; align-items: center; gap: 9px; }
  .mixvoice-track__author > div { display: grid; min-width: 0; gap: 2px; }
  .mixvoice-track__author strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .mixvoice-track__author small { color: var(--muted); font-size: .57rem; }
  .mixvoice-track__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
  .mixvoice-track__actions .text-button { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .035); font-size: .59rem; }
  .mixvoice-track__actions .text-button.is-active { color: #f9a8d4; }
  .mixvoice-track__actions .text-button.is-danger { color: #fda4af; }
  .mixvoice-track__consent { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .035); font-size: .56rem; cursor: pointer; }
  .mixvoice-track__consent input { accent-color: #8b5cf6; }
  .mixvoice-transcript { font-size: .62rem; }
  .mixvoice-transcript summary { width: fit-content; color: #c4b5fd; cursor: pointer; }
  .mixvoice-transcript p { margin-top: 6px; color: var(--muted); line-height: 1.5; }
  .mixvoice-transcript--editable textarea { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: rgb(0 0 0 / .18); font: inherit; line-height: 1.5; resize: vertical; }
  .mixvoice-transcript--editable .button { min-height: 35px; margin-top: 6px; padding: 6px 10px; font-size: .57rem; }
  .mixvoice-disabled-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 17px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; color: var(--muted); font-size: .67rem; }

  .mixvoice-reply-composer { display: grid; gap: 13px; margin-top: 20px; padding: clamp(16px, 3vw, 25px); border: 1px solid rgb(167 139 250 / .25); border-radius: 24px; background: radial-gradient(circle at 90% 0, rgb(236 72 153 / .1), transparent 36%), linear-gradient(145deg, rgb(124 58 237 / .09), var(--surface)); }
  .mixvoice-reply-composer > header { display: flex; align-items: center; gap: 11px; }
  .mixvoice-reply-composer > header > div { display: grid; gap: 2px; }
  .mixvoice-reply-composer h2 { font-size: .88rem; }
  .mixvoice-reply-composer header p, .mixvoice-reply-composer__status { color: var(--muted); font-size: .62rem; line-height: 1.45; }
  .mixvoice-reply-composer__parent { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 13px; color: #ddd6fe; background: rgb(139 92 246 / .1); font-size: .61rem; }
  .mixvoice-reply-composer__parent .icon-button { width: 29px; height: 29px; margin-left: auto; }
  .mixvoice-reply-composer__meter { display: flex; height: 50px; align-items: center; justify-content: center; gap: 4px; padding-inline: 9px; overflow: hidden; border-radius: 14px; background: rgb(0 0 0 / .18); }
  .mixvoice-reply-composer__meter span { width: 4px; height: max(4px, calc(var(--meter-level, .08) * 40px)); border-radius: 99px; background: linear-gradient(#c4b5fd, #f472b6); transition: height 75ms linear; }
  .mixvoice-reply-composer__record-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .mixvoice-reply-composer audio { width: 100%; }

  .mixvoice-studio__duration { min-width: 90px; padding: 9px 12px; border: 1px solid rgb(167 139 250 / .26); border-radius: 999px; color: #ddd6fe; background: rgb(139 92 246 / .09); font-size: .7rem; text-align: center; font-variant-numeric: tabular-nums; }
  .mixvoice-studio__duration.is-over { border-color: rgb(244 63 94 / .45); color: #fecdd3; background: rgb(244 63 94 / .09); }
  .mixvoice-studio__layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); align-items: start; gap: 20px; }
  .mixvoice-studio__sequence, .mixvoice-studio__controls { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 23px; background: var(--surface); }
  .mixvoice-studio__sequence > header h2, .mixvoice-studio__controls h2 { font-size: .88rem; }
  .mixvoice-studio__sequence > header p { margin-top: 3px; color: var(--muted); font-size: .61rem; line-height: 1.45; }
  .mixvoice-studio__reply-list, .mixvoice-studio__original { display: grid; gap: 9px; }
  .mixvoice-studio__empty { padding: 24px; color: var(--muted); font-size: .65rem; text-align: center; }
  .mixvoice-studio-track { display: grid; grid-template-columns: auto auto minmax(95px, 1fr) auto minmax(72px, auto) minmax(170px, 1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgb(255 255 255 / .075); border-radius: 17px; background: rgb(255 255 255 / .025); }
  .mixvoice-studio-track.is-original { border-color: rgb(167 139 250 / .24); background: rgb(139 92 246 / .07); }
  .mixvoice-studio-track > input[type="checkbox"] { width: 18px; height: 18px; accent-color: #8b5cf6; }
  .mixvoice-studio-track__lock { display: grid; width: 20px; place-items: center; color: #c4b5fd; }
  .mixvoice-studio-track__identity { display: grid; min-width: 0; gap: 2px; }
  .mixvoice-studio-track__identity strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  .mixvoice-studio-track__identity small { color: var(--muted); font-size: .53rem; }
  .mixvoice-studio-track > label, .mixvoice-studio-track__trim label { display: grid; gap: 3px; color: var(--muted); font-size: .51rem; }
  .mixvoice-studio-track select, .mixvoice-studio-track input[type="number"] { min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-2); font-size: .59rem; }
  .mixvoice-studio-track__trim { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mixvoice-studio-track__move { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .mixvoice-studio-track__move .icon-button { width: 32px; height: 32px; }
  .mixvoice-studio__controls { position: sticky; top: 18px; }
  .inline-warning { display: flex; align-items: flex-start; gap: 8px; padding: 11px; border: 1px solid rgb(251 191 36 / .2); border-radius: 13px; color: #fde68a; background: rgb(251 191 36 / .06); font-size: .59rem; line-height: 1.45; }
  .mixvoice-export-state { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--border); border-radius: 16px; background: rgb(0 0 0 / .15); }
  .mixvoice-export-state__status { display: flex; align-items: center; gap: 9px; }
  .mixvoice-export-state__status > div { display: grid; gap: 2px; }
  .mixvoice-export-state__status strong { font-size: .65rem; }
  .mixvoice-export-state__status small { color: var(--muted); font-size: .53rem; line-height: 1.4; }
  .mixvoice-export-state__indeterminate { height: 5px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .08); }
  .mixvoice-export-state__indeterminate span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--gradient); animation: mixvoiceIndeterminate 1.25s ease-in-out infinite alternate; }
  .mixvoice-export-state__actions { display: flex; flex-wrap: wrap; gap: 6px; }
  @keyframes mixvoiceIndeterminate { from { transform: translateX(-10%); } to { transform: translateX(195%); } }
}

@layer responsive {
  @media (max-width: 900px) {
    .mixvoice-studio__layout { grid-template-columns: 1fr; }
    .mixvoice-studio__controls { position: static; }
    .mixvoice-studio-track { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    .mixvoice-studio-track > label, .mixvoice-studio-track__trim { grid-column: span 2; }
    .mixvoice-studio-track__move { grid-column: 4; grid-row: 2; }
  }
  @media (max-width: 680px) {
    .mixvoice-page, .mixvoice-studio { padding-inline: 10px; }
    .mixvoice-page__header, .mixvoice-studio__header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .mixvoice-page__header-actions, .mixvoice-studio__duration { grid-column: 1 / -1; width: 100%; justify-content: stretch; }
    .mixvoice-page__header-actions .button { flex: 1 1 120px; }
    .mixvoice-track { grid-template-columns: 94px minmax(0, 1fr); gap: 11px; margin-left: calc(var(--reply-depth, 0) * 12px); padding: 9px; border-radius: 17px; }
    .mixvoice-track__player { width: 94px; }
    .mixvoice-track__actions .text-button span { display: none; }
    .mixvoice-track__consent { width: 100%; }
    .mixvoice-reply-composer__record-actions { grid-template-columns: 1fr 1fr; }
    .mixvoice-studio-track { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  }
}

@layer components {
  /* Mix is a first-class publishing surface: the same controls are reused by
     normal posts for the opt-in remix permission. */
  .mix-toggle { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
  .mix-toggle__copy { display: grid; min-width: 0; gap: 3px; }
  .mix-toggle__copy strong { color: var(--text-soft); font-size: .75rem; }
  .mix-toggle__copy small { color: var(--muted); font-size: .64rem; line-height: 1.42; }
  .mix-toggle__control { position: relative; width: 46px; height: 27px; flex: 0 0 auto; }
  .mix-toggle__control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .mix-toggle__control > span { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / .07); transition: border-color .2s, background .2s; }
  .mix-toggle__control > span::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #d4d4dd; box-shadow: 0 2px 7px rgb(0 0 0 / .35); content: ""; transition: transform .22s var(--ease), background .2s; }
  .mix-toggle__control input:checked + span { border-color: rgb(167 139 250 / .52); background: linear-gradient(120deg, #7c3aed, #db2777); }
  .mix-toggle__control input:checked + span::after { background: white; transform: translateX(19px); }
  .mix-toggle__control input:focus-visible + span { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  [dir="rtl"] .mix-toggle__control > span::after { right: 3px; left: auto; }
  [dir="rtl"] .mix-toggle__control input:checked + span::after { transform: translateX(-19px); }
  .composer-remix-permission { padding: 13px 0 2px; border-top: 1px solid var(--line); }

  .create-intent-card--mix { background: radial-gradient(circle at 90% 8%, rgb(34 211 238 / .19), transparent 36%), radial-gradient(circle at 10% 100%, rgb(236 72 153 / .1), transparent 42%), var(--surface); }
  .create-intent-card--mix .create-intent-card__icon { background: linear-gradient(145deg, #0891b2, #7c3aed 56%, #db2777); }

  .mix-post { position: absolute; inset: 0; overflow: hidden; background: #09090e; }
  .mix-post__composition { position: absolute; inset: 0; display: grid; overflow: hidden; touch-action: pan-y pinch-zoom; }
  .mix-post__composition--side_by_side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-post__composition--stacked { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .mix-post__slot { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #111118; }
  .mix-post__composition--side_by_side .mix-post__slot + .mix-post__slot { border-left: 2px solid rgb(255 255 255 / .75); }
  .mix-post__composition--stacked .mix-post__slot + .mix-post__slot { border-top: 2px solid rgb(255 255 255 / .75); }
  .mix-post__slot img, .mix-post__slot video { width: 100%; height: 100%; object-fit: cover; }
  .mix-post__slot-letter { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgb(255 255 255 / .32); border-radius: 50%; color: white; background: rgb(3 3 6 / .48); font-size: .69rem; font-weight: 900; box-shadow: 0 5px 18px rgb(0 0 0 / .24); backdrop-filter: blur(8px); }
  .mix-post__credit { position: absolute; right: 9px; bottom: 9px; left: 9px; z-index: 2; display: flex; min-width: 0; align-items: center; gap: 4px; color: rgb(255 255 255 / .77); font-size: .58rem; text-shadow: 0 1px 5px #000; }
  .mix-post__credit a { display: inline-flex; min-height: 44px; align-items: center; overflow: hidden; color: white; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .mix-post__unavailable, .mix-post__slot--unavailable { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; gap: 7px; color: var(--muted); font-size: .66rem; }
  .mix-post__video-toggle { position: absolute; inset: 50% auto auto 50%; z-index: 3; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; color: white; background: rgb(0 0 0 / .34); opacity: .78; cursor: pointer; transform: translate(-50%, -50%); backdrop-filter: blur(8px); transition: opacity .2s, background .2s, transform .2s; }
  .mix-post__video-toggle:hover, .mix-post__video-toggle:focus-visible { background: rgb(0 0 0 / .62); opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  .mix-post__video-toggle:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 2px; }
  .mix-post__badge { position: absolute; top: 13px; right: 13px; z-index: 5; display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: white; background: rgb(5 5 10 / .52); font-size: .62rem; font-weight: 850; letter-spacing: .02em; box-shadow: 0 8px 28px rgb(0 0 0 / .23); backdrop-filter: blur(10px); }
  .mix-post__badge--battle { background: linear-gradient(115deg, rgb(225 29 72 / .72), rgb(124 58 237 / .72)); }
  .mix-post__sequence-track { display: flex; width: 100%; height: 100%; transition: transform .34s var(--ease); will-change: transform; }
  .mix-post__sequence-track > .mix-post__slot { width: 100%; height: 100%; flex: 0 0 100%; }
  .mix-post__sequence-dots { position: absolute; top: 15px; left: 50%; z-index: 4; display: flex; gap: 5px; transform: translateX(-50%); }
  .mix-post__sequence-dots span { width: 7px; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .45); transition: width .2s, background .2s; }
  .mix-post__sequence-dots span.is-active { width: 22px; background: white; }
  .mix-post__sequence-status { position: absolute; top: 13px; left: 13px; z-index: 4; padding: 4px 7px; border-radius: 99px; color: white; background: rgb(0 0 0 / .42); font-size: .58rem; }
  .mix-post__composition:focus-visible { outline: 3px solid var(--violet-light); outline-offset: -3px; }

  .mix-battle { position: absolute; top: 54px; right: 12px; left: 12px; z-index: 6; padding: 11px; overflow-anchor: none; border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; color: white; background: rgb(5 5 10 / .58); box-shadow: 0 16px 45px rgb(0 0 0 / .22); backdrop-filter: blur(13px); }
  .mix-battle__heading { display: grid; gap: 5px; }
  .mix-battle__question { overflow: hidden; font-size: .76rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .mix-battle__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgb(255 255 255 / .66); font-size: .55rem; }
  .mix-battle__status { display: inline-flex; align-items: center; gap: 4px; }
  .mix-battle__status::before { width: 6px; height: 6px; border-radius: 50%; background: #fb7185; content: ""; }
  .mix-battle__status.is-open::before { background: #34d399; box-shadow: 0 0 8px rgb(52 211 153 / .72); }
  .mix-battle__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 6px; margin-top: 9px; }
  .mix-battle__choice { display: grid; min-width: 0; gap: 4px; }
  .mix-battle__percentage { min-height: 16px; padding-inline: 5px; color: rgb(255 255 255 / .82); font-size: .62rem; font-weight: 900; line-height: 1; text-align: center; }
  .mix-battle__choice.is-selected .mix-battle__percentage { color: #ddd6fe; }
  .mix-battle__option { position: relative; display: grid; width: 100%; min-width: 0; min-height: 44px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; overflow: hidden; padding: 8px 9px; border: 1px solid rgb(255 255 255 / .15); border-radius: 11px; color: white; background: rgb(255 255 255 / .075); cursor: pointer; }
  .mix-battle__option:hover:not(:disabled), .mix-battle__option:focus-visible { border-color: rgb(196 181 253 / .65); background: rgb(139 92 246 / .25); }
  .mix-battle__option:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
  .mix-battle__option:disabled { opacity: .84; cursor: default; }
  .mix-battle__option.is-selected { border-color: rgb(196 181 253 / .75); background: rgb(124 58 237 / .3); }
  .mix-battle__option-main { position: relative; z-index: 2; display: flex; min-width: 0; align-items: center; gap: 6px; }
  .mix-battle__option-main b { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: rgb(255 255 255 / .13); font-size: .62rem; }
  .mix-battle__option-main span { overflow: hidden; font-size: .64rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
  .mix-battle__vote-label { position: relative; z-index: 2; font-size: .62rem; font-weight: 850; }
  .mix-battle__ranking-toggle { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; margin: 9px auto 0; padding: 6px 11px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; color: rgb(255 255 255 / .84); background: rgb(255 255 255 / .07); font-size: .59rem; font-weight: 820; cursor: pointer; }
  .mix-battle__ranking-toggle:hover, .mix-battle__ranking-toggle:focus-visible { color: white; background: rgb(255 255 255 / .13); }
  .mix-battle__ranking-toggle:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
  .mix-battle__ranking-toggle-copy { display: grid; justify-items: start; line-height: 1.15; }
  .mix-battle__ranking-toggle-copy strong { font-size: .59rem; }
  .mix-battle__ranking-toggle-copy small { color: rgb(255 255 255 / .58); font-size: .5rem; font-weight: 650; }
  .mix-battle__ranking-toggle svg:last-child { transition: transform .2s var(--ease); }
  .mix-battle__ranking-toggle.is-expanded svg:last-child { transform: rotate(180deg); }
  .mix-battle__ranking { display: grid; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / .12); }
  .mix-battle__rank-row { display: grid; gap: 4px; }
  .mix-battle__rank-copy { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; font-size: .57rem; }
  .mix-battle__rank-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mix-battle__rank-copy span { flex: 0 0 auto; color: rgb(255 255 255 / .68); }
  .mix-battle__rank-bar { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .11); }
  .mix-battle__rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #ec4899); transition: width .42s var(--ease); }
  .mix-battle__rank-row.is-selected .mix-battle__rank-bar i { background: linear-gradient(90deg, #2563eb, #14b8a6); }
  .mix-battle__winner { margin-top: 2px; color: #fde68a; font-size: .61rem; font-weight: 800; text-align: center; }
  .mix-battle__results-state { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: rgb(255 255 255 / .76); font-size: .6rem; }
  .mix-battle__retry { min-width: 44px; min-height: 44px; padding: 7px 11px; border: 1px solid rgb(255 255 255 / .2); border-radius: 11px; color: white; background: rgb(124 58 237 / .32); cursor: pointer; }
  .mix-battle__retry:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
  .mix-battle[aria-busy="true"] { opacity: .72; }

  .post-mix-attribution { display: flex; min-width: 0; align-items: center; gap: 7px; margin: 6px 0 5px; }
  .post-mix-attribution__badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; color: #e9d5ff; background: rgb(124 58 237 / .2); font-size: .55rem; font-weight: 850; }
  .post-mix-attribution__badge--battle { color: #fecdd3; background: rgb(225 29 72 / .18); }
  .post-mix-attribution > strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
  .post-mix-action { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: white; background: rgb(8 8 14 / .28); font-size: .62rem; font-weight: 800; text-shadow: none; backdrop-filter: blur(8px); transition: background .18s, transform .18s; }
  .post-mix-action:hover { background: rgb(124 58 237 / .32); transform: translateY(-1px); }
  .post-mix-action:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 2px; }
  .feed-card--mix .feed-card__shade { background: linear-gradient(180deg, rgb(0 0 0 / .12), transparent 31%, transparent 55%, rgb(0 0 0 / .72) 100%); }
  .mosaic-tile .mix-post__badge { top: 7px; right: 7px; min-height: 25px; padding: 4px 7px; font-size: 0; }
  .mosaic-tile .mix-post__badge svg { width: 14px; height: 14px; }
  .mosaic-tile .mix-post__credit, .mosaic-tile .mix-post__video-toggle, .mosaic-tile .mix-post__slot-letter { display: none; }
}

@layer pages {
  .mix-editor { width: min(1180px, 100%); margin: 0 auto; }
  .mix-mode-picker { display: grid; gap: 26px; }
  .mix-mode-picker__heading { max-width: 730px; }
  .mix-mode-picker__heading h1 { margin-top: 6px; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1; }
  .mix-mode-picker__heading p { max-width: 620px; margin-top: 12px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
  .mix-mode-picker__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mix-mode-card { position: relative; display: grid; min-height: 260px; grid-template-columns: 82px minmax(0, 1fr); align-content: end; align-items: center; gap: 18px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 27px; color: var(--text); background: radial-gradient(circle at 85% 5%, rgb(56 189 248 / .13), transparent 38%), var(--surface); text-align: left; cursor: pointer; transition: border-color .22s, box-shadow .22s, transform .22s; }
  .mix-mode-card--battle { background: radial-gradient(circle at 85% 5%, rgb(244 63 94 / .15), transparent 38%), var(--surface); }
  .mix-mode-card::before { position: absolute; top: -110px; right: -70px; width: 250px; height: 250px; border: 1px solid rgb(255 255 255 / .06); border-radius: 50%; content: ""; }
  .mix-mode-card:hover { border-color: rgb(167 139 250 / .4); box-shadow: 0 24px 70px rgb(0 0 0 / .27); transform: translateY(-4px); }
  .mix-mode-card:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 3px; }
  .mix-mode-card__icon { position: relative; z-index: 1; display: grid; width: 82px; height: 82px; place-items: center; border-radius: 25px; color: white; background: linear-gradient(145deg, #0891b2, #7c3aed); box-shadow: 0 18px 42px rgb(8 145 178 / .23); }
  .mix-mode-card--battle .mix-mode-card__icon { background: linear-gradient(145deg, #e11d48, #7c3aed); box-shadow: 0 18px 42px rgb(225 29 72 / .2); }
  .mix-mode-card__copy { position: relative; z-index: 1; display: grid; min-width: 0; gap: 7px; padding-right: 48px; }
  .mix-mode-card__copy strong { font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -.04em; }
  .mix-mode-card__copy small { max-width: 360px; color: var(--muted); font-size: .73rem; line-height: 1.5; }
  .mix-mode-card__arrow { position: absolute; right: 22px; bottom: 22px; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: rgb(255 255 255 / .07); }
  .mix-mode-picker__privacy { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--faint); font-size: .66rem; text-align: center; }
  .mix-mode-picker__privacy svg { flex: 0 0 auto; color: #67e8f9; }

  .mix-composer { display: grid; gap: 22px; }
  .mix-composer__heading { align-items: flex-end; }
  .mix-composer__workspace { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(360px, 1.1fr); align-items: start; gap: clamp(18px, 4vw, 42px); }
  .mix-composer__preview { position: sticky; top: 20px; min-width: 0; }
  .mix-preview__frame { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 27px; background: #09090e; box-shadow: 0 30px 85px rgb(0 0 0 / .32); }
  .mix-preview { display: grid; width: 100%; height: 100%; overflow: hidden; }
  .mix-preview--side_by_side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-preview--stacked { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .mix-preview--sequential { position: relative; touch-action: pan-y pinch-zoom; }
  .mix-preview--sequential .mix-slot { position: absolute; inset: 0; transition: transform .3s var(--ease); }
  .mix-preview--sequential.is-dragging .mix-slot { transition: none; }
  .mix-preview__sequence-dots { position: absolute; top: 0; left: 50%; z-index: 7; display: flex; transform: translateX(-50%); }
  .mix-preview__sequence-dot { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; color: white; background: transparent; cursor: pointer; }
  .mix-preview__sequence-dot > span { width: 7px; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .45); transition: width .2s, background .2s; }
  .mix-preview__sequence-dot[aria-current="true"] > span { width: 22px; background: white; }
  .mix-preview__sequence-dot:focus-visible { outline: 3px solid var(--violet-light); outline-offset: -5px; }
  .mix-slot { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 1px dashed rgb(167 139 250 / .25); background: radial-gradient(circle at center, rgb(124 58 237 / .12), transparent 62%), #0e0e15; }
  .mix-slot__file-trigger { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 9px; width: 100%; height: 100%; padding: 28px 12px 70px; color: rgb(255 255 255 / .78); background: transparent; cursor: pointer; }
  .mix-slot__file-trigger::before { position: absolute; inset: 12px; border: 1px solid transparent; border-radius: 17px; content: ""; transition: border-color .18s, background .18s, transform .18s; }
  .mix-slot__file-trigger:hover::before { border-color: rgb(167 139 250 / .42); background: rgb(139 92 246 / .08); transform: scale(.985); }
  .mix-slot__file-trigger:focus-visible { outline: 3px solid var(--violet-light); outline-offset: -7px; }
  .mix-slot__file-trigger-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(255 255 255 / .14); border-radius: 50%; color: white; background: rgb(124 58 237 / .2); box-shadow: 0 12px 34px rgb(0 0 0 / .24); }
  .mix-slot__file-trigger > span:last-child { font-size: .62rem; font-weight: 800; }
  .mix-preview--side_by_side .mix-slot + .mix-slot { border-left-color: rgb(255 255 255 / .48); }
  .mix-preview--stacked .mix-slot + .mix-slot { border-top-color: rgb(255 255 255 / .48); }
  .mix-slot.is-dragging { border-color: #67e8f9; background-color: rgb(8 145 178 / .12); }
  .mix-slot > img, .mix-slot > video { width: 100%; height: 100%; object-fit: cover; }
  .mix-slot__letter { position: absolute; top: 12px; left: 12px; z-index: 4; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgb(255 255 255 / .24); border-radius: 50%; color: white; background: rgb(0 0 0 / .42); font-size: .69rem; font-weight: 900; backdrop-filter: blur(8px); }
  .mix-slot__credit { position: absolute; right: 9px; bottom: 9px; left: 9px; z-index: 3; overflow: hidden; color: white; font-size: .59rem; font-weight: 780; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; white-space: nowrap; }
  .mix-slot__actions { position: absolute; bottom: 12px; z-index: 5; display: grid; width: min(86%, 190px); gap: 7px; }
  .mix-slot.has-media .mix-slot__actions { right: 8px; bottom: 8px; width: auto; grid-auto-flow: column; opacity: 0; transition: opacity .18s; }
  .mix-slot.has-media:hover .mix-slot__actions, .mix-slot.has-media:focus-within .mix-slot__actions { opacity: 1; }
  .mix-slot__action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / .15); border-radius: 12px; color: white; background: rgb(7 7 12 / .72); font-size: .63rem; font-weight: 770; cursor: pointer; backdrop-filter: blur(9px); }
  .mix-slot__action:hover { background: rgb(124 58 237 / .62); }
  .mix-slot__action:focus-visible, .mix-slot__remove:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 2px; }
  .mix-slot__remove { position: absolute; top: 9px; right: 9px; z-index: 5; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: white; background: rgb(0 0 0 / .58); cursor: pointer; }
  .mix-preview__badge { position: absolute; top: 14px; right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; color: white; background: rgb(5 5 9 / .52); font-size: .61rem; font-weight: 850; backdrop-filter: blur(10px); }
  .mix-preview__badge--battle { background: linear-gradient(115deg, rgb(225 29 72 / .75), rgb(124 58 237 / .75)); }
  .mix-preview__battle-copy { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 5; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid rgb(255 255 255 / .14); border-radius: 14px; color: white; background: rgb(4 4 8 / .58); backdrop-filter: blur(10px); }
  .mix-preview__battle-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .mix-preview__battle-copy span { color: rgb(255 255 255 / .7); font-size: .59rem; }
  .mix-preview__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; color: var(--faint); font-size: .62rem; }
  .mix-composer__fields { display: grid; gap: 13px; }
  .mix-composer__essentials { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
  .mix-composer__title-field, .mix-composer__caption-field { position: relative; display: block; min-width: 0; }
  .mix-composer__title-field { border-bottom: 1px solid var(--line); }
  .mix-composer__title-input, .mix-composer__caption-input {
    width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; box-shadow: none;
  }
  .mix-composer__title-input { min-height: 54px; padding: 12px 15px; font-size: .82rem; font-weight: 760; }
  .mix-composer__caption-input { min-height: 104px; padding: 13px 15px 31px; resize: vertical; font-size: .76rem; line-height: 1.5; }
  .mix-composer__title-input:focus, .mix-composer__caption-input:focus { background: rgb(255 255 255 / .025); box-shadow: inset 3px 0 #8b5cf6; }
  .mix-composer__title-input::placeholder, .mix-composer__caption-input::placeholder { color: var(--faint); }
  .mix-composer__caption-field .character-count { right: 14px; bottom: 9px; font-size: .57rem; }
  .mix-composer__caption-field .hashtag-count { bottom: 9px; left: 15px; font-size: .57rem; }

  .mix-composer__compact-options { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
  .mix-composer__compact-options > * + * { border-top: 1px solid rgb(255 255 255 / .055); }
  .mix-composer__disclosure { overflow: hidden; }
  .mix-composer__disclosure > summary {
    display: grid; min-height: 62px; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 11px;
    padding: 8px 13px; color: var(--text); cursor: pointer; list-style: none;
  }
  .mix-composer__disclosure > summary::-webkit-details-marker { display: none; }
  .mix-composer__disclosure > summary:hover, .mix-composer__disclosure > summary:focus-visible,
  .mix-composer__compact-options .place-picker__trigger:hover, .mix-composer__compact-options .place-picker__trigger:focus-visible { background: rgb(255 255 255 / .035); }
  .mix-composer__disclosure > summary:focus-visible { outline: 2px solid rgb(167 139 250 / .35); outline-offset: -2px; }
  .mix-composer__disclosure > summary > svg { color: var(--muted); transition: transform .2s var(--ease); }
  .mix-composer__disclosure[open] > summary > svg { transform: rotate(180deg); }
  .mix-composer__disclosure-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #ddd6fe; background: var(--gradient-soft); }
  .mix-composer__disclosure-copy { display: grid; min-width: 0; gap: 2px; }
  .mix-composer__disclosure-copy strong, .mix-composer__disclosure-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mix-composer__disclosure-copy strong { font-size: .78rem; }
  .mix-composer__disclosure-state { color: var(--muted); font-size: .61rem; font-weight: 540; }
  .mix-composer__disclosure-content { padding: 3px 14px 16px 64px; }
  .mix-composer__disclosure-fields { display: grid; gap: 13px; }
  .mix-composer__compact-options > .place-picker { padding-inline: 13px; }
  .mix-composer__compact-options .place-picker__trigger { min-height: 62px; padding-block: 8px; }
  .mix-layout-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .mix-layout-option { display: grid; min-height: 76px; place-content: center; justify-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .59rem; cursor: pointer; }
  .mix-layout-option.is-active { border-color: rgb(167 139 250 / .5); color: white; background: rgb(124 58 237 / .15); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .1); }
  .mix-layout-option:focus-visible { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  .mix-battle-fields__labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mix-composer__feedback:empty { display: none; }
  .mix-composer__actions { position: sticky; bottom: 10px; z-index: 9; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 17px; background: rgb(15 15 22 / .84); box-shadow: 0 16px 48px rgb(0 0 0 / .28); backdrop-filter: blur(14px); }
  .mix-editor.is-uploading::after { position: fixed; top: 0; right: 0; left: 0; z-index: 90; height: 3px; background: var(--gradient); animation: uploadProgress 1.1s ease-in-out infinite; content: ""; transform-origin: left; }

  .mix-source-picker { display: grid; gap: 13px; padding: 58px 22px max(22px, env(safe-area-inset-bottom)); }
  .mix-source-picker__search { display: flex; min-height: 46px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
  .mix-source-picker__search svg { flex: 0 0 auto; color: var(--muted); }
  .mix-source-picker__search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
  .mix-source-picker__notice { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
  .mix-source-picker__notice svg { flex: 0 0 auto; color: #67e8f9; }
  .mix-source-picker__results { display: grid; max-height: min(58dvh, 520px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow-y: auto; }
  .mix-source-result { display: grid; min-width: 0; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgb(255 255 255 / .025); text-align: left; cursor: pointer; }
  .mix-source-result:hover { border-color: rgb(167 139 250 / .35); background: rgb(124 58 237 / .08); }
  .mix-source-result:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 2px; }
  .mix-source-result__media { width: 58px; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: #09090d; }
  .mix-source-result__media img, .mix-source-result__media video { width: 100%; height: 100%; object-fit: cover; }
  .mix-source-result__copy { display: grid; min-width: 0; gap: 3px; }
  .mix-source-result__copy strong, .mix-source-result__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mix-source-result__copy strong { font-size: .65rem; }
  .mix-source-result__copy small { color: var(--muted); font-size: .58rem; }
  .mix-source-picker__loading, .mix-source-picker__empty { display: flex; min-height: 160px; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: .68rem; }
}

@layer responsive {
  @media (max-width: 900px) {
    .mix-composer__workspace { grid-template-columns: minmax(280px, .82fr) minmax(330px, 1.18fr); gap: 18px; }
    .mix-source-picker__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .mix-mode-picker { gap: 18px; }
    .mix-mode-picker__grid { grid-template-columns: 1fr; gap: 10px; }
    .mix-mode-card { min-height: 150px; grid-template-columns: 62px minmax(0, 1fr); gap: 13px; padding: 18px; border-radius: 20px; }
    .mix-mode-card__icon { width: 62px; height: 62px; border-radius: 19px; }
    .mix-mode-card__copy { padding-right: 42px; }
    .mix-mode-card__copy strong { font-size: 1.2rem; }
    .mix-mode-card__arrow { right: 15px; bottom: 15px; width: 32px; height: 32px; }
    .mix-composer__heading { align-items: stretch; flex-direction: column; gap: 12px; }
    .mix-composer__workspace { grid-template-columns: 1fr; }
    .mix-composer__preview { position: static; }
    .mix-preview__frame { width: min(100%, 480px); margin-inline: auto; border-radius: 21px; }
    .create-studio--mix .mix-composer__actions { bottom: 0; }
    .mix-slot.has-media .mix-slot__actions { opacity: 1; }
    .mix-slot__action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .mix-slot__action { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
    .mix-source-picker__results { grid-template-columns: 1fr; }
    .mix-source-picker { padding: 56px 15px max(18px, env(safe-area-inset-bottom)); }
    .mix-battle { top: 50px; right: 8px; left: 8px; padding: 9px; }
    .mix-battle__option { min-height: 44px; padding: 7px; }
    .mix-post__credit { font-size: .54rem; }
  }
  @media (max-width: 390px) {
    .mix-composer__disclosure-content { padding-right: 12px; padding-left: 12px; }
    .mix-layout-picker { grid-template-columns: 1fr; }
    .mix-layout-option { min-height: 48px; grid-template-columns: auto 1fr; justify-content: start; justify-items: start; align-items: center; }
    .mix-battle-fields__labels { grid-template-columns: 1fr; }
    .mix-battle__question { font-size: .68rem; }
    .mix-battle__option-main span { font-size: .58rem; }
    .mix-battle__meta { font-size: .51rem; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .mix-mode-card, .mix-post__sequence-track, .mix-battle__rank-bar i, .mix-battle__ranking-toggle svg:last-child, .mix-slot__actions, .mix-toggle__control > span, .mix-toggle__control > span::after { transition: none; }
    .mix-editor.is-uploading::after { animation: none; }
  }
}

@layer components {
  .language-selector { display: inline-flex; min-width: 0; align-items: center; gap: 9px; color: var(--text-soft); }
  .language-selector__label { flex: 0 0 auto; font-size: .72rem; font-weight: 720; }
  .language-selector__control { position: relative; display: block; min-width: 0; }
  .language-selector__select {
    width: 100%; min-height: 38px; padding: 7px 30px 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px;
    color: var(--text); background: var(--surface-2); font: inherit; font-size: .72rem; cursor: pointer; color-scheme: dark;
  }
  [dir="rtl"] .language-selector__select { padding-right: 10px; padding-left: 30px; }
  .language-selector__select:hover { border-color: rgb(167 139 250 / .4); }
  .language-selector__select:focus-visible { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  .language-selector[aria-busy="true"] { opacity: .7; }
  .language-selector--compact { width: 100%; justify-content: space-between; }
  .language-selector--compact .language-selector__control { width: min(100%, 178px); }
  .sidebar__utility > .language-selector {
    display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-content: stretch; gap: 6px;
    padding: 7px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .sidebar__utility > .language-selector .language-selector__label { color: var(--faint); }
  .sidebar__utility > .language-selector .language-selector__control,
  .sidebar__utility > .language-selector .custom-select { width: 100%; min-width: 0; }
  .sidebar__utility > .language-selector .custom-select__popover {
    top: auto; right: auto; bottom: calc(100% + 7px); left: 0; width: 100%; max-width: 100%;
  }
  .auth-panel > .language-selector { width: min(100%, 260px); justify-self: end; }
  .auth-panel > .language-selector .language-selector__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .login-card__language { width: auto; align-self: flex-end; margin-bottom: 22px; }
  .login-card__language .language-selector__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  /* Div/CSS select used throughout the product. The native control stays in
     the DOM for forms and validation, but it is never the visible interface. */
  .custom-select { position: relative; display: block; width: 100%; min-width: 0; }
  .custom-select__native {
    display: none !important; position: absolute !important; top: 0; left: 0; width: 1px !important; height: 1px !important;
    min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden;
    border: 0 !important; opacity: 0; pointer-events: none; clip-path: inset(50%);
  }
  .custom-select__trigger {
    display: grid; width: 100%; min-width: 0; min-height: 44px; grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 12px;
    color: var(--text); background: rgb(27 27 36 / .92); box-shadow: inset 0 1px rgb(255 255 255 / .025);
    font: inherit; font-size: .74rem; text-align: left; cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .custom-select__trigger:hover { border-color: rgb(255 255 255 / .2); background: rgb(32 32 42 / .96); }
  .custom-select__trigger:focus-visible {
    border-color: rgb(66 133 244 / .72); outline: 3px solid rgb(66 133 244 / .24); outline-offset: 2px;
  }
  .custom-select.is-open .custom-select__trigger { border-color: rgb(66 133 244 / .62); box-shadow: 0 0 0 3px rgb(66 133 244 / .12); }
  .custom-select.is-disabled { opacity: .58; }
  .custom-select.is-disabled .custom-select__trigger { cursor: not-allowed; }
  .custom-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .custom-select__chevron {
    width: 9px; height: 9px; justify-self: end; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    opacity: .68; transform: translateY(-2px) rotate(45deg); transition: transform .18s;
  }
  .custom-select.is-open .custom-select__chevron { transform: translateY(2px) rotate(225deg); }
  .custom-select__popover {
    position: absolute; top: calc(100% + 7px); right: 0; z-index: 180; display: grid;
    width: max(100%, 250px); max-width: min(390px, calc(100vw - 24px)); gap: 7px; padding: 7px;
    border: 1px solid rgb(255 255 255 / .13); border-radius: 15px; background: rgb(20 21 28 / .985);
    box-shadow: 0 24px 70px rgb(0 0 0 / .58), inset 0 1px rgb(255 255 255 / .06);
    backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
  }
  .custom-select__popover[hidden] { display: none !important; }
  [dir="rtl"] .custom-select__popover { right: auto; left: 0; }
  .custom-select__search {
    width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 10px;
    color: var(--text); background: rgb(255 255 255 / .055); font: inherit; font-size: .72rem;
  }
  .custom-select__search:focus { border-color: rgb(66 133 244 / .58); outline: 3px solid rgb(66 133 244 / .16); }
  .custom-select__options { max-height: min(310px, 46dvh); overflow-y: auto; overscroll-behavior: contain; padding: 1px; scrollbar-width: thin; outline: none; }
  .custom-select__option {
    position: relative; display: flex; min-height: 42px; align-items: center; padding: 8px 34px 8px 10px;
    border-radius: 10px; color: var(--text-soft); font-size: .72rem; line-height: 1.3; cursor: pointer;
  }
  [dir="rtl"] .custom-select__option { padding-right: 10px; padding-left: 34px; text-align: right; }
  .custom-select__option:hover, .custom-select__option.is-active { color: white; background: rgb(255 255 255 / .075); }
  .custom-select__option.is-selected { color: white; background: rgb(66 133 244 / .14); font-weight: 780; }
  .custom-select__option.is-selected::after {
    position: absolute; right: 12px; width: 8px; height: 13px; border-right: 2px solid #8ab4f8;
    border-bottom: 2px solid #8ab4f8; content: ""; transform: translateY(-2px) rotate(45deg);
  }
  [dir="rtl"] .custom-select__option.is-selected::after { right: auto; left: 12px; }
  .custom-select__option.is-disabled { opacity: .38; cursor: not-allowed; }
  .custom-select__empty { padding: 18px 12px; color: var(--muted); font-size: .7rem; text-align: center; }
  .language-selector__control > .custom-select { min-width: 178px; }
  .language-selector__control .custom-select__trigger { min-height: 40px; border-radius: 10px; }
}

@layer pages {
  .settings-directory__item--language { grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 230px); cursor: default; }
  .settings-directory__item--language:hover { color: var(--text); background: transparent; }
  .settings-directory__item--language .language-selector__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

@layer rtl {
  html[dir="rtl"] body { text-align: right; }
  html[dir="rtl"] .sidebar { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); }
  html[dir="rtl"] .app-main { margin-right: var(--sidebar); margin-left: 0; }
  html[dir="rtl"] .sidebar__link.is-active::before { right: -20px; left: auto; border-radius: 4px 0 0 4px; }
  html[dir="rtl"] .nav-badge { right: 31px; left: auto; }
  html[dir="rtl"] .settings-row, html[dir="rtl"] .settings-directory__item, html[dir="rtl"] .popover-menu button,
  html[dir="rtl"] .post-menu button { text-align: right; }
  html[dir="rtl"] .login-brand { right: clamp(30px, 5vw, 58px); left: auto; }
  html[dir="rtl"] .login-story { border-right: 0; border-left: 1px solid var(--line); }
  html[dir="rtl"] .login-password-toggle { right: auto; left: 6px; }
  html[dir="rtl"] .login-password input { padding-right: 13px; padding-left: 48px; }
  html[dir="rtl"] .icon[data-icon="chevronLeft"],
  html[dir="rtl"] .icon[data-icon="chevronRight"] { transform: scaleX(-1); }
  html[dir="rtl"] [dir="ltr"], html[dir="rtl"] [dir="auto"] { unicode-bidi: isolate; }
}

@media (max-width: 760px) {
  .settings-directory__item--language { grid-template-columns: 40px minmax(0, 1fr); padding-block: 15px; }
  .settings-directory__item--language > .language-selector { width: 100%; grid-column: 2; }
  .settings-directory__item--language .language-selector__control { width: 100%; }
  .login-card__language { margin-bottom: 16px; }
  .custom-select.is-open .custom-select__popover {
    position: fixed; top: auto; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; z-index: 260;
    width: auto; max-width: none; max-height: min(72dvh, 620px); padding: 10px; border-radius: 22px;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .58), 0 24px 90px rgb(0 0 0 / .72), inset 0 1px rgb(255 255 255 / .07);
  }
  .custom-select.is-open .custom-select__options { max-height: min(54dvh, 470px); }
  .custom-select__option { min-height: 48px; font-size: .78rem; }
  .date-picker__dialog {
    position: fixed; top: auto; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; z-index: 265;
    width: auto; max-height: min(82dvh, 690px); overflow-y: auto; overscroll-behavior: contain; padding: 12px;
    border-radius: 24px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .62), 0 28px 90px rgb(0 0 0 / .78), inset 0 1px rgb(255 255 255 / .07);
  }
  .date-picker__day { min-height: 42px; }
  .date-picker__year-list { max-height: min(56dvh, 470px); }
  .date-picker__tooltip { right: 0; left: 0; width: auto; max-width: none; }
  html[dir="rtl"] .app-main { margin-right: 0; }
}

@media (max-width: 390px) {
  .password-strength__rules { grid-template-columns: 1fr; }
  .date-picker__dialog { right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); left: 6px; padding: 9px; }
  .date-picker__day { min-height: 38px; border-radius: 10px; }
  .date-picker__year-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@layer pages {
  /* User growth goals */
  .growth-goals-page { max-width: 1040px; }
  .growth-goals-heading { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
  .growth-goals-heading > .icon-button { flex: 0 0 auto; margin-top: 4px; }
  .growth-goals-heading h1 { margin-top: 5px; font-size: clamp(1.8rem, 5vw, 3.1rem); letter-spacing: -.055em; line-height: 1.02; }
  .growth-goals-heading p { max-width: 680px; margin-top: 9px; color: var(--muted); font-size: .83rem; line-height: 1.55; }
  .growth-goals-body { display: grid; gap: 16px; }
  .growth-goals-skeleton { min-height: 180px; border-radius: 22px; }
  .growth-goals-skeleton:first-child { min-height: 280px; }

  .growth-bonus-hero {
    position: relative; display: grid; min-height: 280px; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 28px; overflow: hidden; padding: clamp(24px, 5vw, 46px); border: 1px solid rgb(167 139 250 / .18); border-radius: 27px;
    background: radial-gradient(circle at 88% 12%, rgb(56 189 248 / .13), transparent 34%), radial-gradient(circle at 12% 100%, rgb(139 92 246 / .18), transparent 42%), var(--surface);
    box-shadow: 0 26px 75px rgb(0 0 0 / .22);
  }
  .growth-bonus-hero.is-active { border-color: rgb(52 211 153 / .2); background: radial-gradient(circle at 88% 12%, rgb(52 211 153 / .12), transparent 34%), radial-gradient(circle at 12% 100%, rgb(139 92 246 / .18), transparent 42%), var(--surface); }
  .growth-bonus-hero::after { position: absolute; top: -110px; right: -70px; width: 300px; height: 300px; border: 1px solid rgb(255 255 255 / .055); border-radius: 50%; content: ""; pointer-events: none; }
  .growth-bonus-hero__copy { position: relative; z-index: 1; min-width: 0; }
  .growth-bonus-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #ddd6fe; font-size: .65rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
  .growth-bonus-hero.is-active .growth-bonus-hero__eyebrow { color: #a7f3d0; }
  .growth-bonus-hero__copy h2 { max-width: 600px; margin-top: 9px; font-size: clamp(1.7rem, 5vw, 3.4rem); letter-spacing: -.06em; line-height: 1; }
  .growth-bonus-hero__copy p { max-width: 570px; margin-top: 12px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
  .growth-bonus-meter { position: relative; z-index: 1; display: grid; width: clamp(140px, 18vw, 184px); aspect-ratio: 1; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 0 50px rgb(96 82 238 / .16); }
  .growth-bonus-hero.is-active .growth-bonus-meter { background: linear-gradient(135deg, #059669, #2563eb); box-shadow: 0 0 54px rgb(52 211 153 / .13); }
  .growth-bonus-meter::before { position: absolute; inset: 8px; border-radius: inherit; background: #111118; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); content: ""; }
  .growth-bonus-meter > span { position: relative; display: grid; gap: 6px; place-items: center; text-align: center; }
  .growth-bonus-meter small { color: var(--muted); font-size: .61rem; font-weight: 740; }
  .growth-bonus-hero__stats { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 1px 0 0; }
  .growth-bonus-hero__stats > div { min-width: 0; padding: 11px 13px; border: 1px solid rgb(255 255 255 / .065); border-radius: 13px; background: rgb(0 0 0 / .15); }
  .growth-bonus-hero__stats dt { color: var(--faint); font-size: .57rem; }
  .growth-bonus-hero__stats dd { margin: 3px 0 0; overflow: hidden; color: var(--text-soft); font-size: .79rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }

  .growth-guardrail { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border: 1px solid rgb(56 189 248 / .16); border-radius: 16px; background: rgb(56 189 248 / .045); }
  .growth-guardrail > svg { flex: 0 0 auto; margin-top: 1px; color: #67e8f9; }
  .growth-guardrail strong { color: var(--text-soft); font-size: .73rem; }
  .growth-guardrail p { margin-top: 3px; color: var(--muted); font-size: .67rem; line-height: 1.52; }
  .growth-guardrail.is-warning { border-color: rgb(245 158 11 / .2); background: rgb(245 158 11 / .045); }
  .growth-guardrail.is-warning > svg { color: #fcd34d; }
  .growth-goals-section { margin-top: 12px; }
  .growth-goals-count { padding: 6px 10px; border-radius: 999px; color: #ddd6fe; background: rgb(139 92 246 / .1); font-size: .59rem; font-weight: 800; white-space: nowrap; }
  .growth-goals-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .growth-goal-card { display: grid; min-width: 0; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgb(139 92 246 / .035), transparent 45%), var(--surface); box-shadow: 0 16px 42px rgb(0 0 0 / .12); }
  .growth-goal-card.is-reward_active { border-color: rgb(52 211 153 / .2); box-shadow: inset 3px 0 #34d399, 0 16px 42px rgb(0 0 0 / .12); }
  .growth-goal-card.is-completed, .growth-goal-card.is-cooldown { border-color: rgb(167 139 250 / .2); }
  .growth-goal-card.is-locked { opacity: .72; }
  .growth-goal-card__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
  .growth-goal-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #ddd6fe; background: var(--gradient-soft); }
  .growth-goal-card.is-reward_active .growth-goal-card__icon { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .growth-goal-card__title { min-width: 0; }
  .growth-goal-card__family { display: block; overflow: hidden; color: var(--faint); font-size: .55rem; font-weight: 780; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .growth-goal-card__title h3 { margin-top: 3px; overflow: hidden; font-size: .87rem; text-overflow: ellipsis; white-space: nowrap; }
  .growth-goal-card__reward { max-width: 15rem; padding: 6px 9px; border-radius: 999px; color: #ddd6fe; background: rgb(139 92 246 / .1); font-size: .67rem; font-weight: 850; line-height: 1.2; text-align: center; }
  .growth-goal-card__reward.is-active { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .growth-goal-card__description { color: var(--muted); font-size: .68rem; line-height: 1.48; }
  .growth-goal-card__progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .62rem; }
  .growth-goal-card__progress-copy strong { color: var(--text-soft); }
  .growth-goal-card__progress { height: 7px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .07); }
  .growth-goal-card__progress > i { display: block; height: 100%; border-radius: inherit; background: var(--gradient); box-shadow: 0 0 13px rgb(139 92 246 / .4); transition: width .35s var(--ease); }
  .growth-goal-card.is-reward_active .growth-goal-card__progress > i { background: linear-gradient(90deg, #10b981, #67e8f9); }
  .growth-goal-card__details { display: flex; flex-wrap: wrap; gap: 7px 13px; }
  .growth-goal-card__details > span { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); }
  .growth-goal-card__details svg { flex: 0 0 auto; }
  .growth-goal-card__details small { font-size: .58rem; }
  .growth-goal-card__qualification { display: flex; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 11px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .6rem; line-height: 1.45; }
  .growth-goal-card__qualification svg { flex: 0 0 auto; margin-top: 1px; color: #67e8f9; }
  .growth-goal-card__qualification.is-warning { color: #fde68a; background: rgb(245 158 11 / .055); }
  .growth-goal-card__qualification.is-warning svg { color: #fcd34d; }
  .growth-goal-card__expiry { color: #a7f3d0; font-size: .61rem; font-weight: 720; }
  .growth-goal-card__action { width: 100%; min-height: 42px; justify-content: center; margin-top: auto; }
  .growth-goals-empty { display: flex; min-height: 180px; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; padding: 28px; border: 1px dashed var(--line); border-radius: 19px; color: var(--muted); text-align: center; }
  .growth-goals-empty svg { margin-bottom: 9px; color: var(--violet-light); }
  .growth-goals-empty strong { color: var(--text-soft); font-size: .82rem; }
  .growth-goals-empty p { margin-top: 4px; font-size: .66rem; }
  .growth-rules { display: flex; align-items: flex-start; gap: 13px; margin-top: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: rgb(255 255 255 / .018); }
  .growth-rules__icon { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #a5f3fc; background: rgb(6 182 212 / .08); }
  .growth-rules h2 { font-size: .91rem; }
  .growth-rules ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: .66rem; line-height: 1.48; }

  /* Superadmin growth manager */
  .growth-admin { margin-bottom: 14px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(52 211 153 / .17); border-radius: 21px; background: radial-gradient(circle at 100% 0%, rgb(52 211 153 / .08), transparent 34%), var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .16); }
  .growth-admin__heading { align-items: flex-start; margin-bottom: 14px; }
  .growth-admin__heading .eyebrow { color: #a7f3d0; }
  .growth-admin__tabs { max-width: 100%; flex: 0 1 auto; overflow-x: auto; }
  .growth-admin__tabs .segmented__item { min-width: max-content; min-height: 44px; }
  .growth-admin__notice, .growth-admin-stack-rule { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid rgb(56 189 248 / .15); border-radius: 13px; color: var(--muted); background: rgb(56 189 248 / .04); font-size: .67rem; line-height: 1.48; }
  .growth-admin__notice { margin-bottom: 20px; }
  .growth-admin__notice svg, .growth-admin-stack-rule svg { flex: 0 0 auto; margin-top: 1px; color: #67e8f9; }
  .growth-admin__notice strong, .growth-admin-stack-rule strong { color: var(--text-soft); }
  .growth-admin__subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
  .growth-admin__subheading h3 { font-size: .96rem; }
  .growth-admin__subheading p { max-width: 760px; margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.48; }
  .growth-admin__actions { display: flex; flex: 0 0 auto; gap: 8px; }
  .growth-admin__editor { margin-top: 15px; }
  .growth-admin__editor[hidden] { display: none; }
  .growth-admin__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 15px 0 10px; }
  .growth-admin__summary > span { display: grid; min-width: 0; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
  .growth-admin__summary small { overflow: hidden; color: var(--faint); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
  .growth-admin__summary strong { color: var(--text-soft); font-size: .82rem; font-variant-numeric: tabular-nums; }
  .growth-admin__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .growth-rule-card { display: grid; min-width: 0; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgb(52 211 153 / .025), transparent 45%), rgb(255 255 255 / .017); }
  .growth-rule-card.is-active { border-color: rgb(52 211 153 / .18); box-shadow: inset 3px 0 rgb(52 211 153 / .68); }
  .growth-rule-card.is-inactive { opacity: .7; }
  .growth-rule-card.is-archived { opacity: .55; filter: saturate(.55); }
  .growth-rule-card--skeleton { min-height: 310px; }
  .growth-rule-card__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .growth-rule-card__icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #a7f3d0; background: rgb(52 211 153 / .09); }
  .growth-rule-card__header > div { min-width: 0; }
  .growth-rule-card__header h4, .growth-rule-card__header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .growth-rule-card__header h4 { font-size: .82rem; }
  .growth-rule-card__header p { margin-top: 3px; color: var(--muted); font-size: .59rem; }
  .growth-rule-card__status { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .045); font-size: .55rem; font-weight: 820; text-transform: uppercase; }
  .growth-rule-card__status.is-active { color: #a7f3d0; background: rgb(52 211 153 / .09); }
  .growth-rule-card__description { color: var(--muted); font-size: .66rem; line-height: 1.45; }
  .growth-rule-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .growth-rule-card__metrics > div { min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgb(0 0 0 / .13); }
  .growth-rule-card__metrics dt { color: var(--faint); font-size: .54rem; }
  .growth-rule-card__metrics dd { margin: 2px 0 0; overflow: hidden; color: var(--text-soft); font-size: .66rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
  .growth-rule-card__quality { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border-radius: 10px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .59rem; line-height: 1.42; }
  .growth-rule-card__quality svg { flex: 0 0 auto; color: #67e8f9; }
  .growth-rule-card__actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: auto; }
  .growth-rule-card__delete { width: 42px; padding: 0; color: #fda4af; }
  .growth-rule-card__archived-note { align-self: center; color: var(--faint); font-size: .59rem; font-weight: 720; }
  .growth-admin__empty { display: flex; min-height: 150px; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 12px; padding: 22px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
  .growth-admin__empty svg { color: #a7f3d0; }
  .growth-admin__empty strong { color: var(--text-soft); font-size: .78rem; }
  .growth-admin__empty p { margin-top: 3px; font-size: .64rem; }

  .growth-admin-form { display: grid; gap: 14px; padding: 18px; border: 1px solid rgb(167 139 250 / .18); border-radius: 17px; background: rgb(0 0 0 / .15); }
  .growth-admin-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .growth-admin-form > header h3 { margin-top: 3px; font-size: 1rem; }
  .growth-admin-form__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  .growth-admin-form__grid--wide { grid-template-columns: minmax(160px, .7fr) minmax(240px, 1.3fr); }
  .growth-admin-form__grid--wide .growth-admin-field--wide { grid-column: 1 / -1; }
  .growth-admin-field { display: grid; min-width: 0; gap: 6px; color: var(--muted); font-size: .59rem; font-weight: 720; }
  .growth-admin-field > input, .growth-admin-field > select, .growth-admin-field > textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: var(--surface-2); resize: vertical; }
  .growth-admin-field > textarea { min-height: 78px; line-height: 1.45; }
  .growth-admin-field > input:focus, .growth-admin-field > select:focus, .growth-admin-field > textarea:focus { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); }
  .growth-admin-form__quality { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid rgb(56 189 248 / .13); border-radius: 13px; }
  .growth-admin-form__quality legend { padding: 0 6px; color: #a5f3fc; font-size: .67rem; font-weight: 780; }
  .growth-admin-form__quality > p { color: var(--faint); font-size: .6rem; }
  .growth-admin-form__combo { display: grid; gap: 9px; padding: 13px; border: 1px solid rgb(167 139 250 / .15); border-radius: 13px; background: rgb(139 92 246 / .035); }
  .growth-admin-form__combo[hidden] { display: none; }
  .growth-admin-form__combo > strong { color: #ddd6fe; font-size: .67rem; }
  .growth-admin-form__hint { color: var(--faint); font-size: .59rem; line-height: 1.45; }
  .growth-admin-switch { display: grid; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgb(255 255 255 / .018); cursor: pointer; }
  .growth-admin-switch > span { display: grid; gap: 3px; }
  .growth-admin-switch strong { font-size: .7rem; }
  .growth-admin-switch small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
  .growth-admin-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .growth-admin-switch > i { position: relative; width: 43px; height: 25px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-3); }
  .growth-admin-switch > i::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); content: ""; transition: transform .18s, background .18s; }
  .growth-admin-switch input:checked + i { border-color: transparent; background: linear-gradient(105deg, #10b981, #8b5cf6); }
  .growth-admin-switch input:checked + i::after { background: white; transform: translateX(18px); }
  .growth-admin-switch:focus-within { outline: 3px solid rgb(56 189 248 / .28); outline-offset: 2px; }
  .growth-admin-switch.is-disabled { opacity: .58; cursor: not-allowed; }
  .growth-admin-switch.is-disabled > i { filter: grayscale(1); }
  .growth-admin-form__switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .growth-admin-form__feedback { min-height: 18px; color: #fda4af; font-size: .63rem; }
  .growth-admin-form__feedback:empty { display: none; }
  .growth-admin-form__actions { display: flex; justify-content: flex-end; gap: 8px; }
  .growth-admin-settings { margin-top: 14px; }
  .growth-admin-settings__skeleton { min-height: 360px; border-radius: 17px; }
  .growth-admin-stack-rule { margin-bottom: 2px; }
}

@layer responsive {
  @media (max-width: 900px) {
    .growth-admin-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .growth-admin__list { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 760px) {
    body[data-route="/growth"] .mobile-header { display: none; }
    body[data-route="/growth"] .app-main { padding-top: 0; }
    .growth-goals-page { padding: max(14px, env(safe-area-inset-top)) 14px 34px; }
    .growth-goals-heading { gap: 10px; margin-bottom: 19px; }
    .growth-goals-heading > .icon-button { margin-left: -5px; }
    .growth-goals-heading h1 { font-size: 1.9rem; }
    .growth-goals-heading p { font-size: .75rem; }
    .growth-bonus-hero { min-height: 0; grid-template-columns: minmax(0, 1fr) 105px; gap: 16px; padding: 21px 18px; border-radius: 21px; }
    .growth-bonus-hero__copy h2 { font-size: clamp(1.55rem, 8vw, 2.25rem); }
    .growth-bonus-hero__copy p { font-size: .69rem; }
    .growth-bonus-meter { width: 105px; }
    .growth-bonus-meter::before { inset: 6px; }
    .growth-bonus-hero__stats { grid-template-columns: minmax(0, 1fr); }
    .growth-goals-list { grid-template-columns: minmax(0, 1fr); }
    .growth-goal-card { padding: 16px; border-radius: 17px; }
    .growth-rules { padding: 16px; }

    .growth-admin { padding: 17px 14px; border-radius: 18px; }
    .growth-admin__heading, .growth-admin__subheading { align-items: stretch; flex-direction: column; }
    .growth-admin__tabs, .growth-admin__tabs .segmented__item { width: 100%; }
    .growth-admin__tabs .segmented__item { flex: 1; }
    .growth-admin__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .growth-admin__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .growth-rule-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .growth-rule-card__actions { display: grid; grid-template-columns: 1fr 1fr auto; }
    .growth-rule-card__actions .button { min-width: 0; padding-inline: 9px; }
    .growth-admin-form { padding: 14px; }
    .growth-admin-form__grid, .growth-admin-form__grid--wide, .growth-admin-form__switches { grid-template-columns: minmax(0, 1fr); }
    .growth-admin-form__grid--wide .growth-admin-field--wide { grid-column: auto; }
  }

  @media (max-width: 390px) {
    .growth-bonus-hero { grid-template-columns: minmax(0, 1fr); }
    .growth-bonus-meter { grid-row: 1; width: 92px; justify-self: end; }
    .growth-bonus-hero__copy { grid-row: 2; }
    .growth-bonus-hero__stats { grid-row: 3; }
    .growth-goal-card__header { grid-template-columns: auto minmax(0, 1fr); }
    .growth-goal-card__reward { grid-column: 2; justify-self: start; }
    .growth-rule-card__header { grid-template-columns: auto minmax(0, 1fr); }
    .growth-rule-card__status { grid-column: 2; justify-self: start; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .growth-goal-card__progress > i, .growth-admin-switch > i::after { transition: none; }
  }
}

@layer components {
  /* Tag, mentions and collaborations */
  .people-picker { display: grid; min-width: 0; gap: 8px; }
  .people-picker__trigger {
    display: grid; width: 100%; min-height: 68px; grid-template-columns: 43px minmax(0, 1fr) auto 20px;
    align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px;
    color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s;
  }
  .people-picker__trigger:hover, .people-picker__trigger:focus-visible { border-color: rgb(167 139 250 / .34); background: var(--gradient-soft); transform: translateY(-1px); }
  .people-picker__trigger:focus-visible { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  .people-picker__at, .people-picker-sheet__icon {
    display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #ede9fe;
    background: linear-gradient(145deg, rgb(139 92 246 / .3), rgb(236 72 153 / .16)); font-size: 1.2rem; font-weight: 850;
  }
  .people-picker--collaboration .people-picker__at { color: #a5f3fc; background: linear-gradient(145deg, rgb(14 165 233 / .23), rgb(139 92 246 / .17)); }
  .people-picker__trigger-copy { display: grid; min-width: 0; gap: 3px; }
  .people-picker__trigger-copy strong { font-size: .79rem; }
  .people-picker__trigger-copy small { overflow: hidden; color: var(--muted); font-size: .62rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .people-picker__count { min-width: 40px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--faint); background: rgb(0 0 0 / .14); font-size: .58rem; font-weight: 820; text-align: center; }
  .people-picker__count.is-active { border-color: rgb(167 139 250 / .24); color: #ddd6fe; background: rgb(139 92 246 / .1); }
  .people-picker__chips { display: flex; max-height: 116px; flex-wrap: wrap; gap: 6px; overflow-y: auto; padding: 2px; }
  .people-picker__chips[hidden] { display: none; }
  .people-picker-chip { display: inline-flex; min-width: 0; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: rgb(255 255 255 / .025); font-size: .61rem; font-weight: 730; }
  .people-picker-chip > span:nth-child(2) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .people-picker-chip .avatar { width: 22px; height: 22px; font-size: .48rem; }
  .people-picker-chip button { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted); background: rgb(255 255 255 / .035); cursor: pointer; }
  .people-picker-chip button:hover { color: white; background: rgb(244 63 94 / .14); }

  .people-picker-modal { width: min(590px, 100%); }
  .people-picker-sheet { display: grid; min-height: min(660px, 82dvh); grid-template-rows: auto auto auto minmax(160px, 1fr) auto; padding: 28px 22px max(22px, env(safe-area-inset-bottom)); }
  .people-picker-sheet__heading { display: flex; gap: 12px; padding-right: 42px; }
  .people-picker-sheet__heading > div { min-width: 0; }
  .people-picker-sheet__heading h2 { margin-top: 3px; font-size: 1.4rem; letter-spacing: -.035em; }
  .people-picker-sheet__heading p { margin-top: 5px; color: var(--muted); font-size: .66rem; line-height: 1.4; }
  .people-picker-sheet .people-picker-sheet__search { width: 100%; max-width: none; margin-top: 18px; background: var(--surface-2); }
  .people-picker-sheet__status { min-height: 30px; padding: 8px 3px 5px; color: var(--faint); font-size: .6rem; }
  .people-picker-sheet__results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .people-picker-result { display: grid; width: 100%; min-height: 65px; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgb(255 255 255 / .045); border-radius: 12px; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: background .16s, opacity .16s; }
  .people-picker-result:hover:not(:disabled), .people-picker-result:focus-visible { background: rgb(255 255 255 / .045); }
  .people-picker-result:disabled { opacity: .42; cursor: not-allowed; }
  .people-picker-result.is-selected { background: linear-gradient(105deg, rgb(139 92 246 / .14), rgb(236 72 153 / .035)); }
  .people-picker-result__identity { display: grid; min-width: 0; gap: 3px; }
  .people-picker-result__identity strong, .people-picker-result__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .people-picker-result__identity strong { font-size: .78rem; }
  .people-picker-result__identity small { color: var(--muted); font-size: .62rem; }
  .people-picker-result__check { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgb(255 255 255 / .025); }
  .people-picker-result.is-selected .people-picker-result__check { border-color: transparent; color: white; background: var(--gradient); }
  .people-picker-result__state { color: var(--faint); font-size: .57rem; font-weight: 740; }
  .people-picker-result--skeleton { cursor: default; }
  .people-picker-result--skeleton .skeleton-line { width: 55%; }
  .people-picker-sheet__empty, .people-picker-sheet__error { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; padding: 22px; color: var(--muted); text-align: center; }
  .people-picker-sheet__empty svg { margin-bottom: 10px; color: var(--faint); }
  .people-picker-sheet__empty strong { color: var(--text-soft); font-size: .82rem; }
  .people-picker-sheet__empty p, .people-picker-sheet__error { margin-top: 5px; font-size: .65rem; }
  .people-picker-sheet__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .people-picker-sheet__footer small { max-width: 350px; color: var(--faint); font-size: .59rem; line-height: 1.4; }

  /* Story creation canvas */
  .story-editor { display: grid; width: min(100%, 430px); gap: 9px; justify-self: center; }
  .story-editor[hidden] { display: none; }
  .story-editor__toolbar { display: flex; justify-content: center; gap: 8px; }
  .story-editor__tool { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: white; background: rgb(17 17 24 / .88); cursor: pointer; backdrop-filter: blur(12px); }
  .story-editor__tool:hover, .story-editor__tool:focus-visible { border-color: rgb(167 139 250 / .4); background: var(--gradient-soft); }
  .story-editor__tool b { font-size: .9rem; }
  .story-editor__tool span { font-size: .63rem; font-weight: 760; }
  .story-editor__stage { position: relative; width: min(100%, 390px); aspect-ratio: 9 / 16; justify-self: center; overflow: hidden; border: 1px solid rgb(255 255 255 / .13); border-radius: 25px; background: #08080b; box-shadow: 0 24px 70px rgb(0 0 0 / .32); isolation: isolate; }
  .story-editor__media, .story-editor__media img, .story-editor__media video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .story-editor__media img, .story-editor__media video { object-fit: cover; }
  .story-editor__media::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / .18), transparent 28%, transparent 70%, rgb(0 0 0 / .25)); content: ""; pointer-events: none; }
  .story-editor__overlays { position: absolute; inset: 0; z-index: 3; }
  .story-editor-overlay { position: absolute; z-index: 1; max-width: 82%; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; color: white; background: transparent; font-size: clamp(.9rem, 4vw, 1.32rem); font-weight: 720; line-height: 1.15; text-shadow: 0 2px 8px rgb(0 0 0 / .65); cursor: grab; touch-action: none; user-select: none; transform-origin: center; white-space: pre-wrap; overflow-wrap: anywhere; }
  .story-editor-overlay:active { cursor: grabbing; }
  .story-editor-overlay.is-selected { border-color: rgb(255 255 255 / .72); box-shadow: 0 0 0 2px rgb(139 92 246 / .45); }
  .story-editor-overlay--classic { font-weight: 650; }
  .story-editor-overlay--strong { font-size: clamp(1.05rem, 5vw, 1.55rem); font-weight: 900; letter-spacing: -.035em; }
  .story-editor-overlay--neon { font-weight: 760; text-shadow: 0 0 6px currentColor, 0 0 18px currentColor, 0 2px 8px #000; }
  .story-editor-overlay--label { padding: 7px 11px; color: #111827 !important; background: rgb(255 255 255 / .92); text-shadow: none; }
  .story-editor-overlay--mention { padding: 7px 11px; border-color: rgb(255 255 255 / .22); border-radius: 999px; background: linear-gradient(110deg, rgb(139 92 246 / .82), rgb(236 72 153 / .78)); font-size: .82rem; font-weight: 850; text-shadow: 0 1px 5px rgb(0 0 0 / .35); backdrop-filter: blur(8px); }
  .story-editor__selection-tools { display: flex; max-width: 100%; justify-content: center; gap: 5px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
  .story-editor__selection-tools[hidden] { display: none; }
  .story-editor__selection-tools button { display: grid; min-width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--text-soft); background: var(--surface-2); cursor: pointer; }
  .story-editor__selection-tools button:hover { color: white; background: var(--gradient-soft); }
  .story-editor__mention-settings { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: rgb(255 255 255 / .018); }
  .story-editor__mention-settings[hidden] { display: none; }
  .story-editor__mention-settings > header { display: grid; gap: 2px; margin-bottom: 3px; }
  .story-editor__mention-settings > header strong { font-size: .7rem; }
  .story-editor__mention-settings > header small { color: var(--faint); font-size: .57rem; }
  .story-editor__mention-toggle { display: grid; min-height: 42px; grid-template-columns: minmax(0, 1fr) auto 37px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; color: var(--text-soft); background: rgb(255 255 255 / .025); text-align: left; cursor: pointer; }
  .story-editor__mention-toggle > span { overflow: hidden; font-size: .65rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
  .story-editor__mention-toggle > small { color: var(--faint); font-size: .55rem; }
  .story-editor__mention-toggle > i { position: relative; width: 37px; height: 22px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface-3); }
  .story-editor__mention-toggle > i::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); content: ""; transition: transform .18s, background .18s; }
  .story-editor__mention-toggle[aria-checked="true"] > i { border-color: transparent; background: var(--gradient); }
  .story-editor__mention-toggle[aria-checked="true"] > i::after { background: white; transform: translateX(15px); }
  .story-editor__hint { color: var(--faint); font-size: .58rem; line-height: 1.45; text-align: center; }
  .story-editor-media-actions { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
  .story-editor-media-actions[hidden] { display: none; }
  .story-editor-media-actions .is-danger { color: #fecdd3; }

  .story-text-modal { width: min(520px, 100%); }
  .story-text-dialog { display: grid; gap: 16px; padding: 30px 24px max(25px, env(safe-area-inset-bottom)); }
  .story-text-dialog h2 { margin-top: -11px; font-size: 1.42rem; letter-spacing: -.035em; }
  .story-text-dialog__preview { display: grid; min-height: 110px; place-items: center; padding: 18px; border-radius: 17px; background: radial-gradient(circle at 20% 10%, rgb(139 92 246 / .28), transparent 40%), #0d0d13; font-size: 1.45rem; font-weight: 720; white-space: pre-wrap; overflow-wrap: anywhere; }
  .story-text-dialog > section { display: grid; gap: 8px; }
  .story-text-dialog > section > strong { color: var(--muted); font-size: .65rem; }
  .story-text-dialog__options, .story-text-dialog__align { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .story-text-dialog__options button, .story-text-dialog__align button { min-height: 42px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface-2); font-size: .62rem; font-weight: 740; cursor: pointer; }
  .story-text-dialog__options button.is-active, .story-text-dialog__align button.is-active { border-color: rgb(167 139 250 / .42); color: white; background: var(--gradient-soft); }
  .story-text-dialog__colors { display: flex; flex-wrap: wrap; gap: 8px; }
  .story-text-dialog__colors button { width: 38px; height: 38px; border: 2px solid transparent; border-radius: 50%; background: var(--story-text-color); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); cursor: pointer; }
  .story-text-dialog__colors button.is-active { border-color: white; box-shadow: 0 0 0 3px rgb(139 92 246 / .42); }
  .story-text-dialog__align { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-text-dialog footer { display: flex; justify-content: flex-end; }

  /* Story playback overlays */
  .story-rendered-overlays { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .story-rendered-overlay { position: absolute; max-width: 82%; font-size: clamp(.95rem, 4vw, 1.35rem); font-weight: 720; line-height: 1.15; text-shadow: 0 2px 8px rgb(0 0 0 / .65); white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
  .story-rendered-overlay.story-editor-overlay--label { padding: 7px 11px; border-radius: 9px; }
  .story-rendered-overlay.story-editor-overlay--mention { padding: 7px 11px; border-radius: 999px; pointer-events: auto; }
  .story-rendered-overlay a { pointer-events: auto; }

  /* Owner menus and activity inbox */
  .story-actions-sheet, .story-mentions-manager, .post-people-manager, .tag-activity { padding: 30px 24px max(27px, env(safe-area-inset-bottom)); }
  .story-actions-sheet h2, .story-mentions-manager h2, .post-people-manager h2, .tag-activity h2 { margin-top: 3px; font-size: 1.45rem; letter-spacing: -.035em; }
  .story-actions-sheet > p, .story-mentions-manager > p, .post-people-manager > p, .tag-activity__heading p { margin-top: 6px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
  .story-actions-sheet__list { display: grid; gap: 7px; margin-top: 20px; }
  .story-actions-sheet__item { display: grid; width: 100%; min-height: 68px; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer; }
  .story-actions-sheet__item:hover, .story-actions-sheet__item:focus-visible { border-color: rgb(167 139 250 / .34); background: var(--gradient-soft); }
  .story-actions-sheet__item:disabled { opacity: .5; cursor: wait; }
  .story-actions-sheet__item.is-danger { color: #fecdd3; }
  .story-actions-sheet__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #ddd6fe; background: var(--gradient-soft); font-size: 1.1rem; font-weight: 850; }
  .story-actions-sheet__item.is-danger .story-actions-sheet__icon { color: #fda4af; background: rgb(244 63 94 / .09); }
  .story-actions-sheet__copy { display: grid; gap: 3px; }
  .story-actions-sheet__copy strong { font-size: .78rem; }
  .story-actions-sheet__copy small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
  .story-mentions-manager > .people-picker, .post-people-manager > .people-picker { margin-top: 18px; }
  .story-mentions-manager__feedback, .post-people-manager__feedback { min-height: 20px; margin-top: 10px; color: #fda4af; font-size: .65rem; }
  .story-mentions-manager footer, .post-people-manager footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
  .story-mentions-manager footer small, .post-people-manager footer small { color: var(--faint); font-size: .58rem; line-height: 1.4; }

  .post-collaborators { display: flex; min-width: 0; align-items: center; overflow: hidden; color: rgb(255 255 255 / .66); font-size: .62rem; white-space: nowrap; }
  .post-collaborators a { flex: 0 1 auto; color: rgb(255 255 255 / .9); font-size: inherit; }
  .post-collaborators a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .post-tags { display: flex; max-width: min(78vw, 560px); align-items: center; gap: 3px; overflow: hidden; color: rgb(255 255 255 / .68); font-size: .61rem; white-space: nowrap; text-shadow: 0 1px 5px rgb(0 0 0 / .72); }
  .post-tags[hidden] { display: none; }
  .post-tags__at { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; color: white; font-size: .66rem; font-weight: 850; }
  .post-tags__label { margin-right: 2px; color: rgb(255 255 255 / .78); font-weight: 700; }
  .post-tags a { flex: 0 1 auto; overflow: hidden; color: white; text-overflow: ellipsis; }
  .post-tags a:hover, .post-tags a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
  .post-menu__at { display: grid; width: 17px; place-items: center; font-size: .9rem; font-weight: 850; }

  .tag-activity-modal, .story-actions-modal, .story-mentions-manager-modal, .post-people-manager-modal { width: min(640px, 100%); }
  .tag-activity { display: grid; gap: 22px; }
  .tag-activity__heading { display: flex; gap: 12px; padding-right: 42px; }
  .tag-activity__heading-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #ede9fe; background: var(--gradient-soft); font-size: 1.2rem; font-weight: 850; }
  .tag-activity__section > header { display: grid; gap: 3px; margin-bottom: 8px; }
  .tag-activity__section > header h3 { font-size: .83rem; }
  .tag-activity__section > header small { color: var(--faint); font-size: .6rem; }
  .tag-activity__list { display: grid; max-height: 38dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .015); }
  .tag-activity-row { display: grid; min-height: 78px; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); transition: opacity .2s, background .2s; }
  .tag-activity-row:last-child { border-bottom: 0; }
  .tag-activity-row.is-complete { opacity: .55; background: rgb(52 211 153 / .05); }
  .tag-activity-row__copy { display: grid; min-width: 0; gap: 3px; }
  .tag-activity-row__copy strong, .tag-activity-row__copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag-activity-row__copy strong { font-size: .72rem; }
  .tag-activity-row__open { width: fit-content; max-width: 100%; padding: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
  .tag-activity-row__open:hover strong, .tag-activity-row__open:focus-visible strong { color: #ddd6fe; text-decoration: underline; text-underline-offset: 2px; }
  .tag-activity-row__copy p { color: var(--muted); font-size: .61rem; }
  .tag-activity-row__copy time, .tag-activity-row__status { color: var(--faint); font-size: .55rem; }
  .tag-activity-row__status:not(:empty) { color: #c4b5fd; }
  .tag-activity-row__actions { display: flex; flex: 0 0 auto; gap: 5px; }
  .tag-activity-row__actions .button { min-height: 34px; padding-inline: 9px; font-size: .59rem; }
  .tag-activity-row__actions--compact .button { gap: 5px; }
  .tag-activity-row--skeleton .skeleton-line { width: min(240px, 46vw); }
  .tag-activity__empty { display: flex; min-height: 145px; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: var(--muted); text-align: center; }
  .tag-activity__empty svg { margin-bottom: 8px; color: var(--faint); }
  .tag-activity__empty strong { color: var(--text-soft); font-size: .75rem; }
  .tag-activity__empty p { max-width: 360px; margin-top: 4px; font-size: .61rem; line-height: 1.4; }
  .tag-activity__empty .button { margin-top: 11px; }
  .tag-activity__pagination { position: sticky; bottom: 0; display: grid; gap: 7px; justify-items: center; padding: 10px; border-top: 1px solid var(--line); background: rgb(14 14 20 / .94); backdrop-filter: blur(12px); }
  .tag-activity__pagination[hidden] { display: none; }
  .tag-activity__pagination-status { color: #fca5a5; font-size: .58rem; line-height: 1.35; text-align: center; }
  .tag-activity__pagination-status:empty { display: none; }
  .tag-activity__more { min-height: 36px; }

  .sidebar__utility-button { position: relative; display: flex; width: 100%; align-items: center; gap: 8px; padding: 0; color: var(--muted); background: transparent; font-size: inherit; text-align: left; cursor: pointer; }
  .sidebar__utility-button:hover { color: white; }
  .sidebar__utility-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-badge--inline { position: static; display: grid; min-width: 17px; height: 17px; margin-left: auto; place-items: center; padding-inline: 4px; border-radius: 99px; color: white; background: #e11d48; font-size: .5rem; }
  .tag-collaboration-inbox-button { position: relative; }
  .tag-collaboration-inbox-button .nav-badge { top: 1px; right: 0; }
}

@layer responsive {
  @media (max-width: 760px) {
    .composer-media:has(.story-editor:not([hidden])) { min-height: 0; }
    .story-editor { width: 100%; }
    .story-editor__stage { width: min(100%, 390px); border-radius: 20px; }
    .people-picker__trigger { grid-template-columns: 40px minmax(0, 1fr) auto 18px; }
    .people-picker__at { width: 40px; height: 40px; }
    .people-picker__trigger-copy small { white-space: normal; }
    .people-picker-sheet { min-height: 78dvh; padding-inline: 16px; }
    .people-picker-sheet__footer, .story-mentions-manager footer, .post-people-manager footer { align-items: stretch; flex-direction: column; }
    .people-picker-sheet__footer .button, .story-mentions-manager footer .button, .post-people-manager footer .button { width: 100%; }
    .story-actions-sheet, .story-mentions-manager, .post-people-manager, .tag-activity { padding-inline: 17px; }
    .tag-activity-row { grid-template-columns: 40px minmax(0, 1fr); }
    .tag-activity-row__actions { grid-column: 2; flex-wrap: wrap; }
    .tag-activity-row__actions .button { flex: 1; }
    .tag-activity__list { max-height: 34dvh; }
  }

  @media (min-width: 900px) {
    .story-editor__stage { max-height: calc(100dvh - 180px); }
    .tag-activity__list { max-height: 34dvh; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .people-picker__trigger, .people-picker-result, .story-editor__mention-toggle > i::after, .tag-activity-row { transition: none; }
  }
}

@layer pages {
  /* Personal invitation hub */
  .page.invite-page { max-width: 1120px; padding-bottom: max(50px, calc(var(--mobile-nav, 0px) + env(safe-area-inset-bottom))); }
  .invite-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 27px; }
  .invite-heading__back { flex: 0 0 auto; margin-top: 3px; }
  .invite-heading h1 { margin-top: 4px; font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -.045em; line-height: 1.04; }
  .invite-heading p { max-width: 650px; margin-top: 8px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
  .invite-page__content { min-height: 520px; }
  .invite-layout { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); align-items: start; gap: clamp(22px, 4vw, 44px); }
  .invite-preview { position: sticky; top: 24px; display: grid; place-items: start center; }

  .invite-card { position: relative; isolation: isolate; display: flex; width: min(100%, 390px); min-height: 595px; overflow: hidden; flex-direction: column; align-items: center; padding: 31px 30px 28px; border: 1px solid rgb(255 255 255 / .16); border-radius: 31px; background: radial-gradient(circle at 12% 8%, rgb(56 189 248 / .42), transparent 31%), radial-gradient(circle at 88% 79%, rgb(236 72 153 / .55), transparent 37%), linear-gradient(145deg, #1d0b3b, #6d28d9 48%, #be185d); box-shadow: 0 34px 85px rgb(21 8 45 / .44); text-align: center; }
  .invite-card__glow { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgb(255 255 255 / .38) .7px, transparent .7px); background-size: 16px 16px; mask-image: linear-gradient(180deg, black, transparent 68%); }
  .invite-card__logo { width: 108px; height: auto; }
  .invite-card__identity { display: flex; width: 100%; align-items: center; gap: 11px; margin-top: 31px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .13); border-radius: 17px; background: rgb(8 8 13 / .2); text-align: left; backdrop-filter: blur(14px); }
  .invite-card__avatar { border: 2px solid rgb(255 255 255 / .72); box-shadow: 0 8px 22px rgb(0 0 0 / .2); }
  .invite-card__identity > div { display: grid; min-width: 0; gap: 2px; }
  .invite-card__identity span, .invite-card__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .invite-card__identity span { color: rgb(255 255 255 / .68); font-size: .64rem; }
  .invite-card__identity strong { font-size: .78rem; }
  .invite-card h2 { margin-top: 23px; font-size: clamp(1.45rem, 4vw, 1.82rem); letter-spacing: -.045em; }
  .invite-card > p { max-width: 290px; margin-top: 7px; color: rgb(255 255 255 / .72); font-size: .71rem; line-height: 1.5; }
  .invite-card__qr { display: grid; width: 193px; height: 193px; place-items: center; margin-top: 23px; padding: 11px; border-radius: 25px; background: white; box-shadow: 0 18px 45px rgb(0 0 0 / .22); }
  .invite-card__qr svg { width: 100%; height: 100%; border-radius: 15px; }
  .invite-card__qr.is-disabled { align-content: center; gap: 8px; color: #71717a; background: rgb(255 255 255 / .9); }
  .invite-card__qr.is-disabled span { font-size: .67rem; font-weight: 760; }
  .invite-card > small { margin-top: 12px; color: rgb(255 255 255 / .66); font-size: .61rem; }
  .invite-card__mark { position: absolute; right: 22px; bottom: 20px; width: 35px; opacity: .34; }
  .invite-card.is-disabled { filter: saturate(.52); }

  .invite-controls { display: grid; min-width: 0; gap: 14px; }
  .invite-panel { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgb(255 255 255 / .026), rgb(255 255 255 / .012)); box-shadow: 0 20px 55px rgb(0 0 0 / .14); }
  .invite-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
  .invite-panel__heading h2 { margin-top: 3px; font-size: 1.08rem; letter-spacing: -.025em; }
  .invite-state { flex: 0 0 auto; padding: 5px 9px; border-radius: 99px; font-size: .56rem; font-weight: 830; letter-spacing: .04em; text-transform: uppercase; }
  .invite-state.is-active { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .invite-state.is-disabled { color: #fecdd3; background: rgb(244 63 94 / .09); }
  .invite-link { display: grid; min-height: 58px; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 16px; padding: 8px 8px 8px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
  .invite-link > svg { color: var(--violet-light); }
  .invite-link__value { overflow: hidden; color: var(--text-soft); font-size: .72rem; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
  .invite-link .invite-action { min-height: 38px; padding-inline: 11px; font-size: .65rem; }
  .invite-message { display: grid; gap: 5px; margin-top: 13px; padding: 12px 13px; border-left: 2px solid rgb(167 139 250 / .42); border-radius: 0 12px 12px 0; color: var(--muted); background: rgb(139 92 246 / .045); font-size: .68rem; line-height: 1.48; }
  .invite-message strong { color: var(--text-soft); font-size: .67rem; }
  .invite-primary-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; margin-top: 14px; }
  .invite-primary-actions .button:first-child { border-color: transparent; background: var(--gradient); }
  .invite-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 15px; }
  .invite-channel { display: grid; min-height: 91px; place-items: center; align-content: center; gap: 8px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 15px; color: var(--text-soft); background: var(--surface-2); font-size: .67rem; font-weight: 740; cursor: pointer; transition: border-color .18s, color .18s, background .18s, transform .18s; }
  .invite-channel:hover:not(:disabled), .invite-channel:focus-visible { border-color: rgb(167 139 250 / .34); color: white; background: var(--gradient-soft); transform: translateY(-2px); }
  .invite-channel:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .invite-channel:disabled { opacity: .42; cursor: default; }
  .invite-channel__icon { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 13px; color: #ddd6fe; background: var(--gradient-soft); }
  .invite-channel.is-whatsapp .invite-channel__icon { color: #a7f3d0; background: rgb(34 197 94 / .1); }
  .invite-channel.is-sms .invite-channel__icon { color: #bae6fd; background: rgb(56 189 248 / .1); }
  .invite-channel.is-email .invite-channel__icon { color: #fbcfe8; background: rgb(236 72 153 / .1); }
  .invite-contacts-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 13px; color: var(--faint); font-size: .61rem; line-height: 1.45; }
  .invite-contacts-note svg { flex: 0 0 auto; margin-top: 1px; color: #a7f3d0; }
  .invite-insights__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
  .invite-metric { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
  .invite-metric strong { font-size: 1.55rem; letter-spacing: -.045em; }
  .invite-metric span { color: var(--text-soft); font-size: .7rem; font-weight: 740; }
  .invite-metric small { color: var(--faint); font-size: .57rem; line-height: 1.35; }
  .invite-insights__channels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .invite-insights__channels > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgb(255 255 255 / .022); }
  .invite-insights__channels strong { color: var(--text-soft); font-size: .62rem; }
  .invite-insights__channels small { font-size: .57rem; }
  .invite-insights__empty { margin-top: 13px; color: var(--faint); font-size: .64rem; line-height: 1.45; }
  .invite-manage > p { margin-top: 11px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
  .invite-manage__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .invite-manage__danger { color: #fda4af; }
  .invite-manage > small { display: flex; align-items: flex-start; gap: 6px; margin-top: 13px; color: var(--faint); font-size: .59rem; line-height: 1.4; }
  .invite-manage > small svg { flex: 0 0 auto; margin-top: 1px; }
  .invite-loading, .invite-load-error { display: flex; min-height: 460px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 34px; border: 1px dashed var(--line); border-radius: 22px; color: var(--muted); text-align: center; }
  .invite-load-error > svg { color: var(--faint); }
  .invite-load-error h2 { color: var(--text); font-size: 1.25rem; }
  .invite-load-error p { max-width: 430px; font-size: .75rem; line-height: 1.5; }
  .invite-load-error .button { margin-top: 4px; }

  /* Public invite route deliberately exposes no profile link or private data. */
  .invite-landing { position: relative; isolation: isolate; display: grid; min-height: 100dvh; overflow: hidden; place-items: center; padding: max(25px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: radial-gradient(circle at 15% 10%, rgb(56 189 248 / .22), transparent 31%), radial-gradient(circle at 87% 82%, rgb(236 72 153 / .3), transparent 38%), #08080c; }
  .invite-landing__glow { position: absolute; inset: 0; z-index: -1; opacity: .34; background-image: radial-gradient(rgb(255 255 255 / .26) .7px, transparent .7px); background-size: 18px 18px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
  .invite-landing__card { display: flex; width: min(100%, 520px); flex-direction: column; align-items: center; padding: clamp(31px, 7vw, 54px); border: 1px solid rgb(255 255 255 / .12); border-radius: 31px; background: linear-gradient(150deg, rgb(28 28 39 / .94), rgb(14 14 20 / .96)); box-shadow: 0 35px 100px rgb(0 0 0 / .5); text-align: center; backdrop-filter: blur(20px); }
  .invite-landing__logo { width: 126px; margin-bottom: 29px; }
  .invite-landing__avatar { width: 94px; height: 94px; margin-bottom: 18px; border: 4px solid rgb(255 255 255 / .84); box-shadow: 0 15px 35px rgb(0 0 0 / .35); font-size: 1.25rem; }
  .invite-landing__card h1 { max-width: 430px; margin-top: 7px; font-size: clamp(1.65rem, 7vw, 2.4rem); letter-spacing: -.05em; line-height: 1.06; }
  .invite-landing__card > p { max-width: 410px; margin-top: 12px; color: var(--muted); font-size: .79rem; line-height: 1.56; }
  .invite-landing__actions { display: grid; width: 100%; gap: 9px; margin-top: 25px; }
  .invite-landing__card > small { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin-top: 19px; color: var(--faint); font-size: .59rem; line-height: 1.45; }
  .invite-landing__card > small svg { flex: 0 0 auto; margin-top: 1px; }
  .invite-landing__error-icon { display: grid; width: 71px; height: 71px; margin-bottom: 17px; place-items: center; border-radius: 23px; color: #fda4af; background: rgb(244 63 94 / .09); }
  .invite-landing__card--error .button { width: 100%; margin-top: 23px; }
}

/* Audio posts ----------------------------------------------------------- */
@layer components {
  .audio-post-player {
    --audio-progress: 0%;
    --audio-progress-ratio: 0;
    --audio-identity-a: var(--brand-blue, #4285f4);
    --audio-identity-b: var(--brand-green, #34a853);
    --audio-identity-c: var(--brand-yellow, #fbbc05);
    position: absolute; inset: 0; display: grid; overflow: hidden; place-items: center;
    padding: clamp(12px, 3.2vw, 24px);
    color: white; background:
      radial-gradient(circle at 5% 3%, rgb(66 133 244 / .18), transparent 32%),
      radial-gradient(circle at 94% 92%, rgb(234 67 53 / .14), transparent 34%),
      linear-gradient(148deg, #202228 0%, #121419 55%, #090b0e 100%);
    isolation: isolate;
  }
  .audio-post-player[data-identity-palette="1"] { --audio-identity-a: var(--brand-red, #ea4335); --audio-identity-b: var(--brand-yellow, #fbbc05); --audio-identity-c: var(--brand-blue, #4285f4); }
  .audio-post-player[data-identity-palette="2"] { --audio-identity-a: var(--brand-green, #34a853); --audio-identity-b: var(--brand-blue, #4285f4); --audio-identity-c: var(--brand-red, #ea4335); }
  .audio-post-player[data-identity-palette="3"] { --audio-identity-a: var(--brand-yellow, #fbbc05); --audio-identity-b: var(--brand-red, #ea4335); --audio-identity-c: var(--brand-green, #34a853); }
  .audio-post-player[data-identity-palette="4"] { --audio-identity-a: var(--brand-blue, #4285f4); --audio-identity-b: var(--brand-red, #ea4335); --audio-identity-c: var(--brand-yellow, #fbbc05); }
  .audio-post-player[data-identity-palette="5"] { --audio-identity-a: var(--brand-green, #34a853); --audio-identity-b: var(--brand-yellow, #fbbc05); --audio-identity-c: var(--brand-blue, #4285f4); }
  .audio-post-player[data-identity-palette="6"] { --audio-identity-a: var(--brand-red, #ea4335); --audio-identity-b: var(--brand-blue, #4285f4); --audio-identity-c: var(--brand-green, #34a853); }
  .audio-post-player[data-identity-palette="7"] { --audio-identity-a: var(--brand-yellow, #fbbc05); --audio-identity-b: var(--brand-green, #34a853); --audio-identity-c: var(--brand-red, #ea4335); }
  .audio-post-player__identity {
    position: absolute; inset: -12%; z-index: 0; overflow: hidden; contain: paint; pointer-events: none;
    background:
      radial-gradient(circle at 16% 12%, var(--audio-identity-a), transparent 54%),
      radial-gradient(circle at 88% 82%, var(--audio-identity-b), transparent 58%),
      radial-gradient(circle at 63% 22%, var(--audio-identity-c), transparent 64%),
      #11141a;
  }
  .audio-post-player__identity img {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
    filter: blur(clamp(30px, 6vw, 58px)) saturate(1.42) brightness(.7); opacity: .74;
    transform: scale(1.2); transform-origin: center;
  }
  .audio-post-player__identity::before,
  .audio-post-player__identity::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
  .audio-post-player__identity::before {
    z-index: 1; opacity: .26; mix-blend-mode: color;
    background: linear-gradient(135deg, var(--audio-identity-a), var(--audio-identity-b) 54%, var(--audio-identity-c));
  }
  .audio-post-player__identity::after {
    z-index: 2;
    background:
      radial-gradient(circle at 50% 43%, rgb(5 7 10 / .16), rgb(5 7 10 / .5) 76%),
      linear-gradient(180deg, rgb(5 7 10 / .42), rgb(5 7 10 / .68));
  }
  .audio-post-player__identity.is-fallback::before { opacity: .45; mix-blend-mode: normal; }
  .audio-post-player::after {
    position: absolute; inset: 0; z-index: 2; opacity: .18;
    background-image: radial-gradient(rgb(255 255 255 / .52) .6px, transparent .6px);
    background-size: 17px 17px; mask-image: linear-gradient(180deg, black, transparent 70%); content: "";
  }
  .audio-post-player--mixvoice { --mixvoice-accent: #a78bfa; --mixvoice-accent-2: #ec4899; }
  .audio-post-player--theme-sunset { --mixvoice-accent: #fb923c; --mixvoice-accent-2: #f43f5e; background: radial-gradient(circle at 6% 3%, rgb(251 146 60 / .2), transparent 34%), radial-gradient(circle at 94% 92%, rgb(244 63 94 / .16), transparent 36%), linear-gradient(148deg, #262126, #141216 54%, #0b0c0f); }
  .audio-post-player--theme-ocean { --mixvoice-accent: #38bdf8; --mixvoice-accent-2: #14b8a6; background: radial-gradient(circle at 6% 3%, rgb(56 189 248 / .2), transparent 34%), radial-gradient(circle at 94% 92%, rgb(20 184 166 / .16), transparent 36%), linear-gradient(148deg, #1b252b, #10171b 54%, #080c0e); }
  .audio-post-player--theme-midnight { --mixvoice-accent: #818cf8; --mixvoice-accent-2: #64748b; background: radial-gradient(circle at 6% 3%, rgb(99 102 241 / .2), transparent 34%), radial-gradient(circle at 94% 92%, rgb(71 85 105 / .18), transparent 36%), linear-gradient(148deg, #20222d, #11131c 54%, #08090d); }
  .audio-post-player__glow {
    position: absolute; right: -13%; bottom: 5%; z-index: 1; width: 54%; aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(from 32deg, var(--audio-identity-a), var(--audio-identity-b), var(--audio-identity-c), var(--audio-identity-a));
    filter: blur(46px); opacity: .2; pointer-events: none;
  }
  .audio-post-player__panel {
    position: relative; z-index: 3; display: grid; width: min(100%, 680px); max-height: 100%;
    gap: clamp(8px, 1.7vw, 13px); padding: clamp(13px, 3vw, 22px);
    border: 1px solid rgb(255 255 255 / .1); border-radius: clamp(18px, 4vw, 28px);
    background: linear-gradient(145deg, rgb(28 31 38 / .86), rgb(10 12 16 / .78));
    box-shadow: inset 0 1px rgb(255 255 255 / .055), 0 20px 58px rgb(0 0 0 / .3);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .audio-post-player__header {
    position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px;
  }
  .audio-post-player__header,
  .audio-post-player__quote,
  .audio-post-player__control-row,
  .audio-post-player__hint { width: 100%; justify-self: stretch; }
  .audio-post-player__brand { display: flex; min-width: 0; align-items: center; gap: clamp(9px, 2.4vw, 14px); }
  .audio-post-player__brand-mark {
    display: grid; width: clamp(38px, 9.6vw, 50px); aspect-ratio: 1; flex: 0 0 auto; place-items: center;
    border: 1px solid rgb(255 255 255 / .09); border-radius: clamp(12px, 3.4vw, 17px);
    color: white; background: linear-gradient(145deg, rgb(66 133 244 / .2), rgb(234 67 53 / .1));
    box-shadow: inset 0 1px rgb(255 255 255 / .06), 0 12px 30px rgb(0 0 0 / .2);
  }
  .audio-post-player__brand-copy { display: grid; min-width: 0; gap: 2px; }
  .audio-post-player__brand-copy strong { overflow: hidden; font-size: clamp(.69rem, 2.35vw, .94rem); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
  .audio-post-player__brand-copy small { overflow: hidden; color: rgb(255 255 255 / .66); font-size: clamp(.53rem, 1.65vw, .68rem); text-overflow: ellipsis; white-space: nowrap; }
  .audio-post-player__duration-badge {
    flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .07); border-radius: 999px;
    color: rgb(255 255 255 / .78); background: rgb(255 255 255 / .08); font-size: clamp(.55rem, 1.8vw, .72rem); font-variant-numeric: tabular-nums;
  }
  .audio-post-player__quote {
    position: relative; z-index: 1; display: -webkit-box; min-width: 0; overflow: hidden;
    color: rgb(255 255 255 / .95); font-size: clamp(.92rem, 3.65vw, 1.42rem); letter-spacing: -.035em; line-height: 1.17;
    text-wrap: balance; text-shadow: 0 3px 20px rgb(0 0 0 / .34); -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  }
  .audio-post-player__control-row {
    position: relative; z-index: 1; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2.8vw, 18px);
  }
  .audio-post-player__toggle {
    position: relative; display: grid; width: clamp(52px, 13vw, 64px); aspect-ratio: 1; flex: 0 0 auto; place-items: center;
    border: 0; border-radius: 50%; color: white; background: var(--brand-spectrum); cursor: pointer;
    box-shadow: 0 15px 34px rgb(0 0 0 / .32), 0 0 0 1px rgb(255 255 255 / .12); touch-action: manipulation;
    transition: transform .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
  }
  .audio-post-player__toggle::before { position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / .12); border-radius: inherit; background: rgb(15 17 21 / .8); content: ""; }
  .audio-post-player__toggle:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .audio-post-player__toggle:active { transform: scale(.96); }
  .audio-post-player__toggle:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 4px; }
  .audio-post-player__toggle:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .52; }
  .audio-post-player__state { position: relative; z-index: 1; display: grid; place-items: center; }
  .audio-post-player__track { display: grid; min-width: 0; gap: 4px; }
  .audio-post-player__timeline { position: relative; display: grid; height: clamp(44px, 11vw, 58px); align-items: center; isolation: isolate; }
  .audio-post-player__timeline::before,
  .audio-post-player__timeline::after {
    position: absolute; right: 0; bottom: 2px; left: 0; z-index: 0; height: 2px; border-radius: 99px;
    background: rgb(255 255 255 / .13); content: ""; pointer-events: none;
  }
  .audio-post-player__timeline::after {
    background: var(--brand-spectrum); box-shadow: 0 0 8px rgb(66 133 244 / .3);
    transform: scaleX(var(--audio-progress-ratio, 0)); transform-origin: left center;
  }
  .audio-post-player.is-playing .audio-post-player__timeline::after { will-change: transform; }
  .audio-post-player__waveforms {
    position: relative; z-index: 1; height: clamp(34px, 8.8vw, 46px); overflow: hidden; direction: ltr; pointer-events: none;
  }
  .audio-post-player__waveform {
    position: absolute; inset: 0; display: flex; height: 100%; align-items: center;
    gap: clamp(1px, .36vw, 3px); overflow: hidden; pointer-events: none;
  }
  .audio-post-player__bar {
    width: 100%; min-width: 1px; height: var(--bar-height, 18%); border-radius: 99px;
    background: rgb(255 255 255 / .22); box-shadow: 0 0 7px transparent;
  }
  .audio-post-player__waveform--progress {
    clip-path: polygon(0 0, var(--audio-progress, 0%) 0, var(--audio-progress, 0%) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, var(--audio-progress, 0%) 0, var(--audio-progress, 0%) 100%, 0 100%);
  }
  .audio-post-player.is-playing .audio-post-player__waveform--progress { will-change: clip-path; }
  @supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .audio-post-player__waveform--progress {
      clip-path: inset(0 calc(100% - var(--audio-progress, 0%)) 0 0);
      -webkit-clip-path: inset(0 calc(100% - var(--audio-progress, 0%)) 0 0);
    }
  }
  .audio-post-player__waveform--progress .audio-post-player__bar {
    background: var(--brand-spectrum); background-size: var(--bar-spectrum-size) 100%; background-position: var(--bar-position) center;
    box-shadow: 0 0 8px rgb(66 133 244 / .32);
  }
  .audio-post-player__playhead {
    position: absolute; top: 50%; left: var(--audio-progress, 0%); z-index: 2; width: 8px; height: 8px;
    border: 2px solid rgb(255 255 255 / .88); border-radius: 50%; background: #4285f4;
    box-shadow: 0 0 0 3px rgb(66 133 244 / .15), 0 0 12px rgb(66 133 244 / .55);
    pointer-events: none; transform: translate(-50%, -50%);
  }
  .audio-post-player__seek {
    position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: pointer;
  }
  .audio-post-player__seek:disabled { cursor: not-allowed; }
  .audio-post-player__timeline:has(.audio-post-player__seek:focus-visible) { border-radius: 7px; outline: 3px solid #8ab4f8; outline-offset: 4px; }
  .audio-post-player__times { display: flex; justify-content: space-between; gap: 12px; }
  .audio-post-player__time { color: rgb(255 255 255 / .62); font-size: clamp(.53rem, 1.65vw, .68rem); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; }
  .audio-post-player__hint { position: relative; z-index: 1; margin: 0; color: rgb(255 255 255 / .66); font-size: clamp(.52rem, 1.55vw, .63rem); line-height: 1.35; }
  .audio-post-player__media { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .audio-post-player.has-error .audio-post-player__brand-copy small, .audio-post-player.has-error .audio-post-player__hint { color: #fecdd3; }
  .audio-post-player--compact { padding: 7px; }
  .audio-post-player--compact .audio-post-player__panel { gap: 6px; padding: 9px; border-radius: 13px; }
  .audio-post-player--compact .audio-post-player__brand { gap: 6px; }
  .audio-post-player--compact .audio-post-player__brand-mark { width: 30px; border-radius: 10px; }
  .audio-post-player--compact .audio-post-player__brand-copy strong { font-size: .58rem; }
  .audio-post-player--compact .audio-post-player__brand-copy small, .audio-post-player--compact .audio-post-player__hint { display: none; }
  .audio-post-player--compact .audio-post-player__duration-badge { padding: 4px 6px; font-size: .48rem; }
  .audio-post-player--compact .audio-post-player__quote { font-size: clamp(.63rem, 2.3vw, .82rem); -webkit-line-clamp: 2; }
  .audio-post-player--compact .audio-post-player__control-row { gap: 7px; }
  .audio-post-player--compact .audio-post-player__toggle { width: 44px; }
  .audio-post-player--compact .audio-post-player__timeline { height: 32px; }
  .audio-post-player--compact .audio-post-player__waveforms { height: 26px; }
  .audio-post-player--compact .audio-post-player__waveform { gap: 1px; }
  .audio-post-player--compact .audio-post-player__playhead { width: 6px; height: 6px; border-width: 1px; }
  .audio-post-player--compact .audio-post-player__track { gap: 2px; }
  .audio-post-player--compact .audio-post-player__time { font-size: .46rem; }

  .audio-recorder { display: grid; gap: 13px; margin-top: 12px; padding: 17px; border: 1px solid rgb(167 139 250 / .2); border-radius: 19px; background: linear-gradient(135deg, rgb(139 92 246 / .085), rgb(236 72 153 / .035)), var(--surface); }
  .audio-recorder[hidden] { display: none; }
  .audio-recorder__heading { display: flex; align-items: center; gap: 10px; }
  .audio-recorder__heading > div { min-width: 0; }
  .audio-recorder__heading h2 { font-size: .86rem; }
  .audio-recorder__heading p { margin-top: 2px; color: var(--muted); font-size: .62rem; }
  .audio-recorder__icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #f5d0fe; background: linear-gradient(145deg, rgb(139 92 246 / .28), rgb(236 72 153 / .18)); }
  .audio-recorder__meter { display: flex; height: 38px; align-items: center; justify-content: center; gap: 4px; overflow: hidden; border-radius: 11px; background: rgb(0 0 0 / .18); }
  .audio-recorder__meter span { width: 4px; height: max(4px, calc(var(--meter-level, .08) * 34px)); border-radius: 99px; background: rgb(255 255 255 / .2); opacity: max(.36, var(--meter-level, .08)); transition: height 80ms linear, opacity 80ms linear, background .2s; }
  .audio-recorder.is-recording .audio-recorder__meter span { background: linear-gradient(#c4b5fd, #f472b6); }
  .audio-recorder.is-paused .audio-recorder__meter span { background: rgb(255 255 255 / .16); }
  .audio-recorder__status { min-height: 18px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
  .audio-recorder.is-recording .audio-recorder__status { color: #fbcfe8; }
  .audio-recorder__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .audio-recorder__actions .button { min-height: 42px; padding-inline: 11px; }
  .mixvoice-publish-options { display: grid; gap: 16px; padding: 18px; border: 1px solid rgb(167 139 250 / .2); border-radius: 20px; background: linear-gradient(145deg, rgb(124 58 237 / .08), rgb(236 72 153 / .035)); }
  .mixvoice-publish-options[hidden] { display: none; }
  .mixvoice-publish-options__intro { display: flex; align-items: center; gap: 11px; }
  .mixvoice-publish-options__intro > div { display: grid; gap: 2px; }
  .mixvoice-publish-options__intro p { color: var(--muted); font-size: .64rem; line-height: 1.45; }
  .mixvoice-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: white; background: var(--gradient); box-shadow: 0 10px 26px rgb(124 58 237 / .22); }
  .mixvoice-theme-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mixvoice-theme-picker__item { display: grid; min-height: 62px; place-items: center; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 15px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .59rem; }
  .mixvoice-theme-picker__item > span { width: 25px; height: 25px; border: 2px solid rgb(255 255 255 / .52); border-radius: 50%; background: linear-gradient(145deg, #8b5cf6, #ec4899); }
  .mixvoice-theme-picker__item--sunset > span { background: linear-gradient(145deg, #fb923c, #f43f5e); }
  .mixvoice-theme-picker__item--ocean > span { background: linear-gradient(145deg, #38bdf8, #14b8a6); }
  .mixvoice-theme-picker__item--midnight > span { background: linear-gradient(145deg, #6366f1, #475569); }
  .mixvoice-theme-picker__item.is-active { border-color: #a78bfa; color: white; background: rgb(139 92 246 / .14); box-shadow: 0 0 0 2px rgb(139 92 246 / .12); }
  .mixvoice-consent { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid rgb(255 255 255 / .09); border-radius: 15px; background: rgb(0 0 0 / .14); cursor: pointer; }
  .mixvoice-consent input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; accent-color: #8b5cf6; }
  .mixvoice-consent > span { display: grid; gap: 3px; }
  .mixvoice-consent strong { font-size: .7rem; }
  .mixvoice-consent small { color: var(--muted); font-size: .6rem; line-height: 1.45; }
}

@layer pages {
  .feed-card--audio { aspect-ratio: 4 / 5; }
  .feed-stack > .feed-card.feed-card--audio:not(.feed-card--mosaic):not(.feed-card--home) { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .feed-card--audio .feed-card__stage { aspect-ratio: 4 / 5; }
  .feed-card--audio:not(.feed-card--home) .feed-card__shade { background: linear-gradient(180deg, rgb(0 0 0 / .08), transparent 22%, transparent 64%, rgb(0 0 0 / .78) 100%); }
  .feed-card--audio:not(.feed-card--home) .feed-card__info { bottom: 21px; }
  .feed-card--audio:not(.feed-card--home) .post-actions { bottom: 17px; }
  .mosaic-tile[data-content-type="audio"] .mosaic-tile__stage { aspect-ratio: 4 / 5 !important; }
  .upload-item--audio { min-height: 0; aspect-ratio: 4 / 5; grid-column: 1 / -1; grid-row: span 2; }
  .upload-item--audio .audio-post-player { border-radius: inherit; }
  .upload-item--audio-pending { display: grid; min-height: 250px; place-items: center; align-content: center; gap: 13px; padding: 24px; text-align: center; }
  .upload-item--audio-pending strong { max-width: 480px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
  .post-mixvoice-attribution { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 6px; margin-top: 7px; padding: 7px 10px; border: 1px solid rgb(196 181 253 / .2); border-radius: 999px; color: rgb(255 255 255 / .88); background: rgb(10 8 18 / .22); font-size: .58rem; backdrop-filter: blur(8px); }
  .post-mixvoice-attribution__mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: var(--gradient); }
  .post-mixvoice-attribution > span:not(.post-mixvoice-attribution__mark) { overflow: hidden; color: rgb(255 255 255 / .65); text-overflow: ellipsis; white-space: nowrap; }
  .create-page.is-audio .upload-dropzone { height: auto; min-height: 320px; }
  .create-page.is-audio .upload-preview { min-height: 0; grid-auto-rows: auto; }
  .create-page.is-audio .composer-media { min-height: 0; }
  .create-intent-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-intent-card--audio { background: radial-gradient(circle at 90% 8%, rgb(192 132 252 / .2), transparent 36%), var(--surface); }
  .create-intent-card--audio .create-intent-card__icon { background: linear-gradient(145deg, #2f6fda, #1f8f55); }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .audio-post-player__toggle { transition: none; }
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .create-intent-picker { grid-template-columns: 1fr; }
    .create-launcher { width: min(390px, calc(100vw - 24px)); }
    .create-launcher__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .create-launcher__choice { min-height: 82px; }
    .create-launcher.is-open .create-launcher__choice:nth-child(4) { transition-delay: 105ms; }
    .create-launcher__choice--audio .create-launcher__icon { color: #dbeafe; background: linear-gradient(145deg, rgb(66 133 244 / .28), rgb(52 168 83 / .12)); }
    .audio-recorder__actions { grid-template-columns: 1fr 1fr; }
    .mixvoice-theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feed-stack > .feed-card.feed-card--audio:not(.feed-card--mosaic):not(.feed-card--home) { width: min(100%, calc((100dvh - 190px) * .8)); align-self: center; }
  }
  @media (min-width: 761px) {
    .feed-stack > .feed-card.feed-card--audio:not(.feed-card--mosaic):not(.feed-card--home) {
      width: min(100%, calc((100dvh - 210px) * .8)); align-self: center;
    }
    .feed-card--standalone.feed-card--audio { width: min(620px, calc((100dvh - 64px) * .8)); height: auto; min-height: 0; }
  }

  @media (max-width: 850px) {
    .invite-layout { grid-template-columns: minmax(0, 1fr); }
    .invite-preview { position: static; }
    .invite-card { min-height: 570px; }
    .invite-controls { width: min(100%, 650px); margin-inline: auto; }
  }

  @media (max-width: 760px) {
    .page.invite-page { padding-inline: 14px; }
    .invite-heading { gap: 9px; margin-bottom: 20px; }
    .invite-heading__back { margin-left: -5px; }
    .invite-heading h1 { font-size: 1.78rem; }
    .invite-heading p { font-size: .73rem; }
    .invite-card { width: min(100%, 355px); min-height: 540px; padding: 26px 22px 24px; border-radius: 27px; }
    .invite-card__identity { margin-top: 24px; }
    .invite-card h2 { margin-top: 19px; }
    .invite-card__qr { width: 173px; height: 173px; margin-top: 19px; }
    .invite-panel { padding: 16px; border-radius: 18px; }
    .invite-link { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 12px; }
    .invite-link .invite-action { grid-column: 1 / -1; width: 100%; }
    .invite-primary-actions { grid-template-columns: 1fr 1fr; }
    .invite-channels { gap: 7px; }
    .invite-channel { min-height: 84px; }
  }

  @media (max-width: 370px) {
    .page.invite-page { padding-inline: 10px; }
    .invite-heading h1 { font-size: 1.55rem; }
    .invite-card { min-height: 515px; padding-inline: 17px; }
    .invite-card__qr { width: 158px; height: 158px; }
    .invite-panel { padding: 13px; }
    .invite-primary-actions, .invite-insights__metrics { grid-template-columns: 1fr; }
    .invite-channel { min-height: 78px; padding-inline: 4px; font-size: .61rem; }
    .invite-channel__icon { width: 37px; height: 37px; }
    .invite-landing__card { padding: 29px 20px; border-radius: 25px; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .invite-card { animation: invite-card-enter .55s var(--ease) both; }
    .invite-controls > .invite-panel { animation: invite-panel-enter .42s var(--ease) both; }
    .invite-controls > .invite-panel:nth-child(2) { animation-delay: .05s; }
    .invite-controls > .invite-panel:nth-child(3) { animation-delay: .1s; }
    .invite-controls > .invite-panel:nth-child(4) { animation-delay: .15s; }
    .invite-landing__card { animation: invite-card-enter .5s var(--ease) both; }
    @keyframes invite-card-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
    @keyframes invite-panel-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .invite-channel, .invite-card, .invite-panel, .invite-landing__card { animation: none; transition: none; }
  }
}

@layer components {
  /* Profile relationships, access gates and discoverability controls */
  .profile-visibility-badge { display: inline-flex; min-width: 0 !important; flex: 0 0 auto; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgb(138 180 248 / .22); border-radius: 999px; color: #dbeafe; background: rgb(66 133 244 / .085); font-size: .53rem; font-weight: 820; letter-spacing: .02em; }
  .profile-visibility-badge.is-hidden { color: #bae6fd; background: rgb(56 189 248 / .075); }
  .profile-stats button { border-radius: 9px; transition: color .18s, background .18s, transform .18s; }
  .profile-stats button:hover { color: white; transform: translateY(-1px); }
  .profile-stats button:focus-visible { outline: 3px solid rgb(138 180 248 / .4); outline-offset: 5px; }

  .profile-access-gate { display: flex; min-height: clamp(330px, 48dvh, 520px); flex-direction: column; align-items: center; justify-content: center; padding: clamp(36px, 8vw, 78px) 24px; text-align: center; }
  .profile-access-gate__icon { display: grid; width: 76px; height: 76px; margin-bottom: 18px; place-items: center; border: 1px solid rgb(138 180 248 / .22); border-radius: 25px; color: #dbeafe; background: radial-gradient(circle at 20% 12%, rgb(56 189 248 / .14), transparent 45%), var(--gradient-soft); box-shadow: 0 20px 55px rgb(10 55 125 / .16); }
  .profile-access-gate.is-hidden .profile-access-gate__icon { color: #bae6fd; }
  .profile-access-gate h2 { margin-top: 6px; font-size: clamp(1.35rem, 4vw, 1.8rem); letter-spacing: -.035em; }
  .profile-access-gate > p { max-width: 550px; margin: 9px auto 20px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
  .profile-access-gate__action { min-width: 170px; }
  .profile-access-gate > small { display: flex; max-width: 500px; align-items: center; justify-content: center; gap: 6px; margin-top: 17px; color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .profile-access-gate > small svg { flex: 0 0 auto; }

  .relationship-modal { width: min(670px, 100%); }

  /* Notification center */
  .notification-center-modal { width: min(640px, 100%); overflow: hidden; }
  .notification-center {
    display: grid; min-width: 0; min-height: min(680px, 80dvh); max-height: inherit;
    grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
  }
  .notification-center__heading {
    position: relative; z-index: 3; display: grid; min-width: 0; align-items: center; gap: 8px;
    grid-template-columns: 42px minmax(0, 1fr) 42px; padding: 16px 18px 10px;
  }
  .notification-center__heading-copy { min-width: 0; text-align: center; }
  .notification-center__heading-copy :is(h1, h2) { overflow: hidden; font-size: clamp(1.12rem, 3.4vw, 1.35rem); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
  .notification-center__back, .notification-center__settings-trigger {
    width: 40px; height: 40px; border: 1px solid transparent; color: var(--text-soft); background: transparent;
  }
  .notification-center__back { justify-self: start; }
  html[dir="rtl"] .notification-center__back > .icon { transform: scaleX(-1); }
  .notification-center__back:hover, .notification-center__settings-trigger:hover,
  .notification-center__settings-trigger[aria-expanded="true"] { border-color: var(--line); color: white; background: rgb(255 255 255 / .045); }
  .notification-center__back:focus-visible, .notification-center__settings-trigger:focus-visible,
  .notification-center__settings-option:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
  .notification-center__settings { position: relative; justify-self: end; }
  .notification-center__settings-menu {
    position: absolute; z-index: 8; top: calc(100% + 7px); inset-inline-end: 0; display: grid;
    width: min(270px, calc(100vw - 32px)); gap: 3px; padding: 6px; border: 1px solid var(--line-strong);
    border-radius: 15px; background: rgb(18 22 29 / .98); box-shadow: 0 18px 54px rgb(0 0 0 / .42);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .notification-center__settings-option {
    display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 9px 11px;
    border-radius: 10px; color: var(--text-soft); background: transparent; font-size: .69rem; font-weight: 690;
    text-align: start; cursor: pointer;
  }
  .notification-center__settings-option > .icon { flex: 0 0 auto; color: #8ab4f8; }
  .notification-center__settings-option:hover { color: white; background: rgb(255 255 255 / .055); }
  .notification-center__settings-option:disabled { color: var(--faint); cursor: default; }
  .notification-center__settings-option:disabled:hover { background: transparent; }
  .notification-center__mark-all { white-space: normal; }
  .notification-center__filters {
    display: flex; min-width: 0; align-items: center; gap: 7px; padding: 0 18px 12px; overflow-x: auto;
    scrollbar-width: none;
  }
  .notification-center__filters::-webkit-scrollbar { display: none; }
  .notification-center__filter {
    min-height: 34px; padding: 6px 15px; border-radius: 999px; color: var(--muted); background: transparent;
    font-size: .7rem; font-weight: 780; cursor: pointer; transition: color .16s, background .16s;
  }
  .notification-center__filter:hover { color: var(--text); background: rgb(255 255 255 / .045); }
  .notification-center__filter.is-active { color: #dbeafe; background: rgb(66 133 244 / .17); }
  .notification-center__filter:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
  .notification-center__list {
    min-height: 260px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 5px 9px 13px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .notification-group { min-width: 0; }
  .notification-group + .notification-group { margin-top: 7px; }
  .notification-group__title {
    padding: 10px 10px 5px; color: var(--text); font-size: .73rem; font-weight: 820; letter-spacing: -.01em;
  }
  .notification-group__items { display: grid; min-width: 0; gap: 1px; }
  .notification-group__items:empty { display: none; }
  .notification-group:has(.notification-group__items:empty) { display: none; }
  .notification-item {
    position: relative; display: grid; min-width: 0; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto;
    gap: 0 11px; padding: 8px 9px; border: 0; border-radius: 13px; transition: background .16s;
  }
  .notification-item.is-unread { background: transparent; }
  .notification-item:focus-within, .notification-item:hover { background: rgb(255 255 255 / .04); }
  .notification-item__visual { position: relative; grid-row: 1 / span 2; align-self: start; width: 48px; height: 48px; }
  .notification-item__visual > .avatar { width: 48px; height: 48px; }
  .notification-item__avatar { outline: 1px solid var(--line); outline-offset: 1px; }
  .notification-item__type {
    display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #dbeafe;
    background: rgb(66 133 244 / .13); box-shadow: inset 0 0 0 1px rgb(138 180 248 / .12);
  }
  .notification-item__type--social { color: #fca5a5; background: rgb(234 67 53 / .13); }
  .notification-item__type--support { color: #bae6fd; background: rgb(14 165 233 / .13); }
  .notification-item__type--goal { color: #fef3c7; background: rgb(245 158 11 / .13); }
  .notification-item__type--security { color: #bbf7d0; background: rgb(34 197 94 / .13); }
  .notification-item__type-badge {
    position: absolute; right: -3px; bottom: -3px; display: grid; width: 21px; height: 21px; place-items: center;
    border: 2px solid var(--surface); border-radius: 50%; color: white; background: var(--brand-blue); box-shadow: 0 2px 8px rgb(0 0 0 / .3);
  }
  .notification-item__main {
    display: grid; min-width: 0; min-height: 48px; align-items: center; gap: 10px; grid-template-columns: minmax(0, 1fr) auto;
    padding: 2px 3px; border-radius: 9px; color: inherit; background: transparent; text-align: start; cursor: pointer;
  }
  .notification-item__main:disabled { cursor: default; }
  .notification-item__main:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
  .notification-item__copy { display: grid; min-width: 0; gap: 2px; }
  .notification-item__title { color: white; font-size: .73rem; line-height: 1.25; }
  .notification-item__message { color: var(--text-soft); font-size: .76rem; line-height: 1.36; }
  .notification-item.is-unread .notification-item__message { color: var(--text); }
  .notification-item__time { color: #8ab4f8; font-size: .61rem; font-weight: 650; }
  .notification-item__unread { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-blue); }
  .notification-item__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; padding: 2px 3px 0; }
  .notification-item__follow-slot { display: inline-flex; align-items: center; }
  .notification-item__follow {
    min-height: 27px; padding: 3px 9px; border-radius: 8px; font-size: .62rem; font-weight: 780; line-height: 1;
  }
  .notification-item__follow-state {
    display: inline-flex; min-height: 25px; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px;
    color: var(--success); background: rgb(34 197 94 / .075); font-size: .62rem; font-weight: 760; line-height: 1;
  }
  .notification-item__follow-state > .icon { flex: 0 0 auto; }
  .notification-item__follow-state.is-requested { color: var(--muted); background: rgb(255 255 255 / .045); }
  .notification-item__invite { min-height: 28px; padding-inline: 5px; color: #8ab4f8; font-size: .62rem; }
  .notification-item__invite:disabled { color: var(--success); opacity: .82; }
  .notification-center__footer { display: flex; justify-content: center; padding: 9px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .notification-center__footer:not(:has(.notification-center__more:not([hidden]))) { display: none; }
  .notification-center__more { width: min(320px, 100%); }
  .notification-center__state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; padding: 34px 22px; text-align: center; }
  .notification-center__state-icon { display: grid; width: 62px; height: 62px; margin-bottom: 14px; place-items: center; border-radius: 22px; color: #dbeafe; background: var(--gradient-soft); }
  .notification-center__state-icon.is-error { color: #fed7aa; background: rgb(249 115 22 / .12); }
  .notification-center__state strong { font-size: .92rem; }
  .notification-center__state p { max-width: 390px; margin-top: 6px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
  .notification-center__state .button { margin-top: 15px; }
  .notification-item--skeleton { pointer-events: none; }
  .notification-item__avatar-skeleton { width: 44px; height: 44px; border-radius: 50%; }
  .notification-item__skeleton-copy { display: grid; align-content: center; gap: 8px; }
  .notification-item__skeleton-copy .skeleton-line:first-child { width: 84%; }
  .notification-item__skeleton-copy .skeleton-line:last-child { width: 34%; }
  .notification-trigger__badge {
    position: absolute; top: 0; right: -2px; display: inline-grid; min-width: 17px; height: 17px; place-items: center;
    padding-inline: 4px; border: 2px solid #090c11; border-radius: 99px; color: white; background: var(--brand-red);
    font-size: .48rem; font-weight: 850; line-height: 1;
  }
  .notification-trigger.has-unread { color: #8ab4f8; }
  .notifications-page { display: grid; align-content: start; padding-top: 18px; }
  .notifications-page .notification-center--page {
    width: min(720px, 100%); min-height: min(760px, calc(100dvh - 36px)); max-height: calc(100dvh - 36px);
    margin-inline: auto; overflow: hidden; border: 0; border-radius: 0; box-shadow: none;
  }
  .relationship-sheet { display: grid; min-width: 0; gap: 15px; padding: 28px 24px max(25px, env(safe-area-inset-bottom)); }
  .relationship-sheet__heading { padding-right: 48px; }
  .relationship-sheet__heading h2 { margin-top: 3px; font-size: clamp(1.35rem, 4vw, 1.7rem); letter-spacing: -.035em; }
  .relationship-sheet__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .025); }
  .relationship-sheet__tab { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; color: var(--muted); background: transparent; font-size: .74rem; font-weight: 770; cursor: pointer; }
  .relationship-sheet__tab small { display: inline-grid; min-width: 23px; min-height: 19px; place-items: center; padding-inline: 5px; border-radius: 99px; color: var(--faint); background: rgb(255 255 255 / .055); font-size: .55rem; }
  .relationship-sheet__tab.is-active { color: white; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .15); }
  .relationship-sheet__tab.is-active small { color: #ddd6fe; background: rgb(139 92 246 / .14); }
  .relationship-sheet__tab:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .relationship-sheet__search { width: 100%; max-width: none; min-height: 48px; }
  .relationship-sheet__sort { position: relative; display: flex; justify-content: flex-end; margin-top: -7px; }
  .relationship-sheet__sort-trigger {
    display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 6px 10px;
    border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: transparent;
    font-size: .63rem; cursor: pointer;
  }
  .relationship-sheet__sort-trigger strong { color: var(--text-soft); font-size: .65rem; }
  .relationship-sheet__sort-trigger > .icon { color: var(--faint); transition: transform .18s var(--ease); }
  .relationship-sheet__sort-trigger[aria-expanded="true"] { border-color: var(--line); background: rgb(255 255 255 / .035); }
  .relationship-sheet__sort-trigger[aria-expanded="true"] > .icon { transform: rotate(180deg); }
  .relationship-sheet__sort-trigger:focus-visible, .relationship-sheet__sort-option:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .relationship-sheet__sort-menu {
    position: absolute; z-index: 4; top: calc(100% + 4px); inset-inline-end: 0; display: grid; width: min(240px, calc(100vw - 36px));
    gap: 3px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px;
    background: rgb(18 21 28 / .98); box-shadow: 0 16px 44px rgb(0 0 0 / .38);
  }
  .relationship-sheet__sort-option {
    display: grid; min-height: 42px; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 10px; color: var(--text-soft); background: transparent;
    font-size: .67rem; text-align: start; cursor: pointer;
  }
  .relationship-sheet__sort-option:hover, .relationship-sheet__sort-option[aria-checked="true"] { background: rgb(255 255 255 / .055); }
  .relationship-sheet__sort-check { display: grid; place-items: center; color: #86efac; opacity: 0; }
  .relationship-sheet__sort-option[aria-checked="true"] .relationship-sheet__sort-check { opacity: 1; }
  .relationship-sheet__list { display: grid; min-height: 220px; max-height: min(49dvh, 510px); gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .relationship-person { display: grid; min-height: 67px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 13px; transition: background .18s, opacity .18s; }
  .relationship-person:hover { background: rgb(255 255 255 / .035); }
  .relationship-person__link { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 4px; border-radius: 10px; }
  .relationship-person__link:focus-visible { outline: 3px solid rgb(167 139 250 / .35); outline-offset: 1px; }
  .relationship-person__identity { display: grid; min-width: 0; gap: 3px; }
  .relationship-person__identity strong { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; font-size: .79rem; }
  .relationship-person__identity strong > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .relationship-person__identity .verified-badge { position: static; width: 16px; height: 16px; flex: 0 0 auto; border: 0; }
  .relationship-person__identity small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
  .relationship-person__action { min-width: 92px; min-height: 36px; padding-inline: 12px; font-size: .63rem; }
  .relationship-person__action[aria-pressed="true"] { color: var(--text-soft); }
  .relationship-person__notification {
    position: relative; width: 42px; height: 42px; flex: 0 0 auto; border-color: var(--line);
    color: var(--muted); background: rgb(255 255 255 / .025);
  }
  .relationship-person__notification:hover { border-color: rgb(138 180 248 / .35); color: #dbeafe; }
  .relationship-person__notification.is-active { border-color: rgb(138 180 248 / .42); color: #dbeafe; background: var(--gradient-soft); }
  .relationship-person__notification.is-partial, .profile-notification-button.is-partial { border-style: dashed; }
  .relationship-person__notification-check, .profile-notification-button__check {
    position: absolute; right: -3px; bottom: -3px; display: grid; width: 17px; height: 17px; place-items: center;
    border: 2px solid var(--surface); border-radius: 50%; color: #071018; background: #86efac;
  }
  .relationship-person--skeleton { grid-template-columns: 48px minmax(0, 1fr); pointer-events: none; }
  .relationship-person--skeleton .relationship-person__identity { gap: 8px; }
  .relationship-person--skeleton .skeleton-line:last-child { width: 45%; }
  .relationship-sheet__empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; padding: 25px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
  .relationship-sheet__empty > svg { margin-bottom: 11px; color: var(--faint); }
  .relationship-sheet__empty strong { color: var(--text-soft); font-size: .86rem; }
  .relationship-sheet__empty p { max-width: 390px; margin-top: 5px; font-size: .68rem; line-height: 1.45; }
  .relationship-sheet__empty .button { margin-top: 13px; }
  .relationship-sheet__footer { display: flex; min-height: 4px; justify-content: center; }
  .relationship-sheet__footer .button { width: 100%; }

  .follow-preferences-modal { width: min(620px, 100%); overflow-x: hidden; }
  .follow-preferences {
    display: grid; min-width: 0; gap: 16px;
    padding: 27px 23px max(24px, env(safe-area-inset-bottom));
  }
  .follow-preferences__heading {
    display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr) 42px; align-items: center; gap: 12px;
    padding-right: 38px;
  }
  .follow-preferences__avatar, .follow-preferences__back, .follow-preferences__heading-icon {
    display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px;
  }
  .follow-preferences__avatar { overflow: hidden; background: var(--surface-3); }
  .follow-preferences__avatar > .avatar { width: 48px; height: 48px; }
  .follow-preferences__back { border-color: var(--line); color: var(--text-soft); background: rgb(255 255 255 / .035); }
  .follow-preferences__heading-icon { width: 42px; height: 42px; color: #dbeafe; background: var(--gradient-soft); }
  .follow-preferences__heading-copy { min-width: 0; }
  .follow-preferences__heading-copy h2 { margin-top: 2px; font-size: clamp(1.25rem, 4vw, 1.6rem); letter-spacing: -.035em; }
  .follow-preferences__heading-copy p { max-width: 455px; margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
  .follow-preferences__options, .follow-preferences__switches { display: grid; gap: 6px; }
  .follow-preferences__option, .follow-preferences__switch-row {
    display: grid; width: 100%; min-width: 0; min-height: 68px; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgb(255 255 255 / .018);
    text-align: start; cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
  }
  .follow-preferences__option { grid-template-columns: 42px minmax(0, 1fr) 20px; padding: 9px 12px; }
  .follow-preferences__option:hover, .follow-preferences__switch-row:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .04); transform: translateY(-1px); }
  .follow-preferences__option:focus-visible, .follow-preferences__switch-row:focus-visible, .follow-preferences__unfollow:focus-visible { outline: 3px solid rgb(56 189 248 / .35); outline-offset: 2px; }
  .follow-preferences__option-icon, .follow-preferences__switch-icon {
    display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px;
    color: #dbeafe; background: var(--gradient-soft);
  }
  .follow-preferences__option-copy, .follow-preferences__switch-copy { display: grid; min-width: 0; gap: 3px; }
  .follow-preferences__option-copy strong, .follow-preferences__switch-copy strong { font-size: .78rem; }
  .follow-preferences__option-copy small, .follow-preferences__switch-copy small { color: var(--muted); font-size: .63rem; line-height: 1.4; }
  .follow-preferences__option > .icon { color: var(--faint); }
  .follow-preferences__switch-row { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 10px 12px; }
  .follow-preferences__switch-row:disabled { opacity: .7; cursor: wait; transform: none; }
  .follow-preferences__switch-control {
    display: flex; width: 46px; height: 27px; align-items: center; padding: 3px; border: 1px solid var(--line-strong);
    border-radius: 99px; background: rgb(255 255 255 / .055); transition: border-color .2s, background .2s;
  }
  .follow-preferences__switch-control > span {
    width: 19px; height: 19px; border-radius: 50%; background: #a5adba; box-shadow: 0 2px 7px rgb(0 0 0 / .35);
    transition: transform .22s var(--ease), background .2s;
  }
  .follow-preferences__switch-row[aria-checked="true"] .follow-preferences__switch-control { border-color: transparent; background: linear-gradient(135deg, #4285f4, #34a853); }
  .follow-preferences__switch-row[aria-checked="true"] .follow-preferences__switch-control > span { background: white; transform: translateX(19px); }
  [dir="rtl"] .follow-preferences__switch-row[aria-checked="true"] .follow-preferences__switch-control > span { transform: translateX(-19px); }
  .follow-preferences__note { padding: 0 3px; color: var(--faint); font-size: .61rem; line-height: 1.45; }
  .follow-preferences__unfollow {
    display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: 1px;
    border: 1px solid rgb(248 113 113 / .18); border-radius: 13px; color: #fca5a5; background: rgb(248 113 113 / .045);
    font-size: .68rem; font-weight: 780; cursor: pointer;
  }
  .follow-preferences__unfollow:hover { border-color: rgb(248 113 113 / .34); background: rgb(248 113 113 / .08); }
  .follow-preferences__unfollow:disabled { opacity: .58; cursor: wait; }

  .settings-directory__item.settings-directory__item--privacy { grid-template-columns: 44px minmax(0, 1fr) auto 20px; }
  .settings-row__status--privacy.is-private { color: #dbeafe; background: rgb(66 133 244 / .11); }
  .settings-row__status--privacy.is-hidden { color: #bae6fd; background: rgb(56 189 248 / .1); }
  .profile-privacy-modal { width: min(720px, 100%); }
  .profile-privacy { display: grid; gap: 18px; padding: 31px 27px max(28px, env(safe-area-inset-bottom)); }
  .profile-privacy__heading { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-right: 43px; }
  .profile-privacy__heading-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #dbeafe; background: var(--gradient-soft); }
  .profile-privacy__heading h2 { margin-top: 2px; font-size: clamp(1.35rem, 4vw, 1.72rem); letter-spacing: -.035em; }
  .profile-privacy__heading p { margin-top: 5px; color: var(--muted); font-size: .71rem; line-height: 1.45; }
  .profile-privacy__state { align-self: center; padding: 5px 8px; border-radius: 99px; color: var(--muted); background: rgb(255 255 255 / .055); font-size: .57rem; font-weight: 820; letter-spacing: .025em; text-transform: uppercase; }
  .profile-privacy__state.is-private { color: #dbeafe; background: rgb(66 133 244 / .11); }
  .profile-privacy__state.is-hidden { color: #bae6fd; background: rgb(56 189 248 / .1); }
  .profile-privacy__choices { display: grid; gap: 8px; }
  .profile-privacy-option { display: grid; min-height: 79px; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .profile-privacy-option:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .04); transform: translateY(-1px); }
  .profile-privacy-option:focus-visible { outline: 3px solid rgb(56 189 248 / .35); outline-offset: 2px; }
  .profile-privacy-option.is-selected { border-color: rgb(138 180 248 / .36); background: linear-gradient(135deg, rgb(66 133 244 / .1), rgb(56 189 248 / .035)); }
  .profile-privacy-option__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: var(--muted); background: var(--surface-3); }
  .profile-privacy-option.is-selected .profile-privacy-option__icon { color: #dbeafe; background: var(--gradient-soft); }
  .profile-privacy-option__copy { display: grid; min-width: 0; gap: 4px; }
  .profile-privacy-option__copy strong { font-size: .82rem; }
  .profile-privacy-option__copy small { color: var(--muted); font-size: .65rem; line-height: 1.45; }
  .profile-privacy-option__selection { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; opacity: .35; color: transparent; }
  .profile-privacy-option.is-selected .profile-privacy-option__selection { border-color: transparent; opacity: 1; color: white; background: var(--gradient); }
  .profile-privacy__link-note, .profile-editor__privacy-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid rgb(56 189 248 / .15); border-radius: 13px; color: var(--muted); background: rgb(56 189 248 / .045); font-size: .65rem; line-height: 1.5; }
  .profile-privacy__link-note > svg, .profile-editor__privacy-note > svg { flex: 0 0 auto; margin-top: 1px; color: #bae6fd; }
  .profile-privacy__link-note strong, .profile-editor__privacy-note strong { color: var(--text-soft); }
  .profile-privacy__feedback:empty { display: none; }
  .follow-requests { padding-top: 17px; border-top: 1px solid var(--line); }
  .follow-requests__heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 10px; }
  .follow-requests__heading h3 { font-size: .91rem; }
  .follow-requests__heading p { margin-top: 3px; color: var(--muted); font-size: .64rem; }
  .follow-requests__count { display: inline-grid; min-width: 29px; height: 25px; place-items: center; padding-inline: 7px; border-radius: 99px; color: #dbeafe; background: rgb(66 133 244 / .12); font-size: .61rem; font-weight: 820; }
  .follow-requests__list { display: grid; max-height: min(36dvh, 360px); gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .follow-request { display: grid; min-height: 68px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 7px; border-radius: 13px; transition: opacity .18s, transform .18s; }
  .follow-request:hover { background: rgb(255 255 255 / .03); }
  .follow-request.is-resolved { opacity: 0; transform: translateX(10px); }
  .follow-request__person { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 3px; border-radius: 10px; }
  .follow-request__person > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .follow-request__person strong, .follow-request__person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .follow-request__person strong { font-size: .76rem; }
  .follow-request__person small { color: var(--muted); font-size: .64rem; }
  .follow-request__actions { display: flex; gap: 6px; }
  .follow-request__actions .button { min-height: 35px; padding-inline: 11px; font-size: .61rem; }
  .follow-request--skeleton { grid-template-columns: 48px minmax(0, 1fr); pointer-events: none; }
  .follow-request--skeleton > span:last-child { display: grid; gap: 8px; }
  .follow-request--skeleton .skeleton-line:last-child { width: 48%; }
  .follow-requests__empty, .follow-requests__public-note { display: flex; min-height: 105px; flex-direction: column; align-items: center; justify-content: center; padding: 17px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
  .follow-requests__empty > svg { margin-bottom: 8px; color: var(--faint); }
  .follow-requests__empty strong { color: var(--text-soft); font-size: .76rem; }
  .follow-requests__empty p { max-width: 390px; margin-top: 4px; font-size: .63rem; }
  .follow-requests__empty .button { margin-top: 10px; }
  .follow-requests__public-note { min-height: 80px; flex-direction: row; justify-content: flex-start; gap: 11px; border-style: solid; text-align: left; }
  .follow-requests__public-note > svg { flex: 0 0 auto; color: #a7f3d0; }
  .follow-requests__public-note > div { display: grid; gap: 3px; }
  .follow-requests__public-note strong { color: var(--text-soft); font-size: .74rem; }
  .follow-requests__public-note p { font-size: .63rem; line-height: 1.4; }
  .profile-editor__section-body > .profile-editor__privacy-note { grid-column: 1 / -1; }
}

@layer responsive {
  @media (max-width: 760px) {
    .profile-visibility-badge { padding: 3px 6px; }
    .profile-visibility-badge > span { display: none; }
    .profile-access-gate { min-height: 320px; padding: 42px 20px; }
    .profile-access-gate__icon { width: 67px; height: 67px; border-radius: 22px; }
    .relationship-modal, .profile-privacy-modal, .notification-center-modal, .follow-preferences-modal { width: 100%; max-height: 91dvh; }
    .notification-center { min-height: min(690px, 88dvh); }
    .notification-center__heading { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 7px; padding: 12px 12px 9px; }
    .notification-center__settings-menu { position: fixed; top: auto; right: auto; bottom: calc(var(--bottom-nav) + 8px); left: auto; inset-inline: 12px; width: auto; }
    .notification-center__filters { padding: 0 12px 11px; }
    .notification-center__filter { min-height: 32px; padding-inline: 13px; font-size: .65rem; }
    .notification-center__list { padding-inline: 4px; }
    .notification-group__title { padding-inline: 8px; }
    .notification-item { grid-template-columns: 46px minmax(0, 1fr); gap: 0 9px; padding: 8px 6px; }
    .notification-item__visual, .notification-item__visual > .avatar, .notification-item__type { width: 44px; height: 44px; }
    .notification-item__main { min-height: 44px; }
    .notification-item__message { font-size: .72rem; }
    .notification-item__actions { gap: 4px; }
    body[data-route="/notifications"] .mobile-header { display: none; }
    body[data-route="/notifications"] .app-main { padding-top: 0; }
    body[data-route="/notifications"] .notifications-page { min-height: calc(100dvh - var(--bottom-nav)); padding: 0; }
    .notifications-page .notification-center--page { width: 100%; min-height: calc(100dvh - var(--bottom-nav)); max-height: calc(100dvh - var(--bottom-nav)); border: 0; border-radius: 0; box-shadow: none; }
    .notifications-page .notification-center__heading { padding-top: max(12px, env(safe-area-inset-top)); }
    .relationship-sheet { gap: 13px; padding: 23px 14px max(20px, env(safe-area-inset-bottom)); }
    .relationship-sheet__heading { padding-inline: 3px 42px; }
    .relationship-sheet__sort { margin-top: -9px; }
    .relationship-sheet__sort-trigger { min-height: 44px; padding-inline: 8px; }
    .relationship-sheet__sort-menu { position: fixed; z-index: 61; top: auto; right: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: auto; width: auto; inset-inline-start: max(14px, env(safe-area-inset-left)); inset-inline-end: max(14px, env(safe-area-inset-right)); }
    .relationship-sheet__sort-option { min-height: 48px; }
    .relationship-sheet__list { max-height: 52dvh; }
    .relationship-person { min-height: 64px; padding-inline: 2px; }
    .relationship-person__action { min-width: 78px; max-width: 116px; min-height: 34px; padding-inline: 9px; font-size: .58rem; }
    .relationship-person__notification { width: 40px; height: 40px; }
    .follow-preferences { gap: 14px; padding: 23px 14px max(20px, env(safe-area-inset-bottom)); }
    .follow-preferences__heading { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-inline: 2px 39px; }
    .follow-preferences__avatar, .follow-preferences__back { width: 44px; height: 44px; }
    .follow-preferences__avatar > .avatar { width: 44px; height: 44px; }
    .follow-preferences__heading-icon { display: none; }
    .follow-preferences__option, .follow-preferences__switch-row { min-height: 65px; gap: 10px; padding-inline: 10px; }
    .follow-preferences__option { grid-template-columns: 40px minmax(0, 1fr) 18px; }
    .follow-preferences__switch-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .follow-preferences__option-icon, .follow-preferences__switch-icon { width: 40px; height: 40px; }
    .settings-directory__item.settings-directory__item--privacy { grid-template-columns: 40px minmax(0, 1fr) 18px; }
    .settings-directory__item.settings-directory__item--privacy .settings-row__status { grid-column: 2; justify-self: start; margin-top: 2px; }
    .settings-directory__item.settings-directory__item--privacy .settings-row__chevron { grid-row: 1 / span 2; grid-column: 3; }
    .profile-privacy { gap: 15px; padding: 26px 15px max(22px, env(safe-area-inset-bottom)); }
    .profile-privacy__heading { grid-template-columns: 43px minmax(0, 1fr); gap: 10px; padding-right: 35px; }
    .profile-privacy__heading-icon { width: 43px; height: 43px; }
    .profile-privacy__state { grid-column: 2; width: max-content; align-self: start; margin-top: 3px; }
    .profile-privacy-option { min-height: 76px; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 9px; padding: 10px; }
    .profile-privacy-option__icon { width: 40px; height: 40px; }
    .profile-privacy-option__copy small { font-size: .61rem; }
    .follow-request { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px 4px; }
    .follow-request__actions { padding-left: 57px; }
    .follow-request__actions .button { flex: 1; }
  }

  @media (max-width: 360px) {
    .relationship-person__action { min-width: 72px; max-width: 92px; white-space: normal; line-height: 1.15; }
    .profile-actions--visitor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-actions--visitor:not(.has-primary-email) .profile-notification-button { grid-row: 2; grid-column: 1; justify-self: end; }
    .profile-actions--visitor:not(.has-primary-email) > .icon-button:last-child { grid-row: 2; grid-column: 2; justify-self: start; }
    .profile-actions--visitor.has-primary-email .profile-notification-button { grid-row: 2; grid-column: 2; justify-self: start; }
    .profile-actions--visitor.has-primary-email > .icon-button:last-child { grid-row: 2; grid-column: 2; justify-self: end; }
    .profile-privacy-option__copy small { font-size: .58rem; }
  }

  @media (min-width: 1180px) {
    .overlay__panel--sheet.relationship-modal { width: min(620px, 46vw); }
    .overlay__panel--sheet.profile-privacy-modal { width: min(690px, 52vw); }
    .overlay__panel--sheet.follow-preferences-modal { width: min(580px, 44vw); }
  }

  @media (prefers-reduced-motion: reduce) {
    .follow-preferences__option, .follow-preferences__switch-row, .follow-preferences__switch-control, .follow-preferences__switch-control > span, .relationship-sheet__sort-trigger > .icon { transition: none; }
  }
}

@layer components {
  .post-share-modal { width: min(720px, 100%); overflow-x: hidden; background: rgb(17 17 23 / .985); }
  .post-share-sheet { display: grid; min-width: 0; gap: 19px; padding: 10px 22px max(24px, env(safe-area-inset-bottom)); }
  .post-share-sheet__grabber { display: block; width: 42px; height: 4px; margin: 0 auto -4px; border-radius: 99px; background: rgb(255 255 255 / .2); }
  .post-share-sheet__heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 0 48px 0 2px; }
  .post-share-sheet__heading h2 { font-size: clamp(1.25rem, 4vw, 1.62rem); letter-spacing: -.035em; }
  .post-share-sheet__heading p { margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.4; }

  .post-share-preview { position: relative; display: block; min-height: 190px; overflow: hidden; border: 1px solid rgb(255 255 255 / .13); border-radius: 20px; background: radial-gradient(circle at 20% 15%, #5b2683, #17101f 58%, #08080c); box-shadow: 0 16px 45px rgb(0 0 0 / .25); isolation: isolate; }
  .post-share-preview:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 3px; }
  .post-share-preview__visual, .post-share-preview__shade { position: absolute; inset: 0; }
  .post-share-preview__visual img { width: 100%; height: 100%; object-fit: cover; }
  .post-share-preview__fallback { display: grid; width: 100%; height: 100%; place-items: center; color: rgb(255 255 255 / .64); background: linear-gradient(145deg, rgb(139 92 246 / .25), rgb(236 72 153 / .12)); }
  .post-share-preview__shade { z-index: 1; background: linear-gradient(90deg, rgb(5 5 9 / .78), rgb(5 5 9 / .25) 62%, rgb(5 5 9 / .5)), linear-gradient(0deg, rgb(5 5 9 / .7), transparent 62%); }
  .post-share-preview__play { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgb(255 255 255 / .26); border-radius: 50%; color: white; background: rgb(0 0 0 / .4); backdrop-filter: blur(9px); transform: translate(-50%, -50%); }
  .post-share-preview__content { position: relative; z-index: 2; display: flex; min-height: 190px; flex-direction: column; align-items: flex-start; justify-content: end; gap: 9px; padding: 21px 94px 18px 18px; }
  .post-share-preview__author { display: flex; align-items: center; gap: 9px; }
  .post-share-preview__author > span:last-child { display: grid; gap: 1px; }
  .post-share-preview__author strong { font-size: .8rem; }
  .post-share-preview__author small { color: rgb(255 255 255 / .7); font-size: .62rem; }
  .post-share-preview__caption { display: -webkit-box; max-width: 520px; overflow: hidden; color: rgb(255 255 255 / .86); font-size: .7rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .post-share-preview__watermark { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 10px; background: rgb(0 0 0 / .32); backdrop-filter: blur(8px); }
  .post-share-preview__watermark img { width: 51px; height: auto; }
  .post-share-preview__watermark small { color: rgb(255 255 255 / .72); font-size: .54rem; }
  .post-share-preview__open { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / .18); border-radius: 99px; color: white; background: rgb(0 0 0 / .38); font-size: .63rem; font-weight: 780; backdrop-filter: blur(10px); }

  .post-share-recipients, .post-share-external { display: grid; min-width: 0; gap: 11px; padding-top: 2px; }
  .post-share-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-inline: 2px; }
  .post-share-section-heading h3 { font-size: .82rem; letter-spacing: -.012em; }
  .post-share-section-heading p { margin-top: 3px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
  .post-share-private-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 99px; color: #a7f3d0; background: rgb(52 211 153 / .08); font-size: .55rem; font-weight: 780; }
  .post-share-search { display: flex; min-height: 47px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--faint); background: rgb(255 255 255 / .045); }
  .post-share-search:focus-within { border-color: rgb(167 139 250 / .45); box-shadow: 0 0 0 3px rgb(139 92 246 / .1); }
  .post-share-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .76rem; }
  .post-share-search input::placeholder { color: var(--faint); }
  .post-share-recipients__feedback { min-height: 15px; color: var(--faint); font-size: .57rem; }
  .post-share-recipients__list { display: grid; min-height: 115px; max-height: 245px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px 8px; overflow-y: auto; padding: 2px 2px 7px; scrollbar-width: thin; }
  .post-share-recipients__empty { display: flex; min-height: 106px; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line); border-radius: 16px; color: var(--faint); font-size: .65rem; }
  .post-share-recipient { display: grid; min-width: 0; place-items: center; gap: 5px; padding: 4px 2px 6px; border-radius: 14px; color: var(--text); background: transparent; text-align: center; cursor: pointer; }
  .post-share-recipient:hover { background: rgb(255 255 255 / .04); }
  .post-share-recipient:focus-visible { outline: 3px solid rgb(167 139 250 / .36); outline-offset: 1px; }
  .post-share-recipient__avatar { position: relative; display: block; padding: 3px; border: 2px solid transparent; border-radius: 50%; transition: border-color .18s, transform .18s; }
  .post-share-recipient.is-selected .post-share-recipient__avatar { border-color: #a78bfa; transform: scale(.96); }
  .post-share-recipient__avatar .avatar { width: 54px; height: 54px; }
  .post-share-recipient__check { position: absolute; right: -2px; bottom: 2px; display: none; width: 20px; height: 20px; place-items: center; border: 2px solid #111117; border-radius: 50%; color: white; background: linear-gradient(135deg, #7c3aed, #db2777); }
  .post-share-recipient.is-selected .post-share-recipient__check { display: grid; }
  .post-share-recipient strong, .post-share-recipient small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-share-recipient strong { font-size: .62rem; }
  .post-share-recipient small { color: var(--faint); font-size: .54rem; }
  .post-share-send { width: 100%; min-height: 45px; }

  .post-share-external { padding-top: 15px; border-top: 1px solid var(--line); }
  .post-share-external--private { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 14px; border: 1px solid rgb(167 139 250 / .16); border-radius: 15px; color: #ddd6fe; background: rgb(139 92 246 / .055); }
  .post-share-external--private > div { display: grid; gap: 3px; }
  .post-share-external--private strong { font-size: .72rem; }
  .post-share-external--private p { color: var(--muted); font-size: .61rem; line-height: 1.4; }
  .post-share-external__list { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 7px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .post-share-external__action { display: grid; min-width: 78px; flex: 0 0 78px; place-items: center; gap: 7px; padding: 3px; color: var(--text-soft); background: transparent; font-size: .57rem; text-align: center; cursor: pointer; scroll-snap-align: start; }
  .post-share-external__action:hover .post-share-external__icon { transform: translateY(-2px); }
  .post-share-external__action:focus-visible { outline: 3px solid rgb(167 139 250 / .36); outline-offset: 2px; border-radius: 12px; }
  .post-share-external__action:disabled { opacity: .5; cursor: wait; }
  .post-share-external__icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgb(255 255 255 / .1); border-radius: 17px; color: white; background: #292933; box-shadow: 0 8px 21px rgb(0 0 0 / .2); font-size: 1.05rem; font-weight: 850; transition: transform .18s; }
  .post-share-external__action.is-whatsapp .post-share-external__icon { background: linear-gradient(145deg, #22c55e, #15803d); }
  .post-share-external__action.is-facebook .post-share-external__icon { background: linear-gradient(145deg, #3b82f6, #1d4ed8); font-family: Arial, sans-serif; font-size: 1.45rem; }
  .post-share-external__action.is-x .post-share-external__icon { background: #08080a; }
  .post-share-external__action.is-telegram .post-share-external__icon { background: linear-gradient(145deg, #38bdf8, #1679b8); }
  .post-share-external__action.is-email .post-share-external__icon { background: linear-gradient(145deg, #f97316, #db2777); }
  .post-share-external__action.is-native .post-share-external__icon,
  .post-share-external__action.is-copy .post-share-external__icon,
  .post-share-external__action.is-download .post-share-external__icon { color: #ddd6fe; background: linear-gradient(145deg, rgb(139 92 246 / .28), rgb(236 72 153 / .12)); }

  .message-post-preview { display: grid; width: min(310px, 68vw); overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: 13px; color: white; background: rgb(7 7 11 / .48); text-align: left; }
  .message-post-preview:focus-visible { outline: 3px solid rgb(196 181 253 / .48); outline-offset: 2px; }
  .message-post-preview__visual { position: relative; display: grid; min-height: 142px; place-items: center; overflow: hidden; color: rgb(255 255 255 / .7); background: linear-gradient(145deg, rgb(139 92 246 / .28), rgb(236 72 153 / .1)); }
  .message-post-preview__visual img { width: 100%; height: 142px; object-fit: cover; }
  .message-post-preview__play { position: absolute; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(0 0 0 / .4); backdrop-filter: blur(7px); }
  .message-post-preview__copy { display: grid; gap: 4px; padding: 10px 11px; }
  .message-post-preview__copy > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .message-post-preview__copy strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .message-post-preview__copy small { color: rgb(255 255 255 / .55); font-size: .54rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
  .message-post-preview__copy p { display: -webkit-box; overflow: hidden; color: rgb(255 255 255 / .74); font-size: .61rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .message-post-preview.is-loading .message-post-preview__visual::after { width: 100%; height: 100%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .07), transparent); animation: shimmer 1.4s infinite; content: ""; }
  .message-post-preview.is-unavailable { cursor: default; }
  .message-post-preview.is-unavailable .message-post-preview__visual { min-height: 94px; }
  .message-post-preview.is-unavailable .message-post-preview__copy { color: var(--muted); }
}

@layer responsive {
  @media (max-width: 760px) {
    .overlay__panel--sheet.post-share-modal { max-height: 92dvh; }
    .post-share-sheet { gap: 16px; padding: 9px 14px max(18px, env(safe-area-inset-bottom)); }
    .post-share-sheet__heading { padding-right: 45px; }
    .post-share-preview { min-height: 168px; border-radius: 17px; }
    .post-share-preview__content { min-height: 168px; padding: 16px 80px 14px 14px; }
    .post-share-preview__open { right: 11px; bottom: 12px; }
    .post-share-preview__watermark small { display: none; }
    .post-share-recipients__list { max-height: 222px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap-inline: 4px; }
    .post-share-recipient__avatar .avatar { width: 50px; height: 50px; }
    .post-share-external__action { min-width: 70px; flex-basis: 70px; }
    .post-share-external__icon { width: 49px; height: 49px; border-radius: 16px; }
  }

  @media (max-width: 360px) {
    .post-share-recipients__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .post-share-preview__caption { display: none; }
  }

  @media (min-width: 1180px) {
    .overlay__panel--sheet.post-share-modal { width: min(660px, 48vw); }
    .post-share-sheet { padding: 21px 26px 30px; }
    .post-share-sheet__grabber { display: none; }
    .post-share-preview { min-height: 218px; }
    .post-share-preview__content { min-height: 218px; }
  }
}

@layer pages {
  .settings-page { max-width: 900px; }
  .settings-heading { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 30px; }
  .settings-heading__back { flex: 0 0 auto; margin-top: 3px; }
  .settings-heading h1 { margin-top: 4px; font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -.045em; line-height: 1.05; }
  .settings-heading p { max-width: 620px; margin-top: 9px; color: var(--muted); }
  .settings-layout { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); align-items: start; gap: 18px; }
  .settings-sections, .settings-panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 18px 52px rgb(0 0 0 / .15); }
  .settings-sections { padding: 8px; }
  .settings-sections > a { display: grid; min-height: 65px; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 13px; color: var(--text-soft); }
  .settings-sections > a:hover, .settings-sections > a.is-active { color: white; background: var(--gradient-soft); }
  .settings-sections__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--violet-light); background: rgb(66 133 244 / .12); }
  .settings-sections > a > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .settings-sections strong { font-size: .76rem; }
  .settings-sections small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
  .settings-panel { overflow: hidden; }
  .settings-panel__header { display: flex; align-items: flex-start; gap: 13px; padding: 25px 25px 21px; border-bottom: 1px solid var(--line); }
  .settings-panel__icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #dbeafe; background: linear-gradient(145deg, rgb(66 133 244 / .19), rgb(52 168 83 / .065)); }
  .settings-panel__header h2 { margin-top: 3px; font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: -.035em; }
  .settings-panel__header p { margin-top: 5px; color: var(--muted); font-size: .78rem; }
  .settings-row { display: grid; width: calc(100% - 32px); min-height: 84px; grid-template-columns: 44px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; margin: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .settings-row:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .04); transform: translateY(-1px); }
  .settings-row:focus-visible { outline: 3px solid rgb(56 189 248 / .35); outline-offset: 2px; }
  .settings-row.is-active { border-color: rgb(52 211 153 / .2); background: linear-gradient(135deg, rgb(52 211 153 / .055), rgb(66 133 244 / .04)); }
  .settings-row__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: var(--violet-light); background: var(--gradient-soft); }
  .settings-row.is-active .settings-row__icon { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .settings-row__copy { display: grid; min-width: 0; gap: 4px; }
  .settings-row__copy strong { font-size: .87rem; }
  .settings-row__copy small { overflow: hidden; color: var(--muted); font-size: .69rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .settings-row__status { padding: 5px 9px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .055); font-size: .58rem; font-weight: 820; letter-spacing: .03em; white-space: nowrap; text-transform: uppercase; }
  .settings-row__status.is-active { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .settings-row__status.is-loading { color: #dbeafe; background: rgb(66 133 244 / .1); }
  .settings-row__status.is-unavailable { color: #fecdd3; background: rgb(244 63 94 / .08); }
  .settings-row__chevron { display: grid; place-items: center; color: var(--faint); }
  .settings-panel__feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -5px 30px 15px 30px; color: var(--muted); font-size: .68rem; }
  .settings-panel__feedback:empty { display: none; }
  .settings-panel__feedback .text-button { flex: 0 0 auto; }
  .settings-panel__note { margin: 0 30px 24px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--faint); font-size: .68rem; line-height: 1.55; }

  .settings-directory__search { position: sticky; top: 12px; z-index: 14; width: 100%; max-width: none; min-height: 52px; margin-bottom: 25px; background: rgb(25 31 41 / .94); box-shadow: 0 12px 32px rgb(0 0 0 / .18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .settings-directory { display: grid; gap: 27px; }
  .settings-directory__section > h2 { margin: 0 4px 9px; color: var(--muted); font-size: .74rem; font-weight: 790; letter-spacing: .01em; }
  .settings-directory__list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / .018); box-shadow: 0 18px 52px rgb(0 0 0 / .11); }
  .settings-directory__item { display: grid; width: 100%; min-height: 76px; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 13px 15px; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: color .18s, background .18s; }
  .settings-directory__item--security { grid-template-columns: 44px minmax(0, 1fr) auto 20px; }
  .settings-directory__item + .settings-directory__item { border-top: 1px solid var(--line); }
  .settings-directory__item:hover, .settings-directory__item:focus-visible { color: white; background: rgb(255 255 255 / .045); }
  .settings-directory__item:focus-visible { position: relative; z-index: 1; outline: 3px solid rgb(56 189 248 / .34); outline-offset: -3px; }
  .settings-directory__item .settings-row__icon { width: 44px; height: 44px; }
  .settings-directory__item .settings-row__copy strong { font-size: .86rem; }
  .settings-directory__item .settings-row__copy small { font-size: .69rem; }
  .settings-directory__item.is-active { background: linear-gradient(135deg, rgb(52 211 153 / .055), rgb(139 92 246 / .035)); }
  .settings-directory__item.is-active .settings-row__icon { color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .settings-directory__feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -13px 5px 20px; color: var(--muted); font-size: .68rem; }
  .settings-directory__feedback:empty { display: none; }
  .settings-directory__empty { display: flex; min-height: 310px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 1px dashed var(--line-strong); border-radius: 20px; text-align: center; }
  .settings-directory__empty > span { display: grid; width: 58px; height: 58px; margin-bottom: 14px; place-items: center; border-radius: 18px; color: var(--faint); background: var(--surface-2); }
  .settings-directory__empty h2 { font-size: 1.05rem; }
  .settings-directory__empty p { max-width: 420px; margin-top: 7px; color: var(--muted); font-size: .75rem; line-height: 1.5; }

  .account-deletion-page { width: min(760px, 100%); }
  .account-deletion__heading { margin-bottom: 26px; }
  .account-deletion__body { min-height: 280px; }
  .account-deletion__stack { display: grid; gap: 18px; }
  .account-deletion__warning { display: flex; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid rgb(251 113 133 / .22); border-radius: 18px; background: rgb(251 113 133 / .055); }
  .account-deletion__warning-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #fecdd3; background: rgb(251 113 133 / .1); }
  .account-deletion__warning h2 { font-size: 1.04rem; }
  .account-deletion__warning p { margin-top: 6px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
  .account-deletion__effects { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
  .account-deletion__effects li { display: grid; min-height: 62px; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px 16px; color: var(--text-soft); background: var(--surface); font-size: .76rem; line-height: 1.45; }
  .account-deletion__effects svg { color: var(--faint); }
  .account-deletion__learn-more { display: inline-flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; color: #8ab4f8; font-size: .75rem; font-weight: 730; }
  .account-deletion__learn-more:hover { color: #aecbfa; }
  .account-deletion__confirm { display: grid; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / .018); }
  .account-deletion__confirm .field small { color: var(--faint); font-size: .68rem; line-height: 1.45; }
  .account-deletion__feedback { display: grid; gap: 11px; }
  .account-deletion__feedback:empty { display: none; }
}

@layer responsive {
  @media (max-width: 760px) {
    .settings-page { padding-inline: 14px; }
    .settings-heading { gap: 10px; margin-bottom: 22px; }
    .settings-heading__back { margin-left: -5px; }
    .settings-heading h1 { font-size: 1.8rem; }
    .settings-heading p { font-size: .78rem; }
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .settings-sections { padding: 6px; border-radius: 16px; }
    .settings-sections > a { min-height: 58px; }
    .settings-panel { border-radius: 18px; }
    .settings-panel__header { padding: 20px 17px 17px; }
    .settings-panel__icon { width: 42px; height: 42px; }
    .settings-row { width: calc(100% - 20px); grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; margin: 10px; padding: 12px; }
    .settings-row__icon { width: 40px; height: 40px; }
    .settings-row__status { grid-column: 2; justify-self: start; margin-top: 2px; }
    .settings-row__chevron { grid-row: 1 / span 2; grid-column: 3; }
    .settings-row__copy small { white-space: normal; }
    .settings-panel__feedback { align-items: flex-start; margin: 4px 18px 14px; }
    .settings-panel__note { margin: 0 18px 20px; }
    .settings-directory__search { top: calc(var(--mobile-header) + 7px); min-height: 49px; margin-bottom: 21px; }
    .settings-directory { gap: 23px; }
    .settings-directory__section > h2 { margin-inline: 3px; }
    .settings-directory__list { border-radius: 16px; }
    .settings-directory__item { min-height: 69px; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; padding: 11px 10px; }
    .settings-directory__item--security { grid-template-columns: 40px minmax(0, 1fr) 18px; }
    .settings-directory__item .settings-row__icon { width: 40px; height: 40px; }
    .settings-directory__item .settings-row__copy small { white-space: normal; }
    .settings-directory__item .settings-row__status { grid-column: 2; justify-self: start; margin-top: 2px; }
    .settings-directory__item .settings-row__chevron { grid-row: 1 / span 2; grid-column: 3; }
    .settings-directory__feedback { align-items: flex-start; margin: -9px 4px 17px; }
    .account-deletion-page { padding-inline: 14px; }
    .account-deletion__warning, .account-deletion__confirm { padding: 15px; border-radius: 16px; }
    .account-deletion__effects { border-radius: 16px; }
    .account-deletion__effects li { min-height: 58px; padding-inline: 13px; }
  }
}

@layer components {
  /* Broadcast channels and contextual messaging */
  .message-navigation-tabs { display: flex; min-width: 0; min-height: 54px; align-items: stretch; gap: 5px; overflow-x: auto; overflow-y: hidden; padding: 7px 9px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .012); overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .message-navigation-tabs::-webkit-scrollbar { display: none; }
  .message-kind-tabs, .conversation-folder-tabs { display: flex; min-width: max-content; flex: 1 0 auto; gap: 5px; }
  .message-kind-tabs__item, .conversation-folder-tabs__item { display: flex; min-width: max-content; min-height: 40px; flex: 1 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; transition: color .18s, border-color .18s, background .18s, transform .18s; }
  .message-kind-tabs__item { color: var(--muted); font-size: .65rem; font-weight: 760; }
  .message-kind-tabs__item:hover { color: var(--text-soft); background: rgb(255 255 255 / .035); }
  .message-kind-tabs__item.is-active { color: white; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .12); }
  .conversation-folder-tabs__item { position: relative; color: var(--faint); font-size: .61rem; font-weight: 760; }
  .conversation-folder-tabs__item:hover { color: var(--text-soft); background: rgb(255 255 255 / .03); }
  .message-kind-tabs__item:focus-visible, .conversation-folder-tabs__item:focus-visible, .conversation-setting-option:focus-visible, .conversation-security-actions > button:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .conversation-folder-tabs__item.is-active { border-color: rgb(167 139 250 / .16); color: #ede9fe; background: rgb(139 92 246 / .09); }
  .conversation-search { padding: 9px 10px 8px; border-bottom: 1px solid var(--line); }
  .conversation-search .search-box { width: 100%; min-height: 42px; }
  .conversation-search .search-box input { font-size: .7rem; }
  .secret-vault-recovery-trigger { min-height: 32px; padding-inline: 7px; color: #c4b5fd; font-size: .63rem; }
  .secret-vault-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; margin: 3px 3px 9px; padding: 10px; border: 1px solid rgb(52 211 153 / .16); border-radius: 12px; background: linear-gradient(135deg, rgb(52 211 153 / .07), rgb(139 92 246 / .045)); }
  .secret-vault-status__icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #a7f3d0; background: rgb(52 211 153 / .09); }
  .secret-vault-status > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
  .secret-vault-status strong { color: var(--text-soft); font-size: .64rem; }
  .secret-vault-status small { overflow: hidden; color: var(--faint); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
  .secret-vault-status__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
  .secret-vault-status .text-button { font-size: .61rem; }
  .secret-vault-status__close { min-height: 36px; padding-inline: 11px; font-size: .61rem; }
  .vault-conversation-row { width: 100%; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
  .vault-conversation-row:focus-visible, .secret-vault-status__title:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .conversation-row--secret { background: linear-gradient(90deg, rgb(139 92 246 / .045), transparent); }
  .conversation-row__top strong { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
  .conversation-row__top strong > span { overflow: hidden; text-overflow: ellipsis; }
  .conversation-row__privacy-icon { display: inline-grid; flex: 0 0 auto; place-items: center; color: #fde68a; }
  .conversation-row__timer { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: #c4b5fd; font-size: .55rem; }
  .conversation-list__label { padding: 14px 12px 5px; color: var(--faint); font-size: .58rem; font-weight: 830; letter-spacing: .09em; text-transform: uppercase; }
  .conversation-list__label:not(:first-child) { margin-top: 7px; border-top: 1px solid var(--line); }
  .conversation-list__empty--channels { gap: 8px; }
  .conversation-list__empty--channels .chat-empty__icon { margin-bottom: 3px; }
  .conversation-list__empty--channels strong { color: var(--text-soft); font-size: .84rem; }
  .conversation-list__empty--channels p { max-width: 260px; font-size: .7rem; line-height: 1.5; }
  .conversation-list__pagination { display: grid; justify-items: center; gap: 7px; padding: 12px 10px 18px; }
  .conversation-list__pagination p { color: var(--muted); font-size: .65rem; line-height: 1.4; text-align: center; }
  .conversation-list__pagination .button { min-height: 44px; }
  .conversation-list__pagination.has-error .button { border-color: rgb(248 113 113 / .24); }
  .chat-empty__icon--small { width: 58px; height: 58px; border-radius: 18px; }
  .channel-row .channel-avatar { flex: 0 0 auto; color: #c4b5fd; background: radial-gradient(circle at 25% 20%, rgb(56 189 248 / .25), transparent 45%), linear-gradient(145deg, #312e81, #701a75); }
  .channel-row .conversation-row__top strong { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
  .channel-row .conversation-row__top strong > span { overflow: hidden; text-overflow: ellipsis; }
  .channel-lock { display: inline-grid; flex: 0 0 auto; place-items: center; color: #fde68a; }
  .channel-row__unread { display: grid; min-width: 18px; height: 18px; flex: 0 0 auto; place-items: center; padding-inline: 4px; border-radius: 99px; background: var(--gradient); font-size: .56rem; }
  .channel-row .conversation-row__bottom small { flex: 0 0 auto; color: var(--faint); font-size: .56rem; }

  .chat-top { position: relative; z-index: 4; display: grid; min-width: 0; }
  .chat-header--channel { background: linear-gradient(90deg, rgb(139 92 246 / .08), rgb(9 9 13 / .82) 46%); }
  .chat-header__more { margin-left: auto; }
  .chat-header__secret-badge { display: inline-grid; flex: 0 0 auto; place-items: center; color: #fde68a; }
  .channel-header__identity { cursor: default; }
  .channel-header__identity .channel-avatar { flex: 0 0 auto; color: #ddd6fe; background: linear-gradient(145deg, #312e81, #831843); }
  .channel-header__identity strong { gap: 5px; }
  .channel-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }

  .pinned-message-slot { position: relative; display: flex; min-width: 0; align-items: center; border-bottom: 1px solid rgb(167 139 250 / .15); background: rgb(16 13 27 / .94); box-shadow: 0 10px 26px rgb(0 0 0 / .16); }
  .pinned-message { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px clamp(18px, 4vw, 56px); color: var(--text-soft); background: transparent; text-align: left; cursor: pointer; }
  .pinned-message__icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #c4b5fd; background: rgb(139 92 246 / .12); }
  .pinned-message__copy { display: grid; min-width: 0; gap: 1px; }
  .pinned-message__copy strong { font-size: .67rem; }
  .pinned-message__copy small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .pinned-message__remove { width: 36px; min-width: 36px; height: 36px; margin-right: 12px; }

  .channel-gate { display: flex; grid-row: 2 / -1; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 7vw, 90px); text-align: center; }
  .channel-gate__icon { display: grid; width: 86px; height: 86px; place-items: center; margin-bottom: 18px; border: 1px solid rgb(167 139 250 / .2); border-radius: 28px; color: #c4b5fd; background: radial-gradient(circle at 25% 20%, rgb(56 189 248 / .16), transparent 42%), var(--gradient-soft); box-shadow: 0 24px 65px rgb(76 29 149 / .22); }
  .channel-gate h2 { margin-top: 5px; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.04em; }
  .channel-gate p { max-width: 540px; margin: 9px auto 22px; color: var(--muted); line-height: 1.55; }
  .channel-gate small { max-width: 420px; margin-top: 13px; color: var(--faint); font-size: .64rem; line-height: 1.45; }
  .chat-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

  .message-list--channel { background: radial-gradient(circle at 50% 0%, rgb(139 92 246 / .045), transparent 38%); }
  .message-bubble { margin-block: 5px; transition: box-shadow .24s, filter .24s, transform .24s; }
  .message-bubble.is-pinned { box-shadow: 0 0 0 1px rgb(196 181 253 / .2); }
  .message-bubble.is-highlighted { animation: messageHighlight 1.5s ease; }
  .message-bubble__author { display: block; margin-bottom: 2px; color: #c4b5fd; font-size: .62rem; font-weight: 780; }
  .message-bubble__pin-label { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; color: #ddd6fe; font-weight: 760; }
  .message-bubble.is-deleted.is-mine, .message-bubble.is-deleted.is-theirs { border: 1px solid var(--line); color: var(--muted); background: rgb(255 255 255 / .025); font-style: italic; }
  .message-bubble__expiry { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; color: #e9d5ff; font-variant-numeric: tabular-nums; }

  .message-reply-quote { display: grid; width: 100%; min-width: 0; grid-template-columns: 3px minmax(0, 1fr); gap: 8px; margin: 0 0 6px; padding: 6px 8px; border-radius: 9px; color: inherit; background: rgb(0 0 0 / .16); text-align: left; cursor: pointer; }
  .message-reply-quote__mark { border-radius: 99px; background: #c4b5fd; }
  .message-reply-quote > span:last-child { display: grid; min-width: 0; gap: 1px; }
  .message-reply-quote strong { color: #ede9fe; font-size: .6rem; }
  .message-reply-quote small { overflow: hidden; color: rgb(255 255 255 / .68); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }

  .message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
  .message-reaction-chip { display: inline-flex; min-height: 24px; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid rgb(255 255 255 / .09); border-radius: 99px; color: var(--text-soft); background: rgb(0 0 0 / .15); cursor: pointer; }
  .message-reaction-chip.is-mine { border-color: rgb(167 139 250 / .48); background: rgb(139 92 246 / .18); }
  .message-reaction-chip.is-readonly { cursor: default; opacity: .82; }
  .message-reaction-chip b { font-size: .58rem; }

  .message-actions { position: absolute; top: 50%; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; opacity: 0; background: rgb(24 24 32 / .96); box-shadow: var(--shadow-sm); transform: translateY(-50%); transition: opacity .16s, transform .16s; }
  .message-bubble.is-mine .message-actions { right: calc(100% + 6px); }
  .message-bubble.is-theirs .message-actions { left: calc(100% + 6px); }
  .message-bubble:hover .message-actions, .message-actions:focus-within { z-index: 6; opacity: 1; }
  .message-actions.message-actions--tombstone { opacity: .84; }
  .message-actions > button { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
  .message-actions > button:hover, .message-actions > button:focus-visible { color: white; background: rgb(255 255 255 / .07); }
  .message-actions > button.is-danger:hover { color: #fda4af; }
  .message-reaction-picker { position: absolute; bottom: calc(100% + 7px); display: flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgb(24 24 32 / .98); box-shadow: var(--shadow); }
  .message-bubble.is-mine .message-reaction-picker { right: 0; }
  .message-bubble.is-theirs .message-reaction-picker { left: 0; }
  .message-reaction-picker button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: transparent; font-size: 1.05rem; cursor: pointer; transition: background .15s, transform .15s; }
  .message-reaction-picker button:hover, .message-reaction-picker button:focus-visible { background: rgb(255 255 255 / .08); transform: scale(1.1); }

  .message-composer__row { display: flex; align-items: end; gap: 9px; }
  .message-composer__expiry { display: flex; align-items: center; gap: 5px; padding-inline: 4px; color: #c4b5fd; font-size: .59rem; }
  .message-reply-draft { display: grid; min-width: 0; grid-template-columns: 3px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 8px 7px 12px; border: 1px solid rgb(167 139 250 / .13); border-radius: 11px; background: rgb(139 92 246 / .055); }
  .message-reply-draft__mark { align-self: stretch; border-radius: 99px; background: var(--violet-light); }
  .message-reply-draft > span:nth-child(2) { display: grid; min-width: 0; }
  .message-reply-draft strong { color: #ddd6fe; font-size: .65rem; }
  .message-reply-draft small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .message-reply-draft .icon-button { width: 32px; min-width: 32px; height: 32px; }
  .message-composer--locked { align-items: center; gap: 10px; color: var(--muted); }
  .message-composer--locked > svg { flex: 0 0 auto; color: #c4b5fd; }
  .message-composer--locked > span { display: grid; gap: 2px; }
  .message-composer--locked strong { color: var(--text-soft); font-size: .72rem; }
  .message-composer--locked small { font-size: .62rem; }

  .message-create-sheet, .channel-actions-sheet { padding: 30px 26px max(28px, env(safe-area-inset-bottom)); }
  .message-create-sheet h2, .channel-actions-sheet h2 { margin-top: 3px; font-size: 1.5rem; letter-spacing: -.035em; }
  .message-create-sheet > p, .channel-actions-sheet > p { margin-top: 6px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
  .message-create-sheet__choices, .channel-actions-sheet__list { display: grid; gap: 8px; margin-top: 20px; }
  .message-create-sheet__choices > button, .channel-actions-sheet__list > button { display: grid; width: 100%; min-height: 68px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgb(255 255 255 / .02); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .message-create-sheet__choices > button:hover:not(:disabled), .channel-actions-sheet__list > button:hover { border-color: rgb(167 139 250 / .28); background: rgb(139 92 246 / .06); transform: translateY(-1px); }
  .message-create-sheet__choices > button:disabled { opacity: .48; cursor: not-allowed; }
  .message-create-sheet__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #c4b5fd; background: var(--gradient-soft); }
  .message-create-sheet__choices > button > span:nth-child(2), .channel-actions-sheet__list > button > span { display: grid; gap: 3px; }
  .message-create-sheet__choices strong, .channel-actions-sheet__list strong { font-size: .78rem; }
  .message-create-sheet__choices small, .channel-actions-sheet__list small { color: var(--muted); font-size: .64rem; line-height: 1.4; }
  .channel-actions-sheet__list > button > svg:first-child { color: var(--violet-light); }
  .channel-actions-sheet__list > button.is-danger > svg:first-child, .channel-actions-sheet__list > button.is-danger strong { color: #fda4af; }

  .broadcast-channel-modal { width: min(620px, 100%); }
  .broadcast-channel-form { display: grid; gap: 14px; padding: 30px 28px max(28px, env(safe-area-inset-bottom)); }
  .broadcast-channel-form > header { display: flex; align-items: flex-start; gap: 12px; padding-right: 34px; }
  .broadcast-channel-form > header > div { min-width: 0; }
  .broadcast-channel-form h2 { margin-top: 2px; font-size: 1.48rem; letter-spacing: -.035em; }
  .broadcast-channel-form header p { margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
  .broadcast-channel-form__icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #c4b5fd; background: var(--gradient-soft); }
  .broadcast-channel-form__icon.is-danger { color: #fecdd3; background: rgb(244 63 94 / .09); }
  .broadcast-channel-form__feedback:empty { display: none; }
  .broadcast-channel-form__toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .broadcast-setting-card { align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / .018); }
  .broadcast-setting-card > span { display: grid; gap: 3px; }
  .broadcast-setting-card strong { color: var(--text-soft); font-size: .72rem; }
  .broadcast-setting-card small, .broadcast-channel-form__password > small { color: var(--faint); font-size: .61rem; font-weight: 520; line-height: 1.4; }
  .broadcast-channel-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 4px; }
  .broadcast-channel-form__actions > small { max-width: 340px; color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .broadcast-password-form { gap: 17px; }

  .conversation-settings-modal, .secret-vault-modal { width: min(650px, 100%); }
  .conversation-settings-sheet, .secret-vault-actions { padding: 30px 27px max(28px, env(safe-area-inset-bottom)); }
  .conversation-settings-sheet > h2, .secret-vault-actions > h2 { margin-top: 3px; font-size: 1.48rem; letter-spacing: -.035em; }
  .conversation-settings-sheet > p, .secret-vault-actions > p { margin-top: 6px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
  .conversation-settings-sheet__feedback { margin-top: 12px; }
  .conversation-settings-sheet__feedback:empty, .secret-vault-form__feedback:empty { display: none; }
  .conversation-settings-section { margin-top: 22px; }
  .conversation-settings-section > h3 { font-size: .78rem; letter-spacing: .01em; }
  .conversation-settings-section > p { margin-top: 3px; color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .conversation-setting-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
  .conversation-setting-options--ttl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .conversation-setting-option { display: grid; min-width: 0; min-height: 108px; grid-template-rows: auto 1fr auto; justify-items: start; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--text-soft); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .conversation-setting-option:hover { border-color: rgb(167 139 250 / .28); background: rgb(139 92 246 / .055); transform: translateY(-1px); }
  .conversation-setting-option.is-selected { border-color: rgb(167 139 250 / .45); background: linear-gradient(145deg, rgb(139 92 246 / .15), rgb(236 72 153 / .05)); }
  .conversation-setting-option:disabled { opacity: .62; cursor: wait; transform: none; }
  .conversation-setting-option__icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #ddd6fe; background: var(--gradient-soft); }
  .conversation-setting-option > span:nth-child(2) { display: grid; min-width: 0; align-content: start; gap: 3px; }
  .conversation-setting-option strong { font-size: .69rem; }
  .conversation-setting-option small { color: var(--faint); font-size: .57rem; line-height: 1.35; }
  .conversation-setting-option > svg { justify-self: end; color: #c4b5fd; }
  .conversation-setting-options--ttl .conversation-setting-option { min-height: 96px; }
  .conversation-security-actions { display: grid; gap: 7px; margin-top: 10px; }
  .conversation-security-actions > button { display: grid; width: 100%; min-height: 66px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; }
  .conversation-security-actions > button:hover { border-color: rgb(167 139 250 / .3); background: rgb(139 92 246 / .055); }
  .conversation-security-actions > button > svg:first-child { color: #c4b5fd; }
  .conversation-security-actions > button > span { display: grid; gap: 3px; }
  .conversation-security-actions strong { font-size: .73rem; }
  .conversation-security-actions small { color: var(--muted); font-size: .61rem; line-height: 1.4; }

  .secret-vault-form { display: grid; gap: 15px; padding: 30px 28px max(28px, env(safe-area-inset-bottom)); }
  .secret-vault-form > header { display: flex; align-items: flex-start; gap: 12px; padding-right: 34px; }
  .secret-vault-form > header > div { min-width: 0; }
  .secret-vault-form__icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(167 139 250 / .18); border-radius: 14px; color: #ddd6fe; background: var(--gradient-soft); }
  .secret-vault-form h2 { margin-top: 2px; font-size: 1.45rem; letter-spacing: -.035em; }
  .secret-vault-form header p { margin-top: 5px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
  .secret-vault-form .field > small { color: var(--faint); font-size: .6rem; font-weight: 520; line-height: 1.4; }
  .secret-vault-form__note { display: flex; align-items: flex-start; gap: 7px; padding: 10px 11px; border-radius: 11px; color: var(--muted); background: rgb(139 92 246 / .055); font-size: .62rem; line-height: 1.45; }
  .secret-vault-form__note svg { flex: 0 0 auto; margin-top: 1px; color: #c4b5fd; }
  .secret-vault-actions .conversation-security-actions { margin-top: 20px; }

  .broadcast-admin { margin-bottom: 14px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(167 139 250 / .17); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgb(139 92 246 / .1), transparent 35%), var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .16); }
  .broadcast-admin__heading { align-items: flex-start; margin-bottom: 18px; }
  .broadcast-admin__heading .eyebrow { color: #c4b5fd; }
  .broadcast-admin__state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgb(52 211 153 / .2); border-radius: 99px; color: #a7f3d0; background: rgb(52 211 153 / .06); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
  .broadcast-admin__loading { display: flex; min-height: 130px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .72rem; }
  .broadcast-admin__form { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(220px, 1.35fr); align-items: end; gap: 14px; }
  .broadcast-admin__metric { display: flex; min-height: 76px; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .018); }
  .broadcast-admin__metric-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #c4b5fd; background: var(--gradient-soft); }
  .broadcast-admin__metric > span:last-child { display: grid; gap: 2px; }
  .broadcast-admin__metric small { color: var(--faint); font-size: .61rem; }
  .broadcast-admin__threshold { font-size: .95rem; }
  .broadcast-admin__feedback { grid-column: 1 / -1; }
  .broadcast-admin__feedback:empty { display: none; }
  .broadcast-admin__actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; }
  .broadcast-admin__actions p { max-width: 560px; color: var(--faint); font-size: .65rem; line-height: 1.45; }
  .broadcast-admin__error { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
}

@layer pages {
  .messages-page .conversation-sidebar,
  .messages-page.has-folder-tabs .conversation-sidebar { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .messages-page.is-vault-mode .conversation-sidebar { grid-template-rows: auto minmax(0, 1fr); }
  .chat-panel .message-composer { display: grid; align-items: stretch; gap: 7px; }
  .chat-panel .message-composer--locked { display: flex; }
}

@layer responsive {
  @media (hover: none), (pointer: coarse) {
    .message-actions { opacity: .7; }
  }

  @media (max-width: 760px) {
    .message-navigation-tabs { padding-inline: 12px; }
    .message-kind-tabs__item, .conversation-folder-tabs__item { padding-inline: 8px; }
    .channel-row .conversation-row__bottom small { display: none; }
    .chat-header--channel { padding-right: 10px; }
    .pinned-message { padding-inline: 12px; }
    .pinned-message__remove { margin-right: 6px; }
    .channel-gate { padding: 28px 22px; }
    .channel-gate__icon { width: 72px; height: 72px; border-radius: 23px; }
    .message-bubble { max-width: 78%; margin-block: 18px 7px; }
    .message-actions { top: auto; bottom: calc(100% + 3px); gap: 0; padding: 2px; opacity: .72; transform: none; }
    .message-bubble.is-mine .message-actions { right: 0; }
    .message-bubble.is-theirs .message-actions { right: auto; left: 0; }
    .message-actions > button { width: 29px; height: 29px; }
    .message-reaction-picker { right: 0 !important; bottom: calc(100% + 5px); left: auto !important; max-width: min(280px, calc(100vw - 24px)); }
    .message-reaction-picker button { width: 32px; height: 32px; }
    .message-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .message-composer--locked { min-height: 58px; }
    .message-create-sheet, .channel-actions-sheet { padding-inline: 18px; }
    .broadcast-channel-form { padding: 26px 18px max(24px, env(safe-area-inset-bottom)); }
    .broadcast-channel-form__toggles { grid-template-columns: 1fr; }
    .broadcast-channel-form__actions { align-items: stretch; flex-direction: column; }
    .broadcast-channel-form__actions .button { width: 100%; }
    .conversation-settings-sheet, .secret-vault-actions { padding: 26px 18px max(24px, env(safe-area-inset-bottom)); }
    .conversation-setting-options, .conversation-setting-options--ttl { grid-template-columns: 1fr; }
    .conversation-setting-option, .conversation-setting-options--ttl .conversation-setting-option { min-height: 66px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; }
    .secret-vault-form { padding: 26px 18px max(24px, env(safe-area-inset-bottom)); }
    .secret-vault-form > header { padding-right: 28px; }
    .secret-vault-form .button--large { width: 100%; }
    .broadcast-admin { margin-inline: -4px; padding: 16px; border-radius: 16px; }
    .broadcast-admin__heading { gap: 10px; }
    .broadcast-admin__form { grid-template-columns: 1fr; }
    .broadcast-admin__feedback, .broadcast-admin__actions { grid-column: auto; }
    .broadcast-admin__actions { align-items: stretch; flex-direction: column; }
    .broadcast-admin__actions .button { width: 100%; }
    .broadcast-admin__error { align-items: stretch; flex-direction: column; }
  }

  @media (max-width: 390px) {
    .message-navigation-tabs { min-height: 52px; gap: 3px; padding-inline: 8px; }
    .message-kind-tabs__item, .conversation-folder-tabs__item { min-height: 38px; gap: 3px; padding-inline: 7px; font-size: .57rem; }
    .message-kind-tabs__item svg, .conversation-folder-tabs__item svg { width: 12px; }
    .message-bubble { max-width: 82%; }
    .message-reaction-picker { gap: 0; padding: 4px; }
    .message-reaction-picker button { width: 30px; }
    .broadcast-channel-form > header { padding-right: 25px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .message-bubble.is-highlighted { animation: none; box-shadow: 0 0 0 3px rgb(167 139 250 / .5); }
  }
}

@layer motion {
  @keyframes messageHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgb(167 139 250 / 0); filter: brightness(1); transform: scale(1); }
    25%, 70% { box-shadow: 0 0 0 4px rgb(167 139 250 / .36), 0 12px 34px rgb(76 29 149 / .22); filter: brightness(1.12); transform: scale(1.012); }
  }
}

@layer tokens {
  :root {
    --bg: #080b10;
    --bg-soft: #0d1117;
    --surface: #151a22;
    --surface-2: #1b222d;
    --surface-3: #232c38;
    --surface-glass: rgb(16 21 29 / .84);
    --text: #f7f9fc;
    --text-soft: #c8d0dc;
    --muted: #929cab;
    --faint: #7f8997;
    --line: rgb(255 255 255 / .085);
    --line-strong: rgb(255 255 255 / .15);
    --brand-blue: #4285f4;
    --brand-red: #ea4335;
    --brand-yellow: #fbbc05;
    --brand-green: #34a853;
    --brand-spectrum: linear-gradient(105deg, var(--brand-blue) 0 27%, var(--brand-green) 39% 51%, var(--brand-yellow) 63% 74%, var(--brand-red) 86% 100%);
    --menu-top-spectrum: linear-gradient(90deg, rgb(66 133 244 / 0) 0%, var(--brand-blue) 12%, var(--brand-red) 38%, var(--brand-yellow) 64%, var(--brand-green) 88%, rgb(52 168 83 / 0) 100%);
    /* Legacy accent aliases keep older modules coherent while the product
       moves from the purple/pink treatment to a neutral blue-led palette. */
    --violet: var(--brand-blue);
    --violet-light: #8ab4f8;
    --pink: var(--brand-red);
    --cyan: #38bdf8;
    --danger: #fb7185;
    --success: #34d399;
    --gradient: linear-gradient(135deg, var(--brand-blue), #2f6fda);
    --gradient-soft: linear-gradient(135deg, rgb(66 133 244 / .18), rgb(52 168 83 / .11) 52%, rgb(251 188 5 / .08));
    --shadow-sm: 0 8px 24px rgb(0 0 0 / .2);
    --shadow: 0 22px 70px rgb(0 0 0 / .46);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --sidebar: 244px;
    --mobile-header: 58px;
    --bottom-nav: 68px;
    --feed-header-row: 55px;
    --feed-stories-row: 104px;
    --feed-max-width: 1220px;
    --ease: cubic-bezier(.22, .8, .25, 1);
  }
}

@layer base {
  html, body { min-height: 100%; background: var(--bg); }
  /* Keep touch gestures owned by the component that can actually scroll.
     Mobile Safari may otherwise pan the whole document when a horizontal
     rail is wider than the visual viewport, leaving the interface shifted. */
  html { max-width: 100%; overflow-x: clip; }
  body {
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }
  body::before {
    position: fixed; inset: -30% auto auto 28%; width: 680px; height: 480px;
    border-radius: 999px; background: rgb(139 92 246 / .045); filter: blur(100px);
    pointer-events: none; content: ""; z-index: -1;
  }
  ::selection { color: white; background: rgb(139 92 246 / .65); }
  :focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { border-radius: 99px; background: #32323d; }
  ::-webkit-scrollbar-track { background: transparent; }
  [hidden] { display: none !important; }
  .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 9px 12px; border-radius: 9px; opacity: 0; background: var(--violet); transform: translateY(-150%); }
  .skip-link:focus { opacity: 1; transform: none; }
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .muted { color: var(--muted); }
  .eyebrow { color: var(--violet-light); font-size: .71rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

  /* Compatibility for clients that still have the pre-fix icon module in
     their immutable cache. Only the malformed legacy path is translated;
     the corrected absolute path shipped by icons.js is left untouched. */
  .icon[data-icon="close"] path[d="m6-12 12 12"] { transform: translateY(18px); }
}

@layer layout {
  .app-shell { min-width: 0; min-height: 100dvh; overflow-x: clip; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar);
    flex-direction: column; gap: 34px; padding: 28px 20px 22px; border-right: 1px solid var(--line);
    background: linear-gradient(180deg, #0d0d13 0%, rgb(10 10 15 / .97) 100%);
  }
  .sidebar__nav { display: grid; gap: 7px; }
  .sidebar__link {
    position: relative; display: flex; min-height: 48px; align-items: center; gap: 15px; padding: 0 14px;
    border-radius: 13px; color: var(--text-soft); font-weight: 650; transition: color .2s, background .2s, transform .2s;
  }
  .sidebar__link:hover { color: white; background: rgb(255 255 255 / .05); transform: translateX(2px); }
  .sidebar__link.is-active { color: white; background: var(--gradient-soft); }
  .sidebar__link.is-active::before { position: absolute; left: -20px; width: 3px; height: 24px; border-radius: 0 4px 4px 0; background: var(--gradient); content: ""; }
  .sidebar__link--create { margin-block: 7px; color: white; background: var(--gradient); box-shadow: 0 10px 30px rgb(66 133 244 / .2); }
  .sidebar__link--create:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgb(66 133 244 / .28); }
  .sidebar__account { margin-top: auto; }
  .app-main { min-width: 0; min-height: 100dvh; margin-left: var(--sidebar); overflow-x: clip; }
  .mobile-header, .bottom-nav { display: none; }
  .page { width: min(1180px, 100%); min-width: 0; min-height: 100dvh; margin-inline: auto; padding: 38px clamp(24px, 4vw, 60px) 70px; }
  .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
  .page-heading h1 { margin-top: 4px; font-size: clamp(1.75rem, 3vw, 2.7rem); font-weight: 820; letter-spacing: -.045em; line-height: 1.05; }
  .page-heading p { max-width: 620px; margin-top: 10px; color: var(--muted); }
  .page-heading--sticky { position: sticky; top: 0; z-index: 15; align-items: center; padding-block: 22px 18px; background: linear-gradient(180deg, var(--bg) 82%, transparent); }
  .section-block { margin-top: 30px; }
  .section-block__heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
  .section-block__heading h2 { font-size: 1.08rem; letter-spacing: -.015em; }
  .section-block__heading p { margin-top: 3px; color: var(--muted); font-size: .86rem; }
}

@layer components {
  .upload-status {
    --upload-progress: 0%; --upload-ring: #a78bfa; position: fixed; top: max(10px, env(safe-area-inset-top)); right: 14px; left: calc(var(--sidebar) + 14px); z-index: 180;
    display: grid; min-height: 64px; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
    padding: 9px 13px 13px; overflow: hidden; border: 1px solid rgb(167 139 250 / .38); border-radius: 16px;
    color: white; background: rgb(15 12 25 / .94); box-shadow: 0 18px 54px rgb(0 0 0 / .38); backdrop-filter: blur(18px);
  }
  body[data-route="/"] .upload-status {
    top: max(
      calc(env(safe-area-inset-top) + 8px),
      calc(var(--feed-header-row) + var(--feed-stories-row) + 8px - var(--feed-chrome-scroll, 0px))
    );
  }
  .upload-status[hidden] { display: none; }
  .upload-status__icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #ddd6fe; background: rgb(139 92 246 / .2); }
  .upload-status__preview { width: 44px; height: 44px; overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; background: rgb(255 255 255 / .07); }
  .upload-status__preview[hidden] { display: none; }
  .upload-status__preview img, .upload-status__preview video { width: 100%; height: 100%; object-fit: cover; }
  .upload-status__copy { display: grid; min-width: 0; gap: 1px; }
  .upload-status__copy strong { font-size: .7rem; }
  .upload-status__copy small { overflow: hidden; color: rgb(255 255 255 / .64); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
  .upload-status > b { font-size: .62rem; font-variant-numeric: tabular-nums; }
  .upload-status__actions { display: flex; align-items: center; gap: 6px; }
  .upload-status__actions[hidden] { display: none; }
  .upload-status__action { min-height: 30px; padding: 6px 9px; border: 1px solid rgb(255 255 255 / .16); border-radius: 9px; color: white; background: rgb(255 255 255 / .07); font: inherit; font-size: .58rem; font-weight: 750; cursor: pointer; }
  .upload-status__action--retry { border-color: rgb(196 181 253 / .42); color: #ede9fe; background: rgb(124 58 237 / .23); }
  .upload-status__compact-toggle {
    position: relative; isolation: isolate; display: grid; width: 36px; height: 36px; grid-row: 1; grid-column: -2 / -1;
    place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .14); border-radius: 11px;
    color: #e2e8f0; background: rgb(255 255 255 / .055); cursor: pointer;
  }
  .upload-status__compact-toggle:hover { border-color: rgb(167 139 250 / .44); background: rgb(255 255 255 / .1); }
  .upload-status__compact-toggle:focus-visible { outline: 3px solid rgb(96 165 250 / .34); outline-offset: 2px; }
  .upload-status__compact-value, .upload-status__compact-check { display: none; }
  .upload-status.is-error { --upload-ring: #fb7185; border-color: rgb(251 113 133 / .48); }
  .upload-status.is-error .upload-status__progress i { background: #fb7185; }
  .upload-status.is-success { --upload-ring: #34d399; border-color: rgb(52 211 153 / .44); }
  .upload-status.is-success .upload-status__progress i { background: #34d399; }
  .upload-status__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: rgb(255 255 255 / .08); }
  .upload-status__progress i { display: block; width: var(--upload-progress); height: 100%; border-radius: 0 99px 99px 0; background: var(--gradient); transition: width .16s linear; }
  .upload-status.is-indeterminate .upload-status__progress i { width: 32%; animation: uploadProgress 1.1s ease-in-out infinite; }
  .upload-status.is-compact {
    left: auto; width: 58px; height: 58px; min-height: 58px; grid-template-columns: 1fr; gap: 0; padding: 0;
    overflow: visible; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 13px 34px rgb(0 0 0 / .4); backdrop-filter: none;
  }
  .upload-status.is-compact > :not(.upload-status__compact-toggle) { display: none !important; }
  .upload-status.is-compact .upload-status__compact-toggle {
    width: 58px; height: 58px; grid-row: 1; grid-column: 1; overflow: hidden; border: 0; border-radius: 50%;
    color: white; background: transparent; font-size: .62rem; font-weight: 850; font-variant-numeric: tabular-nums;
  }
  .upload-status.is-compact .upload-status__compact-toggle::before,
  .upload-status.is-compact .upload-status__compact-toggle::after {
    position: absolute; border-radius: inherit; content: '';
  }
  .upload-status.is-compact .upload-status__compact-toggle::before {
    inset: 0; z-index: -2; background: conic-gradient(from -90deg, var(--upload-ring) var(--upload-progress), rgb(255 255 255 / .14) 0);
  }
  .upload-status.is-compact .upload-status__compact-toggle::after {
    inset: 4px; z-index: -1; border: 1px solid rgb(255 255 255 / .08); background: rgb(15 12 25 / .96);
  }
  .upload-status.is-compact .upload-status__minimize-icon { display: none; }
  .upload-status.is-compact .upload-status__compact-value { position: relative; z-index: 1; display: inline; }
  .upload-status.is-compact.is-compact-indeterminate .upload-status__compact-toggle::before {
    background: conic-gradient(from -90deg, var(--upload-ring) 0 24%, transparent 24% 48%, var(--upload-ring) 48% 67%, transparent 67% 100%);
    animation: uploadCompactSpin .95s linear infinite;
  }
  .upload-status.is-compact.is-compact-complete .upload-status__compact-toggle::before,
  .upload-status.is-compact.is-compact-complete .upload-status__compact-toggle::after { background: #22c55e; }
  .upload-status.is-compact.is-compact-complete .upload-status__compact-value { display: none; }
  .upload-status.is-compact.is-compact-complete .upload-status__compact-check { position: relative; z-index: 1; display: grid; }
  .upload-status.is-compact.is-compact-error .upload-status__compact-toggle::after { background: rgb(64 15 28 / .97); }

  .brand { display: inline-flex; width: max-content; align-items: center; gap: 11px; }
  .brand__logo { width: 118px; height: auto; filter: drop-shadow(0 6px 16px rgb(0 0 0 / .2)); }
  .nav-icon { position: relative; display: grid; width: 26px; place-items: center; }
  .nav-badge { position: absolute; top: 8px; left: 31px; display: grid; min-width: 17px; height: 17px; place-items: center; padding-inline: 4px; border: 2px solid var(--bg); border-radius: 99px; background: var(--pink); color: white; font-size: .58rem; font-weight: 850; }
  .account-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .025); }
  .account-chip:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .05); }
  .account-chip__text { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
  .account-chip__text strong, .account-chip__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-chip__text strong { font-size: .82rem; }
  .account-chip__text small { color: var(--muted); font-size: .72rem; }
  .account-chip > svg { color: var(--faint); }

  .avatar { display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #3b2b68, #6f2956); color: white; font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar--xs { width: 28px; height: 28px; }
  .avatar--sm { width: 38px; height: 38px; }
  .avatar--md { width: 46px; height: 46px; }
  .avatar--lg { width: 58px; height: 58px; }
  .avatar--xl { width: 118px; height: 118px; font-size: 1.55rem; }
  .avatar-button { display: grid; padding: 0; border-radius: 50%; color: white; background: transparent; cursor: pointer; }

  .button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; color: white; font-size: .88rem; font-weight: 750; cursor: pointer; transition: transform .18s var(--ease), background .2s, border-color .2s, opacity .2s; }
  .button:hover:not(:disabled) { transform: translateY(-1px); }
  .button:active:not(:disabled) { transform: scale(.98); }
  .button:disabled { opacity: .55; cursor: wait; }
  .button--primary { background: var(--gradient); box-shadow: 0 8px 24px rgb(139 92 246 / .16); }
  .button--primary:hover { box-shadow: 0 11px 28px rgb(139 92 246 / .25); }
  .button--soft { border-color: var(--line); background: var(--surface-2); }
  .button--soft:hover { border-color: var(--line-strong); background: var(--surface-3); }
  .button--ghost { border-color: var(--line); background: transparent; }
  .button--danger { background: var(--danger); }
  .button--large { min-height: 48px; padding-inline: 24px; border-radius: 13px; }
  .button--block { width: 100%; }
  .icon-button { position: relative; display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--text-soft); background: transparent; cursor: pointer; transition: color .2s, background .2s, transform .18s; }
  .icon-button:hover:not(:disabled) { color: white; background: rgb(255 255 255 / .08); }
  .icon-button:active:not(:disabled) { transform: scale(.94); }
  .icon-button:disabled { opacity: .35; cursor: default; }
  .icon-button--accent { color: white; background: var(--gradient); }
  .icon-button--accent:hover { background: var(--gradient); }
  .text-button { padding: 0; color: var(--violet-light); background: none; font-weight: 760; cursor: pointer; }
  .text-button:hover { color: white; }

  .field { display: grid; gap: 7px; color: var(--text-soft); font-size: .78rem; font-weight: 670; }
  .field input, .field textarea, .field select, .search-box input, select {
    width: 100%; min-height: 45px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0;
    color: var(--text); background: var(--surface-2); font-size: .92rem; font-weight: 500; transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .field input:not([type="checkbox"]):not([type="range"]), .field textarea, .search-box input { appearance: none; }
  .field select, .music-manager__controls > select, .music-provider__audit select {
    appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px;
  }
  .field textarea { min-height: 105px; padding-block: 12px; resize: vertical; }
  .field input::placeholder, .field textarea::placeholder, .search-box input::placeholder { color: var(--faint); }
  .field input:focus, .field textarea:focus, .field select:focus, .search-box:focus-within { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); background: #1d1d27; }
  .field__control { position: relative; display: block; }
  .field__control > svg { position: absolute; top: 50%; left: 12px; z-index: 1; color: var(--faint); transform: translateY(-50%); }
  .field__control > svg + input { padding-left: 40px; }
  .field--textarea { position: relative; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-label { display: block; margin-bottom: 9px; color: var(--text-soft); font-size: .78rem; font-weight: 680; }
  .check-field { position: relative; display: flex; align-items: flex-start; color: var(--muted); font-size: .76rem; cursor: pointer; }
  .check-field input[type="checkbox"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
  .check-field > span { position: relative; min-height: 22px; padding-left: 31px; line-height: 1.45; }
  .check-field > span::before { position: absolute; top: 0; left: 0; width: 21px; height: 21px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 1px rgb(255 255 255 / .04); content: ""; transition: border-color .18s, background .18s, box-shadow .18s; }
  .check-field > span::after { position: absolute; top: 3px; left: 7px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; opacity: 0; content: ""; transform: rotate(45deg) scale(.72); transition: opacity .16s, transform .16s; }
  .check-field input[type="checkbox"]:checked + span::before { border-color: transparent; background: var(--gradient); box-shadow: 0 6px 18px rgb(139 92 246 / .24); }
  .check-field input[type="checkbox"]:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }
  .check-field input[type="checkbox"]:focus-visible + span::before { outline: 3px solid rgb(34 211 238 / .5); outline-offset: 3px; }
  .search-box { display: flex; width: min(480px, 48vw); min-height: 46px; align-items: center; gap: 10px; padding-inline: 14px 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
  .search-box > svg { flex: 0 0 auto; color: var(--muted); }
  .search-box input { min-height: auto; padding: 0; border: 0; background: transparent; box-shadow: none !important; }
  .search-box__clear { width: 32px; height: 32px; }
  .character-count { position: absolute; right: 10px; bottom: 8px; color: var(--faint); font-size: .68rem; font-weight: 600; }

  .segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
  .segmented__item { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 19px; border-radius: 9px; color: var(--muted); background: transparent; font-size: .82rem; font-weight: 740; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
  .segmented__item.is-active { color: white; background: var(--surface-3); box-shadow: var(--shadow-sm); }
  .segmented--compact .segmented__item { min-height: 34px; padding-inline: 13px; font-size: .76rem; }

  .empty-state { display: flex; min-height: 270px; flex-direction: column; align-items: center; justify-content: center; padding: 34px; text-align: center; }
  .empty-state > svg { margin-bottom: 18px; color: var(--violet-light); }
  .empty-state h1, .empty-state h2 { max-width: 460px; font-size: clamp(1.3rem, 4vw, 1.8rem); letter-spacing: -.03em; }
  .empty-state p { max-width: 500px; margin: 9px auto 20px; color: var(--muted); }
  .empty-state--page { min-height: calc(100dvh - 130px); }
  .empty-inline { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
  .empty-inline svg { margin-bottom: 12px; color: var(--faint); }
  .empty-inline p { margin-top: 5px; color: var(--muted); }
  .inline-error { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border: 1px solid rgb(251 113 133 / .25); border-radius: 10px; color: #fecdd3; background: rgb(251 113 133 / .08); font-size: .8rem; }
  .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .error-page p { margin: 9px 0 22px; color: var(--muted); }
  .error-orb { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 18px; border: 1px solid rgb(139 92 246 / .3); border-radius: 20px; color: var(--violet-light); background: var(--gradient-soft); font-weight: 850; }
  .boot-screen { display: grid; min-height: 100dvh; place-content: center; justify-items: center; gap: 22px; }
  .boot-brand__logo { width: clamp(132px, 24vw, 168px); height: auto; filter: drop-shadow(0 16px 36px rgb(0 0 0 / .35)); }
  .route-loader { display: grid; min-height: 100dvh; place-items: center; }
  .spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid rgb(255 255 255 / .14); border-top-color: var(--violet-light); border-radius: 50%; animation: spin .8s linear infinite; }

  .skeleton { overflow: hidden; color: transparent !important; background: #1c1c24 !important; }
  .skeleton::after { display: block; width: 100%; height: 100%; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .055) 45%, transparent 70%); animation: shimmer 1.5s infinite; content: ""; }
  .skeleton-line { display: block; width: 70%; height: 13px; border-radius: 99px; }

  .toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 110; display: grid; width: min(380px, calc(100vw - 32px)); gap: 9px; pointer-events: none; }
  .toast { display: flex; align-items: center; gap: 11px; padding: 13px 10px 13px 15px; border: 1px solid var(--line-strong); border-radius: 14px; opacity: 0; background: rgb(25 25 33 / .96); box-shadow: var(--shadow); backdrop-filter: blur(18px); pointer-events: auto; transform: translateY(12px) scale(.98); transition: opacity .2s, transform .25s var(--ease); }
  .toast.is-visible { opacity: 1; transform: none; }
  .toast__dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--violet-light); box-shadow: 0 0 12px currentColor; }
  .toast--success .toast__dot { color: var(--success); background: var(--success); }
  .toast--error .toast__dot { color: var(--danger); background: var(--danger); }
  .toast p { flex: 1; color: var(--text-soft); font-size: .82rem; }
  .toast > button:not(.toast__close) { color: var(--violet-light); background: none; font-weight: 750; cursor: pointer; }
  .toast__close { width: 32px; height: 32px; }

  .overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .22s; }
  .overlay.is-visible { opacity: 1; }
  .overlay__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .68); backdrop-filter: blur(9px); }
  .overlay__panel { position: relative; width: min(540px, 100%); max-height: calc(100dvh - 36px); overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); transform: translateY(16px) scale(.985); transition: transform .28s var(--ease); }
  .overlay.is-visible .overlay__panel { transform: none; }
  .overlay__close { position: absolute; top: 13px; right: 13px; z-index: 4; background: rgb(0 0 0 / .28); }
  .overlay--sheet { place-items: end center; padding-bottom: 0; }
  .overlay__panel--sheet { width: min(660px, 100%); max-height: min(82dvh, 820px); border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .overlay--fullscreen { padding: 0; }
  .overlay__panel--fullscreen { width: 100%; height: 100%; max-height: none; overflow: hidden; border: 0; border-radius: 0; background: #050507; }
  .is-modal-open { overflow: hidden; }
  .confirm-dialog { padding: 34px; text-align: center; }
  .confirm-dialog__icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 16px; border-radius: 16px; color: var(--violet-light); background: var(--gradient-soft); }
  .confirm-dialog__icon.is-danger { color: var(--danger); background: rgb(251 113 133 / .1); }
  .confirm-dialog p { margin: 8px 0 25px; color: var(--muted); }
  .confirm-dialog__actions { display: flex; justify-content: center; gap: 10px; }

  .image-cropper-modal { width: min(720px, 100%); overflow: auto; }
  .image-cropper { padding: clamp(22px, 4vw, 34px); }
  .image-cropper__heading { display: flex; align-items: flex-start; gap: 13px; padding-right: 42px; }
  .image-cropper__heading-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: var(--violet-light); background: var(--gradient-soft); }
  .image-cropper__heading h2 { margin-top: 2px; font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: -.03em; }
  .image-cropper__heading p { margin-top: 4px; color: var(--muted); font-size: .82rem; }
  .image-cropper__output-size { display: inline-flex; min-height: 25px; align-items: center; margin-top: 9px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: rgb(255 255 255 / .04); font-size: .67rem; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: .025em; }
  .image-cropper__workspace { display: grid; place-items: center; margin-top: 22px; }
  .image-cropper__stage { position: relative; width: min(100%, 560px); overflow: hidden; border: 0; background-color: #0b0b0f; background-image: linear-gradient(45deg, rgb(255 255 255 / .035) 25%, transparent 25%), linear-gradient(-45deg, rgb(255 255 255 / .035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(255 255 255 / .035) 75%), linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / .035) 75%); background-position: 0 0, 0 9px, 9px -9px, -9px 0; background-size: 18px 18px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 18px 50px rgb(0 0 0 / .3); cursor: grab; touch-action: none; user-select: none; }
  .image-cropper__stage.is-dragging { cursor: grabbing; }
  .image-cropper__stage--circle { width: min(88vw, 390px); aspect-ratio: 1; border-radius: 50%; }
  .image-cropper__stage--cover { aspect-ratio: 8 / 3; border-radius: 16px; }
  .image-cropper__stage > img { position: absolute; max-width: none; object-fit: fill; pointer-events: none; transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
  .image-cropper__guide { position: absolute; inset: 0; z-index: 1; border: 2px solid rgb(255 255 255 / .72); border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .28); pointer-events: none; }
  .image-cropper__stage--cover .image-cropper__guide { background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgb(255 255 255 / .28) calc(33.333% - .5px), rgb(255 255 255 / .28) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgb(255 255 255 / .28) calc(66.666% - .5px), rgb(255 255 255 / .28) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
  .image-cropper__stage--cover .image-cropper__guide::after { position: absolute; background: rgb(255 255 255 / .28); content: ""; }
  .image-cropper__stage--cover .image-cropper__guide::after { top: 50%; right: 0; left: 0; height: 1px; }
  .image-cropper__help { max-width: 560px; margin: 12px auto 0; color: var(--faint); font-size: .71rem; text-align: center; }
  .image-cropper__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 14px; max-width: 560px; margin: 18px auto 0; }
  .image-cropper__control-heading { display: flex; grid-column: 1; align-items: center; justify-content: space-between; color: var(--text-soft); font-size: .76rem; font-weight: 720; }
  .image-cropper__zoom-value { color: var(--violet-light); font-variant-numeric: tabular-nums; }
  .image-cropper__zoom { display: grid; grid-column: 1; grid-template-columns: 38px minmax(120px, 1fr) 38px; align-items: center; gap: 10px; }
  .image-cropper__zoom-button { width: 38px; height: 38px; border-color: var(--line); background: var(--surface-2); font-size: 1.25rem; }
  .image-cropper__range { width: 100%; height: 5px; border-radius: 999px; outline: 0; appearance: none; background: linear-gradient(90deg, var(--violet), var(--pink)); cursor: pointer; }
  .image-cropper__range::-webkit-slider-thumb { width: 20px; height: 20px; border: 3px solid white; border-radius: 50%; appearance: none; background: var(--violet); box-shadow: 0 3px 12px rgb(0 0 0 / .45); }
  .image-cropper__range::-moz-range-thumb { width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--violet); box-shadow: 0 3px 12px rgb(0 0 0 / .45); }
  .image-cropper__range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
  .image-cropper__reset { grid-row: 1 / span 2; grid-column: 2; align-self: end; }
  .image-cropper__feedback { max-width: 560px; margin: 14px auto 0; color: #fecdd3; font-size: .78rem; text-align: center; }
  .image-cropper__actions { display: flex; justify-content: flex-end; gap: 10px; max-width: 560px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }

  .auth-modal {
    width: min(510px, 100%); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
    background: radial-gradient(circle at 20% 0%, rgb(139 92 246 / .15), transparent 38%), var(--surface);
    -webkit-overflow-scrolling: touch;
  }
  .auth-panel { padding: 38px; }
  .auth-panel__brand { display: flex; align-items: center; margin-bottom: 28px; }
  .auth-panel__logo { width: 112px; height: auto; }
  .auth-panel__intro h1 { margin-top: 5px; font-size: clamp(1.65rem, 5vw, 2.25rem); letter-spacing: -.05em; line-height: 1.08; }
  .auth-panel__intro p { margin-top: 10px; color: var(--muted); }
  .auth-form { display: grid; gap: 14px; margin-top: 24px; }
  .auth-panel__switch { margin-top: 19px; color: var(--muted); text-align: center; font-size: .82rem; }

  .auth-methods { display: grid; gap: 13px; margin-top: 26px; }
  .auth-methods__list, .auth-methods__social { display: grid; gap: 9px; }
  .auth-method {
    position: relative; display: grid; min-height: 52px; width: 100%; grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 14px;
    color: var(--text); background: rgb(255 255 255 / .045); font: inherit; font-size: .79rem; font-weight: 760;
    text-align: center; cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
  }
  .auth-method::after { width: 18px; height: 18px; justify-self: center; opacity: .55; content: "›"; font-size: 1.2rem; line-height: 1; }
  .auth-method:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .075); transform: translateY(-1px); }
  .auth-method:active { transform: translateY(0); }
  .auth-method[aria-busy="true"], .auth-method:disabled { cursor: wait; opacity: .58; transform: none; }
  .auth-provider-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: white; background: #282832; font-size: .95rem; font-weight: 850; }
  .auth-provider-mark > img { display: block; width: 22px; height: 22px; object-fit: contain; }
  .auth-provider-mark--credentials { background: linear-gradient(135deg, #4285f4, #34a853); }
  .auth-provider-mark--apple { color: #08080b; background: white; }
  .auth-provider-mark--google { color: #4285f4; background: white; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
  .auth-provider-mark--facebook { background: #1877f2; font-family: Arial, sans-serif; font-size: 1.25rem; }
  .auth-provider-mark--saved, .auth-provider-mark--password { background: linear-gradient(135deg, #4285f4, #ea4335 52%, #fbbc05); }
  .auth-methods__divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--faint); }
  .auth-methods__divider[hidden] { display: none; }
  .auth-methods__divider span { height: 1px; background: var(--line); }
  .auth-methods__divider small { font-size: .66rem; text-transform: lowercase; }
  .auth-methods__status { min-height: 1em; color: var(--faint); font-size: .66rem; line-height: 1.45; text-align: center; }
  .auth-methods__status:empty { min-height: 0; }
  .auth-methods__status .inline-error { text-align: left; }
  .auth-methods__saved { padding-top: 1px; }
  .auth-methods__back { justify-self: start; margin-top: 12px; }
  .auth-methods__chooser-heading { display: grid; min-height: 42px; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; text-align: center; }
  .auth-methods__chooser-heading .icon-button { font-size: 1.5rem; }
  .saved-account-list { display: grid; max-height: min(46dvh, 380px); overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .025); }
  .saved-account { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; border-bottom: 1px solid var(--line); }
  .saved-account:last-child { border-bottom: 0; }
  .saved-account__select { display: grid; min-width: 0; min-height: 67px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 4px 8px 11px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
  .saved-account__select:hover { background: rgb(255 255 255 / .045); }
  .saved-account__copy { display: grid; min-width: 0; gap: 2px; }
  .saved-account__copy strong, .saved-account__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .saved-account__copy strong { font-size: .76rem; }
  .saved-account__copy small { color: var(--muted); font-size: .64rem; }
  .saved-account__select .auth-provider-mark { width: 24px; height: 24px; border-radius: 8px; font-size: .7rem; }
  .saved-account__forget { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--muted); background: transparent; font-size: 1.1rem; cursor: pointer; }
  .saved-account__forget:hover { color: white; background: rgb(255 255 255 / .07); }
  .registration-card--methods { justify-content: center; }
  .registration-card--social { justify-content: flex-start; }
  .social-registration-form .registration-summary { margin-bottom: 1px; }

  .preview-watermark {
    position: fixed; right: 18px; bottom: 18px; z-index: 85; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid rgb(167 139 250 / .24); border-radius: 11px; color: rgb(244 241 255 / .82);
    background: rgb(13 13 19 / .72); box-shadow: 0 9px 28px rgb(0 0 0 / .24); backdrop-filter: blur(13px);
    pointer-events: none; user-select: none;
  }
  .preview-watermark__logo { width: 48px; height: auto; opacity: .88; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .38)); }
  .preview-watermark > span:last-child { display: grid; line-height: 1.05; }
  .preview-watermark strong { font-size: .58rem; font-weight: 850; letter-spacing: .12em; }
  .preview-watermark small { margin-top: 3px; color: var(--violet-light); font-size: .49rem; font-weight: 800; letter-spacing: .16em; }

  .popover-menu, .post-menu { position: absolute; z-index: 12; display: grid; min-width: 205px; overflow: hidden; padding: 6px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgb(25 25 33 / .98); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
  .popover-menu button, .post-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px; color: var(--text-soft); background: transparent; font-size: .79rem; text-align: left; cursor: pointer; }
  .popover-menu button:hover, .post-menu button:hover { color: white; background: rgb(255 255 255 / .07); }
}

@layer pages {
  /* Standalone login */
  .login-page {
    position: relative; isolation: isolate; display: grid; min-height: 100dvh; overflow: hidden; place-items: center;
    padding: clamp(18px, 4vw, 54px); background: radial-gradient(circle at 72% 12%, rgb(139 92 246 / .12), transparent 34%), #09090d;
  }
  .login-page__aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .login-page__aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(20px); opacity: .65; }
  .login-page__aurora i:nth-child(1) { top: -18%; left: -9%; width: 42vw; min-width: 360px; aspect-ratio: 1; background: rgb(56 189 248 / .07); }
  .login-page__aurora i:nth-child(2) { right: -10%; bottom: -24%; width: 48vw; min-width: 420px; aspect-ratio: 1; background: rgb(236 72 153 / .08); }
  .login-page__aurora i:nth-child(3) { top: 25%; left: 43%; width: 30vw; min-width: 280px; aspect-ratio: 1; background: rgb(139 92 246 / .07); }
  .login-layout {
    position: relative; display: grid; width: min(1040px, 100%); min-height: min(680px, calc(100dvh - 72px)); overflow: hidden;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); border: 1px solid var(--line-strong); border-radius: 30px;
    background: rgb(16 16 23 / .86); box-shadow: 0 34px 110px rgb(0 0 0 / .52); backdrop-filter: blur(22px);
  }
  .login-story {
    position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; overflow: hidden;
    padding: clamp(38px, 5vw, 68px); border-right: 1px solid var(--line); background:
      linear-gradient(180deg, transparent 18%, rgb(9 9 13 / .9) 90%),
      radial-gradient(circle at 72% 22%, rgb(236 72 153 / .26), transparent 28%),
      radial-gradient(circle at 20% 14%, rgb(56 189 248 / .16), transparent 31%),
      linear-gradient(145deg, #181529, #120f1c 58%, #0b0b10);
  }
  .login-story::before {
    position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 74%); content: "";
  }
  .login-story::after {
    position: absolute; top: 17%; left: 50%; width: 210px; height: 290px; border: 1px solid rgb(255 255 255 / .13); border-radius: 110px;
    background: linear-gradient(160deg, rgb(255 255 255 / .075), transparent 55%); box-shadow: inset 0 0 60px rgb(139 92 246 / .09), 0 30px 80px rgb(0 0 0 / .22);
    transform: translateX(-50%) rotate(12deg); content: "";
  }
  .login-brand { position: absolute; top: clamp(28px, 4vw, 46px); left: clamp(30px, 5vw, 58px); z-index: 2; display: inline-flex; align-items: center; }
  .login-brand__logo { width: clamp(120px, 12vw, 152px); height: auto; filter: drop-shadow(0 10px 26px rgb(0 0 0 / .28)); }
  .login-story__badge { position: relative; z-index: 2; display: inline-flex; width: max-content; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 11px; border: 1px solid rgb(167 139 250 / .23); border-radius: 99px; color: #ded3ff; background: rgb(139 92 246 / .09); font-size: .64rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
  .login-story__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); }
  .login-story__kicker { position: relative; z-index: 2; color: var(--violet-light); font-size: .65rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
  .login-story h2 { position: relative; z-index: 2; max-width: 480px; margin-top: 9px; font-size: clamp(2.25rem, 4.5vw, 4.2rem); font-weight: 830; letter-spacing: -.065em; line-height: .98; }
  .login-story > p:not(.login-story__kicker) { position: relative; z-index: 2; max-width: 440px; margin-top: 19px; color: var(--text-soft); font-size: .9rem; }
  .login-story__signal { position: relative; z-index: 2; display: flex; align-items: end; gap: 4px; margin-top: 30px; }
  .login-story__signal > span { width: 4px; border-radius: 4px; background: var(--gradient); }
  .login-story__signal > span:nth-child(1) { height: 12px; }
  .login-story__signal > span:nth-child(2) { height: 20px; }
  .login-story__signal > span:nth-child(3) { height: 8px; }
  .login-story__signal small { margin-left: 7px; color: var(--faint); font-size: .58rem; font-weight: 750; letter-spacing: .12em; }
  .login-card { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 76px); background: radial-gradient(circle at 100% 0%, rgb(139 92 246 / .1), transparent 30%); }
  .login-card__mobile-brand { display: none; }
  .login-card h1 { max-width: 420px; margin-top: 7px; font-size: clamp(2rem, 3.5vw, 3.15rem); letter-spacing: -.055em; line-height: 1.03; }
  .login-card__intro { max-width: 410px; margin-top: 13px; color: var(--muted); font-size: .88rem; }
  .login-form { display: grid; gap: 15px; margin-top: 30px; }
  .login-form__errors:empty { display: none; }
  .login-form .field > span:first-child { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
  .login-form .field input { min-height: 50px; border-radius: 13px; background: rgb(27 27 36 / .88); }
  .login-password input { padding-right: 48px; }
  .login-password-toggle { position: absolute; top: 50%; right: 6px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
  .login-password-toggle:hover, .login-password-toggle[aria-pressed="true"] { color: white; background: rgb(255 255 255 / .06); }
  .login-form .button { margin-top: 4px; }
  .login-card__security { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: var(--faint); font-size: .66rem; }
  .login-card__security svg { color: var(--success); }

  /* Standalone social registration */
  .registration-page { overflow-x: hidden; overflow-y: auto; }
  .registration-layout { min-height: min(740px, calc(100dvh - 72px)); }
  .registration-card { max-height: calc(100dvh - 72px); justify-content: flex-start; overflow-x: hidden; overflow-y: auto; padding-block: clamp(30px, 5vh, 54px); scrollbar-width: thin; }
  .registration-card .login-card__language { margin-bottom: 12px; }
  .registration-form { gap: 18px; margin-top: 22px; }
  .registration-progress { display: grid; gap: 7px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .registration-progress > span { height: 4px; border-radius: 99px; background: rgb(255 255 255 / .1); transition: background .2s, box-shadow .2s; }
  .registration-progress > span.is-active { background: var(--gradient); box-shadow: 0 4px 16px rgb(139 92 246 / .22); }
  .registration-step { display: grid; gap: 14px; animation: registration-step-in .2s var(--ease) both; }
  .registration-step[hidden] { display: none !important; }
  .registration-step h2 { margin: 1px 0 -8px; font-size: 1rem; letter-spacing: -.025em; }
  .registration-step > p:not(.auth-form__age-note) { margin-bottom: 2px; color: var(--muted); font-size: .73rem; line-height: 1.45; }
  .registration-step .field > span:first-child { font-size: .7rem; text-transform: uppercase; letter-spacing: .075em; }
  .registration-actions { display: flex; gap: 10px; }
  .registration-actions > .button { min-height: 48px; }
  .registration-actions__back { flex: 0 0 auto; }
  .registration-actions__next { flex: 1 1 auto; }
  .registration-signin { margin-top: 17px; color: var(--muted); text-align: center; font-size: .78rem; }
  .registration-signin a { color: var(--violet-light); font-weight: 760; }
  .registration-signin a:hover { color: white; }
  .login-card__register { margin-top: 16px; }
  .registration-loading { display: grid; min-height: 100dvh; place-items: center; }
  .registration-fatal { display: grid; width: min(calc(100% - 32px), 460px); min-height: 100dvh; align-content: center; justify-items: center; gap: 14px; margin-inline: auto; padding-block: 50px; text-align: center; }
  .registration-fatal > svg { color: var(--violet-light); }
  .registration-fatal p { max-width: 390px; color: var(--text-soft); line-height: 1.55; }
  .registration-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 15px; background: rgb(255 255 255 / .045); }
  .registration-method { min-height: 40px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font: inherit; font-size: .72rem; font-weight: 760; cursor: pointer; }
  .registration-method.is-active { color: white; background: rgb(139 92 246 / .28); box-shadow: inset 0 0 0 1px rgb(196 181 253 / .2); }
  .registration-summary { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgb(216 180 254 / .18); border-radius: 17px; background: rgb(124 58 237 / .1); }
  .registration-summary__icon { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #d8b4fe; background: rgb(255 255 255 / .07); }
  .registration-summary > span:last-child { display: grid; min-width: 0; gap: 3px; }
  .registration-summary strong { font-size: .76rem; }
  .registration-summary small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
  .registration-status { min-height: 1em; color: var(--muted); font-size: .65rem; }
  .registration-age-blocked { display: grid; justify-items: center; gap: 10px; margin-top: 22px; padding: 24px 18px; border: 1px solid rgb(251 113 133 / .22); border-radius: 19px; background: rgb(127 29 29 / .09); text-align: center; }
  .registration-age-blocked__icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; color: #fda4af; background: rgb(251 113 133 / .1); }
  .registration-age-blocked strong { font-size: .88rem; }
  .registration-age-blocked p { max-width: 360px; color: var(--text-soft); font-size: .72rem; line-height: 1.55; }
  .registration-resend { justify-self: center; min-height: 40px; }
  .registration-availability { min-height: 1.1em; margin-top: -8px; color: var(--muted); font-size: .64rem; }
  .registration-availability.is-available { color: #86efac; }
  .registration-availability.is-taken { color: #fda4af; }
  .registration-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
  .registration-suggestions:empty { display: none; }
  .registration-suggestion { min-height: 32px; padding: 5px 10px; border: 1px solid rgb(196 181 253 / .22); border-radius: 999px; color: #ddd6fe; background: rgb(124 58 237 / .1); font: inherit; font-size: .61rem; cursor: pointer; }
  .auth-form__age-note.is-error { color: #fda4af; }

  /* Registration date of birth: custom HTML/CSS calendar, never the native
     browser date sheet. The named text input remains only as form state. */
  .date-picker { position: relative; }
  .date-picker__native {
    display: none !important; position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; opacity: 0;
    pointer-events: none; clip-path: inset(50%);
  }
  .date-picker__label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .date-picker__trigger {
    display: grid; width: 100%; min-height: 52px; grid-template-columns: minmax(0, 1fr) 34px; align-items: center;
    gap: 10px; padding: 9px 9px 9px 14px; border: 1px solid var(--line-strong); border-radius: 13px;
    color: var(--text); background: rgb(27 27 36 / .9); box-shadow: inset 0 1px rgb(255 255 255 / .025);
    font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .date-picker__trigger:hover { border-color: rgb(255 255 255 / .2); background: rgb(31 31 41 / .96); }
  .date-picker__trigger:focus-visible, .date-picker:focus-within .date-picker__trigger {
    border-color: rgb(66 133 244 / .7); outline: none; box-shadow: 0 0 0 3px rgb(66 133 244 / .16);
  }
  .date-picker.is-invalid .date-picker__trigger { border-color: rgb(251 113 133 / .62); box-shadow: 0 0 0 3px rgb(251 113 133 / .1); }
  .date-picker__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .date-picker__value.is-placeholder { color: var(--faint); }
  .date-picker__calendar-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #8ab4f8; background: rgb(66 133 244 / .1); font-size: 1rem; }
  .date-picker__tooltip {
    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 230; width: max-content; max-width: min(330px, calc(100vw - 36px));
    padding: 9px 11px; border: 1px solid rgb(251 113 133 / .28); border-radius: 10px; color: #fecdd3;
    background: rgb(56 19 28 / .98); box-shadow: 0 12px 36px rgb(0 0 0 / .42); font-size: .68rem; line-height: 1.4;
  }
  .date-picker__tooltip[hidden] { display: none !important; }
  .date-picker__tooltip::after { position: absolute; right: 20px; bottom: -5px; width: 9px; height: 9px; border-right: 1px solid rgb(251 113 133 / .28); border-bottom: 1px solid rgb(251 113 133 / .28); background: rgb(56 19 28 / .98); content: ""; transform: rotate(45deg); }
  .date-picker__dialog {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 220; width: min(420px, calc(100vw - 28px));
    padding: 9px; border: 1px solid rgb(255 255 255 / .14); border-radius: 19px; color: var(--text);
    background: rgb(21 22 29 / .99); box-shadow: 0 28px 80px rgb(0 0 0 / .62), inset 0 1px rgb(255 255 255 / .06);
    backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%);
  }
  .date-picker__dialog[hidden] { display: none !important; }
  .date-picker__surface { display: grid; gap: 10px; }
  .date-picker__header, .date-picker__picker-heading { display: grid; min-height: 42px; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 7px; }
  .date-picker__nav, .date-picker__back {
    display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--text-soft);
    background: rgb(255 255 255 / .045); font: inherit; font-size: 1.45rem; cursor: pointer;
  }
  .date-picker__nav:hover, .date-picker__back:hover { color: white; background: rgb(255 255 255 / .09); }
  .date-picker__heading { min-width: 0; min-height: 42px; padding-inline: 8px; border-radius: 11px; color: white; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; text-transform: capitalize; cursor: pointer; }
  .date-picker__heading:hover { background: rgb(255 255 255 / .055); }
  .date-picker__picker-heading { grid-template-columns: 42px minmax(0, 1fr); }
  .date-picker__picker-heading strong { padding-inline: 4px; font-size: .8rem; }
  .date-picker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .date-picker__weekday { display: grid; min-height: 28px; place-items: center; color: var(--faint); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
  .date-picker__day {
    display: grid; min-width: 0; min-height: 39px; aspect-ratio: 1; place-items: center; border: 1px solid transparent;
    border-radius: 11px; color: var(--text-soft); background: transparent; font: inherit; font-size: .69rem; cursor: pointer;
  }
  .date-picker__day:hover:not(:disabled), .date-picker__day:focus-visible { border-color: rgb(255 255 255 / .12); color: white; background: rgb(255 255 255 / .075); outline: none; }
  .date-picker__day.is-outside { opacity: .3; }
  .date-picker__day.is-selected { border-color: rgb(66 133 244 / .62); color: white; background: #2f6edb; box-shadow: 0 7px 20px rgb(47 110 219 / .3); font-weight: 850; }
  .date-picker__day:disabled { opacity: .16; cursor: not-allowed; }
  .date-picker__footer { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 3px; }
  .date-picker__year-search {
    width: 100%; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 11px;
    color: var(--text); background: rgb(255 255 255 / .055); font: inherit; font-size: .75rem;
  }
  .date-picker__year-search:focus { border-color: rgb(66 133 244 / .6); outline: 3px solid rgb(66 133 244 / .16); }
  .date-picker__year-list { display: grid; max-height: min(360px, 47dvh); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .date-picker__year, .date-picker__month { min-height: 42px; padding: 6px; border-radius: 10px; color: var(--text-soft); background: rgb(255 255 255 / .035); font: inherit; font-size: .69rem; cursor: pointer; }
  .date-picker__year:hover, .date-picker__year:focus-visible, .date-picker__month:hover, .date-picker__month:focus-visible { color: white; background: rgb(255 255 255 / .085); outline: none; }
  .date-picker__year.is-selected, .date-picker__month.is-selected { color: white; background: rgb(66 133 244 / .22); box-shadow: inset 0 0 0 1px rgb(138 180 248 / .34); font-weight: 800; }
  .date-picker__month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .date-picker__month { min-height: 50px; text-transform: capitalize; }

  /* Local-only password assessment: no password bytes ever leave the form
     until the user explicitly submits the completed registration. */
  .password-strength { display: grid; gap: 11px; margin-top: -7px; padding: 13px; border: 1px solid rgb(255 255 255 / .075); border-radius: 14px; background: rgb(255 255 255 / .025); }
  .password-strength__meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 11px; }
  .password-strength__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .password-strength__bar i { display: block; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .09); transition: background .2s, box-shadow .2s; }
  .password-strength__label { min-width: 72px; color: var(--muted); font-size: .64rem; text-align: right; }
  .password-strength__meter[data-strength="1"] .password-strength__bar i.is-active { background: #f43f5e; box-shadow: 0 4px 13px rgb(244 63 94 / .22); }
  .password-strength__meter[data-strength="2"] .password-strength__bar i.is-active { background: #f59e0b; box-shadow: 0 4px 13px rgb(245 158 11 / .2); }
  .password-strength__meter[data-strength="3"] .password-strength__bar i.is-active { background: #4285f4; box-shadow: 0 4px 13px rgb(66 133 244 / .22); }
  .password-strength__meter[data-strength="4"] .password-strength__bar i.is-active { background: #34a853; box-shadow: 0 4px 13px rgb(52 168 83 / .2); }
  .password-strength__meter[data-strength="1"] .password-strength__label { color: #fda4af; }
  .password-strength__meter[data-strength="2"] .password-strength__label { color: #fcd34d; }
  .password-strength__meter[data-strength="3"] .password-strength__label { color: #8ab4f8; }
  .password-strength__meter[data-strength="4"] .password-strength__label { color: #86efac; }
  .password-strength__rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; list-style: none; }
  .password-strength__rule { display: grid; min-width: 0; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 6px; color: var(--faint); font-size: .61rem; line-height: 1.35; }
  .password-strength__check { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; font-size: .56rem; }
  .password-strength__rule.is-valid { color: var(--text-soft); }
  .password-strength__rule.is-valid .password-strength__check { border-color: rgb(52 168 83 / .45); color: #86efac; background: rgb(52 168 83 / .1); }
  .password-strength__match { min-height: 1em; color: var(--muted); font-size: .62rem; }
  .password-strength__match:empty { display: none; }
  .password-strength__match.is-valid { color: #86efac; }
  .password-strength__match.is-error { color: #fda4af; }
  .auth-registration-handoff { justify-items: center; text-align: center; }
  .auth-registration-handoff__icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #d8b4fe; background: rgb(124 58 237 / .18); }
  .auth-registration-handoff p { color: var(--text-soft); font-size: .75rem; line-height: 1.55; }

  @keyframes registration-step-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }

  /* Profile share */
  .profile-share-page {
    --profile-share-background: radial-gradient(circle at 16% 14%, rgb(56 189 248 / .36), transparent 31%), radial-gradient(circle at 86% 80%, rgb(236 72 153 / .46), transparent 36%), linear-gradient(145deg, #25104b 0%, #6d28d9 46%, #db2777 100%);
    position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; background: var(--profile-share-background); color: white;
  }
  .profile-share-page::before {
    position: fixed; inset: 0; z-index: -1; background: linear-gradient(115deg, rgb(5 5 7 / .48), rgb(5 5 7 / .1) 45%, rgb(5 5 7 / .42));
    pointer-events: none; content: "";
  }
  .profile-share-toolbar {
    position: relative; z-index: 5; display: grid; min-height: 76px; align-items: center; gap: 16px;
    grid-template-columns: 48px 1fr auto; padding: max(14px, env(safe-area-inset-top)) clamp(18px, 4vw, 48px) 12px;
  }
  .profile-share-toolbar__button, .profile-share-toolbar__chip {
    display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / .2);
    color: white; background: rgb(8 8 13 / .32); box-shadow: 0 10px 34px rgb(0 0 0 / .18); backdrop-filter: blur(14px); cursor: pointer;
  }
  .profile-share-toolbar__button { width: 44px; border-radius: 50%; }
  .profile-share-toolbar__chip { gap: 8px; padding-inline: 15px; border-radius: 999px; font-size: .76rem; font-weight: 760; }
  .profile-share-toolbar__button:hover, .profile-share-toolbar__chip:hover { background: rgb(8 8 13 / .5); }
  .profile-share-toolbar__logo { width: 90px; height: auto; justify-self: center; filter: drop-shadow(0 8px 24px rgb(0 0 0 / .32)); }
  .profile-share-workspace {
    position: relative; z-index: 2; display: grid; width: min(1240px, 100%); min-height: calc(100dvh - 76px); margin-inline: auto;
    grid-template-columns: minmax(420px, 1fr) minmax(330px, 390px); gap: clamp(26px, 5vw, 72px); align-items: center;
    padding: 18px clamp(22px, 5vw, 68px) max(36px, env(safe-area-inset-bottom));
  }
  .profile-share-preview { display: grid; min-width: 0; place-items: center; }
  .profile-share-artboard {
    position: relative; isolation: isolate; width: min(390px, 100%); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgb(255 255 255 / .26);
    border-radius: 34px; background: var(--profile-share-background); box-shadow: 0 42px 110px rgb(0 0 0 / .46), inset 0 1px rgb(255 255 255 / .18);
  }
  .profile-share-artboard::before {
    position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 5 7 / .05), rgb(5 5 7 / .26)); content: "";
  }
  .profile-share-artboard__noise {
    position: absolute; inset: 0; z-index: -1; opacity: .24; background-image:
      linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 38px 38px; mask-image: linear-gradient(to bottom, black, transparent 70%);
  }
  .profile-share-artboard__brand { position: absolute; top: 4.2%; left: 50%; width: 78px; height: auto; transform: translateX(-50%); }
  .profile-share-artboard__footer {
    position: absolute; right: 0; bottom: 5.4%; left: 0; color: rgb(255 255 255 / .72); font-size: .56rem; font-weight: 760;
    letter-spacing: .16em; text-align: center; text-transform: uppercase;
  }
  .profile-share-card {
    position: absolute; top: 23%; right: 7.5%; bottom: 14%; left: 7.5%; display: flex; min-height: 0; flex-direction: column; align-items: center;
    padding: 48px 22px 20px; border-radius: 27px; color: #09090d; background: #fbfbfd; box-shadow: 0 22px 64px rgb(0 0 0 / .3);
  }
  .profile-share-card__avatar {
    position: absolute; top: -43px; left: 50%; width: 86px; height: 86px; border: 5px solid #fbfbfd; box-shadow: 0 12px 28px rgb(0 0 0 / .18);
    font-size: 1.15rem; transform: translateX(-50%);
  }
  .profile-share-card__identity { width: 100%; min-width: 0; text-align: center; }
  .profile-share-card__identity h2 { overflow: hidden; font-size: clamp(1.12rem, 4.4vw, 1.42rem); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
  .profile-share-card__identity p { margin-top: 1px; overflow: hidden; color: #5f5f6a; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-share-card__qr { display: grid; width: min(238px, 94%); max-height: min(238px, 55%); flex: 0 0 auto; margin-top: 12px; aspect-ratio: 1; place-items: center; }
  .profile-share-card__qr svg { width: 100%; height: 100%; }
  .profile-share-card__hint { margin-top: 7px; color: #5f5f6a; font-size: .62rem; font-weight: 680; text-align: center; }
  .profile-share-card__logo { width: 74px; height: auto; margin-top: auto; }
  .profile-share-controls {
    min-width: 0; padding: clamp(24px, 3vw, 34px); border: 1px solid rgb(255 255 255 / .14); border-radius: 28px;
    background: rgb(10 10 16 / .7); box-shadow: 0 30px 90px rgb(0 0 0 / .28); backdrop-filter: blur(26px);
  }
  .profile-share-controls__intro h1 { margin-top: 5px; font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.055em; line-height: 1.02; }
  .profile-share-controls__intro > p { margin-top: 10px; color: rgb(255 255 255 / .74); font-size: .84rem; }
  .profile-share-control-group { margin-top: 28px; padding-top: 23px; border-top: 1px solid rgb(255 255 255 / .11); }
  .profile-share-control-group h2 { font-size: .79rem; letter-spacing: .02em; }
  .profile-share-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .profile-share-remove-background { display: inline-flex; align-items: center; gap: 6px; color: #fda4af; font-size: .68rem; }
  .profile-share-presets { display: grid; margin-top: 12px; grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .profile-share-preset {
    position: relative; aspect-ratio: 1.25; overflow: hidden; border: 2px solid transparent; border-radius: 13px; color: white; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: transform .18s var(--ease), border-color .18s;
  }
  .profile-share-preset:hover { transform: translateY(-2px); }
  .profile-share-preset.is-active { border-color: white; box-shadow: 0 0 0 3px rgb(167 139 250 / .28); }
  .profile-share-preset span {
    position: absolute; right: 0; bottom: 0; left: 0; padding: 9px 4px 5px; background: linear-gradient(transparent, rgb(0 0 0 / .6));
    font-size: .6rem; font-weight: 750; text-align: center;
  }
  .profile-share-upload { width: 100%; margin-top: 11px; border-color: rgb(255 255 255 / .14); background: rgb(255 255 255 / .07); }
  .profile-share-upload-error { margin-top: 9px; color: #fecdd3; font-size: .73rem; }
  .profile-share-local-note { margin-top: 9px; color: rgb(255 255 255 / .64); font-size: .68rem; line-height: 1.45; }
  .profile-share-actions { display: grid; margin-top: 12px; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .profile-share-action {
    display: grid; min-width: 0; min-height: 88px; place-content: center; justify-items: center; gap: 7px; padding: 10px 6px; border: 1px solid rgb(255 255 255 / .13);
    border-radius: 16px; color: white; background: rgb(255 255 255 / .075); font-size: .7rem; font-weight: 720; cursor: pointer; transition: transform .18s, background .18s;
  }
  .profile-share-action:hover:not(:disabled) { background: rgb(255 255 255 / .13); transform: translateY(-2px); }
  .profile-share-action:disabled { opacity: .58; cursor: wait; }
  .profile-share-action__icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: rgb(255 255 255 / .1); }
  .profile-share-url { margin-top: 12px; overflow: hidden; color: rgb(255 255 255 / .64); font-size: .67rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

  /* Feed */
  .feed-page {
    display: grid; width: min(var(--feed-max-width), 100%); height: 100dvh; margin-inline: auto;
    grid-template-areas: "feed-viewport"; grid-template-rows: minmax(0, 1fr);
  }
  .feed-header { position: relative; z-index: 12; display: flex; height: var(--feed-header-row); min-height: var(--feed-header-row); align-items: center; justify-content: center; padding-inline: 14px; border-bottom: 1px solid var(--line); background: rgb(9 9 13 / .84); backdrop-filter: blur(18px); }
  .feed-title { margin: 0; font-size: 1rem; font-weight: 820; letter-spacing: -.01em; }
  .feed-title::after { display: block; width: 24px; height: 2px; margin: 5px auto 0; border-radius: 99px; background: var(--gradient); content: ""; }
  .feed-header__inbox { position: absolute; right: 13px; }
  .stories-slot {
    position: relative; top: auto; right: auto; left: auto; z-index: 27;
    height: var(--feed-stories-row); min-height: var(--feed-stories-row); min-width: 0;
    border-bottom: 1px solid var(--line); background: rgb(8 11 16 / .96); backdrop-filter: blur(18px);
  }
  html[dir="rtl"] .stories-slot { right: auto; left: auto; }
  .stories { width: min(var(--feed-max-width), 100%); height: 100%; margin-inline: auto; }
  .stories--skeleton { margin: 10px 15px; border-radius: 14px; }
  .stories__rail { position: relative; display: flex; height: 100%; align-items: center; gap: 13px; overflow-x: auto; padding: 9px 15px 8px; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .stories__rail::-webkit-scrollbar { display: none; }
  .story-avatar { display: grid; width: 67px; flex: 0 0 auto; justify-items: center; gap: 3px; padding: 0; color: var(--text-soft); background: none; cursor: pointer; touch-action: manipulation; }
  .story-avatar__ring {
    position: relative; display: grid; width: 62px; height: 62px; padding: 2px; place-items: center;
    border: 2px solid var(--line); border-radius: 18px; background: var(--surface-2);
    box-shadow: 0 9px 21px rgb(0 0 0 / .25), inset 0 1px rgb(255 255 255 / .06);
    transition: filter .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .story-avatar.is-unseen .story-avatar__ring {
    border-color: transparent;
    background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--brand-spectrum) border-box;
  }
  .story-avatar--create .story-avatar__ring { border-color: var(--line); background: var(--surface-2); }
  .story-avatar.is-seen .story-avatar__ring { border-color: #697382; background: #11151c; box-shadow: none; opacity: .78; }
  .story-avatar.is-seen .story-avatar__ring .avatar { filter: saturate(.58); }
  .story-avatar:focus-visible { outline: none; }
  .story-avatar:focus-visible .story-avatar__ring { outline: 3px solid #8ab4f8; outline-offset: 3px; }
  .story-avatar__ring .avatar { width: 54px; height: 54px; border-radius: 15px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), inset 0 -16px 25px rgb(0 0 0 / .1); }
  .story-avatar__label { width: 67px; overflow: hidden; color: var(--muted); font-size: .66rem; font-weight: 690; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .story-avatar--create { position: relative; }
  .story-avatar__plus { position: absolute; top: 42px; inset-inline-end: 3px; display: grid; width: 21px; height: 21px; place-items: center; border: 2px solid var(--bg); border-radius: 7px; color: white; background: var(--brand-blue); box-shadow: 0 5px 14px rgb(0 0 0 / .36); }
  .story-avatar--loading .story-avatar__ring { padding: 0; border: 0; background: var(--surface-2); box-shadow: none; }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .story-avatar:hover .story-avatar__ring { filter: brightness(1.07); transform: translateY(-2px) scale(1.015); }
  }
  .skeleton-label { width: 42px; height: 7px; border-radius: 99px; }
  .feed-viewport { min-height: 0; grid-area: feed-viewport; overflow-y: auto; outline: none; scrollbar-width: none; overscroll-behavior-y: contain; }
  .feed-viewport::-webkit-scrollbar { display: none; }
  .feed-scroll-content { min-width: 0; min-height: calc(100% - var(--feed-header-row) - var(--feed-stories-row)); padding: 12px clamp(10px, 1.4vw, 18px) 24px; }
  .feed-stack { display: flex; width: min(100%, 620px); min-height: 100%; flex-direction: column; gap: 22px; margin-inline: auto; }
  .feed-card { position: relative; width: min(100%, 510px); height: 100%; min-height: 0; flex: 0 0 100%; margin: 0 auto 8px; overflow: hidden; border-radius: 20px; background: #111116; scroll-snap-align: center; scroll-snap-stop: always; isolation: isolate; transition: opacity .25s, transform .25s; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) { width: 100%; height: clamp(560px, calc(100dvh - 190px), 820px); min-height: 560px; flex: 0 0 auto; margin: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; scroll-snap-align: none; scroll-snap-stop: normal; }
  .feed-stack > .feed-card:not(.feed-card--mosaic)::after { position: absolute; right: 8%; bottom: -12px; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); content: ""; pointer-events: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .feed-card__stage { border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .045); }
  .feed-card.is-dismissing { opacity: 0; transform: scale(.96); }
  .feed-card__stage { position: relative; width: 100%; height: 100%; min-height: inherit; overflow: hidden; background: #101015; }
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) {
    display: grid; grid-template-rows: auto minmax(220px, 1fr) auto auto;
    background: var(--bg); isolation: isolate;
  }
  .feed-stack > .feed-card.feed-card--home.feed-card--audio:not(.feed-card--mosaic) {
    height: auto; min-height: 0; aspect-ratio: auto; grid-template-rows: auto auto auto auto;
  }
  .feed-card--home .feed-card__home-header {
    position: relative; z-index: 8; display: flex; min-width: 0; min-height: 60px;
    align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px 7px 4px;
    color: var(--text); background: var(--bg);
  }
  .feed-card--home .feed-card__home-header-copy { display: grid; min-width: 0; flex: 1 1 auto; }
  .feed-card--home .feed-card__home-header .post-author { min-width: 0; margin: 0; }
  .feed-card--home .feed-card__home-header .post-author__avatar .avatar { outline: 1px solid var(--line-strong); outline-offset: 1px; box-shadow: none; }
  .feed-card--home .feed-card__home-header .post-author__identity a { color: var(--text); text-shadow: none; }
  .feed-card--home .feed-card__home-header .follow-pill {
    min-height: 36px; border-color: var(--line-strong); color: var(--text); background: var(--surface);
    box-shadow: none; backdrop-filter: none;
  }
  .feed-card--home .feed-card__home-header .post-repost-attribution {
    margin: 0 0 5px 42px; color: var(--muted); text-shadow: none;
  }
  .feed-card--home .feed-card__home-header .post-repost-attribution svg { filter: none; }
  .feed-card--home .feed-card__home-header .post-disclosure { width: fit-content; margin: 4px 0 0 42px; text-shadow: none; }
  .feed-card--home .feed-card__home-header > .post-action--more {
    min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; color: var(--text); text-shadow: none;
  }
  .feed-card--home .feed-card__home-header > .post-action--more .post-action__icon {
    width: 44px; height: 44px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none;
  }
  .feed-card--home .feed-card__home-header > .post-action--more .post-action__label { display: none; }
  .feed-card--home .feed-card__stage {
    height: auto; min-height: 220px; align-self: stretch; border-radius: 13px; background: #08080b;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .055); contain: paint;
  }
  .feed-card--home.feed-card--audio .feed-card__stage { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .feed-card--home .post-actions {
    position: static; right: auto; bottom: auto; z-index: 7; display: flex; width: 100%; min-height: 52px;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 5px; padding: 3px 0;
    color: var(--text); background: var(--bg); text-shadow: none;
  }
  .feed-card--home .post-actions__primary,
  .feed-card--home .post-actions__secondary { display: flex; min-width: 0; align-items: center; gap: 1px; }
  .feed-card--home .post-actions__secondary { flex: 0 0 auto; justify-content: flex-end; }
  .feed-card--home .post-action {
    min-width: 44px; min-height: 44px; gap: 0; padding: 2px; color: var(--text); text-shadow: none;
  }
  .feed-card--home .post-action__icon {
    width: 32px; height: 30px; border: 0; color: inherit; background: transparent; box-shadow: none; backdrop-filter: none;
  }
  .feed-card--home .post-action__icon svg { filter: none !important; }
  .feed-card--home .post-action:hover .post-action__icon { background: rgb(255 255 255 / .07); transform: none; }
  .feed-card--home .post-action.is-active .post-action__icon { color: var(--violet-light); background: transparent; }
  .feed-card--home .post-action--heart.is-active .post-action__icon { color: #fff; background: transparent; }
  .feed-card--home .post-action--repost.is-active .post-action__icon { color: #5eead4; background: transparent; box-shadow: none; }
  .feed-card--home .post-action__label { max-width: 46px; color: var(--muted); font-size: .58rem; font-weight: 680; text-shadow: none; }
  .feed-card--home .post-action--bookmark .post-action__label,
  .feed-card--home .post-action--mute .post-action__label { display: none; }
  .feed-card--home .post-action--mute { position: static; right: auto; bottom: auto; }
  .feed-card--home .feed-card__info {
    position: static; z-index: 5; display: grid; max-height: 112px; gap: 5px; padding: 0 4px 10px;
    overflow: hidden; color: var(--text-soft); background: var(--bg); text-shadow: none;
  }
  .feed-card--home .post-caption--home { display: block; max-width: none; max-height: 2.85em; overflow: hidden; line-height: 1.42; }
  .feed-card--home .post-caption--home a { margin-inline-end: 7px; color: var(--text); font-weight: 820; }
  .feed-card--home .post-caption--home a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .post-caption .post-caption__hashtag,
  .feed-card--home .post-caption--home .post-caption__hashtag { margin-inline-end: 0; color: #c4b5fd; font-weight: 760; unicode-bidi: isolate; }
  .post-caption .post-caption__hashtag:hover,
  .feed-card--home .post-caption--home .post-caption__hashtag:hover { color: #ddd6fe; text-decoration: underline; text-underline-offset: 2px; }
  .feed-card--home .feed-card__home-time { color: var(--faint); font-size: .61rem; line-height: 1.3; }
  .feed-card--home .post-audio { color: var(--muted); }
  .feed-card--home .post-location { color: var(--muted); text-shadow: none; }
  .feed-card--home .post-music__license { color: var(--muted); border-color: var(--line); text-shadow: none; }
  .feed-card--home .post-menu { top: calc(100% - 3px); right: 0; bottom: auto; }
  .content-watermark {
    position: absolute; z-index: 3; display: block; width: clamp(72px, 19%, 112px); height: auto;
    opacity: var(--content-watermark-opacity, .16); filter: drop-shadow(0 2px 7px rgb(0 0 0 / .34));
    pointer-events: none !important; user-select: none; -webkit-user-drag: none; contain: layout paint;
  }
  .content-watermark[hidden] { display: none; }
  .content-watermark img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .content-watermark--short { width: clamp(30px, 8%, 46px); }
  .content-watermark--top-left { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  .content-watermark--top-right { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .content-watermark--bottom-left { bottom: max(17px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); }
  .content-watermark--bottom-right { right: max(16px, env(safe-area-inset-right)); bottom: max(17px, env(safe-area-inset-bottom)); }
  .feed-card--mosaic { width: 100%; height: auto; min-height: 0; margin: 0; border: 1px solid rgb(255 255 255 / .075); border-radius: 15px; box-shadow: 0 14px 34px rgb(0 0 0 / .17); scroll-snap-align: none; scroll-snap-stop: normal; }
  .feed-card--mosaic.is-active { border-color: rgb(255 255 255 / .075); box-shadow: 0 16px 42px rgb(0 0 0 / .24); }
  .feed-card--mosaic .feed-card__stage { height: auto; min-height: 0; }
  .feed-card--mosaic .feed-card__info { right: 53px; bottom: 10px; left: 10px; }
  .feed-card--mosaic .post-author { gap: 7px; margin-bottom: 6px; }
  .feed-card--mosaic .post-author__avatar .avatar { width: 30px; height: 30px; }
  .feed-card--mosaic .post-author__identity a { font-size: .72rem; }
  .feed-card--mosaic .post-author__identity time { font-size: .58rem; }
  .feed-card--mosaic .follow-pill { display: none; }
  .feed-card--mosaic .post-caption { font-size: .7rem; line-height: 1.3; -webkit-line-clamp: 2; }
  .feed-card--mosaic .post-audio, .feed-card--mosaic .post-music { display: none; }
  .feed-card--mosaic .post-actions { right: 5px; bottom: 6px; gap: 1px; }
  .feed-card--mosaic .post-action { min-width: 44px; min-height: 44px; gap: 0; padding: 3px; }
  .feed-card--mosaic .post-action__icon { width: 37px; height: 37px; }
  .feed-card--mosaic .post-action__label { display: none; }
  .feed-card--mosaic .post-action--mute { position: static; }
  .feed-card--mosaic .post-action--share, .feed-card--mosaic .post-action--repost, .feed-card--mosaic .post-action--more { display: none; }
  .feed-card--mosaic .carousel__dots { top: 14px; bottom: auto; }
  .feed-card--mosaic .carousel__counter { top: 9px; right: 9px; }
  .carousel { position: absolute; inset: 0; overflow: hidden; direction: ltr; user-select: none; -webkit-user-select: none; }
  .carousel__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel.is-multiple .carousel__track { cursor: grab; }
  .carousel.is-multiple .carousel__track:active { cursor: grabbing; }
  .carousel__slide { width: 100%; height: 100%; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .carousel img, .carousel video { width: 100%; height: 100%; object-fit: cover; }
  .carousel img { pointer-events: none; -webkit-user-drag: none; }
  .mix-animated-image { transform-origin: 50% 50%; backface-visibility: hidden; }
  .mix-image-animation--fade.is-animation-running { animation: mixImageFade .72s var(--ease) both; }
  .mix-image-animation--slide-up.is-animation-running { animation: mixImageSlideUp .82s var(--ease) both; }
  .mix-image-animation--zoom-in.is-animation-running { animation: mixImageZoomIn 3.4s cubic-bezier(.2, .72, .25, 1) both; }
  .mix-image-animation--zoom-loop.is-animation-running { animation: mixImageZoomLoop 7s ease-in-out infinite alternate; }
  .mix-image-animation--pan-loop.is-animation-running { animation: mixImagePanLoop 9s ease-in-out infinite alternate; }
  .carousel:focus-visible { outline: 3px solid var(--violet-light); outline-offset: -3px; }
  .carousel__dots { position: absolute; bottom: 14px; left: 50%; z-index: 6; display: flex; gap: 5px; transform: translateX(-50%); }
  .carousel__dots span { width: 5px; height: 5px; border-radius: 99px; background: rgb(255 255 255 / .45); transition: width .2s, background .2s; }
  .carousel__dots span.is-active { width: 15px; background: white; }
  .carousel__counter { position: absolute; top: 13px; right: 13px; z-index: 6; padding: 4px 8px; border-radius: 99px; color: white; background: rgb(0 0 0 / .38); font-size: .68rem; backdrop-filter: blur(8px); }
  .feed-card__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / .18), transparent 25%, transparent 48%, rgb(0 0 0 / .79) 100%); pointer-events: none; }
  .feed-card__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
  .feed-card__open:focus-visible { z-index: 9; outline: 3px solid var(--violet-light); outline-offset: -4px; }
  .feed-card__info { position: absolute; right: 78px; bottom: 24px; left: 20px; z-index: 5; text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
  .post-repost-attribution { display: flex; min-width: 0; align-items: center; gap: 5px; margin-bottom: 7px; color: rgb(255 255 255 / .76); font-size: .65rem; font-weight: 720; }
  .post-repost-attribution svg { flex: 0 0 auto; color: #5eead4; filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6)); }
  .post-repost-attribution a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-repost-attribution a:hover { color: white; text-decoration: underline; text-underline-offset: 2px; }
  .post-repost-attribution time { flex: 0 0 auto; color: rgb(255 255 255 / .58); font-weight: 600; }
  .post-author { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
  .post-author__avatar { border-radius: 50%; }
  .post-author__identity { display: grid; min-width: 0; flex: 1 1 auto; overflow: hidden; line-height: 1.2; }
  .post-author__identity a { overflow: hidden; font-size: .9rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .post-author__identity time { margin-top: 2px; overflow: hidden; color: rgb(255 255 255 / .65); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
  .follow-pill { min-height: 44px; flex: 0 0 auto; margin-left: 3px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .35); border-radius: 8px; color: white; background: rgb(0 0 0 / .15); font-size: .74rem; font-weight: 800; cursor: pointer; backdrop-filter: blur(5px); }
  .follow-pill.is-following { border-color: rgb(255 255 255 / .16); color: rgb(255 255 255 / .72); }
  .post-caption { display: -webkit-box; max-width: 470px; overflow: hidden; font-size: .87rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .post-music { display: flex; max-width: 100%; align-items: center; gap: 7px; margin-top: 8px; }
  .post-music .post-audio { min-width: 0; margin-top: 0; }
  .post-music__license { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgb(255 255 255 / .2); border-radius: 99px; color: rgb(255 255 255 / .72); font-size: .51rem; font-weight: 780; letter-spacing: .02em; text-shadow: none; }
  .post-music__license:hover { color: white; background: rgb(255 255 255 / .1); }
  .post-audio { display: flex; max-width: 100%; align-items: center; gap: 6px; margin-top: 8px; padding: 0; overflow: hidden; border: 0; color: rgb(255 255 255 / .78); background: transparent; font-size: .72rem; text-align: left; }
  button.post-audio { cursor: pointer; }
  .post-audio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-audio svg { flex: 0 0 auto; }
  .post-audio.is-playing { color: white; }
  .post-audio.is-playing svg { color: var(--violet-light); filter: drop-shadow(0 0 8px rgb(167 139 250 / .55)); }
  .post-location { display: flex; max-width: 100%; align-items: center; gap: 5px; margin-bottom: 6px; color: rgb(255 255 255 / .78); font-size: .66rem; text-shadow: 0 1px 9px rgb(0 0 0 / .55); }
  .post-location svg { flex: 0 0 auto; }
  .post-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-actions { position: absolute; right: 12px; bottom: 19px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .post-action { display: grid; min-width: 46px; justify-items: center; gap: 1px; padding: 1px; color: white; background: transparent; cursor: pointer; text-shadow: 0 2px 10px rgb(0 0 0 / .8); }
  .post-action:disabled { opacity: .62; cursor: wait; }
  .post-action.is-unavailable:disabled { opacity: .46; cursor: not-allowed; }
  .post-action__icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgb(255 255 255 / .1); border-radius: 50%; background: rgb(0 0 0 / .3); backdrop-filter: blur(9px); transition: transform .18s, color .18s, background .18s; }
  .post-action:hover .post-action__icon { background: rgb(0 0 0 / .48); transform: scale(1.06); }
  .post-action.is-active .post-action__icon { color: #fff; background: var(--gradient); }
  .post-action--heart .post-action__icon { position: relative; overflow: hidden; contain: paint; isolation: isolate; }
  .post-action--heart .post-action__icon > .icon { position: relative; z-index: 2; }
  .post-action__heart-spectrum {
    position: absolute; top: 50%; left: 50%; z-index: 3; display: block; width: 23px; height: 23px; overflow: visible; opacity: 0;
    transform: translate(-50%, -50%); pointer-events: none;
  }
  .post-action__heart-stop--blue { stop-color: var(--brand-blue); }
  .post-action__heart-stop--red { stop-color: var(--brand-red); }
  .post-action__heart-stop--yellow { stop-color: var(--brand-yellow); }
  .post-action__heart-stop--green { stop-color: var(--brand-green); }
  .post-action__heart-filament {
    fill: none; stroke-width: 2.05; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100 0; stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px rgb(255 255 255 / .25));
  }
  .post-action--heart.is-active .post-action__icon { color: #fff; background: rgb(0 0 0 / .35); }
  .post-action--heart.is-active .post-action__icon > .icon { color: #fff; fill: none; }
  .post-action--heart.is-active .post-action__heart-spectrum { opacity: 1; }
  .post-action--heart.is-like-spectrum-animating .post-action__heart-filament {
    animation: likeSpectrumTrace .76s cubic-bezier(.22, .72, .18, 1) both;
    will-change: stroke-dasharray, opacity;
  }
  .post-action--share .post-action__icon svg { transform: rotate(-4deg); }
  .post-action--repost.is-active .post-action__icon { color: #5eead4; background: rgb(13 148 136 / .2); box-shadow: inset 0 0 0 1px rgb(94 234 212 / .16); }
  .post-action__label { max-width: 62px; overflow: hidden; font-size: .61rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
  .post-action--mute { position: absolute; right: 0; bottom: calc(100% + 6px); }
  .post-menu { right: 53px; bottom: 0; text-shadow: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .feed-card__shade { background: linear-gradient(180deg, rgb(0 0 0 / .1), transparent 28%, transparent 55%, rgb(0 0 0 / .58) 100%); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .feed-card__info,
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-author,
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-actions { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .feed-card__info { text-shadow: 0 1px 5px rgb(0 0 0 / .64); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-author { margin-bottom: 8px; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-author__avatar .avatar { outline: 1px solid rgb(255 255 255 / .34); outline-offset: 1px; box-shadow: 0 2px 9px rgb(0 0 0 / .28); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-author__identity a { font-weight: 740; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-author__identity time { color: rgb(255 255 255 / .7); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .follow-pill { border-color: rgb(255 255 255 / .28); background: transparent; backdrop-filter: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .follow-pill.is-following { border-color: transparent; background: transparent; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-actions { gap: 5px; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action { text-shadow: 0 1px 6px rgb(0 0 0 / .72); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action__icon { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action__icon svg { filter: drop-shadow(0 1px 3px rgb(0 0 0 / .72)); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action:hover .post-action__icon { background: rgb(0 0 0 / .14); }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action.is-active .post-action__icon { color: var(--violet-light); background: transparent; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action--heart.is-active .post-action__icon { color: #fff; background: transparent; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action--repost.is-active .post-action__icon { color: #5eead4; background: transparent; box-shadow: none; }
  .feed-stack > .feed-card:not(.feed-card--mosaic) .post-action__label { font-weight: 650; }
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) .feed-card__info,
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) .post-action { text-shadow: none; }
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) .post-author { margin-bottom: 0; }
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) .post-author__avatar .avatar {
    outline-color: var(--line-strong); box-shadow: none;
  }
  .feed-stack > .feed-card.feed-card--home:not(.feed-card--mosaic) .post-action__icon svg { filter: none; }
  .media-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: var(--muted); background: radial-gradient(circle at center, #22222d, #111116); }
  .like-burst { position: absolute; top: 50%; left: 50%; z-index: 10; color: white; filter: drop-shadow(0 10px 30px rgb(236 72 153 / .55)); animation: likeBurst .7s var(--ease) forwards; pointer-events: none; }
  .feed-sentinel { display: grid; width: 100%; height: 72px; flex: 0 0 auto; place-items: center; }
  .feed-load-error { display: grid; width: 100%; min-height: 190px; place-items: center; gap: 12px; padding: 24px; color: var(--muted); text-align: center; }
  .feed-stack > .empty-state { width: 100%; }
  .skeleton-card--feed { width: 100%; height: clamp(560px, calc(100dvh - 190px), 820px); min-height: 560px; flex: 0 0 auto; margin: 0; border-radius: 20px; }
  .feed-card--standalone { width: min(520px, 100%); height: min(78dvh, 820px); min-height: 560px; border: 1px solid var(--line); }
  .post-detail { position: relative; display: grid; min-height: 100dvh; place-items: center; padding-top: 65px; }
  .post-detail__back { position: absolute; top: 25px; left: clamp(22px, 4vw, 60px); }

  /* Full-screen video viewer */
  .video-viewer-page {
    position: fixed; top: var(--video-viewer-offset-top, 0); right: auto; bottom: auto; left: 0; z-index: 60;
    width: 100vw; height: 100vh; height: var(--video-viewer-height, 100dvh);
    min-height: var(--video-viewer-height, 100dvh); max-height: var(--video-viewer-height, 100dvh); overflow: hidden;
    background: #000; isolation: isolate;
  }
  .video-viewer-page--section {
    left: var(--sidebar); z-index: 20; width: calc(100vw - var(--sidebar));
  }
  .video-viewer-page--section .video-viewer,
  .video-viewer-page--section .video-viewer__slide { width: 100%; }
  .fullscreen-feed__explore {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 28;
    display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 8px 13px;
    border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; color: white; background: rgb(8 11 16 / .66);
    box-shadow: 0 10px 30px rgb(0 0 0 / .28); font-size: .69rem; font-weight: 780;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); touch-action: manipulation;
  }
  .fullscreen-feed__explore:hover { background: rgb(24 30 40 / .88); }
  .fullscreen-feed__explore:focus-visible { outline: 3px solid rgb(138 180 248 / .42); outline-offset: 3px; }
  .fullscreen-feed-empty { display: grid; min-height: 100dvh; place-items: center; padding: 24px; }
  .video-viewer {
    width: 100vw; height: 100%; min-height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0;
    background: #000; overscroll-behavior-y: contain; scroll-behavior: smooth;
    scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y pinch-zoom;
    overflow-anchor: none; -webkit-overflow-scrolling: touch;
  }
  .video-viewer::-webkit-scrollbar { display: none; }
  .video-viewer.is-scrolling,
  .video-viewer.is-resizing { scroll-behavior: auto; }
  .video-viewer.is-commenting {
    overflow-y: hidden; overscroll-behavior: none; scroll-behavior: auto; scroll-snap-type: none;
  }
  .video-viewer__rail { width: 100%; min-height: 100%; }
  .video-viewer__spacer { width: 100%; min-height: 0; pointer-events: none; }
  .video-viewer__slide {
    position: relative; width: 100vw; height: var(--video-viewer-height, 100dvh); min-height: var(--video-viewer-height, 100dvh);
    --viewer-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --viewer-safe-left: max(12px, env(safe-area-inset-left));
    --viewer-safe-right: max(12px, env(safe-area-inset-right));
    --viewer-overlay-gap: 12px;
    overflow: hidden; contain: layout paint size; background: #000; scroll-snap-align: start; scroll-snap-stop: always; isolation: isolate;
  }
  .video-viewer__slide .feed-card,
  .video-viewer__slide .feed-card--standalone {
    width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%;
    margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #000; contain: layout paint;
  }
  .video-viewer__slide .feed-card--audio { aspect-ratio: auto; }
  .video-viewer__slide--audio {
    --viewer-audio-footer-reserve: clamp(176px, 25dvh, 260px);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player {
    padding:
      max(68px, calc(env(safe-area-inset-top) + 54px))
      max(82px, calc(var(--viewer-safe-right) + 64px))
      calc(var(--viewer-audio-footer-reserve) + var(--viewer-safe-bottom))
      max(14px, var(--viewer-safe-left));
  }
  .video-viewer__slide .feed-card--audio .audio-post-player__panel {
    width: min(100%, 640px); gap: clamp(8px, 1.4dvh, 13px); padding: clamp(14px, 2.2vw, 21px);
    align-self: center;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player__header,
  .video-viewer__slide .feed-card--audio .audio-post-player__quote,
  .video-viewer__slide .feed-card--audio .audio-post-player__control-row,
  .video-viewer__slide .feed-card--audio .audio-post-player__hint {
    width: 100%; justify-self: stretch;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player__quote { align-self: auto; -webkit-line-clamp: 2; }
  .video-viewer__slide .feed-card--audio .audio-post-player__timeline { height: 44px; }
  .video-viewer__slide .feed-card--audio .audio-post-player__waveforms { height: 34px; }
  .video-viewer__slide .feed-card--audio .audio-post-player__hint { display: none; }
  .video-viewer__slide--audio > .video-viewer__play { display: none; }
  @media (max-height: 650px) {
    .video-viewer__slide--audio { --viewer-audio-footer-reserve: clamp(124px, 24dvh, 154px); }
    .video-viewer__slide .feed-card--audio .audio-post-player {
      padding-top: max(52px, calc(env(safe-area-inset-top) + 42px));
    }
    .video-viewer__slide .feed-card--audio .audio-post-player__panel { gap: 6px; padding: 11px 13px; border-radius: 18px; }
    .video-viewer__slide .feed-card--audio .audio-post-player__brand-mark { width: 38px; border-radius: 12px; }
    .video-viewer__slide .feed-card--audio .audio-post-player__quote {
      font-size: clamp(.82rem, 3.2vw, 1.12rem); -webkit-line-clamp: 2;
    }
    .video-viewer__slide .feed-card--audio .audio-post-player__toggle { width: 48px; }
    .video-viewer__slide .feed-card--audio .audio-post-player__timeline { height: 34px; }
    .video-viewer__slide .feed-card--audio .audio-post-player__waveforms { height: 27px; }
  }
  /* Immersive audio uses the full canvas while preserving the same native
     media element and controls used by the compact feed card. */
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen {
    background:
      radial-gradient(circle at 16% 33%, rgb(31 132 255 / .16), transparent 34%),
      radial-gradient(circle at 83% 82%, rgb(234 67 53 / .1), transparent 37%),
      #05070b;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen::after {
    opacity: .1; mask-image: linear-gradient(180deg, black, transparent 64%);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__identity {
    filter: saturate(.92); opacity: .72;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__identity::after {
    background:
      radial-gradient(circle at 50% 39%, rgb(3 7 14 / .08), rgb(3 6 12 / .52) 72%),
      linear-gradient(180deg, rgb(3 7 14 / .35), rgb(3 5 9 / .8));
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__panel {
    display: grid; width: min(100%, 760px); height: 100%; max-height: none; align-self: stretch; justify-self: center;
    grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; gap: clamp(12px, 2.2dvh, 24px);
    padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__header {
    align-self: start; justify-content: flex-start;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand {
    gap: 11px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand-mark {
    width: clamp(48px, 12vw, 58px); border-radius: clamp(15px, 4vw, 19px);
    background: linear-gradient(145deg, rgb(66 133 244 / .24), rgb(234 67 53 / .11));
    box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 16px 38px rgb(0 0 0 / .24);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand-copy strong {
    font-size: clamp(.74rem, 2.5vw, .94rem);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand-copy small {
    font-size: clamp(.56rem, 1.8vw, .69rem);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__headline {
    position: relative; z-index: 1; display: grid; justify-items: start; gap: 9px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__quote {
    display: -webkit-box; width: min(100%, 650px); align-self: auto;
    font-size: clamp(1.7rem, 7vw, 3.35rem); font-weight: 820; letter-spacing: -.052em; line-height: 1.02;
    -webkit-line-clamp: 2;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__duration-badge {
    padding: 5px 10px; color: rgb(255 255 255 / .72); background: rgb(255 255 255 / .055);
    font-size: clamp(.58rem, 1.9vw, .72rem);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__control-row {
    display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch; gap: clamp(13px, 2.2dvh, 23px);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__track {
    order: 1; min-height: 0; align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; gap: 7px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline {
    height: 100%; min-height: clamp(138px, 23dvh, 228px); align-self: stretch;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline::before,
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline::after {
    bottom: 0; height: 5px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline::before {
    background: rgb(190 201 224 / .22);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline::after {
    background: var(--brand-spectrum); box-shadow: 0 0 13px rgb(32 148 255 / .42);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__waveforms {
    height: calc(100% - 15px); min-height: 118px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__waveform {
    gap: clamp(2px, .6vw, 5px);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__bar {
    min-width: 2px; background: rgb(205 214 232 / .31);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__waveform--progress .audio-post-player__bar {
    background: linear-gradient(180deg, #27dcff, #2e83ff); background-size: 100% 100%; background-position: center;
    box-shadow: 0 0 9px rgb(38 167 255 / .74);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__playhead {
    width: 12px; height: 12px; border-width: 3px; background: #35dfff;
    box-shadow: 0 0 0 5px rgb(38 174 255 / .18), 0 0 25px 7px rgb(34 167 255 / .72);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__playhead::before {
    position: absolute; top: 50%; left: 50%; width: 2px; height: clamp(102px, 20dvh, 190px); border-radius: 99px;
    background: linear-gradient(180deg, transparent, rgb(40 183 255 / .76), transparent); content: "";
    filter: blur(.2px); pointer-events: none; transform: translate(-50%, -50%);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__times {
    padding-top: 2px;
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__time {
    color: rgb(255 255 255 / .64); font-size: clamp(.61rem, 2vw, .78rem);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__toggle {
    order: 2; width: clamp(90px, 24vw, 124px); align-self: end; justify-self: center;
    box-shadow: 0 20px 46px rgb(0 0 0 / .38), 0 0 28px rgb(36 157 255 / .16);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__toggle::before {
    inset: 5px; border-color: rgb(255 255 255 / .15); background: rgb(6 10 16 / .88);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__state > svg {
    width: clamp(31px, 8vw, 42px); height: clamp(31px, 8vw, 42px);
  }
  .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__hint { display: none; }
  @media (max-height: 650px) {
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__panel {
      gap: 7px; padding: 0; border: 0; border-radius: 0;
    }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__brand-mark { width: 38px; }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__quote {
      font-size: clamp(1.16rem, 5vw, 1.72rem); -webkit-line-clamp: 1;
    }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__headline { gap: 5px; }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__timeline {
      height: 100%; min-height: 78px;
    }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__waveforms {
      height: calc(100% - 10px); min-height: 64px;
    }
    .video-viewer__slide .feed-card--audio .audio-post-player--fullscreen .audio-post-player__toggle { width: 68px; }
  }
  .video-viewer__slide .feed-card__stage {
    width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%;
    overflow: hidden; aspect-ratio: auto; background: #000; contain: layout paint;
  }
  .video-viewer__slide .carousel img,
  .video-viewer__slide .carousel video { width: 100%; height: 100%; object-fit: cover; }
  .video-viewer__slide .feed-card__shade {
    background: linear-gradient(180deg, rgb(0 0 0 / .38), transparent 22%, transparent 46%, rgb(0 0 0 / .84) 100%);
  }
  .video-viewer__slide .feed-card__info {
    right: max(88px, calc(var(--viewer-safe-right) + 68px)); bottom: calc(var(--viewer-safe-bottom) + 22px);
    left: max(20px, var(--viewer-safe-left));
  }
  .video-viewer__slide .post-actions {
    right: var(--viewer-safe-right); bottom: calc(var(--viewer-safe-bottom) + 16px);
  }
  .video-viewer__slide .feed-card--has-viewer-composer .feed-card__info {
    bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + var(--viewer-overlay-gap));
  }
  .video-viewer__slide .feed-card--has-viewer-composer .post-actions {
    bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + 8px);
  }
  .video-viewer-comment-composer {
    position: absolute; right: var(--viewer-safe-right); bottom: var(--viewer-safe-bottom);
    left: var(--viewer-safe-left); z-index: 12; display: grid; width: auto; min-width: 0; max-width: none; min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 7px; padding: 5px;
    border: 1px solid rgb(255 255 255 / .17); border-radius: 19px; background: rgb(12 12 16 / .74);
    box-shadow: 0 9px 32px rgb(0 0 0 / .3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    touch-action: manipulation;
  }
  .video-viewer.is-scrolling .mix-animated-image,
  .video-viewer.is-resizing .mix-animated-image {
    animation: none !important; transform: none !important; will-change: auto;
  }
  .video-viewer-comment-composer__input {
    width: 100%; min-width: 0; min-height: 40px; max-height: 112px; margin: 0; padding: 9px 11px;
    overflow-y: auto; border: 0; border-radius: 14px; outline: 0; color: white; background: transparent;
    font: inherit; font-size: max(16px, .78rem); line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere;
    caret-color: white; cursor: text; resize: none; scrollbar-width: none; touch-action: pan-y;
    overscroll-behavior: contain; -webkit-user-select: text; user-select: text;
  }
  .video-viewer-comment-composer__input::-webkit-scrollbar { display: none; }
  .video-viewer-comment-composer__input:empty::before {
    color: rgb(255 255 255 / .62); content: attr(data-placeholder); pointer-events: none;
  }
  .video-viewer-comment-composer__input:focus-visible { background: rgb(255 255 255 / .055); box-shadow: inset 0 0 0 1px rgb(196 181 253 / .52); }
  .video-viewer-comment-composer__input[aria-disabled="true"],
  .video-viewer-comment-composer__input[contenteditable="false"] { opacity: .72; cursor: not-allowed; }
  .video-viewer-comment-composer__submit {
    display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 14px; color: white;
    background: var(--gradient); box-shadow: 0 6px 18px rgb(139 92 246 / .3); cursor: pointer;
    transition: opacity .16s, transform .16s var(--ease); touch-action: manipulation;
  }
  .video-viewer-comment-composer__submit:hover { transform: translateY(-1px); }
  .video-viewer-comment-composer__submit:focus-visible { outline: 2px solid white; outline-offset: 2px; }
  .video-viewer-comment-composer__submit:disabled { opacity: .38; box-shadow: none; cursor: default; transform: none; }
  .video-viewer__slide .post-menu { max-height: min(70dvh, 520px); overflow-y: auto; }
  .video-viewer__back {
    position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 75;
    width: 46px; height: 46px; border-color: rgb(255 255 255 / .14); color: white; background: rgb(0 0 0 / .38);
    box-shadow: 0 8px 26px rgb(0 0 0 / .28); backdrop-filter: blur(10px);
  }
  .video-viewer__loading {
    position: fixed; right: max(17px, env(safe-area-inset-right)); top: max(18px, env(safe-area-inset-top)); z-index: 74;
    display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .3);
  }
  .video-viewer__loading .spinner { width: 19px; height: 19px; }
  .video-viewer__play {
    position: absolute; top: 50%; left: 50%; z-index: 9; display: grid; width: 78px; height: 78px; place-items: center;
    border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; opacity: 1; color: white; background: rgb(0 0 0 / .38);
    box-shadow: 0 14px 42px rgb(0 0 0 / .32); backdrop-filter: blur(12px); cursor: pointer; transform: translate(-50%, -50%);
    transition: opacity .18s, transform .2s var(--ease); touch-action: manipulation;
  }
  .video-viewer__play[hidden] { display: none; }
  .video-viewer__slide.is-playing .video-viewer__play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.82); }
  .video-viewer__slide.is-play-blocked .video-viewer__play { opacity: 1; pointer-events: auto; }

  /* Stories */
  .story-viewer-modal {
    width: var(--story-viewer-width, 100vw); height: var(--story-viewer-height, 100dvh);
    min-height: var(--story-viewer-height, 100dvh); max-height: var(--story-viewer-height, 100dvh);
    overflow: hidden; border: 0; border-radius: 0; background: #000; box-shadow: none;
  }
  .story-viewer {
    position: relative; display: grid; width: var(--story-viewer-width, 100vw); height: var(--story-viewer-height, 100dvh);
    min-height: var(--story-viewer-height, 100dvh); max-height: var(--story-viewer-height, 100dvh); overflow: hidden;
    place-items: center; background: #000; isolation: isolate; touch-action: pinch-zoom; user-select: none;
  }
  .story-viewer.has-owner-insights, .story-viewer.has-owner-insights .story-viewer__nav { touch-action: pinch-zoom; }
  .story-viewer__stage { position: absolute; inset: 0; z-index: 1; display: grid; overflow: hidden; place-items: center; background: #000; }
  .story-viewer__stage::after {
    position: absolute; inset: 0; z-index: 2; opacity: var(--story-insights-backdrop, 0);
    background: linear-gradient(180deg, rgb(0 0 0 / .2), rgb(5 6 9 / .92)); pointer-events: none; content: "";
  }
  .story-viewer__frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #050507; isolation: isolate; }
  .story-viewer.is-insights-dragging .story-viewer__frame, .story-viewer.is-insights-settling .story-viewer__frame {
    border-radius: var(--story-insights-radius, 0); transform: translate3d(0, var(--story-insights-offset, 0), 0) scale(var(--story-insights-scale, 1));
    box-shadow: 0 18px 70px rgb(0 0 0 / .55); will-change: transform, border-radius;
  }
  .story-viewer.is-insights-settling .story-viewer__frame { transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-radius .22s ease, box-shadow .22s ease; }
  .story-viewer.is-dismiss-dragging .story-viewer__frame, .story-viewer.is-dismiss-settling .story-viewer__frame {
    border-radius: var(--story-dismiss-radius, 0); opacity: var(--story-dismiss-opacity, 1);
    transform: translate3d(0, var(--story-dismiss-offset, 0), 0) scale(var(--story-dismiss-scale, 1));
    box-shadow: 0 18px 70px rgb(0 0 0 / .55); will-change: transform, border-radius, opacity;
  }
  .story-viewer.is-dismiss-dragging .story-viewer__frame { transition: none; }
  .story-viewer.is-dismiss-settling .story-viewer__frame { transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-radius .22s ease, opacity .2s ease; }
  .story-viewer.is-insights-open .story-viewer__frame {
    border-radius: 26px; opacity: 0; pointer-events: none; transform: translate3d(0, -32dvh, 0) scale(.26);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), border-radius .34s ease, opacity .16s ease .14s;
  }
  .story-viewer__frame > .content-watermark { z-index: 5; width: clamp(76px, 22%, 116px); }
  .story-viewer__frame > .content-watermark--short { width: clamp(32px, 10%, 48px); }
  .story-viewer__media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; -webkit-user-drag: none; }
  .story-viewer__frame::after { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / .62), transparent 24%, transparent 66%, rgb(0 0 0 / .52)); pointer-events: none; content: ""; }
  .story-progress { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); z-index: 6; display: flex; gap: 4px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45)); }
  .story-progress span { height: 3px; flex: 1; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .28); }
  .story-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: white; }
  .story-progress span.is-complete i { width: 100%; }
  .story-viewer__header { position: absolute; top: max(24px, calc(env(safe-area-inset-top) + 14px)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); z-index: 7; display: flex; min-height: 48px; align-items: center; gap: 8px; color: white; text-shadow: 0 2px 10px rgb(0 0 0 / .7); }
  .story-viewer__owner { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; }
  .story-viewer__owner strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
  .story-viewer__owner time { flex: 0 0 auto; color: rgb(255 255 255 / .7); font-size: .73rem; }
  .story-viewer__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
  .story-viewer__action { width: 44px; height: 44px; color: white; background: rgb(0 0 0 / .24); text-shadow: none; backdrop-filter: blur(8px); }
  .story-viewer__action:hover:not(:disabled) { background: rgb(0 0 0 / .44); }
  .story-viewer__close { border: 1px solid rgb(255 255 255 / .15); }
  .story-viewer__source {
    position: absolute; top: max(80px, calc(env(safe-area-inset-top) + 70px)); left: 50%; z-index: 8;
    display: grid; width: min(320px, calc(100% - 32px)); min-height: 48px; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgb(255 255 255 / .17); border-radius: 15px;
    color: white; background: rgb(8 8 12 / .55); box-shadow: 0 10px 28px rgb(0 0 0 / .2); text-align: left;
    backdrop-filter: blur(14px); cursor: pointer; transform: translateX(-50%); transition: border-color .18s, background .18s, transform .18s;
  }
  .story-viewer__source:hover:not(:disabled), .story-viewer__source:focus-visible { border-color: rgb(255 255 255 / .36); background: rgb(12 12 18 / .78); transform: translateX(-50%) translateY(-1px); }
  .story-viewer__source:focus-visible { outline: 3px solid rgb(139 92 246 / .46); outline-offset: 2px; }
  .story-viewer__source:disabled { opacity: .62; cursor: wait; }
  .story-viewer__source .avatar { width: 32px; height: 32px; }
  .story-viewer__source > svg { color: rgb(255 255 255 / .68); }
  .story-viewer__source-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--gradient-soft); }
  .story-viewer__source-copy { display: grid; min-width: 0; gap: 1px; }
  .story-viewer__source-copy small, .story-viewer__source-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-viewer__source-copy small { color: rgb(255 255 255 / .67); font-size: .57rem; }
  .story-viewer__source-copy strong { font-size: .7rem; }
  .story-viewer__location {
    position: absolute; top: max(82px, calc(env(safe-area-inset-top) + 72px)); left: 50%; z-index: 7;
    display: flex; max-width: min(300px, calc(100% - 48px)); min-height: 34px; align-items: center; gap: 6px;
    padding: 7px 11px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; color: white;
    background: rgb(8 8 12 / .48); box-shadow: 0 7px 24px rgb(0 0 0 / .16); font-size: .72rem; font-weight: 750;
    text-shadow: 0 2px 10px rgb(0 0 0 / .65); backdrop-filter: blur(12px); pointer-events: none; transform: translateX(-50%);
  }
  .story-viewer__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-viewer__location svg { flex: 0 0 auto; color: var(--violet-light); }
  .story-viewer__frame.has-repost-source .story-viewer__location { top: max(140px, calc(env(safe-area-inset-top) + 130px)); }
  .story-viewer__nav { position: absolute; top: max(78px, calc(env(safe-area-inset-top) + 68px)); bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px)); z-index: 4; color: transparent; background: transparent; cursor: pointer; touch-action: pinch-zoom; }
  .story-viewer__nav svg { display: none; }
  .story-viewer__nav--prev { left: 0; width: 35%; }
  .story-viewer__nav--next { right: 0; width: 65%; }
  .story-viewer__caption { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)); left: max(24px, env(safe-area-inset-left)); z-index: 7; max-height: 30dvh; overflow: auto; color: white; font-size: .94rem; text-align: center; text-shadow: 0 2px 12px #000; user-select: text; }
  .story-viewer__frame.has-music .story-viewer__caption { bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px)); }
  .story-viewer__music { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); left: max(24px, env(safe-area-inset-left)); z-index: 7; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; color: rgb(255 255 255 / .82); font-size: .72rem; text-shadow: 0 2px 10px #000; }
  .story-viewer__music span { max-width: min(72vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-viewer__music svg { flex: 0 0 auto; color: var(--violet-light); }
  .story-viewer__license { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgb(255 255 255 / .24); border-radius: 99px; color: white; background: rgb(0 0 0 / .22); font-size: .5rem; font-weight: 800; text-shadow: none; }
  .story-viewer__license:hover { background: rgb(0 0 0 / .45); }
  .story-viewer__frame.has-engagement .story-viewer__caption { bottom: max(194px, calc(env(safe-area-inset-bottom) + 184px)); max-height: 22dvh; }
  .story-viewer__frame.has-engagement .story-viewer__music { bottom: max(190px, calc(env(safe-area-inset-bottom) + 180px)); }
  .story-viewer__frame.has-engagement.has-music .story-viewer__caption { bottom: max(226px, calc(env(safe-area-inset-bottom) + 216px)); }
  .story-viewer__engagement {
    position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); z-index: 9;
    display: grid; width: min(480px, calc(100% - 24px)); margin-inline: auto; gap: 8px; color: white; text-shadow: none; user-select: none;
  }
  .story-reactions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .story-reactions__button {
    display: grid; min-width: 0; height: 44px; place-items: center; border: 1px solid rgb(255 255 255 / .13); border-radius: 99px; color: white;
    background: rgb(9 9 13 / .48); box-shadow: 0 7px 24px rgb(0 0 0 / .16); font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(13px);
    transition: border-color .18s, background .18s, opacity .18s, transform .18s;
  }
  .story-reactions__button:hover:not(:disabled), .story-reactions__button:focus-visible { border-color: rgb(255 255 255 / .35); background: rgb(26 26 35 / .76); transform: translateY(-1px); }
  .story-reactions__button:active:not(:disabled) { transform: scale(.93); }
  .story-reactions__button:disabled { opacity: .55; cursor: wait; }
  .story-reactions__button.is-sending { background: rgb(139 92 246 / .34); animation: storyReactionPulse .75s ease-in-out infinite alternate; }
  .story-reactions__button.is-sent { border-color: rgb(52 211 153 / .72); background: rgb(52 211 153 / .22); transform: scale(1.08); }
  .story-engagement__composer { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; }
  .story-engagement__composer.has-like { grid-template-columns: minmax(0, 1fr) 48px; }
  .story-engagement__composer .story-reply__disabled { width: 100%; min-height: 47px; align-content: center; margin: 0; text-align: center; }
  .story-reply { display: grid; min-height: 47px; grid-template-columns: minmax(0, 1fr) 39px; align-items: center; gap: 6px; padding: 4px 5px 4px 15px; border: 1px solid rgb(255 255 255 / .18); border-radius: 99px; background: rgb(9 9 13 / .54); box-shadow: 0 10px 34px rgb(0 0 0 / .24); backdrop-filter: blur(15px); }
  .story-reply:focus-within { border-color: rgb(167 139 250 / .78); background: rgb(15 15 22 / .78); box-shadow: 0 0 0 3px rgb(139 92 246 / .18), 0 10px 34px rgb(0 0 0 / .24); }
  .story-reply input { width: 100%; min-width: 0; border: 0; outline: 0; color: white; background: transparent; font-size: 16px; }
  .story-reply input::placeholder { color: rgb(255 255 255 / .58); }
  .story-reply input:disabled { opacity: .7; }
  .story-reply__send { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: white; background: var(--gradient); cursor: pointer; transition: opacity .18s, transform .18s; }
  .story-reply__send:hover:not(:disabled) { transform: scale(1.04); }
  .story-reply__send:active:not(:disabled) { transform: scale(.94); }
  .story-reply__send:disabled { opacity: .55; cursor: wait; }
  .story-reply__disabled { justify-self: center; padding: 7px 12px; border: 1px solid rgb(255 255 255 / .12); border-radius: 99px; color: rgb(255 255 255 / .68); background: rgb(9 9 13 / .5); font-size: .68rem; font-weight: 700; backdrop-filter: blur(12px); }
  .story-like {
    display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; color: white;
    background: rgb(9 9 13 / .54); box-shadow: 0 10px 34px rgb(0 0 0 / .24); cursor: pointer; backdrop-filter: blur(15px);
    transition: color .18s, background .18s, border-color .18s, opacity .18s, transform .18s;
  }
  .story-like:hover:not(:disabled), .story-like:focus-visible { border-color: rgb(255 255 255 / .4); background: rgb(26 26 35 / .8); transform: translateY(-1px); }
  .story-like:active:not(:disabled) { transform: scale(.93); }
  .story-like.is-active { border-color: rgb(251 113 133 / .48); color: #fb7185; background: rgb(127 29 29 / .38); }
  .story-like:disabled { opacity: .65; cursor: wait; }
  .story-action-toolbar {
    display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; padding: 5px;
    border: 1px solid rgb(255 255 255 / .14); border-radius: 18px; background: rgb(8 8 12 / .58);
    box-shadow: 0 10px 32px rgb(0 0 0 / .28); backdrop-filter: blur(16px);
  }
  .story-action-toolbar.is-owner { width: min(220px, 100%); justify-self: center; }
  .story-action-toolbar__button, .story-action-toolbar .story-like {
    display: grid; width: auto; min-width: 0; height: 48px; flex: 1 1 0; grid-template-rows: 23px auto; place-items: center; gap: 1px;
    padding: 4px 6px; border: 0; border-radius: 13px; color: white; background: transparent; box-shadow: none;
    font-size: .5rem; font-weight: 760; line-height: 1; cursor: pointer; backdrop-filter: none;
    transition: color .18s, background .18s, opacity .18s, transform .18s;
  }
  .story-action-toolbar__button:hover:not(:disabled), .story-action-toolbar__button:focus-visible,
  .story-action-toolbar .story-like:hover:not(:disabled), .story-action-toolbar .story-like:focus-visible { border-color: transparent; background: rgb(255 255 255 / .1); transform: translateY(-1px); }
  .story-action-toolbar__button:active:not(:disabled), .story-action-toolbar .story-like:active:not(:disabled) { transform: scale(.94); }
  .story-action-toolbar__button:disabled { opacity: .5; cursor: wait; }
  .story-action-toolbar .story-like.is-active { color: #fb7185; background: rgb(251 113 133 / .12); }
  .story-action-toolbar__button span, .story-action-toolbar .story-like span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .story-notes {
    position: absolute; top: max(110px, calc(env(safe-area-inset-top) + 96px)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); z-index: 8;
    min-width: 0; pointer-events: auto;
  }
  .story-notes[hidden] { display: none; }
  .story-viewer__frame.has-repost-source .story-notes, .story-viewer__frame.has-location .story-notes { top: max(164px, calc(env(safe-area-inset-top) + 150px)); }
  .story-notes__list { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .story-notes__list::-webkit-scrollbar { display: none; }
  .story-note-chip {
    display: flex; min-width: 0; max-width: min(270px, 76vw); flex: 0 0 auto; align-items: center; gap: 7px; padding: 6px 10px 6px 6px;
    border: 1px solid rgb(255 255 255 / .15); border-radius: 999px; color: white; background: rgb(8 8 12 / .58);
    box-shadow: 0 8px 24px rgb(0 0 0 / .2); font-size: .63rem; font-weight: 690; cursor: pointer; backdrop-filter: blur(14px); scroll-snap-align: start;
  }
  .story-note-chip .avatar { width: 27px; height: 27px; flex: 0 0 27px; }
  .story-note-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-note-modal { width: min(540px, 100%); }
  .story-note-composer { display: grid; gap: 12px; padding: 10px 22px max(24px, env(safe-area-inset-bottom)); }
  .story-note-composer h2 { font-size: 1.25rem; }
  .story-note-composer > p { color: var(--muted); font-size: .7rem; line-height: 1.45; }
  .story-note-composer textarea { width: 100%; min-height: 96px; resize: vertical; padding: 13px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgb(255 255 255 / .045); font: inherit; font-size: .8rem; }
  .story-note-composer textarea:focus { border-color: rgb(167 139 250 / .58); outline: 3px solid rgb(139 92 246 / .12); }
  .story-note-composer__counter { justify-self: end; color: var(--faint); font-size: .58rem; }
  .story-note-composer__feedback { min-height: 18px; color: #fda4af !important; }
  .story-note-composer footer { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
  .story-share-preview { cursor: default; }
  .shared-story-page { display: grid; min-height: 100dvh; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #050609; }
  .shared-story-page__loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; }
  .shared-story-card { position: relative; width: min(430px, 100%); aspect-ratio: 9 / 16; max-height: calc(100dvh - 40px); overflow: hidden; border: 1px solid rgb(255 255 255 / .12); border-radius: 26px; background: #11121a; box-shadow: 0 24px 70px rgb(0 0 0 / .46); isolation: isolate; }
  .shared-story-card__visual, .shared-story-card__shade, .shared-story-card__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
  .shared-story-card__visual { object-fit: cover; }
  .shared-story-card__fallback { display: grid; place-items: center; color: #c4b5fd; background: radial-gradient(circle at 25% 15%, #4c1d95, #11121a 62%); }
  .shared-story-card__shade { background: linear-gradient(180deg, rgb(0 0 0 / .16), transparent 36%, rgb(0 0 0 / .82)); }
  .shared-story-card__content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: end; gap: 13px; padding: 24px; color: white; }
  .shared-story-card__logo { position: absolute; top: 22px; left: 22px; width: 82px; height: auto; }
  .shared-story-card__owner { display: flex; align-items: center; gap: 10px; }
  .shared-story-card__owner > div { display: grid; gap: 2px; }
  .shared-story-card__owner small { color: rgb(255 255 255 / .72); font-size: .62rem; }
  .shared-story-card__content > p { display: -webkit-box; overflow: hidden; font-size: .76rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .shared-story-page__error { width: min(460px, 100%); }
  .story-owner-insights {
    position: absolute; inset: 0; z-index: 20; display: grid; min-width: 0; min-height: 0;
    grid-template-rows: clamp(196px, 29dvh, 254px) minmax(0, 1fr); color: var(--text); background: #050609;
    opacity: 1; transform: translate3d(0, var(--story-insights-pull, 0), 0); animation: storyInsightsReveal .34s cubic-bezier(.2, .8, .2, 1) both;
    transition: transform .2s ease; user-select: text;
  }
  .story-owner-insights__gallery {
    position: relative; display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 5px;
    padding: max(15px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left));
    overflow: hidden; background: radial-gradient(circle at 50% 115%, rgb(59 130 246 / .19), transparent 52%), #050609; touch-action: pan-x;
  }
  .story-owner-insights__gallery-copy { display: grid; justify-self: center; gap: 1px; text-align: center; }
  .story-owner-insights__gallery-copy .eyebrow { color: #93c5fd; font-size: .54rem; }
  .story-owner-insights__gallery-copy strong { font-size: .8rem; }
  .story-owner-insights__close { position: absolute; top: max(9px, env(safe-area-inset-top)); right: max(9px, env(safe-area-inset-right)); z-index: 3; color: white; background: rgb(255 255 255 / .07); }
  .story-owner-insights__rail {
    display: flex; min-width: 0; align-items: end; justify-content: safe center; gap: 10px; overflow-x: auto; overflow-y: hidden;
    padding: 3px 40px 3px; scroll-padding-inline: 40px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    touch-action: pan-x; -webkit-overflow-scrolling: touch;
  }
  .story-owner-insights__rail::-webkit-scrollbar { display: none; }
  .story-owner-insights__story {
    position: relative; display: grid; width: 68px; height: 116px; flex: 0 0 auto; place-items: center; align-self: end; overflow: hidden;
    padding: 2px; border: 1px solid rgb(255 255 255 / .14); border-radius: 15px; color: white; background: #171820; cursor: pointer;
    scroll-snap-align: center; box-shadow: 0 8px 24px rgb(0 0 0 / .24); transition: width .2s ease, height .2s ease, border-radius .2s ease, transform .2s ease, opacity .2s ease;
  }
  .story-owner-insights__story img, .story-owner-insights__story video { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; pointer-events: none; }
  .story-owner-insights__story:not(.is-selected):not(.story-owner-insights__story--create) { opacity: .7; }
  .story-owner-insights__story.is-selected {
    width: 82px; height: 138px; padding: 3px; border-color: transparent; border-radius: 18px;
    background: linear-gradient(#08090c, #08090c) padding-box, var(--brand-spectrum) border-box; opacity: 1; transform: translateY(-2px);
    box-shadow: 0 13px 32px rgb(0 0 0 / .38), 0 0 24px rgb(59 130 246 / .16);
  }
  .story-owner-insights__story.is-selected img, .story-owner-insights__story.is-selected video { border-radius: 14px; }
  .story-owner-insights__story-count {
    position: absolute; right: 5px; bottom: 5px; display: inline-flex; min-height: 23px; align-items: center; gap: 3px; padding: 3px 6px;
    border-radius: 99px; color: white; background: rgb(0 0 0 / .66); font-size: .55rem; font-weight: 780; backdrop-filter: blur(8px);
  }
  .story-owner-insights__story-fallback { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 12px; color: #a5b4fc; background: linear-gradient(145deg, #25263a, #11121a); }
  .story-owner-insights__story--create { align-content: center; gap: 7px; border-style: dashed; color: rgb(255 255 255 / .82); background: rgb(255 255 255 / .045); box-shadow: none; }
  .story-owner-insights__story--create small { max-width: 58px; font-size: .55rem; font-weight: 760; line-height: 1.2; text-align: center; }
  .story-owner-insights__create-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: white; background: var(--gradient); box-shadow: 0 8px 20px rgb(59 130 246 / .2); }
  .story-owner-insights__sheet {
    position: relative; display: grid; min-width: 0; min-height: 0; grid-template-rows: 22px auto minmax(0, 1fr); overflow: hidden;
    border: 1px solid rgb(255 255 255 / .08); border-width: 1px 0 0; border-radius: 27px 27px 0 0; background: #12141a;
    box-shadow: 0 -18px 46px rgb(0 0 0 / .42);
  }
  .story-owner-insights__sheet-handle { display: grid; width: 100%; height: 22px; place-items: center; padding: 0; background: transparent; cursor: pointer; touch-action: none; }
  .story-owner-insights__sheet-handle span { width: 42px; height: 4px; border-radius: 99px; background: rgb(255 255 255 / .2); }
  .story-owner-insights__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 13px; border-bottom: 1px solid rgb(255 255 255 / .07); }
  .story-owner-insights__tab {
    position: relative; display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px;
    color: var(--muted); background: transparent; font-size: .72rem; font-weight: 780; cursor: pointer;
  }
  .story-owner-insights__tab::after { position: absolute; right: 22%; bottom: -1px; left: 22%; height: 3px; border-radius: 99px 99px 0 0; background: var(--brand-spectrum); opacity: 0; content: ""; transform: scaleX(.4); transition: opacity .18s, transform .18s; }
  .story-owner-insights__tab.is-active { color: white; }
  .story-owner-insights__tab.is-active::after { opacity: 1; transform: scaleX(1); }
  .story-owner-insights__body, .story-owner-insights__panel { min-width: 0; min-height: 0; }
  .story-owner-insights__body { overflow: hidden; }
  .story-owner-insights__panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .story-owner-insights__viewers { min-height: 100%; padding: 4px 14px 12px; }
  .story-owner-insights__footer { display: grid; place-items: center; padding: 8px 15px max(13px, env(safe-area-inset-bottom)); }
  .story-owner-insights__more { width: min(260px, 100%); }
  .story-owner-viewer { display: flex; min-height: 66px; align-items: center; gap: 10px; border-bottom: 1px solid rgb(255 255 255 / .055); }
  .story-owner-viewer:last-child { border-bottom: 0; }
  .story-owner-viewer__profile { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; padding: 8px 0; }
  .story-owner-viewer__identity { display: grid; min-width: 0; gap: 3px; line-height: 1.2; }
  .story-owner-viewer__identity strong { display: flex; min-width: 0; align-items: center; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
  .story-owner-viewer__identity strong > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .story-owner-viewer__identity small { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .story-owner-viewer__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; }
  .story-owner-viewer__liked { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fb7185; background: rgb(251 113 133 / .1); }
  .story-owner-viewer__message { width: 42px; height: 42px; color: var(--text-soft); }
  .story-owner-viewer--skeleton { justify-content: flex-start; }
  .story-owner-viewer__skeleton-copy { display: grid; width: min(220px, 56%); gap: 7px; }
  .story-owner-viewer__skeleton-copy .skeleton-line:last-child { width: 56%; height: 9px; }
  .story-owner-insights__empty { min-height: 260px; }
  .story-owner-insights__panel--stats { padding: 16px 15px max(24px, env(safe-area-inset-bottom)); }
  .story-insights-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .story-insights-metric {
    display: grid; min-width: 0; min-height: 84px; grid-template-columns: 31px minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 9px;
    padding: 11px; border: 1px solid rgb(255 255 255 / .075); border-radius: 16px; background: rgb(255 255 255 / .025);
  }
  .story-insights-metric:first-child { grid-column: 1 / -1; }
  .story-insights-metric > span { display: grid; width: 31px; height: 31px; grid-row: 1 / span 2; place-items: center; border-radius: 11px; color: #93c5fd; background: rgb(59 130 246 / .1); }
  .story-insights-metric:nth-child(3) > span { color: #fb7185; background: rgb(251 113 133 / .09); }
  .story-insights-metric strong { overflow: hidden; font-size: 1rem; line-height: 1; text-overflow: ellipsis; }
  .story-insights-metric small { overflow: hidden; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
  .story-insights-metrics--skeleton > span { height: 84px; border-radius: 16px; }
  .story-insights-metrics--skeleton > span:first-child { grid-column: 1 / -1; }
  .story-insights-audience { display: grid; justify-items: stretch; gap: 11px; margin-top: 18px; padding-top: 17px; border-top: 1px solid rgb(255 255 255 / .07); }
  .story-insights-audience header h3 { margin-top: 3px; font-size: 1rem; }
  .story-insights-donut {
    display: grid; width: 168px; aspect-ratio: 1; place-items: center; justify-self: center; margin: 5px auto 8px; border-radius: 50%;
    background: conic-gradient(#4ade80 0 var(--story-followers-angle), #8b5cf6 var(--story-followers-angle) 360deg); box-shadow: 0 12px 32px rgb(0 0 0 / .25);
  }
  .story-insights-donut::before { grid-area: 1 / 1; width: 132px; aspect-ratio: 1; border-radius: 50%; background: #12141a; content: ""; }
  .story-insights-donut > span { z-index: 1; display: grid; grid-area: 1 / 1; justify-items: center; gap: 2px; text-align: center; }
  .story-insights-donut small { color: var(--muted); font-size: .58rem; }
  .story-insights-donut strong { font-size: 1.45rem; }
  .story-insights-audience__row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--text-soft); font-size: .68rem; }
  .story-insights-audience__row i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
  .story-insights-audience__row--non-followers i { background: #8b5cf6; }
  .story-insights-audience__row strong { color: var(--text); font-size: .68rem; }

  @keyframes storyInsightsReveal {
    from { opacity: 0; transform: translate3d(0, 16%, 0); }
    to { opacity: 1; transform: translate3d(0, var(--story-insights-pull, 0), 0); }
  }
  html[dir="rtl"] .story-owner-insights__close { right: auto; left: max(9px, env(safe-area-inset-left)); }
  @media (prefers-reduced-motion: reduce) {
    .story-owner-insights { animation: none; transition: none; }
    .story-owner-insights__story, .story-owner-insights__tab::after, .story-viewer.is-insights-open .story-viewer__frame,
    .story-viewer.is-dismiss-dragging .story-viewer__frame, .story-viewer.is-dismiss-settling .story-viewer__frame,
    .story-action-toolbar__button, .story-note-chip { transition: none; animation: none; }
  }

  /* Comments */
  .comments-modal { height: min(780px, 82dvh); overflow: hidden; }
  .comments-sheet { display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .comments-sheet > .sheet-heading { padding-bottom: 9px; border-bottom: 0; }
  .sheet-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 64px 17px 22px; border-bottom: 1px solid var(--line); }
  .sheet-heading h2 { margin-top: 2px; font-size: 1.35rem; }
  .sheet-heading__count { display: grid; min-width: 30px; height: 30px; place-items: center; padding-inline: 8px; border-radius: 99px; color: var(--violet-light); background: var(--gradient-soft); font-size: .75rem; font-weight: 800; }
  .comments-sort { position: relative; z-index: 7; display: flex; align-items: center; padding: 0 18px 11px; border-bottom: 1px solid var(--line); }
  .comments-sort__trigger {
    display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 12px;
    color: var(--text-soft); background: transparent; font-size: .76rem; font-weight: 780; cursor: pointer; transition: color .18s, border-color .18s, background .18s;
  }
  .comments-sort__trigger:hover, .comments-sort__trigger:focus-visible, .comments-sort.is-open .comments-sort__trigger { border-color: rgb(167 139 250 / .22); color: white; background: var(--gradient-soft); }
  .comments-sort__trigger-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: var(--violet-light); background: rgb(139 92 246 / .1); }
  .comments-sort__chevron { display: grid; margin-left: 1px; color: var(--faint); transition: transform .18s; }
  .comments-sort.is-open .comments-sort__chevron { transform: rotate(180deg); }
  .comments-sort__menu {
    position: absolute; top: calc(100% + 6px); left: 18px; z-index: 9; display: grid; width: min(350px, calc(100vw - 36px)); gap: 3px;
    max-height: min(250px, 48dvh); padding: 7px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 17px;
    background: linear-gradient(155deg, rgb(35 35 45 / .985), rgb(20 20 28 / .99)); box-shadow: 0 22px 55px rgb(0 0 0 / .48), inset 0 1px rgb(255 255 255 / .055);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
  .comments-sort__option {
    display: grid; min-height: 58px; grid-template-columns: 35px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 12px; color: var(--text-soft); background: transparent; text-align: left; cursor: pointer; transition: color .16s, background .16s, transform .16s;
  }
  .comments-sort__option:hover, .comments-sort__option:focus-visible { color: white; background: rgb(255 255 255 / .055); }
  .comments-sort__option:active { transform: scale(.985); }
  .comments-sort__option.is-selected { color: white; background: linear-gradient(110deg, rgb(139 92 246 / .17), rgb(236 72 153 / .07)); }
  .comments-sort__option-icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgb(255 255 255 / .07); border-radius: 11px; color: var(--muted); background: rgb(255 255 255 / .025); }
  .comments-sort__option.is-selected .comments-sort__option-icon { border-color: rgb(167 139 250 / .22); color: var(--violet-light); background: rgb(139 92 246 / .1); }
  .comments-sort__option-copy { display: grid; min-width: 0; line-height: 1.22; }
  .comments-sort__option-copy strong { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
  .comments-sort__option-copy small { margin-top: 3px; overflow: hidden; color: var(--faint); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .comments-sort__option-check { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; opacity: 0; color: white; background: var(--gradient); transform: scale(.75); transition: opacity .16s, transform .16s; }
  .comments-sort__option.is-selected .comments-sort__option-check { opacity: 1; transform: scale(1); }
  .comments-list { overflow-y: auto; padding: 10px 18px 20px; }
  .comment { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 2px; }
  .comment--reply { margin-inline-start: 38px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
  .comment--deleted { opacity: .68; }
  .comment--deleted > a { pointer-events: none; }
  .comment__body { min-width: 0; flex: 1; }
  .comment__meta { display: flex; align-items: baseline; gap: 7px; }
  .comment__meta a { font-size: .8rem; font-weight: 790; }
  .comment__meta time { color: var(--faint); font-size: .66rem; }
  .comment__parent { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; margin-top: 4px; color: var(--faint); font-size: .64rem; }
  .comment__parent > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .comment__body > p { margin-top: 3px; color: var(--text-soft); font-size: .84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 5px 0 0 -6px; }
  .comment-action {
    display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 4px 7px; border: 0; border-radius: 9px;
    color: var(--muted); background: transparent; font-size: .64rem; font-weight: 750; line-height: 1; cursor: pointer;
    transition: color .16s, background .16s, transform .16s;
  }
  .comment-action:hover, .comment-action:focus-visible { color: white; background: rgb(255 255 255 / .055); }
  .comment-action:active { transform: scale(.96); }
  .comment-action:disabled { opacity: .54; cursor: wait; }
  .comment-action--like.is-liked { color: #fb7185; }
  .comment-action--like.is-liked svg { fill: currentColor; }
  .comment-action__count { min-width: 1ch; color: inherit; font-variant-numeric: tabular-nums; }
  .comment-action__count:empty { display: none; }
  .comment-action--video { color: var(--text-soft); }
  .comment__controls { display: flex; width: 40px; flex: 0 0 40px; flex-direction: column; align-items: center; gap: 1px; }
  .comment__controls .icon-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .comment__delete { opacity: .36; }
  .comment:hover .comment__delete, .comment__delete:focus-visible { opacity: 1; }
  .comment--skeleton .skeleton-line { margin-top: 9px; }
  .comments-load-more { display: flex; min-height: 58px; align-items: center; justify-content: center; padding: 8px 0 2px; }
  .comments-load-more .button { min-height: 40px; }
  .comments-load-more--error { flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .68rem; text-align: center; }
  .comments-composer-slot { display: contents; }
  .comment-composer { display: grid; gap: 8px; padding: 9px max(15px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(15px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); }
  .comment-composer__row { display: flex; min-width: 0; align-items: end; gap: 9px; }
  .comment-composer__input {
    width: 100%; min-width: 0; min-height: 40px; max-height: 112px; flex: 1; padding: 9px 12px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 13px; outline: 0; color: white; background: var(--surface-2);
    font: inherit; font-size: max(16px, .78rem); line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere;
    caret-color: white; cursor: text; scrollbar-width: none; overscroll-behavior: contain; -webkit-user-select: text; user-select: text;
  }
  .comment-composer__input::-webkit-scrollbar { display: none; }
  .comment-composer__input:empty::before { color: var(--muted); content: attr(data-placeholder); pointer-events: none; }
  .comment-composer__input:focus-visible { border-color: rgb(196 181 253 / .55); box-shadow: 0 0 0 3px rgb(139 92 246 / .11); }
  .comment-composer__input[aria-disabled="true"], .comment-composer__input[contenteditable="false"] { opacity: .68; cursor: not-allowed; }
  .comment-composer__reply-context {
    display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 5px; padding-inline-start: 42px;
    border-radius: 11px; color: var(--text-soft); background: rgb(255 255 255 / .025); font-size: .67rem;
  }
  .comment-composer__reply-context > span { display: flex; min-width: 0; align-items: center; gap: 6px; }
  .comment-composer__reply-context > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .comment-composer__reply-context > .icon-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .comment-composer--disabled { display: flex; min-height: 58px; align-items: center; justify-content: center; color: var(--muted); font-size: .72rem; text-align: center; }
  .comment-composer--disabled svg { flex: 0 0 auto; color: var(--faint); }

  /* Private viewers / insights */
  .viewers-modal { height: min(820px, 86dvh); overflow: hidden; background: linear-gradient(180deg, #17171f, #111117); }
  .viewers-sheet { display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .viewers-sheet__grabber { display: block; width: 42px; height: 4px; margin: 9px auto 0; border-radius: 99px; background: rgb(255 255 255 / .18); }
  .viewers-sheet__heading { padding-top: 14px; }
  .viewers-sheet__heading > div { min-width: 0; }
  .viewers-sheet__heading p { margin-top: 3px; color: var(--muted); font-size: .68rem; }
  .viewers-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 11px 18px 12px; border-bottom: 1px solid var(--line); }
  .viewers-summary__metric { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .025); }
  .viewers-summary__metric > i { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--violet-light); background: var(--gradient-soft); font-style: normal; }
  .viewers-summary__metric--likes > i { color: #fb7185; background: rgb(251 113 133 / .09); }
  .viewers-summary__metric > span { display: grid; min-width: 0; line-height: 1.18; }
  .viewers-summary__metric strong { font-size: .92rem; }
  .viewers-summary__metric small { color: var(--muted); font-size: .63rem; }
  .viewers-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px 13px 14px; }
  .viewer-row { position: relative; display: flex; min-height: 68px; align-items: center; gap: 10px; padding: 8px 4px 8px 6px; border-bottom: 1px solid rgb(255 255 255 / .045); }
  .viewer-row:last-child { border-bottom: 0; }
  .viewer-row__profile { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; border-radius: 12px; }
  .viewer-row__profile:hover .viewer-row__identity strong { color: var(--violet-light); }
  .viewer-row__identity { display: grid; min-width: 0; flex: 1; line-height: 1.22; }
  .viewer-row__identity strong { display: inline-flex; min-width: 0; align-items: center; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
  .viewer-row__identity strong > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .viewer-row__identity small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-row__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; }
  .viewer-row__actions .icon-button { width: 42px; height: 42px; }
  .viewer-row__liked { display: grid; width: 30px; height: 30px; place-items: center; margin-right: 2px; border-radius: 50%; color: #fb7185; background: rgb(251 113 133 / .09); }
  .viewer-row__message:hover { color: var(--violet-light); }
  .viewer-row__menu { top: 52px; right: 4px; z-index: 20; min-width: 216px; }
  .viewer-row__menu button.is-danger { color: #fecdd3; }
  .viewer-row__menu button:disabled { opacity: .4; cursor: default; }
  .viewer-row.is-blocked { opacity: .62; }
  .viewer-row.has-follow-invitation { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .follow-invitation-action { display: flex; min-width: 0; align-items: center; gap: 9px; margin-top: 2px; }
  .viewer-row > .follow-invitation-action { grid-column: 1 / -1; margin-inline-start: 53px; }
  .comment__body > .follow-invitation-action { margin-top: 7px; }
  .follow-invitation-action__button { min-height: 30px; padding-block: 4px; font-size: .64rem; text-align: start; }
  .follow-invitation-action__button:disabled { color: var(--faint); cursor: default; }
  .follow-invitation-action__status { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
  .follow-invitation-action__status[hidden] { display: none; }
  .viewer-row--skeleton { gap: 11px; }
  .viewer-row__skeleton-copy { display: grid; width: min(230px, 54%); gap: 8px; }
  .viewer-row__skeleton-copy .skeleton-line:first-child { width: 72%; }
  .viewer-row__skeleton-copy .skeleton-line:last-child { width: 48%; height: 9px; }
  .viewers-list__empty { min-height: 260px; }
  .viewers-sheet__footer { display: grid; place-items: center; padding: 10px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(21 21 28 / .96); }
  .viewers-sheet__footer[hidden] { display: none; }
  .viewers-sheet__more { width: min(260px, 100%); }

  /* Explore */
  .explore-results { min-height: 400px; }
  .hashtag-page { max-width: 1180px; }
  .hashtag-page__header { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 28px; }
  .hashtag-page__header > div { min-width: 0; }
  .hashtag-page__header h1 { overflow: hidden; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
  .hashtag-page__count { margin-top: 3px; color: var(--muted); font-size: .75rem; }
  .hashtag-page__mark { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgb(167 139 250 / .2); border-radius: 17px; color: #c4b5fd; background: var(--gradient-soft); }
  .hashtag-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; gap: 14px; list-style: none; }
  .hashtag-post-list__item { display: grid; min-width: 0; gap: 6px; }
  .hashtag-post-list__item > time { padding-inline: 3px; color: var(--faint); font-size: .62rem; }
  .hashtag-post-list__item--skeleton .skeleton { min-height: 290px; border-radius: 16px; }
  .hashtag-page__sentinel { display: grid; min-height: 84px; place-items: center; }
  .hashtag-page > .empty-state { min-height: 360px; }
  .people-rail, .hashtag-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .people-rail::-webkit-scrollbar, .hashtag-rail::-webkit-scrollbar { display: none; }
  .person-chip { display: flex; min-width: 210px; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .person-chip:hover { border-color: rgb(139 92 246 / .34); background: var(--surface-2); }
  .person-chip > span:last-child, .person-result > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
  .person-chip strong, .person-chip small, .person-result strong, .person-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .person-chip strong, .person-result strong { font-size: .82rem; }
  .person-chip small, .person-result small { color: var(--muted); font-size: .72rem; }
  .hashtag-chip { display: flex; min-width: 185px; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
  .hashtag-chip__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--violet-light); background: var(--gradient-soft); }
  .hashtag-chip > span:last-child { display: grid; }
  .hashtag-chip strong { font-size: .82rem; }
  .hashtag-chip small { color: var(--muted); font-size: .68rem; }
  .mosaic-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 8px; align-items: start; gap: 8px; }
  .mosaic-tile { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / .075); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 30px rgb(0 0 0 / .14); isolation: isolate; }
  .mosaic-tile__stage { position: relative; width: 100%; overflow: hidden; background: #111118; }
  .mosaic-tile__stage > .content-watermark { z-index: 4; width: clamp(48px, 23%, 74px); }
  .mosaic-tile__stage > .content-watermark--short { width: clamp(23px, 10%, 34px); }
  .mosaic-tile__stage > .content-watermark--top-left { top: 9px; left: 9px; }
  .mosaic-tile__stage > .content-watermark--top-right { top: 9px; right: 9px; }
  .mosaic-tile__stage > .content-watermark--bottom-left { bottom: 9px; left: 9px; }
  .mosaic-tile__stage > .content-watermark--bottom-right { right: 9px; bottom: 9px; }
  .mosaic-tile__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
  .mosaic-tile__open:focus-visible { z-index: 9; outline: 3px solid var(--violet-light); outline-offset: -4px; }
  .mosaic-tile__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / .2), transparent 38%, transparent 52%, rgb(0 0 0 / .82)); pointer-events: none; }
  .mosaic-tile__type { position: absolute; top: 9px; right: 9px; z-index: 3; display: flex; min-height: 28px; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / .13); border-radius: 99px; color: white; background: rgb(5 5 8 / .48); font-size: .61rem; font-weight: 800; text-shadow: 0 1px 5px #000; backdrop-filter: blur(8px); pointer-events: none; }
  .mosaic-tile__repost { position: absolute; top: 9px; left: 9px; z-index: 4; display: inline-flex; max-width: calc(100% - 70px); min-height: 28px; align-items: center; gap: 4px; padding: 4px 7px; overflow: hidden; border: 1px solid rgb(94 234 212 / .2); border-radius: 99px; color: #ccfbf1; background: rgb(5 5 8 / .58); font-size: .59rem; font-weight: 780; text-shadow: 0 1px 5px #000; backdrop-filter: blur(8px); pointer-events: none; }
  .mosaic-tile__repost svg { flex: 0 0 auto; color: #5eead4; }
  .mosaic-tile__repost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mosaic-tile--repost .carousel__counter { top: 43px; right: auto; left: 9px; }
  .mosaic-tile__meta { position: absolute; right: 10px; bottom: 9px; left: 10px; z-index: 3; display: grid; min-width: 0; color: white; text-shadow: 0 2px 8px #000; pointer-events: none; }
  .mosaic-tile__meta > strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .mosaic-tile__caption { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: .64rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mosaic-tile__stats { display: flex; align-items: center; gap: 9px; margin-top: 5px; font-size: .61rem; font-weight: 760; }
  .mosaic-tile__stats > span { display: flex; align-items: center; gap: 3px; }
  .mosaic-tile .carousel__counter { top: 9px; right: auto; left: 9px; }
  .mosaic-tile .carousel__dots { display: none; }
  .mosaic-tile:hover .carousel img, .mosaic-tile:hover .carousel video { transform: scale(1.025); }
  .mosaic-tile .carousel img, .mosaic-tile .carousel video { transition: transform .35s var(--ease); }
  .explore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .explore-tile { border-radius: 14px; }
  .explore-results > .explore-tile { display: inline-block; min-height: 240px; margin: 4px; }

  /* Create */
  .create-page { max-width: 1120px; }
  .create-intent-page { max-width: 980px; }
  .create-intent-page__heading { margin-bottom: clamp(24px, 5vw, 46px); }
  .create-intent-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .create-intent-card {
    position: relative; display: grid; min-height: 290px; grid-template-rows: auto 1fr auto; align-items: start; gap: 22px;
    overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 24px; color: var(--text);
    background: radial-gradient(circle at 90% 8%, rgb(66 133 244 / .16), transparent 36%), var(--surface);
    box-shadow: 0 18px 50px rgb(0 0 0 / .18); transition: border-color .22s, box-shadow .22s, transform .22s var(--ease);
  }
  .create-intent-card::before { position: absolute; inset: auto -35% -48% 15%; height: 65%; border-radius: 50%; background: rgb(66 133 244 / .07); filter: blur(22px); content: ""; pointer-events: none; }
  .create-intent-card--video { background: radial-gradient(circle at 90% 8%, rgb(52 168 83 / .13), transparent 36%), var(--surface); }
  .create-intent-card--story { background: radial-gradient(circle at 90% 8%, rgb(56 189 248 / .17), transparent 36%), var(--surface); }
  .create-intent-card:hover { border-color: rgb(138 180 248 / .4); box-shadow: 0 24px 64px rgb(0 0 0 / .28); transform: translateY(-4px); }
  .create-intent-card__number { color: var(--faint); font-size: .66rem; font-weight: 820; letter-spacing: .15em; }
  .create-intent-card__icon { display: grid; width: 72px; height: 72px; place-items: center; align-self: center; border: 1px solid rgb(255 255 255 / .1); border-radius: 22px; color: white; background: var(--gradient); box-shadow: 0 18px 38px rgb(66 133 244 / .22), inset 0 1px rgb(255 255 255 / .2); }
  .create-intent-card--video .create-intent-card__icon { background: linear-gradient(145deg, #2f6fda, #258454); }
  .create-intent-card--story .create-intent-card__icon { background: linear-gradient(145deg, #2f6fda, #0ea5e9); }
  .create-intent-card__copy { position: relative; z-index: 1; display: grid; min-width: 0; gap: 7px; padding-right: 30px; }
  .create-intent-card__copy strong { font-size: 1.28rem; letter-spacing: -.025em; }
  .create-intent-card__copy small { color: var(--muted); font-size: .72rem; line-height: 1.5; }
  .create-intent-card__arrow { position: absolute; right: 20px; bottom: 21px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--text-soft); background: rgb(255 255 255 / .055); transition: background .2s, transform .2s; }
  .create-intent-card:hover .create-intent-card__arrow { background: rgb(66 133 244 / .18); transform: translateX(3px); }
  .create-intent-page__note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 24px; color: var(--faint); font-size: .7rem; text-align: center; }
  .create-intent-page__note svg { flex: 0 0 auto; color: var(--violet-light); }
  .create-page__change { flex: 0 0 auto; }
  .create-composer { display: grid; gap: 22px; }
  .composer-grid { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(320px, 1.05fr); gap: clamp(20px, 4vw, 48px); }
  .composer-media { position: relative; min-height: 550px; }
  .upload-dropzone { display: flex; width: 100%; height: 100%; min-height: 550px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 1px dashed rgb(66 133 244 / .4); border-radius: 24px; color: var(--text-soft); background: radial-gradient(circle at center, rgb(66 133 244 / .1), transparent 58%), var(--surface); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
  .upload-dropzone:hover, .upload-dropzone.is-dragging { border-color: var(--violet-light); background: radial-gradient(circle at center, rgb(66 133 244 / .16), transparent 62%), var(--surface-2); transform: translateY(-2px); }
  .upload-dropzone__icon { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 16px; border-radius: 20px; color: white; background: var(--gradient); box-shadow: 0 18px 40px rgb(66 133 244 / .22); }
  .upload-dropzone strong { font-size: 1.05rem; }
  .upload-dropzone > span:not(.upload-dropzone__icon) { margin-top: 3px; color: var(--muted); }
  .upload-dropzone small { margin-top: 14px; color: var(--faint); }
  .upload-preview { display: grid; min-height: 550px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; gap: 8px; }
  .upload-item, .upload-add { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .upload-item--single, .upload-item--featured { grid-column: 1 / -1; grid-row: span 2; }
  .upload-item > img, .upload-item > video { width: 100%; height: 100%; object-fit: cover; }
  .upload-item__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .5), transparent 35%, transparent 65%, rgb(0 0 0 / .45)); pointer-events: none; }
  .upload-item__index { position: absolute; top: 10px; left: 10px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); font-size: .67rem; font-weight: 800; }
  .upload-item__remove { position: absolute; top: 6px; right: 6px; background: rgb(0 0 0 / .45); }
  .upload-item__order { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 2px; border-radius: 99px; background: rgb(0 0 0 / .45); }
  .upload-item__order .icon-button { width: 32px; height: 32px; }
  .upload-add { display: grid; min-height: 120px; place-content: center; justify-items: center; gap: 5px; color: var(--muted); cursor: pointer; }
  .composer-fields { display: flex; flex-direction: column; gap: 24px; padding-block: 8px; }
  .form-section { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .format-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .format-picker__item { display: grid; min-height: 76px; place-content: center; justify-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); font-size: .68rem; font-weight: 720; cursor: pointer; }
  .format-picker__item.is-active { border-color: rgb(66 133 244 / .5); color: white; background: var(--gradient-soft); }
  .animation-picker-section { display: grid; gap: 12px; }
  .animation-picker__heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .animation-picker__heading p { margin-top: 2px; color: var(--muted); font-size: .68rem; }
  .animation-picker__replay { min-height: 34px; flex: 0 0 auto; padding: 6px 11px; font-size: .66rem; }
  .animation-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .animation-picker__item { display: grid; min-width: 0; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; transition: border-color .18s, color .18s, background .18s, transform .18s; }
  .animation-picker__item:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text-soft); transform: translateY(-1px); }
  .animation-picker__item.is-active { border-color: rgb(66 133 244 / .5); color: white; background: var(--gradient-soft); }
  .animation-picker__item:disabled { opacity: .45; cursor: not-allowed; }
  .animation-picker__sample { position: relative; display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 9px; background: #0e0e16; }
  .animation-picker__sample > span { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(145deg, var(--violet), var(--pink) 66%, #fb7185); box-shadow: 0 5px 15px rgb(139 92 246 / .22); }
  .animation-picker__item.is-active .animation-picker__sample--fade > span { animation: mixSampleFade 1.6s ease-in-out infinite; }
  .animation-picker__item.is-active .animation-picker__sample--slide-up > span { animation: mixSampleSlideUp 1.6s var(--ease) infinite; }
  .animation-picker__item.is-active .animation-picker__sample--zoom-in > span { animation: mixSampleZoomIn 1.8s var(--ease) infinite; }
  .animation-picker__item.is-active .animation-picker__sample--zoom-loop > span { animation: mixSampleZoomLoop 1.8s ease-in-out infinite alternate; }
  .animation-picker__item.is-active .animation-picker__sample--pan-loop > span { animation: mixSamplePanLoop 2.2s ease-in-out infinite alternate; }
  .animation-picker__copy { display: grid; min-width: 0; line-height: 1.2; }
  .animation-picker__copy strong, .animation-picker__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .animation-picker__copy strong { font-size: .67rem; }
  .animation-picker__copy small { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .animation-picker__note { color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .composer-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .composer-submit { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; }
  .composer-hint { max-width: 280px; color: var(--faint); font-size: .72rem; }
  .music-picker { display: grid; gap: 13px; }
  .music-picker__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .music-picker__heading > div:first-child { display: flex; min-width: 0; align-items: center; gap: 10px; }
  .music-picker__heading h2 { font-size: .93rem; letter-spacing: -.015em; }
  .music-picker__heading p { margin-top: 1px; color: var(--muted); font-size: .7rem; font-weight: 500; }
  .music-picker__icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--violet-light); background: var(--gradient-soft); }
  .music-picker__badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgb(52 211 153 / .2); border-radius: 99px; color: #a7f3d0; background: rgb(52 211 153 / .07); font-size: .58rem; font-weight: 760; }
  .music-picker__library { display: grid; gap: 8px; }
  .music-picker__search { width: 100%; }
  .music-picker__status { min-height: 18px; color: var(--faint); font-size: .66rem; }
  .music-library-list { display: grid; max-height: 330px; gap: 5px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
  .music-track { display: grid; min-height: 66px; grid-template-columns: 48px 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / .018); transition: border-color .18s, background .18s; }
  .music-track:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .035); }
  .music-track.is-selected { border-color: rgb(139 92 246 / .42); background: var(--gradient-soft); }
  .music-track__cover { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
  .music-track__cover--placeholder { display: grid; place-items: center; color: var(--violet-light); background: linear-gradient(145deg, #302153, #511f42); }
  .music-track__play { width: 36px; height: 36px; border-color: var(--line); background: var(--surface-2); }
  .music-track__copy { display: grid; min-width: 0; line-height: 1.25; }
  .music-track__copy > strong, .music-track__copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music-track__copy > strong { color: white; font-size: .77rem; }
  .music-track__copy > span { color: var(--text-soft); font-size: .68rem; }
  .music-track__copy > small:not(.music-attribution) { margin-top: 2px; color: var(--faint); font-size: .58rem; }
  .music-track__choose { min-height: 34px; padding-inline: 11px; font-size: .68rem; }
  .music-track--skeleton { height: 66px; }
  .music-library-list__empty { display: grid; min-height: 105px; place-content: center; justify-items: center; gap: 5px; padding: 18px; color: var(--muted); font-size: .72rem; text-align: center; }
  .music-attribution { display: flex; min-width: 0; align-items: center; gap: 5px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 530; }
  .music-attribution svg { flex: 0 0 auto; color: var(--success); }
  .music-attribution__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music-attribution__link { flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 99px; color: var(--text-soft); white-space: nowrap; }
  .music-attribution__link:hover { border-color: var(--line-strong); color: white; text-decoration: none; }
  .music-attribution--expanded { flex-wrap: wrap; margin-top: 9px; overflow: visible; }
  .music-attribution--expanded .music-attribution__text { flex: 1 1 180px; white-space: normal; }
  .music-selection { display: grid; gap: 11px; padding: 12px; border: 1px solid rgb(139 92 246 / .32); border-radius: 15px; background: linear-gradient(135deg, rgb(139 92 246 / .11), rgb(236 72 153 / .05)); }
  .music-selection__summary { display: flex; min-width: 0; align-items: center; gap: 10px; }
  .music-selection__art { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 11px; color: white; background: var(--gradient); }
  .music-selection__art img { width: 100%; height: 100%; object-fit: cover; }
  .music-selection__copy { display: grid; min-width: 0; flex: 1; line-height: 1.22; }
  .music-selection__copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music-selection__copy small { color: var(--violet-light); font-size: .57rem; font-weight: 760; text-transform: uppercase; }
  .music-selection__copy strong { font-size: .79rem; }
  .music-selection__copy span { color: var(--muted); font-size: .67rem; }
  .music-selection__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .music-selection__controls label { display: grid; gap: 5px; }
  .music-selection__controls label > span { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .63rem; font-weight: 680; }
  .music-selection__controls output { color: var(--text-soft); font-variant-numeric: tabular-nums; }
  .music-selection input[type="range"] { width: 100%; accent-color: var(--violet); }
  .music-admin { overflow: hidden; border: 1px solid rgb(167 139 250 / .22); border-radius: 14px; background: rgb(139 92 246 / .035); }
  .music-admin > summary { display: flex; min-height: 54px; align-items: center; gap: 10px; padding: 9px 12px; color: var(--text-soft); cursor: pointer; list-style: none; }
  .music-admin > summary::-webkit-details-marker { display: none; }
  .music-admin > summary > span:nth-child(2) { display: grid; flex: 1; line-height: 1.2; }
  .music-admin > summary strong { color: white; font-size: .76rem; }
  .music-admin > summary small { color: var(--violet-light); font-size: .57rem; font-weight: 760; text-transform: uppercase; }
  .music-admin > summary > svg { transition: transform .2s; }
  .music-admin[open] > summary > svg { transform: rotate(180deg); }
  .music-admin__summary-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--violet-light); background: var(--gradient-soft); }
  .music-admin__tabs { max-width: calc(100% - 24px); margin: 0 12px 12px; overflow-x: auto; scrollbar-width: none; }
  .music-admin__tabs::-webkit-scrollbar { display: none; }
  .music-admin__tabs .segmented__item { flex: 0 0 auto; white-space: nowrap; }
  .music-admin__body { padding: 14px; border-top: 1px solid var(--line); background: rgb(9 9 13 / .35); }
  .music-admin-form { display: grid; gap: 12px; }
  .music-admin-form > .button { justify-self: end; }
  .music-admin-file__control { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 10px; }
  .music-admin-file__control .button { flex: 0 0 auto; }
  .music-admin-file__name { min-width: 120px; flex: 1; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .music-admin__notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border: 1px solid rgb(56 189 248 / .16); border-radius: 11px; color: var(--muted); background: rgb(56 189 248 / .05); font-size: .67rem; }
  .music-admin__notice svg { flex: 0 0 auto; margin-top: 1px; color: var(--cyan); }
  .music-admin__notice strong { color: var(--text-soft); }
  .music-admin__rights { padding: 3px 1px; }
  .music-admin__rights span { line-height: 1.4; }
  .music-provider { display: grid; gap: 12px; }
  .music-provider__search { display: flex; gap: 8px; }
  .music-provider__search input { min-width: 0; flex: 1; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: var(--surface-2); }
  .music-provider__search input:focus { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); }
  .music-provider__audit { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(240px, 1.28fr); gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
  .music-provider__audit .music-admin__rights { grid-column: 1 / -1; }
  .music-provider__results { display: grid; max-height: 360px; gap: 6px; overflow-y: auto; }
  .music-provider-result { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
  .music-provider-result .button { min-height: 34px; padding-inline: 11px; font-size: .68rem; }
  .music-manager { display: grid; gap: 12px; }
  .music-manager__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr) auto; gap: 8px; }
  .music-manager__controls > input, .music-manager__controls > select { min-width: 0; min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: var(--surface-2); }
  .music-manager__controls > select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
  .music-manager__controls > input:focus, .music-manager__controls > select:focus { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); }
  .music-manager__summary { min-height: 17px; color: var(--faint); font-size: .65rem; }
  .music-manager__list { display: grid; max-height: 470px; gap: 7px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
  .music-manager__more { justify-self: center; }
  .music-manager-track { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / .018); }
  .music-manager-track__main, .music-manager-track__title { display: grid; min-width: 0; }
  .music-manager-track__title { line-height: 1.25; }
  .music-manager-track__title strong, .music-manager-track__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .music-manager-track__title strong { color: white; font-size: .78rem; }
  .music-manager-track__title > span { color: var(--muted); font-size: .67rem; }
  .music-manager-track__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .music-status, .music-source { padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--faint); font-size: .54rem; font-weight: 760; }
  .music-status--approved { border-color: rgb(52 211 153 / .26); color: #a7f3d0; background: rgb(52 211 153 / .07); }
  .music-status--draft { border-color: rgb(251 191 36 / .24); color: #fde68a; background: rgb(251 191 36 / .06); }
  .music-status--archived { color: var(--muted); background: rgb(255 255 255 / .025); }
  .music-manager-track__actions { display: flex; max-width: 250px; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .music-manager-track__actions .button { min-height: 32px; gap: 5px; padding-inline: 9px; font-size: .62rem; }
  .music-manager-track__archive { color: #fda4af; }
  .music-manager-track--skeleton { min-height: 112px; }
  .music-rights-dialog { padding: 32px; }
  .music-rights-dialog > .confirm-dialog__icon { margin: 0 auto 15px; }
  .music-rights-dialog h2 { text-align: center; }
  .music-rights-dialog__track { margin-top: 8px; color: var(--muted); text-align: center; }
  .music-rights-dialog__track strong { color: white; }
  .music-rights-dialog__note { margin: 16px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgb(255 255 255 / .02); font-size: .7rem; line-height: 1.4; }
  .music-rights-dialog .music-attribution { justify-content: center; }
  .music-rights-dialog .music-admin__rights { margin: 14px 0 20px; }
  .music-edit-form { display: grid; gap: 13px; padding: 30px; }
  .music-edit-form > header { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
  .music-edit-form > header .confirm-dialog__icon { width: 46px; height: 46px; flex: 0 0 auto; margin: 0; }
  .music-edit-form > header p { margin-top: 2px; color: var(--muted); font-size: .68rem; text-transform: capitalize; }
  .music-edit-form textarea { resize: vertical; }
  .music-edit-dialog__feedback:empty { display: none; }
  .create-page.is-story .post-only { display: none; }
  .create-page.is-story .composer-media { max-width: 400px; }
  .create-page.is-story .upload-dropzone, .create-page.is-story .upload-preview { aspect-ratio: 9 / 16; min-height: auto; }
  .create-composer.is-uploading::after { position: fixed; top: 0; right: 0; left: 0; z-index: 80; height: 2px; background: var(--gradient); animation: uploadProgress 1.2s ease-in-out infinite; content: ""; transform-origin: left; }

  /* Messages */
  .messages-page { display: grid; height: 100dvh; grid-template-columns: 350px minmax(0, 1fr); }
  .conversation-sidebar { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--line); background: var(--bg-soft); }
  .conversation-sidebar__header { display: flex; min-height: 92px; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
  .conversation-sidebar__header h1 { font-size: 1.45rem; letter-spacing: -.035em; }
  .conversation-list { overflow-y: auto; padding: 8px; }
  .conversation-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 13px; }
  .conversation-row:hover { background: rgb(255 255 255 / .04); }
  .conversation-row.is-active { background: var(--gradient-soft); }
  .conversation-row__avatar { position: relative; }
  .online-dot { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid var(--bg-soft); border-radius: 50%; background: var(--success); }
  .conversation-row__content { display: grid; min-width: 0; flex: 1; gap: 2px; }
  .conversation-row__top, .conversation-row__bottom { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
  .conversation-row__top strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-row__top time { flex: 0 0 auto; color: var(--faint); font-size: .62rem; }
  .conversation-row__bottom > span { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-row__bottom b { display: grid; min-width: 18px; height: 18px; place-items: center; padding-inline: 4px; border-radius: 99px; background: var(--gradient); font-size: .58rem; }
  .conversation-row--skeleton { min-height: 70px; }
  .conversation-list__empty { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; padding: 22px; color: var(--muted); text-align: center; }
  .conversation-list__empty svg { margin-bottom: 10px; color: var(--faint); }
  .chat-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 0%, rgb(139 92 246 / .055), transparent 45%), var(--bg); }
  .chat-header { display: flex; min-height: 72px; align-items: center; gap: 9px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgb(9 9 13 / .78); backdrop-filter: blur(14px); }
  .chat-header__back { display: none; }
  .chat-header__back--vault { display: grid; }
  .chat-header__person { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 9px; overflow: hidden; }
  .chat-header__person > span:last-child { display: grid; min-width: 0; overflow: hidden; line-height: 1.25; }
  .chat-header__person strong, .chat-header__person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-header__person small { color: var(--muted); font-size: .7rem; }
  .message-list { display: flex; min-height: 0; flex-direction: column; gap: 5px; overflow-y: auto; padding: 24px clamp(20px, 6vw, 80px); }
  .message-day { display: flex; align-items: center; justify-content: center; padding: 10px; }
  .message-day span { padding: 4px 10px; border-radius: 99px; color: var(--faint); background: var(--surface); font-size: .64rem; }
  .message-bubble { position: relative; width: max-content; max-width: min(72%, 600px); padding: 9px 12px 5px; border-radius: 15px; }
  .message-bubble.is-mine { align-self: flex-end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, #6946c5, #9c3474); }
  .message-bubble.is-theirs { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--surface-2); }
  .message-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; }
  .message-bubble footer { display: flex; align-items: center; justify-content: end; gap: 4px; color: rgb(255 255 255 / .55); font-size: .56rem; }
  .message-bubble footer .is-read { color: #bae6fd; }
  .message-bubble__delete { position: absolute; top: 50%; right: calc(100% + 4px); display: grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px; place-items: center; border-radius: 50%; opacity: 0; color: var(--muted); background: var(--surface-2); cursor: pointer; transform: translateY(-50%); transition: opacity .2s, color .2s; }
  .message-bubble:hover .message-bubble__delete, .message-bubble__delete:focus-visible { opacity: 1; }
  .message-bubble__delete:hover { color: var(--danger); }
  .message-composer { display: flex; align-items: end; gap: 9px; padding: 12px clamp(18px, 6vw, 80px) 18px; border-top: 1px solid var(--line); background: var(--bg); }
  .message-composer textarea { width: 100%; min-width: 0; min-height: 44px; max-height: 120px; flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 15px; outline: none; color: white; background: var(--surface); resize: none; }
  .chat-empty { display: flex; grid-row: 1 / -1; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
  .chat-empty__icon { display: grid; width: 76px; height: 76px; place-items: center; margin-bottom: 19px; border-radius: 24px; color: var(--violet-light); background: var(--gradient-soft); }
  .chat-empty h2 { font-size: 1.4rem; letter-spacing: -.03em; }
  .chat-empty p { max-width: 470px; margin: 8px auto 20px; color: var(--muted); }
  .new-message { padding: 30px 25px; }
  .new-message h2 { margin: 3px 0 18px; }
  .new-message .search-box { width: 100%; }
  .new-message__results { display: grid; max-height: 440px; gap: 3px; overflow-y: auto; margin-top: 14px; }
  .person-result { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
  .person-result:hover { background: rgb(255 255 255 / .055); }

  /* Profile */
  .profile-page { max-width: 1060px; min-width: 0; padding-top: 16px; overflow-x: clip; }
  .profile-page__toolbar {
    position: sticky; top: 10px; z-index: 18; display: grid; min-height: 54px;
    grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px;
    margin-bottom: 12px; padding: 5px 7px; border: 1px solid var(--line);
    border-radius: 17px; background: rgb(14 14 21 / .88); box-shadow: 0 13px 36px rgb(0 0 0 / .2);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .profile-page__toolbar-spacer { width: 44px; height: 44px; }
  .profile-page__toolbar-title { display: grid; min-width: 0; justify-items: center; line-height: 1.2; text-align: center; }
  .profile-page__toolbar-title strong, .profile-page__toolbar-title small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-page__toolbar-title strong { font-size: .91rem; letter-spacing: -.015em; }
  .profile-page__toolbar-title small { margin-top: 2px; color: var(--faint); font-size: .59rem; font-weight: 650; }
  .profile-page__account-trigger {
    width: min(100%, 420px); min-height: 44px; justify-self: center; padding: 4px 10px;
    border: 1px solid transparent; border-radius: 12px; color: var(--text); background: transparent;
    cursor: pointer; transition: border-color .18s, background .18s;
  }
  .profile-page__account-trigger:hover { border-color: var(--line); background: rgb(255 255 255 / .035); }
  .profile-page__account-trigger:focus-visible { outline: 3px solid rgb(56 189 248 / .32); outline-offset: 2px; }
  .profile-page__account-trigger[aria-expanded="true"] { border-color: var(--line-strong); background: rgb(255 255 255 / .055); }
  .profile-page__account-trigger-main {
    display: grid; width: 100%; min-width: 0; max-width: 100%;
    grid-template-columns: 17px minmax(0, 1fr) 17px; align-items: center; column-gap: 5px;
  }
  .profile-page__account-trigger-main::before { width: 17px; height: 17px; content: ''; }
  .profile-page__account-trigger-main strong {
    grid-column: 2; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  }
  .profile-page__account-trigger-main > svg { grid-column: 3; color: var(--muted); transition: transform .2s var(--ease); }
  .profile-page__account-trigger[aria-expanded="true"] .profile-page__account-trigger-main > svg { transform: rotate(180deg); }
  .profile-page__toolbar-actions { position: relative; display: grid; width: 44px; height: 44px; place-items: center; }
  .profile-page__menu-trigger { width: 44px; height: 44px; border-color: var(--line); background: rgb(255 255 255 / .035); }
  .profile-page__menu-trigger:hover { border-color: var(--line-strong); }
  .profile-cover { height: clamp(170px, 25vw, 260px); border: 1px solid var(--line); border-radius: 24px; background-position: center; background-size: cover; }
  .profile-identity { position: relative; padding: 0 26px 26px; }
  .profile-identity__main { display: flex; align-items: end; gap: 18px; }
  .profile-avatar { position: relative; margin-top: -52px; padding: 5px; border-radius: 50%; background: var(--bg); }
  .profile-avatar > .avatar { border: 1px solid var(--line-strong); }
  .verified-badge { position: absolute; right: 8px; bottom: 8px; display: grid; width: 24px; height: 24px; place-items: center; border: 3px solid var(--bg); border-radius: 50%; background: var(--violet); }
  .profile-title { min-width: 0; flex: 1 1 180px; padding-bottom: 10px; }
  .profile-title h1 { overflow: hidden; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
  .profile-title h1 { display: flex; align-items: center; gap: 8px; }
  .profile-title h1 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .profile-ai-label { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgb(138 180 248 / .25); border-radius: 999px; color: #dbeafe; background: var(--gradient-soft); font-size: .54rem; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
  .profile-title p { color: var(--muted); }
  .profile-actions { position: relative; display: flex; max-width: min(100%, 620px); flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 10px auto; }
  .profile-follow-button { gap: 7px; }
  .profile-follow-button > .icon { flex: 0 0 auto; transition: transform .18s var(--ease); }
  .profile-follow-button[aria-expanded="true"] > .icon { transform: rotate(180deg); }
  .profile-notification-button {
    position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-color: var(--line);
    color: var(--muted); background: rgb(255 255 255 / .025);
  }
  .profile-notification-button:hover { border-color: rgb(138 180 248 / .35); color: #dbeafe; }
  .profile-notification-button.is-active { border-color: rgb(138 180 248 / .42); color: #dbeafe; background: var(--gradient-soft); }
  .profile-actions .button.is-guided {
    position: relative; z-index: 3; border-color: rgb(138 180 248 / .68);
    box-shadow: 0 0 0 4px rgb(66 133 244 / .14), 0 0 34px rgb(66 133 244 / .2);
  }
  .profile-welcome-guide {
    position: relative; z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px;
    margin: 0 26px 18px; padding: 16px; border: 1px solid rgb(138 180 248 / .27); border-radius: 18px;
    background: linear-gradient(135deg, rgb(23 62 120 / .45), rgb(15 20 28 / .96) 62%);
    box-shadow: 0 20px 55px rgb(0 0 0 / .28); animation: profile-guide-enter .28s var(--ease) both;
  }
  .profile-welcome-guide__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #dbeafe; background: var(--gradient); }
  .profile-welcome-guide__copy { min-width: 0; }
  .profile-welcome-guide__copy strong { display: block; color: var(--text); font-size: .88rem; letter-spacing: -.015em; }
  .profile-welcome-guide__copy p { max-width: 620px; margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
  .profile-welcome-guide__actions { display: flex; grid-column: 2; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; }
  .profile-welcome-guide__actions .button { min-height: 38px; padding: 8px 12px; font-size: .66rem; }
  .profile-welcome-guide__actions .text-button { min-height: 38px; padding-inline: 9px; }
  @keyframes profile-guide-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .profile-menu { top: calc(100% + 8px); right: 0; }
  .profile-bio { max-width: 650px; margin-top: 13px; color: var(--text-soft); white-space: pre-wrap; }
  .profile-category { margin-top: 12px; color: var(--muted); font-size: .72rem; font-weight: 720; }
  .profile-details { display: grid; max-width: 700px; gap: 10px; margin-top: 12px; }
  .profile-gender { width: max-content; color: var(--faint); font-size: .65rem; }
  .profile-links, .profile-contact-actions { display: flex; flex-wrap: wrap; gap: 7px; }
  .profile-link, .profile-contact-action { display: inline-flex; min-width: 0; min-height: 38px; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #8ab4f8; background: rgb(255 255 255 / .025); font-size: .67rem; font-weight: 720; }
  .profile-link > span, .profile-contact-action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-brand-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; pointer-events: none; user-select: none; }
  .profile-link:hover, .profile-contact-action:hover { border-color: rgb(138 180 248 / .34); color: white; background: var(--gradient-soft); }
  .profile-link:focus-visible, .profile-contact-action:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .profile-menu-action { color: var(--text-soft); }
  .profile-contact-actions .profile-cta { min-height: 34px; padding: 6px 11px; font-size: .67rem; }
  .profile-since { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--faint); font-size: .72rem; }
  .profile-stats { display: flex; gap: clamp(20px, 5vw, 50px); margin-top: 20px; }
  .profile-stats > span, .profile-stats button { padding: 0; color: inherit; background: none; cursor: default; }
  .profile-stats button { cursor: pointer; }
  .profile-stats > * > span { display: grid; justify-items: start; }
  .profile-stats strong { font-size: 1.02rem; }
  .profile-stats small { color: var(--muted); font-size: .7rem; }
  .profile-content { min-width: 0; max-width: 100%; margin-top: 8px; overflow-x: clip; border-top: 1px solid var(--line); contain: inline-size; }
  .profile-tabs {
    display: flex; width: 100%; max-width: 100%; justify-content: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden; padding-inline: 4px;
    overscroll-behavior-inline: contain; scroll-padding-inline: 4px; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tabs button { position: relative; display: flex; min-height: 55px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 17px; color: var(--muted); background: none; font-size: .76rem; font-weight: 740; white-space: nowrap; cursor: pointer; scroll-snap-align: nearest; }
  .profile-tabs button::before { position: absolute; top: -1px; right: 8px; left: 8px; height: 2px; opacity: 0; background: var(--gradient); content: ""; }
  .profile-tabs button.is-active { color: white; }
  .profile-tabs button.is-active::before { opacity: 1; }
  .profile-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch;
    gap: 8px; padding: 0 8px 24px;
  }
  .profile-grid > .profile-tile {
    width: 100%; min-width: 0; aspect-ratio: 1 / 1; grid-column: auto; grid-row: auto !important;
    border-radius: 11px;
  }
  .profile-grid > .profile-tile .mosaic-tile__stage,
  .profile-grid > .profile-tile[data-content-type="audio"] .mosaic-tile__stage {
    width: 100%; height: 100%; aspect-ratio: 1 / 1 !important;
  }
  .profile-tile .mosaic-tile__meta { align-content: end; }
  .profile-tile .mosaic-tile__stats { margin-top: 0; }
  .profile-grid__empty { display: flex; min-height: 296px; grid-column: 1 / -1; grid-row: auto; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
  .profile-grid__empty > svg { margin-bottom: 12px; color: var(--faint); }
  .profile-grid__empty p { margin: 6px 0 18px; color: var(--muted); }
  .profile-banner { display: flex; min-height: 58px; align-items: center; gap: 10px; margin: 0 26px 18px; padding: 11px 14px; border: 1px solid rgb(138 180 248 / .22); border-radius: 16px; color: var(--text); background: linear-gradient(115deg, rgb(66 133 244 / .12), rgb(52 168 83 / .045)); font-size: .76rem; font-weight: 710; }
  .profile-banner__icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #dbeafe; background: rgb(66 133 244 / .12); }
  .profile-banner > span:nth-child(2) { min-width: 0; flex: 1; }
  .profile-page--compact .profile-cover { height: clamp(130px, 19vw, 190px); }
  .profile-page--compact .profile-identity { padding-bottom: 18px; }

  .profile-editor-modal { width: min(780px, 100%); }
  .profile-editor-modal > .overlay__close { position: sticky; top: max(13px, env(safe-area-inset-top)); float: right; margin: 0 max(13px, env(safe-area-inset-right)) -44px 0; }
  .profile-editor { min-height: 100%; padding: 30px 30px max(32px, env(safe-area-inset-bottom)); }
  .profile-editor__header { padding-right: 50px; }
  .profile-editor__header h2 { margin-top: 3px; font-size: clamp(1.45rem, 4vw, 1.9rem); letter-spacing: -.04em; }
  .profile-editor__header p { margin-top: 5px; color: var(--muted); font-size: .74rem; }
  .profile-editor__preview { position: relative; height: 190px; margin-top: 22px; margin-bottom: 58px; }
  .profile-editor__cover { height: 100%; border: 1px solid var(--line); border-radius: 19px; background: var(--gradient-soft); background-position: center; background-size: cover; }
  .profile-editor__preview > .avatar { position: absolute; bottom: -48px; left: 20px; border: 5px solid var(--surface); }
  .profile-editor__media-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
  .profile-editor__media-action { display: grid; min-width: 0; min-height: 66px; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .profile-editor__media-action:hover { border-color: var(--line-strong); background: var(--surface-3); transform: translateY(-1px); }
  .profile-editor__media-action:focus-visible { outline: 3px solid rgb(56 189 248 / .3); outline-offset: 2px; }
  .profile-editor__media-action-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--text-soft); background: rgb(255 255 255 / .055); }
  .profile-editor__media-action-copy { display: grid; min-width: 0; gap: 3px; }
  .profile-editor__media-action-copy strong { overflow: hidden; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-editor__media-action-copy small { color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .profile-editor__media-action > svg { color: var(--faint); }
  .profile-editor__nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; margin: 0 -30px 18px; padding: 10px 30px; border-block: 1px solid var(--line); background: rgb(21 26 34 / .94); backdrop-filter: blur(18px); scrollbar-width: none; }
  .profile-editor__nav::-webkit-scrollbar { display: none; }
  .profile-editor__nav button { min-height: 36px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .67rem; font-weight: 760; cursor: pointer; }
  .profile-editor__nav button:hover, .profile-editor__nav button:focus-visible { border-color: rgb(138 180 248 / .34); color: white; background: var(--gradient-soft); }
  .profile-editor__section { scroll-margin-top: 68px; padding: 19px; border: 1px solid var(--line); border-radius: 19px; background: rgb(255 255 255 / .018); }
  .profile-editor__section + .profile-editor__section { margin-top: 14px; }
  .profile-editor__section > header h3 { font-size: .95rem; letter-spacing: -.018em; }
  .profile-editor__section > header p { margin-top: 4px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
  .profile-editor__section-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 18px; }
  .profile-editor__section-body > .field--textarea,
  .profile-editor__section-body > .profile-editor__menu-field,
  .profile-editor__section-body > .profile-editor__preference,
  .profile-editor__section-body > .profile-editor__links,
  .profile-editor__section-body > .profile-editor__add-link,
  .profile-editor__section-body > .profile-editor__navigation-row,
  .profile-editor__section-body > .profile-editor__readonly,
  .profile-editor__section-body > .profile-editor__dependent-fields { grid-column: 1 / -1; }
  .profile-editor .field > small { color: var(--faint); font-size: .59rem; font-weight: 520; line-height: 1.4; }
  .profile-editor__menu-help { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; }
  .profile-editor__menu-help a { color: #8ab4f8; font-weight: 760; text-decoration: underline; text-decoration-color: rgb(138 180 248 / .42); text-underline-offset: 2px; }
  .profile-editor__menu-help a:hover { color: white; }
  .profile-editor__menu-help a:focus-visible { border-radius: 3px; outline: 2px solid rgb(56 189 248 / .38); outline-offset: 2px; }
  .profile-editor__field-status { min-height: 15px; }
  .profile-editor__field-status.is-valid { color: #86efac !important; }
  .profile-editor__field-status.is-invalid { color: #fda4af !important; }
  .profile-editor__field-status.is-checking { color: #8ab4f8 !important; }
  .profile-editor__preference { display: flex; width: 100%; min-height: 68px; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
  .profile-editor__preference:hover { border-color: var(--line-strong); background: var(--surface-3); }
  .profile-editor__preference:focus-visible { outline: 3px solid rgb(56 189 248 / .35); outline-offset: 2px; }
  .profile-editor__preference-copy { display: grid; min-width: 0; gap: 3px; }
  .profile-editor__preference-copy strong { font-size: .82rem; }
  .profile-editor__preference-copy small { color: var(--muted); font-size: .68rem; font-weight: 520; line-height: 1.45; }
  .profile-editor__switch { position: relative; width: 44px; height: 25px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface-3); transition: border-color .2s, background .2s; }
  .profile-editor__switch i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); box-shadow: 0 2px 6px rgb(0 0 0 / .25); transition: background .2s, transform .2s; }
  .profile-editor__preference[aria-checked="true"] .profile-editor__switch { border-color: transparent; background: var(--gradient); }
  .profile-editor__preference[aria-checked="true"] .profile-editor__switch i { background: white; transform: translateX(19px); }
  .profile-editor__links { display: grid; gap: 9px; }
  .profile-editor__link-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: end; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
  .profile-editor__link-fields { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr); gap: 10px; }
  .profile-editor__remove-link { width: 38px; height: 38px; color: #fda4af; }
  .profile-editor__add-link { width: max-content; min-height: 40px; }
  .profile-editor__add-link:disabled { opacity: .45; cursor: not-allowed; }
  .profile-editor__dependent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 13px; border: 1px dashed var(--line-strong); border-radius: 14px; }
  .profile-editor__navigation-row, .profile-editor__readonly { display: grid; min-height: 66px; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-2); }
  .profile-editor__navigation-row:hover { border-color: rgb(138 180 248 / .34); background: var(--gradient-soft); }
  .profile-editor__navigation-icon, .profile-editor__readonly-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #dbeafe; background: var(--gradient-soft); }
  .profile-editor__navigation-row > span:nth-child(2), .profile-editor__readonly > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
  .profile-editor__navigation-row strong, .profile-editor__readonly strong { font-size: .76rem; }
  .profile-editor__navigation-row small, .profile-editor__readonly small { color: var(--muted); font-size: .63rem; line-height: 1.4; }
  .profile-editor__readonly-state { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font-size: .56rem; font-weight: 780; }
  .profile-editor__readonly-state.is-active { border-color: rgb(56 189 248 / .3); color: #bae6fd; background: rgb(56 189 248 / .08); }
  .profile-editor__footer { position: sticky; bottom: calc(-1 * max(32px, env(safe-area-inset-bottom))); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px -30px calc(-1 * max(32px, env(safe-area-inset-bottom))); padding: 13px 30px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(21 26 34 / .95); backdrop-filter: blur(18px); }
  .profile-editor__footer p { color: var(--faint); font-size: .61rem; }
  .profile-editor__footer .button { flex: 0 0 auto; }

  .profile-tools-modal { width: min(620px, 100%); }
  .profile-tools { min-height: 100%; padding: 30px 26px max(30px, env(safe-area-inset-bottom)); }
  .profile-tools__heading { display: flex; align-items: flex-start; gap: 12px; padding-right: 42px; }
  .profile-tools__heading-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #dbeafe; background: var(--gradient-soft); }
  .profile-tools__heading > div { min-width: 0; }
  .profile-tools__heading h2 { margin-top: 3px; font-size: clamp(1.3rem, 4vw, 1.72rem); letter-spacing: -.04em; line-height: 1.08; }
  .profile-tools__heading p { margin-top: 5px; color: var(--muted); font-size: .72rem; }
  .profile-tools__search { width: 100%; margin-top: 22px; background: var(--surface-2); }
  .profile-tools__results { display: grid; gap: 20px; margin-top: 22px; }
  .profile-tools__section > h3 { margin: 0 4px 7px; color: var(--faint); font-size: .64rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
  .profile-tools__list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .018); }
  .profile-tools__item { display: grid; width: 100%; min-height: 67px; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 11px; padding: 10px 12px; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: color .18s, background .18s; }
  .profile-tools__item + .profile-tools__item { border-top: 1px solid var(--line); }
  .profile-tools__item:hover, .profile-tools__item:focus-visible { color: white; background: rgb(255 255 255 / .045); }
  .profile-tools__item:focus-visible { position: relative; outline: 3px solid rgb(56 189 248 / .34); outline-offset: -3px; }
  .profile-tools__item-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--violet-light); background: var(--gradient-soft); }
  .profile-tools__item-copy { display: grid; min-width: 0; gap: 3px; }
  .profile-tools__item-copy strong, .profile-tools__item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-tools__item-copy strong { font-size: .8rem; }
  .profile-tools__item-copy small { color: var(--muted); font-size: .64rem; }
  .profile-tools__item-chevron { display: grid; place-items: center; color: var(--faint); }
  .profile-tools__item.is-danger { grid-template-columns: 42px minmax(0, 1fr); color: #fecdd3; }
  .profile-tools__item.is-danger .profile-tools__item-icon { color: #fda4af; background: rgb(244 63 94 / .09); }
  .profile-tools__empty { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; padding: 25px; border: 1px dashed var(--line-strong); border-radius: 17px; text-align: center; }
  .profile-tools__empty > span { display: grid; width: 51px; height: 51px; margin-bottom: 12px; place-items: center; border-radius: 16px; color: var(--faint); background: var(--surface-2); }
  .profile-tools__empty strong { font-size: .88rem; }
  .profile-tools__empty p { max-width: 360px; margin-top: 5px; color: var(--muted); font-size: .68rem; line-height: 1.45; }

  .account-switcher-modal { width: min(620px, 100%); overflow: hidden; }
  .account-switcher {
    display: grid; min-height: min(650px, 82dvh); grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
    padding: 27px 22px max(22px, env(safe-area-inset-bottom));
  }
  .account-switcher__heading { display: flex; align-items: flex-start; gap: 12px; padding: 0 44px 17px 3px; }
  .account-switcher__heading-icon {
    display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center;
    border: 1px solid var(--line); border-radius: 14px; color: var(--text-soft); background: var(--surface-2);
  }
  .account-switcher__heading > div { min-width: 0; }
  .account-switcher__heading h2 { margin-top: 3px; font-size: clamp(1.28rem, 4vw, 1.68rem); letter-spacing: -.04em; }
  .account-switcher__status { min-height: 29px; padding: 7px 5px; color: var(--muted); font-size: .66rem; line-height: 1.4; }
  .account-switcher__status.is-error { color: #fecdd3; }
  .account-switcher__list {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line);
    margin: 0; padding: 0; border-radius: 17px; background: rgb(255 255 255 / .018);
    list-style: none; scrollbar-width: thin;
  }
  .account-switcher__list[aria-busy="true"] { opacity: .72; }
  .account-switcher__item + .account-switcher__item { border-top: 1px solid var(--line); }
  .account-switcher__account {
    display: grid; width: 100%; min-height: 78px; grid-template-columns: 54px minmax(0, 1fr) 34px;
    align-items: center; gap: 12px; padding: 11px 13px; color: var(--text); background: transparent;
    text-align: left; cursor: pointer; transition: background .18s, color .18s;
  }
  .account-switcher__account:hover:not(:disabled), .account-switcher__account:focus-visible { background: rgb(255 255 255 / .045); }
  .account-switcher__account:focus-visible { position: relative; z-index: 1; outline: 3px solid rgb(56 189 248 / .34); outline-offset: -3px; }
  .account-switcher__account:disabled { opacity: 1; cursor: default; }
  .account-switcher__account.is-current { background: linear-gradient(100deg, rgb(66 133 244 / .09), rgb(255 255 255 / .018) 60%); }
  .account-switcher__account > .avatar { width: 54px; height: 54px; border: 1px solid var(--line-strong); }
  .account-switcher__account-copy { display: grid; min-width: 0; gap: 5px; }
  .account-switcher__account-copy strong, .account-switcher__account-copy small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-switcher__account-copy strong { font-size: .84rem; letter-spacing: -.01em; }
  .account-switcher__account-copy small { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--muted); font-size: .66rem; }
  .account-switcher__account-copy small i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #fb7185; }
  .account-switcher__current {
    display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%;
    color: white; background: #4285f4; box-shadow: 0 6px 16px rgb(66 133 244 / .22);
  }
  .account-switcher__chevron { display: grid; place-items: center; color: var(--faint); }
  .account-switcher__retry { width: max-content; min-height: 34px; margin: 10px auto 0; padding: 6px 11px; font-size: .62rem; }
  .account-switcher__footer { padding-top: 13px; }
  .account-switcher__add {
    display: grid; width: 100%; min-height: 61px; grid-template-columns: 39px minmax(0, 1fr) 22px;
    align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px;
    color: var(--text); background: var(--surface-2); font-size: .76rem; font-weight: 760;
    transition: border-color .18s, background .18s, transform .18s;
  }
  .account-switcher__add:hover { border-color: var(--line-strong); background: var(--surface-3); transform: translateY(-1px); }
  .account-switcher__add:focus-visible { outline: 3px solid rgb(56 189 248 / .34); outline-offset: 2px; }
  .account-switcher__add-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: var(--text-soft); background: rgb(255 255 255 / .055); }
  .account-switcher__add > svg { color: var(--faint); }
  .account-switcher.is-switching .account-switcher__add { opacity: .45; pointer-events: none; }
  .people-sheet { padding: 30px 22px; }
  .people-sheet h2 { margin: 3px 0 15px; }
  .people-sheet__list { display: grid; max-height: 58dvh; overflow-y: auto; }

  /* Dashboard */
  .dashboard-page { max-width: 1240px; }
  .watermark-admin { padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(167 139 250 / .2); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgb(139 92 246 / .12), transparent 36%), var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .16); }
  .watermark-admin__heading { align-items: flex-start; margin-bottom: 20px; }
  .watermark-admin__heading .eyebrow { color: var(--violet-light); }
  .watermark-admin__state { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgb(0 0 0 / .18); font-size: .62rem; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
  .watermark-admin__state.is-active { border-color: rgb(52 211 153 / .24); color: #a7f3d0; background: rgb(52 211 153 / .08); }
  .watermark-admin__layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: clamp(20px, 4vw, 42px); align-items: start; }
  .watermark-admin__form-wrap { min-width: 0; }
  .watermark-admin__loading { display: flex; min-height: 250px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .76rem; }
  .watermark-admin__loading[hidden] { display: none; }
  .watermark-admin__loading .spinner { width: 22px; height: 22px; }
  .watermark-admin__controls { display: grid; gap: 17px; }
  .watermark-admin__controls[hidden] { display: none; }
  .watermark-admin__master { padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--text-soft); background: rgb(255 255 255 / .025); font-weight: 740; }
  .watermark-admin__opacity > span { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .watermark-admin__opacity input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--violet); }
  .watermark-admin__opacity-value { color: var(--violet-light); font-size: .72rem; font-weight: 820; }
  .watermark-admin__surfaces { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0; border: 0; }
  .watermark-admin__surfaces-label { grid-column: 1 / -1; margin-bottom: 3px; color: var(--muted); font-size: .67rem; }
  .watermark-admin__surface { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgb(255 255 255 / .018); }
  .watermark-admin__surface > span { overflow: hidden; color: var(--text-soft); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
  .watermark-admin__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 3px; }
  .watermark-admin__actions p { max-width: 390px; color: var(--faint); font-size: .67rem; line-height: 1.45; }
  .watermark-admin__actions .button { flex: 0 0 auto; }
  .watermark-admin__feedback:empty { display: none; }
  .watermark-admin__success { color: #a7f3d0; font-size: .72rem; }
  .watermark-admin__preview { position: relative; width: min(100%, 330px); aspect-ratio: 4 / 5; justify-self: end; overflow: hidden; border: 1px solid rgb(255 255 255 / .12); border-radius: 20px; background: radial-gradient(circle at 25% 25%, rgb(56 189 248 / .62), transparent 27%), radial-gradient(circle at 72% 38%, rgb(236 72 153 / .58), transparent 34%), linear-gradient(150deg, #24154a 0%, #111827 48%, #42162d 100%); box-shadow: 0 22px 48px rgb(0 0 0 / .28); isolation: isolate; }
  .watermark-admin__preview::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 48%, rgb(0 0 0 / .64)); content: ""; pointer-events: none; }
  .watermark-admin__preview-glow { position: absolute; top: 17%; left: 16%; width: 48%; aspect-ratio: 1; border-radius: 42% 58% 66% 34%; background: linear-gradient(145deg, rgb(255 255 255 / .28), rgb(255 255 255 / .035)); box-shadow: 65px 76px 0 -12px rgb(255 255 255 / .08); transform: rotate(18deg); }
  .watermark-admin__preview-copy { position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 3; display: grid; color: white; text-shadow: 0 2px 8px #000; }
  .watermark-admin__preview-copy strong { font-size: .78rem; }
  .watermark-admin__preview-copy small { margin-top: 3px; color: rgb(255 255 255 / .7); font-size: .63rem; }
  .watermark-admin__preview > .content-watermark { z-index: 4; }
  .watermark-admin__preview-state { position: absolute; top: 12px; left: 12px; z-index: 5; padding: 5px 8px; border: 1px solid rgb(255 255 255 / .13); border-radius: 999px; color: white; background: rgb(0 0 0 / .32); font-size: .55rem; font-weight: 780; backdrop-filter: blur(8px); }
  .watermark-admin__preview.is-disabled > .content-watermark { filter: grayscale(.35) drop-shadow(0 2px 7px rgb(0 0 0 / .34)); }
  .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .metric-card { position: relative; display: grid; min-height: 130px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgb(255 255 255 / .035), transparent), var(--surface); }
  .metric-card::after { position: absolute; inset: auto -35px -60px auto; width: 110px; height: 110px; border-radius: 50%; background: rgb(139 92 246 / .1); filter: blur(20px); content: ""; }
  .metric-card__icon { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: 10px; border-radius: 11px; color: var(--violet-light); background: var(--gradient-soft); }
  .metric-card__label { color: var(--muted); font-size: .72rem; }
  .metric-card strong { margin-top: 1px; font-size: 1.65rem; letter-spacing: -.04em; }
  .metric-card small { position: absolute; top: 18px; right: 16px; font-size: .64rem; font-weight: 780; }
  .is-positive { color: var(--success); }
  .is-negative { color: var(--danger); }
  .chart-card { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .chart-legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .7rem; }
  .chart-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
  .chart-wrap { position: relative; min-height: 240px; }
  .chart-wrap canvas { width: 100%; }
  .chart-empty { position: absolute; top: 50%; right: 0; left: 0; color: var(--muted); font-size: .78rem; text-align: center; }
  .content-performance { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .performance-table { overflow-x: auto; }
  .performance-table__head, .performance-table__row { display: grid; min-width: 820px; grid-template-columns: minmax(280px, 1.7fr) repeat(5, minmax(78px, .55fr)); align-items: center; gap: 14px; }
  .performance-table__head { padding: 8px 12px; color: var(--faint); font-size: .64rem; font-weight: 760; text-transform: uppercase; }
  .performance-table__row { min-height: 70px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: .76rem; }
  .performance-table__row:hover { background: rgb(255 255 255 / .025); }
  .performance-table__content { display: flex; min-width: 0; align-items: center; gap: 10px; }
  .performance-table__content img, .performance-table__placeholder { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--surface-3); object-fit: cover; }
  .performance-table__content > span:last-child { display: grid; min-width: 0; }
  .performance-table__content strong, .performance-table__content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .performance-table__content strong { color: white; font-size: .76rem; }
  .performance-table__content small { color: var(--faint); font-size: .65rem; }
  .content-performance__empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
  .content-performance__empty svg { margin-bottom: 10px; color: var(--faint); }
  .content-performance__empty .button { margin-top: 14px; }
  .dashboard-skeleton { height: 150px; border-radius: 17px; }
  .dashboard-skeleton--chart { height: 340px; margin-top: 14px; }

  .algorithm-overview {
    position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 3vw, 30px);
    border: 1px solid rgb(138 180 248 / .18); border-radius: 24px;
    background:
      radial-gradient(circle at 0 0, rgb(66 133 244 / .13), transparent 31%),
      radial-gradient(circle at 100% 100%, rgb(52 168 83 / .075), transparent 34%),
      var(--surface);
    box-shadow: 0 22px 58px rgb(0 0 0 / .18);
  }
  .algorithm-overview::before {
    position: absolute; top: 0; right: 8%; left: 8%; height: 2px; border-radius: 999px;
    background: var(--brand-spectrum); content: "";
  }
  .algorithm-overview__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
  .algorithm-overview__heading-copy { max-width: 720px; }
  .algorithm-overview__heading .eyebrow { color: #9bc1ff; }
  .algorithm-overview__heading h2 { margin-top: 5px; font-size: clamp(1.45rem, 2.4vw, 2.05rem); letter-spacing: -.045em; }
  .algorithm-overview__heading p { max-width: 660px; margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
  .algorithm-overview__status {
    display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 7px 11px;
    border: 1px solid rgb(52 168 83 / .22); border-radius: 999px; color: #a7f3d0;
    background: rgb(52 168 83 / .07); font-size: .61rem; font-weight: 780; letter-spacing: .025em;
  }
  .algorithm-overview__tabs {
    display: flex; max-width: 100%; align-items: center; gap: 5px; overflow-x: auto; margin-top: 23px; padding: 4px;
    border: 1px solid var(--line); border-radius: 14px; background: rgb(0 0 0 / .16); scrollbar-width: thin;
  }
  .algorithm-overview__tab {
    min-height: 38px; flex: 0 0 auto; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px;
    color: var(--muted); background: transparent; font-size: .69rem; font-weight: 760; cursor: pointer;
    transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
  }
  .algorithm-overview__tab:hover { color: var(--text); background: rgb(255 255 255 / .035); }
  .algorithm-overview__tab[aria-selected="true"] {
    border-color: rgb(138 180 248 / .2); color: white;
    background: linear-gradient(125deg, rgb(66 133 244 / .22), rgb(52 168 83 / .07));
    box-shadow: inset 0 1px rgb(255 255 255 / .07), 0 7px 18px rgb(0 0 0 / .12);
  }
  .algorithm-overview__tab:focus-visible { outline: 3px solid rgb(66 133 244 / .36); outline-offset: 2px; }
  .algorithm-overview__panels { min-height: 300px; }
  .algorithm-overview__panel { padding-top: 23px; outline: none; }
  .algorithm-overview__panel:focus-visible { border-radius: 15px; outline: 2px solid rgb(66 133 244 / .4); outline-offset: 7px; }
  .algorithm-overview__panel[hidden] { display: none; }
  .algorithm-overview__panel-intro h3 { font-size: 1rem; letter-spacing: -.025em; }
  .algorithm-overview__panel-intro p { margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
  .algorithm-overview__subheading { margin: 22px 0 10px; color: var(--text-soft); font-size: .72rem; }

  .algorithm-flow {
    display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 10px; overflow-x: auto;
    margin: 17px 0 0; padding: 0 0 5px; list-style: none; scrollbar-width: thin;
  }
  .algorithm-flow--signals { grid-template-columns: repeat(5, minmax(155px, 1fr)); }
  .algorithm-flow__step {
    position: relative; display: grid; min-width: 0; min-height: 132px; align-content: start; padding: 14px;
    border: 1px solid var(--line); border-radius: 15px; background: rgb(255 255 255 / .022);
  }
  .algorithm-flow__step:not(:last-child)::after {
    position: absolute; top: 50%; right: -15px; z-index: 2; width: 20px; color: #8ab4f8;
    background: var(--surface); font-size: .76rem; font-weight: 850; text-align: center; content: "→"; transform: translateY(-50%);
  }
  .algorithm-flow__number { position: absolute; top: 10px; right: 11px; color: var(--faint); font-size: .52rem; font-weight: 800; letter-spacing: .08em; }
  .algorithm-flow__icon {
    display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 13px; border-radius: 11px;
    color: #8ab4f8; background: rgb(66 133 244 / .12);
  }
  .algorithm-flow__step:nth-child(4n + 2) .algorithm-flow__icon { color: #81c995; background: rgb(52 168 83 / .1); }
  .algorithm-flow__step:nth-child(4n + 3) .algorithm-flow__icon { color: #fdd663; background: rgb(251 188 5 / .09); }
  .algorithm-flow__step:nth-child(4n + 4) .algorithm-flow__icon { color: #f28b82; background: rgb(234 67 53 / .09); }
  .algorithm-flow__step strong { font-size: .7rem; line-height: 1.25; }
  .algorithm-flow__step small { margin-top: 5px; color: var(--muted); font-size: .59rem; line-height: 1.45; }

  .algorithm-surfaces {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;
  }
  .algorithm-surfaces li { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgb(0 0 0 / .13); }
  .algorithm-surfaces__icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--text-soft); background: rgb(255 255 255 / .045); }
  .algorithm-surfaces li > span:last-child { display: grid; min-width: 0; }
  .algorithm-surfaces strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  .algorithm-surfaces small { margin-top: 3px; color: var(--faint); font-size: .54rem; line-height: 1.35; }

  .algorithm-compact-flow {
    display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 8px; overflow-x: auto;
    margin: 17px 0 0; padding: 0 0 5px; list-style: none; counter-reset: algorithm-step; scrollbar-width: thin;
  }
  .algorithm-compact-flow--stories { grid-template-columns: repeat(6, minmax(140px, 1fr)); }
  .algorithm-compact-flow li {
    position: relative; display: grid; min-height: 92px; align-content: center; padding: 13px 12px 13px 43px;
    border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .02); counter-increment: algorithm-step;
  }
  .algorithm-compact-flow li::before {
    position: absolute; top: 50%; left: 12px; display: grid; width: 23px; height: 23px; place-items: center;
    border-radius: 8px; color: #8ab4f8; background: rgb(66 133 244 / .12); font-size: .55rem; font-weight: 850;
    content: counter(algorithm-step); transform: translateY(-50%);
  }
  .algorithm-compact-flow li:not(:last-child)::after { position: absolute; top: 50%; right: -11px; z-index: 2; color: var(--faint); content: "›"; transform: translateY(-50%); }
  .algorithm-compact-flow strong { font-size: .67rem; }
  .algorithm-compact-flow small { margin-top: 4px; color: var(--muted); font-size: .56rem; line-height: 1.38; }

  .algorithm-content-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; margin-top: 15px; }
  .algorithm-score-card, .algorithm-route-notes article { border: 1px solid var(--line); background: rgb(0 0 0 / .12); }
  .algorithm-score-card { padding: 15px; border-radius: 15px; }
  .algorithm-score-card h4 { font-size: .7rem; }
  .algorithm-score-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
  .algorithm-score-chips li { padding: 6px 8px; border: 1px solid rgb(138 180 248 / .13); border-radius: 999px; color: var(--text-soft); background: rgb(66 133 244 / .055); font-size: .56rem; }
  .algorithm-route-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .algorithm-route-notes article { display: grid; min-width: 0; grid-template-columns: 29px minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px; border-radius: 14px; }
  .algorithm-route-notes article > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: #8ab4f8; background: rgb(66 133 244 / .1); }
  .algorithm-route-notes strong { font-size: .63rem; }
  .algorithm-route-notes p { margin-top: 3px; color: var(--muted); font-size: .54rem; line-height: 1.4; }
  .algorithm-overview__delivery-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding: 10px 12px; border-radius: 12px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .58rem; line-height: 1.45; }
  .algorithm-overview__delivery-note svg { flex: 0 0 auto; color: #8ab4f8; }

  .algorithm-story-rule, .algorithm-negative-signal, .algorithm-guardrail { display: grid; align-items: start; border: 1px solid var(--line); }
  .algorithm-story-rule { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin-top: 14px; padding: 14px; border-color: rgb(251 188 5 / .16); border-radius: 15px; background: rgb(251 188 5 / .045); }
  .algorithm-story-rule__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #fdd663; background: rgb(251 188 5 / .1); }
  .algorithm-story-rule strong, .algorithm-negative-signal strong, .algorithm-guardrail strong { font-size: .67rem; }
  .algorithm-story-rule p, .algorithm-negative-signal p, .algorithm-guardrail p { margin-top: 4px; color: var(--muted); font-size: .57rem; line-height: 1.45; }
  .algorithm-negative-signal { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; margin-top: 14px; padding: 13px; border-color: rgb(234 67 53 / .16); border-radius: 14px; background: rgb(234 67 53 / .045); }
  .algorithm-negative-signal > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #f28b82; background: rgb(234 67 53 / .1); }
  .algorithm-guardrail { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: rgb(255 255 255 / .025); }
  .algorithm-guardrail__icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #81c995; background: rgb(52 168 83 / .09); }

  [dir="rtl"] .algorithm-flow__step:not(:last-child)::after { right: auto; left: -15px; content: "←"; }
  [dir="rtl"] .algorithm-flow__number { right: auto; left: 11px; }
  [dir="rtl"] .algorithm-compact-flow li { padding-right: 43px; padding-left: 12px; }
  [dir="rtl"] .algorithm-compact-flow li::before { right: 12px; left: auto; }
  [dir="rtl"] .algorithm-compact-flow li:not(:last-child)::after { right: auto; left: -11px; content: "‹"; }
}

@layer responsive {
  body.is-standalone-route { padding-bottom: 0; }
  .app-shell--standalone .sidebar, .app-shell--standalone .mobile-header, .app-shell--standalone .bottom-nav, .app-shell--standalone .preview-watermark { display: none; }
  .app-shell--standalone .app-main { min-height: 100dvh; margin-left: 0; padding-top: 0; }

  @media (max-width: 820px) {
    .login-page { padding: 18px; }
    .login-layout { width: min(520px, 100%); min-height: auto; grid-template-columns: 1fr; border-radius: 25px; }
    .login-story { display: none; }
    .login-card { min-height: min(680px, calc(100dvh - 36px)); padding: clamp(34px, 9vw, 58px); }
    .login-card__mobile-brand { display: block; height: 68px; }
    .login-card__mobile-brand .login-brand { position: static; }
    .registration-layout { min-height: auto; }
    .registration-card { max-height: none; overflow: visible; }

    .profile-share-page { overflow: visible; }
    .profile-share-toolbar { position: sticky; top: 0; grid-template-columns: 46px 1fr auto; padding-inline: 14px; background: linear-gradient(180deg, rgb(5 5 7 / .42), transparent); backdrop-filter: blur(8px); }
    .profile-share-toolbar__logo { width: 76px; }
    .profile-share-workspace { min-height: auto; grid-template-columns: 1fr; gap: 26px; padding: 4px 0 max(24px, env(safe-area-inset-bottom)); }
    .profile-share-preview { padding-inline: 16px; }
    .profile-share-artboard { width: min(390px, 100%); border-radius: 30px; }
    .profile-share-controls { width: min(560px, 100%); margin-inline: auto; border-width: 1px 0 0; border-radius: 30px 30px 0 0; padding: 30px max(18px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-bottom)); }
    .profile-share-controls__intro .eyebrow, .profile-share-controls__intro > p { display: none; }
    .profile-share-controls__intro h1 { margin-top: 0; font-size: 1.72rem; }
    .profile-share-control-group--actions { margin-top: 18px; padding-top: 18px; }

    /* Con la sidebar tablet lo spazio utile e' inferiore al viewport: due
       colonne minime da 300/320px uscivano lateralmente tra 761 e 820px. */
    .composer-grid { grid-template-columns: minmax(0, 1fr); }
    .create-page.is-story .composer-media { width: 100%; justify-self: center; }
  }

  @media (min-width: 900px) {
    .story-viewer { width: var(--story-viewer-width, 100vw); height: var(--story-viewer-height, 100dvh); margin: 0; background: #000; }
    .story-viewer__frame { width: min(var(--story-viewer-width, 100vw), calc(var(--story-viewer-height, 100dvh) * .5625)); height: var(--story-viewer-height, 100dvh); box-shadow: 0 0 80px rgb(0 0 0 / .86); }
    .story-viewer__media { object-fit: cover; }
    .story-viewer__nav--prev { width: 35%; }
    .story-viewer__nav--next { width: 65%; }
    .story-owner-insights {
      grid-template: minmax(0, 1fr) / minmax(310px, 420px) minmax(420px, 640px); place-content: center; gap: 18px;
      padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
      background: radial-gradient(circle at 25% 50%, rgb(59 130 246 / .12), transparent 36%), #050609;
    }
    .story-owner-insights__gallery { border: 1px solid rgb(255 255 255 / .08); border-radius: 28px; padding: 24px 18px; }
    .story-owner-insights__gallery-copy { align-content: start; }
    .story-owner-insights__gallery-copy strong { font-size: 1rem; }
    .story-owner-insights__close { top: 16px; right: 16px; }
    .story-owner-insights__rail { align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; overflow-y: auto; padding: 18px 8px; touch-action: pan-y; }
    .story-owner-insights__story { width: 88px; height: 152px; }
    .story-owner-insights__story.is-selected { width: 104px; height: 180px; }
    .story-owner-insights__sheet { border-width: 1px; border-radius: 28px; box-shadow: 0 24px 80px rgb(0 0 0 / .38); }
    .story-owner-insights__sheet-handle { display: none; }
    .story-owner-insights__sheet { grid-template-rows: auto minmax(0, 1fr); }
    .story-owner-insights__tabs { padding-top: 6px; }
    .story-owner-insights__viewers { padding-inline: 22px; }
    .story-owner-insights__panel--stats { padding: 22px 24px 30px; }
    .story-insights-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .story-insights-metric:first-child { grid-column: auto; }
  }

  @media (max-width: 1100px) and (min-width: 761px) {
    :root { --sidebar: 82px; }
    .sidebar { align-items: center; padding-inline: 12px; }
    .sidebar .brand { justify-content: center; }
    .sidebar .brand__logo { width: 52px; }
    .sidebar .nav-label, .sidebar__account .account-chip__text, .sidebar__account .account-chip > svg { display: none; }
    .sidebar__link { width: 52px; justify-content: center; padding: 0; }
    .sidebar__link.is-active::before { left: -15px; }
    .sidebar__account .account-chip { padding: 7px; border: 0; }
    .explore-grid, .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metrics-grid { grid-template-columns: repeat(3, 1fr); }
    .messages-page { grid-template-columns: 310px 1fr; }
  }

  @media (max-width: 760px) {
    :root {
      --mobile-header-height: 58px;
      --mobile-header: calc(var(--mobile-header-height) + env(safe-area-inset-top));
      --bottom-nav-height: 64px;
      --bottom-nav-offset: max(10px, env(safe-area-inset-bottom));
      --bottom-nav: calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 8px);
      --feed-header-row: calc(49px + env(safe-area-inset-top));
      --feed-stories-row: 91px;
      --feed-max-width: 100vw;
    }
    body { padding-bottom: var(--bottom-nav); }
    .upload-status { top: max(7px, env(safe-area-inset-top)); right: 9px; left: 9px; min-height: 58px; grid-template-columns: 40px minmax(0, 1fr) auto auto; border-radius: 14px; }
    body[data-route="/"] .upload-status {
      top: max(
        calc(env(safe-area-inset-top) + 8px),
        calc(var(--feed-header-row) + var(--feed-stories-row) + 8px - var(--feed-chrome-scroll, 0px))
      );
    }
    .upload-status.is-compact { right: 9px; left: auto; width: 54px; height: 54px; min-height: 54px; border-radius: 50%; }
    .upload-status.is-compact .upload-status__compact-toggle { width: 54px; height: 54px; border-radius: 50%; }
    .upload-status__preview { width: 40px; height: 40px; }
    .upload-status__copy small { max-width: 52vw; }
    .upload-status__actions { grid-column: 2 / -1; justify-content: end; }
    .app-shell { min-height: calc(100dvh - var(--bottom-nav)); }
    .sidebar { display: none; }
    .app-main { min-height: calc(100dvh - var(--bottom-nav)); margin-left: 0; padding-top: var(--mobile-header); }
    .mobile-header { position: fixed; inset: 0 0 auto 0; z-index: 28; display: flex; height: var(--mobile-header); align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) max(15px, env(safe-area-inset-right)) 0 max(15px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgb(9 9 13 / .87); backdrop-filter: blur(18px); }
    .brand--mobile .brand__logo { width: 86px; }
    .mobile-header__actions { display: flex; align-items: center; gap: 2px; }
    .bottom-nav {
      position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: var(--bottom-nav-offset); left: max(12px, env(safe-area-inset-left)); z-index: 40;
      display: grid; width: auto; max-width: 440px; margin-inline: auto;
      height: var(--bottom-nav-height); grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px;
      overflow: visible; border: 1px solid rgb(255 255 255 / .14); border-radius: 23px;
      background: linear-gradient(180deg, rgb(27 27 38 / .88), rgb(12 12 18 / .9));
      box-shadow: 0 20px 55px rgb(0 0 0 / .5), inset 0 1px rgb(255 255 255 / .075);
      backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
      transform-origin: center bottom; isolation: isolate;
      transition: max-width .28s var(--ease), height .28s var(--ease), border-radius .28s var(--ease), background .28s, box-shadow .28s;
    }
    .bottom-nav::before { position: absolute; top: -1px; left: 20%; width: 60%; height: 1px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgb(167 139 250 / .7), rgb(236 72 153 / .6), transparent); pointer-events: none; content: ""; }
    .bottom-nav__link { position: relative; display: grid; min-width: 0; min-height: 48px; place-content: center; justify-items: center; gap: 2px; border-radius: 16px; color: var(--muted); transition: color .22s, background .22s, box-shadow .22s; }
    .bottom-nav__link.is-active { color: white; background: linear-gradient(145deg, rgb(139 92 246 / .18), rgb(236 72 153 / .09)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .045); }
    .bottom-nav__link .nav-label { max-height: 14px; overflow: hidden; font-size: .64rem; font-weight: 720; line-height: 1.1; opacity: 1; transform: translateY(0); transition: max-height .24s var(--ease), opacity .16s, transform .24s var(--ease); }
    .bottom-nav__link--create { appearance: none; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; cursor: pointer; }
    .bottom-nav__link--create .nav-icon { width: 44px; height: 44px; margin-top: -12px; border: 1px solid rgb(255 255 255 / .18); border-radius: 15px; color: white; background: var(--gradient); box-shadow: 0 9px 25px rgb(139 92 246 / .36), inset 0 1px rgb(255 255 255 / .22); transition: width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), border-radius .28s var(--ease), transform .2s var(--ease); }
    .bottom-nav__link--create:active .nav-icon { transform: scale(.94); }
    .bottom-nav__link--create .nav-label { margin-top: 5px; }
    .bottom-nav__link--create[aria-expanded="true"] .nav-icon { transform: rotate(45deg); }
    .create-launcher {
      position: absolute; bottom: calc(100% + 13px); left: 50%; z-index: 4; display: grid; width: min(370px, calc(100vw - 24px)); gap: 9px;
      padding: 13px; border: 1px solid rgb(255 255 255 / .16); border-radius: 22px; opacity: 0;
      background: linear-gradient(180deg, rgb(31 29 43 / .96), rgb(13 13 20 / .97));
      box-shadow: 0 24px 64px rgb(0 0 0 / .58), inset 0 1px rgb(255 255 255 / .08);
      pointer-events: none; backdrop-filter: blur(26px) saturate(155%); -webkit-backdrop-filter: blur(26px) saturate(155%);
      transform: translate(-50%, 18px) scale(.96); transform-origin: 50% 100%;
      transition: opacity .18s ease, transform .24s var(--ease);
    }
    .create-launcher.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
    .create-launcher__eyebrow { padding-inline: 4px; color: rgb(255 255 255 / .7); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .create-launcher__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .create-launcher__choice {
      display: grid; min-width: 0; min-height: 94px; place-content: center; justify-items: center; gap: 7px; padding: 9px 5px;
      border: 1px solid rgb(255 255 255 / .08); border-radius: 16px; color: white; background: rgb(255 255 255 / .035);
      text-align: center; opacity: 0; transform: translateY(13px); transition: border-color .18s, background .18s, opacity .23s var(--ease), transform .23s var(--ease);
    }
    .create-launcher.is-open .create-launcher__choice { opacity: 1; transform: translateY(0); }
    .create-launcher.is-open .create-launcher__choice:nth-child(2) { transition-delay: 35ms; }
    .create-launcher.is-open .create-launcher__choice:nth-child(3) { transition-delay: 70ms; }
    .create-launcher.is-open .create-launcher__choice:nth-child(4) { transition-delay: 105ms; }
    .create-launcher.is-open .create-launcher__choice:nth-child(5) { transition-delay: 140ms; }
    .create-launcher__choice:hover, .create-launcher__choice:focus-visible { border-color: rgb(167 139 250 / .34); background: var(--gradient-soft); }
    .create-launcher__icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #dbeafe; background: linear-gradient(145deg, rgb(66 133 244 / .26), rgb(52 168 83 / .1)); box-shadow: inset 0 1px rgb(255 255 255 / .08); }
    .create-launcher__choice--video .create-launcher__icon { color: #fecdd3; background: linear-gradient(145deg, rgb(219 39 119 / .3), rgb(249 115 22 / .14)); }
    .create-launcher__choice--story .create-launcher__icon { color: #bae6fd; background: linear-gradient(145deg, rgb(66 133 244 / .28), rgb(14 165 233 / .18)); }
    .create-launcher__choice--mix .create-launcher__icon { color: #cffafe; background: linear-gradient(145deg, rgb(8 145 178 / .3), rgb(66 133 244 / .22), rgb(52 168 83 / .1)); }
    .create-launcher__copy { display: grid; min-width: 0; gap: 1px; }
    .create-launcher__copy strong, .create-launcher__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .create-launcher__copy strong { font-size: .7rem; }
    .create-launcher__copy small { color: var(--muted); font-size: .55rem; }
    .create-launcher__caret { position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; border-right: 1px solid rgb(255 255 255 / .13); border-bottom: 1px solid rgb(255 255 255 / .13); background: rgb(13 13 20 / .97); transform: translateX(-50%) rotate(45deg); }
    .bottom-nav .nav-badge { top: -2px; left: calc(50% + 5px); }
    .bottom-nav.is-compact:not(:focus-within) { max-width: 296px; height: 52px; padding: 4px 6px; border-radius: 999px; background: linear-gradient(180deg, rgb(27 27 38 / .94), rgb(10 10 15 / .94)); box-shadow: 0 15px 42px rgb(0 0 0 / .48), inset 0 1px rgb(255 255 255 / .07); }
    .bottom-nav.is-compact:not(:focus-within) .bottom-nav__link { min-height: 44px; gap: 0; border-radius: 999px; }
    .bottom-nav.is-compact:not(:focus-within) .nav-label { max-height: 0; opacity: 0; transform: translateY(5px); }
    .bottom-nav.is-compact:not(:focus-within) .bottom-nav__link--create .nav-icon { width: 42px; height: 42px; margin-top: 0; border-radius: 50%; }
    .bottom-nav.is-compact.has-create-launcher { max-width: 440px; height: var(--bottom-nav-height); padding: 6px; border-radius: 23px; }
    .bottom-nav.is-compact.has-create-launcher .bottom-nav__link { min-height: 48px; gap: 2px; border-radius: 16px; }
    .bottom-nav.is-compact.has-create-launcher .nav-label { max-height: 14px; opacity: 1; transform: translateY(0); }
    .bottom-nav.is-compact.has-create-launcher .bottom-nav__link--create .nav-icon { width: 44px; height: 44px; margin-top: -12px; border-radius: 15px; }
    body[data-route="/"] .mobile-header { display: none; }
    body[data-route="/"] .app-main { padding-top: 0; }
    body[data-route="/"] .stories-slot { right: auto; left: auto; }
    html[dir="rtl"] body[data-route="/"] .stories-slot { right: auto; left: auto; }
    .page { min-height: calc(100dvh - var(--mobile-header) - var(--bottom-nav)); padding: 24px 16px 40px; }
    .page-heading { align-items: start; margin-bottom: 22px; }
    .page-heading--sticky { top: var(--mobile-header); flex-direction: column; gap: 15px; margin: -24px -16px 10px; padding: 20px 16px 14px; }
    .page-heading--sticky .search-box { width: 100%; }
    .create-page > .page-heading:not(.create-intent-page__heading) { align-items: stretch; flex-direction: column; gap: 14px; }
    .create-page__change { width: 100%; }
    .create-intent-picker { grid-template-columns: 1fr; gap: 10px; }
    .create-intent-card { min-height: 126px; grid-template-columns: 52px minmax(0, 1fr) 32px; grid-template-rows: 1fr; align-items: center; gap: 13px; padding: 15px; border-radius: 19px; }
    .create-intent-card__number { display: none; }
    .create-intent-card__icon { width: 52px; height: 52px; border-radius: 16px; }
    .create-intent-card__icon svg { width: 24px; height: 24px; }
    .create-intent-card__copy { gap: 4px; padding-right: 0; }
    .create-intent-card__copy strong { font-size: 1.03rem; }
    .create-intent-card__copy small { font-size: .67rem; }
    .create-intent-card__arrow { position: static; width: 32px; height: 32px; }
    .form-row { grid-template-columns: 1fr; }
    .toast-root { right: 16px; bottom: calc(var(--bottom-nav) + 10px); left: 16px; width: auto; }
    .overlay { padding: 10px; }
    .overlay--sheet { padding: 0; }
    .overlay__panel { max-height: calc(100dvh - 20px); border-radius: 20px; }
    .overlay__panel--sheet { max-height: 88dvh; overscroll-behavior-y: contain; scroll-padding-bottom: max(24px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
    .comments-modal { height: min(780px, 88dvh); }
    .comments-sheet > .sheet-heading { padding: 19px 58px 7px 17px; }
    .comments-sort { padding: 0 12px 9px; }
    .comments-sort__trigger { min-height: 44px; }
    .comments-sort__menu { left: 12px; width: min(350px, calc(100vw - 24px)); }
    .comments-list { padding-inline: 13px; }
    .comment--reply { margin-inline-start: 22px; padding-inline-start: 7px; }
    .comment-action { padding-inline: 6px; }
    .comment-composer__reply-context { padding-inline-start: 38px; }
    .auth-panel { padding: 30px 22px; }
    .preview-watermark { right: 10px; bottom: calc(var(--bottom-nav) + 9px); padding: 7px 9px; }

    .login-page { padding: 10px; }
    .login-layout { border-radius: 21px; }
    .login-card { min-height: calc(100dvh - 20px); padding: 30px 24px; }
    .login-card h1 { font-size: clamp(1.9rem, 10vw, 2.55rem); }
    .login-card__intro { font-size: .82rem; }
    .registration-card { padding-block: 24px; }
    .registration-card .login-card__mobile-brand { height: 54px; }
    .registration-form { margin-top: 18px; }

    /* The native iOS shell draws edge-to-edge. Reserve the physical top
       inset inside the feed header so the title and its indicator never sit
       below the status bar / Dynamic Island. Header, Stories and posts share
       the same bounded scroller, so the top chrome leaves with the content. */
    .feed-page {
      width: 100%; height: calc(100dvh - var(--bottom-nav));
    }
    .feed-header { padding-top: env(safe-area-inset-top); border-bottom-color: rgb(255 255 255 / .06); }
    .feed-scroll-content { padding: 5px 5px 18px; }
    .feed-stack { width: min(100%, 560px); gap: 16px; }
    .feed-stack > .feed-card:not(.feed-card--mosaic)::after { bottom: -9px; }
    .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
    .hashtag-page__header { grid-template-columns: 42px 44px minmax(0, 1fr); gap: 9px; margin: -4px 0 20px; }
    .hashtag-page__mark { width: 44px; height: 44px; border-radius: 14px; }
    .hashtag-page__header h1 { font-size: 1.65rem; }
    .hashtag-post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 5px; }
    .hashtag-post-list__item--skeleton .skeleton { min-height: 210px; border-radius: 9px; }
    .hashtag-post-list__item > time { font-size: .58rem; }
    .mosaic-wall > [data-orientation="landscape"] { grid-column: span 2; }
    .stories__rail { gap: 9px; padding: 7px 10px 6px; }
    .story-avatar { width: 59px; }
    .story-avatar__ring { width: 55px; height: 55px; padding: 2px; border-radius: 17px; }
    .story-avatar__ring .avatar { width: 47px; height: 47px; border-radius: 14px; }
    .story-avatar__label { width: 59px; font-size: .6rem; }
    .story-avatar__plus { top: 37px; inset-inline-end: 2px; }
    .feed-stack > .feed-card:not(.feed-card--mosaic), .skeleton-card--feed { height: clamp(480px, calc(100dvh - var(--bottom-nav) - 150px), 720px); min-height: 480px; border-radius: 15px; }
    .feed-card--mosaic .feed-card__info { right: 49px; bottom: 8px; left: 8px; }
    .feed-card--mosaic .post-author { margin-bottom: 0; }
    .feed-card--mosaic .post-author__avatar, .feed-card--mosaic .post-author__identity time, .feed-card--mosaic .post-caption { display: none; }
    .feed-card--mosaic .post-author__identity a { font-size: .68rem; }
    .feed-card--mosaic .post-actions { right: 3px; bottom: 4px; }
    .feed-card--mosaic .post-action { min-width: 44px; min-height: 44px; }
    .feed-card--mosaic .post-action__icon { width: 35px; height: 35px; }
    .feed-card--standalone { height: min(74dvh, 720px); min-height: 520px; border-radius: 16px; }
    /* The generic standalone-card rule above is intentionally compact for
       detail pages. Inside the immersive viewer it must never win the cascade:
       one slide and its card always own the complete dynamic/visual viewport. */
    .video-viewer-page {
      height: var(--video-viewer-height, 100dvh); min-height: var(--video-viewer-height, 100dvh);
      max-height: var(--video-viewer-height, 100dvh);
    }
    .video-viewer { height: 100%; min-height: 100%; max-height: 100%; }
    .video-viewer__slide {
      width: 100%; height: var(--video-viewer-height, 100dvh); min-height: var(--video-viewer-height, 100dvh);
      max-height: var(--video-viewer-height, 100dvh);
    }
    .video-viewer__slide > .feed-card.feed-card--standalone {
      width: 100%; max-width: none; height: 100%; min-height: 100%; max-height: none;
      margin: 0; border: 0; border-radius: 0; aspect-ratio: auto;
    }
    .video-viewer__slide > .feed-card.feed-card--standalone > .feed-card__stage {
      width: 100%; height: 100%; min-height: 100%; border-radius: 0; aspect-ratio: auto;
    }
    .post-detail { padding-top: 70px; }

    .explore-tile, .profile-tile { border-radius: 7px; }
    .mosaic-tile__caption { display: none; }
    .mosaic-tile__meta { right: 8px; bottom: 7px; left: 8px; }
    .mosaic-tile__type { top: 7px; right: 7px; min-height: 26px; padding: 3px 6px; }
    .mosaic-tile .carousel__counter { top: 7px; left: 7px; }
    .mosaic-tile__repost { top: 7px; left: 7px; min-height: 26px; padding: 3px 6px; }
    .mosaic-tile--repost .carousel__counter { top: 39px; right: auto; left: 7px; }

    .create-page .page-heading p { max-width: 330px; }
    .create-composer > .segmented { width: 100%; }
    .create-composer > .segmented .segmented__item { flex: 1; }
    .composer-grid { grid-template-columns: 1fr; }
    .composer-media { min-height: 430px; }
    .upload-dropzone { min-height: 430px; }
    .upload-preview { min-height: 430px; grid-auto-rows: 205px; }
    .format-picker { grid-template-columns: repeat(2, 1fr); }
    .animation-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .animation-picker__heading { align-items: flex-start; }
    .music-picker__heading { align-items: flex-start; }
    .music-picker__badge { display: none; }
    .music-library-list { max-height: 290px; }
    .music-track { grid-template-columns: 43px 36px minmax(0, 1fr); }
    .music-track__cover { width: 43px; height: 43px; }
    .music-track__choose { grid-column: 2 / -1; width: 100%; }
    .music-selection__controls, .music-admin-form .form-row, .music-provider__audit, .music-manager__controls { grid-template-columns: 1fr; }
    .music-admin__tabs { display: flex; }
    .music-admin__tabs .segmented__item { flex: 0 0 auto; padding-inline: 10px; }
    .music-provider__search { align-items: stretch; flex-direction: column; }
    .music-provider-result { grid-template-columns: 42px minmax(0, 1fr); }
    .music-provider-result .button { grid-column: 1 / -1; }
    .music-manager-track { grid-template-columns: 1fr; }
    .music-manager-track__actions { max-width: none; justify-content: flex-start; }
    .music-manager-track__actions .button { flex: 1 1 auto; }
    .music-rights-dialog, .music-edit-form { padding: 24px 18px; }
    .music-edit-form > .form-row { grid-template-columns: 1fr; }
    .composer-submit { align-items: stretch; flex-direction: column; }
    .composer-submit .button { width: 100%; }

    .messages-page { height: calc(100dvh - var(--mobile-header) - var(--bottom-nav)); grid-template-columns: 1fr; }
    .conversation-sidebar { border-right: 0; }
    .chat-panel { display: none; position: fixed; inset: var(--mobile-header) 0 var(--bottom-nav); z-index: 20; }
    .messages-page.has-active-chat .conversation-sidebar { display: none; }
    .messages-page.has-active-chat .chat-panel { display: grid; }
    .chat-header__back { display: grid; }
    .message-list { padding: 18px 12px; }
    .message-bubble { max-width: 84%; }
    .message-bubble__delete { right: calc(100% + 4px); opacity: .48; }
    .message-composer { padding: 9px 10px max(10px, env(safe-area-inset-bottom)); }

    .profile-page { padding: 14px 0 35px; }
    .profile-page__toolbar { top: calc(var(--mobile-header) + 6px); margin: 0 12px 10px; border-radius: 15px; }
    .profile-page__toolbar-title strong { font-size: .86rem; }
    .profile-page__account-trigger { width: min(100%, 310px); padding-inline: 6px; }
    body[data-route="/profile"] .mobile-header, body[data-route="/settings"] .mobile-header, body[data-route^="/u/"] .mobile-header { display: none; }
    body[data-route="/profile"] .app-main, body[data-route="/settings"] .app-main, body[data-route^="/u/"] .app-main { padding-top: 0; }
    body[data-route="/profile"] .profile-page, body[data-route^="/u/"] .profile-page { padding-top: max(10px, env(safe-area-inset-top)); }
    body[data-route="/settings"] .settings-page { padding-top: max(14px, env(safe-area-inset-top)); }
    body[data-route="/profile"] .profile-page__toolbar, body[data-route^="/u/"] .profile-page__toolbar { top: max(6px, env(safe-area-inset-top)); }
    .profile-cover { height: 150px; margin-inline: 12px; border-radius: 17px; }
    .profile-identity { padding-inline: 18px; }
    .profile-identity__main { position: relative; align-items: start; flex-wrap: wrap; gap: 10px; }
    .profile-avatar { margin-top: -40px; }
    .avatar--xl { width: 92px; height: 92px; }
    .profile-title { padding-top: 8px; }
    .profile-title h1 { font-size: 1.35rem; }
    .profile-actions { width: 100%; margin-top: 0; }
    .profile-actions .button { min-width: 0; flex: 1 1 calc(33.333% - 8px); padding-inline: 9px; }
    .profile-actions .button svg { width: 16px; height: 16px; }
    .profile-actions .icon-button { flex: 0 0 44px; }
    .profile-actions--visitor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 44px 44px; }
    .profile-actions--visitor.has-primary-email { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-actions--visitor.has-primary-email .profile-notification-button { grid-row: 2; grid-column: 2; justify-self: end; }
    .profile-actions--visitor.has-primary-email > .icon-button:last-child { grid-row: 2; grid-column: 3; justify-self: end; }
    .account-switcher { min-height: min(680px, 84dvh); padding: 24px 14px max(18px, env(safe-area-inset-bottom)); }
    .account-switcher__heading { padding-inline: 3px 40px; }
    .account-switcher__account { min-height: 72px; grid-template-columns: 50px minmax(0, 1fr) 31px; gap: 10px; padding-inline: 10px; }
    .account-switcher__account > .avatar { width: 50px; height: 50px; }
    .profile-welcome-guide {
      position: fixed; right: 12px; bottom: calc(var(--bottom-nav) + max(12px, env(safe-area-inset-bottom))); left: 12px; z-index: 46;
      max-height: min(58dvh, 440px); margin: 0; overflow-y: auto; padding: 15px 14px;
      border-radius: 18px; background: rgb(18 16 27 / .97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    }
    .profile-welcome-guide__actions { grid-column: 1 / -1; }
    .profile-welcome-guide__actions .button { flex: 1 1 auto; }
    .profile-stats { justify-content: space-between; gap: 10px; }
    .profile-content { margin-top: 0; }
    .profile-tabs { justify-content: flex-start; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
    .profile-grid { padding-inline: 5px; }
    .profile-banner { margin-inline: 18px; }
    .profile-editor-modal { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .profile-editor { padding: max(26px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
    .profile-editor__header { padding-right: 42px; }
    .profile-editor__preview { height: 155px; margin-top: 19px; margin-bottom: 52px; }
    .profile-editor__media-actions { grid-template-columns: minmax(0, 1fr); }
    .profile-editor__media-action { width: 100%; min-height: 62px; }
    .profile-editor__nav { margin-inline: -16px; padding-inline: 16px; }
    .profile-editor__section { padding: 16px 13px; border-radius: 16px; }
    .profile-editor__section-body { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .profile-editor__section-body > * { grid-column: 1 !important; }
    .profile-editor__link-row { grid-template-columns: minmax(0, 1fr) 38px; padding: 10px; }
    .profile-editor__link-fields, .profile-editor__dependent-fields { grid-template-columns: minmax(0, 1fr); }
    .profile-editor__readonly { grid-template-columns: 40px minmax(0, 1fr); }
    .profile-editor__readonly-state { grid-column: 2; width: max-content; }
    .profile-editor__footer { bottom: calc(-1 * max(24px, env(safe-area-inset-bottom))); margin: 18px -16px calc(-1 * max(24px, env(safe-area-inset-bottom))); padding: 11px 16px max(11px, env(safe-area-inset-bottom)); }
    .profile-editor__footer p { display: none; }
    .profile-editor__footer .button { width: 100%; }
    .profile-tools { padding: 26px 18px max(26px, env(safe-area-inset-bottom)); }
    .profile-tools__heading { padding-right: 34px; }
    .profile-tools__heading-icon { width: 40px; height: 40px; }
    .profile-tools__search { margin-top: 18px; }
    .profile-tools__results { gap: 17px; margin-top: 18px; }
    .profile-tools__item { min-height: 64px; grid-template-columns: 40px minmax(0, 1fr) 20px; padding-inline: 10px; }
    .profile-tools__item-icon { width: 40px; height: 40px; }
    .profile-tools__item.is-danger { grid-template-columns: 40px minmax(0, 1fr); }
    .image-cropper { padding: 24px 16px max(20px, env(safe-area-inset-bottom)); }
    .image-cropper__heading { padding-right: 34px; }
    .image-cropper__heading-icon { display: none; }
    .image-cropper__stage--circle { width: min(82vw, 360px); }
    .image-cropper__controls { grid-template-columns: 1fr; }
    .image-cropper__reset { width: 100%; grid-row: auto; grid-column: 1; }
    .image-cropper__actions .button { flex: 1; }

    .profile-share-toolbar__chip span { display: none; }
    .profile-share-toolbar__chip { width: 44px; padding: 0; border-radius: 50%; }

    .dashboard-heading { align-items: stretch; flex-direction: column; }
    .dashboard-heading .segmented { width: 100%; }
    .dashboard-heading .segmented__item { flex: 1; padding-inline: 8px; }
    .watermark-admin { margin-inline: -4px; padding: 16px; border-radius: 16px; }
    .watermark-admin__heading { gap: 12px; }
    .watermark-admin__layout { grid-template-columns: 1fr; }
    .watermark-admin__preview { width: min(100%, 310px); justify-self: center; grid-row: 1; }
    .watermark-admin__surfaces { grid-template-columns: 1fr; }
    .watermark-admin__actions { align-items: stretch; flex-direction: column; }
    .watermark-admin__actions .button { width: 100%; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .metric-card { min-height: 118px; padding: 14px; }
    .metric-card strong { font-size: 1.4rem; }
    .chart-card, .content-performance { margin-inline: -5px; padding: 14px; border-radius: 15px; }
  }

  @media (max-width: 390px) {
    :root { --feed-header-row: calc(47px + env(safe-area-inset-top)); --feed-stories-row: 84px; }
    .bottom-nav__link .nav-label { font-size: .62rem; }
    .story-avatar { width: 55px; }
    .story-avatar__ring { width: 51px; height: 51px; border-radius: 15px; }
    .story-avatar__ring .avatar { width: 43px; height: 43px; border-radius: 13px; }
    .story-avatar__label { width: 55px; }
    .story-avatar__plus { top: 34px; inset-inline-end: 1px; }
    .profile-tabs button { padding-inline: 10px; }
    .profile-tabs button span { display: none; }
    .metrics-grid { gap: 7px; }
    .profile-share-preview { padding-inline: 10px; }
    .profile-share-artboard { border-radius: 25px; }
    .profile-share-card { top: 20.5%; right: 6.5%; bottom: 11.5%; left: 6.5%; padding-inline: 17px; }
    .profile-share-card__qr { width: min(202px, 94%); max-height: none; }
    .profile-share-controls { padding-inline: 16px; }
    .profile-share-action { min-height: 80px; padding-inline: 3px; font-size: .68rem; }
  }

  @media (max-width: 350px) {
    .profile-share-card { padding: 44px 17px 14px; }
    .profile-share-card__qr { width: min(190px, 92%); }
    .profile-share-card__hint { margin-top: 5px; }
  }

  /* Il viewer Stories deve prevalere sulle regole modali responsive generiche. */
  .overlay--fullscreen { width: 100vw; height: 100dvh; min-height: 100dvh; padding: 0; overflow: hidden; background: #000; }
  .overlay--fullscreen:has(.story-viewer-modal) {
    width: var(--story-viewer-width, 100vw); height: var(--story-viewer-height, 100dvh); min-height: var(--story-viewer-height, 100dvh);
  }
  .overlay__panel--fullscreen.story-viewer-modal {
    width: var(--story-viewer-width, 100vw); height: var(--story-viewer-height, 100dvh);
    min-height: var(--story-viewer-height, 100dvh); max-height: var(--story-viewer-height, 100dvh);
    border: 0; border-radius: 0; background: #000; box-shadow: none; transform: none; transition: none;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (max-width: 760px) {
      .bottom-nav, .bottom-nav.is-compact:not(:focus-within) { background: rgb(14 14 21 / .98); }
    }
  }
}

@layer components {
  /* First-access product tour */
  body.is-onboarding-open { overflow: hidden; overscroll-behavior: none; }
  body.is-onboarding-open .is-onboarding-target {
    transform: none !important; scale: 1 !important;
    animation-play-state: paused !important; transition: none !important;
  }
  .onboarding-tour {
    position: fixed; inset: 0; z-index: 300; color: var(--text); pointer-events: none;
    opacity: 0; transition: opacity .2s ease;
  }
  .onboarding-tour.is-visible { opacity: 1; }
  .onboarding-tour__shield {
    position: fixed; background: rgb(3 3 7 / .76); pointer-events: auto;
    transition: top .24s var(--ease), left .24s var(--ease), width .24s var(--ease), height .24s var(--ease);
  }
  .onboarding-tour__spotlight {
    position: fixed; border: 2px solid rgb(196 181 253 / .92); border-radius: 18px;
    box-shadow: 0 0 0 4px rgb(139 92 246 / .18), 0 0 34px rgb(139 92 246 / .42), inset 0 0 24px rgb(255 255 255 / .06);
    pointer-events: auto; transition: top .24s var(--ease), left .24s var(--ease), width .24s var(--ease), height .24s var(--ease), opacity .16s;
  }
  .onboarding-tour.is-routing .onboarding-tour__spotlight { opacity: 0; }
  .onboarding-tour__card {
    position: fixed; display: grid; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    gap: 15px; padding: 21px; border: 1px solid rgb(196 181 253 / .28); border-radius: 23px;
    color: var(--text); background: radial-gradient(circle at 100% 0%, rgb(139 92 246 / .2), transparent 42%), rgb(20 20 28 / .97);
    box-shadow: 0 28px 90px rgb(0 0 0 / .64), inset 0 1px rgb(255 255 255 / .07); backdrop-filter: blur(24px);
    pointer-events: auto; scrollbar-width: thin;
  }
  .onboarding-tour__header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; }
  .onboarding-tour__eyebrow { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #ddd6fe; font-size: .64rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
  .onboarding-tour__eyebrow svg { flex: 0 0 auto; color: #f0abfc; }
  .onboarding-tour__count { flex: 0 0 auto; color: var(--muted); font-size: .66rem; font-weight: 760; font-variant-numeric: tabular-nums; }
  .onboarding-tour__progress { height: 3px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .08); }
  .onboarding-tour__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gradient); box-shadow: 0 0 13px rgb(167 139 250 / .5); transition: width .28s var(--ease); }
  .onboarding-tour__copy { display: grid; gap: 9px; }
  .onboarding-tour__copy h2 { font-size: clamp(1.42rem, 4vw, 1.85rem); letter-spacing: -.045em; line-height: 1.08; }
  .onboarding-tour__copy p { color: var(--text-soft); font-size: .8rem; line-height: 1.58; }
  .onboarding-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
  .onboarding-tour__actions > span { display: flex; align-items: center; gap: 7px; }
  .onboarding-tour__skip { min-height: 39px; padding: 0 5px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 720; cursor: pointer; }
  .onboarding-tour__skip:hover { color: white; }
  .onboarding-tour__back, .onboarding-tour__next { min-height: 40px; padding: 0 14px; }
  .onboarding-tour__back:disabled { opacity: .34; cursor: default; }
  .onboarding-tour__next { display: inline-flex; align-items: center; gap: 6px; }
  .onboarding-tour__keys { color: var(--faint); font-size: .57rem; text-align: right; }
  .onboarding-tour.is-routing .onboarding-tour__eyebrow::after {
    width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
    content: ""; animation: onboardingPulse .85s ease-in-out infinite alternate;
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .onboarding-tour__spotlight { border-radius: 15px; }
    .onboarding-tour__card {
      right: max(12px, env(safe-area-inset-right));
      bottom: calc(var(--bottom-nav) + max(10px, env(safe-area-inset-bottom)));
      left: max(12px, env(safe-area-inset-left)) !important;
      top: auto !important; width: auto; max-height: min(44dvh, 390px); gap: 12px; padding: 18px; border-radius: 21px;
    }
    .onboarding-tour__card[data-placement="top"] {
      top: max(12px, env(safe-area-inset-top)) !important; bottom: auto;
    }
    .onboarding-tour__copy h2 { font-size: clamp(1.3rem, 6vw, 1.62rem); }
    .onboarding-tour__copy p { font-size: .76rem; }
    .onboarding-tour__keys { display: none; }
  }

  @media (max-width: 390px) {
    .onboarding-tour__card { padding: 16px; }
    .onboarding-tour__actions { align-items: stretch; flex-direction: column-reverse; }
    .onboarding-tour__actions > span { display: grid; grid-template-columns: .8fr 1.2fr; }
    .onboarding-tour__actions .button { width: 100%; }
    .onboarding-tour__skip { align-self: center; }
  }

  @media (max-height: 610px) and (min-width: 761px) {
    .onboarding-tour__card { gap: 10px; padding: 17px; }
    .onboarding-tour__keys { display: none; }
  }
}

@layer motion {
  @keyframes onboardingPulse { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.16); } }
  @media (prefers-reduced-motion: reduce) {
    .onboarding-tour, .onboarding-tour__shield, .onboarding-tour__spotlight, .onboarding-tour__progress i { transition: none; }
    .onboarding-tour.is-routing .onboarding-tour__eyebrow::after { animation: none; }
  }
}

@layer pages {
  /* Superadmin visibility controls */
  .promotion-admin {
    padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(245 158 11 / .2); border-radius: 20px;
    background: radial-gradient(circle at 100% 0%, rgb(245 158 11 / .1), transparent 34%), var(--surface);
    box-shadow: 0 18px 48px rgb(0 0 0 / .16);
  }
  .promotion-admin__heading { align-items: flex-start; margin-bottom: 14px; }
  .promotion-admin__heading .eyebrow { color: #fcd34d; }
  .promotion-admin__tabs { max-width: 100%; flex: 0 1 auto; overflow-x: auto; }
  .promotion-admin__tabs .segmented__item { min-width: max-content; min-height: 44px; }
  .promotion-admin__notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 20px; padding: 11px 13px; border: 1px solid rgb(56 189 248 / .15); border-radius: 13px; color: var(--muted); background: rgb(56 189 248 / .045); font-size: .68rem; line-height: 1.5; }
  .promotion-admin__notice svg { flex: 0 0 auto; margin-top: 1px; color: #67e8f9; }
  .promotion-admin__notice strong { color: var(--text-soft); }
  .promotion-admin__subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
  .promotion-admin__subheading h3 { font-size: .96rem; }
  .promotion-admin__subheading p { max-width: 720px; margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.48; }
  .promotion-admin__controls { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(150px, .55fr) minmax(170px, .65fr) auto auto; gap: 8px; margin-top: 14px; }
  .promotion-admin__controls--topics { grid-template-columns: minmax(210px, 1fr) minmax(150px, .45fr) auto auto; }
  .promotion-admin__controls > input, .promotion-admin__controls > select { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background-color: var(--surface-2); }
  .promotion-admin__controls > input:focus, .promotion-admin__controls > select:focus { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); }
  .promotion-admin__controls > .button { min-height: 44px; }
  .promotion-admin__editor { margin-top: 16px; }
  .promotion-admin__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 9px; }
  .promotion-summary-stat { display: grid; min-width: 0; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
  .promotion-summary-stat small { overflow: hidden; color: var(--faint); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
  .promotion-summary-stat strong { color: var(--text-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
  .promotion-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .promotion-card { display: grid; min-width: 0; align-content: start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgb(245 158 11 / .035), transparent 45%), rgb(255 255 255 / .017); }
  .promotion-card.is-active { border-color: rgb(52 211 153 / .19); box-shadow: inset 3px 0 rgb(52 211 153 / .72); }
  .promotion-card.is-paused { border-color: rgb(245 158 11 / .18); }
  .promotion-card.is-cancelled, .promotion-card.is-completed, .promotion-card.is-expired { opacity: .72; }
  .promotion-card--skeleton { min-height: 280px; }
  .promotion-card__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
  .promotion-card__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #fcd34d; background: rgb(245 158 11 / .1); }
  .promotion-card__title { min-width: 0; }
  .promotion-card__title h4, .promotion-card__title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .promotion-card__title h4 { font-size: .84rem; }
  .promotion-card__title p { margin-top: 3px; color: var(--muted); font-size: .63rem; }
  .promotion-disclosure { color: #fde68a; font-weight: 760; }
  .promotion-status { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .045); font-size: .55rem; font-weight: 820; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
  .promotion-status.is-active { color: #a7f3d0; background: rgb(52 211 153 / .09); }
  .promotion-status.is-scheduled { color: #bae6fd; background: rgb(56 189 248 / .09); }
  .promotion-status.is-paused { color: #fde68a; background: rgb(245 158 11 / .09); }
  .promotion-status.is-exhausted { color: #fbcfe8; background: rgb(236 72 153 / .09); }
  .promotion-card__schedule { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
  .promotion-card__schedule svg { flex: 0 0 auto; margin-top: 1px; color: #fcd34d; }
  .promotion-card__settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .promotion-card__settings > div { min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgb(0 0 0 / .13); }
  .promotion-card__settings dt { color: var(--faint); font-size: .56rem; }
  .promotion-card__settings dd { margin: 2px 0 0; overflow: hidden; color: var(--text-soft); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .promotion-card__settings--compact { grid-template-columns: 1fr 1fr; }
  .promotion-card__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .promotion-metric { display: flex; min-width: 0; align-items: center; gap: 6px; }
  .promotion-metric > svg { flex: 0 0 auto; color: var(--faint); }
  .promotion-metric > span { display: grid; min-width: 0; }
  .promotion-metric small { color: var(--faint); font-size: .51rem; }
  .promotion-metric strong { overflow: hidden; color: var(--text-soft); font-size: .7rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
  .promotion-card__caps { display: grid; gap: 7px; }
  .promotion-card__caps > div { display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-size: .57rem; }
  .promotion-card__progress { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .06); }
  .promotion-card__progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #ec4899); }
  .promotion-card__no-cap { color: var(--faint); font-size: .58rem; }
  .promotion-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: auto; }
  .promotion-card__actions .button { min-height: 44px; padding-inline: 12px; font-size: .68rem; }
  .promotion-admin__empty { display: flex; min-height: 140px; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 12px; padding: 22px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); text-align: left; }
  .promotion-admin__empty > svg { color: #fcd34d; }
  .promotion-admin__empty strong { color: var(--text-soft); font-size: .8rem; }
  .promotion-admin__empty p { margin-top: 3px; font-size: .67rem; }

  .global-reach-admin__badge { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid rgb(52 211 153 / .22); border-radius: 999px; color: #a7f3d0; background: rgb(5 150 105 / .09); font-size: .57rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
  .global-reach-admin__guardrail { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px; border: 1px solid rgb(56 189 248 / .15); border-radius: 14px; color: var(--muted); background: rgb(8 145 178 / .05); }
  .global-reach-admin__guardrail > svg { color: #67e8f9; }
  .global-reach-admin__guardrail p { font-size: .66rem; line-height: 1.5; }
  .global-reach-admin__guardrail strong { color: var(--text-soft); }
  .global-reach-admin__section { display: grid; gap: 9px; margin-top: 15px; }
  .global-reach-admin__section > h4, .global-reach-admin__search-heading h4 { color: var(--text-soft); font-size: .82rem; }
  .global-reach-admin__search-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .global-reach-admin__search-heading p { margin-top: 3px; color: var(--muted); font-size: .63rem; }
  .global-reach-admin__search { width: min(420px, 100%); min-height: 44px; }
  .global-reach-admin__search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
  .global-reach-results { display: grid; gap: 7px; }
  .global-reach-user { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) minmax(112px, .35fr) auto; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .018); }
  .global-reach-user.is-enabled { border-color: rgb(52 211 153 / .2); background: rgb(5 150 105 / .045); }
  .global-reach-user.is-locked { box-shadow: inset 3px 0 rgb(52 211 153 / .68); }
  .global-reach-user.is-ineligible { border-color: rgb(251 191 36 / .22); background: rgb(120 53 15 / .045); }
  .global-reach-user.is-ineligible .global-reach-user__state small { color: #fcd34d; }
  .global-reach-user__identity, .global-reach-user__state { display: grid; min-width: 0; gap: 2px; }
  .global-reach-user__identity strong { overflow: hidden; color: var(--text-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .global-reach-user__identity small, .global-reach-user__state small { overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
  .global-reach-user__state { text-align: right; }
  .global-reach-user__state strong { color: var(--muted); font-size: .72rem; }
  .global-reach-user__state.is-enabled strong { color: #6ee7b7; }
  .global-reach-user > .button { min-width: 118px; min-height: 44px; }
  .global-reach-user--skeleton { min-height: 66px; }

  .promotion-editor { display: grid; gap: 14px; padding: 17px; border: 1px solid rgb(245 158 11 / .22); border-radius: 16px; background: linear-gradient(145deg, rgb(245 158 11 / .05), transparent 34%), rgb(7 7 11 / .25); }
  .promotion-editor__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
  .promotion-editor__heading h4 { margin-top: 4px; font-size: 1rem; }
  .promotion-editor__heading .icon-button { min-width: 44px; min-height: 44px; }
  .promotion-editor .field input, .promotion-editor .field select { min-height: 44px; }
  .promotion-editor__hint { color: var(--faint); font-size: .6rem; font-weight: 520; line-height: 1.4; }
  .promotion-editor__post-field { display: grid; gap: 7px; }
  .promotion-editor__post-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .promotion-editor__post-control .button { min-height: 44px; }
  .promotion-editor__post-preview { display: none; min-height: 48px; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgb(255 255 255 / .018); }
  .promotion-editor__post-preview:not(:empty) { display: flex; }
  .promotion-editor__post-preview.is-valid { border-color: rgb(52 211 153 / .2); }
  .promotion-editor__post-preview.is-valid > svg { flex: 0 0 auto; color: #6ee7b7; }
  .promotion-editor__post-preview > span { display: grid; min-width: 0; }
  .promotion-editor__post-preview strong, .promotion-editor__post-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .promotion-editor__post-preview strong { color: var(--text-soft); font-size: .7rem; }
  .promotion-editor__post-preview small { font-size: .61rem; }
  .promotion-editor__results { display: grid; max-height: 238px; gap: 5px; padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: rgb(7 7 11 / .38); }
  .promotion-editor__results[hidden] { display: none; }
  .promotion-editor__results-loading { display: flex; min-height: 56px; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .68rem; }
  .promotion-editor__results-loading .spinner { width: 19px; height: 19px; }
  .promotion-editor__results-empty { padding: 13px; color: var(--muted); font-size: .68rem; text-align: center; }
  .promotion-editor__result { display: grid; min-height: 54px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
  .promotion-editor__result:hover, .promotion-editor__result:focus-visible { border-color: var(--line-strong); background: rgb(255 255 255 / .045); }
  .promotion-editor__result-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: var(--violet-light); background: var(--gradient-soft); }
  .promotion-editor__result > span:last-child { display: grid; min-width: 0; }
  .promotion-editor__result strong, .promotion-editor__result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .promotion-editor__result strong { font-size: .7rem; }
  .promotion-editor__result small { color: var(--muted); font-size: .61rem; }
  .promotion-editor__fixed-label { display: grid; gap: 7px; align-content: start; color: var(--text-soft); font-size: .78rem; font-weight: 670; }
  .promotion-editor__fixed-label strong { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border: 1px solid rgb(252 211 77 / .2); border-radius: 11px; color: #fef3c7; background: rgb(245 158 11 / .055); font-size: .75rem; }
  .promotion-editor__fixed-label small { color: var(--faint); font-size: .6rem; font-weight: 520; line-height: 1.4; }
  .promotion-editor__hashtag-field { display: grid; align-content: start; gap: 7px; }
  .promotion-editor__timezone { margin-top: -7px; color: var(--faint); font-size: .6rem; }
  .promotion-editor__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .promotion-editor__limit-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border: 1px solid rgb(56 189 248 / .15); border-radius: 12px; color: var(--muted); background: rgb(56 189 248 / .045); font-size: .66rem; line-height: 1.45; }
  .promotion-editor__limit-note svg { flex: 0 0 auto; margin-top: 1px; color: #67e8f9; }
  .promotion-editor__limit-note strong { color: var(--text-soft); }
  .promotion-editor__actions { display: flex; justify-content: flex-end; gap: 8px; }
  .promotion-editor__actions .button { min-height: 44px; }
  .promotion-editor__feedback:empty { display: none; }

  .topic-boost-card__icon { color: #67e8f9; background: rgb(34 211 238 / .09); }
  .topic-boost-card__value { display: flex; align-items: baseline; gap: 8px; }
  .topic-boost-card__value strong { color: #67e8f9; font-size: 1.6rem; letter-spacing: -.04em; }
  .topic-boost-card__value span { color: var(--muted); font-size: .63rem; }

  /* Etichette pubbliche: chiare ma leggere sopra il contenuto. */
  .post-disclosure { display: inline-flex; width: max-content; max-width: 100%; min-height: 25px; align-items: center; gap: 5px; margin: -1px 0 7px; padding: 3px 8px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; color: white; background: rgb(0 0 0 / .28); font-size: .61rem; font-weight: 780; letter-spacing: .01em; text-shadow: 0 1px 5px rgb(0 0 0 / .75); backdrop-filter: blur(6px); }
  .post-disclosure svg { flex: 0 0 auto; }
  .post-disclosure span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-disclosure--sponsored { border-color: rgb(252 211 77 / .34); color: #fef3c7; }
  .post-disclosure--mixyu { border-color: rgb(167 243 208 / .28); color: #d1fae5; background: rgb(5 78 59 / .28); }
  .post-disclosure--topic { border-color: rgb(103 232 249 / .25); color: #cffafe; background: rgb(8 47 73 / .24); }
  .post-sponsored-cta { display: inline-flex; width: max-content; max-width: 100%; min-height: 44px; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 13px; border: 1px solid rgb(255 255 255 / .25); border-radius: 11px; color: white; background: rgb(0 0 0 / .28); font-size: .72rem; font-weight: 800; text-shadow: 0 1px 5px rgb(0 0 0 / .7); backdrop-filter: blur(7px); transition: background .18s, transform .18s; }
  .post-sponsored-cta:hover { background: rgb(0 0 0 / .48); transform: translateY(-1px); }
  .post-sponsored-cta svg { flex: 0 0 auto; }
  .feed-card--sponsored .feed-card__stage,
  .feed-card--global-reach .feed-card__stage { box-shadow: none; }
}

@layer responsive {
  @media (max-width: 1020px) {
    .promotion-admin__heading { align-items: stretch; flex-direction: column; }
    .promotion-admin__tabs { width: max-content; }
    .promotion-admin__controls { grid-template-columns: minmax(190px, 1fr) minmax(140px, .6fr) minmax(160px, .7fr); }
    .promotion-admin__controls > .button { width: 100%; }
    .promotion-admin__controls--topics { grid-template-columns: minmax(190px, 1fr) minmax(140px, .55fr) auto auto; }
    .promotion-editor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 760px) {
    .promotion-admin { margin-inline: -4px; padding: 16px; border-radius: 16px; }
    .promotion-admin__heading, .promotion-admin__subheading { align-items: stretch; flex-direction: column; }
    .promotion-admin__tabs { width: 100%; }
    .promotion-admin__tabs .segmented__item { flex: 1; }
    .promotion-admin__controls, .promotion-admin__controls--topics { grid-template-columns: 1fr 1fr; }
    .promotion-admin__controls > input { grid-column: 1 / -1; }
    .promotion-admin__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promotion-list { grid-template-columns: 1fr; }
    .global-reach-admin__search-heading { align-items: stretch; flex-direction: column; }
    .global-reach-admin__search { width: 100%; }
    .global-reach-user { grid-template-columns: auto minmax(0, 1fr) auto; }
    .global-reach-user__state { grid-column: 2; text-align: left; }
    .global-reach-user > .button { grid-row: 1 / span 2; grid-column: 3; min-width: 104px; }
    .promotion-editor { padding: 14px; }
    .promotion-editor .form-row, .promotion-editor__grid { grid-template-columns: 1fr; }
    .promotion-editor__post-control { grid-template-columns: 1fr; }
    .promotion-editor__actions { align-items: stretch; flex-direction: column-reverse; }
    .promotion-editor__actions .button { width: 100%; }
    .post-sponsored-cta { min-height: 44px; }
  }

  @media (max-width: 390px) {
    .promotion-admin__controls, .promotion-admin__controls--topics { grid-template-columns: 1fr; }
    .promotion-admin__controls > input { grid-column: auto; }
    .promotion-card__header { grid-template-columns: auto minmax(0, 1fr); }
    .promotion-card__header .promotion-status { grid-column: 1 / -1; justify-self: start; }
    .promotion-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promotion-card__actions { align-items: stretch; flex-direction: column; }
    .promotion-card__actions .button { width: 100%; }
    .global-reach-user { grid-template-columns: auto minmax(0, 1fr); }
    .global-reach-user__state { grid-column: 2; }
    .global-reach-user > .button { grid-row: auto; grid-column: 1 / -1; width: 100%; }
  }
}

@layer layout {
  .app-legal-footer {
    display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px;
    margin-left: var(--sidebar); padding: 20px clamp(24px, 4vw, 60px) 26px; border-top: 1px solid var(--line);
    color: var(--faint); background: rgb(9 9 13 / .7); font-size: .67rem;
  }
  .app-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; }
  .app-legal-footer a:hover { color: white; }
  body[data-route="/"] .app-legal-footer, body[data-route^="/watch/"] .app-legal-footer,
  body[data-route^="/messages"] .app-legal-footer, body[data-route="/notifications"] .app-legal-footer { display: none; }
  .app-shell--standalone .app-legal-footer { display: none; }
}

@layer components {
  .sidebar__utility { display: grid; gap: 10px; padding-inline: 10px; color: var(--faint); font-size: .66rem; }
  .sidebar__utility > a { display: flex; min-height: 32px; align-items: center; gap: 8px; }
  .sidebar__utility a:hover { color: white; }
  .sidebar__legal-links { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .auth-form__age-note { display: flex; align-items: flex-start; gap: 7px; margin-top: -6px; color: var(--faint); font-size: .65rem; line-height: 1.45; }
  .auth-form__age-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--violet-light); }
  .auth-form__legal-status { min-height: 20px; color: var(--faint); font-size: .65rem; line-height: 1.45; }
  .auth-form__legal-status .inline-error { font-size: .7rem; }
  .auth-form[aria-busy="true"] > .button:last-child { cursor: wait; opacity: .55; }
  .check-field a { color: var(--violet-light); text-decoration: underline; text-decoration-color: rgb(167 139 250 / .35); text-underline-offset: 2px; }
  .login-card__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; color: var(--faint); font-size: .62rem; }
  .login-card__legal a:hover { color: white; }

  .verified-badge--inline {
    position: static; display: inline-grid; width: 15px; height: 15px; margin-left: 4px; border: 0; vertical-align: -2px;
    color: white; background: #3b82f6; box-shadow: 0 0 0 1px rgb(255 255 255 / .12);
  }
  .post-author__identity > a, .comment__meta > a, .story-viewer__owner strong, .chat-header__person strong { display: inline-flex; min-width: 0; align-items: center; }

  .comment__report { width: 44px; min-width: 44px; height: 44px; min-height: 44px; opacity: .38; }
  .comment:hover .comment__report, .comment__report:focus-visible { opacity: 1; }
  .comment__report:hover { color: var(--danger); }
  .message-bubble__report {
    position: absolute; top: 50%; left: calc(100% + 4px); display: grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px; place-items: center;
    border-radius: 50%; opacity: 0; color: var(--muted); background: var(--surface-2); cursor: pointer;
    transform: translateY(-50%); transition: opacity .2s, color .2s;
  }
  .message-bubble:hover .message-bubble__report, .message-bubble__report:focus-visible { opacity: 1; }
  .message-bubble__report:hover { color: var(--danger); }
  .profile-status-viewer__identity { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
  .profile-status-viewer__identity strong { display: inline-flex; min-width: 0; align-items: center; }
  .profile-status-viewer__report { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin-left: auto; color: rgb(255 255 255 / .76); background: rgb(0 0 0 / .15); }

  .report-modal { width: min(680px, 100%); }
  .report-dialog { display: grid; gap: 18px; padding: 30px 30px max(30px, env(safe-area-inset-bottom)); }
  .report-dialog__heading { display: flex; align-items: flex-start; gap: 13px; padding-right: 38px; }
  .report-dialog__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #fecdd3; background: rgb(244 63 94 / .09); }
  .report-dialog__heading h2 { margin-top: 3px; font-size: clamp(1.35rem, 5vw, 1.8rem); letter-spacing: -.035em; }
  .report-dialog__heading p { max-width: 520px; margin-top: 5px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
  .report-dialog__feedback:empty { display: none; }
  .report-reasons { display: grid; max-height: min(40dvh, 360px); overflow-y: auto; gap: 7px; padding-right: 3px; }
  .report-reason { display: grid; min-height: 61px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgb(255 255 255 / .018); text-align: left; cursor: pointer; }
  .report-reason:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .035); }
  .report-reason.is-selected { border-color: rgb(167 139 250 / .58); background: var(--gradient-soft); }
  .report-reason__indicator { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--surface); }
  .report-reason.is-selected .report-reason__indicator { border-color: var(--violet-light); background: var(--violet-light); }
  .report-reason__copy { display: grid; min-width: 0; gap: 2px; }
  .report-reason__copy strong { font-size: .78rem; }
  .report-reason__copy small { color: var(--muted); font-size: .64rem; line-height: 1.35; }
  .report-dialog__details { position: relative; }
  .report-dialog__details textarea { min-height: 104px; padding-bottom: 29px; }
  .report-dialog__confirm { padding-block: 2px; }
  .report-dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .report-dialog__actions small { max-width: 330px; color: var(--faint); font-size: .62rem; line-height: 1.4; }
  .report-context-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid rgb(56 189 248 / .15); border-radius: 13px; background: rgb(56 189 248 / .045); }
  .report-context-card > svg { flex: 0 0 auto; color: var(--cyan); }
  .report-context-card > span { display: grid; gap: 2px; }
  .report-context-card strong { font-size: .76rem; }
  .report-context-card small { color: var(--muted); font-size: .65rem; }
  .report-dialog__safety-notice { border-color: rgb(251 113 133 / .24); background: rgb(244 63 94 / .055); }
  .report-dialog__safety-notice > svg { color: #fda4af; }
  .report-dialog__safety-notice a { color: var(--violet-light); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .report-success { display: grid; justify-items: center; padding: 54px 30px max(42px, env(safe-area-inset-bottom)); text-align: center; }
  .report-success__icon { display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 18px; border-radius: 20px; color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .report-success h2 { margin-top: 5px; font-size: 1.7rem; letter-spacing: -.04em; }
  .report-success p { max-width: 480px; margin-top: 9px; color: var(--muted); }
  .report-success code { margin-top: 15px; padding: 6px 10px; border-radius: 8px; color: var(--violet-light); background: rgb(139 92 246 / .08); }
  .report-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
}

@layer pages {
  .legal-page, .help-page, .legal-notice-page { max-width: 1160px; }
  .legal-tabs { position: sticky; top: 0; z-index: 12; display: inline-flex; gap: 4px; margin: -18px 0 38px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgb(21 21 28 / .88); backdrop-filter: blur(16px); }
  .legal-tabs a { display: grid; min-height: 38px; place-items: center; padding: 0 16px; border-radius: 9px; color: var(--muted); font-size: .75rem; font-weight: 750; }
  .legal-tabs a.is-active { color: white; background: var(--surface-3); box-shadow: var(--shadow-sm); }
  .legal-hero { max-width: 850px; }
  .legal-hero h1 { margin-top: 7px; font-size: clamp(2.15rem, 6vw, 4.3rem); letter-spacing: -.065em; line-height: .98; }
  .legal-hero > p { max-width: 720px; margin-top: 18px; color: var(--text-soft); font-size: clamp(.92rem, 1.6vw, 1.08rem); line-height: 1.7; }
  .legal-version { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--faint); font-size: .68rem; }
  .legal-review-note { display: flex; max-width: 850px; align-items: flex-start; gap: 11px; margin-top: 26px; padding: 14px 15px; border: 1px solid rgb(245 158 11 / .2); border-radius: 14px; color: #fde68a; background: rgb(245 158 11 / .055); }
  .legal-review-note > svg { flex: 0 0 auto; margin-top: 1px; }
  .legal-review-note strong { font-size: .75rem; }
  .legal-review-note p { margin-top: 3px; color: #d6c9a2; font-size: .67rem; line-height: 1.5; }
  .legal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
  .legal-summary article { display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgb(139 92 246 / .06), transparent), var(--surface); }
  .legal-summary svg { color: var(--violet-light); }
  .legal-summary strong { font-size: .82rem; }
  .legal-summary p { color: var(--muted); font-size: .7rem; line-height: 1.5; }
  .legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); margin-top: 54px; align-items: start; }
  .legal-toc { position: sticky; top: 28px; display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
  .legal-toc > strong { margin-bottom: 7px; font-size: .72rem; }
  .legal-toc > a { padding: 7px 8px; border-radius: 8px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
  .legal-toc > a:hover { color: white; background: rgb(255 255 255 / .04); }
  .legal-toc .legal-toc__help { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--violet-light); }
  .legal-document { min-width: 0; }
  .legal-document > section { scroll-margin-top: 24px; padding: 0 0 34px; }
  .legal-document h2 { font-size: clamp(1.2rem, 3vw, 1.55rem); letter-spacing: -.025em; }
  .legal-document p { margin-top: 11px; color: var(--text-soft); font-size: .86rem; line-height: 1.75; }
  .legal-document__footer { padding: 24px; border: 1px solid rgb(167 139 250 / .2); border-radius: 18px; background: var(--gradient-soft); }
  .legal-document__footer p { margin: 5px 0 16px; color: var(--muted); }
  .legal-document__footer .button { margin: 0 7px 7px 0; }

  .legal-notice-page { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(30px, 6vw, 76px); align-items: start; }
  .legal-notice-hero { position: sticky; top: 30px; padding-top: 14px; }
  .legal-notice-hero__back { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; margin-bottom: 34px; color: var(--muted); font-size: .69rem; }
  .legal-notice-hero__back:hover { color: white; }
  .legal-notice-hero h1 { max-width: 510px; margin-top: 8px; font-size: clamp(2.2rem, 5.8vw, 4.6rem); letter-spacing: -.065em; line-height: .96; }
  .legal-notice-hero > p { max-width: 520px; margin-top: 17px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
  .legal-notice-page__content { display: grid; min-width: 0; gap: 14px; }
  .legal-notice-form { display: grid; gap: 16px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle at 100% 0%, rgb(244 63 94 / .065), transparent 26%), var(--surface); box-shadow: var(--shadow-sm); }
  .legal-notice-form__section { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; margin: 4px 0 2px; }
  .legal-notice-form__section h2 { font-size: 1.08rem; letter-spacing: -.02em; }
  .legal-notice-form__section p { margin-top: 4px; color: var(--muted); font-size: .69rem; line-height: 1.5; }
  .legal-notice-form__step { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; color: #fecdd3; background: rgb(244 63 94 / .09); font-size: .68rem; font-weight: 850; }
  .legal-notice-form__safety { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid rgb(245 158 11 / .17); border-radius: 13px; color: #fde68a; background: rgb(245 158 11 / .045); }
  .legal-notice-form__safety svg { flex: 0 0 auto; margin-top: 1px; }
  .legal-notice-form__safety p { color: #d6c9a2; font-size: .66rem; line-height: 1.5; }
  .legal-notice-form__safety strong { color: #fde68a; }
  .legal-notice-form__anonymous, .legal-notice-form__confirmation { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
  .legal-notice-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 4px; }
  .legal-notice-form__actions p { max-width: 330px; color: var(--faint); font-size: .62rem; line-height: 1.45; }
  .legal-notice-receipt { display: grid; min-height: 520px; place-items: center; align-content: center; padding: 34px; text-align: center; }
  .legal-notice-receipt h2 { margin-top: 7px; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.045em; }
  .legal-notice-receipt > p { max-width: 480px; margin-top: 10px; color: var(--muted); line-height: 1.6; }
  .legal-notice-receipt code { margin-top: 17px; padding: 8px 11px; border-radius: 9px; color: #c4b5fd; background: rgb(139 92 246 / .09); font-size: .76rem; }
  .legal-notice-receipt__credentials { display: grid; width: min(520px, 100%); gap: 8px; margin-top: 17px; text-align: left; }
  .legal-notice-receipt__credentials > span { display: grid; gap: 4px; }
  .legal-notice-receipt__credentials small { color: var(--faint); font-size: .59rem; font-weight: 760; text-transform: uppercase; }
  .legal-notice-receipt__credentials code { overflow-x: auto; margin-top: 0; white-space: nowrap; }
  .legal-notice-receipt .legal-notice-receipt__status { margin-top: 12px; color: #a7f3d0; font-size: .66rem; font-weight: 720; }
  .legal-notice-receipt .legal-notice-receipt__warning { max-width: 520px; margin-top: 13px; color: #fde68a; font-size: .66rem; }
  .legal-notice-status { display: grid; gap: 14px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(56 189 248 / .15); border-radius: 20px; background: rgb(56 189 248 / .035); }
  .legal-notice-status__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .legal-notice-status__actions small { color: var(--faint); font-size: .61rem; }
  .legal-notice-status__result:empty { display: none; }
  .legal-notice-status-card { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgb(0 0 0 / .12); }
  .legal-notice-status-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .legal-notice-status-card > p, .legal-notice-status-card > small { color: var(--muted); font-size: .66rem; }

  .help-hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(circle at 85% 10%, rgb(236 72 153 / .15), transparent 35%), radial-gradient(circle at 12% 0%, rgb(56 189 248 / .1), transparent 32%), var(--surface); }
  .help-hero__glow { position: absolute; top: -100px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgb(139 92 246 / .08); filter: blur(35px); }
  .help-hero h1 { position: relative; margin-top: 7px; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.06em; line-height: 1; }
  .help-hero > p { position: relative; max-width: 630px; margin-top: 12px; color: var(--muted); }
  .help-search { position: relative; width: min(620px, 100%); margin-top: 25px; background: rgb(9 9 13 / .62); }
  .help-search-status { min-height: 18px; margin-top: 8px; color: var(--faint); font-size: .65rem; }
  .help-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  .help-action--legal { border-color: rgb(244 63 94 / .16); background: linear-gradient(120deg, rgb(244 63 94 / .045), transparent 45%), var(--surface); }
  .help-action { display: grid; min-width: 0; min-height: 88px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
  .help-action:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .help-action__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--violet-light); background: var(--gradient-soft); }
  .help-action > span:nth-child(2) { display: grid; min-width: 0; }
  .help-action strong { font-size: .78rem; }
  .help-action small { margin-top: 3px; color: var(--muted); font-size: .63rem; line-height: 1.35; }
  .help-action > svg { color: var(--faint); }
  .help-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .help-category { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
  .help-category > header { display: flex; align-items: flex-start; gap: 11px; padding: 17px; }
  .help-category__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--cyan); background: rgb(56 189 248 / .07); }
  .help-category h3 { font-size: .88rem; }
  .help-category header p { margin-top: 3px; color: var(--muted); font-size: .66rem; }
  .help-article { border-top: 1px solid var(--line); }
  .help-article__toggle { display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 17px; color: var(--text-soft); background: transparent; font-size: .73rem; font-weight: 690; text-align: left; cursor: pointer; }
  .help-article__toggle:hover { color: white; background: rgb(255 255 255 / .025); }
  .help-article__toggle svg { flex: 0 0 auto; transition: transform .2s; }
  .help-article__toggle.is-open svg { transform: rotate(180deg); }
  .help-article__panel { padding: 0 17px 17px; color: var(--muted); font-size: .71rem; line-height: 1.6; }
  .help-no-results { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 17px; }
  .help-history { scroll-margin-top: 20px; }
  .help-history__group + .help-history__group { margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
  .help-history__subheading { margin-bottom: 10px; }
  .help-history__subheading h3 { font-size: .88rem; letter-spacing: -.015em; }
  .help-history__subheading p { margin-top: 3px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
  .help-history__list { display: grid; gap: 8px; }
  .help-ticket { display: grid; min-height: 70px; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
  .help-ticket--decision { border-color: rgb(56 189 248 / .14); background: linear-gradient(110deg, rgb(56 189 248 / .035), transparent 46%), var(--surface); }
  .help-ticket__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
  .help-ticket__icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--violet-light); background: var(--gradient-soft); }
  .help-ticket__copy { display: grid; min-width: 0; }
  .help-ticket__copy strong { font-size: .76rem; }
  .help-ticket__copy small { overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
  .help-ticket__status { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / .045); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
  .help-ticket__status.is-reviewing { color: #fde68a; background: rgb(245 158 11 / .08); }
  .help-ticket__status.is-resolved { color: #a7f3d0; background: rgb(52 211 153 / .08); }
  .help-ticket__decision { display: grid; gap: 4px; padding: 10px 11px; border-radius: 10px; color: var(--muted); background: rgb(255 255 255 / .025); font-size: .66rem; line-height: 1.5; }
  .help-ticket__decision strong { color: var(--text-soft); }
  .help-ticket__decision small { display: block; color: var(--faint); }
  .help-ticket__decision b, .help-ticket__appeal b { color: var(--text-soft); }
  .help-ticket__appeal { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid rgb(245 158 11 / .15); border-radius: 11px; color: var(--muted); background: rgb(245 158 11 / .045); font-size: .65rem; line-height: 1.5; }
  .help-ticket__appeal > span { display: inline-flex; align-items: center; gap: 6px; color: #fde68a; }
  .help-ticket__appeal.is-overturned, .help-ticket__appeal.is-partially_overturned { border-color: rgb(52 211 153 / .16); background: rgb(52 211 153 / .045); }
  .help-ticket__appeal.is-overturned > span, .help-ticket__appeal.is-partially_overturned > span { color: #a7f3d0; }
  .help-ticket__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 3px; }
  .help-ticket__actions small { max-width: 520px; color: var(--faint); font-size: .59rem; line-height: 1.4; }
  .help-ticket__safe-note { max-width: 500px; color: var(--faint); font-size: .59rem; line-height: 1.4; }
  .help-ticket__action-buttons { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
  .help-ticket__action-buttons .text-button, .help-ticket__actions > .text-button { min-height: 44px; }
  .help-history__empty, .help-signin { display: flex; min-height: 92px; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .help-history__empty > svg, .help-signin > svg { flex: 0 0 auto; color: var(--violet-light); }
  .help-history__empty > span, .help-signin > div { display: grid; flex: 1; }
  .help-history__empty small, .help-signin p { color: var(--muted); font-size: .67rem; }
  .help-signin { margin-top: 30px; }

  .moderation-admin { margin-bottom: 14px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(251 113 133 / .18); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgb(244 63 94 / .08), transparent 34%), var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .16); }
  .moderation-admin__heading { align-items: flex-start; margin-bottom: 18px; }
  .moderation-admin__heading .eyebrow { color: #fda4af; }
  .moderation-admin__tabs { max-width: 100%; flex: 0 1 auto; overflow-x: auto; }
  .moderation-admin__tabs .segmented__item { min-width: max-content; }
  .moderation-admin__subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 5px; }
  .moderation-admin__subheading h3 { font-size: .94rem; }
  .moderation-admin__subheading p { max-width: 620px; margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
  .moderation-admin__compact-controls { display: flex; flex: 0 0 auto; gap: 8px; }
  .moderation-admin__compact-controls select { min-width: 170px; min-height: 40px; }
  .moderation-lanes { display: flex; width: fit-content; max-width: 100%; gap: 4px; margin-bottom: 11px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgb(0 0 0 / .13); }
  .moderation-lane__item { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; padding: 7px 11px; border-radius: 9px; color: var(--muted); font-size: .64rem; font-weight: 760; cursor: pointer; }
  .moderation-lane__item:hover { color: var(--text); background: rgb(255 255 255 / .035); }
  .moderation-lane__item.is-active { color: white; background: rgb(139 92 246 / .15); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .18); }
  .moderation-lane__item:nth-child(2).is-active { color: #a5f3fc; background: rgb(6 182 212 / .1); box-shadow: inset 0 0 0 1px rgb(34 211 238 / .17); }
  .moderation-admin__controls { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)) auto auto; gap: 8px; }
  .moderation-admin__controls select { min-height: 40px; }
  .moderation-admin__urgent.is-active { color: #fecdd3; border-color: rgb(244 63 94 / .3); background: rgb(244 63 94 / .08); }
  .moderation-admin__summary { min-height: 22px; margin: 12px 1px 7px; color: var(--faint); font-size: .65rem; }
  .moderation-report-list, .verification-results { display: grid; gap: 8px; }
  .moderation-report { display: grid; min-height: 140px; gap: 11px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgb(255 255 255 / .018); }
  .moderation-report.is-technical { border-color: rgb(34 211 238 / .16); background: linear-gradient(115deg, rgb(6 182 212 / .035), transparent 42%), rgb(255 255 255 / .018); }
  .moderation-report.is-technical .moderation-report__kind { color: #a5f3fc; }
  .moderation-report.is-moderation .moderation-report__kind { color: #fda4af; }
  .moderation-appeal { border-color: rgb(245 158 11 / .15); background: linear-gradient(115deg, rgb(245 158 11 / .035), transparent 42%), rgb(255 255 255 / .018); }
  .moderation-appeal .moderation-report__kind { color: #fde68a; }
  .moderation-legal-notice { border-color: rgb(244 63 94 / .17); background: linear-gradient(115deg, rgb(244 63 94 / .045), transparent 42%), rgb(255 255 255 / .018); }
  .moderation-legal-notice .moderation-report__kind { color: #fecdd3; }
  .moderation-legal-notice.is-urgent { border-color: rgb(244 63 94 / .34); box-shadow: inset 3px 0 #f43f5e; }
  .moderation-report__header, .moderation-report__title, .moderation-report__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .moderation-report__kind { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .62rem; font-weight: 790; text-transform: uppercase; }
  .moderation-report__state { display: inline-flex; align-items: center; gap: 7px; }
  .moderation-report__priority { width: auto; min-height: 28px; padding: 0 26px 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background-color: rgb(255 255 255 / .035); font-size: .57rem; font-weight: 780; }
  .moderation-report__priority.is-urgent { color: #fecdd3; border-color: rgb(244 63 94 / .28); }
  .moderation-report__priority.is-high { color: #fed7aa; border-color: rgb(249 115 22 / .25); }
  .moderation-report__status { padding: 5px 8px; border-radius: 999px; color: #fecdd3; background: rgb(244 63 94 / .08); font-size: .56rem; font-weight: 820; text-transform: uppercase; }
  .moderation-report__status.is-triaged, .moderation-report__status.is-in_progress, .moderation-report__status.is-awaiting_user { color: #fde68a; background: rgb(245 158 11 / .08); }
  .moderation-report__status.is-resolved { color: #a7f3d0; background: rgb(52 211 153 / .08); }
  .moderation-report__status.is-dismissed { color: var(--muted); background: rgb(255 255 255 / .045); }
  .moderation-report__title h3 { font-size: .9rem; }
  .moderation-report__title p { color: var(--muted); font-size: .64rem; }
  .moderation-report__reporter { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: .68rem; }
  .moderation-report__details { color: var(--text-soft); font-size: .73rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .moderation-report__details.is-empty { color: var(--faint); font-style: italic; }
  .moderation-report blockquote { margin: 0; padding: 10px 12px; border-left: 2px solid var(--violet); color: var(--muted); background: rgb(0 0 0 / .13); font-size: .68rem; }
  .moderation-report__source { display: inline-flex; width: max-content; align-items: center; gap: 6px; color: var(--violet-light); font-size: .65rem; }
  .moderation-report__actions { justify-content: flex-end; }
  .moderation-admin__empty { display: flex; min-height: 96px; align-items: center; justify-content: center; gap: 12px; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: left; }
  .moderation-admin__empty > svg { color: var(--violet-light); }
  .moderation-admin__empty strong { color: var(--text-soft); font-size: .78rem; }
  .moderation-admin__empty p { margin-top: 3px; font-size: .66rem; }
  .verification-search { width: 100%; }
  .verification-guidance { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid rgb(56 189 248 / .14); border-radius: 13px; background: rgb(56 189 248 / .045); }
  .verification-guidance > svg { flex: 0 0 auto; color: var(--cyan); }
  .verification-guidance strong { font-size: .74rem; }
  .verification-guidance p { margin-top: 2px; color: var(--muted); font-size: .64rem; }
  .verification-user { display: grid; min-height: 70px; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .018); }
  .verification-user__identity { display: grid; min-width: 0; }
  .verification-user__identity strong, .verification-user__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .verification-user__identity strong { font-size: .78rem; }
  .verification-user__identity small { color: var(--muted); font-size: .63rem; }
  .verification-user__state { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; color: var(--faint); background: rgb(255 255 255 / .04); font-size: .57rem; font-weight: 780; text-transform: uppercase; }
  .verification-user__state.is-verified { color: #bfdbfe; background: rgb(59 130 246 / .11); }
  .verification-user .button:disabled { cursor: not-allowed; opacity: .54; }
  .moderation-decision { display: grid; gap: 15px; padding: 31px; }
  .moderation-decision h2 { margin-top: -9px; font-size: 1.55rem; letter-spacing: -.035em; }
  .moderation-decision > p { margin-top: -8px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
  .moderation-decision__remedy { display: grid; gap: 12px; padding: 13px; border: 1px solid rgb(56 189 248 / .15); border-radius: 14px; background: rgb(56 189 248 / .035); }
  .moderation-decision__remedy[hidden] { display: none; }
  .moderation-decision__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 2px; }
  .verification-decision { width: min(650px, 100%); }
  .verification-decision__security { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgb(56 189 248 / .16); border-radius: 12px; color: #bae6fd; background: rgb(14 165 233 / .055); font-size: .66rem; line-height: 1.45; }
  .verification-decision__security svg { flex: 0 0 auto; margin-top: 1px; }
  .verification-decision__confirm { padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
}

@layer responsive {
  @media (max-width: 760px) {
    /* The mobile body already reserves --bottom-nav below the document. Keep
       ordinary footer padding here so long legal/settings pages do not finish
       with a second, empty navigation-height scroll area. */
    .app-legal-footer { margin-left: 0; padding: 22px 16px 24px; align-items: flex-start; flex-direction: column; }
    .app-legal-footer nav { justify-content: flex-start; }
    .sidebar__utility { display: none; }
    .auth-modal { max-height: 94dvh; }
    .auth-form { gap: 12px; }
    .report-dialog { padding: 25px 17px max(24px, env(safe-area-inset-bottom)); }
    .report-dialog__icon { display: none; }
    .report-reasons { max-height: 35dvh; }
    .report-dialog__actions { align-items: stretch; flex-direction: column; }
    .report-dialog__actions .button { width: 100%; }
    .message-bubble__report { left: calc(100% + 4px); opacity: .48; }
    .comment__report { opacity: .65; }
    .legal-page, .help-page, .legal-notice-page { padding-bottom: 40px; }
    .legal-tabs { top: var(--mobile-header); width: 100%; margin: -10px 0 28px; }
    .legal-tabs a { flex: 1; padding-inline: 8px; }
    .legal-summary { grid-template-columns: 1fr; }
    .legal-layout { grid-template-columns: 1fr; margin-top: 38px; }
    .legal-toc { position: static; }
    .legal-document > section { scroll-margin-top: calc(var(--mobile-header) + 16px); }
    .legal-notice-page { grid-template-columns: 1fr; gap: 26px; }
    .legal-notice-hero { position: static; padding-top: 0; }
    .legal-notice-hero__back { min-height: 44px; margin-bottom: 20px; }
    .legal-notice-form__actions, .legal-notice-status__actions { align-items: stretch; flex-direction: column; }
    .legal-notice-form__actions .button, .legal-notice-status__actions .button { width: 100%; }
    .legal-notice-receipt { min-height: 440px; padding-inline: 2px; }
    .legal-notice-receipt__credentials code { white-space: normal; word-break: break-all; }
    .help-hero { padding: 27px 19px; border-radius: 19px; }
    .help-quick-actions, .help-categories { grid-template-columns: 1fr; }
    .help-ticket__main { grid-template-columns: auto minmax(0, 1fr); }
    .help-ticket__status { grid-column: 2; justify-self: start; }
    .help-ticket__actions { align-items: flex-start; flex-direction: column; }
    .help-ticket__action-buttons { width: 100%; justify-content: flex-start; }
    .help-signin { align-items: stretch; flex-wrap: wrap; }
    .help-signin .button { width: 100%; }
    .moderation-admin { margin-inline: -4px; padding: 16px; border-radius: 16px; }
    .moderation-admin__heading { align-items: stretch; flex-direction: column; }
    .moderation-admin__tabs { width: 100%; }
    .moderation-admin__tabs .segmented__item { flex: 1 0 auto; }
    .moderation-admin__subheading { align-items: stretch; flex-direction: column; }
    .moderation-admin__compact-controls { display: grid; grid-template-columns: 1fr auto; }
    .moderation-admin__compact-controls select { min-width: 0; width: 100%; }
    .moderation-lanes { width: 100%; overflow-x: auto; }
    .moderation-lane__item { min-width: max-content; flex: 1; }
    .moderation-admin__controls { grid-template-columns: 1fr; }
    .moderation-report__title { align-items: flex-start; flex-direction: column; }
    .moderation-report__actions { align-items: stretch; flex-direction: column-reverse; }
    .moderation-report__actions .button { width: 100%; }
    .verification-user { grid-template-columns: auto minmax(0, 1fr); }
    .verification-user__state { grid-column: 2; justify-self: start; }
    .verification-user .button { grid-column: 1 / -1; width: 100%; }
    .moderation-decision { padding: 27px 18px max(24px, env(safe-area-inset-bottom)); }
    .moderation-decision__actions { flex-direction: column-reverse; }
    .moderation-decision__actions .button { width: 100%; }
  }

  @media (max-width: 390px) {
    .report-reason { min-height: 58px; padding: 9px 10px; }
    .report-reason__copy small { display: none; }
    .report-success__actions { width: 100%; }
    .report-success__actions .button { width: 100%; }
  }
}

@layer components {
  /* Stati profilo: momenti brevi separati dalle Stories. */
  .profile-status-control { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .profile-status-bubble, .profile-status-add { pointer-events: auto; }
  .profile-status-bubble {
    --status-bg: linear-gradient(145deg, #343440, #23232c);
    --status-accent: #a78bfa;
    position: absolute; bottom: calc(100% - 7px); left: 50%; display: flex; width: max-content; min-width: 94px; max-width: 180px; min-height: 45px;
    align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 1px solid rgb(255 255 255 / .16); border-radius: 17px;
    color: white; background: var(--status-bg); box-shadow: 0 12px 30px rgb(0 0 0 / .34), inset 0 1px rgb(255 255 255 / .1);
    font-size: .74rem; font-weight: 650; line-height: 1.24; text-align: center; cursor: pointer; transform: translateX(-50%);
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease);
  }
  .profile-status-bubble::after {
    position: absolute; right: 23px; bottom: -6px; width: 12px; height: 12px; border-right: 1px solid rgb(255 255 255 / .12); border-bottom: 1px solid rgb(255 255 255 / .12);
    background: inherit; content: ""; transform: rotate(45deg); border-bottom-right-radius: 3px;
  }
  .profile-status-bubble:hover { border-color: rgb(255 255 255 / .28); box-shadow: 0 15px 36px rgb(0 0 0 / .4), 0 0 0 3px color-mix(in srgb, var(--status-accent) 16%, transparent); transform: translateX(-50%) translateY(-2px); }
  .profile-status-bubble:focus-visible { outline: 3px solid rgb(56 189 248 / .38); outline-offset: 3px; }
  .profile-status-control.is-empty .profile-status-bubble { color: var(--text-soft); background: linear-gradient(145deg, rgb(44 44 55 / .96), rgb(28 28 36 / .96)); }
  .profile-status-bubble__text { display: -webkit-box; min-width: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .profile-status-bubble__emoji { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
  .profile-status-bubble__music { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: rgb(0 0 0 / .25); }
  .profile-status-add {
    position: absolute; right: -8px; bottom: -3px; z-index: 3; display: grid; width: 44px; height: 44px; place-items: center; padding: 0;
    border: 0; border-radius: 50%; color: white; background: transparent; cursor: pointer; isolation: isolate;
    transition: transform .18s var(--ease), box-shadow .18s;
  }
  .profile-status-add::before { position: absolute; inset: 7px; z-index: -1; border: 3px solid var(--bg); border-radius: 50%; background: var(--gradient); box-shadow: 0 7px 18px rgb(0 0 0 / .35); content: ""; }
  .profile-status-add:hover { transform: scale(1.08); }
  .profile-status-add:hover::before { box-shadow: 0 9px 22px rgb(139 92 246 / .32); }
  .profile-avatar.has-status-control .verified-badge { right: 31px; }

  .profile-status-bubble[data-theme="sunset"], [data-theme="sunset"] { --status-bg: linear-gradient(145deg, #f97316, #db2777); --status-accent: #fb7185; }
  .profile-status-bubble[data-theme="ocean"], [data-theme="ocean"] { --status-bg: linear-gradient(145deg, #0284c7, #2563eb 58%, #4f46e5); --status-accent: #38bdf8; }
  .profile-status-bubble[data-theme="violet"], [data-theme="violet"] { --status-bg: linear-gradient(145deg, #7c3aed, #a21caf); --status-accent: #c4b5fd; }
  .profile-status-bubble[data-theme="emerald"], [data-theme="emerald"] { --status-bg: linear-gradient(145deg, #059669, #0f766e); --status-accent: #6ee7b7; }
  .profile-status-bubble[data-theme="midnight"], [data-theme="midnight"] { --status-bg: linear-gradient(145deg, #242432, #0d0d14); --status-accent: #94a3b8; }
  .profile-status-bubble[data-theme="gradient"], [data-theme="gradient"] { --status-bg: linear-gradient(145deg, #7c3aed, #db2777); --status-accent: #f0abfc; }

  .profile-status-modal { width: min(720px, 100%); }
  .profile-status-composer { display: grid; gap: 17px; padding: 30px; }
  .profile-status-composer__heading { display: flex; align-items: flex-start; gap: 13px; padding-right: 39px; }
  .profile-status-composer__icon { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: var(--violet-light); background: var(--gradient-soft); }
  .profile-status-composer__heading h2 { margin-top: 3px; font-size: clamp(1.35rem, 4vw, 1.82rem); letter-spacing: -.04em; line-height: 1.08; }
  .profile-status-composer__heading p { margin-top: 5px; color: var(--muted); font-size: .74rem; }
  .profile-status-preview {
    --status-bg: linear-gradient(145deg, #7c3aed, #db2777);
    position: relative; display: grid; min-height: 144px; place-content: center; justify-items: center; gap: 9px; overflow: hidden;
    padding: 23px; border: 1px solid rgb(255 255 255 / .12); border-radius: 20px; color: white; background: var(--status-bg); isolation: isolate;
  }
  .profile-status-preview::before { position: absolute; inset: auto auto -55px -35px; width: 150px; height: 150px; border-radius: 50%; background: rgb(255 255 255 / .12); filter: blur(28px); content: ""; z-index: -1; }
  .profile-status-preview__label { position: absolute; top: 11px; left: 12px; padding: 3px 7px; border-radius: 99px; color: rgb(255 255 255 / .7); background: rgb(0 0 0 / .18); font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .profile-status-preview__bubble { display: flex; max-width: 90%; align-items: center; justify-content: center; gap: 8px; font-size: clamp(1.05rem, 3.8vw, 1.42rem); font-weight: 760; letter-spacing: -.02em; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .profile-status-preview__emoji { font-size: 1.35em; }
  .profile-status-preview__meta { max-width: 90%; overflow: hidden; color: rgb(255 255 255 / .75); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-status-composer__text textarea { min-height: 84px; resize: none; }
  .profile-status-composer__text .character-count { position: absolute; right: 11px; bottom: 8px; padding: 2px 5px; border-radius: 5px; color: var(--faint); background: var(--surface-2); font-size: .59rem; font-weight: 600; }
  .profile-status-composer__section { display: grid; gap: 8px; }
  .profile-status-emoji-control { display: grid; grid-template-columns: minmax(135px, .7fr) minmax(260px, 1.3fr); gap: 9px; }
  .profile-status-emoji-control > input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: var(--surface-2); }
  .profile-status-emoji-control > input:focus { border-color: rgb(139 92 246 / .6); box-shadow: 0 0 0 3px rgb(139 92 246 / .12); }
  .profile-status-emoji-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .profile-status-emoji { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); font-size: 1.05rem; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
  .profile-status-emoji:hover, .profile-status-emoji[aria-pressed="true"] { border-color: rgb(167 139 250 / .55); background: var(--gradient-soft); transform: translateY(-1px); }
  .profile-status-theme-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .profile-status-theme { --status-bg: var(--gradient); position: relative; min-height: 43px; overflow: hidden; border: 2px solid transparent; border-radius: 13px; background: var(--status-bg); cursor: pointer; }
  .profile-status-theme::after { position: absolute; inset: 50% auto auto 50%; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; opacity: 0; content: ""; transform: translate(-50%, -50%); }
  .profile-status-theme.is-selected { border-color: white; box-shadow: 0 0 0 3px rgb(139 92 246 / .22); }
  .profile-status-theme.is-selected::after { opacity: 1; }
  .profile-status-composer__details .field > span { display: flex; align-items: center; gap: 5px; }
  .profile-status-composer__feedback:empty, .profile-status-viewer__feedback:empty { display: none; }
  .profile-status-current-music { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgb(167 139 250 / .22); border-radius: 13px; background: var(--gradient-soft); }
  .profile-status-current-music__icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: var(--violet-light); background: rgb(0 0 0 / .16); }
  .profile-status-current-music > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.25; }
  .profile-status-current-music small { color: var(--violet-light); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
  .profile-status-current-music strong, .profile-status-current-music > span:nth-child(2) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-status-current-music strong { font-size: .76rem; }
  .profile-status-current-music > span:nth-child(2) > span { color: var(--muted); font-size: .64rem; }
  .profile-status-music { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
  .profile-status-music > summary { display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 12px; color: var(--text-soft); background: rgb(255 255 255 / .018); cursor: pointer; list-style: none; }
  .profile-status-music > summary::-webkit-details-marker { display: none; }
  .profile-status-music > summary > span { display: flex; align-items: center; gap: 8px; }
  .profile-status-music > summary > svg { color: var(--faint); transition: transform .2s; }
  .profile-status-music[open] > summary > svg { transform: rotate(180deg); }
  .profile-status-music__body { padding: 13px; border-top: 1px solid var(--line); }
  .profile-status-music__body .music-picker { padding: 0; border: 0; }
  .profile-status-expiry { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 11px; color: var(--muted); background: rgb(255 255 255 / .025); }
  .profile-status-expiry > svg { flex: 0 0 auto; color: var(--violet-light); }
  .profile-status-expiry > span { display: grid; }
  .profile-status-expiry strong { color: var(--text-soft); font-size: .7rem; }
  .profile-status-expiry small { color: var(--faint); font-size: .61rem; }
  .profile-status-composer__actions { display: flex; justify-content: flex-end; gap: 9px; }
  .profile-status-composer__delete { margin-right: auto; color: #fecdd3; }

  .profile-status-viewer-modal { width: min(510px, 100%); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
  .profile-status-viewer-modal::-webkit-scrollbar { display: none; }
  .profile-status-viewer {
    --status-bg: linear-gradient(145deg, #7c3aed, #db2777);
    position: relative; display: grid; min-height: min(650px, 82dvh); grid-template-rows: auto minmax(175px, 1fr) auto auto auto; gap: 17px;
    overflow: hidden; padding: 25px 24px max(25px, env(safe-area-inset-bottom)); color: white; background: var(--status-bg); isolation: isolate;
  }
  .profile-status-viewer::before, .profile-status-viewer::after { position: absolute; z-index: -1; width: 250px; height: 250px; border-radius: 50%; filter: blur(50px); content: ""; }
  .profile-status-viewer::before { top: -120px; right: -90px; background: rgb(255 255 255 / .18); }
  .profile-status-viewer::after { bottom: -140px; left: -100px; background: rgb(0 0 0 / .2); }
  .profile-status-viewer__header { display: flex; min-width: 0; align-items: center; gap: 9px; padding-right: 36px; }
  .profile-status-viewer__header > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
  .profile-status-viewer__header strong, .profile-status-viewer__header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-status-viewer__header strong { font-size: .8rem; }
  .profile-status-viewer__header small { color: rgb(255 255 255 / .7); font-size: .63rem; }
  .profile-status-viewer__avatar .avatar { outline: 1px solid rgb(255 255 255 / .45); }
  .profile-status-viewer__moment { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
  .profile-status-viewer__emoji { font-size: clamp(2.2rem, 9vw, 3.3rem); filter: drop-shadow(0 8px 18px rgb(0 0 0 / .2)); }
  .profile-status-viewer__moment p { max-width: 390px; font-size: clamp(1.5rem, 6vw, 2.35rem); font-weight: 780; letter-spacing: -.045em; line-height: 1.12; overflow-wrap: anywhere; }
  .profile-status-viewer__moment .profile-status-viewer__listening { font-size: 1.3rem; }
  .profile-status-viewer__location { display: flex; max-width: 90%; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 99px; color: rgb(255 255 255 / .78); background: rgb(0 0 0 / .16); font-size: .65rem; }
  .profile-status-viewer__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-status-viewer__music { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid rgb(255 255 255 / .16); border-radius: 13px; color: white; background: rgb(0 0 0 / .2); text-align: left; cursor: pointer; backdrop-filter: blur(10px); }
  .profile-status-viewer__music-icon { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .13); }
  .profile-status-viewer__music > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
  .profile-status-viewer__music strong, .profile-status-viewer__music small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-status-viewer__music strong { font-size: .74rem; }
  .profile-status-viewer__music small { color: rgb(255 255 255 / .66); font-size: .62rem; }
  .profile-status-viewer__engagement { display: grid; gap: 8px; }
  .profile-status-viewer__prompt { color: rgb(255 255 255 / .68); font-size: .62rem; font-weight: 750; text-align: center; }
  .profile-status-reactions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .profile-status-reactions button { min-width: 0; min-height: 42px; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; background: rgb(7 7 11 / .22); font-size: 1.06rem; cursor: pointer; transition: transform .16s, background .16s; }
  .profile-status-reactions button:hover:not(:disabled) { background: rgb(255 255 255 / .12); transform: translateY(-2px); }
  .profile-status-reactions button.is-sending { animation: storyReactionPulse .75s ease-in-out infinite alternate; }
  .profile-status-reactions button.is-sent { border-color: rgb(255 255 255 / .48); background: rgb(52 211 153 / .28); transform: scale(1.06); }
  .profile-status-reply { display: grid; min-height: 48px; grid-template-columns: minmax(0, 1fr) 39px; align-items: center; gap: 6px; padding: 4px 5px 4px 14px; border: 1px solid rgb(255 255 255 / .17); border-radius: 99px; background: rgb(7 7 11 / .3); backdrop-filter: blur(12px); }
  .profile-status-reply:focus-within { border-color: rgb(255 255 255 / .55); box-shadow: 0 0 0 3px rgb(255 255 255 / .1); }
  .profile-status-reply input { width: 100%; min-width: 0; border: 0; outline: 0; color: white; background: transparent; font-size: 16px; }
  .profile-status-reply input::placeholder { color: rgb(255 255 255 / .6); }
  .profile-status-reply__send { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: white; background: rgb(255 255 255 / .16); cursor: pointer; }
  .profile-status-viewer__private { display: flex; align-items: center; justify-content: center; gap: 5px; color: rgb(255 255 255 / .58); font-size: .57rem; }
  .profile-status-viewer__disabled { padding: 9px; border-radius: 10px; color: rgb(255 255 255 / .72); background: rgb(0 0 0 / .15); font-size: .67rem; text-align: center; }
  .profile-status-viewer__feedback .inline-error { border-color: rgb(255 255 255 / .2); color: white; background: rgb(0 0 0 / .2); }

  .message-status-context {
    --status-bg: linear-gradient(145deg, #7c3aed, #db2777);
    position: relative; display: grid; width: min(290px, 68vw); gap: 5px; margin: -2px -5px 7px; padding: 9px 10px 10px 13px;
    overflow: hidden; border: 1px solid rgb(255 255 255 / .12); border-radius: 11px; background: rgb(0 0 0 / .16); isolation: isolate;
  }
  .message-status-context::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--status-bg); content: ""; }
  .message-status-context__heading { display: flex; align-items: center; gap: 5px; color: rgb(255 255 255 / .76); font-size: .58rem; }
  .message-status-context__heading strong { text-transform: uppercase; letter-spacing: .045em; }
  .message-status-context__heading small { margin-left: auto; color: rgb(255 255 255 / .48); }
  .message-status-context__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--status-bg); }
  .message-status-context__content { display: flex; min-width: 0; align-items: center; gap: 6px; }
  .message-status-context__content > span:last-child { display: -webkit-box; overflow: hidden; color: white; font-size: .69rem; font-weight: 650; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .message-status-context__emoji { flex: 0 0 auto; font-size: 1rem; }
  .message-status-context__meta { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; color: rgb(255 255 255 / .56); font-size: .56rem; }
  .message-status-context__meta > span { display: flex; min-width: 0; align-items: center; gap: 3px; }
  .message-status-context__meta svg { flex: 0 0 auto; }

  .profile-status-preview[data-theme="gradient"], .profile-status-viewer[data-theme="gradient"], .profile-status-theme[data-theme="gradient"], .message-status-context[data-theme="gradient"] { --status-bg: linear-gradient(145deg, #7c3aed, #db2777); --status-accent: #f0abfc; }
  .profile-status-preview[data-theme="sunset"], .profile-status-viewer[data-theme="sunset"], .profile-status-theme[data-theme="sunset"], .message-status-context[data-theme="sunset"] { --status-bg: linear-gradient(145deg, #f97316, #db2777); --status-accent: #fb7185; }
  .profile-status-preview[data-theme="ocean"], .profile-status-viewer[data-theme="ocean"], .profile-status-theme[data-theme="ocean"], .message-status-context[data-theme="ocean"] { --status-bg: linear-gradient(145deg, #0284c7, #2563eb 58%, #4f46e5); --status-accent: #38bdf8; }
  .profile-status-preview[data-theme="violet"], .profile-status-viewer[data-theme="violet"], .profile-status-theme[data-theme="violet"], .message-status-context[data-theme="violet"] { --status-bg: linear-gradient(145deg, #7c3aed, #a21caf); --status-accent: #c4b5fd; }
  .profile-status-preview[data-theme="emerald"], .profile-status-viewer[data-theme="emerald"], .profile-status-theme[data-theme="emerald"], .message-status-context[data-theme="emerald"] { --status-bg: linear-gradient(145deg, #059669, #0f766e); --status-accent: #6ee7b7; }
  .profile-status-preview[data-theme="midnight"], .profile-status-viewer[data-theme="midnight"], .profile-status-theme[data-theme="midnight"], .message-status-context[data-theme="midnight"] { --status-bg: linear-gradient(145deg, #242432, #0d0d14); --status-accent: #94a3b8; }
}

@layer responsive {
  @media (max-height: 800px) {
    .profile-status-viewer {
      min-height: min(620px, 82dvh); grid-template-rows: auto minmax(150px, 1fr) auto auto auto; gap: 12px;
      padding: 20px 20px max(20px, env(safe-area-inset-bottom));
    }
    .profile-status-viewer__moment { gap: 10px; padding: 14px; }
    .profile-status-viewer__emoji { font-size: clamp(2rem, 8vw, 2.8rem); }
    .profile-status-viewer__moment p { font-size: clamp(1.35rem, 5vw, 2rem); }
  }

  @media (max-height: 680px) {
    .profile-status-viewer {
      min-height: min(570px, 88dvh); grid-template-rows: auto minmax(124px, 1fr) auto auto auto; gap: 10px;
      padding-top: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
    .profile-status-viewer__moment { gap: 8px; padding: 10px 14px; }
    .profile-status-viewer__emoji { font-size: clamp(1.9rem, 8vw, 2.65rem); }
    .profile-status-viewer__moment p { font-size: clamp(1.25rem, 5.4vw, 1.85rem); }
  }

  @media (max-width: 760px) {
    .profile-status-bubble { bottom: calc(100% - 5px); max-width: 145px; min-height: 41px; padding: 8px 10px; border-radius: 15px; font-size: .68rem; }
    .profile-status-add { right: -10px; bottom: -6px; width: 44px; height: 44px; }
    .profile-avatar.has-status-control .verified-badge { right: 27px; }
    .profile-status-composer { padding: 25px 17px max(24px, env(safe-area-inset-bottom)); }
    .profile-status-composer__heading { padding-right: 31px; }
    .profile-status-composer__icon { display: none; }
    .profile-status-emoji-control { grid-template-columns: 1fr; }
    .profile-status-composer__actions { align-items: stretch; flex-direction: column-reverse; }
    .profile-status-composer__actions .button { width: 100%; }
    .profile-status-composer__delete { margin-right: 0; }
    .profile-status-viewer { min-height: min(660px, 88dvh); padding-inline: 17px; }
  }

  @media (max-width: 760px) and (max-height: 680px) {
    .profile-status-viewer { min-height: min(570px, 88dvh); }
  }

  @media (max-width: 390px) {
    .profile-status-bubble { left: 52%; max-width: 128px; }
    .profile-status-theme-list { gap: 5px; }
    .profile-status-theme { min-height: 38px; border-radius: 11px; }
    .profile-status-emoji-list { gap: 4px; }
    .profile-status-emoji { min-height: 40px; padding: 0; }
    .profile-status-preview { min-height: 126px; padding-inline: 15px; }
    .profile-status-reactions { gap: 4px; }
    .profile-status-reactions button { min-height: 39px; padding: 0; }
  }
}

@layer motion {
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes storyReactionPulse { from { transform: scale(.94); } to { transform: scale(1.04); } }
  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  @keyframes likeBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-12deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1.05); } }
  @keyframes likeSpectrumTrace {
    0% { opacity: .2; stroke-dasharray: 0 100; }
    14% { opacity: 1; stroke-dasharray: 3 97; }
    72% { opacity: 1; stroke-dasharray: 82 18; }
    100% { opacity: 1; stroke-dasharray: 100 0; }
  }
  @keyframes uploadProgress { 0% { transform: scaleX(.08); } 50% { transform: scaleX(.72); } 100% { transform: scaleX(.95); } }
  @keyframes uploadCompactSpin { to { transform: rotate(360deg); } }
  @keyframes mixImageFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mixImageSlideUp { from { opacity: 0; transform: scale(1.04) translateY(5%); } to { opacity: 1; transform: scale(1) translateY(0); } }
  @keyframes mixImageZoomIn { from { transform: scale(1); } to { transform: scale(1.1); } }
  @keyframes mixImageZoomLoop { from { transform: scale(1); } to { transform: scale(1.085); } }
  @keyframes mixImagePanLoop { from { transform: scale(1.1) translate3d(-2.4%, 1%, 0); } to { transform: scale(1.1) translate3d(2.4%, -1%, 0); } }
  @keyframes mixSampleFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes mixSampleSlideUp { 0%, 100% { opacity: .35; transform: translateY(6px); } 45%, 70% { opacity: 1; transform: translateY(0); } }
  @keyframes mixSampleZoomIn { 0%, 100% { transform: scale(.75); } 60%, 80% { transform: scale(1); } }
  @keyframes mixSampleZoomLoop { from { transform: scale(.78); } to { transform: scale(1); } }
  @keyframes mixSamplePanLoop { from { transform: scale(1.08) translateX(-4px); } to { transform: scale(1.08) translateX(4px); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .mix-animated-image, .animation-picker__sample > span { animation: none !important; transform: none !important; }
    .post-action--heart.is-like-spectrum-animating .post-action__heart-filament { animation: none !important; will-change: auto; }
  }
}

@layer components {
  /* Two-factor authentication */
  .two-factor-challenge { display: grid; justify-items: start; }
  .two-factor-challenge__icon {
    display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 17px;
    border: 1px solid rgb(138 180 248 / .24); border-radius: 15px; color: #dbeafe;
    background: linear-gradient(145deg, rgb(66 133 244 / .22), rgb(52 168 83 / .07));
    box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 12px 30px rgb(66 133 244 / .12);
  }
  .two-factor-challenge h2 { margin-top: 5px; font-size: clamp(1.55rem, 5vw, 2.1rem); letter-spacing: -.045em; line-height: 1.08; }
  .two-factor-challenge__intro { max-width: 430px; margin-top: 10px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
  .two-factor-challenge__intro.is-delivery-failed { width: 100%; padding: 11px 12px; border: 1px solid rgb(251 113 133 / .2); border-radius: 11px; color: #fecdd3; background: rgb(244 63 94 / .06); }
  .two-factor-challenge__intro strong { color: var(--text-soft); overflow-wrap: anywhere; }
  .two-factor-challenge__expiry { color: var(--violet-light); font-weight: 780; font-variant-numeric: tabular-nums; }
  .two-factor-challenge__form { display: grid; width: 100%; gap: 13px; margin-top: 25px; }
  .two-factor-challenge__feedback:empty, .two-factor-settings__feedback:empty, .two-factor-admin__feedback:empty { display: none; }
  .two-factor-challenge__code-field > span:first-child { color: var(--text-soft); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
  .two-factor-code {
    min-height: 59px !important; padding-inline: 20px !important; border-radius: 14px !important;
    font-size: 1.45rem !important; font-weight: 760 !important; letter-spacing: .38em; text-align: center;
    font-variant-numeric: tabular-nums; caret-color: var(--violet-light);
  }
  .two-factor-code::placeholder { letter-spacing: .38em; }
  .two-factor-code[data-code-kind="variable"]::placeholder { font-size: .74rem; letter-spacing: .02em; }
  .two-factor-code--compact { min-height: 51px !important; font-size: 1.18rem !important; }
  .two-factor-challenge__secondary { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; gap: 9px 18px; margin-top: 16px; }
  .two-factor-challenge__secondary .text-button { min-height: 32px; font-size: .72rem; }
  .two-factor-challenge__secondary .text-button:disabled { color: var(--faint); cursor: default; }
  .two-factor-feedback--success { color: #a7f3d0; font-size: .76rem; line-height: 1.45; }

  .auth-panel > .two-factor-challenge { padding-top: 5px; }
  .login-card--two-factor .two-factor-challenge { width: min(440px, 100%); }
  .login-card--two-factor .login-card__security { width: min(440px, 100%); }

  .two-factor-settings-modal { width: min(690px, 100%); }
  .two-factor-settings { min-height: 330px; padding: 34px; }
  .two-factor-settings__loading, .two-factor-admin__loading { display: flex; min-height: 260px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .76rem; }
  .two-factor-settings__loading .spinner, .two-factor-admin__loading .spinner { width: 23px; height: 23px; }
  .two-factor-settings__heading { padding-right: 35px; }
  .two-factor-settings__heading h2 { margin-top: 5px; font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.045em; }
  .two-factor-settings__heading p { max-width: 560px; margin-top: 8px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
  .two-factor-settings__form { display: grid; gap: 15px; margin-top: 24px; }
  .two-factor-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .two-factor-channel {
    position: relative; display: grid; min-width: 0; min-height: 142px; align-content: start; justify-items: start; gap: 9px;
    padding: 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--text-soft); background: rgb(255 255 255 / .018);
    text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s, opacity .18s;
  }
  .two-factor-channel:hover:not(:disabled) { border-color: var(--line-strong); background: rgb(255 255 255 / .035); transform: translateY(-1px); }
  .two-factor-channel.is-selected { border-color: rgb(138 180 248 / .62); background: linear-gradient(145deg, rgb(66 133 244 / .14), rgb(52 168 83 / .045)); box-shadow: inset 0 0 0 1px rgb(138 180 248 / .12); }
  .two-factor-channel:focus-visible { outline: 3px solid rgb(56 189 248 / .35); outline-offset: 2px; }
  .two-factor-channel:disabled { opacity: .48; cursor: not-allowed; }
  .two-factor-channel__icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--violet-light); background: var(--gradient-soft); }
  .two-factor-channel__copy { display: grid; min-width: 0; gap: 3px; }
  .two-factor-channel__copy strong { color: white; font-size: .8rem; }
  .two-factor-channel__copy small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
  .two-factor-channel__status { margin-top: auto; color: #a7f3d0; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .two-factor-channel__status.is-unavailable { color: var(--faint); }
  .two-factor-settings__phone[hidden] { display: none; }
  .two-factor-settings__phone small { color: var(--faint); font-size: .65rem; font-weight: 520; line-height: 1.4; }
  .two-factor-settings__privacy { color: var(--faint); font-size: .67rem; line-height: 1.5; text-align: center; }
  .two-factor-settings__warning { padding: 12px 13px; border: 1px solid rgb(251 113 133 / .2); border-radius: 12px; color: #fecdd3; background: rgb(244 63 94 / .06); font-size: .73rem; line-height: 1.5; }
  .two-factor-settings__enabled { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 24px; padding: 16px; border: 1px solid rgb(52 211 153 / .2); border-radius: 16px; background: linear-gradient(135deg, rgb(52 211 153 / .08), rgb(66 133 244 / .045)); }
  .two-factor-settings__enabled-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #a7f3d0; background: rgb(52 211 153 / .1); }
  .two-factor-settings__enabled strong { font-size: .84rem; }
  .two-factor-settings__enabled p { margin-top: 3px; color: var(--muted); font-size: .7rem; }
  .two-factor-settings__badge { padding: 5px 8px; border-radius: 999px; color: #a7f3d0; background: rgb(52 211 153 / .1); font-size: .57rem; font-weight: 820; text-transform: uppercase; }
  .two-factor-settings__details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 18px; }
  .two-factor-settings__details > span { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / .018); }
  .two-factor-settings__details small { color: var(--faint); font-size: .62rem; }
  .two-factor-settings__details strong { font-size: .82rem; }
  .two-factor-settings > .button--danger { width: 100%; margin-top: 17px; }

  .two-factor-recovery { display: grid; justify-items: start; }
  .two-factor-recovery h2 { margin-top: 5px; font-size: clamp(1.45rem, 5vw, 2rem); letter-spacing: -.04em; }
  .two-factor-recovery > p { margin-top: 9px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
  .two-factor-recovery__codes { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgb(0 0 0 / .2); }
  .two-factor-recovery__codes code { padding: 9px 10px; border-radius: 9px; color: #dbeafe; background: rgb(66 133 244 / .085); font-size: .79rem; font-weight: 750; letter-spacing: .08em; text-align: center; }
  .two-factor-recovery__actions { display: flex; width: 100%; justify-content: flex-end; gap: 9px; margin-top: 18px; }

  .two-factor-admin { padding: clamp(18px, 3vw, 26px); border: 1px solid rgb(56 189 248 / .17); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgb(56 189 248 / .09), transparent 34%), var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .16); }
  .two-factor-admin__heading { align-items: flex-start; margin-bottom: 20px; }
  .two-factor-admin__heading .eyebrow { color: #67e8f9; }
  .two-factor-admin__state { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgb(0 0 0 / .18); font-size: .62rem; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
  .two-factor-admin__state.is-active { border-color: rgb(52 211 153 / .24); color: #a7f3d0; background: rgb(52 211 153 / .08); }
  .two-factor-admin__form { display: grid; gap: 13px; }
  .two-factor-admin__group { display: grid; gap: 15px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .018); }
  .two-factor-admin__group-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .two-factor-admin__provider-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #a5f3fc; background: rgb(34 211 238 / .09); }
  .two-factor-admin__group-heading h3 { font-size: .87rem; }
  .two-factor-admin__group-heading p { margin-top: 3px; color: var(--muted); font-size: .67rem; line-height: 1.4; }
  .two-factor-admin__toggle { align-items: center; }
  .two-factor-admin__toggle > span { color: var(--text-soft); font-weight: 720; }
  .two-factor-admin__provider-state { padding: 5px 8px; border-radius: 999px; color: var(--faint); background: rgb(255 255 255 / .04); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
  .two-factor-admin__provider-state.is-ready { color: #a7f3d0; background: rgb(52 211 153 / .09); }
  .two-factor-admin__secret-note { color: var(--faint); font-weight: 520; }
  .two-factor-admin__secret input { padding-right: 47px; }
  .two-factor-admin__secret .two-factor-admin__reveal { position: absolute; top: 50%; right: 5px; z-index: 2; width: 36px; height: 36px; transform: translateY(-50%); }
  .two-factor-admin__channels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .two-factor-admin__channel-toggle { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .1); }
  .two-factor-admin__channel-toggle > span { display: grid; gap: 2px; }
  .two-factor-admin__channel-toggle strong { color: var(--text-soft); font-size: .76rem; }
  .two-factor-admin__channel-toggle small { color: var(--faint); font-size: .61rem; font-weight: 520; line-height: 1.4; }
  .two-factor-admin__clear { color: #fecdd3; }
  .two-factor-admin__cost-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border-radius: 11px; color: #fde68a; background: rgb(245 158 11 / .06); font-size: .65rem; line-height: 1.45; }
  .two-factor-admin__cost-note svg { flex: 0 0 auto; margin-top: 1px; }
  .two-factor-admin__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 4px; }
  .two-factor-admin__actions p { max-width: 480px; color: var(--faint); font-size: .67rem; line-height: 1.45; }
  .two-factor-admin__actions .button { flex: 0 0 auto; }
}

@layer responsive {
  @media (max-width: 760px) {
    .two-factor-settings { padding: 27px 18px max(24px, env(safe-area-inset-bottom)); }
    .two-factor-channel-grid { grid-template-columns: 1fr; }
    .two-factor-channel { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .two-factor-channel__status { margin-top: 0; }
    .two-factor-recovery__codes { grid-template-columns: 1fr; }
    .two-factor-recovery__actions, .two-factor-admin__actions { align-items: stretch; flex-direction: column; }
    .two-factor-recovery__actions .button, .two-factor-admin__actions .button { width: 100%; }
    .two-factor-admin { margin-inline: -4px; padding: 16px; border-radius: 16px; }
    .two-factor-admin__heading { gap: 11px; }
    .two-factor-admin__group { padding: 14px; }
    .two-factor-admin__group-heading { grid-template-columns: auto minmax(0, 1fr); }
    .two-factor-admin__group-heading > :last-child { grid-column: 1 / -1; justify-self: start; }
    .two-factor-admin__channels { grid-template-columns: 1fr; }
  }

  @media (max-width: 390px) {
    .two-factor-settings__details { grid-template-columns: 1fr; }
    .two-factor-channel { grid-template-columns: auto minmax(0, 1fr); }
    .two-factor-channel__status { grid-column: 2; }
    .two-factor-code { font-size: 1.25rem !important; letter-spacing: .28em; }
  }
}

@layer pages {
  .help-action--tour { border-color: rgb(167 139 250 / .22); background: linear-gradient(120deg, rgb(139 92 246 / .1), rgb(236 72 153 / .035) 58%, transparent), var(--surface); }
  .help-action--tour .help-action__icon { color: #f0abfc; box-shadow: inset 0 0 0 1px rgb(196 181 253 / .08); }
}

/* Desktop experience -----------------------------------------------------
   Mobile remains the product baseline. These rules give mouse/keyboard
   users a wider workspace without stretching text or cropping media. */
@layer responsive {
  .feed-header__desktop-hint { display: none; }

  /* Viewer sizing lives in the responsive layer as well, otherwise the
     standalone detail-card constraints in this layer beat the immersive
     rules from `pages` (notably 74dvh on phones and height:auto for audio). */
  .video-viewer__slide > .feed-card.feed-card--standalone {
    min-width: 0; height: 100%; min-height: 100%; max-height: 100%; overflow: hidden; aspect-ratio: auto;
  }
  .video-viewer__slide > .feed-card.feed-card--standalone > .feed-card__stage {
    width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow: hidden; aspect-ratio: auto;
  }
  /* In TV the action rail includes labels up to 62px wide. Anchor that rail
     to the physical safe edge so the icon centres sit near the right side,
     while landscape notches keep their native inset. */
  .video-viewer-page--section .video-viewer__slide .post-actions {
    right: max(0px, env(safe-area-inset-right, 0px));
  }

  @media (max-width: 899px) {
    .video-viewer__slide > .feed-card.feed-card--standalone {
      width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0;
    }
    .video-viewer__slide > .feed-card.feed-card--standalone > .feed-card__stage { border-radius: 0; }
  }

  @media (max-width: 760px) {
    .video-viewer-page--section { left: 0; z-index: 35; width: 100vw; }
    .video-viewer-page--section .video-viewer__slide {
      --viewer-safe-bottom: 8px;
    }
    .fullscreen-feed__explore { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); min-height: 40px; }
    /* Primary sections move as one touch-driven carousel. The real view
       follows the finger while a lightweight destination canvas enters from
       the adjacent edge; the fixed five-item navigation stays in place. */
    .app-main { touch-action: pan-y pinch-zoom; }
    .stories__rail, .people-rail, .hashtag-rail, .profile-tabs, .message-navigation-tabs,
    .story-owner-insights__rail, .carousel__track { touch-action: pan-x pan-y pinch-zoom; }
    .carousel:not(.is-multiple) .carousel__track { touch-action: pan-y pinch-zoom; }
    body.is-route-carousel-active { overflow-x: clip; overscroll-behavior-x: none; }
    .app-main.is-route-swiping {
      position: relative; z-index: 21; overflow-x: visible; background: var(--bg);
      box-shadow: 0 0 42px rgb(0 0 0 / .42);
      transform: translate3d(var(--route-swipe-offset, 0px), 0, 0);
      will-change: transform; transition: none;
    }
    .app-main.is-route-swipe-settling {
      transition: transform 230ms cubic-bezier(.2, .82, .24, 1), box-shadow 230ms ease;
    }
    .app-main.is-route-swiping::after {
      position: fixed; inset: 0; z-index: 1; opacity: calc(var(--route-swipe-progress, 0) * .24);
      background: linear-gradient(90deg, transparent 0 92%, rgb(138 180 248 / .5));
      pointer-events: none; content: ""; transition: opacity .08s linear;
    }
    .app-main.is-route-swiping[data-route-swipe-direction="previous"]::after {
      background: linear-gradient(270deg, transparent 0 92%, rgb(138 180 248 / .5));
    }
    .route-carousel-preview {
      --route-carousel-offset: 100vw;
      position: fixed; inset: 0 0 var(--bottom-nav); z-index: 20; display: grid;
      min-height: calc(100dvh - var(--bottom-nav)); align-content: stretch; padding: 0; overflow: hidden;
      color: var(--text); background: var(--bg); opacity: 1;
      pointer-events: none; user-select: none;
      transform: translate3d(var(--route-carousel-offset), 0, 0);
      will-change: transform; transition: none; contain: layout paint style;
    }
    .route-carousel-preview.is-settling { transition: transform 230ms cubic-bezier(.2, .82, .24, 1); }
    .route-carousel-preview.is-route-ready { opacity: 0; transition: opacity 120ms linear; }
    .route-carousel-preview__canvas {
      position: absolute; inset: 0; min-height: 0; overflow: hidden;
      border: 0; border-radius: 0; background: var(--bg); box-shadow: none;
    }
    .route-carousel-preview[data-route-preview="/fullscreen"] { background: #000; }
    .route-carousel-preview[data-route-preview="/fullscreen"] .route-carousel-preview__canvas {
      background: #030407;
    }
    .bottom-nav__link.is-swipe-target:not(.bottom-nav__link--create) {
      color: white; background: linear-gradient(145deg, rgb(66 133 244 / .2), rgb(52 168 83 / .08));
      box-shadow: inset 0 0 0 1px rgb(138 180 248 / .12);
    }
  }

  @media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
    .video-viewer__slide .post-actions { right: max(9px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); gap: 2px; }
    .video-viewer__slide .post-action { min-width: 38px; min-height: 34px; padding: 0; }
    .video-viewer__slide .post-action__icon { width: 34px; height: 34px; }
    .video-viewer__slide .post-action__label { display: none; }
    .video-viewer__slide .post-action--mute { bottom: calc(100% + 4px); }
    .video-viewer__slide .feed-card__info {
      right: max(66px, calc(env(safe-area-inset-right) + 54px)); bottom: max(14px, env(safe-area-inset-bottom));
      max-height: min(48%, 166px); overflow: hidden;
    }
    .video-viewer__slide .feed-card--has-viewer-composer .post-actions {
      bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + 5px);
    }
    .video-viewer__slide .feed-card--has-viewer-composer .feed-card__info {
      bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + 8px);
      max-height: min(36%, 126px);
    }
    .video-viewer__play { width: 64px; height: 64px; }
  }

  @media (min-width: 761px) {
    html { scrollbar-gutter: stable; }
    .sidebar {
      gap: clamp(18px, 4vh, 34px); overflow-x: hidden; overflow-y: auto;
      overscroll-behavior: contain; scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .page { scroll-padding-top: 92px; }
    .feed-viewport { scroll-behavior: smooth; scroll-padding-block: 12px; }
    .feed-stack > .feed-card:not(.feed-card--mosaic) .carousel img,
    .feed-stack > .feed-card:not(.feed-card--mosaic) .carousel video,
    .feed-card--standalone .carousel img,
    .feed-card--standalone .carousel video { background: #07070a; object-fit: contain; }
    .composer-media { position: sticky; top: 28px; align-self: start; }
    .profile-share-page, .login-page { overflow-x: hidden; overflow-y: auto; }
    .profile-share-artboard {
      width: min(390px, calc(56.25dvh - 74px));
      max-height: calc(100dvh - 132px);
    }
    .message-list, .message-composer { padding-inline: clamp(24px, 5vw, 72px); }
    body[data-route^="/messages"] .app-legal-footer { display: none; }
  }

  @media (min-width: 900px) {
    /* Sheets become desktop drawers: content stays visible at the side and
       long lists use the full screen height. */
    .overlay--sheet { place-items: stretch end; padding: 0; }
    .overlay__panel--sheet {
      width: min(680px, 52vw); height: 100dvh; max-height: none;
      border-width: 0 0 0 1px; border-radius: 26px 0 0 26px;
      box-shadow: -30px 0 90px rgb(0 0 0 / .48); transform: translateX(42px);
    }
    .overlay__panel--sheet.profile-editor-modal { width: min(780px, 62vw); }
    .overlay__panel--sheet.notification-center-modal { width: min(680px, 48vw); }
    .overlay__panel--sheet.account-switcher-modal { width: min(620px, 46vw); }
    .account-switcher-modal .account-switcher { min-height: 100dvh; }
    .notification-center-modal .notification-center { height: 100dvh; min-height: 100dvh; }
    .overlay.is-visible .overlay__panel--sheet { transform: translateX(0); }
    .comments-modal, .viewers-modal { width: min(560px, 44vw); height: 100dvh; max-height: none; }
    .comments-sheet, .viewers-sheet { height: 100dvh; }
    .viewers-sheet__grabber { display: none; }
    .viewers-sheet__heading { padding-top: 28px; }
    .viewer-row:nth-last-child(-n + 3) .viewer-row__menu { top: auto; bottom: 52px; }
    .profile-status-viewer { min-height: 100%; }
    .profile-status-viewer-modal { width: min(540px, 44vw); }

    /* Full-screen routes keep the viewport-sized slide, while the media canvas
       stays readable on landscape monitors and never crops vertical content. */
    .video-viewer__slide {
      --viewer-safe-bottom: 14px; --viewer-safe-left: 16px; --viewer-safe-right: 16px;
      display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #17171f, #000 68%);
    }
    .video-viewer__slide > .feed-card.feed-card--standalone {
      width: min(820px, calc(100dvh * .76), calc(100vw - 120px));
      max-width: none; margin-inline: auto; box-shadow: 0 0 90px rgb(0 0 0 / .86);
    }
    .video-viewer__slide .carousel img,
    .video-viewer__slide .carousel video { background: #030305; object-fit: contain; }
    .post-detail { padding: 32px 72px; }
    .post-detail__back { top: 28px; left: 30px; }
    .post-detail .feed-card--standalone {
      width: min(780px, calc(100vw - var(--sidebar) - 150px));
      height: min(860px, calc(100dvh - 64px)); min-height: 600px;
      border-color: var(--line-strong); border-radius: 24px; box-shadow: var(--shadow);
    }
    .post-detail .feed-card--standalone.feed-card--audio {
      width: min(620px, calc((100dvh - 64px) * .8), calc(100vw - var(--sidebar) - 150px));
      height: auto; min-height: 0; aspect-ratio: 4 / 5;
    }
  }

  @media (max-width: 1100px) and (min-width: 761px) {
    .sidebar__utility { display: none; }
  }

  @media (min-width: 1101px) {
    :root { --sidebar: clamp(176px, 16vw, 244px); --feed-header-row: 60px; --feed-stories-row: 112px; --feed-max-width: 1420px; }
    .sidebar { padding-inline: clamp(16px, 1.5vw, 20px); }
    .sidebar__link { gap: 12px; padding-inline: 12px; }
    .sidebar__link.is-active::before { left: calc(-1 * clamp(16px, 1.5vw, 20px)); }

    .page { width: min(1360px, 100%); padding-inline: clamp(34px, 4vw, 68px); }
    .explore-page, .dashboard-page, .help-page, .legal-page, .legal-notice-page { max-width: 1360px; }
    .create-page { width: min(1280px, 100%); max-width: 1280px; }
    .profile-page { width: min(1220px, 100%); max-width: 1220px; }

    .feed-page { width: min(var(--feed-max-width), 100%); }
    .feed-header { padding-inline: 22px; }
    .feed-header__desktop-hint {
      position: absolute; left: 22px; display: inline-flex; align-items: center; gap: 5px;
      color: var(--faint); font-size: .68rem; user-select: none;
    }
    .feed-header__desktop-hint kbd {
      display: inline-grid; min-width: 24px; height: 24px; place-items: center;
      border: 1px solid var(--line); border-radius: 7px; color: var(--text-soft);
      background: var(--surface); box-shadow: inset 0 -1px rgb(255 255 255 / .04); font: inherit;
    }
    .feed-header__desktop-hint span { margin-left: 3px; }
    .feed-header__inbox { right: 22px; }
    .stories__rail { gap: 16px; padding-inline: 22px; }
    .feed-viewport { scroll-snap-type: y proximity; }
    .feed-scroll-content { padding: 12px 24px 28px; }
    .feed-stack { width: min(100%, 680px); gap: 24px; }
    .feed-stack > .feed-card:not(.feed-card--mosaic),
    .skeleton-card--feed {
      height: clamp(420px, calc(100dvh - 196px), 880px); min-height: 0;
      border-radius: 24px; scroll-snap-align: start;
    }
    .feed-stack > .feed-card:not(.feed-card--mosaic) .feed-card__stage {
      background: radial-gradient(circle at 50% 45%, #181820, #08080b 74%);
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / .065), 0 24px 70px rgb(0 0 0 / .24);
    }
    .feed-card__info { left: 24px; bottom: 26px; }
    .post-actions { right: 15px; bottom: 22px; }
    .post-caption { max-width: 540px; font-size: .9rem; }
    /* Keep generic desktop feed spacing out of the immersive viewer. Cascade
       layers make responsive rules outrank the more specific pages rules, so
       these scoped values must be restored here after the generic selectors. */
    .video-viewer__slide .feed-card__info {
      right: max(88px, calc(var(--viewer-safe-right) + 68px));
      bottom: calc(var(--viewer-safe-bottom) + 22px);
      left: max(20px, var(--viewer-safe-left));
    }
    .video-viewer__slide .post-actions {
      right: var(--viewer-safe-right);
      bottom: calc(var(--viewer-safe-bottom) + 16px);
    }
    .video-viewer__slide .feed-card--has-viewer-composer .feed-card__info {
      bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + var(--viewer-overlay-gap));
    }
    .video-viewer__slide .feed-card--has-viewer-composer .post-actions {
      bottom: calc(var(--viewer-comment-composer-height, 54px) + var(--viewer-safe-bottom) + 8px);
    }

    .people-rail, .hashtag-rail {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      overflow: visible; gap: 12px;
    }
    .person-chip, .hashtag-chip { min-width: 0; }
    .composer-grid { grid-template-columns: minmax(380px, .95fr) minmax(390px, 1.05fr); gap: clamp(30px, 4vw, 56px); }
    .messages-page { grid-template-columns: minmax(340px, 380px) minmax(0, 1fr); }
    .conversation-sidebar__header { padding-inline: 24px; }
    .chat-header { padding-inline: clamp(22px, 4vw, 56px); }
    .message-bubble { max-width: min(68%, 650px); }
    .profile-cover { height: clamp(230px, 21vw, 310px); }
    .profile-identity { padding-inline: 34px; }
    .profile-avatar { margin-top: -60px; }
    .profile-avatar > .avatar.avatar--xl { width: 132px; height: 132px; }
    .dashboard-page small, .dashboard-page .promotion-card__settings span,
    .dashboard-page .moderation-admin__summary { font-size: max(.68rem, 12px); }
    .legal-layout { grid-template-columns: 250px minmax(0, 1fr); }
    .legal-tabs { top: 16px; }
    .legal-toc { top: 88px; }
    .legal-document > section { scroll-margin-top: 100px; }
  }

  @media (min-width: 1440px) {
    .explore-grid, .profile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .feed-stack { width: min(100%, 710px); }
    .messages-page { grid-template-columns: 390px minmax(0, 1fr); }
  }

  @media (min-width: 1800px) {
    :root { --sidebar: 260px; --feed-max-width: 1540px; }
    .page { width: min(1480px, 100%); }
    .explore-page, .dashboard-page { max-width: 1480px; }
    .explore-grid, .profile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .feed-page { width: min(var(--feed-max-width), 100%); }
    .feed-stack { width: min(100%, 740px); }
    .dashboard-page .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @media (min-width: 761px) and (max-height: 760px) {
    .profile-share-artboard { width: min(330px, calc(56.25dvh - 63px)); max-height: calc(100dvh - 112px); }
    .profile-share-workspace { align-items: start; padding-top: 8px; }
    .feed-stack > .feed-card:not(.feed-card--mosaic), .skeleton-card--feed {
      height: clamp(420px, calc(100dvh - 186px), 640px); min-height: 0;
    }
    .post-detail .feed-card--standalone { min-height: 520px; }
    .post-detail .feed-card--standalone.feed-card--audio { min-height: 0; }
    .login-layout { min-height: 0; }
    .login-story { padding-block: 30px; }
    .login-card { justify-content: start; padding-block: 30px; }
    .image-cropper__actions {
      position: sticky; bottom: 0; z-index: 3; padding-bottom: 14px;
      background: linear-gradient(180deg, transparent, var(--surface) 24%);
    }
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 761px) {
    .mosaic-tile, .person-chip, .hashtag-chip, .metric-card {
      transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease);
    }
    .mosaic-tile:hover { border-color: var(--line-strong); box-shadow: 0 22px 50px rgb(0 0 0 / .28); transform: translateY(-3px); }
    .person-chip:hover, .hashtag-chip:hover { transform: translateY(-2px); }
  }
}

/* Deterministic profile artwork ------------------------------------------------
   People without uploaded media still receive a recognisable, neutral identity.
   The values follow the four-colour brand system while remaining independent
   from the global theme so light/dark surfaces keep the same person colour. */
@layer components {
  .avatar--fallback {
    background:
      linear-gradient(rgb(5 10 20 / .7), rgb(5 10 20 / .7)),
      linear-gradient(145deg, var(--avatar-color-a), var(--avatar-color-b) 58%, var(--avatar-color-c));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
    text-shadow: 0 1px 4px rgb(0 0 0 / .72);
  }
  .avatar__initials { position: relative; z-index: 1; line-height: 1; }
}

@layer pages {
  .profile-cover--default {
    position: relative; display: grid; overflow: hidden; place-items: center; isolation: isolate;
    background:
      linear-gradient(rgb(5 10 20 / .7), rgb(5 10 20 / .7)),
      linear-gradient(45deg,
        var(--brand-blue, #4285f4) 0%,
        var(--brand-blue, #4285f4) 16%,
        var(--brand-green, #34a853) 40%,
        var(--brand-yellow, #fbbc05) 66%,
        var(--brand-red, #ea4335) 100%);
  }
  .profile-cover--default[data-identity-palette="1"] {
    background:
      linear-gradient(rgb(5 10 20 / .7), rgb(5 10 20 / .7)),
      linear-gradient(45deg,
        var(--brand-red, #ea4335), var(--brand-yellow, #fbbc05) 34%,
        var(--brand-green, #34a853) 67%, var(--brand-blue, #4285f4));
  }
  .profile-cover--default[data-identity-palette="2"] {
    background:
      linear-gradient(rgb(5 10 20 / .7), rgb(5 10 20 / .7)),
      linear-gradient(45deg,
        var(--brand-green, #34a853), var(--brand-blue, #4285f4) 34%,
        var(--brand-red, #ea4335) 67%, var(--brand-yellow, #fbbc05));
  }
  .profile-cover--default[data-identity-palette="3"] {
    background:
      linear-gradient(rgb(5 10 20 / .7), rgb(5 10 20 / .7)),
      linear-gradient(45deg,
        var(--brand-yellow, #fbbc05), var(--brand-red, #ea4335) 34%,
        var(--brand-blue, #4285f4) 67%, var(--brand-green, #34a853));
  }
  .profile-cover--default::after {
    position: absolute; inset: -35%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / .19), transparent 58%);
    content: ''; transform: translate(28%, -24%);
  }
  .profile-cover__fallback-name {
    max-width: min(86%, 760px); padding: 20px; overflow: hidden;
    color: #fff; font-size: clamp(1.55rem, 6vw, 4.25rem); font-weight: 900;
    letter-spacing: -.045em; line-height: 1.02; text-align: center; text-overflow: ellipsis;
    text-shadow: 0 3px 18px rgb(0 0 0 / .72); white-space: nowrap;
  }
  .profile-editor__cover.profile-cover--default { background-position: center; background-size: auto; }
  .profile-editor__cover .profile-cover__fallback-name { font-size: clamp(1.3rem, 4vw, 2.5rem); }
}

/* Neutral spectrum refresh -------------------------------------------------
   Core surfaces remain graphite and blue-led. The four-colour signature is
   reserved for navigation edges and the create affordance, so it stays
   recognizable without tinting every screen purple or pink. */
@layer base {
  body::before {
    background:
      radial-gradient(circle at 32% 32%, rgb(66 133 244 / .055), transparent 58%),
      radial-gradient(circle at 74% 66%, rgb(52 168 83 / .025), transparent 55%);
  }
  ::selection { color: white; background: rgb(66 133 244 / .72); }
}

@layer layout {
  .sidebar {
    border-right-color: var(--line);
    background: linear-gradient(180deg, #0c1118 0%, rgb(8 12 18 / .98) 100%);
  }
  .sidebar::after { display: none; content: none; }
  .sidebar__link.is-active { background: linear-gradient(110deg, rgb(66 133 244 / .17), rgb(52 168 83 / .065)); }
  .sidebar__link.is-active::before { display: none; content: none; }
  .sidebar__nav > .sidebar__link--create,
  .sidebar__nav > .sidebar__link--create.is-active {
    color: #0b0f14; background: #fff;
    box-shadow:
      -4px 0 0 var(--brand-blue),
      4px 0 0 var(--brand-red),
      0 3px 0 var(--brand-yellow),
      0 11px 28px rgb(0 0 0 / .32);
  }
  .sidebar__nav > .sidebar__link--create .nav-icon,
  .sidebar__nav > .sidebar__link--create .nav-label { color: #0b0f14; }
  .sidebar__nav > .sidebar__link--create:hover {
    color: #0b0f14; background: #fff; transform: translateY(-1px);
    box-shadow:
      -5px 0 0 var(--brand-blue),
      5px 0 0 var(--brand-red),
      0 4px 0 var(--brand-green),
      0 14px 34px rgb(0 0 0 / .36);
  }
}

@layer components {
  .nav-badge { background: var(--brand-red); }
  .button--primary { box-shadow: 0 8px 24px rgb(66 133 244 / .18); }
  .button--primary:hover { box-shadow: 0 11px 28px rgb(66 133 244 / .28); }

  .pull-refresh {
    --pull-refresh-y: 0px;
    --pull-refresh-progress: 0;
    position: fixed;
    /* Route anchors already sit below their fixed chrome.  The fallback is
       safe-area aware, while an explicit 0px anchor in Full screen must stay
       at 0 so the clipped indicator cannot overlap the translated media. */
    top: var(--pull-refresh-anchor, max(8px, env(safe-area-inset-top)));
    left: 50%;
    z-index: 70;
    display: block;
    width: 44px;
    height: var(--pull-refresh-y);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 0, 0);
    transition: opacity .16s ease, height .22s var(--ease);
    will-change: opacity, height;
  }
  .pull-refresh.is-visible { opacity: 1; }
  .pull-refresh.is-pulling { transition: none; }
  .pull-refresh.is-resetting { opacity: 0; }
  .pull-refresh__wheel {
    position: absolute; top: 50%; left: 50%; display: block; width: 38px; height: 38px; overflow: visible;
    filter: drop-shadow(0 3px 8px rgb(0 0 0 / .48)); transform: translate(-50%, -50%);
  }
  .pull-refresh__segment-track { fill: rgb(255 255 255 / .16); opacity: 0; }
  .pull-refresh__segment {
    opacity: 0;
    transform: scaleY(.38);
    transform-box: fill-box;
    transform-origin: center bottom;
    transition: opacity .045s linear, transform .045s linear;
  }
  .pull-refresh__segment--blue { fill: var(--brand-blue); }
  .pull-refresh__segment--green { fill: var(--brand-green); }
  .pull-refresh__segment--yellow { fill: var(--brand-yellow); }
  .pull-refresh__segment--red { fill: var(--brand-red); }
  .pull-refresh__segments { transform-box: fill-box; transform-origin: center; }
  .pull-refresh.is-refreshing .pull-refresh__segments { animation: pull-refresh-spin .88s linear infinite; }
  .pull-refresh.is-refreshing .pull-refresh__segment-track { opacity: .16; }
  .pull-refresh.is-armed:not(.is-refreshing) .pull-refresh__wheel { filter: drop-shadow(0 0 5px rgb(66 133 244 / .22)); }
  .pull-refresh__check {
    fill: none;
    stroke: #fff;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
    opacity: 0;
  }
  .pull-refresh.is-confirming .pull-refresh__segment {
    animation: pull-refresh-confirm-segment .18s var(--ease) forwards;
    animation-delay: calc(var(--pull-refresh-segment-index, 0) * 34ms);
  }
  .pull-refresh.is-confirming .pull-refresh__segment-track,
  .pull-refresh.is-complete .pull-refresh__segment-track { opacity: .16; }
  .pull-refresh.is-complete .pull-refresh__segment {
    fill: var(--brand-green);
    opacity: 1;
    transform: scaleY(1);
  }
  .pull-refresh.is-complete .pull-refresh__check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .24s var(--ease), opacity .1s; }

  /* The indicator lives in a real gap opened beneath each section's chrome.
     The state remains on the stable route root so a fresh SPA view inherits
     it, while headers, overlays and fixed navigation stay exactly in place. */
  .app-main.is-pull-refresh-shifted .feed-viewport > .stories-slot,
  .app-main.is-pull-refresh-shifted .feed-viewport > .feed-scroll-content,
  .app-main.is-pull-refresh-shifted .video-viewer,
  .app-main.is-pull-refresh-shifted .conversation-list,
  .app-main.is-pull-refresh-shifted .profile-page > :not(.profile-page__toolbar),
  .app-main.is-pull-refresh-shifted > .route-loader {
    translate: 0 var(--pull-refresh-offset, 0px);
    transition: translate .22s var(--ease);
    will-change: translate;
  }
  .app-main.is-pull-refresh-dragging .feed-viewport > .stories-slot,
  .app-main.is-pull-refresh-dragging .feed-viewport > .feed-scroll-content,
  .app-main.is-pull-refresh-dragging .video-viewer,
  .app-main.is-pull-refresh-dragging .conversation-list,
  .app-main.is-pull-refresh-dragging .profile-page > :not(.profile-page__toolbar),
  .app-main.is-pull-refresh-dragging > .route-loader { transition: none; }
}

@layer responsive {
  @media (max-width: 760px) {
    .bottom-nav,
    .bottom-nav.is-compact:not(:focus-within),
    .bottom-nav.is-compact.has-create-launcher {
      border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, rgb(24 30 40 / .94), rgb(9 13 19 / .96));
      box-shadow: 0 20px 55px rgb(0 0 0 / .52), inset 0 1px rgb(255 255 255 / .075);
    }
    .bottom-nav::before {
      top: -1px; left: 25%; width: 50%; height: 2px; border-radius: 999px; opacity: .95;
      background: var(--menu-top-spectrum);
    }
    .bottom-nav__link.is-active:not(.bottom-nav__link--create) {
      background: linear-gradient(145deg, rgb(66 133 244 / .18), rgb(52 168 83 / .07));
      box-shadow: inset 0 0 0 1px rgb(138 180 248 / .07);
    }
    .bottom-nav__link--create,
    .bottom-nav__link--create.is-active { background: transparent; box-shadow: none; }
    .bottom-nav__link--create .nav-icon,
    .bottom-nav.is-compact:not(:focus-within) .bottom-nav__link--create .nav-icon,
    .bottom-nav.is-compact.has-create-launcher .bottom-nav__link--create .nav-icon {
      position: relative; isolation: isolate; overflow: visible; border: 0;
      color: #0b0f14; background: #fff;
      box-shadow:
        -4px 0 0 var(--brand-blue),
        4px 0 0 var(--brand-red),
        -2px -2px 0 var(--brand-green),
        2px 2px 0 var(--brand-yellow),
        0 10px 26px rgb(0 0 0 / .38),
        inset 0 0 0 1px rgb(10 14 20 / .08);
    }
    .bottom-nav__link--create .nav-icon > svg { position: relative; z-index: 1; }
    .bottom-nav__link--create:active .nav-icon {
      box-shadow:
        -3px 0 0 var(--brand-blue),
        3px 0 0 var(--brand-red),
        -1px -1px 0 var(--brand-green),
        1px 1px 0 var(--brand-yellow),
        0 6px 18px rgb(0 0 0 / .34);
    }
    .create-launcher {
      border-color: transparent;
      background:
        linear-gradient(180deg, rgb(27 34 45 / .98), rgb(10 14 21 / .99)) padding-box,
        var(--brand-spectrum) border-box;
    }
    .create-launcher__choice:hover,
    .create-launcher__choice:focus-visible {
      border-color: rgb(66 133 244 / .35);
      background: linear-gradient(145deg, rgb(66 133 244 / .13), rgb(52 168 83 / .055));
    }
    .create-launcher__icon {
      color: #dbeafe;
      background: linear-gradient(145deg, rgb(66 133 244 / .28), rgb(52 168 83 / .13));
    }
  }
}

@layer motion {
  @keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
  @keyframes pull-refresh-confirm-segment {
    to { fill: var(--brand-green); opacity: 1; transform: scaleY(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .pull-refresh,
    .app-main.is-pull-refresh-shifted .feed-viewport > .stories-slot,
    .app-main.is-pull-refresh-shifted .feed-viewport > .feed-scroll-content,
    .app-main.is-pull-refresh-shifted .video-viewer,
    .app-main.is-pull-refresh-shifted .conversation-list,
    .app-main.is-pull-refresh-shifted .profile-page > :not(.profile-page__toolbar),
    .app-main.is-pull-refresh-shifted > .route-loader,
    .pull-refresh__segment,
    .pull-refresh__check { transition: none; }
    .pull-refresh.is-refreshing .pull-refresh__segments { animation: none; }
    .pull-refresh.is-confirming .pull-refresh__segment { animation: none; }
    .pull-refresh.is-confirming .pull-refresh__segment {
      fill: var(--brand-green); opacity: 1; transform: scaleY(1);
    }
  }
}

@layer responsive {
  @media (min-width: 761px) {
    .pull-refresh { display: none; }
  }
}

/* Mobile text controls ------------------------------------------------------
   iOS Safari and WKWebView zoom the visual viewport when a focused editor is
   rendered below 16px. Keep every text-entry surface at that floor without
   restricting the viewport meta, so intentional pinch zoom stays available. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  :where(
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    textarea,
    select,
    [contenteditable="true"],
    [contenteditable="plaintext-only"],
    [role="textbox"]
  ) {
    font-size: max(16px, 1rem) !important;
  }
}

/* Playground and offline handoff ------------------------------------------ */
@layer pages {
  .playground-page {
    display: grid; max-width: 980px; gap: 20px;
    background:
      radial-gradient(circle at 8% 0%, rgb(66 133 244 / .12), transparent 34%),
      radial-gradient(circle at 94% 22%, rgb(234 67 53 / .09), transparent 30%);
  }
  .playground-page__heading {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 17px;
    padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 27px;
    background: linear-gradient(145deg, rgb(20 26 36 / .94), rgb(11 15 22 / .96)); box-shadow: var(--shadow-sm);
  }
  .playground-page__heading::after {
    position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--brand-spectrum); content: "";
  }
  .playground-page__mark {
    display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid transparent; border-radius: 21px;
    color: #fff; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--brand-spectrum) border-box;
    box-shadow: 0 15px 38px rgb(0 0 0 / .27);
  }
  .playground-page__heading h1 { margin-top: 4px; font-size: clamp(1.7rem, 4vw, 2.7rem); letter-spacing: -.045em; }
  .playground-page__heading p { max-width: 640px; margin-top: 7px; color: var(--muted); line-height: 1.5; }
  .playground-page__game {
    display: grid; min-width: 0; place-items: center; padding: clamp(14px, 3vw, 28px); border: 1px solid var(--line);
    border-radius: 28px; background: rgb(13 18 25 / .78); box-shadow: 0 24px 70px rgb(0 0 0 / .2);
  }
}

@layer components {
  .overlay--offline-playground { z-index: 120; }
  .offline-playground-modal {
    width: min(620px, 100%); border-color: rgb(138 180 248 / .2);
    background:
      radial-gradient(circle at 8% 0%, rgb(66 133 244 / .17), transparent 34%),
      radial-gradient(circle at 92% 22%, rgb(234 67 53 / .12), transparent 31%),
      #0d1219;
  }
  .offline-playground { display: grid; justify-items: center; gap: 13px; padding: 26px clamp(16px, 4vw, 28px) max(20px, env(safe-area-inset-bottom)); }
  .offline-playground__heading { display: grid; width: 100%; justify-items: center; gap: 7px; padding-inline: 32px; text-align: center; }
  .offline-playground__eyebrow { color: #8ab4f8; font-size: .64rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
  .offline-playground__heading h2 { font-size: clamp(1.25rem, 4vw, 1.85rem); letter-spacing: -.035em; }
  .offline-playground__heading p { max-width: 500px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
  .offline-playground__status {
    display: inline-flex; min-height: 34px; align-items: center; gap: 9px; margin-top: 3px; padding: 6px 11px;
    border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; color: var(--text-soft); background: rgb(4 7 12 / .45); font-size: .63rem;
  }
  .offline-playground__signal {
    position: relative; width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%;
    background: conic-gradient(from 20deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red), var(--brand-blue));
    animation: offline-playground-spin .9s linear infinite;
  }
  .offline-playground__signal::after { position: absolute; inset: 4px; border-radius: inherit; background: #0d1219; content: ""; }
  .offline-playground.is-online .offline-playground__status { border-color: rgb(52 168 83 / .3); color: #9ce7b0; }
  .offline-playground.is-online .offline-playground__signal { background: var(--brand-green); animation: none; }
  .offline-playground.is-online .offline-playground__signal::after { inset: 5px; background: #fff; }
  .offline-playground__game { display: grid; width: 100%; place-items: center; }
  .offline-playground__game .playground-game { width: min(100%, 46dvh, 470px); }
  .offline-playground__actions { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .offline-playground__actions .button { min-height: 44px; }
}

@layer responsive {
  @media (max-width: 760px) {
    .playground-page { gap: 13px; padding: 14px 12px max(106px, calc(env(safe-area-inset-bottom) + 90px)); }
    .playground-page__heading { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 18px 16px; border-radius: 21px; }
    .playground-page__mark { width: 50px; height: 50px; border-radius: 16px; }
    .playground-page__heading p { font-size: .72rem; }
    .playground-page__game { padding: 11px; border-radius: 21px; }
    .offline-playground-modal { width: 100%; max-height: calc(100dvh - 18px); border-radius: 24px; }
    .offline-playground { gap: 10px; padding: 21px 12px max(15px, env(safe-area-inset-bottom)); }
    .offline-playground__heading { gap: 5px; padding-inline: 31px; }
    .offline-playground__heading p { font-size: .67rem; }
    .offline-playground__game .playground-game { width: min(100%, 43dvh, 410px); }
  }
  @media (max-height: 660px) {
    .offline-playground__heading p { display: none; }
    .offline-playground__game .playground-game { width: min(100%, 38dvh, 330px); }
    .offline-playground .playground-game__dpad { display: none; }
  }
}

@layer motion {
  @keyframes offline-playground-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .offline-playground__signal { animation: none; }
  }
}