:root {
    --black: #08090a;
    --black-soft: #151719;
    --black-panel: #202326;
    --red: #a90f1d;
    --red-bright: #d7192a;
    --white: #f4f4f2;
    --silver: #c8ccd1;
    --silver-bright: #ffffff;
    --silver-dark: #858b93;
    --header-line: rgba(212, 216, 221, .14);
    --shadow: 0 18px 40px rgba(0, 0, 0, .38);
    --modal-layer: 5000;
    --call-modal-layer: 9000;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #111315;
    color: var(--white);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    max-width: 100%;
}

button,
input {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #060606;
    background: #17191b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .42);
}

.site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 25, 42, .74), transparent);
}

.top-strip {
    border-bottom: 1px solid var(--header-line);
    background: linear-gradient(180deg, #232527, #181a1c);
}

.top-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1440px, calc(100% - 28px));
    min-height: 30px;
    margin: 0 auto;
    color: var(--silver-dark);
    font-size: 12px;
    font-weight: 700;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-links a {
    color: var(--silver-dark);
    transition: color .18s ease;
}

.top-links a:hover {
    color: var(--silver);
}

.public-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1440px, calc(100% - 28px));
    min-height: 68px;
    margin: 0 auto;
    gap: 22px;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand-text {
    display: inline-flex;
    align-items: baseline;
    font-size: 31px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-text span,
.silver-word {
    color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 24%, #cdd2d8 48%, #ffffff 55%, #d7dce2 78%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .16));
}

.brand-text strong {
    margin-left: 2px;
    color: var(--red-bright);
    text-shadow: 0 0 8px rgba(215, 25, 42, .22);
}

.brand-text small {
    margin-left: 1px;
    color: var(--silver-dark);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

.nav-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links li {
    position: relative;
}

.nav-links a,
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    min-height: 68px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nav-links a:hover,
.nav-links a.is-active,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.is-active,
.has-dropdown.is-open .nav-dropdown-toggle {
    color: var(--white);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
    box-shadow: inset 0 -2px 0 var(--red-bright);
}

.nav-message-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--red-bright);
    box-shadow: 0 0 0 2px rgba(17, 19, 21, .95);
    font-size: 11px;
    font-weight: 1000;
    line-height: 1;
}

.nav-links a.is-hot-nav {
    min-height: 38px;
    margin: 0 6px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 184, 48, .72);
    border-radius: 6px;
    color: var(--white);
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .72), transparent 24%),
        radial-gradient(circle at 24% 100%, rgba(255, 96, 20, .72), transparent 34%),
        linear-gradient(180deg, #651008 0%, #b8170e 42%, #1b0303 100%);
    box-shadow: inset 0 -10px 28px rgba(255, 93, 16, .34), 0 10px 22px rgba(239, 62, 34, .22);
}

.nav-links a.is-hot-nav::before {
    content: "\f06d";
    margin-right: 7px;
    color: #fff0a6;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.chevron {
    margin-left: 5px;
    color: var(--silver-dark);
    font-size: 11px;
    transition: transform .18s ease;
}

.has-dropdown:hover .chevron,
.has-dropdown:focus-within .chevron,
.has-dropdown.is-open .chevron {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 40;
    display: grid;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, #202326, #111315);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu a {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a.is-active {
    background: rgba(215, 25, 42, .18);
    box-shadow: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.icon-link,
.publish-link,
.session-link,
.register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.icon-link {
    position: relative;
    width: 34px;
    border: 1px solid rgba(200, 204, 210, .18);
    color: var(--silver);
    background: #191b1e;
    font-size: 18px;
}

.account-menu {
    position: relative;
}

.notification-menu {
    position: relative;
}

.account-menu .icon-link {
    cursor: pointer;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, #202326, #111315);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.account-menu:hover .account-dropdown,
.account-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.account-dropdown a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-dropdown a:hover {
    color: var(--white);
    background: rgba(215, 25, 42, .18);
}

.icon-link.has-alert::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red-bright);
    box-shadow: 0 0 0 2px #191b1e;
}

.notification-link.has-alert::after {
    display: none;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #191b1e;
    border-radius: 999px;
    background: var(--red-bright);
    color: #ffffff;
    font-size: 10px;
    font-weight: 1000;
    line-height: 1;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 80;
    width: min(380px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 92px));
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 8px;
    background: linear-gradient(180deg, #202326, #111315);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.notification-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.notification-dropdown header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(200, 204, 210, .12);
}

.notification-dropdown header strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 1000;
}

.notification-dropdown header span {
    display: inline-grid;
    min-width: 28px;
    height: 24px;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--red-bright);
    color: #ffffff;
    font-size: 12px;
    font-weight: 1000;
}

.notification-dropdown-list {
    display: grid;
    max-height: 440px;
    overflow-y: auto;
    padding: 8px;
}

.notification-dropdown-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #ffffff;
}

.notification-dropdown-item:hover {
    background: rgba(215, 25, 42, .14);
}

.notification-dropdown-item.is-locked-visit,
.notification-card.is-locked-visit {
    border-color: rgba(255, 184, 48, .32);
}

.notification-dropdown-avatar {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: #2a2d31;
    color: #ffffff;
    font-size: 12px;
    font-weight: 1000;
}

.notification-dropdown-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.notification-dropdown-avatar i {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 2px solid #111315;
    border-radius: 50%;
    background: var(--red-bright);
    color: #ffffff;
    font-size: 9px;
}

.notification-dropdown-avatar.is-blurred,
.notification-avatar.is-blurred {
    background: linear-gradient(135deg, rgba(255, 184, 48, .26), rgba(215, 25, 42, .22)), #2a2d31;
}

.notification-dropdown-avatar.is-blurred b,
.notification-avatar.is-blurred span {
    filter: blur(3px);
    opacity: .72;
}

.notification-dropdown-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.notification-dropdown-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-dropdown-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(242, 244, 247, .72);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-dropdown-copy em {
    color: var(--red-bright);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.notification-blur-text {
    display: inline-block;
    filter: blur(3px);
    user-select: none;
}

.notification-dropdown-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-top: 1px solid rgba(200, 204, 210, .12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.notification-dropdown-all:hover {
    background: rgba(215, 25, 42, .16);
}

.notification-dropdown-empty {
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 32px 18px;
    color: rgba(242, 244, 247, .72);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.notification-dropdown-empty i {
    color: var(--red-bright);
    font-size: 28px;
}

.publish-link {
    padding: 0 17px;
    border: 1px solid rgba(215, 25, 42, .54);
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 0, 0, .2);
}

.session-link {
    padding: 0 16px;
    border: 1px solid rgba(200, 204, 210, .38);
    color: var(--silver);
    background: linear-gradient(180deg, #272a2d, #17191b);
}

.register-link {
    padding: 0 16px;
    border: 1px solid rgba(215, 25, 42, .5);
    color: var(--white);
    background: linear-gradient(180deg, rgba(215, 25, 42, .22), rgba(118, 11, 20, .34));
}

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(200, 204, 210, .34);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 5px auto;
    background: var(--white);
    transition: transform .18s ease, opacity .18s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hero-screen {
    width: 100%;
    min-height: calc(100dvh - 68px);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(215, 25, 42, .16), transparent 24rem),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .055), transparent 18rem),
        linear-gradient(180deg, #070809, #111315 42%, #08090a);
}

.home-hero {
    width: 100%;
    min-height: calc(100dvh - 68px);
    background: transparent;
}

.hero-main {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: clamp(390px, 56dvh, 660px);
    padding: clamp(28px, 5vw, 82px);
    overflow: hidden;
    border-bottom: 1px solid rgba(200, 204, 210, .1);
    background: linear-gradient(120deg, #111315 0%, #171b1d 42%, #231114 63%, #0b0c0d 100%);
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(7, 8, 9, .84), rgba(7, 8, 9, .48) 48%, rgba(7, 8, 9, .16)),
        linear-gradient(180deg, rgba(7, 8, 9, .08), rgba(7, 8, 9, .72));
    pointer-events: none;
}

.hero-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 68% 36%, rgba(255, 255, 255, .1), transparent 12rem),
        radial-gradient(circle at 74% 70%, rgba(215, 25, 42, .18), transparent 16rem),
        linear-gradient(180deg, transparent 72%, rgba(8, 9, 10, .92));
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding-left: clamp(0px, 2vw, 22px);
    border-left: 3px solid rgba(215, 25, 42, .72);
}

.hero-content h1 {
    max-width: 860px;
    margin: 0 0 16px;
    color: var(--white);
    font-size: clamp(40px, 5vw, 76px);
    line-height: .98;
    letter-spacing: 0;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .88);
    overflow-wrap: anywhere;
}

.hero-lead {
    max-width: 660px;
    margin: 0 0 28px;
    color: rgba(244, 244, 242, .88);
    font-size: clamp(17px, 1.45vw, 23px);
    font-weight: 800;
    line-height: 1.38;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

.hero-content h1 span {
    color: #d9dde3;
    background: none;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .44),
        0 4px 14px rgba(0, 0, 0, .78),
        0 0 12px rgba(217, 221, 227, .26);
    filter: none;
}

.hero-content h1 strong {
    color: var(--red-bright);
}

.hero-content h1 small {
    color: var(--silver);
    font-size: .82em;
    font-weight: 800;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 30px rgba(0, 0, 0, .36);
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.hero-cta.is-hot {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 184, 48, .9);
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .92), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .9), transparent 32%),
        radial-gradient(circle at 84% 104%, rgba(215, 25, 42, .76), transparent 34%),
        linear-gradient(180deg, #651008 0%, #b8170e 42%, #1b0303 100%);
    box-shadow: inset 0 -10px 28px rgba(255, 93, 16, .44), inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 30px rgba(239, 62, 34, .4), 0 0 22px rgba(255, 133, 24, .24);
}

.hero-cta.is-hot i,
.hero-cta.is-hot span {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.hero-cta:hover {
    background: linear-gradient(180deg, #d51d2f, #9c0e1b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 38px rgba(0, 0, 0, .42);
}

.hero-cta.is-hot:hover {
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .94), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .92), transparent 32%),
        radial-gradient(circle at 84% 104%, rgba(215, 25, 42, .8), transparent 34%),
        linear-gradient(180deg, #741108 0%, #c81a10 42%, #1b0303 100%);
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.hero-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: var(--white);
    background: rgba(8, 9, 10, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hero-trust-row i {
    color: #ffcf33;
}

.hero-inline-links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--silver);
    font-size: 15px;
    font-weight: 800;
}

.hero-inline-links a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.night-content {
    position: relative;
    z-index: 2;
    width: min(1440px, calc(100% - 32px));
    margin: -34px auto 0;
    padding: 0 0 46px;
}

.section-heading {
    display: grid;
    gap: 5px;
    max-width: 680px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(24, 27, 30, .95), rgba(11, 12, 13, .96));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.section-heading span {
    color: var(--red-bright);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.08;
    text-transform: uppercase;
}

.section-heading p {
    margin: 0;
    color: var(--silver);
    font-size: 13px;
    font-weight: 700;
}

.hero-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 22px;
    min-width: 0;
    padding: 0;
    border-left: 0;
    background: transparent;
}

.vip-panel,
.category-panel {
    position: relative;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent),
        linear-gradient(180deg, rgba(30, 33, 36, .92), rgba(12, 13, 14, .96));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 14px;
}

.panel-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(15px, 1.2vw, 21px);
    font-weight: 900;
    text-transform: uppercase;
}

.panel-heading a {
    flex: 0 0 auto;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

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

.profile-card {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    color: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        #202326;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.profile-card:hover {
    transform: translateY(-3px);
    border-color: rgba(215, 25, 42, .36);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
}

.home-profile-card {
    gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(16, 18, 20, .98)) padding-box,
        linear-gradient(135deg, #ffcf33, #ff255d 46%, #8b16ff) border-box;
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .1), 0 0 22px rgba(255, 37, 93, .2), 0 18px 34px rgba(0, 0, 0, .28);
}

.home-profile-card .profile-photo {
    width: 100%;
    min-height: 260px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid rgba(255, 207, 51, .22);
    border-radius: 8px;
    background: #08090a;
}

.home-profile-card .profile-photo img {
    display: block;
    object-fit: contain;
    object-position: center;
    background: #08090a;
}

.home-profile-card .profile-photo span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #33373b, #151719 48%, #3b0c13);
}

.home-profile-card .profile-meta {
    align-content: start;
    min-height: 116px;
    padding: 0 2px 2px;
}

.home-profile-card .profile-meta strong {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: visible;
    color: var(--white);
    font-size: 15px;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
}

.home-profile-card .profile-meta small {
    font-size: 12px;
    font-weight: 900;
}

.vip-panel.is-guest-preview .vip-grid {
    filter: blur(11px);
    opacity: .42;
    pointer-events: none;
    user-select: none;
}

.home-profile-card.is-locked-preview {
    min-height: 390px;
}

.home-profile-card .profile-photo.is-private-preview {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 207, 51, .16), transparent 8rem),
        linear-gradient(135deg, #24272a, #111315 58%, #310a10);
}

.home-profile-card .profile-photo.is-private-preview span {
    color: rgba(255, 255, 255, .72);
    font-size: 42px;
}

.vip-preview-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(215, 25, 42, .34);
    border-radius: 8px;
    background: rgba(8, 9, 10, .76);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .44);
    text-align: center;
}

.vip-panel:not(.is-guest-preview) .vip-preview-lock {
    display: none;
}

.vip-preview-lock strong {
    color: var(--white);
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.vip-preview-lock a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-card.is-hot-profile,
.finder-card.is-hot-profile {
    border-color: rgba(255, 184, 48, .7);
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .22), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .22), transparent 32%),
        linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(16, 18, 20, .98));
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .1), 0 0 22px rgba(255, 96, 20, .2);
}

.profile-photo {
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .16), transparent 4rem),
        linear-gradient(135deg, #33373b, #151719 48%, #3b0c13);
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo span {
    color: rgba(255, 255, 255, .84);
    font-size: clamp(20px, 2vw, 34px);
    font-weight: 900;
}

.profile-meta {
    display: grid;
    gap: 5px;
    padding: 9px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--white);
    background: rgba(215, 25, 42, .72);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-meta strong {
    overflow: hidden;
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-meta small {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
    color: var(--silver);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.22;
}

.profile-hot-label,
.finder-hot-label,
.profile-vip-label {
    color: #ffcf33 !important;
}

.profile-online-label,
.finder-online-label {
    color: #2ada76 !important;
}

.profile-online-label i,
.finder-online-label i {
    font-size: 7px;
    color: #2ada76 !important;
    filter: drop-shadow(0 0 6px rgba(42, 218, 118, .75));
}

.profile-meta small i {
    flex: 0 0 auto;
    color: var(--red-bright);
}

.category-stack {
    display: grid;
    gap: 14px;
}

.category-card,
.chat-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 86px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        radial-gradient(circle at 86% 42%, rgba(215, 25, 42, .24), transparent 5rem),
        linear-gradient(135deg, rgba(44, 48, 51, .96), rgba(17, 19, 21, .98) 58%, rgba(48, 10, 16, .86));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    text-align: left;
    transition: transform .18s ease, border-color .18s ease;
}

.category-card:hover,
.chat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(215, 25, 42, .36);
}

.category-card i,
.chat-card i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(215, 25, 42, .24);
    border-radius: 999px;
    color: var(--red-bright);
    background: rgba(215, 25, 42, .08);
    font-size: 20px;
}

.category-card span,
.chat-card span {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    color: var(--white);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}

.category-card::after {
    content: "\f061";
    position: absolute;
    right: 14px;
    top: 50%;
    color: rgba(255, 255, 255, .34);
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    transform: translateY(-50%);
}

.category-card.is-hot {
    border-color: rgba(255, 184, 48, .58);
    background:
        radial-gradient(circle at 88% 50%, rgba(255, 207, 51, .16), transparent 5rem),
        radial-gradient(circle at 22% 100%, rgba(255, 96, 20, .22), transparent 6rem),
        linear-gradient(135deg, rgba(42, 26, 18, .98), rgba(17, 19, 21, .98) 58%, rgba(90, 15, 10, .86));
}

.category-card.is-hot i {
    border-color: rgba(255, 207, 51, .34);
    color: #ffcf33;
    background: rgba(255, 207, 51, .1);
}

.chat-card {
    min-height: 148px;
    background:
        radial-gradient(circle at 52% 42%, rgba(215, 25, 42, .34), transparent 4.5rem),
        linear-gradient(135deg, #24272a, #111315 58%, #310a10);
}

.home-events-carousel {
    position: relative;
    margin-top: 12px;
}

.home-events-carousel-track {
    position: relative;
    min-height: 94px;
    overflow: hidden;
    border-radius: 8px;
}

.home-events-banner {
    position: relative;
    display: none;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    min-height: 92px;
    overflow: hidden;
    padding: 0 14px 0 0;
    border: 1px solid rgba(255, 207, 51, .22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 24%, rgba(255, 207, 51, .18), transparent 14rem),
        radial-gradient(circle at 52% 100%, rgba(215, 25, 42, .2), transparent 18rem),
        linear-gradient(135deg, rgba(169, 15, 29, .24), rgba(17, 19, 21, .98) 46%, rgba(255, 255, 255, .04));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-events-banner.is-active {
    display: grid;
}

.home-events-banner.is-vip-locked {
    border-color: rgba(255, 207, 51, .38);
}

.home-events-banner.is-vip-locked .home-events-banner-media img,
.home-events-banner-copy.is-blurred {
    filter: blur(7px);
    opacity: .58;
}

.home-events-vip-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #ffffff;
    background: rgba(8, 9, 10, .34);
    font-size: 12px;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.home-events-vip-lock i {
    margin-right: 8px;
    color: #ffcf33;
}

.home-events-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 207, 51, .42);
    box-shadow: 0 24px 44px rgba(0, 0, 0, .32);
}

.home-events-banner-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 92px;
    overflow: hidden;
    background: #08090a;
}

.home-events-banner-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 42%, rgba(17, 19, 21, .84)),
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .42));
    pointer-events: none;
}

.home-events-banner-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-events-banner-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 0;
}

.home-events-banner-kicker,
.home-events-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffcf33;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.home-events-banner strong {
    min-width: 0;
    overflow: hidden;
    color: var(--white);
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-events-banner small {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.home-events-banner small i {
    color: var(--red-bright);
}

.home-events-banner em {
    display: block;
    max-width: 760px;
    color: var(--silver);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.4;
}

.home-events-banner-action {
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 207, 51, .46);
    border-radius: 6px;
    color: var(--white);
    background: linear-gradient(180deg, rgba(255, 207, 51, .18), rgba(142, 91, 0, .24));
    white-space: nowrap;
}

.finder-events-banner {
    margin-bottom: 18px;
}

.home-events-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(8, 9, 10, .72);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .24);
    cursor: pointer;
    transform: translateY(-50%);
}

.home-events-carousel-button.is-prev {
    left: 8px;
}

.home-events-carousel-button.is-next {
    right: 8px;
}

.chat-card i {
    color: rgba(215, 25, 42, .72);
    font-size: 64px;
}

.support-screen {
    min-height: calc(100dvh - 68px);
    padding: 34px 16px 54px;
    background:
        radial-gradient(circle at 16% 12%, rgba(215, 25, 42, .2), transparent 20rem),
        linear-gradient(135deg, #070809, #151719 58%, #090a0b);
}

.support-shell {
    display: grid;
    gap: 18px;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.support-heading {
    display: grid;
    gap: 8px;
}

.support-heading span {
    color: var(--red-bright);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-contact-link {
    color: #25d366;
    font-weight: 950;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.support-heading h1 {
    margin: 0;
    color: var(--white);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.02;
}

.support-heading p {
    max-width: 660px;
    margin: 0;
    color: var(--silver);
    font-weight: 800;
}

.support-blocked-notice {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(215, 25, 42, .36);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(215, 25, 42, .12);
}

.support-blocked-notice i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(180deg, #d7192a, #8d0d18);
}

.support-blocked-notice strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 1000;
}

.support-blocked-notice p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.support-contact-form,
.support-chat-card,
.support-report-list {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(29, 32, 35, .94), rgba(11, 12, 13, .96));
    box-shadow: 0 18px 52px rgba(0, 0, 0, .34);
}

.support-contact-form {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.support-contact-form label {
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.support-contact-form input,
.support-contact-form textarea,
.support-chat-form input,
.support-chat-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: #ffffff;
    color: #111315;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.support-contact-form input,
.support-chat-form input {
    min-height: 44px;
    padding: 0 12px;
}

.support-contact-form textarea,
.support-chat-form textarea {
    min-height: 92px;
    padding: 12px;
    resize: vertical;
}

.support-admin-layout {
    display: grid;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    gap: 16px;
    min-height: 620px;
}

.support-report-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 620px;
    overflow-y: auto;
    padding: 12px;
}

.support-report-list a {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: var(--white);
    text-decoration: none;
}

.support-report-list a.is-active,
.support-report-list a:hover {
    border-color: rgba(255, 95, 43, .68);
    box-shadow: 0 0 18px rgba(255, 95, 43, .16);
}

.support-report-list small,
.support-report-list em {
    overflow: hidden;
    color: var(--silver);
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-chat-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 620px;
    overflow: hidden;
}

.support-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.support-chat-top div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.support-chat-top strong {
    color: var(--white);
    font-weight: 950;
}

.support-chat-top span {
    overflow: hidden;
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-close-button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    font-weight: 950;
    cursor: pointer;
}

.support-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.support-message {
    align-self: flex-start;
    max-width: min(76%, 620px);
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
}

.support-message.is-mine {
    align-self: flex-end;
    border-color: rgba(255, 95, 43, .4);
    background: linear-gradient(135deg, rgba(215, 25, 42, .9), rgba(255, 95, 43, .82));
}

.support-message small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 900;
}

.support-message p {
    margin: 0;
    color: var(--white);
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.support-empty-chat {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    min-height: 420px;
    padding: 24px;
    text-align: center;
}

.support-empty-chat i {
    color: var(--red-bright);
    font-size: 46px;
}

.support-empty-chat strong {
    color: var(--white);
    font-size: 22px;
    font-weight: 950;
}

.support-empty-chat span {
    color: var(--silver);
    font-weight: 800;
}

.support-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.support-chat-form input {
    grid-column: 1 / -1;
}

.support-chat-form button {
    width: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #d7192a, #ff5f2b);
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
}

.legal-screen {
    min-height: 70vh;
    padding: clamp(34px, 6vw, 72px) 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 25, 42, .14), transparent 26rem),
        linear-gradient(180deg, #111315, #08090a);
}

.legal-shell {
    display: grid;
    gap: 22px;
    width: min(980px, 100%);
    margin: 0 auto;
}

.legal-heading {
    display: grid;
    gap: 8px;
}

.legal-heading span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.legal-heading h1 {
    margin: 0;
    color: var(--white);
    font-size: clamp(30px, 5vw, 52px);
    line-height: .98;
    text-transform: uppercase;
}

.legal-heading p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 850;
}

.legal-content {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 4vw, 34px);
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    color: var(--silver);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.legal-content h2,
.legal-content h3,
.legal-content p,
.legal-content ul {
    margin: 0;
}

.legal-content h2 {
    padding-top: 10px;
    color: var(--white);
    font-size: 19px;
    line-height: 1.2;
    text-transform: uppercase;
}

.legal-content h3 {
    color: #ffcf33;
    font-size: 14px;
    text-transform: uppercase;
}

.legal-content p,
.legal-content li {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.65;
}

.legal-content strong {
    color: var(--white);
}

.legal-content ul {
    display: grid;
    gap: 6px;
    padding-left: 22px;
}

.auth-screen {
    display: grid;
    min-height: calc(100dvh - 68px);
    place-items: center;
    padding: 42px 16px;
    background:
        radial-gradient(circle at 18% 18%, rgba(215, 25, 42, .28), transparent 25rem),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .08), transparent 17rem),
        radial-gradient(circle at 58% 92%, rgba(215, 25, 42, .12), transparent 22rem),
        linear-gradient(135deg, #050607, #111417 54%, #070809);
}

.auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 460px);
    width: min(1120px, 100%);
    overflow: hidden;
    border: 1px solid rgba(215, 25, 42, .24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(31, 34, 37, .9), rgba(10, 11, 12, .96));
    box-shadow: 0 34px 90px rgba(0, 0, 0, .56), 0 0 0 1px rgba(255, 255, 255, .035) inset;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 24%, rgba(215, 25, 42, .28) 58%, transparent);
    opacity: .36;
    pointer-events: none;
}

.auth-brand-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 620px;
    padding: clamp(28px, 5vw, 58px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5, 6, 7, .96), rgba(8, 9, 10, .58)),
        radial-gradient(circle at 72% 32%, rgba(215, 25, 42, .42), transparent 18rem),
        radial-gradient(circle at 88% 74%, rgba(255, 255, 255, .08), transparent 12rem),
        linear-gradient(135deg, #171a1d, #08090a);
}

.auth-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 6, 7, .94), rgba(5, 6, 7, .5)),
        linear-gradient(120deg, transparent 0 35%, rgba(255, 255, 255, .065) 36%, transparent 37%),
        linear-gradient(180deg, rgba(0, 0, 0, .1) 0 54%, rgba(0, 0, 0, .72)),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .13), transparent 10rem);
}

.auth-brand-panel::after {
    content: "+18";
    position: absolute;
    top: 28px;
    right: 28px;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(215, 25, 42, .5);
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, .36);
    box-shadow: 0 0 22px rgba(215, 25, 42, .24);
    font-size: 18px;
    font-weight: 900;
}

.auth-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.auth-kicker,
.auth-heading span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(215, 25, 42, .3);
    border-radius: 999px;
    color: var(--red-bright);
    background: rgba(215, 25, 42, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-brand-copy h1 {
    margin: 12px 0 18px;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .92;
    text-transform: uppercase;
}

.auth-brand-copy h1 span {
    color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 18%, #dfe5eb 36%, #ffffff 52%, #b8c0ca 72%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, .45)) drop-shadow(0 0 24px rgba(255, 255, 255, .18));
}

.auth-brand-copy h1 strong {
    color: var(--red-bright);
    text-shadow: 0 0 18px rgba(215, 25, 42, .36);
}

.auth-brand-copy h1 small {
    color: var(--silver);
    font-size: .34em;
}

.auth-brand-copy p {
    margin: 0;
    max-width: 480px;
    color: var(--silver);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.auth-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.auth-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 999px;
    color: var(--silver);
    background: rgba(255, 255, 255, .045);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid rgba(215, 25, 42, .24);
    border-radius: 8px;
    color: var(--silver);
    background: rgba(0, 0, 0, .24);
    font-size: 13px;
    font-weight: 800;
}

.auth-warning i {
    color: var(--red-bright);
}

.auth-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 4vw, 44px);
    background:
        radial-gradient(circle at 100% 0%, rgba(215, 25, 42, .14), transparent 14rem),
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(10, 11, 12, .98);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 24px;
    padding: 5px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
}

.auth-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 999px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-tabs a.is-active {
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}

.auth-heading {
    margin-bottom: 24px;
}

.auth-heading h2 {
    margin: 8px 0 8px;
    color: var(--white);
    font-size: 38px;
    line-height: 1;
    text-transform: uppercase;
}

.auth-heading p {
    margin: 0;
    color: var(--silver);
    font-size: 15px;
    font-weight: 700;
}

.auth-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.auth-alert .profile-button {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

.auth-alert.is-error {
    border: 1px solid rgba(215, 25, 42, .4);
    color: var(--white);
    background: rgba(215, 25, 42, .14);
}

.auth-alert.is-success {
    border: 1px solid rgba(200, 204, 210, .24);
    color: var(--white);
    background: rgba(255, 255, 255, .07);
}

.auth-form {
    display: grid;
    gap: 12px;
}

.recaptcha-box {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 0;
}

.auth-form label {
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .052);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-field:focus-within {
    border-color: rgba(215, 25, 42, .5);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 3px rgba(215, 25, 42, .12);
}

.auth-field i {
    color: var(--silver-dark);
    width: 18px;
}

.auth-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--white);
    background: transparent;
    font: inherit;
    font-size: 15px;
}

.auth-field input::placeholder {
    color: rgba(200, 204, 210, .46);
}

.auth-password-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 50%;
    color: var(--silver);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.auth-password-toggle i {
    width: auto;
    color: inherit;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0;
}

.auth-row a,
.auth-switch a {
    color: var(--red-bright);
    font-size: 13px;
    font-weight: 900;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    line-height: 1.35;
}

.auth-check input {
    accent-color: var(--red-bright);
}

.auth-check a {
    color: var(--red-bright);
    font-weight: 950;
}

.auth-check.is-boxed {
    align-items: flex-start;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    margin-top: 8px;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 8px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 32px rgba(0, 0, 0, .34), 0 0 26px rgba(215, 25, 42, .12);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.auth-submit:hover {
    background: linear-gradient(180deg, #d51d2f, #9c0e1b);
}

.auth-switch {
    margin: 22px 0 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    padding: 18px;
}

.notice-modal.is-open {
    display: grid;
}

.notice-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(6px);
}

.notice-modal-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    padding: 28px;
    border: 1px solid rgba(215, 25, 42, .32);
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0%, rgba(215, 25, 42, .2), transparent 12rem),
        linear-gradient(180deg, #202326, #0f1112);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
}

.notice-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(200, 204, 210, .2);
    border-radius: 6px;
    color: var(--silver);
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
}

.notice-modal-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(215, 25, 42, .3);
    border-radius: 999px;
    color: var(--red-bright);
    background: rgba(215, 25, 42, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.notice-modal-card h2 {
    margin: 14px 38px 12px 0;
    color: var(--white);
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.notice-modal-card p {
    margin: 0 0 12px;
    color: var(--silver);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
}

.notice-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 8px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 42%, rgba(215, 25, 42, .26), transparent 18rem),
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .11), transparent 14rem),
        rgba(8, 9, 10, .74);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.loading-screen.is-active {
    opacity: 1;
    pointer-events: auto;
}

.loading-card {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: min(430px, 100%);
    padding: 32px 24px;
    border: 1px solid rgba(215, 25, 42, .28);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent),
        rgba(12, 13, 14, .58);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .6), 0 0 40px rgba(215, 25, 42, .12);
}

.loading-brand {
    display: inline-flex;
    align-items: baseline;
    font-size: clamp(38px, 11vw, 72px);
    font-weight: 900;
    line-height: .95;
    text-transform: uppercase;
    animation: loadingPulse 1.2s ease-in-out infinite;
}

.loading-brand span {
    color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 24%, #cdd2d8 48%, #ffffff 55%, #d7dce2 78%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .32));
}

.loading-brand strong {
    margin-left: 3px;
    color: var(--red-bright);
    text-shadow: 0 0 18px rgba(215, 25, 42, .58);
}

.loading-brand small {
    margin-left: 2px;
    color: var(--silver);
    font-size: .34em;
    font-weight: 900;
    text-transform: none;
}

.loading-bar {
    position: relative;
    width: min(260px, 100%);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(200, 204, 210, .18);
}

.loading-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffffff, var(--red-bright), #ffffff);
    box-shadow: 0 0 18px rgba(215, 25, 42, .58);
    animation: loadingBar 1s ease-in-out infinite;
}

.loading-card p {
    margin: 0;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-screen {
    min-height: calc(100dvh - 68px);
    padding: 34px 16px 54px;
    background:
        linear-gradient(180deg, rgba(8, 9, 10, .72), rgba(8, 9, 10, .94)),
        var(--profile-bg-image, none),
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--profile-accent, #d7192a) 28%, transparent), transparent 22rem),
        linear-gradient(135deg, var(--profile-bg, #111315), #08090a);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.finder-screen {
    min-height: calc(100dvh - 68px);
    padding: 28px 18px 54px;
    background:
        radial-gradient(circle at 18% 0, rgba(215, 25, 42, .2), transparent 28rem),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .08), transparent 18rem),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.finder-shell {
    display: grid;
    width: min(1180px, 100%);
    gap: 16px;
    margin: 0 auto;
}

.finder-heading,
.finder-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.finder-heading span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.finder-heading h1 {
    margin: 4px 0 0;
    color: var(--white);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    text-transform: uppercase;
}

.finder-heading p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
}

.finder-filter-panel,
.finder-section {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(17, 19, 21, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.finder-filter-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.finder-filter-panel label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.finder-filter-panel label > span {
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.finder-filter-panel input,
.finder-filter-panel select {
    width: 100%;
    min-height: 40px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 7px;
    outline: 0;
    color: var(--white);
    background: rgba(255, 255, 255, .065);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
}

.finder-filter-panel option {
    color: #111315;
    background: #fff;
}

.finder-check {
    display: grid;
    align-content: center;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 7px;
    background: rgba(255, 255, 255, .045);
}

.finder-check-group {
    display: grid;
    grid-column: span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    padding: 8px;
    border: 1px solid rgba(200, 204, 210, .1);
    border-radius: 8px;
    background: rgba(0, 0, 0, .16);
}

.finder-check span {
    text-align: center;
}

.finder-check input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.finder-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px;
}

.finder-filter-actions a,
.finder-filter-actions button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 7px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.finder-filter-actions button {
    border-color: rgba(215, 25, 42, .46);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.notice-modal-actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.notice-modal-actions .notice-modal-action {
    margin-top: 0;
}

.notice-modal-action.is-gold {
    border-color: rgba(255, 207, 51, .54);
    color: #fff7c6;
    background: linear-gradient(180deg, rgba(255, 207, 51, .26), rgba(142, 91, 0, .34));
}

.finder-section {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.finder-section-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: 18px;
    text-transform: uppercase;
}

.finder-section-heading span {
    display: inline-flex;
    min-width: 32px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(215, 25, 42, .34);
    border-radius: 999px;
    color: var(--red-bright);
    background: rgba(215, 25, 42, .1);
    font-size: 12px;
    font-weight: 900;
}

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

.finder-grid.is-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finder-card {
    position: relative;
    display: grid;
    min-height: 92px;
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
    color: var(--white);
    background: rgba(255, 255, 255, .052);
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.finder-card.has-story {
    cursor: pointer;
}

.finder-card.has-story:focus-visible {
    outline: 2px solid rgba(255, 207, 51, .78);
    outline-offset: 3px;
}

.finder-card-link {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.finder-grid.is-results .finder-card {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 320px;
    padding: 12px;
}

.finder-grid.is-results .finder-card.has-story {
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(16, 18, 20, .98)) padding-box,
        linear-gradient(135deg, #ffcf33, #ff255d 46%, #8b16ff) border-box;
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .12), 0 0 22px rgba(255, 37, 93, .22);
}

.finder-grid.is-results .finder-card-link {
    grid-template-columns: 1fr;
    gap: 12px;
}

.finder-grid.is-results .finder-card-photo {
    width: 100%;
    height: auto;
    min-height: 260px;
    aspect-ratio: 1 / 1;
    background: #08090a;
}

.finder-grid.is-results .finder-card-body {
    gap: 7px;
}

.finder-grid.is-results .finder-card-body strong {
    font-size: 16px;
}

.finder-grid.is-results .finder-card-body small,
.finder-grid.is-results .finder-card-body em {
    font-size: 12px;
}

.finder-card:hover {
    border-color: rgba(215, 25, 42, .38);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.finder-card-photo {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #111315;
    color: var(--white);
    font-size: 18px;
    font-weight: 900;
}

.finder-card-photo.has-active-story {
    padding: 3px;
    background: linear-gradient(135deg, #ffcf33, #ff255d 46%, #8b16ff);
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .14), 0 0 18px rgba(255, 37, 93, .28);
}

.finder-card-photo.has-active-story img,
.finder-card-photo.has-active-story b {
    width: 100%;
    height: 100%;
    border: 2px solid #111315;
    border-radius: 6px;
}

.finder-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
    background: #08090a;
}

.finder-story-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    border: 1px solid rgba(255, 207, 51, .28);
    border-radius: 7px;
    color: var(--white);
    background: rgba(255, 207, 51, .1);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.finder-story-button i {
    color: #ffdf6f;
}

.finder-card-body {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
}

.finder-card-body strong {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.finder-card-body small,
.finder-card-body em {
    color: var(--silver);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.finder-card-body em {
    color: #f4f4f2;
    font-style: normal;
    opacity: .88;
}

.finder-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    padding-top: 4px;
}

.finder-pagination a {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.finder-pagination a.is-active {
    border-color: rgba(215, 25, 42, .48);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
}

.encounters-shell {
    width: min(1280px, 100%);
}

.encounters-heading {
    align-items: center;
}

.encounters-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.encounters-slider-section {
    position: relative;
    overflow: hidden;
}

.encounters-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.encounters-slider-controls strong {
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
}

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

.encounter-card {
    gap: 10px;
}

.encounter-card.is-hot-profile {
    border-color: rgba(255, 184, 48, .7);
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .22), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .22), transparent 32%),
        linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(16, 18, 20, .98));
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .1), 0 0 22px rgba(255, 96, 20, .2);
}

.encounter-card.is-hot-profile .finder-hot-label {
    color: #ffcf33;
}

.encounter-card .profile-button {
    width: 100%;
}

.encounters-actions .profile-button,
.encounters-actions .profile-button i,
.encounters-actions .profile-button span {
    color: #ffffff;
}

.encounters-map-section {
    position: relative;
    min-height: 560px;
}

.encounters-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 207, 51, .32);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 207, 51, .12), rgba(215, 25, 42, .12)),
        rgba(13, 15, 18, .94);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.encounters-preview-banner div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.encounters-preview-banner span,
.encounters-preview-lock span {
    color: #ffcf33;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.encounters-preview-banner strong,
.encounters-preview-lock strong {
    color: var(--white);
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
}

.encounters-preview-banner p,
.encounters-preview-lock p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.encounters-preview-lock {
    position: absolute;
    inset: 16px;
    z-index: 20;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255, 207, 51, .32);
    border-radius: 8px;
    background: rgba(6, 7, 9, .68);
    text-align: center;
    backdrop-filter: blur(3px);
}

.encounters-preview-lock > i {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    color: #1b0909;
    background: linear-gradient(135deg, #ffcf33, #e31c2e);
    box-shadow: 0 0 28px rgba(255, 207, 51, .28);
}

.encounters-slider-section.is-locked-preview .encounters-grid,
.encounters-slider-section.is-locked-preview [data-encounters-empty],
.encounters-live-layout.is-locked-preview .encounters-map,
.encounters-live-layout.is-locked-preview .encounters-note-tool,
.encounters-live-layout.is-locked-preview .encounters-chat-panel > aside,
.encounters-live-layout.is-locked-preview .encounters-chat-panel > .chat-main {
    filter: blur(9px);
    opacity: .72;
    pointer-events: none;
    user-select: none;
}

.encounters-map-section.is-locked-preview .encounters-live-controls {
    opacity: .58;
    pointer-events: none;
}

.encounters-map-shell .encounters-preview-lock {
    inset: 18px;
}

.encounters-preview-lock.is-chat-lock {
    inset: 18px;
}

.encounters-live-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.encounters-live-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 7px;
    color: var(--white);
    background: rgba(255, 255, 255, .05);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.encounters-live-controls input {
    width: 130px;
    accent-color: #ffcf33;
}

.encounters-live-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--encounters-map-size, 50%)) minmax(0, var(--encounters-chat-size, 50%));
    gap: 12px;
    height: 520px;
    max-height: 520px;
    min-height: 0;
}

.encounters-map-shell {
    position: relative;
    height: 520px;
    min-height: 0;
    overflow: hidden;
}

.encounters-map {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(circle at 25% 26%, rgba(255, 207, 51, .16), transparent 16rem),
        radial-gradient(circle at 74% 70%, rgba(215, 25, 42, .18), transparent 18rem),
        linear-gradient(135deg, #111315, #071012 48%, #17090d);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.encounters-map:not(.is-missing-key) {
    background: #111315;
}

.encounters-chat-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 520px;
    max-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.encounters-chat-panel .chat-sidebar,
.encounters-chat-panel .chat-main {
    min-height: 0;
    overflow: hidden;
}

.encounters-chat-panel .chat-sidebar-heading {
    min-height: 46px;
    padding: 0 10px;
    font-size: 11px;
}

.encounters-chat-panel .chat-thread-list {
    padding: 6px;
}

.encounters-chat-panel .chat-thread {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 6px;
}

.encounters-chat-panel .chat-thread-avatar {
    width: 34px;
    height: 34px;
    font-size: 11px;
}

.encounters-chat-panel .chat-main-heading {
    min-height: 46px;
    padding: 0 10px;
    font-size: 12px;
}

.encounters-chat-panel .chat-messages {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding: 10px;
}

.encounters-chat-panel .chat-form {
    gap: 6px;
    padding: 8px;
}

.encounters-chat-panel .chat-form input {
    height: 38px;
}

.encounters-chat-panel .chat-form button {
    width: 38px;
    height: 38px;
}

.encounters-group-form {
    grid-template-columns: minmax(0, 1fr) 42px;
}

.encounters-reply-preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border-left: 3px solid #ffcf33;
    border-radius: 7px;
    color: #111315;
    background: #fff;
    font-size: 11px;
    font-weight: 900;
}

.encounters-reply-preview[hidden] {
    display: none;
}

.encounters-reply-preview span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.encounters-reply-preview button {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 0;
    color: #ffffff;
    background: #a90f1d;
}

.encounters-group-message {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    max-width: min(92%, 560px);
}

.encounters-group-message.is-mine {
    align-self: flex-end;
    grid-template-columns: minmax(0, 1fr) 34px;
}

.encounters-group-message.is-mine .encounters-group-avatar {
    order: 2;
}

.encounters-group-message > div {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 9px;
    color: #ffffff;
    background: #d7192a;
}

.encounters-group-message.is-mine > div {
    color: #ffffff;
    background: #8d0d18;
}

.encounters-group-message.is-reply-target > div {
    outline: 2px solid #ffcf33;
    box-shadow: 0 0 0 5px rgba(255, 207, 51, .14), 0 0 22px rgba(255, 207, 51, .22);
}

.encounters-group-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;
    background: #25282b;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.encounters-group-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encounters-group-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: #ffcf33;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    text-decoration: none;
}

.encounters-group-info {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 900;
}

.encounters-group-reply {
    margin: 0 0 7px;
    padding: 7px 8px;
    border-left: 3px solid #ffcf33;
    border-radius: 6px;
    color: #111315;
    background: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.encounters-group-message p {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.encounters-group-message small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 900;
}

.encounters-group-reply-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: auto;
    height: 24px;
    margin-top: 6px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.encounters-map-missing {
    position: absolute;
    inset: 20px;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: var(--white);
}

.encounters-map-missing strong {
    font-size: 18px;
    text-transform: uppercase;
}

.webcam-screen {
    min-height: calc(100dvh - 68px);
    padding: 16px 16px 34px;
    background:
        radial-gradient(circle at 20% 12%, rgba(215, 25, 42, .18), transparent 20rem),
        linear-gradient(135deg, #08090a, #151719 54%, #090a0b);
}

.webcam-shell {
    display: grid;
    gap: 12px;
    width: min(1320px, 100%);
    margin: 0 auto;
}

.webcam-heading {
    min-height: auto;
    padding: 0;
}

.webcam-heading h1 {
    max-width: 940px;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: .95;
}

.webcam-stage,
.webcam-room-layout,
.webcam-live-room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    min-height: 0;
}

.webcam-carousel-section {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.webcam-broadcast-column,
.webcam-local-panel,
.webcam-live-player,
.webcam-global-chat,
.webcam-stream-list,
.webcam-room-chat {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.webcam-local-panel {
    position: relative;
    display: grid;
    min-height: 420px;
}

.webcam-broadcast-column {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.webcam-live-player {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #050607;
}

.webcam-local-panel video,
.webcam-live-player video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    background: #050607;
}

.webcam-live-player video {
    position: absolute;
    inset: 0;
    min-height: 0;
}

.webcam-live-room[data-webcam-own-room="1"] [data-webcam-remote-video] {
    display: none;
}

.webcam-local-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
    min-height: 0;
    color: var(--white);
    text-align: center;
}

.webcam-local-placeholder[hidden],
.webcam-local-panel video[hidden],
.webcam-live-player video[hidden] {
    display: none;
}

.webcam-local-placeholder i {
    color: rgba(215, 25, 42, .78);
    font-size: 54px;
}

.webcam-local-placeholder span {
    color: var(--silver);
    font-size: 13px;
    font-weight: 850;
}

.webcam-local-placeholder.is-finalized {
    background: rgba(5, 6, 7, .92);
}

.webcam-local-placeholder.is-finalized i {
    color: #ffcf33;
}

.webcam-title-form {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
}

.webcam-live-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.webcam-live-info > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.webcam-live-info strong,
.webcam-live-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webcam-live-info strong {
    color: var(--white);
    font-size: 15px;
    font-weight: 950;
    text-transform: uppercase;
}

.webcam-live-info span {
    color: var(--silver);
    font-size: 12px;
    font-weight: 850;
}

.webcam-live-info .webcam-title-form {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
}

.webcam-title-form input {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    color: #ffffff;
    background: rgba(0, 0, 0, .62);
    font-weight: 900;
}

.webcam-title-form button {
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(180deg, #d7192a, #8d0d18);
}

.webcam-global-chat,
.webcam-room-chat {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: min(640px, calc(100dvh - 132px));
}

.webcam-global-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
    min-height: 0;
}

.webcam-users-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: min(640px, calc(100dvh - 132px));
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.webcam-users-panel .chat-main-heading span {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(215, 25, 42, .22);
    font-size: 11px;
    font-weight: 950;
}

.webcam-users-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
}

.webcam-user-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.webcam-user-item.is-live {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    border-color: rgba(215, 25, 42, .34);
    background: rgba(215, 25, 42, .08);
}

.webcam-user-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;
    background: #24282d;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.webcam-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.webcam-user-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.webcam-user-meta a,
.webcam-user-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webcam-user-meta a {
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.webcam-user-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--silver);
    font-size: 10px;
    font-weight: 850;
}

.webcam-user-meta span i {
    color: #ffcf33;
}

.webcam-user-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(180deg, #d7192a, #8d0d18);
    font-size: 10px;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.chatrooms-screen {
    min-height: calc(100dvh - 68px);
    padding: 12px 14px 14px;
    background: #070809;
}

.chatrooms-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    width: min(100%, 100%);
    min-height: calc(100dvh - 94px);
    margin: 0 auto;
}

.chatrooms-create-form {
    display: grid;
    grid-template-columns: minmax(180px, 280px) auto;
    gap: 8px;
    align-items: center;
}

.chatrooms-create-form input {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    color: #ffffff;
    background: rgba(0, 0, 0, .5);
    font-weight: 900;
}

.chatrooms-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 12px;
    height: calc(100dvh - 178px);
    min-height: 560px;
}

.chatrooms-room-panel,
.chatrooms-chat-panel,
.chatrooms-users-panel {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.chatrooms-room-panel,
.chatrooms-users-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

.chatrooms-chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.chatrooms-room-panel .chat-main-heading span,
.chatrooms-users-panel .chat-main-heading span {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(215, 25, 42, .22);
    font-size: 11px;
    font-weight: 950;
}

.chatrooms-room-list,
.chatrooms-users-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
}

.chatrooms-chat-panel .chat-messages {
    min-height: 0;
    overflow-y: scroll;
    scrollbar-color: rgba(215, 25, 42, .72) rgba(255, 255, 255, .08);
    scrollbar-width: thin;
}

.chatrooms-chat-panel .chat-messages::-webkit-scrollbar {
    width: 9px;
}

.chatrooms-chat-panel .chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
}

.chatrooms-chat-panel .chat-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(215, 25, 42, .72);
}

.webcam-user-avatar.has-active-story,
.encounters-group-avatar.has-active-story {
    box-sizing: border-box;
    padding: 2px;
    border: 2px solid #d7192a;
    background: linear-gradient(135deg, #d7192a, #ffcf33);
}

.webcam-user-avatar.has-active-story.is-subscriber,
.encounters-group-avatar.has-active-story.is-subscriber {
    border-color: #ffcf33;
}

.webcam-user-avatar.is-hot-profile,
.encounters-group-avatar.is-hot-profile {
    box-shadow: 0 0 0 2px rgba(255, 207, 51, .32), 0 0 18px rgba(215, 25, 42, .24);
}

.webcam-user-avatar.has-active-story img,
.encounters-group-avatar.has-active-story img,
.webcam-user-avatar.has-active-story b,
.encounters-group-avatar.has-active-story span {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.chatroom-room-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, .04);
    text-align: left;
    cursor: pointer;
}

.chatroom-room-item.is-active,
.chatroom-room-item:hover {
    border-color: rgba(215, 25, 42, .42);
    background: rgba(215, 25, 42, .1);
}

.chatroom-room-item span,
.chatroom-room-item strong,
.chatroom-room-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatroom-room-item span {
    display: grid;
    gap: 3px;
}

.chatroom-room-item strong {
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.chatroom-room-item small {
    color: var(--silver);
    font-size: 11px;
    font-weight: 850;
}

.chatroom-room-item em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.webcam-live-room .webcam-room-chat {
    height: min(640px, calc(100dvh - 132px));
}

.webcam-global-chat .chat-messages,
.webcam-room-chat .chat-messages {
    min-height: 0;
    overflow-y: auto;
}

.webcam-stream-list,
.webcam-carousel-section {
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: #111315;
}

.webcam-stream-grid,
.webcam-carousel {
    display: flex;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.webcam-stream-card {
    flex: 0 0 min(360px, 82vw);
    scroll-snap-align: start;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.webcam-stream-card.is-active {
    border-color: rgba(215, 25, 42, .58);
    box-shadow: 0 0 0 3px rgba(215, 25, 42, .12);
}

.webcam-stream-video {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 42%, rgba(215, 25, 42, .28), transparent 7rem),
        #08090a;
    font-size: 24px;
    font-weight: 950;
}

.webcam-stream-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .66));
    pointer-events: none;
}

.webcam-stream-video::before {
    content: "Vista previa";
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 5px 7px;
    border-radius: 6px;
    color: #ffffff;
    background: rgba(0, 0, 0, .74);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .22s ease;
}

.webcam-stream-video.is-preview-blurred::before {
    opacity: 1;
}

.webcam-stream-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050607;
    transform: scale(1);
    transition: filter .24s ease, opacity .24s ease, transform .24s ease;
}

.webcam-stream-video.is-preview-blurred video {
    filter: blur(9px);
    opacity: .9;
    transform: scale(2.04);
}

.webcam-stream-video > b[data-webcam-preview-placeholder] {
    position: relative;
    z-index: 2;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    font-size: 22px;
}

.webcam-stream-video > b[data-webcam-preview-placeholder][hidden] {
    display: none;
}

.webcam-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 5px 7px;
    border-radius: 6px;
    color: #ffffff;
    background: #d7192a;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.webcam-viewer-pill {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    color: #ffffff;
    background: rgba(0, 0, 0, .72);
    font-size: 10px;
    font-weight: 950;
}

.webcam-stream-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.webcam-stream-meta strong,
.webcam-stream-meta span,
.webcam-stream-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webcam-stream-meta strong {
    color: var(--white);
    font-size: 14px;
    font-weight: 950;
}

.webcam-stream-meta span {
    color: #ffcf33;
    font-size: 12px;
    font-weight: 900;
}

.webcam-stream-meta small {
    color: var(--silver);
    font-size: 11px;
    font-weight: 800;
}

.webcam-stream-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.webcam-chat-form {
    grid-template-columns: minmax(0, 1fr) 42px;
}

.webcam-chat-form .encounters-reply-preview {
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 207, 51, .55);
    border-left-width: 5px;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(255, 207, 51, .22), rgba(215, 25, 42, .18)),
        #17191b;
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .1);
}

.webcam-chat-form .encounters-reply-preview::before {
    content: "RESPUESTA";
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 5px;
    color: #111315;
    background: #ffcf33;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0;
}

.webcam-moderation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.webcam-moderation-actions button {
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.encounters-map-missing p {
    margin: 0;
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
}

.encounters-map-missing code {
    color: #ffcf33;
}

.encounters-map::before {
    content: "";
    position: absolute;
    inset: 11% 8% 14% 10%;
    border: 2px solid rgba(255, 255, 255, .08);
    border-width: 0 0 2px 2px;
    border-radius: 42% 58% 44% 56%;
    transform: rotate(-8deg);
    pointer-events: none;
}

.encounters-map:not(.is-missing-key)::before {
    display: none;
}

.encounters-map-layer {
    position: absolute;
    inset: 0;
}

.encounters-marker {
    position: absolute;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 92px;
    padding: 0;
    border: 0;
    color: var(--white);
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.encounters-marker span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255, 207, 51, .92);
    border-radius: 999px;
    background: #08090a;
    box-shadow: 0 0 0 5px rgba(255, 80, 20, .14), 0 12px 24px rgba(0, 0, 0, .38);
    font-size: 13px;
    font-weight: 900;
}

.encounters-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encounters-marker strong {
    max-width: 92px;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--white);
    background: rgba(0, 0, 0, .68);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.encounters-note {
    position: absolute;
    z-index: 3;
    width: min(220px, 42vw);
    padding: 10px;
    border: 1px solid rgba(255, 207, 51, .36);
    border-radius: 8px;
    color: var(--white);
    background: rgba(8, 9, 10, .86);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
    transform: translate(-50%, -100%);
}

.encounters-note strong,
.encounters-note p,
.encounters-note small {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
}

.encounters-note strong {
    font-size: 11px;
    text-transform: uppercase;
}

.encounters-note p {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 750;
}

.encounters-note small {
    margin-top: 5px;
    color: var(--silver);
    font-size: 10px;
    font-weight: 800;
}

.encounters-note-form {
    position: absolute;
    z-index: 30;
    display: grid;
    width: min(320px, calc(100% - 24px));
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 207, 51, .42);
    border-radius: 8px;
    color: var(--white);
    background: rgba(8, 9, 10, .94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}

.encounters-note-form::before {
    content: "Cartel de encuentros ya";
    color: #ffcf33;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.encounters-note-tool {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 207, 51, .78);
    border-radius: 999px;
    color: #111315;
    background: linear-gradient(180deg, #ffe36b, #ffb51f);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .36), 0 0 0 5px rgba(255, 207, 51, .14);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.encounters-note-tool i {
    font-size: 15px;
}

.encounters-note-tool.is-dragging {
    z-index: 35;
    cursor: grabbing;
    transform: scale(1.04);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .44), 0 0 0 7px rgba(255, 207, 51, .18);
}

.encounters-map .leaflet-pane,
.encounters-map .leaflet-top,
.encounters-map .leaflet-bottom {
    z-index: 10;
}

.encounters-map-popup {
    display: grid;
    gap: 5px;
    max-width: 240px;
    color: #111315;
    font-family: Arial, sans-serif;
}

.encounters-map-profile {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #111315;
    text-decoration: none;
}

.encounters-map-profile img,
.encounters-map-profile span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    color: #ffffff;
    background: #111315;
    font-size: 10px;
    font-weight: 900;
}

.encounters-map-profile img {
    object-fit: cover;
}

.encounters-map-popup strong {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.encounters-map-popup p,
.encounters-map-popup small {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.encounters-map-popup button {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #d7192a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.encounters-leaflet-user,
.encounters-leaflet-me,
.encounters-leaflet-note {
    background: transparent;
    border: 0;
}

.encounters-leaflet-user span,
.encounters-leaflet-me span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 3px solid #ffcf33;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #ff3f24, #8d0d18);
    box-shadow: 0 0 0 5px rgba(255, 80, 20, .18), 0 10px 22px rgba(0, 0, 0, .34);
    font-size: 11px;
    font-weight: 900;
}

.encounters-leaflet-me span {
    width: 26px;
    height: 26px;
    border-color: #ffffff;
    background: #2d8cff;
}

.encounters-leaflet-note i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid #111315;
    border-radius: 999px 999px 999px 3px;
    color: #111315;
    background: #ffcf33;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

.encounters-leaflet-note-card {
    background: transparent;
    border: 0;
}

.encounters-note-card {
    position: relative;
    display: grid;
    gap: 4px;
    width: 220px;
    min-height: 70px;
    padding: 28px 10px 10px;
    border: 1px solid rgba(255, 207, 51, .72);
    border-radius: 8px;
    color: #111315;
    background: #fff7d1;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
    overflow-wrap: anywhere;
}

.encounters-note-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 18px;
    height: 18px;
    background: #fff7d1;
    border-right: 1px solid rgba(255, 207, 51, .72);
    border-bottom: 1px solid rgba(255, 207, 51, .72);
    transform: translateX(-50%) rotate(45deg);
}

.encounters-note-card-profile {
    position: absolute;
    z-index: 2;
    top: -18px;
    left: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 3px solid #ffcf33;
    border-radius: 999px;
    color: #ffffff;
    background: #111315;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .32);
    transform: translateX(-50%);
    text-decoration: none;
}

.encounters-note-card-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encounters-note-card-profile span {
    font-size: 11px;
    font-weight: 900;
}

.encounters-leaflet-note-card strong {
    font-size: 11px;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.encounters-leaflet-note-card p {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.22;
    text-align: center;
}

.encounters-note-delete {
    justify-self: center;
    min-height: 24px;
    margin-top: 2px;
    padding: 0 9px;
    border: 1px solid rgba(169, 15, 29, .5);
    border-radius: 999px;
    color: #ffffff;
    background: #a90f1d;
    font: inherit;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.encounters-note-delete:hover {
    background: #d7192a;
}

.encounters-note-form[hidden] {
    display: none;
}

.encounters-note-author {
    display: flex;
    align-items: center;
    gap: 9px;
}

.encounters-note-author-photo {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 2px solid #ffcf33;
    border-radius: 999px;
    color: #ffffff;
    background: #111315;
}

.encounters-note-author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encounters-note-author-photo b {
    font-size: 11px;
    font-weight: 950;
}

.encounters-note-form strong {
    font-size: 12px;
    text-transform: uppercase;
}

.encounters-note-form textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 7px;
    padding: 10px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font: inherit;
}

.encounters-note-duration {
    display: grid;
    gap: 5px;
}

.encounters-note-duration span {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 5px;
    color: #000;
    background: #fff;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.encounters-note-duration select {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(200, 204, 210, .42);
    border-radius: 7px;
    padding: 0 10px;
    color: #000;
    background: #fff;
    font: inherit;
    font-weight: 800;
}

.encounters-note-duration option {
    color: #000;
    background: #fff;
}

.encounters-note-form div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 980px) {
    .encounters-live-layout {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .encounters-chat-panel {
        grid-template-columns: 1fr;
        height: 620px;
        max-height: 620px;
        min-height: 0;
    }

    .encounters-chat-panel .chat-sidebar {
        max-height: 190px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .finder-filter-panel,
    .finder-grid,
    .finder-grid.is-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finder-check-group {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .finder-heading {
        align-items: start;
        flex-direction: column;
    }

    .encounters-heading {
        align-items: stretch;
    }

    .encounters-actions {
        justify-content: stretch;
    }

    .encounters-preview-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .encounters-preview-banner .profile-button {
        width: 100%;
    }

    .encounters-actions .profile-button {
        flex: 1 1 100%;
    }

    .finder-filter-panel,
    .finder-grid,
    .finder-grid.is-results,
    .encounters-grid {
        grid-template-columns: 1fr;
    }

    .finder-filter-actions {
        justify-content: stretch;
    }

    .finder-check-group {
        grid-template-columns: 1fr;
    }

    .finder-filter-actions a,
    .finder-filter-actions button {
        flex: 1 1 0;
    }
}

.profile-shell {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.profile-hero-card,
.profile-panel,
.profile-empty,
.profile-stats {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(17, 19, 21, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.profile-hero-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    overflow: hidden;
}

.profile-cover {
    position: relative;
    grid-column: 1 / -1;
    min-height: 220px;
    margin: -22px -22px 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 9, 10, .08), rgba(8, 9, 10, .86)),
        var(--profile-bg-image, none),
        radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--profile-accent, #d7192a) 42%, transparent), transparent 15rem),
        linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #d7192a) 26%, #202326), #08090a);
    background-size: cover;
    background-position: center;
}

.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 9, 10, .08), rgba(8, 9, 10, .86));
    pointer-events: none;
}

.profile-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-owner-toolbar {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.profile-avatar {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 246px;
    height: 246px;
    aspect-ratio: 1;
    place-items: center;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 62%, transparent);
    border-radius: 8px;
    color: var(--white);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .18), transparent 3rem),
        linear-gradient(135deg, #303438, color-mix(in srgb, var(--profile-accent, #d7192a) 58%, #111315));
    font-size: 74px;
    font-weight: 900;
    margin-top: -164px;
    z-index: 1;
}

.profile-avatar.has-active-story {
    border-color: rgba(255, 37, 93, .78);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .42), 0 0 24px rgba(255, 37, 93, .32);
}

.profile-avatar.has-active-story::before,
.profile-avatar.has-active-story::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.profile-avatar.has-active-story::before {
    z-index: 2;
    padding: 5px;
    background: linear-gradient(135deg, #ffcf33, #ff255d 46%, #8b16ff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(255, 37, 93, .5));
}

.profile-avatar.has-active-story::after {
    display: none;
}

@supports not ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
    .profile-avatar.has-active-story::before {
        display: none;
    }
}

.profile-avatar-media {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
}

.profile-avatar-media > img,
.profile-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-avatar-media > span {
    color: var(--white);
}

.profile-avatar-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.profile-avatar-change-form {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 3;
    margin: 0;
    transform: translateX(-50%);
}

.profile-avatar-change {
    display: block;
    width: max-content;
    max-width: 220px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-avatar-change:hover {
    color: var(--white);
}

.profile-avatar-change input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.profile-title {
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.profile-title span,
.profile-panel-heading span {
    color: var(--profile-accent, var(--red-bright));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-title h1 {
    margin: 4px 0 6px;
    overflow-wrap: anywhere;
    color: var(--white);
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    text-transform: uppercase;
}

.profile-name-row h1 {
    margin-right: 0;
}

.profile-verified-check {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-left: .24em;
    color: #fff;
    font-size: 1em;
    line-height: 1;
    filter: drop-shadow(0 .06em .08em rgba(0, 0, 0, .24));
    text-shadow: 0 .05em .08em rgba(0, 59, 118, .28);
    text-transform: none;
    transition: transform .16s ease, filter .16s ease;
    vertical-align: -.1em;
}

.profile-verified-check[data-vip-badge-link] {
    cursor: pointer;
}

.profile-verified-check::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #4fb7ff 0%, #268de8 100%);
    clip-path: polygon(50% 0, 58% 8%, 69% 4%, 75% 14%, 86% 14%, 89% 25%, 98% 31%, 94% 42%, 100% 50%, 94% 58%, 98% 69%, 89% 75%, 86% 86%, 75% 86%, 69% 96%, 58% 92%, 50% 100%, 42% 92%, 31% 96%, 25% 86%, 14% 86%, 11% 75%, 2% 69%, 6% 58%, 0 50%, 6% 42%, 2% 31%, 11% 25%, 14% 14%, 25% 14%, 31% 4%, 42% 8%);
}

.profile-verified-check::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + .55em);
    z-index: 30;
    min-width: max-content;
    padding: .42em .58em;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    color: #fff;
    background: rgba(16, 18, 24, .96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-transform: none;
    transform: translate(-50%, .18em) scale(.96);
    transition: opacity .14s ease, transform .14s ease;
    white-space: nowrap;
}

.profile-verified-check > i {
    position: relative;
    z-index: 1;
    font-size: .56em;
    line-height: 1;
    transform: translateY(.01em);
}

.profile-verified-check:hover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.profile-verified-check:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .28)) brightness(1.08) saturate(1.08);
}

.profile-verified-check.is-blue {
    background: none;
}

.profile-verified-check.is-blue::before {
    background: linear-gradient(135deg, #5fc0ff 0%, #318fe7 52%, #1c73d1 100%);
}

.profile-verified-check.is-gold {
    background: none;
    text-shadow: 0 .05em .08em rgba(112, 72, 0, .3);
    filter: drop-shadow(0 .04em 0 #b77d00) drop-shadow(0 .08em .1em rgba(0, 0, 0, .24));
}

.profile-verified-check.is-gold::before {
    background: linear-gradient(135deg, #ffe45f 0%, #f4c91b 48%, #c99507 100%);
}

.profile-verified-check.is-gold:hover {
    filter: drop-shadow(0 .04em 0 #b77d00) drop-shadow(0 .09em .14em rgba(0, 0, 0, .28)) brightness(1.06) saturate(1.08);
}

.profile-title h1 .profile-verified-check {
    font-size: .5em;
    vertical-align: -.02em;
}

.profile-panel-heading .profile-verified-check,
.profile-name-row .profile-verified-check {
    font-size: 1em;
}

.profile-verified-check.is-inline {
    margin-left: .22em;
    font-size: 1em;
    vertical-align: -.1em;
}

.profile-verified-check.is-small {
    margin-left: .2em;
    font-size: 1em;
    vertical-align: -.1em;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .055);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #858b93;
}

.profile-status.is-online {
    border-color: rgba(42, 218, 118, .45);
    background: rgba(42, 218, 118, .12);
}

.profile-status.is-online i {
    background: #2ada76;
    box-shadow: 0 0 0 4px rgba(42, 218, 118, .14), 0 0 16px rgba(42, 218, 118, .78);
}

.profile-status.is-offline {
    color: var(--silver);
}

.profile-title p,
.profile-muted {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
}

.profile-title small {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 900;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.profile-button,
.media-card form button,
.story-meta button,
.comment-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(200, 204, 210, .22);
    border-radius: 6px;
    color: var(--white);
    background: linear-gradient(180deg, #272a2d, #17191b);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-button.is-primary {
    border-color: color-mix(in srgb, var(--profile-accent, #d7192a) 66%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--profile-accent, #d7192a) 88%, #ffffff 8%), color-mix(in srgb, var(--profile-accent, #d7192a) 64%, #08090a));
}

.profile-button.is-hot,
.finder-check.is-hot {
    position: relative;
    gap: 7px;
    overflow: hidden;
    border-color: rgba(255, 184, 48, .9);
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .92), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .9), transparent 32%),
        radial-gradient(circle at 84% 104%, rgba(215, 25, 42, .76), transparent 34%),
        linear-gradient(180deg, #651008 0%, #b8170e 42%, #1b0303 100%);
    box-shadow: inset 0 -10px 28px rgba(255, 93, 16, .44), inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 30px rgba(239, 62, 34, .4), 0 0 22px rgba(255, 133, 24, .24);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .72), 0 0 8px rgba(255, 209, 64, .34);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}

.profile-button.is-hot:hover,
.finder-check.is-hot:hover {
    transform: scale(1.08);
    border-color: rgba(255, 226, 82, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 16px 34px rgba(239, 62, 34, .44);
}

.profile-button.is-hot::before,
.profile-button.is-hot::after,
.finder-check.is-hot::before,
.finder-check.is-hot::after {
    content: "";
    position: absolute;
    inset: auto -14% -34% -14%;
    height: 132%;
    pointer-events: none;
}

.profile-button.is-hot::before,
.finder-check.is-hot::before {
    background:
        radial-gradient(ellipse 16% 62% at 12% 88%, rgba(255, 248, 146, .95) 0 13%, rgba(255, 132, 20, .88) 31%, rgba(215, 25, 42, .34) 50%, transparent 68%),
        radial-gradient(ellipse 18% 86% at 28% 90%, rgba(255, 253, 178, .98) 0 10%, rgba(255, 168, 30, .92) 25%, rgba(255, 75, 16, .72) 48%, transparent 72%),
        radial-gradient(ellipse 22% 105% at 48% 86%, rgba(255, 255, 206, .98) 0 9%, rgba(255, 193, 44, .94) 24%, rgba(255, 93, 17, .82) 46%, rgba(155, 13, 11, .38) 61%, transparent 76%),
        radial-gradient(ellipse 18% 82% at 68% 91%, rgba(255, 241, 126, .96) 0 12%, rgba(255, 133, 20, .88) 30%, rgba(215, 25, 42, .42) 50%, transparent 70%),
        radial-gradient(ellipse 15% 62% at 86% 88%, rgba(255, 246, 152, .9) 0 12%, rgba(255, 105, 18, .82) 30%, transparent 66%);
    filter: blur(.3px) drop-shadow(0 0 8px rgba(255, 180, 42, .9));
    mix-blend-mode: screen;
    opacity: .95;
    transform-origin: center bottom;
    animation: hotFlames 1.02s ease-in-out infinite alternate;
}

.profile-button.is-hot::after,
.finder-check.is-hot::after {
    inset: auto -20% -42% -18%;
    height: 120%;
    background:
        radial-gradient(ellipse 20% 76% at 18% 92%, rgba(255, 80, 15, .76) 0 22%, transparent 66%),
        radial-gradient(ellipse 16% 96% at 39% 88%, rgba(255, 215, 58, .86) 0 14%, rgba(255, 83, 16, .7) 36%, transparent 72%),
        radial-gradient(ellipse 18% 90% at 61% 90%, rgba(255, 246, 126, .78) 0 11%, rgba(255, 78, 16, .7) 34%, transparent 70%),
        radial-gradient(ellipse 20% 74% at 82% 92%, rgba(255, 92, 18, .72) 0 24%, transparent 66%);
    opacity: .7;
    mix-blend-mode: screen;
    transform-origin: center bottom;
    animation: hotFlamesBack .68s ease-in-out infinite alternate;
}

.profile-button.is-hot i,
.profile-button.is-hot span,
.finder-check.is-hot input,
.finder-check.is-hot span {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.profile-button.is-hot i {
    color: #ffffff;
    filter: drop-shadow(0 0 6px rgba(255, 210, 56, .78));
}

@keyframes hotFlames {
    0% {
        transform: translate3d(-1%, 9%, 0) scale(.97, .9) skewX(-7deg);
        opacity: .82;
    }

    50% {
        transform: translate3d(2%, -5%, 0) scale(1.04, 1.15) skewX(6deg);
        opacity: 1;
    }

    100% {
        transform: translate3d(-2%, -1%, 0) scale(1.08, 1.06) skewX(-4deg);
        opacity: .92;
    }
}

@keyframes hotFlamesBack {
    0% {
        transform: translate3d(2%, 7%, 0) scale(.94, .92) skewX(7deg);
        opacity: .48;
    }

    55% {
        transform: translate3d(-2%, -4%, 0) scale(1.08, 1.12) skewX(-9deg);
        opacity: .78;
    }

    100% {
        transform: translate3d(1%, -8%, 0) scale(1.02, 1.18) skewX(4deg);
        opacity: .58;
    }
}

@property --story-frame-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes storyGoldFrameRoute {
    from {
        --story-frame-angle: 0deg;
    }

    to {
        --story-frame-angle: 360deg;
    }
}

@keyframes storyAddPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.profile-button.is-danger {
    border-color: rgba(255, 75, 92, .58);
    background: linear-gradient(180deg, #9f1725, #4f090f);
}

.profile-button {
    gap: 7px;
    text-decoration: none;
}

.profile-report-form {
    display: grid;
    flex: 1 1 100%;
    gap: 8px;
    max-width: 440px;
    padding: 12px;
    border: 1px solid rgba(255, 75, 92, .38);
    border-radius: 8px;
    background: rgba(10, 12, 14, .78);
}

.profile-report-form[hidden] {
    display: none;
}

.profile-report-form label {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-report-form textarea {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border: 1px solid rgba(200, 204, 210, .2);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--white);
    background: rgba(0, 0, 0, .32);
    font: inherit;
    font-size: 14px;
}

.profile-report-form div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chat-modal {
    position: fixed;
    inset: 0;
    z-index: var(--modal-layer);
    display: none;
    place-items: center;
    padding: 18px;
}

.chat-modal.is-open {
    display: grid;
}

.chat-modal.is-minimized {
    display: block;
    pointer-events: none;
}

.chat-modal.is-minimized .chat-modal-backdrop,
.chat-modal.is-minimized .chat-window {
    display: none;
}

.chat-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .76);
}

.chat-window {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    width: min(980px, 100%);
    height: min(680px, calc(100vh - 36px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: #111315;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.chat-sidebar {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
    background: #151719;
}

.chat-sidebar-heading,
.chat-main-heading {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    overflow: visible;
}

.chat-call-actions {
    position: relative;
    z-index: 25;
    display: flex;
    gap: 8px;
}

.chat-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-call-actions a,
.chat-call-actions button,
.chat-tools button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: var(--white);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    text-decoration: none;
}

.chat-call-actions [data-tooltip] {
    position: relative;
}

.chat-call-actions [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    z-index: 9999;
    min-width: max-content;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    color: #fff;
    background: rgba(16, 18, 24, .96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-transform: none;
    transform: translate(-50%, -3px) scale(.96);
    transition: opacity .14s ease, transform .14s ease;
    white-space: nowrap;
}

.chat-call-actions [data-tooltip]:hover::after,
.chat-call-actions [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.chat-call-actions button.is-active {
    border-color: rgba(255, 207, 51, .72);
    color: #ffcf33;
    background: rgba(255, 207, 51, .12);
    animation: callPulse 1.25s ease-in-out infinite;
}

.profile-button.is-disabled {
    opacity: .65;
    cursor: not-allowed;
}

.chat-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: var(--silver);
    background: rgba(0, 0, 0, .22);
}

.chat-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--white);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.chat-search input::placeholder {
    color: rgba(200, 204, 210, .72);
}

.chat-sidebar-heading button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: var(--white);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.chat-minimized-button {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 125;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid rgba(215, 25, 42, .52);
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    pointer-events: auto;
    cursor: pointer;
}

.chat-thread-list {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
}

.chat-thread {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--white);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.chat-thread.is-active,
.chat-thread:hover {
    border-color: rgba(215, 25, 42, .32);
    background: rgba(215, 25, 42, .1);
}

.chat-thread-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #25282b;
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
}

.chat-thread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-thread span:last-child {
    min-width: 0;
}

.chat-thread strong,
.chat-thread small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-thread strong {
    font-size: 13px;
}

.chat-thread small {
    margin-top: 3px;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.chat-thread small b {
    color: var(--red-bright);
}

.chat-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    min-height: 0;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding: 16px;
}

.chat-message {
    max-width: min(72%, 520px);
    padding: 10px 12px;
    border-radius: 10px;
    color: #ffffff;
    background: var(--profile-accent, #d7192a);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.chat-message.is-mine {
    align-self: flex-end;
}

.chat-message.is-mine:not(.is-audio-only) {
    color: #ffffff;
    background: #8d0d18;
}

.chat-message.is-reply-target {
    outline: 2px solid #ffcf33;
    box-shadow: 0 0 0 5px rgba(255, 207, 51, .14), 0 0 22px rgba(255, 207, 51, .22);
}

.chat-message.is-audio-only {
    width: min(420px, 100%);
    max-width: 82%;
    padding: 0;
    background: transparent !important;
    box-shadow: none;
}

.chat-message.is-audio-only audio {
    display: block;
    width: 100%;
}

.chat-message small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 900;
}

.chat-message-media {
    display: block;
    max-width: 260px;
    max-height: 260px;
    margin-bottom: 7px;
    border-radius: 8px;
}

.chat-message audio {
    width: min(420px, 100%);
}

.chat-delete-button {
    margin-top: 6px;
    border: 0;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.chat-message-reply {
    margin: 0 0 7px;
    padding: 7px 8px;
    border-left: 3px solid #ffcf33;
    border-radius: 6px;
    color: #111315;
    background: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.chat-reply-button {
    margin-top: 6px;
    margin-left: 6px;
    border: 0;
    color: #ffcf33;
    background: transparent;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
}

.chat-reply-preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border-left: 3px solid #ffcf33;
    border-radius: 7px;
    color: #111315;
    background: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.chat-reply-preview[hidden] {
    display: none;
}

.chat-reply-preview span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-preview button {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: #a90f1d;
    cursor: pointer;
}

.chat-message-call-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.chat-call-inline-button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: var(--white);
    background: var(--profile-accent, #d7192a);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.chat-call-inline-button.is-reject {
    background: rgba(255, 255, 255, .14);
}

.chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 44px;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.chat-tools {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.emoji-picker-host {
    position: relative;
}

.emoji-picker {
    position: relative;
    display: inline-flex;
}

.emoji-picker-toggle,
.emoji-picker-popover button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 6px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
}

.emoji-picker-toggle {
    color: #ffcf33;
}

.emoji-picker-toggle[aria-expanded="true"] {
    border-color: rgba(255, 207, 51, .5);
    background: rgba(255, 207, 51, .12);
}

.emoji-picker-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(6, 34px);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 8px;
    background: linear-gradient(180deg, #202326, #111315);
    box-shadow: var(--shadow);
}

.emoji-picker-popover[hidden] {
    display: none;
}

.emoji-picker-popover button {
    padding: 0;
    font-size: 18px;
}

.emoji-picker-popover button:hover {
    border-color: rgba(255, 207, 51, .46);
    background: rgba(255, 207, 51, .12);
}

.chat-tools input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: transparent;
}

.chat-tools span {
    min-width: 0;
    overflow: hidden;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-typing {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 5px 9px;
    border: 1px solid rgba(255, 207, 51, .22);
    border-radius: 999px;
    color: #ffcf33;
    background: rgba(255, 207, 51, .08);
    font-size: 11px;
    font-weight: 900;
}

.chat-tools button.is-active {
    border-color: #ffcf33;
    color: #ffcf33;
}

.chat-form input {
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: var(--white);
    background: rgba(0, 0, 0, .32);
    font: inherit;
}

.chat-form button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 66%, transparent);
    border-radius: 50%;
    color: var(--white);
    background: var(--profile-accent, #d7192a);
    cursor: pointer;
}

.chat-record-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    grid-column: 1 / -1;
    color: #ffcf33;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.chat-record-status:empty {
    display: none;
}

.chat-record-status::before {
    content: "";
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3f52;
    box-shadow: 0 0 0 4px rgba(255, 63, 82, .14), 0 0 14px rgba(255, 63, 82, .72);
}

.chat-record-status.is-recording::before {
    display: block;
}

.messages-screen {
    min-height: calc(100dvh - 68px);
    padding: 28px 18px 54px;
    background:
        radial-gradient(circle at 18% 0, rgba(215, 25, 42, .2), transparent 28rem),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .08), transparent 18rem),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.messages-shell {
    display: grid;
    width: min(1180px, 100%);
    gap: 16px;
    margin: 0 auto;
}

.messages-chat-surface {
    display: block;
}

.messages-window {
    width: 100%;
    height: min(720px, calc(100dvh - 180px));
    min-height: 560px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.messages-window .chat-sidebar-heading span {
    display: inline-flex;
    min-width: 30px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(215, 25, 42, .34);
    border-radius: 999px;
    color: var(--red-bright);
    background: rgba(215, 25, 42, .1);
    font-size: 12px;
    font-weight: 900;
}

.chat-record-progress {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.chat-record-progress i {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff3f52, #ffcf33);
    animation: loadingBar 1s ease-in-out infinite;
}

.chat-call-modal {
    position: fixed;
    inset: 0;
    z-index: var(--call-modal-layer);
    display: none;
    place-items: center;
    padding: 18px;
}

.chat-call-modal.is-open {
    display: grid;
}

.chat-call-modal.is-floating {
    inset: auto 18px 18px auto;
    display: none;
    width: min(520px, calc(100vw - 24px));
    height: auto;
    padding: 0;
    place-items: stretch;
    pointer-events: none;
}

.chat-call-modal.is-floating.is-open {
    display: block;
}

.chat-call-modal.is-floating .chat-modal-backdrop {
    display: none;
}

.chat-call-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(520px, 100%);
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: var(--white);
    background: #111315;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.chat-call-modal[data-call-state="calling"] .chat-call-card,
.chat-audio-call-widget[data-call-state="calling"],
.chat-call-modal[data-call-state="incoming"] .chat-call-card,
.chat-audio-call-widget[data-call-state="incoming"] {
    border-color: rgba(255, 207, 51, .72);
    box-shadow: 0 0 0 1px rgba(255, 207, 51, .2), 0 24px 70px rgba(0, 0, 0, .62);
}

.chat-call-modal[data-call-state="connected"] .chat-call-card,
.chat-audio-call-widget[data-call-state="connected"] {
    border-color: rgba(48, 214, 125, .58);
}

.chat-call-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: grab;
    user-select: none;
}

.chat-call-card-header:active {
    cursor: grabbing;
}

.chat-call-card-header strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-call-card-header small {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #bff6d4;
    background: rgba(48, 214, 125, .12);
    font-size: 12px;
    font-weight: 1000;
    text-align: center;
}

.chat-call-card::before,
.chat-audio-call-widget::before {
    display: inline-flex;
    width: max-content;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
}

.chat-call-modal[data-call-state="calling"] .chat-call-card::before,
.chat-audio-call-widget[data-call-state="calling"]::before {
    content: "Llamando";
    color: #111315;
    background: #ffcf33;
}

.chat-call-modal[data-call-state="incoming"] .chat-call-card::before,
.chat-audio-call-widget[data-call-state="incoming"]::before {
    content: "Llamada entrante";
    color: #111315;
    background: #ffcf33;
    animation: callPulse 1.05s ease-in-out infinite;
}

.chat-call-modal[data-call-state="connected"] .chat-call-card::before,
.chat-audio-call-widget[data-call-state="connected"]::before {
    content: "En llamada";
    color: #07130d;
    background: #30d67d;
}

.chat-call-modal[data-call-state="error"] .chat-call-card::before,
.chat-audio-call-widget[data-call-state="error"]::before {
    content: "Error";
    color: #fff;
    background: #d7192a;
}

.chat-call-modal.is-floating .chat-call-card {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    width: 100%;
    min-width: 300px;
    min-height: 260px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    resize: both;
    pointer-events: auto;
}

.chat-call-card video {
    width: 100%;
    min-height: 180px;
    max-height: min(56vh, 420px);
    border-radius: 12px;
    background: #050607;
    object-fit: contain;
}

.chat-call-modal.is-floating .chat-call-card video[data-chat-call-remote-video] {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.chat-call-card video[data-chat-call-video] {
    justify-self: end;
    width: min(160px, 38%);
    max-height: 120px;
}

.chat-video-call-controls {
    display: flex;
    gap: 10px;
}

.chat-video-call-controls[hidden] {
    display: none;
}

.chat-video-call-controls button {
    display: inline-flex;
    flex: 1;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .14);
    font-weight: 900;
    cursor: pointer;
}

.chat-video-call-controls button:last-child {
    background: #d7192a;
}

.chat-video-call-controls button.is-muted {
    color: #111315;
    background: #ffcf33;
}

.chat-call-incoming-actions {
    display: flex;
    gap: 10px;
}

.chat-call-incoming-actions[hidden] {
    display: none;
}

.chat-call-incoming-actions button {
    flex: 1;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    color: var(--white);
    background: var(--profile-accent, #d7192a);
    font-weight: 900;
    cursor: pointer;
}

.chat-audio-call-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: var(--call-modal-layer);
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    color: var(--white);
    background: #111315;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .58);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.chat-audio-call-widget:active {
    cursor: grabbing;
}

.chat-audio-call-widget[hidden] {
    display: none;
}

.chat-audio-call-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.chat-audio-call-handle:active {
    cursor: grabbing;
}

.chat-audio-call-handle span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.chat-audio-call-handle strong,
.chat-audio-call-handle small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-audio-call-handle strong {
    font-size: 13px;
    font-weight: 900;
}

.chat-audio-call-handle small {
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
}

.chat-audio-call-buttons {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

.chat-audio-call-buttons button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: #d7192a;
    cursor: pointer;
}

.chat-audio-call-actions,
.chat-audio-call-buttons {
    cursor: auto;
}

.chat-audio-call-buttons button[data-chat-audio-call-mute] {
    background: rgba(255, 255, 255, .14);
}

.chat-audio-call-buttons button[data-chat-audio-call-mute].is-muted {
    color: #111315;
    background: #ffcf33;
}

.chat-audio-call-widget p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 800;
}

.chat-call-navigation {
    position: fixed;
    inset: 0;
    z-index: calc(var(--call-modal-layer) - 1);
    display: none;
    background: #08090a;
}

.chat-call-navigation.is-open {
    display: block;
}

.chat-call-navigation iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #111315;
}

@keyframes callPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 207, 51, .34);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(255, 207, 51, 0);
    }
}

.chat-audio-call-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.chat-audio-call-actions[hidden] {
    display: none;
}

.chat-audio-call-actions button {
    flex: 1;
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    color: var(--white);
    background: var(--profile-accent, #d7192a);
    font-weight: 900;
    cursor: pointer;
}

.chat-audio-call-actions button:last-child {
    background: rgba(255, 255, 255, .14);
}

.profile-mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 42%, transparent);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .055);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.profile-upload-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 62%, transparent);
    border-radius: 999px;
    color: var(--white);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #d7192a) 92%, #ffcf33 8%), #8f101c);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--profile-accent, #d7192a) 28%, transparent);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-upload-cta i {
    font-size: 15px;
}

.story-floating-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 28% 22%, #ffcf33 0 18%, #ff255d 48%, #8b16ff 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .52), 0 0 0 5px rgba(255, 64, 111, .18), 0 0 22px rgba(255, 37, 93, .5);
    font-size: 21px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: storyAddPulse 1.9s ease-in-out infinite;
}

.story-floating-add span {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: 160px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #111315;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
    text-transform: uppercase;
    transform: translateX(50%) translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.story-floating-add:hover span,
.story-floating-add:focus-visible span {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

.story-floating-add:hover,
.story-floating-add:focus-visible {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .58), 0 0 0 7px rgba(255, 207, 51, .16), 0 0 30px rgba(255, 37, 93, .62);
}

.profile-avatar-actions,
.profile-view-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    place-items: center;
    padding: 18px;
}

.profile-avatar-actions.is-open,
.profile-view-modal.is-open {
    display: grid;
}

.profile-avatar-actions-backdrop,
.profile-view-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .72);
    cursor: pointer;
}

.profile-avatar-actions-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: min(360px, 100%);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(17, 19, 21, .98);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}

.profile-avatar-actions-card > strong {
    padding: 0 4px 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.profile-avatar-actions-card > button:not(.story-composer-close) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.profile-avatar-actions-card > button:not(.story-composer-close) i {
    color: #ffcf33;
}

.profile-avatar-actions-card .story-composer-close {
    justify-self: end;
}

.profile-view-card {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100vw - 36px), calc(100dvh - 120px));
    overflow: visible;
}

.profile-view-card .story-composer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.profile-view-photo {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #111315;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}

.profile-view-story {
    position: relative;
    display: grid;
    width: 100%;
    gap: 10px;
}

.profile-view-story[hidden],
.profile-view-photo[hidden] {
    display: none !important;
}

.profile-story-slide {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #111315;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}

.profile-story-slide[hidden] {
    display: none;
}

.profile-story-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .54);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    cursor: pointer;
    transform: translateY(-50%);
}

.profile-story-nav.is-prev {
    left: 12px;
}

.profile-story-nav.is-next {
    right: 12px;
}

.profile-story-nav:hover {
    background: var(--profile-accent, var(--red-bright));
}

.profile-story-slide img,
.profile-story-slide video,
.profile-view-photo img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: contain;
    object-position: center;
}

.profile-story-slide p {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 28px;
    background: transparent;
    overflow-wrap: anywhere;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}

.profile-story-slide p.is-media-caption {
    position: absolute;
    left: var(--story-text-x, 50%);
    top: var(--story-text-y, 50%);
    width: min(84%, 330px);
    padding: 0;
    background: transparent;
    font-size: 26px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .36);
    transform: translate(-50%, -50%);
}

.profile-story-slide p span,
.story-card > p span {
    padding: .1em .28em;
    border-radius: .24em;
    background: color-mix(in srgb, currentColor 8%, rgba(0, 0, 0, .58));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.profile-story-counter {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.profile-story-status {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.profile-story-progress {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}

.profile-story-progress i {
    display: block;
    width: var(--story-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7a18, #ffcf33);
}

.profile-story-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
}

.profile-story-actions form {
    margin: 0;
}

.profile-story-actions button,
.profile-story-actions input,
.profile-story-actions select {
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.profile-story-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    cursor: pointer;
}

.profile-story-actions button.is-liked {
    border-color: rgba(255, 64, 111, .82);
    color: #ff406f;
}

.profile-story-views {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.profile-story-views > strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-story-viewers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-story-viewers[hidden] {
    display: none;
}

.profile-story-viewers a,
.profile-story-viewers span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.profile-story-comment-form,
.profile-story-forward-form {
    display: flex;
    gap: 6px;
}

.profile-story-comment-form input,
.profile-story-forward-form select {
    width: 100%;
    padding: 0 12px;
}

.profile-story-forward-form {
    grid-column: 1 / -1;
}

.profile-story-forward-open {
    grid-column: 1 / -1;
}

.profile-story-forward-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    place-items: center;
    padding: 18px;
}

.profile-story-forward-modal.is-open {
    display: grid;
}

.profile-story-forward-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .72);
}

.profile-story-forward-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(420px, 100%);
    max-height: min(620px, calc(100vh - 36px));
    gap: 14px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: #111315;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.profile-story-forward-card > strong {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.profile-story-forward-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.profile-story-forward-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .055);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.profile-story-forward-list input {
    accent-color: var(--profile-accent, #d7192a);
}

.profile-view-photo {
    aspect-ratio: 1;
}

.profile-view-photo span {
    color: #fff;
    font-size: 86px;
    font-weight: 900;
}

.profile-social-stats {
    margin: 14px 0;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent),
        rgba(17, 19, 21, .78);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
}

.profile-stats.has-visitors {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-stats span {
    display: grid;
    gap: 3px;
    padding: 14px;
    color: var(--silver);
    background: rgba(255, 255, 255, .025);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.profile-stats strong {
    color: var(--white);
    font-size: 22px;
}

.profile-latest-visitors {
    margin: 0;
}

.profile-latest-visitors-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.profile-latest-visitor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.profile-latest-visitor:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--profile-accent, #d7192a) 48%, rgba(255, 255, 255, .16));
    background: rgba(255, 255, 255, .06);
}

.profile-latest-visitor-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--profile-accent, #d7192a) 62%, rgba(255, 255, 255, .18));
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #33373b, #151719 48%, #3b0c13);
    font-size: 13px;
    font-weight: 950;
}

.profile-latest-visitor-avatar.is-subscriber {
    border-color: #ffcf33;
    box-shadow: 0 0 16px rgba(255, 207, 51, .24);
}

.profile-latest-visitor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-latest-visitor span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-latest-visitor strong {
    overflow: hidden;
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-latest-visitor small {
    color: var(--silver-dark);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-visitors-pagination {
    margin-top: 14px;
    justify-content: center;
}

.profile-highlights {
    display: flex;
    gap: 14px;
    margin: 0 0 14px;
    padding: 14px 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.profile-highlights:empty {
    display: none;
}

.highlight-bubble {
    position: relative;
    display: grid;
    flex: 0 0 82px;
    justify-items: center;
    gap: 7px;
    color: var(--silver);
    text-align: center;
}

.highlight-view-trigger {
    display: grid;
    justify-items: center;
    gap: 7px;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.highlight-view-trigger > span {
    position: relative;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #ffcf33;
    border-radius: 50%;
    background: #151719;
    box-shadow: 0 0 0 3px #111315, 0 0 0 5px rgba(255, 207, 51, .2);
    font-size: 24px;
    font-weight: 900;
}

.highlight-bubble.is-add > span {
    border-color: var(--red-bright);
    color: var(--red-bright);
    background: rgba(215, 25, 42, .1);
}

.highlight-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-view-item img,
.highlight-view-item video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.highlight-bubble strong,
.highlight-view-trigger strong {
    width: 82px;
    overflow: hidden;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.highlight-bubble form button {
    position: absolute;
    top: -2px;
    right: 6px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 50%;
    color: var(--white);
    background: rgba(8, 9, 10, .88);
    cursor: pointer;
}

.highlight-view-modal {
    position: fixed;
    inset: 0;
    z-index: 106;
    display: none;
    place-items: center;
    padding: 18px;
}

.highlight-view-modal.is-open {
    display: grid;
}

.highlight-view-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .76);
}

.highlight-view-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(430px, 100%);
    max-height: calc(100vh - 36px);
    gap: 10px;
    overflow: hidden;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: #050607;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.highlight-view-card > strong {
    min-height: 28px;
    padding: 0 42px 0 4px;
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.highlight-view-frame {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: 16px;
    background: #111315;
}

.highlight-view-items {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.highlight-view-items::-webkit-scrollbar {
    display: none;
}

.highlight-view-item {
    display: grid;
    flex: 0 0 100%;
    aspect-ratio: 9 / 16;
    min-height: min(650px, calc(100vh - 118px));
    place-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    background: #111315;
}

.highlight-view-item p {
    margin: 0;
    padding: 22px;
    overflow-wrap: anywhere;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}

.highlight-view-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: var(--white);
    background: rgba(5, 6, 7, .68);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    cursor: pointer;
    transform: translateY(-50%);
}

.highlight-view-nav.is-prev {
    left: 10px;
}

.highlight-view-nav.is-next {
    right: 10px;
}

.highlight-view-nav:disabled {
    opacity: .35;
    cursor: default;
}

.highlight-create-form {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.highlight-create-form label {
    display: grid;
    gap: 7px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.highlight-create-form input[type="text"] {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 6px;
    color: var(--white);
    background: #111315;
    font: inherit;
    font-size: 13px;
}

.highlight-story-picker {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 8px;
}

.highlight-story-picker label {
    position: relative;
    display: block;
    flex: 0 0 auto;
    cursor: pointer;
}

.highlight-story-picker input {
    position: absolute;
    opacity: 0;
}

.highlight-story-picker span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(200, 204, 210, .2);
    border-radius: 50%;
    background: #151719;
}

.highlight-story-picker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-story-picker input:checked + span {
    border-color: #ffcf33;
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .18);
}

.highlight-bubble.is-add {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.profile-form.is-collapsed {
    display: none;
}

.profile-form.is-open {
    display: grid;
    animation: profilePanelIn .16s ease-out;
}

@keyframes profilePanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 18px;
}

.wall-screen {
    min-height: calc(100vh - 84px);
    padding: 28px 24px 52px;
    background:
        radial-gradient(circle at 18% 0, rgba(215, 25, 42, .18), transparent 30%),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.wall-shell {
    display: grid;
    width: min(980px, 100%);
    gap: 14px;
    margin: 0 auto;
}

@media (min-width: 1500px) {
    .wall-shell {
        width: min(1040px, 100%);
    }
}

.wall-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px;
}

.wall-heading span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.wall-heading h1 {
    margin: 4px 0 0;
    color: var(--white);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    text-transform: uppercase;
}

.wall-stories,
.wall-composer,
.wall-post {
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
    background: rgba(17, 19, 21, .92);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

.wall-stories {
    position: relative;
    overflow: hidden;
}

.wall-stories-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 16px 54px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.wall-stories-track::-webkit-scrollbar {
    display: none;
}

.wall-stories-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--white);
    background: rgba(8, 9, 10, .78);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
    cursor: pointer;
    transform: translateY(-50%);
}

.wall-stories-nav.is-prev {
    left: 12px;
}

.wall-stories-nav.is-next {
    right: 12px;
}

.wall-stories-nav:disabled {
    opacity: .34;
    cursor: default;
}

.wall-story {
    display: grid;
    flex: 0 0 95px;
    justify-items: center;
    gap: 5px;
    border: 0;
    color: var(--white);
    background: transparent;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.wall-story-avatar,
.wall-post-avatar,
.wall-reply-avatar,
.wall-composer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #25282b;
    color: var(--white);
    font-weight: 900;
}

.wall-story-avatar {
    width: 64px;
    height: 64px;
}

.wall-story-avatar img,
.wall-post-avatar img,
.wall-reply-avatar img,
.wall-composer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wall-story strong {
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.wall-story small {
    color: var(--silver);
    font-size: 10px;
    font-weight: 800;
}

.wall-hot-label {
    color: #ffcf33 !important;
    font-weight: 950 !important;
}

.wall-story-avatar.is-hot-profile,
.wall-post-avatar.is-hot-profile,
.wall-reply-avatar.is-hot-profile {
    padding: 3px;
    background:
        radial-gradient(circle at 50% 112%, rgba(255, 246, 116, .92), transparent 24%),
        radial-gradient(circle at 20% 100%, rgba(255, 96, 20, .9), transparent 32%),
        linear-gradient(180deg, #ff6b22, #a90f1d);
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .14), 0 0 20px rgba(255, 96, 20, .34);
}

.wall-story-avatar.has-active-story,
.wall-post-avatar.has-active-story,
.wall-reply-avatar.has-active-story {
    padding: 3px;
    background: linear-gradient(135deg, #ffcf33, #ff255d 46%, #8b16ff);
    box-shadow: 0 0 0 3px rgba(255, 207, 51, .18), 0 0 22px rgba(255, 37, 93, .32);
}

.wall-story-avatar.has-active-story.is-subscriber,
.wall-post-avatar.has-active-story.is-subscriber,
.wall-reply-avatar.has-active-story.is-subscriber {
    background:
        conic-gradient(
            from var(--story-frame-angle, 0deg),
            rgba(122, 75, 10, .72),
            #f5c94a 9%,
            #fff4a8 14%,
            #b67a16 22%,
            rgba(122, 75, 10, .78) 34%,
            #f1b83a 48%,
            #fff7bd 54%,
            #c08418 64%,
            rgba(122, 75, 10, .72) 78%,
            #f5c94a 90%,
            rgba(122, 75, 10, .72)
        );
    box-shadow: 0 0 0 3px rgba(255, 214, 92, .22), 0 0 24px rgba(245, 201, 74, .36);
    animation: storyGoldFrameRoute 2.6s linear infinite;
}

.wall-story-avatar.has-active-story img,
.wall-story-avatar.has-active-story b,
.wall-post-avatar.has-active-story img,
.wall-post-avatar.has-active-story span,
.wall-reply-avatar.has-active-story img,
.wall-reply-avatar.has-active-story span,
.wall-story-avatar.is-hot-profile img,
.wall-story-avatar.is-hot-profile b,
.wall-post-avatar.is-hot-profile img,
.wall-post-avatar.is-hot-profile span,
.wall-reply-avatar.is-hot-profile img,
.wall-reply-avatar.is-hot-profile span {
    width: 100%;
    height: 100%;
    border: 2px solid #111315;
    border-radius: 50%;
}

.wall-composer {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
}

.wall-composer-avatar,
.wall-post-avatar {
    width: 64px;
    height: 64px;
}

.wall-composer textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    border: 0;
    border-bottom: 1px solid rgba(200, 204, 210, .12);
    border-radius: 0;
    color: var(--white);
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.wall-composer textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .3);
}

.wall-tool-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.wall-tool-row button,
.wall-file-tool,
.wall-reply-form button {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    cursor: pointer;
}

.wall-file-tool input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wall-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.wall-composer-actions small {
    color: var(--silver);
    font-size: 11px;
    font-weight: 800;
}

.wall-feed {
    display: grid;
    gap: 12px;
}

.wall-post {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
}

.wall-post-body header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.wall-post-body header a {
    color: var(--white);
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
}

.wall-post-body header small,
.wall-post-body time {
    display: block;
    color: var(--silver);
    font-size: 12px;
    font-weight: 800;
}

.wall-post-body p {
    margin: 12px 0 0;
    color: #f2f3f5;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wall-post-image,
.wall-reply-image {
    display: block;
    width: 100%;
    max-height: 760px;
    margin-top: 12px;
    object-fit: contain;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 8px;
}

.wall-image-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
    text-align: left;
}

.wall-image-open.is-reply {
    width: fit-content;
    max-width: min(260px, 100%);
}

.wall-image-open:focus-visible {
    outline: 2px solid rgba(255, 207, 51, .78);
    outline-offset: 3px;
}

.wall-reply-image {
    width: auto;
    max-width: min(260px, 100%);
    max-height: 220px;
    object-fit: cover;
}

.wall-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 132;
    display: none;
    place-items: center;
    padding: 18px;
}

.wall-image-viewer.is-open {
    display: grid;
}

.wall-image-viewer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .84);
    cursor: pointer;
}

.wall-image-viewer-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    place-items: center;
}

.wall-image-viewer-card img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 54px);
    object-fit: contain;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .56);
}

.wall-image-viewer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, .66);
    cursor: pointer;
}

.wall-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    place-items: center;
    padding: 18px;
}

.wall-story-viewer.is-open {
    display: grid;
}

.wall-profile-choice {
    position: fixed;
    inset: 0;
    z-index: 128;
    display: none;
    place-items: center;
    padding: 18px;
}

.wall-profile-choice.is-open {
    display: grid;
}

.wall-profile-choice-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .62);
}

.wall-profile-choice-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(260px, 100%);
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 10px;
    background: rgba(17, 19, 21, .98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .46);
}

.wall-profile-choice-card button,
.wall-profile-choice-card a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.wall-story-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .82);
}

.wall-story-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(420px, 100%);
    gap: 10px;
}

.wall-story-stage {
    position: relative;
    display: grid;
    min-height: min(640px, calc(100vh - 140px));
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: #111315;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .56);
}

.wall-story-stage img,
.wall-story-stage video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wall-story-stage p {
    position: absolute;
    max-width: 80%;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    transform: translate(-50%, -50%);
    overflow-wrap: anywhere;
}

.wall-story-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

.wall-story-card footer a {
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.wall-story-card footer span {
    color: var(--silver);
    font-size: 12px;
    font-weight: 800;
}

.wall-story-close,
.wall-story-nav {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, .58);
    cursor: pointer;
}

.wall-story-close {
    top: 10px;
    right: 10px;
}

.wall-story-nav {
    top: 50%;
    transform: translateY(-50%);
}

.wall-story-nav.is-prev {
    left: -52px;
}

.wall-story-nav.is-next {
    right: -52px;
}

.wall-edited {
    display: inline-block;
    margin-top: 5px;
    color: var(--silver);
    font-size: 11px;
    font-weight: 800;
}

.wall-owner-actions {
    display: flex;
    align-items: start;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.wall-post-edit summary,
.wall-post-delete button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: var(--white);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.wall-post-edit summary::-webkit-details-marker {
    display: none;
}

.wall-post-edit summary::marker {
    content: "";
}

.wall-post-edit {
    position: relative;
}

.wall-post-edit form {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 10;
    display: grid;
    width: min(360px, calc(100vw - 56px));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(17, 19, 21, .98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
}

.wall-post-edit textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
}

.wall-post-edit button,
.wall-edit-actions button {
    min-height: 32px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 6px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.wall-post-delete {
    margin: 0;
}

.wall-post-delete button {
    color: #ff8d9a;
}

.wall-replies {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 0 0 14px;
    border-top: 1px solid rgba(200, 204, 210, .14);
    border-left: 3px solid rgba(255, 207, 51, .7);
}

.wall-replies::before {
    content: "Respuestas";
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255, 207, 51, .28);
    border-radius: 999px;
    color: #ffdf6f;
    background: rgba(255, 207, 51, .1);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wall-reply {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(200, 204, 210, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
}

.wall-comments-toggle {
    justify-self: start;
    min-height: 30px;
    padding: 0;
    border: 0;
    color: #d9dde4;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.wall-comments-toggle:hover {
    color: #ffdf6f;
    text-decoration: underline;
}

.wall-reply > div {
    min-width: 0;
}

.wall-reply-avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #25282b;
    color: var(--white);
    font-size: 11px;
    font-weight: 900;
}

.wall-reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wall-reply a {
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.wall-reply small {
    display: block;
    margin-top: 1px;
    color: var(--silver);
    font-size: 10px;
    font-weight: 800;
}

.wall-reply-time {
    display: block;
    margin-top: 3px;
    color: var(--silver-dark);
    font-size: 10px;
    font-weight: 800;
}

.wall-reply p {
    margin: 4px 0 0;
    font-size: 13px;
}

.wall-reply-form {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) repeat(3, 34px);
    gap: 8px;
}

.wall-reply-form input {
    min-height: 38px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .055);
}

.wall-emoji-popover {
    position: absolute;
    right: 42px;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, 34px);
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 12px;
    background: rgba(17, 19, 21, .98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
}

.wall-emoji-popover[hidden] {
    display: none;
}

.wall-emoji-popover button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 16px;
    cursor: pointer;
}

.wall-image-preview {
    position: relative;
    width: min(180px, 100%);
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
}

.wall-reply-form .wall-image-preview {
    grid-column: 1 / -1;
    width: min(150px, 100%);
    margin-top: 0;
}

.wall-image-preview img {
    display: block;
    width: 100%;
    max-height: 170px;
    object-fit: cover;
}

.wall-image-preview button {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, .68);
    cursor: pointer;
}

.wall-reply-actions {
    margin-top: 8px;
}

.relatos-composer {
    grid-template-columns: 64px minmax(0, 1fr);
    border-color: rgba(180, 38, 67, .26);
    background:
        linear-gradient(135deg, rgba(120, 10, 24, .28), rgba(17, 19, 21, .92) 42%),
        #111315;
}

.relatos-title-input,
.relatos-filter input,
.relatos-filter select,
.relato-post .wall-post-edit input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
    font-weight: 900;
}

.relatos-title-input {
    margin-bottom: 10px;
}

.relatos-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px auto;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    border-color: rgba(180, 38, 67, .2);
    background: linear-gradient(135deg, rgba(65, 12, 22, .34), #111315 56%);
}

.relatos-filter select option {
    color: #111315;
    background: #ffffff;
}

.relato-post h2 {
    margin: 0 0 10px;
    color: #ffe7e9;
    font-size: 22px;
    line-height: 1.1;
}

.relato-post {
    position: relative;
    border-color: rgba(180, 38, 67, .18);
    background:
        linear-gradient(135deg, rgba(85, 12, 28, .26), rgba(17, 19, 21, .96) 44%),
        #111315;
}

.relato-post::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(215, 25, 42, .1), rgba(255, 207, 51, .72));
}

.relato-post .wall-post-body > p {
    line-height: 1.65;
}

.relato-more-button {
    border: 1px solid rgba(255, 207, 51, .24);
    background: rgba(215, 25, 42, .16);
}

.relatos-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
}

.relatos-pagination a,
.relatos-pagination span {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.relatos-pagination a,
.relatos-pagination span {
    display: inline-flex;
    align-items: center;
}

.relatos-pagination a:not(.is-disabled):hover {
    border-color: rgba(255, 207, 51, .36);
    background: rgba(215, 25, 42, .16);
}

.relatos-pagination a.is-active {
    border-color: rgba(215, 25, 42, .48);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
}

.relatos-pagination .is-disabled {
    pointer-events: none;
    opacity: .45;
}

@media (max-width: 560px) {
    .wall-story-nav.is-prev {
        left: 10px;
    }

    .wall-story-nav.is-next {
        right: 10px;
    }

    .wall-heading {
        align-items: start;
        flex-direction: column;
    }

    .wall-post,
    .wall-composer {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .relatos-filter {
        grid-template-columns: 1fr;
    }

    .wall-composer-avatar,
    .wall-post-avatar {
        width: 42px;
        height: 42px;
    }
}

.settings-shell {
    width: min(1120px, 100%);
}

.settings-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent),
        rgba(17, 19, 21, .9);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

.profile-verify-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 52%, rgba(255, 255, 255, .2));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #d7192a) 22%, transparent), transparent 54%),
        rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 36px rgba(0, 0, 0, .28);
    color: var(--white);
}

.profile-verify-card.needs-verification {
    border-color: rgba(255, 207, 51, .62);
    background:
        linear-gradient(135deg, rgba(255, 207, 51, .18), transparent 44%),
        linear-gradient(180deg, rgba(215, 25, 42, .14), rgba(255, 255, 255, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 3px rgba(255, 207, 51, .08), 0 18px 36px rgba(0, 0, 0, .32);
}

.profile-verify-card.needs-verification::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(255, 207, 51, .42);
    border-radius: 12px;
    pointer-events: none;
    animation: tutorialPulse 1.5s ease-in-out infinite;
}

.profile-verify-card.is-verified {
    border-color: rgba(48, 214, 125, .55);
    background:
        linear-gradient(135deg, rgba(48, 214, 125, .18), transparent 54%),
        rgba(255, 255, 255, .06);
}

.profile-verify-card.is-verified strong i {
    color: #30d67d;
}

.profile-verify-card strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.verified-badge-guide {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    background: rgba(0, 0, 0, .18);
}

.verified-badge-guide span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.profile-verified-check.is-guide {
    margin-left: 0;
    font-size: 18px;
    vertical-align: 0;
}

.profile-verify-card button {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff7a18, var(--profile-accent, #d7192a) 52%, #b211ff);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--profile-accent, #d7192a) 30%, transparent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.profile-verify-card button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--profile-accent, #d7192a) 42%, transparent);
}

.profile-verify-card p,
.profile-verify-card small {
    margin: 0;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.profile-verify-card small {
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--white);
    background: rgba(0, 0, 0, .26);
}

.verification-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 18px;
}

.verification-modal.is-open {
    display: grid;
}

.verification-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .78);
    cursor: pointer;
}

.verification-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(520px, 100%);
    gap: 14px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 52%, rgba(255, 255, 255, .2));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #d7192a) 18%, transparent), transparent 58%),
        #111315;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .62);
}

.verification-step {
    display: none;
    gap: 14px;
}

.verification-step.is-active {
    display: grid;
}

.verification-step > span {
    color: var(--profile-accent, var(--red-bright));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.verification-step h2 {
    margin: 0;
    color: var(--white);
    font-size: 22px;
    text-transform: uppercase;
}

.verification-step p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.verification-step label {
    display: grid;
    gap: 8px;
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.verification-step input[type="file"] {
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: rgba(0, 0, 0, .32);
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
}

.verification-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-header span {
    color: var(--profile-accent, var(--red-bright));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.settings-header .profile-verified-check {
    color: #fff;
    font-size: 1em;
    text-transform: none;
    vertical-align: -.1em;
}

.settings-header .profile-verified-check.is-guide {
    margin-left: 0;
    font-size: 22px;
    vertical-align: middle;
}

.settings-header h1 {
    margin: 4px 0 6px;
    overflow-wrap: anywhere;
    color: var(--white);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
    text-transform: uppercase;
}

.settings-header p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
}

.onboarding-card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 16px;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid rgba(255, 207, 51, .28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 207, 51, .12), transparent 54%),
        rgba(17, 19, 21, .88);
}

.onboarding-card span {
    color: #ffcf33;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.onboarding-card h2 {
    margin: 5px 0 0;
    color: var(--white);
    font-size: 24px;
    text-transform: uppercase;
}

.onboarding-card ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.onboarding-card li {
    display: grid;
    min-height: 62px;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: var(--silver);
    background: rgba(0, 0, 0, .18);
    font-size: 11px;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.onboarding-card li.is-done {
    border-color: rgba(48, 214, 125, .42);
    color: #30d67d;
    background: rgba(48, 214, 125, .1);
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 18px;
    align-items: start;
}

.settings-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.settings-card {
    margin: 0;
}

.settings-group {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(200, 204, 210, .1);
}

.settings-group h3 {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    text-transform: uppercase;
}

.vip-renewal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 184, 48, .28);
    border-radius: 8px;
    background: rgba(12, 14, 16, .72);
}

.vip-renewal-box div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.vip-renewal-box strong {
    color: var(--white);
    font-size: 13px;
    text-transform: uppercase;
}

.vip-renewal-box span {
    color: var(--silver);
    font-size: 12px;
    line-height: 1.45;
}

.vip-renewal-box .profile-button {
    flex: 0 0 auto;
}

.settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-check-grid legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.settings-preview {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.settings-preview .profile-hero-card {
    grid-template-columns: auto minmax(0, 1fr);
}

.settings-preview .profile-cover {
    min-height: 160px;
}

.settings-preview .profile-title h1 {
    font-size: clamp(24px, 3vw, 34px);
}

.profile-main,
.profile-side {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.profile-panel,
.profile-empty {
    min-width: 0;
    padding: 18px;
}

.profile-empty {
    text-align: center;
}

.profile-empty h1,
.profile-empty h2 {
    margin: 0 0 8px;
    color: var(--white);
    text-transform: uppercase;
}

.profile-empty p {
    margin: 0;
    color: var(--silver);
    font-weight: 700;
}

.profile-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-panel-heading > div {
    display: grid;
    gap: 3px;
}

.profile-panel-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: 17px;
    text-transform: uppercase;
}

.profile-comment-heading {
    align-items: start;
}

.profile-comment-heading h2 {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.profile-last-connection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--silver);
    background: rgba(255, 255, 255, .055);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-last-connection i {
    color: var(--profile-accent, var(--red-bright));
}

.profile-bio {
    margin: 0;
    color: var(--silver);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-info-grid > div {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.profile-info-grid span {
    color: var(--profile-accent, var(--red-bright));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-info-grid p {
    margin: 0;
    color: var(--white);
    font-weight: 900;
}

.profile-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-tag-list strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #d7192a) 34%, transparent);
    border-radius: 999px;
    color: var(--white);
    background: color-mix(in srgb, var(--profile-accent, #d7192a) 18%, transparent);
    font-size: 12px;
    font-weight: 900;
}

.profile-form {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-upload-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(130px, .6fr);
    gap: 10px;
}

.profile-upload-preview {
    display: grid;
    gap: 7px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-input-hint {
    color: rgba(200, 204, 210, .72);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: none;
}

.profile-cover-thumb,
.profile-avatar-thumb {
    position: relative;
    display: grid;
    min-height: 110px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    color: var(--silver);
    background:
        linear-gradient(180deg, rgba(8, 9, 10, .08), rgba(8, 9, 10, .44)),
        var(--thumb-image, none),
        linear-gradient(135deg, #303438, color-mix(in srgb, var(--profile-accent, #d7192a) 48%, #111315));
    background-size: cover;
    background-position: center;
}

.profile-cover-thumb img,
.profile-avatar-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-avatar-thumb {
    aspect-ratio: 1;
    min-height: 110px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .18), transparent 3rem),
        linear-gradient(135deg, #303438, color-mix(in srgb, var(--profile-accent, #d7192a) 58%, #111315));
}

.profile-cover-thumb small,
.profile-avatar-thumb small {
    padding: 8px;
    text-align: center;
}

.profile-audio-recorder {
    margin-bottom: 0;
}

.settings-media-upload {
    border-color: color-mix(in srgb, var(--profile-accent, #d7192a) 42%, rgba(200, 204, 210, .14));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #d7192a) 14%, transparent), rgba(255, 255, 255, .035)),
        rgba(17, 19, 21, .92);
}

.profile-media-uploader {
    margin-bottom: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
}

.profile-upload-submit {
    justify-self: start;
}

.profile-current-audio {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.profile-current-audio span {
    color: var(--profile-accent, var(--red-bright));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-current-audio audio {
    width: 100%;
}

.audio-recorder-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.audio-recorder-status {
    min-height: 38px;
    padding: 11px 12px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    color: var(--silver);
    background: rgba(255, 255, 255, .035);
    font-size: 13px;
    font-weight: 900;
}

.audio-recorder-preview {
    width: 100%;
}

.profile-form input,
.profile-form select,
.profile-form textarea {
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 6px;
    outline: 0;
    color: var(--white);
    background: rgba(255, 255, 255, .052);
    font: inherit;
}

.profile-form select,
.profile-form option {
    font-weight: 900;
}

.profile-form option {
    color: #000;
    background: #fff;
}

.profile-form input[type="color"] {
    min-height: 48px;
    padding: 4px;
    border-width: 2px;
    cursor: pointer;
}

.profile-form input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.profile-form input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

.profile-form input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 4px;
}

.color-field {
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.profile-form input[readonly] {
    color: var(--silver);
    background: rgba(255, 255, 255, .025);
}

.profile-form label {
    display: grid;
    gap: 7px;
    color: var(--silver);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-check {
    display: flex !important;
    align-items: center;
    grid-template-columns: none;
    gap: 9px;
}

.profile-check input {
    width: auto;
    accent-color: var(--profile-accent, var(--red-bright));
}

.blocked-users-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.blocked-users-list.is-collapsed {
    display: none;
}

.blocked-users-list.is-open {
    display: grid;
}

.blocked-users-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
}

.blocked-users-list a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--white);
    font-weight: 900;
}

.blocked-users-list form {
    margin: 0;
}

.blocked-users-list button {
    min-height: 32px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 6px;
    color: var(--white);
    background: rgba(255, 255, 255, .055);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.danger-zone {
    border-color: rgba(255, 75, 92, .26);
}

.story-composer-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 0;
    background: #000;
}

.story-composer-modal.is-open {
    display: grid;
}

.story-composer-card {
    position: relative;
    display: grid;
    width: min(920px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: auto;
    border-radius: 20px;
    background: #111315;
}

.story-composer-modal.is-picking {
    place-items: center;
    background: rgba(0, 0, 0, .64);
}

.story-composer-modal.is-picking .story-phone-card {
    min-height: auto;
    width: min(430px, calc(100vw - 28px));
    border-radius: 18px;
    background: transparent;
}

.story-composer-modal.is-picking .story-composer-header,
.story-composer-modal.is-picking .story-composer-body {
    display: none;
}

.story-composer-modal.is-editing .story-start-sheet {
    display: none;
}

.story-start-sheet {
    display: grid;
    gap: 12px;
    width: min(430px, 100%);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: #111315;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.story-start-heading {
    display: grid;
    gap: 4px;
    padding: 0 48px 4px 0;
}

.story-start-sheet strong {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

.story-start-heading span {
    color: var(--silver);
    font-size: 12px;
    font-weight: 800;
}

.story-start-sheet > button:not(.story-composer-close) {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.story-start-sheet > button:not(.story-composer-close):hover {
    border-color: color-mix(in srgb, var(--profile-accent, #d7192a) 74%, white);
    background: rgba(255, 255, 255, .09);
    transform: translateY(-1px);
}

.story-start-sheet > button:not(.story-composer-close) i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: rgba(215, 25, 42, .18);
    color: var(--red-bright);
    font-size: 18px;
}

.story-start-sheet > button:not(.story-composer-close) span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.story-start-sheet > button:not(.story-composer-close) span strong {
    font-size: 14px;
}

.story-start-sheet > button:not(.story-composer-close) span small {
    color: var(--silver);
    font-size: 12px;
    font-weight: 800;
}

.story-start-sheet .story-composer-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.story-composer-header,
.story-mode-tabs,
.audio-recorder-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.story-composer-header {
    position: sticky;
    top: 0;
    z-index: 4;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(12px);
}

.story-composer-header strong {
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
}

.story-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff7a18, #ff255d 55%, #b211ff);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.story-composer-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, .68);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
    cursor: pointer;
}

.story-mode-tabs button,
.story-emoji-row button {
    min-height: 38px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .055);
    font-weight: 900;
    cursor: pointer;
}

.story-mode-tabs button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 76px;
    min-height: 58px;
    padding: 0 10px;
    font-size: 11px;
}

.story-mode-tabs button.is-active {
    border-color: rgba(255, 255, 255, .84);
    background: rgba(255, 255, 255, .18);
}

.story-composer-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 280px);
    gap: 14px;
    height: min(690px, calc(100vh - 92px));
    min-height: 0;
    padding: 0 14px 14px;
    overflow: visible;
}

.story-preview {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: #111315;
    box-shadow: none;
}

.story-text-layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.story-text-canvas {
    position: absolute;
    left: var(--story-text-x, 50%);
    top: var(--story-text-y, 50%);
    max-width: min(84%, 330px);
    max-height: 46%;
    overflow: auto;
    text-align: center;
    display: inline;
    min-height: 1.35em;
    margin: 0;
    padding: .1em .28em;
    border: 0;
    border-radius: .24em;
    outline: 0;
    color: inherit;
    background: var(--story-text-bg, transparent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.35;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .32);
    cursor: grab;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    touch-action: none;
}

.story-text-canvas:active {
    cursor: grabbing;
}

.story-text-canvas:empty::before {
    content: attr(data-placeholder);
    color: currentColor;
    opacity: .72;
    pointer-events: none;
}

.story-preview img,
.story-preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.story-editor {
    position: relative;
    z-index: 3;
    align-self: stretch;
    align-content: start;
    display: grid;
    gap: 12px;
    justify-items: stretch;
    min-width: 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(0, 0, 0, .22);
}

.story-editor label {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .44);
    cursor: pointer;
}

.story-editor input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.story-editor select,
.story-editor option {
    font-weight: 900;
}

.story-editor option {
    color: #000;
    background: #fff;
}

.story-emoji-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.story-emoji-row button {
    width: auto;
    padding: 0;
    font-size: 18px;
}

.story-design-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(12px);
}

.story-design-grid select {
    grid-column: 1 / -1;
    width: 100%;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .44);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.story-highlight-options {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.story-highlight-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .44);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.story-highlight-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--profile-accent, var(--red-bright));
}

.story-highlight-options > input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .44);
    font-size: 12px;
    font-weight: 900;
}

.story-mode-tabs {
    position: sticky;
    bottom: 0;
    z-index: 5;
    justify-content: center;
    padding: 14px 12px max(18px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(12px);
}

.story-hidden-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.story-file-control[hidden],
[data-story-text-panel][hidden] {
    display: none !important;
}

.story-grid,
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.media-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}

.story-card,
.media-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
}

.story-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.story-card {
    position: relative;
}

.story-card > img,
.story-card > video,
.media-card > img,
.media-card > video {
    display: block;
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #08090a;
}

.story-card > img,
.story-card > video {
    aspect-ratio: 1;
}

.media-card > img,
.media-card > video {
    aspect-ratio: 1;
}

.story-card > p {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    margin: 0;
    padding: 18px;
    overflow-wrap: anywhere;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.18;
    text-align: center;
}

.story-card > p.is-media-caption {
    position: absolute;
    left: var(--story-text-x, 50%);
    top: var(--story-text-y, 50%);
    display: block;
    aspect-ratio: auto;
    max-width: 84%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 17px;
    line-height: 1.2;
    transform: translate(-50%, -50%);
}

.story-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.story-meta small {
    color: currentColor;
    opacity: .82;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.story-meta form,
.media-card form,
.comment-list form {
    margin: 0;
}

.story-meta button,
.comment-list button,
.media-card form button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
}

.story-comments {
    display: grid;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.story-comments p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
}

.story-comments input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    color: var(--white);
    background: rgba(0, 0, 0, .24);
}

.media-card {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.media-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: #08090a;
    cursor: pointer;
}

.media-thumb img,
.media-thumb video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.media-thumb > i {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    transform: translate(-50%, -50%);
}

.media-card.is-vip-locked .media-thumb {
    cursor: default;
}

.media-card.is-vip-locked .media-thumb img,
.media-card.is-vip-locked .media-thumb video {
    filter: blur(12px);
    transform: scale(1.04);
}

.media-card.is-vip-locked .media-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .36);
}

.media-vip-lock {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255, 207, 51, .42);
    border-radius: 999px;
    color: #ffdf6f;
    background: rgba(8, 9, 10, .82);
    font-size: 12px;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.media-vip-button {
    justify-self: start;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

.audio-list {
    display: grid;
    gap: 10px;
}

.audio-media-card {
    grid-template-columns: minmax(0, 1fr);
}

.media-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.media-actions form {
    margin: 0;
}

.media-actions button,
.media-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: var(--white);
    background: rgba(0, 0, 0, .28);
    font-size: 11px;
    font-weight: 900;
}

.media-actions button {
    cursor: pointer;
}

.media-actions button.is-liked {
    border-color: rgba(255, 64, 111, .7);
    color: #ff406f;
}

.profile-media-sections {
    display: grid;
    gap: 18px;
}

.profile-media-section {
    display: grid;
    gap: 10px;
}

.profile-media-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.profile-media-heading h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-media-heading h3 i {
    color: var(--profile-accent, var(--red-bright));
}

.profile-media-heading span {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .1);
    font-size: 12px;
    font-weight: 900;
}

.media-card p {
    margin: 0;
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
}

.audio-card {
    display: grid;
    gap: 12px;
    min-height: 150px;
    place-items: center;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--profile-accent, #d7192a) 36%, transparent), transparent 5rem),
        #151719;
}

.audio-card i {
    color: var(--profile-accent, var(--red-bright));
    font-size: 42px;
}

.audio-card audio {
    width: 100%;
}

.media-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    place-items: center;
    padding: 18px;
}

.media-viewer-modal.is-open {
    display: grid;
}

.media-viewer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .82);
    cursor: pointer;
}

.media-viewer-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    place-items: center;
    gap: 12px;
}

.media-viewer-stage {
    display: grid;
    width: 100%;
    max-height: calc(100vh - 130px);
    place-items: center;
}

.media-viewer-stage img,
.media-viewer-stage video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 130px);
    object-fit: contain;
    border-radius: 8px;
    background: #000;
}

.media-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    cursor: pointer;
    transform: translateY(-50%);
}

.media-viewer-nav.is-prev {
    left: 10px;
}

.media-viewer-nav.is-next {
    right: 10px;
}

.media-viewer-card > p {
    margin: 0;
    max-width: min(720px, 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.compact-comments {
    max-height: none;
    overflow: visible;
}

.comment-list {
    display: grid;
    gap: 10px;
}

.comment-list article {
    padding: 10px;
    border: 1px solid rgba(200, 204, 210, .12);
    border-radius: 7px;
    background: #f4f4f2;
}

.comment-list strong,
.comment-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #111315;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.comment-list .comment-author,
.comment-list button.comment-author {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #111315;
    background: transparent;
    opacity: 1;
    font-size: 12px;
}

.comment-author:hover {
    color: var(--profile-accent, var(--red-bright));
}

.comment-author.has-comment-story {
    text-decoration: underline;
    text-decoration-color: rgba(255, 207, 51, .68);
    text-underline-offset: 3px;
}

.comment-list p {
    display: block;
    max-width: 100%;
    margin: 6px 0 8px;
    padding: 0;
    background: transparent;
    color: #111315;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.profile-comment-form {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        rgba(8, 9, 10, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.profile-comment-box {
    position: relative;
}

.profile-comment-form textarea {
    min-height: 104px;
    padding: 14px 14px 30px;
    border: 1px solid rgba(17, 19, 21, .16);
    border-radius: 8px;
    color: #111315;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    font-weight: 700;
    line-height: 1.45;
}

.profile-comment-form textarea::placeholder {
    color: #858b93;
}

.profile-comment-limit {
    position: absolute;
    right: 11px;
    bottom: 9px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #5a6067;
    background: rgba(17, 19, 21, .06);
    font-size: 11px;
    font-weight: 900;
}

.profile-comment-tools,
.profile-comment-emojis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.comment-color-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--silver);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-comment-tools select {
    min-height: 36px;
    min-width: 0;
    border-color: rgba(200, 204, 210, .2);
    background: rgba(255, 255, 255, .075);
}

.comment-color-control select {
    width: 118px;
}

.profile-comment-tools label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
}

.profile-comment-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-comment-footer .profile-button {
    min-height: 38px;
    padding-inline: 18px;
}

.profile-comment-emojis button,
.comment-pagination a {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .06);
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.comment-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.comment-pagination a.is-active {
    border-color: var(--profile-accent, var(--red-bright));
    background: var(--profile-accent, var(--red-bright));
}

.mini-user-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mini-user-list a,
.mini-user-list span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 999px;
    color: var(--silver);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 900;
}

@keyframes loadingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.035);
        opacity: 1;
    }
}

@keyframes loadingBar {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(260%);
    }
}

.admin-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 0%, rgba(215, 25, 42, .18), transparent 24rem),
        linear-gradient(135deg, #08090a, #151719);
}

.admin-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
}

.admin-panel {
    width: min(720px, 100%);
    padding: 28px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(17, 19, 21, .98));
    box-shadow: var(--shadow);
}

.admin-heading {
    margin-bottom: 22px;
}

.admin-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--silver);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-heading h1 {
    margin: 0 0 8px;
    color: var(--white);
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
}

.admin-heading p {
    margin: 0;
    color: var(--silver);
    font-size: 15px;
    font-weight: 700;
}

.admin-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
}

.admin-alert.is-success {
    border: 1px solid rgba(200, 204, 210, .18);
    color: var(--white);
    background: rgba(255, 255, 255, .06);
}

.chat-tools .emoji-picker-toggle,
.chat-tools .emoji-picker-popover button,
.story-emoji-row .emoji-picker-toggle,
.story-emoji-row .emoji-picker-popover button,
.profile-comment-emojis .emoji-picker-toggle,
.profile-comment-emojis .emoji-picker-popover button,
.wall-tool-row .emoji-picker-toggle,
.wall-tool-row .emoji-picker-popover button {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    padding: 0;
    border-radius: 6px;
    font-size: 18px;
}

.chat-tools .emoji-picker-toggle,
.story-emoji-row .emoji-picker-toggle,
.profile-comment-emojis .emoji-picker-toggle,
.wall-tool-row .emoji-picker-toggle {
    color: #ffcf33;
}

.admin-alert.is-error {
    border: 1px solid rgba(215, 25, 42, .42);
    color: var(--white);
    background: rgba(215, 25, 42, .14);
}

.admin-form {
    display: grid;
    gap: 12px;
}

.admin-form-spaced {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(200, 204, 210, .12);
}

.admin-form label,
.admin-preview h2 {
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-form input {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(200, 204, 210, .24);
    border-radius: 6px;
    color: var(--silver);
    background: #111315;
}

.admin-form small {
    color: var(--silver-dark);
    font-size: 13px;
    font-weight: 700;
}

.admin-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 8px;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 6px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-preview {
    margin-top: 28px;
}

.admin-preview img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-top: 10px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 7px;
}

.events-screen {
    min-height: calc(100dvh - 68px);
    padding: 28px 18px 56px;
    background:
        radial-gradient(circle at 18% 0, rgba(215, 25, 42, .22), transparent 28rem),
        radial-gradient(circle at 78% 10%, rgba(255, 255, 255, .08), transparent 18rem),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.events-shell {
    display: grid;
    width: min(1180px, 100%);
    gap: 16px;
    margin: 0 auto;
}

.events-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.events-heading span,
.events-ad-banner span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.events-heading h1 {
    margin: 4px 0 0;
    color: var(--white);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
    text-transform: uppercase;
}

.events-hero-carousel,
.events-grid-section,
.events-sponsors-section,
.events-ad-banner {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(17, 19, 21, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.events-hero-carousel {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.events-empty-state {
    min-height: 320px;
    align-content: center;
}

.events-empty-state .profile-button {
    width: fit-content;
    margin: 0 auto;
}

.events-carousel-stage {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 8px;
    background: #08090a;
}

.events-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.events-slide.is-vip-locked img,
.events-slide.is-vip-locked .events-slide-overlay {
    filter: blur(8px);
    opacity: .54;
}

.events-vip-notice {
    justify-content: space-between;
}

.event-vip-lock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    color: #ffffff;
    background: rgba(8, 9, 10, .46);
    text-align: center;
}

.event-vip-lock i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 207, 51, .44);
    border-radius: 999px;
    color: #ffcf33;
    background: rgba(255, 207, 51, .1);
    font-size: 22px;
}

.event-vip-lock strong {
    max-width: 360px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.event-vip-lock .profile-button {
    width: fit-content;
}

.events-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.events-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.08) contrast(1.04);
}

.events-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 9, 10, .9), rgba(8, 9, 10, .42) 48%, rgba(8, 9, 10, .14)),
        linear-gradient(180deg, transparent, rgba(8, 9, 10, .74));
}

.events-slide-overlay {
    position: absolute;
    z-index: 2;
    bottom: 34px;
    left: 34px;
    display: grid;
    gap: 12px;
    width: min(620px, calc(100% - 68px));
}

.events-slide-overlay span {
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid rgba(255, 207, 51, .48);
    border-radius: 999px;
    color: #ffcf33;
    background: rgba(0, 0, 0, .38);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.events-slide-overlay h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(34px, 6vw, 74px);
    line-height: .92;
    text-transform: uppercase;
}

.events-slide-overlay p {
    max-width: 560px;
    margin: 0;
    color: var(--silver);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}

.events-slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.events-slide-meta strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.events-slide-action {
    display: inline-flex;
    width: fit-content;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(37, 211, 102, .42);
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(180deg, #20b45b, #137c3c);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.events-carousel-button {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(8, 9, 10, .68);
    cursor: pointer;
    transform: translateY(-50%);
}

.events-carousel-button.is-prev {
    left: 14px;
}

.events-carousel-button.is-next {
    right: 14px;
}

.events-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.events-carousel-dots button {
    width: 34px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(200, 204, 210, .26);
    cursor: pointer;
}

.events-carousel-dots button.is-active {
    background: var(--red-bright);
}

.events-ad-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background:
        radial-gradient(circle at 86% 40%, rgba(255, 207, 51, .18), transparent 15rem),
        linear-gradient(135deg, rgba(169, 15, 29, .34), rgba(17, 19, 21, .94) 46%, rgba(255, 255, 255, .06));
}

.events-ad-banner h2 {
    margin: 4px 0 6px;
    color: var(--white);
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1;
    text-transform: uppercase;
}

.events-ad-banner p {
    margin: 0;
    color: var(--silver);
    font-size: 15px;
    font-weight: 800;
}

.events-grid-section,
.events-sponsors-section {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.events-card-grid,
.events-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.event-card,
.events-sponsor {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .052);
}

.event-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 260px;
    padding: 18px;
    overflow: hidden;
}

.event-card-content {
    display: grid;
    gap: 12px;
}

.event-card.is-vip-locked .event-card-content {
    filter: blur(7px);
    opacity: .48;
    pointer-events: none;
    user-select: none;
}

.event-vip-lock.is-card-lock {
    background: rgba(8, 9, 10, .5);
}

.event-card-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffcf33;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.event-card h2 {
    margin: 0;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.event-card p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.event-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-card li {
    display: flex;
    gap: 8px;
    color: var(--silver);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.event-card li i {
    flex: 0 0 auto;
    color: var(--red-bright);
    margin-top: 2px;
}

.event-card > a {
    display: inline-flex;
    width: fit-content;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(215, 25, 42, .44);
    border-radius: 7px;
    color: var(--white);
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.event-card.is-agenda-ad {
    background:
        linear-gradient(180deg, rgba(255, 207, 51, .07), transparent),
        rgba(255, 255, 255, .052);
}

.events-sponsor {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 132px;
    padding: 20px 14px;
    text-align: center;
}

.events-sponsor i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 207, 51, .28);
    border-radius: 999px;
    color: #ffcf33;
    background: rgba(255, 207, 51, .08);
    font-size: 18px;
}

.events-sponsor strong {
    color: var(--white);
    font-size: 15px;
    font-weight: 950;
    text-transform: uppercase;
}

.events-sponsor span {
    color: var(--silver);
    font-size: 12px;
    font-weight: 850;
}

.publish-ad-screen {
    min-height: calc(100dvh - 68px);
    padding: 28px 18px 56px;
    background:
        radial-gradient(circle at 12% 0, rgba(215, 25, 42, .22), transparent 27rem),
        radial-gradient(circle at 86% 12%, rgba(255, 207, 51, .12), transparent 18rem),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.publish-ad-shell {
    display: grid;
    width: min(1180px, 100%);
    gap: 16px;
    margin: 0 auto;
}

.publish-ad-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.publish-ad-heading > div {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.publish-ad-heading span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.publish-ad-heading h1 {
    margin: 0;
    color: var(--white);
    font-size: clamp(30px, 5vw, 58px);
    line-height: .95;
    text-transform: uppercase;
}

.publish-ad-heading p {
    margin: 0;
    color: var(--silver);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.publish-ad-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.publish-ad-form,
.publish-ad-preview {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(17, 19, 21, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.publish-ad-form {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.publish-ad-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.publish-ad-plan {
    display: grid;
    cursor: pointer;
}

.publish-ad-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.publish-ad-plan > span {
    display: grid;
    gap: 8px;
    min-height: 144px;
    padding: 16px;
    border: 1px solid rgba(200, 204, 210, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.publish-ad-plan input:checked + span {
    border-color: rgba(215, 25, 42, .76);
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 207, 51, .16), transparent 8rem),
        rgba(215, 25, 42, .14);
}

.publish-ad-plan strong {
    color: var(--white);
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.publish-ad-plan em {
    color: #ffcf33;
    font-size: 16px;
    font-style: normal;
    font-weight: 950;
}

.publish-ad-plan small,
.publish-ad-photo small,
.publish-ad-note span {
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.publish-ad-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.publish-ad-fields label {
    display: grid;
    gap: 7px;
}

.publish-ad-fields label > span {
    color: var(--silver);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.publish-ad-fields input,
.publish-ad-fields textarea {
    width: 100%;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 7px;
    color: var(--white);
    background: rgba(8, 9, 10, .78);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}

.publish-ad-fields input {
    min-height: 46px;
    padding: 0 12px;
}

.publish-ad-fields textarea {
    min-height: 150px;
    padding: 12px;
    resize: vertical;
}

.publish-ad-wide {
    grid-column: 1 / -1;
}

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

.publish-ad-submit {
    width: fit-content;
}

.publish-ad-preview {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.publish-ad-preview > span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.publish-ad-preview article,
.publish-ad-note {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
}

.publish-ad-preview-media {
    display: grid;
    min-height: 118px;
    place-items: center;
    border-radius: 7px;
    color: #ffcf33;
    background:
        linear-gradient(135deg, rgba(215, 25, 42, .44), rgba(8, 9, 10, .86)),
        rgba(255, 255, 255, .04);
    font-size: 34px;
}

.publish-ad-preview article > i {
    color: #ffcf33;
    font-size: 26px;
}

.publish-ad-preview strong,
.publish-ad-note strong {
    color: var(--white);
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.publish-ad-preview p {
    margin: 0;
    color: var(--silver);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.vip-screen {
    min-height: calc(100dvh - 68px);
    padding: 28px 18px 56px;
    background:
        radial-gradient(circle at 22% 0, rgba(255, 207, 51, .18), transparent 26rem),
        radial-gradient(circle at 82% 12%, rgba(215, 25, 42, .2), transparent 24rem),
        linear-gradient(180deg, #111315 0%, #08090a 100%);
}

.vip-shell {
    display: grid;
    width: min(1180px, 100%);
    gap: 16px;
    margin: 0 auto;
}

.vip-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 16px;
    align-items: stretch;
}

.vip-hero-copy,
.vip-card,
.vip-benefits-heading,
.vip-benefits article {
    border: 1px solid rgba(200, 204, 210, .13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        rgba(17, 19, 21, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

.vip-hero-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height: 520px;
    padding: clamp(24px, 4vw, 54px);
}

.vip-hero-copy > span {
    color: #ffcf33;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.vip-hero-copy h1 {
    max-width: 760px;
    margin: 0;
    color: var(--white);
    font-size: clamp(42px, 7vw, 86px);
    line-height: .9;
    text-transform: uppercase;
}

.vip-hero-copy p {
    max-width: 620px;
    margin: 0;
    color: var(--silver);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.vip-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.vip-price-row strong {
    color: #ffcf33;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 950;
    line-height: .9;
}

.vip-price-row del {
    color: var(--silver-dark);
    font-size: 28px;
    font-weight: 950;
}

.vip-price-row em {
    padding: 6px 10px;
    border: 1px solid rgba(215, 25, 42, .44);
    border-radius: 999px;
    color: var(--white);
    background: rgba(215, 25, 42, .14);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.vip-urgency-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vip-urgency-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255, 207, 51, .24);
    border-radius: 999px;
    color: var(--white);
    background: rgba(255, 207, 51, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vip-urgency-strip i {
    color: #ffcf33;
}

.vip-pay-button {
    width: fit-content;
    min-width: min(320px, 100%);
}

.vip-hero-copy small {
    color: var(--silver-dark);
    font-size: 12px;
    font-weight: 850;
}

.vip-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 28px;
}

.vip-card > i {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid rgba(255, 207, 51, .38);
    border-radius: 999px;
    color: #ffcf33;
    background: rgba(255, 207, 51, .08);
    font-size: 30px;
}

.vip-card strong {
    color: var(--white);
    font-size: 28px;
    font-weight: 950;
    text-transform: uppercase;
}

.vip-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vip-card li {
    display: flex;
    gap: 10px;
    color: var(--silver);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.vip-card li i {
    flex: 0 0 auto;
    color: #ffcf33;
    margin-top: 2px;
}

.vip-card-warning {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(215, 25, 42, .28);
    border-radius: 8px;
    background: rgba(215, 25, 42, .1);
}

.vip-card-warning strong {
    color: var(--white);
    font-size: 13px;
}

.vip-card-warning span {
    color: var(--silver);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.vip-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vip-benefits-heading {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 20px;
}

.vip-benefits-heading span {
    color: #ffcf33;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.vip-benefits-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1;
    text-transform: uppercase;
}

.vip-benefits article {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.vip-benefits i {
    color: #ffcf33;
    font-size: 24px;
}

.vip-benefits h3 {
    margin: 0;
    color: var(--white);
    font-size: 18px;
    text-transform: uppercase;
}

.vip-benefits p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.payment-history {
    display: grid;
    gap: 14px;
}

.payment-history-heading span {
    color: #ffcf33;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-history-heading h2 {
    margin: 5px 0 0;
    color: var(--white);
    font-size: 24px;
    text-transform: uppercase;
}

.payment-history-list {
    display: grid;
    gap: 8px;
}

.payment-history-list article {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 7px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.payment-history-list article span,
.payment-history-list article em,
.payment-history-list article small {
    color: var(--silver);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-history-list article strong {
    overflow-wrap: anywhere;
    color: var(--white);
    font-size: 14px;
}

.payment-history-list article small {
    grid-column: 2 / -1;
    text-transform: none;
}

.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(215, 25, 42, .42);
    background:
        radial-gradient(circle at 18% 0%, rgba(215, 25, 42, .16), transparent 22rem),
        linear-gradient(180deg, #151719, #08090a 70%);
    color: var(--silver);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), rgba(215, 25, 42, .8), transparent);
    pointer-events: none;
}

.site-footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(420px, 1.7fr) minmax(240px, .9fr);
    gap: clamp(22px, 4vw, 52px);
    width: min(1440px, calc(100% - 36px));
    margin: 0 auto;
    padding: clamp(34px, 5vw, 64px) 0 30px;
}

.footer-brand-block {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-brand {
    display: inline-flex;
    align-items: baseline;
    width: max-content;
    color: var(--white);
    font-size: 34px;
    font-weight: 950;
    text-transform: uppercase;
}

.footer-brand span {
    color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #cfd4da 52%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.footer-brand strong {
    margin-left: 2px;
    color: var(--red-bright);
    text-shadow: 0 0 10px rgba(215, 25, 42, .28);
}

.footer-brand small {
    margin-left: 1px;
    color: var(--silver-dark);
    font-size: 14px;
    text-transform: none;
}

.footer-brand-block p,
.footer-vip-card p,
.footer-social-card p {
    margin: 0;
    color: var(--silver);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-badges span,
.footer-badges a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(200, 204, 210, .18);
    border-radius: 6px;
    color: var(--white);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-badges i,
.footer-links-grid i {
    color: var(--red-bright);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 30px);
}

.footer-links-grid section {
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
}

.footer-links-grid h2,
.footer-vip-card h2,
.footer-social-card h2 {
    margin: 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 950;
    text-transform: uppercase;
}

.footer-links-grid h2 {
    margin-bottom: 5px;
}

.footer-links-grid a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 30px;
    color: var(--silver);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    transition: color .18s ease, transform .18s ease;
}

.footer-links-grid a:hover {
    color: var(--white);
    transform: translateX(3px);
}

.footer-links-grid a span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-side-cards {
    display: grid;
    align-content: start;
    gap: 14px;
}

.footer-vip-card,
.footer-social-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.footer-vip-card {
    border: 1px solid rgba(255, 207, 51, .24);
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 207, 51, .16), transparent 9rem),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
}

.footer-social-card {
    border: 1px solid rgba(215, 25, 42, .26);
    background:
        radial-gradient(circle at 88% 0%, rgba(215, 25, 42, .16), transparent 9rem),
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
}

.footer-vip-card > span,
.footer-social-card > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.footer-vip-card > span {
    color: #ffcf33;
}

.footer-social-card > span {
    color: var(--red-bright);
}

.footer-vip-card a,
.footer-social-card a,
.footer-social-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 207, 51, .46);
    border-radius: 6px;
    color: #fff7c6;
    background: linear-gradient(180deg, rgba(255, 207, 51, .18), rgba(142, 91, 0, .24));
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.footer-social-card a,
.footer-social-empty {
    border-color: rgba(215, 25, 42, .46);
    color: var(--white);
    background: linear-gradient(180deg, rgba(215, 25, 42, .22), rgba(88, 13, 22, .26));
}

.footer-social-empty {
    color: var(--silver);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(1440px, calc(100% - 36px));
    min-height: 58px;
    margin: 0 auto;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(200, 204, 210, .12);
    color: var(--silver-dark);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.footer-bottom a {
    color: var(--silver);
    transition: color .18s ease;
}

.footer-bottom a:hover {
    color: var(--white);
}

@media (max-width: 1280px) {
    .public-navbar {
        gap: 12px;
    }

    .brand-text {
        font-size: 27px;
    }

    .nav-panel {
        gap: 10px;
    }

    .nav-links a,
    .nav-dropdown-toggle {
        padding: 0 10px;
        font-size: 13px;
    }

    .publish-link,
    .session-link,
    .register-link {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hero-side {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

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

    .section-heading {
        max-width: 720px;
    }

    .site-footer-inner {
        grid-template-columns: minmax(240px, .9fr) minmax(0, 1.6fr);
    }

    .footer-side-cards {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1120px) {
    .public-navbar {
        min-height: 58px;
    }

    .brand-text {
        font-size: 24px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-panel {
        position: absolute;
        top: 58px;
        right: 14px;
        left: 14px;
        z-index: 30;
        display: none;
        align-items: stretch;
        max-height: calc(100dvh - 78px);
        overflow-y: auto;
        padding: 16px;
        border: 1px solid rgba(200, 204, 210, .2);
        border-radius: 6px;
        background: linear-gradient(180deg, #202326, #111315);
        box-shadow: var(--shadow);
    }

    .nav-panel.is-open {
        display: block;
    }

    .nav-links,
    .nav-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .nav-links {
        gap: 4px;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a,
    .nav-dropdown-toggle {
        min-height: 42px;
    }

    .dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        width: 100%;
        margin-top: 4px;
        padding: 6px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
    }

    .has-dropdown.is-open .dropdown-menu,
    .has-dropdown:hover .dropdown-menu,
    .has-dropdown:focus-within .dropdown-menu {
        display: grid;
    }

    .dropdown-menu a {
        min-height: 38px;
        white-space: normal;
    }

    .nav-links a,
    .nav-dropdown-toggle,
    .publish-link,
    .session-link,
    .register-link {
        width: 100%;
        justify-content: center;
    }

    .account-menu {
        width: 100%;
    }

    .account-menu .icon-link,
    .icon-link.has-alert {
        display: none;
    }

    .account-dropdown {
        position: static;
        display: grid;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .account-dropdown a {
        justify-content: center;
        width: 100%;
        min-height: 42px;
        border: 1px solid rgba(200, 204, 210, .16);
        background: rgba(255, 255, 255, .035);
    }

    .nav-actions {
        display: flex;
        margin-top: 14px;
    }
}

@media (max-width: 980px) {
    .top-strip-inner,
    .public-navbar {
        width: min(100% - 24px, 760px);
    }

    .hero-screen {
        min-height: calc(100dvh - 58px);
    }

    .home-hero {
        min-height: 100%;
    }

    .hero-main {
        min-height: 44dvh;
        padding: 28px 18px;
    }

    .hero-content {
        border-left-width: 2px;
        padding-left: 16px;
    }

    .hero-content h1 {
        font-size: clamp(30px, 9vw, 48px);
    }

    .hero-lead {
        max-width: 620px;
        font-size: 17px;
    }

    .night-content {
        width: min(100% - 28px, 760px);
        margin-top: -20px;
        padding-bottom: 28px;
    }

    .section-heading {
        padding: 18px;
    }

    .hero-side {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0;
        gap: 18px;
    }

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

    .category-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-screen {
        padding: 20px 14px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .auth-brand-panel {
        min-height: 300px;
    }

    .admin-shell {
        align-items: start;
        padding: 20px 14px;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .vip-renewal-box {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-side {
        order: -1;
    }

    .support-admin-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .webcam-stage,
    .webcam-room-layout,
    .webcam-live-room,
    .webcam-global-layout,
    .chatrooms-layout {
        grid-template-columns: 1fr;
    }

    .events-heading,
    .events-ad-banner,
    .publish-ad-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .publish-ad-layout {
        grid-template-columns: 1fr;
    }

    .events-carousel-stage {
        min-height: 430px;
    }

    .events-card-grid,
    .events-sponsor-grid,
    .publish-ad-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vip-hero {
        grid-template-columns: 1fr;
    }

    .vip-hero-copy {
        min-height: auto;
    }

    .webcam-stream-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-report-list {
        max-height: 240px;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 760px);
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-bottom {
        width: min(100% - 28px, 760px);
    }
}

@media (max-width: 640px) {
    .story-composer-card {
        width: min(430px, calc(100vw - 20px));
    }

    .story-composer-body {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .story-preview {
        aspect-ratio: 9 / 16;
        min-height: min(560px, 62vh);
    }

    .story-editor {
        overflow: visible;
    }

    .public-navbar {
        width: min(100% - 20px, 760px);
    }

    .nav-panel {
        right: 10px;
        left: 10px;
        padding: 12px;
    }

    .brand-text {
        font-size: 22px;
    }

    .brand-text small {
        font-size: 11px;
    }

    .hero-main {
        min-height: 50dvh;
    }

    .hero-content {
        width: 100%;
        padding-left: 12px;
    }

    .hero-content h1 {
        font-size: clamp(28px, 12vw, 40px);
    }

    .hero-lead {
        margin-bottom: 22px;
        font-size: 16px;
    }

    .hero-cta {
        width: 100%;
        padding: 0 18px;
        font-size: 14px;
        white-space: normal;
    }

    .hero-trust-row span {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        min-width: min(100%, 150px);
    }

    .hero-inline-links {
        flex-wrap: wrap;
    }

    .night-content {
        width: min(100% - 20px, 760px);
    }

    .section-heading,
    .vip-panel,
    .category-panel {
        padding: 16px;
    }

    .vip-grid,
    .category-stack {
        grid-template-columns: 1fr;
    }

    .home-events-banner {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
        padding: 0;
    }

    .home-events-banner-media {
        min-height: 210px;
    }

    .home-events-banner-media::after {
        background: linear-gradient(180deg, transparent 24%, rgba(17, 19, 21, .86));
    }

    .home-events-banner-copy {
        padding: 18px;
    }

    .home-events-banner strong {
        font-size: 28px;
        white-space: normal;
    }

    .home-events-banner-action {
        width: calc(100% - 36px);
        margin: 0 18px 18px;
    }

    .profile-photo {
        aspect-ratio: 16 / 9;
    }

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

    .auth-brand-panel {
        min-height: 240px;
        padding: 24px;
    }

    .auth-brand-panel::after {
        top: 18px;
        right: 18px;
        width: 48px;
        height: 48px;
        font-size: 14px;
    }

    .auth-brand-copy h1 {
        font-size: 46px;
    }

    .auth-brand-copy p {
        font-size: 15px;
    }

    .auth-trust {
        gap: 8px;
    }

    .auth-card {
        padding: 24px;
    }

    .auth-tabs {
        border-radius: 8px;
    }

    .auth-tabs a {
        border-radius: 6px;
        padding: 0 8px;
        text-align: center;
    }

    .auth-heading h2 {
        font-size: 28px;
    }

    .auth-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-submit {
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        text-align: center;
    }

    .support-screen {
        padding: 18px 10px 34px;
    }

    .messages-screen {
        padding: 18px 10px 34px;
    }

    .vip-screen {
        padding: 18px 10px 34px;
    }

    .vip-benefits {
        grid-template-columns: 1fr;
    }

    .payment-history-list article {
        grid-template-columns: 1fr;
    }

    .payment-history-list article small {
        grid-column: auto;
    }

    .vip-pay-button {
        width: 100%;
    }

    .messages-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .messages-window {
        min-height: 620px;
        height: calc(100dvh - 160px);
    }

    .onboarding-card,
    .onboarding-card ol {
        grid-template-columns: 1fr;
    }

    .events-screen {
        padding: 18px 10px 34px;
    }

    .publish-ad-screen {
        padding: 18px 10px 34px;
    }

    .events-carousel-stage {
        min-height: 380px;
    }

    .events-slide-overlay {
        bottom: 22px;
        left: 16px;
        width: calc(100% - 32px);
    }

    .events-slide-overlay h2 {
        font-size: 34px;
    }

    .events-slide-overlay p {
        font-size: 14px;
    }

    .events-carousel-button {
        top: 22px;
        width: 38px;
        height: 38px;
        transform: none;
    }

    .events-carousel-button.is-prev {
        right: 60px;
        left: auto;
    }

    .events-carousel-button.is-next {
        right: 14px;
    }

    .events-card-grid,
    .events-sponsor-grid,
    .publish-ad-plan-grid,
    .publish-ad-fields {
        grid-template-columns: 1fr;
    }

    .publish-ad-submit {
        width: 100%;
    }

    .support-contact-form,
    .support-chat-card {
        min-height: auto;
    }

    .support-chat-card {
        grid-template-rows: auto minmax(320px, 1fr) auto;
    }

    .support-chat-top {
        align-items: stretch;
        flex-direction: column;
    }

    .support-close-button {
        width: 100%;
    }

    .support-message {
        max-width: 92%;
    }

    .support-chat-form {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .webcam-screen {
        padding: 18px 10px 34px;
    }

    .webcam-heading {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .chatrooms-create-form {
        grid-template-columns: 1fr;
    }

    .webcam-local-panel,
    .webcam-local-panel video,
    .webcam-local-placeholder,
    .webcam-live-player,
    .webcam-live-player video,
    .webcam-global-chat,
    .webcam-users-panel,
    .webcam-room-chat {
        min-height: 360px;
    }

    .webcam-user-item.is-live {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .webcam-user-enter {
        grid-column: 1 / -1;
        width: 100%;
    }

    .webcam-stream-grid,
    .webcam-stream-actions {
        grid-template-columns: 1fr;
    }

    .notice-modal-card {
        padding: 24px;
    }

    .notice-modal-card h2 {
        font-size: 26px;
    }

    .loading-card {
        padding: 28px 18px;
    }

    .admin-panel {
        padding: 20px;
    }

    .admin-heading h1 {
        font-size: 28px;
    }

    .profile-screen {
        padding: 18px 10px 34px;
    }

    .profile-hero-card {
        grid-template-columns: 1fr;
        justify-items: start;
        padding: 18px;
    }

    .settings-header {
        grid-template-columns: 1fr;
    }

    .profile-cover {
        width: calc(100% + 36px);
        min-height: 170px;
        margin: -18px -18px 0;
    }

    .profile-avatar {
        width: min(246px, 72vw);
        height: min(246px, 72vw);
        margin-top: -96px;
        font-size: 60px;
    }

    .chat-modal {
        padding: 10px;
    }

    .chat-window {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 34%) minmax(0, 1fr);
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .profile-owner-toolbar {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    .profile-actions,
    .profile-actions form,
    .profile-owner-toolbar .profile-button,
    .profile-button {
        width: 100%;
    }

    .profile-stats,
    .profile-stats.has-visitors {
        grid-template-columns: 1fr;
    }

    .profile-form-grid,
    .profile-info-grid,
    .profile-upload-preview-grid,
    .settings-check-grid,
    .story-grid,
    .media-grid {
        grid-template-columns: 1fr;
    }

    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-composer-modal {
        padding: 0;
    }

    .story-composer-card {
        width: min(430px, calc(100vw - 20px));
        padding: 0;
    }

    .blocked-users-list > div {
        align-items: stretch;
        flex-direction: column;
    }

    .site-footer-inner {
        width: min(100% - 20px, 760px);
        padding-top: 30px;
    }

    .footer-brand {
        font-size: 28px;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;
    }

    .footer-vip-card a,
    .footer-social-card a,
    .footer-social-empty {
        width: 100%;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        width: min(100% - 20px, 760px);
    }
}

@media (max-width: 420px) {
    .hero-main {
        min-height: 420px;
        padding: 24px 14px;
    }

    .hero-content h1 {
        font-size: 31px;
    }

    .hero-lead {
        font-size: 15px;
    }

    .panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .auth-screen {
        padding: 12px 10px;
    }

    .auth-shell {
        border-radius: 8px;
    }

    .auth-brand-panel {
        min-height: 220px;
        padding: 20px;
    }

    .auth-brand-copy h1 {
        font-size: 38px;
    }

    .auth-trust span {
        width: 100%;
        justify-content: center;
    }

    .auth-warning {
        align-items: flex-start;
    }

    .auth-card {
        padding: 20px;
    }

    .loading-brand {
        font-size: 36px;
    }

    .admin-shell {
        padding: 10px;
    }

    .admin-panel {
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .brand-text {
        font-size: 20px;
    }

    .nav-toggle {
        width: 36px;
        height: 36px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-cta,
    .publish-link,
    .session-link,
    .register-link,
    .auth-submit,
    .admin-form button {
        font-size: 12px;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .hero-main {
        min-height: 360px;
    }

    .auth-screen {
        place-items: start center;
    }

    .auth-brand-panel {
        min-height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-brand,
    .loading-bar span {
        animation: none;
    }
}

.tutorial-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 6px;
    color: #ffffff;
    background: linear-gradient(180deg, #c7192a, #8d0d18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 0, 0, .2);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.tutorial-launcher[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, .48);
    background: linear-gradient(180deg, #ffffff, #d7dce2);
    color: #a90f1d;
    box-shadow: 0 0 18px rgba(215, 25, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.tutorial-nav-label {
    color: inherit;
}

.tutorial-demo {
    position: fixed;
    inset: 0;
    z-index: 5190;
    display: none;
    pointer-events: none;
}

.tutorial-demo.is-open {
    display: block;
}

.tutorial-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .64);
    pointer-events: auto;
}

.tutorial-spotlight {
    position: absolute;
    z-index: 1;
    border: 2px solid #ffcf33;
    border-radius: 10px;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, .58),
        0 0 26px rgba(255, 207, 51, .72),
        inset 0 0 0 1px rgba(255, 255, 255, .38);
    transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease;
    pointer-events: none;
}

.tutorial-spotlight::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(255, 207, 51, .52);
    border-radius: 14px;
    animation: tutorialPulse 1.4s ease-in-out infinite;
}

.tutorial-pointer {
    position: absolute;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #111315;
    background: #ffcf33;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    transform: translate(14px, 12px) rotate(-12deg);
    transition: left .28s ease, top .28s ease;
    animation: tutorialTap 1.1s ease-in-out infinite;
    pointer-events: none;
}

.tutorial-card {
    position: absolute;
    z-index: 3;
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #f6f7f8;
    background: linear-gradient(180deg, rgba(32, 35, 38, .98), rgba(10, 11, 12, .98));
    box-shadow: 0 24px 54px rgba(0, 0, 0, .58);
    pointer-events: auto;
}

.tutorial-card > span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #111315;
    background: #ffcf33;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.tutorial-card h2 {
    margin: 12px 34px 8px 0;
    font-size: 22px;
    line-height: 1.1;
}

.tutorial-card p {
    margin: 0;
    color: rgba(246, 247, 248, .84);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.tutorial-action {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 207, 51, .28);
    border-radius: 8px;
    color: #ffefb0;
    background: rgba(255, 207, 51, .08);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.tutorial-progress {
    margin-top: 12px;
    color: rgba(246, 247, 248, .58);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tutorial-controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.tutorial-controls button,
.tutorial-close {
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tutorial-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tutorial-controls button:last-child {
    background: linear-gradient(180deg, #c7192a, #8d0d18);
}

.tutorial-controls button:disabled {
    opacity: .42;
    cursor: default;
}

.tutorial-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
}

@keyframes tutorialPulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.985);
    }

    50% {
        opacity: 1;
        transform: scale(1.015);
    }
}

@keyframes tutorialTap {
    0%,
    100% {
        transform: translate(14px, 12px) rotate(-12deg) scale(1);
    }

    50% {
        transform: translate(8px, 6px) rotate(-12deg) scale(.94);
    }
}

@media (max-width: 640px) {
    .tutorial-card {
        right: 14px !important;
        left: 14px !important;
        top: auto !important;
        bottom: 66px;
        width: auto;
    }

    .tutorial-pointer {
        width: 36px;
        height: 36px;
    }
}

.notifications-screen {
    min-height: calc(100vh - 80px);
    padding: 34px 16px 72px;
    background:
        radial-gradient(circle at 18% 0%, rgba(215, 25, 42, .16), transparent 28%),
        linear-gradient(180deg, #090c10 0%, #111315 48%, #07090c 100%);
}

.notifications-shell {
    width: min(980px, 100%);
    margin: 0 auto;
}

.notifications-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.notifications-heading span {
    color: var(--red-bright);
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.notifications-heading h1 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: clamp(30px, 5vw, 54px);
    line-height: .95;
    text-transform: uppercase;
}

.notifications-heading p {
    max-width: 620px;
    margin: 0;
    color: rgba(242, 244, 247, .72);
    font-size: 14px;
    line-height: 1.5;
}

.notifications-heading > strong {
    display: inline-grid;
    min-width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(215, 25, 42, .54);
    border-radius: 8px;
    background: rgba(215, 25, 42, .16);
    color: #ffffff;
    font-size: 24px;
}

.notifications-grid {
    display: grid;
    gap: 12px;
}

.notification-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(32, 35, 38, .96), rgba(17, 19, 21, .96));
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

.notification-avatar {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: #2a2d31;
    color: #ffffff;
    font-size: 14px;
    font-weight: 1000;
    overflow: visible;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.notification-avatar i {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid #111315;
    border-radius: 50%;
    background: var(--red-bright);
    color: #ffffff;
    font-size: 10px;
}

.notification-body {
    min-width: 0;
}

.notification-body h2 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.25;
}

.notification-body p {
    margin: 0;
    color: rgba(242, 244, 247, .74);
    font-size: 13px;
    line-height: 1.45;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
    color: rgba(242, 244, 247, .48);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-open {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(215, 25, 42, .42);
    border-radius: 6px;
    color: #ffffff;
    background: rgba(215, 25, 42, .16);
}

.notifications-empty {
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 34px;
    border: 1px solid rgba(200, 204, 210, .16);
    border-radius: 8px;
    background: rgba(17, 19, 21, .72);
    text-align: center;
}

.notifications-empty i {
    color: var(--red-bright);
    font-size: 38px;
}

.notifications-empty h2 {
    margin: 14px 0 6px;
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
}

.notifications-empty p {
    max-width: 460px;
    margin: 0;
    color: rgba(242, 244, 247, .68);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .notifications-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-card {
        grid-template-columns: 48px minmax(0, 1fr) 34px;
        gap: 10px;
        padding: 12px;
    }

    .notification-avatar {
        width: 46px;
        height: 46px;
    }
}

/* Responsive hardening: final overrides for narrow, short and touch viewports. */
html {
    overflow-x: clip;
}

body {
    width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

video,
iframe,
embed,
object {
    max-width: 100%;
}

@media (max-width: 1600px), (max-height: 900px) {
    .top-strip-inner {
        width: min(1320px, calc(100% - 22px));
        min-height: 26px;
        font-size: 11px;
    }

    .public-navbar {
        width: min(1320px, calc(100% - 22px));
        min-height: 58px;
        gap: 12px;
    }

    .brand-text {
        font-size: 26px;
    }

    .brand-text small {
        font-size: 11px;
    }

    .nav-panel {
        gap: 10px;
    }

    .nav-links a,
    .nav-dropdown-toggle {
        min-height: 58px;
        padding: 0 9px;
        font-size: 12px;
        gap: 5px;
    }

    .nav-links a.is-hot-nav {
        min-height: 34px;
        margin: 0 3px;
        padding: 0 11px;
    }

    .publish-link,
    .session-link,
    .register-link {
        min-height: 34px;
        padding-right: 11px;
        padding-left: 11px;
        font-size: 12px;
    }

    .icon-link,
    .tutorial-launcher {
        height: 34px;
        min-height: 34px;
    }

    .icon-link {
        width: 34px;
    }

    .tutorial-launcher {
        width: auto;
        padding-right: 10px;
        padding-left: 10px;
        gap: 6px;
        font-size: 11px;
        white-space: nowrap;
    }

    .loading-card {
        width: min(360px, calc(100vw - 32px));
        gap: 14px;
        padding: 22px 18px;
    }

    .loading-brand {
        font-size: clamp(34px, 6vw, 54px);
    }

    .hero-screen,
    .auth-screen,
    .finder-screen,
    .profile-screen,
    .wall-screen,
    .events-screen,
    .publish-ad-screen,
    .vip-screen,
    .notifications-screen,
    .legal-screen,
    .webcam-screen,
    .chatrooms-screen,
    .messages-screen,
    .support-screen {
        min-height: calc(100dvh - 58px);
        padding-top: 20px;
        padding-bottom: 38px;
    }

    .home-hero {
        min-height: calc(100dvh - 58px);
        gap: 14px;
    }

    .hero-main {
        min-height: clamp(330px, 52dvh, 560px);
        padding: clamp(22px, 3.2vw, 52px);
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-content h1 {
        font-size: clamp(34px, 4.5vw, 62px);
    }

    .hero-lead {
        max-width: 640px;
        font-size: clamp(15px, 1.2vw, 19px);
    }

    .hero-cta,
    .auth-submit {
        min-height: 46px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .finder-shell,
    .events-shell,
    .publish-ad-shell,
    .vip-shell,
    .wall-shell,
    .support-shell,
    .messages-shell,
    .profile-shell,
    .settings-shell,
    .notifications-shell {
        width: min(1100px, 100%);
        gap: 14px;
    }

    .finder-heading h1,
    .wall-heading h1,
    .events-heading h1,
    .publish-ad-heading h1,
    .support-heading h1,
    .notifications-heading h1 {
        font-size: clamp(24px, 3vw, 36px);
    }

    .profile-title h1 {
        font-size: clamp(28px, 3.2vw, 44px);
    }

    .profile-hero-card,
    .profile-panel,
    .settings-card,
    .support-contact-form,
    .support-chat-card,
    .publish-ad-form,
    .publish-ad-preview,
    .vip-card,
    .notification-card {
        padding: 16px;
    }

    .profile-cover {
        min-height: 180px;
        margin: -16px -16px 0;
    }

    .profile-avatar {
        width: 196px;
        height: 196px;
        margin-top: -130px;
        font-size: 58px;
    }

    .events-carousel-stage {
        min-height: 420px;
    }

    .events-slide-overlay {
        padding: 20px;
    }

    .events-slide-overlay h2 {
        font-size: clamp(28px, 4.2vw, 56px);
    }

    .vip-hero-copy {
        min-height: 430px;
        gap: 14px;
        padding: clamp(22px, 3vw, 42px);
    }

    .vip-hero-copy h1 {
        font-size: clamp(36px, 5vw, 64px);
    }

    .vip-hero-copy p {
        font-size: 15px;
    }

    .vip-price-row strong {
        font-size: clamp(34px, 5vw, 58px);
    }

    .messages-window {
        height: min(640px, calc(100dvh - 150px));
        min-height: 460px;
    }

    .chatrooms-shell {
        min-height: calc(100dvh - 82px);
    }

    .chatrooms-layout,
    .support-admin-layout,
    .support-chat-card {
        min-height: min(540px, calc(100dvh - 130px));
    }

    .wall-composer,
    .wall-post,
    .finder-filter-panel,
    .finder-section,
    .events-hero-carousel,
    .events-grid-section,
    .events-sponsors-section,
    .events-ad-banner,
    .publish-ad-form,
    .publish-ad-preview,
    .vip-benefits article {
        box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    }
}

@media (max-width: 1440px), (max-height: 820px) {
    .top-strip {
        display: none;
    }

    .public-navbar {
        min-height: 52px;
    }

    .brand-text {
        font-size: 23px;
    }

    .nav-links a,
    .nav-dropdown-toggle {
        min-height: 52px;
        padding: 0 7px;
        font-size: 11px;
    }

    .nav-links a.is-hot-nav {
        min-height: 30px;
        padding: 0 9px;
    }

    .publish-link,
    .session-link,
    .register-link {
        min-height: 32px;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 11px;
    }

    .icon-link,
    .tutorial-launcher {
        height: 32px;
        min-height: 32px;
    }

    .icon-link {
        width: 32px;
    }

    .tutorial-launcher {
        width: auto;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 10.5px;
    }

    .loading-card {
        width: min(320px, calc(100vw - 28px));
        padding: 18px 16px;
    }

    .loading-brand {
        font-size: clamp(30px, 5vw, 46px);
    }

    .hero-screen,
    .auth-screen,
    .finder-screen,
    .profile-screen,
    .wall-screen,
    .events-screen,
    .publish-ad-screen,
    .vip-screen,
    .notifications-screen,
    .legal-screen,
    .webcam-screen,
    .chatrooms-screen,
    .messages-screen,
    .support-screen {
        min-height: calc(100dvh - 52px);
        padding-top: 16px;
        padding-bottom: 28px;
    }

    .home-hero {
        min-height: calc(100dvh - 52px);
    }

    .hero-main {
        min-height: clamp(300px, 50dvh, 500px);
        padding: clamp(18px, 2.6vw, 40px);
    }

    .hero-content h1 {
        font-size: clamp(32px, 4vw, 54px);
    }

    .hero-lead {
        font-size: clamp(14px, 1.05vw, 17px);
    }

    .hero-trust-row span,
    .hero-inline-links a {
        font-size: 11px;
    }

    .finder-shell,
    .events-shell,
    .publish-ad-shell,
    .vip-shell,
    .wall-shell,
    .support-shell,
    .messages-shell,
    .profile-shell,
    .settings-shell,
    .notifications-shell {
        width: min(1040px, 100%);
        gap: 12px;
    }

    .finder-heading h1,
    .wall-heading h1,
    .events-heading h1,
    .publish-ad-heading h1,
    .support-heading h1,
    .notifications-heading h1 {
        font-size: clamp(22px, 2.6vw, 32px);
    }

    .profile-title h1 {
        font-size: clamp(26px, 2.8vw, 38px);
    }

    .profile-hero-card {
        gap: 14px;
    }

    .profile-cover {
        min-height: 150px;
    }

    .profile-avatar {
        width: 168px;
        height: 168px;
        margin-top: -108px;
        font-size: 48px;
    }

    .events-carousel-stage {
        min-height: 360px;
    }

    .events-slide-overlay h2 {
        font-size: clamp(26px, 3.8vw, 46px);
    }

    .vip-hero {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    }

    .vip-hero-copy {
        min-height: 360px;
        padding: clamp(18px, 2.5vw, 34px);
    }

    .vip-hero-copy h1 {
        font-size: clamp(34px, 4.6vw, 56px);
    }

    .vip-benefits {
        gap: 12px;
    }

    .messages-window {
        height: min(580px, calc(100dvh - 120px));
        min-height: 420px;
    }
}

@media (max-width: 1366px), (max-height: 780px) {
    .public-navbar {
        width: min(1240px, calc(100% - 18px));
        min-height: 48px;
        gap: 8px;
    }

    .brand-text {
        font-size: 21px;
    }

    .brand-text small {
        display: none;
    }

    .nav-panel {
        gap: 6px;
    }

    .nav-links a,
    .nav-dropdown-toggle {
        min-height: 48px;
        padding: 0 6px;
        font-size: 10.5px;
        gap: 4px;
    }

    .nav-links a.is-hot-nav::before {
        margin-right: 4px;
    }

    .publish-link,
    .session-link,
    .register-link {
        min-height: 30px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .hero-screen,
    .auth-screen,
    .finder-screen,
    .profile-screen,
    .wall-screen,
    .events-screen,
    .publish-ad-screen,
    .vip-screen,
    .notifications-screen,
    .legal-screen,
    .webcam-screen,
    .chatrooms-screen,
    .messages-screen,
    .support-screen {
        min-height: calc(100dvh - 48px);
        padding-top: 12px;
        padding-bottom: 22px;
    }

    .home-hero {
        min-height: calc(100dvh - 48px);
        gap: 10px;
    }

    .hero-main {
        min-height: clamp(280px, 48dvh, 440px);
        padding: clamp(16px, 2.2vw, 32px);
    }

    .hero-content h1 {
        font-size: clamp(30px, 3.8vw, 48px);
    }

    .hero-side {
        gap: 10px;
    }

    .finder-shell,
    .events-shell,
    .publish-ad-shell,
    .vip-shell,
    .wall-shell,
    .support-shell,
    .messages-shell,
    .profile-shell,
    .settings-shell,
    .notifications-shell {
        width: min(980px, 100%);
        gap: 10px;
    }

    .profile-hero-card,
    .profile-panel,
    .settings-card,
    .support-contact-form,
    .support-chat-card,
    .publish-ad-form,
    .publish-ad-preview,
    .vip-card,
    .notification-card {
        padding: 14px;
    }

    .profile-cover {
        min-height: 130px;
        margin: -14px -14px 0;
    }

    .profile-avatar {
        width: 148px;
        height: 148px;
        margin-top: -94px;
    }

    .events-carousel-stage {
        min-height: 320px;
    }

    .vip-hero-copy {
        min-height: 320px;
    }
}

.profile-button,
.auth-submit,
.hero-cta,
.events-slide-action,
.home-events-banner-action,
.publish-ad-submit,
.vip-pay-button {
    min-width: 0;
}

.profile-button span,
.auth-submit span,
.hero-cta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .finder-filter-panel,
    .finder-map-layout,
    .encounters-live-layout,
    .webcam-global-layout,
    .chatrooms-layout,
    .wall-shell,
    .publish-ad-layout,
    .vip-hero,
    .site-footer-inner {
        grid-template-columns: 1fr;
    }

    .encounters-live-layout,
    .encounters-map-shell,
    .encounters-chat-panel,
    .chatrooms-layout {
        height: auto;
        max-height: none;
    }

    .encounters-map-shell,
    .encounters-chat-panel,
    .webcam-global-layout,
    .chatrooms-layout,
    .messages-window {
        min-height: min(720px, calc(100dvh - 110px));
    }

    .finder-grid,
    .events-card-grid,
    .events-sponsor-grid,
    .media-grid,
    .story-grid,
    .vip-benefits,
    .footer-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webcam-stream-grid,
    .publish-ad-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .top-strip-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 7px 0;
    }

    .top-links {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .finder-heading,
    .events-heading,
    .publish-ad-heading,
    .messages-heading,
    .support-chat-top,
    .profile-panel-heading,
    .admin-heading,
    .wall-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .finder-filter-panel,
    .finder-grid,
    .encounters-grid,
    .webcam-stream-grid,
    .events-card-grid,
    .events-sponsor-grid,
    .publish-ad-plan-grid,
    .publish-ad-fields,
    .profile-form-grid,
    .profile-info-grid,
    .profile-upload-preview-grid,
    .settings-check-grid,
    .payment-history-list article {
        grid-template-columns: 1fr;
    }

    .profile-layout,
    .settings-layout,
    .support-admin-layout,
    .webcam-stage,
    .webcam-room-layout,
    .webcam-live-room,
    .chatrooms-layout,
    .vip-hero,
    .site-footer-inner,
    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .settings-preview,
    .profile-side,
    .publish-ad-preview,
    .vip-card {
        position: static;
        top: auto;
    }

    .events-slide-overlay {
        right: 16px;
        left: 16px;
        width: auto;
    }

    .events-slide-overlay h2,
    .vip-hero-copy h1,
    .publish-ad-heading h1,
    .finder-heading h1,
    .notifications-heading h1 {
        overflow-wrap: anywhere;
    }

    .chat-window {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
}

@media (max-width: 640px) {
    .top-strip {
        display: none;
    }

    .public-navbar,
    .notifications-shell,
    .legal-shell,
    .finder-shell,
    .encounters-shell,
    .webcam-shell,
    .chatrooms-shell,
    .messages-shell,
    .support-shell,
    .profile-shell,
    .wall-shell,
    .events-shell,
    .publish-ad-shell,
    .vip-shell,
    .site-footer-inner,
    .footer-bottom {
        width: min(100% - 20px, 760px);
    }

    .hero-screen,
    .auth-screen,
    .finder-screen,
    .profile-screen,
    .wall-screen,
    .events-screen,
    .publish-ad-screen,
    .vip-screen,
    .notifications-screen,
    .legal-screen,
    .webcam-screen,
    .chatrooms-screen,
    .messages-screen,
    .support-screen {
        padding-right: max(10px, env(safe-area-inset-right));
        padding-left: max(10px, env(safe-area-inset-left));
    }

    .auth-card,
    .profile-panel,
    .settings-card,
    .admin-panel,
    .support-contact-form,
    .support-chat-card,
    .publish-ad-form,
    .publish-ad-preview,
    .vip-card,
    .legal-card,
    .notification-card {
        padding: 16px;
    }

    .nav-panel {
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
    }

    .brand-text {
        max-width: calc(100vw - 82px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-content h1,
    .auth-brand-copy h1,
    .profile-title h1,
    .settings-header h1,
    .events-slide-overlay h2,
    .vip-hero-copy h1 {
        overflow-wrap: anywhere;
    }

    .finder-grid,
    .encounters-grid,
    .webcam-stream-grid,
    .events-card-grid,
    .events-sponsor-grid,
    .vip-benefits,
    .footer-links-grid,
    .media-grid,
    .story-grid {
        grid-template-columns: 1fr;
    }

    .chat-modal {
        padding: 0;
    }

    .chat-window,
    .messages-window {
        width: 100%;
        height: calc(100dvh - 20px);
        min-height: 0;
        border-radius: 8px;
    }

    .messages-chat-surface .chat-window {
        height: calc(100dvh - 130px);
    }

    .wall-stories-track {
        padding-right: 44px;
        padding-left: 44px;
    }

    .profile-upload-cta {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        white-space: normal;
    }

    .profile-panel-heading .profile-upload-cta {
        margin-top: 8px;
    }

    .highlight-view-card {
        width: min(100%, 390px);
        padding: 10px;
    }

    .chat-sidebar-heading,
    .chat-main-heading {
        min-height: 48px;
        padding: 0 10px;
        gap: 8px;
    }

    .chat-call-actions {
        gap: 5px;
    }

    .chat-call-actions button,
    .chat-tools button {
        width: 32px;
        height: 32px;
    }

    .chat-form {
        grid-template-columns: minmax(0, 1fr) 38px 38px;
        gap: 7px;
        padding: 10px;
    }

    .chat-tools {
        grid-column: 1 / -1;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .chat-message {
        max-width: 90%;
    }

    .chat-thread-list {
        max-width: 100%;
    }

    .profile-actions {
        align-items: stretch;
    }

    .profile-actions,
    .profile-actions form,
    .profile-actions .profile-button,
    .profile-owner-toolbar .profile-button,
    .publish-ad-submit,
    .vip-pay-button,
    .support-close-button {
        width: 100%;
    }

    .story-composer-card,
    .verification-card,
    .profile-view-card,
    .highlight-view-card,
    .media-viewer-card,
    .profile-story-forward-card,
    .notice-modal-card,
    .chat-call-card {
        width: min(100% - 20px, 560px);
        max-height: calc(100dvh - 20px);
        overflow: auto;
    }

    .story-composer-modal,
    .verification-modal,
    .profile-view-modal,
    .highlight-view-modal,
    .media-viewer-modal,
    .profile-story-forward-modal,
    .notice-modal,
    .chat-call-modal {
        padding: 10px;
    }

    .payment-history-list article {
        grid-template-columns: 1fr;
    }

    .payment-history-list article small {
        grid-column: auto;
    }
}

@media (max-width: 420px) {
    .public-navbar {
        min-height: 54px;
    }

    .brand-text {
        font-size: 19px;
    }

    .brand-text small {
        display: none;
    }

    .nav-toggle {
        width: 36px;
        height: 36px;
    }

    .hero-content h1,
    .auth-heading h2,
    .profile-title h1,
    .settings-header h1,
    .events-slide-overlay h2,
    .vip-hero-copy h1,
    .publish-ad-heading h1,
    .notifications-heading h1 {
        font-size: 28px;
        line-height: 1.02;
    }

    .profile-cover {
        min-height: 150px;
    }

    .profile-avatar {
        width: min(210px, 68vw);
        height: min(210px, 68vw);
        margin-top: -84px;
    }

    .chat-window,
    .messages-window {
        height: calc(100dvh - 12px);
        border-radius: 6px;
    }

    .messages-chat-surface .chat-window {
        height: calc(100dvh - 110px);
    }

    .chat-main-heading strong {
        font-size: 12px;
    }

    .notification-card {
        grid-template-columns: 1fr;
    }

    .notification-open {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .hero-content h1,
    .auth-heading h2,
    .profile-title h1,
    .settings-header h1,
    .events-slide-overlay h2,
    .vip-hero-copy h1,
    .publish-ad-heading h1,
    .notifications-heading h1 {
        font-size: 25px;
    }

    .chat-call-actions button,
    .chat-tools button {
        width: 30px;
        height: 30px;
    }

}

@media (max-height: 560px) and (orientation: landscape) {
    .hero-screen,
    .auth-screen,
    .finder-screen,
    .profile-screen,
    .wall-screen,
    .events-screen,
    .publish-ad-screen,
    .vip-screen,
    .messages-screen,
    .support-screen,
    .webcam-screen,
    .chatrooms-screen {
        min-height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .chat-window,
    .messages-window,
    .webcam-global-layout,
    .chatrooms-layout,
    .encounters-live-layout {
        height: calc(100dvh - 20px);
        min-height: 0;
    }

    .hero-main,
    .auth-brand-panel,
    .events-carousel-stage {
        min-height: 260px;
    }
}

html,
body {
    -webkit-touch-callout: none;
}

body,
body *:not(input):not(textarea):not(select):not([contenteditable]) {
    -webkit-user-select: none;
    user-select: none;
}

img,
video,
audio,
canvas,
svg,
picture,
source {
    -webkit-user-drag: none;
    user-drag: none;
}

.is-print-blocked body > * {
    display: none !important;
}

.is-print-blocked body::before {
    content: "La impresion y captura de contenido no esta permitida.";
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background: #0f0f14;
    color: #ffffff;
    font: 700 18px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

@media print {
    body > * {
        display: none !important;
    }

    body::before {
        content: "La impresion y captura de contenido no esta permitida.";
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: 24px;
        color: #000000;
        font: 700 18px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-align: center;
    }
}