/* Shared finish and responsive phone layouts. Loaded after the legacy design layers. */
:root {
  --r-box: 14px;
  --r-media: 16px;
  --r-thumb: 8px;
  --r-sheet: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-top: calc(56px + var(--safe-top));
  --mobile-bottom: calc(64px + var(--safe-bottom));
}
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 24px; }
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
/* Pure black surfaces for both existing dark-theme preferences. */
:root:not([data-theme="light"]) {
  --bg: #000000;
  --bg-elev: #000000;
  --surface-1: #000000;
  --surface-2: #000000;
  --card: #000000;
  --input: #000000;
  --blur-bg: rgba(0, 0, 0, .92);
  --border: #262626;
  --border-strong: #3a3a3a;
}
body { overflow-wrap: break-word; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .45; }
:is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ink, var(--accent));
  outline-offset: 3px;
}
.btn { min-height: 40px; height: auto; padding: 9px 18px; gap: 8px; line-height: 20px; }
.btn-lg { min-height: 48px; }
.btn-sq { min-width: 40px; padding: 0; aspect-ratio: 1; }
.icon-btn { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-radius: 12px !important; }
.btn .ic, .icon-btn .ic { flex-shrink: 0; }
.field { border-radius: 12px; min-width: 0; }
.field input, .field textarea, .field select { border-radius: 12px !important; }
.field input, .field textarea, .field select { padding-left: 12px; padding-right: 12px; }
.field label { left: 12px; }
.searchbox, .gp-search { min-height: 44px; }
.searchbox input, .gp-search input { min-width: 0; }
.modal { border-radius: var(--r-sheet) !important; }
.modal-head { min-height: 60px; height: auto; padding-block: 8px; gap: 12px; }
.modal-head h2 { line-height: 26px; min-width: 0; }
.popover, .menu { padding: 6px; border-radius: 16px !important; }
.menu-item { min-height: 44px; gap: 12px; border-radius: 10px !important; }
.toast { max-width: calc(100vw - 32px); border-radius: 16px !important; line-height: 20px; }
.post-head, .post-body, .user-row .info, .profile-bio, .conn-name { min-width: 0; }
.post-text, .profile-bio, .conn-name, .ext-text { overflow-wrap: anywhere; }
.post-text { line-height: 22px !important; }
.post-actions { align-items: center; gap: 2px; }
.post-actions .act { min-height: 40px; justify-content: center; gap: 2px; }
.post-actions .act .bubble { margin: 0; width: 28px; height: 32px; }
.post-actions .act .n { padding: 0 3px 0 0; font-variant-numeric: tabular-nums; }
.tabs.scroll, .p-tabs, .chips-row { overscroll-behavior-x: contain; }
.tabs.scroll, .p-tabs { scrollbar-width: none; }
.tabs.scroll::-webkit-scrollbar, .p-tabs::-webkit-scrollbar { display: none; }
.dm-msgs, .gp-grid, .vsheet-body { overscroll-behavior-y: contain; }
.dm-msgs, .dm-compose .box, .dm-compose textarea { min-width: 0; min-height: 0; }
.dm-compose { flex-shrink: 0; background: var(--bg); }
.dm-compose .box { border-radius: 22px; }
.conn-actions, .profile-counts { row-gap: 8px; }
.conn-dev { flex-wrap: wrap; }
.conn-dev select { max-width: 100%; }
.layout, .primary, .landing { min-height: 100dvh; }
.sidenav-inner, .dm-thread, .watch { height: 100dvh; }
:root {
  --surface-gradient: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg) 72%);
  --card-gradient: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface-1)), var(--surface-1) 80%);
  --action-gradient: linear-gradient(135deg, var(--accent-fill, var(--accent)), color-mix(in srgb, var(--accent-fill, var(--accent)) 80%, #151126));
}
.btn-accent { background: var(--action-gradient) !important; }
.conn-card, .theme-opt, .mode-card:not(:first-child) { background: var(--card-gradient); }

/* Opaque navigation surfaces keep moving media from competing with controls. */
.topbar:not(.watch-top), .m-top, .p-tabs, .modal-head {
  background: var(--surface-gradient) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn:not(.btn-sq) { border-radius: 12px !important; }
.searchbox { border-radius: 14px !important; padding-inline: 14px; gap: 10px; }
.searchbox .ic { flex: 0 0 auto; color: var(--muted); }
.searchbox input { width: 100%; line-height: 24px; }
.topbar-row { gap: 12px; padding-inline: 16px; }
.topbar-row h1, .topbar-row h2 { min-width: 0; }
.modal-head .icon-btn, .topbar-row > .icon-btn { align-self: center; }

/* Discover owns one sticky surface. Its height follows its contents, including zoom. */
.dc { width: 100%; min-width: 0; }
.dc-toolbar {
  position: sticky; top: 0; z-index: 12; isolation: isolate;
  background: var(--surface-gradient); border-bottom: 1px solid var(--divider);
}
.dc-toolbar .dc-head {
  position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 20px 20px 12px; gap: 20px;
}
.dc-toolbar .dc-search { flex: 1 1 auto; min-width: 0; gap: 10px !important; }
.dc-toolbar .dc-search > form { flex: 1 1 0%; width: auto; min-width: 0; height: 44px; }
.dc-toolbar .dc-search > .icon-btn {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: var(--surface-1); color: var(--text); border: 1px solid var(--divider);
}
.dc-toolbar .dc-search > .icon-btn:hover { background: var(--surface-2); }
.dc-toolbar .chips-row {
  position: static; margin: 0; padding: 0 12px; gap: 4px !important;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  scroll-padding-inline: 12px;
}
.dc-toolbar .chip-tab.tab {
  flex: 0 0 auto; height: 48px; min-height: 48px; padding: 0 14px !important;
  white-space: nowrap; font-size: 14px; background: transparent !important;
}
.dc-toolbar .chip-tab.tab > span { position: relative; display: flex; align-items: center; height: 100%; }
.dc-toolbar .chip-tab.tab.active > span::after {
  display: block !important; content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  width: auto; height: 3px !important; margin: 0; border-radius: 3px 3px 0 0 !important;
  background: var(--accent);
}
.dc #ex-body { padding-top: 20px; }
.dc .sec-head { padding: 0 20px 12px; flex-wrap: wrap; gap: 4px 12px; }
.dc .sec-head .sec-title { font-size: 18px !important; line-height: 24px !important; }
.dc .sec-head .sec-sub { flex-basis: 100%; font-size: 13px; line-height: 19px; }
.dc .now-row { padding-inline: 20px; gap: 12px; }
.dc .now-card { border-radius: 16px; padding: 16px; }
.dc .now-card.lead .now-tag { font-size: 26px; line-height: 32px; }
.dc .dc-grid #ex-grid { padding: 0; }
.dc .pgrid, .dc .dc-grid .pgrid, .dc .vgrid {
  gap: 3px; padding: 0; border-radius: 0; overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dc .pgrid.mixed { grid-auto-flow: dense; }
.dc .pgrid .tile { border-radius: 4px; }
.dc .tile img { transition: transform .18s ease; }
.dc .tile-icons { top: 8px; right: 8px; background: transparent; padding: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.dc .tile-icons:empty { display: none; }
.dc .tile-sample { left: 8px; bottom: 8px; padding: 2px 6px; border: 0; border-radius: 6px; font-size: 10px; line-height: 14px; letter-spacing: .02em; }
.dc .tile-text { padding: 14px; font-size: 14px; line-height: 20px; }
.dc .tile-text > * { min-width: 0; }

@media (max-width: 767px) {
  .dc-toolbar { top: var(--safe-top); }
  .dc-toolbar .dc-head { padding: 16px 16px 12px; gap: 12px; }
  .dc-toolbar .dc-head .fr-title { font-size: 24px !important; line-height: 30px !important; margin: 0; }
  .dc-toolbar .dc-search { width: 100%; }
  .dc-toolbar .chips-row { padding-inline: 8px; }
  .dc .sec-head { padding-inline: 16px; }
  .dc .now-row { padding-inline: 16px; scroll-padding-inline: 16px; }
  .dc .now-card, .dc .now-card.lead { flex: 0 0 78%; min-height: 168px; }
  .dc .pgrid, .dc .dc-grid .pgrid, .dc .vgrid { padding: 0; gap: 3px; }
}
@media (hover: none) {
  .dc .tile:hover img { transform: none; }
}

/* Keep the original grid's engagement peek, including keyboard navigation. */
.tile .tile-hover { gap: clamp(8px, 2vw, 18px); padding: 8px; background: rgba(0,0,0,.48); pointer-events: none; font-size: 14px; }
.tile:hover .tile-hover, .tile:focus-visible .tile-hover { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tile-hover > span { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tile .tile-hover { transition: none; } }

@media (max-width: 767px) {
  body { overflow-y: visible; }
  html:not([data-page="home"]) { --mobile-top: var(--safe-top); }
  .layout:not([data-page="home"]) .m-top { display: none; }
  .layout[data-page="home"] .fr-head-row { min-height: 0; height: 0; padding: 0; }
  .layout[data-page="home"] .fr-head-row .fr-bell { display: none; }
  .layout[data-page="home"] .fr-head-row h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  html { scroll-padding-top: calc(var(--mobile-top) + 64px); scroll-padding-bottom: calc(var(--mobile-bottom) + 16px); }
  html[data-page=profile] { scroll-padding-top: calc(var(--mobile-top) + 112px); }
  .layout { width: 100%; }
  .primary, .layout.wide .primary {
    flex: 1 1 100%; min-width: 0; width: 100% !important;
    padding-top: var(--mobile-top);
    padding-bottom: calc(var(--mobile-bottom) + 12px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .m-top {
    height: var(--mobile-top); padding-top: var(--safe-top);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .topbar { top: var(--mobile-top); }
  .p-tabs { top: calc(var(--safe-top) + 56px); }
  .m-bar {
    height: var(--mobile-bottom) !important; padding-bottom: var(--safe-bottom);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    border-top: 1px solid var(--divider) !important;
  }
  .m-bar .nav-item { min-width: 0; min-height: 56px; }
  .m-bar .nav-item > span { min-width: 44px; gap: 4px; padding: 6px 4px; }
  .m-bar .nav-create .nav-icon { height: 40px !important; width: 48px !important; }
  .m-top .m-av, .m-top .icon-btn { width: 44px; height: 44px; }
  .m-top .wordmark {
    width: auto; flex: 0 0 auto; gap: 8px; padding: 0 6px;
    background: transparent !important; border-radius: 0 !important;
  }
  .m-top .wm-mark { flex: 0 0 28px; }
  .m-top .wm-text { white-space: nowrap; }
  .layout[data-page=home] .m-top, .layout[data-page=home] .fr-head {
    transition: transform 180ms ease;
  }
  .home-header-hidden .layout[data-page=home] .m-top { transform: translateY(-100%); pointer-events: none; }
  .home-header-hidden .layout[data-page=home] .fr-head { transform: translateY(calc(-100% - var(--mobile-top))); pointer-events: none; }
  html.home-header-hidden { scroll-padding-top: 16px; }
  .btn, .btn-sm, .icon-btn, .btn-sq, .chip, .poll-opt, .reply-audience, .vr-btn, .sv-btn {
    min-height: 44px;
  }
  .icon-btn, .btn-sq { min-width: 44px; }
  .icon-btn { flex-basis: 44px; width: 44px; height: 44px; }
  .btn { padding-inline: 16px; }
  .btn-sq { padding: 0; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
    font-size: 16px !important; /* Prevent focus zoom in iOS Safari. */
  }
  .topbar .tabs { overflow-x: auto; scrollbar-width: none; }
  .topbar .tab { flex: 1 0 auto; min-height: 48px; padding-inline: 16px; }
  .p-tabs { overflow-x: auto; }
  .post-actions { gap: 0; }
  .post-actions .act { min-width: 44px; min-height: 44px; flex: 1 1 0; }
  .post-actions .act .bubble { width: 24px; flex-shrink: 0; }
  .post-actions .act .n { padding-right: 1px; font-size: 12px; }
  article.post, article.post:hover { padding: 14px 12px 4px !important; }
  .post-head { column-gap: 4px; }
  .composer { padding-inline: 12px; }
  .composer textarea { line-height: 24px; }
  .composer .c-toolbar { flex-wrap: wrap; gap: 8px; }
  .composer .c-tools { flex: 1 1 100%; min-width: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .composer .c-tools .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
  .composer .c-right { margin-left: auto; gap: 10px; padding-bottom: 4px; }
  .fr-ph .profile-actions { gap: 6px; }
  .fr-ph .profile-actions .btn { min-height: 44px; height: auto; padding-inline: 12px; }
  .fr-ph .profile-actions a.btn-outline { min-width: 44px; padding: 0; }
  .profile-counts { flex-wrap: wrap; }
  .modal-back { padding: var(--safe-top) 0 0; align-items: flex-end; overscroll-behavior: contain; }
  .modal {
    max-height: calc(100dvh - var(--safe-top) - 12px);
    border-radius: 24px 24px 0 0 !important;
    padding-bottom: max(16px, var(--safe-bottom));
    scroll-padding-block: 68px 24px;
    overscroll-behavior: contain;
  }
  .modal.auth { min-height: 0; }
  .auth-body { width: 100%; max-width: 420px; padding: 20px 24px 24px; margin-inline: auto; }
  .is-sheet .gp { height: 82dvh; max-height: calc(100dvh - var(--safe-top) - 12px); border-radius: 24px 24px 0 0 !important; }
  .gp-head, .gp-search, .gp-chips { flex-shrink: 0; }
  .layout[data-page=messages] .dm-thread, .layout[data-page=settings] .set-main {
    top: var(--mobile-top); height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom));
  }
  .layout[data-page=settings] .set-main {
    height: auto; min-height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom)); padding-bottom: 24px;
  }
  .layout[data-page=settings] .set-main > * { flex-shrink: 0; }
  .dm-list, .set-nav { width: 100%; min-width: 0; min-height: 0; }
  .dm-thread > .topbar { flex-shrink: 0; top: 0; }
  .dm-compose { padding: 8px; gap: 2px; }
  .dm-compose .box { padding-left: 10px; margin: 0; }
  .dm-compose textarea { width: 0; min-height: 40px; }
  .dm-msgs { padding: 16px 12px; }
  .dm-profile { margin-inline: -12px; }
  .layout[data-page="messages"].detail-open { --mobile-bottom: var(--safe-bottom); }
  .layout[data-page="messages"].detail-open .m-bar { display: none; }
  .layout[data-page="messages"].detail-open .primary { padding-bottom: var(--safe-bottom); }
  .layout[data-page="messages"].detail-open .dm-thread { height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); }
  .msg { max-width: 88%; }
  .toggle-row, .radio-row { gap: 16px; min-height: 56px; }
  .toggle-row > :last-child { flex-shrink: 0; }
  .set-item { min-height: 52px; }
  .conn-card { padding: 14px; }
  .conn-head { flex-wrap: wrap; }
  .conn-actions .btn { white-space: normal; text-align: center; }
  .toast { bottom: calc(var(--mobile-bottom) + 12px); }
  .new-posts-pill { top: calc(var(--mobile-top) + 112px); }
  .layout[data-page=watch] .primary { padding: 0; }
  .layout[data-page=watch] .watch { height: 100dvh; }
  .layout[data-page=watch] .watch-top { padding-top: max(12px, var(--safe-top)); }
  .layout[data-page=watch] .watch-top { padding: max(8px, var(--safe-top)) 8px 8px; }
  .watch-top .tabs { padding: 0; gap: 4px; }
  .watch-top .tab { min-height: 44px; height: 44px; padding-inline: 12px; }
  .vslide .v-mute { top: calc(68px + var(--safe-top)); min-width: 44px; min-height: 44px; }
  .layout[data-page=watch] .vrail {
    gap: 10px; padding-bottom: 0;
    max-height: calc(100% - var(--safe-top) - var(--mobile-bottom) - 96px);
    overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  }
  .vrail > * { flex-shrink: 0; }
  .layout[data-page=watch] .vslide { padding-bottom: var(--mobile-bottom); padding-right: 0; }
  .layout[data-page=watch] .vsheet { bottom: var(--mobile-bottom); max-height: calc(100% - var(--mobile-bottom) - var(--safe-top) - 52px); border-radius: 24px 24px 0 0 !important; }
  .sv { max-height: 100dvh; }
  .fr-landing { padding: max(32px, var(--safe-top)) 24px max(24px, var(--safe-bottom)); }
  .fr-landing .right h1 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.12 !important; }
}

@media (pointer: coarse) {
  .btn, .icon-btn, .post-actions .act, .menu-item { min-height: 44px; }
  .icon-btn { min-width: 44px; }
}

@media (max-width: 374px) {
  article.post, article.post:hover { padding-inline: 8px !important; }
  .post-row { gap: 8px; }
  .post-body > .post-actions { margin-left: -48px; width: calc(100% + 48px); }
  .post-actions .act { min-width: 44px; }
  .post-actions .act .n { font-size: 11px; }
  .post-actions .act .bubble { width: 22px; }
  .fr-ph .profile-actions .btn { padding-inline: 10px; }
  .theme-opts { grid-template-columns: 1fr; }
}

/* One pane at a time until both conversations/settings columns have room. */
@media (max-width: 1023px) {
  .layout.wide .dm-list, .layout.wide .set-nav { width: 100%; }
  .layout.wide .dm-thread, .layout.wide .set-main { display: none; }
  .layout.wide.detail-open .dm-list, .layout.wide.detail-open .set-nav { display: none; }
  .layout.wide.detail-open .dm-thread, .layout.wide.detail-open .set-main { display: flex; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not([disabled]), .icon-btn:active { transform: none; }
  .layout[data-page=home] .m-top, .layout[data-page=home] .fr-head { transition: none; }
}
html[data-rm] .layout[data-page=home] .m-top, html[data-rm] .layout[data-page=home] .fr-head { transition: none; }

@media (max-width: 767px) {
  .phone-keyboard .modal-back, .phone-keyboard .gp-layer.is-sheet {
    top: var(--visible-top); bottom: auto; height: var(--visible-height); padding-top: 0;
  }
  .phone-keyboard .modal { max-height: calc(var(--visible-height) - 8px); padding-bottom: 12px; }
  .phone-keyboard .is-sheet .gp { height: calc(var(--visible-height) - 8px); max-height: 100%; padding-bottom: 12px; }
  .phone-keyboard .layout[data-page="messages"].detail-open .primary {
    position: fixed; top: var(--visible-top); height: var(--visible-height);
    min-height: 0; padding-block: 0;
  }
  .phone-keyboard .layout[data-page="messages"].detail-open .dm-thread { height: 100%; top: 0; }
}

/* Watch leaves the entire phone viewport to the video. Navigation lives in a drawer. */
.watch-menu { display: none; }
.watch-drawer-back {
  padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important;
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.28)) !important;
}
.watch-drawer-back .watch-drawer {
  display: flex; flex-direction: column; width: min(340px, 88vw) !important;
  max-width: 88vw; height: 100dvh; max-height: 100dvh; margin: 0;
  padding: var(--safe-top) 0 max(20px, var(--safe-bottom));
  border-radius: 0 24px 24px 0 !important; border: 0; border-right: 1px solid var(--divider);
  background: var(--surface-gradient); overflow-y: auto; touch-action: pan-y pinch-zoom;
  box-shadow: 20px 0 60px rgba(0,0,0,.24);
  animation: watch-drawer-in 220ms cubic-bezier(.2,.8,.2,1) both;
}
.watch-drawer-back.is-closing .watch-drawer { animation: watch-drawer-out 180ms ease-in both; }
.watch-drawer .modal-head { background: transparent !important; flex-shrink: 0; padding: 20px 20px 12px; }
.watch-drawer .modal-head h2 { font-size: 20px; }
.watch-drawer-hint { margin: 0; padding: 0 20px 20px; color: var(--muted); font-size: 13px; }
.watch-drawer-links { display: grid; gap: 6px; padding: 0 12px 24px; }
.watch-drawer-links a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px;
  border-radius: 14px; color: var(--text); font-weight: 600;
}
.watch-drawer-links a:hover { background: var(--hover); }
.watch-drawer-links a[aria-current] { background: color-mix(in srgb, var(--accent) 14%, var(--surface-1)); }
.watch-drawer-links .ic { flex: 0 0 22px; }
.watch-drawer-links .drawer-chevron { margin-left: auto; color: var(--muted); }
.watch-return { margin: auto 20px 0; min-height: 44px; flex-shrink: 0; }
@keyframes watch-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes watch-drawer-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (max-width: 767px) {
  .layout[data-page=watch] { --mobile-bottom: var(--safe-bottom); }
  .layout[data-page=watch] .m-bar { display: none; }
  .layout[data-page=watch] .primary { min-height: 100dvh; }
  .layout[data-page=watch] .watch-top {
    display: flex; align-items: flex-start; gap: 8px;
    padding: calc(8px + var(--safe-top)) 12px 28px;
    background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.4) 66%, transparent) !important;
    border: 0 !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .watch-menu {
    display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px;
    background: rgba(20,20,25,.65); color: #fff; border: 1px solid rgba(255,255,255,.2);
  }
  .watch-top .tabs { flex: 1; min-width: 0; justify-content: flex-start; padding: 0; gap: 2px; }
  .watch-top .tab { flex: 0 0 auto; font-size: 13px; padding-inline: 12px; }
  .layout[data-page=watch] .vslide { padding: 0; }
  .layout[data-page=watch] .vstage { width: 100%; max-width: 100%; }
  .layout[data-page=watch] .vrail {
    bottom: calc(112px + var(--safe-bottom)); right: 10px;
    max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 196px);
  }
  .layout[data-page=watch] .v-info {
    bottom: 0; padding: 100px 76px calc(28px + var(--safe-bottom)) 16px;
    background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.52) 55%, transparent) !important;
  }
  .layout[data-page=watch] .v-prog { bottom: var(--safe-bottom); height: 24px; }
  .layout[data-page=watch] .vsheet { bottom: 0; padding-bottom: var(--safe-bottom); max-height: calc(100% - var(--safe-top) - 72px); }
  .layout[data-page=watch] .toast { bottom: calc(20px + var(--safe-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .watch-drawer-back .watch-drawer { animation: none !important; }
}
html[data-rm] .watch-drawer-back .watch-drawer { animation: none !important; }
.layout[data-page=watch] .vfeed { touch-action: pan-y pinch-zoom; }

@media (max-width: 767px) {
  .dc-toolbar { transition: transform 180ms ease; }
  .discover-header-hidden .dc-toolbar {
    transform: translateY(calc(-100% - var(--safe-top)));
    pointer-events: none;
  }
  html.discover-header-hidden { scroll-padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dc-toolbar { transition: none; } }
html[data-rm] .dc-toolbar { transition: none; }

@media (max-width: 767px) {
  .layout[data-page=home] .m-bar, .layout[data-page=discover] .m-bar { transition: transform 180ms ease; }
  .home-header-hidden .layout[data-page=home] .m-bar,
  .discover-header-hidden .layout[data-page=discover] .m-bar {
    transform: translateY(100%); pointer-events: none;
  }
  html.home-header-hidden, html.discover-header-hidden { scroll-padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .layout[data-page=home] .m-bar, .layout[data-page=discover] .m-bar { transition: none; }
}
html[data-rm] .layout[data-page=home] .m-bar, html[data-rm] .layout[data-page=discover] .m-bar { transition: none; }

/* Icon-only mobile navigation; accessible names remain on the links and button. */
.m-bar .nav-item .lbl { display: none !important; }
.m-bar .nav-item > span { min-height: 48px; gap: 0 !important; justify-content: center; }
.layout[data-page] .m-bar .nav-create .nav-icon {
  width: 36px !important; height: 36px !important; padding: 0;
  background: transparent !important; border: 0; border-radius: 0 !important; box-shadow: none;
}
.m-bar .frame-create-mark { display: block; width: 36px; height: 36px; flex-shrink: 0; }
.m-bar .nav-item:hover > span { background: transparent !important; }
.m-bar .nav-item > span { position: relative; isolation: isolate; }
.m-bar .nav-item > span::after {
  content: ''; position: absolute; width: 48px; height: 48px; left: 50%; top: 50%;
  transform: translate(-50%, -50%); border-radius: 16px;
  background: var(--hover); opacity: 0; z-index: -1; pointer-events: none;
  transition: opacity 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .m-bar .nav-item:hover > span::after { opacity: 1; }
}
.m-bar .nav-item:active > span::after { opacity: 1; }
.m-bar .nav-item:focus-visible { outline: none; }
.m-bar .nav-item:focus-visible > span::after { opacity: 1; outline: 2px solid var(--accent-ink, var(--accent)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .m-bar .nav-item > span::after { transition: none; } }
html[data-rm] .m-bar .nav-item > span::after { transition: none; }

/* Create is a format picker, rather than a multi-step wizard. */
.modal.create-sheet { width: 480px; background: var(--surface-gradient); }
.create-sheet .create-sheet-head {
  align-items: flex-start; justify-content: space-between; padding: 16px 20px 20px;
  background: transparent !important; border: 0;
}
.create-sheet-head h2 { margin: 0 0 6px; font-size: 22px; line-height: 28px; }
.create-sheet-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.create-sheet-head .icon-btn { margin-top: -4px; background: var(--surface-2); }
.create-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.create-choice {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-width: 0; min-height: 112px; padding: 14px; gap: 4px;
  border: 1px solid var(--divider); border-radius: 16px; background: var(--card-gradient);
  transition: background 140ms ease, border-color 140ms ease;
}
.create-choice:hover, .create-choice:focus-visible { background: var(--surface-2); border-color: var(--accent); }
.create-choice-icon { display: flex; align-items: center; justify-content: flex-start; width: 32px; height: 32px; margin-bottom: 6px; color: var(--text); }
.create-choice-icon > svg { width: 32px; height: 32px; }
.create-choice-icon .ic svg { width: 24px; height: 24px; }
.create-choice b { font-size: 15px; line-height: 20px; font-weight: 650; }
.create-choice small { color: var(--muted); font-size: 12px; line-height: 17px; }
.create-unavailable { display: flex; gap: 10px; align-items: center; margin: 16px 20px 4px; padding-top: 16px; border-top: 1px solid var(--divider); color: var(--muted); font-size: 13px; }
.create-unavailable > .ic { display: flex; }
@media (max-width: 374px) {
  .create-choices { padding-inline: 12px; gap: 8px; }
  .create-choice { padding: 12px; }
  .create-sheet .create-sheet-head { padding-inline: 16px; }
}

/* Reels controls float over the video without opaque circular plates. */
.watch-top { display: flex; align-items: center; gap: 8px; }
.watch-top .watch-back { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; }
.watch-top .watch-back,
.watch-top .watch-menu,
.watch .v-mute,
.watch .vr-btn .vr-ic {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff;
}
.watch-top .watch-back svg,
.watch-top .watch-menu svg,
.watch .v-mute svg,
.watch .vr-ic svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
.watch .vr-ic svg { width: 28px; height: 28px; }
.watch .vr-cnt { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.watch .vr-btn.like.on .vr-ic { color: #ff496a !important; }
.watch .vr-btn:focus-visible,
.watch .watch-back:focus-visible,
.watch .watch-menu:focus-visible { outline: 2px solid white; outline-offset: 2px; border-radius: 12px !important; }
@media (max-width: 767px) {
  .watch-top .watch-menu { order: 3; }
  .watch-top .tabs { overflow-x: auto; scrollbar-width: none; }
  .watch-top .tabs::-webkit-scrollbar { display: none; }
  .watch-top .tab { padding-inline: 9px; }
}

/* Keep the readability fade anchored to the viewer as clips scroll beneath it. */
.watch { isolation: isolate; }
.watch::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.54) 10%, rgba(0,0,0,.22) 23%, rgba(0,0,0,0) 42%);
}
.layout[data-page=watch] .v-info { background: transparent !important; z-index: 2; bottom: 0; }
.watch .vrail { position: relative; z-index: 2; filter: none !important; text-shadow: none !important; }
.watch .vr-ic svg, .watch .vr-cnt, .watch .vr-n, .watch .vr-plays { filter: none !important; text-shadow: none !important; }
.watch .sens-cover, .watch .v-paused, .watch .v-hearts { z-index: 2; }
@media (max-width: 767px) {
  .layout[data-page=watch] .vstage { border-radius: 0 !important; }
  .layout[data-page=watch] .vrail { position: absolute; }
  .watch::after {
    background:
      linear-gradient(to left, rgba(0,0,0,.46) 0%, rgba(0,0,0,.28) 13%, rgba(0,0,0,.09) 25%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.54) 10%, rgba(0,0,0,.22) 23%, rgba(0,0,0,0) 42%);
  }
}
.watch .vr-btn .vr-ic { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (max-width: 767px) {
  .layout[data-page=watch] .vstage video { object-fit: cover; }
}

/* Reels: controls on one row, unclipped text tabs on their own row. */
.layout[data-page=watch] .watch-top {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
  gap: 0 8px; padding: calc(6px + var(--safe-top)) 12px 20px;
  background: linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.36) 70%,transparent) !important;
  border: 0 !important;
}
.watch-top .watch-back { grid-column: 1; grid-row: 1; }
.watch-top .watch-menu { display: inline-flex; grid-column: 3; grid-row: 1; }
.watch-top .tabs { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; gap: 4px; width: 100%; padding: 0; overflow: visible; }
.watch-top .tabs .tab { flex: 1 1 0; min-width: 0; max-width: 140px; height: 40px; min-height: 40px; padding: 0 6px; font-size: 13px; border-radius: 0 !important; background: transparent !important; color: #ccc !important; }
.watch-top .tabs .tab.active { background: transparent !important; color: #fff !important; }
.watch-top .tabs .tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 6px; }
.watch-top .tabs .tab.active > span { border-bottom: 2px solid #fff; }
.watch .vslide .v-mute { top: calc(106px + var(--safe-top)); }

/* Consistent desktop rail alignment, labels and quiet rounded states. */
@media (min-width: 768px) {
  .sidenav-inner { gap: 6px; }
  .sidenav .rail-tabs { width: 100%; gap: 4px; }
  .sidenav .nav-item > span { min-height: 46px; border-radius: 14px !important; }
  .sidenav .nav-item.active > span { background: color-mix(in srgb,var(--accent) 12%,var(--bg)) !important; }
  .sidenav .nav-item:hover > span { background: var(--hover) !important; }
  .sidenav .wordmark { background: transparent !important; }
  .sidenav .account-switch { min-height: 52px; }
}
@media (min-width: 1280px) {
  .sidenav-inner { align-items: stretch; padding: 20px 16px; }
  .sidenav .nav-item { justify-content: flex-start; }
  .sidenav .nav-item > span { width: 100%; justify-content: flex-start; padding: 10px 14px; gap: 14px; }
  .sidenav .nav-item .lbl, .sidenav .post-btn .lbl { display: inline !important; font-size: 15px; }
  .sidenav .account-switch .names { display: block; text-align: left; min-width: 0; }
  .sidenav .account-switch > .ic { display: inline-flex; }
  .sidenav .wordmark { align-self: flex-start; margin-bottom: 16px; }
  .sidenav .post-btn { border-radius: 14px !important; height: 46px; margin: 12px 0 4px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sidenav .rail-tabs, .sidenav #nav-more { width: 52px; }
  .sidenav .nav-item > span { width: 48px; height: 48px; padding: 10px; justify-content: center; }
  .sidenav .account-switch { padding: 8px; }
}
.layout[data-page=watch] .watch-top { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.watch-top::before { content: 'Reels'; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; color: #fff; font-size: 15px; font-weight: 650; }
.watch-top .tabs .tab { height: 44px; min-height: 44px; }

/* Shared Frame-plus mark in the expanded and compact desktop navigation. */
@media (min-width: 768px) {
  .sidenav .nav-create .nav-icon {
    width: 26px; height: 26px; flex: 0 0 26px;
    padding: 0; background: transparent !important; border: 0;
    border-radius: 0 !important; box-shadow: none;
  }
  .sidenav .nav-create .frame-create-mark { display: block; width: 30px; height: 30px; flex-shrink: 0; }
}

/* Mobile account drawer with a prominent profile card. */
.account-drawer-back { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; }
.modal.account-drawer { width: min(360px, 88vw) !important; height: 100dvh; max-height: 100dvh !important; margin: 0 !important; padding: max(12px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)) !important; border-radius: 0 24px 24px 0 !important; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); animation: account-enter .22s ease-out; }
.account-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.account-drawer-head h2 { font-size: 18px; margin: 0; }
.account-profile-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--divider); border-radius: 20px; background: var(--surface-gradient); color: var(--text); gap: 5px; }
.account-profile-tile > .avatar { width: 64px; height: 64px; font-size: 24px; margin-bottom: 8px; }
.account-profile-tile > strong { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.account-profile-tile > .muted { font-size: 14px; }
.account-profile-tile p { font-size: 14px; line-height: 1.5; margin: 8px 0; overflow-wrap: anywhere; }
.account-profile-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.account-profile-stats b { color: var(--text); }
.account-profile-link { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.account-profile-link svg { width: 16px; height: 16px; }
.account-drawer-options { display: grid; gap: 3px; padding-top: 16px; }
.account-drawer-options .menu-item { min-height: 48px; border-radius: 12px !important; gap: 12px; white-space: normal; text-align: left; }
@keyframes account-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .modal.account-drawer { animation: none; } }
html[data-rm] .modal.account-drawer { animation: none; }

/* Compact account identity row; the entire card remains a profile link. */
.account-profile-tile { display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; padding: 16px; align-items: center; border-radius: 16px; }
.account-profile-tile > .avatar { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; font-size: 20px; }
.account-profile-tile > strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 16px; line-height: 1.3; }
.account-profile-tile > .muted { grid-column: 2; grid-row: 2; align-self: start; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

/* Flat UI surfaces; media readability overlays remain separate. */
:root { --surface-gradient: var(--bg); --card-gradient: var(--surface-1); --action-gradient: var(--accent-fill, var(--accent)); --ring: var(--accent); }
.watch-drawer-back { background: rgba(0,0,0,.5) !important; }
.lpv.stage i { background: var(--surface-1); }

/* Frame welcome page: solid surfaces, editorial type, original geometric artwork. */
.welcome-page { max-width: 1200px; margin: auto; padding: 0 40px; color: var(--text); }
.welcome-nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.welcome-nav .wordmark { width: auto; margin: 0; padding: 0; background: none; }
.welcome-nav .wm-text { display: inline; }
.welcome-nav .btn { gap: 10px; border-radius: 12px !important; padding-inline: 20px; }
.welcome-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; padding: 56px 0 80px; }
.welcome-eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.welcome-copy h1 { font-size: clamp(42px,5.4vw,70px); line-height: 1.04; letter-spacing: -.055em; margin: 22px 0; font-weight: 750; }
.welcome-copy h1 em { color: #a58cff; font-style: normal; }
.welcome-copy > p { max-width: 420px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.welcome-actions { display: flex; align-items: center; gap: 22px; margin: 30px 0 16px; flex-wrap: wrap; }
.welcome-actions .btn { min-height: 50px; border-radius: 14px !important; gap: 12px; padding-inline: 20px; }
.welcome-actions > a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 44px; }
.welcome-caption { font-size: 12px; color: var(--muted); }
.welcome-preview { padding: 20px; background: var(--surface-1); border: 1px solid var(--divider); border-radius: 28px; transform: rotate(2deg); }
.welcome-preview-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.welcome-preview-top > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 650; }
.welcome-preview-top svg { width: 22px; height: 22px; }
.welcome-photo { overflow: hidden; border-radius: 18px; background: var(--bg); }
.welcome-art { height: 240px; background: #c4b4e4; position: relative; overflow: hidden; }
.welcome-art span { position: absolute; width: 140px; height: 140px; background: #f3a570; border-radius: 50%; top: 26px; right: 32px; }
.welcome-art i { position: absolute; height: 250px; width: 220px; border: 44px solid #66508d; border-bottom: 0; border-radius: 120px 120px 0 0; left: 25px; top: 54px; }
.welcome-art b { position: absolute; height: 36px; background: #352d44; left: 0; right: 0; bottom: 0; }
.welcome-photo-caption { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.welcome-photo-caption strong,.welcome-photo-caption small { display: block; }
.welcome-photo-caption strong { font-size: 14px; }
.welcome-photo-caption small { font-size: 11px; color: var(--muted); margin-top: 5px; }
.welcome-thought { display: flex; gap: 12px; margin: 18px 0; padding: 16px; background: var(--bg); border-radius: 18px; }
.welcome-avatar { display: grid; place-items: center; background: #dac8aa; color: #473b2b; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.welcome-thought strong { font-size: 12px; }.welcome-thought small { color: var(--muted); font-weight: 400; }
.welcome-thought p { font-size: 13px; line-height: 1.5; margin: 8px 0 12px; }
.welcome-thought div > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.welcome-thought svg { width: 14px; height: 14px; }
.welcome-preview-bottom { display: flex; justify-content: space-around; color: var(--muted); font-size: 10px; }
.welcome-preview-bottom span { display: flex; align-items: center; gap: 7px; }.welcome-preview-bottom svg { width: 17px; height: 17px; }
.welcome-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; padding: 36px 0; border-top: 1px solid var(--divider); }
.welcome-features article > span { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.welcome-features h2 { font-size: 19px; letter-spacing: -.02em; margin: 14px 0 10px; }.welcome-features p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.welcome-footer { display: flex; justify-content: space-between; gap: 24px; padding: 26px 0 32px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--muted); }.welcome-footer details { max-width: 340px; }.welcome-footer summary { cursor: pointer; }.welcome-footer p { line-height: 1.6; }
@media(max-width:767px) {
 .welcome-page { padding: 0 22px; }.welcome-nav { padding: 22px 0; }.welcome-nav .wm-text { font-size: 23px; }
 .welcome-hero { grid-template-columns: 1fr; gap: 40px; padding: 36px 0 44px; }.welcome-copy h1 { font-size: clamp(42px,10.5vw,62px); }.welcome-copy > p { font-size: 16px; }
 .welcome-actions { gap: 8px 18px; }.welcome-preview { transform: none; padding: 16px; }.welcome-art { height: 220px; }
 .welcome-features { grid-template-columns: 1fr; gap: 28px; }.welcome-footer { flex-direction: column; gap: 16px; }
}

/* A quieter, familiar two-column welcome screen. */
.entry-page { max-width: 900px; min-height: 100dvh; margin: auto; padding: 60px 30px 24px; display: grid; grid-template-columns: 1fr 350px; gap: 36px 60px; align-content: center; align-items: center; }
.entry-preview { display: flex; justify-content: center; }
.entry-phone { width: 290px; border: 1px solid var(--divider); border-radius: 28px; padding: 16px 0; background: var(--surface-1); overflow: hidden; }
.entry-phone-head { display: flex; align-items: center; padding: 0 16px 14px; gap: 7px; }.entry-phone-head .wm-text { display: inline; font-size: 23px; }.entry-phone-head > .ic { margin-left: auto; }
.entry-stories { display: flex; justify-content: space-around; padding: 0 12px 16px; border-bottom: 1px solid var(--divider); }.entry-stories span { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--accent); border-radius: 50%; font-size: 13px; color: var(--muted); }
.entry-author { display: flex; align-items: center; gap: 9px; padding: 12px; font-size: 12px; }.entry-author > .ic { margin-left: auto; }.entry-author .welcome-avatar { width: 26px; height: 26px; }
.entry-phone .welcome-art { height: 230px; }.entry-reactions { display: flex; gap: 14px; padding: 14px 12px 0; }.entry-reactions > span:last-child { margin-left: auto; }.entry-phone > p { margin: 10px 12px 20px; font-size: 11px; }.entry-phone-nav { display: flex; justify-content: space-around; align-items: center; padding-top: 14px; border-top: 1px solid var(--divider); }.entry-phone-nav > svg { width: 26px; height: 26px; }.entry-phone .ic svg { width: 20px; height: 20px; }
.entry-panel { padding: 36px 30px 28px; text-align: center; border: 1px solid var(--divider); border-radius: 16px; }.entry-logo { display: inline-flex; gap: 10px; align-items: center; }.entry-logo .wm-text { display: inline; font-size: 38px; }.entry-logo .wm-mark,.entry-logo .wm-mark svg { width: 40px; height: 40px; }
.entry-panel > p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 24px 0; }.entry-panel .btn { width: 100%; min-height: 44px; border-radius: 10px !important; }.entry-divider { display: flex; align-items: center; gap: 16px; margin: 22px 0; font-size: 12px; color: var(--muted); }.entry-divider::before,.entry-divider::after { content: ''; flex: 1; height: 1px; background: var(--divider); }.entry-browse { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 600; }
.entry-signup { margin-top: 14px; padding: 20px 12px; border: 1px solid var(--divider); border-radius: 14px; text-align: center; font-size: 13px; }.entry-signup button { background: transparent; border: 0; color: var(--accent-ink,var(--accent)); font: inherit; font-weight: 650; cursor: pointer; min-height: 44px; padding: 0 5px; }.entry-note { text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); margin: 20px 0 0; }.entry-footer { grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-start; gap: 24px; font-size: 11px; color: var(--muted); }.entry-footer details { max-width: 280px; }.entry-footer summary { cursor: pointer; }.entry-footer p { line-height: 1.6; }
@media(max-width:767px) { .entry-page { grid-template-columns: minmax(0,350px); justify-content: center; padding: 40px 22px 24px; gap: 40px; }.entry-preview { display: none; }.entry-panel { border: 0; padding: 20px 12px; }.entry-signup { border: 0; border-top: 1px solid var(--divider); border-radius: 0; }.entry-footer { flex-wrap: wrap; } }

.entry-photo { width: 100%; height: 290px; object-fit: cover; object-position: center 55%; display: block; }
.entry-mobile-photo { display: none; }
@media (max-width: 767px) {
  .entry-page { padding: 28px 24px 22px; min-height: 100dvh; gap: 24px; align-content: center; }
  .entry-mobile-photo { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 55%; border-radius: 16px; margin-bottom: 24px; }
  .entry-panel { padding: 0; }
  .entry-logo .wm-text { font-size: 32px; }
  .entry-logo .wm-mark,.entry-logo .wm-mark svg { width: 34px; height: 34px; }
  .entry-panel > p { margin: 14px 0 22px; font-size: 14px; }
  .entry-divider { margin: 14px 0 6px; }
  .entry-signup { margin-top: 18px; padding: 12px 0 0; }
  .entry-footer { font-size: 10px; gap: 16px; }
}

/* Profile notes: a rounded thought bubble with a two-dot tail. */
.fr-ph .p-note {
  top: auto; bottom: calc(100% - 12px); left: 50%;
  transform: translateX(-35%); width: max-content; min-width: 76px;
  max-width: min(180px, 48vw); min-height: 44px; padding: 12px 16px;
  border: 1px solid var(--divider); border-radius: 22px !important;
  background: var(--surface-2, var(--surface-1)); color: var(--text);
  font-size: 13px; line-height: 1.4; text-align: center;
  overflow: visible; overflow-wrap: anywhere; white-space: normal;
  box-shadow: 0 3px 12px rgba(0,0,0,.12); z-index: 3;
}
.fr-ph .p-note::before, .fr-ph .p-note::after {
  content: ''; position: absolute; pointer-events: none;
  background: var(--surface-2, var(--surface-1)); border-radius: 50%;
}
.fr-ph .p-note::before { width: 12px; height: 12px; left: 22px; bottom: -6px; }
.fr-ph .p-note::after { width: 6px; height: 6px; left: 17px; bottom: -15px; }
.fr-ph .p-note.add { justify-content: center; gap: 5px; color: var(--muted); }
.fr-ph .p-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .fr-ph .p-note:hover { border-color: var(--accent); }
}
.entry-panel > .entry-logo { margin-bottom: 26px; }

/* An endless, tilted photo mosaic fades into the welcome controls. */
.entry-immersive { position: relative; isolation: isolate; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 350px 24px 28px; overflow: hidden; min-height: 100dvh; }
.entry-immersive .entry-preview { display: none; }
.entry-immersive .entry-account { width: min(100%,350px); position: relative; z-index: 1; }
.entry-immersive .entry-panel { border: 0; padding: 0; }
.entry-immersive .entry-signup { border: 0 !important; margin-top: 12px; padding: 4px 0 12px; }
.entry-immersive .entry-footer { margin-top: 26px; position: relative; z-index: 1; }
.entry-mosaic { position: absolute; inset: 0 0 auto; height: 440px; overflow: hidden; pointer-events: none; z-index: -1; mask-image: linear-gradient(to bottom,#000 0%,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%); }
.entry-mosaic-tilt { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; width: min(1300px,125vw); position: absolute; left: 50%; top: -180px; transform: translateX(-50%) rotate(-12deg); }
.entry-mosaic-column { animation: moments-scroll 75s linear infinite; }
.entry-mosaic-column:nth-child(even) { animation-direction: reverse; animation-duration: 90s; }
.entry-mosaic-set { display: grid; gap: 12px; padding-bottom: 12px; }
.entry-mosaic-set img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; }
.entry-mosaic-set img:nth-child(3n) { height: 320px; }
.entry-motion { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 50%; background: #18171ecc; color: white; display: grid; place-items: center; z-index: 2; cursor: pointer; }
.entry-immersive.is-paused .entry-mosaic-column { animation-play-state: paused; }
@keyframes moments-scroll { to { transform: translateY(-50%); } }
@media(max-width:767px) { .entry-immersive { padding-top: 290px; justify-content: center; }.entry-mosaic { height: 355px; }.entry-mosaic-tilt { width: 140vw; gap: 8px; top: -100px; }.entry-mosaic-set { gap: 8px; padding-bottom: 8px; }.entry-mosaic-set img { height: 145px; border-radius: 5px; }.entry-mosaic-set img:nth-child(3n) { height: 200px; }.entry-immersive .entry-footer { margin-top: 16px; } }
@media(prefers-reduced-motion:reduce) { .entry-mosaic-column { animation: none; }.entry-motion { display: none; } }
html[data-rm] .entry-mosaic-column { animation: none; }
html[data-rm] .entry-motion { display: none; }
.entry-immersive .entry-footer { flex-wrap: wrap; align-items: center; gap: 8px 20px; text-align: center; }
.entry-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; }
.entry-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 11px; }
.entry-legal a:hover { color: var(--text); text-decoration: underline; }
.entry-legal a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media(max-width:767px) { .entry-legal { flex-basis: 100%; order: -1; gap: 0 16px; } }

/* Full-width welcome mosaic, with enough overscan for the tilted right edge. */
.entry-mosaic-tilt { width: max(150vw, 1400px); grid-template-columns: repeat(6,minmax(0,1fr)); top: -240px; }
@media (min-width: 768px) {
  .entry-immersive { padding: clamp(330px,48vh,520px) 32px 28px; justify-content: center; }
  .entry-mosaic { height: clamp(420px,60vh,660px); }
  .entry-mosaic-set img { height: clamp(200px,18vw,320px); }
  .entry-mosaic-set img:nth-child(3n) { height: clamp(270px,24vw,410px); }
  .entry-immersive .entry-account { width: 350px; }
  .entry-immersive .entry-logo { margin-bottom: 28px; }
  .entry-immersive .entry-footer { margin-top: 18px; }
}
@media (max-width: 767px) {
  .entry-mosaic-tilt { width: 180vw; grid-template-columns: repeat(6,minmax(0,1fr)); top: -100px; }
}

/* Familiar inline login: one compact card, clear fields, separate signup. */
.entry-immersive .entry-account { width: min(100%,380px); background: var(--bg); border: 1px solid var(--divider); border-radius: 20px; padding: 28px; }
.entry-login-form .modal-head,.entry-login-form form > h2,.entry-login-form form > p { display: none; }
.entry-login-form .auth-body { padding: 0; width: 100%; }
.entry-login-form .field { text-align: left; margin-bottom: 12px; }
.entry-login-form .field label { font-size: 12px; color: var(--muted); margin-bottom: 7px; display: block; }
.entry-login-form input { width: 100%; min-height: 48px; border-radius: 10px !important; background: var(--surface-1); font-size: 16px; }
.entry-login-form .btn { min-height: 46px; }
.entry-login-form .err:empty { display: none; }
.entry-immersive .entry-signup { padding-bottom: 0; margin-top: 16px; }
.entry-immersive .entry-signup .btn { width: 100%; min-height: 44px; border: 1px solid var(--divider); border-radius: 10px !important; color: var(--text); }
@media(min-width:768px) { .entry-immersive { padding-top: clamp(240px,32vh,350px); }.entry-mosaic { height: clamp(420px,65vh,680px); } }
@media(max-width:767px) { .entry-immersive { padding-top: 220px; justify-content: flex-start; }.entry-immersive .entry-account { border: 0; padding: 20px 0 0; }.entry-immersive .entry-footer { margin-top: 18px; }.entry-mosaic { height: 280px; } }
.entry-login-form form:has(input[name=code]) > h2,.entry-login-form form:has(input[name=code]) > p { display: block; text-align: left; }

/* Compact note composer with a full-width writing area. */
.modal.note-editor { width: min(440px,100%) !important; }
.note-editor .modal-head { gap: 10px; padding: 14px 16px; }
.note-editor .modal-head h2 { flex: 1; font-size: 18px; }
.note-editor #nt-save { min-height: 44px; min-width: 76px; border-radius: 12px !important; }
.note-editor #nt-save:disabled { opacity: .45; cursor: default; }
.note-editor .note-preview { min-height: 130px; margin: 6px 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.note-editor .note-preview .avatar { width: 72px; height: 72px; font-size: 28px; }
.note-editor .note-bub.big { position: relative; inset: auto; transform: none; max-width: 240px; font-size: 14px; line-height: 1.4; padding: 10px 14px; margin-bottom: -4px; z-index: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
.note-text-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.note-editor #nt-text { display: block; width: 100%; min-height: 88px; padding: 14px; resize: none; border: 1px solid var(--divider); border-radius: 14px !important; font-size: 16px; line-height: 1.5; background: var(--surface-1); }
.note-editor #nt-counter { padding-top: 6px; font-size: 12px; }
.note-editor .radio-row { min-height: 52px; padding: 12px; margin-top: 7px; gap: 12px; border: 1px solid var(--divider); border-radius: 12px; font-size: 14px; }
.note-editor .radio-row:has(input:checked) { border-color: var(--accent); background: var(--surface-1); }
.note-editor .radio-row input { width: 18px; height: 18px; min-width: 18px; }
.note-editor .m-body > p { font-size: 12px; line-height: 1.5; margin: 16px 0 4px; }
@media(max-width:767px) { .modal.note-editor { max-height: calc(100dvh - 20px) !important; overflow-y: auto; }.note-editor .m-body { padding-bottom: max(20px,env(safe-area-inset-bottom)) !important; } }

/* Mobile profiles already expose identity below the cover and bottom navigation. */
@media (max-width: 767px) {
  .layout[data-page=profile] #main > .topbar { display: none; }
  .layout[data-page=profile] .p-tabs { top: var(--safe-top); }
}

/* Final login composition: quiet form, restrained imagery, no oversized card. */
.entry-immersive { justify-content: center; padding: 290px 24px 32px; }
.entry-immersive .entry-account { width: min(100%,320px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.entry-immersive .entry-logo { margin-bottom: 30px; }
.entry-immersive .entry-logo .wm-text { font-size: 34px; }
.entry-immersive .entry-logo .wm-mark,.entry-immersive .entry-logo .wm-mark svg { width: 36px; height: 36px; }
.entry-login-form .field { margin-bottom: 12px; border-radius: 9px !important; background: var(--surface-1); }
.entry-login-form .field input { min-height: 48px; height: 48px; padding: 16px 14px 4px; border-radius: 9px !important; font-size: 14px; background: transparent; }
.entry-login-form .field label { font-size: 11px; }
.entry-login-form .btn { height: 44px; min-height: 44px; font-size: 14px; border-radius: 9px !important; }
.entry-immersive .entry-signup { margin-top: 16px; }
.entry-immersive .entry-signup .btn { min-height: 40px; border: 0; background: transparent; color: var(--accent-ink,var(--accent)); font-size: 13px; }
.entry-immersive .entry-footer { margin-top: 28px; gap: 4px 16px; }
.entry-mosaic { height: 350px; opacity: .72; mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.3) 65%,transparent 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.3) 65%,transparent 100%); }
@media(min-width:900px) {
 .entry-immersive { padding: 48px 9vw 40px 57vw; min-height: 100dvh; }
 .entry-mosaic { width: 57%; height: 100%; opacity: .75; mask-image: linear-gradient(to right,#000 0%,#000 45%,transparent 100%); -webkit-mask-image: linear-gradient(to right,#000 0%,#000 45%,transparent 100%); }
 .entry-mosaic-tilt { width: 1150px; top: -200px; }
 .entry-mosaic-set img { height: 220px; }.entry-mosaic-set img:nth-child(3n) { height: 290px; }
 .entry-immersive .entry-footer { max-width: 380px; }
}
@media(max-width:899px) {
 .entry-immersive { padding-top: 240px; justify-content: center; }
 .entry-mosaic { height: 295px; }
 .entry-immersive .entry-legal { gap: 0 12px; }
 .entry-immersive .entry-footer { max-width: 360px; }
}
@media(max-width:767px) {
 .entry-immersive { padding: 210px 28px 24px; }
 .entry-mosaic { height: 260px; }
 .entry-immersive .entry-logo { margin-bottom: 26px; }
 .entry-immersive .entry-account { padding: 0; }
}
.entry-immersive .entry-signup .btn { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.entry-login-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset; -webkit-text-fill-color: var(--text); }

/* Scope flex sizing to toolbar text, never to nested icon spans. */
.grid-bar span { min-width: 0; flex: initial; }
.grid-bar > span:not(.ic) { flex: 1 1 180px; }
.grid-bar .ic { display: inline-flex; flex: 0 0 auto; min-width: 0; }
.profile-grid-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.grid-pin-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12px; line-height: 1.5; }
.grid-pin-hint .ic { margin-top: 2px; }.grid-pin-hint svg { width: 15px; height: 15px; }
.grid-toolbar-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.grid-toolbar-actions .link { min-height: 44px; gap: 7px; font-size: 13px; }
.grid-toolbar-actions .btn { width: auto; min-height: 40px; gap: 8px; padding: 8px 14px; border-radius: 12px !important; font-size: 13px; }
.grid-toolbar-actions .btn svg { width: 18px; height: 18px; }

/* Clear unfollow actions and a responsive 3:1 profile cover. */
.follow-btn.following { color: var(--danger) !important; border-color: var(--danger) !important; background: transparent !important; }
.follow-btn.following:hover,.follow-btn.following:focus-visible { color: var(--danger) !important; border-color: var(--danger) !important; background: color-mix(in srgb,var(--danger) 10%,var(--bg)) !important; }
.layout[data-page=profile] .fr-cover { position: relative; width: 100%; height: auto !important; aspect-ratio: 3 / 1; flex-shrink: 0; background-size: cover; background-position: center; }
.layout[data-page=profile] .fr-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom,transparent 48%,color-mix(in srgb,var(--bg) 20%,transparent) 68%,color-mix(in srgb,var(--bg) 65%,transparent) 87%,var(--bg) 100%); }

/* Following is a neutral status; only the Unfollow hover action is red. */
.follow-btn.following { color: var(--text) !important; border-color: var(--border-strong) !important; background: transparent !important; }
.follow-btn.following:focus-visible:not(:hover) { color: var(--text) !important; border-color: var(--border-strong) !important; background: transparent !important; }
.follow-btn.following:hover { color: var(--danger) !important; border-color: var(--danger) !important; background: color-mix(in srgb,var(--danger) 10%,var(--bg)) !important; }

/* Home feed liked state matches the red heart used in Reels. */
.layout[data-page=home] .act.like.on,
.layout[data-page=home] .act.like.on .ic,
.layout[data-page=home] .act.like.on span { color: #ff496a !important; }
.layout[data-page=home] .act.like.on svg { fill: #ff496a !important; stroke: #ff496a !important; }

/* Home: a focused timeline with an open composer and flat post rows. */
.layout[data-page=home] .primary { max-width: 640px; border-inline: 1px solid var(--divider); }
.layout[data-page=home] .fr-head-row { display: none; }
.layout[data-page=home] .fr-head { padding: 0; border-bottom: 1px solid var(--divider); }
.layout[data-page=home] .seg-tabs { padding: 0; gap: 0; }
.layout[data-page=home] .seg-tabs .tab { flex: 1 0 auto; min-height: 54px; padding: 0 18px; font-size: 15px; border-radius: 0 !important; }
.layout[data-page=home] .tab-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.layout[data-page=home] #main > .composer { margin: 0; padding: 16px 18px 12px; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0 !important; background: transparent; }
.layout[data-page=home] #main > .composer .c-toolbar { display: flex !important; }
.layout[data-page=home] .composer textarea { font-size: 20px; line-height: 1.45; min-height: 64px; }
.layout[data-page=home] #home-feed .post { border-radius: 0 !important; margin: 0; padding: 16px; background: transparent; border: 0; border-bottom: 1px solid var(--divider); }
.layout[data-page=home] #home-feed .post .post-text { font-size: 15px; line-height: 1.5; }
.layout[data-page=home] #story-tray { padding-block: 10px; border-bottom: 1px solid var(--divider) !important; }
@media(max-width:767px) {
 .layout[data-page=home] .primary { border-inline: 0; }
 .layout[data-page=home] #main > .composer { padding: 12px 14px; }
 .layout[data-page=home] .composer textarea { font-size: 18px; min-height: 52px; }
 .layout[data-page=home] .seg-tabs .tab { min-height: 48px; padding-inline: 16px; font-size: 14px; }
 .layout[data-page=home] #home-feed .post { padding: 14px 12px; }
}
.layout[data-page=home] .composer .c-toolbar { flex-wrap: nowrap; gap: 8px; }
.layout[data-page=home] .composer .c-tools { flex: 1 1 auto; min-width: 0; margin: 0; }
.layout[data-page=home] .composer .c-right { flex: 0 0 auto; }
.layout[data-page=home] .composer .c-right .btn { padding-inline: 14px; min-width: 62px; border-radius: 999px !important; }
.layout[data-page=home] .composer .reply-audience { min-height: 32px; }

/* Compact desktop-style navigation for narrow browsing layouts. */
@media (max-width:767px) {
 html,html:not([data-page=home]) { --mobile-top: var(--safe-top); --mobile-bottom: var(--safe-bottom); }
 .layout:not([data-page=watch]) { padding-left: 60px; }
 .layout .m-top,.layout .m-bar { display: none !important; }
 .layout:not([data-page=watch]) .sidenav { display: flex !important; position: fixed !important; inset: 0 auto 0 0; width: 60px !important; height: 100dvh !important; border-right: 1px solid var(--divider) !important; background: var(--bg); z-index: 60; }
 .layout:not([data-page=watch]) .sidenav-inner { position: static !important; width: 60px !important; height: 100dvh !important; padding: max(10px,var(--safe-top)) 6px max(10px,var(--safe-bottom)) !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; overflow-y: auto !important; scrollbar-width: none; }
 .layout:not([data-page=watch]) .sidenav-inner > .wordmark { display: flex !important; width: 44px; min-height: 44px; margin: 0 0 4px; padding: 0; justify-content: center; }
 .sidenav-inner > .wordmark .wm-text { display: none !important; }
 .layout:not([data-page=watch]) .rail-tabs { display: flex !important; width: 48px; gap: 5px; }
 .layout:not([data-page=watch]) #nav-more,.layout:not([data-page=watch]) .account-switch { display: flex !important; }
 .layout:not([data-page=watch]) .sidenav .nav-item { display: flex; width: 48px; justify-content: center; }
 .layout:not([data-page=watch]) .sidenav .nav-item > span { display: flex; width: 44px; min-height: 44px; justify-content: center; align-items: center; padding: 8px; border-radius: 12px !important; }
 .sidenav .nav-item .lbl { display: none !important; }
 .layout:not([data-page=watch]) .account-switch { margin-top: auto; padding: 6px; min-height: 44px; flex-shrink: 0; }
 .sidenav .account-switch .names,.sidenav .account-switch > .ic { display: none; }
 .layout .sidenav .nav-create .nav-icon { background: transparent !important; width: 30px; height: 30px; }
 .sidenav .frame-create-mark { width: 30px; height: 30px; }
 .layout:not([data-page=watch]) .primary,.layout.wide:not([data-page=watch]) .primary { width: 100% !important; min-width: 0; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
 .layout:not([data-page=watch]) .topbar { top: var(--safe-top); }
 .layout[data-page=home] .composer .c-tools .icon-btn { width: 36px; flex-basis: 36px; }
 .layout[data-page=home] #main > .composer { padding-inline: 10px; }
 .layout[data-page=home] .composer .c-toolbar { margin-left: -40px; }
}

/* Polls read as clear voting controls and bounded result rows. */
.poll { gap: 8px; margin-top: 14px; }
.poll .poll-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; height: auto; padding: 11px 14px; border: 1px solid var(--border-strong) !important; border-radius: 10px !important; background: var(--surface-1); color: var(--text); text-align: left; font-size: 14px; font-weight: 550; line-height: 1.4; }
.poll .poll-opt::before { content: ''; width: 16px; height: 16px; flex: 0 0 16px; border: 1.5px solid var(--muted); border-radius: 50%; }
.poll .poll-opt:hover { border-color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 10%,var(--bg)); }
.poll .poll-opt:hover::before { border-color: var(--accent); }
.poll .poll-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.poll .poll-res { min-height: 44px; height: auto; padding: 11px 14px; gap: 12px; border: 1px solid var(--divider); border-radius: 10px !important; background: var(--surface-1); font-size: 14px; }
.poll .poll-res .bar { border-radius: 0; background: color-mix(in srgb,var(--text) 10%,transparent); }
.poll .poll-res.win .bar { background: color-mix(in srgb,var(--accent) 28%,transparent); }
.poll .poll-res > span:last-child { flex-shrink: 0; font-weight: 600; }
.poll .poll-meta { font-size: 12px; margin-top: 3px; line-height: 1.5; }

/* Brand marks participate in the selected accent, with contrasting strokes. */
:root { --brand-ink: #fff; }
:root[data-tone=light] { --brand-ink: #111218; }
.welcome-copy h1 em { color: var(--accent-ink); }

/* Align contextual labels to the same 40px avatar column as each post. */
.post-ctx { padding-left: 0; gap: 12px; min-height: 20px; margin-bottom: 5px; line-height: 20px; }
.post-ctx > .ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; flex: 0 0 40px; }
.post-ctx > a { min-width: 0; }
@media(max-width:767px) { .post-ctx { gap: 8px; } }
/* A liked heart is red everywhere, independent of the selected brand accent. */
.act.like.on,.act.like.on .ic,.act.like.on span { color: #ff496a !important; }
.act.like.on svg { fill: #ff496a !important; stroke: #ff496a !important; }
.act.like.on .bubble { background: transparent !important; }
.act.like.on:hover .bubble { background: rgba(255,73,106,.12) !important; }

/* Account drawer exits toward its left-hand entry edge. */
.account-drawer-back.is-closing .modal.account-drawer { animation: account-exit 180ms ease-in both; }
@keyframes account-exit { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .account-drawer-back.is-closing .modal.account-drawer { animation: none; } }
html[data-rm] .account-drawer-back.is-closing .modal.account-drawer { animation: none; }

/* Comfortable iPhone writing without zoom, focus boxes, or toolbar jumps. */
@media (max-width: 767px) {
  .composer textarea { font-size: max(16px, var(--fs)) !important; line-height: 1.5 !important; min-height: 72px !important; overflow-y: auto; max-height: 40dvh; border-radius: 0 !important; scroll-margin-block: 80px; }
  .composer textarea:focus-visible { outline: none; }
  .composer:focus-within { box-shadow: inset 3px 0 var(--accent); }
  .composer .c-toolbar { align-items: center; }
  .composer .c-tools { overscroll-behavior-x: contain; }
  .composer .c-ring { flex: 0 0 30px; width: 30px; }
  .composer .c-ring[hidden] { display: block; visibility: hidden; }
  .phone-keyboard .composer textarea { max-height: max(96px, calc(var(--visible-height) * .4)); }
}

/* Video-first viewer: compact navigation and a lower-right action cluster. */
.layout[data-page=watch] .watch-top { grid-template-columns: 44px minmax(0,1fr) 44px; padding: calc(6px + var(--safe-top)) 8px 22px; gap: 0 4px; }
.watch-top::before { content: none; }
.watch-top .tabs { grid-column: 2; grid-row: 1; gap: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.watch-top .tabs .tab { flex: 1 0 auto; max-width: none; padding-inline: 8px; font-size: 13px; height: 44px; }
.watch-top .tabs .tab > span { padding-bottom: 4px; }
.watch .vslide .v-mute { top: calc(66px + var(--safe-top)); width: 44px; height: 44px; }
.watch .vrail { gap: 8px; }
.watch .vr-btn { min-width: 44px; min-height: 44px; gap: 0; font-size: 12px; line-height: 16px; }
.watch .vr-btn .vr-ic { width: 44px; height: 36px; }
.watch .vr-ic svg { width: 27px; height: 27px; stroke-width: 1.8; }
.watch .vr-av { margin-bottom: 8px; }
.watch .vr-av .avatar { width: 40px; height: 40px; border-radius: 50%; }
.watch .vr-plays { display: none; }
.watch .v-author { display: inline-block; font-size: 14px; line-height: 20px; }
.watch .v-author span { display: none; }
.watch .v-cap { font-size: 14px; line-height: 20px; margin: 6px 0; }
.watch .v-sound { font-size: 12px; opacity: .85; }
@media (max-width: 767px) {
  .layout[data-page=watch] .vrail { right: 8px; bottom: calc(104px + var(--safe-bottom)); top: auto; transform: none; padding: 0; width: 44px; max-height: calc(100dvh - 200px); overflow-y: auto; scrollbar-width: none; }
  .layout[data-page=watch] .v-info { padding: 28px 68px calc(22px + var(--safe-bottom)) 16px; }
  .watch .vr-btn[data-v=share] .vr-n { display: none; }
  .watch .vr-btn[data-v=share] .vr-ic,.watch .vr-btn[data-v=more] .vr-ic { height: 44px; }
  .watch .sample-tag { font-size: 10px; opacity: .65; }
}
@media (max-width: 374px) { .watch-top .tabs .tab { font-size: 12px; padding-inline: 5px; } }

/* Simple writing sheet: one header action, no wizard or nested focus card. */
.modal.post-composer { width: 560px; }
.post-composer .modal-head { padding: 12px 16px; gap: 12px; }
.post-composer .modal-head h2 { flex: 1; font-size: 17px; }
.post-composer .modal-head [data-c=send] { min-width: 68px; border-radius: 999px !important; }
.post-composer .composer,.post-composer .composer:focus-within { padding: 16px; box-shadow: none; border-radius: 0 !important; }
.post-composer .composer textarea { min-height: 120px !important; outline: none; border-radius: 0 !important; }
.post-composer .composer .c-toolbar { flex-wrap: nowrap; margin-top: 16px; padding-top: 12px; gap: 8px; }
.post-composer .composer .c-tools { flex: 1 1 auto; width: 0; margin: 0; }
.post-composer .composer .c-tools .icon-btn { flex: 0 0 40px; width: 40px; height: 44px; }
.post-composer .composer .c-right { margin: 0; padding: 0; flex: 0 0 30px; }
.post-composer .reply-audience { min-height: 40px; text-align: left; font-size: 13px; }

/* Login fields use one focus treatment and comfortable native text sizing. */
.auth-body .field { border-radius: 10px !important; overflow: hidden; }
.auth-body .field:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.auth-body .field input:focus-visible { outline: none; }
.auth-body .field input,.entry-login-form .field input { min-height: 58px; height: 58px; font-size: 16px !important; line-height: 22px; padding: 26px 14px 8px; border-radius: 9px !important; }
.auth-body .field label,.entry-login-form .field label { top: 7px; left: 14px; margin: 0; font-size: 12px; line-height: 16px; }
.auth-body .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }

/* A single playful flip acknowledges a manual feed refresh. */
.feed-refreshing svg { transform-origin: center; animation: frame-refresh-flip 650ms cubic-bezier(.4,0,.2,1) both; }
@keyframes frame-refresh-flip { 0% { transform: perspective(240px) rotateY(0); } 45% { transform: perspective(240px) rotateY(180deg) scale(.9); } 100% { transform: perspective(240px) rotateY(360deg); } }
.skel-bar,.skel-circ,.skel-tile { background: color-mix(in srgb, var(--text) 12%, var(--bg)); }
#home-feed[aria-busy=true] .skel { animation-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .feed-refreshing svg { animation: none; } }
html[data-rm] .feed-refreshing svg { animation: none; }

/* Connections: compact service cards with details on demand. */
.connections-page { padding: 24px 20px 40px; max-width: 680px; margin: auto; }
.connections-intro h2 { font-size: 20px; line-height: 28px; margin: 0 0 6px; }
.connections-intro p { color: var(--muted); font-size: 14px; line-height: 21px; margin: 0 0 18px; }
.connections-demo { padding: 10px 12px; margin-bottom: 20px; border: 1px solid var(--divider); border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
.connections-page .conn-list { display: grid; gap: 14px; padding: 0; }
.connections-page .conn-card { padding: 18px; margin: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg); }
.connections-page .conn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.conn-service-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--divider); border-radius: 10px; font-size: 27px; }
.conn-service-icon svg { width: 25px; height: 25px; }
.connections-page .conn-name { flex: 1; min-width: 0; }
.connections-page .conn-name h3 { margin: 0 0 3px; font-size: 16px; line-height: 22px; }
.connections-page .conn-name .muted { font-size: 12px; overflow-wrap: anywhere; }
.conn-linked { font-size: 11px; color: var(--success); }
.connections-page .conn-actions { margin: 0; gap: 8px; }
.connections-page .conn-actions .btn { font-size: 13px; min-height: 40px; border-radius: 8px !important; }
.connections-page .conn-scopes { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--divider); font-size: 13px; line-height: 20px; }
.connections-page .conn-scopes summary { color: var(--muted); cursor: pointer; min-height: 28px; }
.connections-help { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 20px; }
.connections-help summary { cursor: pointer; min-height: 32px; }
.connections-page .conn-toggles { margin-block: 12px 18px; }
@media(max-width: 480px) { .connections-page { padding: 20px 12px 32px; } .connections-page .conn-card { padding: 16px; } }
.conn-service-icon img { width: 25px; height: 25px; object-fit: contain; filter: invert(1); }
html[data-theme=light] .conn-service-icon img { filter: none; }

/* Brand and create marks inherit the selected accent. */
.nav-create .nav-icon,.create-choice-icon:has(.frame-create-mark) { background: transparent !important; }
.nav-create .nav-icon > svg { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.wm-text { letter-spacing: -.04em; }

/* Quiet, centered Twitter-style sign in. */
.entry-page.entry-immersive { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: max(40px, env(safe-area-inset-top)) 24px 24px; gap: 36px; background: var(--bg); }
.entry-immersive .entry-mosaic,.entry-immersive .entry-preview { display: none; }
.entry-immersive .entry-account { width: 100%; max-width: 340px; margin: 0; }
.entry-immersive .entry-panel { width: 100%; padding: 0; border: 0; background: transparent; }
.entry-immersive .entry-logo { margin: 0 auto 28px; display: flex; width: fit-content; }
.entry-immersive .entry-logo .wm-text { display: none; }
.entry-immersive .entry-logo .wm-mark,.entry-immersive .entry-logo .wm-mark svg { width: 36px; height: 36px; }
.entry-login-form .login-body > h2 { display: block; text-align: left; margin: 0 0 28px; font-size: 30px; line-height: 36px; letter-spacing: -.6px; }
.login-body { width: 100%; max-width: 340px; margin: auto; }
.login-body .field,.entry-login-form .login-body .field { border-radius: 4px !important; margin-bottom: 18px; }
.login-body .field input,.entry-login-form .login-body .field input { border-radius: 3px !important; }
.login-body > .btn,.entry-login-form .login-body > .btn { width: 100%; border-radius: 999px !important; min-height: 44px; height: 44px; margin-top: 6px; background: var(--text) !important; color: var(--bg) !important; font-weight: 700; }
.entry-login-form .login-body > p { display: block; text-align: left; font-size: 14px; line-height: 21px; }
.entry-login-form .login-body > p:last-child { display: block; }
.entry-immersive .entry-signup { display: none; }
.entry-immersive .entry-footer { position: static; width: 100%; max-width: 600px; margin: 0; padding: 12px 0 0; font-size: 12px; justify-content: center; }
.modal.auth:has(.login-body) { max-width: 580px; }
.modal.auth .login-body { padding: 16px 20px 32px; max-width: 380px; }
@media(max-width: 480px) { .entry-page.entry-immersive { justify-content: flex-start; padding-top: max(32px,env(safe-area-inset-top)); gap: 28px; } .entry-immersive .entry-account { max-width: 320px; } }

/* Reference sign-in layout, with a real username → password flow. */
.entry-page.entry-immersive { justify-content: flex-start; padding-top: 8px; }
.entry-immersive .entry-account { max-width: 300px; }
.entry-immersive .entry-logo { margin-bottom: 32px; }
.entry-immersive .entry-logo .wm-mark,.entry-immersive .entry-logo .wm-mark svg { width: 30px; height: 30px; }
.entry-login-form .login-body > h2 { margin-bottom: 32px; font-size: 30px; line-height: 36px; white-space: nowrap; }
.login-providers { display: flex; flex-direction: column; gap: 24px; }
.login-provider { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; width: 100%; border: 1px solid #cbd0d3; border-radius: 999px; background: #fff; color: #172027; font-size: 14px; font-weight: 600; }
.login-provider img { flex: 0 0 18px; }
.login-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 17px; line-height: 20px; }
.login-divider::before,.login-divider::after { content: ''; height: 1px; flex: 1; background: var(--border-strong); }
.login-body .login-identifier input,.entry-login-form .login-body .login-identifier input { padding: 16px 8px; height: 58px; }
.login-body .login-password[hidden] { display: none; }
.login-body .err:empty { display: none; }
.login-body .err:not(:empty) { margin: 12px 0; font-size: 13px; line-height: 19px; }
.login-body > [data-login-next],.entry-login-form .login-body > [data-login-next] { margin-top: 8px; min-height: 36px; height: 36px; }
.login-forgot { display: block; width: 100%; min-height: 36px; border: 1px solid #536471; border-radius: 999px; margin-top: 24px; font-size: 14px; font-weight: 700; }
.login-forgot:hover { background: var(--hover); }
@media(max-width: 359px) { .entry-login-form .login-body > h2 { font-size: 26px; } }

/* Center the sign-in group on desktop and phones, allowing short screens to scroll. */
.entry-page.entry-immersive { justify-content: center; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.entry-immersive .entry-footer { flex-shrink: 0; }
.login-provider img { filter: none; }
@media (max-height: 650px) { .entry-page.entry-immersive { justify-content: flex-start; } }

/* White bird on sign-in; signed-in branding follows the chosen accent. */
.entry-logo .wm-mark svg,.modal.auth:has(.login-body) .modal-head svg[role=img] { fill: #fff; }

/* One feather mark for Create on every navigation layout. */
.tweet-create-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--accent); color: var(--brand-ink); }
.tweet-create-mark .ic { display: inline-flex; }
.nav-create .nav-icon .tweet-create-mark svg,.create-choice-icon .tweet-create-mark svg { width: 23px; height: 23px; stroke-width: 1.8; }
.layout .sidenav .nav-create .nav-icon { width: 36px; height: 36px; }
.create-choice-icon:has(.tweet-create-mark) { background: transparent; }

/* Authentication dialogs center inside the viewport rather than starting at 5vh. */
.modal-back:has(> .modal.auth) { align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.modal-back > .modal.auth { flex: 0 1 600px; min-width: 0; min-height: 0; margin: 0; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid var(--border); border-radius: 20px !important; }
.modal.auth .modal-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; }
.modal.auth .modal-head h2 { margin: 0; }
.modal.auth .modal-head svg[role=img] { fill: #fff; }
@media(max-width: 767px) {
  .modal-back > .modal.auth { width: 100%; padding-bottom: 0; }
  .phone-keyboard .modal-back:has(> .modal.auth) { align-items: center; padding: 8px; }
  .phone-keyboard .modal-back > .modal.auth { max-height: calc(var(--visible-height) - 16px); }
}

/* Branded end-of-feed state. */
.caught-up { text-align: center; gap: 10px; padding: 40px 24px; }
.caught-up > span:first-child { width: 36px; height: 36px; background: transparent; border-radius: 0; margin-bottom: 4px; }
.caught-up > span:first-child svg { width: 32px; height: 32px; }
.caught-up b { font-size: 17px; line-height: 24px; }
.caught-up small { display: block; max-width: 260px; font-size: 13px; line-height: 20px; white-space: normal; }

/* Story status: accent for new, quiet gray for viewed, green for close friends. */
:root { --story-close: #22c55e; --story-viewed: #62666b; }
.ring.unseen,.p-av.ring.unseen { box-shadow: inset 0 0 0 3px var(--accent) !important; }
.ring.seen,.p-av.ring.seen { box-shadow: inset 0 0 0 1px var(--story-viewed) !important; }
.ring.close.unseen,.p-av.ring.close.unseen { box-shadow: inset 0 0 0 3px var(--story-close) !important; }
.ring.close.seen,.p-av.ring.close.seen { box-shadow: inset 0 0 0 1px var(--story-viewed) !important; }
.ring.close::after { content: '★'; position: absolute; right: 0; bottom: 0; width: 19px; height: 19px; display: grid; place-items: center; background: var(--story-close); border: 2px solid var(--bg); border-radius: 50%; color: #052e16; font-size: 12px; line-height: 1; }
.ring.none { box-shadow: none !important; }
.sv-cf { background: var(--story-close); color: #052e16; }

/* Expanded desktop navigation uses a consistent icon column and row height. */
@media (min-width: 1280px) {
  .layout .sidenav .nav-item > span { display: flex; align-items: center; min-height: 52px; padding: 8px 14px; gap: 14px; }
  .layout .sidenav .nav-item .nav-icon { width: 36px; height: 36px; flex: 0 0 36px; }
  .layout .sidenav .nav-item .lbl { text-align: left; line-height: 24px; }
  .layout .sidenav .nav-create .tweet-create-mark { width: 36px; height: 36px; flex-basis: 36px; }
}

/* Desktop refresh: the wordmark catches light in time with the bird's flip. */
@media (min-width: 1280px) {
  .sidenav .wordmark.feed-refreshing .wm-text {
    display: inline-block;
    background-image: linear-gradient(110deg, var(--text) 0%, var(--text) 35%, var(--accent) 45%, #fff 50%, var(--accent) 55%, var(--text) 65%, var(--text) 100%);
    background-size: 300% 100%;
    background-clip: text; -webkit-background-clip: text;
    color: transparent;
    animation: twitter-wordmark-shine 650ms cubic-bezier(.4,0,.2,1) both;
  }
}
@keyframes twitter-wordmark-shine {
  0% { background-position: 100% 50%; transform: translateY(0); }
  45% { transform: translateY(-1px); }
  100% { background-position: 0% 50%; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sidenav .wordmark.feed-refreshing .wm-text { animation: none; background: none; color: var(--text); }
}
html[data-rm] .sidenav .wordmark.feed-refreshing .wm-text { animation: none; background: none; color: var(--text); }

/* Search has one focus indicator on its enclosing field. */
.searchbox input:focus,.searchbox input:focus-visible { outline: none; box-shadow: none; }
.searchbox:focus-within { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }

/* Standard browsing pages share the same desktop column geometry. */
@media (min-width: 768px) {
  .layout:not(.wide) .primary { width: var(--col); max-width: var(--col); }
  .layout[data-page=discover] .dc { width: 100%; min-width: 0; }
  .layout[data-page=discover] .dc-head { flex-wrap: wrap; gap: 12px; }
  .layout[data-page=discover] .dc-search { flex: 1; min-width: 200px; }
  .layout[data-page=discover] .chips-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .layout[data-page=discover] .chip-tab { flex: 0 0 auto; }
  .layout[data-page=discover] .now-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .layout[data-page=discover] .now-card,.layout[data-page=discover] .now-card.lead { flex: 0 0 260px; min-width: 0; min-height: 180px; scroll-snap-align: start; }
}

/* Shared desktop shell: profiles use the feed column; workspaces span feed + context. */
@media (min-width: 768px) {
  .layout { --context-gap: 28px; }
  .layout:not(.wide) .primary { width: var(--col); max-width: var(--col); }
  .layout:is([data-page=messages],[data-page=settings]) .primary {
    width: calc(var(--col) + var(--ctx) + var(--context-gap));
    max-width: calc(var(--col) + var(--ctx) + var(--context-gap));
    display: flex;
  }
  .layout:is([data-page=messages],[data-page=settings]) :is(.dm-list,.set-nav) { width: 34%; flex: 0 0 34%; min-width: 0; }
  .layout:is([data-page=messages],[data-page=settings]) :is(.dm-thread,.set-main) { flex: 1; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1279px) { .layout { --context-gap: 16px; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .layout:is([data-page=messages],[data-page=settings]) .primary { width: var(--col); max-width: var(--col); }
  .layout:is([data-page=messages],[data-page=settings]) :is(.dm-list,.set-nav) { width: 100%; flex-basis: 100%; }
  .layout:is([data-page=messages],[data-page=settings]):not(.detail-open) :is(.dm-thread,.set-main) { display: none; }
  .layout:is([data-page=messages],[data-page=settings]).detail-open :is(.dm-list,.set-nav) { display: none; }
  .layout:is([data-page=messages],[data-page=settings]).detail-open :is(.dm-thread,.set-main) { display: flex; flex-direction: column; width: 100%; }
}

/* The content warning is the only center overlay until explicitly revealed. */
.vstage.sensitive .v-paused { display: none !important; }

/* Desktop video viewer: dedicated header, balanced media and separate controls. */
@media (min-width: 768px) {
  .layout[data-page=watch] .primary { padding-block: 0; }
  .layout[data-page=watch] .watch { height: 100dvh; }
  .layout[data-page=watch] .watch-top { position: relative; inset: auto; flex: 0 0 auto; padding: 8px 12px; background: var(--bg) !important; border-bottom: 1px solid var(--divider) !important; }
  .layout[data-page=watch] .watch-top .tabs { justify-content: center; gap: 4px; }
  .layout[data-page=watch] .watch-top .tab { flex: 0 1 auto; padding-inline: 12px; }
  .watch .vslide { padding: 16px 64px 16px 16px; gap: 16px; align-items: center; }
  .watch .vstage { flex: 0 1 auto; max-width: calc(100% - 68px); height: 100%; border-radius: 16px; }
  .watch .vrail { position: relative; inset: auto; transform: none; width: 44px; padding: 0; align-self: center; gap: 6px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
  .watch .vnav { right: 8px; top: 50%; gap: 12px; }
  .watch .vnav .icon-btn { width: 40px; height: 40px; border-radius: 50% !important; background: var(--bg); border: 1px solid var(--border-strong); }
  .watch .vslide .v-mute { top: 12px; left: 12px; }
  .layout[data-page=watch] .v-info { padding: 48px 18px 22px; }
  .watch::after { display: none; }
  .watch .vstage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0) 38%); z-index: 1; }
  .watch .sens-cover { z-index: 3; gap: 18px; padding: 28px; }
  .watch .sens-cover > div { gap: 10px; max-width: 360px; line-height: 1.5; }
  .watch .sens-cover .btn { min-height: 44px; padding: 10px 20px; }
}

/* Profile relationship chips belong on their own comfortably spaced row. */
.fr-ph .rel-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.fr-ph .rel-chip { min-height: 28px; padding: 4px 10px; gap: 6px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.fr-ph .rel-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.fr-ph .rel-chip.cf { color: var(--text); border-color: color-mix(in srgb,var(--story-close) 50%,var(--border)); }
.fr-ph .rel-chip.cf svg { fill: var(--story-close); stroke: var(--story-close); }

/* Inbox: compact notes and clear, stable conversation rows. */
.layout[data-page=messages] .dm-list { border-right: 1px solid var(--divider) !important; overflow-x: hidden; }
.dm-notes { gap: 10px; padding: 38px 16px 14px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.dm-notes::-webkit-scrollbar { display: none; }
.dm-notes .note-item { width: 68px; flex: 0 0 68px; gap: 7px; scroll-snap-align: start; }
.dm-notes .note-item .avatar { width: 44px; height: 44px; font-size: 18px; border: 1px solid var(--divider); border-radius: 50%; }
.dm-notes .note-bub { width: 74px; max-width: 74px; top: -28px; padding: 4px 6px; min-height: 26px; font-size: 10px; line-height: 12px; border: 1px solid var(--border-strong); background: var(--bg); }
.dm-notes .note-name { max-width: 68px; font-size: 11px; line-height: 16px; }
.dm-item { padding: 14px 16px; gap: 12px; }
.dm-item > .avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1px solid var(--divider); }
.dm-item .info { flex: 1; min-width: 0; }
.dm-item .info > .ellipsis > .muted:last-child { flex-shrink: 0; font-size: 12px; }
.dm-item .preview { margin-top: 4px; font-size: 13px; line-height: 19px; }
.dm-empty { width: 100%; max-width: 380px; padding: 32px; }
.dm-empty h2 { font-size: 26px; line-height: 32px; }
.dm-empty p { font-size: 14px; line-height: 22px; }
.dm-empty .btn { min-height: 44px; border-radius: 999px !important; font-size: 14px; }
@media(min-width:1101px) { .layout[data-page=messages] .dm-list { width: 38%; flex-basis: 38%; } }

/* Outlined thought bubbles remain legible on pure-black surfaces. */
.p-note,.note-bub,.dm-notes .note-bub { border: 1px solid color-mix(in srgb,var(--text) 38%,var(--bg)); }
.fr-ph .p-note { border-color: color-mix(in srgb,var(--text) 38%,var(--bg)); }
.fr-ph .p-note::before,.fr-ph .p-note::after { border: 1px solid color-mix(in srgb,var(--text) 38%,var(--bg)); background: var(--bg); }
.fr-ph .p-note::before { bottom: -9px; }
.fr-ph .p-note::after { bottom: -19px; }
.note-bub.liked { border-color: #ff496a; }

/* Message input uses the shared single outer focus border. */
.dm-compose textarea:focus,.dm-compose textarea:focus-visible { outline: none; box-shadow: none; }
.dm-compose .box:focus-within { outline: none; border: 1px solid var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
/* Notification type markers and a consistent, compact activity layout. */
#n-body .notif { display:flex; align-items:flex-start; gap:12px; padding:18px 20px !important; color:var(--text); text-decoration:none; }
#n-body .notif .n-icon { flex:0 0 32px; width:32px; height:36px; align-items:center; justify-content:center; color:var(--accent) !important; }
#n-body .notif .n-icon svg { width:28px; height:28px; }
#n-body .notif .n-icon.like { color:#f05270 !important; }
#n-body .notif .n-icon.like svg { fill:currentColor; }
#n-body .notif .n-icon.repost { color:#22b77a !important; }
#n-body .notif .n-icon.follow svg { fill:currentColor; }
#n-body .notif .n-icon.mention, #n-body .notif .n-icon.story, #n-body .notif .n-icon.tag { color:#a477ef !important; }
#n-body .notif .n-icon.collab, #n-body .notif .n-icon.request_accepted { color:#22b77a !important; }
#n-body .notif .n-icon.report { color:var(--muted) !important; }
#n-body .notif .n-body { min-width:0; font-size:15px; line-height:1.45; }
#n-body .notif .avs { gap:6px; margin:0 0 10px; }
#n-body .notif .avs .avatar { width:36px; height:36px; font-size:15px; }
#n-body .n-time { font-size:13px; margin-left:3px; white-space:nowrap; }
#n-body .n-preview { display:flex; align-items:flex-start; gap:14px; margin-top:5px; }
#n-body .notif .n-text { flex:1; min-width:0; margin:0; color:var(--muted); font-size:15px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
#n-body .n-preview-thumb { width:64px; height:64px; flex-shrink:0; object-fit:cover; border-radius:10px; align-self:center; margin-left:auto; }
#n-body .n-body:has(> .n-thumb) { display:grid; grid-template-columns:minmax(0,1fr) 64px; column-gap:14px; }
#n-body .n-body:has(> .n-thumb) > :not(.n-thumb) { grid-column:1; }
#n-body .n-body > .n-thumb { grid-column:2; grid-row:1 / span 3; align-self:center; width:64px; height:64px; margin:0; object-fit:cover; border-radius:10px; }
#n-body .notif.unread::before { display:none; }
#n-body .notif.unread { background:color-mix(in srgb,var(--accent) 5%,transparent); }
#n-body .notif:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
#n-body .act-sec { padding:14px 20px 8px; font-size:12px; }
@media(max-width:480px) { #n-body .notif { padding:16px 12px !important; gap:10px; } #n-body .n-preview-thumb { width:56px; height:56px; } }

/* Story entry: camera and library before the editing canvas. */
.story-source-picker { padding:24px; display:flex; flex-direction:column; gap:20px; }
.story-source-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.story-source-split button { min-height:210px; padding:24px 12px; border:1px solid var(--border); border-radius:18px; background:var(--bg); color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; }
.story-source-split button > svg { width:38px; height:38px; color:var(--accent); }
.story-source-split strong { font-size:18px; }
.story-source-split span { font-size:13px; color:var(--muted); }
.story-source-split button:hover { background:var(--row-hover); }
.story-source-split button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.story-source-split button:disabled { opacity:.5; cursor:wait; }
.sc-source-actions { display:flex; gap:10px; margin-top:12px; }
.sc-source-actions > button { flex:1; }
.story-source-picker[hidden],.sc[hidden],#sc-share[hidden] { display:none !important; }
@media(max-width:480px) { .story-source-picker { padding:20px 16px; } .story-source-split button { min-height:190px; } }

/* Immersive story studio: preview first, editing tools on demand. */
.modal-back:has(> .story-studio) { padding:0 !important; align-items:center; }
.modal.story-studio { position:relative; width:100vw !important; height:100dvh; max-width:none !important; max-height:100dvh !important; border:0; border-radius:0 !important; overflow:hidden; background:#000; }
.story-studio > .modal-head { position:absolute; top:0; inset-inline:0; z-index:4; background:transparent; border:0; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; color:#fff; }
.story-studio > .modal-head h2 { font-size:16px; }
.story-studio #sc-share { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); right:20px; min-height:46px; border-radius:24px; }
.story-studio .story-source-picker { height:100%; justify-content:center; max-width:560px; margin:auto; }
.story-studio .sc { position:absolute; inset:0; padding:0; margin:0; max-height:none; display:block; }
.story-studio .sc-left { height:100%; width:100%; }
.story-studio .sc-left > p { display:none; }
.story-studio .sc-canvas { width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; }
.story-studio .sc-canvas > .sv-media { width:100%; height:100%; object-fit:contain; }
.story-studio .sv-caption { bottom:100px; }
.story-studio .sc-tools { position:absolute; top:calc(80px + env(safe-area-inset-top)); right:16px; z-index:3; }
.story-studio .sc-tools button,.story-studio .modal-head .icon-btn { background:#0008; color:white; border-radius:50%; width:44px; height:44px; }
.story-studio .sc-right { position:absolute; z-index:5; bottom:0; right:0; width:min(100%,420px); max-height:75dvh; overflow-y:auto; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); background:var(--bg); border:1px solid var(--border); border-radius:24px 24px 0 0; box-sizing:border-box; }
.story-studio .sc-right[hidden],.story-studio .sc-live[hidden] { display:none !important; }
.story-studio [data-edit-done] { display:block; margin:0 0 16px auto; }
.story-studio .sc-aud .small { display:none; }
.story-studio .sc-live { position:absolute; inset:0; z-index:10; background:black; }
.story-studio .sc-live video { width:100%; height:100%; object-fit:cover; }
.story-studio .sc-live-back { position:absolute; top:calc(16px + env(safe-area-inset-top)); left:16px; width:44px; height:44px; border-radius:50%; background:#0008; color:#fff; }
.story-studio .sc-shutter { position:absolute; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:76px; height:76px; background:#fff; border:5px solid #222; outline:3px solid white; border-radius:50%; cursor:pointer; }
.story-studio .sc-sk { touch-action:none; }

/* Direct story tools and camera controls inspired by the supplied references. */
.story-studio .sc-tools { display:flex; gap:8px; }
.story-studio [data-story-caption] { font-size:20px; font-weight:700; }
.story-studio .sc-live-library,.story-studio .sc-live-flip { position:absolute; bottom:calc(38px + env(safe-area-inset-bottom)); width:48px; height:48px; color:white; background:#0008; border-radius:12px; }
.story-studio .sc-live-library { left:24px; }
.story-studio .sc-live-flip { right:24px; }
.story-studio .sc-camera-label { position:absolute; bottom:calc(8px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:white; font-size:11px; font-weight:700; letter-spacing:2px; }
.story-studio[data-edit-mode="text"] .sc-right > :not([data-edit-done]):not(#sc-src):not(.err),
.story-studio[data-edit-mode="stickers"] .sc-right > :not([data-edit-done]):not(.sc-stickers):not(.sc-skform):not(.err) { display:none; }
.story-studio[data-edit-mode="text"] .sc-source-actions { display:none; }
.story-studio .sc-stickers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.story-studio .sc-stickers .chip { min-height:64px; padding:10px 6px; border-radius:12px; flex-direction:column; justify-content:center; text-align:center; }
.story-studio .sc-stickers .chip svg { width:22px; height:22px; }
.story-studio .sc-right input,.story-studio .sc-right textarea { font-size:16px; }
@media(min-width:768px) { .story-studio .sc-live { max-width:calc(100dvh * .5625); margin:auto; } }

/* A short letter wave completes within the bird's 650ms refresh cycle. */
.wm-letter { display:inline-block; }
@media(min-width:1280px) {
 .sidenav .wordmark.feed-refreshing .wm-text { background:none; color:var(--text); animation:none; }
 .sidenav .wordmark.feed-refreshing .wm-letter {
  background:linear-gradient(110deg,var(--text) 30%,var(--accent) 43%,#fff 50%,var(--accent) 57%,var(--text) 70%);
  background-size:300% 100%; background-clip:text; -webkit-background-clip:text; color:transparent;
  animation:twitter-letter-bounce 470ms cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--letter-index) * 25ms);
 }
}
@keyframes twitter-letter-bounce {
 0% { transform:translateY(0); background-position:100% 50%; }
 35% { transform:translateY(-6px); }
 65% { transform:translateY(1px); }
 82% { transform:translateY(-1px); }
 100% { transform:translateY(0); background-position:0% 50%; }
}
@media(prefers-reduced-motion:reduce) {
 .sidenav .wordmark.feed-refreshing .wm-letter { animation:none; background:none; color:var(--text); }
}
html[data-rm] .sidenav .wordmark.feed-refreshing .wm-letter { animation:none; background:none; color:var(--text); }

/* Sidebar Tweet is the final navigation action, with a solid accent tile. */
.layout .sidenav #nav-create { background:var(--accent) !important; color:var(--brand-ink) !important; border-radius:999px !important; margin-top:14px; border:0; }
.layout .sidenav #nav-create > span { width:100%; background:transparent !important; color:inherit; border-radius:inherit !important; justify-content:center; }
.layout .sidenav #nav-create .tweet-create-mark { background:transparent; color:inherit; }
.layout .sidenav #nav-create:hover { background:color-mix(in srgb,var(--accent) 88%,black) !important; }
.layout .sidenav #nav-create:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.layout .sidenav #nav-create .lbl { font-weight:750; }
@media(min-width:1280px) { .layout .sidenav #nav-create { width:100%; } }

/* Keep the compact rail's Tweet action centered and circular. */
@media(max-width:1279px) {
 .layout .sidenav #nav-create { box-sizing:border-box; width:48px !important; min-width:48px !important; max-width:48px !important; height:48px !important; min-height:48px !important; padding:0 !important; margin:14px auto 0 !important; border-radius:50% !important; align-self:center; flex:0 0 48px; }
 .layout .sidenav #nav-create > span { box-sizing:border-box; width:48px !important; min-height:48px !important; height:48px !important; padding:0 !important; gap:0 !important; display:flex; align-items:center; justify-content:center; }
 .layout .sidenav #nav-create .nav-icon { width:28px !important; height:28px !important; flex:0 0 28px !important; margin:0 !important; }
 .layout .sidenav #nav-create .tweet-create-mark { width:28px; height:28px; flex-basis:28px; }
 .layout .sidenav #nav-create .lbl { display:none !important; }
}

/* White feather consistently across Tweet entry points. */
.tweet-create-mark,.layout .sidenav #nav-create .tweet-create-mark { color:#fff !important; }
.tweet-create-mark svg { stroke:#fff; }
.create-choice-icon:has(svg[data-lucide="feather"]) { color:#fff; }
.create-pop .menu-item:first-child > .ic,.create-pop .menu-item:first-child > svg { color:#fff !important; stroke:#fff; }

/* Anchor profile thoughts just to the right of the avatar center. */
.fr-ph .p-note { left:50%; transform:translateX(-16px); }
.fr-ph .p-note::before { left:14px; }
.fr-ph .p-note::after { left:10px; }

/* One restrained full-screen sweep accompanies the logo refresh. */
.refresh-screen-shine { position:fixed; inset:0; z-index:1200; pointer-events:none; overflow:hidden; }
.refresh-screen-shine::before { content:""; position:absolute; inset:-40%; background:linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--accent) 9%,transparent) 46%,rgba(255,255,255,.09) 50%,color-mix(in srgb,var(--accent) 9%,transparent) 54%,transparent 62%); animation:refresh-screen-sweep 650ms cubic-bezier(.2,.65,.3,1) both; }
@keyframes refresh-screen-sweep { from { transform:translateX(-65%); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } to { transform:translateX(65%); opacity:0; } }
.home-refreshing #home-feed .skel { position:relative; overflow:hidden; }
.home-refreshing #home-feed .skel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--accent) 12%,transparent) 50%,transparent 80%); animation:refresh-skeleton-sweep 650ms ease-out both; }
@keyframes refresh-skeleton-sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce) { .refresh-screen-shine { display:none; } .home-refreshing #home-feed .skel::after { display:none; } }
html[data-rm] .refresh-screen-shine,html[data-rm] .home-refreshing #home-feed .skel::after { display:none; }

/* Refresh the visible shell typography alongside the feed and logo. */
.home-refreshing :is(.tab,.nav-item .lbl,.fr-title,.card h2,.card h3,.trend,.set-sub,.composer textarea,.composer [contenteditable],.c-reply,.post-head,.m-top) {
 animation:refresh-ui-text 650ms ease-in-out both;
}
.home-refreshing :is(.tab,.nav-item .lbl,.card h2,.card h3,.trend,.fr-title) { animation-delay:40ms; }
@keyframes refresh-ui-text {
 0%,100% { opacity:1; filter:brightness(1); }
 30% { opacity:.65; filter:brightness(1); }
 62% { opacity:1; filter:brightness(1.35); }
}
.home-refreshing textarea::placeholder,.home-refreshing input::placeholder { animation:refresh-placeholder 650ms ease-in-out both; }
@keyframes refresh-placeholder { 0%,100% { opacity:1; } 35% { opacity:.4; } 65% { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
 .home-refreshing :is(.tab,.nav-item .lbl,.fr-title,.card h2,.card h3,.trend,.set-sub,.composer textarea,.composer [contenteditable],.c-reply,.post-head,.m-top) { animation:none; }
 .home-refreshing textarea::placeholder,.home-refreshing input::placeholder { animation:none; }
}
html[data-rm].home-refreshing :is(.tab,.nav-item .lbl,.fr-title,.card h2,.card h3,.trend,.set-sub,.composer textarea,.composer [contenteditable],.c-reply,.post-head,.m-top),html[data-rm].home-refreshing textarea::placeholder,html[data-rm].home-refreshing input::placeholder { animation:none; }
.home-refreshing .refresh-visible-text { animation:refresh-ui-text 650ms ease-in-out both; }
@media(prefers-reduced-motion:reduce) { .home-refreshing .refresh-visible-text { animation:none; } }
html[data-rm].home-refreshing .refresh-visible-text { animation:none; }

.account-social-counts { display:flex; flex-wrap:wrap; gap:10px 20px; padding:14px 16px 18px; font-size:14px; }
.account-social-counts a { color:var(--muted); text-decoration:none; padding:6px 0; }
.account-social-counts b { color:var(--text); margin-right:4px; }
.account-social-counts a:hover { text-decoration:underline; }
.account-social-counts a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }

.account-profile-card { border:1px solid var(--divider); border-radius:16px; overflow:hidden; background:var(--bg); }
.account-profile-card .account-profile-tile { border:0; border-radius:0; background:transparent; padding-bottom:8px; }
.account-profile-card .account-social-counts { padding:2px 16px 12px; }
.social-link-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--divider); }
.social-link-row a { flex:1; min-width:0; color:var(--text); }
.social-link-row a span { display:block; font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin-top:4px; }
.connected-feed-item { padding:16px; border-bottom:1px solid var(--divider); }
.connected-feed-item .ext-post { margin:0; }
.connected-discover { padding:16px; border-bottom:1px solid var(--divider); }
.connected-discover h2 { font-size:18px; margin:0 0 12px; }
.connected-discover-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.connected-discover-grid .connected-feed-item { padding:0; min-width:0; }

.conn-head .conn-info { margin-left:auto; flex:0 0 36px; width:36px; height:36px; color:var(--muted); border-radius:50%; }
.conn-head .conn-info:hover { color:var(--text); background:var(--row-hover); }
.connections-help-btn { display:flex; align-items:center; gap:8px; margin:20px 0; padding:10px 0; color:var(--muted); cursor:pointer; }
.connection-info-body { padding:8px 24px 24px; line-height:1.6; max-height:65dvh; overflow:auto; }
.connection-info-body h3 { font-size:16px; }
.connection-info-body ul { padding-left:20px; }
.connection-info-body li { margin:8px 0; }

/* Center connection info dialogs within the viewport, including mobile. */
.modal-back:has(> .connection-info-modal) { align-items:center !important; justify-content:center !important; padding:20px !important; }
.modal.connection-info-modal { width:min(480px,100%) !important; max-width:480px !important; max-height:calc(100dvh - 40px) !important; margin:0 !important; border:1px solid var(--divider); border-radius:20px !important; display:flex; flex-direction:column; overflow:hidden; }
.connection-info-modal .modal-head { position:static; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; }
.connection-info-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.connection-info-heading h2 { margin:0; font-size:18px; line-height:1.3; }
.connection-info-heading .conn-service-icon { width:36px; height:36px; flex:0 0 36px; border:0; background:transparent; }
.connection-info-modal .connection-info-body { min-height:0; max-height:none; overflow-y:auto; padding:0 20px 20px; }
.connection-info-modal .modal-head > button { flex-shrink:0; }

.connection-brand-cross { font-size:22px; line-height:1; color:var(--muted); font-weight:400; }
.connection-twitter-mark { display:flex; align-items:center; justify-content:center; width:36px; height:36px; }
.connection-twitter-mark svg { width:28px; height:28px; }
.src-badge.source-logo { display:inline-flex; align-items:center; justify-content:center; padding:4px; border:0; background:transparent; flex-shrink:0; }
.source-logo img { width:18px; height:18px; filter:invert(1); }
html[data-theme=light] .source-logo img { filter:none; }

/* Connected social account identity */
.connections-page .conn-connected-label { color:#35c878; font-weight:600; }
.conn-profile-tile { display:flex; align-items:center; gap:12px; padding:16px; margin:4px 0 14px; border:1px solid var(--border); border-radius:16px; background:var(--bg); }
.conn-profile-avatar { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:50%; background:var(--row-hover); border:1px solid var(--border); font-size:20px; font-weight:700; }
.conn-profile-details { display:flex; flex-direction:column; gap:3px; min-width:0; overflow-wrap:anywhere; }
.conn-profile-details strong { font-size:15px; }
.conn-profile-details > .muted { font-size:13px; }

.conn-profile-avatar { position:relative; overflow:hidden; align-self:flex-start; }
.conn-profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.conn-profile-counts { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:13px; margin-top:5px; }
.conn-profile-counts b { color:var(--text); font-weight:600; }

/* Connection card action layout */
.connections-page .conn-card.is-on .conn-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.connections-page .conn-card.is-on .conn-actions > .btn,
.connections-page .conn-card.is-on .conn-actions > .ext-open { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-width:0; min-height:44px; padding:10px 12px; margin:0; box-sizing:border-box; border:1px solid var(--border); border-radius:12px !important; font-size:13px; font-weight:600; line-height:20px; text-decoration:none; background:transparent; }
.connections-page .conn-card.is-on .conn-actions > .ext-open { color:var(--text); }
.connections-page .conn-card.is-on .conn-actions > [data-disconnect] { grid-column:1/-1; color:#f36b7f; }
.connections-page .conn-card.is-on .conn-actions > :hover { background:var(--row-hover); }
.connections-page .conn-dev { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.connections-page .conn-dev label { font-size:12px; line-height:18px; }
.connections-page .conn-dev select { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font:inherit; font-size:13px; }
@media(min-width:1200px) { .connections-page .conn-card.is-on .conn-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } .connections-page .conn-card.is-on .conn-actions > [data-disconnect] { grid-column:auto; } }

.profile-all-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:3px; }
.all-tile { position:relative; display:flex; align-items:center; min-width:0; aspect-ratio:1; overflow:hidden; background:var(--row-hover); color:var(--text); text-decoration:none; border:1px solid var(--border); border-radius:4px; }
.all-media { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.all-text { padding:32px 14px; font-size:clamp(12px,1.3vw,17px); line-height:1.45; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.all-caption { position:absolute; bottom:0; left:0; right:0; padding:8px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--bg); }
.all-source { position:absolute; right:8px; top:8px; width:28px; height:28px; display:grid; place-items:center; background:#fff; border-radius:50%; box-shadow:0 1px 5px #0004; }
.all-source img { width:17px; height:17px; }
.all-video { position:absolute; left:8px; top:8px; color:white; filter:drop-shadow(0 1px 2px #000); }
.all-tile:hover { opacity:.85; }
.profile-all-grid > .empty { grid-column:1/-1; }
@media(max-width:480px) { .all-text { padding:30px 9px; -webkit-line-clamp:4; font-size:12px; } .all-caption { font-size:10px; padding:5px; } }

/* Imported posts use the same author/content columns as native tweets. */
.connected-feed-item { padding:0; border:0; }
.ext-post.imported-tweet { display:block; padding:16px; margin:0; border:0; border-bottom:1px solid var(--divider); border-radius:0; background:transparent; font-size:15px; }
.imported-tweet .post-left { flex:0 0 40px; }
.imported-tweet .ext-av { width:40px; height:40px; flex-shrink:0; font-size:18px; }
.imported-tweet .post-body { padding-bottom:0; }
.imported-tweet .imported-name { display:inline-flex; align-items:center; gap:4px; min-width:0; flex-shrink:1; }
.imported-tweet .source-logo { flex:0 0 18px; width:18px; height:18px; padding:0; margin:0; border:0; background:none; }
.imported-tweet .post-head > .meta { flex:1; overflow:hidden; white-space:nowrap; }
.imported-tweet .post-text { margin-top:3px; }
.imported-tweet .ext-post-foot { margin-top:12px; color:var(--muted); font-size:12px; min-height:24px; }
.imported-tweet .ext-post-foot .ext-open { color:var(--muted); font-size:12px; font-weight:400; text-decoration:none; }
.imported-tweet .ext-post-foot .ext-open:hover { color:var(--accent); text-decoration:underline; }
.imported-tweet .ext-media { margin-top:10px; overflow:hidden; border:1px solid var(--border); border-radius:16px; }
.ext-post.imported-tweet.compact { border:1px solid var(--divider); border-radius:16px; }
@media(max-width:600px) { .ext-post.imported-tweet { padding:14px 12px; } }

.imported-tweet .imported-actions { display:flex; justify-content:space-between; max-width:360px; margin-top:12px; margin-left:-8px; }
.imported-actions a.act { text-decoration:none; color:var(--muted); cursor:pointer; }
.imported-actions a.like:hover { color:#f0526c; }
.imported-actions a.rt:hover { color:#35c878; }
.imported-actions a.reply:hover { color:var(--accent); }
.imported-tweet .imported-actions + .ext-post-foot { margin-top:4px; }

.imported-tweet .imported-actions { max-width:none; }
.imported-actions .bm.on { color:var(--accent); }

.connected-profile-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; border-bottom:1px solid var(--divider); font-size:13px; }
.connected-profile-summary > span { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere; }
.connected-profile-summary .ext-open { font-size:12px; white-space:nowrap; }
.connected-profile-feed .imported-tweet { width:100%; box-sizing:border-box; }

/* Match native tweet geometry, without a second imported-card footer. */
article.post.imported-tweet { padding:16px; border-radius:0; background:transparent; border:0; border-bottom:1px solid var(--divider); }
.imported-tweet .ext-av { border:0; }
.imported-tweet .post-body { padding-bottom:12px; }
.imported-tweet .imported-actions { max-width:440px; width:auto; margin-left:0; }
.imported-tweet .imported-demo { font-size:11px; }
.imported-tweet .post-head .source-logo { width:16px; height:16px; flex-basis:16px; }
.imported-tweet .post-head .source-logo img { width:16px; height:16px; }
@media(max-width:600px) { article.post.imported-tweet { padding:14px 12px; } }
@media(max-width:420px) { .imported-tweet .imported-actions { margin-left:-48px; width:calc(100% + 48px); max-width:none; } .imported-demo { display:none; } }

.imported-tweet .imported-actions .act-group { display:inline-flex; align-items:center; gap:0; flex:0 0 auto; }
.imported-tweet .imported-author { display:inline; padding:0; margin:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; line-height:inherit; min-height:0; min-width:0; cursor:pointer; text-align:left; }
.imported-tweet .imported-author.name { font-weight:700; }
.imported-tweet .imported-author:hover { text-decoration:underline; }

.imported-actions .like.on { color:#f0526c !important; }
.imported-actions .like.on svg { fill:currentColor; }
.imported-actions .rt.on { color:#35c878 !important; }

.imported-tweet .ext-media:has(.imported-video) { display:block; width:min(100%,286px); border-radius:16px; }
.imported-video { position:relative; aspect-ratio:9/16; width:100%; background:#080808; overflow:hidden; }
.imported-video video,.imported-video-preview,.imported-video-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.imported-video-preview { position:relative; padding:0; border:0; background:#080808; color:white; cursor:pointer; }
.imported-video-play { position:absolute; inset:0; display:grid; place-items:center; filter:drop-shadow(0 1px 3px #000); }
.imported-video-play svg { width:40px; height:40px; }
.imported-video-label { position:absolute; bottom:12px; left:12px; right:12px; font-size:12px; background:#000a; padding:6px; border-radius:6px; }

/* Short, one-shot poll feedback; no looping motion. */
@keyframes poll-fill-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes poll-result-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.poll .poll-res .bar { transform-origin:left center; animation:poll-fill-in 550ms cubic-bezier(.2,.7,.2,1) both; }
.poll .poll-res:nth-child(2) .bar { animation-delay:45ms; }
.poll .poll-res:nth-child(3) .bar { animation-delay:90ms; }
.poll .poll-res:nth-child(4) .bar { animation-delay:135ms; }
.poll .poll-res > span { animation:poll-result-in 240ms ease-out both; }
.poll .poll-res > span:first-of-type { display:flex; align-items:center; gap:6px; }
.poll .poll-res > span:first-of-type .ic { flex-shrink:0; }
.poll .poll-opt { transition:background-color 160ms,border-color 160ms,transform 120ms; }
.poll .poll-opt:active { transform:scale(.985); }
@media(prefers-reduced-motion:reduce) { .poll .poll-res .bar,.poll .poll-res > span { animation:none; } .poll .poll-opt { transition:none; } .poll .poll-opt:active { transform:none; } }
html[data-rm] .poll .poll-res .bar,html[data-rm] .poll .poll-res > span { animation:none; }
html[data-rm] .poll .poll-opt { transition:none; transform:none; }

.imported-video iframe { display:block; width:100%; height:100%; border:0; }

/* One section divider beneath connected Discover content. */
.connected-discover { padding-bottom:0; }
.connected-discover-grid .imported-tweet { border-bottom:0 !important; }
.connected-discover-grid .imported-tweet .post-body { padding-bottom:0; }

/* Shared login/signup attribution. */
.auth-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
.auth-brand-name { font-size:16px; font-weight:800; }
.grok-credit { display:inline-flex; align-items:center; gap:5px; font-size:11px; line-height:18px; color:var(--muted); text-decoration:none; }
.grok-credit:hover { color:var(--text); text-decoration:underline; }
.grok-credit:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }

.auth-credit { text-align:center; margin-top:24px; }

.grok-credit .grok-bot-icon { width:22px; height:22px; flex:0 0 22px; display:block; }