:root {
    --pink: #f5005f;
    --pink-dark: #d70052;
    --yellow: #fff000;
    --teal: #00bfb3;
    --ink: #111827;
    --muted: #7a8793;
    --soft: #f6faf8;
    --white: #ffffff;
    --line: #e8eeee;
    --shadow: 0 18px 50px rgba(17, 24, 39, .14);
    --radius: 8px;
    --primary: var(--pink);
    --primary-strong: var(--pink-dark);
    --accent: var(--teal);
    --bg: var(--soft);
    --surface: var(--white);
    --surface-2: #eef5f2;
    --text: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--soft);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.no-chrome { background: var(--pink); }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 24px 16px 96px;
}
.no-chrome .app-shell {
    width: 100%;
    min-height: 100vh;
    padding: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(16px, 4vw, 42px);
    background: rgba(246, 250, 248, .88);
    border-bottom: 1px solid rgba(17, 24, 39, .06);
    backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; }
.brand-script,
.script-logo,
.auth-logo {
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}
.brand-script { color: var(--pink); font-size: 2rem; }
.topbar-actions, .hero-actions { display: flex; align-items: center; gap: 10px; }
.inline-form { margin: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}
.btn-primary { background: var(--pink); color: white; box-shadow: 0 12px 28px rgba(245, 0, 95, .24); }
.btn-primary:hover { background: var(--pink-dark); }
.btn-ghost { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-lg { min-height: 50px; padding-inline: 22px; }

.alert {
    width: min(760px, calc(100% - 24px));
    margin: 14px auto;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--white);
    font-weight: 800;
    text-align: center;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
}
.no-chrome .alert {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 50;
    transform: translateX(-50%);
}
.alert-success { color: #00776e; }
.alert-error { color: var(--pink-dark); }

.auth-splash {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 70px;
    padding: 42px 28px;
    background: var(--pink);
    color: var(--white);
}
.auth-splash-scroll { align-content: start; padding-top: min(16vh, 110px); gap: 52px; }
.auth-logo { color: var(--white); font-size: clamp(4.2rem, 20vw, 7rem); }
.auth-actions {
    width: min(340px, 100%);
    display: grid;
    gap: 12px;
    justify-items: center;
}
.auth-input {
    width: 100%;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--white);
    text-align: center;
    outline: none;
}
.auth-input::placeholder { color: rgba(255,255,255,.8); }
.auth-input:focus { background: rgba(255,255,255,.16); border-color: var(--white); }
.outline-pill,
.file-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 800;
    cursor: pointer;
}
.outline-pill.wide,
.file-pill { width: 100%; }
.file-pill input { display: none; }
.auth-link { margin-top: 18px; font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.92); }
.auth-copy { margin: 0 0 6px; text-align: center; color: rgba(255,255,255,.86); line-height: 1.5; }
.dev-note {
    width: min(420px, 100%);
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--white);
    overflow-wrap: anywhere;
}
.dev-note.on-pink { color: var(--ink); }
.dev-note p { margin: 6px 0; color: var(--muted); }
.dev-note a { color: var(--pink-dark); font-weight: 800; }

.teen-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr);
    gap: 36px;
    align-items: center;
    min-height: calc(100svh - 96px);
}
.eyebrow {
    margin: 0 0 14px;
    color: var(--pink);
    font-weight: 900;
    text-transform: uppercase;
    font-size: .78rem;
}
.hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    line-height: .93;
    letter-spacing: 0;
}
.hero-text {
    max-width: 610px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7;
}
.phone-stage {
    display: grid;
    grid-template-columns: .88fr 1fr;
    align-items: center;
    gap: 14px;
}
.phone-card {
    position: relative;
    min-height: 470px;
    padding: 36px 26px;
    border: 2px solid var(--ink);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.phone-pink {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    background: var(--pink);
    color: var(--white);
}
.phone-pink .script-logo { margin-bottom: 58px; font-size: 4rem; }
.phone-yellow { background: var(--yellow); color: var(--ink); }
.phone-teal { background: var(--teal); color: var(--white); }
.menu-lines,
.menu-lines::before,
.menu-lines::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}
.menu-lines { position: absolute; top: 22px; left: 22px; color: var(--white); }
.menu-lines::before,
.menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -5px; }
.menu-lines::after { top: 5px; }
.menu-lines.dark { color: var(--ink); }
.phone-yellow p,
.recado-card p { margin: 80px 0 10px; font-weight: 500; }
.phone-yellow h2,
.recado-card h2 {
    margin: 0;
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: 0;
}
.sender-row { display: flex; align-items: center; gap: 12px; margin-top: 72px; }
.tiny-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: radial-gradient(circle at 35% 28%, #ffdd9b, #1b2430 42%, #f84b7d 44%, #00c1b3 72%);
}
.more-dot {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--pink);
    font-weight: 900;
}

.feature-grid,
.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.feature-card,
.form-card,
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 12px 30px rgba(17, 24, 39, .06);
}
.feature-card {
    min-height: 148px;
    padding: 20px;
    box-shadow: none;
}
.feature-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.feature-card p { margin: 0; color: inherit; line-height: 1.5; opacity: .76; }
.feature-card.hot { background: var(--pink); color: var(--white); border-color: var(--pink); }
.feature-card.lemon { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.feature-card.clean { background: var(--white); color: var(--ink); }

.dashboard,
.empty-state { width: min(920px, 100%); margin: 34px auto; }
.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: 28px;
    border-radius: var(--radius);
    background: var(--pink);
    color: var(--white);
    overflow: hidden;
}
.dashboard-hero::after {
    content: "recadin";
    position: absolute;
    right: 22px;
    bottom: -10px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 5rem;
    opacity: .18;
}
.dashboard-hero h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; }
.dashboard-hero .hero-text { color: rgba(255,255,255,.82); margin-bottom: 0; }
.dashboard-hero .btn { position: relative; z-index: 1; color: var(--ink); }

.auth-panel { width: min(520px, 100%); margin: 34px auto; }
.form-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    box-shadow: none;
}
.form-card h2 { margin: 0; }
label { display: grid; gap: 7px; color: var(--muted); font-weight: 800; }
input, textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(245,0,95,.1); }
textarea { resize: vertical; min-height: 112px; }
.color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
input[type="color"] { padding: 4px; height: 48px; }

.settings-layout {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: start;
}
.settings-intro {
    position: sticky;
    top: 86px;
    min-height: 440px;
    padding: 28px;
    border-radius: var(--radius);
    background: var(--yellow);
    border: 2px solid var(--ink);
}
.settings-intro h1 { margin: 0; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1; }
.settings-intro .hero-text { color: rgba(17,24,39,.7); }
.settings-stack { display: grid; gap: 14px; }
.profile-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px;
    border: 1px solid rgba(17,24,39,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.54);
}
.profile-chip img,
.profile-chip span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-chip span {
    display: grid;
    place-items: center;
    background: var(--pink);
    color: white;
    font-weight: 900;
}
.profile-chip strong,
.profile-chip small { display: block; }
.profile-chip small { color: rgba(17,24,39,.58); }

.mobile-nav {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 30;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 16px 42px rgba(17,24,39,.18);
    backdrop-filter: blur(14px);
}
.mobile-nav-item {
    display: grid;
    gap: 2px;
    place-items: center;
    min-height: 48px;
    border-radius: 999px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
}
.mobile-nav-item:hover { background: var(--pink); color: var(--white); }
.icon { font-size: 1.25rem; line-height: 1; }

@media (max-width: 900px) {
    .teen-hero { grid-template-columns: 1fr; min-height: auto; }
    .phone-stage { order: -1; grid-template-columns: 1fr 1fr; }
    .phone-card { min-height: 390px; }
}
@media (max-width: 760px) {
    .app-shell { padding: 18px 14px 96px; }
    .topbar-actions .btn-ghost { display: none; }
    .brand-script { font-size: 1.8rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .phone-stage { grid-template-columns: 1fr; }
    .phone-card { min-height: 430px; }
    .phone-stage .phone-pink { display: none; }
    .feature-grid, .quick-grid { grid-template-columns: 1fr; }
    .dashboard-hero { grid-template-columns: 1fr; align-items: start; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-intro { position: static; min-height: auto; }
    .color-grid { grid-template-columns: 1fr; }
    .mobile-nav { display: grid; }
}
@media (max-width: 420px) {
    .auth-logo { font-size: 4.6rem; }
    .hero h1 { font-size: 2.55rem; }
    .phone-card { min-height: 400px; padding: 34px 24px; }
}

.public-profile {
    width: min(980px, 100%);
    margin: 0 auto;
}
.profile-cover {
    position: relative;
    min-height: 520px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    padding: 42px 22px;
    border: 2px solid var(--ink);
    background: var(--profile-primary, var(--pink));
    color: var(--white);
    overflow: hidden;
}
.profile-cover::after {
    content: "recadin";
    position: absolute;
    right: 20px;
    bottom: -8px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 5rem;
    opacity: .16;
}
.profile-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.profile-head h1 { margin: 10px 0 0; font-size: clamp(2.4rem, 8vw, 5rem); line-height: .94; }
.profile-head p { margin: 0; font-weight: 850; opacity: .88; }
.big-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: 0 14px 32px rgba(17,24,39,.18);
}
.big-avatar.letter { display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-size: 3rem; font-weight: 900; }
.status-pill,
.profile-counts {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-weight: 850;
}
.profile-counts span { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }
.profile-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.profile-actions form { margin: 0; }
.bio-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    color: var(--muted);
}
.bio-strip p { flex-basis: 100%; margin: 0; color: var(--ink); font-weight: 700; }
.bio-strip a,
.bio-strip span { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-weight: 850; }
.locked-card {
    margin-top: 16px;
    padding: 28px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--yellow);
}
.locked-card h2 { margin: 0 0 8px; font-size: 2rem; }
.locked-card p { margin: 0; color: rgba(17,24,39,.7); }
.social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.composer-card {
    min-height: 360px;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 24px;
    border: 2px solid var(--ink);
    background: var(--white);
}
.composer-card.teal { background: var(--teal); color: var(--white); }
.composer-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 850; }
.composer-card.teal .composer-top { color: rgba(255,255,255,.78); }
.composer-card textarea,
.composer-card input[type="text"] { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding-left: 0; background: transparent; box-shadow: none; }
.composer-card.teal textarea,
.composer-card.teal input[type="text"] { color: var(--white); border-color: rgba(255,255,255,.42); }
.composer-card.teal textarea::placeholder,
.composer-card.teal input::placeholder { color: rgba(255,255,255,.74); }
.composer-row { display: flex; align-items: center; gap: 12px; }
.emoji-input { max-width: 110px; }
.check-line { display: inline-flex; grid-template-columns: none; align-items: center; gap: 9px; min-height: 34px; color: inherit; font-weight: 850; }
.check-line input { width: 18px; min-height: 18px; accent-color: var(--pink); }
.send-link { justify-self: end; border: 0; background: transparent; color: inherit; font-weight: 900; cursor: pointer; }
.recado-feed,
.question-feed { margin-top: 24px; }
.recado-feed > h2,
.question-feed > h2,
.section-title { margin: 18px 0 12px; font-size: 1.35rem; }
.recado-card {
    position: relative;
    min-height: 440px;
    margin-bottom: 14px;
    padding: 42px 26px;
    border: 2px solid var(--ink);
    color: var(--white);
    overflow: hidden;
}
.qa-card {
    padding: 18px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.qa-card small { color: var(--pink); font-weight: 900; }
.qa-card h3 { margin: 8px 0; font-size: 1.2rem; }
.qa-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.muted-center { width: 100%; padding: 20px; text-align: center; color: var(--muted); font-weight: 800; }
.manage-list { display: grid; gap: 12px; }
.manage-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.manage-item.compact { grid-template-columns: 1fr; }
.manage-item small { color: var(--pink); font-weight: 900; text-transform: uppercase; }
.manage-item h2 { margin: 5px 0; font-size: 1.15rem; }
.manage-item p { margin: 0; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.row-actions form { margin: 0; }
.question-manage { grid-template-columns: 1fr; }
.answer-form { display: grid; gap: 10px; }
.answer-preview { margin-top: 10px; padding: 10px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-weight: 700; }
.people-list { display: grid; gap: 8px; margin-bottom: 18px; }
.person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}
.person-main { display: flex; align-items: center; gap: 12px; }
.person-main img,
.person-main span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.person-main span { display: grid; place-items: center; background: var(--pink); color: var(--white); font-weight: 900; }
.person-main strong,
.person-main small { display: block; }
.person-main small { color: var(--muted); }
.person-row i {
    width: 12px;
    height: 12px;
    border: 2px solid var(--pink);
    border-radius: 50%;
}
.toggle-list { display: grid; gap: 8px; }
.dark-pill { margin-top: 16px; color: var(--ink); }
@media (max-width: 760px) {
    .profile-cover { min-height: 500px; }
    .social-grid { grid-template-columns: 1fr; }
    .manage-item { grid-template-columns: 1fr; }
    .row-actions { justify-content: flex-start; }
    .person-row { align-items: flex-start; flex-direction: column; }
}

.post-create-shell,
.single-post-shell {
    width: min(760px, 100%);
    margin: 0 auto;
}
.post-composer {
    min-height: calc(100svh - 140px);
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
    border: 2px solid var(--ink);
    background: var(--white);
}
.composer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}
.composer-nav a,
.composer-nav button {
    border: 0;
    background: transparent;
    color: var(--pink);
    font-weight: 900;
    cursor: pointer;
}
.composer-nav a { font-size: 2rem; line-height: 1; }
.post-composer textarea {
    min-height: 190px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-size: 1.45rem;
    font-weight: 850;
    line-height: 1.35;
}
.media-drop {
    min-height: 86px;
    display: grid;
    place-items: center;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
}
.media-drop input { display: none; }
.post-options {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 12px;
}
.section-head h2 { margin: 0; }
.post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.post-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 12px 30px rgba(17,24,39,.06);
}
.post-card a { display: block; }
.post-card h3,
.post-card h1 {
    margin: 0;
    padding: 16px 16px 8px;
    font-size: clamp(1.35rem, 4vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: 0;
}
.post-card p { margin: 0; padding: 0 16px 12px; color: var(--muted); line-height: 1.5; }
.post-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--yellow);
}
.post-meta {
    padding: 0 16px 16px;
    color: var(--pink);
    font-weight: 900;
    font-size: .9rem;
}
.post-card.large { margin-bottom: 14px; }
.post-card.large .post-media { aspect-ratio: 1 / 1; }
.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.post-author img,
.post-author span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.post-author span {
    display: grid;
    place-items: center;
    background: var(--pink);
    color: var(--white);
    font-weight: 900;
}
.post-author strong,
.post-author small { display: block; }
.post-author small { color: var(--muted); }
.post-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.post-actions form { margin: 0; }
.comment-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 0 16px 16px;
}
.comment-form button {
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    background: var(--pink);
    color: var(--white);
    font-weight: 900;
}
.comments-list { display: grid; gap: 8px; }
.comment-row {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.comment-row p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 760px) {
    .post-grid { grid-template-columns: 1fr; }
    .post-options { grid-template-columns: 1fr; }
    .post-composer { min-height: calc(100svh - 132px); }
}

.story-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 16px 2px 8px;
    scrollbar-width: none;
}
.story-rail::-webkit-scrollbar { display: none; }
.story-bubble {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 78px;
    color: var(--ink);
    font-weight: 900;
}
.story-bubble img,
.story-bubble span {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid var(--pink);
    outline: 3px solid var(--yellow);
    object-fit: cover;
}
.story-bubble span {
    display: grid;
    place-items: center;
    background: var(--teal);
    color: var(--white);
    font-size: 1.6rem;
}
.story-bubble small { color: var(--muted); font-size: .72rem; }
.story-create-shell {
    width: min(760px, 100%);
    margin: 0 auto;
}
.story-composer {
    min-height: calc(100svh - 140px);
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
    border: 2px solid var(--ink);
    background: var(--pink);
    color: var(--white);
}
.story-composer .composer-nav a,
.story-composer .composer-nav button { color: var(--white); }
.story-composer textarea {
    min-height: 240px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.42);
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.25;
    box-shadow: none;
}
.story-composer textarea::placeholder { color: rgba(255,255,255,.72); }
.story-composer .media-drop { border-color: rgba(255,255,255,.58); color: rgba(255,255,255,.86); }
.story-options { display: grid; gap: 12px; }
.story-options label { color: var(--white); }
.story-options select { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.48); }
.story-options option { color: var(--ink); }
.story-viewer {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--white);
    overflow: hidden;
}
.story-progress {
    position: absolute;
    top: 10px;
    right: 14px;
    left: 14px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    overflow: hidden;
    z-index: 5;
}
.story-progress span {
    display: block;
    height: 100%;
    background: var(--white);
    animation: storyProgress var(--story-duration, 15s) linear forwards;
}
@keyframes storyProgress { from { width: 0; } to { width: 100%; } }
.story-top {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 18px 12px;
}
.story-top > a {
    color: var(--white);
    font-size: 2rem;
    font-weight: 900;
}
.post-author.light { color: var(--white); padding: 0; }
.post-author.light small { color: rgba(255,255,255,.75); }
.story-content {
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
}
.story-content img {
    max-width: min(520px, 100%);
    max-height: 72vh;
    border-radius: var(--radius);
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.story-content h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.4rem, 11vw, 6rem);
    line-height: 1.04;
    letter-spacing: 0;
}
.story-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 22px;
    font-weight: 900;
}
.story-manage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.story-manage-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.story-manage-card.expired { opacity: .55; }
.story-manage-card a { display: block; }
.story-manage-card img {
    width: 100%;
    aspect-ratio: 9 / 14;
    object-fit: cover;
    background: var(--pink);
}
.story-manage-card h2 { margin: 0; padding: 14px 14px 6px; font-size: 1.1rem; }
.story-manage-card p,
.story-manage-card small { display: block; margin: 0; padding: 0 14px 8px; color: var(--muted); font-weight: 800; }
.story-manage-card form { padding: 0 14px 14px; }
@media (max-width: 760px) {
    .story-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-composer { min-height: calc(100svh - 132px); }
}
@media (max-width: 420px) {
    .story-manage-grid { grid-template-columns: 1fr; }
}

.analytics-hero { background: linear-gradient(135deg, var(--pink), #ff2e8a); }
.stacked-actions { flex-direction: column; align-items: stretch; }
.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.metric-card {
    min-height: 132px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
}
.metric-card span { font-weight: 900; color: inherit; opacity: .78; }
.metric-card strong { font-size: clamp(2rem, 5vw, 3.4rem); line-height: .9; }
.metric-card small { color: inherit; opacity: .72; font-weight: 850; }
.metric-card.hot { background: var(--pink); color: var(--white); border-color: var(--pink); }
.metric-card.lemon { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.metric-card.teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.dashboard-panel {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.dashboard-panel .section-head { margin-top: 0; }
.dashboard-panel .section-head a { color: var(--pink); font-weight: 900; }
.spark-bars {
    min-height: 150px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 16px 4px 4px;
    overflow-x: auto;
}
.spark-day {
    min-width: 48px;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
}
.spark-day span {
    width: 28px;
    min-height: 12px;
    border-radius: 999px 999px 4px 4px;
    background: var(--pink);
    box-shadow: 0 10px 22px rgba(245,0,95,.22);
}
.mini-notifications { display: grid; gap: 8px; }
.mini-notification {
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid transparent;
}
.mini-notification.unread,
.notification-item.unread {
    border-color: var(--pink);
    box-shadow: inset 4px 0 0 var(--pink);
}
.mini-notification p { margin: 4px 0 0; color: var(--muted); }
.notification-list .notification-item { transition: transform .16s ease, box-shadow .16s ease; }
.notification-list .notification-item:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(17,24,39,.08); }
@media (max-width: 980px) {
    .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { min-height: 118px; }
}

.icon-button,
.home-bell {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--pink);
    font-weight: 1000;
}
.icon-button span,
.home-bell span {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--pink);
    color: var(--white);
    font-size: .68rem;
    line-height: 1;
}
.social-home,
.search-page,
.chat-room { width: min(760px, 100%); margin: 0 auto; }
.home-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.script-mini { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; color: var(--pink); font-size: 2.2rem; line-height: 1; }
.home-topline h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; }
.home-search,
.search-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 14px 0 20px;
}
.home-search input,
.search-hero input {
    border-radius: 999px;
    padding-inline: 18px;
    background: var(--white);
}
.home-search button,
.search-hero button,
.chat-form button {
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: var(--pink);
    color: var(--white);
    font-weight: 900;
}
.home-strip,
.home-panel {
    margin: 16px 0;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--line);
}
.soft-panel { background: #fffafc; }
.calm-panel { background: #f6fffd; }
.people-bubbles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 2px;
    scrollbar-width: none;
}
.people-bubbles::-webkit-scrollbar { display: none; }
.person-bubble {
    min-width: 78px;
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--ink);
    font-weight: 850;
}
.person-bubble img,
.person-bubble span {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--pink);
    outline: 2px solid var(--yellow);
}
.person-bubble span { display: grid; place-items: center; background: var(--teal); color: var(--white); font-size: 1.5rem; }
.person-bubble small { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.home-actions-line {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.home-actions-line a {
    min-height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--pink);
    color: var(--white);
    font-weight: 900;
    text-align: center;
}
.home-actions-line a:nth-child(2) { background: var(--yellow); color: var(--ink); }
.home-actions-line a:nth-child(3) { background: var(--teal); }
.home-actions-line a:nth-child(4) { background: var(--ink); }
.visitor-list-mini { display: grid; gap: 8px; }
.visitor-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
}
.visitor-mini img,
.visitor-mini span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.visitor-mini span { display: grid; place-items: center; background: var(--pink); color: var(--white); font-weight: 900; }
.visitor-mini strong,
.visitor-mini small { display: block; }
.visitor-mini small { color: var(--muted); }
.quiet-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.quiet-stats span {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--white);
    text-align: center;
    font-weight: 850;
}
.quiet-stats strong { display: block; font-size: 1.6rem; color: var(--pink); }
.clean-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.search-page h2 { margin: 18px 0 10px; }
.chat-room {
    min-height: calc(100svh - 110px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
}
.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 900;
}
.chat-head a { color: var(--pink); }
.chat-messages {
    display: grid;
    align-content: end;
    gap: 8px;
    padding: 14px;
    background: #fff8fb;
}
.chat-message {
    max-width: 78%;
    justify-self: start;
    padding: 10px 12px;
    border-radius: 16px 16px 16px 4px;
    background: var(--white);
    border: 1px solid var(--line);
}
.chat-message.mine {
    justify-self: end;
    border-radius: 16px 16px 4px 16px;
    background: var(--pink);
    color: var(--white);
    border-color: var(--pink);
}
.chat-message p { margin: 0; }
.chat-message small { display: block; margin-top: 4px; opacity: .72; font-size: .72rem; }
.chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
}
.story-owner-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.story-owner-actions form { margin: 0; }
@media (max-width: 620px) {
    .home-actions-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quiet-stats { grid-template-columns: 1fr; }
    .home-search, .search-hero { grid-template-columns: 1fr; }
}

.app-topbar {
    justify-content: space-between;
    background: rgba(246,250,248,.94);
}
.top-avatar {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pink);
    color: var(--white);
    font-weight: 1000;
    border: 2px solid var(--white);
    box-shadow: 0 8px 20px rgba(17,24,39,.12);
}
.top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.top-avatar span { display: grid; place-items: center; width: 100%; height: 100%; }
.icon-button { border: 0; cursor: pointer; }
.notification-modal[hidden],
.create-modal[hidden] { display: none; }
.notification-modal,
.create-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,24,39,.32);
    backdrop-filter: blur(4px);
}
.notification-sheet,
.create-sheet {
    position: absolute;
    right: 14px;
    top: 76px;
    width: min(380px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 96px));
    overflow: auto;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 24px 70px rgba(17,24,39,.22);
}
.create-sheet {
    top: auto;
    right: 12px;
    bottom: 86px;
    left: 12px;
    width: auto;
}
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sheet-head h2 { margin: 0; }
.sheet-head button {
    border: 0;
    background: transparent;
    color: var(--pink);
    font-size: 1.7rem;
    font-weight: 900;
    cursor: pointer;
}
.create-choice {
    display: block;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface-2);
    margin-bottom: 10px;
}
.create-choice strong,
.create-choice span { display: block; }
.create-choice span { color: var(--muted); margin-top: 4px; }
.mobile-nav { grid-template-columns: repeat(4, 1fr); }
.mobile-nav button { border: 0; background: transparent; }
.tiktok-home { width: min(620px, 100%); }
.compact-search {
    grid-template-columns: 1fr auto;
    margin-top: 4px;
}
.compact-search button { min-width: 76px; }
.story-strip-clean {
    padding: 12px 0 8px;
    border: 0;
    background: transparent;
}
.story-bubbles-home { padding: 4px 2px 0; }
.create-story-bubble span {
    border-color: var(--teal);
    outline-color: var(--pink);
    background: var(--yellow);
    color: var(--ink);
}
.create-under-stories {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.create-under-stories button {
    border: 0;
    background: transparent;
    color: var(--pink);
    font-weight: 900;
    cursor: pointer;
}
.nearby-feed {
    display: grid;
    gap: 18px;
    margin-top: 14px;
}
.feed-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.feed-title h2 { margin: 0; font-size: 1.15rem; }
.feed-title a { color: var(--pink); font-weight: 900; }
.nearby-post {
    min-height: calc(100svh - 150px);
    display: grid;
    align-content: start;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    scroll-snap-align: start;
}
.nearby-post-body { display: block; }
.nearby-post-body img {
    width: 100%;
    max-height: 62vh;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--yellow);
}
.nearby-post-body h3 {
    margin: 0;
    padding: 16px 16px 6px;
    font-size: clamp(1.6rem, 7vw, 3.5rem);
    line-height: 1.02;
}
.nearby-post-body p {
    margin: 0;
    padding: 0 16px 12px;
    color: var(--muted);
    line-height: 1.5;
}
.feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--line);
}
.reaction-bar { display: flex; align-items: center; gap: 6px; }
.reaction-bar form { margin: 0; }
.reaction-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    cursor: pointer;
    font-size: 1.05rem;
}
.reaction-button.active {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(245,0,95,.12);
}
.comment-jump { color: var(--pink); font-weight: 900; white-space: nowrap; }
.owner-discreet-panel {
    margin: 18px 0;
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.72);
    border: 1px solid var(--line);
}
.profile-quiet-stats { margin-bottom: 10px; }
.compact-visitors { display: grid; gap: 6px; }
@media (max-width: 760px) {
    .topbar-actions .btn-ghost { display: none; }
    .notification-sheet { left: 12px; right: 12px; width: auto; }
    .nearby-post { min-height: calc(100svh - 128px); }
    .feed-actions { align-items: flex-start; flex-direction: column; }
    .reaction-bar { flex-wrap: wrap; }
}

.topbar {
    transition: transform .22s ease, opacity .22s ease;
}
.topbar.is-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.create-modal,
.notification-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.create-modal.is-open,
.notification-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.create-sheet {
    transform: translateY(26px) scale(.98);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.create-modal.is-open .create-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.notification-sheet {
    transform: translateY(-12px) scale(.98);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.notification-modal.is-open .notification-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.create-nav-button .icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    font-size: 1.35rem;
    box-shadow: 0 10px 24px rgba(245,0,95,.24);
}
.tiktok-home {
    width: min(640px, 100%);
    margin-top: -8px;
}
.floating-story-rail {
    position: sticky;
    top: 72px;
    z-index: 12;
    margin: 0 -14px 8px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(246,250,248,.96), rgba(246,250,248,.72));
    backdrop-filter: blur(10px);
}
.topbar.is-hidden ~ .app-shell .floating-story-rail {
    top: 8px;
}
.tiktok-feed {
    height: calc(100svh - 126px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    border-radius: var(--radius);
    scrollbar-width: none;
}
.tiktok-feed::-webkit-scrollbar { display: none; }
.tiktok-post {
    position: relative;
    min-height: calc(100svh - 126px);
    scroll-snap-align: start;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--white);
}
.tiktok-post-media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
}
.tiktok-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-only-post {
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    padding: 28px;
    background: var(--pink);
    color: var(--white);
}
.text-only-post h3 {
    margin: 0;
    font-size: clamp(2.2rem, 10vw, 5rem);
    line-height: 1.02;
}
.text-only-post p { color: rgba(255,255,255,.78); font-weight: 850; }
.tiktok-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 18px 82px 20px 16px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.68));
}
.floating-author {
    padding: 0 0 10px;
    color: var(--white);
}
.floating-author small { color: rgba(255,255,255,.78); }
.tiktok-overlay h3 {
    margin: 0 0 6px;
    font-size: clamp(1.45rem, 6vw, 3rem);
    line-height: 1.06;
}
.tiktok-overlay p {
    margin: 0;
    color: rgba(255,255,255,.86);
    line-height: 1.45;
}
.tiktok-actions {
    position: absolute;
    right: 12px;
    bottom: 28px;
    z-index: 3;
    display: grid;
    gap: 8px;
    justify-items: center;
}
.tiktok-actions form { margin: 0; }
.tiktok-actions .reaction-button {
    width: 44px;
    height: 44px;
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.16);
    color: var(--white);
    backdrop-filter: blur(8px);
}
.tiktok-actions .reaction-button.active {
    background: var(--white);
    color: var(--pink);
}
.comment-pill {
    min-width: 44px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: var(--white);
    font-weight: 900;
    backdrop-filter: blur(8px);
}
.empty-tiktok { background: var(--pink); }
@media (max-width: 760px) {
    .floating-story-rail { top: 68px; }
    .tiktok-feed,
    .tiktok-post { height: calc(100svh - 118px); min-height: calc(100svh - 118px); }
    .tiktok-overlay { padding-bottom: 22px; }
}

.tiktok-post-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    background: transparent;
    cursor: default;
}
.reaction-float {
    position: absolute;
    top: 92px;
    left: 12px;
    z-index: 4;
    display: flex;
    max-width: calc(100% - 96px);
    overflow: hidden;
    padding: 4px;
}
.reaction-float span {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85);
    background: var(--white);
}
.reaction-float span:first-child { margin-left: 0; }
.reaction-float img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.reaction-float i {
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    font-style: normal;
    font-size: .72rem;
}
.comment-ticker {
    position: absolute;
    left: 14px;
    right: 86px;
    bottom: 96px;
    z-index: 4;
    display: grid;
    gap: 6px;
    max-height: 86px;
    overflow: hidden;
    pointer-events: none;
}
.comment-ticker p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    color: var(--white);
    backdrop-filter: blur(10px);
    animation: commentPulse 5s ease-in-out infinite;
}
.comment-ticker p:nth-child(n+4) { display: none; }
.comment-ticker img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--white);
}
.comment-ticker strong { white-space: nowrap; }
@keyframes commentPulse {
    0%, 100% { transform: translateY(0); opacity: .92; }
    50% { transform: translateY(-3px); opacity: 1; }
}
.quick-comment-form {
    position: absolute;
    left: 12px;
    right: 86px;
    bottom: 42px;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.quick-comment-form input {
    min-height: 38px;
    border-radius: 999px;
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.18);
    color: var(--white);
    backdrop-filter: blur(10px);
}
.quick-comment-form input::placeholder { color: rgba(255,255,255,.78); }
.quick-comment-form button {
    border: 0;
    border-radius: 999px;
    padding: 0 14px;
    background: var(--white);
    color: var(--pink);
    font-weight: 900;
}
.tiktok-actions { bottom: 96px; }
.comment-pill {
    border: 0;
    cursor: pointer;
}
@media (max-width: 520px) {
    .reaction-float { top: 84px; }
    .comment-ticker { right: 74px; bottom: 88px; }
    .quick-comment-form { right: 74px; bottom: 36px; }
    .quick-comment-form button { padding-inline: 10px; }
}

/* Feed polish: fullscreen post, floating reactions, compact comments and notifications */
.tiktok-home {
    width: min(680px, 100%);
    margin-top: -18px;
}
.floating-story-rail {
    top: 62px;
    margin-bottom: -62px;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(246,250,248,.82), rgba(246,250,248,.18));
    pointer-events: none;
}
.floating-story-rail .people-bubbles { pointer-events: auto; }
.topbar.is-hidden ~ .app-shell .floating-story-rail,
body.post-focus-mode .floating-story-rail {
    top: 6px;
    background: transparent;
}
.create-story-bubble {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.create-story-bubble span {
    background: var(--pink);
    color: var(--white);
    font-size: 1.7rem;
    box-shadow: 0 12px 28px rgba(245,0,95,.26);
}
.tiktok-feed {
    height: calc(100svh - 74px);
    min-height: 640px;
    border-radius: 0 0 var(--radius) var(--radius);
    padding-top: 70px;
    background: transparent;
}
.tiktok-post {
    height: calc(100svh - 74px);
    min-height: 640px;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(17,24,39,.12);
}
.tiktok-post.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 90;
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    border-radius: 0;
    scroll-snap-align: none;
}
body.post-focus-mode { overflow: hidden; }
body.post-focus-mode .topbar,
body.post-focus-mode .mobile-nav { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.tiktok-close-fullscreen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 7;
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.34);
    color: var(--white);
    font-size: 1.6rem;
    line-height: 1;
    backdrop-filter: blur(10px);
}
.tiktok-post.is-fullscreen .tiktok-close-fullscreen { display: grid; place-items: center; }
.tiktok-overlay {
    z-index: 5;
    padding: 18px 86px 86px 16px;
}
.tiktok-overlay h3 { margin-top: 6px; }
.floating-author { padding-bottom: 4px; }
.comment-ticker {
    position: static;
    display: block;
    max-width: min(360px, 100%);
    height: 32px;
    max-height: 32px;
    margin: 0 0 6px 0;
    overflow: hidden;
}
.comment-ticker p {
    display: none;
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    font-size: .78rem;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: rgba(0,0,0,.42);
    animation: commentSwap 8s linear infinite;
}
.comment-ticker p:first-child { display: flex; }
.comment-ticker img { width: 20px; height: 20px; }
.comment-ticker strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
@keyframes commentSwap {
    0%, 100% { transform: translateY(0); opacity: .35; }
    12%, 78% { transform: translateY(0); opacity: 1; }
    90% { transform: translateY(-8px); opacity: 0; }
}
.reaction-float {
    top: 96px;
    left: 14px;
    width: 62px;
    height: 62px;
    overflow: visible;
    padding: 0;
    pointer-events: none;
}
.reaction-float span {
    position: absolute;
    inset: 8px auto auto 8px;
    width: 42px;
    height: 42px;
    margin-left: 0;
    opacity: .98;
    transform: translate3d(0,0,0) scale(1);
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.reaction-float.is-animated span {
    opacity: 0;
    animation: reactionFloatSwap 6.5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .78s);
}
.reaction-float.is-animated span:nth-child(n+7) { display: none; }
.reaction-float i { box-shadow: 0 4px 10px rgba(0,0,0,.12); }
@keyframes reactionFloatSwap {
    0% { opacity: 0; transform: translate3d(0,12px,0) scale(.72) rotate(-8deg); }
    12%, 42% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); }
    64% { opacity: 0; transform: translate3d(24px,-28px,0) scale(.82) rotate(10deg); }
    100% { opacity: 0; transform: translate3d(24px,-28px,0) scale(.82) rotate(10deg); }
}
.quick-comment-form {
    left: 14px;
    right: 86px;
    bottom: 18px;
    z-index: 6;
}
.tiktok-actions {
    bottom: 86px;
    z-index: 6;
}
.notification-sheet {
    padding: 18px;
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(17,24,39,.22);
}
.mini-notifications {
    gap: 10px;
    max-height: min(460px, 64svh);
    overflow: auto;
    padding-right: 2px;
}
.mini-notification {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: start;
    color: var(--ink);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(245,0,95,.07), rgba(0,191,176,.07));
    border: 1px solid rgba(17,24,39,.06);
}
.mini-notification:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(17,24,39,.09); }
.notification-dot {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--pink);
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(245,0,95,.14);
}
.mini-notification.unread .notification-dot { background: var(--pink); color: var(--white); }
.mini-notification small { display: block; margin-top: 4px; color: var(--teal); font-weight: 850; }
.notification-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.notification-footer form { margin: 0; }
.notification-footer .btn { width: 100%; min-height: 42px; }
@media (max-width: 760px) {
    .tiktok-home { width: calc(100vw - 18px); }
    .floating-story-rail { top: 58px; margin-inline: -9px; }
    .person-bubble span,
    .person-bubble img { width: 56px; height: 56px; }
    .tiktok-feed { height: calc(100svh - 34px); min-height: calc(100svh - 34px); padding-top: 68px; }
    .tiktok-post { height: calc(100svh - 34px); min-height: calc(100svh - 34px); }
    .reaction-float { top: 86px; }
    .tiktok-overlay { padding-bottom: 82px; }
    .quick-comment-form { bottom: 16px; }
}

/* Comment ticker cycles one comment at a time */
.comment-ticker {
    position: relative;
    isolation: isolate;
}
.comment-ticker p,
.comment-ticker p:first-child,
.comment-ticker p:nth-child(n+4) {
    position: absolute;
    inset: 0 auto auto 0;
    display: flex;
    opacity: 0;
    max-width: 100%;
    animation: commentTickerCycle 10s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 2s);
}
.comment-ticker p:nth-child(n+6) { display: none; }
@keyframes commentTickerCycle {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
    8%, 25% { opacity: 1; transform: translateY(0) scale(1); }
    34% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* Topbar, story close, single post actions and live chat polish */
.home-button {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--pink);
    font-size: 1.45rem;
    font-weight: 950;
    box-shadow: 0 10px 26px rgba(17,24,39,.08);
}
.topbar-actions .top-avatar {
    width: 40px;
    height: 40px;
    box-shadow: 0 10px 24px rgba(245,0,95,.18);
}
body.post-focus-mode .floating-story-rail {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 16px));
    z-index: 120;
    margin: 0;
    padding-top: 4px;
}
body.post-focus-mode .tiktok-post.is-fullscreen { padding-top: 0; }
.story-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 8;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0,0,0,.34);
    color: var(--white);
    font-size: 1.7rem;
    backdrop-filter: blur(10px);
}
.story-viewer { touch-action: pan-y; }
.immersive-post-shell {
    width: min(560px, 100%);
}
.immersive-single-post {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
}
.immersive-single-post .post-media {
    aspect-ratio: 9 / 13;
}
.single-post-preview-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px 16px;
    color: var(--muted);
    font-weight: 850;
}
.single-post-preview-row span {
    width: 28px;
    height: 28px;
    margin-right: -12px;
    border: 2px solid var(--white);
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
}
.single-post-preview-row img { width: 100%; height: 100%; object-fit: cover; }
.single-post-preview-row small { margin-left: 12px; }
.single-post-icon-actions {
    position: absolute;
    right: 12px;
    bottom: 86px;
    display: grid;
    gap: 10px;
}
.post-round-action,
.chat-icon-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    font-size: 1.25rem;
    box-shadow: 0 12px 28px rgba(245,0,95,.24);
    cursor: pointer;
}
.post-react-tray[hidden],
.post-comment-modal[hidden] { display: none; }
.post-react-tray {
    position: absolute;
    right: 70px;
    bottom: 142px;
    display: flex;
    gap: 6px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 38px rgba(17,24,39,.16);
}
.post-react-tray form { margin: 0; }
.post-react-tray .reaction-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
}
.post-comment-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.post-comment-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.post-comment-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 24px);
    width: min(560px, 100%);
    max-height: 78svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 16px;
    border-radius: 24px 24px 0 0;
    background: var(--white);
    box-shadow: 0 -20px 60px rgba(17,24,39,.18);
    transition: transform .18s ease;
}
.post-comment-modal.is-open .post-comment-sheet { transform: translate(-50%, 0); }
.compact-comments {
    overflow: auto;
    display: grid;
    gap: 8px;
    padding: 4px 0 12px;
}
.comment-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-row img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
.modal-comment-form {
    margin: 0;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.avatar-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    overflow: visible;
}
.avatar-wrap > img,
.avatar-wrap > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}
.avatar-wrap.is-online::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: #19c37d;
}
.search-person-row,
.chat-thread-row { flex-direction: row; align-items: center; }
.chat-icon-button { width: 42px; height: 42px; background: var(--white); color: var(--pink); border: 1px solid var(--line); box-shadow: none; }
.live-status {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
}
.live-status.online { background: rgba(25,195,125,.13); color: #0f8f5c; }
.live-chat-room { min-height: calc(100svh - 96px); }
.live-chat-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
.chat-peer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.chat-peer small { display: block; color: #0f8f5c; font-weight: 850; }
.live-chat-form button {
    border: 0;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    font-size: 1.2rem;
}
.typing-line {
    padding: 0 16px 8px;
    color: var(--pink);
    font-size: .82rem;
    font-weight: 850;
}
@media (max-width: 760px) {
    .search-person-row,
    .chat-thread-row { flex-direction: row; }
    .immersive-single-post { border-radius: 0; }
    .immersive-post-shell { width: calc(100vw - 18px); }
}

/* Final home rail and fullscreen feed behavior */
.floating-story-rail {
    top: 8px;
    margin-bottom: -72px;
}
.tiktok-feed { padding-top: 76px; }
body.post-focus-mode .floating-story-rail { display: none; }
.tiktok-feed.is-fullscreen-feed {
    position: fixed;
    inset: 0;
    z-index: 90;
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    padding-top: 0;
    border-radius: 0;
    background: var(--ink);
}
.tiktok-feed.is-fullscreen-feed .tiktok-post,
.tiktok-feed.is-fullscreen-feed .tiktok-post.is-fullscreen {
    position: relative;
    inset: auto;
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    border-radius: 0;
    box-shadow: none;
}
.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen { display: grid; place-items: center; position: fixed; }
.story-text-thumb {
    padding: 8px;
    text-align: center;
    font-size: .72rem;
    line-height: 1.05;
    word-break: break-word;
    background: linear-gradient(135deg, var(--pink), var(--teal));
    color: var(--white);
}
.color-choice-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 2px 0;
}
.post-color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.post-color-choice span {
    width: 34px;
    height: 34px;
    display: block;
    border-radius: 50%;
    background: var(--post-color);
    border: 3px solid rgba(255,255,255,.9);
    box-shadow: 0 8px 18px rgba(17,24,39,.12);
}
.post-color-choice input:checked + span { outline: 3px solid var(--ink); }
.wall-delete-form {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
}
.wall-delete-form button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--pink);
    font-size: 1.3rem;
    font-weight: 900;
}
.recado-card { position: relative; }
@media (max-width: 760px) {
    .floating-story-rail { top: 6px; }
    .tiktok-feed { padding-top: 72px; height: calc(100svh - 16px); min-height: calc(100svh - 16px); }
}

.story-viewers-modal[hidden] { display: none; }
.story-viewers-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.story-viewers-modal.is-open { opacity: 1; pointer-events: auto; }
.story-viewers-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 22px);
    width: min(460px, 100%);
    max-height: 70svh;
    padding: 16px;
    border-radius: 24px 24px 0 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 -20px 54px rgba(0,0,0,.24);
    transition: transform .18s ease;
}
.story-viewers-modal.is-open .story-viewers-sheet { transform: translate(-50%, 0); }
.story-viewer-list { display: grid; gap: 8px; overflow: auto; max-height: 54svh; }
.viewer-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--surface-2); }
.viewer-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.viewer-row small { color: var(--muted); }

/* Composer v2, feed fixes, delete/repost controls */
.mood-post-shell { width: min(560px, 100%); }
.mood-composer {
    min-height: calc(100svh - 110px);
    gap: 14px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #fff7fb);
    box-shadow: 0 18px 46px rgba(17,24,39,.08);
}
.mood-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -4px -4px 0;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
}
.publish-button,
.publish-bottom-button {
    border: 0;
    border-radius: 999px;
    background: var(--pink);
    color: var(--white);
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(245,0,95,.26);
}
.publish-button { min-width: 104px; }
.publish-bottom-button { min-height: 52px; font-size: 1rem; }
.mood-hero-picker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.mood-choice {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 76px;
    border-radius: 18px;
    background: var(--surface-2);
    cursor: pointer;
}
.mood-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mood-choice span {
    font-size: 1.75rem;
    animation: moodBob 2.4s ease-in-out infinite;
}
.mood-choice:nth-child(2n) span { animation-delay: .25s; }
.mood-choice:nth-child(3n) span { animation-delay: .45s; }
.mood-choice small { color: var(--muted); font-weight: 900; font-size: .72rem; }
.mood-choice:has(input:checked) {
    background: var(--pink);
    color: var(--white);
    box-shadow: 0 14px 28px rgba(245,0,95,.22);
}
.mood-choice:has(input:checked) small { color: var(--white); }
@keyframes moodBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-4deg); } }
.mood-media-drop { border-style: dashed; background: rgba(0,191,176,.08); }
.tiktok-home .floating-story-rail {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 16px));
    z-index: 24;
    margin: 0;
}
.topbar.is-hidden ~ .app-shell .floating-story-rail { top: 8px; }
.tiktok-home .tiktok-feed { padding-top: 86px; }
.feed-delete-post-form {
    position: absolute;
    top: 62px;
    right: 14px;
    z-index: 8;
    margin: 0;
}
.feed-delete-post-form button,
.profile-delete-post-form button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(17,24,39,.14);
}
.profile-post-card { position: relative; }
.profile-delete-post-form {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    margin: 0;
}
.wall-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.wall-card-actions form { margin: 0; }
.wall-card-actions button,
.repost-inline-form button {
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(255,255,255,.92);
    color: var(--pink);
    font-weight: 900;
}
.repost-inline-form { margin-top: 10px; }
@media (max-width: 560px) {
    .mood-hero-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiktok-home .floating-story-rail { top: 58px; }
    .tiktok-home .tiktok-feed { padding-top: 82px; }
}

/* Polish pass: post menu, clean rail, readable feed, compact chat, themed confirm */
.tiktok-home .floating-story-rail,
.floating-story-rail {
    background: #f6faf8 !important;
    background-image: none !important;
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
    backdrop-filter: none !important;
}
.topbar.is-hidden ~ .app-shell .floating-story-rail {
    opacity: .88;
    transform: translateX(-50%) translateY(-4px);
}
.tiktok-post,
.tiktok-feed.is-fullscreen-feed .tiktok-post {
    display: block;
}
.tiktok-post-media img { object-position: center; }
.text-only-post {
    align-content: center;
    gap: 14px;
    padding: 92px 28px 180px;
}
.text-only-post h3 {
    max-width: 92%;
    overflow-wrap: anywhere;
}
.reply-context {
    width: fit-content;
    max-width: 92%;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    font-size: .86rem;
}
.text-post-mood,
.mood-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: var(--white);
    font-style: normal;
    font-size: .78rem;
    font-weight: 900;
}
.mood-pill.inline,
.mood-pill.single {
    background: rgba(245,0,95,.10);
    color: var(--pink);
}
.tiktok-overlay {
    padding: 18px 92px 150px 18px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.72) 100%);
}
.tiktok-feed.is-fullscreen-feed .tiktok-overlay { padding-bottom: 118px !important; }
.floating-author { align-items: center; }
.floating-author div { min-width: 0; }
.floating-author strong,
.floating-author small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-kebab-menu {
    position: absolute;
    top: 72px;
    right: 14px;
    z-index: 12;
}
.tiktok-feed.is-fullscreen-feed .post-kebab-menu { top: 14px; }
.post-kebab-menu summary {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--pink);
    font-size: 1.4rem;
    font-weight: 950;
    list-style: none;
    box-shadow: 0 12px 26px rgba(17,24,39,.16);
    cursor: pointer;
}
.post-kebab-menu summary::-webkit-details-marker { display: none; }
.post-kebab-menu > div {
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 132px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 18px 38px rgba(17,24,39,.18);
}
.post-kebab-menu a,
.post-kebab-menu button {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 10px;
    padding: 0 10px;
    background: transparent;
    color: var(--ink);
    font-weight: 900;
    text-align: left;
}
.post-kebab-menu button:hover,
.post-kebab-menu a:hover { background: var(--surface-2); color: var(--pink); }
.feed-delete-post-form,
.profile-delete-post-form { display: none; }
.confirm-modal[hidden] { display: none; }
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.confirm-modal.is-open { opacity: 1; pointer-events: auto; }
.confirm-sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(.96);
    width: min(360px, calc(100vw - 32px));
    padding: 22px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 28px 80px rgba(17,24,39,.24);
    text-align: center;
    transition: transform .18s ease;
}
.confirm-modal.is-open .confirm-sheet { transform: translate(-50%, -50%) scale(1); }
.confirm-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    font-weight: 950;
}
.confirm-sheet h2 { margin: 0 0 6px; color: var(--ink); }
.confirm-sheet p { margin: 0 0 16px; color: var(--muted); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.live-chat-room {
    height: calc(100svh - 176px);
    min-height: 520px;
    max-height: 720px;
}
.chat-messages {
    overflow-y: auto;
    align-content: start !important;
    padding-bottom: 10px;
}
.live-chat-head { padding: 10px 12px; }
.live-chat-head .avatar-wrap,
.live-chat-head .avatar-wrap > img,
.live-chat-head .avatar-wrap > span { width: 42px; height: 42px; }
.chat-emoji-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--line);
    background: var(--white);
}
.chat-emoji-bar button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 1.1rem;
}
.live-chat-form { border-top: 0 !important; padding-top: 8px !important; }
@media (max-width: 760px) {
    .live-chat-room { height: calc(100svh - 156px); min-height: 500px; }
    .tiktok-overlay { padding-bottom: 142px !important; }
    .tiktok-actions { bottom: 128px; }
    .quick-comment-form { bottom: 76px; }
}
.profile-post-menu { top: 10px; right: 10px; }
.profile-post-menu > div { z-index: 20; }
.immersive-single-post .mood-pill.single { margin: 0 16px 8px; }
@media (max-width: 760px) {
    .chat-room.live-chat-room { height: calc(100svh - 136px); min-height: 0; max-height: none; }
    .chat-message { max-width: 72%; padding: 8px 10px; }
    .chat-message p { font-size: .92rem; }
}

/* Polish pass 2: fullscreen clarity, story rail movement, grouped UI and compact chat */
body.story-rail-at-top .tiktok-home .floating-story-rail {
    top: 8px !important;
    box-shadow: 0 12px 28px rgba(17,24,39,.10);
}
body.post-focus-mode .mobile-nav {
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
}
.tiktok-feed.is-fullscreen-feed {
    scroll-snap-type: y mandatory;
    background: #000;
}
.tiktok-feed.is-fullscreen-feed .tiktok-post,
.tiktok-feed.is-fullscreen-feed .tiktok-post.is-fullscreen {
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100svh !important;
}
.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    padding: 18px 94px 132px 18px !important;
}
.tiktok-feed.is-fullscreen-feed .text-only-post {
    padding: 104px 30px 166px;
}
.text-only-post h3 {
    max-width: 13ch;
    font-size: clamp(2rem, 11vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: 0;
}
.reply-context {
    max-width: min(280px, 80vw);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,255,255,.92);
    color: var(--pink);
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(17,24,39,.10);
}
.single-reply {
    margin: 12px 16px 4px;
    display: inline-flex;
}
.post-kebab-menu form { margin: 0; }
.post-kebab-menu .danger,
.post-kebab-menu button[type="submit"] { color: var(--pink); font-weight: 950; }
.single-post-menu { top: 18px; right: 18px; }
.confirm-sheet {
    border: 1px solid rgba(245,0,95,.14);
    background: linear-gradient(180deg, #fff, #fff5f9);
}
.confirm-icon {
    font-size: 1.55rem;
    color: var(--pink);
    background: rgba(245,0,95,.10);
}
.notification-sheet {
    border: 1px solid rgba(245,0,95,.12);
    box-shadow: 0 24px 70px rgba(17,24,39,.22);
}
.mini-notification {
    border-radius: 18px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(17,24,39,.05);
}
.mini-notification.unread {
    background: #fff0f6;
}
.mood-hero-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mood-choice:has(input:checked) span {
    animation: moodPop .6s ease both, moodBob 2.4s ease-in-out .6s infinite;
}
@keyframes moodPop { 0% { transform: scale(.7) rotate(-8deg); } 70% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
.publish-button,
.publish-bottom-button {
    background: var(--pink) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(245,0,95,.25);
}
.chat-page-shell .live-chat-head,
.live-chat-head {
    padding: 10px 12px !important;
    min-height: 68px;
}
.chat-room.live-chat-room {
    border-radius: 18px;
}
.chat-emoji-bar button {
    transition: transform .16s ease, background .16s ease;
}
.chat-emoji-bar button:hover { transform: translateY(-2px) scale(1.05); background: #fff0f6; }
@media (max-width: 760px) {
    .tiktok-home .floating-story-rail { top: 56px; }
    body.story-rail-at-top .tiktok-home .floating-story-rail { top: 4px !important; }
    .tiktok-feed.is-fullscreen-feed .tiktok-overlay { padding-bottom: 116px !important; }
    .tiktok-feed.is-fullscreen-feed .tiktok-actions { bottom: 72px; }
    .tiktok-feed.is-fullscreen-feed .quick-comment-form { bottom: 18px; }
    .mood-hero-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mood-choice { min-height: 66px; }
    .chat-room.live-chat-room { height: calc(100svh - 118px); }
    .chat-messages { padding: 12px !important; }
}
/* Polish pass 3: story rail separated, fullscreen exit, private recadinhos and compact chat */
.tiktok-home .floating-story-rail,
.floating-story-rail {
    position: sticky !important;
    top: 72px !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    border-radius: 0 0 24px 24px;
    padding: 10px 12px 12px !important;
    background: #f6faf8 !important;
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
    z-index: 14;
}
.topbar.is-hidden ~ .app-shell .floating-story-rail,
body.story-rail-at-top .tiktok-home .floating-story-rail {
    top: 8px !important;
    opacity: 1 !important;
    transform: none !important;
}
body.notification-modal-open .floating-story-rail { display: none !important; }
.tiktok-home .tiktok-feed,
.tiktok-feed {
    padding-top: 0 !important;
    height: calc(100svh - 182px);
    min-height: 560px;
}
.tiktok-post {
    border-radius: 24px !important;
    overflow: hidden;
}
.tiktok-post.is-fullscreen,
.tiktok-feed.is-fullscreen-feed .tiktok-post {
    border-radius: 0 !important;
}
.tiktok-close-fullscreen {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 30;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--pink);
    font-size: 1.45rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(17,24,39,.16);
}
.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
.tiktok-post.is-fullscreen .tiktok-close-fullscreen { display: grid; place-items: center; }
.home-recadinhos {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}
.home-recado-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(245,0,95,.13);
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.home-recado-card > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff0f6;
    color: var(--pink);
    font-size: 1.15rem;
}
.home-recado-card strong,
.home-recado-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-recado-card strong { color: var(--ink); font-size: .9rem; }
.home-recado-card small { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.home-recado-card a { color: var(--pink); font-weight: 950; }
.wall-repost-post h3 { max-width: 15ch; }
.wall-repost-answer {
    margin: 0;
    max-width: min(320px, 78vw);
    color: rgba(255,255,255,.9) !important;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.35;
}
.wall-repost-box summary {
    list-style: none;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--pink);
    font-weight: 950;
    cursor: pointer;
}
.wall-repost-box summary::-webkit-details-marker { display: none; }
.wall-repost-box form {
    position: absolute;
    right: 0;
    bottom: 42px;
    width: min(260px, 78vw);
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(17,24,39,.22);
    z-index: 8;
}
.wall-repost-box textarea {
    min-height: 78px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    resize: vertical;
}
.wall-repost-box button {
    border: 0;
    border-radius: 999px;
    min-height: 38px;
    background: var(--pink);
    color: #fff;
    font-weight: 950;
}
.no-topbar .app-shell {
    padding-top: 8px !important;
}
.no-topbar .chat-room.live-chat-room {
    height: calc(100svh - 92px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0;
}
.no-topbar .live-chat-head {
    min-height: 58px;
    padding: 8px 10px !important;
}
.no-topbar .chat-messages {
    padding: 10px 12px !important;
}
.no-topbar .chat-emoji-bar {
    padding: 4px 10px !important;
}
@media (max-width: 760px) {
    .tiktok-home .floating-story-rail,
    .floating-story-rail { top: 62px !important; margin-inline: 0 !important; }
    body.story-rail-at-top .tiktok-home .floating-story-rail { top: 4px !important; }
    .tiktok-home .tiktok-feed,
    .tiktok-feed { height: calc(100svh - 174px); min-height: 520px; }
    .home-recadinhos { margin-inline: 4px; }
    .home-recado-card { padding: 9px 10px; }
    .no-topbar .chat-room.live-chat-room { height: calc(100svh - 84px) !important; }
}.single-wall-answer {
    color: var(--muted) !important;
    margin: 0 16px 12px;
    font-size: 1rem;
    font-weight: 850;
}
/* Polish pass 4: visible feed frame and true fullscreen */
.tiktok-home {
    --story-rail-h: 92px;
    --bottom-nav-h: 92px;
}
.tiktok-home .floating-story-rail,
.floating-story-rail {
    min-height: var(--story-rail-h);
    border-radius: 0 0 18px 18px !important;
    margin-bottom: 10px !important;
}
.tiktok-home .tiktok-feed,
.tiktok-feed {
    height: calc(100svh - var(--story-rail-h) - var(--bottom-nav-h) - 82px) !important;
    min-height: 0 !important;
    border-radius: 22px;
    background: transparent;
}
.topbar.is-hidden ~ .app-shell .tiktok-home .tiktok-feed,
body.story-rail-at-top .tiktok-home .tiktok-feed {
    height: calc(100svh - var(--story-rail-h) - var(--bottom-nav-h) - 22px) !important;
}
.tiktok-post,
.tiktok-home .tiktok-post {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 22px !important;
}
.tiktok-post-media,
.tiktok-post-media img,
.text-only-post {
    border-radius: inherit;
}
.text-only-post {
    min-height: 100%;
    align-content: center;
    padding: 74px 28px 188px !important;
}
.text-only-post h3 {
    max-width: min(12ch, 86vw);
    font-size: clamp(2rem, 9vw, 4rem);
}
.reply-context,
.single-reply {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.88) !important;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.25;
    max-width: min(320px, 82vw);
}
.immersive-single-post .single-reply {
    color: var(--pink) !important;
    margin: 10px 16px 2px;
}
.tiktok-overlay {
    padding: 16px 92px 126px 18px !important;
}
.tiktok-actions {
    bottom: 124px !important;
}
.quick-comment-form {
    bottom: 72px !important;
}
.post-kebab-menu {
    top: 12px !important;
    right: 12px !important;
}
.reaction-float {
    top: 58px !important;
}
body.post-focus-mode {
    overflow: hidden !important;
    background: #000 !important;
}
body.post-focus-mode .app-shell {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
body.post-focus-mode .topbar,
body.post-focus-mode .floating-story-rail,
body.post-focus-mode .mobile-nav {
    display: none !important;
}
.tiktok-feed.is-fullscreen-feed {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 220 !important;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}
.tiktok-feed.is-fullscreen-feed .tiktok-post,
.tiktok-feed.is-fullscreen-feed .tiktok-post.is-fullscreen {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scroll-snap-align: start;
}
.tiktok-feed.is-fullscreen-feed .tiktok-post:not(.is-fullscreen) {
    opacity: 1;
}
.tiktok-feed.is-fullscreen-feed .post-kebab-menu {
    display: none !important;
}
.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
.tiktok-post.is-fullscreen .tiktok-close-fullscreen {
    display: grid !important;
    place-items: center;
    top: 12px;
    left: 14px;
    width: 34px;
    height: 34px;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    padding: 18px 92px 102px 18px !important;
}
.tiktok-feed.is-fullscreen-feed .tiktok-actions {
    bottom: 88px !important;
}
.tiktok-feed.is-fullscreen-feed .quick-comment-form {
    bottom: 24px !important;
}
.tiktok-feed.is-fullscreen-feed .reaction-float {
    top: 68px !important;
}
.tiktok-feed.is-fullscreen-feed .text-only-post {
    padding: 84px 28px 150px !important;
    border-radius: 0 !important;
}
.home-recadinhos { display: none !important; }
@media (max-width: 760px) {
    .tiktok-home { --story-rail-h: 88px; --bottom-nav-h: 94px; }
    .tiktok-home .floating-story-rail,
    .floating-story-rail { top: 62px !important; }
    body.story-rail-at-top .tiktok-home .floating-story-rail,
    .topbar.is-hidden ~ .app-shell .floating-story-rail { top: 4px !important; }
    .tiktok-overlay { padding-bottom: 128px !important; }
    .tiktok-actions { bottom: 126px !important; }
    .quick-comment-form { bottom: 74px !important; }
    .floating-author strong,
    .floating-author small { max-width: 190px; }
}
/* Hotfix feed height: undo compressed grid rows */
.tiktok-home {
    --recadin-story-space: 96px;
    --recadin-nav-space: 94px;
    --recadin-top-space: 78px;
    width: min(640px, 100%) !important;
}
.nearby-feed.tiktok-feed {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
    min-height: 430px !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed,
.topbar.is-hidden ~ .app-shell .nearby-feed.tiktok-feed {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - 16px) !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
    min-height: 430px !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--pink) !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
.topbar.is-hidden ~ .app-shell .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - 16px) !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.nearby-feed.tiktok-feed .text-only-post {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 12px !important;
    padding: 68px 28px 176px !important;
    color: #fff !important;
}
.nearby-feed.tiktok-feed .text-only-post h3 {
    color: #fff !important;
    max-width: min(13ch, 86vw) !important;
    font-size: clamp(2rem, 9vw, 4.1rem) !important;
    line-height: 1.03 !important;
}
.nearby-feed.tiktok-feed .reply-context {
    color: rgba(255,255,255,.9) !important;
    text-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.nearby-feed.tiktok-feed .tiktok-overlay {
    z-index: 8 !important;
    padding: 16px 92px 126px 18px !important;
}
.nearby-feed.tiktok-feed .post-kebab-menu {
    z-index: 18 !important;
}
.nearby-feed.tiktok-feed .tiktok-actions {
    z-index: 12 !important;
    bottom: 122px !important;
}
.nearby-feed.tiktok-feed .quick-comment-form {
    z-index: 12 !important;
    bottom: 70px !important;
}
.nearby-feed.tiktok-feed .reaction-float {
    z-index: 11 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 220 !important;
    background: #000 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post {
    padding: 84px 28px 150px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .post-kebab-menu {
    display: none !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen {
    display: grid !important;
    place-items: center !important;
}
@media (max-width: 760px) {
    .tiktok-home { --recadin-story-space: 92px; --recadin-nav-space: 92px; --recadin-top-space: 76px; }
    .nearby-feed.tiktok-feed,
    .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
        height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
        min-height: 420px !important;
    }
    body.story-rail-at-top .nearby-feed.tiktok-feed,
    .topbar.is-hidden ~ .app-shell .nearby-feed.tiktok-feed,
    body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
    .topbar.is-hidden ~ .app-shell .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
        height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - 10px) !important;
    }
}
/* Hotfix story rail lift while feed scrolls */
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    top: 4px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 12px 28px rgba(17,24,39,.10) !important;
}
body.story-rail-at-top .tiktok-home {
    --recadin-top-space: 12px;
}
/* Hotfix story rail fixed lift and fullscreen close position */
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    position: fixed !important;
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(640px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    margin: 0 !important;
    border-radius: 0 0 18px 18px !important;
    z-index: 80 !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed {
    margin-top: 98px !important;
}
.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
.tiktok-post.is-fullscreen .tiktok-close-fullscreen {
    left: auto !important;
    right: 14px !important;
    top: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    font-size: 2rem !important;
    text-shadow: 0 8px 20px rgba(0,0,0,.45);
}
/* Hotfix story rail: compact real top bar, not floating card */
body.story-rail-at-top .tiktok-home {
    --recadin-story-space: 74px;
    --recadin-top-space: 4px;
}
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 8px 12px 6px !important;
    border-radius: 0 0 14px 14px !important;
    background: #f6faf8 !important;
    box-shadow: 0 8px 18px rgba(17,24,39,.08) !important;
    z-index: 80 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
body.story-rail-at-top .floating-story-rail .people-bubbles,
body.story-rail-at-top .story-bubbles-home {
    justify-content: flex-start !important;
    gap: 12px !important;
    width: max-content !important;
    min-width: 100% !important;
    padding: 0 6px !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble span,
body.story-rail-at-top .floating-story-rail .person-bubble img {
    width: 52px !important;
    height: 52px !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble small {
    font-size: .72rem !important;
    margin-top: 2px !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed {
    margin-top: 0 !important;
    height: calc(100svh - 74px - var(--recadin-nav-space) - 8px) !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - 74px - var(--recadin-nav-space) - 8px) !important;
}
@media (max-width: 760px) {
    body.story-rail-at-top .tiktok-home { --recadin-story-space: 72px; }
    body.story-rail-at-top .nearby-feed.tiktok-feed,
    body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
        height: calc(100svh - 72px - var(--recadin-nav-space) - 6px) !important;
    }
}
/* Hotfix smooth story lift and clean snap between posts */
.tiktok-home .floating-story-rail,
.floating-story-rail {
    transition: top .28s ease, transform .28s ease, box-shadow .28s ease, min-height .28s ease, padding .28s ease !important;
    will-change: top, transform;
}
.nearby-feed.tiktok-feed {
    scroll-padding-top: 0 !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post + .nearby-post.tiktok-post {
    margin-top: 0 !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    transition: top .28s ease, transform .28s ease, box-shadow .28s ease, min-height .28s ease, padding .28s ease !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed {
    scroll-snap-type: y mandatory !important;
    overscroll-behavior: contain;
}
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    margin: 0 !important;
}
/* Hotfix stable lifted stories and consistent fullscreen close */
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px 12px 4px !important;
    border-radius: 0 !important;
    background: #f6faf8 !important;
    box-shadow: 0 8px 18px rgba(17,24,39,.06) !important;
    transition: top .22s ease, height .22s ease, padding .22s ease !important;
    z-index: 80 !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble span,
body.story-rail-at-top .floating-story-rail .person-bubble img {
    width: 50px !important;
    height: 50px !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed,
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - 72px - var(--recadin-nav-space) - 4px) !important;
}
.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post .tiktok-close-fullscreen,
.tiktok-post.is-fullscreen .tiktok-close-fullscreen,
button.tiktok-close-fullscreen {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: none;
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    top: 12px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 8px 20px rgba(0,0,0,.48) !important;
    z-index: 40 !important;
}
.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen,
.tiktok-post.is-fullscreen button.tiktok-close-fullscreen {
    display: block !important;
}
.nearby-feed.tiktok-feed .reply-context {
    display: block !important;
    width: auto !important;
    max-width: min(330px, 88vw) !important;
    margin-bottom: 2px !important;
    color: rgba(255,255,255,.94) !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}
/* Hotfix fullscreen close without flicker */
body.post-unfocus-lock *,
body.post-unfocus-lock .tiktok-feed,
body.post-unfocus-lock .tiktok-post,
body.post-unfocus-lock .floating-story-rail {
    transition: none !important;
    animation: none !important;
}
body.post-unfocus-lock {
    overflow: hidden !important;
}.reply-question-context {
    display: block;
    max-width: min(340px, 88vw);
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.25;
    margin-top: -6px;
    text-shadow: 0 6px 18px rgba(0,0,0,.16);
}
/* Reply repost: smaller, clean name + handle */
.nearby-feed.tiktok-feed .reply-context {
    display: grid !important;
    gap: 2px !important;
    width: fit-content !important;
    max-width: min(340px, 86vw) !important;
    font-size: .72rem !important;
    line-height: 1.18 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.nearby-feed.tiktok-feed .reply-context span {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 850;
}
.nearby-feed.tiktok-feed .reply-context strong {
    display: block;
    color: #fff;
    font-size: .86rem;
    font-weight: 950;
}
.nearby-feed.tiktok-feed .reply-context em {
    font-style: normal;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
    font-weight: 900;
}
.reply-question-context {
    max-width: min(320px, 84vw) !important;
    font-size: .74rem !important;
    line-height: 1.22 !important;
    color: rgba(255,255,255,.72) !important;
    margin-top: -2px !important;
}
/* Reply attribution under answer */
.reply-under-answer {
    display: grid;
    gap: 3px;
    max-width: min(330px, 84vw);
    margin-top: -2px;
}
.reply-under-answer small {
    display: grid;
    gap: 1px;
    color: rgba(255,255,255,.72);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.15;
}
.reply-under-answer span {
    display: block;
    color: rgba(255,255,255,.64);
}
.reply-under-answer strong {
    display: block;
    color: rgba(255,255,255,.9);
    font-size: .78rem;
    font-weight: 950;
}
.reply-under-answer em {
    font-style: normal;
    color: rgba(255,255,255,.68);
    font-size: .72rem;
}
.reply-under-answer .reply-question-context {
    margin-top: 0 !important;
    font-size: .7rem !important;
    color: rgba(255,255,255,.58) !important;
}
/* Topbar forced return and reply layout final */
.topbar.force-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.reply-question-above {
    order: 0;
    max-width: min(330px, 84vw) !important;
    margin: 0 0 -4px !important;
    color: rgba(255,255,255,.74) !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    line-height: 1.24 !important;
}
.reply-under-answer {
    margin-top: -4px !important;
}
.reply-under-answer small {
    font-size: .66rem !important;
}
.reply-under-answer span {
    color: rgba(255,255,255,.56) !important;
}
.reply-under-answer strong {
    color: rgba(255,255,255,.82) !important;
    font-size: .74rem !important;
}
.reply-under-answer em {
    color: rgba(255,255,255,.62) !important;
    font-size: .68rem !important;
}
/* Fullscreen return: keep stories out while layout settles */
body.post-returning .floating-story-rail,
body.post-unfocus-lock .floating-story-rail {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.post-returning .nearby-feed.tiktok-feed,
body.post-returning .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
body.post-unfocus-lock .nearby-feed.tiktok-feed,
body.post-unfocus-lock .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}
body.post-returning .topbar,
body.post-unfocus-lock .topbar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Stable return from fullscreen and topbar priority over stories */
body.post-returning .floating-story-rail,
body.post-unfocus-lock .floating-story-rail {
    display: none !important;
}
body.post-returning .nearby-feed.tiktok-feed,
body.post-unfocus-lock .nearby-feed.tiktok-feed {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
}
body.post-returning .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
body.post-unfocus-lock .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    scroll-snap-align: none !important;
    transition: none !important;
}
.topbar.force-visible ~ .app-shell .floating-story-rail {
    position: sticky !important;
    top: 72px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 12 !important;
}
@media (max-width: 760px) {
    .topbar.force-visible ~ .app-shell .floating-story-rail { top: 62px !important; }
}
/* Prevent contradictory topbar state after fullscreen close */
.topbar.force-visible.is-hidden {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body:has(.topbar.force-visible) .nearby-feed.tiktok-feed,
body:has(.topbar.force-visible) .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
}
body:has(.topbar.force-visible) .floating-story-rail {
    position: sticky !important;
    top: 72px !important;
    z-index: 12 !important;
}
@media (max-width: 760px) {
    body:has(.topbar.force-visible) .floating-story-rail { top: 62px !important; }
}
/* Final stability: topbar visible means stories are normal and feed stays below */
.topbar.force-visible ~ .app-shell .floating-story-rail,
body:not(.story-rail-at-top) .tiktok-home .floating-story-rail {
    position: sticky !important;
    top: 72px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 88px !important;
    margin: 0 0 10px !important;
    z-index: 12 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.topbar.force-visible ~ .app-shell .nearby-feed.tiktok-feed,
body:not(.story-rail-at-top) .nearby-feed.tiktok-feed {
    margin-top: 0 !important;
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
    scroll-behavior: auto !important;
}
.topbar.force-visible ~ .app-shell .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
body:not(.story-rail-at-top) .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
}
@media (max-width: 760px) {
    .topbar.force-visible ~ .app-shell .floating-story-rail,
    body:not(.story-rail-at-top) .tiktok-home .floating-story-rail { top: 62px !important; }
}
.reply-under-answer {
    display: inline-grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 7px;
    row-gap: 1px;
    width: fit-content;
    max-width: min(330px, 84vw);
    margin-top: -3px !important;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}
.reply-under-answer i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-style: normal;
    font-size: .72rem;
    line-height: 1;
}
.reply-under-answer small { gap: 0 !important; }
.reply-under-answer span {
    font-size: .62rem !important;
    line-height: 1.05 !important;
}
.reply-under-answer strong {
    font-size: .72rem !important;
    line-height: 1.05 !important;
}
.reply-under-answer em { font-size: .66rem !important; }
/* Place reply attribution under the mood pill, no extra bubble */
.reply-under-answer {
    display: block !important;
    width: fit-content !important;
    max-width: min(330px, 84vw) !important;
    margin-top: -4px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.reply-under-answer small {
    display: block !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
}
.reply-under-answer .reply-mini-icon {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin-right: 4px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .66rem !important;
    line-height: 1 !important;
}
.reply-under-answer span:not(.reply-mini-icon) {
    display: inline !important;
    color: rgba(255,255,255,.62) !important;
    font-size: .66rem !important;
}
.reply-under-answer strong {
    display: block !important;
    color: rgba(255,255,255,.82) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    margin-top: 1px;
}
.reply-under-answer em {
    font-style: normal !important;
    color: rgba(255,255,255,.64) !important;
    font-size: .66rem !important;
}
/* Ajuste final: humor so no autor; atribuicao da pergunta em pilula separada */
.text-only-post > .text-post-mood {
    display: none !important;
}
.reply-under-answer {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: min(350px, 86vw) !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}
.reply-under-answer small {
    display: grid !important;
    gap: 4px !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}
.reply-under-answer .reply-mini-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 1px 0 0 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
    font-size: .68rem !important;
    line-height: 1 !important;
}
.reply-under-answer span:not(.reply-mini-icon) {
    display: block !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .66rem !important;
    line-height: 1.08 !important;
}
.reply-under-answer strong {
    display: block !important;
    color: #fff !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
}
.reply-under-answer em {
    display: inline !important;
    font-style: normal !important;
    color: rgba(255,255,255,.76) !important;
    font-size: .68rem !important;
}

/* Ajuste: atribuicao em uma linha e comentarios abaixo do humor do autor */
.nearby-feed.tiktok-feed .tiktok-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
}
.nearby-feed.tiktok-feed .floating-author {
    order: 1 !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}
.nearby-feed.tiktok-feed .comment-ticker {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(320px, calc(100vw - 128px)) !important;
    max-width: min(320px, calc(100vw - 128px)) !important;
    height: 34px !important;
    max-height: 34px !important;
    margin: 0 0 8px 52px !important;
    z-index: 1 !important;
}
.nearby-feed.tiktok-feed .comment-ticker p,
.nearby-feed.tiktok-feed .comment-ticker p:first-child,
.nearby-feed.tiktok-feed .comment-ticker p:nth-child(n+4) {
    inset: 0 auto auto 0 !important;
    max-width: 100% !important;
}
.reply-under-answer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: min(340px, 84vw) !important;
    margin-top: 12px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
}
.reply-under-answer small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
}
.reply-under-answer .reply-mini-icon {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 3px 0 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.9) !important;
    font-size: .72rem !important;
    line-height: 1 !important;
}
.reply-under-answer span:not(.reply-mini-icon),
.reply-under-answer strong,
.reply-under-answer em {
    display: inline !important;
    margin: 0 !important;
    line-height: 1.12 !important;
}
.reply-under-answer span:not(.reply-mini-icon) {
    color: rgba(255,255,255,.78) !important;
    font-size: .66rem !important;
}
.reply-under-answer strong {
    color: #fff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
}
.reply-under-answer em {
    color: rgba(255,255,255,.78) !important;
    font-size: .66rem !important;
    font-style: normal !important;
}

/* Ajuste fino: comentarios alinhados a esquerda e resposta compacta com @ */
.nearby-feed.tiktok-feed .comment-ticker {
    align-self: flex-start !important;
    margin: 0 0 8px 0 !important;
    width: min(340px, calc(100vw - 128px)) !important;
    max-width: min(340px, calc(100vw - 128px)) !important;
    text-align: left !important;
}
.nearby-feed.tiktok-feed .comment-ticker p,
.nearby-feed.tiktok-feed .comment-ticker p:first-child,
.nearby-feed.tiktok-feed .comment-ticker p:nth-child(n+4) {
    left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
.reply-under-answer {
    max-width: min(320px, calc(100vw - 116px)) !important;
    padding: 7px 11px !important;
}
.reply-under-answer small {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
}
.reply-under-answer span:not(.reply-mini-icon) {
    flex: 0 1 auto !important;
}
.reply-under-answer strong {
    flex: 0 0 auto !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Repost composer: humor e cores iguais ao post, em versao compacta */
.wall-repost-box,
.question-repost-box {
    position: relative;
}
.wall-repost-box > summary,
.question-repost-box > summary {
    cursor: pointer;
    list-style: none;
    width: fit-content;
    border: 0;
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(255,255,255,.92);
    color: var(--pink);
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.wall-repost-box > summary::-webkit-details-marker,
.question-repost-box > summary::-webkit-details-marker {
    display: none;
}
.repost-style-form {
    display: grid;
    gap: 12px;
    width: min(350px, calc(100vw - 42px));
    margin-top: 10px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    box-shadow: 0 18px 45px rgba(17,24,39,.18);
}
.recado-card .repost-style-form {
    position: absolute;
    right: 0;
    top: 42px;
    z-index: 25;
}
.question-repost-box .repost-style-form {
    width: 100%;
}
.repost-style-form textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 18px;
    padding: 12px 13px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    outline: none;
}
.repost-style-section {
    display: grid;
    gap: 8px;
}
.repost-style-section > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 950;
}
.mini-mood-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.mood-choice.mini {
    min-height: 58px;
    padding: 8px 6px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: none;
}
.mood-choice.mini span {
    font-size: 1.28rem;
}
.mood-choice.mini small {
    font-size: .68rem;
    line-height: 1;
}
.mood-choice.mini input:checked + span {
    transform: scale(1.15);
}
.color-choice-row.compact {
    justify-content: flex-start;
    gap: 9px;
    margin: 0;
}
.color-choice-row.compact .post-color-choice span {
    width: 30px;
    height: 30px;
}
.repost-style-form .publish-button {
    width: 100%;
    justify-content: center;
    border: 0;
    margin-top: 2px;
}
@media (max-width: 520px) {
    .recado-card .repost-style-form {
        right: -8px;
        width: min(330px, calc(100vw - 34px));
    }
    .mini-mood-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Repost em modal: substitui composer dentro do card */
.repost-open-button {
    border: 0;
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(255,255,255,.94);
    color: var(--pink);
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(0,0,0,.13);
}
.repost-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: end center;
    padding: 18px;
    pointer-events: none;
}
.repost-modal.is-open {
    pointer-events: auto;
}
.repost-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,24,39,.46);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(8px);
}
.repost-modal.is-open .modal-backdrop {
    opacity: 1;
}
.repost-sheet {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    max-height: min(82svh, 720px);
    overflow: auto;
    border-radius: 30px;
    padding: 16px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(17,24,39,.28);
    transform: translateY(22px) scale(.98);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.repost-modal.is-open .repost-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.repost-sheet .sheet-head {
    margin-bottom: 12px;
}
.repost-sheet .sheet-head button {
    border: 0;
    background: #f4f7f8;
    color: var(--ink);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.35rem;
    font-weight: 900;
}
.repost-modal .repost-style-form {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.repost-modal .mini-mood-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.repost-modal .publish-button {
    min-height: 52px;
    font-size: 1rem;
}
@media (max-width: 520px) {
    .repost-modal {
        padding: 10px;
    }
    .repost-sheet {
        width: 100%;
        border-radius: 26px 26px 18px 18px;
    }
}

/* Perfil limpo: mural moderno com avatar real/anonimo */
.recado-feed {
    display: grid;
    gap: 14px;
}
.recado-feed > h2 {
    margin: 10px 2px 2px;
    font-size: 1.25rem;
    font-weight: 950;
    color: var(--ink);
}
.recado-card.wall-message-card {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.88)) !important;
    border: 1px solid rgba(17,24,39,.08);
    color: var(--ink) !important;
    box-shadow: 0 20px 55px rgba(17,24,39,.10);
    overflow: hidden;
}
.recado-card.wall-message-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--wall-accent, var(--pink));
}
.recado-card.wall-message-card::after {
    content: "";
    position: absolute;
    right: -42px;
    top: -52px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wall-accent, var(--pink)) 20%, transparent);
    pointer-events: none;
}
.wall-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding-right: 84px;
}
.wall-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--wall-accent, var(--pink)), var(--teal));
    box-shadow: 0 10px 24px rgba(17,24,39,.12);
}
.wall-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid #fff;
}
.wall-sender-meta {
    min-width: 0;
}
.wall-sender-meta strong,
.wall-sender-meta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wall-sender-meta strong {
    font-size: .98rem;
    color: var(--ink);
    font-weight: 950;
}
.wall-sender-meta small {
    margin-top: 1px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}
.wall-message-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 18px;
    padding: 14px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--wall-accent, var(--pink)) 9%, #fff);
}
.wall-message-body > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--wall-accent, var(--pink));
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(17,24,39,.08);
}
.recado-card.wall-message-card .wall-message-body h2 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(1.08rem, 4vw, 1.45rem) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
}
.wall-card-actions-repost {
    position: relative !important;
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}
.wall-card-actions-repost .repost-open-button {
    background: var(--wall-accent, var(--pink));
    color: #fff;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--wall-accent, var(--pink)) 28%, transparent);
}
.wall-card-actions-repost form[action*="mural/excluir"] button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font-size: 1.25rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(17,24,39,.10);
}
.recado-card.wall-message-card.is-anonymous .wall-avatar {
    background: linear-gradient(135deg, #111827, var(--wall-accent, var(--pink)));
}
.owner-discreet-panel,
.profile-quiet-stats,
.compact-visitors {
    display: none !important;
}
@media (max-width: 520px) {
    .recado-card.wall-message-card {
        border-radius: 24px !important;
        padding: 14px !important;
    }
    .wall-card-top {
        padding-right: 72px;
    }
}

/* Composer unificado do perfil */
.profile-interaction-card {
    margin: 16px 0 20px;
    padding: 16px;
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: 0 22px 60px rgba(17,24,39,.10);
}
.interaction-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.interaction-head strong,
.interaction-head small {
    display: block;
}
.interaction-head strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 950;
}
.interaction-head small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}
.interaction-mode-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #f3f6f7;
    flex: 0 0 auto;
}
.interaction-mode-tabs button {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: transparent;
    color: var(--muted);
    font-weight: 950;
}
.interaction-mode-tabs button.active {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 10px 22px rgba(245,0,95,.24);
}
.unified-profile-form {
    display: none;
    gap: 12px;
}
.unified-profile-form.active {
    display: grid;
}
.unified-profile-form textarea,
.unified-profile-form input[type="text"] {
    width: 100%;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 20px;
    background: #f8fafb;
    color: var(--ink);
    padding: 13px 14px;
    font: inherit;
    outline: none;
}
.unified-profile-form textarea {
    min-height: 96px;
    resize: vertical;
}
.interaction-picker {
    display: grid;
    gap: 8px;
}
.interaction-picker > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 950;
}
.emoji-choice-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.emoji-choice-row label {
    flex: 0 0 auto;
    margin: 0;
}
.emoji-choice-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.emoji-choice-row span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    font-size: 1.22rem;
    box-shadow: 0 8px 18px rgba(17,24,39,.06);
}
.emoji-choice-row input:checked + span {
    outline: 3px solid var(--pink);
    transform: translateY(-1px);
}
.interaction-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}
.interaction-submit-row button {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    background: var(--pink);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(245,0,95,.24);
}
.question-soft-note {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: rgba(0,191,179,.10);
    color: var(--muted);
}
.question-soft-note span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-weight: 950;
}
.question-soft-note p {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
}

/* Ações do mural mais discretas */
.recado-card.wall-message-card {
    padding-bottom: 16px !important;
}
.wall-card-actions-repost {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}
.wall-card-actions-repost .repost-open-button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: .74rem;
    background: rgba(255,255,255,.94) !important;
    color: var(--wall-accent, var(--pink)) !important;
    box-shadow: 0 10px 22px rgba(17,24,39,.10) !important;
}
.wall-card-actions-repost form[action*="mural/excluir"] button {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--muted) !important;
}
.wall-card-top {
    padding-right: 132px !important;
}
@media (max-width: 520px) {
    .interaction-head {
        display: grid;
    }
    .interaction-mode-tabs {
        width: 100%;
    }
    .interaction-mode-tabs button {
        flex: 1;
    }
    .wall-card-top {
        padding-right: 108px !important;
    }
}

/* Menu da foto do topo */
.top-avatar-menu {
    position: relative;
    display: inline-grid;
}
.top-avatar-menu .top-avatar {
    border: 0;
    cursor: pointer;
}
.avatar-dropdown[hidden] { display: none; }
.avatar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 260;
    min-width: 158px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: 0 20px 55px rgba(17,24,39,.18);
}
.avatar-dropdown a,
.avatar-dropdown button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 12px;
    padding: 0 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 900;
    text-align: left;
}
.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
    background: #f4f7f8;
    color: var(--pink);
}
.avatar-dropdown form { margin: 0; }

/* Pergunta: aviso discreto */
.question-soft-note {
    background: #eefafb !important;
    border: 1px solid rgba(0,191,179,.16);
    padding: 10px 12px !important;
}
.question-soft-note span {
    width: 8px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: var(--teal) !important;
    color: transparent !important;
    font-size: 0 !important;
    flex: 0 0 8px;
}
.question-soft-note p {
    color: var(--muted);
    font-size: .78rem !important;
    line-height: 1.2 !important;
}

/* Mural: ações e avatar mais elegantes */
.wall-avatar {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    padding: 3px !important;
}
.wall-avatar img {
    border-width: 3px !important;
}
.wall-card-actions-repost {
    top: 12px !important;
    right: 12px !important;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(17,24,39,.10);
}
.wall-card-actions-repost .repost-open-button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: .72rem !important;
    box-shadow: none !important;
}
.wall-card-actions-repost form[action*="mural/excluir"] button {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    box-shadow: none !important;
}
.wall-message-body {
    margin-top: 16px !important;
}

/* Posts do perfil: icones e modais */
.profile-post-card {
    border-radius: 18px !important;
    overflow: visible !important;
}
.profile-post-link {
    display: block;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
.profile-post-actions {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
}
.profile-post-actions button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    padding: 0 13px;
    background: #f6f8f9;
    color: var(--ink);
    font-weight: 950;
}
.profile-post-actions button span {
    font-size: 1rem;
}
.profile-post-actions button:first-child {
    color: var(--pink);
}
.profile-post-modal[hidden] { display: none; }
.profile-post-modal {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: grid;
    place-items: end center;
    padding: 14px;
    pointer-events: none;
}
.profile-post-modal.is-open {
    pointer-events: auto;
}
.profile-post-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,24,39,.48);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(8px);
}
.profile-post-modal.is-open .modal-backdrop {
    opacity: 1;
}
.profile-post-sheet {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    max-height: min(76svh, 620px);
    overflow: auto;
    border-radius: 28px;
    padding: 16px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(17,24,39,.26);
    transform: translateY(22px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.profile-post-modal.is-open .profile-post-sheet {
    transform: translateY(0);
    opacity: 1;
}
.profile-modal-list {
    display: grid;
    gap: 9px;
}
.profile-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: #f7f9fa;
}
.profile-modal-row img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-modal-row div {
    min-width: 0;
    flex: 1;
}
.profile-modal-row strong,
.profile-modal-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-modal-row strong { font-weight: 950; }
.profile-modal-row small { color: var(--muted); font-size: .8rem; }
.profile-modal-row > span {
    font-size: 1.2rem;
}
@media (max-width: 520px) {
    .wall-card-top { padding-right: 102px !important; }
    .profile-post-sheet { border-radius: 26px 26px 18px 18px; }
}

/* Fix: centralizar modais de comentarios/reacoes do perfil */
.profile-post-modal {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.profile-post-sheet {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    transform: translate(-50%, 24px) !important;
    margin: 0 !important;
}
.profile-post-modal.is-open .profile-post-sheet {
    transform: translate(-50%, 0) !important;
}
.profile-post-sheet .sheet-head,
.profile-post-sheet .profile-modal-list {
    min-width: 0 !important;
    max-width: 100% !important;
}
.profile-modal-row {
    min-width: 0 !important;
}
.profile-modal-row div {
    min-width: 0 !important;
}
@media (max-width: 520px) {
    .profile-post-sheet {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* Fix avatar do topo recortado no circulo */
.top-avatar-menu .top-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 2px solid rgba(245,0,95,.16) !important;
}
.top-avatar-menu .top-avatar img,
.top-avatar-menu .top-avatar span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}
.top-avatar-menu .top-avatar img {
    object-fit: cover !important;
    object-position: center center !important;
}
.topbar-actions .top-avatar-menu .top-avatar {
    box-shadow: 0 10px 24px rgba(245,0,95,.18) !important;
}

/* Perfil teen/social: hero mais moderno e foco em perguntas */
.public-profile {
    width: min(430px, 100%);
    margin-inline: auto;
}
.profile-cover {
    min-height: 0 !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 34px 18px 22px !important;
    border: 0 !important;
    border-radius: 0 0 34px 34px !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,234,0,.95) 0 18%, transparent 19%),
        radial-gradient(circle at 86% 8%, rgba(0,191,179,.62) 0 16%, transparent 17%),
        linear-gradient(145deg, var(--profile-primary, var(--pink)) 0%, color-mix(in srgb, var(--profile-primary, var(--pink)) 70%, #111827) 58%, #111827 100%) !important;
    color: #fff !important;
    overflow: hidden;
    box-shadow: 0 22px 70px color-mix(in srgb, var(--profile-primary, var(--pink)) 22%, transparent);
}
.profile-cover::before {
    content: "";
    position: absolute;
    inset: auto -24px -38px auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    pointer-events: none;
}
.profile-cover::after {
    right: 16px !important;
    bottom: -12px !important;
    color: rgba(255,255,255,.16) !important;
    font-size: 4.1rem !important;
    transform: rotate(-4deg);
}
.profile-cover > .menu-lines {
    position: absolute;
    top: 18px;
    left: 18px;
    opacity: .86;
}
.profile-head {
    position: relative;
    z-index: 1;
    gap: 7px !important;
    margin-top: 8px;
}
.big-avatar {
    width: 104px !important;
    height: 104px !important;
    border: 4px solid rgba(255,255,255,.92) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.24), 0 0 0 8px rgba(255,255,255,.12) !important;
}
.profile-head h1 {
    max-width: 11ch;
    margin-top: 12px !important;
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
    line-height: .92 !important;
    text-wrap: balance;
}
.profile-head p {
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    opacity: 1 !important;
    backdrop-filter: blur(10px);
}
.profile-counts {
    position: relative;
    z-index: 1;
    min-height: 38px !important;
    padding: 0 16px !important;
    color: var(--ink) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.profile-actions {
    width: min(300px, 100%);
    gap: 9px !important;
}
.profile-actions .outline-pill,
.profile-actions button.outline-pill {
    min-height: 42px;
    flex: 1 1 calc(50% - 9px);
    justify-content: center;
    border: 1px solid rgba(255,255,255,.75) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
}
.profile-actions button[data-share-profile] {
    flex-basis: 72%;
    background: rgba(255,255,255,.94) !important;
    color: var(--profile-primary, var(--pink)) !important;
}
.status-pill {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.26) !important;
}
.bio-strip {
    margin-top: 14px;
    padding: 12px 14px !important;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(17,24,39,.07);
}
.profile-interaction-card {
    margin-top: 14px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, #fff 0%, #fff6fb 100%) !important;
    box-shadow: 0 20px 60px rgba(245,0,95,.10), 0 10px 30px rgba(17,24,39,.06) !important;
}
.interaction-head strong {
    font-size: 1.22rem !important;
}
.interaction-mode-tabs {
    order: -1;
    width: 100%;
    background: #f4f7f8 !important;
}
.interaction-mode-tabs button {
    flex: 1;
    min-height: 40px;
}
.interaction-mode-tabs button.active {
    background: linear-gradient(135deg, var(--pink), #ff4f93) !important;
}
.unified-profile-form textarea {
    min-height: 112px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(17,24,39,.04);
}
.unified-profile-form[data-profile-form="question"] textarea {
    border-color: rgba(245,0,95,.16) !important;
}
.unified-profile-form[data-profile-form="question"] .interaction-submit-row button {
    background: linear-gradient(135deg, var(--pink), #ff4f93) !important;
}
@media (max-width: 520px) {
    .profile-cover {
        margin-inline: -2px;
        border-radius: 0 0 30px 30px !important;
        padding-top: 38px !important;
    }
    .profile-actions {
        width: min(320px, 100%);
    }
}
.growth-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: end center;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.growth-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.growth-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 24, 39, .42);
    backdrop-filter: blur(8px);
}

.growth-sheet {
    position: relative;
    width: min(430px, 100%);
    border-radius: 30px;
    padding: 24px;
    background: linear-gradient(145deg, #fff 0%, #fff7fb 46%, #e8fffb 100%);
    color: #111827;
    box-shadow: 0 24px 70px rgba(245, 0, 95, .22);
    transform: translateY(18px) scale(.98);
    transition: transform .2s ease;
}

.growth-modal.is-open .growth-sheet {
    transform: translateY(0) scale(1);
}

.growth-sheet.compact {
    padding-bottom: 20px;
}

.growth-close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: transparent;
    color: #f5005f;
    font-size: 28px;
    font-weight: 900;
}

.growth-kicker,
.guest-copy span {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 7px 12px;
    background: #f5005f;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.growth-sheet h2,
.guest-copy h2 {
    margin: 14px 0 8px;
    font-size: 28px;
    line-height: 1.02;
}

.growth-sheet p,
.guest-copy p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.growth-perks,
.guest-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.growth-perks span,
.guest-benefits span {
    border-radius: 999px;
    padding: 8px 11px;
    background: #fff;
    color: #111827;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.growth-score-card {
    border-radius: 20px;
    padding: 14px;
    background: #101827;
    color: #fff;
    margin-bottom: 16px;
}

.growth-score-card strong,
.growth-score-card small {
    display: block;
}

.growth-score-card small {
    margin-top: 3px;
    color: rgba(255,255,255,.72);
    font-weight: 700;
}

.growth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.growth-actions .btn,
.growth-sheet.compact .btn {
    width: 100%;
    justify-content: center;
}

.guest-conversion-card {
    margin: 18px 0;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(145deg, #fff 0%, #fff2f7 55%, #ecfffb 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.guest-preview-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 118px;
    gap: 10px;
    margin: 16px -18px 8px 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.guest-preview {
    min-height: 132px;
    border-radius: 22px;
    padding: 12px;
    background: #f5005f;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    font-weight: 900;
}

.guest-preview:nth-child(2n) {
    background: #00bfb3;
}

.guest-preview:nth-child(3n) {
    background: #7c3aed;
}

.guest-preview img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 16px;
}

.guest-preview small {
    color: rgba(255,255,255,.78);
    font-weight: 900;
}

.guest-cta {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

/* Modern navigation icons and locked guest previews */
.nav-icon,
.home-button svg,
.icon-button svg {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
}

.nav-icon svg,
.home-button svg,
.icon-button svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-icon svg path:first-child,
.home-button svg path:first-child,
.icon-button svg path:first-child {
    fill: none;
}

.mobile-nav-item .nav-icon.create {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    box-shadow: 0 12px 26px rgba(245, 0, 95, .28);
}

.mobile-nav-item .nav-icon.create svg {
    width: 19px;
    height: 19px;
    margin: 7px;
}

.mobile-nav-item {
    color: #7c8794;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus-visible {
    color: var(--pink);
    background: rgba(245, 0, 95, .07) !important;
}

.home-button,
.icon-button {
    color: var(--pink);
}

.profile-question-shortcut {
    flex-basis: 100% !important;
    background: #fff !important;
    color: var(--profile-primary, var(--pink)) !important;
    border-color: #fff !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .16);
    position: relative;
}

.profile-question-shortcut::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #00bfb3;
    box-shadow: 0 0 0 5px rgba(0, 191, 179, .16);
}

.locked-preview {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #f5005f, #7c3aed) !important;
}

.locked-preview::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    filter: blur(.2px);
}

.locked-preview::after {
    content: "??";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #f5005f;
    font-size: 14px;
}

.locked-preview strong,
.locked-preview small {
    position: relative;
    z-index: 1;
}

.lock-shine {
    position: absolute;
    inset: -40% auto auto -40%;
    width: 90px;
    height: 220px;
    transform: rotate(28deg);
    background: rgba(255,255,255,.18);
}

/* Header icon sizing polish */
.app-topbar .home-button,
.app-topbar .icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    border-radius: 50% !important;
}

.app-topbar .home-button svg,
.app-topbar .icon-button svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.15;
}

.app-topbar .bell span {
    min-width: 17px;
    height: 17px;
    top: -3px !important;
    right: -2px !important;
    font-size: 10px;
    line-height: 17px;
    padding: 0 4px;
}

.app-topbar .topbar-actions {
    gap: 10px;
}

/* Profile hero cleanup and VIP polish */
.public-profile .menu-lines {
    display: none !important;
}

.profile-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 8px auto 0;
    padding: 8px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffea00, #ff7a00);
    color: #111827;
    box-shadow: 0 14px 30px rgba(255, 234, 0, .24);
    font-weight: 950;
}

.profile-vip-badge span {
    padding: 3px 7px;
    border-radius: 999px;
    background: #111827;
    color: #ffea00;
    font-size: 11px;
    letter-spacing: .02em;
}

.profile-vip-badge strong {
    font-size: 12px;
}

.profile-question-shortcut {
    background: linear-gradient(135deg, #00bfb3, #00e0ca) !important;
    color: #08342f !important;
    border: 0 !important;
    box-shadow: 0 18px 36px rgba(0, 191, 179, .28) !important;
}

.profile-question-shortcut::before {
    content: "?" !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.92) !important;
    color: #00a79d !important;
    font-size: 14px;
    font-weight: 950;
    box-shadow: none !important;
}

/* Story export */
.story-export-button {
    border: 0;
    border-radius: 999px;
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, #ffea00, #ff7a00) !important;
    color: #111827 !important;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(255, 122, 0, .2);
    cursor: pointer;
}

.profile-post-actions .story-export-button {
    flex: 1 1 100%;
}

.qa-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.qa-export {
    min-height: 36px;
    padding-inline: 12px;
}

.story-export-modal[hidden] {
    display: none;
}

.story-export-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: end center;
    padding: 16px;
}

.story-export-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 24, 39, .54);
    backdrop-filter: blur(8px);
}

.story-export-sheet {
    position: relative;
    width: min(420px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    border-radius: 28px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    transform: translateY(20px);
    opacity: 0;
    transition: .18s ease;
}

.story-export-modal.is-open .story-export-sheet {
    transform: translateY(0);
    opacity: 1;
}

.story-export-sheet img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 22px;
    background: #111827;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.story-export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.story-export-actions .btn {
    justify-content: center;
}

.story-export-sheet p {
    margin: 10px 0 0;
    color: #64748b;
    font-weight: 800;
    text-align: center;
}

/* External music/GIF picker */
.external-picker-modal[hidden] { display: none; }
.external-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: grid;
    place-items: end center;
    padding: 16px;
}
.external-picker-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17,24,39,.52);
    backdrop-filter: blur(8px);
}
.external-picker-sheet {
    position: relative;
    width: min(430px, 100%);
    max-height: 86vh;
    overflow: auto;
    border-radius: 28px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    transform: translateY(18px);
    opacity: 0;
    transition: .18s ease;
}
.external-picker-modal.is-open .external-picker-sheet { transform: translateY(0); opacity: 1; }
.external-picker-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 12px;
}
.external-picker-search input {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 13px 15px;
    font-weight: 800;
}
.external-picker-search button,
.external-picker-trigger {
    border: 0;
    border-radius: 999px;
    padding: 0 15px;
    background: var(--pink);
    color: #fff;
    font-weight: 950;
}
.external-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.external-picker-results {
    display: grid;
    gap: 9px;
}
.external-result {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 9px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    text-align: left;
    align-items: center;
}
.external-result img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 13px;
    background: #eef2f7;
}
.external-result strong,
.external-result small { display: block; }
.external-result small { color: #64748b; font-weight: 800; margin-top: 2px; }
.external-result.gif-result { grid-template-columns: 84px 1fr; }
.external-result.gif-result img { width: 84px; height: 84px; }
.attached-mini-card {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 9px;
    align-items: center;
    border-radius: 18px;
    padding: 9px;
    background: #f8fafc;
    border: 1px solid var(--line);
    margin: 8px 0;
}
.attached-mini-card img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 12px;
}
.attached-mini-card strong,
.attached-mini-card small { display: block; }
.attached-mini-card small { color: #64748b; font-weight: 800; }
.attached-mini-card button,
.attached-gif-preview button {
    border: 0;
    border-radius: 999px;
    padding: 8px 10px;
    background: #fff;
    color: var(--pink);
    font-weight: 950;
}
.attached-gif-preview {
    width: fit-content;
    position: relative;
    margin: 8px 0;
}
.attached-gif-preview img {
    max-width: 180px;
    border-radius: 18px;
    display: block;
}
.attached-gif-preview button {
    position: absolute;
    right: 8px;
    top: 8px;
}
.profile-music-card {
    margin: 14px auto 0;
    width: min(320px, 100%);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    color: #111827;
    padding: 10px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    align-items: center;
    box-shadow: 0 18px 36px rgba(0,0,0,.14);
}
.profile-music-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 15px; }
.profile-music-card strong,
.profile-music-card small { display: block; }
.profile-music-card small { color: #64748b; font-weight: 800; }

.profile-status-gif {
    width: 92px;
    height: 92px;
    margin: 10px auto 0;
    border-radius: 24px;
    padding: 4px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 16px 34px rgba(0,0,0,.16);
}
.profile-status-gif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.post-attached {
    margin: 0 16px 10px;
}
.post-attached-gif {
    margin: 0 16px 12px;
}
.story-external-attachments {
    display: grid;
    gap: 12px;
    justify-items: center;
    margin-top: 18px;
}
.story-gif-attach {
    max-width: min(74vw, 340px);
    max-height: 320px;
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.story-external-attachments .attached-mini-card {
    width: min(340px, 86vw);
    background: rgba(255,255,255,.92);
}

/* Picker mobile polish override */
.external-picker-modal {
    align-items: end !important;
    justify-items: center !important;
    padding: 12px !important;
    overflow: hidden !important;
}
.external-picker-sheet {
    box-sizing: border-box !important;
    width: min(100%, 390px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(82vh, 720px) !important;
    border-radius: 28px 28px 22px 22px !important;
    padding: 16px !important;
    overflow-x: hidden !important;
}
.external-picker-sheet .sheet-head {
    position: sticky;
    top: -16px;
    z-index: 2;
    background: #fff;
    padding-top: 2px;
    margin: -2px 0 12px;
}
.external-picker-search {
    position: sticky;
    top: 44px;
    z-index: 2;
    background: #fff;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-bottom: 10px;
}
.external-picker-search input {
    min-width: 0;
    width: 100%;
    font-size: 16px;
}
.external-picker-search button {
    min-height: 44px;
    padding-inline: 14px;
}
.external-picker-results {
    max-width: 100%;
    overflow-x: hidden;
}
.external-result {
    box-sizing: border-box;
    min-width: 0;
    grid-template-columns: 56px minmax(0, 1fr) !important;
}
.external-result span,
.external-result strong,
.external-result small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.external-result.gif-result {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    padding: 8px;
}
.external-result.gif-result img {
    width: 100% !important;
    height: 128px !important;
    border-radius: 16px;
}
.external-picker-results:has(.gif-result) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.external-result.gif-result span {
    padding: 2px 2px 0;
}
.external-result.gif-result small {
    display: none;
}
.picker-empty,
.picker-hint {
    width: 100%;
    margin: 14px 0;
    border-radius: 22px;
    padding: 18px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    font-weight: 900;
    line-height: 1.35;
    white-space: normal;
}
.picker-empty small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    overflow-wrap: anywhere;
}
@media (max-width: 420px) {
    .external-picker-modal { padding: 8px !important; }
    .external-picker-sheet {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 78vh !important;
    }
}

/* Composer and picker fit fixes */
html, body {
    overflow-x: hidden !important;
}
.post-create-shell,
.story-create-shell,
.settings-layout {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
.post-composer,
.story-composer,
.form-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.post-composer input,
.post-composer textarea,
.post-composer select,
.story-composer input,
.story-composer textarea,
.story-composer select,
.form-card input,
.form-card textarea,
.form-card select {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.mobile-nav {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    overflow: hidden !important;
}
.mobile-nav-item {
    min-width: 0 !important;
}
.mobile-nav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.external-picker-modal {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.external-picker-modal .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
}
.external-picker-sheet {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(392px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: min(78vh, 720px) !important;
    transform: translateX(-50%) translateY(18px) !important;
    margin: 0 !important;
}
.external-picker-modal.is-open .external-picker-sheet {
    transform: translateX(-50%) translateY(0) !important;
}
.external-picker-results:has(.gif-result) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.upload-preview {
    min-height: 0;
}
.upload-preview-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 8px 0 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.upload-preview-card img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}
.upload-preview-card strong,
.upload-preview-card small {
    display: block;
    min-width: 0;
}
.upload-preview-card small {
    color: #64748b;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-preview-card.is-error {
    grid-template-columns: 1fr;
    background: #fff1f6;
    color: var(--pink);
}
.upload-preview.compact .upload-preview-card {
    margin-top: 0;
}
@media (max-width: 430px) {
    .external-picker-sheet {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: 76vh !important;
    }
}

/* Hard fix: picker must never escape viewport */
.external-picker-modal[data-external-picker-modal] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}
.external-picker-modal[data-external-picker-modal] .external-picker-sheet {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: translateY(18px) !important;
}
.external-picker-modal[data-external-picker-modal].is-open .external-picker-sheet {
    transform: translateY(0) !important;
}
@media (min-width: 520px) {
    .external-picker-modal[data-external-picker-modal] .external-picker-sheet {
        left: 50% !important;
        right: auto !important;
        width: 430px !important;
        max-width: 430px !important;
        transform: translateX(-50%) translateY(18px) !important;
    }
    .external-picker-modal[data-external-picker-modal].is-open .external-picker-sheet {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* Definitive mobile picker inner layout fix */
.external-picker-sheet,
.external-picker-sheet *,
.external-picker-results,
.external-picker-results * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.external-picker-sheet {
    overflow-x: hidden !important;
}
.external-picker-search {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
}
.external-picker-search input,
.external-picker-search button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.external-picker-results {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.picker-empty,
.picker-hint,
.muted-center {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: center !important;
}
.external-result {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.external-result span,
.external-result strong,
.external-result small {
    max-width: 100% !important;
    min-width: 0 !important;
}
@media (max-width: 520px) {
    .external-picker-sheet {
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 14px !important;
    }
    .external-picker-results:has(.gif-result) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile picker height lock: modal scrolls inside the sheet, never the page */
body.external-picker-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
}
body.external-picker-open .external-picker-modal[data-external-picker-modal] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
body.external-picker-open .external-picker-sheet {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
body.external-picker-open .external-picker-results {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
@media (max-width: 520px) {
    body.external-picker-open .external-picker-sheet {
        top: auto !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 20px) !important;
    }
    body.external-picker-open .external-picker-results {
        max-height: min(48dvh, 360px) !important;
    }
}



/* Create post: lock horizontal movement on phones */
.app-shell:has(.mood-post-shell),
.post-create-shell,
.mood-post-shell,
.post-composer.mood-composer {
    width: 100% !important;
    max-width: min(560px, 100%) !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}
.app-shell:has(.mood-post-shell) {
    max-width: 100vw !important;
}
.post-composer.mood-composer > *,
.post-composer.mood-composer input,
.post-composer.mood-composer textarea,
.post-composer.mood-composer select,
.post-composer.mood-composer button,
.post-composer.mood-composer label {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.post-composer.mood-composer textarea,
.post-composer.mood-composer input[type="text"],
.post-composer.mood-composer select,
.post-composer.mood-composer .publish-bottom-button {
    width: 100% !important;
}
.post-composer.mood-composer .mood-nav {
    width: 100% !important;
    margin-inline: 0 !important;
}
.post-composer.mood-composer .mood-hero-picker,
.post-composer.mood-composer .external-picker-actions,
.post-composer.mood-composer .post-options {
    width: 100% !important;
    overflow-x: hidden !important;
}
.post-composer.mood-composer .color-choice-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none;
}
.post-composer.mood-composer .color-choice-row::-webkit-scrollbar {
    display: none;
}
@media (max-width: 520px) {
    .app-shell:has(.mood-post-shell) {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: clip !important;
    }
    .post-composer.mood-composer {
        padding: 14px !important;
        border-radius: 22px !important;
    }
    .post-composer.mood-composer .mood-hero-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    .post-composer.mood-composer .mood-choice {
        min-height: 68px !important;
    }
    .post-composer.mood-composer .post-options {
        grid-template-columns: 1fr !important;
    }
}



/* Create post media controls: keep music/GIF/image area inside the phone width */
.post-composer.mood-composer .external-picker-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.post-composer.mood-composer .external-picker-trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    min-height: 46px !important;
}
.post-composer.mood-composer .media-drop,
.post-composer.mood-composer .upload-preview,
.post-composer.mood-composer .attached-mini-card,
.post-composer.mood-composer .attached-gif-preview,
.post-composer.mood-composer .upload-preview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.post-composer.mood-composer .attached-mini-card,
.post-composer.mood-composer .upload-preview-card {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
}
.post-composer.mood-composer .attached-mini-card span,
.post-composer.mood-composer .attached-mini-card strong,
.post-composer.mood-composer .attached-mini-card small,
.post-composer.mood-composer .upload-preview-card span,
.post-composer.mood-composer .upload-preview-card strong,
.post-composer.mood-composer .upload-preview-card small {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.post-composer.mood-composer .attached-gif-preview img,
.post-composer.mood-composer .upload-preview-card img {
    max-width: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 380px) {
    .post-composer.mood-composer .external-picker-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Global anti-sideways movement */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
}
body {
    position: relative !important;
}
.app-shell,
.topbar,
.mobile-nav,
.create-modal,
.notification-modal,
.growth-modal,
.external-picker-modal,
.story-viewer,
.tiktok-home,
.profile-page,
.dashboard-shell,
.chat-page-shell,
.post-create-shell,
.story-create-shell,
.single-post-shell,
.settings-layout {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
.app-shell > *,
.topbar > *,
.create-sheet,
.notification-sheet,
.growth-sheet {
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.create-modal,
.notification-modal,
.growth-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}
.create-sheet {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
}
.mobile-nav {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
}
img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}

/* Picker reliability fix: visible sheet, clean close, no body offset */
body.external-picker-open {
    position: relative !important;
    top: auto !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}
.external-picker-modal[data-external-picker-modal] {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.external-picker-modal[data-external-picker-modal][hidden] {
    display: none !important;
}
.external-picker-modal[data-external-picker-modal] .modal-backdrop {
    z-index: 1 !important;
}
.external-picker-modal[data-external-picker-modal] .external-picker-sheet {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff !important;
}
.external-picker-modal[data-external-picker-modal].is-open .external-picker-sheet {
    opacity: 1 !important;
    visibility: visible !important;
}
@media (max-width: 560px) {
    .external-picker-modal[data-external-picker-modal] .external-picker-sheet {
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}

/* Music preview player */
.attached-mini-card,
.profile-music-card {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
}
.profile-music-card.attached-mini-card {
    display: grid !important;
    width: min(340px, 100%) !important;
}
.attached-mini-card > span,
.profile-music-card > span {
    min-width: 0 !important;
}
.track-preview-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: var(--pink) !important;
    color: #fff !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(245, 0, 95, .24) !important;
    cursor: pointer !important;
}
.track-preview-button.is-playing {
    background: var(--teal) !important;
    animation: previewPulse 1s ease-in-out infinite;
}
.track-preview-button span {
    display: block;
    transform: translateX(1px);
    font-size: .82rem;
    line-height: 1;
}
.track-preview-unavailable {
    justify-self: end;
    display: inline-flex !important;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 9px;
    background: #eef2f7;
    color: #64748b !important;
    font-size: .68rem;
    font-weight: 950 !important;
    white-space: nowrap;
}
.tiktok-track-card {
    width: min(280px, calc(100vw - 110px)) !important;
    margin: 6px 0 8px !important;
    background: rgba(255,255,255,.88) !important;
    color: #111827 !important;
    border-color: rgba(255,255,255,.38) !important;
    backdrop-filter: blur(12px);
}
.tiktok-track-card strong,
.tiktok-track-card small {
    color: inherit !important;
}
.single-post-track {
    margin: 12px 0 !important;
}
.story-external-attachments .track-preview-button {
    background: var(--pink) !important;
}
@keyframes previewPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.tiktok-track-card,
.tiktok-track-card .track-preview-button {
    position: relative !important;
    z-index: 14 !important;
    pointer-events: auto !important;
}

/* iTunes preview source */
.attached-mini-card,
.profile-music-card {
    grid-template-columns: 48px minmax(0, 1fr) auto auto auto !important;
}
.track-official-link {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 9px;
    background: #111827;
    color: #fff !important;
    font-size: .68rem;
    font-weight: 950;
    white-space: nowrap;
}
@media (max-width: 420px) {
    .attached-mini-card,
    .profile-music-card {
        grid-template-columns: 46px minmax(0, 1fr) auto !important;
    }
    .track-official-link {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: -4px;
    }
}

/* Feed music strip: autoplay preview + marquee below quick comment */
.nearby-feed.tiktok-feed .tiktok-track-card {
    position: absolute !important;
    left: 14px !important;
    right: 86px !important;
    bottom: 18px !important;
    z-index: 13 !important;
    width: auto !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 30px !important;
    gap: 7px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 999px !important;
    background: rgba(17,24,39,.46) !important;
    color: #fff !important;
    backdrop-filter: blur(14px);
    overflow: hidden !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > span {
    display: flex !important;
    gap: 16px;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > span::after {
    content: attr(data-marquee-copy);
}
.nearby-feed.tiktok-feed .tiktok-track-card strong,
.nearby-feed.tiktok-feed .tiktok-track-card small {
    display: inline !important;
    flex: 0 0 auto;
    color: #fff !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    animation: recadinMusicMarquee 9s linear infinite;
}
.nearby-feed.tiktok-feed .tiktok-track-card small::before {
    content: ' - ';
}
.nearby-feed.tiktok-feed .tiktok-track-card .track-preview-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    box-shadow: none !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card .track-official-link,
.nearby-feed.tiktok-feed .tiktok-track-card .track-preview-unavailable {
    display: none !important;
}
.nearby-feed.tiktok-feed .quick-comment-form {
    bottom: 58px !important;
}
.nearby-feed.tiktok-feed .tiktok-actions {
    bottom: 112px !important;
}
@keyframes recadinMusicMarquee {
    0% { transform: translateX(0); }
    45% { transform: translateX(0); }
    100% { transform: translateX(-42%); }
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed .tiktok-track-card {
        left: 12px !important;
        right: 74px !important;
        bottom: 14px !important;
    }
    .nearby-feed.tiktok-feed .quick-comment-form {
        bottom: 54px !important;
    }
}

/* Final feed music marquee: one-line strip below quick comment */
.nearby-feed.tiktok-feed .tiktok-track-card > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    animation: recadinMusicMarquee 10s linear infinite !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > span::after {
    content: attr(data-marquee-copy);
    flex: 0 0 auto;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.nearby-feed.tiktok-feed .tiktok-track-card strong,
.nearby-feed.tiktok-feed .tiktok-track-card small {
    animation: none !important;
    flex: 0 0 auto !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card .track-official-link,
.nearby-feed.tiktok-feed .tiktok-track-card .track-preview-unavailable {
    display: none !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card .track-preview-button.is-playing {
    background: var(--teal) !important;
}
/* Story grouping and auto-advance polish */
.story-progress-group {
    display: grid !important;
    grid-template-columns: repeat(var(--story-count, 1), minmax(0, 1fr));
    gap: 5px !important;
    background: transparent !important;
    height: 5px !important;
}
.story-progress-group span {
    position: relative;
    display: block !important;
    height: 5px !important;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.35);
}
.story-progress-group span > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: #fff;
}
.story-progress-group span.is-done > i { width: 100%; }
.story-progress-group span.is-active > i { animation: storyProgressFill var(--story-duration, 15s) linear forwards; }
.story-bubbles-home .person-bubble small { position: relative; }
.story-bubbles-home .person-bubble small b {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: .62rem;
    font-weight: 950;
}
@keyframes storyProgressFill { to { width: 100%; } }

/* Questions inbox: cleaner social cards */
.questions-page { width: min(760px, 100%); margin: 0 auto 80px; }
.questions-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--pink), #ff5d8d 58%, var(--teal));
    color: #fff;
    box-shadow: 0 18px 44px rgba(245,0,95,.18);
}
.questions-hero::after {
    content: "recadin";
    position: absolute;
    right: 22px;
    bottom: -12px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 4.8rem;
    opacity: .2;
}
.questions-kicker { font-weight: 950; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.questions-hero h1 { position: relative; z-index: 1; margin: 8px 0; font-size: clamp(2rem, 9vw, 3.5rem); line-height: .95; }
.questions-hero p { position: relative; z-index: 1; margin: 0; max-width: 420px; line-height: 1.6; color: rgba(255,255,255,.88); }
.question-inbox-list { display: grid; gap: 14px; }
.question-inbox-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(17,24,39,.06);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(17,24,39,.08);
}
.question-inbox-card.is-answered { background: linear-gradient(135deg, #fff, #effdf9); border-color: rgba(0,191,179,.22); }
.question-inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 42px; }
.question-inbox-top span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(245,0,95,.1);
    color: var(--pink);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}
.question-inbox-top small, .question-sender { color: #64748b; font-weight: 850; }
.question-inbox-card h2 { margin: 0; font-size: clamp(1.2rem, 5vw, 1.7rem); line-height: 1.15; }
.question-sender { margin: -5px 0 0; }
.question-answer-form textarea { min-height: 118px; border-radius: 18px; background: #f8fbfa; }
.question-answer-form .btn { width: 100%; min-height: 48px; }
.question-posted-note {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    background: #eaf9f6;
    color: #0f766e;
}
.question-posted-note strong { color: #00a79d; }
.question-posted-note p { margin: 0; color: #111827; font-weight: 850; line-height: 1.45; }
.question-delete-form { position: absolute; top: 14px; right: 14px; margin: 0; }
.question-delete-form button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #fff1f6;
    color: var(--pink);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

/* Teen profile editor */
.profile-edit-page {
    width: min(1060px, 100%);
    margin: 0 auto 90px;
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: start;
}
.profile-edit-preview {
    position: sticky;
    top: 88px;
    min-height: 520px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 28px 22px;
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: radial-gradient(circle at 22% 8%, var(--preview-accent), transparent 32%), radial-gradient(circle at 88% 12%, rgba(255,255,255,.2), transparent 28%), linear-gradient(160deg, var(--preview-primary), #101827);
    box-shadow: 0 24px 70px rgba(17,24,39,.18);
}
.profile-edit-preview::after {
    content: "recadin";
    position: absolute;
    right: 18px;
    bottom: -8px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 4.8rem;
    opacity: .16;
}
.edit-preview-kicker, .edit-preview-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-weight: 900;
}
.edit-preview-avatar { position: relative; z-index: 1; width: 118px; height: 118px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); overflow: hidden; background: rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.edit-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.edit-preview-avatar strong { display: grid; place-items: center; width: 100%; height: 100%; font-size: 3rem; }
.profile-edit-preview h1 { position: relative; z-index: 1; margin: 8px 0 0; font-size: clamp(2.2rem, 7vw, 4rem); line-height: .9; }
.profile-edit-preview p { position: relative; z-index: 1; margin: 0; font-weight: 900; }
.edit-preview-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(320px, 100%); margin-top: 10px; }
.edit-preview-actions a { min-height: 42px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.92); color: #111827; font-weight: 950; }
.profile-edit-stack { display: grid; gap: 14px; }
.profile-edit-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(17,24,39,.06);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17,24,39,.08);
}
.edit-section-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.edit-section-head > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 950; }
.edit-section-head h2 { margin: 0; font-size: 1.25rem; }
.edit-section-head p { margin: 2px 0 0; color: #64748b; font-weight: 750; }
.profile-edit-card input, .profile-edit-card textarea, .profile-edit-card select { border-radius: 18px; background: #f8fbfa; }
.edit-two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.edit-upload-pill { padding: 14px; border: 1px dashed rgba(0,191,179,.35); border-radius: 20px; background: #f0fbf9; color: #0f766e; }
.edit-upload-pill input { display: none; }
.edit-upload-pill span { display: inline-flex; margin-top: 8px; min-height: 34px; align-items: center; justify-content: center; border-radius: 999px; background: #fff; color: var(--pink); font-weight: 950; }
.edit-picker-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-preset-button {
    min-height: 78px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 7px;
    border: 1px solid #e8eeee;
    border-radius: 20px;
    background: #fff;
    color: #111827;
    font-weight: 900;
    cursor: pointer;
}
.theme-preset-button i { width: 44px; height: 24px; border-radius: 999px; background: linear-gradient(90deg, var(--a), var(--b)); box-shadow: 0 10px 22px rgba(17,24,39,.12); }
.theme-preset-button.is-active { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(245,0,95,.1); }
.edit-toggle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.save-profile-button { width: 100%; }
.logout-profile-card { margin: 0 0 20px; }
.logout-profile-card button {
    width: 100%;
    min-height: 50px;
    border: 1px solid #ffe0eb;
    border-radius: 999px;
    background: #fff1f6;
    color: var(--pink);
    font-weight: 950;
    cursor: pointer;
}
@media (max-width: 860px) {
    .profile-edit-page { grid-template-columns: 1fr; }
    .profile-edit-preview { position: relative; top: auto; min-height: 430px; }
}
@media (max-width: 560px) {
    .profile-edit-page { margin-top: -2px; }
    .profile-edit-card { padding: 14px; border-radius: 24px; }
    .edit-two-cols, .edit-toggle-list, .edit-picker-actions, .theme-preset-grid { grid-template-columns: 1fr !important; }
    .profile-edit-preview { min-height: 390px; border-radius: 26px; }
}
/* Story grouped progress override over legacy single-bar styles */
.story-progress-group > span {
    width: 100% !important;
    animation: none !important;
}
.story-progress-group > span > i {
    display: block !important;
}
/* Notifications modal reliability: keep it outside header and always above the app */
.notification-modal[data-notification-modal] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}
.notification-modal[data-notification-modal][hidden] { display: none !important; }
.notification-modal[data-notification-modal].is-open { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
.notification-modal[data-notification-modal] .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15,23,42,.42) !important;
    backdrop-filter: blur(8px) !important;
}
.notification-modal[data-notification-modal] .notification-sheet {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 76px !important;
    width: min(390px, calc(100vw - 24px)) !important;
    max-height: min(72dvh, 650px) !important;
    transform: translateX(-50%) translateY(-8px) scale(.98) !important;
    opacity: 0 !important;
    border-radius: 28px !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 18px !important;
}
.notification-modal[data-notification-modal].is-open .notification-sheet {
    transform: translateX(-50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
}
.notification-modal[data-notification-modal] .mini-notifications {
    max-height: calc(min(72dvh, 650px) - 132px) !important;
    overflow: auto !important;
    padding-right: 2px !important;
}
.notification-modal[data-notification-modal] .notification-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    background: #fff;
}
@media (max-width: 520px) {
    .notification-modal[data-notification-modal] .notification-sheet {
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 22px) !important;
        max-height: 76dvh !important;
        border-radius: 30px !important;
    }
    .notification-modal[data-notification-modal] .mini-notifications {
        max-height: calc(76dvh - 136px) !important;
    }
}
/* Compact profile colors, avatar menu and story rail spacing fixes */
.profile-edit-page .theme-preset-grid,
.profile-edit-card .theme-preset-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
.profile-edit-page .theme-preset-button {
    min-height: 62px !important;
    padding: 8px 4px !important;
    border-radius: 16px !important;
    gap: 5px !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
}
.profile-edit-page .theme-preset-button i {
    width: 38px !important;
    height: 20px !important;
}
@media (max-width: 560px) {
    .profile-edit-page .theme-preset-grid,
    .profile-edit-card .theme-preset-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.top-avatar-menu {
    position: relative !important;
    z-index: 100002 !important;
    overflow: visible !important;
}
.topbar,
.app-topbar,
.topbar-actions {
    overflow: visible !important;
}
.avatar-dropdown {
    position: fixed !important;
    top: 70px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    z-index: 100003 !important;
    min-width: 178px !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.22) !important;
}
@media (max-width: 520px) {
    .avatar-dropdown {
        top: 66px !important;
        right: 12px !important;
    }
}

.tiktok-home {
    --recadin-story-space: 76px !important;
    --recadin-top-space: 62px !important;
}
.tiktok-home .floating-story-rail,
.floating-story-rail {
    top: 58px !important;
    min-height: 78px !important;
    margin: 0 -12px 4px !important;
    padding: 6px 12px 4px !important;
    border-radius: 0 0 18px 18px !important;
}
.floating-story-rail .people-bubbles,
.story-bubbles-home {
    gap: 14px !important;
    padding: 0 6px !important;
    align-items: start !important;
}
.floating-story-rail .person-bubble span,
.floating-story-rail .person-bubble img {
    width: 56px !important;
    height: 56px !important;
}
.floating-story-rail .person-bubble small {
    margin-top: 2px !important;
    font-size: .74rem !important;
    line-height: 1 !important;
}
.nearby-feed.tiktok-feed {
    margin-top: 4px !important;
}
@media (max-width: 760px) {
    .tiktok-home { --recadin-story-space: 76px !important; --recadin-top-space: 62px !important; }
    .tiktok-home .floating-story-rail,
    .floating-story-rail {
        top: 56px !important;
        min-height: 76px !important;
        padding-top: 5px !important;
        padding-bottom: 3px !important;
    }
    .floating-story-rail .person-bubble span,
    .floating-story-rail .person-bubble img {
        width: 54px !important;
        height: 54px !important;
    }
}
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    top: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 4px 12px 2px !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble span,
body.story-rail-at-top .floating-story-rail .person-bubble img {
    width: 46px !important;
    height: 46px !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble small {
    font-size: .68rem !important;
    margin-top: 1px !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed,
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - 66px - var(--recadin-nav-space) - 4px) !important;
}
/* Post formats: optional mood, music-only and GIF over selected color */
.mood-choice input[value=""] + span {
    background: #fff !important;
    color: var(--pink) !important;
    border-color: rgba(245,0,95,.22) !important;
}
.gif-post-shell {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 18px !important;
    padding: 42px 28px 148px !important;
}
.gif-post-shell h3 {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(1.7rem, 8vw, 3.4rem) !important;
    line-height: 1.05 !important;
}
.post-attached-gif-display {
    width: min(78%, 360px) !important;
    max-height: 36svh !important;
    border-radius: 26px !important;
    object-fit: cover !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.24) !important;
    border: 2px solid rgba(255,255,255,.46) !important;
}
.gif-post-shell h3 + .post-attached-gif-display {
    width: min(68%, 320px) !important;
    max-height: 28svh !important;
}
.music-only-post {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 42px 28px 148px !important;
}
.music-only-cover {
    position: relative;
    width: min(58vw, 230px);
    aspect-ratio: 1;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    border: 2px solid rgba(255,255,255,.5);
}
.music-only-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-only-cover span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(17,24,39,.56);
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    backdrop-filter: blur(10px);
}
.music-only-post h3 {
    margin: 6px 0 0 !important;
    max-width: 92% !important;
    text-align: center !important;
    font-size: clamp(1.8rem, 8vw, 3.6rem) !important;
}
.music-only-post p { margin: 0 !important; color: rgba(255,255,255,.88) !important; font-weight: 900 !important; }
.post-attached-gif.post-attached-gif {
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--pink);
}
.post-attached-gif.post-attached-gif img {
    width: min(100%, 360px);
    max-height: 360px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(17,24,39,.18);
}
@media (max-width: 520px) {
    .gif-post-shell { padding: 36px 24px 138px !important; }
    .post-attached-gif-display { width: min(84%, 320px) !important; max-height: 34svh !important; }
    .gif-post-shell h3 + .post-attached-gif-display { width: min(72%, 290px) !important; max-height: 26svh !important; }
    .music-only-cover { width: min(62vw, 220px); border-radius: 28px; }
}
/* Final requested polish: story rail up, clean composer, visible GIFs, lower author block */
.app-shell:has(.tiktok-home) {
    padding-top: 0 !important;
}
.tiktok-home {
    margin-top: 0 !important;
    --recadin-story-space: 68px !important;
    --recadin-top-space: 0px !important;
}
.tiktok-home .floating-story-rail,
.floating-story-rail {
    position: sticky !important;
    top: 0 !important;
    min-height: 68px !important;
    height: 68px !important;
    margin: 0 -12px 2px !important;
    padding: 3px 12px 2px !important;
    border-radius: 0 0 16px 16px !important;
    align-content: center !important;
}
.floating-story-rail .people-bubbles,
.story-bubbles-home {
    align-items: center !important;
    gap: 12px !important;
    padding: 0 6px !important;
}
.floating-story-rail .person-bubble span,
.floating-story-rail .person-bubble img {
    width: 50px !important;
    height: 50px !important;
}
.floating-story-rail .person-bubble small {
    margin-top: 1px !important;
    font-size: .7rem !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail,
body.story-rail-at-top .floating-story-rail {
    height: 60px !important;
    min-height: 60px !important;
    padding: 2px 12px 1px !important;
}
body.story-rail-at-top .floating-story-rail .person-bubble span,
body.story-rail-at-top .floating-story-rail .person-bubble img {
    width: 42px !important;
    height: 42px !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed,
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - 60px - var(--recadin-nav-space) - 4px) !important;
}

.nearby-feed.tiktok-feed .post-attached-gif-display {
    width: min(88%, 390px) !important;
    height: auto !important;
    max-height: 44svh !important;
    object-fit: contain !important;
    background: rgba(255,255,255,.14) !important;
}
.nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
    width: min(78%, 340px) !important;
    max-height: 34svh !important;
}
.nearby-feed.tiktok-feed .gif-post-shell {
    gap: 14px !important;
}

.nearby-feed.tiktok-feed .tiktok-overlay {
    bottom: 104px !important;
    padding: 0 82px 0 16px !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.42)) !important;
}
.nearby-feed.tiktok-feed .floating-author {
    margin-bottom: 5px !important;
}
.nearby-feed.tiktok-feed .comment-ticker {
    margin: 0 !important;
    height: 30px !important;
    max-height: 30px !important;
    width: min(330px, calc(100vw - 128px)) !important;
    max-width: min(330px, calc(100vw - 128px)) !important;
}
.nearby-feed.tiktok-feed .comment-ticker p {
    min-height: 28px !important;
    padding: 4px 9px !important;
}
@media (max-width: 520px) {
    .app-shell:has(.tiktok-home) { padding-top: 0 !important; }
    .tiktok-home .floating-story-rail,
    .floating-story-rail {
        height: 66px !important;
        min-height: 66px !important;
    }
    .nearby-feed.tiktok-feed .tiktok-overlay {
        bottom: 100px !important;
        padding-right: 76px !important;
    }
}
/* Absolute final story rail position: no gap under topbar */
.topbar.force-visible ~ .app-shell:has(.tiktok-home),
body:has(.topbar.force-visible) .app-shell:has(.tiktok-home),
.app-shell:has(.tiktok-home) {
    padding-top: 0 !important;
}
.topbar.force-visible ~ .app-shell .tiktok-home .floating-story-rail,
body:has(.topbar.force-visible) .tiktok-home .floating-story-rail,
body:not(.story-rail-at-top) .tiktok-home .floating-story-rail,
.tiktok-home .floating-story-rail {
    position: sticky !important;
    top: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    height: 66px !important;
    min-height: 66px !important;
    padding-top: 3px !important;
    padding-bottom: 2px !important;
}
.topbar.force-visible ~ .app-shell .nearby-feed.tiktok-feed,
body:has(.topbar.force-visible) .nearby-feed.tiktok-feed,
body:not(.story-rail-at-top) .nearby-feed.tiktok-feed {
    margin-top: 2px !important;
}
/* Layout fix: first feed card must fit between topbar, story rail and bottom nav */
.tiktok-home {
    --recadin-top-space: 72px !important;
    --recadin-story-space: 82px !important;
    --recadin-nav-space: 90px !important;
    --recadin-feed-gap: 10px !important;
}
.tiktok-home .floating-story-rail,
body:not(.story-rail-at-top) .tiktok-home .floating-story-rail,
.topbar.force-visible ~ .app-shell .tiktok-home .floating-story-rail,
body:has(.topbar.force-visible) .tiktok-home .floating-story-rail {
    position: sticky !important;
    top: 0 !important;
    height: var(--recadin-story-space) !important;
    min-height: var(--recadin-story-space) !important;
    margin: 0 -12px var(--recadin-feed-gap) !important;
    padding: 7px 12px 10px !important;
    overflow: visible !important;
    border-radius: 0 0 18px 18px !important;
}
.tiktok-home .floating-story-rail .people-bubbles,
.tiktok-home .story-bubbles-home {
    height: 70px !important;
    min-height: 70px !important;
    overflow: visible !important;
    align-items: flex-start !important;
    padding: 0 8px !important;
}
.tiktok-home .floating-story-rail .person-bubble {
    min-width: 70px !important;
    min-height: 70px !important;
    overflow: visible !important;
}
.tiktok-home .floating-story-rail .person-bubble span,
.tiktok-home .floating-story-rail .person-bubble img {
    width: 52px !important;
    height: 52px !important;
}
.tiktok-home .floating-story-rail .person-bubble small {
    display: block !important;
    margin-top: 3px !important;
    line-height: 1.05 !important;
}
.nearby-feed.tiktok-feed,
body:not(.story-rail-at-top) .nearby-feed.tiktok-feed,
.topbar.force-visible ~ .app-shell .nearby-feed.tiktok-feed,
body:has(.topbar.force-visible) .nearby-feed.tiktok-feed {
    height: calc(100svh - var(--recadin-top-space) - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-feed-gap)) !important;
    min-height: 430px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    border-radius: 22px !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
body:not(.story-rail-at-top) .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
.topbar.force-visible ~ .app-shell .nearby-feed.tiktok-feed > .nearby-post.tiktok-post,
body:has(.topbar.force-visible) .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - var(--recadin-top-space) - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-feed-gap)) !important;
    min-height: 430px !important;
    margin: 0 0 12px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: transparent !important;
    scroll-snap-align: start !important;
}
body.story-rail-at-top .tiktok-home {
    --recadin-top-space: 0px !important;
    --recadin-story-space: 62px !important;
    --recadin-feed-gap: 8px !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail {
    height: var(--recadin-story-space) !important;
    min-height: var(--recadin-story-space) !important;
    margin-bottom: var(--recadin-feed-gap) !important;
    padding: 3px 12px 6px !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed,
body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-feed-gap)) !important;
    min-height: 500px !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    background: transparent !important;
}
.nearby-feed.tiktok-feed .text-only-post,
.nearby-feed.tiktok-feed .gif-post-shell,
.nearby-feed.tiktok-feed .music-only-post {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: inherit !important;
    box-sizing: border-box !important;
    background: inherit;
}
.nearby-feed.tiktok-feed .gif-post-shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: center !important;
    place-items: center !important;
    gap: 14px !important;
    padding: 50px 24px 128px !important;
    text-align: center !important;
}
.nearby-feed.tiktok-feed .gif-post-shell h3 {
    justify-self: start !important;
    width: 100% !important;
    max-width: 88% !important;
    margin: 0 auto 0 0 !important;
    text-align: left !important;
}
.nearby-feed.tiktok-feed .post-attached-gif-display,
.nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
    align-self: center !important;
    justify-self: center !important;
    display: block !important;
    width: min(86%, 360px) !important;
    height: auto !important;
    max-height: 34svh !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 24px !important;
}
.nearby-feed.tiktok-feed .tiktok-overlay {
    bottom: 92px !important;
    padding: 0 82px 0 16px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 44%, rgba(0,0,0,.54) 100%) !important;
}
.nearby-feed.tiktok-feed .tiktok-actions {
    bottom: 116px !important;
}
.nearby-feed.tiktok-feed .quick-comment-form {
    left: 16px !important;
    right: 86px !important;
    bottom: 22px !important;
    z-index: 18 !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card {
    left: 16px !important;
    right: 86px !important;
    bottom: 62px !important;
    z-index: 18 !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
    bottom: 102px !important;
}
.tiktok-feed.is-fullscreen-feed,
.tiktok-feed.is-fullscreen-feed .tiktok-post,
.tiktok-feed.is-fullscreen-feed .tiktok-post.is-fullscreen {
    height: 100svh !important;
    min-height: 100svh !important;
    border-radius: 0 !important;
}
.tiktok-feed.is-fullscreen-feed .gif-post-shell,
.tiktok-feed.is-fullscreen-feed .text-only-post,
.tiktok-feed.is-fullscreen-feed .music-only-post {
    padding-bottom: 154px !important;
}
@media (max-width: 520px) {
    .tiktok-home {
        --recadin-top-space: 72px !important;
        --recadin-story-space: 82px !important;
        --recadin-nav-space: 88px !important;
    }
    .nearby-feed.tiktok-feed,
    .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
        min-height: 420px !important;
    }
    body.story-rail-at-top .nearby-feed.tiktok-feed,
    body.story-rail-at-top .nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
        min-height: 500px !important;
    }
    .nearby-feed.tiktok-feed .gif-post-shell {
        padding: 44px 22px 126px !important;
    }
    .nearby-feed.tiktok-feed .post-attached-gif-display,
    .nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
        width: min(88%, 320px) !important;
        max-height: 32svh !important;
    }
    .nearby-feed.tiktok-feed .quick-comment-form {
        right: 82px !important;
        bottom: 20px !important;
    }
    .nearby-feed.tiktok-feed .tiktok-track-card {
        right: 82px !important;
        bottom: 60px !important;
    }
    .nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
        bottom: 100px !important;
    }
}
/* Keep story bubbles visible outside the rail rounded edge */
.app-shell:has(.tiktok-home),
.tiktok-home {
    overflow: visible !important;
}
/* Feed visual cleanup: story bubbles only, solid post color and natural media */
.tiktok-home {
    --recadin-story-space: 66px !important;
    --recadin-feed-gap: 8px !important;
}
.tiktok-home .floating-story-rail,
body:not(.story-rail-at-top) .tiktok-home .floating-story-rail,
.topbar.force-visible ~ .app-shell .tiktok-home .floating-story-rail,
body:has(.topbar.force-visible) .tiktok-home .floating-story-rail {
    height: var(--recadin-story-space) !important;
    min-height: var(--recadin-story-space) !important;
    padding: 7px 12px 7px !important;
    overflow: visible !important;
}
.tiktok-home .floating-story-rail .people-bubbles,
.tiktok-home .story-bubbles-home {
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
    overflow: visible !important;
    gap: 14px !important;
}
.tiktok-home .floating-story-rail .person-bubble,
.tiktok-home .floating-story-rail .create-story-bubble,
.tiktok-home .story-bubbles-home .person-bubble {
    min-width: 58px !important;
    width: 58px !important;
    min-height: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}
.tiktok-home .floating-story-rail .person-bubble small,
.tiktok-home .floating-story-rail .create-story-bubble small,
.tiktok-home .story-bubbles-home .person-bubble small,
.tiktok-home .story-bubbles-home .create-story-bubble small {
    display: none !important;
}
.tiktok-home .floating-story-rail .person-bubble span,
.tiktok-home .floating-story-rail .person-bubble img,
.tiktok-home .floating-story-rail .create-story-bubble span,
.tiktok-home .story-bubbles-home .person-bubble span,
.tiktok-home .story-bubbles-home .person-bubble img,
.tiktok-home .story-bubbles-home .create-story-bubble span {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
}
body.story-rail-at-top .tiktok-home {
    --recadin-story-space: 58px !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble,
body.story-rail-at-top .tiktok-home .floating-story-rail .create-story-bubble {
    min-width: 52px !important;
    width: 52px !important;
    min-height: 52px !important;
    height: 52px !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble span,
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble img,
body.story-rail-at-top .tiktok-home .floating-story-rail .create-story-bubble span {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 118px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.26) 58%, rgba(0,0,0,.42));
    border-radius: 0 0 inherit inherit;
}
.nearby-feed.tiktok-feed .tiktok-overlay,
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay,
.tiktok-overlay {
    background: none !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
    z-index: 9 !important;
}
.nearby-feed.tiktok-feed .text-only-post,
.nearby-feed.tiktok-feed .gif-post-shell,
.nearby-feed.tiktok-feed .music-only-post {
    background-color: inherit !important;
    background-image: none !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media > img:not(.post-attached-gif-display) {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: inherit !important;
}
.nearby-feed.tiktok-feed .post-attached-gif-display,
.nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.16) !important;
}
.nearby-feed.tiktok-feed .gif-post-shell {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-content: center !important;
}
.nearby-feed.tiktok-feed .quick-comment-form,
.nearby-feed.tiktok-feed .tiktok-track-card,
.nearby-feed.tiktok-feed .tiktok-actions {
    z-index: 10 !important;
}
@media (max-width: 520px) {
    .tiktok-home {
        --recadin-story-space: 66px !important;
    }
    .nearby-feed.tiktok-feed > .nearby-post.tiktok-post::after {
        height: 108px !important;
    }
}
/* Gradient stays, but only as a bottom-edge fade */
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 86px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.34) 100%) !important;
    border-radius: 0 0 22px 22px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post::after {
    height: 112px !important;
    border-radius: 0 !important;
}
.nearby-feed.tiktok-feed .tiktok-overlay,
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    background: transparent !important;
}
.nearby-feed.tiktok-feed .text-only-post,
.nearby-feed.tiktok-feed .gif-post-shell,
.nearby-feed.tiktok-feed .music-only-post {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
/* Restore selected post color while keeping the bottom gradient separate */
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post {
    background: var(--recadin-post-bg, #f5005f) !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media {
    background: var(--recadin-post-bg, #f5005f) !important;
}
.nearby-feed.tiktok-feed .text-only-post,
.nearby-feed.tiktok-feed .gif-post-shell,
.nearby-feed.tiktok-feed .music-only-post {
    background: var(--recadin-post-bg, #f5005f) !important;
    background-color: var(--recadin-post-bg, #f5005f) !important;
    background-image: none !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media > img:not(.post-attached-gif-display) {
    background: var(--recadin-post-bg, #111827) !important;
}
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post.empty-tiktok,
.nearby-feed.tiktok-feed > .nearby-post.tiktok-post.empty-tiktok .text-only-post {
    --recadin-post-bg: var(--pink);
}
/* Fullscreen/media polish: blurred image backdrop, exact GIF display and safe lower stack */
.nearby-feed.tiktok-feed .tiktok-post-media {
    isolation: isolate !important;
    display: grid !important;
    place-items: center !important;
}
.nearby-feed.tiktok-feed .post-media-blur {
    position: absolute !important;
    inset: -18px !important;
    z-index: 0 !important;
    width: calc(100% + 36px) !important;
    height: calc(100% + 36px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: blur(22px) saturate(1.15) brightness(.72) !important;
    transform: scale(1.04) !important;
    opacity: .9 !important;
    pointer-events: none !important;
}
.nearby-feed.tiktok-feed .post-media-main {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media > img:not(.post-media-blur):not(.post-media-main):not(.post-attached-gif-display) {
    object-fit: contain !important;
    object-position: center center !important;
}
.nearby-feed.tiktok-feed .gif-post-shell {
    grid-template-rows: auto minmax(0, auto) !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 42px 22px 138px !important;
}
.nearby-feed.tiktok-feed .post-attached-gif-display,
.nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
    width: auto !important;
    height: auto !important;
    max-width: min(92%, 390px) !important;
    max-height: 42svh !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    border-radius: 22px !important;
}
.nearby-feed.tiktok-feed .gif-post-shell h3 {
    max-width: min(88%, 440px) !important;
    justify-self: start !important;
}
.nearby-feed.tiktok-feed .tiktok-overlay {
    bottom: 82px !important;
    padding: 0 86px 0 18px !important;
    gap: 6px !important;
    max-height: 178px !important;
    overflow: visible !important;
}
.nearby-feed.tiktok-feed .floating-author {
    order: 1 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    min-height: 44px !important;
}
.nearby-feed.tiktok-feed .comment-ticker {
    order: 2 !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 0 8px !important;
    width: min(340px, calc(100vw - 128px)) !important;
    max-width: min(340px, calc(100vw - 128px)) !important;
}
.nearby-feed.tiktok-feed .comment-ticker p {
    max-width: 100% !important;
    white-space: nowrap !important;
}
.nearby-feed.tiktok-feed .quick-comment-form {
    bottom: 20px !important;
    min-height: 44px !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card {
    bottom: 66px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-overlay {
    bottom: 124px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
    bottom: 106px !important;
}
.nearby-feed.tiktok-feed .tiktok-actions {
    bottom: 118px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed {
    background: #000 !important;
    padding: 0 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post,
.nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post.is-fullscreen {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
.nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
.nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
.nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    border-radius: 0 !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell {
    padding: 62px 22px 152px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .post-attached-gif-display,
.nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell h3 + .post-attached-gif-display {
    max-width: min(92vw, 420px) !important;
    max-height: 48svh !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    bottom: 88px !important;
    padding-right: 88px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .quick-comment-form {
    bottom: 24px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-actions {
    bottom: 116px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
.tiktok-post.is-fullscreen .tiktok-close-fullscreen {
    right: 20px !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 2rem !important;
    z-index: 140 !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed .tiktok-overlay {
        bottom: 82px !important;
        padding-left: 16px !important;
        padding-right: 82px !important;
        max-height: 168px !important;
    }
    .nearby-feed.tiktok-feed .post-attached-gif-display,
    .nearby-feed.tiktok-feed .gif-post-shell h3 + .post-attached-gif-display {
        max-width: 90vw !important;
        max-height: 40svh !important;
    }
    .nearby-feed.tiktok-feed.is-fullscreen-feed .post-attached-gif-display,
    .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell h3 + .post-attached-gif-display {
        max-height: 46svh !important;
    }
}
/* Hard fix: photo posts use blurred photo as the actual backdrop, never the post color */
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media {
    background: #050505 !important;
    overflow: hidden !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media::before {
    content: '' !important;
    position: absolute !important;
    inset: -28px !important;
    z-index: 0 !important;
    background-image: var(--post-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: blur(24px) saturate(1.18) brightness(.72) !important;
    transform: scale(1.06) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media .post-media-blur {
    display: none !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media .post-media-main {
    position: relative !important;
    z-index: 2 !important;
    object-fit: contain !important;
    background: transparent !important;
}
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media + .reaction-float,
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media ~ .reaction-float,
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media ~ .tiktok-overlay,
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media ~ .tiktok-actions,
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media ~ .quick-comment-form,
.nearby-feed.tiktok-feed .tiktok-post-media.has-photo-media ~ .tiktok-track-card {
    position: absolute !important;
}
/* Music posts need extra lower spacing: author/comment stay above quick comment + music strip */
.nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-overlay {
    bottom: 154px !important;
    max-height: 190px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .floating-author {
    margin-bottom: 6px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .comment-ticker {
    height: 32px !important;
    min-height: 32px !important;
    margin-bottom: 0 !important;
    z-index: 12 !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
    bottom: 104px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-track-card {
    bottom: 60px !important;
}
.nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-actions {
    bottom: 154px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-overlay {
    bottom: 160px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
    bottom: 106px !important;
}
.nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-track-card {
    bottom: 62px !important;
}
@media (max-width: 520px) {
    .nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-overlay {
        bottom: 150px !important;
        padding-right: 82px !important;
    }
    .nearby-post.tiktok-post:has(.tiktok-track-card) .comment-ticker {
        width: min(310px, calc(100vw - 124px)) !important;
        max-width: min(310px, calc(100vw - 124px)) !important;
    }
}
/* Slightly larger story bubbles, still label-free */
.tiktok-home {
    --recadin-story-space: 74px !important;
}
.tiktok-home .floating-story-rail,
body:not(.story-rail-at-top) .tiktok-home .floating-story-rail,
.topbar.force-visible ~ .app-shell .tiktok-home .floating-story-rail,
body:has(.topbar.force-visible) .tiktok-home .floating-story-rail {
    height: var(--recadin-story-space) !important;
    min-height: var(--recadin-story-space) !important;
    padding: 8px 12px !important;
}
.tiktok-home .floating-story-rail .people-bubbles,
.tiktok-home .story-bubbles-home {
    height: 62px !important;
    min-height: 62px !important;
}
.tiktok-home .floating-story-rail .person-bubble,
.tiktok-home .floating-story-rail .create-story-bubble,
.tiktok-home .story-bubbles-home .person-bubble,
.tiktok-home .story-bubbles-home .create-story-bubble {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
}
.tiktok-home .floating-story-rail .person-bubble span,
.tiktok-home .floating-story-rail .person-bubble img,
.tiktok-home .floating-story-rail .create-story-bubble span,
.tiktok-home .story-bubbles-home .person-bubble span,
.tiktok-home .story-bubbles-home .person-bubble img,
.tiktok-home .story-bubbles-home .create-story-bubble span {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
}
body.story-rail-at-top .tiktok-home {
    --recadin-story-space: 64px !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble,
body.story-rail-at-top .tiktok-home .floating-story-rail .create-story-bubble {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
}
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble span,
body.story-rail-at-top .tiktok-home .floating-story-rail .person-bubble img,
body.story-rail-at-top .tiktok-home .floating-story-rail .create-story-bubble span {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
}
/* Profile: story ring on avatar and music as a tiny floating play */
.profile-avatar-wrap {
    position: relative !important;
    width: max-content !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}
.profile-avatar-wrap .profile-avatar-story-link {
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    text-decoration: none !important;
}
.profile-avatar-wrap.has-story {
    padding: 5px !important;
    border-radius: 999px !important;
    background: conic-gradient(from 210deg, var(--profile-primary), #ffea00, var(--profile-accent), var(--profile-primary)) !important;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--profile-primary) 32%, transparent) !important;
}
.profile-avatar-wrap.has-story .big-avatar {
    border: 4px solid rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.20) !important;
}
.profile-avatar-music {
    position: absolute !important;
    top: 6px !important;
    right: -12px !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid rgba(255,255,255,.94) !important;
    border-radius: 999px !important;
    background: var(--pink) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(245,0,95,.35) !important;
    cursor: pointer !important;
}
.profile-avatar-music span {
    display: block !important;
    transform: translateX(1px) !important;
    font-size: .86rem !important;
    line-height: 1 !important;
}
.profile-avatar-music.is-playing {
    background: var(--profile-accent, var(--teal)) !important;
    animation: previewPulse 1s ease-in-out infinite !important;
}
.public-profile .story-rail {
    display: none !important;
}
.public-profile .profile-actions a[href$="stories/criar"] {
    display: none !important;
}
.public-profile .bio-strip {
    justify-content: center !important;
    text-align: center !important;
}
.public-profile .bio-strip p {
    text-align: center !important;
    margin-inline: auto !important;
    max-width: 34rem !important;
}
.public-profile .bio-strip a,
.public-profile .bio-strip span {
    margin-inline: auto !important;
}
.profile-music-card {
    display: none !important;
}

/* Home music marquee: text passes behind the cover/play, not over the layout */
.nearby-feed.tiktok-feed .tiktok-track-card {
    isolation: isolate !important;
    grid-template-columns: 28px minmax(0, 1fr) 30px !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > img {
    position: relative !important;
    z-index: 4 !important;
    background: #111827 !important;
    box-shadow: 0 0 0 8px rgba(17,24,39,.58) !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card .track-preview-button {
    position: relative !important;
    z-index: 4 !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > span {
    position: relative !important;
    z-index: 1 !important;
    margin-left: -18px !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 4px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 4px), transparent 100%) !important;
}
.nearby-feed.tiktok-feed .tiktok-track-card > span::before {
    content: '' !important;
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 42px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(17,24,39,.70), rgba(17,24,39,0)) !important;
}
@media (max-width: 520px) {
    .profile-avatar-music {
        right: -10px !important;
        top: 4px !important;
    }
}
/* Profile hero refresh: compact, teen gradient and cleaner identity line */
.public-profile .profile-cover {
    min-height: 0 !important;
    padding: 24px 18px 18px !important;
    gap: 9px !important;
    border-radius: 0 0 34px 34px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 16% 8%, rgba(255,234,0,.95) 0 24%, transparent 25%),
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--profile-accent) 82%, #ffffff 4%) 0 28%, transparent 29%),
        linear-gradient(145deg, color-mix(in srgb, var(--profile-primary) 82%, #111827 18%) 0%, #081b14 54%, #04110c 100%) !important;
    box-shadow: 0 18px 52px rgba(17,24,39,.12) !important;
}
.public-profile .profile-cover::before {
    width: 210px !important;
    height: 210px !important;
    right: -62px !important;
    bottom: -84px !important;
    background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 68%) !important;
}
.public-profile .profile-cover::after {
    font-size: 3.55rem !important;
    right: 14px !important;
    bottom: -13px !important;
    color: rgba(255,255,255,.13) !important;
}
.public-profile .profile-head {
    gap: 5px !important;
    margin-top: 0 !important;
}
.public-profile .profile-avatar-wrap {
    transform: scale(.9) !important;
    margin-bottom: -4px !important;
}
.public-profile .big-avatar {
    width: 94px !important;
    height: 94px !important;
}
.public-profile .profile-head h1 {
    max-width: min(92vw, 420px) !important;
    margin: 4px auto 0 !important;
    font-size: clamp(1.9rem, 8vw, 2.65rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
}
.profile-identity-line {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 2px !important;
}
.profile-identity-line > p,
.public-profile .profile-head > p {
    width: auto !important;
    margin: 0 !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
    backdrop-filter: blur(12px) !important;
}
.profile-identity-line .profile-vip-badge {
    margin: 0 !important;
    min-height: 30px !important;
    padding: 4px 9px 4px 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    background: rgba(255,234,0,.92) !important;
    color: #101827 !important;
    box-shadow: 0 10px 24px rgba(255,234,0,.22) !important;
}
.profile-identity-line .profile-vip-badge span {
    min-height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: .68rem !important;
}
.profile-identity-line .profile-vip-badge strong {
    font-size: .78rem !important;
    line-height: 1 !important;
}
.public-profile .profile-counts {
    min-height: 36px !important;
    padding: 0 16px !important;
    margin-top: 4px !important;
    font-size: .86rem !important;
}
.public-profile .status-pill {
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: .84rem !important;
}
.public-profile .profile-actions {
    gap: 8px !important;
    margin-top: 4px !important;
}
.public-profile .profile-actions .outline-pill {
    min-height: 38px !important;
    padding: 0 15px !important;
    font-size: .82rem !important;
}
.public-profile .bio-strip {
    margin-top: 10px !important;
}
@media (max-width: 520px) {
    .public-profile .profile-cover {
        padding-top: 22px !important;
        border-radius: 0 0 28px 28px !important;
    }
    .public-profile .profile-head h1 {
        font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
        max-width: 88vw !important;
    }
    .public-profile .profile-avatar-wrap {
        transform: scale(.86) !important;
        margin-bottom: -8px !important;
    }
}
/* Public profile aligned with edit-profile preview */
.public-profile .profile-cover {
    background:
        radial-gradient(circle at 22% 8%, var(--profile-accent), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.2), transparent 28%),
        linear-gradient(160deg, var(--profile-primary), #101827) !important;
    color: #fff !important;
}
.public-profile .profile-actions {
    width: min(320px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 6px auto 0 !important;
}
.public-profile .profile-actions form {
    display: contents !important;
}
.public-profile .profile-actions .outline-pill {
    width: 100% !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(255,255,255,.72) !important;
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.22) !important;
}
.public-profile .profile-actions .profile-share-button {
    grid-column: 1 / -1 !important;
    background: rgba(255,255,255,.94) !important;
    color: #10201a !important;
    border-color: rgba(255,255,255,.98) !important;
    text-shadow: none !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}
.public-profile .profile-actions .profile-question-shortcut {
    background: rgba(255,255,255,.14) !important;
}
.public-profile .profile-counts {
    background: rgba(255,255,255,.94) !important;
    color: #111827 !important;
    text-shadow: none !important;
}
.public-profile .profile-counts span {
    background: var(--profile-primary) !important;
}
.public-profile .profile-head h1,
.public-profile .profile-identity-line,
.public-profile .profile-counts,
.public-profile .profile-actions {
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 520px) {
    .public-profile .profile-actions {
        width: min(322px, 100%) !important;
    }
}
/* Profile action refinements */
.public-profile .profile-actions .profile-login-follow {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}
.public-profile .profile-actions .profile-question-shortcut::before {
    content: none !important;
    display: none !important;
}
.public-profile .profile-actions .profile-question-shortcut {
    gap: 0 !important;
}
/* Music-only posts: smaller cover and higher content so author stays readable */
.nearby-feed.tiktok-feed .music-only-post {
    align-content: center !important;
    justify-items: center !important;
    padding: 34px 28px 198px !important;
    transform: translateY(-18px) !important;
}
.nearby-feed.tiktok-feed .music-only-cover {
    width: min(46vw, 176px) !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.24) !important;
}
.nearby-feed.tiktok-feed .music-only-post h3 {
    margin-top: 4px !important;
    font-size: clamp(1.45rem, 6.8vw, 2.7rem) !important;
    max-width: 86% !important;
}
.nearby-feed.tiktok-feed .music-only-post p {
    font-size: .92rem !important;
}
.nearby-feed.tiktok-feed .music-only-post ~ .tiktok-overlay,
.nearby-post.tiktok-post:has(.music-only-post) .tiktok-overlay {
    bottom: 138px !important;
}
.nearby-post.tiktok-post:has(.music-only-post):has(.tiktok-track-card) .tiktok-overlay {
    bottom: 156px !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed .music-only-post {
        padding-bottom: 190px !important;
        transform: translateY(-14px) !important;
    }
    .nearby-feed.tiktok-feed .music-only-cover {
        width: min(44vw, 160px) !important;
    }
}
/* Hard fullscreen fix: no clipped card, everything inside viewport */
body.post-focus-mode,
body.post-focus-mode .app-shell {
    overflow: hidden !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 100000 !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    background: var(--recadin-post-bg, #f5005f) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 70px 26px 236px !important;
    transform: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-cover {
    width: min(42vw, 170px) !important;
    max-width: 170px !important;
    border-radius: 24px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post h3 {
    max-width: 82vw !important;
    font-size: clamp(1.55rem, 7vw, 2.75rem) !important;
    text-align: center !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    left: 0 !important;
    right: 0 !important;
    bottom: 98px !important;
    max-height: 132px !important;
    padding: 0 88px 0 18px !important;
    z-index: 12 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-overlay,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.music-only-post) .tiktok-overlay {
    bottom: 152px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .quick-comment-form {
    left: 16px !important;
    right: 86px !important;
    bottom: 22px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .quick-comment-form {
    bottom: 104px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-track-card {
    left: 16px !important;
    right: 86px !important;
    bottom: 60px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-actions {
    right: 12px !important;
    bottom: 138px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.tiktok-track-card) .tiktok-actions,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .nearby-post.tiktok-post:has(.music-only-post) .tiktok-actions {
    bottom: 174px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .reaction-float {
    top: 78px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen {
    display: block !important;
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 100010 !important;
}
@media (max-width: 520px) {
    body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
        padding-top: 66px !important;
        padding-bottom: 230px !important;
    }
    body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-cover {
        width: min(44vw, 160px) !important;
    }
    body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
        padding-right: 82px !important;
    }
}
/* Final fullscreen stability: use JS-synced pixel height and naked X */
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post {
    height: var(--recadin-fullscreen-h, 100dvh) !important;
    min-height: var(--recadin-fullscreen-h, 100dvh) !important;
    max-height: var(--recadin-fullscreen-h, 100dvh) !important;
    scroll-snap-stop: always !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    height: var(--recadin-fullscreen-h, 100dvh) !important;
    min-height: var(--recadin-fullscreen-h, 100dvh) !important;
    max-height: var(--recadin-fullscreen-h, 100dvh) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen,
button.tiktok-close-fullscreen[data-close-post-fullscreen] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    color: #fff !important;
    font-size: 2.05rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.32) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen::before,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen::after {
    content: none !important;
    display: none !important;
}
/* Definitive fullscreen close visibility and viewport clipping fix */
.nearby-feed.tiktok-feed:not(.is-fullscreen-feed) .tiktok-close-fullscreen,
body:not(.post-focus-mode) .tiktok-close-fullscreen,
body:not(.post-focus-mode) button.tiktok-close-fullscreen[data-close-post-fullscreen] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    display: block !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-padding: 0 !important;
    overscroll-behavior: contain !important;
    contain: strict !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post.is-fullscreen {
    flex: 0 0 var(--recadin-fullscreen-h, 100dvh) !important;
    display: block !important;
    top: auto !important;
    transform: none !important;
    border-radius: 0 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen[data-close-post-fullscreen] {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;
    font: 950 31px/24px Arial, Helvetica, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen[data-close-post-fullscreen]:hover,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen[data-close-post-fullscreen]:focus,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed button.tiktok-close-fullscreen[data-close-post-fullscreen]:active {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Fullscreen final pass: global close and full-bleed active cards */
.global-post-close {
    display: none;
}
body.post-focus-mode .global-post-close {
    display: block !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font: 950 32px/28px Arial, Helvetica, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-close-fullscreen {
    display: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    contain: none !important;
    background: #000 !important;
    scroll-snap-type: y mandatory !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post.is-fullscreen {
    background: var(--recadin-post-bg, #f5005f) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: var(--recadin-post-bg, #f5005f) !important;
    pointer-events: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    z-index: 1 !important;
    border-radius: 0 !important;
    background: var(--recadin-post-bg, #f5005f) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    padding: 54px 24px 244px !important;
    align-content: center !important;
    transform: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-cover {
    width: min(38vw, 150px) !important;
    max-width: 150px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post h3 {
    font-size: clamp(1.35rem, 6vw, 2.25rem) !important;
    margin-top: 2px !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post p {
    font-size: .9rem !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    bottom: 158px !important;
    max-height: 118px !important;
    z-index: 12 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .quick-comment-form {
    bottom: 104px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-track-card {
    bottom: 60px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-actions {
    bottom: 164px !important;
    z-index: 14 !important;
}
@media (max-width: 520px) {
    body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-cover {
        width: min(40vw, 146px) !important;
    }
    body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
        padding-top: 48px !important;
        padding-bottom: 240px !important;
    }
}
/* Force every fullscreen post to be a complete viewport page, even when swiping back */
html:has(body.post-focus-mode),
body.post-focus-mode {
    height: var(--recadin-fullscreen-h, 100vh) !important;
    max-height: var(--recadin-fullscreen-h, 100vh) !important;
    overflow: hidden !important;
    background: #000 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    height: var(--recadin-fullscreen-h, 100vh) !important;
    min-height: var(--recadin-fullscreen-h, 100vh) !important;
    max-height: var(--recadin-fullscreen-h, 100vh) !important;
    scroll-snap-type: y mandatory !important;
    scroll-behavior: auto !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: var(--recadin-fullscreen-h, 100vh) !important;
    min-height: var(--recadin-fullscreen-h, 100vh) !important;
    max-height: var(--recadin-fullscreen-h, 100vh) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    transform: translateZ(0) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: var(--recadin-post-bg, #f5005f) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    inset: 0 !important;
    width: 100vw !important;
    height: var(--recadin-fullscreen-h, 100vh) !important;
    min-height: var(--recadin-fullscreen-h, 100vh) !important;
    max-height: var(--recadin-fullscreen-h, 100vh) !important;
}
/* Recadin fullscreen hard reset - CSS owns the viewport, JS only opens/closes */
.global-post-close,
.tiktok-close-fullscreen {
    display: none !important;
}
body.post-focus-mode,
html:has(body.post-focus-mode) {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #000 !important;
}
body.post-focus-mode .topbar,
body.post-focus-mode .floating-story-rail,
body.post-focus-mode .mobile-nav {
    display: none !important;
}
body.post-focus-mode .global-post-close {
    display: block !important;
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 22px !important;
    z-index: 2147483647 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    color: #fff !important;
    font: 950 32px/1 Arial, Helvetica, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}
body.post-focus-mode .global-post-close:hover,
body.post-focus-mode .global-post-close:focus,
body.post-focus-mode .global-post-close:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    scroll-padding: 0 !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 100000 !important;
    contain: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .nearby-post.tiktok-post.is-fullscreen {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    transform: none !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: var(--recadin-post-bg, #f5005f) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    background: var(--recadin-post-bg, #f5005f) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .post-media-blur {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: blur(22px) brightness(.72) !important;
    transform: scale(1.12) !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .post-media-main,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .gif-post-shell img {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-overlay {
    left: 0 !important;
    right: 0 !important;
    bottom: 158px !important;
    max-height: 118px !important;
    padding: 0 88px 0 18px !important;
    z-index: 12 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .comment-preview {
    left: 18px !important;
    right: 88px !important;
    bottom: 116px !important;
    z-index: 13 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .quick-comment-form {
    left: 16px !important;
    right: 86px !important;
    bottom: 104px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-track-card {
    left: 16px !important;
    right: 86px !important;
    bottom: 60px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .tiktok-actions {
    right: 12px !important;
    bottom: 164px !important;
    z-index: 14 !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-post {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 48px 24px 244px !important;
    transform: none !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed .music-only-cover {
    width: min(38vw, 150px) !important;
    max-width: 150px !important;
}

/* Core UI rescue: top controls and creation/notification sheets must always be clickable */
.topbar {
    z-index: 90000 !important;
    pointer-events: auto !important;
}
.topbar-actions,
.top-avatar-menu,
.top-avatar,
.icon-button,
[data-open-create],
[data-open-notifications],
[data-toggle-avatar-menu] {
    pointer-events: auto !important;
}
.top-avatar-menu {
    z-index: 90010 !important;
    overflow: visible !important;
}
.avatar-dropdown {
    z-index: 90020 !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    display: grid !important;
    min-width: 152px !important;
    padding: 8px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.18) !important;
}
.avatar-dropdown[hidden] {
    display: none !important;
}
.avatar-dropdown a,
.avatar-dropdown button {
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #111827 !important;
    font-weight: 900 !important;
    text-align: left !important;
}
.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
    background: #fff0f6 !important;
    color: #f5005f !important;
}
.create-modal,
.notification-modal {
    z-index: 200000 !important;
}
.create-modal.is-open,
.notification-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.create-modal .modal-backdrop,
.notification-modal .modal-backdrop {
    z-index: 1 !important;
}
.create-sheet,
.notification-sheet {
    z-index: 2 !important;
    pointer-events: auto !important;
}
.create-sheet {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    border-radius: 30px !important;
}
body:not(.post-focus-mode) .nearby-feed.tiktok-feed {
    position: relative !important;
    z-index: 1 !important;
}
body:not(.post-focus-mode) .tiktok-post-hit {
    z-index: 2 !important;
}
body:not(.post-focus-mode) .topbar,
body:not(.post-focus-mode) .floating-story-rail,
body:not(.post-focus-mode) .mobile-nav {
    display: flex !important;
    visibility: visible !important;
}
body:not(.post-focus-mode) .mobile-nav {
    display: grid !important;
}

/* Core UI rescue: top controls and creation/notification sheets must always be clickable */
.topbar {
    z-index: 90000 !important;
    pointer-events: auto !important;
}
.topbar-actions,
.top-avatar-menu,
.top-avatar,
.icon-button,
[data-open-create],
[data-open-notifications],
[data-toggle-avatar-menu] {
    pointer-events: auto !important;
}
.top-avatar-menu {
    z-index: 90010 !important;
    overflow: visible !important;
}
.avatar-dropdown {
    z-index: 90020 !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    display: grid !important;
    min-width: 152px !important;
    padding: 8px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.18) !important;
}
.avatar-dropdown[hidden] {
    display: none !important;
}
.avatar-dropdown a,
.avatar-dropdown button {
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #111827 !important;
    font-weight: 900 !important;
    text-align: left !important;
}
.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
    background: #fff0f6 !important;
    color: #f5005f !important;
}
.create-modal,
.notification-modal {
    z-index: 200000 !important;
}
.create-modal.is-open,
.notification-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.create-modal .modal-backdrop,
.notification-modal .modal-backdrop {
    z-index: 1 !important;
}
.create-sheet,
.notification-sheet {
    z-index: 2 !important;
    pointer-events: auto !important;
}
.create-sheet {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    border-radius: 30px !important;
}
body:not(.post-focus-mode) .nearby-feed.tiktok-feed {
    position: relative !important;
    z-index: 1 !important;
}
body:not(.post-focus-mode) .tiktok-post-hit {
    z-index: 2 !important;
}
body:not(.post-focus-mode) .topbar,
body:not(.post-focus-mode) .floating-story-rail {
    visibility: visible !important;
}
body:not(.post-focus-mode) .mobile-nav {
    display: grid !important;
    visibility: visible !important;
}

/* Essential controls final fix */
[data-toggle-post-fullscreen] {
    pointer-events: auto !important;
    cursor: pointer !important;
}
.tiktok-post-hit {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 3 !important;
}
.post-kebab-menu,
.tiktok-actions,
.quick-comment-form,
.tiktok-track-card,
.comment-preview,
.reaction-float,
.tiktok-overlay,
.global-post-close {
    pointer-events: auto !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 200000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .tiktok-post {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
body.post-focus-mode .global-post-close {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
}
.notification-modal.is-open,
.create-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 210000 !important;
}
.top-avatar-menu .avatar-dropdown:not([hidden]) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 220000 !important;
}

/* Recadin emergency core controls - separated rescue JS */
.recadin-global-close { display: none; }
body.post-focus-mode .recadin-global-close {
    display: block !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font: 950 34px/1 Arial, Helvetica, sans-serif !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}
body.post-focus-mode .topbar,
body.post-focus-mode .mobile-nav,
body.post-focus-mode .floating-story-rail { display: none !important; }
body.post-focus-mode .tiktok-feed.is-fullscreen-feed {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    z-index: 200000 !important;
}
body.post-focus-mode .tiktok-feed.is-fullscreen-feed > .tiktok-post {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}
body.post-focus-mode .tiktok-feed.is-fullscreen-feed .tiktok-post-media,
body.post-focus-mode .tiktok-feed.is-fullscreen-feed .text-only-post,
body.post-focus-mode .tiktok-feed.is-fullscreen-feed .gif-post-shell,
body.post-focus-mode .tiktok-feed.is-fullscreen-feed .music-only-post {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
}
.tiktok-post-hit,
[data-toggle-post-fullscreen] { pointer-events: auto !important; }
.create-modal.is-open,
.notification-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 210000 !important;
}
.avatar-dropdown:not([hidden]) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 220000 !important;
}

/* Single clean fullscreen close button */
.tiktok-close-fullscreen,
.global-post-close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.recadin-global-close,
body.post-focus-mode .recadin-global-close {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    color: #fff !important;
    font: 400 30px/1 Arial, Helvetica, sans-serif !important;
    text-align: center !important;
}
body:not(.post-focus-mode) .recadin-global-close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.recadin-global-close:hover,
.recadin-global-close:focus,
.recadin-global-close:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    outline: 0 !important;
}

/* Kill every legacy fullscreen X; keep only Recadin rescue X */
[data-close-post-fullscreen]:not([data-recadin-global-close]),
[data-global-post-close],
.global-post-close,
.tiktok-close-fullscreen,
button.tiktok-close-fullscreen,
.nearby-feed .tiktok-close-fullscreen,
body.post-focus-mode .nearby-feed .tiktok-close-fullscreen,
body.post-focus-mode [data-global-post-close],
body.post-focus-mode .global-post-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.post-focus-mode button.recadin-global-close[data-recadin-global-close] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    color: #fff !important;
    font: 400 30px/1 Arial, Helvetica, sans-serif !important;
}
body:not(.post-focus-mode) button.recadin-global-close[data-recadin-global-close] {
    display: none !important;
}

/* Rescue modals for story viewers, delete confirm and story export */
.story-viewers-modal.is-open,
.recadin-confirm-modal.is-open,
.story-export-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 230000 !important;
}
.story-viewers-modal .modal-backdrop,
.recadin-confirm-modal .modal-backdrop,
.story-export-modal .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(15,23,42,.48) !important;
    backdrop-filter: blur(8px) !important;
}
.story-viewers-sheet,
.confirm-sheet,
.story-export-sheet {
    position: fixed !important;
    left: 50% !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: 78dvh !important;
    overflow: auto !important;
    border-radius: 30px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 26px 70px rgba(15,23,42,.24) !important;
    padding: 18px !important;
}
.confirm-icon {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #f5005f !important;
    color: #fff !important;
    font-weight: 950 !important;
}
.confirm-actions,
.story-export-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
}
.story-export-sheet img[data-story-export-preview] {
    display: block !important;
    width: min(220px, 70vw) !important;
    max-height: 390px !important;
    object-fit: contain !important;
    margin: 10px auto !important;
    border-radius: 24px !important;
}

/* Collapsible profile posts: posts stay quiet until the user asks */
.profile-posts-disclosure {
    width: 100% !important;
    margin: 18px 0 !important;
    border: 0 !important;
}
.profile-posts-disclosure > summary {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(245,0,95,.16) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(245,0,95,.1), rgba(0,191,179,.08)), #fff !important;
    color: #111827 !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
    cursor: pointer !important;
    list-style: none !important;
    font-weight: 950 !important;
}
.profile-posts-disclosure > summary::-webkit-details-marker {
    display: none !important;
}
.profile-posts-disclosure > summary span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.profile-posts-disclosure > summary span::before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #f5005f !important;
    box-shadow: 0 0 0 6px rgba(245,0,95,.1) !important;
}
.profile-posts-disclosure > summary b {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #f5005f !important;
    color: #fff !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 24px rgba(245,0,95,.22) !important;
}
.profile-posts-disclosure .hide-label {
    display: none !important;
}
.profile-posts-disclosure[open] .show-label {
    display: none !important;
}
.profile-posts-disclosure[open] .hide-label {
    display: inline-flex !important;
}
.profile-posts-disclosure .posts-feed {
    margin-top: 14px !important;
}
.profile-posts-disclosure .profile-post-actions .story-export-button {
    display: none !important;
}

/* Music play/pause state: pause is green when preview is playing */
.track-preview-button.is-playing,
.attached-mini-card .track-preview-button.is-playing {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 24px rgba(22,163,74,.28) !important;
}
.track-preview-button.is-playing [data-play-icon] {
    color: #fff !important;
    font-weight: 950 !important;
}

/* Auto dismiss flash toast */
.alert {
    position: fixed !important;
    left: 50% !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    z-index: 240000 !important;
    width: min(390px, calc(100vw - 26px)) !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: #111827 !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(12px) !important;
    transform: translateX(-50%) translateY(-12px) scale(.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: recadinToastIn .22s ease forwards, recadinToastOut .28s ease forwards 3.1s !important;
    font-weight: 950 !important;
    text-align: center !important;
}
.alert::before {
    content: '✓' !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    color: #fff !important;
    font-weight: 950 !important;
}
.alert-error::before {
    content: '!' !important;
    background: #f5005f !important;
}
.alert-success {
    color: #0f5132 !important;
}
.alert-error {
    color: #be123c !important;
}
@keyframes recadinToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.98); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes recadinToastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.98); visibility: hidden; }
}

/* Cookie, login persistente e navegacao mais leve */
.remember-login-pill {
    width: min(86vw, 340px);
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 800;
    margin: 2px auto 0;
    user-select: none;
}
.remember-login-pill input {
    width: 18px;
    height: 18px;
    accent-color: #fff;
}
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 99999;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(236, 0, 104, .16);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    backdrop-filter: blur(16px);
}
.cookie-consent strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 950;
}
.cookie-consent p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}
.cookie-consent-accept {
    border: 0;
    border-radius: 999px;
    background: #f0066f;
    color: #fff;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(240, 6, 111, .28);
}
.cookie-consent.is-hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(.98);
    transition: opacity .24s ease, transform .24s ease;
}
body.is-navigating::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f0066f, #22c7bd, #ffe600);
    transform-origin: left center;
    animation: recadinLoadBar .78s ease-in-out infinite;
}
@keyframes recadinLoadBar {
    0% { transform: scaleX(.15); opacity: .65; }
    55% { transform: scaleX(.72); opacity: 1; }
    100% { transform: scaleX(1); opacity: .65; }
}
@media (max-width: 420px) {
    .cookie-consent {
        align-items: stretch;
        flex-direction: column;
        border-radius: 22px;
    }
    .cookie-consent-accept {
        width: 100%;
    }
}

/* Post page: acoes em modal, sem icones flutuantes */
.single-post-icon-actions,
.post-react-tray {
    display: none !important;
}
.single-post-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
}
.single-post-stats-row button {
    min-height: 54px;
    border: 1px solid rgba(245, 0, 95, .12);
    border-radius: 18px;
    background: #fff;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}
.single-post-stats-row button span {
    font-size: 1.12rem;
}
.single-post-stats-row button small {
    color: #64748b;
    font-size: .76rem;
}
.post-reaction-modal[hidden],
.post-comment-modal[hidden] {
    display: none !important;
}
.post-reaction-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.post-reaction-modal.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
}
.post-reaction-modal .modal-backdrop,
.post-comment-modal .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(17,24,39,.48) !important;
    backdrop-filter: blur(10px);
}
.post-comment-sheet,
.post-reaction-sheet {
    position: fixed !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translate(-50%, 18px) scale(.98) !important;
    width: min(430px, calc(100vw - 20px)) !important;
    max-height: min(78svh, 680px) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 28px 82px rgba(15, 23, 42, .28) !important;
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    overflow: hidden;
}
.post-comment-modal.is-open .post-comment-sheet,
.post-reaction-modal.is-open .post-reaction-sheet {
    transform: translate(-50%, 0) scale(1) !important;
    opacity: 1 !important;
}
.post-reaction-picker {
    display: flex;
    gap: 9px;
    padding: 0 16px 14px;
    overflow-x: auto;
}
.post-reaction-picker form {
    margin: 0;
}
.post-reaction-picker .reaction-button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(245, 0, 95, .12);
    border-radius: 999px;
    background: #fff5f9;
    font-size: 1.35rem;
    box-shadow: 0 10px 22px rgba(245,0,95,.12);
}
.post-reaction-picker .reaction-button.active {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
}
.recadin-action-toast {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top));
    left: 50%;
    z-index: 2000;
    transform: translate(-50%, -14px) scale(.98);
    opacity: 0;
    pointer-events: none;
    min-width: min(310px, calc(100vw - 42px));
    padding: 14px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f0066f, #ff4fa0);
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 52px rgba(240, 6, 111, .3);
    transition: transform .22s ease, opacity .22s ease;
}
.recadin-action-toast.is-open {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
.recadin-action-toast strong {
    display: block;
    font-weight: 950;
}
.qa-owner-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center;
}
.qa-owner-actions .repost-open-button,
.qa-owner-actions .story-export-button {
    width: 100% !important;
    justify-content: center;
    min-height: 42px;
    white-space: nowrap;
}
@media (max-width: 380px) {
    .qa-owner-actions {
        grid-template-columns: 1fr !important;
    }
}
.post-comment-modal {
    z-index: 1300 !important;
}
.post-comment-modal.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Feedback imediato do comentario no feed */
.nearby-feed.tiktok-feed .comment-ticker p.just-added {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: recadinNewCommentPop 2.4s ease both !important;
    z-index: 3 !important;
}
@keyframes recadinNewCommentPop {
    0% { opacity: 0; transform: translateY(8px) scale(.96); }
    12%, 86% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: .88; transform: translateY(0) scale(1); }
}
.repost-modal {
    z-index: 1600 !important;
}
.repost-modal.is-open {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.repost-modal .repost-sheet {
    max-width: calc(100vw - 20px) !important;
}

/* Toast sempre acima de modais/backdrops */
.recadin-action-toast,
.alert {
    z-index: 2147483000 !important;
    position: fixed !important;
    isolation: isolate !important;
}
.recadin-action-toast {
    top: calc(22px + env(safe-area-inset-top)) !important;
    box-shadow: 0 24px 80px rgba(240, 6, 111, .42), 0 0 0 9999px rgba(15, 23, 42, .02) !important;
}

/* Duelos */
.duel-create-shell { width: min(560px, 100%); margin: 0 auto; padding: 12px; }
.duel-composer { display: grid; gap: 14px; padding: 14px; border-radius: 28px; background: #fff5f9; box-shadow: 0 22px 70px rgba(245,0,95,.12); }
.duel-composer textarea { min-height: 120px; border: 0; border-radius: 22px; padding: 18px; font-size: 1.1rem; font-weight: 900; resize: vertical; }
.duel-type-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.duel-type-tabs label { cursor: pointer; }
.duel-type-tabs input { position: absolute; opacity: 0; }
.duel-type-tabs span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; background: #fff; color: #64748b; font-weight: 950; border: 1px solid rgba(15,23,42,.08); }
.duel-type-tabs input:checked + span { background: var(--pink); color: #fff; box-shadow: 0 12px 30px rgba(245,0,95,.22); }
.duel-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duel-option-editor { display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid rgba(15,23,42,.07); }
.duel-option-editor > strong { color: var(--pink); }
.duel-option-editor input[type="text"] { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 12px; font-weight: 900; }
.duel-media-fields { display: none; }
.duel-composer[data-duel-type="image"] [data-duel-media="image"],
.duel-composer[data-duel-type="gif"] [data-duel-media="gif"],
.duel-composer[data-duel-type="music"] [data-duel-media="music"] { display: grid; gap: 8px; }
.media-drop.compact { min-height: 78px; padding: 14px; }
.upload-preview.compact img { max-height: 120px; border-radius: 16px; object-fit: cover; }
.home-duels, .profile-duels { width: min(760px, calc(100% - 24px)); margin: 12px auto; display: grid; gap: 12px; }
.tiktok-home .home-duels { margin-top: 6px; margin-bottom: 12px; }
.duel-card { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 16px; border-radius: 28px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--duel-bg) 70%, #fff), transparent 42%), linear-gradient(135deg, var(--duel-bg), #111827); color: #fff; box-shadow: 0 22px 60px rgba(15,23,42,.18); }
.duel-author { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.duel-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.78); }
.duel-author strong, .duel-author small { display: block; color: #fff; }
.duel-kicker { width: fit-content; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .74rem; font-weight: 950; text-transform: uppercase; }
.duel-card h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.08; }
.duel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duel-option { margin: 0; }
.duel-option button { width: 100%; min-height: 150px; display: grid; align-content: end; gap: 8px; text-align: left; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; padding: 12px; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(12px); }
.duel-option.is-selected button { outline: 3px solid #ffe600; background: rgba(255,255,255,.22); }
.duel-media { width: 100%; max-height: 170px; object-fit: cover; border-radius: 16px; align-self: start; }
.duel-track { display: grid; gap: 3px; }
.duel-track img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.duel-track i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); font-style: normal; }
.duel-option strong { font-size: 1.05rem; color: #fff; }
.duel-meter { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.24); overflow: hidden; }
.duel-meter em { display: block; height: 100%; background: #ffe600; border-radius: inherit; }
.duel-option small { color: rgba(255,255,255,.88); font-weight: 850; }
.duel-login { color: #fff; font-weight: 950; text-decoration: underline; }
@media (max-width: 520px) { .duel-option-grid, .duel-options { grid-template-columns: 1fr; } .duel-type-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); } .duel-option button { min-height: 118px; } }

/* Duelos compactos */
.duel-composer[data-duel-type="gif"] .duel-option-title,
.duel-composer[data-duel-type="music"] .duel-option-title,
.duel-composer[data-duel-type="gif"] .duel-label-input,
.duel-composer[data-duel-type="music"] .duel-label-input { display: none; }
.duel-composer[data-duel-type="gif"] .duel-option-editor,
.duel-composer[data-duel-type="music"] .duel-option-editor { align-content: start; }
.duel-card { min-height: min(560px, calc(100vh - 190px)); align-content: start; }
.duel-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.duel-status-pill { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.duel-card.is-ended .duel-status-pill { background: #ffe600; color: #111827; }
.duel-owner-menu { position: absolute; top: 14px; right: 14px; z-index: 3; }
.duel-owner-menu summary { list-style: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--pink); font-size: 1.35rem; font-weight: 950; cursor: pointer; box-shadow: 0 14px 34px rgba(15,23,42,.14); }
.duel-owner-menu summary::-webkit-details-marker { display: none; }
.duel-owner-menu > div { position: absolute; right: 0; top: 48px; min-width: 190px; display: grid; gap: 6px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.22); }
.duel-owner-menu button { width: 100%; border: 0; border-radius: 14px; padding: 10px 12px; background: #fff5f9; color: #111827; font-weight: 950; text-align: left; }
.duel-owner-menu form:last-child button { color: var(--pink); }
.duel-options { position: relative; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; align-items: stretch; gap: 8px; }
.duel-versus { align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pink); font-size: 1rem; font-weight: 950; text-transform: uppercase; box-shadow: 0 10px 26px rgba(15,23,42,.14); z-index: 2; }
.duel-option button { min-height: 132px; height: 100%; padding: 10px; border-radius: 20px; overflow: hidden; }
.duel-option strong { font-size: .94rem; line-height: 1.05; overflow-wrap: anywhere; }
.duel-media { aspect-ratio: 1 / 1; max-height: 118px; object-fit: cover; }
.duel-track { min-width: 0; }
.duel-track img { width: 62px; height: 62px; }
.duel-track b, .duel-track small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-option button:disabled { opacity: .82; cursor: default; }
@media (max-width: 520px) {
  .duel-card { min-height: 420px; padding: 14px; border-radius: 24px; }
  .duel-card h3 { font-size: 1.35rem; padding-right: 42px; }
  .duel-options { grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr) !important; gap: 6px; }
  .duel-versus { width: 26px; height: 26px; font-size: .85rem; margin-inline: -2px; }
  .duel-option button { min-height: 124px; border-radius: 18px; }
  .duel-option small { font-size: .7rem; }
}

/* Duelos dentro do feed TikTok */
.nearby-feed.tiktok-feed > .duel-feed-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto;
    align-content: stretch !important;
    width: 100% !important;
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - var(--recadin-top-space)) !important;
    min-height: 420px !important;
    margin: 0 !important;
    padding: 18px 16px 86px !important;
    border-radius: 22px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
body.story-rail-at-top .nearby-feed.tiktok-feed > .duel-feed-card,
.topbar.is-hidden ~ .app-shell .nearby-feed.tiktok-feed > .duel-feed-card {
    height: calc(100svh - var(--recadin-story-space) - var(--recadin-nav-space) - 10px) !important;
}
.duel-feed-card .duel-feed-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--duel-bg) 55%, #fff), transparent 34%),
        linear-gradient(160deg, var(--duel-bg), #111827 92%);
}
.duel-feed-card > :not(.duel-feed-bg) { position: relative; z-index: 1; }
.duel-feed-card .duel-topline { padding-right: 46px; }
.duel-feed-card h3 {
    align-self: end;
    max-width: 12ch;
    margin-top: clamp(22px, 7vh, 76px) !important;
    font-size: clamp(2rem, 9vw, 4rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
}
.duel-feed-card .duel-options {
    align-self: end;
    margin-top: 18px;
    min-height: 190px;
}
.duel-feed-card .duel-option button {
    min-height: 190px !important;
    align-content: end;
    background: rgba(255,255,255,.16) !important;
}
.duel-feed-card .duel-media {
    width: 100%;
    height: min(27vh, 180px);
    max-height: none;
    object-fit: cover;
}
.duel-feed-card .duel-track img {
    width: min(24vw, 96px);
    height: min(24vw, 96px);
}
.duel-feed-card .duel-login { align-self: end; }
.nearby-feed.tiktok-feed.is-fullscreen-feed > .duel-feed-card,
body.post-focus-mode .nearby-feed.tiktok-feed.is-fullscreen-feed > .duel-feed-card {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 26px 18px 96px !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > .duel-feed-card {
        padding: 14px 14px 82px !important;
    }
    .duel-feed-card h3 {
        max-width: 11ch;
        margin-top: clamp(18px, 6vh, 58px) !important;
        font-size: clamp(1.9rem, 8.8vw, 3.2rem) !important;
    }
    .duel-feed-card .duel-options {
        min-height: 168px;
        margin-top: 14px;
    }
    .duel-feed-card .duel-option button {
        min-height: 168px !important;
        padding: 9px !important;
    }
    .duel-feed-card .duel-media {
        height: min(22vh, 146px);
    }
}

/* Polimento do duelo no feed */
.nearby-feed.tiktok-feed > .duel-feed-card .duel-owner-menu {
    top: 18px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 18 !important;
}
.nearby-feed.tiktok-feed > .duel-feed-card .duel-owner-menu summary {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--pink) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.14) !important;
}
.nearby-feed.tiktok-feed > .duel-feed-card .duel-topline {
    padding-right: 58px !important;
}
.nearby-feed.tiktok-feed > .duel-feed-card h3 {
    max-width: min(15ch, calc(100% - 88px)) !important;
    margin-top: clamp(24px, 8vh, 72px) !important;
    margin-bottom: clamp(12px, 3vh, 26px) !important;
    font-size: clamp(2.05rem, 8vw, 3.35rem) !important;
    line-height: 1.02 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
    hyphens: auto;
}
.nearby-feed.tiktok-feed > .duel-feed-card .duel-status-pill {
    margin-right: 48px;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > .duel-feed-card .duel-owner-menu {
        top: 70px !important;
        right: 14px !important;
    }
    .nearby-feed.tiktok-feed > .duel-feed-card h3 {
        max-width: min(13ch, calc(100% - 86px)) !important;
        margin-top: clamp(28px, 7vh, 58px) !important;
        font-size: clamp(1.95rem, 7.8vw, 2.75rem) !important;
        line-height: 1.04 !important;
    }
    .nearby-feed.tiktok-feed > .duel-feed-card .duel-status-pill {
        margin-right: 46px;
    }
}

/* Correção forte: pergunta e menu do duelo no feed */
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card {
    padding-top: 18px !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu,
body:not(.post-focus-mode) .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 40 !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu > summary {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--pink) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.14) !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu > div {
    right: 0 !important;
    left: auto !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-topline {
    padding-right: 58px !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-topline .duel-status-pill {
    margin-right: 0 !important;
}
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
    width: min(100%, 330px) !important;
    max-width: calc(100% - 78px) !important;
    margin-top: clamp(38px, 8vh, 76px) !important;
    margin-bottom: clamp(18px, 3vh, 30px) !important;
    padding-right: 0 !important;
    font-size: clamp(1.85rem, 7.1vw, 3.1rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu,
    body:not(.post-focus-mode) .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > .duel-owner-menu {
        top: 18px !important;
        right: 14px !important;
        left: auto !important;
    }
    .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
        width: min(100%, 280px) !important;
        max-width: calc(100% - 72px) !important;
        margin-top: clamp(44px, 8vh, 70px) !important;
        font-size: clamp(1.65rem, 6.7vw, 2.35rem) !important;
        line-height: 1.1 !important;
    }
}

/* Pergunta do duelo: uma linha quando couber */
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: normal !important;
    font-size: clamp(1.65rem, 6.2vw, 2.65rem) !important;
    line-height: 1.08 !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
        width: auto !important;
        max-width: calc(100% - 18px) !important;
        font-size: clamp(1.5rem, 6vw, 2.15rem) !important;
        line-height: 1.1 !important;
    }
}

/* Pergunta do duelo maior e centralizada */
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
    justify-self: center !important;
    text-align: center !important;
    max-width: min(100%, 360px) !important;
    font-size: clamp(1.9rem, 7vw, 3rem) !important;
    line-height: 1.05 !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
        max-width: min(100%, 330px) !important;
        font-size: clamp(1.75rem, 7vw, 2.55rem) !important;
        line-height: 1.07 !important;
    }
}

/* Pergunta do duelo: maior, com ate 3 palavras por linha quando couber */
.nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
    justify-self: center !important;
    text-align: center !important;
    width: min(100%, 380px) !important;
    max-width: calc(100% - 18px) !important;
    font-size: clamp(2.15rem, 7.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    word-spacing: .02em !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}
@media (max-width: 520px) {
    .nearby-feed.tiktok-feed > article.duel-feed-card.duel-card > h3 {
        width: min(100%, 350px) !important;
        max-width: calc(100% - 12px) !important;
        font-size: clamp(2rem, 7.6vw, 2.85rem) !important;
        line-height: 1.03 !important;
    }
}

/* Story replies/likes and comment actions */
.story-reply-bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.story-reply-bar form:first-child { display: flex; gap: 8px; min-width: 0; }
.story-reply-bar input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    padding: 13px 16px;
    background: rgba(17,24,39,.42);
    color: #fff;
    outline: 0;
    backdrop-filter: blur(16px);
}
.story-reply-bar input::placeholder { color: rgba(255,255,255,.74); }
.story-reply-bar form:first-child button,
.story-like-button {
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    min-height: 46px;
    background: #fff;
    color: var(--pink);
    font-weight: 950;
}
.story-like-button { width: 48px; padding: 0; font-size: 1.15rem; }
.story-like-button.active { background: var(--pink); color: #fff; }
.story-likers-title { margin: 16px 0 6px; font-size: .9rem; color: var(--muted); }
.comment-row.is-reply { margin-left: 38px; padding-left: 10px; border-left: 3px solid rgba(245,0,95,.18); }
.comment-reply-context { display: block; color: var(--pink); font-weight: 900; margin-bottom: 3px; }
.comment-text-action,
.comment-edit-box summary,
.comment-delete-form button {
    border: 0;
    background: transparent;
    color: var(--pink);
    font-weight: 900;
    font-size: .78rem;
    padding: 4px 8px 4px 0;
    cursor: pointer;
}
.comment-edit-box { margin-top: 4px; }
.comment-edit-box form { display: flex; gap: 6px; margin-top: 6px; }
.comment-edit-box input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; }
.comment-edit-box button { border: 0; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 900; padding: 0 12px; }
.comment-delete-form { display: inline; }