@font-face {
    font-family: Golos Text Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(./golos-text-cyrillic-ext-wght-normal-hICkpzq7.woff2) format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Golos Text Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(./golos-text-cyrillic-wght-normal-mKek_fSS.woff2) format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Golos Text Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(./golos-text-latin-ext-wght-normal-B-I5lbAQ.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Golos Text Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(./golos-text-latin-wght-normal-BS5oQT7X.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
    color-scheme: dark;
    --bg: #09090b;
    --panel: #101012;
    --panel-2: #161618;
    --panel-3: #1c1c1f;
    --border: #232326;
    --border-soft: #1b1b1e;
    --text: #f4f4f5;
    --muted: #8b8b93;
    --faint: #5c5c66;
    --accent: #fafafa;
    --accent-ink: #09090b;
    --hover: #1b1b1e;
    --selected: #202024;
    --bubble-in: #1a1a1d;
    --bubble-out: #2c2c31;
    --danger: #e07a7a;
    --gold: #d6b36a;
    --ok: #9dc4a4;
    --shadow: 0 18px 60px rgba(0, 0, 0, .45);
    --radius: 14px
}

:root[data-theme=light],
.app.light {
    color-scheme: light;
    --bg: #f4f4f5;
    --panel: #ffffff;
    --panel-2: #f7f7f8;
    --panel-3: #ececef;
    --border: #e4e4e7;
    --border-soft: #eeeeef;
    --text: #18181b;
    --muted: #71717a;
    --faint: #a1a1aa;
    --accent: #18181b;
    --accent-ink: #fafafa;
    --hover: #f0f0f2;
    --selected: #e9e9ec;
    --bubble-in: #ffffff;
    --bubble-out: #e4e4e7;
    --shadow: 0 18px 60px rgba(0, 0, 0, .12)
}

* {
    box-sizing: border-box
}

html,
body,
#root {
    height: 100%;
    margin: 0
}

body {
    font-family: Golos Text Variable, Golos Text, system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer;
    border: none;
    background: none
}

button:disabled {
    cursor: not-allowed;
    opacity: .45
}

input,
textarea,
select {
    outline: none
}

a {
    color: inherit
}

::selection {
    background: #3f3f46;
    color: #fff
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-thumb {
    background: #2c2c31;
    border-radius: 8px
}

::-webkit-scrollbar-track {
    background: transparent
}

.spin {
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes float {

    0%,
    to {
        transform: translateY(0) rotate(-3deg)
    }

    50% {
        transform: translateY(-10px) rotate(2deg)
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -.7px;
    color: var(--text)
}

.brand-symbol {
    width: 34px;
    height: 34px;
    display: inline-flex;
    color: #e4e4e7
}

.brand-symbol svg {
    width: 100%;
    height: 100%
}

.brand-small .brand-symbol {
    width: 34px;
    height: 34px
}

.brand-light {
    color: #fff
}

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--text)
}

.avatar svg {
    width: 100%;
    height: 100%
}

.avatar-initials {
    font-size: calc(var(--avatar-size) * .36);
    font-weight: 600;
    letter-spacing: -.5px
}

.online-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ok);
    border: 2px solid var(--panel)
}

.premium-mark {
    display: inline-flex;
    color: var(--gold);
    vertical-align: middle;
    margin-left: 4px
}

.stars-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 11px;
    font-weight: 560;
    font-size: 13.5px;
    transition: background .15s, transform .1s, border-color .15s;
    border: 1px solid transparent;
    min-height: 40px
}

.button:active:not(:disabled) {
    transform: translateY(1px)
}

.button-primary {
    background: var(--accent);
    color: var(--accent-ink)
}

.button-primary:hover:not(:disabled) {
    opacity: .9
}

.button-secondary {
    background: var(--panel-3);
    border-color: var(--border);
    color: var(--text)
}

.button-secondary:hover:not(:disabled) {
    background: var(--hover);
    border-color: #3a3a40
}

.button-lime {
    background: var(--gold);
    color: #17130a
}

.button-danger {
    background: #3a2224;
    color: #f0a0a0;
    border-color: #573033
}

.button-full {
    width: 100%
}

.icon-button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: background .15s, color .15s;
    flex-shrink: 0
}

.icon-button:hover,
.icon-button.active {
    background: var(--panel-3);
    color: var(--text)
}

.plain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    padding: 4px;
    border-radius: 6px
}

.plain-icon:hover {
    color: var(--text)
}

.text-button {
    color: var(--muted);
    font-size: 13px;
    padding: 10px;
    width: 100%
}

.text-button:hover {
    color: var(--text)
}

.text-danger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--danger);
    font-size: 13px;
    padding: 10px 0
}

.text-muted {
    color: var(--muted)
}

.field-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--muted);
    margin-bottom: 15px
}

.field-label input,
.field-label textarea,
.field-label select,
.input-with-prefix {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--text)
}

.field-label input,
.field-label textarea,
.field-label select {
    padding: 11px 13px;
    width: 100%;
    font-size: 14px;
    font-weight: 400
}

.field-label input:focus,
.field-label textarea:focus,
.field-label select:focus,
.input-with-prefix:focus-within {
    border-color: #52525b
}

.field-label textarea {
    resize: vertical;
    min-height: 60px
}

.input-with-prefix {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px
}

.input-with-prefix svg {
    color: var(--faint);
    flex-shrink: 0
}

.input-with-prefix input {
    border: none;
    background: none;
    padding: 11px 0;
    flex: 1;
    min-width: 0;
    font-size: 14px
}

.field-hint {
    font-size: 12px;
    color: var(--faint);
    font-weight: 400
}

.form-error {
    color: var(--danger);
    font-size: 12.5px;
    background: #e07a7a14;
    border: 1px solid rgba(224, 122, 122, .2);
    padding: 9px 12px;
    border-radius: 9px;
    margin: 10px 0
}

.readonly-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 13px;
    color: var(--muted);
    font-weight: 400
}

.readonly-field svg:last-child {
    margin-left: auto
}

.subtle-badge {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--panel-3);
    color: var(--muted);
    font-size: 11px
}

.eyebrow {
    font-size: 10.5px;
    letter-spacing: 1.6px;
    color: var(--faint);
    font-weight: 600
}

.loading-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    padding: 24px 0
}

.app {
    display: flex;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg)
}

.rail {
    width: 76px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 16px;
    z-index: 20
}

.rail-logo {
    margin-bottom: 28px;
    padding: 0
}

.rail nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center
}

.rail-button {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: background .15s, color .15s
}

.rail-button span {
    display: none
}

.rail-button:hover {
    background: var(--hover);
    color: var(--text)
}

.rail-button.active {
    background: var(--panel-3);
    color: var(--text)
}

.rail-button.active:before {
    content: "";
    position: absolute;
    left: -12px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 3px;
    background: var(--accent)
}

.rail-button.premium-nav {
    color: var(--gold)
}

.nav-dot {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold)
}

.rail-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.rail-avatar {
    position: relative;
    padding: 0;
    border-radius: 50%
}

.rail-avatar .premium-mark {
    position: absolute;
    right: -3px;
    bottom: -3px;
    background: var(--panel);
    border-radius: 50%;
    padding: 2px
}

.workspace {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%
}

.demo-strip {
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 11.5px;
    color: var(--muted);
    background: #12120f;
    border-bottom: 1px solid #26261c
}

.demo-strip span {
    color: var(--gold);
    font-weight: 550
}

.demo-strip i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--faint)
}

.demo-strip button {
    margin-left: auto;
    color: var(--muted);
    text-decoration: underline;
    font-size: 11.5px
}

.security-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #e07a7a1a;
    color: var(--danger);
    font-size: 12px;
    border-bottom: 1px solid rgba(224, 122, 122, .2)
}

.chats-layout {
    display: flex;
    flex: 1;
    min-height: 0
}

.boot-screen {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--muted);
    background: var(--bg)
}

.chat-list {
    width: 320px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    min-height: 0
}

.chat-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 14px
}

.chat-list-heading>div {
    display: flex;
    align-items: center;
    gap: 9px
}

.beta-label {
    font-size: 10px;
    color: var(--faint);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 20px;
    margin-top: 4px
}

.compose-button {
    background: var(--panel-3);
    color: var(--text)
}

.chat-search {
    margin: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 0 12px;
    height: 40px;
    color: var(--faint)
}

.chat-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--text)
}

.chat-search input::placeholder {
    color: var(--faint)
}

.chat-search kbd {
    font-size: 10px;
    color: var(--faint);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
    font-family: inherit
}

.chat-filters {
    display: flex;
    gap: 6px;
    padding: 14px 14px 10px;
    overflow-x: auto
}

.chat-filters button {
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px
}

.chat-filters button.active {
    background: var(--panel-3);
    color: var(--text)
}

.chat-filters button span {
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 10px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px
}

.conversation-items {
    flex: 1;
    overflow-y: auto;
    padding: 2px 8px 12px
}

.conversation-item {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 10px;
    border-radius: 14px;
    text-align: left;
    position: relative;
    transition: background .12s
}

.conversation-item:hover {
    background: var(--hover)
}

.conversation-item.selected {
    background: var(--selected)
}

.conversation-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.conversation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.conversation-top strong {
    font-size: 13.5px;
    font-weight: 570;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.conversation-top time {
    font-size: 10.5px;
    color: var(--faint);
    flex-shrink: 0
}

.conversation-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.message-preview {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0
}

.message-preview svg {
    flex-shrink: 0
}

.own-preview {
    color: var(--faint)
}

.unread-count {
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 10.5px;
    font-weight: 600;
    min-width: 19px;
    height: 19px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0
}

.verified-dot {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--panel-3);
    color: var(--muted);
    align-items: center;
    justify-content: center;
    margin-left: 3px
}

.demo-mini {
    position: absolute;
    right: 10px;
    bottom: 7px;
    font-size: 9px;
    color: var(--faint)
}

.sidebar-privacy {
    margin: 8px 14px;
    padding: 13px;
    border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    display: flex;
    gap: 11px;
    align-items: center;
    text-align: left
}

.privacy-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0
}

.sidebar-privacy strong {
    display: block;
    font-size: 12px;
    font-weight: 550
}

.sidebar-privacy small {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--faint);
    margin-top: 2px
}

.sidebar-footnote {
    padding: 0 18px 16px;
    font-size: 10.5px;
    color: var(--faint);
    display: flex;
    align-items: center;
    gap: 6px
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok)
}

.status-dot.offline {
    background: var(--gold)
}

.chat-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative
}

.chat-header {
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-soft);
    background: #101012d9;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 5
}

.app.light .chat-header {
    background: #ffffffd9
}

.chat-person {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    min-width: 0;
    padding: 0
}

.chat-person>span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.chat-person strong {
    font-size: 14.5px;
    font-weight: 580;
    display: flex;
    align-items: center;
    white-space: nowrap
}

.chat-person small {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px
}

.chat-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px
}

.header-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 5px
}

.mobile-back {
    display: none
}

.message-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--muted)
}

.message-search input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px
}

.message-search span {
    font-size: 11px;
    color: var(--faint)
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 28px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .025) 1px, transparent 0);
    background-size: 26px 26px
}

.app.light .chat-messages {
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .035) 1px, transparent 0)
}

.encryption-notice {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto 16px;
    padding: 7px 13px;
    border-radius: 20px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 11px;
    text-align: center
}

.encryption-notice button {
    color: var(--text);
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px
}

.date-separator {
    display: flex;
    justify-content: center;
    margin: 14px 0 12px
}

.date-separator span {
    font-size: 11px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    padding: 4px 12px;
    border-radius: 20px
}

.message-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
    animation: fadeUp .18s ease
}

.message-row.outgoing {
    justify-content: flex-end
}

.message-row.grouped {
    margin-top: -1px
}

.message-avatar-slot {
    width: 29px;
    flex-shrink: 0
}

.message-bubble {
    position: relative;
    max-width: min(72%, 520px);
    padding: 9px 13px 7px;
    border-radius: 16px;
    background: var(--bubble-in);
    border: 1px solid var(--border-soft)
}

.outgoing .message-bubble {
    background: var(--bubble-out);
    border-color: transparent;
    border-bottom-right-radius: 5px
}

.incoming .message-bubble {
    border-bottom-left-radius: 5px
}

.message-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 44px
}

.message-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 10px;
    color: var(--faint);
    margin-top: 3px;
    float: right;
    margin-left: 10px;
    position: relative;
    top: 4px
}

.outgoing .message-time {
    color: var(--muted)
}

.message-sender {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--muted)
}

.message-hover-actions {
    position: absolute;
    top: -14px;
    right: 8px;
    display: none;
    gap: 2px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 2px;
    box-shadow: var(--shadow)
}

.message-bubble:hover .message-hover-actions {
    display: flex
}

.message-hover-actions button {
    width: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border-radius: 6px
}

.message-hover-actions button:hover {
    color: var(--text);
    background: var(--hover)
}
.message-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0
}

.message-edit-input {
    width: 100%;
    min-height: 44px;
    resize: vertical;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box
}

.message-edit-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(94, 234, 212, .15))
}

.message-edit-actions {
    display: flex;
    gap: 6px;
    align-items: center
}

.message-edit-actions .button {
    padding: 5px 12px;
    font-size: 12.5px;
    border-radius: 8px;
    border: 1px solid var(--border)
}

.message-delete-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 9px;
    border-radius: 10px;
    background: #3a2224;
    border: 1px solid #573033;
    font-size: 12px;
    color: #f0a0a0
}

.message-delete-confirm span {
    flex: 1
}

.message-delete-confirm .button-danger {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 7px
}

.message-delete-confirm .plain-icon {
    font-size: 12px;
    padding: 4px 8px;
    color: #f0a0a0
}

.message-edited {
    font-style: italic;
    opacity: .85
}


.reply-quote {
    border-left: 2px solid var(--muted);
    padding: 3px 8px;
    margin-bottom: 6px;
    background: #ffffff08;
    border-radius: 0 7px 7px 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.reply-quote strong {
    font-size: 11px;
    color: var(--text)
}

.reply-quote span {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px
}

.system-message {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 520px;
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    padding: 8px 14px;
    border-radius: 12px;
    margin: 8px 0;
    white-space: pre-wrap
}

.service-message .message-bubble {
    max-width: 560px;
    background: var(--panel-2)
}

.decryption-error {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--danger);
    font-size: 12.5px
}

.decryption-error small {
    display: block;
    color: var(--muted);
    font-size: 11px
}

.message-error {
    border-color: #e07a7a4d
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    padding: 6px 0
}

.typing-indicator i {
    font-style: normal;
    animation: pulse 1.2s infinite
}

@keyframes pulse {
    50% {
        opacity: .3
    }
}

.composer {
    flex-shrink: 0;
    padding: 10px 22px 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--panel)
}

.composer-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px 8px
}

.composer-input-row textarea {
    flex: 1;
    resize: none;
    border: none;
    background: none;
    padding: 9px 4px;
    max-height: 130px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text)
}

.composer-input-row textarea::placeholder {
    color: var(--faint)
}

.send-button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s
}

.send-button:hover:not(:disabled) {
    opacity: .85
}

.composer-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--faint);
    padding: 7px 6px 0
}

.composer-hint span {
    margin-left: auto
}

.composer-reply {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--panel-2);
    border-radius: 11px;
    border-left: 2px solid var(--muted);
    color: var(--muted)
}

.composer-reply div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.composer-reply strong {
    font-size: 11.5px;
    color: var(--text)
}

.composer-reply span {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.emoji-wrap {
    position: relative
}

.emoji-picker {
    position: absolute;
    bottom: 46px;
    right: 0;
    width: 224px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--shadow);
    z-index: 30
}

.emoji-picker button {
    font-size: 21px;
    padding: 6px;
    border-radius: 8px
}

.emoji-picker button:hover {
    background: var(--hover)
}

.read-only-composer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 12.5px;
    background: var(--panel)
}

.read-only-composer button {
    color: var(--text);
    text-decoration: underline
}

.no-chat-selected {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted)
}

.no-chat-selected h2 {
    color: var(--text);
    margin: 8px 0 0;
    font-size: 20px
}

.no-chat-selected p {
    margin: 0 0 8px
}

.profile-panel {
    width: 292px;
    flex-shrink: 0;
    background: var(--panel);
    border-left: 1px solid var(--border-soft);
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.profile-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px
}

.profile-panel-heading h3 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--muted)
}

.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 20px 18px
}

.profile-avatar-wrap {
    position: relative;
    margin-bottom: 12px
}

.profile-tiny-leaf {
    position: absolute;
    right: -2px;
    bottom: -2px;
    font-size: 18px;
    background: var(--panel);
    border-radius: 50%;
    padding: 2px
}

.profile-hero h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 620;
    display: flex;
    align-items: center;
    gap: 4px
}

.profile-handle {
    color: var(--muted);
    font-size: 12.5px;
    padding: 3px 0
}

.profile-hero p {
    color: var(--muted);
    font-size: 12.5px;
    margin: 8px 0 0;
    line-height: 1.5
}

.profile-demo-label {
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--faint);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 20px
}

.theme-midnight {
    background: radial-gradient(circle at 50% 0%, rgba(90, 110, 160, .16), transparent 70%)
}

.theme-ember {
    background: radial-gradient(circle at 50% 0%, rgba(180, 110, 70, .14), transparent 70%)
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 4px 16px 18px
}

.profile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--muted)
}

.profile-action span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: background .15s
}

.profile-action:hover span {
    background: var(--hover)
}

.profile-security {
    margin: 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    text-align: left
}

.profile-security>span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted)
}

.profile-security div {
    flex: 1;
    min-width: 0
}

.profile-security strong {
    display: block;
    font-size: 11.5px;
    font-weight: 550
}

.profile-security small {
    font-size: 10px;
    color: var(--faint);
    font-family: ui-monospace, monospace
}

.profile-security>svg {
    color: var(--faint)
}

.profile-section {
    padding: 14px 16px;
    border-top: 1px solid var(--border-soft)
}

.profile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: var(--muted)
}

.profile-section-title h3 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 560;
    color: var(--text)
}

.profile-section-title h3 span {
    color: var(--faint);
    font-weight: 400;
    margin-left: 4px
}

.shared-gifts,
.shared-gifts button,
.profile-section-note {
    display: block;
    font-size: 10.5px;
    color: var(--faint);
    margin-top: 9px
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.member-list>div {
    display: flex;
    align-items: center;
    gap: 9px
}

.member-list span {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.member-list strong {
    font-size: 12px;
    font-weight: 550
}

.member-list small {
    font-size: 10.5px;
    color: var(--faint)
}

.member-role {
    margin-left: auto;
    font-size: 9.5px;
    color: var(--faint)
}

.profile-bottom {
    margin-top: auto;
    padding: 24px 16px;
    text-align: center;
    color: var(--faint)
}

.little-flower {
    font-size: 20px;
    opacity: .5
}

.profile-bottom p {
    font-size: 11px;
    margin: 6px 0 0;
    line-height: 1.5
}

.content-page {
    flex: 1;
    overflow-y: auto;
    padding: 30px 38px 48px;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px
}

.page-heading h1 {
    margin: 6px 0;
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.8px
}

.page-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px
}

.balance-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px 10px 9px 15px
}

.balance-pill button {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text)
}

.page-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 12px
}

.page-tabs button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 11px;
    color: var(--muted);
    font-size: 13px
}

.page-tabs button.active {
    background: var(--panel-3);
    color: var(--text)
}

.page-tabs button span {
    background: var(--panel);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10.5px
}

.gift-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(120deg, #151517, #1a1820 60%, #141416);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 30px 34px;
    margin-bottom: 28px;
    overflow: hidden;
    position: relative
}

.gift-hero-copy {
    position: relative;
    z-index: 2
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--gold);
    margin-bottom: 12px
}

.gift-hero h2 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 640;
    letter-spacing: -.6px
}

.gift-hero p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px
}

.gift-hero-copy button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 9px 15px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 560
}

.gift-hero-art {
    position: relative;
    width: 280px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gift-hero-art .coral {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%
}

.coral-one {
    width: 260px;
    height: 260px
}

.coral-two {
    width: 340px;
    height: 340px
}

.hero-edition {
    position: absolute;
    bottom: 12px;
    right: 20px;
    font-size: 20px;
    font-weight: 650;
    color: var(--text);
    z-index: 3
}

.hero-edition span {
    color: var(--faint);
    font-size: 13px;
    font-weight: 400
}

.hero-star {
    position: absolute;
    color: var(--gold);
    font-style: normal;
    opacity: .7
}

.star-one {
    top: 24px;
    left: 30px;
    font-size: 18px
}

.star-two {
    bottom: 40px;
    left: 12px;
    font-size: 24px
}

.catalog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    scroll-margin-top: 20px
}

.catalog-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600
}

.small-filters {
    display: flex;
    gap: 5px
}

.small-filters button {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--muted)
}

.small-filters button.active {
    background: var(--panel-3);
    color: var(--text)
}

.rarity-planet,
.rarity-crown {
    color: var(--gold)
}

.edition-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 10px;
    color: #fff9;
    background: #0000004d;
    padding: 3px 8px;
    border-radius: 20px
}

.pinned-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--gold)
}

.supply-line {
    margin-bottom: 12px
}

.supply-line>div {
    height: 3px;
    background: var(--panel-3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px
}

.supply-line i {
    display: block;
    height: 100%;
    background: var(--gold);
    border-radius: 3px
}

.supply-line small {
    font-size: 10.5px;
    color: var(--faint)
}

.unlimited-line {
    font-size: 10.5px;
    color: var(--faint);
    margin-bottom: 14px
}

.gift-buy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 550
}

.gift-buy:hover:not(:disabled) {
    background: var(--hover)
}

.inventory-actions {
    display: flex;
    gap: 7px;
    align-items: center
}

.inventory-actions .button {
    flex: 1;
    padding: 9px 12px
}

.test-mode-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 13px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--muted)
}

.test-mode-note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--faint)
}

.test-mode-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5
}

.collection-intro {
    margin-bottom: 18px
}

.collection-intro span {
    font-size: 15px;
    font-weight: 580
}

.collection-intro p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12.5px
}

.history-card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 22px
}

.history-card h2 {
    margin: 0 0 16px;
    font-size: 17px
}

.gift-history-list {
    display: flex;
    flex-direction: column
}

.gift-history-list>div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft)
}

.gift-history-list>div:last-child {
    border-bottom: none
}

.history-art {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.gift-history-list>div>div:nth-child(2) {
    flex: 1;
    min-width: 0
}

.gift-history-list strong {
    font-size: 13px;
    font-weight: 560
}

.gift-history-list p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--muted)
}

.gift-history-list time {
    font-size: 11px;
    color: var(--faint);
    text-align: right;
    display: flex;
    flex-direction: column
}

.gift-history-list time small {
    font-size: 10px
}

.gift-history-list.compact>div {
    padding: 10px 0
}

.history-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--panel-3);
    border: 1px solid var(--border);
    flex-shrink: 0
}

.history-title {
    font-size: 13px;
    margin: 20px 0 6px
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--muted)
}

.empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    margin-bottom: 16px
}

.empty-state h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 16px;
    font-weight: 580
}

.empty-state p {
    margin: 0 0 18px;
    font-size: 13px;
    max-width: 340px
}

.premium-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(120deg, #161512, #1c1a15 55%, #121214);
    border: 1px solid #2e2a20;
    border-radius: 24px;
    padding: 34px 38px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden
}

.premium-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 560;
    margin-bottom: 16px
}

.premium-wordmark b {
    font-weight: 400;
    color: var(--muted)
}

.premium-hero h2 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.8px;
    font-weight: 650
}

.premium-hero p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13.5px
}

.premium-hero small {
    display: block;
    margin-top: 10px;
    color: var(--faint);
    font-size: 11px
}

.premium-active-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    background: #d6b36a1a;
    border: 1px solid rgba(214, 179, 106, .25);
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 13px
}

.premium-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px
}

.premium-benefits>div {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 18px
}

.premium-benefits>div>span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    margin-bottom: 12px
}

.premium-benefits h3 {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 580
}

.premium-benefits p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.alias-section {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 24px
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px
}

.section-heading h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600
}

.section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px
}

.count-pill {
    background: var(--panel-3);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--muted)
}

.alias-primary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    margin-bottom: 12px
}

.alias-primary div {
    flex: 1;
    display: flex;
    flex-direction: column
}

.alias-primary strong {
    font-size: 13.5px
}

.alias-primary small {
    font-size: 11px;
    color: var(--faint)
}

.alias-slots {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.alias-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    color: var(--faint);
    font-size: 12.5px
}

.alias-slot.filled {
    border-style: solid;
    background: var(--panel-2);
    color: var(--text)
}

.alias-number {
    font-size: 10px;
    color: var(--faint);
    width: 18px
}

.alias-slot strong {
    flex: 1;
    font-weight: 550
}

.alias-slot small {
    color: var(--gold);
    font-size: 10.5px
}

.alias-slot>svg:last-child {
    margin-left: auto
}

.alias-form {
    display: flex;
    gap: 10px;
    margin-top: 14px
}

.alias-form .input-with-prefix {
    flex: 1
}

.alias-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 16px 0 0;
    font-size: 11.5px;
    color: var(--faint);
    line-height: 1.5
}

.alias-note svg {
    flex-shrink: 0;
    margin-top: 2px
}

.premium-manage {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--muted)
}

.premium-manage span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ok)
}

.premium-manage button {
    color: var(--text);
    text-decoration: underline;
    font-size: 12px
}

.invite-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 22px
}

.invite-banner-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0
}

.invite-banner div:nth-child(2) {
    flex: 1
}

.invite-banner h3 {
    margin: 0 0 4px;
    font-size: 15px
}

.invite-banner p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px
}

.contacts-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 0 14px;
    height: 44px;
    margin-bottom: 20px;
    color: var(--faint)
}

.contacts-search input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text)
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px
}

.contact-card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.contact-card h3 {
    margin: 12px 0 2px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 3px
}

.contact-card>span {
    color: var(--muted);
    font-size: 12px
}

.contact-card p {
    color: var(--muted);
    font-size: 12px;
    margin: 10px 0;
    min-height: 34px
}

.contact-card .button {
    margin-top: 12px;
    width: 100%
}

.settings-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start
}

.settings-card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px
}

.settings-card h2 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600
}

.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px
}

.settings-avatar-row strong {
    display: block;
    font-size: 13px;
    margin-bottom: 8px
}

.color-picker {
    display: flex;
    gap: 7px
}

.color-picker button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text)
}

.color-picker button.selected {
    border-color: var(--text)
}

.premium-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gold);
    font-size: 10.5px;
    margin-left: 6px
}

.theme-choices {
    display: flex;
    gap: 10px
}

.theme-choice {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--muted)
}

.theme-choice span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.theme-choice.theme-graphite span {
    background: #27272a
}

.theme-choice.theme-midnight span {
    background: #28304a
}

.theme-choice.theme-ember span {
    background: #3a2a22
}

.theme-choice.selected {
    border-color: var(--muted);
    color: var(--text)
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-soft)
}

.setting-row:last-child {
    border-bottom: none
}

.setting-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted)
}

.setting-row div {
    flex: 1
}

.setting-row strong {
    font-size: 13px;
    font-weight: 550
}

.setting-row p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--faint)
}

.toggle {
    width: 42px;
    height: 24px;
    border-radius: 20px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    position: relative;
    transition: background .15s
}

.toggle i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s, background .15s
}

.toggle.on {
    background: var(--accent);
    border-color: var(--accent)
}

.toggle.on i {
    transform: translate(18px);
    background: var(--accent-ink)
}

.account-card .eyebrow {
    display: block;
    margin-bottom: 8px
}

.account-card h2 {
    margin-bottom: 8px
}

.account-card p {
    color: var(--muted);
    font-size: 12.5px;
    margin: 0 0 16px;
    line-height: 1.55
}

.settings-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    color: var(--muted)
}

.settings-link:last-child {
    border-bottom: none
}

.settings-link span {
    flex: 1;
    display: flex;
    flex-direction: column
}

.settings-link strong {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 550
}

.settings-link small {
    font-size: 11px;
    color: var(--faint)
}

.settings-link.danger strong {
    color: var(--danger)
}

.settings-version {
    text-align: center;
    color: var(--faint);
    font-size: 11px;
    padding: 8px;
    line-height: 1.7
}

.mini-brand-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000a6;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    animation: fadeUp .15s ease
}

.modal {
    width: 100%;
    max-width: 440px;
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow)
}

.modal-wide {
    max-width: 600px
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 620;
    letter-spacing: -.3px
}

.modal-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5
}

.modal-fineprint {
    font-size: 11px;
    color: var(--faint);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px
}

.modal-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 18px 0
}

.confirm-text {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0
}

.auth-tabs {
    display: flex;
    gap: 5px;
    background: var(--panel-2);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px
}

.auth-tabs button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px
}

.auth-tabs button.active {
    background: var(--panel-3);
    color: var(--text)
}

.lookup-form {
    display: flex;
    gap: 8px
}

.lookup-form .input-with-prefix {
    flex: 1
}

.found-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    background: var(--panel-2);
    border-radius: 13px;
    margin-top: 12px
}

.found-user div {
    flex: 1;
    display: flex;
    flex-direction: column
}

.found-user strong {
    font-size: 13.5px;
    display: flex;
    align-items: center
}

.found-user small {
    color: var(--muted);
    font-size: 11.5px
}

.contact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px
}

.contact-chips button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    border-radius: 20px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted)
}

.contact-chips button.selected {
    border-color: var(--muted);
    color: var(--text)
}

.selected-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px
}

.selected-members span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--panel-3);
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11.5px
}

.selected-members button {
    display: flex;
    color: var(--muted)
}

.invite-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.invite-inline code {
    background: var(--panel-2);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12px
}

.invite-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 16px
}

.invite-profile h3 {
    margin: 10px 0 2px;
    font-size: 16px;
    display: flex;
    align-items: center
}

.invite-profile span {
    color: var(--muted);
    font-size: 12.5px
}

.qr-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0
}

.qr-wrap img {
    border-radius: 14px;
    border: 8px solid #fff
}

.invite-link {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 12px;
    overflow: hidden
}

.invite-link code {
    font-size: 11.5px;
    color: var(--muted);
    word-break: break-all
}

.security-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.security-user div {
    flex: 1;
    display: flex;
    flex-direction: column
}

.security-user strong {
    font-size: 14px
}

.security-user small {
    color: var(--muted);
    font-size: 12px
}

.security-user>svg {
    color: var(--ok)
}

.safety-number {
    font-family: ui-monospace, SF Mono, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 16px;
    margin-bottom: 14px;
    line-height: 1.8;
    word-break: break-word
}

.fingerprint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--muted)
}

.fingerprint-row code {
    font-family: ui-monospace, monospace;
    color: var(--text);
    font-size: 11.5px
}

.fingerprint-row strong {
    color: var(--text);
    font-size: 12.5px
}

.security-info h3 {
    font-size: 13.5px;
    margin: 18px 0 8px
}

.security-info ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7
}

.security-info p {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6
}

.security-status {
    display: flex;
    gap: 13px;
    align-items: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px
}

.security-status svg {
    color: var(--ok);
    flex-shrink: 0
}

.security-status strong {
    display: block;
    font-size: 13.5px
}

.security-status span {
    font-size: 12px;
    color: var(--muted)
}

.security-alert {
    display: flex;
    gap: 13px;
    color: var(--danger);
    margin-bottom: 14px
}

.security-alert p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--muted);
    margin: 16px 0
}

.checkbox-row input {
    accent-color: var(--accent)
}

.gift-send-preview,
.gift-details-art,
.purchase-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 12px
}

.purchase-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.purchase-summary h3 {
    margin: 0;
    font-size: 15px
}

.purchase-balance {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 16px
}

.gift-details-description {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    margin: 0 0 12px
}

.auth-screen {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bg)
}

.auth-brand-side {
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 30% 40%, #17171a, #09090b 70%);
    border-right: 1px solid var(--border-soft)
}

.auth-brand-side .brand {
    position: absolute;
    top: 36px;
    left: 56px
}

.auth-brand-side h1 {
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 20px 0 14px;
    font-weight: 650
}

.auth-brand-side>p {
    color: var(--muted);
    font-size: 14px;
    max-width: 380px;
    margin: 0 0 26px
}

.auth-points {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.auth-points span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 12.5px
}

.auth-coral-art {
    position: relative;
    width: 220px;
    height: 180px;
    margin-bottom: 10px
}

.auth-planet {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #26262b, #050506 70%);
    border: 1px solid #333
}

.auth-ring {
    position: absolute;
    left: 10px;
    top: 62px;
    width: 200px;
    height: 56px;
    border: 1.5px solid #71717a;
    border-radius: 50%;
    transform: rotate(-24deg)
}

.auth-coral-art i {
    position: absolute;
    right: 20px;
    top: 20px;
    color: var(--gold);
    font-style: normal
}

.auth-card {
    align-self: center;
    justify-self: center;
    width: min(420px, calc(100% - 48px));
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    box-shadow: var(--shadow)
}

.auth-card .brand {
    margin-bottom: 22px
}

.auth-card-heading h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 630
}

.auth-card-heading p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.auth-card h1 {
    font-size: 22px;
    margin: 12px 0
}

.auth-card>p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.auth-illustration {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: var(--panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    margin: 10px 0
}

.demo-auth-note {
    display: flex;
    gap: 11px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 14px;
    margin-bottom: 18px;
    color: var(--gold)
}

.demo-auth-note p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
    z-index: 200;
    max-width: min(480px, calc(100% - 32px));
    animation: fadeUp .2s ease;
    font-size: 13px
}

.toast.success svg {
    color: var(--ok)
}

.toast.error svg {
    color: var(--danger)
}

.toast button {
    display: flex;
    color: var(--muted);
    margin-left: 6px
}

@media(max-width:1200px) {
    .profile-panel {
        width: 260px
    }

    .chat-list {
        width: 290px
    }

    .content-page {
        padding: 26px 28px 40px
    }
}

@media(max-width:1020px) {
    .profile-panel {
        display: none
    }

    .premium-benefits,
    .settings-layout {
        grid-template-columns: 1fr
    }

    .auth-brand-side {
        padding: 40px
    }

    .auth-brand-side .brand {
        left: 40px
    }
}

@media(max-width:760px) {
    .app {
        flex-direction: column
    }

    .rail {
        order: 2;
        width: 100%;
        height: 62px;
        flex-direction: row;
        padding: 0 8px;
        border-right: none;
        border-top: 1px solid var(--border-soft)
    }

    .rail-logo,
    .rail-bottom {
        display: none
    }

    .rail nav {
        flex-direction: row;
        justify-content: space-around;
        gap: 0
    }

    .rail-button {
        width: 56px;
        height: 50px;
        flex-direction: column;
        gap: 3px;
        border-radius: 12px
    }

    .rail-button span {
        display: block;
        font-size: 9px
    }

    .rail-button.active:before {
        display: none
    }

    .workspace {
        order: 1;
        height: calc(100dvh - 62px)
    }

    .demo-strip {
        font-size: 10px;
        padding: 0 12px
    }

    .demo-strip button {
        display: none
    }

    .chat-list {
        width: 100%;
        border-right: none
    }

    .chat-panel,
    .profile-panel,
    .app.mobile-chat .chat-list {
        display: none
    }

    .app.mobile-chat .chat-panel {
        display: flex
    }

    .mobile-back {
        display: inline-flex
    }

    .chat-header {
        padding: 0 12px;
        height: 62px
    }

    .chat-messages {
        padding: 14px 12px 10px
    }

    .message-bubble {
        max-width: 84%
    }

    .composer {
        padding: 8px 10px 10px
    }

    .composer-hint span {
        display: none
    }

    .content-page {
        padding: 20px 16px 32px
    }

    .page-heading {
        flex-direction: column;
        gap: 12px
    }

    .page-heading h1 {
        font-size: 24px
    }

    .gift-hero {
        flex-direction: column;
        padding: 24px;
        text-align: center
    }

    .gift-hero-art {
        width: 220px;
        height: 190px
    }

    .gift-hero h2 {
        font-size: 22px
    }

    .catalog-heading {
        flex-direction: column;
        align-items: flex-start
    }

    .premium-hero h2 {
        font-size: 26px
    }

    .alias-form {
        flex-direction: column
    }

    .invite-banner {
        flex-direction: column;
        text-align: center
    }

    .auth-screen {
        grid-template-columns: 1fr
    }

    .auth-brand-side {
        display: none
    }

    .auth-card {
        margin: 24px 0
    }

    .modal {
        padding: 20px;
        border-radius: 18px
    }

    .toast {
        bottom: 76px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}

.room-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.room-visibility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px
}

.room-visibility button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    transition: border-color .15s, background .15s
}

.room-visibility button svg {
    color: var(--muted);
    margin-bottom: 2px
}

.room-visibility button strong {
    font-size: 13px;
    color: var(--text);
    font-weight: 600
}

.room-visibility button small {
    font-size: 11.5px;
    line-height: 1.35
}

.room-visibility button.selected {
    border-color: var(--accent);
    background: var(--panel-3)
}

.room-visibility button.selected svg {
    color: var(--accent)
}

.channels-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.channels-toolbar .contacts-search {
    flex: 1;
    min-width: 240px;
    margin: 0
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px
}

.room-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px
}

.room-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

.room-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 4px 9px
}

.room-card h3 {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 620
}

.room-handle {
    align-self: flex-start;
    color: var(--accent);
    font-size: 13px;
    font-weight: 550
}

.room-handle:hover {
    text-decoration: underline
}

.room-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
    flex: 1
}

.room-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px
}

.room-card-foot>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px
}

.room-card-foot .button {
    padding: 8px 14px;
    font-size: 12.5px
}

.my-rooms {
    margin-top: 28px
}

.my-rooms-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px
}

.my-rooms-list button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text)
}

.my-rooms-list button:hover {
    border-color: var(--border-strong, #3f3f46)
}

.my-rooms-list button span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.my-rooms-list strong {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.my-rooms-list small {
    color: var(--muted);
    font-size: 12px
}

.my-rooms-list svg {
    color: var(--muted);
    flex-shrink: 0
}

.profile-section-actions {
    display: flex;
    align-items: center;
    gap: 4px
}

.profile-room-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--accent);
    font-size: 13px
}

.profile-room-link span {
    flex: 1;
    text-align: left
}

.profile-room-link svg:last-child {
    color: var(--muted)
}

.edit-handle-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px
}

.chat-filters {
    overflow-x: auto;
    scrollbar-width: none
}

.chat-filters::-webkit-scrollbar {
    display: none
}

.chat-filters button {
    white-space: nowrap
}

.member-list .plain-icon {
    margin-left: 2px;
    color: var(--muted)
}

.member-list .plain-icon:hover {
    color: var(--gold)
}

@media(max-width:760px) {

    .rooms-grid,
    .my-rooms-list,
    .room-visibility {
        grid-template-columns: 1fr
    }

    .channels-toolbar {
        flex-direction: column;
        align-items: stretch
    }
}

.corals-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap
}

.admin-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8ab4f8;
    vertical-align: middle;
    margin-left: 4px
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #8ab4f81f;
    color: #8ab4f8;
    border: 1px solid rgba(138, 180, 248, .28);
    font-weight: 600;
    font-size: 13px
}

.profile-marks {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.variant-dots {
    display: flex;
    gap: 6px;
    margin: 8px 0 2px
}

.variant-dots i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-block
}

.variant-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.variant-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel-2, #17171a);
    color: var(--text);
    cursor: pointer;
    font-size: 13px
}

.variant-option i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    display: inline-block
}

.variant-option.selected {
    border-color: var(--gold);
    background: #d6b36a1f
}

.settings-gifts {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border)
}

.settings-gifts .section-heading {
    margin-bottom: 12px
}

.settings-gifts h3 {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px
}

.settings-gifts h3 span {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500
}

.settings-gifts-empty {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.settings-gifts .settings-gifts .admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px
}

.admin-stats>div {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.admin-stats strong {
    font-size: 26px;
    font-weight: 650
}

.admin-stats span {
    color: var(--muted);
    font-size: 13px
}

.admin-grant form {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px
}

.admin-grant p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px
}

.admin-users {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px
}

.admin-users>div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-2, #141416)
}

.admin-users>div>span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0
}

.admin-users strong {
    display: flex;
    align-items: center;
    font-size: 14px
}

.admin-users small {
    color: var(--muted);
    font-size: 12px
}

.admin-page .contacts-search {
    margin-top: 12px
}

@media(max-width:720px) {
    .admin-grant form {
        grid-template-columns: 1fr
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

.admin-users>div>span:not(.corals-amount) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0
}

.admin-users .corals-amount {
    flex: 0 0 auto;
    margin-left: auto
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap
}

.auth-consent {
    align-items: flex-start;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5
}

.auth-consent input {
    margin-top: 3px
}

.auth-consent .text-button {
    padding: 0;
    font-size: inherit
}

.legal-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow: auto;
    padding-right: 6px
}

.legal-copy h3 {
    font-size: 15px;
    margin-top: 8px
}

.legal-copy p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6
}

.global-search-section {
    padding: 12px 16px 4px
}

.global-search-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint)
}

.global-search-empty {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--faint)
}

.global-result .result-kind {
    font-size: 10.5px;
    color: var(--faint);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px
}

.result-joined {
    font-size: 11px;
    color: var(--accent);
    white-space: nowrap
}

.chat-list.compact .conversation-item {
    padding-top: 7px;
    padding-bottom: 7px
}

.chat-list.compact .conversation-item .avatar {
    width: 38px !important;
    height: 38px !important
}

.chat-list.compact .message-preview {
    font-size: 11.5px
}

.settings-menu-page {
    max-width: 560px
}

.settings-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 2px 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 10px
}

.settings-profile-head>div {
    flex: 1;
    min-width: 0
}

.settings-profile-head strong {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px
}

.settings-profile-head span {
    color: var(--muted);
    font-size: 13px
}

.settings-menu {
    display: flex;
    flex-direction: column
}

.settings-menu-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 6px;
    text-align: left;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    background: none
}

.settings-menu-row:last-child {
    border-bottom: none
}

.settings-menu-row:hover {
    background: var(--panel-2)
}

.settings-menu-icon {
    width: 30px;
    display: flex;
    justify-content: center;
    color: var(--muted)
}

.settings-menu-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.settings-menu-copy strong {
    font-size: 14px;
    font-weight: 500
}

.settings-menu-copy small {
    color: var(--faint);
    font-size: 11.5px;
    margin-top: 2px
}

.settings-menu-row>svg {
    color: var(--faint)
}

.settings-menu-row.danger strong {
    color: var(--danger)
}

.settings-value {
    color: var(--muted);
    font-size: 13px
}

.settings-premium-block {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft)
}

.settings-premium-block .settings-menu-icon {
    color: var(--gold)
}

.settings-subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px
}

.settings-subhead h2 {
    margin: 0;
    font-size: 18px
}

.settings-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0
}

.corals-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px
}

.corals-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0
}

html[data-motion=reduced] *,
html[data-motion=reduced] *:before,
html[data-motion=reduced] *:after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important
}

p:empty,
small:empty,
.field-hint:empty,
h3:empty,
.settings-version span:empty {
    display: none
}

/* ================= Coral OX addon styles ================= */
.ox-av {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center
}

.avatar.ox-photo {
    position: relative;
    padding: 0
}

.avatar.ox-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ox-ava-review {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d6b36a;
    color: #17130a;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel)
}

.ox-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--panel);
    background: var(--ok);
    z-index: 2;
    box-sizing: content-box
}

.ox-dot.online {
    background: #3ecf6b;
    box-shadow: 0 0 0 2px rgba(62, 207, 107, .22);
    animation: ox-pulse 2.4s ease-in-out infinite
}

.ox-dot.recent {
    background: #3ecf6b;
    opacity: .55
}

.ox-dot.away {
    background: var(--faint);
    opacity: .75
}

@keyframes ox-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(62, 207, 107, .35)
    }

    50% {
        box-shadow: 0 0 0 4px rgba(62, 207, 107, 0)
    }
}

.ox-presence-line {
    display: inline-block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px
}

.ox-presence-line.online {
    color: #5ada86
}

.ox-chat-sub.online {
    color: #5ada86
}

.ox-mention {
    display: inline;
    padding: 0;
    color: #9fd0ff;
    font-weight: 600;
    border-radius: 4px;
    background: none
}

.ox-mention:hover {
    text-decoration: underline;
    background: #9fd0ff1a
}

.ox-sender-btn {
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer
}

.ox-sender-btn:hover {
    text-decoration: underline
}

.ox-composer-tools {
    display: flex;
    align-items: center;
    gap: 2px
}

.ox-mentions-pop {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 6px);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 30
}

.composer {
    position: relative
}

.ox-mentions-pop button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 10px;
    text-align: left;
    color: var(--text)
}

.ox-mentions-pop button:hover {
    background: var(--hover)
}

.ox-mentions-pop span {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.ox-mentions-pop strong {
    font-size: 13px
}

.ox-mentions-pop small {
    color: var(--muted);
    font-size: 11.5px
}

/* stickers */
.ox-sticker-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 10px;
    width: min(420px, calc(100% - 20px));
    max-height: 340px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow: hidden
}

.ox-sticker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px
}

.ox-sticker-head strong {
    font-size: 13.5px
}

.ox-sticker-head small {
    color: var(--muted);
    font-size: 11.5px;
    flex: 1
}

.ox-sticker-tabs {
    display: flex;
    gap: 6px;
    padding: 0 12px 8px
}

.ox-sticker-tabs button {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--panel-3);
    color: var(--muted)
}

.ox-sticker-tabs button.active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600
}

.ox-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 4px;
    padding: 4px 10px 10px;
    overflow-y: auto
}

.ox-sticker-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 10px
}

.ox-sticker-grid button:hover {
    background: var(--hover)
}

.ox-sticker {
    width: 100%;
    height: auto;
    max-width: 52px;
    display: block
}

.ox-sticker-footer {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 10.5px;
    color: var(--faint)
}
.ox-sticker-add-tg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: calc(100% - 24px);
    margin: 0 12px 10px;
    padding: 9px 12px;
    border: 1px solid #2e5a4a;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(46, 90, 74, .35), rgba(23, 37, 30, .55));
    color: #7ee2c0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s
}

.ox-sticker-add-tg:hover {
    border-color: #4a8f74;
    background: linear-gradient(180deg, rgba(74, 143, 116, .4), rgba(23, 37, 30, .6))
}

.ox-sticker-tg-link {
    font-size: 9.5px;
    font-weight: 400;
    color: var(--faint);
    word-break: break-all
}


.ox-sticker-bubble {
    display: block;
    padding: 0;
    background: none;
    line-height: 0
}

.ox-sticker-bubble img {
    width: 148px;
    height: 148px;
    object-fit: contain
}

.message-row.is-sticker .message-bubble {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important
}

.message-row.is-sticker .message-time {
    background: var(--bubble-in);
    border-radius: 8px;
    padding: 1px 6px
}

/* sheets */
.ox-stack {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.ox-muted {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.5
}

.ox-sheet {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ox-sheet-hero {
    display: flex;
    align-items: center;
    gap: 16px
}

.ox-sheet-hero h2 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 6px
}

.ox-sheet-hero .profile-handle {
    padding: 0;
    margin-top: 2px
}

.ox-bio {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55
}

.ox-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.ox-sheet-actions .button {
    flex: 1 1 auto;
    min-width: 130px
}

.ox-admin-block {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ox-admin-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #8ab4f8
}

.ox-ban-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #e07a7a14;
    border: 1px solid rgba(224, 122, 122, .25);
    color: #f0a0a0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px
}

.ox-ban-banner strong {
    display: block;
    margin-bottom: 2px
}

.ox-ban-banner p {
    margin: 0;
    color: #e0b0b0;
    font-size: 12.5px
}

.ox-ban-user {
    display: flex;
    align-items: center;
    gap: 12px
}

.ox-ban-user div {
    display: flex;
    flex-direction: column
}

.ox-ban-user small {
    color: var(--muted);
    font-size: 12px
}

.ox-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.ox-chip {
    font-size: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    cursor: pointer
}

.ox-chip.active,
.ox-chip:hover {
    border-color: var(--accent);
    color: var(--text)
}

.ox-chip.active {
    background: var(--panel-3);
    font-weight: 600
}

.ox-rarity-gold {
    border-color: #d6b36a80;
    color: #e8c880;
    background: #d6b36a14
}

.ox-rarity-emerald {
    border-color: #5fe0a080;
    color: #7cebb5;
    background: #5fe0a014
}

.ox-rarity-platinum {
    border-color: #cfd8e380;
    color: #e2e8f0;
    background: #cfd8e314
}

.ox-rarity-onyx {
    border-color: #7a7f8a80;
    color: #b9bfca;
    background: #0f10131f
}

/* banned screen */
.ox-banned-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 0%, #1a1012 0%, var(--bg) 60%);
    z-index: 60
}

.ox-banned-card {
    max-width: 460px;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow)
}

.ox-banned-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e07a7a1f;
    color: #f0a0a0
}

.ox-banned-card h2 {
    margin: 0;
    font-size: 22px
}

.ox-banned-lead {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.ox-banned-reason {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.ox-banned-reason span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--faint)
}

.ox-banned-reason strong {
    font-size: 14px
}

.ox-banned-card small {
    color: var(--faint);
    font-size: 12px;
    line-height: 1.5
}

.ox-banned-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px
}

.ox-report-done {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ok);
    font-size: 14px;
    font-weight: 600;
    background: #9dc4a414;
    border: 1px solid #9dc4a433;
    border-radius: 12px;
    padding: 14px
}

.ox-report-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px
}

.ox-report-list>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--panel-2)
}

.ox-report-list strong {
    font-size: 13px
}

.ox-report-list small {
    color: var(--muted);
    font-size: 12px
}

/* avatar editor */
.ox-avatar-editor {
    display: flex;
    gap: 22px;
    flex-wrap: wrap
}

.ox-editor-stage {
    position: relative;
    width: 340px;
    height: 340px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panel-2);
    touch-action: none
}

.ox-editor-canvas {
    width: 340px;
    height: 340px;
    display: block;
    cursor: grab
}

.ox-editor-canvas.ready:active {
    cursor: grabbing
}

.ox-editor-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #ffffff22, inset 0 0 0 60px #00000000;
    pointer-events: none
}

.ox-editor-ring:after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px dashed #ffffff33
}

.ox-editor-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    cursor: pointer
}

.ox-editor-placeholder strong {
    font-size: 14px;
    color: var(--text)
}

.ox-editor-placeholder small {
    font-size: 12px
}

.ox-editor-placeholder input {
    display: none
}

.ox-editor-controls {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ox-slider {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 550
}

.ox-slider input {
    width: 100%;
    accent-color: var(--accent)
}

.ox-editor-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.ox-editor-buttons .button {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12.5px
}

.ox-editor-note {
    color: var(--faint);
    font-size: 12px;
    line-height: 1.5;
    margin: 0
}

.ox-editor-controls .modal-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center
}

.ox-avatar-edit-wrap {
    position: relative;
    padding: 0;
    border-radius: 50%
}

.ox-avatar-edit-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel)
}

.ox-account-head {
    align-items: flex-start
}

.ox-account-head p {
    margin: 4px 0 10px;
    max-width: 320px
}

.ox-color-row {
    margin-top: 14px
}

/* support / premium plans */
.ox-support-hero {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: linear-gradient(135deg, #d6b36a1f, #d6b36a05);
    border: 1px solid #d6b36a40;
    border-radius: 14px;
    padding: 14px;
    color: #e8c880
}

.ox-support-hero strong {
    display: block;
    font-size: 14px;
    color: var(--text)
}

.ox-support-hero small {
    color: var(--muted);
    font-size: 12px
}

.ox-support-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted)
}

.ox-support-steps span {
    display: flex;
    align-items: center;
    gap: 8px
}

.ox-support-steps b {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--panel-3);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px
}

.ox-price-tag {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0 12px
}

.ox-price-tag b {
    font-size: 26px;
    color: var(--text)
}

.ox-price-tag span {
    color: var(--muted);
    font-size: 13px
}

.ox-price-tag small {
    font-size: 11.5px;
    color: var(--faint)
}

/* nft / upgrade */
.ox-nft-banner {
    display: flex;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, #1b1a15, #121216);
    border: 1px solid #d6b36a3d;
    border-radius: 20px;
    padding: 18px 22px;
    margin: 18px 0 6px;
    flex-wrap: wrap
}

.ox-nft-banner-art {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    background: radial-gradient(70% 70% at 50% 30%, #2a2620, #0f0f12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ox-nft-banner h3 {
    margin: 6px 0 6px;
    font-size: 19px
}

.ox-nft-banner p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 520px
}

.ox-nft-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8c880
}

.ox-chance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0
}

.ox-chance-chips .ox-chip {
    cursor: default
}

.ox-nft-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px
}

.ox-nft-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10.5px;
    letter-spacing: .08em;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: #d6b36a;
    color: #17130a
}

.ox-upgrade-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    color: #e8c880;
    background: #d6b36a1a;
    border: 1px solid #d6b36a40;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer
}

.ox-upgrade-inline:hover {
    background: #d6b36a2e
}

.ox-upgrade-top {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap
}

.ox-upgrade-top>div {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.ox-upgrade-top strong {
    font-size: 16px
}

.ox-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    max-height: 250px;
    overflow: auto;
    padding: 2px
}

.ox-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-2)
}

.ox-pick small {
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
    line-height: 1.2
}

.ox-pick.selected {
    border-color: var(--gold);
    background: #d6b36a1a;
    box-shadow: 0 0 0 1px #d6b36a66 inset
}

.ox-upgrade-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0
}

.ox-upgrade-spin {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #d6b36a33;
    border-top-color: #e8c880;
    animation: spin 1s linear infinite
}

.ox-upgrade-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center
}

.ox-upgrade-chosen {
    padding: 10px;
    border-radius: 22px;
    background: radial-gradient(60% 60% at 50% 35%, #ffffff14, #0000)
}

.ox-upgrade-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid #d6b36a3d;
    border-radius: 14px;
    padding: 14px;
    margin: 12px 0
}

.ox-upgrade-box strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e8c880;
    font-size: 13px
}

.ox-upgrade-box p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted)
}

.ox-hist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px
}

.ox-hist>div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--muted);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 6px
}

.ox-hist small {
    color: var(--faint);
    font-size: 11.5px
}

.ox-collection /* member moderation */
.ox-member-actions {
    display: flex;
    align-items: center;
    gap: 4px
}

.ox-mini-btn {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    white-space: nowrap
}

.ox-mini-btn:hover {
    color: var(--text);
    border-color: #3f3f46
}

.ox-mini-btn.danger {
    color: #f0a0a0;
    border-color: #573033;
    background: #3a222433
}

.ox-mini-btn.danger:hover {
    background: #3a2224
}

.ox-member-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow: auto
}

.ox-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--panel-2)
}

.ox-member-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1px;
    color: var(--text)
}

.ox-member-copy strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ox-member-copy small {
    font-size: 11.5px;
    color: var(--muted)
}

.ox-room-bans {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: 10px
}

.ox-room-bans>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--muted)
}

.ox-roomban-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #e07a7a14;
    color: #f0a0a0;
    font-size: 12px;
    border-bottom: 1px solid rgba(224, 122, 122, .2)
}

.ox-admin-user.is-banned {
    opacity: .72
}

/* profile panel tweaks */
.profile-security-row {
    display: flex;
    gap: 8px;
    padding: 10px 0 2px;
    flex-wrap: wrap
}

.profile-security-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 4px 10px
}

.profile-security-link:hover {
    color: var(--text)
}

.profile-security-link.muted {
    color: var(--faint)
}

/* animated gifts */
.ox-cat .ox-cat-head {
    transform-origin: 90px 100px;
    animation: ox-cat-bob 3.4s ease-in-out infinite
}

.ox-cat .ox-cat-tail {
    transform-origin: 135px 125px;
    animation: ox-cat-tail 2.8s ease-in-out infinite
}

.ox-cat-eyes {
    transform-origin: 90px 78px;
    animation: ox-cat-blink 5.2s infinite
}

.ox-cat-mouth {
    transform-origin: 90px 96px;
    animation: ox-cat-talk 3.4s ease-in-out infinite
}

.ox-cat-sparkles .ox-sp1 {
    transform-origin: 150px 41px;
    animation: ox-spark 3.1s ease-in-out infinite
}

.ox-cat-sparkles .ox-sp2 {
    transform-origin: 26px 51px;
    animation: ox-spark 3.7s ease-in-out infinite .8s
}

@keyframes ox-cat-bob {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg)
    }

    50% {
        transform: translateY(-3px) rotate(1.4deg)
    }
}

@keyframes ox-cat-tail {

    0%,
    100% {
        transform: rotate(-6deg)
    }

    50% {
        transform: rotate(9deg)
    }
}

@keyframes ox-cat-blink {

    0%,
    92%,
    100% {
        transform: scaleY(1)
    }

    95% {
        transform: scaleY(.12)
    }
}

@keyframes ox-cat-talk {

    0%,
    100% {
        transform: scaleY(1)
    }

    45% {
        transform: scaleY(.55)
    }
}

@keyframes ox-spark {

    0%,
    100% {
        opacity: .35;
        transform: scale(.8) rotate(0)
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(20deg)
    }
}

.ox-car .ox-car-wheel {
    transform-origin: center;
    animation: ox-wheel 2.6s linear infinite
}

.ox-wheel-l {
    transform-origin: 52px 138px
}

.ox-wheel-r {
    transform-origin: 126px 138px
}

@keyframes ox-wheel {
    to {
        transform: rotate(360deg)
    }
}

.ox-car-glow {
    animation: ox-glow 3.6s ease-in-out infinite
}

@keyframes ox-glow {

    0%,
    100% {
        opacity: .45
    }

    50% {
        opacity: .9
    }
}

.ox-car-sparks .ox-sp1 {
    transform-origin: 158px 49px;
    animation: ox-spark 2.8s ease-in-out infinite
}

.ox-car-sparks .ox-sp2 {
    transform-origin: 22px 61px;
    animation: ox-spark 3.3s ease-in-out infinite .6s
}

html[data-motion=reduced] .ox-cat .ox-cat-head,
html[data-motion=reduced] .ox-cat .ox-cat-tail,
html[data-motion=reduced] .ox-cat-eyes,
html[data-motion=reduced] .ox-cat-mouth,
html[data-motion=reduced] .ox-cat-sparkles .ox-sp1,
html[data-motion=reduced] .ox-cat-sparkles .ox-sp2,
html[data-motion=reduced] .ox-car .ox-car-wheel,
html[data-motion=reduced] .ox-car-glow,
html[data-motion=reduced] .ox-car-sparks .ox-sp1,
html[data-motion=reduced] .ox-car-sparks .ox-sp2 {
    animation: none
}

@media(max-width:640px) {

    .ox-editor-stage,
    .ox-editor-canvas {
        width: min(78vw, 300px);
        height: min(78vw, 300px)
    }

    .ox-sticker-panel {
        right: 0;
        left: 0;
        width: auto
    }

    .ox-sheet-hero {
        gap: 12px
    }
}

/* admin users layout fix */
.admin-users>div.ox-admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 12px
}

.admin-users>div.ox-admin-user>span:not(.corals-amount):not(.ox-av) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start
}

.admin-users>div.ox-admin-user>span>strong {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap
}

.admin-users>div.ox-admin-user>span>small {
    color: var(--muted);
    font-size: 11.5px
}

.admin-users>div.ox-admin-user>span.ox-av,
.admin-users>div.ox-admin-user>.ox-av {
    flex: 0 0 auto !important;
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.admin-users>div.ox-admin-user>span.corals-amount {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--gold);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: auto
}

.admin-users>div.ox-admin-user>.ox-mini-btn {
    flex: 0 0 auto;
    min-width: 88px;
    text-align: center;
    background: var(--panel-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--text)
}

.admin-users>div.ox-admin-user>.ox-mini-btn:hover {
    background: var(--hover)
}

/* profile panel local nav */
.profile-seg {
    display: flex;
    gap: 4px;
    padding: 2px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    margin: 0 0 12px
}

.profile-seg button {
    flex: 1;
    font-size: 11.5px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--muted);
    background: none
}

.profile-seg button.active {
    background: var(--panel-3);
    color: var(--text);
    font-weight: 600
}

.ox-upgrade-auto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ok);
    background: #9dc4a412;
    border: 1px solid #9dc4a433;
    border-radius: 12px;
    padding: 10px 12px
}

.ox-upgrade-auto p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted)
}

.ox-upgrade-auto svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ok)
}

/* member list in the profile sidebar */
.member-list>div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 6px 4px
}

.member-list>div>span:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0
}

.member-list>div>span:first-of-type strong {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.member-list>div>span:first-of-type small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.member-list .member-role {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--faint);
    text-transform: lowercase
}

.member-list .ox-member-actions {
    flex: 0 0 auto;
    gap: 3px
}

.member-list .ox-mini-btn {
    font-size: 10.5px;
    padding: 3px 8px
}

.member-list .plain-icon {
    padding: 2px
}

/* mobile chat header fix */
@media(max-width:640px) {
    .chat-header {
        gap: 6px;
        padding: 8px 10px
    }

    .chat-header .chat-person {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px
    }

    .chat-header .chat-person>span {
        min-width: 0
    }

    .chat-header .chat-person strong {
        display: block;
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .chat-header .chat-person small {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .chat-header .avatar,
    .chat-header .ox-av {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 auto
    }

    .chat-header-actions {
        gap: 0;
        flex: 0 0 auto
    }

    .chat-header-actions .icon-button {
        width: 32px;
        height: 32px
    }
}
.ox-sticker-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    cursor: pointer
}

.ox-sticker-grid button {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 10px
}

.ox-sticker-grid button:hover {
    background: var(--hover)
}

.ox-sticker-bubble {
    background: none;
    border: none;
    padding: 2px
}

.premium-plan-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.premium-plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #222);
    transition: background .15s;
    text-align: left;
}
.premium-plan-item:hover {
    background: var(--bg-hover, #f5f5f5);
}
.premium-plan-item small {
    font-weight: 400;
    color: var(--text-secondary, #888);
    font-size: 13px;
}
.premium-plans-note {
    font-size: 13px;
    color: var(--text-secondary, #888);
    text-align: center;
    padding: 8px 0;
}


/* Coral — спокойная морская палитра */
:root {
  --bg:#101b26; --panel:#142330; --panel-2:#1a2d3b; --panel-3:#213747;
  --border:#2b4657; --border-soft:#213849; --text:#eef7fa; --muted:#a7c1cc;
  --faint:#7795a5; --accent:#85c5df; --accent-ink:#102d3c; --hover:#223b4a;
  --selected:#254858; --bubble-in:#203544; --bubble-out:#315e70;
}
:root[data-theme=light], .app.light {
  --bg:#edf6f9; --panel:#fbfeff; --panel-2:#edf6f9; --panel-3:#dceef3;
  --border:#cbe0e7; --border-soft:#dcebf0; --text:#183442; --muted:#5c7a89;
  --faint:#8aa6b2; --accent:#327b9d; --accent-ink:#fff; --hover:#e3f1f5;
  --selected:#d1e8f0; --bubble-in:#fff; --bubble-out:#cbe6ef;
}
.brand-symbol { color:#78b8d9; }
.mini-brand-dot { background:#78b8d9; }
.auth-brand-side { background:radial-gradient(ellipse at 35% 40%, #274e60 0%, #122732 50%, #101b26 100%); }
.auth-coral-art { display:flex; align-items:center; justify-content:center; width:220px; height:220px; margin:30px auto; border-radius:50%; background:radial-gradient(circle, rgba(120,184,217,.22), transparent 70%); }
.auth-coral-art .brand-symbol, .auth-coral-art .brand-small .brand-symbol { width:128px; height:128px; filter:drop-shadow(0 18px 30px rgba(87,167,207,.22)); }
::selection { background:#467f9a; color:#fff; }

/* Coral: чёрная тема */
:root, :root[data-theme=light], .app.light {
  color-scheme: dark; --bg:#090a0c; --panel:#101114; --panel-2:#17191c; --panel-3:#202226;
  --border:#303238; --border-soft:#24262b; --text:#f4f5f6; --muted:#a3a7ad; --faint:#777b83;
  --accent:#dce6ec; --accent-ink:#111417; --hover:#22252a; --selected:#292d32;
  --bubble-in:#1e2125; --bubble-out:#30353a;
}
.auth-brand-side {background:radial-gradient(ellipse at 35% 40%, #242b30 0%, #101317 58%, #090a0c 100%)}
.auth-coral-art {background:radial-gradient(circle, rgba(160,192,205,.15), transparent 70%)}
::selection {background:#657986; color:#fff}

.ox-sticker-image { display:block; object-fit:contain; max-width:100%; }
.coral-emoji-picker { display:flex; flex-direction:column; width:min(360px, calc(100vw - 32px)); max-height:min(440px, 65vh); padding:10px; gap:6px; z-index:50; }
.coral-emoji-tabs { display:flex; overflow-x:auto; flex-shrink:0; gap:2px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.coral-emoji-tabs button { padding:6px; font-size:19px; border-radius:8px; flex-shrink:0; }
.coral-emoji-tabs button.active { background:var(--selected); }
.coral-emoji-heading { color:var(--muted); font-size:12px; font-weight:600; padding:4px 5px; }
.coral-emoji-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; overflow-y:auto; min-height:0; }
.coral-emoji-grid button { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size:23px; min-height:42px; padding:4px; border-radius:8px; }

/* Channel details */
.coral-channel-profile { background: #111012; }
.coral-channel-profile .profile-hero { background: #111012; padding: 20px 24px 24px; text-align: center; }
.coral-channel-profile .profile-hero h2 { margin-top: 14px; }
.coral-channel-info { background: #1b191b; padding: 20px 24px; display: grid; gap: 20px; }
.coral-channel-info-link { border: 0; background: transparent; color: #a4bfdb; text-align: left; padding: 0; cursor: pointer; overflow-wrap: anywhere; font: inherit; }
.coral-channel-info small, .coral-channel-description small { display: block; margin-top: 6px; color: #929098; font-size: 13px; }
.coral-channel-description p { color: #e7e4e7; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.coral-open-channel { width: 100%; padding: 17px 24px; border: 0; background: #0b0b0c; color: #e8efff; text-align: left; font-weight: 700; cursor: pointer; text-transform: uppercase; }

.coral-message-link { color: #65b5ff; text-decoration: underline; overflow-wrap: anywhere; }
.coral-message-link:hover { color: #a9d8ff; }

/* Unread badge in chat list */
.conversation-bottom .unread-count { background: #48474c; color: #fff; font-size: 13px; font-weight: 600; min-width: 23px; height: 23px; padding: 0 7px; border-radius: 999px; line-height: 1; font-variant-numeric: tabular-nums; }